@descope/web-components-ui 1.0.132 → 1.0.134
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +69 -54
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +69 -54
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/803.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-link-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/booleanFieldMixin.js +1 -0
- package/src/components/boolean-fields/commonStyles.js +1 -0
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +10 -2
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +1 -3
- package/src/components/descope-link/LinkClass.js +5 -4
- package/src/theme/components/checkbox.js +8 -5
- package/src/theme/components/inputWrapper.js +1 -0
- package/src/theme/components/link.js +0 -4
- package/src/theme/components/switchToggle.js +11 -5
package/dist/umd/803.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[803],{818:(n,t,e)=>{e.d(t,{h:()=>l});var i=e(4567),a=e(1250);const l=n=>class extends n{constructor(){super()}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"]}),(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}\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 opacity: 0;\n padding: 0;\n}\n[required] vaadin-checkbox [slot="label"] {\n\tpadding-right: 1em;\n}\nvaadin-checkbox::part(checkbox) {\n\tmargin: 0;\n}\nvaadin-checkbox[focus-ring]::part(checkbox) {\n\tbox-shadow: none;\n}\n\ndescope-boolean-field-internal {\n\t-webkit-mask-image: none;\n\tmin-height: 0;\n\tpadding: 0;\n}\n\n[slot="label"],\nvaadin-checkbox,\nvaadin-checkbox::part(checkbox) {\n\theight: 100%;\n\tcursor: pointer;\n}\n`}}]);
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[803],{818:(n,t,e)=>{e.d(t,{h:()=>l});var i=e(4567),a=e(1250);const l=n=>class extends n{constructor(){super()}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}\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 opacity: 0;\n padding: 0;\n}\n[required] vaadin-checkbox [slot="label"] {\n\tpadding-right: 1em;\n}\nvaadin-checkbox::part(checkbox) {\n\tmargin: 0;\n}\nvaadin-checkbox[focus-ring]::part(checkbox) {\n\tbox-shadow: none;\n}\n\ndescope-boolean-field-internal {\n\t-webkit-mask-image: none;\n\tmin-height: 0;\n\tpadding: 0;\n}\n\n[slot="label"],\nvaadin-checkbox,\nvaadin-checkbox::part(checkbox) {\n\theight: 100%;\n\tcursor: pointer;\n}\n`}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>g});var o=r(4567),p=r(2061),l=r(9241),
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[726],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>g});var o=r(4567),p=r(2061),l=r(9241),i=r(818),c=r(6882),n=r(4201);const a=(0,o.iY)("checkbox"),{host:s,component:d,checkboxElement:h,checkboxSurface:u,checkboxHiddenLabel:b,label:y,requiredIndicator:f,helperText:x,errorMessage:k}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::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"]'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,p.qC)((0,l.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[s,h,y,b],fontFamily:[y,b,x,k],labelTextColor:[{...y,property:"color"},{...f,property:"color"},{...y,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...f,property:"content"},labelFontWeight:[{...y,property:"font-weight"},{...b,property:"font-weight"}],labelSpacing:[{...y,property:"left"},{...b,property:"padding-left"}],inputValueTextColor:{...u,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"},{...u,property:"font-size"},{...d,property:"font-size"},{...b,property:"line-height"},{...y,property:"margin-left"},{...y,property:"line-height"}]}}),l.e4,l.dj,l.Ae,i.h)((0,l.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${c.Z}\n\t\t\t${(0,n.bi)(g.cssVarList)}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a}));r(9515),r(9789),r(6676),customElements.define(a,g)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{9203:(t,e,r)=>{r.r(e),r.d(e,{SwitchToggleClass:()=>g});var o=r(4567),
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[483],{9203:(t,e,r)=>{r.r(e),r.d(e,{SwitchToggleClass:()=>g});var o=r(4567),p=r(2061),a=r(9241),c=r(818),n=r(6882),i=r(4201);const l=(0,o.iY)("switch-toggle"),{host:s,component:d,checkboxElement:h,checkboxSurface:b,checkboxHiddenLabel:k,label:y,requiredIndicator:u,helperText:f,errorMessage:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::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"]'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},g=(0,p.qC)((0,a.yk)({mappings:{hostWidth:{...s,property:"width"},fontSize:[d,y,k],fontFamily:[y,f,x],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"},labelSpacing:[{...y,property:"padding-left"},{...k,property:"padding-left"}],labelLineHeight:[{...y,property:"line-height"},{...k,property:"line-height"}],labelFontWeight:[{...y,property:"font-weight"},{...k,property:"font-weight"}],labelTextColor:[{...y,property:"color"},{...u,property:"color"},{...y,property:"-webkit-text-fill-color"}],labelRequiredIndicator:{...u,property:"content"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"}}}),a.e4,a.dj,a.Ae,c.h)((0,a.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${n.Z}\n\t\t\t${(0,i.bi)(g.cssVarList)}\n\t\t\tvaadin-text-field::part(label) {\n\t\t\t\tleft: calc(var(${g.cssVarList.trackWidth}) + var(${g.cssVarList.trackBorderWidth}) * 2);\n\t\t\t}\n\t\t\tvaadin-checkbox[active]::part(checkbox) {\n\t\t\t\ttransform: none;\n\t\t\t}\n\t\t\tvaadin-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:["tabindex"],componentName:l}));r(9515),r(9789),r(6676),customElements.define(l,g)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[58],{5846:(t,e,o)=>{o.r(e),o.d(e,{LinkClass:()=>
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[58],{5846:(t,e,o)=>{o.r(e),o.d(e,{LinkClass:()=>k});var s=o(9241),n=o(693),r=o(2138),i=o(2061),a=o(4567);const c=(0,a.iY)("link");class l extends((0,n.s)({componentName:c,baseSelector:":host a"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t\ttext-decoration: none;\n\t\t}\n\t\t:host a:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\t\t</style>\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t",(0,a.oP)(this,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),(0,a.oP)(this,this.shadowRoot.querySelector("descope-text"),{includeAttrs:["mode","variant"]})}}const p={host:{selector:()=>":host"},anchor:{},wrapper:{selector:()=>":host > div"},text:{selector:()=>r.k.componentName}},{anchor:h,text:d,host:u,wrapper:x}=p,k=(0,i.qC)((0,s.yk)({mappings:{hostWidth:{...u,property:"width"},textAlign:x,textColor:[{...h,property:"color"},{...d,property:r.k.cssVarList.textColor}],cursor:h}}),s.e4,s.Ae)(l);o(1876),customElements.define(c,k)}}]);
|
package/package.json
CHANGED
@@ -56,6 +56,7 @@ export const CheckboxClass = compose(
|
|
56
56
|
labelTextColor: [
|
57
57
|
{ ...label, property: 'color' },
|
58
58
|
{ ...requiredIndicator, property: 'color' },
|
59
|
+
{ ...label, property: '-webkit-text-fill-color' }
|
59
60
|
],
|
60
61
|
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
61
62
|
|
@@ -69,19 +70,26 @@ export const CheckboxClass = compose(
|
|
69
70
|
],
|
70
71
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
71
72
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
73
|
+
|
72
74
|
inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
|
75
|
+
inputBorderWidth: { ...checkboxElement, property: 'border-width' },
|
76
|
+
inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
|
77
|
+
inputBorderColor: { ...checkboxElement, property: 'border-color' },
|
78
|
+
inputBorderStyle: { ...checkboxElement, property: 'border-style' },
|
79
|
+
|
73
80
|
inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
74
81
|
inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
75
82
|
inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
|
76
83
|
inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
84
|
+
|
77
85
|
inputSize: [
|
78
86
|
{ ...checkboxElement, property: 'width' },
|
79
|
-
{ ...label, property: 'margin-left' },
|
80
87
|
{ ...checkboxElement, property: 'height' },
|
81
88
|
{ ...checkboxSurface, property: 'font-size' },
|
82
89
|
{ ...component, property: 'font-size' },
|
90
|
+
{ ...checkboxHiddenLabel, property: 'line-height' },
|
91
|
+
{ ...label, property: 'margin-left' },
|
83
92
|
{ ...label, property: 'line-height' },
|
84
|
-
{ ...checkboxHiddenLabel, property: 'line-height' }
|
85
93
|
],
|
86
94
|
},
|
87
95
|
}),
|
@@ -88,6 +88,7 @@ export const SwitchToggleClass = compose(
|
|
88
88
|
labelTextColor: [
|
89
89
|
{ ...label, property: 'color' },
|
90
90
|
{ ...requiredIndicator, property: 'color' },
|
91
|
+
{ ...label, property: '-webkit-text-fill-color' }
|
91
92
|
],
|
92
93
|
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
93
94
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
@@ -113,9 +114,6 @@ export const SwitchToggleClass = compose(
|
|
113
114
|
vaadin-checkbox[active]::part(checkbox) {
|
114
115
|
transform: none;
|
115
116
|
}
|
116
|
-
vaadin-checkbox[checked]::part(checkbox) {
|
117
|
-
background: none;
|
118
|
-
}
|
119
117
|
vaadin-checkbox::part(checkbox)::after {
|
120
118
|
position: absolute;
|
121
119
|
opacity: 1;
|
@@ -21,6 +21,10 @@ class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }
|
|
21
21
|
}
|
22
22
|
:host a {
|
23
23
|
display: inline;
|
24
|
+
text-decoration: none;
|
25
|
+
}
|
26
|
+
:host a:hover {
|
27
|
+
text-decoration: underline;
|
24
28
|
}
|
25
29
|
</style>
|
26
30
|
<div>
|
@@ -64,10 +68,7 @@ export const LinkClass = compose(
|
|
64
68
|
{ ...text, property: TextClass.cssVarList.textColor }
|
65
69
|
],
|
66
70
|
cursor: anchor,
|
67
|
-
|
68
|
-
textUnderlineStyle: { ...anchor, property: 'border-bottom-style' },
|
69
|
-
textUnderlineColor: { ...anchor, property: 'border-bottom-color' }
|
70
|
-
},
|
71
|
+
}
|
71
72
|
}),
|
72
73
|
draggableMixin,
|
73
74
|
componentNameValidationMixin
|
@@ -13,22 +13,25 @@ const checkbox = {
|
|
13
13
|
[vars.labelTextColor]: refs.labelTextColor,
|
14
14
|
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
15
15
|
[vars.labelFontWeight]: '400',
|
16
|
-
[vars.labelSpacing]: '0.
|
16
|
+
[vars.labelSpacing]: '0.75em',
|
17
17
|
[vars.inputOutlineWidth]: refs.outlineWidth,
|
18
18
|
[vars.inputOutlineOffset]: refs.outlineOffset,
|
19
19
|
[vars.inputOutlineColor]: refs.outlineColor,
|
20
20
|
[vars.inputOutlineStyle]: refs.outlineStyle,
|
21
21
|
[vars.inputBorderRadius]: refs.borderRadius,
|
22
|
-
[vars.
|
22
|
+
[vars.inputBorderColor]: refs.borderColor,
|
23
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
24
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
25
|
+
[vars.inputBackgroundColor]: refs.inputBackgroundColor,
|
23
26
|
[vars.inputSize]: '2em',
|
24
27
|
|
25
28
|
_checked: {
|
26
|
-
[vars.inputBackgroundColor]:
|
27
|
-
[vars.inputValueTextColor]:
|
29
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
30
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
28
31
|
},
|
29
32
|
|
30
33
|
_disabled: {
|
31
|
-
[vars.
|
34
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
32
35
|
},
|
33
36
|
};
|
34
37
|
|
@@ -60,6 +60,7 @@ const [theme, refs, vars] = createHelperVars({
|
|
60
60
|
|
61
61
|
_disabled: {
|
62
62
|
labelTextColor: globalRefs.colors.surface.main,
|
63
|
+
borderColor: globalRefs.colors.surface.main,
|
63
64
|
valueTextColor: globalRefs.colors.surface.dark,
|
64
65
|
placeholderTextColor: globalRefs.colors.surface.dark,
|
65
66
|
backgroundColor: globalRefs.colors.surface.main
|
@@ -20,7 +20,7 @@ const switchToggle = {
|
|
20
20
|
|
21
21
|
[vars.trackBorderStyle]: refs.borderStyle,
|
22
22
|
[vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
23
|
-
[vars.trackBorderColor]:
|
23
|
+
[vars.trackBorderColor]: refs.borderColor,
|
24
24
|
[vars.trackBackgroundColor]: 'none',
|
25
25
|
[vars.trackBorderRadius]: globalRefs.radius.md,
|
26
26
|
[vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
@@ -42,16 +42,22 @@ const switchToggle = {
|
|
42
42
|
[vars.hostWidth]: refs.width,
|
43
43
|
|
44
44
|
_checked: {
|
45
|
-
[vars.trackBorderColor]:
|
45
|
+
[vars.trackBorderColor]: refs.borderColor,
|
46
|
+
[vars.trackBackgroundColor]: refs.backgroundColor,
|
46
47
|
[vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
|
47
|
-
[vars.knobColor]:
|
48
|
+
[vars.knobColor]: refs.valueTextColor,
|
48
49
|
[vars.knobTextColor]: refs.valueTextColor,
|
49
50
|
},
|
50
51
|
|
51
52
|
_disabled: {
|
52
|
-
[vars.knobColor]: globalRefs.colors.surface.
|
53
|
+
[vars.knobColor]: globalRefs.colors.surface.light,
|
53
54
|
[vars.trackBorderColor]: globalRefs.colors.surface.main,
|
54
|
-
[vars.trackBackgroundColor]: globalRefs.colors.surface.
|
55
|
+
[vars.trackBackgroundColor]: globalRefs.colors.surface.main,
|
56
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
57
|
+
_checked: {
|
58
|
+
[vars.knobColor]: globalRefs.colors.surface.light,
|
59
|
+
[vars.trackBackgroundColor]: globalRefs.colors.surface.main,
|
60
|
+
}
|
55
61
|
},
|
56
62
|
|
57
63
|
_invalid: {
|