@energinet/watt 1.5.13 → 1.5.14

package/fesm2022/energinet-watt-field.mjs

@@ -8,6 +8,7 @@ import { WattTooltipDirective } from '@energinet/watt/tooltip';
 import { VaterStackComponent } from '@energinet/watt/vater';
 import { WattRangeValidators } from '@energinet/watt/validators';
 import { Subject } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
 
 //#region License
 /**
@@ -117,7 +118,17 @@ class WattFieldComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: WattFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: WattFieldComponent, isStandalone: true, selector: "watt-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, chipMode: { classPropertyName: "chipMode", publicName: "chipMode", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, anchorName: { classPropertyName: "anchorName", publicName: "anchorName", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.watt-field--chip": "chipMode()", "class.watt-field--unlabelled": "unlabelled()", "class.watt-field--disabled": "control()?.disabled" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <label [attr.for]="id()">
+    @if (chipMode()) {
+      <span class="watt-label">
+        <ng-container *ngTemplateOutlet="template" />
+      </span>
+    } @else {
+      <label [attr.for]="id()">
+        <ng-container *ngTemplateOutlet="template" />
+      </label>
+    }
+
+    <ng-template #template>
       @if (label()) {
         <span class="label" [class.required]="isRequired()">
           {{ label() }}
@@ -149,13 +160,29 @@ class WattFieldComponent {
       @if (isEmpty()) {
         <watt-field-error>{{ intl.required }}</watt-field-error>
       }
-    </label>
-  `, isInline: true, styles: ["[watt-field-disabled=true] watt-field .label,.watt-field--disabled .label{color:var(--watt-disabled-text-label-color)}[watt-field-disabled=true] .watt-field-wrapper,.watt-field--disabled .watt-field-wrapper{background-color:var(--watt-field-disabled-background-color)}watt-field watt-field-hint{display:block}watt-field watt-field-error,.ng-valid watt-field watt-field-error{display:none}form.ng-submitted .ng-invalid watt-field watt-field-hint,:not(form).ng-touched.ng-invalid watt-field watt-field-hint{display:none}form.ng-submitted .ng-invalid watt-field watt-field-error,:not(form).ng-touched.ng-invalid watt-field watt-field-error{display:block}form.ng-submitted .ng-invalid watt-field .watt-field-wrapper,:not(form).ng-touched.ng-invalid watt-field .watt-field-wrapper{border-color:var(--watt-color-state-danger)}form.ng-submitted .ng-invalid watt-field .label,:not(form).ng-touched.ng-invalid watt-field .label{color:var(--watt-color-state-danger)}form.ng-submitted .ng-invalid watt-field .label.required:after,:not(form).ng-touched.ng-invalid watt-field .label.required:after{color:var(--watt-color-state-danger)}.watt-field-wrapper input{width:100%;border:none;outline:none;background-color:transparent}.watt-field-placeholder{position:absolute;padding:1px 2px;pointer-events:none;white-space:nowrap}.watt-field--has-placeholder input,.watt-field-placeholder{font-family:Droid Sans Mono,monospace;letter-spacing:-.03em}.watt-field-filler{color:var(--watt-on-light-low-emphasis)}.watt-field-ghost{color:transparent}watt-field{--watt-text-color: var(--watt-on-light-high-emphasis);--watt-disabled-text-label-color: var(--watt-on-light-low-emphasis);--watt-field-disabled-background-color: var(--watt-color-neutral-grey-100);--watt-input-border-radius: 4px;--watt-border-color: var(--watt-on-light-low-emphasis);--watt-label-text-color: var(--watt-text-color);width:100%;display:block}watt-field:not(.watt-field--chip){min-height:93px}watt-field:not(.watt-field--chip).watt-field--unlabelled{min-height:66px}watt-field.watt-field--chip .watt-field-wrapper{border:none;padding-left:0}watt-field .label{min-height:27px;display:flex;align-items:center}watt-field .label watt-icon{margin-left:var(--watt-space-s)}watt-field .label watt-tooltip{max-width:250px}watt-field .label.required:after{content:\"*\";margin-left:var(--watt-space-s);color:var(--watt-color-primary)}watt-field label{color:var(--watt-label-text-color);display:block;width:100%}watt-field label .watt-field-wrapper{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;display:flex;position:relative;width:100%;padding-left:var(--watt-space-s);border-radius:var(--watt-input-border-radius);border:1px solid var(--watt-border-color);overflow:hidden;color:var(--watt-text-color);align-items:center;gap:var(--watt-space-m);background-color:var(--watt-color-neutral-white)}watt-field label .watt-field-wrapper:focus-within{--watt-border-color: var(--watt-color-primary)}watt-field label watt-field-hint,watt-field label watt-field-error{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0}watt-field label :not(.watt-field--chip) watt-field-hint,watt-field label :not(.watt-field--chip) watt-field-error{padding-left:var(--watt-space-s)}watt-field.watt-field--chip .watt-field-wrapper{margin-bottom:var(--watt-space-xs)}watt-field:not(.watt-field--chip) .watt-field-wrapper{min-height:46px}\n"], dependencies: [{ kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }, { kind: "directive", type: WattTooltipDirective, selector: "[wattTooltip]", inputs: ["wattTooltip", "wattTooltipPosition", "wattTooltipVariant"], exportAs: ["wattTooltip"] }, { kind: "component", type: WattFieldErrorComponent, selector: "watt-field-error" }, { kind: "component", type: VaterStackComponent, selector: "vater-stack, [vater-stack]", inputs: ["align", "direction", "gap", "justify", "offset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    </ng-template>
+  `, isInline: true, styles: ["[watt-field-disabled=true] watt-field .label,.watt-field--disabled .label{color:var(--watt-disabled-text-label-color)}[watt-field-disabled=true] .watt-field-wrapper,.watt-field--disabled .watt-field-wrapper{background-color:var(--watt-field-disabled-background-color)}watt-field watt-field-hint{display:block}watt-field watt-field-error,.ng-valid watt-field watt-field-error{display:none}form.ng-submitted .ng-invalid watt-field watt-field-hint,:not(form).ng-touched.ng-invalid watt-field watt-field-hint{display:none}form.ng-submitted .ng-invalid watt-field watt-field-error,:not(form).ng-touched.ng-invalid watt-field watt-field-error{display:block}form.ng-submitted .ng-invalid watt-field .watt-field-wrapper,:not(form).ng-touched.ng-invalid watt-field .watt-field-wrapper{border-color:var(--watt-color-state-danger)}form.ng-submitted .ng-invalid watt-field .label,:not(form).ng-touched.ng-invalid watt-field .label{color:var(--watt-color-state-danger)}form.ng-submitted .ng-invalid watt-field .label.required:after,:not(form).ng-touched.ng-invalid watt-field .label.required:after{color:var(--watt-color-state-danger)}.watt-field-wrapper input{width:100%;border:none;outline:none;background-color:transparent}.watt-field-placeholder{position:absolute;padding:1px 2px;pointer-events:none;white-space:nowrap}.watt-field--has-placeholder input,.watt-field-placeholder{font-family:Droid Sans Mono,monospace;letter-spacing:-.03em}.watt-field-filler{color:var(--watt-on-light-low-emphasis)}.watt-field-ghost{color:transparent}watt-field{--watt-text-color: var(--watt-on-light-high-emphasis);--watt-disabled-text-label-color: var(--watt-on-light-low-emphasis);--watt-field-disabled-background-color: var(--watt-color-neutral-grey-100);--watt-input-border-radius: 4px;--watt-border-color: var(--watt-on-light-low-emphasis);--watt-label-text-color: var(--watt-text-color);width:100%;display:block}watt-field:not(.watt-field--chip){min-height:93px}watt-field:not(.watt-field--chip).watt-field--unlabelled{min-height:66px}watt-field .label{min-height:27px;display:flex;align-items:center}watt-field .label watt-icon{margin-left:var(--watt-space-s)}watt-field .label watt-tooltip{max-width:250px}watt-field .label.required:after{content:\"*\";margin-left:var(--watt-space-s);color:var(--watt-color-primary)}watt-field label,watt-field .watt-label{color:var(--watt-label-text-color);display:block;width:100%}watt-field label .watt-field-wrapper,watt-field .watt-label .watt-field-wrapper{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;display:flex;position:relative;width:100%;padding-left:var(--watt-space-s);border-radius:var(--watt-input-border-radius);border:1px solid var(--watt-border-color);overflow:hidden;color:var(--watt-text-color);align-items:center;gap:var(--watt-space-m);background-color:var(--watt-color-neutral-white)}watt-field label .watt-field-wrapper:focus-within,watt-field .watt-label .watt-field-wrapper:focus-within{--watt-border-color: var(--watt-color-primary)}watt-field label watt-field-hint,watt-field label watt-field-error,watt-field .watt-label watt-field-hint,watt-field .watt-label watt-field-error{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0}watt-field label :not(.watt-field--chip) watt-field-hint,watt-field label :not(.watt-field--chip) watt-field-error,watt-field .watt-label :not(.watt-field--chip) watt-field-hint,watt-field .watt-label :not(.watt-field--chip) watt-field-error{padding-left:var(--watt-space-s)}watt-field.watt-field--chip .watt-field-wrapper{border:none;padding-left:0;margin-bottom:var(--watt-space-xs)}watt-field:not(.watt-field--chip) .watt-field-wrapper{min-height:46px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: WattIconComponent, selector: "watt-icon", inputs: ["name", "label", "size", "state"] }, { kind: "directive", type: WattTooltipDirective, selector: "[wattTooltip]", inputs: ["wattTooltip", "wattTooltipPosition", "wattTooltipVariant"], exportAs: ["wattTooltip"] }, { kind: "component", type: WattFieldErrorComponent, selector: "watt-field-error" }, { 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: WattFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'watt-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [WattIconComponent, WattTooltipDirective, WattFieldErrorComponent, VaterStackComponent], template: `
-    <label [attr.for]="id()">
+            args: [{ selector: 'watt-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        NgTemplateOutlet,
+                        WattIconComponent,
+                        WattTooltipDirective,
+                        WattFieldErrorComponent,
+                        VaterStackComponent,
+                    ], template: `
+    @if (chipMode()) {
+      <span class="watt-label">
+        <ng-container *ngTemplateOutlet="template" />
+      </span>
+    } @else {
+      <label [attr.for]="id()">
+        <ng-container *ngTemplateOutlet="template" />
+      </label>
+    }
+
+    <ng-template #template>
       @if (label()) {
         <span class="label" [class.required]="isRequired()">
           {{ label() }}
@@ -187,12 +214,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
       @if (isEmpty()) {
         <watt-field-error>{{ intl.required }}</watt-field-error>
       }
-    </label>
+    </ng-template>
   `, host: {
                         '[class.watt-field--chip]': 'chipMode()',
                         '[class.watt-field--unlabelled]': 'unlabelled()',
                         '[class.watt-field--disabled]': 'control()?.disabled',
-                    }, styles: ["[watt-field-disabled=true] watt-field .label,.watt-field--disabled .label{color:var(--watt-disabled-text-label-color)}[watt-field-disabled=true] .watt-field-wrapper,.watt-field--disabled .watt-field-wrapper{background-color:var(--watt-field-disabled-background-color)}watt-field watt-field-hint{display:block}watt-field watt-field-error,.ng-valid watt-field watt-field-error{display:none}form.ng-submitted .ng-invalid watt-field watt-field-hint,:not(form).ng-touched.ng-invalid watt-field watt-field-hint{display:none}form.ng-submitted .ng-invalid watt-field watt-field-error,:not(form).ng-touched.ng-invalid watt-field watt-field-error{display:block}form.ng-submitted .ng-invalid watt-field .watt-field-wrapper,:not(form).ng-touched.ng-invalid watt-field .watt-field-wrapper{border-color:var(--watt-color-state-danger)}form.ng-submitted .ng-invalid watt-field .label,:not(form).ng-touched.ng-invalid watt-field .label{color:var(--watt-color-state-danger)}form.ng-submitted .ng-invalid watt-field .label.required:after,:not(form).ng-touched.ng-invalid watt-field .label.required:after{color:var(--watt-color-state-danger)}.watt-field-wrapper input{width:100%;border:none;outline:none;background-color:transparent}.watt-field-placeholder{position:absolute;padding:1px 2px;pointer-events:none;white-space:nowrap}.watt-field--has-placeholder input,.watt-field-placeholder{font-family:Droid Sans Mono,monospace;letter-spacing:-.03em}.watt-field-filler{color:var(--watt-on-light-low-emphasis)}.watt-field-ghost{color:transparent}watt-field{--watt-text-color: var(--watt-on-light-high-emphasis);--watt-disabled-text-label-color: var(--watt-on-light-low-emphasis);--watt-field-disabled-background-color: var(--watt-color-neutral-grey-100);--watt-input-border-radius: 4px;--watt-border-color: var(--watt-on-light-low-emphasis);--watt-label-text-color: var(--watt-text-color);width:100%;display:block}watt-field:not(.watt-field--chip){min-height:93px}watt-field:not(.watt-field--chip).watt-field--unlabelled{min-height:66px}watt-field.watt-field--chip .watt-field-wrapper{border:none;padding-left:0}watt-field .label{min-height:27px;display:flex;align-items:center}watt-field .label watt-icon{margin-left:var(--watt-space-s)}watt-field .label watt-tooltip{max-width:250px}watt-field .label.required:after{content:\"*\";margin-left:var(--watt-space-s);color:var(--watt-color-primary)}watt-field label{color:var(--watt-label-text-color);display:block;width:100%}watt-field label .watt-field-wrapper{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;display:flex;position:relative;width:100%;padding-left:var(--watt-space-s);border-radius:var(--watt-input-border-radius);border:1px solid var(--watt-border-color);overflow:hidden;color:var(--watt-text-color);align-items:center;gap:var(--watt-space-m);background-color:var(--watt-color-neutral-white)}watt-field label .watt-field-wrapper:focus-within{--watt-border-color: var(--watt-color-primary)}watt-field label watt-field-hint,watt-field label watt-field-error{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0}watt-field label :not(.watt-field--chip) watt-field-hint,watt-field label :not(.watt-field--chip) watt-field-error{padding-left:var(--watt-space-s)}watt-field.watt-field--chip .watt-field-wrapper{margin-bottom:var(--watt-space-xs)}watt-field:not(.watt-field--chip) .watt-field-wrapper{min-height:46px}\n"] }]
+                    }, styles: ["[watt-field-disabled=true] watt-field .label,.watt-field--disabled .label{color:var(--watt-disabled-text-label-color)}[watt-field-disabled=true] .watt-field-wrapper,.watt-field--disabled .watt-field-wrapper{background-color:var(--watt-field-disabled-background-color)}watt-field watt-field-hint{display:block}watt-field watt-field-error,.ng-valid watt-field watt-field-error{display:none}form.ng-submitted .ng-invalid watt-field watt-field-hint,:not(form).ng-touched.ng-invalid watt-field watt-field-hint{display:none}form.ng-submitted .ng-invalid watt-field watt-field-error,:not(form).ng-touched.ng-invalid watt-field watt-field-error{display:block}form.ng-submitted .ng-invalid watt-field .watt-field-wrapper,:not(form).ng-touched.ng-invalid watt-field .watt-field-wrapper{border-color:var(--watt-color-state-danger)}form.ng-submitted .ng-invalid watt-field .label,:not(form).ng-touched.ng-invalid watt-field .label{color:var(--watt-color-state-danger)}form.ng-submitted .ng-invalid watt-field .label.required:after,:not(form).ng-touched.ng-invalid watt-field .label.required:after{color:var(--watt-color-state-danger)}.watt-field-wrapper input{width:100%;border:none;outline:none;background-color:transparent}.watt-field-placeholder{position:absolute;padding:1px 2px;pointer-events:none;white-space:nowrap}.watt-field--has-placeholder input,.watt-field-placeholder{font-family:Droid Sans Mono,monospace;letter-spacing:-.03em}.watt-field-filler{color:var(--watt-on-light-low-emphasis)}.watt-field-ghost{color:transparent}watt-field{--watt-text-color: var(--watt-on-light-high-emphasis);--watt-disabled-text-label-color: var(--watt-on-light-low-emphasis);--watt-field-disabled-background-color: var(--watt-color-neutral-grey-100);--watt-input-border-radius: 4px;--watt-border-color: var(--watt-on-light-low-emphasis);--watt-label-text-color: var(--watt-text-color);width:100%;display:block}watt-field:not(.watt-field--chip){min-height:93px}watt-field:not(.watt-field--chip).watt-field--unlabelled{min-height:66px}watt-field .label{min-height:27px;display:flex;align-items:center}watt-field .label watt-icon{margin-left:var(--watt-space-s)}watt-field .label watt-tooltip{max-width:250px}watt-field .label.required:after{content:\"*\";margin-left:var(--watt-space-s);color:var(--watt-color-primary)}watt-field label,watt-field .watt-label{color:var(--watt-label-text-color);display:block;width:100%}watt-field label .watt-field-wrapper,watt-field .watt-label .watt-field-wrapper{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0;display:flex;position:relative;width:100%;padding-left:var(--watt-space-s);border-radius:var(--watt-input-border-radius);border:1px solid var(--watt-border-color);overflow:hidden;color:var(--watt-text-color);align-items:center;gap:var(--watt-space-m);background-color:var(--watt-color-neutral-white)}watt-field label .watt-field-wrapper:focus-within,watt-field .watt-label .watt-field-wrapper:focus-within{--watt-border-color: var(--watt-color-primary)}watt-field label watt-field-hint,watt-field label watt-field-error,watt-field .watt-label watt-field-hint,watt-field .watt-label watt-field-error{font-size:.875rem;line-height:1.25rem;font-weight:400;text-transform:none;letter-spacing:0}watt-field label :not(.watt-field--chip) watt-field-hint,watt-field label :not(.watt-field--chip) watt-field-error,watt-field .watt-label :not(.watt-field--chip) watt-field-hint,watt-field .watt-label :not(.watt-field--chip) watt-field-error{padding-left:var(--watt-space-s)}watt-field.watt-field--chip .watt-field-wrapper{border:none;padding-left:0;margin-bottom:var(--watt-space-xs)}watt-field:not(.watt-field--chip) .watt-field-wrapper{min-height:46px}\n"] }]
         }], ctorParameters: () => [] });
 
 //#region License

package/fesm2022/energinet-watt-field.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-field.mjs","sources":["../../../libs/watt/package/field/watt-field-intl.service.ts","../../../libs/watt/package/field/watt-field-error.component.ts","../../../libs/watt/package/field/watt-field.component.ts","../../../libs/watt/package/field/watt-field-hint.component.ts","../../../libs/watt/package/field/index.ts","../../../libs/watt/package/field/energinet-watt-field.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 { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class WattFieldIntlService {\n  readonly changes: Subject<void> = new Subject<void>();\n  required = 'Field is required';\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 { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'watt-field-error',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  styles: [\n    `\n      watt-field-error {\n        color: var(--watt-color-state-danger);\n      }\n    `,\n  ],\n})\nexport class WattFieldErrorComponent {}\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 {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { FormControl, ValidationErrors, Validators } from '@angular/forms';\nimport { filter, map, startWith, switchMap, tap } from 'rxjs/operators';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\n\nimport { WattIconComponent } from '@energinet/watt/icon';\nimport { WattTooltipDirective } from '@energinet/watt/tooltip';\nimport { VaterStackComponent } from '@energinet/watt/vater';\nimport { WattRangeValidators } from '@energinet/watt/validators';\n\nimport { WattFieldIntlService } from './watt-field-intl.service';\nimport { WattFieldErrorComponent } from './watt-field-error.component';\n\n@Component({\n  selector: 'watt-field',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [WattIconComponent, WattTooltipDirective, WattFieldErrorComponent, VaterStackComponent],\n  styleUrls: ['./watt-field.component.scss'],\n  template: `\n    <label [attr.for]=\"id()\">\n      @if (label()) {\n        <span class=\"label\" [class.required]=\"isRequired()\">\n          {{ label() }}\n          @if (tooltip(); as tooltip) {\n            <watt-icon name=\"info\" wattTooltipPosition=\"top\" [wattTooltip]=\"tooltip\" />\n          }\n        </span>\n      }\n      <vater-stack direction=\"row\" gap=\"s\">\n        <div\n          #wrapper\n          class=\"watt-field-wrapper\"\n          [class.watt-field--has-placeholder]=\"!!placeholder()\"\n          [style.anchor-name]=\"anchorName()\"\n        >\n          @if (placeholder()) {\n            <div class=\"watt-field-placeholder\" aria-hidden=\"true\">\n              <span class=\"watt-field-ghost\">{{ ghost() }}</span>\n              <span class=\"watt-field-filler\">{{ filler() }}</span>\n            </div>\n          }\n          <ng-content />\n        </div>\n        <ng-content select=\"watt-field-descriptor\" />\n      </vater-stack>\n      <ng-content select=\"[popover]\" />\n      <ng-content select=\"watt-field-hint\" />\n      <ng-content select=\"watt-field-error\" />\n      @if (isEmpty()) {\n        <watt-field-error>{{ intl.required }}</watt-field-error>\n      }\n    </label>\n  `,\n  host: {\n    '[class.watt-field--chip]': 'chipMode()',\n    '[class.watt-field--unlabelled]': 'unlabelled()',\n    '[class.watt-field--disabled]': 'control()?.disabled',\n  },\n})\nexport class WattFieldComponent {\n  intl = inject(WattFieldIntlService);\n\n  control = input<FormControl | null>(null);\n  label = input<string>();\n  id = input<string>();\n  chipMode = input(false);\n  tooltip = input<string>();\n  placeholder = input('');\n  anchorName = input<string>();\n\n  value = signal('');\n  filler = computed(() => this.placeholder().slice(this.value().length));\n  ghost = computed(() => this.value().slice(0, this.placeholder().length));\n\n  unlabelled = computed(() => !this.label());\n\n  errors = signal<ValidationErrors | null>(null);\n  isRequired = signal(false);\n  isEmpty = computed(() => this.errors()?.['required'] || this.errors()?.['rangeRequired']);\n\n  // Used for text fields with autocomplete\n  wrapper = viewChild.required<ElementRef>('wrapper');\n\n  constructor() {\n    const control$ = toObservable(this.control).pipe(filter((control) => control !== null));\n\n    // Track value in order to update ghost and filler\n    const value$ = control$.pipe(\n      switchMap((control) =>\n        control.valueChanges.pipe(\n          startWith(control.value),\n          map((value) => (value === null || value === undefined ? '' : value.toString())),\n          tap((value) => this.value.set(value))\n        )\n      ),\n      takeUntilDestroyed()\n    );\n\n    // Track status in order to update required state and show errors\n    const status$ = control$.pipe(\n      switchMap((control) =>\n        control.statusChanges.pipe(\n          startWith(control.status),\n          tap(() => this.isRequired.set(this.isRequiredControl(control))),\n          tap(() => this.errors.set(control.errors))\n        )\n      ),\n      takeUntilDestroyed()\n    );\n\n    // Subscribe for side effects\n    value$.subscribe();\n    status$.subscribe();\n  }\n\n  isRequiredControl(control: FormControl) {\n    const validators = [Validators.required, WattRangeValidators.required];\n    return validators.some((validator) => control.hasValidator(validator));\n  }\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 { Component } from '@angular/core';\n\n@Component({\n  selector: 'watt-field-hint',\n  styles: [\n    `\n      :host {\n        color: var(--watt-color-neutral-grey-700);\n      }\n    `,\n  ],\n  template: `<ng-content />`,\n})\nexport class WattFieldHintComponent {}\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 { WattFieldComponent } from './watt-field.component';\nexport { WattFieldErrorComponent } from './watt-field-error.component';\nexport { WattFieldHintComponent } from './watt-field-hint.component';\nexport { WattFieldIntlService } from './watt-field-intl.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"energinet-watt-field.mjs","sources":["../../../libs/watt/package/field/watt-field-intl.service.ts","../../../libs/watt/package/field/watt-field-error.component.ts","../../../libs/watt/package/field/watt-field.component.ts","../../../libs/watt/package/field/watt-field-hint.component.ts","../../../libs/watt/package/field/index.ts","../../../libs/watt/package/field/energinet-watt-field.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 { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable({ providedIn: 'root' })\nexport class WattFieldIntlService {\n  readonly changes: Subject<void> = new Subject<void>();\n  required = 'Field is required';\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 { Component, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'watt-field-error',\n  template: `<ng-content />`,\n  encapsulation: ViewEncapsulation.None,\n  styles: [\n    `\n      watt-field-error {\n        color: var(--watt-color-state-danger);\n      }\n    `,\n  ],\n})\nexport class WattFieldErrorComponent {}\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 {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  computed,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { FormControl, ValidationErrors, Validators } from '@angular/forms';\nimport { filter, map, startWith, switchMap, tap } from 'rxjs/operators';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\n\nimport { WattIconComponent } from '@energinet/watt/icon';\nimport { WattTooltipDirective } from '@energinet/watt/tooltip';\nimport { VaterStackComponent } from '@energinet/watt/vater';\nimport { WattRangeValidators } from '@energinet/watt/validators';\n\nimport { WattFieldIntlService } from './watt-field-intl.service';\nimport { WattFieldErrorComponent } from './watt-field-error.component';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n  selector: 'watt-field',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    NgTemplateOutlet,\n    WattIconComponent,\n    WattTooltipDirective,\n    WattFieldErrorComponent,\n    VaterStackComponent,\n  ],\n  styleUrls: ['./watt-field.component.scss'],\n  template: `\n    @if (chipMode()) {\n      <span class=\"watt-label\">\n        <ng-container *ngTemplateOutlet=\"template\" />\n      </span>\n    } @else {\n      <label [attr.for]=\"id()\">\n        <ng-container *ngTemplateOutlet=\"template\" />\n      </label>\n    }\n\n    <ng-template #template>\n      @if (label()) {\n        <span class=\"label\" [class.required]=\"isRequired()\">\n          {{ label() }}\n          @if (tooltip(); as tooltip) {\n            <watt-icon name=\"info\" wattTooltipPosition=\"top\" [wattTooltip]=\"tooltip\" />\n          }\n        </span>\n      }\n      <vater-stack direction=\"row\" gap=\"s\">\n        <div\n          #wrapper\n          class=\"watt-field-wrapper\"\n          [class.watt-field--has-placeholder]=\"!!placeholder()\"\n          [style.anchor-name]=\"anchorName()\"\n        >\n          @if (placeholder()) {\n            <div class=\"watt-field-placeholder\" aria-hidden=\"true\">\n              <span class=\"watt-field-ghost\">{{ ghost() }}</span>\n              <span class=\"watt-field-filler\">{{ filler() }}</span>\n            </div>\n          }\n          <ng-content />\n        </div>\n        <ng-content select=\"watt-field-descriptor\" />\n      </vater-stack>\n      <ng-content select=\"[popover]\" />\n      <ng-content select=\"watt-field-hint\" />\n      <ng-content select=\"watt-field-error\" />\n      @if (isEmpty()) {\n        <watt-field-error>{{ intl.required }}</watt-field-error>\n      }\n    </ng-template>\n  `,\n  host: {\n    '[class.watt-field--chip]': 'chipMode()',\n    '[class.watt-field--unlabelled]': 'unlabelled()',\n    '[class.watt-field--disabled]': 'control()?.disabled',\n  },\n})\nexport class WattFieldComponent {\n  intl = inject(WattFieldIntlService);\n\n  control = input<FormControl | null>(null);\n  label = input<string>();\n  id = input<string>();\n  chipMode = input(false);\n  tooltip = input<string>();\n  placeholder = input('');\n  anchorName = input<string>();\n\n  value = signal('');\n  filler = computed(() => this.placeholder().slice(this.value().length));\n  ghost = computed(() => this.value().slice(0, this.placeholder().length));\n\n  unlabelled = computed(() => !this.label());\n\n  errors = signal<ValidationErrors | null>(null);\n  isRequired = signal(false);\n  isEmpty = computed(() => this.errors()?.['required'] || this.errors()?.['rangeRequired']);\n\n  // Used for text fields with autocomplete\n  wrapper = viewChild.required<ElementRef>('wrapper');\n\n  constructor() {\n    const control$ = toObservable(this.control).pipe(filter((control) => control !== null));\n\n    // Track value in order to update ghost and filler\n    const value$ = control$.pipe(\n      switchMap((control) =>\n        control.valueChanges.pipe(\n          startWith(control.value),\n          map((value) => (value === null || value === undefined ? '' : value.toString())),\n          tap((value) => this.value.set(value))\n        )\n      ),\n      takeUntilDestroyed()\n    );\n\n    // Track status in order to update required state and show errors\n    const status$ = control$.pipe(\n      switchMap((control) =>\n        control.statusChanges.pipe(\n          startWith(control.status),\n          tap(() => this.isRequired.set(this.isRequiredControl(control))),\n          tap(() => this.errors.set(control.errors))\n        )\n      ),\n      takeUntilDestroyed()\n    );\n\n    // Subscribe for side effects\n    value$.subscribe();\n    status$.subscribe();\n  }\n\n  isRequiredControl(control: FormControl) {\n    const validators = [Validators.required, WattRangeValidators.required];\n    return validators.some((validator) => control.hasValidator(validator));\n  }\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 { Component } from '@angular/core';\n\n@Component({\n  selector: 'watt-field-hint',\n  styles: [\n    `\n      :host {\n        color: var(--watt-color-neutral-grey-700);\n      }\n    `,\n  ],\n  template: `<ng-content />`,\n})\nexport class WattFieldHintComponent {}\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 { WattFieldComponent } from './watt-field.component';\nexport { WattFieldErrorComponent } from './watt-field-error.component';\nexport { WattFieldHintComponent } from './watt-field-hint.component';\nexport { WattFieldIntlService } from './watt-field-intl.service';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@energinet/watt",
-  "version": "1.5.13",
+  "version": "1.5.14",
   "license": "Apache-2.0",
   "exports": {
     ".": {