@energinet/watt 1.7.1 → 2.0.1

package/fesm2022/energinet-watt-vater.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Input, Directive, ViewEncapsulation, Component } from '@angular/core';
+import { input, booleanAttribute, computed, Directive, ViewEncapsulation, Component } from '@angular/core';
 
 //#region License
 /**
@@ -21,40 +21,89 @@ import { HostBinding, Input, Directive, ViewEncapsulation, Component } from '@an
 //#endregion
 /* eslint-disable @angular-eslint/no-input-rename */
 class VaterUtilityDirective {
+    /** Center the element horizontally and vertically. */
+    center = input(false, { transform: booleanAttribute });
     /** Stretch the element to fill the available space in one or both directions. */
-    fill;
+    fill = input();
     /** Position the element absolute with the provided inset value. */
-    inset;
-    center;
-    get _class() {
-        return [this.fill, this.inset].filter(Boolean);
-    }
-    get _center() {
-        return this.center === '';
-    }
+    inset = input();
+    /** Make the element scrollable. */
+    scrollable = input(false, { transform: booleanAttribute });
+    // Computed class names
+    fillClass = computed(() => this.fill() && `vater-fill-${this.fill()}`);
+    insetClass = computed(() => this.inset() && `vater-inset-${this.inset()}`);
+    class = computed(() => [this.fillClass(), this.insetClass()].filter(Boolean));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterUtilityDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.1", type: VaterUtilityDirective, isStandalone: true, selector: "[vater]", inputs: { fill: ["fill", "fill", (value) => `vater-fill-${value}`], inset: ["inset", "inset", (value) => `vater-inset-${value}`], center: "center" }, host: { properties: { "class": "this._class", "class.vater-center": "this._center" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: VaterUtilityDirective, isStandalone: true, selector: "[vater]", inputs: { center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "class.vater-center": "center()", "class.vater-scrollable": "scrollable()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterUtilityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[vater]',
+                    host: {
+                        '[class]': 'class()',
+                        '[class.vater-center]': 'center()',
+                        '[class.vater-scrollable]': 'scrollable()',
+                    },
                 }]
-        }], propDecorators: { fill: [{
-                type: Input,
-                args: [{ transform: (value) => `vater-fill-${value}` }]
-            }], inset: [{
-                type: Input,
-                args: [{ transform: (value) => `vater-inset-${value}` }]
-            }], center: [{
-                type: Input
-            }], _class: [{
-                type: HostBinding,
-                args: ['class']
-            }], _center: [{
-                type: HostBinding,
-                args: ['class.vater-center']
-            }] } });
+        }] });
+
+//#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 VaterLayoutDirective {
+    /** Cross axis alignment of the flex items. */
+    align = input();
+    /** Direction of the flex items. Defaults to `column`. */
+    direction = input('column');
+    /** Spacing between the flex items. */
+    gap = input();
+    /** Main axis alignment of the flex items. */
+    justify = input();
+    /** Offset to apply along the main axis. */
+    offset = input();
+    /** Whether the flex items should wrap. */
+    wrap = input(false, { transform: booleanAttribute });
+    // Computed class names
+    alignClass = computed(() => this.align() && `vater-align-${this.align()}`);
+    directionClass = computed(() => this.direction() && `vater-${this.direction()}`);
+    gapClass = computed(() => this.gap() && `vater-gap-${this.gap()}`);
+    justifyClass = computed(() => this.justify() && `vater-justify-${this.justify()}`);
+    offsetClass = computed(() => this.offset() && `vater-offset-${this.offset()}`);
+    class = computed(() => [
+        this.alignClass(),
+        this.directionClass(),
+        this.gapClass(),
+        this.justifyClass(),
+        this.offsetClass(),
+    ].filter(Boolean));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.1", type: VaterLayoutDirective, isStandalone: true, inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "class.vater-wrap": "wrap()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterLayoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class]': 'class()',
+                        '[class.vater-wrap]': 'wrap()',
+                    },
+                }]
+        }] });
 
 //#region License
 /**
@@ -75,88 +124,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  */
 //#endregion
 class VaterFlexComponent {
-    direction = 'column';
-    grow = '1';
-    shrink = '1';
-    basis = 'auto';
-    gap;
-    justify;
-    wrap = 'nowrap';
-    scrollable;
-    offset;
-    get _offset() {
-        if (!this.offset)
-            return undefined;
-        switch (this.direction) {
-            case 'column':
-                return `var(--watt-space-${this.offset}) 0`;
-            case 'row':
-                return `0 var(--watt-space-${this.offset})`;
-        }
-    }
-    get _gap() {
-        return this.gap ? `var(--watt-space-${this.gap})` : undefined;
-    }
-    get _overflow() {
-        return this.scrollable === '' ? 'auto' : undefined;
-    }
+    /**
+     * When set, sizes the flex items according to their width or height properties.
+     * @see https://drafts.csswg.org/css-flexbox-1/#flex-common
+     * @remarks
+     * Prefer setting `fill` on flex items over using `autoSize`.
+     */
+    autoSize = input(false, { transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterFlexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterFlexComponent, isStandalone: true, selector: "vater-flex, [vater-flex]", inputs: { direction: "direction", grow: "grow", shrink: "shrink", basis: "basis", gap: "gap", justify: "justify", wrap: "wrap", scrollable: "scrollable", offset: "offset" }, host: { properties: { "style.flex-direction": "this.direction", "style.--grow": "this.grow", "style.--shrink": "this.shrink", "style.--basis": "this.basis", "style.justify-content": "this.justify", "style.flex-wrap": "this.wrap", "style.padding": "this._offset", "style.gap": "this._gap", "style.overflow": "this._overflow" } }, hostDirectives: [{ directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}vater-flex>*,[vater-flex]>*{flex:var(--grow) var(--shrink) var(--basis)}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: VaterFlexComponent, isStandalone: true, selector: "vater-flex, [vater-flex]", inputs: { autoSize: { classPropertyName: "autoSize", publicName: "autoSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.vater-flex-auto": "autoSize()" } }, hostDirectives: [{ directive: VaterLayoutDirective, inputs: ["align", "align", "direction", "direction", "justify", "justify", "wrap", "wrap", "gap", "gap", "offset", "offset"] }, { directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset", "scrollable", "scrollable"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterFlexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vater-flex, [vater-flex]', encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: VaterLayoutDirective,
+                            inputs: ['align', 'direction', 'justify', 'wrap', 'gap', 'offset'],
+                        },
                         {
                             directive: VaterUtilityDirective,
-                            inputs: ['center', 'fill', 'inset'],
+                            inputs: ['center', 'fill', 'inset', 'scrollable'],
                         },
-                    ], template: `<ng-content />`, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}vater-flex>*,[vater-flex]>*{flex:var(--grow) var(--shrink) var(--basis)}\n"] }]
-        }], propDecorators: { direction: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.flex-direction']
-            }], grow: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--grow']
-            }], shrink: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--shrink']
-            }], basis: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.--basis']
-            }], gap: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.justify-content']
-            }], wrap: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.flex-wrap']
-            }], scrollable: [{
-                type: Input
-            }], offset: [{
-                type: Input
-            }], _offset: [{
-                type: HostBinding,
-                args: ['style.padding']
-            }], _gap: [{
-                type: HostBinding,
-                args: ['style.gap']
-            }], _overflow: [{
-                type: HostBinding,
-                args: ['style.overflow']
-            }] } });
+                    ], host: { '[class.vater-flex-auto]': 'autoSize()' }, template: `<ng-content />`, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}\n"] }]
+        }] });
 
 //#region License
 /**
@@ -178,11 +168,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 //#endregion
 class VaterSpacerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterSpacerComponent, isStandalone: true, selector: "vater-spacer, [vater-spacer]", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-spacer,[vater-spacer]{flex:1;align-self:stretch}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterSpacerComponent, isStandalone: true, selector: "vater-spacer, [vater-spacer]", ngImport: i0, template: '<ng-content />', isInline: true, styles: ["vater-spacer,[vater-spacer]{flex:1;align-self:stretch}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterSpacerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vater-spacer, [vater-spacer]', encapsulation: ViewEncapsulation.None, template: `<ng-content />`, styles: ["vater-spacer,[vater-spacer]{flex:1;align-self:stretch}\n"] }]
+            args: [{ selector: 'vater-spacer, [vater-spacer]', encapsulation: ViewEncapsulation.None, template: '<ng-content />', styles: ["vater-spacer,[vater-spacer]{flex:1;align-self:stretch}\n"] }]
         }] });
 
 //#region License
@@ -204,61 +194,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  */
 //#endregion
 class VaterStackComponent {
-    align = 'center';
-    direction = 'column';
-    gap;
-    justify;
-    offset;
-    get _offset() {
-        if (!this.offset)
-            return undefined;
-        switch (this.direction) {
-            case 'column':
-                return `var(--watt-space-${this.offset}) 0`;
-            case 'row':
-                return `0 var(--watt-space-${this.offset})`;
-        }
-    }
-    get _gap() {
-        return this.gap ? `var(--watt-space-${this.gap})` : undefined;
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterStackComponent, isStandalone: true, selector: "vater-stack, [vater-stack]", inputs: { align: "align", direction: "direction", gap: "gap", justify: "justify", offset: "offset" }, host: { properties: { "style.align-items": "this.align", "style.flex-direction": "this.direction", "style.justify-content": "this.justify", "style.padding": "this._offset", "style.gap": "this._gap" } }, hostDirectives: [{ directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-stack,[vater-stack]{display:flex;line-height:normal}\n"], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.1", type: VaterStackComponent, isStandalone: true, selector: "vater-stack, [vater-stack]", hostDirectives: [{ directive: VaterLayoutDirective, inputs: ["align", "align", "direction", "direction", "justify", "justify", "wrap", "wrap", "gap", "gap", "offset", "offset"] }, { directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset", "scrollable", "scrollable"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-stack,[vater-stack]{display:flex;line-height:normal}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: VaterStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vater-stack, [vater-stack]', encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: VaterLayoutDirective,
+                            inputs: ['align', 'direction', 'justify', 'wrap', 'gap', 'offset'],
+                        },
                         {
                             directive: VaterUtilityDirective,
-                            inputs: ['center', 'fill', 'inset'],
+                            inputs: ['center', 'fill', 'inset', 'scrollable'],
                         },
                     ], template: `<ng-content />`, styles: ["vater-stack,[vater-stack]{display:flex;line-height:normal}\n"] }]
-        }], propDecorators: { align: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.align-items']
-            }], direction: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.flex-direction']
-            }], gap: [{
-                type: Input
-            }], justify: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['style.justify-content']
-            }], offset: [{
-                type: Input
-            }], _offset: [{
-                type: HostBinding,
-                args: ['style.padding']
-            }], _gap: [{
-                type: HostBinding,
-                args: ['style.gap']
-            }] } });
+        }] });
 
 //#region License
 /**
@@ -283,5 +234,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { VaterFlexComponent, VaterSpacerComponent, VaterStackComponent, VaterUtilityDirective };
+export { VaterFlexComponent, VaterLayoutDirective, VaterSpacerComponent, VaterStackComponent, VaterUtilityDirective };
 //# sourceMappingURL=energinet-watt-vater.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"energinet-watt-vater.mjs","sources":["../../../libs/watt/package/vater/vater-utility.directive.ts","../../../libs/watt/package/vater/vater-flex.component.ts","../../../libs/watt/package/vater/vater-spacer.component.ts","../../../libs/watt/package/vater/vater-stack.component.ts","../../../libs/watt/package/vater/index.ts","../../../libs/watt/package/vater/energinet-watt-vater.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 { Directive, HostBinding, Input } from '@angular/core';\n\nexport type Fill = 'horizontal' | 'vertical' | 'both';\nexport type Inset = '0' | 'xs' | 's' | 'm' | 'ml' | 'l' | 'xl';\n\n/* eslint-disable @angular-eslint/no-input-rename */\n@Directive({\n  selector: '[vater]',\n})\nexport class VaterUtilityDirective {\n  /** Stretch the element to fill the available space in one or both directions. */\n  @Input({ transform: (value: Fill) => `vater-fill-${value}` })\n  fill?: Fill;\n\n  /** Position the element absolute with the provided inset value. */\n  @Input({ transform: (value: Inset) => `vater-inset-${value}` })\n  inset?: Inset;\n\n  @Input()\n  center?: string;\n\n  @HostBinding('class')\n  get _class() {\n    return [this.fill, this.inset].filter(Boolean);\n  }\n\n  @HostBinding('class.vater-center')\n  get _center() {\n    return this.center === '';\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, HostBinding, Input, ViewEncapsulation } from '@angular/core';\nimport { Direction, Spacing, Justify, Wrap } from './types';\nimport { VaterUtilityDirective } from './vater-utility.directive';\n\n@Component({\n  selector: 'vater-flex, [vater-flex]',\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: VaterUtilityDirective,\n      inputs: ['center', 'fill', 'inset'],\n    },\n  ],\n  styles: [\n    `\n      vater-flex,\n      [vater-flex] {\n        display: flex;\n        line-height: normal;\n      }\n\n      vater-flex > *,\n      [vater-flex] > * {\n        flex: var(--grow) var(--shrink) var(--basis);\n      }\n    `,\n  ],\n  template: `<ng-content />`,\n})\nexport class VaterFlexComponent {\n  @Input()\n  @HostBinding('style.flex-direction')\n  direction: Direction = 'column';\n\n  @Input()\n  @HostBinding('style.--grow')\n  grow = '1';\n\n  @Input()\n  @HostBinding('style.--shrink')\n  shrink = '1';\n\n  @Input()\n  @HostBinding('style.--basis')\n  basis = 'auto';\n\n  @Input()\n  gap?: Spacing;\n\n  @Input()\n  @HostBinding('style.justify-content')\n  justify?: Justify;\n\n  @Input()\n  @HostBinding('style.flex-wrap')\n  wrap?: Wrap = 'nowrap';\n\n  @Input()\n  scrollable?: string;\n\n  @Input()\n  offset?: Spacing;\n\n  @HostBinding('style.padding')\n  get _offset() {\n    if (!this.offset) return undefined;\n    switch (this.direction) {\n      case 'column':\n        return `var(--watt-space-${this.offset}) 0`;\n      case 'row':\n        return `0 var(--watt-space-${this.offset})`;\n    }\n  }\n\n  @HostBinding('style.gap')\n  get _gap() {\n    return this.gap ? `var(--watt-space-${this.gap})` : undefined;\n  }\n\n  @HostBinding('style.overflow')\n  get _overflow() {\n    return this.scrollable === '' ? 'auto' : undefined;\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, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'vater-spacer, [vater-spacer]',\n  encapsulation: ViewEncapsulation.None,\n  styles: [\n    `\n      vater-spacer,\n      [vater-spacer] {\n        flex: 1;\n        align-self: stretch;\n      }\n    `,\n  ],\n  template: `<ng-content />`,\n})\nexport class VaterSpacerComponent {}\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, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nimport { Align, Direction, Spacing, Justify } from './types';\nimport { VaterUtilityDirective } from './vater-utility.directive';\n\n@Component({\n  selector: 'vater-stack, [vater-stack]',\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: VaterUtilityDirective,\n      inputs: ['center', 'fill', 'inset'],\n    },\n  ],\n  styles: [\n    `\n      vater-stack,\n      [vater-stack] {\n        display: flex;\n        line-height: normal;\n      }\n    `,\n  ],\n  template: `<ng-content />`,\n})\nexport class VaterStackComponent {\n  @Input()\n  @HostBinding('style.align-items')\n  align: Align = 'center';\n\n  @Input()\n  @HostBinding('style.flex-direction')\n  direction: Direction = 'column';\n\n  @Input()\n  gap?: Spacing;\n\n  @Input()\n  @HostBinding('style.justify-content')\n  justify?: Justify;\n\n  @Input()\n  offset?: Spacing;\n\n  @HostBinding('style.padding')\n  get _offset() {\n    if (!this.offset) return undefined;\n    switch (this.direction) {\n      case 'column':\n        return `var(--watt-space-${this.offset}) 0`;\n      case 'row':\n        return `0 var(--watt-space-${this.offset})`;\n    }\n  }\n\n  @HostBinding('style.gap')\n  get _gap() {\n    return this.gap ? `var(--watt-space-${this.gap})` : undefined;\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\nexport { VaterFlexComponent } from './vater-flex.component';\nexport { VaterSpacerComponent } from './vater-spacer.component';\nexport { VaterStackComponent } from './vater-stack.component';\nexport { VaterUtilityDirective } from './vater-utility.directive';\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-vater.mjs","sources":["../../../libs/watt/package/vater/vater-utility.directive.ts","../../../libs/watt/package/vater/vater-layout.directive.ts","../../../libs/watt/package/vater/vater-flex.component.ts","../../../libs/watt/package/vater/vater-spacer.component.ts","../../../libs/watt/package/vater/vater-stack.component.ts","../../../libs/watt/package/vater/index.ts","../../../libs/watt/package/vater/energinet-watt-vater.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 { booleanAttribute, computed, Directive, input } from '@angular/core';\nimport { Fill, Inset } from './types';\n\n/* eslint-disable @angular-eslint/no-input-rename */\n@Directive({\n  selector: '[vater]',\n  host: {\n    '[class]': 'class()',\n    '[class.vater-center]': 'center()',\n    '[class.vater-scrollable]': 'scrollable()',\n  },\n})\nexport class VaterUtilityDirective {\n  /** Center the element horizontally and vertically. */\n  center = input(false, { transform: booleanAttribute });\n\n  /** Stretch the element to fill the available space in one or both directions. */\n  fill = input<Fill>();\n\n  /** Position the element absolute with the provided inset value. */\n  inset = input<Inset>();\n\n  /** Make the element scrollable. */\n  scrollable = input(false, { transform: booleanAttribute });\n\n  // Computed class names\n  protected fillClass = computed(() => this.fill() && `vater-fill-${this.fill()}`);\n  protected insetClass = computed(() => this.inset() && `vater-inset-${this.inset()}`);\n  protected class = computed(() => [this.fillClass(), this.insetClass()].filter(Boolean));\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 { booleanAttribute, computed, Directive, input } from '@angular/core';\nimport { Align, Direction, Justify, Spacing } from './types';\n\n@Directive({\n  host: {\n    '[class]': 'class()',\n    '[class.vater-wrap]': 'wrap()',\n  },\n})\nexport class VaterLayoutDirective {\n  /** Cross axis alignment of the flex items. */\n  align = input<Align>();\n\n  /** Direction of the flex items. Defaults to `column`. */\n  direction = input<Direction>('column');\n\n  /** Spacing between the flex items. */\n  gap = input<Spacing>();\n\n  /** Main axis alignment of the flex items. */\n  justify = input<Justify>();\n\n  /** Offset to apply along the main axis. */\n  offset = input<Spacing>();\n\n  /** Whether the flex items should wrap. */\n  wrap = input(false, { transform: booleanAttribute });\n\n  // Computed class names\n  protected alignClass = computed(() => this.align() && `vater-align-${this.align()}`);\n  protected directionClass = computed(() => this.direction() && `vater-${this.direction()}`);\n  protected gapClass = computed(() => this.gap() && `vater-gap-${this.gap()}`);\n  protected justifyClass = computed(() => this.justify() && `vater-justify-${this.justify()}`);\n  protected offsetClass = computed(() => this.offset() && `vater-offset-${this.offset()}`);\n  protected class = computed(() =>\n    [\n      this.alignClass(),\n      this.directionClass(),\n      this.gapClass(),\n      this.justifyClass(),\n      this.offsetClass(),\n    ].filter(Boolean)\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 { booleanAttribute, Component, input, ViewEncapsulation } from '@angular/core';\nimport { VaterUtilityDirective } from './vater-utility.directive';\nimport { VaterLayoutDirective } from './vater-layout.directive';\n\n@Component({\n  selector: 'vater-flex, [vater-flex]',\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: VaterLayoutDirective,\n      inputs: ['align', 'direction', 'justify', 'wrap', 'gap', 'offset'],\n    },\n    {\n      directive: VaterUtilityDirective,\n      inputs: ['center', 'fill', 'inset', 'scrollable'],\n    },\n  ],\n  host: { '[class.vater-flex-auto]': 'autoSize()' },\n  styles: `\n    vater-flex,\n    [vater-flex] {\n      display: flex;\n      line-height: normal;\n    }\n  `,\n  template: `<ng-content />`,\n})\nexport class VaterFlexComponent {\n  /**\n   * When set, sizes the flex items according to their width or height properties.\n   * @see https://drafts.csswg.org/css-flexbox-1/#flex-common\n   * @remarks\n   * Prefer setting `fill` on flex items over using `autoSize`.\n   */\n  autoSize = input(false, { transform: booleanAttribute });\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: 'vater-spacer, [vater-spacer]',\n  encapsulation: ViewEncapsulation.None,\n  styles: `\n    vater-spacer,\n    [vater-spacer] {\n      flex: 1;\n      align-self: stretch;\n    }\n  `,\n  template: '<ng-content />',\n})\nexport class VaterSpacerComponent {}\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';\nimport { VaterUtilityDirective } from './vater-utility.directive';\nimport { VaterLayoutDirective } from './vater-layout.directive';\n\n@Component({\n  selector: 'vater-stack, [vater-stack]',\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: VaterLayoutDirective,\n      inputs: ['align', 'direction', 'justify', 'wrap', 'gap', 'offset'],\n    },\n    {\n      directive: VaterUtilityDirective,\n      inputs: ['center', 'fill', 'inset', 'scrollable'],\n    },\n  ],\n  styles: `\n    vater-stack,\n    [vater-stack] {\n      display: flex;\n      line-height: normal;\n    }\n  `,\n  template: `<ng-content />`,\n})\nexport class VaterStackComponent {}\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 { VaterFlexComponent } from './vater-flex.component';\nexport { VaterSpacerComponent } from './vater-spacer.component';\nexport { VaterStackComponent } from './vater-stack.component';\nexport { VaterLayoutDirective } from './vater-layout.directive';\nexport { VaterUtilityDirective } from './vater-utility.directive';\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.7.1",
+  "version": "2.0.1",
   "license": "Apache-2.0",
   "exports": {
     ".": {

package/vater/index.d.ts

@@ -17,4 +17,5 @@
 export { VaterFlexComponent } from './vater-flex.component';
 export { VaterSpacerComponent } from './vater-spacer.component';
 export { VaterStackComponent } from './vater-stack.component';
+export { VaterLayoutDirective } from './vater-layout.directive';
 export { VaterUtilityDirective } from './vater-utility.directive';

package/vater/types.d.ts

@@ -14,8 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export type Direction = 'row' | 'column';
-export type Justify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-export type Align = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
-export type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type Spacing = 'xs' | 's' | 'm' | 'ml' | 'l' | 'xl';
+export type Fill = 'horizontal' | 'vertical' | 'both';
+export type Inset = '0' | Spacing;
+export type Align = 'stretch' | 'start' | 'end' | 'center' | 'baseline';
+export type Direction = 'row' | 'column';
+export type Justify = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';

package/vater/vater-flex.component.d.ts

@@ -1,19 +1,14 @@
-import { Direction, Spacing, Justify, Wrap } from './types';
 import * as i0 from "@angular/core";
-import * as i1 from "./vater-utility.directive";
+import * as i1 from "./vater-layout.directive";
+import * as i2 from "./vater-utility.directive";
 export declare class VaterFlexComponent {
-    direction: Direction;
-    grow: string;
-    shrink: string;
-    basis: string;
-    gap?: Spacing;
-    justify?: Justify;
-    wrap?: Wrap;
-    scrollable?: string;
-    offset?: Spacing;
-    get _offset(): string | undefined;
-    get _gap(): string | undefined;
-    get _overflow(): "auto" | undefined;
+    /**
+     * When set, sizes the flex items according to their width or height properties.
+     * @see https://drafts.csswg.org/css-flexbox-1/#flex-common
+     * @remarks
+     * Prefer setting `fill` on flex items over using `autoSize`.
+     */
+    autoSize: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<VaterFlexComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VaterFlexComponent, "vater-flex, [vater-flex]", never, { "direction": { "alias": "direction"; "required": false; }; "grow": { "alias": "grow"; "required": false; }; "shrink": { "alias": "shrink"; "required": false; }; "basis": { "alias": "basis"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VaterFlexComponent, "vater-flex, [vater-flex]", never, { "autoSize": { "alias": "autoSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.VaterLayoutDirective; inputs: { "align": "align"; "direction": "direction"; "justify": "justify"; "wrap": "wrap"; "gap": "gap"; "offset": "offset"; }; outputs: {}; }, { directive: typeof i2.VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; "scrollable": "scrollable"; }; outputs: {}; }]>;
 }

package/vater/vater-layout.directive.d.ts

@@ -0,0 +1,24 @@
+import { Align, Direction, Justify, Spacing } from './types';
+import * as i0 from "@angular/core";
+export declare class VaterLayoutDirective {
+    /** Cross axis alignment of the flex items. */
+    align: import("@angular/core").InputSignal<Align | undefined>;
+    /** Direction of the flex items. Defaults to `column`. */
+    direction: import("@angular/core").InputSignal<Direction>;
+    /** Spacing between the flex items. */
+    gap: import("@angular/core").InputSignal<Spacing | undefined>;
+    /** Main axis alignment of the flex items. */
+    justify: import("@angular/core").InputSignal<Justify | undefined>;
+    /** Offset to apply along the main axis. */
+    offset: import("@angular/core").InputSignal<Spacing | undefined>;
+    /** Whether the flex items should wrap. */
+    wrap: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    protected alignClass: import("@angular/core").Signal<string | undefined>;
+    protected directionClass: import("@angular/core").Signal<string>;
+    protected gapClass: import("@angular/core").Signal<string | undefined>;
+    protected justifyClass: import("@angular/core").Signal<string | undefined>;
+    protected offsetClass: import("@angular/core").Signal<string | undefined>;
+    protected class: import("@angular/core").Signal<(string | undefined)[]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VaterLayoutDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<VaterLayoutDirective, never, never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/vater/vater-stack.component.d.ts

@@ -1,14 +1,7 @@
-import { Align, Direction, Spacing, Justify } from './types';
 import * as i0 from "@angular/core";
-import * as i1 from "./vater-utility.directive";
+import * as i1 from "./vater-layout.directive";
+import * as i2 from "./vater-utility.directive";
 export declare class VaterStackComponent {
-    align: Align;
-    direction: Direction;
-    gap?: Spacing;
-    justify?: Justify;
-    offset?: Spacing;
-    get _offset(): string | undefined;
-    get _gap(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<VaterStackComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VaterStackComponent, "vater-stack, [vater-stack]", never, { "align": { "alias": "align"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; }, {}, never, ["*"], true, [{ directive: typeof i1.VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; }; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VaterStackComponent, "vater-stack, [vater-stack]", never, {}, {}, never, ["*"], true, [{ directive: typeof i1.VaterLayoutDirective; inputs: { "align": "align"; "direction": "direction"; "justify": "justify"; "wrap": "wrap"; "gap": "gap"; "offset": "offset"; }; outputs: {}; }, { directive: typeof i2.VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; "scrollable": "scrollable"; }; outputs: {}; }]>;
 }

package/vater/vater-utility.directive.d.ts

@@ -1,16 +1,17 @@
+import { Fill, Inset } from './types';
 import * as i0 from "@angular/core";
-export type Fill = 'horizontal' | 'vertical' | 'both';
-export type Inset = '0' | 'xs' | 's' | 'm' | 'ml' | 'l' | 'xl';
 export declare class VaterUtilityDirective {
+    /** Center the element horizontally and vertically. */
+    center: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /** Stretch the element to fill the available space in one or both directions. */
-    fill?: Fill;
+    fill: import("@angular/core").InputSignal<Fill | undefined>;
     /** Position the element absolute with the provided inset value. */
-    inset?: Inset;
-    center?: string;
-    get _class(): (Fill | Inset | undefined)[];
-    get _center(): boolean;
+    inset: import("@angular/core").InputSignal<Inset | undefined>;
+    /** Make the element scrollable. */
+    scrollable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    protected fillClass: import("@angular/core").Signal<string | undefined>;
+    protected insetClass: import("@angular/core").Signal<string | undefined>;
+    protected class: import("@angular/core").Signal<(string | undefined)[]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<VaterUtilityDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<VaterUtilityDirective, "[vater]", never, { "fill": { "alias": "fill"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; "center": { "alias": "center"; "required": false; }; }, {}, never, never, true, never>;
-    static ngAcceptInputType_fill: Fill;
-    static ngAcceptInputType_inset: Inset;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<VaterUtilityDirective, "[vater]", never, { "center": { "alias": "center"; "required": false; "isSignal": true; }; "fill": { "alias": "fill"; "required": false; "isSignal": true; }; "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "scrollable": { "alias": "scrollable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }