@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.
@@ -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 || this.#focused) {
17372
+ if (this.isReadOnly) {
17356
17373
  return;
17357
17374
  }
17358
17375
 
17359
- // We use this flag to support mobile logic, which calls `focus` on touch event, we want to make sure
17360
- // focus executes it logic only when needed.
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 part of the format placeholder
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
- e.target.selectionStart || this.inputElement.selectionStart
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
- const caretStart = this.sortedCounters
17454
- .slice(0, this.selectedCounterIdx)
17455
- .reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
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
- this.inputElement.setSelectionRange(
17458
- caretStart,
17459
- caretStart + this.sortedCounters[this.selectedCounterIdx].length
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
- setTimeout(() => {
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
- if (this.activeCounter.isEmpty) {
17520
- this.activeCounter.clear();
17535
+ const counter = this.activeCounter;
17536
+
17537
+ if (counter.isEmpty) {
17521
17538
  this.selectPrevCounter();
17522
17539
  this.setInputSelectionRange();
17523
17540
  } else {
17524
- this.activeCounter.del();
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
- // On keydown - in desktop mode - selection is sometimes not set, and instead there is a cursor.
17536
- // We need to wait until we can set selection range.
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, {