xmlui 0.11.4 → 0.11.6

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

@@ -1,54 +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.colorPickerComponentRenderer = exports.ColorPickerMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const ColorPickerNative_1 = require("./ColorPickerNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
-const COMP = "ColorPicker";
-exports.ColorPickerMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values.",
-    props: {
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
-        required: (0, metadata_helpers_1.dRequired)(),
-        readOnly: (0, metadata_helpers_1.dReadonly)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(ColorPickerNative_1.defaultProps.validationStatus),
-    },
-    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: `This method returns the current value of the ${COMP}.`,
-            signature: "get value(): string",
-        },
-        setValue: {
-            description: `This method sets the current value of the ${COMP}.`,
-            signature: "set value(value: string): void",
-            parameters: {
-                value: "The new value to set for the color picker.",
-            },
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(ColorPicker_module_scss_1.default.themeVars),
-});
-exports.colorPickerComponentRenderer = (0, renderers_1.createComponentRenderer)("ColorPicker", exports.ColorPickerMd, ({ node, extractValue, className, state, lookupEventHandler, registerComponentApi, updateState, }) => {
-    var _a, _b, _c, _d;
-    const readOnly = extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.readOnly, false);
-    const enabled = extractValue.asOptionalBoolean((_b = node.props) === null || _b === void 0 ? void 0 : _b.enabled, true);
-    return ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, { validationStatus: extractValue(node.props.validationStatus), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, className: className, required: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.required), enabled: enabled && !readOnly, readOnly: readOnly, autoFocus: extractValue.asOptionalBoolean((_d = node.props) === null || _d === void 0 ? void 0 : _d.autoFocus) }));
-});

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

@@ -1,355 +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");
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component renders with default value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {});
-    // Check that the component is visible
-    yield (0, fixtures_1.expect)(page.locator("input[type='color']")).toBeVisible();
-    // Check default color (#000000 - black)
-    yield (0, fixtures_1.expect)(page.locator("input[type='color']")).toHaveValue("#000000");
-}));
-(0, fixtures_1.test)("component updates when value changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const COLOR_1 = "#ff0000"; // Red
-    const COLOR_2 = "#00ff00"; // Green
-    yield initTestBed(`<ColorPicker initialValue="${COLOR_1}" />`, {});
-    // Check that the initial color is set correctly
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveValue(COLOR_1);
-    // Change the color
-    yield colorInput.fill(COLOR_2); // Green
-    yield (0, fixtures_1.expect)(colorInput).toHaveValue(COLOR_2);
-}));
-(0, fixtures_1.test)("component renders label correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker label="Select Color" />`);
-    // Check that the label is displayed
-    const label = page.locator("label");
-    yield (0, fixtures_1.expect)(label).toBeVisible();
-    yield (0, fixtures_1.expect)(label).toContainText("Select Color");
-}));
-(0, fixtures_1.test)("component handles disabled state correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker enabled="false" />`, {});
-    // Check that the input is disabled
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toBeDisabled();
-}));
-(0, fixtures_1.test)("component handles enabled state correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker enabled="true" />`, {});
-    // Check that the input is disabled
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toBeEnabled();
-}));
-(0, fixtures_1.test)("component fires didChange event when color is selected", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const COLOR_1 = "#ff0000"; // Red
-    const COLOR_2 = "#00ff00"; // Green
-    const { testStateDriver } = yield initTestBed(`
-    <ColorPicker initialValue="${COLOR_1}" onDidChange="(value) => testState = value" />
-  `);
-    // Change the color
-    yield page.locator("input[type='color']").fill(COLOR_2);
-    // Check that the event fired with the new color value
-    yield fixtures_1.expect.poll(() => testStateDriver.testState()).toEqual(COLOR_2);
-}));
-(0, fixtures_1.test)("component's gotFocus event fires", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`
-    <ColorPicker initialValue="#FF0000" onGotFocus="testState = 'focused'" />
-  `);
-    const colorInput = page.locator("input[type='color']");
-    // Focus the input
-    yield colorInput.focus();
-    // Verify the input is focused
-    yield (0, fixtures_1.expect)(colorInput).toBeFocused();
-    // Verify the focus event fired
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-}));
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-(0, fixtures_1.test)("component has correct accessibility attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker label="Select Color" />`, {});
-    // Check that the input has a valid label association
-    const colorInput = page.locator("input[type='color']");
-    const inputId = yield colorInput.getAttribute("id");
-    const label = page.locator("label");
-    (0, fixtures_1.expect)(inputId).toBeTruthy();
-    yield (0, fixtures_1.expect)(label).toHaveAttribute("for", inputId);
-}));
-(0, fixtures_1.test)("component is keyboard accessible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`
-    <ColorPicker initialValue="#FF0000" onGotFocus="testState = 'focused'" />
-  `);
-    const colorInput = page.locator("input[type='color']");
-    // Focus the input
-    yield page.keyboard.press("Tab");
-    // Verify the input is focused
-    yield (0, fixtures_1.expect)(colorInput).toBeFocused();
-    // Verify the focus event fired
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-}));
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-fixtures_1.test.describe("Validation", () => {
-    [
-        { value: "--default", prop: "" },
-        { value: "--warning", prop: 'validationStatus="warning"' },
-        { value: "--error", prop: 'validationStatus="error"' },
-        { value: "--success", prop: 'validationStatus="valid"' },
-    ].forEach((variant) => {
-        (0, fixtures_1.test)(`applies correct borderRadius ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderRadius-ColorPicker${variant.value}`]: "12px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-radius", "12px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-ColorPicker${variant.value}`]: "rgb(255, 0, 0)" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(255, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct borderWidth ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderWidth-ColorPicker${variant.value}`]: "1px" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-width", "1px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderStyle ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderStyle-ColorPicker${variant.value}`]: "dashed" },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-style", "dashed");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-ColorPicker${variant.value}`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-        (0, fixtures_1.test)(`applies correct borderColor on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
-                testThemeVars: { [`borderColor-ColorPicker${variant.value}--hover`]: "rgb(0, 0, 0)" },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("border-color", "rgb(0, 0, 0)");
-        }));
-        (0, fixtures_1.test)(`applies correct boxShadow on hover ${variant.value}`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`<ColorPicker testId="test" ${variant.prop} />`, {
-                testThemeVars: {
-                    [`boxShadow-ColorPicker${variant.value}--hover`]: "0 2px 8px rgba(0, 0, 0, 0.1)",
-                },
-            });
-            yield page.getByTestId("test").hover();
-            yield (0, fixtures_1.expect)(page.getByTestId("test")).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 8px 0px");
-        }));
-    });
-});
-(0, fixtures_1.test)("component applies backgroundColor-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {
-        testThemeVars: {
-            "backgroundColor-ColorPicker": "rgb(240, 240, 240)",
-        },
-    });
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("background-color", "rgb(240, 240, 240)");
-}));
-(0, fixtures_1.test)("component applies borderColor-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {
-        testThemeVars: {
-            "borderColor-ColorPicker": "rgb(255, 0, 0)",
-        },
-    });
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(255, 0, 0)");
-}));
-(0, fixtures_1.test)("component applies borderColor-ColorPicker--hover theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {
-        testThemeVars: {
-            "borderColor-ColorPicker": "rgb(0, 0, 0)",
-            "borderColor-ColorPicker--hover": "rgb(255, 0, 0)",
-        },
-    });
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(0, 0, 0)");
-    yield colorInput.hover();
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(255, 0, 0)");
-}));
-(0, fixtures_1.test)("component applies borderColor-ColorPicker--focus theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {
-        testThemeVars: {
-            "borderColor-ColorPicker": "rgb(0, 0, 0)",
-            "borderColor-ColorPicker--focus": "rgb(0, 255, 0)",
-        },
-    });
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(0, 0, 0)");
-    yield colorInput.focus();
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-color", "rgb(0, 255, 0)");
-}));
-(0, fixtures_1.test)("component applies borderRadius-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {
-        testThemeVars: {
-            "borderRadius-ColorPicker": "4px",
-        },
-    });
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-radius", "4px");
-}));
-(0, fixtures_1.test)("component applies borderWidth-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {
-        testThemeVars: {
-            "borderWidth-ColorPicker": "2px",
-        },
-    });
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-width", "2px");
-}));
-(0, fixtures_1.test)("component applies borderStyle-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {
-        testThemeVars: {
-            "borderStyle-ColorPicker": "solid",
-        },
-    });
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("border-style", "solid");
-}));
-(0, fixtures_1.test)("component applies boxShadow-ColorPicker theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker />`, {
-        testThemeVars: {
-            "boxShadow-ColorPicker": "0 2px 4px rgba(0, 0, 0, 0.1)",
-        },
-    });
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveCSS("box-shadow", "rgba(0, 0, 0, 0.1) 0px 2px 4px 0px");
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles invalid color values gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker initialValue="not-a-color" />`);
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveValue("#000000");
-}));
-(0, fixtures_1.test)("component handles required attribute correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker required="true" />`);
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveAttribute("required", "");
-}));
-(0, fixtures_1.test)("component handles readOnly mode correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`<ColorPicker readOnly="true" />`);
-    const colorInput = page.locator("input[type='color']");
-    // For ColorPickers the readOnly attribute typically makes the input disabled
-    yield (0, fixtures_1.expect)(colorInput).toBeDisabled();
-}));
-// =============================================================================
-// PERFORMANCE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles rapid value changes efficiently", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    // Test with initial color
-    yield initTestBed(`
-    <Fragment>
-      <ColorPicker id="colorPicker" initialValue="#ff0000" />
-      <Button testId="toGreen" onClick="colorPicker.setValue('#00ff00')">Change to Green</Button>
-      <Button testId="toBlue" onClick="colorPicker.setValue('#0000ff')">Change to Blue</Button>
-    </Fragment>
-    `);
-    yield page.getByTestId("toGreen").click();
-    yield page.getByTestId("toBlue").click();
-    yield (0, fixtures_1.expect)(page.locator("input[type='color']")).toHaveValue("#0000ff", { timeout: 3000 });
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("component works correctly in a form context", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`
-    <Form onSubmit="(data) => testState = data.testField" data="{{ testField: '#0000ff' }}">
-      <FormItem type="colorpicker" label="Choose Color" bindTo="testField" />
-    </Form>
-  `);
-    // Check that the color picker is inside the form
-    const formElement = page.locator("form");
-    const colorInput = formElement.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toBeVisible();
-    // Submit the form
-    yield page.locator("[type=submit]").click();
-    // Check that the form was submitted
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("#0000ff");
-}));
-(0, fixtures_1.test)("component value API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <Fragment>
-      <ColorPicker id="colorPicker" initialValue="#ff0000" />
-      <Text testId="colorPickerValue" value="{colorPicker.value}" />
-    </Fragment>
-  `);
-    yield (0, fixtures_1.expect)(page.getByTestId("colorPickerValue")).toHaveText("#ff0000");
-}));
-(0, fixtures_1.test)("component setValue API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    yield initTestBed(`
-    <Fragment>
-      <ColorPicker id="colorPicker" initialValue="#ff0000" />
-      <Button onClick="colorPicker.setValue('#00ff00')">Change Color</Button>
-    </Fragment>
-  `);
-    // Test setValue API
-    yield page.getByRole("button", { name: "Change Color" }).click();
-    const colorInput = page.locator("input[type='color']");
-    yield (0, fixtures_1.expect)(colorInput).toHaveValue("#00ff00");
-}));
-(0, fixtures_1.test)("component focus API works", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-    const { testStateDriver } = yield initTestBed(`
-    <Fragment>
-      <ColorPicker id="colorPicker" onGotFocus="testState = 'focused'" />
-      <Button onClick="colorPicker.focus()">Focus Color Picker</Button>
-    </Fragment>
-  `);
-    const button = page.getByRole("button", { name: "Focus Color Picker" });
-    // Focus the input
-    yield button.click();
-    // Verify the input is focused
-    yield (0, fixtures_1.expect)(page.locator("input[type='color']")).toBeFocused();
-    // Verify the focus event fired
-    yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
-}));
-// =============================================================================
-// 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(`<ColorPicker 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(`<ColorPicker 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(`<ColorPicker 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(`<ColorPicker width="50%" label="test" testId="test"/>`, {});
-    const input = page.getByTestId("test");
-    const { width } = yield input.boundingBox();
-    (0, fixtures_1.expect)(width).toBe(200);
-}));

package/dist/scripts/src/components/ColorPicker/ColorPickerNative.js

@@ -1,86 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("react");
-const constants_1 = require("../../components-core/constants");
-const misc_1 = require("../../components-core/utils/misc");
-const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const parts_1 = require("../../components-core/parts");
-exports.defaultProps = {
-    initialValue: "#000000",
-    value: "#000000",
-    enabled: true,
-    validationStatus: "none",
-};
-exports.ColorPicker = (0, react_2.forwardRef)((_a, forwardedRef) => {
-    var { id, style, className, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = exports.defaultProps.enabled, readOnly, value = exports.defaultProps.value, autoFocus, tabIndex = 0, required, validationStatus = exports.defaultProps.validationStatus, initialValue = exports.defaultProps.initialValue } = _a, rest = __rest(_a, ["id", "style", "className", "updateState", "onDidChange", "onFocus", "onBlur", "registerComponentApi", "enabled", "readOnly", "value", "autoFocus", "tabIndex", "required", "validationStatus", "initialValue"]);
-    const [isPending, startTransition] = (0, react_1.useTransition)();
-    const inputRef = (0, react_2.useRef)(null);
-    const composedRef = forwardedRef ? (0, react_compose_refs_1.composeRefs)(forwardedRef, inputRef) : inputRef;
-    const updateValue = (0, react_2.useCallback)((value) => {
-        updateState({ value });
-        onDidChange(value);
-    }, [onDidChange, updateState]);
-    const updateValueWithTransition = (0, react_2.useCallback)((value, immediate = false) => {
-        if (immediate) {
-            updateValue(value);
-        }
-        else {
-            startTransition(() => {
-                updateValue(value);
-            });
-        }
-    }, [updateValue, startTransition]);
-    const onInputChange = (0, react_2.useCallback)((event) => {
-        updateValueWithTransition(event.target.value);
-    }, [updateValueWithTransition]);
-    (0, react_1.useEffect)(() => {
-        updateState({ value: initialValue }, { initial: true });
-    }, [initialValue, updateState]);
-    // --- Manage obtaining and losing the focus
-    const handleOnFocus = (0, react_2.useCallback)(() => {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    }, [onFocus]);
-    const handleOnBlur = (0, react_2.useCallback)(() => {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    }, [onBlur]);
-    const focus = (0, react_2.useCallback)(() => {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    const setValue = (0, misc_1.useEvent)((newValue) => {
-        updateValueWithTransition(newValue, true); // Immediate update for programmatic changes
-    });
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            focus,
-            setValue,
-        });
-    }, [focus, registerComponentApi, setValue]);
-    { /* Produces a 7 character RGB color output in hex as a string type */ }
-    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, rest, { id: id, className: (0, classnames_1.default)(className, ColorPicker_module_scss_1.default.colorInput, {
-            [ColorPicker_module_scss_1.default.disabled]: !enabled,
-            [ColorPicker_module_scss_1.default.error]: validationStatus === "error",
-            [ColorPicker_module_scss_1.default.warning]: validationStatus === "warning",
-            [ColorPicker_module_scss_1.default.valid]: validationStatus === "valid",
-        }), "data-part-id": parts_1.PART_INPUT, style: style, disabled: !enabled, onFocus: handleOnFocus, onChange: onInputChange, readOnly: readOnly, autoFocus: autoFocus, tabIndex: tabIndex, onBlur: handleOnBlur, required: required, type: "color", inputMode: "text", ref: composedRef, value: value })));
-});
-exports.ColorPicker.displayName = "ColorPicker";

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

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.columnComponentRenderer = exports.ColumnMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const ColumnNative_1 = require("./ColumnNative");
-const COMP = "Column";
-exports.ColumnMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Column` defines the structure and behavior of individual table columns " +
-        "within a [`Table`](/components/Table) component. Each Column controls data " +
-        "binding, header display, sorting capabilities, sizing, and can contain any " +
-        "XMLUI components for rich cell content.",
-    props: {
-        bindTo: {
-            description: "Indicates the name of the current row item's property, the value of which to " +
-                "lay out in the column. If this property is not defined, the column is not sortable.",
-            valueType: "string",
-        },
-        header: {
-            description: "This property defines a label for a particular column. If not set, the " +
-                "`bindTo` property value is used for the label.",
-            valueType: "string",
-        },
-        width: {
-            description: "This property defines the width of the column. You can use a numeric value, a pixel " +
-                "value (such as \`100px\`), or a star size value (such as \`*\`, \`2*\`, etc.). " +
-                "You will get an error if you use any other unit (or value)." +
-                "If not defined, the component will use a width according to the column values and " +
-                "the available space.",
-            valueType: "any",
-        },
-        minWidth: {
-            description: `Indicates the minimum width a particular column can have. Same rules apply as with [width](#width).`,
-            valueType: "any",
-        },
-        maxWidth: {
-            description: `Indicates the maximum width a particular column can have. Same rules apply as with [width](#width).`,
-            valueType: "any",
-        },
-        canSort: {
-            description: "This property sets whether the user can sort by a column by clicking on its header " +
-                "(\`true\`) or not (\`false\`). If the `bindTo` property is not defined, the column is not sortable.",
-            defaultValue: ColumnNative_1.defaultProps.canSort,
-            valueType: "boolean",
-        },
-        pinTo: {
-            description: `This property allows the column to be pinned to ` +
-                `the \`left\` (left-to-right writing style) or \`right\` (left-to-right writing style) edge ` +
-                "of the table. If the writing style is right-to-left, the locations are switched. " +
-                "If this property is not set, the column is not pinned to any edge.",
-            availableValues: ["left", "right"],
-            valueType: "string",
-        },
-        canResize: {
-            description: `This property indicates whether the user can resize the column. If set to ` +
-                `\`true\`, the column can be resized by dragging the column border. If set to ` +
-                `\`false\`, the column cannot be resized. Double-clicking the column border ` +
-                `resets to the original size.`,
-            valueType: "boolean",
-            defaultValue: ColumnNative_1.defaultProps.canResize,
-        },
-    },
-    contextVars: {
-        $item: {
-            description: "The complete data row object being rendered",
-        },
-        $cell: {
-            description: "The specific cell value for this column",
-        },
-        $itemIndex: {
-            description: "Zero-based row index",
-        },
-        $colIndex: {
-            description: "Zero-based column index",
-        },
-        $row: {
-            description: "The complete data row object being rendered (the same as \`$item\`).",
-        },
-        $rowIndex: {
-            description: "Zero-based row index (the same as \`$itemIndex\`).",
-        },
-    },
-});
-exports.columnComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ColumnMd, (rendererContext) => {
-    const { node, renderChild, extractValue, className } = rendererContext;
-    return ((0, jsx_runtime_1.jsx)(ColumnNative_1.Column, { className: className, header: extractValue.asDisplayText(node.props.header), accessorKey: extractValue.asOptionalString(node.props.bindTo), canSort: extractValue.asOptionalBoolean(node.props.canSort, true), canResize: extractValue.asOptionalBoolean(node.props.canResize), pinTo: extractValue.asOptionalString(node.props.pinTo), width: extractValue(node.props.width), minWidth: extractValue(node.props.minWidth), maxWidth: extractValue(node.props.maxWidth), nodeChildren: node.children, renderChild: renderChild, id: node.uid }));
-});

package/dist/scripts/src/components/Column/ColumnNative.js

@@ -1,49 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultProps = void 0;
-exports.Column = Column;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const container_helpers_1 = require("../../components/container-helpers");
-const TableContext_1 = require("./TableContext");
-exports.defaultProps = {
-    canSort: true,
-    canResize: true,
-};
-function Column(_a) {
-    var { nodeChildren, renderChild } = _a, columnMetadata = __rest(_a, ["nodeChildren", "renderChild"]);
-    const id = (0, react_1.useId)();
-    const { registerColumn, unRegisterColumn } = (0, TableContext_1.useTableContext)();
-    const cellRenderer = (0, react_1.useCallback)((row, rowIndex, colIndex, value) => {
-        return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: nodeChildren, item: row, contextVars: {
-                $rowIndex: rowIndex,
-                $colIndex: colIndex,
-                $row: row,
-                $itemIndex: rowIndex,
-                $cell: value,
-            }, renderChild: renderChild }));
-    }, [nodeChildren, renderChild]);
-    const safeCellRenderer = (0, react_1.useMemo)(() => {
-        return nodeChildren ? cellRenderer : undefined;
-    }, [cellRenderer, nodeChildren]);
-    (0, react_1.useLayoutEffect)(() => {
-        registerColumn(Object.assign(Object.assign({}, columnMetadata), { cellRenderer: safeCellRenderer }), id);
-    }, [columnMetadata, id, registerColumn, safeCellRenderer]);
-    (0, react_1.useLayoutEffect)(() => {
-        return () => {
-            unRegisterColumn(id);
-        };
-    }, [id, unRegisterColumn]);
-    return null;
-}

package/dist/scripts/src/components/Column/TableContext.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableContext = void 0;
-exports.useTableContext = useTableContext;
-const react_1 = require("react");
-exports.TableContext = (0, react_1.createContext)({
-    registerColumn: (col, id) => { },
-    unRegisterColumn: (id) => { },
-});
-function useTableContext() {
-    return (0, react_1.useContext)(exports.TableContext);
-}