@lucca-front/ng 22.0.0-rc.2 → 22.0.0-rc.4

package/schematics/lib/local-deps/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "postcss": "8.5.3",
+    "postcss": "8.5.10",
     "postcss-scss": "4.0.9",
     "postcss-selector-parser": "7.1.0",
     "postcss-value-parser": "4.2.0"

package/schematics/lib/local-deps/postcss.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.postCss = void 0;
-exports.postCss = require("postcss");
+exports.postCss = __importStar(require("postcss"));

package/schematics/lib/migration-test.js

@@ -1,4 +1,7 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTreeFromFiles = createTreeFromFiles;
 exports.createTreeFromFolder = createTreeFromFolder;
@@ -7,8 +10,8 @@ exports.runSchematic = runSchematic;
 exports.expectTree = expectTree;
 const schematics_1 = require("@angular-devkit/schematics");
 const testing_1 = require("@angular-devkit/schematics/testing");
-const fs_1 = require("fs");
-const path_1 = require("path");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
 const node_fs_1 = require("node:fs");
 function createTreeFromFiles(testsRoot, files, filePartFilter) {
     const tree = new testing_1.UnitTestTree(schematics_1.Tree.empty());

package/schematics/lib/scss-ast.js

@@ -10,6 +10,7 @@ exports.updateCSSVariableNames = updateCSSVariableNames;
 exports.removeImportNode = removeImportNode;
 exports.commentNode = commentNode;
 exports.wrapWithCalcFunctionNode = wrapWithCalcFunctionNode;
+exports.updateRgbaToTransparentize = updateRgbaToTransparentize;
 const scss_value_ast_js_1 = require("./scss-value-ast.js");
 function removeContainerIfEmpty(node) {
     if (!node) {
@@ -193,6 +194,58 @@ function wrapWithCalcFunctionNode(rootValueNode, node, postcssValueParser) {
         rootValueNode.nodes = newNodes;
     }
 }
+const COLOR_UTILS_IMPORT = '@lucca-front/scss/src/commons/utils/color';
+/**
+ * Transforms rgba(var(--x-rgb), alpha) → color.transparentize(var(--palette-x), alpha)
+ * and rgb(var(--x-rgb)) → var(--palette-x).
+ * Adds @use for the color utils if any rgba replacement happened.
+ */
+function updateRgbaToTransparentize(root, rgbVarMappings, postcssValueParser, postCss) {
+    let hasRgba = false;
+    root.walkDecls((decl) => {
+        const valueAst = new scss_value_ast_js_1.ScssValueAst(decl.value, postcssValueParser);
+        let changed = false;
+        valueAst.walkFunction(/^rgba?$/, (funcNode) => {
+            const isRgba = funcNode.value === 'rgba';
+            const varNode = funcNode.nodes.find((n) => n.type === 'function' && n.value === 'var');
+            if (!varNode) {
+                return;
+            }
+            const varName = varNode.nodes[0]?.value ?? '';
+            const newVarName = rgbVarMappings[varName];
+            if (!newVarName) {
+                return;
+            }
+            const hasAlpha = funcNode.nodes.some((n) => n.type === 'word');
+            if (isRgba || hasAlpha) {
+                varNode.nodes = [{ type: 'word', value: newVarName, sourceIndex: 0, sourceEndIndex: newVarName.length }];
+                funcNode.value = 'color.transparentize';
+                hasRgba = true;
+            }
+            else {
+                // rgb(var(--x-rgb)) → var(--palette-x)
+                funcNode.value = 'var';
+                funcNode.nodes = [{ type: 'word', value: newVarName, sourceIndex: 0, sourceEndIndex: newVarName.length }];
+            }
+            changed = true;
+        });
+        if (changed) {
+            decl.value = valueAst.toString();
+        }
+    });
+    if (!hasRgba) {
+        return;
+    }
+    let colorImportExists = false;
+    root.walkAtRules(/(import|use)/, (rule) => {
+        if (rule.params.includes(COLOR_UTILS_IMPORT)) {
+            colorImportExists = true;
+        }
+    });
+    if (!colorImportExists) {
+        addMixinImport(root, COLOR_UTILS_IMPORT, postCss);
+    }
+}
 function split(array, predicate) {
     const chunks = [];
     const separators = [];

package/schematics/lu-button/migration.spec.js

@@ -1,6 +1,39 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const path = require("path");
+const path = __importStar(require("path"));
 const lib_1 = require("../lib");
 const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
 const testsRoot = path.join(__dirname, 'tests');

package/schematics/lu-container/migration.spec.js

@@ -1,6 +1,39 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const path = require("path");
+const path = __importStar(require("path"));
 const lib_1 = require("../lib");
 const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
 const testsRoot = path.join(__dirname, 'tests');

package/schematics/lu-grid/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const typescript_1 = require("typescript");
+const lib_1 = require("../lib");
+const migration_1 = require("./migration");
+// Nx need to see "@angular-devkit/schematics" in order to run this migration correctly (see https://github.com/nrwl/nx/blob/d9fed4b832bf01d1b9a44ae9e486a5e5cd2d2253/packages/nx/src/command-line/migrate/migrate.ts#L1729-L1738)
+require('@angular-devkit/schematics');
+exports.default = (options) => {
+    return async (tree, context) => {
+        await lib_1.currentSchematicContext.init(context, options);
+        tree.visit((path, entry) => {
+            if (path.includes('node_modules') || !entry) {
+                return;
+            }
+            if (path.endsWith('.ts') && !path.endsWith('.d.ts')) {
+                (0, lib_1.migrateFile)(path, entry, tree, (content) => {
+                    const sourceFile = (0, typescript_1.createSourceFile)(path, content, typescript_1.ScriptTarget.ESNext);
+                    return (0, migration_1.migrateComponent)(sourceFile, path, tree);
+                });
+            }
+        });
+    };
+};

package/schematics/lu-grid/migration.js

@@ -0,0 +1,237 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateComponent = migrateComponent;
+const change_1 = require("@schematics/angular/utility/change");
+const lib_1 = require("../lib");
+const migration_utils_1 = require("./migration.utils");
+// --- Main migration ---
+function migrateComponent(sourceFile, path, tree) {
+    const htmlGrids = findHTMLGrids(sourceFile, path, tree);
+    const htmlGridColumns = findHTMLGridColumns(sourceFile, path, tree);
+    if (htmlGrids.length === 0 && htmlGridColumns.length === 0) {
+        return tree.readText(path);
+    }
+    const tsUpdate = tree.beginUpdate(path);
+    const firstItem = htmlGrids[0] || htmlGridColumns[0];
+    const isInlineTemplate = firstItem.filePath === path;
+    const templateUpdate = isInlineTemplate ? tsUpdate : tree.beginUpdate(firstItem.filePath);
+    htmlGrids.forEach((grid) => migrateGridNode(grid, templateUpdate));
+    htmlGridColumns.forEach((col) => migrateGridColumnNode(col, templateUpdate));
+    const changesToApply = [];
+    if (htmlGrids.length > 0) {
+        changesToApply.push((0, lib_1.insertTSImportIfNeeded)(sourceFile, path, 'GridComponent', '@lucca-front/ng/grid'), (0, lib_1.insertAngularImportIfNeeded)(sourceFile, path, 'GridComponent'));
+    }
+    if (htmlGridColumns.length > 0) {
+        changesToApply.push((0, lib_1.insertTSImportIfNeeded)(sourceFile, path, 'GridColumnComponent', '@lucca-front/ng/grid'), (0, lib_1.insertAngularImportIfNeeded)(sourceFile, path, 'GridColumnComponent'));
+    }
+    (0, change_1.applyToUpdateRecorder)(tsUpdate, changesToApply);
+    tree.commitUpdate(tsUpdate);
+    if (!isInlineTemplate) {
+        tree.commitUpdate(templateUpdate);
+    }
+    return tree.readText(path);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function migrateGridNode(grid, templateUpdate) {
+    const { node, nodeOffset, inputs } = grid;
+    const divLength = node.name.length;
+    const classesNode = node.attributes.find((attr) => attr.name === 'class');
+    const styleNode = node.attributes.find((attr) => attr.name === 'style');
+    // Build inputs string (everything that comes after the element name)
+    let thingsToAdd = 'lu-grid';
+    if (inputs.mode) {
+        thingsToAdd += ` mode="${inputs.mode}"`;
+    }
+    if (inputs.columns) {
+        thingsToAdd += ` columns="${inputs.columns}"`;
+    }
+    // Remove element name 'div'
+    templateUpdate.remove(nodeOffset + node.startSourceSpan.start.offset + 1, divLength);
+    if (node.children.length > 0 && node.endSourceSpan) {
+        // Has children — replace end tag
+        templateUpdate.remove(nodeOffset + node.endSourceSpan.start.offset + 1, divLength + 1);
+        templateUpdate.insertRight(nodeOffset + node.startSourceSpan.start.offset + 1, thingsToAdd);
+        templateUpdate.insertLeft(nodeOffset + node.endSourceSpan.start.offset + 1, '/lu-grid');
+    }
+    else if (!node.isSelfClosing) {
+        // Empty, not self-closing
+        const endSpanOffset = node.endSourceSpan?.start.offset || -1;
+        templateUpdate.remove(nodeOffset + node.startSourceSpan.end.offset, endSpanOffset - node.startSourceSpan.end.offset);
+        if (node.endSourceSpan?.start?.offset) {
+            templateUpdate.remove(nodeOffset + node.endSourceSpan.start.offset, node.endSourceSpan.toString().length);
+        }
+        templateUpdate.insertRight(nodeOffset + node.startSourceSpan.start.offset + 1, thingsToAdd);
+        templateUpdate.insertRight(nodeOffset + node.startSourceSpan.end.offset - 1, ` /`);
+    }
+    // Modify class attribute — remove 'grid' and mode-related classes
+    if (classesNode && classesNode.keySpan) {
+        const classes = classesNode.value;
+        const cleanedClasses = classes.split(' ').filter((c) => c !== 'grid' && c !== 'mod-auto' && c !== 'mod-form').join(' ');
+        templateUpdate.remove(nodeOffset + classesNode.keySpan.start.offset - 1, classesNode.sourceSpan.toString().length + 1);
+        if (cleanedClasses) {
+            templateUpdate.insertRight(nodeOffset + classesNode.keySpan.start.offset, ` class="${cleanedClasses}"`);
+        }
+    }
+    // Modify style attribute — remove --grid-columns, keep the rest
+    if (styleNode && styleNode.keySpan) {
+        const cssProps = (0, migration_utils_1.parseCssCustomProperties)(styleNode.value);
+        const remaining = Object.entries(cssProps)
+            .filter(([key]) => key !== '--grid-columns')
+            .map(([key, val]) => `${key}: ${val}`)
+            .join('; ');
+        templateUpdate.remove(nodeOffset + styleNode.keySpan.start.offset - 1, styleNode.sourceSpan.toString().length + 1);
+        if (remaining) {
+            templateUpdate.insertRight(nodeOffset + styleNode.keySpan.start.offset, ` style="${remaining}"`);
+        }
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function migrateGridColumnNode(col, templateUpdate) {
+    const { node, nodeOffset, inputs, remainingStyle, extraClasses } = col;
+    const divLength = node.name.length;
+    const classesNode = node.attributes.find((attr) => attr.name === 'class');
+    const styleNode = node.attributes.find((attr) => attr.name === 'style');
+    // Build inputs string
+    let thingsToAdd = 'lu-grid-column';
+    if (inputs.colspan) {
+        thingsToAdd += ` colspan="${inputs.colspan}"`;
+    }
+    if (inputs.rowspan) {
+        thingsToAdd += ` rowspan="${inputs.rowspan}"`;
+    }
+    if (inputs.column) {
+        thingsToAdd += ` column="${inputs.column}"`;
+    }
+    if (inputs.row) {
+        thingsToAdd += ` row="${inputs.row}"`;
+    }
+    if (inputs.justify) {
+        thingsToAdd += ` justify="${inputs.justify}"`;
+    }
+    if (inputs.align) {
+        thingsToAdd += ` align="${inputs.align}"`;
+    }
+    if (inputs.responsive) {
+        const responsiveEntries = Object.entries(inputs.responsive)
+            .map(([key, val]) => `${key}: ${val}`)
+            .join(', ');
+        thingsToAdd += ` [responsive]="{ ${responsiveEntries} }"`;
+    }
+    // Remove element name 'div'
+    templateUpdate.remove(nodeOffset + node.startSourceSpan.start.offset + 1, divLength);
+    if (node.children.length > 0 && node.endSourceSpan) {
+        templateUpdate.remove(nodeOffset + node.endSourceSpan.start.offset + 1, divLength + 1);
+        templateUpdate.insertRight(nodeOffset + node.startSourceSpan.start.offset + 1, thingsToAdd);
+        templateUpdate.insertLeft(nodeOffset + node.endSourceSpan.start.offset + 1, '/lu-grid-column');
+    }
+    else if (!node.isSelfClosing) {
+        const endSpanOffset = node.endSourceSpan?.start.offset || -1;
+        templateUpdate.remove(nodeOffset + node.startSourceSpan.end.offset, endSpanOffset - node.startSourceSpan.end.offset);
+        if (node.endSourceSpan?.start?.offset) {
+            templateUpdate.remove(nodeOffset + node.endSourceSpan.start.offset, node.endSourceSpan.toString().length);
+        }
+        templateUpdate.insertRight(nodeOffset + node.startSourceSpan.start.offset + 1, thingsToAdd);
+        templateUpdate.insertRight(nodeOffset + node.startSourceSpan.end.offset - 1, ` /`);
+    }
+    // Class attribute: remove 'grid-column', keep extra classes
+    if (classesNode && classesNode.keySpan) {
+        templateUpdate.remove(nodeOffset + classesNode.keySpan.start.offset - 1, classesNode.sourceSpan.toString().length + 1);
+        if (extraClasses) {
+            templateUpdate.insertRight(nodeOffset + classesNode.keySpan.start.offset, ` class="${extraClasses}"`);
+        }
+    }
+    // Style attribute: remove grid-specific properties, keep the rest
+    if (styleNode && styleNode.keySpan) {
+        templateUpdate.remove(nodeOffset + styleNode.keySpan.start.offset - 1, styleNode.sourceSpan.toString().length + 1);
+        if (remainingStyle) {
+            templateUpdate.insertRight(nodeOffset + styleNode.keySpan.start.offset, ` style="${remainingStyle}"`);
+        }
+    }
+}
+// --- Finders ---
+function gridHasNonNeutralColumnChildren(node) {
+    return node.children.some((child) => {
+        if (!(0, lib_1.isInterestingNode)(child) || (0, migration_utils_1.isNeutralElement)(child.name)) {
+            return false;
+        }
+        const childClasses = child.attributes.find((attr) => attr.name === 'class')?.value;
+        return !!childClasses?.match(/(^|\s)grid-column(\s|$)/);
+    });
+}
+function findHTMLGrids(sourceFile, basePath, tree) {
+    const results = [];
+    const ngTemplates = (0, lib_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, basePath);
+    ngTemplates.forEach((template) => {
+        const htmlAst = new lib_1.HtmlAst(template.content);
+        htmlAst.visitNodes((node) => {
+            if (!(0, lib_1.isInterestingNode)(node) || !(0, migration_utils_1.isNeutralElement)(node.name)) {
+                return;
+            }
+            const classes = node.attributes.find((attr) => attr.name === 'class')?.value;
+            if (!classes?.match(/(^|\s)grid(\s|$)/)) {
+                return;
+            }
+            if (gridHasNonNeutralColumnChildren(node)) {
+                return;
+            }
+            const styleAttr = node.attributes.find((attr) => attr.name === 'style')?.value || '';
+            const cssProps = (0, migration_utils_1.parseCssCustomProperties)(styleAttr);
+            const classParts = classes.split(' ');
+            const extraClasses = classParts.filter((c) => c !== 'grid' && c !== 'mod-auto' && c !== 'mod-form').join(' ');
+            const inputs = {
+                mode: classParts.includes('mod-auto') ? 'auto' : classParts.includes('mod-form') ? 'form' : undefined,
+                columns: cssProps['--grid-columns'],
+                extraClasses: extraClasses || undefined,
+            };
+            results.push({
+                node,
+                inputs,
+                nodeOffset: template.offsetStart,
+                filePath: template.filePath,
+                componentTS: sourceFile,
+            });
+        });
+    });
+    return results;
+}
+function findHTMLGridColumns(sourceFile, basePath, tree) {
+    const results = [];
+    const ngTemplates = (0, lib_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, basePath);
+    ngTemplates.forEach((template) => {
+        const htmlAst = new lib_1.HtmlAst(template.content);
+        htmlAst.visitNodes((node, parent) => {
+            if (!(0, lib_1.isInterestingNode)(node)) {
+                return;
+            }
+            const classes = node.attributes.find((attr) => attr.name === 'class')?.value;
+            if (!classes?.match(/(^|\s)grid-column(\s|$)/)) {
+                return;
+            }
+            // Only migrate grid-column if its parent grid container is also being migrated
+            if (!(0, lib_1.isInterestingNode)(parent) || !(0, migration_utils_1.isNeutralElement)(parent.name)) {
+                return;
+            }
+            const parentClasses = parent.attributes.find((attr) => attr.name === 'class')?.value;
+            if (!parentClasses?.match(/(^|\s)grid(\s|$)/)) {
+                return;
+            }
+            if (gridHasNonNeutralColumnChildren(parent)) {
+                return;
+            }
+            const styleAttr = node.attributes.find((attr) => attr.name === 'style')?.value || '';
+            const { inputs, remainingStyle } = (0, migration_utils_1.extractGridColumnInputs)(styleAttr);
+            const classParts = classes.split(' ');
+            const extraClasses = classParts.filter((c) => c !== 'grid-column').join(' ');
+            results.push({
+                node,
+                inputs,
+                remainingStyle: remainingStyle || undefined,
+                extraClasses: extraClasses || undefined,
+                nodeOffset: template.offsetStart,
+                filePath: template.filePath,
+                componentTS: sourceFile,
+            });
+        });
+    });
+    return results;
+}

package/schematics/lu-grid/migration.spec.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const path = __importStar(require("path"));
+const lib_1 = require("../lib");
+const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
+const testsRoot = path.join(__dirname, 'tests');
+describe('lu-grid Migration', () => {
+    it('should handle basic case files', async () => {
+        // Arrange
+        const tree = (0, lib_1.createTreeFromFolder)(path.join(testsRoot, 'input'));
+        const expectedTree = (0, lib_1.createTreeFromFolder)(path.join(testsRoot, 'output'));
+        // Act
+        try {
+            await (0, lib_1.runSchematic)('collection', collectionPath, 'lu-grid', { skipInstallation: true }, tree);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+        // Assert
+        (0, lib_1.expectTree)(tree).toMatchTree(expectedTree);
+    });
+});

package/schematics/lu-grid/migration.utils.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseCssCustomProperties = parseCssCustomProperties;
+exports.extractGridColumnInputs = extractGridColumnInputs;
+exports.isNeutralElement = isNeutralElement;
+// --- CSS custom properties helpers ---
+function parseCssCustomProperties(style) {
+    const result = {};
+    style.split(';').map((p) => p.trim()).filter(Boolean).forEach((part) => {
+        const colonIdx = part.indexOf(':');
+        if (colonIdx === -1) {
+            return;
+        }
+        const prop = part.substring(0, colonIdx).trim();
+        const value = part.substring(colonIdx + 1).trim();
+        result[prop] = value;
+    });
+    return result;
+}
+// CSS custom properties that map directly to GridColumnComponent inputs
+const GRID_COLUMN_DIRECT_PROPS = {
+    '--grid-colspan': 'colspan',
+    '--grid-rowspan': 'rowspan',
+    '--grid-column': 'column',
+    '--grid-row': 'row',
+    '--grid-justify': 'justify',
+    '--grid-align': 'align',
+};
+// Prefix for responsive CSS custom properties
+const RESPONSIVE_PREFIX = '--grid-';
+function extractGridColumnInputs(style) {
+    const cssProps = parseCssCustomProperties(style);
+    const inputs = {};
+    const responsive = {};
+    const remaining = [];
+    for (const [prop, value] of Object.entries(cssProps)) {
+        if (GRID_COLUMN_DIRECT_PROPS[prop]) {
+            inputs[GRID_COLUMN_DIRECT_PROPS[prop]] = value;
+        }
+        else if (prop.startsWith(RESPONSIVE_PREFIX) && prop.includes('AtMedia')) {
+            // e.g. --grid-colspanAtMediaMinXS → colspanAtMediaMinXS
+            const key = prop.substring(RESPONSIVE_PREFIX.length);
+            responsive[key] = value;
+        }
+        else if (prop.startsWith('--grid-')) {
+            // Unknown grid property — drop it (it was grid-specific)
+        }
+        else {
+            remaining.push(`${prop}: ${value}`);
+        }
+    }
+    if (Object.keys(responsive).length > 0) {
+        inputs.responsive = responsive;
+    }
+    return { inputs, remainingStyle: remaining.join('; ') };
+}
+const NEUTRAL_HTML_ELEMENTS = ['div', 'span', 'section'];
+function isNeutralElement(name) {
+    return NEUTRAL_HTML_ELEMENTS.includes(name);
+}

package/schematics/lu-grid/schema.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "LuccaFrontLuGrid",
+  "title": "Migrate HTML Grid to the new lu-grid component",
+  "type": "object",
+  "properties": {
+    "dryRun": {
+      "type": "boolean",
+      "description": "Run through the migration without making any changes.",
+      "default": false
+    },
+    "skipInstall": {
+      "type": "boolean",
+      "description": "Skip installing dependencies.",
+      "default": false
+    },
+    "verbose": {
+      "type": "boolean",
+      "description": "Enable verbose logging.",
+      "default": false
+    }
+  }
+}

package/schematics/lu-icon/migration.spec.js

@@ -1,6 +1,39 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const path = require("path");
+const path = __importStar(require("path"));
 const lib_1 = require("../lib");
 const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
 const testsRoot = path.join(__dirname, 'tests');