@descope/web-components-ui 3.4.0 → 3.5.0

package/dist/cjs/index.cjs.js

@@ -6990,26 +6990,85 @@ class RawTimerButton extends BaseClass$6 {
       .wrapper {
         display: flex;
         flex-direction: column;
-        gap: 0.5em;
         align-items: center;
         width: 100%;
       }
-      .timer {
+      /* allow timer to grow along the main axis in the wrapper flex container */
+      :host(:not([timer-inside="true"])) .timer {
         flex: 1;
       }
+      :host([timer-inside="true"]) .timer {
+        flex: 0 0 auto;
+      }
     `,
       this,
     );
 
+    this.wrapper = this.shadowRoot.querySelector('.wrapper');
     this.timer = this.shadowRoot.querySelector('.timer');
     this.button = this.shadowRoot.querySelector('.button');
+    this.forwardingSlot = this.shadowRoot.querySelector('.button slot');
 
     this.timer.addEventListener('timer-started', () => this.onTimerStarted());
     this.timer.addEventListener('timer-ended', () => this.onTimerEnded());
 
+    this.syncTimerPlacement();
+
     this.button.addEventListener('click', this.onClick.bind(this));
   }
 
+  static get observedAttributes() {
+    return [
+      ...(super.observedAttributes || []),
+      'timer-inside',
+      'timer-position',
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback?.(name, oldValue, newValue);
+    if (name === 'timer-inside' || name === 'timer-position') {
+      this.syncTimerPlacement();
+    }
+  }
+
+  get #isTimerInside() {
+    return this.getAttribute('timer-inside') === 'true';
+  }
+
+  get #isReversed() {
+    return this.getAttribute('timer-position') === 'end';
+  }
+
+  syncTimerPlacement() {
+    if (this.#isTimerInside) {
+      this.#placeTimerInsideButton(this.#isReversed);
+    } else {
+      this.#placeTimerOutsideButton();
+    }
+  }
+
+  #placeTimerInsideButton(reversed) {
+    if (reversed) {
+      // timer after label text (right)
+      if (this.timer.previousSibling !== this.forwardingSlot) {
+        this.button.appendChild(this.timer);
+      }
+    } else {
+      // timer before label text (left) — matches default outside position (above/before button)
+      if (this.timer.nextSibling !== this.forwardingSlot) {
+        this.button.insertBefore(this.timer, this.forwardingSlot);
+      }
+    }
+  }
+
+  #placeTimerOutsideButton() {
+    // move timer back as a wrapper sibling, before the button so flex-column puts it above
+    if (this.timer.parentElement !== this.wrapper) {
+      this.wrapper.insertBefore(this.timer, this.button);
+    }
+  }
+
   set onclick(val) {
     this.button.onclick = val;
   }
@@ -7057,8 +7116,26 @@ class RawTimerButton extends BaseClass$6 {
   }
 }
 
-const { host: host$p } = {
-  host: { selector: () => ':host' }};
+const {
+  host: host$p,
+  nestedTimer,
+  nestedButton,
+  timerInsideNotReversed,
+  timerInsideReversed,
+} = {
+  host: { selector: () => ':host' },
+  nestedTimer: { selector: () => ':host([timer-inside="true"]) .timer' },
+  nestedButton: {
+    selector: () => ':host([timer-inside="true"]) .button',
+  },
+  timerInsideNotReversed: {
+    selector: () =>
+      ':host([timer-inside="true"]:not([timer-position="end"])) .timer',
+  },
+  timerInsideReversed: {
+    selector: () => ':host([timer-inside="true"][timer-position="end"]) .timer',
+  },
+};
 
 const TimerButtonClass = compose(
   createStyleMixin$1({
@@ -7067,6 +7144,30 @@ const TimerButtonClass = compose(
       flexDirection: {},
       hostWidth: { ...host$p, property: 'width' },
       hostDirection: { ...host$p, property: 'direction' },
+      timerTextColor: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.textColor,
+      },
+      timerIconColor: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.iconColor,
+      },
+      timerHostWidth: {
+        ...nestedTimer,
+        property: TimerClass.cssVarList.hostWidth,
+      },
+      buttonLabelSpacing: {
+        ...nestedButton,
+        property: ButtonClass.cssVarList.labelSpacing,
+      },
+      timerInsideGapEnd: {
+        ...timerInsideNotReversed,
+        property: 'margin-inline-end',
+      },
+      timerInsideGapStart: {
+        ...timerInsideReversed,
+        property: 'margin-inline-start',
+      },
     },
   }),
   draggableMixin$1,
@@ -7082,11 +7183,35 @@ const timerButton = {
 
   _horizontal: {
     [vars$S.flexDirection]: 'row',
+    timerPosition: {
+      end: {
+        [vars$S.flexDirection]: 'row-reverse',
+      },
+    },
+  },
+
+  timerPosition: {
+    end: {
+      [vars$S.flexDirection]: 'column-reverse',
+    },
   },
 
   _fullWidth: {
     [vars$S.hostWidth]: '100%',
   },
+
+  _timerInside: {
+    [vars$S.timerTextColor]: 'currentColor',
+    [vars$S.timerIconColor]: 'currentColor',
+    [vars$S.timerHostWidth]: 'auto',
+    [vars$S.buttonLabelSpacing]: '0',
+    [vars$S.timerInsideGapEnd]: `var(${vars$S.gap})`,
+    timerPosition: {
+      end: {
+        [vars$S.timerInsideGapStart]: `var(${vars$S.gap})`,
+      },
+    },
+  },
 };
 
 var timerButton$1 = /*#__PURE__*/Object.freeze({