@yomotech/view-toolkit 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yomotech/view-toolkit",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",
     "@angular/common": "^21.0.0",

package/types/yomotech-view-toolkit.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, ChangeDetectorRef, NgZone, SimpleChanges, OnInit, OnChanges, AfterViewInit, OnDestroy, Injector } from '@angular/core';
+import { EventEmitter, ElementRef, ChangeDetectorRef, NgZone, SimpleChanges, OnInit, OnChanges, AfterViewInit, OnDestroy, Injector, PipeTransform } from '@angular/core';
 import * as i1 from '@angular/common';
 import * as rxjs from 'rxjs';
 import { Platform } from '@angular/cdk/platform';
@@ -195,8 +195,27 @@ interface CustomKeyboardSession {
     originalInputMode: string | null;
     originalInputType: string | null;
 }
+/** Set on body while keyboard or calendar stand at the right edge instead of the bottom. */
+declare const SIDE_DOCK_CLASS = "vl-side-dock";
+/**
+ * Side or bottom, decided from the space at hand rather than a device or an orientation: docked at
+ * the bottom, a panel (keyboard or calendar, up to about half the height) must leave about two of
+ * the dialog's fields visible below its header. If it would not and the dialog still has room
+ * beside a panel, the panels dock at the right edge - and the dialog stands left of them for as
+ * long as it is open, so it never moves. Returns the width kept free at the right (panel plus its
+ * distance to the screen edge), or null for the bottom. Also used by the app to place the dialog.
+ */
+declare function sideDockWidth(): number | null;
 declare class CustomKeyboardService {
     private openingSuspendedUntil;
+    private tapsTracked;
+    private lastPointerDownAt;
+    private lastClickAt;
+    /** Set by DateTimePickerService: closes the open picker when another field is tapped. */
+    private pickerCloser;
+    /** Watches the dialog a side-docked panel lines up with. */
+    private dialogObserver;
+    constructor();
     private lastKeyboardHeight;
     private pickerOverlayOpen;
     private pickerTriggerPressedUntil;
@@ -208,6 +227,31 @@ declare class CustomKeyboardService {
     private blockInitialInteraction;
     private scrollTargetIntoDialogView;
     private updateKeyboardHeight;
+    /**
+     * Runs once the tap that opened the keyboard is complete. The keyboard opens on touch-down; a
+     * scroll before the finger lifts makes the click land beside the field, which then loses its
+     * focus. Without a tap in progress it runs on the next frame.
+     */
+    private afterTap;
+    /**
+     * Height of the keyboard docked at the bottom: the last measured one, or the height its
+     * screen-relative key sizes give (see the stylesheet) before it was ever shown.
+     */
+    keyboardHeight(): number;
+    /** Hands the picker closer over; see pickerCloser. */
+    setPickerCloser(closer: () => void): void;
+    /**
+     * The keyboard opens on touch-down; under a field near the bottom it slides in under the
+     * finger and the click of the same tap lands on it, so the field never got its focus.
+     */
+    private refocusTarget;
+    private trackTaps;
+    /**
+     * Scrolls the dialog just far enough that the active field stands fully above the keyboard,
+     * or fully below the dialog header when it went up out of sight. A field already in view
+     * does not move.
+     */
+    private scrollTargetAboveKeyboard;
     private canProcessKeyboardAction;
     insert(character: string): void;
     backspace(): void;
@@ -224,6 +268,8 @@ declare class CustomKeyboardService {
     private readonly documentPointerDownHandler;
     private readonly activeTargetBlurHandler;
     private handleDocumentPointerDown;
+    /** Closes the keyboard when the outside press ends as a tap; a swipe (scrolling) keeps it. */
+    private closeOnTapNotSwipe;
     private handleActiveTargetBlur;
     private insertDateTimeDigit;
     private removeDateTimeDigit;
@@ -246,6 +292,25 @@ declare class CustomKeyboardService {
      */
     reserveBottomArea(panel: HTMLElement | null): void;
     releaseBottomArea(): void;
+    /** See sideDockWidth; keeps the width for the panels' styles. */
+    dockAtSide(): boolean;
+    /** A panel takes the side: the bottom area goes, the dialog stands beside it. */
+    useSideDock(): void;
+    /**
+     * The panel lines up with the dialog - the dialog keeps its own size and place. At the side the
+     * panel takes over its upper and lower edge, at the bottom its left and right edge, and follows
+     * when the dialog changes (an error message, a turn of the device).
+     */
+    private followDialog;
+    /**
+     * Keyboard and calendar look like the page behind them: its background colour - from the
+     * project's styles, the app or the theme - becomes --vl-page-background. Dialogs, masks and the
+     * panels themselves are looked through; transparent elements pass on their parent's colour.
+     */
+    applyPageBackground(): void;
+    /** Keyboard: side or bottom, the same decision as the calendar's. */
+    private applyDock;
+    private clearDock;
     getActiveValue(type: CustomKeyboardType, targetName?: string): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<CustomKeyboardService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<CustomKeyboardService>;
@@ -270,10 +335,21 @@ declare class DateTimePickerService {
     private activePicker;
     private activePickerRequest;
     private pickerOpening;
+    /** Whether the system keyboard is up; only then does an icon have to wait for it to hide. */
+    private systemKeyboardVisible;
     private lockedPickerInput;
     constructor(keyboard: CustomKeyboardService);
     /** (onShow) of a picker. */
     onShown(): void;
+    /**
+     * Side or bottom - the keyboard service decides from the space at hand, the same for the
+     * keyboard, so switching between calendar and keyboard never moves the dialog. At the side the
+     * calendar stands at the right edge over the full height with the dialog beside it; at the
+     * bottom it docks like a keyboard and the dialog ends above it. Decided again on every resize.
+     */
+    private placeDockedPanel;
+    /** Side dock: the field only has to be inside the dialog's visible part. */
+    private scrollFieldIntoDialog;
     /** (onClose) of a picker; pass the picker so a late close of a replaced one is ignored. */
     onClose(picker?: any): void;
     /** (pointerdown) of the calendar or clock icon inside a .picker-field. */
@@ -291,10 +367,18 @@ declare class DateTimePickerService {
      */
     closeIfWithin(container: HTMLElement): void;
     /**
-     * A month has five or six week rows, so the docked calendar grew and shrank while paging
-     * through the months and its upper edge went up and down. It keeps the height of six rows.
+     * The docked calendar is exactly as high as the keyboard, so switching between the two moves
+     * nothing; the day cells are sized to fit the header, the weekdays and always six week rows,
+     * so paging through months with five and six weeks does not change its height either.
      */
-    private keepSixWeekHeight;
+    private fitToKeyboardHeight;
+    /** Day cells as large as the panel's height allows for its header, the weekdays and six weeks. */
+    private fitDays;
+    /**
+     * The time picker hangs below its field - upright there is room. Where there is not (a phone in
+     * landscape), the field scrolls up first; PrimeNG would put the picker above it otherwise.
+     */
+    private makeRoomBelow;
     /**
      * Scrolls the dialog so the field sits right above the docked picker: the eye and the thumb
      * move a short way from the value to the picker instead of across the whole screen.
@@ -326,6 +410,15 @@ declare class CardComponent {
     private notificationService;
     private oauthService;
     private requestService;
+    private readonly remoteLists;
+    /** Loaded lists by field reference. */
+    remoteData: Record<string, any[]>;
+    /** Current suggestions of an autocomplete by field reference. */
+    remoteSuggestions: Record<string, any[]>;
+    /** Loads every backend list the given layout nodes describe; dropdown/combobox get their items. */
+    loadRemoteLists(nodes: any[], propertySchema: any): Promise<void>;
+    /** (completeMethod) of an autocomplete with a backend list. */
+    completeRemote(event: any, node: any): void;
     /** Date and time picker behaviour shared by all containers. */
     readonly picker: DateTimePickerService;
     private readonly pickerHost;
@@ -422,6 +515,15 @@ declare class CardComponent {
 }
 
 declare class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+    private readonly remoteLists;
+    /** Loaded lists by field reference. */
+    remoteData: Record<string, any[]>;
+    /** Current suggestions of an autocomplete by field reference. */
+    remoteSuggestions: Record<string, any[]>;
+    /** Loads every backend list the given layout nodes describe; dropdown/combobox get their items. */
+    loadRemoteLists(nodes: any[], propertySchema: any): Promise<void>;
+    /** (completeMethod) of an autocomplete with a backend list. */
+    completeRemote(event: any, node: any): void;
     /** Date and time picker behaviour shared by all containers. */
     readonly picker: DateTimePickerService;
     private readonly host;
@@ -477,10 +579,25 @@ declare class GridComponent implements AfterViewInit, OnDestroy {
     private utilityService;
     private notificationService;
     private oktaAuthService;
+    private readonly remoteLists;
+    /** Loaded lists by field reference. */
+    remoteData: Record<string, any[]>;
+    /** Current suggestions of an autocomplete by field reference. */
+    remoteSuggestions: Record<string, any[]>;
+    /** Loads every backend list the given layout nodes describe; dropdown/combobox get their items. */
+    loadRemoteLists(nodes: any[], propertySchema: any): Promise<void>;
+    /** (completeMethod) of an autocomplete with a backend list. */
+    completeRemote(event: any, node: any): void;
     /** Date and time picker behaviour shared by all containers. */
     readonly picker: DateTimePickerService;
     private readonly host;
     ngOnDestroy(): void;
+    private sideHintObserver?;
+    /** Marks the table's scroll area while columns lie beyond its left or right edge. */
+    private updateSideHints;
+    private onSideScroll;
+    /** Watches size and content of the table, so the hints follow new data and a turn of the device. */
+    private startSideHints;
     /** New data objects use boolean; older projects may still use checkbox. */
     isLegacyCheckboxFieldType(type: string | undefined): boolean;
     isLogined: boolean;
@@ -615,6 +732,7 @@ declare class ModelComponent implements OnChanges, OnDestroy {
     private readonly dialogRef;
     private readonly dialogConfig;
     private utilityService;
+    private readonly remoteLists;
     /** Keep existing checkbox data objects usable; new objects use boolean. */
     renderFieldType(type: string | undefined): string | undefined;
     /** Date and time picker behaviour shared by all containers. */
@@ -643,22 +761,11 @@ declare class ModelComponent implements OnChanges, OnDestroy {
     getButtonCaption(formField: any): any;
     mapDataToPropertySchema(data: any, modalItemInfo: any): void;
     setAutoCompleteData(): Promise<void>;
-    fetchAutocompleteData(formField: any): Promise<any>;
-    resolveAutocompleteConfig(config: any, userInfo: any): {
-        url: string;
-        method: any;
-        params: any;
-        headers: {
-            Authorization: string;
-            Accept: string;
-        } | {
-            Authorization?: undefined;
-            Accept?: undefined;
-        };
-    };
-    private getAutocompleteRequestUrl;
-    buildCompany(userInfo: any): string;
+    /** The field's backend list (RemoteListService - shared by every container). */
+    fetchAutocompleteData(formField: any): Promise<any[]>;
+    /** Resolves {{...}} against the user info (RemoteListService). */
     resolveToken(template: string, context: any): string;
+    buildCompany(userInfo: any): string;
     getScope(scope: any): string;
     autocompChangeEvent(event: any, formField: any): void;
     autocompFocusOutEvent(event: any, formField: any): void;
@@ -745,6 +852,12 @@ declare class MobileKeycloakService {
     getUserInfo(accessToken: any, issuer: any): Promise<any>;
     getAccessToken(): string | null;
     getRefreshToken(): string | null;
+    /**
+     * Ends the Keycloak session without a browser window: the refresh token goes to the logout
+     * endpoint directly (allowed for public clients). The browser variant left an empty in-app window
+     * that did not close, and its close button cancelled the new sign-in started behind it. The local
+     * sign-in is removed in any case - without network the session simply runs out at Keycloak.
+     */
     logout(): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<MobileKeycloakService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MobileKeycloakService>;
@@ -793,6 +906,8 @@ declare class SideMenuComponent implements AfterViewInit, OnChanges, OnDestroy {
     errorMessage: EventEmitter<any>;
     deleteProject: EventEmitter<any>;
     paginationType: EventEmitter<any>;
+    /** The language file in use ("de.json"); its menu entry has a check mark. */
+    activeLanguage: string | null;
     sideMenu: ElementRef<HTMLElement>;
     readonly PRIME_DE: {
         firstDayOfWeek: number;
@@ -824,6 +939,13 @@ declare class SideMenuComponent implements AfterViewInit, OnChanges, OnDestroy {
     getPaginationType(): Promise<void>;
     ngAfterViewInit(): Promise<void>;
     ngOnDestroy(): void;
+    /**
+     * Mobile menu (overlay when open, no width when closed, styles under :host(.sidemenu-mobile)):
+     * the app on iOS and Android - phones and tablets - and small browser windows.
+     */
+    mobileMode: boolean;
+    onResizeMobileMode(): void;
+    private computeMobileMode;
     onDocumentClick(event: MouseEvent): void;
     toggleCollapsed(): void;
     private isNativeMobile;
@@ -836,6 +958,8 @@ declare class SideMenuComponent implements AfterViewInit, OnChanges, OnDestroy {
     private clearLoginUser;
     getUserInfoFromToken(token: string): any | null;
     setLoginedUser(user: any): void;
+    /** The menu entry with action 'logout', at any depth of the menu. */
+    private findLogoutMenu;
     initializeProjects(): void;
     setProjectSetting(): Promise<void>;
     private setLanguageMenuImage;
@@ -935,7 +1059,7 @@ declare class Textbox {
     };
     /** The toolkit keyboard for this field, from option.keyboardType or the attribute type. */
     keyboardTypeFor(formField: any): CustomKeyboardType | null;
-    getPlaceholder(formField: any): any;
+    getPlaceholder(formField: any): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Textbox, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<Textbox, "vl-textbox", never, { "formField": { "alias": "formField"; "required": false; }; "modalItemInfo": { "alias": "modalItemInfo"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -961,8 +1085,17 @@ declare class AppVersionResetService {
     static ɵprov: i0.ɵɵInjectableDeclaration<AppVersionResetService>;
 }
 
+/** True in the native app on iOS (iPhone and iPad) and Android; false in a browser. */
+declare function isNativeMobile(): boolean;
+/**
+ * True in the native app on a phone - upright and in landscape alike (its shorter screen side is
+ * below 600pt). Tablets get the tablet and desktop styles by width.
+ */
+declare function isNativePhone(): boolean;
+
 declare class CustomKeyboardComponent {
     readonly keyboard: CustomKeyboardService;
+    /** Capital letters: on for the first letter of an empty field, then off - as on iOS. */
     readonly uppercase: i0.WritableSignal<boolean>;
     /** true while the ?123 page is shown instead of the letters. */
     readonly symbols: i0.WritableSignal<boolean>;
@@ -997,5 +1130,86 @@ declare class CustomKeyboardDirective implements OnDestroy {
     static ɵdir: i0.ɵɵDirectiveDeclaration<CustomKeyboardDirective, "[vlCustomKeyboard]", never, { "keyboardType": { "alias": "vlCustomKeyboard"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { AppVersionResetService, CardComponent, ConfigService, Couchdb, CustomKeyboardComponent, CustomKeyboardDirective, CustomKeyboardService, FormComponent, GridComponent, HeaderMenuComponent, LogsComponent, MobileKeycloakService, ModelComponent, NetworkLogService, NotificationService, PaginationComponent, RequestService, SideMenuComponent, UtilityService, ViewToolkitModule, normalizeCustomKeyboardType, resolveCustomKeyboardType };
-export type { CustomKeyboardTarget, CustomKeyboardType, MobileAuthTokens };
+/**
+ * The placeholder of the field `reference` in `propertySchema`, translated when the selected
+ * language has an entry for it; empty when the project defines none.
+ */
+declare function resolvePlaceholder(propertySchema: any, reference: string | null | undefined, translations?: Record<string, string> | null): string;
+/** Template form of resolvePlaceholder: [placeholder]="propertySchema | vlPlaceholder: reference". */
+declare class PlaceholderPipe implements PipeTransform {
+    transform(propertySchema: any, reference: string | null | undefined, translations?: Record<string, string> | null): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PlaceholderPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<PlaceholderPipe, "vlPlaceholder", true>;
+}
+
+interface RequestTimeoutMessages {
+    requestSlow: string;
+    requestStillSlow: string;
+    requestTimeout: string;
+}
+/** Thrown when a request was given up after the last stage. */
+declare class RequestTimeoutError extends Error {
+    constructor();
+}
+/** Stages in ms: first hint, second hint, give up. */
+declare const REQUEST_STAGES: {
+    readonly slow: 10000;
+    readonly stillSlow: 30000;
+    readonly timeout: 60000;
+};
+declare class RequestTimeoutService {
+    private readonly notification;
+    /** For code outside Angular's injection (stagedRequest). */
+    static instance: RequestTimeoutService | null;
+    private messages;
+    /** When each message was shown last; several requests waiting at once show it only once. */
+    private lastShown;
+    constructor(notification: NotificationService);
+    /** The texts in the current language (from the app's framework translation). */
+    setMessages(messages: Partial<RequestTimeoutMessages> | null | undefined): void;
+    /** Shows a stage's message, at most once per stage interval. */
+    notify(stage: keyof RequestTimeoutMessages): void;
+    /**
+     * Runs one request under the waiting rule. `work` gets an AbortSignal (fetch can use it);
+     * after the last stage the signal aborts and the promise rejects with RequestTimeoutError.
+     */
+    run<T>(work: (signal: AbortSignal) => Promise<T>): Promise<T>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RequestTimeoutService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RequestTimeoutService>;
+}
+/** A request under the waiting rule (RequestTimeoutService.run); runs plainly before Angular is up. */
+declare function stagedRequest<T>(work: (signal: AbortSignal) => Promise<T>): Promise<T>;
+
+declare class RemoteListService {
+    /** The signed-in user (claims + token), set by the app; used when a caller has none. */
+    private currentUser;
+    setUser(userInfo: any): void;
+    /** Lists already loaded, by request (url + params), so a page does not ask twice. */
+    private readonly cache;
+    /** Like load(), with the current user and one request per source while the app runs. */
+    loadShared(config: any): Promise<any[]>;
+    /** Loads the list a field's source describes (option.autocomplete: url, method, params). */
+    load(config: any, userInfo?: any): Promise<any[]>;
+    resolveAutocompleteConfig(config: any, userInfo: any): {
+        url: string;
+        method: any;
+        params: any;
+        headers: {
+            Authorization: string;
+            Accept: string;
+        } | {
+            Authorization?: undefined;
+            Accept?: undefined;
+        };
+    };
+    private getAutocompleteRequestUrl;
+    buildCompany(userInfo: any): string;
+    resolveToken(template: string, context: any): string;
+    /** Suggestions of `list` whose `field` starts with the typed `query` (case-insensitive). */
+    filter(list: any[] | undefined, field: string | undefined, query: string | undefined): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<RemoteListService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<RemoteListService>;
+}
+
+export { AppVersionResetService, CardComponent, ConfigService, Couchdb, CustomKeyboardComponent, CustomKeyboardDirective, CustomKeyboardService, FormComponent, GridComponent, HeaderMenuComponent, LogsComponent, MobileKeycloakService, ModelComponent, NetworkLogService, NotificationService, PaginationComponent, PlaceholderPipe, REQUEST_STAGES, RemoteListService, RequestService, RequestTimeoutError, RequestTimeoutService, SIDE_DOCK_CLASS, SideMenuComponent, UtilityService, ViewToolkitModule, isNativeMobile, isNativePhone, normalizeCustomKeyboardType, resolveCustomKeyboardType, resolvePlaceholder, sideDockWidth, stagedRequest };
+export type { CustomKeyboardTarget, CustomKeyboardType, MobileAuthTokens, RequestTimeoutMessages };