@sebgroup/green-angular 5.1.2 → 5.2.0

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

@@ -0,0 +1,229 @@
+import { AfterContentInit, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { Subscription } from 'rxjs';
+import { TableAppendableRowsTemplateDirective, TableFooterTemplateDirective, TableTemplateDirective } from './table.directive';
+import { ariaLabelsOrderBy, OrderBy, TableColumn, TableRow } from './table.models';
+import * as i0 from "@angular/core";
+/**
+ * A table component with built-in sorting and selecting functionality.
+ * By default, table cells (i.e. `<td>` elements) and table headers (i.e. `<th>` elements) are populated with text only values.
+ *
+ * To customize the contents of either the `<td>` or `<th>` elements (like adding color, icons, form fields, extra padding etc.), provide
+ * the customized content within a `<ng-template>`-tag, and place the ng-template in the html between the start and ending tag of
+ * the `<nggv-table>`. Add a `tableColumn`-attribute to the `<ng-template>`-element, and set the value to the specific column property.
+ * Set `tableColumnTarget` to either `th`, `td` or `both` (default) depending on target element type.
+ * The entire row from the `@Input() tableData` is available from the context `$implicit` variable.
+ *
+ * @example
+ * <!-- for table cells i.e. td-elements -->
+ * <ng-template tableColumn="status" tableColumnTarget="td" let-myDataVar="$implicit" let-status="$implicit.status">
+ *  <!-- my custom status element -->
+ * </ng-template>
+ *
+ * @example
+ * <!-- for table headers i.e. th-elements -->
+ * <ng-template tableColumn="status" tableColumnTarget="th" let-myDataVar="$implicit" let-status="$implicit.status">
+ *  <!-- my custom status element -->
+ * </ng-template>
+ *
+ * It is possible to add custom rows that are appended below data row. Use `<ng-template>`-tag and place the ng-template in the html between the start and ending tag of
+ * the `<nggv-table>`. Add a `tableAppendableRows`-attribute to the `<ng-template>`-element. Any `tr` elements that exist within `<ng-template tableAppendableRows>` and `</ng-template>` tags will be put below data row's `tr` element in the table.
+ *
+ * @example
+ * <!-- custom appended rows -->
+ * <ng-template tableAppendableRows let-myDataVar="$implicit" let-status="$implicit.status">
+ *  <tr>
+ *   <!-- first row's columns -->
+ *  </tr>
+ *  <!-- more rows if needed -->
+ * </ng-template>
+ *
+ * If custom styling is needed for data row that has appended rows, you can use data attribute `data-hasrowspan` to distinguish it from data row without appended rows.
+ * You can pass your own custom method with conditional logic to define what value will be passed to data-hasrowspan.
+ * In addition, hasRowSpan function accepts item from `@Input() tableData` as argument which is of the same type as value passed to context `$implicit` variable.
+ * IMPORTANT: use arrow function style for defining function inside component, i.e. `hasRowSpan = (value) => output;`. If regular function will be defined, i.e. `hasRowSpan(value) { return output; }`, binding will not work.
+ *
+ * @example
+ * <!-- inside component
+ * class CustomComponent {
+ *  customHasRowSpanFunction = (item: CustomDataType) => item.appendedRowsData.length > 0 ? true : false;
+ * }
+ * -->
+ * <!-- inside stylesheets
+ * [data-hasrowspan="true"] {
+ *  color: blue;
+ * }
+ * .appended-row {
+ *  color: blue;
+ * }
+ * -->
+ * <nggv-table [hasRowSpan]="customHasRowSpanFunction">
+ *  <!-- custom appended rows -->
+ *  <ng-template tableAppendableRows let-appendedRowsData="$implicit.appendedRowsData">
+ *   <tr *ngFor="let appendedRowItem of appendedRowsData" class="appended-row">
+ *    <td>{{ appendedRowItem }}</td>
+ *    <!-- other row's columns -->
+ *   </tr>
+ *  </ng-template>
+ * </nggv-table>
+ *
+ * In addition, it is possible to add footer for the table. Similarly to adding custom columns, use `<ng-template>`-tag and place the ng-template in the html between the start and ending tag of
+ * the `<nggv-table>`. Add a `tableFooter`-attribute to the `<ng-template>`-element. Any elements that exist within `<ng-template tableFooter>` and `</ng-template>` tags will be put to tfoot element inside the table.
+ *
+ * @example
+ * <!-- for table footer i.e. tfoot-element -->
+ * <ng-template tableFooter>
+ *  <tr>
+ *   <!-- first row's columns -->
+ *  </tr>
+ *  <!-- more rows if needed -->
+ * </ng-template>
+ *
+ */
+export declare class TableComponent<T extends TableRow> implements OnInit, OnChanges, AfterContentInit, OnDestroy {
+    /**
+     * @internal
+     * Custom templates defined in the html.
+     */
+    customTemplates: QueryList<TableTemplateDirective<keyof T>>;
+    /**
+     * @internal
+     * Custom appended rows template defined in the html.
+     */
+    appendedRowsTemplate: TableAppendableRowsTemplateDirective;
+    /**
+     * @internal
+     * Custom footer template defined in the html.
+     */
+    customFooterTemplate: TableFooterTemplateDirective;
+    /** Emits the table row that was clicked. Works on all columns if not preventDefaultEmit is set for that column. */
+    ngvRowClick: EventEmitter<any>;
+    /**
+     * Emits currently selected and deselected items in the table as key-value pairs.
+     * Uses each item`s itemId as key, and a boolean value to describe selected status.
+     */
+    ngvRowSelect: EventEmitter<string[]>;
+    /**
+     * Emits event to signal that the table should be reordered.
+     */
+    ngvOrderBy: EventEmitter<OrderBy<T>>;
+    /**
+     * An array of items describing how the table header should be rendered,
+     * together with instructions for how each row should be displayed in that column.
+     */
+    tableColumns: TableColumn<T>[];
+    /** Data array to display data in the table. Each item <T> in the array represents a row in the table. */
+    tableData: T[];
+    /**
+     * Property name used to uniquely describe each item (i.e. row) in the data table.
+     * Defaults to \'id\'.
+     * Is required if selectable is true.
+     */
+    rowId: string;
+    /**
+     * Function's return value is used for data attribute \'data-hasrowspan\'.
+     * If custom hasRowSpan function is not passed to the table,
+     * then this function returns undefined value by default which results in \'data-hasrowspan\' attribute being omitted in html
+     * (angular omits attributes that contain null or undefined value).
+     * IMPORTANT: use arrow function style for defining function inside component, i.e. `hasRowSpan = (value) => output;`. If regular function will be defined, i.e. `hasRowSpan(value) { return output; }`, binding will not work.
+     */
+    hasRowSpan: (item: T) => any;
+    /**
+     * Used to enable/disable the left-side checkbox column.
+     * Defaults to true.
+     */
+    selectable: boolean;
+    /**
+     * Allow nggv-table to attempt sorting the data in the table. Not recommended if only a subset is loaded or if the dataset is very large.
+     * Disabled by default.
+     */
+    allowLocalSort: boolean;
+    /** Special property used for selecting DOM elements during automated UI testing. */
+    thook: string;
+    /** Function to overwrite generated thook for each row. */
+    trThookFn?: (item: T) => string;
+    /** Aria label for the checkbox in the table header */
+    ariaLabelCheckboxTh?: string;
+    /** Aria label for the checkbox in the table header */
+    ariaLabelCheckboxTr?: string;
+    /** Aria labels for sorting in the table header */
+    ariaLabelsOrderBy?: ariaLabelsOrderBy;
+    /**
+     * @internal
+     * Internal data structure used to keep track of added content templates used in td elements.
+     */
+    customRowTemplates: Map<keyof T, TemplateRef<any>>;
+    /**
+     * @internal
+     * Internal data structure used to keep track of added content templates used in th elements.
+     */
+    customHeaderTemplates: Map<keyof T, TemplateRef<any>>;
+    /**
+     * @internal
+     * Internal data structure used to hold custom appended rows i.e. tr elements (rows).
+     */
+    appendedRowsTemplateRef: TemplateRef<any>;
+    /**
+     * @internal
+     * Internal data structure used to hold tfoot element children i.e. tr elements (rows).
+     */
+    customFooterTemplateRef: TemplateRef<any>;
+    /**
+     * @internal
+     * Incremental id.
+     */
+    initId: number;
+    /**
+     * @internal
+     * FormGroup containing all row id\'s as controls, and whether these are selected or not as values.
+     */
+    rowSelectors: UntypedFormGroup;
+    /**
+     * @internal
+     * Master selector for selecting or deselecting all row selectors.
+     */
+    groupSelector: UntypedFormControl;
+    private selected;
+    private subs;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * @internal
+     * Returns a subscription to the master selector control that either selects or deselects all row controls.
+     */
+    get groupValueSubscription(): Subscription;
+    /**
+     * @internal
+     * Returns a subscription to all individual row selectors and update the master selector if all are selected.
+     */
+    get rowValueSubscription(): Subscription;
+    /**
+     * @internal
+     * Registers or disables row controls for new or removed rows.
+     */
+    registerSelectableRows(tableData: any[]): boolean;
+    /**
+     * @internal
+     * Returns all enabled values unless all rows are disabled.
+     */
+    get rowSelectorsValue(): any;
+    toggleSortOrderWithSpace(event: any, column: TableColumn<T>): void;
+    /**
+     * @internal
+     * Switches sorting order between ascending and descending order for a column.
+     * @param column the column to sort rows after.
+     */
+    toggleSortOrder(column: TableColumn<T>): void;
+    /** If sortable, reorders the table data using the specified column as ordering attribute. */
+    sortItemsBy(column: TableColumn<T>): TableRow[] | undefined;
+    /**
+     * @internal
+     * Emits row data for what row was clicked if defaultEmit is allowed.
+     */
+    propagateItemClick(item: any, preventDefaultEmit?: boolean): void;
+    getAriaLabel(column: TableColumn<T>): string | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "nggv-table", never, { "tableColumns": { "alias": "tableColumns"; "required": false; }; "tableData": { "alias": "tableData"; "required": false; }; "rowId": { "alias": "rowId"; "required": false; }; "hasRowSpan": { "alias": "hasRowSpan"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "allowLocalSort": { "alias": "allowLocalSort"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "trThookFn": { "alias": "trThookFn"; "required": false; }; "ariaLabelCheckboxTh": { "alias": "ariaLabelCheckboxTh"; "required": false; }; "ariaLabelCheckboxTr": { "alias": "ariaLabelCheckboxTr"; "required": false; }; "ariaLabelsOrderBy": { "alias": "ariaLabelsOrderBy"; "required": false; }; }, { "ngvRowClick": "ngvRowClick"; "ngvRowSelect": "ngvRowSelect"; "ngvOrderBy": "ngvOrderBy"; }, ["appendedRowsTemplate", "customFooterTemplate", "customTemplates"], never, false, never>;
+}

package/src/v-angular/table/table.directive.d.ts

@@ -0,0 +1,36 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TableDirective {
+    columnType: 'numeric' | 'text' | undefined;
+    sortable?: boolean;
+    sortOrder?: 'desc' | 'asc';
+    value: any;
+    thook: string | null | undefined;
+    get numericColumn(): boolean;
+    get isSortable(): boolean;
+    get orderAscending(): boolean;
+    get orderDescending(): boolean;
+    get negativeValue(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableDirective, "[columnType]", never, { "columnType": { "alias": "columnType"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "sortOrder": { "alias": "sortOrder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare class TableTemplateDirective<K = string> {
+    templateRef: TemplateRef<any>;
+    tableColumn: K;
+    tableColumnTarget?: 'th' | 'td' | 'both';
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableTemplateDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableTemplateDirective<any>, "[tableColumn]", never, { "tableColumn": { "alias": "tableColumn"; "required": false; }; "tableColumnTarget": { "alias": "tableColumnTarget"; "required": false; }; }, {}, never, never, false, never>;
+}
+export declare class TableFooterTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableFooterTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableFooterTemplateDirective, "[tableFooter]", never, {}, {}, never, never, false, never>;
+}
+export declare class TableAppendableRowsTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableAppendableRowsTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TableAppendableRowsTemplateDirective, "[tableAppendableRows]", never, {}, {}, never, never, false, never>;
+}

package/src/v-angular/table/table.models.d.ts

@@ -0,0 +1,62 @@
+export type SortingOrder = 'asc' | 'desc';
+export type ColumnType = 'numeric' | 'text';
+/** Generic type for TableRow data */
+export type TableRow = Record<string, any>;
+/** Options applying to the table header */
+export interface TableHeaderOptions {
+    /**
+     * Defined the text displayed in the table header.
+     * @example <th> {{TableColumn.label}} </th>
+     */
+    label?: string;
+    /** Adjusts text-alignment. */
+    valueType?: ColumnType;
+    /**
+     * Defines whether the table data can be ordered using this column.
+     * Setting this to false (or omitting it) will also remove the caret sorting symbol in specified column.
+     */
+    sortable?: boolean;
+    /**
+     * Defined aria label for a sortable column for the screen reader users.
+     */
+    ariaLabelSortable?: string;
+    /**
+     * Describes the sorting order of the column.
+     * As the table can only be sorted based on one column property, if the property is not undefined,
+     * it will instruct the table to sort the data based on this specific column.
+     */
+    order?: SortingOrder;
+}
+/** Options applying to table rows */
+export interface TableRowOptions {
+    /** Adjusts text-alignment. */
+    valueType?: ColumnType;
+    /** Used to prevent the default click event to be emitted when clicking in cells for specified column */
+    preventDefaultClickEvent?: boolean;
+}
+/**
+ * Interface used to describe how a table column should be displayed. This includes the text and class used for the table header,
+ * and the data for each table row.
+ */
+export interface TableColumn<T extends TableRow> extends TableHeaderOptions, TableRowOptions {
+    /**
+     * The property name used to identify what value to display in a cell for that column.
+     * @example <tr *ngFor="let data in dataList"> <td>{{ data[TableColumn.property] }}</td> </tr>
+     */
+    property: keyof T;
+}
+/**
+ * Interface describing event emitted on reordering the table.
+ */
+export interface OrderBy<T extends TableRow> {
+    property: keyof T;
+    order: SortingOrder | undefined;
+}
+/**
+ * Interface describing the aria labels for sorting in the table.
+ * Aria label attributes are used for a screen reader to describe the sorting state of the table.
+ */
+export interface ariaLabelsOrderBy {
+    asc: string;
+    desc: string;
+}

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

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./table.component";
+import * as i2 from "./table.directive";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/forms";
+import * as i5 from "@jsverse/transloco";
+import * as i6 from "./tr-thook.pipe";
+export declare class NggvTableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvTableModule, [typeof i1.TableComponent, typeof i2.TableDirective, typeof i2.TableTemplateDirective, typeof i2.TableFooterTemplateDirective, typeof i2.TableAppendableRowsTemplateDirective], [typeof i3.CommonModule, typeof i4.ReactiveFormsModule, typeof i5.TranslocoModule, typeof i6.TrThookPipe], [typeof i1.TableComponent, typeof i2.TableTemplateDirective, typeof i2.TableFooterTemplateDirective, typeof i2.TableAppendableRowsTemplateDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvTableModule>;
+}

package/src/v-angular/table/table.tools.d.ts

@@ -0,0 +1,5 @@
+export declare const pick: (propertyArray: Array<string>, object: {
+    [key: string]: unknown;
+}) => object;
+export declare const orderByDescending: <T>(property: keyof T | string) => ((a: any, b: any) => number);
+export declare const orderByAscending: <T>(property: keyof T | string) => ((a: any, b: any) => number);

package/src/v-angular/table/tr-thook.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TrThookPipe implements PipeTransform {
+    transform<V>(value: V, index: number, thookFn?: (rowData: V) => string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TrThookPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TrThookPipe, "trThook", true>;
+}

package/src/v-angular/tabs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './tab.directive';
+export * from './tabs.component';
+export * from './tabs.models';
+export * from './tabs.module';

package/src/v-angular/tabs/tab.directive.d.ts

@@ -0,0 +1,37 @@
+import * as i0 from "@angular/core";
+/**
+ * Directive that provides the tab container with data about its child tabs.
+ * The directive sets its own active state and adds aria attributes.
+ *
+ * @example
+ * <nggv-tabs>
+ *     <article tab="Tab title 1"> <!-- Content --> </article>
+ *     <article tab="Tab title 2" [active]="true"> <!-- Content --> </article>
+ *     <article tab="Tab title 3" disabled> <!-- Content --> </article>
+ *     <article tab="<strong>Tab title 4</strong>"> <!-- Content --> </article>
+ * </nggv-tabs>
+ */
+export declare class TabDirective {
+    /** @internal */
+    baseClass: boolean;
+    /** @internal */
+    role: string;
+    /** Special property used for selecting DOM elements during automated UI testing. */
+    thook: string | null | undefined;
+    /** Sets whether this tab should be the active tab on load. */
+    active: boolean;
+    /** @internal */
+    get hidden(): boolean;
+    /** Sets the title displayed in the tab list for this child. */
+    tab: string;
+    /** Sets whether this tab should be able to be selected. */
+    disabled: boolean;
+    /** Identifier used for aria attributes and selection. */
+    id: string | number | undefined;
+    /** @internal */
+    get attrId(): string;
+    /** @internal */
+    get ariaLabelledby(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TabDirective, "[tab]", never, { "thook": { "alias": "thook"; "required": false; }; "active": { "alias": "active"; "required": false; }; "tab": { "alias": "tab"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, {}, never, never, false, never>;
+}

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

@@ -0,0 +1,65 @@
+import { AfterContentInit, EventEmitter, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { TabDirective } from './tab.directive';
+import { EventTabChange, Tab } from './tabs.models';
+import * as i0 from "@angular/core";
+export declare class TabsComponent implements OnChanges, OnInit, AfterContentInit, OnDestroy {
+    protected router: Router;
+    /** @internal */
+    baseClass: boolean;
+    /** Special property used for selecting DOM elements during automated UI testing. */
+    thook: string | null | undefined;
+    /** @internal List of children with a {@link TabDirective}. */
+    tabRefs: QueryList<TabDirective>;
+    /**
+     * List of tabs to generate, this should not be used in conjunction with children that have a {@link TabDirective}.
+     * It is useful for generating a list of tabs with links for navigation.
+     * If any tab has the link property, a `<router-outlet>` is added below the tabs list.
+     */
+    tabs: Tab[];
+    /**
+     * Event triggered on initialization and every time the active tab changes.
+     * The tab change can be cancelled if event type is set to `'before'` and `cancel()` is called.
+     */
+    ngvTabSwitch: EventEmitter<EventTabChange>;
+    /** @internal Adds a `<router-outlet>` below the tabs list. */
+    useRouting: boolean;
+    /** @internal The currently active tab. */
+    selectedTab: Tab | undefined;
+    /** @internal If tab switching has started. */
+    isSwitching: boolean;
+    /** @internal */
+    protected subs: Subscription[];
+    constructor(router: Router);
+    /** @internal */
+    static uniqueIds(tabs: Tab[]): {
+        tab: string;
+        id?: string | number | undefined;
+        thook?: string | undefined;
+        active?: boolean | undefined;
+        disabled?: boolean | undefined;
+        link?: string | undefined;
+        directive?: TabDirective | undefined;
+    }[];
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    /** @internal */
+    protected updateFromInput: () => void;
+    /** @internal */
+    protected updateFromReferences: () => void;
+    /** @internal */
+    protected updateTabs(): void;
+    ngOnDestroy(): void;
+    /** @internal */
+    protected activateTab(tab: Tab): void;
+    /** @internal */
+    onSelect(id: string | number | undefined): void;
+    /** @internal */
+    onKeyDown(event: KeyboardEvent): boolean;
+    /** @internal */
+    protected tabFocusHelper(event: KeyboardEvent, tabElement: HTMLElement): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "nggv-tabs", never, { "thook": { "alias": "thook"; "required": false; }; "tabs": { "alias": "tabs"; "required": false; }; }, { "ngvTabSwitch": "ngvTabSwitch"; }, ["tabRefs"], ["*"], false, never>;
+}

package/src/v-angular/tabs/tabs.models.d.ts

@@ -0,0 +1,25 @@
+import { TabDirective } from './tab.directive';
+export interface Tab {
+    /** Sets the title displayed in the tab list for this child. */
+    tab: string;
+    id?: string | number;
+    thook?: string;
+    active?: boolean;
+    disabled?: boolean;
+    link?: string;
+    directive?: TabDirective;
+}
+export type EventTabChange = {
+    type: 'start';
+    prev: Tab | undefined;
+    next: Tab;
+    cancel: () => void;
+} | {
+    type: 'cancel';
+    prev: Tab | undefined;
+    next: Tab;
+} | {
+    type: 'end';
+    prev: Tab | undefined;
+    next: Tab;
+};

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

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./tab.directive";
+import * as i2 from "./tabs.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@jsverse/transloco";
+import * as i5 from "@angular/router";
+export declare class NggvTabsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTabsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvTabsModule, [typeof i1.TabDirective, typeof i2.TabsComponent], [typeof i3.CommonModule, typeof i4.TranslocoModule, typeof i5.RouterModule], [typeof i1.TabDirective, typeof i2.TabsComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvTabsModule>;
+}

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

@@ -1,15 +1,16 @@
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
 import { ChangeDetectorRef } 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 * as i0 from "@angular/core";
 /** Textarea fields allow users to add and edit longer or multiple line text. */
-export declare class NgvTextareaComponent extends NgvBaseControlValueAccessorComponent {
+export declare class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent {
     ngControl: NgControl;
     protected translocoScope: TranslocoScope;
     protected cdr: ChangeDetectorRef;
     /** Special property used for selecting DOM elements during automated UI testing. */
-    thook: string;
+    thook: string | null | undefined;
     /** Text shown before input has a written value. */
     placeholder?: string;
     /** If set to true, the value will not be editable. */
@@ -39,6 +40,6 @@ export declare class NgvTextareaComponent extends NgvBaseControlValueAccessorCom
     constructor(ngControl: NgControl, translocoScope: TranslocoScope, cdr: ChangeDetectorRef);
     /** @internal */
     onInput(event: Event): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvTextareaComponent, [{ optional: true; self: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvTextareaComponent, "nggv-textarea", never, { "thook": { "alias": "thook"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTextareaComponent, [{ optional: true; self: true; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvTextareaComponent, "nggv-textarea", never, { "thook": { "alias": "thook"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -1,10 +1,12 @@
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
 import * as i0 from "@angular/core";
 import * as i1 from "./textarea.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@sebgroup/green-angular/src/v-angular/i18n";
 import * as i4 from "@sebgroup/green-angular/src/v-angular/character-countdown";
-export declare class NgvTextareaModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvTextareaModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgvTextareaModule, [typeof i1.NgvTextareaComponent], [typeof i2.CommonModule, typeof i3.NgvI18nModule, typeof i4.NggCharacterCountdownDirectiveModule], [typeof i1.NgvTextareaComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NgvTextareaModule>;
+import * as i5 from "@sebgroup/green-angular/src/lib/shared";
+export declare class NggvTextareaModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvTextareaModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvTextareaModule, [typeof i1.NggvTextareaComponent], [typeof i2.CommonModule, typeof i3.NggvI18nModule, typeof i4.NggvCharacterCountdownDirectiveModule, typeof i5.NggCoreWrapperModule], [typeof i1.NggvTextareaComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvTextareaModule>;
 }

package/src/v-angular/toast/index.d.ts

@@ -0,0 +1,4 @@
+export * from './toast-message.service';
+export * from './toast.component';
+export * from './toast.models';
+export * from './toast.module';

package/src/v-angular/toast/toast-message.service.d.ts

@@ -0,0 +1,17 @@
+import { Observable } from 'rxjs';
+import { ToastMessage } from './toast.models';
+import * as i0 from "@angular/core";
+export declare class ToastMessageService {
+    private messages;
+    private messageSubject;
+    addMessage(type: 'success' | 'information' | 'error' | 'warning', translocoScope: string, titleText: string, bodyText?: string, timeout?: number): void;
+    removeMessage(message: ToastMessage): void;
+    pauseMessageTimeout(message: ToastMessage): void;
+    resumeMessageTimeout(message: ToastMessage): void;
+    getMessages(): Observable<ToastMessage[]>;
+    private getDuplicateMessageIndex;
+    private removeMessageByIndex;
+    private setMessageRemoveTimeout;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastMessageService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToastMessageService>;
+}

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

@@ -0,0 +1,22 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { ToastMessageService } from './toast-message.service';
+import { ToastMessage } from './toast.models';
+import '@sebgroup/green-core/components/icon/icons/cross-small.js';
+import '@sebgroup/green-core/components/icon/icons/checkmark.js';
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
+import '@sebgroup/green-core/components/icon/icons/circle-info.js';
+import * as i0 from "@angular/core";
+export declare class ToastComponent implements OnInit, OnDestroy {
+    private toastMessageService;
+    closeButtonAriaLabel?: string;
+    private toastMessagesSubscription;
+    messages: ToastMessage[];
+    constructor(toastMessageService: ToastMessageService);
+    ngOnInit(): void;
+    onMouseEnter(message: ToastMessage): void;
+    onMouseLeave(message: ToastMessage): void;
+    removeMessage(message: ToastMessage): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "nggv-toast", never, { "closeButtonAriaLabel": { "alias": "closeButtonAriaLabel"; "required": false; }; }, {}, never, never, false, never>;
+}

package/src/v-angular/toast/toast.models.d.ts

@@ -0,0 +1,15 @@
+export interface ToastMessage {
+    type: MessageType;
+    translocoScope: string;
+    titleText: string;
+    bodyText?: string;
+    timeout?: number;
+    timeoutId?: number;
+    timeoutStartTime?: number;
+}
+export declare enum MessageType {
+    Success = "success",
+    Information = "information",
+    Error = "error",
+    Warning = "warning"
+}

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./toast.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@jsverse/transloco";
+import * as i4 from "@sebgroup/green-angular/src/lib/shared";
+export declare class NggvToastModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvToastModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvToastModule, [typeof i1.ToastComponent], [typeof i2.CommonModule, typeof i3.TranslocoModule, typeof i4.NggCoreWrapperModule], [typeof i1.ToastComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvToastModule>;
+}