@energinet/watt 4.3.79 → 4.3.81

package/fesm2022/energinet-watt-chip.mjs

@@ -49,7 +49,7 @@ class WattChipComponent {
         <watt-icon class="dismissible-icon" name="close" size="s" [attr.aria-hidden]="true" />
       }
     </label>
-  `, isInline: true, styles: ["label{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;position:relative;background:var(--input-background, var(--watt-color-neutral-white));border-radius:var(--watt-space-m);border:1px solid var(--input-border-color, var(--watt-on-light-low-emphasis));color:var(--watt-on-light-high-emphasis);cursor:pointer;display:inline-flex;align-items:center;padding:5px 12px;-webkit-user-select:none;user-select:none;white-space:nowrap;max-width:100%}label:hover{border:1px solid var(--watt-on-light-medium-emphasis)}label:active:not(.disabled,.read-only),label:focus-within{background:var(--watt-color-primary-ultralight);border:1px solid var(--watt-on-light-medium-emphasis);outline:none}label.selected{background:var(--watt-color-primary);color:var(--watt-on-dark-high-emphasis);border-color:transparent}label.selected:hover,label.selected:focus-within{background:var(--watt-color-primary-dark);border-color:transparent}label.disabled{border:1px solid var(--watt-on-light-surface-overlay);color:var(--watt-on-light-low-emphasis);cursor:not-allowed}label.read-only{cursor:inherit;border:1px solid var(--watt-on-light-surface-overlay)}label.read-only:hover,label.read-only:focus-within{background:transparent}label .selected-icon{margin-right:var(--watt-space-s)}label .dismissible-icon{margin-left:var(--watt-space-s)}\n"], dependencies: [{ kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["label{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;position:relative;background:var(--input-background, var(--watt-color-neutral-white));border-radius:var(--watt-space-m);border:1px solid var(--input-border-color, var(--watt-on-light-low-emphasis));color:var(--watt-on-light-high-emphasis);cursor:pointer;display:inline-flex;align-items:center;padding:5px 12px;-webkit-user-select:none;user-select:none;white-space:nowrap;max-width:100%}label:hover{border:1px solid var(--watt-on-light-medium-emphasis)}label:active:not(.disabled,.read-only),label:focus-within{background:var(--watt-color-primary-ultralight);border:1px solid var(--watt-on-light-medium-emphasis);outline:none}label.selected{background:var(--watt-color-primary);border-color:transparent;color:var(--watt-on-dark-high-emphasis)}label.selected:hover,label.selected:focus-within{background:var(--watt-color-primary-dark);border-color:transparent}label.disabled{border:1px solid var(--watt-on-light-surface-overlay);color:var(--watt-on-light-low-emphasis);cursor:not-allowed}label.read-only{cursor:inherit;border:1px solid var(--watt-on-light-surface-overlay)}label.read-only:hover,label.read-only:focus-within{background:transparent}label .selected-icon{margin-right:var(--watt-space-s)}label .dismissible-icon{margin-left:var(--watt-space-s)}\n"], dependencies: [{ kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WattChipComponent, decorators: [{
             type: Component,
@@ -68,7 +68,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
         <watt-icon class="dismissible-icon" name="close" size="s" [attr.aria-hidden]="true" />
       }
     </label>
-  `, styles: ["label{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;position:relative;background:var(--input-background, var(--watt-color-neutral-white));border-radius:var(--watt-space-m);border:1px solid var(--input-border-color, var(--watt-on-light-low-emphasis));color:var(--watt-on-light-high-emphasis);cursor:pointer;display:inline-flex;align-items:center;padding:5px 12px;-webkit-user-select:none;user-select:none;white-space:nowrap;max-width:100%}label:hover{border:1px solid var(--watt-on-light-medium-emphasis)}label:active:not(.disabled,.read-only),label:focus-within{background:var(--watt-color-primary-ultralight);border:1px solid var(--watt-on-light-medium-emphasis);outline:none}label.selected{background:var(--watt-color-primary);color:var(--watt-on-dark-high-emphasis);border-color:transparent}label.selected:hover,label.selected:focus-within{background:var(--watt-color-primary-dark);border-color:transparent}label.disabled{border:1px solid var(--watt-on-light-surface-overlay);color:var(--watt-on-light-low-emphasis);cursor:not-allowed}label.read-only{cursor:inherit;border:1px solid var(--watt-on-light-surface-overlay)}label.read-only:hover,label.read-only:focus-within{background:transparent}label .selected-icon{margin-right:var(--watt-space-s)}label .dismissible-icon{margin-left:var(--watt-space-s)}\n"] }]
+  `, styles: ["label{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;position:relative;background:var(--input-background, var(--watt-color-neutral-white));border-radius:var(--watt-space-m);border:1px solid var(--input-border-color, var(--watt-on-light-low-emphasis));color:var(--watt-on-light-high-emphasis);cursor:pointer;display:inline-flex;align-items:center;padding:5px 12px;-webkit-user-select:none;user-select:none;white-space:nowrap;max-width:100%}label:hover{border:1px solid var(--watt-on-light-medium-emphasis)}label:active:not(.disabled,.read-only),label:focus-within{background:var(--watt-color-primary-ultralight);border:1px solid var(--watt-on-light-medium-emphasis);outline:none}label.selected{background:var(--watt-color-primary);border-color:transparent;color:var(--watt-on-dark-high-emphasis)}label.selected:hover,label.selected:focus-within{background:var(--watt-color-primary-dark);border-color:transparent}label.disabled{border:1px solid var(--watt-on-light-surface-overlay);color:var(--watt-on-light-low-emphasis);cursor:not-allowed}label.read-only{cursor:inherit;border:1px solid var(--watt-on-light-surface-overlay)}label.read-only:hover,label.read-only:focus-within{background:transparent}label .selected-icon{margin-right:var(--watt-space-s)}label .dismissible-icon{margin-left:var(--watt-space-s)}\n"] }]
         }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 //#region License

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

@@ -1,11 +1,8 @@
-import { NgTemplateOutlet } from '@angular/common';
-import { RouterLinkWithHref, RouterLinkActive } from '@angular/router';
-import * as i2 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { viewChild, TemplateRef, input, Component, inject, ElementRef, contentChildren, model, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
-import * as i1 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { input, signal, inject, ElementRef, ChangeDetectionStrategy, Component, contentChildren, model, effect, forwardRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 
 //#region License
 /**
@@ -26,23 +23,90 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
  */
 //#endregion
 class WattSegmentedButtonComponent {
-    templateRef = viewChild.required(TemplateRef);
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
     link = input(...(ngDevMode ? [undefined, { debugName: "link" }] : /* istanbul ignore next */ []));
+    selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    tabIndex = signal(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    focus() {
+        const host = this.elementRef.nativeElement;
+        const interactive = host.querySelector('a, button');
+        interactive?.focus();
+    }
+    onClick() {
+        if (this.disabled())
+            return;
+        const value = this.value();
+        if (value === undefined)
+            return;
+        this.elementRef.nativeElement.dispatchEvent(new CustomEvent('segmentSelect', { bubbles: true, detail: value }));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WattSegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: WattSegmentedButtonComponent, isStandalone: true, selector: "watt-segmented-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template>
-    <ng-content />
-  </ng-template>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: WattSegmentedButtonComponent, isStandalone: true, selector: "watt-segmented-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <ng-template #labelTemplate><ng-content /></ng-template>
+
+    @if (link()) {
+      <a
+        role="radio"
+        [routerLink]="disabled() ? null : link()"
+        queryParamsHandling="merge"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [class.active]="rla.isActive"
+        [attr.aria-checked]="selected() || rla.isActive"
+        [attr.aria-disabled]="disabled() ? true : null"
+        [attr.tabindex]="tabIndex()"
+      >
+        <ng-container *ngTemplateOutlet="labelTemplate" />
+      </a>
+    } @else {
+      <button
+        type="button"
+        role="radio"
+        [attr.aria-checked]="selected()"
+        [attr.tabindex]="tabIndex()"
+        [disabled]="disabled()"
+        (click)="onClick()"
+      >
+        <ng-container *ngTemplateOutlet="labelTemplate" />
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:flex}a,button{display:flex;align-items:center;justify-content:center;min-width:6.5rem;height:2.5rem;padding:0 .75rem;border:1px solid var(--watt-color-neutral-grey-700);border-radius:4px;font-size:1rem;font-weight:600;color:var(--watt-on-light-high-emphasis);background:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:inherit}a:hover,button:hover,:host(.hover) a,:host(.hover) button{background-color:var(--watt-color-neutral-grey-200)}a:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--watt-color-primary-dark);position:relative;z-index:1}a.active,:host(.selected) a,:host(.selected) button{background-color:var(--watt-color-primary);color:var(--watt-color-neutral-white)}:host(.disabled) a,:host(.disabled) button{cursor:default;background-color:var(--watt-color-neutral-grey-200);color:#00000042}:host(.disabled.selected) a,:host(.disabled.selected) button{background-color:var(--watt-color-neutral-grey-400);color:var( --watt-on-light-high-emphasis )}:host(.start) a,:host(.start) button{border-right-width:0;border-radius:4px 0 0 4px}:host(.middle) a,:host(.middle) button{border-right-width:0;border-radius:0}:host(.end) a,:host(.end) button{border-radius:0 4px 4px 0}\n"], dependencies: [{ 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WattSegmentedButtonComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'watt-segmented-button',
-                    template: ` <ng-template>
-    <ng-content />
-  </ng-template>`,
-                }]
-        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }] } });
+            args: [{ selector: 'watt-segmented-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [RouterLink, RouterLinkActive, NgTemplateOutlet], template: `
+    <ng-template #labelTemplate><ng-content /></ng-template>
+
+    @if (link()) {
+      <a
+        role="radio"
+        [routerLink]="disabled() ? null : link()"
+        queryParamsHandling="merge"
+        routerLinkActive
+        #rla="routerLinkActive"
+        [class.active]="rla.isActive"
+        [attr.aria-checked]="selected() || rla.isActive"
+        [attr.aria-disabled]="disabled() ? true : null"
+        [attr.tabindex]="tabIndex()"
+      >
+        <ng-container *ngTemplateOutlet="labelTemplate" />
+      </a>
+    } @else {
+      <button
+        type="button"
+        role="radio"
+        [attr.aria-checked]="selected()"
+        [attr.tabindex]="tabIndex()"
+        [disabled]="disabled()"
+        (click)="onClick()"
+      >
+        <ng-container *ngTemplateOutlet="labelTemplate" />
+      </button>
+    }
+  `, styles: [":host{display:flex}a,button{display:flex;align-items:center;justify-content:center;min-width:6.5rem;height:2.5rem;padding:0 .75rem;border:1px solid var(--watt-color-neutral-grey-700);border-radius:4px;font-size:1rem;font-weight:600;color:var(--watt-on-light-high-emphasis);background:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;font-family:inherit}a:hover,button:hover,:host(.hover) a,:host(.hover) button{background-color:var(--watt-color-neutral-grey-200)}a:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--watt-color-primary-dark);position:relative;z-index:1}a.active,:host(.selected) a,:host(.selected) button{background-color:var(--watt-color-primary);color:var(--watt-color-neutral-white)}:host(.disabled) a,:host(.disabled) button{cursor:default;background-color:var(--watt-color-neutral-grey-200);color:#00000042}:host(.disabled.selected) a,:host(.disabled.selected) button{background-color:var(--watt-color-neutral-grey-400);color:var( --watt-on-light-high-emphasis )}:host(.start) a,:host(.start) button{border-right-width:0;border-radius:4px 0 0 4px}:host(.middle) a,:host(.middle) button{border-right-width:0;border-radius:0}:host(.end) a,:host(.end) button{border-radius:0 4px 4px 0}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }] } });
 
 //#region License
 /**
@@ -62,14 +126,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
  * limitations under the License.
  */
 //#endregion
-/**
- * Segmented buttons.
- */
+const POSITION_CLASSES = ['start', 'middle', 'end'];
+function resolvePosition(index, total) {
+    if (total === 1)
+        return null;
+    if (index === 0)
+        return 'start';
+    if (index === total - 1)
+        return 'end';
+    return 'middle';
+}
+function findIndexByValue(buttons, value) {
+    const index = buttons.findIndex((button) => button.value() === value);
+    return index === -1 ? 0 : index;
+}
+function nextKeyboardIndex(key, current, total) {
+    switch (key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+            return (current + 1) % total;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+            return (current - 1 + total) % total;
+        case 'Home':
+            return 0;
+        case 'End':
+            return total - 1;
+        default:
+            return null;
+    }
+}
 class WattSegmentedButtonsComponent {
     element = inject(ElementRef);
-    segmentedButtonElements = contentChildren(WattSegmentedButtonComponent, ...(ngDevMode ? [{ debugName: "segmentedButtonElements" }] : /* istanbul ignore next */ []));
+    buttons = contentChildren(WattSegmentedButtonComponent, ...(ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []));
     selected = model('', ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const buttons = this.buttons();
+            const selected = this.selected();
+            const disabled = this.disabled();
+            const focusedIndex = findIndexByValue(buttons, selected);
+            for (let i = 0; i < buttons.length; i++) {
+                const button = buttons[i];
+                const isSelected = button.value() === selected;
+                button.selected.set(isSelected);
+                button.disabled.set(disabled);
+                button.tabIndex.set(!disabled && i === focusedIndex ? 0 : -1);
+                const position = resolvePosition(i, buttons.length);
+                const classList = button.elementRef.nativeElement.classList;
+                for (const cls of POSITION_CLASSES)
+                    classList.toggle(cls, cls === position);
+                classList.toggle('selected', isSelected);
+                classList.toggle('disabled', disabled);
+            }
+        });
+    }
+    onSegmentSelect(event) {
+        if (this.disabled())
+            return;
+        this.selected.set(event.detail);
+    }
+    onKeydown(event) {
+        if (this.disabled())
+            return;
+        const buttons = this.buttons();
+        if (buttons.length === 0)
+            return;
+        const currentIndex = findIndexByValue(buttons, this.selected());
+        const nextIndex = nextKeyboardIndex(event.key, currentIndex, buttons.length);
+        if (nextIndex === null)
+            return;
+        event.preventDefault();
+        const nextButton = buttons[nextIndex];
+        const nextValue = nextButton.value();
+        if (nextValue !== undefined)
+            this.selected.set(nextValue);
+        nextButton.focus();
+    }
     writeValue(selected) {
         this.selected.set(selected);
     }
@@ -83,68 +217,28 @@ class WattSegmentedButtonsComponent {
         this.disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WattSegmentedButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: WattSegmentedButtonsComponent, isStandalone: true, selector: "watt-segmented-buttons", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.5", type: WattSegmentedButtonsComponent, isStandalone: true, selector: "watt-segmented-buttons", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "segmentSelect": "onSegmentSelect($event)", "keydown": "onKeydown($event)" } }, 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
-          [routerLink]="segmentedButton.link()"
-          queryParamsHandling="merge"
-          routerLinkActive="mat-button-toggle-checked"
-          [disableRipple]="true"
-          [value]="segmentedButton.value()"
-        >
-          <ng-container *ngTemplateOutlet="segmentedButton.templateRef()" />
-        </mat-button-toggle>
-      }
-    </mat-button-toggle-group>
-  `, isInline: true, styles: ["@use \"@energinet/watt/utils\" as watt;@use \"@angular/material\" as mat;:root{@include mat.button-toggle-overrides((selected-state-text-color: white,selected-state-background-color: var(--watt-color-primary),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{min-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"] }, { kind: "directive", type: RouterLinkWithHref, 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "buttons", predicate: WattSegmentedButtonComponent, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WattSegmentedButtonsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        MatButtonToggleModule,
-                        FormsModule,
-                        NgTemplateOutlet,
-                        RouterLinkWithHref,
-                        RouterLinkActive,
-                    ], providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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
-          [routerLink]="segmentedButton.link()"
-          queryParamsHandling="merge"
-          routerLinkActive="mat-button-toggle-checked"
-          [disableRipple]="true"
-          [value]="segmentedButton.value()"
-        >
-          <ng-container *ngTemplateOutlet="segmentedButton.templateRef()" />
-        </mat-button-toggle>
-      }
-    </mat-button-toggle-group>
-  `, styles: ["@use \"@energinet/watt/utils\" as watt;@use \"@angular/material\" as mat;:root{@include mat.button-toggle-overrides((selected-state-text-color: white,selected-state-background-color: var(--watt-color-primary),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{min-width:6.5rem}:root mat-button-toggle-group mat-button-toggle button span{font-size:.875rem;font-weight:600}\n"] }]
-        }], propDecorators: { segmentedButtonElements: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WattSegmentedButtonComponent), { isSignal: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }] } });
+                    ], selector: 'watt-segmented-buttons', host: {
+                        role: 'radiogroup',
+                        '(segmentSelect)': 'onSegmentSelect($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    }, template: `<ng-content />`, styles: [":host{display:inline-flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { buttons: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WattSegmentedButtonComponent), { isSignal: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }] } });
 
 //#region License
 /**

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

@@ -1 +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<string>();\n  link = input<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 { NgTemplateOutlet } from '@angular/common';\nimport { RouterLinkWithHref, RouterLinkActive } from '@angular/router';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n  model,\n  signal,\n  inject,\n  Component,\n  ElementRef,\n  forwardRef,\n  contentChildren,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\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: [\n    MatButtonToggleModule,\n    FormsModule,\n    NgTemplateOutlet,\n    RouterLinkWithHref,\n    RouterLinkActive,\n  ],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattSegmentedButtonsComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-segmented-buttons',\n  styles: `\n    @use '@energinet/watt/utils' as watt;\n    @use '@angular/material' as mat;\n\n    :root {\n      @include mat.button-toggle-overrides(\n        (\n          selected-state-text-color: white,\n          selected-state-background-color: var(--watt-color-primary),\n          height: 2.5rem,\n        )\n      );\n\n      mat-button-toggle-group {\n        border-color: var(--watt-color-neutral-grey-700);\n\n        mat-button-toggle {\n          border-color: var(--watt-color-neutral-grey-700) !important;\n\n          button {\n            min-width: 6.5rem;\n\n            span {\n              font-size: 0.875rem;\n              font-weight: 600;\n            }\n          }\n        }\n      }\n    }\n  `,\n  template: `\n    <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\n          [routerLink]=\"segmentedButton.link()\"\n          queryParamsHandling=\"merge\"\n          routerLinkActive=\"mat-button-toggle-checked\"\n          [disableRipple]=\"true\"\n          [value]=\"segmentedButton.value()\"\n        >\n          <ng-container *ngTemplateOutlet=\"segmentedButton.templateRef()\" />\n        </mat-button-toggle>\n      }\n    </mat-button-toggle-group>\n  `,\n})\nexport class WattSegmentedButtonsComponent implements ControlValueAccessor {\n  private element = inject(ElementRef);\n  segmentedButtonElements = contentChildren(WattSegmentedButtonComponent);\n  selected = model<string>('');\n  disabled = signal(false);\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\nimport { WattSegmentedButtonsComponent } from './watt-segmented-buttons.component';\nimport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\n\nexport { WattSegmentedButtonsComponent } from './watt-segmented-buttons.component';\nexport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\nexport const WATT_SEGMENTED_BUTTONS = [\n  WattSegmentedButtonsComponent,\n  WattSegmentedButtonComponent,\n] as const;\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-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 {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  signal,\n  inject,\n  ElementRef,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\nexport type WattSegmentedButtonPosition = 'first' | 'middle' | 'last' | 'standalone';\n\n@Component({\n  selector: 'watt-segmented-button',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [RouterLink, RouterLinkActive, NgTemplateOutlet],\n  styles: `\n    :host {\n      display: flex;\n    }\n\n    a,\n    button {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-width: 6.5rem;\n      height: 2.5rem;\n      padding: 0 0.75rem;\n      border: 1px solid var(--watt-color-neutral-grey-700);\n      border-radius: 4px;\n      font-size: 1rem;\n      font-weight: 600;\n      color: var(--watt-on-light-high-emphasis);\n      background: none;\n      text-decoration: none;\n      cursor: pointer;\n      user-select: none;\n      box-sizing: border-box;\n      font-family: inherit;\n    }\n\n    a:hover,\n    button:hover,\n    :host(.hover) a,\n    :host(.hover) button {\n      background-color: var(--watt-color-neutral-grey-200);\n    }\n\n    a:focus-visible,\n    button:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 2px var(--watt-color-primary-dark);\n      position: relative;\n      z-index: 1;\n    }\n\n    a.active,\n    :host(.selected) a,\n    :host(.selected) button {\n      background-color: var(--watt-color-primary);\n      color: var(--watt-color-neutral-white);\n    }\n\n    :host(.disabled) a,\n    :host(.disabled) button {\n      cursor: default;\n      background-color: var(--watt-color-neutral-grey-200);\n      color: rgba(\n        0,\n        0,\n        0,\n        0.26\n      ); /* Not part of Watt foundations — see Figma note on disabled segmented buttons */\n    }\n\n    :host(.disabled.selected) a,\n    :host(.disabled.selected) button {\n      background-color: var(--watt-color-neutral-grey-400);\n      color: var(\n        --watt-on-light-high-emphasis\n      ); /* Not part of Watt foundations — see Figma note on disabled segmented buttons */\n    }\n\n    :host(.start) a,\n    :host(.start) button {\n      border-right-width: 0;\n      border-radius: 4px 0 0 4px;\n    }\n\n    :host(.middle) a,\n    :host(.middle) button {\n      border-right-width: 0;\n      border-radius: 0;\n    }\n\n    :host(.end) a,\n    :host(.end) button {\n      border-radius: 0 4px 4px 0;\n    }\n  `,\n  template: `\n    <ng-template #labelTemplate><ng-content /></ng-template>\n\n    @if (link()) {\n      <a\n        role=\"radio\"\n        [routerLink]=\"disabled() ? null : link()\"\n        queryParamsHandling=\"merge\"\n        routerLinkActive\n        #rla=\"routerLinkActive\"\n        [class.active]=\"rla.isActive\"\n        [attr.aria-checked]=\"selected() || rla.isActive\"\n        [attr.aria-disabled]=\"disabled() ? true : null\"\n        [attr.tabindex]=\"tabIndex()\"\n      >\n        <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        role=\"radio\"\n        [attr.aria-checked]=\"selected()\"\n        [attr.tabindex]=\"tabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onClick()\"\n      >\n        <ng-container *ngTemplateOutlet=\"labelTemplate\" />\n      </button>\n    }\n  `,\n})\nexport class WattSegmentedButtonComponent {\n  value = input<string>();\n  link = input<string>();\n\n  selected = signal(false);\n  disabled = signal(false);\n  tabIndex = signal(0);\n\n  readonly elementRef = inject(ElementRef);\n\n  focus(): void {\n    const host = this.elementRef.nativeElement as HTMLElement;\n    const interactive = host.querySelector<HTMLElement>('a, button');\n    interactive?.focus();\n  }\n\n  onClick(): void {\n    if (this.disabled()) return;\n    const value = this.value();\n    if (value === undefined) return;\n    this.elementRef.nativeElement.dispatchEvent(\n      new CustomEvent('segmentSelect', { bubbles: true, detail: 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\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n  model,\n  signal,\n  inject,\n  effect,\n  Component,\n  ElementRef,\n  forwardRef,\n  contentChildren,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\n\ntype ReadonlyButtons = readonly WattSegmentedButtonComponent[];\n\nconst POSITION_CLASSES = ['start', 'middle', 'end'] as const;\ntype PositionClass = (typeof POSITION_CLASSES)[number] | null;\n\nfunction resolvePosition(index: number, total: number): PositionClass {\n  if (total === 1) return null;\n  if (index === 0) return 'start';\n  if (index === total - 1) return 'end';\n  return 'middle';\n}\n\nfunction findIndexByValue(buttons: ReadonlyButtons, value: string): number {\n  const index = buttons.findIndex((button) => button.value() === value);\n  return index === -1 ? 0 : index;\n}\n\nfunction nextKeyboardIndex(key: string, current: number, total: number): number | null {\n  switch (key) {\n    case 'ArrowRight':\n    case 'ArrowDown':\n      return (current + 1) % total;\n    case 'ArrowLeft':\n    case 'ArrowUp':\n      return (current - 1 + total) % total;\n    case 'Home':\n      return 0;\n    case 'End':\n      return total - 1;\n    default:\n      return null;\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattSegmentedButtonsComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-segmented-buttons',\n  host: {\n    role: 'radiogroup',\n    '(segmentSelect)': 'onSegmentSelect($event)',\n    '(keydown)': 'onKeydown($event)',\n  },\n  styles: `\n    :host {\n      display: inline-flex;\n    }\n  `,\n  template: `<ng-content />`,\n})\nexport class WattSegmentedButtonsComponent implements ControlValueAccessor {\n  private readonly element = inject(ElementRef);\n  private readonly buttons = contentChildren(WattSegmentedButtonComponent);\n  selected = model<string>('');\n  disabled = signal(false);\n\n  constructor() {\n    effect(() => {\n      const buttons = this.buttons();\n      const selected = this.selected();\n      const disabled = this.disabled();\n      const focusedIndex = findIndexByValue(buttons, selected);\n\n      for (let i = 0; i < buttons.length; i++) {\n        const button = buttons[i];\n        const isSelected = button.value() === selected;\n        button.selected.set(isSelected);\n        button.disabled.set(disabled);\n        button.tabIndex.set(!disabled && i === focusedIndex ? 0 : -1);\n\n        const position = resolvePosition(i, buttons.length);\n        const classList = button.elementRef.nativeElement.classList;\n        for (const cls of POSITION_CLASSES) classList.toggle(cls, cls === position);\n        classList.toggle('selected', isSelected);\n        classList.toggle('disabled', disabled);\n      }\n    });\n  }\n\n  onSegmentSelect(event: Event): void {\n    if (this.disabled()) return;\n    this.selected.set((event as CustomEvent<string>).detail);\n  }\n\n  onKeydown(event: KeyboardEvent): void {\n    if (this.disabled()) return;\n    const buttons = this.buttons();\n    if (buttons.length === 0) return;\n\n    const currentIndex = findIndexByValue(buttons, this.selected());\n    const nextIndex = nextKeyboardIndex(event.key, currentIndex, buttons.length);\n    if (nextIndex === null) return;\n\n    event.preventDefault();\n    const nextButton = buttons[nextIndex];\n    const nextValue = nextButton.value();\n    if (nextValue !== undefined) this.selected.set(nextValue);\n    nextButton.focus();\n  }\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\nimport { WattSegmentedButtonsComponent } from './watt-segmented-buttons.component';\nimport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\n\nexport { WattSegmentedButtonsComponent } from './watt-segmented-buttons.component';\nexport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\nexport const WATT_SEGMENTED_BUTTONS = [\n  WattSegmentedButtonsComponent,\n  WattSegmentedButtonComponent,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -80,8 +80,8 @@ class WattTextAreaFieldComponent {
       </vater-stack>
     </div>
 
-    <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
     <ng-content ngProjectAs="watt-field-error" select="watt-field-error" />
+    <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
   </watt-field>`, isInline: true, styles: ["watt-textarea-field{display:block;width:100%;--watt-textarea-min-height: 200px}watt-textarea-field[small=true]{--watt-textarea-min-height: 80px}watt-textarea-field .textarea-wrapper{width:100%}watt-textarea-field textarea{border:none;width:100%;outline:none;padding:var(--watt-space-s);padding-left:0;background-color:transparent;min-height:var(--watt-textarea-min-height)}watt-textarea-field .textarea-footer{padding:0 0 var(--watt-space-s) 0}watt-textarea-field .textarea-footer:empty{display:none}watt-textarea-field[resize=none] textarea{resize:none}watt-textarea-field[resize=horizontal] textarea{resize:horizontal}watt-textarea-field[resize=vertical] textarea{resize:vertical}watt-textarea-field[resize=both] textarea{resize:both}watt-textarea-field .watt-field-wrapper{padding:0!important}watt-textarea-field .watt-field-wrapper textarea,watt-textarea-field .watt-field-wrapper .textarea-footer{padding:var(--watt-space-m) var(--watt-space-s) var(--watt-space-s) var(--watt-space-s)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: VaterStackComponent, selector: "vater-stack, [vater-stack]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: WattTextAreaFieldComponent, decorators: [{
@@ -109,8 +109,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImpor
       </vater-stack>
     </div>
 
-    <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
     <ng-content ngProjectAs="watt-field-error" select="watt-field-error" />
+    <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
   </watt-field>`, host: {
                         '[attr.watt-field-disabled]': 'isDisabled()',
                         '[attr.small]': 'small()',

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

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-textarea-field.mjs","sources":["../../../libs/watt/package/textarea-field/watt-textarea-field.component.ts","../../../libs/watt/package/textarea-field/watt-textarea-notice.component.ts","../../../libs/watt/package/textarea-field/index.ts","../../../libs/watt/package/textarea-field/energinet-watt-textarea-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  Component,\n  forwardRef,\n  ViewEncapsulation,\n  inject,\n  ElementRef,\n  input,\n  model,\n  signal,\n  booleanAttribute,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { VaterStackComponent } from '@energinet/watt/vater';\n\n@Component({\n  imports: [FormsModule, WattFieldComponent, VaterStackComponent],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattTextAreaFieldComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-textarea-field',\n  styleUrls: ['./watt-textarea-field.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  template: `<watt-field [label]=\"label()\" [control]=\"formControl()\">\n    <div class=\"textarea-wrapper\">\n      <ng-content select=\"watt-textarea-notice\" />\n      <textarea\n        [attr.placeholder]=\"placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [attr.maxlength]=\"maxLength()\"\n        (input)=\"onInput($event)\"\n      ></textarea>\n\n      <vater-stack direction=\"row\" wrap gap=\"s\" class=\"textarea-footer\">\n        <ng-content />\n      </vater-stack>\n    </div>\n\n    <ng-content ngProjectAs=\"watt-field-hint\" select=\"watt-field-hint\" />\n    <ng-content ngProjectAs=\"watt-field-error\" select=\"watt-field-error\" />\n  </watt-field>`,\n  host: {\n    '[attr.watt-field-disabled]': 'isDisabled()',\n    '[attr.small]': 'small()',\n    '[attr.resize]': 'resize()',\n  },\n})\nexport class WattTextAreaFieldComponent implements ControlValueAccessor {\n  /** @ignore */\n  private element = inject(ElementRef);\n  formControl = input.required<FormControl>();\n  placeholder = input<string>();\n  required = input(false);\n  maxLength = input<string | number | null>(null);\n  label = input<string>();\n  small = input(false, { transform: booleanAttribute });\n  resize = input<'none' | 'horizontal' | 'vertical' | 'both'>('none');\n\n  onInput(event: Event) {\n    const target = event.target as HTMLTextAreaElement;\n    this.value.set(target.value);\n  }\n\n  /** @ignore */\n  value = model<string>('');\n\n  /** @ignore */\n  isDisabled = signal(false);\n\n  /** @ignore */\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  /** @ignore */\n  registerOnChange(fn: (value: string) => void): void {\n    this.value.subscribe(fn);\n  }\n\n  /** @ignore */\n  registerOnTouched(fn: () => void): void {\n    this.element.nativeElement.addEventListener('focusout', fn);\n  }\n\n  /** @ignore */\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled.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\nimport { Component, input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'watt-textarea-notice',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  styles: `\n    watt-textarea-notice {\n      display: flex;\n      align-items: center;\n      gap: var(--watt-space-s);\n      padding: var(--watt-space-xs) var(--watt-space-s);\n      color: var(--watt-on-light-high-emphasis);\n      background: var(--watt-color-neutral-grey-200);\n\n      &[type='danger'] {\n        color: var(--watt-color-state-danger);\n        background: var(--watt-color-state-danger-light);\n      }\n    }\n  `,\n  host: {\n    '[attr.type]': 'type()',\n  },\n})\nexport class WattTextareaNoticeComponent {\n  type = input<'info' | 'danger'>('info');\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 { WattTextAreaFieldComponent } from './watt-textarea-field.component';\nexport { WattTextareaNoticeComponent } from './watt-textarea-notice.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-textarea-field.mjs","sources":["../../../libs/watt/package/textarea-field/watt-textarea-field.component.ts","../../../libs/watt/package/textarea-field/watt-textarea-notice.component.ts","../../../libs/watt/package/textarea-field/index.ts","../../../libs/watt/package/textarea-field/energinet-watt-textarea-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  Component,\n  forwardRef,\n  ViewEncapsulation,\n  inject,\n  ElementRef,\n  input,\n  model,\n  signal,\n  booleanAttribute,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { VaterStackComponent } from '@energinet/watt/vater';\n\n@Component({\n  imports: [FormsModule, WattFieldComponent, VaterStackComponent],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattTextAreaFieldComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-textarea-field',\n  styleUrls: ['./watt-textarea-field.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  template: `<watt-field [label]=\"label()\" [control]=\"formControl()\">\n    <div class=\"textarea-wrapper\">\n      <ng-content select=\"watt-textarea-notice\" />\n      <textarea\n        [attr.placeholder]=\"placeholder()\"\n        [value]=\"value()\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [attr.maxlength]=\"maxLength()\"\n        (input)=\"onInput($event)\"\n      ></textarea>\n\n      <vater-stack direction=\"row\" wrap gap=\"s\" class=\"textarea-footer\">\n        <ng-content />\n      </vater-stack>\n    </div>\n\n    <ng-content ngProjectAs=\"watt-field-error\" select=\"watt-field-error\" />\n    <ng-content ngProjectAs=\"watt-field-hint\" select=\"watt-field-hint\" />\n  </watt-field>`,\n  host: {\n    '[attr.watt-field-disabled]': 'isDisabled()',\n    '[attr.small]': 'small()',\n    '[attr.resize]': 'resize()',\n  },\n})\nexport class WattTextAreaFieldComponent implements ControlValueAccessor {\n  /** @ignore */\n  private element = inject(ElementRef);\n  formControl = input.required<FormControl>();\n  placeholder = input<string>();\n  required = input(false);\n  maxLength = input<string | number | null>(null);\n  label = input<string>();\n  small = input(false, { transform: booleanAttribute });\n  resize = input<'none' | 'horizontal' | 'vertical' | 'both'>('none');\n\n  onInput(event: Event) {\n    const target = event.target as HTMLTextAreaElement;\n    this.value.set(target.value);\n  }\n\n  /** @ignore */\n  value = model<string>('');\n\n  /** @ignore */\n  isDisabled = signal(false);\n\n  /** @ignore */\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  /** @ignore */\n  registerOnChange(fn: (value: string) => void): void {\n    this.value.subscribe(fn);\n  }\n\n  /** @ignore */\n  registerOnTouched(fn: () => void): void {\n    this.element.nativeElement.addEventListener('focusout', fn);\n  }\n\n  /** @ignore */\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled.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\nimport { Component, input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'watt-textarea-notice',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  styles: `\n    watt-textarea-notice {\n      display: flex;\n      align-items: center;\n      gap: var(--watt-space-s);\n      padding: var(--watt-space-xs) var(--watt-space-s);\n      color: var(--watt-on-light-high-emphasis);\n      background: var(--watt-color-neutral-grey-200);\n\n      &[type='danger'] {\n        color: var(--watt-color-state-danger);\n        background: var(--watt-color-state-danger-light);\n      }\n    }\n  `,\n  host: {\n    '[attr.type]': 'type()',\n  },\n})\nexport class WattTextareaNoticeComponent {\n  type = input<'info' | 'danger'>('info');\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 { WattTextAreaFieldComponent } from './watt-textarea-field.component';\nexport { WattTextareaNoticeComponent } from './watt-textarea-notice.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@energinet/watt",
-  "version": "4.3.79",
+  "version": "4.3.81",
   "license": "Apache-2.0",
   "exports": {
     ".": {

package/types/energinet-watt-segmented-buttons.d.ts

@@ -1,29 +1,34 @@
 import * as _angular_core from '@angular/core';
-import { TemplateRef } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
-declare class WattSegmentedButtonComponent {
-    templateRef: _angular_core.Signal<TemplateRef<unknown>>;
-    value: _angular_core.InputSignal<string | undefined>;
-    link: _angular_core.InputSignal<string | undefined>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WattSegmentedButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattSegmentedButtonComponent, "watt-segmented-button", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-/**
- * Segmented buttons.
- */
 declare class WattSegmentedButtonsComponent implements ControlValueAccessor {
-    private element;
-    segmentedButtonElements: _angular_core.Signal<readonly WattSegmentedButtonComponent[]>;
+    private readonly element;
+    private readonly buttons;
     selected: _angular_core.ModelSignal<string>;
     disabled: _angular_core.WritableSignal<boolean>;
+    constructor();
+    onSegmentSelect(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
     writeValue(selected: string): void;
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: (value: boolean) => void): void;
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WattSegmentedButtonsComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattSegmentedButtonsComponent, "watt-segmented-buttons", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["segmentedButtonElements"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattSegmentedButtonsComponent, "watt-segmented-buttons", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["buttons"], ["*"], true, never>;
+}
+
+declare class WattSegmentedButtonComponent {
+    value: _angular_core.InputSignal<string | undefined>;
+    link: _angular_core.InputSignal<string | undefined>;
+    selected: _angular_core.WritableSignal<boolean>;
+    disabled: _angular_core.WritableSignal<boolean>;
+    tabIndex: _angular_core.WritableSignal<number>;
+    readonly elementRef: ElementRef<any>;
+    focus(): void;
+    onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WattSegmentedButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattSegmentedButtonComponent, "watt-segmented-button", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**

package/types/energinet-watt-textarea-field.d.ts

@@ -25,7 +25,7 @@ declare class WattTextAreaFieldComponent implements ControlValueAccessor {
     /** @ignore */
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WattTextAreaFieldComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattTextAreaFieldComponent, "watt-textarea-field", never, { "formControl": { "alias": "formControl"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "small": { "alias": "small"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["watt-textarea-notice", "*", "watt-field-hint", "watt-field-error"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattTextAreaFieldComponent, "watt-textarea-field", never, { "formControl": { "alias": "formControl"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "small": { "alias": "small"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["watt-textarea-notice", "*", "watt-field-error", "watt-field-hint"], true, never>;
 }
 
 declare class WattTextareaNoticeComponent {