@energinet/watt 0.0.1

package/fesm2022/energinet-watt-chip.mjs

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