@yuuvis/client-framework 3.2.2 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuuvis/client-framework",
-  "version": "3.2.2",
+  "version": "3.4.0",
   "author": "OPTIMAL SYSTEMS GmbH <npm@optimal-systems.de>",
   "license": "MIT",
   "peerDependencies": {
@@ -8,16 +8,16 @@
     "@angular/common": "^21.2.9",
     "@angular/core": "^21.2.9",
     "angular-gridster2": "^21.0.1",
-    "@yuuvis/client-core": "^3.2.2",
-    "@yuuvis/client-shell-core": "^3.2.2",
-    "@yuuvis/client-components": "^3.2.2",
+    "@yuuvis/client-core": "^3.4.0",
+    "@yuuvis/client-shell-core": "^3.4.0",
+    "@yuuvis/client-components": "^3.4.0",
     "ng-dynamic-component": "^10.8.2",
     "modern-normalize": "^3.0.1"
   },
   "dependencies": {
     "@angular/material": "^21.2.7",
     "@ngrx/signals": "^21.1.0",
-    "@yuuvis/material": "^3.2.2",
+    "@yuuvis/material": "^3.4.0",
     "@yuuvis/media-viewer": "^3.0.1",
     "angular-split": "^20.0.0",
     "vis-network": "^10.0.2",

package/types/yuuvis-client-framework-forms.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_forms from '@angular/forms';
 import { ControlValueAccessor, FormControl, Validator, FormGroup, ValidationErrors, AbstractControl } from '@angular/forms';
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy, ElementRef, AfterViewInit } from '@angular/core';
+import { OnInit, OnDestroy, ElementRef, WritableSignal, AfterViewInit } from '@angular/core';
 import { AbstractMatFormField } from '@yuuvis/client-framework/common';
 import { TranslateService, Situation, ObjectFormControl, RangeValue, Operator, LocaleNumberPipe, FileSizePipe, OrganizationSetEntry, DateRange, FilesizeRange, FormattedMailTo } from '@yuuvis/client-core';
 import { MetadataFormFieldContext } from '@yuuvis/client-framework/metadata-form';
@@ -11,7 +11,6 @@ import { MatChipInputEvent, MatChipEditedEvent } from '@angular/material/chips';
 
 declare class CatalogComponent extends AbstractMatFormField<string | string[]> implements ControlValueAccessor, OnInit, OnDestroy {
     #private;
-    private readonly translate;
     readonly: _angular_core.InputSignal<boolean>;
     multiple: _angular_core.InputSignal<boolean>;
     _options: _angular_core.WritableSignal<{
@@ -24,15 +23,17 @@ declare class CatalogComponent extends AbstractMatFormField<string | string[]> i
      */
     classifications: _angular_core.InputSignal<string[]>;
     /**
-     * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation of the form element will be turned off, so you are able to enter search terms that do not meet the elements validators.
+     * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation validation
+     * of the form element will be turned off, so you are able to enter search terms that do not
+     * meet the elements validators.
      */
     situation: _angular_core.InputSignal<string | undefined>;
     ngControl: _angular_forms.NgControl | null;
-    readonly fc: FormControl<string | string[] | null | undefined>;
+    readonly formCtrl: FormControl<string | string[] | null | undefined>;
     propagateChange: (_: any) => void;
     writeValue(value: string | string[]): void;
     registerOnChange(fn: any): void;
-    registerOnTouched(fn: any): void;
+    registerOnTouched(): void;
     setDisabledState?(isDisabled: boolean): void;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -123,7 +124,7 @@ declare class DatetimeRangeComponent extends AbstractMatFormField<RangeValue<Dat
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatetimeRangeComponent, "yuv-datetime-range", never, { "withTimeInput": { "alias": "withTime"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "operator": { "alias": "operator"; "required": false; "isSignal": true; }; "situation": { "alias": "situation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class DatetimeComponent extends AbstractMatFormField<Date | null> implements ControlValueAccessor, OnInit {
+declare class DatetimeComponent extends AbstractMatFormField<Date | string | null> implements ControlValueAccessor, OnInit {
     #private;
     private translate;
     pickerCmp: _angular_core.Signal<DatepickerComponent>;
@@ -150,7 +151,7 @@ declare class DatetimeComponent extends AbstractMatFormField<Date | null> implem
     withTime: _angular_core.InputSignal<boolean>;
     openCalendar(): void;
     propagateChange: (_: any) => void;
-    writeValue(value: any): void;
+    writeValue(value: string | Date): void;
     registerOnChange(fn: () => void): void;
     registerOnTouched(): void;
     setDisabledState?(isDisabled: boolean): void;
@@ -160,15 +161,24 @@ declare class DatetimeComponent extends AbstractMatFormField<Date | null> implem
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatetimeComponent, "yuv-datetime", never, { "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "onlyFutureDates": { "alias": "onlyFutureDates"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "calendar": { "alias": "calendar"; "required": false; "isSignal": true; }; "withTime": { "alias": "withTime"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface DynamicCatalogOption {
+    value: string;
+    label: string;
+    disabled: boolean;
+    invalid?: boolean;
+}
+interface SelectedDisplay {
+    value: string;
+    label: string;
+    invalid: boolean;
+}
 declare class DynamicCatalogComponent extends AbstractMatFormField<string | string[]> implements ControlValueAccessor, OnInit, OnDestroy {
     #private;
     catalog: _angular_core.InputSignal<string>;
     readonly: _angular_core.InputSignal<boolean>;
     multiple: _angular_core.InputSignal<boolean>;
-    options: _angular_core.WritableSignal<{
-        value: string;
-        label: string;
-    }[] | undefined>;
+    options: WritableSignal<DynamicCatalogOption[]>;
+    selectedDisplay: _angular_core.Signal<SelectedDisplay[]>;
     /**
      * Possibles values are `EDIT` (default),`SEARCH`,`CREATE`. In search situation
      * validation of the form element will be turned off, so you are able to enter

package/types/yuuvis-client-framework-object-preview.d.ts

@@ -1,10 +1,8 @@
 import * as _angular_core from '@angular/core';
 import { WritableSignal } from '@angular/core';
-import * as _yuuvis_client_core from '@yuuvis/client-core';
-import { DmsObject } from '@yuuvis/client-core';
-import * as _yuuvis_media_viewer from '@yuuvis/media-viewer';
+import { DmsObject, YuvUser } from '@yuuvis/client-core';
 import { Metadata, EmailMetadata } from '@yuuvis/media-viewer';
-import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
 
 interface ViewerDetails {
     id: string;
@@ -26,17 +24,34 @@ declare class ObjectPreviewComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ObjectPreviewComponent, "yuv-object-preview", never, { "objectId": { "alias": "objectId"; "required": false; "isSignal": true; }; "dmsObjectInput": { "alias": "dmsObject"; "required": false; "isSignal": true; }; "version": { "alias": "version"; "required": false; "isSignal": true; }; "metadata": { "alias": "metadata"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+interface BaseViewerData {
+    mediaViewerSrc: string;
+    id: string;
+    mimeType: string | undefined;
+}
+type ViewerDataEmail = BaseViewerData & {
+    metadata: EmailMetadata;
+};
+type ViewerDataDefault = BaseViewerData & {
+    metadata: {
+        type: Uppercase<string> | undefined;
+        name: string;
+        dmsObject: Record<string, unknown>;
+        id: string;
+        editable: boolean;
+        user: YuvUser;
+        theme: string;
+        version: number | undefined;
+        sendEvent: boolean;
+    };
+};
+
 declare class ObjectEmailPreviewComponent {
     #private;
     objectId: _angular_core.InputSignal<string | undefined>;
     dmsObjectInput: _angular_core.InputSignal<DmsObject | undefined>;
     dmsObject: _angular_core.Signal<DmsObject | undefined>;
-    viewerDetails: _angular_core.Signal<{
-        mediaViewerSrc: string;
-        id: string;
-        mimeType: string | undefined;
-        metadata: _yuuvis_media_viewer.EmailMetadata;
-    } | undefined>;
+    viewerDetails: _angular_core.Signal<ViewerDataEmail | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ObjectEmailPreviewComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ObjectEmailPreviewComponent, "yuv-object-email-preview", never, { "objectId": { "alias": "objectId"; "required": false; "isSignal": true; }; "dmsObjectInput": { "alias": "dmsObject"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -45,36 +60,11 @@ declare class ObjectPreviewService {
     #private;
     dmsObject: _angular_core.Signal<DmsObject | undefined>;
     setDmsObject(object: DmsObject): void;
-    getDmsObject(id: string): rxjs.Observable<DmsObject>;
+    getDmsObject(id: string): Observable<DmsObject>;
     getMediaViewerSrc(id: string, mimeType: string | undefined, version?: number): string;
-    getViewerDetails(object: DmsObject, version: number | undefined): {
-        mediaViewerSrc: string;
-        id: string;
-        mimeType: string | undefined;
-        metadata: EmailMetadata;
-    } | {
-        mediaViewerSrc: string;
-        id: string;
-        mimeType: string | undefined;
-        metadata: {
-            type: Uppercase<string> | undefined;
-            name: string;
-            dmsObject: Record<string, unknown>;
-            id: string;
-            editable: boolean;
-            user: _yuuvis_client_core.YuvUser;
-            theme: string;
-            version: number | undefined;
-            sendEvent: boolean;
-        };
-    } | undefined;
-    getEmailViewerDetails(object: DmsObject, MAIL_APP_ID?: string): {
-        mediaViewerSrc: string;
-        id: string;
-        mimeType: string | undefined;
-        metadata: EmailMetadata;
-    };
+    getEmailViewerDetails(object: DmsObject, MAIL_APP_ID?: string): ViewerDataEmail;
     getEmailMetadata(object: DmsObject, MAIL_APP_ID?: string): EmailMetadata;
+    getViewerDetails(object: DmsObject, version: number | undefined): ViewerDataEmail | ViewerDataDefault | undefined;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ObjectPreviewService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ObjectPreviewService>;
 }

package/types/yuuvis-client-framework-query-list.d.ts

@@ -217,9 +217,11 @@ declare class QueryListComponent<T = any> {
      * exceeds this value, pagination controls are shown and the user can navigate between
      * pages via `changePage()` / `goToPage()`.
      *
-     * @default SearchService.DEFAULT_QUERY_SIZE
+     * Resolution order (see `effectivePageSize`): explicit `pageSize` input takes precedence,
+     * otherwise `(query as SearchQuery).size` is used if set, otherwise
+     * `SearchService.DEFAULT_QUERY_SIZE` is used.
      */
-    pageSize: _angular_core.InputSignal<number>;
+    pageSize: _angular_core.InputSignal<number | undefined>;
     /**
      * Enables mouse drag-to-select on list items.
      *
@@ -274,6 +276,21 @@ declare class QueryListComponent<T = any> {
      * (e.g. to show a visual indicator or adjust layout) without accessing internal state.
      */
     dropInSize: _angular_core.Signal<number>;
+    /**
+     * Resolved page size used by both the `mat-paginator` and every server request.
+     *
+     * Falls back through three sources, in order:
+     * 1. The explicit `pageSize` input, when the consumer has provided one.
+     * 2. `(query as SearchQuery).size`, when the query is a `SearchQuery` object that
+     *    already declares its own page size — keeps server response and paginator in
+     *    sync when the consumer only configures the query.
+     * 3. `SearchService.DEFAULT_QUERY_SIZE` as the final default.
+     *
+     * Used internally to avoid the bug where `mat-paginator` and the server pageination
+     * use different page sizes (paginator showing e.g. "1-25 of 43" while `getPage()`
+     * asks the server for skip=50 — landing on an empty page).
+     */
+    effectivePageSize: _angular_core.Signal<number>;
     /**
      * The final list of items rendered by the template.
      *
@@ -399,6 +416,33 @@ declare class QueryListComponent<T = any> {
      *                 Defaults to `true` so the newly dropped items are immediately visible.
      */
     dropItems(items: T[], scrollTo?: boolean): void;
+    /**
+     * Surgically removes specific items from the drop-in set by their stable IDs.
+     *
+     * Filters `#dropInItems` to drop any entry whose `idProperty` value is in `ids`,
+     * leaving the remaining drop-ins (and the rest of the result list) untouched.
+     * The structural shift is handled by the rendering pipeline — `resultItems`
+     * recomputes automatically, and the leading `drop-in` class follows the new
+     * (smaller) `dropInSize()`.
+     *
+     * This method intentionally does **not** mutate the inner list's selection
+     * state. The caller (typically `TileListComponent.removeDropItems`) is in a
+     * better position to decide whether to clear, shift, or preserve selection,
+     * because it tracks selection at a higher level by stable object identity.
+     *
+     * Requires `idProperty` to be set — without it items cannot be identified
+     * and the call is a no-op (returns 0).
+     *
+     * **Typical use case:** an upstream deletion (e.g. `DmsService.deleteDmsObject`)
+     * removed an object that is currently rendered as a drop-in. Without removing
+     * it from `#dropInItems`, the deleted tile would remain visible after `refresh()`
+     * because the framework treats drop-ins as authoritative and prepends them to
+     * every refreshed result set.
+     *
+     * @param ids   Array of ID values (as resolved via `idProperty`) to remove.
+     * @returns Number of items that were actually removed from the drop-in set.
+     */
+    removeDropItems(ids: string[]): number;
     /**
      * Programmatically replaces the entire selection with the given indices.
      *

package/types/yuuvis-client-framework-tile-list.d.ts

@@ -154,9 +154,11 @@ declare class TileListComponent implements OnInit {
      * this value, pagination controls appear. Reducing this number improves initial load
      * time; increasing it reduces the need for pagination.
      *
-     * @default SearchService.DEFAULT_QUERY_SIZE
+     * When omitted, the inner `QueryListComponent` falls back to `(query as SearchQuery).size`
+     * if set, otherwise to `SearchService.DEFAULT_QUERY_SIZE` — keeping the paginator and
+     * the server in sync without requiring the consumer to set this input explicitly.
      */
-    pageSize: _angular_core.InputSignal<number>;
+    pageSize: _angular_core.InputSignal<number | undefined>;
     /**
      * Enables multi-selection mode.
      *
@@ -563,6 +565,33 @@ declare class TileListComponent implements OnInit {
      * @param objects `DmsObject` instances to prepend to the visible list.
      */
     dropItems(objects: DmsObject[]): void;
+    /**
+     * Surgically removes tiles matching the given IDs from the rendered list.
+     *
+     * Use this when an upstream deletion (e.g. `DmsService.deleteDmsObject`) removes
+     * an object that is currently rendered. Without this call, drop-in tiles would
+     * remain visible after `refresh()` because `onQueryResult` reconstructs them by
+     * slicing the leading `dropInSize()` items from the `items` signal — the deleted
+     * tile would survive as a stale leader.
+     *
+     * The method is also invoked automatically by an internal `DMS_OBJECT_DELETED`
+     * subscription, so consumers that delete via `DmsService` get correct behavior
+     * without any extra wiring. Calling it directly is only needed for deletions
+     * that do not flow through the standard event service.
+     *
+     * Internally:
+     * 1. Locates positions of matching tiles in the `items` signal.
+     * 2. Removes them from `items` (the parent-visible view model).
+     * 3. Filters `_selection` to drop indices on removed tiles, then shifts the
+     *    remaining indices back by the count of removed positions that preceded
+     *    each surviving entry so selection stays attached to the same logical items.
+     * 4. Clears `_lastSelection` if it pointed to a removed tile, else shifts it.
+     * 5. Delegates to `QueryListComponent.removeDropItems` to filter the inner
+     *    drop-in set so `resultItems` recomputes with the correct leading slice.
+     *
+     * @param ids Object IDs to remove.
+     */
+    removeDropItems(ids: string[]): void;
     /**
      * Toggles an `ObjectFlavor` on or off and re-maps the current result set.
      *