@lucca-front/ng 21.0.0-rc.4 → 21.0.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/ng",
-  "version": "21.0.0-rc.4",
+  "version": "21.0.0-rc.6",
   "description": "A library of icons made by the team @Lucca",
   "repository": {
     "type": "git",
@@ -27,8 +27,8 @@
     "@angular/core": "^20.0.0",
     "@angular/cdk": "^20.0.0",
     "@angular/animations": "^20.0.0",
-    "@lucca-front/icons": "21.0.0-rc.4",
-    "@lucca-front/scss": "21.0.0-rc.4",
+    "@lucca-front/icons": "21.0.0-rc.6",
+    "@lucca-front/scss": "21.0.0-rc.6",
     "isomorphic-dompurify": "^2.17.0",
     "date-fns": "^3.6.0",
     "ngx-mask": "^20.0.3",
@@ -90,26 +90,26 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/lucca-front-ng.mjs"
     },
+    "./animations": {
+      "types": "./animations/index.d.ts",
+      "default": "./fesm2022/lucca-front-ng-animations.mjs"
+    },
     "./api": {
       "types": "./api/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-api.mjs"
     },
+    "./a11y": {
+      "types": "./a11y/index.d.ts",
+      "default": "./fesm2022/lucca-front-ng-a11y.mjs"
+    },
     "./box": {
       "types": "./box/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-box.mjs"
     },
-    "./animations": {
-      "types": "./animations/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-animations.mjs"
-    },
     "./app-layout": {
       "types": "./app-layout/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-app-layout.mjs"
     },
-    "./a11y": {
-      "types": "./a11y/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-a11y.mjs"
-    },
     "./breadcrumbs": {
       "types": "./breadcrumbs/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-breadcrumbs.mjs"
@@ -134,25 +134,21 @@
       "types": "./code/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-code.mjs"
     },
-    "./comment": {
-      "types": "./comment/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-comment.mjs"
-    },
     "./container": {
       "types": "./container/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-container.mjs"
     },
-    "./core-select": {
-      "types": "./core-select/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-core-select.mjs"
+    "./comment": {
+      "types": "./comment/index.d.ts",
+      "default": "./fesm2022/lucca-front-ng-comment.mjs"
     },
     "./core": {
       "types": "./core/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-core.mjs"
     },
-    "./data-table": {
-      "types": "./data-table/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-data-table.mjs"
+    "./core-select": {
+      "types": "./core-select/index.d.ts",
+      "default": "./fesm2022/lucca-front-ng-core-select.mjs"
     },
     "./date": {
       "types": "./date/index.d.ts",
@@ -162,6 +158,10 @@
       "types": "./date2/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-date2.mjs"
     },
+    "./data-table": {
+      "types": "./data-table/index.d.ts",
+      "default": "./fesm2022/lucca-front-ng-data-table.mjs"
+    },
     "./department": {
       "types": "./department/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-department.mjs"
@@ -178,14 +178,14 @@
       "types": "./dropdown/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-dropdown.mjs"
     },
-    "./empty-state": {
-      "types": "./empty-state/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-empty-state.mjs"
-    },
     "./establishment": {
       "types": "./establishment/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-establishment.mjs"
     },
+    "./empty-state": {
+      "types": "./empty-state/index.d.ts",
+      "default": "./fesm2022/lucca-front-ng-empty-state.mjs"
+    },
     "./fancy-box": {
       "types": "./fancy-box/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-fancy-box.mjs"
@@ -266,14 +266,14 @@
       "types": "./listing/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-listing.mjs"
     },
-    "./main-layout": {
-      "types": "./main-layout/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-main-layout.mjs"
-    },
     "./loading": {
       "types": "./loading/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-loading.mjs"
     },
+    "./main-layout": {
+      "types": "./main-layout/index.d.ts",
+      "default": "./fesm2022/lucca-front-ng-main-layout.mjs"
+    },
     "./mobile-push": {
       "types": "./mobile-push/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-mobile-push.mjs"
@@ -354,10 +354,6 @@
       "types": "./scroll-box/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-scroll-box.mjs"
     },
-    "./scrollBox": {
-      "types": "./scrollBox/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-scrollBox.mjs"
-    },
     "./segmented-control": {
       "types": "./segmented-control/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-segmented-control.mjs"
@@ -486,13 +482,13 @@
       "types": "./forms/rich-text-input/formatters/html/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-forms-rich-text-input-formatters-html.mjs"
     },
-    "./forms/rich-text-input/formatters/markdown": {
-      "types": "./forms/rich-text-input/formatters/markdown/index.d.ts",
-      "default": "./fesm2022/lucca-front-ng-forms-rich-text-input-formatters-markdown.mjs"
-    },
     "./forms/rich-text-input/formatters/plain-text": {
       "types": "./forms/rich-text-input/formatters/plain-text/index.d.ts",
       "default": "./fesm2022/lucca-front-ng-forms-rich-text-input-formatters-plain-text.mjs"
+    },
+    "./forms/rich-text-input/formatters/markdown": {
+      "types": "./forms/rich-text-input/formatters/markdown/index.d.ts",
+      "default": "./fesm2022/lucca-front-ng-forms-rich-text-input-formatters-markdown.mjs"
     }
   },
   "sideEffects": false,

package/plg-push/index.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 
 interface LuPlgPushLabel {
     close: string;
@@ -6,16 +6,14 @@ interface LuPlgPushLabel {
 
 declare class PLGPushComponent {
     protected intl: LuPlgPushLabel;
-    heading: string;
-    removable: boolean;
+    readonly heading: _angular_core.InputSignal<string>;
+    readonly removable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Is the callout removed? Works with two way binding too.
      */
-    removed: i0.ModelSignal<boolean>;
-    get hiddenAttr(): 'hidden' | null;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PLGPushComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PLGPushComponent, "lu-plg-push", never, { "heading": { "alias": "heading"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "removed": { "alias": "removed"; "required": false; "isSignal": true; }; }, { "removed": "removedChange"; }, never, ["*"], true, never>;
-    static ngAcceptInputType_removable: unknown;
+    readonly removed: _angular_core.ModelSignal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PLGPushComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PLGPushComponent, "lu-plg-push", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "removed": { "alias": "removed"; "required": false; "isSignal": true; }; }, { "removed": "removedChange"; }, never, ["*"], true, never>;
 }
 
 export { PLGPushComponent };

package/read-more/index.d.ts

@@ -20,7 +20,7 @@ declare class ReadMoreComponent implements OnInit {
     expanded: _angular_core.WritableSignal<boolean>;
     isClamped: _angular_core.WritableSignal<boolean>;
     readonly backgroundColor: _angular_core.Signal<string>;
-    isNil: <T>(value: T | null | undefined) => value is null | undefined;
+    isNil: <T>(value: T | null) => value is null;
     ngOnInit(): void;
     toggleExpanded(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReadMoreComponent, never>;

package/schematics/collection.json

@@ -16,6 +16,11 @@
       "factory": "./lu-select/index",
       "schema": "./lu-select/schema.json"
     },
+    "lu-text-input": {
+      "description": "Migrate deprecated textfield into lu-text-input where possible.",
+      "factory": "./lu-text-input/index",
+      "schema": "./lu-text-input/schema.json"
+    },
     "tokens-spacings": {
       "description": "Replace spacing tokens with new names.",
       "factory": "./tokens-spacing/index",
@@ -36,6 +41,11 @@
       "factory": "./tokens-typo/index",
       "schema": "./tokens-typo/schema.json"
     },
+    "color-text": {
+      "description": "Replace color text tokens.",
+      "factory": "./color-text/index",
+      "schema": "./color-text/schema.json"
+    },
     "palettes": {
       "description": "Replace palettes with new names.",
       "factory": "./palettes/index",

package/schematics/color-text/index.js

@@ -0,0 +1,55 @@
+"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");
+// 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, {
+            classes: {
+                'pr-u-textProduct': 'pr-u-colorTextProduct',
+                'pr-u-textPrimary': 'pr-u-colorTextProduct',
+                'pr-u-textSecondary': 'pr-u-colorTextProduct',
+                'pr-u-textBrand': 'pr-u-colorTextBrand',
+                'pr-u-textLucca': 'pr-u-colorTextBrand',
+                'pr-u-textPlaceholder': 'pr-u-colorInputTextPlaceholder',
+                'pr-u-textNeutral': 'pr-u-colorText',
+                'pr-u-textDefault': 'pr-u-colorText',
+                'pr-u-textGrey': 'pr-u-colorText',
+                'pr-u-textLight': 'pr-u-colorTextSubtle',
+                'pr-u-textSuccess': 'pr-u-colorTextSuccess',
+                'pr-u-textWarning': 'pr-u-colorTextWarning',
+                'pr-u-textCritical': 'pr-u-colorTextCritical',
+                'pr-u-textError': 'pr-u-colorTextCritical',
+                'pr-u-textSuccessContrasted': 'pr-u-colorTextSuccessContrasted',
+                'pr-u-textWarningContrasted': 'pr-u-colorTextWarningContrasted',
+                'pr-u-textBrandContrasted': 'pr-u-colorTextBrandContrasted',
+                'pr-u-textNavigation': 'pr-u-colorTextNavigation',
+                'pr-u-textAI': 'pr-u-colorTextAI',
+                'pr-u-textPagga': 'pr-u-colorTextPagga',
+                'pr-u-textPoplee': 'pr-u-colorTextPoplee',
+                'pr-u-textCoreHR': 'pr-u-colorTextCoreHR',
+                'pr-u-textTimmi': 'pr-u-colorTextTimmi',
+                'pr-u-textCleemy': 'pr-u-colorTextCleemy',
+                'pr-u-textCc': 'pr-u-colorTextCc',
+                'pr-u-textKiwi': 'pr-u-colorTextKiwi',
+                'pr-u-textLime': 'pr-u-colorTextLime',
+                'pr-u-textCucumber': 'pr-u-colorTextCucumber',
+                'pr-u-textMint': 'pr-u-colorTextMint',
+                'pr-u-textGlacier': 'pr-u-colorTextGlacier',
+                'pr-u-textLagoon': 'pr-u-colorTextLagoon',
+                'pr-u-textBlueberry': 'pr-u-colorTextBlueberry',
+                'pr-u-textLavender': 'pr-u-colorTextLavender',
+                'pr-u-textGrape': 'pr-u-colorTextGrape',
+                'pr-u-textWatermelon': 'pr-u-colorTextWatermelon',
+                'pr-u-textPumpkin': 'pr-u-colorTextPumpkin',
+                'pr-u-textPineapple': 'pr-u-colorTextPineapple',
+            },
+            variables: {},
+            mixins: {}
+        }, {}).run();
+    };
+};

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

@@ -0,0 +1,50 @@
+"use strict";
+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 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.');
+        // Act
+        try {
+            await (0, migration_test_js_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);
+    });
+    // Use this to migrate @lucca-front/* packages
+    it.skip('should migrate @lucca-front/*', async () => {
+        // Arrange
+        const lfRoot = path.normalize(path.join(__dirname, '..', '..', '..', '..'));
+        const lfFiles = [
+            ...glob.sync('packages/icons/**/*.scss', { cwd: lfRoot, nodir: true }),
+            ...glob.sync('packages/scss/**/*.scss', { cwd: lfRoot, nodir: true }),
+            ...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, '.');
+        // Act
+        await (0, migration_test_js_1.runSchematic)('collection', collectionPath, 'color-text', { skipInstallation: true }, tree);
+        // Assert
+        tree.visit((p, entry) => {
+            const original = treeOriginalTree.get(p)?.content.toString() || '';
+            const updated = entry?.content.toString() || '';
+            if (original !== updated) {
+                const fromRootPath = path.join(lfRoot, p);
+                fs.writeFileSync(fromRootPath, updated);
+            }
+        });
+    });
+});

package/schematics/color-text/schema.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "LuccaFrontColorText",
+  "title": "Lucca Front Color Text Schema",
+  "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/lib/angular-component-ast.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractProviders = extractProviders;
 exports.extractComponentImports = extractComponentImports;
+exports.inputValueToHTML = inputValueToHTML;
+exports.getInputValue = getInputValue;
 exports.insertTSImportIfNeeded = insertTSImportIfNeeded;
 exports.insertAngularImportIfNeeded = insertAngularImportIfNeeded;
 exports.removeAngularImport = removeAngularImport;
@@ -10,6 +12,7 @@ const change_1 = require("@schematics/angular/utility/change");
 const eol_1 = require("@schematics/angular/utility/eol");
 const typescript_1 = require("typescript");
 const angular_template_1 = require("./angular-template");
+const lf_schematic_context_1 = require("./lf-schematic-context");
 function extractProviders(sourceFile) {
     const providerEntries = [];
     (0, typescript_1.forEachChild)(sourceFile, (0, angular_template_1.createVisitor)(typescript_1.isDecorator, (decorator) => {
@@ -88,6 +91,32 @@ function extractComponentImports(sourceFile) {
     }));
     return imports;
 }
+function inputValueToHTML(name, value) {
+    if (!value) {
+        return "";
+    }
+    return `${value.isBinding ? '[' : ''}${value.twoWayBinding ? '(' : ''}${name}${value.twoWayBinding ? ')' : ''}${value.isBinding ? ']' : ''}="${value.value}"`;
+}
+function getInputValue(node, inputName) {
+    const input = node.inputs.find((i) => i.name === inputName);
+    if (input) {
+        const output = node.outputs.find((o) => o.name === `${inputName}Change`);
+        const value = input?.value instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.ASTWithSource ? input.value.source : null;
+        return {
+            isBinding: true,
+            value,
+            twoWayBinding: output?.handler instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.ASTWithSource ? output.handler.source === value : false
+        };
+    }
+    const attr = node.attributes.find((a) => a.name === inputName);
+    if (attr) {
+        return {
+            isBinding: false,
+            value: attr.value
+        };
+    }
+    return undefined;
+}
 // Simplified version of https://github.com/angular/angular-cli/blob/main/packages/schematics/angular/utility/ast-utils.ts#L24 for our use case
 function insertTSImportIfNeeded(sourceFile, fileToEdit, symbolName, fileName) {
     const allImports = sourceFile.statements.filter(typescript_1.isImportDeclaration);

package/schematics/lu-text-input/index.js

@@ -0,0 +1,24 @@
+"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 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);
+        tree.visit((path, entry) => {
+            if (path.includes('node_modules') || !entry) {
+                return;
+            }
+            if (path.endsWith('.ts')) {
+                (0, schematics_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-text-input/migration.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateComponent = migrateComponent;
+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 angular_component_ast_1 = require("../lib/angular-component-ast");
+const change_1 = require("@schematics/angular/utility/change");
+function migrateComponent(sourceFile, path, tree) {
+    const textfields = findTextfields(sourceFile, path, tree);
+    if (textfields.length > 0) {
+        const tsUpdate = tree.beginUpdate(path);
+        const isInlineTemplate = textfields[0].filePath === path;
+        const templateUpdate = isInlineTemplate ? tsUpdate : tree.beginUpdate(textfields[0].filePath);
+        let updatedStuff = false;
+        textfields.forEach((field) => {
+            if (field.rejection) {
+                // TODO check if custom directive is in place for custom inputs
+                // eslint-disable-next-line no-console
+                console.log(`[REJECTED] ${field.filePath}#L${field.node.startSourceSpan.start.line} => ${field.rejection}`);
+            }
+            else {
+                updatedStuff = true;
+                // Let's remove everything first
+                templateUpdate.remove(field.nodeOffset + field.node.startSourceSpan.start.offset, field.node.sourceSpan.toString().length);
+                // Then forge the new input
+                const textInput = `<lu-text-input ${(0, angular_component_ast_1.inputValueToHTML)('placeholder', field.inputs.placeholder)} ${(0, angular_component_ast_1.inputValueToHTML)('formControlName', field.inputs.formControlName)} ${(0, angular_component_ast_1.inputValueToHTML)('ngModel', field.inputs.ngModel)} />`.replace(/\s{2,}/, " ");
+                const fieldOpeningTag = `lu-form-field [label]="labelTpl"`.replace(/\s{2,}/, " ").trim();
+                // TODO handle required migration from template-driven to form-driven???
+                const newInput = `<${fieldOpeningTag}>
+			<ng-template #labelTpl>${field.label}</ng-template>
+			${textInput}
+		</lu-form-field>`;
+                templateUpdate.insertRight(field.nodeOffset + field.node.startSourceSpan.start.offset, newInput);
+            }
+            // For errors management, how can we detect it??? Then we could migrate text logic in its own ng-template like formation does.
+        });
+        if (updatedStuff) {
+            // Add import if needed
+            (0, change_1.applyToUpdateRecorder)(tsUpdate, [
+                (0, angular_component_ast_1.insertTSImportIfNeeded)(sourceFile, path, 'FormFieldComponent', '@lucca-front/ng/form-field'),
+                (0, angular_component_ast_1.insertAngularImportIfNeeded)(sourceFile, path, 'FormFieldComponent'),
+                (0, angular_component_ast_1.insertTSImportIfNeeded)(sourceFile, path, 'TextInputComponent', '@lucca-front/ng/forms'),
+                (0, angular_component_ast_1.insertAngularImportIfNeeded)(sourceFile, path, 'TextInputComponent')
+            ]);
+            tree.commitUpdate(tsUpdate);
+            if (!isInlineTemplate) {
+                tree.commitUpdate(templateUpdate);
+            }
+        }
+    }
+    return tree.readText(path);
+}
+function findTextfields(sourceFile, basePath, tree) {
+    const fields = [];
+    const ngTemplates = (0, angular_template_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, basePath);
+    ngTemplates.forEach((template) => {
+        const htmlAst = new html_ast_js_1.HtmlAst(template.content);
+        htmlAst.visitNodes((node) => {
+            if (isInterestingNode(node) && node.name === "label") {
+                const classes = getNodeClasses(node);
+                const inputs = {
+                    size: classes.find(c => /mod-(XS|S|M|L|XL|XXL)/.test(c))?.replace('mod-', '')
+                };
+                const field = {
+                    node: node,
+                    inputs,
+                    nodeOffset: template.offsetStart,
+                    filePath: template.filePath,
+                    componentTS: sourceFile,
+                    classes: classes
+                };
+                if (classes.includes("textfield")) {
+                    if (node.children.filter(el => isInterestingNode(el) || isControlFlowNode(el)).length > 2) {
+                        field.rejection = "Field contains more than an input + label";
+                    }
+                    // Find native input and grab params from it
+                    const nativeInput = node.children.find(el => isInterestingNode(el) && el.name === "input");
+                    if (!nativeInput) {
+                        field.rejection = "Field doesn't contain a native input[type=text]";
+                    }
+                    else if (isInterestingNode(nativeInput)) {
+                        inputs.placeholder = (0, angular_component_ast_1.getInputValue)(nativeInput, "placeholder");
+                        inputs.formControlName = (0, angular_component_ast_1.getInputValue)(nativeInput, "formControlName");
+                        inputs.ngModel = (0, angular_component_ast_1.getInputValue)(nativeInput, "ngModel");
+                        inputs.forceRequired = (0, angular_component_ast_1.getInputValue)(nativeInput, "aria-required");
+                    }
+                    // This is a textfield, now let's find if it has everything required for migration
+                    const visitor = new html_ast_js_1.HtmlAstVisitor(node);
+                    visitor.visitElements(/span/, (el) => {
+                        if (isInterestingNode(el) && getNodeClasses(el).includes("textfield-label")) {
+                            field.label = template.content.slice(el.startSourceSpan.end.offset, el.endSourceSpan?.start?.offset);
+                        }
+                    });
+                    if (!field.label) {
+                        field.rejection = "Field has no label";
+                    }
+                    fields.push(field);
+                }
+            }
+        });
+    });
+    return fields;
+}
+function getNodeClasses(node) {
+    return (node.attributes.find(attr => attr.name === 'class')?.value || "").split(" ");
+}
+function isInterestingNode(node) {
+    return node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstElement;
+}
+function isControlFlowNode(node) {
+    return node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstIfBlock ||
+        node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstForLoopBlock ||
+        node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstSwitchBlock ||
+        node instanceof lf_schematic_context_1.currentSchematicContext.angularCompiler.TmplAstDeferredBlock;
+}

package/schematics/lu-text-input/migration.spec.js

@@ -0,0 +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 collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
+const testsRoot = path.join(__dirname, 'tests');
+describe('Textfield 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'));
+        // Act
+        try {
+            await (0, migration_test_js_1.runSchematic)('collection', collectionPath, 'lu-text-input', { skipInstallation: true }, tree);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+        // Assert
+        (0, migration_test_js_1.expectTree)(tree).toMatchTree(expectedTree);
+    });
+});

package/schematics/lu-text-input/schema.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "LuccaFrontLuButton",
+  "title": "Migrate CSS-only buttons to the new luButton 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
+    }
+  }
+}