@energinet/watt 4.3.32 → 4.3.34

package/fesm2022/energinet-watt-json-viewer.mjs

@@ -97,8 +97,8 @@ class WattJsonRow {
             return `<span class='watt-json-invalid'>[Circular]</span>`;
         }
     }, ...(ngDevMode ? [{ debugName: "colorized" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattJsonRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WattJsonRow, isStandalone: true, selector: "watt-json-row", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOriginal: { classPropertyName: "isOriginal", publicName: "isOriginal", isSignal: true, isRequired: true, transformFunction: null }, isSame: { classPropertyName: "isSame", publicName: "isSame", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.watt-json-row-added": "!isOriginal() && !isSame()", "class.watt-json-row-removed": "isOriginal() && !isSame()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattJsonRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: WattJsonRow, isStandalone: true, selector: "watt-json-row", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isOriginal: { classPropertyName: "isOriginal", publicName: "isOriginal", isSignal: true, isRequired: true, transformFunction: null }, isSame: { classPropertyName: "isSame", publicName: "isSame", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.watt-json-row-added": "!isOriginal() && !isSame()", "class.watt-json-row-removed": "isOriginal() && !isSame()" } }, ngImport: i0, template: `
     @if (value() !== undefined) {
       @if (expandable()) {
         <watt-icon size="s" [name]="expanded() ? 'down' : 'right'" />
@@ -108,7 +108,7 @@ class WattJsonRow {
     }
   `, isInline: true, styles: ["watt-json-row{position:relative;padding-left:calc(var(--watt-json-level) * 20px);padding-right:calc(var(--watt-json-level) * 20px);color:var(--watt-color-primary)}watt-json-row>watt-icon{position:absolute;top:2px;transform:translate(-100%)}.watt-json-row-added:not(:empty){background-color:var(--watt-color-state-success-light)}.watt-json-row-removed:not(:empty){background-color:var(--watt-color-state-danger-light)}.watt-json-invalid{color:var(--watt-on-light-low-emphasis)}.watt-json-key{color:var(--watt-color-primary)}.watt-json-string{color:var(--watt-color-state-success)}.watt-json-number{color:var(--watt-color-state-warning)}.watt-json-keyword{color:var(--watt-color-state-danger)}\n"], dependencies: [{ kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattJsonRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattJsonRow, decorators: [{
             type: Component,
             args: [{ selector: 'watt-json-row', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [WattIconComponent], host: {
                         '[class.watt-json-row-added]': '!isOriginal() && !isSame()',
@@ -168,8 +168,8 @@ class WattJson {
     toggleExpanded = () => 
     // Prevent toggle when text is being selected
     this.expanded.update((e) => (getSelection()?.isCollapsed && this.expandable() ? !e : e));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattJson, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WattJson, isStandalone: true, selector: "watt-json", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null }, diff: { classPropertyName: "diff", publicName: "diff", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--watt-json-level": "level()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattJson, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: WattJson, isStandalone: true, selector: "watt-json", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, right: { classPropertyName: "right", publicName: "right", isSignal: true, isRequired: false, transformFunction: null }, diff: { classPropertyName: "diff", publicName: "diff", isSignal: true, isRequired: false, transformFunction: null }, tree: { classPropertyName: "tree", publicName: "tree", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--watt-json-level": "level()" } }, ngImport: i0, template: `
     @if (!isRoot()) {
       <vater-flex class="watt-json-row" direction="row" (click)="toggleExpanded()">
         <watt-json-row
@@ -205,7 +205,7 @@ class WattJson {
     }
   `, isInline: true, styles: ["watt-json{cursor:default}.watt-json-row{position:relative}.watt-json-row:after{content:\"\";position:absolute;inset:0;border-radius:4px;background-color:#0000;pointer-events:none}.watt-json-row:hover:after{background-color:#0000001a;outline:1px solid var(--watt-color-neutral-grey-500);outline-offset:-1px}\n"], dependencies: [{ kind: "component", type: i1.VaterFlexComponent, selector: "vater-flex, [vater-flex]", inputs: ["autoSize"] }, { kind: "component", type: WattJsonRow, selector: "watt-json-row", inputs: ["label", "isOriginal", "isSame", "expanded", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [WattJson]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattJson, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattJson, decorators: [{
             type: Component,
             args: [{ selector: 'watt-json', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [VATER, WattJsonRow], host: { '[style.--watt-json-level]': 'level()' }, template: `
     @if (!isRoot()) {
@@ -296,8 +296,8 @@ class WattJsonViewer {
         expanded: this.expanded(),
         maxDepth: this.maxDepth(),
     }), ...(ngDevMode ? [{ debugName: "tree" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattJsonViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: WattJsonViewer, isStandalone: true, selector: "watt-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: true, transformFunction: null }, compare: { classPropertyName: "compare", publicName: "compare", isSignal: true, isRequired: false, transformFunction: null }, maxDepth: { classPropertyName: "maxDepth", publicName: "maxDepth", isSignal: true, isRequired: false, transformFunction: null }, initialExpanded: { classPropertyName: "initialExpanded", publicName: "initialExpanded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattJsonViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: WattJsonViewer, isStandalone: true, selector: "watt-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: true, transformFunction: null }, compare: { classPropertyName: "compare", publicName: "compare", isSignal: true, isRequired: false, transformFunction: null }, maxDepth: { classPropertyName: "maxDepth", publicName: "maxDepth", isSignal: true, isRequired: false, transformFunction: null }, initialExpanded: { classPropertyName: "initialExpanded", publicName: "initialExpanded", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <watt-json
       [left]="json()"
       [right]="compare()"
@@ -306,7 +306,7 @@ class WattJsonViewer {
     />
   `, isInline: true, dependencies: [{ kind: "component", type: WattJson, selector: "watt-json", inputs: ["label", "left", "right", "diff", "tree", "level"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattJsonViewer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattJsonViewer, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector

package/fesm2022/energinet-watt-menu.mjs

@@ -60,14 +60,14 @@ class WattMenuComponent {
      * @ignore
      */
     menu = viewChild.required('menu');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: WattMenuComponent, isStandalone: true, selector: "watt-menu", viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], exportAs: ["wattMenu"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: WattMenuComponent, isStandalone: true, selector: "watt-menu", viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], exportAs: ["wattMenu"], ngImport: i0, template: `
     <mat-menu #menu="matMenu" class="watt-menu-panel">
       <ng-content />
     </mat-menu>
   `, isInline: true, styles: ["watt-menu{display:contents}:root{--watt-menu-padding-block: var(--watt-space-s);--watt-menu-padding-inline: var(--watt-space-m);--watt-menu-item-gap: var(--watt-space-s);--watt-menu-icon-space: calc(var(--watt-menu-icon-size) + var(--watt-menu-item-gap));--watt-menu-icon-size: var(--watt-icon-size-s)}.watt-menu-panel .mat-mdc-menu-content{padding-block:var(--watt-menu-padding-block)}.watt-menu-panel .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text{letter-spacing:0}.watt-menu-panel:not(:has(watt-icon)) .watt-menu-item-icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-menu', template: `
     <mat-menu #menu="matMenu" class="watt-menu-panel">
@@ -99,8 +99,8 @@ class WattMenuItemComponent {
      * Whether the menu item is disabled.
      */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: WattMenuItemComponent, isStandalone: true, selector: "watt-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disabled() || null" } }, ngImport: i0, template: `<button mat-menu-item [disabled]="disabled()">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: WattMenuItemComponent, isStandalone: true, selector: "watt-menu-item", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.disabled": "disabled() || null" } }, ngImport: i0, template: `<button mat-menu-item [disabled]="disabled()">
     <span class="watt-menu-item-content">
       <span class="watt-menu-item-icon">
         <ng-content select="watt-icon" />
@@ -109,7 +109,7 @@ class WattMenuItemComponent {
     </span>
   </button>`, isInline: true, styles: ["watt-menu-item .mat-mdc-menu-item{padding-inline:var(--watt-menu-padding-inline)}watt-menu-item .watt-menu-item-content{display:flex;align-items:center;gap:var(--watt-menu-item-gap);width:100%}watt-menu-item .watt-menu-item-icon{display:flex;align-items:center;justify-content:center;width:var(--watt-menu-icon-size);height:var(--watt-menu-icon-size);flex-shrink:0}watt-menu-item .watt-menu-item-icon watt-icon{display:flex}watt-menu-item .watt-menu-item-icon--show:empty{visibility:hidden}\n"], dependencies: [{ kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-menu-item', imports: [MatMenuItem], template: `<button mat-menu-item [disabled]="disabled()">
     <span class="watt-menu-item-content">
@@ -146,15 +146,15 @@ class WattMenuGroupComponent {
      * The label for the menu group.
      */
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattMenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WattMenuGroupComponent, isStandalone: true, selector: "watt-menu-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "watt-menu-group" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattMenuGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: WattMenuGroupComponent, isStandalone: true, selector: "watt-menu-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "watt-menu-group" }, ngImport: i0, template: `
     @if (label()) {
       <div class="watt-menu-group-heading watt-text-s-highlighted">{{ label() }}</div>
     }
     <ng-content />
   `, isInline: true, styles: [".watt-menu-group-heading{padding-block:var(--watt-menu-padding-block);padding-inline:var(--watt-menu-padding-inline)}.watt-menu-panel--has-icons .watt-menu-group-heading{padding-inline-start:calc(var(--watt-menu-padding-inline) + var(--watt-menu-icon-space))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattMenuGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattMenuGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-menu-group', template: `
     @if (label()) {
@@ -230,10 +230,10 @@ class WattMenuTriggerDirective {
     get menuOpen() {
         return this.matMenuTrigger.menuOpen;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: WattMenuTriggerDirective, isStandalone: true, selector: "[wattMenuTriggerFor]", inputs: { wattMenuTriggerFor: { classPropertyName: "wattMenuTriggerFor", publicName: "wattMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["wattMenuTrigger"], hostDirectives: [{ directive: i1.MatMenuTrigger, outputs: ["menuOpened", "menuOpened", "menuClosed", "menuClosed"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: WattMenuTriggerDirective, isStandalone: true, selector: "[wattMenuTriggerFor]", inputs: { wattMenuTriggerFor: { classPropertyName: "wattMenuTriggerFor", publicName: "wattMenuTriggerFor", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["wattMenuTrigger"], hostDirectives: [{ directive: i1.MatMenuTrigger, outputs: ["menuOpened", "menuOpened", "menuClosed", "menuClosed"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattMenuTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattMenuTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wattMenuTriggerFor]',

package/fesm2022/energinet-watt-modal.mjs

@@ -71,10 +71,10 @@ class WattModalService {
                 ?.setAttribute('style', `--watt-modal-min-height: ${minHeight}`);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattModalService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattModalService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattModalService, decorators: [{
             type: Injectable
         }] });
 
@@ -169,10 +169,10 @@ class WattModalComponent {
     onResize(event) {
         this.scrollable.set(event.target.scrollHeight > event.target.clientHeight);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WattModalComponent, isStandalone: true, selector: "watt-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null }, disableEscAndBackdropClose: { classPropertyName: "disableEscAndBackdropClose", publicName: "disableEscAndBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, titleIcon: { classPropertyName: "titleIcon", publicName: "titleIcon", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<ng-template #modal>\n  <div class=\"watt-modal\" [class]=\"'watt-modal--' + size()\">\n    @if (!disableClose() && !hideCloseButton()) {\n      <watt-button\n        variant=\"icon\"\n        icon=\"close\"\n        class=\"watt-modal-close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close(false)\"\n      />\n    }\n\n    @if (!loading()) {\n      <ng-content select=\"h2\">\n        @if (title()) {\n          <h2 class=\"watt-modal-title\" [class.watt-modal-title-icon]=\"titleIcon()\">\n            @if (titleIcon()) {\n              <watt-icon [name]=\"titleIcon()\" size=\"l\" />\n            }\n            {{ title() }}\n          </h2>\n        }\n      </ng-content>\n    }\n\n    <div\n      wattResizeObserver\n      class=\"watt-modal-content\"\n      [class.watt-modal-scrollable]=\"scrollable()\"\n      (resize)=\"onResize($event)\"\n    >\n      <ng-content />\n    </div>\n    <ng-content select=\"watt-modal-actions\" />\n\n    @if (loading()) {\n      <div class=\"watt-modal__spinner\">\n        <div>\n          <watt-spinner />\n          <p>{{ loadingMessage() }}</p>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n@if (dialogRef) {\n  <ng-template [ngTemplateOutlet]=\"modal\" />\n}\n", styles: [":root{--watt-modal-width: 100vw;--watt-modal-min-height: auto;--watt-modal-height: calc(100vh - var(--watt-topbar-height, 0px));--watt-modal-content-padding: 0 var(--watt-space-ml)}.watt-modal{width:var(--watt-modal-width);max-width:100vw;height:var(--watt-modal-height);min-height:var(--watt-modal-min-height);max-height:100vh;position:relative;display:grid;padding:0;align-items:center;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;grid-template-areas:\"title close\" \"content content\" \"actions actions\"}.watt-modal--small{--watt-modal-width: 320px;--watt-modal-height: auto}@media(min-width:600.02px){.watt-modal--small{--watt-modal-width: 520px}}.watt-modal--small .watt-modal-title{color:var(--watt-typography-headline-color);font-size:1rem;line-height:1.5rem;font-weight:600;text-transform:none;letter-spacing:0}@media(min-width:1280px){.watt-modal--small .watt-modal-title{font-size:1.25rem;line-height:1.75rem}}@media(min-width:720.02px){.watt-modal--medium{--watt-modal-width: 720px;--watt-modal-height: auto}}@media(min-width:786.02px){.watt-modal--large{--watt-modal-width: 786px;--watt-modal-height: auto}}@media(min-width:960.02px){.watt-modal--large{--watt-modal-width: 936px;--watt-modal-height: auto}}.watt-modal-panel{margin-top:var(--watt-topbar-height)}.watt-modal-panel .mat-mdc-dialog-container .mdc-dialog__surface{width:auto}.watt-modal-panel .watt-modal-close{grid-area:close;align-self:start;margin:var(--watt-space-s);color:var(--watt-color-primary)}.watt-modal-panel .watt-modal-title{grid-area:title;margin:var(--watt-space-s) var(--watt-space-ml);color:var(--watt-typography-text-color)}.watt-modal-panel .watt-modal-title.watt-modal-title-icon{display:flex;align-items:center;gap:var(--watt-space-s)}.watt-modal-panel .watt-modal-content{align-self:stretch;grid-area:content;overflow:auto;padding:var(--watt-modal-content-padding)}.watt-modal-panel .watt-modal-content .watt-modal-content--full-width{display:block;margin:0 calc(-1 * var(--watt-space-s)) 0 0}@media(min-width:720.02px){.watt-modal-panel .watt-modal-content .watt-modal-content--full-width{margin:0 calc(-1 * var(--watt-space-ml))}}.watt-modal-panel .watt-modal-scrollable{border:1px solid var(--watt-color-neutral-grey-300);border-left:none;border-right:none}.watt-modal-panel watt-modal-actions{grid-area:actions;display:flex;justify-content:flex-end;padding:var(--watt-space-ml);gap:var(--watt-space-m)}.watt-modal-panel .watt-modal__spinner{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#fffc}.watt-modal-panel .watt-modal__spinner div{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.watt-modal-panel .watt-modal__spinner div p{margin-top:var(--watt-space-m);width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: WattResizeObserverDirective, selector: "[wattResizeObserver]", outputs: ["resize"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattSpinnerComponent, selector: "watt-spinner", inputs: ["diameter", "strokeWidth"] }, { kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: WattModalComponent, isStandalone: true, selector: "watt-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null }, disableEscAndBackdropClose: { classPropertyName: "disableEscAndBackdropClose", publicName: "disableEscAndBackdropClose", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, titleIcon: { classPropertyName: "titleIcon", publicName: "titleIcon", isSignal: true, isRequired: false, transformFunction: null }, autoOpen: { classPropertyName: "autoOpen", publicName: "autoOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<ng-template #modal>\n  <div class=\"watt-modal\" [class]=\"'watt-modal--' + size()\">\n    @if (!disableClose() && !hideCloseButton()) {\n      <watt-button\n        variant=\"icon\"\n        icon=\"close\"\n        class=\"watt-modal-close\"\n        [attr.aria-label]=\"closeLabel()\"\n        (click)=\"close(false)\"\n      />\n    }\n\n    @if (!loading()) {\n      <ng-content select=\"h2\">\n        @if (title()) {\n          <h2 class=\"watt-modal-title\" [class.watt-modal-title-icon]=\"titleIcon()\">\n            @if (titleIcon()) {\n              <watt-icon [name]=\"titleIcon()\" size=\"l\" />\n            }\n            {{ title() }}\n          </h2>\n        }\n      </ng-content>\n    }\n\n    <div\n      wattResizeObserver\n      class=\"watt-modal-content\"\n      [class.watt-modal-scrollable]=\"scrollable()\"\n      (resize)=\"onResize($event)\"\n    >\n      <ng-content />\n    </div>\n    <ng-content select=\"watt-modal-actions\" />\n\n    @if (loading()) {\n      <div class=\"watt-modal__spinner\">\n        <div>\n          <watt-spinner />\n          <p>{{ loadingMessage() }}</p>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n\n@if (dialogRef) {\n  <ng-template [ngTemplateOutlet]=\"modal\" />\n}\n", styles: [":root{--watt-modal-width: 100vw;--watt-modal-min-height: auto;--watt-modal-height: calc(100vh - var(--watt-topbar-height, 0px));--watt-modal-content-padding: 0 var(--watt-space-ml)}.watt-modal{width:var(--watt-modal-width);max-width:100vw;height:var(--watt-modal-height);min-height:var(--watt-modal-min-height);max-height:100vh;position:relative;display:grid;padding:0;align-items:center;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;grid-template-areas:\"title close\" \"content content\" \"actions actions\"}.watt-modal--small{--watt-modal-width: 320px;--watt-modal-height: auto}@media(min-width:600.02px){.watt-modal--small{--watt-modal-width: 520px}}.watt-modal--small .watt-modal-title{color:var(--watt-typography-headline-color);font-size:1rem;line-height:1.5rem;font-weight:600;text-transform:none;letter-spacing:0}@media(min-width:1280px){.watt-modal--small .watt-modal-title{font-size:1.25rem;line-height:1.75rem}}@media(min-width:720.02px){.watt-modal--medium{--watt-modal-width: 720px;--watt-modal-height: auto}}@media(min-width:786.02px){.watt-modal--large{--watt-modal-width: 786px;--watt-modal-height: auto}}@media(min-width:960.02px){.watt-modal--large{--watt-modal-width: 936px;--watt-modal-height: auto}}.watt-modal-panel{margin-top:var(--watt-topbar-height)}.watt-modal-panel .mat-mdc-dialog-container .mdc-dialog__surface{width:auto}.watt-modal-panel .watt-modal-close{grid-area:close;align-self:start;margin:var(--watt-space-s);color:var(--watt-color-primary)}.watt-modal-panel .watt-modal-title{grid-area:title;margin:var(--watt-space-s) var(--watt-space-ml);color:var(--watt-typography-text-color)}.watt-modal-panel .watt-modal-title.watt-modal-title-icon{display:flex;align-items:center;gap:var(--watt-space-s)}.watt-modal-panel .watt-modal-content{align-self:stretch;grid-area:content;overflow:auto;padding:var(--watt-modal-content-padding)}.watt-modal-panel .watt-modal-content .watt-modal-content--full-width{display:block;margin:0 calc(-1 * var(--watt-space-s)) 0 0}@media(min-width:720.02px){.watt-modal-panel .watt-modal-content .watt-modal-content--full-width{margin:0 calc(-1 * var(--watt-space-ml))}}.watt-modal-panel .watt-modal-scrollable{border:1px solid var(--watt-color-neutral-grey-300);border-left:none;border-right:none}.watt-modal-panel watt-modal-actions{grid-area:actions;display:flex;justify-content:flex-end;padding:var(--watt-space-ml);gap:var(--watt-space-m)}.watt-modal-panel .watt-modal__spinner{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#fffc}.watt-modal-panel .watt-modal__spinner div{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.watt-modal-panel .watt-modal__spinner div p{margin-top:var(--watt-space-m);width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: WattResizeObserverDirective, selector: "[wattResizeObserver]", outputs: ["resize"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattSpinnerComponent, selector: "watt-spinner", inputs: ["diameter", "strokeWidth"] }, { kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattModalComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'watt-modal', imports: [
                         NgTemplateOutlet,
@@ -186,10 +186,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * Component for projecting buttons (actions) to the bottom of the modal.
  */
 class WattModalActionsComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: WattModalActionsComponent, isStandalone: true, selector: "watt-modal-actions", ngImport: i0, template: '<ng-content />', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattModalActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: WattModalActionsComponent, isStandalone: true, selector: "watt-modal-actions", ngImport: i0, template: '<ng-content />', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattModalActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattModalActionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'watt-modal-actions',

package/fesm2022/energinet-watt-paginator.mjs

@@ -32,10 +32,10 @@ class WattPaginatorIntlService {
     firstPage = 'First page';
     lastPage = 'Last page';
     of = 'of';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPaginatorIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPaginatorIntlService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPaginatorIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPaginatorIntlService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPaginatorIntlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPaginatorIntlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -107,8 +107,8 @@ class WattPaginatorComponent {
         const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
         return `${startIndex + 1} – ${endIndex} ${this.intl.of} ${length}`;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: WattPaginatorComponent, isStandalone: true, selector: "watt-paginator", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, viewQueries: [{ propertyName: "instance", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.6", type: WattPaginatorComponent, isStandalone: true, selector: "watt-paginator", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, viewQueries: [{ propertyName: "instance", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
     <mat-paginator
       class="watt-paginator"
       (page)="changed.emit($event)"
@@ -121,7 +121,7 @@ class WattPaginatorComponent {
     />
   `, isInline: true, styles: [".cdk-overlay-pane div.mat-mdc-select-panel{--mat-select-panel-background-color: var(--watt-color-neutral-white);padding:0;font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0}.mat-mdc-select-panel .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){--mat-option-selected-state-layer-color: var(--watt-color-neutral-grey-300);color:var(--watt-color-primary)}.mat-mdc-select-panel .mat-mdc-option.mdc-list-item:hover{--mat-option-hover-state-layer-color: var(--watt-color-neutral-grey-100)}watt-paginator{box-shadow:0 -1px 0 var(--watt-color-neutral-grey-300);z-index:100}watt-paginator .mat-mdc-paginator,watt-paginator .mat-mdc-paginator-page-size .mat-mdc-select-trigger{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0}watt-paginator .mat-mdc-paginator{--mat-option-hover-state-layer-color: var(--watt-color-neutral-grey-100)}watt-paginator .mat-mdc-paginator .mdc-notched-outline{--mat-form-field-outlined-outline-width: 0;--mat-form-field-outlined-focus-outline-width: 0}watt-paginator .mat-mdc-paginator .mat-mdc-paginator-page-size-select{width:80px}watt-paginator .mat-mdc-select-arrow-wrapper{color:var(--watt-color-primary)}watt-paginator .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow{width:18px}watt-paginator .mat-mdc-paginator-container{justify-content:center;padding:var(--watt-space-s) var(--watt-space-m)}watt-paginator .mat-mdc-paginator-range-actions{display:contents}watt-paginator .mat-mdc-paginator-range-label{margin:0 auto;-webkit-user-select:none;user-select:none}watt-paginator .mdc-icon-button{color:var(--watt-color-primary);--mat-icon-button-disabled-icon-color: var(--watt-color-neutral-grey-500);--mat-icon-button-icon-size: 28px;--mat-icon-button-state-layer-size: 28px;padding:0;margin-right:5px}watt-paginator .mat-mdc-select-value{padding-right:var(--watt-space-xs);text-align:right}watt-paginator .mat-mdc-select-arrow{color:var(--watt-color-primary)}watt-paginator .mat-mdc-form-field-flex{height:var(--watt-space-l);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPaginatorComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatPaginatorModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'watt-paginator', template: `
     <mat-paginator

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

@@ -43,10 +43,10 @@ class WattPhoneFieldIntlService {
     PL = 'Poland';
     NL = 'Netherlands';
     CH = 'Switzerland';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPhoneFieldIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPhoneFieldIntlService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPhoneFieldIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPhoneFieldIntlService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPhoneFieldIntlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPhoneFieldIntlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -190,8 +190,8 @@ class WattPhoneFieldComponent {
     getCountryName(countryIsoCode) {
         return this.intl[countryIsoCode];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WattPhoneFieldComponent, isStandalone: true, selector: "watt-phone-field", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.watt-field-disabled": "isDisabled()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: WattPhoneFieldComponent, isStandalone: true, selector: "watt-phone-field", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.watt-field-disabled": "isDisabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WattPhoneFieldComponent),
@@ -237,7 +237,7 @@ class WattPhoneFieldComponent {
     </watt-field>
   `, isInline: true, styles: [".watt-phone-field__select.mat-mdc-select-panel{--mat-option-label-text-size: 14px;overflow-y:scroll}.watt-phone-field__select.mat-mdc-select-panel watt-icon{margin-right:var(--watt-space-s)}.watt-phone-field__select.mat-mdc-select-panel watt-icon .mat-icon{margin-right:0}.watt-phone-field__select.mat-mdc-select-panel .mat-mdc-option.mdc-list-item .mdc-list-item__primary-text{display:flex;width:100%;align-items:center;gap:var(--watt-space-xs)}watt-phone-field{display:block}watt-phone-field .watt-phone-field__prefix-container{width:100%;display:flex;align-items:center;gap:var(--watt-space-xs)}watt-phone-field input{width:100%;border:none}watt-phone-field input:focus-visible,watt-phone-field input:focus-within{border:none;outline:none}watt-phone-field .mat-mdc-select{width:auto;height:24px}watt-phone-field .mat-mdc-select .mat-mdc-select-arrow-wrapper{width:24px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: WattFieldErrorComponent, selector: "watt-field-error" }, { kind: "component", type: WattFlagComponent, selector: "watt-flag", inputs: ["country", "label", "size"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-phone-field', encapsulation: ViewEncapsulation.None, imports: [
                         ReactiveFormsModule,

package/fesm2022/energinet-watt-picker-__shared.mjs

@@ -66,10 +66,10 @@ class WattPlaceholderMaskComponent {
         const primaryInputElement = this.primaryInputElement();
         untracked(() => primaryInputElement.dispatchEvent(new InputEvent('input')));
     }, ...(ngDevMode ? [{ debugName: "inputEffect" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPlaceholderMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: WattPlaceholderMaskComponent, isStandalone: true, selector: "watt-placeholder-mask", inputs: { primaryInputElement: { classPropertyName: "primaryInputElement", publicName: "primaryInputElement", isSignal: true, isRequired: true, transformFunction: null }, secondaryInputElement: { classPropertyName: "secondaryInputElement", publicName: "secondaryInputElement", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { maskApplied: "maskApplied" }, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<span class=\"ghost\">{{ primaryGhost() }}</span>\n<span class=\"filler\">{{ primaryFiller() ?? placeholder() }}</span>\n", styles: ["watt-placeholder-mask{position:absolute;font-family:Droid Sans Mono,monospace;box-sizing:content-box;max-width:100%;line-height:20px;padding:1px 2px;letter-spacing:-.03em;pointer-events:none;display:block}.ghost{color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.filler{color:var(--watt-color-neutral-grey-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPlaceholderMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.6", type: WattPlaceholderMaskComponent, isStandalone: true, selector: "watt-placeholder-mask", inputs: { primaryInputElement: { classPropertyName: "primaryInputElement", publicName: "primaryInputElement", isSignal: true, isRequired: true, transformFunction: null }, secondaryInputElement: { classPropertyName: "secondaryInputElement", publicName: "secondaryInputElement", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { maskApplied: "maskApplied" }, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<span class=\"ghost\">{{ primaryGhost() }}</span>\n<span class=\"filler\">{{ primaryFiller() ?? placeholder() }}</span>\n", styles: ["watt-placeholder-mask{position:absolute;font-family:Droid Sans Mono,monospace;box-sizing:content-box;max-width:100%;line-height:20px;padding:1px 2px;letter-spacing:-.03em;pointer-events:none;display:block}.ghost{color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.filler{color:var(--watt-color-neutral-grey-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPlaceholderMaskComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPlaceholderMaskComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-placeholder-mask', encapsulation: ViewEncapsulation.None, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<span class=\"ghost\">{{ primaryGhost() }}</span>\n<span class=\"filler\">{{ primaryFiller() ?? placeholder() }}</span>\n", styles: ["watt-placeholder-mask{position:absolute;font-family:Droid Sans Mono,monospace;box-sizing:content-box;max-width:100%;line-height:20px;padding:1px 2px;letter-spacing:-.03em;pointer-events:none;display:block}.ghost{color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.filler{color:var(--watt-color-neutral-grey-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
         }], propDecorators: { primaryInputElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryInputElement", required: true }] }], secondaryInputElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryInputElement", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: true }] }], maskApplied: [{ type: i0.Output, args: ["maskApplied"] }] } });
@@ -220,10 +220,10 @@ class WattPickerBase {
     markParentControlAsTouched = () => {
         // Intentionally left empty
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPickerBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: WattPickerBase, isStandalone: true, inputs: { userAriaDescribedBy: { classPropertyName: "userAriaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.watt-field-disabled": "disabled()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPickerBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: WattPickerBase, isStandalone: true, inputs: { userAriaDescribedBy: { classPropertyName: "userAriaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.watt-field-disabled": "disabled()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattPickerBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattPickerBase, decorators: [{
             type: Directive,
             args: [{
                     host: {

package/fesm2022/energinet-watt-picker-datepicker.mjs

@@ -286,10 +286,10 @@ class WattDatepickerComponent extends WattPickerBase {
         }
         return maybeDateInDanishTimeZone;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WattDatepickerComponent, isStandalone: true, selector: "watt-datepicker", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rangeMonthOnlyMode: { classPropertyName: "rangeMonthOnlyMode", publicName: "rangeMonthOnlyMode", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, canStepThroughDays: { classPropertyName: "canStepThroughDays", publicName: "canStepThroughDays", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: WattDatepickerComponent }], viewQueries: [{ propertyName: "matEndDate", first: true, predicate: MatEndDate, descendants: true, isSignal: true }, { propertyName: "matStartDate", first: true, predicate: MatStartDate, descendants: true, isSignal: true }, { propertyName: "matDateRangeInput", first: true, predicate: MatDateRangeInput, descendants: true, isSignal: true }, { propertyName: "matDatepickerInput", first: true, predicate: MatDatepickerInput, descendants: true, isSignal: true }, { propertyName: "matDateRangePicker", first: true, predicate: MatDateRangePicker, descendants: true, isSignal: true }, { propertyName: "actualInput", first: true, predicate: ["actualInput"], descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endDateInput"], descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startDateInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<watt-field [control]=\"control\" [label]=\"label()\">\n  @if (range()) {\n    <mat-date-range-input\n      [disabled]=\"disabled()\"\n      [rangePicker]=\"rangeDatepicker\"\n      [min]=\"min() ?? null\"\n      [max]=\"max() ?? null\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      <input\n        inert\n        aria-label=\"start-date-input\"\n        matStartDate\n        #startDateInput\n        [readOnly]=\"rangeMonthOnlyMode()\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [hidden]=\"true\"\n      />\n\n      <input\n        inert\n        aria-label=\"end-date-input\"\n        matEndDate\n        #endDateInput\n        [readOnly]=\"rangeMonthOnlyMode()\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [hidden]=\"true\"\n      />\n    </mat-date-range-input>\n    <input #actualInput class=\"mask-input\" [disabled]=\"disabled()\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"actualInput\"\n      [mask]=\"rangeInputMask()\"\n      [placeholder]=\"rangePlaceholder()\"\n      (maskApplied)=\"rangeInputChanged($event)\"\n    />\n\n    <watt-button\n      variant=\"icon\"\n      icon=\"date\"\n      [disabled]=\"disabled()\"\n      [attr.aria-pressed]=\"false\"\n      (click)=\"rangeDatepicker.open()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <mat-date-range-picker\n      [panelClass]=\"rangeMonthOnlyMode() ? 'watt-datepicker-range__panel--month-only' : ''\"\n      [startView]=\"rangeMonthOnlyMode() ? 'multi-year' : 'month'\"\n      [startAt]=\"startAt()\"\n      (monthSelected)=\"onMonthSelected($event)\"\n      (closed)=\"rangePickerClosed()\"\n      #rangeDatepicker\n    />\n  } @else {\n    <input\n      inert\n      matInput\n      tabindex=\"-1\"\n      aria-label=\"date-input\"\n      #dateInput\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"disabled()\"\n      [min]=\"min() ?? null\"\n      [max]=\"max() ?? null\"\n      [matDatepicker]=\"singleDatepicker\"\n      [matDatepickerFilter]=\"dateFilter()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n    <input #actualInput class=\"mask-input\" [disabled]=\"disabled()\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"actualInput\"\n      [mask]=\"inputMask()\"\n      [placeholder]=\"placeholder()\"\n      (maskApplied)=\"inputChanged($event)\"\n    />\n\n    <watt-button\n      wattSuffix\n      variant=\"icon\"\n      icon=\"date\"\n      [disabled]=\"disabled()\"\n      (click)=\"singleDatepicker.open()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <mat-datepicker\n      #singleDatepicker\n      panelClass=\"watt-datepicker-single__panel\"\n      [dateClass]=\"dateClass()\"\n      [startAt]=\"startAt()\"\n      (closed)=\"datepickerClosed()\"\n    />\n  }\n\n  <ng-content />\n  <ng-content ngProjectAs=\"watt-field-hint\" select=\"watt-field-hint\" />\n  <ng-content ngProjectAs=\"watt-field-error\" select=\"watt-field-error\" />\n  <ng-content ngProjectAs=\"watt-field-warning\" select=\"watt-field-warning\" />\n</watt-field>\n\n@if (!range() && canStepThroughDays()) {\n  <span\n    class=\"watt-datepicker-single__step-through\"\n    [class.watt-datepicker-single__has-label]=\"!!label()\"\n  >\n    <watt-button\n      variant=\"icon\"\n      icon=\"left\"\n      (click)=\"prevDay()\"\n      [disabled]=\"disabled() || isPrevDayButtonDisabled()\"\n    />\n    <watt-button\n      variant=\"icon\"\n      icon=\"right\"\n      (click)=\"nextDay()\"\n      [disabled]=\"disabled() || isNextDayButtonDisabled()\"\n    />\n  </span>\n}\n", styles: ["watt-datepicker{display:flex;align-items:center;width:100%}watt-datepicker watt-button[variant=icon]{margin-left:auto}watt-datepicker watt-button[variant=icon] .watt-button--icon{height:42px}watt-datepicker mat-datepicker,watt-datepicker mat-date-range-picker{display:none}watt-datepicker input.mat-date-range-input-inner,watt-datepicker input.mat-mdc-input-element,watt-datepicker .mat-date-range-input-mirror,watt-datepicker input.mask-input{font-family:Droid Sans Mono,monospace}watt-datepicker input.mat-date-range-input-inner,watt-datepicker input.mat-mdc-input-element,watt-datepicker input.mask-input{border:none;caret-color:var(--watt-color-neutral-black);letter-spacing:-.03em;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;color:transparent}watt-datepicker input.mask-input{color:#000}watt-datepicker input.mask-input{position:absolute;min-width:100%;padding:2px 1px}watt-datepicker input.mask-input:focus-visible{outline:none}watt-datepicker .mat-date-range-input-container{align-items:initial}watt-datepicker .mat-date-range-input-start-wrapper,watt-datepicker .mat-date-range-input-end-wrapper{max-width:calc(50% - var(--watt-space-s));overflow:visible;position:relative}watt-datepicker .mat-date-range-input-separator{display:flex;align-items:center}watt-datepicker .mat-date-range-input-separator-hidden,watt-datepicker .mat-date-range-input-separator{opacity:0!important}watt-datepicker .mat-date-range-input-inner::-webkit-input-placeholder{color:var(--watt-color-neutral-grey-500)!important;-webkit-text-fill-color:var(--watt-color-neutral-grey-500)}watt-datepicker watt-button .mat-button{background:transparent}watt-datepicker:has(.watt-datepicker-single__step-through){align-items:flex-start}watt-datepicker:has(.watt-datepicker-single__step-through) .watt-datepicker-single__step-through{display:flex;margin-top:1px}watt-datepicker:has(.watt-datepicker-single__has-label) .watt-datepicker-single__step-through{margin-top:28px}.watt-datepicker-range__panel--month-only .mat-calendar-period-button{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattPlaceholderMaskComponent, selector: "watt-placeholder-mask", inputs: ["primaryInputElement", "secondaryInputElement", "mask", "placeholder"], outputs: ["maskApplied"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: WattDatepickerComponent, isStandalone: true, selector: "watt-datepicker", inputs: { max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, rangeMonthOnlyMode: { classPropertyName: "rangeMonthOnlyMode", publicName: "rangeMonthOnlyMode", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, dateClass: { classPropertyName: "dateClass", publicName: "dateClass", isSignal: true, isRequired: false, transformFunction: null }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, canStepThroughDays: { classPropertyName: "canStepThroughDays", publicName: "canStepThroughDays", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: WattDatepickerComponent }], viewQueries: [{ propertyName: "matEndDate", first: true, predicate: MatEndDate, descendants: true, isSignal: true }, { propertyName: "matStartDate", first: true, predicate: MatStartDate, descendants: true, isSignal: true }, { propertyName: "matDateRangeInput", first: true, predicate: MatDateRangeInput, descendants: true, isSignal: true }, { propertyName: "matDatepickerInput", first: true, predicate: MatDatepickerInput, descendants: true, isSignal: true }, { propertyName: "matDateRangePicker", first: true, predicate: MatDateRangePicker, descendants: true, isSignal: true }, { propertyName: "actualInput", first: true, predicate: ["actualInput"], descendants: true, isSignal: true }, { propertyName: "input", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endDateInput"], descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startDateInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<watt-field [control]=\"control\" [label]=\"label()\">\n  @if (range()) {\n    <mat-date-range-input\n      [disabled]=\"disabled()\"\n      [rangePicker]=\"rangeDatepicker\"\n      [min]=\"min() ?? null\"\n      [max]=\"max() ?? null\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      <input\n        inert\n        aria-label=\"start-date-input\"\n        matStartDate\n        #startDateInput\n        [readOnly]=\"rangeMonthOnlyMode()\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [hidden]=\"true\"\n      />\n\n      <input\n        inert\n        aria-label=\"end-date-input\"\n        matEndDate\n        #endDateInput\n        [readOnly]=\"rangeMonthOnlyMode()\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        [hidden]=\"true\"\n      />\n    </mat-date-range-input>\n    <input #actualInput class=\"mask-input\" [disabled]=\"disabled()\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"actualInput\"\n      [mask]=\"rangeInputMask()\"\n      [placeholder]=\"rangePlaceholder()\"\n      (maskApplied)=\"rangeInputChanged($event)\"\n    />\n\n    <watt-button\n      variant=\"icon\"\n      icon=\"date\"\n      [disabled]=\"disabled()\"\n      [attr.aria-pressed]=\"false\"\n      (click)=\"rangeDatepicker.open()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <mat-date-range-picker\n      [panelClass]=\"rangeMonthOnlyMode() ? 'watt-datepicker-range__panel--month-only' : ''\"\n      [startView]=\"rangeMonthOnlyMode() ? 'multi-year' : 'month'\"\n      [startAt]=\"startAt()\"\n      (monthSelected)=\"onMonthSelected($event)\"\n      (closed)=\"rangePickerClosed()\"\n      #rangeDatepicker\n    />\n  } @else {\n    <input\n      inert\n      matInput\n      tabindex=\"-1\"\n      aria-label=\"date-input\"\n      #dateInput\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"disabled()\"\n      [min]=\"min() ?? null\"\n      [max]=\"max() ?? null\"\n      [matDatepicker]=\"singleDatepicker\"\n      [matDatepickerFilter]=\"dateFilter()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n    <input #actualInput class=\"mask-input\" [disabled]=\"disabled()\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"actualInput\"\n      [mask]=\"inputMask()\"\n      [placeholder]=\"placeholder()\"\n      (maskApplied)=\"inputChanged($event)\"\n    />\n\n    <watt-button\n      wattSuffix\n      variant=\"icon\"\n      icon=\"date\"\n      [disabled]=\"disabled()\"\n      (click)=\"singleDatepicker.open()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <mat-datepicker\n      #singleDatepicker\n      panelClass=\"watt-datepicker-single__panel\"\n      [dateClass]=\"dateClass()\"\n      [startAt]=\"startAt()\"\n      (closed)=\"datepickerClosed()\"\n    />\n  }\n\n  <ng-content />\n  <ng-content ngProjectAs=\"watt-field-hint\" select=\"watt-field-hint\" />\n  <ng-content ngProjectAs=\"watt-field-error\" select=\"watt-field-error\" />\n  <ng-content ngProjectAs=\"watt-field-warning\" select=\"watt-field-warning\" />\n</watt-field>\n\n@if (!range() && canStepThroughDays()) {\n  <span\n    class=\"watt-datepicker-single__step-through\"\n    [class.watt-datepicker-single__has-label]=\"!!label()\"\n  >\n    <watt-button\n      variant=\"icon\"\n      icon=\"left\"\n      (click)=\"prevDay()\"\n      [disabled]=\"disabled() || isPrevDayButtonDisabled()\"\n    />\n    <watt-button\n      variant=\"icon\"\n      icon=\"right\"\n      (click)=\"nextDay()\"\n      [disabled]=\"disabled() || isNextDayButtonDisabled()\"\n    />\n  </span>\n}\n", styles: ["watt-datepicker{display:flex;align-items:center;width:100%}watt-datepicker watt-button[variant=icon]{margin-left:auto}watt-datepicker watt-button[variant=icon] .watt-button--icon{height:42px}watt-datepicker mat-datepicker,watt-datepicker mat-date-range-picker{display:none}watt-datepicker input.mat-date-range-input-inner,watt-datepicker input.mat-mdc-input-element,watt-datepicker .mat-date-range-input-mirror,watt-datepicker input.mask-input{font-family:Droid Sans Mono,monospace}watt-datepicker input.mat-date-range-input-inner,watt-datepicker input.mat-mdc-input-element,watt-datepicker input.mask-input{border:none;caret-color:var(--watt-color-neutral-black);letter-spacing:-.03em;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;color:transparent}watt-datepicker input.mask-input{color:#000}watt-datepicker input.mask-input{position:absolute;min-width:100%;padding:2px 1px}watt-datepicker input.mask-input:focus-visible{outline:none}watt-datepicker .mat-date-range-input-container{align-items:initial}watt-datepicker .mat-date-range-input-start-wrapper,watt-datepicker .mat-date-range-input-end-wrapper{max-width:calc(50% - var(--watt-space-s));overflow:visible;position:relative}watt-datepicker .mat-date-range-input-separator{display:flex;align-items:center}watt-datepicker .mat-date-range-input-separator-hidden,watt-datepicker .mat-date-range-input-separator{opacity:0!important}watt-datepicker .mat-date-range-input-inner::-webkit-input-placeholder{color:var(--watt-color-neutral-grey-500)!important;-webkit-text-fill-color:var(--watt-color-neutral-grey-500)}watt-datepicker watt-button .mat-button{background:transparent}watt-datepicker:has(.watt-datepicker-single__step-through){align-items:flex-start}watt-datepicker:has(.watt-datepicker-single__step-through) .watt-datepicker-single__step-through{display:flex;margin-top:1px}watt-datepicker:has(.watt-datepicker-single__has-label) .watt-datepicker-single__step-through{margin-top:28px}.watt-datepicker-range__panel--month-only .mat-calendar-period-button{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattPlaceholderMaskComponent, selector: "watt-placeholder-mask", inputs: ["primaryInputElement", "secondaryInputElement", "mask", "placeholder"], outputs: ["maskApplied"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-datepicker', providers: [{ provide: MatFormFieldControl, useExisting: WattDatepickerComponent }], encapsulation: ViewEncapsulation.None, imports: [
                         MatInputModule,
@@ -321,10 +321,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class WattDatepickerIntlService {
     clear = 'Clear';
     select = 'OK';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattDatepickerIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattDatepickerIntlService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattDatepickerIntlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattDatepickerIntlService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattDatepickerIntlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattDatepickerIntlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

package/fesm2022/energinet-watt-picker-timepicker.mjs

@@ -277,10 +277,10 @@ class WattTimepickerComponent extends WattPickerBase {
             endInput.value = end;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WattTimepickerComponent, isStandalone: true, selector: "watt-timepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sliderLabel: { classPropertyName: "sliderLabel", publicName: "sliderLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-owns": "ariaOwns()" } }, providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }], viewQueries: [{ propertyName: "input", first: true, predicate: ["timeInput"], descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startTimeInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endTimeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<watt-field [id]=\"id\" [control]=\"control\" [label]=\"label()\">\n  @if (!range()) {\n    <input\n      inert\n      matInput\n      aria-label=\"time-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"disabled()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled()\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"inputMask\"\n      [placeholder]=\"hoursMinutesPlaceholder\"\n      (maskApplied)=\"inputChanged($event)\"\n    />\n  } @else {\n    <mat-date-range-input\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [disabled]=\"disabled()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      <input\n        inert\n        aria-label=\"start-time-input\"\n        matStartDate\n        #startTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n      <input\n        inert\n        aria-label=\"end-time-input\"\n        matEndDate\n        #endTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n    </mat-date-range-input>\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled()\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"rangeInputMask\"\n      [placeholder]=\"rangePlaceholder\"\n      (maskApplied)=\"rangeInputChanged($event)\"\n    />\n\n    <watt-button\n      variant=\"icon\"\n      icon=\"time\"\n      [disabled]=\"disabled()\"\n      [attr.aria-pressed]=\"sliderOpen()\"\n      (click)=\"toggleSlider()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"sliderOpen()\"\n      [cdkConnectedOverlayOffsetY]=\"12\"\n    >\n      <div\n        [id]=\"sliderId\"\n        role=\"dialog\"\n        class=\"watt-timepicker-slider\"\n        tabindex=\"-1\"\n        (focusin)=\"onFocusIn()\"\n        (focusout)=\"onFocusOut($event)\"\n      >\n        <span class=\"watt-label\">{{ sliderLabel() }}</span>\n        <watt-slider\n          [min]=\"sliderSteps[0]\"\n          [max]=\"sliderSteps[sliderSteps.length - 1]\"\n          [step]=\"1\"\n          [value]=\"sliderValue\"\n          (valueChange)=\"sliderChange$.next($event)\"\n        />\n      </div>\n    </ng-template>\n  }\n\n  <ng-content />\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", styles: ["watt-timepicker{display:flex;align-items:center;width:100%}watt-timepicker watt-button[variant=icon]{margin-left:auto}watt-timepicker watt-button[variant=icon] .watt-button--icon{height:42px}watt-timepicker mat-datepicker,watt-timepicker mat-date-range-picker{display:none}watt-timepicker input.mat-date-range-input-inner,watt-timepicker input.mat-mdc-input-element,watt-timepicker .mat-date-range-input-mirror,watt-timepicker input.mask-input{font-family:Droid Sans Mono,monospace}watt-timepicker input.mat-date-range-input-inner,watt-timepicker input.mat-mdc-input-element,watt-timepicker input.mask-input{border:none;caret-color:var(--watt-color-neutral-black);letter-spacing:-.03em;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;color:transparent}watt-timepicker input.mask-input{color:#000}watt-timepicker input.mask-input{position:absolute;min-width:100%;padding:2px 1px}watt-timepicker input.mask-input:focus-visible{outline:none}watt-timepicker .mat-date-range-input-container{align-items:initial}watt-timepicker .mat-date-range-input-start-wrapper,watt-timepicker .mat-date-range-input-end-wrapper{max-width:calc(50% - var(--watt-space-s));overflow:visible;position:relative}watt-timepicker .mat-date-range-input-separator{display:flex;align-items:center}watt-timepicker .mat-date-range-input-separator-hidden,watt-timepicker .mat-date-range-input-separator{opacity:0!important}watt-timepicker .mat-date-range-input-inner::-webkit-input-placeholder{color:var(--watt-color-neutral-grey-500)!important;-webkit-text-fill-color:var(--watt-color-neutral-grey-500)}.watt-timepicker-slider{width:340px;padding:var(--watt-space-s) 12px var(--watt-space-m);background:var(--watt-color-neutral-white);box-shadow:0 1px 6px #0b3c5d1f,0 4px 18px 3px #2e323414;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattSliderComponent, selector: "watt-slider", inputs: ["min", "max", "step", "value"], outputs: ["valueChange"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: WattPlaceholderMaskComponent, selector: "watt-placeholder-mask", inputs: ["primaryInputElement", "secondaryInputElement", "mask", "placeholder"], outputs: ["maskApplied"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: WattTimepickerComponent, isStandalone: true, selector: "watt-timepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sliderLabel: { classPropertyName: "sliderLabel", publicName: "sliderLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-owns": "ariaOwns()" } }, providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }], viewQueries: [{ propertyName: "input", first: true, predicate: ["timeInput"], descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startTimeInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endTimeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<watt-field [id]=\"id\" [control]=\"control\" [label]=\"label()\">\n  @if (!range()) {\n    <input\n      inert\n      matInput\n      aria-label=\"time-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"disabled()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled()\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"inputMask\"\n      [placeholder]=\"hoursMinutesPlaceholder\"\n      (maskApplied)=\"inputChanged($event)\"\n    />\n  } @else {\n    <mat-date-range-input\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [disabled]=\"disabled()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      <input\n        inert\n        aria-label=\"start-time-input\"\n        matStartDate\n        #startTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n      <input\n        inert\n        aria-label=\"end-time-input\"\n        matEndDate\n        #endTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n    </mat-date-range-input>\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled()\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"rangeInputMask\"\n      [placeholder]=\"rangePlaceholder\"\n      (maskApplied)=\"rangeInputChanged($event)\"\n    />\n\n    <watt-button\n      variant=\"icon\"\n      icon=\"time\"\n      [disabled]=\"disabled()\"\n      [attr.aria-pressed]=\"sliderOpen()\"\n      (click)=\"toggleSlider()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"sliderOpen()\"\n      [cdkConnectedOverlayOffsetY]=\"12\"\n    >\n      <div\n        [id]=\"sliderId\"\n        role=\"dialog\"\n        class=\"watt-timepicker-slider\"\n        tabindex=\"-1\"\n        (focusin)=\"onFocusIn()\"\n        (focusout)=\"onFocusOut($event)\"\n      >\n        <span class=\"watt-label\">{{ sliderLabel() }}</span>\n        <watt-slider\n          [min]=\"sliderSteps[0]\"\n          [max]=\"sliderSteps[sliderSteps.length - 1]\"\n          [step]=\"1\"\n          [value]=\"sliderValue\"\n          (valueChange)=\"sliderChange$.next($event)\"\n        />\n      </div>\n    </ng-template>\n  }\n\n  <ng-content />\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", styles: ["watt-timepicker{display:flex;align-items:center;width:100%}watt-timepicker watt-button[variant=icon]{margin-left:auto}watt-timepicker watt-button[variant=icon] .watt-button--icon{height:42px}watt-timepicker mat-datepicker,watt-timepicker mat-date-range-picker{display:none}watt-timepicker input.mat-date-range-input-inner,watt-timepicker input.mat-mdc-input-element,watt-timepicker .mat-date-range-input-mirror,watt-timepicker input.mask-input{font-family:Droid Sans Mono,monospace}watt-timepicker input.mat-date-range-input-inner,watt-timepicker input.mat-mdc-input-element,watt-timepicker input.mask-input{border:none;caret-color:var(--watt-color-neutral-black);letter-spacing:-.03em;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;color:transparent}watt-timepicker input.mask-input{color:#000}watt-timepicker input.mask-input{position:absolute;min-width:100%;padding:2px 1px}watt-timepicker input.mask-input:focus-visible{outline:none}watt-timepicker .mat-date-range-input-container{align-items:initial}watt-timepicker .mat-date-range-input-start-wrapper,watt-timepicker .mat-date-range-input-end-wrapper{max-width:calc(50% - var(--watt-space-s));overflow:visible;position:relative}watt-timepicker .mat-date-range-input-separator{display:flex;align-items:center}watt-timepicker .mat-date-range-input-separator-hidden,watt-timepicker .mat-date-range-input-separator{opacity:0!important}watt-timepicker .mat-date-range-input-inner::-webkit-input-placeholder{color:var(--watt-color-neutral-grey-500)!important;-webkit-text-fill-color:var(--watt-color-neutral-grey-500)}.watt-timepicker-slider{width:340px;padding:var(--watt-space-s) 12px var(--watt-space-m);background:var(--watt-color-neutral-white);box-shadow:0 1px 6px #0b3c5d1f,0 4px 18px 3px #2e323414;border-radius:3px}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattSliderComponent, selector: "watt-slider", inputs: ["min", "max", "step", "value"], outputs: ["valueChange"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: WattPlaceholderMaskComponent, selector: "watt-placeholder-mask", inputs: ["primaryInputElement", "secondaryInputElement", "mask", "placeholder"], outputs: ["maskApplied"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-timepicker', providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }], encapsulation: ViewEncapsulation.None, host: {
                         '[attr.aria-owns]': 'ariaOwns()',

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

@@ -23,10 +23,10 @@ import { WattSpinnerComponent } from '@energinet/watt/spinner';
  */
 //#endregion
 class WattProgressTrackerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", 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: "21.1.5", ngImport: i0, type: WattProgressTrackerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattProgressTrackerComponent, decorators: [{
             type: Component,
             args: [{ imports: [VaterStackComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'watt-progress-tracker', template: `<vater-stack direction="row"><ng-content /></vater-stack>`, styles: ["watt-progress-tracker{display:block}\n"] }]
         }] });
@@ -55,8 +55,8 @@ class WattProgressTrackerStepComponent {
     current = input(false, ...(ngDevMode ? [{ debugName: "current" }] : []));
     ariaCurrent = computed(() => (this.current() ? 'step' : false), ...(ngDevMode ? [{ debugName: "ariaCurrent" }] : []));
     class = computed(() => `watt-progress-tracker-step-${this.status()}`, ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattProgressTrackerStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WattProgressTrackerStepComponent, isStandalone: true, selector: "watt-progress-tracker-step", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "current() ? \"status\" : \"presentation\"", "attr.class": "class()", "attr.aria-current": "ariaCurrent()", "attr.aria-label": "label()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattProgressTrackerStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: WattProgressTrackerStepComponent, isStandalone: true, selector: "watt-progress-tracker-step", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "current() ? \"status\" : \"presentation\"", "attr.class": "class()", "attr.aria-current": "ariaCurrent()", "attr.aria-label": "label()" } }, ngImport: i0, template: `
     <div class="watt-progress-tracker-step-icon">
       @switch (status()) {
         @case ('running') {
@@ -79,7 +79,7 @@ class WattProgressTrackerStepComponent {
     <div class="watt-progress-tracker-step-text"><ng-content /></div>
   `, isInline: true, styles: [".watt-progress-tracker-step-pending{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-600);--watt-progress-tracker-step-bridge-color: var(--watt-color-neutral-grey-600);--watt-progress-tracker-step-fill-color: transparent}.watt-progress-tracker-step-running{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-900);--watt-progress-tracker-step-bridge-color: var(--watt-color-primary);--watt-progress-tracker-step-fill-color: transparent}.watt-progress-tracker-step-skipped{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-400);--watt-progress-tracker-step-bridge-color: var(--watt-color-neutral-grey-400);--watt-progress-tracker-step-fill-color: transparent}.watt-progress-tracker-step-canceled{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-600);--watt-progress-tracker-step-icon-color: var(--watt-color-neutral-white);--watt-progress-tracker-step-bridge-color: var(--watt-color-neutral-grey-600);--watt-progress-tracker-step-fill-color: var(--watt-color-neutral-grey-600)}.watt-progress-tracker-step-failed{--watt-progress-tracker-step-text-color: var(--watt-color-state-danger);--watt-progress-tracker-step-icon-color: var(--watt-color-neutral-white);--watt-progress-tracker-step-bridge-color: var(--watt-color-state-danger);--watt-progress-tracker-step-fill-color: var(--watt-color-state-danger)}.watt-progress-tracker-step-succeeded{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-900);--watt-progress-tracker-step-icon-color: var(--watt-color-neutral-white);--watt-progress-tracker-step-bridge-color: var(--watt-color-primary);--watt-progress-tracker-step-fill-color: var(--watt-color-primary)}watt-progress-tracker-step{display:contents;--watt-progress-tracker-step-icon-color: var(--watt-progress-tracker-step-text-color)}watt-progress-tracker-step:not(:first-child):before{content:\"\";display:block;width:100%;min-width:var(--watt-space-m);height:1px;margin:0 var(--watt-space-s);background-color:var(--watt-progress-tracker-step-bridge-color)}.watt-progress-tracker-step-icon{display:flex;align-items:center;justify-content:center;width:var(--watt-space-ml);height:var(--watt-space-ml);min-width:var(--watt-space-ml);min-height:var(--watt-space-ml);border-radius:50%;border:1px solid var(--watt-progress-tracker-step-bridge-color);background-color:var(--watt-progress-tracker-step-fill-color)}.watt-progress-tracker-step-icon watt-icon{color:var(--watt-progress-tracker-step-icon-color)}.watt-progress-tracker-step-running .watt-progress-tracker-step-icon{border:none}.watt-progress-tracker-step-text{color:var(--watt-typography-headline-color);font-size:1rem;line-height:1.5rem;font-weight:600;text-transform:none;letter-spacing:0;margin-left:var(--watt-space-s);color:var(--watt-progress-tracker-step-text-color);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }, { kind: "component", type: WattSpinnerComponent, selector: "watt-spinner", inputs: ["diameter", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattProgressTrackerStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattProgressTrackerStepComponent, decorators: [{
             type: Component,
             args: [{ imports: [WattIconComponent, WattSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'watt-progress-tracker-step', host: {
                         '[attr.role]': 'current() ? "status" : "presentation"',

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

@@ -57,10 +57,10 @@ class WattQueryParamsDirective {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattQueryParamsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: WattQueryParamsDirective, isStandalone: true, selector: "[formGroup][wattQueryParams]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattQueryParamsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: WattQueryParamsDirective, isStandalone: true, selector: "[formGroup][wattQueryParams]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WattQueryParamsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: WattQueryParamsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formGroup][wattQueryParams]',