{"version":3,"sources":["webpack:///./node_modules/vuetify/lib/components/VSnackbar/VSnackbar.js","webpack:///./src/views/Notifications.vue?8bb9","webpack:///src/views/Notifications.vue","webpack:///./src/views/Notifications.vue?bb87","webpack:///./src/views/Notifications.vue"],"names":["extend","name","props","multiLine","Boolean","timeout","type","Number","default","vertical","data","activeTimeout","computed","this","isActive","absolute","bottom","top","left","right","watch","setTimeout","$attrs","hasOwnProperty","methods","window","clearTimeout","h","attrs","staticClass","class","classes","on","$listeners","setBackgroundColor","color","role","$slots","render","_vm","_h","$createElement","_c","_self","slot","_v","$event","snack","model","value","callback","$$v","snackbar","expression","staticRenderFns","colors","args","loc","Math","floor","random","length","component","VBtn","VCardText","VCard","VContainer","VFlex","VIcon","VLayout","VSnackbar"],"mappings":"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","file":"js/chunk-b60d8f7e.6676a8bf.js","sourcesContent":["// Styles\nimport \"../../../src/components/VSnackbar/VSnackbar.sass\"; // Mixins\n\nimport Colorable from '../../mixins/colorable';\nimport Toggleable from '../../mixins/toggleable';\nimport { factory as PositionableFactory } from '../../mixins/positionable'; // Types\n\nimport mixins from '../../util/mixins';\nimport { removed } from '../../util/console';\nexport default mixins(Colorable, Toggleable, PositionableFactory(['absolute', 'top', 'bottom', 'left', 'right'])\n/* @vue/component */\n).extend({\n  name: 'v-snackbar',\n  props: {\n    multiLine: Boolean,\n    // TODO: change this to closeDelay to match other API in delayable.js\n    timeout: {\n      type: Number,\n      default: 6000\n    },\n    vertical: Boolean\n  },\n  data: () => ({\n    activeTimeout: -1\n  }),\n  computed: {\n    classes() {\n      return {\n        'v-snack--active': this.isActive,\n        'v-snack--absolute': this.absolute,\n        'v-snack--bottom': this.bottom || !this.top,\n        'v-snack--left': this.left,\n        'v-snack--multi-line': this.multiLine && !this.vertical,\n        'v-snack--right': this.right,\n        'v-snack--top': this.top,\n        'v-snack--vertical': this.vertical\n      };\n    }\n\n  },\n  watch: {\n    isActive() {\n      this.setTimeout();\n    }\n\n  },\n\n  created() {\n    if (this.$attrs.hasOwnProperty('auto-height')) {\n      removed('auto-height', this);\n    }\n  },\n\n  mounted() {\n    this.setTimeout();\n  },\n\n  methods: {\n    setTimeout() {\n      window.clearTimeout(this.activeTimeout);\n\n      if (this.isActive && this.timeout) {\n        this.activeTimeout = window.setTimeout(() => {\n          this.isActive = false;\n        }, this.timeout);\n      }\n    }\n\n  },\n\n  render(h) {\n    return h('transition', {\n      attrs: {\n        name: 'v-snack-transition'\n      }\n    }, [this.isActive && h('div', {\n      staticClass: 'v-snack',\n      class: this.classes,\n      on: this.$listeners\n    }, [h('div', this.setBackgroundColor(this.color, {\n      staticClass: 'v-snack__wrapper',\n      attrs: {\n        role: 'alert'\n      }\n    }), [h('div', {\n      staticClass: 'v-snack__content'\n    }, this.$slots.default)])])]);\n  }\n\n});\n//# sourceMappingURL=VSnackbar.js.map","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-container',{attrs:{\"fluid\":\"\",\"grid-list-xl\":\"\",\"fill-height\":\"\"}},[_c('v-layout',{attrs:{\"justify-center\":\"\",\"align-center\":\"\"}},[_c('v-flex',{attrs:{\"xs12\":\"\"}},[_c('material-card',{attrs:{\"color\":\"green\"}},[_c('div',{attrs:{\"slot\":\"header\"},slot:\"header\"},[_c('div',{staticClass:\"title font-weight-light mb-2\"},[_vm._v(\"Notifications\")]),_c('div',{staticClass:\"category\"},[_vm._v(\"\\n            Handcrafted by us with\\n            \"),_c('v-icon',{attrs:{\"size\":\"17\"}},[_vm._v(\"\\n              mdi-heart\\n            \")])],1)]),_c('v-card-text',[_c('v-layout',{attrs:{\"row\":\"\",\"wrap\":\"\"}},[_c('v-flex',{attrs:{\"md6\":\"\",\"sm12\":\"\"}},[_c('h2',{staticClass:\"title font-weight-light mb-3\"},[_vm._v(\"Notifications Style\")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"info\"}},[_vm._v(\"\\n                This is a plain notification\\n              \")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"info\",\"dismissible\":\"\"}},[_vm._v(\"\\n                This is a notification with close button.\\n              \")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"info\",\"dismissible\":\"\",\"icon\":\"mdi-bell-plus\"}},[_vm._v(\"\\n\\n                This is a notification with close button and icon.\\n              \")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"info\",\"dismissible\":\"\",\"icon\":\"mdi-bell-plus\"}},[_vm._v(\"\\n\\n                This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.\\n              \")])],1),_c('v-flex',{attrs:{\"md6\":\"\",\"sm12\":\"\"}},[_c('h2',{staticClass:\"title font-weight-light\"},[_vm._v(\"Notifcation States\")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"info\",\"dismissible\":\"\"}},[_c('strong',[_vm._v(\"INFO\")]),_vm._v(\" - This is a regular notification made with `color=\\\"info\\\"`\\n              \")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"success\",\"dismissible\":\"\"}},[_c('strong',[_vm._v(\"SUCCESS\")]),_vm._v(\" - This is a regular notification made with `color=\\\"success\\\"`\\n              \")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"warning\",\"dismissible\":\"\"}},[_c('strong',[_vm._v(\"WARNING\")]),_vm._v(\" - This is a regular notification made with `color=\\\"warning\\\"`\\n              \")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"error\",\"dismissible\":\"\"}},[_c('strong',[_vm._v(\"DANGER\")]),_vm._v(\" - This is a regular notification made with `color=\\\"error\\\"`\\n              \")]),_c('material-notification',{staticClass:\"mb-3\",attrs:{\"color\":\"purple\",\"dismissible\":\"\"}},[_c('strong',[_vm._v(\"PRIMARY\")]),_vm._v(\" - This is a regular notification made with `color=\\\"purple\\\"`\\n              \")])],1)],1),_c('div',{staticClass:\"text-xs-center\"},[_c('h2',{staticClass:\"title font-weight-light mb-2\"},[_vm._v(\"Notification Places\")]),_c('span',{staticClass:\" subheading font-weight-light grey--text\"},[_vm._v(\"Click to view notifications\")])]),_c('v-container',{attrs:{\"grid-list-lg\":\"\"}},[_c('v-layout',{attrs:{\"justify-center\":\"\",\"row\":\"\",\"wrap\":\"\"}},[_c('v-flex',{attrs:{\"xs12\":\"\",\"sm4\":\"\"}},[_c('v-btn',{attrs:{\"block\":\"\",\"color\":\"success\"},on:{\"click\":function($event){return _vm.snack('top', 'left')}}},[_vm._v(\"\\n                  Top Left\\n                \")])],1),_c('v-flex',{attrs:{\"xs12\":\"\",\"sm4\":\"\"}},[_c('v-btn',{attrs:{\"block\":\"\",\"color\":\"success\"},on:{\"click\":function($event){return _vm.snack('top')}}},[_vm._v(\"\\n                  Top Center\\n                \")])],1)],1),_c('v-layout',{attrs:{\"justify-center\":\"\",\"row\":\"\",\"wrap\":\"\"}},[_c('v-flex',{attrs:{\"xs12\":\"\",\"sm4\":\"\"}},[_c('v-btn',{attrs:{\"block\":\"\",\"color\":\"success\"},on:{\"click\":function($event){return _vm.snack('top', 'right')}}},[_vm._v(\"\\n                  Top Right\\n                \")])],1),_c('v-flex',{attrs:{\"xs12\":\"\",\"sm4\":\"\"}},[_c('v-btn',{attrs:{\"block\":\"\",\"color\":\"success\"},on:{\"click\":function($event){return _vm.snack('bottom', 'left')}}},[_vm._v(\"\\n                  Bottom Left\\n                \")])],1)],1),_c('v-layout',{attrs:{\"justify-center\":\"\",\"row\":\"\",\"wrap\":\"\"}},[_c('v-flex',{attrs:{\"xs12\":\"\",\"sm4\":\"\"}},[_c('v-btn',{attrs:{\"block\":\"\",\"color\":\"success\"},on:{\"click\":function($event){return _vm.snack('bottom')}}},[_vm._v(\"\\n                  Bottom Center\\n                \")])],1),_c('v-flex',{attrs:{\"xs12\":\"\",\"sm4\":\"\"}},[_c('v-btn',{attrs:{\"block\":\"\",\"color\":\"success\"},on:{\"click\":function($event){return _vm.snack('bottom', 'right')}}},[_vm._v(\"\\n                  Bottom Right\\n                \")])],1)],1)],1),_c('v-snackbar',{attrs:{\"color\":_vm.color,\"bottom\":_vm.bottom,\"top\":_vm.top,\"left\":_vm.left,\"right\":_vm.right,\"dark\":\"\"},model:{value:(_vm.snackbar),callback:function ($$v) {_vm.snackbar=$$v},expression:\"snackbar\"}},[_c('v-icon',{staticClass:\"mr-3\",attrs:{\"color\":\"white\"}},[_vm._v(\"\\n              mdi-bell-plus\\n            \")]),_c('div',[_vm._v(\"Notifications\")]),_c('v-icon',{attrs:{\"size\":\"16\"},on:{\"click\":function($event){_vm.snackbar = false}}},[_vm._v(\"\\n              mdi-close-circle\\n            \")])],1)],1)],1)],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <v-container\r\n    fluid\r\n    grid-list-xl\r\n    fill-height>\r\n    <v-layout\r\n      justify-center\r\n      align-center\r\n    >\r\n      <v-flex xs12>\r\n        <material-card\r\n          color=\"green\">\r\n          <div\r\n            slot=\"header\"\r\n          >\r\n            <div class=\"title font-weight-light mb-2\">Notifications</div>\r\n            <div class=\"category\">\r\n              Handcrafted by us with\r\n              <v-icon\r\n                size=\"17\"\r\n              >\r\n                mdi-heart\r\n              </v-icon>\r\n            </div>\r\n          </div>\r\n\r\n          <v-card-text>\r\n            <v-layout\r\n              row\r\n              wrap>\r\n              <v-flex\r\n                md6\r\n                sm12>\r\n                <h2 class=\"title font-weight-light mb-3\">Notifications Style</h2>\r\n\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"info\"\r\n                >\r\n                  This is a plain notification\r\n                </material-notification>\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"info\"\r\n                  dismissible\r\n                >\r\n                  This is a notification with close button.\r\n                </material-notification>\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"info\"\r\n                  dismissible\r\n                  icon=\"mdi-bell-plus\"\r\n                >\r\n\r\n                  This is a notification with close button and icon.\r\n                </material-notification>\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"info\"\r\n                  dismissible\r\n                  icon=\"mdi-bell-plus\"\r\n                >\r\n\r\n                  This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.\r\n                </material-notification>\r\n              </v-flex>\r\n\r\n              <v-flex\r\n                md6\r\n                sm12>\r\n                <h2 class=\"title font-weight-light\">Notifcation States</h2>\r\n\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"info\"\r\n                  dismissible\r\n                >\r\n                  <strong>INFO</strong> - This is a regular notification made with `color=\"info\"`\r\n                </material-notification>\r\n\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"success\"\r\n                  dismissible\r\n                >\r\n                  <strong>SUCCESS</strong> - This is a regular notification made with `color=\"success\"`\r\n                </material-notification>\r\n\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"warning\"\r\n                  dismissible\r\n                >\r\n                  <strong>WARNING</strong> - This is a regular notification made with `color=\"warning\"`\r\n                </material-notification>\r\n\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"error\"\r\n                  dismissible\r\n                >\r\n                  <strong>DANGER</strong> - This is a regular notification made with `color=\"error\"`\r\n                </material-notification>\r\n\r\n                <material-notification\r\n                  class=\"mb-3\"\r\n                  color=\"purple\"\r\n                  dismissible\r\n                >\r\n                  <strong>PRIMARY</strong> - This is a regular notification made with `color=\"purple\"`\r\n                </material-notification>\r\n              </v-flex>\r\n            </v-layout>\r\n            <div class=\"text-xs-center\">\r\n              <h2 class=\"title font-weight-light mb-2\">Notification Places</h2>\r\n              <span class=\" subheading font-weight-light grey--text\">Click to view notifications</span>\r\n            </div>\r\n\r\n            <v-container grid-list-lg>\r\n              <v-layout\r\n                justify-center\r\n                row\r\n                wrap>\r\n                <v-flex\r\n                  xs12\r\n                  sm4>\r\n                  <v-btn\r\n                    block\r\n                    color=\"success\"\r\n                    @click=\"snack('top', 'left')\"\r\n                  >\r\n                    Top Left\r\n                  </v-btn>\r\n                </v-flex>\r\n                <v-flex\r\n                  xs12\r\n                  sm4>\r\n                  <v-btn\r\n                    block\r\n                    color=\"success\"\r\n                    @click=\"snack('top')\"\r\n                  >\r\n                    Top Center\r\n                  </v-btn>\r\n                </v-flex>\r\n              </v-layout>\r\n              <v-layout\r\n                justify-center\r\n                row\r\n                wrap>\r\n                <v-flex\r\n                  xs12\r\n                  sm4>\r\n                  <v-btn\r\n                    block\r\n                    color=\"success\"\r\n                    @click=\"snack('top', 'right')\"\r\n                  >\r\n                    Top Right\r\n                  </v-btn>\r\n                </v-flex>\r\n                <v-flex\r\n                  xs12\r\n                  sm4>\r\n                  <v-btn\r\n                    block\r\n                    color=\"success\"\r\n                    @click=\"snack('bottom', 'left')\"\r\n                  >\r\n                    Bottom Left\r\n                  </v-btn>\r\n                </v-flex>\r\n              </v-layout>\r\n              <v-layout\r\n                justify-center\r\n                row\r\n                wrap>\r\n                <v-flex\r\n                  xs12\r\n                  sm4>\r\n                  <v-btn\r\n                    block\r\n                    color=\"success\"\r\n                    @click=\"snack('bottom')\"\r\n                  >\r\n                    Bottom Center\r\n                  </v-btn>\r\n                </v-flex>\r\n                <v-flex\r\n                  xs12\r\n                  sm4>\r\n                  <v-btn\r\n                    block\r\n                    color=\"success\"\r\n                    @click=\"snack('bottom', 'right')\"\r\n                  >\r\n                    Bottom Right\r\n                  </v-btn>\r\n                </v-flex>\r\n              </v-layout>\r\n            </v-container>\r\n\r\n            <v-snackbar\r\n              :color=\"color\"\r\n              :bottom=\"bottom\"\r\n              :top=\"top\"\r\n              :left=\"left\"\r\n              :right=\"right\"\r\n              v-model=\"snackbar\"\r\n              dark\r\n            >\r\n              <v-icon\r\n                color=\"white\"\r\n                class=\"mr-3\"\r\n              >\r\n                mdi-bell-plus\r\n              </v-icon>\r\n              <div>Notifications</div>\r\n              <v-icon\r\n                size=\"16\"\r\n                @click=\"snackbar = false\"\r\n              >\r\n                mdi-close-circle\r\n              </v-icon>\r\n            </v-snackbar>\r\n          </v-card-text>\r\n        </material-card>\r\n      </v-flex>\r\n    </v-layout>\r\n  </v-container>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data: () => ({\r\n    color: null,\r\n    colors: [\r\n      'purple',\r\n      'info',\r\n      'success',\r\n      'warning',\r\n      'error'\r\n    ],\r\n    top: true,\r\n    bottom: false,\r\n    left: false,\r\n    right: false,\r\n    snackbar: false\r\n  }),\r\n\r\n  methods: {\r\n\r\n    snack (...args) {\r\n      this.top = false\r\n      this.bottom = false\r\n      this.left = false\r\n      this.right = false\r\n\r\n      for (const loc of args) {\r\n        this[loc] = true\r\n      }\r\n\r\n      this.color = this.colors[Math.floor(Math.random() * this.colors.length)]\r\n\r\n      this.snackbar = true\r\n    }\r\n  }\r\n}\r\n</script>\r\n","import mod from \"-!../../node_modules/vuetify-loader/lib/loader.js??ref--18-0!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Notifications.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/vuetify-loader/lib/loader.js??ref--18-0!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Notifications.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Notifications.vue?vue&type=template&id=0276d887&\"\nimport script from \"./Notifications.vue?vue&type=script&lang=js&\"\nexport * from \"./Notifications.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\n\n/* vuetify-loader */\nimport installComponents from \"!../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VCardText } from 'vuetify/lib/components/VCard';\nimport { VContainer } from 'vuetify/lib/components/VGrid';\nimport { VFlex } from 'vuetify/lib/components/VGrid';\nimport { VIcon } from 'vuetify/lib/components/VIcon';\nimport { VLayout } from 'vuetify/lib/components/VGrid';\nimport { VSnackbar } from 'vuetify/lib/components/VSnackbar';\ninstallComponents(component, {VBtn,VCardText,VContainer,VFlex,VIcon,VLayout,VSnackbar})\n"],"sourceRoot":""}