@energinet/watt 0.0.1

package/fesm2022/energinet-watt-picker-timepicker.mjs

@@ -0,0 +1,394 @@
+import * as i3 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, ChangeDetectorRef, DestroyRef, HostBinding, ViewChild, Input, ViewEncapsulation, Component } from '@angular/core';
+import { NgControl } from '@angular/forms';
+import * as i1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldControl } from '@angular/material/form-field';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { Subject } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { maskitoTimeOptionsGenerator } from '@maskito/kit';
+import { WattButtonComponent } from '@energinet/watt/button';
+import { WattFieldComponent } from '@energinet/watt/field';
+import { WattSliderComponent } from '@energinet/watt/slider';
+import { MASKITO_DEFAULT_OPTIONS } from '@maskito/core';
+import { WattPickerBase, WattPlaceholderMaskComponent } from '@energinet/watt/picker/__shared';
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+const TIME_FIXED_CHARACTERS = [':', '.'];
+const SEPARATOR = ' - ';
+function maskitoTimeRangeOptionsGenerator() {
+    return {
+        ...MASKITO_DEFAULT_OPTIONS,
+        mask: [
+            ...Array.from('HH:MM').map((char) => (TIME_FIXED_CHARACTERS.includes(char) ? char : /\d/)),
+            ...Array.from(SEPARATOR),
+            ...Array.from('HH:MM').map((char) => (TIME_FIXED_CHARACTERS.includes(char) ? char : /\d/)),
+        ],
+        preprocessors: [
+            ({ elementState, data }, actionType) => {
+                if (actionType !== 'insert' || data.length > 1) {
+                    return {
+                        elementState,
+                        data,
+                    };
+                }
+                if (Number.parseInt(data) > 2 && isFirstHourSegment(elementState)) {
+                    return {
+                        elementState: {
+                            selection: elementState.selection,
+                            value: elementState.value + '0' + data,
+                        },
+                        data: '0' + data,
+                    };
+                }
+                if (Number.parseInt(data) > 5 &&
+                    (elementState.value.length === 3 || elementState.value.length === 10)) {
+                    return {
+                        elementState: {
+                            selection: elementState.selection,
+                            value: elementState.value + '0' + data,
+                        },
+                        data: '0' + data,
+                    };
+                }
+                return {
+                    elementState,
+                    data,
+                };
+            },
+        ],
+        overwriteMode: 'replace',
+    };
+}
+function isFirstHourSegment(elementState) {
+    if (elementState.value.length === 0) {
+        return true;
+    }
+    if (elementState.value.endsWith(SEPARATOR)) {
+        return elementState.value.length === 8;
+    }
+    if (elementState.value.endsWith(' -')) {
+        return elementState.value.length === 7;
+    }
+    if (elementState.value.endsWith(' ')) {
+        return elementState.value.length === 6;
+    }
+    return elementState.value.length === 5;
+}
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+// Constants for working with time intervals
+const minutesInADay = 24 * 60;
+const quartersInADay = minutesInADay / 15;
+// Show slider initially as "00:00 - 23:59"
+const initialSliderValue = { min: 0, max: minutesInADay - 1 };
+/** Converts string time format (HH:MM) to number of minutes. */
+function timeToMinutes(value) {
+    const [hours, minutes] = value.split(':');
+    return Number(hours) * 60 + Number(minutes);
+}
+/** Converts number of minutes to string time format (HH:MM). */
+function minutesToTime(value) {
+    const hours = `${Math.floor(value / 60)}`;
+    const minutes = `${value % 60}`;
+    return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+}
+/**
+ * Usage:
+ * `import { WattTimepickerComponent } from '@energinet-datahub/watt/timepicker';`
+ *
+ * IMPORTANT:
+ * The styling is calculated based on our monospaced font.
+ */
+class WattTimepickerComponent extends WattPickerBase {
+    elementRef = inject(ElementRef);
+    changeDetectionRef = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    label = '';
+    /**
+     * Text to display on label for time range slider.
+     */
+    sliderLabel = '';
+    /**
+     * @ignore
+     */
+    input;
+    /**
+     * @ignore
+     */
+    startInput;
+    /**
+     * @ignore
+     */
+    endInput;
+    /**
+     * @ignore
+     */
+    sliderId = `${this.id}-slider`;
+    /**
+     * Used for defining a relationship between the time picker and
+     * the slider overlay (since the DOM hierarchy cannot be used).
+     * @ignore
+     */
+    get ariaOwns() {
+        // Only range input has slider
+        return this.range && this.sliderOpen ? this.sliderId : undefined;
+    }
+    /**
+     * @ignore
+     */
+    hoursMinutesPlaceholder = 'HH:MM';
+    /**
+     * @ignore
+     */
+    rangeSeparator = ' - ';
+    /**
+     * @ignore
+     */
+    rangePlaceholder = this.hoursMinutesPlaceholder + this.rangeSeparator + this.hoursMinutesPlaceholder;
+    /**
+     * @ignore
+     */
+    _placeholder = this.hoursMinutesPlaceholder;
+    /**
+     * Whether the slider is open.
+     * @ignore
+     */
+    sliderOpen = false;
+    /**
+     * @ignore
+     */
+    sliderSteps = [...Array(quartersInADay).keys()].map((x) => x * 15).concat(minutesInADay - 1);
+    /**
+     * @ignore
+     */
+    sliderChange$ = new Subject();
+    /**
+     * @ignore
+     */
+    get sliderValue() {
+        if (this.value?.start && this.value?.end) {
+            return {
+                min: timeToMinutes(this.value.start),
+                max: timeToMinutes(this.value.end),
+            };
+        }
+        // Retain last slider value if input value is incomplete
+        return initialSliderValue;
+    }
+    /**
+     * Toggles the visibility of the slider overlay.
+     * @ignore
+     */
+    toggleSlider() {
+        this.sliderOpen = !this.sliderOpen;
+    }
+    /**
+     * Override to automatically close the slider overlay on blur.
+     * @ignore
+     */
+    onFocusOut(event) {
+        super.onFocusOut(event);
+        if (!this.focused)
+            this.sliderOpen = false;
+    }
+    /**
+     * @ignore
+     */
+    inputMask = maskitoTimeOptionsGenerator({ mode: 'HH:MM' });
+    /**
+     * @ignore
+     */
+    rangeInputMask = maskitoTimeRangeOptionsGenerator();
+    /**
+     * @ignore
+     */
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        super(`watt-timepicker-${WattTimepickerComponent.nextId++}`);
+    }
+    /**
+     * @ignore
+     */
+    initSingleInput() {
+        if (this.initialValue) {
+            this.input.nativeElement.value = this.initialValue;
+            this.input.nativeElement.dispatchEvent(new InputEvent('input'));
+        }
+    }
+    /**
+     * @ignore
+     */
+    inputChanged(value) {
+        const time = value.slice(0, this.hoursMinutesPlaceholder.length);
+        if (time.length === 0) {
+            this.control?.setValue(null);
+            return;
+        }
+        if (time.length !== this.hoursMinutesPlaceholder.length) {
+            return;
+        }
+        this.control?.setValue(time);
+    }
+    /**
+     * @ignore
+     */
+    rangeInputChanged(value) {
+        const start = value.slice(0, this.hoursMinutesPlaceholder.length);
+        if (start.length !== this.hoursMinutesPlaceholder.length) {
+            this.control?.setValue({ start: '', end: '' });
+            return;
+        }
+        if (value.length < this.rangePlaceholder.length) {
+            this.control?.setValue({ start, end: '' });
+            return;
+        }
+        let end = value.slice(this.hoursMinutesPlaceholder.length + this.rangeSeparator.length);
+        if (timeToMinutes(end) > timeToMinutes(start)) {
+            this.control?.setValue({ start, end });
+        }
+        else {
+            end = minutesToTime(timeToMinutes(start) + 1);
+            this.setRangeValueAndNotify(start, end);
+        }
+    }
+    /**
+     * @ignore
+     */
+    initRangeInput() {
+        if (this.initialValue) {
+            const { start, end } = this.initialValue;
+            this.setRangeValueAndNotify(start, end);
+        }
+        else {
+            this.control?.setValue({ start: '', end: '' });
+        }
+        this.sliderChange$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((sliderValue) => {
+            const start = minutesToTime(sliderValue.min);
+            const end = minutesToTime(sliderValue.max);
+            if (end > start) {
+                this.setRangeValueAndNotify(start, end);
+            }
+        });
+    }
+    /**
+     * @ignore
+     */
+    setRangeValueAndNotify(start, end) {
+        this.control?.setValue({ start, end });
+        this.input.nativeElement.value = start + this.rangeSeparator + end;
+        this.input.nativeElement.dispatchEvent(new InputEvent('input'));
+    }
+    /**
+     * @ignore
+     */
+    setSingleValue(value, input) {
+        input.value = value ?? '';
+    }
+    /**
+     * @ignore
+     */
+    setRangeValue(value, startInput, endInput) {
+        const { start, end } = value;
+        if (start) {
+            startInput.value = start;
+        }
+        if (end) {
+            endInput.value = end;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattTimepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattTimepickerComponent, isStandalone: true, selector: "watt-timepicker", inputs: { label: "label", sliderLabel: "sliderLabel" }, host: { properties: { "attr.aria-owns": "this.ariaOwns" } }, providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }], viewQueries: [{ propertyName: "input", first: true, predicate: ["timeInput"], descendants: true }, { propertyName: "startInput", first: true, predicate: ["startTimeInput"], descendants: true }, { propertyName: "endInput", first: true, predicate: ["endTimeInput"], descendants: 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", "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"] }, { 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: "19.2.1", ngImport: i0, type: WattTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'watt-timepicker', providers: [{ provide: MatFormFieldControl, useExisting: WattTimepickerComponent }], encapsulation: ViewEncapsulation.None, imports: [
+                        MatDatepickerModule,
+                        MatInputModule,
+                        OverlayModule,
+                        WattButtonComponent,
+                        WattSliderComponent,
+                        WattFieldComponent,
+                        WattPlaceholderMaskComponent,
+                    ], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{
+                type: Input
+            }], sliderLabel: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['timeInput']
+            }], startInput: [{
+                type: ViewChild,
+                args: ['startTimeInput']
+            }], endInput: [{
+                type: ViewChild,
+                args: ['endTimeInput']
+            }], ariaOwns: [{
+                type: HostBinding,
+                args: ['attr.aria-owns']
+            }] } });
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WattTimepickerComponent };
+//# sourceMappingURL=energinet-watt-picker-timepicker.mjs.map

package/fesm2022/energinet-watt-picker-timepicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"energinet-watt-picker-timepicker.mjs","sources":["../../../libs/watt/package/picker/timepicker/maskito-time-range-mask.ts","../../../libs/watt/package/picker/timepicker/watt-timepicker.component.ts","../../../libs/watt/package/picker/timepicker/watt-timepicker.component.html","../../../libs/watt/package/picker/timepicker/index.ts","../../../libs/watt/package/picker/timepicker/energinet-watt-picker-timepicker.ts"],"sourcesContent":["//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { MASKITO_DEFAULT_OPTIONS, MaskitoOptions } from '@maskito/core';\nimport { ElementState } from '@maskito/core/src/lib/types';\n\nconst TIME_FIXED_CHARACTERS = [':', '.'];\n\nconst SEPARATOR = ' - ';\n\nexport function maskitoTimeRangeOptionsGenerator(): Required<MaskitoOptions> {\n  return {\n    ...MASKITO_DEFAULT_OPTIONS,\n    mask: [\n      ...Array.from('HH:MM').map((char) => (TIME_FIXED_CHARACTERS.includes(char) ? char : /\\d/)),\n      ...Array.from(SEPARATOR),\n      ...Array.from('HH:MM').map((char) => (TIME_FIXED_CHARACTERS.includes(char) ? char : /\\d/)),\n    ],\n    preprocessors: [\n      ({ elementState, data }, actionType) => {\n        if (actionType !== 'insert' || data.length > 1) {\n          return {\n            elementState,\n            data,\n          };\n        }\n        if (Number.parseInt(data) > 2 && isFirstHourSegment(elementState)) {\n          return {\n            elementState: {\n              selection: elementState.selection,\n              value: elementState.value + '0' + data,\n            },\n            data: '0' + data,\n          };\n        }\n        if (\n          Number.parseInt(data) > 5 &&\n          (elementState.value.length === 3 || elementState.value.length === 10)\n        ) {\n          return {\n            elementState: {\n              selection: elementState.selection,\n              value: elementState.value + '0' + data,\n            },\n            data: '0' + data,\n          };\n        }\n        return {\n          elementState,\n          data,\n        };\n      },\n    ],\n    overwriteMode: 'replace',\n  };\n}\nfunction isFirstHourSegment(elementState: ElementState) {\n  if (elementState.value.length === 0) {\n    return true;\n  }\n  if (elementState.value.endsWith(SEPARATOR)) {\n    return elementState.value.length === 8;\n  }\n  if (elementState.value.endsWith(' -')) {\n    return elementState.value.length === 7;\n  }\n  if (elementState.value.endsWith(' ')) {\n    return elementState.value.length === 6;\n  }\n  return elementState.value.length === 5;\n}\n","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  ChangeDetectorRef,\n  Component,\n  DestroyRef,\n  ElementRef,\n  HostBinding,\n  Input,\n  ViewChild,\n  ViewEncapsulation,\n  inject,\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-datahub/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  @Input() label = '';\n  /**\n   * Text to display on label for time range slider.\n   */\n  @Input()\n  sliderLabel = '';\n\n  /**\n   * @ignore\n   */\n  @ViewChild('timeInput')\n  input!: ElementRef;\n\n  /**\n   * @ignore\n   */\n  @ViewChild('startTimeInput')\n  startInput!: ElementRef;\n\n  /**\n   * @ignore\n   */\n  @ViewChild('endTimeInput')\n  endInput!: ElementRef;\n\n  /**\n   * @ignore\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  /**\n   * @ignore\n   */\n  hoursMinutesPlaceholder = 'HH:MM';\n  /**\n   * @ignore\n   */\n  rangeSeparator = ' - ';\n  /**\n   * @ignore\n   */\n  rangePlaceholder =\n    this.hoursMinutesPlaceholder + this.rangeSeparator + this.hoursMinutesPlaceholder;\n  /**\n   * @ignore\n   */\n  protected _placeholder = this.hoursMinutesPlaceholder;\n\n  /**\n   * Whether the slider is open.\n   * @ignore\n   */\n  sliderOpen = false;\n\n  /**\n   * @ignore\n   */\n  sliderSteps = [...Array(quartersInADay).keys()].map((x) => x * 15).concat(minutesInADay - 1);\n\n  /**\n   * @ignore\n   */\n  sliderChange$ = new Subject<WattSliderValue>();\n\n  /**\n   * @ignore\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  /**\n   * @ignore\n   */\n  inputMask = maskitoTimeOptionsGenerator({ mode: 'HH:MM' });\n  /**\n   * @ignore\n   */\n  rangeInputMask = maskitoTimeRangeOptionsGenerator();\n  /**\n   * @ignore\n   */\n  destroyRef = inject(DestroyRef);\n\n  constructor() {\n    super(`watt-timepicker-${WattTimepickerComponent.nextId++}`);\n  }\n\n  /**\n   * @ignore\n   */\n  protected initSingleInput() {\n    if (this.initialValue) {\n      (this.input.nativeElement as HTMLInputElement).value = this.initialValue as string;\n      this.input.nativeElement.dispatchEvent(new InputEvent('input'));\n    }\n  }\n\n  /**\n   * @ignore\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  /**\n   * @ignore\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  /**\n   * @ignore\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  /**\n   * @ignore\n   */\n  setRangeValueAndNotify(start: string, end: string | null) {\n    this.control?.setValue({ start, end });\n    (this.input.nativeElement as HTMLInputElement).value = start + this.rangeSeparator + end;\n    this.input.nativeElement.dispatchEvent(new InputEvent('input'));\n  }\n\n  /**\n   * @ignore\n   */\n  protected setSingleValue(\n    value: Exclude<WattPickerValue, WattDateRange>,\n    input: HTMLInputElement\n  ) {\n    input.value = value ?? '';\n  }\n\n  /**\n   * @ignore\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","//#region License\n/**\n * @license\n * Copyright 2020 Energinet DataHub A/S\n *\n * Licensed under the Apache License, Version 2.0 (the \"License2\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n//#endregion\nexport { WattTimepickerComponent } from './watt-timepicker.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/energinet-watt-progress-tracker.mjs

@@ -0,0 +1,141 @@
+import * as i0 from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, input, computed } from '@angular/core';
+import { VaterStackComponent } from '@energinet/watt/vater';
+import { WattIconComponent } from '@energinet/watt/icon';
+import { WattSpinnerComponent } from '@energinet/watt/spinner';
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+class WattProgressTrackerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", 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]", inputs: ["align", "direction", "gap", "justify", "offset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", 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"] }]
+        }] });
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+class WattProgressTrackerStepComponent {
+    status = input.required();
+    label = input();
+    current = input(false);
+    ariaCurrent = computed(() => (this.current() ? 'step' : false));
+    class = computed(() => `watt-progress-tracker-step-${this.status()}`);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattProgressTrackerStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", 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') {
+          <watt-spinner [diameter]="26" [strokeWidth]="2" />
+        }
+        @case ('skipped') {
+          <watt-icon name="horizontalRule" size="xs" />
+        }
+        @case ('canceled') {
+          <watt-icon name="close" size="xs" />
+        }
+        @case ('failed') {
+          <watt-icon name="priorityHigh" size="xs" />
+        }
+        @case ('succeeded') {
+          <watt-icon name="checkmark" size="xs" />
+        }
+      }
+    </div>
+    <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: "19.2.1", 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"',
+                        '[attr.class]': 'class()',
+                        '[attr.aria-current]': 'ariaCurrent()',
+                        '[attr.aria-label]': 'label()',
+                    }, template: `
+    <div class="watt-progress-tracker-step-icon">
+      @switch (status()) {
+        @case ('running') {
+          <watt-spinner [diameter]="26" [strokeWidth]="2" />
+        }
+        @case ('skipped') {
+          <watt-icon name="horizontalRule" size="xs" />
+        }
+        @case ('canceled') {
+          <watt-icon name="close" size="xs" />
+        }
+        @case ('failed') {
+          <watt-icon name="priorityHigh" size="xs" />
+        }
+        @case ('succeeded') {
+          <watt-icon name="checkmark" size="xs" />
+        }
+      }
+    </div>
+    <div class="watt-progress-tracker-step-text"><ng-content /></div>
+  `, 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"] }]
+        }] });
+
+//#region License
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#endregion
+const WATT_PROGRESS_TRACKER = [
+    WattProgressTrackerComponent,
+    WattProgressTrackerStepComponent,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WATT_PROGRESS_TRACKER, WattProgressTrackerComponent, WattProgressTrackerStepComponent };
+//# sourceMappingURL=energinet-watt-progress-tracker.mjs.map