xmlui 0.10.12 → 0.10.14

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

@@ -0,0 +1,918 @@
+"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");
+// =============================================================================
+// BASIC FUNCTIONALITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Basic Functionality", () => {
+    (0, fixtures_1.test)("renders with basic props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("renders in disabled state when enabled is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" enabled="false" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeDisabled();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeDisabled();
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("shows clear button when clearable is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="true" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.clearButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("hides clear button when clearable is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="false" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.clearButton).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders with required attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" required="true" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("required", "");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("required", "");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("required", "");
+    }));
+});
+fixtures_1.test.describe("dateFormat property", () => {
+    (0, fixtures_1.test)("renders MM/dd/yyyy format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("renders yyyy-MM-dd format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="yyyy-MM-dd" initialValue="2024-05-25" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+    }));
+    (0, fixtures_1.test)("renders dd/MM/yyyy format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("renders yyyyMMdd compact format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="yyyyMMdd" initialValue="20240525" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+    }));
+    (0, fixtures_1.test)("renders MMddyyyy compact format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MMddyyyy" initialValue="05252024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("renders MM-dd-yyyy format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM-dd-yyyy" initialValue="05-25-2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("renders dd-MM-yyyy format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="dd-MM-yyyy" initialValue="25-05-2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("renders yyyy/MM/dd format correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="yyyy/MM/dd" initialValue="2024/05/25" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+    }));
+});
+// =============================================================================
+// INITIAL VALUE PROPERTY TESTS
+// =============================================================================
+fixtures_1.test.describe("initialValue property", () => {
+    (0, fixtures_1.test)("parses valid date in default format", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("falls back to ISO date parsing when format parsing fails", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" initialValue="2023-08-30" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("08");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("30");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2023");
+    }));
+    (0, fixtures_1.test)("falls back to ISO date parsing with different dateFormat", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="dd-MM-yyyy" initialValue="2023-12-25" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("12");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2023");
+    }));
+    (0, fixtures_1.test)("handles various ISO date formats as fallback", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" initialValue="2024-02-29T10:30:00Z" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("02");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("29");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("handles leap year dates correctly via ISO fallback", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="yyyyMMdd" initialValue="2024-02-29" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("02");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("29");
+    }));
+    (0, fixtures_1.test)("handles null initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{null}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles undefined initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{undefined}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles empty string initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles invalid date string gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="invalid-date-string" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{123456789}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles object initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{{}}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles boolean initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{true}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles false boolean initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{false}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles array initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{[1, 2, 3]}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles function initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{() => '2024-01-01'}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles zero numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{0}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles negative numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{-123}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles float numeric initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{123.456}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles NaN initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{NaN}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles Infinity initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{Infinity}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles Date object initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{Date.now()}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles complex object initialValue gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{{year: 2024, month: 5, day: 25}}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("prioritizes format-specific parsing over ISO fallback", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        // This date could potentially be parsed as ISO, but should use format-specific parsing first
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="yyyy-MM-dd" initialValue="2023-08-30" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2023");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("08");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("30");
+    }));
+});
+fixtures_1.test.describe("validationStatus property", () => {
+    (0, fixtures_1.test)("applies valid status styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" validationStatus="valid" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        // Note: validation status may be applied via CSS classes rather than data attributes
+    }));
+    (0, fixtures_1.test)("applies warning status styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" validationStatus="warning" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("applies error status styling", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" validationStatus="error" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("autoFocus property", () => {
+    (0, fixtures_1.test)("focuses component when autoFocus is true", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" autoFocus="true" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeFocused();
+    }));
+    (0, fixtures_1.test)("does not focus when autoFocus is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" autoFocus="false" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).not.toBeFocused();
+        yield (0, fixtures_1.expect)(driver.monthInput).not.toBeFocused();
+        yield (0, fixtures_1.expect)(driver.yearInput).not.toBeFocused();
+    }));
+});
+fixtures_1.test.describe("emptyCharacter property", () => {
+    (0, fixtures_1.test)("uses default '--' placeholder when no emptyCharacter is specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("placeholder", "--");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("placeholder", "--");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("placeholder", "----");
+    }));
+    (0, fixtures_1.test)("uses custom emptyCharacter for placeholders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" emptyCharacter="*" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("placeholder", "**");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("placeholder", "**");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("placeholder", "****");
+    }));
+    (0, fixtures_1.test)("uses first character when emptyCharacter is multi-character", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" emptyCharacter="abc" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("placeholder", "aa");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("placeholder", "aa");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("placeholder", "aaaa");
+    }));
+    (0, fixtures_1.test)("defaults to dash when emptyCharacter is empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" emptyCharacter="" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("placeholder", "--");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("placeholder", "--");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("placeholder", "----");
+    }));
+    (0, fixtures_1.test)("handles null emptyCharacter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" emptyCharacter="{null}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("placeholder", "--");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("placeholder", "--");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("placeholder", "----");
+    }));
+    (0, fixtures_1.test)("handles undefined emptyCharacter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" emptyCharacter="{undefined}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("placeholder", "--");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("placeholder", "--");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("placeholder", "----");
+    }));
+    (0, fixtures_1.test)("works with special characters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" emptyCharacter="@" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("placeholder", "@@");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("placeholder", "@@");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("placeholder", "@@@@");
+    }));
+    (0, fixtures_1.test)("works with unicode characters", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" emptyCharacter="📅" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("placeholder", "📅📅");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("placeholder", "📅📅");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("placeholder", "📅📅📅📅");
+    }));
+});
+fixtures_1.test.describe("mode property", () => {
+    (0, fixtures_1.test)("renders in single date mode by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        // Single mode should show one set of date inputs
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders in single date mode when explicitly set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" mode="single" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders in range mode when set to range", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" mode="range" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        // Range mode should show date inputs for start and end dates
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("minValue and maxValue properties", () => {
+    (0, fixtures_1.test)("accepts valid date within range", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" minValue="2024-01-01" maxValue="2024-12-31" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("works with only minValue set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" minValue="2024-01-01" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("works with only maxValue set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" maxValue="2024-12-31" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+});
+fixtures_1.test.describe("clearable properties", () => {
+    (0, fixtures_1.test)("shows clear button when clearable is true and has value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="true" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.clearButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("clear button is not visible when clearable is false", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="false" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.clearButton).not.toBeVisible();
+    }));
+    (0, fixtures_1.test)("uses custom clear icon when specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="true" clearIcon="close" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.clearButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("clearToInitialValue controls clear behavior", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="true" clearToInitialValue="true" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.clearButton).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("startText, startIcon, endText, endIcon properties", () => {
+    (0, fixtures_1.test)("renders start text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" startText="From:" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toContainText("From:");
+    }));
+    (0, fixtures_1.test)("renders start icon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" startIcon="trash" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component.getByRole("img")).toBeVisible();
+    }));
+    (0, fixtures_1.test)("renders end text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" endText="To:" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toContainText("To:");
+    }));
+    (0, fixtures_1.test)("renders end icon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" endIcon="phone" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component.getByRole("img")).toBeVisible();
+    }));
+});
+fixtures_1.test.describe("User Interactions", () => {
+    (0, fixtures_1.test)("allows typing in day input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.dayInput.focus();
+        yield driver.dayInput.fill("25");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+    }));
+    (0, fixtures_1.test)("allows typing in month input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.monthInput.focus();
+        yield driver.monthInput.fill("05");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+    }));
+    (0, fixtures_1.test)("allows typing in year input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.yearInput.focus();
+        yield driver.yearInput.fill("2024");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("clears input when clear button is clicked (clearToInitialValue is true)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="true" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        driver.dayInput.fill("18");
+        yield driver.clearButton.click();
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("clears input when clear button is clicked (clearToInitialValue is false)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="true" initialValue="05/25/2024" clearToInitialValue="false" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        driver.dayInput.fill("18");
+        yield driver.clearButton.click();
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("navigates between inputs with Tab key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page, }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.monthInput.focus();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeFocused();
+        yield page.keyboard.press("Tab");
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeFocused();
+        yield page.keyboard.press("Tab");
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeFocused();
+    }));
+    (0, fixtures_1.test)("navigates between inputs with arrow keys", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page, }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.monthInput.focus();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeFocused();
+        yield page.keyboard.press("ArrowRight");
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeFocused();
+        yield page.keyboard.press("ArrowRight");
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeFocused();
+        yield page.keyboard.press("ArrowLeft");
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeFocused();
+    }));
+});
+fixtures_1.test.describe("Event Handling", () => {
+    (0, fixtures_1.test)("fires didChange event when value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        const { testStateDriver } = yield initTestBed(`<DateInput testId="dateInput" onDidChange="testState = 'changed'" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.monthInput.fill("05");
+        yield driver.dayInput.fill("25");
+        yield driver.yearInput.fill("2024");
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("changed");
+    }));
+    (0, fixtures_1.test)("fires gotFocus event when input receives focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        const { testStateDriver } = yield initTestBed(`<DateInput testId="dateInput" onGotFocus="testState = 'focused'" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.dayInput.focus();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+    }));
+    (0, fixtures_1.test)("fires lostFocus event when input loses focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page, }) {
+        const { testStateDriver } = yield initTestBed(`<DateInput testId="dateInput" onLostFocus="testState = 'blurred'" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.dayInput.focus();
+        yield page.keyboard.press("Tab");
+        yield page.keyboard.press("Tab");
+        yield page.keyboard.press("Tab"); // Move focus away from all inputs
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
+    }));
+    (0, fixtures_1.test)("preserves field values when date combination becomes invalid", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" initialValue="01/30/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        // Verify initial state
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("01");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("30");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        // Change month from 01 to 02, making Feb 30th which is invalid
+        yield driver.monthInput.focus();
+        yield driver.monthInput.fill("02");
+        // Month should be updated to 02
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("02");
+        // Day should preserve the invalid value "30" instead of being normalized or cleared
+        // This is the key fix - invalid date combinations preserve the field values
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("30");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        // The day field should also be marked as invalid visually
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveClass(/invalid/);
+    }));
+    (0, fixtures_1.test)("does not clear all fields when invalid date is entered", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page }) {
+        yield initTestBed(`<DateInput testId="dateInput" dateFormat="MM/dd/yyyy" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        // Create a scenario where the complete date would be invalid
+        yield driver.monthInput.fill("13"); // Invalid month
+        yield driver.dayInput.fill("25");
+        yield driver.yearInput.fill("2024");
+        // Tab to trigger validation
+        yield page.keyboard.press("Tab");
+        // Month should be normalized (13 % 10 = 3)
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("03");
+        // Day and year should be preserved
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+        // The important thing is that we don't get all empty fields
+    }));
+});
+fixtures_1.test.describe("API Methods", () => {
+    (0, fixtures_1.test)("focus() method focuses the date input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" testId="dateInput" />
+        <Button onClick="dateInput.focus(); testState = 'focused'" />
+      </Fragment>
+    `);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.component.page().getByRole("button").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeFocused();
+    }));
+    (0, fixtures_1.test)("setValue() method sets the date value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" testId="dateInput" />
+        <Button onClick="dateInput.setValue('05/25/2024'); testState = 'set'" />
+      </Fragment>
+    `);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.component.page().getByRole("button").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("set");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("05");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("25");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("2024");
+    }));
+    (0, fixtures_1.test)("value getter returns current date value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" testId="dateInput" initialValue="05/25/2024" />
+        <Button onClick="testState = dateInput.value" />
+      </Fragment>
+    `);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.component.page().getByRole("button").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("05/25/2024");
+    }));
+    (0, fixtures_1.test)("setValue() method clears date when empty string provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" testId="dateInput" initialValue="05/25/2024" />
+        <Button onClick="dateInput.setValue(''); testState = 'cleared'" />
+      </Fragment>
+    `);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.component.page().getByRole("button").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("cleared");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("isoValue() method returns null when no date is set", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" />
+        <Button testId="getIsoBtn" onClick="testState = dateInput.isoValue()" />
+      </Fragment>
+    `);
+        yield page.getByTestId("getIsoBtn").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
+    }));
+    (0, fixtures_1.test)("isoValue() method returns ISO format for complete date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" initialValue="05/25/2024" />
+        <Button testId="getIsoBtn" onClick="testState = dateInput.isoValue()" />
+      </Fragment>
+    `);
+        yield page.getByTestId("getIsoBtn").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("2024-05-25");
+    }));
+    (0, fixtures_1.test)("isoValue() method handles different date formats correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" dateFormat="dd/MM/yyyy" initialValue="25/05/2024" />
+        <Button testId="getIsoBtn" onClick="testState = dateInput.isoValue()" />
+      </Fragment>
+    `);
+        yield page.getByTestId("getIsoBtn").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("2024-05-25");
+    }));
+    (0, fixtures_1.test)("isoValue() method returns null for incomplete date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createDateInputDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" testId="dateInput" />
+        <Button testId="getIsoBtn" onClick="testState = dateInput.isoValue()" />
+      </Fragment>
+    `);
+        const driver = yield createDateInputDriver("dateInput");
+        // Set only month and day, leave year empty
+        yield driver.monthInput.fill("05");
+        yield driver.dayInput.fill("25");
+        yield page.getByTestId("getIsoBtn").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
+    }));
+    (0, fixtures_1.test)("isoValue() method returns null for invalid date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createDateInputDriver }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" testId="dateInput" />
+        <Button testId="getIsoBtn" onClick="testState = dateInput.isoValue()" />
+      </Fragment>
+    `);
+        const driver = yield createDateInputDriver("dateInput");
+        // Set invalid date (February 30th)
+        yield driver.monthInput.fill("02");
+        yield driver.dayInput.fill("30");
+        yield driver.yearInput.fill("2024");
+        yield page.getByTestId("getIsoBtn").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe(null);
+    }));
+    (0, fixtures_1.test)("isoValue() method updates when date is changed programmatically", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" initialValue="05/25/2024" />
+        <Button testId="setDateBtn" onClick="dateInput.setValue('12/31/2023')" />
+        <Button testId="getIsoBtn" onClick="testState = dateInput.isoValue()" />
+      </Fragment>
+    `);
+        // Change the date programmatically
+        yield page.getByTestId("setDateBtn").click();
+        // Get the ISO value
+        yield page.getByTestId("getIsoBtn").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("2023-12-31");
+    }));
+    (0, fixtures_1.test)("isoValue() method handles leap year correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" initialValue="02/29/2024" />
+        <Button testId="getIsoBtn" onClick="testState = dateInput.isoValue()" />
+      </Fragment>
+    `);
+        yield page.getByTestId("getIsoBtn").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("2024-02-29");
+    }));
+    (0, fixtures_1.test)("isoValue() method handles edge dates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+        const { testStateDriver } = yield initTestBed(`
+      <Fragment>
+        <DateInput id="dateInput" initialValue="01/01/1900" />
+        <Button testId="getIsoBtn" onClick="testState = dateInput.isoValue()" />
+      </Fragment>
+    `);
+        yield page.getByTestId("getIsoBtn").click();
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBe("1900-01-01");
+    }));
+});
+// =============================================================================
+// ACCESSIBILITY TESTS
+// =============================================================================
+fixtures_1.test.describe("Accessibility", () => {
+    (0, fixtures_1.test)("has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" label="Birth Date" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveRole("textbox");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveRole("textbox");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveRole("textbox");
+    }));
+    (0, fixtures_1.test)("supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, page }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.monthInput.focus();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeFocused();
+        yield page.keyboard.press("Tab");
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeFocused();
+        yield page.keyboard.press("Tab");
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeFocused();
+        yield page.keyboard.press("Shift+Tab");
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeFocused();
+    }));
+    (0, fixtures_1.test)("has proper aria-label when label is provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" label="Birth Date" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component.locator("label")).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.component.locator("label")).toHaveText("Birth Date");
+    }));
+    (0, fixtures_1.test)("supports screen reader announcements for validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" validationStatus="error" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toHaveAttribute("data-validation-status", "error");
+    }));
+    (0, fixtures_1.test)("clear button has accessible role and label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" clearable="true" initialValue="05/25/2024" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.clearButton).toHaveRole("button");
+        yield (0, fixtures_1.expect)(driver.clearButton).toBeVisible();
+    }));
+    (0, fixtures_1.test)("inputs have correct input types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("type", "text");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("type", "text");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("type", "text");
+    }));
+    (0, fixtures_1.test)("supports required attribute for accessibility", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" required="true" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveAttribute("required", "");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveAttribute("required", "");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveAttribute("required", "");
+    }));
+});
+// =============================================================================
+// THEME VARIABLE TESTS
+// =============================================================================
+fixtures_1.test.describe("Theme Variables", () => {
+    (0, fixtures_1.test)("component renders with theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`
+      <DateInput 
+        testId="dateInput" 
+        style="--color-divider: red; --width-input: 100px; --backgroundColor-input-invalid: rgb(255, 200, 200);"
+      />
+    `);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component renders with clearable and theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`
+      <DateInput 
+        testId="dateInput" 
+        clearable="{true}"
+        style="--padding-button: 15px; --outlineColor-button--focused: green;"
+      />
+    `);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.clearButton).toBeVisible();
+    }));
+});
+// =============================================================================
+// OTHER EDGE CASE TESTS
+// =============================================================================
+fixtures_1.test.describe("Other Edge Cases", () => {
+    (0, fixtures_1.test)("handles no props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.dayInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.yearInput).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles null initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{null}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles undefined initialValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="{undefined}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.dayInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.monthInput).toHaveValue("");
+        yield (0, fixtures_1.expect)(driver.yearInput).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("handles invalid date format gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" initialValue="invalid-date" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles very long text values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        const longText = "a".repeat(1000);
+        yield initTestBed(`<DateInput testId="dateInput" placeholder="${longText}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles extreme minValue and maxValue", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver }) {
+        yield initTestBed(`<DateInput testId="dateInput" minValue="1900-01-01" maxValue="2100-12-31" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles negative numbers in input fields", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.dayInput.fill("-5");
+        yield driver.monthInput.fill("-1");
+        yield driver.yearInput.fill("-2024");
+        // Component should handle invalid input gracefully
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles very large numbers in input fields", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.dayInput.fill("99999");
+        yield driver.monthInput.fill("99999");
+        yield driver.yearInput.fill("99999");
+        // Component should handle invalid input gracefully
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles special characters in input fields", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.dayInput.fill("@#$");
+        yield driver.monthInput.fill("!%^");
+        yield driver.yearInput.fill("&*()");
+        // Component should handle invalid input gracefully
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles object value passed to string property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" placeholder="{{}}" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("handles rapid consecutive value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        const { testStateDriver } = yield initTestBed(`<DateInput testId="dateInput" onDidChange="testState = (testState || 0) + 1" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.monthInput.fill("01");
+        yield driver.monthInput.fill("02");
+        yield driver.monthInput.fill("03");
+        // Should handle rapid changes
+        yield fixtures_1.expect.poll(testStateDriver.testState).toBeGreaterThan(0);
+    }));
+    (0, fixtures_1.test)("maintains focus during validation errors", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createDateInputDriver, }) {
+        yield initTestBed(`<DateInput testId="dateInput" />`);
+        const driver = yield createDateInputDriver("dateInput");
+        yield driver.monthInput.focus();
+        yield driver.monthInput.fill("13"); // Invalid month
+        // Focus should be maintained even with validation error
+        yield (0, fixtures_1.expect)(driver.monthInput).toBeFocused();
+    }));
+});