{"version":3,"sources":["webpack:///./src/views/core/UiPagination.vue","webpack:///src/views/core/UiPagination.vue","webpack:///./src/views/core/UiPagination.vue?2ad9","webpack:///./src/views/core/UiPagination.vue?47c0"],"names":["render","_vm","this","_c","_self","attrs","scopedSlots","_u","key","fn","staticClass","_v","proxy","directives","name","rawName","modifiers","staticRenderFns","mounted","core","index","pageination","document","getElementsByClassName","Array","from","children","forEach","el","querySelector","classList","add","pageinationSuccess","pageinationInfo","component"],"mappings":"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","file":"js/chunk-2d20f7a3.d0ff91b9.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',[_c('b-col',{attrs:{\"lg\":\"6\",\"sm\":\"12\"}},[_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Pagination Examples\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-1\",modifiers:{\"collapse-1\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive \"),_c('code',[_vm._v(\"aria-label\")]),_vm._v(\" for the \"),_c('code',[_vm._v(\"<nav>\")]),_vm._v(\" to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be \"),_c('code',[_vm._v(\"aria-label=\\\"Search results pages\\\"\")]),_vm._v(\".\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-1\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"pagination-examples\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-pagination value=\\\"1\\\"\\n              prev-text=\\\"Previous\\\"\\n              next-text=\\\"Next\\\"\\n              first-text=\\\"First\\\"\\n              last-text=\\\"Last\\\"\\n              :total-rows=\\\"50\\\"\\n></b-pagination>\\n\")])])])])]),_c('b-pagination',{attrs:{\"value\":\"1\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"first-text\":\"First\",\"last-text\":\"Last\",\"total-rows\":50}})]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Disabled and active states\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-2\",modifiers:{\"collapse-2\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Pagination links are customizable for different circumstances. Use \"),_c('code',[_vm._v(\"disabled\")]),_vm._v(\" for links that appear un-clickable and \"),_c('code',[_vm._v(\".active\")]),_vm._v(\" to indicate the current page.\")]),_c('p',[_vm._v(\"While the \"),_c('code',[_vm._v(\"disabled\")]),_vm._v(\" prop uses \"),_c('code',[_vm._v(\"pointer-events: none\")]),_vm._v(\" to \"),_c('em',[_vm._v(\"try\")]),_vm._v(\" to disable the link functionality of \"),_c('code',[_vm._v(\"<a>\")]),_vm._v(\"s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add \"),_c('code',[_vm._v(\"tabindex=\\\"-1\\\"\")]),_vm._v(\" on disabled links and use custom JavaScript to fully disable their functionality.\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-2\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"disabled-active-1\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-pagination value=\\\"1\\\" hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" disabled :total-rows=\\\"50\\\" />\\n<b-pagination value=\\\"2\\\" hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" :total-rows=\\\"50\\\" />\\n\")])])])])]),_c('b-pagination',{attrs:{\"value\":\"1\",\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"disabled\":\"\",\"total-rows\":50}}),_c('p',[_vm._v(\"You can optionally swap out active or disabled anchors for \"),_c('code',[_vm._v(\"<span>\")]),_vm._v(\", or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.\")]),_c('b-pagination',{attrs:{\"value\":\"2\",\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"total-rows\":50}})]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Pagination With Color\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-3\",modifiers:{\"collapse-3\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive \"),_c('code',[_vm._v(\"aria-label\")]),_vm._v(\" for the \"),_c('code',[_vm._v(\"<nav>\")]),_vm._v(\" to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be \"),_c('code',[_vm._v(\"aria-label=\\\"Search results pages\\\"\")]),_vm._v(\".\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-3\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"disabled-active-3\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-pagination class=\\\"iq-page-primary\\\" hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" :value=\\\"2\\\" :total-rows=\\\"50\\\" />\\n<b-pagination class=\\\"iq-page-success\\\" hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" :value=\\\"2\\\" :total-rows=\\\"50\\\" />\\n<b-pagination class=\\\"iq-page-info\\\" hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" :value=\\\"2\\\" :total-rows=\\\"50\\\" />\\n\")])])])])]),_c('b-pagination',{staticClass:\"iq-page-primary\",attrs:{\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"value\":2,\"total-rows\":50}}),_c('b-pagination',{staticClass:\"iq-page-success\",attrs:{\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"value\":2,\"total-rows\":50}}),_c('b-pagination',{staticClass:\"iq-page-info\",attrs:{\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"value\":2,\"total-rows\":50}})]},proxy:true}])})],1),_c('b-col',[_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Working with icons\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-4\",modifiers:{\"collapse-4\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with \"),_c('code',[_vm._v(\"aria\")]),_vm._v(\" attributes.\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-4\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"pagination-with-icon\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-pagination value=\\\"1\\\"\\n              :total-rows=\\\"50\\\"\\n></b-pagination>\\n\")])])])])]),_c('b-pagination',{attrs:{\"value\":\"1\",\"total-rows\":50}})]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Pagination Sizing\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-5\",modifiers:{\"collapse-5\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"Fancy larger or smaller pagination? Add prop \"),_c('code',[_vm._v(\"size=\\\"lg\\\"\")]),_vm._v(\" or \"),_c('code',[_vm._v(\"size=\\\"sm\\\"\")]),_vm._v(\" for additional sizes.\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-5\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"pagination-with-icon-size\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-pagination value=\\\"1\\\" :total-rows=\\\"50\\\" size=\\\"lg\\\" />\\n<b-pagination value=\\\"1\\\" :total-rows=\\\"50\\\" />\\n<b-pagination value=\\\"1\\\" :total-rows=\\\"50\\\" size=\\\"sm\\\" />\\n\")])])])])]),_c('b-pagination',{attrs:{\"value\":\"1\",\"total-rows\":50,\"size\":\"lg\"}}),_c('b-pagination',{attrs:{\"value\":\"1\",\"total-rows\":50}}),_c('b-pagination',{attrs:{\"value\":\"1\",\"total-rows\":50,\"size\":\"sm\"}})]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Alignment\")])]},proxy:true},{key:\"headerAction\",fn:function(){return [_c('a',{directives:[{name:\"b-toggle\",rawName:\"v-b-toggle.collapse-6\",modifiers:{\"collapse-6\":true}}],staticClass:\"text-primary float-right\",attrs:{\"role\":\"button\"}},[_c('i',{staticClass:\"ri-code-s-slash-line\"})])]},proxy:true},{key:\"body\",fn:function(){return [_c('p',[_vm._v(\"By default the pagination component is left aligned. Change the alignment to \"),_c('code',[_vm._v(\"center\")]),_vm._v(\", \"),_c('code',[_vm._v(\"right\")]),_vm._v(\" (\"),_c('code',[_vm._v(\"right\")]),_vm._v(\" is an alias for \"),_c('code',[_vm._v(\"end\")]),_vm._v(\"), or \"),_c('code',[_vm._v(\"fill\")]),_vm._v(\" by setting the prop align to the appropriate value.\")]),_c('b-collapse',{staticClass:\"mb-2\",attrs:{\"id\":\"collapse-6\"}},[_c('div',{staticClass:\"card\"},[_c('kbd',{staticClass:\"bg-dark\"},[_c('pre',{staticClass:\"text-white\",attrs:{\"id\":\"pagination-align\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<div>\\n  <h6>Left alignment (default)</h6>\\n  <b-pagination hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" :value=\\\"1\\\" :total-rows=\\\"50\\\" />\\n</div>\\n\\n<div class=\\\"mt-3\\\">\\n  <h6 class=\\\"text-center\\\">Center alignment</h6>\\n  <b-pagination hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" :value=\\\"1\\\" :total-rows=\\\"50\\\" align=\\\"center\\\" />\\n</div>\\n\\n<div class=\\\"mt-3\\\">\\n  <h6 class=\\\"text-right\\\">Right (end) alignment</h6>\\n  <b-pagination hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" :value=\\\"1\\\" :total-rows=\\\"50\\\" align=\\\"right\\\" />\\n</div>\\n\\n<div class=\\\"mt-3\\\">\\n  <h6 class=\\\"text-center\\\">Fill alignment</h6>\\n  <b-pagination hide-goto-end-buttons prev-text=\\\"Previous\\\" next-text=\\\"Next\\\" :value=\\\"1\\\" :total-rows=\\\"50\\\" align=\\\"fill\\\" />\\n</div>\\n\")])])])])]),_c('div',[_c('h6',[_vm._v(\"Left alignment (default)\")]),_c('b-pagination',{attrs:{\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"value\":1,\"total-rows\":50}})],1),_c('div',{staticClass:\"mt-3\"},[_c('h6',{staticClass:\"text-center\"},[_vm._v(\"Center alignment\")]),_c('b-pagination',{attrs:{\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"value\":1,\"total-rows\":50,\"align\":\"center\"}})],1),_c('div',{staticClass:\"mt-3\"},[_c('h6',{staticClass:\"text-right\"},[_vm._v(\"Right (end) alignment\")]),_c('b-pagination',{attrs:{\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"value\":1,\"total-rows\":50,\"align\":\"right\"}})],1),_c('div',{staticClass:\"mt-3\"},[_c('h6',{staticClass:\"text-center\"},[_vm._v(\"Fill alignment\")]),_c('b-pagination',{attrs:{\"hide-goto-end-buttons\":\"\",\"prev-text\":\"Previous\",\"next-text\":\"Next\",\"value\":1,\"total-rows\":50,\"align\":\"fill\"}})],1)]},proxy:true}])})],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <b-container fluid>\n    <b-row>\n      <b-col lg=\"6\" sm=\"12\">\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Pagination Examples</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-1 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label=\"Search results pages\"</code>.</p>\n            <b-collapse id=\"collapse-1\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"pagination-examples\">\n                    <code>\n&lt;b-pagination value=\"1\"\n              prev-text=\"Previous\"\n              next-text=\"Next\"\n              first-text=\"First\"\n              last-text=\"Last\"\n              :total-rows=\"50\"\n&gt;&lt;/b-pagination&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-pagination value=\"1\" prev-text=\"Previous\" next-text=\"Next\" first-text=\"First\" last-text=\"Last\" :total-rows=\"50\" />\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Disabled and active states</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-2 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Pagination links are customizable for different circumstances. Use <code>disabled</code> for links that appear un-clickable and <code>.active</code> to indicate the current page.</p>\n            <p>While the <code>disabled</code> prop uses <code>pointer-events: none</code> to <em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS property is not yet standardized and doesn’t account for keyboard navigation. As such, you should always add <code>tabindex=\"-1\"</code> on disabled links and use custom JavaScript to fully disable their functionality.</p>\n            <b-collapse id=\"collapse-2\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"disabled-active-1\">\n                    <code>\n&lt;b-pagination value=\"1\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" disabled :total-rows=\"50\" /&gt;\n&lt;b-pagination value=\"2\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :total-rows=\"50\" /&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-pagination value=\"1\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" disabled :total-rows=\"50\" />\n            <p>You can optionally swap out active or disabled anchors for <code>&lt;span&gt;</code>, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.</p>\n            <b-pagination value=\"2\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :total-rows=\"50\" />\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Pagination With Color</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-3 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be <code>aria-label=\"Search results pages\"</code>.</p>\n            <b-collapse id=\"collapse-3\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"disabled-active-3\">\n                    <code>\n&lt;b-pagination class=\"iq-page-primary\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"2\" :total-rows=\"50\" /&gt;\n&lt;b-pagination class=\"iq-page-success\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"2\" :total-rows=\"50\" /&gt;\n&lt;b-pagination class=\"iq-page-info\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"2\" :total-rows=\"50\" /&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-pagination class=\"iq-page-primary\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"2\" :total-rows=\"50\" />\n            <b-pagination class=\"iq-page-success\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"2\" :total-rows=\"50\" />\n            <b-pagination class=\"iq-page-info\" hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"2\" :total-rows=\"50\" />\n          </template>\n        </iq-card>\n      </b-col>\n      <b-col>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Working with icons</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-4 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with <code>aria</code> attributes.</p>\n            <b-collapse id=\"collapse-4\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"pagination-with-icon\">\n                    <code>\n&lt;b-pagination value=\"1\"\n              :total-rows=\"50\"\n&gt;&lt;/b-pagination&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-pagination value=\"1\" :total-rows=\"50\" />\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Pagination Sizing</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-5 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>Fancy larger or smaller pagination? Add prop <code>size=\"lg\"</code> or <code>size=\"sm\"</code> for additional sizes.</p>\n            <b-collapse id=\"collapse-5\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"pagination-with-icon-size\">\n                    <code>\n&lt;b-pagination value=\"1\" :total-rows=\"50\" size=\"lg\" /&gt;\n&lt;b-pagination value=\"1\" :total-rows=\"50\" /&gt;\n&lt;b-pagination value=\"1\" :total-rows=\"50\" size=\"sm\" /&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-pagination value=\"1\" :total-rows=\"50\" size=\"lg\" />\n            <b-pagination value=\"1\" :total-rows=\"50\" />\n            <b-pagination value=\"1\" :total-rows=\"50\" size=\"sm\" />\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Alignment</h4>\n          </template>\n          <template v-slot:headerAction>\n            <a class=\"text-primary float-right\" v-b-toggle.collapse-6 role=\"button\">\n              <i class=\"ri-code-s-slash-line\" />\n            </a>\n          </template>\n          <template v-slot:body>\n            <p>By default the pagination component is left aligned. Change the alignment to <code>center</code>, <code>right</code> (<code>right</code> is an alias for <code>end</code>), or <code>fill</code> by setting the prop align to the appropriate value.</p>\n            <b-collapse id=\"collapse-6\" class=\"mb-2\">\n              <div class=\"card\">\n                <kbd class=\"bg-dark\">\n                  <pre class=\"text-white\" id=\"pagination-align\">\n                    <code>\n&lt;div&gt;\n  &lt;h6&gt;Left alignment (default)&lt;/h6&gt;\n  &lt;b-pagination hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"1\" :total-rows=\"50\" /&gt;\n&lt;/div&gt;\n\n&lt;div class=\"mt-3\"&gt;\n  &lt;h6 class=\"text-center\"&gt;Center alignment&lt;/h6&gt;\n  &lt;b-pagination hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"1\" :total-rows=\"50\" align=\"center\" /&gt;\n&lt;/div&gt;\n\n&lt;div class=\"mt-3\"&gt;\n  &lt;h6 class=\"text-right\"&gt;Right (end) alignment&lt;/h6&gt;\n  &lt;b-pagination hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"1\" :total-rows=\"50\" align=\"right\" /&gt;\n&lt;/div&gt;\n\n&lt;div class=\"mt-3\"&gt;\n  &lt;h6 class=\"text-center\"&gt;Fill alignment&lt;/h6&gt;\n  &lt;b-pagination hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"1\" :total-rows=\"50\" align=\"fill\" /&gt;\n&lt;/div&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <div>\n              <h6>Left alignment (default)</h6>\n              <b-pagination hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"1\" :total-rows=\"50\" />\n            </div>\n\n            <div class=\"mt-3\">\n              <h6 class=\"text-center\">Center alignment</h6>\n              <b-pagination hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"1\" :total-rows=\"50\" align=\"center\" />\n            </div>\n\n            <div class=\"mt-3\">\n              <h6 class=\"text-right\">Right (end) alignment</h6>\n              <b-pagination hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"1\" :total-rows=\"50\" align=\"right\" />\n            </div>\n\n            <div class=\"mt-3\">\n              <h6 class=\"text-center\">Fill alignment</h6>\n              <b-pagination hide-goto-end-buttons prev-text=\"Previous\" next-text=\"Next\" :value=\"1\" :total-rows=\"50\" align=\"fill\" />\n            </div>\n          </template>\n        </iq-card>\n      </b-col>\n    </b-row>\n  </b-container>\n</template>\n<script>\nimport { core } from '../../config/pluginInit'\nexport default {\n  name: 'UiPagination',\n  mounted () {\n    core.index()\n    const pageination = document.getElementsByClassName('iq-page-primary')[0]\n    Array.from(pageination.children).forEach((el) => {\n      if (el.querySelector('button')) {\n        el.querySelector('button').classList.add('bg-primary', 'text-white', 'border-primary')\n      }\n    })\n    const pageinationSuccess = document.getElementsByClassName('iq-page-success')[0]\n    Array.from(pageinationSuccess.children).forEach((el) => {\n      if (el.querySelector('button')) {\n        el.querySelector('button').classList.add('bg-success', 'text-white', 'border-success')\n      }\n    })\n    const pageinationInfo = document.getElementsByClassName('iq-page-info')[0]\n    Array.from(pageinationInfo.children).forEach((el) => {\n      if (el.querySelector('button')) {\n        el.querySelector('button').classList.add('bg-info', 'text-white', 'border-info')\n      }\n    })\n  }\n}\n</script>\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!./UiPagination.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!./UiPagination.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UiPagination.vue?vue&type=template&id=0cc55f7a&\"\nimport script from \"./UiPagination.vue?vue&type=script&lang=js&\"\nexport * from \"./UiPagination.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":""}