@energinet/watt 4.2.4 → 4.2.5

package/esm2022/shell/nav-list/watt-expand-on-active-link.directive.js

@@ -34,10 +34,10 @@ export class WattExpandOnActiveLinkDirective {
         }
     }, ...(ngDevMode ? [{ debugName: "navListItemsEffect" }] : []));
     wattNavListItemComponents = input([], ...(ngDevMode ? [{ debugName: "wattNavListItemComponents" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattExpandOnActiveLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: WattExpandOnActiveLinkDirective, isStandalone: true, selector: "[wattExpandOnActiveLink]", inputs: { wattNavListItemComponents: { classPropertyName: "wattNavListItemComponents", publicName: "wattNavListItemComponents", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["wattExpandOnActiveLink"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattExpandOnActiveLinkDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: WattExpandOnActiveLinkDirective, isStandalone: true, selector: "[wattExpandOnActiveLink]", inputs: { wattNavListItemComponents: { classPropertyName: "wattNavListItemComponents", publicName: "wattNavListItemComponents", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["wattExpandOnActiveLink"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattExpandOnActiveLinkDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattExpandOnActiveLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wattExpandOnActiveLink]',

package/esm2022/shell/nav-list/watt-expand-on-active-link.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-expand-on-active-link.directive.js","sourceRoot":"","sources":["../../../../../libs/watt/package/shell/nav-list/watt-expand-on-active-link.directive.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAyB,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;;AAQhE,MAAM,OAAO,+BAA+B;IAClC,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAElC,kBAAkB,GAAG,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE;QAChD,MAAM,IAAI,GAA4B,EAAE,CAAC;QAEzC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAE1D,MAAM,YAAY,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAEtD,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,IAAI,CACP,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACnC,IAAI,QAAQ,EAAE,CAAC;oBACb,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACpB,CAAC;YACH,CAAC,CAAC,CACH,CACF,CAAC;QACJ,CAAC;IACH,CAAC,8DAAC,CAAC;IAEH,yBAAyB,GAAG,KAAK,CAAsC,EAAE,qEAAC,CAAC;uGAvBhE,+BAA+B;2FAA/B,+BAA+B;;2FAA/B,+BAA+B;kBAJ3C,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,QAAQ,EAAE,wBAAwB;iBACnC","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Directive, inject, input, effect, OutputRefSubscription } from '@angular/core';\nimport { MatExpansionPanel } from '@angular/material/expansion';\n\nimport { type WattNavListItemComponent } from './watt-nav-list-item.component';\n\n@Directive({\n  selector: '[wattExpandOnActiveLink]',\n  exportAs: 'wattExpandOnActiveLink',\n})\nexport class WattExpandOnActiveLinkDirective {\n  private panel = inject(MatExpansionPanel);\n\n  private navListItemsEffect = effect((cleanupFn) => {\n    const subs: OutputRefSubscription[] = [];\n\n    cleanupFn(() => subs.forEach((sub) => sub.unsubscribe()));\n\n    const navListItems = this.wattNavListItemComponents();\n\n    if (navListItems.length > 0) {\n      subs.push(\n        ...navListItems.map((item) =>\n          item.isActive.subscribe((isActive) => {\n            if (isActive) {\n              this.panel.open();\n            }\n          })\n        )\n      );\n    }\n  });\n\n  wattNavListItemComponents = input<readonly WattNavListItemComponent[]>([]);\n}\n"]}
+{"version":3,"file":"watt-expand-on-active-link.directive.js","sourceRoot":"","sources":["../../../../../libs/watt/package/shell/nav-list/watt-expand-on-active-link.directive.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAyB,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;;AAQhE,MAAM,OAAO,+BAA+B;IAClC,KAAK,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAElC,kBAAkB,GAAG,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE;QAChD,MAAM,IAAI,GAA4B,EAAE,CAAC;QAEzC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAE1D,MAAM,YAAY,GAAG,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAEtD,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,IAAI,CACP,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACnC,IAAI,QAAQ,EAAE,CAAC;oBACb,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACpB,CAAC;YACH,CAAC,CAAC,CACH,CACF,CAAC;QACJ,CAAC;IACH,CAAC,8DAAC,CAAC;IAEH,yBAAyB,GAAG,KAAK,CAAsC,EAAE,qEAAC,CAAC;wGAvBhE,+BAA+B;4FAA/B,+BAA+B;;4FAA/B,+BAA+B;kBAJ3C,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,QAAQ,EAAE,wBAAwB;iBACnC","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Directive, inject, input, effect, OutputRefSubscription } from '@angular/core';\nimport { MatExpansionPanel } from '@angular/material/expansion';\n\nimport { type WattNavListItemComponent } from './watt-nav-list-item.component';\n\n@Directive({\n  selector: '[wattExpandOnActiveLink]',\n  exportAs: 'wattExpandOnActiveLink',\n})\nexport class WattExpandOnActiveLinkDirective {\n  private panel = inject(MatExpansionPanel);\n\n  private navListItemsEffect = effect((cleanupFn) => {\n    const subs: OutputRefSubscription[] = [];\n\n    cleanupFn(() => subs.forEach((sub) => sub.unsubscribe()));\n\n    const navListItems = this.wattNavListItemComponents();\n\n    if (navListItems.length > 0) {\n      subs.push(\n        ...navListItems.map((item) =>\n          item.isActive.subscribe((isActive) => {\n            if (isActive) {\n              this.panel.open();\n            }\n          })\n        )\n      );\n    }\n  });\n\n  wattNavListItemComponents = input<readonly WattNavListItemComponent[]>([]);\n}\n"]}

package/esm2022/shell/nav-list/watt-nav-list-item.component.js

@@ -34,8 +34,8 @@ export class WattNavListItemComponent {
     onRouterLinkActive(isActive) {
         this.isActive.emit(isActive);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattNavListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: WattNavListItemComponent, isStandalone: true, selector: "watt-nav-list-item", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActive" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattNavListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattNavListItemComponent, isStandalone: true, selector: "watt-nav-list-item", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActive" }, ngImport: i0, template: `
     @if (isExternalLink()) {
       <a [href]="link()" [attr.target]="target()"
         ><ng-container *ngTemplateOutlet="templateContent"
@@ -54,7 +54,7 @@ export class WattNavListItemComponent {
     </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattNavListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattNavListItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'watt-nav-list-item',

package/esm2022/shell/nav-list/watt-nav-list-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-nav-list-item.component.js","sourceRoot":"","sources":["../../../../../libs/watt/package/shell/nav-list/watt-nav-list-item.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;;AAyB/D,MAAM,OAAO,wBAAwB;IACnC,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU,CAAC;IAChC,MAAM,GAAG,KAAK,CAA0C,OAAO,kDAAC,CAAC;IACjE,QAAQ,GAAG,MAAM,EAAW,CAAC;IAE7B;;OAEG;IACH,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,0DAAC,CAAC;IAE9E;;OAEG;IACH,kBAAkB,CAAC,QAAiB;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;uGAfU,wBAAwB;2FAAxB,wBAAwB,4WAnBzB;;;;;;;;;;;;;;;;;GAiBT,4DAlBS,gBAAgB,oJAAE,UAAU,oOAAE,gBAAgB;;2FAoB7C,wBAAwB;kBAvBpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,CAAC;oBACzD,QAAQ,EAAE;;;;;;;;;;;;;;;;;GAiBT;iBACF","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\n@Component({\n  selector: 'watt-nav-list-item',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive],\n  template: `\n    @if (isExternalLink()) {\n      <a [href]=\"link()\" [attr.target]=\"target()\"\n        ><ng-container *ngTemplateOutlet=\"templateContent\"\n      /></a>\n    } @else {\n      <a\n        [routerLink]=\"link()\"\n        routerLinkActive=\"active\"\n        (isActiveChange)=\"onRouterLinkActive($event)\"\n        ><ng-container *ngTemplateOutlet=\"templateContent\"\n      /></a>\n    }\n\n    <ng-template #templateContent>\n      <ng-content />\n    </ng-template>\n  `,\n})\nexport class WattNavListItemComponent {\n  link = input.required<string>();\n  target = input<'_self' | '_blank' | '_parent' | '_top'>('_self');\n  isActive = output<boolean>();\n\n  /**\n   * @ignore\n   */\n  isExternalLink = computed(() => /^(http:\\/\\/|https:\\/\\/)/i.test(this.link()));\n\n  /**\n   * @ignore\n   */\n  onRouterLinkActive(isActive: boolean) {\n    this.isActive.emit(isActive);\n  }\n}\n"]}
+{"version":3,"file":"watt-nav-list-item.component.js","sourceRoot":"","sources":["../../../../../libs/watt/package/shell/nav-list/watt-nav-list-item.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;;AAyB/D,MAAM,OAAO,wBAAwB;IACnC,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAU,CAAC;IAChC,MAAM,GAAG,KAAK,CAA0C,OAAO,kDAAC,CAAC;IACjE,QAAQ,GAAG,MAAM,EAAW,CAAC;IAE7B;;OAEG;IACH,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,0DAAC,CAAC;IAE9E;;OAEG;IACH,kBAAkB,CAAC,QAAiB;QAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;wGAfU,wBAAwB;4FAAxB,wBAAwB,4WAnBzB;;;;;;;;;;;;;;;;;GAiBT,4DAlBS,gBAAgB,oJAAE,UAAU,oOAAE,gBAAgB;;4FAoB7C,wBAAwB;kBAvBpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,OAAO,EAAE,CAAC,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,CAAC;oBACzD,QAAQ,EAAE;;;;;;;;;;;;;;;;;GAiBT;iBACF","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\n\n@Component({\n  selector: 'watt-nav-list-item',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgTemplateOutlet, RouterLink, RouterLinkActive],\n  template: `\n    @if (isExternalLink()) {\n      <a [href]=\"link()\" [attr.target]=\"target()\"\n        ><ng-container *ngTemplateOutlet=\"templateContent\"\n      /></a>\n    } @else {\n      <a\n        [routerLink]=\"link()\"\n        routerLinkActive=\"active\"\n        (isActiveChange)=\"onRouterLinkActive($event)\"\n        ><ng-container *ngTemplateOutlet=\"templateContent\"\n      /></a>\n    }\n\n    <ng-template #templateContent>\n      <ng-content />\n    </ng-template>\n  `,\n})\nexport class WattNavListItemComponent {\n  link = input.required<string>();\n  target = input<'_self' | '_blank' | '_parent' | '_top'>('_self');\n  isActive = output<boolean>();\n\n  /**\n   * @ignore\n   */\n  isExternalLink = computed(() => /^(http:\\/\\/|https:\\/\\/)/i.test(this.link()));\n\n  /**\n   * @ignore\n   */\n  onRouterLinkActive(isActive: boolean) {\n    this.isActive.emit(isActive);\n  }\n}\n"]}

package/esm2022/shell/nav-list/watt-nav-list.component.js

@@ -30,8 +30,8 @@ export class WattNavListComponent {
     navListItemComponents = contentChildren(WattNavListItemComponent, ...(ngDevMode ? [{ debugName: "navListItemComponents" }] : []));
     expandable = input(false, ...(ngDevMode ? [{ debugName: "expandable" }] : []));
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: WattNavListComponent, isStandalone: true, selector: "watt-nav-list", inputs: { expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.watt-nav-list--expandable": "expandable()" } }, queries: [{ propertyName: "navListItemComponents", predicate: WattNavListItemComponent, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattNavListComponent, isStandalone: true, selector: "watt-nav-list", inputs: { expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.watt-nav-list--expandable": "expandable()" } }, queries: [{ propertyName: "navListItemComponents", predicate: WattNavListItemComponent, isSignal: true }], ngImport: i0, template: `
     @if (expandable()) {
       <mat-expansion-panel
         wattExpandOnActiveLink
@@ -52,7 +52,7 @@ export class WattNavListComponent {
     </ng-template>
   `, isInline: true, styles: ["watt-nav-list{background-color:var(--watt-sidenav-background-color)}watt-nav-list watt-nav-list-item{display:block}watt-nav-list watt-nav-list-item a{padding:var(--watt-space-s) var(--watt-space-m);padding:var(--watt-space-s);display:block;border-left:var(--watt-space-xs) solid transparent;border-radius:var(--watt-space-s);color:var(--watt-color-neutral-white);text-decoration:none}watt-nav-list watt-nav-list-item a:hover{transition:background-color linear var(--watt-faster-than-a-blink-of-an-eye)}watt-nav-list watt-nav-list-item a:hover{background-color:var(--watt-nav-list-hover-background-color)}watt-nav-list watt-nav-list-item a.active{background-color:var(--watt-nav-list-active-background-color)}watt-nav-list.watt-nav-list--expandable .mat-expansion-panel{background-color:var(--watt-sidenav-background-color);margin:0;border-radius:0}watt-nav-list.watt-nav-list--expandable .mat-expansion-panel-header.mat-expanded:hover,watt-nav-list.watt-nav-list--expandable .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]){transition:background-color linear var(--watt-faster-than-a-blink-of-an-eye);background-color:var(--watt-nav-list-hover-background-color)}watt-nav-list.watt-nav-list--expandable .mat-expansion-panel-header{border-radius:var(--watt-space-s);padding-left:calc(var(--watt-space-xs) + var(--watt-space-s));height:40px}watt-nav-list.watt-nav-list--expandable .mat-expansion-panel-header-title{color:var(--watt-color-neutral-white)}watt-nav-list.watt-nav-list--expandable .mat-expansion-indicator:after{color:var(--watt-color-neutral-white);position:relative;top:-3px}watt-nav-list.watt-nav-list--expandable .mat-expansion-panel-body{padding:0}watt-nav-list.watt-nav-list--expandable watt-nav-list-item a{padding-left:var(--watt-space-m)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: WattExpandOnActiveLinkDirective, selector: "[wattExpandOnActiveLink]", inputs: ["wattNavListItemComponents"], exportAs: ["wattExpandOnActiveLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattNavListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattNavListComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'watt-nav-list', host: {
                         '[class.watt-nav-list--expandable]': 'expandable()',

package/esm2022/shell/nav-list/watt-nav-list.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-nav-list.component.js","sourceRoot":"","sources":["../../../../../libs/watt/package/shell/nav-list/watt-nav-list.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;;;AAgC1E,MAAM,OAAO,oBAAoB;IAC/B;;OAEG;IACH,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,iEAAC,CAAC;IAElE,UAAU,GAAG,KAAK,CAAC,KAAK,sDAAC,CAAC;IAC1B,KAAK,GAAG,KAAK,CAAC,EAAE,iDAAC,CAAC;uGAPP,oBAAoB;2FAApB,oBAAoB,ucAIS,wBAAwB,6CA1BtD;;;;;;;;;;;;;;;;;;;GAmBT,21DACS,gBAAgB,mJAAE,kBAAkB,0dAAE,+BAA+B;;2FAEpE,oBAAoB;kBA9BhC,SAAS;sCACS,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAC3B,eAAe,QAEnB;wBACJ,mCAAmC,EAAE,cAAc;qBACpD,YACS;;;;;;;;;;;;;;;;;;;GAmBT,WACQ,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,+BAA+B,CAAC;6GAMxC,wBAAwB","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  contentChildren,\n  input,\n} from '@angular/core';\nimport { MatExpansionModule } from '@angular/material/expansion';\n\nimport { WattExpandOnActiveLinkDirective } from './watt-expand-on-active-link.directive';\nimport { WattNavListItemComponent } from './watt-nav-list-item.component';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-nav-list',\n  styleUrl: './watt-nav-list.component.scss',\n  host: {\n    '[class.watt-nav-list--expandable]': 'expandable()',\n  },\n  template: `\n    @if (expandable()) {\n      <mat-expansion-panel\n        wattExpandOnActiveLink\n        [wattNavListItemComponents]=\"navListItemComponents()\"\n        class=\"mat-elevation-z0\"\n      >\n        <mat-expansion-panel-header>\n          <mat-panel-title class=\"watt-text-m\">{{ title() }}</mat-panel-title>\n        </mat-expansion-panel-header>\n        <ng-container *ngTemplateOutlet=\"navListTemplate\" />\n      </mat-expansion-panel>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"navListTemplate\" />\n    }\n\n    <ng-template #navListTemplate>\n      <ng-content />\n    </ng-template>\n  `,\n  imports: [NgTemplateOutlet, MatExpansionModule, WattExpandOnActiveLinkDirective],\n})\nexport class WattNavListComponent {\n  /**\n   * @ignore\n   */\n  navListItemComponents = contentChildren(WattNavListItemComponent);\n\n  expandable = input(false);\n  title = input('');\n}\n"]}
+{"version":3,"file":"watt-nav-list.component.js","sourceRoot":"","sources":["../../../../../libs/watt/package/shell/nav-list/watt-nav-list.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;;;AAgC1E,MAAM,OAAO,oBAAoB;IAC/B;;OAEG;IACH,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,iEAAC,CAAC;IAElE,UAAU,GAAG,KAAK,CAAC,KAAK,sDAAC,CAAC;IAC1B,KAAK,GAAG,KAAK,CAAC,EAAE,iDAAC,CAAC;wGAPP,oBAAoB;4FAApB,oBAAoB,ucAIS,wBAAwB,6CA1BtD;;;;;;;;;;;;;;;;;;;GAmBT,21DACS,gBAAgB,mJAAE,kBAAkB,0dAAE,+BAA+B;;4FAEpE,oBAAoB;kBA9BhC,SAAS;sCACS,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAC3B,eAAe,QAEnB;wBACJ,mCAAmC,EAAE,cAAc;qBACpD,YACS;;;;;;;;;;;;;;;;;;;GAmBT,WACQ,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,+BAA+B,CAAC;6GAMxC,wBAAwB","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  contentChildren,\n  input,\n} from '@angular/core';\nimport { MatExpansionModule } from '@angular/material/expansion';\n\nimport { WattExpandOnActiveLinkDirective } from './watt-expand-on-active-link.directive';\nimport { WattNavListItemComponent } from './watt-nav-list-item.component';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-nav-list',\n  styleUrl: './watt-nav-list.component.scss',\n  host: {\n    '[class.watt-nav-list--expandable]': 'expandable()',\n  },\n  template: `\n    @if (expandable()) {\n      <mat-expansion-panel\n        wattExpandOnActiveLink\n        [wattNavListItemComponents]=\"navListItemComponents()\"\n        class=\"mat-elevation-z0\"\n      >\n        <mat-expansion-panel-header>\n          <mat-panel-title class=\"watt-text-m\">{{ title() }}</mat-panel-title>\n        </mat-expansion-panel-header>\n        <ng-container *ngTemplateOutlet=\"navListTemplate\" />\n      </mat-expansion-panel>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"navListTemplate\" />\n    }\n\n    <ng-template #navListTemplate>\n      <ng-content />\n    </ng-template>\n  `,\n  imports: [NgTemplateOutlet, MatExpansionModule, WattExpandOnActiveLinkDirective],\n})\nexport class WattNavListComponent {\n  /**\n   * @ignore\n   */\n  navListItemComponents = contentChildren(WattNavListItemComponent);\n\n  expandable = input(false);\n  title = input('');\n}\n"]}

package/esm2022/shell/shell.component.js

@@ -49,10 +49,10 @@ export class WattShellComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: WattShellComponent, isStandalone: true, selector: "watt-shell", viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["drawer"], 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<mat-sidenav-container class=\"watt-sidenav-container\">\n  <mat-sidenav\n    #drawer\n    class=\"watt-sidenav\"\n    [disableClose]=\"isHandset() === false\"\n    [mode]=\"isHandset() ? 'over' : 'side'\"\n    [opened]=\"isHandset() === false\"\n    role=\"navigation\"\n  >\n    @if (isHandset()) {\n      <watt-button\n        variant=\"icon\"\n        icon=\"close\"\n        class=\"watt-sidenav-close-button\"\n        (click)=\"drawer.toggle()\"\n      />\n    }\n    <ng-content select=\"[watt-shell-sidenav]\" />\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"watt-sidenav-content\">\n    <mat-toolbar class=\"watt-toolbar\">\n      @if (isHandset()) {\n        <watt-button variant=\"icon\" icon=\"menu\" (click)=\"drawer.toggle()\" />\n      }\n\n      <ng-content select=\"[watt-shell-toolbar]\" />\n    </mat-toolbar>\n\n    <main class=\"watt-main-content\">\n      <ng-content />\n    </main>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:block}.watt-sidenav-container{height:100vh}.watt-sidenav-close-button{position:absolute;top:10px;right:0}.mat-drawer{overflow-y:visible}.watt-sidenav{width:245px;background-color:var(--watt-sidenav-background-color)}@media(max-width:1279.98px){.watt-sidenav{width:289px}}.watt-sidenav.mat-drawer-over.mat-drawer-opened .watt-sidenav-close-button{opacity:1}.watt-sidenav.mat-drawer-over .watt-sidenav-close-button{opacity:0;transition:opacity 50ms linear}.watt-sidenav.mat-drawer-over .watt-sidenav-close-button ::ng-deep .mat-mdc-button.mat-icon{color:var(--watt-color-neutral-white)}.watt-sidenav-content{display:grid;grid-template-rows:auto minmax(30rem,1fr)}.watt-main-content{position:relative;height:100%}.watt-toolbar{position:sticky;top:0;background-color:var(--watt-color-neutral-white);border-bottom:1px solid var(--watt-color-neutral-grey-300);height:var(--watt-space-xl);z-index:2}.watt-main-content,.watt-toolbar{width:100vw}@media(min-width:1280px){.watt-main-content,.watt-toolbar{width:calc(100vw - 245px)}}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattShellComponent, isStandalone: true, selector: "watt-shell", viewQueries: [{ propertyName: "sidenav", first: true, predicate: ["drawer"], 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<mat-sidenav-container class=\"watt-sidenav-container\">\n  <mat-sidenav\n    #drawer\n    class=\"watt-sidenav\"\n    [disableClose]=\"isHandset() === false\"\n    [mode]=\"isHandset() ? 'over' : 'side'\"\n    [opened]=\"isHandset() === false\"\n    role=\"navigation\"\n  >\n    @if (isHandset()) {\n      <watt-button\n        variant=\"icon\"\n        icon=\"close\"\n        class=\"watt-sidenav-close-button\"\n        (click)=\"drawer.toggle()\"\n      />\n    }\n    <ng-content select=\"[watt-shell-sidenav]\" />\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"watt-sidenav-content\">\n    <mat-toolbar class=\"watt-toolbar\">\n      @if (isHandset()) {\n        <watt-button variant=\"icon\" icon=\"menu\" (click)=\"drawer.toggle()\" />\n      }\n\n      <ng-content select=\"[watt-shell-toolbar]\" />\n    </mat-toolbar>\n\n    <main class=\"watt-main-content\">\n      <ng-content />\n    </main>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:block}.watt-sidenav-container{height:100vh}.watt-sidenav-close-button{position:absolute;top:10px;right:0}.mat-drawer{overflow-y:visible}.watt-sidenav{width:245px;background-color:var(--watt-sidenav-background-color)}@media(max-width:1279.98px){.watt-sidenav{width:289px}}.watt-sidenav.mat-drawer-over.mat-drawer-opened .watt-sidenav-close-button{opacity:1}.watt-sidenav.mat-drawer-over .watt-sidenav-close-button{opacity:0;transition:opacity 50ms linear}.watt-sidenav.mat-drawer-over .watt-sidenav-close-button ::ng-deep .mat-mdc-button.mat-icon{color:var(--watt-color-neutral-white)}.watt-sidenav-content{display:grid;grid-template-rows:auto minmax(30rem,1fr)}.watt-main-content{position:relative;height:100%}.watt-toolbar{position:sticky;top:0;background-color:var(--watt-color-neutral-white);border-bottom:1px solid var(--watt-color-neutral-grey-300);height:var(--watt-space-xl);z-index:2}.watt-main-content,.watt-toolbar{width:100vw}@media(min-width:1280px){.watt-main-content,.watt-toolbar{width:calc(100vw - 245px)}}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattShellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-shell', imports: [MatSidenavModule, MatToolbarModule, WattButtonComponent], 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<mat-sidenav-container class=\"watt-sidenav-container\">\n  <mat-sidenav\n    #drawer\n    class=\"watt-sidenav\"\n    [disableClose]=\"isHandset() === false\"\n    [mode]=\"isHandset() ? 'over' : 'side'\"\n    [opened]=\"isHandset() === false\"\n    role=\"navigation\"\n  >\n    @if (isHandset()) {\n      <watt-button\n        variant=\"icon\"\n        icon=\"close\"\n        class=\"watt-sidenav-close-button\"\n        (click)=\"drawer.toggle()\"\n      />\n    }\n    <ng-content select=\"[watt-shell-sidenav]\" />\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"watt-sidenav-content\">\n    <mat-toolbar class=\"watt-toolbar\">\n      @if (isHandset()) {\n        <watt-button variant=\"icon\" icon=\"menu\" (click)=\"drawer.toggle()\" />\n      }\n\n      <ng-content select=\"[watt-shell-toolbar]\" />\n    </mat-toolbar>\n\n    <main class=\"watt-main-content\">\n      <ng-content />\n    </main>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:block}.watt-sidenav-container{height:100vh}.watt-sidenav-close-button{position:absolute;top:10px;right:0}.mat-drawer{overflow-y:visible}.watt-sidenav{width:245px;background-color:var(--watt-sidenav-background-color)}@media(max-width:1279.98px){.watt-sidenav{width:289px}}.watt-sidenav.mat-drawer-over.mat-drawer-opened .watt-sidenav-close-button{opacity:1}.watt-sidenav.mat-drawer-over .watt-sidenav-close-button{opacity:0;transition:opacity 50ms linear}.watt-sidenav.mat-drawer-over .watt-sidenav-close-button ::ng-deep .mat-mdc-button.mat-icon{color:var(--watt-color-neutral-white)}.watt-sidenav-content{display:grid;grid-template-rows:auto minmax(30rem,1fr)}.watt-main-content{position:relative;height:100%}.watt-toolbar{position:sticky;top:0;background-color:var(--watt-color-neutral-white);border-bottom:1px solid var(--watt-color-neutral-grey-300);height:var(--watt-space-xl);z-index:2}.watt-main-content,.watt-toolbar{width:100vw}@media(min-width:1280px){.watt-main-content,.watt-toolbar{width:calc(100vw - 245px)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sidenav: [{ type: i0.ViewChild, args: ['drawer', { isSignal: true }] }] } });

package/esm2022/shell/shell.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/shell/shell.component.ts","../../../../libs/watt/package/shell/shell.component.html"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAc,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;;;;AAQ3E,MAAM,OAAO,kBAAkB;IACrB,kBAAkB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;IACrD,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACf,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAa,QAAQ,CAAC,CAAC;IAEpE;;OAEG;IACK,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAChD,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,YAAY,aAAa,CAAC,CAClD,CAAC;IAEF;;OAEG;IACH,SAAS,GAAG,QAAQ,CAClB,IAAI,CAAC,kBAAkB;SACpB,OAAO,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;SACtC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CACzC,CAAC;IAEF;QACE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE;YAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/B,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;gBACvC,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;uGA5BU,kBAAkB;2FAAlB,kBAAkB,yLCnC/B,iiDAkDA,ukCDjBY,gBAAgB,0YAAE,gBAAgB,iJAAE,mBAAmB;;2FAEtD,kBAAkB;kBAN9B,SAAS;+BACE,YAAY,WAGb,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,mBAAmB,CAAC;+FAKR,QAAQ","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Router, NavigationEnd } from '@angular/router';\nimport { Component, inject, viewChild } from '@angular/core';\n\nimport { filter, map } from 'rxjs';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';\n\nimport { WattButtonComponent } from '@energinet/watt/button';\nimport { WattBreakpointsObserver } from '@energinet/watt/core/breakpoints';\n\n@Component({\n  selector: 'watt-shell',\n  styleUrls: ['./shell.component.scss'],\n  templateUrl: './shell.component.html',\n  imports: [MatSidenavModule, MatToolbarModule, WattButtonComponent],\n})\nexport class WattShellComponent {\n  private breakpointObserver = inject(WattBreakpointsObserver);\n  private router = inject(Router);\n  private readonly sidenav = viewChild.required<MatSidenav>('drawer');\n\n  /**\n   * @ignore\n   */\n  private onNavigationEnd$ = this.router.events.pipe(\n    filter((event) => event instanceof NavigationEnd)\n  );\n\n  /**\n   * @ignore\n   */\n  isHandset = toSignal(\n    this.breakpointObserver\n      .observe(['XSmall', 'Small', 'Medium'])\n      .pipe(map((result) => result.matches))\n  );\n\n  constructor() {\n    this.onNavigationEnd$.pipe(takeUntilDestroyed()).subscribe(() => {\n      const sidenav = this.sidenav();\n      if (this.isHandset() && sidenav.opened) {\n        sidenav.close();\n      }\n    });\n  }\n}\n","<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<mat-sidenav-container class=\"watt-sidenav-container\">\n  <mat-sidenav\n    #drawer\n    class=\"watt-sidenav\"\n    [disableClose]=\"isHandset() === false\"\n    [mode]=\"isHandset() ? 'over' : 'side'\"\n    [opened]=\"isHandset() === false\"\n    role=\"navigation\"\n  >\n    @if (isHandset()) {\n      <watt-button\n        variant=\"icon\"\n        icon=\"close\"\n        class=\"watt-sidenav-close-button\"\n        (click)=\"drawer.toggle()\"\n      />\n    }\n    <ng-content select=\"[watt-shell-sidenav]\" />\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"watt-sidenav-content\">\n    <mat-toolbar class=\"watt-toolbar\">\n      @if (isHandset()) {\n        <watt-button variant=\"icon\" icon=\"menu\" (click)=\"drawer.toggle()\" />\n      }\n\n      <ng-content select=\"[watt-shell-toolbar]\" />\n    </mat-toolbar>\n\n    <main class=\"watt-main-content\">\n      <ng-content />\n    </main>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n"]}
+{"version":3,"file":"shell.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/shell/shell.component.ts","../../../../libs/watt/package/shell/shell.component.html"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,MAAM,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAc,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAEzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;;;;AAQ3E,MAAM,OAAO,kBAAkB;IACrB,kBAAkB,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAC;IACrD,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACf,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAa,QAAQ,CAAC,CAAC;IAEpE;;OAEG;IACK,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAChD,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,YAAY,aAAa,CAAC,CAClD,CAAC;IAEF;;OAEG;IACH,SAAS,GAAG,QAAQ,CAClB,IAAI,CAAC,kBAAkB;SACpB,OAAO,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;SACtC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CACzC,CAAC;IAEF;QACE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE;YAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC/B,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;gBACvC,OAAO,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;wGA5BU,kBAAkB;4FAAlB,kBAAkB,yLCnC/B,iiDAkDA,ukCDjBY,gBAAgB,0YAAE,gBAAgB,iJAAE,mBAAmB;;4FAEtD,kBAAkB;kBAN9B,SAAS;+BACE,YAAY,WAGb,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,mBAAmB,CAAC;+FAKR,QAAQ","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Router, NavigationEnd } from '@angular/router';\nimport { Component, inject, viewChild } from '@angular/core';\n\nimport { filter, map } from 'rxjs';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';\n\nimport { WattButtonComponent } from '@energinet/watt/button';\nimport { WattBreakpointsObserver } from '@energinet/watt/core/breakpoints';\n\n@Component({\n  selector: 'watt-shell',\n  styleUrls: ['./shell.component.scss'],\n  templateUrl: './shell.component.html',\n  imports: [MatSidenavModule, MatToolbarModule, WattButtonComponent],\n})\nexport class WattShellComponent {\n  private breakpointObserver = inject(WattBreakpointsObserver);\n  private router = inject(Router);\n  private readonly sidenav = viewChild.required<MatSidenav>('drawer');\n\n  /**\n   * @ignore\n   */\n  private onNavigationEnd$ = this.router.events.pipe(\n    filter((event) => event instanceof NavigationEnd)\n  );\n\n  /**\n   * @ignore\n   */\n  isHandset = toSignal(\n    this.breakpointObserver\n      .observe(['XSmall', 'Small', 'Medium'])\n      .pipe(map((result) => result.matches))\n  );\n\n  constructor() {\n    this.onNavigationEnd$.pipe(takeUntilDestroyed()).subscribe(() => {\n      const sidenav = this.sidenav();\n      if (this.isHandset() && sidenav.opened) {\n        sidenav.close();\n      }\n    });\n  }\n}\n","<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<mat-sidenav-container class=\"watt-sidenav-container\">\n  <mat-sidenav\n    #drawer\n    class=\"watt-sidenav\"\n    [disableClose]=\"isHandset() === false\"\n    [mode]=\"isHandset() ? 'over' : 'side'\"\n    [opened]=\"isHandset() === false\"\n    role=\"navigation\"\n  >\n    @if (isHandset()) {\n      <watt-button\n        variant=\"icon\"\n        icon=\"close\"\n        class=\"watt-sidenav-close-button\"\n        (click)=\"drawer.toggle()\"\n      />\n    }\n    <ng-content select=\"[watt-shell-sidenav]\" />\n  </mat-sidenav>\n\n  <mat-sidenav-content class=\"watt-sidenav-content\">\n    <mat-toolbar class=\"watt-toolbar\">\n      @if (isHandset()) {\n        <watt-button variant=\"icon\" icon=\"menu\" (click)=\"drawer.toggle()\" />\n      }\n\n      <ng-content select=\"[watt-shell-toolbar]\" />\n    </mat-toolbar>\n\n    <main class=\"watt-main-content\">\n      <ng-content />\n    </main>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n"]}

package/esm2022/slide-toggle/watt-slide-toggle.component.js

@@ -42,8 +42,8 @@ export class WattSlideToggleComponent {
     setDisabledState(isDisabled) {
         this.isDisabled.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.6", type: WattSlideToggleComponent, isStandalone: true, selector: "watt-slide-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: WattSlideToggleComponent, isStandalone: true, selector: "watt-slide-toggle", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WattSlideToggleComponent),
@@ -58,7 +58,7 @@ export class WattSlideToggleComponent {
     ><ng-content
   /></mat-slide-toggle>`, isInline: true, styles: ["watt-slide-toggle .mat-mdc-slide-toggle{--mat-slide-toggle-track-outline-color: var(--watt-on-light-low-emphasis);--mat-slide-toggle-selected-track-outline-color: var(--watt-on-light-low-emphasis);--mat-slide-toggle-unselected-handle-horizontal-margin: 0 8px;--mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0 8px;--mat-slide-toggle-selected-handle-horizontal-margin: 0 -8px;--mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0 -8px;--mat-slide-toggle-unselected-hover-handle-color: var(--watt-on-light-low-emphasis);--mat-slide-toggle-unselected-pressed-handle-color: var(--watt-on-light-low-emphasis);--mat-slide-toggle-unselected-handle-color: var(--watt-on-light-low-emphasis);--mat-slide-toggle-unselected-focus-handle-color: var(--watt-on-light-low-emphasis);--mat-slide-toggle-selected-track-outline-width: 0px}watt-slide-toggle .mat-mdc-slide-toggle:focus-within{--mat-slide-toggle-track-outline-color: var(--watt-color-primary)}watt-slide-toggle .mat-mdc-slide-toggle * label{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;padding-left:8px}watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch__track{--mat-slide-toggle-track-shape: 100px;--mat-slide-toggle-track-height: 32px;--mat-slide-toggle-unselected-track-color: var(--watt-color-neutral-white);--mat-slide-toggle-unselected-hover-track-color: var(--watt-color-neutral-white);--mat-slide-toggle-unselected-focus-track-color: var(--watt-color-neutral-white);--mat-slide-toggle-unselected-pressed-track-color: var(--watt-color-neutral-white);--mat-slide-toggle-selected-track-color: var(--watt-color-primary);--mat-slide-toggle-selected-pressed-track-color: var(--watt-color-primary);--mat-slide-toggle-selected-hover-track-color: var(--watt-color-primary);--mat-slide-toggle-selected-focus-track-color: var(--watt-color-primary)}watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch{--mat-slide-toggle-track-width: 52px;--mat-slide-toggle-handle-elevation-shadow: none}watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch__handle{--mat-slide-toggle-handle-surface-color: var(--watt-on-light-low-emphasis);--mat-slide-toggle-handle-width: 16px;--mat-slide-toggle-handle-height: 16px;--mat-slide-toggle-handle-shape: 24px;--mat-slide-toggle-unselected-handle-size: 16px;--mat-slide-toggle-pressed-handle-size: 16px;--mat-slide-toggle-selected-handle-size: 16px;--mat-slide-toggle-selected-pressed-handle-size: 16px}watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch__handle,watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch--selected{--mat-slide-toggle-selected-handle-color: var(--watt-color-neutral-white);--mat-slide-toggle-selected-hover-handle-color: var(--watt-color-neutral-white);--mat-slide-toggle-selected-focus-handle-color: var(--watt-color-neutral-white);--mat-slide-toggle-handle-surface-color: var(--watt-color-neutral-white)}watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch__handle,watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch--unselected:enabled:hover:not(:focus):not(:active){--mat-slide-toggle-unselected-hover-handle-color: var(--watt-on-light-low-emphasis)}watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch__handle-track{--mat-slide-toggle-handle-width: 16px}watt-slide-toggle .mat-mdc-slide-toggle .mdc-switch__ripple{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSlideToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSlideToggleComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [MatSlideToggleModule, FormsModule], providers: [
                         {

package/esm2022/slide-toggle/watt-slide-toggle.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-slide-toggle.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/slide-toggle/watt-slide-toggle.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAwB,iBAAiB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACtF,OAAO,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;;;;AAEtE;;GAEG;AAuBH,MAAM,OAAO,wBAAwB;IAC3B,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAErC,OAAO,GAAG,KAAK,CAAC,KAAK,mDAAC,CAAC;IACvB,UAAU,GAAG,MAAM,CAAC,KAAK,sDAAC,CAAC;IAC3B,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IAExB,UAAU,CAAC,OAAgB;QACzB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED,gBAAgB,CAAC,EAA4B;QAC3C,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC;IAED,iBAAiB,CAAC,EAA4B;QAC5C,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,gBAAgB,CAAE,UAAmB;QACnC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC;uGArBU,wBAAwB;2FAAxB,wBAAwB,kXAlBxB;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,wBAAwB,CAAC;gBACvD,KAAK,EAAE,IAAI;aACZ;SACF,0BAGS;;;;;;;wBAOY,2yGAjBZ,oBAAoB,yXAAE,WAAW;;2FAmBhC,wBAAwB;kBAtBpC,SAAS;sCACS,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,WAC5B,CAAC,oBAAoB,EAAE,WAAW,CAAC,aACjC;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,yBAAyB,CAAC;4BACvD,KAAK,EAAE,IAAI;yBACZ;qBACF,YACS,mBAAmB,YAEnB;;;;;;;wBAOY","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\nimport {\n  inject,\n  input,\n  model,\n  signal,\n  Component,\n  forwardRef,\n  ElementRef,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\n\n/**\n * Slide toggle\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [MatSlideToggleModule, FormsModule],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattSlideToggleComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-slide-toggle',\n  styleUrls: ['./watt-slide-toggle.component.scss'],\n  template: `<mat-slide-toggle\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [(ngModel)]=\"checked\"\n    [disableRipple]=\"true\"\n    [hideIcon]=\"true\"\n    ><ng-content\n  /></mat-slide-toggle>`,\n})\nexport class WattSlideToggleComponent implements ControlValueAccessor {\n  private element = inject(ElementRef);\n\n  checked = model(false);\n  isDisabled = signal(false);\n  required = input(false);\n\n  writeValue(checked: boolean): void {\n    this.checked.set(checked);\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.checked.subscribe(fn);\n  }\n\n  registerOnTouched(fn: (value: boolean) => void): void {\n    this.element.nativeElement.addEventListener('focusout', fn);\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.isDisabled.set(isDisabled);\n  }\n}\n"]}
+{"version":3,"file":"watt-slide-toggle.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/slide-toggle/watt-slide-toggle.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAwB,iBAAiB,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACtF,OAAO,EACL,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;;;;AAEtE;;GAEG;AAuBH,MAAM,OAAO,wBAAwB;IAC3B,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAErC,OAAO,GAAG,KAAK,CAAC,KAAK,mDAAC,CAAC;IACvB,UAAU,GAAG,MAAM,CAAC,KAAK,sDAAC,CAAC;IAC3B,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IAExB,UAAU,CAAC,OAAgB;QACzB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED,gBAAgB,CAAC,EAA4B;QAC3C,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC7B,CAAC;IAED,iBAAiB,CAAC,EAA4B;QAC5C,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,gBAAgB,CAAE,UAAmB;QACnC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC;wGArBU,wBAAwB;4FAAxB,wBAAwB,kXAlBxB;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,wBAAwB,CAAC;gBACvD,KAAK,EAAE,IAAI;aACZ;SACF,0BAGS;;;;;;;wBAOY,2yGAjBZ,oBAAoB,yXAAE,WAAW;;4FAmBhC,wBAAwB;kBAtBpC,SAAS;sCACS,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,WAC5B,CAAC,oBAAoB,EAAE,WAAW,CAAC,aACjC;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,yBAAyB,CAAC;4BACvD,KAAK,EAAE,IAAI;yBACZ;qBACF,YACS,mBAAmB,YAEnB;;;;;;;wBAOY","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\nimport {\n  inject,\n  input,\n  model,\n  signal,\n  Component,\n  forwardRef,\n  ElementRef,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\n\n/**\n * Slide toggle\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [MatSlideToggleModule, FormsModule],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattSlideToggleComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-slide-toggle',\n  styleUrls: ['./watt-slide-toggle.component.scss'],\n  template: `<mat-slide-toggle\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [(ngModel)]=\"checked\"\n    [disableRipple]=\"true\"\n    [hideIcon]=\"true\"\n    ><ng-content\n  /></mat-slide-toggle>`,\n})\nexport class WattSlideToggleComponent implements ControlValueAccessor {\n  private element = inject(ElementRef);\n\n  checked = model(false);\n  isDisabled = signal(false);\n  required = input(false);\n\n  writeValue(checked: boolean): void {\n    this.checked.set(checked);\n  }\n\n  registerOnChange(fn: (value: boolean) => void): void {\n    this.checked.subscribe(fn);\n  }\n\n  registerOnTouched(fn: (value: boolean) => void): void {\n    this.element.nativeElement.addEventListener('focusout', fn);\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.isDisabled.set(isDisabled);\n  }\n}\n"]}

package/esm2022/slider/watt-slider.component.js

@@ -110,10 +110,10 @@ export class WattSliderComponent {
       ${this.sliderColor} ${(toPosition / rangeDistance) * 100}%,
       ${this.sliderColor} 100%)`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: WattSliderComponent, isStandalone: true, selector: "watt-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "maxRange", first: true, predicate: ["maxRange"], descendants: true, isSignal: true }, { propertyName: "minRange", first: true, predicate: ["minRange"], 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<div class=\"controls\">\n  <input\n    #minRange\n    class=\"min-range\"\n    [style.z-index]=\"1\"\n    [style.height]=\"0\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.min\"\n  />\n  <input\n    #maxRange\n    class=\"max-range\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.max\"\n  />\n</div>\n", styles: ["watt-slider{display:flex;flex-direction:column;margin:var(--watt-space-m) 0}watt-slider .controls{position:relative}watt-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:var(--watt-space-ml);height:var(--watt-space-ml);background-color:var(--watt-color-primary-dark);border-radius:50%;box-shadow:0 0 0 1px var(--watt-color-primary);cursor:pointer}watt-slider input[type=range]::-moz-range-thumb{pointer-events:all;width:24px;height:24px;background-color:var(--watt-color-primary-dark);border-radius:50%;box-shadow:0 0 0 1px var(--watt-color-primary);cursor:pointer}watt-slider input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px var(--watt-color-primary-dark),0 0 9px var(--watt-color-primary-dark);-webkit-box-shadow:inset 0 0 3px var(--watt-color-primary-dark),0 0 9px var(--watt-color-primary-dark);cursor:ew-resize}watt-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--watt-space-s);top:var(--watt-space-s)/2;left:0;right:0;position:absolute;transform:translateY(-50%);background-color:var(--watt-color-secondary-light);pointer-events:none;border-radius:var(--watt-space-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: WattSliderComponent, isStandalone: true, selector: "watt-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "maxRange", first: true, predicate: ["maxRange"], descendants: true, isSignal: true }, { propertyName: "minRange", first: true, predicate: ["minRange"], 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<div class=\"controls\">\n  <input\n    #minRange\n    class=\"min-range\"\n    [style.z-index]=\"1\"\n    [style.height]=\"0\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.min\"\n  />\n  <input\n    #maxRange\n    class=\"max-range\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.max\"\n  />\n</div>\n", styles: ["watt-slider{display:flex;flex-direction:column;margin:var(--watt-space-m) 0}watt-slider .controls{position:relative}watt-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:var(--watt-space-ml);height:var(--watt-space-ml);background-color:var(--watt-color-primary-dark);border-radius:50%;box-shadow:0 0 0 1px var(--watt-color-primary);cursor:pointer}watt-slider input[type=range]::-moz-range-thumb{pointer-events:all;width:24px;height:24px;background-color:var(--watt-color-primary-dark);border-radius:50%;box-shadow:0 0 0 1px var(--watt-color-primary);cursor:pointer}watt-slider input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px var(--watt-color-primary-dark),0 0 9px var(--watt-color-primary-dark);-webkit-box-shadow:inset 0 0 3px var(--watt-color-primary-dark),0 0 9px var(--watt-color-primary-dark);cursor:ew-resize}watt-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--watt-space-s);top:var(--watt-space-s)/2;left:0;right:0;position:absolute;transform:translateY(-50%);background-color:var(--watt-color-secondary-light);pointer-events:none;border-radius:var(--watt-space-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSliderComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'watt-slider', 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<div class=\"controls\">\n  <input\n    #minRange\n    class=\"min-range\"\n    [style.z-index]=\"1\"\n    [style.height]=\"0\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.min\"\n  />\n  <input\n    #maxRange\n    class=\"max-range\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.max\"\n  />\n</div>\n", styles: ["watt-slider{display:flex;flex-direction:column;margin:var(--watt-space-m) 0}watt-slider .controls{position:relative}watt-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:all;width:var(--watt-space-ml);height:var(--watt-space-ml);background-color:var(--watt-color-primary-dark);border-radius:50%;box-shadow:0 0 0 1px var(--watt-color-primary);cursor:pointer}watt-slider input[type=range]::-moz-range-thumb{pointer-events:all;width:24px;height:24px;background-color:var(--watt-color-primary-dark);border-radius:50%;box-shadow:0 0 0 1px var(--watt-color-primary);cursor:pointer}watt-slider input[type=range]::-webkit-slider-thumb:active{box-shadow:inset 0 0 3px var(--watt-color-primary-dark),0 0 9px var(--watt-color-primary-dark);-webkit-box-shadow:inset 0 0 3px var(--watt-color-primary-dark),0 0 9px var(--watt-color-primary-dark);cursor:ew-resize}watt-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:var(--watt-space-s);top:var(--watt-space-s)/2;left:0;right:0;position:absolute;transform:translateY(-50%);background-color:var(--watt-color-secondary-light);pointer-events:none;border-radius:var(--watt-space-s)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], maxRange: [{ type: i0.ViewChild, args: ['maxRange', { isSignal: true }] }], minRange: [{ type: i0.ViewChild, args: ['minRange', { isSignal: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });

package/esm2022/slider/watt-slider.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-slider.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/slider/watt-slider.component.ts","../../../../libs/watt/package/slider/watt-slider.component.html"],"names":[],"mappings":"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","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { WattColorHelperService } from '@energinet/watt/core/color';\n\nexport interface WattSliderValue {\n  min: number;\n  max: number;\n}\n\n/**\n * Slider for providing a range of values.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-slider',\n  styleUrls: ['./watt-slider.component.scss'],\n  templateUrl: './watt-slider.component.html',\n})\nexport class WattSliderComponent {\n  private readonly colorService = inject(WattColorHelperService);\n  private readonly destroyRef = inject(DestroyRef);\n\n  /** The lowest permitted value. */\n  readonly min = input.required<number>();\n\n  /** The highest permitted value. */\n  readonly max = input.required<number>();\n\n  /** Step between each value. */\n  readonly step = input(1);\n\n  /** The currently selected range value. */\n  readonly value = input<WattSliderValue | undefined>();\n  readonly currentValue = computed(() => {\n    const inputValue = this.value();\n    if (!inputValue) {\n      return { min: this.min(), max: this.max() };\n    }\n    return inputValue;\n  });\n\n  readonly maxRange = viewChild.required<ElementRef<HTMLInputElement>>('maxRange');\n  readonly minRange = viewChild.required<ElementRef<HTMLInputElement>>('minRange');\n\n  readonly valueChange = output<WattSliderValue>();\n\n  readonly sliderColor = this.colorService.getColor('secondaryLight');\n  readonly rangeColor = this.colorService.getColor('primary');\n\n  constructor() {\n    effect(() => {\n      const value = this.currentValue();\n      this.updateRange(value.min, value.max);\n    });\n\n    effect(() => {\n      const maxRange = this.maxRange();\n      const minRange = this.minRange();\n\n      const maxRangeElement = maxRange.nativeElement;\n      const minRangeElement = minRange.nativeElement;\n\n      // Setup max range input events\n      fromEvent(maxRangeElement, 'input')\n        .pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe((event) => {\n          const maxValue = (event.target as HTMLInputElement).valueAsNumber;\n          const minValue = minRangeElement.valueAsNumber;\n\n          let newMaxValue = maxValue;\n          if (minValue > maxValue) {\n            newMaxValue = minValue;\n            maxRangeElement.valueAsNumber = newMaxValue;\n          }\n\n          const newValue = { min: minValue, max: newMaxValue };\n          this.updateRange(newValue.min, newValue.max);\n          this.valueChange.emit(newValue);\n        });\n\n      // Setup min range input events\n      fromEvent(minRangeElement, 'input')\n        .pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe((event) => {\n          const minValue = (event.target as HTMLInputElement).valueAsNumber;\n          const maxValue = maxRangeElement.valueAsNumber;\n\n          let newMinValue = minValue;\n          if (minValue > maxValue) {\n            newMinValue = maxValue;\n            minRangeElement.valueAsNumber = newMinValue;\n          }\n\n          const newValue = { min: newMinValue, max: maxValue };\n          this.updateRange(newValue.min, newValue.max);\n          this.valueChange.emit(newValue);\n        });\n    });\n  }\n\n  private updateRange(minValue: number, maxValue: number) {\n    const maxRange = this.maxRange();\n    const minRange = this.minRange();\n    if (!maxRange || !minRange) return;\n\n    const maxRangeElement = maxRange.nativeElement;\n    const minRangeElement = minRange.nativeElement;\n\n    maxRangeElement.valueAsNumber = maxValue;\n    minRangeElement.valueAsNumber = minValue;\n\n    const rangeDistance = this.max() - this.min();\n    const fromPosition = minValue - this.min();\n    const toPosition = maxValue - this.min();\n\n    maxRangeElement.style.background = `linear-gradient(\n      to right,\n      ${this.sliderColor} 0%,\n      ${this.sliderColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${this.rangeColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${this.rangeColor} ${(toPosition / rangeDistance) * 100}%,\n      ${this.sliderColor} ${(toPosition / rangeDistance) * 100}%,\n      ${this.sliderColor} 100%)`;\n  }\n}\n","<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<div class=\"controls\">\n  <input\n    #minRange\n    class=\"min-range\"\n    [style.z-index]=\"1\"\n    [style.height]=\"0\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.min\"\n  />\n  <input\n    #maxRange\n    class=\"max-range\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.max\"\n  />\n</div>\n"]}
+{"version":3,"file":"watt-slider.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/slider/watt-slider.component.ts","../../../../libs/watt/package/slider/watt-slider.component.html"],"names":[],"mappings":"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","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { fromEvent } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nimport { WattColorHelperService } from '@energinet/watt/core/color';\n\nexport interface WattSliderValue {\n  min: number;\n  max: number;\n}\n\n/**\n * Slider for providing a range of values.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-slider',\n  styleUrls: ['./watt-slider.component.scss'],\n  templateUrl: './watt-slider.component.html',\n})\nexport class WattSliderComponent {\n  private readonly colorService = inject(WattColorHelperService);\n  private readonly destroyRef = inject(DestroyRef);\n\n  /** The lowest permitted value. */\n  readonly min = input.required<number>();\n\n  /** The highest permitted value. */\n  readonly max = input.required<number>();\n\n  /** Step between each value. */\n  readonly step = input(1);\n\n  /** The currently selected range value. */\n  readonly value = input<WattSliderValue | undefined>();\n  readonly currentValue = computed(() => {\n    const inputValue = this.value();\n    if (!inputValue) {\n      return { min: this.min(), max: this.max() };\n    }\n    return inputValue;\n  });\n\n  readonly maxRange = viewChild.required<ElementRef<HTMLInputElement>>('maxRange');\n  readonly minRange = viewChild.required<ElementRef<HTMLInputElement>>('minRange');\n\n  readonly valueChange = output<WattSliderValue>();\n\n  readonly sliderColor = this.colorService.getColor('secondaryLight');\n  readonly rangeColor = this.colorService.getColor('primary');\n\n  constructor() {\n    effect(() => {\n      const value = this.currentValue();\n      this.updateRange(value.min, value.max);\n    });\n\n    effect(() => {\n      const maxRange = this.maxRange();\n      const minRange = this.minRange();\n\n      const maxRangeElement = maxRange.nativeElement;\n      const minRangeElement = minRange.nativeElement;\n\n      // Setup max range input events\n      fromEvent(maxRangeElement, 'input')\n        .pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe((event) => {\n          const maxValue = (event.target as HTMLInputElement).valueAsNumber;\n          const minValue = minRangeElement.valueAsNumber;\n\n          let newMaxValue = maxValue;\n          if (minValue > maxValue) {\n            newMaxValue = minValue;\n            maxRangeElement.valueAsNumber = newMaxValue;\n          }\n\n          const newValue = { min: minValue, max: newMaxValue };\n          this.updateRange(newValue.min, newValue.max);\n          this.valueChange.emit(newValue);\n        });\n\n      // Setup min range input events\n      fromEvent(minRangeElement, 'input')\n        .pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe((event) => {\n          const minValue = (event.target as HTMLInputElement).valueAsNumber;\n          const maxValue = maxRangeElement.valueAsNumber;\n\n          let newMinValue = minValue;\n          if (minValue > maxValue) {\n            newMinValue = maxValue;\n            minRangeElement.valueAsNumber = newMinValue;\n          }\n\n          const newValue = { min: newMinValue, max: maxValue };\n          this.updateRange(newValue.min, newValue.max);\n          this.valueChange.emit(newValue);\n        });\n    });\n  }\n\n  private updateRange(minValue: number, maxValue: number) {\n    const maxRange = this.maxRange();\n    const minRange = this.minRange();\n    if (!maxRange || !minRange) return;\n\n    const maxRangeElement = maxRange.nativeElement;\n    const minRangeElement = minRange.nativeElement;\n\n    maxRangeElement.valueAsNumber = maxValue;\n    minRangeElement.valueAsNumber = minValue;\n\n    const rangeDistance = this.max() - this.min();\n    const fromPosition = minValue - this.min();\n    const toPosition = maxValue - this.min();\n\n    maxRangeElement.style.background = `linear-gradient(\n      to right,\n      ${this.sliderColor} 0%,\n      ${this.sliderColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${this.rangeColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${this.rangeColor} ${(toPosition / rangeDistance) * 100}%,\n      ${this.sliderColor} ${(toPosition / rangeDistance) * 100}%,\n      ${this.sliderColor} 100%)`;\n  }\n}\n","<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<div class=\"controls\">\n  <input\n    #minRange\n    class=\"min-range\"\n    [style.z-index]=\"1\"\n    [style.height]=\"0\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.min\"\n  />\n  <input\n    #maxRange\n    class=\"max-range\"\n    type=\"range\"\n    [max]=\"max()\"\n    [min]=\"min()\"\n    [step]=\"step()\"\n    [value]=\"value()?.max\"\n  />\n</div>\n"]}

package/esm2022/spinner/watt-spinner.component.js

@@ -29,12 +29,12 @@ export class WattSpinnerComponent {
     diameterSize = computed(() => `--watt-spinner-diameter: ${this.diameter()}px`, ...(ngDevMode ? [{ debugName: "diameterSize" }] : []));
     diameter = input(44, ...(ngDevMode ? [{ debugName: "diameter" }] : []));
     strokeWidth = input(5, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.6", type: WattSpinnerComponent, isStandalone: true, selector: "watt-spinner", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "style": "diameterSize()" } }, ngImport: i0, template: `<svg class="spinner" viewBox="0 0 50 50">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: WattSpinnerComponent, isStandalone: true, selector: "watt-spinner", inputs: { diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "style": "diameterSize()" } }, ngImport: i0, template: `<svg class="spinner" viewBox="0 0 50 50">
     <circle class="path" cx="25" cy="25" r="20" fill="none" [attr.stroke-width]="strokeWidth()" />
   </svg>`, isInline: true, styles: [":host{--watt-spinner-circle-color: var(--watt-color-primary);display:block;width:var(--watt-spinner-diameter);height:var(--watt-spinner-diameter);position:relative}.spinner{animation:rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:calc(var(--watt-spinner-diameter) / 2 * -1) 0 0 calc(var(--watt-spinner-diameter) / 2 * -1);width:var(--watt-spinner-diameter);height:var(--watt-spinner-diameter)}.spinner .path{stroke:var(--watt-spinner-circle-color);stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-spinner', host: {
                         role: 'progressbar',

package/esm2022/spinner/watt-spinner.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-spinner.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/spinner/watt-spinner.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAE3D;;;GAGG;AA4DH,MAAM,OAAO,oBAAoB;IAC/B;;OAEG;IACH,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,4BAA4B,IAAI,CAAC,QAAQ,EAAE,IAAI,wDAAC,CAAC;IAE/E,QAAQ,GAAG,KAAK,CAAC,EAAE,oDAAC,CAAC;IACrB,WAAW,GAAG,KAAK,CAAC,CAAC,uDAAC,CAAC;uGAPZ,oBAAoB;2FAApB,oBAAoB,2bAJrB;;SAEH;;2FAEI,oBAAoB;kBA3DhC,SAAS;+BACE,cAAc,QAkDlB;wBACJ,IAAI,EAAE,aAAa;wBACnB,SAAS,EAAE,gBAAgB;qBAC5B,YACS;;SAEH","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Component, computed, input } from '@angular/core';\n\n/**\n * Usage:\n * `import { WattSpinnerComponent } from '@energinet/watt/spinner';`\n */\n@Component({\n  selector: 'watt-spinner',\n  styles: `\n    :host {\n      --watt-spinner-circle-color: var(--watt-color-primary);\n\n      display: block;\n      width: var(--watt-spinner-diameter);\n      height: var(--watt-spinner-diameter);\n      position: relative;\n    }\n\n    .spinner {\n      animation: rotate 2s linear infinite;\n      z-index: 2;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      margin: calc(var(--watt-spinner-diameter) / 2 * -1) 0 0\n        calc(var(--watt-spinner-diameter) / 2 * -1);\n      width: var(--watt-spinner-diameter);\n      height: var(--watt-spinner-diameter);\n\n      & .path {\n        stroke: var(--watt-spinner-circle-color);\n        stroke-linecap: round;\n        animation: dash 1.5s ease-in-out infinite;\n      }\n    }\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes dash {\n      0% {\n        stroke-dasharray: 1, 150;\n        stroke-dashoffset: 0;\n      }\n      50% {\n        stroke-dasharray: 90, 150;\n        stroke-dashoffset: -35;\n      }\n      100% {\n        stroke-dasharray: 90, 150;\n        stroke-dashoffset: -124;\n      }\n    }\n  `,\n  host: {\n    role: 'progressbar',\n    '[style]': 'diameterSize()',\n  },\n  template: `<svg class=\"spinner\" viewBox=\"0 0 50 50\">\n    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" [attr.stroke-width]=\"strokeWidth()\" />\n  </svg>`,\n})\nexport class WattSpinnerComponent {\n  /**\n   * @ignore\n   */\n  diameterSize = computed(() => `--watt-spinner-diameter: ${this.diameter()}px`);\n\n  diameter = input(44);\n  strokeWidth = input(5);\n}\n"]}
+{"version":3,"file":"watt-spinner.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/spinner/watt-spinner.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;;AAE3D;;;GAGG;AA4DH,MAAM,OAAO,oBAAoB;IAC/B;;OAEG;IACH,YAAY,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,4BAA4B,IAAI,CAAC,QAAQ,EAAE,IAAI,wDAAC,CAAC;IAE/E,QAAQ,GAAG,KAAK,CAAC,EAAE,oDAAC,CAAC;IACrB,WAAW,GAAG,KAAK,CAAC,CAAC,uDAAC,CAAC;wGAPZ,oBAAoB;4FAApB,oBAAoB,2bAJrB;;SAEH;;4FAEI,oBAAoB;kBA3DhC,SAAS;+BACE,cAAc,QAkDlB;wBACJ,IAAI,EAAE,aAAa;wBACnB,SAAS,EAAE,gBAAgB;qBAC5B,YACS;;SAEH","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Component, computed, input } from '@angular/core';\n\n/**\n * Usage:\n * `import { WattSpinnerComponent } from '@energinet/watt/spinner';`\n */\n@Component({\n  selector: 'watt-spinner',\n  styles: `\n    :host {\n      --watt-spinner-circle-color: var(--watt-color-primary);\n\n      display: block;\n      width: var(--watt-spinner-diameter);\n      height: var(--watt-spinner-diameter);\n      position: relative;\n    }\n\n    .spinner {\n      animation: rotate 2s linear infinite;\n      z-index: 2;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      margin: calc(var(--watt-spinner-diameter) / 2 * -1) 0 0\n        calc(var(--watt-spinner-diameter) / 2 * -1);\n      width: var(--watt-spinner-diameter);\n      height: var(--watt-spinner-diameter);\n\n      & .path {\n        stroke: var(--watt-spinner-circle-color);\n        stroke-linecap: round;\n        animation: dash 1.5s ease-in-out infinite;\n      }\n    }\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes dash {\n      0% {\n        stroke-dasharray: 1, 150;\n        stroke-dashoffset: 0;\n      }\n      50% {\n        stroke-dasharray: 90, 150;\n        stroke-dashoffset: -35;\n      }\n      100% {\n        stroke-dasharray: 90, 150;\n        stroke-dashoffset: -124;\n      }\n    }\n  `,\n  host: {\n    role: 'progressbar',\n    '[style]': 'diameterSize()',\n  },\n  template: `<svg class=\"spinner\" viewBox=\"0 0 50 50\">\n    <circle class=\"path\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" [attr.stroke-width]=\"strokeWidth()\" />\n  </svg>`,\n})\nexport class WattSpinnerComponent {\n  /**\n   * @ignore\n   */\n  diameterSize = computed(() => `--watt-spinner-diameter: ${this.diameter()}px`);\n\n  diameter = input(44);\n  strokeWidth = input(5);\n}\n"]}

package/esm2022/stepper/watt-stepper-step.component.js

@@ -32,12 +32,12 @@ export class WattStepperStepComponent extends MatStep {
     entering = output();
     leaving = output();
     next = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattStepperStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: WattStepperStepComponent, isStandalone: true, selector: "watt-stepper-step", inputs: { nextButtonLabel: { classPropertyName: "nextButtonLabel", publicName: "nextButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableNextButton: { classPropertyName: "disableNextButton", publicName: "disableNextButton", isSignal: true, isRequired: false, transformFunction: null }, loadingNextButton: { classPropertyName: "loadingNextButton", publicName: "loadingNextButton", isSignal: true, isRequired: false, transformFunction: null }, previousButtonLabel: { classPropertyName: "previousButtonLabel", publicName: "previousButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, disablePreviousButton: { classPropertyName: "disablePreviousButton", publicName: "disablePreviousButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entering: "entering", leaving: "leaving", next: "next" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template #templateRef>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattStepperStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: WattStepperStepComponent, isStandalone: true, selector: "watt-stepper-step", inputs: { nextButtonLabel: { classPropertyName: "nextButtonLabel", publicName: "nextButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, disableNextButton: { classPropertyName: "disableNextButton", publicName: "disableNextButton", isSignal: true, isRequired: false, transformFunction: null }, loadingNextButton: { classPropertyName: "loadingNextButton", publicName: "loadingNextButton", isSignal: true, isRequired: false, transformFunction: null }, previousButtonLabel: { classPropertyName: "previousButtonLabel", publicName: "previousButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null }, disablePreviousButton: { classPropertyName: "disablePreviousButton", publicName: "disablePreviousButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entering: "entering", leaving: "leaving", next: "next" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: ` <ng-template #templateRef>
     <ng-content />
   </ng-template>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattStepperStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattStepperStepComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'watt-stepper-step',

package/esm2022/stepper/watt-stepper-step.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-stepper-step.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/stepper/watt-stepper-step.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAe,SAAS,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;;AAE/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,CAAC;AAQ/B,MAAM,OAAO,wBAAyB,SAAQ,OAAO;IACnC,WAAW,GAAG,SAAS,CAAuB,aAAa,uDAAC,CAAC;IAE7E,eAAe,GAAG,KAAK,qEAAU,CAAC;IAClC,iBAAiB,GAAG,KAAK,CAAU,KAAK,6DAAC,CAAC;IAC1C,iBAAiB,GAAG,KAAK,CAAU,KAAK,6DAAC,CAAC;IAC1C,mBAAmB,GAAG,KAAK,yEAAU,CAAC;IACtC,OAAO,GAAG,KAAK,CAAU,IAAI,mDAAC,CAAC;IAC/B,qBAAqB,GAAG,KAAK,CAAU,KAAK,iEAAC,CAAC;IAE9C,QAAQ,GAAG,MAAM,EAAW,CAAC;IAC7B,OAAO,GAAG,MAAM,EAAW,CAAC;IAC5B,IAAI,GAAG,MAAM,EAAQ,CAAC;uGAZX,wBAAwB;2FAAxB,wBAAwB,usCAJzB;;iBAEK;;2FAEJ,wBAAwB;kBANpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,QAAQ,EAAE;;iBAEK;iBAChB;yEAE+D,aAAa","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Component, input, output, TemplateRef, viewChild } from '@angular/core';\nimport { MatStep } from '@angular/material/stepper';\nimport { CdkStep } from '@angular/cdk/stepper';\n\nexport { CdkStep as WattStep };\n\n@Component({\n  selector: 'watt-stepper-step',\n  template: ` <ng-template #templateRef>\n    <ng-content />\n  </ng-template>`,\n})\nexport class WattStepperStepComponent extends MatStep {\n  public readonly templateRef = viewChild<TemplateRef<unknown>>('templateRef');\n\n  nextButtonLabel = input<string>();\n  disableNextButton = input<boolean>(false);\n  loadingNextButton = input<boolean>(false);\n  previousButtonLabel = input<string>();\n  enabled = input<boolean>(true);\n  disablePreviousButton = input<boolean>(false);\n\n  entering = output<CdkStep>();\n  leaving = output<CdkStep>();\n  next = output<void>();\n}\n"]}
+{"version":3,"file":"watt-stepper-step.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/stepper/watt-stepper-step.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAe,SAAS,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;;AAE/C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,CAAC;AAQ/B,MAAM,OAAO,wBAAyB,SAAQ,OAAO;IACnC,WAAW,GAAG,SAAS,CAAuB,aAAa,uDAAC,CAAC;IAE7E,eAAe,GAAG,KAAK,qEAAU,CAAC;IAClC,iBAAiB,GAAG,KAAK,CAAU,KAAK,6DAAC,CAAC;IAC1C,iBAAiB,GAAG,KAAK,CAAU,KAAK,6DAAC,CAAC;IAC1C,mBAAmB,GAAG,KAAK,yEAAU,CAAC;IACtC,OAAO,GAAG,KAAK,CAAU,IAAI,mDAAC,CAAC;IAC/B,qBAAqB,GAAG,KAAK,CAAU,KAAK,iEAAC,CAAC;IAE9C,QAAQ,GAAG,MAAM,EAAW,CAAC;IAC7B,OAAO,GAAG,MAAM,EAAW,CAAC;IAC5B,IAAI,GAAG,MAAM,EAAQ,CAAC;wGAZX,wBAAwB;4FAAxB,wBAAwB,usCAJzB;;iBAEK;;4FAEJ,wBAAwB;kBANpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,mBAAmB;oBAC7B,QAAQ,EAAE;;iBAEK;iBAChB;yEAE+D,aAAa","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { Component, input, output, TemplateRef, viewChild } from '@angular/core';\nimport { MatStep } from '@angular/material/stepper';\nimport { CdkStep } from '@angular/cdk/stepper';\n\nexport { CdkStep as WattStep };\n\n@Component({\n  selector: 'watt-stepper-step',\n  template: ` <ng-template #templateRef>\n    <ng-content />\n  </ng-template>`,\n})\nexport class WattStepperStepComponent extends MatStep {\n  public readonly templateRef = viewChild<TemplateRef<unknown>>('templateRef');\n\n  nextButtonLabel = input<string>();\n  disableNextButton = input<boolean>(false);\n  loadingNextButton = input<boolean>(false);\n  previousButtonLabel = input<string>();\n  enabled = input<boolean>(true);\n  disablePreviousButton = input<boolean>(false);\n\n  entering = output<CdkStep>();\n  leaving = output<CdkStep>();\n  next = output<void>();\n}\n"]}

package/esm2022/stepper/watt-stepper.component.js

@@ -62,8 +62,8 @@ export class WattStepperComponent extends MatStepper {
         this.stepper.selected?.stepControl?.markAllAsTouched();
         this.completed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: WattStepperComponent, isStandalone: true, selector: "watt-stepper", inputs: { isCompleting: "isCompleting" }, outputs: { completed: "completed" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattStepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattStepperComponent, isStandalone: true, selector: "watt-stepper", inputs: { isCompleting: "isCompleting" }, outputs: { completed: "completed" }, providers: [
             {
                 provide: STEPPER_GLOBAL_OPTIONS,
                 useValue: { showError: true, displayDefaultIndicatorType: false },
@@ -72,7 +72,7 @@ export class WattStepperComponent extends MatStepper {
             { provide: MatStepper, useExisting: WattStepperComponent },
         ], queries: [{ propertyName: "_steps", predicate: WattStepperStepComponent, descendants: true }], viewQueries: [{ propertyName: "stepper", first: true, predicate: MatStepper, descendants: 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<mat-stepper\n  #stepper\n  [disableRipple]=\"disableRipple\"\n  [linear]=\"true\"\n  animationDuration=\"0\"\n  class=\"watt-stepper\"\n>\n  <ng-template let-index=\"index\" matStepperIcon=\"edit\">\n    {{ index + 1 }}\n  </ng-template>\n  <ng-template matStepperIcon=\"done\">\n    <watt-icon name=\"checkmark\" />\n  </ng-template>\n  <ng-template let-index=\"index\" matStepperIcon=\"number\">\n    @if (\n      stepper.steps.get(index)?.completed &&\n      stepper.steps.get(index)?.interacted &&\n      index !== stepper.selectedIndex\n    ) {\n      <watt-icon name=\"checkmark\" />\n    } @else {\n      {{ index + 1 }}\n    }\n  </ng-template>\n  <ng-template let-index=\"index\" matStepperIcon=\"error\">\n    {{ index + 1 }}\n  </ng-template>\n  @for (step of _steps; track step) {\n    @if (step.enabled()) {\n      <mat-step [editable]=\"step.editable\" [stepControl]=\"step.stepControl\">\n        <ng-template matStepLabel>{{ step.label }}</ng-template>\n        <div class=\"watt-stepper-content-wrapper\">\n          <ng-container *ngTemplateOutlet=\"step.templateRef()\" />\n        </div>\n        <div class=\"watt-stepper-button-wrapper\">\n          @if (!(onFirstStep$ | push)) {\n            <watt-button\n              [disabled]=\"step.disablePreviousButton()\"\n              variant=\"secondary\"\n              (click)=\"previousStep()\"\n            >\n              <watt-icon name=\"left\" />\n              {{ step.previousButtonLabel() }}\n            </watt-button>\n          }\n\n          @if (!(onLastStep$ | push)) {\n            <watt-button\n              variant=\"secondary\"\n              (click)=\"nextStep(step)\"\n              [loading]=\"step.loadingNextButton()\"\n              [disabled]=\"step.disableNextButton()\"\n            >\n              {{ step.nextButtonLabel() }}\n              <watt-icon name=\"right\" />\n            </watt-button>\n          }\n\n          @if (onLastStep$ | push) {\n            <watt-button\n              variant=\"primary\"\n              [loading]=\"isCompleting\"\n              (click)=\"complete()\"\n              [disabled]=\"step.disableNextButton()\"\n              >{{ step.nextButtonLabel() }}\n            </watt-button>\n          }\n        </div>\n      </mat-step>\n    }\n  }\n</mat-stepper>\n", styles: [".watt-stepper .mat-horizontal-stepper-header-container{padding-bottom:var(--watt-space-ml)}.watt-stepper .mat-step-label.mat-step-label-selected{color:var(--watt-color-primary)}.watt-stepper .mat-form-field-suffix{padding-right:var(--watt-space-s);color:var(--watt-color-neutral-grey-600)}.watt-stepper .mat-step-label{color:var(--watt-typography-label-color);font-size:1rem;line-height:1.5rem;font-weight:600;text-transform:none}.watt-stepper .mat-step-header .mat-step-icon-selected{border:solid 1px var(--watt-color-primary);background-color:var(--watt-color-neutral-white);color:var(--watt-color-primary)}.watt-stepper .mat-stepper-horizontal-line{margin:0 5px}.watt-stepper .watt-stepper-button-wrapper{display:flex;justify-content:flex-end;gap:var(--watt-space-m);width:100%;padding-top:var(--watt-space-ml)}.watt-stepper .mat-step-icon-state-error{color:var(--watt-color-state-danger);border:solid 1px var(--watt-color-state-danger)}@media(max-width:719.98px){.watt-stepper .mat-horizontal-stepper-header{padding:0}.watt-stepper .mat-step-label:not(.mat-step-label-selected){display:none}.watt-stepper .mat-horizontal-content-container{padding:0 0 24px}}.watt-modal--medium watt-stepper,.watt-modal--medium .watt-stepper,.watt-modal--large watt-stepper,.watt-modal--large .watt-stepper{height:100%}.watt-modal--medium .mat-horizontal-stepper-content,.watt-modal--large .mat-horizontal-stepper-content{display:grid;align-items:center;grid-template-rows:1fr auto;grid-template-areas:\"content\" \"actions\"}.watt-modal--medium .mat-horizontal-stepper-content .watt-stepper-content-wrapper,.watt-modal--large .mat-horizontal-stepper-content .watt-stepper-content-wrapper{align-self:stretch;grid-area:content;overflow:auto}.watt-modal--medium .mat-horizontal-stepper-content .watt-stepper-button-wrapper,.watt-modal--large .mat-horizontal-stepper-content .watt-stepper-button-wrapper{grid-area:actions}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i1.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "pipe", type: RxPush, name: "push" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattStepperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-stepper', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, RxPush, MatStepperModule, WattIconComponent, WattButtonComponent], providers: [
                         {

package/esm2022/stepper/watt-stepper.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-stepper.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/stepper/watt-stepper.component.ts","../../../../libs/watt/package/stepper/watt-stepper.component.html"],"names":[],"mappings":"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","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  AfterViewInit,\n  Component,\n  ContentChildren,\n  DestroyRef,\n  EventEmitter,\n  inject,\n  Input,\n  Output,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { CdkStepper, STEPPER_GLOBAL_OPTIONS, StepperSelectionEvent } from '@angular/cdk/stepper';\nimport { MatStepper, MatStepperModule } from '@angular/material/stepper';\nimport { RxPush } from '@rx-angular/template/push';\nimport { from, map, Observable, of, startWith, withLatestFrom } from 'rxjs';\n\nimport { WattButtonComponent } from '@energinet/watt/button';\nimport { WattIconComponent } from '@energinet/watt/icon';\n\nimport { WattStepperStepComponent } from './watt-stepper-step.component';\n\n@Component({\n  selector: 'watt-stepper',\n  templateUrl: './watt-stepper.component.html',\n  styleUrls: ['./watt-stepper.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet, RxPush, MatStepperModule, WattIconComponent, WattButtonComponent],\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false },\n    },\n    { provide: CdkStepper, useExisting: WattStepperComponent },\n    { provide: MatStepper, useExisting: WattStepperComponent },\n  ],\n})\nexport class WattStepperComponent extends MatStepper implements AfterViewInit {\n  @Output() completed = new EventEmitter<void>();\n  @Input() isCompleting = false;\n\n  @ContentChildren(WattStepperStepComponent, { descendants: true })\n  declare _steps: QueryList<WattStepperStepComponent>;\n\n  @ViewChild(MatStepper) stepper!: MatStepper;\n\n  selectedIndexChanged$!: Observable<StepperSelectionEvent>;\n  onFirstStep$!: Observable<boolean>;\n  onLastStep$!: Observable<boolean>;\n\n  private destroyRef = inject(DestroyRef);\n\n  override reset() {\n    this.stepper.reset();\n  }\n\n  override ngAfterViewInit(): void {\n    this.selectedIndexChanged$ = from(this.stepper.selectionChange);\n    this.onLastStep$ = this.selectedIndexChanged$.pipe(\n      withLatestFrom(of(this._steps)),\n      map(([index, steps]) => index.selectedIndex === steps.filter((x) => x.enabled()).length - 1),\n      startWith(false)\n    );\n    this.onFirstStep$ = this.selectedIndexChanged$.pipe(\n      map((index) => index.selectedIndex === 0),\n      startWith(true)\n    );\n\n    // Emit entering and leaving events\n    this.selectedIndexChanged$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((change) => {\n      this._steps.get(change.selectedIndex)?.entering.emit(change.selectedStep);\n      this._steps.get(change.previouslySelectedIndex)?.leaving.emit(change.previouslySelectedStep);\n    });\n  }\n\n  nextStep(step: WattStepperStepComponent): void {\n    step.next.emit();\n    this.stepper.selected?.stepControl?.markAllAsTouched();\n    this.stepper.next();\n  }\n\n  previousStep(): void {\n    this.stepper.previous();\n  }\n\n  complete(): void {\n    this.stepper.selected?.stepControl?.markAllAsTouched();\n    this.completed.emit();\n  }\n}\n\nexport const WATT_STEPPER = [WattStepperComponent, WattStepperStepComponent];\n","<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<mat-stepper\n  #stepper\n  [disableRipple]=\"disableRipple\"\n  [linear]=\"true\"\n  animationDuration=\"0\"\n  class=\"watt-stepper\"\n>\n  <ng-template let-index=\"index\" matStepperIcon=\"edit\">\n    {{ index + 1 }}\n  </ng-template>\n  <ng-template matStepperIcon=\"done\">\n    <watt-icon name=\"checkmark\" />\n  </ng-template>\n  <ng-template let-index=\"index\" matStepperIcon=\"number\">\n    @if (\n      stepper.steps.get(index)?.completed &&\n      stepper.steps.get(index)?.interacted &&\n      index !== stepper.selectedIndex\n    ) {\n      <watt-icon name=\"checkmark\" />\n    } @else {\n      {{ index + 1 }}\n    }\n  </ng-template>\n  <ng-template let-index=\"index\" matStepperIcon=\"error\">\n    {{ index + 1 }}\n  </ng-template>\n  @for (step of _steps; track step) {\n    @if (step.enabled()) {\n      <mat-step [editable]=\"step.editable\" [stepControl]=\"step.stepControl\">\n        <ng-template matStepLabel>{{ step.label }}</ng-template>\n        <div class=\"watt-stepper-content-wrapper\">\n          <ng-container *ngTemplateOutlet=\"step.templateRef()\" />\n        </div>\n        <div class=\"watt-stepper-button-wrapper\">\n          @if (!(onFirstStep$ | push)) {\n            <watt-button\n              [disabled]=\"step.disablePreviousButton()\"\n              variant=\"secondary\"\n              (click)=\"previousStep()\"\n            >\n              <watt-icon name=\"left\" />\n              {{ step.previousButtonLabel() }}\n            </watt-button>\n          }\n\n          @if (!(onLastStep$ | push)) {\n            <watt-button\n              variant=\"secondary\"\n              (click)=\"nextStep(step)\"\n              [loading]=\"step.loadingNextButton()\"\n              [disabled]=\"step.disableNextButton()\"\n            >\n              {{ step.nextButtonLabel() }}\n              <watt-icon name=\"right\" />\n            </watt-button>\n          }\n\n          @if (onLastStep$ | push) {\n            <watt-button\n              variant=\"primary\"\n              [loading]=\"isCompleting\"\n              (click)=\"complete()\"\n              [disabled]=\"step.disableNextButton()\"\n              >{{ step.nextButtonLabel() }}\n            </watt-button>\n          }\n        </div>\n      </mat-step>\n    }\n  }\n</mat-stepper>\n"]}
+{"version":3,"file":"watt-stepper.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/stepper/watt-stepper.component.ts","../../../../libs/watt/package/stepper/watt-stepper.component.html"],"names":[],"mappings":"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","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  AfterViewInit,\n  Component,\n  ContentChildren,\n  DestroyRef,\n  EventEmitter,\n  inject,\n  Input,\n  Output,\n  QueryList,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { CdkStepper, STEPPER_GLOBAL_OPTIONS, StepperSelectionEvent } from '@angular/cdk/stepper';\nimport { MatStepper, MatStepperModule } from '@angular/material/stepper';\nimport { RxPush } from '@rx-angular/template/push';\nimport { from, map, Observable, of, startWith, withLatestFrom } from 'rxjs';\n\nimport { WattButtonComponent } from '@energinet/watt/button';\nimport { WattIconComponent } from '@energinet/watt/icon';\n\nimport { WattStepperStepComponent } from './watt-stepper-step.component';\n\n@Component({\n  selector: 'watt-stepper',\n  templateUrl: './watt-stepper.component.html',\n  styleUrls: ['./watt-stepper.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet, RxPush, MatStepperModule, WattIconComponent, WattButtonComponent],\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false },\n    },\n    { provide: CdkStepper, useExisting: WattStepperComponent },\n    { provide: MatStepper, useExisting: WattStepperComponent },\n  ],\n})\nexport class WattStepperComponent extends MatStepper implements AfterViewInit {\n  @Output() completed = new EventEmitter<void>();\n  @Input() isCompleting = false;\n\n  @ContentChildren(WattStepperStepComponent, { descendants: true })\n  declare _steps: QueryList<WattStepperStepComponent>;\n\n  @ViewChild(MatStepper) stepper!: MatStepper;\n\n  selectedIndexChanged$!: Observable<StepperSelectionEvent>;\n  onFirstStep$!: Observable<boolean>;\n  onLastStep$!: Observable<boolean>;\n\n  private destroyRef = inject(DestroyRef);\n\n  override reset() {\n    this.stepper.reset();\n  }\n\n  override ngAfterViewInit(): void {\n    this.selectedIndexChanged$ = from(this.stepper.selectionChange);\n    this.onLastStep$ = this.selectedIndexChanged$.pipe(\n      withLatestFrom(of(this._steps)),\n      map(([index, steps]) => index.selectedIndex === steps.filter((x) => x.enabled()).length - 1),\n      startWith(false)\n    );\n    this.onFirstStep$ = this.selectedIndexChanged$.pipe(\n      map((index) => index.selectedIndex === 0),\n      startWith(true)\n    );\n\n    // Emit entering and leaving events\n    this.selectedIndexChanged$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((change) => {\n      this._steps.get(change.selectedIndex)?.entering.emit(change.selectedStep);\n      this._steps.get(change.previouslySelectedIndex)?.leaving.emit(change.previouslySelectedStep);\n    });\n  }\n\n  nextStep(step: WattStepperStepComponent): void {\n    step.next.emit();\n    this.stepper.selected?.stepControl?.markAllAsTouched();\n    this.stepper.next();\n  }\n\n  previousStep(): void {\n    this.stepper.previous();\n  }\n\n  complete(): void {\n    this.stepper.selected?.stepControl?.markAllAsTouched();\n    this.completed.emit();\n  }\n}\n\nexport const WATT_STEPPER = [WattStepperComponent, WattStepperStepComponent];\n","<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<mat-stepper\n  #stepper\n  [disableRipple]=\"disableRipple\"\n  [linear]=\"true\"\n  animationDuration=\"0\"\n  class=\"watt-stepper\"\n>\n  <ng-template let-index=\"index\" matStepperIcon=\"edit\">\n    {{ index + 1 }}\n  </ng-template>\n  <ng-template matStepperIcon=\"done\">\n    <watt-icon name=\"checkmark\" />\n  </ng-template>\n  <ng-template let-index=\"index\" matStepperIcon=\"number\">\n    @if (\n      stepper.steps.get(index)?.completed &&\n      stepper.steps.get(index)?.interacted &&\n      index !== stepper.selectedIndex\n    ) {\n      <watt-icon name=\"checkmark\" />\n    } @else {\n      {{ index + 1 }}\n    }\n  </ng-template>\n  <ng-template let-index=\"index\" matStepperIcon=\"error\">\n    {{ index + 1 }}\n  </ng-template>\n  @for (step of _steps; track step) {\n    @if (step.enabled()) {\n      <mat-step [editable]=\"step.editable\" [stepControl]=\"step.stepControl\">\n        <ng-template matStepLabel>{{ step.label }}</ng-template>\n        <div class=\"watt-stepper-content-wrapper\">\n          <ng-container *ngTemplateOutlet=\"step.templateRef()\" />\n        </div>\n        <div class=\"watt-stepper-button-wrapper\">\n          @if (!(onFirstStep$ | push)) {\n            <watt-button\n              [disabled]=\"step.disablePreviousButton()\"\n              variant=\"secondary\"\n              (click)=\"previousStep()\"\n            >\n              <watt-icon name=\"left\" />\n              {{ step.previousButtonLabel() }}\n            </watt-button>\n          }\n\n          @if (!(onLastStep$ | push)) {\n            <watt-button\n              variant=\"secondary\"\n              (click)=\"nextStep(step)\"\n              [loading]=\"step.loadingNextButton()\"\n              [disabled]=\"step.disableNextButton()\"\n            >\n              {{ step.nextButtonLabel() }}\n              <watt-icon name=\"right\" />\n            </watt-button>\n          }\n\n          @if (onLastStep$ | push) {\n            <watt-button\n              variant=\"primary\"\n              [loading]=\"isCompleting\"\n              (click)=\"complete()\"\n              [disabled]=\"step.disableNextButton()\"\n              >{{ step.nextButtonLabel() }}\n            </watt-button>\n          }\n        </div>\n      </mat-step>\n    }\n  }\n</mat-stepper>\n"]}