@energinet/watt 1.2.4 → 1.5.0

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

@@ -0,0 +1,234 @@
+import * as i0 from '@angular/core';
+import { computed, signal, input, output, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+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 { WattFieldComponent } from '@energinet/watt/field';
+import { WattButtonComponent } from '@energinet/watt/button';
+import { dayjs } from '@energinet/watt/core/date';
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+/** Represents a year and month.  */
+class YearMonth {
+    date;
+    static VIEW_FORMAT = 'MMMM YYYY';
+    static MODEL_FORMAT = 'YYYY-MM';
+    constructor(date) {
+        this.date = date;
+    }
+    /** Creates a `YearMonth` instance from a `Date` object. */
+    static fromDate = (value) => new YearMonth(dayjs(value));
+    /** Creates a `YearMonth` instance from a `string` in the view format. */
+    static fromView = (value) => new YearMonth(value ? dayjs(value, YearMonth.VIEW_FORMAT, true) : null);
+    /** Creates a `YearMonth` instance from a `string` in the model format. */
+    static fromModel = (value) => new YearMonth(value ? dayjs(value, YearMonth.MODEL_FORMAT, true) : null);
+    /** Converts the `YearMonth` instance to a `Date` object. */
+    toDate = () => this.date?.toDate() ?? null;
+    /** Converts the `YearMonth` instance to a `string` in the view format. */
+    toView = () => this.date?.format(YearMonth.VIEW_FORMAT) ?? '';
+    /** Converts the `YearMonth` instance to a `string` in the model format. */
+    toModel = () => this.date?.format(YearMonth.MODEL_FORMAT) ?? null;
+}
+const YEARMONTH_FORMAT = YearMonth.MODEL_FORMAT;
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+/* eslint-disable @angular-eslint/component-class-suffix */
+class WattYearMonthField {
+    // Popovers exists on an entirely different layer, meaning that for anchor positioning they
+    // look at the entire tree for the anchor name. This gives each field a unique anchor name.
+    static instance = 0;
+    instance = WattYearMonthField.instance++;
+    anchorName = `--watt-yearmonth-field-popover-anchor-${this.instance}`;
+    // The format of the inner FormControl is different from that of the outer FormControl
+    control = new FormControl('', { nonNullable: true });
+    // `registerOnChange` may subscribe to this component after it has been destroyed, thus
+    // triggering an NG0911 from the `takeUntilDestroyed` operator. By sharing the observable,
+    // the observable will already be closed and `subscribe` becomes a proper noop.
+    yearMonthChanges = this.control.valueChanges.pipe(map(YearMonth.fromView));
+    valueChanges = this.yearMonthChanges.pipe(map((yearMonth) => yearMonth.toModel()), takeUntilDestroyed(), share());
+    yearMonth = toSignal(this.yearMonthChanges);
+    selected = computed(() => this.yearMonth()?.toDate());
+    // This is used to reset the MatCalendar component by destroying and then recreating it
+    // whenever the picker is opened. There is no methods to do it programatically.
+    isOpen = signal(false);
+    /** Set the label text for `watt-field`. */
+    label = input('');
+    /** The minimum selectable date. */
+    min = input();
+    /** The maximum selectable date. */
+    max = input();
+    /** 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();
+    handleFocus = (picker) => {
+        this.isOpen.set(true);
+        picker.showPopover();
+    };
+    handleBlur = (picker, event) => {
+        if (event.relatedTarget instanceof HTMLElement && picker.contains(event.relatedTarget)) {
+            const target = event.target; // safe type assertion
+            setTimeout(() => target.focus()); // keep focus on input element while using the picker
+        }
+        else {
+            picker.hidePopover();
+            this.isOpen.set(false);
+            this.blur.emit(event);
+        }
+    };
+    handleSelectedChange = (field, date) => {
+        field.value = YearMonth.fromDate(date).toView();
+        field.dispatchEvent(new Event('input', { bubbles: true }));
+        field.blur();
+    };
+    // Implementation for ControlValueAccessor
+    writeValue = (value) => this.control.setValue(YearMonth.fromModel(value).toView());
+    setDisabledState = (x) => (x ? this.control.disable() : this.control.enable());
+    registerOnTouched = (fn) => this.blur.subscribe(fn);
+    registerOnChange = (fn) => this.valueChanges.subscribe(fn);
+    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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WattYearMonthField),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <watt-field [label]="label()" [control]="control" [anchorName]="anchorName">
+      <input
+        #field
+        readonly
+        [formControl]="control"
+        (focus)="handleFocus(picker)"
+        (blur)="handleBlur(picker, $event)"
+      />
+      <watt-button icon="date" variant="icon" (click)="field.focus()" />
+      <div
+        #picker
+        class="watt-elevation watt-yearmonth-field-picker"
+        popover="manual"
+        tabindex="0"
+        [style.position-anchor]="anchorName"
+      >
+        @if (isOpen()) {
+          <mat-calendar
+            startView="multi-year"
+            [startAt]="selected()"
+            [selected]="selected()"
+            [minDate]="min()"
+            [maxDate]="max()"
+            (monthSelected)="handleSelectedChange(field, $event)"
+          />
+        }
+      </div>
+      <ng-content />
+      <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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattYearMonthField, decorators: [{
+            type: Component,
+            args: [{ selector: 'watt-yearmonth-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WattYearMonthField),
+                            multi: true,
+                        },
+                    ], imports: [ReactiveFormsModule, MatCalendar, WattButtonComponent, WattFieldComponent], template: `
+    <watt-field [label]="label()" [control]="control" [anchorName]="anchorName">
+      <input
+        #field
+        readonly
+        [formControl]="control"
+        (focus)="handleFocus(picker)"
+        (blur)="handleBlur(picker, $event)"
+      />
+      <watt-button icon="date" variant="icon" (click)="field.focus()" />
+      <div
+        #picker
+        class="watt-elevation watt-yearmonth-field-picker"
+        popover="manual"
+        tabindex="0"
+        [style.position-anchor]="anchorName"
+      >
+        @if (isOpen()) {
+          <mat-calendar
+            startView="multi-year"
+            [startAt]="selected()"
+            [selected]="selected()"
+            [minDate]="min()"
+            [maxDate]="max()"
+            (monthSelected)="handleSelectedChange(field, $event)"
+          />
+        }
+      </div>
+      <ng-content />
+      <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"] }]
+        }] });
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WattYearMonthField, YEARMONTH_FORMAT };
+//# sourceMappingURL=energinet-watt-yearmonth-field.mjs.map

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

@@ -0,0 +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    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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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@energinet/watt",
-  "version": "1.2.4",
+  "version": "1.5.0",
   "license": "Apache-2.0",
   "exports": {
     ".": {
@@ -115,6 +115,10 @@
       "types": "./search/index.d.ts",
       "default": "./fesm2022/energinet-watt-search.mjs"
     },
+    "./segmented-buttons": {
+      "types": "./segmented-buttons/index.d.ts",
+      "default": "./fesm2022/energinet-watt-segmented-buttons.mjs"
+    },
     "./shell": {
       "types": "./shell/index.d.ts",
       "default": "./fesm2022/energinet-watt-shell.mjs"
@@ -171,6 +175,14 @@
       "types": "./vater/index.d.ts",
       "default": "./fesm2022/energinet-watt-vater.mjs"
     },
+    "./year-field": {
+      "types": "./year-field/index.d.ts",
+      "default": "./fesm2022/energinet-watt-year-field.mjs"
+    },
+    "./yearmonth-field": {
+      "types": "./yearmonth-field/index.d.ts",
+      "default": "./fesm2022/energinet-watt-yearmonth-field.mjs"
+    },
     "./core/breakpoints": {
       "types": "./core/breakpoints/index.d.ts",
       "default": "./fesm2022/energinet-watt-core-breakpoints.mjs"

package/segmented-buttons/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { WattSegmentedButtonsComponent } from './watt-segmented-buttons.component';
+export { WattSegmentedButtonComponent } from './watt-segmented-button.component';

package/segmented-buttons/watt-segmented-button.component.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class WattSegmentedButtonComponent {
+    templateRef: import("@angular/core").Signal<TemplateRef<unknown>>;
+    value: import("@angular/core").InputSignal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattSegmentedButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WattSegmentedButtonComponent, "watt-segmented-button", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/segmented-buttons/watt-segmented-buttons.component.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ControlValueAccessor } from '@angular/forms';
+import { WattSegmentedButtonComponent } from './watt-segmented-button.component';
+import * as i0 from "@angular/core";
+/**
+ * Segmented buttons.
+ */
+export declare class WattSegmentedButtonsComponent implements ControlValueAccessor {
+    segmentedButtonElements: import("@angular/core").Signal<readonly WattSegmentedButtonComponent[]>;
+    selected: import("@angular/core").ModelSignal<string>;
+    disabled: import("@angular/core").WritableSignal<boolean>;
+    private element;
+    writeValue(selected: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: (value: boolean) => void): void;
+    setDisabledState?(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattSegmentedButtonsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WattSegmentedButtonsComponent, "watt-segmented-buttons", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["segmentedButtonElements"], never, true, never>;
+}

package/table/watt-table.component.d.ts

@@ -153,6 +153,10 @@ export declare class WattTableComponent<T> implements OnChanges, AfterViewInit {
      * when there is no data.
      */
     loading: boolean;
+    /**
+     * If true the footer will be sticky
+     */
+    stickyFooter: boolean;
     /**
      * Optional callback for determining header text for columns that
      * do not have a static header text set in the column definition.
@@ -262,7 +266,7 @@ export declare class WattTableComponent<T> implements OnChanges, AfterViewInit {
     /** @ignore */
     _onRowClick(row: T): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<WattTableComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WattTableComponent<any>, "watt-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "description": { "alias": "description"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "resolveHeader": { "alias": "resolveHeader"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "sortClear": { "alias": "sortClear"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "initialSelection": { "alias": "initialSelection"; "required": false; "isSignal": true; }; "suppressRowHoverHighlight": { "alias": "suppressRowHoverHighlight"; "required": false; }; "activeRow": { "alias": "activeRow"; "required": false; }; "activeRowComparator": { "alias": "activeRowComparator"; "required": false; }; "hideColumnHeaders": { "alias": "hideColumnHeaders"; "required": false; }; }, { "selectionChange": "selectionChange"; "rowClick": "rowClick"; "sortChange": "sortChange"; }, ["_toolbar", "_cells"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WattTableComponent<any>, "watt-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "description": { "alias": "description"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "stickyFooter": { "alias": "stickyFooter"; "required": false; }; "resolveHeader": { "alias": "resolveHeader"; "required": false; }; "sortBy": { "alias": "sortBy"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "sortClear": { "alias": "sortClear"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "initialSelection": { "alias": "initialSelection"; "required": false; "isSignal": true; }; "suppressRowHoverHighlight": { "alias": "suppressRowHoverHighlight"; "required": false; }; "activeRow": { "alias": "activeRow"; "required": false; }; "activeRowComparator": { "alias": "activeRowComparator"; "required": false; }; "hideColumnHeaders": { "alias": "hideColumnHeaders"; "required": false; }; }, { "selectionChange": "selectionChange"; "rowClick": "rowClick"; "sortChange": "sortChange"; }, ["_toolbar", "_cells"], never, true, never>;
 }
 export declare class WattTableToolbarSpacerComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<WattTableToolbarSpacerComponent, never>;

package/year-field/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { WattYearField, YEAR_FORMAT } from './watt-year-field.component';

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

@@ -0,0 +1,32 @@
+import { FormControl, ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare const YEAR_FORMAT = "YYYY";
+export declare class WattYearField implements ControlValueAccessor {
+    private static instance;
+    private instance;
+    protected anchorName: string;
+    protected control: FormControl<string>;
+    private valueChanges;
+    private year;
+    protected selected: import("@angular/core").Signal<Date | undefined>;
+    protected isOpen: import("@angular/core").WritableSignal<boolean>;
+    /** Set the label text for `watt-field`. */
+    label: import("@angular/core").InputSignal<string>;
+    /** The minimum selectable date. */
+    min: import("@angular/core").InputSignal<Date | undefined>;
+    /** The maximum selectable date. */
+    max: import("@angular/core").InputSignal<Date | undefined>;
+    /** 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>;
+    protected handleFocus: (picker: HTMLElement) => void;
+    protected handleBlur: (picker: HTMLElement, event: FocusEvent) => void;
+    protected handleSelectedChange: (field: HTMLInputElement, date: Date) => void;
+    writeValue: (value: string | null) => void;
+    setDisabledState: (x: boolean) => void;
+    registerOnTouched: (fn: () => void) => import("@angular/core").OutputRefSubscription;
+    registerOnChange: (fn: (value: string | null) => void) => import("rxjs").Subscription;
+    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>;
+}

package/yearmonth-field/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { WattYearMonthField } from './watt-yearmonth-field.component';
+export { YEARMONTH_FORMAT } from './year-month';

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

@@ -0,0 +1,32 @@
+import { ControlValueAccessor, FormControl } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class WattYearMonthField implements ControlValueAccessor {
+    private static instance;
+    private instance;
+    protected anchorName: string;
+    protected control: FormControl<string>;
+    private yearMonthChanges;
+    private valueChanges;
+    private yearMonth;
+    protected selected: import("@angular/core").Signal<Date | null | undefined>;
+    protected isOpen: import("@angular/core").WritableSignal<boolean>;
+    /** Set the label text for `watt-field`. */
+    label: import("@angular/core").InputSignal<string>;
+    /** The minimum selectable date. */
+    min: import("@angular/core").InputSignal<Date | undefined>;
+    /** The maximum selectable date. */
+    max: import("@angular/core").InputSignal<Date | undefined>;
+    /** 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>;
+    protected handleFocus: (picker: HTMLElement) => void;
+    protected handleBlur: (picker: HTMLElement, event: FocusEvent) => void;
+    protected handleSelectedChange: (field: HTMLInputElement, date: Date) => void;
+    writeValue: (value: string | null) => void;
+    setDisabledState: (x: boolean) => void;
+    registerOnTouched: (fn: () => void) => import("@angular/core").OutputRefSubscription;
+    registerOnChange: (fn: (value: string | null) => void) => import("rxjs").Subscription;
+    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>;
+}

package/yearmonth-field/year-month.d.ts

@@ -0,0 +1,20 @@
+/** Represents a year and month.  */
+export declare class YearMonth {
+    private date;
+    static readonly VIEW_FORMAT = "MMMM YYYY";
+    static readonly MODEL_FORMAT = "YYYY-MM";
+    private constructor();
+    /** Creates a `YearMonth` instance from a `Date` object. */
+    static fromDate: (value: Date) => YearMonth;
+    /** Creates a `YearMonth` instance from a `string` in the view format. */
+    static fromView: (value: string) => YearMonth;
+    /** Creates a `YearMonth` instance from a `string` in the model format. */
+    static fromModel: (value: string | null | undefined) => YearMonth;
+    /** Converts the `YearMonth` instance to a `Date` object. */
+    toDate: () => Date | null;
+    /** Converts the `YearMonth` instance to a `string` in the view format. */
+    toView: () => string;
+    /** Converts the `YearMonth` instance to a `string` in the model format. */
+    toModel: () => string | null;
+}
+export declare const YEARMONTH_FORMAT = "YYYY-MM";