@sebgroup/green-angular 6.1.0 → 6.1.1

package/fesm2022/sebgroup-green-angular-src-lib-dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sebgroup-green-angular-src-lib-dropdown.mjs","sources":["../../../../libs/angular/src/lib/dropdown/dropdown-button.directive.ts","../../../../libs/angular/src/lib/dropdown/dropdown-option.directive.ts","../../../../libs/angular/src/lib/dropdown/dropdown.component.ts","../../../../libs/angular/src/lib/dropdown/dropdown.component.html","../../../../libs/angular/src/lib/dropdown/dropdown.module.ts","../../../../libs/angular/src/lib/dropdown/sebgroup-green-angular-src-lib-dropdown.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core'\n\n@Directive({\n  selector: '[nggDropdownButton]',\n})\nexport class NggDropdownButtonDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import { Directive, TemplateRef } from '@angular/core'\n\n@Directive({\n  selector: '[nggDropdownOption]',\n})\nexport class NggDropdownOptionDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  Injector,\n  Input,\n  OnDestroy,\n  OnInit,\n  Output,\n  ViewChild,\n} from '@angular/core'\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  NgControl,\n} from '@angular/forms'\n\nimport type { GdsOption } from '@sebgroup/green-core/components/dropdown/index.js'\n\nimport { GdsDropdown } from '@sebgroup/green-core/components/dropdown/dropdown.component.js'\nimport * as DropdownTransStyles from '@sebgroup/green-core/components/dropdown/dropdown.trans.styles.js'\nimport { NggDropdownButtonDirective } from './dropdown-button.directive'\nimport { NggDropdownOptionDirective } from './dropdown-option.directive'\n\nexport type CompareWith<T = any> = (o1: T, o2: T) => boolean\nexport type SearchFilter<T = any> = (search: string, value: T) => boolean\nexport type DropdownPlacements = 'bottom-start' | 'top-start'\nexport interface DropdownTexts {\n  select?: string\n  selected?: string\n  placeholder?: string\n}\nexport interface DropdownOption {\n  label?: string\n  value?: any\n  selected?: boolean\n  heading?: boolean\n  [key: string]: any\n}\n\n@Component({\n  selector: 'ngg-dropdown',\n  templateUrl: 'dropdown.component.html',\n  styleUrls: ['dropdown.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: NggDropdownComponent,\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggDropdownComponent\n  implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit\n{\n  errorMessage?: string\n  errorMessageObserver?: MutationObserver\n  @Input() id?: string\n  @Input() loop?: boolean = false\n  @Input() display = 'label'\n  @Input() useValue = 'value'\n  @Input() label?: string\n  @Input() valid?: boolean\n  @Input() invalid?: boolean\n  @Input() compareWith?: CompareWith\n  @Input() searchFilter?: SearchFilter\n  @Input() syncPopoverWidth?: boolean\n  @Input() size?: 'small' | 'medium'\n  @Input() hideLabel?: boolean\n  @Input() maxHeight?: number = 500\n  @Input() disableMobileStyles?: boolean\n\n  @Input() set options(value: DropdownOption[] | undefined) {\n    this._options = value\n    this.texts = {\n      ...this.texts,\n      select: this.displayTextByValue(this._value),\n    }\n  }\n  get options(): DropdownOption[] | undefined {\n    return this._options\n  }\n  private _options: DropdownOption[] | undefined\n\n  @Input() set texts(texts: DropdownTexts | undefined) {\n    this._texts = {\n      ...(texts ? texts : {}),\n      select: this.textToDisplay(texts, this._value),\n    }\n  }\n\n  get texts(): DropdownTexts | undefined {\n    return this._texts\n  }\n  private _texts: DropdownTexts | undefined\n\n  //\n  @Input() set multiSelect(value: string | boolean) {\n    this._multiSelect = this.convertToBoolean(value)\n  }\n  get multiSelect(): boolean {\n    return this._multiSelect\n  }\n  private _multiSelect = false\n\n  //\n  @Input() set searchable(value: string | boolean) {\n    this._searchable = this.convertToBoolean(value)\n  }\n  get searchable(): boolean {\n    return this._searchable\n  }\n  private _searchable = false\n\n  //\n  @Input() set value(newValue: any) {\n    if (!this.options) return\n\n    this._value = newValue\n\n    this.texts = {\n      ...this.texts,\n      select: this.displayTextByValue(this._value),\n    }\n  }\n  get value(): any {\n    return this._value\n  }\n  private _value: DropdownOption | DropdownOption[] | undefined\n\n  //\n  get selectedOption() {\n    return Array.isArray(this.value)\n      ? this.value.map((v: any) => this.optionByValue(v))\n      : this.optionByValue(this.value)\n  }\n\n  onChangeFn?: (value: unknown) => void\n  onTouchedFn?: () => void\n\n  @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>()\n  @Output() readonly touched: EventEmitter<boolean> =\n    new EventEmitter<boolean>()\n\n  @ContentChild(NggDropdownOptionDirective)\n  customOption?: NggDropdownOptionDirective\n\n  @ContentChild(NggDropdownButtonDirective)\n  customButton?: NggDropdownButtonDirective\n\n  @ViewChild('formInfo', { static: false }) formInfoContent?: ElementRef\n\n  @ViewChild('gdsDropdown', { static: false }) gdsDropdown?: ElementRef\n\n  public onValueChange: (event: Event) => void = (event) => {\n    const target = event.target as GdsDropdown<DropdownOption>\n    this._value = target.value\n\n    this.texts = {\n      ...this.texts,\n      select: this.displayTextByValue(this._value),\n    }\n\n    this.onChangeFn?.(this.value)\n    this.valueChange.emit(this.value)\n\n    this._cdr.detectChanges()\n  }\n\n  get control(): NgControl | undefined {\n    return this.injector.get(NgControl)\n  }\n\n  constructor(\n    @Inject(Injector) private injector: Injector,\n    private _cdr: ChangeDetectorRef,\n  ) {\n    GdsDropdown.define()\n    DropdownTransStyles.register()\n  }\n\n  ngOnInit(): void {\n    if (!this._value) {\n      if (this.multiSelect)\n        this._value = this.options\n          ?.filter((o) => o.selected === true)\n          ?.map((o) => o[this.useValue])\n      else\n        this._value = this.options?.find((o) => o.selected === true)?.[\n          this.useValue\n        ]\n\n      this.texts = {\n        ...this.texts,\n        select: this.displayTextByValue(this._value),\n      }\n    }\n\n    this.texts = {\n      placeholder: this.texts?.placeholder ?? 'Select',\n      selected: this.texts?.selected ?? 'selected',\n      select: this.displayTextByValue(this._value),\n    }\n  }\n\n  ngAfterViewInit(): void {\n    if (this.formInfoContent) {\n      // Example: observe changes to the formInfoContent element\n      this.errorMessageObserver = new MutationObserver(() => {\n        this.errorMessage = this.formInfoContent?.nativeElement.textContent\n        this._cdr.detectChanges()\n      })\n      this.errorMessageObserver.observe(this.formInfoContent.nativeElement, {\n        childList: true,\n        subtree: true,\n      })\n    }\n  }\n\n  ngOnDestroy(): void {\n    if (this.errorMessageObserver) {\n      this.errorMessageObserver.disconnect()\n    }\n  }\n\n  writeValue(value: any): void {\n    this.value = value\n    this._cdr.detectChanges()\n  }\n\n  registerOnChange(fn: () => unknown): void {\n    this.onChangeFn = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouchedFn = fn\n  }\n\n  // These adapter functions are used to maintain backwards compatibility with the old interface\n  compareWithAdapter = (o1: any, o2: any) => {\n    const compareFn = this.compareWith || ((a, b) => a === b)\n    return compareFn(o1, o2)\n  }\n  searchFilterAdapter = (q: string, o: GdsOption) => {\n    if (this.searchFilter) return this.searchFilter(q, o.value)\n    else\n      return ((q: string, o: GdsOption) =>\n        o.innerHTML.toLowerCase().includes(q.toLowerCase()))(q, o)\n  }\n\n  private convertToBoolean(value: string | boolean): boolean {\n    return (\n      value === '' || value === 'true' || value.toString() === 'true' || false\n    )\n  }\n\n  private optionByValue = (value: any) => {\n    return this.options?.find((o) => o[this.useValue] === value)\n  }\n\n  private displayTextByValue = (value: any) => {\n    return this.textToDisplay(this.texts, value)\n  }\n\n  private textToDisplay = (\n    dropdownTexts: DropdownTexts | undefined,\n    value: any,\n  ): string => {\n    if (!Array.isArray(value))\n      return (\n        this.optionByValue(value)?.[this.display] ||\n        (dropdownTexts?.placeholder ?? 'Select')\n      )\n\n    const displayValues = value.map(\n      (v) => this.optionByValue(v)?.[this.display],\n    )\n    return displayValues?.length > 2\n      ? `${displayValues.length} ${dropdownTexts?.selected} `\n      : displayValues?.join(', ') || (dropdownTexts?.placeholder ?? 'Select')\n  }\n}\n","<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    [errorMessage]=\"errorMessage\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [maxHeight]=\"maxHeight\"\n    [disableMobileStyles]=\"disableMobileStyles\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\" style=\"display: contents\"\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-menu-heading *nggCoreElement>{{ option.label }}</gds-menu-heading>\n      </ng-template>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"ngg-dropdown-default-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","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggDropdownButtonDirective } from './dropdown-button.directive'\nimport { NggDropdownOptionDirective } from './dropdown-option.directive'\nimport { NggDropdownComponent } from './dropdown.component'\n\n@NgModule({\n  declarations: [\n    NggDropdownComponent,\n    NggDropdownOptionDirective,\n    NggDropdownButtonDirective,\n  ],\n  imports: [CommonModule, NggCoreWrapperModule],\n  exports: [\n    NggDropdownComponent,\n    NggDropdownOptionDirective,\n    NggDropdownButtonDirective,\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggDropdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sebgroup-green-angular-src-lib-dropdown.mjs","sources":["../../../../libs/angular/src/lib/dropdown/dropdown-button.directive.ts","../../../../libs/angular/src/lib/dropdown/dropdown-option.directive.ts","../../../../libs/angular/src/lib/dropdown/dropdown.component.ts","../../../../libs/angular/src/lib/dropdown/dropdown.component.html","../../../../libs/angular/src/lib/dropdown/dropdown.module.ts","../../../../libs/angular/src/lib/dropdown/sebgroup-green-angular-src-lib-dropdown.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core'\n\n@Directive({\n  selector: '[nggDropdownButton]',\n})\nexport class NggDropdownButtonDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import { Directive, TemplateRef } from '@angular/core'\n\n@Directive({\n  selector: '[nggDropdownOption]',\n})\nexport class NggDropdownOptionDirective {\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ElementRef,\n  EventEmitter,\n  Inject,\n  Injector,\n  Input,\n  OnDestroy,\n  OnInit,\n  Output,\n  ViewChild,\n} from '@angular/core'\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n  NgControl,\n} from '@angular/forms'\n\nimport type { GdsOption } from '@sebgroup/green-core/components/dropdown/index.js'\n\nimport { GdsDropdown } from '@sebgroup/green-core/components/dropdown/dropdown.component.js'\nimport * as DropdownTransStyles from '@sebgroup/green-core/components/dropdown/dropdown.trans.styles.js'\nimport { NggDropdownButtonDirective } from './dropdown-button.directive'\nimport { NggDropdownOptionDirective } from './dropdown-option.directive'\n\nexport type CompareWith<T = any> = (o1: T, o2: T) => boolean\nexport type SearchFilter<T = any> = (search: string, value: T) => boolean\nexport type DropdownPlacements = 'bottom-start' | 'top-start'\nexport interface DropdownTexts {\n  select?: string\n  selected?: string\n  placeholder?: string\n}\nexport interface DropdownOption<T = any> {\n  label?: string\n  value?: T\n  selected?: boolean\n  heading?: boolean\n  [key: string]: any\n}\n\n@Component({\n  selector: 'ngg-dropdown',\n  templateUrl: 'dropdown.component.html',\n  styleUrls: ['dropdown.component.scss'],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: NggDropdownComponent,\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggDropdownComponent\n  implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit\n{\n  errorMessage?: string\n  errorMessageObserver?: MutationObserver\n  @Input() id?: string\n  @Input() loop?: boolean = false\n  @Input() display = 'label'\n  @Input() useValue = 'value'\n  @Input() label?: string\n  @Input() valid?: boolean\n  @Input() invalid?: boolean\n  @Input() compareWith?: CompareWith\n  @Input() searchFilter?: SearchFilter\n  @Input() syncPopoverWidth?: boolean\n  @Input() size?: 'small' | 'medium'\n  @Input() hideLabel?: boolean\n  @Input() maxHeight?: number = 500\n  @Input() disableMobileStyles?: boolean\n\n  @Input() set options(value: DropdownOption[] | undefined) {\n    this._options = value\n    this.texts = {\n      ...this.texts,\n      select: this.displayTextByValue(this._value),\n    }\n  }\n  get options(): DropdownOption[] | undefined {\n    return this._options\n  }\n  private _options: DropdownOption[] | undefined\n\n  @Input() set texts(texts: DropdownTexts | undefined) {\n    this._texts = {\n      ...(texts ? texts : {}),\n      select: this.textToDisplay(texts, this._value),\n    }\n  }\n\n  get texts(): DropdownTexts | undefined {\n    return this._texts\n  }\n  private _texts: DropdownTexts | undefined\n\n  //\n  @Input() set multiSelect(value: string | boolean) {\n    this._multiSelect = this.convertToBoolean(value)\n  }\n  get multiSelect(): boolean {\n    return this._multiSelect\n  }\n  private _multiSelect = false\n\n  //\n  @Input() set searchable(value: string | boolean) {\n    this._searchable = this.convertToBoolean(value)\n  }\n  get searchable(): boolean {\n    return this._searchable\n  }\n  private _searchable = false\n\n  //\n  @Input() set value(newValue: any) {\n    if (!this.options) return\n\n    this._value = newValue\n\n    this.texts = {\n      ...this.texts,\n      select: this.displayTextByValue(this._value),\n    }\n  }\n  get value(): any {\n    return this._value\n  }\n  private _value: DropdownOption | DropdownOption[] | undefined\n\n  //\n  get selectedOption() {\n    return Array.isArray(this.value)\n      ? this.value.map((v: any) => this.optionByValue(v))\n      : this.optionByValue(this.value)\n  }\n\n  onChangeFn?: (value: unknown) => void\n  onTouchedFn?: () => void\n\n  @Output() readonly valueChange: EventEmitter<any> = new EventEmitter<any>()\n  @Output() readonly touched: EventEmitter<boolean> =\n    new EventEmitter<boolean>()\n\n  @ContentChild(NggDropdownOptionDirective)\n  customOption?: NggDropdownOptionDirective\n\n  @ContentChild(NggDropdownButtonDirective)\n  customButton?: NggDropdownButtonDirective\n\n  @ViewChild('formInfo', { static: false }) formInfoContent?: ElementRef\n\n  @ViewChild('gdsDropdown', { static: false }) gdsDropdown?: ElementRef\n\n  public onValueChange: (event: Event) => void = (event) => {\n    const target = event.target as GdsDropdown<DropdownOption>\n    this._value = target.value\n\n    this.texts = {\n      ...this.texts,\n      select: this.displayTextByValue(this._value),\n    }\n\n    this.onChangeFn?.(this.value)\n    this.valueChange.emit(this.value)\n\n    this._cdr.detectChanges()\n  }\n\n  get control(): NgControl | undefined {\n    return this.injector.get(NgControl)\n  }\n\n  constructor(\n    @Inject(Injector) private injector: Injector,\n    private _cdr: ChangeDetectorRef,\n  ) {\n    GdsDropdown.define()\n    DropdownTransStyles.register()\n  }\n\n  ngOnInit(): void {\n    if (!this._value) {\n      if (this.multiSelect)\n        this._value = this.options\n          ?.filter((o) => o.selected === true)\n          ?.map((o) => o[this.useValue])\n      else\n        this._value = this.options?.find((o) => o.selected === true)?.[\n          this.useValue\n        ]\n\n      this.texts = {\n        ...this.texts,\n        select: this.displayTextByValue(this._value),\n      }\n    }\n\n    this.texts = {\n      placeholder: this.texts?.placeholder ?? 'Select',\n      selected: this.texts?.selected ?? 'selected',\n      select: this.displayTextByValue(this._value),\n    }\n  }\n\n  ngAfterViewInit(): void {\n    if (this.formInfoContent) {\n      // Example: observe changes to the formInfoContent element\n      this.errorMessageObserver = new MutationObserver(() => {\n        this.errorMessage = this.formInfoContent?.nativeElement.textContent\n        this._cdr.detectChanges()\n      })\n      this.errorMessageObserver.observe(this.formInfoContent.nativeElement, {\n        childList: true,\n        subtree: true,\n      })\n    }\n  }\n\n  ngOnDestroy(): void {\n    if (this.errorMessageObserver) {\n      this.errorMessageObserver.disconnect()\n    }\n  }\n\n  writeValue(value: any): void {\n    this.value = value\n    this._cdr.detectChanges()\n  }\n\n  registerOnChange(fn: () => unknown): void {\n    this.onChangeFn = fn\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouchedFn = fn\n  }\n\n  // These adapter functions are used to maintain backwards compatibility with the old interface\n  compareWithAdapter = (o1: any, o2: any) => {\n    const compareFn = this.compareWith || ((a, b) => a === b)\n    return compareFn(o1, o2)\n  }\n  searchFilterAdapter = (q: string, o: GdsOption) => {\n    if (this.searchFilter) return this.searchFilter(q, o.value)\n    else\n      return ((q: string, o: GdsOption) =>\n        o.innerHTML.toLowerCase().includes(q.toLowerCase()))(q, o)\n  }\n\n  private convertToBoolean(value: string | boolean): boolean {\n    return (\n      value === '' || value === 'true' || value.toString() === 'true' || false\n    )\n  }\n\n  private optionByValue = (value: any) => {\n    return this.options?.find((o) => o[this.useValue] === value)\n  }\n\n  private displayTextByValue = (value: any) => {\n    return this.textToDisplay(this.texts, value)\n  }\n\n  private textToDisplay = (\n    dropdownTexts: DropdownTexts | undefined,\n    value: any,\n  ): string => {\n    if (!Array.isArray(value))\n      return (\n        this.optionByValue(value)?.[this.display] ||\n        (dropdownTexts?.placeholder ?? 'Select')\n      )\n\n    const displayValues = value.map(\n      (v) => this.optionByValue(v)?.[this.display],\n    )\n    return displayValues?.length > 2\n      ? `${displayValues.length} ${dropdownTexts?.selected} `\n      : displayValues?.join(', ') || (dropdownTexts?.placeholder ?? 'Select')\n  }\n}\n","<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    [errorMessage]=\"errorMessage\"\n    [compareWith]=\"compareWithAdapter\"\n    [searchFilter]=\"searchFilterAdapter\"\n    [syncPopoverWidth]=\"syncPopoverWidth\"\n    [size]=\"size\"\n    [hideLabel]=\"hideLabel\"\n    [maxHeight]=\"maxHeight\"\n    [disableMobileStyles]=\"disableMobileStyles\"\n  >\n    <span slot=\"message\" #formInfo\n      ><ng-content select=\"[data-form-info]\"></ng-content\n    ></span>\n\n    <span slot=\"trigger\" style=\"display: contents\"\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-menu-heading *nggCoreElement>{{ option.label }}</gds-menu-heading>\n      </ng-template>\n    </ng-container>\n  </gds-dropdown>\n</div>\n\n<ng-template #defaultButton let-selected=\"option\">\n  <span class=\"ngg-dropdown-default-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","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggDropdownButtonDirective } from './dropdown-button.directive'\nimport { NggDropdownOptionDirective } from './dropdown-option.directive'\nimport { NggDropdownComponent } from './dropdown.component'\n\n@NgModule({\n  declarations: [\n    NggDropdownComponent,\n    NggDropdownOptionDirective,\n    NggDropdownButtonDirective,\n  ],\n  imports: [CommonModule, NggCoreWrapperModule],\n  exports: [\n    NggDropdownComponent,\n    NggDropdownOptionDirective,\n    NggDropdownButtonDirective,\n  ],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggDropdownModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sebgroup-green-angular-src-lib-slider.mjs

@@ -37,7 +37,8 @@ class NggSliderComponent {
         this.onTouchedFn && this.onTouchedFn();
     }
     handleChange() {
-        this.value = this.value ?? 0;
+        this.value =
+            this.value && this.value.toString() !== '' ? this.value : this.min;
         this.setTrackBackground();
         this.sliderChange.emit(this.value);
         this.onChangeFn && this.onChangeFn(this.value);
@@ -47,7 +48,9 @@ class NggSliderComponent {
             this.style.background = sliderColors.disabled;
             return;
         }
-        const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
+        const percent = (Math.round((this.value - this.min) / this.step) /
+            ((this.max - this.min) / this.step)) *
+            100;
         this.style.background = getSliderTrackBackground(percent);
     }
     /** control value accessor functions */
@@ -70,7 +73,7 @@ class NggSliderComponent {
                 useExisting: NggSliderComponent,
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n", dependencies: [{ 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  [attr.aria-valuenow]=\"value\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n", dependencies: [{ 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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggSliderComponent, decorators: [{
             type: Component,
@@ -80,7 +83,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: NggSliderComponent,
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  [attr.aria-valuenow]=\"value\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n" }]
         }], propDecorators: { name: [{
                 type: Input
             }], min: [{

package/fesm2022/sebgroup-green-angular-src-lib-slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sebgroup-green-angular-src-lib-slider.mjs","sources":["../../../../libs/angular/src/lib/slider/slider.component.ts","../../../../libs/angular/src/lib/slider/slider.component.html","../../../../libs/angular/src/lib/slider/slider.module.ts","../../../../libs/angular/src/lib/slider/sebgroup-green-angular-src-lib-slider.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport {\n  getSliderTrackBackground,\n  randomId,\n  sliderColors,\n} from '@sebgroup/extract'\n\ninterface SliderStyle {\n  background?: string\n}\n\n@Component({\n  selector: 'ngg-slider',\n  templateUrl: './slider.component.html',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: NggSliderComponent,\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggSliderComponent\n  implements ControlValueAccessor, OnInit, OnChanges\n{\n  @Input() name = `${randomId()}-slider`\n  @Input() min = 0\n  @Input() max = 100\n  @Input() step = 1\n  @Input() label = ''\n  @Input() instruction = ''\n  @Input() placeholder = ''\n  @Input() errorMessage = ''\n  @Input() hasTextbox = false\n  @Input() unitLabel = 'kr'\n  @Input() disabled = false\n  @Input() value = 0\n  @Input() enterkeyhint?:\n    | 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'\n\n  @Output() sliderChange = new EventEmitter<number>()\n  @Output() sliderTouch = new EventEmitter<boolean>()\n\n  onChangeFn?: (val: number) => void\n  onTouchedFn?: VoidFunction\n  style: SliderStyle = {}\n\n  ngOnInit(): void {\n    this.setTrackBackground()\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (\n      ['min', 'max', 'value'].some((x: string) =>\n        Object.prototype.hasOwnProperty.call(changes, x),\n      )\n    ) {\n      this.setTrackBackground()\n    }\n  }\n\n  onBlur(): void {\n    this.sliderTouch.emit(true)\n    this.onTouchedFn && this.onTouchedFn()\n  }\n\n  handleChange(): void {\n    this.value = this.value ?? 0\n    this.setTrackBackground()\n    this.sliderChange.emit(this.value)\n    this.onChangeFn && this.onChangeFn(this.value)\n  }\n\n  setTrackBackground(): void {\n    if (this.disabled) {\n      this.style.background = sliderColors.disabled\n      return\n    }\n\n    const percent = ((this.value - this.min) / (this.max - this.min)) * 100\n    this.style.background = getSliderTrackBackground(percent)\n  }\n\n  /** control value accessor functions */\n  writeValue(val: number): void {\n    if (this.value !== val) {\n      this.value = val ?? 0\n      this.handleChange()\n    }\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChangeFn = fn\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouchedFn = fn\n  }\n}\n","<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { FormsModule } from '@angular/forms'\n\nimport { NggSliderComponent } from './slider.component'\n\n@NgModule({\n  imports: [CommonModule, FormsModule],\n  exports: [NggSliderComponent],\n  declarations: [NggSliderComponent],\n})\nexport class NggSliderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sebgroup-green-angular-src-lib-slider.mjs","sources":["../../../../libs/angular/src/lib/slider/slider.component.ts","../../../../libs/angular/src/lib/slider/slider.component.html","../../../../libs/angular/src/lib/slider/slider.module.ts","../../../../libs/angular/src/lib/slider/sebgroup-green-angular-src-lib-slider.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  OnChanges,\n  OnInit,\n  Output,\n  SimpleChanges,\n} from '@angular/core'\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport {\n  getSliderTrackBackground,\n  randomId,\n  sliderColors,\n} from '@sebgroup/extract'\n\ninterface SliderStyle {\n  background?: string\n}\n\n@Component({\n  selector: 'ngg-slider',\n  templateUrl: './slider.component.html',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: NggSliderComponent,\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NggSliderComponent\n  implements ControlValueAccessor, OnInit, OnChanges\n{\n  @Input() name = `${randomId()}-slider`\n  @Input() min = 0\n  @Input() max = 100\n  @Input() step = 1\n  @Input() label = ''\n  @Input() instruction = ''\n  @Input() placeholder = ''\n  @Input() errorMessage = ''\n  @Input() hasTextbox = false\n  @Input() unitLabel = 'kr'\n  @Input() disabled = false\n  @Input() value = 0\n  @Input() enterkeyhint?:\n    | 'enter'\n    | 'done'\n    | 'go'\n    | 'next'\n    | 'previous'\n    | 'search'\n    | 'send'\n\n  @Output() sliderChange = new EventEmitter<number>()\n  @Output() sliderTouch = new EventEmitter<boolean>()\n\n  onChangeFn?: (val: number) => void\n  onTouchedFn?: VoidFunction\n  style: SliderStyle = {}\n\n  ngOnInit(): void {\n    this.setTrackBackground()\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (\n      ['min', 'max', 'value'].some((x: string) =>\n        Object.prototype.hasOwnProperty.call(changes, x),\n      )\n    ) {\n      this.setTrackBackground()\n    }\n  }\n\n  onBlur(): void {\n    this.sliderTouch.emit(true)\n    this.onTouchedFn && this.onTouchedFn()\n  }\n\n  handleChange(): void {\n    this.value =\n      this.value && this.value.toString() !== '' ? this.value : this.min\n    this.setTrackBackground()\n    this.sliderChange.emit(this.value)\n    this.onChangeFn && this.onChangeFn(this.value)\n  }\n\n  setTrackBackground(): void {\n    if (this.disabled) {\n      this.style.background = sliderColors.disabled\n      return\n    }\n\n    const percent =\n      (Math.round((this.value - this.min) / this.step) /\n        ((this.max - this.min) / this.step)) *\n      100\n    this.style.background = getSliderTrackBackground(percent)\n  }\n\n  /** control value accessor functions */\n  writeValue(val: number): void {\n    if (this.value !== val) {\n      this.value = val ?? 0\n      this.handleChange()\n    }\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChangeFn = fn\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouchedFn = fn\n  }\n}\n","<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n  <div>\n    <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n    <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n  </div>\n  <ng-container *ngIf=\"hasTextbox\">\n    <ng-container *ngIf=\"!!unitLabel\">\n      <div class=\"group group-border group-focus\">\n        <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n        <span class=\"form-text\">{{ unitLabel }}</span>\n      </div>\n    </ng-container>\n    <ng-container *ngIf=\"!unitLabel\">\n      <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<input\n  type=\"range\"\n  [attr.id]=\"name\"\n  [attr.name]=\"name\"\n  [attr.min]=\"min\"\n  [attr.max]=\"max\"\n  [attr.step]=\"step\"\n  [disabled]=\"disabled\"\n  [(ngModel)]=\"value\"\n  [ngStyle]=\"style\"\n  [attr.aria-valuenow]=\"value\"\n  (blur)=\"onBlur()\"\n  (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n  {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n  <input\n    type=\"text\"\n    inputmode=\"numeric\"\n    pattern=\"[0-9]*\"\n    [(ngModel)]=\"value\"\n    [class.is-invalid]=\"!!errorMessage\"\n    [attr.name]=\"name\"\n    [attr.id]=\"name + '-textbox'\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-labelledby]=\"name + '-label'\"\n    [attr.enterkeyhint]=\"enterkeyhint\"\n    [disabled]=\"disabled\"\n    (blur)=\"onBlur()\"\n    (input)=\"handleChange()\"\n  />\n</ng-template>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { FormsModule } from '@angular/forms'\n\nimport { NggSliderComponent } from './slider.component'\n\n@NgModule({\n  imports: [CommonModule, FormsModule],\n  exports: [NggSliderComponent],\n  declarations: [NggSliderComponent],\n})\nexport class NggSliderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;MAkCa,kBAAkB,CAAA;AAZ/B,IAAA,WAAA,GAAA;AAeW,QAAA,IAAA,CAAA,IAAI,GAAG,CAAA,EAAG,QAAQ,EAAE,SAAS,CAAA;QAC7B,IAAG,CAAA,GAAA,GAAG,CAAC,CAAA;QACP,IAAG,CAAA,GAAA,GAAG,GAAG,CAAA;QACT,IAAI,CAAA,IAAA,GAAG,CAAC,CAAA;QACR,IAAK,CAAA,KAAA,GAAG,EAAE,CAAA;QACV,IAAW,CAAA,WAAA,GAAG,EAAE,CAAA;QAChB,IAAW,CAAA,WAAA,GAAG,EAAE,CAAA;QAChB,IAAY,CAAA,YAAA,GAAG,EAAE,CAAA;QACjB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAA;QAClB,IAAS,CAAA,SAAA,GAAG,IAAI,CAAA;QAChB,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAA;QAChB,IAAK,CAAA,KAAA,GAAG,CAAC,CAAA;AAUR,QAAA,IAAA,CAAA,YAAY,GAAG,IAAI,YAAY,EAAU,CAAA;AACzC,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAW,CAAA;QAInD,IAAK,CAAA,KAAA,GAAgB,EAAE,CAAA;AAyDxB,KAAA;IAvDC,QAAQ,GAAA;QACN,IAAI,CAAC,kBAAkB,EAAE,CAAA;KAC1B;AAED,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IACE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAS,KACrC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CACjD,EACD;YACA,IAAI,CAAC,kBAAkB,EAAE,CAAA;SAC1B;KACF;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AAC3B,QAAA,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,CAAA;KACvC;IAED,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,KAAK;YACR,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAA;QACpE,IAAI,CAAC,kBAAkB,EAAE,CAAA;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAClC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC/C;IAED,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,YAAY,CAAC,QAAQ,CAAA;YAC7C,OAAM;SACP;QAED,MAAM,OAAO,GACX,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC;AAC9C,aAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC;AACrC,YAAA,GAAG,CAAA;QACL,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,wBAAwB,CAAC,OAAO,CAAC,CAAA;KAC1D;;AAGD,IAAA,UAAU,CAAC,GAAW,EAAA;AACpB,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,GAAG,EAAE;AACtB,YAAA,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,CAAA;YACrB,IAAI,CAAC,YAAY,EAAE,CAAA;SACpB;KACF;AAED,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE,CAAA;KACrB;AAED,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE,CAAA;KACtB;+GArFU,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,EATlB,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,GAAA,EAAA,KAAA,EAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,YAAA,EAAA,cAAA,EAAA,UAAA,EAAA,YAAA,EAAA,SAAA,EAAA,WAAA,EAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,OAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAAA;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,kBAAkB;AAC/B,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/BH,shDAsDA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,8FAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,sEAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;4FDpBa,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAZ9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAEX,SAAA,EAAA;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAoB,kBAAA;AAC/B,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;qBACF,EACgB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,shDAAA,EAAA,CAAA;8BAKtC,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBACG,GAAG,EAAA,CAAA;sBAAX,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBACG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,YAAY,EAAA,CAAA;sBAApB,KAAK;gBASI,YAAY,EAAA,CAAA;sBAArB,MAAM;gBACG,WAAW,EAAA,CAAA;sBAApB,MAAM;;;MEhDI,eAAe,CAAA;+GAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,iBAFX,kBAAkB,CAAA,EAAA,OAAA,EAAA,CAFvB,YAAY,EAAE,WAAW,aACzB,kBAAkB,CAAA,EAAA,CAAA,CAAA,EAAA;gHAGjB,eAAe,EAAA,OAAA,EAAA,CAJhB,YAAY,EAAE,WAAW,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAIxB,eAAe,EAAA,UAAA,EAAA,CAAA;kBAL3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;oBACpC,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBAC7B,YAAY,EAAE,CAAC,kBAAkB,CAAC;AACnC,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}

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

@@ -524,11 +524,11 @@ class TableComponent {
         row?.setValue(!row.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", expandable: "expandable", expandedByDefault: "expandedByDefault", 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<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          <label\n            [attr.for]=\"'cb_header__' + initId\"\n            class=\"form-control\"\n            id=\"thead-checkbox\"\n          >\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            <i></i>\n          </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            <label\n              [attr.for]=\"'cb_row__' + initId + '_' + i\"\n              class=\"form-control\"\n            >\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              <i></i>\n            </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\n              class=\"gds-item-field-wrap\"\n              [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n            >\n              <span\n                *ngIf=\"item.subItems.length > 0\"\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n              >\n                <svg\n                  width=\"20\" height=\"20\" 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=\"1.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            class=\"web-view\"\n            [columnType]=\"column.valueType\"\n            [value]=\"subItem[column.property]\"\n            (click)=\"propagateItemClick(subItem, column.preventDefaultClickEvent)\"\n          >\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #defaultTdTemplate>\n              {{ subItem[column.property] }}\n            </ng-template>\n          </td>\n\n          <td\n            class=\"mobile-view\"\n            [attr.colspan]=\"tableColumns.length\"\n            (click)=\"propagateItemClick(subItem)\"\n          >\n            <dl class=\"mobile-view-field-wrap\">\n              <ng-container *ngFor=\"let column of tableColumns\">\n                <div\n                  *ngIf=\"!column.hidePropertyOnMobile\"\n                  class=\"mobile-view-field\"\n                  [columnType]=\"column.valueType\"\n                  [value]=\"subItem[column.property]\"\n                >\n                  <dt *ngIf=\"!column.hideLabelOnMobile\">\n                    <ng-container *transloco=\"let t\">\n                      {{ t(column.label ?? '') }}\n                    </ng-container>\n                  </dt>\n                  <dd [ngStyle]=\"column.boldTextOnMobile ? { 'font-weight': '500' } : {'font-weight': '400'}\">\n                    <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n                      <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"></ng-template>\n                    </ng-container>\n                    <ng-template #defaultTdTemplate>\n                      {{ subItem[column.property] }}\n                    </ng-template>\n                  </dd>\n                  <ng-content></ng-content>\n                </div>\n              </ng-container>\n            </dl>\n            <span\n              role=\"button\"\n              tabindex=\"0\"\n              class=\"nav-chevron-field\"\n              [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n            >\n              <svg\n                width=\"20\" height=\"20\" 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=\"1.6\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </span>\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-base300);--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;--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--sg-table-row-expand-font-weight: 500;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--gds-ref-pallet-base300);width:100%;border-bottom:none;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}::ng-deep .gds-table thead tr th{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(--gds-ref-pallet-base300);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(--gds-ref-pallet-base300)}::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 .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::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 button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-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.no-sub-items{padding-left:1.5rem}::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)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.form-control{align-items:flex-start}::ng-deep .gds-table label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem;padding:0}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-container-color);background-color:var(--gds-comp-checkbox-border-color)}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--sg-table-header-color)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{background-color:var(--gds-comp-checkbox-border-color);box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width: 600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableComponent, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", expandable: "expandable", expandedByDefault: "expandedByDefault", 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<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          <label\n            [attr.for]=\"'cb_header__' + initId\"\n            class=\"form-control\"\n            id=\"thead-checkbox\"\n          >\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            <i></i>\n          </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            <label\n              [attr.for]=\"'cb_row__' + initId + '_' + i\"\n              class=\"form-control\"\n            >\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              <i></i>\n            </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\n              class=\"gds-item-field-wrap\"\n              [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n            >\n              <span\n                *ngIf=\"item.subItems.length > 0\"\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n              >\n                <svg\n                  width=\"20\" height=\"20\" 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=\"1.6\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              <span class=\"gds-item-field-text\">\n               {{ item[column.property] }} ({{ item.subItems.length }})\n                <div *ngIf=\"!!column.extraLabel\" class=\"gds-item-field-extra-label\">\n                  {{ column.extraLabel }}\n                </div>\n              </span>\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            class=\"web-view\"\n            [columnType]=\"column.valueType\"\n            [value]=\"subItem[column.property]\"\n            (click)=\"propagateItemClick(subItem, column.preventDefaultClickEvent)\"\n          >\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #defaultTdTemplate>\n              {{ subItem[column.property] }}\n            </ng-template>\n          </td>\n\n          <td\n            class=\"mobile-view\"\n            [attr.colspan]=\"tableColumns.length\"\n            (click)=\"propagateItemClick(subItem)\"\n          >\n            <dl class=\"mobile-view-field-wrap\">\n              <ng-container *ngFor=\"let column of tableColumns\">\n                <div\n                  *ngIf=\"!column.hidePropertyOnMobile\"\n                  class=\"mobile-view-field\"\n                  [columnType]=\"column.valueType\"\n                  [value]=\"subItem[column.property]\"\n                >\n                  <dt *ngIf=\"!column.hideLabelOnMobile\">\n                    <ng-container *transloco=\"let t\">\n                      {{ t(column.label ?? '') }}\n                    </ng-container>\n                  </dt>\n                  <dd [ngStyle]=\"column.boldTextOnMobile ? { 'font-weight': '500' } : {'font-weight': '400'}\">\n                    <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n                      <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"></ng-template>\n                    </ng-container>\n                    <ng-template #defaultTdTemplate>\n                      {{ subItem[column.property] }}\n                    </ng-template>\n                  </dd>\n                  <ng-content></ng-content>\n                </div>\n              </ng-container>\n            </dl>\n            <span\n              role=\"button\"\n              tabindex=\"0\"\n              class=\"nav-chevron-field\"\n              [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n            >\n              <svg\n                width=\"20\" height=\"20\" 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=\"1.6\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </span>\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-base300);--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;--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--sg-table-row-expand-font-weight: 500;--sg-table-row-expand-font-weight-light: 400;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--gds-ref-pallet-base300);width:100%;border-bottom:none;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}::ng-deep .gds-table thead tr th{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(--gds-ref-pallet-base300);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(--gds-ref-pallet-base300)}::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 .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::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 button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-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.no-sub-items{padding-left:1.5rem}::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)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.form-control{align-items:flex-start}::ng-deep .gds-table label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem;padding:0}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-container-color);background-color:var(--gds-comp-checkbox-border-color)}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--sg-table-header-color)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{background-color:var(--gds-comp-checkbox-border-color);box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width: 600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "18.2.13", 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<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          <label\n            [attr.for]=\"'cb_header__' + initId\"\n            class=\"form-control\"\n            id=\"thead-checkbox\"\n          >\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            <i></i>\n          </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            <label\n              [attr.for]=\"'cb_row__' + initId + '_' + i\"\n              class=\"form-control\"\n            >\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              <i></i>\n            </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\n              class=\"gds-item-field-wrap\"\n              [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n            >\n              <span\n                *ngIf=\"item.subItems.length > 0\"\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n              >\n                <svg\n                  width=\"20\" height=\"20\" 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=\"1.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            class=\"web-view\"\n            [columnType]=\"column.valueType\"\n            [value]=\"subItem[column.property]\"\n            (click)=\"propagateItemClick(subItem, column.preventDefaultClickEvent)\"\n          >\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #defaultTdTemplate>\n              {{ subItem[column.property] }}\n            </ng-template>\n          </td>\n\n          <td\n            class=\"mobile-view\"\n            [attr.colspan]=\"tableColumns.length\"\n            (click)=\"propagateItemClick(subItem)\"\n          >\n            <dl class=\"mobile-view-field-wrap\">\n              <ng-container *ngFor=\"let column of tableColumns\">\n                <div\n                  *ngIf=\"!column.hidePropertyOnMobile\"\n                  class=\"mobile-view-field\"\n                  [columnType]=\"column.valueType\"\n                  [value]=\"subItem[column.property]\"\n                >\n                  <dt *ngIf=\"!column.hideLabelOnMobile\">\n                    <ng-container *transloco=\"let t\">\n                      {{ t(column.label ?? '') }}\n                    </ng-container>\n                  </dt>\n                  <dd [ngStyle]=\"column.boldTextOnMobile ? { 'font-weight': '500' } : {'font-weight': '400'}\">\n                    <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n                      <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"></ng-template>\n                    </ng-container>\n                    <ng-template #defaultTdTemplate>\n                      {{ subItem[column.property] }}\n                    </ng-template>\n                  </dd>\n                  <ng-content></ng-content>\n                </div>\n              </ng-container>\n            </dl>\n            <span\n              role=\"button\"\n              tabindex=\"0\"\n              class=\"nav-chevron-field\"\n              [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n            >\n              <svg\n                width=\"20\" height=\"20\" 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=\"1.6\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </span>\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-base300);--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;--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--sg-table-row-expand-font-weight: 500;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--gds-ref-pallet-base300);width:100%;border-bottom:none;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}::ng-deep .gds-table thead tr th{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(--gds-ref-pallet-base300);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(--gds-ref-pallet-base300)}::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 .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::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 button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-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.no-sub-items{padding-left:1.5rem}::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)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.form-control{align-items:flex-start}::ng-deep .gds-table label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem;padding:0}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-container-color);background-color:var(--gds-comp-checkbox-border-color)}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--sg-table-header-color)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{background-color:var(--gds-comp-checkbox-border-color);box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width: 600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\n"] }]
+            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<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          <label\n            [attr.for]=\"'cb_header__' + initId\"\n            class=\"form-control\"\n            id=\"thead-checkbox\"\n          >\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            <i></i>\n          </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            <label\n              [attr.for]=\"'cb_row__' + initId + '_' + i\"\n              class=\"form-control\"\n            >\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              <i></i>\n            </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\n              class=\"gds-item-field-wrap\"\n              [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n            >\n              <span\n                *ngIf=\"item.subItems.length > 0\"\n                role=\"button\"\n                tabindex=\"0\"\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n              >\n                <svg\n                  width=\"20\" height=\"20\" 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=\"1.6\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              <span class=\"gds-item-field-text\">\n               {{ item[column.property] }} ({{ item.subItems.length }})\n                <div *ngIf=\"!!column.extraLabel\" class=\"gds-item-field-extra-label\">\n                  {{ column.extraLabel }}\n                </div>\n              </span>\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            class=\"web-view\"\n            [columnType]=\"column.valueType\"\n            [value]=\"subItem[column.property]\"\n            (click)=\"propagateItemClick(subItem, column.preventDefaultClickEvent)\"\n          >\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\">\n              </ng-template>\n            </ng-container>\n            <ng-template #defaultTdTemplate>\n              {{ subItem[column.property] }}\n            </ng-template>\n          </td>\n\n          <td\n            class=\"mobile-view\"\n            [attr.colspan]=\"tableColumns.length\"\n            (click)=\"propagateItemClick(subItem)\"\n          >\n            <dl class=\"mobile-view-field-wrap\">\n              <ng-container *ngFor=\"let column of tableColumns\">\n                <div\n                  *ngIf=\"!column.hidePropertyOnMobile\"\n                  class=\"mobile-view-field\"\n                  [columnType]=\"column.valueType\"\n                  [value]=\"subItem[column.property]\"\n                >\n                  <dt *ngIf=\"!column.hideLabelOnMobile\">\n                    <ng-container *transloco=\"let t\">\n                      {{ t(column.label ?? '') }}\n                    </ng-container>\n                  </dt>\n                  <dd [ngStyle]=\"column.boldTextOnMobile ? { 'font-weight': '500' } : {'font-weight': '400'}\">\n                    <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n                      <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"></ng-template>\n                    </ng-container>\n                    <ng-template #defaultTdTemplate>\n                      {{ subItem[column.property] }}\n                    </ng-template>\n                  </dd>\n                  <ng-content></ng-content>\n                </div>\n              </ng-container>\n            </dl>\n            <span\n              role=\"button\"\n              tabindex=\"0\"\n              class=\"nav-chevron-field\"\n              [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n            >\n              <svg\n                width=\"20\" height=\"20\" 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=\"1.6\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            </span>\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-base300);--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;--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--sg-table-row-expand-font-weight: 500;--sg-table-row-expand-font-weight-light: 400;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--gds-ref-pallet-base300);width:100%;border-bottom:none;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base300);--gds-comp-checkbox-border-color: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-ref-pallet-base900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}::ng-deep .gds-table thead tr th{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(--gds-ref-pallet-base300);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(--gds-ref-pallet-base300)}::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 .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::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 button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-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.no-sub-items{padding-left:1.5rem}::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)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.form-control{align-items:flex-start}::ng-deep .gds-table label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none;line-height:1.125rem;padding:0}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-container-color);background-color:var(--gds-comp-checkbox-border-color)}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--sg-table-header-color)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{background-color:var(--gds-comp-checkbox-border-color);box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width: 600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\n"] }]
         }], propDecorators: { customTemplates: [{
                 type: ContentChildren,
                 args: [TableTemplateDirective, { descendants: true }]