{"version":3,"sources":["webpack:///./Avensia.Common/Features/Shared/Blocks/RowLayout/RowLayoutBlock.tsx","webpack:///./Avensia.Common/Features/Shared/BoxLayout/index.tsx"],"names":["RowLayoutContentArea","elementProps","componentProps","component","Component","layout","spacingBetweenBlocks","children","elementComponent","props","render","for","this","block","items","SPACING_DEFAULT","SPACING_MOBILE","BOX_ITEM_CLASSNAME","fractions","spacingDefaulter","value","currentBreakpoint","Tiny","isThin","fraction","Column","div","display","flexDirection","flexGrow","minWidth","Block","sort","entities","a","b","Children","toArray","row","allowSorting","Small","map","entry","element","shift","columns","Micro","reduce","current","item","convert","spacing","Div","css","flexWrap","margin","xy","className","wrap","entity","index","isColumn","key","flexBasis","padding","state","BoxLayout"],"mappings":"8IAmBMA,EAAuB,SAAC,GAC5B,IAAAC,EAAA,EAAAA,aACA,IAAAC,eAAkB,IAAAC,UAAA,qBAA8B,+BAEhD,OACE,kBAACC,EAAS,eAAKH,GACb,kBAAC,IAAS,CAACI,OAAQH,EAAeG,OAAQC,qBAAsBJ,EAAeI,sBAC5EL,EAAaM,YAUP,sBAAqB,YAClC,2D,OACE,EAAAC,iBAAgF,SAAAC,GAAS,OACvF,kBAACT,EAAoB,CAACC,aAAcQ,EAAOP,eAAgB,EAAKO,S,EAKpE,OAP6B,iBAI3B,YAAAC,OAAA,WACE,OAAO,kBAAC,IAAW,CAACC,IAAKC,KAAKH,MAAMI,MAAMC,MAAOX,UAAWS,KAAKJ,oBAErE,EARkC,CACL,IAAMJ,a,+LC/BxBW,EAAkB,KAAmB,IACrCC,EAAiB,KAAmB,IAEpCC,EAAqB,mBAE5BC,EAAY,CAChB,MAAO,GACP,MAAO,EAAI,EACX,MAAO,IACP,MAAO,EAAI,EACX,MAAO,KAeT,SAASC,EAAiBC,EAAyBC,GACjD,OAAiB,IAAVD,EAAkBC,EAAoB,IAAWC,KAAOP,EAAkBC,EAAkBI,EAGrG,SAASG,EAAOC,GACd,OAAOA,GAAY,EAAI,EAGzB,IAAMC,EAAS,IAAOC,IAAI,CACxBC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,SAAU,IAGNC,EAAQ,IAAOL,IAAI,CACvBG,SAAU,EACVC,SAAU,IAaZ,SAASE,EAAKC,GACZ,OAAOA,EAASD,MAAK,SAACE,EAAGC,GAAM,OAAAA,EAAEX,SAAWU,EAAEV,YA8HhD,+B,+CAyBA,OAzBwB,iBACtB,YAAAd,OAAA,WACE,IAAMH,EAAW,IAAM6B,SAASC,QAAQzB,KAAKH,MAAMF,UAC7C0B,EA9HV,SACEK,EACA/B,EACAc,EACAkB,GAEA,GAAIlB,EAAoB,IAAWmB,MACjC,OAAOF,EAAIG,KAAI,SAAAC,GACb,MAAqB,iBAAVA,EACF,CACLlB,SAAUN,EAAUwB,GACpBC,QAASpC,EAASqC,SAIf,CACLpB,SAAUN,EAAUwB,EAAM,IAC1BG,QAASH,EAAM,GAAGD,KAAI,SAAAC,GAAS,OAC7BlB,SAAUN,EAAUwB,GACpBC,QAASpC,EAASqC,gBAO1B,GAAIvB,EAAoB,IAAWyB,MAAO,CACxC,IAAM,EAAWR,EAAIS,QAA0B,SAACC,EAASC,GACvD,GAAoB,iBAATA,EACT,OAAO,YACFD,EAAO,CACV,CACExB,SAAUD,EAAOL,EAAU+B,IAAS,GAAM,EAC1CN,QAASpC,EAASqC,WAKxB,IAAMxB,EAAQG,EAAOL,EAAU+B,EAAK,KAAO,GAAM,EACjD,OAAO,YACFD,EACAC,EAAK,GAAGR,KAAI,WAAM,OACnBjB,SAAUJ,EACVuB,QAASpC,EAASqC,eAGrB,IAEH,OAAOL,EAAeP,EAAK,GAAY,EAIzC,IAAMC,EAAWK,EAAIS,QACnB,SAACC,EAASN,GACR,MAAiB,iBAAVA,EACH,YACGM,EAAO,CACV,CACExB,SAAU,EACVmB,QAASpC,EAASqC,WAGpB,YACGI,EACAN,EAAM,GAAGD,KAAI,WAAM,OACpBjB,SAAU,EACVmB,QAASpC,EAASqC,eAG1B,IAGF,OAAOL,EAAeP,EAAKC,GAAYA,EAsDpBiB,CAAQtC,KAAKH,MAAMJ,OAAQE,EAAUK,KAAKH,MAAMY,kBAAmBT,KAAKH,MAAM8B,cACzFY,EAAUhC,EAAiBP,KAAKH,MAAMH,qBAAsBM,KAAKH,MAAMY,mBAC7E,OACE,kBAAC,IAAO+B,IAAG,CACTC,IAAG,yBACD1B,QAAS,OACT2B,SAAU,QACNH,GAAW,CACbI,OAAQ,CACNC,GAAI,SAASL,EAAO,WAGpBvC,KAAKH,MAAMY,kBAAoB,IAAWmB,OAAS,CACrDc,SAAU,WAGdG,UAvMqB,eAyMpBxB,EAASQ,IAjElB,SAASiB,EAAKpD,EAAwCe,GACpD,IAAM8B,EAAUhC,EAAiBb,EAAsBe,GACvD,OAAO,SAACsC,EAA4CC,GAClD,OAPJ,SAAkBD,GAChB,MAAO,YAAaA,EAMXE,CAASF,GACd,kBAAClC,EAAM,CACLqC,IAAKF,EACLP,IAAK,CACHU,UAAgC,IAAlBJ,EAAOnC,SAAc,MAGpCmC,EAAOd,QAAQJ,IAAIiB,EAAKpD,EAAsBe,KAG/C,kBAACU,EAAK,CACJ+B,IAAKF,EACLP,IAAG,2BACGF,GAAW,CACba,QAAS,CACPR,GAAI,QAAQL,EAAO,WAErB,CACFY,UAAWZ,EAAU,QAA0B,IAAlBQ,EAAOnC,SAAc,OAAO2B,EAAO,IAA2B,IAAlBQ,EAAOnC,SAAc,OAG/FmC,EAAOhB,UAyCIe,CAAK9C,KAAKH,MAAMH,qBAAsBM,KAAKH,MAAMY,sBAIvE,EAzBA,CAAwB,IAAMjB,WA6Bf,gBACb,aACE,SAAC6D,GAA4B,OAC3B5C,kBAAmB4C,EAAM5C,qBAF7B,CAIE6C","file":"assets/33.chunk.a86faab2917677ce3161.js","sourcesContent":["/**\r\n * @ComponentFor RowLayoutBlockViewModel\r\n */\r\nimport React from 'react';\r\nimport { EpiProperty, supportsComponentProp, ComponentType } from '@avensia/scope-episerver';\r\nimport RowLayoutBlockType from './RowLayoutBlockViewModel.type';\r\nimport BoxLayout, { LayoutType } from 'Shared/BoxLayout';\r\n\r\ntype RowLayoutContentAreaPropType = {\r\n  elementProps: React.HTMLAttributes<HTMLElement> & {\r\n    children?: React.ReactNode;\r\n  };\r\n  componentProps: {\r\n    component?: ComponentType;\r\n    layout: LayoutType[];\r\n    spacingBetweenBlocks: boolean;\r\n  };\r\n};\r\n\r\nconst RowLayoutContentArea = ({\r\n  elementProps,\r\n  componentProps: { component: Component = 'div', ...componentProps },\r\n}: RowLayoutContentAreaPropType) => {\r\n  return (\r\n    <Component {...elementProps}>\r\n      <BoxLayout layout={componentProps.layout} spacingBetweenBlocks={componentProps.spacingBetweenBlocks}>\r\n        {elementProps.children}\r\n      </BoxLayout>\r\n    </Component>\r\n  );\r\n};\r\n\r\ntype PropType = RowLayoutBlockType & {\r\n  component?: ComponentType;\r\n};\r\n\r\nexport default supportsComponentProp(\r\n  class RowLayoutBlock extends React.Component<PropType> {\r\n    elementComponent: React.StatelessComponent<React.HTMLAttributes<HTMLElement>> = props => (\r\n      <RowLayoutContentArea elementProps={props} componentProps={this.props} />\r\n    );\r\n    render() {\r\n      return <EpiProperty for={this.props.block.items} component={this.elementComponent} />;\r\n    }\r\n  },\r\n);\r\n","import React from 'react';\r\nimport { styled, StyledProps } from '@glitz/react';\r\nimport connect from '../connect';\r\nimport { Breakpoint } from '@avensia/scope';\r\nimport * as style from '../Style';\r\n\r\nexport const SPACING_DEFAULT = style.pixelsToUnit(25);\r\nexport const SPACING_MOBILE = style.pixelsToUnit(15);\r\nexport const BOX_CLASSNAME = 'purefun-box';\r\nexport const BOX_ITEM_CLASSNAME = 'purefun-box-item';\r\n\r\nconst fractions = {\r\n  '1:2': 1 / 2,\r\n  '1:3': 1 / 3,\r\n  '1:4': 1 / 4,\r\n  '2:3': 2 / 3,\r\n  '3:4': 3 / 4,\r\n};\r\n\r\nexport type LayoutAliasType = keyof typeof fractions;\r\n\r\ntype LayoutColumnType = LayoutAliasType[] & {\r\n  0: LayoutAliasType;\r\n  1: LayoutAliasType[] & {\r\n    0: LayoutAliasType;\r\n    1: LayoutAliasType;\r\n  };\r\n};\r\n\r\nexport type LayoutType = LayoutAliasType | LayoutColumnType;\r\n\r\nfunction spacingDefaulter(value: boolean | string, currentBreakpoint: number) {\r\n  return value === true ? (currentBreakpoint > Breakpoint.Tiny ? SPACING_DEFAULT : SPACING_MOBILE) : value;\r\n}\r\n\r\nfunction isThin(fraction: number) {\r\n  return fraction <= 1 / 3;\r\n}\r\n\r\nconst Column = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  flexGrow: 1,\r\n  minWidth: 0,\r\n});\r\n\r\nconst Block = styled.div({\r\n  flexGrow: 1,\r\n  minWidth: 0,\r\n});\r\n\r\ntype BlockEntityType = {\r\n  fraction: number;\r\n  element: React.ReactNode;\r\n};\r\n\r\ntype ColumnEntityType = {\r\n  fraction: number;\r\n  columns: BlockEntityType[];\r\n};\r\n\r\nfunction sort(entities: BlockEntityType[]) {\r\n  return entities.sort((a, b) => b.fraction - a.fraction);\r\n}\r\n\r\nfunction convert(\r\n  row: LayoutType[],\r\n  children: React.ReactNode[],\r\n  currentBreakpoint: number,\r\n  allowSorting?: boolean,\r\n  ): (BlockEntityType | ColumnEntityType)[] {\r\n  if (currentBreakpoint > Breakpoint.Small) {\r\n    return row.map(entry => {\r\n      if (typeof entry === 'string') {\r\n        return {\r\n          fraction: fractions[entry],\r\n          element: children.shift(),\r\n        };\r\n      }\r\n\r\n      return {\r\n        fraction: fractions[entry[0]],\r\n        columns: entry[1].map(entry => ({\r\n          fraction: fractions[entry],\r\n          element: children.shift(),\r\n        })),\r\n      };\r\n    });\r\n  }\r\n\r\n  // Flatten all blocks to full or half width\r\n  if (currentBreakpoint > Breakpoint.Micro) {\r\n    const entities = row.reduce<BlockEntityType[]>((current, item) => {\r\n      if (typeof item === 'string') {\r\n        return [\r\n          ...current,\r\n          {\r\n            fraction: isThin(fractions[item]) ? 0.5 : 1,\r\n            element: children.shift(),\r\n          },\r\n        ];\r\n      }\r\n\r\n      const value = isThin(fractions[item[0]]) ? 0.5 : 1;\r\n      return [\r\n        ...current,\r\n        ...item[1].map(() => ({\r\n          fraction: value,\r\n          element: children.shift(),\r\n        })),\r\n      ];\r\n    }, []);\r\n\r\n    return allowSorting ? sort(entities) : entities;\r\n  }\r\n\r\n  // Flatten all blocks to full width\r\n  const entities = row.reduce<BlockEntityType[]>(\r\n    (current, entry) =>\r\n      typeof entry === 'string'\r\n        ? [\r\n          ...current,\r\n          {\r\n            fraction: 1,\r\n            element: children.shift(),\r\n          },\r\n        ]\r\n        : [\r\n          ...current,\r\n          ...entry[1].map(() => ({\r\n            fraction: 1,\r\n            element: children.shift(),\r\n          })),\r\n        ],\r\n    [],\r\n  );\r\n\r\n  return allowSorting ? sort(entities) : entities;\r\n}\r\n\r\nfunction isColumn(entity: BlockEntityType | ColumnEntityType): entity is ColumnEntityType {\r\n  return 'columns' in entity;\r\n}\r\n\r\nfunction wrap(spacingBetweenBlocks: boolean | string, currentBreakpoint: number) {\r\n  const spacing = spacingDefaulter(spacingBetweenBlocks, currentBreakpoint);\r\n  return (entity: BlockEntityType | ColumnEntityType, index: number): React.ReactNode => {\r\n    return isColumn(entity) ? (\r\n      <Column\r\n        key={index}\r\n        css={{\r\n          flexBasis: `${entity.fraction * 100}%`,\r\n        }}\r\n      >\r\n        {entity.columns.map(wrap(spacingBetweenBlocks, currentBreakpoint))}\r\n      </Column>\r\n    ) : (\r\n        <Block\r\n          key={index}\r\n          css={{\r\n            ...(spacing && {\r\n              padding: {\r\n                xy: `calc(${spacing} / 2)`,\r\n              },\r\n            }),\r\n            flexBasis: spacing ? `calc(${entity.fraction * 100}% - ${spacing})` : `${entity.fraction * 100}%`,\r\n          }}\r\n        >\r\n          {entity.element}\r\n        </Block>\r\n      );\r\n  };\r\n}\r\n\r\ntype RequiredPropType = {\r\n  layout: LayoutType[];\r\n  spacingBetweenBlocks?: boolean | string;\r\n  allowSorting?: boolean;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n};\r\n\r\ntype ConnectStateType = {\r\n  currentBreakpoint: number;\r\n};\r\n\r\ntype PropType = StyledProps & RequiredPropType & ConnectStateType;\r\n\r\nclass BoxLayout extends React.Component<PropType> {\r\n  render() {\r\n    const children = React.Children.toArray(this.props.children);\r\n    const entities = convert(this.props.layout, children, this.props.currentBreakpoint, this.props.allowSorting);\r\n    const spacing = spacingDefaulter(this.props.spacingBetweenBlocks, this.props.currentBreakpoint);\r\n    return (\r\n      <styled.Div\r\n        css={{\r\n          display: 'flex',\r\n          flexWrap: 'wrap',\r\n          ...(spacing && {\r\n            margin: {\r\n              xy: `calc(-${spacing} / 2)`,\r\n            },\r\n          }),\r\n          ...(this.props.currentBreakpoint > Breakpoint.Small && {\r\n            flexWrap: 'nowrap',\r\n          }),\r\n        }}\r\n        className={BOX_CLASSNAME}\r\n      >\r\n        {entities.map(wrap(this.props.spacingBetweenBlocks, this.props.currentBreakpoint))}\r\n      </styled.Div>\r\n    );\r\n  }\r\n}\r\n\r\n\r\n\r\nexport default styled(\r\n  connect(\r\n    (state): ConnectStateType => ({\r\n      currentBreakpoint: state.currentBreakpoint,\r\n    }),\r\n  )(BoxLayout),\r\n);\r\n"],"sourceRoot":""}