@descope/web-components-ui 1.0.133 → 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 +64 -46
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +64 -46
- 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/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/theme/components/checkbox.js +8 -5
- package/src/theme/components/inputWrapper.js +1 -0
- package/src/theme/components/switchToggle.js +11 -5
package/dist/index.esm.js
CHANGED
@@ -1443,6 +1443,7 @@ const booleanFieldMixin = (superclass) =>
|
|
1443
1443
|
'size',
|
1444
1444
|
'label',
|
1445
1445
|
'invalid',
|
1446
|
+
'disabled'
|
1446
1447
|
]
|
1447
1448
|
});
|
1448
1449
|
|
@@ -1460,6 +1461,7 @@ ${resetInputFieldDefaultWidth()}
|
|
1460
1461
|
|
1461
1462
|
.wrapper {
|
1462
1463
|
display: flex;
|
1464
|
+
box-sizing: border-box;
|
1463
1465
|
}
|
1464
1466
|
|
1465
1467
|
vaadin-text-field {
|
@@ -1562,6 +1564,7 @@ const CheckboxClass = compose(
|
|
1562
1564
|
labelTextColor: [
|
1563
1565
|
{ ...label$8, property: 'color' },
|
1564
1566
|
{ ...requiredIndicator$7, property: 'color' },
|
1567
|
+
{ ...label$8, property: '-webkit-text-fill-color' }
|
1565
1568
|
],
|
1566
1569
|
labelRequiredIndicator: { ...requiredIndicator$7, property: 'content' },
|
1567
1570
|
|
@@ -1575,19 +1578,26 @@ const CheckboxClass = compose(
|
|
1575
1578
|
],
|
1576
1579
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
1577
1580
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
1581
|
+
|
1578
1582
|
inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
|
1583
|
+
inputBorderWidth: { ...checkboxElement, property: 'border-width' },
|
1584
|
+
inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
|
1585
|
+
inputBorderColor: { ...checkboxElement, property: 'border-color' },
|
1586
|
+
inputBorderStyle: { ...checkboxElement, property: 'border-style' },
|
1587
|
+
|
1579
1588
|
inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
1580
1589
|
inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
1581
1590
|
inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
|
1582
1591
|
inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
1592
|
+
|
1583
1593
|
inputSize: [
|
1584
1594
|
{ ...checkboxElement, property: 'width' },
|
1585
|
-
{ ...label$8, property: 'margin-left' },
|
1586
1595
|
{ ...checkboxElement, property: 'height' },
|
1587
1596
|
{ ...checkboxSurface, property: 'font-size' },
|
1588
1597
|
{ ...component$1, property: 'font-size' },
|
1598
|
+
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
1599
|
+
{ ...label$8, property: 'margin-left' },
|
1589
1600
|
{ ...label$8, property: 'line-height' },
|
1590
|
-
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
1591
1601
|
],
|
1592
1602
|
},
|
1593
1603
|
}),
|
@@ -1689,6 +1699,7 @@ const SwitchToggleClass = compose(
|
|
1689
1699
|
labelTextColor: [
|
1690
1700
|
{ ...label$7, property: 'color' },
|
1691
1701
|
{ ...requiredIndicator$6, property: 'color' },
|
1702
|
+
{ ...label$7, property: '-webkit-text-fill-color' }
|
1692
1703
|
],
|
1693
1704
|
labelRequiredIndicator: { ...requiredIndicator$6, property: 'content' },
|
1694
1705
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
@@ -1714,9 +1725,6 @@ const SwitchToggleClass = compose(
|
|
1714
1725
|
vaadin-checkbox[active]::part(checkbox) {
|
1715
1726
|
transform: none;
|
1716
1727
|
}
|
1717
|
-
vaadin-checkbox[checked]::part(checkbox) {
|
1718
|
-
background: none;
|
1719
|
-
}
|
1720
1728
|
vaadin-checkbox::part(checkbox)::after {
|
1721
1729
|
position: absolute;
|
1722
1730
|
opacity: 1;
|
@@ -5560,15 +5568,15 @@ const globals = {
|
|
5560
5568
|
};
|
5561
5569
|
const vars$m = getThemeVars(globals);
|
5562
5570
|
|
5563
|
-
const globalRefs$
|
5571
|
+
const globalRefs$b = getThemeRefs(globals);
|
5564
5572
|
const compVars$2 = ButtonClass.cssVarList;
|
5565
5573
|
|
5566
5574
|
const mode = {
|
5567
|
-
primary: globalRefs$
|
5568
|
-
secondary: globalRefs$
|
5569
|
-
success: globalRefs$
|
5570
|
-
error: globalRefs$
|
5571
|
-
surface: globalRefs$
|
5575
|
+
primary: globalRefs$b.colors.primary,
|
5576
|
+
secondary: globalRefs$b.colors.secondary,
|
5577
|
+
success: globalRefs$b.colors.success,
|
5578
|
+
error: globalRefs$b.colors.error,
|
5579
|
+
surface: globalRefs$b.colors.surface
|
5572
5580
|
};
|
5573
5581
|
|
5574
5582
|
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$o);
|
@@ -5579,11 +5587,11 @@ const horizontalPaddingRatio = 2;
|
|
5579
5587
|
const button = {
|
5580
5588
|
...helperTheme$3,
|
5581
5589
|
|
5582
|
-
[compVars$2.fontFamily]: globalRefs$
|
5590
|
+
[compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
|
5583
5591
|
|
5584
5592
|
[compVars$2.cursor]: 'pointer',
|
5585
5593
|
|
5586
|
-
[compVars$2.borderRadius]: globalRefs$
|
5594
|
+
[compVars$2.borderRadius]: globalRefs$b.radius.sm,
|
5587
5595
|
[compVars$2.borderWidth]: '2px',
|
5588
5596
|
[compVars$2.borderStyle]: 'solid',
|
5589
5597
|
[compVars$2.borderColor]: 'transparent',
|
@@ -5665,19 +5673,19 @@ var button$1 = /*#__PURE__*/Object.freeze({
|
|
5665
5673
|
});
|
5666
5674
|
|
5667
5675
|
const componentName = getComponentName('input-wrapper');
|
5668
|
-
const globalRefs$
|
5676
|
+
const globalRefs$a = getThemeRefs(globals);
|
5669
5677
|
|
5670
5678
|
const [theme$1, refs, vars$k] = createHelperVars({
|
5671
|
-
labelTextColor: globalRefs$
|
5672
|
-
valueTextColor: globalRefs$
|
5673
|
-
placeholderTextColor: globalRefs$
|
5679
|
+
labelTextColor: globalRefs$a.colors.surface.contrast,
|
5680
|
+
valueTextColor: globalRefs$a.colors.surface.contrast,
|
5681
|
+
placeholderTextColor: globalRefs$a.colors.surface.main,
|
5674
5682
|
requiredIndicator: "'*'",
|
5675
5683
|
|
5676
|
-
borderWidth: globalRefs$
|
5677
|
-
borderRadius: globalRefs$
|
5684
|
+
borderWidth: globalRefs$a.border.xs,
|
5685
|
+
borderRadius: globalRefs$a.radius.xs,
|
5678
5686
|
borderColor: 'transparent',
|
5679
5687
|
|
5680
|
-
outlineWidth: globalRefs$
|
5688
|
+
outlineWidth: globalRefs$a.border.sm,
|
5681
5689
|
outlineStyle: 'solid',
|
5682
5690
|
outlineColor: 'transparent',
|
5683
5691
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -5688,9 +5696,9 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
5688
5696
|
horizontalPadding: '0.5em',
|
5689
5697
|
verticalPadding: '0.5em',
|
5690
5698
|
|
5691
|
-
backgroundColor: globalRefs$
|
5699
|
+
backgroundColor: globalRefs$a.colors.surface.light,
|
5692
5700
|
|
5693
|
-
fontFamily: globalRefs$
|
5701
|
+
fontFamily: globalRefs$a.fonts.font1.family,
|
5694
5702
|
|
5695
5703
|
size: {
|
5696
5704
|
xs: { fontSize: '12px' },
|
@@ -5704,26 +5712,27 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
5704
5712
|
},
|
5705
5713
|
|
5706
5714
|
_focused: {
|
5707
|
-
outlineColor: globalRefs$
|
5715
|
+
outlineColor: globalRefs$a.colors.surface.main,
|
5708
5716
|
_invalid: {
|
5709
|
-
outlineColor: globalRefs$
|
5717
|
+
outlineColor: globalRefs$a.colors.error.main,
|
5710
5718
|
}
|
5711
5719
|
},
|
5712
5720
|
|
5713
5721
|
_bordered: {
|
5714
|
-
outlineWidth: globalRefs$
|
5715
|
-
borderColor: globalRefs$
|
5722
|
+
outlineWidth: globalRefs$a.border.xs,
|
5723
|
+
borderColor: globalRefs$a.colors.surface.main,
|
5716
5724
|
borderStyle: 'solid',
|
5717
5725
|
_invalid: {
|
5718
|
-
borderColor: globalRefs$
|
5726
|
+
borderColor: globalRefs$a.colors.error.main,
|
5719
5727
|
}
|
5720
5728
|
},
|
5721
5729
|
|
5722
5730
|
_disabled: {
|
5723
|
-
labelTextColor: globalRefs$
|
5724
|
-
|
5725
|
-
|
5726
|
-
|
5731
|
+
labelTextColor: globalRefs$a.colors.surface.main,
|
5732
|
+
borderColor: globalRefs$a.colors.surface.main,
|
5733
|
+
valueTextColor: globalRefs$a.colors.surface.dark,
|
5734
|
+
placeholderTextColor: globalRefs$a.colors.surface.dark,
|
5735
|
+
backgroundColor: globalRefs$a.colors.surface.main
|
5727
5736
|
}
|
5728
5737
|
}, componentName);
|
5729
5738
|
|
@@ -5765,7 +5774,7 @@ var textField$1 = /*#__PURE__*/Object.freeze({
|
|
5765
5774
|
vars: vars$j
|
5766
5775
|
});
|
5767
5776
|
|
5768
|
-
const globalRefs$
|
5777
|
+
const globalRefs$9 = getThemeRefs(globals);
|
5769
5778
|
const vars$i = PasswordClass.cssVarList;
|
5770
5779
|
|
5771
5780
|
const password = {
|
@@ -5787,7 +5796,7 @@ const password = {
|
|
5787
5796
|
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
5788
5797
|
[vars$i.inputOutlineColor]: refs.outlineColor,
|
5789
5798
|
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
5790
|
-
[vars$i.revealButtonOffset]: globalRefs$
|
5799
|
+
[vars$i.revealButtonOffset]: globalRefs$9.spacing.md,
|
5791
5800
|
[vars$i.revealButtonSize]: refs.toggleButtonSize
|
5792
5801
|
};
|
5793
5802
|
|
@@ -5857,7 +5866,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
|
|
5857
5866
|
vars: vars$g
|
5858
5867
|
});
|
5859
5868
|
|
5860
|
-
const globalRefs$
|
5869
|
+
const globalRefs$8 = getThemeRefs(globals);
|
5861
5870
|
const vars$f = TextAreaClass.cssVarList;
|
5862
5871
|
|
5863
5872
|
const textArea = {
|
@@ -5881,7 +5890,7 @@ const textArea = {
|
|
5881
5890
|
[vars$f.inputResizeType]: 'vertical',
|
5882
5891
|
|
5883
5892
|
_disabled: {
|
5884
|
-
[vars$f.inputBackgroundColor]: globalRefs$
|
5893
|
+
[vars$f.inputBackgroundColor]: globalRefs$8.colors.surface.light,
|
5885
5894
|
},
|
5886
5895
|
|
5887
5896
|
_readonly: {
|
@@ -5895,7 +5904,7 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
|
|
5895
5904
|
vars: vars$f
|
5896
5905
|
});
|
5897
5906
|
|
5898
|
-
|
5907
|
+
getThemeRefs(globals);
|
5899
5908
|
const vars$e = CheckboxClass.cssVarList;
|
5900
5909
|
|
5901
5910
|
const checkbox = {
|
@@ -5905,22 +5914,25 @@ const checkbox = {
|
|
5905
5914
|
[vars$e.labelTextColor]: refs.labelTextColor,
|
5906
5915
|
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
5907
5916
|
[vars$e.labelFontWeight]: '400',
|
5908
|
-
[vars$e.labelSpacing]: '0.
|
5917
|
+
[vars$e.labelSpacing]: '0.75em',
|
5909
5918
|
[vars$e.inputOutlineWidth]: refs.outlineWidth,
|
5910
5919
|
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
5911
5920
|
[vars$e.inputOutlineColor]: refs.outlineColor,
|
5912
5921
|
[vars$e.inputOutlineStyle]: refs.outlineStyle,
|
5913
5922
|
[vars$e.inputBorderRadius]: refs.borderRadius,
|
5914
|
-
[vars$e.
|
5923
|
+
[vars$e.inputBorderColor]: refs.borderColor,
|
5924
|
+
[vars$e.inputBorderWidth]: refs.borderWidth,
|
5925
|
+
[vars$e.inputBorderStyle]: refs.borderStyle,
|
5926
|
+
[vars$e.inputBackgroundColor]: refs.inputBackgroundColor,
|
5915
5927
|
[vars$e.inputSize]: '2em',
|
5916
5928
|
|
5917
5929
|
_checked: {
|
5918
|
-
[vars$e.inputBackgroundColor]:
|
5919
|
-
[vars$e.inputValueTextColor]:
|
5930
|
+
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
5931
|
+
[vars$e.inputValueTextColor]: refs.valueTextColor,
|
5920
5932
|
},
|
5921
5933
|
|
5922
5934
|
_disabled: {
|
5923
|
-
[vars$e.
|
5935
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
5924
5936
|
},
|
5925
5937
|
};
|
5926
5938
|
|
@@ -5947,7 +5959,7 @@ const switchToggle = {
|
|
5947
5959
|
|
5948
5960
|
[vars$d.trackBorderStyle]: refs.borderStyle,
|
5949
5961
|
[vars$d.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
5950
|
-
[vars$d.trackBorderColor]:
|
5962
|
+
[vars$d.trackBorderColor]: refs.borderColor,
|
5951
5963
|
[vars$d.trackBackgroundColor]: 'none',
|
5952
5964
|
[vars$d.trackBorderRadius]: globalRefs$7.radius.md,
|
5953
5965
|
[vars$d.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
@@ -5969,16 +5981,22 @@ const switchToggle = {
|
|
5969
5981
|
[vars$d.hostWidth]: refs.width,
|
5970
5982
|
|
5971
5983
|
_checked: {
|
5972
|
-
[vars$d.trackBorderColor]:
|
5984
|
+
[vars$d.trackBorderColor]: refs.borderColor,
|
5985
|
+
[vars$d.trackBackgroundColor]: refs.backgroundColor,
|
5973
5986
|
[vars$d.knobLeftOffset]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
|
5974
|
-
[vars$d.knobColor]:
|
5987
|
+
[vars$d.knobColor]: refs.valueTextColor,
|
5975
5988
|
[vars$d.knobTextColor]: refs.valueTextColor,
|
5976
5989
|
},
|
5977
5990
|
|
5978
5991
|
_disabled: {
|
5979
|
-
[vars$d.knobColor]: globalRefs$7.colors.surface.
|
5992
|
+
[vars$d.knobColor]: globalRefs$7.colors.surface.light,
|
5980
5993
|
[vars$d.trackBorderColor]: globalRefs$7.colors.surface.main,
|
5981
|
-
[vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.
|
5994
|
+
[vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
5995
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
5996
|
+
_checked: {
|
5997
|
+
[vars$d.knobColor]: globalRefs$7.colors.surface.light,
|
5998
|
+
[vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
5999
|
+
}
|
5982
6000
|
},
|
5983
6001
|
|
5984
6002
|
_invalid: {
|