@lucca-front/ng 22.1.0 → 22.1.1

package/schematics/lu-button/migration.js

@@ -27,6 +27,12 @@ function migrateComponent(sourceFile, path, tree) {
                 if (button.inputs.palette) {
                     thingsToAdd += `palette="${button.inputs.palette}" `;
                 }
+                if (button.inputs.critical) {
+                    thingsToAdd += "critical ";
+                }
+                if (button.inputs.disabled) {
+                    thingsToAdd += "disabled ";
+                }
                 if (button.inputs.block) {
                     thingsToAdd += "block ";
                 }
@@ -39,23 +45,39 @@ function migrateComponent(sourceFile, path, tree) {
                  * Modify classes
                  */
                 const classes = classesNode.value;
-                const cleanedClasses = classes.split(' ').filter(c => {
-                    return ![
-                        'button',
-                        `mod-block`,
-                        `mod-disclosure`,
-                        `palette-${button.inputs.palette}`,
-                        `mod-text`,
-                        `mod-ghost`,
-                        `mod-outlined`,
-                        `mod-inverted`,
-                        `mod-onlyIcon`,
-                        `mod-withIcon`,
-                        `is-${button.inputs.state}`,
-                        `mod-delete`,
-                        `mod-${button.inputs.size}`
-                    ].includes(c);
-                }).join(' ');
+                const removedClasses = [
+                    'button',
+                    `mod-block`,
+                    `mod-disclosure`,
+                    `palette-${button.inputs.palette}`,
+                    `mod-text`,
+                    `mod-link`,
+                    `mod-ghost`,
+                    `mod-outline`,
+                    `mod-outlined`,
+                    `mod-AI`,
+                    `mod-onlyIcon`,
+                    `mod-withIcon`,
+                    `is-${button.inputs.state}`,
+                    `mod-delete`,
+                    `mod-critical`,
+                    // Bare state classes are deprecated aliases of .is-*
+                    'loading',
+                    'error',
+                    'success',
+                    `mod-${button.inputs.size}`
+                ];
+                // Invert is only carried by the ghost-invert and AI-invert types, otherwise the class is kept
+                const invertedByType = button.type.endsWith('-invert');
+                if (button.inputs.disabled) {
+                    removedClasses.push('disabled', 'is-disabled');
+                }
+                const cleanedClasses = classes.split(' ').filter(c => !removedClasses.includes(c) && !(invertedByType && INVERT_CLASSES.includes(c)))
+                    // .mod-invert is a deprecated alias of .mod-inverted
+                    .map(c => c === 'mod-invert' ? 'mod-inverted' : c)
+                    // .disabled is a deprecated alias of .is-disabled
+                    .map(c => c === 'disabled' ? 'is-disabled' : c)
+                    .join(' ');
                 templateUpdate.remove(button.nodeOffset + classesNode.keySpan.start.offset - 1, classesNode.sourceSpan.toString().length + 1);
                 if (cleanedClasses) {
                     templateUpdate.insertRight(button.nodeOffset + classesNode.keySpan.start.offset, `class="${cleanedClasses}"`);
@@ -80,17 +102,20 @@ function findCssButtons(sourceFile, basePath, tree) {
             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 classList = classes.split(' ');
                     const inputs = {
-                        size: classes.split(' ').find(c => /mod-(XS|S|M|L|XL|XXL)/.test(c))?.replace('mod-', ''),
-                        block: classes.includes(`mod-block`),
-                        delete: classes.includes(`mod-delete`),
-                        disclosure: classes.includes(`mod-disclosure`),
-                        palette: classes.split(' ').find(c => /palette-(\w+)/.test(c))?.replace('palette-', ''),
-                        state: classes.split(' ').find(c => /is-(\w+)/.test(c))?.replace('is-', ''),
+                        size: classList.find(c => /^mod-(XS|S|M|L|XL|XXL)$/.test(c))?.replace('mod-', ''),
+                        block: classList.includes(`mod-block`),
+                        critical: classList.includes(`mod-delete`) || classList.includes(`mod-critical`),
+                        // The disabled input only works on a <button>, links keep the .is-disabled class
+                        disabled: node.name === 'button' && (classList.includes(`disabled`) || classList.includes(`is-disabled`)),
+                        disclosure: classList.includes(`mod-disclosure`),
+                        palette: classList.find(c => /palette-(\w+)/.test(c))?.replace('palette-', ''),
+                        state: classList.find(c => /^(is-)?(loading|error|success)$/.test(c))?.replace('is-', ''),
                     };
                     const button = {
                         node: node,
-                        type: getButtonType(classes),
+                        type: getButtonType(classList),
                         inputs,
                         nodeOffset: template.offsetStart,
                         filePath: template.filePath,
@@ -103,18 +128,19 @@ function findCssButtons(sourceFile, basePath, tree) {
     });
     return buttons;
 }
-function getButtonType(classes) {
-    if (classes.includes('mod-outlined')) {
+const INVERT_CLASSES = ['mod-invert', 'mod-inverted'];
+function getButtonType(classList) {
+    const inverted = INVERT_CLASSES.some(c => classList.includes(c));
+    // .mod-outline is a deprecated alias of .mod-outlined
+    if (classList.includes('mod-outlined') || classList.includes('mod-outline')) {
         return 'outlined';
     }
-    if (classes.includes('mod-ghost')) {
-        return 'ghost';
+    if (classList.includes('mod-AI')) {
+        return inverted ? 'AI-invert' : 'AI';
     }
-    if (classes.includes('mod-text')) {
-        if (classes.includes('mod-invert')) {
-            return 'ghost-invert';
-        }
-        return 'ghost';
+    // .mod-text and .mod-link are deprecated aliases of .mod-ghost
+    if (['mod-ghost', 'mod-text', 'mod-link'].some(c => classList.includes(c))) {
+        return inverted ? 'ghost-invert' : 'ghost';
     }
     return '';
 }

package/src/components/_sidepanel.scss

@@ -15,9 +15,9 @@
 		&.mod-sidepanel {
 			position: fixed !important;
 			inset-block: 0;
-			inset-inline-end: 0;
+			inset-inline-end: var(--commons-pushPanel-inlineSize);
 			inline-size: var(--components-sidepanel-M);
-			max-inline-size: 100%;
+			max-inline-size: calc(100% - var(--commons-pushPanel-inlineSize));
 			max-block-size: 100vb;
 			border-radius: 0;
 			animation-name: sidepanel;

package/src/components/cdk/_global.scss

@@ -26,6 +26,10 @@
 	position: absolute;
 	z-index: 1000;
 
+	&.cdk-overlay-popover {
+		inline-size: calc(100% - var(--commons-pushPanel-inlineSize)) !important;
+	}
+
 	&.mod-stacked {
 		@for $i from 1 through 3 {
 			@include stacked($i);

package/src/components/cdk/_overlay.scss

@@ -41,7 +41,7 @@
 		max-inline-size: 30rem;
 	}
 
-	// Caps the panel anchored to the field only: below the `S` breakpoint the panel is rendered by the
+	// Caps the panel anchored to the field only: below the `XS` breakpoint the panel is rendered by the
 	// dialog as a sheet, which spans the whole viewport and sizes itself.
 	&:not(.dialog):has(> lu-select-panel) {
 		max-inline-size: 35rem !important;

package/types/lucca-front-ng-activity-feed.d.ts

@@ -14,21 +14,25 @@ type ActivityFeedStepStatus = (typeof ACTIVITY_FEED_STEP_STATUS)[number];
 declare class ActivityFeedStepComponent {
     #private;
     readonly intl: _angular_core.InputSignalWithTransform<_lucca_front_ng_activity_feed.ActivityFeedTranslate, Partial<_lucca_front_ng_activity_feed.ActivityFeedTranslate>>;
-    readonly label: _angular_core.InputSignal<PortalContent>;
-    readonly user: _angular_core.InputSignal<ILuUser>;
-    readonly status: _angular_core.InputSignal<"success" | "critical" | "pending">;
-    readonly icon: _angular_core.InputSignal<LuccaIcon>;
-    readonly date: _angular_core.InputSignal<string | Date>;
-    protected readonly preparedDate: _angular_core.Signal<Date>;
+    readonly label: _angular_core.InputSignal<PortalContent | null>;
+    readonly user: _angular_core.InputSignal<ILuUser | null>;
+    /**
+     * Displays a placeholder avatar instead of the `user` one
+     */
+    readonly avatarPlaceholder: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true">;
+    readonly status: _angular_core.InputSignal<"success" | "critical" | "pending" | null>;
+    readonly icon: _angular_core.InputSignal<LuccaIcon | null>;
+    readonly date: _angular_core.InputSignal<string | Date | null>;
+    protected readonly preparedDate: _angular_core.Signal<Date | null>;
     /**
      * format given to the date pipe for display.
      *
      * See https://angular.dev/api/common/DatePipe#custom-format-options
      */
-    readonly datePipeFormat: _angular_core.InputSignal<string>;
-    protected readonly dateDisplay: _angular_core.Signal<string>;
+    readonly datePipeFormat: _angular_core.InputSignal<string | undefined>;
+    protected readonly dateDisplay: _angular_core.Signal<string | null>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActivityFeedStepComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActivityFeedStepComponent, "lu-activity-feed-step", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "datePipeFormat": { "alias": "datePipeFormat"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActivityFeedStepComponent, "lu-activity-feed-step", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "avatarPlaceholder": { "alias": "avatarPlaceholder"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "datePipeFormat": { "alias": "datePipeFormat"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class ActivityFeedUpdateItemComponent {

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

@@ -111,12 +111,12 @@ declare abstract class ALuApiOptionFeeder<T extends ILuApiItem = ILuApiItem, S e
 
 declare class LuApiFeederComponent<T extends ILuApiItem = ILuApiItem> extends ALuApiOptionFeeder<T, LuApiHybridService<T>> implements ILuOptionOperator<T>, ILuOnOpenSubscriber {
     readonly outOptions$: BehaviorSubject<T[]>;
-    readonly standard: _angular_core.InputSignal<"v3" | "v4">;
-    readonly api: _angular_core.InputSignal<string>;
-    readonly fields: _angular_core.InputSignal<string>;
-    readonly filters: _angular_core.InputSignal<string[]>;
-    readonly orderBy: _angular_core.InputSignal<string>;
-    readonly sort: _angular_core.InputSignal<string>;
+    readonly standard: _angular_core.InputSignal<"v3" | "v4" | undefined>;
+    readonly api: _angular_core.InputSignal<string | undefined>;
+    readonly fields: _angular_core.InputSignal<string | undefined>;
+    readonly filters: _angular_core.InputSignal<string[] | undefined>;
+    readonly orderBy: _angular_core.InputSignal<string | undefined>;
+    readonly sort: _angular_core.InputSignal<string | undefined>;
     constructor(hostService: LuApiHybridService<T>, selfService: LuApiHybridService<T>);
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LuApiFeederComponent<any>, [{ optional: true; skipSelf: true; }, { self: true; }]>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LuApiFeederComponent<any>, "lu-api-feeder", never, { "standard": { "alias": "standard"; "required": false; "isSignal": true; }; "api": { "alias": "api"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "orderBy": { "alias": "orderBy"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -155,12 +155,12 @@ declare abstract class ALuApiOptionPagedSearcher<T extends ILuApiItem = ILuApiIt
 
 declare class LuApiSearcherComponent<T extends ILuApiItem = ILuApiItem> extends ALuApiOptionSearcher<T, LuApiHybridService<T>> implements OnInit {
     readonly searchInput: _angular_core.Signal<ElementRef<HTMLElement>>;
-    readonly standard: _angular_core.InputSignal<"v3" | "v4">;
-    readonly api: _angular_core.InputSignal<string>;
-    readonly fields: _angular_core.InputSignal<string>;
-    readonly filters: _angular_core.InputSignal<string[]>;
-    readonly orderBy: _angular_core.InputSignal<string>;
-    readonly sort: _angular_core.InputSignal<string>;
+    readonly standard: _angular_core.InputSignal<"v3" | "v4" | undefined>;
+    readonly api: _angular_core.InputSignal<string | undefined>;
+    readonly fields: _angular_core.InputSignal<string | undefined>;
+    readonly filters: _angular_core.InputSignal<string[] | undefined>;
+    readonly orderBy: _angular_core.InputSignal<string | undefined>;
+    readonly sort: _angular_core.InputSignal<string | undefined>;
     readonly debounceTime: _angular_core.InputSignal<number>;
     clueControl: FormControl;
     constructor(hostService: LuApiHybridService<T>, selfService: LuApiHybridService<T>);
@@ -172,12 +172,12 @@ declare class LuApiSearcherComponent<T extends ILuApiItem = ILuApiItem> extends
 }
 declare class LuApiPagedSearcherComponent<T extends ILuApiItem = ILuApiItem> extends ALuApiOptionPagedSearcher<T, LuApiHybridService<T>> implements OnInit {
     readonly searchInput: _angular_core.Signal<ElementRef<HTMLElement>>;
-    readonly standard: _angular_core.InputSignal<"v3" | "v4">;
-    readonly api: _angular_core.InputSignal<string>;
-    readonly fields: _angular_core.InputSignal<string>;
-    readonly filters: _angular_core.InputSignal<string[]>;
-    readonly orderBy: _angular_core.InputSignal<string>;
-    readonly sort: _angular_core.InputSignal<string>;
+    readonly standard: _angular_core.InputSignal<"v3" | "v4" | undefined>;
+    readonly api: _angular_core.InputSignal<string | undefined>;
+    readonly fields: _angular_core.InputSignal<string | undefined>;
+    readonly filters: _angular_core.InputSignal<string[] | undefined>;
+    readonly orderBy: _angular_core.InputSignal<string | undefined>;
+    readonly sort: _angular_core.InputSignal<string | undefined>;
     readonly debounceTime: _angular_core.InputSignal<number>;
     clueControl: FormControl;
     constructor(hostService: LuApiHybridService<T>, selfService: LuApiHybridService<T>);
@@ -217,11 +217,11 @@ declare abstract class ALuApiOptionPager<T extends ILuApiItem = ILuApiItem, S ex
 }
 
 declare class LuApiPagerComponent<T extends ILuApiItem = ILuApiItem> extends ALuApiOptionPager<T, LuApiHybridService<T>> implements ILuOptionOperator<T>, OnInit, ILuOnScrollBottomSubscriber, ILuOnOpenSubscriber {
-    readonly standard: _angular_core.InputSignal<"v3" | "v4">;
-    readonly api: _angular_core.InputSignal<string>;
-    readonly fields: _angular_core.InputSignal<string>;
-    readonly filters: _angular_core.InputSignal<string[]>;
-    readonly orderBy: _angular_core.InputSignal<string>;
+    readonly standard: _angular_core.InputSignal<"v3" | "v4" | undefined>;
+    readonly api: _angular_core.InputSignal<string | undefined>;
+    readonly fields: _angular_core.InputSignal<string | undefined>;
+    readonly filters: _angular_core.InputSignal<string[] | undefined>;
+    readonly orderBy: _angular_core.InputSignal<string | undefined>;
     constructor(hostService: LuApiHybridService<T>, selfService: LuApiHybridService<T>);
     ngOnInit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LuApiPagerComponent<any>, [{ optional: true; skipSelf: true; }, { self: true; }]>;
@@ -235,20 +235,20 @@ declare class LuApiSelectInputComponent<T extends ILuApiItem = ILuApiItem> exten
     protected _viewContainerRef: ViewContainerRef;
     protected _renderer: Renderer2;
     readonly standard: _angular_core.InputSignal<"v3" | "v4">;
-    readonly api: _angular_core.InputSignal<string>;
+    readonly api: _angular_core.InputSignal<string | undefined>;
     /**
      * only works with standard="v3"
      */
-    readonly fields: _angular_core.InputSignal<string>;
-    readonly filters: _angular_core.InputSignal<string[]>;
+    readonly fields: _angular_core.InputSignal<string | undefined>;
+    readonly filters: _angular_core.InputSignal<string[] | undefined>;
     /**
      * only works with standard="v3", otherwise use sort
      */
-    readonly orderBy: _angular_core.InputSignal<string>;
+    readonly orderBy: _angular_core.InputSignal<string | undefined>;
     /**
      * only works with standard="v4", otherwise use orderBy
      */
-    readonly sort: _angular_core.InputSignal<string>;
+    readonly sort: _angular_core.InputSignal<string | undefined>;
     byId: LuOptionComparer<T>;
     constructor(_changeDetectorRef: ChangeDetectorRef, _overlay: Overlay, _elementRef: ElementRef<HTMLElement>, _viewContainerRef: ViewContainerRef, _renderer: Renderer2);
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LuApiSelectInputComponent<any>, never>;

package/types/lucca-front-ng-approbation-inbox.d.ts

@@ -13,26 +13,34 @@ declare class ApprobationInboxDetailMainBlockComponent {
 
 interface LuApprobationInboxDetailHeaderTranslations {
     delegation: string;
+    overdue: string;
 }
 
 declare class ApprobationInboxHeaderComponent {
-    protected readonly dialogRef: LuDialogRef<any, any>;
-    protected readonly intl: LuApprobationInboxDetailHeaderTranslations;
+    protected readonly dialogRef: LuDialogRef<any, any> | null;
     readonly label: _angular_core.InputSignal<string>;
-    readonly delegatedBy: _angular_core.InputSignal<string>;
-    readonly actions: _angular_core.Signal<TemplateRef<unknown>>;
+    readonly delegatedBy: _angular_core.InputSignal<string | null>;
+    /**
+     * Displays an overdue status badge next to the title. Ignored when content is projected in [approbationInboxDetailTitleTrailing]
+     */
+    readonly overdue: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Overrides default translations
+     */
+    readonly intl: _angular_core.InputSignalWithTransform<LuApprobationInboxDetailHeaderTranslations, Partial<LuApprobationInboxDetailHeaderTranslations>>;
+    readonly actions: _angular_core.Signal<TemplateRef<unknown> | undefined>;
     readonly titleId: string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ApprobationInboxHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ApprobationInboxHeaderComponent, "lu-approbation-inbox-detail-header", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "delegatedBy": { "alias": "delegatedBy"; "required": false; "isSignal": true; }; }, {}, never, ["[approbationInboxDetailIllustration]", "*", "[approbationInboxDetailActions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ApprobationInboxHeaderComponent, "lu-approbation-inbox-detail-header", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "delegatedBy": { "alias": "delegatedBy"; "required": false; "isSignal": true; }; "overdue": { "alias": "overdue"; "required": false; "isSignal": true; }; "intl": { "alias": "intl"; "required": false; "isSignal": true; }; }, {}, never, ["[approbationInboxDetailIllustration]", "[approbationInboxDetailTitleTrailing]", "*", "[approbationInboxDetailActions]"], true, never>;
 }
 
 declare class ApprobationInboxDetailComponent {
-    protected readonly dialogRef: LuDialogRef<any, any>;
+    protected readonly dialogRef: LuDialogRef<any, any> | null;
     readonly insideDialog: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly headerRef: _angular_core.Signal<ApprobationInboxHeaderComponent>;
-    readonly content: _angular_core.Signal<TemplateRef<unknown>>;
-    readonly header: _angular_core.Signal<TemplateRef<unknown>>;
-    readonly titleId: _angular_core.Signal<string>;
+    readonly headerRef: _angular_core.Signal<ApprobationInboxHeaderComponent | undefined>;
+    readonly content: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    readonly header: _angular_core.Signal<TemplateRef<unknown> | undefined>;
+    readonly titleId: _angular_core.Signal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ApprobationInboxDetailComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ApprobationInboxDetailComponent, "lu-approbation-inbox-detail", never, { "insideDialog": { "alias": "insideDialog"; "required": false; "isSignal": true; }; }, {}, ["headerRef"], ["[approbationInboxDetailHeader]", "*"], true, never>;
 }
@@ -41,7 +49,7 @@ declare class ApprobationInboxLinkComponent {
     private readonly listInstance;
     readonly current: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly dialogService: LuDialogService;
-    readonly mediaMinM: _angular_core.Signal<boolean>;
+    readonly mediaMinM: _angular_core.Signal<boolean | undefined>;
     openDialog($event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ApprobationInboxLinkComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ApprobationInboxLinkComponent, "a[lu-approbation-inbox-list-action]", never, { "current": { "alias": "current"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;

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

@@ -14,7 +14,7 @@ declare const LU_BUBBLE_ICON_DEFAULT_DIRECTION: InjectionToken<"top" | "bottom"
 
 declare class BubbleIconComponent {
     readonly icon: _angular_core.InputSignal<LuccaIcon>;
-    readonly alt: _angular_core.InputSignal<string>;
+    readonly alt: _angular_core.InputSignal<string | null>;
     readonly size: _angular_core.InputSignal<"XS" | "S" | "M" | "L">;
     readonly palette: _angular_core.InputSignal<"error" | "success" | "warning" | "product" | "neutral" | "none" | "brand" | "kiwi" | "lime" | "cucumber" | "mint" | "glacier" | "lagoon" | "blueberry" | "lavender" | "grape" | "watermelon" | "pumpkin" | "pineapple" | "pagga" | "poplee" | "coreHR" | "timmi" | "cleemy" | "cc">;
     readonly paletteClass: _angular_core.Signal<{

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

@@ -22,7 +22,7 @@ declare class CalloutDisclosureComponent {
      * Which icon should we display in the disclosure callout if any?
      * Defaults to no icon.
      */
-    readonly icon: _angular_core.InputSignal<LuccaIcon>;
+    readonly icon: _angular_core.InputSignal<LuccaIcon | undefined>;
     /**
      * Which palette should be used for the entire disclosure callout.
      * Defaults to none (inherits parent palette)
@@ -39,7 +39,7 @@ declare class CalloutDisclosureComponent {
      * If one of the icon or palette inputs are filled along with the state input, their values will have the priority over
      * state (so setting state to success and palette to warning will make the palette warning)
      */
-    readonly state: _angular_core.InputSignal<"success" | "warning" | "error">;
+    readonly state: _angular_core.InputSignal<"success" | "warning" | "error" | undefined>;
     /**
      * Is the disclosure callout is open by default
      */
@@ -72,11 +72,11 @@ declare class CalloutFeedbackListComponent {
      * Which palette should be used for the entire feedback list callout.
      * Defaults to none (inherits parent palette)
      */
-    readonly palette: _angular_core.InputSignal<"success" | "warning" | "error" | "product" | "neutral" | "none" | "brand">;
+    readonly palette: _angular_core.InputSignal<"success" | "warning" | "error" | "product" | "neutral" | "none" | "brand" | undefined>;
     /**
      * Which size should the feedback list callout be? Defaults to medium
      */
-    readonly size: _angular_core.InputSignal<"M" | "S">;
+    readonly size: _angular_core.InputSignal<"M" | "S" | undefined>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CalloutFeedbackListComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CalloutFeedbackListComponent, "ul[lu-callout-feedback-list]", never, { "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
@@ -94,7 +94,7 @@ declare class CalloutPopoverComponent {
     /**
      * Label (visual only) to put inside the button, often used to show just a number
      */
-    readonly buttonLabel: _angular_core.InputSignal<string | number>;
+    readonly buttonLabel: _angular_core.InputSignal<string | number | undefined>;
     /**
      * Alternative for the button
      */
@@ -111,11 +111,11 @@ declare class CalloutPopoverComponent {
     /**
      * Size for both button and popover content
      */
-    readonly size: _angular_core.InputSignal<"M" | "S" | "XS">;
+    readonly size: _angular_core.InputSignal<"M" | "S" | "XS" | undefined>;
     /**
      * Icon shows in button and next to popover's title
      */
-    readonly icon: _angular_core.InputSignal<LuccaIcon>;
+    readonly icon: _angular_core.InputSignal<LuccaIcon | undefined>;
     /**
      * State is a shorthand to set the icon and the palette to the recommended values for the icon and palette based on
      * the provided state.
@@ -123,11 +123,11 @@ declare class CalloutPopoverComponent {
      * If one of the icon or palette inputs are filled along with the state input, their values will have the priority over
      * state (so setting state to success and palette to warning will make the palette warning)
      */
-    readonly state: _angular_core.InputSignal<"success" | "warning" | "error">;
+    readonly state: _angular_core.InputSignal<"success" | "warning" | "error" | undefined>;
     /**
      * Heading for the details popover
      */
-    readonly heading: _angular_core.InputSignal<PortalContent>;
+    readonly heading: _angular_core.InputSignal<PortalContent | undefined>;
     /**
      * Defines callout popover open position above by default
      */
@@ -135,13 +135,13 @@ declare class CalloutPopoverComponent {
     /**
      * Defines custom callout popover open position override popoverPosition
      */
-    readonly customPopoverPositions: _angular_core.InputSignal<ConnectionPositionPair[]>;
+    readonly customPopoverPositions: _angular_core.InputSignal<ConnectionPositionPair[] | undefined>;
     /**
      * Disable callout popover apparition
      */
     readonly popoverDisabled: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true">;
     readonly feedbackItems: _angular_core.Signal<readonly CalloutFeedbackItemComponent[]>;
-    readonly contentSize: _angular_core.Signal<"M" | "S">;
+    readonly contentSize: _angular_core.Signal<"M" | "S" | undefined>;
     readonly calloutOverlayClasses: _angular_core.Signal<{
         [x: string]: boolean;
     }>;
@@ -183,11 +183,11 @@ declare class CalloutComponent {
     /**
      * The title of the callout
      */
-    readonly heading: _angular_core.InputSignal<PortalContent>;
+    readonly heading: _angular_core.InputSignal<PortalContent | undefined>;
     /**
      * Define the aria level of the title
      */
-    readonly hx: _angular_core.InputSignalWithTransform<2 | 3 | 1 | 4 | 5 | 6, 2 | 3 | 1 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | "5" | "6">;
+    readonly hx: _angular_core.InputSignalWithTransform<2 | 3 | 1 | 4 | 5 | 6 | null, 2 | 3 | 1 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | "5" | "6">;
     /**
      * Which palette should be used for the entire callout.
      * Defaults to none (inherits parent palette)
@@ -196,7 +196,7 @@ declare class CalloutComponent {
     /**
      * Which size should the callout be? Defaults to medium
      */
-    readonly size: _angular_core.InputSignal<"M" | "S">;
+    readonly size: _angular_core.InputSignal<"M" | "S" | undefined>;
     /**
      * State is a shorthand to set the icon and the palette to the recommended values for the icon and palette based on
      * the provided state.
@@ -204,12 +204,12 @@ declare class CalloutComponent {
      * If one of the icon or palette inputs are filled along with the state input, their values will have the priority over
      * state (so setting state to success and palette to warning will make the palette warning)
      */
-    readonly state: _angular_core.InputSignal<"success" | "warning" | "error">;
+    readonly state: _angular_core.InputSignal<"success" | "warning" | "error" | undefined>;
     /**
      * Which icon should we display in the callout if any?
      * Defaults to no icon.
      */
-    readonly icon: _angular_core.InputSignal<LuccaIcon>;
+    readonly icon: _angular_core.InputSignal<LuccaIcon | undefined>;
     /**
      * Should we display the remove icon?
      */
@@ -221,7 +221,7 @@ declare class CalloutComponent {
     /**
      * Defines the icon’s alt attribute used for accessibility
      */
-    readonly iconAlt: _angular_core.InputSignal<string>;
+    readonly iconAlt: _angular_core.InputSignal<string | null>;
     /**
      * Displayed in AI mode
      */

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

@@ -27,7 +27,7 @@ declare class ChipComponent {
      * Which palette should be used for the entire chip.
      * Defaults to none (inherits parent palette)
      */
-    readonly palette: _angular_core.InputSignal<string>;
+    readonly palette: _angular_core.InputSignal<string | undefined>;
     /**
      * Disabled the chip
      */
@@ -35,7 +35,7 @@ declare class ChipComponent {
     /**
      * Which size should the chip be? Defaults to the regular size, `S` for small
      */
-    readonly size: _angular_core.InputSignal<"S">;
+    readonly size: _angular_core.InputSignal<"S" | null>;
     /**
      * State is a shorthand to set the icon and the palette to the recommended values for the icon and palette based on
      * the provided state.
@@ -43,12 +43,12 @@ declare class ChipComponent {
      * If one of the icon or palette inputs are filled along with the state input, their values will have the priority over
      * state (so setting state to success and palette to warning will make the palette warning)
      */
-    readonly state: _angular_core.InputSignal<"warning" | "critical">;
+    readonly state: _angular_core.InputSignal<"warning" | "critical" | null>;
     /**
      * Which icon should we display in the chip if any?
      * Defaults to no icon.
      */
-    readonly icon: _angular_core.InputSignal<LuccaIcon>;
+    readonly icon: _angular_core.InputSignal<LuccaIcon | null>;
     /**
      * Emit event when button kill is click
      */
@@ -56,8 +56,8 @@ declare class ChipComponent {
     readonly stateAlt: _angular_core.Signal<string>;
     readonly isWarning: _angular_core.Signal<boolean>;
     readonly isCritical: _angular_core.Signal<boolean>;
-    readonly displayedIcon: _angular_core.Signal<LuccaIcon>;
-    protected readonly tooltipTriggerAnchor: _angular_core.Signal<HTMLElement>;
+    readonly displayedIcon: _angular_core.Signal<LuccaIcon | null>;
+    protected readonly tooltipTriggerAnchor: _angular_core.Signal<HTMLElement | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChipComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChipComponent, "lu-chip, button[luChip], a[luChip]", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "withEllipsis": { "alias": "withEllipsis"; "required": false; "isSignal": true; }; "unkillable": { "alias": "unkillable"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, { "kill": "kill"; }, never, ["*"], true, never>;
 }

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

@@ -23,7 +23,7 @@ declare class ClearComponent<T> extends ALuClear<T> implements ILuClear<T> {
     /**
      * Which size should the clear be? Defaults to the regular size, `S` for small
      */
-    readonly size: _angular_core.InputSignal<"S">;
+    readonly size: _angular_core.InputSignal<"S" | null>;
     /**
      * Disabled the clear
      */

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

@@ -7,9 +7,9 @@ declare const COLOR_SIZE: readonly ["L", "XL"];
 type ColorSize = (typeof COLOR_SIZE)[number];
 
 declare class ColorComponent {
-    readonly value: _angular_core.InputSignal<string>;
-    readonly borderColor: _angular_core.InputSignal<string>;
-    readonly size: _angular_core.InputSignal<"L" | "XL">;
+    readonly value: _angular_core.InputSignal<string | null>;
+    readonly borderColor: _angular_core.InputSignal<string | null>;
+    readonly size: _angular_core.InputSignal<"L" | "XL" | null>;
     readonly hiddenName: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorComponent, "lu-color", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hiddenName": { "alias": "hiddenName"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;

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

@@ -5,23 +5,23 @@ import { PortalContent } from '@lucca-front/ng/core';
 declare class CommentComponent {
     #private;
     readonly content: _angular_core.InputSignal<PortalContent>;
-    readonly date: _angular_core.InputSignal<Date>;
+    readonly date: _angular_core.InputSignal<Date | undefined>;
     /**
      * format given to the date pipe for display.
      *
      * See https://angular.dev/api/common/DatePipe#custom-format-options
      */
-    readonly datePipeFormat: _angular_core.InputSignal<string>;
-    readonly noAvatar: _angular_core.Signal<boolean>;
-    readonly avatar: _angular_core.Signal<_angular_core.TemplateRef<unknown>>;
-    readonly authorName: _angular_core.Signal<PortalContent>;
-    readonly size: _angular_core.Signal<"S" | "M">;
+    readonly datePipeFormat: _angular_core.InputSignal<string | undefined>;
+    readonly noAvatar: _angular_core.Signal<boolean | undefined>;
+    readonly avatar: _angular_core.Signal<_angular_core.TemplateRef<unknown> | undefined>;
+    readonly authorName: _angular_core.Signal<PortalContent | undefined>;
+    readonly size: _angular_core.Signal<"S" | "M" | undefined>;
     readonly contentIsPortal: _angular_core.Signal<boolean>;
     readonly contentIsHTML: _angular_core.Signal<boolean>;
     readonly noInfos: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true">;
     readonly plainText: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true">;
     readonly dateDisplay: _angular_core.Signal<string>;
-    readonly role: _angular_core.Signal<string>;
+    readonly role: _angular_core.Signal<"listitem" | null>;
     get roleAttr(): string | null;
     isStringPortalContent(message: PortalContent): message is string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommentComponent, never>;
@@ -39,15 +39,15 @@ declare class CommentBlockComponent {
      */
     readonly small: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true">;
     readonly chatAnswer: _angular_core.InputSignalWithTransform<boolean, boolean | "" | "false" | "true">;
-    readonly authorName: _angular_core.InputSignal<PortalContent>;
-    readonly avatar: _angular_core.InputSignal<TemplateRef<unknown>>;
+    readonly authorName: _angular_core.InputSignal<PortalContent | undefined>;
+    readonly avatar: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
     /**
      * Which size should each comment of the block be? `S` applies the small size
      */
-    readonly size: _angular_core.InputSignal<"S" | "M">;
+    readonly size: _angular_core.InputSignal<"S" | "M" | undefined>;
     readonly noAvatar: _angular_core.Signal<boolean>;
     readonly isSingleComment: _angular_core.Signal<boolean>;
-    readonly role = "listitem";
+    readonly role: string | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommentBlockComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommentBlockComponent, "lu-comment-block", never, { "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "small": { "alias": "small"; "required": false; "isSignal": true; }; "chatAnswer": { "alias": "chatAnswer"; "required": false; "isSignal": true; }; "authorName": { "alias": "authorName"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, ["comments"], ["*"], true, never>;
 }