{"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/Borders.vue","webpack:///./src/views/documentation/base/helpers/Borders.vue?f2c2","webpack:///./src/views/documentation/base/helpers/Borders.vue?d8d4","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","id","href","appName","gray","item","i","CodeHighlighter","setCurrentPageBreadcrumbs","pageTitle","breadcrumbs","dispatch","SET_BREADCRUMB_ACTION","pageBreadcrumbPath"],"mappings":"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","file":"js/chunk-29105854.6e96058a.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  <!--begin::Card-->\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=\"pb-10\">\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          <b>{{ appName }}</b> extends\n          <a\n            href=\"https://getbootstrap.com/docs/5.0/utilities/borders/\"\n            class=\"fw-bold\"\n            >Bootstrap Borders</a\n          >\n          in\n          <code>src/assets/sass/core/components/helpers/_borders.scss</code> to\n          provide additional border utility classes to cover its own design\n          system.\n        </div>\n        <!--end::Block-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"py-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"border-styles\">\n          <a href=\"#border-styles\"></a>\n          Border Styles\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use <code>.border-dashed</code>or <code>.border-dotted</code>classes\n          to set an element's border style. For border directions use\n          <code>.border-{direction}-dashed</code>or\n          <code>.border-{direction}-dotted</code>classes format.\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Where <code>direction</code>is one of:\n          <ul class=\"pt-3\">\n            <li class=\"py-2\">\n              <code>top</code>- for classes that set border top style\n            </li>\n            <li class=\"py-2\">\n              <code>bottom</code>- for classes that set border bottom style\n            </li>\n            <li class=\"py-2\">\n              <code>end</code>- for classes that set border right style\n            </li>\n            <li class=\"py-2\">\n              <code>start</code>- for classes that set border start style\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-wrap align-items-center\">\n              <div\n                class=\"\n                  border\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                default style\n              </div>\n              <div\n                class=\"\n                  border-gray-300 border-dotted\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .border-dotted\n              </div>\n              <div\n                class=\"\n                  border-gray-300 border-dashed\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .border-dashed\n              </div>\n              <div\n                class=\"\n                  border-gray-300 border-bottom-dashed\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .border-bottom-dashed\n              </div>\n              <div\n                class=\"\n                  border-gray-300 border-end-dashed\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                .border-end-dashed\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <!--prettier-ignore-->\n          <CodeHighlighter lang=\"html\"\n            >{{`<div class=\"border\">\n            default style\n          </div>\n            <div class=\"border-gray-300 border-dotted\">\n              .border-dotted\n            </div>\n            <div class=\"border-gray-300 border-dashed\">\n              .border-dashed\n            </div>\n            <div class=\"border-gray-300 border-bottom-dashed\">\n              .border-bottom-dashed\n            </div>\n            <div class=\"border-gray-300 border-end-dashed\">\n              .border-end-dashed\n            </div>`}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"py-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"hover-state\">\n          <a href=\"#hover-state\"></a>\n          Hover State\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use <code>.border-hover</code>to display an element's border on hover.\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-wrap align-items-center\">\n              <div\n                class=\"\n                  border border-hover\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                default\n              </div>\n              <div\n                class=\"\n                  border border-gray-500 border-hover\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                gray-500\n              </div>\n              <div\n                class=\"\n                  border border-primary border-hover\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                primary\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <!--prettier-ignore-->\n          <CodeHighlighter lang=\"html\"\n            >{{`<div class=\"border border-hover\">\n  default\n</div>\n<div class=\"border border-gray-500 border-hover\">\n  gray-500\n</div>\n<div class=\"border border-primary border-hover\">\n  primary\n</div>`}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"py-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"actve-state\">\n          <a href=\"#actve-state\"></a>\n          Active State\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use <code>.border-active</code>to display an element's border when\n          <code>.active</code>class applied.\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-wrap align-items-center\">\n              <div\n                class=\"\n                  border border-active\n                  active\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                default\n              </div>\n              <div\n                class=\"\n                  border border-gray-500 border-active\n                  active\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                gray-500\n              </div>\n              <div\n                class=\"\n                  border border-primary border-active\n                  active\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  mb-5\n                  fw-bold\n                \"\n              >\n                primary\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <!--prettier-ignore-->\n          <CodeHighlighter lang=\"html\"\n          >{{`<div class=\"border border-active active\">\n  default\n</div>\n<div class=\"border border-gray-500 border-active active\">\n  gray-500\n</div>\n<div class=\"border border-primary border-active active\">\n  primary\n</div>`}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"py-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"transparent-state\">\n          <a href=\"#transparent-state\"></a>\n          Transparent Border\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use <code>.border-transparent</code>to set an element's border color\n          to tranparent.\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-wrap align-items-center\">\n              <div\n                class=\"\n                  border border-transparent\n                  bg-light\n                  w-125px\n                  h-125px\n                  d-flex\n                  flex-center\n                  me-5\n                  fw-bold\n                \"\n              >\n                tranparent <br />border\n              </div>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"py-5\">\n          <!--prettier-ignore-->\n          <CodeHighlighter lang=\"html\"\n          >{{`<div class=\"border border-transparent\">\n  default\n</div>`}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n\n      <!--begin::Section-->\n      <div class=\"pt-10\">\n        <!--begin::Heading-->\n        <h1 class=\"anchor fw-bolder mb-3\" id=\"border-gray-colors\">\n          <a href=\"#border-gray-colors\"></a>\n          Border Gray Colors\n        </h1>\n        <!--end::Heading-->\n\n        <!--begin::Block-->\n        <div class=\"py-5\">\n          Use\n          <code\n            >.border-gray-{100, 200, 300, 400, 500, 600, 700, 800, 900}</code\n          >\n          to set an element's border color.\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-wrap align-items-center\">\n              <template v-for=\"(item, i) in gray\" :key=\"i\">\n                <div\n                  :class=\"`border-${item}`\"\n                  class=\"\n                    w-100px\n                    h-100px\n                    d-flex\n                    flex-center\n                    p-3\n                    me-5\n                    mb-5\n                    fw-bold\n                    border\n                  \"\n                >\n                  .border-{{ item }}\n                </div>\n              </template>\n            </div>\n          </div>\n        </div>\n        <!--end::Block-->\n\n        <!--begin::Code-->\n        <div class=\"pt-5\">\n          <CodeHighlighter lang=\"html\"\n            >{{`\n            <div class=\"border border-gray-100\"></div>\n            <div class=\"border border-gray-200\"></div>\n            <div class=\"border border-gray-300\"></div>\n            <div class=\"border border-gray-400\"></div>\n            <div class=\"border border-gray-500\"></div>\n            <div class=\"border border-gray-600\"></div>\n            <div class=\"border border-gray-700\"></div>\n            <div class=\"border border-gray-800\"></div>\n            <div class=\"border border-gray-900\"></div>\n            `}}</CodeHighlighter\n          >\n        </div>\n        <!--end::Code-->\n      </div>\n      <!--end::Section-->\n    </div>\n    <!--end::Card Body-->\n  </div>\n  <!--end::Card-->\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\";\nimport { appName } from \"@/core/helpers/documentation\";\n\nexport default defineComponent({\n  name: \"borders\",\n  components: {\n    CodeHighlighter,\n  },\n  setup() {\n    onMounted(() => {\n      setCurrentPageBreadcrumbs(\"Borders\", [\"Base\", \"Helpers\"]);\n    });\n\n    return {\n      appName,\n    };\n  },\n});\n</script>\n","\nimport { defineComponent, onMounted } from \"vue\";\nimport { setCurrentPageBreadcrumbs } from \"@/core/helpers/breadcrumb\";\nimport CodeHighlighter from \"@/components/highlighters/CodeHighlighter.vue\";\nimport { appName } from \"@/core/helpers/documentation\";\n\nexport default defineComponent({\n  name: \"borders\",\n  components: {\n    CodeHighlighter,\n  },\n  setup() {\n    onMounted(() => {\n      setCurrentPageBreadcrumbs(\"Borders\", [\"Base\", \"Helpers\"]);\n    });\n\n    return {\n      appName,\n    };\n  },\n});\n","import { render } from \"./Borders.vue?vue&type=template&id=33658a44\"\nimport script from \"./Borders.vue?vue&type=script&lang=ts\"\nexport * from \"./Borders.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":""}