{"version":3,"sources":["webpack:///./src/components/BackgroundImages.vue?551a","webpack:///./src/components/BackgroundImages.vue?8a1a","webpack:///./src/views/Motifs.vue?3665","webpack:///./src/components/Options.vue?be17","webpack:///./node_modules/core-js/modules/es.string.includes.js","webpack:///./src/components/ProductSelections.vue?847e","webpack:///./src/views/Motifs.vue?973d","webpack:///./node_modules/core-js/internals/is-regexp.js","webpack:///./src/components/Options.vue?e3f7","webpack:///./node_modules/core-js/internals/not-a-regexp.js","webpack:///./src/components/Options.vue?caa6","webpack:///./src/components/BackgroundImages.vue?c868","webpack:///./src/views/Motifs.vue?fe38","webpack:///./node_modules/core-js/internals/correct-is-regexp-logic.js","webpack:///./src/views/Motifs.vue?660c","webpack:///./src/components/ProductSelections.vue?12f3","webpack:///./src/components/Background.vue?a1e0","webpack:///./src/components/BackgroundImages.vue?9501","webpack:///src/components/BackgroundImages.vue","webpack:///./src/components/BackgroundImages.vue?a790","webpack:///./src/components/BackgroundImages.vue","webpack:///src/components/Background.vue","webpack:///./src/components/Background.vue?0089","webpack:///./src/components/Background.vue","webpack:///./src/components/Options.vue?5807","webpack:///src/components/Options.vue","webpack:///./src/components/Options.vue?f459","webpack:///./src/components/Options.vue","webpack:///src/components/ProductSelections.vue","webpack:///./src/components/ProductSelections.vue?1b68","webpack:///./src/components/ProductSelections.vue","webpack:///src/views/Motifs.vue","webpack:///./src/views/Motifs.vue?ec23","webpack:///./src/views/Motifs.vue","webpack:///./node_modules/core-js/modules/es.array.includes.js","webpack:///./src/components/ProductSelections.vue?2068","webpack:///./src/components/ProductSelections.vue?3933"],"names":["content","__esModule","default","module","i","locals","exports","add","$","notARegExp","requireObjectCoercible","toString","correctIsRegExpLogic","target","proto","forced","includes","searchString","this","indexOf","arguments","length","undefined","isObject","classof","wellKnownSymbol","MATCH","it","isRegExp","TypeError","___CSS_LOADER_API_IMPORT___","push","METHOD_NAME","regexp","error1","error2","render","_vm","_h","$createElement","_c","_self","staticClass","_g","$listeners","_v","attrs","directives","name","rawName","value","expression","ref","domProps","on","$event","composing","searchQuery","clearQuery","onMotifCategoryChange","_e","_l","mc","key","categoryId","_s","categoryName","filteredMotifs","pull","put","onClone","drag","m","motifList","nativeOn","addMotif","designMotifList","removeMotifFromDesignList","motifIndexes","staticRenderFns","isCanvas","this$1","style","backgroundColor","productInfo","palettecolors","find","p","flossId","userProduct","bgFlossId","flossHtml","backgroundImage","backgroundimages","backgroundImageId","bgImageId","backgroundImageUrl","backgroundImageName","flossName","stopPropagation","openPopup","apply","active","setColor","setBackgroundImage","$store","state","o","index","refInFor","class","selected","selectedbackgroundId","changeBackgroundImage","component","options","productOptions","productOptionId","optionId","productOptionOverlay","productOptionName","openOptions","setOption","$includes","addToUnscopables","el"],"mappings":"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","file":"js/motifs.7e8b2286.js","sourcesContent":["export * from \"-!../../node_modules/vue-style-loader/index.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BackgroundImages.vue?vue&type=style&index=0&lang=css&\"","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BackgroundImages.vue?vue&type=style&index=0&lang=css&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"38c1775e\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","export * from \"-!../../node_modules/vue-style-loader/index.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Motifs.vue?vue&type=style&index=0&lang=css&\"","export * from \"-!../../node_modules/vue-style-loader/index.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Options.vue?vue&type=style&index=0&lang=css&\"","'use strict';\nvar $ = require('../internals/export');\nvar notARegExp = require('../internals/not-a-regexp');\nvar requireObjectCoercible = require('../internals/require-object-coercible');\nvar toString = require('../internals/to-string');\nvar correctIsRegExpLogic = require('../internals/correct-is-regexp-logic');\n\n// `String.prototype.includes` method\n// https://tc39.es/ecma262/#sec-string.prototype.includes\n$({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {\n  includes: function includes(searchString /* , position = 0 */) {\n    return !!~toString(requireObjectCoercible(this))\n      .indexOf(toString(notARegExp(searchString)), arguments.length > 1 ? arguments[1] : undefined);\n  }\n});\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductSelections.vue?vue&type=style&index=0&lang=css&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"3ae38d72\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Motifs.vue?vue&type=style&index=0&lang=css&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"1d620f58\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","var isObject = require('../internals/is-object');\nvar classof = require('../internals/classof-raw');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar MATCH = wellKnownSymbol('match');\n\n// `IsRegExp` abstract operation\n// https://tc39.es/ecma262/#sec-isregexp\nmodule.exports = function (it) {\n  var isRegExp;\n  return isObject(it) && ((isRegExp = it[MATCH]) !== undefined ? !!isRegExp : classof(it) == 'RegExp');\n};\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Options.vue?vue&type=style&index=0&lang=css&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"20361e7c\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","var isRegExp = require('../internals/is-regexp');\n\nmodule.exports = function (it) {\n  if (isRegExp(it)) {\n    throw TypeError(\"The method doesn't accept regular expressions\");\n  } return it;\n};\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".option-list{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;margin:1em;grid-gap:.5em}.option{padding:4px 0;position:relative;cursor:pointer}.option>div{position:relative;border-radius:2px;padding:2px;outline:2px solid #eee}.option:hover>div{outline:2px solid #ccc}.option.selected>div{outline:2px solid #666}.option>div>div{overflow:hidden;height:60px;padding:0;background:#fff;position:relative;border-radius:2px}.option img{position:absolute;left:43%;top:50%;transform:translate(-50%,-50%);height:calc(100% - 1em)}.key-fob .option img{transform:translate(-10%,-50%);height:100%}.option:hover img{height:calc(100% - .75em)}.key-fob .option:hover img{height:calc(100% + .25em)}.option.selected label{display:block}.product-selections .option label{font-size:.7rem;padding:.5em 0 0;width:100%;line-height:1rem}.option:hover label{display:block;color:#9f9f9f;visibility:visible}.options .popup .popup-content{padding-bottom:0}button.slick-arrow{top:calc(50% - 1.75rem)}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".background-images{display:flex;margin:1em;gap:.5em;flex-wrap:wrap;height:unset;flex-direction:row}.background-image{cursor:pointer;width:calc(16.667% - .44em)}.background-image.selected>div,.background-image:hover>div{outline-color:#666}.background-image>div{overflow:hidden;position:relative;height:2.5em;border-radius:2px;border:1px solid #fff;outline:1px solid #ccc}.background-image>div>img{height:100%;-ms-interpolation-mode:nearest-neighbor;image-rendering:-moz-crisp-edges;image-rendering:pixelated;max-width:none}@media only screen and (max-width:750px){.background-image{max-width:unset}}.background-image label{display:none}.backgound-image:hover label{font-size:.7rem;padding:.5em 0 0;width:calc(100% + 4em);line-height:1.15em;text-align:center;position:absolute;left:50%;top:4.25em;transform:translateX(-50%);color:#b1b0a5}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".motif-categories{min-height:1000px}.motif-categories h2{color:#288b7a;font-size:1.1em;text-transform:uppercase;font-weight:400;text-align:left;line-height:1.5em;padding:0 .5em;border-radius:1px;margin:0 0 1em;border-bottom:1px solid}.motif-category{margin:.5em 0 1.5em}.category-motif{display:inline-block}.category-motif .motif{display:inline-block;margin:.75em}.removable .category-motif{padding-top:.4em;margin-top:-.4em}.category-motif .remove{position:absolute;opacity:0;cursor:pointer;color:#ccc;width:100%;height:1.2em;line-height:1.2em;font-weight:700;left:50%;transform:translate(-50%,-.8em)}.category-motif:hover .remove{opacity:1;transition:opacity .5s 2s}.category-motif .remove:before{left:calc(50% - .6em);width:1.2rem;height:1.2rem;line-height:1.2rem;font-size:.8em;border-radius:100%;display:inline-block}.category-motif .remove:hover:before{background:#ccc;color:#fff}.category-motif{position:relative}.category-motif,.category-motifs{display:flex;justify-content:center}.category-motifs{flex-wrap:wrap}.category-motif .remove:before{content:\\\"\\\\2716\\\"}.key-fob .category-motif .motif[data-wide=\\\"1\\\"]{display:none}.category-motif img{height:2em;-ms-interpolation-mode:nearest-neighbor;image-rendering:-moz-crisp-edges;image-rendering:pixelated;filter:drop-shadow(1px 1px 1px #666)}.category-motif:hover img{filter:brightness(110%) drop-shadow(1px 1px 1px #666);transform:scale(1.05);cursor:pointer}.search-area{display:flex;-moz-column-gap:1em;column-gap:1em;justify-content:center;row-gap:1em;margin:1em}@media only screen and (max-width:550px){.search-area{flex-wrap:wrap}}.search-area>div,.search-form{flex:1 1 auto}.search-form{display:flex;-moz-column-gap:1em;column-gap:1em;justify-content:center;row-gap:1em}.search-form>div{width:50%}select#motifCategorySelect{border:1px solid #ccc;height:calc(2em + 4px);font-size:1em;width:100%;background:#fff;border-radius:2px;color:#666}#motifSearch{position:relative}#motifSearch input{border:1px solid #ccc;height:calc(2em + 4px);font-size:1em;width:100%;background:#fff;border-radius:2px}#motifSearch input::-moz-placeholder{color:#666;opacity:1}#motifSearch input:-ms-input-placeholder{color:#666;opacity:1}#motifSearch input::placeholder{color:#666;opacity:1}#motifSearch input:focus::-moz-placeholder{opacity:.3}#motifSearch input:focus:-ms-input-placeholder{opacity:.3}#motifSearch input:focus::placeholder{opacity:.3}#motifSearch a{display:none}#motifSearch:hover input:not(:-moz-placeholder-shown)~a{position:absolute;line-height:1.25em;right:.5em;background:#ccc;color:#fff;display:inline-block;margin:.5em 0;border-radius:100%;width:1.25em;bottom:0;cursor:pointer;z-index:5}#motifSearch:hover input:not(:-ms-input-placeholder)~a{position:absolute;line-height:1.25em;right:.5em;background:#ccc;color:#fff;display:inline-block;margin:.5em 0;border-radius:100%;width:1.25em;bottom:0;cursor:pointer;z-index:5}#motifSearch:hover input:not(:placeholder-shown)~a{position:absolute;line-height:1.25em;right:.5em;background:#ccc;color:#fff;display:inline-block;margin:.5em 0;border-radius:100%;width:1.25em;bottom:0;cursor:pointer;z-index:5}.search-area label{font-size:.75em;text-transform:uppercase;line-height:1.25rem}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","var wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar MATCH = wellKnownSymbol('match');\n\nmodule.exports = function (METHOD_NAME) {\n  var regexp = /./;\n  try {\n    '/./'[METHOD_NAME](regexp);\n  } catch (error1) {\n    try {\n      regexp[MATCH] = false;\n      return '/./'[METHOD_NAME](regexp);\n    } catch (error2) { /* empty */ }\n  } return false;\n};\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"motifs step\"},[_c('div',[_c('div',{staticClass:\"step-static\"},[_c('div',{staticClass:\"step-content\"},[_c('div',{staticClass:\"search-area\"},[_c('ProductSelections',_vm._g({},_vm.$listeners)),_c('div',{staticClass:\"search-form\"},[_c('div',[_c('label',[_vm._v(\"Search Motifs\")]),_c('div',{attrs:{\"id\":\"motifSearch\"}},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.searchQuery),expression:\"searchQuery\"}],ref:\"searchInput\",attrs:{\"type\":\"text\",\"placeholder\":\"Enter keywords...\"},domProps:{\"value\":(_vm.searchQuery)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.searchQuery=$event.target.value}}}),_c('a',{staticClass:\"delete\",on:{\"click\":_vm.clearQuery}},[_vm._v(\"✕\")])])]),_c('div',[_c('label',[_vm._v(\"Browse Motifs\")]),_c('select',{attrs:{\"id\":\"motifCategorySelect\"},on:{\"change\":function($event){return _vm.onMotifCategoryChange($event)}}},[_c('option',{attrs:{\"value\":\"0\"}},[_vm._v(\"Go to category..\")]),(_vm.searchQuery.length > 2)?_c('option',{attrs:{\"value\":\"0\"}},[_vm._v(\" Search Results \")]):_vm._e(),_vm._l((_vm.motifCatList),function(mc){return _c('option',{key:mc.categoryId,domProps:{\"value\":mc.categoryId}},[_vm._v(\" \"+_vm._s(mc.categoryName)+\" \")])})],2)])])],1)])]),_c('div',{staticClass:\"step-scroll\",attrs:{\"id\":\"scroll\"}},[_c('div',{staticClass:\"step-content\"},[_c('div',{staticClass:\"motif-categories\"},[(_vm.searchQuery.length > 2)?_c('div',{staticClass:\"motif-category-area\"},[_c('h2',[_vm._v(\"Search Results : \"+_vm._s(_vm.searchQuery))]),_c('div',{staticClass:\"motif-category\",attrs:{\"list\":_vm.filteredMotifs,\"group\":{ name: 'ProductMotifs', pull: 'clone', put: false },\"sort\":false,\"clone\":_vm.onClone},on:{\"start\":function($event){_vm.drag = true},\"end\":function($event){_vm.drag = false}}},[(_vm.filteredMotifs.length>0)?_c('transition-group',{staticClass:\"category-motifs\",attrs:{\"tag\":\"div\"}},_vm._l((_vm.filteredMotifs),function(m){return _c('div',{key:m,staticClass:\"category-motif\"},[_c('Motif',{attrs:{\"m\":_vm.motifList[m]},nativeOn:{\"click\":function($event){return _vm.addMotif(_vm.motifList[m])}}})],1)}),0):_c('div',[_vm._v(\"No motifs found that match \\\"\"+_vm._s(_vm.searchQuery)+\"\\\"\")])],1)]):_vm._e(),(_vm.designMotifList.length > 0)?_c('div',{staticClass:\"motif-category-area removable\"},[_c('h2',[_vm._v(\"Your Motifs\")]),_c('div',{staticClass:\"motif-category\",attrs:{\"list\":_vm.designMotifList,\"group\":{ name: 'ProductMotifs', pull: 'clone', put: false },\"sort\":false,\"clone\":_vm.onClone},on:{\"start\":function($event){_vm.drag = true},\"end\":function($event){_vm.drag = false}}},[_c('transition-group',{staticClass:\"category-motifs\",attrs:{\"tag\":\"div\"}},_vm._l((_vm.designMotifList),function(m){return _c('div',{key:m,staticClass:\"category-motif\"},[_c('div',{staticClass:\"remove\",attrs:{\"title\":\"Remove from your motifs list\"},on:{\"click\":function($event){return _vm.removeMotifFromDesignList(m)}}}),_c('Motif',{attrs:{\"m\":_vm.motifList[m]},nativeOn:{\"click\":function($event){return _vm.addMotif(_vm.motifList[m])}}})],1)}),0)],1)]):_vm._e(),_vm._l((_vm.motifCatList),function(mc){return _c('div',{key:mc.categoryId,staticClass:\"motif-category-area\",attrs:{\"data-id\":mc.categoryId}},[_c('h2',[_vm._v(_vm._s(mc.categoryName))]),_c('div',{staticClass:\"motif-category\",attrs:{\"list\":mc.motifIndexes,\"group\":{ name: 'ProductMotifs', pull: 'clone', put: false },\"sort\":false,\"clone\":_vm.onClone},on:{\"start\":function($event){_vm.drag = true},\"end\":function($event){_vm.drag = false}}},[_c('transition-group',{key:mc.categoryId,staticClass:\"category-motifs\",attrs:{\"tag\":\"div\"}},_vm._l((mc.motifIndexes),function(m){return _c('div',{key:m,staticClass:\"category-motif\"},[_c('Motif',{attrs:{\"m\":_vm.motifList[m]},nativeOn:{\"click\":function($event){return _vm.addMotif(_vm.motifList[m])}}})],1)}),0)],1)])})],2)])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"product-selections\"},[_c('div',{staticClass:\"size-picker\"},[_c('label',[_vm._v(\"Size\")]),_c('ProductSizes',_vm._g({attrs:{\"isOpen\":false,\"isPicker\":true}},_vm.$listeners))],1),_c('div',[_c('label',[_vm._v(\"Background\")]),_c('Background')],1),(!_vm.isCanvas)?_c('div',[_c('label',[_vm._v(\"Options\")]),_c('Options')],1):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {\nvar this$1 = this;\nvar _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"background\"},[_c('div',{ref:\"backgroundselect\",staticClass:\"color-picker picker\",style:({\n         backgroundColor:\n         '#' +\n         this.productInfo.palettecolors.find(\n         function (p){ return p.flossId == this$1.userProduct.bgFlossId; }\n        ).flossHtml,\n        backgroundImage:\n        'url(' +\n        (this.productInfo.backgroundimages.find(\n        function (p){ return p.backgroundImageId == this$1.userProduct.bgImageId; }\n        ) ? this.productInfo.backgroundimages.find(\n        function (p){ return p.backgroundImageId == this$1.userProduct.bgImageId; }\n        ).backgroundImageUrl : '')\n\n\n        + ')',\n        }),attrs:{\"title\":this.productInfo.backgroundimages.find(\n        function (p){ return p.backgroundImageId == this$1.userProduct.bgImageId; }\n        ) ?\n        this.productInfo.backgroundimages.find(\n        function (p){ return p.backgroundImageId == this$1.userProduct.bgImageId; }\n        ).backgroundImageName :\n        'Background Color : ' +\n        this.productInfo.palettecolors.find(\n        function (p) { return p.flossId == this$1.userProduct.bgFlossId; }\n        ).flossName},on:{\"click\":function($event){$event.stopPropagation();return _vm.openPopup.apply(null, arguments)}}},[_c('span',[_vm._v(_vm._s(this.productInfo.palettecolors.find(function (p) { return p.flossId == this$1.userProduct.bgFlossId; }).flossName))])]),(_vm.active == true)?_c('div',{staticClass:\"popup\"},[_c('div',{staticClass:\"popup-content\"},[_c('h3',[_vm._v(\"Solid Background\")]),_c('PaletteColors',{ref:\"paletteColors\",attrs:{\"flossId\":_vm.userProduct.bgFlossId},on:{\"change-color\":_vm.setColor}}),_c('h3',[_vm._v(\"Pattern Background\")]),_c('BackgroundImages',{ref:\"backgroundImages\",attrs:{\"backgroundImageId\":_vm.userProduct.bgImageId},on:{\"change-background-image\":_vm.setBackgroundImage}})],1),_c('div',{staticClass:\"overlay\",on:{\"click\":function($event){_vm.active = false}}})]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"background-images\"},_vm._l((_vm.$store.state.productInfo.backgroundimages),function(o,index){return _c('div',{key:o.backgroundImageId,ref:'color-' + o.flossId,refInFor:true,class:['background-image', { selected: o.backgroundImageId == _vm.selectedbackgroundId }],attrs:{\"data-index\":index},on:{\"click\":function($event){return _vm.changeBackgroundImage(o.backgroundImageId, o.backgroundImageUrl)}}},[_c('div',[_c('img',{attrs:{\"alt\":o.backgroundImageName,\"src\":o.backgroundImageUrl}})]),_c('label',[_vm._v(\" \"+_vm._s(o.backgroundImageName)+\" \")])])}),0)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"background-images\">\r\n       \r\n        <div v-for=\"(o, index) in $store.state.productInfo.backgroundimages\"\r\n             :key=\"o.backgroundImageId\"\r\n             :data-index=\"index\"\r\n             v-on:click=\"changeBackgroundImage(o.backgroundImageId, o.backgroundImageUrl)\"\r\n             v-bind:class=\"['background-image', { selected: o.backgroundImageId == selectedbackgroundId }]\"\r\n             :ref=\"'color-' + o.flossId\">\r\n            <div ><img :alt=\"o.backgroundImageName\"\r\n     :src=\"o.backgroundImageUrl\" /></div>\r\n            <label>\r\n                {{  o.backgroundImageName }}\r\n\r\n        </label>\r\n    </div>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\n    export default {\r\n        name: \"BackgroundImages\",\r\n        data() {\r\n            return {\r\n                selectedbackgroundId: Number,\r\n            };\r\n        },\r\n        props: {\r\n            backgroundImageId: Number,\r\n            productInfo: Object,\r\n        },\r\n        methods: {\r\n            changeBackgroundImage(biId, biFile) {\r\n                this.$emit(\"change-background-image\", biId, biFile);\r\n            },\r\n        },\r\n        computed: {},\r\n        mounted: function () {\r\n            this.selectedbackgroundId = this.backgroundImageId;\r\n        },\r\n        components: {},\r\n    };\r\n</script>\r\n<style>\r\n    .background-images {\r\n        display: flex;\r\n        margin: 1em;\r\n        gap: .5em;\r\n        flex-wrap: wrap;\r\n        height: unset;\r\n        flex-direction:row;\r\n    }\r\n\r\n    .background-image {\r\n        cursor: pointer;\r\n        /* min-width: 3em; */\r\n        width: calc(16.667% - .44em);\r\n    }\r\n\r\n        .background-image:hover > div {\r\n            outline-color: #666;\r\n        }\r\n\r\n        .background-image.selected > div {\r\n            outline-color: #666;\r\n        }\r\n\r\n        .background-image > div {\r\n            overflow: hidden;\r\n            position: relative;\r\n            /* overflow: hidden; */\r\n            height: 2.5em;\r\n            border-radius: 2px;\r\n            border: solid 1px #fff;\r\n            outline: solid 1px #ccc;\r\n        }\r\n\r\n            .background-image > div > img {\r\n                height: 100%;\r\n                -ms-interpolation-mode: nearest-neighbor;\r\n                image-rendering: -moz-crisp-edges;\r\n                image-rendering: pixelated;\r\n                max-width: none;\r\n            }\r\n\r\n            @media only screen and (max-width: 750px) {\r\n                .background-image {\r\n            max-width: unset;\r\n        }\r\n    }\r\n\r\n    .background-image label {\r\n        display: none;\r\n    }\r\n\r\n    .backgound-image:hover label {\r\n        font-size: 0.7rem;\r\n        padding: 0.5em 0 0;\r\n        width: calc(100% + 4em);\r\n        line-height: 1.15em;\r\n        /* white-space: nowrap; */\r\n        /* border: solid 1px; */\r\n        text-align: center;\r\n        position: absolute;\r\n        left: 50%;\r\n        top: 4.25em;\r\n        transform: translateX(-50%);\r\n        /*display: block;*/\r\n        /* border: solid 1px; */\r\n    }\r\n\r\n    .backgound-image:hover label {\r\n        color: #b1b0a5;\r\n    }\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BackgroundImages.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BackgroundImages.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BackgroundImages.vue?vue&type=template&id=06cd1056&\"\nimport script from \"./BackgroundImages.vue?vue&type=script&lang=js&\"\nexport * from \"./BackgroundImages.vue?vue&type=script&lang=js&\"\nimport style0 from \"./BackgroundImages.vue?vue&type=style&index=0&lang=css&\"\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    <div class=\"background\">\r\n        <div class=\"color-picker picker\"\r\n             ref=\"backgroundselect\"\r\n             @click.stop=\"openPopup\"\r\n             :style=\"{\r\n             backgroundColor:\r\n             '#' +\r\n             this.productInfo.palettecolors.find(\r\n             (p)=>\r\n            p.flossId == this.userProduct.bgFlossId\r\n            ).flossHtml,\r\n            backgroundImage:\r\n            'url(' +\r\n            (this.productInfo.backgroundimages.find(\r\n            (p)=>\r\n            p.backgroundImageId == this.userProduct.bgImageId\r\n            ) ? this.productInfo.backgroundimages.find(\r\n            (p)=>\r\n            p.backgroundImageId == this.userProduct.bgImageId\r\n            ).backgroundImageUrl : '')\r\n\r\n\r\n            + ')',\r\n            }\"\r\n            :title=\"\r\n            this.productInfo.backgroundimages.find(\r\n            (p)=>\r\n            p.backgroundImageId == this.userProduct.bgImageId\r\n            ) ?\r\n            this.productInfo.backgroundimages.find(\r\n            (p)=>\r\n            p.backgroundImageId == this.userProduct.bgImageId\r\n            ).backgroundImageName :\r\n            'Background Color : ' +\r\n            this.productInfo.palettecolors.find(\r\n            (p) => p.flossId == this.userProduct.bgFlossId\r\n            ).flossName\r\n            \"\r\n            >\r\n            <span>{{this.productInfo.palettecolors.find(p => p.flossId == this.userProduct.bgFlossId).flossName}}</span>\r\n        </div>\r\n        <div v-if=\"active == true\" class=\"popup\">\r\n            <div class=\"popup-content\">\r\n                <h3>Solid Background</h3>\r\n                <PaletteColors ref=\"paletteColors\"\r\n                               :flossId=\"userProduct.bgFlossId\"\r\n                               @change-color=\"setColor\" />\r\n                <h3>Pattern Background</h3>\r\n                <BackgroundImages ref=\"backgroundImages\"\r\n                                  @change-background-image=\"setBackgroundImage\"\r\n                                  :backgroundImageId=\"userProduct.bgImageId\" />\r\n\r\n            </div>\r\n            <div class=\"overlay\" @click=\"active = false\"></div>\r\n        </div>\r\n    </div>\r\n</template>\r\n<script>\r\n    import PaletteColors from \"@/components/PaletteColors.vue\";\r\n    import BackgroundImages from \"@/components/BackgroundImages.vue\";\r\n    import { mapState } from \"vuex\";\r\n    import Globals from \"../globals\";\r\n    import UserProduct from \"../objects/UserProduct\";\r\n    export default {\r\n        name: \"Background\",\r\n        data() {\r\n            return {\r\n                active: false,\r\n                popupopen: false,\r\n                hexColor: \"\",\r\n            };\r\n        },\r\n        computed: {\r\n            ...mapState([\"productInfo\", \"userProduct\"]),\r\n        },\r\n        destroyed() {\r\n        },\r\n        mounted() {\r\n        },\r\n        components: { PaletteColors, BackgroundImages },\r\n        methods: {\r\n            setColor(pcId) {\r\n                this.$store.dispatch(\"setUserProductPaletteColor\", pcId);\r\n                this.$store.dispatch(\"setUserProductBackgroundImage\", 0);\r\n                this.$refs.paletteColors.selectedflossId = pcId;\r\n                this.active = false;\r\n            },\r\n            setBackgroundImage(biId, biFile) {\r\n                this.$store.dispatch(\"setUserProductBackgroundImage\", biId);\r\n                //this.$store.dispatch(\"setUserProductPaletteColor\", 0);\r\n                this.$refs.backgroundImages.selectedBackgroundImageId = biId;\r\n                this.active = false;\r\n            },\r\n            openPopup: function (ev) {\r\n                this.active = true;\r\n                Globals.popupOpen = true;\r\n            },\r\n            closePopup: function () {\r\n                this.$emit(\"close-popup\");\r\n            },\r\n        },\r\n    };\r\n</script>\r\n<style></style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Background.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Background.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Background.vue?vue&type=template&id=1d812ad3&\"\nimport script from \"./Background.vue?vue&type=script&lang=js&\"\nexport * from \"./Background.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","var render = function () {\nvar this$1 = this;\nvar _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"options\"},[_c('a',{ref:\"optionselect\",staticClass:\"option-picker picker\",style:({\n       backgroundImage:\n       'url(' +\n       this.productInfo.options[0].productOptions\n       .find(function (o){ return o.productOptionId == this$1.userProduct.optionId; })\n        .productOptionOverlay +\n        ')',\n        }),attrs:{\"title\":'Selected Options : ' +\n        this.productInfo.options[0].productOptions.find(\n        function (o) { return o.productOptionId == this$1.userProduct.optionId; }\n        ).productOptionName},on:{\"click\":function($event){return _vm.openOptions()}}},[_c('span',[_vm._v(_vm._s(this.productInfo.options[0].productOptions.find(function (o) { return o.productOptionId == this$1.userProduct.optionId; }).productOptionName))])]),(_vm.active == true)?_c('div',{staticClass:\"popup\"},[_c('div',{staticClass:\"popup-content\"},[_c('div',{ref:\"carousel\",staticClass:\"option-list\"},_vm._l((_vm.productInfo.options[0].productOptions),function(o,index){return _c('div',{key:o.productOptionId,ref:'option-' + o.productOptionId,refInFor:true,class:[\n          'option',\n          { selected: o.productOptionId == _vm.userProduct.optionId } ],attrs:{\"data-id\":o.productOptionId,\"data-index\":index},on:{\"click\":function($event){return _vm.setOption(o.productOptionId, index)}}},[_c('div',[_c('div',[_c('img',{attrs:{\"alt\":o.productOptionName,\"src\":o.productOptionOverlay}})])]),_c('label',[_vm._v(\" \"+_vm._s(o.productOptionName)+\" \")])])}),0)]),_c('div',{staticClass:\"overlay\",on:{\"click\":function($event){_vm.active = false}}})]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class=\"options\">\r\n       \r\n        <a class=\"option-picker picker\"\r\n           ref=\"optionselect\"\r\n           @click=\"openOptions()\"\r\n           :style=\"{\r\n           backgroundImage:\r\n           'url(' +\r\n           this.productInfo.options[0].productOptions\r\n           .find((o)=>\r\n            o.productOptionId == this.userProduct.optionId)\r\n            .productOptionOverlay +\r\n            ')',\r\n            }\"\r\n            :title=\"\r\n            'Selected Options : ' +\r\n            this.productInfo.options[0].productOptions.find(\r\n            (o) => o.productOptionId == this.userProduct.optionId\r\n            ).productOptionName\r\n            \"\r\n            >\r\n            <span>{{this.productInfo.options[0].productOptions.find(o => o.productOptionId == this.userProduct.optionId).productOptionName}}</span>\r\n        </a>\r\n        <div v-if=\"active == true\" class=\"popup\">\r\n            <div class=\"popup-content\">\r\n                <!--<h2>Leather &amp; Buckle Options</h2>-->\r\n                <div ref=\"carousel\" class=\"option-list\">\r\n                    <div v-for=\"(o, index) in productInfo.options[0].productOptions\"\r\n                         :data-id=\"o.productOptionId\"\r\n                         :data-index=\"index\"\r\n                         :key=\"o.productOptionId\"\r\n                         v-on:click=\"setOption(o.productOptionId, index)\"\r\n                         v-bind:class=\"[\r\n              'option',\r\n              { selected: o.productOptionId == userProduct.optionId },\r\n            ]\"\r\n                         :ref=\"'option-' + o.productOptionId\">\r\n                        <div>\r\n                            <div>\r\n                                <img :alt=\"o.productOptionName\"\r\n                                     :src=\"o.productOptionOverlay\" />\r\n                            </div>\r\n                        </div>\r\n                        <label>\r\n                            {{ o.productOptionName }}\r\n                        </label>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"overlay\" @click=\"active = false\"></div>\r\n        </div>\r\n    </div>\r\n</template>\r\n<script>\r\n    import { mapState } from \"vuex\";\r\n\r\n    import Globals from \"@/globals.js\";\r\n    import UserProduct from \"../objects/UserProduct\";\r\n    export default {\r\n        name: \"Options\",\r\n        data() {\r\n            return {\r\n                active: false,\r\n                optionOverlay: \"\",\r\n                appRoot: Globals.appRoot,\r\n            };\r\n        },\r\n        computed: {\r\n            ...mapState([\"productInfo\", \"userProduct\"]),\r\n        },\r\n        mounted: function () { },\r\n        components: {  },\r\n        methods: {\r\n            setOption(oId, index) {\r\n                this.$store.dispatch(\"setUserProductOption\", oId);\r\n                this.active = false;\r\n            },\r\n            openOptions() {\r\n                this.active = true;\r\n            },\r\n        },\r\n    };\r\n</script>\r\n<style>\r\n    .option-list {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr 1fr 1fr;\r\n        margin: 1em;\r\n        grid-gap: .5em;\r\n    }\r\n    .option {\r\n        padding: 4px 0;\r\n        position: relative;\r\n        cursor:pointer;\r\n    }\r\n\r\n        .option > div {\r\n            position: relative;\r\n            border-radius: 2px;\r\n            padding: 2px;\r\n            outline: solid 2px #eee;\r\n        }\r\n\r\n        .option:hover > div {\r\n            outline: solid 2px #ccc;\r\n        }\r\n\r\n        .option.selected > div {\r\n            outline: solid 2px #666;\r\n            /* height: 100%; */\r\n            /* width: 100%; */\r\n        }\r\n\r\n        .option > div > div {\r\n            overflow: hidden;\r\n            height: 60px;\r\n            padding: 0;\r\n            background: #fff;\r\n            position: relative;\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .option img {\r\n            position: absolute;\r\n            left: 43%;\r\n            top: 50%;\r\n            transform: translate(-50%, -50%);\r\n            height: calc(100% - 1em);\r\n        }\r\n    .key-fob .option img {\r\n        transform: translate(-10%, -50%);\r\n        height: calc(100%);\r\n    }\r\n\r\n    .option:hover img {\r\n        height: calc(100% - 0.75em);\r\n    }\r\n    .key-fob .option:hover img {\r\n        height: calc(100% + .25em);\r\n    }\r\n\r\n        .option.selected label {\r\n            display: block;\r\n        }\r\n\r\n    .product-selections .option label {\r\n        font-size: 0.7rem;\r\n        padding: 0.5em 0 0;\r\n        width: 100%;\r\n        line-height: 1rem;\r\n        /*visibility: hidden;*/\r\n    }\r\n\r\n    .option:hover label {\r\n        display: block;\r\n        color: #9f9f9f;\r\n        visibility: visible;\r\n    }\r\n\r\n    .options .popup .popup-content {\r\n        padding-bottom: 0;\r\n    }\r\n\r\n    button.slick-arrow {\r\n        top: calc(50% - 1.75rem);\r\n    }\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Options.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Options.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Options.vue?vue&type=template&id=5caf84d4&\"\nimport script from \"./Options.vue?vue&type=script&lang=js&\"\nexport * from \"./Options.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Options.vue?vue&type=style&index=0&lang=css&\"\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    <div class=\"product-selections\">\r\n        <div class=\"size-picker\">\r\n            <label>Size</label>\r\n            <ProductSizes :isOpen=\"false\" :isPicker=\"true\" v-on=\"$listeners\" />\r\n        </div>\r\n        <div>\r\n            <label>Background</label>\r\n            <Background />\r\n        </div>\r\n        <div v-if=\"!isCanvas\">\r\n            <label>Options</label>\r\n            <Options />\r\n        </div>\r\n        <!--<div>\r\n          <label title=\"Motif Count\">Motifs</label>\r\n          <router-link\r\n            :class=\"[\r\n              'picker',\r\n              'no-arrow',\r\n              { inactive: this.$route.name == 'Design' },\r\n            ]\"\r\n            to=\"/motifs\"\r\n            :title=\"this.$route.name != 'Design' ? 'Go Back to Modify Design' : ''\"\r\n            >{{ productMotifs.length }}</router-link\r\n          >\r\n          <div></div>\r\n        </div>-->\r\n    </div>\r\n</template>\r\n<script>\r\n    import Background from \"@/components/Background.vue\";\r\n    import Options from \"@/components/Options.vue\";\r\n    import ProductSizes from \"@/components/ProductSizes.vue\";\r\n    import { mapState } from \"vuex\";\r\n    import UserProduct from \"../objects/UserProduct\";\r\n    export default {\r\n        name: \"ProductSelections\",\r\n        data() {\r\n            return {\r\n                active: false,\r\n                hexColor: \"\",\r\n            };\r\n        },\r\n        props: {\r\n            isCanvas: {\r\n                default: false,\r\n                type: Boolean,\r\n            },\r\n        },\r\n        computed: {\r\n            ...mapState([\"productInfo\", \"userProduct\", \"productMotifs\"]),\r\n        },\r\n        destroyed() {\r\n            // window.removeEventListener(\"resize\", this.checkScrollState);\r\n        },\r\n        mounted() { },\r\n        components: {\r\n            ProductSizes,\r\n            Background,\r\n            Options,\r\n        },\r\n        methods: {},\r\n    };\r\n</script>\r\n<style>\r\n    .product-selections {\r\n        display: flex;\r\n        flex: 1 1 auto;\r\n        -moz-column-gap: 1em;\r\n        column-gap: 1em;\r\n        justify-content: center;\r\n        min-width: 17em;\r\n    }\r\n\r\n        .product-selections > div {\r\n            text-align: center;\r\n            width: calc(33.33% - .67em);\r\n        }\r\n\r\n        .product-selections label {\r\n            font-size: 0.75em;\r\n            text-transform: uppercase;\r\n            line-height: 1.25rem;\r\n        }\r\n\r\n    .picker {\r\n        position: relative;\r\n        justify-content: center;\r\n        border: none;\r\n        width: 100%;\r\n        height: 2em;\r\n        display: flex;\r\n        margin: 2px;\r\n        border-radius: 3px;\r\n        font-weight: bold;\r\n        line-height: 2em;\r\n        color: #666;\r\n        text-decoration: none;\r\n    }\r\n\r\n        .picker:not(.inactive):hover {\r\n            cursor: pointer;\r\n        }\r\n\r\n    .size-picker .picker {\r\n        font-size: 1em;\r\n        padding: 0;\r\n        text-decoration: none;\r\n        background: #fff;\r\n        flex-flow: column;\r\n        text-align: center;\r\n    }\r\n\r\n    .option-picker {\r\n        background-size: auto 75%;\r\n        background-position: 70% 50%;\r\n        background-repeat: no-repeat;\r\n        background-color: #fff;\r\n    }\r\n\r\n    .key-fob .option-picker {\r\n        background-position: left center;\r\n        background-size: auto 100%;\r\n    }\r\n\r\n    .color-picker {\r\n        background-size: auto 100%;\r\n        -ms-interpolation-mode: nearest-neighbor;\r\n        image-rendering: -moz-crisp-edges;\r\n        image-rendering: pixelated;\r\n    }\r\n\r\n    .picker::after {\r\n        content: \"\\25BC\";\r\n        content: \"\\142F\";\r\n        position: absolute;\r\n        font-size: .35rem;\r\n        color: #333;\r\n        right: 2px;\r\n        top: 0;\r\n        line-height: 2rem;\r\n        /*! display: none; */\r\n        transform: scaleX(1.5);\r\n        /*! filter: drop-shadow(0 2px 0 #333); */\r\n        background: #f0efef;\r\n        padding: 0 2px;\r\n        border-left: #fff solid 2px;\r\n    }\r\n\r\n    .picker::before {\r\n        content: \"\";\r\n        border-radius: 3px;\r\n        position: absolute;\r\n        border: solid 1px #ccc;\r\n        top: -2px;\r\n        left: -2px;\r\n        right: -2px;\r\n        bottom: -2px;\r\n    }\r\n\r\n    .picker:not(.no-arrow):hover::after {\r\n        display: block;\r\n    }\r\n\r\n    .picker:not(.inactive):hover::before {\r\n        border-color: #666;\r\n    }\r\n\r\n    .picker.inactive {\r\n        pointer-events: none;\r\n    }\r\n\r\n    .picker > span {\r\n        display: none;\r\n    }\r\n\r\n    .product-selections .popup .popup-content {\r\n        top: unset;\r\n        transform: none;\r\n        left: unset;\r\n        padding: 0;\r\n        z-index: 104;\r\n        display: flex;\r\n        flex-direction: column;\r\n        max-height: calc(100vh - 12em);\r\n        margin-top: .5em;\r\n    }\r\n\r\n    .product-selections .popup {\r\n        position: unset;\r\n    }\r\n\r\n    .product-selections .overlay {\r\n        z-index: 102;\r\n        opacity: 0;\r\n    }\r\n\r\n    .product-selections .stop {\r\n        z-index: 103;\r\n        background: #fff;\r\n        background: url('/images/belts-bg.jpg');\r\n        background-size: cover;\r\n        opacity: 1;\r\n    }\r\n\r\n    @media only screen and (max-width: 750px) {\r\n        .product-selections .popup .popup-content {\r\n            left: 0;\r\n            right: 0;\r\n            max-width: unset;\r\n            width: 100%;\r\n        }\r\n    }\r\n\r\n    .product-selections .size-picker .popup .popup-content {\r\n        max-width: 928px;\r\n    }\r\n\r\n        .product-selections .size-picker .popup .popup-content .popup-scroll {\r\n            flex-shrink: 1;\r\n            overflow: auto;\r\n            border-bottom: solid 1px #eee;\r\n            padding: 0;\r\n            margin-bottom: 1em;\r\n        }\r\n\r\n        .product-selections .size-picker .popup .popup-content .popup-static {\r\n            padding: 0 1em;\r\n        }\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductSelections.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductSelections.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ProductSelections.vue?vue&type=template&id=15952af0&\"\nimport script from \"./ProductSelections.vue?vue&type=script&lang=js&\"\nexport * from \"./ProductSelections.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ProductSelections.vue?vue&type=style&index=0&lang=css&\"\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    <div class=\"motifs step\">\r\n        <div>\r\n            <div class=\"step-static\">\r\n                <div class=\"step-content\">\r\n                    <div class=\"search-area\">\r\n                        <ProductSelections v-on=\"$listeners\" />\r\n                        <div class=\"search-form\">\r\n                            <div>\r\n                                <label>Search Motifs</label>\r\n                                <div id=\"motifSearch\">\r\n                                    <input type=\"text\" ref=\"searchInput\" v-model=\"searchQuery\" placeholder=\"Enter keywords...\" />\r\n                                    <a class=\"delete\" @click=\"clearQuery \">&#10005;</a>\r\n                                </div>\r\n                            </div>\r\n                            <div>\r\n                                <label>Browse Motifs</label>\r\n                                <select id=\"motifCategorySelect\"\r\n                                        v-on:change=\"onMotifCategoryChange($event)\">\r\n                                    <option value=\"0\">Go to category..</option>\r\n                                    <option value=\"0\" v-if=\"searchQuery.length > 2\">\r\n                                        Search Results\r\n                                    </option>\r\n                                    <option v-for=\"mc in motifCatList\"\r\n                                            v-bind:value=\"mc.categoryId\"\r\n                                            :key=\"mc.categoryId\">\r\n                                        {{ mc.categoryName }}\r\n                                    </option>\r\n                                </select>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div id=\"scroll\" class=\"step-scroll\">\r\n                <div class=\"step-content\">\r\n                    <div class=\"motif-categories\">\r\n                        <div class=\"motif-category-area\" v-if=\"searchQuery.length > 2\">\r\n                            <h2>Search Results : {{ searchQuery }}</h2>\r\n                            <div class=\"motif-category\"\r\n                                 :list=\"filteredMotifs\"\r\n                                 :group=\"{ name: 'ProductMotifs', pull: 'clone', put: false }\"\r\n                                 :sort=\"false\"\r\n                                 :clone=\"onClone\"\r\n                                 @start=\"drag = true\"\r\n                                 @end=\"drag = false\">\r\n                                <transition-group tag=\"div\" class=\"category-motifs\" v-if=\"filteredMotifs.length>0\">\r\n                                    <div class=\"category-motif\"\r\n                                         v-for=\"m in filteredMotifs\"\r\n                                         :key=\"m\">\r\n                                        <Motif :m=\"motifList[m]\"\r\n                                               v-on:click.native=\"addMotif(motifList[m])\" />\r\n                                    </div>\r\n                                </transition-group>\r\n                                <div v-else>No motifs found that match \"{{ searchQuery }}\"</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"motif-category-area removable\" v-if=\"designMotifList.length > 0\">\r\n                            <h2>Your Motifs</h2>\r\n                            <div class=\"motif-category\"\r\n                                 :list=\"designMotifList\"\r\n                                 :group=\"{ name: 'ProductMotifs', pull: 'clone', put: false }\"\r\n                                 :sort=\"false\"\r\n                                 :clone=\"onClone\"\r\n                                 @start=\"drag = true\"\r\n                                 @end=\"drag = false\">\r\n                                <transition-group tag=\"div\" class=\"category-motifs\" >\r\n                                    <div class=\"category-motif\"\r\n                                         v-for=\"m in designMotifList\"\r\n                                         :key=\"m\">\r\n\r\n                                        <div class=\"remove\" v-on:click=\"removeMotifFromDesignList(m)\" title=\"Remove from your motifs list\"></div>\r\n                                        <Motif :m=\"motifList[m]\"\r\n                                               v-on:click.native=\"addMotif(motifList[m])\" />\r\n                                    </div>\r\n                                </transition-group>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"motif-category-area\"\r\n                             v-for=\"mc in motifCatList\"\r\n                             :key=\"mc.categoryId\"\r\n                             :data-id=\"mc.categoryId\">\r\n                            <h2>{{ mc.categoryName }}</h2>\r\n\r\n                            <div class=\"motif-category\"\r\n                                 :list=\"mc.motifIndexes\"\r\n                                 :group=\"{ name: 'ProductMotifs', pull: 'clone', put: false }\"\r\n                                 :sort=\"false\"\r\n                                 :clone=\"onClone\"\r\n                                 @start=\"drag = true\"\r\n                                 @end=\"drag = false\">\r\n                                <transition-group tag=\"div\"\r\n                                                  class=\"category-motifs\"\r\n                                                  :key=\"mc.categoryId\">\r\n                                    <div class=\"category-motif\"\r\n                                         v-for=\"m in mc.motifIndexes\"\r\n                                         :key=\"m\">\r\n                                        <Motif :m=\"motifList[m]\"\r\n                                               v-on:click.native=\"addMotif(motifList[m])\" />\r\n                                    </div>\r\n                                </transition-group>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<style>\r\n    .step.motifs {\r\n    }\r\n\r\n    .motif-categories {\r\n        min-height: 1000px;\r\n    }\r\n\r\n        .motif-categories h2 {\r\n            color: #288b7a;\r\n            font-size: 1.1em;\r\n            text-transform: uppercase;\r\n            font-weight: normal;\r\n            text-align: left;\r\n            line-height: 1.5em;\r\n            padding: 0 0.5em;\r\n            border-radius: 1px;\r\n            margin: 0 0 1em;\r\n            border-bottom: solid 1px;\r\n        }\r\n\r\n    .motif-category {\r\n        margin: 0.5em 0 1.5em;\r\n    }\r\n\r\n    .category-motif {\r\n        display: inline-block;\r\n    }\r\n\r\n        .category-motif .motif {\r\n            display: inline-block;\r\n            margin: 0.75em;\r\n        }\r\n\r\n    .removable .category-motif {\r\n        padding-top: .4em;\r\n        margin-top: -.4em;\r\n    }\r\n\r\n        .category-motif .remove {\r\n            position: absolute;\r\n            opacity: 0;\r\n            cursor: pointer;\r\n            color: #ccc;\r\n            width: 100%;\r\n            height: 1.2em;\r\n            line-height: 1.2em;\r\n            font-weight: bold;\r\n            left: 50%;\r\n            transform: translate(-50%, -.8em);\r\n        }\r\n\r\n        .category-motif:hover .remove {\r\n            opacity: 1;\r\n            transition: opacity .5s 2s;\r\n        }\r\n\r\n        .category-motif .remove::before {\r\n            left: calc(50% - 0.6em);\r\n            width: 1.2rem;\r\n            height: 1.2rem;\r\n            line-height: 1.2rem;\r\n            font-size: 0.8em;\r\n            border-radius: 100%;\r\n            content: \"\\2716\";\r\n            display: inline-block;\r\n        }\r\n\r\n        .category-motif .remove:hover::before {\r\n            background: #ccc;\r\n            color: #fff;\r\n        }\r\n\r\n    .category-motif {\r\n        position: relative;\r\n        display: flex;\r\n        justify-content: center;\r\n    }\r\n\r\n    .category-motifs {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        justify-content: center;\r\n    }\r\n\r\n    .category-motif .remove::before {\r\n        content: '\\2716';\r\n    }\r\n    .key-fob .category-motif .motif[data-wide=\"1\"] {\r\n        display: none;\r\n    }\r\n\r\n        .category-motif img {\r\n            height: 2em;\r\n            image-rendering: pixelated;\r\n            filter: drop-shadow(1px 1px 1px #666);\r\n        }\r\n\r\n        .category-motif:hover img {\r\n            filter: brightness(110%) drop-shadow(1px 1px 1px #666);\r\n            transform: scale(1.05);\r\n            cursor: pointer;\r\n        }\r\n\r\n    .custom-motif {\r\n    }\r\n\r\n    .motif-category-area {\r\n    }\r\n\r\n    .search-area {\r\n        display: flex;\r\n        column-gap: 1em;\r\n        justify-content: center;\r\n        row-gap: 1em;\r\n        margin:1em;\r\n\r\n    }\r\n\r\n    @media only screen and (max-width: 550px) {\r\n        .search-area {\r\n            flex-wrap: wrap;\r\n        }\r\n    }\r\n\r\n        .search-area > div {\r\n            flex: 1 1 auto;\r\n        }\r\n\r\n    .search-form {\r\n        display: flex;\r\n        -moz-column-gap: 1em;\r\n        column-gap: 1em;\r\n        justify-content: center;\r\n        row-gap: 1em;\r\n        flex: 1 1 auto;\r\n    }\r\n\r\n        .search-form > div {\r\n            width: 50%;\r\n        }\r\n\r\n    select#motifCategorySelect {\r\n        border: solid 1px #ccc;\r\n        height: calc(2em + 4px);\r\n        font-size: 1em;\r\n        width: 100%;\r\n        background: #fff;\r\n        border-radius: 2px;\r\n        color: #666;\r\n    }\r\n\r\n    #motifSearch {\r\n        position: relative;\r\n    }\r\n\r\n        #motifSearch input {\r\n            border: solid 1px #ccc;\r\n            height: calc(2em + 4px);\r\n            font-size: 1em;\r\n            width: 100%;\r\n            background: #fff;\r\n            border-radius: 2px;\r\n        }\r\n\r\n            #motifSearch input::placeholder {\r\n                color: #666;\r\n                opacity: 1;\r\n            }\r\n\r\n            #motifSearch input:focus::placeholder {\r\n                opacity: 0.3;\r\n            }\r\n\r\n        #motifSearch a {\r\n            display: none;\r\n        }\r\n\r\n        #motifSearch:hover input:not(:placeholder-shown) ~ a {\r\n            position: absolute;\r\n            line-height: 1.25em;\r\n            right: 0.5em;\r\n            background: #ccc;\r\n            color: #fff;\r\n            display: inline-block;\r\n            margin: calc(0.5em) 0;\r\n            border-radius: 100%;\r\n            width: 1.25em;\r\n            bottom: 0;\r\n            cursor: pointer;\r\n            z-index: 5;\r\n        }\r\n\r\n    .search-area label {\r\n        font-size: 0.75em;\r\n        text-transform: uppercase;\r\n        line-height: 1.25rem;\r\n    }\r\n</style>\r\n\r\n<script>\r\n    import ProductMotif from \"@/objects/ProductMotif.js\";\r\n    import Globals from \"@/globals.js\";\r\n    import ProductSelections from \"@/components/ProductSelections.vue\";\r\n\r\n    import Motif from \"@/components/Motif.vue\";\r\n    //import draggable from \"vuedraggable\";\r\n    import { mapState } from \"vuex\";\r\n\r\n    export default {\r\n        name: \"Motifs\",\r\n        components: {\r\n            Motif,\r\n            //draggable,\r\n            ProductSelections,\r\n        },\r\n        computed: {\r\n            ...mapState([\"motifList\", \"motifCatList\", \"productMotifs\", \"userProduct\"]),\r\n            filteredMotifs: function () {\r\n                let items = this.motifList;\r\n                var result = [];\r\n                if (this.searchQuery.length > 2) {\r\n                    Object.keys(items).forEach((key) => {\r\n                        const item = items[key];\r\n                        let searchFields = item.motifName + \" \" + item.motifTags;\r\n                        if (\r\n                            searchFields.toLowerCase().includes(this.searchQuery.toLowerCase())\r\n                        ) {\r\n                            result.push(item.motifIndex);\r\n                        }\r\n                    });\r\n\r\n                    let c = document.querySelector(\".step-scroll\");\r\n                    c.scroll({ top: 0, behavior: \"smooth\" });\r\n                }\r\n\r\n                return result;\r\n            },\r\n        },\r\n        data: function () {\r\n            return {\r\n                customizingMotif: null,\r\n                searchQuery: \"\",\r\n                designMotifList: [],\r\n            };\r\n        },\r\n        methods: {\r\n            onClone(motifIndex) {\r\n                let motif = this.$store.state.motifList[motifIndex];\r\n                if (motif.motifType == 1) {\r\n                    if (this.checkWidth(motif)) {\r\n                        let pmId = Globals.getUniquePMId(this.$store.state.productMotifs);\r\n                        let pm = new ProductMotif(motif, null, pmId);\r\n                        return pm;\r\n                    }\r\n                } else this.$emit(\"open-custom-motif\", motif);\r\n            },\r\n            addMotif(motif) {\r\n                if (!this.designMotifList.includes(motif.motifIndex))\r\n                        this.designMotifList.push(motif.motifIndex);\r\n                if (motif.motifType == 1) {\r\n                    if (this.checkWidth(motif)) \r\n                        this.$store.dispatch(\"addMotifToProduct\", motif);\r\n\r\n                } else {\r\n                    this.$emit(\"open-custom-motif\", motif);\r\n                }\r\n            },//removeMotifFromDesignList\r\n            removeMotifFromDesignList(mIndex) {\r\n\r\n                const index = this.designMotifList.indexOf(mIndex);\r\n\r\n                this.designMotifList.splice(index, 1);\r\n            },\r\n            checkWidth(motif) {\r\n                let hasSpace = Globals.checkWidth(this.$store, null, motif);\r\n                if (hasSpace) {\r\n                    return true;\r\n                } else {\r\n                    this.$emit(\"alert-width\", motif);\r\n                    return false;\r\n                }\r\n            },\r\n            initDesignMotifs() {\r\n                let items = this.$store.state.productMotifs;\r\n                Object.keys(items).forEach((key) => {\r\n                    const item = items[key];\r\n                    if (!this.designMotifList.includes(item.motifData.motifIndex))\r\n                        this.designMotifList.push(item.motifData.motifIndex);\r\n                });\r\n               \r\n            },\r\n            scrollToMotifCategory(catId) {\r\n                let topPos = 0;\r\n                let c = document.querySelector(\".step-scroll\");\r\n                if (catId != 0) {\r\n                    let e = document.querySelector(\r\n                        '.motif-category-area[data-id=\"' + catId + '\"]'\r\n                    );\r\n                    topPos = e.offsetTop - c.offsetTop;\r\n                }\r\n\r\n                c.scroll({ top: topPos, behavior: \"smooth\" });\r\n            },\r\n            onMotifCategoryChange(event) {\r\n                this.scrollToMotifCategory(event.target.value);\r\n            },\r\n            clearQuery() {\r\n                this.$refs.searchInput.focus();\r\n                this.searchQuery = '';\r\n            }\r\n        },\r\n        mounted: function () {\r\n            this.initDesignMotifs();\r\n        },\r\n    };\r\n</script>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Motifs.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Motifs.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Motifs.vue?vue&type=template&id=607f8d6a&\"\nimport script from \"./Motifs.vue?vue&type=script&lang=js&\"\nexport * from \"./Motifs.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Motifs.vue?vue&type=style&index=0&lang=css&\"\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","'use strict';\nvar $ = require('../internals/export');\nvar $includes = require('../internals/array-includes').includes;\nvar addToUnscopables = require('../internals/add-to-unscopables');\n\n// `Array.prototype.includes` method\n// https://tc39.es/ecma262/#sec-array.prototype.includes\n$({ target: 'Array', proto: true }, {\n  includes: function includes(el /* , fromIndex = 0 */) {\n    return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);\n  }\n});\n\n// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables\naddToUnscopables('includes');\n","export * from \"-!../../node_modules/vue-style-loader/index.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ProductSelections.vue?vue&type=style&index=0&lang=css&\"","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".product-selections{display:flex;flex:1 1 auto;-moz-column-gap:1em;column-gap:1em;justify-content:center;min-width:17em}.product-selections>div{text-align:center;width:calc(33.33% - .67em)}.product-selections label{font-size:.75em;text-transform:uppercase;line-height:1.25rem}.picker{position:relative;justify-content:center;border:none;width:100%;height:2em;display:flex;margin:2px;border-radius:3px;font-weight:700;line-height:2em;color:#666;text-decoration:none}.picker:not(.inactive):hover{cursor:pointer}.size-picker .picker{font-size:1em;padding:0;text-decoration:none;background:#fff;flex-flow:column;text-align:center}.option-picker{background-size:auto 75%;background-position:70% 50%;background-repeat:no-repeat;background-color:#fff}.key-fob .option-picker{background-position:0;background-size:auto 100%}.color-picker{background-size:auto 100%;-ms-interpolation-mode:nearest-neighbor;image-rendering:-moz-crisp-edges;image-rendering:pixelated}.picker:after{content:\\\"\\\\25BC\\\";content:\\\"\\\\142F\\\";position:absolute;font-size:.35rem;color:#333;right:2px;top:0;line-height:2rem;\\n    /*! display: none; */transform:scaleX(1.5);\\n    /*! filter: drop-shadow(0 2px 0 #333); */background:#f0efef;padding:0 2px;border-left:2px solid #fff}.picker:before{content:\\\"\\\";border-radius:3px;position:absolute;border:1px solid #ccc;top:-2px;left:-2px;right:-2px;bottom:-2px}.picker:not(.no-arrow):hover:after{display:block}.picker:not(.inactive):hover:before{border-color:#666}.picker.inactive{pointer-events:none}.picker>span{display:none}.product-selections .popup .popup-content{top:unset;transform:none;left:unset;padding:0;z-index:104;display:flex;flex-direction:column;max-height:calc(100vh - 12em);margin-top:.5em}.product-selections .popup{position:unset}.product-selections .overlay{z-index:102;opacity:0}.product-selections .stop{z-index:103;background:#fff;background:url(/images/belts-bg.jpg);background-size:cover;opacity:1}@media only screen and (max-width:750px){.product-selections .popup .popup-content{left:0;right:0;max-width:unset;width:100%}}.product-selections .size-picker .popup .popup-content{max-width:928px}.product-selections .size-picker .popup .popup-content .popup-scroll{flex-shrink:1;overflow:auto;border-bottom:1px solid #eee;padding:0;margin-bottom:1em}.product-selections .size-picker .popup .popup-content .popup-static{padding:0 1em}\", \"\"]);\n// Exports\nmodule.exports = exports;\n"],"sourceRoot":""}