@studiohyperdrive/ngx-utils
Version:
A series of abstracts, utils, pipes and services for Angular applications.
665 lines (623 loc) • 26.4 kB
TypeScript
import * as i0 from '@angular/core';
import { EventEmitter, OnDestroy, WritableSignal, Signal, PipeTransform, OnInit, Provider, InjectionToken, SimpleChange } from '@angular/core';
import { Observable, Subject, BehaviorSubject } from 'rxjs';
import { SafeHtml } from '@angular/platform-browser';
import { AbstractControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
declare class FocusClickDirective {
disabled: boolean;
/**
* This directive replaces the default `click` directive and allows the user to execute
* the `click` event by clicking the mouse **and** by using the `enter` key on focus.
*
* A tabindex of `0` gets added to the host.
*
* @memberof FocusClickDirective
*/
readonly focusClick: EventEmitter<void | Event>;
private readonly tabIndex;
private isClicked;
private isEntered;
static ɵfac: i0.ɵɵFactoryDeclaration<FocusClickDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<FocusClickDirective, "[focusClick]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, { "focusClick": "focusClick"; }, never, never, true, never>;
}
declare const Directives: (typeof FocusClickDirective)[];
declare const getQueryParams: <ParamType>() => Observable<ParamType>;
/**
* A service that wraps the BroadCastChannel API and provides an Observable based implementation to the channel messages.
*
* For more information:
* https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
*/
declare class NgxBroadcastChannelService {
private readonly windowService;
/**
* A record holding all the broadcast channels
*/
private broadcastChannel;
/**
* initChannel
*
* The initChannel method initializes a new BroadcastChannel instance.
*
* @param args{ConstructorParameters<typeof BroadcastChannel>} - The arguments to pass to the BroadcastChannel constructor.
*/
initChannel(...args: ConstructorParameters<typeof BroadcastChannel>): void;
/**
* closeChannel
*
* The closeChannel method closes a selected BroadcastChannel instance.
*
* @param channelName{string} - The name of the Broadcast Channel.
*/
closeChannel(channelName: string): void;
/**
* postMessage
*
* The postMessage method sends a message to a selected BroadcastChannel instance.
*
* @param channelName{string} - The name of the Broadcast Channel.
* @param message{any} - The payload to send through the channel.
*/
postMessage<MessageType = any>(channelName: string, message: MessageType): void;
/**
* selectChannelMessages
*
* The selectChannelMessages method subscribes to the `message` (bc.onmessage) event of a selected BroadcastChannel instance.
*
* @param channelName{string} - The name of the Broadcast Channel.
* @returns Observable<MessageEvent> - The message event of the channel wrapped in an observable.
*/
selectChannelMessages<MessageType = any>(channelName: string): Observable<MessageEvent<MessageType>>;
/**
* selectChannelMessageErrors
*
* The selectChannelMessageErrors method subscribes to the `messageerror` (bc.onmessageerror) event of a selected BroadcastChannel instance.
*
* @param channelName{string} - The name of the Broadcast Channel.
* @returns Observable<MessageEvent> - The messageerror event of the channel wrapped in an observable.
*/
selectChannelMessageErrors<MessageType = any>(channelName: string): Observable<MessageEvent<MessageType>>;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxBroadcastChannelService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgxBroadcastChannelService>;
}
declare class SubscriptionService implements OnDestroy {
destroyed$: Subject<boolean>;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<SubscriptionService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<SubscriptionService>;
}
type WritableBooleanSignal = WritableSignal<boolean>;
type BooleanSignal = Signal<boolean>;
type WritableStringSignal = WritableSignal<string>;
type StringSignal = Signal<string>;
type WritableNumberSignal = WritableSignal<number>;
type NumberSignal = Signal<number>;
type WritableArraySignal<DataType> = WritableSignal<DataType[]>;
type ArraySignal<DataType> = Signal<DataType[]>;
interface WithRouterLinksConfig {
replaceElementSelector: string;
linkAttributeName: string;
dataLinkIdAttributeName: string;
/** Add a class to the host of the substitute element. */
hostClass?: string;
}
interface LinkReference {
dataLinkId: string;
link: string | string[];
replaceElementSelector?: string;
toAttribute?: string;
/** Add a class to the host of the substitute element. This will overwrite the global hostClass of the injection token. */
hostClass?: string;
}
type NgxStorageRecord = Record<string, BehaviorSubject<any>>;
type NgxStorageType = 'local' | 'session';
interface NgxStorageBaseEvent {
type: 'set' | 'clear' | 'remove';
storage: NgxStorageType;
}
interface NgxStorageSetEvent<DataType = any> extends NgxStorageBaseEvent {
type: 'set';
key: string;
oldValue: DataType;
newValue: DataType;
}
interface NgxStorageClearEvent extends NgxStorageBaseEvent {
type: 'clear';
}
interface NgxStorageRemoveEvent<DataType = any> extends NgxStorageBaseEvent {
type: 'remove';
key: string;
oldValue: DataType;
}
type NgxStorageEvent = NgxStorageClearEvent | NgxStorageSetEvent | NgxStorageRemoveEvent;
interface NgxStorage {
getItem: <DataType = any>(key: string) => DataType;
getItemObservable: <DataType = any>(key: string) => Observable<DataType>;
removeItem: (key: string) => NgxStorageRemoveEvent;
setItem: <DataType = any>(key: string, item: DataType) => NgxStorageSetEvent;
clear: () => NgxStorageClearEvent;
}
type NgxReplaceElementsSelector = `${string}{{id}}${string}`;
interface NgxReplaceElementsConfigurationElement {
element: string;
selector: NgxReplaceElementsSelector;
includeInnerText?: boolean;
}
type NgxReplaceElementsConfiguration = Record<string, NgxReplaceElementsConfigurationElement>;
interface NgxReplaceElementsItem {
id: string;
elementId: string;
data?: Record<Lowercase<string>, string>;
}
/**
* The configuration used to highlight determine what and how to highlight
*/
interface NgxHighlightConfiguration {
/**
* Whether the search for matches in the provided string should be normalized.
*/
normalized?: boolean;
/**
* Whether the search for matches in the provided string should be case-insensitive.
*/
caseInsensitive?: boolean;
/**
* Should only the first match be highlighted or all matches
*/
someOrEveryMatch?: 'some' | 'every';
/**
* Whether text to highlight should be split on space.
* If false the entire string will be used for searching e.g. "some value"
* If true the value will be split e.g. "some" or "value"
*/
splitTextToHighlight?: boolean;
/**
* Which HTML tag should be used to highlight
*/
tag?: string;
/**
* Which class should be applied to the {@link tag}.
*/
highlightClass?: string;
}
/**
* A service that provides a SSR-proof Observable based approach to the session- and localStorage.
*/
declare class NgxStorageService {
private readonly windowService;
/**
* A record to hold the properties in the sessionStorage
*/
private readonly sessionStorageRecord;
/**
* A record to hold the properties in the localStorage
*/
private readonly localStorageRecord;
/**
* A subject to hold the events of the storage
*/
private readonly storageEventSubject;
/**
* An observable that emits whenever the session- or the localStorage was updated
*/
readonly storageEvents$: Observable<NgxStorageEvent>;
constructor();
/**
* A localStorage implementation using observables
*/
get localStorage(): NgxStorage;
/**
* A sessionStorage implementation using observables
*/
get sessionStorage(): NgxStorage;
private getItem;
/**
* Returns an observable version of the storage value
*
* @param key - The key of the storage value
* @param record - The storage record
*/
private getItemObservable;
/**
* Sets an item in the storage
*
* @param key - The key of the item
* @param item - The item in the storage
* @param storage - The storage in which we want to save the item
* @param record - The corresponding storage record
*/
private setItem;
/**
* Remove an item from the storage and emit a remove event
*
* @param key - The key of the item
* @param storage - The storage we wish to remove the item from
* @param record - The record with the subject
* @param type - The type of storage
*/
private removeItem;
/**
* Clears the storage, completes all subjects and emits a clear event
*
* @param storage - The storage we wish to clear
* @param record - The record with the subjects
* @param type - The type of storage
*/
private clearStorage;
/**
* Grabs the existing storage and updates the record
*
* @private
* @param {Storage} storage - The current state of the storage
* @param {NgxStorageRecord} record
* @memberof NgxStorageService
*/
private setupStorage;
/**
* Parses a string value from the storage to an actual value
*
* @param value - The provided string value
*/
private parseValue;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxStorageService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgxStorageService>;
}
/**
* A service that can be used to track media queries and their changes. It exposes a method
* to register media queries, which takes an array of tuples with the id of the media query
* and the query itself. The service will then emit the id of the media query that has
* changed when subscribed to the `getMatchingQuery$` method.
*/
declare class NgxMediaQueryService implements OnDestroy {
private readonly windowService;
/**
* A map of media queries that are registered with the service.
*/
private readonly queryListMap;
/**
* A map of the registered media queries with their id.
*/
private readonly queryIdMap;
private readonly mediaQueryListenerMap;
/**
* A subject that emits the id of the media query that has changed.
*/
private readonly queryChangedSubject;
/**
* Register a list of media queries that need to be tracked by the service.
*
* @param queries - A list of media queries that should be registered with the service.
*/
registerMediaQueries(...queries: [id: string, query: string][]): void;
/**
* Pass the id of the query whose changes need to be listened to.
*
* @param id - The id of the media query that should be checked.
* @returns An observable that emits a boolean value whenever the requested media query changes.
*/
getMatchingQuery$(id: string): Observable<boolean>;
/**
* Unregister all media query subscriptions from the service.
*/
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxMediaQueryService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<NgxMediaQueryService>;
}
/**
* A pipe that will search an array to see if on of its objects contains specific values on provided keys.
*
* Usage:
* value | arrayContainsOne : ['prop1', 'prop2', ...]
*
* Examples:
* {{
* [
* { title: 'This is the title', description: 'This is the description' },
* { title: 'This is the title' }
* ] | arrayContainsOne: ['description']
* }}
* Output: true
*/
declare class ArrayContainsOnePipe implements PipeTransform {
transform(values: unknown[], checkProps?: string[]): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<ArrayContainsOnePipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<ArrayContainsOnePipe, "arrayContainsOne", true>;
}
declare class NgxHighlightPipe implements PipeTransform {
/**
* Highlights the provided substring of a text with a chosen dom element
*
* @param value - The full text with the part we wish to highlight
* @param highlight - The part of the text we wish to highlight
* @param config - The configuration to determine if we want to normalize the values, to be case-sensitive, which tag and/or class to use for the highlight
* @param config.normalized - Default = true
* @param config.caseInsensitive - Default = true
* @param config.splitTextToHighlight - Default = false
* @param config.someOrEveryMatch - Default = 'every'
* @param config.tag - Default = 'mark'
* @param config.highlightClass - Default = 'ngx-mark-highlight'
*/
transform(value: string | null, highlight: string | null, config?: NgxHighlightConfiguration | null): string;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxHighlightPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<NgxHighlightPipe, "highlight", true>;
}
declare class IbanPipe implements PipeTransform {
transform(value?: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration<IbanPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<IbanPipe, "IBAN", true>;
}
declare class LimitToPipe implements PipeTransform {
/**
* Limits an array to a specific value
*
* @param value - The provided array
* @param limitedTo - The number to which we want to limit the array
*/
transform(value: any[], limitedTo: number): any[];
static ɵfac: i0.ɵɵFactoryDeclaration<LimitToPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<LimitToPipe, "limitTo", true>;
}
declare class LogPipe implements PipeTransform {
/**
* Logs the provided value to the console.
*
* @param value The value to log to the console.
* @param text An optional textual value to print before the piped value.
*/
transform(value: any, text?: string): void;
static ɵfac: i0.ɵɵFactoryDeclaration<LogPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<LogPipe, "log", true>;
}
declare class MergeArraysPipe implements PipeTransform {
/**
* The mergeArrays pipe will take a source array and concat it with all provided additional arrays.
* Undefined or null values are filtered from the flattened result.
*
* @param source{any[]}
* @param arrays{any[]}
*/
transform(source?: any[], ...arrays: any[][]): any[];
static ɵfac: i0.ɵɵFactoryDeclaration<MergeArraysPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<MergeArraysPipe, "mergeArrays", true>;
}
/**
* A pipe that allows to replace text elements with a WebComponent
*/
declare class NgxReplaceElementsPipe implements PipeTransform {
private readonly configuration;
private readonly sanitizer;
/**
* Replaces all matches of a specific selector with provided WebComponents
*
* @param value - The original string value
* @param items - The items we wish to replace
*/
transform(value: string, items: NgxReplaceElementsItem[]): SafeHtml;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxReplaceElementsPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<NgxReplaceElementsPipe, "ngxReplaceElements", true>;
}
/**
* A pipe to pass a transformer function to. By using this setup, we can use functions without causing rerender issues
*/
declare class TransformPipe implements PipeTransform {
/**
* Transforms a value based on a provided transform function
*
* @param value - The provided value we wish to transform
* @param transformer - A provided transform function
*/
transform<TransformerType = any>(value: any, transformer: Function): TransformerType;
static ɵfac: i0.ɵɵFactoryDeclaration<TransformPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<TransformPipe, "transform", true>;
}
declare class TruncateTextPipe implements PipeTransform {
transform(value: string, limit?: number): string;
static ɵfac: i0.ɵɵFactoryDeclaration<TruncateTextPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<TruncateTextPipe, "truncateText", true>;
}
/**
* An additional pipe to convert anchors to router-links
*/
declare class WithRouterLinkPipe implements PipeTransform {
private readonly config;
private readonly sanitizer;
/**
* transform
*
* The transform method loop through the linkReferences and find/replace matching
* references within the given value (string) with the provided web component (global/local config).
*
* @param value
* @param linkReferences
*/
transform(value: string, linkReferences?: LinkReference[]): any;
static ɵfac: i0.ɵɵFactoryDeclaration<WithRouterLinkPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<WithRouterLinkPipe, "withRouterLinks", true>;
}
declare class BtwPipe implements PipeTransform {
/**
* Converts a BTW number to the correct format
*
* @param value - The value we wish to convert
*/
transform(value: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration<BtwPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<BtwPipe, "btw", true>;
}
declare class CleanArrayPipe implements PipeTransform {
/**
* Removes all falsy values from the provided array.
*
* @param value The values that need to be stripped of falsy values.
* @param exceptions The falsy values that may be included in the filtered array.
* @returns The filtered array.
*/
transform(value: any[], exceptions?: any[]): any[];
static ɵfac: i0.ɵɵFactoryDeclaration<CleanArrayPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<CleanArrayPipe, "cleanArray", true>;
}
declare class EntriesPipe implements PipeTransform {
/**
* Transforms a record into a [key, value] array
*
* @param value - The provided record
*/
transform(value: Record<string, unknown>): [string, unknown][];
static ɵfac: i0.ɵɵFactoryDeclaration<EntriesPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<EntriesPipe, "entries", true>;
}
declare class HasObserversPipe implements PipeTransform {
transform(output: EventEmitter<unknown>): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<HasObserversPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<HasObserversPipe, "hasObservers", true>;
}
declare class HasOwnProperty implements PipeTransform {
/**
* Checks whether the specified property exists within the given object.
*
* @param {unknown} object - The object to check for the presence of the property.
* @param {string} prop - The property name to check for within the object.
* @return {boolean} - Returns `true` if the property exists in the object, `false` otherwise.
*/
transform(object: unknown, prop: string): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<HasOwnProperty, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<HasOwnProperty, "hasOwnProperty", true>;
}
declare class HasValuesPipe implements PipeTransform {
/**
* Checks whether an object has values
*
* @param value - The provided value
*/
transform(value: object): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<HasValuesPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<HasValuesPipe, "hasValues", true>;
}
declare class IsNotEmptyPipe implements PipeTransform {
/**
* Checks if a given argument is an object or array and if it is empty.
*
* @param value - can be any value.
* @param checkProps - which props to check.
*/
transform(value: unknown, checkProps?: string[]): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<IsNotEmptyPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<IsNotEmptyPipe, "isNotEmpty", true>;
}
declare class JoinPipe implements PipeTransform {
/**
* Transforms an array to a joined string
*
* @param values - An array of values
* @param separator - A separator we wish to use
*/
transform(values: Array<string>, separator?: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration<JoinPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<JoinPipe, "join", true>;
}
declare class SafeHtmlPipe implements PipeTransform {
private readonly sanitized;
/**
* Maps a provided string value to a sanitized string
*
* @param value - A provided string with HTML items
*/
transform(value: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration<SafeHtmlPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<SafeHtmlPipe, "safeHtml", true>;
}
declare class StripHtmlPipe implements PipeTransform {
transform(value: string, replaceWith?: string): string;
static ɵfac: i0.ɵɵFactoryDeclaration<StripHtmlPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<StripHtmlPipe, "stripHtml", true>;
}
declare class ToArrayPipe implements PipeTransform {
/**
* Checks if a given argument is an array, if not, it will wrap the argument in a new array.
*/
transform(value: any): any[];
static ɵfac: i0.ɵɵFactoryDeclaration<ToArrayPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<ToArrayPipe, "toArray", true>;
}
declare class UniqByPipe implements PipeTransform {
transform(value: {
[key: string]: any;
}[], key: string): any;
static ɵfac: i0.ɵɵFactoryDeclaration<UniqByPipe, never>;
static ɵpipe: i0.ɵɵPipeDeclaration<UniqByPipe, "uniqBy", true>;
}
declare const Pipes: (typeof ArrayContainsOnePipe | typeof NgxHighlightPipe | typeof IbanPipe | typeof LimitToPipe | typeof LogPipe | typeof MergeArraysPipe | typeof TransformPipe | typeof TruncateTextPipe | typeof WithRouterLinkPipe | typeof NgxReplaceElementsPipe)[];
type StringifiedQueryParamsType<QueryParamsType> = {
[key in keyof QueryParamsType]: string;
};
declare abstract class NgxQueryParamFormSyncComponent<QueryParamsType, FormType extends AbstractControl> implements OnInit, OnDestroy {
protected readonly route: ActivatedRoute;
protected readonly router: Router;
protected readonly destroyed$: Subject<void>;
/**
* The form in which we will save the queryParam data
*/
form: FormType;
/**
* The query params we wish to form
*/
protected queryParams$: Observable<StringifiedQueryParamsType<QueryParamsType>>;
constructor(route: ActivatedRoute, // eslint-disable-line @angular-eslint/prefer-inject
router: Router);
ngOnInit(): void;
ngOnDestroy(): void;
/**
* Clears the data in the form
*/
clearData(): void;
/**
* Sets the provided data in the route, so the filtered view can be shared by url
*
* @param data - The provided data
*/
private setDataInRoute;
/**
* A method that that will provide a form that will be used to store the current data
*/
protected abstract initForm(): FormType;
/**
* An optional method that will handle what happens when the data have been updated. Do NOT subscribe to an Observable in this method.
*
* This method is useful in case you wish to save your currently selected data to a global state.
*
* @param data - The data provided by the form
*/
protected abstract handleDataChanges?(data: QueryParamsType): void;
/**
* An optional method to scramble the parameters if needed, so no data gets added into the route that shouldn't be shared
*
* @param params - The provided params we wish to set in the route
*/
protected scrambleParams?(params: QueryParamsType): QueryParamsType;
/**
* An optional method to unscramble the parameters if needed, so no data gets added into the route that shouldn't be shared
*
* @param params - The provided params we wish to patch in the form
*/
protected unscrambleParams?(params: QueryParamsType): QueryParamsType;
static ɵfac: i0.ɵɵFactoryDeclaration<NgxQueryParamFormSyncComponent<any, any>, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<NgxQueryParamFormSyncComponent<any, any>, never, never, {}, {}, never, never, true, never>;
}
/**
* Provides the configuration for the NgxReplaceElements directive
*
* @param configuration - The required configuration
*/
declare const provideNgxReplaceElementsConfiguration: (configuration: NgxReplaceElementsConfiguration) => Provider;
/** The configuration token for the NgxReplaceElementsPipe */
declare const NgxReplaceElementsConfigurationToken: InjectionToken<NgxReplaceElementsConfiguration>;
/**
* Method checks if given value has changed
* @param {SimpleChange} value: value to check
* @returns {boolean} whether or not if the given input has changed
*/
declare const simpleChangeHasChanged: (value: SimpleChange) => boolean;
declare const WITH_ROUTER_LINKS_CONFIG: InjectionToken<WithRouterLinksConfig>;
export { ArrayContainsOnePipe, BtwPipe, CleanArrayPipe, Directives, EntriesPipe, FocusClickDirective, HasObserversPipe, HasOwnProperty, HasValuesPipe, IbanPipe, IsNotEmptyPipe, JoinPipe, LimitToPipe, LogPipe, MergeArraysPipe, NgxBroadcastChannelService, NgxHighlightPipe, NgxMediaQueryService, NgxQueryParamFormSyncComponent, NgxReplaceElementsConfigurationToken, NgxReplaceElementsPipe, NgxStorageService, Pipes, SafeHtmlPipe, StripHtmlPipe, SubscriptionService, ToArrayPipe, TransformPipe, TruncateTextPipe, UniqByPipe, WITH_ROUTER_LINKS_CONFIG, WithRouterLinkPipe, getQueryParams, provideNgxReplaceElementsConfiguration, simpleChangeHasChanged };
export type { ArraySignal, BooleanSignal, LinkReference, NgxHighlightConfiguration, NgxReplaceElementsConfiguration, NgxReplaceElementsConfigurationElement, NgxReplaceElementsItem, NgxReplaceElementsSelector, NgxStorage, NgxStorageClearEvent, NgxStorageEvent, NgxStorageRecord, NgxStorageRemoveEvent, NgxStorageSetEvent, NgxStorageType, NumberSignal, StringSignal, StringifiedQueryParamsType, WithRouterLinksConfig, WritableArraySignal, WritableBooleanSignal, WritableNumberSignal, WritableStringSignal };