"use strict";(self.webpackChunkdotcms_ui=self.webpackChunkdotcms_ui||[]).push([[4043],{74043:(y,u,l)=>{l.r(u),l.d(u,{dot_html_to_image:()=>n});var a=l(55956),c=l(62254),g=l(77717),f=l(93642);class m extends c.L{constructor(){super(...arguments),this.indeterminate=!1,this.progress=0,this.density=0,this.closed=!1,this.ariaLabel=""}open(){this.closed=!1}close(){this.closed=!0}render(){const e=48+4*this.density,t={width:`${e}px`,height:`${e}px`};return c.h`
      <div
        class="mdc-circular-progress ${(0,g.c)({"mdc-circular-progress--closed":this.closed,"mdc-circular-progress--indeterminate":this.indeterminate})}"
        style="${(0,g.s)(t)}"
        role="progressbar"
        aria-label="${this.ariaLabel}"
        aria-valuemin="0"
        aria-valuemax="1"
        aria-valuenow="${(0,f.i)(this.indeterminate?void 0:this.progress)}">
        ${this.renderDeterminateContainer()}
        ${this.renderIndeterminateContainer()}
      </div>`}renderDeterminateContainer(){const r=48+4*this.density,e=r/2,t=this.density>=-3?18+11*this.density/6:12.5+5*(this.density+3)/4,h=this.density>=-3?4+this.density*(1/3):3+(this.density+3)*(1/6);return c.h`
      <div class="mdc-circular-progress__determinate-container">
        <svg class="mdc-circular-progress__determinate-circle-graphic"
             viewBox="0 0 ${r} ${r}">
          <circle class="mdc-circular-progress__determinate-track"
                  cx="${e}" cy="${e}" r="${t}"
                  stroke-width="${h}"></circle>
          <circle class="mdc-circular-progress__determinate-circle"
                  cx="${e}" cy="${e}" r="${t}"
                  stroke-dasharray="${6.2831852*t}"
                  stroke-dashoffset="${6.2831852*t*(1-this.progress)}"
                  stroke-width="${h}"></circle>
        </svg>
      </div>`}renderIndeterminateContainer(){return c.h`
      <div class="mdc-circular-progress__indeterminate-container">
        <div class="mdc-circular-progress__spinner-layer">
          ${this.renderIndeterminateSpinnerLayer()}
        </div>
      </div>`}renderIndeterminateSpinnerLayer(){const r=48+4*this.density,e=r/2,t=this.density>=-3?18+11*this.density/6:12.5+5*(this.density+3)/4,d=6.2831852*t,p=.5*d,h=this.density>=-3?4+this.density*(1/3):3+(this.density+3)*(1/6);return c.h`
        <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
          <svg class="mdc-circular-progress__indeterminate-circle-graphic"
               viewBox="0 0 ${r} ${r}">
            <circle cx="${e}" cy="${e}" r="${t}"
                    stroke-dasharray="${d}"
                    stroke-dashoffset="${p}"
                    stroke-width="${h}"></circle>
          </svg>
        </div>
        <div class="mdc-circular-progress__gap-patch">
          <svg class="mdc-circular-progress__indeterminate-circle-graphic"
               viewBox="0 0 ${r} ${r}">
            <circle cx="${e}" cy="${e}" r="${t}"
                    stroke-dasharray="${d}"
                    stroke-dashoffset="${p}"
                    stroke-width="${.8*h}"></circle>
          </svg>
        </div>
        <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
          <svg class="mdc-circular-progress__indeterminate-circle-graphic"
               viewBox="0 0 ${r} ${r}">
            <circle cx="${e}" cy="${e}" r="${t}"
                    stroke-dasharray="${d}"
                    stroke-dashoffset="${p}"
                    stroke-width="${h}"></circle>
          </svg>
        </div>`}update(r){super.update(r),r.has("progress")&&(this.progress>1&&(this.progress=1),this.progress<0&&(this.progress=0))}}(0,c._)([(0,c.p)({type:Boolean,reflect:!0})],m.prototype,"indeterminate",void 0),(0,c._)([(0,c.p)({type:Number,reflect:!0})],m.prototype,"progress",void 0),(0,c._)([(0,c.p)({type:Number,reflect:!0})],m.prototype,"density",void 0),(0,c._)([(0,c.p)({type:Boolean,reflect:!0})],m.prototype,"closed",void 0),(0,c._)([(0,c.p)({type:String})],m.prototype,"ariaLabel",void 0);const _=c.c`.mdc-circular-progress__determinate-circle,.mdc-circular-progress__indeterminate-circle-graphic{stroke:#6200ee;stroke:var(--mdc-theme-primary, #6200ee)}.mdc-circular-progress__determinate-track{stroke:transparent}@keyframes mdc-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes mdc-circular-progress-color-1-fade-in-out{from{opacity:.99}25%{opacity:.99}26%{opacity:0}89%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes mdc-circular-progress-color-2-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-3-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-4-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes mdc-circular-progress-left-spin{from{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes mdc-circular-progress-right-spin{from{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}.mdc-circular-progress{display:inline-flex;position:relative;direction:ltr;transition:opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1)}.mdc-circular-progress__determinate-container,.mdc-circular-progress__indeterminate-circle-graphic,.mdc-circular-progress__indeterminate-container,.mdc-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.mdc-circular-progress__determinate-container{transform:rotate(-90deg)}.mdc-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.mdc-circular-progress__determinate-circle-graphic,.mdc-circular-progress__indeterminate-circle-graphic{fill:transparent}.mdc-circular-progress__determinate-circle{transition:stroke-dashoffset 500ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.mdc-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic{width:200%}.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{left:-100%}.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container{opacity:0}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{opacity:1}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{animation:mdc-circular-progress-container-rotate 1568.2352941176ms linear infinite}.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-1{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-2{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-3{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-4{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--closed{opacity:0}:host{display:inline-flex}.mdc-circular-progress__determinate-track{stroke:transparent;stroke:var(--mdc-circular-progress-track-color, transparent)}`;let o=class extends m{};o.styles=_,o=(0,c._)([(0,c.b)("mwc-circular-progress")],o);const n=class{constructor(s){(0,a.r)(this,s),this.pageThumbnail=(0,a.c)(this,"pageThumbnail",7),this.boundOnMessageHandler=null,this.iframeId=`iframe_${Math.floor(Date.now()/1e3).toString()}`,this.loadScript=`\n        html2canvas(document.body, {\n            height: IMG_HEIGHT, // The height of the canvas\n            windowHeight: IMG_HEIGHT, // Window height to use when rendering Element\n            width: IMG_WIDTH, // The width of the canvas\n            windowWidth: IMG_WIDTH, // Window width to use when rendering Element\n        }).then((canvas) => {\n            canvas.toBlob((blob) => {\n                const fileObj = new File([blob], 'image.png');\n                window.parent.postMessage({\n                    iframeId: '${this.iframeId}',\n                    previewImg: canvas.toDataURL(),\n                    fileObj\n                }, '*')\n            });\n        }).catch(function (error) {\n            window.parent.postMessage({\n                iframeId: '${this.iframeId}',\n                error\n            }, '*')\n        });\n    ;`,this.value="",this.height="",this.width="",this.previewImg=void 0}componentDidLoad(){const s=document.querySelector(`#${this.iframeId}`),r=s.contentDocument||s.contentWindow.document;r.open(),r.write(this.value),r.close();const e=document.createElement("script");e.src="/html/js/html2canvas/html2canvas.min.js",e.type="text/javascript",e.onload=()=>{s.addEventListener("load",()=>{const t=document.createElement("script");t.type="text/javascript",t.text=this.width?this.loadScript.replace(/IMG_HEIGHT/g,this.height).replace(/IMG_WIDTH/g,this.width):this.loadScript,r.body.appendChild(t)})},r.body.append(e),this.boundOnMessageHandler=this.onMessageHandler.bind(null,s,this),window.addEventListener("message",this.boundOnMessageHandler)}render(){return(0,a.h)(a.H,null,this.previewImg?"":(0,a.h)("mwc-circular-progress",{indeterminate:!0}),(0,a.h)("iframe",{id:this.iframeId}))}disconnectedCallback(){window.removeEventListener("message",this.boundOnMessageHandler)}onMessageHandler(s,r,e){if(e.data.iframeId!==r.iframeId)return;if(e.data.error)return void r.pageThumbnail.emit({file:null,error:e.data.error});const{previewImg:t,fileObj:d}=e.data;r.previewImg=t;const p=document.createElement("img");p.src=t,p.style.width="100%",s.parentElement.appendChild(p),r.pageThumbnail.emit({file:d})}};n.style="dot-html-to-image{display:flex;flex-direction:column;align-items:center}dot-html-to-image iframe{border:0;height:0;width:0}dot-html-to-image mwc-circular-progress{--mdc-theme-primary:var(--color-main)}"},77717:(y,u,l)=>{l.d(u,{c:()=>f,s:()=>_});var a=l(62254);class c{constructor(i){this.classes=new Set,this.changed=!1,this.element=i;const n=(i.getAttribute("class")||"").split(/\s+/);for(const s of n)this.classes.add(s)}add(i){this.classes.add(i),this.changed=!0}remove(i){this.classes.delete(i),this.changed=!0}commit(){if(this.changed){let i="";this.classes.forEach(n=>i+=n+" "),this.element.setAttribute("class",i)}}}const g=new WeakMap,f=(0,a.d)(o=>i=>{if(!(i instanceof a.A)||i instanceof a.P||"class"!==i.committer.name||i.committer.parts.length>1)throw new Error("The `classMap` directive must be used in the `class` attribute and must be the only part in the attribute.");const{committer:n}=i,{element:s}=n;let r=g.get(i);void 0===r&&(s.setAttribute("class",n.strings.join(" ")),g.set(i,r=new Set));const e=s.classList||new c(s);r.forEach(t=>{t in o||(e.remove(t),r.delete(t))});for(const t in o){const d=o[t];d!=r.has(t)&&(d?(e.add(t),r.add(t)):(e.remove(t),r.delete(t)))}"function"==typeof e.commit&&e.commit()}),m=new WeakMap,_=(0,a.d)(o=>i=>{if(!(i instanceof a.A)||i instanceof a.P||"style"!==i.committer.name||i.committer.parts.length>1)throw new Error("The `styleMap` directive must be used in the style attribute and must be the only part in the attribute.");const{committer:n}=i,{style:s}=n.element;let r=m.get(i);void 0===r&&(s.cssText=n.strings.join(" "),m.set(i,r=new Set)),r.forEach(e=>{e in o||(r.delete(e),-1===e.indexOf("-")?s[e]=null:s.removeProperty(e))});for(const e in o)r.add(e),-1===e.indexOf("-")?s[e]=o[e]:s.setProperty(e,o[e])})}}]);