@sebgroup/green-angular 3.2.0 → 3.4.0

package/fesm2020/sebgroup-green-angular.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef, Directive, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, ContentChild, InjectionToken } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, inject, Renderer2, ViewContainerRef, ChangeDetectorRef, TemplateRef, Directive, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Injector, Inject, ContentChild, InjectionToken, QueryList, ViewChildren } from '@angular/core';
 import { randomId, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
 import { getScopedTagName } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
@@ -15,6 +15,7 @@ import * as i1$2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { Subject, fromEvent, interval } from 'rxjs';
 import { takeUntil, throttle } from 'rxjs/operators';
+import * as i1$3 from '@angular/platform-browser';
 
 class NggAccordionListItemComponent {
     constructor() {
@@ -460,13 +461,13 @@ class NggDatepickerComponent {
     }
 }
 NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
+NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { size: "size", hideLabel: "hideLabel", options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: NggDatepickerComponent,
             multi: true,
         },
-    ], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n", dependencies: [{ kind: "directive", type: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-datepicker', providers: [
@@ -475,8 +476,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: NggDatepickerComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-datepicker\n    *nggCoreElement\n    [attr.id]=\"id\"\n    [label]=\"label\"\n    [value]=\"value\"\n    (change)=\"onDateChange($event)\"\n    [invalid]=\"isValid === false\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [showWeekNumbers]=\"showWeekNumbers\"\n    [dateformat]=\"dateFormat\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n  >\n    <span slot=\"message\">\n      <ng-content select=\"[data-form-info]\"></ng-content>\n    </span>\n  </gds-datepicker>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { size: [{
+                type: Input
+            }], hideLabel: [{
+                type: Input
+            }], options: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -681,13 +686,13 @@ class NggDropdownComponent {
     }
 }
 NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, deps: [{ token: Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", syncPopoverWidth: "syncPopoverWidth", fixedPlacement: "fixedPlacement", options: "options", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
+NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", syncPopoverWidth: "syncPopoverWidth", size: "size", hideLabel: "hideLabel", fixedPlacement: "fixedPlacement", options: "options", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: NggDropdownComponent,
             multi: true,
         },
-    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <ng-container *ngIf=\"!option.heading; else optionHeading\">\n        <gds-option *nggCoreElement [value]=\"option[useValue]\"\n          ><ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container\n        ></gds-option>\n      </ng-container>\n      <ng-template #optionHeading>\n        <gds-option-heading *nggCoreElement>{{\n          option.label\n        }}</gds-option-heading>\n      </ng-template>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\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: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }, { propertyName: "customButton", first: true, predicate: NggDropdownButtonDirective, descendants: true }], viewQueries: [{ propertyName: "gdsDropdown", first: true, predicate: ["gdsDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <ng-container *ngIf=\"!option.heading; else optionHeading\">\n        <gds-option *nggCoreElement [value]=\"option[useValue]\"\n          ><ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container\n        ></gds-option>\n      </ng-container>\n      <ng-template #optionHeading>\n        <gds-option-heading *nggCoreElement>{{\n          option.label\n        }}</gds-option-heading>\n      </ng-template>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\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: NggCoreElementDirective, selector: "[nggCoreElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngg-dropdown', providers: [
@@ -696,7 +701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                             useExisting: NggDropdownComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <ng-container *ngIf=\"!option.heading; else optionHeading\">\n        <gds-option *nggCoreElement [value]=\"option[useValue]\"\n          ><ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container\n        ></gds-option>\n      </ng-container>\n      <ng-template #optionHeading>\n        <gds-option-heading *nggCoreElement>{{\n          option.label\n        }}</gds-option-heading>\n      </ng-template>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-group\">\n  <gds-dropdown\n    *nggCoreElement\n    #gdsDropdown\n    [value]=\"value\"\n    [searchable]=\"searchable\"\n    [label]=\"label\"\n    (change)=\"onValueChange($event)\"\n    [multiple]=\"multiSelect\"\n    [invalid]=\"invalid\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\"\n      ><ng-container\n        *ngTemplateOutlet=\"\n          customButton?.templateRef && selectedOption\n            ? customButton!.templateRef\n            : defaultButton;\n          context: { option: selectedOption }\n        \"\n      ></ng-container\n    ></span>\n\n    <ng-container *ngFor=\"let option of options; let index = index\">\n      <ng-container *ngIf=\"!option.heading; else optionHeading\">\n        <gds-option *nggCoreElement [value]=\"option[useValue]\"\n          ><ng-container\n            *ngTemplateOutlet=\"\n              customOption?.templateRef\n                ? customOption!.templateRef\n                : defaultOption;\n              context: { option: option, index: index }\n            \"\n          ></ng-container\n        ></gds-option>\n      </ng-container>\n      <ng-template #optionHeading>\n        <gds-option-heading *nggCoreElement>{{\n          option.label\n        }}</gds-option-heading>\n      </ng-template>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"trigger\">{{ texts?.select }}</span>\n</ng-template>\n\n<ng-template #defaultOption let-option=\"option\">\n  {{ display ? option[display] : option.name }}\n</ng-template>\n", styles: [".trigger{display:block;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector, decorators: [{
                     type: Inject,
                     args: [Injector]
@@ -722,6 +727,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], syncPopoverWidth: [{
                 type: Input
+            }], size: [{
+                type: Input
+            }], hideLabel: [{
+                type: Input
             }], fixedPlacement: [{
                 type: Input
             }], options: [{
@@ -1429,6 +1438,264 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class SlidingUnderlineDirective {
+    constructor(element) {
+        this.element = element;
+    }
+    ngOnInit() {
+        if (this.element?.nativeElement) {
+            this.element.nativeElement.classList.add('slider');
+            this.element.nativeElement.addEventListener('animationend', () => {
+                this.element.nativeElement.classList.remove('left', 'slider-positive', 'slider-negative');
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (!this.disabled) {
+            if (changes.slidingUnderline &&
+                changes.key &&
+                !changes.slidingUnderline.isFirstChange() &&
+                !changes?.key?.isFirstChange()) {
+                if (changes.key.currentValue === changes.key.previousValue) {
+                    this.addAnimation(changes.slidingUnderline.currentValue, changes.slidingUnderline.previousValue);
+                }
+            }
+            else {
+                if (changes.slidingUnderline &&
+                    !changes.slidingUnderline.isFirstChange()) {
+                    this.addAnimation(changes.slidingUnderline.currentValue, changes.slidingUnderline.previousValue);
+                }
+            }
+        }
+    }
+    addAnimation(current, previous) {
+        if (current > previous)
+            this.element.nativeElement.classList.add('slider-positive');
+        else
+            this.element.nativeElement.classList.add('slider-negative');
+        this.element.nativeElement.classList.add('left');
+    }
+}
+SlidingUnderlineDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SlidingUnderlineDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+SlidingUnderlineDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SlidingUnderlineDirective, selector: "[nggSlidingUnderline]", inputs: { nggSlidingUnderline: "nggSlidingUnderline", key: "key", disabled: "disabled" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SlidingUnderlineDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nggSlidingUnderline]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { nggSlidingUnderline: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class CellTableItemComponent {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+        this.valueType = 'string';
+        this.id = '';
+        this.getSignColor = (value) => {
+            if (/[−-]/.test(String(value)))
+                return 'text-danger';
+            else if (/[1-9]/.test(String(value)))
+                return 'text-success';
+            return '';
+        };
+    }
+    transformHTML(value) {
+        if (value && value.length) {
+            return this.sanitizer.bypassSecurityTrustHtml(value);
+        }
+        else {
+            return '';
+        }
+    }
+}
+CellTableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellTableItemComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+CellTableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CellTableItemComponent, selector: "[nggCellTableItem]", inputs: { row: "row", valueType: "valueType", id: "id" }, ngImport: i0, template: `
+    <ng-container [ngSwitch]="valueType">
+      <span *ngSwitchCase="'string'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'number'">{{ (row | number) || '–' }}</span>
+      <span *ngSwitchCase="'datetime'">{{
+        (row | date : 'HH:mm:ss') || '–'
+      }}</span>
+      <span *ngSwitchCase="'date'">{{
+        (row | date : 'YYYY-MM-dd') || '–'
+      }}</span>
+      <span
+        *ngSwitchCase="'custom-html'"
+        [innerHtml]="transformHTML(row) || '–'"
+      ></span>
+      <span *ngSwitchCase="'sign'" [ngClass]="getSignColor(row)">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchCase="'pct'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'streamSign'" [nggSlidingUnderline]="row">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchDefault>–</span>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: SlidingUnderlineDirective, selector: "[nggSlidingUnderline]", inputs: ["nggSlidingUnderline", "key", "disabled"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CellTableItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[nggCellTableItem]',
+                    template: `
+    <ng-container [ngSwitch]="valueType">
+      <span *ngSwitchCase="'string'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'number'">{{ (row | number) || '–' }}</span>
+      <span *ngSwitchCase="'datetime'">{{
+        (row | date : 'HH:mm:ss') || '–'
+      }}</span>
+      <span *ngSwitchCase="'date'">{{
+        (row | date : 'YYYY-MM-dd') || '–'
+      }}</span>
+      <span
+        *ngSwitchCase="'custom-html'"
+        [innerHtml]="transformHTML(row) || '–'"
+      ></span>
+      <span *ngSwitchCase="'sign'" [ngClass]="getSignColor(row)">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchCase="'pct'">{{ row || '–' }}</span>
+      <span *ngSwitchCase="'streamSign'" [nggSlidingUnderline]="row">{{
+        row || '–'
+      }}</span>
+      <span *ngSwitchDefault>–</span>
+    </ng-container>
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; }, propDecorators: { row: [{
+                type: Input
+            }], valueType: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+class NggCellTableComponent {
+    constructor() {
+        this.items = new QueryList();
+        /** Make the most left element wrap */
+        this.overflowReverse = false;
+        /** List of table headers */
+        this.headerList = [];
+        /** List of data */
+        this.rows = [];
+        /** Make rows clickable and add arrow to the right */
+        this.clickableRows = false;
+        /** Label for the chevron of clickable rows */
+        this.clickLabel = 'View details';
+        /** Callback when a row is clicked */
+        this.rowClicked = new EventEmitter();
+        // ------------- EVENTS ------------------
+        /**
+         * handles the logic for when a row is clicked
+         * @param {TableRowClickedEvent} value the TableRowClickedEvent
+         */
+        this.handleClickRow = (value) => {
+            if (this.clickableRows)
+                this.rowClicked.emit(value);
+        };
+        this.getValueTypeFromMain = () => {
+            const getMain = this.headerList.find((x) => x.main);
+            if (getMain)
+                return getMain.valueType || '';
+            return '';
+        };
+        this.getTableHeaderListValueFromNonMain = (header) => {
+            if (header.valueType)
+                return header.valueType || '';
+            return '';
+        };
+        this.mainHeader = (row) => {
+            const getMain = this.headerList.find((x) => x.main);
+            if (row && getMain) {
+                return {
+                    value: row[getMain.tableKeySelector],
+                    valueType: getMain.valueType || 'string',
+                    tableKeySelector: getMain.tableKeySelector,
+                };
+            }
+            return {
+                value: '-',
+                valueType: 'string',
+                tableKeySelector: '-',
+            };
+        };
+        this.headerNoneMain = (headers) => {
+            if (this.overflowReverse)
+                return headers.filter((x) => !x.main).reverse();
+            return headers.filter((x) => !x.main);
+        };
+        this.getTableKeySelector = (row) => {
+            return this.mainHeader(row).tableKeySelector + row.rowId;
+        };
+    }
+    // ------- TRACKBY FOR STREAM ------------
+    trackByrowId(_, b) {
+        return b.rowId;
+    }
+    KeySelector(_, b) {
+        return b.tableKeySelector;
+    }
+}
+NggCellTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCellTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NggCellTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NggCellTableComponent, selector: "ngg-cell-table", inputs: { minWidth: "minWidth", overflowReverse: "overflowReverse", className: "className", headerList: "headerList", rows: "rows", clickableRows: "clickableRows", clickLabel: "clickLabel" }, outputs: { rowClicked: "rowClicked" }, viewQueries: [{ propertyName: "items", predicate: ["items"], descendants: true }], ngImport: i0, template: "<div #targetElement role=\"table\" [ngClass]=\"className\">\n  <div class=\"cell-table-table d-flex flex-column\">\n    <div\n      *ngFor=\"let row of rows; trackBy: trackByrowId\"\n      (click)=\"handleClickRow(row)\"\n      class=\"cell-table--row-wrapper\"\n      role=\"rowgroup\"\n      [class.is-clickable]=\"clickableRows\"\n    >\n      <div>\n        <div #items [class.overflow-reverse]=\"overflowReverse\">\n          <!-- Main header -->\n          <div role=\"row\">\n            <div\n              nggCellTableItem\n              [row]=\"mainHeader(row).value\"\n              [valueType]=\"getValueTypeFromMain()\"\n              [attr.valueType]=\"getValueTypeFromMain()\"\n              [attr.id]=\"getTableKeySelector(row)\"\n              role=\"rowheader\"\n              aria-rowspan=\"3\"\n              aria-colspan=\"3\"\n            ></div>\n          </div>\n          <div role=\"row\">\n            <div class=\"d-flex\">\n              <!-- Sub Header -->\n              <div\n                nggCellTableItem\n                class=\"sub-header py-0 fw-bold\"\n                [row]=\"header.label\"\n                [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n                role=\"columnheader\"\n                *ngFor=\"\n                  let header of headerNoneMain(headerList);\n                  trackBy: KeySelector\n                \"\n              ></div>\n            </div>\n          </div>\n\n          <div role=\"row\">\n            <!-- Sub Values -->\n            <div class=\"d-flex\">\n              <div\n                nggCellTableItem\n                class=\"sub-value py-0\"\n                [row]=\"row[header.tableKeySelector]\"\n                [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n                [attr.valueType]=\"header.valueType\"\n                role=\"cell\"\n                *ngFor=\"\n                  let header of headerNoneMain(headerList);\n                  trackBy: KeySelector\n                \"\n              ></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"clickableRows\"\n        role=\"row\"\n        class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n      >\n        <div role=\"cell\">\n          <div\n            role=\"button\"\n            [attr.aria-label]=\"clickLabel\"\n            tabindex=\"0\"\n            [attr.aria-describedby]=\"getTableKeySelector(row)\"\n            (keydown.enter)=\"handleClickRow(row)\"\n          >\n            <svg\n              data-prefix=\"far\"\n              data-icon=\"chevron-right\"\n              class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 320 512\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n              ></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["[role=rowheader]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.5rem}[role=cell],[role=columnheader]{flex:1 1 0;margin-bottom:.125rem}.cell-table--row-wrapper{border-top:1px solid var(--gds-ref-pallet-base400);display:flex;padding:1rem}.cell-table--row-wrapper>div:first-child{flex:1 1 0}.cell-table--row-wrapper.is-clickable{cursor:pointer}.cell-table--row-wrapper.is-clickable:hover{background-color:var(--gds-ref-pallet-base100)}.cell-table--arrow-container{flex:0 0 auto;width:10px}.cell-table--arrow-container [tabindex=\"0\"]:focus{outline:2px solid var(--gds-ref-pallet-base800)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CellTableItemComponent, selector: "[nggCellTableItem]", inputs: ["row", "valueType", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCellTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngg-cell-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #targetElement role=\"table\" [ngClass]=\"className\">\n  <div class=\"cell-table-table d-flex flex-column\">\n    <div\n      *ngFor=\"let row of rows; trackBy: trackByrowId\"\n      (click)=\"handleClickRow(row)\"\n      class=\"cell-table--row-wrapper\"\n      role=\"rowgroup\"\n      [class.is-clickable]=\"clickableRows\"\n    >\n      <div>\n        <div #items [class.overflow-reverse]=\"overflowReverse\">\n          <!-- Main header -->\n          <div role=\"row\">\n            <div\n              nggCellTableItem\n              [row]=\"mainHeader(row).value\"\n              [valueType]=\"getValueTypeFromMain()\"\n              [attr.valueType]=\"getValueTypeFromMain()\"\n              [attr.id]=\"getTableKeySelector(row)\"\n              role=\"rowheader\"\n              aria-rowspan=\"3\"\n              aria-colspan=\"3\"\n            ></div>\n          </div>\n          <div role=\"row\">\n            <div class=\"d-flex\">\n              <!-- Sub Header -->\n              <div\n                nggCellTableItem\n                class=\"sub-header py-0 fw-bold\"\n                [row]=\"header.label\"\n                [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n                role=\"columnheader\"\n                *ngFor=\"\n                  let header of headerNoneMain(headerList);\n                  trackBy: KeySelector\n                \"\n              ></div>\n            </div>\n          </div>\n\n          <div role=\"row\">\n            <!-- Sub Values -->\n            <div class=\"d-flex\">\n              <div\n                nggCellTableItem\n                class=\"sub-value py-0\"\n                [row]=\"row[header.tableKeySelector]\"\n                [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n                [attr.valueType]=\"header.valueType\"\n                role=\"cell\"\n                *ngFor=\"\n                  let header of headerNoneMain(headerList);\n                  trackBy: KeySelector\n                \"\n              ></div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        *ngIf=\"clickableRows\"\n        role=\"row\"\n        class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n      >\n        <div role=\"cell\">\n          <div\n            role=\"button\"\n            [attr.aria-label]=\"clickLabel\"\n            tabindex=\"0\"\n            [attr.aria-describedby]=\"getTableKeySelector(row)\"\n            (keydown.enter)=\"handleClickRow(row)\"\n          >\n            <svg\n              data-prefix=\"far\"\n              data-icon=\"chevron-right\"\n              class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 320 512\"\n            >\n              <path\n                fill=\"currentColor\"\n                d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n              ></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["[role=rowheader]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.5rem}[role=cell],[role=columnheader]{flex:1 1 0;margin-bottom:.125rem}.cell-table--row-wrapper{border-top:1px solid var(--gds-ref-pallet-base400);display:flex;padding:1rem}.cell-table--row-wrapper>div:first-child{flex:1 1 0}.cell-table--row-wrapper.is-clickable{cursor:pointer}.cell-table--row-wrapper.is-clickable:hover{background-color:var(--gds-ref-pallet-base100)}.cell-table--arrow-container{flex:0 0 auto;width:10px}.cell-table--arrow-container [tabindex=\"0\"]:focus{outline:2px solid var(--gds-ref-pallet-base800)}\n"] }]
+        }], propDecorators: { items: [{
+                type: ViewChildren,
+                args: ['items']
+            }], minWidth: [{
+                type: Input
+            }], overflowReverse: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], headerList: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], clickableRows: [{
+                type: Input
+            }], clickLabel: [{
+                type: Input
+            }], rowClicked: [{
+                type: Output
+            }] } });
+
+class NggCellTableModule {
+}
+NggCellTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCellTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NggCellTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: NggCellTableModule, declarations: [NggCellTableComponent,
+        CellTableItemComponent,
+        SlidingUnderlineDirective], imports: [CommonModule], exports: [NggCellTableComponent] });
+NggCellTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCellTableModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggCellTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [NggCellTableComponent],
+                    declarations: [
+                        NggCellTableComponent,
+                        CellTableItemComponent,
+                        SlidingUnderlineDirective,
+                    ],
+                }]
+        }] });
+
+class Table {
+    constructor(table) {
+        this.data = table.data;
+        this.header = table.header;
+    }
+}
+
 class NggModule {
 }
 NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1443,6 +1710,7 @@ NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.
         NggSliderModule,
         NggContextMenuModule,
         NggInPageWizardModule,
+        NggCellTableModule,
         NggSharedModule] });
 NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
         NggBadgeModule,
@@ -1455,6 +1723,7 @@ NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.
         NggSliderModule,
         NggContextMenuModule,
         NggInPageWizardModule,
+        NggCellTableModule,
         NggSharedModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NggModule, decorators: [{
             type: NgModule,
@@ -1473,6 +1742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         NggSliderModule,
                         NggContextMenuModule,
                         NggInPageWizardModule,
+                        NggCellTableModule,
                         NggSharedModule,
                     ],
                 }]
@@ -1667,5 +1937,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggContextMenuComponent, NggContextMenuModule, NggCoreElementDirective, NggCoreWrapperModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, ON_SCROLL_TOKEN, dateValidator };
+export { NggAccordionComponent, NggAccordionListItemComponent, NggAccordionModule, NggBadgeComponent, NggBadgeModule, NggButtonComponent, NggButtonModule, NggCellTableComponent, NggCellTableModule, NggContextMenuComponent, NggContextMenuModule, NggCoreElementDirective, NggCoreWrapperModule, NggDatepickerComponent, NggDatepickerModule, NggDropdownButtonDirective, NggDropdownComponent, NggDropdownModule, NggDropdownOptionDirective, NggInPageWizardModule, NggInPageWizardStepCardComponent, NggModalBodyComponent, NggModalComponent, NggModalFooterComponent, NggModalFooterDirective, NggModalHeaderComponent, NggModalHeaderDirective, NggModalModule, NggModule, NggOnScrollDirective, NggPaginationComponent, NggPaginationModule, NggProgressCircleComponent, NggProgressCircleModule, NggSegmentedControlComponent, NggSegmentedControlModule, NggSharedModule, NggSliderComponent, NggSliderModule, ON_SCROLL_TOKEN, dateValidator };
 //# sourceMappingURL=sebgroup-green-angular.mjs.map