main.0d5c9f3c5ac039a78e4f.bundle.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{399:function(module,exports,__webpack_require__){__webpack_require__(400),__webpack_require__(546),module.exports=__webpack_require__(547)},464:function(module,exports){},547:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _node_modules_storybook_vue_dist_client__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(391);module._StorybookPreserveDecorators=!0,Object(_node_modules_storybook_vue_dist_client__WEBPACK_IMPORTED_MODULE_0__.configure)([__webpack_require__(776)],module)}.call(this,__webpack_require__(548)(module))},776:function(module,exports,__webpack_require__){var map={"./loader.stories.js":855};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=776},855:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"basic",(function(){return basic}));__webpack_require__(777),__webpack_require__(370);var vue_esm=__webpack_require__(52),dist_button=__webpack_require__(392),button_default=__webpack_require__.n(dist_button),text_field=__webpack_require__(393),text_field_default=__webpack_require__.n(text_field),floating_label=__webpack_require__(394),floating_label_default=__webpack_require__.n(floating_label),line_ripple=__webpack_require__(395),line_ripple_default=__webpack_require__.n(line_ripple),layout_grid=__webpack_require__(396),layout_grid_default=__webpack_require__.n(layout_grid),card=__webpack_require__(397),card_default=__webpack_require__.n(card);__webpack_require__(799),__webpack_require__(800),__webpack_require__(801),__webpack_require__(802),__webpack_require__(803),__webpack_require__(804);vue_esm.default.use(button_default.a),vue_esm.default.use(text_field_default.a),vue_esm.default.use(floating_label_default.a),vue_esm.default.use(line_ripple_default.a),vue_esm.default.use(layout_grid_default.a),vue_esm.default.use(card_default.a);var dist=__webpack_require__(398),components_TextFieldvue_type_script_lang_js_={props:{value:{type:String},name:{type:String},title:{type:String},textarea:{type:Boolean,default:!1},error:{type:Boolean,default:!1},type:{type:String,default:"text"},errorMsg:{type:String,default:"error"}},data(){return{innerValue:this.value}},watch:{innerValue(newValue){const{name:name}=this;this.$emit("onChange",name,newValue)}}},componentNormalizer=__webpack_require__(154),components_Editorvue_type_script_lang_js_={components:{TextField:Object(componentNormalizer.a)(components_TextFieldvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("div",[_c("m-text-field",{style:{width:"100%",height:_vm.textarea?"300px":"auto"},attrs:{outlined:"",id:_vm.name,dense:!_vm.textarea,textarea:_vm.textarea,useNativeValidation:!1,type:_vm.type,valid:!_vm.error},model:{value:_vm.innerValue,callback:function($$v){_vm.innerValue=$$v},expression:"innerValue"}},[_c("m-floating-label",{attrs:{for:_vm.name}},[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]),_vm._v(" "),_c("m-line-ripple",{attrs:{slot:"bottomLine"},slot:"bottomLine"})],1),_vm._v(" "),_vm.error?_c("span",{style:{color:"#b00020"}},[_c("small",[_vm._v(_vm._s(_vm.errorMsg))])]):_vm._e()],1)}),[],!1,null,null,null).exports},props:{launchOptions:{type:String},globalOptions:{type:Object},token:{type:String},disabled:{type:Boolean,default:!0},error:{type:Object}},methods:{onClick(e){e.preventDefault(),this.$emit("onLaunch")},onChange(name,value){this.$emit("onChange",name,value)}}},Editor=Object(componentNormalizer.a)(components_Editorvue_type_script_lang_js_,(function(){var _vm=this,_h=_vm.$createElement,_c=_vm._self._c||_h;return _c("m-card",{attrs:{outlined:""}},[_c("form",{on:{submit:_vm.onClick}},[_c("m-layout-grid",[_c("m-layout-grid-inner",[_c("m-layout-grid-cell",{attrs:{span:6}},[_c("h3",[_vm._v("Global Options")]),_vm._v(" "),_c("m-layout-grid",[_c("m-layout-grid-inner",[_c("m-layout-grid-cell",{attrs:{span:12,spanDesktop:6}},[_c("text-field",{attrs:{value:_vm.globalOptions.baseUrl,title:"Kloudless API Server Base URL *",name:"baseUrl",error:_vm.error.globalOptions.baseUrl,errorMsg:"Required."},on:{onChange:_vm.onChange}})],1),_vm._v(" "),_c("m-layout-grid-cell",{attrs:{span:12,spanDesktop:6}},[_c("text-field",{attrs:{value:_vm.globalOptions.mapperPath,title:"Mapper Path *",name:"mapperPath",error:_vm.error.globalOptions.mapperPath,errorMsg:"Required."},on:{onChange:_vm.onChange}})],1)],1)],1)],1),_vm._v(" "),_c("m-layout-grid-cell",{attrs:{span:6}},[_c("h3",[_vm._v("Launch Options")]),_vm._v(" "),_c("m-layout-grid",[_c("m-layout-grid-inner",[_c("m-layout-grid-cell",{attrs:{span:12,spanDesktop:6}},[_c("text-field",{attrs:{value:_vm.token,type:"password",title:"Kloudless Account Token *",name:"token",error:_vm.error.token,errorMsg:"Required."},on:{onChange:_vm.onChange}})],1),_vm._v(" "),_c("m-layout-grid-cell",{attrs:{span:12,spanDesktop:6}},[_c("text-field",{attrs:{value:_vm.launchOptions,textarea:!0,title:"Launch Options",name:"launchOptions",error:_vm.error.launchOptions,errorMsg:"Invalid JSON format or missing 'appId' or 'kloudlessObjectName'."},on:{onChange:_vm.onChange}})],1)],1)],1)],1),_vm._v(" "),_c("m-layout-grid-cell",{attrs:{span:12,spanDesktop:6}},[_c("m-button",{staticClass:"j-launch-btn",attrs:{outlined:"",disabled:_vm.disabled},on:{click:_vm.onClick}},[_vm._v("\n            Launch\n          ")])],1)],1)],1)],1)])}),[],!1,null,null,null).exports;const EVENTS={OPEN:"open",CLOSE:"close",DESTROYED:"destroyed",SUCCESS:"success",ERROR:"error",CANCEL:"cancel"},EVENTS_LIST=Object.values(EVENTS);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],excluded.indexOf(key)>=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],excluded.indexOf(key)>=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}const DEFAULT_GLOBAL_OPTIONS={baseUrl:"https://api.kloudless.com",mapperPath:"https://static-cdn.kloudless.com/p/platform/mapper/v0/index.html"},DEFAULT_LAUNCH_OPTIONS={appId:"",token:"",mode:"modal",element:".dm",title:"Data Mapper!!",kloudlessObjectName:"contact",kloudlessObjectFriendlyName:"My Contact",kloudlessObjectFields:[{name:"id",friendlyName:"ID",description:"Contact ID"},{name:"name"},{name:"phone",friendlyName:"Phone"}],serviceObjectName:""};__webpack_exports__.default={title:"Data Mapper"};const basic=()=>function createStory(DataMapper){return{components:{Editor:Editor},data(){const{token:token=""}=DEFAULT_LAUNCH_OPTIONS,rest=_objectWithoutProperties(DEFAULT_LAUNCH_OPTIONS,["token"]);return{globalOptions:_objectSpread({},DEFAULT_GLOBAL_OPTIONS),launchOptions:JSON.stringify(rest,null,2),token:token}},computed:{jsonLaunchOptions(){try{return JSON.parse(this.launchOptions)}catch(ex){return null}},error(){const result={launchOptions:!1,token:!1,globalOptions:{baseUrl:!1,mapperPath:!1}},{globalOptions:{baseUrl:baseUrl,mapperPath:mapperPath},token:token,jsonLaunchOptions:jsonLaunchOptions}=this;if(baseUrl||(result.globalOptions.baseUrl=!0),mapperPath||(result.globalOptions.mapperPath=!0),token||(result.token=!0),null===jsonLaunchOptions)result.launchOptions=!0;else{const{appId:appId,kloudlessObjectName:kloudlessObjectName}=jsonLaunchOptions;appId&&kloudlessObjectName||(result.launchOptions=!0)}return result},valid(){const{launchOptions:launchOptions,token:token,globalOptions:{baseUrl:baseUrl,mapperPath:mapperPath}}=this.error;return!(token||launchOptions||baseUrl||mapperPath)}},beforeDestroy(){this.destroyMapper()},methods:{onChange(name,value){Object.keys(this.globalOptions).includes(name)?this.globalOptions[name]=value:this[name]=value},destroyMapper(){this.mapper&&this.mapper.destroy()},bindEventHandlers(){EVENTS_LIST.forEach(event=>{const actionEventHandler=Object(dist.action)(event);this.mapper.on(event,(...args)=>{actionEventHandler(...args),window.puppeteerEventHandler&&window.puppeteerEventHandler(event,...args)})})},onLaunch(){const{valid:valid,jsonLaunchOptions:jsonLaunchOptions,token:token,globalOptions:globalOptions}=this;valid&&(this.destroyMapper(),DataMapper.setOptions(globalOptions),this.mapper=new DataMapper,this.bindEventHandlers(),this.mapper.launch(_objectSpread(_objectSpread({},jsonLaunchOptions),{},{token:token})),this.launchOptions=JSON.stringify(jsonLaunchOptions,null,2))}},template:'\n      <div>\n        <editor\n          @onChange="onChange"\n          @onLaunch="onLaunch"\n          :error="error"\n          :disabled="!valid"\n          :token="token"\n          :launchOptions="launchOptions"\n          :globalOptions="globalOptions">\n        </editor>\n        <div class="dm"></div>\n      </div>'}}(window.Kloudless.mapper)}},[[399,1,2]]]);
//# sourceMappingURL=main.0d5c9f3c5ac039a78e4f.bundle.js.map