@lucca-front/ng 21.0.3 → 21.1.0-rc.1

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');
+                }
+                // self closing
+                else {
+                    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;
-}

package/schematics/lu-icon/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('lu-icon 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-icon', { skipInstallation: true }, tree);
+            await (0, lib_1.runSchematic)('collection', collectionPath, 'lu-icon', { 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-loading/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-loading/migration.js

@@ -0,0 +1,136 @@
+"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 htmlLoadings = findHTMLLoadings(sourceFile, path, tree);
+    if (htmlLoadings.length > 0) {
+        const tsUpdate = tree.beginUpdate(path);
+        const isInlineTemplate = htmlLoadings[0].filePath === path;
+        const templateUpdate = isInlineTemplate ? tsUpdate : tree.beginUpdate(htmlLoadings[0].filePath);
+        htmlLoadings.forEach((loading) => {
+            const classesNode = loading.node.attributes.find(attr => attr.name === 'class');
+            const loadingNodeLength = loading.node.name.length;
+            const hasAriaHidden = loading.node.attributes.find(attr => attr.name === 'aria-hidden');
+            const hasStyle = loading.node.attributes.find(attr => attr.name === 'style');
+            // remove element name attribute
+            templateUpdate.remove(loading.nodeOffset + loading.node.startSourceSpan.start.offset + 1, loadingNodeLength);
+            if (classesNode && classesNode.keySpan) {
+                /**
+                 * Add stuff
+                 */
+                let thingsToAdd = `lu-loading${hasThingsToAdd(loading.inputs) || hasAriaHidden || hasStyle ? '' : ' '}`;
+                if (loading.inputs.block) {
+                    thingsToAdd += ` block`;
+                }
+                if (loading.inputs.invert) {
+                    thingsToAdd += ` invert`;
+                }
+                if (loading.inputs.size) {
+                    thingsToAdd += ` size="L"`;
+                }
+                if (loading.inputs.template) {
+                    thingsToAdd += ` template="${loading.inputs.template}"`;
+                }
+                // with content
+                if (loading.node.children.length > 0 && loading.node.endSourceSpan) {
+                    templateUpdate.remove(loading.nodeOffset + loading.node.endSourceSpan.start.offset + 1, loadingNodeLength + 1);
+                    templateUpdate.insertRight(loading.nodeOffset + loading.node.startSourceSpan.start.offset + 1, thingsToAdd);
+                    templateUpdate.insertLeft(loading.nodeOffset + loading.node.endSourceSpan.start.offset + 1, '/lu-loading');
+                }
+                // self closing
+                else {
+                    const endSpanOffset = loading.node.endSourceSpan?.start.offset || -1;
+                    templateUpdate.remove(loading.nodeOffset + loading.node.startSourceSpan.end.offset, endSpanOffset - loading.node.startSourceSpan.end.offset);
+                    if (loading.node.endSourceSpan?.start?.offset) {
+                        templateUpdate.remove(loading.nodeOffset + loading.node.endSourceSpan?.start?.offset, loading.node.endSourceSpan?.toString().length);
+                    }
+                    templateUpdate.insertRight(loading.nodeOffset + loading.node.startSourceSpan.start.offset + 1, thingsToAdd);
+                    templateUpdate.insertRight(loading.nodeOffset + loading.node.startSourceSpan.end.offset - 1, `${hasThingsToAdd(loading.inputs) || hasAriaHidden || hasStyle ? ' ' : ''}/`);
+                }
+                /**
+                 * Modify classes
+                 */
+                if (classesNode && classesNode.keySpan) {
+                    const classes = classesNode.value;
+                    const cleanedClasses = classes.split(' ').filter(c => {
+                        return ![`mod-L`, `mod-block`, `mod-invert`, `loading`, `mod-invert`, `mod-popin`, `mod-drawer`, `mod-fullPage`, `mod-fullpage`].includes(c);
+                    }).join(' ');
+                    templateUpdate.remove(loading.nodeOffset + classesNode.keySpan.start.offset - 1, classesNode.sourceSpan.toString().length + 1);
+                    if (cleanedClasses) {
+                        templateUpdate.insertRight(loading.nodeOffset + classesNode.keySpan.start.offset, `${hasThingsToAdd(loading.inputs) || hasAriaHidden || hasStyle ? ' ' : ''}class="${cleanedClasses}"`);
+                    }
+                }
+            }
+        });
+        // Add import if needed
+        (0, change_1.applyToUpdateRecorder)(tsUpdate, [(0, lib_1.insertTSImportIfNeeded)(sourceFile, path, 'LoadingComponent', '@lucca-front/ng/loading'), (0, lib_1.insertAngularImportIfNeeded)(sourceFile, path, 'LoadingComponent')]);
+        tree.commitUpdate(tsUpdate);
+        if (!isInlineTemplate) {
+            tree.commitUpdate(templateUpdate);
+        }
+    }
+    return tree.readText(path);
+}
+function findHTMLLoadings(sourceFile, basePath, tree) {
+    const htmlLoadings = [];
+    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 "loading" not loading-custom ...
+                if (classes?.includes("loading") && classes?.match(/(^|\s)loading(\s|$)/)) {
+                    const loading = classes.split(' ').find(c => c.startsWith('loading'));
+                    if (loading) {
+                        const inputs = {
+                            size: classes.split(' ').find(c => /mod-L/.test(c)),
+                            block: classes.includes('mod-block') ? true : undefined,
+                            invert: classes.includes('mod-invert') ? true : undefined,
+                            template: getLoadingTemplate(classes),
+                        };
+                        const loading = {
+                            node: node,
+                            inputs,
+                            nodeOffset: template.offsetStart,
+                            filePath: template.filePath,
+                            componentTS: sourceFile,
+                        };
+                        htmlLoadings.push(loading);
+                    }
+                }
+            }
+        });
+    });
+    return htmlLoadings;
+}
+function hasThingsToAdd(inputs) {
+    if (inputs?.block) {
+        return true;
+    }
+    if (inputs?.invert) {
+        return true;
+    }
+    if (inputs?.size) {
+        return true;
+    }
+    if (inputs?.template) {
+        return true;
+    }
+    return false;
+}
+function getLoadingTemplate(classes) {
+    if (classes.includes('mod-popin')) {
+        return 'popin';
+    }
+    if (classes.includes('mod-drawer')) {
+        return 'drawer';
+    }
+    // fullpage is deprecated so we always use fullPage here
+    if (classes.includes('mod-fullPage') || classes.includes('mod-fullpage')) {
+        return 'fullPage';
+    }
+    return undefined;
+}

package/schematics/lu-loading/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-loading 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-loading', { 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-loading/schema.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "LuccaFrontLuLoading",
+  "title": "Lucca Front loading html  migration into lu-loading angular 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
+    },
+    "noComments": {
+      "type": "boolean",
+      "description": "Don't put comments about select migration rejections in result files.",
+      "default": false
+    }
+  }
+}

package/schematics/lu-select/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, options?.noComments);
                 });