@descope/web-components-ui 1.0.98 → 1.0.99
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +89 -47
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/0.js +1 -0
- package/dist/umd/878.js +1 -1
- package/dist/umd/890.js +1 -0
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-image-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-phone-field-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/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/baseClasses/createBaseInputClass.js +1 -2
- package/src/components/descope-link/Link.js +1 -2
- package/src/components/descope-passcode/Passcode.js +6 -3
- package/src/components/descope-password-field/PasswordField.js +21 -5
- package/src/components/descope-password-field/passwordDraggableMixin.js +33 -0
- package/src/mixins/createStyleMixin/index.js +4 -7
- package/src/mixins/draggableMixin.js +6 -4
- package/src/mixins/index.js +0 -1
- package/src/mixins/inputValidationMixin.js +5 -1
- package/src/mixins/proxyInputMixin.js +1 -1
- package/src/theme/components/passcode.js +3 -3
- package/src/theme/components/passwordField.js +11 -1
- package/dist/umd/387.js +0 -1
- package/dist/umd/988.js +0 -1
- package/src/mixins/readOnlyMixin.js +0 -18
package/dist/index.esm.js
CHANGED
@@ -308,6 +308,10 @@ const createStyleMixin =
|
|
308
308
|
this.#styleAttributes = Object.keys(mappings).map((key) =>
|
309
309
|
kebabCaseJoin(STYLE_OVERRIDE_ATTR_PREFIX, componentNameSuffix, key)
|
310
310
|
);
|
311
|
+
|
312
|
+
this.#createMappingStyle();
|
313
|
+
this.#createComponentTheme();
|
314
|
+
this.#createOverridesStyle();
|
311
315
|
}
|
312
316
|
|
313
317
|
get componentTheme() {
|
@@ -378,15 +382,8 @@ const createStyleMixin =
|
|
378
382
|
init() {
|
379
383
|
super.init?.();
|
380
384
|
if (this.shadowRoot.isConnected) {
|
381
|
-
|
382
385
|
this.#addClassName(superclass.componentName);
|
383
386
|
|
384
|
-
// TODO: we should do everything we can on the constructor
|
385
|
-
// when dragging & dropping these styles are created over & over
|
386
|
-
this.#createMappingStyle();
|
387
|
-
this.#createComponentTheme();
|
388
|
-
this.#createOverridesStyle();
|
389
|
-
|
390
387
|
// this is instead attributeChangedCallback because we cannot use static methods in this case
|
391
388
|
observeAttributes(this, this.#updateOverridesStyle.bind(this), {});
|
392
389
|
}
|
@@ -423,22 +420,24 @@ const draggableMixin = (superclass) =>
|
|
423
420
|
}
|
424
421
|
}
|
425
422
|
|
426
|
-
get
|
423
|
+
get isDraggable() {
|
427
424
|
return this.hasAttribute('draggable') && this.getAttribute('draggable') !== 'false'
|
428
425
|
}
|
429
426
|
|
430
427
|
init() {
|
431
|
-
|
432
428
|
// because we are delegating the focus from the outer component,
|
433
429
|
// the D&D is not working well in the page editor
|
434
430
|
// in order to solve it we are making the inner component focusable on mouse down
|
435
431
|
// and removing it on complete
|
436
432
|
this.addEventListener('mousedown', (e) => {
|
437
|
-
if (this
|
433
|
+
if (this.isDraggable) {
|
434
|
+
const prevTabIndex = this.baseElement.getAttribute('tabindex');
|
438
435
|
this.baseElement.setAttribute('tabindex', '-1');
|
439
436
|
|
440
437
|
const onComplete = () => {
|
441
|
-
|
438
|
+
prevTabIndex ?
|
439
|
+
this.baseElement.setAttribute('tabindex', prevTabIndex) :
|
440
|
+
this.baseElement.removeAttribute('tabindex');
|
442
441
|
|
443
442
|
e.target.removeEventListener('mouseup', onComplete);
|
444
443
|
e.target.removeEventListener('dragend', onComplete);
|
@@ -701,7 +700,7 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
701
700
|
}
|
702
701
|
|
703
702
|
#setValidity() {
|
704
|
-
const validity = this.getValidity();
|
703
|
+
const validity = this.isReadOnly ? {} : this.getValidity();
|
705
704
|
this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
|
706
705
|
}
|
707
706
|
|
@@ -742,6 +741,10 @@ const inputValidationMixin = (superclass) => class InputValidationMixinClass ext
|
|
742
741
|
return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
|
743
742
|
}
|
744
743
|
|
744
|
+
get isReadOnly() {
|
745
|
+
return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
|
746
|
+
}
|
747
|
+
|
745
748
|
get pattern() {
|
746
749
|
return this.getAttribute('pattern')
|
747
750
|
}
|
@@ -879,7 +882,7 @@ const proxyInputMixin = (superclass) =>
|
|
879
882
|
this.#dispatchChange();
|
880
883
|
});
|
881
884
|
|
882
|
-
this.addEventListener('blur', () => {
|
885
|
+
this.#inputElement.addEventListener('blur', () => {
|
883
886
|
if (!this.checkValidity()) {
|
884
887
|
this.setAttribute('invalid', 'true');
|
885
888
|
this.#handleErrorMessage();
|
@@ -989,25 +992,6 @@ const changeMixin = (superclass) => class ChangeMixinClass extends superclass {
|
|
989
992
|
}
|
990
993
|
};
|
991
994
|
|
992
|
-
const readOnlyMixin = (superclass) => class ReadOnlyMixinClass extends superclass {
|
993
|
-
get isReadOnly() {
|
994
|
-
return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
|
995
|
-
}
|
996
|
-
|
997
|
-
init() {
|
998
|
-
['focus', 'blur'].forEach(event => {
|
999
|
-
this.addEventListener(event, (e) => {
|
1000
|
-
if (this.isReadOnly) {
|
1001
|
-
e.stopImmediatePropagation();
|
1002
|
-
e.preventDefault();
|
1003
|
-
}
|
1004
|
-
}, true);
|
1005
|
-
});
|
1006
|
-
|
1007
|
-
super.init?.();
|
1008
|
-
}
|
1009
|
-
};
|
1010
|
-
|
1011
995
|
const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatchingMixinClass extends superclass {
|
1012
996
|
init() {
|
1013
997
|
this.#blockNativeEvents();
|
@@ -1190,7 +1174,6 @@ customElements.define(componentName$o, Button);
|
|
1190
1174
|
const createBaseInputClass = (...args) => compose(
|
1191
1175
|
inputValidationMixin,
|
1192
1176
|
changeMixin,
|
1193
|
-
readOnlyMixin,
|
1194
1177
|
normalizeBooleanAttributesMixin,
|
1195
1178
|
inputEventsDispatchingMixin
|
1196
1179
|
)(createBaseClass(...args));
|
@@ -1999,7 +1982,6 @@ const componentName$d = getComponentName('link');
|
|
1999
1982
|
class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
|
2000
1983
|
constructor() {
|
2001
1984
|
super();
|
2002
|
-
document.createElement('template');
|
2003
1985
|
|
2004
1986
|
this.attachShadow({ mode: 'open' }).innerHTML = `
|
2005
1987
|
<style>
|
@@ -2033,7 +2015,7 @@ class RawLink extends createBaseClass({ componentName: componentName$d, baseSele
|
|
2033
2015
|
}
|
2034
2016
|
|
2035
2017
|
const selectors = {
|
2036
|
-
host: { selector: () => 'host' },
|
2018
|
+
host: { selector: () => ':host' },
|
2037
2019
|
anchor: {},
|
2038
2020
|
wrapper: {selector: () => ':host > div'},
|
2039
2021
|
text: { selector: () => Text.componentName }
|
@@ -2507,8 +2489,8 @@ const customMixin$2 = (superclass) =>
|
|
2507
2489
|
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
2508
2490
|
textFieldMappings;
|
2509
2491
|
|
2510
|
-
const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper,
|
2511
|
-
|
2492
|
+
const { digitField, label: label$4, requiredIndicator: requiredIndicator$3, internalWrapper, focusedDigitField } = {
|
2493
|
+
focusedDigitField: { selector: () => `${TextField.componentName}[focused="true"]` },
|
2512
2494
|
digitField: { selector: () => TextField.componentName },
|
2513
2495
|
label: { selector: '> label' },
|
2514
2496
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -2535,7 +2517,10 @@ const Passcode = compose(
|
|
2535
2517
|
textAlign: { ...digitField, property: textVars$1.textAlign },
|
2536
2518
|
caretColor: { ...digitField, property: textVars$1.caretColor },
|
2537
2519
|
digitsGap: { ...internalWrapper, property: 'gap' },
|
2538
|
-
|
2520
|
+
focusedDigitFieldBorderColor: [
|
2521
|
+
{ ...focusedDigitField, property: textVars$1.borderColor },
|
2522
|
+
{ ...focusedDigitField, property: textVars$1.outlineColor }
|
2523
|
+
]
|
2539
2524
|
},
|
2540
2525
|
}),
|
2541
2526
|
draggableMixin,
|
@@ -2620,6 +2605,38 @@ customElements.define(componentName$a, PasscodeInternal);
|
|
2620
2605
|
|
2621
2606
|
customElements.define(componentName$8, Passcode);
|
2622
2607
|
|
2608
|
+
const passwordDraggableMixin = (superclass) => class PasswordDraggableMixinClass extends superclass {
|
2609
|
+
get isReadOnly() {
|
2610
|
+
return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false'
|
2611
|
+
}
|
2612
|
+
|
2613
|
+
init() {
|
2614
|
+
// there is an issue in Chrome that input field with type password cannot be D&D
|
2615
|
+
// so in case the input is draggable & readonly, we are changing the input type to "text" before dragging
|
2616
|
+
// and return the original type when done
|
2617
|
+
this.addEventListener('mousedown', (e) => {
|
2618
|
+
if (this.isDraggable & this.isReadOnly) {
|
2619
|
+
const inputEle = this.baseElement.querySelector('input');
|
2620
|
+
|
2621
|
+
const prevType = inputEle.getAttribute('type');
|
2622
|
+
inputEle.setAttribute('type', 'text');
|
2623
|
+
|
2624
|
+
const onComplete = () => {
|
2625
|
+
inputEle.setAttribute('type', prevType);
|
2626
|
+
|
2627
|
+
e.target.removeEventListener('mouseup', onComplete);
|
2628
|
+
e.target.removeEventListener('dragend', onComplete);
|
2629
|
+
};
|
2630
|
+
|
2631
|
+
e.target.addEventListener('mouseup', onComplete, { once: true });
|
2632
|
+
e.target.addEventListener('dragend', onComplete, { once: true });
|
2633
|
+
}
|
2634
|
+
});
|
2635
|
+
|
2636
|
+
super.init?.();
|
2637
|
+
}
|
2638
|
+
};
|
2639
|
+
|
2623
2640
|
const componentName$7 = getComponentName('password-field');
|
2624
2641
|
|
2625
2642
|
const {
|
@@ -2645,6 +2662,7 @@ const {
|
|
2645
2662
|
const PasswordField = compose(
|
2646
2663
|
createStyleMixin({
|
2647
2664
|
mappings: {
|
2665
|
+
width: { selector: host$4 },
|
2648
2666
|
wrapperBorderStyle: { ...inputWrapper$1, property: 'border-style' },
|
2649
2667
|
wrapperBorderWidth: { ...inputWrapper$1, property: 'border-width' },
|
2650
2668
|
wrapperBorderColor: { ...inputWrapper$1, property: 'border-color' },
|
@@ -2666,35 +2684,49 @@ const PasswordField = compose(
|
|
2666
2684
|
{ ...label$3, property: 'cursor' },
|
2667
2685
|
{ ...requiredIndicator$2, property: 'cursor' }
|
2668
2686
|
],
|
2687
|
+
outlineColor: { ...inputWrapper$1 },
|
2688
|
+
outlineStyle: { ...inputWrapper$1 },
|
2689
|
+
outlineWidth: [
|
2690
|
+
{ ...inputWrapper$1 },
|
2691
|
+
// we need to make sure there is enough space for the outline
|
2692
|
+
{ property: 'padding' }
|
2693
|
+
],
|
2694
|
+
backgroundColor: inputWrapper$1
|
2669
2695
|
}
|
2670
2696
|
}),
|
2671
2697
|
draggableMixin,
|
2672
2698
|
proxyInputMixin,
|
2673
|
-
componentNameValidationMixin
|
2699
|
+
componentNameValidationMixin,
|
2700
|
+
passwordDraggableMixin
|
2674
2701
|
)(
|
2675
2702
|
createProxy({
|
2676
2703
|
slots: ['suffix'],
|
2677
2704
|
wrappedEleName: 'vaadin-password-field',
|
2678
2705
|
style: `
|
2679
2706
|
:host {
|
2680
|
-
display: inline-
|
2707
|
+
display: inline-flex;
|
2681
2708
|
}
|
2682
2709
|
vaadin-password-field {
|
2683
2710
|
width: 100%;
|
2684
|
-
padding: 0;
|
2685
2711
|
}
|
2686
2712
|
vaadin-password-field > input {
|
2687
2713
|
min-height: 0;
|
2688
2714
|
}
|
2689
|
-
|
2690
|
-
|
2715
|
+
|
2716
|
+
vaadin-password-field[readonly] > input:placeholder-shown {
|
2717
|
+
opacity: 1;
|
2691
2718
|
}
|
2719
|
+
|
2692
2720
|
vaadin-password-field::part(input-field)::after {
|
2693
2721
|
opacity: 0;
|
2694
2722
|
}
|
2695
2723
|
vaadin-password-field::before {
|
2696
2724
|
height: initial;
|
2697
2725
|
}
|
2726
|
+
|
2727
|
+
vaadin-password-field[required]::part(required-indicator)::after {
|
2728
|
+
content: "*";
|
2729
|
+
}
|
2698
2730
|
`,
|
2699
2731
|
excludeAttrsSync: ['tabindex'],
|
2700
2732
|
componentName: componentName$7
|
@@ -5383,6 +5415,11 @@ const passwordField = {
|
|
5383
5415
|
[vars$e.wrapperBorderWidth]: '1px',
|
5384
5416
|
[vars$e.wrapperBorderColor]: 'transparent',
|
5385
5417
|
[vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
|
5418
|
+
[vars$e.backgroundColor]: globalRefs$d.colors.surface.light,
|
5419
|
+
|
5420
|
+
[vars$e.outlineWidth]: '2px',
|
5421
|
+
[vars$e.outlineStyle]: 'solid',
|
5422
|
+
[vars$e.outlineColor]: 'transparent',
|
5386
5423
|
|
5387
5424
|
[vars$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
|
5388
5425
|
[vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
|
@@ -5424,11 +5461,16 @@ const passwordField = {
|
|
5424
5461
|
[vars$e.width]: '100%'
|
5425
5462
|
},
|
5426
5463
|
|
5464
|
+
_focused: {
|
5465
|
+
[vars$e.outlineColor]: globalRefs$d.colors.surface.main
|
5466
|
+
},
|
5467
|
+
|
5427
5468
|
_invalid: {
|
5428
5469
|
[vars$e.labelTextColor]: globalRefs$d.colors.error.main,
|
5429
5470
|
[vars$e.inputTextColor]: globalRefs$d.colors.error.main,
|
5430
5471
|
[vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
|
5431
|
-
[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main
|
5472
|
+
[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main,
|
5473
|
+
[vars$e.outlineColor]: globalRefs$d.colors.error.main,
|
5432
5474
|
},
|
5433
5475
|
};
|
5434
5476
|
|
@@ -5910,12 +5952,12 @@ const globalRefs$5 = getThemeRefs(globals);
|
|
5910
5952
|
const passcode = {
|
5911
5953
|
[vars$5.backgroundColor]: globalRefs$5.colors.surface.light,
|
5912
5954
|
[vars$5.outlineWidth]: '2px',
|
5913
|
-
[vars$5.outlineColor]:
|
5955
|
+
[vars$5.outlineColor]: 'transparent',
|
5914
5956
|
[vars$5.padding]: '0',
|
5915
5957
|
[vars$5.textAlign]: 'center',
|
5916
5958
|
[vars$5.borderColor]: 'transparent',
|
5917
5959
|
[vars$5.digitsGap]: '4px',
|
5918
|
-
[vars$5.
|
5960
|
+
[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.primary.main,
|
5919
5961
|
|
5920
5962
|
_hideCursor: {
|
5921
5963
|
[vars$5.caretColor]: 'transparent',
|
@@ -5936,7 +5978,7 @@ const passcode = {
|
|
5936
5978
|
_invalid: {
|
5937
5979
|
[vars$5.borderColor]: globalRefs$5.colors.error.main,
|
5938
5980
|
[vars$5.color]: globalRefs$5.colors.error.main,
|
5939
|
-
[vars$5.
|
5981
|
+
[vars$5.focusedDigitFieldBorderColor]: globalRefs$5.colors.error.light,
|
5940
5982
|
},
|
5941
5983
|
};
|
5942
5984
|
|