{"version":3,"sources":["webpack:///./src/view/pages/vue-bootstrap/Spinner.vue","webpack:///src/view/pages/vue-bootstrap/Spinner.vue","webpack:///./src/view/pages/vue-bootstrap/Spinner.vue?d9de","webpack:///./src/view/pages/vue-bootstrap/Spinner.vue?fa88","webpack:///./src/view/content/CodePreview.vue","webpack:///./src/view/content/Card.vue","webpack:///src/view/content/Card.vue","webpack:///./src/view/content/Card.vue?8715","webpack:///./src/view/content/Card.vue?eb51","webpack:///src/view/content/CodePreview.vue","webpack:///./src/view/content/CodePreview.vue?e189","webpack:///./src/view/content/CodePreview.vue?e254"],"names":["render","_vm","this","_c","_self","staticClass","attrs","_v","scopedSlots","_u","key","fn","proxy","_s","code1","html","code3","code4","code5","_l","code2","variants","variant","js","staticRenderFns","data","components","KTCodePreview","mounted","$store","dispatch","SET_BREADCRUMB","title","route","component","ref","hasTitleSlot","_t","hasGeneralCode","hasSingleCodeType","_e","hasHtmlCode","on","setActiveTab","hasJsCode","hasScssCode","model","value","tabIndex","callback","$$v","expression","class","classes","headClass","bodyClass","bodyFit","bodyFluid","hasFootSlot","name","props","String","headSize","fluidHeight","Boolean","fluidHalfHeight","headOverlay","cardClass","example","methods","computed","cls","headSizeClass","$slots","concat","isOpen","KTCard","_this","$nextTick","KTLayoutExamples","init","$el","hljs","querySelectorAll","forEach","hl","classList","add","remove","event","tab","target","closest","links","i","length","parseInt","getAttribute","_this2","exist","type","hasOwnProperty"],"mappings":"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","file":"js/chunk-376bfecc.7294169c.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('b-alert',{staticClass:\"alert alert-custom alert-white alert-shadow fade show gutter-b\",attrs:{\"show\":\"\",\"variant\":\"light\"}},[_c('div',{staticClass:\"alert-icon\"},[_c('span',{staticClass:\"svg-icon svg-icon-lg\"},[_c('inline-svg',{attrs:{\"src\":\"media/svg/icons/Tools/Compass.svg\"}})],1)]),_c('div',{staticClass:\"alert-text\"},[_c('b',[_vm._v(\"Spinners\")]),_vm._v(\" The <b-spinner> component can be used to show the loading state in your projects. They're rendered only with basic HTML and CSS as a lightweight Vue functional component. Their appearance, alignment, and sizing can be easily customized with a few built-in props and/or Bootstrap v4 utility classes. \"),_c('a',{staticClass:\"font-weight-bold\",attrs:{\"href\":\"https://bootstrap-vue.js.org/docs/components/spinner\",\"target\":\"_blank\"}},[_vm._v(\" See documentation. \")])])]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-6\"},[_c('KTCodePreview',{attrs:{\"title\":'Spinners'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Spinners can be placed just about anywhere, including inside buttons, alerts, and even \"),_c('code',[_vm._v(\"<b-table>\")]),_vm._v(\"'s busy slot.\"),_c('br'),_c('br')]),_c('div',{staticClass:\"text-center\"},[_c('b-spinner',{staticClass:\"mr-3\",attrs:{\"label\":\"Spinning\"}}),_c('b-spinner',{staticClass:\"mr-3\",attrs:{\"type\":\"grow\",\"label\":\"Spinning\"}}),_c('b-spinner',{staticClass:\"mr-3\",attrs:{\"variant\":\"primary\",\"label\":\"Spinning\"}}),_c('b-spinner',{staticClass:\"mr-3\",attrs:{\"variant\":\"primary\",\"type\":\"grow\",\"label\":\"Spinning\"}}),_c('b-spinner',{staticClass:\"mr-3\",attrs:{\"variant\":\"success\",\"label\":\"Spinning\"}}),_c('b-spinner',{staticClass:\"mr-3\",attrs:{\"variant\":\"success\",\"type\":\"grow\",\"label\":\"Spinning\"}})],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code1.html)+\" \")]},proxy:true}])}),_c('KTCodePreview',{attrs:{\"title\":'Flex'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\"Using flex utility classes\")]),_c('div',[_c('div',{staticClass:\"d-flex justify-content-center mb-3\"},[_c('b-spinner',{attrs:{\"label\":\"Loading...\"}})],1),_c('div',{staticClass:\"d-flex align-items-center\"},[_c('strong',[_vm._v(\"Loading...\")]),_c('b-spinner',{staticClass:\"ml-auto\"})],1)])]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code3.html)+\" \")]},proxy:true}])})],1),_c('div',{staticClass:\"col-md-6\"},[_c('KTCodePreview',{attrs:{\"title\":'Text align'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\"Using text alignment utility classes\")]),_c('div',{staticClass:\"text-center\"},[_c('b-spinner',{attrs:{\"variant\":\"primary\",\"label\":\"Text Centered\"}})],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code4.html)+\" \")]},proxy:true}])}),_c('KTCodePreview',{attrs:{\"title\":'Spinners in buttons'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the label text out of the spinner element and utilize button text as needed. \")]),_c('div',[_c('b-button',{staticClass:\"mr-3\",attrs:{\"variant\":\"primary\",\"disabled\":\"\"}},[_c('b-spinner',{attrs:{\"small\":\"\"}}),_c('span',{staticClass:\"sr-only\"},[_vm._v(\"Loading...\")])],1),_c('b-button',{attrs:{\"variant\":\"primary\",\"disabled\":\"\"}},[_c('b-spinner',{attrs:{\"small\":\"\",\"type\":\"grow\"}}),_vm._v(\" Loading... \")],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code5.html)+\" \")]},proxy:true}])})],1),_c('div',{staticClass:\"col-md-12\"},[_c('KTCodePreview',{attrs:{\"title\":'Spinner color variants'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Spinners use \"),_c('code',[_vm._v(\"currentColor\")]),_vm._v(\" for their color, meaning it inherits the current font color. You can customize the color using the standard text color variants using the \"),_c('code',[_vm._v(\"variant\")]),_vm._v(\" prop, or place classes or styles on the component to change its color. \")]),_c('div',[_c('div',{staticClass:\"text-center mb-3 d-flex justify-content-between\"},_vm._l((_vm.code2.variants),function(variant){return _c('b-spinner',{key:variant,attrs:{\"variant\":variant}})}),1),_c('div',{staticClass:\"text-center d-flex justify-content-between\"},_vm._l((_vm.code2.variants),function(variant){return _c('b-spinner',{key:variant,attrs:{\"variant\":variant,\"type\":\"grow\"}})}),1)])]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code2.html)+\" \")]},proxy:true},{key:\"js\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code2.js)+\" \")]},proxy:true}])})],1)])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <b-alert\r\n      show\r\n      variant=\"light\"\r\n      class=\"alert alert-custom alert-white alert-shadow fade show gutter-b\"\r\n    >\r\n      <div class=\"alert-icon\">\r\n        <span class=\"svg-icon svg-icon-lg\">\r\n          <inline-svg src=\"media/svg/icons/Tools/Compass.svg\" />\r\n        </span>\r\n      </div>\r\n      <div class=\"alert-text\">\r\n        <b>Spinners</b> The &lt;b-spinner&gt; component can be used to show the\r\n        loading state in your projects. They're rendered only with basic HTML\r\n        and CSS as a lightweight Vue functional component. Their appearance,\r\n        alignment, and sizing can be easily customized with a few built-in props\r\n        and/or Bootstrap v4 utility classes.\r\n        <a\r\n          class=\"font-weight-bold\"\r\n          href=\"https://bootstrap-vue.js.org/docs/components/spinner\"\r\n          target=\"_blank\"\r\n        >\r\n          See documentation.\r\n        </a>\r\n      </div>\r\n    </b-alert>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <KTCodePreview v-bind:title=\"'Spinners'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Spinners can be placed just about anywhere, including inside\r\n              buttons, alerts, and even <code>&lt;b-table&gt;</code>'s busy\r\n              slot.<br /><br />\r\n            </p>\r\n            <div class=\"text-center\">\r\n              <b-spinner class=\"mr-3\" label=\"Spinning\"></b-spinner>\r\n              <b-spinner class=\"mr-3\" type=\"grow\" label=\"Spinning\"></b-spinner>\r\n              <b-spinner\r\n                class=\"mr-3\"\r\n                variant=\"primary\"\r\n                label=\"Spinning\"\r\n              ></b-spinner>\r\n              <b-spinner\r\n                class=\"mr-3\"\r\n                variant=\"primary\"\r\n                type=\"grow\"\r\n                label=\"Spinning\"\r\n              ></b-spinner>\r\n              <b-spinner\r\n                class=\"mr-3\"\r\n                variant=\"success\"\r\n                label=\"Spinning\"\r\n              ></b-spinner>\r\n              <b-spinner\r\n                class=\"mr-3\"\r\n                variant=\"success\"\r\n                type=\"grow\"\r\n                label=\"Spinning\"\r\n              ></b-spinner>\r\n            </div>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code1.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n\r\n        <KTCodePreview v-bind:title=\"'Flex'\">\r\n          <template v-slot:preview>\r\n            <p>Using flex utility classes</p>\r\n            <div>\r\n              <div class=\"d-flex justify-content-center mb-3\">\r\n                <b-spinner label=\"Loading...\"></b-spinner>\r\n              </div>\r\n\r\n              <div class=\"d-flex align-items-center\">\r\n                <strong>Loading...</strong>\r\n                <b-spinner class=\"ml-auto\"></b-spinner>\r\n              </div>\r\n            </div>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code3.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n      </div>\r\n\r\n      <div class=\"col-md-6\">\r\n        <KTCodePreview v-bind:title=\"'Text align'\">\r\n          <template v-slot:preview>\r\n            <p>Using text alignment utility classes</p>\r\n            <div class=\"text-center\">\r\n              <b-spinner variant=\"primary\" label=\"Text Centered\"></b-spinner>\r\n            </div>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code4.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n\r\n        <KTCodePreview v-bind:title=\"'Spinners in buttons'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Use spinners within buttons to indicate an action is currently\r\n              processing or taking place. You may also swap the label text out\r\n              of the spinner element and utilize button text as needed.\r\n            </p>\r\n            <div>\r\n              <b-button class=\"mr-3\" variant=\"primary\" disabled>\r\n                <b-spinner small></b-spinner>\r\n                <span class=\"sr-only\">Loading...</span>\r\n              </b-button>\r\n              <b-button variant=\"primary\" disabled>\r\n                <b-spinner small type=\"grow\"></b-spinner>\r\n                Loading...\r\n              </b-button>\r\n            </div>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code5.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n      </div>\r\n\r\n      <div class=\"col-md-12\">\r\n        <KTCodePreview v-bind:title=\"'Spinner color variants'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Spinners use <code>currentColor</code> for their color, meaning it\r\n              inherits the current font color. You can customize the color using\r\n              the standard text color variants using the\r\n              <code>variant</code> prop, or place classes or styles on the\r\n              component to change its color.\r\n            </p>\r\n            <div>\r\n              <div class=\"text-center mb-3 d-flex justify-content-between\">\r\n                <b-spinner\r\n                  v-for=\"variant in code2.variants\"\r\n                  :variant=\"variant\"\r\n                  :key=\"variant\"\r\n                ></b-spinner>\r\n              </div>\r\n\r\n              <div class=\"text-center d-flex justify-content-between\">\r\n                <b-spinner\r\n                  v-for=\"variant in code2.variants\"\r\n                  :variant=\"variant\"\r\n                  :key=\"variant\"\r\n                  type=\"grow\"\r\n                ></b-spinner>\r\n              </div>\r\n            </div>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code2.html }}\r\n          </template>\r\n          <template v-slot:js>\r\n            {{ code2.js }}\r\n          </template>\r\n        </KTCodePreview>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport KTCodePreview from \"@/view/content/CodePreview.vue\";\r\nimport { SET_BREADCRUMB } from \"@/core/services/store/breadcrumbs.module\";\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      code1: {\r\n        html: `<div class=\"text-center\">\r\n  <b-spinner label=\"Spinning\"></b-spinner>\r\n  <b-spinner type=\"grow\" label=\"Spinning\"></b-spinner>\r\n  <b-spinner variant=\"primary\" label=\"Spinning\"></b-spinner>\r\n  <b-spinner variant=\"primary\" type=\"grow\" label=\"Spinning\"></b-spinner>\r\n  <b-spinner variant=\"success\" label=\"Spinning\"></b-spinner>\r\n  <b-spinner variant=\"success\" type=\"grow\" label=\"Spinning\"></b-spinner>\r\n</div>`\r\n      },\r\n\r\n      code2: {\r\n        html: `<div>\r\n    <div class=\"text-center mb-3 d-flex justify-content-between\">\r\n      <b-spinner\r\n        v-for=\"variant in variants\"\r\n        :variant=\"variant\"\r\n        :key=\"variant\"\r\n      ></b-spinner>\r\n    </div>\r\n\r\n    <div class=\"text-center d-flex justify-content-between\">\r\n      <b-spinner\r\n        v-for=\"variant in variants\"\r\n        :variant=\"variant\"\r\n        :key=\"variant\"\r\n        type=\"grow\"\r\n      ></b-spinner>\r\n    </div>\r\n  </div>`,\r\n        js: `export default {\r\n    data() {\r\n      return {\r\n        variants: ['primary', 'secondary', 'danger', 'warning', 'success', 'info', 'light', 'dark']\r\n      }\r\n    }\r\n  }`,\r\n        variants: [\r\n          \"primary\",\r\n          \"secondary\",\r\n          \"danger\",\r\n          \"warning\",\r\n          \"success\",\r\n          \"info\",\r\n          \"light\",\r\n          \"dark\"\r\n        ]\r\n      },\r\n\r\n      code3: {\r\n        html: `<div>\r\n  <div class=\"d-flex justify-content-center mb-3\">\r\n    <b-spinner label=\"Loading...\"></b-spinner>\r\n  </div>\r\n\r\n  <div class=\"d-flex align-items-center\">\r\n    <strong>Loading...</strong>\r\n    <b-spinner class=\"ml-auto\"></b-spinner>\r\n  </div>\r\n</div>`\r\n      },\r\n\r\n      code4: {\r\n        html: `<div class=\"text-center\">\r\n  <b-spinner variant=\"primary\" label=\"Text Centered\"></b-spinner>\r\n</div>`\r\n      },\r\n\r\n      code5: {\r\n        html: `<div>\r\n  <b-button variant=\"primary\" disabled>\r\n    <b-spinner small></b-spinner>\r\n    <span class=\"sr-only\">Loading...</span>\r\n  </b-button>\r\n\r\n  <b-button variant=\"primary\" disabled>\r\n    <b-spinner small type=\"grow\"></b-spinner>\r\n    Loading...\r\n  </b-button>\r\n</div>`\r\n      }\r\n    };\r\n  },\r\n  components: {\r\n    KTCodePreview\r\n  },\r\n  mounted() {\r\n    this.$store.dispatch(SET_BREADCRUMB, [\r\n      { title: \"Vue Bootstrap\", route: \"alert\" },\r\n      { title: \"Progress\", route: \"progress\" },\r\n      { title: \"Spinner\" }\r\n    ]);\r\n  }\r\n};\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Spinner.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Spinner.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Spinner.vue?vue&type=template&id=a0318088\"\nimport script from \"./Spinner.vue?vue&type=script&lang=js\"\nexport * from \"./Spinner.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('KTCard',{ref:\"preview\",attrs:{\"title\":_vm.title,\"example\":true},scopedSlots:_vm._u([(_vm.hasTitleSlot)?{key:\"title\",fn:function(){return [_c('h3',{staticClass:\"card-title\"},[_vm._t(\"title\")],2)]},proxy:true}:null,{key:\"body\",fn:function(){return [_c('div',{staticClass:\"example-code mb-5\"},[(!_vm.hasGeneralCode && !_vm.hasSingleCodeType)?_c('ul',{staticClass:\"example-nav nav nav-tabs nav-bold nav-tabs-line nav-tabs-line-2x\",attrs:{\"role\":\"tablist\"}},[(_vm.hasHtmlCode)?_c('li',{staticClass:\"nav-item\"},[_c('a',{staticClass:\"nav-link active\",attrs:{\"data-tab\":\"0\",\"data-toggle\":\"tab\",\"href\":\"#\",\"role\":\"tab\",\"aria-selected\":\"true\"},on:{\"click\":_vm.setActiveTab}},[_vm._v(\" HTML \")])]):_vm._e(),(_vm.hasJsCode)?_c('li',{staticClass:\"nav-item\"},[_c('a',{staticClass:\"nav-link\",attrs:{\"data-tab\":\"1\",\"data-toggle\":\"tab\",\"href\":\"#\",\"role\":\"tab\",\"aria-selected\":\"false\"},on:{\"click\":_vm.setActiveTab}},[_vm._v(\"  JS  \")])]):_vm._e(),(_vm.hasScssCode)?_c('li',{staticClass:\"nav-item\"},[_c('a',{staticClass:\"nav-link\",attrs:{\"data-tab\":\"2\",\"data-toggle\":\"tab\",\"href\":\"#\",\"role\":\"tab\",\"aria-selected\":\"false\"},on:{\"click\":_vm.setActiveTab}},[_vm._v(\" SCSS \")])]):_vm._e()]):_vm._e(),(_vm.hasGeneralCode)?_c('div',[_vm._t(\"code\")],2):_vm._e(),(!_vm.hasGeneralCode && !_vm.hasSingleCodeType)?_c('div',[_c('b-tabs',{staticClass:\"hide-tabs\",attrs:{\"content-class\":\"mt-3\"},model:{value:(_vm.tabIndex),callback:function ($$v) {_vm.tabIndex=$$v},expression:\"tabIndex\"}},[_c('b-tab',{staticClass:\"example-highlight\",attrs:{\"active\":\"\"}},[_c('highlight-code',{staticClass:\"language-html\",attrs:{\"lang\":\"html\"}},[_vm._t(\"html\")],2)],1),_c('b-tab',{staticClass:\"example-highlight\"},[_c('highlight-code',{staticClass:\"language-js\",attrs:{\"lang\":\"js\"}},[_vm._t(\"js\")],2)],1),_c('b-tab',{staticClass:\"example-highlight\"},[_c('highlight-code',{staticClass:\"language-scss\",attrs:{\"lang\":\"scss\"}},[_vm._t(\"scss\")],2)],1)],1)],1):_vm._e(),(_vm.hasSingleCodeType)?_c('div',{staticClass:\"example-highlight\"},[(_vm.hasHtmlCode)?_c('highlight-code',{staticClass:\"language-html\",attrs:{\"lang\":\"html\"}},[_vm._t(\"html\")],2):_vm._e(),(_vm.hasJsCode)?_c('highlight-code',{staticClass:\"language-js\",attrs:{\"lang\":\"js\"}},[_vm._t(\"js\")],2):_vm._e(),(_vm.hasScssCode)?_c('highlight-code',{staticClass:\"language-scss\",attrs:{\"lang\":\"scss\"}},[_vm._t(\"scss\")],2):_vm._e()],1):_vm._e()]),_vm._t(\"preview\")]},proxy:true}],null,true)})\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"card card-custom gutter-b\",class:_vm.classes},[(_vm.hasTitleSlot || _vm.title)?_c('div',{staticClass:\"card-header\",class:_vm.headClass},[_c('div',{staticClass:\"card-title\"},[(_vm.hasTitleSlot)?_vm._t(\"title\"):_vm._e(),(!_vm.hasTitleSlot)?_c('h3',{staticClass:\"card-label\"},[_vm._v(\" \"+_vm._s(_vm.title)+\" \")]):_vm._e()],2),_c('div',{staticClass:\"card-toolbar\"},[_vm._t(\"toolbar\")],2)]):_vm._e(),_c('div',{staticClass:\"card-body\",class:{\n      bodyClass: _vm.bodyClass,\n      'body-fit': _vm.bodyFit,\n      'body-fluid': _vm.bodyFluid\n    }},[_vm._t(\"body\")],2),(_vm.hasFootSlot)?_c('div',{staticClass:\"card-footer\"},[_vm._t(\"foot\")],2):_vm._e()])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"card card-custom gutter-b\" v-bind:class=\"classes\">\r\n    <div\r\n      class=\"card-header\"\r\n      v-bind:class=\"headClass\"\r\n      v-if=\"hasTitleSlot || title\"\r\n    >\r\n      <div class=\"card-title\">\r\n        <slot name=\"title\" v-if=\"hasTitleSlot\"></slot>\r\n        <h3 class=\"card-label\" v-if=\"!hasTitleSlot\">\r\n          {{ title }}\r\n        </h3>\r\n      </div>\r\n      <div class=\"card-toolbar\">\r\n        <slot name=\"toolbar\"></slot>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"card-body\"\r\n      v-bind:class=\"{\r\n        bodyClass,\r\n        'body-fit': bodyFit,\r\n        'body-fluid': bodyFluid\r\n      }\"\r\n    >\r\n      <slot name=\"body\"></slot>\r\n    </div>\r\n    <div class=\"card-footer\" v-if=\"hasFootSlot\">\r\n      <slot name=\"foot\"></slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: \"KTCard\",\r\n  props: {\r\n    /**\r\n     * String title\r\n     */\r\n    title: String,\r\n    /**\r\n     * Set card head size. Eg. md, lg, sm, etc.\r\n     */\r\n    headSize: String,\r\n    /**\r\n     * Set card to fluid\r\n     */\r\n    fluidHeight: Boolean,\r\n    /**\r\n     * Set card to fluid in half\r\n     */\r\n    fluidHalfHeight: Boolean,\r\n    /**\r\n     * Set overlay head\r\n     */\r\n    headOverlay: Boolean,\r\n    /**\r\n     * Set extra class for main card\r\n     */\r\n    cardClass: String,\r\n    /**\r\n     * Set extra class for card head\r\n     */\r\n    headClass: String,\r\n    /**\r\n     * Set extra class for card body\r\n     */\r\n    bodyClass: String,\r\n    /**\r\n     * Set card body to fit\r\n     */\r\n    bodyFit: Boolean,\r\n    /**\r\n     * Set card body to fluid\r\n     */\r\n    bodyFluid: Boolean,\r\n    /**\r\n     * Code examples\r\n     */\r\n    example: Boolean\r\n  },\r\n  components: {},\r\n  methods: {},\r\n  computed: {\r\n    classes() {\r\n      const cls = {\r\n        \"example example-compact\": this.example,\r\n        \"height-fluid\": this.fluidHeight,\r\n        \"height-fluid-half\": this.fluidHalfHeight,\r\n        \"head-overlay\": this.headOverlay\r\n      };\r\n\r\n      cls[this.headSizeClass] = this.headSizeClass;\r\n\r\n      // append extra classes\r\n      if (this.cardClass) {\r\n        cls[this.cardClass] = true;\r\n      }\r\n\r\n      return cls;\r\n    },\r\n    hasTitleSlot() {\r\n      return !!this.$slots[\"title\"];\r\n    },\r\n    hasFootSlot() {\r\n      return !!this.$slots[\"foot\"];\r\n    },\r\n    headSizeClass() {\r\n      if (this.headSize) {\r\n        return `head-${this.headSize}`;\r\n      }\r\n      return false;\r\n    }\r\n  }\r\n};\r\n</script>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Card.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Card.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Card.vue?vue&type=template&id=1c9f0e48\"\nimport script from \"./Card.vue?vue&type=script&lang=js\"\nexport * from \"./Card.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <KTCard ref=\"preview\" v-bind:title=\"title\" v-bind:example=\"true\">\r\n    <template v-slot:title v-if=\"hasTitleSlot\">\r\n      <h3 class=\"card-title\">\r\n        <slot name=\"title\"></slot>\r\n      </h3>\r\n    </template>\r\n    <!-- <template v-slot:toolbar>\r\n      <div class=\"example-tools justify-content-center\">\r\n        <span\r\n          class=\"example-toggle\"\r\n          data-toggle=\"tooltip\"\r\n          v-b-tooltip.hover.top=\"'View code'\"\r\n        />\r\n        <span\r\n          class=\"example-copy\"\r\n          data-toggle=\"tooltip\"\r\n          v-b-tooltip.hover.top=\"'Copy code'\"\r\n        />\r\n      </div>\r\n    </template> -->\r\n    <template v-slot:body>\r\n      <!--begin::Code example-->\r\n      <div class=\"example-code mb-5\">\r\n        <ul\r\n          class=\"example-nav nav nav-tabs nav-bold nav-tabs-line nav-tabs-line-2x\"\r\n          role=\"tablist\"\r\n          v-if=\"!hasGeneralCode && !hasSingleCodeType\"\r\n        >\r\n          <li class=\"nav-item\" v-if=\"hasHtmlCode\">\r\n            <a\r\n              class=\"nav-link active\"\r\n              v-on:click=\"setActiveTab\"\r\n              data-tab=\"0\"\r\n              data-toggle=\"tab\"\r\n              href=\"#\"\r\n              role=\"tab\"\r\n              aria-selected=\"true\"\r\n            >\r\n              HTML\r\n            </a>\r\n          </li>\r\n          <li class=\"nav-item\" v-if=\"hasJsCode\">\r\n            <a\r\n              class=\"nav-link\"\r\n              v-on:click=\"setActiveTab\"\r\n              data-tab=\"1\"\r\n              data-toggle=\"tab\"\r\n              href=\"#\"\r\n              role=\"tab\"\r\n              aria-selected=\"false\"\r\n            >\r\n              &nbsp;JS&nbsp;\r\n            </a>\r\n          </li>\r\n          <li class=\"nav-item\" v-if=\"hasScssCode\">\r\n            <a\r\n              class=\"nav-link\"\r\n              v-on:click=\"setActiveTab\"\r\n              data-tab=\"2\"\r\n              data-toggle=\"tab\"\r\n              href=\"#\"\r\n              role=\"tab\"\r\n              aria-selected=\"false\"\r\n            >\r\n              SCSS\r\n            </a>\r\n          </li>\r\n        </ul>\r\n        <div v-if=\"hasGeneralCode\">\r\n          <slot name=\"code\"></slot>\r\n        </div>\r\n\r\n        <div v-if=\"!hasGeneralCode && !hasSingleCodeType\">\r\n          <b-tabs class=\"hide-tabs\" content-class=\"mt-3\" v-model=\"tabIndex\">\r\n            <b-tab active class=\"example-highlight\">\r\n              <highlight-code lang=\"html\" class=\"language-html\">\r\n                <slot name=\"html\"></slot>\r\n              </highlight-code>\r\n            </b-tab>\r\n            <b-tab class=\"example-highlight\">\r\n              <highlight-code lang=\"js\" class=\"language-js\">\r\n                <slot name=\"js\"></slot>\r\n              </highlight-code>\r\n            </b-tab>\r\n            <b-tab class=\"example-highlight\">\r\n              <highlight-code lang=\"scss\" class=\"language-scss\">\r\n                <slot name=\"scss\"></slot>\r\n              </highlight-code>\r\n            </b-tab>\r\n          </b-tabs>\r\n        </div>\r\n\r\n        <div v-if=\"hasSingleCodeType\" class=\"example-highlight\">\r\n          <highlight-code lang=\"html\" class=\"language-html\" v-if=\"hasHtmlCode\">\r\n            <slot name=\"html\"></slot>\r\n          </highlight-code>\r\n          <highlight-code lang=\"js\" class=\"language-js\" v-if=\"hasJsCode\">\r\n            <slot name=\"js\"></slot>\r\n          </highlight-code>\r\n          <highlight-code lang=\"scss\" class=\"language-scss\" v-if=\"hasScssCode\">\r\n            <slot name=\"scss\"></slot>\r\n          </highlight-code>\r\n        </div>\r\n      </div>\r\n      <!--end::Code example-->\r\n\r\n      <slot name=\"preview\"></slot>\r\n    </template>\r\n  </KTCard>\r\n</template>\r\n\r\n<script>\r\nimport KTCard from \"@/view/content/Card.vue\";\r\nimport KTLayoutExamples from \"@/assets/js/layout/extended/examples.js\";\r\n\r\nexport default {\r\n  name: \"KTCodePreview\",\r\n  props: {\r\n    title: String\r\n  },\r\n  data() {\r\n    return {\r\n      tabIndex: 0,\r\n      isOpen: false\r\n    };\r\n  },\r\n  components: {\r\n    KTCard\r\n  },\r\n  mounted() {\r\n    // init example codes\r\n    this.$nextTick(() => {\r\n      KTLayoutExamples.init([this.$el]);\r\n      const hljs = this.$el.querySelectorAll(\".hljs\");\r\n      hljs.forEach(hl => {\r\n        hl.classList.add(`language-${hl.classList[1]}`);\r\n        hl.classList.remove(\"hljs\");\r\n      });\r\n    });\r\n  },\r\n  methods: {\r\n    /**\r\n     * Set current active on click\r\n     * @param event\r\n     */\r\n    setActiveTab(event) {\r\n      // get all tab links\r\n      const tab = event.target.closest('[role=\"tablist\"]');\r\n      const links = tab.querySelectorAll('[data-toggle=\"tab\"]');\r\n      // remove active tab links\r\n      for (let i = 0; i < links.length; i++) {\r\n        links[i].classList.remove(\"active\");\r\n      }\r\n\r\n      // set current active tab\r\n      event.target.classList.add(\"active\");\r\n\r\n      // set clicked tab index to bootstrap tab\r\n      this.tabIndex = parseInt(event.target.getAttribute(\"data-tab\"));\r\n    }\r\n  },\r\n  computed: {\r\n    /**\r\n     * Check if has title\r\n     * @returns {boolean}\r\n     */\r\n    hasTitleSlot() {\r\n      return !!this.$slots[\"title\"];\r\n    },\r\n\r\n    /**\r\n     * Check if code only has one, exclude the tabs\r\n     * @returns {boolean}\r\n     */\r\n    hasSingleCodeType() {\r\n      let exist = 0;\r\n      [\"html\", \"js\", \"scss\"].forEach(type => {\r\n        if (this.$slots.hasOwnProperty(type)) {\r\n          exist++;\r\n        }\r\n      });\r\n      return exist === 1;\r\n    },\r\n\r\n    /**\r\n     * Custom generate codes\r\n     * @returns {boolean}\r\n     */\r\n    hasGeneralCode() {\r\n      return !!this.$slots[\"code\"];\r\n    },\r\n\r\n    /**\r\n     * Check if has JS code slot\r\n     * @returns {boolean}\r\n     */\r\n    hasJsCode() {\r\n      return !!this.$slots[\"js\"];\r\n    },\r\n\r\n    /**\r\n     * Check if has SCSS code slot\r\n     * @returns {boolean}\r\n     */\r\n    hasScssCode() {\r\n      return !!this.$slots[\"scss\"];\r\n    },\r\n\r\n    /**\r\n     * Check if has HTML code slot\r\n     * @returns {boolean}\r\n     */\r\n    hasHtmlCode() {\r\n      return !!this.$slots[\"html\"];\r\n    }\r\n  }\r\n};\r\n</script>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodePreview.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodePreview.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./CodePreview.vue?vue&type=template&id=773e0431\"\nimport script from \"./CodePreview.vue?vue&type=script&lang=js\"\nexport * from \"./CodePreview.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}