@energinet/watt 4.2.15-alpha.0 → 4.2.15

package/esm2022/chip/watt-chip.component.js

@@ -0,0 +1,55 @@
+//#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
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { WattIconComponent } from '@energinet/watt/icon';
+import * as i0 from "@angular/core";
+export class WattChipComponent {
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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,.read-only),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;border:1px solid var(--watt-on-light-surface-overlay)}label.read-only:hover,label.read-only:focus-within{background:transparent}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: "20.3.15", 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,.read-only),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;border:1px solid var(--watt-on-light-surface-overlay)}label.read-only:hover,label.read-only:focus-within{background:transparent}label .selected-icon{margin-right:var(--watt-space-s)}\n"] }]
+        }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
+//# sourceMappingURL=watt-chip.component.js.map

package/esm2022/chip/watt-chip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watt-chip.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/chip/watt-chip.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;;AAoBzD,MAAM,OAAO,iBAAiB;IAC5B,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IACxB,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IACxB,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;wGAHb,iBAAiB;4FAAjB,iBAAiB,odAblB;;;;;;;;;;;GAWT,41CAfS,iBAAiB;;4FAiBhB,iBAAiB;kBAlB7B,SAAS;8BACC,CAAC,iBAAiB,CAAC,mBACX,uBAAuB,CAAC,MAAM,YACrC,WAAW,YAEX;;;;;;;;;;;GAWT","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 { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nimport { WattIconComponent } from '@energinet/watt/icon';\n\n@Component({\n  imports: [WattIconComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'watt-chip',\n  styleUrls: ['./watt-chip.component.scss'],\n  template: `\n    <label\n      [class.selected]=\"selected()\"\n      [class.disabled]=\"disabled()\"\n      [class.read-only]=\"readonly()\"\n    >\n      @if (selected()) {\n        <watt-icon class=\"selected-icon\" name=\"checkmark\" size=\"s\" [attr.aria-hidden]=\"true\" />\n      }\n      <ng-content />\n    </label>\n  `,\n})\nexport class WattChipComponent {\n  selected = input(false);\n  disabled = input(false);\n  readonly = input(false);\n}\n"]}

package/esm2022/chip/watt-chip.directive.js

@@ -0,0 +1,92 @@
+//#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
+import { inject, Directive, ElementRef, forwardRef, } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { WattFilterChipComponent } from './watt-filter-chip.component';
+import { WattDateChipComponent } from './watt-date-chip.component';
+import { WattDateRangeChipComponent } from './watt-date-range-chip.component';
+import * as i0 from "@angular/core";
+export 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.set(value);
+        }
+    }
+    registerOnChange(fn) {
+        this.component?.selectionChange.subscribe(fn);
+    }
+    registerOnTouched(fn) {
+        this.element.nativeElement.addEventListener('focusout', fn);
+    }
+    setDisabledState(disabled) {
+        if (this.component) {
+            this.component.disabled.set(disabled);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattFormChipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", 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: "20.3.15", 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: () => [] });
+//# sourceMappingURL=watt-chip.directive.js.map

package/esm2022/chip/watt-chip.directive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watt-chip.directive.js","sourceRoot":"","sources":["../../../../libs/watt/package/chip/watt-chip.directive.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EACL,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,GAGX,MAAM,eAAe,CAAC;AACvB,OAAO,EAAwB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,0BAA0B,EAAE,MAAM,kCAAkC,CAAC;;AA2B9E,MAAM,OAAO,qBAAqB;IACxB,UAAU,GAAG,MAAM,CAAC,uBAAuB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACzF,QAAQ,GAAG,MAAM,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACrF,aAAa,GAAG,MAAM,CAAC,0BAA0B,EAAE;QACzD,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI;QACd,IAAI,EAAE,IAAI;KACX,CAAC,CAAC;IAEK,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAC7B,SAAS,CAAY;IAE7B;QACE,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;QACnC,CAAC;aAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACzB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC;aAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC;QACtC,CAAC;IACH,CAAC;IAED,UAAU,CAAC,KAAW;QACpB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,EAAc;QAC7B,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,iBAAiB,CAAC,EAAc;QAC9B,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,gBAAgB,CAAC,QAAiB;QAChC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;wGAxCU,qBAAqB;4FAArB,qBAAqB,2RAjBrB;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC;gBACpD,KAAK,EAAE,IAAI;aACZ;SACF;;4FAWU,qBAAqB;kBAlBjC,SAAS;mBAAC;oBACT,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,sBAAsB,CAAC;4BACpD,KAAK,EAAE,IAAI;yBACZ;qBACF;oBACD,8DAA8D;oBAC9D,QAAQ,EAAE;;;;;;;GAOT;iBACF","sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport {\n  inject,\n  Directive,\n  ElementRef,\n  forwardRef,\n  ModelSignal,\n  OutputEmitterRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { WattFilterChipComponent } from './watt-filter-chip.component';\nimport { WattDateChipComponent } from './watt-date-chip.component';\nimport { WattDateRangeChipComponent } from './watt-date-range-chip.component';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\ninterface WattChip {\n  value: ModelSignal<any>;\n  disabled: ModelSignal<boolean>;\n  selectionChange: OutputEmitterRef<any>;\n}\n\n@Directive({\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattFormChipDirective),\n      multi: true,\n    },\n  ],\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  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  `,\n})\nexport class WattFormChipDirective implements ControlValueAccessor {\n  private filterChip = inject(WattFilterChipComponent, { host: true, optional: true, self: true });\n  private dateChip = inject(WattDateChipComponent, { host: true, optional: true, self: true });\n  private dateRangeChip = inject(WattDateRangeChipComponent, {\n    host: true,\n    optional: true,\n    self: true,\n  });\n\n  private element = inject(ElementRef);\n  private component?: WattChip;\n\n  constructor() {\n    if (this.filterChip) {\n      this.component = this.filterChip;\n    } else if (this.dateChip) {\n      this.component = this.dateChip;\n    } else if (this.dateRangeChip) {\n      this.component = this.dateRangeChip;\n    }\n  }\n\n  writeValue(value?: any): void {\n    if (this.component) {\n      this.component.value.set(value);\n    }\n  }\n\n  registerOnChange(fn: () => void) {\n    this.component?.selectionChange.subscribe(fn);\n  }\n\n  registerOnTouched(fn: () => void) {\n    this.element.nativeElement.addEventListener('focusout', fn);\n  }\n\n  setDisabledState(disabled: boolean) {\n    if (this.component) {\n      this.component.disabled.set(disabled);\n    }\n  }\n}\n"]}

package/esm2022/chip/watt-date-chip.component.js

@@ -0,0 +1,104 @@
+//#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
+import { input, model, output, Component, ViewEncapsulation } from '@angular/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { WattDatePipe } from '@energinet/watt/core/date';
+import { WattFieldComponent } from '@energinet/watt/field';
+import { WattMenuChipComponent } from './watt-menu-chip.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/datepicker";
+export class WattDateChipComponent {
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    selectionChange = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattDateChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattDateChipComponent, isStandalone: true, selector: "watt-date-chip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", 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"
+        (toggleChange)="picker.open()"
+      >
+        <input
+          tabindex="-1"
+          class="cdk-visually-hidden"
+          type="text"
+          [value]="value()"
+          [matDatepicker]="picker"
+          (dateChange)="value.set($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: ["toggleChange"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "pipe", type: WattDatePipe, name: "wattDate" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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"
+        (toggleChange)="picker.open()"
+      >
+        <input
+          tabindex="-1"
+          class="cdk-visually-hidden"
+          type="text"
+          [value]="value()"
+          [matDatepicker]="picker"
+          (dateChange)="value.set($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: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+//# sourceMappingURL=watt-date-chip.component.js.map

package/esm2022/chip/watt-date-chip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watt-date-chip.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/chip/watt-date-chip.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;;;AAwDnE,MAAM,OAAO,qBAAqB;IAChC,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IACxB,KAAK,GAAG,KAAK,2DAAU,CAAC;IACxB,WAAW,GAAG,KAAK,iEAAU,CAAC;IAC9B,WAAW,GAAG,KAAK,CAAC,QAAQ,sDAAe,CAAC;IAC5C,KAAK,GAAG,KAAK,CAAgB,IAAI,iDAAC,CAAC;IACnC,eAAe,GAAG,MAAM,EAAQ,CAAC;wGANtB,qBAAqB;4FAArB,qBAAqB,6zBAlCtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCT,8NAnDS,mBAAmB,+TAAE,qBAAqB,+JAAE,kBAAkB,oLAAE,YAAY;;4FAqD3E,qBAAqB;kBAtDjC,SAAS;8BACC,CAAC,mBAAmB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,YAAY,CAAC,YAC7E,gBAAgB,iBACX,iBAAiB,CAAC,IAAI,YAiB3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCT","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 { input, model, output, Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\nimport { MatDatepickerModule } from '@angular/material/datepicker';\n\nimport { WattDatePipe } from '@energinet/watt/core/date';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattMenuChipComponent } from './watt-menu-chip.component';\n\n@Component({\n  imports: [MatDatepickerModule, WattMenuChipComponent, WattFieldComponent, WattDatePipe],\n  selector: 'watt-date-chip',\n  encapsulation: ViewEncapsulation.None,\n  styles: [\n    `\n      watt-date-chip {\n        input {\n          top: 0;\n          bottom: 0;\n          height: auto;\n          visibility: hidden;\n        }\n\n        watt-field label .watt-field-wrapper {\n          background-color: transparent;\n        }\n      }\n    `,\n  ],\n  template: `\n    <mat-datepicker #picker />\n    <watt-field [control]=\"formControl()\" [chipMode]=\"true\">\n      <watt-menu-chip\n        hasPopup=\"dialog\"\n        [disabled]=\"disabled()\"\n        [selected]=\"!!value()\"\n        [opened]=\"picker.opened\"\n        (toggleChange)=\"picker.open()\"\n      >\n        <input\n          tabindex=\"-1\"\n          class=\"cdk-visually-hidden\"\n          type=\"text\"\n          [value]=\"value()\"\n          [matDatepicker]=\"picker\"\n          (dateChange)=\"value.set($event.value)\"\n          (dateChange)=\"selectionChange.emit($event.value)\"\n        />\n        {{ placeholder() }}\n        <span>\n          @if (value()) {\n            @if (placeholder()) {\n              :\n            }\n            {{ value() | wattDate }}\n          }\n        </span>\n      </watt-menu-chip>\n      <ng-content ngProjectAs=\"watt-field-hint\" select=\"watt-field-hint\" />\n      <ng-content ngProjectAs=\"watt-field-error\" select=\"watt-field-error\" />\n    </watt-field>\n  `,\n})\nexport class WattDateChipComponent {\n  disabled = model(false);\n  label = input<string>();\n  placeholder = input<string>();\n  formControl = input.required<FormControl>();\n  value = model<string | null>(null);\n  selectionChange = output<Date>();\n}\n"]}

package/esm2022/chip/watt-date-range-chip.component.js

@@ -0,0 +1,213 @@
+import { input, model, output, inject, Component, Injectable, ViewEncapsulation, } from '@angular/core';
+import { DateAdapter } from '@angular/material/core';
+import { DateRange, MatDatepickerModule, MAT_DATE_RANGE_SELECTION_STRATEGY, DefaultMatCalendarRangeStrategy, } from '@angular/material/datepicker';
+import { WattFieldComponent } from '@energinet/watt/field';
+import { WattButtonComponent } from '@energinet/watt/button';
+import { dayjs, WattDatePipe } from '@energinet/watt/core/date';
+import { WattDatepickerIntlService } from '@energinet/watt/picker/datepicker';
+import { WattMenuChipComponent } from './watt-menu-chip.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/datepicker";
+export 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: "20.3.15", ngImport: i0, type: WattDateRangeSelectionStrategy, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattDateRangeSelectionStrategy, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattDateRangeSelectionStrategy, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+export class WattDateRangeChipComponent {
+    intl = inject(WattDatepickerIntlService);
+    dateAdapter = inject(DateAdapter);
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : []));
+    placeholder = input(true, ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    showActions = input(false, ...(ngDevMode ? [{ debugName: "showActions" }] : []));
+    customSelectionStrategy = input(...(ngDevMode ? [undefined, { debugName: "customSelectionStrategy" }] : []));
+    selectionChange = output();
+    selectionStrategy() {
+        const customStrategy = this.customSelectionStrategy();
+        const strategy = new WattDateRangeSelectionStrategy(this.dateAdapter);
+        if (customStrategy)
+            strategy.setCustomSelectionStrategy(customStrategy);
+        return strategy;
+    }
+    clearInput() {
+        this.value.set(null);
+        this.selectionChange.emit(null);
+    }
+    onSelectionChange(value) {
+        if (value === null || (value?.start && value?.end)) {
+            this.selectionChange.emit(value);
+        }
+    }
+    updateStartDate(startDate) {
+        this.value.set({ start: startDate, end: null });
+    }
+    updateEndDate(endDate) {
+        const dateRange = this.value();
+        if (dateRange) {
+            this.value.set({ start: dateRange.start, end: endDate });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattDateRangeChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattDateRangeChipComponent, isStandalone: true, selector: "watt-date-range-chip", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, customSelectionStrategy: { classPropertyName: "customSelectionStrategy", publicName: "customSelectionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", selectionChange: "selectionChange" }, host: { properties: { "class.has-placeholder": "placeholder()" } }, 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"
+        (toggleChange)="picker.open()"
+      >
+        <mat-date-range-input
+          #input
+          class="cdk-visually-hidden"
+          separator=""
+          [rangePicker]="picker"
+        >
+          <input
+            type="text"
+            matStartDate
+            tabindex="-1"
+            role="none"
+            [value]="value() ? value()?.start : null"
+            (dateChange)="updateStartDate($event.value!)"
+            (dateChange)="showActions() && onSelectionChange($event.value ? input.value! : null)"
+          />
+          <input
+            type="text"
+            matEndDate
+            tabindex="-1"
+            role="none"
+            [value]="value() ? value()?.end : null"
+            (dateChange)="updateEndDate($event.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: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattMenuChipComponent, selector: "watt-menu-chip", inputs: ["opened", "disabled", "name", "value", "selected", "hasPopup"], outputs: ["toggleChange"] }, { kind: "pipe", type: WattDatePipe, name: "wattDate" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattDateRangeChipComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [
+                        MatDatepickerModule,
+                        WattDatePipe,
+                        WattFieldComponent,
+                        WattButtonComponent,
+                        WattMenuChipComponent,
+                    ], 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"
+        (toggleChange)="picker.open()"
+      >
+        <mat-date-range-input
+          #input
+          class="cdk-visually-hidden"
+          separator=""
+          [rangePicker]="picker"
+        >
+          <input
+            type="text"
+            matStartDate
+            tabindex="-1"
+            role="none"
+            [value]="value() ? value()?.start : null"
+            (dateChange)="updateStartDate($event.value!)"
+            (dateChange)="showActions() && onSelectionChange($event.value ? input.value! : null)"
+          />
+          <input
+            type="text"
+            matEndDate
+            tabindex="-1"
+            role="none"
+            [value]="value() ? value()?.end : null"
+            (dateChange)="updateEndDate($event.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>
+  `, host: {
+                        '[class.has-placeholder]': 'placeholder()',
+                    }, 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: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], customSelectionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "customSelectionStrategy", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+//# sourceMappingURL=watt-date-range-chip.component.js.map

package/esm2022/chip/watt-date-range-chip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watt-date-range-chip.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/chip/watt-date-range-chip.component.ts"],"names":[],"mappings":"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","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 { FormControl } from '@angular/forms';\nimport {\n  input,\n  model,\n  output,\n  inject,\n  Component,\n  Injectable,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DateAdapter } from '@angular/material/core';\n\nimport {\n  DateRange,\n  MatDatepickerModule,\n  MAT_DATE_RANGE_SELECTION_STRATEGY,\n  DefaultMatCalendarRangeStrategy,\n} from '@angular/material/datepicker';\n\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattButtonComponent } from '@energinet/watt/button';\nimport { dayjs, WattDatePipe, WattRange } from '@energinet/watt/core/date';\nimport { WattDatepickerIntlService } from '@energinet/watt/picker/datepicker';\n\nimport { WattMenuChipComponent } from './watt-menu-chip.component';\n\ntype customSelectionStrategy = (date: Date | null) => DateRange<Date>;\n@Injectable({\n  providedIn: 'root',\n})\nexport class WattDateRangeSelectionStrategy extends DefaultMatCalendarRangeStrategy<Date> {\n  private customSelectionStrategy!: customSelectionStrategy;\n\n  setCustomSelectionStrategy(strategy: customSelectionStrategy) {\n    this.customSelectionStrategy = strategy;\n  }\n\n  override selectionFinished(date: Date, currentRange: DateRange<Date>): DateRange<Date> {\n    let range: DateRange<Date> = super.selectionFinished(date, currentRange);\n\n    if (this.customSelectionStrategy) {\n      range = this.customSelectionStrategy(date);\n    }\n\n    return range.end ? new DateRange(range.start, dayjs(range.end).endOf('day').toDate()) : range;\n  }\n\n  override createPreview(activeDate: Date | null, currentRange: DateRange<Date>): DateRange<Date> {\n    if (!this.customSelectionStrategy) {\n      return super.createPreview(activeDate, currentRange);\n    } else {\n      return this.customSelectionStrategy(activeDate);\n    }\n  }\n}\n\n@Component({\n  imports: [\n    MatDatepickerModule,\n    WattDatePipe,\n    WattFieldComponent,\n    WattButtonComponent,\n    WattMenuChipComponent,\n  ],\n  providers: [\n    {\n      provide: MAT_DATE_RANGE_SELECTION_STRATEGY,\n      useFactory: (comp: WattDateRangeChipComponent) => comp.selectionStrategy(),\n      deps: [WattDateRangeChipComponent],\n    },\n  ],\n  selector: 'watt-date-range-chip',\n  encapsulation: ViewEncapsulation.None,\n  styles: [\n    `\n      watt-date-range-chip {\n        mat-date-range-input {\n          top: 0;\n          bottom: 0;\n          height: auto;\n          visibility: hidden;\n        }\n\n        &.has-placeholder .value::before {\n          content: ':';\n        }\n\n        watt-field label .watt-field-wrapper {\n          background-color: transparent;\n        }\n      }\n    `,\n  ],\n  template: `\n    <mat-date-range-picker #picker>\n      @if (showActions()) {\n        <mat-date-range-picker-actions>\n          <watt-button variant=\"text\" (click)=\"clearInput()\" icon=\"remove\">{{\n            intl.clear\n          }}</watt-button>\n          <watt-button variant=\"primary\" matDateRangePickerApply>{{ intl.select }}</watt-button>\n        </mat-date-range-picker-actions>\n      }\n    </mat-date-range-picker>\n\n    <watt-field [control]=\"formControl()\" [chipMode]=\"true\">\n      <watt-menu-chip\n        hasPopup=\"dialog\"\n        [disabled]=\"disabled()\"\n        [selected]=\"value()?.start && value()?.end ? true : false\"\n        [opened]=\"picker.opened\"\n        (toggleChange)=\"picker.open()\"\n      >\n        <mat-date-range-input\n          #input\n          class=\"cdk-visually-hidden\"\n          separator=\"\"\n          [rangePicker]=\"picker\"\n        >\n          <input\n            type=\"text\"\n            matStartDate\n            tabindex=\"-1\"\n            role=\"none\"\n            [value]=\"value() ? value()?.start : null\"\n            (dateChange)=\"updateStartDate($event.value!)\"\n            (dateChange)=\"showActions() && onSelectionChange($event.value ? input.value! : null)\"\n          />\n          <input\n            type=\"text\"\n            matEndDate\n            tabindex=\"-1\"\n            role=\"none\"\n            [value]=\"value() ? value()?.end : null\"\n            (dateChange)=\"updateEndDate($event.value!)\"\n            (dateChange)=\"onSelectionChange($event.value ? input.value! : null)\"\n          />\n        </mat-date-range-input>\n        <ng-content />\n        @if (value()?.start && value()?.end) {\n          <span class=\"value\">\n            {{ value() | wattDate }}\n          </span>\n        }\n      </watt-menu-chip>\n      <ng-content ngProjectAs=\"watt-field-hint\" select=\"watt-field-hint\" />\n      <ng-content ngProjectAs=\"watt-field-error\" select=\"watt-field-error\" />\n    </watt-field>\n  `,\n  host: {\n    '[class.has-placeholder]': 'placeholder()',\n  },\n})\nexport class WattDateRangeChipComponent {\n  protected intl = inject(WattDatepickerIntlService);\n  private dateAdapter = inject(DateAdapter);\n\n  disabled = model(false);\n  label = input<string>();\n  value = model<WattRange<Date> | null>(null);\n  formControl = input.required<FormControl>();\n  placeholder = input(true);\n  showActions = input(false);\n  customSelectionStrategy = input<(date: Date | null) => DateRange<Date>>();\n\n  selectionChange = output<WattRange<Date> | null>();\n\n  selectionStrategy() {\n    const customStrategy = this.customSelectionStrategy();\n    const strategy = new WattDateRangeSelectionStrategy(this.dateAdapter);\n    if (customStrategy) strategy.setCustomSelectionStrategy(customStrategy);\n    return strategy;\n  }\n\n  clearInput() {\n    this.value.set(null);\n    this.selectionChange.emit(null);\n  }\n\n  onSelectionChange(value: WattRange<Date> | null) {\n    if (value === null || (value?.start && value?.end)) {\n      this.selectionChange.emit(value);\n    }\n  }\n\n  updateStartDate(startDate: Date) {\n    this.value.set({ start: startDate, end: null });\n  }\n\n  updateEndDate(endDate: Date | null) {\n    const dateRange = this.value();\n    if (dateRange) {\n      this.value.set({ start: dateRange.start, end: endDate });\n    }\n  }\n}\n"]}

package/esm2022/chip/watt-filter-chip.component.js

@@ -0,0 +1,82 @@
+//#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
+import { Component, input, model, output } from '@angular/core';
+import { WattChipComponent } from './watt-chip.component';
+import * as i0 from "@angular/core";
+function isFirstRender() {
+    let isFirstRender = true;
+    return () => {
+        if (!isFirstRender)
+            return false;
+        isFirstRender = false;
+        return true;
+    };
+}
+export class WattFilterChipComponent {
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
+    value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+    choice = input(...(ngDevMode ? [undefined, { debugName: "choice" }] : []));
+    selectionChange = output();
+    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: "20.3.15", ngImport: i0, type: WattFilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: WattFilterChipComponent, isStandalone: true, selector: "watt-filter-chip", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, choice: { classPropertyName: "choice", publicName: "choice", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", 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: "20.3.15", 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: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], choice: [{ type: i0.Input, args: [{ isSignal: true, alias: "choice", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+//# sourceMappingURL=watt-filter-chip.component.js.map

package/esm2022/chip/watt-filter-chip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watt-filter-chip.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/chip/watt-filter-chip.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;;AAE1D,SAAS,aAAa;IACpB,IAAI,aAAa,GAAG,IAAI,CAAC;IACzB,OAAO,GAAG,EAAE;QACV,IAAI,CAAC,aAAa;YAAE,OAAO,KAAK,CAAC;QACjC,aAAa,GAAG,KAAK,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC;AAqBD,MAAM,OAAO,uBAAuB;IAClC,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IACxB,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IACxB,IAAI,GAAG,KAAK,0DAAU,CAAC;IACvB,KAAK,GAAG,KAAK,2DAAK,CAAC;IACnB,MAAM,GAAG,KAAK,4DAAU,CAAC;IACzB,eAAe,GAAG,MAAM,EAAK,CAAC;IAC9B,aAAa,GAAG,aAAa,EAAE,CAAC;IAEhC,QAAQ,CAAC,KAAuB;QAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;QACxE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAU,CAAC,CAAC;IACxC,CAAC;wGAZU,uBAAuB;4FAAvB,uBAAuB,qyBAhBxB;;;;;;;;;;;;;;GAcT,4DAhBS,iBAAiB;;4FAkBhB,uBAAuB;kBAnBnC,SAAS;mBAAC;oBACT,OAAO,EAAE,CAAC,iBAAiB,CAAC;oBAC5B,QAAQ,EAAE,kBAAkB;oBAC5B,QAAQ,EAAE;;;;;;;;;;;;;;GAcT;iBACF","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 { Component, input, model, output } from '@angular/core';\n\nimport { WattChipComponent } from './watt-chip.component';\n\nfunction isFirstRender() {\n  let isFirstRender = true;\n  return () => {\n    if (!isFirstRender) return false;\n    isFirstRender = false;\n    return true;\n  };\n}\n\n@Component({\n  imports: [WattChipComponent],\n  selector: 'watt-filter-chip',\n  template: `\n    <watt-chip [disabled]=\"disabled()\" [selected]=\"isFirstRender() ? selected() : input.checked\">\n      <input\n        #input\n        class=\"cdk-visually-hidden\"\n        [type]=\"choice() === undefined ? 'checkbox' : 'radio'\"\n        [name]=\"name()\"\n        [value]=\"value()\"\n        [checked]=\"selected()\"\n        [disabled]=\"disabled()\"\n        (change)=\"onChange(input)\"\n      />\n      <ng-content />\n    </watt-chip>\n  `,\n})\nexport class WattFilterChipComponent<T = string> {\n  selected = input(false);\n  disabled = model(false);\n  name = input<string>();\n  value = model<T>();\n  choice = input<string>();\n  selectionChange = output<T>();\n  isFirstRender = isFirstRender();\n\n  onChange(input: HTMLInputElement): void {\n    const value = this.choice() !== undefined ? input.value : input.checked;\n    this.selectionChange.emit(value as T);\n  }\n}\n"]}