@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/cjs/index.cjs.js
CHANGED
@@ -1676,15 +1676,15 @@ const loadingIndicatorStyles = `
|
|
1676
1676
|
}
|
1677
1677
|
`;
|
1678
1678
|
|
1679
|
-
const globalRefs$
|
1679
|
+
const globalRefs$b = getThemeRefs(globals);
|
1680
1680
|
const compVars$2 = ButtonClass.cssVarList;
|
1681
1681
|
|
1682
1682
|
const mode = {
|
1683
|
-
primary: globalRefs$
|
1684
|
-
secondary: globalRefs$
|
1685
|
-
success: globalRefs$
|
1686
|
-
error: globalRefs$
|
1687
|
-
surface: globalRefs$
|
1683
|
+
primary: globalRefs$b.colors.primary,
|
1684
|
+
secondary: globalRefs$b.colors.secondary,
|
1685
|
+
success: globalRefs$b.colors.success,
|
1686
|
+
error: globalRefs$b.colors.error,
|
1687
|
+
surface: globalRefs$b.colors.surface
|
1688
1688
|
};
|
1689
1689
|
|
1690
1690
|
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$o);
|
@@ -1695,11 +1695,11 @@ const horizontalPaddingRatio = 2;
|
|
1695
1695
|
const button = {
|
1696
1696
|
...helperTheme$3,
|
1697
1697
|
|
1698
|
-
[compVars$2.fontFamily]: globalRefs$
|
1698
|
+
[compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
|
1699
1699
|
|
1700
1700
|
[compVars$2.cursor]: 'pointer',
|
1701
1701
|
|
1702
|
-
[compVars$2.borderRadius]: globalRefs$
|
1702
|
+
[compVars$2.borderRadius]: globalRefs$b.radius.sm,
|
1703
1703
|
[compVars$2.borderWidth]: '2px',
|
1704
1704
|
[compVars$2.borderStyle]: 'solid',
|
1705
1705
|
[compVars$2.borderColor]: 'transparent',
|
@@ -1900,19 +1900,19 @@ const TextFieldClass = compose(
|
|
1900
1900
|
);
|
1901
1901
|
|
1902
1902
|
const componentName$m = getComponentName('input-wrapper');
|
1903
|
-
const globalRefs$
|
1903
|
+
const globalRefs$a = getThemeRefs(globals);
|
1904
1904
|
|
1905
1905
|
const [theme$1, refs, vars$k] = createHelperVars({
|
1906
|
-
labelTextColor: globalRefs$
|
1907
|
-
valueTextColor: globalRefs$
|
1908
|
-
placeholderTextColor: globalRefs$
|
1906
|
+
labelTextColor: globalRefs$a.colors.surface.contrast,
|
1907
|
+
valueTextColor: globalRefs$a.colors.surface.contrast,
|
1908
|
+
placeholderTextColor: globalRefs$a.colors.surface.main,
|
1909
1909
|
requiredIndicator: "'*'",
|
1910
1910
|
|
1911
|
-
borderWidth: globalRefs$
|
1912
|
-
borderRadius: globalRefs$
|
1911
|
+
borderWidth: globalRefs$a.border.xs,
|
1912
|
+
borderRadius: globalRefs$a.radius.xs,
|
1913
1913
|
borderColor: 'transparent',
|
1914
1914
|
|
1915
|
-
outlineWidth: globalRefs$
|
1915
|
+
outlineWidth: globalRefs$a.border.sm,
|
1916
1916
|
outlineStyle: 'solid',
|
1917
1917
|
outlineColor: 'transparent',
|
1918
1918
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -1923,9 +1923,9 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
1923
1923
|
horizontalPadding: '0.5em',
|
1924
1924
|
verticalPadding: '0.5em',
|
1925
1925
|
|
1926
|
-
backgroundColor: globalRefs$
|
1926
|
+
backgroundColor: globalRefs$a.colors.surface.light,
|
1927
1927
|
|
1928
|
-
fontFamily: globalRefs$
|
1928
|
+
fontFamily: globalRefs$a.fonts.font1.family,
|
1929
1929
|
|
1930
1930
|
size: {
|
1931
1931
|
xs: { fontSize: '12px' },
|
@@ -1939,26 +1939,27 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
1939
1939
|
},
|
1940
1940
|
|
1941
1941
|
_focused: {
|
1942
|
-
outlineColor: globalRefs$
|
1942
|
+
outlineColor: globalRefs$a.colors.surface.main,
|
1943
1943
|
_invalid: {
|
1944
|
-
outlineColor: globalRefs$
|
1944
|
+
outlineColor: globalRefs$a.colors.error.main,
|
1945
1945
|
}
|
1946
1946
|
},
|
1947
1947
|
|
1948
1948
|
_bordered: {
|
1949
|
-
outlineWidth: globalRefs$
|
1950
|
-
borderColor: globalRefs$
|
1949
|
+
outlineWidth: globalRefs$a.border.xs,
|
1950
|
+
borderColor: globalRefs$a.colors.surface.main,
|
1951
1951
|
borderStyle: 'solid',
|
1952
1952
|
_invalid: {
|
1953
|
-
borderColor: globalRefs$
|
1953
|
+
borderColor: globalRefs$a.colors.error.main,
|
1954
1954
|
}
|
1955
1955
|
},
|
1956
1956
|
|
1957
1957
|
_disabled: {
|
1958
|
-
labelTextColor: globalRefs$
|
1959
|
-
|
1960
|
-
|
1961
|
-
|
1958
|
+
labelTextColor: globalRefs$a.colors.surface.main,
|
1959
|
+
borderColor: globalRefs$a.colors.surface.main,
|
1960
|
+
valueTextColor: globalRefs$a.colors.surface.dark,
|
1961
|
+
placeholderTextColor: globalRefs$a.colors.surface.dark,
|
1962
|
+
backgroundColor: globalRefs$a.colors.surface.main
|
1962
1963
|
}
|
1963
1964
|
}, componentName$m);
|
1964
1965
|
|
@@ -2173,7 +2174,7 @@ const PasswordClass = compose(
|
|
2173
2174
|
})
|
2174
2175
|
);
|
2175
2176
|
|
2176
|
-
const globalRefs$
|
2177
|
+
const globalRefs$9 = getThemeRefs(globals);
|
2177
2178
|
const vars$i = PasswordClass.cssVarList;
|
2178
2179
|
|
2179
2180
|
const password = {
|
@@ -2195,7 +2196,7 @@ const password = {
|
|
2195
2196
|
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
2196
2197
|
[vars$i.inputOutlineColor]: refs.outlineColor,
|
2197
2198
|
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
2198
|
-
[vars$i.revealButtonOffset]: globalRefs$
|
2199
|
+
[vars$i.revealButtonOffset]: globalRefs$9.spacing.md,
|
2199
2200
|
[vars$i.revealButtonSize]: refs.toggleButtonSize
|
2200
2201
|
};
|
2201
2202
|
|
@@ -2398,7 +2399,7 @@ const TextAreaClass = compose(
|
|
2398
2399
|
})
|
2399
2400
|
);
|
2400
2401
|
|
2401
|
-
const globalRefs$
|
2402
|
+
const globalRefs$8 = getThemeRefs(globals);
|
2402
2403
|
const vars$f = TextAreaClass.cssVarList;
|
2403
2404
|
|
2404
2405
|
const textArea = {
|
@@ -2422,7 +2423,7 @@ const textArea = {
|
|
2422
2423
|
[vars$f.inputResizeType]: 'vertical',
|
2423
2424
|
|
2424
2425
|
_disabled: {
|
2425
|
-
[vars$f.inputBackgroundColor]: globalRefs$
|
2426
|
+
[vars$f.inputBackgroundColor]: globalRefs$8.colors.surface.light,
|
2426
2427
|
},
|
2427
2428
|
|
2428
2429
|
_readonly: {
|
@@ -2475,6 +2476,7 @@ const booleanFieldMixin = (superclass) =>
|
|
2475
2476
|
'size',
|
2476
2477
|
'label',
|
2477
2478
|
'invalid',
|
2479
|
+
'disabled'
|
2478
2480
|
]
|
2479
2481
|
});
|
2480
2482
|
|
@@ -2492,6 +2494,7 @@ ${resetInputFieldDefaultWidth()}
|
|
2492
2494
|
|
2493
2495
|
.wrapper {
|
2494
2496
|
display: flex;
|
2497
|
+
box-sizing: border-box;
|
2495
2498
|
}
|
2496
2499
|
|
2497
2500
|
vaadin-text-field {
|
@@ -2594,6 +2597,7 @@ const CheckboxClass = compose(
|
|
2594
2597
|
labelTextColor: [
|
2595
2598
|
{ ...label$5, property: 'color' },
|
2596
2599
|
{ ...requiredIndicator$4, property: 'color' },
|
2600
|
+
{ ...label$5, property: '-webkit-text-fill-color' }
|
2597
2601
|
],
|
2598
2602
|
labelRequiredIndicator: { ...requiredIndicator$4, property: 'content' },
|
2599
2603
|
|
@@ -2607,19 +2611,26 @@ const CheckboxClass = compose(
|
|
2607
2611
|
],
|
2608
2612
|
inputValueTextColor: { ...checkboxSurface, property: 'color' },
|
2609
2613
|
inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
|
2614
|
+
|
2610
2615
|
inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
|
2616
|
+
inputBorderWidth: { ...checkboxElement, property: 'border-width' },
|
2617
|
+
inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
|
2618
|
+
inputBorderColor: { ...checkboxElement, property: 'border-color' },
|
2619
|
+
inputBorderStyle: { ...checkboxElement, property: 'border-style' },
|
2620
|
+
|
2611
2621
|
inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
|
2612
2622
|
inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
|
2613
2623
|
inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
|
2614
2624
|
inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
|
2625
|
+
|
2615
2626
|
inputSize: [
|
2616
2627
|
{ ...checkboxElement, property: 'width' },
|
2617
|
-
{ ...label$5, property: 'margin-left' },
|
2618
2628
|
{ ...checkboxElement, property: 'height' },
|
2619
2629
|
{ ...checkboxSurface, property: 'font-size' },
|
2620
2630
|
{ ...component$1, property: 'font-size' },
|
2631
|
+
{ ...checkboxHiddenLabel$1, property: 'line-height' },
|
2632
|
+
{ ...label$5, property: 'margin-left' },
|
2621
2633
|
{ ...label$5, property: 'line-height' },
|
2622
|
-
{ ...checkboxHiddenLabel$1, property: 'line-height' }
|
2623
2634
|
],
|
2624
2635
|
},
|
2625
2636
|
}),
|
@@ -2640,7 +2651,7 @@ const CheckboxClass = compose(
|
|
2640
2651
|
})
|
2641
2652
|
);
|
2642
2653
|
|
2643
|
-
|
2654
|
+
getThemeRefs(globals);
|
2644
2655
|
const vars$e = CheckboxClass.cssVarList;
|
2645
2656
|
|
2646
2657
|
const checkbox = {
|
@@ -2650,22 +2661,25 @@ const checkbox = {
|
|
2650
2661
|
[vars$e.labelTextColor]: refs.labelTextColor,
|
2651
2662
|
[vars$e.labelRequiredIndicator]: refs.requiredIndicator,
|
2652
2663
|
[vars$e.labelFontWeight]: '400',
|
2653
|
-
[vars$e.labelSpacing]: '0.
|
2664
|
+
[vars$e.labelSpacing]: '0.75em',
|
2654
2665
|
[vars$e.inputOutlineWidth]: refs.outlineWidth,
|
2655
2666
|
[vars$e.inputOutlineOffset]: refs.outlineOffset,
|
2656
2667
|
[vars$e.inputOutlineColor]: refs.outlineColor,
|
2657
2668
|
[vars$e.inputOutlineStyle]: refs.outlineStyle,
|
2658
2669
|
[vars$e.inputBorderRadius]: refs.borderRadius,
|
2659
|
-
[vars$e.
|
2670
|
+
[vars$e.inputBorderColor]: refs.borderColor,
|
2671
|
+
[vars$e.inputBorderWidth]: refs.borderWidth,
|
2672
|
+
[vars$e.inputBorderStyle]: refs.borderStyle,
|
2673
|
+
[vars$e.inputBackgroundColor]: refs.inputBackgroundColor,
|
2660
2674
|
[vars$e.inputSize]: '2em',
|
2661
2675
|
|
2662
2676
|
_checked: {
|
2663
|
-
[vars$e.inputBackgroundColor]:
|
2664
|
-
[vars$e.inputValueTextColor]:
|
2677
|
+
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
2678
|
+
[vars$e.inputValueTextColor]: refs.valueTextColor,
|
2665
2679
|
},
|
2666
2680
|
|
2667
2681
|
_disabled: {
|
2668
|
-
[vars$e.
|
2682
|
+
[vars$e.labelTextColor]: refs.labelTextColor,
|
2669
2683
|
},
|
2670
2684
|
};
|
2671
2685
|
|
@@ -2752,6 +2766,7 @@ const SwitchToggleClass = compose(
|
|
2752
2766
|
labelTextColor: [
|
2753
2767
|
{ ...label$4, property: 'color' },
|
2754
2768
|
{ ...requiredIndicator$3, property: 'color' },
|
2769
|
+
{ ...label$4, property: '-webkit-text-fill-color' }
|
2755
2770
|
],
|
2756
2771
|
labelRequiredIndicator: { ...requiredIndicator$3, property: 'content' },
|
2757
2772
|
inputOutlineWidth: { ...track, property: 'outline-width' },
|
@@ -2777,9 +2792,6 @@ const SwitchToggleClass = compose(
|
|
2777
2792
|
vaadin-checkbox[active]::part(checkbox) {
|
2778
2793
|
transform: none;
|
2779
2794
|
}
|
2780
|
-
vaadin-checkbox[checked]::part(checkbox) {
|
2781
|
-
background: none;
|
2782
|
-
}
|
2783
2795
|
vaadin-checkbox::part(checkbox)::after {
|
2784
2796
|
position: absolute;
|
2785
2797
|
opacity: 1;
|
@@ -2808,7 +2820,7 @@ const switchToggle = {
|
|
2808
2820
|
|
2809
2821
|
[vars$d.trackBorderStyle]: refs.borderStyle,
|
2810
2822
|
[vars$d.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
2811
|
-
[vars$d.trackBorderColor]:
|
2823
|
+
[vars$d.trackBorderColor]: refs.borderColor,
|
2812
2824
|
[vars$d.trackBackgroundColor]: 'none',
|
2813
2825
|
[vars$d.trackBorderRadius]: globalRefs$7.radius.md,
|
2814
2826
|
[vars$d.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
@@ -2830,16 +2842,22 @@ const switchToggle = {
|
|
2830
2842
|
[vars$d.hostWidth]: refs.width,
|
2831
2843
|
|
2832
2844
|
_checked: {
|
2833
|
-
[vars$d.trackBorderColor]:
|
2845
|
+
[vars$d.trackBorderColor]: refs.borderColor,
|
2846
|
+
[vars$d.trackBackgroundColor]: refs.backgroundColor,
|
2834
2847
|
[vars$d.knobLeftOffset]: `calc(100% - var(${vars$d.knobSize}) - ${knobMargin})`,
|
2835
|
-
[vars$d.knobColor]:
|
2848
|
+
[vars$d.knobColor]: refs.valueTextColor,
|
2836
2849
|
[vars$d.knobTextColor]: refs.valueTextColor,
|
2837
2850
|
},
|
2838
2851
|
|
2839
2852
|
_disabled: {
|
2840
|
-
[vars$d.knobColor]: globalRefs$7.colors.surface.
|
2853
|
+
[vars$d.knobColor]: globalRefs$7.colors.surface.light,
|
2841
2854
|
[vars$d.trackBorderColor]: globalRefs$7.colors.surface.main,
|
2842
|
-
[vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.
|
2855
|
+
[vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
2856
|
+
[vars$d.labelTextColor]: refs.labelTextColor,
|
2857
|
+
_checked: {
|
2858
|
+
[vars$d.knobColor]: globalRefs$7.colors.surface.light,
|
2859
|
+
[vars$d.trackBackgroundColor]: globalRefs$7.colors.surface.main,
|
2860
|
+
}
|
2843
2861
|
},
|
2844
2862
|
|
2845
2863
|
_invalid: {
|
@@ -3226,6 +3244,10 @@ class RawLink extends createBaseClass({ componentName: componentName$b, baseSele
|
|
3226
3244
|
}
|
3227
3245
|
:host a {
|
3228
3246
|
display: inline;
|
3247
|
+
text-decoration: none;
|
3248
|
+
}
|
3249
|
+
:host a:hover {
|
3250
|
+
text-decoration: underline;
|
3229
3251
|
}
|
3230
3252
|
</style>
|
3231
3253
|
<div>
|
@@ -3269,10 +3291,7 @@ const LinkClass = compose(
|
|
3269
3291
|
{ ...text$1, property: TextClass.cssVarList.textColor }
|
3270
3292
|
],
|
3271
3293
|
cursor: anchor,
|
3272
|
-
|
3273
|
-
textUnderlineStyle: { ...anchor, property: 'border-bottom-style' },
|
3274
|
-
textUnderlineColor: { ...anchor, property: 'border-bottom-color' }
|
3275
|
-
},
|
3294
|
+
}
|
3276
3295
|
}),
|
3277
3296
|
draggableMixin,
|
3278
3297
|
componentNameValidationMixin
|
@@ -3303,10 +3322,6 @@ const link = {
|
|
3303
3322
|
[vars$9.hostWidth]: '100%'
|
3304
3323
|
},
|
3305
3324
|
|
3306
|
-
_hover: {
|
3307
|
-
[vars$9.textUnderlineColor]: 'currentColor'
|
3308
|
-
},
|
3309
|
-
|
3310
3325
|
mode: {
|
3311
3326
|
primary: {
|
3312
3327
|
[vars$9.textColor]: globalRefs$4.colors.primary.main,
|