{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/three-column-layout/index.tsx","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,KAAK,QAAQ,MAAM,oCAAoC,CAAC;AAC/D,OAAO,KAAK,OAAO,MAAM,6BAA6B,CAAC;AACvD,OAAO,KAAK,GAAG,MAAM,4CAA4C,CAAC;AAuBlE,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC;KAC3C,UAAU,EAA+B;KACzC,QAAQ,EAA6B,CAAC;AAExC,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,iBAAiB,CAAC,EACnE,UAAU,EACV,QAAQ,EACR,UAAU,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,EACjC;IACA,MAAM,EACL,mBAAmB,GAAG,IAAI,EAC1B,mBAAmB,GAAG,GAAG,EACzB,IAAI,GAAG,SAAS,EAChB,GAAG,UAAU,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC;IACnD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,GAAG,CAAC,MAAM,EAAE;QAChE,KAAK,EAAE,mBAAmB;QAC1B,MAAM,EAAE,mBAAmB;QAC3B,KAAK,EAAE,CAAC;KACR,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;IAC9B,MAAM,qBAAqB,GAC1B,iBAAiB,KAAK,OAAO,IAAI,CAAC,iBAAiB,KAAK,QAAQ,IAAI,IAAI,KAAK,UAAU,CAAC,CAAC;IAC1F,MAAM,sBAAsB,GAC3B,iBAAiB,KAAK,OAAO,IAAI,CAAC,iBAAiB,KAAK,QAAQ,IAAI,IAAI,KAAK,SAAS,CAAC,CAAC;IAEzF,OAAO,CACN,aAAK,GAAG,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC;QACtE,aACC,GAAG,EAAC,SAAS,EACb,OAAO,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,qBAAqB,IAAI,OAAO,CAAC,cAAc,CAAC,IAE1E,OAAO,CACH;QACN,aAAK,GAAG,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,IAC1D,MAAM,CACF;QACN,aACC,GAAG,EAAC,UAAU,EACd,OAAO,EAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,sBAAsB,IAAI,OAAO,CAAC,cAAc,CAAC,IAE5E,QAAQ,CACJ,CACD,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,eAAe,iBAAiB,CAAC","sourcesContent":["import { create, tsx } from '@dojo/framework/core/vdom';\nimport { RenderResult } from '@dojo/framework/core/interfaces';\nimport breakpoint from '@dojo/framework/core/middleware/breakpoint';\nimport theme from '../middleware/theme';\nimport * as fixedCss from './styles/three-column-layout.m.css';\nimport * as baseCss from '../common/styles/base.m.css';\nimport * as css from '../theme/default/three-column-layout.m.css';\n\nexport interface ThreeColumnLayoutProperties {\n\t/** The breakpoint at which one column should collapse. Defaults to 1024px.\n\t * The column that collapses will be the trailing column by default or the column that is not specified by the\n\t * `bias` property if it is provided\n\t */\n\ttwoColumnBreakpoint?: number;\n\t/** The breakpoint at which both side columns will collapse. Defaults to 600px. */\n\toneColumnBreakpoint?: number;\n\t/** Determines which column is more important, and will remain at the `twoColumnBreakpoint`. Defaults to `'leading'`. */\n\tbias?: 'leading' | 'trailing';\n}\n\nexport interface ThreeColumnLayoutChildren {\n\t/** The content for the leading column */\n\tleading: RenderResult;\n\t/** The content for the center column */\n\tcenter: RenderResult;\n\t/** The content for the trailing column */\n\ttrailing: RenderResult;\n}\n\nconst factory = create({ breakpoint, theme })\n\t.properties<ThreeColumnLayoutProperties>()\n\t.children<ThreeColumnLayoutChildren>();\n\nexport const ThreeColumnLayout = factory(function ThreeColumnLayout({\n\tproperties,\n\tchildren,\n\tmiddleware: { breakpoint, theme }\n}) {\n\tconst {\n\t\ttwoColumnBreakpoint = 1024,\n\t\toneColumnBreakpoint = 600,\n\t\tbias = 'leading'\n\t} = properties();\n\tconst [{ leading, center, trailing }] = children();\n\tconst classes = theme.classes(css);\n\tconst { breakpoint: currentBreakpoint } = breakpoint.get('root', {\n\t\tLARGE: twoColumnBreakpoint,\n\t\tMEDIUM: oneColumnBreakpoint,\n\t\tSMALL: 0\n\t}) || { breakpoint: 'LARGE' };\n\tconst shouldCollapseLeading =\n\t\tcurrentBreakpoint === 'SMALL' || (currentBreakpoint === 'MEDIUM' && bias === 'trailing');\n\tconst shouldCollapseTrailing =\n\t\tcurrentBreakpoint === 'SMALL' || (currentBreakpoint === 'MEDIUM' && bias === 'leading');\n\n\treturn (\n\t\t<div key=\"root\" classes={[theme.variant(), fixedCss.root, classes.root]}>\n\t\t\t<div\n\t\t\t\tkey=\"leading\"\n\t\t\t\tclasses={[classes.leading, shouldCollapseLeading && baseCss.visuallyHidden]}\n\t\t\t>\n\t\t\t\t{leading}\n\t\t\t</div>\n\t\t\t<div key=\"center\" classes={[fixedCss.center, classes.center]}>\n\t\t\t\t{center}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tkey=\"trailing\"\n\t\t\t\tclasses={[classes.trailing, shouldCollapseTrailing && baseCss.visuallyHidden]}\n\t\t\t>\n\t\t\t\t{trailing}\n\t\t\t</div>\n\t\t</div>\n\t);\n});\n\nexport default ThreeColumnLayout;\n"]}