@energinet/watt 1.7.1 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-field.mjs","sources":["../../../libs/watt/package/field/watt-field-intl.service.ts","../../../libs/watt/package/field/watt-field-error.component.ts","../../../libs/watt/package/field/watt-field.component.ts","../../../libs/watt/package/field/watt-field-hint.component.ts","../../../libs/watt/package/field/index.ts","../../../libs/watt/package/field/energinet-watt-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 { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class WattFieldIntlService {\n  readonly changes: Subject<void> = new Subject<void>();\n  required = 'Field is required';\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 { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'watt-field-error',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  styles: [\n    `\n      watt-field-error {\n        color: var(--watt-color-state-danger);\n      }\n    `,\n  ],\n})\nexport class WattFieldErrorComponent {}\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 {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { FormControl, ValidationErrors, Validators } from '@angular/forms';\nimport { filter, map, startWith, switchMap, tap } from 'rxjs/operators';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\n\nimport { WattIconComponent } from '@energinet/watt/icon';\nimport { WattTooltipDirective } from '@energinet/watt/tooltip';\nimport { VaterStackComponent } from '@energinet/watt/vater';\nimport { WattRangeValidators } from '@energinet/watt/validators';\n\nimport { WattFieldIntlService } from './watt-field-intl.service';\nimport { WattFieldErrorComponent } from './watt-field-error.component';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n  selector: 'watt-field',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    NgTemplateOutlet,\n    WattIconComponent,\n    WattTooltipDirective,\n    WattFieldErrorComponent,\n    VaterStackComponent,\n  ],\n  styleUrls: ['./watt-field.component.scss'],\n  template: `\n    @if (chipMode()) {\n      <span class=\"watt-label\">\n        <ng-container *ngTemplateOutlet=\"template\" />\n      </span>\n    } @else {\n      <label [attr.for]=\"id()\">\n        <ng-container *ngTemplateOutlet=\"template\" />\n      </label>\n    }\n\n    <ng-template #template>\n      @if (label()) {\n        <span class=\"label\" [class.required]=\"isRequired()\">\n          {{ label() }}\n          @if (tooltip(); as tooltip) {\n            <watt-icon name=\"info\" wattTooltipPosition=\"top\" [wattTooltip]=\"tooltip\" />\n          }\n        </span>\n      }\n      <vater-stack direction=\"row\" gap=\"s\">\n        <div\n          #wrapper\n          class=\"watt-field-wrapper\"\n          [class.watt-field--has-placeholder]=\"!!placeholder()\"\n          [style.anchor-name]=\"anchorName()\"\n        >\n          @if (placeholder()) {\n            <div class=\"watt-field-placeholder\" aria-hidden=\"true\">\n              <span class=\"watt-field-ghost\">{{ ghost() }}</span>\n              <span class=\"watt-field-filler\">{{ filler() }}</span>\n            </div>\n          }\n          <ng-content />\n        </div>\n        <ng-content select=\"watt-field-descriptor\" />\n      </vater-stack>\n      <ng-content select=\"[popover]\" />\n      <ng-content select=\"watt-field-hint\" />\n      <ng-content select=\"watt-field-error\" />\n      @if (isEmpty()) {\n        <watt-field-error>{{ intl.required }}</watt-field-error>\n      }\n    </ng-template>\n  `,\n  host: {\n    '[class.watt-field--chip]': 'chipMode()',\n    '[class.watt-field--unlabelled]': 'unlabelled()',\n    '[class.watt-field--disabled]': 'control()?.disabled',\n  },\n})\nexport class WattFieldComponent {\n  intl = inject(WattFieldIntlService);\n  elementRef = inject<ElementRef>(ElementRef);\n\n  control = input<FormControl | null>(null);\n  label = input<string>();\n  id = input<string>();\n  chipMode = input(false);\n  tooltip = input<string>();\n  placeholder = input('');\n  anchorName = input<string>();\n\n  value = signal('');\n  filler = computed(() => this.placeholder().slice(this.value().length));\n  ghost = computed(() => this.value().slice(0, this.placeholder().length));\n\n  unlabelled = computed(() => !this.label());\n\n  errors = signal<ValidationErrors | null>(null);\n  isRequired = signal(false);\n  isEmpty = computed(() => this.errors()?.['required'] || this.errors()?.['rangeRequired']);\n\n  // Used for text fields with autocomplete\n  wrapper = viewChild<ElementRef>('wrapper');\n\n  constructor() {\n    const control$ = toObservable(this.control).pipe(filter((control) => control !== null));\n\n    // Track value in order to update ghost and filler\n    const value$ = control$.pipe(\n      switchMap((control) =>\n        control.valueChanges.pipe(\n          startWith(control.value),\n          map((value) => (value === null || value === undefined ? '' : value.toString())),\n          tap((value) => this.value.set(value))\n        )\n      ),\n      takeUntilDestroyed()\n    );\n\n    // Track status in order to update required state and show errors\n    const status$ = control$.pipe(\n      switchMap((control) =>\n        control.statusChanges.pipe(\n          startWith(control.status),\n          tap(() => this.isRequired.set(this.isRequiredControl(control))),\n          tap(() => this.errors.set(control.errors))\n        )\n      ),\n      takeUntilDestroyed()\n    );\n\n    // Subscribe for side effects\n    value$.subscribe();\n    status$.subscribe();\n  }\n\n  isRequiredControl(control: FormControl) {\n    const validators = [Validators.required, WattRangeValidators.required];\n    return validators.some((validator) => control.hasValidator(validator));\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\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'watt-field-hint',\n  styles: [\n    `\n      :host {\n        color: var(--watt-color-neutral-grey-700);\n      }\n    `,\n  ],\n  template: `<ng-content />`,\n})\nexport class WattFieldHintComponent {}\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 { WattFieldComponent } from './watt-field.component';\nexport { WattFieldErrorComponent } from './watt-field-error.component';\nexport { WattFieldHintComponent } from './watt-field-hint.component';\nexport { WattFieldIntlService } from './watt-field-intl.service';\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-field.mjs","sources":["../../../libs/watt/package/field/watt-field-intl.service.ts","../../../libs/watt/package/field/watt-field-error.component.ts","../../../libs/watt/package/field/watt-field.component.ts","../../../libs/watt/package/field/watt-field-hint.component.ts","../../../libs/watt/package/field/index.ts","../../../libs/watt/package/field/energinet-watt-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 { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class WattFieldIntlService {\n  readonly changes: Subject<void> = new Subject<void>();\n  required = 'Field is required';\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 { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'watt-field-error',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  styles: [\n    `\n      watt-field-error {\n        color: var(--watt-color-state-danger);\n      }\n    `,\n  ],\n})\nexport class WattFieldErrorComponent {}\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 {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { FormControl, ValidationErrors, Validators } from '@angular/forms';\nimport { filter, map, startWith, switchMap, tap } from 'rxjs/operators';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\n\nimport { WattIconComponent } from '@energinet/watt/icon';\nimport { WattTooltipDirective } from '@energinet/watt/tooltip';\nimport { VaterStackComponent } from '@energinet/watt/vater';\nimport { WattRangeValidators } from '@energinet/watt/validators';\n\nimport { WattFieldIntlService } from './watt-field-intl.service';\nimport { WattFieldErrorComponent } from './watt-field-error.component';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n  selector: 'watt-field',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    NgTemplateOutlet,\n    WattIconComponent,\n    WattTooltipDirective,\n    WattFieldErrorComponent,\n    VaterStackComponent,\n  ],\n  styleUrls: ['./watt-field.component.scss'],\n  template: `\n    @if (chipMode()) {\n      <span class=\"watt-label\">\n        <ng-container *ngTemplateOutlet=\"template\" />\n      </span>\n    } @else {\n      <label [attr.for]=\"id()\">\n        <ng-container *ngTemplateOutlet=\"template\" />\n      </label>\n    }\n\n    <ng-template #template>\n      @if (label()) {\n        <span class=\"label\" [class.required]=\"isRequired()\">\n          {{ label() }}\n          @if (tooltip(); as tooltip) {\n            <watt-icon name=\"info\" wattTooltipPosition=\"top\" [wattTooltip]=\"tooltip\" />\n          }\n        </span>\n      }\n      <vater-stack direction=\"row\" gap=\"s\">\n        <div\n          #wrapper\n          class=\"watt-field-wrapper\"\n          [class.watt-field--has-placeholder]=\"!!placeholder()\"\n          [style.anchor-name]=\"anchorName()\"\n        >\n          @if (placeholder()) {\n            <div class=\"watt-field-placeholder\" aria-hidden=\"true\">\n              <span class=\"watt-field-ghost\">{{ ghost() }}</span>\n              <span class=\"watt-field-filler\">{{ filler() }}</span>\n            </div>\n          }\n          <ng-content />\n        </div>\n        <ng-content select=\"watt-field-descriptor\" />\n      </vater-stack>\n      <ng-content select=\"[popover]\" />\n      <ng-content select=\"watt-field-hint\" />\n      <ng-content select=\"watt-field-error\" />\n      @if (isEmpty()) {\n        <watt-field-error>{{ intl.required }}</watt-field-error>\n      }\n    </ng-template>\n  `,\n  host: {\n    '[class.watt-field--chip]': 'chipMode()',\n    '[class.watt-field--unlabelled]': 'unlabelled()',\n    '[class.watt-field--disabled]': 'control()?.disabled',\n  },\n})\nexport class WattFieldComponent {\n  intl = inject(WattFieldIntlService);\n  elementRef = inject<ElementRef>(ElementRef);\n\n  control = input<FormControl | null>(null);\n  label = input<string>();\n  id = input<string>();\n  chipMode = input(false);\n  tooltip = input<string>();\n  placeholder = input('');\n  anchorName = input<string>();\n\n  value = signal('');\n  filler = computed(() => this.placeholder().slice(this.value().length));\n  ghost = computed(() => this.value().slice(0, this.placeholder().length));\n\n  unlabelled = computed(() => !this.label());\n\n  errors = signal<ValidationErrors | null>(null);\n  isRequired = signal(false);\n  isEmpty = computed(() => this.errors()?.['required'] || this.errors()?.['rangeRequired']);\n\n  // Used for text fields with autocomplete\n  wrapper = viewChild<ElementRef>('wrapper');\n\n  constructor() {\n    const control$ = toObservable(this.control).pipe(filter((control) => control !== null));\n\n    // Track value in order to update ghost and filler\n    const value$ = control$.pipe(\n      switchMap((control) =>\n        control.valueChanges.pipe(\n          startWith(control.value),\n          map((value) => (value === null || value === undefined ? '' : value.toString())),\n          tap((value) => this.value.set(value))\n        )\n      ),\n      takeUntilDestroyed()\n    );\n\n    // Track status in order to update required state and show errors\n    const status$ = control$.pipe(\n      switchMap((control) =>\n        control.statusChanges.pipe(\n          startWith(control.status),\n          tap(() => this.isRequired.set(this.isRequiredControl(control))),\n          tap(() => this.errors.set(control.errors))\n        )\n      ),\n      takeUntilDestroyed()\n    );\n\n    // Subscribe for side effects\n    value$.subscribe();\n    status$.subscribe();\n  }\n\n  isRequiredControl(control: FormControl) {\n    const validators = [Validators.required, WattRangeValidators.required];\n    return validators.some((validator) => control.hasValidator(validator));\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\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'watt-field-hint',\n  styles: [\n    `\n      :host {\n        color: var(--watt-color-neutral-grey-700);\n      }\n    `,\n  ],\n  template: `<ng-content />`,\n})\nexport class WattFieldHintComponent {}\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 { WattFieldComponent } from './watt-field.component';\nexport { WattFieldErrorComponent } from './watt-field-error.component';\nexport { WattFieldHintComponent } from './watt-field-hint.component';\nexport { WattFieldIntlService } from './watt-field-intl.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;AAAA;AACA;;;;;;;;;;;;;;;AAeG;AACH;MAKa,oBAAoB,CAAA;AACtB,IAAA,OAAO,GAAkB,IAAI,OAAO,EAAQ;IACrD,QAAQ,GAAG,mBAAmB;uGAFnB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAApB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cADP,MAAM,EAAA,CAAA;;2FACnB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACrBlC;AACA;;;;;;;;;;;;;;;AAeG;AACH;MAea,uBAAuB,CAAA;uGAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAvB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,4EAVxB,CAAgB,cAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAUf,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAZnC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAClB,QAAA,EAAA,CAAA,cAAA,CAAgB,EACX,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA;;;ACvBvC;AACA;;;;;;;;;;;;;;;AAeG;AACH;MAwFa,kBAAkB,CAAA;AAC7B,IAAA,IAAI,GAAG,MAAM,CAAC,oBAAoB,CAAC;AACnC,IAAA,UAAU,GAAG,MAAM,CAAa,UAAU,CAAC;AAE3C,IAAA,OAAO,GAAG,KAAK,CAAqB,IAAI,CAAC;IACzC,KAAK,GAAG,KAAK,EAAU;IACvB,EAAE,GAAG,KAAK,EAAU;AACpB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC;IACvB,OAAO,GAAG,KAAK,EAAU;AACzB,IAAA,WAAW,GAAG,KAAK,CAAC,EAAE,CAAC;IACvB,UAAU,GAAG,KAAK,EAAU;AAE5B,IAAA,KAAK,GAAG,MAAM,CAAC,EAAE,CAAC;IAClB,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC;IACtE,KAAK,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC;AAExE,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;AAE1C,IAAA,MAAM,GAAG,MAAM,CAA0B,IAAI,CAAC;AAC9C,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC;IAC1B,OAAO,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,GAAG,UAAU,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,eAAe,CAAC,CAAC;;AAGzF,IAAA,OAAO,GAAG,SAAS,CAAa,SAAS,CAAC;AAE1C,IAAA,WAAA,GAAA;QACE,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,OAAO,KAAK,IAAI,CAAC,CAAC;;AAGvF,QAAA,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAC1B,SAAS,CAAC,CAAC,OAAO,KAChB,OAAO,CAAC,YAAY,CAAC,IAAI,CACvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,EACxB,GAAG,CAAC,CAAC,KAAK,MAAM,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,GAAG,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,EAC/E,GAAG,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CACtC,CACF,EACD,kBAAkB,EAAE,CACrB;;AAGD,QAAA,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAC3B,SAAS,CAAC,CAAC,OAAO,KAChB,OAAO,CAAC,aAAa,CAAC,IAAI,CACxB,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,EACzB,GAAG,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/D,GAAG,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAC3C,CACF,EACD,kBAAkB,EAAE,CACrB;;QAGD,MAAM,CAAC,SAAS,EAAE;QAClB,OAAO,CAAC,SAAS,EAAE;;AAGrB,IAAA,iBAAiB,CAAC,OAAoB,EAAA;QACpC,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,QAAQ,EAAE,mBAAmB,CAAC,QAAQ,CAAC;AACtE,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;;uGA3D7D,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,EAnDnB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,wBAAA,EAAA,YAAA,EAAA,8BAAA,EAAA,cAAA,EAAA,4BAAA,EAAA,qBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CT,EAnDC,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,uoHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,gBAAgB,oJAChB,iBAAiB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,oBAAoB,EACpB,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,qBAAA,EAAA,oBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,uBAAuB,6DACvB,mBAAmB,EAAA,QAAA,EAAA,4BAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAsDV,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBA/D9B,SAAS;+BACE,YAAY,EAAA,eAAA,EACL,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAC5B,OAAA,EAAA;wBACP,gBAAgB;wBAChB,iBAAiB;wBACjB,oBAAoB;wBACpB,uBAAuB;wBACvB,mBAAmB;qBACpB,EAES,QAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CT,EACK,IAAA,EAAA;AACJ,wBAAA,0BAA0B,EAAE,YAAY;AACxC,wBAAA,gCAAgC,EAAE,cAAc;AAChD,wBAAA,8BAA8B,EAAE,qBAAqB;AACtD,qBAAA,EAAA,MAAA,EAAA,CAAA,uoHAAA,CAAA,EAAA;;;ACvGH;AACA;;;;;;;;;;;;;;;AAeG;AACH;MAca,sBAAsB,CAAA;uGAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,2EAFvB,CAAgB,cAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,mDAAA,CAAA,EAAA,CAAA;;2FAEf,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAXlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,YAQjB,CAAgB,cAAA,CAAA,EAAA,MAAA,EAAA,CAAA,mDAAA,CAAA,EAAA;;;AC7B5B;AACA;;;;;;;;;;;;;;;AAeG;AACH;;ACjBA;;AAEG;;;;"}

package/fesm2022/energinet-watt-progress-tracker.mjs

@@ -24,7 +24,7 @@ import { WattSpinnerComponent } from '@energinet/watt/spinner';
 //#endregion
 class WattProgressTrackerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: WattProgressTrackerComponent, isStandalone: true, selector: "watt-progress-tracker", ngImport: i0, template: `<vater-stack direction="row"><ng-content /></vater-stack>`, isInline: true, styles: ["watt-progress-tracker{display:block}\n"], dependencies: [{ kind: "component", type: VaterStackComponent, selector: "vater-stack, [vater-stack]", inputs: ["align", "direction", "gap", "justify", "offset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: WattProgressTrackerComponent, isStandalone: true, selector: "watt-progress-tracker", ngImport: i0, template: `<vater-stack direction="row"><ng-content /></vater-stack>`, isInline: true, styles: ["watt-progress-tracker{display:block}\n"], dependencies: [{ kind: "component", type: VaterStackComponent, selector: "vater-stack, [vater-stack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattProgressTrackerComponent, decorators: [{
             type: Component,

package/fesm2022/energinet-watt-progress-tracker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-progress-tracker.mjs","sources":["../../../libs/watt/package/progress-tracker/watt-progress-tracker.component.ts","../../../libs/watt/package/progress-tracker/watt-progress-tracker-step.component.ts","../../../libs/watt/package/progress-tracker/index.ts","../../../libs/watt/package/progress-tracker/energinet-watt-progress-tracker.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 { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\nimport { VaterStackComponent } from '@energinet/watt/vater';\n\n@Component({\n  imports: [VaterStackComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-progress-tracker',\n  styles: [\n    `\n      watt-progress-tracker {\n        display: block;\n      }\n    `,\n  ],\n  template: `<vater-stack direction=\"row\"><ng-content /></vater-stack>`,\n})\nexport class WattProgressTrackerComponent {}\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 {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { WattIconComponent } from '@energinet/watt/icon';\nimport { WattSpinnerComponent } from '@energinet/watt/spinner';\n\n@Component({\n  imports: [WattIconComponent, WattSpinnerComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-progress-tracker-step',\n  host: {\n    '[attr.role]': 'current() ? \"status\" : \"presentation\"',\n    '[attr.class]': 'class()',\n    '[attr.aria-current]': 'ariaCurrent()',\n    '[attr.aria-label]': 'label()',\n  },\n  styleUrl: './watt-progress-tracker-step.component.scss',\n  template: `\n    <div class=\"watt-progress-tracker-step-icon\">\n      @switch (status()) {\n        @case ('running') {\n          <watt-spinner [diameter]=\"26\" [strokeWidth]=\"2\" />\n        }\n        @case ('skipped') {\n          <watt-icon name=\"horizontalRule\" size=\"xs\" />\n        }\n        @case ('canceled') {\n          <watt-icon name=\"close\" size=\"xs\" />\n        }\n        @case ('failed') {\n          <watt-icon name=\"priorityHigh\" size=\"xs\" />\n        }\n        @case ('succeeded') {\n          <watt-icon name=\"checkmark\" size=\"xs\" />\n        }\n      }\n    </div>\n    <div class=\"watt-progress-tracker-step-text\"><ng-content /></div>\n  `,\n})\nexport class WattProgressTrackerStepComponent {\n  status = input.required<\n    'pending' | 'running' | 'skipped' | 'canceled' | 'failed' | 'succeeded'\n  >();\n  label = input<string>();\n  current = input(false);\n  ariaCurrent = computed(() => (this.current() ? 'step' : false));\n  class = computed(() => `watt-progress-tracker-step-${this.status()}`);\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 { WattProgressTrackerComponent } from './watt-progress-tracker.component';\nimport { WattProgressTrackerStepComponent } from './watt-progress-tracker-step.component';\n\nexport { WattProgressTrackerComponent } from './watt-progress-tracker.component';\nexport { WattProgressTrackerStepComponent } from './watt-progress-tracker-step.component';\n\nexport const WATT_PROGRESS_TRACKER = [\n  WattProgressTrackerComponent,\n  WattProgressTrackerStepComponent,\n];\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-progress-tracker.mjs","sources":["../../../libs/watt/package/progress-tracker/watt-progress-tracker.component.ts","../../../libs/watt/package/progress-tracker/watt-progress-tracker-step.component.ts","../../../libs/watt/package/progress-tracker/index.ts","../../../libs/watt/package/progress-tracker/energinet-watt-progress-tracker.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 { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\nimport { VaterStackComponent } from '@energinet/watt/vater';\n\n@Component({\n  imports: [VaterStackComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-progress-tracker',\n  styles: [\n    `\n      watt-progress-tracker {\n        display: block;\n      }\n    `,\n  ],\n  template: `<vater-stack direction=\"row\"><ng-content /></vater-stack>`,\n})\nexport class WattProgressTrackerComponent {}\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 {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { WattIconComponent } from '@energinet/watt/icon';\nimport { WattSpinnerComponent } from '@energinet/watt/spinner';\n\n@Component({\n  imports: [WattIconComponent, WattSpinnerComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-progress-tracker-step',\n  host: {\n    '[attr.role]': 'current() ? \"status\" : \"presentation\"',\n    '[attr.class]': 'class()',\n    '[attr.aria-current]': 'ariaCurrent()',\n    '[attr.aria-label]': 'label()',\n  },\n  styleUrl: './watt-progress-tracker-step.component.scss',\n  template: `\n    <div class=\"watt-progress-tracker-step-icon\">\n      @switch (status()) {\n        @case ('running') {\n          <watt-spinner [diameter]=\"26\" [strokeWidth]=\"2\" />\n        }\n        @case ('skipped') {\n          <watt-icon name=\"horizontalRule\" size=\"xs\" />\n        }\n        @case ('canceled') {\n          <watt-icon name=\"close\" size=\"xs\" />\n        }\n        @case ('failed') {\n          <watt-icon name=\"priorityHigh\" size=\"xs\" />\n        }\n        @case ('succeeded') {\n          <watt-icon name=\"checkmark\" size=\"xs\" />\n        }\n      }\n    </div>\n    <div class=\"watt-progress-tracker-step-text\"><ng-content /></div>\n  `,\n})\nexport class WattProgressTrackerStepComponent {\n  status = input.required<\n    'pending' | 'running' | 'skipped' | 'canceled' | 'failed' | 'succeeded'\n  >();\n  label = input<string>();\n  current = input(false);\n  ariaCurrent = computed(() => (this.current() ? 'step' : false));\n  class = computed(() => `watt-progress-tracker-step-${this.status()}`);\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 { WattProgressTrackerComponent } from './watt-progress-tracker.component';\nimport { WattProgressTrackerStepComponent } from './watt-progress-tracker-step.component';\n\nexport { WattProgressTrackerComponent } from './watt-progress-tracker.component';\nexport { WattProgressTrackerStepComponent } from './watt-progress-tracker-step.component';\n\nexport const WATT_PROGRESS_TRACKER = [\n  WattProgressTrackerComponent,\n  WattProgressTrackerStepComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/energinet-watt-tabs.mjs

@@ -60,7 +60,7 @@ class WattLinkTabsComponent {
     tabElements = contentChildren(WattLinkTabComponent);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattLinkTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattLinkTabsComponent, isStandalone: true, selector: "watt-link-tabs", queries: [{ propertyName: "tabElements", predicate: WattLinkTabComponent, isSignal: true }], ngImport: i0, template: `
-    <vater-flex direction="column" fill="vertical">
+    <vater-flex autoSize fill="vertical">
       <nav
         mat-tab-nav-bar
         [disableRipple]="true"
@@ -77,12 +77,12 @@ class WattLinkTabsComponent {
 
       <mat-tab-nav-panel #tabPanel><router-outlet /></mat-tab-nav-panel>
     </vater-flex>
-  `, isInline: true, styles: ["@use \"@energinet-datahub/watt/utils\" as watt;watt-link-tabs .mat-mdc-tab-header{box-shadow:var(--watt-bottom-box-shadow);background-color:var(--watt-color-neutral-white)}watt-link-tabs .mat-mdc-tab-nav-panel{display:block;position:relative;height:100%}watt-link-tabs .mat-mdc-tab-links,watt-link-tabs .mat-focus-indicator.mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color)}watt-link-tabs .mat-mdc-tab-labels,watt-link-tabs .mat-mdc-tab-links{padding-left:var(--watt-space-ml)}watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link{min-width:120px;opacity:1}:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link) .mdc-tab__content{@include watt.typography-watt-button;color:var(--watt-on-light-medium-emphasis)}:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link.active{border-bottom:2px solid var(--watt-color-primary)}:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab:hover,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link:hover{border-bottom:2px solid var(--watt-color-primary)}:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link.active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab:hover,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link:hover{color:var(--watt-on-light-medium-emphasis)}:is(:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link.active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab:hover,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link:hover) .mdc-tab__content{color:var(--watt-color-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i1.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: VaterFlexComponent, selector: "vater-flex, [vater-flex]", inputs: ["direction", "grow", "shrink", "basis", "gap", "justify", "wrap", "scrollable", "offset"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["@use \"@energinet-datahub/watt/utils\" as watt;watt-link-tabs .mat-mdc-tab-header{box-shadow:var(--watt-bottom-box-shadow);background-color:var(--watt-color-neutral-white)}watt-link-tabs .mat-mdc-tab-nav-panel{display:block;position:relative;height:100%}watt-link-tabs .mat-mdc-tab-links,watt-link-tabs .mat-focus-indicator.mat-mdc-tab-link.active .mdc-tab__text-label{color:var(--mat-tab-header-active-label-text-color)}watt-link-tabs .mat-mdc-tab-labels,watt-link-tabs .mat-mdc-tab-links{padding-left:var(--watt-space-ml)}watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link{min-width:120px;opacity:1}:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link) .mdc-tab__content{@include watt.typography-watt-button;color:var(--watt-on-light-medium-emphasis)}:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link.active{border-bottom:2px solid var(--watt-color-primary)}:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab:hover,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link:hover{border-bottom:2px solid var(--watt-color-primary)}:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link.active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab:hover,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link:hover{color:var(--watt-on-light-medium-emphasis)}:is(:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link.active,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab:hover,:is(watt-link-tabs .mat-mdc-tab,watt-link-tabs .mat-mdc-tab-link).mat-mdc-tab-link:hover) .mdc-tab__content{color:var(--watt-color-primary)}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i1.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: VaterFlexComponent, selector: "vater-flex, [vater-flex]", inputs: ["autoSize"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattLinkTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-link-tabs', encapsulation: ViewEncapsulation.None, imports: [MatTabsModule, RouterOutlet, RouterLink, RouterLinkActive, VaterFlexComponent], template: `
-    <vater-flex direction="column" fill="vertical">
+    <vater-flex autoSize fill="vertical">
       <nav
         mat-tab-nav-bar
         [disableRipple]="true"

package/fesm2022/energinet-watt-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-tabs.mjs","sources":["../../../libs/watt/package/tabs/watt-link-tab.component.ts","../../../libs/watt/package/tabs/watt-link-tabs.component.ts","../../../libs/watt/package/tabs/watt-tab.component.ts","../../../libs/watt/package/tabs/watt-tabs-action.component.ts","../../../libs/watt/package/tabs/watt-tabs.component.ts","../../../libs/watt/package/tabs/watt-tabs.component.html","../../../libs/watt/package/tabs/index.ts","../../../libs/watt/package/tabs/energinet-watt-tabs.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 } from '@angular/core';\n\n@Component({\n  selector: 'watt-link-tab',\n  template: ``,\n})\nexport class WattLinkTabComponent {\n  label = input.required<string>();\n  link = 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 { Component, ViewEncapsulation, contentChildren } from '@angular/core';\nimport { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';\nimport { MatTabsModule } from '@angular/material/tabs';\n\nimport { VaterFlexComponent } from '@energinet/watt/vater';\nimport { WattLinkTabComponent } from './watt-link-tab.component';\n\n@Component({\n  selector: 'watt-link-tabs',\n  encapsulation: ViewEncapsulation.None,\n  imports: [MatTabsModule, RouterOutlet, RouterLink, RouterLinkActive, VaterFlexComponent],\n  styles: `\n    @use '@energinet-datahub/watt/utils' as watt;\n\n    watt-link-tabs {\n      .mat-mdc-tab-header {\n        box-shadow: var(--watt-bottom-box-shadow);\n        background-color: var(--watt-color-neutral-white);\n      }\n\n      .mat-mdc-tab-nav-panel {\n        display: block;\n        position: relative;\n        height: 100%;\n      }\n\n      .mat-mdc-tab-links,\n      .mat-focus-indicator.mat-mdc-tab-link.active .mdc-tab__text-label {\n        color: var(--mat-tab-header-active-label-text-color);\n      }\n\n      .mat-mdc-tab-labels,\n      .mat-mdc-tab-links {\n        padding-left: var(--watt-space-ml);\n      }\n\n      .mat-mdc-tab,\n      .mat-mdc-tab-link {\n        min-width: 120px;\n        opacity: 1;\n\n        .mdc-tab__content {\n          @include watt.typography-watt-button;\n          color: var(--watt-on-light-medium-emphasis);\n        }\n\n        &.mat-mdc-tab-active,\n        &.mat-mdc-tab-link.active {\n          border-bottom: 2px solid var(--watt-color-primary);\n        }\n\n        &.mat-mdc-tab:hover,\n        &.mat-mdc-tab-link:hover {\n          border-bottom: 2px solid var(--watt-color-primary);\n        }\n\n        &.mat-mdc-tab-active,\n        &.mat-mdc-tab-link.active,\n        &.mat-mdc-tab:hover,\n        &.mat-mdc-tab-link:hover {\n          color: var(--watt-on-light-medium-emphasis);\n\n          .mdc-tab__content {\n            color: var(--watt-color-primary);\n          }\n        }\n      }\n    }\n  `,\n  template: `\n    <vater-flex direction=\"column\" fill=\"vertical\">\n      <nav\n        mat-tab-nav-bar\n        [disableRipple]=\"true\"\n        animationDuration=\"0ms\"\n        [mat-stretch-tabs]=\"false\"\n        [tabPanel]=\"tabPanel\"\n      >\n        @for (tab of tabElements(); track tab) {\n          <a mat-tab-link [routerLink]=\"tab.link()\" routerLinkActive=\"active\">\n            {{ tab.label() }}\n          </a>\n        }\n      </nav>\n\n      <mat-tab-nav-panel #tabPanel><router-outlet /></mat-tab-nav-panel>\n    </vater-flex>\n  `,\n})\nexport class WattLinkTabsComponent {\n  tabElements = contentChildren(WattLinkTabComponent);\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 { Component, TemplateRef, input, output, viewChild } from '@angular/core';\n\n@Component({\n  selector: 'watt-tab',\n  template: `<ng-template>\n    <ng-content />\n  </ng-template>`,\n})\nexport class WattTabComponent {\n  templateRef = viewChild.required<TemplateRef<unknown>>(TemplateRef);\n  label = input<string>('');\n  changed = output<void>();\n\n  emitChange() {\n    this.changed.emit();\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\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'watt-tabs-action',\n  template: `<ng-content />`,\n})\nexport class WattTabsActionComponent {}\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 {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  AfterViewInit,\n  ViewEncapsulation,\n  inject,\n  HostBinding,\n  contentChild,\n  viewChild,\n  input,\n  contentChildren,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MatTabGroup, MatTabsModule } from '@angular/material/tabs';\n\nimport { WattTabComponent } from './watt-tab.component';\nimport { WattTabsActionComponent } from './watt-tabs-action.component';\n\n@Component({\n  selector: 'watt-tabs',\n  styleUrls: ['./watt-tabs.component.scss'],\n  templateUrl: './watt-tabs.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.Default,\n  imports: [NgTemplateOutlet, MatTabsModule],\n})\nexport class WattTabsComponent implements AfterViewInit {\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  variant = input<string>();\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.variant() ? `watt-tabs-${this.variant()}` : '';\n  }\n\n  tabElements = contentChildren(WattTabComponent);\n  activeTabIndex = 0;\n\n  tabGroup = viewChild.required(MatTabGroup);\n\n  actionsTab = contentChild(WattTabsActionComponent);\n\n  ngAfterViewInit() {\n    this.cdr.detectChanges();\n  }\n\n  emitSelectedTabChange(selectedIndex: number) {\n    this.activeTabIndex = selectedIndex;\n    const currentTab = this.tabElements().find((tab, index) => index === selectedIndex);\n    currentTab?.emitChange();\n  }\n\n  setSelectedIndex(index: number) {\n    this.tabGroup().selectedIndex = index;\n  }\n\n  triggerChange() {\n    this.emitSelectedTabChange(this.activeTabIndex);\n  }\n}\n","<!--\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<mat-tab-group\n  [mat-stretch-tabs]=\"false\"\n  dynamicHeight\n  animationDuration=\"0ms\"\n  [disableRipple]=\"true\"\n  (selectedIndexChange)=\"emitSelectedTabChange($event)\"\n>\n  @for (tab of tabElements(); track tab) {\n    <mat-tab [label]=\"tab.label()\">\n      <ng-container *ngTemplateOutlet=\"tab.templateRef()\" />\n    </mat-tab>\n  }\n\n  @if (actionsTab()) {\n    <mat-tab labelClass=\"watt-tabs-action\" [disabled]=\"true\">\n      <ng-template mat-tab-label>\n        <ng-content />\n      </ng-template>\n    </mat-tab>\n  }\n</mat-tab-group>\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 { WattLinkTabComponent } from './watt-link-tab.component';\nimport { WattLinkTabsComponent } from './watt-link-tabs.component';\n\nimport { WattTabComponent } from './watt-tab.component';\nimport { WattTabsActionComponent } from './watt-tabs-action.component';\nimport { WattTabsComponent } from './watt-tabs.component';\n\nexport { WattTabComponent } from './watt-tab.component';\nexport { WattTabsActionComponent } from './watt-tabs-action.component';\nexport { WattTabsComponent } from './watt-tabs.component';\n\nexport { WattLinkTabComponent } from './watt-link-tab.component';\nexport { WattLinkTabsComponent } from './watt-link-tabs.component';\n\nexport const WATT_TABS = [WattTabsComponent, WattTabComponent, WattTabsActionComponent];\nexport const WATT_LINK_TABS = [WattLinkTabsComponent, WattLinkTabComponent];\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-tabs.mjs","sources":["../../../libs/watt/package/tabs/watt-link-tab.component.ts","../../../libs/watt/package/tabs/watt-link-tabs.component.ts","../../../libs/watt/package/tabs/watt-tab.component.ts","../../../libs/watt/package/tabs/watt-tabs-action.component.ts","../../../libs/watt/package/tabs/watt-tabs.component.ts","../../../libs/watt/package/tabs/watt-tabs.component.html","../../../libs/watt/package/tabs/index.ts","../../../libs/watt/package/tabs/energinet-watt-tabs.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 } from '@angular/core';\n\n@Component({\n  selector: 'watt-link-tab',\n  template: ``,\n})\nexport class WattLinkTabComponent {\n  label = input.required<string>();\n  link = 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 { Component, ViewEncapsulation, contentChildren } from '@angular/core';\nimport { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';\nimport { MatTabsModule } from '@angular/material/tabs';\n\nimport { VaterFlexComponent } from '@energinet/watt/vater';\nimport { WattLinkTabComponent } from './watt-link-tab.component';\n\n@Component({\n  selector: 'watt-link-tabs',\n  encapsulation: ViewEncapsulation.None,\n  imports: [MatTabsModule, RouterOutlet, RouterLink, RouterLinkActive, VaterFlexComponent],\n  styles: `\n    @use '@energinet-datahub/watt/utils' as watt;\n\n    watt-link-tabs {\n      .mat-mdc-tab-header {\n        box-shadow: var(--watt-bottom-box-shadow);\n        background-color: var(--watt-color-neutral-white);\n      }\n\n      .mat-mdc-tab-nav-panel {\n        display: block;\n        position: relative;\n        height: 100%;\n      }\n\n      .mat-mdc-tab-links,\n      .mat-focus-indicator.mat-mdc-tab-link.active .mdc-tab__text-label {\n        color: var(--mat-tab-header-active-label-text-color);\n      }\n\n      .mat-mdc-tab-labels,\n      .mat-mdc-tab-links {\n        padding-left: var(--watt-space-ml);\n      }\n\n      .mat-mdc-tab,\n      .mat-mdc-tab-link {\n        min-width: 120px;\n        opacity: 1;\n\n        .mdc-tab__content {\n          @include watt.typography-watt-button;\n          color: var(--watt-on-light-medium-emphasis);\n        }\n\n        &.mat-mdc-tab-active,\n        &.mat-mdc-tab-link.active {\n          border-bottom: 2px solid var(--watt-color-primary);\n        }\n\n        &.mat-mdc-tab:hover,\n        &.mat-mdc-tab-link:hover {\n          border-bottom: 2px solid var(--watt-color-primary);\n        }\n\n        &.mat-mdc-tab-active,\n        &.mat-mdc-tab-link.active,\n        &.mat-mdc-tab:hover,\n        &.mat-mdc-tab-link:hover {\n          color: var(--watt-on-light-medium-emphasis);\n\n          .mdc-tab__content {\n            color: var(--watt-color-primary);\n          }\n        }\n      }\n    }\n  `,\n  template: `\n    <vater-flex autoSize fill=\"vertical\">\n      <nav\n        mat-tab-nav-bar\n        [disableRipple]=\"true\"\n        animationDuration=\"0ms\"\n        [mat-stretch-tabs]=\"false\"\n        [tabPanel]=\"tabPanel\"\n      >\n        @for (tab of tabElements(); track tab) {\n          <a mat-tab-link [routerLink]=\"tab.link()\" routerLinkActive=\"active\">\n            {{ tab.label() }}\n          </a>\n        }\n      </nav>\n\n      <mat-tab-nav-panel #tabPanel><router-outlet /></mat-tab-nav-panel>\n    </vater-flex>\n  `,\n})\nexport class WattLinkTabsComponent {\n  tabElements = contentChildren(WattLinkTabComponent);\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 { Component, TemplateRef, input, output, viewChild } from '@angular/core';\n\n@Component({\n  selector: 'watt-tab',\n  template: `<ng-template>\n    <ng-content />\n  </ng-template>`,\n})\nexport class WattTabComponent {\n  templateRef = viewChild.required<TemplateRef<unknown>>(TemplateRef);\n  label = input<string>('');\n  changed = output<void>();\n\n  emitChange() {\n    this.changed.emit();\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\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'watt-tabs-action',\n  template: `<ng-content />`,\n})\nexport class WattTabsActionComponent {}\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 {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  AfterViewInit,\n  ViewEncapsulation,\n  inject,\n  HostBinding,\n  contentChild,\n  viewChild,\n  input,\n  contentChildren,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { MatTabGroup, MatTabsModule } from '@angular/material/tabs';\n\nimport { WattTabComponent } from './watt-tab.component';\nimport { WattTabsActionComponent } from './watt-tabs-action.component';\n\n@Component({\n  selector: 'watt-tabs',\n  styleUrls: ['./watt-tabs.component.scss'],\n  templateUrl: './watt-tabs.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.Default,\n  imports: [NgTemplateOutlet, MatTabsModule],\n})\nexport class WattTabsComponent implements AfterViewInit {\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  variant = input<string>();\n\n  @HostBinding('class')\n  get hostClass() {\n    return this.variant() ? `watt-tabs-${this.variant()}` : '';\n  }\n\n  tabElements = contentChildren(WattTabComponent);\n  activeTabIndex = 0;\n\n  tabGroup = viewChild.required(MatTabGroup);\n\n  actionsTab = contentChild(WattTabsActionComponent);\n\n  ngAfterViewInit() {\n    this.cdr.detectChanges();\n  }\n\n  emitSelectedTabChange(selectedIndex: number) {\n    this.activeTabIndex = selectedIndex;\n    const currentTab = this.tabElements().find((tab, index) => index === selectedIndex);\n    currentTab?.emitChange();\n  }\n\n  setSelectedIndex(index: number) {\n    this.tabGroup().selectedIndex = index;\n  }\n\n  triggerChange() {\n    this.emitSelectedTabChange(this.activeTabIndex);\n  }\n}\n","<!--\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<mat-tab-group\n  [mat-stretch-tabs]=\"false\"\n  dynamicHeight\n  animationDuration=\"0ms\"\n  [disableRipple]=\"true\"\n  (selectedIndexChange)=\"emitSelectedTabChange($event)\"\n>\n  @for (tab of tabElements(); track tab) {\n    <mat-tab [label]=\"tab.label()\">\n      <ng-container *ngTemplateOutlet=\"tab.templateRef()\" />\n    </mat-tab>\n  }\n\n  @if (actionsTab()) {\n    <mat-tab labelClass=\"watt-tabs-action\" [disabled]=\"true\">\n      <ng-template mat-tab-label>\n        <ng-content />\n      </ng-template>\n    </mat-tab>\n  }\n</mat-tab-group>\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 { WattLinkTabComponent } from './watt-link-tab.component';\nimport { WattLinkTabsComponent } from './watt-link-tabs.component';\n\nimport { WattTabComponent } from './watt-tab.component';\nimport { WattTabsActionComponent } from './watt-tabs-action.component';\nimport { WattTabsComponent } from './watt-tabs.component';\n\nexport { WattTabComponent } from './watt-tab.component';\nexport { WattTabsActionComponent } from './watt-tabs-action.component';\nexport { WattTabsComponent } from './watt-tabs.component';\n\nexport { WattLinkTabComponent } from './watt-link-tab.component';\nexport { WattLinkTabsComponent } from './watt-link-tabs.component';\n\nexport const WATT_TABS = [WattTabsComponent, WattTabComponent, WattTabsActionComponent];\nexport const WATT_LINK_TABS = [WattLinkTabsComponent, WattLinkTabComponent];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/energinet-watt-vater.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Directive, ViewEncapsulation, Component } from '@angular/core';
+import { input, booleanAttribute, computed, Directive, ViewEncapsulation, Component } from '@angular/core';
 
 //#region License
 /**
@@ -21,40 +21,89 @@ import { HostBinding, Input, Directive, ViewEncapsulation, Component } from '@an
 //#endregion
 /* eslint-disable @angular-eslint/no-input-rename */
 class VaterUtilityDirective {
+    /** Center the element horizontally and vertically. */
+    center = input(false, { transform: booleanAttribute });
     /** Stretch the element to fill the available space in one or both directions. */
-    fill;
+    fill = input();
     /** Position the element absolute with the provided inset value. */
-    inset;
-    center;
-    get _class() {
-        return [this.fill, this.inset].filter(Boolean);
-    }
-    get _center() {
-        return this.center === '';
-    }
+    inset = input();
+    /** Make the element scrollable. */
+    scrollable = input(false, { transform: booleanAttribute });
+    // Computed class names
+    fillClass = computed(() => this.fill() && `vater-fill-${this.fill()}`);
+    insetClass = computed(() => this.inset() && `vater-inset-${this.inset()}`);
+    class = computed(() => [this.fillClass(), this.insetClass()].filter(Boolean));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterUtilityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.1", type: VaterUtilityDirective, isStandalone: true, selector: "[vater]", inputs: { fill: ["fill", "fill", (value) => `vater-fill-${value}`], inset: ["inset", "inset", (value) => `vater-inset-${value}`], center: "center" }, host: { properties: { "class": "this._class", "class.vater-center": "this._center" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: VaterUtilityDirective, isStandalone: true, selector: "[vater]", inputs: { center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "class.vater-center": "center()", "class.vater-scrollable": "scrollable()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterUtilityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vater]',
+                    host: {
+                        '[class]': 'class()',
+                        '[class.vater-center]': 'center()',
+                        '[class.vater-scrollable]': 'scrollable()',
+                    },
                 }]
-        }], propDecorators: { fill: [{
-                type: Input,
-                args: [{ transform: (value) => `vater-fill-${value}` }]
-            }], inset: [{
-                type: Input,
-                args: [{ transform: (value) => `vater-inset-${value}` }]
-            }], center: [{
-                type: Input
-            }], _class: [{
-                type: HostBinding,
-                args: ['class']
-            }], _center: [{
-                type: HostBinding,
-                args: ['class.vater-center']
-            }] } });
+        }] });
+
+//#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 VaterLayoutDirective {
+    /** Cross axis alignment of the flex items. */
+    align = input();
+    /** Direction of the flex items. Defaults to `column`. */
+    direction = input('column');
+    /** Spacing between the flex items. */
+    gap = input();
+    /** Main axis alignment of the flex items. */
+    justify = input();
+    /** Offset to apply along the main axis. */
+    offset = input();
+    /** Whether the flex items should wrap. */
+    wrap = input(false, { transform: booleanAttribute });
+    // Computed class names
+    alignClass = computed(() => this.align() && `vater-align-${this.align()}`);
+    directionClass = computed(() => this.direction() && `vater-${this.direction()}`);
+    gapClass = computed(() => this.gap() && `vater-gap-${this.gap()}`);
+    justifyClass = computed(() => this.justify() && `vater-justify-${this.justify()}`);
+    offsetClass = computed(() => this.offset() && `vater-offset-${this.offset()}`);
+    class = computed(() => [
+        this.alignClass(),
+        this.directionClass(),
+        this.gapClass(),
+        this.justifyClass(),
+        this.offsetClass(),
+    ].filter(Boolean));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: VaterLayoutDirective, isStandalone: true, inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "class.vater-wrap": "wrap()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterLayoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class]': 'class()',
+                        '[class.vater-wrap]': 'wrap()',
+                    },
+                }]
+        }] });
 
 //#region License
 /**
@@ -75,88 +124,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  */
 //#endregion
 class VaterFlexComponent {
-    direction = 'column';
-    grow = '1';
-    shrink = '1';
-    basis = 'auto';
-    gap;
-    justify;
-    wrap = 'nowrap';
-    scrollable;
-    offset;
-    get _offset() {
-        if (!this.offset)
-            return undefined;
-        switch (this.direction) {
-            case 'column':
-                return `var(--watt-space-${this.offset}) 0`;
-            case 'row':
-                return `0 var(--watt-space-${this.offset})`;
-        }
-    }
-    get _gap() {
-        return this.gap ? `var(--watt-space-${this.gap})` : undefined;
-    }
-    get _overflow() {
-        return this.scrollable === '' ? 'auto' : undefined;
-    }
+    /**
+     * When set, sizes the flex items according to their width or height properties.
+     * @see https://drafts.csswg.org/css-flexbox-1/#flex-common
+     * @remarks
+     * Prefer setting `fill` on flex items over using `autoSize`.
+     */
+    autoSize = input(false, { transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterFlexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterFlexComponent, isStandalone: true, selector: "vater-flex, [vater-flex]", inputs: { direction: "direction", grow: "grow", shrink: "shrink", basis: "basis", gap: "gap", justify: "justify", wrap: "wrap", scrollable: "scrollable", offset: "offset" }, host: { properties: { "style.flex-direction": "this.direction", "style.--grow": "this.grow", "style.--shrink": "this.shrink", "style.--basis": "this.basis", "style.justify-content": "this.justify", "style.flex-wrap": "this.wrap", "style.padding": "this._offset", "style.gap": "this._gap", "style.overflow": "this._overflow" } }, hostDirectives: [{ directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}vater-flex>*,[vater-flex]>*{flex:var(--grow) var(--shrink) var(--basis)}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: VaterFlexComponent, isStandalone: true, selector: "vater-flex, [vater-flex]", inputs: { autoSize: { classPropertyName: "autoSize", publicName: "autoSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.vater-flex-auto": "autoSize()" } }, hostDirectives: [{ directive: VaterLayoutDirective, inputs: ["align", "align", "direction", "direction", "justify", "justify", "wrap", "wrap", "gap", "gap", "offset", "offset"] }, { directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset", "scrollable", "scrollable"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterFlexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vater-flex, [vater-flex]', encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: VaterLayoutDirective,
+                            inputs: ['align', 'direction', 'justify', 'wrap', 'gap', 'offset'],
+                        },
                         {
                             directive: VaterUtilityDirective,
-                            inputs: ['center', 'fill', 'inset'],
+                            inputs: ['center', 'fill', 'inset', 'scrollable'],
                         },
-                    ], template: `<ng-content />`, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}vater-flex>*,[vater-flex]>*{flex:var(--grow) var(--shrink) var(--basis)}\n"] }]
-        }], propDecorators: { direction: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.flex-direction']
-            }], grow: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--grow']
-            }], shrink: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--shrink']
-            }], basis: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--basis']
-            }], gap: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.justify-content']
-            }], wrap: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.flex-wrap']
-            }], scrollable: [{
-                type: Input
-            }], offset: [{
-                type: Input
-            }], _offset: [{
-                type: HostBinding,
-                args: ['style.padding']
-            }], _gap: [{
-                type: HostBinding,
-                args: ['style.gap']
-            }], _overflow: [{
-                type: HostBinding,
-                args: ['style.overflow']
-            }] } });
+                    ], host: { '[class.vater-flex-auto]': 'autoSize()' }, template: `<ng-content />`, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}\n"] }]
+        }] });
 
 //#region License
 /**
@@ -178,11 +168,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 //#endregion
 class VaterSpacerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterSpacerComponent, isStandalone: true, selector: "vater-spacer, [vater-spacer]", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-spacer,[vater-spacer]{flex:1;align-self:stretch}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterSpacerComponent, isStandalone: true, selector: "vater-spacer, [vater-spacer]", ngImport: i0, template: '<ng-content />', isInline: true, styles: ["vater-spacer,[vater-spacer]{flex:1;align-self:stretch}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterSpacerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vater-spacer, [vater-spacer]', encapsulation: ViewEncapsulation.None, template: `<ng-content />`, styles: ["vater-spacer,[vater-spacer]{flex:1;align-self:stretch}\n"] }]
+            args: [{ selector: 'vater-spacer, [vater-spacer]', encapsulation: ViewEncapsulation.None, template: '<ng-content />', styles: ["vater-spacer,[vater-spacer]{flex:1;align-self:stretch}\n"] }]
         }] });
 
 //#region License
@@ -204,61 +194,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  */
 //#endregion
 class VaterStackComponent {
-    align = 'center';
-    direction = 'column';
-    gap;
-    justify;
-    offset;
-    get _offset() {
-        if (!this.offset)
-            return undefined;
-        switch (this.direction) {
-            case 'column':
-                return `var(--watt-space-${this.offset}) 0`;
-            case 'row':
-                return `0 var(--watt-space-${this.offset})`;
-        }
-    }
-    get _gap() {
-        return this.gap ? `var(--watt-space-${this.gap})` : undefined;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterStackComponent, isStandalone: true, selector: "vater-stack, [vater-stack]", inputs: { align: "align", direction: "direction", gap: "gap", justify: "justify", offset: "offset" }, host: { properties: { "style.align-items": "this.align", "style.flex-direction": "this.direction", "style.justify-content": "this.justify", "style.padding": "this._offset", "style.gap": "this._gap" } }, hostDirectives: [{ directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-stack,[vater-stack]{display:flex;line-height:normal}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterStackComponent, isStandalone: true, selector: "vater-stack, [vater-stack]", hostDirectives: [{ directive: VaterLayoutDirective, inputs: ["align", "align", "direction", "direction", "justify", "justify", "wrap", "wrap", "gap", "gap", "offset", "offset"] }, { directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset", "scrollable", "scrollable"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-stack,[vater-stack]{display:flex;line-height:normal}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vater-stack, [vater-stack]', encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: VaterLayoutDirective,
+                            inputs: ['align', 'direction', 'justify', 'wrap', 'gap', 'offset'],
+                        },
                         {
                             directive: VaterUtilityDirective,
-                            inputs: ['center', 'fill', 'inset'],
+                            inputs: ['center', 'fill', 'inset', 'scrollable'],
                         },
                     ], template: `<ng-content />`, styles: ["vater-stack,[vater-stack]{display:flex;line-height:normal}\n"] }]
-        }], propDecorators: { align: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.align-items']
-            }], direction: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.flex-direction']
-            }], gap: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.justify-content']
-            }], offset: [{
-                type: Input
-            }], _offset: [{
-                type: HostBinding,
-                args: ['style.padding']
-            }], _gap: [{
-                type: HostBinding,
-                args: ['style.gap']
-            }] } });
+        }] });
 
 //#region License
 /**
@@ -283,5 +234,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { VaterFlexComponent, VaterSpacerComponent, VaterStackComponent, VaterUtilityDirective };
+export { VaterFlexComponent, VaterLayoutDirective, VaterSpacerComponent, VaterStackComponent, VaterUtilityDirective };
 //# sourceMappingURL=energinet-watt-vater.mjs.map