@descope/web-components-ui 1.0.91 → 1.0.92
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +111 -99
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/Button.js +39 -25
- package/src/components/descope-passcode/Passcode.js +42 -41
- package/src/components/descope-text-field/TextField.js +1 -0
- package/src/theme/components/button.js +31 -37
package/dist/index.esm.js
CHANGED
@@ -1041,47 +1041,63 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1041
1041
|
|
1042
1042
|
const componentName$o = getComponentName('button');
|
1043
1043
|
|
1044
|
-
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1045
1044
|
const resetStyles = `
|
1046
1045
|
:host {
|
1047
1046
|
display: inline-block;
|
1048
1047
|
}
|
1049
|
-
vaadin-button {
|
1048
|
+
vaadin-button {
|
1049
|
+
margin: 0;
|
1050
|
+
min-width: 0;
|
1051
|
+
width: 100%;
|
1052
|
+
height: auto;
|
1053
|
+
}
|
1054
|
+
vaadin-button::part(label) {
|
1055
|
+
padding: 0;
|
1056
|
+
}
|
1050
1057
|
vaadin-button::part(prefix) {
|
1051
1058
|
margin-left: 0;
|
1052
1059
|
margin-right: 0;
|
1053
1060
|
}
|
1054
1061
|
`;
|
1062
|
+
|
1055
1063
|
const iconStyles = `
|
1056
1064
|
vaadin-button::part(prefix),
|
1057
1065
|
vaadin-button::part(label) {
|
1058
1066
|
display: flex;
|
1059
1067
|
justify-content: center;
|
1060
1068
|
align-items: center;
|
1061
|
-
gap: 5px;
|
1062
1069
|
}
|
1063
1070
|
`;
|
1064
1071
|
|
1065
|
-
const
|
1072
|
+
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1073
|
+
|
1074
|
+
const { host: host$9, label: label$6 } = {
|
1075
|
+
host: { selector: () => ':host' },
|
1066
1076
|
label: { selector: '::part(label)' },
|
1067
|
-
host: { selector: () => ':host' }
|
1068
1077
|
};
|
1069
1078
|
|
1070
1079
|
const Button = compose(
|
1071
1080
|
createStyleMixin({
|
1072
1081
|
mappings: {
|
1082
|
+
color: {},
|
1083
|
+
textDecoration: label$6,
|
1084
|
+
fontSize: {},
|
1085
|
+
cursor: {},
|
1073
1086
|
backgroundColor: {},
|
1074
1087
|
borderRadius: {},
|
1075
|
-
color: label$6,
|
1076
1088
|
borderColor: {},
|
1077
1089
|
borderStyle: {},
|
1078
1090
|
borderWidth: {},
|
1079
|
-
fontSize: {},
|
1080
|
-
height: {},
|
1081
1091
|
width: host$9,
|
1082
|
-
|
1083
|
-
|
1084
|
-
|
1092
|
+
gap: label$6,
|
1093
|
+
verticalPadding: [
|
1094
|
+
{ property: 'padding-top' },
|
1095
|
+
{ property: 'padding-bottom' },
|
1096
|
+
],
|
1097
|
+
horizontalPadding: [
|
1098
|
+
{ property: 'padding-left' },
|
1099
|
+
{ property: 'padding-right' },
|
1100
|
+
]
|
1085
1101
|
}
|
1086
1102
|
}),
|
1087
1103
|
draggableMixin,
|
@@ -1090,44 +1106,44 @@ const Button = compose(
|
|
1090
1106
|
createProxy({
|
1091
1107
|
slots: ['prefix', 'label', 'suffix'],
|
1092
1108
|
wrappedEleName: 'vaadin-button',
|
1093
|
-
style: () =>
|
1094
|
-
|
1109
|
+
style: () => `
|
1110
|
+
${resetStyles}
|
1111
|
+
${iconStyles}
|
1112
|
+
${loadingIndicatorStyles}
|
1113
|
+
${editorOverrides}
|
1114
|
+
`,
|
1095
1115
|
excludeAttrsSync: ['tabindex'],
|
1096
1116
|
componentName: componentName$o
|
1097
1117
|
})
|
1098
1118
|
);
|
1099
1119
|
|
1120
|
+
const { color, fontSize } = Button.cssVarList;
|
1100
1121
|
const loadingIndicatorStyles = `
|
1101
1122
|
@keyframes spin {
|
1102
1123
|
0% { -webkit-transform: rotate(0deg); }
|
1103
1124
|
100% { -webkit-transform: rotate(360deg); }
|
1104
1125
|
}
|
1105
1126
|
:host([loading="true"]) ::before {
|
1106
|
-
--marginRatio: 1.35;
|
1107
|
-
color: var(${Button.cssVarList.color});
|
1108
1127
|
animation: spin 2s linear infinite;
|
1109
1128
|
position: absolute;
|
1110
|
-
top: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
|
1111
|
-
left: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
|
1112
1129
|
content: '';
|
1113
1130
|
z-index: 1;
|
1114
1131
|
box-sizing: border-box;
|
1115
1132
|
border-radius: 50%;
|
1116
1133
|
border-bottom-color: transparent;
|
1117
1134
|
border-left-color: transparent;
|
1118
|
-
border-width: calc(var(${Button.cssVarList.height}) / 12);
|
1119
1135
|
border-style: solid;
|
1120
|
-
|
1121
|
-
|
1136
|
+
color: var(${color});
|
1137
|
+
top: calc(50% - (var(${fontSize}) / 2));
|
1138
|
+
left: calc(50% - (var(${fontSize}) / 2));
|
1139
|
+
border-width: calc(var(${fontSize}) / 10);
|
1140
|
+
width: var(${fontSize});
|
1141
|
+
height: var(${fontSize});
|
1122
1142
|
}
|
1123
1143
|
:host([loading="true"])::part(prefix),
|
1124
1144
|
:host([loading="true"])::part(label) {
|
1125
1145
|
visibility: hidden;
|
1126
1146
|
}
|
1127
|
-
|
1128
|
-
vaadin-button {
|
1129
|
-
width: 100%;
|
1130
|
-
}
|
1131
1147
|
`;
|
1132
1148
|
|
1133
1149
|
customElements.define(componentName$o, Button);
|
@@ -2368,6 +2384,7 @@ overrides$2 = `
|
|
2368
2384
|
overflow: hidden;
|
2369
2385
|
padding: 0;
|
2370
2386
|
}
|
2387
|
+
vaadin-text-field[disabled] > input:placeholder-shown,
|
2371
2388
|
vaadin-text-field[readonly] > input:placeholder-shown {
|
2372
2389
|
opacity: 1;
|
2373
2390
|
}
|
@@ -2487,55 +2504,56 @@ const Passcode = compose(
|
|
2487
2504
|
}
|
2488
2505
|
|
2489
2506
|
descope-passcode-internal {
|
2490
|
-
|
2491
|
-
|
2492
|
-
|
2493
|
-
|
2494
|
-
|
2507
|
+
-webkit-mask-image: none;
|
2508
|
+
padding: 0;
|
2509
|
+
width: 100%;
|
2510
|
+
height: 100%;
|
2511
|
+
min-height: initial;
|
2495
2512
|
}
|
2496
2513
|
|
2497
|
-
|
2498
|
-
|
2499
|
-
|
2500
|
-
|
2514
|
+
descope-passcode-internal .wrapper {
|
2515
|
+
box-sizing: border-box;
|
2516
|
+
min-height: initial;
|
2517
|
+
height: 100%;
|
2518
|
+
justify-content: center;
|
2501
2519
|
}
|
2502
2520
|
|
2503
|
-
|
2504
|
-
|
2505
|
-
|
2521
|
+
descope-passcode-internal descope-text-field {
|
2522
|
+
width: var(${textVars$1.height})
|
2523
|
+
}
|
2506
2524
|
|
2507
2525
|
vaadin-text-field::part(input-field) {
|
2508
|
-
|
2509
|
-
|
2510
|
-
|
2511
|
-
|
2526
|
+
background-color: transparent;
|
2527
|
+
padding: 0;
|
2528
|
+
overflow: hidden;
|
2529
|
+
-webkit-mask-image: none;
|
2512
2530
|
}
|
2513
2531
|
|
2514
|
-
|
2515
|
-
|
2516
|
-
|
2517
|
-
|
2518
|
-
|
2532
|
+
vaadin-text-field {
|
2533
|
+
margin: 0;
|
2534
|
+
padding: 0;
|
2535
|
+
width: 100%
|
2536
|
+
}
|
2519
2537
|
|
2520
|
-
|
2521
|
-
|
2522
|
-
|
2538
|
+
vaadin-text-field::before {
|
2539
|
+
height: initial;
|
2540
|
+
}
|
2523
2541
|
|
2524
|
-
|
2525
|
-
|
2526
|
-
|
2527
|
-
|
2528
|
-
vaadin-text-field::part(input-field):focus {
|
2529
|
-
cursor: text;
|
2530
|
-
}
|
2542
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
2543
|
+
opacity: 1;
|
2544
|
+
}
|
2531
2545
|
|
2532
|
-
|
2533
|
-
|
2534
|
-
|
2535
|
-
|
2536
|
-
|
2537
|
-
|
2538
|
-
|
2546
|
+
vaadin-text-field::part(input-field):focus {
|
2547
|
+
cursor: text;
|
2548
|
+
}
|
2549
|
+
|
2550
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
2551
|
+
font-size: "12px";
|
2552
|
+
content: "*";
|
2553
|
+
}
|
2554
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
2555
|
+
border: 0 solid;
|
2556
|
+
}
|
2539
2557
|
`,
|
2540
2558
|
excludeAttrsSync: ['tabindex'],
|
2541
2559
|
componentName: componentName$8
|
@@ -5083,46 +5101,37 @@ const mode = {
|
|
5083
5101
|
|
5084
5102
|
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
|
5085
5103
|
|
5104
|
+
const verticalPaddingRatio = 3;
|
5105
|
+
const horizontalPaddingRatio = 2;
|
5106
|
+
|
5086
5107
|
const button = {
|
5087
5108
|
...helperTheme$2,
|
5088
|
-
[vars$g.width]: 'fit-content',
|
5089
|
-
size: {
|
5090
|
-
xs: {
|
5091
|
-
[vars$g.height]: '10px',
|
5092
|
-
[vars$g.fontSize]: '10px',
|
5093
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
|
5094
|
-
},
|
5095
|
-
sm: {
|
5096
|
-
[vars$g.height]: '20px',
|
5097
|
-
[vars$g.fontSize]: '10px',
|
5098
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
|
5099
|
-
},
|
5100
|
-
md: {
|
5101
|
-
[vars$g.height]: '30px',
|
5102
|
-
[vars$g.fontSize]: '14px',
|
5103
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
|
5104
|
-
},
|
5105
|
-
lg: {
|
5106
|
-
[vars$g.height]: '40px',
|
5107
|
-
[vars$g.fontSize]: '20px',
|
5108
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
|
5109
|
-
},
|
5110
|
-
xl: {
|
5111
|
-
[vars$g.height]: '50px',
|
5112
|
-
[vars$g.fontSize]: '25px',
|
5113
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
|
5114
|
-
}
|
5115
|
-
},
|
5116
5109
|
|
5117
|
-
[vars$g.borderRadius]: globalRefs$e.radius.lg,
|
5118
5110
|
[vars$g.cursor]: 'pointer',
|
5111
|
+
|
5112
|
+
[vars$g.borderRadius]: globalRefs$e.radius.sm,
|
5119
5113
|
[vars$g.borderWidth]: '2px',
|
5120
5114
|
[vars$g.borderStyle]: 'solid',
|
5121
5115
|
[vars$g.borderColor]: 'transparent',
|
5122
5116
|
|
5117
|
+
[vars$g.gap]: '0.25em',
|
5118
|
+
[vars$g.height]: '100%',
|
5119
|
+
|
5120
|
+
[vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
|
5121
|
+
[vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
|
5122
|
+
|
5123
|
+
size: {
|
5124
|
+
xs: { [vars$g.fontSize]: '12px' },
|
5125
|
+
sm: { [vars$g.fontSize]: '14px' },
|
5126
|
+
md: { [vars$g.fontSize]: '18px' },
|
5127
|
+
lg: { [vars$g.fontSize]: '22px' },
|
5128
|
+
xl: { [vars$g.fontSize]: '26px' }
|
5129
|
+
},
|
5130
|
+
|
5123
5131
|
_fullWidth: {
|
5124
5132
|
[vars$g.width]: '100%'
|
5125
5133
|
},
|
5134
|
+
|
5126
5135
|
_loading: {
|
5127
5136
|
[vars$g.cursor]: 'wait'
|
5128
5137
|
},
|
@@ -5134,27 +5143,30 @@ const button = {
|
|
5134
5143
|
_hover: {
|
5135
5144
|
[vars$g.backgroundColor]: helperRefs$2.dark
|
5136
5145
|
},
|
5137
|
-
|
5138
|
-
[vars$g.backgroundColor]: helperRefs$2.
|
5146
|
+
_active: {
|
5147
|
+
[vars$g.backgroundColor]: helperRefs$2.dark
|
5139
5148
|
}
|
5140
5149
|
},
|
5150
|
+
|
5141
5151
|
outline: {
|
5142
5152
|
[vars$g.color]: helperRefs$2.main,
|
5143
|
-
[vars$g.borderColor]:
|
5153
|
+
[vars$g.borderColor]: 'currentColor',
|
5144
5154
|
_hover: {
|
5145
5155
|
[vars$g.color]: helperRefs$2.dark,
|
5146
|
-
|
5147
|
-
|
5148
|
-
|
5149
|
-
}
|
5156
|
+
},
|
5157
|
+
_active: {
|
5158
|
+
[vars$g.color]: helperRefs$2.light,
|
5150
5159
|
}
|
5151
5160
|
},
|
5161
|
+
|
5152
5162
|
link: {
|
5153
5163
|
[vars$g.color]: helperRefs$2.main,
|
5154
|
-
[vars$g.lineHeight]: helperRefs$2.height,
|
5155
5164
|
_hover: {
|
5156
5165
|
[vars$g.color]: helperRefs$2.main,
|
5157
5166
|
[vars$g.textDecoration]: 'underline'
|
5167
|
+
},
|
5168
|
+
_active: {
|
5169
|
+
[vars$g.color]: helperRefs$2.dark
|
5158
5170
|
}
|
5159
5171
|
}
|
5160
5172
|
}
|