xmlui 0.10.13 → 0.10.15

package/dist/scripts/src/components/TimeInput/TimeInputNative.js

@@ -23,7 +23,6 @@ const PartialInput_1 = require("../Input/PartialInput");
 const InputDivider_1 = require("../Input/InputDivider");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
-const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 // Import utilities and types from merged utils file
 const utils_1 = require("./utils");
@@ -41,14 +40,12 @@ exports.defaultProps = {
     clearable: false,
     clearToInitialValue: true,
     required: false,
-    labelPosition: "top",
     readOnly: false,
     autoFocus: false,
-    labelBreak: false,
     emptyCharacter: "-",
 };
 exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, ref) {
-    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, hour24 = exports.defaultProps.hour24, seconds = exports.defaultProps.seconds, minTime, maxTime, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, label, labelPosition = exports.defaultProps.labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "validationStatus", "registerComponentApi", "hour24", "seconds", "minTime", "maxTime", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "label", "labelPosition", "labelWidth", "labelBreak", "readOnly", "autoFocus", "emptyCharacter"]);
+    var { id, initialValue, value: controlledValue, enabled = exports.defaultProps.enabled, updateState, style, className, onDidChange, onFocus, onBlur, onInvalidChange, validationStatus = exports.defaultProps.validationStatus, registerComponentApi, hour24 = exports.defaultProps.hour24, seconds = exports.defaultProps.seconds, minTime, maxTime, clearable = exports.defaultProps.clearable, clearIcon, clearToInitialValue = exports.defaultProps.clearToInitialValue, required = exports.defaultProps.required, startText, startIcon, endText, endIcon, gap, readOnly = exports.defaultProps.readOnly, autoFocus = exports.defaultProps.autoFocus, emptyCharacter = exports.defaultProps.emptyCharacter } = _a, rest = __rest(_a, ["id", "initialValue", "value", "enabled", "updateState", "style", "className", "onDidChange", "onFocus", "onBlur", "onInvalidChange", "validationStatus", "registerComponentApi", "hour24", "seconds", "minTime", "maxTime", "clearable", "clearIcon", "clearToInitialValue", "required", "startText", "startIcon", "endText", "endIcon", "gap", "readOnly", "autoFocus", "emptyCharacter"]);
     const timeInputRef = (0, react_1.useRef)(null);
     // Refs for auto-tabbing between inputs
     const hourInputRef = (0, react_1.useRef)(null);
@@ -412,11 +409,7 @@ exports.TimeInputNative = (0, react_1.forwardRef)(function TimeInputNative(_a, r
             [TimeInput_module_scss_1.default.valid]: validationStatus === "valid",
             [TimeInput_module_scss_1.default.disabled]: !enabled,
             [TimeInput_module_scss_1.default.readOnly]: readOnly,
-        }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.inputGroup, children: [(0, jsx_runtime_1.jsx)(HourInput, { amPm: amPm, autoFocus: autoFocus, disabled: !enabled, inputRef: hourInputRef, nextInputRef: minuteInputRef, maxTime: maxTime, minTime: minTime, onChange: handleHourChange, onBlur: handleHourBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: hour, isInvalid: isHourCurrentlyInvalid, is24Hour: !is12HourFormat, emptyCharacter: processedEmptyCharacter }), (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":" }), (0, jsx_runtime_1.jsx)(MinuteInput, { disabled: !enabled, hour: hour, inputRef: minuteInputRef, nextInputRef: showSeconds ? secondInputRef : undefined, nextButtonRef: showSeconds ? undefined : is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, onChange: handleMinuteChange, onBlur: handleMinuteBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: minute, isInvalid: isMinuteCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), showSeconds && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":", className: TimeInput_module_scss_1.default.divider }), (0, jsx_runtime_1.jsx)(SecondInput, { disabled: !enabled, hour: hour, inputRef: secondInputRef, nextButtonRef: is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, minute: minute, onChange: handleSecondChange, onBlur: handleSecondBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: second, isInvalid: isSecondCurrentlyInvalid, emptyCharacter: processedEmptyCharacter })] })), is12HourFormat && ((0, jsx_runtime_1.jsx)(AmPmButton, { className: "timeinput", disabled: !enabled, buttonRef: amPmButtonRef, maxTime: maxTime, minTime: minTime, onClick: handleAmPmToggle, onAmPmSet: handleAmPmSet, onKeyDown: handleArrowKeys, value: amPm }))] }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.clearButton, TimeInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
-    // Wrap with label if needed
-    if (label) {
-        return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { label: label, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startAdornment, timeInputComponent, endAdornment] }) }));
-    }
+        }, className), style: Object.assign(Object.assign({}, style), { gap }), onFocusCapture: handleComponentFocus, onBlur: handleComponentBlur, "data-validation-status": validationStatus }, rest, { children: [startAdornment, (0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.wrapper, children: [(0, jsx_runtime_1.jsxs)("div", { className: TimeInput_module_scss_1.default.inputGroup, children: [(0, jsx_runtime_1.jsx)(HourInput, { id: id, amPm: amPm, autoFocus: autoFocus, disabled: !enabled, inputRef: hourInputRef, nextInputRef: minuteInputRef, maxTime: maxTime, minTime: minTime, onChange: handleHourChange, onBlur: handleHourBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, value: hour, isInvalid: isHourCurrentlyInvalid, is24Hour: !is12HourFormat, emptyCharacter: processedEmptyCharacter }), (0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":" }), (0, jsx_runtime_1.jsx)(MinuteInput, { disabled: !enabled, hour: hour, inputRef: minuteInputRef, nextInputRef: showSeconds ? secondInputRef : undefined, nextButtonRef: showSeconds ? undefined : is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, onChange: handleMinuteChange, onBlur: handleMinuteBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: minute, isInvalid: isMinuteCurrentlyInvalid, emptyCharacter: processedEmptyCharacter }), showSeconds && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputDivider_1.InputDivider, { separator: ":", className: TimeInput_module_scss_1.default.divider }), (0, jsx_runtime_1.jsx)(SecondInput, { disabled: !enabled, hour: hour, inputRef: secondInputRef, nextButtonRef: is12HourFormat ? amPmButtonRef : undefined, maxTime: maxTime, minTime: minTime, minute: minute, onChange: handleSecondChange, onBlur: handleSecondBlur, onKeyDown: handleArrowKeys, readOnly: readOnly, required: required, showLeadingZeros: showLeadingZeros, value: second, isInvalid: isSecondCurrentlyInvalid, emptyCharacter: processedEmptyCharacter })] })), is12HourFormat && ((0, jsx_runtime_1.jsx)(AmPmButton, { className: "timeinput", disabled: !enabled, buttonRef: amPmButtonRef, maxTime: maxTime, minTime: minTime, onClick: handleAmPmToggle, onAmPmSet: handleAmPmSet, onKeyDown: handleArrowKeys, value: amPm }))] }), clearable && ((0, jsx_runtime_1.jsx)("button", { "data-part-id": PART_CLEAR_BUTTON, className: (0, classnames_1.default)(TimeInput_module_scss_1.default.clearButton, TimeInput_module_scss_1.default.button), disabled: !enabled, onClick: clear, onFocus: stopPropagation, type: "button", children: clearIconElement }))] }), endAdornment] })));
     return timeInputComponent;
 });
 function AmPmButton({ ariaLabel, autoFocus, className, disabled, locale, maxTime, minTime, onClick, onAmPmSet, onKeyDown, buttonRef, value, }) {

package/dist/scripts/src/components/Timer/Timer.spec.js

@@ -0,0 +1,358 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../testing/fixtures");
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("component renders with default props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Timer testId="timer" />`);
+        const timer = page.getByTestId("timer");
+        yield (0, fixtures_1.expect)(timer).toHaveAttribute("data-timer-enabled", "true");
+        yield (0, fixtures_1.expect)(timer).toHaveAttribute("data-timer-interval", "1000");
+    }));
+    (0, fixtures_1.test)("component renders with enabled=false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Timer testId="timer" enabled="false" />`);
+        const timer = page.getByTestId("timer");
+        yield (0, fixtures_1.expect)(timer).toHaveAttribute("data-timer-enabled", "false");
+        yield (0, fixtures_1.expect)(timer).toHaveAttribute("data-timer-running", "false");
+    }));
+    (0, fixtures_1.test)("component renders with custom interval", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Timer testId="timer" interval="500" />`);
+        const timer = page.getByTestId("timer");
+        yield (0, fixtures_1.expect)(timer).toHaveAttribute("data-timer-interval", "500");
+    }));
+    (0, fixtures_1.test)("component renders with once=true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Timer testId="timer" once="true" />`);
+        const timer = page.getByTestId("timer");
+        yield (0, fixtures_1.expect)(timer).toHaveAttribute("data-timer-once", "true");
+    }));
+    (0, fixtures_1.test)("component renders with initial delay", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Timer testId="timer" initialDelay="500" />`);
+        const timer = page.getByTestId("timer");
+        yield (0, fixtures_1.expect)(timer).toHaveAttribute("data-timer-initial-delay", "500");
+    }));
+    (0, fixtures_1.test)("component is not visible (non-visual component)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`<Timer testId="timer" />`);
+        const timer = page.getByTestId("timer");
+        yield (0, fixtures_1.expect)(timer).not.toBeVisible();
+    }));
+});
+fixtures_1.test.describe("Event Handling", () => {
+    (0, fixtures_1.test)("timer tick event is called", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}">
+        <Timer interval="1000" enabled="true" onTick="tickCount++" />
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        // Wait for a few ticks
+        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        // Wait for the first tick (1000ms + some buffer)
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Wait for the second tick
+        yield page.waitForTimeout(1000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("2");
+    }));
+    (0, fixtures_1.test)("timer stops when enabled is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}" var.timerEnabled="{true}">
+        <Timer interval="1000" enabled="{timerEnabled}" onTick="tickCount++" />
+        <Button testId="stopButton" onClick="timerEnabled = false">Stop Timer</Button>
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        const stopButton = page.getByTestId("stopButton");
+        // Wait for the first tick
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Stop the timer
+        yield stopButton.click();
+        // Wait and verify it doesn't increment
+        yield page.waitForTimeout(1500);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+    }));
+    (0, fixtures_1.test)("timer prevents overlapping events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        // This test verifies that a new tick event doesn't fire if the previous one hasn't completed
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}" var.processingTime="{2000}">
+        <Timer 
+          interval="1000" 
+          enabled="true" 
+          onTick="
+            tickCount++;
+            delay(processingTime);
+          " 
+        />
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        // First tick should start and take 2000ms to complete
+        // but interval is 1000ms, so second tick should not start until first completes
+        yield page.waitForTimeout(2500); // Wait for first tick to complete
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Wait a bit more to see if overlapping was prevented
+        yield page.waitForTimeout(1500); // Should be enough for second tick to start
+        yield (0, fixtures_1.expect)(counter).toHaveText("2");
+    }));
+});
+fixtures_1.test.describe("Initial Delay Functionality", () => {
+    (0, fixtures_1.test)("timer waits for initial delay before first tick", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}">
+        <Timer interval="1000" initialDelay="2000" onTick="tickCount++" />
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        // Should not tick immediately
+        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        // Should not tick before initial delay
+        yield page.waitForTimeout(1500);
+        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        // Should tick after initial delay
+        yield page.waitForTimeout(1000); // Total 2500ms, past the 2000ms initial delay + 1000ms interval
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Should continue ticking at interval
+        yield page.waitForTimeout(1000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("2");
+    }));
+    (0, fixtures_1.test)("initial delay only applies to first execution, not restarts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}" var.timerEnabled="{true}">
+        <Timer 
+          interval="1000" 
+          initialDelay="2000" 
+          enabled="{timerEnabled}" 
+          onTick="tickCount++" 
+        />
+        <Button testId="restartButton" onClick="timerEnabled = false; timerEnabled = true">Restart</Button>
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        const restartButton = page.getByTestId("restartButton");
+        // Wait for initial delay + first tick
+        yield page.waitForTimeout(3500);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Restart the timer
+        yield restartButton.click();
+        // After restart, should tick immediately without initial delay
+        yield page.waitForTimeout(1500);
+        yield (0, fixtures_1.expect)(counter).toHaveText("2");
+    }));
+    (0, fixtures_1.test)("initial delay works with once timer", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}">
+        <Timer interval="1000" initialDelay="2000" once="true" onTick="tickCount++" />
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        // Should not tick before initial delay
+        yield page.waitForTimeout(1500);
+        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        // Should tick once after initial delay
+        yield page.waitForTimeout(1000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Should not tick again
+        yield page.waitForTimeout(2000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+    }));
+});
+fixtures_1.test.describe("Pause and Resume API", () => {
+    (0, fixtures_1.test)("timer can be paused and resumed via API", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}">
+        <Timer 
+          id="myTimer"
+          interval="1000" 
+          onTick="tickCount++" 
+        />
+        <Button testId="pauseButton" onClick="myTimer.pause()">Pause</Button>
+        <Button testId="resumeButton" onClick="myTimer.resume()">Resume</Button>
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        const pauseButton = page.getByTestId("pauseButton");
+        const resumeButton = page.getByTestId("resumeButton");
+        // Wait for first tick
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Pause the timer
+        yield pauseButton.click();
+        // Should not tick while paused
+        const currentCount = yield counter.textContent();
+        yield page.waitForTimeout(1500);
+        yield (0, fixtures_1.expect)(counter).toHaveText(currentCount || "1");
+        // Resume the timer
+        yield resumeButton.click();
+        // Should continue ticking after resume
+        yield page.waitForTimeout(1200);
+        const finalCount = parseInt((yield counter.textContent()) || "0");
+        (0, fixtures_1.expect)(finalCount).toBeGreaterThan(parseInt(currentCount || "1"));
+    }));
+    (0, fixtures_1.test)("pause during initial delay stops the delay", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}">
+        <Timer 
+          id="myTimer"
+          interval="1000" 
+          initialDelay="3000"
+          onTick="tickCount++" 
+        />
+        <Button testId="pauseButton" onClick="myTimer.pause()">Pause</Button>
+        <Button testId="resumeButton" onClick="myTimer.resume()">Resume</Button>
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        const pauseButton = page.getByTestId("pauseButton");
+        const resumeButton = page.getByTestId("resumeButton");
+        // Pause during initial delay
+        yield page.waitForTimeout(1000);
+        yield pauseButton.click();
+        // Should not tick even after original delay would have passed
+        yield page.waitForTimeout(3000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        // Resume should start ticking
+        yield resumeButton.click();
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+    }));
+    (0, fixtures_1.test)("pause state is reset when timer is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}" var.timerEnabled="{true}">
+        <Timer 
+          id="myTimer"
+          interval="1000" 
+          enabled="{timerEnabled}"
+          onTick="tickCount++" 
+        />
+        <Button testId="pauseButton" onClick="myTimer.pause()">Pause</Button>
+        <Button testId="disableButton" onClick="timerEnabled = false">Disable</Button>
+        <Button testId="enableButton" onClick="timerEnabled = true">Enable</Button>
+        <Text testId="counter">{tickCount}</Text>
+        <Text testId="paused">{myTimer.isPaused() ? 'Paused' : 'Running'}</Text>
+      </Fragment>
+    `);
+        const pauseButton = page.getByTestId("pauseButton");
+        const disableButton = page.getByTestId("disableButton");
+        const enableButton = page.getByTestId("enableButton");
+        const pausedStatus = page.getByTestId("paused");
+        // Pause the timer
+        yield pauseButton.click();
+        yield (0, fixtures_1.expect)(pausedStatus).toHaveText("Paused");
+        // Disable the timer
+        yield disableButton.click();
+        // Re-enable the timer - pause state should be reset
+        yield enableButton.click();
+        yield (0, fixtures_1.expect)(pausedStatus).toHaveText("Running");
+    }));
+});
+fixtures_1.test.describe("Once Functionality", () => {
+    (0, fixtures_1.test)("timer with once=true fires only once", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}">
+        <Timer interval="1000" once="true" onTick="tickCount++" />
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        // Wait for the first tick
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Wait longer to ensure it doesn't tick again
+        yield page.waitForTimeout(2000);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+    }));
+    (0, fixtures_1.test)("timer with once=true can be restarted by re-enabling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}" var.timerEnabled="{true}">
+        <Timer interval="1000" once="true" enabled="{timerEnabled}" onTick="tickCount++" />
+        <Button testId="restartButton" onClick="timerEnabled = false; timerEnabled = true">Restart</Button>
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        const restartButton = page.getByTestId("restartButton");
+        // Wait for the first tick
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Restart the timer
+        yield restartButton.click();
+        // Wait for another tick
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("2");
+    }));
+    (0, fixtures_1.test)("once timer doesn't interfere with regular timer functionality", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}">
+        <Timer interval="1000" once="false" onTick="tickCount++" />
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        // Wait for multiple ticks
+        yield page.waitForTimeout(3500);
+        const finalCount = parseInt((yield counter.textContent()) || "0");
+        (0, fixtures_1.expect)(finalCount).toBeGreaterThan(2);
+    }));
+});
+fixtures_1.test.describe("State Management", () => {
+    (0, fixtures_1.test)("timer can be dynamically enabled and disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}" var.timerEnabled="{false}">
+        <Timer interval="1000" enabled="{timerEnabled}" onTick="tickCount++" />
+        <Button testId="startButton" onClick="timerEnabled = true">Start Timer</Button>
+        <Button testId="stopButton" onClick="timerEnabled = false">Stop Timer</Button>
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        const startButton = page.getByTestId("startButton");
+        const stopButton = page.getByTestId("stopButton");
+        // Initially disabled - should not increment
+        yield page.waitForTimeout(1500);
+        yield (0, fixtures_1.expect)(counter).toHaveText("0");
+        // Start the timer
+        yield startButton.click();
+        yield page.waitForTimeout(1200);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Stop the timer again
+        yield stopButton.click();
+        const currentCount = yield counter.textContent();
+        yield page.waitForTimeout(1500);
+        yield (0, fixtures_1.expect)(counter).toHaveText(currentCount || "1");
+    }));
+    (0, fixtures_1.test)("timer interval can be changed dynamically", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
+        yield initTestBed(`
+      <Fragment var.tickCount="{0}" var.timerInterval="{2000}">
+        <Timer interval="{timerInterval}" enabled="true" onTick="tickCount++" />
+        <Button testId="fasterButton" onClick="timerInterval = 500">Faster</Button>
+        <Text testId="counter">{tickCount}</Text>
+      </Fragment>
+    `);
+        const counter = page.getByTestId("counter");
+        const fasterButton = page.getByTestId("fasterButton");
+        // Start with 2000ms interval
+        yield page.waitForTimeout(2500);
+        yield (0, fixtures_1.expect)(counter).toHaveText("1");
+        // Change to 500ms interval
+        yield fasterButton.click();
+        yield page.waitForTimeout(1500); // Should get multiple ticks quickly
+        const finalCount = parseInt((yield counter.textContent()) || "0");
+        (0, fixtures_1.expect)(finalCount).toBeGreaterThan(1);
+    }));
+});