{"version":3,"sources":["webpack:///./src/view/pages/vue-bootstrap/LayoutGridSystem.vue","webpack:///src/view/pages/vue-bootstrap/LayoutGridSystem.vue","webpack:///./src/view/pages/vue-bootstrap/LayoutGridSystem.vue?3bd0","webpack:///./src/view/pages/vue-bootstrap/LayoutGridSystem.vue?a910","webpack:///./src/view/content/CodePreview.vue","webpack:///./src/view/content/Card.vue","webpack:///src/view/content/Card.vue","webpack:///./src/view/content/Card.vue?8715","webpack:///./src/view/content/Card.vue?eb51","webpack:///src/view/content/CodePreview.vue","webpack:///./src/view/content/CodePreview.vue?e189","webpack:///./src/view/content/CodePreview.vue?e254","webpack:///./src/view/pages/vue-bootstrap/LayoutGridSystem.vue?e95a"],"names":["render","_vm","this","_c","_self","staticClass","attrs","_v","scopedSlots","_u","key","fn","proxy","_s","code1","html","code2","code3","code4","code5","code6","code7","staticRenderFns","data","components","KTCodePreview","mounted","$store","dispatch","SET_BREADCRUMB","title","route","component","ref","hasTitleSlot","_t","hasGeneralCode","hasSingleCodeType","_e","hasHtmlCode","on","setActiveTab","hasJsCode","hasScssCode","model","value","tabIndex","callback","$$v","expression","class","classes","headClass","bodyClass","bodyFit","bodyFluid","hasFootSlot","name","props","String","headSize","fluidHeight","Boolean","fluidHalfHeight","headOverlay","cardClass","example","methods","computed","cls","headSizeClass","$slots","concat","isOpen","KTCard","_this","$nextTick","KTLayoutExamples","init","$el","hljs","querySelectorAll","forEach","hl","classList","add","remove","event","tab","target","closest","links","i","length","parseInt","getAttribute","_this2","exist","type","hasOwnProperty"],"mappings":"yHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACA,EAAG,UAAU,CAACE,YAAY,iEAAiEC,MAAM,CAAC,KAAO,GAAG,QAAU,UAAU,CAACH,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,OAAO,CAACE,YAAY,wBAAwB,CAACF,EAAG,aAAa,CAACG,MAAM,CAAC,IAAM,wCAAwC,KAAKH,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,IAAI,CAACF,EAAIM,GAAG,4BAA4BN,EAAIM,GAAG,iSAAiSJ,EAAG,IAAI,CAACE,YAAY,mBAAmBC,MAAM,CAAC,KAAO,sDAAsD,OAAS,WAAW,CAACL,EAAIM,GAAG,8BAA8BJ,EAAG,MAAM,CAACE,YAAY,OAAO,CAACF,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,gBAAgB,CAACG,MAAM,CAAC,MAAQ,gBAAgBE,YAAYP,EAAIQ,GAAG,CAAC,CAACC,IAAI,UAAUC,GAAG,WAAW,MAAO,CAACR,EAAG,IAAI,CAACF,EAAIM,GAAG,yHAAyHJ,EAAG,IAAI,CAACG,MAAM,CAAC,KAAO,qGAAqG,OAAS,WAAW,CAACL,EAAIM,GAAG,aAAaN,EAAIM,GAAG,yGAAyGJ,EAAG,cAAc,CAACE,YAAY,kBAAkB,CAACF,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACF,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,aAAa,IAAI,KAAKK,OAAM,GAAM,CAACF,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACV,EAAIM,GAAG,IAAIN,EAAIY,GAAGZ,EAAIa,MAAMC,MAAM,OAAOH,OAAM,OAAUT,EAAG,gBAAgB,CAACG,MAAM,CAAC,MAAQ,uBAAuBE,YAAYP,EAAIQ,GAAG,CAAC,CAACC,IAAI,UAAUC,GAAG,WAAW,MAAO,CAACR,EAAG,IAAI,CAACF,EAAIM,GAAG,0FAA0FJ,EAAG,OAAO,CAACF,EAAIM,GAAG,QAAQN,EAAIM,GAAG,QAAQJ,EAAG,OAAO,CAACF,EAAIM,GAAG,QAAQN,EAAIM,GAAG,kHAAkHJ,EAAG,cAAc,CAACE,YAAY,kBAAkB,CAACF,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACF,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,aAAa,GAAGJ,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACF,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,aAAa,IAAI,KAAKK,OAAM,GAAM,CAACF,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACV,EAAIM,GAAG,IAAIN,EAAIY,GAAGZ,EAAIe,MAAMD,MAAM,OAAOH,OAAM,OAAUT,EAAG,gBAAgB,CAACG,MAAM,CAAC,MAAQ,4BAA4BE,YAAYP,EAAIQ,GAAG,CAAC,CAACC,IAAI,UAAUC,GAAG,WAAW,MAAO,CAACR,EAAG,IAAI,CAACF,EAAIM,GAAG,+TAA+TJ,EAAG,cAAc,CAACE,YAAY,kBAAkB,CAACF,EAAG,QAAQ,CAACE,YAAY,eAAe,CAACF,EAAG,QAAQ,CAACF,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,MAAM,CAACL,EAAIM,GAAG,oBAAoBJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,aAAa,GAAGJ,EAAG,QAAQ,CAACE,YAAY,eAAe,CAACF,EAAG,QAAQ,CAACF,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,MAAM,CAACL,EAAIM,GAAG,oBAAoBJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,aAAa,IAAI,KAAKK,OAAM,GAAM,CAACF,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACV,EAAIM,GAAG,IAAIN,EAAIY,GAAGZ,EAAIgB,MAAMF,MAAM,OAAOH,OAAM,OAAUT,EAAG,gBAAgB,CAACG,MAAM,CAAC,MAAQ,0BAA0BE,YAAYP,EAAIQ,GAAG,CAAC,CAACC,IAAI,UAAUC,GAAG,WAAW,MAAO,CAACR,EAAG,IAAI,CAACF,EAAIM,GAAG,SAASJ,EAAG,OAAO,CAACF,EAAIM,GAAG,yBAA2BN,EAAIM,GAAG,0EAA0EJ,EAAG,cAAc,CAACE,YAAY,kBAAkB,CAACF,EAAG,QAAQ,CAACE,YAAY,6BAA6B,CAACF,EAAG,QAAQ,CAACG,MAAM,CAAC,IAAM,GAAG,GAAK,MAAM,CAACL,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,KAAK,GAAK,SAAS,CAACL,EAAIM,GAAG,4BAA4BJ,EAAG,QAAQ,CAACG,MAAM,CAAC,IAAM,GAAG,GAAK,MAAM,CAACL,EAAIM,GAAG,aAAa,GAAGJ,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACF,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,KAAK,GAAK,SAAS,CAACL,EAAIM,GAAG,4BAA4BJ,EAAG,QAAQ,CAACG,MAAM,CAAC,IAAM,GAAG,GAAK,MAAM,CAACL,EAAIM,GAAG,aAAa,IAAI,KAAKK,OAAM,GAAM,CAACF,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACV,EAAIM,GAAG,IAAIN,EAAIY,GAAGZ,EAAIiB,MAAMH,MAAM,OAAOH,OAAM,QAAW,GAAGT,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,gBAAgB,CAACG,MAAM,CAAC,MAAQ,mBAAmBE,YAAYP,EAAIQ,GAAG,CAAC,CAACC,IAAI,UAAUC,GAAG,WAAW,MAAO,CAACR,EAAG,IAAI,CAACF,EAAIM,GAAG,sFAAsFJ,EAAG,OAAO,CAACF,EAAIM,GAAG,SAASN,EAAIM,GAAG,SAASJ,EAAG,OAAO,CAACF,EAAIM,GAAG,cAAgBN,EAAIM,GAAG,gCAAgCJ,EAAG,OAAO,CAACF,EAAIM,GAAG,UAAUN,EAAIM,GAAG,iFAAiFJ,EAAG,OAAO,CAACF,EAAIM,GAAG,SAASN,EAAIM,GAAG,2CAA2CJ,EAAG,OAAO,CAACF,EAAIM,GAAG,UAAUN,EAAIM,GAAG,uBAAuBJ,EAAG,cAAc,CAACE,YAAY,kBAAkB,CAACF,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACF,EAAIM,GAAG,SAASJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,SAASJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,SAASJ,EAAG,QAAQ,CAACF,EAAIM,GAAG,UAAU,GAAGJ,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,MAAM,CAACL,EAAIM,GAAG,WAAWJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,MAAM,CAACL,EAAIM,GAAG,YAAY,IAAI,KAAKK,OAAM,GAAM,CAACF,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACV,EAAIM,GAAG,IAAIN,EAAIY,GAAGZ,EAAIkB,MAAMJ,MAAM,OAAOH,OAAM,OAAUT,EAAG,gBAAgB,CAACG,MAAM,CAAC,MAAQ,yBAAyBE,YAAYP,EAAIQ,GAAG,CAAC,CAACC,IAAI,UAAUC,GAAG,WAAW,MAAO,CAACR,EAAG,IAAI,CAACF,EAAIM,GAAG,2BAA2BJ,EAAG,OAAO,CAACF,EAAIM,GAAG,YAAcN,EAAIM,GAAG,QAAQJ,EAAG,OAAO,CAACF,EAAIM,GAAG,QAAQN,EAAIM,GAAG,qLAAqLJ,EAAG,cAAc,CAACE,YAAY,kBAAkB,CAACF,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACG,MAAM,CAAC,GAAK,MAAM,CAACL,EAAIM,GAAG,cAAcJ,EAAG,QAAQ,CAACG,MAAM,CAAC,GAAK,MAAM,CAACL,EAAIM,GAAG,eAAe,GAAGJ,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACG,MAAM,CAAC,GAAK,KAAK,CAACL,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACG,MAAM,CAAC,GAAK,KAAK,CAACL,EAAIM,GAAG,YAAYJ,EAAG,QAAQ,CAACG,MAAM,CAAC,GAAK,KAAK,CAACL,EAAIM,GAAG,aAAa,IAAI,KAAKK,OAAM,GAAM,CAACF,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACV,EAAIM,GAAG,IAAIN,EAAIY,GAAGZ,EAAImB,MAAML,MAAM,OAAOH,OAAM,OAAUT,EAAG,gBAAgB,CAACG,MAAM,CAAC,MAAQ,iBAAiBE,YAAYP,EAAIQ,GAAG,CAAC,CAACC,IAAI,UAAUC,GAAG,WAAW,MAAO,CAACR,EAAG,IAAI,CAACF,EAAIM,GAAG,8LAA8LJ,EAAG,cAAc,CAACE,YAAY,kBAAkB,CAACF,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,KAAK,GAAK,MAAM,CAACL,EAAIM,GAAG,sBAA0BJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,IAAI,GAAK,MAAM,CAACL,EAAIM,GAAG,sBAA0B,GAAGJ,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,IAAI,GAAK,MAAM,CAACL,EAAIM,GAAG,qBAAyBJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,IAAI,GAAK,MAAM,CAACL,EAAIM,GAAG,qBAAyBJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,IAAI,GAAK,MAAM,CAACL,EAAIM,GAAG,sBAA0B,GAAGJ,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,MAAM,CAACL,EAAIM,GAAG,cAAgBJ,EAAG,QAAQ,CAACG,MAAM,CAAC,KAAO,MAAM,CAACL,EAAIM,GAAG,eAAiB,IAAI,KAAKK,OAAM,GAAM,CAACF,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACV,EAAIM,GAAG,IAAIN,EAAIY,GAAGZ,EAAIoB,MAAMN,MAAM,OAAOH,OAAM,QAAW,MAAM,IAEhjOU,EAAkB,G,wBCgPP,GACfC,KAAA,WACA,OACAT,MAAA,CACAC,KAAA,gKASAC,MAAA,CACAD,KAAA,+OAcAE,MAAA,CACAF,KAAA,oVAeAG,MAAA,CACAH,KAAA,qZAeAI,MAAA,CACAJ,KAAA,8QAeAK,MAAA,CACAL,KAAA,0QAcAM,MAAA,CACAN,KAAA,qtBAuBAS,WAAA,CACAC,sBAEAC,QAAA,WACA,KAAAC,OAAAC,SAAAC,OAAA,CACA,CAAAC,MAAA,gBAAAC,MAAA,SACA,CAAAD,MAAA,8BC3WuX,I,wBCQnXE,EAAY,eACd,EACAhC,EACAsB,GACA,EACA,KACA,WACA,MAIa,aAAAU,E,oECnBf,IAAIhC,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,SAAS,CAAC8B,IAAI,UAAU3B,MAAM,CAAC,MAAQL,EAAI6B,MAAM,SAAU,GAAMtB,YAAYP,EAAIQ,GAAG,CAAER,EAAIiC,aAAc,CAACxB,IAAI,QAAQC,GAAG,WAAW,MAAO,CAACR,EAAG,KAAK,CAACE,YAAY,cAAc,CAACJ,EAAIkC,GAAG,UAAU,KAAKvB,OAAM,GAAM,KAAK,CAACF,IAAI,OAAOC,GAAG,WAAW,MAAO,CAACR,EAAG,MAAM,CAACE,YAAY,qBAAqB,CAAGJ,EAAImC,gBAAmBnC,EAAIoC,kBAAg1BpC,EAAIqC,KAAj0BnC,EAAG,KAAK,CAACE,YAAY,mEAAmEC,MAAM,CAAC,KAAO,YAAY,CAAEL,EAAIsC,YAAapC,EAAG,KAAK,CAACE,YAAY,YAAY,CAACF,EAAG,IAAI,CAACE,YAAY,kBAAkBC,MAAM,CAAC,WAAW,IAAI,cAAc,MAAM,KAAO,IAAI,KAAO,MAAM,gBAAgB,QAAQkC,GAAG,CAAC,MAAQvC,EAAIwC,eAAe,CAACxC,EAAIM,GAAG,cAAcN,EAAIqC,KAAMrC,EAAIyC,UAAWvC,EAAG,KAAK,CAACE,YAAY,YAAY,CAACF,EAAG,IAAI,CAACE,YAAY,WAAWC,MAAM,CAAC,WAAW,IAAI,cAAc,MAAM,KAAO,IAAI,KAAO,MAAM,gBAAgB,SAASkC,GAAG,CAAC,MAAQvC,EAAIwC,eAAe,CAACxC,EAAIM,GAAG,cAAcN,EAAIqC,KAAMrC,EAAI0C,YAAaxC,EAAG,KAAK,CAACE,YAAY,YAAY,CAACF,EAAG,IAAI,CAACE,YAAY,WAAWC,MAAM,CAAC,WAAW,IAAI,cAAc,MAAM,KAAO,IAAI,KAAO,MAAM,gBAAgB,SAASkC,GAAG,CAAC,MAAQvC,EAAIwC,eAAe,CAACxC,EAAIM,GAAG,cAAcN,EAAIqC,OAAiBrC,EAAImC,eAAgBjC,EAAG,MAAM,CAACF,EAAIkC,GAAG,SAAS,GAAGlC,EAAIqC,KAAOrC,EAAImC,gBAAmBnC,EAAIoC,kBAAioBpC,EAAIqC,KAAlnBnC,EAAG,MAAM,CAACA,EAAG,SAAS,CAACE,YAAY,YAAYC,MAAM,CAAC,gBAAgB,QAAQsC,MAAM,CAACC,MAAO5C,EAAI6C,SAAUC,SAAS,SAAUC,GAAM/C,EAAI6C,SAASE,GAAKC,WAAW,aAAa,CAAC9C,EAAG,QAAQ,CAACE,YAAY,oBAAoBC,MAAM,CAAC,OAAS,KAAK,CAACH,EAAG,iBAAiB,CAACE,YAAY,gBAAgBC,MAAM,CAAC,KAAO,SAAS,CAACL,EAAIkC,GAAG,SAAS,IAAI,GAAGhC,EAAG,QAAQ,CAACE,YAAY,qBAAqB,CAACF,EAAG,iBAAiB,CAACE,YAAY,cAAcC,MAAM,CAAC,KAAO,OAAO,CAACL,EAAIkC,GAAG,OAAO,IAAI,GAAGhC,EAAG,QAAQ,CAACE,YAAY,qBAAqB,CAACF,EAAG,iBAAiB,CAACE,YAAY,gBAAgBC,MAAM,CAAC,KAAO,SAAS,CAACL,EAAIkC,GAAG,SAAS,IAAI,IAAI,IAAI,GAAalC,EAAIoC,kBAAmBlC,EAAG,MAAM,CAACE,YAAY,qBAAqB,CAAEJ,EAAIsC,YAAapC,EAAG,iBAAiB,CAACE,YAAY,gBAAgBC,MAAM,CAAC,KAAO,SAAS,CAACL,EAAIkC,GAAG,SAAS,GAAGlC,EAAIqC,KAAMrC,EAAIyC,UAAWvC,EAAG,iBAAiB,CAACE,YAAY,cAAcC,MAAM,CAAC,KAAO,OAAO,CAACL,EAAIkC,GAAG,OAAO,GAAGlC,EAAIqC,KAAMrC,EAAI0C,YAAaxC,EAAG,iBAAiB,CAACE,YAAY,gBAAgBC,MAAM,CAAC,KAAO,SAAS,CAACL,EAAIkC,GAAG,SAAS,GAAGlC,EAAIqC,MAAM,GAAGrC,EAAIqC,OAAOrC,EAAIkC,GAAG,aAAavB,OAAM,IAAO,MAAK,MAEp5EU,EAAkB,GCFlBtB,G,oBAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,4BAA4B6C,MAAMjD,EAAIkD,SAAS,CAAElD,EAAIiC,cAAgBjC,EAAI6B,MAAO3B,EAAG,MAAM,CAACE,YAAY,cAAc6C,MAAMjD,EAAImD,WAAW,CAACjD,EAAG,MAAM,CAACE,YAAY,cAAc,CAAEJ,EAAIiC,aAAcjC,EAAIkC,GAAG,SAASlC,EAAIqC,KAAOrC,EAAIiC,aAAsFjC,EAAIqC,KAA5EnC,EAAG,KAAK,CAACE,YAAY,cAAc,CAACJ,EAAIM,GAAG,IAAIN,EAAIY,GAAGZ,EAAI6B,OAAO,QAAiB,GAAG3B,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACJ,EAAIkC,GAAG,YAAY,KAAKlC,EAAIqC,KAAKnC,EAAG,MAAM,CAACE,YAAY,YAAY6C,MAAM,CACvgBG,UAAWpD,EAAIoD,UACf,WAAYpD,EAAIqD,QAChB,aAAcrD,EAAIsD,YACjB,CAACtD,EAAIkC,GAAG,SAAS,GAAIlC,EAAIuD,YAAarD,EAAG,MAAM,CAACE,YAAY,eAAe,CAACJ,EAAIkC,GAAG,SAAS,GAAGlC,EAAIqC,SAEtGhB,EAAkB,GC4BP,GACfmC,KAAA,SACAC,MAAA,CAIA5B,MAAA6B,OAIAC,SAAAD,OAIAE,YAAAC,QAIAC,gBAAAD,QAIAE,YAAAF,QAIAG,UAAAN,OAIAP,UAAAO,OAIAN,UAAAM,OAIAL,QAAAQ,QAIAP,UAAAO,QAIAI,QAAAJ,SAEAtC,WAAA,GACA2C,QAAA,GACAC,SAAA,CACAjB,QAAA,WACA,IAAAkB,EAAA,CACA,+BAAAH,QACA,oBAAAL,YACA,yBAAAE,gBACA,oBAAAC,aAUA,OAPAK,EAAA,KAAAC,eAAA,KAAAA,cAGA,KAAAL,YACAI,EAAA,KAAAJ,YAAA,GAGAI,GAEAnC,aAAA,WACA,aAAAqC,OAAA,UAEAf,YAAA,WACA,aAAAe,OAAA,SAEAD,cAAA,WACA,aAAAV,UACA,QAAAY,OAAA,KAAAZ,aC9G4V,I,YCOxV5B,EAAY,eACd,EACA,EACA,GACA,EACA,KACA,KACA,MAIa,EAAAA,E,oBCkGA,GACfyB,KAAA,gBACAC,MAAA,CACA5B,MAAA6B,QAEApC,KAAA,WACA,OACAuB,SAAA,EACA2B,QAAA,IAGAjD,WAAA,CACAkD,UAEAhD,QAAA,eAAAiD,EAAA,KAEA,KAAAC,WAAA,WACAC,OAAAC,KAAA,CAAAH,EAAAI,MACA,IAAAC,EAAAL,EAAAI,IAAAE,iBAAA,SACAD,EAAAE,SAAA,SAAAC,GACAA,EAAAC,UAAAC,IAAA,YAAAb,OAAAW,EAAAC,UAAA,KACAD,EAAAC,UAAAE,OAAA,eAIAnB,QAAA,CAKA1B,aAAA,SAAA8C,GAKA,IAHA,IAAAC,EAAAD,EAAAE,OAAAC,QAAA,oBACAC,EAAAH,EAAAP,iBAAA,uBAEAW,EAAA,EAAAA,EAAAD,EAAAE,OAAAD,IACAD,EAAAC,GAAAR,UAAAE,OAAA,UAIAC,EAAAE,OAAAL,UAAAC,IAAA,UAGA,KAAAvC,SAAAgD,SAAAP,EAAAE,OAAAM,aAAA,eAGA3B,SAAA,CAKAlC,aAAA,WACA,aAAAqC,OAAA,UAOAlC,kBAAA,eAAA2D,EAAA,KACAC,EAAA,EAMA,MALA,qBAAAf,SAAA,SAAAgB,GACAF,EAAAzB,OAAA4B,eAAAD,IACAD,OAGA,IAAAA,GAOA7D,eAAA,WACA,aAAAmC,OAAA,SAOA7B,UAAA,WACA,aAAA6B,OAAA,OAOA5B,YAAA,WACA,aAAA4B,OAAA,SAOAhC,YAAA,WACA,aAAAgC,OAAA,WCtNmW,ICO/V,EAAY,eACd,EACAvE,EACAsB,GACA,EACA,KACA,KACA,MAIa,S,2CClBf","file":"js/chunk-6a75c241.6d1184eb.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('b-alert',{staticClass:\"alert alert-custom alert-white alert-shadow fade show gutter-b\",attrs:{\"show\":\"\",\"variant\":\"light\"}},[_c('div',{staticClass:\"alert-icon\"},[_c('span',{staticClass:\"svg-icon svg-icon-lg\"},[_c('inline-svg',{attrs:{\"src\":\"media/svg/icons/Tools/Compass.svg\"}})],1)]),_c('div',{staticClass:\"alert-text\"},[_c('b',[_vm._v(\"Layout and Grid System\")]),_vm._v(\" Use the powerful mobile-first flexbox grid (via the <b-container>, <b-row>, <b-form-row> and <b-col> components) to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, CSS Sass variables and mixins, and dozens of predefined classes. \"),_c('a',{staticClass:\"font-weight-bold\",attrs:{\"href\":\"https://bootstrap-vue.js.org/docs/components/layout\",\"target\":\"_blank\"}},[_vm._v(\" See documentation. \")])])]),_c('div',{staticClass:\"row\"},[_c('div',{staticClass:\"col-md-6\"},[_c('KTCodePreview',{attrs:{\"title\":'How it works'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with \"),_c('a',{attrs:{\"href\":\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\",\"target\":\"_blank\"}},[_vm._v(\"flexbox\")]),_vm._v(\" and is fully responsive. Below is an example and an in-depth look at how the grid comes together. \")]),_c('b-container',{staticClass:\"bv-example-row\"},[_c('b-row',[_c('b-col',[_vm._v(\"1 of 3\")]),_c('b-col',[_vm._v(\"2 of 3\")]),_c('b-col',[_vm._v(\"3 of 3\")])],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code1.html)+\" \")]},proxy:true}])}),_c('KTCodePreview',{attrs:{\"title\":'Equal-width columns'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" For example, here are two grid layouts that apply to every device and viewport, from \"),_c('code',[_vm._v(\"xs\")]),_vm._v(\" to \"),_c('code',[_vm._v(\"xl\")]),_vm._v(\". Add any number of unit-less classes for each breakpoint you need and every column will be the same width. \")]),_c('b-container',{staticClass:\"bv-example-row\"},[_c('b-row',[_c('b-col',[_vm._v(\"1 of 2\")]),_c('b-col',[_vm._v(\"2 of 2\")])],1),_c('b-row',[_c('b-col',[_vm._v(\"1 of 3\")]),_c('b-col',[_vm._v(\"2 of 3\")]),_c('b-col',[_vm._v(\"3 of 3\")])],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code2.html)+\" \")]},proxy:true}])}),_c('KTCodePreview',{attrs:{\"title\":'Setting one column width'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. \")]),_c('b-container',{staticClass:\"bv-example-row\"},[_c('b-row',{staticClass:\"text-center\"},[_c('b-col',[_vm._v(\"1 of 3\")]),_c('b-col',{attrs:{\"cols\":\"8\"}},[_vm._v(\"2 of 3 (wider)\")]),_c('b-col',[_vm._v(\"3 of 3\")])],1),_c('b-row',{staticClass:\"text-center\"},[_c('b-col',[_vm._v(\"1 of 3\")]),_c('b-col',{attrs:{\"cols\":\"5\"}},[_vm._v(\"2 of 3 (wider)\")]),_c('b-col',[_vm._v(\"3 of 3\")])],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code3.html)+\" \")]},proxy:true}])}),_c('KTCodePreview',{attrs:{\"title\":'Variable width content'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Use \"),_c('code',[_vm._v(\"{breakpoint}=\\\"auto\\\"\")]),_vm._v(\" props to size columns based on the natural width of their content. \")]),_c('b-container',{staticClass:\"bv-example-row\"},[_c('b-row',{staticClass:\"justify-content-md-center\"},[_c('b-col',{attrs:{\"col\":\"\",\"lg\":\"2\"}},[_vm._v(\"1 of 3\")]),_c('b-col',{attrs:{\"cols\":\"12\",\"md\":\"auto\"}},[_vm._v(\"Variable width content\")]),_c('b-col',{attrs:{\"col\":\"\",\"lg\":\"2\"}},[_vm._v(\"3 of 3\")])],1),_c('b-row',[_c('b-col',[_vm._v(\"1 of 3\")]),_c('b-col',{attrs:{\"cols\":\"12\",\"md\":\"auto\"}},[_vm._v(\"Variable width content\")]),_c('b-col',{attrs:{\"col\":\"\",\"lg\":\"2\"}},[_vm._v(\"3 of 3\")])],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code4.html)+\" \")]},proxy:true}])})],1),_c('div',{staticClass:\"col-md-6\"},[_c('KTCodePreview',{attrs:{\"title\":'All breakpoints'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" For grids that are the same from the smallest of devices to the largest, use the \"),_c('code',[_vm._v(\"col\")]),_vm._v(\" and \"),_c('code',[_vm._v(\"cols=\\\"*\\\"\")]),_vm._v(\" props. Specify a number of \"),_c('code',[_vm._v(\"cols\")]),_vm._v(\" when you need a particularly sized column; otherwise, feel free to stick to \"),_c('code',[_vm._v(\"col\")]),_vm._v(\" (which is applied automatically if no \"),_c('code',[_vm._v(\"cols\")]),_vm._v(\" are specified). \")]),_c('b-container',{staticClass:\"bv-example-row\"},[_c('b-row',[_c('b-col',[_vm._v(\"col\")]),_c('b-col',[_vm._v(\"col\")]),_c('b-col',[_vm._v(\"col\")]),_c('b-col',[_vm._v(\"col\")])],1),_c('b-row',[_c('b-col',{attrs:{\"cols\":\"8\"}},[_vm._v(\"col-8\")]),_c('b-col',{attrs:{\"cols\":\"4\"}},[_vm._v(\"col-4\")])],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code5.html)+\" \")]},proxy:true}])}),_c('KTCodePreview',{attrs:{\"title\":'Stacked to horizontal'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Using a single set of \"),_c('code',[_vm._v(\"sm=\\\"*\\\"\")]),_vm._v(\" or \"),_c('code',[_vm._v(\"sm\")]),_vm._v(\" (boolean for equal width @sm) props, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices \")]),_c('b-container',{staticClass:\"bv-example-row\"},[_c('b-row',[_c('b-col',{attrs:{\"sm\":\"8\"}},[_vm._v(\"col-sm-8\")]),_c('b-col',{attrs:{\"sm\":\"4\"}},[_vm._v(\"col-sm-4\")])],1),_c('b-row',[_c('b-col',{attrs:{\"sm\":\"\"}},[_vm._v(\"col-sm\")]),_c('b-col',{attrs:{\"sm\":\"\"}},[_vm._v(\"col-sm\")]),_c('b-col',{attrs:{\"sm\":\"\"}},[_vm._v(\"col-sm\")])],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code6.html)+\" \")]},proxy:true}])}),_c('KTCodePreview',{attrs:{\"title\":'Mix and match'},scopedSlots:_vm._u([{key:\"preview\",fn:function(){return [_c('p',[_vm._v(\" Don't want your columns to simply stack in some grid tiers? Use a combination of different props for each tier as needed. See the example below for a better idea of how it all works. \")]),_c('b-container',{staticClass:\"bv-example-row\"},[_c('b-row',[_c('b-col',{attrs:{\"cols\":\"12\",\"md\":\"8\"}},[_vm._v(\"cols=\\\"12\\\" md=\\\"8\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\"cols=\\\"6\\\" md=\\\"4\\\"\")])],1),_c('b-row',[_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\"cols=\\\"6\\\" md=\\\"4\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\"cols=\\\"6\\\" md=\\\"4\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\",\"md\":\"4\"}},[_vm._v(\"cols=\\\"6\\\" md=\\\"4\\\"\")])],1),_c('b-row',[_c('b-col',{attrs:{\"cols\":\"6\"}},[_vm._v(\"cols=\\\"6\\\"\")]),_c('b-col',{attrs:{\"cols\":\"6\"}},[_vm._v(\"cols=\\\"6\\\"\")])],1)],1)]},proxy:true},{key:\"html\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.code7.html)+\" \")]},proxy:true}])})],1)])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <b-alert\r\n      show\r\n      variant=\"light\"\r\n      class=\"alert alert-custom alert-white alert-shadow fade show gutter-b\"\r\n    >\r\n      <div class=\"alert-icon\">\r\n        <span class=\"svg-icon svg-icon-lg\">\r\n          <inline-svg src=\"media/svg/icons/Tools/Compass.svg\" />\r\n        </span>\r\n      </div>\r\n      <div class=\"alert-text\">\r\n        <b>Layout and Grid System</b> Use the powerful mobile-first flexbox grid\r\n        (via the &lt;b-container&gt;, &lt;b-row&gt;, &lt;b-form-row&gt; and\r\n        &lt;b-col&gt; components) to build layouts of all shapes and sizes\r\n        thanks to a twelve column system, five default responsive tiers, CSS\r\n        Sass variables and mixins, and dozens of predefined classes.\r\n        <a\r\n          class=\"font-weight-bold\"\r\n          href=\"https://bootstrap-vue.js.org/docs/components/layout\"\r\n          target=\"_blank\"\r\n        >\r\n          See documentation.\r\n        </a>\r\n      </div>\r\n    </b-alert>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"col-md-6\">\r\n        <KTCodePreview v-bind:title=\"'How it works'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Bootstrap's grid system uses a series of containers, rows, and\r\n              columns to layout and align content. It's built with\r\n              <a\r\n                href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox\"\r\n                target=\"_blank\"\r\n                >flexbox</a\r\n              >\r\n              and is fully responsive. Below is an example and an in-depth look\r\n              at how the grid comes together.\r\n            </p>\r\n            <b-container class=\"bv-example-row\">\r\n              <b-row>\r\n                <b-col>1 of 3</b-col>\r\n                <b-col>2 of 3</b-col>\r\n                <b-col>3 of 3</b-col>\r\n              </b-row>\r\n            </b-container>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code1.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n\r\n        <KTCodePreview v-bind:title=\"'Equal-width columns'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              For example, here are two grid layouts that apply to every device\r\n              and viewport, from <code>xs</code> to <code>xl</code>. Add any\r\n              number of unit-less classes for each breakpoint you need and every\r\n              column will be the same width.\r\n            </p>\r\n            <b-container class=\"bv-example-row\">\r\n              <b-row>\r\n                <b-col>1 of 2</b-col>\r\n                <b-col>2 of 2</b-col>\r\n              </b-row>\r\n\r\n              <b-row>\r\n                <b-col>1 of 3</b-col>\r\n                <b-col>2 of 3</b-col>\r\n                <b-col>3 of 3</b-col>\r\n              </b-row>\r\n            </b-container>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code2.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n\r\n        <KTCodePreview v-bind:title=\"'Setting one column width'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Auto-layout for flexbox grid columns also means you can set the\r\n              width of one column and have the sibling columns automatically\r\n              resize around it. You may use predefined grid classes (as shown\r\n              below), grid mixins, or inline widths. Note that the other columns\r\n              will resize no matter the width of the center column.\r\n            </p>\r\n            <b-container class=\"bv-example-row\">\r\n              <b-row class=\"text-center\">\r\n                <b-col>1 of 3</b-col>\r\n                <b-col cols=\"8\">2 of 3 (wider)</b-col>\r\n                <b-col>3 of 3</b-col>\r\n              </b-row>\r\n\r\n              <b-row class=\"text-center\">\r\n                <b-col>1 of 3</b-col>\r\n                <b-col cols=\"5\">2 of 3 (wider)</b-col>\r\n                <b-col>3 of 3</b-col>\r\n              </b-row>\r\n            </b-container>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code3.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n\r\n        <KTCodePreview v-bind:title=\"'Variable width content'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Use <code>{breakpoint}=\"auto\"</code> props to size columns based\r\n              on the natural width of their content.\r\n            </p>\r\n            <b-container class=\"bv-example-row\">\r\n              <b-row class=\"justify-content-md-center\">\r\n                <b-col col lg=\"2\">1 of 3</b-col>\r\n                <b-col cols=\"12\" md=\"auto\">Variable width content</b-col>\r\n                <b-col col lg=\"2\">3 of 3</b-col>\r\n              </b-row>\r\n\r\n              <b-row>\r\n                <b-col>1 of 3</b-col>\r\n                <b-col cols=\"12\" md=\"auto\">Variable width content</b-col>\r\n                <b-col col lg=\"2\">3 of 3</b-col>\r\n              </b-row>\r\n            </b-container>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code4.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n      </div>\r\n      <div class=\"col-md-6\">\r\n        <KTCodePreview v-bind:title=\"'All breakpoints'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              For grids that are the same from the smallest of devices to the\r\n              largest, use the <code>col</code> and <code>cols=\"*\"</code> props.\r\n              Specify a number of <code>cols</code> when you need a particularly\r\n              sized column; otherwise, feel free to stick to\r\n              <code>col</code> (which is applied automatically if no\r\n              <code>cols</code> are specified).\r\n            </p>\r\n            <b-container class=\"bv-example-row\">\r\n              <b-row>\r\n                <b-col>col</b-col>\r\n                <b-col>col</b-col>\r\n                <b-col>col</b-col>\r\n                <b-col>col</b-col>\r\n              </b-row>\r\n\r\n              <b-row>\r\n                <b-col cols=\"8\">col-8</b-col>\r\n                <b-col cols=\"4\">col-4</b-col>\r\n              </b-row>\r\n            </b-container>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code5.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n\r\n        <KTCodePreview v-bind:title=\"'Stacked to horizontal'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Using a single set of <code>sm=\"*\"</code> or\r\n              <code>sm</code> (boolean for equal width @sm) props, you can\r\n              create a basic grid system that starts out stacked on extra small\r\n              devices before becoming horizontal on desktop (medium) devices\r\n            </p>\r\n            <b-container class=\"bv-example-row\">\r\n              <b-row>\r\n                <b-col sm=\"8\">col-sm-8</b-col>\r\n                <b-col sm=\"4\">col-sm-4</b-col>\r\n              </b-row>\r\n\r\n              <b-row>\r\n                <b-col sm>col-sm</b-col>\r\n                <b-col sm>col-sm</b-col>\r\n                <b-col sm>col-sm</b-col>\r\n              </b-row>\r\n            </b-container>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code6.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n\r\n        <KTCodePreview v-bind:title=\"'Mix and match'\">\r\n          <template v-slot:preview>\r\n            <p>\r\n              Don't want your columns to simply stack in some grid tiers? Use a\r\n              combination of different props for each tier as needed. See the\r\n              example below for a better idea of how it all works.\r\n            </p>\r\n            <b-container class=\"bv-example-row\">\r\n              <!-- Stack the columns on mobile by making one full-width and the other half-width -->\r\n              <b-row>\r\n                <b-col cols=\"12\" md=\"8\">cols=\"12\" md=\"8\"</b-col>\r\n                <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\r\n              </b-row>\r\n\r\n              <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->\r\n              <b-row>\r\n                <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\r\n                <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\r\n                <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\r\n              </b-row>\r\n\r\n              <!-- Columns are always 50% wide, on mobile and desktop -->\r\n              <b-row>\r\n                <b-col cols=\"6\">cols=\"6\"</b-col>\r\n                <b-col cols=\"6\">cols=\"6\"</b-col>\r\n              </b-row>\r\n            </b-container>\r\n          </template>\r\n          <template v-slot:html>\r\n            {{ code7.html }}\r\n          </template>\r\n        </KTCodePreview>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.bv-example-row .row > .col:not(.header),\r\n.bv-example-row .row > [class^=\"col-\"] {\r\n  padding-top: 0.75rem;\r\n  padding-bottom: 0.75rem;\r\n  background-color: rgba(86, 61, 124, 0.15);\r\n  border: 1px solid rgba(86, 61, 124, 0.2);\r\n}\r\n</style>\r\n\r\n<script>\r\nimport KTCodePreview from \"@/view/content/CodePreview.vue\";\r\nimport { SET_BREADCRUMB } from \"@/core/services/store/breadcrumbs.module\";\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      code1: {\r\n        html: `<b-container class=\"bv-example-row\">\r\n  <b-row>\r\n    <b-col>1 of 3</b-col>\r\n    <b-col>2 of 3</b-col>\r\n    <b-col>3 of 3</b-col>\r\n  </b-row>\r\n</b-container>`\r\n      },\r\n\r\n      code2: {\r\n        html: `<b-container class=\"bv-example-row\">\r\n  <b-row>\r\n    <b-col>1 of 2</b-col>\r\n    <b-col>2 of 2</b-col>\r\n  </b-row>\r\n\r\n  <b-row>\r\n    <b-col>1 of 3</b-col>\r\n    <b-col>2 of 3</b-col>\r\n    <b-col>3 of 3</b-col>\r\n  </b-row>\r\n</b-container>`\r\n      },\r\n\r\n      code3: {\r\n        html: `<b-container class=\"bv-example-row\">\r\n  <b-row class=\"text-center\">\r\n    <b-col>1 of 3</b-col>\r\n    <b-col cols=\"8\">2 of 3 (wider)</b-col>\r\n    <b-col>3 of 3</b-col>\r\n  </b-row>\r\n\r\n  <b-row class=\"text-center\">\r\n    <b-col>1 of 3</b-col>\r\n    <b-col cols=\"5\">2 of 3 (wider)</b-col>\r\n    <b-col>3 of 3</b-col>\r\n  </b-row>\r\n</b-container>`\r\n      },\r\n\r\n      code4: {\r\n        html: `<b-container class=\"bv-example-row\">\r\n  <b-row class=\"justify-content-md-center\">\r\n    <b-col col lg=\"2\">1 of 3</b-col>\r\n    <b-col cols=\"12\" md=\"auto\">Variable width content</b-col>\r\n    <b-col col lg=\"2\">3 of 3</b-col>\r\n  </b-row>\r\n\r\n  <b-row>\r\n    <b-col>1 of 3</b-col>\r\n    <b-col cols=\"12\" md=\"auto\">Variable width content</b-col>\r\n    <b-col col lg=\"2\">3 of 3</b-col>\r\n  </b-row>\r\n</b-container>`\r\n      },\r\n\r\n      code5: {\r\n        html: `<b-container class=\"bv-example-row\">\r\n  <b-row>\r\n    <b-col>col</b-col>\r\n    <b-col>col</b-col>\r\n    <b-col>col</b-col>\r\n    <b-col>col</b-col>\r\n  </b-row>\r\n\r\n  <b-row>\r\n    <b-col cols=\"8\">col-8</b-col>\r\n    <b-col cols=\"4\">col-4</b-col>\r\n  </b-row>\r\n</b-container>`\r\n      },\r\n\r\n      code6: {\r\n        html: `<b-container class=\"bv-example-row\">\r\n  <b-row>\r\n    <b-col sm=\"8\">col-sm-8</b-col>\r\n    <b-col sm=\"4\">col-sm-4</b-col>\r\n  </b-row>\r\n\r\n  <b-row>\r\n    <b-col sm>col-sm</b-col>\r\n    <b-col sm>col-sm</b-col>\r\n    <b-col sm>col-sm</b-col>\r\n  </b-row>\r\n</b-container>`\r\n      },\r\n\r\n      code7: {\r\n        html: `<b-container class=\"bv-example-row\">\r\n  <!-- Stack the columns on mobile by making one full-width and the other half-width -->\r\n  <b-row>\r\n    <b-col cols=\"12\" md=\"8\">cols=\"12\" md=\"8\"</b-col>\r\n    <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\r\n  </b-row>\r\n\r\n  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->\r\n  <b-row>\r\n    <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\r\n    <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\r\n    <b-col cols=\"6\" md=\"4\">cols=\"6\" md=\"4\"</b-col>\r\n  </b-row>\r\n\r\n  <!-- Columns are always 50% wide, on mobile and desktop -->\r\n  <b-row>\r\n    <b-col cols=\"6\">cols=\"6\"</b-col>\r\n    <b-col cols=\"6\">cols=\"6\"</b-col>\r\n  </b-row>\r\n</b-container>`\r\n      }\r\n    };\r\n  },\r\n  components: {\r\n    KTCodePreview\r\n  },\r\n  mounted() {\r\n    this.$store.dispatch(SET_BREADCRUMB, [\r\n      { title: \"Vue Bootstrap\", route: \"alert\" },\r\n      { title: \"Layout and Grid System\" }\r\n    ]);\r\n  }\r\n};\r\n</script>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LayoutGridSystem.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!./LayoutGridSystem.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./LayoutGridSystem.vue?vue&type=template&id=afdc2df6&scoped=true\"\nimport script from \"./LayoutGridSystem.vue?vue&type=script&lang=js\"\nexport * from \"./LayoutGridSystem.vue?vue&type=script&lang=js\"\nimport style0 from \"./LayoutGridSystem.vue?vue&type=style&index=0&id=afdc2df6&prod&lang=scss&scoped=true\"\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  \"afdc2df6\",\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('KTCard',{ref:\"preview\",attrs:{\"title\":_vm.title,\"example\":true},scopedSlots:_vm._u([(_vm.hasTitleSlot)?{key:\"title\",fn:function(){return [_c('h3',{staticClass:\"card-title\"},[_vm._t(\"title\")],2)]},proxy:true}:null,{key:\"body\",fn:function(){return [_c('div',{staticClass:\"example-code mb-5\"},[(!_vm.hasGeneralCode && !_vm.hasSingleCodeType)?_c('ul',{staticClass:\"example-nav nav nav-tabs nav-bold nav-tabs-line nav-tabs-line-2x\",attrs:{\"role\":\"tablist\"}},[(_vm.hasHtmlCode)?_c('li',{staticClass:\"nav-item\"},[_c('a',{staticClass:\"nav-link active\",attrs:{\"data-tab\":\"0\",\"data-toggle\":\"tab\",\"href\":\"#\",\"role\":\"tab\",\"aria-selected\":\"true\"},on:{\"click\":_vm.setActiveTab}},[_vm._v(\" HTML \")])]):_vm._e(),(_vm.hasJsCode)?_c('li',{staticClass:\"nav-item\"},[_c('a',{staticClass:\"nav-link\",attrs:{\"data-tab\":\"1\",\"data-toggle\":\"tab\",\"href\":\"#\",\"role\":\"tab\",\"aria-selected\":\"false\"},on:{\"click\":_vm.setActiveTab}},[_vm._v(\"  JS  \")])]):_vm._e(),(_vm.hasScssCode)?_c('li',{staticClass:\"nav-item\"},[_c('a',{staticClass:\"nav-link\",attrs:{\"data-tab\":\"2\",\"data-toggle\":\"tab\",\"href\":\"#\",\"role\":\"tab\",\"aria-selected\":\"false\"},on:{\"click\":_vm.setActiveTab}},[_vm._v(\" SCSS \")])]):_vm._e()]):_vm._e(),(_vm.hasGeneralCode)?_c('div',[_vm._t(\"code\")],2):_vm._e(),(!_vm.hasGeneralCode && !_vm.hasSingleCodeType)?_c('div',[_c('b-tabs',{staticClass:\"hide-tabs\",attrs:{\"content-class\":\"mt-3\"},model:{value:(_vm.tabIndex),callback:function ($$v) {_vm.tabIndex=$$v},expression:\"tabIndex\"}},[_c('b-tab',{staticClass:\"example-highlight\",attrs:{\"active\":\"\"}},[_c('highlight-code',{staticClass:\"language-html\",attrs:{\"lang\":\"html\"}},[_vm._t(\"html\")],2)],1),_c('b-tab',{staticClass:\"example-highlight\"},[_c('highlight-code',{staticClass:\"language-js\",attrs:{\"lang\":\"js\"}},[_vm._t(\"js\")],2)],1),_c('b-tab',{staticClass:\"example-highlight\"},[_c('highlight-code',{staticClass:\"language-scss\",attrs:{\"lang\":\"scss\"}},[_vm._t(\"scss\")],2)],1)],1)],1):_vm._e(),(_vm.hasSingleCodeType)?_c('div',{staticClass:\"example-highlight\"},[(_vm.hasHtmlCode)?_c('highlight-code',{staticClass:\"language-html\",attrs:{\"lang\":\"html\"}},[_vm._t(\"html\")],2):_vm._e(),(_vm.hasJsCode)?_c('highlight-code',{staticClass:\"language-js\",attrs:{\"lang\":\"js\"}},[_vm._t(\"js\")],2):_vm._e(),(_vm.hasScssCode)?_c('highlight-code',{staticClass:\"language-scss\",attrs:{\"lang\":\"scss\"}},[_vm._t(\"scss\")],2):_vm._e()],1):_vm._e()]),_vm._t(\"preview\")]},proxy:true}],null,true)})\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"card card-custom gutter-b\",class:_vm.classes},[(_vm.hasTitleSlot || _vm.title)?_c('div',{staticClass:\"card-header\",class:_vm.headClass},[_c('div',{staticClass:\"card-title\"},[(_vm.hasTitleSlot)?_vm._t(\"title\"):_vm._e(),(!_vm.hasTitleSlot)?_c('h3',{staticClass:\"card-label\"},[_vm._v(\" \"+_vm._s(_vm.title)+\" \")]):_vm._e()],2),_c('div',{staticClass:\"card-toolbar\"},[_vm._t(\"toolbar\")],2)]):_vm._e(),_c('div',{staticClass:\"card-body\",class:{\n      bodyClass: _vm.bodyClass,\n      'body-fit': _vm.bodyFit,\n      'body-fluid': _vm.bodyFluid\n    }},[_vm._t(\"body\")],2),(_vm.hasFootSlot)?_c('div',{staticClass:\"card-footer\"},[_vm._t(\"foot\")],2):_vm._e()])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"card card-custom gutter-b\" v-bind:class=\"classes\">\r\n    <div\r\n      class=\"card-header\"\r\n      v-bind:class=\"headClass\"\r\n      v-if=\"hasTitleSlot || title\"\r\n    >\r\n      <div class=\"card-title\">\r\n        <slot name=\"title\" v-if=\"hasTitleSlot\"></slot>\r\n        <h3 class=\"card-label\" v-if=\"!hasTitleSlot\">\r\n          {{ title }}\r\n        </h3>\r\n      </div>\r\n      <div class=\"card-toolbar\">\r\n        <slot name=\"toolbar\"></slot>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"card-body\"\r\n      v-bind:class=\"{\r\n        bodyClass,\r\n        'body-fit': bodyFit,\r\n        'body-fluid': bodyFluid\r\n      }\"\r\n    >\r\n      <slot name=\"body\"></slot>\r\n    </div>\r\n    <div class=\"card-footer\" v-if=\"hasFootSlot\">\r\n      <slot name=\"foot\"></slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: \"KTCard\",\r\n  props: {\r\n    /**\r\n     * String title\r\n     */\r\n    title: String,\r\n    /**\r\n     * Set card head size. Eg. md, lg, sm, etc.\r\n     */\r\n    headSize: String,\r\n    /**\r\n     * Set card to fluid\r\n     */\r\n    fluidHeight: Boolean,\r\n    /**\r\n     * Set card to fluid in half\r\n     */\r\n    fluidHalfHeight: Boolean,\r\n    /**\r\n     * Set overlay head\r\n     */\r\n    headOverlay: Boolean,\r\n    /**\r\n     * Set extra class for main card\r\n     */\r\n    cardClass: String,\r\n    /**\r\n     * Set extra class for card head\r\n     */\r\n    headClass: String,\r\n    /**\r\n     * Set extra class for card body\r\n     */\r\n    bodyClass: String,\r\n    /**\r\n     * Set card body to fit\r\n     */\r\n    bodyFit: Boolean,\r\n    /**\r\n     * Set card body to fluid\r\n     */\r\n    bodyFluid: Boolean,\r\n    /**\r\n     * Code examples\r\n     */\r\n    example: Boolean\r\n  },\r\n  components: {},\r\n  methods: {},\r\n  computed: {\r\n    classes() {\r\n      const cls = {\r\n        \"example example-compact\": this.example,\r\n        \"height-fluid\": this.fluidHeight,\r\n        \"height-fluid-half\": this.fluidHalfHeight,\r\n        \"head-overlay\": this.headOverlay\r\n      };\r\n\r\n      cls[this.headSizeClass] = this.headSizeClass;\r\n\r\n      // append extra classes\r\n      if (this.cardClass) {\r\n        cls[this.cardClass] = true;\r\n      }\r\n\r\n      return cls;\r\n    },\r\n    hasTitleSlot() {\r\n      return !!this.$slots[\"title\"];\r\n    },\r\n    hasFootSlot() {\r\n      return !!this.$slots[\"foot\"];\r\n    },\r\n    headSizeClass() {\r\n      if (this.headSize) {\r\n        return `head-${this.headSize}`;\r\n      }\r\n      return false;\r\n    }\r\n  }\r\n};\r\n</script>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Card.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Card.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Card.vue?vue&type=template&id=1c9f0e48\"\nimport script from \"./Card.vue?vue&type=script&lang=js\"\nexport * from \"./Card.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\r\n  <KTCard ref=\"preview\" v-bind:title=\"title\" v-bind:example=\"true\">\r\n    <template v-slot:title v-if=\"hasTitleSlot\">\r\n      <h3 class=\"card-title\">\r\n        <slot name=\"title\"></slot>\r\n      </h3>\r\n    </template>\r\n    <!-- <template v-slot:toolbar>\r\n      <div class=\"example-tools justify-content-center\">\r\n        <span\r\n          class=\"example-toggle\"\r\n          data-toggle=\"tooltip\"\r\n          v-b-tooltip.hover.top=\"'View code'\"\r\n        />\r\n        <span\r\n          class=\"example-copy\"\r\n          data-toggle=\"tooltip\"\r\n          v-b-tooltip.hover.top=\"'Copy code'\"\r\n        />\r\n      </div>\r\n    </template> -->\r\n    <template v-slot:body>\r\n      <!--begin::Code example-->\r\n      <div class=\"example-code mb-5\">\r\n        <ul\r\n          class=\"example-nav nav nav-tabs nav-bold nav-tabs-line nav-tabs-line-2x\"\r\n          role=\"tablist\"\r\n          v-if=\"!hasGeneralCode && !hasSingleCodeType\"\r\n        >\r\n          <li class=\"nav-item\" v-if=\"hasHtmlCode\">\r\n            <a\r\n              class=\"nav-link active\"\r\n              v-on:click=\"setActiveTab\"\r\n              data-tab=\"0\"\r\n              data-toggle=\"tab\"\r\n              href=\"#\"\r\n              role=\"tab\"\r\n              aria-selected=\"true\"\r\n            >\r\n              HTML\r\n            </a>\r\n          </li>\r\n          <li class=\"nav-item\" v-if=\"hasJsCode\">\r\n            <a\r\n              class=\"nav-link\"\r\n              v-on:click=\"setActiveTab\"\r\n              data-tab=\"1\"\r\n              data-toggle=\"tab\"\r\n              href=\"#\"\r\n              role=\"tab\"\r\n              aria-selected=\"false\"\r\n            >\r\n              &nbsp;JS&nbsp;\r\n            </a>\r\n          </li>\r\n          <li class=\"nav-item\" v-if=\"hasScssCode\">\r\n            <a\r\n              class=\"nav-link\"\r\n              v-on:click=\"setActiveTab\"\r\n              data-tab=\"2\"\r\n              data-toggle=\"tab\"\r\n              href=\"#\"\r\n              role=\"tab\"\r\n              aria-selected=\"false\"\r\n            >\r\n              SCSS\r\n            </a>\r\n          </li>\r\n        </ul>\r\n        <div v-if=\"hasGeneralCode\">\r\n          <slot name=\"code\"></slot>\r\n        </div>\r\n\r\n        <div v-if=\"!hasGeneralCode && !hasSingleCodeType\">\r\n          <b-tabs class=\"hide-tabs\" content-class=\"mt-3\" v-model=\"tabIndex\">\r\n            <b-tab active class=\"example-highlight\">\r\n              <highlight-code lang=\"html\" class=\"language-html\">\r\n                <slot name=\"html\"></slot>\r\n              </highlight-code>\r\n            </b-tab>\r\n            <b-tab class=\"example-highlight\">\r\n              <highlight-code lang=\"js\" class=\"language-js\">\r\n                <slot name=\"js\"></slot>\r\n              </highlight-code>\r\n            </b-tab>\r\n            <b-tab class=\"example-highlight\">\r\n              <highlight-code lang=\"scss\" class=\"language-scss\">\r\n                <slot name=\"scss\"></slot>\r\n              </highlight-code>\r\n            </b-tab>\r\n          </b-tabs>\r\n        </div>\r\n\r\n        <div v-if=\"hasSingleCodeType\" class=\"example-highlight\">\r\n          <highlight-code lang=\"html\" class=\"language-html\" v-if=\"hasHtmlCode\">\r\n            <slot name=\"html\"></slot>\r\n          </highlight-code>\r\n          <highlight-code lang=\"js\" class=\"language-js\" v-if=\"hasJsCode\">\r\n            <slot name=\"js\"></slot>\r\n          </highlight-code>\r\n          <highlight-code lang=\"scss\" class=\"language-scss\" v-if=\"hasScssCode\">\r\n            <slot name=\"scss\"></slot>\r\n          </highlight-code>\r\n        </div>\r\n      </div>\r\n      <!--end::Code example-->\r\n\r\n      <slot name=\"preview\"></slot>\r\n    </template>\r\n  </KTCard>\r\n</template>\r\n\r\n<script>\r\nimport KTCard from \"@/view/content/Card.vue\";\r\nimport KTLayoutExamples from \"@/assets/js/layout/extended/examples.js\";\r\n\r\nexport default {\r\n  name: \"KTCodePreview\",\r\n  props: {\r\n    title: String\r\n  },\r\n  data() {\r\n    return {\r\n      tabIndex: 0,\r\n      isOpen: false\r\n    };\r\n  },\r\n  components: {\r\n    KTCard\r\n  },\r\n  mounted() {\r\n    // init example codes\r\n    this.$nextTick(() => {\r\n      KTLayoutExamples.init([this.$el]);\r\n      const hljs = this.$el.querySelectorAll(\".hljs\");\r\n      hljs.forEach(hl => {\r\n        hl.classList.add(`language-${hl.classList[1]}`);\r\n        hl.classList.remove(\"hljs\");\r\n      });\r\n    });\r\n  },\r\n  methods: {\r\n    /**\r\n     * Set current active on click\r\n     * @param event\r\n     */\r\n    setActiveTab(event) {\r\n      // get all tab links\r\n      const tab = event.target.closest('[role=\"tablist\"]');\r\n      const links = tab.querySelectorAll('[data-toggle=\"tab\"]');\r\n      // remove active tab links\r\n      for (let i = 0; i < links.length; i++) {\r\n        links[i].classList.remove(\"active\");\r\n      }\r\n\r\n      // set current active tab\r\n      event.target.classList.add(\"active\");\r\n\r\n      // set clicked tab index to bootstrap tab\r\n      this.tabIndex = parseInt(event.target.getAttribute(\"data-tab\"));\r\n    }\r\n  },\r\n  computed: {\r\n    /**\r\n     * Check if has title\r\n     * @returns {boolean}\r\n     */\r\n    hasTitleSlot() {\r\n      return !!this.$slots[\"title\"];\r\n    },\r\n\r\n    /**\r\n     * Check if code only has one, exclude the tabs\r\n     * @returns {boolean}\r\n     */\r\n    hasSingleCodeType() {\r\n      let exist = 0;\r\n      [\"html\", \"js\", \"scss\"].forEach(type => {\r\n        if (this.$slots.hasOwnProperty(type)) {\r\n          exist++;\r\n        }\r\n      });\r\n      return exist === 1;\r\n    },\r\n\r\n    /**\r\n     * Custom generate codes\r\n     * @returns {boolean}\r\n     */\r\n    hasGeneralCode() {\r\n      return !!this.$slots[\"code\"];\r\n    },\r\n\r\n    /**\r\n     * Check if has JS code slot\r\n     * @returns {boolean}\r\n     */\r\n    hasJsCode() {\r\n      return !!this.$slots[\"js\"];\r\n    },\r\n\r\n    /**\r\n     * Check if has SCSS code slot\r\n     * @returns {boolean}\r\n     */\r\n    hasScssCode() {\r\n      return !!this.$slots[\"scss\"];\r\n    },\r\n\r\n    /**\r\n     * Check if has HTML code slot\r\n     * @returns {boolean}\r\n     */\r\n    hasHtmlCode() {\r\n      return !!this.$slots[\"html\"];\r\n    }\r\n  }\r\n};\r\n</script>\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodePreview.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CodePreview.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./CodePreview.vue?vue&type=template&id=773e0431\"\nimport script from \"./CodePreview.vue?vue&type=script&lang=js\"\nexport * from \"./CodePreview.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LayoutGridSystem.vue?vue&type=style&index=0&id=afdc2df6&prod&lang=scss&scoped=true\""],"sourceRoot":""}