@sebgroup/green-angular 5.1.2 → 5.3.0

package/src/v-angular/drag-drop/drag-drop.component.d.ts

@@ -0,0 +1,131 @@
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { DialogEvent, NggvDialogComponent } from '@sebgroup/green-angular/src/v-angular/modal';
+import type { APIFile, EventStateChange, FileService, LocalFile, StateMap, UploadState } from './drag-drop.models';
+import '@sebgroup/green-core/components/icon/icons/cloud-upload.js';
+import '@sebgroup/green-core/components/icon/icons/cross-small.js';
+import '@sebgroup/green-core/components/icon/icons/checkmark.js';
+import * as i0 from "@angular/core";
+export type DragDropState = 'normal' | 'over' | 'uploading' | 'done';
+export declare class NggvDragDropComponent implements OnInit, OnDestroy {
+    /** @internal */
+    deleteModalRef: NggvDialogComponent;
+    /** Special property used for selecting DOM elements during automated UI testing. */
+    thook: string | null | undefined;
+    /** Allowing selecting or dropping multiple files. */
+    service: FileService | undefined;
+    /** Mime types allowed. */
+    accept?: string;
+    /** Disables deletion or cancellation during defined states [local | uploading | aborted | uploaded | validating | error | deleted | done]. */
+    disableRemove: UploadState[];
+    /** File size limit in mega bytes. */
+    fileLimit: number;
+    /** Allowing selecting or dropping multiple files. */
+    multiple: boolean;
+    /** Determines if list should be shown under upload, disabling list disables multiple upload. */
+    list: boolean;
+    /** Frequency of requests which to send to the API requesting status updates. */
+    throttle: number;
+    /** Maximum number of attempts to request a status update from the API if service is unreachable. */
+    retryAttempts: number;
+    /** If selection of multiple file should be possible with a checkbox.
+     * @experimental work in progress and should not yet be used.
+     * @internal
+     */
+    selectable: boolean;
+    /** Allows multiple values from `apiFile.status` to be mapped to a single file upload state. */
+    stateMap: StateMap;
+    /** Statuses allowed to be fetch during the initial load. Used to hide "done" states from list. */
+    fetchStatuses: string[];
+    /** Statuses allowed be shown when status is "rejected". Will fallback to generic message. `null` allows all. */
+    errorCodes: string[] | null;
+    /** Event triggered on initialization and every time the "uploadState" for a file changes. */
+    stateChange: EventEmitter<EventStateChange>;
+    /** Event triggered when view details is clicked. */
+    detailsClick: EventEmitter<LocalFile & import("./drag-drop.models").APIStatusBaseProperties & {
+        id: string;
+        status: string;
+    } & import("./drag-drop.models").APIFileBaseProperties & {
+        id: string;
+        fileName: string;
+    }>;
+    /** @internal */
+    isDragDropAvailable: boolean;
+    /** @internal */
+    componentState: DragDropState;
+    /** @internal */
+    files: Map<string, LocalFile & APIFile>;
+    /** @internal */
+    lastFile: (LocalFile & APIFile) | undefined;
+    /** @internal */
+    selected: string[];
+    /** @internal */
+    loading: boolean;
+    /** @internal */
+    markedForDeletion: APIFile | undefined;
+    /**
+     * Initialize the component and warn if service is not defined. Will also fetch files for the list if enabled.
+     */
+    ngOnInit(): void;
+    /** Destroy all event listeners and polling running */
+    ngOnDestroy(): void;
+    /** @internal Warn user trying to leave page before all uploads are done. Custom message only works in older browsers. */
+    onBeforeUnload(event: Event): "You still have files uploading, are you sure you want to leave this page?" | undefined;
+    /** @internal Event handler for when a file is held over the drop area */
+    onDragEnter(event: DragEvent): void;
+    /** @internal Event handler for when a file leaves the drop area */
+    onDragLeave(event: DragEvent): void;
+    /** @internal Event handler for when a file is dropped on the drop area or when `input` files are selected */
+    onDrop(event: DragEvent | Event): void;
+    /** @internal Event trigger for when delete button is pressed */
+    onRemove(id: string, state: UploadState): void;
+    /** @internal */
+    onConfirmRemove(event: DialogEvent<LocalFile & APIFile>): void;
+    /** @internal Event handler for when the files should be uploaded */
+    onSubmit(): void;
+    /**
+     * @internal
+     * Using the state map convert `apiFile.state` to one of {@link UploadState}
+     * @param apiState the state given by the file to be used for mapping
+     */
+    determineUploadState(apiState: string): UploadState;
+    /** @internal */
+    uploadStateIsArray(state: string | string[]): state is string[];
+    /** @internal used for translation templating parameters */
+    translateParams(file: LocalFile & APIFile): {
+        fileLimit: string;
+        raw: File | undefined;
+        progress: number;
+        uploadState: UploadState;
+        uploadRequests: import("rxjs").Subscription | undefined;
+        internalStatusReasonCode: string | null;
+        statusReasonInformation: import("./drag-drop.models").APIStatusReason[] | null;
+        id: string;
+        status: string;
+        principal: string;
+        uploadDate: string;
+        registrarId: string;
+        registrarName: string;
+        fileName: string;
+    };
+    /**
+     * Poll the status endpoint to determine when file is valid
+     * @param file file used to check state and update
+     * @param delay how long each interval should wait before sending a request
+     */
+    private checkValidity;
+    private fallbackError;
+    /**
+     * Check so that no files are still validating
+     */
+    private allValidationDone;
+    /**
+     * Check so that no files are still uploading
+     */
+    private allUploadingDone;
+    /**
+     * Helper to update the component state to done and then back to normal
+     */
+    private setComponentStateDone;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDragDropComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDragDropComponent, "nggv-drag-drop", never, { "thook": { "alias": "thook"; "required": false; }; "service": { "alias": "service"; "required": false; }; "accept": { "alias": "accept"; "required": false; }; "disableRemove": { "alias": "disableRemove"; "required": false; }; "fileLimit": { "alias": "fileLimit"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "list": { "alias": "list"; "required": false; }; "throttle": { "alias": "throttle"; "required": false; }; "retryAttempts": { "alias": "retryAttempts"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "stateMap": { "alias": "stateMap"; "required": false; }; "fetchStatuses": { "alias": "fetchStatuses"; "required": false; }; "errorCodes": { "alias": "errorCodes"; "required": false; }; }, { "stateChange": "stateChange"; "detailsClick": "detailsClick"; }, never, never, false, never>;
+}

package/src/v-angular/drag-drop/drag-drop.models.d.ts

@@ -0,0 +1,49 @@
+import { HttpEvent } from '@angular/common/http';
+import { Observable, Subscription } from 'rxjs';
+export type UploadState = 'local' | 'uploading' | 'aborted' | 'uploaded' | 'validating' | 'error' | 'deleted' | 'done';
+export type StateMap = {
+    [key in UploadState]: string | string[];
+};
+export interface LocalFile {
+    raw: File | undefined;
+    progress: number;
+    uploadState: UploadState;
+    uploadRequests: Subscription | undefined;
+}
+export interface APIStatusReason {
+    originatorId: string;
+    reason: string;
+    additionalInformation?: string;
+}
+export interface APIStatusBaseProperties {
+    internalStatusReasonCode: string | null;
+    statusReasonInformation: APIStatusReason[] | null;
+}
+export type APIStatus<T = APIStatusBaseProperties> = T & {
+    id: string;
+    status: string;
+};
+export interface APIFileBaseProperties {
+    principal: string;
+    uploadDate: string;
+    registrarId: string;
+    registrarName: string;
+}
+export type APIFile<T = APIFileBaseProperties, U = APIStatusBaseProperties> = APIStatus<U> & T & {
+    id: string;
+    fileName: string;
+};
+export interface EventStateChange extends Partial<APIStatus> {
+    uploadState: UploadState;
+    fileName: string;
+}
+export interface FileService<T = APIFileBaseProperties, U = APIStatusBaseProperties> {
+    uploadFile(file: File): Observable<HttpEvent<APIFile<T, U>>>;
+    fetchFiles(statuses?: string[]): Observable<Array<APIFile<T, U>>>;
+    fetchStatus(id: string): Observable<APIStatus<U> | undefined>;
+    /** Uses file as param to fetch file status. */
+    fetchStatusFor?(file: APIFile<T, U>): Observable<APIStatus<U> | undefined>;
+    removeFile(id: string): Observable<void>;
+    /** Uses file as param to remove file. */
+    removeFileFor?(file: APIFile<T, U>): Observable<void>;
+}

package/src/v-angular/drag-drop/drag-drop.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./drag-drop.pipes";
+import * as i2 from "./drag-drop.component";
+import * as i3 from "@angular/common/http";
+import * as i4 from "@jsverse/transloco";
+import * as i5 from "@sebgroup/green-angular/src/v-angular/modal";
+import * as i6 from "@sebgroup/green-angular/src/lib/shared";
+import * as i7 from "@angular/common";
+export declare class NggvDragDropModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDragDropModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvDragDropModule, [typeof i1.ValuePipe, typeof i2.NggvDragDropComponent], [typeof i3.HttpClientModule, typeof i4.TranslocoModule, typeof i5.NggvModalModule, typeof i6.NggCoreWrapperModule, typeof i7.CommonModule], [typeof i2.NggvDragDropComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvDragDropModule>;
+}

package/src/v-angular/drag-drop/drag-drop.pipes.d.ts

@@ -0,0 +1,40 @@
+import { KeyValueDiffers, PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class ValuePipe implements PipeTransform {
+    private readonly differs;
+    constructor(differs: KeyValueDiffers);
+    private differ;
+    private values;
+    transform<K, V>(input: null): null;
+    transform<V>(input: {
+        [key: string]: V;
+    } | Map<string, V>): Array<V>;
+    transform<V>(input: {
+        [key: string]: V;
+    } | Map<string, V> | null): Array<V> | null;
+    transform<K, V>(input: Map<K, V>): Array<V>;
+    transform<K, V>(input: Map<K, V> | null): Array<V> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValuePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<ValuePipe, "value", false>;
+}
+/**
+ * Stand-alone version of existing value pipe.
+ *
+ * Impure flag needed due to keep track of changes in complex values (such as objects or arrays).
+ */
+export declare class ValueImpurePipe implements PipeTransform {
+    private readonly differs;
+    private differ;
+    private values;
+    transform<K, V>(input: null): null;
+    transform<V>(input: {
+        [key: string]: V;
+    } | Map<string, V>): Array<V>;
+    transform<V>(input: {
+        [key: string]: V;
+    } | Map<string, V> | null): Array<V> | null;
+    transform<K, V>(input: Map<K, V>): Array<V>;
+    transform<K, V>(input: Map<K, V> | null): Array<V> | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ValueImpurePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<ValueImpurePipe, "valueImpure", true>;
+}

package/src/v-angular/drag-drop/drag-drop.utils.d.ts

@@ -0,0 +1,33 @@
+import { Observable } from 'rxjs';
+import { APIFile, LocalFile } from './drag-drop.models';
+/**
+ * Helper to extend the base file with {@link APIFile} defaults
+ * @param file file base that will be extended with {@link APIFile} defaults
+ * @param data extra data to override defaults
+ */
+export declare const extendFile: (file: File | undefined, ...data: Array<Partial<Omit<LocalFile, 'raw'> & APIFile>>) => LocalFile & APIFile;
+/**
+ * Checks if file matches allowed mime types
+ * @param type file mime type
+ * @param accept allowed mime types
+ */
+export declare const verifyAccept: (type: string, accept?: string) => boolean;
+/**
+ * Determines if browser supports drag and drop
+ */
+export declare const isDragDropAvailable: () => boolean;
+/**
+ * Pick only specified keys from a given object
+ * @param keys keys to pick from a given object
+ * @param object to extract keys from
+ */
+export declare const pick: <T, K extends keyof T>(object: T, ...keys: K[]) => Pick<T, K>;
+/**
+ * Will retry running the observable when an error occurs to a maximum limit, increasing delay between executions.
+ * @param options specifies number of retries, scaling duration and statuses to exclude
+ */
+export declare const retryStrategy: ({ maxRetryAttempts, scalingDuration, excludedStatusCodes, }?: {
+    maxRetryAttempts?: number;
+    scalingDuration?: number;
+    excludedStatusCodes?: number[];
+}) => (attempts: Observable<any>) => Observable<0>;

package/src/v-angular/drag-drop/index.d.ts

@@ -0,0 +1,4 @@
+export * from './drag-drop.component';
+export * from './drag-drop.models';
+export * from './drag-drop.module';
+export * from './drag-drop.pipes';

package/src/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts

@@ -3,7 +3,7 @@ import { TranslocoScope } from '@jsverse/transloco';
 import { Subscription } from 'rxjs';
 import { Option, OptionBase } from '@sebgroup/green-angular/src/v-angular/core';
 import * as i0 from "@angular/core";
-export declare class NgvDropdownListComponent implements OnInit, OnChanges {
+export declare class NggvDropdownListComponent implements OnInit, OnChanges {
     protected translocoScope: TranslocoScope;
     set expanded(state: boolean);
     get expanded(): boolean;
@@ -11,14 +11,21 @@ export declare class NgvDropdownListComponent implements OnInit, OnChanges {
     /** The additional amount to show when option is scrolled into view. */
     scrollOffset: number;
     optionContentTpl: TemplateRef<OptionBase<any>> | undefined;
+    groupLabelTpl: TemplateRef<OptionBase<any>> | undefined;
     /** @internal List of references to the option elements. */
     optionRefs: QueryList<ElementRef<HTMLLIElement>> | undefined;
     /** Id of the host element and is accessible by the children, automatically generated if not provided. */
     id: any;
     /** Special property used for selecting DOM elements during automated UI testing. */
-    thook: string;
+    thook: string | null | undefined;
     options: any[];
     textToHighlight?: string;
+    /**
+     * Used to control if "selectedValueChanged" only should emit distinct changes, or each time a value is selected
+     * When true, value is not emitted if there's no distinct change
+     * When false, value is emitted every time an option is selected
+     * */
+    onlyEmitDistinctChanges: boolean;
     selectedValueChanged: EventEmitter<any>;
     closed: EventEmitter<void>;
     /** The current active option based on numeric index. */
@@ -84,6 +91,6 @@ export declare class NgvDropdownListComponent implements OnInit, OnChanges {
      * @param key the result index which to scroll to.
      */
     scrollToResult(option: any): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvDropdownListComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvDropdownListComponent, "nggv-dropdown-list", never, { "expanded": { "alias": "expanded"; "required": false; }; "state": { "alias": "state"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "optionContentTpl": { "alias": "optionContentTpl"; "required": false; }; "id": { "alias": "id"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "options": { "alias": "options"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; }, { "selectedValueChanged": "selectedValueChanged"; "closed": "closed"; }, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownListComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownListComponent, "nggv-dropdown-list", never, { "expanded": { "alias": "expanded"; "required": false; }; "state": { "alias": "state"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "optionContentTpl": { "alias": "optionContentTpl"; "required": false; }; "groupLabelTpl": { "alias": "groupLabelTpl"; "required": false; }; "id": { "alias": "id"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "options": { "alias": "options"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "onlyEmitDistinctChanges": { "alias": "onlyEmitDistinctChanges"; "required": false; }; }, { "selectedValueChanged": "selectedValueChanged"; "closed": "closed"; }, never, never, false, never>;
 }

package/src/v-angular/dropdown/dropdown.component.d.ts

@@ -1,7 +1,8 @@
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
 import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { TranslocoScope } from '@jsverse/transloco';
-import { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
+import { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
 import { DropdownUtils, Option, OptionBase, OptionGroup } from '@sebgroup/green-angular/src/v-angular/core';
 import * as i0 from "@angular/core";
 /**
@@ -9,18 +10,21 @@ import * as i0 from "@angular/core";
  * Dropdowns enables users to make a quick selection of the available options for a specific entry.
  * https://designlibrary.sebgroup.com/components/component-dropdown
  */
-export declare class NgvDropdownComponent<K = string | null | undefined, V = string | null | undefined, T extends Option<K, V> = Option<K, V>> extends NgvBaseControlValueAccessorComponent implements OnDestroy, OnChanges {
+export declare class NggvDropdownComponent<K = string | null | undefined, V = string | null | undefined, T extends Option<K, V> = Option<K, V>> extends NggvBaseControlValueAccessorComponent implements OnDestroy, OnChanges {
     ngControl: NgControl;
     protected translocoScope: TranslocoScope;
     protected cdr: ChangeDetectorRef;
     protected dropdownUtils: DropdownUtils<K, V, T>;
-    /** Custom template for displaying selected option. */
+    /** Custom template for displaying options and groups. */
     selectedContentTpl: TemplateRef<OptionBase<T>> | undefined;
     optionContentTpl: TemplateRef<OptionBase<any>> | undefined;
+    groupLabelTpl: TemplateRef<OptionBase<any>> | undefined;
     /** Special property used for selecting DOM elements during automated UI testing. */
-    thook: string;
+    thook: string | null | undefined;
     /** Text shown before an option is selected. */
     placeholder?: string;
+    /** Specific value for aria-label. If not provided, label/labelTpl will be used. */
+    ariaLabel?: string;
     /** List of {@link Option} and {@link OptionGroup} listed when dropdown is expanded. */
     set options(value: OptionBase<T>[]);
     get options(): OptionBase<T>[];
@@ -94,6 +98,6 @@ export declare class NgvDropdownComponent<K = string | null | undefined, V = str
      * @param option the object to check.
      */
     isOption(option: OptionBase<T>): option is OptionGroup<T>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvDropdownComponent<any, any, any>, [{ optional: true; self: true; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvDropdownComponent<any, any, any>, "nggv-dropdown", never, { "thook": { "alias": "thook"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "allowControlNullishOption": { "alias": "allowControlNullishOption"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "selectOnSingleOption": { "alias": "selectOnSingleOption"; "required": false; }; }, { "expandedChange": "expandedChange"; }, ["selectedContentTpl", "optionContentTpl"], ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownComponent<any, any, any>, [{ optional: true; self: true; }, { optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvDropdownComponent<any, any, any>, "nggv-dropdown", never, { "thook": { "alias": "thook"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "options": { "alias": "options"; "required": false; }; "scrollOffset": { "alias": "scrollOffset"; "required": false; }; "allowControlNullishOption": { "alias": "allowControlNullishOption"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; "selectOnSingleOption": { "alias": "selectOnSingleOption"; "required": false; }; }, { "expandedChange": "expandedChange"; }, ["selectedContentTpl", "optionContentTpl", "groupLabelTpl"], ["*"], false, never>;
 }

package/src/v-angular/dropdown/dropdown.module.d.ts

@@ -2,11 +2,12 @@ import * as i0 from "@angular/core";
 import * as i1 from "./dropdown.component";
 import * as i2 from "./dropdown-list/dropdown-list.component";
 import * as i3 from "@angular/common";
-import * as i4 from "./typeahead/typeahead.module";
-import * as i5 from "@sebgroup/green-angular/src/v-angular/tooltip";
-import * as i6 from "@sebgroup/green-angular/src/v-angular/i18n";
-export declare class NgvDropdownModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvDropdownModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgvDropdownModule, [typeof i1.NgvDropdownComponent, typeof i2.NgvDropdownListComponent], [typeof i3.CommonModule, typeof i4.NgvTypeaheadModule, typeof i5.NgvTooltipModule, typeof i6.NgvI18nModule], [typeof i1.NgvDropdownComponent, typeof i2.NgvDropdownListComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NgvDropdownModule>;
+import * as i4 from "@sebgroup/green-angular/src/lib/shared";
+import * as i5 from "./typeahead/typeahead.module";
+import * as i6 from "@sebgroup/green-angular/src/v-angular/tooltip";
+import * as i7 from "@sebgroup/green-angular/src/v-angular/i18n";
+export declare class NggvDropdownModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvDropdownModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvDropdownModule, [typeof i1.NggvDropdownComponent, typeof i2.NggvDropdownListComponent], [typeof i3.CommonModule, typeof i4.NggCoreWrapperModule, typeof i5.NggvTypeaheadModule, typeof i6.NggvTooltipModule, typeof i7.NggvI18nModule], [typeof i1.NggvDropdownComponent, typeof i2.NggvDropdownListComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvDropdownModule>;
 }

package/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.d.ts

@@ -1,13 +1,13 @@
 import { ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { TranslocoScope } from '@jsverse/transloco';
 import { OptionBase } from '@sebgroup/green-angular/src/v-angular/core';
-import { NgvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
-import { NgvDropdownListComponent } from '../../dropdown-list/dropdown-list.component';
+import { NggvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
+import { NggvDropdownListComponent } from '../../dropdown-list/dropdown-list.component';
 import * as i0 from "@angular/core";
-export declare class NgvTypeaheadDropdownListComponent extends NgvDropdownListComponent implements OnInit, OnDestroy {
+export declare class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent implements OnInit, OnDestroy {
     protected translocoScope: TranslocoScope;
     private element;
-    hostComponent: NgvInputComponent;
+    hostComponent: NggvInputComponent;
     /** Formats each item that is displayed as an option. Only applies format if the option if it implement Option interface. */
     resultFormatter?: (option: OptionBase<any>) => string;
     /** Formats the selected item in the input when dropdown is opened. If no function is provided, it will display the value of the selected objects label property */
@@ -29,6 +29,6 @@ export declare class NgvTypeaheadDropdownListComponent extends NgvDropdownListCo
      * @returns The formatted value
      */
     private formatSelected;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvTypeaheadDropdownListComponent, [{ optional: true; skipSelf: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvTypeaheadDropdownListComponent, "nggv-typeahead-dropdown-list", never, { "hostComponent": { "alias": "hostComponent"; "required": false; }; "resultFormatter": { "alias": "resultFormatter"; "required": false; }; "selectedFormatter": { "alias": "selectedFormatter"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTypeaheadDropdownListComponent, [{ optional: true; skipSelf: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvTypeaheadDropdownListComponent, "nggv-typeahead-dropdown-list", never, { "hostComponent": { "alias": "hostComponent"; "required": false; }; "resultFormatter": { "alias": "resultFormatter"; "required": false; }; "selectedFormatter": { "alias": "selectedFormatter"; "required": false; }; }, {}, never, never, false, never>;
 }

package/src/v-angular/dropdown/typeahead/typeahead-highlight/typeahead-highlight.component.d.ts

@@ -1,6 +1,6 @@
 import { OnChanges, SimpleChanges } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class NgvTypeaheadHighlightComponent implements OnChanges {
+export declare class NggvTypeaheadHighlightComponent implements OnChanges {
     /** The text that is displayed in the dropdown list */
     textContent?: string;
     /** The substring that should be highlighted within textContent */
@@ -29,6 +29,6 @@ export declare class NgvTypeaheadHighlightComponent implements OnChanges {
      * @returns { start: number, end: number } Indexes of where the match starts and ends in the text displatyed
      */
     private getHighlightedPart;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvTypeaheadHighlightComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvTypeaheadHighlightComponent, "nggv-typeahead-highlight", never, { "textContent": { "alias": "textContent"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTypeaheadHighlightComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvTypeaheadHighlightComponent, "nggv-typeahead-highlight", never, { "textContent": { "alias": "textContent"; "required": false; }; "textToHighlight": { "alias": "textToHighlight"; "required": false; }; }, {}, never, never, false, never>;
 }

package/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.d.ts

@@ -2,17 +2,17 @@ import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit, Renderer2 } from '@an
 import { NgControl } from '@angular/forms';
 import { TranslocoScope } from '@jsverse/transloco';
 import { OptionBase } from '@sebgroup/green-angular/src/v-angular/core';
-import { NgvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
-import { NgvDropdownComponent } from '../../dropdown.component';
+import { NggvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
+import { NggvDropdownComponent } from '../../dropdown.component';
 import * as i0 from "@angular/core";
-export declare class NgvTypeaheadInputComponent extends NgvInputComponent implements OnInit, OnDestroy {
+export declare class NggvTypeaheadInputComponent extends NggvInputComponent implements OnInit, OnDestroy {
     private element;
     private renderer2;
     ngControl: NgControl;
     protected translocoScope: TranslocoScope;
     protected cdr: ChangeDetectorRef;
     /** Reference to the host dropdown */
-    hostComponent: NgvDropdownComponent;
+    hostComponent: NggvDropdownComponent;
     /** Formats each item that is displayed as an option. Only applies format if the option if it implement Option interface. */
     resultFormatter?: (option: OptionBase<any>) => string;
     /** Formats the selected item in the input when dropdown is opened. If no function is provided, it will display the value of the selected objects label property */
@@ -22,6 +22,8 @@ export declare class NgvTypeaheadInputComponent extends NgvInputComponent implem
     expanded: boolean;
     /** Used to determine the height of the inputin html */
     buttonHeight?: number;
+    /** @internal Used to determine wether the input has been moved or not */
+    inputMoved: boolean;
     constructor(element: ElementRef, renderer2: Renderer2, ngControl: NgControl, translocoScope: TranslocoScope, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     /**
@@ -54,6 +56,6 @@ export declare class NgvTypeaheadInputComponent extends NgvInputComponent implem
      * @param input
      */
     private setInput;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvTypeaheadInputComponent, [null, null, { optional: true; self: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvTypeaheadInputComponent, "nggv-typeahead-input", never, { "hostComponent": { "alias": "hostComponent"; "required": false; }; "resultFormatter": { "alias": "resultFormatter"; "required": false; }; "selectedFormatter": { "alias": "selectedFormatter"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTypeaheadInputComponent, [null, null, { optional: true; self: true; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvTypeaheadInputComponent, "nggv-typeahead-input", never, { "hostComponent": { "alias": "hostComponent"; "required": false; }; "resultFormatter": { "alias": "resultFormatter"; "required": false; }; "selectedFormatter": { "alias": "selectedFormatter"; "required": false; }; }, {}, never, never, false, never>;
 }

package/src/v-angular/dropdown/typeahead/typeahead.directive.d.ts

@@ -1,12 +1,12 @@
 import { ComponentRef, ElementRef, EventEmitter, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import { OperatorFunction } from 'rxjs';
 import { Option, OptionBase } from '@sebgroup/green-angular/src/v-angular/core';
-import { NgvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
-import { NgvDropdownComponent } from '../dropdown.component';
-import { NgvTypeaheadDropdownListComponent } from '../typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component';
-import { NgvTypeaheadInputComponent } from './typeahead-input/typeahead-input.component';
+import { NggvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
+import { NggvDropdownComponent } from '../dropdown.component';
+import { NggvTypeaheadDropdownListComponent } from '../typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component';
+import { NggvTypeaheadInputComponent } from './typeahead-input/typeahead-input.component';
 import * as i0 from "@angular/core";
-export declare class NgvTypeaheadDirective<K = string | null | undefined, V = string | null | undefined, T extends Option<K, V> = Option<K, V>> implements OnInit, OnDestroy {
+export declare class NggvTypeaheadDirective<K = string | null | undefined, V = string | null | undefined, T extends Option<K, V> = Option<K, V>> implements OnInit, OnDestroy {
     private viewContainerRef;
     private element;
     private hostDropdown;
@@ -21,24 +21,26 @@ export declare class NgvTypeaheadDirective<K = string | null | undefined, V = st
     allowUnselect: boolean;
     /** Custom label for the unselect option */
     unselectLabel?: string;
+    /** Custom label for the empty option */
+    emptyOptionLabel?: string;
     /** Emits the entered string the user has written in the input */
     filterPhraseChange: EventEmitter<string>;
     /** Forward text inputs to apply the filter function*/
-    onNgvInput(event: any): void;
+    onNggvInput(event: any): void;
     /** Helper to the determine if the host is nggv-drodpown or nggv-input*/
     get hostIsDropdown(): boolean;
     /** Predefined options */
     get defaultNullishOption(): OptionBase<any>;
     get emptyOption(): OptionBase<any>;
-    /** Name of the component. nggv-dropdown if NgvDropdownComponent or nggv-input if NgvInputComponent */
+    /** Name of the component. nggv-dropdown if NggvDropdownComponent or nggv-input if NggvInputComponent */
     get localName(): any;
-    dropdownListComponent: ComponentRef<NgvTypeaheadDropdownListComponent>;
-    inputComponent: ComponentRef<NgvTypeaheadInputComponent>;
+    dropdownListComponent: ComponentRef<NggvTypeaheadDropdownListComponent>;
+    inputComponent: ComponentRef<NggvTypeaheadInputComponent>;
     private typeaheadFunction?;
     private inputValue$;
     private inputSubscription$?;
     private onDestroy$;
-    constructor(viewContainerRef: ViewContainerRef, element: ElementRef, hostDropdown: NgvDropdownComponent, hostInput: NgvInputComponent);
+    constructor(viewContainerRef: ViewContainerRef, element: ElementRef, hostDropdown: NggvDropdownComponent, hostInput: NggvInputComponent);
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
@@ -71,6 +73,6 @@ export declare class NgvTypeaheadDirective<K = string | null | undefined, V = st
      * @returns The formatted value
      */
     private formatOptions;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvTypeaheadDirective<any, any, any>, [null, null, { optional: true; host: true; }, { optional: true; host: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgvTypeaheadDirective<any, any, any>, "nggv-input[nggvTypeahead], nggv-dropdown[nggvTypeahead]", never, { "nggvTypeahead": { "alias": "nggvTypeahead"; "required": false; }; "resultFormatter": { "alias": "resultFormatter"; "required": false; }; "selectedFormatter": { "alias": "selectedFormatter"; "required": false; }; "allowUnselect": { "alias": "allowUnselect"; "required": false; }; "unselectLabel": { "alias": "unselectLabel"; "required": false; }; }, { "filterPhraseChange": "filterPhraseChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTypeaheadDirective<any, any, any>, [null, null, { optional: true; host: true; }, { optional: true; host: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NggvTypeaheadDirective<any, any, any>, "nggv-input[nggvTypeahead], nggv-dropdown[nggvTypeahead]", never, { "nggvTypeahead": { "alias": "nggvTypeahead"; "required": false; }; "resultFormatter": { "alias": "resultFormatter"; "required": false; }; "selectedFormatter": { "alias": "selectedFormatter"; "required": false; }; "allowUnselect": { "alias": "allowUnselect"; "required": false; }; "unselectLabel": { "alias": "unselectLabel"; "required": false; }; "emptyOptionLabel": { "alias": "emptyOptionLabel"; "required": false; }; }, { "filterPhraseChange": "filterPhraseChange"; }, never, never, true, never>;
 }

package/src/v-angular/dropdown/typeahead/typeahead.module.d.ts

@@ -4,8 +4,8 @@ import * as i2 from "./typeahead-input/typeahead-input.component";
 import * as i3 from "./typeahead-dropdown-list/typeahead-dropdown-list.component";
 import * as i4 from "@angular/common";
 import * as i5 from "@sebgroup/green-angular/src/v-angular/tooltip";
-export declare class NgvTypeaheadModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvTypeaheadModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgvTypeaheadModule, [typeof i1.NgvTypeaheadHighlightComponent, typeof i2.NgvTypeaheadInputComponent, typeof i3.NgvTypeaheadDropdownListComponent], [typeof i4.CommonModule, typeof i5.NgvTooltipModule], [typeof i1.NgvTypeaheadHighlightComponent, typeof i2.NgvTypeaheadInputComponent, typeof i3.NgvTypeaheadDropdownListComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NgvTypeaheadModule>;
+export declare class NggvTypeaheadModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTypeaheadModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvTypeaheadModule, [typeof i1.NggvTypeaheadHighlightComponent, typeof i2.NggvTypeaheadInputComponent, typeof i3.NggvTypeaheadDropdownListComponent], [typeof i4.CommonModule, typeof i5.NggvTooltipModule], [typeof i1.NggvTypeaheadHighlightComponent, typeof i2.NggvTypeaheadInputComponent, typeof i3.NggvTypeaheadDropdownListComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvTypeaheadModule>;
 }

package/src/v-angular/external-link/external-link.directive.d.ts

@@ -2,7 +2,7 @@ import { OnInit } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import * as i0 from "@angular/core";
 /** Directive overrides routerLink attribute to allow external links. */
-export declare class NgvExternalLinkDirective implements OnInit {
+export declare class NggvExternalLinkDirective implements OnInit {
     protected link: RouterLink;
     /** If set to true, links will trigger a location change rather than an internal history push. */
     external: boolean;
@@ -12,6 +12,6 @@ export declare class NgvExternalLinkDirective implements OnInit {
      */
     constructor(link: RouterLink);
     ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvExternalLinkDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgvExternalLinkDirective, "a[routerLink]", never, { "external": { "alias": "external"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvExternalLinkDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NggvExternalLinkDirective, "a[routerLink]", never, { "external": { "alias": "external"; "required": false; }; }, {}, never, never, false, never>;
 }

package/src/v-angular/external-link/external-link.module.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./external-link.directive";
 import * as i2 from "@angular/common";
-export declare class NgvExternalLinkDirectiveModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvExternalLinkDirectiveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgvExternalLinkDirectiveModule, [typeof i1.NgvExternalLinkDirective], [typeof i2.CommonModule], [typeof i1.NgvExternalLinkDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NgvExternalLinkDirectiveModule>;
+export declare class NggvExternalLinkDirectiveModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvExternalLinkDirectiveModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvExternalLinkDirectiveModule, [typeof i1.NggvExternalLinkDirective], [typeof i2.CommonModule], [typeof i1.NggvExternalLinkDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvExternalLinkDirectiveModule>;
 }

package/src/v-angular/i18n/i18n.module.d.ts

@@ -1,15 +1,15 @@
 import { HashMap, TranslocoMissingHandler, TranslocoMissingHandlerData, TranslocoTranspiler } from '@jsverse/transloco';
 import * as i0 from "@angular/core";
 import * as i1 from "@jsverse/transloco";
-export declare class NgvMissingHandler implements TranslocoMissingHandler {
+export declare class NggvMissingHandler implements TranslocoMissingHandler {
     private transpiler;
     constructor(transpiler: TranslocoTranspiler);
     handle(key: string, _: TranslocoMissingHandlerData, params: HashMap): any;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvMissingHandler, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<NgvMissingHandler>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvMissingHandler, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NggvMissingHandler>;
 }
-export declare class NgvI18nModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvI18nModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgvI18nModule, never, never, [typeof i1.TranslocoModule]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NgvI18nModule>;
+export declare class NggvI18nModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvI18nModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvI18nModule, never, never, [typeof i1.TranslocoModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvI18nModule>;
 }