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

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
+    }
+  }
+}

package/scroll-box/index.d.ts

@@ -1,15 +1,16 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, ElementRef } from '@angular/core';
+import { OnInit } from '@angular/core';
 
 declare class ScrollBoxComponent implements OnInit {
-    first: _angular_core.Signal<ElementRef<HTMLElement>>;
-    last: _angular_core.Signal<ElementRef<HTMLElement>>;
+    #private;
     isFirstVisible: _angular_core.WritableSignal<boolean>;
     isLastVisible: _angular_core.WritableSignal<boolean>;
-    initObserver(element: Element, isFirst: boolean): void;
+    vertical: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    scroll(): void;
+    constructor();
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScrollBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScrollBoxComponent, "lu-scroll-box", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ScrollBoxComponent, "lu-scroll-box", never, { "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { ScrollBoxComponent };

package/src/components/cdk/_global.scss

@@ -1,4 +1,22 @@
 @use '@lucca-front/scss/src/commons/utils/overflow';
+@use '@lucca-front/scss/src/commons/utils/media';
+
+@mixin stacked($level) {
+  $selector: '';
+  $string: '~ .cdk-global-overlay-wrapper';
+
+	@for $i from 1 through $level {
+    $selector: $selector + $string;
+  }
+
+  &:has(#{$selector}) {
+      .dialog {
+				&.mod-stacked {
+					--components-dialog-level: #{$level};
+				}
+			}
+  }
+}
 
 .cdk-global-overlay-wrapper {
 	block-size: 100%;
@@ -9,6 +27,10 @@
 	display: flex;
 	position: absolute;
 	z-index: 1000;
+
+	@for $i from 1 through 3 {
+		@include stacked($i);
+	}
 }
 
 .cdk-global-scrollblock {
@@ -17,4 +39,3 @@
 
 	@include overflow.scrollblock('!important');
 }
-

package/tooltip/index.d.ts

@@ -40,12 +40,12 @@ declare class LuTooltipTriggerDirective implements OnDestroy {
     readonly luTooltipPosition: _angular_core.InputSignal<LuPopoverPosition>;
     readonly luTooltipWhenEllipsis: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly luTooltipAnchor: _angular_core.InputSignal<FlexibleConnectedPositionStrategyOrigin>;
+    readonly id: _angular_core.InputSignal<string>;
     readonly resize$: Observable<void>;
     onMouseEnter(): void;
     onMouseLeave(): void;
     onFocus(): void;
     onBlur(): void;
-    readonly id: _angular_core.WritableSignal<string>;
     readonly ariaDescribedBy: _angular_core.Signal<string>;
     overlayRef?: OverlayRef;
     constructor();
@@ -65,7 +65,7 @@ declare class LuTooltipTriggerDirective implements OnDestroy {
     requestClose(): void;
     requestOpen(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LuTooltipTriggerDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LuTooltipTriggerDirective, "[luTooltip]", ["luTooltip"], { "luTooltip": { "alias": "luTooltip"; "required": false; "isSignal": true; }; "luTooltipEnterDelay": { "alias": "luTooltipEnterDelay"; "required": false; "isSignal": true; }; "luTooltipLeaveDelay": { "alias": "luTooltipLeaveDelay"; "required": false; "isSignal": true; }; "luTooltipDisabled": { "alias": "luTooltipDisabled"; "required": false; "isSignal": true; }; "luTooltipOnlyForDisplay": { "alias": "luTooltipOnlyForDisplay"; "required": false; "isSignal": true; }; "luTooltipPosition": { "alias": "luTooltipPosition"; "required": false; "isSignal": true; }; "luTooltipWhenEllipsis": { "alias": "luTooltipWhenEllipsis"; "required": false; "isSignal": true; }; "luTooltipAnchor": { "alias": "luTooltipAnchor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LuTooltipTriggerDirective, "[luTooltip]", ["luTooltip"], { "luTooltip": { "alias": "luTooltip"; "required": false; "isSignal": true; }; "luTooltipEnterDelay": { "alias": "luTooltipEnterDelay"; "required": false; "isSignal": true; }; "luTooltipLeaveDelay": { "alias": "luTooltipLeaveDelay"; "required": false; "isSignal": true; }; "luTooltipDisabled": { "alias": "luTooltipDisabled"; "required": false; "isSignal": true; }; "luTooltipOnlyForDisplay": { "alias": "luTooltipOnlyForDisplay"; "required": false; "isSignal": true; }; "luTooltipPosition": { "alias": "luTooltipPosition"; "required": false; "isSignal": true; }; "luTooltipWhenEllipsis": { "alias": "luTooltipWhenEllipsis"; "required": false; "isSignal": true; }; "luTooltipAnchor": { "alias": "luTooltipAnchor"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**

package/fesm2022/lucca-front-ng-scrollBox.mjs

@@ -1,6 +0,0 @@
-export * from '@lucca-front/ng/scroll-box';
-
-/**
- * Generated bundle index. Do not edit.
- */
-//# sourceMappingURL=lucca-front-ng-scrollBox.mjs.map

package/fesm2022/lucca-front-ng-scrollBox.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"lucca-front-ng-scrollBox.mjs","sources":["../../../packages/ng/scrollBox/lucca-front-ng-scrollBox.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;AAEG"}

package/scrollBox/index.d.ts

@@ -1 +0,0 @@
-export * from '@lucca-front/ng/scroll-box';