{"version":3,"names":["GRID_D12__T12","GRID_D2_10__T2_10","GRID_D10_2__T10_2","GRID_D9_3__T8_4","GRID_D3_9__T4_8","GRID_D8_4__T8_4","GRID_D4_8__T4_8","GRID_D6_6__T6_6","GRID_D6_3_3__T12_6_6","GRID_D3_3_6__T6_6_12","GRID_D4_4_4__T4_4_4","GRID_D3_3_3_3__T6_6_6_6","GRID_D3_3_3_3__T12","GRID_D4_4_4__T12","GRID_D2_2_2_2_2_2__T12","GRID_D2_8_2","GRID_D2_5_5","GRID_D3_6_3__T2_8_2","GRID_D5_5_2","GRID_D2_4_4_2__T6_6_6_6","GRID_D2_2_2_2_2_2__T6_6","CONTENT_POSITION_TOP","gridControlCss","EonUiGridControlStyle0","GridControl","componentWillLoad","this","toggleHeight","handleHorizontalGutterForComponents","removeHorizontalGutter","child","Array","from","hostElement","children","setAttribute","removeAttribute","sameHeight","style","height","slotChild","renderGrid","grid","h","class","pfx","contentPositionCol1","name","Fragment","contentPositionCol2","contentPositionCol3","contentPositionCol4","contentPositionCol5","contentPositionCol6","render","Host","key","removeVerticalGutter","forceMobileLayout","minHeight"],"sources":["src/components/grid-control/constants/grid-control-constants.ts","src/components/grid-control/grid-control.scss?tag=eon-ui-grid-control&encapsulation=shadow","src/components/grid-control/grid-control.tsx"],"sourcesContent":["export const GRID_D12__T12 = \"grid__d12__t12\";\nexport const GRID_D2_10__T2_10 = \"grid__d2-10__t2-10\";\nexport const GRID_D10_2__T10_2 = \"grid__d10-2__t10-2\";\nexport const GRID_D9_3__T8_4 = \"grid__d9-3__t8-4\";\nexport const GRID_D3_9__T4_8 = \"grid__d3-9__t4-8\";\nexport const GRID_D8_4__T8_4 = \"grid__d8-4__t8-4\";\nexport const GRID_D4_8__T4_8 = \"grid__d4-8__t4-8\";\nexport const GRID_D6_6__T6_6 = \"grid__d6-6__t6-6\";\nexport const GRID_D6_3_3__T12_6_6 = \"grid__d6-3-3__t12-6-6\";\nexport const GRID_D3_3_6__T6_6_12 = \"grid__d3-3-6__t6-6-12\";\nexport const GRID_D4_4_4__T4_4_4 = \"grid__d4-4-4__t4-4-4\";\nexport const GRID_D3_3_3_3__T6_6_6_6 = \"grid__d3-3-3-3__t6-6-6-6\";\nexport const GRID_D3_3_3_3__T12 = \"grid__d3-3-3-3__t12\";\nexport const GRID_D4_4_4__T12 = \"grid__d4-4-4__t12\";\nexport const GRID_D2_2_2_2_2_2__T12 = \"grid__d2-2-2-2-2-2__t12\";\nexport const GRID_D2_8_2 = \"grid__d2-8-2\";\nexport const GRID_D2_5_5 = \"grid__d2-5-5\";\nexport const GRID_D3_6_3__T2_8_2 = \"grid__d3-6-3__t2-8-2\";\nexport const GRID_D5_5_2 = \"grid__d5-5-2\";\nexport const GRID_D2_4_4_2__T6_6_6_6 = \"grid__d2-4-4-2__t6-6-6-6\";\nexport const GRID_D2_2_2_2_2_2__T6_6 = \"grid__d2-2-2-2-2-2__t6-6\";\n\nexport const GRIDS = [\n  GRID_D12__T12,\n  GRID_D2_10__T2_10,\n  GRID_D3_9__T4_8,\n  GRID_D4_8__T4_8,\n  GRID_D6_6__T6_6,\n  GRID_D8_4__T8_4,\n  GRID_D9_3__T8_4,\n  GRID_D10_2__T10_2,\n  GRID_D2_5_5,\n  GRID_D2_8_2,\n  GRID_D3_3_6__T6_6_12,\n  GRID_D3_6_3__T2_8_2,\n  GRID_D4_4_4__T4_4_4,\n  GRID_D5_5_2,\n  GRID_D6_3_3__T12_6_6,\n  GRID_D2_4_4_2__T6_6_6_6,\n  GRID_D3_3_3_3__T6_6_6_6,\n  GRID_D2_2_2_2_2_2__T6_6,\n  GRID_D2_2_2_2_2_2__T12,\n  GRID_D3_3_3_3__T12,\n  GRID_D4_4_4__T12\n] as const;\n\nexport const CONTENT_POSITION_TOP = \"top\";\nexport const CONTENT_POSITION_CENTER = \"center\";\nexport const CONTENT_POSITION_BOTTOM = \"bottom\";\n\nexport const CONTENT_POSITIONS = [CONTENT_POSITION_TOP, CONTENT_POSITION_CENTER, CONTENT_POSITION_BOTTOM] as const;\n","/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n$grid-control-v-gutter-phone: 16px !default;\n$grid-control-v-gutter-tablet: 24px !default;\n$grid-control-v-gutter-desktop: 40px !default;\n$grid-control-v-gutter-desktop-large: 48px !default;\n$grid-control-h-gutter-phone: 16px !default;\n$grid-control-h-gutter-tablet: 24px !default;\n$grid-control-h-gutter-desktop: 40px !default;\n$grid-control-h-gutter-desktop-large: 48px !default;\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n@function calcColumnWidth($elementColumnStretch, $breakpoint, $deactivateGutter: $removeVerticalGutter) {\n  $gutterWidth: $grid-control-v-gutter-desktop-large;\n\n  @if ($deactivateGutter) {\n    $gutterWidth: 0px;\n  } @else if ($breakpoint == \"desktop\") {\n    $gutterWidth: $grid-control-v-gutter-desktop;\n  } @else if ($breakpoint == \"tablet\") {\n    $gutterWidth: $grid-control-v-gutter-tablet;\n  } @else if ($breakpoint == \"phone\") {\n    $gutterWidth: $grid-control-v-gutter-phone;\n  }\n\n  // Each elements width is defined by the number of columns over which it stretches.\n  // To this we need to add a number of gaps equal to the number of columns it stretches - 1.\n  $width: calc(((100% - $gutterWidth * 11) / 12) * $elementColumnStretch + $gutterWidth * ($elementColumnStretch - 1));\n\n  @return $width;\n}\n\n/* Function generates width in percent per each column */\n@mixin generate-column-width($n, $i: 1) {\n  @if ($i <= $n) {\n    @at-root &.#{$prefix}grid-column-#{$i} {\n      grid-column: span $i;\n    }\n    @include generate-column-width($n, ($i + 1));\n  }\n}\n\n:host {\n  display: block;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n  outline: 0 none;\n  text-rendering: optimizelegibility;\n}\n\n.#{$prefix}grid-container {\n  display: grid;\n  grid-template-columns: 100%;\n  grid-template-rows: 1fr;\n  justify-content: start;\n  align-content: start;\n  column-gap: $grid-control-v-gutter-desktop-large;\n  row-gap: $grid-control-h-gutter-desktop-large;\n\n  @include for-size(desktop) {\n    column-gap: $grid-control-v-gutter-desktop;\n    row-gap: $grid-control-h-gutter-desktop;\n  }\n\n  @include for-size(tablet) {\n    column-gap: $grid-control-v-gutter-tablet;\n    row-gap: $grid-control-h-gutter-tablet;\n  }\n\n  @include for-size(phone) {\n    column-gap: $grid-control-v-gutter-phone;\n    row-gap: $grid-control-h-gutter-phone;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    column-gap: $grid-control-v-gutter-phone;\n    row-gap: $grid-control-h-gutter-phone;\n  }\n\n  > .#{$prefix}grid-column {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n\n    &.#{$prefix}top {\n      justify-content: flex-start;\n    }\n\n    &.#{$prefix}center {\n      justify-content: center;\n    }\n\n    &.#{$prefix}bottom {\n      justify-content: flex-end;\n    }\n  }\n\n  &.#{$prefix}same-height {\n    > .#{$prefix}grid-column {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n\n  &.#{$prefix}remove-vertical-gutter {\n    column-gap: 0;\n  }\n\n  &.#{$prefix}remove-horizontal-gutter {\n    row-gap: 0;\n\n    > .#{$prefix}grid-column {\n      padding-bottom: 0;\n    }\n  }\n}\n\n/* :host(.ignore-column-gaps) {\n  .#{$prefix}grid-container {\n    column-gap: $grid-control-v-gutter-phone;\n    row-gap: $grid-control-h-gutter-phone;\n\n    &.#{$prefix}remove-vertical-gutter {\n      column-gap: 0;\n    }\n\n    &.#{$prefix}remove-horizontal-gutter {\n      row-gap: 0;\n\n      > .#{$prefix}grid-column {\n        padding-bottom: 0;\n      }\n    }\n  }\n} */\n\n/*\n█▀▀ █▀█ █░░ █░█ █▀▄▀█ █▄░█   █▀▄ █▀▀ █▀▀ █ █▄░█ █ ▀█▀ █ █▀█ █▄░█ █▀\n█▄▄ █▄█ █▄▄ █▄█ █░▀░█ █░▀█   █▄▀ ██▄ █▀░ █ █░▀█ █ ░█░ █ █▄█ █░▀█ ▄█\n*/\n\n// 2 Columns\n\n/*\n * grid__d2-10__t2_10\n */\n@mixin grid__d2-10__t2-10($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 10, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 10, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 10, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d2-10__t2-10 {\n  @include grid__d2-10__t2-10($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d2-10__t2-10($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d3-9__t4-8\n */\n@mixin grid__d3-9__t4-8($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 9, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 9, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d3-9__t4-8 {\n  @include grid__d3-9__t4-8($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d3-9__t4-8($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d4-8__t4-8\n */\n@mixin grid__d4-8__t4-8($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 8, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d4-8__t4-8 {\n  @include grid__d4-8__t4-8($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d4-8__t4-8($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d6-6__t6-6\n */\n@mixin grid__d6-6__t6-6($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d6-6__t6-6 {\n  @include grid__d6-6__t6-6($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d6-6__t6-6($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d8-4__t8-4\n */\n@mixin grid__d8-4__t8-4($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 8, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d8-4__t8-4 {\n  @include grid__d8-4__t8-4($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d8-4__t8-4($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d9-3__t8-4\n */\n@mixin grid__d9-3__t8-4($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 9, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 9, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d9-3__t8-4 {\n  @include grid__d9-3__t8-4($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d9-3__t8-4($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d10-2__t10-2\n */\n@mixin grid__d10-2__t10-2($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 10, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 10, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 10, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d10-2__t10-2 {\n  @include grid__d10-2__t10-2($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d10-2__t10-2($removeVerticalGutter: true);\n  }\n}\n\n// 3 Columns\n\n/*\n * grid__d2-5-5\n */\n@mixin grid__d2-5-5($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 5, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 5, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 5, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 5, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 5, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 5, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n.#{$prefix}grid__d2-5-5 {\n  @include grid__d2-5-5($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d2-5-5($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d2-8-2\n */\n@mixin grid__d2-8-2($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 8, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n.#{$prefix}grid__d2-8-2 {\n  @include grid__d2-8-2($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d2-8-2($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d3-3-6__t6-6-12\n */\n@mixin grid__d3-3-6__t6-6-12($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n\n    > .#{$prefix}grid-column {\n      &.#{$prefix}grid-column-6 {\n        grid-column: span 2;\n      }\n\n      &.#{$prefix}grid-column-3 {\n        grid-column: span 1;\n      }\n    }\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d3-3-6__t6-6-12 {\n  @include grid__d3-3-6__t6-6-12($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d3-3-6__t6-6-12($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d3-6-3__t2_8_2\n */\n@mixin grid__d3-6-3__t2-8-2($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 8, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d3-6-3__t2-8-2 {\n  @include grid__d3-6-3__t2-8-2($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d3-6-3__t2-8-2($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d4-4-4__t4-4-4\n */\n@mixin grid__d4-4-4__t4-4-4($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d4-4-4__t4-4-4 {\n  @include grid__d4-4-4__t4-4-4($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d4-4-4__t4-4-4($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d5-2-2\n */\n@mixin grid__d5-5-2($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 5, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 5, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 5, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 5, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 5, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 5, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n.#{$prefix}grid__d5-5-2 {\n  @include grid__d5-5-2($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d5-5-2($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d6-3-3__t12-6-6\n */\n@mixin grid__d6-3-3__t12-6-6($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n\n    > .#{$prefix}grid-column {\n      &.#{$prefix}grid-column-6 {\n        grid-column: span 2;\n      }\n\n      &.#{$prefix}grid-column-3 {\n        grid-column: span 1;\n      }\n    }\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n.#{$prefix}grid__d6-3-3__t12-6-6 {\n  @include grid__d6-3-3__t12-6-6($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d6-3-3__t12-6-6($removeVerticalGutter: true);\n  }\n}\n\n// 4 columns\n\n/*\n * grid__d2-4-4-2__t6-6-6-6\n */\n@mixin grid__d2-4-4-2__t6-6-6-6($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n\n    > .#{$prefix}grid-column {\n      &.#{$prefix}grid-column-6 {\n        grid-column: span 2;\n      }\n    }\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d2-4-4-2__t6-6-6-6 {\n  @include grid__d2-4-4-2__t6-6-6-6($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d2-4-4-2__t6-6-6-6($removeVerticalGutter: true);\n  }\n}\n\n/*\n * grid__d3-3-3-3__t6-6-6-6\n */\n@mixin grid__d3-3-3-3__t6-6-6-6($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n\n    > .#{$prefix}grid-column {\n      &.#{$prefix}grid-column-6 {\n        grid-column: span 2;\n      }\n    }\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d3-3-3-3__t6-6-6-6 {\n  @include grid__d3-3-3-3__t6-6-6-6($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d3-3-3-3__t6-6-6-6($removeVerticalGutter: true);\n  }\n}\n\n// 6 columns\n\n/*\n * grid__d2-2-2-2-2-2__t6-6\n */\n@mixin grid__d2-2-2-2-2-2__t6-6($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n\n    > .#{$prefix}grid-column {\n      &.#{$prefix}grid-column-2 {\n        grid-column: span 1;\n      }\n    }\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 6, $breakpoint: tablet, $deactivateGutter: $removeVerticalGutter);\n    }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n.#{$prefix}grid__d2-2-2-2-2-2__t6-6 {\n  @include grid__d2-2-2-2-2-2__t6-6($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d2-2-2-2-2-2__t6-6($removeVerticalGutter: true);\n  }\n}\n\n// Legacy, needed for other brands\n\n/*\n * grid__d2-2-2-2-2-2__t12\n */\n@mixin grid__d2-2-2-2-2-2__t12($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 2, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns: 100%;\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n.#{$prefix}grid__d2-2-2-2-2-2__t12 {\n  @include grid__d2-2-2-2-2-2__t12($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d2-2-2-2-2-2__t12($removeVerticalGutter: true);\n  }\n}\n\n\n/*\n * grid__d3-3-3-3__t12\n */\n@mixin grid__d3-3-3-3__t12($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 3, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns: 100%;\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n.#{$prefix}grid__d3-3-3-3__t12 {\n  @include grid__d3-3-3-3__t12($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d3-3-3-3__t12($removeVerticalGutter: true);\n  }\n}\n\n\n/*\n * grid__d4-4-4__t12\n */\n@mixin grid__d4-4-4__t12($removeVerticalGutter: false) {\n  grid-template-columns:\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter)\n    calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktopLarge, $deactivateGutter: $removeVerticalGutter);\n\n  @include for-size(desktop) {\n    grid-template-columns:\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter)\n      calcColumnWidth($elementColumnStretch: 4, $breakpoint: desktop, $deactivateGutter: $removeVerticalGutter);\n  }\n\n  @include for-size(tablet) {\n    grid-template-columns: 100%;\n  }\n\n  @include for-size(phone) {\n    grid-template-columns: 100%;\n  }\n\n  &.#{$prefix}force-mobile-layout {\n    grid-template-columns: 100%;\n  }\n}\n\n.#{$prefix}grid__d4-4-4__t12 {\n  @include grid__d4-4-4__t12($removeVerticalGutter: false);\n\n  &.#{$prefix}remove-vertical-gutter {\n    @include grid__d4-4-4__t12($removeVerticalGutter: true);\n  }\n}\n\n\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport {\n  CONTENT_POSITION_TOP,\n  GRID_D10_2__T10_2,\n  GRID_D12__T12,\n  GRID_D2_10__T2_10,\n  GRID_D2_2_2_2_2_2__T12,\n  GRID_D2_2_2_2_2_2__T6_6,\n  GRID_D2_4_4_2__T6_6_6_6,\n  GRID_D2_5_5,\n  GRID_D2_8_2,\n  GRID_D3_3_3_3__T12,\n  GRID_D3_3_3_3__T6_6_6_6,\n  GRID_D3_3_6__T6_6_12,\n  GRID_D3_6_3__T2_8_2,\n  GRID_D3_9__T4_8,\n  GRID_D4_4_4__T12,\n  GRID_D4_4_4__T4_4_4,\n  GRID_D4_8__T4_8,\n  GRID_D5_5_2,\n  GRID_D6_3_3__T12_6_6,\n  GRID_D6_6__T6_6,\n  GRID_D8_4__T8_4,\n  GRID_D9_3__T8_4\n} from \"./constants/grid-control-constants\";\n// import { detectSlotChanges } from \"../../utils/slot-helper\";\nimport Fragment from \"../../common/fragment\";\nimport { ContentPosition, Grid } from \"./constants/grid-control-types\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot column-1 - holds one number of eon-ui-grid-control-column.\n * @slot column-2 - holds one number of eon-ui-grid-control-column.\n * @slot column-3 - holds one number of eon-ui-grid-control-column.\n * @slot column-4 - holds one number of eon-ui-grid-control-column.\n * @slot column-5 - holds one number of eon-ui-grid-control-column.\n * @slot column-6 - holds one number of eon-ui-grid-control-column.\n */\n@Component({\n  tag: \"eon-ui-grid-control\",\n  styleUrl: \"grid-control.scss\",\n  shadow: true\n})\nexport class GridControl {\n  // @InitLogging() sentryTransaction;\n\n  @Element() hostElement: HTMLEonUiGridControlElement;\n\n  /**\n   * Defines the grid layout for desktop and tablet. Mobile always switches to components using 12 columns of the grid.\n   * grid\\_\\_d3-9\\_\\_t4-8 defines a grid which is split up into two columns 3/9 on desktop (d) viewport and 4/8 on tablet (t) viewport. Mobile is always one column (12).\n   * @default GRID_D12__T12;\n   */\n  @Prop() grid: Grid = GRID_D12__T12;\n\n  /**\n   * Defines the minimum height of the whole grid control. This is necessary if you'd like position components on a section with background image at a certain position.\n   */\n  @Prop() minHeight: string;\n\n  /**\n   * Sets style=\"height: 100%\" to child's. If these support stretching according to this style setting, they will fill up the available space of the column.\n   * @default false\n   */\n  @Prop() sameHeight: boolean = false;\n\n  /**\n   * Defines the vertical position of elements in first column.\n   * @default top\n   */\n  @Prop() contentPositionCol1: ContentPosition = CONTENT_POSITION_TOP;\n\n  /**\n   * Defines the vertical position of elements in second column.\n   * @default top\n   */\n  @Prop() contentPositionCol2: ContentPosition = CONTENT_POSITION_TOP;\n\n  /**\n   * Defines the vertical position of elements in third column.\n   * @default top\n   */\n  @Prop() contentPositionCol3: ContentPosition = CONTENT_POSITION_TOP;\n\n  /**\n   * Defines the vertical position of elements in fourth column.\n   * @default top\n   */\n  @Prop() contentPositionCol4: ContentPosition = CONTENT_POSITION_TOP;\n\n  /**\n   * Defines the vertical position of elements in fifth column.\n   * @default top\n   */\n  @Prop() contentPositionCol5: ContentPosition = CONTENT_POSITION_TOP;\n\n  /**\n   * Defines the vertical position of elements in sixth column.\n   * @default top\n   */\n  @Prop() contentPositionCol6: ContentPosition = CONTENT_POSITION_TOP;\n\n  /**\n   * If this is active, the phone styles are taken independently from viewport width\n   */\n  @Prop() forceMobileLayout: boolean = false;\n\n  /**\n   * Removes the left and right spacing between the columns.\n   * @default false\n   */\n  @Prop({ reflect: true }) removeVerticalGutter: boolean = false;\n\n  /**\n   * Removes the horiztonal space between the components.\n   * @default false\n   */\n  @Prop({ reflect: true }) removeHorizontalGutter: boolean = false;\n\n  /**\n   * Used by section component to remove the last gutter spacing.\n   * @default false\n   */\n  @Prop({ reflect: true }) removeBottomSpacings: boolean = false;\n\n  componentWillLoad() {\n    this.toggleHeight();\n    this.handleHorizontalGutterForComponents();\n  }\n\n  @Watch(\"removeHorizontalGutter\")\n  handleHorizontalGutterForComponents() {\n    if (!!this.removeHorizontalGutter) {\n      for (let child of Array.from(this.hostElement.children) as HTMLElement[]) {\n        child.setAttribute(\"data-remove-horizontal-gutter\", \"true\");\n      }\n    } else {\n      for (let child of Array.from(this.hostElement.children) as HTMLElement[]) {\n        child.removeAttribute(\"data-remove-horizontal-gutter\");\n      }\n    }\n  }\n\n  @Watch(\"sameHeight\")\n  private toggleHeight() {\n    for (let child of Array.from(this.hostElement.children) as HTMLElement[]) {\n      this.sameHeight ? (child.style.height = \"100%\") : (child.style.height = \"\");\n      for (let slotChild of Array.from(child.children) as HTMLElement[]) {\n        this.sameHeight ? (slotChild.style.height = \"100%\") : (slotChild.style.height = \"\");\n      }\n    }\n  }\n\n  private renderGrid() {\n    switch (this.grid) {\n      case GRID_D12__T12:\n        return (\n          <div\n            class={pfx({\n              \"grid-column\": true,\n              \"grid-column-12\": true,\n              [this.contentPositionCol1]: this.contentPositionCol1\n            })}\n          >\n            <slot name=\"column-1\" />\n          </div>\n        );\n      case GRID_D2_10__T2_10:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-10\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D3_9__T4_8:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-9\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D4_8__T4_8:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-8\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D6_6__T6_6:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-6\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-6\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D8_4__T8_4:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-8\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D9_3__T8_4:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-9\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D10_2__T10_2:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-10\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D2_5_5:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-5\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-5\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D2_8_2:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-8\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D3_3_6__T6_6_12:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-6\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D3_6_3__T2_8_2:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-8\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D4_4_4__T4_4_4:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D5_5_2:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-5\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-5\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D6_3_3__T12_6_6:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-6\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D2_4_4_2__T6_6_6_6:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol4]: this.contentPositionCol4\n              })}\n            >\n              <slot name=\"column-4\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D3_3_3_3__T6_6_6_6:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol4]: this.contentPositionCol4\n              })}\n            >\n              <slot name=\"column-4\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D2_2_2_2_2_2__T6_6:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol4]: this.contentPositionCol4\n              })}\n            >\n              <slot name=\"column-4\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol5]: this.contentPositionCol5\n              })}\n            >\n              <slot name=\"column-5\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol6]: this.contentPositionCol6\n              })}\n            >\n              <slot name=\"column-6\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D3_3_3_3__T12:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-3\": true,\n                [this.contentPositionCol4]: this.contentPositionCol4\n              })}\n            >\n              <slot name=\"column-4\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D4_4_4__T12:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-4\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n          </Fragment>\n        );\n      case GRID_D2_2_2_2_2_2__T12:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol2]: this.contentPositionCol2\n              })}\n            >\n              <slot name=\"column-2\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol3]: this.contentPositionCol3\n              })}\n            >\n              <slot name=\"column-3\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol4]: this.contentPositionCol4\n              })}\n            >\n              <slot name=\"column-4\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol5]: this.contentPositionCol5\n              })}\n            >\n              <slot name=\"column-5\" />\n            </div>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-2\": true,\n                [this.contentPositionCol6]: this.contentPositionCol6\n              })}\n            >\n              <slot name=\"column-6\" />\n            </div>\n          </Fragment>\n        );\n      default:\n        return (\n          <Fragment>\n            <div\n              class={pfx({\n                \"grid-column\": true,\n                \"grid-column-12\": true,\n                [this.contentPositionCol1]: this.contentPositionCol1\n              })}\n            >\n              <slot name=\"column-1\" />\n            </div>\n          </Fragment>\n        );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={pfx({\n            \"grid-container\": true,\n            [this.grid]: this.grid,\n            \"remove-vertical-gutter\": this.removeVerticalGutter,\n            \"remove-horizontal-gutter\": this.removeHorizontalGutter,\n            \"same-height\": this.sameHeight,\n            \"force-mobile-layout\": !!this.forceMobileLayout\n          })}\n          style={{\n            \"min-height\": this.minHeight\n          }}\n        >\n          {this.renderGrid()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}