{"version":3,"sources":["webpack:///./src/utilities/GridDemo.vue","webpack:///./src/utilities/GridDemo.vue?e6d2","webpack:///./src/utilities/GridDemo.vue?cf78","webpack:///./src/utilities/GridDemo.vue?427e","webpack:///./src/utilities/GridDemo.vue?7abe","webpack:///./src/utilities/GridDemo.vue?9f97","webpack:///./src/utilities/GridDemo.vue?d445"],"names":["data","columns","methods","addColumn","concat","_toConsumableArray","length","removeColumn","pop","name","class","style","_createElementVNode","_createElementBlock","_hoisted_1","_hoisted_2","_createVNode","_component_Button","type","icon","title","onClick","$options","disabled","$data","_hoisted_6","_TransitionGroup","tag","_Fragment","_renderList","col","key","_hoisted_7","_toDisplayString","_hoisted_8","_hoisted_52","_hoisted_53","_component_Panel","header","_hoisted_54","_hoisted_55","_hoisted_56","_hoisted_57","_hoisted_58"],"mappings":"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","file":"js/46.js","sourcesContent":["<template>\n\t<div class=\"card flexgrid-demo\">\n\t\t<h4>PrimeFlex grid system is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</h4>\n\n\t\t<h5>Basic</h5>\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">3</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Dynamic</h5>\n\t\t<Button type=\"button\" icon=\"pi pi-plus\" title=\"Add Column\" @click=\"addColumn\" :disabled=\"columns.length === 20\" style=\"margin-right: .5em\" />\n\t\t<Button type=\"button\" icon=\"pi pi-minus\" title=\"Remove Column\" @click=\"removeColumn\" :disabled=\"columns.length === 1\" />\n\n\t\t<div style=\"margin-top: 1em\">\n\t\t\t<transition-group name=\"dynamic-box\" tag=\"div\" class=\"p-grid\">\n\t\t\t\t<div v-for=\"col of columns\" :key=\"col\" class=\"p-col\">\n\t\t\t\t\t<div class=\"box\">{{col+1}}</div>\n\t\t\t\t</div>\n\t\t\t</transition-group>\n\t\t</div>\n\n\t\t<h5>Reverse Direction</h5>\n\t\t<div class=\"p-grid p-dir-rev\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">3</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Column Direction</h5>\n\t\t<div class=\"p-grid p-dir-col\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">3</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Reverse Column Direction</h5>\n\t\t<div class=\"p-grid p-dir-col-rev\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">3</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>12 Column Grid</h5>\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-6\">\n\t\t\t\t<div class=\"box\">6</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col-8\">\n\t\t\t\t<div class=\"box\">8</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>MultiLine</h5>\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col-6\">\n\t\t\t\t<div class=\"box\">6</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-6\">\n\t\t\t\t<div class=\"box\">6</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-6\">\n\t\t\t\t<div class=\"box\">6</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-6\">\n\t\t\t\t<div class=\"box\">6</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Fixed Width Column</h5>\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col-fixed\" style=\"width:100px\">\n\t\t\t\t<div class=\"box\">100px</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">auto</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Responsive</h5>\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col-12 p-md-6 p-lg-3\">\n\t\t\t\t<div class=\"box\">p-col-12 p-md-6 p-lg-3</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-12 p-md-6 p-lg-3\">\n\t\t\t\t<div class=\"box\">p-col-12 p-md-6 p-lg-3</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-12 p-md-6 p-lg-3\">\n\t\t\t\t<div class=\"box\">p-col-12 p-md-6 p-lg-3</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-12 p-md-6 p-lg-3\">\n\t\t\t\t<div class=\"box\">p-col-12 p-md-6 p-lg-3</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Horizontal Alignment - Start</h5>\n\t\t<div class=\"p-grid p-justify-start\">\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-1\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Horizontal Alignment - End</h5>\n\t\t<div class=\"p-grid p-justify-end\">\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-1\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Horizontal Alignment - Center</h5>\n\t\t<div class=\"p-grid p-justify-center\">\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-1\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Horizontal Alignment - Between</h5>\n\t\t<div class=\"p-grid p-justify-between\">\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-1\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Horizontal Alignment - Around</h5>\n\t\t<div class=\"p-grid p-justify-around\">\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-1\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Horizontal Alignment - Even</h5>\n\t\t<div class=\"p-grid p-justify-even\">\n\t\t\t<div class=\"p-col-2\">\n\t\t\t\t<div class=\"box\">2</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-1\">\n\t\t\t\t<div class=\"box\">1</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Vertical Alignment - Start</h5>\n\t\t<div class=\"p-grid p-align-start vertical-container\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Vertical Alignment - End</h5>\n\t\t<div class=\"p-grid p-align-end vertical-container\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Vertical Alignment - Center</h5>\n\t\t<div class=\"p-grid p-align-center vertical-container\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Vertical Alignment - Stretch</h5>\n\t\t<div class=\"p-grid p-align-stretch vertical-container\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box box-stretched\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box box-stretched\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<div class=\"box box-stretched\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Vertical Alignment - Per Column</h5>\n\t\t<div class=\"p-grid vertical-container\">\n\t\t\t<div class=\"p-col p-col-align-start\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col p-col-align-center\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col p-col-align-end\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Offset</h5>\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col-6 p-offset-3\">\n\t\t\t\t<div class=\"box\">6</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4 p-offset-4\">\n\t\t\t\t<div class=\"box\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Nested</h5>\n\t\t<div class=\"p-grid nested-grid\">\n\t\t\t<div class=\"p-col-8\">\n\t\t\t\t<div class=\"p-grid\">\n\t\t\t\t\t<div class=\"p-col-6\">\n\t\t\t\t\t\t<div class=\"box\">6</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"p-col-6\">\n\t\t\t\t\t\t<div class=\"box\">6</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"p-col-12\">\n\t\t\t\t\t\t<div class=\"box\">12</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"p-col-4\">\n\t\t\t\t<div class=\"box box-stretched\">4</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<h5>Panels</h5>\n\t\t<div class=\"p-grid\">\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<Panel header=\"Header\">\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\t\t\t\t\t\tUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t\t\tDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n\t\t\t\t\t\tcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n\t\t\t\t</Panel>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<Panel header=\"Header\">\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\t\t\t\t\t\tUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t\t\tDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n\t\t\t\t\t\tcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n\t\t\t\t</Panel>\n\t\t\t</div>\n\t\t\t<div class=\"p-col\">\n\t\t\t\t<Panel header=\"Header\">\n\t\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\t\t\t\t\t\tUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t\t\tDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n\t\t\t\t\t\tcupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n\t\t\t\t</Panel>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcolumns: [0, 1, 2, 3, 4, 5]\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\taddColumn() {\n\t\t\t\tthis.columns = [...this.columns, this.columns.length];\n\t\t\t},\n\t\t\tremoveColumn() {\n\t\t\t\tthis.columns.pop();\n\t\t\t}\n\t\t},\n\t\tname: \"GridDemo\"\n\t}\n</script>\n\n<style lang=\"scss\">\n\t.flexgrid-demo {\n\t\t.box {\n\t\t\tbackground-color: var(--surface-e);\n\t\t\ttext-align: center;\n\t\t\tpadding-top: 1rem;\n\t\t\tpadding-bottom: 1rem;\n\t\t\tborder-radius: 4px;\n\t\t\tbox-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n\t\t}\n\n\t\t.box-stretched {\n\t\t\theight: 100%;\n\t\t}\n\n\t\t.vertical-container {\n\t\t\tmargin: 0;\n\t\t\theight: 200px;\n\t\t\tbackground: var(--surface-d);\n\t\t\tborder-radius: 4px;\n\t\t}\n\n\t\t.nested-grid .p-col-4 {\n\t\t\tpadding-bottom: 1rem;\n\t\t}\n\n\t\t.dynamic-box-enter-active, .dynamic-box-leave-active {\n\t\t\ttransition: all .5s;\n\t\t}\n\n\t\t.dynamic-box-enter-from, .dynamic-box-leave-to {\n\t\t\topacity: 0;\n\t\t\ttransform: translateX(30px);\n\t\t}\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n</style>\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".flexgrid-demo .box {\\n  background-color: var(--surface-e);\\n  text-align: center;\\n  padding-top: 1rem;\\n  padding-bottom: 1rem;\\n  border-radius: 4px;\\n  -webkit-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\\n          box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\\n}\\n.flexgrid-demo .box-stretched {\\n  height: 100%;\\n}\\n.flexgrid-demo .vertical-container {\\n  margin: 0;\\n  height: 200px;\\n  background: var(--surface-d);\\n  border-radius: 4px;\\n}\\n.flexgrid-demo .nested-grid .p-col-4 {\\n  padding-bottom: 1rem;\\n}\\n.flexgrid-demo .dynamic-box-enter-active, .flexgrid-demo .dynamic-box-leave-active {\\n  -webkit-transition: all 0.5s;\\n  transition: all 0.5s;\\n}\\n.flexgrid-demo .dynamic-box-enter-from, .flexgrid-demo .dynamic-box-leave-to {\\n  opacity: 0;\\n  -webkit-transform: translateX(30px);\\n          transform: translateX(30px);\\n}\\n.flexgrid-demo p {\\n  margin: 0;\\n}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./GridDemo.vue?vue&type=style&index=0&id=55416f32&lang=scss\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"0f5f6ecc\", content, false, {\"sourceMap\":false,\"shadowMode\":false});\n// Hot Module Replacement\nif(module.hot) {\n // When the styles change, update the <style> tags\n if(!content.locals) {\n   module.hot.accept(\"!!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./GridDemo.vue?vue&type=style&index=0&id=55416f32&lang=scss\", function() {\n     var newContent = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./GridDemo.vue?vue&type=style&index=0&id=55416f32&lang=scss\");\n     if(newContent.__esModule) newContent = newContent.default;\n     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n     update(newContent);\n   });\n }\n // When the module is disposed, remove the <style> tags\n module.hot.dispose(function() { update(); });\n}","import { render } from \"./GridDemo.vue?vue&type=template&id=55416f32\"\nimport script from \"./GridDemo.vue?vue&type=script&lang=js\"\nexport * from \"./GridDemo.vue?vue&type=script&lang=js\"\n\nimport \"./GridDemo.vue?vue&type=style&index=0&id=55416f32&lang=scss\"\n\nimport exportComponent from \"/codebuild/output/src2427098209/src/acx.portal/Frontend/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__file',\"src/utilities/GridDemo.vue\"]])\n/* hot reload */\nif (module.hot) {\n  __exports__.__hmrId = \"55416f32\"\n  const api = __VUE_HMR_RUNTIME__\n  module.hot.accept()\n  if (!api.createRecord('55416f32', __exports__)) {\n    console.log('reload')\n    api.reload('55416f32', __exports__)\n  }\n  \n  module.hot.accept(\"./GridDemo.vue?vue&type=template&id=55416f32\", () => {\n    console.log('re-render')\n    api.rerender('55416f32', render)\n  })\n\n}\n\n\nexport default __exports__","export { default } from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./GridDemo.vue?vue&type=script&lang=js\"; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./GridDemo.vue?vue&type=script&lang=js\"","export * from \"-!../../node_modules/vue-style-loader/index.js??ref--9-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./GridDemo.vue?vue&type=style&index=0&id=55416f32&lang=scss\"","export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./GridDemo.vue?vue&type=template&id=55416f32\""],"sourceRoot":""}