@energinet/watt 2.0.13 → 2.1.0

package/fesm2022/energinet-watt-chip.mjs

@@ -1,760 +0,0 @@
-import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, output, EventEmitter, Output, Input, ViewEncapsulation, Injectable, inject, HostBinding, ElementRef, forwardRef, Directive } from '@angular/core';
-import { WattIconComponent } from '@energinet/watt/icon';
-import * as i1 from '@angular/material/datepicker';
-import { MatDatepickerModule, DefaultMatCalendarRangeStrategy, DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY } from '@angular/material/datepicker';
-import { WattDatePipe, dayjs } from '@energinet/watt/core/date';
-import { WattFieldComponent } from '@energinet/watt/field';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DateAdapter } from '@angular/material/core';
-import { WattButtonComponent } from '@energinet/watt/button';
-import { WattDatepickerIntlService } from '@energinet/watt/picker/datepicker';
-
-//#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
-class WattChipComponent {
-    selected = input(false);
-    disabled = input(false);
-    readonly = input(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattChipComponent, isStandalone: true, selector: "watt-chip", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <label
-      [class.selected]="selected()"
-      [class.disabled]="disabled()"
-      [class.read-only]="readonly()"
-    >
-      @if (selected()) {
-        <watt-icon class="selected-icon" name="checkmark" size="s" [attr.aria-hidden]="true" />
-      }
-      <ng-content />
-    </label>
-  `, isInline: true, styles: ["label{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;position:relative;background:var(--input-background, var(--watt-color-neutral-white));border-radius:var(--watt-space-m);border:1px solid var(--input-border-color, var(--watt-on-light-low-emphasis));color:var(--watt-on-light-high-emphasis);cursor:pointer;display:inline-flex;align-items:center;padding:5px 12px;-webkit-user-select:none;user-select:none;white-space:nowrap;max-width:100%}label:hover{border:1px solid var(--watt-on-light-medium-emphasis)}label:active:not(.disabled),label:focus-within{background:var(--watt-color-primary-ultralight);border:1px solid var(--watt-on-light-medium-emphasis);outline:none}label.selected{background:var(--watt-color-primary);color:var(--watt-on-dark-high-emphasis);border-color:transparent}label.selected:hover,label.selected:focus-within{background:var(--watt-color-primary-dark);border-color:transparent}label.disabled{border:1px solid var(--watt-on-light-surface-overlay);color:var(--watt-on-light-low-emphasis);cursor:not-allowed}label.read-only{cursor:inherit}label .selected-icon{margin-right:var(--watt-space-s)}\n"], dependencies: [{ kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattChipComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [WattIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'watt-chip', template: `
-    <label
-      [class.selected]="selected()"
-      [class.disabled]="disabled()"
-      [class.read-only]="readonly()"
-    >
-      @if (selected()) {
-        <watt-icon class="selected-icon" name="checkmark" size="s" [attr.aria-hidden]="true" />
-      }
-      <ng-content />
-    </label>
-  `, styles: ["label{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;position:relative;background:var(--input-background, var(--watt-color-neutral-white));border-radius:var(--watt-space-m);border:1px solid var(--input-border-color, var(--watt-on-light-low-emphasis));color:var(--watt-on-light-high-emphasis);cursor:pointer;display:inline-flex;align-items:center;padding:5px 12px;-webkit-user-select:none;user-select:none;white-space:nowrap;max-width:100%}label:hover{border:1px solid var(--watt-on-light-medium-emphasis)}label:active:not(.disabled),label:focus-within{background:var(--watt-color-primary-ultralight);border:1px solid var(--watt-on-light-medium-emphasis);outline:none}label.selected{background:var(--watt-color-primary);color:var(--watt-on-dark-high-emphasis);border-color:transparent}label.selected:hover,label.selected:focus-within{background:var(--watt-color-primary-dark);border-color:transparent}label.disabled{border:1px solid var(--watt-on-light-surface-overlay);color:var(--watt-on-light-low-emphasis);cursor:not-allowed}label.read-only{cursor:inherit}label .selected-icon{margin-right:var(--watt-space-s)}\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
-class WattActionChipComponent {
-    disabled = input(false);
-    icon = input.required();
-    action = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattActionChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: WattActionChipComponent, isStandalone: true, selector: "watt-action-chip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: `
-    <watt-chip [disabled]="disabled()">
-      <button
-        type="button"
-        class="cdk-visually-hidden"
-        (click)="$event.stopImmediatePropagation(); action.emit()"
-        [disabled]="disabled()"
-      ></button>
-      <ng-content />
-      <watt-icon
-        size="s"
-        [name]="icon()"
-        class="menu-icon"
-        [attr.aria-hidden]="true"
-        [class.disabled]="disabled()"
-      />
-    </watt-chip>
-  `, isInline: true, styles: [":host{display:block}.disabled{color:var(--watt-on-light-low-emphasis)}\n"], dependencies: [{ kind: "component", type: WattChipComponent, selector: "watt-chip", inputs: ["selected", "disabled", "readonly"] }, { kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattActionChipComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [WattChipComponent, WattIconComponent], selector: 'watt-action-chip', template: `
-    <watt-chip [disabled]="disabled()">
-      <button
-        type="button"
-        class="cdk-visually-hidden"
-        (click)="$event.stopImmediatePropagation(); action.emit()"
-        [disabled]="disabled()"
-      ></button>
-      <ng-content />
-      <watt-icon
-        size="s"
-        [name]="icon()"
-        class="menu-icon"
-        [attr.aria-hidden]="true"
-        [class.disabled]="disabled()"
-      />
-    </watt-chip>
-  `, styles: [":host{display:block}.disabled{color:var(--watt-on-light-low-emphasis)}\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
-class WattMenuChipComponent {
-    opened = false;
-    disabled = false;
-    name;
-    value;
-    selected = false;
-    hasPopup = 'menu';
-    // eslint-disable-next-line @angular-eslint/no-output-native
-    toggle = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattMenuChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: WattMenuChipComponent, isStandalone: true, selector: "watt-menu-chip", inputs: { opened: "opened", disabled: "disabled", name: "name", value: "value", selected: "selected", hasPopup: "hasPopup" }, outputs: { toggle: "toggle" }, ngImport: i0, template: `
-    <watt-chip [disabled]="disabled" [selected]="selected">
-      <button
-        class="cdk-visually-hidden"
-        [attr.aria-haspopup]="hasPopup"
-        [attr.aria-expanded]="opened"
-        [attr.aria-pressed]="selected"
-        (click)="toggle.emit()"
-        [disabled]="disabled"
-      ></button>
-      <ng-content />
-      <watt-icon
-        size="s"
-        name="arrowDropDown"
-        class="menu-icon"
-        [attr.aria-hidden]="true"
-        [class.opened]="opened"
-        [class.selected]="selected"
-        [class.disabled]="disabled"
-      />
-    </watt-chip>
-  `, isInline: true, styles: [":host{display:block}.menu-icon{margin-left:var(--watt-space-xs);transition:linear .2s all;color:var(--watt-color-primary)}.menu-icon.disabled{color:var(--watt-on-light-low-emphasis)}.opened{transform:rotate(180deg)}.selected{color:var(--watt-color-neutral-white)}.disabled{color:var(--watt-on-light-low-emphasis)}\n"], dependencies: [{ kind: "component", type: WattChipComponent, selector: "watt-chip", inputs: ["selected", "disabled", "readonly"] }, { kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattMenuChipComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [WattChipComponent, WattIconComponent], selector: 'watt-menu-chip', template: `
-    <watt-chip [disabled]="disabled" [selected]="selected">
-      <button
-        class="cdk-visually-hidden"
-        [attr.aria-haspopup]="hasPopup"
-        [attr.aria-expanded]="opened"
-        [attr.aria-pressed]="selected"
-        (click)="toggle.emit()"
-        [disabled]="disabled"
-      ></button>
-      <ng-content />
-      <watt-icon
-        size="s"
-        name="arrowDropDown"
-        class="menu-icon"
-        [attr.aria-hidden]="true"
-        [class.opened]="opened"
-        [class.selected]="selected"
-        [class.disabled]="disabled"
-      />
-    </watt-chip>
-  `, styles: [":host{display:block}.menu-icon{margin-left:var(--watt-space-xs);transition:linear .2s all;color:var(--watt-color-primary)}.menu-icon.disabled{color:var(--watt-on-light-low-emphasis)}.opened{transform:rotate(180deg)}.selected{color:var(--watt-color-neutral-white)}.disabled{color:var(--watt-on-light-low-emphasis)}\n"] }]
-        }], propDecorators: { opened: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], hasPopup: [{
-                type: Input
-            }], toggle: [{
-                type: Output
-            }] } });
-
-//#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
-class WattDateChipComponent {
-    disabled = false;
-    label;
-    placeholder;
-    value;
-    formControl;
-    selectionChange = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattDateChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattDateChipComponent, isStandalone: true, selector: "watt-date-chip", inputs: { disabled: "disabled", label: "label", placeholder: "placeholder", value: "value", formControl: "formControl" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
-    <mat-datepicker #picker />
-    <watt-field [control]="formControl" [chipMode]="true">
-      <watt-menu-chip
-        hasPopup="dialog"
-        [disabled]="disabled"
-        [selected]="!!value"
-        [opened]="picker.opened"
-        (toggle)="picker.open()"
-      >
-        <input
-          tabindex="-1"
-          class="cdk-visually-hidden"
-          type="text"
-          [value]="value"
-          [matDatepicker]="picker"
-          (dateChange)="value = $event.value"
-          (dateChange)="selectionChange.emit($event.value)"
-        />
-        {{ placeholder }}
-        <span>
-          @if (value) {
-            @if (placeholder) {
-              :
-            }
-            {{ value | wattDate }}
-          }
-        </span>
-      </watt-menu-chip>
-      <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
-      <ng-content ngProjectAs="watt-field-error" select="watt-field-error" />
-    </watt-field>
-  `, isInline: true, styles: ["watt-date-chip input{top:0;bottom:0;height:auto;visibility:hidden}watt-date-chip watt-field label .watt-field-wrapper{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: WattMenuChipComponent, selector: "watt-menu-chip", inputs: ["opened", "disabled", "name", "value", "selected", "hasPopup"], outputs: ["toggle"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName"] }, { kind: "pipe", type: WattDatePipe, name: "wattDate" }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattDateChipComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [MatDatepickerModule, WattMenuChipComponent, WattFieldComponent, WattDatePipe], selector: 'watt-date-chip', encapsulation: ViewEncapsulation.None, template: `
-    <mat-datepicker #picker />
-    <watt-field [control]="formControl" [chipMode]="true">
-      <watt-menu-chip
-        hasPopup="dialog"
-        [disabled]="disabled"
-        [selected]="!!value"
-        [opened]="picker.opened"
-        (toggle)="picker.open()"
-      >
-        <input
-          tabindex="-1"
-          class="cdk-visually-hidden"
-          type="text"
-          [value]="value"
-          [matDatepicker]="picker"
-          (dateChange)="value = $event.value"
-          (dateChange)="selectionChange.emit($event.value)"
-        />
-        {{ placeholder }}
-        <span>
-          @if (value) {
-            @if (placeholder) {
-              :
-            }
-            {{ value | wattDate }}
-          }
-        </span>
-      </watt-menu-chip>
-      <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
-      <ng-content ngProjectAs="watt-field-error" select="watt-field-error" />
-    </watt-field>
-  `, styles: ["watt-date-chip input{top:0;bottom:0;height:auto;visibility:hidden}watt-date-chip watt-field label .watt-field-wrapper{background-color:transparent}\n"] }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], formControl: [{
-                type: Input,
-                args: [{ required: true }]
-            }], selectionChange: [{
-                type: Output
-            }] } });
-
-//#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
-class WattDateRangeSelectionStrategy extends DefaultMatCalendarRangeStrategy {
-    customSelectionStrategy;
-    setCustomSelectionStrategy(strategy) {
-        this.customSelectionStrategy = strategy;
-    }
-    selectionFinished(date, currentRange) {
-        let range = super.selectionFinished(date, currentRange);
-        if (this.customSelectionStrategy) {
-            range = this.customSelectionStrategy(date);
-        }
-        return range.end ? new DateRange(range.start, dayjs(range.end).endOf('day').toDate()) : range;
-    }
-    createPreview(activeDate, currentRange) {
-        if (!this.customSelectionStrategy) {
-            return super.createPreview(activeDate, currentRange);
-        }
-        else {
-            return this.customSelectionStrategy(activeDate);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattDateRangeSelectionStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattDateRangeSelectionStrategy, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattDateRangeSelectionStrategy, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-class WattDateRangeChipComponent {
-    disabled = false;
-    label;
-    value;
-    formControl;
-    placeholder = true;
-    showActions = false;
-    customSelectionStrategy;
-    get hasPlaceholderClass() {
-        return this.placeholder;
-    }
-    selectionChange = new EventEmitter();
-    _dateAdapter = inject(DateAdapter);
-    intl = inject(WattDatepickerIntlService);
-    selectionStrategy() {
-        const strategy = new WattDateRangeSelectionStrategy(this._dateAdapter);
-        strategy.setCustomSelectionStrategy(this.customSelectionStrategy);
-        return strategy;
-    }
-    clearInput() {
-        this.value = undefined;
-        this.selectionChange.emit(null);
-    }
-    onSelectionChange(value) {
-        this.selectionChange.emit(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattDateRangeChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattDateRangeChipComponent, isStandalone: true, selector: "watt-date-range-chip", inputs: { disabled: "disabled", label: "label", value: "value", formControl: "formControl", placeholder: "placeholder", showActions: "showActions", customSelectionStrategy: "customSelectionStrategy" }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.has-placeholder": "this.hasPlaceholderClass" } }, providers: [
-            {
-                provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
-                useFactory: (comp) => comp.selectionStrategy(),
-                deps: [WattDateRangeChipComponent],
-            },
-        ], ngImport: i0, template: `
-    <mat-date-range-picker #picker>
-      @if (showActions) {
-        <mat-date-range-picker-actions>
-          <watt-button variant="text" (click)="clearInput()" icon="remove">{{
-            intl.clear
-          }}</watt-button>
-          <watt-button variant="primary" matDateRangePickerApply>{{ intl.select }}</watt-button>
-        </mat-date-range-picker-actions>
-      }
-    </mat-date-range-picker>
-
-    <watt-field [control]="formControl" [chipMode]="true">
-      <watt-menu-chip
-        hasPopup="dialog"
-        [disabled]="disabled"
-        [selected]="value?.start && value?.end ? true : false"
-        [opened]="picker.opened"
-        (toggle)="picker.open()"
-      >
-        <mat-date-range-input
-          #input
-          class="cdk-visually-hidden"
-          separator=""
-          [rangePicker]="picker"
-        >
-          <input
-            type="text"
-            matStartDate
-            tabindex="-1"
-            role="none"
-            [value]="value?.start"
-            (dateChange)="value = input.value!"
-            (dateChange)="showActions && onSelectionChange($event.value ? input.value! : null)"
-          />
-          <input
-            type="text"
-            matEndDate
-            tabindex="-1"
-            role="none"
-            [value]="value?.end"
-            (dateChange)="value = input.value!"
-            (dateChange)="onSelectionChange($event.value ? input.value! : null)"
-          />
-        </mat-date-range-input>
-        <ng-content />
-        @if (value?.start && value?.end) {
-          <span class="value">
-            {{ value | wattDate }}
-          </span>
-        }
-      </watt-menu-chip>
-      <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
-      <ng-content ngProjectAs="watt-field-error" select="watt-field-error" />
-    </watt-field>
-  `, isInline: true, styles: ["watt-date-range-chip mat-date-range-input{top:0;bottom:0;height:auto;visibility:hidden}watt-date-range-chip.has-placeholder .value:before{content:\":\"}watt-date-range-chip watt-field label .watt-field-wrapper{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: WattMenuChipComponent, selector: "watt-menu-chip", inputs: ["opened", "disabled", "name", "value", "selected", "hasPopup"], outputs: ["toggle"] }, { kind: "pipe", type: WattDatePipe, name: "wattDate" }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattDateRangeChipComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [
-                        MatDatepickerModule,
-                        WattMenuChipComponent,
-                        WattDatePipe,
-                        WattFieldComponent,
-                        WattButtonComponent,
-                    ], providers: [
-                        {
-                            provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
-                            useFactory: (comp) => comp.selectionStrategy(),
-                            deps: [WattDateRangeChipComponent],
-                        },
-                    ], selector: 'watt-date-range-chip', encapsulation: ViewEncapsulation.None, template: `
-    <mat-date-range-picker #picker>
-      @if (showActions) {
-        <mat-date-range-picker-actions>
-          <watt-button variant="text" (click)="clearInput()" icon="remove">{{
-            intl.clear
-          }}</watt-button>
-          <watt-button variant="primary" matDateRangePickerApply>{{ intl.select }}</watt-button>
-        </mat-date-range-picker-actions>
-      }
-    </mat-date-range-picker>
-
-    <watt-field [control]="formControl" [chipMode]="true">
-      <watt-menu-chip
-        hasPopup="dialog"
-        [disabled]="disabled"
-        [selected]="value?.start && value?.end ? true : false"
-        [opened]="picker.opened"
-        (toggle)="picker.open()"
-      >
-        <mat-date-range-input
-          #input
-          class="cdk-visually-hidden"
-          separator=""
-          [rangePicker]="picker"
-        >
-          <input
-            type="text"
-            matStartDate
-            tabindex="-1"
-            role="none"
-            [value]="value?.start"
-            (dateChange)="value = input.value!"
-            (dateChange)="showActions && onSelectionChange($event.value ? input.value! : null)"
-          />
-          <input
-            type="text"
-            matEndDate
-            tabindex="-1"
-            role="none"
-            [value]="value?.end"
-            (dateChange)="value = input.value!"
-            (dateChange)="onSelectionChange($event.value ? input.value! : null)"
-          />
-        </mat-date-range-input>
-        <ng-content />
-        @if (value?.start && value?.end) {
-          <span class="value">
-            {{ value | wattDate }}
-          </span>
-        }
-      </watt-menu-chip>
-      <ng-content ngProjectAs="watt-field-hint" select="watt-field-hint" />
-      <ng-content ngProjectAs="watt-field-error" select="watt-field-error" />
-    </watt-field>
-  `, styles: ["watt-date-range-chip mat-date-range-input{top:0;bottom:0;height:auto;visibility:hidden}watt-date-range-chip.has-placeholder .value:before{content:\":\"}watt-date-range-chip watt-field label .watt-field-wrapper{background-color:transparent}\n"] }]
-        }], propDecorators: { disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], formControl: [{
-                type: Input,
-                args: [{ required: true }]
-            }], placeholder: [{
-                type: Input
-            }], showActions: [{
-                type: Input
-            }], customSelectionStrategy: [{
-                type: Input
-            }], hasPlaceholderClass: [{
-                type: HostBinding,
-                args: ['class.has-placeholder']
-            }], selectionChange: [{
-                type: Output
-            }] } });
-
-//#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
-function isFirstRender() {
-    let isFirstRender = true;
-    return () => {
-        if (!isFirstRender)
-            return false;
-        isFirstRender = false;
-        return true;
-    };
-}
-class WattFilterChipComponent {
-    selected = false;
-    disabled = false;
-    name;
-    value;
-    choice;
-    selectionChange = new EventEmitter();
-    isFirstRender = isFirstRender();
-    onChange(input) {
-        const value = this.choice !== undefined ? input.value : input.checked;
-        this.selectionChange.emit(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattFilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: WattFilterChipComponent, isStandalone: true, selector: "watt-filter-chip", inputs: { selected: "selected", disabled: "disabled", name: "name", value: "value", choice: "choice" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
-    <watt-chip [disabled]="disabled" [selected]="isFirstRender() ? selected : input.checked">
-      <input
-        #input
-        class="cdk-visually-hidden"
-        [type]="choice === undefined ? 'checkbox' : 'radio'"
-        [name]="name"
-        [value]="value"
-        [checked]="selected"
-        [disabled]="disabled"
-        (change)="onChange(input)"
-      />
-      <ng-content />
-    </watt-chip>
-  `, isInline: true, dependencies: [{ kind: "component", type: WattChipComponent, selector: "watt-chip", inputs: ["selected", "disabled", "readonly"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattFilterChipComponent, decorators: [{
-            type: Component,
-            args: [{
-                    imports: [WattChipComponent],
-                    selector: 'watt-filter-chip',
-                    template: `
-    <watt-chip [disabled]="disabled" [selected]="isFirstRender() ? selected : input.checked">
-      <input
-        #input
-        class="cdk-visually-hidden"
-        [type]="choice === undefined ? 'checkbox' : 'radio'"
-        [name]="name"
-        [value]="value"
-        [checked]="selected"
-        [disabled]="disabled"
-        (change)="onChange(input)"
-      />
-      <ng-content />
-    </watt-chip>
-  `,
-                }]
-        }], propDecorators: { selected: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], choice: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }] } });
-
-//#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
-class WattFormChipDirective {
-    filterChip = inject(WattFilterChipComponent, { host: true, optional: true, self: true });
-    dateChip = inject(WattDateChipComponent, { host: true, optional: true, self: true });
-    dateRangeChip = inject(WattDateRangeChipComponent, {
-        host: true,
-        optional: true,
-        self: true,
-    });
-    element = inject(ElementRef);
-    component;
-    constructor() {
-        if (this.filterChip) {
-            this.component = this.filterChip;
-        }
-        else if (this.dateChip) {
-            this.component = this.dateChip;
-        }
-        else if (this.dateRangeChip) {
-            this.component = this.dateRangeChip;
-        }
-    }
-    writeValue(value) {
-        if (this.component) {
-            this.component.value = value;
-        }
-    }
-    registerOnChange(fn) {
-        this.component?.selectionChange.subscribe(fn);
-    }
-    registerOnTouched(fn) {
-        this.element.nativeElement.addEventListener('focusout', fn);
-    }
-    setDisabledState(disabled) {
-        if (this.component) {
-            this.component.disabled = disabled;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattFormChipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: WattFormChipDirective, isStandalone: true, selector: "\n    watt-filter-chip[formControl],\n    watt-date-chip[formControl],\n    watt-date-range-chip[formControl],\n    watt-filter-chip[formControlName],\n    watt-date-chip[formControlName],\n    watt-date-range-chip[formControlName],\n  ", providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => WattFormChipDirective),
-                multi: true,
-            },
-        ], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattFormChipDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => WattFormChipDirective),
-                            multi: true,
-                        },
-                    ],
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: `
-    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],
-  `,
-                }]
-        }], ctorParameters: () => [] });
-
-//#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 { WattActionChipComponent, WattChipComponent, WattDateChipComponent, WattDateRangeChipComponent, WattFilterChipComponent, WattFormChipDirective, WattMenuChipComponent };
-//# sourceMappingURL=energinet-watt-chip.mjs.map