@sebgroup/green-angular 5.1.2 → 5.3.0

package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs

@@ -0,0 +1,604 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, HostBinding, Pipe, EventEmitter, Component, ContentChildren, ContentChild, Output, NgModule } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { UntypedFormGroup, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, map } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@jsverse/transloco';
+import { TranslocoModule } from '@jsverse/transloco';
+
+class TableDirective {
+    constructor() {
+        this.columnType = 'text';
+        this.thook = 'table';
+    }
+    get numericColumn() {
+        return this.columnType === 'numeric';
+    }
+    get isSortable() {
+        return !!this.sortable;
+    }
+    get orderAscending() {
+        return this.sortOrder === 'asc' && !!this.sortable;
+    }
+    get orderDescending() {
+        return this.sortOrder === 'desc' && !!this.sortable;
+    }
+    get negativeValue() {
+        if (!isNaN(this.value))
+            return +this.value < 0;
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TableDirective, selector: "[columnType]", inputs: { columnType: "columnType", sortable: "sortable", sortOrder: "sortOrder", value: "value", thook: "thook" }, host: { properties: { "attr.data-thook": "this.thook", "class.gds-table__numeric-col": "this.numericColumn", "class.gds-table__sortable-col": "this.isSortable", "class.gds-table__sortable-col--asc": "this.orderAscending", "class.gds-table__sortable-col--desc": "this.orderDescending", "class.gds-table__negative-col": "this.negativeValue" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[columnType]',
+                }]
+        }], propDecorators: { columnType: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], sortOrder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], numericColumn: [{
+                type: HostBinding,
+                args: ['class.' + "gds-table__numeric-col" /* ColumnCSSClass.Numeric */]
+            }], isSortable: [{
+                type: HostBinding,
+                args: ['class.' + "gds-table__sortable-col" /* ColumnCSSClass.Sortable */]
+            }], orderAscending: [{
+                type: HostBinding,
+                args: ['class.' + "gds-table__sortable-col--asc" /* ColumnCSSClass.Ascending */]
+            }], orderDescending: [{
+                type: HostBinding,
+                args: ['class.' + "gds-table__sortable-col--desc" /* ColumnCSSClass.Descending */]
+            }], negativeValue: [{
+                type: HostBinding,
+                args: ['class.' + "gds-table__negative-col" /* ColumnCSSClass.Negative */]
+            }] } });
+class TableTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this.tableColumnTarget = 'both';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TableTemplateDirective, selector: "[tableColumn]", inputs: { tableColumn: "tableColumn", tableColumnTarget: "tableColumnTarget" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[tableColumn]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { tableColumn: [{
+                type: Input
+            }], tableColumnTarget: [{
+                type: Input
+            }] } });
+class TableFooterTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableFooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TableFooterTemplateDirective, selector: "[tableFooter]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[tableFooter]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class TableAppendableRowsTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableAppendableRowsTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TableAppendableRowsTemplateDirective, selector: "[tableAppendableRows]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableAppendableRowsTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: '[tableAppendableRows]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+
+const getKeyValue = (obj, key) => obj[key];
+const pick = (propertyArray, object) => {
+    if (object instanceof Object) {
+        return propertyArray.reduce((acc, curr) => ({
+            ...acc,
+            [curr]: getKeyValue(object, curr),
+        }), {});
+    }
+    throw Error('The value for argument "object" must be an object');
+};
+const orderByDescending = (property) => {
+    return (a, b) => {
+        if (a[property] > b[property])
+            return -1;
+        if (a[property] < b[property])
+            return 1;
+        return 0;
+    };
+};
+const orderByAscending = (property) => {
+    return (a, b) => {
+        if (a[property] < b[property])
+            return -1;
+        if (a[property] > b[property])
+            return 1;
+        return 0;
+    };
+};
+
+class TrThookPipe {
+    transform(value, index, thookFn) {
+        // call thook fn to set thook for active row
+        if (thookFn != null) {
+            return thookFn(value);
+        }
+        // default thook
+        return `table-row-${index}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrThookPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: TrThookPipe, isStandalone: true, name: "trThook" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrThookPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'trThook',
+                    standalone: true,
+                }]
+        }] });
+
+let staticInitId = 0;
+function objectFromEntries(entryMap) {
+    const fromEntries = {};
+    for (const [key, value] of entryMap) {
+        fromEntries[key] = value;
+    }
+    return fromEntries;
+}
+/**
+ * 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>
+ *
+ */
+class TableComponent {
+    constructor() {
+        /** Emits the table row that was clicked. Works on all columns if not preventDefaultEmit is set for that column. */
+        this.ngvRowClick = new EventEmitter();
+        /**
+         * 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.
+         */
+        this.ngvRowSelect = new EventEmitter();
+        /**
+         * Emits event to signal that the table should be reordered.
+         */
+        this.ngvOrderBy = new EventEmitter();
+        /**
+         * Property name used to uniquely describe each item (i.e. row) in the data table.
+         * Defaults to \'id\'.
+         * Is required if selectable is true.
+         */
+        this.rowId = 'id';
+        /**
+         * 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.
+         */
+        this.hasRowSpan = (_) => undefined;
+        /**
+         * Used to enable/disable the left-side checkbox column.
+         * Defaults to true.
+         */
+        this.selectable = true;
+        /**
+         * Used to enable/disable expandable rows.
+         * Defaults to false.
+         */
+        this.expandable = false;
+        /**
+        * Property name used to describe the subItems in the data table.
+        */
+        this.subItemsProp = 'subItems';
+        /**
+         * 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.
+         */
+        this.allowLocalSort = false;
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'table-select-all';
+        /**
+         * @internal
+         * Internal data structure used to keep track of added content templates used in td elements.
+         */
+        this.customRowTemplates = new Map();
+        /**
+         * @internal
+         * Internal data structure used to keep track of added content templates used in th elements.
+         */
+        this.customHeaderTemplates = new Map();
+        /**
+         * @internal
+         * FormGroup containing all row id\'s as controls, and whether these are selected or not as values.
+         */
+        this.rowSelectors = new UntypedFormGroup({});
+        /**
+         * @internal
+         * Master selector for selecting or deselecting all row selectors.
+         */
+        this.groupSelector = new UntypedFormControl(false);
+        this.selected = [];
+        this.subs = [];
+    }
+    ngOnChanges(changes) {
+        // Update selectable or expandable rows if table data or settings change
+        if ((this.selectable || this.expandable) && changes.tableData?.currentValue ||
+            (changes.selectable?.currentValue || changes.expandable?.currentValue) && this.tableData) {
+            const wasChanged = this.registerSelectableRows(changes.tableData.currentValue);
+            if (wasChanged && !this.subs.length) {
+                // first time this is run
+                const groupSelectorSub = this.groupValueSubscription;
+                const rowSelectorSub = this.rowValueSubscription;
+                this.subs.push(groupSelectorSub, rowSelectorSub);
+            }
+            else if (wasChanged) {
+                this.rowSelectors.updateValueAndValidity();
+            }
+        }
+        // sort any incoming data
+        if (this.allowLocalSort &&
+            (changes.tableData?.currentValue || changes.tableColumns?.currentValue)) {
+            const orderedByColumn = this.tableColumns?.find((el) => el.order !== undefined);
+            if (orderedByColumn)
+                this.sortItemsBy(orderedByColumn);
+        }
+    }
+    ngOnInit() {
+        this.initId = staticInitId++;
+    }
+    ngAfterContentInit() {
+        // if any custom templates were defined in the template
+        if (this.customTemplates.length) {
+            // for each template found
+            this.customTemplates.map((tableTemplate) => {
+                // if target is either 'td' or 'both'
+                if (['td', 'both'].includes(tableTemplate.tableColumnTarget)) {
+                    // add to custom row templates
+                    this.customRowTemplates.set(tableTemplate.tableColumn, tableTemplate.templateRef);
+                }
+                // if target is either 'th' or 'both'
+                if (['th', 'both'].includes(tableTemplate.tableColumnTarget)) {
+                    // add to custom header templates
+                    this.customHeaderTemplates.set(tableTemplate.tableColumn, tableTemplate.templateRef);
+                }
+            });
+        }
+        // if appended rows' template is defined in the template
+        if (this.appendedRowsTemplate) {
+            // set templateRef of appended rows' template to variable
+            this.appendedRowsTemplateRef = this.appendedRowsTemplate.templateRef;
+        }
+        // if custom footer template is defined in the template
+        if (this.customFooterTemplate) {
+            // set templateRef of table footer to variable
+            this.customFooterTemplateRef = this.customFooterTemplate.templateRef;
+        }
+    }
+    ngOnDestroy() {
+        this.subs.forEach((sub) => sub.unsubscribe());
+    }
+    /**
+     * @internal
+     * Returns a subscription to the master selector control that either selects or deselects all row controls.
+     */
+    get groupValueSubscription() {
+        return this.groupSelector.valueChanges.subscribe({
+            next: (value) => {
+                const selectMap = new Map(Object.entries(this.rowSelectorsValue));
+                selectMap.forEach((_, key) => selectMap.set(key, value));
+                const patchValue = objectFromEntries(selectMap);
+                this.rowSelectors.patchValue(patchValue);
+            },
+        });
+    }
+    /**
+     * @internal
+     * Returns a subscription to all individual row selectors and update the master selector if all are selected.
+     */
+    get rowValueSubscription() {
+        return this.rowSelectors.valueChanges
+            .pipe(debounceTime(0), // to limit the number of events and to wait for all sub controls to update
+        map((val) => {
+            // get a filtered array of keys for all rows that are selected
+            const selected = Object.keys(val).filter((key) => {
+                return val[key] === true && this.rowSelectors.get(key)?.enabled;
+            });
+            // returns an object containing only the filtered keys
+            return pick(selected, val);
+        }))
+            .subscribe({
+            next: (value) => {
+                // the number of selected keys compared to the total number of keys available
+                const numberOfSelected = Object.keys(value).length;
+                const allSelected = numberOfSelected > 0
+                    ? numberOfSelected === Object.keys(this.rowSelectorsValue).length
+                    : false;
+                // update the master selector control
+                this.groupSelector.setValue(allSelected, { emitEvent: false });
+                // update the array of currently selected id's
+                this.selected = Object.keys(value);
+                // and emit the updated value
+                this.ngvRowSelect.emit(this.selected);
+            },
+        });
+    }
+    /**
+     * @internal
+     * Registers or disables row controls for new or removed rows.
+     */
+    registerSelectableRows(tableData) {
+        if (!tableData)
+            return false;
+        // Array containing only the id's for each row
+        const dataRowIds = tableData.map((data) => data[this.rowId]);
+        // Array containing the id's that have registered controls
+        const currentIds = Object.keys(this.rowSelectorsValue);
+        // Array containing all ids that lacks a corresponding control (i.e. new rows)
+        const newIds = dataRowIds.filter((id) => currentIds.indexOf(id) === -1);
+        // Array containing all ids that has a control but is no longer in the data set (i.e. removed rows)
+        const removedIds = currentIds.filter((id) => dataRowIds.indexOf(id) === -1);
+        // Register new controls for added rows
+        if (newIds.length) {
+            newIds.forEach((id) => {
+                const ctrl = this.rowSelectors.registerControl(id, new UntypedFormControl(false));
+                if (ctrl.disabled)
+                    ctrl.enable();
+            });
+        }
+        // Set already registered controls to disabled for removed rows
+        if (removedIds.length)
+            removedIds.forEach((id) => this.rowSelectors.get(id)?.disable());
+        return newIds.length > 0 || removedIds.length > 0;
+    }
+    /**
+     * @internal
+     * Returns all enabled values unless all rows are disabled.
+     */
+    get rowSelectorsValue() {
+        return this.rowSelectors.enabled ? this.rowSelectors.value : {};
+    }
+    toggleSortOrderWithSpace(event, column) {
+        if (column.sortable) {
+            event.preventDefault();
+            this.toggleSortOrder(column);
+        }
+    }
+    /**
+     * @internal
+     * Switches sorting order between ascending and descending order for a column.
+     * @param column the column to sort rows after.
+     */
+    toggleSortOrder(column) {
+        // check if the table is already sorted by another column than the one provided
+        const currentlyOrderedBy = this.tableColumns?.find((el) => el !== column && el.order !== undefined);
+        if (currentlyOrderedBy)
+            delete currentlyOrderedBy.order;
+        column.order = column.order === 'desc' ? 'asc' : 'desc';
+        this.sortItemsBy(column);
+    }
+    /** If sortable, reorders the table data using the specified column as ordering attribute. */
+    sortItemsBy(column) {
+        if (!column.sortable)
+            return;
+        // emit re-order event
+        this.ngvOrderBy.emit({ property: column.property, order: column.order });
+        // if local sort is allowed, reorder data
+        if (!this.allowLocalSort || !this.tableData)
+            return;
+        return this.tableData.sort(column.order === 'desc'
+            ? orderByDescending(column.property)
+            : orderByAscending(column.property));
+    }
+    /**
+     * @internal
+     * Emits row data for what row was clicked if defaultEmit is allowed.
+     */
+    propagateItemClick(item, preventDefaultEmit) {
+        if (!preventDefaultEmit)
+            this.ngvRowClick.emit(item);
+        if (this.expandable)
+            this.toggleRowToExpand(item[this.rowId]);
+    }
+    getAriaLabel(column) {
+        const sortOrder = column.order === 'asc'
+            ? this.ariaLabelsOrderBy?.desc
+            : this.ariaLabelsOrderBy?.asc;
+        if (!sortOrder)
+            return; // no aria labels defined
+        return column.ariaLabelSortable?.replace('{{sortOrder}}', sortOrder);
+    }
+    toggleRowToExpand(id) {
+        const row = this.rowSelectors.get(id);
+        row?.setValue(!row.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", expandable: "expandable", subItemsProp: "subItemsProp", allowLocalSort: "allowLocalSort", thook: "thook", trThookFn: "trThookFn", ariaLabelCheckboxTh: "ariaLabelCheckboxTh", ariaLabelCheckboxTr: "ariaLabelCheckboxTr", ariaLabelsOrderBy: "ariaLabelsOrderBy" }, outputs: { ngvRowClick: "ngvRowClick", ngvRowSelect: "ngvRowSelect", ngvOrderBy: "ngvOrderBy" }, queries: [{ propertyName: "appendedRowsTemplate", first: true, predicate: TableAppendableRowsTemplateDirective, descendants: true }, { propertyName: "customFooterTemplate", first: true, predicate: TableFooterTemplateDirective, descendants: true }, { propertyName: "customTemplates", predicate: TableTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #sortableThTemplate let-column>\n  <button class=\"sg-table-sort\" *transloco=\"let t\">\n    <ng-template #thButtonTemplate>\n      {{ t(column.label ?? '') }}\n    </ng-template>\n    <ng-container\n      *ngIf=\"\n        customHeaderTemplates.get(column.property) as thTemplate;\n        else thButtonTemplate\n      \"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n      >\n      </ng-template>\n    </ng-container>\n  </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n  <ng-template #defaultThTemplate>\n    <ng-container *transloco=\"let t\">\n      {{ t(column.label ?? '') }}\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngIf=\"\n      customHeaderTemplates.get(column.property) as thTemplate;\n      else defaultThTemplate\n    \"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n    >\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<table class=\"gds-table\" *transloco=\"let t\">\n  <!-- Table header -->\n  <thead>\n    <tr>\n      <!-- Checkbox column for header -->\n      <th *ngIf=\"selectable\" class=\"column__check\">\n        <div class=\"gds-field-checkbox-wrap\">\n          <input\n            type=\"checkbox\"\n            [formControl]=\"groupSelector\"\n            [attr.aria-label]=\"ariaLabelCheckboxTh\"\n            [attr.id]=\"'cb_header__' + initId\"\n            [attr.data-thook]=\"thook\"\n          />\n          <label [attr.for]=\"'cb_header__' + initId\"></label>\n        </div>\n      </th>\n\n      <!-- Other columns -->\n      <th\n        *ngFor=\"let column of tableColumns\"\n        [columnType]=\"column.valueType\"\n        [sortable]=\"column.sortable\"\n        [sortOrder]=\"column.order\"\n        [thook]=\"'column-header-' + !!column.property\"\n        (click)=\"toggleSortOrder(column)\"\n        (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n        [attr.aria-label]=\"getAriaLabel(column)\"\n        [attr.aria-sort]=\"column.order + 'ending'\"\n      >\n        <ng-container *ngIf=\"column.sortable\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              sortableThTemplate;\n              context: { $implicit: column, column: column }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!column.sortable\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              notSortableThTemplate;\n              context: { $implicit: column, column: column }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n      </th>\n    </tr>\n  </thead>\n\n  <!-- Table body -->\n  <tbody [formGroup]=\"rowSelectors\">\n    <ng-container *ngFor=\"let item of tableData; let i = index\">\n      <tr\n        [class.row__expand]=\"expandable\"\n        [attr.data-thook]=\"item | trThook: i : trThookFn\"\n        [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n      >\n        <!-- Checkbox column for row -->\n        <td *ngIf=\"selectable\" class=\"column__check\">\n          <div class=\"gds-field-checkbox-wrap\">\n            <input\n              *ngIf=\"rowSelectors.get(item[rowId])\"\n              type=\"checkbox\"\n              [formControlName]=\"item[rowId]\"\n              [attr.aria-label]=\"ariaLabelCheckboxTr\"\n              [attr.id]=\"'cb_row__' + initId + '_' + i\"\n              [attr.data-thook]=\"'row-select-' + i\"\n            />\n            <label [attr.for]=\"'cb_row__' + initId + '_' + i\"></label>\n          </div>\n        </td>\n\n        <!-- Other columns -->\n        <td\n          *ngFor=\"let column of tableColumns; let i = index\"\n          [columnType]=\"column.valueType\"\n          [value]=\"item[column.property]\"\n          (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n        >\n          <ng-container *ngIf=\"expandable && i === 0; else nonExpandableTemplate\">\n            <div class=\"gds-item-field-wrap\">\n              <span\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId]).value\">\n              <svg\n                *ngIf=\"item.subItems.length > 0\"\n                width=\"18\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                d=\"M20 9L12 17L4 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.6\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                />\n              </svg>\n              </span>\n                {{ item[column.property] }} ({{ item.subItems.length }})\n            </div>\n          </ng-container>\n\n          <ng-template #nonExpandableTemplate>\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #defaultTdTemplate>\n              {{ item[column.property] }}\n            </ng-template>\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- Expanded Sub Items -->\n      <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId]).value\">\n        <tr *ngFor=\"let subItem of item[subItemsProp]\">\n          <td\n            *ngFor=\"let column of tableColumns\"\n            [columnType]=\"column.valueType\"\n            [value]=\"subItem[column.property]\"\n          >\n            <div class=\"gds-sub-item-field-wrap\">\n              {{ subItem[column.property] }}\n            </div>\n          </td>\n        </tr>\n      </ng-container>\n\n      <!-- Custom appended rows -->\n      <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n        <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n        <ng-container\n          *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </tbody>\n\n  <!-- Table footer -->\n  <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n    <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n    <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n  </tfoot>\n</table>\n", styles: ["::ng-deep .gds-table{--gds-ref-pallet-base100: #f8f8f8;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base600);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);width:100%;border-bottom:none}::ng-deep .gds-table thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:#868686}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}@media (max-width: 36em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:#333}}@media (max-width: 36em) and (hover: none) and (pointer: coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media (max-width: 36em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table tr:hover td{background-color:var(--gds-ref-pallet-base100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-table-sort{justify-content:end}::ng-deep .gds-table th.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:500}::ng-deep .gds-table tfoot ::ng-deep td{padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-ref-pallet-base100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: TrThookPipe, name: "trThook" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nggv-table', template: "<ng-template #sortableThTemplate let-column>\n  <button class=\"sg-table-sort\" *transloco=\"let t\">\n    <ng-template #thButtonTemplate>\n      {{ t(column.label ?? '') }}\n    </ng-template>\n    <ng-container\n      *ngIf=\"\n        customHeaderTemplates.get(column.property) as thTemplate;\n        else thButtonTemplate\n      \"\n    >\n      <ng-template\n        *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n      >\n      </ng-template>\n    </ng-container>\n  </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n  <ng-template #defaultThTemplate>\n    <ng-container *transloco=\"let t\">\n      {{ t(column.label ?? '') }}\n    </ng-container>\n  </ng-template>\n  <ng-container\n    *ngIf=\"\n      customHeaderTemplates.get(column.property) as thTemplate;\n      else defaultThTemplate\n    \"\n  >\n    <ng-template\n      *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n    >\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<table class=\"gds-table\" *transloco=\"let t\">\n  <!-- Table header -->\n  <thead>\n    <tr>\n      <!-- Checkbox column for header -->\n      <th *ngIf=\"selectable\" class=\"column__check\">\n        <div class=\"gds-field-checkbox-wrap\">\n          <input\n            type=\"checkbox\"\n            [formControl]=\"groupSelector\"\n            [attr.aria-label]=\"ariaLabelCheckboxTh\"\n            [attr.id]=\"'cb_header__' + initId\"\n            [attr.data-thook]=\"thook\"\n          />\n          <label [attr.for]=\"'cb_header__' + initId\"></label>\n        </div>\n      </th>\n\n      <!-- Other columns -->\n      <th\n        *ngFor=\"let column of tableColumns\"\n        [columnType]=\"column.valueType\"\n        [sortable]=\"column.sortable\"\n        [sortOrder]=\"column.order\"\n        [thook]=\"'column-header-' + !!column.property\"\n        (click)=\"toggleSortOrder(column)\"\n        (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n        [attr.aria-label]=\"getAriaLabel(column)\"\n        [attr.aria-sort]=\"column.order + 'ending'\"\n      >\n        <ng-container *ngIf=\"column.sortable\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              sortableThTemplate;\n              context: { $implicit: column, column: column }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!column.sortable\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              notSortableThTemplate;\n              context: { $implicit: column, column: column }\n            \"\n          >\n          </ng-container>\n        </ng-container>\n      </th>\n    </tr>\n  </thead>\n\n  <!-- Table body -->\n  <tbody [formGroup]=\"rowSelectors\">\n    <ng-container *ngFor=\"let item of tableData; let i = index\">\n      <tr\n        [class.row__expand]=\"expandable\"\n        [attr.data-thook]=\"item | trThook: i : trThookFn\"\n        [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n      >\n        <!-- Checkbox column for row -->\n        <td *ngIf=\"selectable\" class=\"column__check\">\n          <div class=\"gds-field-checkbox-wrap\">\n            <input\n              *ngIf=\"rowSelectors.get(item[rowId])\"\n              type=\"checkbox\"\n              [formControlName]=\"item[rowId]\"\n              [attr.aria-label]=\"ariaLabelCheckboxTr\"\n              [attr.id]=\"'cb_row__' + initId + '_' + i\"\n              [attr.data-thook]=\"'row-select-' + i\"\n            />\n            <label [attr.for]=\"'cb_row__' + initId + '_' + i\"></label>\n          </div>\n        </td>\n\n        <!-- Other columns -->\n        <td\n          *ngFor=\"let column of tableColumns; let i = index\"\n          [columnType]=\"column.valueType\"\n          [value]=\"item[column.property]\"\n          (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n        >\n          <ng-container *ngIf=\"expandable && i === 0; else nonExpandableTemplate\">\n            <div class=\"gds-item-field-wrap\">\n              <span\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId]).value\">\n              <svg\n                *ngIf=\"item.subItems.length > 0\"\n                width=\"18\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                d=\"M20 9L12 17L4 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"2.6\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                />\n              </svg>\n              </span>\n                {{ item[column.property] }} ({{ item.subItems.length }})\n            </div>\n          </ng-container>\n\n          <ng-template #nonExpandableTemplate>\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #defaultTdTemplate>\n              {{ item[column.property] }}\n            </ng-template>\n          </ng-template>\n        </td>\n      </tr>\n\n      <!-- Expanded Sub Items -->\n      <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId]).value\">\n        <tr *ngFor=\"let subItem of item[subItemsProp]\">\n          <td\n            *ngFor=\"let column of tableColumns\"\n            [columnType]=\"column.valueType\"\n            [value]=\"subItem[column.property]\"\n          >\n            <div class=\"gds-sub-item-field-wrap\">\n              {{ subItem[column.property] }}\n            </div>\n          </td>\n        </tr>\n      </ng-container>\n\n      <!-- Custom appended rows -->\n      <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n        <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n        <ng-container\n          *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n        >\n        </ng-container>\n      </ng-container>\n    </ng-container>\n  </tbody>\n\n  <!-- Table footer -->\n  <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n    <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n    <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n  </tfoot>\n</table>\n", styles: ["::ng-deep .gds-table{--gds-ref-pallet-base100: #f8f8f8;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base600);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);width:100%;border-bottom:none}::ng-deep .gds-table thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:#868686}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}@media (max-width: 36em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:#333}}@media (max-width: 36em) and (hover: none) and (pointer: coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media (max-width: 36em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table tr:hover td{background-color:var(--gds-ref-pallet-base100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-table-sort{justify-content:end}::ng-deep .gds-table th.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:500}::ng-deep .gds-table tfoot ::ng-deep td{padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-ref-pallet-base100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}\n"] }]
+        }], propDecorators: { customTemplates: [{
+                type: ContentChildren,
+                args: [TableTemplateDirective, { descendants: true }]
+            }], appendedRowsTemplate: [{
+                type: ContentChild,
+                args: [TableAppendableRowsTemplateDirective]
+            }], customFooterTemplate: [{
+                type: ContentChild,
+                args: [TableFooterTemplateDirective]
+            }], ngvRowClick: [{
+                type: Output
+            }], ngvRowSelect: [{
+                type: Output
+            }], ngvOrderBy: [{
+                type: Output
+            }], tableColumns: [{
+                type: Input
+            }], tableData: [{
+                type: Input
+            }], rowId: [{
+                type: Input
+            }], hasRowSpan: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], expandable: [{
+                type: Input
+            }], subItemsProp: [{
+                type: Input
+            }], allowLocalSort: [{
+                type: Input
+            }], thook: [{
+                type: Input
+            }], trThookFn: [{
+                type: Input
+            }], ariaLabelCheckboxTh: [{
+                type: Input
+            }], ariaLabelCheckboxTr: [{
+                type: Input
+            }], ariaLabelsOrderBy: [{
+                type: Input
+            }] } });
+
+class NggvTableModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NggvTableModule, declarations: [TableComponent,
+            TableDirective,
+            TableTemplateDirective,
+            TableFooterTemplateDirective,
+            TableAppendableRowsTemplateDirective], imports: [CommonModule, ReactiveFormsModule, TranslocoModule, TrThookPipe], exports: [TableComponent,
+            TableTemplateDirective,
+            TableFooterTemplateDirective,
+            TableAppendableRowsTemplateDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTableModule, imports: [CommonModule, ReactiveFormsModule, TranslocoModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TableComponent,
+                        TableDirective,
+                        TableTemplateDirective,
+                        TableFooterTemplateDirective,
+                        TableAppendableRowsTemplateDirective,
+                    ],
+                    imports: [CommonModule, ReactiveFormsModule, TranslocoModule, TrThookPipe],
+                    exports: [
+                        TableComponent,
+                        TableTemplateDirective,
+                        TableFooterTemplateDirective,
+                        TableAppendableRowsTemplateDirective,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of table
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NggvTableModule, TableAppendableRowsTemplateDirective, TableComponent, TableDirective, TableFooterTemplateDirective, TableTemplateDirective, TrThookPipe };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-table.mjs.map