@energinet/watt 4.2.4 → 4.2.5

package/esm2022/picker/timepicker/watt-timepicker.component.js

@@ -195,10 +195,10 @@ export class WattTimepickerComponent extends WattPickerBase {
             endInput.value = end;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: WattTimepickerComponent, isStandalone: true, selector: "watt-timepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sliderLabel: { classPropertyName: "sliderLabel", publicName: "sliderLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-owns": "this.ariaOwns" } }, providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }], viewQueries: [{ propertyName: "input", first: true, predicate: ["timeInput"], descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startTimeInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endTimeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<watt-field [id]=\"id\" [control]=\"control\" [label]=\"label()\">\n  @if (!range) {\n    <input\n      inert\n      matInput\n      aria-label=\"time-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"disabled\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"inputMask\"\n      [placeholder]=\"hoursMinutesPlaceholder\"\n      (maskApplied)=\"inputChanged($event)\"\n    />\n  } @else {\n    <mat-date-range-input\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [disabled]=\"disabled\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      <input\n        inert\n        aria-label=\"start-time-input\"\n        matStartDate\n        #startTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n      <input\n        inert\n        aria-label=\"end-time-input\"\n        matEndDate\n        #endTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n    </mat-date-range-input>\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"rangeInputMask\"\n      [placeholder]=\"rangePlaceholder\"\n      (maskApplied)=\"rangeInputChanged($event)\"\n    />\n\n    <watt-button\n      variant=\"icon\"\n      icon=\"time\"\n      [disabled]=\"disabled\"\n      [attr.aria-pressed]=\"sliderOpen\"\n      (click)=\"toggleSlider()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"sliderOpen\"\n      [cdkConnectedOverlayOffsetY]=\"12\"\n    >\n      <div\n        [id]=\"sliderId\"\n        role=\"dialog\"\n        class=\"watt-timepicker-slider\"\n        tabindex=\"-1\"\n        (focusin)=\"onFocusIn()\"\n        (focusout)=\"onFocusOut($event)\"\n      >\n        <span class=\"watt-label\">{{ sliderLabel() }}</span>\n        <watt-slider\n          [min]=\"sliderSteps[0]\"\n          [max]=\"sliderSteps[sliderSteps.length - 1]\"\n          [step]=\"1\"\n          [value]=\"sliderValue\"\n          (valueChange)=\"sliderChange$.next($event)\"\n        />\n      </div>\n    </ng-template>\n  }\n\n  <ng-content />\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", styles: ["watt-timepicker{display:flex;align-items:center;width:100%}watt-timepicker watt-button[variant=icon]{margin-left:auto}watt-timepicker watt-button[variant=icon] .watt-button--icon{height:42px}watt-timepicker mat-datepicker,watt-timepicker mat-date-range-picker{display:none}watt-timepicker input.mat-date-range-input-inner,watt-timepicker input.mat-mdc-input-element,watt-timepicker .mat-date-range-input-mirror,watt-timepicker input.mask-input{font-family:Droid Sans Mono,monospace}watt-timepicker input.mat-date-range-input-inner,watt-timepicker input.mat-mdc-input-element,watt-timepicker input.mask-input{border:none;caret-color:var(--watt-color-neutral-black);letter-spacing:-.03em;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;color:transparent}watt-timepicker input.mask-input{color:#000}watt-timepicker input.mask-input{position:absolute;min-width:100%;padding:2px 1px}watt-timepicker input.mask-input:focus-visible{outline:none}watt-timepicker .mat-date-range-input-container{align-items:initial}watt-timepicker .mat-date-range-input-start-wrapper,watt-timepicker .mat-date-range-input-end-wrapper{max-width:calc(50% - var(--watt-space-s));overflow:visible;position:relative}watt-timepicker .mat-date-range-input-separator{display:flex;align-items:center}watt-timepicker .mat-date-range-input-separator-hidden,watt-timepicker .mat-date-range-input-separator{opacity:0!important}watt-timepicker .mat-date-range-input-inner::-webkit-input-placeholder{color:var(--watt-color-neutral-grey-500)!important;-webkit-text-fill-color:var(--watt-color-neutral-grey-500)}.watt-timepicker-slider{width:340px;padding:var(--watt-space-s) 12px var(--watt-space-m);background:var(--watt-color-neutral-white);box-shadow:0 1px 6px #0b3c5d1f,0 4px 18px 3px #2e323414;border-radius:3px}\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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattSliderComponent, selector: "watt-slider", inputs: ["min", "max", "step", "value"], outputs: ["valueChange"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: WattPlaceholderMaskComponent, selector: "watt-placeholder-mask", inputs: ["primaryInputElement", "secondaryInputElement", "mask", "placeholder"], outputs: ["maskApplied"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattTimepickerComponent, isStandalone: true, selector: "watt-timepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, sliderLabel: { classPropertyName: "sliderLabel", publicName: "sliderLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-owns": "this.ariaOwns" } }, providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }], viewQueries: [{ propertyName: "input", first: true, predicate: ["timeInput"], descendants: true, isSignal: true }, { propertyName: "startInput", first: true, predicate: ["startTimeInput"], descendants: true, isSignal: true }, { propertyName: "endInput", first: true, predicate: ["endTimeInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<watt-field [id]=\"id\" [control]=\"control\" [label]=\"label()\">\n  @if (!range) {\n    <input\n      inert\n      matInput\n      aria-label=\"time-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"disabled\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"inputMask\"\n      [placeholder]=\"hoursMinutesPlaceholder\"\n      (maskApplied)=\"inputChanged($event)\"\n    />\n  } @else {\n    <mat-date-range-input\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [disabled]=\"disabled\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      <input\n        inert\n        aria-label=\"start-time-input\"\n        matStartDate\n        #startTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n      <input\n        inert\n        aria-label=\"end-time-input\"\n        matEndDate\n        #endTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n    </mat-date-range-input>\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"rangeInputMask\"\n      [placeholder]=\"rangePlaceholder\"\n      (maskApplied)=\"rangeInputChanged($event)\"\n    />\n\n    <watt-button\n      variant=\"icon\"\n      icon=\"time\"\n      [disabled]=\"disabled\"\n      [attr.aria-pressed]=\"sliderOpen\"\n      (click)=\"toggleSlider()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"sliderOpen\"\n      [cdkConnectedOverlayOffsetY]=\"12\"\n    >\n      <div\n        [id]=\"sliderId\"\n        role=\"dialog\"\n        class=\"watt-timepicker-slider\"\n        tabindex=\"-1\"\n        (focusin)=\"onFocusIn()\"\n        (focusout)=\"onFocusOut($event)\"\n      >\n        <span class=\"watt-label\">{{ sliderLabel() }}</span>\n        <watt-slider\n          [min]=\"sliderSteps[0]\"\n          [max]=\"sliderSteps[sliderSteps.length - 1]\"\n          [step]=\"1\"\n          [value]=\"sliderValue\"\n          (valueChange)=\"sliderChange$.next($event)\"\n        />\n      </div>\n    </ng-template>\n  }\n\n  <ng-content />\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", styles: ["watt-timepicker{display:flex;align-items:center;width:100%}watt-timepicker watt-button[variant=icon]{margin-left:auto}watt-timepicker watt-button[variant=icon] .watt-button--icon{height:42px}watt-timepicker mat-datepicker,watt-timepicker mat-date-range-picker{display:none}watt-timepicker input.mat-date-range-input-inner,watt-timepicker input.mat-mdc-input-element,watt-timepicker .mat-date-range-input-mirror,watt-timepicker input.mask-input{font-family:Droid Sans Mono,monospace}watt-timepicker input.mat-date-range-input-inner,watt-timepicker input.mat-mdc-input-element,watt-timepicker input.mask-input{border:none;caret-color:var(--watt-color-neutral-black);letter-spacing:-.03em;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;color:transparent}watt-timepicker input.mask-input{color:#000}watt-timepicker input.mask-input{position:absolute;min-width:100%;padding:2px 1px}watt-timepicker input.mask-input:focus-visible{outline:none}watt-timepicker .mat-date-range-input-container{align-items:initial}watt-timepicker .mat-date-range-input-start-wrapper,watt-timepicker .mat-date-range-input-end-wrapper{max-width:calc(50% - var(--watt-space-s));overflow:visible;position:relative}watt-timepicker .mat-date-range-input-separator{display:flex;align-items:center}watt-timepicker .mat-date-range-input-separator-hidden,watt-timepicker .mat-date-range-input-separator{opacity:0!important}watt-timepicker .mat-date-range-input-inner::-webkit-input-placeholder{color:var(--watt-color-neutral-grey-500)!important;-webkit-text-fill-color:var(--watt-color-neutral-grey-500)}.watt-timepicker-slider{width:340px;padding:var(--watt-space-s) 12px var(--watt-space-m);background:var(--watt-color-neutral-white);box-shadow:0 1px 6px #0b3c5d1f,0 4px 18px 3px #2e323414;border-radius:3px}\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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: WattButtonComponent, selector: "watt-button", inputs: ["icon", "variant", "size", "type", "formId", "disabled", "loading"] }, { kind: "component", type: WattSliderComponent, selector: "watt-slider", inputs: ["min", "max", "step", "value"], outputs: ["valueChange"] }, { kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }, { kind: "component", type: WattPlaceholderMaskComponent, selector: "watt-placeholder-mask", inputs: ["primaryInputElement", "secondaryInputElement", "mask", "placeholder"], outputs: ["maskApplied"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattTimepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'watt-timepicker', providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }], encapsulation: ViewEncapsulation.None, imports: [
                         MatDatepickerModule,

package/esm2022/picker/timepicker/watt-timepicker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-timepicker.component.js","sourceRoot":"","sources":["../../../../../libs/watt/package/picker/timepicker/watt-timepicker.component.ts","../../../../../libs/watt/package/picker/timepicker/watt-timepicker.component.html"],"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 { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  ElementRef,\n  HostBinding,\n  ViewEncapsulation,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldControl } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { Subject } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { maskitoTimeOptionsGenerator } from '@maskito/kit';\n\nimport { WattButtonComponent } from '@energinet/watt/button';\nimport { WattDateRange } from '@energinet/watt/core/date';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattSliderComponent, WattSliderValue } from '@energinet/watt/slider';\n\nimport { maskitoTimeRangeOptionsGenerator } from './maskito-time-range-mask';\nimport {\n  WattPickerBase,\n  WattPickerValue,\n  WattPlaceholderMaskComponent,\n} from '@energinet/watt/picker/__shared';\n\n// Constants for working with time intervals\nconst minutesInADay = 24 * 60;\nconst quartersInADay = minutesInADay / 15;\n\n// Show slider initially as \"00:00 - 23:59\"\nconst initialSliderValue: WattSliderValue = { min: 0, max: minutesInADay - 1 };\n\n/** Converts string time format (HH:MM) to number of minutes. */\nfunction timeToMinutes(value: string): number {\n  const [hours, minutes] = value.split(':');\n  return Number(hours) * 60 + Number(minutes);\n}\n\n/** Converts number of minutes to string time format (HH:MM). */\nfunction minutesToTime(value: number): string {\n  const hours = `${Math.floor(value / 60)}`;\n  const minutes = `${value % 60}`;\n  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;\n}\n/**\n * Usage:\n * `import { WattTimepickerComponent } from '@energinet/watt/timepicker';`\n *\n * IMPORTANT:\n * The styling is calculated based on our monospaced font.\n */\n@Component({\n  selector: 'watt-timepicker',\n  templateUrl: './watt-timepicker.component.html',\n  styleUrls: ['./watt-timepicker.component.scss'],\n  providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }],\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    MatDatepickerModule,\n    MatInputModule,\n    OverlayModule,\n\n    WattButtonComponent,\n    WattSliderComponent,\n    WattFieldComponent,\n    WattPlaceholderMaskComponent,\n  ],\n})\nexport class WattTimepickerComponent extends WattPickerBase {\n  protected override elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected override changeDetectionRef = inject(ChangeDetectorRef);\n  protected override ngControl = inject(NgControl, { optional: true, self: true });\n  label = input('');\n  /**\n   * Text to display on label for time range slider.\n   */\n  sliderLabel = input('');\n\n  override input = viewChild<ElementRef<HTMLInputElement>>('timeInput');\n  override startInput = viewChild<ElementRef<HTMLInputElement>>('startTimeInput');\n  override endInput = viewChild<ElementRef<HTMLInputElement>>('endTimeInput');\n\n  sliderId = `${this.id}-slider`;\n\n  /**\n   * Used for defining a relationship between the time picker and\n   * the slider overlay (since the DOM hierarchy cannot be used).\n   * @ignore\n   */\n  @HostBinding('attr.aria-owns')\n  get ariaOwns() {\n    // Only range input has slider\n    return this.range && this.sliderOpen ? this.sliderId : undefined;\n  }\n  hoursMinutesPlaceholder = 'HH:MM';\n  rangeSeparator = ' - ';\n  rangePlaceholder =\n    this.hoursMinutesPlaceholder + this.rangeSeparator + this.hoursMinutesPlaceholder;\n  protected _placeholder = this.hoursMinutesPlaceholder;\n\n  /**\n   * Whether the slider is open.\n   * @ignore\n   */\n  sliderOpen = false;\n\n  sliderSteps = [...Array(quartersInADay).keys()].map((x) => x * 15).concat(minutesInADay - 1);\n\n  sliderChange$ = new Subject<WattSliderValue>();\n\n  get sliderValue(): WattSliderValue {\n    if (this.value?.start && this.value?.end) {\n      return {\n        min: timeToMinutes(this.value.start),\n        max: timeToMinutes(this.value.end),\n      };\n    }\n\n    // Retain last slider value if input value is incomplete\n    return initialSliderValue;\n  }\n\n  /**\n   * Toggles the visibility of the slider overlay.\n   * @ignore\n   */\n  toggleSlider() {\n    this.sliderOpen = !this.sliderOpen;\n  }\n\n  /**\n   * Override to automatically close the slider overlay on blur.\n   * @ignore\n   */\n  override onFocusOut(event: FocusEvent) {\n    super.onFocusOut(event);\n    if (!this.focused) this.sliderOpen = false;\n  }\n\n  inputMask = maskitoTimeOptionsGenerator({ mode: 'HH:MM' });\n  rangeInputMask = maskitoTimeRangeOptionsGenerator();\n  override destroyRef = inject(DestroyRef);\n\n  constructor() {\n    super(`watt-timepicker-${WattTimepickerComponent.nextId++}`);\n  }\n\n  protected initSingleInput() {\n    const input = this.input();\n    if (this.initialValue && input) {\n      (input.nativeElement as HTMLInputElement).value = this.initialValue as string;\n      input.nativeElement.dispatchEvent(new InputEvent('input'));\n    }\n  }\n\n  inputChanged(value: string) {\n    const time = value.slice(0, this.hoursMinutesPlaceholder.length);\n    if (time.length === 0) {\n      this.control?.setValue(null);\n      return;\n    }\n    if (time.length !== this.hoursMinutesPlaceholder.length) {\n      return;\n    }\n    this.control?.setValue(time);\n  }\n\n  rangeInputChanged(value: string) {\n    const start = value.slice(0, this.hoursMinutesPlaceholder.length);\n    if (start.length !== this.hoursMinutesPlaceholder.length) {\n      this.control?.setValue({ start: '', end: '' });\n      return;\n    }\n    if (value.length < this.rangePlaceholder.length) {\n      this.control?.setValue({ start, end: '' });\n      return;\n    }\n    let end = value.slice(this.hoursMinutesPlaceholder.length + this.rangeSeparator.length);\n    if (timeToMinutes(end) > timeToMinutes(start)) {\n      this.control?.setValue({ start, end });\n    } else {\n      end = minutesToTime(timeToMinutes(start) + 1);\n      this.setRangeValueAndNotify(start, end);\n    }\n  }\n\n  protected initRangeInput() {\n    if (this.initialValue) {\n      const { start, end } = this.initialValue as WattDateRange;\n      this.setRangeValueAndNotify(start, end);\n    } else {\n      this.control?.setValue({ start: '', end: '' });\n    }\n    this.sliderChange$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((sliderValue) => {\n      const start = minutesToTime(sliderValue.min);\n      const end = minutesToTime(sliderValue.max);\n      if (end > start) {\n        this.setRangeValueAndNotify(start, end);\n      }\n    });\n  }\n\n  setRangeValueAndNotify(start: string, end: string | null) {\n    this.control?.setValue({ start, end });\n    const input = this.input();\n    if (!input) return;\n    (input.nativeElement as HTMLInputElement).value = start + this.rangeSeparator + end;\n    input.nativeElement.dispatchEvent(new InputEvent('input'));\n  }\n\n  protected setSingleValue(\n    value: Exclude<WattPickerValue, WattDateRange>,\n    input: HTMLInputElement\n  ) {\n    input.value = value ?? '';\n  }\n\n  protected setRangeValue(\n    value: WattDateRange,\n    startInput: HTMLInputElement,\n    endInput: HTMLInputElement\n  ) {\n    const { start, end } = value;\n\n    if (start) {\n      startInput.value = start;\n    }\n\n    if (end) {\n      endInput.value = end;\n    }\n  }\n}\n","<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<watt-field [id]=\"id\" [control]=\"control\" [label]=\"label()\">\n  @if (!range) {\n    <input\n      inert\n      matInput\n      aria-label=\"time-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"disabled\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"inputMask\"\n      [placeholder]=\"hoursMinutesPlaceholder\"\n      (maskApplied)=\"inputChanged($event)\"\n    />\n  } @else {\n    <mat-date-range-input\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [disabled]=\"disabled\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      <input\n        inert\n        aria-label=\"start-time-input\"\n        matStartDate\n        #startTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n      <input\n        inert\n        aria-label=\"end-time-input\"\n        matEndDate\n        #endTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n    </mat-date-range-input>\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"rangeInputMask\"\n      [placeholder]=\"rangePlaceholder\"\n      (maskApplied)=\"rangeInputChanged($event)\"\n    />\n\n    <watt-button\n      variant=\"icon\"\n      icon=\"time\"\n      [disabled]=\"disabled\"\n      [attr.aria-pressed]=\"sliderOpen\"\n      (click)=\"toggleSlider()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"sliderOpen\"\n      [cdkConnectedOverlayOffsetY]=\"12\"\n    >\n      <div\n        [id]=\"sliderId\"\n        role=\"dialog\"\n        class=\"watt-timepicker-slider\"\n        tabindex=\"-1\"\n        (focusin)=\"onFocusIn()\"\n        (focusout)=\"onFocusOut($event)\"\n      >\n        <span class=\"watt-label\">{{ sliderLabel() }}</span>\n        <watt-slider\n          [min]=\"sliderSteps[0]\"\n          [max]=\"sliderSteps[sliderSteps.length - 1]\"\n          [step]=\"1\"\n          [value]=\"sliderValue\"\n          (valueChange)=\"sliderChange$.next($event)\"\n        />\n      </div>\n    </ng-template>\n  }\n\n  <ng-content />\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"]}
+{"version":3,"file":"watt-timepicker.component.js","sourceRoot":"","sources":["../../../../../libs/watt/package/picker/timepicker/watt-timepicker.component.ts","../../../../../libs/watt/package/picker/timepicker/watt-timepicker.component.html"],"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 { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  ElementRef,\n  HostBinding,\n  ViewEncapsulation,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldControl } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { Subject } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { maskitoTimeOptionsGenerator } from '@maskito/kit';\n\nimport { WattButtonComponent } from '@energinet/watt/button';\nimport { WattDateRange } from '@energinet/watt/core/date';\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattSliderComponent, WattSliderValue } from '@energinet/watt/slider';\n\nimport { maskitoTimeRangeOptionsGenerator } from './maskito-time-range-mask';\nimport {\n  WattPickerBase,\n  WattPickerValue,\n  WattPlaceholderMaskComponent,\n} from '@energinet/watt/picker/__shared';\n\n// Constants for working with time intervals\nconst minutesInADay = 24 * 60;\nconst quartersInADay = minutesInADay / 15;\n\n// Show slider initially as \"00:00 - 23:59\"\nconst initialSliderValue: WattSliderValue = { min: 0, max: minutesInADay - 1 };\n\n/** Converts string time format (HH:MM) to number of minutes. */\nfunction timeToMinutes(value: string): number {\n  const [hours, minutes] = value.split(':');\n  return Number(hours) * 60 + Number(minutes);\n}\n\n/** Converts number of minutes to string time format (HH:MM). */\nfunction minutesToTime(value: number): string {\n  const hours = `${Math.floor(value / 60)}`;\n  const minutes = `${value % 60}`;\n  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;\n}\n/**\n * Usage:\n * `import { WattTimepickerComponent } from '@energinet/watt/timepicker';`\n *\n * IMPORTANT:\n * The styling is calculated based on our monospaced font.\n */\n@Component({\n  selector: 'watt-timepicker',\n  templateUrl: './watt-timepicker.component.html',\n  styleUrls: ['./watt-timepicker.component.scss'],\n  providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }],\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    MatDatepickerModule,\n    MatInputModule,\n    OverlayModule,\n\n    WattButtonComponent,\n    WattSliderComponent,\n    WattFieldComponent,\n    WattPlaceholderMaskComponent,\n  ],\n})\nexport class WattTimepickerComponent extends WattPickerBase {\n  protected override elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n  protected override changeDetectionRef = inject(ChangeDetectorRef);\n  protected override ngControl = inject(NgControl, { optional: true, self: true });\n  label = input('');\n  /**\n   * Text to display on label for time range slider.\n   */\n  sliderLabel = input('');\n\n  override input = viewChild<ElementRef<HTMLInputElement>>('timeInput');\n  override startInput = viewChild<ElementRef<HTMLInputElement>>('startTimeInput');\n  override endInput = viewChild<ElementRef<HTMLInputElement>>('endTimeInput');\n\n  sliderId = `${this.id}-slider`;\n\n  /**\n   * Used for defining a relationship between the time picker and\n   * the slider overlay (since the DOM hierarchy cannot be used).\n   * @ignore\n   */\n  @HostBinding('attr.aria-owns')\n  get ariaOwns() {\n    // Only range input has slider\n    return this.range && this.sliderOpen ? this.sliderId : undefined;\n  }\n  hoursMinutesPlaceholder = 'HH:MM';\n  rangeSeparator = ' - ';\n  rangePlaceholder =\n    this.hoursMinutesPlaceholder + this.rangeSeparator + this.hoursMinutesPlaceholder;\n  protected _placeholder = this.hoursMinutesPlaceholder;\n\n  /**\n   * Whether the slider is open.\n   * @ignore\n   */\n  sliderOpen = false;\n\n  sliderSteps = [...Array(quartersInADay).keys()].map((x) => x * 15).concat(minutesInADay - 1);\n\n  sliderChange$ = new Subject<WattSliderValue>();\n\n  get sliderValue(): WattSliderValue {\n    if (this.value?.start && this.value?.end) {\n      return {\n        min: timeToMinutes(this.value.start),\n        max: timeToMinutes(this.value.end),\n      };\n    }\n\n    // Retain last slider value if input value is incomplete\n    return initialSliderValue;\n  }\n\n  /**\n   * Toggles the visibility of the slider overlay.\n   * @ignore\n   */\n  toggleSlider() {\n    this.sliderOpen = !this.sliderOpen;\n  }\n\n  /**\n   * Override to automatically close the slider overlay on blur.\n   * @ignore\n   */\n  override onFocusOut(event: FocusEvent) {\n    super.onFocusOut(event);\n    if (!this.focused) this.sliderOpen = false;\n  }\n\n  inputMask = maskitoTimeOptionsGenerator({ mode: 'HH:MM' });\n  rangeInputMask = maskitoTimeRangeOptionsGenerator();\n  override destroyRef = inject(DestroyRef);\n\n  constructor() {\n    super(`watt-timepicker-${WattTimepickerComponent.nextId++}`);\n  }\n\n  protected initSingleInput() {\n    const input = this.input();\n    if (this.initialValue && input) {\n      (input.nativeElement as HTMLInputElement).value = this.initialValue as string;\n      input.nativeElement.dispatchEvent(new InputEvent('input'));\n    }\n  }\n\n  inputChanged(value: string) {\n    const time = value.slice(0, this.hoursMinutesPlaceholder.length);\n    if (time.length === 0) {\n      this.control?.setValue(null);\n      return;\n    }\n    if (time.length !== this.hoursMinutesPlaceholder.length) {\n      return;\n    }\n    this.control?.setValue(time);\n  }\n\n  rangeInputChanged(value: string) {\n    const start = value.slice(0, this.hoursMinutesPlaceholder.length);\n    if (start.length !== this.hoursMinutesPlaceholder.length) {\n      this.control?.setValue({ start: '', end: '' });\n      return;\n    }\n    if (value.length < this.rangePlaceholder.length) {\n      this.control?.setValue({ start, end: '' });\n      return;\n    }\n    let end = value.slice(this.hoursMinutesPlaceholder.length + this.rangeSeparator.length);\n    if (timeToMinutes(end) > timeToMinutes(start)) {\n      this.control?.setValue({ start, end });\n    } else {\n      end = minutesToTime(timeToMinutes(start) + 1);\n      this.setRangeValueAndNotify(start, end);\n    }\n  }\n\n  protected initRangeInput() {\n    if (this.initialValue) {\n      const { start, end } = this.initialValue as WattDateRange;\n      this.setRangeValueAndNotify(start, end);\n    } else {\n      this.control?.setValue({ start: '', end: '' });\n    }\n    this.sliderChange$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((sliderValue) => {\n      const start = minutesToTime(sliderValue.min);\n      const end = minutesToTime(sliderValue.max);\n      if (end > start) {\n        this.setRangeValueAndNotify(start, end);\n      }\n    });\n  }\n\n  setRangeValueAndNotify(start: string, end: string | null) {\n    this.control?.setValue({ start, end });\n    const input = this.input();\n    if (!input) return;\n    (input.nativeElement as HTMLInputElement).value = start + this.rangeSeparator + end;\n    input.nativeElement.dispatchEvent(new InputEvent('input'));\n  }\n\n  protected setSingleValue(\n    value: Exclude<WattPickerValue, WattDateRange>,\n    input: HTMLInputElement\n  ) {\n    input.value = value ?? '';\n  }\n\n  protected setRangeValue(\n    value: WattDateRange,\n    startInput: HTMLInputElement,\n    endInput: HTMLInputElement\n  ) {\n    const { start, end } = value;\n\n    if (start) {\n      startInput.value = start;\n    }\n\n    if (end) {\n      endInput.value = end;\n    }\n  }\n}\n","<!--\n@license\nCopyright 2020 Energinet DataHub A/S\n\nLicensed under the Apache License, Version 2.0 (the \"License2\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n-->\n<watt-field [id]=\"id\" [control]=\"control\" [label]=\"label()\">\n  @if (!range) {\n    <input\n      inert\n      matInput\n      aria-label=\"time-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [disabled]=\"disabled\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"inputMask\"\n      [placeholder]=\"hoursMinutesPlaceholder\"\n      (maskApplied)=\"inputChanged($event)\"\n    />\n  } @else {\n    <mat-date-range-input\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [disabled]=\"disabled\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    >\n      <input\n        inert\n        aria-label=\"start-time-input\"\n        matStartDate\n        #startTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n      <input\n        inert\n        aria-label=\"end-time-input\"\n        matEndDate\n        #endTimeInput\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n      />\n    </mat-date-range-input>\n    <input #timeInput class=\"mask-input\" [disabled]=\"disabled\" />\n    <watt-placeholder-mask\n      [primaryInputElement]=\"timeInput\"\n      [mask]=\"rangeInputMask\"\n      [placeholder]=\"rangePlaceholder\"\n      (maskApplied)=\"rangeInputChanged($event)\"\n    />\n\n    <watt-button\n      variant=\"icon\"\n      icon=\"time\"\n      [disabled]=\"disabled\"\n      [attr.aria-pressed]=\"sliderOpen\"\n      (click)=\"toggleSlider()\"\n      (focusin)=\"onFocusIn()\"\n      (focusout)=\"onFocusOut($event)\"\n    />\n\n    <ng-template\n      cdkConnectedOverlay\n      [cdkConnectedOverlayOrigin]=\"trigger\"\n      [cdkConnectedOverlayOpen]=\"sliderOpen\"\n      [cdkConnectedOverlayOffsetY]=\"12\"\n    >\n      <div\n        [id]=\"sliderId\"\n        role=\"dialog\"\n        class=\"watt-timepicker-slider\"\n        tabindex=\"-1\"\n        (focusin)=\"onFocusIn()\"\n        (focusout)=\"onFocusOut($event)\"\n      >\n        <span class=\"watt-label\">{{ sliderLabel() }}</span>\n        <watt-slider\n          [min]=\"sliderSteps[0]\"\n          [max]=\"sliderSteps[sliderSteps.length - 1]\"\n          [step]=\"1\"\n          [value]=\"sliderValue\"\n          (valueChange)=\"sliderChange$.next($event)\"\n        />\n      </div>\n    </ng-template>\n  }\n\n  <ng-content />\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"]}

package/esm2022/progress-tracker/watt-progress-tracker-step.component.js

@@ -26,8 +26,8 @@ export class WattProgressTrackerStepComponent {
     current = input(false, ...(ngDevMode ? [{ debugName: "current" }] : []));
     ariaCurrent = computed(() => (this.current() ? 'step' : false), ...(ngDevMode ? [{ debugName: "ariaCurrent" }] : []));
     class = computed(() => `watt-progress-tracker-step-${this.status()}`, ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattProgressTrackerStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: WattProgressTrackerStepComponent, isStandalone: true, selector: "watt-progress-tracker-step", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "current() ? \"status\" : \"presentation\"", "attr.class": "class()", "attr.aria-current": "ariaCurrent()", "attr.aria-label": "label()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattProgressTrackerStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattProgressTrackerStepComponent, isStandalone: true, selector: "watt-progress-tracker-step", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "current() ? \"status\" : \"presentation\"", "attr.class": "class()", "attr.aria-current": "ariaCurrent()", "attr.aria-label": "label()" } }, ngImport: i0, template: `
     <div class="watt-progress-tracker-step-icon">
       @switch (status()) {
         @case ('running') {
@@ -50,7 +50,7 @@ export class WattProgressTrackerStepComponent {
     <div class="watt-progress-tracker-step-text"><ng-content /></div>
   `, isInline: true, styles: [".watt-progress-tracker-step-pending{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-600);--watt-progress-tracker-step-bridge-color: var(--watt-color-neutral-grey-600);--watt-progress-tracker-step-fill-color: transparent}.watt-progress-tracker-step-running{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-900);--watt-progress-tracker-step-bridge-color: var(--watt-color-primary);--watt-progress-tracker-step-fill-color: transparent}.watt-progress-tracker-step-skipped{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-400);--watt-progress-tracker-step-bridge-color: var(--watt-color-neutral-grey-400);--watt-progress-tracker-step-fill-color: transparent}.watt-progress-tracker-step-canceled{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-600);--watt-progress-tracker-step-icon-color: var(--watt-color-neutral-white);--watt-progress-tracker-step-bridge-color: var(--watt-color-neutral-grey-600);--watt-progress-tracker-step-fill-color: var(--watt-color-neutral-grey-600)}.watt-progress-tracker-step-failed{--watt-progress-tracker-step-text-color: var(--watt-color-state-danger);--watt-progress-tracker-step-icon-color: var(--watt-color-neutral-white);--watt-progress-tracker-step-bridge-color: var(--watt-color-state-danger);--watt-progress-tracker-step-fill-color: var(--watt-color-state-danger)}.watt-progress-tracker-step-succeeded{--watt-progress-tracker-step-text-color: var(--watt-color-neutral-grey-900);--watt-progress-tracker-step-icon-color: var(--watt-color-neutral-white);--watt-progress-tracker-step-bridge-color: var(--watt-color-primary);--watt-progress-tracker-step-fill-color: var(--watt-color-primary)}watt-progress-tracker-step{display:contents;--watt-progress-tracker-step-icon-color: var(--watt-progress-tracker-step-text-color)}watt-progress-tracker-step:not(:first-child):before{content:\"\";display:block;width:100%;min-width:var(--watt-space-m);height:1px;margin:0 var(--watt-space-s);background-color:var(--watt-progress-tracker-step-bridge-color)}.watt-progress-tracker-step-icon{display:flex;align-items:center;justify-content:center;width:var(--watt-space-ml);height:var(--watt-space-ml);min-width:var(--watt-space-ml);min-height:var(--watt-space-ml);border-radius:50%;border:1px solid var(--watt-progress-tracker-step-bridge-color);background-color:var(--watt-progress-tracker-step-fill-color)}.watt-progress-tracker-step-icon watt-icon{color:var(--watt-progress-tracker-step-icon-color)}.watt-progress-tracker-step-running .watt-progress-tracker-step-icon{border:none}.watt-progress-tracker-step-text{color:var(--watt-typography-headline-color);font-size:1rem;line-height:1.5rem;font-weight:600;text-transform:none;letter-spacing:0;margin-left:var(--watt-space-s);color:var(--watt-progress-tracker-step-text-color);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }, { kind: "component", type: WattSpinnerComponent, selector: "watt-spinner", inputs: ["diameter", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattProgressTrackerStepComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattProgressTrackerStepComponent, decorators: [{
             type: Component,
             args: [{ imports: [WattIconComponent, WattSpinnerComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'watt-progress-tracker-step', host: {
                         '[attr.role]': 'current() ? "status" : "presentation"',

package/esm2022/progress-tracker/watt-progress-tracker-step.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-progress-tracker-step.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/progress-tracker/watt-progress-tracker-step.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAqC/D,MAAM,OAAO,gCAAgC;IAC3C,MAAM,GAAG,KAAK,CAAC,QAAQ,iDAEpB,CAAC;IACJ,KAAK,GAAG,KAAK,2DAAU,CAAC;IACxB,OAAO,GAAG,KAAK,CAAC,KAAK,mDAAC,CAAC;IACvB,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,uDAAC,CAAC;IAChE,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,8BAA8B,IAAI,CAAC,MAAM,EAAE,EAAE,iDAAC,CAAC;uGAP3D,gCAAgC;2FAAhC,gCAAgC,moBAvBjC;;;;;;;;;;;;;;;;;;;;;GAqBT,k3FAhCS,iBAAiB,kGAAE,oBAAoB;;2FAkCtC,gCAAgC;kBAnC5C,SAAS;8BACC,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,mBACjC,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAC3B,4BAA4B,QAChC;wBACJ,aAAa,EAAE,uCAAuC;wBACtD,cAAc,EAAE,SAAS;wBACzB,qBAAqB,EAAE,eAAe;wBACtC,mBAAmB,EAAE,SAAS;qBAC/B,YAES;;;;;;;;;;;;;;;;;;;;;GAqBT","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  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { WattIconComponent } from '@energinet/watt/icon';\nimport { WattSpinnerComponent } from '@energinet/watt/spinner';\n\n@Component({\n  imports: [WattIconComponent, WattSpinnerComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-progress-tracker-step',\n  host: {\n    '[attr.role]': 'current() ? \"status\" : \"presentation\"',\n    '[attr.class]': 'class()',\n    '[attr.aria-current]': 'ariaCurrent()',\n    '[attr.aria-label]': 'label()',\n  },\n  styleUrl: './watt-progress-tracker-step.component.scss',\n  template: `\n    <div class=\"watt-progress-tracker-step-icon\">\n      @switch (status()) {\n        @case ('running') {\n          <watt-spinner [diameter]=\"26\" [strokeWidth]=\"2\" />\n        }\n        @case ('skipped') {\n          <watt-icon name=\"horizontalRule\" size=\"xs\" />\n        }\n        @case ('canceled') {\n          <watt-icon name=\"close\" size=\"xs\" />\n        }\n        @case ('failed') {\n          <watt-icon name=\"priorityHigh\" size=\"xs\" />\n        }\n        @case ('succeeded') {\n          <watt-icon name=\"checkmark\" size=\"xs\" />\n        }\n      }\n    </div>\n    <div class=\"watt-progress-tracker-step-text\"><ng-content /></div>\n  `,\n})\nexport class WattProgressTrackerStepComponent {\n  status = input.required<\n    'pending' | 'running' | 'skipped' | 'canceled' | 'failed' | 'succeeded'\n  >();\n  label = input<string>();\n  current = input(false);\n  ariaCurrent = computed(() => (this.current() ? 'step' : false));\n  class = computed(() => `watt-progress-tracker-step-${this.status()}`);\n}\n"]}
+{"version":3,"file":"watt-progress-tracker-step.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/progress-tracker/watt-progress-tracker-step.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACR,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAqC/D,MAAM,OAAO,gCAAgC;IAC3C,MAAM,GAAG,KAAK,CAAC,QAAQ,iDAEpB,CAAC;IACJ,KAAK,GAAG,KAAK,2DAAU,CAAC;IACxB,OAAO,GAAG,KAAK,CAAC,KAAK,mDAAC,CAAC;IACvB,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,uDAAC,CAAC;IAChE,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,8BAA8B,IAAI,CAAC,MAAM,EAAE,EAAE,iDAAC,CAAC;wGAP3D,gCAAgC;4FAAhC,gCAAgC,moBAvBjC;;;;;;;;;;;;;;;;;;;;;GAqBT,k3FAhCS,iBAAiB,kGAAE,oBAAoB;;4FAkCtC,gCAAgC;kBAnC5C,SAAS;8BACC,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,mBACjC,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAC3B,4BAA4B,QAChC;wBACJ,aAAa,EAAE,uCAAuC;wBACtD,cAAc,EAAE,SAAS;wBACzB,qBAAqB,EAAE,eAAe;wBACtC,mBAAmB,EAAE,SAAS;qBAC/B,YAES;;;;;;;;;;;;;;;;;;;;;GAqBT","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  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { WattIconComponent } from '@energinet/watt/icon';\nimport { WattSpinnerComponent } from '@energinet/watt/spinner';\n\n@Component({\n  imports: [WattIconComponent, WattSpinnerComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-progress-tracker-step',\n  host: {\n    '[attr.role]': 'current() ? \"status\" : \"presentation\"',\n    '[attr.class]': 'class()',\n    '[attr.aria-current]': 'ariaCurrent()',\n    '[attr.aria-label]': 'label()',\n  },\n  styleUrl: './watt-progress-tracker-step.component.scss',\n  template: `\n    <div class=\"watt-progress-tracker-step-icon\">\n      @switch (status()) {\n        @case ('running') {\n          <watt-spinner [diameter]=\"26\" [strokeWidth]=\"2\" />\n        }\n        @case ('skipped') {\n          <watt-icon name=\"horizontalRule\" size=\"xs\" />\n        }\n        @case ('canceled') {\n          <watt-icon name=\"close\" size=\"xs\" />\n        }\n        @case ('failed') {\n          <watt-icon name=\"priorityHigh\" size=\"xs\" />\n        }\n        @case ('succeeded') {\n          <watt-icon name=\"checkmark\" size=\"xs\" />\n        }\n      }\n    </div>\n    <div class=\"watt-progress-tracker-step-text\"><ng-content /></div>\n  `,\n})\nexport class WattProgressTrackerStepComponent {\n  status = input.required<\n    'pending' | 'running' | 'skipped' | 'canceled' | 'failed' | 'succeeded'\n  >();\n  label = input<string>();\n  current = input(false);\n  ariaCurrent = computed(() => (this.current() ? 'step' : false));\n  class = computed(() => `watt-progress-tracker-step-${this.status()}`);\n}\n"]}

package/esm2022/progress-tracker/watt-progress-tracker.component.js

@@ -20,10 +20,10 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { VaterStackComponent } from '@energinet/watt/vater';
 import * as i0 from "@angular/core";
 export class WattProgressTrackerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: WattProgressTrackerComponent, isStandalone: true, selector: "watt-progress-tracker", ngImport: i0, template: `<vater-stack direction="row"><ng-content /></vater-stack>`, isInline: true, styles: ["watt-progress-tracker{display:block}\n"], dependencies: [{ kind: "component", type: VaterStackComponent, selector: "vater-stack, [vater-stack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: WattProgressTrackerComponent, isStandalone: true, selector: "watt-progress-tracker", ngImport: i0, template: `<vater-stack direction="row"><ng-content /></vater-stack>`, isInline: true, styles: ["watt-progress-tracker{display:block}\n"], dependencies: [{ kind: "component", type: VaterStackComponent, selector: "vater-stack, [vater-stack]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattProgressTrackerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattProgressTrackerComponent, decorators: [{
             type: Component,
             args: [{ imports: [VaterStackComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, selector: 'watt-progress-tracker', template: `<vater-stack direction="row"><ng-content /></vater-stack>`, styles: ["watt-progress-tracker{display:block}\n"] }]
         }] });

package/esm2022/progress-tracker/watt-progress-tracker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-progress-tracker.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/progress-tracker/watt-progress-tracker.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAgB5D,MAAM,OAAO,4BAA4B;uGAA5B,4BAA4B;2FAA5B,4BAA4B,iFAF7B,2DAA2D,gHAX3D,mBAAmB;;2FAalB,4BAA4B;kBAdxC,SAAS;8BACC,CAAC,mBAAmB,CAAC,mBACb,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAC3B,uBAAuB,YAQvB,2DAA2D","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, ViewEncapsulation } from '@angular/core';\nimport { VaterStackComponent } from '@energinet/watt/vater';\n\n@Component({\n  imports: [VaterStackComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-progress-tracker',\n  styles: [\n    `\n      watt-progress-tracker {\n        display: block;\n      }\n    `,\n  ],\n  template: `<vater-stack direction=\"row\"><ng-content /></vater-stack>`,\n})\nexport class WattProgressTrackerComponent {}\n"]}
+{"version":3,"file":"watt-progress-tracker.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/progress-tracker/watt-progress-tracker.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;;AAgB5D,MAAM,OAAO,4BAA4B;wGAA5B,4BAA4B;4FAA5B,4BAA4B,iFAF7B,2DAA2D,gHAX3D,mBAAmB;;4FAalB,4BAA4B;kBAdxC,SAAS;8BACC,CAAC,mBAAmB,CAAC,mBACb,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,YAC3B,uBAAuB,YAQvB,2DAA2D","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, ViewEncapsulation } from '@angular/core';\nimport { VaterStackComponent } from '@energinet/watt/vater';\n\n@Component({\n  imports: [VaterStackComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  selector: 'watt-progress-tracker',\n  styles: [\n    `\n      watt-progress-tracker {\n        display: block;\n      }\n    `,\n  ],\n  template: `<vater-stack direction=\"row\"><ng-content /></vater-stack>`,\n})\nexport class WattProgressTrackerComponent {}\n"]}

package/esm2022/query-params/watt-query-params.directive.js

@@ -79,10 +79,10 @@ export class WattQueryParamsDirective {
             this.formGroup.control.patchValue(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattQueryParamsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.6", type: WattQueryParamsDirective, isStandalone: true, selector: "[formGroup][wattQueryParams]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattQueryParamsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: WattQueryParamsDirective, isStandalone: true, selector: "[formGroup][wattQueryParams]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattQueryParamsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattQueryParamsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[formGroup][wattQueryParams]',

package/esm2022/query-params/watt-query-params.directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-query-params.directive.js","sourceRoot":"","sources":["../../../../libs/watt/package/query-params/watt-query-params.directive.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,UAAU,EAAE,SAAS,EAAU,MAAM,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,CAAC;;AAEpB,MAAM,UAAU,GAAG,SAAS,CAAC;AAK7B,MAAM,OAAO,wBAAwB;IAC3B,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;IACvC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAChC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACxB,KAAK,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;IAEvC,wDAAwD;IACxD,QAAQ;QACN,IAAI,CAAC,SAAS,CAAC,YAAY;YACzB,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;aAC1C,SAAS,CAAC,CAAC,UAAU,EAAE,EAAE;YACxB,MAAM,eAAe,GAAG,eAAe,CAAC,UAAU,CAAC,CAAC;YAEpD,KAAK,MAAM,GAAG,IAAI,eAAe,EAAE,CAAC;gBAClC,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,IAAI,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE,CAAC;oBACxE,OAAO,eAAe,CAAC,GAAG,CAAC,CAAC;gBAC9B,CAAC;YACH,CAAC;YAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;YAEjE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE;gBACvB,UAAU,EAAE,IAAI;gBAChB,UAAU,EAAE,IAAI,CAAC,KAAK;gBACtB,WAAW,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;gBACtF,mBAAmB,EAAE,OAAO;aAC7B,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEL,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5D,MAAM,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE;gBACxE,iEAAiE;gBACjE,2CAA2C;gBAC3C,qEAAqE;gBACrE,UAAU,EAAE,GAAG;gBACf,qEAAqE;gBACrE,OAAO,CACL,GAAW,EACX,cAAiC,EACjC,OAAe,EACf,IAAqB;oBAErB,oDAAoD;oBACpD,0BAA0B;oBAC1B,IAAI,IAAI,KAAK,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;wBACjD,OAAO,cAAc,CAAC,GAAG,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;oBACtD,CAAC;oBAED,IACE,IAAI,KAAK,OAAO;wBAChB,+FAA+F,CAAC,IAAI,CAClG,GAAG,CACJ,EACD,CAAC;wBACD,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC;oBACzB,CAAC;oBAED,MAAM,QAAQ,GAA+C;wBAC3D,IAAI,EAAE,IAAI;wBACV,KAAK,EAAE,KAAK;wBACZ,IAAI,EAAE,IAAI;wBACV,SAAS,EAAE,SAAS;qBACrB,CAAC;oBACF,IAAI,IAAI,KAAK,OAAO,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;wBACxC,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;oBACvB,CAAC;oBAED,OAAO,cAAc,CAAC,GAAG,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;gBACtD,CAAC;aACF,CAAC,CAAC;YAEH,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;uGAzEU,wBAAwB;2FAAxB,wBAAwB;;2FAAxB,wBAAwB;kBAHpC,SAAS;mBAAC;oBACT,QAAQ,EAAE,8BAA8B;iBACzC","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 { DestroyRef, Directive, OnInit, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormGroupDirective } from '@angular/forms';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport qs from 'qs';\n\nconst filtersKey = 'filters';\n\n@Directive({\n  selector: '[formGroup][wattQueryParams]',\n})\nexport class WattQueryParamsDirective implements OnInit {\n  private formGroup = inject(FormGroupDirective);\n  private destoryRef = inject(DestroyRef);\n  private router = inject(Router);\n  private route = inject(ActivatedRoute);\n\n  // eslint-disable-next-line sonarjs/cognitive-complexity\n  ngOnInit(): void {\n    this.formGroup.valueChanges\n      ?.pipe(takeUntilDestroyed(this.destoryRef))\n      .subscribe((formValues) => {\n        const formValuesClone = structuredClone(formValues);\n\n        for (const key in formValuesClone) {\n          if (formValuesClone[key] === null || formValuesClone[key] === undefined) {\n            delete formValuesClone[key];\n          }\n        }\n\n        const hasSetProperties = Object.keys(formValuesClone).length > 0;\n\n        this.router.navigate([], {\n          replaceUrl: true,\n          relativeTo: this.route,\n          queryParams: { [filtersKey]: hasSetProperties ? qs.stringify(formValuesClone) : null },\n          queryParamsHandling: 'merge',\n        });\n      });\n\n    if (Object.keys(this.route.snapshot.queryParams).length > 0) {\n      const value = qs.parse(this.route.snapshot.queryParams[filtersKey] ?? '', {\n        // Needed because `qs` library has a default value of 20 elements\n        // after which arrays are parsed as objects\n        // See https://github.com/ljharb/qs?tab=readme-ov-file#parsing-arrays\n        arrayLimit: 200,\n        // See https://github.com/ljharb/qs/issues/91#issuecomment-1833694874\n        decoder(\n          str: string,\n          defaultDecoder: qs.defaultDecoder,\n          charset: string,\n          type: 'key' | 'value'\n        ) {\n          // Custom logic not part of the GitHub comment above\n          // Handles \"YYYY-MM\" dates\n          if (type === 'value' && /\\d{4}-\\d{2}$/.test(str)) {\n            return defaultDecoder(str, defaultDecoder, charset);\n          }\n\n          if (\n            type === 'value' &&\n            /^(?:-(?:[1-9](?:\\d{0,2}(?:,\\d{3})+|\\d*))|(?:0|(?:[1-9](?:\\d{0,2}(?:,\\d{3})+|\\d*))))(?:.\\d+|)$/.test(\n              str\n            )\n          ) {\n            return parseFloat(str);\n          }\n\n          const keywords: Record<string, boolean | null | undefined> = {\n            true: true,\n            false: false,\n            null: null,\n            undefined: undefined,\n          };\n          if (type === 'value' && str in keywords) {\n            return keywords[str];\n          }\n\n          return defaultDecoder(str, defaultDecoder, charset);\n        },\n      });\n\n      this.formGroup.control.patchValue(value);\n    }\n  }\n}\n"]}
+{"version":3,"file":"watt-query-params.directive.js","sourceRoot":"","sources":["../../../../libs/watt/package/query-params/watt-query-params.directive.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 { DestroyRef, Directive, OnInit, inject } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormGroupDirective } from '@angular/forms';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport qs from 'qs';\n\nconst filtersKey = 'filters';\n\n@Directive({\n  selector: '[formGroup][wattQueryParams]',\n})\nexport class WattQueryParamsDirective implements OnInit {\n  private formGroup = inject(FormGroupDirective);\n  private destoryRef = inject(DestroyRef);\n  private router = inject(Router);\n  private route = inject(ActivatedRoute);\n\n  // eslint-disable-next-line sonarjs/cognitive-complexity\n  ngOnInit(): void {\n    this.formGroup.valueChanges\n      ?.pipe(takeUntilDestroyed(this.destoryRef))\n      .subscribe((formValues) => {\n        const formValuesClone = structuredClone(formValues);\n\n        for (const key in formValuesClone) {\n          if (formValuesClone[key] === null || formValuesClone[key] === undefined) {\n            delete formValuesClone[key];\n          }\n        }\n\n        const hasSetProperties = Object.keys(formValuesClone).length > 0;\n\n        this.router.navigate([], {\n          replaceUrl: true,\n          relativeTo: this.route,\n          queryParams: { [filtersKey]: hasSetProperties ? qs.stringify(formValuesClone) : null },\n          queryParamsHandling: 'merge',\n        });\n      });\n\n    if (Object.keys(this.route.snapshot.queryParams).length > 0) {\n      const value = qs.parse(this.route.snapshot.queryParams[filtersKey] ?? '', {\n        // Needed because `qs` library has a default value of 20 elements\n        // after which arrays are parsed as objects\n        // See https://github.com/ljharb/qs?tab=readme-ov-file#parsing-arrays\n        arrayLimit: 200,\n        // See https://github.com/ljharb/qs/issues/91#issuecomment-1833694874\n        decoder(\n          str: string,\n          defaultDecoder: qs.defaultDecoder,\n          charset: string,\n          type: 'key' | 'value'\n        ) {\n          // Custom logic not part of the GitHub comment above\n          // Handles \"YYYY-MM\" dates\n          if (type === 'value' && /\\d{4}-\\d{2}$/.test(str)) {\n            return defaultDecoder(str, defaultDecoder, charset);\n          }\n\n          if (\n            type === 'value' &&\n            /^(?:-(?:[1-9](?:\\d{0,2}(?:,\\d{3})+|\\d*))|(?:0|(?:[1-9](?:\\d{0,2}(?:,\\d{3})+|\\d*))))(?:.\\d+|)$/.test(\n              str\n            )\n          ) {\n            return parseFloat(str);\n          }\n\n          const keywords: Record<string, boolean | null | undefined> = {\n            true: true,\n            false: false,\n            null: null,\n            undefined: undefined,\n          };\n          if (type === 'value' && str in keywords) {\n            return keywords[str];\n          }\n\n          return defaultDecoder(str, defaultDecoder, charset);\n        },\n      });\n\n      this.formGroup.control.patchValue(value);\n    }\n  }\n}\n"]}

package/esm2022/radio/watt-radio-group.component.js

@@ -85,8 +85,8 @@ export class WattRadioGroupComponent {
     setDisabledState = (isDisabled) => this.disabled.set(isDisabled);
     registerOnTouched = (fn) => this.touched.subscribe(fn);
     registerOnChange = (fn) => this.value.subscribe(fn);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: WattRadioGroupComponent, isStandalone: true, selector: "watt-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touched" }, host: { properties: { "class.disabled": "disabled()", "class.readonly": "readonly()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: WattRadioGroupComponent, isStandalone: true, selector: "watt-radio-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touched" }, host: { properties: { "class.disabled": "disabled()", "class.readonly": "readonly()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WattRadioGroupComponent),
@@ -98,7 +98,7 @@ export class WattRadioGroupComponent {
     </watt-field>
   `, isInline: true, styles: ["watt-radio-group.readonly watt-radio{pointer-events:none}watt-radio-group.readonly watt-radio input,watt-radio-group.readonly watt-radio:has(input:not(:checked)){display:none}\n"], dependencies: [{ kind: "component", type: WattFieldComponent, selector: "watt-field", inputs: ["control", "label", "id", "chipMode", "tooltip", "placeholder", "anchorName", "displayMode", "autoFocus", "showErrors"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattRadioGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattRadioGroupComponent, decorators: [{
             type: Component,
             args: [{ imports: [WattFieldComponent], providers: [
                         {

package/esm2022/radio/watt-radio-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-radio-group.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/radio/watt-radio-group.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 {\n  Component,\n  forwardRef,\n  ViewEncapsulation,\n  input,\n  model,\n  output,\n  computed,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  contentChildren,\n  effect,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattRadioComponent } from './watt-radio.component';\n\n@Component({\n  imports: [WattFieldComponent],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattRadioGroupComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'watt-radio-group',\n  styles: `\n    watt-radio-group.readonly watt-radio {\n      pointer-events: none;\n\n      & input,\n      &:has(input:not(:checked)) {\n        display: none;\n      }\n    }\n  `,\n  template: `\n    <watt-field [label]=\"label()\" [control]=\"formControl()\" displayMode=\"content\">\n      <ng-content />\n    </watt-field>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.disabled]': 'disabled()',\n    '[class.readonly]': 'readonly()',\n  },\n})\nexport class WattRadioGroupComponent<T> implements ControlValueAccessor {\n  /**\n   * The field label.\n   */\n  label = input<string>();\n\n  /**\n   * The value of the radio button group.\n   */\n  value = model<T | null>();\n\n  /**\n   * Optional input for setting the name of the radio buttons.\n   * If no name is provided, the name will be auto-generated.\n   */\n  name = input<string>();\n\n  /**\n   * Whether the radio button group is readonly.\n   */\n  readonly = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether the radio button group is disabled.\n   */\n  disabled = model(false);\n\n  /**\n   * Emits when the radio button group is touched.\n   */\n  touched = output();\n\n  /**\n   * Tracks the FormControl instance bound to the directive.\n   */\n  formControl = input<FormControl | null>(null);\n\n  // Used for generating unique radio button names\n  private static instance = 1;\n  private instance = WattRadioGroupComponent.instance++;\n  private group = computed(() => this.name() ?? `watt-radio-group-${this.instance}`);\n\n  private radios = contentChildren(WattRadioComponent<T>, { descendants: true });\n  protected inheritPropertiesEffect = effect(() => {\n    this.radios().forEach((r) => {\n      r.disabled.set(this.disabled());\n      r.name.set(this.group());\n    });\n  });\n\n  // Two-way binding\n  constructor() {\n    effect(() => {\n      // group -> buttons\n      this.radios().forEach((r) => {\n        r.checked.set(r.value() === this.value());\n      });\n    });\n\n    // buttons -> group\n    effect((onCleanup) => {\n      if (this.readonly()) return;\n      const subscriptions = this.radios().map((r) =>\n        r.isChecked.subscribe(() => {\n          this.value.set(r.value());\n        })\n      );\n\n      onCleanup(() => subscriptions.forEach((s) => s.unsubscribe()));\n    });\n  }\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: T | null | undefined) => this.value.set(value);\n  setDisabledState = (isDisabled: boolean) => this.disabled.set(isDisabled);\n  registerOnTouched = (fn: () => void) => this.touched.subscribe(fn);\n  registerOnChange = (fn: (value: T | null | undefined) => void) => this.value.subscribe(fn);\n}\n\nexport const WATT_RADIO = [WattRadioGroupComponent, WattRadioComponent] as const;\n"]}
+{"version":3,"file":"watt-radio-group.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/radio/watt-radio-group.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EACL,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,uBAAuB,EACvB,eAAe,EACf,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAqC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;;AAkC5D,MAAM,OAAO,uBAAuB;IAClC;;OAEG;IACH,KAAK,GAAG,KAAK,2DAAU,CAAC;IAExB;;OAEG;IACH,KAAK,GAAG,KAAK,2DAAY,CAAC;IAE1B;;;OAGG;IACH,IAAI,GAAG,KAAK,0DAAU,CAAC;IAEvB;;OAEG;IACH,QAAQ,GAAG,KAAK,CAAC,KAAK,4CAAI,SAAS,EAAE,gBAAgB,OAA7B,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAC,CAAC;IAEzD;;OAEG;IACH,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IAExB;;OAEG;IACH,OAAO,GAAG,MAAM,EAAE,CAAC;IAEnB;;OAEG;IACH,WAAW,GAAG,KAAK,CAAqB,IAAI,uDAAC,CAAC;IAE9C,gDAAgD;IACxC,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,QAAQ,GAAG,uBAAuB,CAAC,QAAQ,EAAE,CAAC;IAC9C,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,oBAAoB,IAAI,CAAC,QAAQ,EAAE,iDAAC,CAAC;IAE3E,MAAM,GAAG,eAAe,CAAC,CAAA,kBAAqB,CAAA,0CAAI,WAAW,EAAE,IAAI,OAAnB,EAAE,WAAW,EAAE,IAAI,EAAE,GAAC,CAAC;IACrE,uBAAuB,GAAG,MAAM,CAAC,GAAG,EAAE;QAC9C,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;YAC1B,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAChC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC,mEAAC,CAAC;IAEH,kBAAkB;IAClB;QACE,MAAM,CAAC,GAAG,EAAE;YACV,mBAAmB;YACnB,IAAI,CAAC,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;gBAC1B,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YAC5C,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,mBAAmB;QACnB,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBAAE,OAAO;YAC5B,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAC5C,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;YAC5B,CAAC,CAAC,CACH,CAAC;YAEF,SAAS,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC,CAAC;IACL,CAAC;IAED,0CAA0C;IAC1C,UAAU,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACpE,gBAAgB,GAAG,CAAC,UAAmB,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAC1E,iBAAiB,GAAG,CAAC,EAAc,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACnE,gBAAgB,GAAG,CAAC,EAAyC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;wGA5EhF,uBAAuB;4FAAvB,uBAAuB,y+BA9BvB;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,uBAAuB,CAAC;gBACtD,KAAK,EAAE,IAAI;aACZ;SACF,iDAkEgC,CAAA,kBAAqB,CAAA,gEArD5C;;;;GAIT,2PAxBS,kBAAkB;;4FA+BjB,uBAAuB;kBAhCnC,SAAS;8BACC,CAAC,kBAAkB,CAAC,aAClB;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,wBAAwB,CAAC;4BACtD,KAAK,EAAE,IAAI;yBACZ;qBACF,mBACgB,uBAAuB,CAAC,MAAM,YACrC,kBAAkB,YAWlB;;;;GAIT,iBACc,iBAAiB,CAAC,IAAI,QAC/B;wBACJ,kBAAkB,EAAE,YAAY;wBAChC,kBAAkB,EAAE,YAAY;qBACjC;wzBA4CgC,kBAAqB,QAAE,EAAE,WAAW,EAAE,IAAI,EAAE;AAqC/E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,uBAAuB,EAAE,kBAAkB,CAAU,CAAC","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  Component,\n  forwardRef,\n  ViewEncapsulation,\n  input,\n  model,\n  output,\n  computed,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  contentChildren,\n  effect,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { WattFieldComponent } from '@energinet/watt/field';\nimport { WattRadioComponent } from './watt-radio.component';\n\n@Component({\n  imports: [WattFieldComponent],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattRadioGroupComponent),\n      multi: true,\n    },\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  selector: 'watt-radio-group',\n  styles: `\n    watt-radio-group.readonly watt-radio {\n      pointer-events: none;\n\n      & input,\n      &:has(input:not(:checked)) {\n        display: none;\n      }\n    }\n  `,\n  template: `\n    <watt-field [label]=\"label()\" [control]=\"formControl()\" displayMode=\"content\">\n      <ng-content />\n    </watt-field>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.disabled]': 'disabled()',\n    '[class.readonly]': 'readonly()',\n  },\n})\nexport class WattRadioGroupComponent<T> implements ControlValueAccessor {\n  /**\n   * The field label.\n   */\n  label = input<string>();\n\n  /**\n   * The value of the radio button group.\n   */\n  value = model<T | null>();\n\n  /**\n   * Optional input for setting the name of the radio buttons.\n   * If no name is provided, the name will be auto-generated.\n   */\n  name = input<string>();\n\n  /**\n   * Whether the radio button group is readonly.\n   */\n  readonly = input(false, { transform: booleanAttribute });\n\n  /**\n   * Whether the radio button group is disabled.\n   */\n  disabled = model(false);\n\n  /**\n   * Emits when the radio button group is touched.\n   */\n  touched = output();\n\n  /**\n   * Tracks the FormControl instance bound to the directive.\n   */\n  formControl = input<FormControl | null>(null);\n\n  // Used for generating unique radio button names\n  private static instance = 1;\n  private instance = WattRadioGroupComponent.instance++;\n  private group = computed(() => this.name() ?? `watt-radio-group-${this.instance}`);\n\n  private radios = contentChildren(WattRadioComponent<T>, { descendants: true });\n  protected inheritPropertiesEffect = effect(() => {\n    this.radios().forEach((r) => {\n      r.disabled.set(this.disabled());\n      r.name.set(this.group());\n    });\n  });\n\n  // Two-way binding\n  constructor() {\n    effect(() => {\n      // group -> buttons\n      this.radios().forEach((r) => {\n        r.checked.set(r.value() === this.value());\n      });\n    });\n\n    // buttons -> group\n    effect((onCleanup) => {\n      if (this.readonly()) return;\n      const subscriptions = this.radios().map((r) =>\n        r.isChecked.subscribe(() => {\n          this.value.set(r.value());\n        })\n      );\n\n      onCleanup(() => subscriptions.forEach((s) => s.unsubscribe()));\n    });\n  }\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: T | null | undefined) => this.value.set(value);\n  setDisabledState = (isDisabled: boolean) => this.disabled.set(isDisabled);\n  registerOnTouched = (fn: () => void) => this.touched.subscribe(fn);\n  registerOnChange = (fn: (value: T | null | undefined) => void) => this.value.subscribe(fn);\n}\n\nexport const WATT_RADIO = [WattRadioGroupComponent, WattRadioComponent] as const;\n"]}

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

@@ -38,8 +38,8 @@ export class WattRadioComponent {
     setDisabledState = (isDisabled) => this.disabled.set(isDisabled);
     registerOnTouched = (fn) => this.touched.subscribe(fn);
     registerOnChange = (fn) => this.isChecked.subscribe(() => fn(this.value()));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.6", type: WattRadioComponent, isStandalone: true, selector: "watt-radio", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", isChecked: "isChecked", touched: "touched" }, host: { properties: { "class.disabled": "disabled()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: WattRadioComponent, isStandalone: true, selector: "watt-radio", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", isChecked: "isChecked", touched: "touched" }, host: { properties: { "class.disabled": "disabled()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WattRadioComponent),
@@ -60,7 +60,7 @@ export class WattRadioComponent {
     </label>
   `, isInline: true, styles: [":root{--watt-radio-color: var(--watt-on-light-low-emphasis);--watt-radio-color-hover: var(--watt-on-light-medium-emphasis);--watt-radio-color-focus: var(--watt-color-primary);--watt-radio-color-checked: var(--watt-color-primary);--watt-radio-color-checked-hover: var(--watt-color-primary-dark);--watt-radio-color-checked-focus: var(--watt-color-primary-dark);--watt-disabled-radio-color: var(--watt-color-neutral-grey-500);--watt-radio-label-color: var(--watt-on-light-high-emphasis);--watt-disabled-radio-label-color: var(--watt-on-light-low-emphasis)}watt-radio{padding:2px 0}watt-radio:not(:has(:disabled)) label,watt-radio:not(:has(:disabled)) input{cursor:pointer}watt-radio label{display:flex;align-items:center;color:var(--watt-radio-label-color)}watt-radio label.disabled{color:var(--watt-radio-disabled-label-color)}watt-radio input[type=radio]{width:16px;height:16px;min-width:16px;min-height:16px;appearance:none;margin:0 var(--watt-space-s) 0 0;background:var(--watt-radio-color);border-radius:50%;display:grid;place-content:center}watt-radio input[type=radio]:before{content:\"\";width:14px;height:14px;border-radius:50%;transform:scale(1);transition:var(--watt-time-extra-short) transform var(--watt-ease-linear);background:var(--watt-color-neutral-white)}watt-radio input[type=radio]:checked{background:var(--watt-radio-color-checked)}watt-radio input[type=radio]:checked:before{transform:scale(.33)}watt-radio input:focus{outline:none}watt-radio input:not(:disabled):hover{background:var(--watt-radio-color-hover)}watt-radio input:not(:disabled):hover:checked{background:var(--watt-radio-color-checked-hover)}watt-radio input:not(:disabled):focus-visible{background:var(--watt-radio-color-focus)}watt-radio input:not(:disabled):focus-visible:checked{background:var(--watt-radio-color-checked-focus)}watt-radio.disabled{--watt-radio-label-color: var(--watt-disabled-radio-label-color);--watt-radio-color: var(--watt-disabled-radio-color);--watt-radio-color-checked: var(--watt-disabled-radio-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattRadioComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {

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

@@ -1 +1 @@
-{"version":3,"file":"watt-radio.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/radio/watt-radio.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EACL,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,KAAK,EACL,YAAY,EACZ,KAAK,EACL,MAAM,EACN,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAwB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;;AAgCzE,MAAM,OAAO,kBAAkB;IAC7B,iFAAiF;IACjF,KAAK,GAAG,KAAK,2DAAU,CAAC;IACxB,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,gDAAC,CAAC,CAAC,4CAA4C;IAE7E,iCAAiC;IACjC,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAK,CAAC;IAE5B,qCAAqC;IACrC,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IAExB,oCAAoC;IACpC,OAAO,GAAG,KAAK,CAAC,KAAK,mDAAC,CAAC;IAEvB,wEAAwE;IACxE,SAAS,GAAG,MAAM,EAAE,CAAC;IAErB,uCAAuC;IACvC,OAAO,GAAG,MAAM,EAAE,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACvF,gBAAgB,GAAG,CAAC,UAAmB,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAC1E,iBAAiB,GAAG,CAAC,EAAc,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACnE,gBAAgB,GAAG,CAAC,EAAyC,EAAE,EAAE,CAC/D,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;uGAzBxC,kBAAkB;2FAAlB,kBAAkB,4tBA5BlB;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC;gBACjD,KAAK,EAAE,IAAI;aACZ;SACF,0BAGS;;;;;;;;;;;;;GAaT;;2FAMU,kBAAkB;kBA9B9B,SAAS;sCACS,uBAAuB,CAAC,MAAM,aACpC;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,mBAAmB,CAAC;4BACjD,KAAK,EAAE,IAAI;yBACZ;qBACF,YACS,YAAY,YAEZ;;;;;;;;;;;;;GAaT,iBACc,iBAAiB,CAAC,IAAI,QAC/B;wBACJ,kBAAkB,EAAE,YAAY;qBACjC","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  Component,\n  forwardRef,\n  ViewEncapsulation,\n  input,\n  linkedSignal,\n  model,\n  output,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattRadioComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-radio',\n  styleUrls: ['./watt-radio.component.scss'],\n  template: `\n    <label class=\"watt-text-s\">\n      <input\n        type=\"radio\"\n        [name]=\"name()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [checked]=\"checked()\"\n        (change)=\"isChecked.emit()\"\n        (blur)=\"touched.emit()\"\n      />\n      <ng-content />\n    </label>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.disabled]': 'disabled()',\n  },\n})\nexport class WattRadioComponent<T> implements ControlValueAccessor {\n  /** The name of the radio button. Prefer using `<watt-radio-group>` over this. */\n  group = input<string>();\n  name = linkedSignal(this.group); // allows inheriting from `watt-radio-group`\n\n  /** Value of the radio button. */\n  value = input.required<T>();\n\n  /** Whether the radio is disabled. */\n  disabled = model(false);\n\n  /** Whether the radio is checked. */\n  checked = model(false);\n\n  /** Emits only when the radio is checked. Never emits when unchecked. */\n  isChecked = output();\n\n  /** Emits when the radio is touched. */\n  touched = output();\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: T | null | undefined) => this.checked.set(value === this.value());\n  setDisabledState = (isDisabled: boolean) => this.disabled.set(isDisabled);\n  registerOnTouched = (fn: () => void) => this.touched.subscribe(fn);\n  registerOnChange = (fn: (value: T | null | undefined) => void) =>\n    this.isChecked.subscribe(() => fn(this.value()));\n}\n"]}
+{"version":3,"file":"watt-radio.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/radio/watt-radio.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EACL,SAAS,EACT,UAAU,EACV,iBAAiB,EACjB,KAAK,EACL,YAAY,EACZ,KAAK,EACL,MAAM,EACN,uBAAuB,GACxB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAwB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;;AAgCzE,MAAM,OAAO,kBAAkB;IAC7B,iFAAiF;IACjF,KAAK,GAAG,KAAK,2DAAU,CAAC;IACxB,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,gDAAC,CAAC,CAAC,4CAA4C;IAE7E,iCAAiC;IACjC,KAAK,GAAG,KAAK,CAAC,QAAQ,gDAAK,CAAC;IAE5B,qCAAqC;IACrC,QAAQ,GAAG,KAAK,CAAC,KAAK,oDAAC,CAAC;IAExB,oCAAoC;IACpC,OAAO,GAAG,KAAK,CAAC,KAAK,mDAAC,CAAC;IAEvB,wEAAwE;IACxE,SAAS,GAAG,MAAM,EAAE,CAAC;IAErB,uCAAuC;IACvC,OAAO,GAAG,MAAM,EAAE,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,GAAG,CAAC,KAA2B,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IACvF,gBAAgB,GAAG,CAAC,UAAmB,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAC1E,iBAAiB,GAAG,CAAC,EAAc,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IACnE,gBAAgB,GAAG,CAAC,EAAyC,EAAE,EAAE,CAC/D,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;wGAzBxC,kBAAkB;4FAAlB,kBAAkB,4tBA5BlB;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC;gBACjD,KAAK,EAAE,IAAI;aACZ;SACF,0BAGS;;;;;;;;;;;;;GAaT;;4FAMU,kBAAkB;kBA9B9B,SAAS;sCACS,uBAAuB,CAAC,MAAM,aACpC;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,mBAAmB,CAAC;4BACjD,KAAK,EAAE,IAAI;yBACZ;qBACF,YACS,YAAY,YAEZ;;;;;;;;;;;;;GAaT,iBACc,iBAAiB,CAAC,IAAI,QAC/B;wBACJ,kBAAkB,EAAE,YAAY;qBACjC","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  Component,\n  forwardRef,\n  ViewEncapsulation,\n  input,\n  linkedSignal,\n  model,\n  output,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattRadioComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-radio',\n  styleUrls: ['./watt-radio.component.scss'],\n  template: `\n    <label class=\"watt-text-s\">\n      <input\n        type=\"radio\"\n        [name]=\"name()\"\n        [value]=\"value()\"\n        [disabled]=\"disabled()\"\n        [checked]=\"checked()\"\n        (change)=\"isChecked.emit()\"\n        (blur)=\"touched.emit()\"\n      />\n      <ng-content />\n    </label>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class.disabled]': 'disabled()',\n  },\n})\nexport class WattRadioComponent<T> implements ControlValueAccessor {\n  /** The name of the radio button. Prefer using `<watt-radio-group>` over this. */\n  group = input<string>();\n  name = linkedSignal(this.group); // allows inheriting from `watt-radio-group`\n\n  /** Value of the radio button. */\n  value = input.required<T>();\n\n  /** Whether the radio is disabled. */\n  disabled = model(false);\n\n  /** Whether the radio is checked. */\n  checked = model(false);\n\n  /** Emits only when the radio is checked. Never emits when unchecked. */\n  isChecked = output();\n\n  /** Emits when the radio is touched. */\n  touched = output();\n\n  // Implementation for ControlValueAccessor\n  writeValue = (value: T | null | undefined) => this.checked.set(value === this.value());\n  setDisabledState = (isDisabled: boolean) => this.disabled.set(isDisabled);\n  registerOnTouched = (fn: () => void) => this.touched.subscribe(fn);\n  registerOnChange = (fn: (value: T | null | undefined) => void) =>\n    this.isChecked.subscribe(() => fn(this.value()));\n}\n"]}

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

@@ -67,8 +67,8 @@ export class WattSearchComponent {
         element.value = '';
         this.onInput(element.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: WattSearchComponent, isStandalone: true, selector: "watt-search", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, trim: { classPropertyName: "trim", publicName: "trim", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: WattSearchComponent, isStandalone: true, selector: "watt-search", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, trim: { classPropertyName: "trim", publicName: "trim", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { search: "search" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <label>
       <input
         #input
@@ -89,7 +89,7 @@ export class WattSearchComponent {
     </label>
   `, isInline: true, styles: [":host{height:44px}label{display:inline-block;width:100%;position:relative;text-transform:none;overflow:hidden;pointer-events:none}input{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;font-family:inherit;width:100%;height:44px;padding-left:var(--watt-space-l);padding-right:12px;border:1px solid var(--watt-on-light-low-emphasis);border-radius:4px;outline:0;opacity:0;transition-property:opacity}.wrapper{display:inline-flex;position:absolute;left:100%;width:100%;height:100%;transition-property:transform}.button{display:inline-flex;gap:var(--watt-space-xs);align-items:center;height:44px;padding:0 16px;color:var(--watt-color-primary);transform:translate(-100%);transition-property:transform;pointer-events:auto;cursor:pointer}.button:hover{color:var(--watt-color-primary-dark)}.text{opacity:1;transition-property:opacity}.clear{position:absolute;top:50%;right:var(--watt-space-s);padding:var(--watt-space-xs);border:none;border-radius:4px;background:none;color:var(--watt-color-primary);transform:translateY(-50%);cursor:pointer;pointer-events:auto}.clear:focus-visible{outline:2px solid var(--watt-color-primary)}input:placeholder-shown~.clear{display:none}input,.wrapper,.button,.text{transition-duration:.3s;transition-timing-function:cubic-bezier(.75,0,.25,1)}input{transition-timing-function:cubic-bezier(0,.5,0,1)}input:focus{border:1px solid var(--watt-color-primary)}input:not(:placeholder-shown),input:focus{pointer-events:auto;opacity:1;transition-timing-function:cubic-bezier(1,0,.5,0)}input:not(:placeholder-shown)+.wrapper,input:focus+.wrapper{transform:translate(-100%)}input:not(:placeholder-shown)+.wrapper .button,input:focus+.wrapper .button{pointer-events:none;transform:translate(-6px)}input:not(:placeholder-shown)+.wrapper .text,input:focus+.wrapper .text{opacity:0}\n"], dependencies: [{ kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSearchComponent, decorators: [{
             type: Component,
             args: [{ imports: [WattIconComponent], selector: 'watt-search', template: `
     <label>

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

@@ -1 +1 @@
-{"version":3,"file":"watt-search.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/search/watt-search.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAc,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAgB,MAAM,sBAAsB,CAAC;;AA2BvE,MAAM,OAAO,mBAAmB;IAC9B;;OAEG;IACH,KAAK,GAAG,SAAS,CAAC,QAAQ,CAA+B,OAAO,CAAC,CAAC;IAElE;;OAEG;IACH,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC,CAAC;IAE1B;;OAEG;IACH,YAAY,GAAG,KAAK,CAAS,GAAG,wDAAC,CAAC;IAElC;;OAEG;IACH,IAAI,GAAG,KAAK,CAAC,IAAI,gDAAC,CAAC;IAEnB;;OAEG;IACH,OAAO,GAAG,IAAI,eAAe,CAAS,EAAE,CAAC,CAAC;IAE1C;;OAEG;IACH,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IAE7F;;OAEG;IACH,IAAI,GAAG,KAAK,CAAe,GAAG,gDAAC,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,KAAa;QACnB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;QACrD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,KAAK;QACH,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC;QAC3C,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE;YAAE,OAAO;QAEjC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;QACnB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;uGArDU,mBAAmB;2FAAnB,mBAAmB,itBArBpB;;;;;;;;;;;;;;;;;;;GAmBT,s3DAtBS,iBAAiB;;2FAwBhB,mBAAmB;kBAzB/B,SAAS;8BACC,CAAC,iBAAiB,CAAC,YAClB,aAAa,YAEb;;;;;;;;;;;;;;;;;;;GAmBT;mEAMwD,OAAO","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 { outputFromObservable } from '@angular/core/rxjs-interop';\nimport { Component, ElementRef, input, viewChild } from '@angular/core';\n\nimport { BehaviorSubject, debounceTime, skip } from 'rxjs';\n\nimport { WattIconComponent, WattIconSize } from '@energinet/watt/icon';\n\n@Component({\n  imports: [WattIconComponent],\n  selector: 'watt-search',\n  styleUrls: ['./watt-search.component.scss'],\n  template: `\n    <label>\n      <input\n        #input\n        type=\"text\"\n        role=\"searchbox\"\n        [placeholder]=\"label()\"\n        (input)=\"onInput(input.value)\"\n      />\n      <span class=\"wrapper\">\n        <span class=\"button\">\n          <watt-icon name=\"search\" [size]=\"size()\" aria-hidden=\"true\" />\n          <span class=\"text\">{{ label() }}</span>\n        </span>\n      </span>\n      <button class=\"clear\" (click)=\"clear()\">\n        <watt-icon name=\"close\" [size]=\"size()\" />\n      </button>\n    </label>\n  `,\n})\nexport class WattSearchComponent {\n  /**\n   * @ignore\n   */\n  input = viewChild.required<ElementRef<HTMLInputElement>>('input');\n\n  /**\n   * @ignore\n   */\n  label = input<string>('');\n\n  /**\n   * @ignore\n   */\n  debounceTime = input<number>(300);\n\n  /**\n   * If true, trims whitespace from the search value before emitting.\n   */\n  trim = input(true);\n\n  /**\n   * @ignore\n   */\n  search$ = new BehaviorSubject<string>('');\n\n  /**\n   * @ignore\n   */\n  search = outputFromObservable(this.search$.pipe(skip(1), debounceTime(this.debounceTime())));\n\n  /**\n   * @ignore\n   */\n  size = input<WattIconSize>('s');\n\n  /**\n   * Handles input event, optionally trimming the value.\n   */\n  onInput(value: string): void {\n    const processed = this.trim() ? value.trim() : value;\n    this.search$.next(processed);\n  }\n\n  /**\n   * @ignore\n   */\n  clear(): void {\n    const element = this.input().nativeElement;\n    if (element.value === '') return;\n\n    element.value = '';\n    this.onInput(element.value);\n  }\n}\n"]}
+{"version":3,"file":"watt-search.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/search/watt-search.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,SAAS,EAAc,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAgB,MAAM,sBAAsB,CAAC;;AA2BvE,MAAM,OAAO,mBAAmB;IAC9B;;OAEG;IACH,KAAK,GAAG,SAAS,CAAC,QAAQ,CAA+B,OAAO,CAAC,CAAC;IAElE;;OAEG;IACH,KAAK,GAAG,KAAK,CAAS,EAAE,iDAAC,CAAC;IAE1B;;OAEG;IACH,YAAY,GAAG,KAAK,CAAS,GAAG,wDAAC,CAAC;IAElC;;OAEG;IACH,IAAI,GAAG,KAAK,CAAC,IAAI,gDAAC,CAAC;IAEnB;;OAEG;IACH,OAAO,GAAG,IAAI,eAAe,CAAS,EAAE,CAAC,CAAC;IAE1C;;OAEG;IACH,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;IAE7F;;OAEG;IACH,IAAI,GAAG,KAAK,CAAe,GAAG,gDAAC,CAAC;IAEhC;;OAEG;IACH,OAAO,CAAC,KAAa;QACnB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;QACrD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,KAAK;QACH,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,aAAa,CAAC;QAC3C,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE;YAAE,OAAO;QAEjC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;QACnB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;wGArDU,mBAAmB;4FAAnB,mBAAmB,itBArBpB;;;;;;;;;;;;;;;;;;;GAmBT,s3DAtBS,iBAAiB;;4FAwBhB,mBAAmB;kBAzB/B,SAAS;8BACC,CAAC,iBAAiB,CAAC,YAClB,aAAa,YAEb;;;;;;;;;;;;;;;;;;;GAmBT;mEAMwD,OAAO","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 { outputFromObservable } from '@angular/core/rxjs-interop';\nimport { Component, ElementRef, input, viewChild } from '@angular/core';\n\nimport { BehaviorSubject, debounceTime, skip } from 'rxjs';\n\nimport { WattIconComponent, WattIconSize } from '@energinet/watt/icon';\n\n@Component({\n  imports: [WattIconComponent],\n  selector: 'watt-search',\n  styleUrls: ['./watt-search.component.scss'],\n  template: `\n    <label>\n      <input\n        #input\n        type=\"text\"\n        role=\"searchbox\"\n        [placeholder]=\"label()\"\n        (input)=\"onInput(input.value)\"\n      />\n      <span class=\"wrapper\">\n        <span class=\"button\">\n          <watt-icon name=\"search\" [size]=\"size()\" aria-hidden=\"true\" />\n          <span class=\"text\">{{ label() }}</span>\n        </span>\n      </span>\n      <button class=\"clear\" (click)=\"clear()\">\n        <watt-icon name=\"close\" [size]=\"size()\" />\n      </button>\n    </label>\n  `,\n})\nexport class WattSearchComponent {\n  /**\n   * @ignore\n   */\n  input = viewChild.required<ElementRef<HTMLInputElement>>('input');\n\n  /**\n   * @ignore\n   */\n  label = input<string>('');\n\n  /**\n   * @ignore\n   */\n  debounceTime = input<number>(300);\n\n  /**\n   * If true, trims whitespace from the search value before emitting.\n   */\n  trim = input(true);\n\n  /**\n   * @ignore\n   */\n  search$ = new BehaviorSubject<string>('');\n\n  /**\n   * @ignore\n   */\n  search = outputFromObservable(this.search$.pipe(skip(1), debounceTime(this.debounceTime())));\n\n  /**\n   * @ignore\n   */\n  size = input<WattIconSize>('s');\n\n  /**\n   * Handles input event, optionally trimming the value.\n   */\n  onInput(value: string): void {\n    const processed = this.trim() ? value.trim() : value;\n    this.search$.next(processed);\n  }\n\n  /**\n   * @ignore\n   */\n  clear(): void {\n    const element = this.input().nativeElement;\n    if (element.value === '') return;\n\n    element.value = '';\n    this.onInput(element.value);\n  }\n}\n"]}

package/esm2022/segmented-buttons/watt-segmented-button.component.js

@@ -22,12 +22,12 @@ export class WattSegmentedButtonComponent {
     templateRef = viewChild.required(TemplateRef);
     value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
     link = input(...(ngDevMode ? [undefined, { debugName: "link" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: WattSegmentedButtonComponent, isStandalone: true, selector: "watt-segmented-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template>
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: WattSegmentedButtonComponent, isStandalone: true, selector: "watt-segmented-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: ` <ng-template>
     <ng-content />
   </ng-template>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSegmentedButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSegmentedButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'watt-segmented-button',

package/esm2022/segmented-buttons/watt-segmented-button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-segmented-button.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/segmented-buttons/watt-segmented-button.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAQzE,MAAM,OAAO,4BAA4B;IACvC,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAuB,WAAW,CAAC,CAAC;IACpE,KAAK,GAAG,KAAK,2DAAU,CAAC;IACxB,IAAI,GAAG,KAAK,0DAAU,CAAC;uGAHZ,4BAA4B;2FAA5B,4BAA4B,uXACgB,WAAW,gEALxD;;iBAEK;;2FAEJ,4BAA4B;kBANxC,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,QAAQ,EAAE;;iBAEK;iBAChB;6FAEwD,WAAW","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, TemplateRef, viewChild } from '@angular/core';\n\n@Component({\n  selector: 'watt-segmented-button',\n  template: ` <ng-template>\n    <ng-content />\n  </ng-template>`,\n})\nexport class WattSegmentedButtonComponent {\n  templateRef = viewChild.required<TemplateRef<unknown>>(TemplateRef);\n  value = input<string>();\n  link = input<string>();\n}\n"]}
+{"version":3,"file":"watt-segmented-button.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/segmented-buttons/watt-segmented-button.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAQzE,MAAM,OAAO,4BAA4B;IACvC,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAuB,WAAW,CAAC,CAAC;IACpE,KAAK,GAAG,KAAK,2DAAU,CAAC;IACxB,IAAI,GAAG,KAAK,0DAAU,CAAC;wGAHZ,4BAA4B;4FAA5B,4BAA4B,uXACgB,WAAW,gEALxD;;iBAEK;;4FAEJ,4BAA4B;kBANxC,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;oBACjC,QAAQ,EAAE;;iBAEK;iBAChB;6FAEwD,WAAW","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, TemplateRef, viewChild } from '@angular/core';\n\n@Component({\n  selector: 'watt-segmented-button',\n  template: ` <ng-template>\n    <ng-content />\n  </ng-template>`,\n})\nexport class WattSegmentedButtonComponent {\n  templateRef = viewChild.required<TemplateRef<unknown>>(TemplateRef);\n  value = input<string>();\n  link = input<string>();\n}\n"]}

package/esm2022/segmented-buttons/watt-segmented-buttons.component.js

@@ -45,8 +45,8 @@ export class WattSegmentedButtonsComponent {
     setDisabledState(isDisabled) {
         this.disabled.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSegmentedButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: WattSegmentedButtonsComponent, isStandalone: true, selector: "watt-segmented-buttons", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSegmentedButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: WattSegmentedButtonsComponent, isStandalone: true, selector: "watt-segmented-buttons", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WattSegmentedButtonsComponent),
@@ -72,7 +72,7 @@ export class WattSegmentedButtonsComponent {
     </mat-button-toggle-group>
   `, isInline: true, styles: ["@use \"@energinet/watt/utils\" as watt;@use \"@angular/material\" as mat;:root{@include mat.button-toggle-overrides((selected-state-text-color: white,selected-state-background-color: var(--watt-color-primary),height: 2.5rem,));}:root mat-button-toggle-group{border-color:var(--watt-color-neutral-grey-700)}:root mat-button-toggle-group mat-button-toggle{border-color:var(--watt-color-neutral-grey-700)!important}:root mat-button-toggle-group mat-button-toggle button{min-width:6.5rem}:root mat-button-toggle-group mat-button-toggle button span{font-size:.875rem;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLinkWithHref, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: WattSegmentedButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WattSegmentedButtonsComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         MatButtonToggleModule,

package/esm2022/segmented-buttons/watt-segmented-buttons.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"watt-segmented-buttons.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/segmented-buttons/watt-segmented-buttons.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAwB,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtF,OAAO,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;;;;AAEjF;;GAEG;AAsEH,MAAM,OAAO,6BAA6B;IAChC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACrC,uBAAuB,GAAG,eAAe,CAAC,4BAA4B,mEAAC,CAAC;IACxE,QAAQ,GAAG,KAAK,CAAS,EAAE,oDAAC,CAAC;IAC7B,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC,CAAC;IAEzB,UAAU,CAAC,QAAgB;QACzB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC;IAED,gBAAgB,CAAC,EAA2B;QAC1C,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IAED,iBAAiB,CAAC,EAA4B;QAC5C,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,gBAAgB,CAAE,UAAmB;QACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;uGApBU,6BAA6B;2FAA7B,6BAA6B,2PA3D7B;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,6BAA6B,CAAC;gBAC5D,KAAK,EAAE,IAAI;aACZ;SACF,kEAuDyC,4BAA4B,6CAtB5D;;;;;;;;;;;;;;;;;;GAkBT,6oBA/DC,qBAAqB,soBACrB,WAAW,+VACX,gBAAgB,oJAChB,kBAAkB,oOAClB,gBAAgB;;2FA6DP,6BAA6B;kBArEzC,SAAS;sCACS,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,WAC5B;wBACP,qBAAqB;wBACrB,WAAW;wBACX,gBAAgB;wBAChB,kBAAkB;wBAClB,gBAAgB;qBACjB,aACU;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,8BAA8B,CAAC;4BAC5D,KAAK,EAAE,IAAI;yBACZ;qBACF,YACS,wBAAwB,YAgCxB;;;;;;;;;;;;;;;;;;GAkBT;+GAIyC,4BAA4B","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 { NgTemplateOutlet } from '@angular/common';\nimport { RouterLinkWithHref, RouterLinkActive } from '@angular/router';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n  model,\n  signal,\n  inject,\n  Component,\n  ElementRef,\n  forwardRef,\n  contentChildren,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\n\n/**\n * Segmented buttons.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    MatButtonToggleModule,\n    FormsModule,\n    NgTemplateOutlet,\n    RouterLinkWithHref,\n    RouterLinkActive,\n  ],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattSegmentedButtonsComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-segmented-buttons',\n  styles: `\n    @use '@energinet/watt/utils' as watt;\n    @use '@angular/material' as mat;\n\n    :root {\n      @include mat.button-toggle-overrides(\n        (\n          selected-state-text-color: white,\n          selected-state-background-color: var(--watt-color-primary),\n          height: 2.5rem,\n        )\n      );\n\n      mat-button-toggle-group {\n        border-color: var(--watt-color-neutral-grey-700);\n\n        mat-button-toggle {\n          border-color: var(--watt-color-neutral-grey-700) !important;\n\n          button {\n            min-width: 6.5rem;\n\n            span {\n              font-size: 0.875rem;\n              font-weight: 600;\n            }\n          }\n        }\n      }\n    }\n  `,\n  template: `\n    <mat-button-toggle-group\n      [(ngModel)]=\"selected\"\n      [multiple]=\"false\"\n      [hideSingleSelectionIndicator]=\"true\"\n      [disabled]=\"disabled()\"\n    >\n      @for (segmentedButton of segmentedButtonElements(); track segmentedButton) {\n        <mat-button-toggle\n          [routerLink]=\"segmentedButton.link()\"\n          routerLinkActive=\"mat-button-toggle-checked\"\n          [disableRipple]=\"true\"\n          [value]=\"segmentedButton.value()\"\n        >\n          <ng-container *ngTemplateOutlet=\"segmentedButton.templateRef()\" />\n        </mat-button-toggle>\n      }\n    </mat-button-toggle-group>\n  `,\n})\nexport class WattSegmentedButtonsComponent implements ControlValueAccessor {\n  private element = inject(ElementRef);\n  segmentedButtonElements = contentChildren(WattSegmentedButtonComponent);\n  selected = model<string>('');\n  disabled = signal(false);\n\n  writeValue(selected: string): void {\n    this.selected.set(selected);\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.selected.subscribe(fn);\n  }\n\n  registerOnTouched(fn: (value: boolean) => void): void {\n    this.element.nativeElement.addEventListener('focusout', fn);\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n}\n"]}
+{"version":3,"file":"watt-segmented-buttons.component.js","sourceRoot":"","sources":["../../../../libs/watt/package/segmented-buttons/watt-segmented-buttons.component.ts"],"names":[],"mappings":"AAAA,iBAAiB;AACjB;;;;;;;;;;;;;;;GAeG;AACH,YAAY;AACZ,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAwB,WAAW,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtF,OAAO,EACL,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,eAAe,EACf,iBAAiB,EACjB,uBAAuB,GACxB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AACxE,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;;;;AAEjF;;GAEG;AAsEH,MAAM,OAAO,6BAA6B;IAChC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACrC,uBAAuB,GAAG,eAAe,CAAC,4BAA4B,mEAAC,CAAC;IACxE,QAAQ,GAAG,KAAK,CAAS,EAAE,oDAAC,CAAC;IAC7B,QAAQ,GAAG,MAAM,CAAC,KAAK,oDAAC,CAAC;IAEzB,UAAU,CAAC,QAAgB;QACzB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC;IAED,gBAAgB,CAAC,EAA2B;QAC1C,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IAED,iBAAiB,CAAC,EAA4B;QAC5C,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC9D,CAAC;IAED,gBAAgB,CAAE,UAAmB;QACnC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;wGApBU,6BAA6B;4FAA7B,6BAA6B,2PA3D7B;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,6BAA6B,CAAC;gBAC5D,KAAK,EAAE,IAAI;aACZ;SACF,kEAuDyC,4BAA4B,6CAtB5D;;;;;;;;;;;;;;;;;;GAkBT,6oBA/DC,qBAAqB,soBACrB,WAAW,+VACX,gBAAgB,oJAChB,kBAAkB,oOAClB,gBAAgB;;4FA6DP,6BAA6B;kBArEzC,SAAS;sCACS,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,WAC5B;wBACP,qBAAqB;wBACrB,WAAW;wBACX,gBAAgB;wBAChB,kBAAkB;wBAClB,gBAAgB;qBACjB,aACU;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,8BAA8B,CAAC;4BAC5D,KAAK,EAAE,IAAI;yBACZ;qBACF,YACS,wBAAwB,YAgCxB;;;;;;;;;;;;;;;;;;GAkBT;+GAIyC,4BAA4B","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 { NgTemplateOutlet } from '@angular/common';\nimport { RouterLinkWithHref, RouterLinkActive } from '@angular/router';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n  model,\n  signal,\n  inject,\n  Component,\n  ElementRef,\n  forwardRef,\n  contentChildren,\n  ViewEncapsulation,\n  ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { WattSegmentedButtonComponent } from './watt-segmented-button.component';\n\n/**\n * Segmented buttons.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    MatButtonToggleModule,\n    FormsModule,\n    NgTemplateOutlet,\n    RouterLinkWithHref,\n    RouterLinkActive,\n  ],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => WattSegmentedButtonsComponent),\n      multi: true,\n    },\n  ],\n  selector: 'watt-segmented-buttons',\n  styles: `\n    @use '@energinet/watt/utils' as watt;\n    @use '@angular/material' as mat;\n\n    :root {\n      @include mat.button-toggle-overrides(\n        (\n          selected-state-text-color: white,\n          selected-state-background-color: var(--watt-color-primary),\n          height: 2.5rem,\n        )\n      );\n\n      mat-button-toggle-group {\n        border-color: var(--watt-color-neutral-grey-700);\n\n        mat-button-toggle {\n          border-color: var(--watt-color-neutral-grey-700) !important;\n\n          button {\n            min-width: 6.5rem;\n\n            span {\n              font-size: 0.875rem;\n              font-weight: 600;\n            }\n          }\n        }\n      }\n    }\n  `,\n  template: `\n    <mat-button-toggle-group\n      [(ngModel)]=\"selected\"\n      [multiple]=\"false\"\n      [hideSingleSelectionIndicator]=\"true\"\n      [disabled]=\"disabled()\"\n    >\n      @for (segmentedButton of segmentedButtonElements(); track segmentedButton) {\n        <mat-button-toggle\n          [routerLink]=\"segmentedButton.link()\"\n          routerLinkActive=\"mat-button-toggle-checked\"\n          [disableRipple]=\"true\"\n          [value]=\"segmentedButton.value()\"\n        >\n          <ng-container *ngTemplateOutlet=\"segmentedButton.templateRef()\" />\n        </mat-button-toggle>\n      }\n    </mat-button-toggle-group>\n  `,\n})\nexport class WattSegmentedButtonsComponent implements ControlValueAccessor {\n  private element = inject(ElementRef);\n  segmentedButtonElements = contentChildren(WattSegmentedButtonComponent);\n  selected = model<string>('');\n  disabled = signal(false);\n\n  writeValue(selected: string): void {\n    this.selected.set(selected);\n  }\n\n  registerOnChange(fn: (value: string) => void): void {\n    this.selected.subscribe(fn);\n  }\n\n  registerOnTouched(fn: (value: boolean) => void): void {\n    this.element.nativeElement.addEventListener('focusout', fn);\n  }\n\n  setDisabledState?(isDisabled: boolean): void {\n    this.disabled.set(isDisabled);\n  }\n}\n"]}