{"version":3,"sources":["webpack:///./src/views/core/UiModal.vue","webpack:///src/views/core/UiModal.vue","webpack:///./src/views/core/UiModal.vue?3f71","webpack:///./src/views/core/UiModal.vue?96fc"],"names":["render","_vm","this","_c","_self","attrs","scopedSlots","_u","key","fn","staticClass","_v","proxy","directives","name","rawName","modifiers","staticRenderFns","mounted","core","index","component"],"mappings":"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","file":"js/chunk-2d0c5398.c22ba74d.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(\"Modal components\")])]},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(\"Below is a \"),_c('em',[_vm._v(\"static\")]),_vm._v(\" modal example (meaning its \"),_c('code',[_vm._v(\"position\")]),_vm._v(\" and \"),_c('code',[_vm._v(\"display\")]),_vm._v(\" have been overridden). Included are the modal header, modal body (required for \"),_c('code',[_vm._v(\"padding\")]),_vm._v(\"), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.\")]),_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\":\"modal-components-1\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-button v-b-modal.modal-1 variant=\\\"primary\\\">Launch demo modal</b-button>\\n<b-modal id=\\\"modal-1\\\" title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  ...\\n</b-modal>\\n\")])])])])]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-1\",modifiers:{\"modal-1\":true}}],attrs:{\"variant\":\"primary\"}},[_vm._v(\"Launch demo modal\")]),_c('b-modal',{attrs:{\"id\":\"modal-1\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_vm._v(\" ... \")])]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Modal Scrolling\")])]},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(\"When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.\")]),_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\":\"modal-scrolling\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-button v-b-modal.modal-2 variant=\\\"primary\\\">Launch demo modal</b-button>\\n<b-modal id=\\\"modal-2\\\" scrollable title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n</b-modal>\\n\")])])])])]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-2\",modifiers:{\"modal-2\":true}}],attrs:{\"variant\":\"primary\"}},[_vm._v(\"Launch demo modal\")]),_c('b-modal',{attrs:{\"id\":\"modal-2\",\"scrollable\":\"\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")])])]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Optional sizes\")])]},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(\"Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.\")]),_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\":\"modal-components-2\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-button v-b-modal.modal-3 variant=\\\"primary\\\">Extra large modal</b-button>\\n<b-button v-b-modal.modal-4 variant=\\\"primary\\\">Large modal</b-button>\\n<b-button v-b-modal.modal-5 variant=\\\"primary\\\">Small modal</b-button>\\n\\n<b-modal id=\\\"modal-3\\\" size=\\\"xl\\\" title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  <p>Modal body text goes here.</p>\\n</b-modal>\\n\\n<b-modal id=\\\"modal-4\\\" size=\\\"lg\\\" title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  <p>Modal body text goes here.</p>\\n</b-modal>\\n\\n<b-modal id=\\\"modal-5\\\" size=\\\"sm\\\" title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  <p>Modal body text goes here.</p>\\n</b-modal>\\n\")])])])])]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-3\",modifiers:{\"modal-3\":true}}],staticClass:\"mr-1\",attrs:{\"variant\":\"primary\"}},[_vm._v(\"Extra large modal\")]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-4\",modifiers:{\"modal-4\":true}}],staticClass:\"mr-1\",attrs:{\"variant\":\"primary\"}},[_vm._v(\"Large modal\")]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-5\",modifiers:{\"modal-5\":true}}],staticClass:\"mr-1\",attrs:{\"variant\":\"primary\"}},[_vm._v(\"Small modal\")]),_c('b-modal',{attrs:{\"id\":\"modal-3\",\"size\":\"xl\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_c('p',[_vm._v(\"Modal body text goes here.\")])]),_c('b-modal',{attrs:{\"id\":\"modal-4\",\"size\":\"lg\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_c('p',[_vm._v(\"Modal body text goes here.\")])]),_c('b-modal',{attrs:{\"id\":\"modal-5\",\"size\":\"sm\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_c('p',[_vm._v(\"Modal body text goes here.\")])])]},proxy:true}])})],1),_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(\"Scrolling long content\")])]},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(\"When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.\")]),_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\":\"scroll-long-components\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-button v-b-modal.modal-6 variant=\\\"primary\\\">Launch demo modal</b-button>\\n<b-modal id=\\\"modal-6\\\" title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n</b-modal>\\n\")])])])])]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-6\",modifiers:{\"modal-6\":true}}],attrs:{\"variant\":\"primary\"}},[_vm._v(\"Launch demo modal\")]),_c('b-modal',{attrs:{\"id\":\"modal-6\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")])])]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Vertically centered\")])]},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(\"Add \"),_c('code',{staticClass:\"highlighter-rouge\"},[_vm._v(\".modal-dialog-centered\")]),_vm._v(\" to \"),_c('code',{staticClass:\"highlighter-rouge\"},[_vm._v(\".modal-dialog\")]),_vm._v(\" to vertically center the modal.\")]),_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\":\"vertical-center\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-button v-b-modal.modal-7 variant=\\\"primary\\\">Launch demo modal</b-button>\\n<b-button v-b-modal.modal-8 variant=\\\"primary\\\">Vertically centered scrollable modal</b-button>\\n<b-modal id=\\\"modal-7\\\" centered title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  ...\\n</b-modal>\\n<b-modal id=\\\"modal-8\\\" centered title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n  <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\\n  <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\\n  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\\n</b-modal>\\n\")])])])])]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-7\",modifiers:{\"modal-7\":true}}],staticClass:\"mr-1\",attrs:{\"variant\":\"primary\"}},[_vm._v(\"Launch demo modal\")]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-8\",modifiers:{\"modal-8\":true}}],staticClass:\"mr-1\",attrs:{\"variant\":\"primary\"}},[_vm._v(\"Vertically centered scrollable modal\")]),_c('b-modal',{attrs:{\"id\":\"modal-7\",\"centered\":\"\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_vm._v(\" ... \")]),_c('b-modal',{attrs:{\"id\":\"modal-8\",\"centered\":\"\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")]),_c('p',[_vm._v(\"Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.\")]),_c('p',[_vm._v(\"Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.\")]),_c('p',[_vm._v(\"Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.\")])])]},proxy:true}])}),_c('iq-card',{scopedSlots:_vm._u([{key:\"headerTitle\",fn:function(){return [_c('h4',{staticClass:\"card-title\"},[_vm._v(\"Using the grid\")])]},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(\"Utilize the Bootstrap grid system within a modal by nesting \"),_c('code',[_vm._v(\".container-fluid\")]),_vm._v(\" within the \"),_c('code',[_vm._v(\".modal-body\")]),_vm._v(\". Then, use the normal grid system classes as you would anywhere else.\")]),_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\":\"using-grid\"}},[_vm._v(\"                    \"),_c('code',[_vm._v(\"\\n<b-button v-b-modal.modal-9 variant=\\\"primary\\\">Launch demo modal</b-button>\\n<b-modal id=\\\"modal-9\\\" centered title=\\\"Modal title\\\" ok-title=\\\"Save Changes\\\" cancel-title=\\\"Close\\\">\\n  <div class=\\\"iq-example-row\\\">\\n    <b-container fluid>\\n      <b-row class=\\\"mb-3\\\">\\n        <b-col md=\\\"4\\\">\\n          md=\\\"4\\\"\\n        </b-col>\\n        <b-col md=\\\"4\\\" class=\\\"ml-auto\\\">\\n          md=\\\"4\\\" .ml-auto\\n        </b-col>\\n      </b-row>\\n      <b-row class=\\\"mb-3\\\">\\n        <b-col md=\\\"3\\\" class=\\\"ml-auto\\\">md=\\\"3\\\" .ml-auto</b-col>\\n        <b-col md=\\\"2\\\" class=\\\"ml-auto\\\">md=\\\"2\\\" .ml-auto</b-col>\\n      </b-row>\\n      <b-row class=\\\"mb-3\\\">\\n        <b-col md=\\\"6\\\" class=\\\"ml-auto\\\">md=\\\"6\\\" .ml-auto</b-col>\\n      </b-row>\\n      <b-row>\\n        <b-col sm=\\\"9\\\">\\n          Level 1: sm=\\\"9\\\"\\n          <b-row>\\n            <b-col cols=\\\"8\\\" sm=\\\"6\\\">Level 2: cols=\\\"8\\\" sm=\\\"6\\\"</b-col>\\n            <b-col cols=\\\"4\\\" sm=\\\"6\\\">Level 2: cols=\\\"4\\\" sm=\\\"6\\\"</b-col>\\n          </b-row>\\n        </b-col>\\n      </b-row>\\n    </b-container>\\n  </div>\\n</b-modal>\\n\")])])])])]),_c('b-button',{directives:[{name:\"b-modal\",rawName:\"v-b-modal.modal-9\",modifiers:{\"modal-9\":true}}],attrs:{\"variant\":\"primary\"}},[_vm._v(\"Launch demo modal\")]),_c('b-modal',{attrs:{\"id\":\"modal-9\",\"centered\":\"\",\"title\":\"Modal title\",\"ok-title\":\"Save Changes\",\"cancel-title\":\"Close\"}},[_c('div',{staticClass:\"iq-example-row\"},[_c('b-container',{attrs:{\"fluid\":\"\"}},[_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',{attrs:{\"md\":\"4\"}},[_vm._v(\" md=\\\"4\\\" \")]),_c('b-col',{attrs:{\"md\":\"4 ml-auto\"}},[_vm._v(\" md=\\\"4\\\" .ml-auto \")])],1),_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',{attrs:{\"md\":\"3 ml-auto\"}},[_vm._v(\"md=\\\"3\\\" .ml-auto\")]),_c('b-col',{attrs:{\"md\":\"2 ml-auto\"}},[_vm._v(\"md=\\\"2\\\" .ml-auto\")])],1),_c('b-row',{staticClass:\"mb-3\"},[_c('b-col',{attrs:{\"md\":\"6 ml-auto\"}},[_vm._v(\"md=\\\"6\\\" .ml-auto\")])],1),_c('b-row',[_c('b-col',{attrs:{\"sm\":\"9\"}},[_vm._v(\" Level 1: sm=\\\"9\\\" \"),_c('b-row',[_c('b-col',{attrs:{\"cols\":\"8\",\"sm\":\"6\"}},[_vm._v(\"Level 2: cols=\\\"8\\\" sm=\\\"6\\\"\")]),_c('b-col',{attrs:{\"cols\":\"4\",\"sm\":\"6\"}},[_vm._v(\"Level 2: cols=\\\"4\\\" sm=\\\"6\\\"\")])],1)],1)],1)],1)],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\">Modal components</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>Below is a <em>static</em> modal example (meaning its <code>position</code> and <code>display</code> have been overridden). Included are the modal header, modal body (required for <code>padding</code>), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.</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=\"modal-components-1\">\n                    <code>\n&lt;b-button v-b-modal.modal-1 variant=\"primary\"&gt;Launch demo modal&lt;/b-button&gt;\n&lt;b-modal id=\"modal-1\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  ...\n&lt;/b-modal&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-button v-b-modal.modal-1 variant=\"primary\">Launch demo modal</b-button>\n            <b-modal id=\"modal-1\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              ...\n            </b-modal>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Modal Scrolling</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>When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.</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=\"modal-scrolling\">\n                    <code>\n&lt;b-button v-b-modal.modal-2 variant=\"primary\"&gt;Launch demo modal&lt;/b-button&gt;\n&lt;b-modal id=\"modal-2\" scrollable title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n&lt;/b-modal&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-button v-b-modal.modal-2 variant=\"primary\">Launch demo modal</b-button>\n            <b-modal id=\"modal-2\" scrollable title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n            </b-modal>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Optional sizes</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>Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.</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=\"modal-components-2\">\n                    <code>\n&lt;b-button v-b-modal.modal-3 variant=\"primary\"&gt;Extra large modal&lt;/b-button&gt;\n&lt;b-button v-b-modal.modal-4 variant=\"primary\"&gt;Large modal&lt;/b-button&gt;\n&lt;b-button v-b-modal.modal-5 variant=\"primary\"&gt;Small modal&lt;/b-button&gt;\n\n&lt;b-modal id=\"modal-3\" size=\"xl\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  &lt;p&gt;Modal body text goes here.&lt;/p&gt;\n&lt;/b-modal&gt;\n\n&lt;b-modal id=\"modal-4\" size=\"lg\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  &lt;p&gt;Modal body text goes here.&lt;/p&gt;\n&lt;/b-modal&gt;\n\n&lt;b-modal id=\"modal-5\" size=\"sm\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  &lt;p&gt;Modal body text goes here.&lt;/p&gt;\n&lt;/b-modal&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-button v-b-modal.modal-3 variant=\"primary\" class=\"mr-1\">Extra large modal</b-button>\n            <b-button v-b-modal.modal-4 variant=\"primary\" class=\"mr-1\">Large modal</b-button>\n            <b-button v-b-modal.modal-5 variant=\"primary\" class=\"mr-1\">Small modal</b-button>\n            <b-modal id=\"modal-3\" size=\"xl\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              <p>Modal body text goes here.</p>\n            </b-modal>\n            <b-modal id=\"modal-4\" size=\"lg\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              <p>Modal body text goes here.</p>\n            </b-modal>\n            <b-modal id=\"modal-5\" size=\"sm\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              <p>Modal body text goes here.</p>\n            </b-modal>\n          </template>\n        </iq-card>\n      </b-col>\n      <b-col lg=\"6\" sm=\"12\">\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Scrolling long content</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>When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.</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=\"scroll-long-components\">\n                    <code>\n&lt;b-button v-b-modal.modal-6 variant=\"primary\"&gt;Launch demo modal&lt;/b-button&gt;\n&lt;b-modal id=\"modal-6\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n&lt;/b-modal&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-button v-b-modal.modal-6 variant=\"primary\">Launch demo modal</b-button>\n            <b-modal id=\"modal-6\" title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n            </b-modal>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Vertically centered</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>Add <code class=\"highlighter-rouge\">.modal-dialog-centered</code> to <code class=\"highlighter-rouge\">.modal-dialog</code> to vertically center the modal.</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=\"vertical-center\">\n                    <code>\n&lt;b-button v-b-modal.modal-7 variant=\"primary\"&gt;Launch demo modal&lt;/b-button&gt;\n&lt;b-button v-b-modal.modal-8 variant=\"primary\"&gt;Vertically centered scrollable modal&lt;/b-button&gt;\n&lt;b-modal id=\"modal-7\" centered title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  ...\n&lt;/b-modal&gt;\n&lt;b-modal id=\"modal-8\" centered title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n  &lt;p&gt;Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;\n  &lt;p&gt;Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.&lt;/p&gt;\n  &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.&lt;/p&gt;\n&lt;/b-modal&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-button v-b-modal.modal-7 variant=\"primary\" class=\"mr-1\">Launch demo modal</b-button>\n            <b-button v-b-modal.modal-8 variant=\"primary\" class=\"mr-1\">Vertically centered scrollable modal</b-button>\n            <b-modal id=\"modal-7\" centered title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              ...\n            </b-modal>\n            <b-modal id=\"modal-8\" centered title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>\n              <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>\n              <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>\n            </b-modal>\n          </template>\n        </iq-card>\n        <iq-card>\n          <template v-slot:headerTitle>\n            <h4 class=\"card-title\">Using the grid</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>Utilize the Bootstrap grid system within a modal by nesting <code>.container-fluid</code> within the <code>.modal-body</code>. Then, use the normal grid system classes as you would anywhere else.</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=\"using-grid\">\n                    <code>\n&lt;b-button v-b-modal.modal-9 variant=\"primary\"&gt;Launch demo modal&lt;/b-button&gt;\n&lt;b-modal id=\"modal-9\" centered title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\"&gt;\n  &lt;div class=\"iq-example-row\"&gt;\n    &lt;b-container fluid&gt;\n      &lt;b-row class=\"mb-3\"&gt;\n        &lt;b-col md=\"4\"&gt;\n          md=\"4\"\n        &lt;/b-col&gt;\n        &lt;b-col md=\"4\" class=\"ml-auto\"&gt;\n          md=\"4\" .ml-auto\n        &lt;/b-col&gt;\n      &lt;/b-row&gt;\n      &lt;b-row class=\"mb-3\"&gt;\n        &lt;b-col md=\"3\" class=\"ml-auto\"&gt;md=\"3\" .ml-auto&lt;/b-col&gt;\n        &lt;b-col md=\"2\" class=\"ml-auto\"&gt;md=\"2\" .ml-auto&lt;/b-col&gt;\n      &lt;/b-row&gt;\n      &lt;b-row class=\"mb-3\"&gt;\n        &lt;b-col md=\"6\" class=\"ml-auto\"&gt;md=\"6\" .ml-auto&lt;/b-col&gt;\n      &lt;/b-row&gt;\n      &lt;b-row&gt;\n        &lt;b-col sm=\"9\"&gt;\n          Level 1: sm=\"9\"\n          &lt;b-row&gt;\n            &lt;b-col cols=\"8\" sm=\"6\"&gt;Level 2: cols=\"8\" sm=\"6\"&lt;/b-col&gt;\n            &lt;b-col cols=\"4\" sm=\"6\"&gt;Level 2: cols=\"4\" sm=\"6\"&lt;/b-col&gt;\n          &lt;/b-row&gt;\n        &lt;/b-col&gt;\n      &lt;/b-row&gt;\n    &lt;/b-container&gt;\n  &lt;/div&gt;\n&lt;/b-modal&gt;\n</code></pre>\n                </kbd>\n              </div>\n            </b-collapse>\n            <b-button v-b-modal.modal-9 variant=\"primary\">Launch demo modal</b-button>\n            <b-modal id=\"modal-9\" centered title=\"Modal title\" ok-title=\"Save Changes\" cancel-title=\"Close\">\n              <div class=\"iq-example-row\">\n                <b-container fluid>\n                  <b-row class=\"mb-3\">\n                    <b-col md=\"4\">\n                      md=\"4\"\n                    </b-col>\n                    <b-col md=\"4 ml-auto\">\n                      md=\"4\" .ml-auto\n                    </b-col>\n                  </b-row>\n                  <b-row class=\"mb-3\">\n                    <b-col md=\"3 ml-auto\">md=\"3\" .ml-auto</b-col>\n                    <b-col md=\"2 ml-auto\">md=\"2\" .ml-auto</b-col>\n                  </b-row>\n                  <b-row class=\"mb-3\">\n                    <b-col md=\"6 ml-auto\">md=\"6\" .ml-auto</b-col>\n                  </b-row>\n                  <b-row>\n                    <b-col sm=\"9\">\n                      Level 1: sm=\"9\"\n                      <b-row>\n                        <b-col cols=\"8\" sm=\"6\">Level 2: cols=\"8\" sm=\"6\"</b-col>\n                        <b-col cols=\"4\" sm=\"6\">Level 2: cols=\"4\" sm=\"6\"</b-col>\n                      </b-row>\n                    </b-col>\n                  </b-row>\n                </b-container>\n              </div>\n            </b-modal>\n          </template>\n        </iq-card>\n      </b-col>\n    </b-row>\n  </b-container>\n</template>\n<script>\nimport { core } from '../../config/pluginInit'\n\nexport default {\n  name: 'UiModal',\n  mounted () {\n    core.index()\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!./UiModal.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!./UiModal.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UiModal.vue?vue&type=template&id=8473dbb8&\"\nimport script from \"./UiModal.vue?vue&type=script&lang=js&\"\nexport * from \"./UiModal.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":""}