xmlui 0.11.4 → 0.11.7

package/dist/scripts/src/components/Avatar/AvatarNative.js

@@ -1,58 +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.Avatar = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const Avatar_module_scss_1 = __importDefault(require("./Avatar.module.scss"));
-exports.defaultProps = {
-    size: "sm",
-};
-exports.Avatar = (0, react_1.memo)((0, react_1.forwardRef)(function Avatar(_a, ref) {
-    var { size = exports.defaultProps.size, url, name, style, className, onClick } = _a, rest = __rest(_a, ["size", "url", "name", "style", "className", "onClick"]);
-    // Memoize the abbreviated name calculation to avoid recalculation on every render
-    const abbreviatedName = (0, react_1.useMemo)(() => abbrevName(name !== null && name !== void 0 ? name : null), [name]);
-    // Handle keyboard events for accessibility
-    const handleKeyDown = (event) => {
-        if (onClick && (event.key === 'Enter' || event.key === ' ')) {
-            event.preventDefault();
-            onClick(event);
-        }
-    };
-    // Simplified className generation by directly mapping size to styles
-    const commonClassNames = (0, classnames_1.default)(className, Avatar_module_scss_1.default.container, Avatar_module_scss_1.default[size] || Avatar_module_scss_1.default.sm, // Fallback to sm if size not found
-    { [Avatar_module_scss_1.default.clickable]: !!onClick });
-    const altTxt = !!name ? `Avatar of ${name}` : "Avatar";
-    if (url) {
-        return ((0, jsx_runtime_1.jsx)("img", Object.assign({}, rest, { ref: ref, src: url, alt: altTxt, className: commonClassNames, style: style, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? 0 : undefined })));
-    }
-    else
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { ref: ref, className: commonClassNames, style: style, onClick: onClick, onKeyDown: handleKeyDown, role: "img", "aria-label": altTxt, tabIndex: onClick ? 0 : undefined, children: abbreviatedName || (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true" }) })));
-}));
-function abbrevName(name) {
-    if (!!name) {
-        const abbrev = name
-            .trim()
-            .split(" ")
-            .filter((word) => !!word.trim().length)
-            .map((word) => word[0].toUpperCase())
-            .slice(0, 3)
-            .join("");
-        return abbrev;
-    }
-    return null;
-}

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

@@ -1,40 +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.backdropComponentRenderer = exports.BackdropMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Backdrop_module_scss_1 = __importDefault(require("./Backdrop.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../../components/metadata-helpers");
-const BackdropNative_1 = require("./BackdropNative");
-const COMP = "Backdrop";
-// See reference implementation here: https://getbootstrap.com/docs/5.3/components/alerts/
-exports.BackdropMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: `The \`${COMP}\` component is a semi-transparent overlay that appears on ` +
-        `top of its child component to obscure or highlight the content behind it.`,
-    props: {
-        overlayTemplate: (0, metadata_helpers_1.dComponent)("This property defines the component template for an optional overlay to display " +
-            "over the component."),
-        backgroundColor: {
-            description: "The background color of the backdrop.",
-            valueType: "string",
-        },
-        opacity: {
-            description: "The opacity of the backdrop.",
-            valueType: "string",
-        },
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(Backdrop_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`backgroundColor-${COMP}`]: "black",
-        [`opacity-${COMP}`]: "0.1",
-    }
-});
-exports.backdropComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BackdropMd, ({ node, extractValue, renderChild, className }) => {
-    var _a;
-    return ((0, jsx_runtime_1.jsx)(BackdropNative_1.Backdrop, { className: className, overlayTemplate: renderChild((_a = node.props) === null || _a === void 0 ? void 0 : _a.overlayTemplate), backgroundColor: extractValue.asOptionalString(node.props.backgroundColor, undefined), opacity: extractValue.asOptionalString(node.props.opacity, undefined), children: renderChild(node.children) }));
-});

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

@@ -1,131 +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 props", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver }) {
-    // TODO: review these Copilot-created tests
-    yield initTestBed(`<Backdrop>Content</Backdrop>`, {});
-    const backdropDriver = yield createBackdropDriver();
-    const backdropElement = backdropDriver.getBackdrop();
-    yield (0, fixtures_1.expect)(backdropElement).toBeVisible();
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", backdropDriver.getDefaultBackgroundColor());
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", backdropDriver.getDefaultOpacity());
-    yield (0, fixtures_1.expect)(backdropDriver.component).toHaveText("Content");
-}));
-(0, fixtures_1.test)("component renders with custom background color", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
-    const EXPECTED_COLOR = "rgb(255, 0, 0)"; // Red color
-    yield initTestBed(`<Backdrop backgroundColor="${EXPECTED_COLOR}">Content</Backdrop>`, {});
-    const backdropDriver = yield createBackdropDriver();
-    const backdropElement = backdropDriver.getBackdrop();
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", EXPECTED_COLOR);
-}));
-(0, fixtures_1.test)("component renders with custom opacity", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver }) {
-    const EXPECTED_OPACITY = "0.5";
-    yield initTestBed(`<Backdrop opacity="${EXPECTED_OPACITY}">Content</Backdrop>`, {});
-    const backdropDriver = yield createBackdropDriver();
-    const backdropElement = backdropDriver.getBackdrop();
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", EXPECTED_OPACITY);
-}));
-(0, fixtures_1.test)("component renders with overlay template", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver }) {
-    yield initTestBed(`
-    <Backdrop>
-      <property name="overlayTemplate">
-        <H1>Overlay</H1>
-      </property>
-      Content
-    </Backdrop>
-  `, {});
-    const backdropDriver = yield createBackdropDriver();
-    const backdropElement = backdropDriver.getBackdrop();
-    yield (0, fixtures_1.expect)(backdropElement).toBeVisible();
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", backdropDriver.getDefaultBackgroundColor());
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", backdropDriver.getDefaultOpacity());
-    yield (0, fixtures_1.expect)(backdropDriver.component).toContainText("Content");
-    yield (0, fixtures_1.expect)(backdropDriver.getOverlay()).toContainText("Overlay");
-}));
-// =============================================================================
-// ACCESSIBILITY TESTS
-// =============================================================================
-// TODO: Implement accessibility tests
-// =============================================================================
-// VISUAL STATE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles different background colors", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
-    yield initTestBed(`<Backdrop backgroundColor="blue">Content</Backdrop>`, {});
-    const EXPECTED_COLOR = "rgb(0, 0, 255)"; // Blue color
-    const backdropDriver = yield createBackdropDriver();
-    const backdropElement = backdropDriver.getBackdrop();
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", EXPECTED_COLOR);
-}));
-(0, fixtures_1.test)("component handles theme variables", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
-    yield initTestBed(`<Backdrop>Content</Backdrop>`, {
-        testThemeVars: {
-            "backgroundColor-Backdrop": "rgb(255, 0, 0)", // Red color
-            "opacity-Backdrop": "0.75",
-        },
-    });
-    const backdropDriver = yield createBackdropDriver();
-    const backdropElement = backdropDriver.getBackdrop();
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", "rgb(255, 0, 0)"); // Red color
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", "0.75");
-}));
-// =============================================================================
-// EDGE CASE TESTS
-// =============================================================================
-(0, fixtures_1.test)("component handles empty string props gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
-    yield initTestBed(`<Backdrop backgroundColor="">Content</Backdrop>`, {});
-    const backdropDriver = yield createBackdropDriver();
-    const backdropElement = backdropDriver.getBackdrop();
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("background-color", "rgb(0, 0, 0)"); // Default transparent color
-    yield (0, fixtures_1.expect)(backdropElement).toHaveCSS("opacity", "0.1");
-}));
-(0, fixtures_1.test)("component handles special characters in content correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
-    yield initTestBed(`<Backdrop>Content with special characters: !@#$%^&*()</Backdrop>`, {});
-    const backdropDriver = yield createBackdropDriver();
-    const backdropElement = backdropDriver.getBackdrop();
-    yield (0, fixtures_1.expect)(backdropElement).toBeVisible();
-    yield (0, fixtures_1.expect)(backdropDriver.component).toContainText("Content with special characters: !@#$%^&*()");
-}));
-// =============================================================================
-// INTEGRATION TESTS
-// =============================================================================
-(0, fixtures_1.test)("component works correctly with nested content", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver }) {
-    // TODO: review these Copilot-created tests
-    yield initTestBed(`
-    <Backdrop>
-      <VStack>
-        <Text>Line 1</Text>
-        <Text>Line 2</Text>
-      </VStack>
-    </Backdrop>
-  `, {});
-    const backdropDriver = yield createBackdropDriver();
-    // Test that nested content renders correctly
-    yield (0, fixtures_1.expect)(backdropDriver.component).toContainText("Line 1");
-    yield (0, fixtures_1.expect)(backdropDriver.component).toContainText("Line 2");
-    // Test that backdrop is rendered over the content
-    yield (0, fixtures_1.expect)(backdropDriver.getBackdrop()).toBeVisible();
-}));
-(0, fixtures_1.test)("component works correctly in different layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createBackdropDriver, }) {
-    yield initTestBed(`
-    <HStack>
-      <Text>Before</Text>
-      <Backdrop backgroundColor="blue" opacity="0.3">Backdrop Content</Backdrop>
-      <Text>After</Text>
-    </HStack>
-  `, {});
-    const backdropDriver = yield createBackdropDriver();
-    // Test that backdrop is rendered over the content
-    yield (0, fixtures_1.expect)(backdropDriver.getBackdrop()).toBeVisible();
-}));

package/dist/scripts/src/components/Backdrop/BackdropNative.js

@@ -1,25 +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.Backdrop = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Backdrop_module_scss_1 = __importDefault(require("./Backdrop.module.scss"));
-const classnames_1 = __importDefault(require("classnames"));
-exports.Backdrop = (0, react_1.forwardRef)(function Backdrop(_a, forwardedRef) {
-    var { style, className, children, overlayTemplate, backgroundColor, opacity } = _a, rest = __rest(_a, ["style", "className", "children", "overlayTemplate", "backgroundColor", "opacity"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { className: (0, classnames_1.default)(Backdrop_module_scss_1.default.backdropContainer, className), ref: forwardedRef, style: style, children: [children, (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.backdrop, style: { backgroundColor, opacity } }), overlayTemplate && (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.overlay, children: overlayTemplate })] })));
-});

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

@@ -1,81 +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.badgeComponentRenderer = exports.BadgeMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Badge_module_scss_1 = __importDefault(require("./Badge.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const BadgeNative_1 = require("./BadgeNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
-const COMP = "Badge";
-exports.BadgeMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Badge` displays small text labels with colored backgrounds, commonly used for " +
-        "status indicators, categories, tags, and counts. It supports dynamic color " +
-        "mapping based on content values, useful for status systems and data categorization.",
-    props: {
-        value: {
-            description: "The text that the component displays. If this is not defined, the component renders " +
-                "its children as the content of the badge. If neither text nor any child is defined, " +
-                "the component renders a single frame for the badge with a non-breakable space.",
-            type: "string",
-            isRequired: true,
-        },
-        variant: {
-            description: "Modifies the shape of the component. Comes in the regular \`badge\` variant or the \`pill\` variant " +
-                "with fully rounded corners.",
-            type: "string",
-            availableValues: BadgeNative_1.badgeVariantValues,
-            defaultValue: BadgeNative_1.defaultProps.variant,
-        },
-        colorMap: {
-            description: `The \`${COMP}\` component supports the mapping of a list of colors using the \`value\` prop as the ` +
-                `key. If this property is not set, no color mapping is used.`,
-        },
-        themeColor: (0, metadata_helpers_1.dInternal)(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
-        indicatorText: (0, metadata_helpers_1.dInternal)(`(**NOT IMPLEMENTED YET**) This property defines the text to display in the indicator. If it is not ` +
-            `defined or empty, no indicator is displayed unless the \`forceIndicator\` property is set.`),
-        forceIndicator: (0, metadata_helpers_1.dInternal)(`(**NOT IMPLEMENTED YET**) This property forces the display of the indicator, even if ` +
-            `the \`indicatorText\` property is not defined or empty.`),
-        indicatorThemeColor: (0, metadata_helpers_1.dInternal)(`(**NOT IMPLEMENTED YET**) The theme color of the indicator.`),
-        indicatorPosition: (0, metadata_helpers_1.dInternal)(`(**NOT IMPLEMENTED YET**) The position of the indicator.`),
-    },
-    events: {},
-    themeVars: (0, themeVars_1.parseScssVar)(Badge_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`padding-${COMP}`]: `$space-0_5 $space-2`,
-        [`border-${COMP}`]: `0px solid $borderColor`,
-        [`padding-${COMP}-pill`]: `$space-0_5 $space-2`,
-        [`borderRadius-${COMP}`]: "4px",
-        [`fontSize-${COMP}`]: "0.8em",
-        [`fontSize-${COMP}-pill`]: "0.8em",
-        [`backgroundColor-${COMP}`]: "rgb(from $color-secondary-500 r g b / 0.6)",
-        [`textColor-${COMP}`]: "$const-color-surface-0",
-    },
-});
-exports.badgeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BadgeMd, ({ node, extractValue, renderChild, className }) => {
-    var _a;
-    const value = extractValue.asDisplayText(node.props.value);
-    const colorMap = extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.colorMap);
-    let colorValue;
-    if (colorMap && value) {
-        const resolvedColor = colorMap[value];
-        if (typeof resolvedColor === "string") {
-            colorValue = resolveColor(resolvedColor);
-        }
-        else if ((0, BadgeNative_1.isBadgeColors)(resolvedColor)) {
-            colorValue = {
-                label: resolveColor(resolvedColor.label),
-                background: resolveColor(resolvedColor.background),
-            };
-        }
-    }
-    return ((0, jsx_runtime_1.jsx)(BadgeNative_1.Badge, { variant: extractValue(node.props.variant), color: colorValue, className: className, children: value || (node.children && renderChild(node.children)) || String.fromCharCode(0xa0) }));
-});
-function resolveColor(value) {
-    return value.startsWith("$") ? (0, StyleParser_1.toCssVar)(value) : value;
-}