@lucca-front/ng 21.1.2 → 21.2.0-rc.1

package/src/components/_sidepanel.scss

@@ -15,7 +15,7 @@
 		&.mod-sidepanel {
 			position: fixed !important;
 			inset-block: 0;
-			inset-inline-end: 0;
+			inset-inline-end: var(--commons-pushPanel-width);
 			inline-size: var(--components-sidepanel-M);
 			max-inline-size: 100%;
 			max-block-size: 100vh;

package/src/components/cdk/_dragDrop.scss

@@ -92,4 +92,3 @@
 		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 	}
 }
-

package/src/components/cdk/_global.scss

@@ -2,20 +2,20 @@
 @use '@lucca-front/scss/src/commons/utils/media';
 
 @mixin stacked($level) {
-  $selector: '';
-  $string: '~ .cdk-global-overlay-wrapper';
+	$selector: '';
+	$string: '~ .cdk-global-overlay-wrapper';
 
 	@for $i from 1 through $level {
-    $selector: $selector + $string;
-  }
+		$selector: $selector + $string;
+	}
 
-  &:has(#{$selector}) {
-      .dialog {
-				&.mod-stacked {
-					--components-dialog-level: #{$level};
-				}
+	&:has(#{$selector}) {
+		.dialog {
+			&.mod-stacked {
+				--components-dialog-level: #{$level};
 			}
-  }
+		}
+	}
 }
 
 .cdk-global-overlay-wrapper {
@@ -23,7 +23,7 @@
 	inset-inline-start: 0;
 	inset-block-start: 0;
 	pointer-events: none;
-	inline-size: 100%;
+	inline-size: calc(100% - var(--commons-pushPanel-width)) !important;
 	display: flex;
 	position: absolute;
 	z-index: 1000;

package/src/components/cdk/_misc.scss

@@ -1,6 +1,6 @@
 .cdk-visually-hidden {
 	border: 0 !important;
-	clip: rect(1px, 1px, 1px, 1px) !important;
+	clip-path: rect(1px 1px 1px 1px) !important;
 	block-size: 1px !important;
 	inline-size: 1px !important;
 	margin: -1px !important;
@@ -10,4 +10,3 @@
 	white-space: nowrap !important;
 	contain: paint !important;
 }
-

package/src/components/cdk/_overlay.scss

@@ -13,7 +13,7 @@
 	inset-inline-start: 0;
 	pointer-events: none;
 	inset-block-start: 0;
-	inline-size: 100%;
+	inline-size: calc(100% - var(--commons-pushPanel-width));
 }
 
 .cdk-overlay-connected-position-bounding-box {
@@ -50,7 +50,7 @@
 	opacity: 0;
 	pointer-events: auto;
 	position: absolute;
-	inset: 0;
+	inset: 0 var(--commons-pushPanel-width) 0 0 !important;
 	transition: opacity var(--commons-animations-durations-fast) ease-in-out;
 	z-index: 1000;
 

package/src/components/cdk/_textarea.scss

@@ -24,4 +24,3 @@
 	padding-inline: 0 !important;
 	box-sizing: content-box !important;
 }
-

package/src/definitions/option/_option-item.scss

@@ -61,7 +61,8 @@
 		}
 
 		@layer mods {
-			&.is-selected, :host-context([aria-selected="true"]) & {
+			&.is-selected,
+			:host-context([aria-selected='true']) & {
 				background-color: var(--palettes-50, var(--palettes-product-50));
 
 				&::before {
@@ -178,7 +179,8 @@
 					inline-size: var(--components-options-checkbox-size);
 				}
 
-				&.is-selected, :host-context([aria-selected="true"]) & {
+				&.is-selected,
+				:host-context([aria-selected='true']) & {
 					&::before {
 						background-color: var(--components-options-checkbox-color);
 						box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);

package/src/definitions/select/_select-input.scss

@@ -99,7 +99,7 @@
 	// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
 
 	@layer mods {
-	// Small
+		// Small
 		:host-context(.textfield.mod-S) {
 			padding: 0;
 

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

@@ -0,0 +1,38 @@
+import * as _angular_core from '@angular/core';
+import { ILuUser } from '@lucca-front/ng/user';
+
+interface ActivityFeedTranslate {
+    replaceByAlt: string;
+    at: string;
+}
+
+declare class ActivityFeedStepComponent {
+    #private;
+    readonly intl: _angular_core.InputSignalWithTransform<ActivityFeedTranslate, Partial<ActivityFeedTranslate>>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly user: _angular_core.InputSignal<ILuUser>;
+    readonly date: _angular_core.InputSignal<Date>;
+    /**
+     * 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>;
+    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": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "datePipeFormat": { "alias": "datePipeFormat"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class ActivityFeedUpdateComponent {
+    readonly intl: _angular_core.InputSignalWithTransform<ActivityFeedTranslate, Partial<ActivityFeedTranslate>>;
+    readonly strikethrough: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActivityFeedUpdateComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActivityFeedUpdateComponent, "lu-activity-feed-update", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "strikethrough": { "alias": "strikethrough"; "required": false; "isSignal": true; }; }, {}, never, ["[activityFeedUpdateAfter]", "[activityFeedUpdateBefore]"], true, never>;
+}
+
+declare class ActivityFeedComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActivityFeedComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActivityFeedComponent, "lu-activity-feed", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { ActivityFeedComponent, ActivityFeedStepComponent, ActivityFeedUpdateComponent };

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

@@ -18,11 +18,12 @@ declare class CommentComponent {
     readonly authorName: _angular_core.Signal<_lucca_front_ng_core.PortalContent>;
     readonly size: _angular_core.Signal<"S" | "M">;
     readonly contentIsHTML: _angular_core.Signal<boolean>;
+    readonly noInfos: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly dateDisplay: _angular_core.Signal<string>;
     readonly role: _angular_core.Signal<string>;
     get roleAttr(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CommentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CommentComponent, "lu-comment", never, { "content": { "alias": "content"; "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<CommentComponent, "lu-comment", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "date": { "alias": "date"; "required": false; "isSignal": true; }; "datePipeFormat": { "alias": "datePipeFormat"; "required": false; "isSignal": true; }; "noInfos": { "alias": "noInfos"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class CommentBlockComponent {

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

@@ -147,7 +147,7 @@ type BaseLuDialogConfig<C, TData = LuDialogData<C>> = {
     /**
      * Should it be a modal (default), a drawer? a drawer from bottom?
      */
-    mode?: 'default' | 'drawer' | 'drawer-from-bottom';
+    mode?: 'default' | 'drawer' | 'drawer-from-bottom' | 'fancy';
     /**
      * Classes to add to the panel
      */
@@ -260,11 +260,12 @@ declare class DialogComponent implements AfterViewInit {
     #private;
     readonly dialogRef: LuDialogRef<unknown, never>;
     readonly stacked: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly fancyIllustration: i0.InputSignal<"approval" | "checklist" | "email" | "install" | "mapping" | "save" | "users" | "welcome">;
     close(): void;
     dismiss(): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<DialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "lu-dialog", never, { "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DialogComponent, "lu-dialog", never, { "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "fancyIllustration": { "alias": "fancyIllustration"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class DialogCloseDirective {
@@ -295,7 +296,7 @@ declare class DialogOpenDirective {
         canClose?: (comp: unknown) => boolean | rxjs.Observable<boolean>;
         canCloseWithBackdrop?: boolean;
         size?: _lucca_front_ng_dialog.LuDialogSize;
-        mode?: "default" | "drawer" | "drawer-from-bottom";
+        mode?: "default" | "drawer" | "drawer-from-bottom" | "fancy";
         panelClasses?: string[];
     }, "data">>;
     click(): void;

package/types/lucca-front-ng-empty-state.d.ts

@@ -1,6 +1,13 @@
 import * as _angular_core from '@angular/core';
 import { PortalContent, Palette } from '@lucca-front/ng/core';
 
+declare class EmptyStatePageIllustration {
+    readonly src: _angular_core.InputSignal<string>;
+    readonly alt: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyStatePageIllustration, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyStatePageIllustration, "lu-empty-state-page-illustration", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 type Hx = 1 | 2 | 3 | 4 | 5 | 6;
 
 declare class EmptyStatePageComponent {
@@ -32,11 +39,16 @@ declare class EmptyStatePageComponent {
      * Add content above heading
      */
     readonly slotTop: _angular_core.InputSignal<PortalContent>;
+    /**
+     * Add illustration beside content
+     */
+    readonly illustration: _angular_core.InputSignal<PortalContent>;
     readonly heading: _angular_core.InputSignal<string>;
     readonly description: _angular_core.InputSignal<PortalContent>;
     readonly hx: _angular_core.InputSignalWithTransform<Hx, Hx | "1" | "2" | "3" | "4" | "5" | "6">;
+    isStringPortalContent(message: PortalContent): message is string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyStatePageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyStatePageComponent, "lu-empty-state-page", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "topRightBackground": { "alias": "topRightBackground"; "required": false; "isSignal": true; }; "topRightForeground": { "alias": "topRightForeground"; "required": false; "isSignal": true; }; "bottomLeftBackground": { "alias": "bottomLeftBackground"; "required": false; "isSignal": true; }; "bottomLeftForeground": { "alias": "bottomLeftForeground"; "required": false; "isSignal": true; }; "contentBackgroundColor": { "alias": "contentBackgroundColor"; "required": false; "isSignal": true; }; "slotTop": { "alias": "slotTop"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "hx": { "alias": "hx"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyStatePageComponent, "lu-empty-state-page", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "topRightBackground": { "alias": "topRightBackground"; "required": false; "isSignal": true; }; "topRightForeground": { "alias": "topRightForeground"; "required": false; "isSignal": true; }; "bottomLeftBackground": { "alias": "bottomLeftBackground"; "required": false; "isSignal": true; }; "bottomLeftForeground": { "alias": "bottomLeftForeground"; "required": false; "isSignal": true; }; "contentBackgroundColor": { "alias": "contentBackgroundColor"; "required": false; "isSignal": true; }; "slotTop": { "alias": "slotTop"; "required": false; "isSignal": true; }; "illustration": { "alias": "illustration"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "hx": { "alias": "hx"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class EmptyStateSectionComponent {
@@ -67,8 +79,9 @@ declare class EmptyStateSectionComponent {
     readonly emptyStateClasses: _angular_core.Signal<{
         [x: string]: boolean;
     }>;
+    isStringPortalContent(message: PortalContent): message is string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyStateSectionComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyStateSectionComponent, "lu-empty-state-section", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "illustration": { "alias": "illustration"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "center": { "alias": "center"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "hx": { "alias": "hx"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { EmptyStatePageComponent, EmptyStateSectionComponent };
+export { EmptyStatePageComponent, EmptyStatePageIllustration, EmptyStateSectionComponent };

package/types/lucca-front-ng-file-upload.d.ts

@@ -77,8 +77,8 @@ declare class FileDropzoneComponent extends BaseFileUploadComponent {
 
 interface FileEntry {
     name: string;
-    size: number;
-    type: string;
+    size?: number;
+    type?: string;
     preview?: string;
 }
 

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

@@ -9,8 +9,9 @@ declare class ListingItemComponent {
      * Adds an icon to the listing item
      */
     readonly icon: _angular_core.InputSignal<LuccaIcon>;
+    readonly critical: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListingItemComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListingItemComponent, "lu-listing-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListingItemComponent, "lu-listing-item", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "critical": { "alias": "critical"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class ListingComponent {
@@ -18,6 +19,10 @@ declare class ListingComponent {
      * Create HTMLOListElement
      */
     readonly ordered: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Create HTMLOListElement with fancy numbers
+     */
+    readonly orderedFancy: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /**
      * Applies checklist mod to the listing
      */
@@ -55,7 +60,7 @@ declare class ListingComponent {
         [x: string]: boolean;
     }>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ListingComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListingComponent, "lu-listing", never, { "ordered": { "alias": "ordered"; "required": false; "isSignal": true; }; "checklist": { "alias": "checklist"; "required": false; "isSignal": true; }; "icons": { "alias": "icons"; "required": false; "isSignal": true; }; "defaultIcon": { "alias": "defaultIcon"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "start": { "alias": "start"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "divider": { "alias": "divider"; "required": false; "isSignal": true; }; "reversed": { "alias": "reversed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ListingComponent, "lu-listing", never, { "ordered": { "alias": "ordered"; "required": false; "isSignal": true; }; "orderedFancy": { "alias": "orderedFancy"; "required": false; "isSignal": true; }; "checklist": { "alias": "checklist"; "required": false; "isSignal": true; }; "icons": { "alias": "icons"; "required": false; "isSignal": true; }; "defaultIcon": { "alias": "defaultIcon"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "start": { "alias": "start"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; "divider": { "alias": "divider"; "required": false; "isSignal": true; }; "reversed": { "alias": "reversed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 export { ListingComponent, ListingItemComponent };