@energinet/watt 1.7.0 → 2.0.0

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":";;;AAAA;AACA;;;;;;;;;;;;;;;AAeG;AACH;AAIA;MASa,qBAAqB,CAAA;;IAEhC,MAAM,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;;IAGtD,IAAI,GAAG,KAAK,EAAQ;;IAGpB,KAAK,GAAG,KAAK,EAAS;;IAGtB,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;;AAGhD,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,IAAI,cAAc,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,CAAC;AACtE,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,IAAI,eAAe,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE,CAAC;IAC1E,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;uGAhB5E,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAArB,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,wBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAArB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBARjC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,SAAS;AACnB,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,SAAS;AACpB,wBAAA,sBAAsB,EAAE,UAAU;AAClC,wBAAA,0BAA0B,EAAE,cAAc;AAC3C,qBAAA;AACF,iBAAA;;;AC7BD;AACA;;;;;;;;;;;;;;;AAeG;AACH;MAUa,oBAAoB,CAAA;;IAE/B,KAAK,GAAG,KAAK,EAAS;;AAGtB,IAAA,SAAS,GAAG,KAAK,CAAY,QAAQ,CAAC;;IAGtC,GAAG,GAAG,KAAK,EAAW;;IAGtB,OAAO,GAAG,KAAK,EAAW;;IAG1B,MAAM,GAAG,KAAK,EAAW;;IAGzB,IAAI,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;;AAG1C,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,IAAI,eAAe,IAAI,CAAC,KAAK,EAAE,CAAA,CAAE,CAAC;AAC1E,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,SAAS,EAAE,IAAI,SAAS,IAAI,CAAC,SAAS,EAAE,CAAA,CAAE,CAAC;AAChF,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,IAAI,aAAa,IAAI,CAAC,GAAG,EAAE,CAAA,CAAE,CAAC;AAClE,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,IAAI,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,CAAC;AAClF,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,IAAI,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAAA,CAAE,CAAC;AAC9E,IAAA,KAAK,GAAG,QAAQ,CAAC,MACzB;QACE,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,cAAc,EAAE;QACrB,IAAI,CAAC,QAAQ,EAAE;QACf,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,WAAW,EAAE;AACnB,KAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAClB;uGAjCU,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,SAAS;AACpB,wBAAA,oBAAoB,EAAE,QAAQ;AAC/B,qBAAA;AACF,iBAAA;;;AC1BD;AACA;;;;;;;;;;;;;;;AAeG;AACH;MA4Ba,kBAAkB,CAAA;AAC7B;;;;;AAKG;IACH,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;uGAP7C,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,ylBAFnB,CAAgB,cAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,4DAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAEf,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAvB9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EACrB,aAAA,EAAA,iBAAiB,CAAC,IAAI,EACrB,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,oBAAoB;AAC/B,4BAAA,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;AACnE,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,qBAAqB;4BAChC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,CAAC;AAClD,yBAAA;AACF,qBAAA,EAAA,IAAA,EACK,EAAE,yBAAyB,EAAE,YAAY,EAAE,YAQvC,CAAgB,cAAA,CAAA,EAAA,MAAA,EAAA,CAAA,4DAAA,CAAA,EAAA;;;AC3C5B;AACA;;;;;;;;;;;;;;;AAeG;AACH;MAea,oBAAoB,CAAA;uGAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,wFAFrB,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAEf,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAZhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,EACzB,aAAA,EAAA,iBAAiB,CAAC,IAAI,YAQ3B,gBAAgB,EAAA,MAAA,EAAA,CAAA,0DAAA,CAAA,EAAA;;;AC9B5B;AACA;;;;;;;;;;;;;;;AAeG;AACH;MA2Ba,mBAAmB,CAAA;uGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,6YAFpB,CAAgB,cAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8DAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAEf,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAtB/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,4BAA4B,EACvB,aAAA,EAAA,iBAAiB,CAAC,IAAI,EACrB,cAAA,EAAA;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,oBAAoB;AAC/B,4BAAA,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC;AACnE,yBAAA;AACD,wBAAA;AACE,4BAAA,SAAS,EAAE,qBAAqB;4BAChC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,CAAC;AAClD,yBAAA;AACF,qBAAA,EAAA,QAAA,EAQS,CAAgB,cAAA,CAAA,EAAA,MAAA,EAAA,CAAA,8DAAA,CAAA,EAAA;;;AC1C5B;AACA;;;;;;;;;;;;;;;AAeG;AACH;;ACjBA;;AAEG;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@energinet/watt",
-  "version": "1.7.0",
+  "version": "2.0.0",
   "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>;
 }