@descope/web-components-ui 1.0.45 → 1.0.47
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +235 -137
- 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-passcode-index-js.js +1 -0
- 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-container/Container.js +1 -1
- 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-passcode/Passcode.js +252 -0
- package/src/components/descope-passcode/index.js +79 -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/createStyleMixin/index.js +3 -3
- 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
|
];
|
@@ -141,14 +141,14 @@ const createStyleMixin =
|
|
141
141
|
}
|
142
142
|
|
143
143
|
#updateAttrOverrideStyle(attrName, value) {
|
144
|
-
const style = this.#styleEle.sheet
|
144
|
+
const style = this.#styleEle.sheet?.cssRules[0].style;
|
145
145
|
const varName = getCssVarName(
|
146
146
|
superclass.componentName,
|
147
147
|
attrName.replace(/^st-/, '')
|
148
148
|
);
|
149
149
|
|
150
|
-
if (value) style
|
151
|
-
else style
|
150
|
+
if (value) style?.setProperty(varName, value);
|
151
|
+
else style?.removeProperty(varName);
|
152
152
|
}
|
153
153
|
|
154
154
|
#createComponentStyle() {
|
@@ -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();
|
@@ -920,7 +955,7 @@ const Container = compose(
|
|
920
955
|
{ property: 'padding-right' }
|
921
956
|
],
|
922
957
|
|
923
|
-
display: {},
|
958
|
+
display: {}, // maybe this should be hardcoded to flex
|
924
959
|
flexDirection: {},
|
925
960
|
justifyContent: {},
|
926
961
|
alignItems: {},
|
@@ -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 };
|