@lucca-front/ng 21.3.0 → 21.3.1-rc.2

package/schematics/lu-grid/migration.js

@@ -3,57 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.migrateComponent = migrateComponent;
 const change_1 = require("@schematics/angular/utility/change");
 const lib_1 = require("../lib");
-// --- CSS custom properties helpers ---
-function parseCssCustomProperties(style) {
-    const result = {};
-    style.split(';').map((p) => p.trim()).filter(Boolean).forEach((part) => {
-        const colonIdx = part.indexOf(':');
-        if (colonIdx === -1) {
-            return;
-        }
-        const prop = part.substring(0, colonIdx).trim();
-        const value = part.substring(colonIdx + 1).trim();
-        result[prop] = value;
-    });
-    return result;
-}
-// CSS custom properties that map directly to GridColumnComponent inputs
-const GRID_COLUMN_DIRECT_PROPS = {
-    '--grid-colspan': 'colspan',
-    '--grid-rowspan': 'rowspan',
-    '--grid-column': 'column',
-    '--grid-row': 'row',
-    '--grid-justify': 'justify',
-    '--grid-align': 'align',
-};
-// Prefix for responsive CSS custom properties
-const RESPONSIVE_PREFIX = '--grid-';
-function extractGridColumnInputs(style) {
-    const cssProps = parseCssCustomProperties(style);
-    const inputs = {};
-    const responsive = {};
-    const remaining = [];
-    for (const [prop, value] of Object.entries(cssProps)) {
-        if (GRID_COLUMN_DIRECT_PROPS[prop]) {
-            inputs[GRID_COLUMN_DIRECT_PROPS[prop]] = value;
-        }
-        else if (prop.startsWith(RESPONSIVE_PREFIX) && prop.includes('AtMedia')) {
-            // e.g. --grid-colspanAtMediaMinXS → colspanAtMediaMinXS
-            const key = prop.substring(RESPONSIVE_PREFIX.length);
-            responsive[key] = value;
-        }
-        else if (prop.startsWith('--grid-')) {
-            // Unknown grid property — drop it (it was grid-specific)
-        }
-        else {
-            remaining.push(`${prop}: ${value}`);
-        }
-    }
-    if (Object.keys(responsive).length > 0) {
-        inputs.responsive = responsive;
-    }
-    return { inputs, remainingStyle: remaining.join('; ') };
-}
+const migration_utils_1 = require("./migration.utils");
 // --- Main migration ---
 function migrateComponent(sourceFile, path, tree) {
     const htmlGrids = findHTMLGrids(sourceFile, path, tree);
@@ -84,7 +34,7 @@ function migrateComponent(sourceFile, path, tree) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function migrateGridNode(grid, templateUpdate) {
     const { node, nodeOffset, inputs } = grid;
-    const divLength = node.name.length; // 'div'
+    const divLength = node.name.length;
     const classesNode = node.attributes.find((attr) => attr.name === 'class');
     const styleNode = node.attributes.find((attr) => attr.name === 'style');
     // Build inputs string (everything that comes after the element name)
@@ -124,7 +74,7 @@ function migrateGridNode(grid, templateUpdate) {
     }
     // Modify style attribute — remove --grid-columns, keep the rest
     if (styleNode && styleNode.keySpan) {
-        const cssProps = parseCssCustomProperties(styleNode.value);
+        const cssProps = (0, migration_utils_1.parseCssCustomProperties)(styleNode.value);
         const remaining = Object.entries(cssProps)
             .filter(([key]) => key !== '--grid-columns')
             .map(([key, val]) => `${key}: ${val}`)
@@ -138,7 +88,7 @@ function migrateGridNode(grid, templateUpdate) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function migrateGridColumnNode(col, templateUpdate) {
     const { node, nodeOffset, inputs, remainingStyle, extraClasses } = col;
-    const divLength = node.name.length; // 'div'
+    const divLength = node.name.length;
     const classesNode = node.attributes.find((attr) => attr.name === 'class');
     const styleNode = node.attributes.find((attr) => attr.name === 'style');
     // Build inputs string
@@ -199,21 +149,33 @@ function migrateGridColumnNode(col, templateUpdate) {
     }
 }
 // --- Finders ---
+function gridHasNonNeutralColumnChildren(node) {
+    return node.children.some((child) => {
+        if (!(0, lib_1.isInterestingNode)(child) || (0, migration_utils_1.isNeutralElement)(child.name)) {
+            return false;
+        }
+        const childClasses = child.attributes.find((attr) => attr.name === 'class')?.value;
+        return !!childClasses?.match(/(^|\s)grid-column(\s|$)/);
+    });
+}
 function findHTMLGrids(sourceFile, basePath, tree) {
     const results = [];
     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) || node.name !== 'div') {
+            if (!(0, lib_1.isInterestingNode)(node) || !(0, migration_utils_1.isNeutralElement)(node.name)) {
                 return;
             }
             const classes = node.attributes.find((attr) => attr.name === 'class')?.value;
             if (!classes?.match(/(^|\s)grid(\s|$)/)) {
                 return;
             }
+            if (gridHasNonNeutralColumnChildren(node)) {
+                return;
+            }
             const styleAttr = node.attributes.find((attr) => attr.name === 'style')?.value || '';
-            const cssProps = parseCssCustomProperties(styleAttr);
+            const cssProps = (0, migration_utils_1.parseCssCustomProperties)(styleAttr);
             const classParts = classes.split(' ');
             const extraClasses = classParts.filter((c) => c !== 'grid' && c !== 'mod-auto' && c !== 'mod-form').join(' ');
             const inputs = {
@@ -237,7 +199,7 @@ function findHTMLGridColumns(sourceFile, basePath, tree) {
     const ngTemplates = (0, lib_1.extractNgTemplatesIncludingHtml)(sourceFile, tree, basePath);
     ngTemplates.forEach((template) => {
         const htmlAst = new lib_1.HtmlAst(template.content);
-        htmlAst.visitNodes((node) => {
+        htmlAst.visitNodes((node, parent) => {
             if (!(0, lib_1.isInterestingNode)(node)) {
                 return;
             }
@@ -245,8 +207,19 @@ function findHTMLGridColumns(sourceFile, basePath, tree) {
             if (!classes?.match(/(^|\s)grid-column(\s|$)/)) {
                 return;
             }
+            // Only migrate grid-column if its parent grid container is also being migrated
+            if (!(0, lib_1.isInterestingNode)(parent) || !(0, migration_utils_1.isNeutralElement)(parent.name)) {
+                return;
+            }
+            const parentClasses = parent.attributes.find((attr) => attr.name === 'class')?.value;
+            if (!parentClasses?.match(/(^|\s)grid(\s|$)/)) {
+                return;
+            }
+            if (gridHasNonNeutralColumnChildren(parent)) {
+                return;
+            }
             const styleAttr = node.attributes.find((attr) => attr.name === 'style')?.value || '';
-            const { inputs, remainingStyle } = extractGridColumnInputs(styleAttr);
+            const { inputs, remainingStyle } = (0, migration_utils_1.extractGridColumnInputs)(styleAttr);
             const classParts = classes.split(' ');
             const extraClasses = classParts.filter((c) => c !== 'grid-column').join(' ');
             results.push({

package/schematics/lu-grid/migration.utils.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseCssCustomProperties = parseCssCustomProperties;
+exports.extractGridColumnInputs = extractGridColumnInputs;
+exports.isNeutralElement = isNeutralElement;
+// --- CSS custom properties helpers ---
+function parseCssCustomProperties(style) {
+    const result = {};
+    style.split(';').map((p) => p.trim()).filter(Boolean).forEach((part) => {
+        const colonIdx = part.indexOf(':');
+        if (colonIdx === -1) {
+            return;
+        }
+        const prop = part.substring(0, colonIdx).trim();
+        const value = part.substring(colonIdx + 1).trim();
+        result[prop] = value;
+    });
+    return result;
+}
+// CSS custom properties that map directly to GridColumnComponent inputs
+const GRID_COLUMN_DIRECT_PROPS = {
+    '--grid-colspan': 'colspan',
+    '--grid-rowspan': 'rowspan',
+    '--grid-column': 'column',
+    '--grid-row': 'row',
+    '--grid-justify': 'justify',
+    '--grid-align': 'align',
+};
+// Prefix for responsive CSS custom properties
+const RESPONSIVE_PREFIX = '--grid-';
+function extractGridColumnInputs(style) {
+    const cssProps = parseCssCustomProperties(style);
+    const inputs = {};
+    const responsive = {};
+    const remaining = [];
+    for (const [prop, value] of Object.entries(cssProps)) {
+        if (GRID_COLUMN_DIRECT_PROPS[prop]) {
+            inputs[GRID_COLUMN_DIRECT_PROPS[prop]] = value;
+        }
+        else if (prop.startsWith(RESPONSIVE_PREFIX) && prop.includes('AtMedia')) {
+            // e.g. --grid-colspanAtMediaMinXS → colspanAtMediaMinXS
+            const key = prop.substring(RESPONSIVE_PREFIX.length);
+            responsive[key] = value;
+        }
+        else if (prop.startsWith('--grid-')) {
+            // Unknown grid property — drop it (it was grid-specific)
+        }
+        else {
+            remaining.push(`${prop}: ${value}`);
+        }
+    }
+    if (Object.keys(responsive).length > 0) {
+        inputs.responsive = responsive;
+    }
+    return { inputs, remainingStyle: remaining.join('; ') };
+}
+const NEUTRAL_HTML_ELEMENTS = ['div', 'span', 'section'];
+function isNeutralElement(name) {
+    return NEUTRAL_HTML_ELEMENTS.includes(name);
+}

package/types/lucca-front-ng-box.d.ts

@@ -1,13 +1,18 @@
 import * as _angular_core from '@angular/core';
 
+interface LuBoxLabel {
+    close: string;
+}
+
 declare class BoxComponent {
+    readonly intl: _angular_core.InputSignalWithTransform<LuBoxLabel, Partial<LuBoxLabel>>;
     readonly toggle: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly neutral: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly killable: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly withArrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly killed: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BoxComponent, "lu-box", never, { "toggle": { "alias": "toggle"; "required": false; "isSignal": true; }; "neutral": { "alias": "neutral"; "required": false; "isSignal": true; }; "killable": { "alias": "killable"; "required": false; "isSignal": true; }; "withArrow": { "alias": "withArrow"; "required": false; "isSignal": true; }; }, { "killed": "killed"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BoxComponent, "lu-box", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "toggle": { "alias": "toggle"; "required": false; "isSignal": true; }; "neutral": { "alias": "neutral"; "required": false; "isSignal": true; }; "killable": { "alias": "killable"; "required": false; "isSignal": true; }; "withArrow": { "alias": "withArrow"; "required": false; "isSignal": true; }; }, { "killed": "killed"; }, never, ["*"], true, never>;
 }
 
 export { BoxComponent };

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

@@ -19,12 +19,13 @@ declare class NoopTreeSelectDirective<T extends TreeNode<any>, V> implements Tre
 
 declare class LuCoreSelectDepartmentsDirective<T extends ILuDepartment = ILuDepartment> extends ALuCoreSelectApiDirective<TreeNode<T>> implements OnInit, CoreSelectApiTotalCountProvider {
     protected httpClient: HttpClient;
-    url: _angular_core.InputSignal<string>;
-    filters: _angular_core.InputSignal<Record<string, string | number | boolean>>;
-    operationIds: _angular_core.InputSignal<readonly number[]>;
-    uniqueOperationIds: _angular_core.InputSignal<readonly number[]>;
-    appInstanceId: _angular_core.InputSignal<number>;
-    searchDelimiter: _angular_core.InputSignal<string>;
+    readonly url: _angular_core.InputSignal<string>;
+    readonly countUrl: _angular_core.InputSignal<string>;
+    readonly filters: _angular_core.InputSignal<Record<string, string | number | boolean>>;
+    readonly operationIds: _angular_core.InputSignal<readonly number[]>;
+    readonly uniqueOperationIds: _angular_core.InputSignal<readonly number[]>;
+    readonly appInstanceId: _angular_core.InputSignal<number>;
+    readonly searchDelimiter: _angular_core.InputSignal<string>;
     ngOnInit(): void;
     protected buildOptions(): Observable<TreeNode<T>[]>;
     protected getOptionsPage(params: Record<string, string | number | boolean> | null, page: number): Observable<{
@@ -33,12 +34,12 @@ declare class LuCoreSelectDepartmentsDirective<T extends ILuDepartment = ILuDepa
     }>;
     protected getOptions(params: Record<string, string | number | boolean> | null): Observable<TreeNode<T>[]>;
     trim(options: TreeNode<T>[], clue: string): TreeNode<T>[];
-    protected params$: Observable<Record<string, string | number | boolean>>;
-    totalCount$: Observable<number>;
+    protected readonly params$: Observable<Record<string, string | number | boolean>>;
+    readonly totalCount$: Observable<number>;
     protected flattenTree(branch: TreeNode<T>): T[];
     protected optionKey: (option: TreeNode<T> | T) => number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LuCoreSelectDepartmentsDirective<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LuCoreSelectDepartmentsDirective<any>, "lu-simple-select[departments],lu-multi-select[departments]", ["luDepartments"], { "url": { "alias": "url"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "operationIds": { "alias": "operationIds"; "required": false; "isSignal": true; }; "uniqueOperationIds": { "alias": "uniqueOperationIds"; "required": false; "isSignal": true; }; "appInstanceId": { "alias": "appInstanceId"; "required": false; "isSignal": true; }; "searchDelimiter": { "alias": "searchDelimiter"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof NoopTreeSelectDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<LuCoreSelectDepartmentsDirective<any>, "lu-simple-select[departments],lu-multi-select[departments]", ["luDepartments"], { "url": { "alias": "url"; "required": false; "isSignal": true; }; "countUrl": { "alias": "countUrl"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "operationIds": { "alias": "operationIds"; "required": false; "isSignal": true; }; "uniqueOperationIds": { "alias": "uniqueOperationIds"; "required": false; "isSignal": true; }; "appInstanceId": { "alias": "appInstanceId"; "required": false; "isSignal": true; }; "searchDelimiter": { "alias": "searchDelimiter"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof NoopTreeSelectDirective; inputs: {}; outputs: {}; }]>;
 }
 
 interface LuCoreSelectLegalUnit extends ILuApiItem {

package/types/lucca-front-ng-form-header.d.ts

@@ -6,7 +6,7 @@ declare class FormHeaderComponent {
      */
     readonly headingLevel: i0.InputSignal<1 | 2 | 3 | 4 | 5 | 6>;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormHeaderComponent, "lu-form-header]", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormHeaderComponent, "lu-form-header", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**

package/types/lucca-front-ng-software-icon.d.ts

@@ -8,7 +8,7 @@ declare class SoftwareIconComponent {
     readonly domain = "https://cdn.lucca.fr";
     readonly path = "/transverse/prisme/visuals/software-icon/";
     readonly extension = ".svg";
-    readonly icon: _angular_core.InputSignal<"absences" | "timesheet" | "office" | "projects" | "shifts" | "performance" | "engagement" | "training" | "recruitment" | "mood" | "analytics" | "employee-administration" | "shared-documents" | "faces" | "business-expenses" | "invoices" | "payment-methods" | "accounting-assistant" | "certified-einvoicing-platform" | "compensation" | "payslip" | "benefits" | "payroll-assistant" | "cloud-control" | "ask-lucca" | "calendar" | "administration" | "client-center" | "sandbox" | "store" | "lucca">;
+    readonly icon: _angular_core.InputSignal<"absences" | "timesheet" | "office" | "projects" | "shifts" | "performance" | "engagement" | "training" | "recruitment" | "mood" | "analytics" | "employee-administration" | "shared-documents" | "faces" | "business-expenses" | "invoices" | "payment-methods" | "accounting-assistant" | "certified-einvoicing-platform" | "compensation" | "payslip" | "benefits" | "payroll-assistant" | "cloud-control" | "ask-lucca" | "ask-salesforce" | "calendar" | "administration" | "client-center" | "sandbox" | "store" | "lucca">;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly withTooltip: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly iconAlt: _angular_core.InputSignal<string>;
@@ -23,7 +23,7 @@ declare class SoftwareIconComponent {
  */
 declare const SOFTWARE_ICON_SIZE: readonly ["XXS", "XS", "S", "L"];
 type SoftwareIconSize = (typeof SOFTWARE_ICON_SIZE)[number];
-declare const SOFTWARE_ICON: readonly ["absences", "timesheet", "office", "projects", "shifts", "performance", "engagement", "training", "recruitment", "mood", "analytics", "employee-administration", "shared-documents", "faces", "business-expenses", "invoices", "payment-methods", "accounting-assistant", "certified-einvoicing-platform", "compensation", "payslip", "benefits", "payroll-assistant", "cloud-control", "ask-lucca", "calendar", "administration", "client-center", "sandbox", "store", "lucca"];
+declare const SOFTWARE_ICON: readonly ["absences", "timesheet", "office", "projects", "shifts", "performance", "engagement", "training", "recruitment", "mood", "analytics", "employee-administration", "shared-documents", "faces", "business-expenses", "invoices", "payment-methods", "accounting-assistant", "certified-einvoicing-platform", "compensation", "payslip", "benefits", "payroll-assistant", "cloud-control", "ask-lucca", "ask-salesforce", "calendar", "administration", "client-center", "sandbox", "store", "lucca"];
 type SoftwareIcon = (typeof SOFTWARE_ICON)[number];
 
 export { LU_SOFTWARE_ICON_WRAPPER, SOFTWARE_ICON, SOFTWARE_ICON_SIZE, SoftwareIconComponent };

package/types/lucca-front-ng-time.d.ts

@@ -169,6 +169,7 @@ declare class TimePickerComponent extends BasePickerComponent {
     protected readonly hoursDisplay: _angular_core.Signal<number | "––">;
     protected readonly minutesDisplay: _angular_core.Signal<number | "––">;
     protected readonly hours: _angular_core.Signal<number>;
+    protected readonly hoursInputValue: _angular_core.Signal<number | "––">;
     protected readonly minutes: _angular_core.Signal<number>;
     protected readonly pickerClasses: _angular_core.Signal<{
         [x: string]: boolean;