@creaditor/newsletter-starterkit
Version:
Creaditor Newsletter Editor - Starterkit for creating beautiful email newsletters
318 lines (297 loc) • 31.8 kB
JavaScript
/*! For license information please see 1030.creaditor.bundle.js.LICENSE.txt */
;(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[1030],{61030:(t,e,i)=>{i.r(e),i.d(e,{AttachedFilesPlugin:()=>gt});const s=globalThis,r=s.ShadowRoot&&(void 0===s.ShadyCSS||s.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,o=Symbol(),n=new WeakMap;let l=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==o)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(r&&void 0===t){const i=void 0!==e&&1===e.length;i&&(t=n.get(e)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),i&&n.set(e,t))}return t}toString(){return this.cssText}};const a=r?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const i of t.cssRules)e+=i.cssText;return(t=>new l("string"==typeof t?t:t+"",void 0,o))(e)})(t):t,{is:h,defineProperty:d,getOwnPropertyDescriptor:c,getOwnPropertyNames:p,getOwnPropertySymbols:u,getPrototypeOf:f}=Object,g=globalThis,v=g.trustedTypes,m=v?v.emptyScript:"",$=g.reactiveElementPolyfillSupport,y=(t,e)=>t,_={toAttribute(t,e){switch(e){case Boolean:t=t?m:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let i=t;switch(e){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t)}catch{i=null}}return i}},x=(t,e)=>!h(t,e),b={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:x};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),g.litPropertyMetadata??(g.litPropertyMetadata=new WeakMap);let A=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:b;if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const i=Symbol(),s=this.getPropertyDescriptor(t,i,e);void 0!==s&&d(this.prototype,t,s)}}static getPropertyDescriptor(t,e,i){const{get:s,set:r}=c(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:s,set(e){const o=null==s?void 0:s.call(this);null==r||r.call(this,e),this.requestUpdate(t,o,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(y("elementProperties")))return;const t=f(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(y("properties"))){const t=this.properties,e=[...p(t),...u(t)];for(const i of e)this.createProperty(i,t[i])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,i]of e)this.elementProperties.set(t,i)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const i=this._$Eu(t,e);void 0!==i&&this._$Eh.set(i,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const i=new Set(t.flat(1/0).reverse());for(const t of i)e.unshift(a(t))}else void 0!==t&&e.push(a(t));return e}static _$Eu(t,e){const i=e.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),null==(t=this.constructor.l)||t.forEach((t=>t(this)))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),void 0!==this.renderRoot&&this.isConnected&&(null==(e=t.hostConnected)||e.call(t))}removeController(t){var e;null==(e=this._$EO)||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const i of e.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((t,e)=>{if(r)t.adoptedStyleSheets=e.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const i of e){const e=document.createElement("style"),r=s.litNonce;void 0!==r&&e.setAttribute("nonce",r),e.textContent=i.cssText,t.appendChild(e)}})(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null==(t=this._$EO)||t.forEach((t=>{var e;return null==(e=t.hostConnected)?void 0:e.call(t)}))}enableUpdating(t){}disconnectedCallback(){var t;null==(t=this._$EO)||t.forEach((t=>{var e;return null==(e=t.hostDisconnected)?void 0:e.call(t)}))}attributeChangedCallback(t,e,i){this._$AK(t,i)}_$ET(t,e){var i;const s=this.constructor.elementProperties.get(t),r=this.constructor._$Eu(t,s);if(void 0!==r&&!0===s.reflect){const o=(void 0!==(null==(i=s.converter)?void 0:i.toAttribute)?s.converter:_).toAttribute(e,s.type);this._$Em=t,null==o?this.removeAttribute(r):this.setAttribute(r,o),this._$Em=null}}_$AK(t,e){var i,s;const r=this.constructor,o=r._$Eh.get(t);if(void 0!==o&&this._$Em!==o){const t=r.getPropertyOptions(o),n="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null==(i=t.converter)?void 0:i.fromAttribute)?t.converter:_;this._$Em=o;const l=n.fromAttribute(e,t.type);this[o]=l??(null==(s=this._$Ej)?void 0:s.get(o))??l,this._$Em=null}}requestUpdate(t,e,i){var s;if(void 0!==t){const r=this.constructor,o=this[t];if(i??(i=r.getPropertyOptions(t)),!((i.hasChanged??x)(o,e)||i.useDefault&&i.reflect&&o===(null==(s=this._$Ej)?void 0:s.get(t))&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,e,i)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,i,s){let{useDefault:r,reflect:o,wrapped:n}=i;r&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,s??e??this[t]),!0!==n||void 0!==s)||(this._$AL.has(t)||(this.hasUpdated||r||(e=void 0),this._$AL.set(t,e)),!0===o&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,i]of t){const{wrapped:t}=i,s=this[e];!0!==t||this._$AL.has(e)||void 0===s||this.C(e,void 0,i,s)}}let e=!1;const i=this._$AL;try{e=this.shouldUpdate(i),e?(this.willUpdate(i),null==(t=this._$EO)||t.forEach((t=>{var e;return null==(e=t.hostUpdate)?void 0:e.call(t)})),this.update(i)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(i)}willUpdate(t){}_$AE(t){var e;null==(e=this._$EO)||e.forEach((t=>{var e;return null==(e=t.hostUpdated)?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach((t=>this._$ET(t,this[t])))),this._$EM()}updated(t){}firstUpdated(t){}};A.elementStyles=[],A.shadowRootOptions={mode:"open"},A[y("elementProperties")]=new Map,A[y("finalized")]=new Map,null==$||$({ReactiveElement:A}),(g.reactiveElementVersions??(g.reactiveElementVersions=[])).push("2.1.1");const w=globalThis,E=w.trustedTypes,S=E?E.createPolicy("lit-html",{createHTML:t=>t}):void 0,C="$lit$",L=`lit$${Math.random().toFixed(9).slice(2)}$`,z="?"+L,P=`<${z}>`,M=document,T=()=>M.createComment(""),H=t=>null===t||"object"!=typeof t&&"function"!=typeof t,O=Array.isArray,U="[ \t\n\f\r]",F=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,R=/-->/g,k=/>/g,N=RegExp(`>|${U}(?:([^\\s"'>=/]+)(${U}*=${U}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),j=/'/g,V=/"/g,B=/^(?:script|style|textarea|title)$/i,D=(K=1,function(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),s=1;s<e;s++)i[s-1]=arguments[s];return{_$litType$:K,strings:t,values:i}}),q=Symbol.for("lit-noChange"),I=Symbol.for("lit-nothing"),Z=new WeakMap,W=M.createTreeWalker(M,129);var K;function J(t,e){if(!O(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==S?S.createHTML(e):e}class G{constructor(t,e){let i,{strings:s,_$litType$:r}=t;this.parts=[];let o=0,n=0;const l=s.length-1,a=this.parts,[h,d]=((t,e)=>{const i=t.length-1,s=[];let r,o=2===e?"<svg>":3===e?"<math>":"",n=F;for(let e=0;e<i;e++){const i=t[e];let l,a,h=-1,d=0;for(;d<i.length&&(n.lastIndex=d,a=n.exec(i),null!==a);)d=n.lastIndex,n===F?"!--"===a[1]?n=R:void 0!==a[1]?n=k:void 0!==a[2]?(B.test(a[2])&&(r=RegExp("</"+a[2],"g")),n=N):void 0!==a[3]&&(n=N):n===N?">"===a[0]?(n=r??F,h=-1):void 0===a[1]?h=-2:(h=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?N:'"'===a[3]?V:j):n===V||n===j?n=N:n===R||n===k?n=F:(n=N,r=void 0);const c=n===N&&t[e+1].startsWith("/>")?" ":"";o+=n===F?i+P:h>=0?(s.push(l),i.slice(0,h)+C+i.slice(h)+L+c):i+L+(-2===h?e:c)}return[J(t,o+(t[i]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),s]})(s,r);if(this.el=G.createElement(h,e),W.currentNode=this.el.content,2===r||3===r){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=W.nextNode())&&a.length<l;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(C)){const e=d[n++],s=i.getAttribute(t).split(L),r=/([.?@])?(.*)/.exec(e);a.push({type:1,index:o,name:r[2],strings:s,ctor:"."===r[1]?et:"?"===r[1]?it:"@"===r[1]?st:tt}),i.removeAttribute(t)}else t.startsWith(L)&&(a.push({type:6,index:o}),i.removeAttribute(t));if(B.test(i.tagName)){const t=i.textContent.split(L),e=t.length-1;if(e>0){i.textContent=E?E.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],T()),W.nextNode(),a.push({type:2,index:++o});i.append(t[e],T())}}}else if(8===i.nodeType)if(i.data===z)a.push({type:2,index:o});else{let t=-1;for(;-1!==(t=i.data.indexOf(L,t+1));)a.push({type:7,index:o}),t+=L.length-1}o++}}static createElement(t,e){const i=M.createElement("template");return i.innerHTML=t,i}}function Q(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:t,s=arguments.length>3?arguments[3]:void 0;var r,o;if(e===q)return e;let n=void 0!==s?null==(r=i._$Co)?void 0:r[s]:i._$Cl;const l=H(e)?void 0:e._$litDirective$;return(null==n?void 0:n.constructor)!==l&&(null==(o=null==n?void 0:n._$AO)||o.call(n,!1),void 0===l?n=void 0:(n=new l(t),n._$AT(t,i,s)),void 0!==s?(i._$Co??(i._$Co=[]))[s]=n:i._$Cl=n),void 0!==n&&(e=Q(t,n._$AS(t,e.values),n,s)),e}class X{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:i}=this._$AD,s=((null==t?void 0:t.creationScope)??M).importNode(e,!0);W.currentNode=s;let r=W.nextNode(),o=0,n=0,l=i[0];for(;void 0!==l;){if(o===l.index){let e;2===l.type?e=new Y(r,r.nextSibling,this,t):1===l.type?e=new l.ctor(r,l.name,l.strings,this,t):6===l.type&&(e=new rt(r,this,t)),this._$AV.push(e),l=i[++n]}o!==(null==l?void 0:l.index)&&(r=W.nextNode(),o++)}return W.currentNode=M,s}p(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class Y{get _$AU(){var t;return(null==(t=this._$AM)?void 0:t._$AU)??this._$Cv}constructor(t,e,i,s){this.type=2,this._$AH=I,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cv=(null==s?void 0:s.isConnected)??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t){t=Q(this,t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:this),H(t)?t===I||null==t||""===t?(this._$AH!==I&&this._$AR(),this._$AH=I):t!==this._$AH&&t!==q&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>O(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==I&&H(this._$AH)?this._$AA.nextSibling.data=t:this.T(M.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:s}=t,r="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=G.createElement(J(s.h,s.h[0]),this.options)),s);if((null==(e=this._$AH)?void 0:e._$AD)===r)this._$AH.p(i);else{const t=new X(r,this),e=t.u(this.options);t.p(i),this.T(e),this._$AH=t}}_$AC(t){let e=Z.get(t.strings);return void 0===e&&Z.set(t.strings,e=new G(t)),e}k(t){O(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const r of t)s===e.length?e.push(i=new Y(this.O(T()),this.O(T()),this,this.options)):i=e[s],i._$AI(r),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this._$AA.nextSibling,e=arguments.length>1?arguments[1]:void 0;var i;for(null==(i=this._$AP)||i.call(this,!1,!0,e);t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cv=t,null==(e=this._$AP)||e.call(this,t))}}class tt{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,i,s,r){this.type=1,this._$AH=I,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=r,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=I}_$AI(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this,i=arguments.length>2?arguments[2]:void 0,s=arguments.length>3?arguments[3]:void 0;const r=this.strings;let o=!1;if(void 0===r)t=Q(this,t,e,0),o=!H(t)||t!==this._$AH&&t!==q,o&&(this._$AH=t);else{const s=t;let n,l;for(t=r[0],n=0;n<r.length-1;n++)l=Q(this,s[i+n],e,n),l===q&&(l=this._$AH[n]),o||(o=!H(l)||l!==this._$AH[n]),l===I?t=I:t!==I&&(t+=(l??"")+r[n+1]),this._$AH[n]=l}o&&!s&&this.j(t)}j(t){t===I?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class et extends tt{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===I?void 0:t}}class it extends tt{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==I)}}class st extends tt{constructor(t,e,i,s,r){super(t,e,i,s,r),this.type=5}_$AI(t){if((t=Q(this,t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:this,0)??I)===q)return;const e=this._$AH,i=t===I&&e!==I||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,s=t!==I&&(e===I||i);i&&this.element.removeEventListener(this.name,this,e),s&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e;"function"==typeof this._$AH?this._$AH.call((null==(e=this.options)?void 0:e.host)??this.element,t):this._$AH.handleEvent(t)}}class rt{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const ot=w.litHtmlPolyfillSupport;null==ot||ot(G,Y),(w.litHtmlVersions??(w.litHtmlVersions=[])).push("3.3.1");const nt=globalThis;class lt extends A{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t;const e=super.createRenderRoot();return(t=this.renderOptions).renderBefore??(t.renderBefore=e.firstChild),e}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{const s=(null==i?void 0:i.renderBefore)??e;let r=s._$litPart$;if(void 0===r){const t=(null==i?void 0:i.renderBefore)??null;s._$litPart$=r=new Y(e.insertBefore(T(),t),t,void 0,i??{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null==(t=this._$Do)||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null==(t=this._$Do)||t.setConnected(!1)}render(){return q}}var at;lt._$litElement$=!0,lt.finalized=!0,null==(at=nt.litElementHydrateSupport)||at.call(nt,{LitElement:lt});const ht=nt.litElementPolyfillSupport;null==ht||ht({LitElement:lt}),(nt.litElementVersions??(nt.litElementVersions=[])).push("4.2.1");const dt={attribute:!0,type:String,converter:_,reflect:!1,hasChanged:x},ct=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:dt,e=arguments.length>1?arguments[1]:void 0,i=arguments.length>2?arguments[2]:void 0;const{kind:s,metadata:r}=i;let o=globalThis.litPropertyMetadata.get(r);if(void 0===o&&globalThis.litPropertyMetadata.set(r,o=new Map),"setter"===s&&((t=Object.create(t)).wrapped=!0),o.set(i.name,t),"accessor"===s){const{name:s}=i;return{set(i){const r=e.get.call(this);e.set.call(this,i),this.requestUpdate(s,r,t)},init(e){return void 0!==e&&this.C(s,void 0,t,e),e}}}if("setter"===s){const{name:s}=i;return function(i){const r=this[s];e.call(this,i),this.requestUpdate(s,r,t)}}throw Error("Unsupported decorator location: "+s)};var pt=Object.defineProperty,ut=Object.getOwnPropertyDescriptor,ft=(t,e,i,s)=>{for(var r,o=s>1?void 0:s?ut(e,i):e,n=t.length-1;n>=0;n--)(r=t[n])&&(o=(s?r(e,i,o):r(o))||o);return s&&o&&pt(e,i,o),o};let gt=class extends lt{constructor(){super(),this.files=[],this.maxFiles=1/0,this.maxFileSizeMB=1/0,this.isLoading=!1,this.buttonText="Attached Files",this.addFilesText="Add Files",this.maxFilesReachedText="Maximum number of files reached",this.fileTooLargeText="File size exceeds the limit",this.error="",this.customColor="",this.customTextColor="",this.iconColor="",this.loadingText="Loading files...",this.lazyLoad=null,this._isOpen=!1,this._lazyLoadPromise=null,this.initializeLazyLoad()}initializeLazyLoad(){let t,e;const i=new Promise(((i,s)=>{t=i,e=s}));this._lazyLoadPromise={promise:i,resolve:t,reject:e},this.lazyLoad=this._lazyLoadPromise,this._lazyLoadPromise.promise.then((t=>{this.handleLazyLoadedFiles(t)})).catch((t=>{console.error("Lazy load promise rejected:",t),this.error=`Failed to load files: ${t.message}`}))}handleLazyLoadedFiles(t){if(!Array.isArray(t))return void console.error("Lazy loaded files must be an array");const e=t.filter((t=>t&&"object"==typeof t?!!(t.id&&t.name&&t.type&&t.url)||(console.warn("File missing required properties:",t),!1):(console.warn("Invalid file object:",t),!1)));if(0===e.length)return void console.warn("No valid files found in lazy load");const i=this.maxFiles-this.files.length;if(i<=0)return this.error=this.maxFilesReachedText,void this.dispatchEvent(new CustomEvent("max-files-reached",{detail:{maxFiles:this.maxFiles},bubbles:!0,composed:!0}));const s=e.slice(0,i);this.files=[...this.files,...s],this.error="",this.dispatchEvent(new CustomEvent("lazy-files-loaded",{detail:{files:s,totalFiles:this.files.length},bubbles:!0,composed:!0})),this.requestUpdate()}resolveLazyLoad(t){this._lazyLoadPromise&&this._lazyLoadPromise.resolve(t)}rejectLazyLoad(t){this._lazyLoadPromise&&this._lazyLoadPromise.reject(t)}getLazyLoadPromise(){var t;return(null==(t=this._lazyLoadPromise)?void 0:t.promise)||null}resetLazyLoad(){this.initializeLazyLoad()}showLoading(t){this.isLoading=!0,t&&(this.loadingText=t),this.requestUpdate()}hideLoading(){this.isLoading=!1,this.requestUpdate()}formatFileSize(t){if(0===t)return"0 B";const e=Math.floor(Math.log(t)/Math.log(1024));return`${parseFloat((t/Math.pow(1024,e)).toFixed(2))} ${["B","KB","MB","GB"][e]}`}getFilePreview(t){switch(t.type){case"image":return D`<img
class="file-preview"
src=${t.url}
alt=${t.name}
/>`;case"pdf":return D`<cdtr-icon name="pdf" size="48"></cdtr-icon>`;case"video":return D`<cdtr-icon name="video" size="48"></cdtr-icon>`;case"audio":return D`<cdtr-icon name="audio" size="48"></cdtr-icon>`;default:return D`<cdtr-icon name="file" size="48"></cdtr-icon>`}}handleFileSelect(t){const e=t.target;if(e.files&&e.files.length>0){const t=this.maxFiles-this.files.length;if(t<=0)return this.error=this.maxFilesReachedText,void this.dispatchEvent(new CustomEvent("max-files-reached",{detail:{maxFiles:this.maxFiles},bubbles:!0,composed:!0}));const i=1024*this.maxFileSizeMB*1024,s=Array.from(e.files).filter((t=>t.size>i));if(s.length>0)return this.error=`${this.fileTooLargeText} (${this.maxFileSizeMB}MB)`,void this.dispatchEvent(new CustomEvent("file-too-large",{detail:{files:s,maxSize:this.maxFileSizeMB},bubbles:!0,composed:!0}));this.error="",this.isLoading=!0;const r=Array.from(e.files).slice(0,t);let o=0;r.forEach((t=>{const e=new FileReader;e.onload=e=>{var i;const s={id:Math.random().toString(36).substr(2,9),name:t.name,type:t.type.split("/")[0],url:null==(i=e.target)?void 0:i.result,size:t.size};this.files=[...this.files,s],this.dispatchEvent(new CustomEvent("file-added",{detail:s,bubbles:!0,composed:!0})),o++,o===r.length&&(this.isLoading=!1)},e.readAsDataURL(t)}))}}handleRemoveFile(t){const e=this.files.find((e=>e.id===t));e&&(this.files=this.files.filter((e=>e.id!==t)),this.dispatchEvent(new CustomEvent("file-removed",{detail:e,bubbles:!0,composed:!0})))}render(){return Array.isArray(this.files)||(this.files=[]),D`
<div class="button-container">
<cdtr-popover
?opened=${this._isOpen}
@opened-changed=${t=>{this._isOpen=t.detail.value,this._isOpen||(this.error="")}}
>
<paper-button
slot="trigger"
dir="auto"
class=${this.isLoading?"loading-button":""}
>
${this.isLoading?D`<div class="button-loading-spinner"></div>`:D`<svg
style="color: ${this.iconColor};"
width="18"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M14.8287 7.75737L9.1718 13.4142C8.78127 13.8047 8.78127 14.4379 9.1718 14.8284C9.56232 15.219 10.1955 15.219 10.586 14.8284L16.2429 9.17158C17.4144 8.00001 17.4144 6.10052 16.2429 4.92894C15.0713 3.75737 13.1718 3.75737 12.0002 4.92894L6.34337 10.5858C4.39075 12.5384 4.39075 15.7042 6.34337 17.6569C8.29599 19.6095 11.4618 19.6095 13.4144 17.6569L19.0713 12L20.4855 13.4142L14.8287 19.0711C12.095 21.8047 7.66283 21.8047 4.92916 19.0711C2.19549 16.3374 2.19549 11.9053 4.92916 9.17158L10.586 3.51473C12.5386 1.56211 15.7045 1.56211 17.6571 3.51473C19.6097 5.46735 19.6097 8.63317 17.6571 10.5858L12.0002 16.2427C10.8287 17.4142 8.92916 17.4142 7.75759 16.2427C6.58601 15.0711 6.58601 13.1716 7.75759 12L13.4144 6.34316L14.8287 7.75737Z"
></path>
</svg>`}
</paper-button>
<div slot="content" class="popover-content" dir="auto">
${this.error?D` <div class="error-message">${this.error}</div> `:""}
<div class="file-grid">
${this.files.map((t=>D`
<div class="file-card">
<button
class="remove-btn"
@click=${()=>this.handleRemoveFile(t.id)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="16"
height="16"
>
<path
d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"
></path>
</svg>
</button>
${this.getFilePreview(t)}
<div class="file-name">${t.name}</div>
${t.size?D`<div class="file-size">
${this.formatFileSize(t.size)}
</div>`:""}
</div>
`))}
${this.files.length<this.maxFiles?D`
<div class="file-card">
<label class="add-files-btn">
<cdtr-icon name="add" size="32"></cdtr-icon>
<span>${this.addFilesText}</span>
<input
type="file"
multiple
hidden
@change=${this.handleFileSelect}
/>
</label>
${this.isLoading?D`<div class="loading-overlay">
<div class="loading-spinner"></div>
<div class="loading-text">${this.loadingText}</div>
</div>`:""}
</div>
`:D`
<div class="error-message">
${this.maxFilesReachedText} (${this.maxFiles})
</div>
`}
</div>
</div>
</cdtr-popover>
${this.files.length>0?D`
<div class="preview-strip">
${this.files.slice(0,3).map((t=>D`
${"image"===t.type?D`<img
class="preview-icon-image"
src=${t.url}
alt=${t.name}
/>`:D` <div class="preview-icon-card">
<svg
class="preview-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M9 2.00318V2H19.9978C20.5513 2 21 2.45531 21 2.9918V21.0082C21 21.556 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5501 3 20.9932V8L9 2.00318ZM5.82918 8H9V4.83086L5.82918 8ZM11 4V9C11 9.55228 10.5523 10 10 10H5V20H19V4H11Z"
></path>
</svg>
</div>`}
`))}
${this.files.length>3?D`<span class="preview-count"
>+${this.files.length-3}</span
>`:""}
</div>
`:""}
</div>
`}};gt.styles=(function(t){for(var e=arguments.length,i=new Array(e>1?e-1:0),s=1;s<e;s++)i[s-1]=arguments[s];const r=1===t.length?t[0]:i.reduce(((e,i,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[s+1]),t[0]);return new l(r,t,o)})`
.file-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 1rem;
padding: 1rem;
max-height: calc(100vh - 200px);
overflow-y: auto;
}
.file-card {
position: relative;
width: 120px;
height: 120px;
border-radius: 8px;
background: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
}
.file-preview {
width: 100%;
height: 80px;
object-fit: contain;
background: white;
}
.file-name {
width: 100%;
padding: 4px;
font-size: 12px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.remove-btn {
position: absolute;
top: 4px;
right: 4px;
width: 20px;
height: 20px;
border-radius: 50%;
background: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
padding: 4px;
}
.add-files-btn {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
border: 2px dashed #ccc;
border-radius: 8px;
background: transparent;
}
.add-files-btn:hover {
border-color: #666;
}
.error-message {
color: red;
font-size: 12px;
text-align: center;
padding: 8px;
}
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
border-radius: 8px;
backdrop-filter: blur(2px);
}
.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid #f3f3f3;
border-top: 3px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 8px;
}
.loading-text {
font-size: 12px;
color: #666;
text-align: center;
margin-top: 4px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-button {
opacity: 0.7;
pointer-events: none;
}
.button-loading-spinner {
width: 18px;
height: 18px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
.preview-section {
margin-top: 8px;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.preview-item {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: #f5f5f5;
border-radius: 4px;
font-size: 12px;
}
paper-button {
min-width: 10px;
}
.preview-item cdtr-icon {
width: 16px;
height: 16px;
}
.preview-count {
margin-top: 8px;
font-size: 12px;
color: #666;
}
.button-container {
position: relative;
display: inline-block;
}
.preview-icon-card {
background-color: #160d0d;
border-radius: 4px;
padding: 4px;
z-index: 1;
}
.preview-strip {
position: absolute;
bottom: -15px;
left: 0;
right: 0;
display: flex;
gap: 2px;
padding-left: 12px;
}
.preview-icon {
width: 12px;
height: 12px;
color: white;
}
.preview-icon-image {
width: 16px;
height: 16px;
object-fit: cover;
}
.preview-count {
font-size: 10px;
color: white;
margin-left: 2px;
}
.file-size {
font-size: 10px;
color: #666;
}
`,gt.properties={files:{type:Array},maxFiles:{type:Number},maxFileSizeMB:{type:Number},isLoading:{type:Boolean},buttonText:{type:String},addFilesText:{type:String},maxFilesReachedText:{type:String},iconColor:{type:String},fileTooLargeText:{type:String},error:{type:String},customColor:{type:String},customTextColor:{type:String},loadingText:{type:String}},ft([function(t){return(e,i)=>"object"==typeof i?ct(t,e,i):((t,e,i)=>{const s=e.hasOwnProperty(i);return e.constructor.createProperty(i,t),s?Object.getOwnPropertyDescriptor(e,i):void 0})(t,e,i)}({type:Object,attribute:!1})],gt.prototype,"lazyLoad",2),gt=ft([(t=>(e,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(t,e)})):customElements.define(t,e)})("cdtr-attached-files-plugin")],gt)}}]);