@energinet/watt 1.5.6 → 1.5.8

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

@@ -57,11 +57,15 @@ class WattYearField {
     min = input();
     /** The maximum selectable date. */
     max = input();
+    /** Enable buttons to step through years. */
+    canStepThroughYears = input(false);
     /** Emits when the selected year has changed. */
     yearChange = outputFromObservable(this.valueChanges);
     /** Emits when the field loses focus. */
     // eslint-disable-next-line @angular-eslint/no-output-native
     blur = output();
+    isPrevYearButtonDisabled = computed(() => this.isPrevYearBeforeOrEqualToMinDate());
+    isNextYearButtonDisabled = computed(() => this.isNextYearAfterOrEqualToMaxDate());
     handleFocus = (picker) => {
         this.isOpen.set(true);
         picker.showPopover();
@@ -87,8 +91,54 @@ class WattYearField {
     setDisabledState = (x) => (x ? this.control.disable() : this.control.enable());
     registerOnTouched = (fn) => this.blur.subscribe(fn);
     registerOnChange = (fn) => this.valueChanges.subscribe(fn);
+    /**
+     * @ignore
+     */
+    prevYear(field) {
+        this.changeYear(field, -1);
+    }
+    /**
+     * @ignore
+     */
+    nextYear(field) {
+        this.changeYear(field, 1);
+    }
+    /**
+     * @ignore
+     */
+    changeYear(field, value) {
+        const currentDate = dayjs(field.value, YEAR_FORMAT, true);
+        if (!currentDate.isValid())
+            return;
+        const newDate = currentDate.add(value, 'year');
+        this.handleSelectedChange(field, newDate.toDate());
+    }
+    /**
+     * @ignore
+     */
+    isPrevYearBeforeOrEqualToMinDate() {
+        const min = this.min();
+        if (!min)
+            return false;
+        const selectedDate = dayjs(this.selected());
+        const isBefore = selectedDate.isBefore(min, 'year');
+        const isSame = selectedDate.isSame(min, 'year');
+        return isSame || isBefore;
+    }
+    /**
+     * @ignore
+     */
+    isNextYearAfterOrEqualToMaxDate() {
+        const max = this.max();
+        if (!max)
+            return false;
+        const selectedDate = dayjs(this.selected());
+        const isAfter = selectedDate.isAfter(max, 'year');
+        const isSame = selectedDate.isSame(max, 'year');
+        return isSame || isAfter;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattYearField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattYearField, isStandalone: true, selector: "watt-year-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearChange: "yearChange", blur: "blur" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattYearField, isStandalone: true, selector: "watt-year-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, canStepThroughYears: { classPropertyName: "canStepThroughYears", publicName: "canStepThroughYears", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { yearChange: "yearChange", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WattYearField),
@@ -126,7 +176,24 @@ class WattYearField {
       <ng-content select="watt-field-error" ngProjectAs="watt-field-error" />
       <ng-content select="watt-field-hint" ngProjectAs="watt-field-hint" />
     </watt-field>
-  `, isInline: true, styles: ["watt-year-field{display:block;width:100%}.watt-year-field-picker{position:fixed;position-area:bottom span-right;position-try-fallbacks:flip-block;width:296px;height:354px;inset:unset;margin:unset;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+    @if (canStepThroughYears()) {
+      <span class="watt-year-field__step-through" [class.watt-year-field__has-label]="!!label()">
+        <watt-button
+          variant="icon"
+          icon="left"
+          (click)="prevYear(field)"
+          [disabled]="control.disabled || isPrevYearButtonDisabled()"
+        />
+        <watt-button
+          variant="icon"
+          icon="right"
+          (click)="nextYear(field)"
+          [disabled]="control.disabled || isNextYearButtonDisabled()"
+        />
+      </span>
+    }
+  `, isInline: true, styles: ["watt-year-field{display:block;width:100%}watt-year-field:has(.watt-year-field__step-through){display:flex;flex-align:flex-start}watt-year-field:has(.watt-year-field__step-through) .watt-year-field__step-through{display:flex}watt-year-field:has(.watt-year-field__has-label) .watt-year-field__step-through{margin-top:28px}.watt-year-field-picker{position:fixed;position-area:bottom span-right;position-try-fallbacks:flip-block;width:296px;height:354px;inset:unset;margin:unset;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattYearField, decorators: [{
             type: Component,
@@ -168,7 +235,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
       <ng-content select="watt-field-error" ngProjectAs="watt-field-error" />
       <ng-content select="watt-field-hint" ngProjectAs="watt-field-hint" />
     </watt-field>
-  `, styles: ["watt-year-field{display:block;width:100%}.watt-year-field-picker{position:fixed;position-area:bottom span-right;position-try-fallbacks:flip-block;width:296px;height:354px;inset:unset;margin:unset;border:0}\n"] }]
+
+    @if (canStepThroughYears()) {
+      <span class="watt-year-field__step-through" [class.watt-year-field__has-label]="!!label()">
+        <watt-button
+          variant="icon"
+          icon="left"
+          (click)="prevYear(field)"
+          [disabled]="control.disabled || isPrevYearButtonDisabled()"
+        />
+        <watt-button
+          variant="icon"
+          icon="right"
+          (click)="nextYear(field)"
+          [disabled]="control.disabled || isNextYearButtonDisabled()"
+        />
+      </span>
+    }
+  `, styles: ["watt-year-field{display:block;width:100%}watt-year-field:has(.watt-year-field__step-through){display:flex;flex-align:flex-start}watt-year-field:has(.watt-year-field__step-through) .watt-year-field__step-through{display:flex}watt-year-field:has(.watt-year-field__has-label) .watt-year-field__step-through{margin-top:28px}.watt-year-field-picker{position:fixed;position-area:bottom span-right;position-try-fallbacks:flip-block;width:296px;height:354px;inset:unset;margin:unset;border:0}\n"] }]
         }] });
 
 //#region License

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

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-year-field.mjs","sources":["../../../libs/watt/package/year-field/watt-year-field.component.ts","../../../libs/watt/package/year-field/index.ts","../../../libs/watt/package/year-field/energinet-watt-year-field.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  input,\n  output,\n  signal,\n  computed,\n  Component,\n  forwardRef,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport {\n  FormControl,\n  NG_VALUE_ACCESSOR,\n  ReactiveFormsModule,\n  ControlValueAccessor,\n} from '@angular/forms';\n\nimport { share } from 'rxjs';\nimport { MatCalendar } from '@angular/material/datepicker';\nimport { outputFromObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\n\nimport { dayjs } from '@energinet/watt/core/date';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattButtonComponent } from '@energinet/watt/button';\n\nexport const YEAR_FORMAT = 'YYYY';\n\n/* eslint-disable @angular-eslint/component-class-suffix */\n@Component({\n  selector: 'watt-year-field',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattYearField),\n      multi: true,\n    },\n  ],\n  imports: [ReactiveFormsModule, MatCalendar, WattButtonComponent, WattFieldComponent],\n  styles: [\n    `\n      watt-year-field {\n        display: block;\n        width: 100%;\n      }\n\n      .watt-year-field-picker {\n        position: fixed;\n        position-area: bottom span-right;\n        position-try-fallbacks: flip-block;\n        width: 296px;\n        height: 354px;\n        inset: unset;\n        margin: unset;\n        border: 0;\n      }\n    `,\n  ],\n  template: `\n    <watt-field [label]=\"label()\" [control]=\"control\" [anchorName]=\"anchorName\">\n      <input\n        #field\n        readonly\n        [formControl]=\"control\"\n        (focus)=\"handleFocus(picker)\"\n        (blur)=\"handleBlur(picker, $event)\"\n      />\n      <watt-button icon=\"date\" variant=\"icon\" (click)=\"field.focus()\" />\n      <div\n        #picker\n        class=\"watt-elevation watt-year-field-picker\"\n        popover=\"manual\"\n        tabindex=\"0\"\n        [style.position-anchor]=\"anchorName\"\n      >\n        @if (isOpen()) {\n          <mat-calendar\n            startView=\"multi-year\"\n            [startAt]=\"selected()\"\n            [selected]=\"selected()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            (yearSelected)=\"handleSelectedChange(field, $event)\"\n          />\n        }\n      </div>\n      <ng-content />\n      <ng-content select=\"watt-field-error\" ngProjectAs=\"watt-field-error\" />\n      <ng-content select=\"watt-field-hint\" ngProjectAs=\"watt-field-hint\" />\n    </watt-field>\n  `,\n})\nexport class WattYearField implements ControlValueAccessor {\n  // Popovers exists on an entirely different layer, meaning that for anchor positioning they\n  // look at the entire tree for the anchor name. This gives each field a unique anchor name.\n  private static instance = 0;\n  private instance = WattYearField.instance++;\n  protected anchorName = `--watt-year-field-popover-anchor-${this.instance}`;\n\n  // The format of the inner FormControl is different from that of the outer FormControl\n  protected control = new FormControl('', { nonNullable: true });\n\n  // `registerOnChange` may subscribe to this component after it has been destroyed, thus\n  // triggering an NG0911 from the `takeUntilDestroyed` operator. By sharing the observable,\n  // the observable will already be closed and `subscribe` becomes a proper noop.\n  private valueChanges = this.control.valueChanges.pipe(takeUntilDestroyed(), share());\n  private year = toSignal(this.valueChanges);\n  protected selected = computed(() => {\n    const date = dayjs(this.year(), YEAR_FORMAT, true);\n    if (date.isValid()) return date.toDate();\n    return undefined;\n  });\n\n  // This is used to reset the MatCalendar component by destroying and then recreating it\n  // whenever the picker is opened. There is no methods to do it programatically.\n  protected isOpen = signal(false);\n\n  /** Set the label text for `watt-field`. */\n  label = input('');\n\n  /** The minimum selectable date. */\n  min = input<Date>();\n\n  /** The maximum selectable date. */\n  max = input<Date>();\n\n  /** Emits when the selected year has changed. */\n  yearChange = outputFromObservable(this.valueChanges);\n\n  /** Emits when the field loses focus. */\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  blur = output<FocusEvent>();\n\n  protected handleFocus = (picker: HTMLElement) => {\n    this.isOpen.set(true);\n    picker.showPopover();\n  };\n\n  protected handleBlur = (picker: HTMLElement, event: FocusEvent) => {\n    if (event.relatedTarget instanceof HTMLElement && picker.contains(event.relatedTarget)) {\n      const target = event.target as HTMLInputElement; // safe type assertion\n      setTimeout(() => target.focus()); // keep focus on input element while using the picker\n    } else {\n      picker.hidePopover();\n      this.isOpen.set(false);\n      this.blur.emit(event);\n    }\n  };\n\n  protected handleSelectedChange = (field: HTMLInputElement, date: Date) => {\n    field.value = dayjs(date).format(YEAR_FORMAT);\n    field.dispatchEvent(new Event('input', { bubbles: true }));\n    setTimeout(() => field.blur());\n  };\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: string | null) => this.control.setValue(value ?? '');\n  setDisabledState = (x: boolean) => (x ? this.control.disable() : this.control.enable());\n  registerOnTouched = (fn: () => void) => this.blur.subscribe(fn);\n  registerOnChange = (fn: (value: string | null) => void) => this.valueChanges.subscribe(fn);\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattYearField, YEAR_FORMAT } from './watt-year-field.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"energinet-watt-year-field.mjs","sources":["../../../libs/watt/package/year-field/watt-year-field.component.ts","../../../libs/watt/package/year-field/index.ts","../../../libs/watt/package/year-field/energinet-watt-year-field.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  input,\n  output,\n  signal,\n  computed,\n  Component,\n  forwardRef,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport {\n  FormControl,\n  NG_VALUE_ACCESSOR,\n  ReactiveFormsModule,\n  ControlValueAccessor,\n} from '@angular/forms';\n\nimport { share } from 'rxjs';\nimport { MatCalendar } from '@angular/material/datepicker';\nimport { outputFromObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\n\nimport { dayjs } from '@energinet/watt/core/date';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattButtonComponent } from '@energinet/watt/button';\n\nexport const YEAR_FORMAT = 'YYYY';\n\n/* eslint-disable @angular-eslint/component-class-suffix */\n@Component({\n  selector: 'watt-year-field',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattYearField),\n      multi: true,\n    },\n  ],\n  imports: [ReactiveFormsModule, MatCalendar, WattButtonComponent, WattFieldComponent],\n  styles: [\n    `\n      watt-year-field {\n        display: block;\n        width: 100%;\n\n        &:has(.watt-year-field__step-through) {\n          display: flex;\n          flex-align: flex-start;\n\n          .watt-year-field__step-through {\n            display: flex;\n          }\n        }\n\n        &:has(.watt-year-field__has-label) {\n          .watt-year-field__step-through {\n            margin-top: 28px;\n          }\n        }\n      }\n\n      .watt-year-field-picker {\n        position: fixed;\n        position-area: bottom span-right;\n        position-try-fallbacks: flip-block;\n        width: 296px;\n        height: 354px;\n        inset: unset;\n        margin: unset;\n        border: 0;\n      }\n    `,\n  ],\n  template: `\n    <watt-field [label]=\"label()\" [control]=\"control\" [anchorName]=\"anchorName\">\n      <input\n        #field\n        readonly\n        [formControl]=\"control\"\n        (focus)=\"handleFocus(picker)\"\n        (blur)=\"handleBlur(picker, $event)\"\n      />\n      <watt-button icon=\"date\" variant=\"icon\" (click)=\"field.focus()\" />\n      <div\n        #picker\n        class=\"watt-elevation watt-year-field-picker\"\n        popover=\"manual\"\n        tabindex=\"0\"\n        [style.position-anchor]=\"anchorName\"\n      >\n        @if (isOpen()) {\n          <mat-calendar\n            startView=\"multi-year\"\n            [startAt]=\"selected()\"\n            [selected]=\"selected()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            (yearSelected)=\"handleSelectedChange(field, $event)\"\n          />\n        }\n      </div>\n      <ng-content />\n      <ng-content select=\"watt-field-error\" ngProjectAs=\"watt-field-error\" />\n      <ng-content select=\"watt-field-hint\" ngProjectAs=\"watt-field-hint\" />\n    </watt-field>\n\n    @if (canStepThroughYears()) {\n      <span class=\"watt-year-field__step-through\" [class.watt-year-field__has-label]=\"!!label()\">\n        <watt-button\n          variant=\"icon\"\n          icon=\"left\"\n          (click)=\"prevYear(field)\"\n          [disabled]=\"control.disabled || isPrevYearButtonDisabled()\"\n        />\n        <watt-button\n          variant=\"icon\"\n          icon=\"right\"\n          (click)=\"nextYear(field)\"\n          [disabled]=\"control.disabled || isNextYearButtonDisabled()\"\n        />\n      </span>\n    }\n  `,\n})\nexport class WattYearField implements ControlValueAccessor {\n  // Popovers exists on an entirely different layer, meaning that for anchor positioning they\n  // look at the entire tree for the anchor name. This gives each field a unique anchor name.\n  private static instance = 0;\n  private instance = WattYearField.instance++;\n  protected anchorName = `--watt-year-field-popover-anchor-${this.instance}`;\n\n  // The format of the inner FormControl is different from that of the outer FormControl\n  protected control = new FormControl('', { nonNullable: true });\n\n  // `registerOnChange` may subscribe to this component after it has been destroyed, thus\n  // triggering an NG0911 from the `takeUntilDestroyed` operator. By sharing the observable,\n  // the observable will already be closed and `subscribe` becomes a proper noop.\n  private valueChanges = this.control.valueChanges.pipe(takeUntilDestroyed(), share());\n  private year = toSignal(this.valueChanges);\n  protected selected = computed(() => {\n    const date = dayjs(this.year(), YEAR_FORMAT, true);\n    if (date.isValid()) return date.toDate();\n    return undefined;\n  });\n\n  // This is used to reset the MatCalendar component by destroying and then recreating it\n  // whenever the picker is opened. There is no methods to do it programatically.\n  protected isOpen = signal(false);\n\n  /** Set the label text for `watt-field`. */\n  label = input('');\n\n  /** The minimum selectable date. */\n  min = input<Date>();\n\n  /** The maximum selectable date. */\n  max = input<Date>();\n\n  /** Enable buttons to step through years. */\n  canStepThroughYears = input(false);\n\n  /** Emits when the selected year has changed. */\n  yearChange = outputFromObservable(this.valueChanges);\n\n  /** Emits when the field loses focus. */\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  blur = output<FocusEvent>();\n\n  isPrevYearButtonDisabled = computed(() => this.isPrevYearBeforeOrEqualToMinDate());\n  isNextYearButtonDisabled = computed(() => this.isNextYearAfterOrEqualToMaxDate());\n\n  protected handleFocus = (picker: HTMLElement) => {\n    this.isOpen.set(true);\n    picker.showPopover();\n  };\n\n  protected handleBlur = (picker: HTMLElement, event: FocusEvent) => {\n    if (event.relatedTarget instanceof HTMLElement && picker.contains(event.relatedTarget)) {\n      const target = event.target as HTMLInputElement; // safe type assertion\n      setTimeout(() => target.focus()); // keep focus on input element while using the picker\n    } else {\n      picker.hidePopover();\n      this.isOpen.set(false);\n      this.blur.emit(event);\n    }\n  };\n\n  protected handleSelectedChange = (field: HTMLInputElement, date: Date) => {\n    field.value = dayjs(date).format(YEAR_FORMAT);\n    field.dispatchEvent(new Event('input', { bubbles: true }));\n    setTimeout(() => field.blur());\n  };\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: string | null) => this.control.setValue(value ?? '');\n  setDisabledState = (x: boolean) => (x ? this.control.disable() : this.control.enable());\n  registerOnTouched = (fn: () => void) => this.blur.subscribe(fn);\n  registerOnChange = (fn: (value: string | null) => void) => this.valueChanges.subscribe(fn);\n\n  /**\n   * @ignore\n   */\n  protected prevYear(field: HTMLInputElement): void {\n    this.changeYear(field, -1);\n  }\n  /**\n   * @ignore\n   */\n  protected nextYear(field: HTMLInputElement): void {\n    this.changeYear(field, 1);\n  }\n\n  /**\n   * @ignore\n   */\n  private changeYear(field: HTMLInputElement, value: number): void {\n    const currentDate = dayjs(field.value, YEAR_FORMAT, true);\n\n    if (!currentDate.isValid()) return;\n\n    const newDate = currentDate.add(value, 'year');\n    this.handleSelectedChange(field, newDate.toDate());\n  }\n\n  /**\n   * @ignore\n   */\n  isPrevYearBeforeOrEqualToMinDate(): boolean {\n    const min = this.min();\n\n    if (!min) return false;\n\n    const selectedDate = dayjs(this.selected());\n\n    const isBefore = selectedDate.isBefore(min, 'year');\n    const isSame = selectedDate.isSame(min, 'year');\n\n    return isSame || isBefore;\n  }\n\n  /**\n   * @ignore\n   */\n  isNextYearAfterOrEqualToMaxDate(): boolean {\n    const max = this.max();\n\n    if (!max) return false;\n\n    const selectedDate = dayjs(this.selected());\n\n    const isAfter = selectedDate.isAfter(max, 'year');\n    const isSame = selectedDate.isSame(max, 'year');\n\n    return isSame || isAfter;\n  }\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattYearField, YEAR_FORMAT } from './watt-year-field.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -3,11 +3,11 @@ import { computed, signal, input, output, forwardRef, ChangeDetectionStrategy, V
 import * as i1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { takeUntilDestroyed, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
-import { MatCalendar } from '@angular/material/datepicker';
 import { map, share } from 'rxjs';
+import { MatCalendar } from '@angular/material/datepicker';
+import { dayjs } from '@energinet/watt/core/date';
 import { WattFieldComponent } from '@energinet/watt/field';
 import { WattButtonComponent } from '@energinet/watt/button';
-import { dayjs } from '@energinet/watt/core/date';
 
 //#region License
 /**
@@ -93,11 +93,15 @@ class WattYearMonthField {
     min = input();
     /** The maximum selectable date. */
     max = input();
+    /** Enable buttons to step through months. */
+    canStepThroughMonths = input(false);
     /** Emits when the selected month has changed. */
     monthChange = outputFromObservable(this.valueChanges);
     /** Emits when the field loses focus. */
     // eslint-disable-next-line @angular-eslint/no-output-native
     blur = output();
+    isPrevMonthButtonDisabled = computed(() => this.isPrevMonthBeforeOrEqualToMinDate());
+    isNextMonthButtonDisabled = computed(() => this.isNextMonthAfterOrEqualToMaxDate());
     handleFocus = (picker) => {
         this.isOpen.set(true);
         picker.showPopover();
@@ -123,8 +127,54 @@ class WattYearMonthField {
     setDisabledState = (x) => (x ? this.control.disable() : this.control.enable());
     registerOnTouched = (fn) => this.blur.subscribe(fn);
     registerOnChange = (fn) => this.valueChanges.subscribe(fn);
+    /**
+     * @ignore
+     */
+    prevMonth(field) {
+        this.changeMonth(field, -1);
+    }
+    /**
+     * @ignore
+     */
+    nextMonth(field) {
+        this.changeMonth(field, 1);
+    }
+    /**
+     * @ignore
+     */
+    changeMonth(field, value) {
+        const currentDate = YearMonth.fromView(field.value).toDate();
+        if (!currentDate)
+            return;
+        const newDate = dayjs(currentDate).add(value, 'month');
+        this.handleSelectedChange(field, newDate.toDate());
+    }
+    /**
+     * @ignore
+     */
+    isPrevMonthBeforeOrEqualToMinDate() {
+        const min = this.min();
+        if (!min)
+            return false;
+        const selectedDate = dayjs(this.selected());
+        const isBefore = selectedDate.isBefore(min, 'month');
+        const isSame = selectedDate.isSame(min, 'month');
+        return isSame || isBefore;
+    }
+    /**
+     * @ignore
+     */
+    isNextMonthAfterOrEqualToMaxDate() {
+        const max = this.max();
+        if (!max)
+            return false;
+        const selectedDate = dayjs(this.selected());
+        const isAfter = selectedDate.isAfter(max, 'month');
+        const isSame = selectedDate.isSame(max, 'month');
+        return isSame || isAfter;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattYearMonthField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattYearMonthField, isStandalone: true, selector: "watt-yearmonth-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { monthChange: "monthChange", blur: "blur" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattYearMonthField, isStandalone: true, selector: "watt-yearmonth-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, canStepThroughMonths: { classPropertyName: "canStepThroughMonths", publicName: "canStepThroughMonths", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { monthChange: "monthChange", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WattYearMonthField),
@@ -162,7 +212,27 @@ class WattYearMonthField {
       <ng-content select="watt-field-error" ngProjectAs="watt-field-error" />
       <ng-content select="watt-field-hint" ngProjectAs="watt-field-hint" />
     </watt-field>
-  `, isInline: true, styles: ["watt-yearmonth-field{display:block;width:100%}watt-yearmonth-field input{text-transform:capitalize}.watt-yearmonth-field-picker{position:fixed;position-area:bottom span-right;position-try-fallbacks:flip-block;width:296px;height:354px;inset:unset;margin:unset;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+    @if (canStepThroughMonths()) {
+      <span
+        class="watt-yearmonth-field__step-through"
+        [class.watt-yearmonth-field__has-label]="!!label()"
+      >
+        <watt-button
+          variant="icon"
+          icon="left"
+          (click)="prevMonth(field)"
+          [disabled]="control.disabled || isPrevMonthButtonDisabled()"
+        />
+        <watt-button
+          variant="icon"
+          icon="right"
+          (click)="nextMonth(field)"
+          [disabled]="control.disabled || isNextMonthButtonDisabled()"
+        />
+      </span>
+    }
+  `, isInline: true, styles: ["watt-yearmonth-field{display:block;width:100%}watt-yearmonth-field input{text-transform:capitalize}watt-yearmonth-field:has(.watt-yearmonth-field__step-through){display:flex;flex-align:flex-start}watt-yearmonth-field:has(.watt-yearmonth-field__step-through) .watt-yearmonth-field__step-through{display:flex}watt-yearmonth-field:has(.watt-yearmonth-field__has-label) .watt-yearmonth-field__step-through{margin-top:28px}.watt-yearmonth-field-picker{position:fixed;position-area:bottom span-right;position-try-fallbacks:flip-block;width:296px;height:354px;inset:unset;margin:unset;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattYearMonthField, decorators: [{
             type: Component,
@@ -204,7 +274,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
       <ng-content select="watt-field-error" ngProjectAs="watt-field-error" />
       <ng-content select="watt-field-hint" ngProjectAs="watt-field-hint" />
     </watt-field>
-  `, styles: ["watt-yearmonth-field{display:block;width:100%}watt-yearmonth-field input{text-transform:capitalize}.watt-yearmonth-field-picker{position:fixed;position-area:bottom span-right;position-try-fallbacks:flip-block;width:296px;height:354px;inset:unset;margin:unset;border:0}\n"] }]
+
+    @if (canStepThroughMonths()) {
+      <span
+        class="watt-yearmonth-field__step-through"
+        [class.watt-yearmonth-field__has-label]="!!label()"
+      >
+        <watt-button
+          variant="icon"
+          icon="left"
+          (click)="prevMonth(field)"
+          [disabled]="control.disabled || isPrevMonthButtonDisabled()"
+        />
+        <watt-button
+          variant="icon"
+          icon="right"
+          (click)="nextMonth(field)"
+          [disabled]="control.disabled || isNextMonthButtonDisabled()"
+        />
+      </span>
+    }
+  `, styles: ["watt-yearmonth-field{display:block;width:100%}watt-yearmonth-field input{text-transform:capitalize}watt-yearmonth-field:has(.watt-yearmonth-field__step-through){display:flex;flex-align:flex-start}watt-yearmonth-field:has(.watt-yearmonth-field__step-through) .watt-yearmonth-field__step-through{display:flex}watt-yearmonth-field:has(.watt-yearmonth-field__has-label) .watt-yearmonth-field__step-through{margin-top:28px}.watt-yearmonth-field-picker{position:fixed;position-area:bottom span-right;position-try-fallbacks:flip-block;width:296px;height:354px;inset:unset;margin:unset;border:0}\n"] }]
         }] });
 
 //#region License

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

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-yearmonth-field.mjs","sources":["../../../libs/watt/package/yearmonth-field/year-month.ts","../../../libs/watt/package/yearmonth-field/watt-yearmonth-field.component.ts","../../../libs/watt/package/yearmonth-field/index.ts","../../../libs/watt/package/yearmonth-field/energinet-watt-yearmonth-field.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { dayjs } from '@energinet/watt/core/date';\n\n/** Represents a year and month.  */\nexport class YearMonth {\n  static readonly VIEW_FORMAT = 'MMMM YYYY';\n  static readonly MODEL_FORMAT = 'YYYY-MM';\n\n  private constructor(private date: dayjs.Dayjs | null) {}\n\n  /** Creates a `YearMonth` instance from a `Date` object. */\n  static fromDate = (value: Date) => new YearMonth(dayjs(value));\n\n  /** Creates a `YearMonth` instance from a `string` in the view format. */\n  static fromView = (value: string) =>\n    new YearMonth(value ? dayjs(value, YearMonth.VIEW_FORMAT, true) : null);\n\n  /** Creates a `YearMonth` instance from a `string` in the model format. */\n  static fromModel = (value: string | null | undefined) =>\n    new YearMonth(value ? dayjs(value, YearMonth.MODEL_FORMAT, true) : null);\n\n  /** Converts the `YearMonth` instance to a `Date` object. */\n  toDate = () => this.date?.toDate() ?? null;\n\n  /** Converts the `YearMonth` instance to a `string` in the view format. */\n  toView = () => this.date?.format(YearMonth.VIEW_FORMAT) ?? '';\n\n  /** Converts the `YearMonth` instance to a `string` in the model format. */\n  toModel = () => this.date?.format(YearMonth.MODEL_FORMAT) ?? null;\n}\n\nexport const YEARMONTH_FORMAT = YearMonth.MODEL_FORMAT;\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  NG_VALUE_ACCESSOR,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { outputFromObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { MatCalendar } from '@angular/material/datepicker';\nimport { map, share } from 'rxjs';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattButtonComponent } from '@energinet/watt/button';\nimport { YearMonth } from './year-month';\n\n/* eslint-disable @angular-eslint/component-class-suffix */\n@Component({\n  selector: 'watt-yearmonth-field',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattYearMonthField),\n      multi: true,\n    },\n  ],\n  imports: [ReactiveFormsModule, MatCalendar, WattButtonComponent, WattFieldComponent],\n  styles: [\n    `\n      watt-yearmonth-field {\n        display: block;\n        width: 100%;\n        & input {\n          text-transform: capitalize;\n        }\n      }\n\n      .watt-yearmonth-field-picker {\n        position: fixed;\n        position-area: bottom span-right;\n        position-try-fallbacks: flip-block;\n        width: 296px;\n        height: 354px;\n        inset: unset;\n        margin: unset;\n        border: 0;\n      }\n    `,\n  ],\n  template: `\n    <watt-field [label]=\"label()\" [control]=\"control\" [anchorName]=\"anchorName\">\n      <input\n        #field\n        readonly\n        [formControl]=\"control\"\n        (focus)=\"handleFocus(picker)\"\n        (blur)=\"handleBlur(picker, $event)\"\n      />\n      <watt-button icon=\"date\" variant=\"icon\" (click)=\"field.focus()\" />\n      <div\n        #picker\n        class=\"watt-elevation watt-yearmonth-field-picker\"\n        popover=\"manual\"\n        tabindex=\"0\"\n        [style.position-anchor]=\"anchorName\"\n      >\n        @if (isOpen()) {\n          <mat-calendar\n            startView=\"multi-year\"\n            [startAt]=\"selected()\"\n            [selected]=\"selected()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            (monthSelected)=\"handleSelectedChange(field, $event)\"\n          />\n        }\n      </div>\n      <ng-content />\n      <ng-content select=\"watt-field-error\" ngProjectAs=\"watt-field-error\" />\n      <ng-content select=\"watt-field-hint\" ngProjectAs=\"watt-field-hint\" />\n    </watt-field>\n  `,\n})\nexport class WattYearMonthField implements ControlValueAccessor {\n  // Popovers exists on an entirely different layer, meaning that for anchor positioning they\n  // look at the entire tree for the anchor name. This gives each field a unique anchor name.\n  private static instance = 0;\n  private instance = WattYearMonthField.instance++;\n  protected anchorName = `--watt-yearmonth-field-popover-anchor-${this.instance}`;\n\n  // The format of the inner FormControl is different from that of the outer FormControl\n  protected control = new FormControl('', { nonNullable: true });\n\n  // `registerOnChange` may subscribe to this component after it has been destroyed, thus\n  // triggering an NG0911 from the `takeUntilDestroyed` operator. By sharing the observable,\n  // the observable will already be closed and `subscribe` becomes a proper noop.\n  private yearMonthChanges = this.control.valueChanges.pipe(map(YearMonth.fromView));\n  private valueChanges = this.yearMonthChanges.pipe(\n    map((yearMonth) => yearMonth.toModel()),\n    takeUntilDestroyed(),\n    share()\n  );\n\n  private yearMonth = toSignal(this.yearMonthChanges);\n  protected selected = computed(() => this.yearMonth()?.toDate());\n\n  // This is used to reset the MatCalendar component by destroying and then recreating it\n  // whenever the picker is opened. There is no methods to do it programatically.\n  protected isOpen = signal(false);\n\n  /** Set the label text for `watt-field`. */\n  label = input('');\n\n  /** The minimum selectable date. */\n  min = input<Date>();\n\n  /** The maximum selectable date. */\n  max = input<Date>();\n\n  /** Emits when the selected month has changed. */\n  monthChange = outputFromObservable(this.valueChanges);\n\n  /** Emits when the field loses focus. */\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  blur = output<FocusEvent>();\n\n  protected handleFocus = (picker: HTMLElement) => {\n    this.isOpen.set(true);\n    picker.showPopover();\n  };\n\n  protected handleBlur = (picker: HTMLElement, event: FocusEvent) => {\n    if (event.relatedTarget instanceof HTMLElement && picker.contains(event.relatedTarget)) {\n      const target = event.target as HTMLInputElement; // safe type assertion\n      setTimeout(() => target.focus()); // keep focus on input element while using the picker\n    } else {\n      picker.hidePopover();\n      this.isOpen.set(false);\n      this.blur.emit(event);\n    }\n  };\n\n  protected handleSelectedChange = (field: HTMLInputElement, date: Date) => {\n    field.value = YearMonth.fromDate(date).toView();\n    field.dispatchEvent(new Event('input', { bubbles: true }));\n    setTimeout(() => field.blur());\n  };\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: string | null) => this.control.setValue(YearMonth.fromModel(value).toView());\n  setDisabledState = (x: boolean) => (x ? this.control.disable() : this.control.enable());\n  registerOnTouched = (fn: () => void) => this.blur.subscribe(fn);\n  registerOnChange = (fn: (value: string | null) => void) => this.valueChanges.subscribe(fn);\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattYearMonthField } from './watt-yearmonth-field.component';\nexport { YEARMONTH_FORMAT } from './year-month';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"energinet-watt-yearmonth-field.mjs","sources":["../../../libs/watt/package/yearmonth-field/year-month.ts","../../../libs/watt/package/yearmonth-field/watt-yearmonth-field.component.ts","../../../libs/watt/package/yearmonth-field/index.ts","../../../libs/watt/package/yearmonth-field/energinet-watt-yearmonth-field.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { dayjs } from '@energinet/watt/core/date';\n\n/** Represents a year and month.  */\nexport class YearMonth {\n  static readonly VIEW_FORMAT = 'MMMM YYYY';\n  static readonly MODEL_FORMAT = 'YYYY-MM';\n\n  private constructor(private date: dayjs.Dayjs | null) {}\n\n  /** Creates a `YearMonth` instance from a `Date` object. */\n  static fromDate = (value: Date) => new YearMonth(dayjs(value));\n\n  /** Creates a `YearMonth` instance from a `string` in the view format. */\n  static fromView = (value: string) =>\n    new YearMonth(value ? dayjs(value, YearMonth.VIEW_FORMAT, true) : null);\n\n  /** Creates a `YearMonth` instance from a `string` in the model format. */\n  static fromModel = (value: string | null | undefined) =>\n    new YearMonth(value ? dayjs(value, YearMonth.MODEL_FORMAT, true) : null);\n\n  /** Converts the `YearMonth` instance to a `Date` object. */\n  toDate = () => this.date?.toDate() ?? null;\n\n  /** Converts the `YearMonth` instance to a `string` in the view format. */\n  toView = () => this.date?.format(YearMonth.VIEW_FORMAT) ?? '';\n\n  /** Converts the `YearMonth` instance to a `string` in the model format. */\n  toModel = () => this.date?.format(YearMonth.MODEL_FORMAT) ?? null;\n}\n\nexport const YEARMONTH_FORMAT = YearMonth.MODEL_FORMAT;\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormControl,\n  NG_VALUE_ACCESSOR,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { outputFromObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { map, share } from 'rxjs';\nimport { MatCalendar } from '@angular/material/datepicker';\n\nimport { dayjs } from '@energinet/watt/core/date';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattButtonComponent } from '@energinet/watt/button';\n\nimport { YearMonth } from './year-month';\n\n/* eslint-disable @angular-eslint/component-class-suffix */\n@Component({\n  selector: 'watt-yearmonth-field',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattYearMonthField),\n      multi: true,\n    },\n  ],\n  imports: [ReactiveFormsModule, MatCalendar, WattButtonComponent, WattFieldComponent],\n  styles: [\n    `\n      watt-yearmonth-field {\n        display: block;\n        width: 100%;\n\n        & input {\n          text-transform: capitalize;\n        }\n\n        &:has(.watt-yearmonth-field__step-through) {\n          display: flex;\n          flex-align: flex-start;\n\n          .watt-yearmonth-field__step-through {\n            display: flex;\n          }\n        }\n\n        &:has(.watt-yearmonth-field__has-label) {\n          .watt-yearmonth-field__step-through {\n            margin-top: 28px;\n          }\n        }\n      }\n\n      .watt-yearmonth-field-picker {\n        position: fixed;\n        position-area: bottom span-right;\n        position-try-fallbacks: flip-block;\n        width: 296px;\n        height: 354px;\n        inset: unset;\n        margin: unset;\n        border: 0;\n      }\n    `,\n  ],\n  template: `\n    <watt-field [label]=\"label()\" [control]=\"control\" [anchorName]=\"anchorName\">\n      <input\n        #field\n        readonly\n        [formControl]=\"control\"\n        (focus)=\"handleFocus(picker)\"\n        (blur)=\"handleBlur(picker, $event)\"\n      />\n      <watt-button icon=\"date\" variant=\"icon\" (click)=\"field.focus()\" />\n      <div\n        #picker\n        class=\"watt-elevation watt-yearmonth-field-picker\"\n        popover=\"manual\"\n        tabindex=\"0\"\n        [style.position-anchor]=\"anchorName\"\n      >\n        @if (isOpen()) {\n          <mat-calendar\n            startView=\"multi-year\"\n            [startAt]=\"selected()\"\n            [selected]=\"selected()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            (monthSelected)=\"handleSelectedChange(field, $event)\"\n          />\n        }\n      </div>\n      <ng-content />\n      <ng-content select=\"watt-field-error\" ngProjectAs=\"watt-field-error\" />\n      <ng-content select=\"watt-field-hint\" ngProjectAs=\"watt-field-hint\" />\n    </watt-field>\n\n    @if (canStepThroughMonths()) {\n      <span\n        class=\"watt-yearmonth-field__step-through\"\n        [class.watt-yearmonth-field__has-label]=\"!!label()\"\n      >\n        <watt-button\n          variant=\"icon\"\n          icon=\"left\"\n          (click)=\"prevMonth(field)\"\n          [disabled]=\"control.disabled || isPrevMonthButtonDisabled()\"\n        />\n        <watt-button\n          variant=\"icon\"\n          icon=\"right\"\n          (click)=\"nextMonth(field)\"\n          [disabled]=\"control.disabled || isNextMonthButtonDisabled()\"\n        />\n      </span>\n    }\n  `,\n})\nexport class WattYearMonthField implements ControlValueAccessor {\n  // Popovers exists on an entirely different layer, meaning that for anchor positioning they\n  // look at the entire tree for the anchor name. This gives each field a unique anchor name.\n  private static instance = 0;\n  private instance = WattYearMonthField.instance++;\n  protected anchorName = `--watt-yearmonth-field-popover-anchor-${this.instance}`;\n\n  // The format of the inner FormControl is different from that of the outer FormControl\n  protected control = new FormControl('', { nonNullable: true });\n\n  // `registerOnChange` may subscribe to this component after it has been destroyed, thus\n  // triggering an NG0911 from the `takeUntilDestroyed` operator. By sharing the observable,\n  // the observable will already be closed and `subscribe` becomes a proper noop.\n  private yearMonthChanges = this.control.valueChanges.pipe(map(YearMonth.fromView));\n  private valueChanges = this.yearMonthChanges.pipe(\n    map((yearMonth) => yearMonth.toModel()),\n    takeUntilDestroyed(),\n    share()\n  );\n\n  private yearMonth = toSignal(this.yearMonthChanges);\n  protected selected = computed(() => this.yearMonth()?.toDate());\n\n  // This is used to reset the MatCalendar component by destroying and then recreating it\n  // whenever the picker is opened. There is no methods to do it programatically.\n  protected isOpen = signal(false);\n\n  /** Set the label text for `watt-field`. */\n  label = input('');\n\n  /** The minimum selectable date. */\n  min = input<Date>();\n\n  /** The maximum selectable date. */\n  max = input<Date>();\n\n  /** Enable buttons to step through months. */\n  canStepThroughMonths = input(false);\n\n  /** Emits when the selected month has changed. */\n  monthChange = outputFromObservable(this.valueChanges);\n\n  /** Emits when the field loses focus. */\n  // eslint-disable-next-line @angular-eslint/no-output-native\n  blur = output<FocusEvent>();\n\n  isPrevMonthButtonDisabled = computed(() => this.isPrevMonthBeforeOrEqualToMinDate());\n  isNextMonthButtonDisabled = computed(() => this.isNextMonthAfterOrEqualToMaxDate());\n\n  protected handleFocus = (picker: HTMLElement) => {\n    this.isOpen.set(true);\n    picker.showPopover();\n  };\n\n  protected handleBlur = (picker: HTMLElement, event: FocusEvent) => {\n    if (event.relatedTarget instanceof HTMLElement && picker.contains(event.relatedTarget)) {\n      const target = event.target as HTMLInputElement; // safe type assertion\n      setTimeout(() => target.focus()); // keep focus on input element while using the picker\n    } else {\n      picker.hidePopover();\n      this.isOpen.set(false);\n      this.blur.emit(event);\n    }\n  };\n\n  protected handleSelectedChange = (field: HTMLInputElement, date: Date) => {\n    field.value = YearMonth.fromDate(date).toView();\n    field.dispatchEvent(new Event('input', { bubbles: true }));\n    setTimeout(() => field.blur());\n  };\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: string | null) => this.control.setValue(YearMonth.fromModel(value).toView());\n  setDisabledState = (x: boolean) => (x ? this.control.disable() : this.control.enable());\n  registerOnTouched = (fn: () => void) => this.blur.subscribe(fn);\n  registerOnChange = (fn: (value: string | null) => void) => this.valueChanges.subscribe(fn);\n\n  /**\n   * @ignore\n   */\n  protected prevMonth(field: HTMLInputElement): void {\n    this.changeMonth(field, -1);\n  }\n  /**\n   * @ignore\n   */\n  protected nextMonth(field: HTMLInputElement): void {\n    this.changeMonth(field, 1);\n  }\n\n  /**\n   * @ignore\n   */\n  private changeMonth(field: HTMLInputElement, value: number): void {\n    const currentDate = YearMonth.fromView(field.value).toDate();\n\n    if (!currentDate) return;\n\n    const newDate = dayjs(currentDate).add(value, 'month');\n    this.handleSelectedChange(field, newDate.toDate());\n  }\n\n  /**\n   * @ignore\n   */\n  isPrevMonthBeforeOrEqualToMinDate(): boolean {\n    const min = this.min();\n\n    if (!min) return false;\n\n    const selectedDate = dayjs(this.selected());\n\n    const isBefore = selectedDate.isBefore(min, 'month');\n    const isSame = selectedDate.isSame(min, 'month');\n\n    return isSame || isBefore;\n  }\n\n  /**\n   * @ignore\n   */\n  isNextMonthAfterOrEqualToMaxDate(): boolean {\n    const max = this.max();\n\n    if (!max) return false;\n\n    const selectedDate = dayjs(this.selected());\n\n    const isAfter = selectedDate.isAfter(max, 'month');\n    const isSame = selectedDate.isSame(max, 'month');\n\n    return isSame || isAfter;\n  }\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattYearMonthField } from './watt-yearmonth-field.component';\nexport { YEARMONTH_FORMAT } from './year-month';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

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

package/year-field/watt-year-field.component.d.ts

@@ -16,10 +16,14 @@ export declare class WattYearField implements ControlValueAccessor {
     min: import("@angular/core").InputSignal<Date | undefined>;
     /** The maximum selectable date. */
     max: import("@angular/core").InputSignal<Date | undefined>;
+    /** Enable buttons to step through years. */
+    canStepThroughYears: import("@angular/core").InputSignal<boolean>;
     /** Emits when the selected year has changed. */
     yearChange: import("@angular/core").OutputRef<string>;
     /** Emits when the field loses focus. */
     blur: import("@angular/core").OutputEmitterRef<FocusEvent>;
+    isPrevYearButtonDisabled: import("@angular/core").Signal<boolean>;
+    isNextYearButtonDisabled: import("@angular/core").Signal<boolean>;
     protected handleFocus: (picker: HTMLElement) => void;
     protected handleBlur: (picker: HTMLElement, event: FocusEvent) => void;
     protected handleSelectedChange: (field: HTMLInputElement, date: Date) => void;
@@ -27,6 +31,26 @@ export declare class WattYearField implements ControlValueAccessor {
     setDisabledState: (x: boolean) => void;
     registerOnTouched: (fn: () => void) => import("@angular/core").OutputRefSubscription;
     registerOnChange: (fn: (value: string | null) => void) => import("rxjs").Subscription;
+    /**
+     * @ignore
+     */
+    protected prevYear(field: HTMLInputElement): void;
+    /**
+     * @ignore
+     */
+    protected nextYear(field: HTMLInputElement): void;
+    /**
+     * @ignore
+     */
+    private changeYear;
+    /**
+     * @ignore
+     */
+    isPrevYearBeforeOrEqualToMinDate(): boolean;
+    /**
+     * @ignore
+     */
+    isNextYearAfterOrEqualToMaxDate(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<WattYearField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WattYearField, "watt-year-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, { "yearChange": "yearChange"; "blur": "blur"; }, never, ["*", "watt-field-error", "watt-field-hint"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WattYearField, "watt-year-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "canStepThroughYears": { "alias": "canStepThroughYears"; "required": false; "isSignal": true; }; }, { "yearChange": "yearChange"; "blur": "blur"; }, never, ["*", "watt-field-error", "watt-field-hint"], true, never>;
 }

package/yearmonth-field/watt-yearmonth-field.component.d.ts

@@ -16,10 +16,14 @@ export declare class WattYearMonthField implements ControlValueAccessor {
     min: import("@angular/core").InputSignal<Date | undefined>;
     /** The maximum selectable date. */
     max: import("@angular/core").InputSignal<Date | undefined>;
+    /** Enable buttons to step through months. */
+    canStepThroughMonths: import("@angular/core").InputSignal<boolean>;
     /** Emits when the selected month has changed. */
     monthChange: import("@angular/core").OutputRef<string | null>;
     /** Emits when the field loses focus. */
     blur: import("@angular/core").OutputEmitterRef<FocusEvent>;
+    isPrevMonthButtonDisabled: import("@angular/core").Signal<boolean>;
+    isNextMonthButtonDisabled: import("@angular/core").Signal<boolean>;
     protected handleFocus: (picker: HTMLElement) => void;
     protected handleBlur: (picker: HTMLElement, event: FocusEvent) => void;
     protected handleSelectedChange: (field: HTMLInputElement, date: Date) => void;
@@ -27,6 +31,26 @@ export declare class WattYearMonthField implements ControlValueAccessor {
     setDisabledState: (x: boolean) => void;
     registerOnTouched: (fn: () => void) => import("@angular/core").OutputRefSubscription;
     registerOnChange: (fn: (value: string | null) => void) => import("rxjs").Subscription;
+    /**
+     * @ignore
+     */
+    protected prevMonth(field: HTMLInputElement): void;
+    /**
+     * @ignore
+     */
+    protected nextMonth(field: HTMLInputElement): void;
+    /**
+     * @ignore
+     */
+    private changeMonth;
+    /**
+     * @ignore
+     */
+    isPrevMonthBeforeOrEqualToMinDate(): boolean;
+    /**
+     * @ignore
+     */
+    isNextMonthAfterOrEqualToMaxDate(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<WattYearMonthField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WattYearMonthField, "watt-yearmonth-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, { "monthChange": "monthChange"; "blur": "blur"; }, never, ["*", "watt-field-error", "watt-field-hint"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WattYearMonthField, "watt-yearmonth-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "canStepThroughMonths": { "alias": "canStepThroughMonths"; "required": false; "isSignal": true; }; }, { "monthChange": "monthChange"; "blur": "blur"; }, never, ["*", "watt-field-error", "watt-field-hint"], true, never>;
 }