xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components/FormItem/Validations.js

@@ -1,389 +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 });
-exports.useValidation = useValidation;
-exports.useValidationDisplay = useValidationDisplay;
-exports.parseSeverity = parseSeverity;
-exports.groupInvalidValidationResultsBySeverity = groupInvalidValidationResultsBySeverity;
-const react_1 = require("react");
-const lodash_es_1 = require("lodash-es");
-const misc_1 = require("../../components-core/utils/misc");
-const constants_1 = require("../../components-core/constants");
-const FormContext_1 = require("../Form/FormContext");
-const formActions_1 = require("../Form/formActions");
-function isInputEmpty(value) {
-    if (value === undefined || value === null || value === "")
-        return true;
-    if (typeof value === "string")
-        return value.trim().length === 0;
-    if (typeof value === "number")
-        return false;
-    return (0, lodash_es_1.isEmpty)(value);
-}
-function isMinLengthValid(value = "", boundary) {
-    if (typeof value === "string") {
-        return value.length >= boundary;
-    }
-    console.warn("minLength can only be used on strings");
-    return true;
-}
-function isMaxLengthValid(value = "", boundary) {
-    if (typeof value === "string") {
-        return value.length <= boundary;
-    }
-    console.warn("maxLength can only be used on strings");
-    return true;
-}
-function isMinValueValid(value = "", minValue) {
-    if (typeof value !== "string" && !(0, lodash_es_1.isNumber)(value)) {
-        console.warn("Range can only be used on strings and numbers");
-    }
-    return Number(value) >= minValue;
-}
-function isMaxValueValid(value = "", maxValue) {
-    if (typeof value !== "string" && !(0, lodash_es_1.isNumber)(value)) {
-        console.warn("Range can only be used on strings and numbers");
-    }
-    return Number(value) <= maxValue;
-}
-function isRegexValid(value = "", regex) {
-    if (typeof value === "string") {
-        const _value = stringToRegex(regex).test(value);
-        return _value;
-    }
-    console.warn("Regex can only be used on strings");
-    return true;
-    // Source: https://stackoverflow.com/questions/17250815/how-to-check-if-the-input-string-is-a-valid-regular-expression
-    function stringToRegex(s) {
-        const m = s.match(/^([/~@;%#'])(.*?)\1([gimsuy]*)$/);
-        return m ? new RegExp(m[2], m[3]) : new RegExp(s);
-    }
-}
-class FormItemValidator {
-    constructor(validations, onValidate, value) {
-        this.validations = validations;
-        this.onValidate = onValidate;
-        this.value = value;
-        this.preValidate = () => {
-            const requiredResult = this.validateRequired();
-            let validationResults = [requiredResult];
-            if (!requiredResult || requiredResult.isValid) {
-                validationResults.push(this.validateLength(), this.validateRange(), this.validatePattern(), this.validateRegex());
-            }
-            validationResults = validationResults.filter((result) => result !== undefined);
-            return {
-                isValid: validationResults.find((result) => !result.isValid) === undefined,
-                validatedValue: this.value,
-                partial: this.onValidate !== undefined,
-                validations: validationResults,
-            };
-        };
-        this.validate = () => __awaiter(this, void 0, void 0, function* () {
-            const preValidateResult = this.preValidate();
-            const constValidationResult = (yield this.validateCustom()) || [];
-            preValidateResult.validations.push(...constValidationResult.map((res) => (Object.assign(Object.assign({}, res), { async: true }))));
-            return {
-                isValid: preValidateResult.validations.find((result) => !result.isValid) === undefined,
-                validatedValue: this.value,
-                partial: false,
-                validations: preValidateResult.validations,
-            };
-        });
-    }
-    validateRequired() {
-        const { required, requiredInvalidMessage } = this.validations;
-        if (!required) {
-            return undefined;
-        }
-        const validationResult = {
-            isValid: !isInputEmpty(this.value),
-            invalidMessage: requiredInvalidMessage || "This field is required",
-            severity: "error",
-        };
-        return validationResult;
-    }
-    validateLength() {
-        const { minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity = "error", } = this.validations;
-        if (minLength === undefined && maxLength === undefined) {
-            return undefined;
-        }
-        if (minLength !== undefined && maxLength === undefined) {
-            return {
-                isValid: isMinLengthValid(this.value, minLength),
-                invalidMessage: lengthInvalidMessage ||
-                    `Input should be at least ${minLength} ${pluralize(minLength, "character")}`,
-                severity: lengthInvalidSeverity,
-            };
-        }
-        if (minLength === undefined && maxLength !== undefined) {
-            return {
-                isValid: isMaxLengthValid(this.value, maxLength),
-                invalidMessage: lengthInvalidMessage ||
-                    `Input should be up to ${maxLength} ${pluralize(maxLength, "character")}`,
-                severity: lengthInvalidSeverity,
-            };
-        }
-        return {
-            isValid: isMinLengthValid(this.value, minLength) && isMaxLengthValid(this.value, maxLength),
-            invalidMessage: lengthInvalidMessage || `Input length should be between ${minLength} and ${maxLength}`,
-            severity: lengthInvalidSeverity,
-        };
-    }
-    validateRange() {
-        const { minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity = "error", } = this.validations;
-        if (minValue === undefined && maxValue === undefined) {
-            return undefined;
-        }
-        if (minValue !== undefined && maxValue === undefined) {
-            return {
-                isValid: isMinValueValid(this.value, minValue),
-                invalidMessage: rangeInvalidMessage || `Input should be bigger than ${minValue}`,
-                severity: rangeInvalidSeverity,
-            };
-        }
-        if (minValue === undefined && maxValue !== undefined) {
-            return {
-                isValid: isMaxValueValid(this.value, maxValue),
-                invalidMessage: rangeInvalidMessage || `Input should be smaller than ${maxValue}`,
-                severity: rangeInvalidSeverity,
-            };
-        }
-        if (typeof this.value === "object" && Array.isArray(this.value)) {
-            // If the value is an array, we check if all elements are within the range
-            const allValid = this.value.every((val) => isMinValueValid(val, minValue) && isMaxValueValid(val, maxValue));
-            return {
-                isValid: allValid,
-                invalidMessage: rangeInvalidMessage || `All inputs should be between ${minValue} and ${maxValue}`,
-                severity: rangeInvalidSeverity,
-            };
-        }
-        return {
-            isValid: isMinValueValid(this.value, minValue) && isMaxValueValid(this.value, maxValue),
-            invalidMessage: rangeInvalidMessage || `Input should be between ${minValue} and ${maxValue}`,
-            severity: rangeInvalidSeverity,
-        };
-    }
-    validatePattern() {
-        const { pattern, patternInvalidMessage, patternInvalidSeverity = "error" } = this.validations;
-        if (!pattern) {
-            return undefined;
-        }
-        switch (pattern.toLowerCase()) {
-            case "email":
-                return {
-                    isValid: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(this.value),
-                    invalidMessage: patternInvalidMessage || "Not a valid email address",
-                    severity: patternInvalidSeverity,
-                };
-            case "phone":
-                return {
-                    isValid: /^[a-zA-Z0-9#*)(+.\-_&']+$/g.test(this.value),
-                    invalidMessage: patternInvalidMessage || "Not a valid phone number",
-                    severity: patternInvalidSeverity,
-                };
-            case "url":
-                let url;
-                try {
-                    url = new URL(this.value);
-                }
-                catch (e) { }
-                if (!url || (url.protocol && !["http:", "https:"].includes(url.protocol))) {
-                    return {
-                        isValid: false,
-                        invalidMessage: "Not a valid URL",
-                        severity: patternInvalidSeverity,
-                    };
-                }
-                return {
-                    isValid: true,
-                    severity: "valid",
-                };
-            default: {
-                console.warn("Unknown pattern provided");
-                return {
-                    isValid: true,
-                    severity: "valid",
-                };
-            }
-        }
-    }
-    validateRegex() {
-        const { regex, regexInvalidMessage, regexInvalidSeverity = "error" } = this.validations;
-        if (regex === undefined) {
-            return undefined;
-        }
-        return {
-            isValid: isRegexValid(this.value, regex),
-            invalidMessage: regexInvalidMessage || "Input is not in the correct format",
-            severity: regexInvalidSeverity,
-        };
-    }
-    validateCustom() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.onValidate) {
-                return undefined;
-            }
-            const validationFnResult = yield this.onValidate(this.value);
-            if (typeof validationFnResult === "boolean") {
-                return [
-                    {
-                        isValid: validationFnResult,
-                        invalidMessage: "Invalid input",
-                        severity: "error",
-                    },
-                ];
-            }
-            if (!(0, lodash_es_1.isArray)(validationFnResult)) {
-                return [validationFnResult];
-            }
-            return validationFnResult;
-        });
-    }
-}
-function asyncValidate(validations, onValidate, deferredValue) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const validator = new FormItemValidator(validations, onValidate, deferredValue);
-        // console.log("calling async validate with ", deferredValue);
-        return yield validator.validate();
-    });
-}
-function useValidation(validations, onValidate, value, dispatch, bindTo, throttleWaitInMs = 0) {
-    const deferredValue = (0, react_1.useDeferredValue)(value);
-    const throttledAsyncValidate = (0, react_1.useMemo)(() => {
-        if (throttleWaitInMs !== 0) {
-            return (0, misc_1.asyncThrottle)(asyncValidate, throttleWaitInMs, {
-                trailing: true,
-                leading: true,
-            });
-        }
-        return asyncValidate;
-    }, [throttleWaitInMs]);
-    (0, react_1.useEffect)(function runAllValidations() {
-        const validator = new FormItemValidator(validations, onValidate, deferredValue);
-        let ignore = false;
-        const partialResult = validator.preValidate();
-        if (!ignore) {
-            dispatch((0, formActions_1.fieldValidated)(bindTo, partialResult));
-            if (partialResult.partial) {
-                void (() => __awaiter(this, void 0, void 0, function* () {
-                    const result = yield throttledAsyncValidate(validations, onValidate, deferredValue);
-                    if (!ignore) {
-                        // console.log(`async validation result for ${bindTo}`, result);
-                        dispatch((0, formActions_1.fieldValidated)(bindTo, result));
-                    }
-                }))();
-            }
-        }
-        return () => {
-            ignore = true;
-        };
-    }, [bindTo, deferredValue, dispatch, onValidate, throttledAsyncValidate, validations]);
-}
-function useValidationDisplay(bindTo, value, validationResult, validationMode = FormContext_1.defaultValidationMode) {
-    const interactionFlags = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
-    const forceShowValidationResult = interactionFlags.forceShowValidationResult;
-    const focused = interactionFlags.focused;
-    const afterFirstDirtyBlur = interactionFlags.afterFirstDirtyBlur;
-    const isValidLostFocus = interactionFlags.isValidLostFocus;
-    const isValidOnFocus = interactionFlags.isValidOnFocus;
-    const invalidToValid = interactionFlags.invalidToValid;
-    const validationInProgress = !validationResult || validationResult.validatedValue !== value;
-    const isDirty = interactionFlags.isDirty;
-    const isValid = (validationResult === null || validationResult === void 0 ? void 0 : validationResult.isValid) === true;
-    let highestValidationSeverity = "none";
-    for (const val of (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations) || []) {
-        if (val.isValid) {
-            continue;
-        }
-        if (highestValidationSeverity !== "error" &&
-            val.severity === "warning") {
-            highestValidationSeverity = "warning";
-        }
-        if (val.severity === "error") {
-            highestValidationSeverity = "error";
-            break;
-        }
-    }
-    let isHelperTextShown = false;
-    switch (validationMode) {
-        // This validation model was inspired by https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce
-        // The idea is to show validation errors as late as possible (on blur)
-        case "errorLate": {
-            // --- Don't fire if not dirty
-            if (!isDirty) {
-                isHelperTextShown = false;
-                break;
-            }
-            // --- Show if losing focus and invalid
-            if (!focused && !isValidLostFocus) {
-                isHelperTextShown = true;
-                break;
-            }
-            // --- Show if focused, after first meaningful blur, was not valid on last focus and not changed to valid while typing
-            if (focused && afterFirstDirtyBlur && !isValidOnFocus && !invalidToValid) {
-                isHelperTextShown = true;
-                break;
-            }
-            break;
-        }
-        case "onChanged": {
-            isHelperTextShown = isDirty;
-            break;
-        }
-        case "onLostFocus": {
-            isHelperTextShown = isDirty && !focused && !isValidLostFocus;
-        }
-    }
-    isHelperTextShown = isHelperTextShown || forceShowValidationResult;
-    const [prevStableShown, setPrevStableShown] = (0, react_1.useState)(isHelperTextShown);
-    if (prevStableShown !== isHelperTextShown && !validationInProgress) {
-        setPrevStableShown(isHelperTextShown);
-    }
-    if (validationInProgress) {
-        isHelperTextShown = prevStableShown;
-    }
-    return {
-        isHelperTextShown,
-        validationStatus: isHelperTextShown ? highestValidationSeverity : "none",
-    };
-}
-function parseSeverity(severity) {
-    if (severity === undefined) {
-        return undefined;
-    }
-    if (severity === "error" ||
-        severity === "warning" ||
-        severity === "valid" ||
-        severity === "none") {
-        return severity;
-    }
-    return "none";
-}
-function groupInvalidValidationResultsBySeverity(validationResults) {
-    const ret = {
-        error: [],
-        warning: [],
-        valid: [],
-        none: [],
-    };
-    Object.entries(validationResults).forEach(([field, validationResult]) => {
-        validationResult.validations.forEach((singleValidationResult) => {
-            if (!singleValidationResult.isValid) {
-                ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
-                ret[singleValidationResult.severity].push(singleValidationResult);
-            }
-        });
-    });
-    return ret;
-}
-function pluralize(count, word) {
-    return count === 1 ? word : word + "s";
-}

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

@@ -1,56 +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.formSectionRenderer = exports.FormSectionMd = void 0;
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const FormSection_xmlui_1 = __importDefault(require("./FormSection.xmlui"));
-const COMP = "FormSection";
-exports.FormSectionMd = (0, metadata_helpers_1.createMetadata)({
-    status: "experimental",
-    description: "`FormSection` groups elements within a `Form`. Child components are placed in " +
-        "a [FlowLayout](/components/FlowLayout).",
-    props: {
-        heading: {
-            description: "The heading text to be displayed at the top of the form section.",
-            type: "string",
-        },
-        headingLevel: {
-            description: "The semantic and visual level of the heading.",
-            availableValues: ["h1", "h2", "h3", "h4", "h5", "h6"],
-            defaultValue: "h3",
-        },
-        headingWeight: {
-            description: "The font weight of the heading.",
-            type: "string",
-            defaultValue: "bold",
-        },
-        info: {
-            description: "Informational text displayed below the heading.",
-            type: "string",
-        },
-        infoFontSize: {
-            description: "The font size of the informational text.",
-            type: "string",
-            defaultValue: "0.8rem",
-        },
-        paddingTop: {
-            description: "The top padding of the FlowLayout where the section's children are placed.",
-            type: "string",
-            defaultValue: "$space-normal",
-        },
-        columnGap: {
-            description: "The gap between columns of items within the section.",
-            type: "string",
-            defaultValue: "3rem",
-        },
-        rowGap: {
-            description: "The gap between rows of items within the section.",
-            type: "string",
-            defaultValue: "$space-normal",
-        },
-    },
-});
-exports.formSectionRenderer = (0, renderers_1.createUserDefinedComponentRenderer)(exports.FormSectionMd, FormSection_xmlui_1.default);

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

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fragmentComponentRenderer = exports.FragmentMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const COMP = "Fragment";
-exports.FragmentMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`Fragment` provides conditional rendering. You can use `when=` on any " +
-        "component to render it conditionally, use `Fragment` to apply `when` to a group of components.",
-    opaque: true,
-    props: {
-    // Note: 'when' is a universal property defined in ComponentDefCore, no need to redefine it here
-    },
-});
-exports.fragmentComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FragmentMd, ({ node, extractValue, renderChild, layoutContext }) => {
-    let renderedChild = renderChild(node.children, layoutContext);
-    if (Array.isArray(renderedChild)) {
-        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderedChild }, extractValue(node.uid));
-    }
-    return renderedChild;
-});

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

@@ -1,50 +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)("parent has items", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const expectedChildCount = 3;
-        const expectedChildrenDisplay = ["Item #1", "Item #2", "Item #3"];
-        yield initTestBed(`
-    <Stack testId="container">
-      <Fragment>
-        <Text value='Item #1' />
-        <Text value='Item #2' />
-        <Text value='Item #3' />
-      </Fragment>
-    </Stack>`);
-        const children = page.locator(`[data-testid="container"] > *`);
-        yield (0, fixtures_1.expect)(children).toHaveCount(expectedChildCount);
-        yield (0, fixtures_1.expect)(children).toHaveText(expectedChildrenDisplay);
-    }));
-    (0, fixtures_1.test)("parent style affects children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed }) {
-        const expectedFontSize = "14px";
-        yield initTestBed(`
-      <Stack testId="container" fontSize="${expectedFontSize}">
-        <Fragment>
-          <Text value='Item #1' />
-          <Text value='Item #2' />
-          <Text value='Item #3' />
-        </Fragment>
-      </Stack>`, {
-            testThemeVars: {
-                "font-size": "16px",
-            },
-        });
-        for (const child of yield page.locator(`[data-testid="container"] > *`).all()) {
-            yield (0, fixtures_1.expect)(child).toHaveCSS("font-size", expectedFontSize);
-        }
-    }));
-});

package/dist/scripts/src/components/Heading/H1.spec.js

@@ -1,66 +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)("renders as h1 level heading", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<H1 testId="h1">Test Heading</H1>`);
-        const driver = yield createHeadingDriver("h1");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("Test Heading");
-        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-        // Verify it renders as h1 HTML element
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
-    }));
-    (0, fixtures_1.test)("renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<H1 testId="h1" value="Value Property Text" />`);
-        const driver = yield createHeadingDriver("h1");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("Value Property Text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-        // Verify it renders as h1 HTML element
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
-    }));
-    (0, fixtures_1.test)("is equivalent to Heading with level='h1'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Heading testId="heading" level="h1">Heading Content</Heading>
-        <H1 testId="h1">H1 Content</H1>
-      </Fragment>
-    `);
-        const headingDriver = yield createHeadingDriver("heading");
-        const h1Driver = yield createHeadingDriver("h1");
-        // Both should render as h1 elements
-        const headingTagName = yield headingDriver.getComponentTagName();
-        const h1TagName = yield h1Driver.getComponentTagName();
-        (0, fixtures_1.expect)(headingTagName.toLowerCase()).toBe("h1");
-        (0, fixtures_1.expect)(h1TagName.toLowerCase()).toBe("h1");
-        (0, fixtures_1.expect)(headingTagName).toEqual(h1TagName);
-        // Both should have heading role
-        yield (0, fixtures_1.expect)(headingDriver.component).toHaveRole("heading");
-        yield (0, fixtures_1.expect)(h1Driver.component).toHaveRole("heading");
-    }));
-    (0, fixtures_1.test)("ignores level property when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<H1 testId="h1" level="h3">Should be H1</H1>`);
-        const driver = yield createHeadingDriver("h1");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("Should be H1");
-        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-        // Should always be h1 despite level="h3" prop (this is the expected behavior)
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h1");
-    }));
-});

package/dist/scripts/src/components/Heading/H2.spec.js

@@ -1,66 +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)("renders as h2 level heading", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<H2 testId="h2">Test Heading</H2>`);
-        const driver = yield createHeadingDriver("h2");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("Test Heading");
-        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-        // Verify it renders as h2 HTML element
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
-    }));
-    (0, fixtures_1.test)("renders with value property", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<H2 testId="h2" value="Value Property Text" />`);
-        const driver = yield createHeadingDriver("h2");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("Value Property Text");
-        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-        // Verify it renders as h2 HTML element
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
-    }));
-    (0, fixtures_1.test)("is equivalent to Heading with level='h2'", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`
-      <Fragment>
-        <Heading testId="heading" level="h2">Heading Content</Heading>
-        <H2 testId="h2">H2 Content</H2>
-      </Fragment>
-    `);
-        const headingDriver = yield createHeadingDriver("heading");
-        const h2Driver = yield createHeadingDriver("h2");
-        // Both should render as h2 elements
-        const headingTagName = yield headingDriver.getComponentTagName();
-        const h2TagName = yield h2Driver.getComponentTagName();
-        (0, fixtures_1.expect)(headingTagName.toLowerCase()).toBe("h2");
-        (0, fixtures_1.expect)(h2TagName.toLowerCase()).toBe("h2");
-        (0, fixtures_1.expect)(headingTagName).toEqual(h2TagName);
-        // Both should have heading role
-        yield (0, fixtures_1.expect)(headingDriver.component).toHaveRole("heading");
-        yield (0, fixtures_1.expect)(h2Driver.component).toHaveRole("heading");
-    }));
-    (0, fixtures_1.test)("ignores level property when provided", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createHeadingDriver }) {
-        yield initTestBed(`<H2 testId="h2" level="h4">Should be H2</H2>`);
-        const driver = yield createHeadingDriver("h2");
-        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
-        yield (0, fixtures_1.expect)(driver.component).toContainText("Should be H2");
-        yield (0, fixtures_1.expect)(driver.component).toHaveRole("heading");
-        // Should always be h2 despite level="h4" prop (this is the expected behavior)
-        const tagName = yield driver.getComponentTagName();
-        (0, fixtures_1.expect)(tagName.toLowerCase()).toBe("h2");
-    }));
-});