{"version":3,"sources":["webpack:///./src/components/UI/Table.vue","webpack:///src/components/UI/Table.vue","webpack:///./src/components/UI/Table.vue?234f","webpack:///./src/components/UI/Table.vue?5093","webpack:///./src/components/UI/Table.vue?3185"],"names":["render","_vm","this","_c","_self","staticClass","class","type","style","borderColor","_t","staticRenderFns","name","props","String","enum","default","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,SAAS,CAACF,EAAG,MAAM,CAACE,YAAY,kBAAkBC,MAAM,CACvI,OAAuB,WAAbL,EAAIM,KACd,UAA0B,cAAbN,EAAIM,KACjB,qBAAmC,uBAAbN,EAAIM,KAC1B,KAAqB,SAAbN,EAAIM,KACZ,KAAqB,SAAbN,EAAIM,KACZ,SAAyB,aAAbN,EAAIM,KAChB,kBAAkC,sBAAbN,EAAIM,MAC3BC,MAAO,CAAE,iBAAkBP,EAAIQ,aAAe,YAAc,CAACN,EAAG,MAAM,CAACE,YAAY,2BAA2B,CAACJ,EAAIS,GAAG,UAAU,GAAGP,EAAG,MAAM,CAACE,YAAY,wCAAwC,CAACJ,EAAIS,GAAG,UAAU,GAAGT,EAAIS,GAAG,YAAY,MAE7OC,EAAkB,GCgBP,GACfC,KAAA,QACAC,MAAA,CACAN,KAAA,CACAA,KAAAO,OACAC,KAAA,gDACAC,QAAA,aAEAP,YAAA,CACAF,KAAAO,OACAE,QAAA,aCpC6V,I,wBCQzVC,EAAY,eACd,EACAjB,EACAW,GACA,EACA,KACA,WACA,MAIa,aAAAM,E,oECnBf","file":"js/app~2065e3c1.39dbf777.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"table\"},[_c('div',{staticClass:\"table-container\",class:{\n          'normal': _vm.type === 'normal',\n          'customers': _vm.type === 'customers',\n          'customers-checkbox': _vm.type === 'customers-checkbox',\n          'cars': _vm.type === 'cars',\n          'feed': _vm.type === 'feed',\n          'campaign': _vm.type === 'campaign',\n          'campaign_audience': _vm.type === 'campaign_audience',\n      },style:({ '--border-color': _vm.borderColor || '#E7E8F2' })},[_c('div',{staticClass:\"table-container__header\"},[_vm._t(\"tHead\")],2),_c('div',{staticClass:\"table-container__body ez-slim-scroll\"},[_vm._t(\"tBody\")],2),_vm._t(\"tFooter\")],2)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"table\">\r\n    <div class=\"table-container\"\r\n         :style=\"{ '--border-color': borderColor || '#E7E8F2' }\"\r\n         :class=\"{\r\n            'normal': type === 'normal',\r\n            'customers': type === 'customers',\r\n            'customers-checkbox': type === 'customers-checkbox',\r\n            'cars': type === 'cars',\r\n            'feed': type === 'feed',\r\n            'campaign': type === 'campaign',\r\n            'campaign_audience': type === 'campaign_audience',\r\n        }\"\r\n    >\r\n      <div class=\"table-container__header\">\r\n        <slot name=\"tHead\"/>\r\n      </div>\r\n      <div class=\"table-container__body ez-slim-scroll\">\r\n        <slot name=\"tBody\"/>\r\n      </div>\r\n      <slot name=\"tFooter\"/>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: \"Table\",\r\n  props: {\r\n    type: {\r\n      type: String,\r\n      enum: ['customers', 'cars', 'normal', 'feed', 'campaign'],\r\n      default: 'customers'\r\n    },\r\n    borderColor: {\r\n      type: String,\r\n      default: '#E7E8F2'\r\n    },\r\n  },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.table {\r\n  $border-color: var(--border-color);\r\n\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .table-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n    overflow: hidden;\r\n\r\n    & > div:not(.t-footer) {\r\n      & > div {\r\n        display: grid;\r\n\r\n        .action {\r\n          display: flex;\r\n          justify-content: flex-end;\r\n        }\r\n      }\r\n    }\r\n\r\n    &__header {\r\n      & > div {\r\n        text-transform: uppercase;\r\n        font-size: .6rem;\r\n        padding: 15px 10px;\r\n        color: color(bg-black3);\r\n        position: sticky;\r\n        top: 0;\r\n        background: color(bg-fill);\r\n        width: 100%;\r\n        z-index: 999;\r\n\r\n        & > div {\r\n          font-weight: $font-medium;\r\n          display: flex;\r\n          align-items: center;\r\n        }\r\n      }\r\n\r\n      .email {\r\n        grid-column: 4 / 6;\r\n      }\r\n    }\r\n\r\n    &__body {\r\n      overflow: auto;\r\n      flex: 1;\r\n      word-break: break-word;\r\n      color: color(text);\r\n      font-size: .9rem;\r\n\r\n      a {\r\n        color: color(text);\r\n      }\r\n    }\r\n\r\n    &.normal {\r\n      & > div {\r\n        & > div {\r\n          grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));\r\n        }\r\n      }\r\n    }\r\n\r\n    &.customers {\r\n\r\n      & > div {\r\n\r\n        & > div {\r\n          grid-template-columns: 50px repeat(auto-fit, minmax(50px, 1fr));\r\n        }\r\n      }\r\n    }\r\n\r\n    &.customers-checkbox {\r\n\r\n      & > div {\r\n        & > div {\r\n          grid-template-columns: minmax(40px, max-content) 50px repeat(auto-fit, minmax(50px, 1fr));\r\n        }\r\n      }\r\n    }\r\n\r\n    &.cars {\r\n      & > div {\r\n        .t-header {\r\n          @include breakpoint-width-down(small) {\r\n            display: none;\r\n          }\r\n        }\r\n\r\n        .t-body {\r\n          @include breakpoint-width-down(small) {\r\n            height: 80px;\r\n            position: relative;\r\n            padding: 0;\r\n            .img-thumbs {\r\n              grid-area: image;\r\n\r\n              img {\r\n                width: 100%;\r\n                height: 100%;\r\n                border-radius: 0;\r\n              }\r\n            }\r\n            .title {\r\n              grid-area: title;\r\n            }\r\n\r\n            .price {\r\n              grid-area: price;\r\n            }\r\n\r\n            .color {\r\n              grid-area: color;\r\n            }\r\n\r\n            .info {\r\n              display: none;\r\n            }\r\n\r\n            .stock-number {\r\n              grid-area: stock;\r\n            }\r\n\r\n            .mileage {\r\n              grid-area: mileage;\r\n            }\r\n\r\n            .status {\r\n              grid-area: status;\r\n            }\r\n\r\n            .sell-status {\r\n              display: none;\r\n            }\r\n\r\n            .action {\r\n              position: absolute;\r\n              right: 5px;\r\n            }\r\n          }\r\n        }\r\n\r\n        & > div {\r\n          grid-template-columns: 60px 290px repeat(auto-fit, minmax(50px, 1fr));\r\n          gap: 1px;\r\n          @include breakpoint-width-down(small) {\r\n            gap: 1px 10px;\r\n            grid-template-columns: 110px repeat(4, auto);\r\n            grid-template-areas:  \"image title title title title \"\r\n                                  \"image price mileage mileage . \"\r\n                                  \"image stock color status .\"\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    &.feed {\r\n      & > div {\r\n        & > div {\r\n          grid-template-columns: repeat(auto-fit, 300px);\r\n        }\r\n      }\r\n    }\r\n\r\n    &.campaign {\r\n      & > div {\r\n        & > div {\r\n          grid-template-columns: 320px repeat(auto-fit, minmax(50px, 1fr));\r\n          gap: 1px;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.campaign_audience {\r\n      & > div {\r\n        & > div {\r\n          grid-template-columns: 50px 350px repeat(auto-fit, minmax(50px, 1fr));\r\n          gap: 1px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .t-body {\r\n      background: white;\r\n      border: 1.5px solid $border-color;\r\n      height: 60px;\r\n      border-radius: 5px;\r\n      margin-bottom: 3px;\r\n      padding: 0 10px;\r\n\r\n      &:hover {\r\n        //border-color: color(primary-hover-dark);\r\n        box-shadow: inset 0 0 .8rem rgba(color(bg-blue-dark), .1);\r\n\r\n      }\r\n\r\n      & > div {\r\n        display: flex;\r\n        align-items: center;\r\n        font-weight: $font-regular;\r\n        font-size: .9em;\r\n      }\r\n\r\n      .initials-letters {\r\n        span {\r\n          color: white;\r\n          width: 35px;\r\n          height: 35px;\r\n          font-size: .9em;\r\n          background: color(bg-black3);\r\n          display: flex;\r\n          align-items: center;\r\n          justify-content: center;\r\n          border-radius: 50%;\r\n          font-weight: $font-bold;\r\n          text-transform: uppercase;\r\n          color: color(bg-white);\r\n        }\r\n      }\r\n\r\n      .img-thumbs {\r\n        img {\r\n          width: 60px;\r\n          border-radius: .3rem;\r\n        }\r\n      }\r\n\r\n      .email {\r\n        grid-column: 4 / 6;\r\n      }\r\n\r\n      .action {\r\n        display: flex;\r\n\r\n        .icon {\r\n        }\r\n      }\r\n    }\r\n\r\n    .t-footer {\r\n      padding: 10px 0;\r\n    }\r\n  }\r\n}\r\n</style>\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!./Table.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!./Table.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Table.vue?vue&type=template&id=7e8746a7&scoped=true\"\nimport script from \"./Table.vue?vue&type=script&lang=js\"\nexport * from \"./Table.vue?vue&type=script&lang=js\"\nimport style0 from \"./Table.vue?vue&type=style&index=0&id=7e8746a7&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  \"7e8746a7\",\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!./Table.vue?vue&type=style&index=0&id=7e8746a7&prod&lang=scss&scoped=true\""],"sourceRoot":""}