@sebgroup/green-angular 5.1.2 → 5.3.0

package/v-angular/modal/fold-out/fold-out.component.d.ts

@@ -1,24 +1,47 @@
-import { ElementRef, OnDestroy } from '@angular/core';
+import { AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
 import '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js';
-import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class NgvFoldOutComponent implements OnDestroy {
+export declare class NggvFoldOutComponent implements OnDestroy, AfterViewInit {
     /** Special property used for selecting DOM elements during automated UI testing. */
-    thook: string;
+    thook: string | null | undefined;
     inputRef?: ElementRef;
+    container?: ElementRef;
     /** Aligns the dropdown list with the buttons right or left side */
     alignOptions: 'left' | 'right';
-    onClickSubscription: Subscription | undefined;
+    /** Option to show text with action button */
+    text?: string;
+    /** Aria label for the fold-out button */
+    ariaLabel?: string;
     /** @internal */
-    shown: boolean;
-    constructor();
+    protected shown: boolean;
+    private activeIndex;
+    private firstArrowClick;
+    private ariaFocusAttributeName;
+    private blurAllElements;
+    private blurElement;
+    private focusElement;
+    private getChildIndex;
+    private onClickSubscription;
+    private onKeyUpSubscription;
+    private get children();
+    private get lastChild();
+    private get focusedElement();
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Toggle display of the option list */
-    toggleVisibility(event?: Event, setVisibility?: boolean): void;
+    toggleVisibility(): void;
+    setVisibility(setVisibility?: boolean): void;
     /**
      * Closes the fold-out on click outside.
      */
-    subscribeToOutsideClickEvent(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvFoldOutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvFoldOutComponent, "nggv-fold-out", never, { "thook": { "alias": "thook"; "required": false; }; "alignOptions": { "alias": "alignOptions"; "required": false; }; }, {}, never, ["*"], false, never>;
+    private subscribeToOutsideClickEvent;
+    private subscribeToKeyDownEvent;
+    private onKeyDown;
+    private handleArrowUpClick;
+    private handleArrowDownClick;
+    private handleFocus;
+    private takeAction;
+    private resetChildren;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvFoldOutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvFoldOutComponent, "nggv-fold-out", never, { "thook": { "alias": "thook"; "required": false; }; "alignOptions": { "alias": "alignOptions"; "required": false; }; "text": { "alias": "text"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/v-angular/modal/fold-out/fold-out.directive.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
-export declare class NgvFoldOutOptionDirective {
+export declare class NggvFoldOutOptionDirective {
     baseClass: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvFoldOutOptionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgvFoldOutOptionDirective, "[nggvOption]", never, {}, {}, never, never, false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvFoldOutOptionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NggvFoldOutOptionDirective, "[nggvOption]", never, {}, {}, never, never, false, never>;
 }

package/v-angular/modal/fold-out/keyboard-key.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum KeyboardKey {
+    Escape = "Escape",
+    Space = "Space",
+    Enter = "Enter",
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown"
+}

package/v-angular/modal/modal.module.d.ts

@@ -8,8 +8,8 @@ import * as i5 from "@angular/common";
 import * as i6 from "@sebgroup/green-angular/src/v-angular/button";
 import * as i7 from "@sebgroup/green-angular/src/v-angular/i18n";
 import * as i8 from "@sebgroup/green-angular/src/lib/shared";
-export declare class NgvModalModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvModalModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgvModalModule, [typeof i1.NgvDialogComponent, typeof i2.NgvSlideOutComponent, typeof i3.NgvFoldOutComponent, typeof i4.NgvFoldOutOptionDirective], [typeof i5.CommonModule, typeof i6.NgvButtonModule, typeof i7.NgvI18nModule, typeof i8.NggCoreWrapperModule], [typeof i1.NgvDialogComponent, typeof i2.NgvSlideOutComponent, typeof i3.NgvFoldOutComponent, typeof i4.NgvFoldOutOptionDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NgvModalModule>;
+export declare class NggvModalModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvModalModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvModalModule, [typeof i1.NggvDialogComponent, typeof i2.NggvSlideOutComponent, typeof i3.NggvFoldOutComponent, typeof i4.NggvFoldOutOptionDirective], [typeof i5.CommonModule, typeof i6.NggvButtonModule, typeof i7.NggvI18nModule, typeof i8.NggCoreWrapperModule], [typeof i1.NggvDialogComponent, typeof i2.NggvSlideOutComponent, typeof i3.NggvFoldOutComponent, typeof i4.NggvFoldOutOptionDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvModalModule>;
 }

package/v-angular/modal/slide-out/slide-out.component.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef, EventEmitter, OnInit } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit, Renderer2 } from '@angular/core';
 import { DialogButtons } from '../modal.types';
 import * as i0 from "@angular/core";
 /** Modal slide-out component based on vanilla pattern library design.
@@ -13,14 +13,17 @@ import * as i0 from "@angular/core";
  * The closing button can be selected using 'slideout-close'.
  * The backdrop is selectable using 'slideout-backdrop'.
  */
-export declare class NgvSlideOutComponent implements OnInit {
+export declare class NggvSlideOutComponent implements OnInit {
     private host;
+    private renderer;
     /** @internal */
     slideOutRef: ElementRef | undefined;
     /** Sets from which side the modal should open. */
     side: 'left' | 'right';
     /** Defines the default visibility state of the slide-out. */
-    shown: boolean;
+    private _shown;
+    set shown(value: boolean);
+    get shown(): boolean;
     /** Defines the default visibility state of the modal. */
     initiallyShown: boolean;
     /** Sets modal heading. Will be translated (using transloco) if the string matches a cms key. */
@@ -38,6 +41,8 @@ export declare class NgvSlideOutComponent implements OnInit {
     autoWidth: boolean;
     /** Special property used for selecting DOM elements during automated UI testing. */
     thook: string;
+    /** Aria label for the Close button with "X" icon, in the header */
+    closeButtonAriaLabel?: string;
     /** @internal */
     get fromLeft(): boolean;
     _buttons: DialogButtons | undefined;
@@ -51,7 +56,7 @@ export declare class NgvSlideOutComponent implements OnInit {
     private previous;
     private firstFocusable;
     private lastFocusable;
-    constructor(host: ElementRef);
+    constructor(host: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     onAction(event: Event, action: string): void;
     /**
@@ -71,6 +76,8 @@ export declare class NgvSlideOutComponent implements OnInit {
     /** @internal */
     focusTrap(event: KeyboardEvent): void;
     private limitFocusable;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvSlideOutComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvSlideOutComponent, "nggv-slideout-modal", never, { "side": { "alias": "side"; "required": false; }; "shown": { "alias": "shown"; "required": false; }; "initiallyShown": { "alias": "initiallyShown"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "title": { "alias": "title"; "required": false; }; "content": { "alias": "content"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "autoWidth": { "alias": "autoWidth"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; }, { "nggvCloseEvent": "nggvCloseEvent"; "nggvPositiveEvent": "nggvPositiveEvent"; "nggvNeutralEvent": "nggvNeutralEvent"; "nggvNegativeEvent": "nggvNegativeEvent"; }, never, ["*", "[slot='outside-content']"], false, never>;
+    private hideOverflow;
+    private resetOverflow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvSlideOutComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvSlideOutComponent, "nggv-slideout-modal", never, { "side": { "alias": "side"; "required": false; }; "shown": { "alias": "shown"; "required": false; }; "initiallyShown": { "alias": "initiallyShown"; "required": false; }; "heading": { "alias": "heading"; "required": false; }; "title": { "alias": "title"; "required": false; }; "content": { "alias": "content"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "autoWidth": { "alias": "autoWidth"; "required": false; }; "thook": { "alias": "thook"; "required": false; }; "closeButtonAriaLabel": { "alias": "closeButtonAriaLabel"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; }, { "nggvCloseEvent": "nggvCloseEvent"; "nggvPositiveEvent": "nggvPositiveEvent"; "nggvNeutralEvent": "nggvNeutralEvent"; "nggvNegativeEvent": "nggvNegativeEvent"; }, never, ["*", "[slot='outside-content']"], false, never>;
 }

package/v-angular/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pagination.component';
+export * from './pagination.module';

package/v-angular/pagination/pagination.component.d.ts

@@ -0,0 +1,64 @@
+import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import '@sebgroup/green-core/components/icon/icons/chevron-left.js';
+import '@sebgroup/green-core/components/icon/icons/chevron-right.js';
+import '@sebgroup/green-core/components/icon/icons/arrow-left.js';
+import * as i0 from "@angular/core";
+/** The Pagination component is used to separate long sets of data so that it is easier for a user to consume information. To change the current page simply click on the page number. */
+export declare class PaginationComponent implements OnChanges {
+    /** Total size of pagination */
+    size: number;
+    /** Selected page */
+    value: number;
+    /** First page text */
+    firstText?: string;
+    /** Last page text */
+    lastText?: string;
+    /** Next page text */
+    nextText?: string;
+    /** Offset per page */
+    offset?: number;
+    /** Number of pages to display*/
+    pagingLength?: number;
+    /** Previous page text */
+    previousText?: string;
+    /** Use first and last navigation buttons*/
+    useFirstAndLast?: boolean;
+    /** Use text-based navigation buttons*/
+    useTextNav?: boolean;
+    /** Use dot-navigation */
+    useDotNav?: boolean;
+    /** Use 'Go to page' input field */
+    showGoToPage: boolean;
+    /** Element class name */
+    className: string;
+    /** Element ID */
+    id?: string;
+    /** Callback on page change */
+    pageNumberChange: EventEmitter<number>;
+    /** @internal */
+    pageNumber: number;
+    /** @internal */
+    list: Array<number>;
+    /** @internal */
+    dotnavList: Array<number>;
+    /** @internal */
+    pagingSize: number;
+    /** @internal */
+    showEllipsisStart: boolean;
+    /** @internal */
+    showEllipsisEnd: boolean;
+    ngOnChanges(changes: SimpleChanges): void;
+    /** @internal */
+    setPagingSize(): void;
+    /** @internal */
+    handleOnChange(value: number): void;
+    /** @internal */
+    handlePageInput(pageInput: string): void;
+    /**
+     * Generates an array of the pages that needs to be displayed
+     * It depends on the size, offset, and the current value
+     */
+    private generateList;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "nggv-pagination", never, { "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "firstText": { "alias": "firstText"; "required": false; }; "lastText": { "alias": "lastText"; "required": false; }; "nextText": { "alias": "nextText"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "pagingLength": { "alias": "pagingLength"; "required": false; }; "previousText": { "alias": "previousText"; "required": false; }; "useFirstAndLast": { "alias": "useFirstAndLast"; "required": false; }; "useTextNav": { "alias": "useTextNav"; "required": false; }; "useDotNav": { "alias": "useDotNav"; "required": false; }; "showGoToPage": { "alias": "showGoToPage"; "required": false; }; "className": { "alias": "className"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "pageNumberChange": "pageNumberChange"; }, never, never, false, never>;
+}

package/v-angular/pagination/pagination.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./pagination.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@sebgroup/green-angular/src/v-angular/i18n";
+import * as i5 from "@jsverse/transloco";
+import * as i6 from "@sebgroup/green-angular/src/lib/shared";
+export declare class NggvPaginationModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvPaginationModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvPaginationModule, [typeof i1.PaginationComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.NggvI18nModule, typeof i5.TranslocoModule, typeof i6.NggCoreWrapperModule], [typeof i1.PaginationComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvPaginationModule>;
+}

package/v-angular/radio/radio.component.d.ts

@@ -1,29 +1,30 @@
+import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js';
 import { ChangeDetectorRef, OnDestroy, OnInit } 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";
 /** @internal Internal class used to uncheck radio buttons with the matching name. */
-export declare class NgvRadioControlRegistry {
+export declare class NggvRadioControlRegistry {
     private _radios;
-    add(control: NgControl, radio: NgvRadioComponent): void;
-    remove(radio: NgvRadioComponent): void;
-    select(radio: NgvRadioComponent): void;
+    add(control: NgControl, radio: NggvRadioComponent): void;
+    remove(radio: NggvRadioComponent): void;
+    select(radio: NggvRadioComponent): void;
     private _isSameGroup;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvRadioControlRegistry, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<NgvRadioControlRegistry>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvRadioControlRegistry, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NggvRadioControlRegistry>;
 }
 /**
  * Use radio buttons when users must select one option in a list with exclusive options out of a set of two or more options.
  * https://designlibrary.sebgroup.com/components/component-radiobutton
  */
-export declare class NgvRadioComponent extends NgvBaseControlValueAccessorComponent implements OnInit, OnDestroy {
+export declare class NggvRadioComponent extends NggvBaseControlValueAccessorComponent implements OnInit, OnDestroy {
     ngControl: NgControl;
     protected translocoScope: TranslocoScope;
-    protected registry: NgvRadioControlRegistry;
+    protected registry: NggvRadioControlRegistry;
     protected cdr: ChangeDetectorRef;
     /** Special property used for selecting DOM elements during automated UI testing. */
-    thook: string;
+    thook: string | null | undefined;
     /** Syncs a FormControl in an existing FormGroup to a form control element by name. */
     formControlName?: string;
     /**
@@ -32,7 +33,7 @@ export declare class NgvRadioComponent extends NgvBaseControlValueAccessorCompon
      * @param registry internal registry used to uncheck radio buttons with the matching name, through dependency injection.
      * @param cdr change detection reference for rendering purposes.
      */
-    constructor(ngControl: NgControl, translocoScope: TranslocoScope, registry: NgvRadioControlRegistry, cdr: ChangeDetectorRef);
+    constructor(ngControl: NgControl, translocoScope: TranslocoScope, registry: NggvRadioControlRegistry, cdr: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnDestroy(): void;
     /** @internal */
@@ -43,6 +44,6 @@ export declare class NgvRadioComponent extends NgvBaseControlValueAccessorCompon
     registerOnChange(fn: (value: any) => any): void;
     /** Checks that the name properties match and updates name property if only formControlName is given. */
     private _checkName;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvRadioComponent, [{ optional: true; self: true; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgvRadioComponent, "nggv-radio", never, { "thook": { "alias": "thook"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvRadioComponent, [{ optional: true; self: true; }, { optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NggvRadioComponent, "nggv-radio", never, { "thook": { "alias": "thook"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/v-angular/radio/radio.module.d.ts

@@ -2,8 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./radio.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@sebgroup/green-angular/src/v-angular/i18n";
-export declare class NgvRadioModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgvRadioModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgvRadioModule, [typeof i1.NgvRadioComponent], [typeof i2.CommonModule, typeof i3.NgvI18nModule], [typeof i1.NgvRadioComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NgvRadioModule>;
+import * as i4 from "@sebgroup/green-angular/src/lib/shared";
+export declare class NggvRadioModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvRadioModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvRadioModule, [typeof i1.NggvRadioComponent], [typeof i2.CommonModule, typeof i3.NggvI18nModule, typeof i4.NggCoreWrapperModule], [typeof i1.NggvRadioComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvRadioModule>;
 }

package/v-angular/slug/index.d.ts

@@ -0,0 +1,2 @@
+export * from './slug.pipe';
+export * from './slug.module';

package/v-angular/slug/slug.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./slug.pipe";
+import * as i2 from "@angular/common";
+export declare class NggvSlugPipeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NggvSlugPipeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NggvSlugPipeModule, [typeof i1.SlugPipe], [typeof i2.CommonModule], [typeof i1.SlugPipe]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NggvSlugPipeModule>;
+}

package/v-angular/slug/slug.pipe.d.ts

@@ -0,0 +1,12 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+/** Pipe used to transform text with special characters into a simple kebab-case id. */
+export declare class SlugPipe implements PipeTransform {
+    /**
+     * Function for executing the transformation to kebab-case id.
+     * @param value the text with special characters which to transform.
+     */
+    transform(value?: string): unknown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlugPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<SlugPipe, "slug", false>;
+}

package/v-angular/table/index.d.ts

@@ -0,0 +1,5 @@
+export * from './table.component';
+export * from './table.directive';
+export * from './tr-thook.pipe';
+export * from './table.models';
+export * from './table.module';

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

@@ -0,0 +1,239 @@
+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;
+    /**
+     * Used to enable/disable expandable rows.
+     * Defaults to false.
+     */
+    expandable: boolean;
+    /**
+    * Property name used to describe the subItems in the data table.
+    */
+    subItemsProp: string;
+    /**
+     * 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;
+    private toggleRowToExpand;
+    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; }; "expandable": { "alias": "expandable"; "required": false; }; "subItemsProp": { "alias": "subItemsProp"; "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/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>;
+}