xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/DatePicker/DatePicker.js

@@ -1,146 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.datePickerComponentRenderer = exports.DatePickerMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../metadata-helpers");
-const DatePickerNative_1 = require("./DatePickerNative");
-const COMP = "DatePicker";
-exports.DatePickerMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "`DatePicker` provides an interactive calendar interface for selecting single dates " +
-        "or date ranges, with customizable formatting and validation options. It displays " +
-        "a text input that opens a calendar popup when clicked, offering both keyboard and " +
-        "mouse interaction.",
-    props: {
-        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
-        readOnly: (0, metadata_helpers_1.dReadonly)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(DatePickerNative_1.defaultProps.enabled),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(DatePickerNative_1.defaultProps.validationStatus),
-        mode: {
-            description: "The mode of the datepicker (single or range)",
-            valueType: "string",
-            availableValues: DatePickerNative_1.DatePickerModeValues,
-            defaultValue: DatePickerNative_1.defaultProps.mode,
-        },
-        dateFormat: {
-            description: "The format of the date displayed in the input field",
-            valueType: "string",
-            defaultValue: DatePickerNative_1.defaultProps.dateFormat,
-            availableValues: DatePickerNative_1.dateFormats,
-        },
-        showWeekNumber: {
-            description: "Whether to show the week number in the calendar",
-            valueType: "boolean",
-            defaultValue: DatePickerNative_1.defaultProps.showWeekNumber,
-        },
-        weekStartsOn: {
-            description: "The first day of the week. 0 is Sunday, 1 is Monday, etc.",
-            valueType: "number",
-            defaultValue: DatePickerNative_1.defaultProps.weekStartsOn,
-            availableValues: [
-                {
-                    value: DatePickerNative_1.WeekDays.Sunday,
-                    description: "Sunday",
-                },
-                {
-                    value: DatePickerNative_1.WeekDays.Monday,
-                    description: "Monday",
-                },
-                {
-                    value: DatePickerNative_1.WeekDays.Tuesday,
-                    description: "Tuesday",
-                },
-                {
-                    value: DatePickerNative_1.WeekDays.Wednesday,
-                    description: "Wednesday",
-                },
-                {
-                    value: DatePickerNative_1.WeekDays.Thursday,
-                    description: "Thursday",
-                },
-                {
-                    value: DatePickerNative_1.WeekDays.Friday,
-                    description: "Friday",
-                },
-                {
-                    value: DatePickerNative_1.WeekDays.Saturday,
-                    description: "Saturday",
-                },
-            ],
-        },
-        startDate: {
-            description: "The earliest month to start the month navigation from (inclusive). " +
-                "If not defined, the component allows any dates in the past. " +
-                "Accepts the same date format as the `initialValue`." +
-                "Example: '2023-01-01' ensures the first month to select a date from is January 2023.",
-            valueType: "string",
-        },
-        endDate: {
-            description: "The latest month to start the month navigation from (inclusive). " +
-                "If not defined, the component allows any future dates. " +
-                "Accepts the same date format as the `initialValue`." +
-                "Example: '2023-12-31' ensures the last month to select a date from is December 2023.",
-            valueType: "string",
-        },
-        disabledDates: {
-            description: "An optional array of dates that are to be disabled.",
-            valueType: "any",
-        },
-        inline: {
-            description: "If set to true, the calendar is always visible and its panel is rendered as part of the layout." +
-                " If false, the calendar is shown in a popup when the input is focused or clicked.",
-            valueType: "boolean",
-            defaultValue: DatePickerNative_1.defaultProps.inline,
-        },
-        startText: (0, metadata_helpers_1.dStartText)(),
-        startIcon: (0, metadata_helpers_1.dStartIcon)(),
-        endText: (0, metadata_helpers_1.dEndText)(),
-        endIcon: (0, metadata_helpers_1.dEndIcon)(),
-    },
-    events: {
-        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
-        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
-        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
-    },
-    apis: {
-        focus: {
-            description: `Focus the ${COMP} component.`,
-            signature: "focus(): void",
-        },
-        value: {
-            description: `You can query the component's value. If no value is set, it will retrieve \`undefined\`.`,
-            signature: "get value(): any",
-        },
-        setValue: {
-            description: `This method sets the current value of the ${COMP}.`,
-            signature: "set value(value: any): void",
-            parameters: {
-                value: "The new value to set for the date picker.",
-            },
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(DatePicker_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
-        [`borderRadius-menu-${COMP}`]: "$borderRadius",
-        [`textColor-value-${COMP}`]: "$textColor-primary",
-        [`borderColor-selectedItem-${COMP}`]: "$color-primary-200",
-        [`backgroundColor-menu-${COMP}`]: "$color-surface-50",
-        [`backgroundColor-item-${COMP}--hover`]: "$color-surface-100",
-        [`backgroundColor-item-${COMP}--active`]: "$color-surface-200",
-        [`paddingVertical-${COMP}`]: "$space-2",
-        [`paddingHorizontal-${COMP}`]: "$space-2",
-    },
-});
-exports.datePickerComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.DatePickerMd, ({ node, state, updateState, extractValue, className, lookupEventHandler, registerComponentApi, }) => {
-    var _a;
-    return ((0, jsx_runtime_1.jsx)(DatePickerNative_1.DatePicker, { className: className, mode: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.mode), value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, dateFormat: extractValue(node.props.dateFormat), showWeekNumber: extractValue.asOptionalBoolean(node.props.showWeekNumber), weekStartsOn: extractValue(node.props.weekStartsOn), startDate: extractValue(node.props.startDate), endDate: extractValue(node.props.endDate), disabledDates: extractValue(node.props.disabledDates), inline: extractValue.asOptionalBoolean(node.props.inline), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), endIcon: extractValue.asOptionalString(node.props.endIcon), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus) }));
-});

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

@@ -1,394 +0,0 @@
-"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");
-const date_fns_1 = require("date-fns");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" />`);
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeVisible();
-}));
-(0, fixtures_1.test)("component renders inline", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker inline testId="datePicker" />`);
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeVisible();
-}));
-(0, fixtures_1.test)("component handles correct date format", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />`);
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/25/2024");
-}));
-(0, fixtures_1.test)("component displays initialValue correctly (single)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <DatePicker
-      initialValue="05/25/2024"
-      dateFormat="MM/dd/yyyy"
-      testId="datePicker"
-      mode="single"
-    />`);
-    yield (0, fixtures_1.expect)(page.getByText("05/25/2024")).toBeVisible();
-}));
-(0, fixtures_1.test)("component displays initialValue correctly (range)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <DatePicker
-      initialValue="{{ from: '05/25/2024', to: '05/26/2024' }}"
-      dateFormat="MM/dd/yyyy"
-      mode="range"
-      testId="datePicker"
-    />`);
-    yield (0, fixtures_1.expect)(page.getByText("05/25/2024 - 05/26/2024")).toBeVisible();
-}));
-(0, fixtures_1.test)("component opens calendar when clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" />`);
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
-}));
-(0, fixtures_1.test)("component formats input to provided date format", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" dateFormat="dd-MM-yyyy" initialValue="05/25/2024" />`);
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("25-05-2024");
-}));
-(0, fixtures_1.test)("component allows date selection in single mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <DatePicker testId="datePicker" mode="single" dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
-  `);
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
-    yield page.getByRole("grid", { name: "May" }).getByLabel("26").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/26/2024");
-}));
-(0, fixtures_1.test)("date changes when selecting a new date in single mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <DatePicker testId="datePicker" mode="single" dateFormat="MM/dd/yyyy" initialValue="05/25/2024" />
-  `);
-    const datePicker = page.getByTestId("datePicker");
-    yield datePicker.click();
-    yield page.getByRole("grid", { name: "May" }).getByLabel("26").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/26/2024");
-    yield datePicker.click();
-    yield page.getByRole("grid", { name: "May" }).getByLabel("27").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/27/2024");
-}));
-(0, fixtures_1.test)("component allows date range selection", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" mode="range" dateFormat="MM/dd/yyyy" initialValue="{{ from: '05/25/2024', to: '05/26/2024' }}" />`);
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
-    yield page.getByRole("grid", { name: "May" }).getByLabel("26").click();
-    yield page.getByRole("grid", { name: "May" }).getByLabel("27").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/26/2024 - 05/27/2024");
-}));
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" />`);
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveAttribute("aria-haspopup", "true");
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveAttribute("aria-expanded", "false");
-}));
-(0, fixtures_1.test)("component is focusable via label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" label="Birth Date" />`);
-    yield page.getByText("Birth Date").click();
-    // --- clicking the label to focus the input opens up the dialog
-    yield (0, fixtures_1.expect)(page.getByRole("menu").getByRole("button", { name: "Go to the Previous Month" })).toBeFocused();
-}));
-(0, fixtures_1.test)("component respects autoFocus property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" autoFocus="true" />`);
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeFocused();
-}));
-(0, fixtures_1.test)("component is keyboard navigable: open/close calendar menu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" />`);
-    // Focus the button
-    yield page.getByTestId("datePicker").focus();
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeFocused();
-    // Press Enter to open calendar
-    yield page.keyboard.press("Enter");
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
-    // Press Escape to close
-    yield page.keyboard.press("Escape");
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("component is keyboard navigable: navigate controls inside calendar menu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
-    yield initTestBed(`<DatePicker testId="datePicker" initialValue="05/25/2024" dateFormat="MM/dd/yyyy" />`);
-    // Focus the button
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByRole("menu").getByRole("button", { name: "Go to the Previous Month" })).toBeFocused();
-    // Tab to the calendar grid
-    yield page.keyboard.press("Tab");
-    yield (0, fixtures_1.expect)(page.getByRole("menu").getByRole("button", { name: "Go to the Next Month" })).toBeFocused();
-    yield page.keyboard.press("Tab");
-    yield (0, fixtures_1.expect)(page.getByRole("menu").getByLabel("Choose the Month")).toBeFocused();
-    yield page.keyboard.press("Tab");
-    yield (0, fixtures_1.expect)(page.getByRole("menu").getByLabel("Choose the Year")).toBeFocused();
-    yield page.keyboard.press("Tab");
-    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("25")).toBeFocused();
-}));
-(0, fixtures_1.test)("component is keyboard navigable: navigate days inside calendar menu", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, }) {
-    yield initTestBed(`<DatePicker testId="datePicker" initialValue="05/15/2024" dateFormat="MM/dd/yyyy" />`);
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
-    // The back navigation button is focused first
-    // Tab to next nav button
-    yield page.keyboard.press("Tab");
-    // Tab to month select
-    yield page.keyboard.press("Tab");
-    // Tab to year select
-    yield page.keyboard.press("Tab");
-    // Tab to the calendar grid
-    yield page.keyboard.press("Tab");
-    yield page.keyboard.press("ArrowLeft");
-    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 14th")).toBeFocused();
-    yield page.keyboard.press("ArrowUp");
-    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 7th")).toBeFocused();
-    yield page.keyboard.press("ArrowRight");
-    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 8th")).toBeFocused();
-    yield page.keyboard.press("ArrowDown");
-    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 15th")).toBeFocused();
-}));
-(0, fixtures_1.test)("component is keyboard navigable: enter new date", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" initialValue="05/15/2024" dateFormat="MM/dd/yyyy"/>`);
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).toBeVisible();
-    // The back navigation button is focused first
-    // Tab to next nav button
-    yield page.keyboard.press("Tab");
-    // Tab to month select
-    yield page.keyboard.press("Tab");
-    // Tab to year select
-    yield page.keyboard.press("Tab");
-    // Tab to the calendar grid
-    yield page.keyboard.press("Tab");
-    yield page.keyboard.press("ArrowLeft");
-    yield (0, fixtures_1.expect)(page.getByRole("grid", { name: "May" }).getByLabel("May 14th")).toBeFocused();
-    yield page.keyboard.press("Enter");
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("05/14/2024");
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("component fires proper focus event on gotFocus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`
-    <DatePicker testId="datePicker" onGotFocus="testState = 'focused'" />
-  `);
-    yield page.getByTestId("datePicker").focus();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
-}));
-(0, fixtures_1.test)("component fires proper focus event on label focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`
-    <DatePicker testId="datePicker" onGotFocus="testState = 'focused'" label="test" />
-  `);
-    yield page.getByText("test").click();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toBe("focused");
-}));
-(0, fixtures_1.test)("component fires proper blur event on lostFocus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`
-    <DatePicker testId="datePicker" onLostFocus="testState = 'blurred'" />
-  `);
-    yield page.getByTestId("datePicker").focus();
-    yield page.getByTestId("datePicker").blur();
-    yield fixtures_1.expect.poll(testStateDriver.testState).toBe("blurred");
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component shows error validation states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    // Error state
-    yield initTestBed(`<DatePicker testId="datePicker" validationStatus="error" />`, {
-        testThemeVars: {
-            "borderColor-DatePicker-error": "rgb(220, 38, 38)",
-            "backgroundColor-DatePicker-error": "rgb(254, 202, 202)",
-            "textColor-DatePicker-error": "rgb(127, 29, 29)",
-        },
-    });
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(220, 38, 38)");
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("background-color", "rgb(254, 202, 202)");
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("color", "rgb(127, 29, 29)");
-}));
-(0, fixtures_1.test)("component shows warning validation states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    // Warning state
-    yield initTestBed(`<DatePicker testId="datePicker" validationStatus="warning" />`, {
-        testThemeVars: {
-            "borderColor-DatePicker-warning": "rgb(255, 165, 0)",
-            "backgroundColor-DatePicker-warning": "rgb(255, 235, 156)",
-            "textColor-DatePicker-warning": "rgb(127, 29, 29)",
-        },
-    });
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(255, 165, 0)");
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("background-color", "rgb(255, 235, 156)");
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("color", "rgb(127, 29, 29)");
-}));
-(0, fixtures_1.test)("component shows valid validation states", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    // Valid state
-    yield initTestBed(`<DatePicker testId="datePicker" validationStatus="valid" />`, {
-        testThemeVars: {
-            "borderColor-DatePicker-success": "rgb(0, 128, 0)",
-            "backgroundColor-DatePicker-success": "rgb(220, 255, 220)",
-            "textColor-DatePicker-success": "rgb(0, 100, 0)",
-        },
-    });
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("border-color", "rgb(0, 128, 0)");
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("background-color", "rgb(220, 255, 220)");
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveCSS("color", "rgb(0, 100, 0)");
-}));
-(0, fixtures_1.test)("component displays placeholder text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" placeholder="Select a date" />`);
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toContainText("Select a date");
-}));
-(0, fixtures_1.test)("component shows week numbers when enabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" showWeekNumber="true" />`);
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.locator("[role='rowheader']").first()).toBeVisible();
-}));
-(0, fixtures_1.test)("component renders with adornments", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const startText = "From";
-    const endText = "Select";
-    yield initTestBed(`
-    <DatePicker
-      testId="datePicker"
-      startText="${startText}"
-      endText="${endText}"
-      startIcon="test"
-      endIcon="test"
-    />
-  `, {
-        resources: {
-            "icon.test": "resources/bell.svg",
-        },
-    });
-    yield (0, fixtures_1.expect)(page.getByText(startText)).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByText(endText)).toBeVisible();
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker").locator("svg")).toHaveCount(2);
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles disabled state correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" enabled="false" />`);
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeDisabled();
-}));
-(0, fixtures_1.test)("disabled component does not react to user interactions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker testId="datePicker" enabled="false" />`);
-    yield page.getByTestId("datePicker").click({ force: true });
-    yield (0, fixtures_1.expect)(page.getByRole("menu")).not.toBeVisible();
-}));
-(0, fixtures_1.test)("component handles readOnly mode correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const initialDate = "05/25/2024";
-    yield initTestBed(`<DatePicker testId="datePicker" readOnly="true" initialValue="${initialDate}" dateFormat="MM/dd/yyyy" />`);
-    yield page.getByTestId("datePicker").click();
-    yield page.getByRole("grid", { name: "May" }).getByLabel("26").click();
-    // The date should not change
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText(initialDate);
-}));
-(0, fixtures_1.test)("component handles startDate restrictions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker
-        testId="datePicker"
-        mode="range"
-        startDate="05/01/2024"
-        dateFormat="MM/dd/yyyy"
-        initialValue="{{ from: '05/26/2024', to: '05/27/2024' }}"
-      />`);
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.getByRole('button', { name: 'Go to the Previous Month' })).toBeDisabled();
-}));
-(0, fixtures_1.test)("component handles endDate restrictions", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker
-        testId="datePicker"
-        mode="range"
-        endDate="06/01/2024"
-        initialValue="{{ from: '05/26/2024', to: '05/27/2024' }}"
-        dateFormat="MM/dd/yyyy"
-      />`);
-    yield page.getByTestId("datePicker").click();
-    yield (0, fixtures_1.expect)(page.getByRole('button', { name: 'Go to the Next Month' })).toBeDisabled();
-}));
-(0, fixtures_1.test)("component handles disabledDates correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const testDay = 15;
-    const today = new Date();
-    const testDayFormatted = (0, date_fns_1.format)(new Date(today.getFullYear(), today.getMonth(), testDay), "MM/dd/yyyy");
-    const testMonthName = (0, date_fns_1.format)(today, "LLLL");
-    yield initTestBed(`<DatePicker testId="datePicker" disabledDates="{['${testDayFormatted}']}" />`, {});
-    yield page.getByTestId("datePicker").click();
-    const testDayCell = page.getByRole("grid", { name: testMonthName }).getByLabel(testDay.toString());
-    yield (0, fixtures_1.expect)(testDayCell).toBeDisabled();
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("component value API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <Fragment>
-      <DatePicker id="datePicker" initialValue="05/25/2024" dateFormat="MM/dd/yyyy" />
-      <Text testId="text">{datePicker.value}</Text>
-    </Fragment>
-  `);
-    yield (0, fixtures_1.expect)(page.getByTestId("text")).toHaveText("05/25/2024");
-}));
-(0, fixtures_1.test)("component setValue API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <Fragment>
-      <DatePicker id="datePicker" initialValue="05/25/2024" dateFormat="MM/dd/yyyy" />
-      <Button testId="btn" onClick="datePicker.setValue('06/01/2024')" />
-    </Fragment>
-  `);
-    yield page.getByTestId("btn").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toHaveText("06/01/2024");
-}));
-(0, fixtures_1.test)("component focus API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <Fragment>
-      <DatePicker id="datePicker" initialValue="05/25/2024" dateFormat="MM/dd/yyyy" />
-      <Button testId="focusBtn" onClick="datePicker.focus()" />
-    </Fragment>
-  `);
-    yield page.getByTestId("focusBtn").click();
-    yield (0, fixtures_1.expect)(page.getByTestId("datePicker")).toBeFocused();
-}));
-(0, fixtures_1.test)("component works correctly within a form", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`
-    <Form onSubmit="(data) => testState = data.testField" data="{{ testField: '05/25/2024' }}">
-      <FormItem type="datePicker" label="Choose Date" bindTo="testField" />
-    </Form>
-  `);
-    const formElement = page.locator("form");
-    const dateInput = formElement.getByLabel("Choose Date");
-    yield (0, fixtures_1.expect)(dateInput).toBeVisible();
-    yield (0, fixtures_1.expect)(dateInput).toHaveText("05/25/2024");
-    // Submit the form
-    yield page.locator("[type=submit]").click();
-    // Check that the form was submitted
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("05/25/2024");
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("input has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker width="200px" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in px", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<DatePicker width="200px" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<DatePicker width="50%" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));
-(0, fixtures_1.test)("input with label has correct width in %", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield page.setViewportSize({ width: 400, height: 300 });
-    yield initTestBed(`<DatePicker width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));