@descope-ui/descope-timer 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-timer-0.0.1...@descope-ui/descope-timer-0.0.2) (2025-03-13)
+
 ## 0.0.1 (2025-03-11)
 
 ### Dependency Updates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-timer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "exports": {
     ".": {
       "import": "./src/component/index.js"

package/src/component/TimerClass.js

@@ -15,7 +15,7 @@ import { formatTime } from './helpers';
 
 export const componentName = getComponentName('timer');
 
-const observedAttributes = ['seconds', 'hide-icon'];
+const observedAttributes = ['seconds', 'hide-icon', 'paused'];
 
 const BaseClass = createBaseClass({
   componentName,
@@ -73,57 +73,63 @@ class RawTimer extends BaseClass {
     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();
   }
 
@@ -135,6 +141,19 @@ class RawTimer extends BaseClass {
     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);
 
@@ -145,28 +164,31 @@ class RawTimer extends BaseClass {
       if (attrName === 'hide-icon') {
         this.#toggleIcon(newValue);
       }
+      if (attrName === 'paused') {
+        this.#handlePause(newValue === 'true');
+      }
     }
   }
 }
 
 const { host, icon, timer } = {
   host: { selector: () => ':host' },
-  icon: { selector: '.icon' },
-  timer: { selector: '.timer' },
+  icon: { selector: () => '.icon' },
+  timer: { selector: () => '.timer' },
 };
 
 export const TimerClass = compose(
   createStyleMixin({
     mappings: {
-      backgroundColor: {},
-      fontSize: [{}, { ...icon }],
+      fontSize: {},
       iconSize: [
         { ...icon, property: 'width' },
         { ...icon, property: 'height' },
       ],
       fontFamily: {},
+      minHeight: {},
       fontWeight: { ...timer },
-      lineHeight: { property: 'min-height' },
+      lineHeight: { ...timer },
       textColor: { ...timer, property: 'color' },
       gap: {},
       textAlign: { property: 'justify-content' },

package/src/component/clock.svg

@@ -1,4 +1,4 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M6 0C2.7 0 0 2.7 0 6C0 9.3 2.7 12 6 12C9.3 12 12 9.3 12 6C12 2.7 9.3 0 6 0ZM6 10.5C3.525 10.5 1.5 8.475 1.5 6C1.5 3.525 3.525 1.5 6 1.5C8.475 1.5 10.5 3.525 10.5 6C10.5 8.475 8.475 10.5 6 10.5Z" fill="#181A1C"/>
-  <path d="M6 2.25H5.25V6.75H9V6H6V2.25Z" fill="#181A1C"/>
+<svg width="1em" height="1em" viewBox="0 0 101 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50.3334 0.333252C22.8334 0.333252 0.333374 22.8333 0.333374 50.3333C0.333374 77.8333 22.8334 100.333 50.3334 100.333C77.8334 100.333 100.333 77.8333 100.333 50.3333C100.333 22.8333 77.8334 0.333252 50.3334 0.333252ZM50.3334 87.8333C29.7084 87.8333 12.8334 70.9583 12.8334 50.3333C12.8334 29.7083 29.7084 12.8333 50.3334 12.8333C70.9584 12.8333 87.8334 29.7083 87.8334 50.3333C87.8334 70.9583 70.9584 87.8333 50.3334 87.8333Z" fill="#181A1C"/>
+<path d="M50.3328 19.0833H44.0828V56.5832H75.3328V50.3332H50.3328V19.0833Z" fill="#181A1C"/>
 </svg>

package/src/theme.js

@@ -9,7 +9,8 @@ const timer = {
   [vars.hostDirection]: globalRefs.direction,
   [vars.gap]: '0.25em',
   [vars.fontFamily]: globalRefs.fonts.font1.family,
-  [vars.lineHeight]: '2em',
+  [vars.minHeight]: '1.5em',
+  [vars.lineHeight]: '1em',
   [vars.fontWeight]: globalRefs.fonts.font1.fontWeight,
   [vars.textColor]: globalRefs.colors.surface.contrast,
   [vars.iconColor]: globalRefs.colors.surface.contrast,

package/stories/descope-timer.stories.js

@@ -13,6 +13,7 @@ const Template = ({
   'hide-icon': hideIcon,
   'full-width': fullWidth,
   'text-align': textAlign,
+  pause,
 }) => `
   <descope-timer
     seconds="${seconds}"
@@ -20,6 +21,7 @@ const Template = ({
     hide-icon="${hideIcon || false}"
     full-width="${fullWidth}"
     text-align="${textAlign}"
+    pause="${pause || false}"
     st-host-direction="${direction ?? ''}"
   ></descope-timer>
 `;
@@ -59,6 +61,12 @@ export default {
         type: 'boolean',
       },
     },
+    pause: {
+      name: 'Pause',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
 };