@yuuvis/client-framework 2.10.3 → 2.11.1

package/lib/{services/snack-bar/snack-bar.interface.d.ts → models/snack-bar/snack-bar-options.model.d.ts}

@@ -1,10 +1,5 @@
 import { MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from "@angular/material/snack-bar";
-export type SnackBarLevel = 'info' | 'success' | 'warning' | 'danger';
-export interface SnackBarData {
-    level: SnackBarLevel;
-    message: string;
-    action?: string;
-}
+import { SnackBarLevel } from "./snack-bar-level.model";
 export interface SnackBarOptions {
     duration?: number;
     horizontalPosition?: MatSnackBarHorizontalPosition;

package/lib/providers/index.d.ts

@@ -1 +1,2 @@
 export * from './halo-focus';
+export * from './session';

package/lib/providers/session/index.d.ts

@@ -0,0 +1 @@
+export * from './provide-session.provider';

package/lib/providers/session/provide-session.provider.d.ts

@@ -0,0 +1,43 @@
+import { EnvironmentProviders } from '@angular/core';
+/**
+ * Provides and initializes the SessionService at application startup.
+ *
+ * What it does
+ * - Registers SessionService as a singleton to manage session expiry across the app
+ * - Runs `session.init()` via APP_INITIALIZER when the app boots
+ * - Initializes cross-tab BroadcastChannel sync, HTTP debounce hooks, and user-activity listeners
+ * - Automatically tracks HTTP activity and user interactions to extend sessions
+ *
+ * Usage scenarios
+ *
+ * Scenario 1: Known session duration at startup
+ * When the session duration is predetermined and constant, provide it here.
+ * ```ts
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSession(30 * 60 * 1000), // 30 minutes
+ *   ]
+ * };
+ * ```
+ *
+ * Scenario 2: Dynamic session duration from backend
+ * When the session duration is determined after login (e.g., from backend response),
+ * omit the parameter here and call `startSession()` after receiving the duration.
+ * ```ts
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSession(), // Defaults to 30 minutes until startSession() is called
+ *   ]
+ * };
+ *
+ * // After login in AuthService:
+ * login().subscribe(response => {
+ *   sessionService.startSession(response.sessionExpiresIn); // Set actual duration
+ * });
+ * ```
+ *
+ * @param sessionDuration Optional session duration in milliseconds. If omitted, defaults to 30 minutes (1800000ms).
+ */
+export declare function provideSession(sessionDuration?: number): EnvironmentProviders;

package/lib/services/index.d.ts

@@ -1,4 +1,4 @@
 export * from './halo-focus/halo-focus.service';
-export * from './snack-bar/snack-bar.interface';
-export * from './snack-bar/snack-bar.service';
 export * from './halo-utility/halo-utility.service';
+export * from './session/session.service';
+export * from './snack-bar/snack-bar.service';

package/lib/services/session/session.service.d.ts

@@ -0,0 +1,113 @@
+import * as i0 from "@angular/core";
+/**
+ * Manages client-side session expiry: persists expiration, tracks user and HTTP activity,
+ * shows a pre-expiry popup with an extend CTA, and syncs state across tabs via BroadcastChannel.
+ *
+ * Key behaviors
+ * - Persists `expiresAt` in AppCacheService so multiple tabs share the same deadline
+ * - Automatically listens to BackendService HTTP activity (debounced) to extend sessions
+ * - Extends backend session by calling `/api-web/api/idm/whoami` endpoint (skipped when triggered by HTTP activity)
+ * - User activity (mouse, keyboard, scroll) inside a defined window will auto-extend the session
+ * - Displays a snack popup shortly before expiry; user can extend from the popup
+ * - Broadcasts `SessionExtended` / `SessionLogout` to keep tabs in sync
+ *
+ * Setup options
+ *
+ * Option 1: Known session duration at startup
+ * Use when the session duration is known in advance and remains constant.
+ * ```ts
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSession(30 * 60 * 1000), // 30 minutes - set at app startup
+ *   ]
+ * };
+ * ```
+ *
+ * Option 2: Dynamic session duration from backend
+ * Use when the session duration is determined after login (e.g., from backend response).
+ * ```ts
+ * // app.config.ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideSession(), // Initialize without duration (defaults to 30 minutes)
+ *   ]
+ * };
+ *
+ * // After login in AuthService:
+ * login().subscribe(response => {
+ *   const sessionDuration = response.sessionExpiresIn; // from backend
+ *   sessionService.startSession(sessionDuration);
+ * });
+ * ```
+ * Note: If no duration is provided to provideSession(), a default of 30 minutes is used until startSession() is called.
+ *
+ * Lifecycle notes
+ * - HTTP activity is automatically tracked via BackendService.httpCommunicationOccurred$
+ * - Backend session is extended via whoami endpoint, except when triggered by HTTP activity or cross-tab sync
+ * - Internal flag prevents recursive whoami calls when the endpoint itself triggers httpCommunicationOccurred$
+ * - Warning and logout timers are reset on every extend
+ * - All timers and the popup are cleared on logout
+ * - Broadcast messages are listened for and mirrored across tabs
+ * - For UI activity, this service listens to DOM events (mousemove, keydown, click, scroll)
+ */
+export declare class SessionService {
+    #private;
+    private translate;
+    /**
+     * Initializes cross-tab listeners and activity hooks.
+     *
+     * IMPORTANT: This is automatically called by `provideSession()` via APP_INITIALIZER.
+     * You should NOT call this manually - just add `provideSession()` to your app providers.
+     *
+     * What it does:
+     * - Initializes session with provided or default duration value
+     * - Wires BroadcastChannel subscriptions for cross-tab sync
+     * - Subscribes to BackendService.httpCommunicationOccurred$ for automatic HTTP activity tracking
+     * - Attaches DOM event listeners (mousemove, keydown, click, scroll) for the activity window
+     */
+    init(sessionDuration?: number): void;
+    /**
+     * Sets the session duration and starts the session lifecycle.
+     *
+     * Use this method when you need to set or update the session duration dynamically,
+     * typically after receiving authentication/session information from the backend.
+     *
+     * This is the correct approach when:
+     * - Session duration is not known at application startup
+     * - Duration comes from a backend API response after login
+     * - You need to manually override the duration set via provideSession()
+     *
+     * Example:
+     * ```ts
+     * // After login in AuthService
+     * login().subscribe(response => {
+     *   this.sessionService.startSession(response.sessionExpiresIn);
+     * });
+     * ```
+     *
+     * @param duration Total session length in milliseconds
+     */
+    startSession(duration: number): void;
+    /**
+     * Extends the session expiry, resets all timers, and optionally broadcasts to other tabs.
+     *
+     * @param broadcast When true (default), posts a BroadcastChannel message so other tabs sync
+     * @param expiresAt Optional custom expiry timestamp; if not provided, calculates based on session duration
+     * @param skipBackendCall When true, skips the whoami backend call (used when already triggered by HTTP activity)
+     */
+    extendSession(broadcast?: boolean, expiresAt?: number, skipBackendCall?: boolean): void;
+    private listenToChannel;
+    private scheduleActivityWindow;
+    private showPopup;
+    private scheduleLogout;
+    private performLogout;
+    private setupHttpDebounce;
+    private setupUserActivityTracking;
+    private resetAllTimers;
+    private getExpiresAt;
+    private setExpiresAt;
+    private clearTimers;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SessionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SessionService>;
+}

package/lib/services/snack-bar/snack-bar.service.d.ts

@@ -1,12 +1,12 @@
 import { MatSnackBarRef } from '@angular/material/snack-bar';
-import { SnackBarLevel, SnackBarOptions } from './snack-bar.interface';
+import { SnackBarLevel, SnackBarOptions } from '../../models';
 import * as i0 from "@angular/core";
 export declare class SnackBarService {
     #private;
-    info(message: string, action?: string): MatSnackBarRef<SnackBarComponent>;
-    success(message: string, action?: string): MatSnackBarRef<SnackBarComponent>;
-    warning(message: string, action?: string): MatSnackBarRef<SnackBarComponent>;
-    danger(message: string, action?: string): MatSnackBarRef<SnackBarComponent>;
+    info(message: string, action?: string, duration?: number): MatSnackBarRef<SnackBarComponent>;
+    success(message: string, action?: string, duration?: number): MatSnackBarRef<SnackBarComponent>;
+    warning(message: string, action?: string, duration?: number): MatSnackBarRef<SnackBarComponent>;
+    danger(message: string, action?: string, duration?: number): MatSnackBarRef<SnackBarComponent>;
     snack(message: string, options: SnackBarOptions): MatSnackBarRef<SnackBarComponent>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SnackBarService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<SnackBarService>;

package/object-relationship/index.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/object-relationship.module';
 export * from './lib/object-relationship.component';
+export * from './lib/object-relationship.const';
 export * from './lib/object-relationship.interface';
 export * from './lib/actions/add-relationship/add-relationship.component';

package/object-relationship/lib/actions/add-relationship/add-relationship.component.d.ts

@@ -5,13 +5,22 @@ import * as i0 from "@angular/core";
 export declare class AddRelationshipComponent {
     #private;
     readonly translate: TranslateService;
+    targetTypeLabels: Record<string, string>;
+    targetTypeFilterControl: FormControl<string[] | null>;
+    targetTypeFilterValue: import("@angular/core").Signal<string[] | null>;
     object: import("@angular/core").InputSignal<DmsObject>;
     config: import("@angular/core").InputSignal<RelationshipComponentConfig>;
     supportedRelationships: import("@angular/core").Signal<Relationship[]>;
+    filteredRelationships: import("@angular/core").Signal<Relationship[]>;
     availableTargetTypes: import("@angular/core").Signal<string[]>;
+    labeledTargetTypes: import("@angular/core").Signal<{
+        id: string;
+        label: string;
+    }[]>;
     sourceNode: import("@angular/core").Signal<{
         title: string;
         description: string | undefined;
+        icon: string | undefined;
     }>;
     form: FormGroup<{
         relation: FormControl<Relationship | null>;
@@ -20,6 +29,7 @@ export declare class AddRelationshipComponent {
     busy: import("@angular/core").WritableSignal<boolean>;
     error: import("@angular/core").WritableSignal<string | null>;
     optionCompareWith(o1: Relationship | undefined, o2: Relationship | undefined): boolean;
+    onRelationSelect(idx: number[]): void;
     submit(): void;
     close(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AddRelationshipComponent, never>;

package/object-relationship/lib/actions/relationship-target-search/relationship-target-search.component.d.ts

@@ -3,21 +3,34 @@ import { Relationship } from '@yuuvis/client-core';
 import { AutocompleteItem } from '@yuuvis/client-framework/autocomplete';
 import { RelationshipComponentConfig } from '../../object-relationship.interface';
 import * as i0 from "@angular/core";
+interface AutocompleteItemValue {
+    description?: string;
+    data: Record<string, unknown>;
+}
 export declare class RelationshipTargetSearchComponent implements ControlValueAccessor {
     #private;
     supportedRelationships: import("@angular/core").InputSignal<Relationship[]>;
-    availableTargetTypes: import("@angular/core").InputSignal<string[]>;
+    sourceNode: import("@angular/core").InputSignal<string>;
+    targetTypes: import("@angular/core").InputSignal<string[]>;
     config: import("@angular/core").InputSignal<RelationshipComponentConfig>;
-    autocompleteRes: AutocompleteItem[];
+    autocompleteRes: AutocompleteItem<AutocompleteItemValue>[];
+    innerValue: import("@angular/core").WritableSignal<AutocompleteItem<AutocompleteItemValue> | undefined>;
+    mappedValue: import("@angular/core").Signal<{
+        title: string;
+        description?: string;
+        icon?: string;
+    } | undefined>;
     busy: import("@angular/core").WritableSignal<boolean>;
-    acFormControl: FormControl<AutocompleteItem[] | null>;
+    acFormControl: FormControl<AutocompleteItem<AutocompleteItemValue> | null>;
     constructor();
     autocompleteFn(term: string): void;
+    reset(): void;
     propagateChange: (_: any) => void;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RelationshipTargetSearchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<RelationshipTargetSearchComponent, "yuv-relationship-target-search", never, { "supportedRelationships": { "alias": "supportedRelationships"; "required": true; "isSignal": true; }; "availableTargetTypes": { "alias": "availableTargetTypes"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RelationshipTargetSearchComponent, "yuv-relationship-target-search", never, { "supportedRelationships": { "alias": "supportedRelationships"; "required": true; "isSignal": true; }; "sourceNode": { "alias": "sourceNode"; "required": true; "isSignal": true; }; "targetTypes": { "alias": "targetTypes"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+export {};

package/object-relationship/lib/object-relationship.const.d.ts

@@ -6,6 +6,5 @@ export declare const NODE_FONT_SETTINGS: Font;
 export declare const EDGE_SETTINGS: Partial<Edge>;
 export declare const EDGE_FONT_SETTINGS: Font;
 export declare const ADD_RELATIONSHIP_DIALOG_OPTIONS: {
-    width: string;
     maxWidth: string;
 };

package/object-versions/lib/object-versions.component.d.ts

@@ -23,6 +23,7 @@ export declare class ObjectVersionsComponent {
     versions: import("@angular/core").WritableSignal<DmsObject[]>;
     selectedVersion: import("@angular/core").WritableSignal<DmsObject | undefined>;
     error: import("@angular/core").WritableSignal<string | undefined>;
+    selectedIndex: import("@angular/core").WritableSignal<number | null>;
     isCurrentVersion: import("@angular/core").Signal<boolean>;
     metadata: Partial<Metadata>;
     itemSelected(selectedIndex: number[]): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuuvis/client-framework",
-  "version": "2.10.3",
+  "version": "2.11.1",
   "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
   "license": "MIT",
   "peerDependencies": {
@@ -8,15 +8,15 @@
     "@angular/common": "^19.2.1",
     "@angular/core": "^19.2.1",
     "angular-gridster2": "^19.0.0",
-    "@yuuvis/client-core": "^2.10.3",
-    "@yuuvis/client-shell-core": "^2.10.3",
+    "@yuuvis/client-core": "^2.11.1",
+    "@yuuvis/client-shell-core": "^2.11.1",
     "ng-dynamic-component": "^10.8.2",
     "modern-normalize": "^3.0.1"
   },
   "dependencies": {
     "@angular/material": "^19.2.15",
     "@ngrx/signals": "^19.2.0",
-    "@yuuvis/material": "2.10.3",
+    "@yuuvis/material": "2.11.1",
     "@yuuvis/media-viewer": "^2.0.12",
     "angular-split": "^19.0.0",
     "vis-network": "^10.0.2",
@@ -68,14 +68,14 @@
       "types": "./list/index.d.ts",
       "default": "./fesm2022/yuuvis-client-framework-list.mjs"
     },
-    "./metadata-form": {
-      "types": "./metadata-form/index.d.ts",
-      "default": "./fesm2022/yuuvis-client-framework-metadata-form.mjs"
-    },
     "./master-details": {
       "types": "./master-details/index.d.ts",
       "default": "./fesm2022/yuuvis-client-framework-master-details.mjs"
     },
+    "./metadata-form": {
+      "types": "./metadata-form/index.d.ts",
+      "default": "./fesm2022/yuuvis-client-framework-metadata-form.mjs"
+    },
     "./metadata-form-defaults": {
       "types": "./metadata-form-defaults/index.d.ts",
       "default": "./fesm2022/yuuvis-client-framework-metadata-form-defaults.mjs"

package/query-list/lib/query-list.component.d.ts

@@ -48,7 +48,7 @@ import * as i0 from "@angular/core";
  * } *
  * ```
  */
-export declare class QueryListComponent {
+export declare class QueryListComponent<T = any> {
     #private;
     list: import("@angular/core").Signal<ListComponent>;
     itemTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
@@ -66,7 +66,7 @@ export declare class QueryListComponent {
     /**
      * Optional transformer function to map SearchResultItem to a custom format.
      */
-    transformer: import("@angular/core").InputSignal<((items: SearchResultItem[]) => unknown[]) | null | undefined>;
+    transformer: import("@angular/core").InputSignal<((items: SearchResultItem[]) => T[]) | null | undefined>;
     /**
      * Function that returns `true` if selection changes should be prevented.
      * This can be used to temporarily block selection changes, e.g. while
@@ -103,7 +103,7 @@ export declare class QueryListComponent {
     /**
      * The list of result items after applying the optional transformer.
      */
-    resultItems: import("@angular/core").Signal<unknown[]>;
+    resultItems: import("@angular/core").Signal<T[]>;
     /**
      * Number of items to fetch per page when executing the query.
      * @default SearchService.DEFAULT_QUERY_SIZE
@@ -150,7 +150,7 @@ export declare class QueryListComponent {
      */
     updateListItems(updates: {
         index: number;
-        value: unknown;
+        value: T;
     }[]): void;
     /**
      * Optional array of items to be shown in addition to the query results.
@@ -168,11 +168,12 @@ export declare class QueryListComponent {
      * @param scrollTo If `true`, the list will scroll to the top after dropping
      * in the items. Default is `true`.
      */
-    dropItems(items: Record<string, unknown>[], scrollTo?: boolean): void;
+    dropItems(items: T[], scrollTo?: boolean): void;
     /**
      * Selects multiple items in the list.
      */
     multiSelect(index: number[]): void;
+    select(index: number): void;
     /**
      * Clear the current selection.
      * @param silent If `true`, the `itemSelect` event will not be emitted.
@@ -185,6 +186,6 @@ export declare class QueryListComponent {
     runTransformerAgain(): void;
     changePage(pe: PageEvent): void;
     goToPage(page: number): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<QueryListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QueryListComponent, "yuv-query-list", never, { "query": { "alias": "query"; "required": false; "isSignal": true; }; "idProperty": { "alias": "idProperty"; "required": false; "isSignal": true; }; "transformer": { "alias": "transformer"; "required": false; "isSignal": true; }; "preventChangeUntil": { "alias": "preventChangeUntil"; "required": false; "isSignal": true; }; "autoSelect": { "alias": "autoSelect"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "enableDragSelect": { "alias": "enableDragSelect"; "required": false; "isSignal": true; }; "multiselect": { "alias": "multiselect"; "required": false; "isSignal": true; }; "selfHandleSelection": { "alias": "selfHandleSelection"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; "dragSelectChange": "dragSelectChange"; "itemDoubleClick": "itemDoubleClick"; "queryResult": "queryResult"; }, ["itemTemplate", "emptyTemplate"], never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QueryListComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QueryListComponent<any>, "yuv-query-list", never, { "query": { "alias": "query"; "required": false; "isSignal": true; }; "idProperty": { "alias": "idProperty"; "required": false; "isSignal": true; }; "transformer": { "alias": "transformer"; "required": false; "isSignal": true; }; "preventChangeUntil": { "alias": "preventChangeUntil"; "required": false; "isSignal": true; }; "autoSelect": { "alias": "autoSelect"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "enableDragSelect": { "alias": "enableDragSelect"; "required": false; "isSignal": true; }; "multiselect": { "alias": "multiselect"; "required": false; "isSignal": true; }; "selfHandleSelection": { "alias": "selfHandleSelection"; "required": false; "isSignal": true; }; }, { "itemSelect": "itemSelect"; "dragSelectChange": "dragSelectChange"; "itemDoubleClick": "itemDoubleClick"; "queryResult": "queryResult"; }, ["itemTemplate", "emptyTemplate"], never, true, never>;
 }

package/tile-list/lib/tile-list/tile-list.component.d.ts

@@ -16,7 +16,7 @@ export declare class TileListComponent implements OnInit {
     menuComponent: Signal<TileActionsMenuComponent | undefined>;
     menu: Signal<import("@angular/material/menu").MatMenu | null>;
     emptyContent: Signal<ElementRef<any> | undefined>;
-    list: Signal<QueryListComponent>;
+    list: Signal<QueryListComponent<TileData>>;
     menuTriggers: Signal<readonly MatMenuTrigger[]>;
     transformer: (res: SearchResultItem[]) => {
         actions: Action[];
@@ -125,12 +125,14 @@ export declare class TileListComponent implements OnInit {
     contextMenuHandler(event: MouseEvent, index: number): void;
     executeAction(t: InnerTileData, a: Action, evt: Event): void;
     selectById(ids: string[]): void;
-    selectByIndex(idx: number, evt?: MouseEvent | KeyboardEvent): void;
+    multiSelect(index: number[]): void;
+    select(index: number): void;
     onQueryResult(e: {
         totalCount: number;
     }): void;
     onListItemsSelect(sel: number[]): void;
     refresh(): void;
+    dropItems(objects: DmsObject[]): void;
     applyFlavor(flavor: ObjectFlavor): void;
     /**
      * Updates an item in the list at the specified index with the provided value.