UNPKG

@studiohyperdrive/ngx-utils

Version:

A series of abstracts, utils, pipes and services for Angular applications.

665 lines (623 loc) 26.4 kB
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 };