@descope/web-components-ui 1.0.46 → 1.0.49
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +60 -17
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/447.js +1 -0
- package/dist/umd/599.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-combo-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- 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/descope-text-field-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 +4 -1
- package/src/components/descope-number-field/NumberField.js +4 -1
- package/src/components/descope-password-field/PasswordField.js +4 -1
- 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 -36
- package/src/components/descope-text-field/textFieldMappings.js +36 -0
- package/src/componentsHelpers/createStyleMixin/helpers.js +1 -1
- package/src/componentsHelpers/inputMixin.js +19 -4
- package/dist/umd/63.js +0 -1
- 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;
|
@@ -421,6 +436,9 @@ 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
|
}),
|
@@ -503,8 +521,6 @@ const loadingIndicatorStyles = `
|
|
503
521
|
|
504
522
|
customElements.define(componentName$b, Button);
|
505
523
|
|
506
|
-
const componentName$a = getComponentName('text-field');
|
507
|
-
|
508
524
|
const selectors$1 = {
|
509
525
|
label: '::part(label)',
|
510
526
|
input: '::part(input-field)',
|
@@ -512,13 +528,11 @@ const selectors$1 = {
|
|
512
528
|
placeholder: '> input:placeholder-shown'
|
513
529
|
};
|
514
530
|
|
515
|
-
|
516
|
-
|
517
|
-
const textFieldMappings = {
|
531
|
+
var textFieldMappings = {
|
518
532
|
color: { selector: selectors$1.input },
|
519
533
|
backgroundColor: { selector: selectors$1.input },
|
520
|
-
width: [matchHostStyle()],
|
521
534
|
color: { selector: selectors$1.input },
|
535
|
+
width: matchHostStyle({}),
|
522
536
|
borderColor: [
|
523
537
|
{ selector: selectors$1.input },
|
524
538
|
{ selector: selectors$1.readOnlyInput }
|
@@ -542,6 +556,10 @@ const textFieldMappings = {
|
|
542
556
|
placeholderColor: { selector: selectors$1.placeholder, property: 'color' }
|
543
557
|
};
|
544
558
|
|
559
|
+
const componentName$a = getComponentName('text-field');
|
560
|
+
|
561
|
+
let overrides$5 = ``;
|
562
|
+
|
545
563
|
const TextField = compose(
|
546
564
|
createStyleMixin({
|
547
565
|
mappings: textFieldMappings
|
@@ -560,6 +578,10 @@ const TextField = compose(
|
|
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;
|
@@ -643,6 +665,9 @@ const NumberField = compose(
|
|
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;
|
@@ -705,6 +730,9 @@ const EmailField = compose(
|
|
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;
|
@@ -774,6 +802,9 @@ const PasswordField = compose(
|
|
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;
|
@@ -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 },
|
@@ -852,6 +883,10 @@ const TextArea = compose(
|
|
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
|
}
|
@@ -1379,7 +1414,7 @@ const componentName$2 = getComponentName('checkbox');
|
|
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,7 +1425,11 @@ 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
1434
|
componentName: componentName$2
|
1396
1435
|
})
|
@@ -1409,7 +1448,7 @@ let overrides = ``;
|
|
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
|
}),
|
@@ -1427,6 +1466,10 @@ const SwitchToggle = compose(
|
|
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});
|