@energinet/watt 4.3.19 → 4.3.21

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  booleanAttribute,\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, MatCalendarView } 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]=\"startView()\"\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-warning\" ngProjectAs=\"watt-field-warning\" />\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  /** Whether the calendar should be started in month or year view. */\n  startView = input<Extract<MatCalendarView, 'multi-year' | 'year'>>('multi-year');\n\n  /** Enable buttons to step through months. */\n  canStepThroughMonths = input(false, { transform: booleanAttribute });\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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"}
+{"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  booleanAttribute,\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, MatCalendarView } 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]=\"startView()\"\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-warning\" ngProjectAs=\"watt-field-warning\" />\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  /** Whether the calendar should be started in month or year view. */\n  startView = input<Extract<MatCalendarView, 'multi-year' | 'year'>>('multi-year');\n\n  /** Enable buttons to step through months. */\n  canStepThroughMonths = input(false, { transform: booleanAttribute });\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,12 +1,12 @@
 {
   "type": "module",
   "name": "@energinet/watt",
-  "version": "4.3.19",
+  "version": "4.3.21",
   "license": "Apache-2.0",
   "exports": {
     ".": {
       "sass": "./core/styles/@energinet/watt/_index.scss",
-      "types": "./index.d.ts",
+      "types": "./types/energinet-watt.d.ts",
       "default": "./fesm2022/energinet-watt.mjs"
     },
     "./utils": {
@@ -16,243 +16,243 @@
       "default": "./package.json"
     },
     "./badge": {
-      "types": "./badge/index.d.ts",
+      "types": "./types/energinet-watt-badge.d.ts",
       "default": "./fesm2022/energinet-watt-badge.mjs"
     },
     "./breadcrumbs": {
-      "types": "./breadcrumbs/index.d.ts",
+      "types": "./types/energinet-watt-breadcrumbs.d.ts",
       "default": "./fesm2022/energinet-watt-breadcrumbs.mjs"
     },
     "./button": {
-      "types": "./button/index.d.ts",
+      "types": "./types/energinet-watt-button.d.ts",
       "default": "./fesm2022/energinet-watt-button.mjs"
     },
     "./card": {
-      "types": "./card/index.d.ts",
+      "types": "./types/energinet-watt-card.d.ts",
       "default": "./fesm2022/energinet-watt-card.mjs"
     },
     "./checkbox": {
-      "types": "./checkbox/index.d.ts",
+      "types": "./types/energinet-watt-checkbox.d.ts",
       "default": "./fesm2022/energinet-watt-checkbox.mjs"
     },
     "./chip": {
-      "types": "./chip/index.d.ts",
+      "types": "./types/energinet-watt-chip.d.ts",
       "default": "./fesm2022/energinet-watt-chip.mjs"
     },
     "./clipboard": {
-      "types": "./clipboard/index.d.ts",
+      "types": "./types/energinet-watt-clipboard.d.ts",
       "default": "./fesm2022/energinet-watt-clipboard.mjs"
     },
     "./code": {
-      "types": "./code/index.d.ts",
+      "types": "./types/energinet-watt-code.d.ts",
       "default": "./fesm2022/energinet-watt-code.mjs"
     },
+    "./core/breakpoints": {
+      "types": "./types/energinet-watt-core-breakpoints.d.ts",
+      "default": "./fesm2022/energinet-watt-core-breakpoints.mjs"
+    },
+    "./core/color": {
+      "types": "./types/energinet-watt-core-color.d.ts",
+      "default": "./fesm2022/energinet-watt-core-color.mjs"
+    },
+    "./core/date": {
+      "types": "./types/energinet-watt-core-date.d.ts",
+      "default": "./fesm2022/energinet-watt-core-date.mjs"
+    },
     "./data": {
-      "types": "./data/index.d.ts",
+      "types": "./types/energinet-watt-data.d.ts",
       "default": "./fesm2022/energinet-watt-data.mjs"
     },
     "./datetime-field": {
-      "types": "./datetime-field/index.d.ts",
+      "types": "./types/energinet-watt-datetime-field.d.ts",
       "default": "./fesm2022/energinet-watt-datetime-field.mjs"
     },
     "./description-list": {
-      "types": "./description-list/index.d.ts",
+      "types": "./types/energinet-watt-description-list.d.ts",
       "default": "./fesm2022/energinet-watt-description-list.mjs"
     },
     "./drawer": {
-      "types": "./drawer/index.d.ts",
+      "types": "./types/energinet-watt-drawer.d.ts",
       "default": "./fesm2022/energinet-watt-drawer.mjs"
     },
     "./dropdown": {
-      "types": "./dropdown/index.d.ts",
+      "types": "./types/energinet-watt-dropdown.d.ts",
       "default": "./fesm2022/energinet-watt-dropdown.mjs"
     },
     "./dropzone": {
-      "types": "./dropzone/index.d.ts",
+      "types": "./types/energinet-watt-dropzone.d.ts",
       "default": "./fesm2022/energinet-watt-dropzone.mjs"
     },
     "./empty-state": {
-      "types": "./empty-state/index.d.ts",
+      "types": "./types/energinet-watt-empty-state.d.ts",
       "default": "./fesm2022/energinet-watt-empty-state.mjs"
     },
     "./expandable-card": {
-      "types": "./expandable-card/index.d.ts",
+      "types": "./types/energinet-watt-expandable-card.d.ts",
       "default": "./fesm2022/energinet-watt-expandable-card.mjs"
     },
     "./field": {
-      "types": "./field/index.d.ts",
+      "types": "./types/energinet-watt-field.d.ts",
       "default": "./fesm2022/energinet-watt-field.mjs"
     },
     "./file-field": {
-      "types": "./file-field/index.d.ts",
+      "types": "./types/energinet-watt-file-field.d.ts",
       "default": "./fesm2022/energinet-watt-file-field.mjs"
     },
     "./heading": {
-      "types": "./heading/index.d.ts",
+      "types": "./types/energinet-watt-heading.d.ts",
       "default": "./fesm2022/energinet-watt-heading.mjs"
     },
     "./icon": {
-      "types": "./icon/index.d.ts",
+      "types": "./types/energinet-watt-icon.d.ts",
       "default": "./fesm2022/energinet-watt-icon.mjs"
     },
+    "./icon/flags": {
+      "types": "./types/energinet-watt-icon-flags.d.ts",
+      "default": "./fesm2022/energinet-watt-icon-flags.mjs"
+    },
     "./json-viewer": {
-      "types": "./json-viewer/index.d.ts",
+      "types": "./types/energinet-watt-json-viewer.d.ts",
       "default": "./fesm2022/energinet-watt-json-viewer.mjs"
     },
     "./menu": {
-      "types": "./menu/index.d.ts",
+      "types": "./types/energinet-watt-menu.d.ts",
       "default": "./fesm2022/energinet-watt-menu.mjs"
     },
     "./modal": {
-      "types": "./modal/index.d.ts",
+      "types": "./types/energinet-watt-modal.d.ts",
       "default": "./fesm2022/energinet-watt-modal.mjs"
     },
     "./paginator": {
-      "types": "./paginator/index.d.ts",
+      "types": "./types/energinet-watt-paginator.d.ts",
       "default": "./fesm2022/energinet-watt-paginator.mjs"
     },
     "./phone-field": {
-      "types": "./phone-field/index.d.ts",
+      "types": "./types/energinet-watt-phone-field.d.ts",
       "default": "./fesm2022/energinet-watt-phone-field.mjs"
     },
+    "./picker/__shared": {
+      "types": "./types/energinet-watt-picker-__shared.d.ts",
+      "default": "./fesm2022/energinet-watt-picker-__shared.mjs"
+    },
+    "./picker/datepicker": {
+      "types": "./types/energinet-watt-picker-datepicker.d.ts",
+      "default": "./fesm2022/energinet-watt-picker-datepicker.mjs"
+    },
+    "./picker/timepicker": {
+      "types": "./types/energinet-watt-picker-timepicker.d.ts",
+      "default": "./fesm2022/energinet-watt-picker-timepicker.mjs"
+    },
     "./progress-tracker": {
-      "types": "./progress-tracker/index.d.ts",
+      "types": "./types/energinet-watt-progress-tracker.d.ts",
       "default": "./fesm2022/energinet-watt-progress-tracker.mjs"
     },
     "./query-params": {
-      "types": "./query-params/index.d.ts",
+      "types": "./types/energinet-watt-query-params.d.ts",
       "default": "./fesm2022/energinet-watt-query-params.mjs"
     },
     "./radio": {
-      "types": "./radio/index.d.ts",
+      "types": "./types/energinet-watt-radio.d.ts",
       "default": "./fesm2022/energinet-watt-radio.mjs"
     },
     "./search": {
-      "types": "./search/index.d.ts",
+      "types": "./types/energinet-watt-search.d.ts",
       "default": "./fesm2022/energinet-watt-search.mjs"
     },
     "./segmented-buttons": {
-      "types": "./segmented-buttons/index.d.ts",
+      "types": "./types/energinet-watt-segmented-buttons.d.ts",
       "default": "./fesm2022/energinet-watt-segmented-buttons.mjs"
     },
     "./separator": {
-      "types": "./separator/index.d.ts",
+      "types": "./types/energinet-watt-separator.d.ts",
       "default": "./fesm2022/energinet-watt-separator.mjs"
     },
     "./shell": {
-      "types": "./shell/index.d.ts",
+      "types": "./types/energinet-watt-shell.d.ts",
       "default": "./fesm2022/energinet-watt-shell.mjs"
     },
     "./slide-toggle": {
-      "types": "./slide-toggle/index.d.ts",
+      "types": "./types/energinet-watt-slide-toggle.d.ts",
       "default": "./fesm2022/energinet-watt-slide-toggle.mjs"
     },
     "./slider": {
-      "types": "./slider/index.d.ts",
+      "types": "./types/energinet-watt-slider.d.ts",
       "default": "./fesm2022/energinet-watt-slider.mjs"
     },
     "./spinner": {
-      "types": "./spinner/index.d.ts",
+      "types": "./types/energinet-watt-spinner.d.ts",
       "default": "./fesm2022/energinet-watt-spinner.mjs"
     },
     "./stepper": {
-      "types": "./stepper/index.d.ts",
+      "types": "./types/energinet-watt-stepper.d.ts",
       "default": "./fesm2022/energinet-watt-stepper.mjs"
     },
     "./table": {
-      "types": "./table/index.d.ts",
+      "types": "./types/energinet-watt-table.d.ts",
       "default": "./fesm2022/energinet-watt-table.mjs"
     },
     "./tabs": {
-      "types": "./tabs/index.d.ts",
+      "types": "./types/energinet-watt-tabs.d.ts",
       "default": "./fesm2022/energinet-watt-tabs.mjs"
     },
     "./text-field": {
-      "types": "./text-field/index.d.ts",
+      "types": "./types/energinet-watt-text-field.d.ts",
       "default": "./fesm2022/energinet-watt-text-field.mjs"
     },
     "./textarea-field": {
-      "types": "./textarea-field/index.d.ts",
+      "types": "./types/energinet-watt-textarea-field.d.ts",
       "default": "./fesm2022/energinet-watt-textarea-field.mjs"
     },
     "./toast": {
-      "types": "./toast/index.d.ts",
+      "types": "./types/energinet-watt-toast.d.ts",
       "default": "./fesm2022/energinet-watt-toast.mjs"
     },
     "./tooltip": {
-      "types": "./tooltip/index.d.ts",
+      "types": "./types/energinet-watt-tooltip.d.ts",
       "default": "./fesm2022/energinet-watt-tooltip.mjs"
     },
+    "./utils/css": {
+      "types": "./types/energinet-watt-utils-css.d.ts",
+      "default": "./fesm2022/energinet-watt-utils-css.mjs"
+    },
+    "./utils/intersection-observer": {
+      "types": "./types/energinet-watt-utils-intersection-observer.d.ts",
+      "default": "./fesm2022/energinet-watt-utils-intersection-observer.mjs"
+    },
+    "./utils/resize-observer": {
+      "types": "./types/energinet-watt-utils-resize-observer.d.ts",
+      "default": "./fesm2022/energinet-watt-utils-resize-observer.mjs"
+    },
     "./validation-message": {
-      "types": "./validation-message/index.d.ts",
+      "types": "./types/energinet-watt-validation-message.d.ts",
       "default": "./fesm2022/energinet-watt-validation-message.mjs"
     },
     "./validators": {
-      "types": "./validators/index.d.ts",
+      "types": "./types/energinet-watt-validators.d.ts",
       "default": "./fesm2022/energinet-watt-validators.mjs"
     },
     "./vater": {
-      "types": "./vater/index.d.ts",
+      "types": "./types/energinet-watt-vater.d.ts",
       "default": "./fesm2022/energinet-watt-vater.mjs"
     },
     "./year-field": {
-      "types": "./year-field/index.d.ts",
+      "types": "./types/energinet-watt-year-field.d.ts",
       "default": "./fesm2022/energinet-watt-year-field.mjs"
     },
     "./yearmonth-field": {
-      "types": "./yearmonth-field/index.d.ts",
+      "types": "./types/energinet-watt-yearmonth-field.d.ts",
       "default": "./fesm2022/energinet-watt-yearmonth-field.mjs"
-    },
-    "./core/breakpoints": {
-      "types": "./core/breakpoints/index.d.ts",
-      "default": "./fesm2022/energinet-watt-core-breakpoints.mjs"
-    },
-    "./core/color": {
-      "types": "./core/color/index.d.ts",
-      "default": "./fesm2022/energinet-watt-core-color.mjs"
-    },
-    "./core/date": {
-      "types": "./core/date/index.d.ts",
-      "default": "./fesm2022/energinet-watt-core-date.mjs"
-    },
-    "./icon/flags": {
-      "types": "./icon/flags/index.d.ts",
-      "default": "./fesm2022/energinet-watt-icon-flags.mjs"
-    },
-    "./picker/__shared": {
-      "types": "./picker/__shared/index.d.ts",
-      "default": "./fesm2022/energinet-watt-picker-__shared.mjs"
-    },
-    "./picker/datepicker": {
-      "types": "./picker/datepicker/index.d.ts",
-      "default": "./fesm2022/energinet-watt-picker-datepicker.mjs"
-    },
-    "./picker/timepicker": {
-      "types": "./picker/timepicker/index.d.ts",
-      "default": "./fesm2022/energinet-watt-picker-timepicker.mjs"
-    },
-    "./utils/css": {
-      "types": "./utils/css/index.d.ts",
-      "default": "./fesm2022/energinet-watt-utils-css.mjs"
-    },
-    "./utils/intersection-observer": {
-      "types": "./utils/intersection-observer/index.d.ts",
-      "default": "./fesm2022/energinet-watt-utils-intersection-observer.mjs"
-    },
-    "./utils/resize-observer": {
-      "types": "./utils/resize-observer/index.d.ts",
-      "default": "./fesm2022/energinet-watt-utils-resize-observer.mjs"
     }
   },
   "peerDependencies": {
-    "@analogjs/vite-plugin-angular": "^2.1.3",
-    "@angular/cdk": "^20.2.14",
-    "@angular/common": "^20.3.15",
-    "@angular/compiler": "^20.3.15",
-    "@angular/core": "^20.3.15",
-    "@angular/forms": "^20.3.15",
-    "@angular/material": "^20.2.14",
-    "@angular/router": "^20.3.15",
+    "@analogjs/vite-plugin-angular": "^2.2.3",
+    "@angular/cdk": "^21.1.5",
+    "@angular/common": "^21.1.5",
+    "@angular/compiler": "^21.1.5",
+    "@angular/core": "^21.1.5",
+    "@angular/forms": "^21.1.5",
+    "@angular/material": "^21.1.5",
+    "@angular/router": "^21.1.5",
     "@maskito/angular": "^2.5.0",
     "@maskito/core": "^2.5.0",
     "@maskito/kit": "^2.5.0",
@@ -261,10 +261,11 @@
     "dayjs": "^1.11.13",
     "libphonenumber-js": "^1.11.9",
     "ngx-mat-select-search": "^8.0.4",
-    "rxjs": "^7.8.2"
+    "rxjs": "^7.8.2",
+    "zone.js": "^0.16.1"
   },
   "module": "fesm2022/energinet-watt.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/energinet-watt.d.ts",
   "sideEffects": false,
   "dependencies": {
     "tslib": "^2.3.0"

package/{button/index.d.ts → types/energinet-watt-button.d.ts}

@@ -3,7 +3,7 @@ import * as _angular_core from '@angular/core';
 type WattButtonType = 'button' | 'reset' | 'submit';
 type WattButtonSize = 'small' | 'medium';
 declare class WattButtonComponent {
-    icon: _angular_core.InputSignal<"search" | "filter" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "close" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "time" | "email" | "markEmailUnread" | "link" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "menu" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | undefined>;
+    icon: _angular_core.InputSignal<"search" | "filter" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "close" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "time" | "email" | "markEmailUnread" | "link" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "menu" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "article" | "contract" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | undefined>;
     variant: _angular_core.InputSignal<"primary" | "secondary" | "text" | "icon" | "selection">;
     size: _angular_core.InputSignal<WattButtonSize>;
     type: _angular_core.InputSignal<WattButtonType>;

package/{chip/index.d.ts → types/energinet-watt-chip.d.ts}

@@ -6,7 +6,7 @@ import { WattDatepickerIntlService } from '@energinet/watt/picker/datepicker';
 
 declare class WattActionChipComponent {
     disabled: _angular_core.InputSignal<boolean>;
-    icon: _angular_core.InputSignal<"search" | "filter" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "close" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "time" | "email" | "markEmailUnread" | "link" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "menu" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on">;
+    icon: _angular_core.InputSignal<"search" | "filter" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "close" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "time" | "email" | "markEmailUnread" | "link" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "menu" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "article" | "contract" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on">;
     action: _angular_core.OutputEmitterRef<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WattActionChipComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattActionChipComponent, "watt-action-chip", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; }, { "action": "action"; }, never, ["*"], true, never>;
@@ -88,6 +88,14 @@ declare class WattFormChipDirective implements ControlValueAccessor {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WattFormChipDirective, "    watt-filter-chip[formControl],    watt-date-chip[formControl],    watt-date-range-chip[formControl],    watt-filter-chip[formControlName],    watt-date-chip[formControlName],    watt-date-range-chip[formControlName],  ", never, {}, {}, never, never, true, never>;
 }
 
+declare class WattInputChipComponent {
+    label: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignal<boolean>;
+    removed: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WattInputChipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattInputChipComponent, "watt-input-chip", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, never, true, never>;
+}
+
 type WattMenuChipHasPopup = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
 declare class WattMenuChipComponent {
     opened: _angular_core.InputSignal<boolean>;
@@ -101,4 +109,4 @@ declare class WattMenuChipComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<WattMenuChipComponent, "watt-menu-chip", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "hasPopup": { "alias": "hasPopup"; "required": false; "isSignal": true; }; }, { "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
 }
 
-export { WattActionChipComponent, WattChipComponent, WattDateChipComponent, WattDateRangeChipComponent, WattFilterChipComponent, WattFormChipDirective, WattMenuChipComponent };
+export { WattActionChipComponent, WattChipComponent, WattDateChipComponent, WattDateRangeChipComponent, WattFilterChipComponent, WattFormChipDirective, WattInputChipComponent, WattMenuChipComponent };

package/{data/index.d.ts → types/energinet-watt-data.d.ts}

@@ -46,7 +46,7 @@ declare class WattDataTableComponent {
     count: _angular_core.InputSignal<number | undefined>;
     autoSize: _angular_core.InputSignal<boolean>;
     variant: _angular_core.InputSignal<WATT_CARD_VARIANT>;
-    emptyStateIcon: _angular_core.InputSignal<"search" | "filter" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "close" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "time" | "email" | "markEmailUnread" | "link" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "menu" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | "custom-power" | "custom-explore" | "custom-no-results">;
+    emptyStateIcon: _angular_core.InputSignal<"search" | "filter" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "close" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "time" | "email" | "markEmailUnread" | "link" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "menu" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "article" | "contract" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | "custom-power" | "custom-explore" | "custom-no-results">;
     clear: _angular_core.OutputEmitterRef<void>;
     pageChanged: _angular_core.OutputEmitterRef<PageEvent>;
     retry: _angular_core.OutputEmitterRef<void>;

package/{dropdown/index.d.ts → types/energinet-watt-dropdown.d.ts}

@@ -126,6 +126,7 @@ declare class WattDropdownComponent<T = string> implements ControlValueAccessor,
     registerOnTouched(onTouchFn: () => void): void;
     setDisabledState(shouldDisable: boolean): void;
     onToggleAll(toggleAllState: boolean): void;
+    onFieldClick(event: MouseEvent): void;
     sortOptions(options: WattDropdownOptions): WattDropdownOptions;
     private listenForFilterFieldValueChanges;
     private changeParentValue;

package/{empty-state/index.d.ts → types/energinet-watt-empty-state.d.ts}

@@ -6,7 +6,7 @@ import { WattIconSize } from '@energinet/watt/icon';
  * `import { WattEmptyStateComponent } from '@energinet/watt/empty-state';`
  */
 declare class WattEmptyStateComponent {
-    icon: i0.InputSignal<"search" | "filter" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "close" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "time" | "email" | "markEmailUnread" | "link" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "menu" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | "custom-power" | "custom-explore" | "custom-no-results" | "custom-cooperation" | undefined>;
+    icon: i0.InputSignal<"search" | "filter" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "close" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "time" | "email" | "markEmailUnread" | "link" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "menu" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "article" | "contract" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | "custom-power" | "custom-explore" | "custom-no-results" | "custom-cooperation" | undefined>;
     size: i0.InputSignal<"small" | "large">;
     title: i0.InputSignal<string>;
     message: i0.InputSignal<string>;

package/{icon/index.d.ts → types/energinet-watt-icon.d.ts}

@@ -75,6 +75,8 @@ declare const WattIconMap: {
     print: string;
     preview: string;
     attachFile: string;
+    article: string;
+    contract: string;
     power: string;
     location: string;
     smartDisplay: string;
@@ -103,7 +105,7 @@ type WattIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 type WattIconState = 'default' | 'success' | 'danger' | 'warning' | 'info';
 declare class WattIconComponent {
     /** Name of an icon within the font set. */
-    name: _angular_core.InputSignal<"search" | "remove" | "edit" | "redo" | "undo" | "close" | "cancel" | "settings" | "email" | "link" | "payments" | "forward" | "menu" | "logout" | "help" | "refresh" | "language" | "send" | "info" | "feedback" | "upload" | "download" | "print" | "preview" | "power" | "notifications" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | "success" | "danger" | "warning" | "filter" | "plus" | "minus" | "removeForever" | "checkmark" | "user" | "contentCopy" | "date" | "time" | "markEmailUnread" | "openInNew" | "monetization" | "forwardMessage" | "moreVertical" | "login" | "alternateEmail" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "save" | "fileDownload" | "fileUpload" | "attachFile" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | undefined>;
+    name: _angular_core.InputSignal<"search" | "remove" | "edit" | "redo" | "undo" | "close" | "cancel" | "settings" | "email" | "link" | "payments" | "forward" | "menu" | "logout" | "help" | "refresh" | "language" | "send" | "info" | "feedback" | "upload" | "download" | "print" | "preview" | "article" | "contract" | "power" | "notifications" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | "success" | "danger" | "warning" | "filter" | "plus" | "minus" | "removeForever" | "checkmark" | "user" | "contentCopy" | "date" | "time" | "markEmailUnread" | "openInNew" | "monetization" | "forwardMessage" | "moreVertical" | "login" | "alternateEmail" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "save" | "fileDownload" | "fileUpload" | "attachFile" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | undefined>;
     /** Accessible label for the icon. */
     label: _angular_core.InputSignal<string | undefined>;
     /** Size of the icon. */

package/{modal/index.d.ts → types/energinet-watt-modal.d.ts}

@@ -35,7 +35,7 @@ declare class WattModalComponent {
     /** Whether the dialog should restore focus to the previously-focused element, after it's closed. */
     restoreFocus: _angular_core.InputSignal<boolean>;
     /** Icon displayed next to the modal title. */
-    titleIcon: _angular_core.InputSignal<"filter" | "close" | "link" | "menu" | "search" | "time" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "email" | "markEmailUnread" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | undefined>;
+    titleIcon: _angular_core.InputSignal<"filter" | "close" | "article" | "link" | "menu" | "search" | "time" | "plus" | "minus" | "edit" | "redo" | "undo" | "remove" | "removeForever" | "cancel" | "checkmark" | "user" | "settings" | "contentCopy" | "date" | "email" | "markEmailUnread" | "openInNew" | "monetization" | "payments" | "forwardMessage" | "forward" | "moreVertical" | "logout" | "login" | "help" | "alternateEmail" | "refresh" | "language" | "pendingActions" | "toggleOn" | "toggleOff" | "personCheck" | "send" | "left" | "right" | "up" | "down" | "arrowDropDown" | "arrowRightAlt" | "arrowLeftAlt" | "danger" | "warning" | "success" | "info" | "feedback" | "save" | "upload" | "download" | "fileDownload" | "fileUpload" | "print" | "preview" | "attachFile" | "contract" | "power" | "location" | "smartDisplay" | "windmill" | "solarPower" | "priorityHigh" | "notifications" | "notificationsUnread" | "horizontalRule" | "wrongLocation" | "heatPump" | "inventory" | "globe" | "calculate" | "bar_chart_4_bars" | "view_list" | "view_stream" | "construction" | "factory" | "nest_eco_leaf" | "flash_on" | undefined>;
     /** Whether the modal should open automatically when rendered.  */
     autoOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
     closed: _angular_core.OutputEmitterRef<boolean>;