{"version":3,"sources":["webpack:///./src/components/highlighters/CodeHighlighter.vue","webpack:///./src/components/highlighters/CodeHighlighter.vue?bb79","webpack:///./src/components/highlighters/CodeHighlighter.vue?97eb","webpack:///./src/views/documentation/base/helpers/FlexLayouts.vue","webpack:///./src/views/documentation/base/helpers/FlexLayouts.vue?af42","webpack:///./src/views/documentation/base/helpers/FlexLayouts.vue?5596","webpack:///./src/core/helpers/breadcrumb.ts"],"names":["class","data-bs-toggle","title","data-bs-original-title","lang","style","getHeightInPixesls","name","props","String","fieldHeight","Number","setup","height","init","value","highlightAll","components","render","CodeHighlighter","setCurrentPageBreadcrumbs","pageTitle","breadcrumbs","dispatch","SET_BREADCRUMB_ACTION","pageBreadcrumbPath"],"mappings":"2IACOA,MAAM,Q,GACJA,MAAM,a,EACT,gCAOS,UANPA,MAAM,qBACNC,iBAAe,UACfC,MAAM,GACNC,yBAAuB,aACxB,UAED,G,GACKH,MAAM,kB,+BAI0B,gB,+BACpB,c,wDAfrB,gCAmBM,MAnBN,EAmBM,CAlBJ,gCAiBM,MAjBN,EAiBM,CAhBJ,EAQA,gCAOM,MAPN,EAOM,CANJ,gCAKa,OAJVA,MAAK,wCAAc,EAAAI,MACnBC,MAAK,oCAAY,EAAAC,sB,CACnB,gCAEM,QAFCN,MAAK,wCAAc,EAAAI,O,GACzB,wBAAa,oB,qDCXR,+BAAgB,CAC7BG,KAAM,kBACNC,MAAO,CACLJ,KAAMK,OACNC,YAAaC,QAEfC,MAAK,SAACJ,GACJ,IAAMK,EAAS,iBAAIL,EAAME,aAEjBI,EAAS,iBAAkB,KAE7BR,EAAqB,uBAAS,WAClC,OAAOO,EAAOE,MAAQ,QAQxB,OALA,wBAAU,WACR,IAAMC,eACNF,OAGK,CACLR,mBAAkB,IAGtBW,WAAY,KC1Bd,EAAOC,OAASA,EAED,U,kECJRlB,MAAM,Q,GAEJA,MAAM,8D,GAEJA,MAAM,Q,ggEAwFJA,MAAM,Q,4DAEJ,6tC,iHA9Fb,gCAmIM,MAnIN,EAmIM,CAjIJ,gCAgIM,MAhIN,EAgIM,CA9HJ,gCA4HM,MA5HN,EA4HM,CA1HJ,EAsFA,gCAkCM,MAlCN,EAkCM,CAjCJ,yBAgCC,GAhCgBI,KAAK,QAAM,C,6BACzB,IA8BE,C,8CCxHA,+BAAgB,CAC7BG,KAAM,cACNU,WAAY,CACVE,gBAAe,QAEjBP,MAAK,WACH,wBAAU,WACR,eAA0B,cAAe,CAAC,OAAQ,kBCTxD,EAAOM,OAASA,EAED,gB,kCCLf,8DAQaE,EAA4B,SACvCC,EACAC,GAEA,OAAMC,SAAS,OAAQC,sBAAuB,CAC5CtB,MAAOmB,EACPI,mBAAoBH","file":"js/chunk-3a9f1168.8cae8910.js","sourcesContent":["<template>\n  <div class=\"py-5\">\n    <div class=\"highlight\">\n      <button\n        class=\"highlight-copy btn\"\n        data-bs-toggle=\"tooltip\"\n        title=\"\"\n        data-bs-original-title=\"Copy code\"\n      >\n        copy\n      </button>\n      <div class=\"highlight-code\">\n        <pre\n          :class=\"`language-${lang}`\"\n          :style=\"{ height: getHeightInPixesls }\"\n        ><code :class=\"`language-${lang}`\">\n          <slot></slot>\n        </code></pre>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted } from \"vue\";\nimport { useCopyClipboard } from \"@/core/helpers/documentation\";\nimport Prism from \"prismjs\";\n\nexport default defineComponent({\n  name: \"CodeHighlighter\",\n  props: {\n    lang: String,\n    fieldHeight: Number,\n  },\n  setup(props) {\n    const height = ref(props.fieldHeight);\n\n    const { init } = useCopyClipboard();\n\n    const getHeightInPixesls = computed(() => {\n      return height.value + \"px\";\n    });\n\n    onMounted(() => {\n      Prism.highlightAll();\n      init();\n    });\n\n    return {\n      getHeightInPixesls,\n    };\n  },\n  components: {},\n});\n</script>\n","\nimport { defineComponent, computed, ref, onMounted } from \"vue\";\nimport { useCopyClipboard } from \"@/core/helpers/documentation\";\nimport Prism from \"prismjs\";\n\nexport default defineComponent({\n  name: \"CodeHighlighter\",\n  props: {\n    lang: String,\n    fieldHeight: Number,\n  },\n  setup(props) {\n    const height = ref(props.fieldHeight);\n\n    const { init } = useCopyClipboard();\n\n    const getHeightInPixesls = computed(() => {\n      return height.value + \"px\";\n    });\n\n    onMounted(() => {\n      Prism.highlightAll();\n      init();\n    });\n\n    return {\n      getHeightInPixesls,\n    };\n  },\n  components: {},\n});\n","import { render } from \"./CodeHighlighter.vue?vue&type=template&id=04d89187\"\nimport script from \"./CodeHighlighter.vue?vue&type=script&lang=ts\"\nexport * from \"./CodeHighlighter.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script","<template>\n  <div class=\"card\">\n    <!--begin::Card Body-->\n    <div class=\"card-body fs-6 py-15 px-10 py-lg-15 px-lg-15 text-gray-700\">\n      <!--begin::Section-->\n      <div class=\"py-0\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-5\" id=\"overview\">\n          <a href=\"#overview\"></a>\n          Overview\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use responsive-friendly custom flex classes to build nested layouts\n          with fixed and fluid columns. The classes are named using the format\n          <code>flex-{property}</code> for <code>xs</code> and\n          <code>flex-{breakpoint}-{property}</code> for <code>sm</code>,\n          <code>md</code>, <code>lg</code>, <code>xl</code>, and\n          <code>xxl</code>.\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Where <code>property</code> is one of:\n          <ul class=\"pt-3\">\n            <li class=\"py-2\">\n              <code>root</code> - to define the root node of the flex\n              layout(usually it's used when the layout is placed as a direct\n              child of the body element in order to fully occupy the window\n              height)\n            </li>\n            <li class=\"py-2\">\n              <code>column-auto</code> - to set a column with auto height\n            </li>\n            <li class=\"py-2\">\n              <code>column-fluid</code> - to set a column with fluid height\n            </li>\n            <li class=\"py-2\">\n              <code>row-auto</code> - to set a column with auto width\n            </li>\n            <li class=\"py-2\">\n              <code>row-fluid</code> - to set a column with fluid width\n            </li>\n            <li class=\"py-2\">\n              <code>center</code> - to set a column's content vertically and\n              horizontally centered\n            </li>\n          </ul>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          <div class=\"rounded border p-10\">\n            <div class=\"d-flex flex-row h-300px\">\n              <div class=\"d-flex flex-column flex-row-auto w-200px\">\n                <div\n                  class=\"d-flex flex-column-auto flex-center h-50px bg-primary\"\n                >\n                  <span class=\"text-white\">Fixed Height</span>\n                </div>\n\n                <div class=\"d-flex flex-column-fluid bg-success flex-center\">\n                  <span class=\"text-white\">Fluid Height</span>\n                </div>\n              </div>\n\n              <div class=\"d-flex flex-column flex-row-fluid\">\n                <div class=\"d-flex flex-column-auto h-70px bg-info flex-center\">\n                  <span class=\"text-white\">Fixed Height</span>\n                </div>\n\n                <div class=\"d-flex flex-row flex-column-fluid\">\n                  <div class=\"d-flex flex-row-fluid bg-dark flex-center\">\n                    <span class=\"text-white\">Fluid Width</span>\n                  </div>\n\n                  <div\n                    class=\"d-flex flex-row-auto w-200px bg-warning flex-center\"\n                  >\n                    <span class=\"text-white\">Fixed Width</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <CodeHighlighter lang=\"html\"\n            >{{`\n            <div class=\"d-flex flex-row h-300px\">\n              <div class=\"d-flex flex-column flex-row-auto w-200px\">\n                <div class=\"d-flex flex-column-auto h-50px bg-primary\">\n                  <span class=\"text-white\">Fixed Height</span>\n                </div>\n\n                <div class=\"d-flex flex-column-fluid bg-success flex-center\">\n                  <span class=\"text-white\">Fluid Height</span>\n                </div>\n              </div>\n\n              <div class=\"d-flex flex-column flex-row-fluid\">\n                <div class=\"d-flex flex-column-auto h-70px bg-info flex-center\">\n                  <span class=\"text-white\">Fixed Height</span>\n                </div>\n\n                <div class=\"d-flex flex-row flex-column-fluid\">\n                  <div class=\"d-flex flex-row-fluid bg-dark flex-center\">\n                    <span class=\"text-white\">Fluid Width</span>\n                  </div>\n\n                  <div\n                    class=\"d-flex flex-row-auto w-200px bg-warning flex-center\"\n                  >\n                    <span class=\"text-white\">Fixed Width</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            `}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n    </div>\n  </div>\n  <!--end::Card Body-->\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, onMounted } from \"vue\";\nimport { setCurrentPageBreadcrumbs } from \"@/core/helpers/breadcrumb\";\nimport CodeHighlighter from \"@/components/highlighters/CodeHighlighter.vue\";\n\nexport default defineComponent({\n  name: \"flex-layout\",\n  components: {\n    CodeHighlighter,\n  },\n  setup() {\n    onMounted(() => {\n      setCurrentPageBreadcrumbs(\"Flex Layout\", [\"Base\", \"Helpers\"]);\n    });\n  },\n});\n</script>\n","\nimport { defineComponent, onMounted } from \"vue\";\nimport { setCurrentPageBreadcrumbs } from \"@/core/helpers/breadcrumb\";\nimport CodeHighlighter from \"@/components/highlighters/CodeHighlighter.vue\";\n\nexport default defineComponent({\n  name: \"flex-layout\",\n  components: {\n    CodeHighlighter,\n  },\n  setup() {\n    onMounted(() => {\n      setCurrentPageBreadcrumbs(\"Flex Layout\", [\"Base\", \"Helpers\"]);\n    });\n  },\n});\n","import { render } from \"./FlexLayouts.vue?vue&type=template&id=59a0ad65\"\nimport script from \"./FlexLayouts.vue?vue&type=script&lang=ts\"\nexport * from \"./FlexLayouts.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script","import store from \"@/store\";\nimport { Actions } from \"@/store/enums/StoreEnums\";\n\n/**\n * Sets current page breadcrumbs\n * @param {string} pageTitle Current page title\n * @param {Array<string>} breadcrumbs Current page breadcrumbs\n */\nexport const setCurrentPageBreadcrumbs = (\n  pageTitle: string,\n  breadcrumbs: Array<string>\n): void => {\n  store.dispatch(Actions.SET_BREADCRUMB_ACTION, {\n    title: pageTitle,\n    pageBreadcrumbPath: breadcrumbs,\n  });\n};\n\n/**\n * Sets current page breadcrumbs\n * @param {string} title Current page title name\n */\nexport const setCurrentPageTitle = (title: string): void => {\n  store.dispatch(Actions.SET_BREADCRUMB_ACTION, {\n    title: title,\n  });\n};\n"],"sourceRoot":""}