@lucca-front/ng 22.0.3-rc.2 → 22.0.3

package/schematics/deprecated-resolver/index.js

@@ -62,10 +62,7 @@ exports.default = (options) => {
                 'lu-divider': { withRole: '' },
                 'button': { delete: 'critical' },
                 'lu-loading': { type: { fullpage: 'fullPage' } },
-                'lu-single-file-upload': { illustration: { paper: 'invoice' }, size: { 'S': 'L' } },
-                'lu-multi-file-upload': { size: { 'S': 'L' } },
-                'lu-file-entry': { size: { 'S': 'L' } },
-                'lu-file-dropzone': { size: { 'S': 'L' } },
+                'lu-single-file-upload': { illustration: { paper: 'invoice' } },
                 'lu-highlight-data': { icon: { 'manifying-glass': 'magnifying-glass' } },
             },
         }).run();

package/schematics/file-upload/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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)
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+require('@angular-devkit/schematics');
+exports.default = (options) => {
+    return async (tree, context) => {
+        await lib_1.currentSchematicContext.init(context, options);
+        // Templates are reached through their component: rendering a FileEntry or a wrapper needs the
+        // matching symbol in the `imports` of the component that owns the template.
+        tree.visit((path, entry) => {
+            if (path.includes('node_modules') || !entry) {
+                return;
+            }
+            if (path.endsWith('.ts') && !path.endsWith('.d.ts')) {
+                (0, lib_1.migrateFile)(path, entry, tree, (content) => (0, migration_1.migrateComponent)(path, content, tree));
+            }
+        });
+    };
+};

package/schematics/file-upload/migration.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateComponent = migrateComponent;
+const change_1 = require("@schematics/angular/utility/change");
+const typescript_1 = require("typescript");
+const lib_1 = require("../lib");
+const fileUploadEntrypoint = '@lucca-front/ng/file-upload';
+const wrapperClass = 'fileEntryDisplayWrapper';
+/** Alias given to the migrated entry in the generated `@if` block. */
+const entryAlias = 'fileEntry';
+/** Components whose `size` input has been flipped: `S` became the default, `L` restores the previous rendering. */
+const sizedComponents = ['lu-single-file-upload', 'lu-multi-file-upload', 'lu-file-entry'];
+/** Inputs `lu-single-file-upload` used to forward to the `lu-file-entry` it rendered itself. */
+const fileEntryInputs = ['entry', 'state', 'previewUrl', 'inlineMessageError', 'displayFileName'];
+/** Outputs `lu-single-file-upload` used to forward to the `lu-file-entry` it rendered itself. */
+const fileEntryOutputs = ['deleteFile'];
+function migrateComponent(path, content, tree) {
+    const sourceFile = (0, typescript_1.createSourceFile)(path, content, typescript_1.ScriptTarget.ESNext);
+    const symbolsToImport = new Set();
+    // External templates are rewritten in place, they are not part of the component file.
+    (0, lib_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, path)
+        .filter((template) => template.filePath !== path)
+        .forEach((template) => {
+        const migrated = migrateTemplate(template.filePath, template.content, symbolsToImport);
+        if (migrated !== template.content) {
+            tree.overwrite(template.filePath, migrated);
+        }
+    });
+    const result = (0, lib_1.updateAngularTemplate)(path, content, (template) => migrateTemplate(path, template, symbolsToImport));
+    if (symbolsToImport.size === 0) {
+        return result;
+    }
+    // Imports are inserted one symbol at a time: every insertion shifts the offsets the next one relies on.
+    tree.overwrite(path, result);
+    symbolsToImport.forEach((symbol) => {
+        const updatedSourceFile = (0, typescript_1.createSourceFile)(path, tree.readText(path), typescript_1.ScriptTarget.ESNext);
+        const recorder = tree.beginUpdate(path);
+        (0, change_1.applyToUpdateRecorder)(recorder, [(0, lib_1.insertTSImportIfNeeded)(updatedSourceFile, path, symbol, fileUploadEntrypoint), (0, lib_1.insertAngularImportIfNeeded)(updatedSourceFile, path, symbol)]);
+        tree.commitUpdate(recorder);
+    });
+    return tree.readText(path);
+}
+/**
+ * Rules are applied in this order on purpose:
+ * 1. sizes are normalized first, so that splitting a `lu-single-file-upload` reads an already migrated size;
+ * 2. the split then emits its own `lu-file-entry-wrapper`, which the class rule must not visit again.
+ */
+function migrateTemplate(path, template, symbolsToImport) {
+    let result = migrateSize(path, template);
+    result = migrateFileEntryRendering(path, result, symbolsToImport);
+    return migrateWrapperClass(path, result, symbolsToImport);
+}
+function migrateSize(path, template) {
+    return (0, lib_1.updateContent)(template, (updates) => {
+        const htmlAst = new lib_1.HtmlAst(template);
+        sizedComponents.forEach((component) => {
+            htmlAst.visitElements(component, (element) => {
+                const boundSize = element.inputs.find((input) => input.name === 'size');
+                if (boundSize) {
+                    const source = boundSize.value instanceof lib_1.currentSchematicContext.angularCompiler.ASTWithSource ? boundSize.value.source ?? '' : '';
+                    switch (source.trim()) {
+                        case `'S'`:
+                        case `"S"`:
+                            updates.push((0, lib_1.removeAttributeUpdate)(template, boundSize));
+                            lib_1.currentSchematicContext.logSuccess(`Removing redundant [size] on <${component}> in ${path}`);
+                            break;
+                        case 'null':
+                            updates.push({
+                                position: boundSize.value.sourceSpan.start,
+                                oldContent: source,
+                                newContent: source.replace('null', `'L'`),
+                            });
+                            lib_1.currentSchematicContext.logSuccess(`Setting [size] to 'L' on <${component}> in ${path}`);
+                            break;
+                        default:
+                            lib_1.currentSchematicContext.warn(`${path}: [size] of <${component}> is bound to an expression, migrate it manually ('S' is now the default value, 'L' is the previous one).`);
+                    }
+                    return;
+                }
+                const size = element.attributes.find((attribute) => attribute.name === 'size');
+                if (!size) {
+                    updates.push((0, lib_1.addAttributeUpdate)(element, 'size', 'L'));
+                    lib_1.currentSchematicContext.logSuccess(`Adding size="L" on <${component}> in ${path}`);
+                    return;
+                }
+                if (size.value === 'S') {
+                    updates.push((0, lib_1.removeAttributeUpdate)(template, size));
+                    lib_1.currentSchematicContext.logSuccess(`Removing redundant size="S" on <${component}> in ${path}`);
+                    return;
+                }
+                lib_1.currentSchematicContext.warn(`${path}: size="${size.value}" of <${component}> is not a known value, migrate it manually ('S' is now the default value, 'L' is the previous one).`);
+            });
+        });
+    });
+}
+/**
+ * `lu-single-file-upload` no longer renders the `FileEntry` it receives: the parent now displays it itself,
+ * through a `lu-file-entry` wrapped in a `lu-file-entry-wrapper`.
+ */
+function migrateFileEntryRendering(path, template, symbolsToImport) {
+    return (0, lib_1.updateContent)(template, (updates) => {
+        const htmlAst = new lib_1.HtmlAst(template);
+        htmlAst.visitElements('lu-single-file-upload', (element) => {
+            const entry = element.inputs.find((input) => input.name === 'entry');
+            if (!entry) {
+                if (element.attributes.some((attribute) => attribute.name === 'entry')) {
+                    lib_1.currentSchematicContext.warn(`${path}: <lu-single-file-upload> has a static entry attribute, migrate it manually.`);
+                }
+                return;
+            }
+            // A size left bound to an expression by the size rule cannot be turned into the `media` of the file
+            // entry, which is what the file upload used to derive from it.
+            if (element.inputs.some((input) => input.name === 'size') && !hasSizeL(element)) {
+                lib_1.currentSchematicContext.warn(`${path}: <lu-single-file-upload [entry]> has a [size] bound to an expression, migrate it manually.`);
+                return;
+            }
+            const openingTag = template.slice(element.startSourceSpan.start.offset, element.startSourceSpan.end.offset);
+            if (/\s\*[\w-]+/.test(openingTag)) {
+                lib_1.currentSchematicContext.warn(`${path}: <lu-single-file-upload [entry]> carries a structural directive, migrate it manually.`);
+                return;
+            }
+            const entryExpression = entry.value instanceof lib_1.currentSchematicContext.angularCompiler.ASTWithSource ? (entry.value.source ?? '').trim() : '';
+            if (!entryExpression) {
+                lib_1.currentSchematicContext.warn(`${path}: could not read the [entry] expression of <lu-single-file-upload>, migrate it manually.`);
+                return;
+            }
+            updates.push(buildFileEntryRendering(template, element, entryExpression));
+            symbolsToImport.add('FileEntryComponent');
+            symbolsToImport.add('FileEntryWrapperComponent');
+            lib_1.currentSchematicContext.logSuccess(`Extracting the FileEntry of <lu-single-file-upload> in ${path}`);
+        });
+    });
+}
+function buildFileEntryRendering(template, element, entryExpression) {
+    const start = element.sourceSpan.start.offset;
+    const end = (element.endSourceSpan ?? element.sourceSpan).end.offset;
+    const movedAttributes = [
+        ...element.inputs.filter((input) => fileEntryInputs.includes(input.name)),
+        ...element.attributes.filter((attribute) => fileEntryInputs.includes(attribute.name)),
+        ...element.outputs.filter((output) => fileEntryOutputs.includes(output.name)),
+    ];
+    // `lu-single-file-upload` used to render its entry as a media only in its large variant, always at size L.
+    const isLarge = hasSizeL(element);
+    const hasStructure = [...element.attributes, ...element.inputs].some((attribute) => attribute.name === 'structure');
+    const fileEntryAttributes = [
+        `[entry]="${entryAlias}"`,
+        'size="L"',
+        isLarge ? 'media' : '',
+        hasStructure ? 'structure' : '',
+        ...movedAttributes.filter((attribute) => attribute.name !== 'entry').map((attribute) => template.slice(attribute.sourceSpan.start.offset, attribute.sourceSpan.end.offset)),
+    ].filter(Boolean);
+    // The remaining file upload keeps everything the file entry did not take, formatting included.
+    const fileUpload = (0, lib_1.applyUpdates)(template.slice(start, end), movedAttributes.map((attribute) => {
+        const update = (0, lib_1.removeAttributeUpdate)(template, attribute);
+        return { ...update, position: update.position - start };
+    }));
+    const indent = getIndent(template, start);
+    const unit = indent.includes(' ') && !indent.includes('\t') ? '  ' : '\t';
+    return {
+        position: start,
+        oldContent: template.slice(start, end),
+        newContent: [
+            `@if (${entryExpression}; as ${entryAlias}) {`,
+            `${indent}${unit}<lu-file-entry-wrapper>`,
+            `${indent}${unit}${unit}<lu-file-entry ${fileEntryAttributes.join(' ')} />`,
+            `${indent}${unit}</lu-file-entry-wrapper>`,
+            `${indent}} @else {`,
+            `${indent}${unit}${fileUpload}`,
+            `${indent}}`,
+        ].join('\n'),
+    };
+}
+/** The `fileEntryDisplayWrapper` CSS class is now carried by the `lu-file-entry-wrapper` component. */
+function migrateWrapperClass(path, template, symbolsToImport) {
+    return (0, lib_1.updateContent)(template, (updates) => {
+        const htmlAst = new lib_1.HtmlAst(template);
+        htmlAst.visitElements(/.*/, (element) => {
+            const boundClass = element.inputs.find((input) => input.name === 'class' || input.name === `class.${wrapperClass}` || input.name === 'ngClass');
+            if (boundClass && template.slice(boundClass.sourceSpan.start.offset, boundClass.sourceSpan.end.offset).includes(wrapperClass)) {
+                lib_1.currentSchematicContext.warn(`${path}: .${wrapperClass} is applied through a binding on <${element.name}>, migrate it manually.`);
+                return;
+            }
+            const classAttribute = element.attributes.find((attribute) => attribute.name === 'class');
+            const classes = classAttribute?.value.split(/\s+/).filter(Boolean) ?? [];
+            if (!classes.includes(wrapperClass) || !classAttribute) {
+                return;
+            }
+            updates.push({
+                position: element.startSourceSpan.start.offset + '<'.length,
+                oldContent: element.name,
+                newContent: 'lu-file-entry-wrapper',
+            });
+            if (element.endSourceSpan && !element.isSelfClosing) {
+                updates.push({
+                    position: element.endSourceSpan.start.offset + '</'.length,
+                    oldContent: element.name,
+                    newContent: 'lu-file-entry-wrapper',
+                });
+            }
+            const remainingClasses = classes.filter((className) => className !== wrapperClass);
+            if (remainingClasses.length === 0) {
+                updates.push((0, lib_1.removeAttributeUpdate)(template, classAttribute));
+            }
+            else if (classAttribute.valueSpan) {
+                updates.push({
+                    position: classAttribute.valueSpan.start.offset,
+                    oldContent: classAttribute.value,
+                    newContent: remainingClasses.join(' '),
+                });
+            }
+            symbolsToImport.add('FileEntryWrapperComponent');
+            lib_1.currentSchematicContext.logSuccess(`Replacing .${wrapperClass} with <lu-file-entry-wrapper> in ${path}`);
+        });
+    });
+}
+function hasSizeL(element) {
+    if (element.attributes.some((attribute) => attribute.name === 'size' && attribute.value === 'L')) {
+        return true;
+    }
+    return element.inputs.some((input) => {
+        const source = input.value instanceof lib_1.currentSchematicContext.angularCompiler.ASTWithSource ? input.value.source ?? '' : '';
+        return input.name === 'size' && /^['"]L['"]$/.test(source.trim());
+    });
+}
+/** Whitespace preceding the element on its own line, used to indent the generated block. */
+function getIndent(template, position) {
+    const lineStart = template.lastIndexOf('\n', position - 1) + 1;
+    const prefix = template.slice(lineStart, position);
+    return /^\s*$/.test(prefix) ? prefix : '';
+}

package/schematics/file-upload/migration.spec.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const path = __importStar(require("path"));
+const lib_1 = require("../lib");
+const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
+const testsRoot = path.join(__dirname, 'tests');
+describe('file-upload 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, 'file-upload', { skipInstall: true }, tree);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+        // Assert
+        (0, lib_1.expectTree)(tree).toMatchTree(expectedTree);
+    });
+});

package/schematics/file-upload/schema.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "LuccaFrontFileUpload",
+  "title": "Lucca Front File Upload 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

@@ -132,7 +132,9 @@ function insertTSImportIfNeeded(sourceFile, fileToEdit, symbolName, fileName) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         if (!imports.some((node) => (node.propertyName || node.name)?.text === symbolName)) {
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call
-            const insertPos = imports[0].getFullStart() || 0;
+            // getStart() and not getFullStart(): the latter points before the leading trivia, which inserts the
+            // symbol right after the opening brace and leaves a double space behind it.
+            const insertPos = imports[0].getStart(sourceFile) || 0;
             return new change_1.InsertChange(fileToEdit, insertPos, `${symbolName}, `);
         }
         return new change_1.NoopChange();

package/schematics/lib/deprecated-mapper.js

@@ -88,19 +88,11 @@ class DeprecatedMapper {
                 const elAst = new html_ast_1.HtmlAstVisitor(el);
                 // Static text attribute: `attrName` (boolean) or `attrName="value"`
                 elAst.visitAttribute(attrName, (attr) => {
-                    const from = attr.sourceSpan.start.offset;
-                    const to = attr.sourceSpan.end.offset;
-                    const hasLeadingSpace = from > 0 && template[from - 1] === ' ';
-                    const removeFrom = hasLeadingSpace ? from - 1 : from;
-                    updates.push({ position: removeFrom, oldContent: template.slice(removeFrom, to), newContent: '' });
+                    updates.push((0, html_ast_1.removeAttributeUpdate)(template, attr));
                 });
                 // Bound attribute: `[attrName]="expr"`
                 elAst.visitBoundAttribute(attrName, (attr) => {
-                    const from = attr.sourceSpan.start.offset;
-                    const to = attr.sourceSpan.end.offset;
-                    const hasLeadingSpace = from > 0 && template[from - 1] === ' ';
-                    const removeFrom = hasLeadingSpace ? from - 1 : from;
-                    updates.push({ position: removeFrom, oldContent: template.slice(removeFrom, to), newContent: '' });
+                    updates.push((0, html_ast_1.removeAttributeUpdate)(template, attr));
                 });
             });
         });

package/schematics/lib/html-ast.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlAst = exports.HtmlAstVisitor = void 0;
+exports.removeAttributeUpdate = removeAttributeUpdate;
+exports.addAttributeUpdate = addAttributeUpdate;
 exports.updateCssClassNames = updateCssClassNames;
 exports.extractAllCssClassNames = extractAllCssClassNames;
 exports.extractAllHtmlElementNames = extractAllHtmlElementNames;
@@ -109,6 +111,30 @@ class HtmlAst extends HtmlAstVisitor {
     }
 }
 exports.HtmlAst = HtmlAst;
+/**
+ * Builds the update removing an attribute from the template it belongs to, along with the whitespace preceding it.
+ */
+function removeAttributeUpdate(template, attribute) {
+    let position = attribute.sourceSpan.start.offset;
+    while (position > 0 && /\s/.test(template[position - 1])) {
+        position--;
+    }
+    return {
+        position,
+        oldContent: template.slice(position, attribute.sourceSpan.end.offset),
+        newContent: ''
+    };
+}
+/**
+ * Builds the update adding `name="value"` right after the tag name of the given element.
+ */
+function addAttributeUpdate(element, name, value) {
+    return {
+        position: element.startSourceSpan.start.offset + '<'.length + element.name.length,
+        oldContent: '',
+        newContent: ` ${name}="${value}"`
+    };
+}
 function updateCssClassNames(content, oldClassToNewClass) {
     return (0, file_update_js_1.updateContent)(content, (updates) => {
         const root = new HtmlAst(content);

package/types/lucca-front-ng-core-select.d.ts

@@ -19,6 +19,13 @@ interface SelectDataSource<TOption, TGroup = never> {
     paramsChange?: Observable<unknown>;
     /** Optional debounce in ms for clue-based re-queries (useful for API data sources) */
     clueDebounceMs?: number;
+    /**
+     * Whether `getOptions` answers page by page. When false, it emits the whole list at once and `page`
+     * is always 0: the select accumulates nothing, `nextPage` is only a request for more, and the loading
+     * row is left to the consumer through the `loading` input.
+     * @default true
+     */
+    paginated?: boolean;
     getOptions(params: SelectDataSourceParams): Observable<readonly TOption[]>;
     /**
      * Optional post-processing applied to the whole list of loaded options (all pages accumulated),