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