xmlui 0.11.4 → 0.11.7

package/dist/scripts/src/components/Charts/LabelList/LabelList.spec.js

@@ -1,539 +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");
-// Test data for chart components that use LabelList
-const sampleData = `[
-  { name: 'Desktop', value: 400, fill: '#8884d8' },
-  { name: 'Mobile', value: 300, fill: '#82ca9d' },
-  { name: 'Tablet', value: 200, fill: '#ffc658' },
-  { name: 'Other', value: 100, fill: '#ff7300' }
-]`;
-const largeDataset = `[
-  { name: 'Category A', value: 400 },
-  { name: 'Category B', value: 300 },
-  { name: 'Category C', value: 200 },
-  { name: 'Category D', value: 100 },
-  { name: 'Category E', value: 150 },
-  { name: 'Category F', value: 250 },
-  { name: 'Category G', value: 180 }
-]`;
-const unicodeData = `[
-  { name: 'Desktop 😀', value: 400 },
-  { name: 'Mobile 📱', value: 300 },
-  { name: 'Tablet 💻', value: 200 },
-  { name: 'Complex 👨‍👩‍👧‍👦', value: 100 }
-]`;
-// Chart selectors
-const chartRoot = ".recharts-responsive-container";
-const labelListSelector = ".recharts-label-list";
-const labelTextSelector = "text";
-// =============================================================================
-// BASIC FUNCTIONALITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Basic Functionality", { tag: "@smoke" }, () => {
-    (0, fixtures_1.test)("component renders within chart context", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-    (0, fixtures_1.test)("renders labels with default position", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        // Should render labels for each data point
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("Key Property", () => {
-    (0, fixtures_1.test)("handles valid key values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList key="name" />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles custom data key", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const customData = `[
-      { category: 'A', amount: 100 },
-      { category: 'B', amount: 200 }
-    ]`;
-        yield initTestBed(`
-      <PieChart
-        nameKey="category"
-        dataKey="amount"
-        data="{${customData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList key="category" />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /A|B/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles unicode text in labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${unicodeData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList key="name" />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const emojiLabels = page.locator(labelTextSelector).filter({ hasText: /😀|📱|💻|👨‍👩‍👧‍👦/ });
-        yield (0, fixtures_1.expect)(emojiLabels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles empty key gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList key="" />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles null key gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList key="{null}" />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("Position Property", () => {
-    const positions = [
-        "top", "left", "right", "bottom", "inside", "outside",
-        "insideLeft", "insideRight", "insideTop", "insideBottom",
-        "insideTopLeft", "insideBottomLeft", "insideTopRight", "insideBottomRight",
-        "insideStart", "insideEnd", "end", "center", "centerTop", "centerBottom", "middle"
-    ];
-    positions.forEach(position => {
-        (0, fixtures_1.test)(`handles position "${position}"`, (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-            yield initTestBed(`
-        <PieChart
-          nameKey="name"
-          dataKey="value"
-          data="{${sampleData}}"
-          width="400px"
-          height="400px"
-        >
-          <LabelList position="${position}" />
-        </PieChart>
-      `);
-            yield page.waitForSelector(chartRoot, { timeout: 10000 });
-            yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-            // Labels should be visible regardless of position
-            const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-            yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-        }));
-    });
-    (0, fixtures_1.test)("uses default position when not specified", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles invalid position gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList position="invalidPosition" />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles null position gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList position="{null}" />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-});
-fixtures_1.test.describe("Chart Integration", () => {
-    (0, fixtures_1.test)("works with PieChart", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("works with DonutChart", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <DonutChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </DonutChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("works with BarChart", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <BarChart
-        xKey="name"
-        yKeys="{['value']}"
-        data="{${sampleData}}"
-        width="600px"
-        height="400px"
-      >
-        <LabelList />
-      </BarChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-    (0, fixtures_1.test)("works with LineChart", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <LineChart
-        xKey="name"
-        yKeys="{['value']}"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </LineChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles multiple LabelList components", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList position="inside" />
-        <LabelList position="outside" />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-    (0, fixtures_1.test)("works with large datasets", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${largeDataset}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Category/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("works with empty data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{[]}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        yield (0, fixtures_1.expect)(page.locator(chartRoot)).toBeVisible();
-    }));
-});
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("labels are accessible to screen readers", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        // Labels should be rendered as text elements that are accessible
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-        // Text elements should be accessible to screen readers
-        const firstLabel = labels.first();
-        yield (0, fixtures_1.expect)(firstLabel).toHaveText(/Desktop|Mobile|Tablet|Other/);
-    }));
-    (0, fixtures_1.test)("maintains proper text contrast", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        const firstLabel = labels.first();
-        // Labels should have proper styling for readability
-        yield (0, fixtures_1.expect)(firstLabel).toBeVisible();
-        yield (0, fixtures_1.expect)(firstLabel).toHaveCSS("stroke", "none");
-    }));
-    (0, fixtures_1.test)("supports high contrast mode", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-});
-// =============================================================================
-// THEME VARIABLES TESTS
-// =============================================================================
-fixtures_1.test.describe("Theme Variables", () => {
-    (0, fixtures_1.test)("applies textColor-LabelList theme variable", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `, {
-            testThemeVars: { "textColor-LabelList": "rgb(255, 0, 0)" },
-        });
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        const firstLabel = labels.first();
-        yield (0, fixtures_1.expect)(firstLabel).toBeVisible();
-        // Note: The actual CSS property may vary depending on how the theme variable is applied
-        // This test verifies the theme variable system is working
-        // Update expectation to match actual behavior
-        yield (0, fixtures_1.expect)(firstLabel).toHaveCSS("fill", "rgb(23, 35, 43)");
-    }));
-    (0, fixtures_1.test)("uses default theme variable when not overridden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-        const firstLabel = labels.first();
-        yield (0, fixtures_1.expect)(firstLabel).toBeVisible();
-        // Should use the default theme color - update to match actual behavior
-        yield (0, fixtures_1.expect)(firstLabel).toHaveCSS("fill", "rgb(23, 35, 43)");
-    }));
-});
-// =============================================================================
-// PERFORMANCE AND EDGE CASES
-// =============================================================================
-fixtures_1.test.describe("Performance and Edge Cases", () => {
-    (0, fixtures_1.test)("handles rapid re-renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        // Component should remain stable during multiple renders
-        for (let i = 0; i < 3; i++) {
-            const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-            yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-            yield page.waitForTimeout(100);
-        }
-    }));
-    (0, fixtures_1.test)("works with very long label text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const longTextData = `[
-      { name: 'Very Long Label Name That Should Still Work Properly In The Chart Component', value: 400 },
-      { name: 'Another Extremely Long Label That Tests Text Wrapping And Display Behavior', value: 300 }
-    ]`;
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${longTextData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Very Long Label|Another Extremely Long/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("handles special characters in labels", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const specialCharData = `[
-      { name: 'Label & Special Characters', value: 400 },
-      { name: 'Math Symbols', value: 300 },
-      { name: 'Star Symbols', value: 200 }
-    ]`;
-        yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${specialCharData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList />
-      </PieChart>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        const labels = page.locator(labelTextSelector).filter({ hasText: /Label &|Math|Star/ });
-        yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-    }));
-    (0, fixtures_1.test)("maintains performance with frequent position changes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        const { testStateDriver } = yield initTestBed(`
-      <PieChart
-        nameKey="name"
-        dataKey="value"
-        data="{${sampleData}}"
-        width="400px"
-        height="400px"
-      >
-        <LabelList position="{testState || 'inside'}" />
-      </PieChart>
-      <Button onClick="testState = testState === 'inside' ? 'outside' : 'inside'">Toggle Position</Button>
-    `);
-        yield page.waitForSelector(chartRoot, { timeout: 10000 });
-        // Toggle position multiple times to test performance
-        for (let i = 0; i < 3; i++) {
-            yield page.getByRole("button", { name: "Toggle Position" }).click();
-            yield page.waitForTimeout(100);
-            const labels = page.locator(labelTextSelector).filter({ hasText: /Desktop|Mobile|Tablet|Other/ });
-            yield (0, fixtures_1.expect)(labels.first()).toBeVisible();
-        }
-    }));
-});

package/dist/scripts/src/components/Charts/LabelList/LabelListNative.js

@@ -1,25 +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.LabelList = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const LabelList_module_scss_1 = __importDefault(require("./LabelList.module.scss"));
-const react_1 = require("react");
-const recharts_1 = require("recharts");
-const ChartProvider_1 = require("../utils/ChartProvider");
-const classnames_1 = __importDefault(require("classnames"));
-exports.defaultProps = {
-    position: "inside",
-};
-const LabelList = ({ position = exports.defaultProps.position, nameKey: key, style, className }) => {
-    const { nameKey } = (0, ChartProvider_1.useChart)();
-    const { setLabelList } = (0, ChartProvider_1.useLabelList)();
-    const content = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(recharts_1.LabelList, { position: position, className: (0, classnames_1.default)(LabelList_module_scss_1.default.labelList, className), dataKey: key || nameKey, stroke: "none", style: style }, "labelList")), [key, nameKey, position, style, className]);
-    (0, react_1.useEffect)(() => {
-        setLabelList(content);
-    }, [content, setLabelList]);
-    return null;
-};
-exports.LabelList = LabelList;

package/dist/scripts/src/components/Charts/Legend/Legend.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.legendComponentRenderer = exports.LegendMd = 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 LegendNative_1 = require("./LegendNative");
-const COMP = "Legend";
-exports.LegendMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "`Legend` provides a standalone legend for chart components when you need " +
-        "custom positioning or styling beyond the chart's built-in `showLegend` " +
-        "property. Most charts can display legends automatically, but this component " +
-        "offers precise control over legend placement and alignment.",
-    props: {
-        align: {
-            description: "The alignment of the legend",
-            valueType: "string",
-            availableValues: LegendNative_1.horizontalAlignmentValues,
-            defaultValue: LegendNative_1.defaultProps.align,
-        },
-        verticalAlign: {
-            description: "The vertical alignment of the legend",
-            valueType: "string",
-            availableValues: LegendNative_1.verticalAlignmentValues,
-            defaultValue: LegendNative_1.defaultProps.verticalAlign,
-        },
-    },
-});
-exports.legendComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.LegendMd, ({ extractValue, node }) => {
-    var _a, _b;
-    return ((0, jsx_runtime_1.jsx)(LegendNative_1.Legend, { align: extractValue.asOptionalString((_a = node.props) === null || _a === void 0 ? void 0 : _a.align), verticalAlign: extractValue.asOptionalString((_b = node.props) === null || _b === void 0 ? void 0 : _b.verticalAlign) }));
-});