@descope/flow-components 3.4.0 → 3.5.0

package/dist/fm/mf-manifest.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.4.0",
+      "buildVersion": "3.5.0",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/fm/mf-stats.json

@@ -5,7 +5,7 @@
     "name": "flowComponents",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "3.4.0",
+      "buildVersion": "3.5.0",
       "buildName": "@descope/flow-components"
     },
     "remoteEntry": {

package/dist/index.cjs.js

@@ -86565,26 +86565,85 @@ function requireIndex_cjs () {
       .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;
 	  }
@@ -86632,8 +86691,26 @@ function requireIndex_cjs () {
 	  }
 	}
 
-	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({
@@ -86642,6 +86719,30 @@ function requireIndex_cjs () {
 	      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,
@@ -86657,11 +86758,35 @@ function requireIndex_cjs () {
 
 	  _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({
@@ -106121,7 +106246,7 @@ const AddressField = React__default.default.forwardRef(({ size = 'md', ...props
 
 const CountrySubdivisionCityField = React__default.default.forwardRef(({ size = 'md', ...props }, ref) => (React__default.default.createElement("descope-country-subdivision-city-field", { size: size, ...props, ref: ref })));
 
-const TimerButton = React__default.default.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, ...props }, ref) => (React__default.default.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, ref: ref }, children)));
+const TimerButton = React__default.default.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, 'timer-position': timerPosition = 'start', 'timer-inside': timerInside = false, ...props }, ref) => (React__default.default.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, "timer-position": timerPosition, "timer-inside": timerInside, ref: ref }, children)));
 
 const applyDefaults = ({ paddingX, paddingY, background, spaceBetween }) => ({
     'st-horizontal-padding': !paddingX || isNumeric(paddingX)

package/dist/index.d.ts

@@ -1116,6 +1116,8 @@ type Props$7 = React.JSX.IntrinsicElements['button'] & {
     'timer-seconds'?: number;
     'timer-hide-icon'?: boolean;
     'timer-paused'?: boolean;
+    'timer-position'?: 'start' | 'end';
+    'timer-inside'?: boolean;
 };
 declare global {
     namespace React.JSX {
@@ -1134,6 +1136,8 @@ declare const TimerButton: React.ForwardRefExoticComponent<Omit<React.ClassAttri
     'timer-seconds'?: number;
     'timer-hide-icon'?: boolean;
     'timer-paused'?: boolean;
+    'timer-position'?: "start" | "end";
+    'timer-inside'?: boolean;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 type Never<T extends Record<string, any>> = {

package/dist/index.esm.js

@@ -560,7 +560,7 @@ const AddressField = React.forwardRef(({ size = 'md', ...props }, ref) => (React
 
 const CountrySubdivisionCityField = React.forwardRef(({ size = 'md', ...props }, ref) => (React.createElement("descope-country-subdivision-city-field", { size: size, ...props, ref: ref })));
 
-const TimerButton = React.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, ...props }, ref) => (React.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, ref: ref }, children)));
+const TimerButton = React.forwardRef(({ children, color = 'primary', size = 'md', variant = 'contained', horizontal = false, 'text-align': textAlign = 'center', 'timer-seconds': timerSeconds = 0, 'timer-hide-icon': timerHideIcon = false, 'timer-paused': timerPause = false, 'timer-position': timerPosition = 'start', 'timer-inside': timerInside = false, ...props }, ref) => (React.createElement("descope-timer-button", { ...props, size: size, "text-align": textAlign, horizontal: horizontal, "button-variant": variant, "button-mode": color, "timer-hide-icon": timerHideIcon, "timer-seconds": timerSeconds, "timer-paused": timerPause, "timer-position": timerPosition, "timer-inside": timerInside, ref: ref }, children)));
 
 const applyDefaults = ({ paddingX, paddingY, background, spaceBetween }) => ({
     'st-horizontal-padding': !paddingX || isNumeric(paddingX)

package/dist/types/TimerButton/TimerButton.d.ts

@@ -10,6 +10,8 @@ type Props = React.JSX.IntrinsicElements['button'] & {
     'timer-seconds'?: number;
     'timer-hide-icon'?: boolean;
     'timer-paused'?: boolean;
+    'timer-position'?: 'start' | 'end';
+    'timer-inside'?: boolean;
 };
 declare global {
     namespace React.JSX {
@@ -28,5 +30,7 @@ declare const TimerButton: React.ForwardRefExoticComponent<Omit<React.ClassAttri
     'timer-seconds'?: number;
     'timer-hide-icon'?: boolean;
     'timer-paused'?: boolean;
+    'timer-position'?: "start" | "end";
+    'timer-inside'?: boolean;
 }, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default TimerButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -97,7 +97,7 @@
     "webpack-subresource-integrity": "5.2.0-rc.1"
   },
   "dependencies": {
-    "@descope/web-components-ui": "3.4.0"
+    "@descope/web-components-ui": "3.5.0"
   },
   "peerDependencies": {
     "react": ">= 18"