@energinet/watt 1.2.4 → 1.5.0

package/fesm2022/energinet-watt-datetime-field.mjs

@@ -41,7 +41,7 @@ class WattDateTimeField {
     // look at the entire tree for the anchor name. This gives each field a unique anchor name.
     static instance = 0;
     instance = WattDateTimeField.instance++;
-    anchorName = `--watt-field-popover-anchor-${this.instance}`;
+    anchorName = `--watt-datetime-field-popover-anchor-${this.instance}`;
     /** Converts date from outer FormControl to format of inner FormControl. */
     modelToView = (value, format = DATETIME_FORMAT) => value ? dayjs(value).tz(DANISH_TIME_ZONE_IDENTIFIER).format(format) : '';
     /** Converts value of inner FormControl to type of outer FormControl. */
@@ -85,7 +85,7 @@ class WattDateTimeField {
     handleBlur = (picker, event) => {
         if (event.relatedTarget instanceof HTMLElement && picker.contains(event.relatedTarget)) {
             const target = event.target; // safe type assertion
-            setTimeout(() => target.focus());
+            setTimeout(() => target.focus()); // keep focus on input element while using the picker
         }
         else {
             picker.hidePopover();

package/fesm2022/energinet-watt-datetime-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-datetime-field.mjs","sources":["../../../libs/watt/package/datetime-field/watt-datetime-field.component.ts","../../../libs/watt/package/datetime-field/index.ts","../../../libs/watt/package/datetime-field/energinet-watt-datetime-field.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  NG_VALUE_ACCESSOR,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatCalendar } from '@angular/material/datepicker';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { maskitoDateTimeOptionsGenerator } from '@maskito/kit';\nimport { map, share } from 'rxjs';\nimport { dayjs, WattLocaleService } from '@energinet/watt/core/date';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattButtonComponent } from '@energinet/watt/button';\n\nconst DA_FILLER = 'dd-mm-åååå, tt:mm';\nconst EN_FILLER = 'dd-mm-yyyy, hh:mm';\nconst DATETIME_FORMAT = 'DD-MM-YYYY, HH:mm';\nconst PARTIAL_DATETIME_FORMAT = 'DD-MM-YYYY, ';\nconst DANISH_TIME_ZONE_IDENTIFIER = 'Europe/Copenhagen';\n\n/* eslint-disable @angular-eslint/component-class-suffix */\n@Component({\n  selector: 'watt-datetime-field',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattDateTimeField),\n      multi: true,\n    },\n  ],\n  imports: [\n    ReactiveFormsModule,\n    MaskitoDirective,\n    MatCalendar,\n    WattButtonComponent,\n    WattFieldComponent,\n  ],\n  styles: [\n    `\n      watt-datetime-field {\n        display: block;\n        width: 100%;\n      }\n\n      .watt-datetime-field-picker {\n        position: fixed;\n        position-area: bottom span-right;\n        position-try-fallbacks: flip-block;\n        width: 296px;\n        height: 354px;\n        inset: unset;\n        margin: unset;\n        border: 0;\n      }\n    `,\n  ],\n  template: `\n    <watt-field\n      [label]=\"label()\"\n      [control]=\"control\"\n      [placeholder]=\"placeholder()\"\n      [anchorName]=\"anchorName\"\n    >\n      <input\n        #field\n        [formControl]=\"control\"\n        [maskito]=\"mask()\"\n        (focus)=\"picker.showPopover()\"\n        (blur)=\"handleBlur(picker, $event)\"\n      />\n      <watt-button icon=\"date\" variant=\"icon\" (click)=\"field.focus()\" />\n      <div\n        #picker\n        class=\"watt-elevation watt-datetime-field-picker\"\n        popover=\"manual\"\n        tabindex=\"0\"\n        [style.position-anchor]=\"anchorName\"\n      >\n        <mat-calendar\n          [startAt]=\"selected()\"\n          [selected]=\"selected()\"\n          [minDate]=\"min()\"\n          [maxDate]=\"max()\"\n          (selectedChange)=\"handleSelectedChange(field, picker, $event)\"\n        />\n      </div>\n      <ng-content />\n      <ng-content select=\"watt-field-error\" ngProjectAs=\"watt-field-error\" />\n      <ng-content select=\"watt-field-hint\" ngProjectAs=\"watt-field-hint\" />\n    </watt-field>\n  `,\n})\nexport class WattDateTimeField implements ControlValueAccessor {\n  private locale = inject(WattLocaleService);\n\n  // Popovers exists on an entirely different layer, meaning that for anchor positioning they\n  // look at the entire tree for the anchor name. This gives each field a unique anchor name.\n  private static instance = 0;\n  private instance = WattDateTimeField.instance++;\n  protected anchorName = `--watt-field-popover-anchor-${this.instance}`;\n\n  /** Converts date from outer FormControl to format of inner FormControl. */\n  protected modelToView = (value: Date | null, format = DATETIME_FORMAT) =>\n    value ? dayjs(value).tz(DANISH_TIME_ZONE_IDENTIFIER).format(format) : '';\n\n  /** Converts value of inner FormControl to type of outer FormControl. */\n  protected viewToModel = (value: string) => {\n    const date = dayjs(value, DATETIME_FORMAT, true);\n    if (!date.isValid()) return null;\n    return this.inclusive() ? date.endOf('m').toDate() : date.toDate();\n  };\n\n  // Must unfortunately be queried in order to update `activeDate`\n  private calendar = viewChild.required<MatCalendar<Date>>(MatCalendar);\n\n  // This inner FormControl is string only, but the outer FormControl is of type Date.\n  protected control = new FormControl('', { nonNullable: true });\n\n  // `registerOnChange` may subscribe to this component after it has been destroyed, thus\n  // triggering an NG0911 from the `takeUntilDestroyed` operator. By sharing the observable,\n  // the observable will already be closed and `subscribe` becomes a proper noop.\n  private valueChanges = this.control.valueChanges.pipe(\n    map(this.viewToModel),\n    takeUntilDestroyed(),\n    share()\n  );\n\n  /** Set the label text for `watt-field`. */\n  label = input('');\n\n  /** The minimum selectable date. */\n  min = input<Date>();\n\n  /** The maximum selectable date. */\n  max = input<Date>();\n\n  /** When true, seconds will be set to 59 and milliseconds to 999. Otherwise, both are 0. */\n  inclusive = input(false);\n\n  /** Emits when the selected date has changed. */\n  dateChange = outputFromObservable(this.valueChanges);\n\n  /** Emits when the field loses focus. */\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  blur = output<FocusEvent>();\n\n  protected selected = signal<Date | null>(null);\n  protected placeholder = computed(() => (this.locale.isDanish() ? DA_FILLER : EN_FILLER));\n  protected mask = computed(() =>\n    maskitoDateTimeOptionsGenerator({\n      min: this.min(),\n      max: this.max(),\n      dateMode: 'dd/mm/yyyy',\n      timeMode: 'HH:MM',\n      dateSeparator: '-',\n      timeStep: 1,\n    })\n  );\n\n  protected handleBlur = (picker: HTMLElement, event: FocusEvent) => {\n    if (event.relatedTarget instanceof HTMLElement && picker.contains(event.relatedTarget)) {\n      const target = event.target as HTMLInputElement; // safe type assertion\n      setTimeout(() => target.focus());\n    } else {\n      picker.hidePopover();\n      this.blur.emit(event);\n    }\n  };\n\n  protected handleSelectedChange = (\n    field: HTMLInputElement,\n    picker: HTMLDivElement,\n    date: Date\n  ) => {\n    const prev = this.viewToModel(this.control.value);\n\n    // Only write the date part\n    field.value = prev\n      ? this.modelToView(dayjs(date).set('h', prev.getHours()).set('m', prev.getMinutes()).toDate())\n      : this.modelToView(date, PARTIAL_DATETIME_FORMAT);\n\n    field.dispatchEvent(new Event('input', { bubbles: true }));\n    picker.hidePopover();\n  };\n\n  constructor() {\n    this.valueChanges.subscribe((value) => {\n      this.selected.set(value);\n      this.calendar().activeDate = value ?? new Date();\n    });\n  }\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: Date | null) => this.control.setValue(this.modelToView(value));\n  setDisabledState = (x: boolean) => (x ? this.control.disable() : this.control.enable());\n  registerOnTouched = (fn: () => void) => this.blur.subscribe(fn);\n  registerOnChange = (fn: (value: Date | null) => void) => this.valueChanges.subscribe(fn);\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattDateTimeField } from './watt-datetime-field.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"energinet-watt-datetime-field.mjs","sources":["../../../libs/watt/package/datetime-field/watt-datetime-field.component.ts","../../../libs/watt/package/datetime-field/index.ts","../../../libs/watt/package/datetime-field/energinet-watt-datetime-field.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  NG_VALUE_ACCESSOR,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { outputFromObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { MatCalendar } from '@angular/material/datepicker';\nimport { MaskitoDirective } from '@maskito/angular';\nimport { maskitoDateTimeOptionsGenerator } from '@maskito/kit';\nimport { map, share } from 'rxjs';\nimport { dayjs, WattLocaleService } from '@energinet/watt/core/date';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattButtonComponent } from '@energinet/watt/button';\n\nconst DA_FILLER = 'dd-mm-åååå, tt:mm';\nconst EN_FILLER = 'dd-mm-yyyy, hh:mm';\nconst DATETIME_FORMAT = 'DD-MM-YYYY, HH:mm';\nconst PARTIAL_DATETIME_FORMAT = 'DD-MM-YYYY, ';\nconst DANISH_TIME_ZONE_IDENTIFIER = 'Europe/Copenhagen';\n\n/* eslint-disable @angular-eslint/component-class-suffix */\n@Component({\n  selector: 'watt-datetime-field',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattDateTimeField),\n      multi: true,\n    },\n  ],\n  imports: [\n    ReactiveFormsModule,\n    MaskitoDirective,\n    MatCalendar,\n    WattButtonComponent,\n    WattFieldComponent,\n  ],\n  styles: [\n    `\n      watt-datetime-field {\n        display: block;\n        width: 100%;\n      }\n\n      .watt-datetime-field-picker {\n        position: fixed;\n        position-area: bottom span-right;\n        position-try-fallbacks: flip-block;\n        width: 296px;\n        height: 354px;\n        inset: unset;\n        margin: unset;\n        border: 0;\n      }\n    `,\n  ],\n  template: `\n    <watt-field\n      [label]=\"label()\"\n      [control]=\"control\"\n      [placeholder]=\"placeholder()\"\n      [anchorName]=\"anchorName\"\n    >\n      <input\n        #field\n        [formControl]=\"control\"\n        [maskito]=\"mask()\"\n        (focus)=\"picker.showPopover()\"\n        (blur)=\"handleBlur(picker, $event)\"\n      />\n      <watt-button icon=\"date\" variant=\"icon\" (click)=\"field.focus()\" />\n      <div\n        #picker\n        class=\"watt-elevation watt-datetime-field-picker\"\n        popover=\"manual\"\n        tabindex=\"0\"\n        [style.position-anchor]=\"anchorName\"\n      >\n        <mat-calendar\n          [startAt]=\"selected()\"\n          [selected]=\"selected()\"\n          [minDate]=\"min()\"\n          [maxDate]=\"max()\"\n          (selectedChange)=\"handleSelectedChange(field, picker, $event)\"\n        />\n      </div>\n      <ng-content />\n      <ng-content select=\"watt-field-error\" ngProjectAs=\"watt-field-error\" />\n      <ng-content select=\"watt-field-hint\" ngProjectAs=\"watt-field-hint\" />\n    </watt-field>\n  `,\n})\nexport class WattDateTimeField implements ControlValueAccessor {\n  private locale = inject(WattLocaleService);\n\n  // Popovers exists on an entirely different layer, meaning that for anchor positioning they\n  // look at the entire tree for the anchor name. This gives each field a unique anchor name.\n  private static instance = 0;\n  private instance = WattDateTimeField.instance++;\n  protected anchorName = `--watt-datetime-field-popover-anchor-${this.instance}`;\n\n  /** Converts date from outer FormControl to format of inner FormControl. */\n  protected modelToView = (value: Date | null, format = DATETIME_FORMAT) =>\n    value ? dayjs(value).tz(DANISH_TIME_ZONE_IDENTIFIER).format(format) : '';\n\n  /** Converts value of inner FormControl to type of outer FormControl. */\n  protected viewToModel = (value: string) => {\n    const date = dayjs(value, DATETIME_FORMAT, true);\n    if (!date.isValid()) return null;\n    return this.inclusive() ? date.endOf('m').toDate() : date.toDate();\n  };\n\n  // Must unfortunately be queried in order to update `activeDate`\n  private calendar = viewChild.required<MatCalendar<Date>>(MatCalendar);\n\n  // This inner FormControl is string only, but the outer FormControl is of type Date.\n  protected control = new FormControl('', { nonNullable: true });\n\n  // `registerOnChange` may subscribe to this component after it has been destroyed, thus\n  // triggering an NG0911 from the `takeUntilDestroyed` operator. By sharing the observable,\n  // the observable will already be closed and `subscribe` becomes a proper noop.\n  private valueChanges = this.control.valueChanges.pipe(\n    map(this.viewToModel),\n    takeUntilDestroyed(),\n    share()\n  );\n\n  /** Set the label text for `watt-field`. */\n  label = input('');\n\n  /** The minimum selectable date. */\n  min = input<Date>();\n\n  /** The maximum selectable date. */\n  max = input<Date>();\n\n  /** When true, seconds will be set to 59 and milliseconds to 999. Otherwise, both are 0. */\n  inclusive = input(false);\n\n  /** Emits when the selected date has changed. */\n  dateChange = outputFromObservable(this.valueChanges);\n\n  /** Emits when the field loses focus. */\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  blur = output<FocusEvent>();\n\n  protected selected = signal<Date | null>(null);\n  protected placeholder = computed(() => (this.locale.isDanish() ? DA_FILLER : EN_FILLER));\n  protected mask = computed(() =>\n    maskitoDateTimeOptionsGenerator({\n      min: this.min(),\n      max: this.max(),\n      dateMode: 'dd/mm/yyyy',\n      timeMode: 'HH:MM',\n      dateSeparator: '-',\n      timeStep: 1,\n    })\n  );\n\n  protected handleBlur = (picker: HTMLElement, event: FocusEvent) => {\n    if (event.relatedTarget instanceof HTMLElement && picker.contains(event.relatedTarget)) {\n      const target = event.target as HTMLInputElement; // safe type assertion\n      setTimeout(() => target.focus()); // keep focus on input element while using the picker\n    } else {\n      picker.hidePopover();\n      this.blur.emit(event);\n    }\n  };\n\n  protected handleSelectedChange = (\n    field: HTMLInputElement,\n    picker: HTMLDivElement,\n    date: Date\n  ) => {\n    const prev = this.viewToModel(this.control.value);\n\n    // Only write the date part\n    field.value = prev\n      ? this.modelToView(dayjs(date).set('h', prev.getHours()).set('m', prev.getMinutes()).toDate())\n      : this.modelToView(date, PARTIAL_DATETIME_FORMAT);\n\n    field.dispatchEvent(new Event('input', { bubbles: true }));\n    picker.hidePopover();\n  };\n\n  constructor() {\n    this.valueChanges.subscribe((value) => {\n      this.selected.set(value);\n      this.calendar().activeDate = value ?? new Date();\n    });\n  }\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: Date | null) => this.control.setValue(this.modelToView(value));\n  setDisabledState = (x: boolean) => (x ? this.control.disable() : this.control.enable());\n  registerOnTouched = (fn: () => void) => this.blur.subscribe(fn);\n  registerOnChange = (fn: (value: Date | null) => void) => this.valueChanges.subscribe(fn);\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattDateTimeField } from './watt-datetime-field.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/energinet-watt-query-params.mjs

@@ -54,6 +54,23 @@ class WattQueryParamsDirective {
                 // after which arrays are parsed as objects
                 // See https://github.com/ljharb/qs?tab=readme-ov-file#parsing-arrays
                 arrayLimit: 200,
+                // https://github.com/ljharb/qs/issues/91#issuecomment-1833694874
+                decoder(str, defaultDecoder, charset, type) {
+                    if (type === 'value' &&
+                        /^(?:-(?:[1-9](?:\d{0,2}(?:,\d{3})+|\d*))|(?:0|(?:[1-9](?:\d{0,2}(?:,\d{3})+|\d*))))(?:.\d+|)$/.test(str)) {
+                        return parseFloat(str);
+                    }
+                    const keywords = {
+                        true: true,
+                        false: false,
+                        null: null,
+                        undefined: undefined,
+                    };
+                    if (type === 'value' && str in keywords) {
+                        return keywords[str];
+                    }
+                    return defaultDecoder(str, defaultDecoder, charset);
+                },
             });
             this.formGroup.control.patchValue(value);
         }

package/fesm2022/energinet-watt-query-params.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-query-params.mjs","sources":["../../../libs/watt/package/query-params/watt-query-params.directive.ts","../../../libs/watt/package/query-params/index.ts","../../../libs/watt/package/query-params/energinet-watt-query-params.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { DestroyRef, Directive, OnInit, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormGroupDirective } from '@angular/forms';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport qs from 'qs';\n\nconst filtersKey = 'filters';\n\n@Directive({\n  selector: '[formGroup][wattQueryParams]',\n})\nexport class WattQueryParamsDirective implements OnInit {\n  private formGroup = inject(FormGroupDirective);\n  private destoryRef = inject(DestroyRef);\n  private router = inject(Router);\n  private route = inject(ActivatedRoute);\n\n  // eslint-disable-next-line sonarjs/cognitive-complexity\n  ngOnInit(): void {\n    this.formGroup.valueChanges\n      ?.pipe(takeUntilDestroyed(this.destoryRef))\n      .subscribe((formValues) => {\n        const formValuesClone = structuredClone(formValues);\n\n        for (const key in formValuesClone) {\n          if (formValuesClone[key] === null || formValuesClone[key] === undefined) {\n            delete formValuesClone[key];\n          }\n        }\n\n        const hasSetProperties = Object.keys(formValuesClone).length > 0;\n\n        this.router.navigate([], {\n          replaceUrl: true,\n          relativeTo: this.route,\n          queryParams: { [filtersKey]: hasSetProperties ? qs.stringify(formValuesClone) : null },\n          queryParamsHandling: 'merge',\n        });\n      });\n\n    if (Object.keys(this.route.snapshot.queryParams).length > 0) {\n      const value = qs.parse(this.route.snapshot.queryParams[filtersKey] ?? '', {\n        // Needed because `qs` library has a default value of 20 elements\n        // after which arrays are parsed as objects\n        // See https://github.com/ljharb/qs?tab=readme-ov-file#parsing-arrays\n        arrayLimit: 200,\n      });\n\n      this.formGroup.control.patchValue(value);\n    }\n  }\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattQueryParamsDirective } from './watt-query-params.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAAA;AACA;;;;;;;;;;;;;;;AAeG;AACH;AAOA,MAAM,UAAU,GAAG,SAAS;MAKf,wBAAwB,CAAA;AAC3B,IAAA,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC;AACtC,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;AAC/B,IAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;AACvB,IAAA,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC;;IAGtC,QAAQ,GAAA;QACN,IAAI,CAAC,SAAS,CAAC;cACX,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;AACzC,aAAA,SAAS,CAAC,CAAC,UAAU,KAAI;AACxB,YAAA,MAAM,eAAe,GAAG,eAAe,CAAC,UAAU,CAAC;AAEnD,YAAA,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE;AACjC,gBAAA,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE;AACvE,oBAAA,OAAO,eAAe,CAAC,GAAG,CAAC;;;AAI/B,YAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC;AAEhE,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE;AACvB,gBAAA,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,IAAI,CAAC,KAAK;gBACtB,WAAW,EAAE,EAAE,CAAC,UAAU,GAAG,gBAAgB,GAAG,EAAE,CAAC,SAAS,CAAC,eAAe,CAAC,GAAG,IAAI,EAAE;AACtF,gBAAA,mBAAmB,EAAE,OAAO;AAC7B,aAAA,CAAC;AACJ,SAAC,CAAC;AAEJ,QAAA,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;AAC3D,YAAA,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE;;;;AAIxE,gBAAA,UAAU,EAAE,GAAG;AAChB,aAAA,CAAC;YAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC;;;uGArCjC,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAHpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,8BAA8B;AACzC,iBAAA;;;AC5BD;AACA;;;;;;;;;;;;;;;AAeG;AACH;;ACjBA;;AAEG;;;;"}
+{"version":3,"file":"energinet-watt-query-params.mjs","sources":["../../../libs/watt/package/query-params/watt-query-params.directive.ts","../../../libs/watt/package/query-params/index.ts","../../../libs/watt/package/query-params/energinet-watt-query-params.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { DestroyRef, Directive, OnInit, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormGroupDirective } from '@angular/forms';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport qs from 'qs';\n\nconst filtersKey = 'filters';\n\n@Directive({\n  selector: '[formGroup][wattQueryParams]',\n})\nexport class WattQueryParamsDirective implements OnInit {\n  private formGroup = inject(FormGroupDirective);\n  private destoryRef = inject(DestroyRef);\n  private router = inject(Router);\n  private route = inject(ActivatedRoute);\n\n  // eslint-disable-next-line sonarjs/cognitive-complexity\n  ngOnInit(): void {\n    this.formGroup.valueChanges\n      ?.pipe(takeUntilDestroyed(this.destoryRef))\n      .subscribe((formValues) => {\n        const formValuesClone = structuredClone(formValues);\n\n        for (const key in formValuesClone) {\n          if (formValuesClone[key] === null || formValuesClone[key] === undefined) {\n            delete formValuesClone[key];\n          }\n        }\n\n        const hasSetProperties = Object.keys(formValuesClone).length > 0;\n\n        this.router.navigate([], {\n          replaceUrl: true,\n          relativeTo: this.route,\n          queryParams: { [filtersKey]: hasSetProperties ? qs.stringify(formValuesClone) : null },\n          queryParamsHandling: 'merge',\n        });\n      });\n\n    if (Object.keys(this.route.snapshot.queryParams).length > 0) {\n      const value = qs.parse(this.route.snapshot.queryParams[filtersKey] ?? '', {\n        // Needed because `qs` library has a default value of 20 elements\n        // after which arrays are parsed as objects\n        // See https://github.com/ljharb/qs?tab=readme-ov-file#parsing-arrays\n        arrayLimit: 200,\n        // https://github.com/ljharb/qs/issues/91#issuecomment-1833694874\n        decoder(\n          str: string,\n          defaultDecoder: qs.defaultDecoder,\n          charset: string,\n          type: 'key' | 'value'\n        ) {\n          if (\n            type === 'value' &&\n            /^(?:-(?:[1-9](?:\\d{0,2}(?:,\\d{3})+|\\d*))|(?:0|(?:[1-9](?:\\d{0,2}(?:,\\d{3})+|\\d*))))(?:.\\d+|)$/.test(\n              str\n            )\n          ) {\n            return parseFloat(str);\n          }\n\n          const keywords: Record<string, boolean | null | undefined> = {\n            true: true,\n            false: false,\n            null: null,\n            undefined: undefined,\n          };\n          if (type === 'value' && str in keywords) {\n            return keywords[str];\n          }\n\n          return defaultDecoder(str, defaultDecoder, charset);\n        },\n      });\n\n      this.formGroup.control.patchValue(value);\n    }\n  }\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattQueryParamsDirective } from './watt-query-params.directive';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/energinet-watt-segmented-buttons.mjs

@@ -0,0 +1,149 @@
+import * as i2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i0 from '@angular/core';
+import { viewChild, TemplateRef, input, Component, contentChildren, model, signal, inject, ElementRef, forwardRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { NgTemplateOutlet } from '@angular/common';
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+class WattSegmentedButtonComponent {
+    templateRef = viewChild.required(TemplateRef);
+    value = input.required();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattSegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.1", type: WattSegmentedButtonComponent, isStandalone: true, selector: "watt-segmented-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template>
+    <ng-content />
+  </ng-template>`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattSegmentedButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'watt-segmented-button',
+                    template: ` <ng-template>
+    <ng-content />
+  </ng-template>`,
+                }]
+        }] });
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+/**
+ * Segmented buttons.
+ */
+class WattSegmentedButtonsComponent {
+    segmentedButtonElements = contentChildren(WattSegmentedButtonComponent);
+    selected = model('');
+    disabled = signal(false);
+    element = inject(ElementRef);
+    writeValue(selected) {
+        this.selected.set(selected);
+    }
+    registerOnChange(fn) {
+        this.selected.subscribe(fn);
+    }
+    registerOnTouched(fn) {
+        this.element.nativeElement.addEventListener('focusout', fn);
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattSegmentedButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattSegmentedButtonsComponent, isStandalone: true, selector: "watt-segmented-buttons", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WattSegmentedButtonsComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "segmentedButtonElements", predicate: WattSegmentedButtonComponent, isSignal: true }], ngImport: i0, template: ` <mat-button-toggle-group
+    [(ngModel)]="selected"
+    [multiple]="false"
+    [hideSingleSelectionIndicator]="true"
+    [disabled]="disabled()"
+  >
+    @for (segmentedButton of segmentedButtonElements(); track segmentedButton) {
+      <mat-button-toggle [disableRipple]="true" [value]="segmentedButton.value()">
+        <ng-container *ngTemplateOutlet="segmentedButton.templateRef()" />
+      </mat-button-toggle>
+    }
+  </mat-button-toggle-group>`, isInline: true, styles: [":root{--mat-standard-button-toggle-selected-state-text-color: white}:root{--mat-standard-button-toggle-selected-state-background-color: var(--watt-color-primary)}:root{--mat-standard-button-toggle-height: 2.5rem}:root mat-button-toggle-group{border-color:var(--watt-color-neutral-grey-700)}:root mat-button-toggle-group mat-button-toggle{border-color:var(--watt-color-neutral-grey-700)!important}:root mat-button-toggle-group mat-button-toggle button{width:6.5rem}:root mat-button-toggle-group mat-button-toggle button span{font-size:.875rem;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattSegmentedButtonsComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatButtonToggleModule, FormsModule, NgTemplateOutlet], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WattSegmentedButtonsComponent),
+                            multi: true,
+                        },
+                    ], selector: 'watt-segmented-buttons', template: ` <mat-button-toggle-group
+    [(ngModel)]="selected"
+    [multiple]="false"
+    [hideSingleSelectionIndicator]="true"
+    [disabled]="disabled()"
+  >
+    @for (segmentedButton of segmentedButtonElements(); track segmentedButton) {
+      <mat-button-toggle [disableRipple]="true" [value]="segmentedButton.value()">
+        <ng-container *ngTemplateOutlet="segmentedButton.templateRef()" />
+      </mat-button-toggle>
+    }
+  </mat-button-toggle-group>`, styles: [":root{--mat-standard-button-toggle-selected-state-text-color: white}:root{--mat-standard-button-toggle-selected-state-background-color: var(--watt-color-primary)}:root{--mat-standard-button-toggle-height: 2.5rem}:root mat-button-toggle-group{border-color:var(--watt-color-neutral-grey-700)}:root mat-button-toggle-group mat-button-toggle{border-color:var(--watt-color-neutral-grey-700)!important}:root mat-button-toggle-group mat-button-toggle button{width:6.5rem}:root mat-button-toggle-group mat-button-toggle button span{font-size:.875rem;font-weight:600}\n"] }]
+        }] });
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WattSegmentedButtonComponent, WattSegmentedButtonsComponent };
+//# sourceMappingURL=energinet-watt-segmented-buttons.mjs.map

package/fesm2022/energinet-watt-segmented-buttons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energinet-watt-segmented-buttons.mjs","sources":["../../../libs/watt/package/segmented-buttons/watt-segmented-button.component.ts","../../../libs/watt/package/segmented-buttons/watt-segmented-buttons.component.ts","../../../libs/watt/package/segmented-buttons/index.ts","../../../libs/watt/package/segmented-buttons/energinet-watt-segmented-buttons.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Component, input, TemplateRef, viewChild } from '@angular/core';\n\n@Component({\n  selector: 'watt-segmented-button',\n  template: ` <ng-template>\n    <ng-content />\n  </ng-template>`,\n})\nexport class WattSegmentedButtonComponent {\n  templateRef = viewChild.required<TemplateRef<unknown>>(TemplateRef);\n  value = input.required<string>();\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  contentChildren,\n  ElementRef,\n  forwardRef,\n  inject,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\n\n/**\n * Segmented buttons.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [MatButtonToggleModule, FormsModule, NgTemplateOutlet],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattSegmentedButtonsComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-segmented-buttons',\n  styleUrls: ['./watt-segmented-buttons.component.scss'],\n  template: ` <mat-button-toggle-group\n    [(ngModel)]=\"selected\"\n    [multiple]=\"false\"\n    [hideSingleSelectionIndicator]=\"true\"\n    [disabled]=\"disabled()\"\n  >\n    @for (segmentedButton of segmentedButtonElements(); track segmentedButton) {\n      <mat-button-toggle [disableRipple]=\"true\" [value]=\"segmentedButton.value()\">\n        <ng-container *ngTemplateOutlet=\"segmentedButton.templateRef()\" />\n      </mat-button-toggle>\n    }\n  </mat-button-toggle-group>`,\n})\nexport class WattSegmentedButtonsComponent implements ControlValueAccessor {\n  segmentedButtonElements = contentChildren(WattSegmentedButtonComponent);\n  selected = model<string>('');\n  disabled = signal(false);\n  private element = inject(ElementRef);\n\n  writeValue(selected: string): void {\n    this.selected.set(selected);\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.selected.subscribe(fn);\n  }\n\n  registerOnTouched(fn: (value: boolean) => void): void {\n    this.element.nativeElement.addEventListener('focusout', fn);\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattSegmentedButtonsComponent } from './watt-segmented-buttons.component';\nexport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/energinet-watt-table.mjs

@@ -119,6 +119,10 @@ class WattTableComponent {
      * when there is no data.
      */
     loading = false;
+    /**
+     * If true the footer will be sticky
+     */
+    stickyFooter = false;
     /**
      * Optional callback for determining header text for columns that
      * do not have a static header text set in the column definition.
@@ -329,7 +333,7 @@ class WattTableComponent {
         this.rowClick.emit(row);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattTableComponent, isStandalone: true, selector: "watt-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, resolveHeader: { classPropertyName: "resolveHeader", publicName: "resolveHeader", isSignal: false, isRequired: false, transformFunction: null }, sortBy: { classPropertyName: "sortBy", publicName: "sortBy", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortClear: { classPropertyName: "sortClear", publicName: "sortClear", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, suppressRowHoverHighlight: { classPropertyName: "suppressRowHoverHighlight", publicName: "suppressRowHoverHighlight", isSignal: false, isRequired: false, transformFunction: null }, activeRow: { classPropertyName: "activeRow", publicName: "activeRow", isSignal: false, isRequired: false, transformFunction: null }, activeRowComparator: { classPropertyName: "activeRowComparator", publicName: "activeRowComparator", isSignal: false, isRequired: false, transformFunction: null }, hideColumnHeaders: { classPropertyName: "hideColumnHeaders", publicName: "hideColumnHeaders", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", rowClick: "rowClick", sortChange: "sortChange" }, providers: [WattDatePipe], queries: [{ propertyName: "_toolbar", first: true, predicate: WattTableToolbarDirective, descendants: true }, { propertyName: "_cells", predicate: WattTableCellDirective }], viewQueries: [{ propertyName: "_sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<table\n  mat-table\n  matSort\n  role=\"treegrid\"\n  [ngClass]=\"{ 'watt-table-has-selection': _filteredSelection.length > 0 }\"\n  [matSortActive]=\"sortBy\"\n  [matSortDirection]=\"sortDirection\"\n  [matSortDisableClear]=\"!sortClear\"\n  [dataSource]=\"dataSource\"\n  [attr.aria-label]=\"description\"\n  (matSortChange)=\"sortChange.emit($event)\"\n>\n  @if (selectable) {\n    <ng-container [matColumnDef]=\"_checkboxColumn\" [sticky]=\"true\">\n      <th mat-header-cell *matHeaderCellDef class=\"watt-table-checkbox-cell\">\n        <watt-checkbox [(ngModel)]=\"_columnSelection\" />\n      </th>\n      <td mat-cell *matCellDef=\"let row\" class=\"watt-table-checkbox-cell\">\n        <watt-checkbox\n          [ngModel]=\"_selectionModel.isSelected(row)\"\n          (ngModelChange)=\"_selectionModel.toggle(row)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </td>\n    </ng-container>\n  }\n\n  @for (column of columns | keyvalue; track column.key) {\n    <ng-container [matColumnDef]=\"column.key\" [stickyEnd]=\"column.value.stickyEnd?.()\">\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        class=\"watt-table-align-{{ column.value.align ?? 'left' }} {{\n          column.value.headerCellClass\n        }}\"\n      >\n        @if (_getColumnHelperAction(column); as action) {\n          <watt-icon name=\"help\" (click)=\"action()\" />\n        }\n\n        <div\n          class=\"watt-table-header-cell\"\n          mat-sort-header\n          [arrowPosition]=\"column.value.align === 'right' ? 'before' : 'after'\"\n          [disabled]=\"!column.value.accessor || column.value.sort === false\"\n        >\n          {{ _getColumnHeader(column) }}\n        </div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"watt-table-align-{{ column.value.align ?? 'left' }} {{ column.value.dataCellClass }}\"\n      >\n        @if (_getColumnTemplate(column.value); as template) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: row }\" />\n          </div>\n        } @else {\n          {{ _getColumnCell(column, row) }}\n        }\n      </td>\n\n      @if (_hasFooter) {\n        <td\n          mat-footer-cell\n          *matFooterCellDef\n          class=\"{{ column.value.footer?.class }} watt-table-align-{{\n            column.value.align ?? 'left'\n          }}\"\n        >\n          {{ column.value.footer?.value?.() }}\n        </td>\n      }\n    </ng-container>\n  }\n\n  <ng-container matColumnDef=\"spacer\">\n    <td class=\"watt-table-footer-spacer\" mat-footer-cell *matFooterCellDef></td>\n  </ng-container>\n\n  @if (!hideColumnHeaders) {\n    <tr mat-header-row *matHeaderRowDef=\"_getColumns()\"></tr>\n  }\n  <tr\n    mat-row\n    *matRowDef=\"let row; columns: _getColumns()\"\n    [attr.aria-selected]=\"row === activeRow\"\n    (click)=\"_onRowClick(row)\"\n    [ngClass]=\"{\n      'watt-table-highlight-row': !disabled && !suppressRowHoverHighlight,\n      'watt-table-clickable-row': !disabled && rowClick.observed,\n      'watt-table-active-row': _isActiveRow(row),\n      'watt-table-no-end-divider': hideColumnHeaders,\n    }\"\n  ></tr>\n\n  @if (_toolbar) {\n    <tr mat-footer-row *matFooterRowDef=\"['spacer']\"></tr>\n  }\n\n  @if (_hasFooter) {\n    <tr mat-footer-row *matFooterRowDef=\"_getColumns()\"></tr>\n  }\n\n  <ng-container *matNoDataRow>\n    @if (loading) {\n      @for (i of [1, 2, 3]; track i) {\n        <tr class=\"mat-mdc-row\">\n          @for (_ of _getColumns(); track _; let i = $index) {\n            <td class=\"mat-mdc-cell\" [class.watt-table-loading-cell]=\"i > 0 || !selectable\"></td>\n          }\n        </tr>\n      }\n    }\n  </ng-container>\n</table>\n\n@if (_toolbar) {\n  <div class=\"watt-table-toolbar\" role=\"toolbar\">\n    <ng-container\n      *ngTemplateOutlet=\"_toolbar.templateRef; context: { $implicit: _filteredSelection }\"\n    />\n  </div>\n}\n", styles: ["watt-table{--mat-table-row-item-label-text-font: $primary-font-family;--mat-table-row-item-outline-color: var(--watt-color-neutral-grey-300);--mat-table-header-headline-font: $primary-font-family}watt-table,watt-table .mat-mdc-table{display:grid;position:relative;overflow:auto;min-height:44px}watt-table .mat-mdc-table{grid-template-columns:var(--watt-table-grid-template-columns);grid-auto-rows:max-content;max-height:100%;z-index:1}watt-table .mat-mdc-table thead,watt-table .mat-mdc-table tbody,watt-table .mat-mdc-table tfoot,watt-table .mat-mdc-table tr.mat-mdc-row,watt-table .mat-mdc-table tr.mat-mdc-header-row,watt-table .mat-mdc-table tr.mat-mdc-footer-row{display:contents}watt-table .mat-mdc-table tr.mat-mdc-header-row{flex:0 0 auto}watt-table .mat-mdc-table th.mat-mdc-header-cell{color:var(--watt-typography-label-color);font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:uppercase;box-sizing:border-box;display:flex;position:sticky;top:0;padding:0 var(--watt-space-s);height:auto;background:var(--watt-color-primary-ultralight);box-shadow:0 -1px #0000001f inset;border:0;z-index:2!important;white-space:nowrap;-webkit-user-select:none;user-select:none}watt-table .mat-mdc-table td.mat-mdc-footer-cell,watt-table .mat-mdc-table td.mat-mdc-cell{display:flex;align-items:center;min-height:56px;padding:var(--watt-space-s) var(--watt-space-m)}watt-table .mat-mdc-table td.mat-mdc-footer-cell,watt-table .mat-mdc-table tr.mdc-data-table__row:last-child .mat-mdc-cell{border-bottom:1px solid var(--watt-color-neutral-grey-300)}watt-table .mat-mdc-table td.mat-mdc-footer-cell{font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:none;letter-spacing:0;border-top:2px solid var(--watt-color-neutral-grey-300);background-color:var(--watt-color-neutral-grey-100)}watt-table .mat-mdc-table .watt-table-no-end-divider:last-child .mat-mdc-cell{border-bottom:0px solid var(--watt-color-neutral-grey-300)!important}watt-table .mat-mdc-table .watt-table-clickable-row td{cursor:pointer;-webkit-user-select:text;user-select:text}watt-table .mat-mdc-table .watt-table-highlight-row:hover:not(.watt-table-active-row) td{background:var(--watt-color-neutral-grey-100)}watt-table .mat-mdc-table .watt-table-active-row td{background:var(--watt-color-secondary-ultralight)}watt-table .mat-mdc-table .mat-sort-header-arrow{margin:0}watt-table .mat-mdc-table .mat-sort-header-arrow{margin-left:var(--watt-space-s)}watt-table .mat-mdc-table .watt-table-header-cell{padding:.75rem var(--watt-space-s)}watt-table .mat-mdc-table .watt-table-checkbox-cell{justify-content:center}watt-table .mat-mdc-table th.watt-table-checkbox-cell{display:flex;align-items:center}watt-table .mat-mdc-table .watt-table-align-center,watt-table .mat-mdc-table .watt-table-align-center .mat-sort-header-container{justify-content:center}watt-table .mat-mdc-table .watt-table-align-right,watt-table .mat-mdc-table .watt-table-align-right .mat-sort-header-container{justify-content:right}.watt-table-footer-spacer{display:none;height:76px;border:0}.watt-table-has-selection .watt-table-footer-spacer{display:block}.watt-table-has-selection+.watt-table-toolbar{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(0,0,.2,1),visibility .5s}.watt-table-toolbar{position:absolute;bottom:var(--watt-space-m);left:50%;transform:translate(-50%);display:flex;align-items:center;padding:0 var(--watt-space-m);min-height:44px;border-radius:22px;color:var(--watt-color-primary-contrast);background-color:var(--watt-color-primary);z-index:1;opacity:0;visibility:hidden;transition:none}.watt-table-toolbar .watt-button--disabled{opacity:.4;--watt-button-primary-disabled-color: #fff}.watt-table-loading-cell:before{content:\"\";flex:1;display:block;max-width:200px;height:var(--watt-space-m);border-radius:var(--watt-space-m);opacity:.75;animation:shine 2s infinite linear;background-color:var(--watt-color-neutral-grey-200);background-size:300px;background-position:-100px;background-image:linear-gradient(90deg,var(--watt-color-neutral-grey-300) 0px,var(--watt-color-neutral-grey-200) 40px,var(--watt-color-neutral-grey-300) 80px)}@keyframes shine{40%,to{background-position:200px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: WattCheckboxComponent, selector: "watt-checkbox", inputs: ["required"] }, { kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattTableComponent, isStandalone: true, selector: "watt-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: false, isRequired: false, transformFunction: null }, resolveHeader: { classPropertyName: "resolveHeader", publicName: "resolveHeader", isSignal: false, isRequired: false, transformFunction: null }, sortBy: { classPropertyName: "sortBy", publicName: "sortBy", isSignal: false, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: false, isRequired: false, transformFunction: null }, sortClear: { classPropertyName: "sortClear", publicName: "sortClear", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: null }, initialSelection: { classPropertyName: "initialSelection", publicName: "initialSelection", isSignal: true, isRequired: false, transformFunction: null }, suppressRowHoverHighlight: { classPropertyName: "suppressRowHoverHighlight", publicName: "suppressRowHoverHighlight", isSignal: false, isRequired: false, transformFunction: null }, activeRow: { classPropertyName: "activeRow", publicName: "activeRow", isSignal: false, isRequired: false, transformFunction: null }, activeRowComparator: { classPropertyName: "activeRowComparator", publicName: "activeRowComparator", isSignal: false, isRequired: false, transformFunction: null }, hideColumnHeaders: { classPropertyName: "hideColumnHeaders", publicName: "hideColumnHeaders", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", rowClick: "rowClick", sortChange: "sortChange" }, providers: [WattDatePipe], queries: [{ propertyName: "_toolbar", first: true, predicate: WattTableToolbarDirective, descendants: true }, { propertyName: "_cells", predicate: WattTableCellDirective }], viewQueries: [{ propertyName: "_sort", first: true, predicate: MatSort, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<table\n  mat-table\n  matSort\n  role=\"treegrid\"\n  [ngClass]=\"{ 'watt-table-has-selection': _filteredSelection.length > 0 }\"\n  [matSortActive]=\"sortBy\"\n  [matSortDirection]=\"sortDirection\"\n  [matSortDisableClear]=\"!sortClear\"\n  [dataSource]=\"dataSource\"\n  [attr.aria-label]=\"description\"\n  (matSortChange)=\"sortChange.emit($event)\"\n>\n  @if (selectable) {\n    <ng-container [matColumnDef]=\"_checkboxColumn\" [sticky]=\"true\">\n      <th mat-header-cell *matHeaderCellDef class=\"watt-table-checkbox-cell\">\n        <watt-checkbox [(ngModel)]=\"_columnSelection\" />\n      </th>\n      <td mat-cell *matCellDef=\"let row\" class=\"watt-table-checkbox-cell\">\n        <watt-checkbox\n          [ngModel]=\"_selectionModel.isSelected(row)\"\n          (ngModelChange)=\"_selectionModel.toggle(row)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </td>\n    </ng-container>\n  }\n\n  @for (column of columns | keyvalue; track column.key) {\n    <ng-container [matColumnDef]=\"column.key\" [stickyEnd]=\"column.value.stickyEnd?.()\">\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        class=\"watt-table-align-{{ column.value.align ?? 'left' }} {{\n          column.value.headerCellClass\n        }}\"\n      >\n        @if (_getColumnHelperAction(column); as action) {\n          <watt-icon name=\"help\" (click)=\"action()\" />\n        }\n\n        <div\n          class=\"watt-table-header-cell\"\n          mat-sort-header\n          [arrowPosition]=\"column.value.align === 'right' ? 'before' : 'after'\"\n          [disabled]=\"!column.value.accessor || column.value.sort === false\"\n        >\n          {{ _getColumnHeader(column) }}\n        </div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"watt-table-align-{{ column.value.align ?? 'left' }} {{ column.value.dataCellClass }}\"\n      >\n        @if (_getColumnTemplate(column.value); as template) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: row }\" />\n          </div>\n        } @else {\n          {{ _getColumnCell(column, row) }}\n        }\n      </td>\n\n      @if (_hasFooter) {\n        <td\n          mat-footer-cell\n          *matFooterCellDef\n          class=\"{{ column.value.footer?.class }} watt-table-align-{{\n            column.value.align ?? 'left'\n          }}\"\n        >\n          {{ column.value.footer?.value?.() }}\n        </td>\n      }\n    </ng-container>\n  }\n\n  <ng-container matColumnDef=\"spacer\">\n    <td class=\"watt-table-footer-spacer\" mat-footer-cell *matFooterCellDef></td>\n  </ng-container>\n\n  @if (!hideColumnHeaders) {\n    <tr mat-header-row *matHeaderRowDef=\"_getColumns()\"></tr>\n  }\n  <tr\n    mat-row\n    *matRowDef=\"let row; columns: _getColumns()\"\n    [attr.aria-selected]=\"row === activeRow\"\n    (click)=\"_onRowClick(row)\"\n    [ngClass]=\"{\n      'watt-table-highlight-row': !disabled && !suppressRowHoverHighlight,\n      'watt-table-clickable-row': !disabled && rowClick.observed,\n      'watt-table-active-row': _isActiveRow(row),\n      'watt-table-no-end-divider': hideColumnHeaders,\n    }\"\n  ></tr>\n\n  @if (_toolbar) {\n    <tr mat-footer-row *matFooterRowDef=\"['spacer']\"></tr>\n  }\n\n  @if (_hasFooter && !stickyFooter) {\n    <tr mat-footer-row *matFooterRowDef=\"_getColumns()\"></tr>\n  }\n\n  @if (_hasFooter && stickyFooter) {\n    <tr mat-footer-row *matFooterRowDef=\"_getColumns(); sticky: true\"></tr>\n  }\n\n  <ng-container *matNoDataRow>\n    @if (loading) {\n      @for (i of [1, 2, 3]; track i) {\n        <tr class=\"mat-mdc-row\">\n          @for (_ of _getColumns(); track _; let i = $index) {\n            <td class=\"mat-mdc-cell\" [class.watt-table-loading-cell]=\"i > 0 || !selectable\"></td>\n          }\n        </tr>\n      }\n    }\n  </ng-container>\n</table>\n\n@if (_toolbar) {\n  <div class=\"watt-table-toolbar\" role=\"toolbar\">\n    <ng-container\n      *ngTemplateOutlet=\"_toolbar.templateRef; context: { $implicit: _filteredSelection }\"\n    />\n  </div>\n}\n", styles: ["watt-table{--mat-table-row-item-label-text-font: $primary-font-family;--mat-table-row-item-outline-color: var(--watt-color-neutral-grey-300);--mat-table-header-headline-font: $primary-font-family}watt-table,watt-table .mat-mdc-table{display:grid;position:relative;overflow:auto;min-height:44px}watt-table .mat-mdc-table{grid-template-columns:var(--watt-table-grid-template-columns);grid-auto-rows:max-content;max-height:100%;z-index:1}watt-table .mat-mdc-table thead,watt-table .mat-mdc-table tbody,watt-table .mat-mdc-table tfoot,watt-table .mat-mdc-table tr.mat-mdc-row,watt-table .mat-mdc-table tr.mat-mdc-header-row,watt-table .mat-mdc-table tr.mat-mdc-footer-row{display:contents}watt-table .mat-mdc-table tr.mat-mdc-header-row{flex:0 0 auto}watt-table .mat-mdc-table th.mat-mdc-header-cell{color:var(--watt-typography-label-color);font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:uppercase;box-sizing:border-box;display:flex;position:sticky;top:0;padding:0 var(--watt-space-s);height:auto;background:var(--watt-color-primary-ultralight);box-shadow:0 -1px #0000001f inset;border:0;z-index:2!important;white-space:nowrap;-webkit-user-select:none;user-select:none}watt-table .mat-mdc-table td.mat-mdc-footer-cell,watt-table .mat-mdc-table td.mat-mdc-cell{display:flex;align-items:center;min-height:56px;padding:var(--watt-space-s) var(--watt-space-m)}watt-table .mat-mdc-table td.mat-mdc-footer-cell,watt-table .mat-mdc-table tr.mdc-data-table__row:last-child .mat-mdc-cell{border-bottom:1px solid var(--watt-color-neutral-grey-300)}watt-table .mat-mdc-table td.mat-mdc-footer-cell{font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:none;letter-spacing:0;border-top:2px solid var(--watt-color-neutral-grey-300);background-color:var(--watt-color-neutral-grey-100)}watt-table .mat-mdc-table .watt-table-no-end-divider:last-child .mat-mdc-cell{border-bottom:0px solid var(--watt-color-neutral-grey-300)!important}watt-table .mat-mdc-table .watt-table-clickable-row td{cursor:pointer;-webkit-user-select:text;user-select:text}watt-table .mat-mdc-table .watt-table-highlight-row:hover:not(.watt-table-active-row) td{background:var(--watt-color-neutral-grey-100)}watt-table .mat-mdc-table .watt-table-active-row td{background:var(--watt-color-secondary-ultralight)}watt-table .mat-mdc-table .mat-sort-header-arrow{margin:0}watt-table .mat-mdc-table .mat-sort-header-arrow{margin-left:var(--watt-space-s)}watt-table .mat-mdc-table .watt-table-header-cell{padding:.75rem var(--watt-space-s)}watt-table .mat-mdc-table .watt-table-checkbox-cell{justify-content:center}watt-table .mat-mdc-table th.watt-table-checkbox-cell{display:flex;align-items:center}watt-table .mat-mdc-table .watt-table-align-center,watt-table .mat-mdc-table .watt-table-align-center .mat-sort-header-container{justify-content:center}watt-table .mat-mdc-table .watt-table-align-right,watt-table .mat-mdc-table .watt-table-align-right .mat-sort-header-container{justify-content:right}.watt-table-footer-spacer{display:none;height:76px;border:0}.watt-table-has-selection .watt-table-footer-spacer{display:block}.watt-table-has-selection+.watt-table-toolbar{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(0,0,.2,1),visibility .5s}.watt-table-toolbar{position:absolute;bottom:var(--watt-space-m);left:50%;transform:translate(-50%);display:flex;align-items:center;padding:0 var(--watt-space-m);min-height:44px;border-radius:22px;color:var(--watt-color-primary-contrast);background-color:var(--watt-color-primary);z-index:1;opacity:0;visibility:hidden;transition:none}.watt-table-toolbar .watt-button--disabled{opacity:.4;--watt-button-primary-disabled-color: #fff}.watt-table-loading-cell:before{content:\"\";flex:1;display:block;max-width:200px;height:var(--watt-space-m);border-radius:var(--watt-space-m);opacity:.75;animation:shine 2s infinite linear;background-color:var(--watt-color-neutral-grey-200);background-size:300px;background-position:-100px;background-image:linear-gradient(90deg,var(--watt-color-neutral-grey-300) 0px,var(--watt-color-neutral-grey-200) 40px,var(--watt-color-neutral-grey-300) 80px)}@keyframes shine{40%,to{background-position:200px}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i3.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i3.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i3.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: i3.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: WattCheckboxComponent, selector: "watt-checkbox", inputs: ["required"] }, { kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattTableComponent, decorators: [{
             type: Component,
@@ -342,7 +346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         MatTableModule,
                         WattCheckboxComponent,
                         WattIconComponent,
-                    ], providers: [WattDatePipe], encapsulation: ViewEncapsulation.None, selector: 'watt-table', template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<table\n  mat-table\n  matSort\n  role=\"treegrid\"\n  [ngClass]=\"{ 'watt-table-has-selection': _filteredSelection.length > 0 }\"\n  [matSortActive]=\"sortBy\"\n  [matSortDirection]=\"sortDirection\"\n  [matSortDisableClear]=\"!sortClear\"\n  [dataSource]=\"dataSource\"\n  [attr.aria-label]=\"description\"\n  (matSortChange)=\"sortChange.emit($event)\"\n>\n  @if (selectable) {\n    <ng-container [matColumnDef]=\"_checkboxColumn\" [sticky]=\"true\">\n      <th mat-header-cell *matHeaderCellDef class=\"watt-table-checkbox-cell\">\n        <watt-checkbox [(ngModel)]=\"_columnSelection\" />\n      </th>\n      <td mat-cell *matCellDef=\"let row\" class=\"watt-table-checkbox-cell\">\n        <watt-checkbox\n          [ngModel]=\"_selectionModel.isSelected(row)\"\n          (ngModelChange)=\"_selectionModel.toggle(row)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </td>\n    </ng-container>\n  }\n\n  @for (column of columns | keyvalue; track column.key) {\n    <ng-container [matColumnDef]=\"column.key\" [stickyEnd]=\"column.value.stickyEnd?.()\">\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        class=\"watt-table-align-{{ column.value.align ?? 'left' }} {{\n          column.value.headerCellClass\n        }}\"\n      >\n        @if (_getColumnHelperAction(column); as action) {\n          <watt-icon name=\"help\" (click)=\"action()\" />\n        }\n\n        <div\n          class=\"watt-table-header-cell\"\n          mat-sort-header\n          [arrowPosition]=\"column.value.align === 'right' ? 'before' : 'after'\"\n          [disabled]=\"!column.value.accessor || column.value.sort === false\"\n        >\n          {{ _getColumnHeader(column) }}\n        </div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"watt-table-align-{{ column.value.align ?? 'left' }} {{ column.value.dataCellClass }}\"\n      >\n        @if (_getColumnTemplate(column.value); as template) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: row }\" />\n          </div>\n        } @else {\n          {{ _getColumnCell(column, row) }}\n        }\n      </td>\n\n      @if (_hasFooter) {\n        <td\n          mat-footer-cell\n          *matFooterCellDef\n          class=\"{{ column.value.footer?.class }} watt-table-align-{{\n            column.value.align ?? 'left'\n          }}\"\n        >\n          {{ column.value.footer?.value?.() }}\n        </td>\n      }\n    </ng-container>\n  }\n\n  <ng-container matColumnDef=\"spacer\">\n    <td class=\"watt-table-footer-spacer\" mat-footer-cell *matFooterCellDef></td>\n  </ng-container>\n\n  @if (!hideColumnHeaders) {\n    <tr mat-header-row *matHeaderRowDef=\"_getColumns()\"></tr>\n  }\n  <tr\n    mat-row\n    *matRowDef=\"let row; columns: _getColumns()\"\n    [attr.aria-selected]=\"row === activeRow\"\n    (click)=\"_onRowClick(row)\"\n    [ngClass]=\"{\n      'watt-table-highlight-row': !disabled && !suppressRowHoverHighlight,\n      'watt-table-clickable-row': !disabled && rowClick.observed,\n      'watt-table-active-row': _isActiveRow(row),\n      'watt-table-no-end-divider': hideColumnHeaders,\n    }\"\n  ></tr>\n\n  @if (_toolbar) {\n    <tr mat-footer-row *matFooterRowDef=\"['spacer']\"></tr>\n  }\n\n  @if (_hasFooter) {\n    <tr mat-footer-row *matFooterRowDef=\"_getColumns()\"></tr>\n  }\n\n  <ng-container *matNoDataRow>\n    @if (loading) {\n      @for (i of [1, 2, 3]; track i) {\n        <tr class=\"mat-mdc-row\">\n          @for (_ of _getColumns(); track _; let i = $index) {\n            <td class=\"mat-mdc-cell\" [class.watt-table-loading-cell]=\"i > 0 || !selectable\"></td>\n          }\n        </tr>\n      }\n    }\n  </ng-container>\n</table>\n\n@if (_toolbar) {\n  <div class=\"watt-table-toolbar\" role=\"toolbar\">\n    <ng-container\n      *ngTemplateOutlet=\"_toolbar.templateRef; context: { $implicit: _filteredSelection }\"\n    />\n  </div>\n}\n", styles: ["watt-table{--mat-table-row-item-label-text-font: $primary-font-family;--mat-table-row-item-outline-color: var(--watt-color-neutral-grey-300);--mat-table-header-headline-font: $primary-font-family}watt-table,watt-table .mat-mdc-table{display:grid;position:relative;overflow:auto;min-height:44px}watt-table .mat-mdc-table{grid-template-columns:var(--watt-table-grid-template-columns);grid-auto-rows:max-content;max-height:100%;z-index:1}watt-table .mat-mdc-table thead,watt-table .mat-mdc-table tbody,watt-table .mat-mdc-table tfoot,watt-table .mat-mdc-table tr.mat-mdc-row,watt-table .mat-mdc-table tr.mat-mdc-header-row,watt-table .mat-mdc-table tr.mat-mdc-footer-row{display:contents}watt-table .mat-mdc-table tr.mat-mdc-header-row{flex:0 0 auto}watt-table .mat-mdc-table th.mat-mdc-header-cell{color:var(--watt-typography-label-color);font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:uppercase;box-sizing:border-box;display:flex;position:sticky;top:0;padding:0 var(--watt-space-s);height:auto;background:var(--watt-color-primary-ultralight);box-shadow:0 -1px #0000001f inset;border:0;z-index:2!important;white-space:nowrap;-webkit-user-select:none;user-select:none}watt-table .mat-mdc-table td.mat-mdc-footer-cell,watt-table .mat-mdc-table td.mat-mdc-cell{display:flex;align-items:center;min-height:56px;padding:var(--watt-space-s) var(--watt-space-m)}watt-table .mat-mdc-table td.mat-mdc-footer-cell,watt-table .mat-mdc-table tr.mdc-data-table__row:last-child .mat-mdc-cell{border-bottom:1px solid var(--watt-color-neutral-grey-300)}watt-table .mat-mdc-table td.mat-mdc-footer-cell{font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:none;letter-spacing:0;border-top:2px solid var(--watt-color-neutral-grey-300);background-color:var(--watt-color-neutral-grey-100)}watt-table .mat-mdc-table .watt-table-no-end-divider:last-child .mat-mdc-cell{border-bottom:0px solid var(--watt-color-neutral-grey-300)!important}watt-table .mat-mdc-table .watt-table-clickable-row td{cursor:pointer;-webkit-user-select:text;user-select:text}watt-table .mat-mdc-table .watt-table-highlight-row:hover:not(.watt-table-active-row) td{background:var(--watt-color-neutral-grey-100)}watt-table .mat-mdc-table .watt-table-active-row td{background:var(--watt-color-secondary-ultralight)}watt-table .mat-mdc-table .mat-sort-header-arrow{margin:0}watt-table .mat-mdc-table .mat-sort-header-arrow{margin-left:var(--watt-space-s)}watt-table .mat-mdc-table .watt-table-header-cell{padding:.75rem var(--watt-space-s)}watt-table .mat-mdc-table .watt-table-checkbox-cell{justify-content:center}watt-table .mat-mdc-table th.watt-table-checkbox-cell{display:flex;align-items:center}watt-table .mat-mdc-table .watt-table-align-center,watt-table .mat-mdc-table .watt-table-align-center .mat-sort-header-container{justify-content:center}watt-table .mat-mdc-table .watt-table-align-right,watt-table .mat-mdc-table .watt-table-align-right .mat-sort-header-container{justify-content:right}.watt-table-footer-spacer{display:none;height:76px;border:0}.watt-table-has-selection .watt-table-footer-spacer{display:block}.watt-table-has-selection+.watt-table-toolbar{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(0,0,.2,1),visibility .5s}.watt-table-toolbar{position:absolute;bottom:var(--watt-space-m);left:50%;transform:translate(-50%);display:flex;align-items:center;padding:0 var(--watt-space-m);min-height:44px;border-radius:22px;color:var(--watt-color-primary-contrast);background-color:var(--watt-color-primary);z-index:1;opacity:0;visibility:hidden;transition:none}.watt-table-toolbar .watt-button--disabled{opacity:.4;--watt-button-primary-disabled-color: #fff}.watt-table-loading-cell:before{content:\"\";flex:1;display:block;max-width:200px;height:var(--watt-space-m);border-radius:var(--watt-space-m);opacity:.75;animation:shine 2s infinite linear;background-color:var(--watt-color-neutral-grey-200);background-size:300px;background-position:-100px;background-image:linear-gradient(90deg,var(--watt-color-neutral-grey-300) 0px,var(--watt-color-neutral-grey-200) 40px,var(--watt-color-neutral-grey-300) 80px)}@keyframes shine{40%,to{background-position:200px}}\n"] }]
+                    ], providers: [WattDatePipe], encapsulation: ViewEncapsulation.None, selector: 'watt-table', template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<table\n  mat-table\n  matSort\n  role=\"treegrid\"\n  [ngClass]=\"{ 'watt-table-has-selection': _filteredSelection.length > 0 }\"\n  [matSortActive]=\"sortBy\"\n  [matSortDirection]=\"sortDirection\"\n  [matSortDisableClear]=\"!sortClear\"\n  [dataSource]=\"dataSource\"\n  [attr.aria-label]=\"description\"\n  (matSortChange)=\"sortChange.emit($event)\"\n>\n  @if (selectable) {\n    <ng-container [matColumnDef]=\"_checkboxColumn\" [sticky]=\"true\">\n      <th mat-header-cell *matHeaderCellDef class=\"watt-table-checkbox-cell\">\n        <watt-checkbox [(ngModel)]=\"_columnSelection\" />\n      </th>\n      <td mat-cell *matCellDef=\"let row\" class=\"watt-table-checkbox-cell\">\n        <watt-checkbox\n          [ngModel]=\"_selectionModel.isSelected(row)\"\n          (ngModelChange)=\"_selectionModel.toggle(row)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      </td>\n    </ng-container>\n  }\n\n  @for (column of columns | keyvalue; track column.key) {\n    <ng-container [matColumnDef]=\"column.key\" [stickyEnd]=\"column.value.stickyEnd?.()\">\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        class=\"watt-table-align-{{ column.value.align ?? 'left' }} {{\n          column.value.headerCellClass\n        }}\"\n      >\n        @if (_getColumnHelperAction(column); as action) {\n          <watt-icon name=\"help\" (click)=\"action()\" />\n        }\n\n        <div\n          class=\"watt-table-header-cell\"\n          mat-sort-header\n          [arrowPosition]=\"column.value.align === 'right' ? 'before' : 'after'\"\n          [disabled]=\"!column.value.accessor || column.value.sort === false\"\n        >\n          {{ _getColumnHeader(column) }}\n        </div>\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"watt-table-align-{{ column.value.align ?? 'left' }} {{ column.value.dataCellClass }}\"\n      >\n        @if (_getColumnTemplate(column.value); as template) {\n          <div>\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: row }\" />\n          </div>\n        } @else {\n          {{ _getColumnCell(column, row) }}\n        }\n      </td>\n\n      @if (_hasFooter) {\n        <td\n          mat-footer-cell\n          *matFooterCellDef\n          class=\"{{ column.value.footer?.class }} watt-table-align-{{\n            column.value.align ?? 'left'\n          }}\"\n        >\n          {{ column.value.footer?.value?.() }}\n        </td>\n      }\n    </ng-container>\n  }\n\n  <ng-container matColumnDef=\"spacer\">\n    <td class=\"watt-table-footer-spacer\" mat-footer-cell *matFooterCellDef></td>\n  </ng-container>\n\n  @if (!hideColumnHeaders) {\n    <tr mat-header-row *matHeaderRowDef=\"_getColumns()\"></tr>\n  }\n  <tr\n    mat-row\n    *matRowDef=\"let row; columns: _getColumns()\"\n    [attr.aria-selected]=\"row === activeRow\"\n    (click)=\"_onRowClick(row)\"\n    [ngClass]=\"{\n      'watt-table-highlight-row': !disabled && !suppressRowHoverHighlight,\n      'watt-table-clickable-row': !disabled && rowClick.observed,\n      'watt-table-active-row': _isActiveRow(row),\n      'watt-table-no-end-divider': hideColumnHeaders,\n    }\"\n  ></tr>\n\n  @if (_toolbar) {\n    <tr mat-footer-row *matFooterRowDef=\"['spacer']\"></tr>\n  }\n\n  @if (_hasFooter && !stickyFooter) {\n    <tr mat-footer-row *matFooterRowDef=\"_getColumns()\"></tr>\n  }\n\n  @if (_hasFooter && stickyFooter) {\n    <tr mat-footer-row *matFooterRowDef=\"_getColumns(); sticky: true\"></tr>\n  }\n\n  <ng-container *matNoDataRow>\n    @if (loading) {\n      @for (i of [1, 2, 3]; track i) {\n        <tr class=\"mat-mdc-row\">\n          @for (_ of _getColumns(); track _; let i = $index) {\n            <td class=\"mat-mdc-cell\" [class.watt-table-loading-cell]=\"i > 0 || !selectable\"></td>\n          }\n        </tr>\n      }\n    }\n  </ng-container>\n</table>\n\n@if (_toolbar) {\n  <div class=\"watt-table-toolbar\" role=\"toolbar\">\n    <ng-container\n      *ngTemplateOutlet=\"_toolbar.templateRef; context: { $implicit: _filteredSelection }\"\n    />\n  </div>\n}\n", styles: ["watt-table{--mat-table-row-item-label-text-font: $primary-font-family;--mat-table-row-item-outline-color: var(--watt-color-neutral-grey-300);--mat-table-header-headline-font: $primary-font-family}watt-table,watt-table .mat-mdc-table{display:grid;position:relative;overflow:auto;min-height:44px}watt-table .mat-mdc-table{grid-template-columns:var(--watt-table-grid-template-columns);grid-auto-rows:max-content;max-height:100%;z-index:1}watt-table .mat-mdc-table thead,watt-table .mat-mdc-table tbody,watt-table .mat-mdc-table tfoot,watt-table .mat-mdc-table tr.mat-mdc-row,watt-table .mat-mdc-table tr.mat-mdc-header-row,watt-table .mat-mdc-table tr.mat-mdc-footer-row{display:contents}watt-table .mat-mdc-table tr.mat-mdc-header-row{flex:0 0 auto}watt-table .mat-mdc-table th.mat-mdc-header-cell{color:var(--watt-typography-label-color);font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:uppercase;box-sizing:border-box;display:flex;position:sticky;top:0;padding:0 var(--watt-space-s);height:auto;background:var(--watt-color-primary-ultralight);box-shadow:0 -1px #0000001f inset;border:0;z-index:2!important;white-space:nowrap;-webkit-user-select:none;user-select:none}watt-table .mat-mdc-table td.mat-mdc-footer-cell,watt-table .mat-mdc-table td.mat-mdc-cell{display:flex;align-items:center;min-height:56px;padding:var(--watt-space-s) var(--watt-space-m)}watt-table .mat-mdc-table td.mat-mdc-footer-cell,watt-table .mat-mdc-table tr.mdc-data-table__row:last-child .mat-mdc-cell{border-bottom:1px solid var(--watt-color-neutral-grey-300)}watt-table .mat-mdc-table td.mat-mdc-footer-cell{font-size:.875rem;line-height:1.25rem;font-weight:600;text-transform:none;letter-spacing:0;border-top:2px solid var(--watt-color-neutral-grey-300);background-color:var(--watt-color-neutral-grey-100)}watt-table .mat-mdc-table .watt-table-no-end-divider:last-child .mat-mdc-cell{border-bottom:0px solid var(--watt-color-neutral-grey-300)!important}watt-table .mat-mdc-table .watt-table-clickable-row td{cursor:pointer;-webkit-user-select:text;user-select:text}watt-table .mat-mdc-table .watt-table-highlight-row:hover:not(.watt-table-active-row) td{background:var(--watt-color-neutral-grey-100)}watt-table .mat-mdc-table .watt-table-active-row td{background:var(--watt-color-secondary-ultralight)}watt-table .mat-mdc-table .mat-sort-header-arrow{margin:0}watt-table .mat-mdc-table .mat-sort-header-arrow{margin-left:var(--watt-space-s)}watt-table .mat-mdc-table .watt-table-header-cell{padding:.75rem var(--watt-space-s)}watt-table .mat-mdc-table .watt-table-checkbox-cell{justify-content:center}watt-table .mat-mdc-table th.watt-table-checkbox-cell{display:flex;align-items:center}watt-table .mat-mdc-table .watt-table-align-center,watt-table .mat-mdc-table .watt-table-align-center .mat-sort-header-container{justify-content:center}watt-table .mat-mdc-table .watt-table-align-right,watt-table .mat-mdc-table .watt-table-align-right .mat-sort-header-container{justify-content:right}.watt-table-footer-spacer{display:none;height:76px;border:0}.watt-table-has-selection .watt-table-footer-spacer{display:block}.watt-table-has-selection+.watt-table-toolbar{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(0,0,.2,1),visibility .5s}.watt-table-toolbar{position:absolute;bottom:var(--watt-space-m);left:50%;transform:translate(-50%);display:flex;align-items:center;padding:0 var(--watt-space-m);min-height:44px;border-radius:22px;color:var(--watt-color-primary-contrast);background-color:var(--watt-color-primary);z-index:1;opacity:0;visibility:hidden;transition:none}.watt-table-toolbar .watt-button--disabled{opacity:.4;--watt-button-primary-disabled-color: #fff}.watt-table-loading-cell:before{content:\"\";flex:1;display:block;max-width:200px;height:var(--watt-space-m);border-radius:var(--watt-space-m);opacity:.75;animation:shine 2s infinite linear;background-color:var(--watt-color-neutral-grey-200);background-size:300px;background-position:-100px;background-image:linear-gradient(90deg,var(--watt-color-neutral-grey-300) 0px,var(--watt-color-neutral-grey-200) 40px,var(--watt-color-neutral-grey-300) 80px)}@keyframes shine{40%,to{background-position:200px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dataSource: [{
                 type: Input
             }], columns: [{
@@ -355,6 +359,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Input
             }], loading: [{
                 type: Input
+            }], stickyFooter: [{
+                type: Input
             }], resolveHeader: [{
                 type: Input
             }], sortBy: [{