@descope/web-components-ui 1.103.0 → 1.105.0
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/cjs/index.cjs.js +80 -52
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +80 -52
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/DescopeDev.js.map +1 -1
- package/dist/umd/descope-date-field-descope-calendar-index-js.js +1 -1
- package/dist/umd/descope-date-field-descope-calendar-index-js.js.map +1 -1
- package/dist/umd/descope-date-field-index-js.js +1 -1
- package/dist/umd/descope-date-field-index-js.js.map +1 -1
- package/package.json +14 -14
- package/src/components/descope-date-field/DateFieldClass.js +53 -53
- package/src/components/descope-date-field/consts.js +2 -0
- package/src/darkTheme.js +7 -0
- package/src/theme/globals.js +7 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -926,6 +926,13 @@ const colors$2 = genColors({
|
|
926
926
|
highlight: '#fef1f1',
|
927
927
|
contrast: '#ffffff',
|
928
928
|
},
|
929
|
+
warning: {
|
930
|
+
main: '#c45512',
|
931
|
+
dark: '#a24309',
|
932
|
+
light: '#ff985a',
|
933
|
+
highlight: '#fdf0e5',
|
934
|
+
contrast: '#ffffff',
|
935
|
+
},
|
929
936
|
});
|
930
937
|
|
931
938
|
const fonts$1 = {
|
@@ -1103,6 +1110,13 @@ const colors$1 = genColors$1({
|
|
1103
1110
|
highlight: '#fef1f1',
|
1104
1111
|
contrast: '#ffffff',
|
1105
1112
|
},
|
1113
|
+
warning: {
|
1114
|
+
main: '#c45512',
|
1115
|
+
dark: '#a24309',
|
1116
|
+
light: '#ff985a',
|
1117
|
+
highlight: '#fdf0e5',
|
1118
|
+
contrast: '#ffffff',
|
1119
|
+
},
|
1106
1120
|
});
|
1107
1121
|
|
1108
1122
|
const fonts = {
|
@@ -6741,9 +6755,21 @@ const text$3 = {
|
|
6741
6755
|
error: {
|
6742
6756
|
[vars$O.textColor]: globalRefs$A.colors.error.main,
|
6743
6757
|
},
|
6758
|
+
'error-dark': {
|
6759
|
+
[vars$O.textColor]: globalRefs$A.colors.error.dark,
|
6760
|
+
},
|
6744
6761
|
success: {
|
6745
6762
|
[vars$O.textColor]: globalRefs$A.colors.success.main,
|
6746
6763
|
},
|
6764
|
+
'success-dark': {
|
6765
|
+
[vars$O.textColor]: globalRefs$A.colors.success.dark,
|
6766
|
+
},
|
6767
|
+
warning: {
|
6768
|
+
[vars$O.textColor]: globalRefs$A.colors.warning.main,
|
6769
|
+
},
|
6770
|
+
'warning-dark': {
|
6771
|
+
[vars$O.textColor]: globalRefs$A.colors.warning.dark,
|
6772
|
+
},
|
6747
6773
|
},
|
6748
6774
|
|
6749
6775
|
textAlign: {
|
@@ -15843,6 +15869,8 @@ const BUTTON_LABEL_DONE = 'Done';
|
|
15843
15869
|
const BUTTON_LABEL_CANCEL = 'Cancel';
|
15844
15870
|
const CALENDAR_LABEL_TODAY = 'Today';
|
15845
15871
|
|
15872
|
+
const MOBILE_DEVICE_INTERACTION_TIMEOUT_MS = 150;
|
15873
|
+
|
15846
15874
|
const isValidAttrArr = (arr, count) =>
|
15847
15875
|
Array.isArray(arr) && arr.length === count && arr.filter(Boolean).length === count;
|
15848
15876
|
|
@@ -16927,8 +16955,6 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
16927
16955
|
|
16928
16956
|
selectedCounterIdx = 0;
|
16929
16957
|
|
16930
|
-
#focused = false;
|
16931
|
-
|
16932
16958
|
updateCountersDisplay() {
|
16933
16959
|
this.inputElement.value = this.countersValue;
|
16934
16960
|
}
|
@@ -17138,22 +17164,7 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
17138
17164
|
this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
|
17139
17165
|
this.inputElement.addEventListener('keydown', this.handleArrowKeys.bind(this));
|
17140
17166
|
this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));
|
17141
|
-
|
17142
|
-
// We want to handle touch events the same way we handle `click` events.
|
17143
|
-
// Since we can't seem to block touch events (`touch-action: none` or preventing default on `touchstart`
|
17144
|
-
// or `touchend`, we listen to `pointerdown` and in case it's of type `touch` we execute
|
17145
|
-
// the component's logic for range selection.
|
17146
|
-
this.inputElement.addEventListener('pointerdown', (e) => {
|
17147
|
-
if (e.pointerType === 'touch') {
|
17148
|
-
e.preventDefault();
|
17149
|
-
if (!this.#focused) {
|
17150
|
-
this.inputElement.focus();
|
17151
|
-
}
|
17152
|
-
setTimeout(() => {
|
17153
|
-
this.handleMouseCaretPositionChange(e);
|
17154
|
-
}, 250);
|
17155
|
-
}
|
17156
|
-
});
|
17167
|
+
this.inputElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
|
17157
17168
|
|
17158
17169
|
forwardAttrs$1(this, this.inputElement, {
|
17159
17170
|
includeAttrs: [
|
@@ -17351,16 +17362,19 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
17351
17362
|
});
|
17352
17363
|
}
|
17353
17364
|
|
17365
|
+
// In mobile devices, there are cases were `pointerdown` is triggered
|
17366
|
+
// instead of `click`.
|
17367
|
+
onPointerDown(e) {
|
17368
|
+
setTimeout(() => this.handleMouseCaretPositionChange(e), MOBILE_DEVICE_INTERACTION_TIMEOUT_MS);
|
17369
|
+
}
|
17370
|
+
|
17354
17371
|
onFocus() {
|
17355
|
-
if (this.isReadOnly
|
17372
|
+
if (this.isReadOnly) {
|
17356
17373
|
return;
|
17357
17374
|
}
|
17358
17375
|
|
17359
|
-
// We
|
17360
|
-
|
17361
|
-
this.#focused = true;
|
17362
|
-
|
17363
|
-
this.resetDisplay();
|
17376
|
+
// We need to wait for focus to end before we set selection
|
17377
|
+
setTimeout(() => this.resetDisplay());
|
17364
17378
|
}
|
17365
17379
|
|
17366
17380
|
resetDisplay() {
|
@@ -17368,18 +17382,12 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
17368
17382
|
this.inputElement.value = this.format;
|
17369
17383
|
}
|
17370
17384
|
|
17371
|
-
// On focus select the first
|
17385
|
+
// On focus select the first counter
|
17372
17386
|
this.selectedCounterIdx = 0;
|
17373
|
-
|
17374
|
-
setTimeout(() => {
|
17375
|
-
// set selection on first counter
|
17376
|
-
this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
|
17377
|
-
});
|
17387
|
+
this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
|
17378
17388
|
}
|
17379
17389
|
|
17380
17390
|
onBlur() {
|
17381
|
-
this.#focused = false;
|
17382
|
-
|
17383
17391
|
if (this.opened) {
|
17384
17392
|
return;
|
17385
17393
|
}
|
@@ -17409,6 +17417,8 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
17409
17417
|
this.selectNextCounter();
|
17410
17418
|
}
|
17411
17419
|
|
17420
|
+
// We wait for the digit to be parsed, and only then set the selection.
|
17421
|
+
// Failing to do so results in unexpected "jump" of the screen in mobile devices.
|
17412
17422
|
this.setInputSelectionRange();
|
17413
17423
|
}
|
17414
17424
|
|
@@ -17424,7 +17434,11 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
17424
17434
|
|
17425
17435
|
setSelectedCounterByCaretPosition(e) {
|
17426
17436
|
this.selectedCounterIdx = this.getCounterIdx(
|
17427
|
-
|
17437
|
+
// if triggered by touch event, target might not include `selectionStart`
|
17438
|
+
// in that case we fall back to the inputElement's `selectionStart` value.
|
17439
|
+
// Therefore, it is recommended to run this function with setTimeout,
|
17440
|
+
// at least for mobile events.
|
17441
|
+
e.target?.selectionStart || this.inputElement.selectionStart
|
17428
17442
|
);
|
17429
17443
|
}
|
17430
17444
|
|
@@ -17450,14 +17464,18 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
17450
17464
|
return;
|
17451
17465
|
}
|
17452
17466
|
|
17453
|
-
|
17454
|
-
|
17455
|
-
|
17467
|
+
// We wait for before setting the selection, otherwise there's an
|
17468
|
+
// unexpected "jump" of the screen in mobile devices.
|
17469
|
+
setTimeout(() => {
|
17470
|
+
const caretStart = this.sortedCounters
|
17471
|
+
.slice(0, this.selectedCounterIdx)
|
17472
|
+
.reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
|
17456
17473
|
|
17457
|
-
|
17458
|
-
|
17459
|
-
|
17460
|
-
|
17474
|
+
this.inputElement.setSelectionRange(
|
17475
|
+
caretStart,
|
17476
|
+
caretStart + this.sortedCounters[this.selectedCounterIdx].length
|
17477
|
+
);
|
17478
|
+
});
|
17461
17479
|
}
|
17462
17480
|
|
17463
17481
|
resetDateCounters() {
|
@@ -17492,9 +17510,7 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
17492
17510
|
this.selectPrevCounter();
|
17493
17511
|
}
|
17494
17512
|
|
17495
|
-
|
17496
|
-
this.setInputSelectionRange();
|
17497
|
-
});
|
17513
|
+
this.setInputSelectionRange();
|
17498
17514
|
}
|
17499
17515
|
|
17500
17516
|
handleNavKeys(e) {
|
@@ -17516,27 +17532,32 @@ class RawDateFieldClass extends BaseInputClass$1 {
|
|
17516
17532
|
}
|
17517
17533
|
|
17518
17534
|
handleBackspace() {
|
17519
|
-
|
17520
|
-
|
17535
|
+
const counter = this.activeCounter;
|
17536
|
+
|
17537
|
+
if (counter.isEmpty) {
|
17521
17538
|
this.selectPrevCounter();
|
17522
17539
|
this.setInputSelectionRange();
|
17523
17540
|
} else {
|
17524
|
-
|
17541
|
+
counter.set('');
|
17525
17542
|
}
|
17543
|
+
|
17544
|
+
// To support keyboards like SwiftKey, we need to re-render the counters display and selection,
|
17545
|
+
// otherwise we get an unexpected behavior, where the format is deleted.
|
17546
|
+
setTimeout(() => {
|
17547
|
+
this.updateCountersDisplay();
|
17548
|
+
this.setInputSelectionRange();
|
17549
|
+
});
|
17526
17550
|
}
|
17527
17551
|
|
17528
17552
|
handleMouseCaretPositionChange(e) {
|
17529
17553
|
if (this.opened) {
|
17530
17554
|
return;
|
17531
17555
|
}
|
17556
|
+
|
17532
17557
|
e.preventDefault();
|
17533
|
-
this.setSelectedCounterByCaretPosition(e);
|
17534
17558
|
|
17535
|
-
|
17536
|
-
|
17537
|
-
setTimeout(() => {
|
17538
|
-
this.setInputSelectionRange();
|
17539
|
-
});
|
17559
|
+
this.setSelectedCounterByCaretPosition(e);
|
17560
|
+
this.setInputSelectionRange();
|
17540
17561
|
}
|
17541
17562
|
|
17542
17563
|
onInitialValueChange(val) {
|
@@ -21617,6 +21638,13 @@ const colors = {
|
|
21617
21638
|
highlight: '#4a0603',
|
21618
21639
|
contrast: '#000000',
|
21619
21640
|
},
|
21641
|
+
warning: {
|
21642
|
+
main: '#EF7A33',
|
21643
|
+
dark: '#FF985A',
|
21644
|
+
light: '#FF6304',
|
21645
|
+
highlight: '#C45512',
|
21646
|
+
contrast: '#000000',
|
21647
|
+
},
|
21620
21648
|
};
|
21621
21649
|
|
21622
21650
|
const darkTheme = merge({}, defaultTheme, {
|