@descope/web-components-ui 1.0.45 → 1.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +231 -133
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/599.js +1 -1
- package/dist/umd/63.js +1 -1
- package/dist/umd/938.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -0
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/Button.js +5 -2
- package/src/components/descope-checkbox/Checkbox.js +8 -3
- package/src/components/descope-email-field/EmailField.js +3 -0
- package/src/components/descope-logo/Logo.js +57 -0
- package/src/components/descope-logo/index.js +5 -0
- package/src/components/descope-number-field/NumberField.js +3 -0
- package/src/components/descope-password-field/PasswordField.js +3 -0
- package/src/components/descope-switch-toggle/SwitchToggle.js +7 -2
- package/src/components/descope-text-area/TextArea.js +7 -2
- package/src/components/descope-text-field/TextField.js +5 -1
- package/src/componentsHelpers/createStyleMixin/helpers.js +1 -1
- package/src/componentsHelpers/inputMixin.js +19 -4
- 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/input.js +0 -106
package/dist/index.esm.js
CHANGED
@@ -102,7 +102,7 @@ const createCssVarsList = (componentName, mappings) =>
|
|
102
102
|
|
103
103
|
// match the host selector with the inner element selector
|
104
104
|
// e.g. when we want to set the same size for the host & the inner element this can be useful
|
105
|
-
const matchHostStyle = (mappingObj) => [
|
105
|
+
const matchHostStyle = (mappingObj = {}) => [
|
106
106
|
mappingObj,
|
107
107
|
{ ...mappingObj, selector: () => `:host${mappingObj.selector || ''}` }
|
108
108
|
];
|
@@ -336,6 +336,18 @@ const createProxy = ({
|
|
336
336
|
return ProxyElement;
|
337
337
|
};
|
338
338
|
|
339
|
+
const propertyObserver = (src, target, property) => {
|
340
|
+
Object.defineProperty(src, property, {
|
341
|
+
set: function (v) {
|
342
|
+
return target[property] = v
|
343
|
+
},
|
344
|
+
get: function () {
|
345
|
+
return target[property]
|
346
|
+
},
|
347
|
+
configurable: true
|
348
|
+
});
|
349
|
+
};
|
350
|
+
|
339
351
|
const inputMixin = (superclass) =>
|
340
352
|
class InputMixinClass extends superclass {
|
341
353
|
static get formAssociated() {
|
@@ -355,6 +367,7 @@ const inputMixin = (superclass) =>
|
|
355
367
|
}
|
356
368
|
|
357
369
|
connectedCallback() {
|
370
|
+
this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
|
358
371
|
super.connectedCallback?.();
|
359
372
|
|
360
373
|
// this is needed in order to make sure the form input validation is working
|
@@ -362,13 +375,15 @@ const inputMixin = (superclass) =>
|
|
362
375
|
this.setAttribute('tabindex', 0);
|
363
376
|
}
|
364
377
|
|
365
|
-
// vaadin does not expose all those validation attributes so we need to take it from the input
|
366
|
-
// https://github.com/vaadin/web-components/issues/1177
|
367
378
|
const input =
|
368
|
-
this.
|
369
|
-
this.
|
379
|
+
this.baseEle.querySelector('input') ||
|
380
|
+
this.baseEle.querySelector('textarea');
|
370
381
|
if (!input) throw Error('no input was found');
|
371
382
|
|
383
|
+
// sync properties
|
384
|
+
propertyObserver(this, input, 'value');
|
385
|
+
this.setSelectionRange = input.setSelectionRange.bind(input);
|
386
|
+
|
372
387
|
this.checkValidity = () => input.checkValidity();
|
373
388
|
this.reportValidity = () => input.reportValidity();
|
374
389
|
this.validity = input.validity;
|
@@ -417,10 +432,13 @@ const compose =
|
|
417
432
|
(val) =>
|
418
433
|
fns.reduceRight((res, fn) => fn(res), val);
|
419
434
|
|
420
|
-
const componentName$
|
435
|
+
const componentName$b = getComponentName('button');
|
421
436
|
|
422
437
|
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
423
438
|
const resetStyles = `
|
439
|
+
:host {
|
440
|
+
display: inline-block;
|
441
|
+
}
|
424
442
|
vaadin-button { margin: 0; }
|
425
443
|
vaadin-button::part(prefix) {
|
426
444
|
margin-left: 0;
|
@@ -453,9 +471,9 @@ const Button = compose(
|
|
453
471
|
borderWidth: {},
|
454
472
|
fontSize: {},
|
455
473
|
height: {},
|
456
|
-
width:
|
474
|
+
width: matchHostStyle(),
|
457
475
|
cursor: {},
|
458
|
-
padding: [
|
476
|
+
padding: [{ selector: selectors$2.label }],
|
459
477
|
textDecoration: { selector: selectors$2.label }
|
460
478
|
}
|
461
479
|
}),
|
@@ -468,7 +486,7 @@ const Button = compose(
|
|
468
486
|
style: () =>
|
469
487
|
`${resetStyles} ${editorOverrides} ${iconStyles} ${loadingIndicatorStyles}`,
|
470
488
|
excludeAttrsSync: ['tabindex'],
|
471
|
-
componentName: componentName$
|
489
|
+
componentName: componentName$b
|
472
490
|
})
|
473
491
|
);
|
474
492
|
|
@@ -501,9 +519,9 @@ const loadingIndicatorStyles = `
|
|
501
519
|
}
|
502
520
|
`;
|
503
521
|
|
504
|
-
customElements.define(componentName$
|
522
|
+
customElements.define(componentName$b, Button);
|
505
523
|
|
506
|
-
const componentName$
|
524
|
+
const componentName$a = getComponentName('text-field');
|
507
525
|
|
508
526
|
const selectors$1 = {
|
509
527
|
label: '::part(label)',
|
@@ -517,7 +535,7 @@ let overrides$5 = ``;
|
|
517
535
|
const textFieldMappings = {
|
518
536
|
color: { selector: selectors$1.input },
|
519
537
|
backgroundColor: { selector: selectors$1.input },
|
520
|
-
width:
|
538
|
+
width: matchHostStyle(),
|
521
539
|
color: { selector: selectors$1.input },
|
522
540
|
borderColor: [
|
523
541
|
{ selector: selectors$1.input },
|
@@ -555,11 +573,15 @@ const TextField = compose(
|
|
555
573
|
wrappedEleName: 'vaadin-text-field',
|
556
574
|
style: () => overrides$5,
|
557
575
|
excludeAttrsSync: ['tabindex'],
|
558
|
-
componentName: componentName$
|
576
|
+
componentName: componentName$a
|
559
577
|
})
|
560
578
|
);
|
561
579
|
|
562
580
|
overrides$5 = `
|
581
|
+
:host {
|
582
|
+
display: inline-block;
|
583
|
+
}
|
584
|
+
|
563
585
|
vaadin-text-field {
|
564
586
|
margin: 0;
|
565
587
|
padding: 0;
|
@@ -596,11 +618,11 @@ overrides$5 = `
|
|
596
618
|
}
|
597
619
|
`;
|
598
620
|
|
599
|
-
customElements.define(componentName$
|
621
|
+
customElements.define(componentName$a, TextField);
|
600
622
|
|
601
623
|
const template = document.createElement('template');
|
602
624
|
|
603
|
-
const componentName$
|
625
|
+
const componentName$9 = getComponentName('combo');
|
604
626
|
|
605
627
|
template.innerHTML = `
|
606
628
|
<descope-button></descope-button>
|
@@ -617,9 +639,9 @@ class Combo extends HTMLElement {
|
|
617
639
|
}
|
618
640
|
}
|
619
641
|
|
620
|
-
customElements.define(componentName$
|
642
|
+
customElements.define(componentName$9, Combo);
|
621
643
|
|
622
|
-
const componentName$
|
644
|
+
const componentName$8 = getComponentName('number-field');
|
623
645
|
|
624
646
|
let overrides$4 = ``;
|
625
647
|
|
@@ -638,11 +660,14 @@ const NumberField = compose(
|
|
638
660
|
wrappedEleName: 'vaadin-number-field',
|
639
661
|
style: () => overrides$4,
|
640
662
|
excludeAttrsSync: ['tabindex'],
|
641
|
-
componentName: componentName$
|
663
|
+
componentName: componentName$8
|
642
664
|
})
|
643
665
|
);
|
644
666
|
|
645
667
|
overrides$4 = `
|
668
|
+
:host {
|
669
|
+
display: inline-block;
|
670
|
+
}
|
646
671
|
vaadin-number-field {
|
647
672
|
margin: 0;
|
648
673
|
padding: 0;
|
@@ -679,9 +704,9 @@ overrides$4 = `
|
|
679
704
|
}
|
680
705
|
`;
|
681
706
|
|
682
|
-
customElements.define(componentName$
|
707
|
+
customElements.define(componentName$8, NumberField);
|
683
708
|
|
684
|
-
const componentName$
|
709
|
+
const componentName$7 = getComponentName('email-field');
|
685
710
|
|
686
711
|
let overrides$3 = ``;
|
687
712
|
|
@@ -700,11 +725,14 @@ const EmailField = compose(
|
|
700
725
|
wrappedEleName: 'vaadin-email-field',
|
701
726
|
style: () => overrides$3,
|
702
727
|
excludeAttrsSync: ['tabindex'],
|
703
|
-
componentName: componentName$
|
728
|
+
componentName: componentName$7
|
704
729
|
})
|
705
730
|
);
|
706
731
|
|
707
732
|
overrides$3 = `
|
733
|
+
:host {
|
734
|
+
display: inline-block;
|
735
|
+
}
|
708
736
|
vaadin-email-field {
|
709
737
|
margin: 0;
|
710
738
|
padding: 0;
|
@@ -741,9 +769,9 @@ overrides$3 = `
|
|
741
769
|
}
|
742
770
|
`;
|
743
771
|
|
744
|
-
customElements.define(componentName$
|
772
|
+
customElements.define(componentName$7, EmailField);
|
745
773
|
|
746
|
-
const componentName$
|
774
|
+
const componentName$6 = getComponentName('password-field');
|
747
775
|
|
748
776
|
let overrides$2 = ``;
|
749
777
|
|
@@ -769,11 +797,14 @@ const PasswordField = compose(
|
|
769
797
|
wrappedEleName: 'vaadin-password-field',
|
770
798
|
style: () => overrides$2,
|
771
799
|
excludeAttrsSync: ['tabindex'],
|
772
|
-
componentName: componentName$
|
800
|
+
componentName: componentName$6
|
773
801
|
})
|
774
802
|
);
|
775
803
|
|
776
804
|
overrides$2 = `
|
805
|
+
:host {
|
806
|
+
display: inline-block;
|
807
|
+
}
|
777
808
|
vaadin-password-field {
|
778
809
|
margin: 0;
|
779
810
|
padding: 0;
|
@@ -810,9 +841,9 @@ overrides$2 = `
|
|
810
841
|
}
|
811
842
|
`;
|
812
843
|
|
813
|
-
customElements.define(componentName$
|
844
|
+
customElements.define(componentName$6, PasswordField);
|
814
845
|
|
815
|
-
const componentName$
|
846
|
+
const componentName$5 = getComponentName('text-area');
|
816
847
|
|
817
848
|
const selectors = {
|
818
849
|
label: '::part(label)',
|
@@ -828,7 +859,7 @@ const TextArea = compose(
|
|
828
859
|
resize: { selector: '> textarea' },
|
829
860
|
color: { selector: selectors.label },
|
830
861
|
cursor: {},
|
831
|
-
width:
|
862
|
+
width: matchHostStyle(),
|
832
863
|
backgroundColor: { selector: selectors.input },
|
833
864
|
borderWidth: { selector: selectors.input },
|
834
865
|
borderStyle: { selector: selectors.input },
|
@@ -847,11 +878,15 @@ const TextArea = compose(
|
|
847
878
|
wrappedEleName: 'vaadin-text-area',
|
848
879
|
style: () => overrides$1,
|
849
880
|
excludeAttrsSync: ['tabindex'],
|
850
|
-
componentName: componentName$
|
881
|
+
componentName: componentName$5
|
851
882
|
})
|
852
883
|
);
|
853
884
|
|
854
885
|
overrides$1 = `
|
886
|
+
:host {
|
887
|
+
display: inline-block;
|
888
|
+
}
|
889
|
+
|
855
890
|
vaadin-text-area {
|
856
891
|
margin: 0;
|
857
892
|
}
|
@@ -868,29 +903,29 @@ overrides$1 = `
|
|
868
903
|
}
|
869
904
|
`;
|
870
905
|
|
871
|
-
customElements.define(componentName$
|
906
|
+
customElements.define(componentName$5, TextArea);
|
872
907
|
|
873
|
-
const componentName$
|
908
|
+
const componentName$4 = getComponentName('date-picker');
|
874
909
|
|
875
910
|
const DatePicker = compose(
|
876
911
|
draggableMixin,
|
877
912
|
componentNameValidationMixin
|
878
913
|
)(
|
879
914
|
createProxy({
|
880
|
-
componentName: componentName$
|
915
|
+
componentName: componentName$4,
|
881
916
|
slots: ['prefix', 'suffix'],
|
882
917
|
wrappedEleName: 'vaadin-date-picker',
|
883
918
|
style: ``
|
884
919
|
})
|
885
920
|
);
|
886
921
|
|
887
|
-
customElements.define(componentName$
|
922
|
+
customElements.define(componentName$4, DatePicker);
|
888
923
|
|
889
|
-
const componentName$
|
924
|
+
const componentName$3 = getComponentName('container');
|
890
925
|
|
891
926
|
class RawContainer extends HTMLElement {
|
892
927
|
static get componentName() {
|
893
|
-
return componentName$
|
928
|
+
return componentName$3;
|
894
929
|
}
|
895
930
|
constructor() {
|
896
931
|
super();
|
@@ -940,7 +975,7 @@ const Container = compose(
|
|
940
975
|
componentNameValidationMixin
|
941
976
|
)(RawContainer);
|
942
977
|
|
943
|
-
customElements.define(componentName$
|
978
|
+
customElements.define(componentName$3, Container);
|
944
979
|
|
945
980
|
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
946
981
|
|
@@ -1154,7 +1189,7 @@ var globals = {
|
|
1154
1189
|
};
|
1155
1190
|
|
1156
1191
|
const globalRefs$3 = getThemeRefs(globals);
|
1157
|
-
const vars$
|
1192
|
+
const vars$7 = Button.cssVarList;
|
1158
1193
|
|
1159
1194
|
const mode = {
|
1160
1195
|
primary: globalRefs$3.colors.primary,
|
@@ -1164,83 +1199,83 @@ const mode = {
|
|
1164
1199
|
surface: globalRefs$3.colors.surface
|
1165
1200
|
};
|
1166
1201
|
|
1167
|
-
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$
|
1202
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$b);
|
1168
1203
|
|
1169
1204
|
const button = {
|
1170
1205
|
...helperTheme$1,
|
1171
1206
|
|
1172
1207
|
size: {
|
1173
1208
|
xs: {
|
1174
|
-
[vars$
|
1175
|
-
[vars$
|
1176
|
-
[vars$
|
1209
|
+
[vars$7.height]: '10px',
|
1210
|
+
[vars$7.fontSize]: '10px',
|
1211
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.xs}`
|
1177
1212
|
},
|
1178
1213
|
sm: {
|
1179
|
-
[vars$
|
1180
|
-
[vars$
|
1181
|
-
[vars$
|
1214
|
+
[vars$7.height]: '20px',
|
1215
|
+
[vars$7.fontSize]: '10px',
|
1216
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.sm}`
|
1182
1217
|
},
|
1183
1218
|
md: {
|
1184
|
-
[vars$
|
1185
|
-
[vars$
|
1186
|
-
[vars$
|
1219
|
+
[vars$7.height]: '30px',
|
1220
|
+
[vars$7.fontSize]: '14px',
|
1221
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.md}`
|
1187
1222
|
},
|
1188
1223
|
lg: {
|
1189
|
-
[vars$
|
1190
|
-
[vars$
|
1191
|
-
[vars$
|
1224
|
+
[vars$7.height]: '40px',
|
1225
|
+
[vars$7.fontSize]: '20px',
|
1226
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.lg}`
|
1192
1227
|
},
|
1193
1228
|
xl: {
|
1194
|
-
[vars$
|
1195
|
-
[vars$
|
1196
|
-
[vars$
|
1229
|
+
[vars$7.height]: '50px',
|
1230
|
+
[vars$7.fontSize]: '25px',
|
1231
|
+
[vars$7.padding]: `0 ${globalRefs$3.spacing.xl}`
|
1197
1232
|
}
|
1198
1233
|
},
|
1199
1234
|
|
1200
|
-
[vars$
|
1201
|
-
[vars$
|
1202
|
-
[vars$
|
1203
|
-
[vars$
|
1204
|
-
[vars$
|
1235
|
+
[vars$7.borderRadius]: globalRefs$3.radius.lg,
|
1236
|
+
[vars$7.cursor]: 'pointer',
|
1237
|
+
[vars$7.borderWidth]: '2px',
|
1238
|
+
[vars$7.borderStyle]: 'solid',
|
1239
|
+
[vars$7.borderColor]: 'transparent',
|
1205
1240
|
|
1206
1241
|
_fullWidth: {
|
1207
|
-
[vars$
|
1242
|
+
[vars$7.width]: '100%'
|
1208
1243
|
},
|
1209
1244
|
_loading: {
|
1210
|
-
[vars$
|
1245
|
+
[vars$7.cursor]: 'wait'
|
1211
1246
|
},
|
1212
1247
|
|
1213
1248
|
variant: {
|
1214
1249
|
contained: {
|
1215
|
-
[vars$
|
1216
|
-
[vars$
|
1250
|
+
[vars$7.color]: helperRefs$1.contrast,
|
1251
|
+
[vars$7.backgroundColor]: helperRefs$1.main,
|
1217
1252
|
_hover: {
|
1218
|
-
[vars$
|
1253
|
+
[vars$7.backgroundColor]: helperRefs$1.dark
|
1219
1254
|
},
|
1220
1255
|
_loading: {
|
1221
|
-
[vars$
|
1256
|
+
[vars$7.backgroundColor]: helperRefs$1.main
|
1222
1257
|
}
|
1223
1258
|
},
|
1224
1259
|
outline: {
|
1225
|
-
[vars$
|
1226
|
-
[vars$
|
1260
|
+
[vars$7.color]: helperRefs$1.main,
|
1261
|
+
[vars$7.borderColor]: helperRefs$1.main,
|
1227
1262
|
_hover: {
|
1228
|
-
[vars$
|
1229
|
-
[vars$
|
1263
|
+
[vars$7.color]: helperRefs$1.dark,
|
1264
|
+
[vars$7.borderColor]: helperRefs$1.dark,
|
1230
1265
|
_error: {
|
1231
|
-
[vars$
|
1266
|
+
[vars$7.color]: helperRefs$1.error
|
1232
1267
|
}
|
1233
1268
|
}
|
1234
1269
|
},
|
1235
1270
|
link: {
|
1236
|
-
[vars$
|
1237
|
-
[vars$
|
1238
|
-
[vars$
|
1239
|
-
[vars$
|
1240
|
-
[vars$
|
1271
|
+
[vars$7.color]: helperRefs$1.main,
|
1272
|
+
[vars$7.padding]: 0,
|
1273
|
+
[vars$7.margin]: 0,
|
1274
|
+
[vars$7.lineHeight]: helperRefs$1.height,
|
1275
|
+
[vars$7.borderRadius]: 0,
|
1241
1276
|
_hover: {
|
1242
|
-
[vars$
|
1243
|
-
[vars$
|
1277
|
+
[vars$7.color]: helperRefs$1.main,
|
1278
|
+
[vars$7.textDecoration]: 'underline'
|
1244
1279
|
}
|
1245
1280
|
}
|
1246
1281
|
}
|
@@ -1248,7 +1283,7 @@ const button = {
|
|
1248
1283
|
|
1249
1284
|
const globalRefs$2 = getThemeRefs(globals);
|
1250
1285
|
|
1251
|
-
const vars$
|
1286
|
+
const vars$6 = TextField.cssVarList;
|
1252
1287
|
|
1253
1288
|
const textField = (vars) => ({
|
1254
1289
|
size: {
|
@@ -1318,13 +1353,13 @@ const textField = (vars) => ({
|
|
1318
1353
|
}
|
1319
1354
|
});
|
1320
1355
|
|
1321
|
-
var textField$1 = textField(vars$
|
1356
|
+
var textField$1 = textField(vars$6);
|
1322
1357
|
|
1323
|
-
const vars$
|
1358
|
+
const vars$5 = PasswordField.cssVarList;
|
1324
1359
|
|
1325
1360
|
const passwordField = {
|
1326
|
-
...textField(vars$
|
1327
|
-
[vars$
|
1361
|
+
...textField(vars$5),
|
1362
|
+
[vars$5.revealCursor]: 'pointer'
|
1328
1363
|
};
|
1329
1364
|
|
1330
1365
|
const numberField = {
|
@@ -1336,50 +1371,50 @@ const emailField = {
|
|
1336
1371
|
};
|
1337
1372
|
|
1338
1373
|
const globalRefs$1 = getThemeRefs(globals);
|
1339
|
-
const vars$
|
1374
|
+
const vars$4 = TextArea.cssVarList;
|
1340
1375
|
|
1341
1376
|
const textArea = {
|
1342
|
-
[vars$
|
1343
|
-
[vars$
|
1344
|
-
[vars$
|
1377
|
+
[vars$4.color]: globalRefs$1.colors.primary.main,
|
1378
|
+
[vars$4.backgroundColor]: globalRefs$1.colors.surface.light,
|
1379
|
+
[vars$4.resize]: 'vertical',
|
1345
1380
|
|
1346
|
-
[vars$
|
1347
|
-
[vars$
|
1348
|
-
[vars$
|
1349
|
-
[vars$
|
1381
|
+
[vars$4.borderRadius]: globalRefs$1.radius.sm,
|
1382
|
+
[vars$4.borderWidth]: '1px',
|
1383
|
+
[vars$4.borderStyle]: 'solid',
|
1384
|
+
[vars$4.borderColor]: 'transparent',
|
1350
1385
|
|
1351
1386
|
_borderOffset: {
|
1352
|
-
[vars$
|
1387
|
+
[vars$4.outlineOffset]: '2px'
|
1353
1388
|
},
|
1354
1389
|
|
1355
1390
|
_bordered: {
|
1356
|
-
[vars$
|
1391
|
+
[vars$4.borderColor]: globalRefs$1.colors.surface.main
|
1357
1392
|
},
|
1358
1393
|
|
1359
1394
|
_focused: {
|
1360
|
-
[vars$
|
1361
|
-
[vars$
|
1395
|
+
[vars$4.focusInputCursor]: 'text',
|
1396
|
+
[vars$4.outline]: `2px solid ${globalRefs$1.colors.surface.main}`
|
1362
1397
|
},
|
1363
1398
|
|
1364
1399
|
_fullWidth: {
|
1365
|
-
[vars$
|
1400
|
+
[vars$4.width]: '100%'
|
1366
1401
|
},
|
1367
1402
|
|
1368
1403
|
_disabled: {
|
1369
|
-
[vars$
|
1404
|
+
[vars$4.cursor]: 'not-allowed'
|
1370
1405
|
},
|
1371
1406
|
|
1372
1407
|
_invalid: {
|
1373
|
-
[vars$
|
1408
|
+
[vars$4.outline]: `2px solid ${globalRefs$1.colors.error.main}`
|
1374
1409
|
}
|
1375
1410
|
};
|
1376
1411
|
|
1377
|
-
const componentName$
|
1412
|
+
const componentName$2 = getComponentName('checkbox');
|
1378
1413
|
|
1379
1414
|
const Checkbox = compose(
|
1380
1415
|
createStyleMixin({
|
1381
1416
|
mappings: {
|
1382
|
-
width:
|
1417
|
+
width: matchHostStyle(),
|
1383
1418
|
cursor: [{}, { selector: '> label' }]
|
1384
1419
|
}
|
1385
1420
|
}),
|
@@ -1390,26 +1425,30 @@ const Checkbox = compose(
|
|
1390
1425
|
createProxy({
|
1391
1426
|
slots: [],
|
1392
1427
|
wrappedEleName: 'vaadin-checkbox',
|
1393
|
-
style:
|
1428
|
+
style: `
|
1429
|
+
:host {
|
1430
|
+
display: inline-block;
|
1431
|
+
}
|
1432
|
+
`,
|
1394
1433
|
excludeAttrsSync: ['tabindex'],
|
1395
|
-
componentName: componentName$
|
1434
|
+
componentName: componentName$2
|
1396
1435
|
})
|
1397
1436
|
);
|
1398
1437
|
|
1399
|
-
const vars$
|
1438
|
+
const vars$3 = Checkbox.cssVarList;
|
1400
1439
|
|
1401
1440
|
const checkbox = {
|
1402
|
-
[vars$
|
1441
|
+
[vars$3.cursor]: 'pointer'
|
1403
1442
|
};
|
1404
1443
|
|
1405
|
-
const componentName = getComponentName('switch-toggle');
|
1444
|
+
const componentName$1 = getComponentName('switch-toggle');
|
1406
1445
|
|
1407
1446
|
let overrides = ``;
|
1408
1447
|
|
1409
1448
|
const SwitchToggle = compose(
|
1410
1449
|
createStyleMixin({
|
1411
1450
|
mappings: {
|
1412
|
-
width:
|
1451
|
+
width: matchHostStyle(),
|
1413
1452
|
cursor: [{}, { selector: '> label' }]
|
1414
1453
|
}
|
1415
1454
|
}),
|
@@ -1422,11 +1461,15 @@ const SwitchToggle = compose(
|
|
1422
1461
|
wrappedEleName: 'vaadin-checkbox',
|
1423
1462
|
style: () => overrides,
|
1424
1463
|
excludeAttrsSync: ['tabindex'],
|
1425
|
-
componentName
|
1464
|
+
componentName: componentName$1
|
1426
1465
|
})
|
1427
1466
|
);
|
1428
1467
|
|
1429
1468
|
overrides = `
|
1469
|
+
:host {
|
1470
|
+
display: inline-block;
|
1471
|
+
}
|
1472
|
+
|
1430
1473
|
:host {
|
1431
1474
|
--margin: 7px;
|
1432
1475
|
--width: var(${SwitchToggle.cssVarList.width});
|
@@ -1472,16 +1515,16 @@ overrides = `
|
|
1472
1515
|
}
|
1473
1516
|
`;
|
1474
1517
|
|
1475
|
-
const vars$
|
1518
|
+
const vars$2 = SwitchToggle.cssVarList;
|
1476
1519
|
|
1477
1520
|
const swtichToggle = {
|
1478
|
-
[vars$
|
1479
|
-
[vars$
|
1521
|
+
[vars$2.width]: '70px',
|
1522
|
+
[vars$2.cursor]: [{}, { selector: '> label' }]
|
1480
1523
|
};
|
1481
1524
|
|
1482
1525
|
const globalRefs = getThemeRefs(globals);
|
1483
1526
|
|
1484
|
-
const vars = Container.cssVarList;
|
1527
|
+
const vars$1 = Container.cssVarList;
|
1485
1528
|
|
1486
1529
|
const verticalAlignment = {
|
1487
1530
|
start: { verticalAlignment: 'start' },
|
@@ -1504,31 +1547,31 @@ const [helperTheme, helperRefs, helperVars] =
|
|
1504
1547
|
|
1505
1548
|
const container = {
|
1506
1549
|
...helperTheme,
|
1507
|
-
[vars.display]: 'flex',
|
1550
|
+
[vars$1.display]: 'flex',
|
1508
1551
|
verticalPadding: {
|
1509
|
-
sm: { [vars.verticalPadding]: '5px' },
|
1510
|
-
md: { [vars.verticalPadding]: '10px' },
|
1511
|
-
lg: { [vars.verticalPadding]: '20px' },
|
1552
|
+
sm: { [vars$1.verticalPadding]: '5px' },
|
1553
|
+
md: { [vars$1.verticalPadding]: '10px' },
|
1554
|
+
lg: { [vars$1.verticalPadding]: '20px' },
|
1512
1555
|
},
|
1513
1556
|
horizontalPadding: {
|
1514
|
-
sm: { [vars.horizontalPadding]: '5px' },
|
1515
|
-
md: { [vars.horizontalPadding]: '10px' },
|
1516
|
-
lg: { [vars.horizontalPadding]: '20px' },
|
1557
|
+
sm: { [vars$1.horizontalPadding]: '5px' },
|
1558
|
+
md: { [vars$1.horizontalPadding]: '10px' },
|
1559
|
+
lg: { [vars$1.horizontalPadding]: '20px' },
|
1517
1560
|
},
|
1518
1561
|
direction: {
|
1519
1562
|
row: {
|
1520
|
-
[vars.flexDirection]: 'row',
|
1521
|
-
[vars.alignItems]: helperRefs.verticalAlignment,
|
1522
|
-
[vars.justifyContent]: helperRefs.horizontalAlignment,
|
1563
|
+
[vars$1.flexDirection]: 'row',
|
1564
|
+
[vars$1.alignItems]: helperRefs.verticalAlignment,
|
1565
|
+
[vars$1.justifyContent]: helperRefs.horizontalAlignment,
|
1523
1566
|
horizontalAlignment: {
|
1524
1567
|
spaceBetween: { [helperVars.horizontalAlignment]: 'space-between' },
|
1525
1568
|
}
|
1526
1569
|
},
|
1527
1570
|
|
1528
1571
|
column: {
|
1529
|
-
[vars.flexDirection]: 'column',
|
1530
|
-
[vars.alignItems]: helperRefs.horizontalAlignment,
|
1531
|
-
[vars.justifyContent]: helperRefs.verticalAlignment,
|
1572
|
+
[vars$1.flexDirection]: 'column',
|
1573
|
+
[vars$1.alignItems]: helperRefs.horizontalAlignment,
|
1574
|
+
[vars$1.justifyContent]: helperRefs.verticalAlignment,
|
1532
1575
|
verticalAlignment: {
|
1533
1576
|
spaceBetween: { [helperVars.verticalAlignment]: 'space-between' }
|
1534
1577
|
}
|
@@ -1537,48 +1580,102 @@ const container = {
|
|
1537
1580
|
|
1538
1581
|
spaceBetween: {
|
1539
1582
|
sm: {
|
1540
|
-
[vars.gap]: '10px'
|
1583
|
+
[vars$1.gap]: '10px'
|
1541
1584
|
},
|
1542
1585
|
md: {
|
1543
|
-
[vars.gap]: '20px'
|
1586
|
+
[vars$1.gap]: '20px'
|
1544
1587
|
},
|
1545
1588
|
lg: {
|
1546
|
-
[vars.gap]: '30px'
|
1589
|
+
[vars$1.gap]: '30px'
|
1547
1590
|
}
|
1548
1591
|
},
|
1549
1592
|
|
1550
1593
|
shadow: {
|
1551
1594
|
sm: {
|
1552
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
1595
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.sm} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.sm} ${helperRefs.shadowColor}`
|
1553
1596
|
},
|
1554
1597
|
md: {
|
1555
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
|
1598
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.md} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.md} ${helperRefs.shadowColor}`
|
1556
1599
|
},
|
1557
1600
|
lg: {
|
1558
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
1601
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.lg} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.lg} ${helperRefs.shadowColor}`
|
1559
1602
|
},
|
1560
1603
|
xl: {
|
1561
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
1604
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${helperRefs.shadowColor}, ${globalRefs.shadow.narrow.xl} ${helperRefs.shadowColor}`
|
1562
1605
|
},
|
1563
1606
|
'2xl': {
|
1564
1607
|
[helperVars.shadowColor]: '#00000050',
|
1565
|
-
[vars.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
1608
|
+
[vars$1.boxShadow]: `${globalRefs.shadow.wide['2xl']} ${helperRefs.shadowColor}`
|
1566
1609
|
},
|
1567
1610
|
},
|
1568
1611
|
|
1569
1612
|
borderRadius: {
|
1570
1613
|
sm: {
|
1571
|
-
[vars.borderRadius]: globalRefs.radius.sm
|
1614
|
+
[vars$1.borderRadius]: globalRefs.radius.sm
|
1572
1615
|
},
|
1573
1616
|
md: {
|
1574
|
-
[vars.borderRadius]: globalRefs.radius.md
|
1617
|
+
[vars$1.borderRadius]: globalRefs.radius.md
|
1575
1618
|
},
|
1576
1619
|
lg: {
|
1577
|
-
[vars.borderRadius]: globalRefs.radius.lg
|
1620
|
+
[vars$1.borderRadius]: globalRefs.radius.lg
|
1578
1621
|
},
|
1579
1622
|
}
|
1580
1623
|
};
|
1581
1624
|
|
1625
|
+
const componentName = getComponentName('logo');
|
1626
|
+
|
1627
|
+
let style;
|
1628
|
+
const getStyle = () => style;
|
1629
|
+
|
1630
|
+
class RawLogo extends HTMLElement {
|
1631
|
+
static get componentName() {
|
1632
|
+
return componentName;
|
1633
|
+
}
|
1634
|
+
constructor() {
|
1635
|
+
super();
|
1636
|
+
const template = document.createElement('template');
|
1637
|
+
template.innerHTML = `
|
1638
|
+
<style>
|
1639
|
+
${getStyle()}
|
1640
|
+
</style>
|
1641
|
+
<div></div>`;
|
1642
|
+
|
1643
|
+
this.attachShadow({ mode: 'open' });
|
1644
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1645
|
+
|
1646
|
+
this.baseSelector = ':host > div';
|
1647
|
+
}
|
1648
|
+
}
|
1649
|
+
|
1650
|
+
const Logo = compose(
|
1651
|
+
createStyleMixin({
|
1652
|
+
mappings: {
|
1653
|
+
height: {},
|
1654
|
+
width: {},
|
1655
|
+
url: {},
|
1656
|
+
fallbackUrl: {},
|
1657
|
+
}
|
1658
|
+
}),
|
1659
|
+
draggableMixin,
|
1660
|
+
componentNameValidationMixin
|
1661
|
+
)(RawLogo);
|
1662
|
+
|
1663
|
+
style = `
|
1664
|
+
:host {
|
1665
|
+
display: inline-block;
|
1666
|
+
}
|
1667
|
+
:host > div {
|
1668
|
+
display: inline-block;
|
1669
|
+
content: var(${Logo.cssVarList.url}, var(${Logo.cssVarList.fallbackUrl}));
|
1670
|
+
}
|
1671
|
+
`;
|
1672
|
+
|
1673
|
+
const vars = Logo.cssVarList;
|
1674
|
+
|
1675
|
+
const logo = {
|
1676
|
+
[vars.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
1677
|
+
};
|
1678
|
+
|
1582
1679
|
var components = {
|
1583
1680
|
button,
|
1584
1681
|
textField: textField$1,
|
@@ -1588,7 +1685,8 @@ var components = {
|
|
1588
1685
|
textArea,
|
1589
1686
|
checkbox,
|
1590
1687
|
switchToggle: swtichToggle,
|
1591
|
-
container
|
1688
|
+
container,
|
1689
|
+
logo
|
1592
1690
|
};
|
1593
1691
|
|
1594
1692
|
var index = { globals, components };
|