@descope/flow-components 2.0.457 → 2.0.459

package/dist/index.cjs.js

@@ -93856,7 +93856,7 @@ descope-boolean-field-internal {
 	  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');
 
@@ -93877,7 +93877,7 @@ descope-boolean-field-internal {
 
 	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,
@@ -93935,57 +93935,63 @@ descope-boolean-field-internal {
 	    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();
 	  }
 
@@ -93997,6 +94003,19 @@ descope-boolean-field-internal {
 	    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);
 
@@ -94007,28 +94026,31 @@ descope-boolean-field-internal {
 	      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' },
@@ -94048,7 +94070,8 @@ descope-boolean-field-internal {
 	  [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,
@@ -94096,6 +94119,7 @@ descope-boolean-field-internal {
 	const timerAttrs = [
 	  'timer-seconds',
 	  'timer-hide-icon',
+	  'timer-paused',
 	  'size',
 	  'text-align',
 	  'full-width',
@@ -94104,6 +94128,7 @@ descope-boolean-field-internal {
 	const mapTimerAttrs = {
 	  'timer-seconds': 'seconds',
 	  'timer-hide-icon': 'hide-icon',
+	  'timer-paused': 'paused',
 	};
 
 	const BaseClass$1 = createBaseClass$1({
@@ -94118,7 +94143,7 @@ descope-boolean-field-internal {
 	    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>
@@ -94164,6 +94189,14 @@ descope-boolean-field-internal {
 	      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() {
@@ -94179,9 +94212,11 @@ descope-boolean-field-internal {
 	  }
 
 	  toggleButtonDisable(isDisabled) {
-	    isDisabled
-	      ? this.button.setAttribute('disabled', 'true')
-	      : this.button.removeAttribute('disabled');
+	    setTimeout(() => {
+	      isDisabled
+	        ? this.button.setAttribute('disabled', 'true')
+	        : this.button.removeAttribute('disabled');
+	    });
 	  }
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.457",
+	"version": "2.0.459",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -68,7 +68,7 @@
 		"eslint-config-airbnb-typescript": "18.0.0",
 		"eslint-config-prettier": "10.0.1",
 		"eslint-config-standard": "17.1.0",
-		"eslint-import-resolver-typescript": "3.8.2",
+		"eslint-import-resolver-typescript": "3.8.3",
 		"eslint-plugin-import": "2.31.0",
 		"eslint-plugin-jest": "28.11.0",
 		"eslint-plugin-jest-dom": "5.5.0",
@@ -104,7 +104,7 @@
 		"typescript": "^5.7.2"
 	},
 	"dependencies": {
-		"@descope/web-components-ui": "1.43.0"
+		"@descope/web-components-ui": "1.44.0"
 	},
 	"peerDependencies": {
 		"react": ">= 18"