@descope/web-components-ui 1.43.0 → 1.45.0

package/dist/cjs/index.cjs.js

@@ -4372,6 +4372,19 @@ const externalInputMixin =
       }
     };
 
+const inputOverrideValidConstraintsMixin = (superclass) =>
+  class InputOverrideValidConstraintsMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      // vaadin uses `validConstraints` (required, pattern, minlength, maxlength) to determine if it should validate
+      // the input or not. We want to override this behavior, so we can enforce validation even if these attributes are not present.
+      if (this.baseElement._hasValidConstraints) {
+        this.baseElement._hasValidConstraints = () => true;
+      }
+    }
+  };
+
 const {
   host: host$r,
   label: label$9,
@@ -7356,6 +7369,7 @@ const PasscodeClass = compose$1(
     },
   }),
   draggableMixin,
+  inputOverrideValidConstraintsMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   componentNameValidationMixin,
   customMixin$b
@@ -9849,7 +9863,6 @@ const customMixin$a = (superclass) =>
         includeAttrs: [
           'size',
           'bordered',
-          'invalid',
           'minlength',
           'maxlength',
           'default-code',
@@ -9862,6 +9875,8 @@ const customMixin$a = (superclass) =>
           'label',
           'label-type',
           'allow-alphanumeric-input',
+          'format-value',
+          'strict-validation',
         ],
       });
     }
@@ -10010,6 +10025,7 @@ const PhoneFieldClass = compose$1(
     },
   }),
   draggableMixin,
+  inputOverrideValidConstraintsMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$a
 )(
@@ -10170,7 +10186,7 @@ const textVars$1 = TextFieldClass.cssVarList;
 const componentName$H = getComponentName$1('phone-input-box-field');
 
 const customMixin$9 = (superclass) =>
-  class PhoneInputBoxFieldMixinClass extends superclass {
+  class PhoneFieldInputBoxMixinClass extends superclass {
     static get CountryCodes() {
       return CountryCodes;
     }
@@ -10194,8 +10210,6 @@ const customMixin$9 = (superclass) =>
       forwardAttrs$1(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
           'size',
-          'bordered',
-          'invalid',
           'minlength',
           'maxlength',
           'default-code',
@@ -10204,6 +10218,10 @@ const customMixin$9 = (superclass) =>
           'label',
           'label-type',
           'allow-alphanumeric-input',
+          'restrict-countries',
+          'format-value',
+          'strict-validation',
+          'data-errormessage-type-mismatch',
         ],
       });
     }
@@ -10219,7 +10237,8 @@ const {
   inputElement: inputElement$1,
   requiredIndicator: requiredIndicator$3,
   inputField: inputField$1,
-  inputFieldInternal,
+  internalComponent,
+  internalComponentAfter,
   phoneInput,
   errorMessage: errorMessage$5,
   helperText: helperText$3,
@@ -10230,8 +10249,11 @@ const {
   inputElement: { selector: 'input' },
   requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
   inputField: { selector: () => 'vaadin-text-field::part(input-field)' },
-  inputFieldInternal: {
-    selector: () => 'descope-phone-field-internal-input-box vaadin-text-field::part(input-field)',
+  internalComponent: {
+    selector: 'descope-phone-field-internal-input-box',
+  },
+  internalComponentAfter: {
+    selector: 'descope-phone-field-internal-input-box::after',
   },
   phoneInput: { selector: () => 'descope-text-field' },
   helperText: { selector: '::part(helper-text)' },
@@ -10254,14 +10276,6 @@ const PhoneFieldInputBoxClass = compose$1(
       hostMinWidth: { ...host$g, property: 'min-width' },
       hostDirection: { ...host$g, property: 'direction' },
 
-      inputBorderStyle: { ...inputFieldInternal, property: 'border-style' },
-      inputBorderWidth: { ...inputFieldInternal, property: 'border-width' },
-      inputBorderColor: { ...inputFieldInternal, property: 'border-color' },
-      inputBorderRadius: [
-        { ...inputField$1, property: 'border-radius' },
-        { ...inputFieldInternal, property: 'border-radius' },
-      ],
-
       inputHorizontalPadding: [
         { ...phoneInput, property: 'padding-left' },
         { ...phoneInput, property: 'padding-right' },
@@ -10286,10 +10300,18 @@ const PhoneFieldInputBoxClass = compose$1(
 
       inputPlaceholderTextColor: { ...phoneInput, property: textVars$1.inputPlaceholderColor },
 
-      inputOutlineStyle: { ...inputField$1, property: 'outline-style' },
-      inputOutlineColor: { ...inputField$1, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField$1, property: 'outline-width' },
-      inputOutlineOffset: { ...inputField$1, property: 'outline-offset' },
+      inputBorderStyle: { ...internalComponentAfter, property: 'border-style' },
+      inputBorderWidth: { ...internalComponentAfter, property: 'border-width' },
+      inputBorderColor: { ...internalComponentAfter, property: 'border-color' },
+      inputBorderRadius: [
+        { ...internalComponent, property: 'border-radius' },
+        { ...internalComponentAfter, property: 'border-radius' },
+      ],
+
+      inputOutlineStyle: { ...internalComponent, property: 'outline-style' },
+      inputOutlineColor: { ...internalComponent, property: 'outline-color' },
+      inputOutlineWidth: { ...internalComponent, property: 'outline-width' },
+      inputOutlineOffset: { ...internalComponent, property: 'outline-offset' },
 
       labelPosition: { ...label$3, property: 'position' },
       labelTopPosition: { ...label$3, property: 'top' },
@@ -10308,6 +10330,7 @@ const PhoneFieldInputBoxClass = compose$1(
     },
   }),
   draggableMixin,
+  inputOverrideValidConstraintsMixin,
   composedProxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
   customMixin$9
 )(
@@ -10339,7 +10362,6 @@ const PhoneFieldInputBoxClass = compose$1(
     vaadin-text-field::part(input-field) {
       padding: 0;
       background: transparent;
-      overflow: hidden;
       -webkit-mask-image: none;
     }
     descope-phone-field-internal-input-box {
@@ -10350,14 +10372,20 @@ const PhoneFieldInputBoxClass = compose$1(
     descope-phone-field-internal-input-box > div {
       width: 100%;
     }
-    descope-phone-field-internal-input-box .separator {
-      flex: 0;
-      border: none;
-    }
     descope-phone-field-internal-input-box descope-text-field {
       ${textVars$1.inputOutlineWidth}: 0;
       ${textVars$1.inputOutlineOffset}: 0;
     }
+    descope-phone-field-internal-input-box::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      pointer-events: none;
+    }
     descope-text-field {
       flex-grow: 1;
       width: 100%;
@@ -18606,6 +18634,8 @@ const attrs = {
       'restrict-countries',
       'default-code',
       'phone-minlength',
+      'phone-format-value',
+      'phone-strict-validation',
       'data-errormessage-value-missing-phone',
     ],
     inputBox: [
@@ -18613,6 +18643,8 @@ const attrs = {
       'restrict-countries',
       'default-code',
       'phone-minlength',
+      'phone-format-value',
+      'phone-strict-validation',
       'data-errormessage-value-missing-phone',
     ],
   },
@@ -18626,6 +18658,8 @@ const attrMap = {
   phone: {
     'phone-input-label': 'label',
     'phone-minlength': 'minlength',
+    'phone-format-value': 'format-value',
+    'phone-strict-validation': 'strict-validation',
     'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',
   },
 };
@@ -19838,7 +19872,7 @@ var addressField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$3
 });
 
-var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNiAwQzIuNyAwIDAgMi43IDAgNkMwIDkuMyAyLjcgMTIgNiAxMkM5LjMgMTIgMTIgOS4zIDEyIDZDMTIgMi43IDkuMyAwIDYgMFpNNiAxMC41QzMuNTI1IDEwLjUgMS41IDguNDc1IDEuNSA2QzEuNSAzLjUyNSAzLjUyNSAxLjUgNiAxLjVDOC40NzUgMS41IDEwLjUgMy41MjUgMTAuNSA2QzEwLjUgOC40NzUgOC40NzUgMTAuNSA2IDEwLjVaIiBmaWxsPSIjMTgxQTFDIi8+CiAgPHBhdGggZD0iTTYgMi4yNUg1LjI1VjYuNzVIOVY2SDZWMi4yNVoiIGZpbGw9IiMxODFBMUMiLz4KPC9zdmc+Cg==";
+var clockIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWVtIiBoZWlnaHQ9IjFlbSIgdmlld0JveD0iMCAwIDEwMSAxMDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01MC4zMzM0IDAuMzMzMjUyQzIyLjgzMzQgMC4zMzMyNTIgMC4zMzMzNzQgMjIuODMzMyAwLjMzMzM3NCA1MC4zMzMzQzAuMzMzMzc0IDc3LjgzMzMgMjIuODMzNCAxMDAuMzMzIDUwLjMzMzQgMTAwLjMzM0M3Ny44MzM0IDEwMC4zMzMgMTAwLjMzMyA3Ny44MzMzIDEwMC4zMzMgNTAuMzMzM0MxMDAuMzMzIDIyLjgzMzMgNzcuODMzNCAwLjMzMzI1MiA1MC4zMzM0IDAuMzMzMjUyWk01MC4zMzM0IDg3LjgzMzNDMjkuNzA4NCA4Ny44MzMzIDEyLjgzMzQgNzAuOTU4MyAxMi44MzM0IDUwLjMzMzNDMTIuODMzNCAyOS43MDgzIDI5LjcwODQgMTIuODMzMyA1MC4zMzM0IDEyLjgzMzNDNzAuOTU4NCAxMi44MzMzIDg3LjgzMzQgMjkuNzA4MyA4Ny44MzM0IDUwLjMzMzNDODcuODMzNCA3MC45NTgzIDcwLjk1ODQgODcuODMzMyA1MC4zMzM0IDg3LjgzMzNaIiBmaWxsPSIjMTgxQTFDIi8+CjxwYXRoIGQ9Ik01MC4zMzI4IDE5LjA4MzNINDQuMDgyOFY1Ni41ODMySDc1LjMzMjhWNTAuMzMzMkg1MC4zMzI4VjE5LjA4MzNaIiBmaWxsPSIjMTgxQTFDIi8+Cjwvc3ZnPgo=";
 
 const fmt = (val, pad = 2) => String(val).padStart(pad, '0');
 
@@ -19859,7 +19893,7 @@ const formatTime = (ms = 0) => {
 
 const componentName$3 = getComponentName('timer');
 
-const observedAttributes$1 = ['seconds', 'hide-icon'];
+const observedAttributes$1 = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass$2 = createBaseClass$1({
   componentName: componentName$3,
@@ -19917,57 +19951,63 @@ class RawTimer extends BaseClass$2 {
     return Math.max(0, secs);
   }
 
+  // we use `pause` attribute for allowing preview mode by executing `pause`
+  get isPaused() {
+    return this.getAttribute('paused') === 'true';
+  }
+
   init() {
     super.init?.();
 
     this.#timeRemains = this.seconds;
   }
 
-  start() {
-    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));
-
-    this.startInterval();
-  }
-
-  startInterval() {    
+  startInterval() {
     const intervalCycle = () => {
+      this.#decreaseInterval();
+      if (!this.#timeRemains) this.stop();
       this.#updateDisplay(this.#timeRemains);
-
-      if (!this.#timeRemains) {
-        this.stop();
-      } else {
-        this.#decreaseInterval();
-      }
     };
 
-    intervalCycle();
-
     if (this.#timeRemains) {
       this.#intervalId = setInterval(intervalCycle, DEFAULT_INTERVAL);
+    } else {
+      this.stop();
     }
   }
 
+  stopInterval() {
+    clearInterval(this.#intervalId);
+  }
+
   #decreaseInterval() {
-    this.#timeRemains = Math.max(this.#timeRemains - DEFAULT_INTERVAL, 0);
+    this.#timeRemains = this.#timeRemains - DEFAULT_INTERVAL;
   }
 
   reset() {
     this.#timeRemains = this.seconds;
-    this.start();
+    this.#updateDisplay(this.#timeRemains);
+
+    if (this.isPaused) return;
+
+    this.dispatchEvent(new CustomEvent('timer-started', { bubbles: true }));
+    this.startInterval();
   }
 
   stop() {
-    this.pause();
+    this.stopInterval();
     this.#timeRemains = 0;
     this.#updateDisplay(this.#timeRemains);
     this.dispatchEvent(new CustomEvent('timer-ended', { bubbles: true }));
   }
 
   pause() {
-    clearInterval(this.#intervalId);
+    this.setAttribute('paused', 'true');
+    this.stopInterval();
   }
 
   resume() {
+    this.removeAttribute('paused');
     this.startInterval();
   }
 
@@ -19979,6 +20019,19 @@ class RawTimer extends BaseClass$2 {
     this.icon.classList.toggle('hidden', val === 'true');
   }
 
+  #handlePause(paused) {
+    setTimeout(() => {
+      if (paused) {
+        this.pause();
+      } else {
+        // we want to prevent a another interval from starting in case previous interval was not yet cleared
+        if (!this.#intervalId) {
+          this.resume();
+        }
+      }
+    });
+  }
+
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -19989,28 +20042,31 @@ class RawTimer extends BaseClass$2 {
       if (attrName === 'hide-icon') {
         this.#toggleIcon(newValue);
       }
+      if (attrName === 'paused') {
+        this.#handlePause(newValue === 'true');
+      }
     }
   }
 }
 
 const { host: host$1, icon, timer: timer$2 } = {
   host: { selector: () => ':host' },
-  icon: { selector: '.icon' },
-  timer: { selector: '.timer' },
+  icon: { selector: () => '.icon' },
+  timer: { selector: () => '.timer' },
 };
 
 const TimerClass = compose(
   createStyleMixin$1({
     mappings: {
-      backgroundColor: {},
-      fontSize: [{}, { ...icon }],
+      fontSize: {},
       iconSize: [
         { ...icon, property: 'width' },
         { ...icon, property: 'height' },
       ],
       fontFamily: {},
+      minHeight: {},
       fontWeight: { ...timer$2 },
-      lineHeight: { property: 'min-height' },
+      lineHeight: { ...timer$2 },
       textColor: { ...timer$2, property: 'color' },
       gap: {},
       textAlign: { property: 'justify-content' },
@@ -20030,7 +20086,8 @@ const timer = {
   [vars$2.hostDirection]: globalRefs$1.direction,
   [vars$2.gap]: '0.25em',
   [vars$2.fontFamily]: globalRefs$1.fonts.font1.family,
-  [vars$2.lineHeight]: '2em',
+  [vars$2.minHeight]: '1.5em',
+  [vars$2.lineHeight]: '1em',
   [vars$2.fontWeight]: globalRefs$1.fonts.font1.fontWeight,
   [vars$2.textColor]: globalRefs$1.colors.surface.contrast,
   [vars$2.iconColor]: globalRefs$1.colors.surface.contrast,
@@ -20078,6 +20135,7 @@ const mapButtonAttrs = {
 const timerAttrs = [
   'timer-seconds',
   'timer-hide-icon',
+  'timer-paused',
   'size',
   'text-align',
   'full-width',
@@ -20086,6 +20144,7 @@ const timerAttrs = [
 const mapTimerAttrs = {
   'timer-seconds': 'seconds',
   'timer-hide-icon': 'hide-icon',
+  'timer-paused': 'paused',
 };
 
 const BaseClass$1 = createBaseClass$1({
@@ -20100,7 +20159,7 @@ class RawTimerButton extends BaseClass$1 {
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="wrapper">
         <descope-timer class="timer"></descope-timer>
-        <descope-button class="button">
+        <descope-button class="button" disabled="true">
           <slot></slot>
         </descope-button>
       </div>
@@ -20146,6 +20205,14 @@ class RawTimerButton extends BaseClass$1 {
       includeAttrs: timerAttrs,
       mapAttrs: mapTimerAttrs,
     });
+
+    // When we sync attributes, the `disabled` attribute is being compared to the attribute
+    // on Vaadin component; since the Vaadin component has no `disabled` attribute, we sync
+    // that back to our component.
+    // This is pending a more generic fix in the way we sync attibutes.
+    this.button.shadowRoot
+      .querySelector('vaadin-button')
+      .setAttribute('disabled', 'true');
   }
 
   onTimerStarted() {
@@ -20161,9 +20228,11 @@ class RawTimerButton extends BaseClass$1 {
   }
 
   toggleButtonDisable(isDisabled) {
-    isDisabled
-      ? this.button.setAttribute('disabled', 'true')
-      : this.button.removeAttribute('disabled');
+    setTimeout(() => {
+      isDisabled
+        ? this.button.setAttribute('disabled', 'true')
+        : this.button.removeAttribute('disabled');
+    });
   }
 }