@energinet/watt 4.2.20 → 4.3.0

package/core/styles/_vater.scss

@@ -61,6 +61,22 @@
     height: 100%;
   }
 
+  vater-grid-area,
+  [vater-grid-area] {
+    &.vater-fill-horizontal {
+      grid-column: 1 / -1;
+    }
+
+    &.vater-fill-vertical {
+      grid-row: 1 / -1;
+    }
+
+    &.vater-fill-both {
+      grid-row: 1 / -1;
+      grid-column: 1 / -1;
+    }
+  }
+
   :not(vater-stack, [vater-stack], vater-flex, [vater-flex]) {
     &.vater-fill-vertical,
     &.vater-fill-horizontal,
@@ -131,6 +147,8 @@
   }
 
   .vater-offset-xs {
+    padding: var(--watt-space-xs);
+
     &.vater-column {
       padding: var(--watt-space-xs) 0;
     }
@@ -141,6 +159,8 @@
   }
 
   .vater-offset-s {
+    padding: var(--watt-space-s);
+
     &.vater-column {
       padding: var(--watt-space-s) 0;
     }
@@ -151,6 +171,8 @@
   }
 
   .vater-offset-m {
+    padding: var(--watt-space-m);
+
     &.vater-column {
       padding: var(--watt-space-m) 0;
     }
@@ -161,6 +183,8 @@
   }
 
   .vater-offset-ml {
+    padding: var(--watt-space-ml);
+
     &.vater-column {
       padding: var(--watt-space-ml) 0;
     }
@@ -171,6 +195,8 @@
   }
 
   .vater-offset-l {
+    padding: var(--watt-space-l);
+
     &.vater-column {
       padding: var(--watt-space-l) 0;
     }
@@ -181,6 +207,8 @@
   }
 
   .vater-offset-xl {
+    padding: var(--watt-space-xl);
+
     &.vater-column {
       padding: var(--watt-space-xl) 0;
     }
@@ -261,4 +289,20 @@
   .vater-justify-space-evenly {
     justify-content: space-evenly;
   }
+
+  .vater-subgrid-columns {
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  .vater-subgrid-rows {
+    display: grid;
+    grid-template-rows: subgrid;
+  }
+
+  .vater-subgrid-both {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
 }

package/fesm2022/energinet-watt-vater.mjs

@@ -70,36 +70,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * limitations under the License.
  */
 //#endregion
-class VaterLayoutDirective {
+class VaterFlexboxDirective {
     /** Cross axis alignment of the flex items. */
     align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : []));
     /** Direction of the flex items. Defaults to `column`. */
     direction = input('column', ...(ngDevMode ? [{ debugName: "direction" }] : []));
-    /** Spacing between the flex items. */
-    gap = input(...(ngDevMode ? [undefined, { debugName: "gap" }] : []));
     /** Main axis alignment of the flex items. */
     justify = input(...(ngDevMode ? [undefined, { debugName: "justify" }] : []));
-    /** Offset to apply along the main axis. */
-    offset = input(...(ngDevMode ? [undefined, { debugName: "offset" }] : []));
     /** Whether the flex items should wrap. */
     wrap = input(false, ...(ngDevMode ? [{ debugName: "wrap", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     // Computed class names
     alignClass = computed(() => this.align() && `vater-align-${this.align()}`, ...(ngDevMode ? [{ debugName: "alignClass" }] : []));
     directionClass = computed(() => this.direction() && `vater-${this.direction()}`, ...(ngDevMode ? [{ debugName: "directionClass" }] : []));
-    gapClass = computed(() => this.gap() && `vater-gap-${this.gap()}`, ...(ngDevMode ? [{ debugName: "gapClass" }] : []));
     justifyClass = computed(() => this.justify() && `vater-justify-${this.justify()}`, ...(ngDevMode ? [{ debugName: "justifyClass" }] : []));
-    offsetClass = computed(() => this.offset() && `vater-offset-${this.offset()}`, ...(ngDevMode ? [{ debugName: "offsetClass" }] : []));
-    class = computed(() => [
-        this.alignClass(),
-        this.directionClass(),
-        this.gapClass(),
-        this.justifyClass(),
-        this.offsetClass(),
-    ].filter(Boolean), ...(ngDevMode ? [{ debugName: "class" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", 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()", "attr.align": "null", "attr.direction": "null", "attr.gap": "null", "attr.justify": "null", "attr.offset": "null", "attr.wrap": "null" } }, ngImport: i0 });
+    class = computed(() => [this.alignClass(), this.directionClass(), this.justifyClass()].filter(Boolean), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterFlexboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: VaterFlexboxDirective, 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 }, justify: { classPropertyName: "justify", publicName: "justify", 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()", "attr.align": "null", "attr.direction": "null", "attr.justify": "null", "attr.wrap": "null" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterLayoutDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterFlexboxDirective, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -107,13 +95,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[class.vater-wrap]': 'wrap()',
                         '[attr.align]': 'null',
                         '[attr.direction]': 'null',
-                        '[attr.gap]': 'null',
                         '[attr.justify]': 'null',
-                        '[attr.offset]': 'null',
                         '[attr.wrap]': 'null',
                     },
                 }]
-        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
+        }], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
+
+//#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 {
+    /** Spacing between items. */
+    gap = input(...(ngDevMode ? [undefined, { debugName: "gap" }] : []));
+    /** Offset to apply along the main axis (or both axes for grids). */
+    offset = input(...(ngDevMode ? [undefined, { debugName: "offset" }] : []));
+    // Computed class names
+    gapClass = computed(() => this.gap() && `vater-gap-${this.gap()}`, ...(ngDevMode ? [{ debugName: "gapClass" }] : []));
+    offsetClass = computed(() => this.offset() && `vater-offset-${this.offset()}`, ...(ngDevMode ? [{ debugName: "offsetClass" }] : []));
+    class = computed(() => [this.gapClass(), this.offsetClass()].filter(Boolean), ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterLayoutDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: VaterLayoutDirective, isStandalone: true, inputs: { gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "attr.gap": "null", "attr.offset": "null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterLayoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[class]': 'class()',
+                        '[attr.gap]': 'null',
+                        '[attr.offset]': 'null',
+                    },
+                }]
+        }], propDecorators: { gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }] } });
 
 //#region License
 /**
@@ -142,14 +169,18 @@ class VaterFlexComponent {
      */
     autoSize = input(false, ...(ngDevMode ? [{ debugName: "autoSize", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterFlexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", 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: VaterFlexboxDirective, inputs: ["align", "align", "direction", "direction", "justify", "justify", "wrap", "wrap"] }, { directive: VaterLayoutDirective, inputs: ["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: "20.3.15", ngImport: i0, type: VaterFlexComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vater-flex, [vater-flex]', encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: VaterFlexboxDirective,
+                            inputs: ['align', 'direction', 'justify', 'wrap'],
+                        },
                         {
                             directive: VaterLayoutDirective,
-                            inputs: ['align', 'direction', 'justify', 'wrap', 'gap', 'offset'],
+                            inputs: ['gap', 'offset'],
                         },
                         {
                             directive: VaterUtilityDirective,
@@ -158,6 +189,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                     ], host: { '[class.vater-flex-auto]': 'autoSize()' }, template: `<ng-content />`, styles: ["vater-flex,[vater-flex]{display:flex;line-height:normal}\n"] }]
         }], propDecorators: { autoSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSize", required: false }] }] } });
 
+//#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 VaterGridAreaComponent {
+    /** Optional input for providing a descriptive name. Unused by the component. */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /** Specify the grid areas size and location within a grid column (`grid-column`). */
+    column = input(...(ngDevMode ? [undefined, { debugName: "column" }] : []));
+    /** Specify the grid areas size and location within a grid row (`grid-row`). */
+    row = input(...(ngDevMode ? [undefined, { debugName: "row" }] : []));
+    /**
+     * Whether the grid area should also be a grid and inherit track sizing
+     * for `columns`, `rows` or `both` from the parent grid.
+     */
+    subgrid = input(...(ngDevMode ? [undefined, { debugName: "subgrid" }] : []));
+    // Computed class name
+    class = computed(() => this.subgrid() && `vater-subgrid-${this.subgrid()}`, ...(ngDevMode ? [{ debugName: "class" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterGridAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: VaterGridAreaComponent, isStandalone: true, selector: "vater-grid-area, [vater-grid-area]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, subgrid: { classPropertyName: "subgrid", publicName: "subgrid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "class()", "style.gridColumn": "column()", "style.gridRow": "row()" } }, hostDirectives: [{ directive: VaterLayoutDirective, inputs: ["gap", "gap", "offset", "offset"] }, { directive: VaterUtilityDirective, inputs: ["fill", "fill", "scrollable", "scrollable"] }], ngImport: i0, template: `<ng-content />`, isInline: true, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterGridAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vater-grid-area, [vater-grid-area]',
+                    encapsulation: ViewEncapsulation.None,
+                    hostDirectives: [
+                        {
+                            directive: VaterLayoutDirective,
+                            inputs: ['gap', 'offset'],
+                        },
+                        {
+                            directive: VaterUtilityDirective,
+                            inputs: ['fill', 'scrollable'],
+                        },
+                    ],
+                    host: {
+                        '[class]': 'class()',
+                        '[style.gridColumn]': 'column()',
+                        '[style.gridRow]': 'row()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: false }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: false }] }], subgrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "subgrid", required: false }] }] } });
+
+//#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 VaterGridComponent {
+    /** Column template (`grid-template-columns`) or number of equal sized columns. */
+    columns = input(1, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    /** Row template (`grid-template-rows`) or number of equal sized rows. */
+    rows = input(1, ...(ngDevMode ? [{ debugName: "rows" }] : []));
+    // Computed templates
+    templateColumns = computed(() => this.makeTrackList(this.columns()), ...(ngDevMode ? [{ debugName: "templateColumns" }] : []));
+    templateRows = computed(() => this.makeTrackList(this.rows()), ...(ngDevMode ? [{ debugName: "templateRows" }] : []));
+    makeTrackList = (input) => typeof input === 'string' ? input : '1fr '.repeat(input).trim();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: VaterGridComponent, isStandalone: true, selector: "vater-grid, [vater-grid]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.gridTemplateColumns": "templateColumns()", "style.gridTemplateRows": "templateRows()" } }, hostDirectives: [{ directive: VaterLayoutDirective, inputs: ["gap", "gap", "offset", "offset"] }, { directive: VaterUtilityDirective, inputs: ["center", "center", "fill", "fill", "inset", "inset", "scrollable", "scrollable"] }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["vater-grid,[vater-grid]{display:grid}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vater-grid, [vater-grid]', encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: VaterLayoutDirective,
+                            inputs: ['gap', 'offset'],
+                        },
+                        {
+                            directive: VaterUtilityDirective,
+                            inputs: ['center', 'fill', 'inset', 'scrollable'],
+                        },
+                    ], host: {
+                        '[style.gridTemplateColumns]': 'templateColumns()',
+                        '[style.gridTemplateRows]': 'templateRows()',
+                    }, template: `<ng-content />`, styles: ["vater-grid,[vater-grid]{display:grid}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+
 //#region License
 /**
  * @license
@@ -205,14 +342,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 //#endregion
 class VaterStackComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: VaterStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: VaterStackComponent, isStandalone: true, selector: "vater-stack, [vater-stack]", hostDirectives: [{ directive: VaterFlexboxDirective, inputs: ["align", "align", "direction", "direction", "justify", "justify", "wrap", "wrap"] }, { directive: VaterLayoutDirective, inputs: ["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: "20.3.15", ngImport: i0, type: VaterStackComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vater-stack, [vater-stack]', encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: VaterFlexboxDirective,
+                            inputs: ['align', 'direction', 'justify', 'wrap'],
+                        },
                         {
                             directive: VaterLayoutDirective,
-                            inputs: ['align', 'direction', 'justify', 'wrap', 'gap', 'offset'],
+                            inputs: ['gap', 'offset'],
                         },
                         {
                             directive: VaterUtilityDirective,
@@ -239,10 +380,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * limitations under the License.
  */
 //#endregion
+const VATER = [
+    VaterFlexComponent,
+    VaterGridAreaComponent,
+    VaterGridComponent,
+    VaterSpacerComponent,
+    VaterStackComponent,
+    VaterUtilityDirective,
+];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { VaterFlexComponent, VaterLayoutDirective, VaterSpacerComponent, VaterStackComponent, VaterUtilityDirective };
+export { VATER, VaterFlexComponent, VaterFlexboxDirective, VaterGridAreaComponent, VaterGridComponent, 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-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    '[attr.center]': 'null',\n    '[attr.fill]': 'null',\n    '[attr.inset]': 'null',\n    '[attr.scrollable]': 'null',\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    '[attr.align]': 'null',\n    '[attr.direction]': 'null',\n    '[attr.gap]': 'null',\n    '[attr.justify]': 'null',\n    '[attr.offset]': 'null',\n    '[attr.wrap]': 'null',\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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"}
+{"version":3,"file":"energinet-watt-vater.mjs","sources":["../../../libs/watt/package/vater/vater-utility.directive.ts","../../../libs/watt/package/vater/vater-flexbox.directive.ts","../../../libs/watt/package/vater/vater-layout.directive.ts","../../../libs/watt/package/vater/vater-flex.component.ts","../../../libs/watt/package/vater/vater-grid-area.component.ts","../../../libs/watt/package/vater/vater-grid.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    '[attr.center]': 'null',\n    '[attr.fill]': 'null',\n    '[attr.inset]': 'null',\n    '[attr.scrollable]': 'null',\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 } from './types';\n\n@Directive({\n  host: {\n    '[class]': 'class()',\n    '[class.vater-wrap]': 'wrap()',\n    '[attr.align]': 'null',\n    '[attr.direction]': 'null',\n    '[attr.justify]': 'null',\n    '[attr.wrap]': 'null',\n  },\n})\nexport class VaterFlexboxDirective {\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  /** Main axis alignment of the flex items. */\n  justify = input<Justify>();\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 justifyClass = computed(() => this.justify() && `vater-justify-${this.justify()}`);\n  protected class = computed(() =>\n    [this.alignClass(), this.directionClass(), this.justifyClass()].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 { computed, Directive, input } from '@angular/core';\nimport { Spacing } from './types';\n\n@Directive({\n  host: {\n    '[class]': 'class()',\n    '[attr.gap]': 'null',\n    '[attr.offset]': 'null',\n  },\n})\nexport class VaterLayoutDirective {\n  /** Spacing between items. */\n  gap = input<Spacing>();\n\n  /** Offset to apply along the main axis (or both axes for grids). */\n  offset = input<Spacing>();\n\n  // Computed class names\n  protected gapClass = computed(() => this.gap() && `vater-gap-${this.gap()}`);\n  protected offsetClass = computed(() => this.offset() && `vater-offset-${this.offset()}`);\n  protected class = computed(() => [this.gapClass(), this.offsetClass()].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, Component, input, ViewEncapsulation } from '@angular/core';\nimport { VaterUtilityDirective } from './vater-utility.directive';\nimport { VaterFlexboxDirective } from './vater-flexbox.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: VaterFlexboxDirective,\n      inputs: ['align', 'direction', 'justify', 'wrap'],\n    },\n    {\n      directive: VaterLayoutDirective,\n      inputs: ['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, computed, input, ViewEncapsulation } from '@angular/core';\nimport { VaterUtilityDirective } from './vater-utility.directive';\nimport { VaterLayoutDirective } from './vater-layout.directive';\n\n@Component({\n  selector: 'vater-grid-area, [vater-grid-area]',\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: VaterLayoutDirective,\n      inputs: ['gap', 'offset'],\n    },\n    {\n      directive: VaterUtilityDirective,\n      inputs: ['fill', 'scrollable'],\n    },\n  ],\n  host: {\n    '[class]': 'class()',\n    '[style.gridColumn]': 'column()',\n    '[style.gridRow]': 'row()',\n  },\n  template: `<ng-content />`,\n})\nexport class VaterGridAreaComponent {\n  /** Optional input for providing a descriptive name. Unused by the component. */\n  name = input('');\n\n  /** Specify the grid areas size and location within a grid column (`grid-column`). */\n  column = input<string | number>();\n\n  /** Specify the grid areas size and location within a grid row (`grid-row`). */\n  row = input<string | number>();\n\n  /**\n   * Whether the grid area should also be a grid and inherit track sizing\n   * for `columns`, `rows` or `both` from the parent grid.\n   */\n  subgrid = input<'columns' | 'rows' | 'both'>();\n\n  // Computed class name\n  protected class = computed(() => this.subgrid() && `vater-subgrid-${this.subgrid()}`);\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, computed, input, ViewEncapsulation } from '@angular/core';\nimport { VaterUtilityDirective } from './vater-utility.directive';\nimport { VaterLayoutDirective } from './vater-layout.directive';\n\n@Component({\n  selector: 'vater-grid, [vater-grid]',\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: VaterLayoutDirective,\n      inputs: ['gap', 'offset'],\n    },\n    {\n      directive: VaterUtilityDirective,\n      inputs: ['center', 'fill', 'inset', 'scrollable'],\n    },\n  ],\n  host: {\n    '[style.gridTemplateColumns]': 'templateColumns()',\n    '[style.gridTemplateRows]': 'templateRows()',\n  },\n  styles: `\n    vater-grid,\n    [vater-grid] {\n      display: grid;\n    }\n  `,\n  template: `<ng-content />`,\n})\nexport class VaterGridComponent {\n  /** Column template (`grid-template-columns`) or number of equal sized columns. */\n  columns = input<string | number>(1);\n\n  /** Row template (`grid-template-rows`) or number of equal sized rows. */\n  rows = input<string | number>(1);\n\n  // Computed templates\n  protected templateColumns = computed(() => this.makeTrackList(this.columns()));\n  protected templateRows = computed(() => this.makeTrackList(this.rows()));\n  private makeTrackList = (input: string | number) =>\n    typeof input === 'string' ? input : '1fr '.repeat(input).trim();\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 { VaterFlexboxDirective } from './vater-flexbox.directive';\nimport { VaterLayoutDirective } from './vater-layout.directive';\nimport { VaterUtilityDirective } from './vater-utility.directive';\n\n@Component({\n  selector: 'vater-stack, [vater-stack]',\n  encapsulation: ViewEncapsulation.None,\n  hostDirectives: [\n    {\n      directive: VaterFlexboxDirective,\n      inputs: ['align', 'direction', 'justify', 'wrap'],\n    },\n    {\n      directive: VaterLayoutDirective,\n      inputs: ['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\nimport { VaterFlexComponent } from './vater-flex.component';\nimport { VaterGridAreaComponent } from './vater-grid-area.component';\nimport { VaterGridComponent } from './vater-grid.component';\nimport { VaterSpacerComponent } from './vater-spacer.component';\nimport { VaterStackComponent } from './vater-stack.component';\nimport { VaterUtilityDirective } from './vater-utility.directive';\n\n// Must be exposed for ng-packagr to work\nexport { VaterLayoutDirective } from './vater-layout.directive';\nexport { VaterFlexboxDirective } from './vater-flexbox.directive';\n\nexport {\n  VaterFlexComponent,\n  VaterGridAreaComponent,\n  VaterGridComponent,\n  VaterSpacerComponent,\n  VaterStackComponent,\n  VaterUtilityDirective,\n};\n\nexport const VATER = [\n  VaterFlexComponent,\n  VaterGridAreaComponent,\n  VaterGridComponent,\n  VaterSpacerComponent,\n  VaterStackComponent,\n  VaterUtilityDirective,\n] as const;\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": "4.2.20",
+  "version": "4.3.0",
   "license": "Apache-2.0",
   "exports": {
     ".": {

package/vater/index.d.ts

@@ -23,27 +23,33 @@ type Align = 'stretch' | 'start' | 'end' | 'center' | 'baseline';
 type Direction = 'row' | 'column';
 type Justify = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
 
-declare class VaterLayoutDirective {
+declare class VaterFlexboxDirective {
     /** Cross axis alignment of the flex items. */
     align: _angular_core.InputSignal<Align | undefined>;
     /** Direction of the flex items. Defaults to `column`. */
     direction: _angular_core.InputSignal<Direction>;
-    /** Spacing between the flex items. */
-    gap: _angular_core.InputSignal<Spacing | undefined>;
     /** Main axis alignment of the flex items. */
     justify: _angular_core.InputSignal<Justify | undefined>;
-    /** Offset to apply along the main axis. */
-    offset: _angular_core.InputSignal<Spacing | undefined>;
     /** Whether the flex items should wrap. */
     wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     protected alignClass: _angular_core.Signal<string | undefined>;
     protected directionClass: _angular_core.Signal<string>;
-    protected gapClass: _angular_core.Signal<string | undefined>;
     protected justifyClass: _angular_core.Signal<string | undefined>;
+    protected class: _angular_core.Signal<(string | undefined)[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VaterFlexboxDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<VaterFlexboxDirective, never, never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class VaterLayoutDirective {
+    /** Spacing between items. */
+    gap: _angular_core.InputSignal<Spacing | undefined>;
+    /** Offset to apply along the main axis (or both axes for grids). */
+    offset: _angular_core.InputSignal<Spacing | undefined>;
+    protected gapClass: _angular_core.Signal<string | undefined>;
     protected offsetClass: _angular_core.Signal<string | undefined>;
     protected class: _angular_core.Signal<(string | undefined)[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<VaterLayoutDirective, never>;
-    static ɵdir: _angular_core.ɵɵ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>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<VaterLayoutDirective, never, never, { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "offset": { "alias": "offset"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class VaterUtilityDirective {
@@ -71,7 +77,36 @@ declare class VaterFlexComponent {
      */
     autoSize: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<VaterFlexComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VaterFlexComponent, "vater-flex, [vater-flex]", never, { "autoSize": { "alias": "autoSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof VaterLayoutDirective; inputs: { "align": "align"; "direction": "direction"; "justify": "justify"; "wrap": "wrap"; "gap": "gap"; "offset": "offset"; }; outputs: {}; }, { directive: typeof VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; "scrollable": "scrollable"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VaterFlexComponent, "vater-flex, [vater-flex]", never, { "autoSize": { "alias": "autoSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof VaterFlexboxDirective; inputs: { "align": "align"; "direction": "direction"; "justify": "justify"; "wrap": "wrap"; }; outputs: {}; }, { directive: typeof VaterLayoutDirective; inputs: { "gap": "gap"; "offset": "offset"; }; outputs: {}; }, { directive: typeof VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; "scrollable": "scrollable"; }; outputs: {}; }]>;
+}
+
+declare class VaterGridAreaComponent {
+    /** Optional input for providing a descriptive name. Unused by the component. */
+    name: _angular_core.InputSignal<string>;
+    /** Specify the grid areas size and location within a grid column (`grid-column`). */
+    column: _angular_core.InputSignal<string | number | undefined>;
+    /** Specify the grid areas size and location within a grid row (`grid-row`). */
+    row: _angular_core.InputSignal<string | number | undefined>;
+    /**
+     * Whether the grid area should also be a grid and inherit track sizing
+     * for `columns`, `rows` or `both` from the parent grid.
+     */
+    subgrid: _angular_core.InputSignal<"both" | "columns" | "rows" | undefined>;
+    protected class: _angular_core.Signal<string | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VaterGridAreaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VaterGridAreaComponent, "vater-grid-area, [vater-grid-area]", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "column": { "alias": "column"; "required": false; "isSignal": true; }; "row": { "alias": "row"; "required": false; "isSignal": true; }; "subgrid": { "alias": "subgrid"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof VaterLayoutDirective; inputs: { "gap": "gap"; "offset": "offset"; }; outputs: {}; }, { directive: typeof VaterUtilityDirective; inputs: { "fill": "fill"; "scrollable": "scrollable"; }; outputs: {}; }]>;
+}
+
+declare class VaterGridComponent {
+    /** Column template (`grid-template-columns`) or number of equal sized columns. */
+    columns: _angular_core.InputSignal<string | number>;
+    /** Row template (`grid-template-rows`) or number of equal sized rows. */
+    rows: _angular_core.InputSignal<string | number>;
+    protected templateColumns: _angular_core.Signal<string>;
+    protected templateRows: _angular_core.Signal<string>;
+    private makeTrackList;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<VaterGridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VaterGridComponent, "vater-grid, [vater-grid]", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof VaterLayoutDirective; inputs: { "gap": "gap"; "offset": "offset"; }; outputs: {}; }, { directive: typeof VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; "scrollable": "scrollable"; }; outputs: {}; }]>;
 }
 
 declare class VaterSpacerComponent {
@@ -81,7 +116,26 @@ declare class VaterSpacerComponent {
 
 declare class VaterStackComponent {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<VaterStackComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VaterStackComponent, "vater-stack, [vater-stack]", never, {}, {}, never, ["*"], true, [{ directive: typeof VaterLayoutDirective; inputs: { "align": "align"; "direction": "direction"; "justify": "justify"; "wrap": "wrap"; "gap": "gap"; "offset": "offset"; }; outputs: {}; }, { directive: typeof VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; "scrollable": "scrollable"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<VaterStackComponent, "vater-stack, [vater-stack]", never, {}, {}, never, ["*"], true, [{ directive: typeof VaterFlexboxDirective; inputs: { "align": "align"; "direction": "direction"; "justify": "justify"; "wrap": "wrap"; }; outputs: {}; }, { directive: typeof VaterLayoutDirective; inputs: { "gap": "gap"; "offset": "offset"; }; outputs: {}; }, { directive: typeof VaterUtilityDirective; inputs: { "center": "center"; "fill": "fill"; "inset": "inset"; "scrollable": "scrollable"; }; outputs: {}; }]>;
 }
 
-export { VaterFlexComponent, VaterLayoutDirective, VaterSpacerComponent, VaterStackComponent, VaterUtilityDirective };
+/**
+ * @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.
+ */
+
+declare const VATER: readonly [typeof VaterFlexComponent, typeof VaterGridAreaComponent, typeof VaterGridComponent, typeof VaterSpacerComponent, typeof VaterStackComponent, typeof VaterUtilityDirective];
+
+export { VATER, VaterFlexComponent, VaterFlexboxDirective, VaterGridAreaComponent, VaterGridComponent, VaterLayoutDirective, VaterSpacerComponent, VaterStackComponent, VaterUtilityDirective };