@wavemaker-ai/react-codegen 1.0.0-rc.309

package/src/transpile/widget-inline-style-processor.js

@@ -0,0 +1,684 @@
+"use strict";
+// Converts static autoLayout and style attributes into Tailwind-like CSS utility classes.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutolayoutCodegen = void 0;
+const widget_inline_style_constants_1 = require("./widget-inline-style-constants");
+const utils_browser_1 = require("../utils.browser");
+const split_css_shorthand_1 = require("./style/split-css-shorthand");
+const isBind = (v) => !!(v && (v.startsWith("bind:") || v.startsWith("{")));
+const hasValidDir = (v) => v === "row" || v === "column";
+const isAuto = (v) => v === "auto";
+const normalizeGap = (v) => v != null && v !== "" && !isAuto(v) ? v : null;
+const px = (v) => v == null || v === "auto" ? undefined : `${v}px`;
+function getBaseAlignment(key) {
+    return widget_inline_style_constants_1.ALIGNMENT_MATRIX[key] || { justifyContent: "flex-start", alignItems: "flex-start" };
+}
+// Swaps justifyContent/alignItems for column direction
+function getDirectionalAlignment(base, isRow) {
+    return {
+        justifyContent: isRow ? base.justifyContent : base.alignItems,
+        alignItems: isRow ? base.alignItems : base.justifyContent,
+    };
+}
+// Replaces special characters to produce valid CSS class names
+function sanitizeValue(value) {
+    return value
+        .replace(/\s+/g, "-")
+        .replace(/%/g, "pct")
+        .replace(/\./g, "_")
+        .replace(/#/g, "h")
+        .replace(/\//g, "-")
+        .replace(/[^a-zA-Z0-9_-]/g, "");
+}
+function cssToClassName(property, value) {
+    const prefix = widget_inline_style_constants_1.CSS_PROP_PREFIX[property] || property.replace(/-/g, "");
+    return `${prefix}-${sanitizeValue(value)}`;
+}
+// Strips matching outer parentheses from an expression
+function stripBalancedOuterParens(expr) {
+    let e = expr;
+    while (e.startsWith("(") && e.endsWith(")")) {
+        let depth = 0;
+        let balanced = true;
+        for (let i = 0; i < e.length - 1; i++) {
+            if (e[i] === "(")
+                depth++;
+            else if (e[i] === ")")
+                depth--;
+            if (depth === 0) {
+                balanced = false;
+                break;
+            }
+        }
+        if (balanced)
+            e = e.substring(1, e.length - 1).trim();
+        else
+            break;
+    }
+    return e;
+}
+// Extracts a string literal or numeric literal from an expression
+function extractStringLiteral(expr) {
+    const e = stripBalancedOuterParens(expr.trim());
+    if ((e.startsWith('"') && e.endsWith('"')) || (e.startsWith("'") && e.endsWith("'"))) {
+        return e.substring(1, e.length - 1);
+    }
+    const n = Number(e);
+    if (!Number.isNaN(n) && e.length > 0)
+        return String(n);
+    return null;
+}
+// Parses a bind: ternary expression into condition, trueValue, falseValue
+function parseTernaryExpression(rawAttrValue) {
+    let expr = rawAttrValue.trim();
+    if (expr.startsWith("bind:"))
+        expr = expr.substring(5).trim();
+    if (expr.startsWith("{") && expr.endsWith("}"))
+        expr = expr.substring(1, expr.length - 1).trim();
+    expr = stripBalancedOuterParens(expr);
+    let questionIdx = -1;
+    let colonIdx = -1;
+    let depth = 0;
+    let inSingle = false;
+    let inDouble = false;
+    let inTemplate = false;
+    for (let i = 0; i < expr.length; i++) {
+        const ch = expr[i];
+        if (i > 0 && expr[i - 1] === "\\")
+            continue;
+        if (!inDouble && !inTemplate && ch === "'") {
+            inSingle = !inSingle;
+            continue;
+        }
+        if (!inSingle && !inTemplate && ch === '"') {
+            inDouble = !inDouble;
+            continue;
+        }
+        if (!inSingle && !inDouble && ch === "`") {
+            inTemplate = !inTemplate;
+            continue;
+        }
+        if (inSingle || inDouble || inTemplate)
+            continue;
+        if (ch === "(" || ch === "[") {
+            depth++;
+            continue;
+        }
+        if (ch === ")" || ch === "]") {
+            depth--;
+            continue;
+        }
+        if (depth !== 0)
+            continue;
+        if (ch === "?" && questionIdx < 0) {
+            const next = i + 1 < expr.length ? expr[i + 1] : "";
+            if (next !== "." && next !== "?")
+                questionIdx = i;
+        }
+        if (ch === ":" && questionIdx >= 0 && colonIdx < 0) {
+            colonIdx = i;
+        }
+    }
+    if (questionIdx < 0 || colonIdx < 0)
+        return null;
+    const condition = expr.substring(0, questionIdx).trim();
+    const trueExpr = expr.substring(questionIdx + 1, colonIdx).trim();
+    const falseExpr = expr.substring(colonIdx + 1).trim();
+    const trueValue = extractStringLiteral(trueExpr);
+    const falseValue = extractStringLiteral(falseExpr);
+    if (trueValue === null || falseValue === null)
+        return null;
+    return { condition, trueValue, falseValue };
+}
+// Maps a single layout attr value to its CSS property/value pairs
+function computeCssForSingleAttr(attrName, value) {
+    if (!value && value !== "0")
+        return [];
+    switch (attrName) {
+        case "position":
+            return value ? [{ property: "position", value }] : [];
+        case "positionvalue": {
+            if (!value)
+                return [];
+            const sides = expandInsetToSides(value);
+            const result = [];
+            if (sides.top && sides.top !== "auto")
+                result.push({ property: "top", value: sides.top });
+            if (sides.right && sides.right !== "auto")
+                result.push({ property: "right", value: sides.right });
+            if (sides.bottom && sides.bottom !== "auto")
+                result.push({ property: "bottom", value: sides.bottom });
+            if (sides.left && sides.left !== "auto")
+                result.push({ property: "left", value: sides.left });
+            return result;
+        }
+        case "zindex":
+            return value !== "" ? [{ property: "z-index", value: String(value) }] : [];
+        case "overflow": {
+            const ov = value.toLowerCase();
+            if (ov === "vertical")
+                return [
+                    { property: "overflow-x", value: "hidden" },
+                    { property: "overflow-y", value: "scroll" },
+                ];
+            if (ov === "horizontal")
+                return [
+                    { property: "overflow-x", value: "scroll" },
+                    { property: "overflow-y", value: "hidden" },
+                ];
+            if (ov === "both directions" || ov === "both")
+                return [{ property: "overflow", value: "scroll" }];
+            if (ov === "none")
+                return [{ property: "overflow", value: "hidden" }];
+            return [];
+        }
+        default:
+            return [];
+    }
+}
+// Parses an inset shorthand value into individual top/right/bottom/left (CSS shorthand rules)
+function expandInsetToSides(value) {
+    const parts = (0, split_css_shorthand_1.splitCssShorthandOnSpaces)(value);
+    if (parts.length === 1)
+        return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };
+    if (parts.length === 2)
+        return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };
+    if (parts.length === 3)
+        return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[1] };
+    return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
+}
+// Computes final CSS properties from static layout props (flex, overflow, position)
+function computeLayoutCssProperties(props) {
+    var _a;
+    const css = {};
+    if (hasValidDir(props.direction)) {
+        const direction = props.direction;
+        const hasAlignment = !!props.alignment;
+        const alignment = props.alignment || "top-left";
+        const wrap = direction === "column" ? false : ((_a = props.wrap) !== null && _a !== void 0 ? _a : false);
+        const base = getBaseAlignment(alignment);
+        const isRow = direction === "row";
+        const { justifyContent, alignItems } = getDirectionalAlignment(base, isRow);
+        const normGap = normalizeGap(props.gap);
+        const normCgap = normalizeGap(props.columngap);
+        css["display"] = "flex";
+        css["flex-direction"] = direction;
+        css["flex-wrap"] = wrap ? "wrap" : "nowrap";
+        if (!wrap) {
+            if (isAuto(props.gap)) {
+                if (hasAlignment) {
+                    css["justify-content"] = base.justifyContent;
+                    css["align-items"] = base.alignItems;
+                }
+            }
+            else {
+                if (hasAlignment) {
+                    css["justify-content"] = justifyContent;
+                    css["align-items"] = alignItems;
+                }
+                if (normGap != null)
+                    css["gap"] = px(normGap);
+            }
+        }
+        else {
+            const gapIsAuto = isAuto(props.gap);
+            const columnGapIsAuto = isAuto(props.columngap);
+            if (hasAlignment) {
+                css["justify-content"] = justifyContent;
+                css["align-items"] = alignItems;
+            }
+            if (columnGapIsAuto && gapIsAuto) {
+                if (hasAlignment)
+                    css["align-content"] = justifyContent;
+            }
+            else if (columnGapIsAuto && !gapIsAuto) {
+                if (hasAlignment)
+                    css["align-content"] = alignItems;
+            }
+            else if (gapIsAuto && !columnGapIsAuto) {
+                if (hasAlignment)
+                    css["align-content"] = "space-between";
+            }
+            else {
+                if (hasAlignment)
+                    css["align-content"] = alignItems;
+            }
+            if (normGap != null)
+                css["row-gap"] = px(normGap);
+            if (normCgap != null)
+                css["column-gap"] = px(normCgap);
+        }
+    }
+    // Overflow is only applied when clipcontent is true (matches  handleClipBehaviour)
+    if (props.clipcontent) {
+        const overflow = (props.overflow || "").toLowerCase();
+        if (overflow === "vertical") {
+            css["overflow-x"] = "hidden";
+            css["overflow-y"] = "scroll";
+        }
+        else if (overflow === "horizontal") {
+            css["overflow-x"] = "scroll";
+            css["overflow-y"] = "hidden";
+        }
+        else if (overflow === "both directions" || overflow === "both") {
+            css["overflow"] = "scroll";
+        }
+        else if (overflow === "no scrolling" || overflow === "none") {
+            css["overflow"] = "hidden";
+        }
+    }
+    if (props.position) {
+        css["position"] = props.position;
+    }
+    const rawInset = props.positionvalue || (props.position === "sticky" ? "0px auto auto 0px" : null);
+    if (rawInset) {
+        const sides = expandInsetToSides(rawInset);
+        if (sides.top && sides.top !== "auto")
+            css["top"] = sides.top;
+        if (sides.right && sides.right !== "auto")
+            css["right"] = sides.right;
+        if (sides.bottom && sides.bottom !== "auto")
+            css["bottom"] = sides.bottom;
+        if (sides.left && sides.left !== "auto")
+            css["left"] = sides.left;
+    }
+    if (props.zindex != null && props.zindex !== "") {
+        css["z-index"] = String(props.zindex);
+    }
+    return css;
+}
+// Parses a raw attribute value into the typed StaticLayoutProps field
+function parseAttrValue(name, raw, props) {
+    if (name === "wrap") {
+        props.wrap = raw === "true" || raw === "wrap";
+    }
+    else if (name === "gap" || name === "columngap") {
+        const n = Number(raw);
+        props[name] = Number.isNaN(n) ? raw : n;
+    }
+    else if (name === "clipcontent") {
+        props.clipcontent = raw === "true";
+    }
+    else if (name === "zindex") {
+        const n = Number(raw);
+        props.zindex = Number.isNaN(n) ? raw : n;
+    }
+    else {
+        props[name] = raw;
+    }
+}
+// Reads static (non-bind) layout attributes from element, skipping dynamic groups
+function getStaticLayoutPropsFromElement(element, dynamicGroups) {
+    const attrs = element.attributes || {};
+    const props = {};
+    let hasAny = false;
+    for (const name of widget_inline_style_constants_1.LAYOUT_ATTR_NAMES) {
+        if (dynamicGroups) {
+            if (dynamicGroups.flex && widget_inline_style_constants_1.FLEX_ATTR_GROUP.has(name))
+                continue;
+            if (dynamicGroups.overflow && widget_inline_style_constants_1.OVERFLOW_ATTR_GROUP.has(name))
+                continue;
+            if (dynamicGroups.position && widget_inline_style_constants_1.POSITION_ATTR_GROUP.has(name))
+                continue;
+        }
+        const raw = attrs[name];
+        if (raw == null)
+            continue;
+        if (isBind(raw))
+            continue;
+        hasAny = true;
+        parseAttrValue(name, raw, props);
+    }
+    return hasAny ? props : null;
+}
+// Converts a dimension value to its CSS equivalent (auto, hug→fit-content, fill→100%, number→px)
+function parseDimensionValue(value, element) {
+    if (value === "auto")
+        return "auto";
+    if (value === "hug")
+        return "fit-content";
+    if (value === "fill")
+        return "100%";
+    if (/(%|vw|vh|em|rem|px|pt|pc|in|cm|mm)$/.test(value))
+        return value;
+    const n = Number(value);
+    if (!Number.isNaN(n))
+        return `${n}px`;
+    return value;
+}
+// Expands a shorthand value (e.g. "10px 20px") into [top, right, bottom, left]
+function expandShorthand(value) {
+    const parts = (0, split_css_shorthand_1.splitCssShorthandOnSpaces)(value).map(v => v !== "unset" ? parseDimensionValue(v) : "unset");
+    if (parts.length === 1)
+        return [parts[0], parts[0], parts[0], parts[0]];
+    if (parts.length === 2)
+        return [parts[0], parts[1], parts[0], parts[1]];
+    if (parts.length === 3)
+        return [parts[0], parts[1], parts[2], parts[1]];
+    return [parts[0], parts[1], parts[2], parts[3]];
+}
+// Identifies which layout attribute groups contain dynamic (bind:) values
+function detectDynamicGroups(element) {
+    const attrs = element.attributes || {};
+    const flags = { flex: false, overflow: false, position: false };
+    for (const name of widget_inline_style_constants_1.LAYOUT_ATTR_NAMES) {
+        const raw = attrs[name];
+        if (raw == null || !isBind(raw))
+            continue;
+        if (widget_inline_style_constants_1.FLEX_ATTR_GROUP.has(name))
+            flags.flex = true;
+        else if (widget_inline_style_constants_1.OVERFLOW_ATTR_GROUP.has(name))
+            flags.overflow = true;
+        else if (widget_inline_style_constants_1.POSITION_ATTR_GROUP.has(name))
+            flags.position = true;
+    }
+    return flags;
+}
+// Encapsulates all autolayout codegen logic: registry, element processing, CSS collection
+class AutolayoutCodegen {
+    constructor() {
+        this.registry = new Map();
+        for (const cls of widget_inline_style_constants_1.PREDEFINED_CLASS_NAMES) {
+            this.registry.set(cls, "");
+        }
+    }
+    // Registers a CSS class in the registry and returns the class name
+    registerClass(property, value) {
+        const className = cssToClassName(property, value);
+        if (!this.registry.has(className)) {
+            this.registry.set(className, `.${className} {\n  ${property}: ${value} !important;\n}`);
+        }
+        return className;
+    }
+    // Returns the effective parent flex direction for fill/size calculations.
+    // For wm-list, the runtime target (<ul>) sits inside an intermediate Box wrapper
+    getEffectiveParentDirection(element) {
+        var _a, _b, _c;
+        const tagName = (_b = (_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (tagName === "wm-list")
+            return null;
+        const parent = element.parentNode;
+        const dir = ((_c = parent === null || parent === void 0 ? void 0 : parent.getAttribute) === null || _c === void 0 ? void 0 : _c.call(parent, "direction")) || null;
+        return dir && hasValidDir(dir) ? dir : null;
+    }
+    // Collect flex props for a single dimension, axis-aware to avoid cross-axis conflicts.
+    collectSizeFlexProps(element, key, val, flexProps) {
+        const parentDirection = this.getEffectiveParentDirection(element);
+        if (val === "fill") {
+            if (!parentDirection)
+                return;
+            const isRow = parentDirection === "row";
+            const isMainAxis = (key === "width" && isRow) || (key === "height" && !isRow);
+            if (isMainAxis) {
+                flexProps["flex-grow"] = "1";
+                const minKey = key === "width" ? "min-width" : "min-height";
+                flexProps[minKey] = "0";
+            }
+            else {
+                flexProps["align-self"] = "stretch";
+            }
+            return;
+        }
+        // hug and fixed sizes both prevent shrinking.
+        if (parentDirection) {
+            const isRow = parentDirection === "row";
+            const isMainAxis = (key === "width" && isRow) || (key === "height" && !isRow);
+            if (isMainAxis) {
+                flexProps["flex-shrink"] = "0";
+            }
+        }
+        else {
+            flexProps["flex-shrink"] = "0";
+        }
+    }
+    // Register the size class (w-100pct, h-fit-content, etc.)
+    registerSizeClass(element, key, val) {
+        const classes = [];
+        if (val === "hug") {
+            classes.push(this.registerClass(key, "fit-content"));
+        }
+        else if (val === "fill") {
+            const parentDirection = this.getEffectiveParentDirection(element);
+            if (!parentDirection) {
+                classes.push(this.registerClass(key, "100%"));
+            }
+        }
+        else {
+            classes.push(this.registerClass(key, parseDimensionValue(val)));
+        }
+        return classes;
+    }
+    normalizeBackgroundImageValue(value) {
+        const trimmed = value.trim();
+        // CSS gradient functions — already a valid background-image value.
+        if (trimmed.startsWith("linear-gradient(") ||
+            trimmed.startsWith("radial-gradient(") ||
+            trimmed.startsWith("conic-gradient(") ||
+            trimmed.startsWith("repeating-")) {
+            return trimmed;
+        }
+        // Strip an existing url() wrapper to get the bare inner path.
+        let innerPath = trimmed;
+        if (trimmed.startsWith("url(")) {
+            const m = trimmed.match(/^url\(\s*(['"]?)(.+?)\1\s*\)$/s);
+            if (m)
+                innerPath = m[2].trim();
+        }
+        // Make relative paths absolute using the WaveMaker public-folder convention.
+        if (!innerPath.startsWith("/") &&
+            !innerPath.startsWith("http://") &&
+            !innerPath.startsWith("https://") &&
+            !innerPath.startsWith("data:")) {
+            innerPath = `/${innerPath}`;
+        }
+        return `url(${innerPath})`;
+    }
+    // Converts static style attributes to CSS utility classes and removes them from element
+    processStaticStyleProps(element) {
+        var _a;
+        const classNames = [];
+        const bgImageRaw = element.getAttribute("backgroundimage");
+        if (bgImageRaw && !isBind(bgImageRaw)) {
+            classNames.push(this.registerClass("background-image", this.normalizeBackgroundImageValue(bgImageRaw)));
+            element.removeAttribute("backgroundimage");
+        }
+        const fontUnit = element.getAttribute("fontunit");
+        if (fontUnit && !isBind(fontUnit)) {
+            element.removeAttribute("fontunit");
+        }
+        // Process width & height together, simulating  sequential override:
+        const flexProps = {};
+        for (const dimKey of ["width", "height"]) {
+            const raw = element.getAttribute(dimKey);
+            if (!raw || isBind(raw))
+                continue;
+            //for manupulating the parent element flex properties in runtime
+            // for alligening flexgrow, flexShrink,selfAlign
+            if (!this.getEffectiveParentDirection(element) &&
+                ((_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "wm-container") {
+                element.setAttribute(dimKey === "width" ? "layoutWidth" : "layoutHeight", raw);
+            }
+            this.collectSizeFlexProps(element, dimKey, raw, flexProps);
+            classNames.push(...this.registerSizeClass(element, dimKey, raw));
+            element.removeAttribute(dimKey);
+        }
+        for (const [prop, value] of Object.entries(flexProps)) {
+            classNames.push(this.registerClass(prop, value));
+        }
+        for (const [attrName, info] of Object.entries(widget_inline_style_constants_1.STYLE_ATTR_MAP)) {
+            const raw = element.getAttribute(attrName);
+            if (!raw || isBind(raw))
+                continue;
+            if (attrName === "width" || attrName === "height")
+                continue;
+            if (info.type === "shorthand-4" && info.shorthandSides) {
+                const [top, right, bottom, left] = expandShorthand(raw);
+                const sides = info.shorthandSides;
+                if (top !== "unset")
+                    classNames.push(this.registerClass(sides.top, top));
+                if (right !== "unset")
+                    classNames.push(this.registerClass(sides.right, right));
+                if (bottom !== "unset")
+                    classNames.push(this.registerClass(sides.bottom, bottom));
+                if (left !== "unset")
+                    classNames.push(this.registerClass(sides.left, left));
+                element.removeAttribute(attrName);
+                continue;
+            }
+            let cssValue;
+            if (info.type === "dimension") {
+                if (attrName === "fontsize" && fontUnit && !isBind(fontUnit)) {
+                    const n = Number(raw);
+                    cssValue = !Number.isNaN(n) ? `${n}${fontUnit}` : parseDimensionValue(raw);
+                }
+                else {
+                    cssValue = parseDimensionValue(raw);
+                }
+            }
+            else if (info.type === "number") {
+                const match = raw.match(/^[0-9.\-]+/);
+                cssValue = match ? match[0] : raw;
+            }
+            else {
+                cssValue = raw;
+            }
+            classNames.push(this.registerClass(info.cssProperty, cssValue));
+            element.removeAttribute(attrName);
+        }
+        return classNames;
+    }
+    // Converts dynamic ternary layout attrs to conditional class expressions
+    processDynamicTernaryProps(element, removeAttrs = true) {
+        const attrs = element.attributes || {};
+        const parsed = [];
+        for (const name of widget_inline_style_constants_1.LAYOUT_ATTR_NAMES) {
+            const raw = attrs[name];
+            if (raw == null || !isBind(raw))
+                continue;
+            if (widget_inline_style_constants_1.FLEX_ATTR_GROUP.has(name))
+                continue;
+            const ternary = parseTernaryExpression(raw);
+            if (!ternary)
+                continue;
+            const trueCssEntries = computeCssForSingleAttr(name, ternary.trueValue);
+            const falseCssEntries = computeCssForSingleAttr(name, ternary.falseValue);
+            if (trueCssEntries.length === 0 && falseCssEntries.length === 0)
+                continue;
+            const trueClasses = trueCssEntries.map(e => this.registerClass(e.property, e.value));
+            const falseClasses = falseCssEntries.map(e => this.registerClass(e.property, e.value));
+            parsed.push({ attrName: name, condition: ternary.condition, trueClasses, falseClasses });
+            if (removeAttrs || name === "styles")
+                element.removeAttribute(name);
+        }
+        if (parsed.length === 0)
+            return [];
+        // Merge attrs sharing the same condition into a single ternary expression
+        const conditionMap = new Map();
+        for (const entry of parsed) {
+            const existing = conditionMap.get(entry.condition);
+            if (existing) {
+                existing.trueClasses.push(...entry.trueClasses);
+                existing.falseClasses.push(...entry.falseClasses);
+            }
+            else {
+                conditionMap.set(entry.condition, {
+                    trueClasses: [...entry.trueClasses],
+                    falseClasses: [...entry.falseClasses],
+                });
+            }
+        }
+        return Array.from(conditionMap.entries()).map(([condition, classes]) => ({
+            condition,
+            trueClasses: classes.trueClasses.join(" "),
+            falseClasses: classes.falseClasses.join(" "),
+        }));
+    }
+    // Processes a container/list element — returns static classes + conditional expressions
+    // Does NOT modify the element's class attribute; caller is responsible for emitting layoutClassName.
+    processElement(element) {
+        var _a, _b;
+        const tagName = (_b = (_a = element.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (!tagName || !widget_inline_style_constants_1.AUTOLAYOUT_WIDGET_TAGS.has(tagName))
+            return null;
+        const dynamicGroups = detectDynamicGroups(element);
+        const allClasses = [];
+        const staticProps = getStaticLayoutPropsFromElement(element, dynamicGroups);
+        if (staticProps) {
+            const cssProperties = computeLayoutCssProperties(staticProps);
+            for (const [prop, value] of Object.entries(cssProperties)) {
+                allClasses.push(this.registerClass(prop, value));
+            }
+        }
+        allClasses.push(...this.processStaticStyleProps(element));
+        const conditionalExpressions = this.processDynamicTernaryProps(element, false);
+        for (const attr of widget_inline_style_constants_1.STYLE_OVERLAPPING_LAYOUT_ATTRS) {
+            element.removeAttribute(attr);
+        }
+        const uniqueClasses = [...new Set(allClasses)];
+        if (uniqueClasses.length === 0 && conditionalExpressions.length === 0)
+            return null;
+        return {
+            staticClasses: uniqueClasses.join(" "),
+            conditionalExpressions,
+        };
+    }
+    // Processes a list-template element — returns static classes + conditional expressions
+    processListTemplate(templateElement) {
+        const dynamicGroups = detectDynamicGroups(templateElement);
+        const staticClassNames = [];
+        const staticProps = getStaticLayoutPropsFromElement(templateElement, dynamicGroups);
+        if (staticProps) {
+            const cssProperties = computeLayoutCssProperties(staticProps);
+            for (const [prop, value] of Object.entries(cssProperties)) {
+                staticClassNames.push(this.registerClass(prop, value));
+            }
+        }
+        staticClassNames.push(...this.processStaticStyleProps(templateElement));
+        const conditionalExpressions = this.processDynamicTernaryProps(templateElement);
+        const uniqueClasses = [...new Set(staticClassNames)];
+        if (uniqueClasses.length === 0 && conditionalExpressions.length === 0)
+            return null;
+        return {
+            staticClasses: uniqueClasses.join(" "),
+            conditionalExpressions,
+        };
+    }
+    // Builds a standalone layoutClassName attribute value string
+    buildLayoutClassNameAttr(result) {
+        const { staticClasses, conditionalExpressions } = result;
+        if (conditionalExpressions.length === 0) {
+            return `'${staticClasses}'`;
+        }
+        const parts = [];
+        if (staticClasses) {
+            parts.push(JSON.stringify(staticClasses));
+        }
+        for (const ce of conditionalExpressions) {
+            const cond = (0, utils_browser_1.modifyExpression)(ce.condition);
+            parts.push(`(${cond} ? ${JSON.stringify(ce.trueClasses)} : ${JSON.stringify(ce.falseClasses)})`);
+        }
+        return `{[${parts.join(", ")}].filter(Boolean).join(" ")}`;
+    }
+    // Builds layoutClassName expression for list template itemAttrs
+    buildItemAttrsClassName(result) {
+        const { staticClasses, conditionalExpressions } = result;
+        if (conditionalExpressions.length === 0) {
+            return JSON.stringify(staticClasses);
+        }
+        const parts = [];
+        if (staticClasses) {
+            parts.push(JSON.stringify(staticClasses));
+        }
+        for (const ce of conditionalExpressions) {
+            const cond = (0, utils_browser_1.modifyExpression)(ce.condition);
+            parts.push(`(${cond} ? ${JSON.stringify(ce.trueClasses)} : ${JSON.stringify(ce.falseClasses)})`);
+        }
+        return `[${parts.join(", ")}].filter(Boolean).join(" ")`;
+    }
+    // Returns only dynamically generated CSS rules (predefined entries are filtered out)
+    getDynamicCssRules() {
+        return Array.from(this.registry.values()).filter(Boolean);
+    }
+}
+exports.AutolayoutCodegen = AutolayoutCodegen;
+//# sourceMappingURL=widget-inline-style-processor.js.map