@lucca-front/ng 21.1.0-split.0 → 21.1.1-rc.1

package/schematics/color-text/index.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const css_mapper_1 = require("../lib/css-mapper");
-const lf_schematic_context_1 = require("../lib/lf-schematic-context");
+const lib_1 = require("../lib");
 // 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)
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 require('@angular-devkit/schematics');
 exports.default = (options) => {
     return async (tree, context) => {
-        await lf_schematic_context_1.currentSchematicContext.init(context, options);
-        await new css_mapper_1.CssMapper(tree, {
+        await lib_1.currentSchematicContext.init(context, options);
+        await new lib_1.CssMapper(tree, {
             classes: {
                 'pr-u-textProduct': 'pr-u-colorTextProduct',
                 'pr-u-textPrimary': 'pr-u-colorTextProduct',

package/schematics/color-text/migration.spec.js

@@ -3,25 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const fs = require("fs");
 const glob = require("glob");
 const path = require("path");
-const migration_test_js_1 = require("../lib/migration-test.js");
+const lib_1 = require("../lib");
 const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
 const testsRoot = path.join(__dirname, 'tests');
 const files = fs.readdirSync(testsRoot);
 describe('Color Text Migration', () => {
     it('should update files', async () => {
         // Arrange
-        const tree = (0, migration_test_js_1.createTreeFromFiles)(testsRoot, files, '.input.');
-        const expectedTree = (0, migration_test_js_1.createTreeFromFiles)(testsRoot, files, '.output.');
+        const tree = (0, lib_1.createTreeFromFiles)(testsRoot, files, '.input.');
+        const expectedTree = (0, lib_1.createTreeFromFiles)(testsRoot, files, '.output.');
         // Act
         try {
-            await (0, migration_test_js_1.runSchematic)('collection', collectionPath, 'color-text', { skipInstallation: true }, tree);
+            await (0, lib_1.runSchematic)('collection', collectionPath, 'color-text', { skipInstallation: true }, tree);
         }
         catch (error) {
             // eslint-disable-next-line no-console
             console.log(error);
         }
         // Assert
-        (0, migration_test_js_1.expectTree)(tree).toMatchTree(expectedTree);
+        (0, lib_1.expectTree)(tree).toMatchTree(expectedTree);
     });
     // Use this to migrate @lucca-front/* packages
     it.skip('should migrate @lucca-front/*', async () => {
@@ -33,10 +33,10 @@ describe('Color Text Migration', () => {
             ...glob.sync('packages/ng/**/*', { cwd: lfRoot, nodir: true, ignore: ['**/schematics/**'] }),
             ...glob.sync('stories/**', { cwd: lfRoot, nodir: true }),
         ];
-        const treeOriginalTree = (0, migration_test_js_1.createTreeFromFiles)(lfRoot, lfFiles, '.');
-        const tree = (0, migration_test_js_1.createTreeFromFiles)(lfRoot, lfFiles, '.');
+        const treeOriginalTree = (0, lib_1.createTreeFromFiles)(lfRoot, lfFiles, '.');
+        const tree = (0, lib_1.createTreeFromFiles)(lfRoot, lfFiles, '.');
         // Act
-        await (0, migration_test_js_1.runSchematic)('collection', collectionPath, 'color-text', { skipInstallation: true }, tree);
+        await (0, lib_1.runSchematic)('collection', collectionPath, 'color-text', { skipInstallation: true }, tree);
         // Assert
         tree.visit((p, entry) => {
             const original = treeOriginalTree.get(p)?.content.toString() || '';

package/schematics/component-path/index.js

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const component_mapper_1 = require("../lib/component-mapper");
-const lf_schematic_context_1 = require("../lib/lf-schematic-context");
+const lib_1 = require("../lib");
 // 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)
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 require('@angular-devkit/schematics');
 exports.default = (options) => {
     return async (tree, context) => {
-        await lf_schematic_context_1.currentSchematicContext.init(context, options);
-        new component_mapper_1.ComponentMapper(tree, {
+        await lib_1.currentSchematicContext.init(context, options);
+        new lib_1.ComponentMapper(tree, {
             paths: {
                 "@lucca-front/ng/scrollBox": "@lucca-front/ng/scroll-box",
                 "@lucca-front/ng/segmentedControl": "@lucca-front/ng/segmented-control",

package/schematics/component-path/migration.spec.js

@@ -3,25 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const fs = require("fs");
 const glob = require("glob");
 const path = require("path");
-const migration_test_js_1 = require("../lib/migration-test.js");
+const lib_1 = require("../lib");
 const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
 const testsRoot = path.join(__dirname, 'tests');
 const files = fs.readdirSync(testsRoot);
 describe('Component path Migration', () => {
     it('should update files', async () => {
         // Arrange
-        const tree = (0, migration_test_js_1.createTreeFromFiles)(testsRoot, files, '.input.');
-        const expectedTree = (0, migration_test_js_1.createTreeFromFiles)(testsRoot, files, '.output.');
+        const tree = (0, lib_1.createTreeFromFiles)(testsRoot, files, '.input.');
+        const expectedTree = (0, lib_1.createTreeFromFiles)(testsRoot, files, '.output.');
         // Act
         try {
-            await (0, migration_test_js_1.runSchematic)('collection', collectionPath, 'component-path', { skipInstallation: true }, tree);
+            await (0, lib_1.runSchematic)('collection', collectionPath, 'component-path', { skipInstallation: true }, tree);
         }
         catch (error) {
             //eslint-disable-next-line no-console
             console.log(error);
         }
         // Assert
-        (0, migration_test_js_1.expectTree)(tree).toMatchTree(expectedTree);
+        (0, lib_1.expectTree)(tree).toMatchTree(expectedTree);
     });
     // Use this to migrate @lucca-front/* packages
     it.skip('should migrate @lucca-front/*', async () => {
@@ -33,10 +33,10 @@ describe('Component path Migration', () => {
             ...glob.sync('packages/ng/**/*', { cwd: lfRoot, nodir: true, ignore: ['**/schematics/**'] }),
             ...glob.sync('stories/**', { cwd: lfRoot, nodir: true }),
         ];
-        const treeOriginalTree = (0, migration_test_js_1.createTreeFromFiles)(lfRoot, lfFiles, '.');
-        const tree = (0, migration_test_js_1.createTreeFromFiles)(lfRoot, lfFiles, '.');
+        const treeOriginalTree = (0, lib_1.createTreeFromFiles)(lfRoot, lfFiles, '.');
+        const tree = (0, lib_1.createTreeFromFiles)(lfRoot, lfFiles, '.');
         // Act
-        await (0, migration_test_js_1.runSchematic)('collection', collectionPath, 'component-path', { skipInstallation: true }, tree);
+        await (0, lib_1.runSchematic)('collection', collectionPath, 'component-path', { skipInstallation: true }, tree);
         // Assert
         tree.visit((p, entry) => {
             const original = treeOriginalTree.get(p)?.content.toString() || '';

package/schematics/empty-state-title/index.js

@@ -1,21 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const angular_template_1 = require("../lib/angular-template");
-const schematics_1 = require("../lib/schematics");
-const lf_schematic_context_1 = require("../lib/lf-schematic-context");
+const lib_1 = require("../lib");
 // 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)
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 require('@angular-devkit/schematics');
 exports.default = (options) => {
     return async (tree, context) => {
-        await lf_schematic_context_1.currentSchematicContext.init(context, options);
+        await lib_1.currentSchematicContext.init(context, options);
         tree.visit((path, entry) => {
             if (path.includes('node_modules') || !entry) {
                 return;
             }
-            (0, schematics_1.migrateFile)(path, entry, tree, (content) => (0, angular_template_1.updateAngularTemplate)(path, content, (template) => {
-                template = (0, angular_template_1.replaceComponentInputName)('lu-empty-state-page', 'title', 'heading', template);
-                template = (0, angular_template_1.replaceComponentInputName)('lu-empty-state-section', 'title', 'heading', template);
+            (0, lib_1.migrateFile)(path, entry, tree, (content) => (0, lib_1.updateAngularTemplate)(path, content, (template) => {
+                template = (0, lib_1.replaceComponentInputName)('lu-empty-state-page', 'title', 'heading', template);
+                template = (0, lib_1.replaceComponentInputName)('lu-empty-state-section', 'title', 'heading', template);
                 return template;
             }));
         });

package/schematics/empty-state-title/migration.spec.js

@@ -2,24 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const fs = require("fs");
 const path = require("path");
-const migration_test_js_1 = require("../lib/migration-test.js");
+const lib_1 = require("../lib");
 const collectionPath = path.normalize(path.join(__dirname, '..', 'migrations.json'));
 const testsRoot = path.join(__dirname, 'tests');
 const files = fs.readdirSync(testsRoot);
 describe('Empty state title migration', () => {
     it('should update files', async () => {
         // Arrange
-        const tree = (0, migration_test_js_1.createTreeFromFiles)(testsRoot, files, '.input.');
-        const expectedTree = (0, migration_test_js_1.createTreeFromFiles)(testsRoot, files, '.output.');
+        const tree = (0, lib_1.createTreeFromFiles)(testsRoot, files, '.input.');
+        const expectedTree = (0, lib_1.createTreeFromFiles)(testsRoot, files, '.output.');
         // Act
         try {
-            await (0, migration_test_js_1.runSchematic)('collection', collectionPath, 'empty-state-heading', { skipInstallation: true }, tree);
+            await (0, lib_1.runSchematic)('collection', collectionPath, 'empty-state-heading', { skipInstallation: true }, tree);
         }
         catch (error) {
             // eslint-disable-next-line no-console
             console.log(error);
         }
         // Assert
-        (0, migration_test_js_1.expectTree)(tree).toMatchTree(expectedTree);
+        (0, lib_1.expectTree)(tree).toMatchTree(expectedTree);
     });
 });

package/schematics/lib/html-ast.js

@@ -77,9 +77,17 @@ class HtmlAstVisitor {
                 }
             }
             else if (node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstSwitchBlock) {
-                node.cases.forEach((caseNode) => {
-                    this.visit(cb, caseNode.children, node);
-                });
+                if ('groups' in node) {
+                    node.groups.forEach((groupNode) => {
+                        this.visit(cb, groupNode.children, node);
+                    });
+                }
+                // TODO Remove when Angular 21 is no longer supported
+                if ('cases' in node) {
+                    node.cases.forEach((caseNode) => {
+                        this.visit(cb, caseNode.children, node);
+                    });
+                }
             }
             else if (node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstDeferredBlock || node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstElement || node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstTemplate) {
                 // Visit @defer and classic AST elements

package/schematics/lib/index.js

@@ -0,0 +1,29 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./angular-component-ast"), exports);
+__exportStar(require("./angular-template"), exports);
+__exportStar(require("./component-mapper"), exports);
+__exportStar(require("./css-mapper"), exports);
+__exportStar(require("./file-update"), exports);
+__exportStar(require("./html-ast"), exports);
+__exportStar(require("./lf-schematic-context"), exports);
+__exportStar(require("./migration-test"), exports);
+__exportStar(require("./schematic.utils"), exports);
+__exportStar(require("./schematics"), exports);
+__exportStar(require("./scss-ast"), exports);
+__exportStar(require("./scss-value-ast"), exports);
+__exportStar(require("./typescript-ast"), exports);

package/schematics/lib/schematic.utils.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.camelize = camelize;
 exports.pascalize = pascalize;
 exports.expand = expand;
+exports.isInterestingNode = isInterestingNode;
+const lf_schematic_context_1 = require("./lf-schematic-context");
 function camelize(str) {
     return str[0].toLowerCase() + str.slice(1);
 }
@@ -27,3 +29,6 @@ function expand(rawMapping, mappingProps) {
         return values;
     }));
 }
+function isInterestingNode(node) {
+    return node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstElement;
+}

package/schematics/lu-button/index.js

@@ -1,20 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const typescript_1 = require("typescript");
-const lf_schematic_context_1 = require("../lib/lf-schematic-context");
-const schematics_1 = require("../lib/schematics");
+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 lf_schematic_context_1.currentSchematicContext.init(context, options);
+        await lib_1.currentSchematicContext.init(context, options);
         tree.visit((path, entry) => {
             if (path.includes('node_modules') || !entry) {
                 return;
             }
             if (path.endsWith('.ts')) {
-                (0, schematics_1.migrateFile)(path, entry, tree, (content) => {
+                (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-button/migration.js

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.migrateComponent = migrateComponent;
 const change_1 = require("@schematics/angular/utility/change");
-const angular_component_ast_1 = require("../lib/angular-component-ast");
-const angular_template_1 = require("../lib/angular-template");
-const html_ast_js_1 = require("../lib/html-ast.js");
-const lf_schematic_context_1 = require("../lib/lf-schematic-context");
+const lib_1 = require("../lib");
 function migrateComponent(sourceFile, path, tree) {
     const cssButtons = findCssButtons(sourceFile, path, tree);
     if (cssButtons.length > 0) {
@@ -66,7 +63,7 @@ function migrateComponent(sourceFile, path, tree) {
             }
         });
         // Add import if needed
-        (0, change_1.applyToUpdateRecorder)(tsUpdate, [(0, angular_component_ast_1.insertTSImportIfNeeded)(sourceFile, path, 'ButtonComponent', '@lucca-front/ng/button'), (0, angular_component_ast_1.insertAngularImportIfNeeded)(sourceFile, path, 'ButtonComponent')]);
+        (0, change_1.applyToUpdateRecorder)(tsUpdate, [(0, lib_1.insertTSImportIfNeeded)(sourceFile, path, 'ButtonComponent', '@lucca-front/ng/button'), (0, lib_1.insertAngularImportIfNeeded)(sourceFile, path, 'ButtonComponent')]);
         tree.commitUpdate(tsUpdate);
         if (!isInlineTemplate) {
             tree.commitUpdate(templateUpdate);
@@ -76,11 +73,11 @@ function migrateComponent(sourceFile, path, tree) {
 }
 function findCssButtons(sourceFile, basePath, tree) {
     const buttons = [];
-    const ngTemplates = (0, angular_template_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, basePath);
+    const ngTemplates = (0, lib_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, basePath);
     ngTemplates.forEach((template) => {
-        const htmlAst = new html_ast_js_1.HtmlAst(template.content);
+        const htmlAst = new lib_1.HtmlAst(template.content);
         htmlAst.visitNodes((node) => {
-            if (isInterestingNode(node) && ["button", "a"].includes(node.name)) {
+            if ((0, lib_1.isInterestingNode)(node) && ["button", "a"].includes(node.name)) {
                 const classes = node.attributes.find(attr => attr.name === 'class')?.value || "";
                 if (classes.split(" ").includes("button")) {
                     const inputs = {
@@ -121,6 +118,3 @@ function getButtonType(classes) {
     }
     return '';
 }
-function isInterestingNode(node) {
-    return node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstElement;
-}

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

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const path = require("path");
-const migration_test_js_1 = require("../lib/migration-test.js");
+const lib_1 = require("../lib");
 const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
 const testsRoot = path.join(__dirname, 'tests');
 describe('luButton Migration', () => {
     it('should handle basic case files', async () => {
         // Arrange
-        const tree = (0, migration_test_js_1.createTreeFromFolder)(path.join(testsRoot, 'input'));
-        const expectedTree = (0, migration_test_js_1.createTreeFromFolder)(path.join(testsRoot, 'output'));
+        const tree = (0, lib_1.createTreeFromFolder)(path.join(testsRoot, 'input'));
+        const expectedTree = (0, lib_1.createTreeFromFolder)(path.join(testsRoot, 'output'));
         // Act
         try {
-            await (0, migration_test_js_1.runSchematic)('collection', collectionPath, 'lu-button', { skipInstallation: true }, tree);
+            await (0, lib_1.runSchematic)('collection', collectionPath, 'lu-button', { skipInstallation: true }, tree);
         }
         catch (error) {
             // eslint-disable-next-line no-console
             console.log(error);
         }
         // Assert
-        (0, migration_test_js_1.expectTree)(tree).toMatchTree(expectedTree);
+        (0, lib_1.expectTree)(tree).toMatchTree(expectedTree);
     });
 });

package/schematics/lu-container/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')) {
+                (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-container/migration.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateComponent = migrateComponent;
+const change_1 = require("@schematics/angular/utility/change");
+const lib_1 = require("../lib");
+function migrateComponent(sourceFile, path, tree) {
+    const htmlContainers = findHTMLContainers(sourceFile, path, tree);
+    if (htmlContainers.length > 0) {
+        const tsUpdate = tree.beginUpdate(path);
+        const isInlineTemplate = htmlContainers[0].filePath === path;
+        const templateUpdate = isInlineTemplate ? tsUpdate : tree.beginUpdate(htmlContainers[0].filePath);
+        htmlContainers.forEach((container) => {
+            const classesNode = container.node.attributes.find(attr => attr.name === 'class');
+            const containerNodeLength = container.node.name.length;
+            const hasAriaHidden = container.node.attributes.find(attr => attr.name === 'aria-hidden');
+            const hasStyle = container.node.attributes.find(attr => attr.name === 'style');
+            // remove element name attribute
+            templateUpdate.remove(container.nodeOffset + container.node.startSourceSpan.start.offset + 1, containerNodeLength);
+            if (classesNode && classesNode.keySpan) {
+                /**
+                 * Add stuff
+                 */
+                let thingsToAdd = `lu-container${hasThingsToAdd(container.inputs) || hasAriaHidden || hasStyle ? '' : ' '}`;
+                if (container.inputs.center) {
+                    thingsToAdd += ` center`;
+                }
+                if (container.inputs.overflow) {
+                    thingsToAdd += ` overflow`;
+                }
+                if (container.inputs.max) {
+                    thingsToAdd += ` max="${container.inputs.max}"`;
+                }
+                // with content
+                if (container.node.children.length > 0 && container.node.endSourceSpan) {
+                    templateUpdate.remove(container.nodeOffset + container.node.endSourceSpan.start.offset + 1, containerNodeLength + 1);
+                    templateUpdate.insertRight(container.nodeOffset + container.node.startSourceSpan.start.offset + 1, thingsToAdd);
+                    templateUpdate.insertLeft(container.nodeOffset + container.node.endSourceSpan.start.offset + 1, '/lu-container');
+                }
+                // without content
+                else if (!container.node.isSelfClosing) {
+                    const endSpanOffset = container.node.endSourceSpan?.start.offset || -1;
+                    templateUpdate.remove(container.nodeOffset + container.node.startSourceSpan.end.offset, endSpanOffset - container.node.startSourceSpan.end.offset);
+                    if (container.node.endSourceSpan?.start?.offset) {
+                        templateUpdate.remove(container.nodeOffset + container.node.endSourceSpan?.start?.offset, container.node.endSourceSpan?.toString().length);
+                    }
+                    templateUpdate.insertRight(container.nodeOffset + container.node.startSourceSpan.start.offset + 1, thingsToAdd);
+                    templateUpdate.insertRight(container.nodeOffset + container.node.startSourceSpan.end.offset - 1, `${hasThingsToAdd(container.inputs) || hasAriaHidden || hasStyle ? ' ' : ''}/`);
+                }
+                /**
+                 * Modify classes
+                 */
+                if (classesNode && classesNode.keySpan) {
+                    const classes = classesNode.value;
+                    const cleanedClasses = classes.split(' ').filter(c => {
+                        return ![`mod-max${container.inputs.max}`, `mod-overflow`, `mod-center`, `container`].includes(c);
+                    }).join(' ');
+                    templateUpdate.remove(container.nodeOffset + classesNode.keySpan.start.offset - 1, classesNode.sourceSpan.toString().length + 1);
+                    if (cleanedClasses) {
+                        templateUpdate.insertRight(container.nodeOffset + classesNode.keySpan.start.offset, `${hasThingsToAdd(container.inputs) || hasAriaHidden || hasStyle ? ' ' : ''}class="${cleanedClasses}"`);
+                    }
+                }
+            }
+        });
+        // Add import if needed
+        (0, change_1.applyToUpdateRecorder)(tsUpdate, [(0, lib_1.insertTSImportIfNeeded)(sourceFile, path, 'ContainerComponent', '@lucca-front/ng/container'), (0, lib_1.insertAngularImportIfNeeded)(sourceFile, path, 'ContainerComponent')]);
+        tree.commitUpdate(tsUpdate);
+        if (!isInlineTemplate) {
+            tree.commitUpdate(templateUpdate);
+        }
+    }
+    return tree.readText(path);
+}
+function findHTMLContainers(sourceFile, basePath, tree) {
+    const htmlContainer = [];
+    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)) {
+                const classes = node.attributes.find(attr => attr.name === 'class')?.value;
+                // match check if it's only "container" not container-custom ...
+                if (classes?.includes("container") && classes?.match(/(^|\s)container(\s|$)/)) {
+                    const container = classes.split(' ').find(c => c.startsWith('container'));
+                    if (container) {
+                        const inputs = {
+                            max: classes.split(' ').find(c => /mod-max(M|L|XL|XXL|XXXL)/.test(c))?.replace('mod-max', ''),
+                            center: classes.includes('mod-center') ? true : undefined,
+                            overflow: classes.includes('mod-overflow') ? true : undefined,
+                        };
+                        const container = {
+                            node: node,
+                            inputs,
+                            nodeOffset: template.offsetStart,
+                            filePath: template.filePath,
+                            componentTS: sourceFile,
+                        };
+                        htmlContainer.push(container);
+                    }
+                }
+            }
+        });
+    });
+    return htmlContainer;
+}
+function hasThingsToAdd(inputs) {
+    if (inputs?.max) {
+        return true;
+    }
+    if (inputs?.overflow) {
+        return true;
+    }
+    if (inputs?.center) {
+        return true;
+    }
+    return false;
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const path = require("path");
+const lib_1 = require("../lib");
+const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
+const testsRoot = path.join(__dirname, 'tests');
+describe('lu-container 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-container', { 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-container/schema.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "LuccaFrontLuContainer",
+  "title": "Migrate HTML Container to the new lu-container 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/index.js

@@ -1,20 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const typescript_1 = require("typescript");
-const lf_schematic_context_1 = require("../lib/lf-schematic-context");
-const schematics_1 = require("../lib/schematics");
+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 lf_schematic_context_1.currentSchematicContext.init(context, options);
+        await lib_1.currentSchematicContext.init(context, options);
         tree.visit((path, entry) => {
             if (path.includes('node_modules') || !entry) {
                 return;
             }
             if (path.endsWith('.ts')) {
-                (0, schematics_1.migrateFile)(path, entry, tree, (content) => {
+                (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-icon/migration.js

@@ -2,10 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.migrateComponent = migrateComponent;
 const change_1 = require("@schematics/angular/utility/change");
-const angular_component_ast_1 = require("../lib/angular-component-ast");
-const angular_template_1 = require("../lib/angular-template");
-const html_ast_js_1 = require("../lib/html-ast.js");
-const lf_schematic_context_1 = require("../lib/lf-schematic-context");
+const lib_1 = require("../lib");
 function migrateComponent(sourceFile, path, tree) {
     const htmlIcons = findHTMLIcons(sourceFile, path, tree);
     if (htmlIcons.length > 0) {
@@ -69,7 +66,7 @@ function migrateComponent(sourceFile, path, tree) {
             }
         });
         // Add import if needed
-        (0, change_1.applyToUpdateRecorder)(tsUpdate, [(0, angular_component_ast_1.insertTSImportIfNeeded)(sourceFile, path, 'IconComponent', '@lucca-front/ng/icon'), (0, angular_component_ast_1.insertAngularImportIfNeeded)(sourceFile, path, 'IconComponent')]);
+        (0, change_1.applyToUpdateRecorder)(tsUpdate, [(0, lib_1.insertTSImportIfNeeded)(sourceFile, path, 'IconComponent', '@lucca-front/ng/icon'), (0, lib_1.insertAngularImportIfNeeded)(sourceFile, path, 'IconComponent')]);
         tree.commitUpdate(tsUpdate);
         if (!isInlineTemplate) {
             tree.commitUpdate(templateUpdate);
@@ -79,11 +76,11 @@ function migrateComponent(sourceFile, path, tree) {
 }
 function findHTMLIcons(sourceFile, basePath, tree) {
     const htmlIcons = [];
-    const ngTemplates = (0, angular_template_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, basePath);
+    const ngTemplates = (0, lib_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, basePath);
     ngTemplates.forEach((template) => {
-        const htmlAst = new html_ast_js_1.HtmlAst(template.content);
+        const htmlAst = new lib_1.HtmlAst(template.content);
         htmlAst.visitNodes((node, parent) => {
-            if (isInterestingNode(node)) {
+            if ((0, lib_1.isInterestingNode)(node)) {
                 const classes = node.attributes.find(attr => attr.name === 'class')?.value;
                 if (classes?.includes("lucca-icon")) {
                     const iconClass = classes.split(' ').find(c => c.startsWith('icon-'));
@@ -98,12 +95,12 @@ function findHTMLIcons(sourceFile, basePath, tree) {
                             filePath: template.filePath,
                             componentTS: sourceFile
                         };
-                        const siblings = isInterestingNode(parent) ? parent?.children : htmlAst.nodes;
+                        const siblings = (0, lib_1.isInterestingNode)(parent) ? parent?.children : htmlAst.nodes;
                         if (siblings.length > 0) {
                             const possibleAltSpan = siblings.find(child => {
-                                return isInterestingNode(child) && child !== node;
+                                return (0, lib_1.isInterestingNode)(child) && child !== node;
                             });
-                            if (possibleAltSpan && isInterestingNode(possibleAltSpan)) {
+                            if (possibleAltSpan && (0, lib_1.isInterestingNode)(possibleAltSpan)) {
                                 const childClasses = possibleAltSpan.attributes.find(attr => attr.name === 'class')?.value;
                                 // We know it's one of these types but TS doesn't find that info from the above call so here we go again
                                 if (childClasses === 'pr-u-mask') {
@@ -120,6 +117,3 @@ function findHTMLIcons(sourceFile, basePath, tree) {
     });
     return htmlIcons;
 }
-function isInterestingNode(node) {
-    return node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstElement;
-}