xmlui 0.11.3 → 0.11.6

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

@@ -1,527 +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
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders with valid icon name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="home"/>`);
-        const icon = page.getByTestId("test-id-component");
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component does not render without name prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon/>`);
-        const icon = page.getByTestId("test-id-component");
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0); // Icon doesn't render without a valid name
-    }));
-});
-// =============================================================================
-// NAME PROPERTY TESTS
-// =============================================================================
-fixtures_1.test.describe("name Property", () => {
-    (0, fixtures_1.test)("displays icon when valid name is provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="home"/>`);
-        const icon = page.getByTestId("test-id-component");
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles non-existent icon name gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="non-existent-icon"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render when icon name doesn't exist
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles empty string name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name=""/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render with empty string name
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles null name value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="{null}"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render with null name
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles undefined name value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="{undefined}"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render with undefined name
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles special characters in name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="test-icon_with$pecial@chars"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render with non-existent special character name
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles unicode characters in name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="测试图标"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render with non-existent unicode name
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles emoji in name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="🏠"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render with non-existent emoji name
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles component-specific icon name syntax", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="component:specific-icon"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render with non-existent component-specific name
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles very long icon name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const longName = "a".repeat(1000);
-        yield initTestBed(`<Icon name="${longName}"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Component doesn't render with non-existent long name
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-});
-// =============================================================================
-// SIZE PROPERTY TESTS
-// =============================================================================
-fixtures_1.test.describe("size Property", () => {
-    (0, fixtures_1.test)("renders with predefined size 'xs'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="xs"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        // Check computed width/height using CSS
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("12px"); // 0.75em calculated
-    }));
-    (0, fixtures_1.test)("renders with predefined size 'sm'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="sm"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("16px"); // 1em calculated
-    }));
-    (0, fixtures_1.test)("renders with predefined size 'md'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="md"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("24px"); // 1.5rem calculated
-    }));
-    (0, fixtures_1.test)("renders with predefined size 'lg'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="lg"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("32px"); // 2em calculated
-    }));
-    (0, fixtures_1.test)("renders with custom pixel size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="48px"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("48px");
-    }));
-    (0, fixtures_1.test)("renders with custom em size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="3em"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("48px"); // 3em calculated at 16px base
-    }));
-    (0, fixtures_1.test)("renders with custom rem size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="2rem"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("32px"); // 2rem calculated
-    }));
-    (0, fixtures_1.test)("handles invalid size gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="invalid-size"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles negative size value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="-20px"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        // With negative size, element exists but browser normalizes to 0px
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(1);
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        // Browser normalizes negative values to 0px
-        (0, fixtures_1.expect)(computedStyle.width).toBe("0px");
-    }));
-    (0, fixtures_1.test)("handles zero size value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="0px"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        // Zero-size elements might not be "visible" but should exist
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(1);
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("0px");
-    }));
-    (0, fixtures_1.test)("handles null size value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="{null}"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles undefined size value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="{undefined}"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-});
-// =============================================================================
-// FALLBACK PROPERTY TESTS
-// =============================================================================
-fixtures_1.test.describe("fallback Property", () => {
-    (0, fixtures_1.test)("displays fallback icon when primary icon doesn't exist", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="non-existent-icon" fallback="trash"/>`);
-        const icon = page.getByTestId("test-id-component");
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("ignores fallback when primary icon exists", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="home" fallback="trash"/>`);
-        const icon = page.getByTestId("test-id-component");
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles empty string fallback", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="non-existent-icon" fallback=""/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Empty fallback means no icon renders
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles null fallback value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="non-existent-icon" fallback="{null}"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Null fallback means no icon renders
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles undefined fallback value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="non-existent-icon" fallback="{undefined}"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Undefined fallback means no icon renders
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles special characters in fallback", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="non-existent-icon" fallback="test-icon_with$pecial@chars"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Non-existent fallback means no icon renders
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-    (0, fixtures_1.test)("handles non-existent fallback icon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Icon name="non-existent-icon" fallback="also-non-existent"/>`);
-        const icon = page.getByTestId("test-id-component");
-        // Non-existent fallback means no icon renders
-        const exists = yield icon.count();
-        (0, fixtures_1.expect)(exists).toBe(0);
-    }));
-});
-// =============================================================================
-// CLICK EVENT TESTS
-// =============================================================================
-fixtures_1.test.describe("click Event", () => {
-    (0, fixtures_1.test)("fires click event when icon is clicked", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Icon testId="icon" name="home" onClick="testState = 'clicked'"/>
-    `);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield icon.click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("clicked");
-    }));
-    (0, fixtures_1.test)("applies clickable cursor when click handler is present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver, }) {
-        yield initTestBed(`<Icon testId="icon" name="home" onClick="testState = 'clicked'"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toHaveCSS("cursor", "pointer");
-    }));
-    (0, fixtures_1.test)("does not apply clickable cursor when no click handler", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        const cursor = yield icon.evaluate((el) => window.getComputedStyle(el).cursor);
-        (0, fixtures_1.expect)(cursor).not.toBe("pointer");
-    }));
-    (0, fixtures_1.test)("click event provides event object", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Icon testId="icon" name="home" onClick="event => testState = event.type"/>
-    `);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield icon.click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("click");
-    }));
-    (0, fixtures_1.test)("multiple clicks increment counter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Icon testId="icon" name="home" onClick="testState = (testState || 0) + 1"/>
-    `);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield icon.click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(1);
-        yield icon.click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(2);
-        yield icon.click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(3);
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("icon renders as inline element by default", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home"/>`);
-        const icon = yield createIconDriver("icon");
-        const display = yield icon.svgIcon.evaluate((el) => window.getComputedStyle(el).display);
-        (0, fixtures_1.expect)(display).toBe("inline-block");
-    }));
-    (0, fixtures_1.test)("icon has correct vertical alignment", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home"/>`);
-        const icon = yield createIconDriver("icon");
-        yield (0, fixtures_1.expect)(icon.svgIcon).toHaveCSS("vertical-align", "text-bottom");
-    }));
-    (0, fixtures_1.test)("icon inherits color from parent", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`
-      <Text color="red">
-        <Icon testId="icon" name="home"/>
-      </Text>
-    `);
-        const icon = yield createIconDriver("icon");
-        const color = yield icon.svgIcon.evaluate((el) => window.getComputedStyle(el).color);
-        // Should inherit red color or have some computed red value
-        (0, fixtures_1.expect)(color).not.toBe(""); // Should have some color value
-    }));
-    (0, fixtures_1.test)("icon is clickable when click handler is present", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Icon testId="icon" name="home" onClick="testState = 'activated'"/>
-    `);
-        const icon = yield createIconDriver("icon");
-        yield icon.click();
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("activated");
-    }));
-    (0, fixtures_1.test)("icon can receive focus via tabIndex when clickable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" onClick="testState = 'clicked'" />`);
-        const icon = (yield createIconDriver("icon")).svgIcon;
-        // For SVG elements, we test focus capability by checking if it can be found after focus
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        yield icon.focus();
-        yield (0, fixtures_1.expect)(icon).toBeFocused();
-    }));
-    (0, fixtures_1.test)("icon supports keyboard activation with Enter", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        const testBed = yield initTestBed(`<Icon testId="icon" name="home" onClick="testState = 'clicked';" />`);
-        const { testStateDriver } = testBed;
-        const driver = yield createIconDriver("icon");
-        const icon = driver.svgIcon;
-        // For SVG elements, we test focus capability by checking if it can be found after focus
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        yield icon.press("Enter");
-        (0, fixtures_1.expect)(yield testStateDriver.testState()).toBe("clicked");
-    }));
-    (0, fixtures_1.test)("icon supports keyboard activation with Space", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        const testBed = yield initTestBed(`<Icon testId="icon" name="home" onClick="testState = 'clicked';" />`);
-        const { testStateDriver } = testBed;
-        const driver = yield createIconDriver("icon");
-        const icon = driver.svgIcon;
-        // For SVG elements, we test focus capability by checking if it can be found after focus
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        yield icon.press("Space");
-        (0, fixtures_1.expect)(yield testStateDriver.testState()).toBe("clicked");
-    }));
-});
-// =============================================================================
-// THEME VARIABLE TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies theme variable for size", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home"/>`, {
-            testThemeVars: {
-                "size-Icon": "3rem",
-            },
-        });
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("48px"); // 3rem calculated
-        (0, fixtures_1.expect)(computedStyle.height).toBe("48px");
-    }));
-    (0, fixtures_1.test)("size prop overrides theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="2rem"/>`, {
-            testThemeVars: {
-                "size-Icon": "4rem",
-            },
-        });
-        const icon = yield createIconDriver("icon");
-        const computedStyle = yield icon.svgIcon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("32px"); // 2rem calculated, not 4rem from theme
-        (0, fixtures_1.expect)(computedStyle.height).toBe("32px");
-    }));
-    (0, fixtures_1.test)("applies theme variable with custom CSS variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home"/>`, {
-            testThemeVars: {
-                "size-Icon": "var(--custom-icon-size, 40px)",
-            },
-        });
-        const icon = yield createIconDriver("icon");
-        const computedStyle = yield icon.svgIcon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("40px"); // Fallback value used
-        (0, fixtures_1.expect)(computedStyle.height).toBe("40px");
-    }));
-});
-// =============================================================================
-// OTHER EDGE CASE TESTS
-// =============================================================================
-fixtures_1.test.describe("Other Edge Cases", () => {
-    (0, fixtures_1.test)("handles null and undefined props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home"/>`);
-        const icon = yield createIconDriver("icon");
-        yield (0, fixtures_1.expect)(icon.svgIcon).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles component with all invalid props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" invalidProp="invalid" anotherInvalid="{123}"/>`);
-        // Component with invalid props may not be visible, but should not crash
-        const icon = yield createIconDriver("icon");
-        const isVisible = yield icon.svgIcon.isVisible();
-        // Either it's visible with fallback behavior or gracefully hidden
-        if (isVisible) {
-            // If visible, it should have fallback behavior
-            yield (0, fixtures_1.expect)(icon.svgIcon).toBeVisible();
-        }
-        else {
-            // It's acceptable for component to be hidden with invalid props
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-    }));
-    (0, fixtures_1.test)("handles mixed valid and invalid props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" invalidProp="invalid" size="lg"/>`);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        yield (0, fixtures_1.expect)(icon).toBeVisible();
-        // Valid props should still work
-        const computedStyle = yield icon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("32px"); // lg size should apply
-    }));
-    (0, fixtures_1.test)("handles object value for name prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="{{}}" />`);
-        const icon = yield createIconDriver("icon");
-        const isVisible = yield icon.svgIcon.isVisible();
-        if (isVisible) {
-            yield (0, fixtures_1.expect)(icon.svgIcon).toBeVisible();
-        }
-        else {
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-    }));
-    (0, fixtures_1.test)("handles array value for size prop", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="{[]}" />`);
-        const icon = yield createIconDriver("icon");
-        const isVisible = yield icon.svgIcon.isVisible();
-        if (isVisible) {
-            yield (0, fixtures_1.expect)(icon.svgIcon).toBeVisible();
-        }
-        else {
-            (0, fixtures_1.expect)(isVisible).toBe(false);
-        }
-    }));
-    (0, fixtures_1.test)("handles very long Unicode string in fallback", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        const longUnicodeString = "👨‍👩‍👧‍👦".repeat(100);
-        yield initTestBed(`<Icon testId="icon" name="home" fallback="${longUnicodeString}"/>`);
-        const icon = yield createIconDriver("icon");
-        yield (0, fixtures_1.expect)(icon.svgIcon).toBeVisible(); // Icon renders with valid primary name, fallback ignored
-    }));
-    (0, fixtures_1.test)("handles concurrent property changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        yield initTestBed(`<Icon testId="icon" name="home" size="sm"/>`);
-        const icon = yield createIconDriver("icon");
-        yield (0, fixtures_1.expect)(icon.svgIcon).toBeVisible();
-        // Test that initial state is correct
-        let computedStyle = yield icon.svgIcon.evaluate((el) => {
-            const style = window.getComputedStyle(el);
-            return { width: style.width, height: style.height };
-        });
-        (0, fixtures_1.expect)(computedStyle.width).toBe("16px"); // sm size
-    }));
-    (0, fixtures_1.test)("handles rapid sequential clicks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createIconDriver }) {
-        const { testStateDriver } = yield initTestBed(`
-      <Icon testId="icon" name="home" onClick="testState = (testState || 0) + 1"/>
-    `);
-        const iconDrv = yield createIconDriver("icon");
-        const icon = iconDrv.svgIcon;
-        // Rapid sequential clicks
-        yield Promise.all([icon.click(), icon.click(), icon.click(), icon.click(), icon.click()]);
-        // Should eventually reach 5 (all clicks processed)
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(5);
-    }));
-});

package/dist/scripts/src/components/Icon/IconNative.js

@@ -1,127 +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.Icon = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Icon_module_scss_1 = __importDefault(require("./Icon.module.scss"));
-const IconRegistryContext_1 = require("../IconRegistryContext");
-const classnames_1 = __importDefault(require("classnames"));
-const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
-    var _b;
-    var { name, fallback, style, className, size, onClick, tabIndex, onKeyDown } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size", "onClick", "tabIndex", "onKeyDown"]);
-    const { iconRenderer, iconName } = useFindIconRenderer(name, fallback);
-    // Handle keyboard events for clickable icons
-    const handleKeyDown = (event) => {
-        if (onClick && (event.key === "Enter" || event.key === " ")) {
-            event.preventDefault();
-            onClick(event);
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    };
-    const computedSize = typeof size === "string" ? mapSizeToIconPack(size) : size;
-    const width = computedSize || restProps.width;
-    const height = computedSize || restProps.height;
-    const computedProps = Object.assign(Object.assign({ 
-        // className is needed to apply a default color to the icon, thus other component classes can override this one
-        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className, { [Icon_module_scss_1.default.clickable]: !!onClick }) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }), "data-icon-name": iconName, onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex });
-    // ---
-    const customIconUrl = useCustomIconUrl(name);
-    if (customIconUrl) {
-        return (0, jsx_runtime_1.jsx)(CustomIcon, Object.assign({}, computedProps, { url: customIconUrl, name: name, ref: ref }));
-    }
-    const renderedIcon = (_b = iconRenderer === null || iconRenderer === void 0 ? void 0 : iconRenderer.renderer) === null || _b === void 0 ? void 0 : _b.call(iconRenderer, computedProps, ref);
-    if (!renderedIcon) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "inline-block" }, children: renderedIcon }));
-});
-const CustomIcon = (0, react_1.forwardRef)(function CustomIcon(props, ref) {
-    var _a;
-    const { url, width, height, name, style, className, onClick, onKeyDown, tabIndex } = props, rest = __rest(props, ["url", "width", "height", "name", "style", "className", "onClick", "onKeyDown", "tabIndex"]);
-    // Handle keyboard events for clickable icons
-    const handleKeyDown = (event) => {
-        if (onClick && (event.key === "Enter" || event.key === " ")) {
-            event.preventDefault();
-            onClick(event);
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    };
-    const resourceUrl = (0, ThemeContext_1.useResourceUrl)(url);
-    const isSvgIcon = (_a = resourceUrl === null || resourceUrl === void 0 ? void 0 : resourceUrl.toLowerCase()) === null || _a === void 0 ? void 0 : _a.endsWith(".svg");
-    const customSvgIconRenderer = (0, IconRegistryContext_1.useCustomSvgIconRenderer)(resourceUrl);
-    if (resourceUrl && isSvgIcon) {
-        const renderedIcon = customSvgIconRenderer === null || customSvgIconRenderer === void 0 ? void 0 : customSvgIconRenderer(Object.assign({ style,
-            className,
-            onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex, "data-icon-name": name }, rest));
-        if (!renderedIcon) {
-            //to prevent layout shift
-            return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, rest, { "data-icon-name": name, ref: ref, style: style, className: className, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex })));
-        }
-        return renderedIcon;
-    }
-    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: ref, src: resourceUrl, "data-icon-name": name, style: Object.assign({ width, height }, style), alt: name, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex }, rest)));
-});
-function useCustomIconUrl(iconName) {
-    const { getResourceUrl } = (0, ThemeContext_1.useTheme)();
-    if (!iconName) {
-        return iconName;
-    }
-    return getResourceUrl(`resource:icon.${iconName}`);
-}
-function mapSizeToIconPack(size) {
-    if (/^\$[a-zA-Z0-9_$-]+$/g.test(size)) {
-        return (0, StyleParser_1.toCssVar)(size);
-    }
-    return ({
-        xs: "0.75em",
-        sm: "1em",
-        md: "1.5rem",
-        lg: "2em",
-    }[size] || size);
-}
-function useFindIconRenderer(name, fallback) {
-    const iconRegistry = (0, IconRegistryContext_1.useIconRegistry)();
-    if (name && typeof name === "string") {
-        const separator = ":";
-        const parts = name.split(separator);
-        // Component specific icon
-        if (parts.length > 1) {
-            const iconRenderer = iconRegistry.lookupIconRenderer(`${parts[0].toLowerCase()}${separator}${parts[1]}`);
-            if (iconRenderer) {
-                return { iconRenderer, iconName: name };
-            }
-        }
-        // General icon
-        if (parts.length === 1) {
-            const iconRenderer = iconRegistry.lookupIconRenderer(parts[0]);
-            if (iconRenderer) {
-                return { iconRenderer, iconName: name };
-            }
-        }
-    }
-    if (fallback && typeof fallback === "string") {
-        const iconRenderer = iconRegistry.lookupIconRenderer(fallback.toLowerCase());
-        if (iconRenderer) {
-            return { iconRenderer, iconName: fallback };
-        }
-    }
-    return { iconRenderer: null, iconName: null };
-}
-exports.default = exports.Icon;