@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
1 lines • 3.91 kB
JavaScript
(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[39],{872:function(t,e){t.exports='<style>\n :host {\n width: 100%;\n height: 100%;\n }\n #pantone-cp body{\n margin: 0;\n }\n</style>\n\n<iframe id="pantone-cp" width="100%" height="100%" style="border: none"></iframe>\n'},941:function(t,e,i){"use strict";i.r(e),i.d(e,"AuWidgetPantoneColorPicker",(function(){return c})),i.d(e,"widget",(function(){return c}));var n=i(0),s=i(1),a=i(160),o=i(2),r=i(872);let c=class extends a.c{constructor(){super(),this._isRestoring=!1,this.__isLocalesInited=!1,this._initIFrame=this._initIFrame.bind(this)}updateParams(t,e){var i;null===(i=this._element)||void 0===i||i.setPantoneConfig(t),this.config=t}async exportWidgetData(t){return{color:this.selectedColor}}async restoreWidgetFromData(t,e){t&&this.selectedColor!==t.color&&(this._isRestoring=!0,this._element.setPrevColor(t.color),this.emitChange()),this._isRestoring=!1}async updateParamsAsync(t,e){const i=Object.assign({},t);await super.updateParamsAsync(i,e),this._src||await this._loadResources(),i&&!this._frameIsReady&&this._initIFrame(),this._element=await this._getWebComponent(),this._element&&(!i.height||isNaN(Number(i.height))?this._iFrameEl.height="275px":this._iFrameEl.height=i.height.includes("px")?i.height:i.height+"px",this._translations&&this._element.setTranslation(this._translations),i.lang=this.language.slice(0,2),this._element.setPantoneConfig(i),this._element.changed$().subscribe((t=>{console.warn(t),this.selectedColor=t,this.emitChange()})),console.log("upd conf",i))}async _loadResources(){const t=Date.now(),e=`${s.a.getPatchedUrl("static/pantone-color-picker/script.html")}?t=${t}`;this._src=await s.a.loadHtml(e),this._localize()}async _getPickerLocalesFile(){const t=Date.now(),e=`${s.a.getPatchedUrl("static/pantone-color-picker/locales.json")}?t=${t}`;return s.a.loadJson(e)}async _localize(){var t,e;if(this.__isLocalesInited)return;const i=null===(e=null===(t=this.driver)||void 0===t?void 0:t.localization)||void 0===e?void 0:e.find((t=>"preflight"===t.app));if(i&&"string"==typeof i.url&&""!==i.url)try{this._translations=await s.a.loadJson(i.url+"?ts="+Date.now())}catch(n){console.error(n),this._translations=await this._getPickerLocalesFile()}else this._translations=await this._getPickerLocalesFile(),i&&"object"==typeof i.data&&0!==Object.keys(i.data).length&&(this._translations=-1!==Object.keys(i.data).indexOf(this.language)?s.a.DeepMerge(this._translations,i.data):s.a.DeepMerge(this._translations,{[this.language]:i.data}));this.__isLocalesInited=!0}_initIFrame(){this._iFrameEl=this.querySelectorShadow("#pantone-cp"),this._iframeWin=this._iFrameEl||this._iFrameEl.contentWindow,this._iframeDoc=this._iFrameEl.contentDocument||this._iframeWin.document,this._iframeDoc.write(this._src),this._iframeDoc.write("<style> body{margin: 0} </style>"),this._iframeDoc.write('<div style="width:100%; height:100%">\n <au-pantone-color-picker id="au-pantone-color-picker"></au-pantone-color-picker>\n </div>'),this._frameIsReady=!0}async _getWebComponent(){if(this._element)return Promise.resolve(this._element);try{const t=await this._waitWebComponent(this._iframeDoc,"au-pantone-color-picker");return window.Aurigma=Object.assign(window.Aurigma,this._iframeWin.contentWindow.Aurigma),t}catch(t){this.showToast(t)}}_waitWebComponent(t,e){return new Promise(((i,n)=>(()=>{const i=(n,s)=>{setTimeout((()=>{if(!t)return void s(new Error("Can't find element. Document not found"));const a=t.getElementById(e);a?n(a):i(n,s)}),200)};return i})()(i,n)))}};Object(n.a)([Object(o.c)(),Object(n.b)("design:type",String)],c.prototype,"format",void 0),Object(n.a)([Object(o.c)(),Object(n.b)("design:type",class{})],c.prototype,"config",void 0),c=Object(n.a)([Object(o.a)("au-widget-pantone-color-picker",r),Object(n.b)("design:paramtypes",[])],c)}}]);