@lucca-front/ng 21.3.0-rc.4 → 21.3.0-rc.6

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const path = require("path");
+const lib_1 = require("../lib");
+const collectionPath = path.normalize(path.join(__dirname, '..', 'collection.json'));
+const testsRoot = path.join(__dirname, 'tests');
+describe('lu-grid Migration', () => {
+    it('should handle basic case files', async () => {
+        // Arrange
+        const tree = (0, lib_1.createTreeFromFolder)(path.join(testsRoot, 'input'));
+        const expectedTree = (0, lib_1.createTreeFromFolder)(path.join(testsRoot, 'output'));
+        // Act
+        try {
+            await (0, lib_1.runSchematic)('collection', collectionPath, 'lu-grid', { skipInstallation: true }, tree);
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+        // Assert
+        (0, lib_1.expectTree)(tree).toMatchTree(expectedTree);
+    });
+});

package/schematics/lu-grid/schema.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "LuccaFrontLuGrid",
+  "title": "Migrate HTML Grid to the new lu-grid 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/src/definitions/option/_option-item.scss

@@ -76,39 +76,19 @@
 					border-end-end-radius: var(--pr-t-border-radius-default);
 				}
 
-				&:hover {
+				:host-context(.optionItem.is-highlighted) & {
 					background-color: var(--palettes-100, var(--palettes-product-100));
 				}
 
 				&:active {
 					background-color: var(--palettes-200, var(--palettes-product-200));
 				}
-
-				:host-context(.is-highlighted) & {
-					background-color: var(--palettes-100, var(--palettes-product-100));
-
-					&:hover {
-						background-color: var(--palettes-200, var(--palettes-product-200));
-					}
-				}
 			}
 
-			&:hover {
+			:host-context(.optionItem.is-highlighted) & {
 				background-color: var(--palettes-neutral-50);
 			}
 
-			:host-context(.is-highlighted) & {
-				background-color: var(--palettes-neutral-50);
-
-				&:hover {
-					background-color: var(--palettes-neutral-50);
-				}
-
-				&:active {
-					background-color: var(--palettes-neutral-100);
-				}
-			}
-
 			&:active {
 				background-color: var(--palettes-neutral-100);
 			}
@@ -132,7 +112,7 @@
 
 			@layer mods {
 				&:hover,
-				:host-context(.is-highlighted) & {
+				:host-context(.optionItem.is-highlighted) & {
 					background-color: inherit;
 				}
 			}
@@ -206,7 +186,7 @@
 					--components-options-checkbox-border-color: var(--palettes-neutral-500); // disabled token candidate
 				}
 
-				&:not(.is-disabled):hover {
+				:host-context(.optionItem.is-highlighted) &:not(.is-disabled) {
 					&::before {
 						box-shadow: inset 0 0 0 2px var(--components-options-checkbox-color);
 					}

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

@@ -129,11 +129,13 @@ declare class CoreSelectPanelElement<T> implements Highlightable, OnDestroy {
     ngOnDestroy(): void;
     setActiveStyles(): void;
     setInactiveStyles(): void;
+    onMouseEnter(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoreSelectPanelElement<any>, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CoreSelectPanelElement<any>, "[luCoreSelectPanelElement]", ["luCoreSelectPanelElement"], { "elementId": { "alias": "elementId"; "required": false; "isSignal": true; }; "isSelected": { "alias": "isSelected"; "required": false; "isSignal": true; }; "option": { "alias": "option"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "isSelected": "isSelectedChange"; "selected": "selected"; }, never, never, true, never>;
 }
 
 declare class LuOptionComponent<T> implements AfterViewInit, OnDestroy, OnInit {
+    #private;
     protected selectableItem: CoreSelectPanelElement<any>;
     readonly intl: _angular_core.InputSignalWithTransform<OptionTranslate, Partial<OptionTranslate>>;
     hasOptionItemClass: boolean;
@@ -185,6 +187,7 @@ declare class CoreSelectKeyManager<T> {
     get activeItem(): CoreSelectPanelElement<T> | undefined;
     get activeItemIndex(): number;
     setActiveItem(index: number): void;
+    setActiveItemByElement(item: CoreSelectPanelElement<T>): void;
     highlightOption(option: T): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CoreSelectKeyManager<any>, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<CoreSelectKeyManager<any>>;
@@ -216,6 +219,7 @@ declare abstract class LuSelectPanelRef<TOption, TValue> {
 
 interface CoreSelectPanelInstance<T = unknown> {
     options: WritableSignal<CoreSelectPanelElement<T>[]>;
+    pointerNavigation: Signal<boolean>;
 }
 declare const SELECT_PANEL_INSTANCE: InjectionToken<CoreSelectPanelInstance<unknown>>;
 
@@ -273,6 +277,7 @@ declare abstract class ALuSelectInputComponent<TOption, TValue> implements OnDes
     protected abstract hasValue(): boolean;
     get isPanelOpen(): boolean;
     isPanelOpen$: BehaviorSubject<boolean>;
+    panelOpenSignal: Signal<boolean>;
     activeDescendant$: BehaviorSubject<string>;
     get ariaControls(): string;
     overlayConfig?: OverlayConfig;

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

@@ -7,8 +7,8 @@ import { FormFieldComponent } from '@lucca-front/ng/form-field';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { NumberFormatStyle, NumberFormatCurrencyDisplay, NumberFormatUnit, NumberFormatUnitDisplay } from '@lucca-front/ng/number-format';
 import { LuccaIcon } from '@lucca-front/icons';
-import * as _lucca_front_ng_forms from '@lucca-front/ng/forms';
 import { PortalContent, LuTranslation } from '@lucca-front/ng/core';
+import * as _lucca_front_ng_forms from '@lucca-front/ng/forms';
 
 declare class FormFieldIdDirective implements OnDestroy {
     #private;
@@ -83,41 +83,62 @@ declare class MultilanguageInputComponent implements ControlValueAccessor {
         clear: string;
         toggleMultilanguage: string;
         translateTo: string;
+        translateWithAI: string;
+        invariantInfo: string;
+        requiredError: string;
     } | {
         clear: string;
         toggleMultilanguage: string;
         translateTo: string;
+        translateWithAI: string;
+        invariantInfo: string;
+        requiredError: string;
     }, Partial<{
         clear: string;
         toggleMultilanguage: string;
         translateTo: string;
+        translateWithAI: string;
+        invariantInfo: string;
+        requiredError: string;
     } | {
         clear: string;
         toggleMultilanguage: string;
         translateTo: string;
+        translateWithAI: string;
+        invariantInfo: string;
+        requiredError: string;
     }>>;
+    protected formFieldRef: FormFieldComponent;
     formFieldSize: _angular_core.InputSignal<"XS" | "S" | "M">;
     protected onTouched: () => void;
     protected onChange: (_value: MultilanguageTranslation[]) => void;
     placeholder: _angular_core.InputSignal<string>;
     openOnFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
     autocomplete: _angular_core.InputSignal<AutoFill>;
+    hasNoInvariant: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    displayLocale: _angular_core.InputSignal<string>;
+    translateWithAI: _angular_core.OutputEmitterRef<string>;
+    shouldOpenOnFocus: _angular_core.Signal<boolean>;
     disabledInternal: WritableSignal<boolean>;
     model: WritableSignal<MultilanguageTranslation[]>;
-    invariant: _angular_core.Signal<MultilanguageTranslation | {
+    displayRow: _angular_core.Signal<MultilanguageTranslation | {
         value: string;
+        required: boolean;
+        cultureCode: string;
     }>;
     panelInputs: _angular_core.Signal<MultilanguageTranslation[]>;
     presentationValue: _angular_core.Signal<string>;
     popoverPositions: ConnectionPositionPair[];
+    constructor();
     getLocaleDisplayName(locale: string): string;
+    protected getPopoverInlineSizeRem(inputElement: HTMLInputElement): number;
     writeValue(value: MultilanguageTranslation[]): void;
     registerOnChange(fn: (value: MultilanguageTranslation[]) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState?(isDisabled: boolean): void;
     valueChange(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultilanguageInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultilanguageInputComponent, "lu-multilanguage-input", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultilanguageInputComponent, "lu-multilanguage-input", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "hasNoInvariant": { "alias": "hasNoInvariant"; "required": false; "isSignal": true; }; "displayLocale": { "alias": "displayLocale"; "required": false; "isSignal": true; }; }, { "translateWithAI": "translateWithAI"; }, never, never, true, never>;
 }
 
 declare function areAllLanguagesFilled(model: MultilanguageTranslation[]): boolean;
@@ -133,7 +154,7 @@ type TextfieldIconAddon = {
     ariaLabel: string;
 };
 type TextfieldTextAddon = {
-    content: string;
+    content: PortalContent;
     ariaLabel: string;
 };
 type TextInputAddon = TextfieldIconAddon | TextfieldTextAddon;
@@ -328,10 +349,11 @@ declare class FieldsetComponent {
     readonly size: _angular_core.InputSignal<"S">;
     readonly horizontal: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly expandable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hiddenLegend: _angular_core.InputSignalWithTransform<boolean, unknown>;
     expanded: _angular_core.ModelSignal<boolean>;
     id: string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldsetComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldsetComponent, "lu-fieldset", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldsetComponent, "lu-fieldset", never, { "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "horizontal": { "alias": "horizontal"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "hiddenLegend": { "alias": "hiddenLegend"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -353,6 +375,7 @@ interface LuColorLabel {
 
 declare class ColorInputComponent {
     intl: _angular_core.InputSignalWithTransform<LuColorLabel, Partial<LuColorLabel>>;
+    pointerNavigation: _angular_core.WritableSignal<boolean>;
     mouseHighlighted: _angular_core.WritableSignal<string>;
     keyboardHighlighted: _angular_core.WritableSignal<string>;
     highlighted: Signal<string>;
@@ -366,6 +389,8 @@ declare class ColorInputComponent {
     currentColorPresentation: Signal<ColorOption | null>;
     constructor();
     filteredColors: Signal<ColorOption[]>;
+    onKeydown(): void;
+    onMousemove(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ColorInputComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ColorInputComponent, "lu-color-input", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": true; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof NoopValueAccessorDirective; inputs: {}; outputs: {}; }]>;
 }

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

@@ -17,6 +17,8 @@ declare class PopoverDirective implements OnDestroy {
     intl: _angular_core.InputSignalWithTransform<LuCalloutLabel, Partial<LuCalloutLabel>>;
     content: TemplateRef<unknown> | Type<unknown>;
     luPopoverPosition: InputSignal<PopoverPosition>;
+    luPopoverMaxBlockSize: InputSignal<string>;
+    luPopoverMaxInlineSize: InputSignal<string>;
     overlayScrollStrategy: 'reposition' | 'block' | 'close';
     luPopoverDisabled: boolean;
     luPopoverTrigger: _angular_core.ModelSignal<"click" | "click+hover" | "hover+focus">;
@@ -53,7 +55,7 @@ declare class PopoverDirective implements OnDestroy {
     focusOutBefore(): void;
     updatePosition(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PopoverDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverDirective, "[luPopover2]", ["luPopover2"], { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "content": { "alias": "luPopover2"; "required": false; }; "luPopoverPosition": { "alias": "luPopoverPosition"; "required": false; "isSignal": true; }; "overlayScrollStrategy": { "alias": "overlayScrollStrategy"; "required": false; }; "luPopoverDisabled": { "alias": "luPopoverDisabled"; "required": false; }; "luPopoverTrigger": { "alias": "luPopoverTrigger"; "required": false; "isSignal": true; }; "customPositions": { "alias": "customPositions"; "required": false; }; "luPopoverNoCloseButton": { "alias": "luPopoverNoCloseButton"; "required": false; }; "luPopoverAnchor": { "alias": "luPopoverAnchor"; "required": false; "isSignal": true; }; "luPopoverOpenDelay": { "alias": "luPopoverOpenDelay"; "required": false; "isSignal": true; }; "luPopoverCloseDelay": { "alias": "luPopoverCloseDelay"; "required": false; "isSignal": true; }; }, { "luPopoverTrigger": "luPopoverTriggerChange"; "luPopoverClosed": "luPopoverClosed"; "luPopoverOpened": "luPopoverOpened"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<PopoverDirective, "[luPopover2]", ["luPopover2"], { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "content": { "alias": "luPopover2"; "required": false; }; "luPopoverPosition": { "alias": "luPopoverPosition"; "required": false; "isSignal": true; }; "luPopoverMaxBlockSize": { "alias": "luPopoverMaxBlockSize"; "required": false; "isSignal": true; }; "luPopoverMaxInlineSize": { "alias": "luPopoverMaxInlineSize"; "required": false; "isSignal": true; }; "overlayScrollStrategy": { "alias": "overlayScrollStrategy"; "required": false; }; "luPopoverDisabled": { "alias": "luPopoverDisabled"; "required": false; }; "luPopoverTrigger": { "alias": "luPopoverTrigger"; "required": false; "isSignal": true; }; "customPositions": { "alias": "customPositions"; "required": false; }; "luPopoverNoCloseButton": { "alias": "luPopoverNoCloseButton"; "required": false; }; "luPopoverAnchor": { "alias": "luPopoverAnchor"; "required": false; "isSignal": true; }; "luPopoverOpenDelay": { "alias": "luPopoverOpenDelay"; "required": false; "isSignal": true; }; "luPopoverCloseDelay": { "alias": "luPopoverCloseDelay"; "required": false; "isSignal": true; }; }, { "luPopoverTrigger": "luPopoverTriggerChange"; "luPopoverClosed": "luPopoverClosed"; "luPopoverOpened": "luPopoverOpened"; }, never, never, true, never>;
     static ngAcceptInputType_luPopoverDisabled: unknown;
     static ngAcceptInputType_luPopoverNoCloseButton: unknown;
 }
@@ -93,6 +95,8 @@ interface PopoverConfig {
     content: TemplateRef<unknown> | Type<unknown>;
     ref: OverlayRef;
     contentId: string;
+    maxBlockSize: string | null;
+    maxInlineSize: string | null;
     disableCloseButtonFocus: boolean;
     disableInitialTriggerFocus: boolean;
     noCloseButton: boolean;

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

@@ -58,6 +58,9 @@ declare class LuSelectPanelComponent<T> implements AfterViewInit, CoreSelectPane
     initialValue: T | undefined;
     optionTpl: _angular_core.ModelSignal<_angular_core.Type<unknown> | _angular_core.TemplateRef<_lucca_front_ng_core_select.LuOptionContext<T>>>;
     options: _angular_core.WritableSignal<_CoreSelectPanelElement<T>[]>;
+    pointerNavigation: _angular_core.WritableSignal<boolean>;
+    onKeydown(): void;
+    onMousemove(): void;
     keyManager: CoreSelectKeyManager<T>;
     selected: _angular_core.Signal<T>;
     hasGrouping$: rxjs.Observable<boolean>;

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

@@ -216,6 +216,7 @@ interface TimeRangePickerRange {
 
 declare class TimeRangePickerComponent implements ControlValueAccessor, OnInit, Validator {
     #private;
+    readonly inputFocused: _angular_core.WritableSignal<boolean>;
     readonly value: _angular_core.WritableSignal<TimeRangePickerRange>;
     readonly intl: _angular_core.InputSignalWithTransform<_lucca_front_ng_time.TimeRangePickerTranslations, Partial<_lucca_front_ng_time.TimeRangePickerTranslations>>;
     readonly displayArrows: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -240,7 +241,8 @@ declare class TimeRangePickerComponent implements ControlValueAccessor, OnInit,
     setDisabledState(isDisabled: boolean): void;
     onStartChange(start: ISO8601Time): void;
     onEndChange(end: ISO8601Time): void;
-    onTouched(): void;
+    onFocusIn(): void;
+    onFocusOut(): void;
     partToFocus(): 'meridiem' | 'minutes';
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TimeRangePickerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TimeRangePickerComponent, "lu-time-range-picker", never, { "intl": { "alias": "intl"; "required": false; "isSignal": true; }; "displayArrows": { "alias": "displayArrows"; "required": false; "isSignal": true; }; "forceMeridiemDisplay": { "alias": "forceMeridiemDisplay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;

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

@@ -49,6 +49,7 @@ declare class LuTitleService {
 declare const ɵAPP_TITLE: InjectionToken<string | Observable<string>>;
 type LuTitleNamingStrategy = 'product' | 'other';
 declare const ɵNAMING_STRATEGY: InjectionToken<LuTitleNamingStrategy>;
+declare const ɵREAD_TITLE_BY_LIVE_ANNOUNCER: InjectionToken<boolean>;
 /**
  * @deprecated Use `provideLuTitleStrategy` instead.
  */
@@ -59,6 +60,8 @@ declare class LuTitleStrategy extends TitleStrategy {
     private translateService;
     private appTitle;
     private namingStrategy;
+    private readTitleByLiveAnnouncer;
+    private liveAnnouncer;
     private luccaTitle$;
     private titlePartsSubject;
     titleParts$: Observable<(string | ObservableInput<string>)[]>;
@@ -74,8 +77,9 @@ interface LuTitleStrategyOptions {
     appTitle?: () => string | Observable<string>;
     translateService?: () => ILuTitleTranslateService;
     namingStrategy?: LuTitleNamingStrategy;
+    readTitleByLiveAnnouncer?: boolean;
 }
 declare function provideLuTitleStrategy(options: LuTitleStrategyOptions): Provider[];
 
-export { APP_TITLE, LU_TITLE_TRANSLATE_SERVICE, LuTitleModule, LuTitleService, LuTitleStrategy, TitleSeparator, provideLuTitleStrategy, ɵAPP_TITLE, ɵNAMING_STRATEGY };
+export { APP_TITLE, LU_TITLE_TRANSLATE_SERVICE, LuTitleModule, LuTitleService, LuTitleStrategy, TitleSeparator, provideLuTitleStrategy, ɵAPP_TITLE, ɵNAMING_STRATEGY, ɵREAD_TITLE_BY_LIVE_ANNOUNCER };
 export type { ILuTitleTranslateService, LuTitleNamingStrategy, LuTitleStrategyOptions, PageTitle };