@descope/web-components-ui 1.0.44 → 1.0.46
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +180 -125
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +6 -6
- package/src/components/descope-button/Button.js +3 -3
- package/src/components/descope-logo/Logo.js +57 -0
- package/src/components/descope-logo/index.js +5 -0
- package/src/dev/index.js +2 -7
- package/src/theme/components/index.js +3 -1
- package/src/theme/components/logo.js +9 -0
- package/src/theme/components/textField.js +1 -1
package/dist/index.esm.js
CHANGED
@@ -417,7 +417,7 @@ const compose =
|
|
417
417
|
(val) =>
|
418
418
|
fns.reduceRight((res, fn) => fn(res), val);
|
419
419
|
|
420
|
-
const componentName$
|
420
|
+
const componentName$b = getComponentName('button');
|
421
421
|
|
422
422
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
423
423
|
const resetStyles = `
|
@@ -468,7 +468,7 @@ const Button = compose(
|
|
468
468
|
style: () =>
|
469
469
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
470
470
|
excludeAttrsSync: ['tabindex'],
|
471
|
-
componentName: componentName$
|
471
|
+
componentName: componentName$b
|
472
472
|
})
|
473
473
|
);
|
474
474
|
|
@@ -477,7 +477,7 @@ const loadingIndicatorStyles = `
|
|
477
477
|
0% { -webkit-transform: rotate(0deg); }
|
478
478
|
100% { -webkit-transform: rotate(360deg); }
|
479
479
|
}
|
480
|
-
:host([loading]) ::before {
|
480
|
+
:host([loading="true"]) ::before {
|
481
481
|
--marginRatio: 1.35;
|
482
482
|
color: var(${Button.cssVarList.color});
|
483
483
|
animation: spin 2s linear infinite;
|
@@ -495,15 +495,15 @@ const loadingIndicatorStyles = `
|
|
495
495
|
width: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
|
496
496
|
height: calc(var(${Button.cssVarList.height}) / var(--marginRatio));
|
497
497
|
}
|
498
|
-
:host([loading])::part(prefix),
|
499
|
-
:host([loading])::part(label) {
|
498
|
+
:host([loading="true"])::part(prefix),
|
499
|
+
:host([loading="true"])::part(label) {
|
500
500
|
visibility: hidden;
|
501
501
|
}
|
502
502
|
`;
|
503
503
|
|
504
|
-
customElements.define(componentName$
|
504
|
+
customElements.define(componentName$b, Button);
|
505
505
|
|
506
|
-
const componentName$
|
506
|
+
const componentName$a = getComponentName('text-field');
|
507
507
|
|
508
508
|
const selectors$1 = {
|
509
509
|
label: '::part(label)',
|
@@ -555,7 +555,7 @@ const TextField = compose(
|
|
555
555
|
wrappedEleName: 'vaadin-text-field',
|
556
556
|
style: () => overrides$5,
|
557
557
|
excludeAttrsSync: ['tabindex'],
|
558
|
-
componentName: componentName$
|
558
|
+
componentName: componentName$a
|
559
559
|
})
|
560
560
|
);
|
561
561
|
|
@@ -596,11 +596,11 @@ overrides$5 = `
|
|
596
596
|
}
|
597
597
|
`;
|
598
598
|
|
599
|
-
customElements.define(componentName$
|
599
|
+
customElements.define(componentName$a, TextField);
|
600
600
|
|
601
601
|
const template = document.createElement('template');
|
602
602
|
|
603
|
-
const componentName$
|
603
|
+
const componentName$9 = getComponentName('combo');
|
604
604
|
|
605
605
|
template.innerHTML = `
|
606
606
|
<descope-button></descope-button>
|
@@ -617,9 +617,9 @@ class Combo extends HTMLElement {
|
|
617
617
|
}
|
618
618
|
}
|
619
619
|
|
620
|
-
customElements.define(componentName$
|
620
|
+
customElements.define(componentName$9, Combo);
|
621
621
|
|
622
|
-
const componentName$
|
622
|
+
const componentName$8 = getComponentName('number-field');
|
623
623
|
|
624
624
|
let overrides$4 = ``;
|
625
625
|
|
@@ -638,7 +638,7 @@ const NumberField = compose(
|
|
638
638
|
wrappedEleName: 'vaadin-number-field',
|
639
639
|
style: () => overrides$4,
|
640
640
|
excludeAttrsSync: ['tabindex'],
|
641
|
-
componentName: componentName$
|
641
|
+
componentName: componentName$8
|
642
642
|
})
|
643
643
|
);
|
644
644
|
|
@@ -679,9 +679,9 @@ overrides$4 = `
|
|
679
679
|
}
|
680
680
|
`;
|
681
681
|
|
682
|
-
customElements.define(componentName$
|
682
|
+
customElements.define(componentName$8, NumberField);
|
683
683
|
|
684
|
-
const componentName$
|
684
|
+
const componentName$7 = getComponentName('email-field');
|
685
685
|
|
686
686
|
let overrides$3 = ``;
|
687
687
|
|
@@ -700,7 +700,7 @@ const EmailField = compose(
|
|
700
700
|
wrappedEleName: 'vaadin-email-field',
|
701
701
|
style: () => overrides$3,
|
702
702
|
excludeAttrsSync: ['tabindex'],
|
703
|
-
componentName: componentName$
|
703
|
+
componentName: componentName$7
|
704
704
|
})
|
705
705
|
);
|
706
706
|
|
@@ -741,9 +741,9 @@ overrides$3 = `
|
|
741
741
|
}
|
742
742
|
`;
|
743
743
|
|
744
|
-
customElements.define(componentName$
|
744
|
+
customElements.define(componentName$7, EmailField);
|
745
745
|
|
746
|
-
const componentName$
|
746
|
+
const componentName$6 = getComponentName('password-field');
|
747
747
|
|
748
748
|
let overrides$2 = ``;
|
749
749
|
|
@@ -769,7 +769,7 @@ const PasswordField = compose(
|
|
769
769
|
wrappedEleName: 'vaadin-password-field',
|
770
770
|
style: () => overrides$2,
|
771
771
|
excludeAttrsSync: ['tabindex'],
|
772
|
-
componentName: componentName$
|
772
|
+
componentName: componentName$6
|
773
773
|
})
|
774
774
|
);
|
775
775
|
|
@@ -810,9 +810,9 @@ overrides$2 = `
|
|
810
810
|
}
|
811
811
|
`;
|
812
812
|
|
813
|
-
customElements.define(componentName$
|
813
|
+
customElements.define(componentName$6, PasswordField);
|
814
814
|
|
815
|
-
const componentName$
|
815
|
+
const componentName$5 = getComponentName('text-area');
|
816
816
|
|
817
817
|
const selectors = {
|
818
818
|
label: '::part(label)',
|
@@ -847,7 +847,7 @@ const TextArea = compose(
|
|
847
847
|
wrappedEleName: 'vaadin-text-area',
|
848
848
|
style: () => overrides$1,
|
849
849
|
excludeAttrsSync: ['tabindex'],
|
850
|
-
componentName: componentName$
|
850
|
+
componentName: componentName$5
|
851
851
|
})
|
852
852
|
);
|
853
853
|
|
@@ -868,29 +868,29 @@ overrides$1 = `
|
|
868
868
|
}
|
869
869
|
`;
|
870
870
|
|
871
|
-
customElements.define(componentName$
|
871
|
+
customElements.define(componentName$5, TextArea);
|
872
872
|
|
873
|
-
const componentName$
|
873
|
+
const componentName$4 = getComponentName('date-picker');
|
874
874
|
|
875
875
|
const DatePicker = compose(
|
876
876
|
draggableMixin,
|
877
877
|
componentNameValidationMixin
|
878
878
|
)(
|
879
879
|
createProxy({
|
880
|
-
componentName: componentName$
|
880
|
+
componentName: componentName$4,
|
881
881
|
slots: ['prefix', 'suffix'],
|
882
882
|
wrappedEleName: 'vaadin-date-picker',
|
883
883
|
style: ``
|
884
884
|
})
|
885
885
|
);
|
886
886
|
|
887
|
-
customElements.define(componentName$
|
887
|
+
customElements.define(componentName$4, DatePicker);
|
888
888
|
|
889
|
-
const componentName$
|
889
|
+
const componentName$3 = getComponentName('container');
|
890
890
|
|
891
891
|
class RawContainer extends HTMLElement {
|
892
892
|
static get componentName() {
|
893
|
-
return componentName$
|
893
|
+
return componentName$3;
|
894
894
|
}
|
895
895
|
constructor() {
|
896
896
|
super();
|
@@ -940,7 +940,7 @@ const Container = compose(
|
|
940
940
|
componentNameValidationMixin
|
941
941
|
)(RawContainer);
|
942
942
|
|
943
|
-
customElements.define(componentName$
|
943
|
+
customElements.define(componentName$3, Container);
|
944
944
|
|
945
945
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
946
946
|
|
@@ -1154,7 +1154,7 @@ var globals = {
|
|
1154
1154
|
};
|
1155
1155
|
|
1156
1156
|
const globalRefs$3 = getThemeRefs(globals);
|
1157
|
-
const vars$
|
1157
|
+
const vars$7 = Button.cssVarList;
|
1158
1158
|
|
1159
1159
|
const mode = {
|
1160
1160
|
primary: globalRefs$3.colors.primary,
|
@@ -1164,83 +1164,83 @@ const mode = {
|
|
1164
1164
|
surface: globalRefs$3.colors.surface
|
1165
1165
|
};
|
1166
1166
|
|
1167
|
-
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$
|
1167
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$b);
|
1168
1168
|
|
1169
1169
|
const button = {
|
1170
1170
|
...helperTheme$1,
|
1171
1171
|
|
1172
1172
|
size: {
|
1173
1173
|
xs: {
|
1174
|
-
[vars$
|
1175
|
-
[vars$
|
1176
|
-
[vars$
|
1174
|
+
[vars$7.height]: '10px',
|
1175
|
+
[vars$7.fontSize]: '10px',
|
1176
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.xs}`
|
1177
1177
|
},
|
1178
1178
|
sm: {
|
1179
|
-
[vars$
|
1180
|
-
[vars$
|
1181
|
-
[vars$
|
1179
|
+
[vars$7.height]: '20px',
|
1180
|
+
[vars$7.fontSize]: '10px',
|
1181
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.sm}`
|
1182
1182
|
},
|
1183
1183
|
md: {
|
1184
|
-
[vars$
|
1185
|
-
[vars$
|
1186
|
-
[vars$
|
1184
|
+
[vars$7.height]: '30px',
|
1185
|
+
[vars$7.fontSize]: '14px',
|
1186
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.md}`
|
1187
1187
|
},
|
1188
1188
|
lg: {
|
1189
|
-
[vars$
|
1190
|
-
[vars$
|
1191
|
-
[vars$
|
1189
|
+
[vars$7.height]: '40px',
|
1190
|
+
[vars$7.fontSize]: '20px',
|
1191
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.lg}`
|
1192
1192
|
},
|
1193
1193
|
xl: {
|
1194
|
-
[vars$
|
1195
|
-
[vars$
|
1196
|
-
[vars$
|
1194
|
+
[vars$7.height]: '50px',
|
1195
|
+
[vars$7.fontSize]: '25px',
|
1196
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.xl}`
|
1197
1197
|
}
|
1198
1198
|
},
|
1199
1199
|
|
1200
|
-
[vars$
|
1201
|
-
[vars$
|
1202
|
-
[vars$
|
1203
|
-
[vars$
|
1204
|
-
[vars$
|
1200
|
+
[vars$7.borderRadius]: globalRefs$3.radius.lg,
|
1201
|
+
[vars$7.cursor]: 'pointer',
|
1202
|
+
[vars$7.borderWidth]: '2px',
|
1203
|
+
[vars$7.borderStyle]: 'solid',
|
1204
|
+
[vars$7.borderColor]: 'transparent',
|
1205
1205
|
|
1206
1206
|
_fullWidth: {
|
1207
|
-
[vars$
|
1207
|
+
[vars$7.width]: '100%'
|
1208
1208
|
},
|
1209
1209
|
_loading: {
|
1210
|
-
[vars$
|
1210
|
+
[vars$7.cursor]: 'wait'
|
1211
1211
|
},
|
1212
1212
|
|
1213
1213
|
variant: {
|
1214
1214
|
contained: {
|
1215
|
-
[vars$
|
1216
|
-
[vars$
|
1215
|
+
[vars$7.color]: helperRefs$1.contrast,
|
1216
|
+
[vars$7.backgroundColor]: helperRefs$1.main,
|
1217
1217
|
_hover: {
|
1218
|
-
[vars$
|
1218
|
+
[vars$7.backgroundColor]: helperRefs$1.dark
|
1219
1219
|
},
|
1220
1220
|
_loading: {
|
1221
|
-
[vars$
|
1221
|
+
[vars$7.backgroundColor]: helperRefs$1.main
|
1222
1222
|
}
|
1223
1223
|
},
|
1224
1224
|
outline: {
|
1225
|
-
[vars$
|
1226
|
-
[vars$
|
1225
|
+
[vars$7.color]: helperRefs$1.main,
|
1226
|
+
[vars$7.borderColor]: helperRefs$1.main,
|
1227
1227
|
_hover: {
|
1228
|
-
[vars$
|
1229
|
-
[vars$
|
1228
|
+
[vars$7.color]: helperRefs$1.dark,
|
1229
|
+
[vars$7.borderColor]: helperRefs$1.dark,
|
1230
1230
|
_error: {
|
1231
|
-
[vars$
|
1231
|
+
[vars$7.color]: helperRefs$1.error
|
1232
1232
|
}
|
1233
1233
|
}
|
1234
1234
|
},
|
1235
1235
|
link: {
|
1236
|
-
[vars$
|
1237
|
-
[vars$
|
1238
|
-
[vars$
|
1239
|
-
[vars$
|
1240
|
-
[vars$
|
1236
|
+
[vars$7.color]: helperRefs$1.main,
|
1237
|
+
[vars$7.padding]: 0,
|
1238
|
+
[vars$7.margin]: 0,
|
1239
|
+
[vars$7.lineHeight]: helperRefs$1.height,
|
1240
|
+
[vars$7.borderRadius]: 0,
|
1241
1241
|
_hover: {
|
1242
|
-
[vars$
|
1243
|
-
[vars$
|
1242
|
+
[vars$7.color]: helperRefs$1.main,
|
1243
|
+
[vars$7.textDecoration]: 'underline'
|
1244
1244
|
}
|
1245
1245
|
}
|
1246
1246
|
}
|
@@ -1248,7 +1248,7 @@ const button = {
|
|
1248
1248
|
|
1249
1249
|
const globalRefs$2 = getThemeRefs(globals);
|
1250
1250
|
|
1251
|
-
const vars$
|
1251
|
+
const vars$6 = TextField.cssVarList;
|
1252
1252
|
|
1253
1253
|
const textField = (vars) => ({
|
1254
1254
|
size: {
|
@@ -1290,7 +1290,7 @@ const textField = (vars) => ({
|
|
1290
1290
|
[vars.borderWidthReadOnly]: '0',
|
1291
1291
|
[vars.borderRadius]: globalRefs$2.radius.sm,
|
1292
1292
|
|
1293
|
-
|
1293
|
+
_borderOffset: {
|
1294
1294
|
[vars.outlineOffset]: '2px'
|
1295
1295
|
},
|
1296
1296
|
|
@@ -1318,13 +1318,13 @@ const textField = (vars) => ({
|
|
1318
1318
|
}
|
1319
1319
|
});
|
1320
1320
|
|
1321
|
-
var textField$1 = textField(vars$
|
1321
|
+
var textField$1 = textField(vars$6);
|
1322
1322
|
|
1323
|
-
const vars$
|
1323
|
+
const vars$5 = PasswordField.cssVarList;
|
1324
1324
|
|
1325
1325
|
const passwordField = {
|
1326
|
-
...textField(vars$
|
1327
|
-
[vars$
|
1326
|
+
...textField(vars$5),
|
1327
|
+
[vars$5.revealCursor]: 'pointer'
|
1328
1328
|
};
|
1329
1329
|
|
1330
1330
|
const numberField = {
|
@@ -1336,45 +1336,45 @@ const emailField = {
|
|
1336
1336
|
};
|
1337
1337
|
|
1338
1338
|
const globalRefs$1 = getThemeRefs(globals);
|
1339
|
-
const vars$
|
1339
|
+
const vars$4 = TextArea.cssVarList;
|
1340
1340
|
|
1341
1341
|
const textArea = {
|
1342
|
-
[vars$
|
1343
|
-
[vars$
|
1344
|
-
[vars$
|
1342
|
+
[vars$4.color]: globalRefs$1.colors.primary.main,
|
1343
|
+
[vars$4.backgroundColor]: globalRefs$1.colors.surface.light,
|
1344
|
+
[vars$4.resize]: 'vertical',
|
1345
1345
|
|
1346
|
-
[vars$
|
1347
|
-
[vars$
|
1348
|
-
[vars$
|
1349
|
-
[vars$
|
1346
|
+
[vars$4.borderRadius]: globalRefs$1.radius.sm,
|
1347
|
+
[vars$4.borderWidth]: '1px',
|
1348
|
+
[vars$4.borderStyle]: 'solid',
|
1349
|
+
[vars$4.borderColor]: 'transparent',
|
1350
1350
|
|
1351
1351
|
_borderOffset: {
|
1352
|
-
[vars$
|
1352
|
+
[vars$4.outlineOffset]: '2px'
|
1353
1353
|
},
|
1354
1354
|
|
1355
1355
|
_bordered: {
|
1356
|
-
[vars$
|
1356
|
+
[vars$4.borderColor]: globalRefs$1.colors.surface.main
|
1357
1357
|
},
|
1358
1358
|
|
1359
1359
|
_focused: {
|
1360
|
-
[vars$
|
1361
|
-
[vars$
|
1360
|
+
[vars$4.focusInputCursor]: 'text',
|
1361
|
+
[vars$4.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
|
1362
1362
|
},
|
1363
1363
|
|
1364
1364
|
_fullWidth: {
|
1365
|
-
[vars$
|
1365
|
+
[vars$4.width]: '100%'
|
1366
1366
|
},
|
1367
1367
|
|
1368
1368
|
_disabled: {
|
1369
|
-
[vars$
|
1369
|
+
[vars$4.cursor]: 'not-allowed'
|
1370
1370
|
},
|
1371
1371
|
|
1372
1372
|
_invalid: {
|
1373
|
-
[vars$
|
1373
|
+
[vars$4.outline]: `2px solid ${globalRefs$1.colors.error.main}`
|
1374
1374
|
}
|
1375
1375
|
};
|
1376
1376
|
|
1377
|
-
const componentName$
|
1377
|
+
const componentName$2 = getComponentName('checkbox');
|
1378
1378
|
|
1379
1379
|
const Checkbox = compose(
|
1380
1380
|
createStyleMixin({
|
@@ -1392,17 +1392,17 @@ const Checkbox = compose(
|
|
1392
1392
|
wrappedEleName: 'vaadin-checkbox',
|
1393
1393
|
style: ``,
|
1394
1394
|
excludeAttrsSync: ['tabindex'],
|
1395
|
-
componentName: componentName$
|
1395
|
+
componentName: componentName$2
|
1396
1396
|
})
|
1397
1397
|
);
|
1398
1398
|
|
1399
|
-
const vars$
|
1399
|
+
const vars$3 = Checkbox.cssVarList;
|
1400
1400
|
|
1401
1401
|
const checkbox = {
|
1402
|
-
[vars$
|
1402
|
+
[vars$3.cursor]: 'pointer'
|
1403
1403
|
};
|
1404
1404
|
|
1405
|
-
const componentName = getComponentName('switch-toggle');
|
1405
|
+
const componentName$1 = getComponentName('switch-toggle');
|
1406
1406
|
|
1407
1407
|
let overrides = ``;
|
1408
1408
|
|
@@ -1422,7 +1422,7 @@ const SwitchToggle = compose(
|
|
1422
1422
|
wrappedEleName: 'vaadin-checkbox',
|
1423
1423
|
style: () => overrides,
|
1424
1424
|
excludeAttrsSync: ['tabindex'],
|
1425
|
-
componentName
|
1425
|
+
componentName: componentName$1
|
1426
1426
|
})
|
1427
1427
|
);
|
1428
1428
|
|
@@ -1472,16 +1472,16 @@ overrides = `
|
|
1472
1472
|
}
|
1473
1473
|
`;
|
1474
1474
|
|
1475
|
-
const vars$
|
1475
|
+
const vars$2 = SwitchToggle.cssVarList;
|
1476
1476
|
|
1477
1477
|
const swtichToggle = {
|
1478
|
-
[vars$
|
1479
|
-
[vars$
|
1478
|
+
[vars$2.width]: '70px',
|
1479
|
+
[vars$2.cursor]: [{}, { selector: '> label' }]
|
1480
1480
|
};
|
1481
1481
|
|
1482
1482
|
const globalRefs = getThemeRefs(globals);
|
1483
1483
|
|
1484
|
-
const vars = Container.cssVarList;
|
1484
|
+
const vars$1 = Container.cssVarList;
|
1485
1485
|
|
1486
1486
|
const verticalAlignment = {
|
1487
1487
|
start: { verticalAlignment: 'start' },
|
@@ -1504,31 +1504,31 @@ const [helperTheme, helperRefs, helperVars] =
|
|
1504
1504
|
|
1505
1505
|
const container = {
|
1506
1506
|
...helperTheme,
|
1507
|
-
[vars.display]: 'flex',
|
1507
|
+
[vars$1.display]: 'flex',
|
1508
1508
|
verticalPadding: {
|
1509
|
-
sm: { [vars.verticalPadding]: '5px' },
|
1510
|
-
md: { [vars.verticalPadding]: '10px' },
|
1511
|
-
lg: { [vars.verticalPadding]: '20px' },
|
1509
|
+
sm: { [vars$1.verticalPadding]: '5px' },
|
1510
|
+
md: { [vars$1.verticalPadding]: '10px' },
|
1511
|
+
lg: { [vars$1.verticalPadding]: '20px' },
|
1512
1512
|
},
|
1513
1513
|
horizontalPadding: {
|
1514
|
-
sm: { [vars.horizontalPadding]: '5px' },
|
1515
|
-
md: { [vars.horizontalPadding]: '10px' },
|
1516
|
-
lg: { [vars.horizontalPadding]: '20px' },
|
1514
|
+
sm: { [vars$1.horizontalPadding]: '5px' },
|
1515
|
+
md: { [vars$1.horizontalPadding]: '10px' },
|
1516
|
+
lg: { [vars$1.horizontalPadding]: '20px' },
|
1517
1517
|
},
|
1518
1518
|
direction: {
|
1519
1519
|
row: {
|
1520
|
-
[vars.flexDirection]: 'row',
|
1521
|
-
[vars.alignItems]: helperRefs.verticalAlignment,
|
1522
|
-
[vars.justifyContent]: helperRefs.horizontalAlignment,
|
1520
|
+
[vars$1.flexDirection]: 'row',
|
1521
|
+
[vars$1.alignItems]: helperRefs.verticalAlignment,
|
1522
|
+
[vars$1.justifyContent]: helperRefs.horizontalAlignment,
|
1523
1523
|
horizontalAlignment: {
|
1524
1524
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
1525
1525
|
}
|
1526
1526
|
},
|
1527
1527
|
|
1528
1528
|
column: {
|
1529
|
-
[vars.flexDirection]: 'column',
|
1530
|
-
[vars.alignItems]: helperRefs.horizontalAlignment,
|
1531
|
-
[vars.justifyContent]: helperRefs.verticalAlignment,
|
1529
|
+
[vars$1.flexDirection]: 'column',
|
1530
|
+
[vars$1.alignItems]: helperRefs.horizontalAlignment,
|
1531
|
+
[vars$1.justifyContent]: helperRefs.verticalAlignment,
|
1532
1532
|
verticalAlignment: {
|
1533
1533
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
1534
1534
|
}
|
@@ -1537,48 +1537,102 @@ const container = {
|
|
1537
1537
|
|
1538
1538
|
spaceBetween: {
|
1539
1539
|
sm: {
|
1540
|
-
[vars.gap]: '10px'
|
1540
|
+
[vars$1.gap]: '10px'
|
1541
1541
|
},
|
1542
1542
|
md: {
|
1543
|
-
[vars.gap]: '20px'
|
1543
|
+
[vars$1.gap]: '20px'
|
1544
1544
|
},
|
1545
1545
|
lg: {
|
1546
|
-
[vars.gap]: '30px'
|
1546
|
+
[vars$1.gap]: '30px'
|
1547
1547
|
}
|
1548
1548
|
},
|
1549
1549
|
|
1550
1550
|
shadow: {
|
1551
1551
|
sm: {
|
1552
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
1552
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
1553
1553
|
},
|
1554
1554
|
md: {
|
1555
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
|
1555
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
|
1556
1556
|
},
|
1557
1557
|
lg: {
|
1558
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
1558
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
1559
1559
|
},
|
1560
1560
|
xl: {
|
1561
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
1561
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
1562
1562
|
},
|
1563
1563
|
'2xl': {
|
1564
1564
|
[helperVars.shadowColor]: '#00000050',
|
1565
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
1565
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
1566
1566
|
},
|
1567
1567
|
},
|
1568
1568
|
|
1569
1569
|
borderRadius: {
|
1570
1570
|
sm: {
|
1571
|
-
[vars.borderRadius]: globalRefs.radius.sm
|
1571
|
+
[vars$1.borderRadius]: globalRefs.radius.sm
|
1572
1572
|
},
|
1573
1573
|
md: {
|
1574
|
-
[vars.borderRadius]: globalRefs.radius.md
|
1574
|
+
[vars$1.borderRadius]: globalRefs.radius.md
|
1575
1575
|
},
|
1576
1576
|
lg: {
|
1577
|
-
[vars.borderRadius]: globalRefs.radius.lg
|
1577
|
+
[vars$1.borderRadius]: globalRefs.radius.lg
|
1578
1578
|
},
|
1579
1579
|
}
|
1580
1580
|
};
|
1581
1581
|
|
1582
|
+
const componentName = getComponentName('logo');
|
1583
|
+
|
1584
|
+
let style;
|
1585
|
+
const getStyle = () => style;
|
1586
|
+
|
1587
|
+
class RawLogo extends HTMLElement {
|
1588
|
+
static get componentName() {
|
1589
|
+
return componentName;
|
1590
|
+
}
|
1591
|
+
constructor() {
|
1592
|
+
super();
|
1593
|
+
const template = document.createElement('template');
|
1594
|
+
template.innerHTML = `
|
1595
|
+
<style>
|
1596
|
+
${getStyle()}
|
1597
|
+
</style>
|
1598
|
+
<div></div>`;
|
1599
|
+
|
1600
|
+
this.attachShadow({ mode: 'open' });
|
1601
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1602
|
+
|
1603
|
+
this.baseSelector = ':host > div';
|
1604
|
+
}
|
1605
|
+
}
|
1606
|
+
|
1607
|
+
const Logo = compose(
|
1608
|
+
createStyleMixin({
|
1609
|
+
mappings: {
|
1610
|
+
height: {},
|
1611
|
+
width: {},
|
1612
|
+
url: {},
|
1613
|
+
fallbackUrl: {},
|
1614
|
+
}
|
1615
|
+
}),
|
1616
|
+
draggableMixin,
|
1617
|
+
componentNameValidationMixin
|
1618
|
+
)(RawLogo);
|
1619
|
+
|
1620
|
+
style = `
|
1621
|
+
:host {
|
1622
|
+
display: inline-block;
|
1623
|
+
}
|
1624
|
+
:host > div {
|
1625
|
+
display: inline-block;
|
1626
|
+
content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
|
1627
|
+
}
|
1628
|
+
`;
|
1629
|
+
|
1630
|
+
const vars = Logo.cssVarList;
|
1631
|
+
|
1632
|
+
const logo = {
|
1633
|
+
[vars.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
1634
|
+
};
|
1635
|
+
|
1582
1636
|
var components = {
|
1583
1637
|
button,
|
1584
1638
|
textField: textField$1,
|
@@ -1588,7 +1642,8 @@ var components = {
|
|
1588
1642
|
textArea,
|
1589
1643
|
checkbox,
|
1590
1644
|
switchToggle: swtichToggle,
|
1591
|
-
container
|
1645
|
+
container,
|
1646
|
+
logo
|
1592
1647
|
};
|
1593
1648
|
|
1594
1649
|
var index = { globals, components };
|