@ibenvandeveire/ngx-utils/index.d.ts

A series of abstracts, utils, pipes and services for Angular applications, created by Iben Van de Veire.

import * as i0 from '@angular/core';
import { OutputEmitterRef, WritableSignal, Signal, OnDestroy, PipeTransform, EventEmitter, OnInit, Provider, InjectionToken, SimpleChange } from '@angular/core';
import { Observable, BehaviorSubject, Subject } from 'rxjs';
import { SafeHtml } from '@angular/platform-browser';
import { AbstractControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

declare class FocusClickDirective {
    readonly disabled: i0.InputSignal<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: OutputEmitterRef<void | Event>;
    isClicked(event: Event): void;
    isEntered(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<FocusClickDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<FocusClickDirective, "[focusClick]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "focusClick": "focusClick"; }, never, never, true, never>;
}

declare const Directives: (typeof FocusClickDirective)[];

/**
 * 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>;
}

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[]>;

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;
    includeInnerHtml?: boolean;
}
type NgxReplaceElementsConfiguration = Record<string, NgxReplaceElementsConfigurationElement>;
interface NgxReplaceElementsItem {
    id: string;
    elementId: string;
    data?: Record<Lowercase<string>, 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>;
}

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 IbanPipe implements PipeTransform {
    transform(value?: string): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<IbanPipe, never>;
    static ɵpipe: i0.ɵɵPipeDeclaration<IbanPipe, "IBAN", 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 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 const Pipes: (typeof HasObserversPipe | typeof IbanPipe | typeof NgxReplaceElementsPipe | typeof TransformPipe)[];

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>>;
    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;

export { BtwPipe, Directives, FocusClickDirective, HasObserversPipe, IbanPipe, NgxBroadcastChannelService, NgxMediaQueryService, NgxQueryParamFormSyncComponent, NgxReplaceElementsConfigurationToken, NgxReplaceElementsPipe, NgxStorageService, Pipes, TransformPipe, provideNgxReplaceElementsConfiguration, simpleChangeHasChanged };
export type { ArraySignal, BooleanSignal, NgxReplaceElementsConfiguration, NgxReplaceElementsConfigurationElement, NgxReplaceElementsItem, NgxReplaceElementsSelector, NgxStorage, NgxStorageClearEvent, NgxStorageEvent, NgxStorageRecord, NgxStorageRemoveEvent, NgxStorageSetEvent, NgxStorageType, NumberSignal, StringSignal, StringifiedQueryParamsType, WritableArraySignal, WritableBooleanSignal, WritableNumberSignal, WritableStringSignal };