{"version":3,"sources":["webpack:///./src/views/components/vuesax/loading/Loading.vue?93a0","webpack:///./src/views/components/vuesax/loading/Loading.vue?5a73","webpack:///./src/views/components/vuesax/loading/LoadingDefault.vue?dd9e","webpack:///src/views/components/vuesax/loading/LoadingDefault.vue","webpack:///./src/views/components/vuesax/loading/LoadingDefault.vue?17a1","webpack:///./src/views/components/vuesax/loading/LoadingDefault.vue","webpack:///./src/views/components/vuesax/loading/LoadingType.vue?df86","webpack:///src/views/components/vuesax/loading/LoadingType.vue","webpack:///./src/views/components/vuesax/loading/LoadingType.vue?7f01","webpack:///./src/views/components/vuesax/loading/LoadingType.vue","webpack:///./src/views/components/vuesax/loading/LoadingColor.vue?a572","webpack:///src/views/components/vuesax/loading/LoadingColor.vue","webpack:///./src/views/components/vuesax/loading/LoadingColor.vue?ef38","webpack:///./src/views/components/vuesax/loading/LoadingColor.vue","webpack:///./src/views/components/vuesax/loading/LoadingBackground.vue?3144","webpack:///src/views/components/vuesax/loading/LoadingBackground.vue","webpack:///./src/views/components/vuesax/loading/LoadingBackground.vue?3a39","webpack:///./src/views/components/vuesax/loading/LoadingBackground.vue","webpack:///./src/views/components/vuesax/loading/LoadingContained.vue?26bc","webpack:///src/views/components/vuesax/loading/LoadingContained.vue","webpack:///./src/views/components/vuesax/loading/LoadingContained.vue?93f8","webpack:///./src/views/components/vuesax/loading/LoadingContained.vue","webpack:///src/views/components/vuesax/loading/Loading.vue","webpack:///./src/views/components/vuesax/loading/Loading.vue?13b3","webpack:///./src/views/components/vuesax/loading/Loading.vue?2d91"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticRenderFns","_v","staticClass","on","openLoading","slot","component","_l","type","key","class","activeLoading","$event","data","mounted","types","forEach","container","text","methods","$vs","loading","setTimeout","directives","name","rawName","value","expression","domProps","target","composing","colorLoading","openLoadingColor","backgroundLoading","openLoadingBackground","ref","openLoadingContained","openLoadingInDiv","background","color","scale"],"mappings":"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","file":"js/chunk-d82d841e.2e412add.js","sourcesContent":["import mod from \"-!../../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/lib/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/lib/index.js??ref--8-oneOf-1-2!../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"loading-demo\"}},[_c('loading-default'),_c('loading-type'),_c('loading-color'),_c('loading-background'),_c('loading-contained')],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('vx-card',{attrs:{\"title\":\"Default\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"To add a loading in any part of your application we have the global function \"),_c('code',[_vm._v(\"$vs.loading()\")]),_vm._v(\", and then when you want to remove it we have \"),_c('code',[_vm._v(\"$vs.loading.close()\")])]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"color\":\"primary\",\"icon\":\"new_releases\",\"active\":\"true\"}},[_c('p',[_vm._v(\"For the examples, the request or the delay is simulated with \"),_c('code',[_vm._v(\"setTimeout\")])])]),_c('div',{staticClass:\"mt-5\"},[_c('vs-button',{attrs:{\"type\":\"filled\",\"color\":\"primary\"},on:{\"click\":_vm.openLoading}},[_vm._v(\"Loading Default\")])],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template>\\n  <div class=\\\"demo-alignment\\\">\\n    <vs-button @click=\\\"openLoading\\\" type=\\\"filled\\\" color=\\\"primary\\\">Loading Default</vs-button>\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  methods:{\\n    openLoading(){\\n      this.$vs.loading()\\n      setTimeout( ()=> {\\n        this.$vs.loading.close()\\n      }, 2000);\\n    },\\n  }\\n}\\n</script>\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: LoadingDefault.vue\r\n    Description: Add default loading to your application\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Default\" code-toggler>\r\n        \r\n        <p>To add a loading in any part of your application we have the global function <code>$vs.loading()</code>, and then when you want to remove it we have <code>$vs.loading.close()</code></p>\r\n\r\n        <vs-alert color=\"primary\" icon=\"new_releases\" active=\"true\" class=\"mt-5\">\r\n            <p>For the examples, the request or the delay is simulated with <code>setTimeout</code></p>\r\n        </vs-alert>\r\n\r\n        <div class=\"mt-5\">\r\n            <vs-button @click=\"openLoading\" type=\"filled\" color=\"primary\">Loading Default</vs-button>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;div class=&quot;demo-alignment&quot;&gt;\r\n    &lt;vs-button @click=&quot;openLoading&quot; type=&quot;filled&quot; color=&quot;primary&quot;&gt;Loading Default&lt;/vs-button&gt;\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  methods:{\r\n    openLoading(){\r\n      this.$vs.loading()\r\n      setTimeout( ()=&gt; {\r\n        this.$vs.loading.close()\r\n      }, 2000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    methods: {\r\n        openLoading() {\r\n            this.$vs.loading();\r\n            setTimeout(() => {\r\n                this.$vs.loading.close()\r\n            }, 2000);\r\n        },\r\n    }\r\n}\r\n</script>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingDefault.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingDefault.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingDefault.vue?vue&type=template&id=efe88ab6&\"\nimport script from \"./LoadingDefault.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingDefault.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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('vx-card',{attrs:{\"title\":\"Type\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can change the type of animation with the type property and the animations so far are:\")]),_c('div',{staticClass:\"demo-alignment\"},[_c('div',{staticClass:\"fill-row-loading\"},_vm._l((_vm.types),function(type){return _c('div',{key:type,staticClass:\"vs-con-loading__container loading-example\",class:{'activeLoading':_vm.activeLoading},attrs:{\"id\":[(\"loading-\" + type)]},on:{\"click\":function($event){return _vm.openLoading(type)}}})}),0)]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"demo-alignment\\\">\\n      <div class=\\\"fill-row-loading\\\">\\n        <div :class=\\\"{'activeLoading':activeLoading}\\\" @click=\\\"openLoading(type)\\\" v-for=\\\"type in types\\\" :id=\\\"[`loading-${type}`]\\\" class=\\\"vs-con-loading__container loading-example\\\">\\n        </div>\\n      </div>\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data:()=>({\\n    types:[\\n      'default',\\n      'point',\\n      'radius',\\n      'corners',\\n      'border',\\n      'sound',\\n      'material',\\n    ],\\n    activeLoading:false,\\n  }),\\n  mounted(){\\n    this.types.forEach((type)=>{\\n      this.$vs.loading({\\n        container: `#loading-${type}`,\\n        type,\\n        text:type\\n      })\\n    })\\n  },\\n  methods:{\\n    openLoading(type){\\n      this.activeLoading = true\\n      this.$vs.loading({\\n        type:type,\\n      })\\n      setTimeout( ()=> {\\n        this.activeLoading = false\\n        this.$vs.loading.close()\\n      }, 3000);\\n    },\\n  }\\n}\\n</script>\\n\\n<style lang=\\\"scss\\\">\\n.fill-row-loading {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-wrap: wrap;\\n  .loading-example {\\n    width: 120px;\\n    float: left;\\n    height: 120px;\\n    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);\\n    border-radius: 10px;\\n    margin: 8px;\\n    transition: all 0.3s ease;\\n    cursor: pointer;\\n    &:hover {\\n      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05);\\n      transform: translate(0, 4px);\\n    }\\n    h4 {\\n      z-index: 40000;\\n      position: relative;\\n      text-align: center;\\n      padding: 10px;\\n    }\\n    &.activeLoading {\\n      opacity: 0 !important;\\n      transform: scale(0.5);\\n    }\\n  }\\n}\\n</style>\\n\\t\\t\")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n\tFile Name: LoadingType.vue\r\n\tDescription: Change the type of the animation\r\n\t----------------------------------------------------------------------------------------\r\n\tItem Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n\tAuthor: Pixinvent\r\n\tAuthor URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n\t<vx-card title=\"Type\" code-toggler>\r\n\t\t\r\n\t\t<p>You can change the type of animation with the type property and the animations so far are:</p>\r\n\r\n\t\t<div class=\"demo-alignment\">\r\n\r\n\t\t\t<div class=\"fill-row-loading\">\r\n\t\t\t\t<div\r\n\t\t\t\t\t:class=\"{'activeLoading':activeLoading}\"\r\n\t\t\t\t\t@click=\"openLoading(type)\"\r\n\t\t\t\t\tv-for=\"type in types\"\r\n\t\t\t\t\t:key=\"type\"\r\n\t\t\t\t\t:id=\"[`loading-${type}`]\"\r\n\t\t\t\t\tclass=\"vs-con-loading__container loading-example\">\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;demo-alignment&quot;&gt;\r\n      &lt;div class=&quot;fill-row-loading&quot;&gt;\r\n        &lt;div :class=&quot;{&apos;activeLoading&apos;:activeLoading}&quot; @click=&quot;openLoading(type)&quot; v-for=&quot;type in types&quot; :id=&quot;[&grave;loading-${type}&grave;]&quot; class=&quot;vs-con-loading__container loading-example&quot;&gt;\r\n        &lt;/div&gt;\r\n      &lt;/div&gt;\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data:()=&gt;({\r\n    types:[\r\n      &apos;default&apos;,\r\n      &apos;point&apos;,\r\n      &apos;radius&apos;,\r\n      &apos;corners&apos;,\r\n      &apos;border&apos;,\r\n      &apos;sound&apos;,\r\n      &apos;material&apos;,\r\n    ],\r\n    activeLoading:false,\r\n  }),\r\n  mounted(){\r\n    this.types.forEach((type)=&gt;{\r\n      this.$vs.loading({\r\n        container: &grave;#loading-${type}&grave;,\r\n        type,\r\n        text:type\r\n      })\r\n    })\r\n  },\r\n  methods:{\r\n    openLoading(type){\r\n      this.activeLoading = true\r\n      this.$vs.loading({\r\n        type:type,\r\n      })\r\n      setTimeout( ()=&gt; {\r\n        this.activeLoading = false\r\n        this.$vs.loading.close()\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n\r\n&lt;style lang=&quot;scss&quot;&gt;\r\n.fill-row-loading {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  .loading-example {\r\n    width: 120px;\r\n    float: left;\r\n    height: 120px;\r\n    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.05);\r\n    border-radius: 10px;\r\n    margin: 8px;\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n    &amp;:hover {\r\n      box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05);\r\n      transform: translate(0, 4px);\r\n    }\r\n    h4 {\r\n      z-index: 40000;\r\n      position: relative;\r\n      text-align: center;\r\n      padding: 10px;\r\n    }\r\n    &amp;.activeLoading {\r\n      opacity: 0 !important;\r\n      transform: scale(0.5);\r\n    }\r\n  }\r\n}\r\n&lt;/style&gt;\r\n\t\t</template>\r\n\r\n\t</vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data:()=>({\r\n    types:[\r\n      'default',\r\n      'point',\r\n      'radius',\r\n      'corners',\r\n      'border',\r\n      'sound',\r\n      'material',\r\n    ],\r\n    activeLoading:false,\r\n  }),\r\n  mounted(){\r\n    this.types.forEach((type)=>{\r\n      this.$vs.loading({\r\n        container: `#loading-${type}`,\r\n        type,\r\n        text:type\r\n      })\r\n    })\r\n  },\r\n  methods:{\r\n    openLoading(type){\r\n      this.activeLoading = true\r\n      this.$vs.loading({\r\n        type:type,\r\n      })\r\n      setTimeout( ()=> {\r\n        this.activeLoading = false\r\n        this.$vs.loading.close()\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n</script>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingType.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingType.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingType.vue?vue&type=template&id=3864af9a&\"\nimport script from \"./LoadingType.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingType.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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('vx-card',{attrs:{\"title\":\"Color\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can change the color of the loading with the property \"),_c('code',[_vm._v(\"color\")])]),_c('div',{staticClass:\"demo-alignment mt-3\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.colorLoading),expression:\"colorLoading\"}],attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},domProps:{\"value\":(_vm.colorLoading)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.colorLoading=$event.target.value}}}),_c('vs-button',{attrs:{\"type\":\"filled\",\"color\":_vm.colorLoading},on:{\"click\":_vm.openLoadingColor}},[_vm._v(\"Loading\")])],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"demo-alignment\\\">\\n\\n    <input type=\\\"color\\\" v-model=\\\"colorLoading\\\" name=\\\"\\\" value=\\\"\\\">\\n    <vs-button @click=\\\"openLoadingColor\\\" type=\\\"filled\\\" :color=\\\"colorLoading\\\">Loading</vs-button>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data() {\\n    return {\\n      colorLoading: '#ff8000',\\n    }\\n  },\\n  methods: {\\n    openLoadingColor() {\\n      this.$vs.loading({ color: this.colorLoading })\\n      setTimeout(() => {\\n        this.$vs.loading.close()\\n      }, 2000);\\n    },\\n  }\\n}\\n</script>\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: LoadingColor.vue\r\n    Description: Change color of loading animation\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Color\" code-toggler>\r\n\r\n        <p>You can change the color of the loading with the property <code>color</code></p>\r\n\r\n        <div class=\"demo-alignment mt-3\">\r\n            <input type=\"color\" v-model=\"colorLoading\" name=\"\" value=\"\">\r\n            <vs-button @click=\"openLoadingColor\" type=\"filled\" :color=\"colorLoading\">Loading</vs-button>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;demo-alignment&quot;&gt;\r\n\r\n    &lt;input type=&quot;color&quot; v-model=&quot;colorLoading&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n    &lt;vs-button @click=&quot;openLoadingColor&quot; type=&quot;filled&quot; :color=&quot;colorLoading&quot;&gt;Loading&lt;/vs-button&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data() {\r\n    return {\r\n      colorLoading: &apos;#ff8000&apos;,\r\n    }\r\n  },\r\n  methods: {\r\n    openLoadingColor() {\r\n      this.$vs.loading({ color: this.colorLoading })\r\n      setTimeout(() =&gt; {\r\n        this.$vs.loading.close()\r\n      }, 2000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            colorLoading: '#ff8000',\r\n        }\r\n    },\r\n    methods: {\r\n        openLoadingColor() {\r\n            this.$vs.loading({ color: this.colorLoading })\r\n            setTimeout(() => {\r\n                this.$vs.loading.close()\r\n            }, 2000);\r\n        },\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingColor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingColor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingColor.vue?vue&type=template&id=6a46cd50&\"\nimport script from \"./LoadingColor.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingColor.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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('vx-card',{attrs:{\"title\":\"Background\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"If you need to change the background of the loading, you can use the property \"),_c('code',[_vm._v(\"background\")])]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"icon\":\"warning\",\"active\":\"true\",\"color\":\"warning\"}},[_c('span',[_vm._v(\"Only \"),_c('strong',[_vm._v(\"RGB\")]),_vm._v(\" and \"),_c('strong',[_vm._v(\"HEX\")]),_vm._v(\" colors are supported.\")])]),_c('div',{staticClass:\"demo-alignment mt-3\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.backgroundLoading),expression:\"backgroundLoading\"}],attrs:{\"type\":\"color\",\"name\":\"\",\"value\":\"\"},domProps:{\"value\":(_vm.backgroundLoading)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.backgroundLoading=$event.target.value}}}),_c('vs-button',{attrs:{\"type\":\"gradient\",\"color\":\"success\"},on:{\"click\":_vm.openLoadingBackground}},[_vm._v(\"Success\")])],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"demo-alignment\\\">\\n\\n    <input type=\\\"color\\\" v-model=\\\"backgroundLoading\\\" name=\\\"\\\" value=\\\"\\\">\\n    <vs-button @click=\\\"openLoadingBackground\\\" type=\\\"gradient\\\" color=\\\"success\\\">Success</vs-button>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data() {\\n    return {\\n      backgroundLoading: '#22c16b',\\n    }\\n  },\\n  methods: {\\n    openLoadingBackground() {\\n      this.$vs.loading({ background: this.backgroundLoading, color: 'rgb(255, 255, 255)' })\\n      setTimeout(() => {\\n        this.$vs.loading.close()\\n      }, 3000);\\n    },\\n  }\\n}\\n</script>\\n        \")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: LoadingBackground.vue\r\n    Description: Change background color of loading animation\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Background\" code-toggler>\r\n        \r\n        <p>If you need to change the background of the loading, you can use the property <code>background</code></p>\r\n\r\n        <vs-alert icon=\"warning\" active=\"true\" color=\"warning\" class=\"mt-5\">\r\n            <span>Only <strong>RGB</strong> and <strong>HEX</strong> colors are supported.</span>\r\n        </vs-alert>\r\n\r\n        <div class=\"demo-alignment mt-3\">\r\n            <input type=\"color\" v-model=\"backgroundLoading\" name=\"\" value=\"\">\r\n            <vs-button @click=\"openLoadingBackground\" type=\"gradient\" color=\"success\">Success</vs-button>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;demo-alignment&quot;&gt;\r\n\r\n    &lt;input type=&quot;color&quot; v-model=&quot;backgroundLoading&quot; name=&quot;&quot; value=&quot;&quot;&gt;\r\n    &lt;vs-button @click=&quot;openLoadingBackground&quot; type=&quot;gradient&quot; color=&quot;success&quot;&gt;Success&lt;/vs-button&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data() {\r\n    return {\r\n      backgroundLoading: &apos;#22c16b&apos;,\r\n    }\r\n  },\r\n  methods: {\r\n    openLoadingBackground() {\r\n      this.$vs.loading({ background: this.backgroundLoading, color: &apos;rgb(255, 255, 255)&apos; })\r\n      setTimeout(() =&gt; {\r\n        this.$vs.loading.close()\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            backgroundLoading: '#22c16b',\r\n        }\r\n    },\r\n    methods: {\r\n        openLoadingBackground() {\r\n            this.$vs.loading({ background: this.backgroundLoading, color: 'rgb(255, 255, 255)' })\r\n            setTimeout(() => {\r\n                this.$vs.loading.close()\r\n            }, 3000);\r\n        },\r\n    }\r\n}\r\n</script>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingBackground.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingBackground.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingBackground.vue?vue&type=template&id=31909e9c&\"\nimport script from \"./LoadingBackground.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingBackground.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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('vx-card',{attrs:{\"title\":\"Contained\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"To add a loading within a container, call the \"),_c('code',[_vm._v(\"$vs.loading()\")]),_vm._v(\" global function passing the \"),_c('code',[_vm._v(\"container\")]),_vm._v(\" and the \"),_c('code',[_vm._v(\"scale\")]),_vm._v(\" parameters. When you want to remove it we have \"),_c('code',[_vm._v(\"$vs.loading.close()\")]),_vm._v(\", passing the same \"),_c('code',[_vm._v(\"container\")]),_vm._v(\" parameter\")]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"color\":\"primary\",\"icon\":\"new_releases\",\"active\":\"true\"}},[_c('p',[_vm._v(\"For the examples, the request or the delay is simulated with \"),_c('code',[_vm._v(\"setTimeout\")])])]),_c('div',{staticClass:\"demo-alignment mt-3\"},[_c('vs-button',{ref:\"loadableButton\",staticClass:\"vs-con-loading__container\",attrs:{\"id\":\"button-with-loading\",\"type\":\"relief\",\"vslor\":\"primary\"},on:{\"click\":_vm.openLoadingContained}},[_vm._v(\"\\n\\t\\t\\t\\tButton with Loading\\n\\t\\t\\t\")]),_c('vs-button',{attrs:{\"type\":\"relief\",\"vslor\":\"primary\"},on:{\"click\":_vm.openLoadingInDiv}},[_vm._v(\"Div with Loading\")]),_c('div',{staticClass:\"contained-example-container\"},[_c('div',{staticClass:\"vs-con-loading__container\",attrs:{\"id\":\"div-with-loading\"}},[_vm._v(\"Load Me!\")])])],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template>\\n  <vs-button ref=\\\"loadableButton\\\" id=\\\"button-with-loading\\\" class=\\\"vs-con-loading__container\\\" @click=\\\"openLoadingContained\\\" type=\\\"relief\\\" vslor=\\\"primary\\\">\\n    Button with Loading\\n  </vs-button>\\n  <vs-button @click=\\\"openLoadingInDiv\\\" type=\\\"relief\\\" vslor=\\\"primary\\\">Div with Loading</vs-button>\\n\\n  <div class=\\\"contained-example-container\\\">\\n    <div id=\\\"div-with-loading\\\" class=\\\"vs-con-loading__container\\\">Load Me!</div>\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data(){\\n    return {\\n      backgroundLoading:'primary',\\n      colorLoading:'#fff',\\n    }\\n  },\\n  methods:{\\n    openLoadingContained(){\\n      this.$vs.loading({\\n        background: this.backgroundLoading,\\n        color: this.colorLoading,\\n        container: \\\"#button-with-loading\\\",\\n        scale: 0.45\\n      })\\n      setTimeout( ()=> {\\n        this.$vs.loading.close(\\\"#button-with-loading > .con-vs-loading\\\")\\n      }, 3000);\\n    },\\n    openLoadingInDiv(){\\n      this.$vs.loading({\\n        container: '#div-with-loading',\\n        scale: 0.6\\n      })\\n      setTimeout( ()=> {\\n        this.$vs.loading.close('#div-with-loading > .con-vs-loading')\\n      }, 3000);\\n    },\\n  }\\n}\\n</script>\\n\\t\\t\")])],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n\tFile Name: LoadingContained.vue\r\n\tDescription: Create loading animation inside container\r\n\t----------------------------------------------------------------------------------------\r\n\tItem Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n\tAuthor: Pixinvent\r\n\tAuthor URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n\t<vx-card title=\"Contained\" code-toggler>\r\n\r\n\t\t<p>To add a loading within a container, call the <code>$vs.loading()</code> global function passing the <code>container</code> and the <code>scale</code> parameters. When you want to remove it we have <code>$vs.loading.close()</code>, passing the same <code>container</code> parameter</p>\r\n\r\n\t\t<vs-alert color=\"primary\" icon=\"new_releases\" active=\"true\" class=\"mt-5\">\r\n\t\t\t<p>For the examples, the request or the delay is simulated with <code>setTimeout</code></p>\r\n\t\t</vs-alert>\r\n\r\n\t\t<div class=\"demo-alignment mt-3\">\r\n\r\n\t\t\t<vs-button ref=\"loadableButton\" id=\"button-with-loading\" class=\"vs-con-loading__container\" @click=\"openLoadingContained\" type=\"relief\" vslor=\"primary\">\r\n\t\t\t\tButton with Loading\r\n\t\t\t</vs-button>\r\n\t\t\t<vs-button @click=\"openLoadingInDiv\" type=\"relief\" vslor=\"primary\">Div with Loading</vs-button>\r\n\r\n\t\t\t<div class=\"contained-example-container\">\r\n\t\t\t\t<div id=\"div-with-loading\" class=\"vs-con-loading__container\">Load Me!</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\r\n\t\t<template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;vs-button ref=&quot;loadableButton&quot; id=&quot;button-with-loading&quot; class=&quot;vs-con-loading__container&quot; @click=&quot;openLoadingContained&quot; type=&quot;relief&quot; vslor=&quot;primary&quot;&gt;\r\n    Button with Loading\r\n  &lt;/vs-button&gt;\r\n  &lt;vs-button @click=&quot;openLoadingInDiv&quot; type=&quot;relief&quot; vslor=&quot;primary&quot;&gt;Div with Loading&lt;/vs-button&gt;\r\n\r\n  &lt;div class=&quot;contained-example-container&quot;&gt;\r\n    &lt;div id=&quot;div-with-loading&quot; class=&quot;vs-con-loading__container&quot;&gt;Load Me!&lt;/div&gt;\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data(){\r\n    return {\r\n      backgroundLoading:'primary',\r\n      colorLoading:'#fff',\r\n    }\r\n  },\r\n  methods:{\r\n    openLoadingContained(){\r\n      this.$vs.loading({\r\n        background: this.backgroundLoading,\r\n        color: this.colorLoading,\r\n        container: &quot;#button-with-loading&quot;,\r\n        scale: 0.45\r\n      })\r\n      setTimeout( ()=&gt; {\r\n        this.$vs.loading.close(&quot;#button-with-loading &gt; .con-vs-loading&quot;)\r\n      }, 3000);\r\n    },\r\n    openLoadingInDiv(){\r\n      this.$vs.loading({\r\n        container: '#div-with-loading',\r\n        scale: 0.6\r\n      })\r\n      setTimeout( ()=&gt; {\r\n        this.$vs.loading.close('#div-with-loading &gt; .con-vs-loading')\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n&lt;/script&gt;\r\n\t\t</template>\r\n\r\n\t</vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data(){\r\n    return {\r\n      backgroundLoading:'primary',\r\n      colorLoading:'#fff',\r\n    }\r\n  },\r\n  methods:{\r\n    openLoadingContained(){\r\n      this.$vs.loading({\r\n        background: this.backgroundLoading,\r\n        color: this.colorLoading,\r\n        container: \"#button-with-loading\",\r\n        scale: 0.45\r\n      })\r\n      setTimeout( ()=> {\r\n        this.$vs.loading.close(\"#button-with-loading > .con-vs-loading\")\r\n      }, 3000);\r\n    },\r\n    openLoadingInDiv(){\r\n      this.$vs.loading({\r\n        container: '#div-with-loading',\r\n        scale: 0.6\r\n      })\r\n      setTimeout( ()=> {\r\n        this.$vs.loading.close('#div-with-loading > .con-vs-loading')\r\n      }, 3000);\r\n    },\r\n  }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingContained.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LoadingContained.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LoadingContained.vue?vue&type=template&id=c2101150&\"\nimport script from \"./LoadingContained.vue?vue&type=script&lang=js&\"\nexport * from \"./LoadingContained.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","<!-- =========================================================================================\r\n    File Name: Loading.vue\r\n    Description: Loading - Imports all page portions\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <div id=\"loading-demo\">\r\n        <loading-default></loading-default>\r\n        <loading-type></loading-type>\r\n        <loading-color></loading-color>\r\n        <loading-background></loading-background>\r\n        <loading-contained></loading-contained>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport LoadingDefault from './LoadingDefault.vue'\r\nimport LoadingType from './LoadingType.vue'\r\nimport LoadingColor from './LoadingColor.vue'\r\nimport LoadingBackground from './LoadingBackground.vue'\r\nimport LoadingContained from './LoadingContained.vue'\r\n\r\nexport default{\r\n    components: {\r\n        LoadingDefault,\r\n        LoadingType,\r\n        LoadingColor,\r\n        LoadingBackground,\r\n        LoadingContained,\r\n    }   \r\n}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n@import \"@/assets/scss/vuesax/pages/loading.scss\";\r\n</style>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Loading.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Loading.vue?vue&type=template&id=8df21c72&\"\nimport script from \"./Loading.vue?vue&type=script&lang=js&\"\nexport * from \"./Loading.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Loading.vue?vue&type=style&index=0&lang=scss&\"\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":""}