const firebase=window.firebase,config$1={apiKey:"AIzaSyAggX7zwnqbVl56pZP4O7oH0QtPu9YMph0",authDomain:"printess-saas.firebaseapp.com"};firebase.initializeApp(config$1);const checkErrorCode=e=>{const t=document.getElementById("errorContainer"),o=document.getElementById("errorWrapper");t&&(t.style.display=""),"auth/email-already-in-use"===e?o&&(o.innerHTML="This email address is already in use. <br>Did you mean to sign in?"):"auth/invalid-email"===e?o&&(o.textContent="Invalid e-mail address!"):"auth/weak-password"===e?o&&(o.textContent="Your password is weaaaak!"):"auth/wrong-password"===e||"auth/user-not-found"===e?o&&(o.innerHTML="Invalid e-mail address or password. <br>Please try again!"):"auth/too-many-requests"===e&&o&&(o.innerHTML="Access to this account has been temporarily <br>disabled due to many failed login attempts.")};async function signinWithGoogle(){const e=new firebase.auth.GoogleAuthProvider;e.setCustomParameters({prompt:"select_account"});try{return await firebase.auth().signInWithPopup(e)}catch(e){const t=e.code;throw checkErrorCode(t),e}}async function signinUser(e,t){try{return await firebase.auth().signInWithEmailAndPassword(e,t)}catch(e){const t=e.code;throw checkErrorCode(t),e}}async function sendPasswordResetMail(e=firebase.auth().currentUser.email){try{await firebase.auth().sendPasswordResetEmail(e)}catch(e){const t=e.code;throw console.log(t),alert(e.message),e}}class MenuTopic{constructor(e){this.name=e.n,this.id=e.id,this.type=e.t,this.keywords=e.kws}serialize(){return{n:this.name,id:this.id,t:this.type,kws:JSON.parse(JSON.stringify(this.keywords))}}save(){return{n:this.name.toLowerCase(),id:this.id,t:this.type,kws:this.keywords}}rename(e){this.name=e.toLowerCase(),this.addKeywords(this.keywords)}addKeywords(e){e.includes(this.name)||e.unshift(this.name.toLowerCase()),this.keywords=e}removeKeywords(){this.keywords=[this.name]}delete(e){const t=this.keywords.indexOf(e);t>=0&&this.keywords.splice(t,1)}}class MenuCategory{constructor(e){this.name=e.n,this.id=e.id,this.type=e.t,this.topics=[];for(const t of e.tops)this.topics.push(new MenuTopic(t))}serialize(){return{n:this.name,id:this.id,t:"category",tops:this.topics.map(e=>e.serialize())}}rename(e){this.name=e.toLowerCase()}update(e,t){const o=this.topics.findIndex(t=>t.id===e);o>=0&&this.topics.splice(o,1,t)}insert(e,t){if("top"===t)this.topics.unshift(e);else if("bottom"===t)this.topics.push(e);else{const o=this.topics.findIndex(e=>e.id===t.id);o>=0?this.topics.splice(o+1,0,e):this.topics.push(e)}}move(e,t,o){const r=this.topics.findIndex(e=>e.id===t);"above"===o?this.topics.splice(r,0,e):this.topics.splice(r+1,0,e)}delete(e){const t=this.topics.findIndex(t=>t.id===e);t>=0&&this.topics.splice(t,1)}}function generateID(){const e=(new Date).getTime();let t,o="P";const r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(t=0;t<20;t++)o+=r.charAt(Math.floor((e+62*Math.random())%62));return o}class Menu{constructor(e){this.name=e.n,this.id=e.id,this.type=e.t,this.categories=[];for(const t of e.cats)this.categories.push(new MenuCategory(t))}serialize(){return{n:this.name,id:this.id,t:this.type,cats:this.categories.map(e=>e.serialize())}}rename(e){this.name=e}update(e,t){const o=this.categories.findIndex(t=>t.id===e);o>=0&&this.categories.splice(o,1,t)}insert(e,t){if("top"===t)this.categories.unshift(e);else if("bottom"===t)this.categories.push(e);else{const o=this.categories.findIndex(e=>e.name===t.name);o>=0?this.categories.splice(o+1,0,e):this.categories.push(e)}}move(e,t,o){const r=this.categories.findIndex(t=>t.id===e.id),i=this.categories.splice(r,1)[0],a=this.categories.findIndex(e=>e.id===t);"above"===o?this.categories.splice(a,0,i):this.categories.splice(a+1,0,i)}delete(e){const t=this.categories.findIndex(t=>t.id===e);t>=0&&this.categories.splice(t,1)}findCategory(e){for(const t of this.categories){const o=t.topics.findIndex(t=>t.id===e.id);if(o>=0)return t}return null}}const imageAiFilterType=["IMAGE-EDIT"],imageAiFilterModel=["GPT ImageEdit","Nano Banana","Nano Banana Pro"],imageAiGptImageEditQuality=["low","medium","high"];class ImageAiFilter{constructor(e="",t="",o,r,i,a,s,n,l){this.id=e,this.label=t||"New Effect",this.type=o??"IMAGE-EDIT",this.model=r??"Nano Banana",this.gptQuality=i??"medium",this.isUserPrompt=a??!1,this.promptPrefix=s??"",this.prompt=n??"",this.thumbnailUrl=l??""}}let Snippet$1=class{constructor(e){this.title=e.title??"",this.imageUrl=e.iurl,this.snippetUrl=e.surl,this.id=e.id,this.docId=e.did,this.uid=e.uid,this.language=e.l,this.metadata=JSON.parse(e.meta??"{}"),this.isGlobal="gy8z44EmLiZ0vrUKrXlWtiZY15D2"===e.uid}get imageCount(){return this.metadata?.editables?.images??0}hasImageCountEqual(e){return!(!this.metadata||!this.metadata.editables)&&this.metadata.editables.images===e}hasTextCountEqual(e){return!(!this.metadata||!this.metadata.editables)&&this.metadata.editables.texts===e}},Template$1=class{constructor(e,t){e&&t&&(this.id=t.id,this.userId=e.uid??"",this.name=t.n,this.isWritable=t.w,this.isDeletable=t.d,this.isPublishable=t.p,this.hasPublishedVersion=t.hpv,this.hasDesignVersion=t.hdv,this.thumbnailUrl=t.turl,this.backgroundColor=t.bg,this.lastSaveDate=new Date(t.ls),this.lastPublishDate=new Date(t.lp))}};class UserTemplates{constructor(e){e?(this.userId=e.uid,this.eMail=e.e,this.templates=e.ts.sort((e,t)=>e.n.localeCompare(t.n)).map(t=>new Template$1(e,t))):(this.userId="",this.eMail="",this.templates=[])}}function toCdnUrl(e){return e.replace("//printess-prod.s3.eu-central-1.amazonaws.com/","//resource.printess.com/")}class TemplatePageImage{constructor(e,t="",o=""){this.spreadIndex=e.si??0,this.pageIndex=e.pi??0,this.thumbnailUrl=toCdnUrl(e.t??""),this.backgroundColor=e.bg??"",this.documentId=e.did??"",this.spreadId=t,this.pageId=o}fromSerialized(e){return this.spreadIndex=e.spreadIndex??0,this.pageIndex=e.pageIndex??0,this.thumbnailUrl=toCdnUrl(e.thumbnailUrl??""),this.backgroundColor=e.backgroundColor??"",this.documentId=e.documentId??"",this.spreadId=e.spreadId??"",this.pageId=e.pageId??"",this}}class TemplateDetails{constructor(e){this.id=e.id,this.images=e.images.map(e=>new TemplatePageImage(e)),e.documentInfo&&(this.documentIdToNameMapping=JSON.parse(e.documentInfo)),e.template?this.template=new Template$1({uid:e.userId},e.template):this.template=null}}function createRequestInit(e,t,o,r){const i={Accept:"application/json","Content-Type":o};r&&(i.Authorization="Bearer "+r);return{method:e,mode:"cors",cache:"no-cache",credentials:"omit",headers:i,redirect:"follow",referrerPolicy:"no-referrer",body:t}}function sendXhr$1(e,t,o){return new Promise((r,i)=>{e.onreadystatechange=()=>{4===e.readyState&&r()},o&&(e.upload.onprogress=e=>{e.lengthComputable&&o(e.loaded,e.total)}),e.onerror=function(){i({status:this.status,statusText:e.statusText})},e.send(t)})}async function postFormData(e,t,o,r){const i=new XMLHttpRequest;return i.open("POST",e,!0),i.setRequestHeader("Authorization","Bearer "+o),await sendXhr$1(i,t,r),i}async function postPlainText(e,t,o){return await fetch(e,createRequestInit("POST",t,"text/plain",o))}async function postJson(e,t,o){return await fetch(e,createRequestInit("POST",t,"application/json",o))}function assertNever$1(e,t=""){throw new Error(t||"Unexpected object: "+e)}function createOverlayDiv(){const e=document.createElement("div");return e.style.left="0",e.style.top="0",e.style.bottom="0",e.style.right="0",e.style.position="absolute",e.style.backgroundColor="transparent",e.style.cursor="grab",e}function isMobile(e=896){return!window.matchMedia(`(min-width:  ${e+1}px)`).matches}const config={mobileDeviceWidth:896,isMobile:isMobile(896),tokenRole:"",tokenRoles:[],claims:new Map,helpUrl:"https://printess.com/kb/user-manual/",isPrintessSystem:!0},tagType=["layout-tags","group-tags","keywords"],isTagType=e=>tagType.includes(e),dropshipVisibleToUserIds=["sZ5lDGZQqjcdw0AOVyKNzbw1spC3","F0RI3uPtv7bb4Ph2762AkcwQAuu2","i12qBGdGXEdEyp7KlcAtkhoK3V82","tn6LY4Q1gCarfkZ5w3fd3QdsxqY2","2p0r3uaaEsbVu1VCCf8oGKueywp1"],imageCategoriesVisibleToUserIds=["gy8z44EmLiZ0vrUKrXlWtiZY15D2"];function hasPlan(e){const t=config.claims.get("plan");return!!t&&t.has(e)}function hasClaim(e){const t=config.claims.get("allow");return!!t&&t.has(e)}function drawerCanBeDisplayed(e,t){if(t&&"subscription"!==e.name&&"team-members"!==e.name)return!1;if("gy8z44EmLiZ0vrUKrXlWtiZY15D2"===currentUser.id&&!e.hide)return!0;if(("dropshipper"===e.name||"dropship-orders"===e.name)&&-1!==dropshipVisibleToUserIds.indexOf(currentUser.id))return!0;if("image-categories"===e.name&&-1!==imageCategoriesVisibleToUserIds.indexOf(currentUser.id))return!0;if(e.forbiddenPlans&&e.forbiddenPlans.length){if(!!e.forbiddenPlans.find(e=>hasPlan(e)))return!1}return!(e.requiredClaim&&!hasClaim(e.requiredClaim))&&(!e.hide&&e.displayTo.some(e=>config.tokenRoles.indexOf(e)>-1))}function getDomain(){let e="api.printess.com";const t=window;return t.printessSettings&&t.printessSettings.domain&&(e=t.printessSettings.domain),e}function getEditorUrl(){let e="https://editor.printess.com/";const t=window;return t.printessSettings&&t.printessSettings.editor&&(e=t.printessSettings.editor),e}class ValueDebounce{constructor(e){this.timeout=1e3,this.callback=e}change(e,t=1e3){this.value=e,window.clearTimeout(this.timeoutHandle),this.timeoutHandle=window.setTimeout(()=>{this.callback(this.value)},t)}immediate(e){this.value=e,this.callback(e)}}async function sha1hex$1(e){let t;if("string"==typeof e){t=(new TextEncoder).encode(e)}else t=e;const o=await crypto.subtle.digest("SHA-1",t);return Array.from(new Uint8Array(o)).map(e=>e.toString(16).padStart(2,"0")).join("")}async function getUserFileUrl(e,t){const o=await sha1hex$1(e);return-1!==window.location.host.indexOf("localhost")?"https://printess-bkr.s3.eu-central-1.amazonaws.com/uploads/"+o+"/static/"+t:"https://printess-prod.s3.eu-central-1.amazonaws.com/uploads/"+o+"/static/"+t}function normalizeUrl(e){return e&&!e.endsWith("/")?e+"/":e}function generateDBID(){const e=(new Date).getTime();let t,o="P";const r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(t=0;t<20;t++)o+=r.charAt(Math.floor((e+62*Math.random())%62));return o}class DialogCloseEvent extends CustomEvent{constructor(e={}){super("close-event",{bubbles:!0,composed:!0,detail:e})}}class ReloadEvent extends CustomEvent{constructor(e){super("reload-triggered",{detail:e,bubbles:!0,composed:!0})}}function sleep(e){return new Promise(t=>setTimeout(t,e))}function getValidJsName(e){const t=e.replace(/[^\d|\w]/gi,"_");return t.match(/^\d/)?"x"+t:t}function assertNever(e,t=""){throw new Error(t||"Unexpected object: "+e)}function showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}let ServerErrorResponse$2=class e{constructor(e,t){this.code=e,this.message=t}static async Create(t){if("application/json; charset=utf-8"===t.headers.get("Content-Type")){const o=await t.json();return"number"==typeof o.c&&"string"==typeof o.m?new e(o.c,o.m):new e(t.status,o)}const o=await t.text();return new e(t.status,t.statusText+" => "+o)}};class PrintessApi{constructor(e,t){this.urlPrefix=e||"http://localhost:5000",this.token=t}async postPlainText(e,t){e.startsWith("/")||(e="/"+e);return postPlainText(this.urlPrefix+e,t,this.token)}async postJson(e,t){e.startsWith("/")||(e="/"+e);return postJson(this.urlPrefix+e,t,this.token)}async postJsonTyped(e,t){e.startsWith("/")||(e="/"+e);const o=this.urlPrefix+e,r=await postJson(o,t,this.token);return 200===r.status?await r.json():await ServerErrorResponse$2.Create(r)}async postJsonVoid(e,t){e.startsWith("/")||(e="/"+e);const o=this.urlPrefix+e,r=await postJson(o,t,this.token);if(200!==r.status)return await ServerErrorResponse$2.Create(r)}async loginWithGoogleAuthToken(e){const t=await this.postPlainText("/jwttokenlogin",e);return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async handleErrorResponse(e,t){if(!e.ok){let o=`${t}: ${e.statusText} (statusCode=${e.status})`;try{const r=await e.text();o=401===e.status?`${t}: Please reload the editor or logout and login to continue. Seems like your authentication token expired and the request didn't go through.`:`${r} ${e.statusText} (statusCode=${e.status})`}catch(e){console.log(e)}throw o}}async activate(e,t){const o={userId:e,activationCode:t},r=await this.postJson("/printess/activate",JSON.stringify(o));if(200!==r.status)return await ServerErrorResponse$2.Create(r)}async loadUserTokens(){const e=await this.postJson("/user/tokens/load","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async revokeToken(e){const t=await this.postJson("/user/token/revoke",JSON.stringify({jti:e}));if(200!==t.status){const e=await ServerErrorResponse$2.Create(t);alert(e.message)}}async loadOrders(e){const t=await this.postJson("/orders/list",JSON.stringify(e));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async loadDropshipOrders(){const e=await this.postJson("dropship/orders/list",JSON.stringify({take:500}));return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadDropshipOrderInfo(e){const t=await this.postJson("dropship/order/info/load",JSON.stringify({id:e}));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async sendOrderToDropshipper(e){const t={orderId:e};return await this.postJsonVoid("order/sendToDropshipper",JSON.stringify(t))}async loadSubmissionErrors(){const e=await this.postJson("submission/errors/list",JSON.stringify({}));return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadTemplatesList(){const e=await this.postJson("/templates/list","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadCurrentPaymentPeriodData(e){const t=await this.postJson("/saas/currentPeriod",JSON.stringify({userId:e}));await this.handleErrorResponse(t,"Cannot load current payment period data");return await t.json()}async loadTemplates(e){const t=await this.postJson("/templates/user/load",JSON.stringify({templateName:e}));await this.handleErrorResponse(t,"Cannot load user templates");const o=await t.json();return new UserTemplates(o)}async loadRecentTemplates(){const e=await this.postJson("templates/user/recent/load",JSON.stringify({}));await this.handleErrorResponse(e,"Cannot load recent user templates");const t=await e.json();return new UserTemplates(t)}async loadTemplateDetails(e){const t=await this.postJson("/template/details",JSON.stringify({templateName:e}));await this.handleErrorResponse(t,"Cannot load template details");const o=await t.json();return new TemplateDetails(o)}async loadDailyUsage(e){const t=await this.postJson("/saas/usage/daily",JSON.stringify(e));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async loadDailyCredits(e){const t=await this.postJson("/saas/credits/daily",JSON.stringify(e));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async loadAiCredits(e){const t=await this.postJson(`ai/statistics/last/${e}/days`,JSON.stringify({}));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async loadMockupStatisticsLast(e){const t=await this.postJson(`mockup/statistics/last/${e}/days`,JSON.stringify({}));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async loadMockupStatisticsMonth(e,t){const o=await this.postJson(`mockup/statistics/year/${t}/month/${e}`,JSON.stringify({}));return 200===o.status?await o.json():await ServerErrorResponse$2.Create(o)}async loadDailyAdminCredits(e){const t=await this.postJson("/admin/credits/daily",JSON.stringify(e));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async addWhitelistEntry(e){const t=await this.postJson("/user/whitelist/add",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("user has been added successfully")}async removeWhitelistEntry(e){const t=await this.postJson("/user/whitelist/remove",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("Team member has been removed successfully")}async removePinnedUser(e){const t=await this.postJson("/user/pinned/remove",JSON.stringify({userId:e}));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("Team member has been removed successfully")}async loadProfile(){const e=await this.postJson("/user/profile/read","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async updateProfile(e){const t=await this.postJson("/user/profile/update",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("profile updated successfully")}async loadPinnedUsers(){const e=await this.postJson("/user/pinned/load","{}");if(200===e.status){const t=await e.json();return t.forEach(e=>e.userLevel=e.userLevel?e.userLevel:"user"),t}return await ServerErrorResponse$2.Create(e)}async updatedPinnedUser(e){const t=await this.postJson("/user/pinned/update",JSON.stringify(e));if(200!==t.status)return 406===t.status&&alert("You must provide a valid folder name when setting the user level to 'externalDesigner'."),await ServerErrorResponse$2.Create(t);console.log("pinned user updated successfully")}async loadDirectories(e){const t=await this.postJson("/directories/load",JSON.stringify(e));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async loadInvitation(){const e=await this.postJson("/user/invitation/load","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async acceptInvitation(){const e=await this.postJson("/user/invitation/accept","{}");return 200===e.status&&console.log("invitation accepted"),await ServerErrorResponse$2.Create(e)}async declineInvitation(){const e=await this.postJson("/user/invitation/decline","{}");return 200===e.status&&console.log("invitation declined"),await ServerErrorResponse$2.Create(e)}async loadPlans(){const e=await this.postJson("/saas/plans","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadPlanHistory(){const e=await this.postJson("/saas/plans/history","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadPackages(){const e=await this.postJson("/saas/packages","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async terminatePlan(){console.log("TODO: send api request to terminate Plan.")}async updatePlan(e){const t=await this.postJson("/saas/plan/book",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("Plan successfully changed")}async loadPackagesHistory(){const e=await this.postJson("/saas/packages/history","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async bookCreditPackages(e){const t=await this.postJson("/saas/packages/book",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("credit packages successfully booked!")}async loadWhitelist(){const e=await this.postJson("/user/whitelist/load","{}");if(200===e.status){const t=await e.json();return t.forEach(e=>e.userLevel=e.userLevel?e.userLevel:"user"),t}return await ServerErrorResponse$2.Create(e)}async bookSeats(e){const t=await this.postJson("/saas/seats/book",JSON.stringify({amount:e}));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("seats successfully booked")}async changeAccountOwner(e){const t=await this.postJson("/account/owner/change",JSON.stringify({newAccountOwnerUserId:e}));if(200!==t.status)return await ServerErrorResponse$2.Create(t)}async loadSeatsHistory(){const e=await this.postJson("/saas/seats/history","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async translate(e){const t=await this.postJson("translations/translate",JSON.stringify({sourceLanguageCode:e}));if(200!==t.status)return await ServerErrorResponse$2.Create(t)}async loadSeatsCount(){const e=await this.postJson("/saas/seats/count","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadUsedStorage(){const e=await this.postJson("/saas/storage","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadInvoices(){const e=await this.postJson("/saas/invoices","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadUserBookedInfo(){const e=await this.postJson("/saas/booked/info","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async loadUpcomingPaymentInfo(){const e=await this.postJson("/saas/payment/calculate","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async writeUserSetting(e){const t=await this.postJson("/user/setting/write",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t)}async loadAtomxyProfiles(){const e=await this.postJson("/atomyx/profiles","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async readUserTranslations(){const e=await this.postJson("user/translations/load",JSON.stringify({}));return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async readUserSettings(e){const t=await this.postJson("/user/settings/read",JSON.stringify(e));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async deleteUserSetting(e){const t=await this.postJson("/user/setting/delete",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log('User setting has been deleted with key: "'+e.key+'"')}async loadLayoutKeywords(e){const t=await this.postJson("/keywords/layout/load",JSON.stringify({includeGlobal:e}));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async loadSnippetTags(e){const t=await this.postJson("/snippets/tags/load",JSON.stringify({includeGlobal:e}));return 200===t.status?await t.json():await ServerErrorResponse$2.Create(t)}async loadLayoutSnippets(e,t,o,r,i=!0,a,s,n){const l=await this.postJson("/layoutSnippets/load",JSON.stringify({tags:e,keywords:t,aspectRatio:o,language:r,includeGlobal:i,sealing:a,featuredSetKey:s,hiddenSetKey:n,productType:"*"}));if(200===l.status){return(await l.json()).map(e=>new Snippet$1(e))}return await ServerErrorResponse$2.Create(l)}async loadStickerSnippets(e,t,o,r=!0){const i=await this.postJson("/snippets/load",JSON.stringify({type:"group",tags:e,keywords:t,language:o,includeGlobal:r}));if(200===i.status){return(await i.json()).map(e=>new Snippet$1(e))}return await ServerErrorResponse$2.Create(i)}async loadLayoutSnippetStatistics(){const e=await this.postJson("/snippets/layout/statistics",JSON.stringify({id:"string"}));if(200===e.status)return await e.json();throw await ServerErrorResponse$2.Create(e)}async deleteLayoutSnippet(e){const t=await this.postJson("/snippet/delete",JSON.stringify({id:e}));if(200===t.status)return;throw await ServerErrorResponse$2.Create(t)}async loadStickerSnippetStatistics(){const e=await this.postJson("/snippets/sticker/statistics",JSON.stringify({id:"string"}));if(200===e.status)return await e.json();throw await ServerErrorResponse$2.Create(e)}async loadKeywords(){const e=await this.postJson("/keywords/load","{}");return 200===e.status?await e.json():await ServerErrorResponse$2.Create(e)}async addKeyword(e){const t=await this.postJson("/keyword/add",JSON.stringify(e));return 200===t.status?(console.log("Keyword added: "+e.keyword),await t.json()):await ServerErrorResponse$2.Create(t)}async renameKeyword(e){const t=await this.postJson("/keyword/rename",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("Keyword renamed to: "+e.keyword)}async removeKeyword(e){const t=await this.postJson("/keyword/remove",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("Keyword removed")}async moveKeyword(e){const t=await this.postJson("/keyword/move",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log("Keyword moved")}async uploadFile(e,t){const o=this.urlPrefix+"/user/file/upload",r=new FormData;r.append("file",e,t);const i=await postFormData(o,r,this.token);if(i.status>=200&&i.status<300)return await getUserFileUrl(currentUser.id,t);throw new Error(i.response)}async uploadFont(e){const t=this.urlPrefix+"/printess/upload/font",o=new FormData;o.append("file",e,e.name);const r=await postFormData(t,o,this.token);if(r.status>=200&&r.status<300){const e=JSON.parse(r.response);return Array.isArray(e)&&e.length?e[0].url:e.url}throw new Error(r.response)}async upload3dModel(e,t){const o=this.urlPrefix+"/user/3dmodel/upload",r=await postFormData(o,e,this.token,t);if(!(r.status>=200&&r.status<300))throw new Error(r.response)}load3dModels(){return this.postJsonTyped("user/3dmodels/list",JSON.stringify({}))}save3dModelJson(e,t){return this.postJsonVoid("user/3dmodel/json/save",JSON.stringify({id:e,json:t}))}delete3dModel(e){return this.postJsonVoid("user/3dmodel/delete",JSON.stringify({id:e}))}async deleteFile(e){const t=await this.postJson("/user/file/delete",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$2.Create(t);console.log(e.name+" deleted successfully")}loadShopifyHooks(){return this.postJsonTyped("user/shopify/hooks/json/get",JSON.stringify({}))}saveShopifyHook(e){return this.postJsonTyped("user/shopify/hooks/json/save",JSON.stringify(e))}deleteShopifyHook(e){return this.postJsonTyped("user/shopify/hooks/json/delete",JSON.stringify(e))}loadShopifyFulfillmentSetting(){return this.postJsonTyped("user/shopify/fulfillment/json/get",JSON.stringify({}))}saveShopifyFulfillmentSetting(e){return this.postJsonTyped("user/shopify/fulfillment/json/save",JSON.stringify(e))}deleteShopifyFulfillmentSetting(e){return this.postJsonTyped("user/shopify/fulfillment/json/delete",JSON.stringify(e))}getDropboxRefreshToken(e,t){return this.postJsonTyped("user/dropbox/auth/refreshtoken/get",JSON.stringify({authToken:e,fullAccess:t}))}clearShopifyCreateOrderCache(){return this.postJsonVoid("shops/shopify/integrations/clearordercreatecache",JSON.stringify({}))}async loadProductionJobs(){const e=[];return e.push({enqueuedOn:new Date,processingOn:new Date,finishedOn:new Date,failedOn:new Date,isFinalStatus:!0,errorDetails:null,jobId:"my job id",productionType:"templateId",files:[{documentName:"my document",fileSize:2e3,downloadUrl:"https://www.example.com",pages:2}]}),e}retryOrder(e){return this.postJsonTyped("order/retry",JSON.stringify(e))}loadProductTemplates(){return this.postJsonTyped("productTemplates/load",JSON.stringify({}))}loadProductTemplate(e){const t={id:e};return this.postJsonTyped("productTemplate/load",JSON.stringify(t))}saveProductTemplate(e){return this.postJsonTyped("productTemplate/save",JSON.stringify(e))}loadDropshippers(e){const t={type:e};return this.postJsonTyped("dropshippers/load",JSON.stringify(t))}saveDropshipper(e){return this.postJsonTyped("dropshipper/save",JSON.stringify(e))}deleteDropshipper(e){return this.postJsonVoid("dropshipper/delete",JSON.stringify(e))}loadProductDefinitions(e){const t={dropshipperType:e};return this.postJsonTyped("productDefinitions/load",JSON.stringify(t))}saveProductDefinition(e){return this.postJsonTyped("productDefinition/save",JSON.stringify(e))}deleteProductDefinition(e){return this.postJsonVoid("productDefinition/delete",JSON.stringify({id:e}))}loadDropshipperInventory(e,t,o){const r={id:e,step:t,json:o};return this.postJsonTyped("dropshipper/inventory/load",JSON.stringify(r))}loadImageCategories(){return this.postJsonTyped("imageCategories/load",JSON.stringify({}))}loadImageCategoriesWithCounts(){return this.postJsonTyped("imageCategories/loadWithCounts",JSON.stringify({}))}addImageCategory(e){return this.postJsonTyped("imageCategory/createOrUpdate",JSON.stringify({name:e}))}updateImageCategory(e,t){return this.postJsonTyped("imageCategory/createOrUpdate",JSON.stringify({id:e,aiMode:t}))}deleteImageCategory(e){return this.postJsonVoid("imageCategory/delete",JSON.stringify({id:e}))}deleteGroupImagesFromCategory(e,t){return this.postJsonVoid("imageGroup/delete/from/category",JSON.stringify({categoryId:e,groupId:t}))}addImageGroup(e){return this.postJsonTyped("imageGroup/createOrUpdate",JSON.stringify({name:e}))}loadImageGroups(){return this.postJsonTyped("imageGroups/load",JSON.stringify({}))}updateImageGroup(e,t){return this.postJsonTyped("imageGroup/createOrUpdate",JSON.stringify({id:e,name:t}))}deleteImageGroup(e){return this.postJsonVoid("imageGroup/delete",JSON.stringify({id:e}))}loadImageInfo(e){return this.postJsonTyped("image/info/load",JSON.stringify({id:e}))}loadImageCategoryImages(e,t=0,o=400){return this.postJsonTyped("imageCategory/images/load",JSON.stringify({imageCategoryId:e,skip:t,take:o}))}connectImage(e,t,o){return this.postJsonVoid("imageCategory/image/connect",JSON.stringify({imageCategoryId:e,imageId:t,groupId:o}))}disconnectImage(e,t,o){return this.postJsonVoid("imageCategory/image/disconnect",JSON.stringify({imageCategoryId:e,imageId:t,groupId:o}))}setImageCategoryImageMeta(e,t,o,r){return this.postJsonVoid("imageCategory/image/meta/set",JSON.stringify({imageCategoryId:e,imageId:t,groupId:o,meta:r}))}imageExistsV3(e){return this.postJsonTyped("v3/image/exists",JSON.stringify({fileHash:e,shopInfo:{}}))}importImageFromUrlV2(e,t,o,r,i,a,s,n){return this.postJsonTyped("v2/processing/image/url/import",JSON.stringify({fileName:e,url:o,fileHash:t,fileMagick:r,fileCheck:i,imageCategoryId:a,imageGroupId:n,imageId:s,shopInfo:{}}))}async upload(e,t,o){const{extension:r,magick:i}=await getExtension(e),a=await calculateBlobSha1(e),s=await this.imageExistsV3(a);if(!(s instanceof ServerErrorResponse$2)&&t>0&&o>0)return void await this.connectImage(t,s.id,o);const n=new FormData,l=await sha1hex(currentUser.id);n.append("key","printess/upload/"+l+"/"+(new Date).getTime()+"_"+a+r),n.append("acl","public-read"),n.append("file",e,e.name),n.append("fileHash",a);try{if(s instanceof ServerErrorResponse$2){const r=await uploadToEndpoint(n);return await this.importImageFromUrlV2(e.name,a,r,i,"",t,0,o)}return await this.importImageFromUrlV2(e.name,a,"https://invalid.url",i,"",t,s.id,o)}finally{}}async loadImageAiFilterCategories(){const e=await this.readUserSettings({keys:["image-ai-effect-categories"]});if(e instanceof ServerErrorResponse$2)throw alert(e.message),new Error(e.message);return e["image-ai-effect-categories"]?JSON.parse(e["image-ai-effect-categories"]):[]}async saveImageAiFilterCategories(e){const t=[];for(const o of e)t.push({...o,filters:o.filters.filter(e=>e.id)});return console.log(t),await this.writeUserSetting({key:"image-ai-effect-categories",json:JSON.stringify(t)})}async addImageAiFilterCategory(e){const t=await this.loadImageAiFilterCategories(),o={id:generateID(),label:e,filters:[]};return t.push(o),await this.saveImageAiFilterCategories(t),o}async deleteImageAiFilterCategory(e){const t=await this.loadImageAiFilterCategories(),o=t.find(t=>t.id===e),r=t.filter(t=>t.id!==e);return o?(this.saveImageAiFilterCategories(r),o.id):""}async loadImageAiFilterCategory(e){return(await this.loadImageAiFilterCategories()).find(t=>t.id===e)}async addOrUpdateImageAiFilterToCategory(e,t){const o=await this.loadImageAiFilterCategories(),r=o.find(t=>t.id===e),i=o.filter(t=>t.id!==e);if(r){if(r.filters.find(e=>e.id===t.id)){const e=r.filters.filter(e=>e.id!==t.id);e.push(t),r.filters=e}else r.filters.push(t);i.push(r),await this.saveImageAiFilterCategories(i);return t}console.log("Category doesnt exist: ",e)}async deleteImageAiFilterFromCategory(e,t){const o=await this.loadImageAiFilterCategories(),r=o.find(t=>t.id===e),i=o.filter(t=>t.id!==e);if(r){const e=r.filters.find(e=>e.id===t);if(e){const o=r.filters.filter(e=>e.id!==t);return r.filters=o,i.push(r),await this.saveImageAiFilterCategories(i),e}}}async loadImageAiFilterInfo(e){const t=(await this.loadImageAiFilterCategories()).find(t=>t.filters.find(t=>t.id===e)),o=t?.filters.find(t=>t.id===e);return o}async uploadAiFilterThumbnail(e,t,o){const{extension:r,magick:i}=await getExtension(e);await calculateBlobSha1(e);let a,s=!0;if(o){let e=await this.loadImageAiFilterInfo(o);(e instanceof ServerErrorResponse$2||!e)&&(console.log("new imageAiFilter in frontend: ",o),s=!1),a=e,await this.deleteImageAiFilterFromCategory(t,o)}else{const e=(await this.loadImageAiFilterCategory(t)).filters.length||0;a=new ImageAiFilter(e.toString(),"Untitled"),s=!1}const n=await this.upload(e,0,0);if(n instanceof ServerErrorResponse$2);else if(n&&(a.thumbnailUrl=n.original.url,n.scaledVersions&&n.scaledVersions.length)){const e=n.scaledVersions.sort((e,t)=>e.width-t.width);a.thumbnailUrl=e[0].url}return s&&await this.addOrUpdateImageAiFilterToCategory(t,a),a.thumbnailUrl}async uploadPhotoBookThemeThumbnail(e){const t=await this.upload(e,0,0);if(t instanceof ServerErrorResponse$2);else if(t){let e=t.original.url;if(t.scaledVersions&&t.scaledVersions.length){const o=t.scaledVersions.sort((e,t)=>e.width-t.width);e=o[0].url}return e}}async loadAddons(){return(await unwrapOrThrow(this.postJsonTyped("addons/load","{}"))).map(e=>({...e,price:JSON.parse(e.price)}))}loadAddonEvents(){return unwrapOrThrow(this.postJsonTyped("addon/events/load","{}"))}bookAddon(e){return unwrapOrThrow(this.postJsonVoid("addon/book",JSON.stringify({id:e})))}cancelAddon(e){return unwrapOrThrow(this.postJsonVoid("addon/cancel",JSON.stringify({id:e})))}}async function unwrapOrThrow(e){const t=await e;if(t instanceof ServerErrorResponse$2)throw new Error(t.message);return t}function createEditorUrl(e,t){const o=e.result?.ff;return`${getEditorUrl()+(t??"")}?name=${encodeURIComponent(e.loadableTemplateName)}${currentUser.id===e.userId?"":"&userId="+e.userId}${e.usedPublishedVersion?"&version=published":"&version=draft"}${o?"&formFieldsUrl="+o:""}`}class ApiStream{constructor(e,t,o,r){if("orders"===t)this.endpoint="wss://"+e+"/stream/orders";this.closeConnection=!1,this.timeout=250,this.token=o,this.onMessage=r,this.connect()}disconnect(){clearInterval(this.pingHandle),clearTimeout(this.timeoutHandle),this.closeConnection=!0,this.socket.close()}tryReconnect(){clearInterval(this.pingHandle),clearTimeout(this.timeoutHandle),this.timeoutHandle=window.setTimeout(()=>this.connect(),this.timeout)}connect(){!0!==this.closeConnection&&(this.timeout=Math.min(1.5*this.timeout,1e4),this.socket=new WebSocket(this.endpoint),this.socket.onerror=()=>{this.tryReconnect()},this.socket.onclose=()=>{this.tryReconnect()},this.socket.onopen=()=>{const e={c:adm.useAdminMode?"adminAuth":"auth",p:this.token};this.timeout=250,clearInterval(this.pingHandle),this.pingHandle=window.setInterval(()=>this.sendPing(),25e3),this.socket.send(JSON.stringify(e))},this.socket.onmessage=e=>{const t=JSON.parse(e.data);switch(t.c){case"ping":this.sendPong();break;case"pong":case"auth":break;case"tokenExpired":this.disconnect();break;default:this.onMessage(t)}})}sendPing(){this.socket.send(JSON.stringify({c:"ping",p:""}))}sendPong(){this.socket.send(JSON.stringify({c:"pong",p:""}))}}function arrayBufferToHex(e){const t=new Uint8Array(e);return Array.from(t).map(e=>("00"+e.toString(16)).slice(-2)).join("")}async function sha1hex(e){let t;if("string"==typeof e){t=(new TextEncoder).encode(e)}else t=e;return arrayBufferToHex(await crypto.subtle.digest("SHA-1",t))}function loadBlobAsArrayBuffer(e){return new Promise((t,o)=>{const r=new FileReader;r.onload=function(){t(r.result)},r.onerror=function(e){o(e)},r.readAsArrayBuffer(e)})}async function calculateBlobSha1(e){const t=await loadBlobAsArrayBuffer(e),o=new Uint8Array(t);return await sha1hex(o)}function sendXhr(e,t,o){return new Promise((o,r)=>{e.onreadystatechange=function(){4===e.readyState&&o()},e.onerror=function(){r({status:this.status,statusText:e.statusText})},e.send(t)})}async function getExtension(e){if(e.size<12)throw new Error("Invalid image file. Please upload a valid file. File="+e.name);const t=e.slice(0,12),o=arrayBufferToHex(await loadBlobAsArrayBuffer(t));let r="";if(o.startsWith("89504e470d0a1a0a"))r=".png";else if(o.startsWith("ffd8ff"))r=".jpg";else if(o.startsWith("255044462d"))r=".pdf";else if(o.startsWith("49492a00")||o.startsWith("4d4d002a"))r=".tif";else if(o.startsWith("52494646")||o.endsWith("57454250"))r=".webp";else{if(-1===o.indexOf("6674797068656963"))throw new Error("Invalid file type provided.");r=".heic"}return{extension:r,magick:o}}async function uploadToEndpoint(e){const t=e.get("key"),o=new XMLHttpRequest,r="https://printess-open.s3.eu-central-1.amazonaws.com/";if(o.open("POST",r,!0),await sendXhr(o,e),o.status>=200&&o.status<300){return r+t}throw new Error("Could not upload. Status code="+o.status)}
/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const t$3=window,e$7=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$4=Symbol(),n$4=new WeakMap;let o$6=class{constructor(e,t,o){if(this._$cssResult$=!0,o!==s$4)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(e$7&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=n$4.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&n$4.set(t,e))}return e}toString(){return this.cssText}};const r$3=e=>new o$6("string"==typeof e?e:e+"",void 0,s$4),i$4=(e,...t)=>{const o=1===e.length?e[0]:t.reduce((t,o,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+e[r+1],e[0]);return new o$6(o,e,s$4)},S$1=(e,t)=>{e$7?e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):t.forEach(t=>{const o=document.createElement("style"),r=t$3.litNonce;void 0!==r&&o.setAttribute("nonce",r),o.textContent=t.cssText,e.appendChild(o)})},c$3=e$7?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return r$3(t)})(e):e;
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */var s$3;const e$6=window,r$2=e$6.trustedTypes,h$1=r$2?r$2.emptyScript:"",o$5=e$6.reactiveElementPolyfillSupport,n$3={toAttribute(e,t){switch(t){case Boolean:e=e?h$1:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let o=e;switch(t){case Boolean:o=null!==e;break;case Number:o=null===e?null:Number(e);break;case Object:case Array:try{o=JSON.parse(e)}catch(e){o=null}}return o}},a$1=(e,t)=>t!==e&&(t==t||e==e),l$4={attribute:!0,type:String,converter:n$3,reflect:!1,hasChanged:a$1};let d$1=class extends HTMLElement{constructor(){super(),this._$Ei=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this._$El=null,this.u()}static addInitializer(e){var t;this.finalize(),(null!==(t=this.h)&&void 0!==t?t:this.h=[]).push(e)}static get observedAttributes(){this.finalize();const e=[];return this.elementProperties.forEach((t,o)=>{const r=this._$Ep(o,t);void 0!==r&&(this._$Ev.set(r,o),e.push(r))}),e}static createProperty(e,t=l$4){if(t.state&&(t.attribute=!1),this.finalize(),this.elementProperties.set(e,t),!t.noAccessor&&!this.prototype.hasOwnProperty(e)){const o="symbol"==typeof e?Symbol():"__"+e,r=this.getPropertyDescriptor(e,o,t);void 0!==r&&Object.defineProperty(this.prototype,e,r)}}static getPropertyDescriptor(e,t,o){return{get(){return this[t]},set(r){const i=this[e];this[t]=r,this.requestUpdate(e,i,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)||l$4}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const e=Object.getPrototypeOf(this);if(e.finalize(),void 0!==e.h&&(this.h=[...e.h]),this.elementProperties=new Map(e.elementProperties),this._$Ev=new Map,this.hasOwnProperty("properties")){const e=this.properties,t=[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)];for(const o of t)this.createProperty(o,e[o])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const o=new Set(e.flat(1/0).reverse());for(const e of o)t.unshift(c$3(e))}else void 0!==e&&t.push(c$3(e));return t}static _$Ep(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof e?e.toLowerCase():void 0}u(){var e;this._$E_=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$Eg(),this.requestUpdate(),null===(e=this.constructor.h)||void 0===e||e.forEach(e=>e(this))}addController(e){var t,o;(null!==(t=this._$ES)&&void 0!==t?t:this._$ES=[]).push(e),void 0!==this.renderRoot&&this.isConnected&&(null===(o=e.hostConnected)||void 0===o||o.call(e))}removeController(e){var t;null===(t=this._$ES)||void 0===t||t.splice(this._$ES.indexOf(e)>>>0,1)}_$Eg(){this.constructor.elementProperties.forEach((e,t)=>{this.hasOwnProperty(t)&&(this._$Ei.set(t,this[t]),delete this[t])})}createRenderRoot(){var e;const t=null!==(e=this.shadowRoot)&&void 0!==e?e:this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){var e;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(e=this._$ES)||void 0===e||e.forEach(e=>{var t;return null===(t=e.hostConnected)||void 0===t?void 0:t.call(e)})}enableUpdating(e){}disconnectedCallback(){var e;null===(e=this._$ES)||void 0===e||e.forEach(e=>{var t;return null===(t=e.hostDisconnected)||void 0===t?void 0:t.call(e)})}attributeChangedCallback(e,t,o){this._$AK(e,o)}_$EO(e,t,o=l$4){var r;const i=this.constructor._$Ep(e,o);if(void 0!==i&&!0===o.reflect){const a=(void 0!==(null===(r=o.converter)||void 0===r?void 0:r.toAttribute)?o.converter:n$3).toAttribute(t,o.type);this._$El=e,null==a?this.removeAttribute(i):this.setAttribute(i,a),this._$El=null}}_$AK(e,t){var o;const r=this.constructor,i=r._$Ev.get(e);if(void 0!==i&&this._$El!==i){const e=r.getPropertyOptions(i),a="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==(null===(o=e.converter)||void 0===o?void 0:o.fromAttribute)?e.converter:n$3;this._$El=i,this[i]=a.fromAttribute(t,e.type),this._$El=null}}requestUpdate(e,t,o){let r=!0;void 0!==e&&(((o=o||this.constructor.getPropertyOptions(e)).hasChanged||a$1)(this[e],t)?(this._$AL.has(e)||this._$AL.set(e,t),!0===o.reflect&&this._$El!==e&&(void 0===this._$EC&&(this._$EC=new Map),this._$EC.set(e,o))):r=!1),!this.isUpdatePending&&r&&(this._$E_=this._$Ej())}async _$Ej(){this.isUpdatePending=!0;try{await this._$E_}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var e;if(!this.isUpdatePending)return;this.hasUpdated,this._$Ei&&(this._$Ei.forEach((e,t)=>this[t]=e),this._$Ei=void 0);let t=!1;const o=this._$AL;try{t=this.shouldUpdate(o),t?(this.willUpdate(o),null===(e=this._$ES)||void 0===e||e.forEach(e=>{var t;return null===(t=e.hostUpdate)||void 0===t?void 0:t.call(e)}),this.update(o)):this._$Ek()}catch(e){throw t=!1,this._$Ek(),e}t&&this._$AE(o)}willUpdate(e){}_$AE(e){var t;null===(t=this._$ES)||void 0===t||t.forEach(e=>{var t;return null===(t=e.hostUpdated)||void 0===t?void 0:t.call(e)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$Ek(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$E_}shouldUpdate(e){return!0}update(e){void 0!==this._$EC&&(this._$EC.forEach((e,t)=>this._$EO(t,this[t],e)),this._$EC=void 0),this._$Ek()}updated(e){}firstUpdated(e){}};
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
var t$2;d$1.finalized=!0,d$1.elementProperties=new Map,d$1.elementStyles=[],d$1.shadowRootOptions={mode:"open"},null==o$5||o$5({ReactiveElement:d$1}),(null!==(s$3=e$6.reactiveElementVersions)&&void 0!==s$3?s$3:e$6.reactiveElementVersions=[]).push("1.6.1");const i$3=window,s$2=i$3.trustedTypes,e$5=s$2?s$2.createPolicy("lit-html",{createHTML:e=>e}):void 0,o$4="$lit$",n$2=`lit$${(Math.random()+"").slice(9)}$`,l$3="?"+n$2,h=`<${l$3}>`,r$1=document,d=()=>r$1.createComment(""),u$2=e=>null===e||"object"!=typeof e&&"function"!=typeof e,c$2=Array.isArray,v=e=>c$2(e)||"function"==typeof(null==e?void 0:e[Symbol.iterator]),a="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,m$1=/>/g,p$1=RegExp(`>|${a}(?:([^\\s"'>=/]+)(${a}*=${a}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g=/'/g,$=/"/g,y=/^(?:script|style|textarea|title)$/i,w=e=>(t,...o)=>({_$litType$:e,strings:t,values:o}),x=w(1),T=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),E=new WeakMap,C=r$1.createTreeWalker(r$1,129,null,!1),P=(e,t)=>{const o=e.length-1,r=[];let i,a=2===t?"<svg>":"",s=f$1;for(let t=0;t<o;t++){const o=e[t];let n,l,c=-1,d=0;for(;d<o.length&&(s.lastIndex=d,l=s.exec(o),null!==l);)d=s.lastIndex,s===f$1?"!--"===l[1]?s=_:void 0!==l[1]?s=m$1:void 0!==l[2]?(y.test(l[2])&&(i=RegExp("</"+l[2],"g")),s=p$1):void 0!==l[3]&&(s=p$1):s===p$1?">"===l[0]?(s=null!=i?i:f$1,c=-1):void 0===l[1]?c=-2:(c=s.lastIndex-l[2].length,n=l[1],s=void 0===l[3]?p$1:'"'===l[3]?$:g):s===$||s===g?s=p$1:s===_||s===m$1?s=f$1:(s=p$1,i=void 0);const p=s===p$1&&e[t+1].startsWith("/>")?" ":"";a+=s===f$1?o+h:c>=0?(r.push(n),o.slice(0,c)+o$4+o.slice(c)+n$2+p):o+n$2+(-2===c?(r.push(void 0),t):p)}const n=a+(e[o]||"<?>")+(2===t?"</svg>":"");if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==e$5?e$5.createHTML(n):n,r]};class V{constructor({strings:e,_$litType$:t},o){let r;this.parts=[];let i=0,a=0;const s=e.length-1,n=this.parts,[l,c]=P(e,t);if(this.el=V.createElement(l,o),C.currentNode=this.el.content,2===t){const e=this.el.content,t=e.firstChild;t.remove(),e.append(...t.childNodes)}for(;null!==(r=C.nextNode())&&n.length<s;){if(1===r.nodeType){if(r.hasAttributes()){const e=[];for(const t of r.getAttributeNames())if(t.endsWith(o$4)||t.startsWith(n$2)){const o=c[a++];if(e.push(t),void 0!==o){const e=r.getAttribute(o.toLowerCase()+o$4).split(n$2),t=/([.?@])?(.*)/.exec(o);n.push({type:1,index:i,name:t[2],strings:e,ctor:"."===t[1]?k:"?"===t[1]?I:"@"===t[1]?L:R})}else n.push({type:6,index:i})}for(const t of e)r.removeAttribute(t)}if(y.test(r.tagName)){const e=r.textContent.split(n$2),t=e.length-1;if(t>0){r.textContent=s$2?s$2.emptyScript:"";for(let o=0;o<t;o++)r.append(e[o],d()),C.nextNode(),n.push({type:2,index:++i});r.append(e[t],d())}}}else if(8===r.nodeType)if(r.data===l$3)n.push({type:2,index:i});else{let e=-1;for(;-1!==(e=r.data.indexOf(n$2,e+1));)n.push({type:7,index:i}),e+=n$2.length-1}i++}}static createElement(e,t){const o=r$1.createElement("template");return o.innerHTML=e,o}}function N(e,t,o=e,r){var i,a,s,n;if(t===T)return t;let l=void 0!==r?null===(i=o._$Co)||void 0===i?void 0:i[r]:o._$Cl;const c=u$2(t)?void 0:t._$litDirective$;return(null==l?void 0:l.constructor)!==c&&(null===(a=null==l?void 0:l._$AO)||void 0===a||a.call(l,!1),void 0===c?l=void 0:(l=new c(e),l._$AT(e,o,r)),void 0!==r?(null!==(s=(n=o)._$Co)&&void 0!==s?s:n._$Co=[])[r]=l:o._$Cl=l),void 0!==l&&(t=N(e,l._$AS(e,t.values),l,r)),t}class S{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){var t;const{el:{content:o},parts:r}=this._$AD,i=(null!==(t=null==e?void 0:e.creationScope)&&void 0!==t?t:r$1).importNode(o,!0);C.currentNode=i;let a=C.nextNode(),s=0,n=0,l=r[0];for(;void 0!==l;){if(s===l.index){let t;2===l.type?t=new M(a,a.nextSibling,this,e):1===l.type?t=new l.ctor(a,l.name,l.strings,this,e):6===l.type&&(t=new z(a,this,e)),this._$AV.push(t),l=r[++n]}s!==(null==l?void 0:l.index)&&(a=C.nextNode(),s++)}return i}v(e){let t=0;for(const o of this._$AV)void 0!==o&&(void 0!==o.strings?(o._$AI(e,o,t),t+=o.strings.length-2):o._$AI(e[t])),t++}}class M{constructor(e,t,o,r){var i;this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=o,this.options=r,this._$Cp=null===(i=null==r?void 0:r.isConnected)||void 0===i||i}get _$AU(){var e,t;return null!==(t=null===(e=this._$AM)||void 0===e?void 0:e._$AU)&&void 0!==t?t:this._$Cp}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===(null==e?void 0:e.nodeType)&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=N(this,e,t),u$2(e)?e===A||null==e||""===e?(this._$AH!==A&&this._$AR(),this._$AH=A):e!==this._$AH&&e!==T&&this._(e):void 0!==e._$litType$?this.g(e):void 0!==e.nodeType?this.$(e):v(e)?this.T(e):this._(e)}k(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}$(e){this._$AH!==e&&(this._$AR(),this._$AH=this.k(e))}_(e){this._$AH!==A&&u$2(this._$AH)?this._$AA.nextSibling.data=e:this.$(r$1.createTextNode(e)),this._$AH=e}g(e){var t;const{values:o,_$litType$:r}=e,i="number"==typeof r?this._$AC(e):(void 0===r.el&&(r.el=V.createElement(r.h,this.options)),r);if((null===(t=this._$AH)||void 0===t?void 0:t._$AD)===i)this._$AH.v(o);else{const e=new S(i,this),t=e.u(this.options);e.v(o),this.$(t),this._$AH=e}}_$AC(e){let t=E.get(e.strings);return void 0===t&&E.set(e.strings,t=new V(e)),t}T(e){c$2(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let o,r=0;for(const i of e)r===t.length?t.push(o=new M(this.k(d()),this.k(d()),this,this.options)):o=t[r],o._$AI(i),r++;r<t.length&&(this._$AR(o&&o._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){var o;for(null===(o=this._$AP)||void 0===o||o.call(this,!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){var t;void 0===this._$AM&&(this._$Cp=e,null===(t=this._$AP)||void 0===t||t.call(this,e))}}class R{constructor(e,t,o,r,i){this.type=1,this._$AH=A,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=A}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(e,t=this,o,r){const i=this.strings;let a=!1;if(void 0===i)e=N(this,e,t,0),a=!u$2(e)||e!==this._$AH&&e!==T,a&&(this._$AH=e);else{const r=e;let s,n;for(e=i[0],s=0;s<i.length-1;s++)n=N(this,r[o+s],t,s),n===T&&(n=this._$AH[s]),a||(a=!u$2(n)||n!==this._$AH[s]),n===A?e=A:e!==A&&(e+=(null!=n?n:"")+i[s+1]),this._$AH[s]=n}a&&!r&&this.j(e)}j(e){e===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=e?e:"")}}class k extends R{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===A?void 0:e}}const H=s$2?s$2.emptyScript:"";class I extends R{constructor(){super(...arguments),this.type=4}j(e){e&&e!==A?this.element.setAttribute(this.name,H):this.element.removeAttribute(this.name)}}class L extends R{constructor(e,t,o,r,i){super(e,t,o,r,i),this.type=5}_$AI(e,t=this){var o;if((e=null!==(o=N(this,e,t,0))&&void 0!==o?o:A)===T)return;const r=this._$AH,i=e===A&&r!==A||e.capture!==r.capture||e.once!==r.once||e.passive!==r.passive,a=e!==A&&(r===A||i);i&&this.element.removeEventListener(this.name,this,r),a&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){var t,o;"function"==typeof this._$AH?this._$AH.call(null!==(o=null===(t=this.options)||void 0===t?void 0:t.host)&&void 0!==o?o:this.element,e):this._$AH.handleEvent(e)}}class z{constructor(e,t,o){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(e){N(this,e)}}const Z={I:M},j=i$3.litHtmlPolyfillSupport;null==j||j(V,M),(null!==(t$2=i$3.litHtmlVersions)&&void 0!==t$2?t$2:i$3.litHtmlVersions=[]).push("2.7.2");const B=(e,t,o)=>{var r,i;const a=null!==(r=null==o?void 0:o.renderBefore)&&void 0!==r?r:t;let s=a._$litPart$;if(void 0===s){const e=null!==(i=null==o?void 0:o.renderBefore)&&void 0!==i?i:null;a._$litPart$=s=new M(t.insertBefore(d(),e),e,void 0,null!=o?o:{})}return s._$AI(e),s
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */};var l$2,o$3;let s$1=class extends d$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e,t;const o=super.createRenderRoot();return null!==(e=(t=this.renderOptions).renderBefore)&&void 0!==e||(t.renderBefore=o.firstChild),o}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=B(t,this.renderRoot,this.renderOptions)}connectedCallback(){var e;super.connectedCallback(),null===(e=this._$Do)||void 0===e||e.setConnected(!0)}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this._$Do)||void 0===e||e.setConnected(!1)}render(){return T}};s$1.finalized=!0,s$1._$litElement$=!0,null===(l$2=globalThis.litElementHydrateSupport)||void 0===l$2||l$2.call(globalThis,{LitElement:s$1});const n$1=globalThis.litElementPolyfillSupport;null==n$1||n$1({LitElement:s$1}),(null!==(o$3=globalThis.litElementVersions)&&void 0!==o$3?o$3:globalThis.litElementVersions=[]).push("3.3.1");
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const e$4=e=>t=>"function"==typeof t?((e,t)=>(customElements.define(e,t),t))(e,t):((e,t)=>{const{kind:o,elements:r}=t;return{kind:o,elements:r,finisher(t){customElements.define(e,t)}}})(e,t),i$2=(e,t)=>"method"===t.kind&&t.descriptor&&!("value"in t.descriptor)?{...t,finisher(o){o.createProperty(t.key,e)}}:{kind:"field",key:Symbol(),placement:"own",descriptor:{},originalKey:t.key,initializer(){"function"==typeof t.initializer&&(this[t.key]=t.initializer.call(this))},finisher(o){o.createProperty(t.key,e)}};
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */function e$3(e){return(t,o)=>void 0!==o?((e,t,o)=>{t.constructor.createProperty(o,e)})(e,t,o):i$2(e,t)}
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */function t$1(e){return e$3({...e,state:!0})}
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const o$2=({finisher:e,descriptor:t})=>(o,r)=>{var i;if(void 0===r){const r=null!==(i=o.originalKey)&&void 0!==i?i:o.key,a=null!=t?{kind:"method",placement:"prototype",key:r,descriptor:t(o.key)}:{...o,key:r};return null!=e&&(a.finisher=function(t){e(t,r)}),a}{const i=o.constructor;void 0!==t&&Object.defineProperty(o,r,t(r)),null==e||e(i,r)}};
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */function i$1(e,t){return o$2({descriptor:t=>{const o={get(){var t,o;return null!==(o=null===(t=this.renderRoot)||void 0===t?void 0:t.querySelector(e))&&void 0!==o?o:null},enumerable:!0,configurable:!0};return o}})}
/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */var n;null===(n=window.HTMLSlotElement)||void 0===n||n.prototype.assignedElements;
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},e$2=e=>(...t)=>({_$litDirective$:e,values:t});class i{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,o){this._$Ct=e,this._$AM=t,this._$Ci=o}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */let e$1=class extends i{constructor(e){if(super(e),this.et=A,e.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===A||null==e)return this.ft=void 0,this.et=e;if(e===T)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.et)return this.ft;this.et=e;const t=[e];return t.raw=t,this.ft={_$litType$:this.constructor.resultType,strings:t,values:[]}}};e$1.directiveName="unsafeHTML",e$1.resultType=1;const o$1=e$2(e$1);var __decorate$2F=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const iconNames=["image","image-solid","image-regular","portrait","bezier","text","pathText","magnet","pointer","close-square","close","docRef","collapseLeft","expandLeft","edit","edit-inverse","pen","pen-solid","pencil-ruler","plus","plus-circle","plus-square","minus","minus-light","circle-1","shapes","square","settings","vector-shape","address-card","paperclip","facing-pages","page","cog","perspective","style","story","text-flow","exchange","text-align-justify-justify","text-align-justify-left","text-align-justify-right","text-align-justify-center","text-align-left","text-align-right","text-align-center","check","check-solid","check-square","user-circle","user-solid","user-crown-solid","arrow-left","arrow-right","arrow-up","arrow-down","arrows","arrows-circle","arrows-h","arrows-v","carret-down-solid","carret-right-solid","carret-left-solid","text-size","text-width","line-height","line-width","palette","brush","undo","undo-solid","redo","redo-solid","copy","copy-solid","paste","cut","object-ungroup","trash","trash-solid","remove-format","clipboard","search-plus","search-minus","search-light","save","save-light","slash","empty","cloud-upload-alt","folder-open-solid","tint","warp-arc","warp-flag","warp-bulge","warp-arc-upper","warp-pit-upper","warp-arc-lower","warp-pit-lower","warp-fish","warp-squeeze","warp-mug","mesh","crop","place-image","fill-image","fit-image","vertical-align-bottom-baseline","vertical-align-center-baseline","vertical-align-center","vertical-align-top","vertical-align-bottom","warning","effects","robot","microchip","record","play","running","rotator","lock-closed","lock-open","lock-closed-solid","user-lock-closed","user-lock-opened","link","stroke-cap-round","stroke-cap-projecting","stroke-cap-butt","stroke-align-center","stroke-align-inside","stroke-align-outside","stroke-join-miter","stroke-join-round","stroke-join-bevel","wrap-both-sides","no-wrap","printess-wand","print-solid","print-slash-solid","shopping-cart","shopping-cart-solid","shopping-cart-add","folder-plus","eye-solid","eye-solid-slash","font","send-back","send-backward","bring-front","bring-forward","distort","list-ul","ellipsis-v","ellipsis-h","sun-light","adjust","scroll-old","align-top","align-middle","align-bottom","align-left","align-center","align-right","space-vertical-around","space-vertical-between","space-horizontal-around","space-horizontal-between","layer-group","ruler","layout-snippet","layout-snippet-invers","group-snippet","group-snippet-invers","primary-doc","primary-doc-invers","preview-doc","preview-doc-invers","production-doc","production-doc-invers","facebook-round","clock-solid","page-plus-solid","user-friends-solid","opacity","file-invoice","help","triangle-solid","pin-solid","pin","angle-right","angle-down","sync","mirror-x","mirror-y","folder-tree-solid","filter-reset","compact-disc","chevron-double-down-duotone","chevron-left","chevron-right","angle-left","angle-right","database","coins","sync-alt","clock-light","calendar-alt","calendar-light","coin-light","coin","page-inverse","page-light","bars-light","credit-card","info-circle","carret-left-solid","check-circle-solid","pause-solid","pause-light","angle-up-light","angle-down-light","chevron-up-light","chevron-down-light","sign-in-light","share-light","share-solid","reply-light","reply-solid","undo-arrow","redo-arrow","rotate","primary","back","angle-double-right","angle-double-left","arrow-to-right","arrow-to-left","distribute-image","minus-square","arrow-square-right","bullseye-pointer-solid","hand-pointer-light","project-diagram-solid","eye-dropper","eye-dropper-light","cloud-upload-light","cloud-upload-check","arrows-resize-h","arrows-resize-v","arrows-resize","arrows-minimize","arrows-maximize","shopping-basket","shopping-basket-light","home-solid","home-light","smile","code-curly","text-bottom","text-center","text-top","pen-swirl","handwriting","focus-face","focus-group","mug","shirt","flower","burger-menu","path-non-zero","path-even-odd","circle-dollar","grid-lines","camera-slash","scissors","record-up","record-down","arrow-left-circle","arrow-right-circle","grid-4","image-to-text","text-to-image","handwriting-to-text","text-to-handwriting","arrow-right-long","camera-solid","desktop-mobile-duotone","cloud-check-duotone","glass","pot-food","coke","cube-regular","cube-invers","deco-fading","deco-color-cut","deco-oblique-lines","deco-horizontal-lines","text-block-shadow","text-line-shadow","text-3d-shadow","text-no-shadow","add-gap-around","remove-gap-around","book-thin","book-solid","chart-mixed","badge-check","grip-dots-vertical","square-caret-down","file-arrow-down","download","file-code-light","file-plus-light","download-light","circle-check-solid","circle-ellipsis-solid","circle-plus-solid"];function getIcon$1(e){switch(e){case"docRef":return'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"   viewBox="50 50 412 412"   xml:space="preserve"><g>    <polygon points="272,160 352,160 352,240 384,240 384,128 272,128 \t"/><polygon points="160,240 160,160 240,160 240,128 128,128 128,240 \t"/>  <polygon points="240,352 160,352 160,272 128,272 128,384 240,384 \t"/>    <polygon points="352,272 352,352 272,352 272,384 384,384 384,272 \t"/></g></svg>';case"image":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm16 336c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V112c0-8.822 7.178-16 16-16h416c8.822 0 16 7.178 16 16v288zM112 232c30.928 0 56-25.072 56-56s-25.072-56-56-56-56 25.072-56 56 25.072 56 56 56zm0-80c13.234 0 24 10.766 24 24s-10.766 24-24 24-24-10.766-24-24 10.766-24 24-24zm207.029 23.029L224 270.059l-31.029-31.029c-9.373-9.373-24.569-9.373-33.941 0l-88 88A23.998 23.998 0 0 0 64 344v28c0 6.627 5.373 12 12 12h360c6.627 0 12-5.373 12-12v-92c0-6.365-2.529-12.47-7.029-16.971l-88-88c-9.373-9.372-24.569-9.372-33.942 0zM416 352H96v-4.686l80-80 48 48 112-112 80 80V352z"/></svg>';case"image-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h416c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM112 120c-30.928 0-56 25.072-56 56s25.072 56 56 56 56-25.072 56-56-25.072-56-56-56zM64 384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L208 320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971 0L64 336v48z"></path></svg>';case"image-regular":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"></path></svg>';case"help":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path  d="M200.343 0C124.032 0 69.761 31.599 28.195 93.302c-14.213 21.099-9.458 49.674 10.825 65.054l42.034 31.872c20.709 15.703 50.346 12.165 66.679-8.51 21.473-27.181 28.371-31.96 46.132-31.96 10.218 0 25.289 6.999 25.289 18.242 0 25.731-109.3 20.744-109.3 122.251V304c0 16.007 7.883 30.199 19.963 38.924C109.139 360.547 96 386.766 96 416c0 52.935 43.065 96 96 96s96-43.065 96-96c0-29.234-13.139-55.453-33.817-73.076 12.08-8.726 19.963-22.917 19.963-38.924v-4.705c25.386-18.99 104.286-44.504 104.286-139.423C378.432 68.793 288.351 0 200.343 0zM192 480c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64zm50.146-186.406V304c0 8.837-7.163 16-16 16h-68.292c-8.836 0-16-7.163-16-16v-13.749c0-86.782 109.3-57.326 109.3-122.251 0-32-31.679-50.242-57.289-50.242-33.783 0-49.167 16.18-71.242 44.123-5.403 6.84-15.284 8.119-22.235 2.848l-42.034-31.872c-6.757-5.124-8.357-14.644-3.62-21.677C88.876 60.499 132.358 32 200.343 32c70.663 0 146.089 55.158 146.089 127.872 0 96.555-104.286 98.041-104.286 133.722z"></path></svg>';case"bezier":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M576 176c35.35 0 64-28.65 64-64s-28.65-64-64-64c-29.79 0-54.6 20.44-61.74 48H400V64c0-17.67-14.33-32-32-32h-96c-17.67 0-32 14.33-32 32v32H125.74C118.6 68.44 93.79 48 64 48 28.65 48 0 76.65 0 112s28.65 64 64 64c29.79 0 54.6-20.44 61.74-48h112.81c-80.61 31.51-135.13 105.79-141.27 192H64c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32h-30.73c5.76-69.41 48.06-129.54 111.08-158.25.96 16.81 14.6 30.25 31.65 30.25h96c17.05 0 30.69-13.44 31.65-30.25 63.02 28.72 105.32 88.84 111.08 158.25H480c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h96c17.67 0 32-14.33 32-32v-96c0-17.67-14.33-32-32-32h-33.27c-6.13-86.21-60.66-160.49-141.27-192h112.81c7.13 27.56 31.94 48 61.73 48zM160 448H64v-96h96v96zM64 144c-17.64 0-32-14.36-32-32s14.36-32 32-32 32 14.36 32 32-14.36 32-32 32zm304 16h-96V64h96v96zm208 288h-96v-96h96v96zm0-368c17.64 0 32 14.36 32 32s-14.36 32-32 32-32-14.36-32-32 14.36-32 32-32z"/></svg>';case"pathText":return'<svg   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">\t<path  d="M61.78,19.86l-3.6,5.15c-0.36,0.52-1.07,0.64-1.59,0.28l-1.87-1.31c-0.52-0.36-0.64-1.07-0.28-1.59l2.29-3.28\t\tl-6.68-4.66L36.96,33.19l2.69,1.88c0.52,0.36,0.64,1.07,0.28,1.59l-1.31,1.87c-0.36,0.52-1.07,0.64-1.59,0.28l-9.13-6.38\t\tc-0.52-0.36-0.64-1.07-0.28-1.59l1.31-1.87c0.36-0.52,1.07-0.64,1.59-0.28l2.69,1.88L46.3,11.84l-6.68-4.66l-2.29,3.28\t\tc-0.36,0.52-1.07,0.64-1.59,0.28l-1.87-1.31c-0.52-0.36-0.64-1.07-0.28-1.59l3.6-5.15c0.72-1.03,2.15-1.29,3.18-0.56l20.85,14.56\t\tC62.25,17.4,62.5,18.83,61.78,19.86z"/>\t<path   d="M43.23,61.54c-0.9,0-1.75-0.54-2.11-1.42C39.48,56.1,35.49,48.5,27.18,42.8c-8.77-6.01-17.75-6.78-22.34-6.76\t\tc-0.01,0-0.02,0-0.03,0c-1.24,0-2.26-1-2.27-2.25c-0.02-1.26,0.99-2.29,2.25-2.3c5.11-0.06,15.17,0.84,24.97,7.55\t\tc9.3,6.37,13.76,14.87,15.59,19.37c0.47,1.16-0.09,2.49-1.25,2.96C43.81,61.49,43.52,61.54,43.23,61.54z"/> </svg>';case"text":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M448 48v72a8 8 0 0 1-8 8h-16a8 8 0 0 1-8-8V64H240v384h72a8 8 0 0 1 8 8v16a8 8 0 0 1-8 8H136a8 8 0 0 1-8-8v-16a8 8 0 0 1 8-8h72V64H32v56a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V48a16 16 0 0 1 16-16h416a16 16 0 0 1 16 16z"/></svg>';case"magnet":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M372 32c-19.9 0-36 16.1-36 36v172c0 64-40 96-79.9 96-40 0-80.1-32-80.1-96V68c0-19.9-16.1-36-36-36H36.4C16.4 32 .2 48.3.4 68.4c.3 24.5.6 58.4.7 91.6H0v32h1.1C1 218.3.7 242 0 257.3 0 408 136.2 504 256.8 504 377.5 504 512 408 512 257.3V68c0-19.9-16.1-36-36-36H372zM36.5 68H140v92H37.1c-.1-33.4-.4-67.4-.6-92zM476 258.1c-.1 30.4-6.6 59.3-19.4 85.8-11.9 24.9-29 47.2-50.8 66.3-20.6 18.1-45.2 32.9-71.2 42.9-25.5 9.8-52.4 15-77.9 15-25.5 0-52.5-5.2-78.2-15-26.2-10-51-24.9-71.8-43-22-19.2-39.2-41.5-51.3-66.3-12.9-26.5-19.4-55.3-19.6-85.6.7-15.9 1-39.7 1.1-66.1H140v48c0 49.2 18.9 79.7 34.8 96.6 10.8 11.5 23.5 20.4 37.8 26.5 13.8 5.9 28.5 8.9 43.5 8.9s29.7-3 43.5-8.9c14.3-6.1 27-15 37.7-26.5 15.8-16.9 34.7-47.4 34.7-96.6v-48h102.9c.1 26.2.4 50.1 1.1 66zM372 160V68h103.5c-.3 24.6-.6 58.6-.6 92H372z"/></svg>';case"pointer":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M154.149 488.438l-41.915-101.865-46.788 52.8C42.432 465.345 0 448.788 0 413.5V38.561c0-34.714 41.401-51.675 64.794-26.59L309.547 274.41c22.697 24.335 6.074 65.09-27.195 65.09h-65.71l42.809 104.037c8.149 19.807-1.035 42.511-20.474 50.61l-36 15.001c-19.036 7.928-40.808-1.217-48.828-20.71zm-31.84-161.482l61.435 149.307c1.182 2.877 4.117 4.518 6.926 3.347l35.999-15c3.114-1.298 4.604-5.455 3.188-8.896L168.872 307.5h113.479c5.009 0 7.62-7.16 3.793-11.266L41.392 33.795C37.785 29.932 32 32.879 32 38.561V413.5c0 5.775 5.935 8.67 9.497 4.65l80.812-91.194z"/></svg>';case"collapseLeft":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M153.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L192.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L153 264.5c-4.6-4.7-4.6-12.3.1-17zm-128 17l117.8 116c4.7 4.7 12.3 4.7 17 0l7.1-7.1c4.7-4.7 4.7-12.3 0-17L64.7 256l102.2-100.4c4.7-4.7 4.7-12.3 0-17l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L25 247.5c-4.6 4.7-4.6 12.3.1 17z"/></svg>';case"expandLeft":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17zm128-17l-117.8-116c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17L255.3 256 153.1 356.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l117.8-116c4.6-4.7 4.6-12.3-.1-17z"/></svg>';case"edit":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M386.7 22.63C411.7-2.365 452.3-2.365 477.3 22.63L489.4 34.74C514.4 59.74 514.4 100.3 489.4 125.3L269 345.6C260.6 354.1 249.9 359.1 238.2 362.7L147.6 383.6C142.2 384.8 136.6 383.2 132.7 379.3C128.8 375.4 127.2 369.8 128.4 364.4L149.3 273.8C152 262.1 157.9 251.4 166.4 242.1L386.7 22.63zM454.6 45.26C442.1 32.76 421.9 32.76 409.4 45.26L382.6 72L440 129.4L466.7 102.6C479.2 90.13 479.2 69.87 466.7 57.37L454.6 45.26zM180.5 281L165.3 346.7L230.1 331.5C236.8 330.2 242.2 327.2 246.4 322.1L417.4 152L360 94.63L189 265.6C184.8 269.8 181.8 275.2 180.5 281V281zM208 64C216.8 64 224 71.16 224 80C224 88.84 216.8 96 208 96H80C53.49 96 32 117.5 32 144V432C32 458.5 53.49 480 80 480H368C394.5 480 416 458.5 416 432V304C416 295.2 423.2 288 432 288C440.8 288 448 295.2 448 304V432C448 476.2 412.2 512 368 512H80C35.82 512 0 476.2 0 432V144C0 99.82 35.82 64 80 64H208z"/></svg>';case"edit-inverse":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M490.3 40.4C512.2 62.27 512.2 97.73 490.3 119.6L460.3 149.7L362.3 51.72L392.4 21.66C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7L339.7 74.34L437.7 172.3L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2L159.6 382.8C150.1 385.6 141.5 383.4 135 376.1C128.6 370.5 126.4 361 129.2 352.4L158.8 263.6C161.6 255.3 166.2 247.8 172.4 241.7V241.7zM192 63.1C209.7 63.1 224 78.33 224 95.1C224 113.7 209.7 127.1 192 127.1H96C78.33 127.1 64 142.3 64 159.1V416C64 433.7 78.33 448 96 448H352C369.7 448 384 433.7 384 416V319.1C384 302.3 398.3 287.1 416 287.1C433.7 287.1 448 302.3 448 319.1V416C448 469 405 512 352 512H96C42.98 512 0 469 0 416V159.1C0 106.1 42.98 63.1 96 63.1H192z"/></svg>';case"pen":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M493.25 56.26l-37.51-37.51C443.25 6.25 426.87 0 410.49 0s-32.76 6.25-45.26 18.74L12.85 371.12.15 485.34C-1.45 499.72 9.88 512 23.95 512c.89 0 1.78-.05 2.69-.15l114.14-12.61 352.48-352.48c24.99-24.99 24.99-65.51-.01-90.5zM126.09 468.68l-93.03 10.31 10.36-93.17 263.89-263.89 82.77 82.77-263.99 263.98zm344.54-344.54l-57.93 57.93-82.77-82.77 57.93-57.93c6.04-6.04 14.08-9.37 22.63-9.37 8.55 0 16.58 3.33 22.63 9.37l37.51 37.51c12.47 12.48 12.47 32.78 0 45.26z"/></svg>';case"pen-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"></path></svg>';case"pencil-ruler":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M502.71 368.14L379.88 245.31l49.4-49.4 68.65-68.66c18.76-18.76 18.75-49.17 0-67.93l-45.25-45.25C443.3 4.69 431 0 418.71 0s-24.59 4.69-33.97 14.07l-68.65 68.64-49.4 49.4L143.87 9.29C137.68 3.1 129.56 0 121.44 0s-16.23 3.1-22.43 9.29L9.31 99c-12.38 12.39-12.39 32.47 0 44.86l122.8 122.8-113.01 113L.34 487.11c-2.72 15.63 11.22 26.9 24.59 24.56l107.44-18.84 112.94-112.96L368.14 502.7a31.621 31.621 0 0 0 22.42 9.29c8.12 0 16.24-3.1 22.43-9.29l89.72-89.7c12.39-12.39 12.39-32.47 0-44.86zM407.36 36.7c4.09-4.09 18.6-4.09 22.69 0l45.25 45.24c6.25 6.25 6.25 16.42 0 22.67l-46.03 46.03-67.94-67.94 46.03-46zM31.93 121.63l89.51-89.52L177.39 88l-39.03 39.03c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l39.04-39.04 44.1 44.05-89.5 89.49L31.93 121.63zm84.96 341.43L34.5 477.51l14.37-82.37 289.83-289.8 67.94 67.94-289.75 289.78zm273.88 17.02l-122.86-122.8 89.47-89.48 44.12 44.07-39.15 39.16c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l39.17-39.17 55.94 55.88-89.31 89.72z"></path></svg>';case"plus-circle":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M384 250v12c0 6.6-5.4 12-12 12h-98v98c0 6.6-5.4 12-12 12h-12c-6.6 0-12-5.4-12-12v-98h-98c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h98v-98c0-6.6 5.4-12 12-12h12c6.6 0 12 5.4 12 12v98h98c6.6 0 12 5.4 12 12zm120 6c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>';case"minus":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M140 274c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v12c0 6.6-5.4 12-12 12H140zm364-18c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>';case"minus-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M432 256C432 264.8 424.8 272 416 272H32c-8.844 0-16-7.15-16-15.99C16 247.2 23.16 240 32 240h384C424.8 240 432 247.2 432 256z"/></svg>';case"circle-1":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM320 384H192c-13.25 0-24-10.75-24-24S178.8 336 192 336h40V196.8L217.3 206.6C206.3 213.9 191.4 210.1 184 199.1C176.7 188.9 179.7 174 190.7 166.7l52-34.66c7.391-4.938 16.86-5.375 24.64-1.188C275.1 135 280 143.2 280 152v184H320c13.25 0 24 10.75 24 24S333.3 384 320 384z"/></svg>';case"shapes":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480 288H320c-17.67 0-32 14.33-32 32v160c0 17.67 14.33 32 32 32h160c17.67 0 32-14.33 32-32V320c0-17.67-14.33-32-32-32zm0 192H320V320h160v160zM128 256C57.31 256 0 313.31 0 384s57.31 128 128 128 128-57.31 128-128-57.31-128-128-128zm0 224c-52.93 0-96-43.07-96-96 0-52.94 43.07-96 96-96 52.94 0 96 43.06 96 96 0 52.93-43.06 96-96 96zm378.98-278.86L400.07 18.29C392.95 6.1 380.47 0 368 0s-24.95 6.1-32.07 18.29L229.02 201.14c-14.26 24.38 3.56 54.86 32.07 54.86h213.82c28.51 0 46.33-30.48 32.07-54.86zm-27.6 20.39c-.94 1.64-2.45 2.47-4.47 2.47H261.09c-2.02 0-3.53-.83-4.47-2.47-1.21-2.12-.35-3.6.02-4.23L363.55 34.44c.95-1.62 2.44-2.44 4.45-2.44s3.5.82 4.45 2.44L479.36 217.3c.37.63 1.24 2.11.02 4.23z"/></svg>';case"vector-shape":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M486.4 128c14.14 0 25.6-11.46 25.6-25.6V25.6C512 11.46 500.54 0 486.4 0h-76.8C395.46 0 384 11.46 384 25.6V48H128V25.6C128 11.46 116.54 0 102.4 0H25.6C11.46 0 0 11.46 0 25.6v76.8C0 116.54 11.46 128 25.6 128H48v256H25.6C11.46 384 0 395.46 0 409.6v76.8C0 500.54 11.46 512 25.6 512h76.8c14.14 0 25.6-11.46 25.6-25.6V464h256v22.4c0 14.14 11.46 25.6 25.6 25.6h76.8c14.14 0 25.6-11.46 25.6-25.6v-76.8c0-14.14-11.46-25.6-25.6-25.6H464V128h22.4zM416 32h64v64h-64V32zM32 96V32h64v64H32zm64 384H32v-64h64v64zm384-64v64h-64v-64h64zm-48-32h-22.4c-14.14 0-25.6 11.46-25.6 25.6V432H128v-22.4c0-14.14-11.46-25.6-25.6-25.6H80V128h22.4c14.14 0 25.6-11.46 25.6-25.6V80h256v22.4c0 14.14 11.46 25.6 25.6 25.6H432v256z"/></svg>';case"address-card":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M512 32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm32 384c0 17.6-14.4 32-32 32H64c-17.6 0-32-14.4-32-32V96c0-17.6 14.4-32 32-32h448c17.6 0 32 14.4 32 32v320zm-72-128H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0-64H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0-64H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zM208 288c44.2 0 80-35.8 80-80s-35.8-80-80-80-80 35.8-80 80 35.8 80 80 80zm0-128c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zm46.8 144c-19.5 0-24.4 7-46.8 7s-27.3-7-46.8-7c-21.2 0-41.8 9.4-53.8 27.4C100.2 342.1 96 355 96 368.9V392c0 4.4 3.6 8 8 8h16c4.4 0 8-3.6 8-8v-23.1c0-7 2.1-13.8 6-19.6 5.6-8.3 15.8-13.2 27.3-13.2 12.4 0 20.8 7 46.8 7 25.9 0 34.3-7 46.8-7 11.5 0 21.7 5 27.3 13.2 3.9 5.8 6 12.6 6 19.6V392c0 4.4 3.6 8 8 8h16c4.4 0 8-3.6 8-8v-23.1c0-13.9-4.2-26.8-11.4-37.5-12.3-18-32.9-27.4-54-27.4z"/></svg>';case"paperclip":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M149.106 512c-33.076 0-66.153-12.59-91.333-37.771-50.364-50.361-50.364-132.305-.002-182.665L319.842 29.498c39.331-39.331 103.328-39.331 142.66 0 39.331 39.332 39.331 103.327 0 142.657l-222.63 222.626c-28.297 28.301-74.347 28.303-102.65 0-28.3-28.301-28.3-74.349 0-102.649l170.301-170.298c4.686-4.686 12.284-4.686 16.97 0l5.661 5.661c4.686 4.686 4.686 12.284 0 16.971l-170.3 170.297c-15.821 15.821-15.821 41.563.001 57.385 15.821 15.82 41.564 15.82 57.385 0l222.63-222.626c26.851-26.851 26.851-70.541 0-97.394-26.855-26.851-70.544-26.849-97.395 0L80.404 314.196c-37.882 37.882-37.882 99.519 0 137.401 37.884 37.881 99.523 37.882 137.404.001l217.743-217.739c4.686-4.686 12.284-4.686 16.97 0l5.661 5.661c4.686 4.686 4.686 12.284 0 16.971L240.44 474.229C215.26 499.41 182.183 512 149.106 512z"/></svg>';case"facing-pages":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M546.4,32c-2.7,0-5.5,0.4-8.3,1.2L302.5,96h0L64,35.3c-9-2.2-16.5-4.5-30.3-3S5.9,49,5.9,62v332.4c0,9.2,15.9,16.7,30.4,21.6l0,0l238.4,60.7c18,4.3,37.5,4.4,55.5,0.1L540.7,424c16.8-4.9,27.9-16.6,27.9-29.7V48C568.6,38.8,558.1,32,546.4,32z M41.6,382.4V62.5l238.7,61.8v319.9L41.6,382.4z M324.6,444.4V124.2l214.6-61.7l1.8,322.9L324.6,444.4L324.6,444.4z"/></svg>';case"page":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 512"><path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16z"/></svg>';case"cog":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M482.696 299.276l-32.61-18.827a195.168 195.168 0 0 0 0-48.899l32.61-18.827c9.576-5.528 14.195-16.902 11.046-27.501-11.214-37.749-31.175-71.728-57.535-99.595-7.634-8.07-19.817-9.836-29.437-4.282l-32.562 18.798a194.125 194.125 0 0 0-42.339-24.48V38.049c0-11.13-7.652-20.804-18.484-23.367-37.644-8.909-77.118-8.91-114.77 0-10.831 2.563-18.484 12.236-18.484 23.367v37.614a194.101 194.101 0 0 0-42.339 24.48L105.23 81.345c-9.621-5.554-21.804-3.788-29.437 4.282-26.36 27.867-46.321 61.847-57.535 99.595-3.149 10.599 1.47 21.972 11.046 27.501l32.61 18.827a195.168 195.168 0 0 0 0 48.899l-32.61 18.827c-9.576 5.528-14.195 16.902-11.046 27.501 11.214 37.748 31.175 71.728 57.535 99.595 7.634 8.07 19.817 9.836 29.437 4.283l32.562-18.798a194.08 194.08 0 0 0 42.339 24.479v37.614c0 11.13 7.652 20.804 18.484 23.367 37.645 8.909 77.118 8.91 114.77 0 10.831-2.563 18.484-12.236 18.484-23.367v-37.614a194.138 194.138 0 0 0 42.339-24.479l32.562 18.798c9.62 5.554 21.803 3.788 29.437-4.283 26.36-27.867 46.321-61.847 57.535-99.595 3.149-10.599-1.47-21.972-11.046-27.501zm-65.479 100.461l-46.309-26.74c-26.988 23.071-36.559 28.876-71.039 41.059v53.479a217.145 217.145 0 0 1-87.738 0v-53.479c-33.621-11.879-43.355-17.395-71.039-41.059l-46.309 26.74c-19.71-22.09-34.689-47.989-43.929-75.958l46.329-26.74c-6.535-35.417-6.538-46.644 0-82.079l-46.329-26.74c9.24-27.969 24.22-53.869 43.929-75.969l46.309 26.76c27.377-23.434 37.063-29.065 71.039-41.069V44.464a216.79 216.79 0 0 1 87.738 0v53.479c33.978 12.005 43.665 17.637 71.039 41.069l46.309-26.76c19.709 22.099 34.689 47.999 43.929 75.969l-46.329 26.74c6.536 35.426 6.538 46.644 0 82.079l46.329 26.74c-9.24 27.968-24.219 53.868-43.929 75.957zM256 160c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"/></svg>';case"perspective":return'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path d="M396.4,128c14.1,0,25.6-11.5,25.6-25.6V25.6C422,11.5,410.5,0,396.4,0h-76.8C305.5,0,294,11.5,294,25.6V48h-86V25.6 \tC208,11.5,196.5,0,182.4,0h-76.8C91.5,0,80,11.5,80,25.6v76.8c0,14.1,11.5,25.6,25.6,25.6H128L48,384H25.6C11.5,384,0,395.5,0,409.6 \tv76.8C0,500.5,11.5,512,25.6,512h76.8c14.1,0,25.6-11.5,25.6-25.6V464h256v22.4c0,14.1,11.5,25.6,25.6,25.6h76.8 \tc14.1,0,25.6-11.5,25.6-25.6v-76.8c0-14.1-11.5-25.6-25.6-25.6H464l-90-256H396.4z M326,32h64v64h-64V32z M112,96V32h64v64H112z \t M96,480H32v-64h64V480z M480,416v64h-64v-64H480z M432,384h-22.4c-14.1,0-25.6,11.5-25.6,25.6V432H128v-22.4 \tc0-14.1-11.5-25.6-25.6-25.6H80l80-256h22.4c14.1,0,25.6-11.5,25.6-25.6V80h86v22.4c0,14.1,11.5,25.6,25.6,25.6H342L432,384z"/> </svg> ';case"style":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M344 240H104c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0 96H104c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zM418.1 0c-5.8 0-11.8 1.8-17.3 5.7L357.3 37 318.7 9.2c-8.4-6-18.2-9.1-28.1-9.1-9.8 0-19.6 3-28 9.1L224 37 185.4 9.2C177 3.2 167.1.1 157.3.1s-19.6 3-28 9.1L90.7 37 47.2 5.7C41.8 1.8 35.8 0 29.9 0 14.4.1 0 12.3 0 29.9v452.3C0 499.5 14.3 512 29.9 512c5.8 0 11.8-1.8 17.3-5.7L90.7 475l38.6 27.8c8.4 6 18.2 9.1 28.1 9.1 9.8 0 19.6-3 28-9.1L224 475l38.6 27.8c8.4 6 18.3 9.1 28.1 9.1s19.6-3 28-9.1l38.6-27.8 43.5 31.3c5.4 3.9 11.4 5.7 17.3 5.7 15.5 0 29.8-12.2 29.8-29.8V29.9C448 12.5 433.7 0 418.1 0zM416 477.8L376 449l-18.7-13.5-18.7 13.5-38.6 27.8c-2.8 2-6 3-9.3 3-3.4 0-6.6-1.1-9.4-3.1L242.7 449 224 435.5 205.3 449l-38.6 27.8c-2.8 2-6 3-9.4 3-3.4 0-6.6-1.1-9.4-3.1L109.3 449l-18.7-13.5L72 449l-40 29.4V34.2L72 63l18.7 13.5L109.4 63 148 35.2c2.8-2 6-3 9.3-3 3.4 0 6.6 1.1 9.4 3.1L205.3 63 224 76.5 242.7 63l38.6-27.8c2.8-2 6-3 9.4-3 3.4 0 6.6 1.1 9.4 3.1L338.7 63l18.7 13.5L376 63l40-28.8v443.6zM344 144H104c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h240c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8z"/></svg>';case"story":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M288 52v24a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6V52a6 6 0 0 1 6-6h276a6 6 0 0 1 6 6zM6 210h436a6 6 0 0 0 6-6v-24a6 6 0 0 0-6-6H6a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6zm0 256h436a6 6 0 0 0 6-6v-24a6 6 0 0 0-6-6H6a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6zm276-164H6a6 6 0 0 0-6 6v24a6 6 0 0 0 6 6h276a6 6 0 0 0 6-6v-24a6 6 0 0 0-6-6z"/></svg>';case"plus-square":return'<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 448 512"  xml:space="preserve"><path fill="#FFFFFF" d="M400,64c8.8,0,16,7.2,16,16v352c0,8.8-7.2,16-16,16H48c-8.8,0-16-7.2-16-16V80c0-8.8,7.2-16,16-16H400"/><path d="M400,64c8.8,0,16,7.2,16,16v352c0,8.8-7.2,16-16,16H48c-8.8,0-16-7.2-16-16V80c0-8.8,7.2-16,16-16H400 M400,32H48 C21.5,32,0,53.5,0,80v352c0,26.5,21.5,48,48,48h352c26.5,0,48-21.5,48-48V80C448,53.5,426.5,32,400,32z M340,238h-98v-98 c0-6.6-5.4-12-12-12h-12c-6.6,0-12,5.4-12,12v98h-98c-6.6,0-12,5.4-12,12v12c0,6.6,5.4,12,12,12h98v98c0,6.6,5.4,12,12,12h12 c6.6,0,12-5.4,12-12v-98h98c6.6,0,12-5.4,12-12v-12C352,243.4,346.6,238,340,238z"/></svg>';case"text-flow":return'<svg   xmlns="http://www.w3.org/2000/svg"   x="0px" y="0px" viewBox="0 0 448 512" xml:space="preserve"><path d="M48,32h352c26.5,0,48,21.5,48,48v352c0,26.5-21.5,48-48,48H48c-26.5,0-48-21.5-48-48V80C0,53.5,21.5,32,48,32z"/><path fill="#FFFFFF" d="M67.4,312.9h149.9v91.6c0,13.8,16.8,20.8,26.5,11L391.6,267c6.1-6.1,6.1-15.8,0-21.8L243.8,96.5c-9.8-9.8-26.5-2.8-26.5,11v91.6H67.4c-8.5,0-15.5,7-15.5,15.5v82.7C51.9,305.9,58.9,312.9,67.4,312.9z"/></svg>';case"exchange":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.485 184.485l-92.485 92c-4.687 4.686-12.284 4.686-16.97 0l-7.071-7.07c-4.687-4.686-4.687-12.284 0-16.971L452.893 192H12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h440.905l-60.946-60.444c-4.687-4.686-4.687-12.284 0-16.971l7.07-7.07c4.687-4.686 12.284-4.686 16.971 0l92.485 92c4.687 4.686 4.686 12.284 0 16.97zm-504.97 160l92.485 92c4.687 4.686 12.284 4.686 16.971 0l7.07-7.07c4.687-4.686 4.687-12.284 0-16.971L59.095 352H500c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12H59.107l60.934-60.444c4.687-4.686 4.687-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.687-16.97 0l-92.485 92c-4.686 4.686-4.687 12.284 0 16.97z"></path></svg>';case"text-align-justify-justify":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439 48H7a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8zm0 384H7a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0-128H7a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0-128H7a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"></path></svg>';case"text-align-justify-left":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M439,48H7c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h432c4.4,0,8-3.6,8-8V56C447,51.6,443.4,48,439,48z M219,432H8 c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h211c4.4,0,8-3.6,8-8v-16C227,435.6,223.4,432,219,432z M439,304H7c-4.4,0-8,3.6-8,8v16 c0,4.4,3.6,8,8,8h432c4.4,0,8-3.6,8-8v-16C447,307.6,443.4,304,439,304z M439,176H7c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h432 c4.4,0,8-3.6,8-8v-16C447,179.6,443.4,176,439,176z"></path></svg>';case"text-align-justify-right":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439,48H7c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h432c4.4,0,8-3.6,8-8V56C447,51.6,443.4,48,439,48z M439,432H228 c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h211c4.4,0,8-3.6,8-8v-16C447,435.6,443.4,432,439,432z M439,304H7c-4.4,0-8,3.6-8,8v16 c0,4.4,3.6,8,8,8h432c4.4,0,8-3.6,8-8v-16C447,307.6,443.4,304,439,304z M439,176H7c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h432 c4.4,0,8-3.6,8-8v-16C447,179.6,443.4,176,439,176z"></path></svg>';case"text-align-justify-center":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439,48H7c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h432c4.4,0,8-3.6,8-8V56C447,51.6,443.4,48,439,48z M329,432H118 c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h211c4.4,0,8-3.6,8-8v-16C337,435.6,333.4,432,329,432z M439,304H7c-4.4,0-8,3.6-8,8v16 c0,4.4,3.6,8,8,8h432c4.4,0,8-3.6,8-8v-16C447,307.6,443.4,304,439,304z M439,176H7c-4.4,0-8,3.6-8,8v16c0,4.4,3.6,8,8,8h432 c4.4,0,8-3.6,8-8v-16C447,179.6,443.4,176,439,176z"></path></svg>';case"text-align-left":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M280 48H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h272a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8zm160 384H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zM280 304H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h272a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm160-128H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"></path></svg>';case"text-align-right":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M440 48H168a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h272a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8zm0 384H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0-128H168a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h272a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0-128H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"></path></svg>';case"text-align-center":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M344 48H104a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h240a8 8 0 0 0 8-8V56a8 8 0 0 0-8-8zm96 384H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm-96-128H104a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h240a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm96-128H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h432a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"></path></svg>';case"check":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M413.505 91.951L133.49 371.966l-98.995-98.995c-4.686-4.686-12.284-4.686-16.971 0L6.211 284.284c-4.686 4.686-4.686 12.284 0 16.971l118.794 118.794c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-11.314-11.314c-4.686-4.686-12.284-4.686-16.97 0z"></path></svg>';case"check-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg>';case"plus":return'<svg   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path  d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"></path></svg>';case"arrow-left":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M231.536 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273H436c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H60.113L238.607 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L3.515 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path></svg>';case"mirror-x":return'<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 500"><g><path d="M152.255,386.968H20A20,20,0,0,1,2.59,357.125L134.845,123.189a20,20,0,0,1,37.41,9.843V366.968A20,20,0,0,1,152.255,386.968Zm-97.973-40h77.973V209.047Z"/><path d="M480,386.968H347.745a20,20,0,0,1-20-20V133.032a20,20,0,0,1,37.41-9.843L497.41,357.125A20,20,0,0,1,480,386.968Zm-112.255-40h77.973L367.745,209.047Z" /><path d="M250,496.028a20,20,0,0,1-20-20V23.972a20,20,0,1,1,40,0V476.028A20,20,0,0,1,250,496.028Z" /></g></svg>';case"arrow-up":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path   d="M4.465 263.536l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L207 92.113V468c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V92.113l178.494 178.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.05c-4.686-4.686-12.284-4.686-16.971 0L4.465 246.566c-4.687 4.686-4.687 12.284 0 16.97z"></path></svg>';case"arrow-down":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M443.5 248.5l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L241 419.9V44c0-6.6-5.4-12-12-12h-10c-6.6 0-12 5.4-12 12v375.9L28.5 241.4c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.8 4.8-12.3.1-17z"></path></svg>';case"arrow-right":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M216.464 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L387.887 239H12c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h375.887L209.393 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L233.434 36.465c-4.686-4.687-12.284-4.687-16.97 0z"></path></svg>';case"mirror-y":return'<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 500"><g><path d="M133.031,500a20,20,0,0,1-20-20V347.745a20,20,0,0,1,20-20H366.967a20,20,0,0,1,9.843,37.41L142.874,497.41A19.977,19.977,0,0,1,133.031,500Zm20-132.255v77.973l137.921-77.973Z" /><path d="M367.468,172.255H133.532a20,20,0,0,1-20-20V20A20,20,0,0,1,143.375,2.59L377.311,134.845a20,20,0,0,1-9.843,37.41Zm-213.936-40H291.453L153.532,54.282Z" /><path d="M476.528,270.5H24.472a20,20,0,0,1,0-40H476.528a20,20,0,0,1,0,40Z" /></g></svg>';case"arrows-h":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M399.959 170.585c-4.686 4.686-4.686 12.284 0 16.971L451.887 239H60.113l51.928-51.444c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0l-84.485 84c-4.686 4.686-4.686 12.284 0 16.971l84.485 84c4.686 4.686 12.284 4.686 16.97 0l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L60.113 273h391.773l-51.928 51.444c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l84.485-84c4.687-4.686 4.687-12.284 0-16.971l-84.485-84c-4.686-4.686-12.284-4.686-16.97 0l-7.07 7.071z"></path></svg>';case"arrows-v":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path  d="M181.415 399.959c-4.686-4.686-12.284-4.686-16.971 0L113 451.887V60.113l51.444 51.928c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-84-84.485c-4.686-4.686-12.284-4.686-16.971 0L3.515 88c-4.686 4.686-4.686 12.284 0 16.97l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L79 60.113v391.773l-51.444-51.928c-4.686-4.686-12.284-4.686-16.971 0l-7.07 7.071c-4.686 4.686-4.686 12.284 0 16.97l84 84.485c4.686 4.687 12.284 4.687 16.971 0l84-84.485c4.686-4.686 4.686-12.284 0-16.97l-7.071-7.07z"></path></svg>';case"arrows":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path   d="M337.782 434.704l-73.297 73.782c-4.686 4.686-12.284 4.686-16.971 0l-73.296-73.782c-4.686-4.686-4.686-12.284 0-16.97l7.07-7.07c4.686-4.686 12.284-4.686 16.971 0L239 451.887h1V272H60.113v1l41.224 40.741c4.686 4.686 4.686 12.284 0 16.971l-7.071 7.07c-4.686 4.686-12.284 4.686-16.97 0L3.515 264.485c-4.686-4.686-4.686-12.284 0-16.971l73.782-73.297c4.686-4.686 12.284-4.686 16.971 0l7.071 7.071c4.686 4.686 4.686 12.284 0 16.971L60.113 239v1H240V60.113h-1l-40.741 41.224c-4.686 4.686-12.284 4.686-16.971 0l-7.07-7.071c-4.686-4.686-4.687-12.284 0-16.97l73.297-73.782c4.686-4.686 12.284-4.686 16.971 0l73.297 73.782c4.686 4.686 4.686 12.284 0 16.971l-7.071 7.071c-4.686 4.686-12.284 4.686-16.971 0L273 60.113h-1V240h179.887v-1l-41.224-40.741c-4.686-4.686-4.686-12.284 0-16.971l7.071-7.07c4.686-4.686 12.284-4.686 16.97 0l73.782 73.297c4.687 4.686 4.686 12.284 0 16.971l-73.782 73.297c-4.686 4.686-12.284 4.686-16.97 0l-7.071-7.07c-4.686-4.686-4.686-12.284 0-16.971L451.887 273v-1H272v179.887h1l40.741-41.224c4.686-4.686 12.284-4.686 16.971 0l7.07 7.071c4.686 4.685 4.686 12.283 0 16.97z"></path></svg>';case"arrows-circle":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.54 139.54"><path d="M139.54,69.77A69.77,69.77,0,1,1,69.77,0,69.77,69.77,0,0,1,139.54,69.77ZM87.46,41.53,69.78,9.2,52.1,41.53ZM99.23,88l32.32-17.68L99.23,52.6ZM40.47,52.6,8.15,70.27,40.47,88ZM53,99.65,70.68,132,88.36,99.65Z"/></svg>';case"text-size":return'<svg   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M624 32H272a16 16 0 0 0-16 16v72a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8V64h144v384h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h176a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8h-72V64h144v56a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8V48a16 16 0 0 0-16-16zM304 224H16a16 16 0 0 0-16 16v56a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8v-40h112v192H88a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h144a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8h-56V256h112v40a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8v-56a16 16 0 0 0-16-16z"></path></svg>';case"text-width":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M362.31 292.69a16.12 16.12 0 0 0-11.48-4.69c-8 0-15.83 5.69-15.83 16v64H111v-64a16 16 0 0 0-16.12-16 15.63 15.63 0 0 0-11.19 4.71l-80 80a16 16 0 0 0 0 22.63l80 80A16.16 16.16 0 0 0 95.17 480c8 0 15.83-5.69 15.83-16v-64h224v64a16 16 0 0 0 16.13 16 15.64 15.64 0 0 0 11.18-4.7l80-80a16 16 0 0 0 0-22.63zM79 368v57.37L37.63 384 79 342.64zm288 57.36v-82.73L408.37 384zM431 32H15A16 16 0 0 0-1 48v72a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8V64h176v192h-40a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h112a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8h-40V64h176v56a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8V48a16 16 0 0 0-16-16z"></path></svg>';case"line-width":return'<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 640 512" ><path d="M506.63,354h-368c-4.42,0-8,3.58-8,8v16c0,4.42,3.58,8,8,8h368c4.42,0,8-3.58,8-8v-16C514.63,357.58,511.04,354,506.63,354z M506.63,442h-368c-4.42,0-8,3.58-8,8v16c0,4.42,3.58,8,8,8h368c4.42,0,8-3.58,8-8v-16C514.63,445.58,511.04,442,506.63,442z M506.63,266h-368c-4.42,0-8,3.58-8,8v16c0,4.42,3.58,8,8,8h368c4.42,0,8-3.58,8-8v-16C514.63,269.58,511.04,266,506.63,266z"/><path d="M208,32.01c0-14.31-17.31-21.33-27.31-11.31l-80,80c-6.25,6.25-6.25,16.38,0,22.63c0,0,0,0,0,0l80,80 c9.31,9.32,27.31,4.32,27.31-11.32v-64h224v64c0,14.29,17.31,21.31,27.31,11.29l80-80c6.25-6.25,6.25-16.38,0-22.63c0,0,0,0,0,0 l-80-80C450,11.36,432,16.36,432,32.01v64H208V32.01z"/>\t<polygon points="464,70.63 505.37,112.01 464,153.36 \t"/>\t<polygon points="176,128.01 176,153.38 134.63,112.01 176,70.65 \t"/></svg>';case"line-height":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path   d="M175 144c14.31 0 21.33-17.31 11.31-27.31l-80-80a16 16 0 0 0-22.63 0l-80 80C-5.64 126-.64 144 15 144h64v224H15C.71 368-6.31 385.31 3.71 395.31l80 80a16 16 0 0 0 22.63 0l80-80C195.65 386 190.65 368 175 368h-64V144zm-38.62 256L95 441.37 53.65 400h82.73zM79 112H53.63L95 70.63 136.36 112H79zm552 128H263a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h368a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0 128H263a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h368a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0-256H263a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h368a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"></path></svg>';case"palette":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M112 264c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm32-112c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM256 0c-16.9 0-34.2 1.6-51.7 5C104.9 24.4 24.8 104.3 5.2 203.4-29.4 378.5 116.4 512 239.5 512c8.3 0 16.5-.6 24.6-1.9 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.6 113.9 397.1 0 256 0zm191.1 288h-79.7c-35.3 0-67.4 17.9-85.7 47.8-18.2 29.7-19.6 66-3.7 97.2 4.9 9.6 4.8 21.6-.1 31.3-2.4 4.6-7.9 12.6-18.7 14.3-6.3 1-12.9 1.5-19.7 1.5-54.6 0-114.1-31.3-155.5-81.6-44-53.6-60.9-120.6-47.4-188.7 17.1-86.6 87-156.2 173.9-173.2 15.2-3 30.5-4.5 45.5-4.5 123.1 0 223.6 99.9 224 222.6 0 18.3-14.8 33.3-32.9 33.3zM368 136c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM240 88c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24z"></path></svg>';case"brush":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M352 0H32C14.33 0 0 14.33 0 32v288c0 35.35 28.66 64 64 64h64v64c0 35.35 28.66 64 64 64s64-28.65 64-64v-64h64c35.34 0 64-28.65 64-64V32c0-17.67-14.33-32-32-32zm0 320c0 17.64-14.36 32-32 32h-96v96c0 17.64-14.36 32-32 32s-32-14.36-32-32v-96H64c-17.64 0-32-14.36-32-32v-32h320v32zm0-64H32V32h320v224z"></path></svg>';case"undo":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M20 8h10c6.627 0 12 5.373 12 12v110.625C85.196 57.047 165.239 7.715 256.793 8.001 393.18 8.428 504.213 120.009 504 256.396 503.786 393.181 392.834 504 256 504c-63.926 0-122.202-24.187-166.178-63.908-5.113-4.618-5.354-12.561-.482-17.433l7.069-7.069c4.503-4.503 11.749-4.714 16.482-.454C150.782 449.238 200.935 470 256 470c117.744 0 214-95.331 214-214 0-117.744-95.331-214-214-214-82.862 0-154.737 47.077-190.289 116H180c6.627 0 12 5.373 12 12v10c0 6.627-5.373 12-12 12H20c-6.627 0-12-5.373-12-12V20c0-6.627 5.373-12 12-12z"></path></svg>';case"redo":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M492 8h-10c-6.627 0-12 5.373-12 12v110.625C426.804 57.047 346.761 7.715 255.207 8.001 118.82 8.428 7.787 120.009 8 256.396 8.214 393.181 119.166 504 256 504c63.926 0 122.202-24.187 166.178-63.908 5.113-4.618 5.354-12.561.482-17.433l-7.069-7.069c-4.503-4.503-11.749-4.714-16.482-.454C361.218 449.238 311.065 470 256 470c-117.744 0-214-95.331-214-214 0-117.744 95.331-214 214-214 82.862 0 154.737 47.077 190.289 116H332c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h160c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12z"></path></svg>';case"copy":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM352 32.491a15.88 15.88 0 0 1 7.431 4.195l51.882 51.883A15.885 15.885 0 0 1 415.508 96H352V32.491zM288 464c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V144c0-8.822 7.178-16 16-16h80v240c0 26.51 21.49 48 48 48h112v48zm128-96c0 8.822-7.178 16-16 16H176c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v240z"></path></svg>';case"cut":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M249.52 256L446.83 58.83a3.996 3.996 0 0 0 0-5.65c-12.5-12.5-32.76-12.5-45.25 0L224.06 230.56l-48.64-48.61C185.88 166.57 192 148 192 128c0-53.02-42.98-96-96-96S0 74.98 0 128s42.98 96 96 96c20.01 0 38.58-6.12 53.96-16.6l48.63 48.6-48.63 48.6C134.58 294.12 116.01 288 96 288c-53.02 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96c0-20-6.12-38.57-16.58-53.95l48.64-48.61 177.52 177.38c12.5 12.5 32.76 12.5 45.25 0a3.996 3.996 0 0 0 0-5.65L249.52 256zM96 192c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64zm0 256c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64z"></path></svg>';case"paste":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M433.941 193.941l-51.882-51.882A48 48 0 0 0 348.118 128H320V80c0-26.51-21.49-48-48-48h-66.752C198.643 13.377 180.858 0 160 0s-38.643 13.377-45.248 32H48C21.49 32 0 53.49 0 80v288c0 26.51 21.49 48 48 48h80v48c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48V227.882a48 48 0 0 0-14.059-33.941zm-22.627 22.627a15.888 15.888 0 0 1 4.195 7.432H352v-63.509a15.88 15.88 0 0 1 7.431 4.195l51.883 51.882zM160 30c9.941 0 18 8.059 18 18s-8.059 18-18 18-18-8.059-18-18 8.059-18 18-18zM48 384c-8.822 0-16-7.178-16-16V80c0-8.822 7.178-16 16-16h66.752c6.605 18.623 24.389 32 45.248 32s38.643-13.377 45.248-32H272c8.822 0 16 7.178 16 16v48H176c-26.51 0-48 21.49-48 48v208H48zm352 96H176c-8.822 0-16-7.178-16-16V176c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v208c0 8.822-7.178 16-16 16z"></path></svg>';case"object-ungroup":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path  d="M564 224c6.627 0 12-5.373 12-12v-72c0-6.627-5.373-12-12-12h-72c-6.627 0-12 5.373-12 12v20h-96v-32h20c6.627 0 12-5.373 12-12V44c0-6.627-5.373-12-12-12h-72c-6.627 0-12 5.373-12 12v20H96V44c0-6.627-5.373-12-12-12H12C5.373 32 0 37.373 0 44v72c0 6.627 5.373 12 12 12h20v160H12c-6.627 0-12 5.373-12 12v72c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-20h96v32h-20c-6.627 0-12 5.373-12 12v72c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-20h224v20c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-72c0-6.627-5.373-12-12-12h-20V224h20zm-180 96v32h-32v-32h32zM352 64h32v32h-32V64zM32 64h32v32H32V64zm32 288H32v-32h32v32zm20-64H64V128h20c6.627 0 12-5.373 12-12V96h224v20c0 6.627 5.373 12 12 12h20v160h-20c-6.627 0-12 5.373-12 12v20H96v-20c0-6.627-5.373-12-12-12zm140 160h-32v-32h32v32zm256-52v20H256v-20c0-6.627-5.373-12-12-12h-20v-32h96v20c0 6.627 5.373 12 12 12h72c6.627 0 12-5.373 12-12v-72c0-6.627-5.373-12-12-12h-20v-96h96v20c0 6.627 5.373 12 12 12h20v160h-20c-6.627 0-12 5.373-12 12zm64 52h-32v-32h32v32zm-32-256v-32h32v32h-32z"></path></svg>';case"trash":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M296 432h16a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8h-16a8 8 0 0 0-8 8v272a8 8 0 0 0 8 8zm-160 0h16a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8h-16a8 8 0 0 0-8 8v272a8 8 0 0 0 8 8zM440 64H336l-33.6-44.8A48 48 0 0 0 264 0h-80a48 48 0 0 0-38.4 19.2L112 64H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h24v368a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V96h24a8 8 0 0 0 8-8V72a8 8 0 0 0-8-8zM171.2 38.4A16.1 16.1 0 0 1 184 32h80a16.1 16.1 0 0 1 12.8 6.4L296 64H152zM384 464a16 16 0 0 1-16 16H80a16 16 0 0 1-16-16V96h320zm-168-32h16a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8h-16a8 8 0 0 0-8 8v272a8 8 0 0 0 8 8z"></path></svg>';case"remove-format":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M192 64h176l-44.56 133.68 25.35 20L400 64h176v56a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8V48a16 16 0 0 0-16-16H176a16 16 0 0 0-16 16v21l32 25.19zm152 384h-72l44.55-133.64-25.35-20L240 448h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h176a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm293 37.31L23 1.8A7.86 7.86 0 0 0 11.79 3l-10 12.5A7.92 7.92 0 0 0 3 26.71l614 483.52a7.91 7.91 0 0 0 11.18-1.23l10-12.5a7.83 7.83 0 0 0-1.18-11.18z"></path></svg>';case"clipboard":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path  d="M336 64h-88.6c.4-2.6.6-5.3.6-8 0-30.9-25.1-56-56-56s-56 25.1-56 56c0 2.7.2 5.4.6 8H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 32c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm160 432c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h48v20c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12V96h48c8.8 0 16 7.2 16 16z"></path></svg>';case"undo-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></svg>';case"redo-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M500.33 0h-47.41a12 12 0 0 0-12 12.57l4 82.76A247.42 247.42 0 0 0 256 8C119.34 8 7.9 119.53 8 256.19 8.1 393.07 119.1 504 256 504a247.1 247.1 0 0 0 166.18-63.91 12 12 0 0 0 .48-17.43l-34-34a12 12 0 0 0-16.38-.55A176 176 0 1 1 402.1 157.8l-101.53-4.87a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12h200.33a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12z"></path></svg>';case"copy-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"></path></svg>';case"trash-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"></path></svg>';case"search-plus":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"></path></svg>';case"search-minus":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"></path></svg>';case"search-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"></path></svg>';case"save":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"></path></svg>';case"save-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M350.1 55.44C334.9 40.33 314.9 32 293.5 32H80C35.88 32 0 67.89 0 112v288C0 444.1 35.88 480 80 480h288c44.13 0 80-35.89 80-80V186.5c0-21.38-8.312-41.47-23.44-56.58L350.1 55.44zM96 64h192v96H96V64zM416 400c0 26.47-21.53 48-48 48h-288C53.53 448 32 426.5 32 400v-288c0-20.83 13.42-38.43 32-45.05V160c0 17.67 14.33 32 32 32h192c17.67 0 32-14.33 32-32V72.02c2.664 1.758 5.166 3.771 7.438 6.043l74.5 74.5C411 161.6 416 173.7 416 186.5V400zM224 240c-44.13 0-80 35.89-80 80s35.88 80 80 80s80-35.89 80-80S268.1 240 224 240zM224 368c-26.47 0-48-21.53-48-48S197.5 272 224 272s48 21.53 48 48S250.5 368 224 368z"/></svg>';case"cloud-upload-alt":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"></path></svg>';case"folder-open-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path  d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg>';case"tint":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path  d="M205.22 22.09C201.21 7.53 188.61 0 175.97 0c-12.35 0-24.74 7.2-29.19 22.09C100.01 179.85 0 222.72 0 333.91 0 432.35 78.72 512 176 512s176-79.65 176-178.09c0-111.75-99.79-153.34-146.78-311.82zM176 480c-79.4 0-144-65.54-144-146.09 0-48.36 23-81.32 54.84-126.94 29.18-41.81 65.34-93.63 89.18-170.91 23.83 77.52 60.06 129.31 89.3 171.08C297.06 252.52 320 285.3 320 333.91 320 414.46 255.4 480 176 480zm0-64c-44.12 0-80-35.89-80-80 0-8.84-7.16-16-16-16s-16 7.16-16 16c0 61.75 50.25 112 112 112 8.84 0 16-7.16 16-16s-7.16-16-16-16z"></path></svg>';case"warp-arc":return'<svg   xmlns="http://www.w3.org/2000/svg"  \t viewBox="0 0 500 500">\t<path  d="M499.63,193.5c0.11-0.55,0.19-1.09,0.25-1.64c0.07-0.6,0.11-1.18,0.12-1.78c0-0.54-0.03-1.07-0.07-1.6\t\tc-0.05-0.59-0.11-1.17-0.22-1.74c-0.1-0.55-0.24-1.08-0.39-1.62c-0.16-0.55-0.32-1.09-0.53-1.62c-0.2-0.52-0.44-1.03-0.7-1.54\t\tc-0.27-0.52-0.55-1.03-0.86-1.53c-0.29-0.45-0.6-0.88-0.94-1.31c-0.4-0.51-0.82-1-1.27-1.47c-0.18-0.19-0.31-0.4-0.5-0.58\t\tC477.8,161.3,387.48,82.52,250.17,81.35c-123.44-0.96-206.3,59.51-244.62,95.7l0.05,0.05c-5.33,5.02-7.22,13-4.05,20.05\t\tl95.09,211.08c2.95,6.54,9.38,10.41,16.11,10.41c1.91,0,3.82-0.41,5.69-1.06c0.5-0.14,0.99-0.3,1.48-0.48\t\tc0.02-0.01,0.05-0.01,0.07-0.02c0.02-0.01,0.03-0.02,0.05-0.03c1.85-0.71,3.63-1.67,5.22-3.03\t\tc18.75-16.07,59.09-42.87,119.53-42.87c0.52,0,1.06,0,1.59,0.01c68.59,0.54,113.14,35.8,121.38,42.87\t\tc3.33,2.86,7.42,4.25,11.49,4.25c4.97,0,9.92-2.09,13.41-6.16c0.1-0.11,0.16-0.24,0.25-0.36c1.33-1.34,2.52-2.86,3.4-4.65\t\tl101.98-209.48c0.12-0.25,0.17-0.51,0.28-0.76c0.25-0.57,0.46-1.14,0.64-1.73C499.36,194.59,499.51,194.05,499.63,193.5z\t\t M427.08,263.19c-20.18-12.43-77.33-42.87-159.73-47.76l-0.21-98.02c98.24,6.05,167.02,54.67,193.5,76.84L427.08,263.19z\t\t M373.06,374.17c-20.68-13.58-57.18-32.34-105.43-37.1l-0.19-86.22c78.64,5.12,130.51,35.41,144.1,44.27L373.06,374.17z\t\t M119.86,373.82L84,294.23c25.41-16.52,75.22-41.27,148.11-43.9l0.19,85.87C181.86,338.86,144.12,357.24,119.86,373.82z\t\t M232.04,215.02c-77.69,2.57-132.59,28.04-162.68,46.69L39.03,194.4c35.34-30.74,100.27-73.02,192.79-77.29L232.04,215.02z"/></svg>';case"warp-flag":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 427.46"><path d="M433,52.28C294.33-147,155.67,301.81,17,105.6,8.16,93.17,1,87.15,1,96q-.49,118.6-1,237.2c0,8.8,7.16,29.31,16,41.95,138.67,199.31,277.33-249.53,416-53.32,8.84,12.43,16,18.45,16,9.57q.5-118.6,1-237.2C449,85.44,441.84,64.92,433,52.28ZM33,157.45c58.67,62.83,117.33,19.1,176-33.25q-.5,44.45-1,88.89c-58.67,52.25-117.33,95.32-176,31.28Q32.49,200.92,33,157.45ZM32,363.37v-87c58.67,64,117.33,21,176-31.28v87C149.33,384.34,90.67,427.41,32,363.37ZM416,270c-58.67-62.83-117.33-19.1-176,33.25v-87c58.67-52.35,117.33-96.08,176-33.25Zm0-119c-58.67-62.83-117.33-19.1-176,33.25q.5-44.44,1-88.89C299.67,43.12,358.33.05,417,64.09Q416.51,107.55,416,151Z"/></svg>';case"warp-bulge":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 546.15"><path d="M438.38,118.66C341.05-39.17,109.3-39.55,11.32,117.53,5.06,127.76.63,143.83.63,152.5Q.31,273.61,0,392.57c0,8.59,4.4,24.63,10.62,34.91C108,585.32,339.7,585.7,437.68,428.62c6.25-10.23,10.68-26.3,10.69-35q.31-121.11.63-240.08C449,145,444.6,128.94,438.38,118.66ZM23.21,141C68.84,94.1,136.58,68.78,206.1,65q-.58,88.5-1.18,176.93c-69.5.61-137.1,4.43-182.49,11.49Q22.82,197.52,23.21,141ZM22.43,404.4V294c45.39,7.51,113,11.58,182.49,12.23V481.09C135.42,477.05,67.82,451.49,22.43,404.4Zm403.36.8c-45.63,46.84-113.37,72.16-182.89,76V306.25c69.52-.61,137.26-4.64,182.89-12.11Zm0-151.91c-45.63-7-113.37-10.81-182.89-11.38q.58-88.46,1.18-176.85c69.5,4,137.1,29.6,182.49,76.69Q426.18,197.18,425.79,253.29Z"/></svg>';case"warp-arc-lower":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 408.57"><path d="M433,0H17A16.17,16.17,0,0,0,1,16.07Q.32,136.07,0,255c.05,8.7,4.44,24.75,10.62,34.91C108,447.75,339.7,448.13,437.68,291.05c6.22-10.12,10.64-26.15,10.67-34.9Q448.52,135.54,449,16A16.11,16.11,0,0,0,433,0ZM31.84,36.42A1533.22,1533.22,0,0,0,208.66,48.17q-1,66.22-2,132.42c-63.47-2.34-126.09-17.16-178.88-44.46Q29.77,86.45,31.84,36.42Zm-8.28,234.7q1.53-49.34,3.07-98.69c51.22,34.58,114.9,53.35,179.64,56.32l-1,130.92C137.06,355,70.51,325.5,23.56,271.12Zm401.08.93c-47.18,54.09-113.84,83.32-182.09,87.7l-.93-130.95C306.38,226,370.13,207.42,421.49,173Zm-4.3-135.46c-52.9,27.16-115.58,41.84-179.06,44q.08-66.25.08-132.47A1533.93,1533.93,0,0,0,418.13,36.3Q419.19,86.28,420.34,136.59Z"/></svg>';case"warp-arc-upper":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 408.57"><path d="M438.38,118.66C341.05-39.17,109.3-39.55,11.32,117.53,5.1,127.64.68,143.68.65,152.42Q.49,273,0,392.57a16.1,16.1,0,0,0,16,16H432a16.16,16.16,0,0,0,16-16.07q.66-120,1-238.93C449,144.87,444.56,128.83,438.38,118.66Zm-414,17.87C71.54,82.44,138.2,53.2,206.45,48.82q-.12,66.27-.17,132.51c-64.7,2.95-128.35,21.6-179.61,55.95Q25.55,187.08,24.36,136.53Zm6.51,235.74q-1.53-49.35-3.07-98.69c52.83-27.07,115.42-41.77,178.85-44.09l1,130.93A1531.72,1531.72,0,0,0,30.87,372.27Zm386.29-.12a1533.24,1533.24,0,0,0-176.82-11.74l.93-131c63.44,2.18,126.09,16.74,179,43.67Q418.73,322.64,417.16,372.15Zm4.3-135.46c-51.41-34.17-115.13-52.64-179.85-55.41q1-66.19,2.11-132.38c68.22,4.66,134.77,34.18,181.72,88.55Q423.49,186.9,421.46,236.69Z"/></svg>';case"warp-pit-upper":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 261.48"><path d="M437,6.82c-107.81,136.38-316,136.71-424.26,1C5.88-.94.76-1.44.74,7.48Q.48,126,0,245.48a15.84,15.84,0,0,0,16,16H432a15.83,15.83,0,0,0,16-15.93q.62-119.07,1-239.07C449-2.47,443.87-2,437,6.82ZM26.55,51c50.09,46.73,114.73,72,180.54,75.77q-.21,24.76-.37,49.55C143.54,173.81,81.16,157.7,28,128Q27.32,89.38,26.55,51ZM31.16,233.2q-1.15-38.44-2.3-76.9C83.18,179.69,144.77,192.39,207,194.4q.38,24.53.74,49C148.11,242.9,88.65,239.49,31.16,233.2Zm385.7.11c-57.51,6.25-117,9.64-176.6,10.14l.69-49c62.23-1.88,123.87-14.46,178.26-37.73Q418,195,416.86,233.31Zm3.21-104.79C366.83,158.05,304.39,174,241.2,176.4q.9-24.81,1.83-49.65c65.8-4,130.35-29.53,180.27-76.51Q421.71,89.53,420.07,128.52Z"/></svg>';case"warp-pit-lower":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 261.48"><path d="M433,0H17A15.84,15.84,0,0,0,1,15.94Q.37,135,0,255c0,8.95,5.13,8.44,12-.34,107.81-136.37,316-136.7,424.26-1,6.88,8.74,12,9.24,12,.33q.25-118.55.74-238A15.84,15.84,0,0,0,433,0ZM32.14,28.18c57.52-6.26,117-9.64,176.6-10.15q-.86,24.8-1.76,49.62c-62.25,2-123.87,14.83-178.14,38.42Q30.46,67,32.14,28.18ZM25.7,211.25q1.14-38.46,2.29-76.9c53.11-29.88,115.52-46.1,178.72-48.66q-.37,24.53-.74,49.05C140.17,138.76,75.62,164.27,25.7,211.25Zm396.75-.8c-50.09-46.74-114.73-72-180.54-75.78q-.34-24.51-.7-49c63.22,2.4,125.68,18.47,178.89,48.19Q421.27,172.15,422.45,210.45Zm-3.21-104.79c-54.36-23.46-116-36.14-178.28-38q.18-24.78.31-49.58c59.62.54,119.08,3.95,176.57,10.24Q418.52,67.13,419.24,105.66Z"/></svg>';case"warp-fish":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 427.46"><path d="M433,104.18C294.33,303.49,155.67-145.35,17,50.86,8.16,63.62,1,84.09,1,92.64Q.51,214.52,0,333.23c0,8.44,7.16,29,16,41.95,138.67,199.31,277.33-249.53,416-53.32,8.84,12.76,16,18.9,16,9.78q.5-117.12,1-237.41C449,85,441.84,91.22,433,104.18Zm-400-30c58.67-48,117.33-14.59,176,25.4q-.5,48.19-1,97c-58.67-6-117.33-10.9-176-3.58Q32.49,133.91,33,74.16ZM32,352.48V235.85c58.67,7.8,117.33,2.55,176-3.81v96.54C149.33,368.49,90.67,401.39,32,352.48Zm384-71.32c-58.67-48-117.33-14.59-176,25.4v-78c58.67-6.37,117.33-11.7,176-4.05Zm0-77.53c-58.67,7.19-117.33,2.19-176-3.8q.5-39.42,1-78.25c58.67,39.91,117.33,72.81,176,23.9Q416.51,174.91,416,203.63Z"/></svg>';case"warp-squeeze":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 254.41"><path d="M435.46,4.49c-119.78,106.69-301,106.94-421,.76C6.75-1.66.83-.52.83,8.43Q.41,126.84,0,246.7c0,9,5.9,10.17,13.54,3.22,119.78-106.69,301-106.94,421.05-.77,7.66,6.92,13.58,5.78,13.58-3.17q.42-118.41.83-238.28C449-1.3,443.1-2.46,435.46,4.49ZM28.53,43.05C81.24,74.72,144.05,91.83,207.68,94.4q-.54,13.92-1.09,27.88c-63.62-.4-126.36-3-179-7.76Q28.08,78.55,28.53,43.05Zm-.9,168.85V140.71c52.6-5.08,115.34-7.83,179-8.27v27.62C143,162.79,80.23,180.07,27.63,211.9Zm392.84-.54C367.76,179.69,305,162.58,241.32,160V132.43c63.63.41,126.44,3.14,179.15,8.19Zm0-96.76c-52.71,4.74-115.52,7.31-179.15,7.69q.54-14,1.09-27.94c63.62-2.73,126.36-20,179-51.84Q420.92,78.78,420.47,114.6Z"/></svg>';case"settings":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352zM200 160h-40v-32c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v32H88c-13.2 0-24 10.8-24 24v48c0 13.2 10.8 24 24 24h40v116c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V256h40c13.2 0 24-10.8 24-24v-48c0-13.2-10.8-24-24-24zm-8 64H96v-32h96v32zm168 32h-40V128c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v128h-40c-13.2 0-24 10.8-24 24v48c0 13.2 10.8 24 24 24h40v20c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12v-20h40c13.2 0 24-10.8 24-24v-48c0-13.2-10.8-24-24-24zm-8 64h-96v-32h96v32z"></path></svg>';case"slash":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M637 485.3L23 1.8C19.6-1 14.5-.5 11.8 3l-10 12.5C-1 19-.4 24 3 26.7l614 483.5c3.5 2.8 8.5 2.2 11.2-1.2l10-12.5c2.8-3.5 2.3-8.5-1.2-11.2z"></path></svg>';case"empty":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"></svg>';case"warp-mug":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path  d="M480 64H64a32 32 0 0 0-32 32v256a96 96 0 0 0 96 96h192a96 96 0 0 0 96-96v-96h64a96 96 0 0 0 0-192zm-96 288a64.07 64.07 0 0 1-64 64H128a64.07 64.07 0 0 1-64-64V96h320zm96-128h-64V96h64a64 64 0 0 1 0 128z"></path></svg>';case"close-square":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352zm-97.2-245.3L249.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L224 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z"></path></svg>';case"close":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path  d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"></path></svg>';case"square":return'<svg   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm16 400c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352c8.8 0 16 7.2 16 16v352z"></path></svg>';case"mesh":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 198.725 198.725"  ><path d="M194.828,0H3.897C1.745,0,0,1.745,0,3.897v190.931c0,2.154,1.745,3.897,3.897,3.897h190.931\n  c2.152,0,3.897-1.743,3.897-3.897V3.897C198.724,1.745,196.979,0,194.828,0z M135.336,7.793 c-1.794,7.887-5.085,24.174-6.073,41.085c-5.646-1.308-11.613-2.843-17.707-4.412c-16.791-4.322-34.076-8.731-48.241-9.287\n  c3.851-12.645,8.947-23.169,11.117-27.386H135.336z M140.168,115.415c-8.484,1.236-14.626,4.939-20.562,8.586 c-8.348,5.126-16.984,10.43-33.881,10.43c-2.384,0-4.852-0.069-7.364-0.185c-2.669-15.64-8.165-33.341-16.343-52.032\n  c-5.081-11.614-3.973-26.095-0.807-39.32c13.572,0.173,31.259,4.706,48.402,9.118c6.676,1.719,13.188,3.386,19.369,4.787 c-0.104,10.231,0.852,20.238,3.727,28.288C136.221,94.92,138.646,105.339,140.168,115.415z M7.793,7.793h57.904\n  c-2.904,5.97-7.32,15.966-10.605,27.516C35.965,37.001,17.199,47.237,7.793,53.121V7.793z M7.793,62.433 c5.587-3.795,25.301-16.304,45.27-19.007c-3.023,13.934-3.764,29.158,1.815,41.912c7.629,17.44,12.812,33.863,15.476,48.384\n  c-26.972-2.26-56.834-9.239-62.561-10.618C7.793,123.104,7.793,62.433,7.793,62.433z M72.105,161.319 c-1.425,14.256-6.164,25.315-8.246,29.612H7.793v-59.814c9.096,2.155,37.708,8.563,63.77,10.525\n  C72.441,148.805,72.691,155.46,72.105,161.319z M72.436,190.931c2.574-5.996,6.162-16.211,7.425-28.836\tc0.6-6.013,0.396-12.767-0.413-19.996c2.131,0.081,4.228,0.125,6.277,0.125c19.101,0,29.119-6.153,37.961-11.583\n  c5.622-3.453,10.651-6.485,17.484-7.505c1.621,15.093,1.182,28.805-0.8,37.726c-2.739,12.323-0.178,23.604,1.981,30.069H72.436z M190.93,190.932h-40.296v-0.001c-1.803-4.587-5.412-15.983-2.659-28.379c2.102-9.457,2.599-23.901,0.949-39.754\n  c17.307,0.457,35.295,4.937,42.006,6.781V190.932z M190.93,121.497c-8.373-2.215-25.866-6.237-42.98-6.513 c-1.577-10.817-4.146-22.005-7.901-32.519c-2.405-6.734-3.285-15.201-3.281-24.043c6.291,1.197,12.11,1.975,17.145,1.975\n  c16.583,0,30.355-0.984,37.017-1.562V121.497z M190.931,51.013c-6.188,0.551-20.108,1.591-37.017,1.591\tc-4.817,0-10.594-0.821-16.929-2.074c0.958-18.006,4.769-35.902,6.36-42.737h47.586V51.013z"/></svg>\n  ';case"crop":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M160 16c0-8.84-7.16-16-16-16h-32c-8.84 0-16 7.16-16 16v80H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h80v224c0 17.67 14.33 32 32 32h192v-64H160V16zm336 336h-80V128c0-17.67-14.33-32-32-32H192v64h160v336c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-80h80c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16z"></path></svg>';case"place-image":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\x3c!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M0 48C0 21.49 21.49 0 48 0H144C152.8 0 160 7.164 160 16C160 24.84 152.8 32 144 32H48C39.16 32 32 39.16 32 48V144C32 152.8 24.84 160 16 160C7.164 160 0 152.8 0 144V48zM320 256C320 291.3 291.3 320 256 320C220.7 320 192 291.3 192 256C192 220.7 220.7 192 256 192C291.3 192 320 220.7 320 256zM256 224C238.3 224 224 238.3 224 256C224 273.7 238.3 288 256 288C273.7 288 288 273.7 288 256C288 238.3 273.7 224 256 224zM325.8 111.6L332 128H360C390.9 128 416 153.1 416 184V328C416 358.9 390.9 384 360 384H152C121.1 384 96 358.9 96 328V184C96 153.1 121.1 128 152 128H180L186.2 111.6C189.7 102.2 198.6 96 208.6 96H303.4C313.4 96 322.3 102.2 325.8 111.6zM152 160C138.7 160 128 170.7 128 184V328C128 341.3 138.7 352 152 352H360C373.3 352 384 341.3 384 328V184C384 170.7 373.3 160 360 160H309.8L297.8 128H214.2L202.2 160H152zM464 0C490.5 0 512 21.49 512 48V144C512 152.8 504.8 160 496 160C487.2 160 480 152.8 480 144V48C480 39.16 472.8 32 464 32H368C359.2 32 352 24.84 352 16C352 7.164 359.2 0 368 0H464zM0 368C0 359.2 7.164 352 16 352C24.84 352 32 359.2 32 368V464C32 472.8 39.16 480 48 480H144C152.8 480 160 487.2 160 496C160 504.8 152.8 512 144 512H48C21.49 512 0 490.5 0 464V368zM368 512C359.2 512 352 504.8 352 496C352 487.2 359.2 480 368 480H464C472.8 480 480 472.8 480 464V368C480 359.2 487.2 352 496 352C504.8 352 512 359.2 512 368V464C512 490.5 490.5 512 464 512H368z"/></svg>';case"fill-image":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.24 512.49"><g id="Layer_1" data-name="Layer 1"><path d="M31.89,479.23V228.68a15.95,15.95,0,1,0-31.89,0V495.17a16,16,0,0,0,15.94,15.95L297,512a15.95,15.95,0,0,0,0-31.89l-242.56-.88Z" transform="translate(0 0.49)"/><path d="M494.29,298.74a16,16,0,0,0,15.95-15.95v-266A16,16,0,0,0,494.29.88L229.18,0a15.95,15.95,0,0,0,0,31.89l226.64.88h22.53v250A16,16,0,0,0,494.29,298.74Z" transform="translate(0 0.49)"/><path d="M0,15.46V124.91a15.95,15.95,0,0,0,31.89,0v-71L186,208.06a15.94,15.94,0,1,0,22.54-22.54L54.45,31.4h71a15.95,15.95,0,0,0,0-31.89H16A16,16,0,0,0,0,15.46Z" transform="translate(0 0.49)"/><path d="M301.69,326,455.82,479.09h-71a15.95,15.95,0,0,0,0,31.89H494.29A16,16,0,0,0,510.24,495V385.59a15.95,15.95,0,0,0-31.89,0v71L324.21,303.41A15.93,15.93,0,1,0,301.69,326Z" transform="translate(0 0.49)"/></g></svg>';case"fit-image":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.24 511.47"><g id="Layer_1" data-name="Layer 1"><path d="M31.89,479.23V122.07a15.95,15.95,0,1,0-31.89,0v373.1a16,16,0,0,0,15.94,15.95l379.71.35a15.95,15.95,0,0,0,0-31.89l-341.21-.35Z"/><path d="M494.29,404.86a16,16,0,0,0,15.95-15.94V16.83A16,16,0,0,0,494.29.88L122.57,0a15.95,15.95,0,1,0,0,31.89l333.25.88h22.53V388.92A16,16,0,0,0,494.29,404.86Z"/><path d="M297,314.2V423.65a15.95,15.95,0,0,0,31.89,0v-71L483,506.8a15.94,15.94,0,0,0,22.54-22.54L351.45,330.14H422.4a15.95,15.95,0,0,0,0-31.89H313A16,16,0,0,0,297,314.2Z"/><path d="M4.7,27.22,158.83,180.36h-71a15.95,15.95,0,1,0,0,31.89H197.3a16,16,0,0,0,15.94-15.95V86.85a15.95,15.95,0,0,0-31.89,0v71L27.22,4.67A15.93,15.93,0,1,0,4.7,27.22Z"/></g></svg>';case"vertical-align-bottom-baseline":return'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" \n                 x="0px" y="0px" viewBox="0 0 512 512"   >\n             <path d="M177.9,463.9l-3.1-26.3h-1.3c-12,16.4-35.2,31-65.9,31c-43.7,0-65.9-29.7-65.9-59.9c0-50.4,46.3-78,129.6-77.5v-4.3\n                    c0-17.2-4.9-48.2-49-48.2c-20,0-41,6-56.1,15.5l-8.9-25C75,258,100.8,250.7,128,250.7c65.9,0,82,43.5,82,85.3v78\n                    c0,18.1,0.9,35.8,3.6,50H177.9z M172.1,357.5c-42.8-0.9-91.3,6.5-91.3,47c0,24.6,16.9,36.2,37,36.2c28.1,0,45.9-17.2,52.1-34.9\n                    c1.3-3.9,2.2-8.2,2.2-12.1V357.5z"/>\n                    <path d="M459,255.4c-0.9,15.1-1.8,31.9-1.8,57.3v121c0,47.8-9.8,77.1-30.7,95.2c-20.9,19-51.2,25-78.4,25c-25.8,0-54.3-6-71.7-17.2\n                    l9.8-28.9c14.3,8.6,36.5,16.4,63.3,16.4c40.1,0,69.5-20.2,69.5-72.8v-23.3H418c-12,19.4-35.2,34.9-68.6,34.9\n                    c-53.5,0-91.8-43.9-91.8-101.7c0-70.6,47.7-110.7,97.1-110.7c37.4,0,57.9,19,67.3,36.2h0.9l1.8-31.4H459z M418.4,337.7\n                    c0-6.5-0.4-12.1-2.2-17.2c-7.1-22-26.3-40.1-54.8-40.1c-37.4,0-64.1,30.6-64.1,78.8c0,40.9,21.4,75,63.7,75\n                    c24.1,0,45.9-14.6,54.3-38.8c2.2-6.5,3.1-13.8,3.1-20.2V337.7z"/>\n            <rect x="33" y="481.6" width="209.8" height="28.8"/>\n            </svg>';case"vertical-align-bottom":return'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" c\n                 c viewBox="0 0 512 512">\n                 <path d="M177.9,423.3l-3.1-26.3h-1.3c-12,16.4-35.2,31-65.9,31c-43.7,0-65.9-29.7-65.9-59.9c0-50.4,46.3-78,129.6-77.5v-4.3\n                     c0-17.2-4.9-48.2-49-48.2c-20,0-41,6-56.1,15.5l-8.9-25c17.8-11.2,43.7-18.5,70.8-18.5c65.9,0,82,43.5,82,85.3v78\n                     c0,18.1,0.9,35.8,3.6,50H177.9z M172.1,316.9c-42.8-0.9-91.3,6.5-91.3,47c0,24.6,16.9,36.2,37,36.2c28.1,0,45.9-17.2,52.1-34.9\n                     c1.3-3.9,2.2-8.2,2.2-12.1V316.9z"/>\n                 <path d="M459,214.9c-0.9,15.1-1.8,31.9-1.8,57.3v121c0,47.8-9.8,77.1-30.7,95.2c-20.9,19-51.2,25-78.4,25c-25.8,0-54.3-6-71.7-17.2\n                     l9.8-28.9c14.3,8.6,36.5,16.4,63.3,16.4c40.1,0,69.5-20.2,69.5-72.8v-23.3H418c-12,19.4-35.2,34.9-68.6,34.9\n                     c-53.5,0-91.8-43.9-91.8-101.7c0-70.6,47.7-110.7,97.1-110.7c37.4,0,57.9,19,67.3,36.2h0.9l1.8-31.4H459z M418.4,297.1\n                     c0-6.5-0.4-12.1-2.2-17.2c-7.1-22-26.3-40.1-54.8-40.1c-37.4,0-64.1,30.6-64.1,78.8c0,40.9,21.4,75,63.7,75\n                     c24.1,0,45.9-14.6,54.3-38.8c2.2-6.5,3.1-13.8,3.1-20.2V297.1z"/>\n             </svg>';case"vertical-align-center":return'<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  \n                 viewBox="0 0 512 512"  >\n               <path d="M183.9,317.1l-3.1-26.3h-1.3c-12,16.4-35.2,31-65.9,31c-43.7,0-65.9-29.7-65.9-59.9c0-50.4,46.3-78,129.6-77.5v-4.3\n                   c0-17.2-4.9-48.2-49-48.2c-20,0-41,6-56.1,15.5l-8.9-25c17.8-11.2,43.7-18.5,70.8-18.5c65.9,0,82,43.5,82,85.3v78\n                   c0,18.1,0.9,35.8,3.6,50H183.9z M178.1,210.7c-42.8-0.9-91.3,6.5-91.3,47c0,24.6,16.9,36.2,37,36.2c28.1,0,45.9-17.2,52.1-34.9\n                   c1.3-3.9,2.2-8.2,2.2-12.1V210.7z"/>\n               <path d="M465,108.7c-0.9,15.1-1.8,31.9-1.8,57.3v121c0,47.8-9.8,77.1-30.7,95.2c-20.9,19-51.2,25-78.4,25c-25.8,0-54.3-6-71.7-17.2\n                   l9.8-28.9c14.3,8.6,36.5,16.4,63.3,16.4c40.1,0,69.5-20.2,69.5-72.8v-23.3H424c-12,19.4-35.2,34.9-68.6,34.9\n                   c-53.5,0-91.8-43.9-91.8-101.7c0-70.6,47.7-110.7,97.1-110.7c37.4,0,57.9,19,67.3,36.2h0.9l1.8-31.4H465z M424.4,190.9\n                   c0-6.5-0.4-12.1-2.2-17.2c-7.1-22-26.3-40.1-54.8-40.1c-37.4,0-64.1,30.6-64.1,78.8c0,40.9,21.4,75,63.7,75\n                   c24.1,0,45.9-14.6,54.3-38.8c2.2-6.5,3.1-13.8,3.1-20.2V190.9z"/>\n           </svg>';case"vertical-align-center-baseline":return'<svg version="1.1" xmlns="http://www.w3.org/2000/svg" \n                 viewBox="0 0 512 512" >\n             \n                <path d="M173.9,284.1l-3.1-26.3h-1.3c-12,16.4-35.2,31-65.9,31c-43.7,0-65.9-29.7-65.9-59.9c0-50.4,46.3-78,129.6-77.5v-4.3\n                    c0-17.2-4.9-48.2-49-48.2c-20,0-41,6-56.1,15.5l-8.9-25C71,78.2,96.8,70.9,124,70.9c65.9,0,82,43.5,82,85.3v78\n                    c0,18.1,0.9,35.8,3.6,50H173.9z M168.1,177.7c-42.8-0.9-91.3,6.5-91.3,47c0,24.6,16.9,36.2,37,36.2c28.1,0,45.9-17.2,52.1-34.9\n                    c1.3-3.9,2.2-8.2,2.2-12.1V177.7z"/>\n                <path d="M455,75.7c-0.9,15.1-1.8,31.9-1.8,57.3v121c0,47.8-9.8,77.1-30.7,95.2c-20.9,19-51.2,25-78.4,25c-25.8,0-54.3-6-71.7-17.2\n                    l9.8-28.9c14.3,8.6,36.5,16.4,63.3,16.4c40.1,0,69.5-20.2,69.5-72.8v-23.3H414c-12,19.4-35.2,34.9-68.6,34.9\n                    c-53.5,0-91.8-43.9-91.8-101.7c0-70.6,47.7-110.7,97.1-110.7c37.4,0,57.9,19,67.3,36.2h0.9l1.8-31.4H455z M414.4,157.9\n                    c0-6.5-0.4-12.1-2.2-17.2c-7.1-22-26.3-40.1-54.8-40.1c-37.4,0-64.1,30.6-64.1,78.8c0,40.9,21.4,75,63.7,75\n                    c24.1,0,45.9-14.6,54.3-38.8c2.2-6.5,3.1-13.8,3.1-20.2V157.9z"/>\n             \n            <rect x="35.5" y="295.3" width="209.8" height="28.8"/>\n            </svg>\n            ';case"vertical-align-top":return'<svg version="1.1"   xmlns="http://www.w3.org/2000/svg" \n                 viewBox="0 0 512 512"  ><path d="M177.5,216.5l-3.1-26.3H173c-12,16.4-35.2,31-65.9,31c-43.7,0-65.9-29.7-65.9-59.9c0-50.4,46.3-78,129.6-77.5v-4.3\n                       c0-17.2-4.9-48.2-49-48.2c-20,0-41,6-56.1,15.5l-8.9-25c17.8-11.2,43.7-18.5,70.8-18.5c65.9,0,82,43.5,82,85.3v78\n                       c0,18.1,0.9,35.8,3.6,50H177.5z M171.7,110.1c-42.8-0.9-91.3,6.5-91.3,47c0,24.6,16.9,36.2,37,36.2c28.1,0,45.9-17.2,52.1-34.9\n                       c1.3-3.9,2.2-8.2,2.2-12.1V110.1z"/>\n                   <path d="M458.6,8c-0.9,15.1-1.8,31.9-1.8,57.3v121c0,47.8-9.8,77.1-30.7,95.2c-20.9,19-51.2,25-78.4,25c-25.8,0-54.3-6-71.7-17.2\n                       l9.8-28.9c14.3,8.6,36.5,16.4,63.3,16.4c40.1,0,69.5-20.2,69.5-72.8v-23.3h-0.9c-12,19.4-35.2,34.9-68.6,34.9\n                       c-53.5,0-91.8-43.9-91.8-101.7c0-70.6,47.7-110.7,97.1-110.7c37.4,0,57.9,19,67.3,36.2h0.9L424.3,8H458.6z M418,90.2\n                       c0-6.5-0.4-12.1-2.2-17.2C408.7,51,389.5,33,361,33c-37.4,0-64.1,30.6-64.1,78.8c0,40.9,21.4,75,63.7,75\n                       c24.1,0,45.9-14.6,54.3-38.8c2.2-6.5,3.1-13.8,3.1-20.2V90.2z"/>\n                \n               </svg>\n               ';case"warning":return'<svg   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path  d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path></svg>';case"effects":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm0-96c8.84 0 16 7.16 16 16s-7.16 16-16 16-16-7.16-16-16 7.16-16 16-16zm352 224l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm0 96c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm70.63-306.04L434.04 9.37C427.79 3.12 419.6 0 411.41 0s-16.38 3.12-22.63 9.37L9.37 388.79c-12.5 12.5-12.5 32.76 0 45.25l68.59 68.59c6.25 6.25 14.44 9.37 22.63 9.37s16.38-3.12 22.63-9.37l379.41-379.41c12.49-12.5 12.49-32.76 0-45.26zM100.59 480L32 411.41l258.38-258.4 68.6 68.6L100.59 480zm281.02-281.02l-68.6-68.6L411.38 32h.03L480 100.59l-98.39 98.39z"></path></svg>';case"robot":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M192,416h64V384H192ZM576,224H544V192a95.99975,95.99975,0,0,0-96-96H336V16a16,16,0,0,0-32,0V96H192a95.99975,95.99975,0,0,0-96,96v32H64a31.99908,31.99908,0,0,0-32,32V384a32.00033,32.00033,0,0,0,32,32H96a95.99975,95.99975,0,0,0,96,96H448a95.99975,95.99975,0,0,0,96-96h32a32.00033,32.00033,0,0,0,32-32V256A31.99908,31.99908,0,0,0,576,224ZM96,384H64V256H96Zm416,32a64.18916,64.18916,0,0,1-64,64H192a64.18916,64.18916,0,0,1-64-64V192a63.99942,63.99942,0,0,1,64-64H448a63.99942,63.99942,0,0,1,64,64Zm64-32H544V256h32ZM416,192a64,64,0,1,0,64,64A64.07333,64.07333,0,0,0,416,192Zm0,96a32,32,0,1,1,32-32A31.97162,31.97162,0,0,1,416,288ZM384,416h64V384H384Zm-96,0h64V384H288ZM224,192a64,64,0,1,0,64,64A64.07333,64.07333,0,0,0,224,192Zm0,96a32,32,0,1,1,32-32A31.97162,31.97162,0,0,1,224,288Z"></path></svg>';case"microchip":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M368 0H144c-26.51 0-48 21.49-48 48v416c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zm16 464c0 8.822-7.178 16-16 16H144c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h224c8.822 0 16 7.178 16 16v416zm128-358v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42V88h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zm0 96v12a6 6 0 0 1-6 6h-18v6a6 6 0 0 1-6 6h-42v-48h42a6 6 0 0 1 6 6v6h18a6 6 0 0 1 6 6zM30 376h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6zm0-96h42v48H30a6 6 0 0 1-6-6v-6H6a6 6 0 0 1-6-6v-12a6 6 0 0 1 6-6h18v-6a6 6 0 0 1 6-6z"></path></svg>';case"record":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path   d="M160 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S64 42.98 64 96v160c0 53.02 42.98 96 96 96zM96 96c0-35.29 28.71-64 64-64s64 28.71 64 64v160c0 35.29-28.71 64-64 64s-64-28.71-64-64V96zm216 96h-16c-4.42 0-8 3.58-8 8v56c0 73.46-62.2 132.68-136.73 127.71C83.3 379.18 32 319.61 32 251.49V200c0-4.42-3.58-8-8-8H8c-4.42 0-8 3.58-8 8v50.34c0 83.39 61.65 156.12 144 164.43V480H72c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h176c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8h-72v-65.01C256.71 406.9 320 338.8 320 256v-56c0-4.42-3.58-8-8-8z"></path></svg>';case"play":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6zm-16.2 55.1l-352 208C45.6 483.9 32 476.6 32 464V47.9c0-16.3 16.4-18.4 24.1-13.8l352 208.1c10.5 6.2 10.5 21.4.1 27.6z"></path></svg>';case"running":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M396 216h-14.53l-9.04-27.12c-8.11-24.31-24.18-44-44.5-58.04C347 117.91 360 96.73 360 72c0-39.7-32.3-72-72-72s-72 32.3-72 72c0 8.34 1.56 16.28 4.2 23.72-8.62-1.98-17.37-3.22-26.13-3.22-20.55 0-40.8 5.53-58.64 16l-46.19 24.07C64.7 147.31 56.7 179.3 71.4 203.88c9.39 15.62 26.48 25.27 44.63 25.27 8.98 0 17.82-2.33 25.65-6.76l18.95-9.85L101.75 344H52c-28.67 0-52 23.33-52 52s23.33 52 52 52h62.91c33.65 0 63.95-19.99 77.2-50.92l19.32-39.74 43.7 19.63-19.64 68.74c-7.87 27.58 8.15 56.42 35.71 64.29 4.8 1.34 9.55 2 14.31 2 23.07 0 43.62-15.5 49.98-37.69l24.4-85.4c7.11-24.86 2.02-50.92-12.01-71.12 6.2 1.45 12.63 2.21 19.2 2.21H396c28.67 0 52-23.33 52-52s-23.33-52-52-52zM288 32c22.09 0 40 17.91 40 40s-17.91 40-40 40-40-17.91-40-40 17.91-40 40-40zM162.69 384.48A51.915 51.915 0 0 1 114.91 416H52c-11.05 0-20-8.95-20-20s8.95-20 20-20h62.91c4.8 0 9.12-2.86 11.03-7.28l26.72-56.88c6.9 12.72 17.07 23.57 29.98 31.43l-19.95 41.21zM396 288h-28.94a51.94 51.94 0 0 1-49.33-35.55l-13.59-40.8c-2.83-8.46-8.21-15.43-15-20.67l-41.47 103.69 52.78 23.72c23.41 10.55 35.72 37.09 28.67 61.73l-24.39 85.38c-2.52 8.78-10.52 14.5-19.22 14.5-1.83 0-3.67-.25-5.52-.77-10.61-3.03-16.77-14.11-13.73-24.73l24.39-85.38c1.64-5.69-1.22-11.81-6.62-14.25 0 0-85.82-39.04-88.71-41.16-17.8-13.09-25.42-36.48-18.51-57.88l37.75-87.57s-16.9-3.77-20.5-3.77c-7.88 0-15.59 2.14-22.5 6.31l-45.25 23.52a20.137 20.137 0 0 1-10.29 2.84c-6.8 0-13.41-3.46-17.16-9.7-5.67-9.48-2.61-21.77 6.86-27.45l45.26-23.52c13.24-7.93 28.06-11.99 43.1-11.99 6.83 0 13.72.84 20.51 2.53l68.19 17.05c28 6.98 50.17 27.52 59.31 54.92l13.59 40.8c1.64 4.91 6.22 8.2 11.39 8.2H396c11.05 0 20 8.95 20 20s-8.95 20-20 20z"></path></svg>';case"rotator":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></svg>';case"lock-closed":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M224 420c-11 0-20-9-20-20v-64c0-11 9-20 20-20s20 9 20 20v64c0 11-9 20-20 20zm224-148v192c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48h16v-64C64 71.6 136-.3 224.5 0 312.9.3 384 73.1 384 161.5V224h16c26.5 0 48 21.5 48 48zM96 224h256v-64c0-70.6-57.4-128-128-128S96 89.4 96 160v64zm320 240V272c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v192c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16z"></path></svg>';case"lock-open":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M480.5 0C392-.3 320 71.6 320 160v64H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48h-48v-62.6c0-70.7 56.7-129 127.3-129.4C550.2 31.6 608 89.2 608 160v84c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12v-82.5C640 73.1 568.9.3 480.5 0zM400 256c8.8 0 16 7.2 16 16v192c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16h352z"></path></svg>';case"user-lock-closed":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M48 480a16 16 0 0 1-16-16v-41.6A102.47 102.47 0 0 1 134.4 320c19.6 0 39.1 16 89.6 16s70-16 89.6-16c2.7 0 5.3.6 7.9.8a79.45 79.45 0 0 1 13.1-30.7 132.34 132.34 0 0 0-21.1-2.1c-28.7 0-42.5 16-89.6 16s-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464a48 48 0 0 0 48 48h288.4a78.34 78.34 0 0 1-14.8-32zm176-224A128 128 0 1 0 96 128a128 128 0 0 0 128 128zm0-224a96 96 0 1 1-96 96 96.15 96.15 0 0 1 96-96zm272 336a32 32 0 1 0 32 32 32 32 0 0 0-32-32zm96-80h-16v-48a80 80 0 0 0-160 0v48h-16a48 48 0 0 0-48 48v128a48 48 0 0 0 48 48h192a48 48 0 0 0 48-48V336a48 48 0 0 0-48-48zm-144-48a48 48 0 0 1 96 0v48h-96zm160 224a16 16 0 0 1-16 16H400a16 16 0 0 1-16-16V336a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"></path></svg>';case"user-crown-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M352 0l-64 32-64-32-64 32L96 0v96h256V0zm-38.4 304h-16.71c-22.24 10.18-46.88 16-72.89 16s-50.65-5.82-72.89-16H134.4C60.17 304 0 364.17 0 438.4V464c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48v-25.6c0-74.23-60.17-134.4-134.4-134.4zM224 272c70.69 0 128-57.31 128-128v-16H96v16c0 70.69 57.31 128 128 128z"></path></svg>';case"user-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"></path></svg>';case"user-lock-opened":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M592,288H448V208.79c0-26.32,20.86-48.34,47.18-48.78A48,48,0,0,1,544,208v8a8,8,0,0,0,8,8h16a8,8,0,0,0,8-8v-7c0-43.28-34-79.51-77.26-80.95A80,80,0,0,0,416,208v80H400a48,48,0,0,0-48,48V464a48,48,0,0,0,48,48H592a48,48,0,0,0,48-48V336A48,48,0,0,0,592,288Zm16,176a16,16,0,0,1-16,16H400a16,16,0,0,1-16-16V336a16,16,0,0,1,16-16H592a16,16,0,0,1,16,16ZM224,256A128,128,0,1,0,96,128,128,128,0,0,0,224,256Zm0-224a96,96,0,1,1-96,96A96,96,0,0,1,224,32ZM496,368a32,32,0,1,0,32,32A32,32,0,0,0,496,368ZM48,480a16,16,0,0,1-16-16V422.4A102.47,102.47,0,0,1,134.4,320c19.6,0,39.1,16,89.6,16s70-16,89.6-16c2.7,0,5.3.6,7.9.8a79.38,79.38,0,0,1,13.1-30.7,132.22,132.22,0,0,0-21.1-2.1c-28.7,0-42.5,16-89.6,16s-60.8-16-89.6-16C60.2,288,0,348.2,0,422.4V464a48,48,0,0,0,48,48H336.4a78.37,78.37,0,0,1-14.8-32Z"></path></svg>';case"link":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M301.148 394.702l-79.2 79.19c-50.778 50.799-133.037 50.824-183.84 0-50.799-50.778-50.824-133.037 0-183.84l79.19-79.2a132.833 132.833 0 0 1 3.532-3.403c7.55-7.005 19.795-2.004 20.208 8.286.193 4.807.598 9.607 1.216 14.384.481 3.717-.746 7.447-3.397 10.096-16.48 16.469-75.142 75.128-75.3 75.286-36.738 36.759-36.731 96.188 0 132.94 36.759 36.738 96.188 36.731 132.94 0l79.2-79.2.36-.36c36.301-36.672 36.14-96.07-.37-132.58-8.214-8.214-17.577-14.58-27.585-19.109-4.566-2.066-7.426-6.667-7.134-11.67a62.197 62.197 0 0 1 2.826-15.259c2.103-6.601 9.531-9.961 15.919-7.28 15.073 6.324 29.187 15.62 41.435 27.868 50.688 50.689 50.679 133.17 0 183.851zm-90.296-93.554c12.248 12.248 26.362 21.544 41.435 27.868 6.388 2.68 13.816-.68 15.919-7.28a62.197 62.197 0 0 0 2.826-15.259c.292-5.003-2.569-9.604-7.134-11.67-10.008-4.528-19.371-10.894-27.585-19.109-36.51-36.51-36.671-95.908-.37-132.58l.36-.36 79.2-79.2c36.752-36.731 96.181-36.738 132.94 0 36.731 36.752 36.738 96.181 0 132.94-.157.157-58.819 58.817-75.3 75.286-2.651 2.65-3.878 6.379-3.397 10.096a163.156 163.156 0 0 1 1.216 14.384c.413 10.291 12.659 15.291 20.208 8.286a131.324 131.324 0 0 0 3.532-3.403l79.19-79.2c50.824-50.803 50.799-133.062 0-183.84-50.802-50.824-133.062-50.799-183.84 0l-79.2 79.19c-50.679 50.682-50.688 133.163 0 183.851z"></path></svg>';case"stroke-cap-round":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M64,29.58V0H32C14.33,0,0,14.33,0,32v0c0,17.67,14.33,32,32,32h32V34.51H39.27v4.87H24.59V24.7h14.68v4.88H64z"/></svg>';case"stroke-cap-projecting":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" >\t<polygon  points="64,29.58 64,0 0,0 0,64 64,64 64,34.51 39.27,34.51 39.27,39.38 24.59,39.38 24.59,24.7 39.27,24.7 39.27,29.58 \t"/></svg>';case"stroke-cap-butt":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="39.27,29.54 63.92,29.54 64,29.54 64,0 31.96,0 31.96,21.66 21.51,21.66 21.51,42.34 31.96,42.34 31.96,64 64,64 64,34.47 63.92,34.47 39.27,34.47 39.19,34.47 39.19,39.34 31.96,39.34 24.51,39.34 24.51,24.66 31.96,24.66 39.19,24.66 39.19,29.54 \t"/></svg>';case"stroke-align-center":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="0,64 64,64 64,45.54 30.34,45.54 30.34,50.41 15.66,50.41 15.66,35.73 20.54,35.73 20.54,0 0,0 "/><polygon  points="30.34,35.73 30.34,40.61 64,40.61 64,23.23 42.77,23.23 42.77,0 25.47,0 25.47,35.73 "/></svg>';case"stroke-align-inside":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="17.54,32.73 15.66,32.73 12.66,32.73 12.66,53.41 33.34,53.41 33.34,48.54 64,48.54 64,45.54 30.34,45.54 30.34,50.41 15.66,50.41 15.66,35.73 20.54,35.73 20.54,0 17.54,0 \t"/><polygon points="30.34,35.73 30.34,40.61 64,40.61 64,16.23 48.77,16.23 48.77,0 25.47,0 25.47,35.73 \t"/></svg>';case"stroke-align-outside":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" >\t<polygon points="0,64 64,64 64,45.54 30.34,45.54 30.34,50.41 15.66,50.41 15.66,35.73 20.54,35.73 20.54,0 0,0 "/>\t<polygon points="64,37.61 33.34,37.61 33.34,35.73 33.34,32.73 30.34,32.73 28.47,32.73 28.47,0 25.47,0 25.47,35.73 30.34,35.73 30.34,40.61 64,40.61"/></svg>';case"stroke-join-miter":return'<svg   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve"><polygon  points="0,0 0,64 29.46,64 29.46,39.34 24.59,39.34 24.59,39.34 24.59,24.66 39.27,24.66 39.27,24.66 39.27,29.54 64,29.54 64,0 "/><polygon points="39.27,39.34 39.27,39.34 39.27,39.34 34.39,39.34 34.39,64 48.77,64 48.77,48.77 64,48.77 64,34.47 39.27,34.47"/></svg>';case"stroke-join-round":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" ><path  d="M0,36.75V64h29.46V39.34h-4.87v0V24.66h14.68h0v4.88H64V0H36.75C17.56,0,0,17.56,0,36.75z"/><polygon points="39.27,39.34 39.27,39.34 39.27,39.34 34.39,39.34 34.39,64 48.77,64 48.77,48.77 64,48.77 64,34.47 39.27,34.47 "/>';case"stroke-join-bevel":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon class="st0" points="0,32 0,64 29.46,64 29.46,39.34 24.59,39.34 24.59,39.34 24.59,24.66 39.27,24.66 39.27,24.66 39.27,29.54 64,29.54 64,0 32,0 "/><polygon class="st0" points="39.27,39.34 39.27,39.34 39.27,39.34 34.39,39.34 34.39,64 48.77,64 48.77,48.77 64,48.77 64,34.47 39.27,34.47 "/></svg>';case"ruler":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M635.7 165.8L556.1 27.9C550.2 17.7 539.5 12 528.5 12c-5.4 0-10.9 1.4-15.9 4.3L15.9 302.8C.7 311.5-4.5 331 4.3 346.2L83.9 484c5.9 10.2 16.6 15.9 27.6 15.9 5.4 0 10.9-1.4 15.9-4.3L624 209.1c15.3-8.6 20.5-28.1 11.7-43.3zM111.5 468.2L31.9 330.3l69-39.8 43.8 75.8c2.2 3.8 7.1 5.1 10.9 2.9l13.8-8c3.8-2.2 5.1-7.1 2.9-10.9l-43.8-75.8 55.2-31.8 27.9 48.2c2.2 3.8 7.1 5.1 10.9 2.9l13.8-8c3.8-2.2 5.1-7.1 2.9-10.9l-27.9-48.2 55.2-31.8 43.8 75.8c2.2 3.8 7.1 5.1 10.9 2.9l13.8-8c3.8-2.2 5.1-7.1 2.9-10.9L294 179.1l55.2-31.8 27.9 48.2c2.2 3.8 7.1 5.1 10.9 2.9l13.8-8c3.8-2.2 5.1-7.1 2.9-10.9l-27.9-48.2L432 99.5l43.8 75.8c2.2 3.8 7.1 5.1 10.9 2.9l13.8-8c3.8-2.2 5.1-7.1 2.9-10.9l-43.8-75.8 69-39.8 79.6 137.8-496.7 286.7z"></path></svg>';case"no-wrap":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" >\t<rect y="57.5"  width="64" height="5"/>\t<rect x="18.32" y="34.5" class="st0" width="27.36" height="9"/>\t<rect x="18.32" y="48.5" class="st0" width="27.36" height="3.42"/>\t<rect x="47.68" y="43.5" class="st0" width="16.32" height="5"/>\t<rect y="43.5"  width="16.32" height="5"/>\t<rect x="18.32" y="20.5" class="st0" width="27.36" height="9"/>\t<rect x="47.68" y="29.5" class="st0" width="16.32" height="5"/>\t<rect y="29.5"  width="16.32" height="5"/>\t<rect x="18.32" y="12.15" class="st0" width="27.36" height="3.35"/>\t<rect y="15.5"  width="16.32" height="5"/><rect x="47.68" y="15.5"  width="16.32" height="5"/><rect y="1.5" width="64" height="5"/><rect x="12.32" y="11.15" width="39.36" height="41.77"/></svg>';case"wrap-both-sides":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <rect y="57.5" class="st0" width="64" height="5"/><path class="st0" d="M14.47,43.5H0v5h17.26C16.17,46.99,15.23,45.31,14.47,43.5z"/><path class="st0" d="M49.53,43.5c-0.76,1.81-1.7,3.49-2.79,5H64v-5H49.53z"/>\t<path class="st0" d="M12.21,32.08c0-0.87,0.04-1.73,0.11-2.58H0v5h12.31C12.24,33.7,12.21,32.89,12.21,32.08z"/><path class="st0" d="M51.68,29.5c0.07,0.85,0.11,1.71,0.11,2.58c0,0.82-0.03,1.63-0.1,2.42H64v-5H51.68z"/>\t<path class="st0" d="M17.36,15.5H0v5h14.53C15.31,18.69,16.26,17.01,17.36,15.5z"/>\t<path class="st0" d="M46.64,15.5c1.1,1.51,2.05,3.19,2.83,5H64v-5H46.64z"/><rect y="1.5" class="st0" width="64" height="5"/>\t<ellipse class="st0" cx="32" cy="32.07" rx="12.54" ry="15.18"/></svg>';case"printess-wand":return'<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64"><path d="M58.08,21.21l-7.11-7.55l2.19-10.13c0.16-0.74-0.12-1.52-0.71-1.99s-1.41-0.57-2.1-0.24l-9.38,4.42L32.01,0.5\t\tc-0.66-0.38-1.48-0.36-2.11,0.06c-0.63,0.42-0.98,1.17-0.88,1.92l1.31,10.29l-7.73,6.91c-0.57,0.51-0.8,1.29-0.59,2.03\t\tc0.2,0.73,0.81,1.29,1.55,1.43l7.4,1.4L5.41,55.96c-0.87,1.07-0.71,2.65,0.36,3.52c0.46,0.38,1.02,0.56,1.58,0.56\t\tc0.73,0,1.45-0.32,1.94-0.92l25.6-31.48l3.05,6.92c0.31,0.7,0.98,1.16,1.74,1.19c0.03,0,0.06,0,0.09,0c0.73,0,1.4-0.4,1.75-1.04\t\tl4.98-9.09l10.32-1.05c0.76-0.08,1.41-0.58,1.67-1.29C58.76,22.56,58.6,21.76,58.08,21.21z M45.06,21.74\t\tc-0.66,0.07-1.24,0.45-1.55,1.03l-3.54,6.46l-2.97-6.74c-0.27-0.6-0.81-1.04-1.46-1.16l-7.24-1.37l5.49-4.91\t\tc0.49-0.44,0.73-1.09,0.65-1.74L33.5,6l6.37,3.71c0.57,0.33,1.27,0.36,1.86,0.08l6.66-3.14l-1.56,7.2\t\tc-0.14,0.64,0.05,1.31,0.5,1.79L52.39,21L45.06,21.74z"/>\t<polygon   points="12.92,5.15 10.56,9.47 6.25,11.83 10.56,14.19 12.92,18.5 15.28,14.19 19.6,11.83 15.28,9.47 \t\t12.92,5.15 \t"/>\t<path  d="M49.4,40.73c1.38,0,2.77,1,2.77,2.63c0,1.81-1.7,2.63-2.63,2.63s-2.63-0.9-2.63-2.63\t\tc0-2.29,2.02-2.63,2.63-2.63 M49.54,34.48l-3.14,5.74l-5.74,3.14l5.74,3.14l3.14,5.74l3.14-5.74l5.74-3.14l-5.74-3.14L49.54,34.48\t\tL49.54,34.48z"/></svg>';case"shopping-cart":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M551.991 64H129.28l-8.329-44.423C118.822 8.226 108.911 0 97.362 0H12C5.373 0 0 5.373 0 12v8c0 6.627 5.373 12 12 12h78.72l69.927 372.946C150.305 416.314 144 431.42 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-17.993-7.435-34.24-19.388-45.868C506.022 391.891 496.76 384 485.328 384H189.28l-12-64h331.381c11.368 0 21.177-7.976 23.496-19.105l43.331-208C578.592 77.991 567.215 64 551.991 64zM240 448c0 17.645-14.355 32-32 32s-32-14.355-32-32 14.355-32 32-32 32 14.355 32 32zm224 32c-17.645 0-32-14.355-32-32s14.355-32 32-32 32 14.355 32 32-14.355 32-32 32zm38.156-192H171.28l-36-192h406.876l-40 192z"></path></svg>';case"shopping-cart-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"></path></svg>';case"shopping-cart-add":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M551.991 64H129.28l-8.329-44.423C118.822 8.226 108.911 0 97.362 0H12C5.373 0 0 5.373 0 12v8c0 6.627 5.373 12 12 12h78.72l69.927 372.946C150.305 416.314 144 431.42 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-17.993-7.435-34.24-19.388-45.868C506.022 391.891 496.76 384 485.328 384H189.28l-12-64h331.381c11.368 0 21.177-7.976 23.496-19.105l43.331-208C578.592 77.991 567.215 64 551.991 64zM240 448c0 17.645-14.355 32-32 32s-32-14.355-32-32 14.355-32 32-32 32 14.355 32 32zm224 32c-17.645 0-32-14.355-32-32s14.355-32 32-32 32 14.355 32 32-14.355 32-32 32zm38.156-192H171.28l-36-192h406.876l-40 192zm-106.641-75.515l-51.029 51.029c-4.686 4.686-12.284 4.686-16.971 0l-51.029-51.029c-7.56-7.56-2.206-20.485 8.485-20.485H320v-52c0-6.627 5.373-12 12-12h8c6.627 0 12 5.373 12 12v52h35.029c10.691 0 16.045 12.926 8.486 20.485z"></path></svg>';case"folder-plus":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464,128H272L217.37,73.37A32,32,0,0,0,194.74,64H48A48,48,0,0,0,0,112V400a48,48,0,0,0,48,48H464a48,48,0,0,0,48-48V176A48,48,0,0,0,464,128Zm16,272a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V112A16,16,0,0,1,48,96H194.74l54.63,54.63A32,32,0,0,0,272,160H464a16,16,0,0,1,16,16ZM339.5,272h-68V204a12,12,0,0,0-12-12h-8a12,12,0,0,0-12,12v68h-68a12,12,0,0,0-12,12v8a12,12,0,0,0,12,12h68v68a12,12,0,0,0,12,12h8a12,12,0,0,0,12-12V304h68a12,12,0,0,0,12-12v-8A12,12,0,0,0,339.5,272Z"></path></svg>';case"eye-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg>';case"eye-solid-slash":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path></svg>';case"lock-closed-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>';case"print-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z"></path></svg>';case"print-slash-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L522.2 384l21.8 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64l-234.8 0L192 125.2 192 64l226.7 0L448 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L464 18.7C452 6.7 435.7 0 418.7 0L192 0c-35.3 0-64 28.7-64 64l0 11L38.8 5.1zm459 483.1l-51-40.2L192 448l0-64 0-16 0-16 132.9 0L122.2 192.3C89.6 195.2 64 222.6 64 256l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c20.1 0 38.1-9.3 49.8-23.8zM496 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>';case"carret-down-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg>';case"carret-right-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path  d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>';case"carret-left-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>';case"font":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424 448h-36.6L247.13 42.77A16 16 0 0 0 232 32h-16a16 16 0 0 0-15.12 10.77L60.6 448H24a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h112a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8H94.48l44.3-128h170.44l44.31 128H312a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h112a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zM149.86 288L224 73.8 298.14 288z"></path></svg>';case"check-square":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path  d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 32c8.823 0 16 7.178 16 16v352c0 8.822-7.177 16-16 16H48c-8.822 0-16-7.178-16-16V80c0-8.822 7.178-16 16-16h352m-34.301 98.293l-8.451-8.52c-4.667-4.705-12.265-4.736-16.97-.068l-163.441 162.13-68.976-69.533c-4.667-4.705-12.265-4.736-16.97-.068l-8.52 8.451c-4.705 4.667-4.736 12.265-.068 16.97l85.878 86.572c4.667 4.705 12.265 4.736 16.97.068l180.48-179.032c4.704-4.667 4.735-12.265.068-16.97z"></path></svg>';case"user-circle":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm128 421.6c-35.9 26.5-80.1 42.4-128 42.4s-92.1-15.9-128-42.4V416c0-35.3 28.7-64 64-64 11.1 0 27.5 11.4 64 11.4 36.6 0 52.8-11.4 64-11.4 35.3 0 64 28.7 64 64v13.6zm30.6-27.5c-6.8-46.4-46.3-82.1-94.6-82.1-20.5 0-30.4 11.4-64 11.4S204.6 320 184 320c-48.3 0-87.8 35.7-94.6 82.1C53.9 363.6 32 312.4 32 256c0-119.1 96.9-216 216-216s216 96.9 216 216c0 56.4-21.9 107.6-57.4 146.1zM248 120c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 144c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z"></path></svg>';case"send-back":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M175 64H79a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm-16 96H95V96h64zm288-16v80h32v-80a48 48 0 0 0-48-48H287v32h144a16 16 0 0 1 16 16zm112 176h-96a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-96a16 16 0 0 0-16-16zm-16 96h-64v-64h64zm48-160H431a48 48 0 0 0-48 48v160a48 48 0 0 0 48 48h160a48 48 0 0 0 48-48V304a48 48 0 0 0-48-48zm16 208a16 16 0 0 1-16 16H431a16 16 0 0 1-16-16V304a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16zm-416-96v-80h-32v80a48 48 0 0 0 48 48h144v-32H207a16 16 0 0 1-16-16zm64-160V48a48 48 0 0 0-48-48H47A48 48 0 0 0-1 48v160a48 48 0 0 0 48 48h160a48 48 0 0 0 48-48zm-224 0V48a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v160a16 16 0 0 1-16 16H47a16 16 0 0 1-16-16z"></path></svg>';case"send-backward":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.24 512"><g id="Layer_4" data-name="Layer 4"><path d="M494,120.28H392V16A16,16,0,0,0,376,0H16.27a16,16,0,0,0-16,16v359.7a16,16,0,0,0,16,16h102V496a16,16,0,0,0,16,16H494a16,16,0,0,0,16-16V136.28A16,16,0,0,0,494,120.28ZM478,480H150.26V391.72H376a16,16,0,0,0,16-16V152.28h86Z"/></g></svg>';case"bring-front":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M32 208V48a16 16 0 0 1 16-16h160a16 16 0 0 1 16 16v16h32V48a48 48 0 0 0-48-48H48A48 48 0 0 0 0 48v160a48 48 0 0 0 48 48h80v-32H48a16 16 0 0 1-16-16zm448 160V144a48 48 0 0 0-48-48H208a48 48 0 0 0-48 48v224a48 48 0 0 0 48 48h224a48 48 0 0 0 48-48zm-288 0V144a16 16 0 0 1 16-16h224a16 16 0 0 1 16 16v224a16 16 0 0 1-16 16H208a16 16 0 0 1-16-16zm400-112h-80v32h80a16 16 0 0 1 16 16v160a16 16 0 0 1-16 16H432a16 16 0 0 1-16-16v-16h-32v16a48 48 0 0 0 48 48h160a48 48 0 0 0 48-48V304a48 48 0 0 0-48-48zM464 448h96a16 16 0 0 0 16-16v-96a16 16 0 0 0-16-16h-48v32h32v64h-48.41a79.76 79.76 0 0 1-41.25 28.43A15.66 15.66 0 0 0 464 448zM176 64H80a16 16 0 0 0-16 16v96a16 16 0 0 0 16 16h48v-32H96V96h48.41a79.76 79.76 0 0 1 41.25-28.43A15.66 15.66 0 0 0 176 64z"></path></svg>';case"bring-forward":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.24 512"><g id="Layer_4_copy" data-name="Layer 4 copy"><path d="M494,120.28H424V375.72a48.05,48.05,0,0,1-48,48H118.26V496a16,16,0,0,0,16,16H494a16,16,0,0,0,16-16V136.28A16,16,0,0,0,494,120.28Z"/><path d="M376,391.72H16.27a16,16,0,0,1-16-16V16a16,16,0,0,1,16-16H376a16,16,0,0,1,16,16v359.7A16,16,0,0,1,376,391.72Zm-343.7-32H360V32H32.27Z"/></g></svg>';case"distort":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path   d="M483.55,227.55H462c-50.68,0-76.07-61.27-40.23-97.11L437,115.19A28.44,28.44,0,0,0,396.8,75L381.56,90.22A55.74,55.74,0,0,1,341.74,107c-29.24,0-57.29-22.7-57.29-57V28.44a28.45,28.45,0,0,0-56.9,0V50c0,34.29-28.05,57-57.29,57a55.7,55.7,0,0,1-39.82-16.77L115.2,75A28.44,28.44,0,0,0,75,115.19l15.25,15.25c35.84,35.84,10.45,97.11-40.23,97.11H28.45a28.45,28.45,0,1,0,0,56.89H50c50.68,0,76.07,61.28,40.23,97.12L75,396.8A28.45,28.45,0,0,0,115.2,437l15.24-15.25A55.7,55.7,0,0,1,170.25,405c29.25,0,57.3,22.7,57.3,57v21.54a28.45,28.45,0,0,0,56.9,0V462c0-34.29,28.05-57,57.3-57a55.7,55.7,0,0,1,39.81,16.77L396.8,437A28.45,28.45,0,0,0,437,396.8l-15.25-15.24c-35.84-35.84-10.45-97.12,40.23-97.12h21.54a28.45,28.45,0,1,0,0-56.89ZM379.88,307.32c-10.64,25.71-8.94,53.3,3.84,76.44a86.92,86.92,0,0,0-42-10.75A89.42,89.42,0,0,0,256,437.11,89.42,89.42,0,0,0,170.25,373a86.92,86.92,0,0,0-42,10.75c12.78-23.14,14.48-50.73,3.84-76.44s-31.33-44-56.69-51.32c25.36-7.34,46.05-25.63,56.69-51.32s8.94-53.3-3.84-76.44a87,87,0,0,0,42,10.75A89.42,89.42,0,0,0,256,74.88,89.42,89.42,0,0,0,341.74,139a87,87,0,0,0,42-10.75c-12.78,23.14-14.48,50.73-3.84,76.44s31.33,44,56.69,51.32C411.21,263.33,390.52,281.63,379.88,307.32ZM224,176a48,48,0,1,0,48,48A48,48,0,0,0,224,176Zm0,64a16,16,0,1,1,16-16A16,16,0,0,1,224,240Zm80,48a16,16,0,1,0,16,16A16,16,0,0,0,304,288Z"></path></svg>';case"list-ul":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M32.39 224C14.73 224 0 238.33 0 256s14.73 32 32.39 32a32 32 0 0 0 0-64zm0-160C14.73 64 0 78.33 0 96s14.73 32 32.39 32a32 32 0 0 0 0-64zm0 320C14.73 384 0 398.33 0 416s14.73 32 32.39 32a32 32 0 0 0 0-64zM504 80H136a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h368a8 8 0 0 0 8-8V88a8 8 0 0 0-8-8zm0 160H136a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h368a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8zm0 160H136a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h368a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"></path></svg>';case"portrait":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path  d="M320 0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h256c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm32 448c0 17.6-14.4 32-32 32H64c-17.6 0-32-14.4-32-32V64c0-17.6 14.4-32 32-32h256c17.6 0 32 14.4 32 32v384zM192 288c44.2 0 80-35.8 80-80s-35.8-80-80-80-80 35.8-80 80 35.8 80 80 80zm0-128c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zm46.8 144c-19.5 0-24.4 7-46.8 7s-27.3-7-46.8-7c-21.2 0-41.8 9.4-53.8 27.4C84.2 342.1 80 355 80 368.9V408c0 4.4 3.6 8 8 8h16c4.4 0 8-3.6 8-8v-39.1c0-14 9-32.9 33.2-32.9 12.4 0 20.8 7 46.8 7 25.9 0 34.3-7 46.8-7 24.3 0 33.2 18.9 33.2 32.9V408c0 4.4 3.6 8 8 8h16c4.4 0 8-3.6 8-8v-39.1c0-13.9-4.2-26.8-11.4-37.5-12.1-18-32.7-27.4-53.8-27.4z"></path></svg>';case"ellipsis-h":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200C94.93 200 120 225.1 120 256zM280 256C280 286.9 254.9 312 224 312C193.1 312 168 286.9 168 256C168 225.1 193.1 200 224 200C254.9 200 280 225.1 280 256zM328 256C328 225.1 353.1 200 384 200C414.9 200 440 225.1 440 256C440 286.9 414.9 312 384 312C353.1 312 328 286.9 328 256z"/></svg>';case"ellipsis-v":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><path  d="M64 208c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48zM16 104c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48zm0 304c0 26.5 21.5 48 48 48s48-21.5 48-48-21.5-48-48-48-48 21.5-48 48z"></path></svg>';case"sun-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M256 143.7c-61.8 0-112 50.3-112 112.1s50.2 112.1 112 112.1 112-50.3 112-112.1-50.2-112.1-112-112.1zm0 192.2c-44.1 0-80-35.9-80-80.1s35.9-80.1 80-80.1 80 35.9 80 80.1-35.9 80.1-80 80.1zm256-80.1c0-5.3-2.7-10.3-7.1-13.3L422 187l19.4-97.9c1-5.2-.6-10.7-4.4-14.4-3.8-3.8-9.1-5.5-14.4-4.4l-97.8 19.4-55.5-83c-6-8.9-20.6-8.9-26.6 0l-55.5 83-97.8-19.5c-5.3-1.1-10.6.6-14.4 4.4-3.8 3.8-5.4 9.2-4.4 14.4L90 187 7.1 242.5c-4.4 3-7.1 8-7.1 13.3 0 5.3 2.7 10.3 7.1 13.3L90 324.6l-19.4 97.9c-1 5.2.6 10.7 4.4 14.4 3.8 3.8 9.1 5.5 14.4 4.4l97.8-19.4 55.5 83c3 4.5 8 7.1 13.3 7.1s10.3-2.7 13.3-7.1l55.5-83 97.8 19.4c5.4 1.2 10.7-.6 14.4-4.4 3.8-3.8 5.4-9.2 4.4-14.4L422 324.6l82.9-55.5c4.4-3 7.1-8 7.1-13.3zm-116.7 48.1c-5.4 3.6-8 10.1-6.8 16.4l16.8 84.9-84.8-16.8c-6.6-1.4-12.8 1.4-16.4 6.8l-48.1 72-48.1-71.9c-3-4.5-8-7.1-13.3-7.1-1 0-2.1.1-3.1.3l-84.8 16.8 16.8-84.9c1.2-6.3-1.4-12.8-6.8-16.4l-71.9-48.1 71.9-48.2c5.4-3.6 8-10.1 6.8-16.4l-16.8-84.9 84.8 16.8c6.5 1.3 12.8-1.4 16.4-6.8l48.1-72 48.1 72c3.6 5.4 9.9 8.1 16.4 6.8l84.8-16.8-16.8 84.9c-1.2 6.3 1.4 12.8 6.8 16.4l71.9 48.2-71.9 48z"></path></svg>';case"adjust":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M256 40c119.945 0 216 97.337 216 216 0 119.945-97.337 216-216 216-119.945 0-216-97.337-216-216 0-119.945 97.337-216 216-216m0-32C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm-32 124.01v247.98c-53.855-13.8-96-63.001-96-123.99 0-60.99 42.145-110.19 96-123.99M256 96c-88.366 0-160 71.634-160 160s71.634 160 160 160V96z"></path></svg>';case"scroll-old":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path  d="M616 352h-72v-73.38L521.38 256 544 233.38v-82.75L521.38 128l22.25-22.28-.97-7.77C535.59 42.11 488.03 0 432 0H80C35.88 0 0 35.89 0 80v88c0 13.23 10.78 24 24 24h104v41.38L150.62 256 128 278.62v132.81c0 51.28 37.84 95.23 86.16 100.08 1.5.15 3 .14 4.5.23v.26h312C590.94 512 640 462.95 640 402.67V376c0-13.23-10.78-24-24-24zM128 160H32V80c0-26.47 21.53-48 48-48s48 21.53 48 48v80zm32 251.44V291.88L195.88 256 160 220.12V80c0-18-5.97-34.62-16.03-48H432c37.41 0 69.56 26.39 77.59 62.5L476.12 128 512 163.88v56.25L476.12 256 512 291.88V352h-73.38L416 374.62 393.38 352H320c-17.66 0-32 14.36-32 32v32c0 18.05-7.69 35.34-21.06 47.47-13.59 12.3-31.12 18.09-49.59 16.2-32.16-3.22-57.35-33.19-57.35-68.23zm448-8.77c0 42.64-34.69 77.33-77.34 77.33H294.83c15.82-17.55 25.17-40.18 25.17-64v-32h60.12L416 419.88 451.88 384H608v18.67z"></path></svg>';case"align-top":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">  <polygon points="500 0 0 0 0 34.468 88.66 34.468 88.66 433.596 228.66 433.596 228.66 34.468 274.787 34.468 274.787 313.745 414.787 313.745 414.787 34.468 500 34.468 500 0" /></svg>\n                 ';case"align-middle":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><polygon points="500 234.489 414.787 234.489 414.787 111.149 274.787 111.149 274.787 234.489 228.66 234.489 228.66 50 88.66 50 88.66 234.489 0 234.489 0 268.957 88.66 268.957 88.66 450 228.66 450 228.66 268.957 274.787 268.957 274.787 391.149 414.787 391.149 414.787 268.957 500 268.957 500 234.489" /></svg>';case"align-bottom":return'<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 500"><rect x="88.66" y="65.404" width="140" height="400" /> <polygon points="414.787 465.532 414.787 186.255 274.787 186.255 274.787 465.532 0 465.532 0 500 500 500 500 465.532 414.787 465.532" /></svg>';case"align-left":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">  <polygon points="433.596 271.34 34.468 271.34 34.468 225.213 313.745 225.213 313.745 85.213 34.468 85.213 34.468 0 0 0 0 500 34.468 500 34.468 411.34 433.596 411.34 433.596 271.34" /></svg>';case"align-center":return'<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 500">  <polygon points="450 271.34 268.957 271.34 268.957 225.213 391.149 225.213 391.149 85.213 268.957 85.213 268.957 0 234.489 0 234.489 85.213 111.149 85.213 111.149 225.213 234.489 225.213 234.489 271.34 50 271.34 50 411.34 234.489 411.34 234.489 500 268.957 500 268.957 411.34 450 411.34 450 271.34"/></svg>';case"align-right":return'<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 500 500">    <rect x="65.404" y="271.34" width="400" height="140" /><polygon points="465.532 0 465.532 85.213 186.255 85.213 186.255 225.213 465.532 225.213 465.532 500 500 500 500 0 465.532 0"/></svg>';case"space-vertical-around":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <rect x="120" y="296.302" width="260" height="140"/> <rect x="120" y="61.174" width="260" height="140"/> <path d="M403.446,500H96.554C87.412,500,80,493.284,80,485s7.412-15,16.554-15H403.446c9.142,0,16.554,6.716,16.554,15S412.588,500,403.446,500Z"/> <path d="M403.446,265H96.554C87.412,265,80,258.284,80,250s7.412-15,16.554-15H403.446c9.142,0,16.554,6.716,16.554,15S412.588,265,403.446,265Z"/> <path d="M403.446,31H96.554C87.412,31,80,24.284,80,16S87.412,1,96.554,1H403.446C412.588,1,420,7.716,420,16S412.588,31,403.446,31Z"/> </svg>';case"space-vertical-between":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <rect x="122.414" y="296.84" width="260" height="140"/> <rect x="122.414" y="60.713" width="260" height="140"/> <path d="M405.859,265H98.968c-9.143,0-16.554-6.716-16.554-15s7.411-15,16.554-15H405.859c9.143,0,16.555,6.716,16.555,15S415,265,405.859,265Z"/> </svg>';case"space-horizontal-around":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <rect x="60.552" y="124.264" width="140" height="260"/> <rect x="297.679" y="124.264" width="140" height="260"/> <path d="M485,424.263c-8.284,0-15-7.412-15-16.554V100.817c0-9.142,6.716-16.554,15-16.554s15,7.412,15,16.554V407.709C500,416.851,493.284,424.263,485,424.263Z"/> <path d="M250,424.263c-8.284,0-15-7.412-15-16.554V100.817c0-9.142,6.716-16.554,15-16.554s15,7.412,15,16.554V407.709C265,416.851,258.284,424.263,250,424.263Z"/> <path d="M15,424.263c-8.284,0-15-7.412-15-16.554V100.817c0-9.142,6.716-16.554,15-16.554s15,7.412,15,16.554V407.709C30,416.851,23.284,424.263,15,424.263Z"/> </svg>';case"space-horizontal-between":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <rect x="58.975" y="121.704" width="140" height="260"/> <rect x="298.102" y="121.704" width="140" height="260"/> <path d="M250,421.705c-8.284,0-15-7.412-15-16.555V98.259c0-9.143,6.716-16.554,15-16.554s15,7.411,15,16.554V405.15C265,414.293,258.284,421.705,250,421.705Z"/> </svg>';case"layer-group":return'<svg   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path  d="M512 256.01c0-9.98-5.81-18.94-14.77-22.81l-99.74-43.27 99.7-43.26c9-3.89 14.81-12.84 14.81-22.81s-5.81-18.92-14.77-22.79L271.94 3.33c-10.1-4.44-21.71-4.45-31.87-.02L14.81 101.06C5.81 104.95 0 113.9 0 123.87s5.81 18.92 14.77 22.79l99.73 43.28-99.7 43.26C5.81 237.08 0 246.03 0 256.01c0 9.97 5.81 18.92 14.77 22.79l99.72 43.26-99.69 43.25C5.81 369.21 0 378.16 0 388.14c0 9.97 5.81 18.92 14.77 22.79l225.32 97.76a40.066 40.066 0 0 0 15.9 3.31c5.42 0 10.84-1.1 15.9-3.31l225.29-97.74c9-3.89 14.81-12.84 14.81-22.81 0-9.98-5.81-18.94-14.77-22.81l-99.72-43.26 99.69-43.25c9-3.89 14.81-12.84 14.81-22.81zM45.23 123.87l208.03-90.26.03-.02c1.74-.71 3.65-.76 5.45.02l208.03 90.26-208.03 90.27c-1.81.77-3.74.77-5.48 0L45.23 123.87zm421.54 264.27L258.74 478.4c-1.81.77-3.74.77-5.48 0L45.23 388.13l110.76-48.06 84.11 36.49a40.066 40.066 0 0 0 15.9 3.31c5.42 0 10.84-1.1 15.9-3.31l84.11-36.49 110.76 48.07zm-208.03-41.87c-1.81.77-3.74.77-5.48 0L45.23 256 156 207.94l84.1 36.5a40.066 40.066 0 0 0 15.9 3.31c5.42 0 10.84-1.1 15.9-3.31l84.1-36.49 110.77 48.07-208.03 90.25z"></path></svg>';case"facebook-round":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>';case"primary-doc":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <g>\n            <path d="M149.075,177.875q13.047-5.4,27.225-12.375t27.675-15.3q13.5-8.322,25.875-17.551a177.165,177.165,0,0,0,22.275-19.574h46.8v273.85h-67.05V200.375a203.922,203.922,0,0,1-30.15,16.425q-16.653,7.425-32.4,12.825Z" />\n            <path d="M438.681,40A21.344,21.344,0,0,1,460,61.319V438.681A21.344,21.344,0,0,1,438.681,460H61.319A21.344,21.344,0,0,1,40,438.681V61.319A21.344,21.344,0,0,1,61.319,40H438.681m0-40H61.319A61.319,61.319,0,0,0,0,61.319V438.681A61.319,61.319,0,0,0,61.319,500H438.681A61.319,61.319,0,0,0,500,438.681V61.319A61.319,61.319,0,0,0,438.681,0Z" />\n          </g>\n        </svg>\n      ';case"primary-doc-invers":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <path d="M438.681,0H61.319A61.319,61.319,0,0,0,0,61.319V438.681A61.319,61.319,0,0,0,61.319,500H438.681A61.319,61.319,0,0,0,500,438.681V61.319A61.319,61.319,0,0,0,438.681,0ZM297.425,388.05h-67.05V201.5a203.922,203.922,0,0,1-30.15,16.425q-16.653,7.425-32.4,12.825L147.575,179q13.047-5.4,27.225-12.375t27.675-15.3q13.5-8.322,25.875-17.551A177.165,177.165,0,0,0,250.625,114.2h46.8Z" />\n        </svg>';case"preview-doc":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <g>\n            <path d="M438.681,40A21.344,21.344,0,0,1,460,61.319V438.681A21.344,21.344,0,0,1,438.681,460H61.319A21.344,21.344,0,0,1,40,438.681V61.319A21.344,21.344,0,0,1,61.319,40H438.681m0-40H61.319A61.319,61.319,0,0,0,0,61.319V438.681A61.319,61.319,0,0,0,61.319,500H438.681A61.319,61.319,0,0,0,500,438.681V61.319A61.319,61.319,0,0,0,438.681,0Z" />\n            <path d="M247.218,179.532a67.28,67.28,0,0,0-19,3.052,33.841,33.841,0,0,1-46.086,46.242,67.868,67.868,0,1,0,65.09-49.294Zm193.557,59.235c-36.67-71.789-109.267-120.361-192.392-120.361S92.641,167.011,55.991,238.774a22.014,22.014,0,0,0,0,19.8c36.67,71.79,109.267,120.362,192.392,120.362s155.742-48.606,192.392-120.368A22.016,22.016,0,0,0,440.775,238.767Zm-193.557,97.02c-60.011,0-115.028-33.57-144.738-87.893C132.19,193.57,187.2,160,247.218,160s115.028,33.57,144.739,87.894C362.252,302.217,307.235,335.787,247.218,335.787Z" />\n          </g>\n        </svg>\n      ';case"preview-doc-invers":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <g>\n            <path d="M248.718,160.375c-60.017,0-115.028,33.57-144.738,87.894,29.71,54.323,84.727,87.893,144.738,87.893s115.034-33.57,144.739-87.893C363.746,193.945,308.735,160.375,248.718,160.375Zm65.5,106.607A67.973,67.973,0,1,1,183.628,229.2a33.615,33.615,0,0,0,16.424,4.419,33.94,33.94,0,0,0,29.662-50.661,64.66,64.66,0,0,1,38.037-.383A68.218,68.218,0,0,1,314.219,266.982Z" />\n            <path d="M438.681,0H61.319A61.319,61.319,0,0,0,0,61.319V438.681A61.319,61.319,0,0,0,61.319,500H438.681A61.319,61.319,0,0,0,500,438.681V61.319A61.319,61.319,0,0,0,438.681,0Zm3.594,258.947c-36.65,71.762-109.267,120.368-192.392,120.368S94.161,330.743,57.491,258.953a22.014,22.014,0,0,1,0-19.8c36.65-71.763,109.267-120.368,192.392-120.368s155.722,48.572,192.392,120.361A22.016,22.016,0,0,1,442.275,258.947Z" />\n          </g>\n        </svg>\n      ';case"production-doc":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <path d="M390.625,257.812a23.438,23.438,0,1,0,23.438,23.438A23.438,23.438,0,0,0,390.625,257.812Zm31.25-89.937V97.539A46.876,46.876,0,0,0,408.145,64.4L357.48,13.73A46.876,46.876,0,0,0,324.336,0H107.891C91.445,0,78.125,13.994,78.125,31.25V167.875A78.128,78.128,0,0,0,0,246V375a15.62,15.62,0,0,0,15.625,15.625h62.5v93.75A15.62,15.62,0,0,0,93.75,500h312.5a15.62,15.62,0,0,0,15.625-15.625v-93.75h62.5A15.62,15.62,0,0,0,500,375V246A78.128,78.128,0,0,0,421.875,167.875ZM121,39.875H312.5V93.75a15.62,15.62,0,0,0,15.625,15.625H379v62.5H121Zm258,420.25H122v-69.5H379ZM457.125,347.75H42.875V246a31.291,31.291,0,0,1,31.25-31.25h351.75A31.291,31.291,0,0,1,457.125,246Z" />\n        </svg>\n      ';case"production-doc-invers":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <path d="M421.875,167.875V97.539A46.876,46.876,0,0,0,408.145,64.4L357.48,13.73A46.876,46.876,0,0,0,324.336,0H107.891C91.445,0,78.125,13.994,78.125,31.25V167.875A78.128,78.128,0,0,0,0,246V375a15.62,15.62,0,0,0,15.625,15.625h62.5v93.75A15.62,15.62,0,0,0,93.75,500h312.5a15.62,15.62,0,0,0,15.625-15.625v-93.75h62.5A15.62,15.62,0,0,0,500,375V246A78.128,78.128,0,0,0,421.875,167.875ZM121,39.875H312.5V93.75a15.62,15.62,0,0,0,15.625,15.625H379v62.5H121Zm258,420.25H122v-69.5H379Zm11.021-155.794a23.438,23.438,0,1,1,23.438-23.437A23.443,23.443,0,0,1,390.021,304.331Z" />\n        </svg>\n      ';case"layout-snippet":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n        <g>\n          <path d="M438.681,40A21.344,21.344,0,0,1,460,61.319V438.681A21.344,21.344,0,0,1,438.681,460H61.319A21.344,21.344,0,0,1,40,438.681V61.319A21.344,21.344,0,0,1,61.319,40H438.681m0-40H61.319A61.319,61.319,0,0,0,0,61.319V438.681A61.319,61.319,0,0,0,61.319,500H438.681A61.319,61.319,0,0,0,500,438.681V61.319A61.319,61.319,0,0,0,438.681,0Z" />\n          <path d="M306.3,419.918a15,15,0,0,1-16.463-13.362h0a14.99,14.99,0,0,1,13.36-16.473h0a15,15,0,0,1,16.475,13.36h0a15,15,0,0,1-12.361,16.332h0C306.971,419.833,306.635,419.881,306.3,419.918Zm32.1-10.006a15.023,15.023,0,0,1,8.474-19.459h0a15,15,0,0,1,19.448,8.476h0a15,15,0,0,1-8.465,19.446h0a15.267,15.267,0,0,1-2.961.835h0A15.024,15.024,0,0,1,338.4,409.912Zm-85.17,9.247-.008.012h0a15.013,15.013,0,0,1-12.236-17.337h0A15,15,0,0,1,258.312,389.6h0a15.009,15.009,0,0,1,12.244,17.326h0a15.02,15.02,0,0,1-12.241,12.242h0A14.875,14.875,0,0,1,253.229,419.159Zm-50.618-1.082a15,15,0,0,1-7.1-19.985h0a15,15,0,0,1,20-7.093h0a14.988,14.988,0,0,1,7.09,19.988h0a14.977,14.977,0,0,1-11.015,8.337h0A14.849,14.849,0,0,1,202.611,418.077Z" />\n          <path d="M345.891,112.072a15.014,15.014,0,0,1-7.742-19.758h0a15,15,0,0,1,19.758-7.732h0a15,15,0,0,1,7.732,19.748h0a14.987,14.987,0,0,1-12.783,8.962h0A15,15,0,0,1,345.891,112.072Zm-151.172-8.013a15,15,0,0,1,7.822-19.721h0a15,15,0,0,1,19.721,7.822h0a15.007,15.007,0,0,1-7.811,19.721h0a15.1,15.1,0,0,1-4.984,1.2h0A15.012,15.012,0,0,1,194.719,104.059ZM302.667,112.9h0a14.989,14.989,0,0,1-12.808-16.912h0a15,15,0,0,1,16.9-12.807h0a14.985,14.985,0,0,1,12.809,16.9h0a15,15,0,0,1-13.858,12.929h0A14.932,14.932,0,0,1,302.667,112.9Zm-61.82-12.891a14.994,14.994,0,0,1,12.858-16.874h0A14.993,14.993,0,0,1,270.569,96h0a15,15,0,0,1-12.86,16.873h0c-.347.044-.695.076-1.045.1h0A14.986,14.986,0,0,1,240.847,100.01Z" />\n          <path d="M254.88,355.562l-8.631-6.142a497.046,497.046,0,0,1-51.729-43.463c-36.2-35.072-54.786-65.924-55.242-91.7-.3-16.99,7.154-31.8,21.556-42.839,15.728-12.052,33.054-16.663,50.106-13.345,19.3,3.76,34.431,16.594,44.261,27.594,9.889-10.637,24.91-22.943,43.629-26.432,16.034-2.99,32.148,1.2,46.592,12.124,15.439,11.675,23.43,27.262,23.108,45.076-.468,25.935-18.714,56.471-54.228,90.762a468.719,468.719,0,0,1-50.748,42.281ZM200.062,187.021c-6.894,0-13.8,2.712-20.982,8.212-6.912,5.3-9.936,11-9.807,18.488.3,17,16.582,42.016,45.861,70.436A478.656,478.656,0,0,0,255,318.5a450,450,0,0,0,38.736-33.146c28.585-27.658,44.5-52.329,44.8-69.467.091-5.135-.972-12.856-11.207-20.595-7.746-5.856-15.272-8-23-6.562-16.95,3.159-32.515,22.825-36.632,29.465l-13.078,21.1-12.582-21.364c-4.388-7.347-19.55-27.093-36.913-30.422A26.854,26.854,0,0,0,200.062,187.021Z" />\n          <path d="M154.914,418.145a15,15,0,0,1-7.1-19.985h0a15,15,0,0,1,20-7.093h0a14.988,14.988,0,0,1,7.09,19.988h0a14.981,14.981,0,0,1-11.015,8.338h0A14.858,14.858,0,0,1,154.914,418.145Z" />\n          <path d="M146.589,103.494a15,15,0,0,1,7.823-19.721h0A15,15,0,0,1,174.133,91.6h0a15.007,15.007,0,0,1-7.812,19.721h0a15.118,15.118,0,0,1-4.983,1.2h0A15.015,15.015,0,0,1,146.589,103.494Z" />\n        </g>\n      </svg>\n      ';case"layout-snippet-invers":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <g>\n            <path d="M320.09,195.292c-7.746-5.856-15.273-8-23-6.562-16.95,3.159-32.516,22.825-36.632,29.465l-13.078,21.1L234.8,217.929c-4.389-7.347-19.55-27.093-36.913-30.422a26.865,26.865,0,0,0-5.06-.486c-6.893,0-13.8,2.712-20.981,8.212-6.912,5.3-9.937,11-9.807,18.488.3,17,16.582,42.016,45.861,70.436A478.656,478.656,0,0,0,247.762,318.5,450,450,0,0,0,286.5,285.354c28.585-27.658,44.5-52.329,44.8-69.467C331.388,210.752,330.325,203.031,320.09,195.292Z" />\n            <path d="M438.681,0H61.319A61.319,61.319,0,0,0,0,61.319V438.681A61.319,61.319,0,0,0,61.319,500H438.681A61.319,61.319,0,0,0,500,438.681V61.319A61.319,61.319,0,0,0,438.681,0ZM329.149,92.314a15,15,0,1,1,7.742,19.758A15,15,0,0,1,329.149,92.314Zm-48.29,3.675A15.018,15.018,0,1,1,293.667,112.9,15,15,0,0,1,280.859,95.989ZM244.705,83.136a15,15,0,0,1,4,29.732c-.347.044-.695.076-1.045.1a15,15,0,0,1-2.959-29.831Zm-51.164,1.2a15,15,0,1,1-7.822,19.721A15,15,0,0,1,193.541,84.338Zm-46.129-.565a15,15,0,1,1-7.822,19.721A15,15,0,0,1,147.412,83.773ZM167.9,411.055a15,15,0,1,1-7.09-19.988A14.981,14.981,0,0,1,167.9,411.055Zm45.7-.068A15,15,0,1,1,206.507,391,14.975,14.975,0,0,1,213.6,410.987Zm47.959-4.062a14.974,14.974,0,0,1-17.327,12.234l-.008.012a15,15,0,1,1,17.335-12.246Zm36.75,12.85c-.335.058-.671.105-1.011.143a15.049,15.049,0,1,1,1.011-.143Zm50.55-1.4a15.267,15.267,0,0,1-2.961.835,15.035,15.035,0,1,1,2.961-.835ZM307.064,307.2a468.566,468.566,0,0,1-50.749,42.281l-8.673,6.081-8.631-6.142a497.115,497.115,0,0,1-51.73-43.463c-36.2-35.072-54.785-65.924-55.241-91.7-.3-16.99,7.153-31.8,21.556-42.839,15.727-12.052,33.053-16.663,50.106-13.345,19.3,3.76,34.431,16.594,44.261,27.594,9.889-10.637,24.91-22.943,43.629-26.432,16.034-2.99,32.147,1.2,46.592,12.124,15.439,11.675,23.429,27.262,23.108,45.076C360.823,242.373,342.578,272.909,307.064,307.2Z" />\n          </g>\n        </svg>\n      ';case"group-snippet":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <g>\n            <path d="M250,498c-66.937,0-129.657-25.233-176.6-71.053C26.066,380.754,0,318.623,0,252A250,250,0,0,1,426.776,75.224,248.361,248.361,0,0,1,500,252c0,66.623-26.066,128.754-73.4,174.947C379.657,472.767,316.938,498,250,498Zm0-456C134.205,42,40,136.205,40,252c0,115.514,92.243,206,210,206s210-90.486,210-206C460,136.205,365.8,42,250,42Z" />\n            <path d="M274.537,421.95a15,15,0,0,1-16.464-13.362h0a14.99,14.99,0,0,1,13.361-16.473h0a15,15,0,0,1,16.474,13.36h0a15,15,0,0,1-12.361,16.332h0Q275.046,421.894,274.537,421.95Zm32.1-21.006a15.025,15.025,0,0,1,8.475-19.459h0a15,15,0,0,1,19.447,8.476h0a15,15,0,0,1-8.465,19.446h0a15.267,15.267,0,0,1-2.961.835h0A15.024,15.024,0,0,1,306.64,400.944Zm-85.17,19.247-.008.012h0a15.015,15.015,0,0,1-12.236-17.337h0a15,15,0,0,1,17.327-12.235h0A15.009,15.009,0,0,1,238.8,407.957h0A15.021,15.021,0,0,1,226.556,420.2h0A14.9,14.9,0,0,1,221.47,420.191Zm-50.618-16.082a15,15,0,0,1-7.1-19.985h0a15,15,0,0,1,20-7.093h0a14.989,14.989,0,0,1,7.091,19.988h0a14.98,14.98,0,0,1-11.016,8.337h0A14.85,14.85,0,0,1,170.852,404.109Z" />\n            <path d="M315.941,117.156A15.012,15.012,0,0,1,308.2,97.4h0a15,15,0,0,1,19.758-7.732h0a15,15,0,0,1,7.732,19.748h0a14.988,14.988,0,0,1-12.783,8.962h0A15,15,0,0,1,315.941,117.156Zm-151.173-8.013a15,15,0,0,1,7.823-19.721h0a15,15,0,0,1,19.721,7.822h0a15.006,15.006,0,0,1-7.812,19.721h0a15.1,15.1,0,0,1-4.983,1.2h0A15.014,15.014,0,0,1,164.768,109.143Zm107.949-4.158h0a14.989,14.989,0,0,1-12.808-16.912h0a15,15,0,0,1,16.9-12.807h0a14.984,14.984,0,0,1,12.808,16.9h0A15,15,0,0,1,275.761,105.1h0A15,15,0,0,1,272.717,104.985ZM210.9,92.094A14.994,14.994,0,0,1,223.755,75.22h0a14.991,14.991,0,0,1,16.863,12.859h0a15,15,0,0,1-12.859,16.873h0c-.347.044-.7.076-1.045.1h0A14.986,14.986,0,0,1,210.9,92.094Z" />\n            <path d="M250.93,352.427l-8.631-6.142a496.968,496.968,0,0,1-51.73-43.463c-36.2-35.072-54.785-65.924-55.241-91.7-.3-16.99,7.153-31.8,21.556-42.839,15.727-12.052,33.054-16.663,50.106-13.345,19.3,3.76,34.431,16.594,44.261,27.594,9.889-10.637,24.91-22.943,43.629-26.431,16.034-2.991,32.147,1.2,46.592,12.124C356.911,179.9,364.9,195.489,364.58,213.3c-.469,25.935-18.714,56.471-54.228,90.762A468.936,468.936,0,0,1,259.6,346.347ZM196.111,183.886c-6.893,0-13.8,2.713-20.981,8.213-6.912,5.3-9.937,11-9.807,18.487.3,17,16.582,42.017,45.861,70.436a478.656,478.656,0,0,0,39.866,34.343,449.818,449.818,0,0,0,38.736-33.146c28.585-27.657,44.5-52.328,44.8-69.467.091-5.135-.972-12.856-11.207-20.595-7.746-5.856-15.273-8-23-6.561-16.95,3.158-32.516,22.824-36.632,29.465l-13.078,21.1-12.582-21.364c-4.389-7.347-19.55-27.093-36.913-30.422A26.865,26.865,0,0,0,196.111,183.886Z" />\n          </g>\n        </svg>';case"group-snippet-invers":return'<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">\n          <path d="M322.128,194.532c-7.746-5.856-15.273-8-23-6.561-16.95,3.158-32.516,22.824-36.632,29.465l-13.078,21.1-12.582-21.364c-4.389-7.347-19.55-27.093-36.913-30.422a26.865,26.865,0,0,0-5.06-.486c-6.893,0-13.8,2.713-20.981,8.213-6.912,5.3-9.937,11-9.807,18.487.3,17,16.582,42.017,45.861,70.436A478.656,478.656,0,0,0,249.8,317.74a449.818,449.818,0,0,0,38.736-33.146c28.585-27.657,44.5-52.328,44.8-69.467C333.426,209.992,332.363,202.271,322.128,194.532Z" />\n          <path d="M426.776,75.224A250,250,0,0,0,0,252c0,66.623,26.066,128.754,73.4,174.947C120.343,472.767,183.063,498,250,498s129.657-25.233,176.6-71.053C473.934,380.754,500,318.623,500,252A248.361,248.361,0,0,0,426.776,75.224ZM306.949,99.773a15,15,0,1,1,7.742,19.758A15,15,0,0,1,306.949,99.773Zm-48.29-9.325a15.018,15.018,0,1,1,12.808,16.912A15,15,0,0,1,258.659,90.448ZM222.505,77.6a15,15,0,0,1,4,29.732c-.347.044-.7.076-1.045.1A15,15,0,0,1,222.505,77.6ZM171.341,91.8a15,15,0,1,1-7.823,19.721A15,15,0,0,1,171.341,91.8Zm18.248,307.6a15,15,0,1,1-7.091-19.988A14.978,14.978,0,0,1,189.589,399.394Zm47.958,10.938a14.974,14.974,0,0,1-17.327,12.234l-.008.012a15,15,0,1,1,17.335-12.246Zm36.75,13.85q-.5.087-1.01.143a15.051,15.051,0,1,1,1.01-.143Zm50.55-12.4a15.267,15.267,0,0,1-2.961.835,15.036,15.036,0,1,1,2.961-.835ZM309.1,306.44a468.936,468.936,0,0,1-50.748,42.282l-8.674,6.08-8.631-6.142a496.968,496.968,0,0,1-51.73-43.463c-36.2-35.072-54.785-65.924-55.241-91.7-.3-16.99,7.153-31.8,21.556-42.839,15.727-12.052,33.054-16.663,50.106-13.345,19.3,3.76,34.431,16.594,44.261,27.594,9.889-10.637,24.91-22.943,43.629-26.431,16.034-2.991,32.147,1.2,46.592,12.124,15.439,11.674,23.429,27.261,23.108,45.075C362.861,241.613,344.616,272.149,309.1,306.44Z"/>\n        </svg>';case"pin-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M298.028 214.267L285.793 96H328c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v48c0 13.255 10.745 24 24 24h42.207L85.972 214.267C37.465 236.82 0 277.261 0 328c0 13.255 10.745 24 24 24h136v104.007c0 1.242.289 2.467.845 3.578l24 48c2.941 5.882 11.364 5.893 14.311 0l24-48a8.008 8.008 0 0 0 .845-3.578V352h136c13.255 0 24-10.745 24-24-.001-51.183-37.983-91.42-85.973-113.733z"></path></svg>';case"pin":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M300.8 203.9L290.7 128H328c13.2 0 24-10.8 24-24V24c0-13.2-10.8-24-24-24H56C42.8 0 32 10.8 32 24v80c0 13.2 10.8 24 24 24h37.3l-10.1 75.9C34.9 231.5 0 278.4 0 335.2c0 8.8 7.2 16 16 16h160V472c0 .7.1 1.3.2 1.9l8 32c2 8 13.5 8.1 15.5 0l8-32c.2-.6.2-1.3.2-1.9V351.2h160c8.8 0 16-7.2 16-16 .1-56.8-34.8-103.7-83.1-131.3zM33.3 319.2c6.8-42.9 39.6-76.4 79.5-94.5L128 96H64V32h256v64h-64l15.3 128.8c40 18.2 72.7 51.8 79.5 94.5H33.3z"></path></svg>';case"file-invoice":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M312 416h-80c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8h80c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8zM64 240v96c0 8.84 8.19 16 18.29 16h219.43c10.1 0 18.29-7.16 18.29-16v-96c0-8.84-8.19-16-18.29-16H82.29C72.19 224 64 231.16 64 240zm32 16h192v64H96v-64zM72 96h112c4.42 0 8-3.58 8-8V72c0-4.42-3.58-8-8-8H72c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8zm0 64h112c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8H72c-4.42 0-8 3.58-8 8v16c0 4.42 3.58 8 8 8zm297.9-62.02L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V131.97c0-12.69-5.1-24.99-14.1-33.99zM256.03 32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48V32.59zm95.98 431.42c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v304.01z"></path></svg>';case"clock-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path   d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"></path></svg>';case"page-plus-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M377,105,279.1,7a24,24,0,0,0-17-7H256V128H384v-6.1A23.92,23.92,0,0,0,377,105ZM224,136V0H24A23.94,23.94,0,0,0,0,24V488a23.94,23.94,0,0,0,24,24H360a23.94,23.94,0,0,0,24-24V160H248A24.07,24.07,0,0,1,224,136Zm72,176v16a16,16,0,0,1-16,16H216v64a16,16,0,0,1-16,16H184a16,16,0,0,1-16-16V344H104a16,16,0,0,1-16-16V312a16,16,0,0,1,16-16h64V232a16,16,0,0,1,16-16h16a16,16,0,0,1,16,16v64h64A16,16,0,0,1,296,312Z"></path></svg>';case"user-friends-solid":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M192 256c61.9 0 112-50.1 112-112S253.9 32 192 32 80 82.1 80 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C51.6 288 0 339.6 0 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zM480 256c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592c26.5 0 48-21.5 48-48 0-61.9-50.1-112-112-112z"></path></svg>';case"opacity":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M255.9.2h-64v64h64zM0 64.17v64h64v-64zM128 .2H64v64h64zm64 255.9v64h64v-64zM0 192.12v64h64v-64zM383.85.2h-64v64h64zm128 0h-64v64h64zM128 256.1H64v64h64zM511.8 448v-64h-64v64zm0-128v-64h-64v64zM383.85 512h64v-64h-64zm128-319.88v-64h-64v64zM128 512h64v-64h-64zM0 512h64v-64H0zm255.9 0h64v-64h-64zM0 320.07v64h64v-64zm319.88-191.92v-64h-64v64zm-64 128h64v-64h-64zm-64 128v64h64v-64zm128-64h64v-64h-64zm0-127.95h64v-64h-64zm0 191.93v64h64v-64zM64 384.05v64h64v-64zm128-255.9v-64h-64v64zm191.92 255.9h64v-64h-64zm-128-191.93v-64h-64v64zm128-127.95v64h64v-64zm-128 255.9v64h64v-64zm-64-127.95H128v64h64zm191.92 64h64v-64h-64zM128 128.15H64v64h64zm0 191.92v64h64v-64z"></path></svg>';case"triangle-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path  d="M329.6 24c-18.4-32-64.7-32-83.2 0L6.5 440c-18.4 31.9 4.6 72 41.6 72H528c36.9 0 60-40 41.6-72l-240-416z"></path></svg>';case"angle-right":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path  d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17z"></path></svg>';case"angle-down":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z"></path></svg>';case"sync":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M492 8h-10c-6.627 0-12 5.373-12 12v110.627C426.929 57.261 347.224 8 256 8 123.228 8 14.824 112.338 8.31 243.493 7.971 250.311 13.475 256 20.301 256h10.016c6.353 0 11.646-4.949 11.977-11.293C48.157 132.216 141.097 42 256 42c82.862 0 154.737 47.077 190.289 116H332c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h160c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12zm-.301 248h-10.015c-6.352 0-11.647 4.949-11.977 11.293C463.841 380.158 370.546 470 256 470c-82.608 0-154.672-46.952-190.299-116H180c6.627 0 12-5.373 12-12v-10c0-6.627-5.373-12-12-12H20c-6.627 0-12 5.373-12 12v160c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V381.373C85.071 454.739 164.777 504 256 504c132.773 0 241.176-104.338 247.69-235.493.339-6.818-5.165-12.507-11.991-12.507z"></path></svg>';case"folder-tree-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M544 32H432L400 0h-80a32 32 0 0 0-32 32v160a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32zm0 288H432l-32-32h-80a32 32 0 0 0-32 32v160a32 32 0 0 0 32 32h224a32 32 0 0 0 32-32V352a32 32 0 0 0-32-32zM64 16A16 16 0 0 0 48 0H16A16 16 0 0 0 0 16v400a32 32 0 0 0 32 32h224v-64H64V160h192V96H64z"/></svg>';case"filter-reset":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">\n          <path d="M281.25,349.269V453.125l-62.5-46.875V250.691a136.239,136.239,0,0,1-.135-32.076L46.875,46.875h406.25l-57.384,57.383a136.154,136.154,0,0,1,43.12,23.139L486.224,80.02C515.666,50.578,494.8,0,453.078,0H46.931C5.292,0-15.717,50.518,13.785,80.02l158.09,158.146V406.25c0,14.754,6.946,28.647,18.75,39.062l62.5,45.963c30.54,21.343,75,1.5,75-37.5V367.907A135.49,135.49,0,0,1,281.25,349.269Z"/>\n          <path d="M383.977,234.255l14.251-14.25a19.937,19.937,0,0,0,0-28.19l-.192-.191a19.686,19.686,0,0,0-27.807,0l-14.442,14.443-14.251-14.252a19.933,19.933,0,0,0-28.189,28.19l14.251,14.25-14.251,14.252A19.932,19.932,0,0,0,341.536,276.7l14.251-14.252L370.038,276.7a19.933,19.933,0,0,0,28.19-28.189Z"/>\n          <path d="M354.063,347.894A113.83,113.83,0,1,1,467.894,234.063,113.959,113.959,0,0,1,354.063,347.894Zm0-187.66a73.83,73.83,0,1,0,73.831,73.829A73.913,73.913,0,0,0,354.063,160.234Z"/>\n        </svg>';case"compact-disc":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">\n          <path class="fa-secondary" d="M248,8C111,8,0,119,0,256S111,504,248,504,496,393,496,256,385,8,248,8ZM88,256H56C56,150.1,142.1,64,248,64V96C159.8,96,88,167.8,88,256Zm160,96a96,96,0,1,1,96-96A96,96,0,0,1,248,352Z"/>\n          <path class="fa-primary" d="M248,160a96,96,0,1,0,96,96A96,96,0,0,0,248,160Zm0,128a32,32,0,1,1,32-32A32,32,0,0,1,248,288Z" opacity="0.4"/>\n        </svg>';case"chevron-double-down-duotone":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path class="fa-secondary" d="M207 285.54L12.7 91.14a23.9 23.9 0 0 1 0-33.9l22.7-22.7a24.08 24.08 0 0 1 33.9 0l154.7 154 154.7-154a23.9 23.9 0 0 1 33.9 0l22.7 22.7a23.9 23.9 0 0 1 0 33.9L241 285.54a24.2 24.2 0 0 1-34 0z" opacity="0.4"/>\n          <path class="fa-primary" d="M207 477.54L12.7 283.14a23.9 23.9 0 0 1 0-33.9l22.7-22.7a23.9 23.9 0 0 1 33.9 0l154.7 154 154.7-154a24.08 24.08 0 0 1 33.9 0l22.7 22.7a23.9 23.9 0 0 1 0 33.9L241 477.54a24.2 24.2 0 0 1-34 0z"/>\n        </svg>';case"chevron-right":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">\n          <path d="M17.525 36.465l-7.071 7.07c-4.686 4.686-4.686 12.284 0 16.971L205.947 256 10.454 451.494c-4.686 4.686-4.686 12.284 0 16.971l7.071 7.07c4.686 4.686 12.284 4.686 16.97 0l211.051-211.05c4.686-4.686 4.686-12.284 0-16.971L34.495 36.465c-4.686-4.687-12.284-4.687-16.97 0z"/>\n        </svg>';case"chevron-left":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">\n          <path d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"/>\n        </svg>';case"angle-left":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512">\n          <path d="M25.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L64.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L25 264.5c-4.6-4.7-4.6-12.3.1-17z"/>\n        </svg>';case"database":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M224 32c106 0 192 28.75 192 64v32c0 35.25-86 64-192 64S32 163.25 32 128V96c0-35.25 86-64 192-64m192 149.5V224c0 35.25-86 64-192 64S32 259.25 32 224v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V320c0 35.25-86 64-192 64S32 355.25 32 320v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V416c0 35.25-86 64-192 64S32 451.25 32 416v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5M224 0C145.858 0 0 18.801 0 96v320c0 77.338 146.096 96 224 96 78.142 0 224-18.801 224-96V96c0-77.338-146.096-96-224-96z"/>\n        </svg>';case"circle-dollar":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M276.8 147.8C286.5 149 296.2 151.7 305.8 154.4C307.6 154.9 309.5 155.5 311.3 155.1C322.8 159.2 329.6 171.1 326.4 182.6C323.2 194.1 311.3 200.8 299.8 197.6C298.3 197.2 296.7 196.8 295.2 196.3C288.2 194.4 281.2 192.4 274.1 191C260.9 188.5 245.6 189.7 233.2 195C222.2 199.8 213.1 211.4 225.6 219.4C235.5 225.7 247.4 228.9 258.8 231.1C261.1 232.6 263.5 233.3 265.8 233.9C281.4 238.4 301.3 244 316.2 254.2C335.6 267.5 344.7 289.2 340.5 312.4C336.3 334.8 320.8 349.5 302 357C294.2 360.2 285.7 362.2 276.8 363.2L276.8 378.4C276.8 390.3 267.1 400 255.2 400C243.3 400 233.6 390.3 233.6 378.4L233.6 361C219.1 357.8 204.9 353.1 190.8 348.5C179.5 344.8 173.3 332.5 177.1 321.2C180.8 309.9 193.1 303.7 204.4 307.5C206.9 308.3 209.4 309.2 211.9 310C223.2 313.8 234.8 317.8 246.4 319.6C263.4 322.1 276.1 320.6 285.9 316.1C297.9 312.1 303.5 297.9 291.8 289.9C281.7 282.1 269.2 279.6 257.3 276.4C254.1 275.7 252.7 275.1 250.5 274.5C235.4 270.2 216.6 264.9 202.4 255.8C182.9 243.3 172.9 222.5 177.1 199.4C181.1 177.6 198.1 163.1 216.1 155.4C221.6 152.1 227.5 151.1 233.6 149.7V133.6C233.6 121.7 243.3 111.1 255.2 111.1C267.1 111.1 276.8 121.7 276.8 133.6L276.8 147.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"/></svg>';case"coins":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path class="fa-secondary" d="M416 311.4c57.3-11.1 96-31.7 96-55.4v-42.7c-23.2 16.4-57.3 27.6-96 34.5zm-4.7-95.1c60-10.8 100.7-32 100.7-56.3v-42.7c-35.5 25.1-96.5 38.6-160.7 41.8 29.5 14.3 51.2 33.5 60 57.2zM512 64c0-35.3-86-64-192-64S128 28.7 128 64s86 64 192 64 192-28.7 192-64z" opacity="0.4"/>\n          <path class="fa-primary" d="M192 320c106 0 192-35.8 192-80s-86-80-192-80S0 195.8 0 240s86 80 192 80zM0 405.3V448c0 35.3 86 64 192 64s192-28.7 192-64v-42.7C342.7 434.4 267.2 448 192 448S41.3 434.4 0 405.3zm0-104.9V352c0 35.3 86 64 192 64s192-28.7 192-64v-51.6c-41.3 34-116.9 51.6-192 51.6S41.3 334.4 0 300.4z"/>\n        </svg>';case"sync-alt":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M483.515 28.485L431.35 80.65C386.475 35.767 324.485 8 256 8 123.228 8 14.824 112.338 8.31 243.493 7.971 250.311 13.475 256 20.301 256h28.045c6.353 0 11.613-4.952 11.973-11.294C66.161 141.649 151.453 60 256 60c54.163 0 103.157 21.923 138.614 57.386l-54.128 54.129c-7.56 7.56-2.206 20.485 8.485 20.485H492c6.627 0 12-5.373 12-12V36.971c0-10.691-12.926-16.045-20.485-8.486zM491.699 256h-28.045c-6.353 0-11.613 4.952-11.973 11.294C445.839 370.351 360.547 452 256 452c-54.163 0-103.157-21.923-138.614-57.386l54.128-54.129c7.56-7.56 2.206-20.485-8.485-20.485H20c-6.627 0-12 5.373-12 12v143.029c0 10.691 12.926 16.045 20.485 8.485L80.65 431.35C125.525 476.233 187.516 504 256 504c132.773 0 241.176-104.338 247.69-235.493.339-6.818-5.165-12.507-11.991-12.507z"/>\n        </svg>';case"clock-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216zm-148.9 88.3l-81.2-59c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h14c6.6 0 12 5.4 12 12v146.3l70.5 51.3c5.4 3.9 6.5 11.4 2.6 16.8l-8.2 11.3c-3.9 5.3-11.4 6.5-16.8 2.6z"/>\n        </svg>';case"calendar-alt":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z"/>\n        </svg>';case"calendar-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M400 64h-48V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H128V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM48 96h352c8.822 0 16 7.178 16 16v48H32v-48c0-8.822 7.178-16 16-16zm352 384H48c-8.822 0-16-7.178-16-16V192h384v272c0 8.822-7.178 16-16 16z"/>\n        </svg>';case"coin-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M256 64C114.67 64 0 128.44 0 208v112c0 70.72 114.67 128 256 128s256-57.28 256-128V208c0-79.56-114.67-144-256-144zM64 366.61C43.69 352 32 335.68 32 320v-42.34A183.65 183.65 0 0 0 64 303zm80 35.32A306.25 306.25 0 0 1 96 385v-64.69a327.39 327.39 0 0 0 48 17zm96 13.68a450 450 0 0 1-64-6.61v-64.27a442.1 442.1 0 0 0 64 6.53zm96-6.61a450 450 0 0 1-64 6.64v-64.38a442.1 442.1 0 0 0 64-6.53zm80-24a306.25 306.25 0 0 1-48 16.9v-64.6a327.39 327.39 0 0 0 48-17zm64-65c0 15.68-11.69 32-32 46.61V303a183.65 183.65 0 0 0 32-25.37zm-224 0c-132 0-224-59-224-112S124 96 256 96s224 59 224 112-92 112-224 112z"/>\n        </svg>';case"page-inverse":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">\n          <path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"/>\n        </svg>';case"coin":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n            <path d="M256 64C114.67 64 0 128.44 0 208v112c0 70.72 114.67 128 256 128s256-57.28 256-128V208c0-79.56-114.67-144-256-144zM88 363.37C62.42 349.16 48 333.2 48 320v-28.27a226 226 0 0 0 40 24.75zm96 30.88a348.83 348.83 0 0 1-64-16.32v-48.09a373.73 373.73 0 0 0 64 16.28zm112 4c-12.81 1.1-26.1 1.78-40 1.78s-27.19-.68-40-1.78v-48.18c13.07 1.16 26.36 1.93 40 1.93s26.93-.77 40-1.93zm96-20.29a348.83 348.83 0 0 1-64 16.32v-48.16a373.73 373.73 0 0 0 64-16.28zM464 320c0 13.2-14.42 29.16-40 43.37v-46.89a226 226 0 0 0 40-24.75zm-208-16c-119 0-208-50.68-208-96s89-96 208-96 208 50.68 208 96-88.95 96-208 96z"/>\n          </svg>';case"page-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">\n          <path d="M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16z"/>\n        </svg>';case"bars-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M442 114H6a6 6 0 0 1-6-6V84a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6zm0 160H6a6 6 0 0 1-6-6v-24a6 6 0 0 1 6-6h436a6 6 0 0 1 6 6v24a6 6 0 0 1-6 6z"/>\n        </svg>';case"credit-card":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n          <path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM48 64h480c8.8 0 16 7.2 16 16v48H32V80c0-8.8 7.2-16 16-16zm480 384H48c-8.8 0-16-7.2-16-16V224h512v208c0 8.8-7.2 16-16 16zm-336-84v8c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v8c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"/>\n        </svg>';case"info-circle":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z"/>\n        </svg>';case"check-circle-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>\n        </svg>';case"pause-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z"/>\n        </svg>';case"pause-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M48 479h96c26.5 0 48-21.5 48-48V79c0-26.5-21.5-48-48-48H48C21.5 31 0 52.5 0 79v352c0 26.5 21.5 48 48 48zM32 79c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V79zm272 400h96c26.5 0 48-21.5 48-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48zM288 79c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16h-96c-8.8 0-16-7.2-16-16V79z"/>\n        </svg>';case"angle-up-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">\n          <path d="M136.5 185.1l116 117.8c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L128 224.7 27.6 326.9c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-117.8c4.7-4.6 12.3-4.6 17 .1z"/>\n        </svg>';case"angle-down-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">\n          <path d="M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z"/>\n        </svg>';case"chevron-down-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"/>\n        </svg>';case"chevron-up-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M4.465 366.475l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L224 178.053l195.494 195.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.051c-4.686-4.686-12.284-4.686-16.971 0L4.465 349.505c-4.687 4.686-4.687 12.284 0 16.97z"/>\n        </svg>';case"sign-in-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M184 83.5l164.5 164c4.7 4.7 4.7 12.3 0 17L184 428.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l132-131.4H12c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h279.9L160 107.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM512 400V112c0-26.5-21.5-48-48-48H332c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h132c8.8 0 16 7.2 16 16v288c0 8.8-7.2 16-16 16H332c-6.6 0-12 5.4-12 12v8c0 6.6 5.4 12 12 12h132c26.5 0 48-21.5 48-48z"/>\n        </svg>';case"share-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n          <path d="M564.907 196.35L388.91 12.366C364.216-13.45 320 3.746 320 40.016v88.154C154.548 130.155 0 160.103 0 331.19c0 94.98 55.84 150.231 89.13 174.571 24.233 17.722 58.021-4.992 49.68-34.51C100.937 336.887 165.575 321.972 320 320.16V408c0 36.239 44.19 53.494 68.91 27.65l175.998-184c14.79-15.47 14.79-39.83-.001-55.3zm-23.127 33.18l-176 184c-4.933 5.16-13.78 1.73-13.78-5.53V288c-171.396 0-295.313 9.707-243.98 191.7C72 453.36 32 405.59 32 331.19 32 171.18 194.886 160 352 160V40c0-7.262 8.851-10.69 13.78-5.53l176 184a7.978 7.978 0 0 1 0 11.06z"/>\n        </svg>';case"reply-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n          <path d="M11.093 251.65l175.998 184C211.81 461.494 256 444.239 256 408v-87.84c154.425 1.812 219.063 16.728 181.19 151.091-8.341 29.518 25.447 52.232 49.68 34.51C520.16 481.421 576 426.17 576 331.19c0-171.087-154.548-201.035-320-203.02V40.016c0-36.27-44.216-53.466-68.91-27.65L11.093 196.35c-14.791 15.47-14.791 39.83 0 55.3zm23.127-33.18l176-184C215.149 29.31 224 32.738 224 40v120c157.114 0 320 11.18 320 171.19 0 74.4-40 122.17-76.02 148.51C519.313 297.707 395.396 288 224 288v120c0 7.26-8.847 10.69-13.78 5.53l-176-184a7.978 7.978 0 0 1 0-11.06z"/>\n        </svg>';case"reply-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M8.309 189.836L184.313 37.851C199.719 24.546 224 35.347 224 56.015v80.053c160.629 1.839 288 34.032 288 186.258 0 61.441-39.581 122.309-83.333 154.132-13.653 9.931-33.111-2.533-28.077-18.631 45.344-145.012-21.507-183.51-176.59-185.742V360c0 20.7-24.3 31.453-39.687 18.164l-176.004-152c-11.071-9.562-11.086-26.753 0-36.328z"/>\n        </svg>';case"share-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z"/>\n        </svg>';case"undo-arrow":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">\n          <path d="M282.88,107.69H97.65a.07.07,0,0,1-.05-.13L170.75,34.4a9.07,9.07,0,0,0,0-12.84L155.37,6.18a9.16,9.16,0,0,0-13,0L21,127.64a.08.08,0,0,0,0,.11l120.1,120.1a11.09,11.09,0,0,0,15.68,0L170.57,234a9.34,9.34,0,0,0,0-13.21l-73-73a.08.08,0,0,1,.05-.14H283c87.85,0,159.25,72.54,155.93,160.32-3.12,82.41-71.13,148.5-154.29,148.5H58.21a9,9,0,0,0-9,9v22a9,9,0,0,0,9,9H284.67c106,0,192.51-85.33,194.37-190.92C481,196.76,391.72,107.69,282.88,107.69Z"/>\n        </svg>';case"redo-arrow":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">\n          <path d="M217.12,107.69H402.35a.07.07,0,0,0,0-.13L329.25,34.4a9.07,9.07,0,0,1,0-12.84L344.63,6.18a9.16,9.16,0,0,1,13,0L479.05,127.64a.08.08,0,0,1,0,.11L359,247.85a11.09,11.09,0,0,1-15.68,0L329.43,234a9.34,9.34,0,0,1,0-13.21l73-73a.08.08,0,0,0,0-.14H217C129.12,147.69,57.72,220.23,61,308c3.12,82.41,71.13,148.5,154.29,148.5H441.79a9,9,0,0,1,9,9v22a9,9,0,0,1-9,9H215.33c-106,0-192.51-85.33-194.37-190.92C19,196.76,108.28,107.69,217.12,107.69Z"/>\n        </svg>';case"arrows-resize":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.39 403.39"><path d="M405.36,205.35a15.17,15.17,0,0,0-15.17,15.48l2.87,128L161.65,117.44l128,2.87a15.17,15.17,0,0,0,15.48-15.17V70.05A15.17,15.17,0,0,0,290,54.88L67.59,54.7A15.17,15.17,0,0,0,52.42,69.87l.18,222.39a15.17,15.17,0,0,0,15.17,15.17h35.09A15.17,15.17,0,0,0,118,292l-2.86-128,231.4,231.4-128-2.86a15.17,15.17,0,0,0-15.48,15.17v35.09a15.17,15.17,0,0,0,15.17,15.17l222.39.18a15.18,15.18,0,0,0,15.18-15.17l-.19-222.39a15.17,15.17,0,0,0-15.17-15.17Z" transform="translate(-52.42 -54.7)"/></svg>';case"arrows-resize-h":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 444 297.93"><path d="M264.08,25.3a13.11,13.11,0,0,0,0,18.55l.18.18,80,76.52H99.71l80-76.52a13.12,13.12,0,0,0,.37-18.55l-.18-.18L158.44,3.84a13.12,13.12,0,0,0-18.55,0L3.84,139.69a13.12,13.12,0,0,0,0,18.55L139.91,294.09a13.12,13.12,0,0,0,18.55,0l21.46-21.47a13.14,13.14,0,0,0,0-18.57l-.18-.17-80-76.51H344.29l-80,76.51a13.13,13.13,0,0,0-.36,18.57l.17.17,21.46,21.45a13.12,13.12,0,0,0,18.55,0L440.16,158.24a13.12,13.12,0,0,0,0-18.55L304.09,3.84a13.12,13.12,0,0,0-18.55,0Z"/></svg>';case"arrows-resize-v":return'<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="297.93" height="444" viewBox="0 0 297.93 444"><path d="M272.63,264.08a13.11,13.11,0,0,0-18.54,0h0l-.18.18-76.52,80V99.71l76.52,80a13.12,13.12,0,0,0,18.55.37l.18-.18,21.46-21.46a13.12,13.12,0,0,0,0-18.55L158.24,3.84a13.12,13.12,0,0,0-18.55,0L3.84,139.91a13.12,13.12,0,0,0,0,18.55l21.47,21.46a13.15,13.15,0,0,0,18.57,0l.17-.18,76.51-80V344.29l-76.51-80a13.12,13.12,0,0,0-18.56-.36h0l-.17.17L3.86,285.56a13.12,13.12,0,0,0,0,18.55L139.69,440.16a13.12,13.12,0,0,0,18.55,0L294.09,304.09a13.12,13.12,0,0,0,0-18.55Z"/></svg>';case"arrows-minimize":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M208 288h-160C39.16 288 32 295.2 32 304S39.16 320 48 320h121.4l-148.7 148.7c-6.25 6.25-6.25 16.38 0 22.62s16.38 6.25 22.62 0L192 342.6V464C192 472.8 199.2 480 208 480S224 472.8 224 464v-160C224 295.2 216.8 288 208 288zM304 224h160C472.8 224 480 216.8 480 208S472.8 192 464 192h-121.4l148.7-148.7c6.25-6.25 6.25-16.38 0-22.62s-16.38-6.25-22.62 0L320 169.4V48C320 39.16 312.8 32 304 32S288 39.16 288 48v160C288 216.8 295.2 224 304 224zM342.6 320H464c8.844 0 16-7.156 16-16S472.8 288 464 288h-160C295.2 288 288 295.2 288 304v160c0 8.844 7.156 16 16 16s16-7.156 16-16v-121.4l148.7 148.7c6.25 6.25 16.38 6.25 22.62 0s6.25-16.38 0-22.62L342.6 320zM208 32C199.2 32 192 39.16 192 48v121.4L43.31 20.69c-6.25-6.25-16.38-6.25-22.62 0s-6.25 16.38 0 22.62L169.4 192H48C39.16 192 32 199.2 32 208S39.16 224 48 224h160C216.8 224 224 216.8 224 208v-160C224 39.16 216.8 32 208 32z"/></svg>';case"arrows-maximize":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 176V86.63L246.6 256L416 425.4V336c0-8.844 7.156-16 16-16s16 7.156 16 16v128c0 8.844-7.156 16-16 16h-128c-8.844 0-16-7.156-16-16s7.156-16 16-16h89.38L224 278.6L54.63 448H144C152.8 448 160 455.2 160 464S152.8 480 144 480h-128C7.156 480 0 472.8 0 464v-128C0 327.2 7.156 320 16 320S32 327.2 32 336v89.38L201.4 256L32 86.63V176C32 184.8 24.84 192 16 192S0 184.8 0 176v-128C0 39.16 7.156 32 16 32h128C152.8 32 160 39.16 160 48S152.8 64 144 64H54.63L224 233.4L393.4 64H304C295.2 64 288 56.84 288 48S295.2 32 304 32h128C440.8 32 448 39.16 448 48v128C448 184.8 440.8 192 432 192S416 184.8 416 176z"/></svg>';case"rotate":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">\n          <polygon points="230.51 0.96 230 333.53 270 331.76 270.51 40.96 460.51 40.96 460.51 293.53 231.92 293.53 230 333.53 500.51 333.53 500.51 0.96 230.51 0.96"/>\n          <path d="M140.64,56c14.75-12.61,37.45-13.88,64-14a9.11,9.11,0,0,0,9.06-9.1V11.12A9.11,9.11,0,0,0,204.5,2c-32.18.16-64.63,2-89.86,23.62C99.87,38.27,89.31,56,82.36,80c-5.69,19.57-9,43.36-10,72.3a.41.41,0,0,1-.69.27L46.58,127.47a9.35,9.35,0,0,0-13.22,0l-15,15a9.41,9.41,0,0,0,0,13.3L92,229.46l73.67-73.67a9.39,9.39,0,0,0,0-13.3l-15-15a9.4,9.4,0,0,0-13.29,0L112.92,152a.31.31,0,0,1-.52-.24C114.36,102,123.64,70.57,140.64,56ZM92,172.89l-.22-.22h.44Z"/>\n          <rect x="292.35" y="458.95" width="40" height="40"/>\n          <path d="M273,499H234.3V459H273Zm-58.06,0h-38.7V459h38.7Zm-58.05,0h-38.7V459h38.7Zm-58,0H60.13V459H98.84Z"/><rect x="0.78" y="458.95" width="40" height="40"/>\n          <path d="M40.78,439.92H.78V401.87h40Zm0-57.08H.78v-38h40Zm0-57.07H.78V287.71h40Z"/><rect x="0.78" y="228.69" width="40" height="40"/><path d="M215,268.69H176.24v-40H215Zm-58.06,0h-38.7v-40h38.7Zm-58,0H60.13v-40H98.84Z"/>\n          <path d="M332.35,439.92h-40V401.87h40Zm0-57.08h-40v-38h40Z"/>\n        </svg>';case"primary":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">\n          <path d="M149.07,177.88q13.05-5.41,27.23-12.38T204,150.2q13.5-8.32,25.88-17.55a177.54,177.54,0,0,0,22.27-19.57h46.81V386.92H231.87V200.38a204.12,204.12,0,0,1-30.15,16.42q-16.65,7.42-32.4,12.82Z"/>\n          <path d="M438.68,40A21.34,21.34,0,0,1,460,61.32V438.68A21.34,21.34,0,0,1,438.68,460H61.32A21.34,21.34,0,0,1,40,438.68V61.32A21.34,21.34,0,0,1,61.32,40H438.68m0-40H61.32A61.32,61.32,0,0,0,0,61.32V438.68A61.32,61.32,0,0,0,61.32,500H438.68A61.32,61.32,0,0,0,500,438.68V61.32A61.32,61.32,0,0,0,438.68,0Z"/>\n        </svg>';case"back":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">\n          <path d="M460.83.76,199.94,0c-25.87.1-40.87,15.09-40.87,41V152.28l46.87.27V47H451.16l2,321.89a1.28,1.28,0,0,1-1.28,1.28H207.22a1.28,1.28,0,0,1-1.28-1.28v-101c-14.67-.11-30.9-.26-46.87-.47V374.85c0,26.59,15.56,42.15,42.15,42.15H457.85c26.59,0,42.15-15.56,42.15-42.15V40.05C500,15.08,485.8.83,460.83.76Z"/>\n          <path d="M350.94,77c-28.16,21.68-46.87,36.09-46.87,62V455.13q0,.81,0,1.62c.69,20.33,15,35.74,32.68,40.4a42.18,42.18,0,0,0,36.85-8.07L453.13,435C478.91,413.74,500,404,500,378.13V56.05c0-.62,0-1.24,0-1.86A41,41,0,0,0,486.19,25c-15.15-13.56-38-13.86-54.14-1.46Z"/>\n          <path d="M260.83,222V198.91a9.1,9.1,0,0,0-9-9.1L92.63,188.9s-.53-.44-.28-.69l25.09-25.08a9.36,9.36,0,0,0,0-13.23l-15-15a9.4,9.4,0,0,0-13.29,0L15.45,208.55l73.67,73.67a9.4,9.4,0,0,0,13.29,0l15-15a9.41,9.41,0,0,0,0-13.3L92.93,229.46s0-.52.23-.51c41.39,1.62,129.92,2.05,158.54,2.14A9.09,9.09,0,0,0,260.83,222ZM72,208.55l.22-.22v.44Z"/>\n        </svg>';case"angle-double-right":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">\n          <path d="M166.9 264.5l-117.8 116c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17L127.3 256 25.1 155.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0l117.8 116c4.6 4.7 4.6 12.3-.1 17zm128-17l-117.8-116c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17L255.3 256 153.1 356.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l117.8-116c4.6-4.7 4.6-12.3-.1-17z"></path>\n        </svg>';case"angle-double-left":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">\n          <path d="M153.1 247.5l117.8-116c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L192.7 256l102.2 100.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.7 4.7-12.3 4.7-17 0L153 264.5c-4.6-4.7-4.6-12.3.1-17zm-128 17l117.8 116c4.7 4.7 12.3 4.7 17 0l7.1-7.1c4.7-4.7 4.7-12.3 0-17L64.7 256l102.2-100.4c4.7-4.7 4.7-12.3 0-17l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L25 247.5c-4.6 4.7-4.6 12.3.1 17z"></path>\n        </svg>';case"arrow-to-right":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M215 99.5l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l116 115.4H12c-6.6 0-12 5.4-12 12v10c0 6.6 5.4 12 12 12h311.9L208 388.4c-4.7 4.7-4.7 12.3 0 17l7.1 7.1c4.7 4.7 12.3 4.7 17 0l148.5-148c4.7-4.7 4.7-12.3 0-17L232 99.5c-4.7-4.7-12.3-4.7-17 0zM448 76v360c0 6.6-5.4 12-12 12h-8c-6.6 0-12-5.4-12-12V76c0-6.6 5.4-12 12-12h8c6.6 0 12 5.4 12 12z"></path>\n        </svg>';case"arrow-to-left":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M216 412.5l-148.5-148c-4.7-4.7-4.7-12.3 0-17L216 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L124.1 239H436c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H124.1L240 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z"></path>\n        </svg>';case"distribute-image":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 185.48 136.9"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#b2b2b2;}</style></defs><g id="Layer_4" data-name="Layer 4"><rect class="cls-1" x="-5.37" y="28.13" width="131.9" height="99.99" transform="translate(130.62 7.87) rotate(90)"/><path class="cls-2" d="M113.08,146.58H8.09V9.68h105Zm-100-5h95V14.68h-95Z" transform="translate(-8.09 -9.68)"/></g><g id="Layer_1_copy_2" data-name="Layer 1 copy 2"><path class="cls-1" d="M188.59,57.46H158a5,5,0,0,0-5,5V93.06a5,5,0,0,0,5,5h30.62a5,5,0,0,0,5-5V62.44a5,5,0,0,0-5-5Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M188.59,61.46a1,1,0,0,1,1,1V93.06a1,1,0,0,1-1,1H158a1,1,0,0,1-1-1V62.44a1,1,0,0,1,1-1h30.62m0-4H158a5,5,0,0,0-5,5V93.06a5,5,0,0,0,5,5h30.62a5,5,0,0,0,5-5V62.44a5,5,0,0,0-5-5Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M166.55,67a4,4,0,0,0-.41,7.89h.2a4,4,0,0,0,3.95-4.15A4,4,0,0,0,166.55,67Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M179.55,67a4,4,0,0,0-.41,7.89h.2a4,4,0,0,0,2.8-1.16,3.92,3.92,0,0,0,1.15-3A4,4,0,0,0,179.55,67Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M173.39,88.89H173a13.33,13.33,0,0,1-11.29-7,2.5,2.5,0,1,1,4.4-2.38,8.31,8.31,0,0,0,7,4.42,8.75,8.75,0,0,0,6.74-3.24,2.5,2.5,0,1,1,3.94,3.08A13.74,13.74,0,0,1,173.39,88.89Z" transform="translate(-8.09 -9.68)"/></g><g id="Layer_1_copy_3" data-name="Layer 1 copy 3"><path class="cls-1" d="M188.59,102.46H158a5,5,0,0,0-5,5v30.62a5,5,0,0,0,5,5h30.62a5,5,0,0,0,5-5V107.44a5,5,0,0,0-5-5Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M188.59,106.46a1,1,0,0,1,1,1v30.62a1,1,0,0,1-1,1H158a1,1,0,0,1-1-1V107.44a1,1,0,0,1,1-1h30.62m0-4H158a5,5,0,0,0-5,5v30.62a5,5,0,0,0,5,5h30.62a5,5,0,0,0,5-5V107.44a5,5,0,0,0-5-5Z" transform="translate(-8.09 -9.68)"/><g id="Layer_1_copy_4" data-name="Layer 1 copy 4"><path class="cls-2" d="M179.06,122.67c-1.07-1.08-3.69-1.17-5.85-1.13h-.49c-2.26,0-4.54.13-5.43,1.34-1.66,2.25-1.53,11.8-1.51,12.88v.74h14.76l.06-.69C180.7,134.73,181.46,125.1,179.06,122.67Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M173,120.08h.28a5.6,5.6,0,1,0-.28,0Z" transform="translate(-8.09 -9.68)"/></g></g><g id="Layer_1_copy" data-name="Layer 1 copy"><rect class="cls-1" x="144.9" y="2.5" width="40.58" height="40.58" rx="4.98"/><path class="cls-2" d="M188.59,16.18a1,1,0,0,1,1,1V47.78a1,1,0,0,1-1,1H158a1,1,0,0,1-1-1V17.16a1,1,0,0,1,1-1h30.62m0-4H158a5,5,0,0,0-5,5V47.78a5,5,0,0,0,5,5h30.62a5,5,0,0,0,5-5V17.16a5,5,0,0,0-5-5Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M166.14,29.64h.2a3.95,3.95,0,0,0,.21-7.89,3.94,3.94,0,0,0-4.14,4.14A4,4,0,0,0,166.14,29.64Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M183.89,41,179,29.52a1.84,1.84,0,0,0-1.57-1.13h-.14a2,2,0,0,0-1.68,1l-4,6.73-2-3a1.75,1.75,0,0,0-.59-.56,1.92,1.92,0,0,0-2.75.85l-3.78,7.93a2.91,2.91,0,0,0-.29,1.26v.75h22v-.75A3.88,3.88,0,0,0,183.89,41Z" transform="translate(-8.09 -9.68)"/></g><g id="Layer_1_copy_5" data-name="Layer 1 copy 5"><rect class="cls-1" x="9.56" y="9.35" width="40.58" height="40.58" rx="4.98"/><path class="cls-2" d="M53.25,19H22.62a5,5,0,0,0-5,5V54.63a5,5,0,0,0,5,5H53.25a5,5,0,0,0,5-5V24A5,5,0,0,0,53.25,19Zm1,35.6a1,1,0,0,1-1,1H22.62a1,1,0,0,1-1-1V24a1,1,0,0,1,1-1H53.25a1,1,0,0,1,1,1Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M30.8,36.49H31a4,4,0,0,0,4-4.15,3.95,3.95,0,0,0-6.74-2.58,3.92,3.92,0,0,0-1.15,3A4,4,0,0,0,30.8,36.49Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M48.55,47.8,43.62,36.37A1.85,1.85,0,0,0,42,35.24H41.9a2,2,0,0,0-1.68,1L36.27,43l-2-3a1.88,1.88,0,0,0-.59-.57,2.18,2.18,0,0,0-.52-.21,1.93,1.93,0,0,0-2.22,1.07l-3.79,7.92a3.06,3.06,0,0,0-.28,1.27v.75h22v-.75A4,4,0,0,0,48.55,47.8Z" transform="translate(-8.09 -9.68)"/></g><g id="Layer_1_copy_7" data-name="Layer 1 copy 7"><path class="cls-1" d="M68.86,63.24H38.24a5,5,0,0,0-5,5V98.84a5,5,0,0,0,5,5H68.86a5,5,0,0,0,5-5V68.21a5,5,0,0,0-5-5Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M73.84,68.21a5,5,0,0,0-5-5H38.24a5,5,0,0,0-5,5V98.84a5,5,0,0,0,5,5H68.86a5,5,0,0,0,5-5Zm-5,31.61H38.24a1,1,0,0,1-1-1V68.21a1,1,0,0,1,1-1H68.86a1,1,0,0,1,1,1V98.84A1,1,0,0,1,68.86,99.82Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M46.82,72.82A3.94,3.94,0,0,0,42.68,77a4,4,0,0,0,3.73,3.74h.2a3.95,3.95,0,0,0,.21-7.89Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M59.82,72.82A3.94,3.94,0,0,0,55.68,77a4,4,0,0,0,3.73,3.74h.2a3.95,3.95,0,0,0,.21-7.89Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M53.66,94.67h-.38a13.33,13.33,0,0,1-11.29-7,2.5,2.5,0,0,1,4.4-2.37,8.34,8.34,0,0,0,7,4.42,8.76,8.76,0,0,0,6.74-3.24,2.5,2.5,0,1,1,3.94,3.07A13.7,13.7,0,0,1,53.66,94.67Z" transform="translate(-8.09 -9.68)"/></g><g id="Layer_1_copy_6" data-name="Layer 1 copy 6"><path class="cls-1" d="M86.38,92.12,57.08,101a5,5,0,0,0-3.31,6.21l8.91,29.3a5,5,0,0,0,6.22,3.31l29.29-8.92a5,5,0,0,0,3.32-6.21l-8.92-29.3a5,5,0,0,0-6.21-3.31Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M87.83,95.9a1,1,0,0,1,.93.7l8.92,29.3a1,1,0,0,1-.07.74,1,1,0,0,1-.58.47L67.73,136a.93.93,0,0,1-.29.05,1,1,0,0,1-.93-.7l-8.92-29.3a1,1,0,0,1,.08-.74.9.9,0,0,1,.57-.47L87.54,96a1,1,0,0,1,.29,0m0-4a4.86,4.86,0,0,0-1.45.22L57.08,101a5,5,0,0,0-3.31,6.21l8.91,29.3a5,5,0,0,0,6.22,3.31l29.29-8.92a5,5,0,0,0,3.32-6.21l-8.92-29.3a5,5,0,0,0-4.76-3.53Z" transform="translate(-8.09 -9.68)"/><g id="Layer_1_copy_6-2" data-name="Layer 1 copy 6"><path class="cls-2" d="M88.45,126.36c-.22-1.07-2.31-10.51-5.3-12.13-1.34-.72-3.87,0-5.93.62l-.47.15c-2.16.68-4.31,1.45-4.81,2.87-.93,2.64,2,11.73,2.31,12.76l.23.7L88.6,127Z" transform="translate(-8.09 -9.68)"/><path class="cls-2" d="M76.58,113.52a5.54,5.54,0,1,0-2.67-10.76h0a5.54,5.54,0,0,0,1.36,10.92A5.28,5.28,0,0,0,76.58,113.52Z" transform="translate(-8.09 -9.68)"/></g></g><g id="Layer_13" data-name="Layer 13"><path class="cls-2" d="M148.37,70c-9.29-5.14-21.1-6.86-34.13-5a84.07,84.07,0,0,0-27.33,9l.88-2.35a2.09,2.09,0,0,0-1.22-2.69h0a2.1,2.1,0,0,0-2.7,1.22l-3,8.14a1.1,1.1,0,0,0,.65,1.43l8.14,3a2.09,2.09,0,0,0,1.47-3.92L88.72,78a.06.06,0,0,1,0-.06,4.14,4.14,0,0,0,.3-.53c13.31-7.3,38.93-14.12,57.41-3.9a2,2,0,0,0,1.94-3.5Z" transform="translate(-8.09 -9.68)"/></g><g id="Layer_13_copy_2" data-name="Layer 13 copy 2"><path class="cls-2" d="M148.64,115.5c-9.12-2.64-17.72-1.38-26.46.34l1.4-2.19a2.08,2.08,0,0,0-.63-2.88h0a2.1,2.1,0,0,0-2.9.64l-4.69,7.31a1.12,1.12,0,0,0,.33,1.54l7.32,4.69a2.1,2.1,0,1,0,2.26-3.53l-2.11-1.35s0,0,0-.06l.3-.34c8.05-1.56,16-2.66,24.06-.32a2,2,0,0,0,1.11-3.84Z" transform="translate(-8.09 -9.68)"/></g><g id="Layer_13_copy" data-name="Layer 13 copy"><path class="cls-2" d="M148,30.38c-23.31-6.88-62.88-5.42-78.22.54h0l.91-2.44a2.08,2.08,0,0,0-1.22-2.69h0A2.1,2.1,0,0,0,66.74,27l-3,8.14a1.11,1.11,0,0,0,.65,1.43l8.14,3.05a2.11,2.11,0,0,0,2.7-1.23h0A2.11,2.11,0,0,0,74,35.7l-2.36-.88a.11.11,0,0,1,0-.06,2.69,2.69,0,0,0,.19-.32c15.13-5.57,52.71-6.82,75.05-.22A2,2,0,0,0,148,30.38Z" transform="translate(-8.09 -9.68)"/></g></svg>';case"minus-square":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M400 64c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h352m0-32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-60 242c6.6 0 12-5.4 12-12v-12c0-6.6-5.4-12-12-12H108c-6.6 0-12 5.4-12 12v12c0 6.6 5.4 12 12 12h232z"/>\n        </svg>';case"arrow-square-right":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\n          <path d="M236.5 132.5l115.1 115c4.7 4.7 4.7 12.3 0 17l-115.1 115c-4.7 4.7-12.3 4.7-17 0l-6.9-6.9c-4.7-4.7-4.7-12.5.2-17.1l85.6-82.5H108c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h190.3l-85.6-82.5c-4.8-4.7-4.9-12.4-.2-17.1l6.9-6.9c4.8-4.7 12.4-4.7 17.1 0zM48 32h352c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48zm0 32c-8.8 0-16 7.2-16 16v352c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H48z"/>\n        </svg>';case"bullseye-pointer-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">\n          <path d="M242.16 240.67L27.98 301.55c-15.17 4.31-16.95 25.1-2.73 31.92l68.47 32.89-89.17 89.17c-6.07 6.06-6.07 15.9 0 21.96l21.96 21.96c6.07 6.06 15.9 6.06 21.96 0l89.17-89.17 32.89 68.47c6.83 14.22 27.61 12.44 31.92-2.73l60.87-214.18c3.68-12.91-8.25-24.83-21.16-21.17zm40.91 68.76l-20.79 73.13C326.16 375.37 376 321.8 376 256c0-70.69-57.31-128-128-128-65.8 0-119.38 49.84-126.56 113.72l73.13-20.78C206.02 203.54 225.66 192 248 192c35.29 0 64 28.71 64 64 0 22.34-11.54 41.98-28.93 53.43zM248 8C111.03 8 0 119.03 0 256c0 8.39.44 16.67 1.26 24.85 5.22-4.39 11.05-8.11 17.98-10.08l44.87-12.75c-.01-.68-.1-1.33-.1-2.01 0-101.69 82.29-184 184-184 101.69 0 184 82.29 184 184 0 101.69-82.29 184-184 184-.68 0-1.34-.09-2.01-.1l-12.75 44.87c-1.97 6.94-5.69 12.77-10.06 17.98 8.17.81 16.45 1.25 24.83 1.25 136.97 0 248-111.03 248-248S384.97 8 248 8z"/>\n        </svg>';case"hand-pointer-light":return'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="-10 -10 470 530" style="enable-background:new 0 0 448 512;" xml:space="preserve">\n          <path d="M400,224c-9.1,0-17.6,2.7-24.9,7.1c-4.2-22.2-23.6-39.1-47.1-39.1c-17.4,0-32.5,9.3-40.9,23.2c-5-22.3-23.6-39.2-47.1-39.2  c-12.4,0-23.5,4.8-32,12.5V40c0-22.1-17.9-40-39.1-40c-23,0-40.9,17.9-40.9,40v322.7L72,288c-7.8-10.5-19.9-16-32-16  c-21.2,0-40,17.1-40,40c0,8.4,2.6,16.8,8,24l91.2,121.6C124.8,491.7,165.5,512,208,512h96c79.4,0,144-64.6,144-144v-96  C448,245.5,426.5,224,400,224z"/>\n        </svg>';case"eye-dropper":return'<svg   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="fa-group"><path class="fa-secondary" fill="#888" d="M328 312l-149.3 149.3C166.8 473.3 150.5 480 133.5 480H88L32 512l-32-32l32-56v-45.5c0-16.97 6.75-33.25 18.75-45.25L200 184l39.6 39.6l-149.3 149.3C88.86 374.3 88 376.4 88 378.5V424h45.5c2.1 0 4.16-.8555 5.652-2.348l149.3-149.3L328 312z"></path><path class="fa-primary" fill="currentColor" d="M483.9 163.8l-77.1 77.13l13.09 13.09c9.375 9.375 9.375 24.56 0 33.94l-40.97 40.97c-9.281 9.312-24.5 9.438-33.94 0L183 167c-9.375-9.375-9.375-24.59 0-33.94L224 92.13c9.281-9.312 24.5-9.469 33.94 0l13.09 13.09l77.13-77.1c37.47-37.5 98.25-37.5 135.7 0C521.4 65.62 521.4 126.3 483.9 163.8z"></path></g></svg>';case"eye-dropper-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M483.61 26.62c-35.51-35.65-92.84-35.33-128.04 0l-82.63 82.94-17-17.06c-9.37-9.41-24.57-9.41-33.95 0l-40.98 41.14c-9.37 9.41-9.38 24.67 0 34.08l16.98 17.05-147.3 149.84a64.38 64.38 0 0 0-18.76 45.44v33.74l-27 39.79c-7.98 12.7-6.13 29.25 4.44 39.86l9.11 9.14c10.57 10.61 27.06 12.46 39.71 4.46l39.65-27.1h33.62a63.91 63.91 0 0 0 45.27-18.82l149.31-147.85L343 330.31c9.38 9.41 24.58 9.41 33.95 0l40.98-41.14c9.38-9.41 9.37-24.67 0-34.08l-16.95-17.02 82.63-82.94c29.67-29.77 45.24-83.1 0-128.51zM154.09 440.41c-6.05 6.07-14.08 7.41-22.63 7.41H88.59l-47.47 32.05-9.11-9.14 31.94-47.65v-43.03c0-8.58 3.33-16.65 9.38-22.72l147.3-149.85 82.77 83.08-149.31 149.85zm306.89-307.99L355.71 238.07l33.93 34.06-29.67 29.78L209.3 150.67l29.67-29.77 33.97 34.1L378.21 49.34c22.82-22.91 59.95-22.91 82.77 0 39.39 39.53 6.91 76.14 0 83.08z"/>\n        </svg>';case"project-diagram-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M384 320H256c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V352c0-17.67-14.33-32-32-32zM192 32c0-17.67-14.33-32-32-32H32C14.33 0 0 14.33 0 32v128c0 17.67 14.33 32 32 32h95.72l73.16 128.04C211.98 300.98 232.4 288 256 288h.28L192 175.51V128h224V64H192V32zM608 0H480c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32V32c0-17.67-14.33-32-32-32z"></path></svg>';case"cloud-upload-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">\n          <path d="M312.5 168.5c-4.7-4.7-12.3-4.7-17 0l-98.3 98.3c-4.7 4.7-4.7 12.3 0 17l5.7 5.7c4.7 4.7 12.3 4.7 17 0l68.2-68.2V372c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V221.3l68.2 68.2c4.7 4.7 12.3 4.7 17 0l5.7-5.7c4.7-4.7 4.7-12.3 0-17l-98.5-98.3zm259.2 70.3c2.8-9.9 4.3-20.2 4.3-30.8 0-61.9-50.1-112-112-112-16.7 0-32.9 3.6-48 10.8-31.6-45-84.3-74.8-144-74.8-94.4 0-171.7 74.5-175.8 168.2C39.2 220.2 0 274.3 0 336c0 79.6 64.4 144 144 144h368c70.7 0 128-57.2 128-128 0-47-25.8-90.8-68.3-113.2zM512 448H144c-61.9 0-112-50.1-112-112 0-56.8 42.2-103.7 97-111-.7-5.6-1-11.3-1-17 0-79.5 64.5-144 144-144 60.3 0 111.9 37 133.4 89.6C420 137.9 440.8 128 464 128c44.2 0 80 35.8 80 80 0 18.5-6.3 35.6-16.9 49.2C573 264.4 608 304.1 608 352c0 53-43 96-96 96z"/>\n        </svg>';case"cloud-upload-check":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M299.3 363.3C293.1 369.6 282.9 369.6 276.7 363.3L212.7 299.3C206.4 293.1 206.4 282.9 212.7 276.7C218.9 270.4 229.1 270.4 235.3 276.7L288 329.4L404.7 212.7C410.9 206.4 421.1 206.4 427.3 212.7C433.6 218.9 433.6 229.1 427.3 235.3L299.3 363.3zM272 32C331.5 32 384.1 61.55 416 106.8C430.5 99.87 446.8 96 464 96C525.9 96 576 146.1 576 208C576 218.7 574.5 228.1 571.7 238.8C612.3 260.2 640 302.9 640 352C640 422.7 582.7 480 512 480H144C64.47 480 0 415.5 0 336C0 273.2 40.15 219.9 96.17 200.1C100.3 106.6 177.4 32 272 32zM272 64C194.6 64 131.5 125 128.1 201.5C127.6 214.6 119.1 225.1 106.8 230.3C63.18 245.7 32 287.2 32 336C32 397.9 82.14 448 144 448H512C565 448 608 405 608 352C608 315.2 587.3 283.2 556.8 267.1C543.4 259.1 536.8 244.5 540.9 229.1C542.9 223 544 215.7 544 208C544 163.8 508.2 128 464 128C451.7 128 440.1 130.8 429.7 135.7C415.7 142.4 398.8 137.9 389.8 125.2C363.7 88.12 320.7 64 272 64V64z"/></svg>';case"shopping-basket":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n          <path d="M576 216v16c0 13.255-10.745 24-24 24h-8l-26.113 182.788C514.509 462.435 494.257 480 470.37 480H105.63c-23.887 0-44.139-17.565-47.518-41.212L32 256h-8c-13.255 0-24-10.745-24-24v-16c0-13.255 10.745-24 24-24h67.341l106.78-146.821c10.395-14.292 30.407-17.453 44.701-7.058 14.293 10.395 17.453 30.408 7.058 44.701L170.477 192h235.046L326.12 82.821c-10.395-14.292-7.234-34.306 7.059-44.701 14.291-10.395 34.306-7.235 44.701 7.058L484.659 192H552c13.255 0 24 10.745 24 24zM312 392V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24zm112 0V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24zm-224 0V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24z"/>\n        </svg>';case"shopping-basket-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n          <path d="M564 192h-76.875L347.893 37.297c-5.91-6.568-16.027-7.101-22.596-1.189s-7.101 16.028-1.189 22.596L444.075 192h-312.15L251.893 58.703c5.912-6.567 5.379-16.685-1.189-22.596-6.569-5.912-16.686-5.38-22.596 1.189L88.875 192H12c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h16.444L58.25 438.603C61.546 462.334 81.836 480 105.794 480h364.412c23.958 0 44.248-17.666 47.544-41.397L547.556 224H564c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12zm-77.946 242.201c-1.093 7.867-7.906 13.799-15.848 13.799H105.794c-7.942 0-14.755-5.932-15.848-13.799L60.752 224h454.497l-29.195 210.201zM304 280v112c0 8.837-7.163 16-16 16-8.836 0-16-7.163-16-16V280c0-8.837 7.164-16 16-16 8.837 0 16 7.163 16 16zm112 0v112c0 8.837-7.163 16-16 16s-16-7.163-16-16V280c0-8.837 7.163-16 16-16s16 7.163 16 16zm-224 0v112c0 8.837-7.164 16-16 16s-16-7.163-16-16V280c0-8.837 7.164-16 16-16s16 7.163 16 16z"/>\n        </svg>';case"home-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n          <path d="M541 229.16l-61-49.83v-77.4a6 6 0 0 0-6-6h-20a6 6 0 0 0-6 6v51.33L308.19 39.14a32.16 32.16 0 0 0-40.38 0L35 229.16a8 8 0 0 0-1.16 11.24l10.1 12.41a8 8 0 0 0 11.2 1.19L96 220.62v243a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-128l64 .3V464a16 16 0 0 0 16 16l128-.33a16 16 0 0 0 16-16V220.62L520.86 254a8 8 0 0 0 11.25-1.16l10.1-12.41a8 8 0 0 0-1.21-11.27zm-93.11 218.59h.1l-96 .3V319.88a16.05 16.05 0 0 0-15.95-16l-96-.27a16 16 0 0 0-16.05 16v128.14H128V194.51L288 63.94l160 130.57z"/>\n        </svg>';case"home-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\n          <path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/>\n        </svg>';case"smile":return'<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 464c-119.1 0-216-96.9-216-216S128.9 40 248 40s216 96.9 216 216-96.9 216-216 216zm90.2-146.2C315.8 352.6 282.9 368 248 368s-67.8-15.4-90.2-42.2c-5.7-6.8-15.8-7.7-22.5-2-6.8 5.7-7.7 15.7-2 22.5C161.7 380.4 203.6 400 248 400s86.3-19.6 114.8-53.8c5.7-6.8 4.8-16.9-2-22.5-6.8-5.6-16.9-4.7-22.6 2.1zM168 240c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z"></path></svg>';case"code-curly":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path  d="M571.31 244.69l-45.25-45.25A48 48 0 0 1 512 165.49V80a48 48 0 0 0-48-48h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a16 16 0 0 1 16 16v85.48a80 80 0 0 0 23.44 56.58L537.38 256l-33.94 33.94A80 80 0 0 0 480 346.52V432a16 16 0 0 1-16 16h-72a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h72a48 48 0 0 0 48-48v-85.49a48 48 0 0 1 14.06-33.95l45.25-45.25a16 16 0 0 0 0-22.62zM184 32h-72a48 48 0 0 0-48 48v85.49a48 48 0 0 1-14.06 33.95L4.69 244.69a16 16 0 0 0 0 22.62l45.25 45.25A48 48 0 0 1 64 346.51V432a48 48 0 0 0 48 48h72a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8h-72a16 16 0 0 1-16-16v-85.48a80 80 0 0 0-23.44-56.58L38.62 256l33.94-33.94A80 80 0 0 0 96 165.48V80a16 16 0 0 1 16-16h72a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8z"></path></svg>';case"text-bottom":return'<svg xmlns="http://www.w3.org/2000/svg" id="Layer_3" data-name="Layer 3" viewBox="0 0 448 512"><path d="M0,240a16,16,0,0,1,16-16H432a16,16,0,0,1,0,32H16A16,16,0,0,1,0,240ZM432,352a16,16,0,0,1,0,32H16a16,16,0,0,1,0-32Zm0,128a16,16,0,0,1,0,32H16a16,16,0,0,1,0-32Z"/></svg>';case"text-center":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><g id="Layer_2" data-name="Layer 2"><path d="M432,112a16,16,0,0,1,0,32H16a16,16,0,0,1,0-32ZM0,256a16,16,0,0,1,16-16H432a16,16,0,0,1,0,32H16A16,16,0,0,1,0,256ZM432,368a16,16,0,0,1,0,32H16a16,16,0,0,1,0-32Z"/></g></svg>';case"text-top":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><g id="Layer_1" data-name="Layer 1"><path d="M432,0a16,16,0,0,1,0,32H16A16,16,0,0,1,16,0ZM0,144a16,16,0,0,1,16-16H432a16,16,0,0,1,0,32H16A16,16,0,0,1,0,144ZM432,256a16,16,0,0,1,0,32H16a16,16,0,0,1,0-32Z"/></g></svg>';case"handwriting":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">\n          <path class="cls-1" d="M255.42,354.94l39.91,26.58a32.92,32.92,0,0,0,18.22,5.5h37a74,74,0,0,0,59.95-30.49l2.32-5.73.91-141.8-112.3-44.75-70.78,98.51,17.65-.21c4.84-.05,8.82,5.77,8.91,10.55V276c.1,4.91-5.84,10.94-10.81,10.94H181.51a34.53,34.53,0,0,0-34.73,34.32h0a33,33,0,0,0,32.82,32.8Z"/><path class="cls-1" d="M303.76,113.4l9.6-13.25a17.72,17.72,0,0,0-3.9-24.71l-37-27.07a17.73,17.73,0,0,0-24.81,3.91L237.52,66.2Z"/><path class="cls-1" d="M220.72,89.8,52.81,321.11l-16.39,89.5,82.06-41.52,12-13.61c-5.77-7.08-12-18.36-12-32.52,0-29.77,16.73-59.49,57-60H199L288,137Z"/><path class="cls-1" d="M16.54,274.48,18.63,276c14.33,10.52,29.48,5.42,40-8.91L170.7,114.19a1.42,1.42,0,0,0-.31-2h0c-29.58-21.7-72.59-5-94.3,24.54L9.44,228.26A33.06,33.06,0,0,0,16.54,274.48Z"/><path class="cls-1" d="M186.85,377.81h61.86a0,0,0,0,1,0,0V379a30.93,30.93,0,0,1-30.93,30.93h0A30.93,30.93,0,0,1,186.85,379v-1.15A0,0,0,0,1,186.85,377.81Z"/><path class="cls-1" d="M141.37,408.88h0c-10.63,0-21.65-9.1-23.23-13.46a12.43,12.43,0,0,1-.34-1.46.07.07,0,0,1,0-.08l16.15-8,10.06-14s3.15,2.85,11.64,3.95,16.61,2,16.61,2v6.67C172.3,397.94,158.45,408.88,141.37,408.88Z"/></g>\n        </svg>';case"pen-swirl":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M386.7 23.11C411.6-2.142 452.4-2.267 477.5 22.83L489.4 34.75C514.4 59.74 514.4 100.3 489.4 125.3L296.9 317.8C288.1 326.6 276.9 332.7 264.8 335.2L179.3 353.2C173.1 354.3 168.5 352.6 164.7 348.8C160.9 344.1 159.2 339.5 160.3 334.2L178.3 248.6C180.8 236.5 186.8 225.5 195.4 216.7L386.7 23.11zM454.8 45.46C442.3 32.91 421.9 32.97 409.4 45.6L382.1 72.37L440 129.4L466.8 102.6C479.3 90.13 479.2 69.87 466.8 57.38L454.8 45.46zM209.6 255.1L196.7 316.8L258.2 303.9C264.3 302.6 269.9 299.6 274.3 295.2L417.4 152L360.5 95.14L218.2 239.2C213.9 243.6 210.9 249.1 209.6 255.1L209.6 255.1zM301.1 52.89C286.5 49.69 271.5 48 256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C264.8 464 272 471.2 272 480C272 488.8 264.8 496 256 496C123.5 496 16 388.5 16 256C16 123.5 123.5 16 256 16C280.7 16 304.5 19.73 326.1 26.67L301.1 52.89zM496 256C496 335.5 431.5 400 352 400C339.6 400 327.5 398.4 316 395.5C307.5 393.3 302.3 384.5 304.5 375.1C306.7 367.4 315.4 362.3 323.1 364.5C332.9 366.8 342.3 368 352 368C413.9 368 464 317.9 464 256C464 240.9 462.4 226.1 459.3 211.9L485.5 185.7C492.3 207.9 496 231.5 496 256V256z"/></svg>';case"shirt":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M639.7 157.6c-1.406-12.7-7.718-24.06-17.81-32.02L486.9 19C471.3 6.75 451.8 0 431.1 0H208c-19.84 0-39.34 6.75-54.87 19L18.11 125.6C8.013 133.5 1.701 144.9 .2948 157.6c-1.406 12.64 2.25 25.06 10.28 34.98l49.97 61.61c16.53 20.44 46.78 23.7 67.31 7.438l32.15-25.38V448c0 35.3 12.72 64 47.1 64h207.1c35.28 0 63.1-28.7 63.1-64V236.3l32.15 25.36c20.56 16.33 50.81 13.02 67.31-7.406l49.97-61.63C637.5 182.7 641.1 170.3 639.7 157.6zM381.7 32C374.6 59.53 349.7 80 320 80S265.4 59.53 258.3 32H381.7zM604.6 172.4l-49.97 61.64c-5.531 6.875-15.75 7.891-22.62 2.438l-83.97-66.25V448c0 17.64-14.34 32-31.1 32H208c-17.66 0-15.1-14.36-15.1-32V170.3L108 236.5c-6.937 5.5-17.09 4.359-22.62-2.469l-49.97-61.63C32.82 169.2 31.64 165.2 32.11 161.1c.4687-4.109 2.531-7.828 5.812-10.42l135-106.6C182.8 36.31 195.3 32 208 32h17.62C233.3 77.31 272.5 112 320 112s86.71-34.69 94.38-80h17.59c12.72 0 25.19 4.312 35.09 12.12l135 106.6c3.281 2.609 5.344 6.328 5.812 10.44C608.4 165.2 607.2 169.2 604.6 172.4z"/></svg>';case"focus-face":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.24 510.24"><g id="Layer_5" data-name="Layer 5"><path d="M31.89,479.23V335.72a15.95,15.95,0,0,0-31.89,0V495.17a16,16,0,0,0,15.94,15.95H175.39a15.95,15.95,0,1,0,0-31.89H31.89Z" transform="translate(0 -0.88)"/><path d="M494.29,192.22a16,16,0,0,0,15.95-15.94V16.83A16,16,0,0,0,494.29.88H334.84a15.95,15.95,0,0,0,0,31.89H478.35V176.28A16,16,0,0,0,494.29,192.22Z" transform="translate(0 -0.88)"/><path d="M478.35,479.23H334.84a15.95,15.95,0,0,0,0,31.89H494.29a16,16,0,0,0,15.95-15.95V335.72a15.95,15.95,0,0,0-31.89,0V479.23Z" transform="translate(0 -0.88)"/><path d="M191.34,16.83a16,16,0,0,0-16-15.95H15.94A16,16,0,0,0,0,16.83V176.28a15.95,15.95,0,0,0,31.89,0V32.77h143.5A16,16,0,0,0,191.34,16.83Z" transform="translate(0 -0.88)"/></g><g id="Layer_6" data-name="Layer 6"><circle cx="319.54" cy="216.66" r="23.23"/><circle cx="191.34" cy="216.66" r="23.23"/><path d="M349.48,307.38A16.82,16.82,0,0,0,325.79,309c-19.73,21.73-43.51,32.74-70.67,32.74-36.86,0-60.06-20.47-70.61-32.67a16.84,16.84,0,1,0-25.44,22.07c14.4,16.52,46,44.24,96.05,44.24s81.65-27.72,96.05-44.25a16.82,16.82,0,0,0-1.69-23.75Z" transform="translate(0 -0.88)"/><path d="M403,108.12A209.13,209.13,0,0,0,107.24,403.88,209.13,209.13,0,0,0,403,108.12ZM255.12,431.48c-96.76,0-175.49-78.72-175.49-175.48S158.36,80.52,255.12,80.52,430.6,159.24,430.6,256,351.88,431.48,255.12,431.48Z" transform="translate(0 -0.88)"/></g></svg>';case"focus-group":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.24 510.24"><g id="Layer_5" data-name="Layer 5"><path d="M31.89,479.23V335.72a15.95,15.95,0,0,0-31.89,0V495.17a16,16,0,0,0,15.94,15.95H175.39a15.95,15.95,0,1,0,0-31.89H31.89Z" transform="translate(0 -0.88)"/><path d="M494.29,192.22a16,16,0,0,0,15.95-15.94V16.83A16,16,0,0,0,494.29.88H334.84a15.95,15.95,0,0,0,0,31.89H478.35V176.28A16,16,0,0,0,494.29,192.22Z" transform="translate(0 -0.88)"/><path d="M478.35,479.23H334.84a15.95,15.95,0,0,0,0,31.89H494.29a16,16,0,0,0,15.95-15.95V335.72a15.95,15.95,0,0,0-31.89,0V479.23Z" transform="translate(0 -0.88)"/><path d="M191.34,16.83a16,16,0,0,0-16-15.95H15.94A16,16,0,0,0,0,16.83V176.28a15.95,15.95,0,0,0,31.89,0V32.77h143.5A16,16,0,0,0,191.34,16.83Z" transform="translate(0 -0.88)"/></g><g id="Layer_7" data-name="Layer 7"><path d="M197.34,253.57A83.54,83.54,0,1,0,113.8,170,83.63,83.63,0,0,0,197.34,253.57ZM146.06,170a51.28,51.28,0,1,1,51.28,51.27A51.33,51.33,0,0,1,146.06,170Z" transform="translate(0 -0.88)"/><path d="M322.53,221.31a41.57,41.57,0,0,1-20.8-5.55,16.11,16.11,0,0,0-22,5.86,16.44,16.44,0,0,0,5.06,21.88l.4.24a77.87,77.87,0,0,0,37.38,9.83A73.91,73.91,0,1,0,297.88,110a16.13,16.13,0,0,0,10.77,30.4,41.65,41.65,0,1,1,13.88,80.93Z" transform="translate(0 -0.88)"/><path d="M227.85,269.46h-61A110.93,110.93,0,0,0,56,380.26a27.41,27.41,0,0,0,27.36,27.39H311.27a27.42,27.42,0,0,0,27.39-27.39A110.93,110.93,0,0,0,227.85,269.46Zm78.4,105.93H88.43a78.65,78.65,0,0,1,78.4-73.67h61A78.65,78.65,0,0,1,306.25,375.39Z" transform="translate(0 -0.88)"/><path d="M426,307.14a95.84,95.84,0,0,0-68.09-28.05h-25.7a16.13,16.13,0,0,0,0,32.26h25.68a64.26,64.26,0,0,1,64.17,64h-61a16.13,16.13,0,1,0,0,32.26h61a32.23,32.23,0,0,0,32.2-32.2A95.72,95.72,0,0,0,426,307.14Z" transform="translate(0 -0.88)"/></g></svg>';case"mug":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M464 64H64C46.33 64 32 78.33 32 96v256c0 53.02 42.98 96 96 96h192c53.02 0 96-42.98 96-96V288h48C525.8 288 576 237.8 576 176S525.8 64 464 64zM384 352c0 35.29-28.71 64-64 64H128c-35.29 0-64-28.71-64-64V96h320V352zM464 256H416V96h48C508.1 96 544 131.9 544 176S508.1 256 464 256z"/></svg>';case"burger-menu":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 80C0 71.16 7.164 64 16 64H432C440.8 64 448 71.16 448 80C448 88.84 440.8 96 432 96H16C7.164 96 0 88.84 0 80zM0 240C0 231.2 7.164 224 16 224H432C440.8 224 448 231.2 448 240C448 248.8 440.8 256 432 256H16C7.164 256 0 248.8 0 240zM432 416H16C7.164 416 0 408.8 0 400C0 391.2 7.164 384 16 384H432C440.8 384 448 391.2 448 400C448 408.8 440.8 416 432 416z"/></svg>';case"flower":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M461.5 256C492.3 229.2 512 190.2 512 146.2C512 65.5 446.5 0 365.8 0c-44 0-83 19.75-109.8 50.5C229.2 19.75 190.2 0 146.2 0C65.5 0 0 65.5 0 146.2C0 190.2 19.75 229.2 50.5 256C19.75 282.8 0 321.8 0 365.8C0 446.5 65.5 512 146.2 512c44 0 82.1-19.75 109.8-50.5C282.8 492.2 321.8 512 365.8 512C446.5 512 512 446.5 512 365.8C512 321.8 492.3 282.8 461.5 256zM365.8 480c-33 0-63.38-13.1-85.63-39.5L256 412.9L231.9 440.5C209.6 466 179.2 480 146.2 480C83.25 480 32 428.8 32 365.8c0-33 13.1-63.38 39.5-85.63L99.12 256L71.5 231.9C45.1 209.6 32 179.2 32 146.2C32 83.25 83.25 32 146.2 32c33 0 63.37 14 85.63 39.5L256 99.12l24.12-27.62C302.4 46 332.8 32 365.8 32C428.8 32 480 83.25 480 146.2c0 33-14 63.38-39.5 85.63L412.9 256l27.62 24.12C465.1 302.4 480 332.8 480 365.8C480 428.8 428.8 480 365.8 480zM256 160C203.1 160 160 203.1 160 256s43.12 96 96 96s96-43.13 96-96S308.9 160 256 160zM256 320c-35.25 0-64-28.75-64-64s28.75-64 64-64s64 28.75 64 64S291.2 320 256 320z"/></svg>';case"path-non-zero":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g><rect width="341.47" height="341.47"/><rect x="158.53" y="158.53" width="341.47" height="341.47"/></g></svg>';case"path-even-odd":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g><polygon  points="341.47 158.53 341.47 0 0 0 0 341.47 158.53 341.47 158.53 158.53 341.47 158.53"/><polygon  points="341.47 158.53 341.47 341.47 158.53 341.47 158.53 500 500 500 500 158.53 341.47 158.53"/></g></svg>';case"grid-lines":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M432 208H16C7.164 208 0 200.8 0 192C0 183.2 7.164 176 16 176H432C440.8 176 448 183.2 448 192C448 200.8 440.8 208 432 208zM432 336H16C7.164 336 0 328.8 0 320C0 311.2 7.164 304 16 304H432C440.8 304 448 311.2 448 320C448 328.8 440.8 336 432 336z"/></svg>';case"camera-slash":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">\x3c!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M633.9 483.4C640.9 488.9 642 498.1 636.6 505.9C631.1 512.9 621 514 614.1 508.6L6.086 28.56C-.8493 23.08-2.033 13.02 3.443 6.086C8.918-.8493 18.98-2.033 25.91 3.443L633.9 483.4zM459.9 448L500.4 480H128C92.65 480 64 451.3 64 416V160C64 152.4 65.32 145.1 67.74 138.4L96 160.7V416C96 433.7 110.3 448 128 448L459.9 448zM258.6 32H381.4C402.1 32 420.4 45.22 426.9 64.82L437.3 96H512C547.3 96 576 124.7 576 160V376.6L544 351.3V160C544 142.3 529.7 128 512 128H414.3L396.6 74.94C394.4 68.41 388.3 64 381.4 64H258.6C251.7 64 245.6 68.41 243.4 74.94L233.1 105.9L206.4 84.78L213.1 64.82C219.6 45.22 237.9 32 258.6 32H258.6zM208 288C208 275.9 209.9 264.3 213.4 253.4L241 275.2C240.3 279.4 240 283.6 240 288C240 332.2 275.8 368 320 368C330.9 368 341.3 365.8 350.8 361.9L378.4 383.6C361.4 394 341.4 400 320 400C258.1 400 208 349.9 208 288V288zM428.5 260.1L321.1 176C373.3 176.9 416.3 212.4 428.5 260.1z"/></svg>';case"scissors":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M485.6 444.2L333.6 314.9C326.9 309.2 326.1 299.1 331.8 292.4C337.5 285.6 347.6 284.8 354.4 290.5L506.4 419.8C513.1 425.5 513.9 435.6 508.2 442.4C502.5 449.1 492.4 449.9 485.6 444.2zM485.7 67.76C492.5 62.07 502.5 62.94 508.2 69.69C513.9 76.45 513.1 86.55 506.3 92.24L208.5 343.1C218.3 359.7 224 379.2 224 400C224 461.9 173.9 512 112 512C50.14 512 0 461.9 0 400C0 338.1 50.14 288 112 288C141.5 288 168.4 299.4 188.4 318.1L262.2 256L188.4 193.9C168.4 212.6 141.5 224 112 224C50.14 224 0 173.9 0 112C0 50.14 50.14 0 112 0C173.9 0 224 50.14 224 112C224 132.8 218.3 152.3 208.5 168.9L287 235.1L485.7 67.76zM32 112C32 156.2 67.82 192 112 192C156.2 192 192 156.2 192 112C192 67.82 156.2 32 112 32C67.82 32 32 67.82 32 112zM112 480C156.2 480 192 444.2 192 400C192 355.8 156.2 320 112 320C67.82 320 32 355.8 32 400C32 444.2 67.82 480 112 480z"/></svg>';case"record-up":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M304 336h192c8.844 0 16-7.156 16-16s-7.156-16-16-16h-192c-8.844 0-15.1 7.156-15.1 16S295.2 336 304 336zM304 208h128C440.8 208 448 200.8 448 192s-7.156-16-16-16h-128c-8.844 0-15.1 7.156-15.1 16S295.2 208 304 208zM304 80h64c8.844 0 16-7.156 16-16S376.8 48 368 48h-64c-8.844 0-15.1 7.156-15.1 16S295.2 80 304 80zM560 432h-256c-8.844 0-15.1 7.156-15.1 16S295.2 464 304 464h256c8.844 0 16-7.156 16-16S568.8 432 560 432zM139.3 36.69c-6.25-6.25-16.38-6.25-22.62 0l-96 96c-6.25 6.25-6.25 16.38 0 22.62s16.38 6.25 22.62 0L112 86.63V464c0 8.844 7.157 16 16 16S144 472.8 144 464V86.63l68.69 68.69C215.8 158.4 219.9 160 224 160s8.188-1.562 11.31-4.688c6.25-6.25 6.25-16.38 0-22.62L139.3 36.69z"/></svg>';case"record-down":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M304 208h128C440.8 208 448 200.8 448 192s-7.156-16-16-16h-128c-8.844 0-15.1 7.156-15.1 16S295.2 208 304 208zM304 336h192c8.844 0 16-7.156 16-16s-7.156-16-16-16h-192c-8.844 0-15.1 7.156-15.1 16S295.2 336 304 336zM304 80h64c8.844 0 16-7.156 16-16S376.8 48 368 48h-64c-8.844 0-15.1 7.156-15.1 16S295.2 80 304 80zM560 432h-256c-8.844 0-15.1 7.156-15.1 16S295.2 464 304 464h256c8.844 0 16-7.156 16-16S568.8 432 560 432zM224 352c-4.094 0-8.188 1.562-11.31 4.688L144 425.4V48C144 39.16 136.8 32 128 32S112 39.16 112 48v377.4l-68.69-68.69c-6.25-6.25-16.38-6.25-22.62 0s-6.25 16.38 0 22.62l96 96c6.25 6.25 16.38 6.25 22.62 0l96-96c6.25-6.25 6.25-16.38 0-22.62C232.2 353.6 228.1 352 224 352z"/></svg>';case"arrow-left-circle":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M376 248H155.3l106.3-106.3c3.125-3.125 3.125-8.188 0-11.31s-8.188-3.125-11.31 0l-120 120c-3.125 3.125-3.125 8.188 0 11.31l120 120C251.9 383.2 253.9 384 256 384s4.094-.7813 5.656-2.344c3.125-3.125 3.125-8.188 0-11.31L155.3 264H376C380.4 264 384 260.4 384 256S380.4 248 376 248zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 496c-132.3 0-240-107.7-240-240S123.7 16 256 16s240 107.7 240 240S388.3 496 256 496z"/></svg>';case"arrow-right-circle":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M261.7 130.3C260.1 128.8 258.1 128 256 128S251.9 128.8 250.3 130.3c-3.125 3.125-3.125 8.188 0 11.31L356.7 248H136C131.6 248 128 251.6 128 256s3.594 8 8 8h220.7l-106.3 106.3c-3.125 3.125-3.125 8.188 0 11.31s8.188 3.125 11.31 0l120-120c3.125-3.125 3.125-8.188 0-11.31L261.7 130.3zM256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 496c-132.3 0-240-107.7-240-240S123.7 16 256 16s240 107.7 240 240S388.3 496 256 496z"/></svg>';case"grid-4":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M88 32C110.1 32 128 49.91 128 72V120C128 142.1 110.1 160 88 160H40C17.91 160 0 142.1 0 120V72C0 49.91 17.91 32 40 32H88zM88 64H40C35.58 64 32 67.58 32 72V120C32 124.4 35.58 128 40 128H88C92.42 128 96 124.4 96 120V72C96 67.58 92.42 64 88 64zM88 192C110.1 192 128 209.9 128 232V280C128 302.1 110.1 320 88 320H40C17.91 320 0 302.1 0 280V232C0 209.9 17.91 192 40 192H88zM88 224H40C35.58 224 32 227.6 32 232V280C32 284.4 35.58 288 40 288H88C92.42 288 96 284.4 96 280V232C96 227.6 92.42 224 88 224zM0 392C0 369.9 17.91 352 40 352H88C110.1 352 128 369.9 128 392V440C128 462.1 110.1 480 88 480H40C17.91 480 0 462.1 0 440V392zM32 392V440C32 444.4 35.58 448 40 448H88C92.42 448 96 444.4 96 440V392C96 387.6 92.42 384 88 384H40C35.58 384 32 387.6 32 392zM248 32C270.1 32 288 49.91 288 72V120C288 142.1 270.1 160 248 160H200C177.9 160 160 142.1 160 120V72C160 49.91 177.9 32 200 32H248zM248 64H200C195.6 64 192 67.58 192 72V120C192 124.4 195.6 128 200 128H248C252.4 128 256 124.4 256 120V72C256 67.58 252.4 64 248 64zM160 232C160 209.9 177.9 192 200 192H248C270.1 192 288 209.9 288 232V280C288 302.1 270.1 320 248 320H200C177.9 320 160 302.1 160 280V232zM192 232V280C192 284.4 195.6 288 200 288H248C252.4 288 256 284.4 256 280V232C256 227.6 252.4 224 248 224H200C195.6 224 192 227.6 192 232zM248 352C270.1 352 288 369.9 288 392V440C288 462.1 270.1 480 248 480H200C177.9 480 160 462.1 160 440V392C160 369.9 177.9 352 200 352H248zM248 384H200C195.6 384 192 387.6 192 392V440C192 444.4 195.6 448 200 448H248C252.4 448 256 444.4 256 440V392C256 387.6 252.4 384 248 384zM320 72C320 49.91 337.9 32 360 32H408C430.1 32 448 49.91 448 72V120C448 142.1 430.1 160 408 160H360C337.9 160 320 142.1 320 120V72zM352 72V120C352 124.4 355.6 128 360 128H408C412.4 128 416 124.4 416 120V72C416 67.58 412.4 64 408 64H360C355.6 64 352 67.58 352 72zM408 192C430.1 192 448 209.9 448 232V280C448 302.1 430.1 320 408 320H360C337.9 320 320 302.1 320 280V232C320 209.9 337.9 192 360 192H408zM408 224H360C355.6 224 352 227.6 352 232V280C352 284.4 355.6 288 360 288H408C412.4 288 416 284.4 416 280V232C416 227.6 412.4 224 408 224zM320 392C320 369.9 337.9 352 360 352H408C430.1 352 448 369.9 448 392V440C448 462.1 430.1 480 408 480H360C337.9 480 320 462.1 320 440V392zM352 392V440C352 444.4 355.6 448 360 448H408C412.4 448 416 444.4 416 440V392C416 387.6 412.4 384 408 384H360C355.6 384 352 387.6 352 392z"/></svg>';case"image-to-text":return'<svg id="Layer_3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1022.03 500"><g id="Layer_51"><path class="cls-1" d="M396.68,40c11.77,.01,21.31,9.55,21.32,21.32V438.68c-.01,11.77-9.55,21.31-21.32,21.32H61.32c-11.77-.01-21.31-9.55-21.32-21.32V61.32c.01-11.77,9.55-21.31,21.32-21.32H396.68M396.68,0H61.32C27.45,0,0,27.45,0,61.32H0V438.68C0,472.55,27.45,500,61.32,500H396.68c33.87,0,61.32-27.45,61.32-61.32h0V61.32C458,27.45,430.55,0,396.68,0h0Z"/><g id="Layer_1_copy_4"><path class="cls-1" d="M293.78,250.13c-12.39-12.5-42.72-13.55-67.73-13.08h-5.67c-26.17,0-52.56,1.51-62.87,15.51-19.22,26.05-17.71,136.62-17.48,149.12v8.57h170.89l.69-7.99c1.16-12.5,9.96-124-17.83-152.13Z"/><path class="cls-1" d="M223.62,220.15h3.24c35.8-.9,64.09-30.64,63.19-66.44-.9-35.8-30.64-64.09-66.44-63.19-35.8,.9-64.09,30.64-63.19,66.44,.86,34.54,28.66,62.33,63.19,63.19Z"/></g></g><path class="cls-1" d="M1022.03,20.98l-.13,55.2c-.01,5.54-4.51,10.02-10.05,10.01,0,0,0,0-.01,0l-20.17-.09c-5.54-.01-10.02-4.51-10.01-10.05,0,0,0,0,0-.01l.09-35.13-126.49-.15-.49,418.65,50.85,.07c5.54,.01,10.02,4.51,10.01,10.05,0,0,0,0,0,.01l-.06,20.14c-.01,5.54-4.51,10.02-10.05,10.01,0,0,0,0-.01,0l-141.85-.24c-5.54-.01-10.02-4.51-10.01-10.05,0,0,0,0,0-.01l.05-20.08c.02-5.54,4.52-10.02,10.06-10.01l50.85,.07,.5-418.72-126.49-.19-.11,35.14c-.01,5.54-4.51,10.03-10.05,10.02l-20.08-.05c-5.54-.02-10.02-4.52-10.01-10.07l.14-55.19c.02-11.09,9.03-20.06,20.12-20.03,0,0,0,0,0,0l333.29,.56c11.08-.02,20.08,8.95,20.1,20.03,0,.03,0,.06,0,.1Z"/><path class="cls-1" d="M535.5,146.63l1.32,201.72,207.1-100.1v-.11l-208.42-101.51Z"/></svg>';case"text-to-image":return'<svg id="Layer_3_copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1022.03 500"><g id="Layer_51"><path class="cls-1" d="M960.71,40c11.77,.01,21.31,9.55,21.32,21.32V438.68c-.01,11.77-9.55,21.31-21.32,21.32h-335.36c-11.77-.01-21.31-9.55-21.32-21.32V61.32c.01-11.77,9.55-21.31,21.32-21.32h335.36M960.71,0h-335.36C591.48,0,564.03,27.45,564.03,61.32h0V438.68c0,33.87,27.45,61.32,61.32,61.32h335.36c33.87,0,61.32-27.45,61.32-61.32h0V61.32C1022.03,27.45,994.58,0,960.71,0h0Z"/><g id="Layer_1_copy_4"><path class="cls-1" d="M857.81,250.13c-12.39-12.5-42.72-13.55-67.73-13.08h-5.67c-26.17,0-52.56,1.51-62.87,15.51-19.22,26.05-17.71,136.62-17.48,149.12v8.57h170.89l.69-7.99c1.16-12.5,9.96-124-17.83-152.13Z"/><path class="cls-1" d="M787.65,220.15h3.24c35.8-.9,64.09-30.64,63.19-66.44-.9-35.8-30.64-64.09-66.44-63.19-35.8,.9-64.09,30.64-63.19,66.44,.86,34.54,28.66,62.33,63.19,63.19Z"/></g></g><path class="cls-1" d="M373.66,20.98l-.13,55.2c-.01,5.54-4.51,10.02-10.05,10.01,0,0,0,0-.01,0l-20.17-.09c-5.54-.01-10.02-4.51-10.01-10.05,0,0,0,0,0-.01l.09-35.13-126.49-.15-.49,418.65,50.85,.07c5.54,.01,10.02,4.51,10.01,10.05,0,0,0,0,0,.01l-.06,20.14c-.01,5.54-4.51,10.02-10.05,10.01,0,0,0,0-.01,0l-141.85-.24c-5.54-.01-10.02-4.51-10.01-10.05,0,0,0,0,0-.01l.05-20.08c.02-5.54,4.52-10.02,10.06-10.01l50.85,.07,.5-418.72-126.49-.19-.11,35.14c-.01,5.54-4.51,10.03-10.05,10.02l-20.08-.05C4.47,85.57-.01,81.07,0,75.52L.14,20.33C.17,9.24,9.17,.27,20.26,.3c0,0,0,0,0,0L353.56,.86c11.08-.02,20.08,8.95,20.1,20.03,0,.03,0,.06,0,.1Z"/><path class="cls-1" d="M285,149.14l1.32,201.72,207.1-100.1v-.11l-208.42-101.51Z"/></svg>';case"handwriting-to-text":return'<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1022.03 500"><path class="cls-1" d="M1022.03,20.98l-.13,55.2c-.01,5.54-4.51,10.02-10.05,10.01,0,0,0,0-.01,0l-20.17-.09c-5.54-.01-10.02-4.51-10.01-10.05,0,0,0,0,0-.01l.09-35.13-126.49-.15-.49,418.65,50.85,.07c5.54,.01,10.02,4.51,10.01,10.05,0,0,0,0,0,.01l-.06,20.14c-.01,5.54-4.51,10.02-10.05,10.01,0,0,0,0-.01,0l-141.85-.24c-5.54-.01-10.02-4.51-10.01-10.05,0,0,0,0,0-.01l.05-20.08c.02-5.54,4.52-10.02,10.06-10.01l50.85,.07,.5-418.72-126.49-.19-.11,35.14c-.01,5.54-4.51,10.03-10.05,10.02l-20.08-.05c-5.54-.02-10.02-4.52-10.01-10.07l.14-55.19c.02-11.09,9.03-20.06,20.12-20.03,0,0,0,0,0,0l333.29,.56c11.08-.02,20.08,8.95,20.1,20.03,0,.03,0,.06,0,.1Z"/><path class="cls-1" d="M396.68,0H61.32C27.45,0,0,27.45,0,61.32V438.68c0,33.87,27.45,61.32,61.32,61.32H396.68c33.87,0,61.32-27.45,61.32-61.32V61.32C458,27.45,430.55,0,396.68,0Zm-20.8,385.59c-1.94,.91-3.98,1.34-5.99,1.34-5.33,0-10.44-3.02-12.85-8.18-.08-.17-10.83-21.83-25.44-22.18-4.54-.1-8.61,3.13-15.39,8.87-8.94,7.57-21.19,17.94-40.38,17.94s-28.34-12.9-34.52-21.43c-6.18-8.55-8.46-10.7-13.82-10.7-5.05,0-8.56,3.85-15.37,12.64-7.35,9.48-17.38,22.41-35.2,22.41-.28,0-.56,0-.85,0-16.31-.37-26.81-9.82-34.48-16.72-6.8-6.12-10.63-9.29-16.06-9.16-8.96,.24-20.65,12.89-24.9,18.97-4.47,6.4-13.3,8-19.71,3.54-6.42-4.46-8.03-13.25-3.59-19.68,2.15-3.12,21.78-30.49,47.46-31.17,16.99-.49,27.86,9.3,35.77,16.42,6.62,5.95,10.63,9.33,16.17,9.45,.04,0,.08,0,.12,0,3.62,0,6.87-3.69,12.88-11.43,7.73-9.97,18.31-23.62,37.78-23.62,20.55,0,30.32,13.5,36.78,22.42,5.97,8.25,7.7,9.71,11.55,9.71,8.38,0,13.85-4.27,22.07-11.23,8.22-6.96,18.41-15.58,33.43-15.58,.31,0,.63,0,.95,.01,13.94,.33,27.2,7.35,38.37,20.3,7.54,8.75,11.63,17.27,12.07,18.21,3.31,7.09,.25,15.53-6.84,18.84Zm1.94-107.25c-6.48,4.38-15.3,2.68-19.68-3.8-.79-1.16-1.34-2.3-2.18-4.02-5.14-10.54-12.82-22.65-20.2-20.61-5.88,1.64-8.18,4.8-12.41,11.23-3.18,4.83-6.78,10.3-12.91,14.39-5.31,3.55-11.37,5.3-18.37,5.3-2.57,0-5.26-.24-8.09-.71-15.83-2.64-24-13.43-29.96-21.31-6.69-8.85-10.36-13.7-22.93-13.45-7.31,.16-10.96,4.07-17.89,12.19-3.6,4.22-7.68,9-12.91,13.08-6.62,5.17-13.79,8.23-21.9,9.37-19.18,2.7-30.17-8.83-37.45-16.46-5.6-5.87-9.03-9.24-14.35-10.16-7.44-1.28-10.58,1.75-18.35,11.47-2.97,3.71-6.04,7.55-9.84,10.92-5.86,5.18-14.82,4.64-20.01-1.23-5.18-5.86-4.63-14.82,1.23-20.01,1.97-1.74,4.16-4.48,6.48-7.38,7.75-9.7,20.74-25.94,45.3-21.7,14.81,2.55,23.62,11.79,30.05,18.53,7.08,7.42,8.9,8.53,12.99,7.96,6.81-.96,10.78-5.26,17.2-12.79,7.81-9.15,18.51-21.68,38.84-22.12,.5-.01,1.01-.02,1.5-.02,25.96,0,37.17,14.83,44.64,24.7,5.31,7.02,7.72,9.74,12.02,10.45,6.02,1,6.21,.72,11.03-6.61,4.82-7.32,12.1-18.39,28.47-22.96,13.8-3.85,27.56,.72,38.73,12.88,7.54,8.21,12.29,17.93,14.57,22.6,.24,.49,.44,.91,.6,1.21,3.86,6.41,2.07,14.8-4.21,19.04Zm.72-107.7c-6.27,4.69-15.15,3.41-19.84-2.86-1.96-2.63-3.95-5.45-5.86-8.19-10.9-15.54-19.47-26.54-30.63-26.54-7.22,0-16.34,8.39-25.16,16.5-11.86,10.91-25.3,23.27-42.7,23.27-22.55,0-30.67-15.21-35.04-23.38-1.04-1.95-2.6-4.86-3.46-5.65-.15-.03-.46-.07-1-.05-3.4,.08-4.28,.39-8.6,8.66-4.24,8.11-11.33,21.69-29.67,21.69s-28.54-14.87-35.65-25.72c-3.37-5.15-8-12.2-10.71-12.26-6.88-.15-8.68,1.81-15.76,12.91-3.79,5.95-8.52,13.35-15.62,20.18-5.64,5.43-14.61,5.25-20.04-.39-5.43-5.64-5.25-14.61,.39-20.04,4.67-4.49,7.93-9.59,11.37-15,7.41-11.61,16.6-26.01,39.1-26.01,.39,0,.78,0,1.17,.01,17.63,.38,26.98,14.65,33.8,25.07,4.95,7.56,8.71,12.91,11.94,12.91,.33,0,.54-.03,.64-.04,.99-.83,2.74-4.19,3.91-6.43,4.57-8.74,12.21-23.37,33.05-23.87,.3,0,.6-.01,.9-.01,18.18,0,25.36,13.43,29.24,20.7,3.98,7.45,4.79,8.39,10.04,8.39,6.34,0,15.07-8.03,23.51-15.79,12.22-11.24,26.07-23.98,44.35-23.98,26.77,0,42.42,22.32,53.84,38.61,1.88,2.67,3.65,5.2,5.35,7.48,4.69,6.27,3.41,15.15-2.86,19.84Z"/><path class="cls-1" d="M530.79,149.14l1.32,201.72,207.1-100.1v-.11l-208.42-101.51Z"/></svg>';case"text-to-handwriting":return'<svg id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1022.03 500"><path class="cls-1" d="M373.66,20.98l-.13,55.2c-.01,5.54-4.51,10.02-10.05,10.01,0,0,0,0-.01,0l-20.17-.09c-5.54-.01-10.02-4.51-10.01-10.05,0,0,0,0,0-.01l.09-35.13-126.49-.15-.49,418.65,50.85,.07c5.54,.01,10.02,4.51,10.01,10.05,0,0,0,0,0,.01l-.06,20.14c-.01,5.54-4.51,10.02-10.05,10.01,0,0,0,0-.01,0l-141.85-.24c-5.54-.01-10.02-4.51-10.01-10.05,0,0,0,0,0-.01l.05-20.08c.02-5.54,4.52-10.02,10.06-10.01l50.85,.07,.5-418.72-126.49-.19-.11,35.14c-.01,5.54-4.51,10.03-10.05,10.02l-20.08-.05C4.47,85.57-.01,81.07,0,75.52L.14,20.33C.17,9.24,9.17,.27,20.26,.3c0,0,0,0,0,0L353.56,.86c11.08-.02,20.08,8.95,20.1,20.03,0,.03,0,.06,0,.1Z"/><path class="cls-1" d="M960.71,0h-335.36C591.48,0,564.03,27.45,564.03,61.32V438.68c0,33.87,27.45,61.32,61.32,61.32h335.36c33.87,0,61.32-27.45,61.32-61.32V61.32C1022.03,27.45,994.58,0,960.71,0Zm-20.8,385.59c-1.94,.91-3.98,1.34-5.99,1.34-5.33,0-10.44-3.02-12.85-8.18-.08-.17-10.83-21.83-25.44-22.18-4.54-.1-8.61,3.13-15.39,8.87-8.94,7.57-21.19,17.94-40.38,17.94s-28.34-12.9-34.52-21.43c-6.18-8.55-8.46-10.7-13.82-10.7-5.05,0-8.56,3.85-15.37,12.64-7.35,9.48-17.38,22.41-35.2,22.41-.28,0-.56,0-.85,0-16.31-.37-26.81-9.82-34.48-16.72-6.8-6.12-10.63-9.29-16.06-9.16-8.96,.24-20.65,12.89-24.9,18.97-4.47,6.4-13.3,8-19.71,3.54-6.42-4.46-8.03-13.25-3.59-19.68,2.15-3.12,21.78-30.49,47.46-31.17,16.99-.49,27.86,9.3,35.77,16.42,6.62,5.95,10.63,9.33,16.17,9.45,.04,0,.08,0,.12,0,3.62,0,6.87-3.69,12.88-11.43,7.73-9.97,18.31-23.62,37.78-23.62,20.55,0,30.32,13.5,36.78,22.42,5.97,8.25,7.7,9.71,11.55,9.71,8.38,0,13.85-4.27,22.07-11.23,8.22-6.96,18.41-15.58,33.43-15.58,.31,0,.63,0,.95,.01,13.94,.33,27.2,7.35,38.37,20.3,7.54,8.75,11.63,17.27,12.07,18.21,3.31,7.09,.25,15.53-6.84,18.84Zm1.94-107.25c-6.48,4.38-15.3,2.68-19.68-3.8-.79-1.16-1.34-2.3-2.18-4.02-5.14-10.54-12.82-22.65-20.2-20.61-5.88,1.64-8.18,4.8-12.41,11.23-3.18,4.83-6.78,10.3-12.91,14.39-5.31,3.55-11.37,5.3-18.37,5.3-2.57,0-5.26-.24-8.09-.71-15.83-2.64-24-13.43-29.96-21.31-6.69-8.85-10.36-13.7-22.93-13.45-7.31,.16-10.96,4.07-17.89,12.19-3.6,4.22-7.68,9-12.91,13.08-6.62,5.17-13.79,8.23-21.9,9.37-19.18,2.7-30.17-8.83-37.45-16.46-5.6-5.87-9.03-9.24-14.35-10.16-7.44-1.28-10.58,1.75-18.35,11.47-2.97,3.71-6.04,7.55-9.84,10.92-5.86,5.18-14.82,4.64-20.01-1.23-5.18-5.86-4.63-14.82,1.23-20.01,1.97-1.74,4.16-4.48,6.48-7.38,7.75-9.7,20.74-25.94,45.3-21.7,14.81,2.55,23.62,11.79,30.05,18.53,7.08,7.42,8.9,8.53,12.99,7.96,6.81-.96,10.78-5.26,17.2-12.79,7.81-9.15,18.51-21.68,38.84-22.12,.5-.01,1.01-.02,1.5-.02,25.96,0,37.17,14.83,44.64,24.7,5.31,7.02,7.72,9.74,12.02,10.45,6.02,1,6.21,.72,11.03-6.61,4.82-7.32,12.1-18.39,28.47-22.96,13.8-3.85,27.56,.72,38.73,12.88,7.54,8.21,12.29,17.93,14.57,22.6,.24,.49,.44,.91,.6,1.21,3.86,6.41,2.07,14.8-4.21,19.04Zm.72-107.7c-6.27,4.69-15.15,3.41-19.84-2.86-1.96-2.63-3.95-5.45-5.86-8.19-10.9-15.54-19.47-26.54-30.63-26.54-7.22,0-16.34,8.39-25.16,16.5-11.86,10.91-25.3,23.27-42.7,23.27-22.55,0-30.67-15.21-35.04-23.38-1.04-1.95-2.6-4.86-3.46-5.65-.15-.03-.46-.07-1-.05-3.4,.08-4.28,.39-8.6,8.66-4.24,8.11-11.33,21.69-29.67,21.69s-28.54-14.87-35.65-25.72c-3.37-5.15-8-12.2-10.71-12.26-6.88-.15-8.68,1.81-15.76,12.91-3.79,5.95-8.52,13.35-15.62,20.18-5.64,5.43-14.61,5.25-20.04-.39-5.43-5.64-5.25-14.61,.39-20.04,4.67-4.49,7.93-9.59,11.37-15,7.41-11.61,16.6-26.01,39.1-26.01,.39,0,.78,0,1.17,.01,17.63,.38,26.98,14.65,33.8,25.07,4.95,7.56,8.71,12.91,11.94,12.91,.33,0,.54-.03,.64-.04,.99-.83,2.74-4.19,3.91-6.43,4.57-8.74,12.21-23.37,33.05-23.87,.3,0,.6-.01,.9-.01,18.18,0,25.36,13.43,29.24,20.7,3.98,7.45,4.79,8.39,10.04,8.39,6.34,0,15.07-8.03,23.51-15.79,12.22-11.24,26.07-23.98,44.35-23.98,26.77,0,42.42,22.32,53.84,38.61,1.88,2.67,3.65,5.2,5.35,7.48,4.69,6.27,3.41,15.15-2.86,19.84Z"/><path class="cls-1" d="M283.35,149.14l1.32,201.72,207.1-100.1v-.11l-208.42-101.51Z"/></svg>';case"arrow-right-long":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M334.5 414c8.8 3.8 19 2 26-4.6l144-136c4.8-4.5 7.5-10.8 7.5-17.4s-2.7-12.9-7.5-17.4l-144-136c-7-6.6-17.2-8.4-26-4.6s-14.5 12.5-14.5 22l0 88L32 208c-17.7 0-32 14.3-32 32l0 32c0 17.7 14.3 32 32 32l288 0 0 88c0 9.6 5.7 18.2 14.5 22z"/></svg>';case"camera-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 384c-53 0-96-43-96-96s43-96 96-96s96 43 96 96s-43 96-96 96z"/></svg>';case"desktop-mobile-duotone":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<defs><style>.fa-secondary{opacity:.4}</style></defs><path class="fa-primary" d="M604 127.1h-184C400.1 127.1 384 144.1 384 164v312C384 495.9 400.1 512 420 512h184C623.9 512 640 495.9 640 476v-312C640 144.1 623.9 127.1 604 127.1zM576 448h-128V192h128V448z"/><path class="fa-secondary" d="M448 192v256h128V192H448zM128 64h320v32h64V48c0-26.5-21.5-47.88-47.88-48H111.9C85.5 .125 64 21.5 64 48V288H16C7.125 288 0 295.1 0 304V320c.125 35.25 28.63 63.88 63.88 64H352V288H128V64z"/></svg>';case"cloud-check-duotone":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">\x3c!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<defs><style>.fa-secondary{opacity:.4}</style></defs><path class="fa-primary" d="M435.8 204.2C446.7 215.1 446.7 232.9 435.8 243.8L307.8 371.8C296.9 382.7 279.1 382.7 268.2 371.8L204.2 307.8C193.3 296.9 193.3 279.1 204.2 268.2C215.1 257.3 232.9 257.3 243.8 268.2L288 312.4L396.2 204.2C407.1 193.3 424.9 193.3 435.8 204.2z"/><path class="fa-secondary" d="M144 480C64.47 480 0 415.5 0 336C0 273.2 40.17 219.8 96.2 200.1C96.07 197.4 96 194.7 96 192C96 103.6 167.6 32 256 32C315.3 32 367 64.25 394.7 112.2C409.9 101.1 428.3 96 448 96C501 96 544 138.1 544 192C544 204.2 541.7 215.8 537.6 226.6C596 238.4 640 290.1 640 352C640 422.7 582.7 480 512 480H144zM435.8 243.8C446.7 232.9 446.7 215.1 435.8 204.2C424.9 193.3 407.1 193.3 396.2 204.2L288 312.4L243.8 268.2C232.9 257.3 215.1 257.3 204.2 268.2C193.3 279.1 193.3 296.9 204.2 307.8L268.2 371.8C279.1 382.7 296.9 382.7 307.8 371.8L435.8 243.8z"/></svg>';case"glass":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M303.4 192.6l-14.66-163.5C287.3 12.62 273.7 0 257.3 0H62.66C46.35 0 32.73 12.62 31.25 29.1L16.6 192.6c-7.164 79.96 50.72 148.5 127.4 157.2V480H79.1c-8.836 0-16 7.162-16 16c0 8.836 7.164 16 16 16h160c8.836 0 16-7.164 16-16c0-8.838-7.164-16-16-16h-64v-130.2C252.7 341.1 310.6 272.6 303.4 192.6zM48.47 195.5L62.66 32h194.2l14.65 163.5c2.809 31.34-6.881 61.58-27.28 85.14c-20.1 23.22-47.92 36.91-78.32 38.56c-7.273 .3934-4.458 .3995-11.84 0C123.7 317.6 95.86 303.9 75.76 280.7C55.35 257.1 45.66 226.9 48.47 195.5z"/></svg>';case"pot-food":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M608 256h-32.04c-.1055-17.71-14.4-32-31.96-32h-1.615C534.5 169.9 488.3 128 432 128s-102.5 41.86-110.4 95.1H96C78.44 223.1 64.15 238.3 64.04 256H32C23.16 256 16 263.2 16 272C16 280.8 23.16 288 32 288h34.13c10.01 82.12 57.1 152.2 125.9 192c0 17.67 14.33 32 32 32h191.1c17.67 0 32-14.33 32-32c67.87-39.76 115.9-109.9 125.9-192H608c8.836 0 16-7.164 16-16C624 263.2 616.8 256 608 256zM432 160c38.64 0 70.95 27.53 78.38 63.1h-156.8C361 187.5 393.4 160 432 160zM543.1 256.2c0 80.49-42.98 155.7-112.2 196.2l-15.83 9.27V480H224v-18.34L208.2 452.4c-69.19-40.53-112.2-115.7-112.2-196.4h239.1C335.1 255.1 335.1 256 336 256s.0117-.0039 .0195-.0039h191.1C527.1 255.1 527.1 256 528 256s.0117-.0039 .0195-.0039h15.98V256.2zM232.8 110.3C247.1 117.5 256 131.8 256 147.8V176C256 184.8 263.2 192 272 192S288 184.8 288 176V147.8c0-28.16-15.66-53.48-40.84-66.09C232.9 74.55 224 60.19 224 44.22V16C224 7.156 216.8 0 208 0S192 7.156 192 16v28.22C192 72.38 207.7 97.7 232.8 110.3zM136.8 110.3C151.1 117.5 160 131.8 160 147.8V176C160 184.8 167.2 192 176 192S192 184.8 192 176V147.8c0-28.16-15.66-53.48-40.84-66.09C136.9 74.55 128 60.19 128 44.22V16C128 7.156 120.8 0 112 0S96 7.156 96 16v28.22C96 72.38 111.7 97.7 136.8 110.3z"/></svg>';case"coke":return'<svg  version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg"><g>\n        <path d="m788.28 542.04h-376.56c-6.6016 0-12-5.3984-12-12 0-6.6016 5.3984-12 12-12h376.56c6.6016 0 12 5.3984 12 12 0.003906 6.6016-5.3984 12-11.996 12z"/>\n        <path d="m794.64 756.24h-388.08c-6.6016 0-12-5.3984-12-12 0-6.6016 5.3984-12 12-12h387.96c6.6016 0 12 5.3984 12 12 0 6.6016-5.2812 12-11.879 12z"/>\n        <path d="m720.72 226.08c-11.281 0-21.238-7.9219-23.52-19.32l-17.879-90.84c-0.71875-3.8398-5.7617-7.918-9.6016-7.918h-144c-3.4805 0-7.9219 3.7188-8.3984 7.1992l-14.281 90.719c-2.0391 13.078-14.281 22.078-27.48 20.039-13.078-2.0391-22.078-14.398-20.039-27.48l14.281-90.719c4.1992-26.879 28.801-47.758 55.801-47.758h144c26.641 0 51.602 20.52 56.762 46.68l17.879 90.84c2.5195 12.961-5.8789 25.68-18.961 28.199-1.4414 0.24219-3 0.35938-4.5625 0.35938z"/>\n        <path d="m559.2 214.44h-1.0781c-6.6016-0.60156-11.398-6.4805-10.801-13.078l4.1992-45.363c0.60156-6.6016 6.6016-11.52 13.078-10.801 6.6016 0.60156 11.398 6.4805 10.801 13.078l-4.1992 45.359c-0.59766 6.125-5.8789 10.805-12 10.805z"/>\n        <path d="m640.8 214.44c-6.1211 0-11.398-4.6797-12-10.922l-4.1992-45.359c-0.60156-6.6016 4.1992-12.48 10.801-13.078 6.6016-0.60156 12.48 4.1992 13.078 10.801l4.1992 45.359c0.60156 6.6016-4.1992 12.48-10.801 13.078-0.35938 0.12109-0.71875 0.12109-1.0781 0.12109z"/>\n        <path d="m740.64 228h-281.28c-13.199 0-24-10.801-24-24s10.801-24 24-24h281.4c13.199 0 24 10.801 24 24 0.003907 13.199-10.797 24-24.117 24z"/>\n        <path d="m765 1140h-2.8789l-6.7188-0.12109-317.52 0.12109c-29.281 0.48047-45.238-5.6406-59.039-41.398-19.559-51.359-4.0781-113.52 15.238-151.08 31.922-62.281 1.0781-149.88 0.71875-150.84-25.68-64.199-26.52-142.56-26.52-145.8 0-134.52 72.48-249.96 79.801-261.24 17.16-30.48 30.359-71.398 38.398-118.56 1.4414-12.359 5.6406-50.641 5.6406-65.762 0-13.199 10.801-24 24-24 13.199 0 24 10.801 24 24 0 20.762-5.5195 67.32-6.2383 72.602-9.2383 54.719-24.121 100.08-44.398 135.96-0.23828 0.48047-0.60156 0.96094-0.83984 1.4414-0.71875 1.0781-72.359 111.6-72.359 235.44 0 0.60156 0.83984 72.48 23.398 129 1.9219 5.1602 38.52 108.72-2.8789 189.72-15.961 31.199-26.16 77.879-13.078 112.08 2.2812 6 3.9609 9.1211 4.8008 10.559 2.1602 0.12109 5.6406 0 8.5195 0l7.4414-0.12109 318.36-0.003906c2.8789 0 6.3594 0.12109 8.5195 0 0.96094-1.5586 2.5195-4.5586 4.8008-10.559 13.078-34.199 2.8789-81-13.078-112.08-41.398-81-4.8008-184.56-3.2383-189 22.922-57.48 23.641-129.12 23.641-129.84 0-124.08-71.641-234.12-72.359-235.2-0.23828-0.48047-0.60156-0.96094-0.83984-1.3203-45.121-79.68-51.359-186.96-52.078-207.6-0.48047-13.199 9.8398-24.359 23.039-24.84 13.441-0.48047 24.359 9.8398 24.84 23.039 0.71875 18.719 6.2383 115.2 45.602 185.16 7.3203 11.281 79.801 126.72 79.801 261.12 0 3.4805-0.83984 81.719-26.879 146.76 0 0.12109-30.84 87.719 1.0781 150 19.32 37.559 34.801 99.719 15.238 151.08-13.086 34.438-28.688 41.277-55.926 41.277z"/>\n        <path d="m582.96 160.68c-61.801 0-90.719-12.121-92.398-12.84-6.1211-2.6406-8.8789-9.7188-6.2383-15.84 2.6406-6 9.6016-8.8789 15.719-6.2383 0.60156 0.23828 60.961 24.719 197.04-0.71875 6.4805-1.1992 12.719 3.1211 14.039 9.6016 1.1992 6.4805-3.1211 12.719-9.6016 14.039-48.238 8.875-87.48 11.996-118.56 11.996z"/>\n        <path d="m731.16 638.88h-251.88c-6.6016 0-12-5.3984-12-12 0-6.6016 5.3984-12 12-12h251.88c6.6016 0 12 5.3984 12 12 0 6.6016-5.3984 12-12 12z"/>\n       </g></svg>';case"cube-regular":case"cube-invers":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M258.8 50.7c-1.8-.7-3.8-.7-5.7 0L63.6 122.6 256 198.2l192.4-75.6L258.8 50.7zM48 377.9c0 3.3 2.1 6.3 5.2 7.5L232 453.2V240.4L48 168.1V377.9zm232 75.3l178.8-67.8c3.1-1.2 5.2-4.2 5.2-7.5V168.1L280 240.4V453.2zM236.1 5.9c12.8-4.9 26.9-4.9 39.7 0l200 75.9C497.6 90 512 110.8 512 134.1V377.9c0 23.3-14.4 44.1-36.1 52.4l-200 75.9c-12.8 4.9-26.9 4.9-39.7 0l-200-75.9C14.4 422 0 401.2 0 377.9V134.1C0 110.8 14.4 90 36.1 81.7l200-75.9z"/></svg>';case"deco-fading":return'<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"> <defs> <style> .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 { fill: none; } .cls-2 { stroke-width: 14px; } .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 { stroke: #1d1d1b; stroke-miterlimit: 10; } .cls-7 { clip-path: url(#clippath); } .cls-8 { fill: #cecece; } .cls-9 { fill: #1d1d1b; } .cls-3 { stroke-width: 10px; } .cls-4 { stroke-width: 2px; } .cls-5 { stroke-width: 4px; } .cls-6 { stroke-width: 7px; } </style> <clipPath id="clippath"> <path class="cls-1" d="m309.72,48.17l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L200.19,48.17h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/> </clipPath> </defs> <path class="cls-8" d="m309.72,48.17l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L200.19,48.17h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/> <path class="cls-9" d="m386.58,370.73l-24.95-104.7-77.33.02,2.43,10.27h-72.02l2.17-9.73-66.59-.99-24.54,106.95c-4.24,19.97-8.47,25.42-17.55,30.26v49.02h98.04v-49.02c-11.5-3.03-14.52-10.89-13.31-20.58,0-10.29,10.89-49.62,11.5-52.65h93.2c.6,3.63,11.5,43.57,11.5,50.83,1.21,10.29-.61,18.76-10.89,22.39v49.02h108.93v-49.02c-9.68-3.03-15.73-9.68-20.58-32.07Z"/> <g class="cls-7"> <line class="cls-2" x1="390.78" y1="252" x2="108.2" y2="252"/> <line class="cls-3" x1="390.78" y1="230" x2="108.2" y2="230"/> <line class="cls-6" x1="390.78" y1="210" x2="108.2" y2="210"/> <line class="cls-5" x1="391.78" y1="190" x2="109.2" y2="190"/> <line class="cls-4" x1="391.78" y1="170" x2="109.2" y2="170"/> </g></svg>';case"deco-color-cut":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="#cecece" d="m310.93,51.27l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L201.39,51.27h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/><path fill="#1d1d1b" d="m387.79,373.83l-31.69-132.99-77.1.75,8.94,37.83h-72.02l8.41-37.74-66.44-.84-30.94,134.81c-4.24,19.97-8.47,25.42-17.55,30.26v49.02h98.04v-49.02c-11.5-3.03-14.52-10.89-13.31-20.58,0-10.29,10.89-49.62,11.5-52.65h93.2c.6,3.63,11.5,43.57,11.5,50.83,1.21,10.29-.61,18.76-10.89,22.39v49.02h108.93v-49.02c-9.68-3.03-15.73-9.68-20.58-32.07Z"/></svg>';case"deco-oblique-lines":return'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"> <defs>   <style>     .cls-1, .cls-2 {       fill: none;     }    .cls-2 {       stroke-width: 12px;     }    .cls-2, .cls-3 {       stroke: #1d1d1b;       stroke-miterlimit: 10;     }    .cls-4 {       clip-path: url(#clippath);     }    .cls-3 {       fill: #cecece;       stroke-width: 4px;     }   </style>   <clipPath id="clippath">     <path class="cls-1" d="m312.13,51.27l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L202.59,51.27h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/>   </clipPath> </defs> <path class="cls-3" d="m312.13,51.27l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L202.59,51.27h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/> <g class="cls-4">   <line class="cls-2" x1="382.98" y1="146.95" x2="94.24" y2="435.69"/>   <line class="cls-2" x1="418.26" y1="210.35" x2="146.25" y2="482.36"/>   <line class="cls-2" x1="393.63" y1="186.5" x2="107.09" y2="473.04"/>   <line class="cls-2" x1="310.19" y1="-28.25" x2="157.42" y2="124.52"/>   <line class="cls-2" x1="346.92" y1="-16.91" x2="156.77" y2="173.24"/>   <line class="cls-2" x1="354.15" y1="25.71" x2="136.35" y2="243.51"/>   <line class="cls-2" x1="365.78" y1="62.87" x2="125.21" y2="303.43"/>   <line class="cls-2" x1="374.05" y1="106.41" x2="108.46" y2="371.99"/>   <line class="cls-2" x1="439.33" y1="239.61" x2="267.07" y2="411.87"/>   <line class="cls-2" x1="450.34" y1="376.89" x2="334.65" y2="492.58"/>   <line class="cls-2" x1="420.76" y1="358.71" x2="298.96" y2="480.52"/>   <line class="cls-2" x1="423.15" y1="306.85" x2="268.84" y2="461.17"/> </g></svg>';case"deco-horizontal-lines":return'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500"> <defs> <style> .cls-1, .cls-2 { fill: none; } .cls-2 { stroke-width: 12px; } .cls-2, .cls-3 { stroke: #1d1d1b; stroke-miterlimit: 10; } .cls-4 { clip-path: url(#clippath); } .cls-3 { fill: #cecece; stroke-width: 4px; } </style> <clipPath id="clippath"> <path class="cls-1" d="m314.55,48.17l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L205.01,48.17h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/> </clipPath> </defs> <path class="cls-3" d="m314.55,48.17l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L205.01,48.17h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/> <g class="cls-4"> <line class="cls-2" x1="425.85" y1="421.82" x2="85.24" y2="421.82"/> <line class="cls-2" x1="431.14" y1="385.01" x2="90.53" y2="385.01"/> <line class="cls-2" x1="425.85" y1="348.19" x2="85.24" y2="348.19"/> <line class="cls-2" x1="419.1" y1="310.37" x2="78.49" y2="310.37"/> <line class="cls-2" x1="425.85" y1="271.82" x2="85.24" y2="271.82"/> <line class="cls-2" x1="431.14" y1="231.01" x2="90.53" y2="231.01"/> <line class="cls-2" x1="425.85" y1="192.19" x2="85.24" y2="192.19"/> <line class="cls-2" x1="419.1" y1="149.37" x2="78.49" y2="149.37"/> <line class="cls-2" x1="425.85" y1="113.19" x2="85.24" y2="113.19"/> <line class="cls-2" x1="419.1" y1="75.37" x2="78.49" y2="75.37"/> </g></svg>';case"text-block-shadow":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="m291.96,56.67l76.86,322.56c4.84,22.39,35.89,61.07,45.58,64.09l-25,17h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,26.82,49.57,38.31,52.6l-25,17h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L182.42,56.67l25-17,84.54,17Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/><path fill="#b2b2b2" d="m316.96,39.67l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L207.42,39.67h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/></svg>';case"text-line-shadow":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <g>   <path fill="#1d1d1b" d="m230.14,123.85h.71c3.03,21.18,6.66,35.71,9.68,50.83l26.02,110.14h-9.56c2.26,2.96,3.98,6.22,4.33,10h17.87l-2.91-12.3-25.98-109.97c-.81-4.03-1.64-7.92-2.51-12.04-2.39-11.24-4.87-22.87-7.04-38.08l-1.23-8.59h-10.64c.29,1.97.52,3.95.73,5.94.13,1.28.35,2.66.53,4.06Z"/>   <path fill="#1d1d1b" d="m176.06,450.33h-78.04v-33.44c9.04-6.46,13.44-15.43,17.32-33.68L187.97,66.67l1.81-10h-9.78l-74.44,324.38c-4.24,19.97-8.47,25.42-17.55,30.26v49.02h98.04v-9.73l-10-.27Z"/>   <path fill="#1d1d1b" d="m376.98,450.33h-88.93v-32.91c4.08-2.76,7.14-6.48,9.01-11,2.06-5,2.67-10.96,1.87-18.2-.24-5.79-3.32-18.82-9.14-41.78-1.07-4.23-2.29-9.01-2.49-10.04l-1.38-8.31h-101.67l-8.19-.05-1.61,8.04c-.12.55-.76,3.03-1.38,5.43-6.02,23.23-10.09,40.43-10.31,48.57-1.24,11.14,2.19,20.03,9.62,25.67,2.07.45,4.1.97,5.99,1.39,1.91.42,4.9.86,7.7,1.61v-7.43c-11.5-3.03-14.52-10.89-13.31-20.58,0-10.29,10.89-49.62,11.5-52.65h93.2c.6,3.63,11.5,43.57,11.5,50.83,1.21,10.29-.61,18.76-10.89,22.39v49.02h108.93v-9.73l-10-.27Z"/> </g> <path fill="#b2b2b2" d="m314.55,39.67l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L205.01,39.67h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/></svg>';case"text-3d-shadow":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <path d="m289.55,56.67l76.86,322.56c4.84,22.39,35.89,61.07,45.58,64.09l-25,17h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,26.82,49.57,38.31,52.6l-25,17h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L180.01,56.67l25-17,84.54,17Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/> <path fill="#b2b2b2" d="m314.55,39.67l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02h-98.04v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L205.01,39.67h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z"/> <g>   <path fill="#1d1d1b" d="m281.22,277.43l.33,1.4h-72.02l24.81-111.35c3.63-16.95,7.26-33.29,9.08-49.62h1.5c.04-.23.08-.46.12-.68.71-3.94,2.21-7.7,3.98-11.32h-16.34l-1.19,10.67c-1.63,14.65-4.8,29.41-8.16,45.04l-.72,3.35-24.8,111.31-3.26,14.61h102.15l-3.06-12.96c-4,.41-8.37.42-12.43-.44Z"/>   <path fill="#1d1d1b" d="m187.75,384.73c0-10.29,10.89-49.62,11.5-52.65h.99c-.1-3.51-.72-7.83-.82-12h-10.01l-1.92,9.59c-.14.61-.76,3.01-1.36,5.33-6.03,23.25-10.11,40.54-10.37,48.92-.83,7.53.34,14.11,3.47,19.57,2.34,4.08,5.63,7.35,9.83,9.8v18.59c2.23-.05,4.49.22,6.66.57,1.82.3,3.59.73,5.34,1.23v-28.38c-11.5-3.03-14.52-10.89-13.31-20.58Z"/>   <path fill="#1d1d1b" d="m369.7,375.89c3.66,16.89,8.77,29.9,20.28,37.06v20.62c1.63-.03,3.23.07,4.64.15,2.45.15,4.91.42,7.36.69v-29.11c-9.68-3.03-15.73-9.68-20.58-32.07L304.55,50.67h-103.89c.78,2.32,1.65,4.62,2.69,6.91.79,1.72,1.64,3.41,2.52,5.09h89.21l74.63,313.22Z"/> </g> <path fill="#d3d3d3" d="m304.07,51.67l74.63,313.22c3.66,16.89,8.77,29.9,20.28,37.06v29.37h-84.93v-29.83c7.04-5.09,12.64-14.19,10.87-30.44-.27-6.02-3.25-18.67-9.2-42.12-1.05-4.14-2.24-8.82-2.46-9.91l-1.66-9.95h-113.2l-1.92,9.59c-.14.61-.76,3.01-1.36,5.33-6.03,23.25-10.11,40.54-10.37,48.92-.83,7.53.34,14.11,3.47,19.57,2.34,4.08,5.63,7.35,9.83,9.8v29.03h-74.04v-30.44c8.86-6.72,13.44-16.22,17.27-34.25L213.57,51.67h90.5m-72.45,102.23l-24.8,111.31-3.26,14.61h102.15l-3.49-14.76-25.97-109.94c-.81-4.03-1.64-7.91-2.51-12.03-2.39-11.21-4.86-22.81-7.02-37.95l-1.47-10.3h-23.57l-1.19,10.67c-1.63,14.65-4.8,29.41-8.16,45.04l-.72,3.35m81.92-114.23h-109.54l-74.44,324.38c-4.24,19.97-8.47,25.42-17.55,30.26v49.02h98.04v-49.02c-11.5-3.03-14.52-10.89-13.31-20.58,0-10.29,10.89-49.62,11.5-52.65h93.2c.6,3.63,11.5,43.57,11.5,50.83,1.21,10.29-.61,18.76-10.89,22.39v49.02h108.93v-49.02c-9.68-3.03-15.73-9.68-20.58-32.07L313.55,39.67h0Zm-95.01,228.15l24.81-111.35c3.63-16.95,7.26-33.29,9.08-49.62h2.42c3.03,21.18,6.66,35.71,9.68,50.83l26.02,110.14h-72.02Z"/></svg>';case"text-no-shadow":return'<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M302.05,48.17l76.86,322.56c4.84,22.39,10.89,29.05,20.58,32.07v49.02h-108.93v-49.02c10.29-3.63,12.1-12.1,10.89-22.39,0-7.26-10.89-47.2-11.5-50.83h-93.2c-.6,3.03-11.5,42.36-11.5,52.65-1.21,9.68,1.82,17.55,13.31,20.58v49.02H100.52v-49.02c9.08-4.84,13.31-10.29,17.55-30.26L192.51,48.17h109.54Zm-23,228.15l-26.02-110.14c-3.03-15.13-6.66-29.65-9.68-50.83h-2.42c-1.82,16.34-5.45,32.68-9.08,49.62l-24.81,111.35h72.02Z" style="fill:#b2b2b2;"/></svg>';case"add-gap-around":return'<?xml version="1.0" encoding="UTF-8"?><svg id="g" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.24 512"><path d="M407.75,422.88v59.45c0,8.77,7.13,15.94,15.94,15.94s15.94-7.18,15.94-15.94v-20.98l43.38,45.98c6.23,6.23,16.32,6.23,22.54,0,6.22-6.23,6.23-16.32,0-22.54l-43.37-45.96h20.95c8.77,0,15.94-7.18,15.94-15.94s-7.18-15.94-15.94-15.94h-59.45c-8.81,0-15.94,7.18-15.94,15.94Z"/><path d="M421.12,102.48h59.45c8.77,0,15.94-7.13,15.94-15.94s-7.18-15.94-15.94-15.94h-20.98l45.98-43.38c6.23-6.23,6.23-16.32,0-22.54-6.23-6.22-16.32-6.23-22.54,0l-45.96,43.37V27.09c0-8.77-7.18-15.94-15.94-15.94s-15.94,7.18-15.94,15.94v59.45c0,8.81,7.18,15.94,15.94,15.94Z"/><path d="M102.48,89.12V29.67c0-8.77-7.13-15.94-15.94-15.94s-15.94,7.18-15.94,15.94v20.98L27.21,4.67C20.98-1.56,10.89-1.56,4.67,4.67-1.55,10.9-1.56,20.99,4.67,27.21l43.37,45.96H27.09c-8.77,0-15.94,7.18-15.94,15.94s7.18,15.94,15.94,15.94h59.45c8.81,0,15.94-7.18,15.94-15.94Z"/><path d="M89.12,409.52H29.67c-8.77,0-15.94,7.13-15.94,15.94s7.18,15.94,15.94,15.94h20.98L4.67,484.79c-6.23,6.23-6.23,16.32,0,22.54,6.23,6.22,16.32,6.23,22.54,0l45.96-43.37v20.95c0,8.77,7.18,15.94,15.94,15.94s15.94-7.18,15.94-15.94v-59.45c0-8.81-7.18-15.94-15.94-15.94Z"/><path d="M404.97,421.85H105.27c-8.84,0-16-7.16-16-16V106.15c0-8.84,7.16-16,16-16H404.97c8.84,0,16,7.16,16,16V405.85c0,8.84-7.16,16-16,16Zm-283.7-32H388.97V122.15H121.27V389.85Z"/></svg>';case"remove-gap-around":return'<?xml version="1.0" encoding="UTF-8"?><svg id="h" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.24 512"><path d="M493.97,511.85H16.27c-8.84,0-16-7.16-16-16V16.15C.27,7.31,7.43,.15,16.27,.15H493.97c8.84,0,16,7.16,16,16V495.85c0,8.84-7.16,16-16,16ZM32.27,479.85H477.97V32.15H32.27V479.85Z"/><path d="M56.02,69.17v59.45c0,8.77,7.13,15.94,15.94,15.94s15.94-7.18,15.94-15.94v-20.98l43.38,45.98c6.23,6.23,16.32,6.23,22.54,0,6.22-6.23,6.23-16.32,0-22.54l-43.37-45.96h20.95c8.77,0,15.94-7.18,15.94-15.94s-7.18-15.94-15.94-15.94h-59.45c-8.81,0-15.94,7.18-15.94,15.94Z"/><path d="M71.68,458.18h59.45c8.77,0,15.94-7.13,15.94-15.94s-7.18-15.94-15.94-15.94h-20.98l45.98-43.38c6.23-6.23,6.23-16.32,0-22.54-6.23-6.22-16.32-6.23-22.54,0l-45.96,43.37v-20.95c0-8.77-7.18-15.94-15.94-15.94s-15.94,7.18-15.94,15.94v59.45c0,8.81,7.18,15.94,15.94,15.94Z"/><path d="M454.12,441.53v-59.45c0-8.77-7.13-15.94-15.94-15.94s-15.94,7.18-15.94,15.94v20.98l-43.38-45.98c-6.23-6.23-16.32-6.23-22.54,0-6.22,6.23-6.23,16.32,0,22.54l43.37,45.96h-20.95c-8.77,0-15.94,7.18-15.94,15.94s7.18,15.94,15.94,15.94h59.45c8.81,0,15.94-7.18,15.94-15.94Z"/><path d="M438.47,54.52h-59.45c-8.77,0-15.94,7.13-15.94,15.94s7.18,15.94,15.94,15.94h20.98l-45.98,43.38c-6.23,6.23-6.23,16.32,0,22.54,6.23,6.22,16.32,6.23,22.54,0l45.96-43.37v20.95c0,8.77,7.18,15.94,15.94,15.94s15.94-7.18,15.94-15.94v-59.45c0-8.81-7.18-15.94-15.94-15.94Z"/></svg>';case"book-thin":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M128 416v48c0 17.7-14.3 32-32 32H48c-17.7 0-32-14.3-32-32V416H128zM96 512c16.7 0 31.4-8.5 40-21.5c8.6 12.9 23.3 21.5 40 21.5h48c26.5 0 48-21.5 48-48V416v-8-8V132.2l1.5 6 2 7.7 65.9 253.8 2 7.7 18 69.2c6.6 25.5 32 40.6 56.7 33.8l59.6-16.5c24.7-6.8 39.3-33 32.7-58.5l-16-61.5-2-7.7L426.6 112.4l-2-7.7-18-69.2C400 9.9 374.6-5.2 349.9 1.6L290.3 18.1c-8.4 2.3-15.7 6.9-21.4 13C262.1 12.9 244.6 0 224 0H176c-16.7 0-31.4 8.5-40 21.5C127.4 8.5 112.7 0 96 0H48C21.5 0 0 21.5 0 48V96v8 8V400v8 8 48c0 26.5 21.5 48 48 48H96zM272 64.8V63.6c.3-14 9.5-26.4 22.6-30l59.6-16.5c15.7-4.3 32.5 5.1 36.9 22.4l16 61.7L289 133.8 273.1 72.6c-.7-2.6-1-5.2-1.1-7.8zm-16-.6c0 0 0 0 0 0V96H144V48c0-17.7 14.3-32 32-32h48c17.7 0 32 14.3 32 32V64.2zM176 496c-17.7 0-32-14.3-32-32V416H256v48c0 17.7-14.3 32-32 32H176zM128 112V400H16V112H128zm0-64V96H16V48c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32zM256 400H144V112H256V400zM411.2 116.7l63.9 246L356.8 395.3 293 149.3l118.2-32.7zM479 378.2l15.9 61.2c4.5 17.4-5.6 34.7-21.5 39.1l-59.6 16.5c-15.7 4.3-32.5-5.1-36.9-22.4l-16-61.7L479 378.2z"/></svg>';case"book-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 32C0 14.3 14.3 0 32 0H96c17.7 0 32 14.3 32 32V96H0V32zm0 96H128V384H0V128zM0 416H128v64c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V416zM160 32c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32V96H160V32zm0 96H288V384H160V128zm0 288H288v64c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V416zm203.6-19.9L320 232.6V142.8l100.4-26.9 66 247.4L363.6 396.1zM412.2 85L320 109.6V11l36.9-9.9c16.9-4.6 34.4 5.5 38.9 22.6L412.2 85zM371.8 427l122.8-32.9 16.3 61.1c4.5 17-5.5 34.5-22.5 39.1l-61.4 16.5c-16.9 4.6-34.4-5.5-38.9-22.6L371.8 427z"/></svg>';case"chart-mixed":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\x3c!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --\x3e<path d="M507.8 37.24C513.8 43.78 513.3 53.89 506.8 59.84L330.8 219.8C324.4 225.6 314.7 225.4 308.7 219.3L190.4 100.1L25.41 220.9C18.26 226.1 8.258 224.6 3.061 217.4C-2.137 210.3-.5565 200.3 6.59 195.1L182.6 67.06C188.1 62.43 197.7 63.12 203.3 68.69L320.5 185.9L485.2 36.16C491.8 30.22 501.9 30.7 507.8 37.24H507.8zM112 368V432C112 458.5 90.51 480 64 480C37.49 480 16 458.5 16 432V368C16 341.5 37.49 319.1 64 319.1C90.51 319.1 112 341.5 112 368zM80 432V368C80 359.2 72.84 352 64 352C55.16 352 48 359.2 48 368V432C48 440.8 55.16 448 64 448C72.84 448 80 440.8 80 432zM144 271.1C144 245.5 165.5 223.1 192 223.1C218.5 223.1 240 245.5 240 271.1V432C240 458.5 218.5 480 192 480C165.5 480 144 458.5 144 432V271.1zM192 255.1C183.2 255.1 176 263.2 176 271.1V432C176 440.8 183.2 448 192 448C200.8 448 208 440.8 208 432V271.1C208 263.2 200.8 255.1 192 255.1zM368 336V432C368 458.5 346.5 480 320 480C293.5 480 272 458.5 272 432V336C272 309.5 293.5 287.1 320 287.1C346.5 287.1 368 309.5 368 336zM336 432V336C336 327.2 328.8 319.1 320 319.1C311.2 319.1 304 327.2 304 336V432C304 440.8 311.2 448 320 448C328.8 448 336 440.8 336 432zM400 271.1C400 245.5 421.5 223.1 448 223.1C474.5 223.1 496 245.5 496 271.1V432C496 458.5 474.5 480 448 480C421.5 480 400 458.5 400 432V271.1zM448 255.1C439.2 255.1 432 263.2 432 271.1V432C432 440.8 439.2 448 448 448C456.8 448 464 440.8 464 432V271.1C464 263.2 456.8 255.1 448 255.1z"/></svg>';case"badge-check":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\x3c!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M235.3 331.3C229.1 337.6 218.9 337.6 212.7 331.3L156.7 275.3C150.4 269.1 150.4 258.9 156.7 252.7C162.9 246.4 173.1 246.4 179.3 252.7L224 297.4L324.7 196.7C330.9 190.4 341.1 190.4 347.3 196.7C353.6 202.9 353.6 213.1 347.3 219.3L235.3 331.3zM343.1 45.63C376.1 39.67 411.5 49.43 437 74.98C462.6 100.5 472.3 135.9 466.4 168.9C493.9 187.1 512 219.9 512 255.1C512 292.1 493.9 324 466.4 343.1C472.3 376.1 462.6 411.5 437 437C411.5 462.6 376.1 472.3 343.1 466.4C324 493.9 292.1 512 256 512C219.9 512 187.1 493.9 168.9 466.4C135.9 472.3 100.5 462.6 74.98 437C49.43 411.5 39.67 376.1 45.63 343.1C18.08 324 0 292.1 0 255.1C0 219.9 18.08 187.1 45.63 168.9C39.67 135.9 49.43 100.5 74.98 74.98C100.5 49.43 135.9 39.67 168.9 45.63C187.1 18.08 219.9 0 255.1 0C292.1 0 324 18.08 343.1 45.63L343.1 45.63zM184.4 83.08L171.7 79.2C146.3 71.4 117.6 77.57 97.61 97.61C77.57 117.6 71.4 146.3 79.2 171.7L83.08 184.4L71.4 190.6C47.93 203 32 227.7 32 255.1C32 284.3 47.93 308.1 71.4 321.4L83.08 327.6L79.2 340.3C71.4 365.7 77.57 394.3 97.61 414.4C117.6 434.4 146.3 440.6 171.7 432.8L184.4 428.9L190.6 440.6C203 464.1 227.7 480 256 480C284.3 480 308.1 464.1 321.4 440.6L327.6 428.9L340.3 432.8C365.7 440.6 394.3 434.4 414.4 414.4C434.4 394.3 440.6 365.7 432.8 340.3L428.9 327.6L440.6 321.4C464.1 308.1 480 284.3 480 255.1C480 227.7 464.1 203 440.6 190.6L428.9 184.4L432.8 171.7C440.6 146.3 434.4 117.6 414.4 97.6C394.4 77.56 365.7 71.4 340.3 79.2L327.6 83.08L321.4 71.4C308.1 47.93 284.3 31.1 256 31.1C227.7 31.1 203 47.93 190.6 71.4L184.4 83.08z"/></svg>';case"grip-dots-vertical":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M48 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm0 160a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM96 416A48 48 0 1 0 0 416a48 48 0 1 0 96 0zM208 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48 112a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM208 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>';case"square-caret-down":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<defs><style>.fa-secondary{opacity:.4}</style></defs><path class="fa-primary" d="M241.6 344.3c-4.5 4.9-10.9 7.7-17.6 7.7s-13-2.8-17.6-7.7l-104-112c-6.5-7-8.2-17.2-4.4-25.9s12.5-14.4 22-14.4H328c9.5 0 18.2 5.7 22 14.4s2.1 18.9-4.4 25.9l-104 112z"/><path class="fa-secondary" d="M64 480c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64zM224 352c6.7 0 13-2.8 17.6-7.7l104-112c6.5-7 8.2-17.2 4.4-25.9s-12.5-14.4-22-14.4H120c-9.5 0-18.2 5.7-22 14.4s-2.1 18.9 4.4 25.9l104 112c4.5 4.9 10.9 7.7 17.6 7.7z"/></svg>';case"file-arrow-down":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z"/></svg>';case"download":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\x3c!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --\x3e<path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>';case"file-code-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">\n          <path d="M369.941 97.941l-83.882-83.882A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v416c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48V131.882a48 48 0 0 0-14.059-33.941zm-22.627 22.628a15.89 15.89 0 0 1 4.195 7.431H256V32.491a15.88 15.88 0 0 1 7.431 4.195l83.883 83.883zM336 480H48c-8.837 0-16-7.163-16-16V48c0-8.837 7.163-16 16-16h176v104c0 13.255 10.745 24 24 24h104v304c0 8.837-7.163 16-16 16zm-161.471-67.404l-25.928-7.527a5.1 5.1 0 0 1-3.476-6.32l58.027-199.869a5.1 5.1 0 0 1 6.32-3.476l25.927 7.527a5.1 5.1 0 0 1 3.476 6.32L180.849 409.12a5.1 5.1 0 0 1-6.32 3.476zm-48.446-47.674l18.492-19.724a5.101 5.101 0 0 0-.351-7.317L105.725 304l38.498-33.881a5.1 5.1 0 0 0 .351-7.317l-18.492-19.724a5.1 5.1 0 0 0-7.209-.233L57.61 300.279a5.1 5.1 0 0 0 0 7.441l61.263 57.434a5.1 5.1 0 0 0 7.21-.232zm139.043.232l61.262-57.434a5.1 5.1 0 0 0 0-7.441l-61.262-57.434a5.1 5.1 0 0 0-7.209.233l-18.492 19.724a5.101 5.101 0 0 0 .351 7.317L278.275 304l-38.499 33.881a5.1 5.1 0 0 0-.351 7.317l18.492 19.724a5.1 5.1 0 0 0 7.209.232z"/>\n        </svg>';case"file-plus-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">\n          <path d="M369.9,97.9,286,14A48,48,0,0,0,252.1-.1H48A48.16,48.16,0,0,0,0,48V464a48,48,0,0,0,48,48H336a48,48,0,0,0,48-48V131.9A48.23,48.23,0,0,0,369.9,97.9Zm-22.6,22.7a15.73,15.73,0,0,1,4.2,7.4H256V32.5a15.73,15.73,0,0,1,7.4,4.2ZM336,480H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H224V136a23.94,23.94,0,0,0,24,24H352V464A16,16,0,0,1,336,480ZM288,300v8a12,12,0,0,1-12,12H208v68a12,12,0,0,1-12,12h-8a12,12,0,0,1-12-12V320H108a12,12,0,0,1-12-12v-8a12,12,0,0,1,12-12h68V220a12,12,0,0,1,12-12h8a12,12,0,0,1,12,12v68h68A12,12,0,0,1,288,300Z"/>\n        </svg>';case"download-light":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M452 432c0 11-9 20-20 20s-20-9-20-20 9-20 20-20 20 9 20 20zm-84-20c-11 0-20 9-20 20s9 20 20 20 20-9 20-20-9-20-20-20zm144-48v104c0 24.3-19.7 44-44 44H44c-24.3 0-44-19.7-44-44V364c0-24.3 19.7-44 44-44h99.4L87 263.6c-25.2-25.2-7.3-68.3 28.3-68.3H168V40c0-22.1 17.9-40 40-40h96c22.1 0 40 17.9 40 40v155.3h52.7c35.6 0 53.4 43.1 28.3 68.3L368.6 320H468c24.3 0 44 19.7 44 44zm-261.7 17.7c3.1 3.1 8.2 3.1 11.3 0L402.3 241c5-5 1.5-13.7-5.7-13.7H312V40c0-4.4-3.6-8-8-8h-96c-4.4 0-8 3.6-8 8v187.3h-84.7c-7.1 0-10.7 8.6-5.7 13.7l140.7 140.7zM480 364c0-6.6-5.4-12-12-12H336.6l-52.3 52.3c-15.6 15.6-41 15.6-56.6 0L175.4 352H44c-6.6 0-12 5.4-12 12v104c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12V364z"/>\n        </svg>';case"circle-check-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM371.8 211.8C382.7 200.9 382.7 183.1 371.8 172.2C360.9 161.3 343.1 161.3 332.2 172.2L224 280.4L179.8 236.2C168.9 225.3 151.1 225.3 140.2 236.2C129.3 247.1 129.3 264.9 140.2 275.8L204.2 339.8C215.1 350.7 232.9 350.7 243.8 339.8L371.8 211.8z"/>\n        </svg>';case"circle-ellipsis-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM160 288C177.7 288 192 273.7 192 256C192 238.3 177.7 224 160 224C142.3 224 128 238.3 128 256C128 273.7 142.3 288 160 288zM256 224C238.3 224 224 238.3 224 256C224 273.7 238.3 288 256 288C273.7 288 288 273.7 288 256C288 238.3 273.7 224 256 224zM352 288C369.7 288 384 273.7 384 256C384 238.3 369.7 224 352 224C334.3 224 320 238.3 320 256C320 273.7 334.3 288 352 288z"/>\n        </svg>';case"circle-plus-solid":return'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\n          <path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 368C269.3 368 280 357.3 280 344V280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H280V168C280 154.7 269.3 144 256 144C242.7 144 232 154.7 232 168V232H168C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H232V344C232 357.3 242.7 368 256 368z"/>\n        </svg>';default:assertNever$1(e)}}let WcIcon=class extends s$1{constructor(){super(...arguments),this.primaryColor="text",this.icon="pen"}static get styles(){return i$4`
:host, :host * {
  box-sizing: border-box;
}

:host {
  display: block;
}

svg {
  width: 100%;
  height: 100%;
  display: block;
}


.color-arrows {
  fill: rgba(255,255,255,0.5);
}
svg.color-arrows:hover {
  fill:  rgba(255,255,255,0.6);
}

.color-headline {
  fill: var(--printess-headlineColor);
}
svg.color-headline:hover {
  fill: var(--printess-headlineColorHover);
}

.color-text {
    fill: var(--printess-textColor);
} 
svg.color-text:hover {
  fill: var(--printess-textColorHover);
}

.color-medium {
  fill: var(--printess-textColorDisabled);
} 
svg.color-medium:hover {
    fill: var(--printess-textColorDisabledHover);
}

.color-light {
  fill: var(--printess-textColorLight);
}   
.color-light:hover {  
  fill: var(--printess-textColorLightHover);
}

.color-toolbar {
  fill: var(--printess-toolbarColor);
} 
svg.color-toolbar:hover {
  fill: var(--printess-toolbarColorHover);
}
.color-remove {
  fill: var(--printess-textColor);
} 
svg.color-remove:hover {
  fill: tomato;
}
.color-red {
  fill: red;
} 
svg.color-red:hover {
  fill: tomato;
}
.color-pink, .color-pink:hover {
  fill: #d3277c;
}
.color-magenta {
  fill: #a2256b;
}
.color-magenta:hover {
  fill: #910c57;
}
.color-printess-pink, .color-printess-pink:hover {
  fill: var(--printess-pink);
}
.color-black, .color-black:hover {
  fill: black;
}
.color-green, .color-green:hover {
  fill: green;
}
.color-lightgreen, .color-lightgreen:hover {
  fill: #83c000;
}
.color-blue, .color-blue:hover {
  fill: blue;
}
.color-table-blue {
  fill: #4c9ce2;
}
.color-table-blue:hover {
  fill: #6face2;
}
.color-gray, .color-gray:hover {
  fill: #555555;
}
.color-lightgray, .color-lightgray:hover {
  fill: #bbb;
}
.color-warning, .color-warning:hover {
  fill: orange;
}
.color-frame {
  fill:  var(--printess-frameColor);
  } 
svg.color-frame:hover {
  fill: var(--printess-frameColorHover);
}

.color-head-toolbar  {
  fill:  var(--printess-headToolbarColor);
} 
svg.color-head-toolbar:hover {
  fill: var(--printess-headToolbarColorHover);
}
`}render(){let e="color-"+this.primaryColor;return this.classList.contains("strict-no-zoom")&&(e+=" strict-no-zoom"),x`${o$1(getIcon$1(this.icon).replace("<svg ",' <svg class="'+e+'"'))}`}};__decorate$2F([e$3()],WcIcon.prototype,"primaryColor",void 0),__decorate$2F([e$3()],WcIcon.prototype,"icon",void 0),WcIcon=__decorate$2F([e$4("wc-icon")],WcIcon);const menuItemH=28,submMenuHGap=7,contextOverlayDiv=createOverlayDiv();contextOverlayDiv.addEventListener("mousedown",removeCtxMenu);const contextMenuDiv=document.createElement("div");contextMenuDiv.classList.add("printess-ctx-menu"),contextMenuDiv.id="contextMenu";let canReceiveMenuClick=!1;function getLi(e){const t=document.createElement("li");if("-"===e.caption)return t.classList.add("printess-ctx-menu-item-seperator"),t;if(t.classList.add("printess-ctx-menu-item"),e.callback&&!0!==e.disabled&&t.addEventListener("mouseup",()=>{canReceiveMenuClick&&e.callback&&e.callback()}),e.disabled)if(t.classList.add("disabled"),e.icon){const o=new WcIcon;o.icon=e.icon,o.primaryColor="gray",t.appendChild(o)}else t.appendChild(document.createElement("div"));else if(!e.textOnly)if(e.icon){const o=new WcIcon;o.icon=e.icon,e.iconColor?o.primaryColor=e.iconColor:e.icon.indexOf("-invers")>=0?o.primaryColor="headline":o.primaryColor="text",t.appendChild(o)}else{const o=document.createElement("div");e.color&&(o.style.backgroundColor=e.color,o.classList.add("color")),t.appendChild(o)}const o=document.createElement("div");if(o.classList.add("printess-ctx-menu-caption"),o.innerText=e.caption,e.color&&(o.style.color=e.color),e.font&&(o.style.fontFamily=e.font,o.style.fontSize="11pt"),t.appendChild(o),e.sub){const e=new WcIcon;e.icon="carret-right-solid",e.primaryColor="text",e.classList.add("arrow"),t.appendChild(e)}return t}function showCtxMenu(e,t,o=0,r=0,i=180,a=!1){e.preventDefault();const s=i;removeCtxMenu();const n=e.clientX,l=e.clientY;if(!e.target)return;if(!t){const o=e.target;"function"==typeof o.getContextMenu&&(t=o.getContextMenu(e.target,n,l))}if(!t)return;const c=28*t.filter(e=>"-"!==e.caption).length+7*t.filter(e=>"-"===e.caption).length;contextMenuDiv.style.height=c+"px",contextMenuDiv.style.width=s+"px",e.preventDefault();let d=n,p=l,h=n,g=l;contextMenuDiv.innerHTML="";const u=document.createElement("div");contextMenuDiv.appendChild(u);const m=document.createElement("ul");u.appendChild(m),canReceiveMenuClick=!1;for(const e of t){const t=getLi(e);if(t.addEventListener("mousedown",()=>{canReceiveMenuClick=!0}),t.addEventListener("mouseup",()=>{canReceiveMenuClick&&removeCtxMenu()}),e.sub&&e.sub.length){t.classList.add("printess-sub-menu-trigger");const o=document.createElement("div"),r=document.createElement("ul");o.appendChild(r),o.classList.add("printess-sub-menu");for(const t of e.sub){const e=getLi(t);r.appendChild(e)}g=window.innerHeight-l<7?-33-(l+7-window.innerHeight):7,h=window.innerWidth-n<2*s?-s:s,o.style.top=g+"px",o.style.left=h+"px",o.style.width=s+"px",t.onmouseover=()=>{o.style.display="block"},o.onmouseover=()=>{o.style.display="block"},t.onmouseout=()=>{o.style.display="none"},o.onmouseout=()=>{o.style.display="none"},t.appendChild(o)}m.appendChild(t)}p=l+c>window.innerHeight?window.innerHeight-c-10:l,window.innerWidth-(n+o)<s?(d=n-s,contextMenuDiv.classList.add("printess-rev-ctx-menu")):(contextMenuDiv.classList.remove("printess-rev-ctx-menu"),d=n),contextMenuDiv.style.top=p+r+"px",contextMenuDiv.style.left=d+o+"px",document.body.appendChild(contextOverlayDiv),document.body.appendChild(contextMenuDiv)}function removeCtxMenu(){contextMenuDiv.parentElement&&document.body.removeChild(contextMenuDiv),contextOverlayDiv.parentElement&&document.body.removeChild(contextOverlayDiv)}const drawerStyles=i$4`  
  .menu-section {
    border-top: 1px solid #cccccc;
    padding: 20px 0 10px;
    margin-top: 20px;
    color: #555555;
    font-size: 12px;
  }
  .menu-section:first-of-type {
    border: none;
    margin-top: 15px;
  }

  .tab {
    cursor: pointer;
    color: #222;
    font-family: var(--printess-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #555555;
  }
  .tab:hover {
    color: rgb(208, 4, 155);
  }

  .selected {
    color: var(--printess-pink);
  }

  .user-icon {
    display: flex;
    align-items: center;
    position: relative;
  }

  .hidden {
    display: none;
  }

    @media (max-width: ${config.mobileDeviceWidth}px) {
    .menu-icon {
      position: fixed;
      top: 15px;
      left: 15px;
      height: 25px;
      width: 30px;
    }

    .tab {
      border-bottom: 1px solid #ddd;
      width: 100%;
      font-size: 15px;
      justify-content: center;
    }

    .hidden {
      display: none !important;
    }
  }
`;var __decorate$2E=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const publicDrawer={Production:[{name:"dashboard",title:"Dashboard",displayTo:["admin","printess-team","owner","user"]},{name:"printjobs",title:"Print Jobs",displayTo:["admin","printess-team","owner","user"]},{name:"dropship-orders",title:"Dropship Orders",displayTo:["admin","printess-team","owner","debug"],requiredClaim:"dropship"},{name:"submission-errors",title:"Submission Errors",displayTo:["user","printess-team","owner","debug"]}],"Account Settings":[{name:"account",title:"Account Data",displayTo:["admin","printess-team","owner"]},{name:"subscription",title:"Subscription",displayTo:["admin","printess-team","owner"]},{name:"invoices",title:"Payment & Invoices",displayTo:["debug","printess-team"]},{name:"team-members",title:"Team Members",displayTo:["admin","printess-team","owner"]},{name:"layout-snippets",title:"Layout Snippets",displayTo:["admin","printess-team","owner"]},{name:"photobook-themes",title:"Photobook Themes",displayTo:["admin","printess-team","owner"]},{name:"advanced-editor-settings",title:"Advanced Settings",displayTo:["admin","printess-team","owner"]}],"Buyerside Settings":[{name:"design",title:"Logo & Theme",displayTo:["admin","printess-team","owner","debug"]},{name:"translations",title:"Translations",displayTo:["admin","printess-team","owner"]},{name:"keyword-menu",title:"Keyword Menu",displayTo:["admin","printess-team","debug","owner"]},{name:"sort-index",title:"Menu Sort Index",displayTo:["admin","printess-team","debug","owner"],forbiddenPlans:["pay as you go","small","medium"]},{name:"image-categories",title:"Image Categories",displayTo:["admin","printess-team","debug","owner","user"],forbiddenPlans:["pay as you go","small","medium"]},{name:"image-ai-effects",title:"AI Image Effects",displayTo:["admin","printess-team","debug","owner","user"],forbiddenPlans:["pay as you go","small"]},{name:"3d",title:"3D Models",displayTo:["admin","printess-team","owner","user","debug"],forbiddenPlans:["pay as you go"]},{name:"offensive-words",title:"Offensive Words",displayTo:["admin","printess-team","owner"]},{name:"advanced-buyerside-settings",title:"Letter Generator",displayTo:["admin","printess-team","owner"]},{name:"ai-access",title:"AI Limits",displayTo:["admin","printess-team","owner"]}],"Integration & Workflow Settings":[{name:"shopintegrations",title:"Shop Integrations",displayTo:["owner","debug"]},{name:"dropshipper",title:"Dropshippers",displayTo:["admin","printess-team","owner","debug"],requiredClaim:"dropship"},{name:"siteflow",title:"HP Site Flow",displayTo:["admin","printess-team","owner","debug"],requiredClaim:"dropship"},{name:"siteflow-products",title:"HP Site Flow",displayTo:["admin","printess-team","owner","debug"],hide:!0,requiredClaim:"dropship"},{name:"siteflow-connections",title:"HP Site Flow",displayTo:["admin","printess-team","owner","debug"],hide:!0,requiredClaim:"dropship"},{name:"print-settings",title:"Print Settings",displayTo:["admin","printess-team","owner"]},{name:"impositions",title:"Impositions",displayTo:["admin","printess-team","owner"]},{name:"advanced-shop-settings",title:"Advanced Settings",displayTo:["admin","printess-team","owner"]}],"Internal Stuff":[{name:"controls-overview",title:"Controls Overview",displayTo:["debug"]},{name:"taglist-test",title:"Taglist Test",displayTo:["debug"]},{name:"icons",title:"Icons",displayTo:["debug"]}]};let WcAppDrawer=class extends s$1{static get styles(){return[drawerStyles]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize)}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}constructor(e,t){super(),this.selectedDrawer="dashboard",this.isTrialExpired=!1,this.drawerOpen=!1,this.debug="localhost"===window.location.hostname||window.location.href.indexOf("debug=1")>0||!0===window.printessDebug,this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()},this.selectedDrawer=e,this.isTrialExpired=t}getDrawerSelection(e){this.callback=e}openDrawer(){this.drawerOpen=!this.drawerOpen,this.requestUpdate()}setDrawerSelection(e){this.selectedDrawer=e,this.callback&&this.callback(this.selectedDrawer)}notToDisplay(e){return("subscription"===e||"design"===e)&&"api.printess.com"!==apiEndpoint&&"dev-aws.printess.com"!==apiEndpoint&&"localhost:5001"!==apiEndpoint}getMenuToBeDisplayed(){return Object.entries(publicDrawer).reduce((e,[t,o])=>{const r=o.filter(e=>drawerCanBeDisplayed(e,this.isTrialExpired));return r.length>0&&(e[t]=r),e},{})}render(){const e=this.getMenuToBeDisplayed();return x`
      ${config.isMobile?x`<wc-icon @click=${this.openDrawer} class="menu-icon" primaryColor="toolbar" icon=${this.drawerOpen?"close":"bars-light"}></wc-icon>`:""}
      <aside class="drawer ${!this.drawerOpen&&config.isMobile?"hidden":""}">
        ${Object.entries(e).map(([e,t])=>x`
          ${"Dashboard"===e?"":x`
            <div class="menu-section">${e}</div>
          `}
          ${t.map(e=>x`
            <div
              class="tab ${this.selectedDrawer.startsWith(e.name)?"selected":""}"
              style="display: ${this.notToDisplay(e.name)?"none":"flex"}; align-items: center;"
              @click=${()=>this.setDrawerSelection(e.name)}
            >
              ${e.title}
              <wc-icon class=${"editor"===e.name?"":"hidden"} primaryColor=${"editor"===this.selectedDrawer?"pink":"gray"} icon="printess-wand" style="margin-left: 10px; width: 17px; height: 17px;"></wc-icon>
            </div>
          `)}
        `)}
      </aside>
    `}};__decorate$2E([e$3({type:String})],WcAppDrawer.prototype,"selectedDrawer",void 0),__decorate$2E([e$3({type:Boolean})],WcAppDrawer.prototype,"isTrialExpired",void 0),WcAppDrawer=__decorate$2E([e$4("wc-app-drawer")],WcAppDrawer);
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */
const isCEPolyfill="undefined"!=typeof window&&null!=window.customElements&&void 0!==window.customElements.polyfillWrapFlushCallback,removeNodes=(e,t,o=null)=>{for(;t!==o;){const o=t.nextSibling;e.removeChild(t),t=o}},marker=`{{lit-${String(Math.random()).slice(2)}}}`,nodeMarker=`\x3c!--${marker}--\x3e`,markerRegex=new RegExp(`${marker}|${nodeMarker}`),boundAttributeSuffix="$lit$";class Template{constructor(e,t){this.parts=[],this.element=t;const o=[],r=[],i=document.createTreeWalker(t.content,133,null,!1);let a=0,s=-1,n=0;const{strings:l,values:{length:c}}=e;for(;n<c;){const e=i.nextNode();if(null!==e){if(s++,1===e.nodeType){if(e.hasAttributes()){const t=e.attributes,{length:o}=t;let r=0;for(let e=0;e<o;e++)endsWith(t[e].name,"$lit$")&&r++;for(;r-- >0;){const t=l[n],o=lastAttributeNameRegex.exec(t)[2],r=o.toLowerCase()+"$lit$",i=e.getAttribute(r);e.removeAttribute(r);const a=i.split(markerRegex);this.parts.push({type:"attribute",index:s,name:o,strings:a}),n+=a.length-1}}"TEMPLATE"===e.tagName&&(r.push(e),i.currentNode=e.content)}else if(3===e.nodeType){const t=e.data;if(t.indexOf(marker)>=0){const r=e.parentNode,i=t.split(markerRegex),a=i.length-1;for(let t=0;t<a;t++){let o,a=i[t];if(""===a)o=createMarker();else{const e=lastAttributeNameRegex.exec(a);null!==e&&endsWith(e[2],"$lit$")&&(a=a.slice(0,e.index)+e[1]+e[2].slice(0,-5)+e[3]),o=document.createTextNode(a)}r.insertBefore(o,e),this.parts.push({type:"node",index:++s})}""===i[a]?(r.insertBefore(createMarker(),e),o.push(e)):e.data=i[a],n+=a}}else if(8===e.nodeType)if(e.data===marker){const t=e.parentNode;null!==e.previousSibling&&s!==a||(s++,t.insertBefore(createMarker(),e)),a=s,this.parts.push({type:"node",index:s}),null===e.nextSibling?e.data="":(o.push(e),s--),n++}else{let t=-1;for(;-1!==(t=e.data.indexOf(marker,t+1));)this.parts.push({type:"node",index:-1}),n++}}else i.currentNode=r.pop()}for(const e of o)e.parentNode.removeChild(e)}}const endsWith=(e,t)=>{const o=e.length-t.length;return o>=0&&e.slice(o)===t},isTemplatePartActive=e=>-1!==e.index,createMarker=()=>document.createComment(""),lastAttributeNameRegex=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/,walkerNodeFilter=133;function removeNodesFromTemplate(e,t){const{element:{content:o},parts:r}=e,i=document.createTreeWalker(o,133,null,!1);let a=nextActiveIndexInTemplateParts(r),s=r[a],n=-1,l=0;const c=[];let d=null;for(;i.nextNode();){n++;const e=i.currentNode;for(e.previousSibling===d&&(d=null),t.has(e)&&(c.push(e),null===d&&(d=e)),null!==d&&l++;void 0!==s&&s.index===n;)s.index=null!==d?-1:s.index-l,a=nextActiveIndexInTemplateParts(r,a),s=r[a]}c.forEach(e=>e.parentNode.removeChild(e))}const countNodes=e=>{let t=11===e.nodeType?0:1;const o=document.createTreeWalker(e,133,null,!1);for(;o.nextNode();)t++;return t},nextActiveIndexInTemplateParts=(e,t=-1)=>{for(let o=t+1;o<e.length;o++){const t=e[o];if(isTemplatePartActive(t))return o}return-1};function insertNodeIntoTemplate(e,t,o=null){const{element:{content:r},parts:i}=e;if(null==o)return void r.appendChild(t);const a=document.createTreeWalker(r,133,null,!1);let s=nextActiveIndexInTemplateParts(i),n=0,l=-1;for(;a.nextNode();){l++;for(a.currentNode===o&&(n=countNodes(t),o.parentNode.insertBefore(t,o));-1!==s&&i[s].index===l;){if(n>0){for(;-1!==s;)i[s].index+=n,s=nextActiveIndexInTemplateParts(i,s);return}s=nextActiveIndexInTemplateParts(i,s)}}}
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */const directives=new WeakMap,isDirective=e=>"function"==typeof e&&directives.has(e),noChange={},nothing={};
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */
class TemplateInstance{constructor(e,t,o){this.__parts=[],this.template=e,this.processor=t,this.options=o}update(e){let t=0;for(const o of this.__parts)void 0!==o&&o.setValue(e[t]),t++;for(const e of this.__parts)void 0!==e&&e.commit()}_clone(){const e=isCEPolyfill?this.template.element.content.cloneNode(!0):document.importNode(this.template.element.content,!0),t=[],o=this.template.parts,r=document.createTreeWalker(e,133,null,!1);let i,a=0,s=0,n=r.nextNode();for(;a<o.length;)if(i=o[a],isTemplatePartActive(i)){for(;s<i.index;)s++,"TEMPLATE"===n.nodeName&&(t.push(n),r.currentNode=n.content),null===(n=r.nextNode())&&(r.currentNode=t.pop(),n=r.nextNode());if("node"===i.type){const e=this.processor.handleTextExpression(this.options);e.insertAfterNode(n.previousSibling),this.__parts.push(e)}else this.__parts.push(...this.processor.handleAttributeExpressions(n,i.name,i.strings,this.options));a++}else this.__parts.push(void 0),a++;return isCEPolyfill&&(document.adoptNode(e),customElements.upgrade(e)),e}}
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */const policy=window.trustedTypes&&trustedTypes.createPolicy("lit-html",{createHTML:e=>e}),commentMarker=` ${marker} `;class TemplateResult{constructor(e,t,o,r){this.strings=e,this.values=t,this.type=o,this.processor=r}getHTML(){const e=this.strings.length-1;let t="",o=!1;for(let r=0;r<e;r++){const e=this.strings[r],i=e.lastIndexOf("\x3c!--");o=(i>-1||o)&&-1===e.indexOf("--\x3e",i+1);const a=lastAttributeNameRegex.exec(e);t+=null===a?e+(o?commentMarker:nodeMarker):e.substr(0,a.index)+a[1]+a[2]+"$lit$"+a[3]+marker}return t+=this.strings[e],t}getTemplateElement(){const e=document.createElement("template");let t=this.getHTML();return void 0!==policy&&(t=policy.createHTML(t)),e.innerHTML=t,e}}
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */const isPrimitive=e=>null===e||!("object"==typeof e||"function"==typeof e),isIterable=e=>Array.isArray(e)||!(!e||!e[Symbol.iterator]);class AttributeCommitter{constructor(e,t,o){this.dirty=!0,this.element=e,this.name=t,this.strings=o,this.parts=[];for(let e=0;e<o.length-1;e++)this.parts[e]=this._createPart()}_createPart(){return new AttributePart(this)}_getValue(){const e=this.strings,t=e.length-1,o=this.parts;if(1===t&&""===e[0]&&""===e[1]){const e=o[0].value;if("symbol"==typeof e)return String(e);if("string"==typeof e||!isIterable(e))return e}let r="";for(let i=0;i<t;i++){r+=e[i];const t=o[i];if(void 0!==t){const e=t.value;if(isPrimitive(e)||!isIterable(e))r+="string"==typeof e?e:String(e);else for(const t of e)r+="string"==typeof t?t:String(t)}}return r+=e[t],r}commit(){this.dirty&&(this.dirty=!1,this.element.setAttribute(this.name,this._getValue()))}}class AttributePart{constructor(e){this.value=void 0,this.committer=e}setValue(e){e===noChange||isPrimitive(e)&&e===this.value||(this.value=e,isDirective(e)||(this.committer.dirty=!0))}commit(){for(;isDirective(this.value);){const e=this.value;this.value=noChange,e(this)}this.value!==noChange&&this.committer.commit()}}class NodePart{constructor(e){this.value=void 0,this.__pendingValue=void 0,this.options=e}appendInto(e){this.startNode=e.appendChild(createMarker()),this.endNode=e.appendChild(createMarker())}insertAfterNode(e){this.startNode=e,this.endNode=e.nextSibling}appendIntoPart(e){e.__insert(this.startNode=createMarker()),e.__insert(this.endNode=createMarker())}insertAfterPart(e){e.__insert(this.startNode=createMarker()),this.endNode=e.endNode,e.endNode=this.startNode}setValue(e){this.__pendingValue=e}commit(){if(null===this.startNode.parentNode)return;for(;isDirective(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=noChange,e(this)}const e=this.__pendingValue;e!==noChange&&(isPrimitive(e)?e!==this.value&&this.__commitText(e):e instanceof TemplateResult?this.__commitTemplateResult(e):e instanceof Node?this.__commitNode(e):isIterable(e)?this.__commitIterable(e):e===nothing?(this.value=nothing,this.clear()):this.__commitText(e))}__insert(e){this.endNode.parentNode.insertBefore(e,this.endNode)}__commitNode(e){this.value!==e&&(this.clear(),this.__insert(e),this.value=e)}__commitText(e){const t=this.startNode.nextSibling,o="string"==typeof(e=null==e?"":e)?e:String(e);t===this.endNode.previousSibling&&3===t.nodeType?t.data=o:this.__commitNode(document.createTextNode(o)),this.value=e}__commitTemplateResult(e){const t=this.options.templateFactory(e);if(this.value instanceof TemplateInstance&&this.value.template===t)this.value.update(e.values);else{const o=new TemplateInstance(t,e.processor,this.options),r=o._clone();o.update(e.values),this.__commitNode(r),this.value=o}}__commitIterable(e){Array.isArray(this.value)||(this.value=[],this.clear());const t=this.value;let o,r=0;for(const i of e)o=t[r],void 0===o&&(o=new NodePart(this.options),t.push(o),0===r?o.appendIntoPart(this):o.insertAfterPart(t[r-1])),o.setValue(i),o.commit(),r++;r<t.length&&(t.length=r,this.clear(o&&o.endNode))}clear(e=this.startNode){removeNodes(this.startNode.parentNode,e.nextSibling,this.endNode)}}class BooleanAttributePart{constructor(e,t,o){if(this.value=void 0,this.__pendingValue=void 0,2!==o.length||""!==o[0]||""!==o[1])throw new Error("Boolean attributes can only contain a single expression");this.element=e,this.name=t,this.strings=o}setValue(e){this.__pendingValue=e}commit(){for(;isDirective(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=noChange,e(this)}if(this.__pendingValue===noChange)return;const e=!!this.__pendingValue;this.value!==e&&(e?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name),this.value=e),this.__pendingValue=noChange}}class PropertyCommitter extends AttributeCommitter{constructor(e,t,o){super(e,t,o),this.single=2===o.length&&""===o[0]&&""===o[1]}_createPart(){return new PropertyPart(this)}_getValue(){return this.single?this.parts[0].value:super._getValue()}commit(){this.dirty&&(this.dirty=!1,this.element[this.name]=this._getValue())}}class PropertyPart extends AttributePart{}let eventOptionsSupported=!1;(()=>{try{const e={get capture(){return eventOptionsSupported=!0,!1}};window.addEventListener("test",e,e),window.removeEventListener("test",e,e)}catch(e){}})();class EventPart{constructor(e,t,o){this.value=void 0,this.__pendingValue=void 0,this.element=e,this.eventName=t,this.eventContext=o,this.__boundHandleEvent=e=>this.handleEvent(e)}setValue(e){this.__pendingValue=e}commit(){for(;isDirective(this.__pendingValue);){const e=this.__pendingValue;this.__pendingValue=noChange,e(this)}if(this.__pendingValue===noChange)return;const e=this.__pendingValue,t=this.value,o=null==e||null!=t&&(e.capture!==t.capture||e.once!==t.once||e.passive!==t.passive),r=null!=e&&(null==t||o);o&&this.element.removeEventListener(this.eventName,this.__boundHandleEvent,this.__options),r&&(this.__options=getOptions(e),this.element.addEventListener(this.eventName,this.__boundHandleEvent,this.__options)),this.value=e,this.__pendingValue=noChange}handleEvent(e){"function"==typeof this.value?this.value.call(this.eventContext||this.element,e):this.value.handleEvent(e)}}const getOptions=e=>e&&(eventOptionsSupported?{capture:e.capture,passive:e.passive,once:e.once}:e.capture);
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */function templateFactory(e){let t=templateCaches.get(e.type);void 0===t&&(t={stringsArray:new WeakMap,keyString:new Map},templateCaches.set(e.type,t));let o=t.stringsArray.get(e.strings);if(void 0!==o)return o;const r=e.strings.join(marker);return o=t.keyString.get(r),void 0===o&&(o=new Template(e,e.getTemplateElement()),t.keyString.set(r,o)),t.stringsArray.set(e.strings,o),o}const templateCaches=new Map,parts=new WeakMap,render$1=(e,t,o)=>{let r=parts.get(t);void 0===r&&(removeNodes(t,t.firstChild),parts.set(t,r=new NodePart(Object.assign({templateFactory:templateFactory},o))),r.appendInto(t)),r.setValue(e),r.commit()};
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */
class DefaultTemplateProcessor{handleAttributeExpressions(e,t,o,r){const i=t[0];if("."===i){return new PropertyCommitter(e,t.slice(1),o).parts}if("@"===i)return[new EventPart(e,t.slice(1),r.eventContext)];if("?"===i)return[new BooleanAttributePart(e,t.slice(1),o)];return new AttributeCommitter(e,t,o).parts}handleTextExpression(e){return new NodePart(e)}}const defaultTemplateProcessor=new DefaultTemplateProcessor;
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */"undefined"!=typeof window&&(window.litHtmlVersions||(window.litHtmlVersions=[])).push("1.4.1");const html=(e,...t)=>new TemplateResult(e,t,"html",defaultTemplateProcessor),getTemplateCacheKey=(e,t)=>`${e}--${t}`;
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */let compatibleShadyCSSVersion=!0;void 0===window.ShadyCSS?compatibleShadyCSSVersion=!1:void 0===window.ShadyCSS.prepareTemplateDom&&(console.warn("Incompatible ShadyCSS version detected. Please update to at least @webcomponents/webcomponentsjs@2.0.2 and @webcomponents/shadycss@1.3.1."),compatibleShadyCSSVersion=!1);const shadyTemplateFactory=e=>t=>{const o=getTemplateCacheKey(t.type,e);let r=templateCaches.get(o);void 0===r&&(r={stringsArray:new WeakMap,keyString:new Map},templateCaches.set(o,r));let i=r.stringsArray.get(t.strings);if(void 0!==i)return i;const a=t.strings.join(marker);if(i=r.keyString.get(a),void 0===i){const o=t.getTemplateElement();compatibleShadyCSSVersion&&window.ShadyCSS.prepareTemplateDom(o,e),i=new Template(t,o),r.keyString.set(a,i)}return r.stringsArray.set(t.strings,i),i},TEMPLATE_TYPES=["html","svg"],removeStylesFromLitTemplates=e=>{TEMPLATE_TYPES.forEach(t=>{const o=templateCaches.get(getTemplateCacheKey(t,e));void 0!==o&&o.keyString.forEach(e=>{const{element:{content:t}}=e,o=new Set;Array.from(t.querySelectorAll("style")).forEach(e=>{o.add(e)}),removeNodesFromTemplate(e,o)})})},shadyRenderSet=new Set,prepareTemplateStyles=(e,t,o)=>{shadyRenderSet.add(e);const r=o?o.element:document.createElement("template"),i=t.querySelectorAll("style"),{length:a}=i;if(0===a)return void window.ShadyCSS.prepareTemplateStyles(r,e);const s=document.createElement("style");for(let e=0;e<a;e++){const t=i[e];t.parentNode.removeChild(t),s.textContent+=t.textContent}removeStylesFromLitTemplates(e);const n=r.content;o?insertNodeIntoTemplate(o,s,n.firstChild):n.insertBefore(s,n.firstChild),window.ShadyCSS.prepareTemplateStyles(r,e);const l=n.querySelector("style");if(window.ShadyCSS.nativeShadow&&null!==l)t.insertBefore(l.cloneNode(!0),t.firstChild);else if(o){n.insertBefore(s,n.firstChild);const e=new Set;e.add(s),removeNodesFromTemplate(o,e)}},render=(e,t,o)=>{if(!o||"object"!=typeof o||!o.scopeName)throw new Error("The `scopeName` option is required.");const r=o.scopeName,i=parts.has(t),a=compatibleShadyCSSVersion&&11===t.nodeType&&!!t.host,s=a&&!shadyRenderSet.has(r),n=s?document.createDocumentFragment():t;if(render$1(e,n,Object.assign({templateFactory:shadyTemplateFactory(r)},o)),s){const e=parts.get(n);parts.delete(n);const o=e.value instanceof TemplateInstance?e.value.template:void 0;prepareTemplateStyles(r,n,o),removeNodes(t,t.firstChild),t.appendChild(n),parts.set(t,e)}!i&&a&&window.ShadyCSS.styleElement(t.host)};
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */
var _a;window.JSCompiler_renameProperty=(e,t)=>e;const defaultConverter={toAttribute(e,t){switch(t){case Boolean:return e?"":null;case Object:case Array:return null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){switch(t){case Boolean:return null!==e;case Number:return null===e?null:Number(e);case Object:case Array:return JSON.parse(e)}return e}},notEqual=(e,t)=>t!==e&&(t==t||e==e),defaultPropertyDeclaration={attribute:!0,type:String,converter:defaultConverter,reflect:!1,hasChanged:notEqual},STATE_HAS_UPDATED=1,STATE_UPDATE_REQUESTED=4,STATE_IS_REFLECTING_TO_ATTRIBUTE=8,STATE_IS_REFLECTING_TO_PROPERTY=16,finalized="finalized";class UpdatingElement extends HTMLElement{constructor(){super(),this.initialize()}static get observedAttributes(){this.finalize();const e=[];return this._classProperties.forEach((t,o)=>{const r=this._attributeNameForProperty(o,t);void 0!==r&&(this._attributeToPropertyMap.set(r,o),e.push(r))}),e}static _ensureClassProperties(){if(!this.hasOwnProperty(JSCompiler_renameProperty("_classProperties",this))){this._classProperties=new Map;const e=Object.getPrototypeOf(this)._classProperties;void 0!==e&&e.forEach((e,t)=>this._classProperties.set(t,e))}}static createProperty(e,t=defaultPropertyDeclaration){if(this._ensureClassProperties(),this._classProperties.set(e,t),t.noAccessor||this.prototype.hasOwnProperty(e))return;const o="symbol"==typeof e?Symbol():`__${e}`,r=this.getPropertyDescriptor(e,o,t);void 0!==r&&Object.defineProperty(this.prototype,e,r)}static getPropertyDescriptor(e,t,o){return{get(){return this[t]},set(r){const i=this[e];this[t]=r,this.requestUpdateInternal(e,i,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this._classProperties&&this._classProperties.get(e)||defaultPropertyDeclaration}static finalize(){const e=Object.getPrototypeOf(this);if(e.hasOwnProperty(finalized)||e.finalize(),this[finalized]=!0,this._ensureClassProperties(),this._attributeToPropertyMap=new Map,this.hasOwnProperty(JSCompiler_renameProperty("properties",this))){const e=this.properties,t=[...Object.getOwnPropertyNames(e),..."function"==typeof Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e):[]];for(const o of t)this.createProperty(o,e[o])}}static _attributeNameForProperty(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof e?e.toLowerCase():void 0}static _valueHasChanged(e,t,o=notEqual){return o(e,t)}static _propertyValueFromAttribute(e,t){const o=t.type,r=t.converter||defaultConverter,i="function"==typeof r?r:r.fromAttribute;return i?i(e,o):e}static _propertyValueToAttribute(e,t){if(void 0===t.reflect)return;const o=t.type,r=t.converter;return(r&&r.toAttribute||defaultConverter.toAttribute)(e,o)}initialize(){this._updateState=0,this._updatePromise=new Promise(e=>this._enableUpdatingResolver=e),this._changedProperties=new Map,this._saveInstanceProperties(),this.requestUpdateInternal()}_saveInstanceProperties(){this.constructor._classProperties.forEach((e,t)=>{if(this.hasOwnProperty(t)){const e=this[t];delete this[t],this._instanceProperties||(this._instanceProperties=new Map),this._instanceProperties.set(t,e)}})}_applyInstanceProperties(){this._instanceProperties.forEach((e,t)=>this[t]=e),this._instanceProperties=void 0}connectedCallback(){this.enableUpdating()}enableUpdating(){void 0!==this._enableUpdatingResolver&&(this._enableUpdatingResolver(),this._enableUpdatingResolver=void 0)}disconnectedCallback(){}attributeChangedCallback(e,t,o){t!==o&&this._attributeToProperty(e,o)}_propertyToAttribute(e,t,o=defaultPropertyDeclaration){const r=this.constructor,i=r._attributeNameForProperty(e,o);if(void 0!==i){const e=r._propertyValueToAttribute(t,o);if(void 0===e)return;this._updateState=8|this._updateState,null==e?this.removeAttribute(i):this.setAttribute(i,e),this._updateState=-9&this._updateState}}_attributeToProperty(e,t){if(8&this._updateState)return;const o=this.constructor,r=o._attributeToPropertyMap.get(e);if(void 0!==r){const e=o.getPropertyOptions(r);this._updateState=16|this._updateState,this[r]=o._propertyValueFromAttribute(t,e),this._updateState=-17&this._updateState}}requestUpdateInternal(e,t,o){let r=!0;if(void 0!==e){const i=this.constructor;o=o||i.getPropertyOptions(e),i._valueHasChanged(this[e],t,o.hasChanged)?(this._changedProperties.has(e)||this._changedProperties.set(e,t),!0!==o.reflect||16&this._updateState||(void 0===this._reflectingProperties&&(this._reflectingProperties=new Map),this._reflectingProperties.set(e,o))):r=!1}!this._hasRequestedUpdate&&r&&(this._updatePromise=this._enqueueUpdate())}requestUpdate(e,t){return this.requestUpdateInternal(e,t),this.updateComplete}async _enqueueUpdate(){this._updateState=4|this._updateState;try{await this._updatePromise}catch(e){}const e=this.performUpdate();return null!=e&&await e,!this._hasRequestedUpdate}get _hasRequestedUpdate(){return 4&this._updateState}get hasUpdated(){return 1&this._updateState}performUpdate(){if(!this._hasRequestedUpdate)return;this._instanceProperties&&this._applyInstanceProperties();let e=!1;const t=this._changedProperties;try{e=this.shouldUpdate(t),e?this.update(t):this._markUpdated()}catch(t){throw e=!1,this._markUpdated(),t}e&&(1&this._updateState||(this._updateState=1|this._updateState,this.firstUpdated(t)),this.updated(t))}_markUpdated(){this._changedProperties=new Map,this._updateState=-5&this._updateState}get updateComplete(){return this._getUpdateComplete()}_getUpdateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._updatePromise}shouldUpdate(e){return!0}update(e){void 0!==this._reflectingProperties&&this._reflectingProperties.size>0&&(this._reflectingProperties.forEach((e,t)=>this._propertyToAttribute(t,this[t],e)),this._reflectingProperties=void 0),this._markUpdated()}updated(e){}firstUpdated(e){}}UpdatingElement[_a=finalized]=!0;
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */
const legacyCustomElement=(e,t)=>(window.customElements.define(e,t),t),standardCustomElement=(e,t)=>{const{kind:o,elements:r}=t;return{kind:o,elements:r,finisher(t){window.customElements.define(e,t)}}},customElement=e=>t=>"function"==typeof t?legacyCustomElement(e,t):standardCustomElement(e,t),standardProperty=(e,t)=>"method"===t.kind&&t.descriptor&&!("value"in t.descriptor)?Object.assign(Object.assign({},t),{finisher(o){o.createProperty(t.key,e)}}):{kind:"field",key:Symbol(),placement:"own",descriptor:{},initializer(){"function"==typeof t.initializer&&(this[t.key]=t.initializer.call(this))},finisher(o){o.createProperty(t.key,e)}},legacyProperty=(e,t,o)=>{t.constructor.createProperty(o,e)};function property(e){return(t,o)=>void 0!==o?legacyProperty(e,t,o):standardProperty(e,t)}function query(e,t){return(t,o)=>{const r={get(){return this.renderRoot.querySelector(e)},enumerable:!0,configurable:!0};return void 0!==o?legacyQuery(r,t,o):standardQuery(r,t)}}const legacyQuery=(e,t,o)=>{Object.defineProperty(t,o,e)},standardQuery=(e,t)=>({kind:"method",placement:"prototype",key:t.key,descriptor:e}),supportsAdoptingStyleSheets=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,constructionToken=Symbol();class CSSResult{constructor(e,t){if(t!==constructionToken)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e}get styleSheet(){return void 0===this._styleSheet&&(supportsAdoptingStyleSheets?(this._styleSheet=new CSSStyleSheet,this._styleSheet.replaceSync(this.cssText)):this._styleSheet=null),this._styleSheet}toString(){return this.cssText}}const unsafeCSS=e=>new CSSResult(String(e),constructionToken),textFromCSSResult=e=>{if(e instanceof CSSResult)return e.cssText;if("number"==typeof e)return e;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${e}. Use 'unsafeCSS' to pass non-literal values, but\n            take care to ensure page security.`)},css=(e,...t)=>{const o=t.reduce((t,o,r)=>t+textFromCSSResult(o)+e[r+1],e[0]);return new CSSResult(o,constructionToken)};
/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at
 * http://polymer.github.io/PATENTS.txt
 */
(window.litElementVersions||(window.litElementVersions=[])).push("2.5.1");const renderNotImplemented={};class LitElement extends UpdatingElement{static getStyles(){return this.styles}static _getUniqueStyles(){if(this.hasOwnProperty(JSCompiler_renameProperty("_styles",this)))return;const e=this.getStyles();if(Array.isArray(e)){const t=(e,o)=>e.reduceRight((e,o)=>Array.isArray(o)?t(o,e):(e.add(o),e),o),o=t(e,new Set),r=[];o.forEach(e=>r.unshift(e)),this._styles=r}else this._styles=void 0===e?[]:[e];this._styles=this._styles.map(e=>{if(e instanceof CSSStyleSheet&&!supportsAdoptingStyleSheets){const t=Array.prototype.slice.call(e.cssRules).reduce((e,t)=>e+t.cssText,"");return unsafeCSS(t)}return e})}initialize(){super.initialize(),this.constructor._getUniqueStyles(),this.renderRoot=this.createRenderRoot(),window.ShadowRoot&&this.renderRoot instanceof window.ShadowRoot&&this.adoptStyles()}createRenderRoot(){return this.attachShadow(this.constructor.shadowRootOptions)}adoptStyles(){const e=this.constructor._styles;0!==e.length&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow?supportsAdoptingStyleSheets?this.renderRoot.adoptedStyleSheets=e.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet):this._needsShimAdoptedStyleSheets=!0:window.ShadyCSS.ScopingShim.prepareAdoptedCssText(e.map(e=>e.cssText),this.localName))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&void 0!==window.ShadyCSS&&window.ShadyCSS.styleElement(this)}update(e){const t=this.render();super.update(e),t!==renderNotImplemented&&this.constructor.render(t,this.renderRoot,{scopeName:this.localName,eventContext:this}),this._needsShimAdoptedStyleSheets&&(this._needsShimAdoptedStyleSheets=!1,this.constructor._styles.forEach(e=>{const t=document.createElement("style");t.textContent=e.cssText,this.renderRoot.appendChild(t)}))}render(){return renderNotImplemented}}LitElement.finalized=!0,LitElement.render=render,LitElement.shadowRootOptions={mode:"open"};
/**
 * @license
 * Copyright 2014-2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
const loaderPromise=new Promise((e,t)=>{if("undefined"!=typeof google&&google.charts&&"function"==typeof google.charts.load)e();else{let o=document.querySelector('script[src="proxy.php?url=https%3A%2F%2Fwww.gstatic.com%2Fcharts%2Floader.js"]');o||(o=document.createElement("script"),o.src="proxy.php?url=https%3A%2F%2Fwww.gstatic.com%2Fcharts%2Floader.js",document.head.appendChild(o)),o.addEventListener("load",e),o.addEventListener("error",t)}});async function load(e={}){await loaderPromise;const{version:t="current",packages:o=["corechart"],language:r=document.documentElement.lang||"en",mapsApiKey:i}=e;return google.charts.load(t,{packages:o,language:r,mapsApiKey:i})}async function dataTable(e){if(await load(),null==e)return new google.visualization.DataTable;if(e.getNumberOfRows)return e;if(e.cols)return new google.visualization.DataTable(e);if(e.length>0)return google.visualization.arrayToDataTable(e);if(0===e.length)throw new Error("Data was empty.");throw new Error("Data format was not recognized.")}async function createChartWrapper(e){return await load(),new google.visualization.ChartWrapper({container:e})}
/**
 * @license
 * Copyright 2014-2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */var __decorate$2D=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const DEFAULT_EVENTS=["ready","select"],CHART_TYPES={area:"AreaChart",bar:"BarChart","md-bar":"google.charts.Bar",bubble:"BubbleChart",calendar:"Calendar",candlestick:"CandlestickChart",column:"ColumnChart",combo:"ComboChart",gantt:"Gantt",gauge:"Gauge",geo:"GeoChart",histogram:"Histogram",line:"LineChart","md-line":"google.charts.Line",org:"OrgChart",pie:"PieChart",sankey:"Sankey",scatter:"ScatterChart","md-scatter":"google.charts.Scatter","stepped-area":"SteppedAreaChart",table:"Table",timeline:"Timeline",treemap:"TreeMap",wordtree:"WordTree"};class GoogleChart extends LitElement{constructor(){super(...arguments),this.type="column",this.events=[],this.options=void 0,this.cols=void 0,this.rows=void 0,this.data=void 0,this.view=void 0,this.selection=void 0,this.drawn=!1,this._data=void 0,this.chartWrapper=null,this.redrawTimeoutId=void 0}render(){return html`
      <div id="styles"></div>
      <div id="chartdiv"></div>
    `}firstUpdated(){createChartWrapper(this.shadowRoot.getElementById("chartdiv")).then(e=>{this.chartWrapper=e,this.typeChanged(),google.visualization.events.addListener(e,"ready",()=>{this.drawn=!0}),google.visualization.events.addListener(e,"select",()=>{this.selection=e.getChart().getSelection()}),this.propagateEvents(DEFAULT_EVENTS,e)})}updated(e){e.has("type")&&this.typeChanged(),(e.has("rows")||e.has("cols"))&&this.rowsOrColumnsChanged(),e.has("data")&&this.dataChanged(),e.has("view")&&this.viewChanged(),(e.has("_data")||e.has("options"))&&this.redraw(),e.has("selection")&&this.selectionChanged()}typeChanged(){if(null==this.chartWrapper)return;this.chartWrapper.setChartType(CHART_TYPES[this.type]||this.type);const e=this.chartWrapper.getChart();google.visualization.events.addOneTimeListener(this.chartWrapper,"ready",()=>{const t=this.chartWrapper.getChart();t!==e&&this.propagateEvents(this.events.filter(e=>!DEFAULT_EVENTS.includes(e)),t);const o=this.shadowRoot.getElementById("styles");o.children.length||this.localizeGlobalStylesheets(o),this.selection&&this.selectionChanged()}),this.redraw()}propagateEvents(e,t){for(const o of e)google.visualization.events.addListener(t,o,e=>{this.dispatchEvent(new CustomEvent(`google-chart-${o}`,{bubbles:!0,composed:!0,detail:{chart:this.chartWrapper.getChart(),data:e}}))})}selectionChanged(){if(null==this.chartWrapper)return;const e=this.chartWrapper.getChart();if(null!=e&&e.setSelection){if("timeline"===this.type){const t=JSON.stringify(e.getSelection());if(JSON.stringify(this.selection)===t)return}e.setSelection(this.selection)}}redraw(){null!=this.chartWrapper&&null!=this._data&&(this.chartWrapper.setDataTable(this._data),this.chartWrapper.setOptions(this.options||{}),this.drawn=!1,void 0!==this.redrawTimeoutId&&clearTimeout(this.redrawTimeoutId),this.redrawTimeoutId=window.setTimeout(()=>{this.chartWrapper.draw()},5))}get imageURI(){if(null==this.chartWrapper)return null;const e=this.chartWrapper.getChart();return e&&e.getImageURI()}viewChanged(){this.view&&(this._data=this.view)}async rowsOrColumnsChanged(){const{rows:e,cols:t}=this;if(e&&t)try{const o=await dataTable({cols:t});o.addRows(e),this._data=o}catch(e){this.shadowRoot.getElementById("chartdiv").textContent=e}}dataChanged(){let e,t=this.data;if(!t)return;let o=!1;try{t=JSON.parse(t)}catch(e){o="string"==typeof t||t instanceof String}e=o?fetch(t).then(e=>e.json()):Promise.resolve(t),e.then(dataTable).then(e=>{this._data=e})}localizeGlobalStylesheets(e){const t=Array.from(document.head.querySelectorAll('link[rel="stylesheet"][type="text/css"][id^="load-css-"]'));for(const o of t){const t=document.createElement("link");t.setAttribute("rel","stylesheet"),t.setAttribute("type","text/css"),t.setAttribute("href",o.getAttribute("href")),e.appendChild(t)}}}GoogleChart.styles=css`
    :host {
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      margin: 0;
      padding: 0;
      width: 400px;
      height: 300px;
    }

    :host([hidden]) {
      display: none;
    }

    :host([type="gauge"]) {
      width: 300px;
      height: 300px;
    }

    #chartdiv {
      width: 100%;
    }

    /* Workaround for slow initial ready event for tables. */
    .google-visualization-table-loadtest {
      padding-left: 6px;
    }
  `,__decorate$2D([property({type:String,reflect:!0})],GoogleChart.prototype,"type",void 0),__decorate$2D([property({type:Array})],GoogleChart.prototype,"events",void 0),__decorate$2D([property({type:Object,hasChanged:()=>!0})],GoogleChart.prototype,"options",void 0),__decorate$2D([property({type:Array})],GoogleChart.prototype,"cols",void 0),__decorate$2D([property({type:Array})],GoogleChart.prototype,"rows",void 0),__decorate$2D([property({type:String})],GoogleChart.prototype,"data",void 0),__decorate$2D([property({type:Object})],GoogleChart.prototype,"view",void 0),__decorate$2D([property({type:Array})],GoogleChart.prototype,"selection",void 0),__decorate$2D([property({type:Object})],GoogleChart.prototype,"_data",void 0),customElements.define("google-chart",GoogleChart);var __decorate$2C=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPrintjobsStatistics=class extends s$1{static get styles(){return i$4`
    .printjobs-statistics {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .box {
      display: grid;
      grid-template-columns: 50px 1fr;
      align-items: center;
      padding: 15px 20px;
      background-color: rgb(248, 248, 248);
      border-radius: 4px;
      flex: 1 1 240px;
      max-width: 240px;
    }

    wc-icon {
      width: 35px;
      height: 35px;
    }

    .text-wrapper {
      grid-column: 2;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      text-align: right;
    }

    .topic {
      font-size: 14px;
    }

    .value {
      font-size: 22px;
    }

    .status {
      grid-column: 1 / span 2;
      grid-row: 2;
      font-size: 12px;
      color: #bbbbbb;
      padding-top: 10px;
      border-top: 1px solid #ccc;
      display: flex;
      flex-direction: row;
    }
  `}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}constructor(){super()}connectedCallback(){super.connectedCallback(),this.loadData(),window.addEventListener("resize",()=>this.redrawChart())}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",()=>this.redrawChart())}redrawChart(){this.chart&&this.chart.draw(this.createData(),this.getChartOptions())}getChartOptions(){return{height:400,vAxis:{format:"#,## %",minValue:0},hAxis:{slantedText:!0,slantedTextAngle:45,showTextEvery:config.isMobile?7:2,titleTextStyle:{fontName:"Noto Sans",fontSize:12},textStyle:{fontName:"Noto Sans",fontSize:12}},legend:{position:"bottom"},backgroundColor:"rgb(248, 248, 248)",chartArea:{width:"100%",top:40}}}async loadData(){if(this.paymentPeriodData=await api.loadCurrentPaymentPeriodData(),!this.chart){const e=this.shadowRoot?.getElementById("conversionChart");e&&(google.charts.load("current",{packages:["corechart","bar"]}),google.charts.setOnLoadCallback(()=>{this.chart=new google.visualization.ColumnChart(e),this.chart.draw(this.createData(),this.getChartOptions())}))}}storageDisplay(e){return e<1024?e.toFixed(2).toLocaleString()+" Bytes":e<1048576?(e/1024).toFixed(2).toLocaleString()+" KB":e<1073741824?(e/1048576).toFixed(2).toLocaleString()+" MB":e<1099511627776?(e/1073741824).toFixed(2).toLocaleString()+" GB":(e/1099511627776).toFixed(2).toLocaleString()+" TB"}createData(){const e=new google.visualization.DataTable,t=new Intl.DateTimeFormat(void 0,{month:"short",day:"numeric"});if(e.addColumn("string","Date"),e.addColumn("number","Conversion Rate"),e.addColumn("number","Checkout Rate"),this.paymentPeriodData)for(let o=0;o<this.paymentPeriodData.ordersWithSaveToken.length;o++){const r=this.paymentPeriodData.ordersWithSaveToken[o],i=this.paymentPeriodData.shopTemplateLoads.find(e=>e.date==r.day),a=this.paymentPeriodData.savedSaveTokens.find(e=>e.day==r.day),s=[];if(!i)continue;const n=i&&a?100*a.count/i.value:0,l=i?100*r.count/i.value:0;s.push(t.format(new Date(r.day))),s.push(n),s.push(l),e.addRow(s)}return 0===e.getNumberOfRows()&&e.addRow([new Date,0,0]),e}render(){return x`
      <div class="printjobs-statistics">

        <div class="credits box" title="Used credits in this payment period.">
          <wc-icon primaryColor="gray" icon="coin"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">Credits</span>
            <span class="value">
              <span>${(this.paymentPeriodData?.credits??0).toLocaleString()}</span>
            </span>
          </div>
        </div>

        <div class="credits box" title="Accumulated storage in the designer side. Counted every week.">
          <wc-icon primaryColor="gray" icon="page"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">Total Storage (Designer)</span>
            <div class="value" >
              ${this.storageDisplay(this.paymentPeriodData?.storage?.overallDesignerSide??0)}
            </div>
          </div>
        </div>

        <div class="credits box" title="Accumulated image storage. Counted every week.">
          <wc-icon primaryColor="gray" icon="image"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">Images</span>
            <div class="value" >
              ${this.storageDisplay(this.paymentPeriodData?.storage?.images??0)}
            </div>
          </div>
        </div>

        <div class="credits box" title="Accumulated fonts storage. Counted every week.">
          <wc-icon primaryColor="gray" icon="font"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">Fonts</span>
            <div class="value" >
              ${this.storageDisplay(this.paymentPeriodData?.storage?.files??0)}
            </div>
          </div>
        </div>

        <div class="credits box" title="Accumulated snippet storage. Counted every week.">
          <wc-icon primaryColor="gray" icon="layout-snippet"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">Snippets</span>
            <div class="value" >
              ${this.storageDisplay(this.paymentPeriodData?.storage?.snippets??0)}
            </div>
          </div>
        </div>

        <div class="credits box" title="Accumulated 3d model storage. Counted every week.">
          <wc-icon primaryColor="gray" icon="cube-regular"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">3D Models</span>
            <div class="value" >
              ${this.storageDisplay(this.paymentPeriodData?.storage?.models3d??0)}
            </div>
          </div>
        </div>

        <div class="credits box" title="Accumulated user data storage like custom CSS and custom translations. Counted every week.">
          <wc-icon primaryColor="gray" icon="database"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">Settings Data</span>
            <div class="value" >
              ${this.storageDisplay(this.paymentPeriodData?.storage?.userData??0)}
            </div>
          </div>
        </div>

        <div class="credits box" title="Unexpired save tokens and save tokens with lifetime > 30 days.">
          <wc-icon primaryColor="gray" icon="database"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">Save Tokens</span>
            <div class="value" >
              ${this.storageDisplay(this.paymentPeriodData?.storage?.unexpiredShopTemplates??0)}
            </div>
          </div>
        </div>

        <div class="credits box" title="Customer images which were uploaded before 30 days.">
          <wc-icon primaryColor="gray" icon="database"></wc-icon>
          <div class="text-wrapper">
            <span class="topic">Customer Images</span>
            <div class="value" >
              ${this.storageDisplay(this.paymentPeriodData?.storage?.shopImagesOlderThan31Days??0)}
            </div>
          </div>
        </div>

      </div>

      <div id="conversionChart" style="margin: 10px 0px;"></div>
  `}};__decorate$2C([e$3({attribute:!1,type:Object})],WcPrintjobsStatistics.prototype,"paymentPeriodData",void 0),WcPrintjobsStatistics=__decorate$2C([e$4("wc-printjobs-statistics")],WcPrintjobsStatistics);const dashboardStyles=i$4`
  .dashboard {
    font-family: var(--printess-text-font);
    color: #555555;    
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
    color: #555555;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    h3.topic {
      font-size: 20px;
      margin: 20px 0;
    }

    .subtopic {
      font-size: 14px;
    }
  }
`;var __decorate$2B=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const months$2=["January","February","March","April","May","June","July","August","September","October","November","December"];let WcDailyAdminCreditsChart=class extends s$1{static get styles(){return i$4`
      div#admin_credits_chart {
        margin-right: 10px;
        min-height: 600px;
      }
    `}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadDailyAdminCredits(e){const t=await api.loadDailyAdminCredits(e);t instanceof ServerErrorResponse$2?this.showError(t):(this.dailyCredits=t.creditsDays,this.renderGoogleChart())}renderGoogleChart(){const e=this.dailyCredits?this.dailyCredits:[],t=document.createElement("div");t.setAttribute("id","admin_credits_chart"),google.charts.load("current",{packages:["corechart","line"]}),google.charts.setOnLoadCallback(function(){const o=new google.visualization.DataTable;o.addColumn("string","Day of month"),o.addColumn("number","Credits"),o.addColumn({type:"string",role:"tooltip"}),o.addRows(e.map(e=>[`${new Date(e.d).getDate()}. ${months$2[new Date(e.d).getMonth()].slice(0,3)}`,e.a,`${new Date(e.d).toLocaleDateString()} \n Credits: ${e.a.toLocaleString()}`]));const r={colors:["#e35fbc"],tooltip:{isHtml:!0},legend:"none",backgroundColor:"rgb(248, 248, 248)",chartArea:{left:80,right:0,top:40,width:"100%"},curveType:"function",vAxis:{viewWindow:{min:0},textStyle:{fontName:"Noto Sans",fontSize:12}},hAxis:{textStyle:{fontName:"Noto Sans",fontSize:12},slantedText:!0,slantedTextAngle:30,showTextEvery:config.isMobile?5:30,title:"",titleTextStyle:{fontName:"Noto Sans",fontSize:0}}},i=new google.visualization.LineChart(t);i.draw(o,r),window.addEventListener("resize",()=>i.draw(o,r))}),this.shadowRoot?.appendChild(t)}connectedCallback(){super.connectedCallback();const e=new Date,t=new Date;e.setDate(e.getDate()-580),e.setHours(0),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0),t.setDate(t.getDate()),t.setHours(23),t.setMinutes(59),t.setSeconds(59),t.setMilliseconds(999),this.loadDailyAdminCredits({includingStartDate:e,includingEndDate:t})}};__decorate$2B([e$3({type:Array})],WcDailyAdminCreditsChart.prototype,"dailyCredits",void 0),WcDailyAdminCreditsChart=__decorate$2B([e$4("wc-daily-admin-credits-chart")],WcDailyAdminCreditsChart);var __decorate$2A=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const months$1=["January","February","March","April","May","June","July","August","September","October","November","December"];let WcDailyCreditsChart=class extends s$1{static get styles(){return i$4`
      div#credits_chart, div#pages_chart, div#storage_chart, div#jobs_chart {
        margin-right: 10px;
        min-height: 300px;
      }

      .chart-container {
        background-color: rgb(248, 248, 248);
        margin: 0 10px 10px 0;
        padding: 20px;
        border-radius: 4px;
      }

      p.chart-title {
        text-align: center;
        margin: 0;
      }

      .status {
        grid-column: 1 / span 2;
        grid-row: 2;
        font-size: 12px;
        color: #bbbbbb;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      wc-icon {
        width: 15px;
        height: 15px;
        margin-right: 10px;
      }
    `}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadDailyUserCredits(e){const t=await api.loadDailyUsage(e);t instanceof ServerErrorResponse$2?this.showError(t):(this.dailyUsage=t.days,this.renderGoogleChart("credits"),this.renderGoogleChart("jobs"),this.renderGoogleChart("pages"),this.renderGoogleChart("storage"))}renderGoogleChart(e){const t=this.dailyUsage?this.dailyUsage:[],o=this.shadowRoot?.getElementById(e+"_chart");google.charts.load("current",{packages:["corechart","line"]}),google.charts.setOnLoadCallback(function(){if(!o)return;const r=new google.visualization.DataTable;r.addColumn("string","Day of month"),r.addColumn("number",e),r.addColumn({type:"string",role:"tooltip"}),r.addRows(t.map(t=>[`${new Date(t.date).getDate()}. ${months$1[new Date(t.date).getMonth()].slice(0,3)}`,t[e],`${new Date(t.date).toLocaleDateString()} \n ${e}: ${t[e].toLocaleString()}`]));const i={colors:["#e35fbc"],tooltip:{isHtml:!0},legend:"none",backgroundColor:"rgb(248, 248, 248)",chartArea:{left:80,right:0,top:40,width:"100%"},curveType:"function",vAxis:{viewWindow:{min:0},textStyle:{fontName:"Noto Sans",fontSize:12}},hAxis:{textStyle:{fontName:"Noto Sans",fontSize:12},slantedText:!0,slantedTextAngle:45,showTextEvery:config.isMobile?5:2,title:"Date",titleTextStyle:{fontName:"Noto Sans",fontSize:12}}},a=new google.visualization.LineChart(o);a.draw(r,i),window.addEventListener("resize",()=>a.draw(r,i))})}connectedCallback(){super.connectedCallback();const e=new Date,t=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate()-30)),o=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),23,59,59,999));this.loadDailyUserCredits({includingStartDate:t,includingEndDate:o})}render(){return x`
    <div>

      <div class="chart-container">
        <p class="chart-title">Daily used credits</p>
        <div id="credits_chart"></div>
        <div class="status">
          <wc-icon primaryColor="lightgray" icon="calendar-light"></wc-icon>
          Credits used in the last 30 days
        </div>
      </div>

      <div class="chart-container">
        <p class="chart-title">Daily produced jobs</p>
        <div id="jobs_chart"></div>
        <div class="status">
          <wc-icon primaryColor="lightgray" icon="calendar-light"></wc-icon>
          Jobs produced in the last 30 days
        </div>
      </div>




    </div>
    `}};__decorate$2A([e$3({type:Array})],WcDailyCreditsChart.prototype,"dailyUsage",void 0),WcDailyCreditsChart=__decorate$2A([e$4("wc-daily-credits-chart")],WcDailyCreditsChart);
/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const{I:l$1}=Z,e=e=>void 0===e.strings,c$1=()=>document.createComment(""),r=(e,t,o)=>{var r;const i=e._$AA.parentNode,a=void 0===t?e._$AB:t._$AA;if(void 0===o){const t=i.insertBefore(c$1(),a),r=i.insertBefore(c$1(),a);o=new l$1(t,r,e,e.options)}else{const t=o._$AB.nextSibling,s=o._$AM,n=s!==e;if(n){let t;null===(r=o._$AQ)||void 0===r||r.call(o,e),o._$AM=e,void 0!==o._$AP&&(t=e._$AU)!==s._$AU&&o._$AP(t)}if(t!==a||n){let e=o._$AA;for(;e!==t;){const t=e.nextSibling;i.insertBefore(e,a),e=t}}}return o},u$1=(e,t,o=e)=>(e._$AI(t,o),e),f={},s=(e,t=f)=>e._$AH=t,m=e=>e._$AH,p=e=>{var t;null===(t=e._$AP)||void 0===t||t.call(e,!1,!0);let o=e._$AA;const r=e._$AB.nextSibling;for(;o!==r;){const e=o.nextSibling;o.remove(),o=e}},u=(e,t,o)=>{const r=new Map;for(let i=t;i<=o;i++)r.set(e[i],i);return r},c=e$2(class extends i{constructor(e){if(super(e),e.type!==t.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,t,o){let r;void 0===o?o=t:void 0!==t&&(r=t);const i=[],a=[];let s=0;for(const t of e)i[s]=r?r(t,s):s,a[s]=o(t,s),s++;return{values:a,keys:i}}render(e,t,o){return this.dt(e,t,o).values}update(e,[t,o,i]){var a;const n=m(e),{values:l,keys:c}=this.dt(t,o,i);if(!Array.isArray(n))return this.ht=c,l;const d=null!==(a=this.ht)&&void 0!==a?a:this.ht=[],h=[];let g,f,b=0,y=n.length-1,v=0,w=l.length-1;for(;b<=y&&v<=w;)if(null===n[b])b++;else if(null===n[y])y--;else if(d[b]===c[v])h[v]=u$1(n[b],l[v]),b++,v++;else if(d[y]===c[w])h[w]=u$1(n[y],l[w]),y--,w--;else if(d[b]===c[w])h[w]=u$1(n[b],l[w]),r(e,h[w+1],n[b]),b++,w--;else if(d[y]===c[v])h[v]=u$1(n[y],l[v]),r(e,n[b],n[y]),y--,v++;else if(void 0===g&&(g=u(c,v,w),f=u(d,b,y)),g.has(d[b]))if(g.has(d[y])){const t=f.get(c[v]),o=void 0!==t?n[t]:null;if(null===o){const t=r(e,n[b]);u$1(t,l[v]),h[v]=t}else h[v]=u$1(o,l[v]),r(e,n[b],o),n[t]=null;v++}else p(n[y]),y--;else p(n[b]),b++;for(;v<=w;){const t=r(e,h[w+1]);u$1(t,l[v]),h[v++]=t}for(;b<=y;){const e=n[b++];null!==e&&p(e)}return this.ht=c,s(e,h),T}});
/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */var __decorate$2z=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcSnippetStatistics=class extends s$1{constructor(){super(...arguments),this.mode="stickers",this.availableMonths=[],this.selectedMonthKey=""}static get styles(){return i$4`
    :host {
      --image-width: 100px;
    }

    .snippet-statistics-container {
      padding: 20px;
      background-color: rgb(248, 248, 248);
      margin-bottom: 10px;
    }

    .header {
      text-align: center;
      margin: 0;
      margin-bottom: 16px;
    }

    .img-c {
      width: var(--image-width);
      height: var(--image-width);
      border: 1px solid var(--lumo-base-color);
      position: relative;
    }

    .img {
      max-width: var(--image-width);
      max-height: var(--image-width);
      margin-left: auto;
      margin-right: auto;
    }

    .flex {
      display: flex;
    }

    .vc {
      align-items: center;
    }

    .c {
      font-size: 14px;
      align-self: center;
      background: var(--lumo-base-color);
      color: white;
      border-top-left-radius: 5px;
      min-width: 20px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: -1px;
      right: -1px;
      padding: 0px 5px;
    }

    .con {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      background: rgb(248, 248, 248);
      margin-bottom: 10px;
    }
    `}connectedCallback(){super.connectedCallback(),this.loadState()}async loadState(){this.layouts=await api.loadLayoutSnippetStatistics(),this.stickers=await api.loadStickerSnippetStatistics(),this.filterMonthsAndYears()}filterMonthsAndYears(){"layouts"==this.mode&&this.layouts?this.availableMonths=this.getAvailableYearMonths(this.layouts):this.stickers&&(this.availableMonths=this.getAvailableYearMonths(this.stickers))}getAvailableYearMonths(e){const t=new Set;return Object.keys(e.statistics).forEach(e=>{const o=new Date(e);if(!isNaN(o.getTime())){const e=o.getFullYear(),r=o.getMonth()+1;t.add(`${e}-${r.toString().padStart(2,"0")}`)}}),Array.from(t).map(e=>{const[t,o]=e.split("-").map(Number);return{year:t,month:o,displayText:new Date(t,o-1).toLocaleDateString("en-US",{month:"long",year:"numeric"}),key:e}}).sort((e,t)=>e.year!==t.year?t.year-e.year:t.month-e.month)}handleModeChange(e){const t=e.target;this.mode=t.value,this.filterMonthsAndYears()}handleMonthChange(e){const t=e.target;this.selectedMonthKey=t.value}renderSnippets(e){if(!e)return"";const[t,o]=this.selectedMonthKey.split("-").map(Number);let r;if(t&&o){const i=new Date(Date.UTC(t,o-1,1,0,0,0,0)).toISOString().replace(/\.\d{3}Z/,""),a=e.statistics[i];r=Object.keys(a).map(e=>({snippetId:e,count:a[e]})).sort((e,t)=>t.count-e.count)}else r=Object.keys(e.overall).map(t=>({snippetId:t,count:e.overall[t]})).sort((e,t)=>t.count-e.count);return c(r,e=>e.snippetId,t=>{const o=e.snippets[t.snippetId],r=o?o.imageUrl:"";return x`
        <div class="flex">
          <!-- <div>${t.snippetId}</div> -->
          <div class="img-c flex vc">${r?x`
            <img src=${r} loading="lazy" class="img" title="${o.scopeId}"/>
            <div class="flex vc c">${t.count}</div>
          `:""}
          </div>
        </div>
      `})}render(){return x`
      <div class="snippet-statistics-container">
        <p class="header">Snippets Statistics -
          <select @change=${this.handleModeChange}>
            <option value="stickers">Stickers</option>
            <option value="layouts">Layouts</option>
          </select>
          <select
            id="month-select"
            .value="${this.selectedMonthKey}"
            @change="${this.handleMonthChange}"
          >
            <option value="">Show all</option>
            ${this.availableMonths.map(e=>x`
              <option value="${e.key}">${e.displayText}</option>
            `)}
          </select>
        </p>
          <div class="con">
            ${this.renderSnippets("stickers"==this.mode?this.stickers:this.layouts)}
          </div>
      </div>
    `}};__decorate$2z([e$3({attribute:!0,type:Object})],WcSnippetStatistics.prototype,"layouts",void 0),__decorate$2z([e$3({attribute:!0,type:Object})],WcSnippetStatistics.prototype,"stickers",void 0),__decorate$2z([t$1()],WcSnippetStatistics.prototype,"mode",void 0),__decorate$2z([t$1()],WcSnippetStatistics.prototype,"availableMonths",void 0),__decorate$2z([t$1()],WcSnippetStatistics.prototype,"selectedMonthKey",void 0),WcSnippetStatistics=__decorate$2z([e$4("wc-snippet-statistics")],WcSnippetStatistics);var __decorate$2y=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const aiColumns=[{k:"bgr",d:"Remove Background",unit:"count"},{k:"fs",d:"Face Segmentation",unit:"count"},{k:"fs-cp",d:"Face Segmentation (CutoutPro)",unit:"count"},{k:"sa",d:"Segment Anything",unit:"count"},{k:"sa3",d:"Segment Anything 3",unit:"count"},{k:"swap",d:"Face Swap",unit:"count"},{k:"cc",d:"Cut Contour",unit:"count"},{k:"tisdxl",d:"SDXL",unit:"count"},{k:"tifs",d:"Flux Schnell",unit:"count"},{k:"tifd",d:"Flux Dev",unit:"count"},{k:"tifp",d:"Flux Pro",unit:"count"},{k:"tifu",d:"Flux Ultra",unit:"count"},{k:"tinb",d:"Nano Banana",unit:"count"},{k:"tinbp",d:"Nano Banana Pro",unit:"count"},{k:"tifpk",d:"Flux Pro Kontext",unit:"count"},{k:"tif2k4",d:"Flux 2 Klein 4B",unit:"count"},{k:"gpt-image-1-low",d:"GPT Image 1 - low",unit:"count"},{k:"gpt-image-1-medium",d:"GPT Image 1 - medium",unit:"count"},{k:"gpt-image-1-high",d:"GPT Image 1 - high",unit:"count"},{k:"gpt-image-1.5-low",d:"GPT Image 1.5 - low",unit:"count"},{k:"gpt-image-1.5-medium",d:"GPT Image 1.5 - medium",unit:"count"},{k:"gpt-image-1.5-high",d:"GPT Image 1.5 - high",unit:"count"},{k:"ui",d:"Upscale",unit:"megapixel"},{k:"p",d:"LLM",unit:"count"},{k:"pb",d:"Photobook",unit:"count"}],aiUsageCounters=aiColumns.map(e=>e.k),aiLabels=aiColumns.map(e=>e.d),googleChartColors=["#3366cc","#dc3912","#ff9900","#109618","#990099","#0099c6","#dd4477","#66aa00","#b82e2e","#316395","#994499","#22aa99","#aaaa11","#6633cc","#e67300","#8b0707","#651067","#329262","#5574a6","#3b3eac","#b77322","#16d620","#b91383","#f4359e","#9c5935"];function buildTooltipHtml(e,t){const o=t.map((e,t)=>({label:aiLabels[t],value:e,color:googleChartColors[t%googleChartColors.length],unit:aiColumns[t].unit})).filter(e=>e.value>0);return`\n    <div style="padding:6px;white-space:nowrap">\n      <b>${e}</b>\n      <br/>\n      ${o.map(e=>`<span style="color:${e.color}">●</span> ${e.label}: ${e.value.toLocaleString()} (${e.unit})`).join("<br/>")}\n    </div>\n  `}let WcAiCreditsChart=class extends s$1{constructor(){super(...arguments),this.mode="entries",this.entries=30,this.months=12}static get styles(){return i$4`
      div#ai_chart {
        margin-right: 10px;
        min-height: 600px;
        position: relative;
        overflow: visible;
      }
      .google-visualization-tooltip {
        pointer-events: none !important;
        position: absolute !important;
        background: white !important;
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      .chart-container {
        background-color: rgb(248, 248, 248);
        margin: 0 10px 10px 0;
        padding: 20px;
        border-radius: 4px;
      }

      p.chart-title {
        text-align: center;
        margin: 0;
      }

      .status {
        grid-column: 1 / span 2;
        grid-row: 2;
        font-size: 12px;
        color: #bbbbbb;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      wc-icon {
        width: 15px;
        height: 15px;
        margin-right: 10px;
      }
    `}connectedCallback(){super.connectedCallback(),this.loadPromise=google.charts.load("current",{packages:["corechart","line"]}),this.loadAiCredits(),this.loadBookedPlan()}requestUpdate(e,t,o){super.requestUpdate(e,t,o),"entries"!==e&&"mode"!==e&&"months"!==e||this.loadAiCredits()}showError(e){console.log("error msg: ",e.message,"error code: ",e.code),alert(e.message)}async loadBookedPlan(){const e=await api.loadUserBookedInfo();e instanceof ServerErrorResponse$2?this.showError(e):this.bookedInfo=e}async loadAiCredits(){if(!(this.mode&&this.entries&&this.months))return;const e="entries"===this.mode?this.entries:31*this.months,t=await api.loadAiCredits(e);t instanceof ServerErrorResponse$2?this.showError(t):(this.aiCredits=t,this.loadPromise&&await this.loadPromise,this.renderGoogleChart())}createData(){const e=this.aiCredits,t=new google.visualization.DataTable;t.addColumn("string","Date");for(const e of aiLabels)t.addColumn("number",e),t.addColumn({type:"string",role:"tooltip",p:{html:!0}});if(e){const o=[];if("entries"===this.mode)for(const t in e){const r=e[t],i=aiUsageCounters.map(e=>r[e]??0),a=new Date(t).toLocaleDateString(),s=buildTooltipHtml(a,i);o.push([a,...i.flatMap(e=>[e,s])])}else if("months"===this.mode){let t=null,r="";for(const i in e){const a=e[i],s=i.substring(0,7);if(r!==s){if(t){const e=new Intl.DateTimeFormat(navigator.language,{year:"numeric",month:"long"}).format(new Date(r+"-01")),i=aiUsageCounters.map(e=>t[e]??0),a=buildTooltipHtml(e,i);o.push([e,...i.flatMap(e=>[e,a])])}if(o.length===this.months)break;r=s,t={}}if(t)for(const e of aiUsageCounters)t[e]||(t[e]=0),t[e]+=a[e]??0}if(t&&o.length<this.months){const e=new Intl.DateTimeFormat(navigator.language,{year:"numeric",month:"long"}).format(new Date(r+"-01")),i=aiUsageCounters.map(e=>t[e]??0),a=buildTooltipHtml(e,i);o.push([e,...i.flatMap(e=>[e,a])])}}t.addRows(o.reverse())}for(let e=0;e<aiColumns.length;e++){const o=2*e+1;new google.visualization.NumberFormat({pattern:`# (${aiColumns[e].unit})`}).format(t,o)}return t}createChartOptions(){return{isStacked:!0,tooltip:{isHtml:!0},legend:{position:"top",maxLines:3},chartArea:{left:80,right:0,top:60,width:"100%"},vAxis:{viewWindow:{min:0},textStyle:{fontName:"Noto Sans",fontSize:12}},hAxis:{textStyle:{fontName:"Noto Sans",fontSize:12},slantedText:!0,slantedTextAngle:30,title:"",titleTextStyle:{fontName:"Noto Sans",fontSize:0},format:"yyyy-MM-dd"}}}async renderGoogleChart(){let e=this.shadowRoot?.getElementById("ai_chart");e&&!this.chart&&(this.chart=new google.visualization.ColumnChart(e),window.addEventListener("resize",()=>this.chart?.draw(this.createData(),this.createChartOptions()))),this.chart&&this.chart.draw(this.createData(),this.createChartOptions())}render(){return x`
      <div class="chart-container">
        <p class="chart-title" style="margin-bottom: 16px">
          Used AI Volume -
          <select @change=${e=>this.mode="entries"===e.target.value?"entries":"months"}>
            <option value="entries">Entries</option>
            <option value="months">Months</option>
          </select>
          ${"entries"===this.mode?x`
          <select @change=${e=>this.entries=Number.parseInt(e.target.value,10)}>
            <option value="7" .selected=${7===this.entries}>7 Entries</option>
            <option value="14" .selected=${14===this.entries}>14 Entries</option>
            <option value="30" .selected=${30===this.entries}>30 Entries</option>
            <option value="60" .selected=${60===this.entries}>60 Entries</option>
            <option value="90" .selected=${90===this.entries}>90 Entries</option>
            <option value="120" .selected=${120===this.entries}>120 Entries</option>
            <option value="150" .selected=${150===this.entries}>150 Entries</option>
            <option value="180" .selected=${180===this.entries}>180 Entries</option>
            <option value="365" .selected=${365===this.entries}>365 Entries</option>
          </select>
          `:x`
          <select @change=${e=>this.months=Number.parseInt(e.target.value,10)}>
            <option value="1" .selected=${1===this.months}>1 Month</option>
            <option value="3" .selected=${3===this.months}>3 Months</option>
            <option value="6" .selected=${6===this.months}>6 Months</option>
            <option value="12" .selected=${12===this.months}>12 Months</option>
          </select>
          `}
        </p>
        <div id="ai_chart"></div>
        <div>
        Remove Background, Face Segmentation, Face Swap, Cut Contour, Flux Ultra, Upscale, LLM, Photobook: Current display value represents the count
        <br />
        SDXL, Flux Schnell, Flux Dev, Flux Pro: Current display value represents mega pixel
        <br />
        Those numbers are not the final AI credits. This will come later.
        </div>
        <div class="status">
          <wc-icon primaryColor="lightgray" icon="calendar-light"></wc-icon>
          AI Credits used in the last days
        </div>
      </div>
    `}};__decorate$2y([e$3({type:Object})],WcAiCreditsChart.prototype,"aiCredits",void 0),__decorate$2y([e$3({type:Object})],WcAiCreditsChart.prototype,"bookedInfo",void 0),__decorate$2y([e$3({type:String,attribute:!0})],WcAiCreditsChart.prototype,"mode",void 0),__decorate$2y([e$3({type:Number,attribute:!0})],WcAiCreditsChart.prototype,"entries",void 0),__decorate$2y([e$3({type:Number,attribute:!0})],WcAiCreditsChart.prototype,"months",void 0),WcAiCreditsChart=__decorate$2y([e$4("wc-ai-credits-chart")],WcAiCreditsChart);var __decorate$2x=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const months=["January","February","March","April","May","June","July","August","September","October","November","December"];let WcDailyMockupChart=class extends s$1{static get styles(){return i$4`
      div#mockup_chart {
        margin-right: 10px;
        min-height: 300px;
      }

      .chart-container {
        background-color: rgb(248, 248, 248);
        margin: 0 10px 10px 0;
        padding: 20px;
        border-radius: 4px;
      }

      p.chart-title {
        text-align: center;
        margin: 0;
      }

      .status {
        grid-column: 1 / span 2;
        grid-row: 2;
        font-size: 12px;
        color: #bbbbbb;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      wc-icon {
        width: 15px;
        height: 15px;
        margin-right: 10px;
      }
    `}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadDailyUserCredits(e){const t=await api.loadMockupStatisticsLast(e);t instanceof ServerErrorResponse$2?this.showError(t):(this.dailyUsage=t,this.dailyUsage.sort((e,t)=>new Date(e.date).getTime()-new Date(t.date).getTime()),this.renderGoogleChart("mockup"))}renderGoogleChart(e){const t=this.dailyUsage?this.dailyUsage:[],o=this.shadowRoot?.getElementById(e+"_chart");google.charts.load("current",{packages:["corechart","line"]}),google.charts.setOnLoadCallback(function(){if(!o)return;const r=new google.visualization.DataTable;r.addColumn("string","Day of month"),r.addColumn("number",e),r.addColumn({type:"string",role:"tooltip"}),r.addRows(t.map(t=>[`${new Date(t.date).getDate()}. ${months[new Date(t.date).getMonth()].slice(0,3)}`,t.value,`${new Date(t.date).toLocaleDateString()} \n ${e}: ${t.value.toLocaleString()}`]));const i={colors:["#e35fbc"],tooltip:{isHtml:!0},legend:"none",backgroundColor:"rgb(248, 248, 248)",chartArea:{left:80,right:0,top:40,width:"100%"},curveType:"function",vAxis:{viewWindow:{min:0},textStyle:{fontName:"Noto Sans",fontSize:12}},hAxis:{textStyle:{fontName:"Noto Sans",fontSize:12},slantedText:!0,slantedTextAngle:45,showTextEvery:config.isMobile?5:2,title:"Date",titleTextStyle:{fontName:"Noto Sans",fontSize:12}}},a=new google.visualization.LineChart(o);a.draw(r,i),window.addEventListener("resize",()=>a.draw(r,i))})}connectedCallback(){super.connectedCallback(),this.loadDailyUserCredits(31)}render(){return x`
    <div>
      <div class="chart-container">
        <p class="chart-title">Daily used Mockup credits</p>
        <div id="mockup_chart"></div>
        <div class="status">
          <wc-icon primaryColor="lightgray" icon="calendar-light"></wc-icon>
          Mockup credits used in the last 30 days
        </div>
      </div>
    </div>
    `}};__decorate$2x([e$3({type:Array})],WcDailyMockupChart.prototype,"dailyUsage",void 0),WcDailyMockupChart=__decorate$2x([e$4("wc-daily-mockup-chart")],WcDailyMockupChart);var __decorate$2w=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDashboardPage=class extends s$1{constructor(){super(...arguments),this.aiEntries=30}static get styles(){return[dashboardStyles,i$4`
      .chart-container {
        background-color: rgb(248, 248, 248);
        margin: 0 10px 10px 0;
        padding: 20px;
        border-radius: 4px;
      }

      p.chart-title {
        text-align: center;
        margin: 0;
      }

      .status {
        grid-column: 1 / span 2;
        grid-row: 2;
        font-size: 12px;
        color: #bbbbbb;
        padding-top: 10px;
        border-top: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      wc-icon {
        width: 15px;
        height: 15px;
        margin-right: 10px;
      }
    `]}connectedCallback(){super.connectedCallback(),location.hash="#dashboard"}renderStatistics(){return new WcPrintjobsStatistics}render(){return x`
      <div class="dashboard">
        <h3 class="topic">Dashboard</h3>

        <div class="statistics-container">
          ${this.renderStatistics()}
        </div>

        <wc-snippet-statistics></wc-snippet-statistics>
        <wc-ai-credits-chart></wc-ai-credits-chart>
        <wc-daily-credits-chart></wc-daily-credits-chart>
        <wc-daily-mockup-chart></wc-daily-mockup-chart>

        ${adm.canUseAdminMode?x`
          <div class="chart-container">
            <p class="chart-title">All daily used Credits</p>
            <wc-daily-admin-credits-chart></wc-daily-admin-credits-chart>           
          </div>
        `:""}
      </div>
  `}};__decorate$2w([e$3({type:Number,attribute:!1})],WcDashboardPage.prototype,"aiEntries",void 0),WcDashboardPage=__decorate$2w([e$4("wc-dashboard-page")],WcDashboardPage);const accountStyles=i$4`
  .account-page {
    font-family: var(--printess-text-font);
    font-size: 14px;
    font-weight: 400;
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
  }

  .card {
    margin-top: 30px;
    margin-bottom: 70px;
  }

  wc-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .pink { border-bottom: 2px solid var(--printess-pink); }
  .green { border-bottom: 2px solid var(--printess-green); }
  .red { border-bottom: 2px solid var(--printess-red); }
  .blue { border-bottom: 2px solid var(--printess-blue); }

  .table-header {
    padding-left: 20px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
  }

  .table-body p {
    padding: 0 20px;
  }

  .pink .table-header { background-color: var(--printess-pink); }
  .green .table-header { background-color: var(--printess-green); }
  .red .table-header { background-color: var(--printess-red); }
  .blue .table-header { background-color: var(--printess-blue); }

  dl {
    display: grid;
    margin-top: 0;
    margin-bottom: 0;
    grid-template-columns: 60px 1fr;
  }

  dt, dd {
    display: flex;
    line-height: 25px;
    margin-left: 0;
    text-align: left;
    padding: 10px;
    align-items: center;
  }

  dt {
    padding-left: 20px;
  }

  dd {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
  }

  .token {
    width: 70%;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pink dt:nth-of-type(even), .pink dd:nth-of-type(even) {
    background-color: var(--printess-lightpink);
  }
  .lightgreen {
    background-color: var(--printess-lightgreen);
  }
  .blue dt:nth-of-type(even), .blue dd:nth-of-type(even) {
    background-color: var(--printess-lightblue);
  }

  button {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
  }

  .settings {
    padding: 7px 20px;
    margin: 20px 15px;
  }

  .pink button { background-color: var(--printess-pink); }
  .green button { background-color: var(--printess-green); }
  .red button { background-color: var(--printess-red); }
  .blue button { background-color: var(--printess-blue); }

  .pink .hide-token {
    background-color: var(--printess-pink);
    border: 1px solid var(--printess-pink);
    color: var(--printess-pink);
  }
  .green .hide-token {
    background-color: var(--printess-lightgreen);
    border: 1px solid var(--printess-green);
    color: var(--printess-green);
  }
  .magenta .hide-token {
    background-color: var(--printess-lightmagenta);
    border: 1px solid var(--printess-magenta);
    color: var(--printess-magenta);
  }
  .red .hide-token {
    background-color: var(--printess-lightred);
    border: 1px solid var(--printess-red);
    color: var(--printess-red);
  }
  .blue .hide-token {
    background-color: var(--printess-lightblue);
    border: 1px solid var(--printess-blue);
    color: var(--printess-blue);
  }
  
  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    .card {
      width: 100%;
      margin-bottom: 50px;
    }

    .table-header {
      padding-left: 10px;
    }

    .title {
      font-size: 14px;
      line-height: 36px;
      margin: 0;
    }

    dl {
      grid-template-columns: 80px calc(50% - 80px) 80px calc(50% - 80px);
    }

    dd, dt {
      font-size: 12px;
      word-break: break-word;
      line-height: 16px;
      padding: 10px;
      align-items: center;
    }

    dd {
      grid-column: 2 / span 3;
    }

    .table-body p {
      font-size: 12px;
      padding: 0 15px;
    }

    .settings {
      font-size: 12px;
    }
  }
`;class NobsBase{constructor(e,t){if(e instanceof Nobs&&t instanceof NobsBase){e._called_from_constructor_findMutations(t);for(const o of Object.keys(t)){const r=t[o];r instanceof NobsBase?e.hasObjectReplacement(r)?this[o]=e.getObjectReplacement(r):e._called_from_constructor_hasMutation(r)?this[o]=new r.constructor(e,r):this[o]=r:r instanceof Map?this[o]=e._called_from_constructor_cloneMap(r):Array.isArray(r)?this[o]=e._called_from_constructor_cloneArray(r):e.hasProperty(t,o)?this[o]=e.popProperty(t,o):this[o]=t[o]}const o=e.getChangedProperties(t);if(o&&o.size>0)for(const[e,t]of o)this[e]=t}}}class Snobs{static setProperty(e,t,o){return(new Nobs).setProperty(e,t,o)}static removeObject(e){return(new Nobs).removeObject(e)}static addToCollection(e,t,o=void 0,r=void 0){return(new Nobs).addToCollection(e,t,o,r)}static replaceObject(e,t){return(new Nobs).replaceObject(e,t)}}class Nobs{constructor(){this.createdObjects=new Map,this.replacedObjects=new Map,this.removedObjects=new Set,this.changedProperties=new Map,this.replacedCollections=new Map,this.mutatedObjects=new Set}setProperty(e,t,o){if(e&&(o instanceof NobsBase||null===o)&&e[t]instanceof NobsBase)this.replaceObject(e[t],o);else{let r=this.changedProperties.get(e);r||(r=new Map,this.changedProperties.set(e,r)),r.set(t,o)}return this}getChangedProperties(e){return this.changedProperties.get(e)}getProperty(e,t){const o=this.changedProperties.get(e);return o&&o.has(t)?o.get(t):e[t]}popProperty(e,t){const o=this.changedProperties.get(e);if(o&&o.has(t)){const e=o.get(t);return o.delete(t),e}return e[t]}hasProperty(e,t){const o=this.changedProperties.get(e);return!(!o||!o.has(t))}replaceCollection(e,t){return this.replacedCollections.set(e,t),this}addToCollection(e,t,o=void 0,r=void 0){let i=this.createdObjects.get(e);i||(i=[],this.createdObjects.set(e,i));const a={object:t,insertBefore:o,insertAfter:r};return i.push(a),this}reOrderInsideCollection(e,t,o=void 0,r=void 0){return t!==o&&t!==r&&(this.removeObject(t),this.addToCollection(e,t,o,r)),this}replaceObject(e,t){return this.replacedObjects.set(e,t),this}hasObjectReplacement(e){return this.replacedObjects.has(e)}getObjectReplacement(e){return this.replacedObjects.get(e)}removeObject(e){return this.removedObjects.add(e),this}_called_from_constructor_hasMutation(e){return this.mutatedObjects.has(e)}_called_from_constructor_findMutations(e){let t=!1;for(const o of Object.keys(e)){const r=e[o];if(this.hasProperty(e,o)&&(t=!0),r instanceof NobsBase)(this.replacedObjects.has(r)||this._called_from_constructor_findMutations(r))&&(this.mutatedObjects.add(r),t=!0);else if(r instanceof Map||Array.isArray(r)){if(this.replacedCollections.has(r)&&(this.mutatedObjects.add(r),t=!0),r instanceof Map)for(const e of r.values())(this.removedObjects.has(e)||this.replacedObjects.has(e))&&(this.mutatedObjects.add(e),t=!0),t=this._called_from_constructor_findMutations(e)||t;else for(const e of r)(this.removedObjects.has(e)||this.replacedObjects.has(e))&&(this.mutatedObjects.add(e),t=!0),t=this._called_from_constructor_findMutations(e)||t;this.createdObjects.has(r)&&(t=!0)}}return t&&this.mutatedObjects.add(e),t}static getId(e){const t=e.id;if(!t)throw new Error("Nobs: By convention, objects stored in a Map need to have an 'id' property");return t}_called_from_constructor_cloneMap(e){const t=new Map,o=this.replacedCollections.get(e);if(o&&o instanceof Map)return o;let r;const i=this.createdObjects.get(e);for(const[o,a]of e.entries())if(!this.removedObjects.has(a)){if(r=this.replacedObjects.get(a),!r&&this.mutatedObjects.has(a)&&(r=new a.constructor(this,a)),r||(r=a),i)for(const e of i)e.insertBefore===r&&t.set(Nobs.getId(e.object),e.object);if(t.set(o,r),i)for(const e of i)e.insertAfter===r&&t.set(Nobs.getId(e.object),e.object)}if(i)for(const e of i)void 0===e.insertBefore&&void 0===e.insertAfter&&t.set(Nobs.getId(e.object),e.object);return t}_called_from_constructor_cloneArray(e){const t=[],o=this.replacedCollections.get(e);if(o&&Array.isArray(o))return o;let r;const i=this.createdObjects.get(e);for(const o of e)if(!this.removedObjects.has(o)){if(r=this.replacedObjects.get(o),!r&&this.mutatedObjects.has(o)&&(r=new o.constructor(this,o)),r||(r=o),i)for(const e of i)e.insertBefore===r&&t.push(e.object);if(t.push(r),i)for(const e of i)e.insertAfter===r&&t.push(e.object)}if(i)for(const e of i)void 0===e.insertBefore&&void 0===e.insertAfter&&t.push(e.object);return t}}var countries=[{country:"Afghanistan",countryCode:"+93",ISO2Code:"AF",ISO3Code:"AFG"},{country:"Albania",countryCode:"+355",ISO2Code:"AL",ISO3Code:"ALB"},{country:"Algeria",countryCode:"+213",ISO2Code:"DZ",ISO3Code:"DZA"},{country:"American Samoa",countryCode:"+1-684",ISO2Code:"AS",ISO3Code:"ASM"},{country:"Andorra",countryCode:"+376",ISO2Code:"AD",ISO3Code:"AND"},{country:"Angola",countryCode:"+244",ISO2Code:"AO",ISO3Code:"AGO"},{country:"Anguilla",countryCode:"+1-264",ISO2Code:"AI",ISO3Code:"AIA"},{country:"Antarctica",countryCode:"+672",ISO2Code:"AQ",ISO3Code:"ATA"},{country:"Antigua and Barbuda",countryCode:"+1-268",ISO2Code:"AG",ISO3Code:"ATG"},{country:"Argentina",countryCode:"+54",ISO2Code:"AR",ISO3Code:"ARG"},{country:"Armenia",countryCode:"+374",ISO2Code:"AM",ISO3Code:"ARM"},{country:"Aruba",countryCode:"+297",ISO2Code:"AW",ISO3Code:"ABW"},{country:"Australia",countryCode:"+61",ISO2Code:"AU",ISO3Code:"AUS"},{country:"Austria",countryCode:"+43",ISO2Code:"AT",ISO3Code:"AUT"},{country:"Azerbaijan",countryCode:"+994",ISO2Code:"AZ",ISO3Code:"AZE"},{country:"Bahamas",countryCode:"+1-242",ISO2Code:"BS",ISO3Code:"BHS"},{country:"Bahrain",countryCode:"+973",ISO2Code:"BH",ISO3Code:"BHR"},{country:"Bangladesh",countryCode:"+880",ISO2Code:"BD",ISO3Code:"BGD"},{country:"Barbados",countryCode:"+1-246",ISO2Code:"BB",ISO3Code:"BRB"},{country:"Belarus",countryCode:"+375",ISO2Code:"BY",ISO3Code:"BLR"},{country:"Belgium",countryCode:"+32",ISO2Code:"BE",ISO3Code:"BEL"},{country:"Belize",countryCode:"+501",ISO2Code:"BZ",ISO3Code:"BLZ"},{country:"Benin",countryCode:"+229",ISO2Code:"BJ",ISO3Code:"BEN"},{country:"Bermuda",countryCode:"+1-441",ISO2Code:"BM",ISO3Code:"BMU"},{country:"Bhutan",countryCode:"+975",ISO2Code:"BT",ISO3Code:"BTN"},{country:"Bolivia",countryCode:"+591",ISO2Code:"BO",ISO3Code:"BOL"},{country:"Bosnia and Herzegovina",countryCode:"+387",ISO2Code:"BA",ISO3Code:"BIH"},{country:"Botswana",countryCode:"+267",ISO2Code:"BW",ISO3Code:"BWA"},{country:"Brazil",countryCode:"+55",ISO2Code:"BR",ISO3Code:"BRA"},{country:"British Indian Ocean Territory",countryCode:"+246",ISO2Code:"IO",ISO3Code:"IOT"},{country:"British Virgin Islands",countryCode:"+1-284",ISO2Code:"VG",ISO3Code:"VGB"},{country:"Brunei",countryCode:"+673",ISO2Code:"BN",ISO3Code:"BRN"},{country:"Bulgaria",countryCode:"+359",ISO2Code:"BG",ISO3Code:"BGR"},{country:"Burkina Faso",countryCode:"+226",ISO2Code:"BF",ISO3Code:"BFA"},{country:"Burundi",countryCode:"+257",ISO2Code:"BI",ISO3Code:"BDI"},{country:"Cambodia",countryCode:"+855",ISO2Code:"KH",ISO3Code:"KHM"},{country:"Cameroon",countryCode:"+237",ISO2Code:"CM",ISO3Code:"CMR"},{country:"Canada",countryCode:"+1",ISO2Code:"CA",ISO3Code:"CAN"},{country:"Cape Verde",countryCode:"+238",ISO2Code:"CV",ISO3Code:"CPV"},{country:"Cayman Islands",countryCode:"+1-345",ISO2Code:"KY",ISO3Code:"CYM"},{country:"Central African Republic",countryCode:"+236",ISO2Code:"CF",ISO3Code:"CAF"},{country:"Chad",countryCode:"+235",ISO2Code:"TD",ISO3Code:"TCD"},{country:"Chile",countryCode:"+56",ISO2Code:"CL",ISO3Code:"CHL"},{country:"China",countryCode:"+86",ISO2Code:"CN",ISO3Code:"CHN"},{country:"Christmas Island",countryCode:"+61",ISO2Code:"CX",ISO3Code:"CXR"},{country:"Cocos Islands",countryCode:"+61",ISO2Code:"CC",ISO3Code:"CCK"},{country:"Colombia",countryCode:"+57",ISO2Code:"CO",ISO3Code:"COL"},{country:"Comoros",countryCode:"+269",ISO2Code:"KM",ISO3Code:"COM"},{country:"Cook Islands",countryCode:"+682",ISO2Code:"CK",ISO3Code:"COK"},{country:"Costa Rica",countryCode:"+506",ISO2Code:"CR",ISO3Code:"CRI"},{country:"Croatia",countryCode:"+385",ISO2Code:"HR",ISO3Code:"HRV"},{country:"Cuba",countryCode:"+53",ISO2Code:"CU",ISO3Code:"CUB"},{country:"Curacao",countryCode:"+599",ISO2Code:"CW",ISO3Code:"CUW"},{country:"Cyprus",countryCode:"+357",ISO2Code:"CY",ISO3Code:"CYP"},{country:"Czech Republic",countryCode:"+420",ISO2Code:"CZ",ISO3Code:"CZE"},{country:"Democratic Republic of the Congo",countryCode:"+243",ISO2Code:"CD",ISO3Code:"COD"},{country:"Denmark",countryCode:"+45",ISO2Code:"DK",ISO3Code:"DNK"},{country:"Djibouti",countryCode:"+253",ISO2Code:"DJ",ISO3Code:"DJI"},{country:"Dominica",countryCode:"+1-767",ISO2Code:"DM",ISO3Code:"DMA"},{country:"Dominican Republic",countryCode:"+1-809",ISO2Code:"DO",ISO3Code:"DOM"},{country:"Dominican Republic",countryCode:"+1-829",ISO2Code:"DO",ISO3Code:"DOM"},{country:"Dominican Republic",countryCode:"+1-849",ISO2Code:"DO",ISO3Code:"DOM"},{country:"East Timor",countryCode:"+670",ISO2Code:"TL",ISO3Code:"TLS"},{country:"Ecuador",countryCode:"+593",ISO2Code:"EC",ISO3Code:"ECU"},{country:"Egypt",countryCode:"+20",ISO2Code:"EG",ISO3Code:"EGY"},{country:"El Salvador",countryCode:"+503",ISO2Code:"SV",ISO3Code:"SLV"},{country:"Equatorial Guinea",countryCode:"+240",ISO2Code:"GQ",ISO3Code:"GNQ"},{country:"Eritrea",countryCode:"+291",ISO2Code:"ER",ISO3Code:"ERI"},{country:"Estonia",countryCode:"+372",ISO2Code:"EE",ISO3Code:"EST"},{country:"Ethiopia",countryCode:"+251",ISO2Code:"ET",ISO3Code:"ETH"},{country:"Falkland Islands",countryCode:"+500",ISO2Code:"FK",ISO3Code:"FLK"},{country:"Faroe Islands",countryCode:"+298",ISO2Code:"FO",ISO3Code:"FRO"},{country:"Fiji",countryCode:"+679",ISO2Code:"FJ",ISO3Code:"FJI"},{country:"Finland",countryCode:"+358",ISO2Code:"FI",ISO3Code:"FIN"},{country:"France",countryCode:"+33",ISO2Code:"FR",ISO3Code:"FRA"},{country:"French Polynesia",countryCode:"+689",ISO2Code:"PF",ISO3Code:"PYF"},{country:"Gabon",countryCode:"+241",ISO2Code:"GA",ISO3Code:"GAB"},{country:"Gambia",countryCode:"+220",ISO2Code:"GM",ISO3Code:"GMB"},{country:"Georgia",countryCode:"+995",ISO2Code:"GE",ISO3Code:"GEO"},{country:"Germany",countryCode:"+49",ISO2Code:"DE",ISO3Code:"DEU"},{country:"Ghana",countryCode:"+233",ISO2Code:"GH",ISO3Code:"GHA"},{country:"Gibraltar",countryCode:"+350",ISO2Code:"GI",ISO3Code:"GIB"},{country:"Greece",countryCode:"+30",ISO2Code:"GR",ISO3Code:"GRC"},{country:"Greenland",countryCode:"+299",ISO2Code:"GL",ISO3Code:"GRL"},{country:"Grenada",countryCode:"+1-473",ISO2Code:"GD",ISO3Code:"GRD"},{country:"Guam",countryCode:"+1-671",ISO2Code:"GU",ISO3Code:"GUM"},{country:"Guatemala",countryCode:"+502",ISO2Code:"GT",ISO3Code:"GTM"},{country:"Guernsey",countryCode:"+44-1481",ISO2Code:"GG",ISO3Code:"GGY"},{country:"Guinea",countryCode:"+224",ISO2Code:"GN",ISO3Code:"GIN"},{country:"Guinea-Bissau",countryCode:"+245",ISO2Code:"GW",ISO3Code:"GNB"},{country:"Guyana",countryCode:"+592",ISO2Code:"GY",ISO3Code:"GUY"},{country:"Haiti",countryCode:"+509",ISO2Code:"HT",ISO3Code:"HTI"},{country:"Honduras",countryCode:"+504",ISO2Code:"HN",ISO3Code:"HND"},{country:"Hong Kong",countryCode:"+852",ISO2Code:"HK",ISO3Code:"HKG"},{country:"Hungary",countryCode:"+36",ISO2Code:"HU",ISO3Code:"HUN"},{country:"Iceland",countryCode:"+354",ISO2Code:"IS",ISO3Code:"ISL"},{country:"India",countryCode:"+91",ISO2Code:"IN",ISO3Code:"IND"},{country:"Indonesia",countryCode:"+62",ISO2Code:"ID",ISO3Code:"IDN"},{country:"Iran",countryCode:"+98",ISO2Code:"IR",ISO3Code:"IRN"},{country:"Iraq",countryCode:"+964",ISO2Code:"IQ",ISO3Code:"IRQ"},{country:"Ireland",countryCode:"+353",ISO2Code:"IE",ISO3Code:"IRL"},{country:"Isle of Man",countryCode:"+44-1624",ISO2Code:"IM",ISO3Code:"IMN"},{country:"Israel",countryCode:"+972",ISO2Code:"IL",ISO3Code:"ISR"},{country:"Italy",countryCode:"+39",ISO2Code:"IT",ISO3Code:"ITA"},{country:"Ivory Coast",countryCode:"+225",ISO2Code:"CI",ISO3Code:"CIV"},{country:"Jamaica",countryCode:"+1-876",ISO2Code:"JM",ISO3Code:"JAM"},{country:"Japan",countryCode:"+81",ISO2Code:"JP",ISO3Code:"JPN"},{country:"Jersey",countryCode:"+44-1534",ISO2Code:"JE",ISO3Code:"JEY"},{country:"Jordan",countryCode:"+962",ISO2Code:"JO",ISO3Code:"JOR"},{country:"Kazakhstan",countryCode:"+7",ISO2Code:"KZ",ISO3Code:"KAZ"},{country:"Kenya",countryCode:"+254",ISO2Code:"KE",ISO3Code:"KEN"},{country:"Kiribati",countryCode:"+686",ISO2Code:"KI",ISO3Code:"KIR"},{country:"Kosovo",countryCode:"+383",ISO2Code:"XK",ISO3Code:"XKX"},{country:"Kuwait",countryCode:"+965",ISO2Code:"KW",ISO3Code:"KWT"},{country:"Kyrgyzstan",countryCode:"+996",ISO2Code:"KG",ISO3Code:"KGZ"},{country:"Laos",countryCode:"+856",ISO2Code:"LA",ISO3Code:"LAO"},{country:"Latvia",countryCode:"+371",ISO2Code:"LV",ISO3Code:"LVA"},{country:"Lebanon",countryCode:"+961",ISO2Code:"LB",ISO3Code:"LBN"},{country:"Lesotho",countryCode:"+266",ISO2Code:"LS",ISO3Code:"LSO"},{country:"Liberia",countryCode:"+231",ISO2Code:"LR",ISO3Code:"LBR"},{country:"Libya",countryCode:"+218",ISO2Code:"LY",ISO3Code:"LBY"},{country:"Liechtenstein",countryCode:"+423",ISO2Code:"LI",ISO3Code:"LIE"},{country:"Lithuania",countryCode:"+370",ISO2Code:"LT",ISO3Code:"LTU"},{country:"Luxembourg",countryCode:"+352",ISO2Code:"LU",ISO3Code:"LUX"},{country:"Macau",countryCode:"+853",ISO2Code:"MO",ISO3Code:"MAC"},{country:"Macedonia",countryCode:"+389",ISO2Code:"MK",ISO3Code:"MKD"},{country:"Madagascar",countryCode:"+261",ISO2Code:"MG",ISO3Code:"MDG"},{country:"Malawi",countryCode:"+265",ISO2Code:"MW",ISO3Code:"MWI"},{country:"Malaysia",countryCode:"+60",ISO2Code:"MY",ISO3Code:"MYS"},{country:"Maldives",countryCode:"+960",ISO2Code:"MV",ISO3Code:"MDV"},{country:"Mali",countryCode:"+223",ISO2Code:"ML",ISO3Code:"MLI"},{country:"Malta",countryCode:"+356",ISO2Code:"MT",ISO3Code:"MLT"},{country:"Marshall Islands",countryCode:"+692",ISO2Code:"MH",ISO3Code:"MHL"},{country:"Mauritania",countryCode:"+222",ISO2Code:"MR",ISO3Code:"MRT"},{country:"Mauritius",countryCode:"+230",ISO2Code:"MU",ISO3Code:"MUS"},{country:"Mayotte",countryCode:"+262",ISO2Code:"YT",ISO3Code:"MYT"},{country:"Mexico",countryCode:"+52",ISO2Code:"MX",ISO3Code:"MEX"},{country:"Micronesia",countryCode:"+691",ISO2Code:"FM",ISO3Code:"FSM"},{country:"Moldova",countryCode:"+373",ISO2Code:"MD",ISO3Code:"MDA"},{country:"Monaco",countryCode:"+377",ISO2Code:"MC",ISO3Code:"MCO"},{country:"Mongolia",countryCode:"+976",ISO2Code:"MN",ISO3Code:"MNG"},{country:"Montenegro",countryCode:"+382",ISO2Code:"ME",ISO3Code:"MNE"},{country:"Montserrat",countryCode:"+1-664",ISO2Code:"MS",ISO3Code:"MSR"},{country:"Morocco",countryCode:"+212",ISO2Code:"MA",ISO3Code:"MAR"},{country:"Mozambique",countryCode:"+258",ISO2Code:"MZ",ISO3Code:"MOZ"},{country:"Myanmar",countryCode:"+95",ISO2Code:"MM",ISO3Code:"MMR"},{country:"Namibia",countryCode:"+264",ISO2Code:"NA",ISO3Code:"NAM"},{country:"Nauru",countryCode:"+674",ISO2Code:"NR",ISO3Code:"NRU"},{country:"Nepal",countryCode:"+977",ISO2Code:"NP",ISO3Code:"NPL"},{country:"Netherlands",countryCode:"+31",ISO2Code:"NL",ISO3Code:"NLD"},{country:"Netherlands Antilles",countryCode:"+599",ISO2Code:"AN",ISO3Code:"ANT"},{country:"New Caledonia",countryCode:"+687",ISO2Code:"NC",ISO3Code:"NCL"},{country:"New Zealand",countryCode:"+64",ISO2Code:"NZ",ISO3Code:"NZL"},{country:"Nicaragua",countryCode:"+505",ISO2Code:"NI",ISO3Code:"NIC"},{country:"Niger",countryCode:"+227",ISO2Code:"NE",ISO3Code:"NER"},{country:"Nigeria",countryCode:"+234",ISO2Code:"NG",ISO3Code:"NGA"},{country:"Niue",countryCode:"+683",ISO2Code:"NU",ISO3Code:"NIU"},{country:"North Korea",countryCode:"+850",ISO2Code:"KP",ISO3Code:"PRK"},{country:"Northern Mariana Islands",countryCode:"+1-670",ISO2Code:"MP",ISO3Code:"MNP"},{country:"Norway",countryCode:"+47",ISO2Code:"NO",ISO3Code:"NOR"},{country:"Oman",countryCode:"+968",ISO2Code:"OM",ISO3Code:"OMN"},{country:"Pakistan",countryCode:"+92",ISO2Code:"PK",ISO3Code:"PAK"},{country:"Palau",countryCode:"+680",ISO2Code:"PW",ISO3Code:"PLW"},{country:"Palestine",countryCode:"+970",ISO2Code:"PS",ISO3Code:"PSE"},{country:"Panama",countryCode:"+507",ISO2Code:"PA",ISO3Code:"PAN"},{country:"Papua New Guinea",countryCode:"+675",ISO2Code:"PG",ISO3Code:"PNG"},{country:"Paraguay",countryCode:"+595",ISO2Code:"PY",ISO3Code:"PRY"},{country:"Peru",countryCode:"+51",ISO2Code:"PE",ISO3Code:"PER"},{country:"Philippines",countryCode:"+63",ISO2Code:"PH",ISO3Code:"PHL"},{country:"Pitcairn",countryCode:"+64",ISO2Code:"PN",ISO3Code:"PCN"},{country:"Poland",countryCode:"+48",ISO2Code:"PL",ISO3Code:"POL"},{country:"Portugal",countryCode:"+351",ISO2Code:"PT",ISO3Code:"PRT"},{country:"Puerto Rico",countryCode:"+1-787",ISO2Code:"PR",ISO3Code:"PRI"},{country:"Puerto Rico",countryCode:"+1-939",ISO2Code:"PR",ISO3Code:"PRI"},{country:"Qatar",countryCode:"+974",ISO2Code:"QA",ISO3Code:"QAT"},{country:"Republic of the Congo",countryCode:"+242",ISO2Code:"CG",ISO3Code:"COG"},{country:"Reunion",countryCode:"+262",ISO2Code:"RE",ISO3Code:"REU"},{country:"Romania",countryCode:"+40",ISO2Code:"RO",ISO3Code:"ROU"},{country:"Rwanda",countryCode:"+250",ISO2Code:"RW",ISO3Code:"RWA"},{country:"Saint Barthelemy",countryCode:"+590",ISO2Code:"BL",ISO3Code:"BLM"},{country:"Saint Helena",countryCode:"+290",ISO2Code:"SH",ISO3Code:"SHN"},{country:"Saint Kitts and Nevis",countryCode:"+1-869",ISO2Code:"KN",ISO3Code:"KNA"},{country:"Saint Lucia",countryCode:"+1-758",ISO2Code:"LC",ISO3Code:"LCA"},{country:"Saint Martin",countryCode:"+590",ISO2Code:"MF",ISO3Code:"MAF"},{country:"Saint Pierre and Miquelon",countryCode:"+508",ISO2Code:"PM",ISO3Code:"SPM"},{country:"Saint Vincent and the Grenadines",countryCode:"+1-784",ISO2Code:"VC",ISO3Code:"VCT"},{country:"Samoa",countryCode:"+685",ISO2Code:"WS",ISO3Code:"WSM"},{country:"San Marino",countryCode:"+378",ISO2Code:"SM",ISO3Code:"SMR"},{country:"Sao Tome and Principe",countryCode:"+239",ISO2Code:"ST",ISO3Code:"STP"},{country:"Saudi Arabia",countryCode:"+966",ISO2Code:"SA",ISO3Code:"SAU"},{country:"Senegal",countryCode:"+221",ISO2Code:"SN",ISO3Code:"SEN"},{country:"Serbia",countryCode:"+381",ISO2Code:"RS",ISO3Code:"SRB"},{country:"Seychelles",countryCode:"+248",ISO2Code:"SC",ISO3Code:"SYC"},{country:"Sierra Leone",countryCode:"+232",ISO2Code:"SL",ISO3Code:"SLE"},{country:"Singapore",countryCode:"+65",ISO2Code:"SG",ISO3Code:"SGP"},{country:"Sint Maarten",countryCode:"+1-721",ISO2Code:"SX",ISO3Code:"SXM"},{country:"Slovakia",countryCode:"+421",ISO2Code:"SK",ISO3Code:"SVK"},{country:"Slovenia",countryCode:"+386",ISO2Code:"SI",ISO3Code:"SVN"},{country:"Solomon Islands",countryCode:"+677",ISO2Code:"SB",ISO3Code:"SLB"},{country:"Somalia",countryCode:"+252",ISO2Code:"SO",ISO3Code:"SOM"},{country:"South Africa",countryCode:"+27",ISO2Code:"ZA",ISO3Code:"ZAF"},{country:"South Korea",countryCode:"+82",ISO2Code:"KR",ISO3Code:"KOR"},{country:"South Sudan",countryCode:"+211",ISO2Code:"SS",ISO3Code:"SSD"},{country:"Spain",countryCode:"+34",ISO2Code:"ES",ISO3Code:"ESP"},{country:"Sri Lanka",countryCode:"+94",ISO2Code:"LK",ISO3Code:"LKA"},{country:"Sudan",countryCode:"+249",ISO2Code:"SD",ISO3Code:"SDN"},{country:"Suriname",countryCode:"+597",ISO2Code:"SR",ISO3Code:"SUR"},{country:"Svalbard and Jan Mayen",countryCode:"+47",ISO2Code:"SJ",ISO3Code:"SJM"},{country:"Swaziland",countryCode:"+268",ISO2Code:"SZ",ISO3Code:"SWZ"},{country:"Sweden",countryCode:"+46",ISO2Code:"SE",ISO3Code:"SWE"},{country:"Switzerland",countryCode:"+41",ISO2Code:"CH",ISO3Code:"CHE"},{country:"Syria",countryCode:"+963",ISO2Code:"SY",ISO3Code:"SYR"},{country:"Taiwan",countryCode:"+886",ISO2Code:"TW",ISO3Code:"TWN"},{country:"Tajikistan",countryCode:"+992",ISO2Code:"TJ",ISO3Code:"TJK"},{country:"Tanzania",countryCode:"+255",ISO2Code:"TZ",ISO3Code:"TZA"},{country:"Thailand",countryCode:"+66",ISO2Code:"TH",ISO3Code:"THA"},{country:"Togo",countryCode:"+228",ISO2Code:"TG",ISO3Code:"TGO"},{country:"Tokelau",countryCode:"+690",ISO2Code:"TK",ISO3Code:"TKL"},{country:"Tonga",countryCode:"+676",ISO2Code:"TO",ISO3Code:"TON"},{country:"Trinidad and Tobago",countryCode:"+1-868",ISO2Code:"TT",ISO3Code:"TTO"},{country:"Tunisia",countryCode:"+216",ISO2Code:"TN",ISO3Code:"TUN"},{country:"Turkey",countryCode:"+90",ISO2Code:"TR",ISO3Code:"TUR"},{country:"Turkmenistan",countryCode:"+993",ISO2Code:"TM",ISO3Code:"TKM"},{country:"Turks and Caicos Islands",countryCode:"+1-649",ISO2Code:"TC",ISO3Code:"TCA"},{country:"Tuvalu",countryCode:"+688",ISO2Code:"TV",ISO3Code:"TUV"},{country:"U.S. Virgin Islands",countryCode:"+1-340",ISO2Code:"VI",ISO3Code:"VIR"},{country:"Uganda",countryCode:"+256",ISO2Code:"UG",ISO3Code:"UGA"},{country:"Ukraine",countryCode:"+380",ISO2Code:"UA",ISO3Code:"UKR"},{country:"United Arab Emirates",countryCode:"+971",ISO2Code:"AE",ISO3Code:"ARE"},{country:"United Kingdom",countryCode:"+44",ISO2Code:"GB",ISO3Code:"GBR"},{country:"United States",countryCode:"+1",ISO2Code:"US",ISO3Code:"USA"},{country:"Uruguay",countryCode:"+598",ISO2Code:"UY",ISO3Code:"URY"},{country:"Uzbekistan",countryCode:"+998",ISO2Code:"UZ",ISO3Code:"UZB"},{country:"Vanuatu",countryCode:"+678",ISO2Code:"VU",ISO3Code:"VUT"},{country:"Vatican",countryCode:"+379",ISO2Code:"VA",ISO3Code:"VAT"},{country:"Venezuela",countryCode:"+58",ISO2Code:"VE",ISO3Code:"VEN"},{country:"Vietnam",countryCode:"+84",ISO2Code:"VN",ISO3Code:"VNM"},{country:"Wallis and Futuna",countryCode:"+681",ISO2Code:"WF",ISO3Code:"WLF"},{country:"Western Sahara",countryCode:"+212",ISO2Code:"EH",ISO3Code:"ESH"},{country:"Yemen",countryCode:"+967",ISO2Code:"YE",ISO3Code:"YEM"},{country:"Zambia",countryCode:"+260",ISO2Code:"ZM",ISO3Code:"ZMB"},{country:"Zimbabwe",countryCode:"+263",ISO2Code:"ZW",ISO3Code:"ZWE"}];const userProfileStyles=i$4`
  .card {
    margin-top: 30px;
    margin-bottom: 70px;
  }

  wc-icon {
    padding: 5px 0 0 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .green { border-bottom: 2px solid var(--printess-green); }

  .table-header {
    padding-left: 20px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
  }

  .green .table-header { background-color: var(--printess-green); }

  dl {
    display: grid;
    margin-top: 10px;
    margin-bottom: 0;
    grid-template-columns: 150px calc(100% - 150px);
  }

  .span-text {
    grid-column: 2 / span 3;
  }

  dt, dd {
    display: flex;
    line-height: 25px;
    margin-left: 0;
    text-align: left;
    padding: 10px;
    align-items: center;
  }

  dd {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
  }

  .profile-input {
    color: #555;
    font-family: var(--printess-text-font);
    font-size: 14px;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    background-color: rgba(242,246,219,0.5);
    padding: 7px 10px;
    border-radius: 4px;
  }

  .missing-field {
    border: 1px solid rgb(210, 0, 100);
  }

  .warning {
    color: rgb(210, 0, 100);
    text-align: left;
    width: calc(100% - 40px);
    font-size: 12px;
    margin: 30px 0 0;
  }

  select {
    color: #555;
    font-family: var(--printess-text-font);
    font-size: 14px;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    background-color: rgba(242,246,219,0.5);
    padding: 7px 10px;
    border-radius: 4px;
  }
  
  .lightgreen {
    background-color: var(--printess-lightgreen);
  }

  input.readonly {
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16px;
  }

  .button-wrapper {
    margin: 20px 0 20px 10px;
    display: flex;
    gap: 10px;
  }

  button {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
  }

  .settings {
    padding: 7px 20px;
    margin: 20px 15px;
  }

  .green button { background-color: var(--printess-green); }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .card {
      width: 100%;
      margin-bottom: 50px;
    }

    .table-header {
      padding-left: 10px;
    }

    .title {
      font-size: 14px;
      line-height: 36px;
      margin: 0;
    }

    .table-body {
      padding-bottom: 10px;
    }

    dl {
      grid-template-columns: 80px calc(50% - 80px) 80px calc(50% - 80px);
    }
    
    .profile-input {
      font-size: 12px;
      padding: 5px 7px;
    }
    
    select {
      font-size: 12px;
      padding: 5px 7px;
    }

    dd, dt {
      font-size: 12px;
      word-break: break-word;
      line-height: 16px;
      padding: 10px;
      align-items: center;
    }

    dd {
      grid-column: 2 / span 3;
    }

    .table-body p {
      font-size: 12px;
      padding: 0 10px;
    }

    .settings {
      font-size: 12px;
      margin-bottom: 10px;
    }
  }
`;class UserProfile extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof UserProfile))if("string"==typeof e)this.email=e,this.displayName="";else{const t=e;this.company=t.company,this.displayName=t.displayName??"",this.firstName=t.firstName,this.lastName=t.lastName,this.email=t.email??"",this.phone=t.phone,this.countryCode=t.countryCode,this.addressOne=t.addressOne,this.addressTwo=t.addressTwo,this.postalCode=t.postalCode,this.city=t.city,this.state=t.state,this.country=t.country,this.timezone=t.timezone,this.vat=t.vat,this.accountingEmail=t.accountingEmail}}toDto(){return{company:this.company,displayName:this.displayName,firstName:this.firstName,lastName:this.lastName,email:this.email,phone:this.phone,countryCode:this.countryCode,addressOne:this.addressOne,addressTwo:this.addressTwo,postalCode:this.postalCode,city:this.city,state:this.state,country:this.country,timezone:this.timezone,vat:this.vat,accountingEmail:this.accountingEmail}}}const dialogStyles$1=i$4`
  :host {
    --dialog-warning-red: rgb(210, 0, 100);
    --dialog-disabled-pink: #e0afd2;
  }
  .modal {
    font-family: var(--printess-text-font);
    color: #555555;
    display: block;
    position: fixed;
    z-index: 100;
    padding-top: 70px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .modal-wrapper {
    background-color: #fefefe;
    margin: auto;
    width: 50vmin;
    min-width: 60vw;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2), 0px 4px 20px rgba(0,0,0,0.2);
  }

  .pink { border-bottom: 2px solid var(--printess-pink); }
  .green { border-bottom: 2px solid var(--printess-green); }
  .magenta { border-bottom: 2px solid var(--printess-magenta); }
  .blue { border-bottom: 2px solid var(--printess-blue); }

  .modal-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .modal-title {
    line-height: 50px;
    margin: 0;
    font-size: 18px;
    font-weight: 400;
  }

  wc-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 15px 20px;
  }

  .pink .modal-header { background-color: var(--printess-pink); }
  .green .modal-header { background-color: var(--printess-green); }
  .magenta .modal-header { background-color: var(--printess-magenta); }
  .blue .modal-header { background-color: var(--printess-blue); }

  .modal-content {
    padding: 20px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    min-height: 160px;
    max-height: 50vh;
    overflow: auto;
  }

  label {
    font-size: 14px;
    padding-left: 2px;
  }

  input {
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    margin-top: 7px;
    border: 1px solid rgb(118, 118, 118);
  }

  input:hover {
    background-color: var(--printess-lightpink);
    border: 1px solid rgb(118, 118, 118);
  }

  button.submit {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    color: white;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 4px;
    background-color: var(--printess-pink);
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
  }

  .pink .submit { background-color: var(--printess-pink); }
  .green .submit { background-color: var(--printess-green); }
  .magenta .submit { background-color: var(--printess-magenta); }
  .blue .submit { background-color: var(--printess-blue); }

  button.gray { background-color: #aaa !important;}
  button.gray:hover { background-color: #999 !important; }

  .pink .submit:hover {
    background-color: var(--printess-pinkHover);
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .modal {
      padding-top: 45px;
    }

    .modal-wrapper {
      width: 70vmin;
      min-width: unset;
    }

    .modal-content {
      max-height: unset;
    }
  }
`,baseStyles=i$4`
  .modal {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
  }

  .modal-header {
    margin-top: 0px;
  }

  .error-msg {
    color: #d20064;
    font-size: 12px;
    font-family: var(--printess-text-font);
  }

  input, input:hover {
    border: 1px solid #ccc;
  }
`;var __decorate$2v=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcBackdrop=class extends s$1{constructor(){super()}static get styles(){return i$4`
      :host, :host * {
          box-sizing: border-box;
      }
      :host  {
          position: fixed;
          left:0;
          top:0;
          width: 100vw;
          height: 100vh;
          background: rgba(0,0,0,0.5);
          z-index: 89;
      }
    `}cancelMouse(e){e.preventDefault(),e.stopPropagation()}connectedCallback(){super.connectedCallback(),this.addEventListener("mousedown",this.cancelMouse),this.addEventListener("mouseup",this.cancelMouse),this.addEventListener("mousemove",this.cancelMouse)}disconnectedCallback(){this.removeEventListener("mousedown",this.cancelMouse),this.removeEventListener("mouseup",this.cancelMouse),this.removeEventListener("mousemove",this.cancelMouse),super.disconnectedCallback()}render(){return x``}};WcBackdrop=__decorate$2v([e$4("wc-backdrop")],WcBackdrop);var __decorate$2u=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogEmailSent=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
      }
    `]}connectedCallback(){super.connectedCallback()}constructor(){super(),this.backdrop=new WcBackdrop}showDialog(){document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Check your mail</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <p style="width: 100%; text-align: justify;">We have sent you a link via email. Follow the link to change your password.</p>
            <button class="submit" @click=${this.closeDialog}>Close</button>
          </div>
        </div>
      </div>
    `}};WcDialogEmailSent=__decorate$2u([e$4("wc-dialog-email-sent")],WcDialogEmailSent);var __decorate$2t=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcCardContainer=class extends s$1{static get styles(){return i$4`
      .card {
        font-family: var(--printess-text-font);
        color: #555555;
        border-bottom: 2px solid var(--color);
        margin: 30px 0 70px;
      }
      .card.button-margin {
        margin-bottom: 10px;
      }

      .table-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: white;
        background-color: var(--color);
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        padding: 0px 20px;
      }

      .title {
        font-size: 18px;
        font-weight: 400;
        line-height: 50px;
        margin: 0px;
      }

      .blue {
        --color: var(--printess-blue);
      }
      .green {
        --color: var(--printess-green);
      }
      .red {
        --color: var(--printess-red);
      }
      .pink {
        --color: var(--printess-pink);
      }

      .header-actions {
        display: flex;
        gap: 10px;
      }

      ::slotted(.wc-card-action) {
        background: transparent;
        border: none!important;
        padding: 0!important;
      }
      
      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card {
          margin-bottom: 50px;
        }

        .card.button-margin {
          margin-bottom: 10px;
        }

        .table-header {
          padding-left: 10px;
        }

        .title {
          font-size: 14px;
          line-height: 36px;
        }
      }
    `}connectedCallback(){super.connectedCallback()}constructor(){super(),this.title="",this.color="pink",this.hasButtonBelow=!1}render(){return x`
      <div class="card ${this.color} ${this.hasButtonBelow?"button-margin":""}">
        <div class="table-header">
          <h3 class="title">${this.title}</h3>
          <div class="header-actions">
            <slot name="actions"></slot>
          </div>
        </div>
        <div class="table-body">
          <slot></slot>
        </div>
      </div>
    `}};__decorate$2t([e$3({attribute:!0,type:String})],WcCardContainer.prototype,"title",void 0),__decorate$2t([e$3({attribute:!0,type:String})],WcCardContainer.prototype,"color",void 0),__decorate$2t([e$3({attribute:!0,type:Boolean})],WcCardContainer.prototype,"hasButtonBelow",void 0),__decorate$2t([e$3({attribute:!0,type:String})],WcCardContainer.prototype,"icon",void 0),WcCardContainer=__decorate$2t([e$4("wc-card-container")],WcCardContainer);var __decorate$2s=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcButton=class extends s$1{static get styles(){return i$4`
      :host {
        display: inline-block;
      }
      .button {
        display: flex;
        gap: 5px;
        justify-content: center;
        border: 1px solid var(--color);
        border-radius: 4px;
        color: #ffffff;
        cursor: pointer;
        font-family: var(--printess-button-font);
        font-size: 14px;
        font-weight: 400;
        background: var(--color);
        white-space: nowrap;
        justify-content: center;
        align-items: center;
      }
      .button.full-width {
        width: 100%;
      }
      .button.light {
        color: #404040;
      }

      .sm {
        padding: 4px 10px;
      }

      .md {
        padding: 7px 20px;
      }

      .lg {
        padding: 10px 30px;
      }

      .sm wc-icon {
        width: 14px;
        height: 19px;
      }

      .md wc-icon, .lg wc-icon {
        width: 20px;
        height: 19px;
      }
      
      .blue {
        --color: var(--printess-blue);
      }
      .green {
        --color: var(--printess-green);
      }
      .red {
        --color: var(--printess-red);
      }
      .pink {
        --color: var(--printess-pink);
      }
      .gray {
        --color: var(--printess-gray);
      }
      .light-gray {
        --color: var(--printess-lightgray);
      }
      .light-pink {
        --color: var(--printess-lightpink);
      }
        
      .button:hover:not(:disabled) {
        border-color: color-mix(in srgb, var(--color) 90%, black);
        background: color-mix(in srgb, var(--color) 90%, black);
      }

      button:disabled {
        opacity: 0.6;
        pointer-events: none;
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .button {
          font-size: 12px;
        }
        .md {
          padding: 5px 10px;
        }
        .lg {
          padding: 7px 20px;
        }
      }
    `}connectedCallback(){super.connectedCallback()}constructor(){super(),this.color="pink",this.size="sm",this.width="",this.disabled=!1,this.loading=!1}render(){const e=this.color.startsWith("light")?"gray":"toolbar";return x`
      <button 
        class="button ${this.size} ${this.color} ${this.width} ${this.color?.startsWith("light")?"light":""}" 
        ?disabled=${this.loading||this.disabled} 
        style="${this.margin?"margin:"+this.margin:""} ${this.loadingText?"min-width: 120px;":""}"
      >
        ${this.icon?x`<wc-icon icon="${this.icon}" primaryColor="${e}"></wc-icon>`:""}
        ${this.loading?x`<div class="spinner"></div><span>${this.loadingText}</span>`:this.caption}
      </button>
      `}};__decorate$2s([e$3({attribute:!0,type:String})],WcButton.prototype,"caption",void 0),__decorate$2s([e$3({attribute:!0,type:String})],WcButton.prototype,"color",void 0),__decorate$2s([e$3({attribute:!0,type:String})],WcButton.prototype,"size",void 0),__decorate$2s([e$3({attribute:!0,type:String})],WcButton.prototype,"icon",void 0),__decorate$2s([e$3({attribute:!0,type:String})],WcButton.prototype,"margin",void 0),__decorate$2s([e$3({attribute:!0,type:String})],WcButton.prototype,"width",void 0),__decorate$2s([e$3({type:Boolean,reflect:!0})],WcButton.prototype,"disabled",void 0),__decorate$2s([e$3({type:Boolean,reflect:!0})],WcButton.prototype,"loading",void 0),__decorate$2s([e$3({type:String})],WcButton.prototype,"loadingText",void 0),WcButton=__decorate$2s([e$4("wc-button")],WcButton);var __decorate$2r=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcInput=class extends s$1{constructor(){super(),this.value="",this.name="",this.color="pink",this.placeholder="",this.type="text",this.label="",this.checked=!1,this.warning=!1,this.deleteInput=!1,this.addInput=!1,this.addDisabled=!1,this.id=this.generateUniqueId()}generateUniqueId(){const e=this.name?.toLowerCase().replace(/[^a-z0-9]/g,"-");return`${e||"input"}-${Math.floor(1e5*Math.random())}`}handleChange(e){const t=e.target;this.callback&&this.callback(t.value)}handleInput(e){const t=e.target;this.dispatchEvent(new CustomEvent("text-input",{detail:{value:t.value},bubbles:!0,composed:!0}))}handleDelete(){this.dispatchEvent(new CustomEvent("delete-input",{detail:{name:this.name},bubbles:!0,composed:!0}))}handleAdd(){this.dispatchEvent(new CustomEvent("add-input",{detail:{name:this.name},bubbles:!0,composed:!0}))}renderInput(){return x`
      <input
        type=${this.type}
        id=${this.id}
        class="${this.color} ${this.warning?"warning":""} ${this.deleteInput||this.addInput?"straight-border":""}"
        name=${this.name}
        placeholder=${this.placeholder}
        .value=${this.value}
        @input=${this.handleInput}
        @change=${this.handleChange}
      />

      ${this.deleteInput?x`
        <div class="delete-input-box" @click=${this.handleDelete}>
          <wc-icon icon="trash" style="width: 15px; height: 15px;"></wc-icon>
        </div>
      `:""}

      ${this.addInput?x`
        <div class="add-input-box ${this.addDisabled?"disabled":""}" @click=${this.handleAdd}>
          <wc-icon icon="plus" style="width: 15px; height: 15px;"></wc-icon>
        </div>
      `:""}
    `}renderTextarea(){return x`
      <textarea
        id=${this.id}
        class="${this.color} ${this.warning?"warning":""} ${this.deleteInput?"straight-border":""}"
        name=${this.name}
        placeholder=${this.placeholder}
        @change=${this.handleChange}
      >${this.value}</textarea>
      ${this.deleteInput?x`
        <div class="delete-input-box" @click=${this.handleDelete}>
          <wc-icon icon="trash" style="width: 15px; height: 15px;"></wc-icon>
        </div>
      `:""}
    `}renderSelect(){return this.options?.length?x`
      <select
        id=${this.id}
        class="${this.color} ${this.warning?"warning":""}"
        name=${this.name}
        placeholder=${this.placeholder}
        value=${this.value}
        @change=${this.handleChange}
      >
        ${this.options?.map(e=>x`
          <option value="${e}" ?selected=${e===this.value}>${e}</option>
        `)}
      </select>
    `:x``}renderDataList(){return x`
      <input 
        id=${this.id} 
        .value=${this.value}
        list="datalist-${this.id}" 
        name=${this.name}
        placeholder=${this.placeholder} 
        @input=${this.handleInput}
        @change=${this.handleChange}
        class="${this.color} ${this.warning?"warning":""} ${this.addInput?"straight-border":""}"
      />

      <datalist id="datalist-${this.id}">
        ${this.list?.map(e=>x`<option value=${e}></option>`)}
      </datalist>

      ${this.addInput?x`
        <div class="add-input-box ${this.addDisabled?"disabled":""}" @click=${this.handleAdd}>
          <wc-icon icon="plus" style="width: 15px; height: 15px;"></wc-icon>
        </div>
      `:""}
    `}renderCheckbox(){return x`
      <input @change=${this.handleChange} type="checkbox" name=${this.name} id=${this.name} value=${this.checked} .checked=${this.checked}>
      <label for=${this.name}> ${this.label}</label><br>
    `}render(){return x`
      <div class="${this.type}">
        ${"select"===this.type?this.renderSelect():"textarea"===this.type?this.renderTextarea():"datalist"===this.type?this.renderDataList():"checkbox"===this.type?this.renderCheckbox():this.renderInput()}
      </div>
    `}};WcInput.styles=i$4`
    div.text, div.password, div.datalist, div.select {
      display: flex;
    }
    
    input, select, textarea {
      color: #404040;
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: var(--color);
      padding: 7px 10px;
      border-radius: 4px;
      resize: vertical;
    }

    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: #a0a0a0;
      opacity: 1; /* Firefox */
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #a0a0a0;
    }
    ::-ms-input-placeholder { /* Microsoft Edge */
      color: #a0a0a0;
    }

    .warning {
      border: 1px solid rgb(210, 0, 100);
    }

    .straight-border {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .delete-input-box, .add-input-box {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-family: var(--printess-text-font);
      font-size: 14px;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      padding: 7px 10px;
      border-radius: 4px;
      resize: vertical;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background: #555555;
      border-left: none;
      cursor: pointer;
    }
    .add-input-box {
      background: var(--printess-pink);
    }
    .add-input-box.disabled {
      opacity: 0.6;
      pointer-events: none;
    }

    @scope(div.checkbox) {
      :scope {
        display: block;
      }
      
      label {
        cursor: pointer;
        font-family: var(--printess-text-font);
      }
      
      input {
        width: auto;
      }

      [type="checkbox"] {
        position: relative;
        border: none;
        border-radius: 10px;
        outline: none;
        left: 0px;
        top: -10px;
        width: 40px;
        height: 16px;
        z-index: 0;
        -webkit-appearance: none;
      }

      [type="checkbox"]:focus, [type="checkbox"]:hover {
        display: hidden;
        border: none;
        outline: none;
      }

      [type="checkbox"] + label {
        position: relative;
        display: block;
        cursor: pointer;
        line-height: 1.2;
        padding-left: 60px;
        position: relative;
        margin-top: -35px;
      }
      [type="checkbox"] + label:before {
        width: 40px;
        height: 18px;
        border-radius: 30px;
        border: 2px solid #ddd;
        background-color: #EEE;
        content: "";
        margin-right: 15px;
        transition: background-color 0.5s linear;
        z-index: 5;
        position: absolute;
        left: 0px;
      }
      [type="checkbox"] + label:after {
        width: 18px;
        height: 18px;
        border-radius: 30px;
        background-color: #fff;
        content: "";
        transition: margin 0.1s linear;
        box-shadow: 0px 0px 5px #aaa;
        position: absolute;
        left: 2px;
        top: 2px;
        z-index: 10;
      }
      [type="checkbox"]:checked + label:before {
        background-color: #e35fbc;
        border-color: #e35fbc;
      }
      [type="checkbox"]:checked + label:after {
        margin: 0 0 0 22px;
        box-shadow: #e447b6 0px 0px 5px;
      }
    }

    

    .blue   { --color: rgba(76, 156, 226, 0.1); }
    .green  { --color: rgba(242, 246, 219, 0.5); }
    .red    { --color: rgba(210, 0, 100, 0.04); }
    .pink   { --color: rgba(208, 4, 155, 0.04); }
    .orange { --color: rgba(255, 140, 0, 0.05); }
    
    @media (max-width: ${config.mobileDeviceWidth}px) {
      input {
        font-size: 12px;
        padding: 5px 7px;
      }
    }
  `,__decorate$2r([e$3({type:String})],WcInput.prototype,"value",void 0),__decorate$2r([e$3({type:String})],WcInput.prototype,"name",void 0),__decorate$2r([e$3({type:String})],WcInput.prototype,"color",void 0),__decorate$2r([e$3({type:String})],WcInput.prototype,"placeholder",void 0),__decorate$2r([e$3({type:String})],WcInput.prototype,"type",void 0),__decorate$2r([e$3({type:String})],WcInput.prototype,"label",void 0),__decorate$2r([e$3({type:Boolean})],WcInput.prototype,"checked",void 0),__decorate$2r([e$3({type:Boolean})],WcInput.prototype,"warning",void 0),__decorate$2r([e$3({type:Boolean})],WcInput.prototype,"deleteInput",void 0),__decorate$2r([e$3({type:Boolean})],WcInput.prototype,"addInput",void 0),__decorate$2r([e$3({type:Boolean})],WcInput.prototype,"addDisabled",void 0),__decorate$2r([e$3({type:Array})],WcInput.prototype,"list",void 0),__decorate$2r([e$3({type:Array})],WcInput.prototype,"options",void 0),WcInput=__decorate$2r([e$4("wc-input")],WcInput);var __decorate$2q=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcUserProfile=class extends s$1{constructor(){super(...arguments),this.inputReadonly=!0,this.loading=!1,this.currentUser=currentUser}static get styles(){return[userProfileStyles,i$4`
      .full-width {
        width: 100%;
      }
      .mandatory {
        font-weight: bold;
      }

      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }
    `]}setState(e){this.state=new UserProfile(e,this.state)}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserProfile(){const e=await api.loadProfile();e instanceof ServerErrorResponse$2?this.showError(e):(this.state=new UserProfile(e),this.profile={...e},this.requestUpdate())}async updateUserProfile(e){const t=await api.updateProfile(e);return t instanceof ServerErrorResponse$2?(this.showError(t),"failure"):(this.loading=!0,window.setTimeout(()=>{this.loading=!1},2e3),"success")}connectedCallback(){super.connectedCallback(),this.loadUserProfile()}compare(e,t){return e<t?-1:e>t?1:0}changeProfile(e){const t=new Nobs,o=e.target.name,r=e.target.value;0!==r.length||"displayName"!==o?(t.setProperty(this.state,o,r),this.setState(t)):e.target.value=this.profile.displayName}exchangeProfile(e,t){const o=new Nobs;o.setProperty(this.state,e,t),this.setState(o)}getFlag(e){const t=e.toUpperCase().split("").map(e=>127397+e.charCodeAt(0));return String.fromCodePoint(...t)}async updateProfile(){if(!this.profile.timezone){const e=new Nobs;e.setProperty(this.state,"timezone",Intl.DateTimeFormat().resolvedOptions().timeZone),this.setState(e)}const e=this.state.toDto(),t=await this.updateUserProfile(e);this.profile=this.state,"failure"===t&&alert("An error occurred, please try again later!")}sendResetMail(){const e=new WcDialogEmailSent;return e.showDialog(),sendPasswordResetMail(),e}getUserContent(){return x`
      <dl>${this.profile?x`
        <dt>Email:</dt>
        <dd>${this.profile.email}</dd>
        <dt class="mandatory">Company:</dt>
        <dd><wc-input class="full-width" type="text" placeholder="company name" value="${this.profile.company??""}" name="company" color="green" .callback=${e=>this.exchangeProfile("company",e)}></wc-input></dd>
        <dt class="mandatory">Name:</dt>
        <dd><wc-input class="full-width" type="text" placeholder="name" value="${this.profile.displayName??""}" name="display name" color="green" .warning="${!this.profile.displayName}" .callback=${e=>this.exchangeProfile("displayName",e)}></wc-input></dd>
        <!-- <dt>Password:</dt>
        <dd>********</dd> -->
        <!-- <dt>First Name:</dt>
        <dd><input class="profile-input" @change=${this.changeProfile} name="firstName" value=${this.profile.firstName??""} placeholder="first name"></dd>
        <dt>Last Name:</dt>
        <dd><input class="profile-input" @change=${this.changeProfile} name="lastName" value=${this.profile.lastName??""} placeholder="last name"></dd> -->
        <dt>Phone:</dt>
        <dd style="display: grid; grid-template-columns: 102px 2fr;">
          <input class="profile-input" @change=${this.changeProfile} name="countryCode" value=${this.profile.countryCode??""} type="text" list="countryCode" placeholder="🇩🇪 +49">
          <datalist id="countryCode">
            ${countries.sort((e,t)=>this.compare(e.countryCode,t.countryCode)).map(e=>x`
              <option value='${this.getFlag(e.ISO2Code)} ${e.countryCode}'>
              </option>`)}
          </datalist>
          <input class="profile-input" @change=${this.changeProfile} name='phone' value=${this.profile.phone??""} placeholder="phone">
        </dd>
        <dt class="mandatory">Address Line 1:</dt>
        <dd><wc-input class="full-width" value="${this.profile.addressOne??""}" name="address line 1" color="green" .callback=${e=>this.exchangeProfile("addressOne",e)}></wc-input></dd>
        <dt>Address Line 2:</dt>
        <dd><wc-input class="full-width" value="${this.profile.addressTwo??""}" name="address line 2" color="green" .callback=${e=>this.exchangeProfile("addressTwo",e)}></wc-input></dd>
        <dt class="mandatory">Postal Code:</dt>
        <dd><wc-input class="full-width" value="${this.profile.postalCode??""}" name="postal code" color="green" .callback=${e=>this.exchangeProfile("postalCode",e)}></wc-input></dd>
        <dt class="mandatory">City:</dt>
        <dd><wc-input class="full-width" value="${this.profile.city??""}" name="city" color="green" .callback=${e=>this.exchangeProfile("city",e)}></wc-input></dd>
        <dt>State:</dt>
        <dd><wc-input class="full-width" value="${this.profile.state??""}" name="state" color="green" .callback=${e=>this.exchangeProfile("state",e)}></wc-input></dd>
        <dt class="mandatory">Country:</dt>
        <dd><input class="profile-input" @change=${this.changeProfile} name="country" value=${this.profile.country??""} type="text" list="country" placeholder="country">
          <datalist id="country">
            ${countries.sort((e,t)=>this.compare(e.country,t.country)).map(e=>x`<option value=${e.country}>${e.country}</option>`)}
          </datalist>
        </dd>
        <dt>EU VAT-ID:</dt>
        <dd><wc-input class="full-width" value="${this.profile.vat??""}" name="VAT number" color="green" .callback=${e=>this.exchangeProfile("vat",e)}></wc-input></dd>
        <dt>Accounting Email:</dt>
        <dd><wc-input class="full-width" value="${this.profile.accountingEmail??""}" name="Accounting or billing email" color="green" .callback=${e=>this.exchangeProfile("accountingEmail",e)}></wc-input></dd>
        <dt>Last Login:</dt>
        <dd>${this.currentUser.lastLogin?.toLocaleDateString()} at ${this.currentUser.lastLogin?.toLocaleTimeString()}</dd>
        `:""}
      </dl>

      <div class="button-wrapper" style="display: flex; flex-direction: row;">
        <wc-button caption="Update Profile" color="green" size="md" .loading=${this.loading} loadingText="Updating Profile" @click=${this.updateProfile.bind(this)}></wc-button>
        <wc-button caption="Change Password" color="green" size="md" @click=${this.sendResetMail}></wc-button>
        <!-- <button class="settings" style="margin-left: 0;" @click=${this.sendResetMail}>Change Password</button> -->
      </div>

      ${config.isMobile&&this.profile&&!this.profile.displayName?x`<br>`:""}
      ${this.profile&&!this.profile.displayName?x`<span class="warning" style="margin-left: 15px;">*Please fill in the missing information!</span>`:""}
    `}render(){return x`
      <wc-card-container title="Account Owner" color="green">${this.getUserContent()}</wc-card-container>
    `}};__decorate$2q([e$3({type:Object})],WcUserProfile.prototype,"state",void 0),__decorate$2q([e$3({type:Boolean})],WcUserProfile.prototype,"inputReadonly",void 0),__decorate$2q([e$3({type:Object})],WcUserProfile.prototype,"profile",void 0),__decorate$2q([e$3({type:Boolean})],WcUserProfile.prototype,"loading",void 0),WcUserProfile=__decorate$2q([e$4("wc-user-profile")],WcUserProfile);
/**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const o=e$2(class extends i{constructor(e){var o;if(super(e),e.type!==t.ATTRIBUTE||"class"!==e.name||(null===(o=e.strings)||void 0===o?void 0:o.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(e){return" "+Object.keys(e).filter(t=>e[t]).join(" ")+" "}update(e,[t]){var o,r;if(void 0===this.it){this.it=new Set,void 0!==e.strings&&(this.nt=new Set(e.strings.join(" ").split(/\s/).filter(e=>""!==e)));for(const e in t)t[e]&&!(null===(o=this.nt)||void 0===o?void 0:o.has(e))&&this.it.add(e);return this.render(t)}const i=e.element.classList;this.it.forEach(e=>{e in t||(i.remove(e),this.it.delete(e))});for(const e in t){const o=!!t[e];o===this.it.has(e)||(null===(r=this.nt)||void 0===r?void 0:r.has(e))||(o?(i.add(e),this.it.add(e)):(i.remove(e),this.it.delete(e)))}return T}});var __decorate$2p=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcUserTokens=class extends s$1{constructor(){super(...arguments),this.displayServiceToken=!1,this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[accountStyles,i$4`
      .grid-container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        padding: 10px 20px;
        justify-content: center;
        align-items: center;
      }

      .blue dt:nth-of-type(even), .blue dd:nth-of-type(even) {
        background-color: var(--printess-lightblue);
      }

      .token-name {
        white-space: nowrap;
      }

      .token {
        direction: rtl;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px;
      }

      .revoked {
        text-decoration: line-through;
        color: red;
      }

      .flex {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: flex-end;
      }

      .separator {
        grid-column: 1/4;
        height: 2px;
        width: 100%;
        border-top: 1px solid var(--color);
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserTokens(){const e=await api.loadUserTokens();e instanceof ServerErrorResponse$2?this.showError(e):this.tokens=e.filter(e=>"demo"!==e.type)}connectedCallback(){super.connectedCallback(),this.loadUserTokens(),window.addEventListener("resize",this._handleResize)}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}copyToken(e){const t=document.createElement("input");t.value=e,document.body.appendChild(t),t.select(),document.execCommand("Copy"),t.remove(),alert("Token copied to clipboard")}async revokeToken(e){"sure"===prompt("Are you sure to revoke this token? The API will block all future requests when using this token. Enter 'sure' to proceed.","No idea...")&&(await api.revokeToken(e),this.loadUserTokens())}getTokenContent(){return x`
      <div class="grid-container">
        ${this.tokens?this.tokens.sort((e,t)=>(e.isRevoked.toString()+e.type).localeCompare(t.isRevoked.toString()+t.type)).map((e,t)=>x`
          <div class="token-name">${e.type[0].toUpperCase()}${e.type.slice(1)}-Token:</div>
          <div class="${o({token:!0,revoked:e.isRevoked})}" title=${this.displayServiceToken?e.token:""}>${"service"===e.type?this.displayServiceToken?e.token:e.token.replace(/./g,"*"):e.token}</div>
          <div class="flex">
            ${e.isRevoked?x``:x`
              ${config.isMobile?x`
                <wc-button caption="" icon="copy" color="blue" size="sm" @click=${()=>this.copyToken(e.token)}></wc-button>
              `:x`
              ${"service"===e.type?x`
                <wc-button
                  caption=${this.displayServiceToken?"hide token":"display token"}
                  color="blue" size="sm"
                  @click=${()=>this.displayServiceToken=!this.displayServiceToken}>
                </wc-button>`:x``}

                <wc-button caption="copy" color="blue" size="sm" @click=${()=>this.copyToken(e.token)}></wc-button>
              `}
              <wc-button caption="revoke" color="blue" size="sm" @click=${()=>this.revokeToken(e.jti)}></wc-button>
            `}
          </div>
          ${t<this.tokens.length-1?x`
            <div class="separator"></div>
          `:""}
        `):x`
          <p style="padding-left: 20px; grid-column: 1 / span 3;">Loading Tokens ...</p>
        `}
      </div>
    `}render(){return x`
      <wc-card-container title="User Tokens" color="blue">${this.getTokenContent()}</wc-card-container>
    `}};__decorate$2p([e$3({type:Array})],WcUserTokens.prototype,"tokens",void 0),__decorate$2p([e$3({type:Boolean})],WcUserTokens.prototype,"displayServiceToken",void 0),WcUserTokens=__decorate$2p([e$4("wc-user-tokens")],WcUserTokens);var __decorate$2o=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcReferralCode=class extends s$1{static get styles(){return[accountStyles,i$4`
      dl {
        grid-template-columns: 1fr;
      }

      dd {
        padding: 10px 20px;
      }

      .flex {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      button:hover {
        background-color: var(--printess-pinkHover);
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadReferralCode(){const e=await api.loadUserTokens();e instanceof ServerErrorResponse$2?this.showError(e):this.referralCode=e}connectedCallback(){super.connectedCallback()}copyReferralCode(e){const t=document.createElement("input");t.value=e,document.body.appendChild(t),t.select(),document.execCommand("Copy"),t.remove(),alert("Referral code copied to clipboard")}getContent(){return x`
      <dl>
        <dd style="grid-column: 1;">
          <div class="token" title="ImtpZCI6InByaW50ZXNa">
            ImtpZCI6InByaW50ZXNa
          </div>
          <wc-button
            size="sm"
            caption="copy"
            color="pink"
            @click=${()=>this.copyReferralCode("ImtpZCI6InByaW50ZXNa")}
          ></wc-button>
        </dd>
      </dl>
    `}render(){return x`
      <wc-card-container title="Referral Code" color="pink">${this.getContent()}</wc-card-container>
    `}};__decorate$2o([e$3({type:Array})],WcReferralCode.prototype,"referralCode",void 0),WcReferralCode=__decorate$2o([e$4("wc-referral-code")],WcReferralCode);var __decorate$2n=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcTopicHeader=class extends s$1{static get styles(){return i$4`
      .header {
        font-size: 22px;
        font-weight: 500;
        font-family: var(--printess-header-font);
      }
          
      @media (max-width: ${config.mobileDeviceWidth}px) {
        .header {
          font-size: 18px;
        }
      }
    `}connectedCallback(){super.connectedCallback()}constructor(e,t){super(),this.title=e,this.color=t}render(){return x`
      <h3 class="header" style="color: ${this.color?this.color:"#555555"};">${this.title}</h3>
    `}};__decorate$2n([e$3({attribute:!0,type:String})],WcTopicHeader.prototype,"title",void 0),__decorate$2n([e$3({attribute:!0,type:String})],WcTopicHeader.prototype,"color",void 0),WcTopicHeader=__decorate$2n([e$4("wc-topic-header")],WcTopicHeader);var __decorate$2m=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAlertContainer=class extends s$1{static get styles(){return i$4`
      p {
        font-family: var(--printess-text-font);
      }

      .warning-title {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--printess-red);
        font-size: 18px;
        font-weight: 700;
        font-family: var(--printess-header-font);
      }
      .warning-text {
        display: flex;
        align-items: center;
        justify-content: left;
        flex-direction: row;
        border-left: 3px solid var(--printess-red);
        border-right: 3px solid var(--printess-red);
        border-top: 1px solid var(--printess-red);
        border-bottom: 1px solid var(--printess-red);
        border-radius: 4px;
        padding: 0px 20px;
        margin: 20px 0;
        gap: 20px;
      }
      .warning-text.blue {
        border-left: 3px solid var(--printess-blueHover);
        border-right: 3px solid var(--printess-blueHover);
        border-top: 1px solid var(--printess-blueHover);
        border-bottom: 1px solid var(--printess-blueHover);
      }
      .warning-text.blue > .warning-title {
        color: var(--printess-blueHover);
      }
      .warning-text > p {
        font-size: 15px;
        text-align: justify;
      }
      
      @media (max-width: ${config.mobileDeviceWidth}px) {
        p {
          font-size: 14px;
          text-align: center;
        }
        .warning-title {
            margin-top: 20px;
            margin-right: 0;
            font-size: 14px;
        }
        .warning-text {
          flex-direction: column;
          gap: 0;
        }
        .warning-text > p {
            font-size: 12px;
        }
      }
    `}constructor(e,t){super(),this.alertType=e,this.content=t}connectedCallback(){super.connectedCallback()}render(){const e=this.header||this.alertType.toUpperCase();return x`
      <div class="warning-text ${"info"===this.alertType?"blue":""}">
        <div class="warning-title">${e}:</div>
        ${this.content}
      </div>
    `}};__decorate$2m([e$3({type:String})],WcAlertContainer.prototype,"alertType",void 0),__decorate$2m([e$3({type:Object})],WcAlertContainer.prototype,"header",void 0),__decorate$2m([e$3({type:Object})],WcAlertContainer.prototype,"content",void 0),WcAlertContainer=__decorate$2m([e$4("wc-alert-container")],WcAlertContainer);var __decorate$2l=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAccountPage=class extends s$1{constructor(){super(...arguments),this.debug="localhost"===window.location.hostname||window.location.href.indexOf("debug=1")>0||!0===window.printessDebug}static get styles(){return[accountStyles,i$4`
            .link-text {
                text-decoration: none;
                color: var(--printess-pink);
                cursor: pointer;
            }

            @media (max-width: ${config.mobileDeviceWidth}px) {
                .team-member-info {
                    font-size: 12px;
                }
            }
        `]}connectedCallback(){super.connectedCallback(),location.hash="#account"}getDeleteAccountContent(){return x`
            <div style="padding: 10px">
                <p>Once you delete this account, there is no going back. All your content will be deleted.</p>
                <wc-button size="md" color="red" caption="Delete Account" margin="20px 0 20px 15px;"></wc-button>
            </div>
        `}getAlertContent(){return x`
            <p>The service token should only get used on server side to process orders. With it, billable orders can be started. To protect your account never embed the service token into a web-site!</p>
        `}render(){return window.scrollTo({top:0,behavior:"smooth"}),x`
            <div class="account-page"> 
                <wc-topic-header title="Account"></wc-topic-header>
            
                <wc-user-profile></wc-user-profile>

                <wc-topic-header title="Printess Authorization Tokens"></wc-topic-header>
                <wc-alert-container alertType="attention" .content="${this.getAlertContent()}"></wc-alert-container>
                
                <div class="team-member-info">
                    <span style="font-weight: bold;">Shop-Token: </span>The shop token allows loading of Templates and Snippets, upload images and saving / loading the current layout.
                    <br><br>
                    <span style="font-weight: bold;">Service-Token: </span>The secret service token has access to the production API and can render PDFs or PNGs. It will be shown only on accounts with administrative access.
                </div>
                <wc-user-tokens></wc-user-tokens>

                ${this.debug?x`
                    <wc-topic-header title="Printess Referral Code"></wc-topic-header>
                    <div class="team-member-info">
                        Invite others to join Printess, and for each one who subscribes Printess we will give you both 
                        <span style="font-weight: bold;">500 MB</span> of bonus space. If you need even more space, 
                        <span @click=${()=>location.hash="subscription"} class="link-text">upgrade your account</span>.
                    </div>
                    <wc-referral-code></wc-referral-code>
                
                    <wc-topic-header title="Danger Zone"></wc-topic-header>
                    <p class="subtopic">Irreversible and destructive actions</p>
                
                    <wc-card-container title="Delete Account" color="red">${this.getDeleteAccountContent()}</wc-card-container>
                `:""}
            </div>
        `}};WcAccountPage=__decorate$2l([e$4("wc-account-page")],WcAccountPage);const templateStyles=i$4`
  .template-item {    
    width: 270px;
    display: flex;
    border-radius: 5px;
    padding: 20px;
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .pink  { background-color: var(--printess-lightpink); }
  .green  { background-color: var(--printess-lightgreen); }
  .blue  { background-color: var(--printess-lightblue); }
  .magenta  { background-color: var(--printess-lightmagenta); }

  .template-img {
    display: flex;
    width: 100px;
    padding-right:20px;
    justify-content: center;
    align-items: center;
  }

  img {
    border-radius: 5px;
    width: 100px;
    height: 80px;
    object-fit: cover;
  }

  .template-txt {
    justify-content: center;
    margin: auto;
    width: 180px;
  }

  .template-title {
    margin-top: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  a {
    text-decoration: none;
    color: var(--printess-text-color);
  }

  .template-info {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 20px;
  }
`;var __decorate$2k=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcTemplatePreview=class extends s$1{constructor(e,t){super(),this.color="",this.color=t,this.template=e}static get styles(){return[templateStyles]}render(){return x`
            ${this.color&&this.template?x`
            <div class="template-item ${this.color}">
                <div class="template-img">
                    <a href=${this.template.turl} target="_blank">
                        <img src=${this.template&&this.template.turl} alt=${this.template.n} style="background-color: ${this.template.bg}">
                    </a>
                </div>
                <div class="template-txt">
                    <p class="template-title">
                        <a href=${this.template.turl} target="_blank">
                            ${this.template.n}
                        </a>
                    </p>
                    <p class="template-info">
                        <span>created: ${new Date(this.template.lp).getDate()}.${new Date(this.template.lp).getMonth()+1}.${new Date(this.template.lp).getFullYear()}</span><br>
                        <span>last modified: ${new Date(this.template?.ls).getDate()}.${new Date(this.template.ls).getMonth()+1}.${new Date(this.template.ls).getFullYear()}</span>
                    </p>
                </div>
            </div>
            `:""}
        `}};__decorate$2k([e$3({attribute:!0,type:Object})],WcTemplatePreview.prototype,"template",void 0),__decorate$2k([e$3({attribute:!0,type:String})],WcTemplatePreview.prototype,"color",void 0),WcTemplatePreview=__decorate$2k([e$4("wc-template-preview")],WcTemplatePreview);const templatesPageStyles=i$4`
  .template-page {
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
  }

  .template-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    grid-gap: 20px;
    margin-top: 30px;
  }

  select {
    padding: 5px 7px;
    background-color: white;
    color: #555555;
    border-radius: 4px;
    margin-left: 10px;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }
  }
`;var __decorate$2j=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcTemplatesPage=class extends s$1{constructor(){super(...arguments),this.orderValue="name"}static get styles(){return[templatesPageStyles]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadTemplates(){const e=await api.loadTemplatesList();e instanceof ServerErrorResponse$2?this.showError(e):this.templates=e}connectedCallback(){super.connectedCallback(),this.loadTemplates(),location.hash="#templates"}sortOptions(e,t){switch(this.orderValue){case"name":return e.n<t.n?-1:e.n>t.n?1:0;case"date-modified":return e.ls<t.ls?1:e.ls>t.ls?-1:0;case"date-created":return e.lp<t.lp?1:e.lp>t.lp?-1:0;default:assertNever$1(this.orderValue)}}renderTemplates(){return this.templates?x`${this.templates.uts.filter(e=>e.uid===this.templates.uid)[0]?.ts.sort((e,t)=>this.sortOptions(e,t)).map((e,t)=>new WcTemplatePreview(e,["green","pink","blue","magenta"][t%4]))}`:x`<p>Templates loading ...</p>`}setOrderValue(e){this.orderValue=e.target.value}render(){return x`
            <div class="template-page">
                <h3 class="topic">User Templates</h3>
                <p class="subtopic">Templates list</p>

                <label for="template-order">Order by:</label>
                <select @change=${e=>this.setOrderValue(e)} name="template-order" id="template-order">
                    <option value="name">Name</option>
                    <option value="date-created">Date created</option>
                    <option value="date-modified">Date modified</option>
                </select>
                <div class="template-wrapper">
                    ${this.renderTemplates()}
                </div>
            </div>
        `}};__decorate$2j([e$3({type:Object})],WcTemplatesPage.prototype,"templates",void 0),__decorate$2j([e$3({type:String})],WcTemplatesPage.prototype,"orderValue",void 0),WcTemplatesPage=__decorate$2j([e$4("wc-templates-page")],WcTemplatesPage);class SearchOrders extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof SearchOrders))if("string"==typeof e)this.templateName=e,this.shopSaveId="",this.origin="",this.productType="",this.externalOrderId="",this.hideEagle=!0;else{const t=e;this.templateName=t.templateName??"",this.shopSaveId=t.saveToken??"",this.templateNameOperator=t.templateNameOperator,this.origin=t.origin??"",this.userId=t.userId??"",this.productType=t.productType??"",this.externalOrderId=t.externalOrderId??"",this.startDate=t.startDate,this.endDate=t.endDate,this.isFinished=t.isFinished,this.isImposed=t.isImposed,this.take=t.take,this.skip=t.skip,this.onlyMyOrders=t.onlyMyOrders,this.hideEagle=!t.payload||-1!==t.payload.indexOf("hideEagle")}}toDto(e){return{templateName:this.templateName,saveToken:this.shopSaveId,templateNameOperator:this.templateNameOperator,origin:this.origin,userId:this.userId,productType:this.productType,externalOrderId:this.externalOrderId,startDate:this.startDate,endDate:this.endDate,isFinished:this.isFinished,isImposed:this.isImposed,isFailed:this.isFailed,take:this.take,skip:this.skip,onlyMyOrders:this.onlyMyOrders,payload:["as admin"===e&&adm.useAdminMode?"skipUserIdCheck":"",this.hideEagle?"hideEagle":""].filter(e=>e).join(",")}}}const printjobsStyles=i$4`
  .user-orders {
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
    color: #555555;
  }

  .buttons-wrapper {
    color: white;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    gap: 10px;
    flex-wrap: wrap;
  }
  .option-button {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    flex: 1 0 auto;
    justify-content: center;
    background: var(--printess-blue);
    border-radius: 4px;
    height: 15px;
  }
  .option-button:hover {
    background-color: var(--printess-blueHover);
  }

  .filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
  }

  .setting-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .inline {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .template-name-label {
    font-size: 16px;
  }

  .template-name-input {
    margin: 0 10px;
    border: 1px solid #ccc;
    background: rgba(76, 156, 226, 0.1);
  }

  .collapse-icon {
    cursor: pointer;
    margin-right: 10px;
    height: 20px;
  }

  .table-settings {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    height: 35px;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #ADADAD;
    outline: none;
    border-radius: 4px;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
    color: #555555;
  }

  .table-settings:hover {
    background-color: #e2e2e2;
  }

  .input-label {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    flex: 1 0 300px;
    padding-right: 20px;
  }

  label {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
  }

  input {
    padding: 10px 20px;
    background-color: rgba(76, 156, 226, 0.1);
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    margin: 10px 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--printess-text-font);
    height: 40px;
    width: 100%;
    color:  #555555;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #a0a0a0;
    opacity: 1; /* Firefox */
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #a0a0a0;
  }
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #a0a0a0;
  }

  .filter-button {
    padding: 10px;
    border-radius: 4px;
    background-color: var(--printess-blue);
    border: none;
    height: 40px;
  }
  .filter-button:hover {
    background-color: var(--printess-blueHover);
  }

  .expanded-filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px 0 0 20px;
  }

  select {
    padding: 10px 20px;
    margin: 10px 10px 0 0;
    height: 40px;
    width: 100%;
    font-family: var(--printess-text-font);
    font-size: 14px;
    font-weight: 400;
    background-color: rgba(76, 156, 226, 0.1);
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: #555555;
  }

  wc-icon {
    width: 25px;
    height: 25px;
  }

  .filter-icon {
    cursor: pointer;
    height: 22px;
  }

  .table-container {
    margin-top: 10px;
  }

  .hidden {
    display: none;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    .buttons-wrapper {
      flex-wrap: wrap;
      height: auto;
    }
    .option-button {
      padding: 7px 10px;
      font-size: 12px;
      flex: 1 1 auto;
      height: 17px;
    }

    .collapse-icon {
      width: 20px;
      height: 20px;
    }

    .filter-wrapper {
      margin-top: 20px;
    }

    .filter-button {
      height: 30px;
      padding: 7px 10px;
    }

    .setting-buttons {
      margin-bottom: 10px;
    }

    .setting-buttons button {
      margin-bottom: 5px;
    }

    .table-settings {
      font-size: 12px;
      padding: 7px 10px;
      height: 30px;
      margin-right: 5px;
    }

    .inline {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      margin-top: 20px;
    }

    .template-name-label {
      font-size: 12px;
    }

    .input-label {
      flex: 1 0 150px;
    }
    
    input {
      padding: 0 15px;
      font-size: 12px;
      height: 30px;
    }

    label {
      font-size: 12px;
    }

    select {
      padding: 0 15px;
      font-size: 12px;
      height: 30px;
    }

    wc-icon {
      width: 15px;
      height: 15px;
    }

    .filter-icon {
      cursor: pointer; 
      width: 15px; 
      height: 15px;
    }
  }
`;function requiredArgs(e,t){if(t.length<e)throw new TypeError(e+" argument"+(e>1?"s":"")+" required, but only "+t.length+" present")}function toDate(e){requiredArgs(1,arguments);var t=Object.prototype.toString.call(e);return e instanceof Date||"object"==typeof e&&"[object Date]"===t?new Date(e.getTime()):"number"==typeof e||"[object Number]"===t?new Date(e):("string"!=typeof e&&"[object String]"!==t||"undefined"==typeof console||(console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://git.io/fjule"),console.warn((new Error).stack)),new Date(NaN))}function getTimezoneOffsetInMilliseconds(e){var t=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds(),e.getMilliseconds()));return t.setUTCFullYear(e.getFullYear()),e.getTime()-t.getTime()}function compareAsc(e,t){requiredArgs(2,arguments);var o=toDate(e),r=toDate(t),i=o.getTime()-r.getTime();return i<0?-1:i>0?1:i}function differenceInCalendarMonths(e,t){requiredArgs(2,arguments);var o=toDate(e),r=toDate(t);return 12*(o.getFullYear()-r.getFullYear())+(o.getMonth()-r.getMonth())}function differenceInMilliseconds(e,t){requiredArgs(2,arguments);var o=toDate(e),r=toDate(t);return o.getTime()-r.getTime()}function endOfDay(e){requiredArgs(1,arguments);var t=toDate(e);return t.setHours(23,59,59,999),t}function endOfMonth(e){requiredArgs(1,arguments);var t=toDate(e),o=t.getMonth();return t.setFullYear(t.getFullYear(),o+1,0),t.setHours(23,59,59,999),t}function isLastDayOfMonth(e){requiredArgs(1,arguments);var t=toDate(e);return endOfDay(t).getTime()===endOfMonth(t).getTime()}function differenceInMonths(e,t){requiredArgs(2,arguments);var o,r=toDate(e),i=toDate(t),a=compareAsc(r,i),s=Math.abs(differenceInCalendarMonths(r,i));if(s<1)o=0;else{1===r.getMonth()&&r.getDate()>27&&r.setDate(30),r.setMonth(r.getMonth()-a*s);var n=compareAsc(r,i)===-a;isLastDayOfMonth(toDate(e))&&1===s&&1===compareAsc(e,i)&&(n=!1),o=a*(s-Number(n))}return 0===o?0:o}function differenceInSeconds(e,t){requiredArgs(2,arguments);var o=differenceInMilliseconds(e,t)/1e3;return o>0?Math.floor(o):Math.ceil(o)}var formatDistanceLocale={lessThanXSeconds:{one:"less than a second",other:"less than {{count}} seconds"},xSeconds:{one:"1 second",other:"{{count}} seconds"},halfAMinute:"half a minute",lessThanXMinutes:{one:"less than a minute",other:"less than {{count}} minutes"},xMinutes:{one:"1 minute",other:"{{count}} minutes"},aboutXHours:{one:"about 1 hour",other:"about {{count}} hours"},xHours:{one:"1 hour",other:"{{count}} hours"},xDays:{one:"1 day",other:"{{count}} days"},aboutXWeeks:{one:"about 1 week",other:"about {{count}} weeks"},xWeeks:{one:"1 week",other:"{{count}} weeks"},aboutXMonths:{one:"about 1 month",other:"about {{count}} months"},xMonths:{one:"1 month",other:"{{count}} months"},aboutXYears:{one:"about 1 year",other:"about {{count}} years"},xYears:{one:"1 year",other:"{{count}} years"},overXYears:{one:"over 1 year",other:"over {{count}} years"},almostXYears:{one:"almost 1 year",other:"almost {{count}} years"}};function formatDistance$1(e,t,o){var r;return o=o||{},r="string"==typeof formatDistanceLocale[e]?formatDistanceLocale[e]:1===t?formatDistanceLocale[e].one:formatDistanceLocale[e].other.replace("{{count}}",t),o.addSuffix?o.comparison>0?"in "+r:r+" ago":r}function buildFormatLongFn(e){return function(t){var o=t||{},r=o.width?String(o.width):e.defaultWidth;return e.formats[r]||e.formats[e.defaultWidth]}}var dateFormats={full:"EEEE, MMMM do, y",long:"MMMM do, y",medium:"MMM d, y",short:"MM/dd/yyyy"},timeFormats={full:"h:mm:ss a zzzz",long:"h:mm:ss a z",medium:"h:mm:ss a",short:"h:mm a"},dateTimeFormats={full:"{{date}} 'at' {{time}}",long:"{{date}} 'at' {{time}}",medium:"{{date}}, {{time}}",short:"{{date}}, {{time}}"},formatLong={date:buildFormatLongFn({formats:dateFormats,defaultWidth:"full"}),time:buildFormatLongFn({formats:timeFormats,defaultWidth:"full"}),dateTime:buildFormatLongFn({formats:dateTimeFormats,defaultWidth:"full"})},formatRelativeLocale={lastWeek:"'last' eeee 'at' p",yesterday:"'yesterday at' p",today:"'today at' p",tomorrow:"'tomorrow at' p",nextWeek:"eeee 'at' p",other:"P"};function formatRelative(e,t,o,r){return formatRelativeLocale[e]}function buildLocalizeFn(e){return function(t,o){var r,i=o||{};if("formatting"===(i.context?String(i.context):"standalone")&&e.formattingValues){var a=e.defaultFormattingWidth||e.defaultWidth,s=i.width?String(i.width):a;r=e.formattingValues[s]||e.formattingValues[a]}else{var n=e.defaultWidth,l=i.width?String(i.width):e.defaultWidth;r=e.values[l]||e.values[n]}return r[e.argumentCallback?e.argumentCallback(t):t]}}var eraValues={narrow:["B","A"],abbreviated:["BC","AD"],wide:["Before Christ","Anno Domini"]},quarterValues={narrow:["1","2","3","4"],abbreviated:["Q1","Q2","Q3","Q4"],wide:["1st quarter","2nd quarter","3rd quarter","4th quarter"]},monthValues={narrow:["J","F","M","A","M","J","J","A","S","O","N","D"],abbreviated:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],wide:["January","February","March","April","May","June","July","August","September","October","November","December"]},dayValues={narrow:["S","M","T","W","T","F","S"],short:["Su","Mo","Tu","We","Th","Fr","Sa"],abbreviated:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],wide:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]},dayPeriodValues={narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"morning",afternoon:"afternoon",evening:"evening",night:"night"}},formattingDayPeriodValues={narrow:{am:"a",pm:"p",midnight:"mi",noon:"n",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},abbreviated:{am:"AM",pm:"PM",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"},wide:{am:"a.m.",pm:"p.m.",midnight:"midnight",noon:"noon",morning:"in the morning",afternoon:"in the afternoon",evening:"in the evening",night:"at night"}};function ordinalNumber(e,t){var o=Number(e),r=o%100;if(r>20||r<10)switch(r%10){case 1:return o+"st";case 2:return o+"nd";case 3:return o+"rd"}return o+"th"}var localize={ordinalNumber:ordinalNumber,era:buildLocalizeFn({values:eraValues,defaultWidth:"wide"}),quarter:buildLocalizeFn({values:quarterValues,defaultWidth:"wide",argumentCallback:function(e){return Number(e)-1}}),month:buildLocalizeFn({values:monthValues,defaultWidth:"wide"}),day:buildLocalizeFn({values:dayValues,defaultWidth:"wide"}),dayPeriod:buildLocalizeFn({values:dayPeriodValues,defaultWidth:"wide",formattingValues:formattingDayPeriodValues,defaultFormattingWidth:"wide"})};function buildMatchPatternFn(e){return function(t,o){var r=String(t),i=o||{},a=r.match(e.matchPattern);if(!a)return null;var s=a[0],n=r.match(e.parsePattern);if(!n)return null;var l=e.valueCallback?e.valueCallback(n[0]):n[0];return{value:l=i.valueCallback?i.valueCallback(l):l,rest:r.slice(s.length)}}}function buildMatchFn(e){return function(t,o){var r=String(t),i=o||{},a=i.width,s=a&&e.matchPatterns[a]||e.matchPatterns[e.defaultMatchWidth],n=r.match(s);if(!n)return null;var l,c=n[0],d=a&&e.parsePatterns[a]||e.parsePatterns[e.defaultParseWidth];return l="[object Array]"===Object.prototype.toString.call(d)?findIndex(d,function(e){return e.test(c)}):findKey(d,function(e){return e.test(c)}),l=e.valueCallback?e.valueCallback(l):l,{value:l=i.valueCallback?i.valueCallback(l):l,rest:r.slice(c.length)}}}function findKey(e,t){for(var o in e)if(e.hasOwnProperty(o)&&t(e[o]))return o}function findIndex(e,t){for(var o=0;o<e.length;o++)if(t(e[o]))return o}var matchOrdinalNumberPattern=/^(\d+)(th|st|nd|rd)?/i,parseOrdinalNumberPattern=/\d+/i,matchEraPatterns={narrow:/^(b|a)/i,abbreviated:/^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,wide:/^(before christ|before common era|anno domini|common era)/i},parseEraPatterns={any:[/^b/i,/^(a|c)/i]},matchQuarterPatterns={narrow:/^[1234]/i,abbreviated:/^q[1234]/i,wide:/^[1234](th|st|nd|rd)? quarter/i},parseQuarterPatterns={any:[/1/i,/2/i,/3/i,/4/i]},matchMonthPatterns={narrow:/^[jfmasond]/i,abbreviated:/^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,wide:/^(january|february|march|april|may|june|july|august|september|october|november|december)/i},parseMonthPatterns={narrow:[/^j/i,/^f/i,/^m/i,/^a/i,/^m/i,/^j/i,/^j/i,/^a/i,/^s/i,/^o/i,/^n/i,/^d/i],any:[/^ja/i,/^f/i,/^mar/i,/^ap/i,/^may/i,/^jun/i,/^jul/i,/^au/i,/^s/i,/^o/i,/^n/i,/^d/i]},matchDayPatterns={narrow:/^[smtwf]/i,short:/^(su|mo|tu|we|th|fr|sa)/i,abbreviated:/^(sun|mon|tue|wed|thu|fri|sat)/i,wide:/^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i},parseDayPatterns={narrow:[/^s/i,/^m/i,/^t/i,/^w/i,/^t/i,/^f/i,/^s/i],any:[/^su/i,/^m/i,/^tu/i,/^w/i,/^th/i,/^f/i,/^sa/i]},matchDayPeriodPatterns={narrow:/^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,any:/^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i},parseDayPeriodPatterns={any:{am:/^a/i,pm:/^p/i,midnight:/^mi/i,noon:/^no/i,morning:/morning/i,afternoon:/afternoon/i,evening:/evening/i,night:/night/i}},match={ordinalNumber:buildMatchPatternFn({matchPattern:matchOrdinalNumberPattern,parsePattern:parseOrdinalNumberPattern,valueCallback:function(e){return parseInt(e,10)}}),era:buildMatchFn({matchPatterns:matchEraPatterns,defaultMatchWidth:"wide",parsePatterns:parseEraPatterns,defaultParseWidth:"any"}),quarter:buildMatchFn({matchPatterns:matchQuarterPatterns,defaultMatchWidth:"wide",parsePatterns:parseQuarterPatterns,defaultParseWidth:"any",valueCallback:function(e){return e+1}}),month:buildMatchFn({matchPatterns:matchMonthPatterns,defaultMatchWidth:"wide",parsePatterns:parseMonthPatterns,defaultParseWidth:"any"}),day:buildMatchFn({matchPatterns:matchDayPatterns,defaultMatchWidth:"wide",parsePatterns:parseDayPatterns,defaultParseWidth:"any"}),dayPeriod:buildMatchFn({matchPatterns:matchDayPeriodPatterns,defaultMatchWidth:"any",parsePatterns:parseDayPeriodPatterns,defaultParseWidth:"any"})},locale={code:"en-US",formatDistance:formatDistance$1,formatLong:formatLong,formatRelative:formatRelative,localize:localize,match:match,options:{weekStartsOn:0,firstWeekContainsDate:1}};function assign(e,t){if(null==e)throw new TypeError("assign requires that input parameter not be null or undefined");for(var o in t=t||{})t.hasOwnProperty(o)&&(e[o]=t[o]);return e}function cloneObject(e){return assign({},e)}var MINUTES_IN_DAY=1440,MINUTES_IN_ALMOST_TWO_DAYS=2520,MINUTES_IN_MONTH=43200,MINUTES_IN_TWO_MONTHS=86400;function formatDistance(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};requiredArgs(2,arguments);var r=o.locale||locale;if(!r.formatDistance)throw new RangeError("locale must contain formatDistance property");var i=compareAsc(e,t);if(isNaN(i))throw new RangeError("Invalid time value");var a,s,n=cloneObject(o);n.addSuffix=Boolean(o.addSuffix),n.comparison=i,i>0?(a=toDate(t),s=toDate(e)):(a=toDate(e),s=toDate(t));var l,c=differenceInSeconds(s,a),d=(getTimezoneOffsetInMilliseconds(s)-getTimezoneOffsetInMilliseconds(a))/1e3,p=Math.round((c-d)/60);if(p<2)return o.includeSeconds?c<5?r.formatDistance("lessThanXSeconds",5,n):c<10?r.formatDistance("lessThanXSeconds",10,n):c<20?r.formatDistance("lessThanXSeconds",20,n):c<40?r.formatDistance("halfAMinute",null,n):c<60?r.formatDistance("lessThanXMinutes",1,n):r.formatDistance("xMinutes",1,n):0===p?r.formatDistance("lessThanXMinutes",1,n):r.formatDistance("xMinutes",p,n);if(p<45)return r.formatDistance("xMinutes",p,n);if(p<90)return r.formatDistance("aboutXHours",1,n);if(p<MINUTES_IN_DAY){var h=Math.round(p/60);return r.formatDistance("aboutXHours",h,n)}if(p<MINUTES_IN_ALMOST_TWO_DAYS)return r.formatDistance("xDays",1,n);if(p<MINUTES_IN_MONTH){var g=Math.round(p/MINUTES_IN_DAY);return r.formatDistance("xDays",g,n)}if(p<MINUTES_IN_TWO_MONTHS)return l=Math.round(p/MINUTES_IN_MONTH),r.formatDistance("aboutXMonths",l,n);if((l=differenceInMonths(s,a))<12){var u=Math.round(p/MINUTES_IN_MONTH);return r.formatDistance("xMonths",u,n)}var m=l%12,f=Math.floor(l/12);return m<3?r.formatDistance("aboutXYears",f,n):m<9?r.formatDistance("overXYears",f,n):r.formatDistance("almostXYears",f+1,n)}const tableStyles$1=i$4`
  .table-wrapper {
    overflow: auto;
    border-bottom: 2px solid #d0049b;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    font-family: var(--printess-text-font);
    max-height: 70vh;
  }
  
  table {
    margin-top:0;
    position: relative;
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
  }

  td, th {
    padding: 7px 20px;
    line-height: 25px;
    white-space: nowrap;
    color: #555555;
  }

  tr:nth-child(odd){
    background-color:rgba(208, 4, 155, 0.04);
  }

  th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #d0049b;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    position: sticky;
    top:0;
  }

  td a {
    text-decoration: none;
    color: #d3277c;
  }

  td.ellipsis, span.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
  }

  wc-icon {
    width: 25px;
    height: 25px;
  }

  .flex {
    display: flex;
  }

  .hide {
    display: none;
  }

  .loader {
    position: fixed;
    left: 50%;
    top: 50%;
    display: inline-block;
    width: 80px;
    height: 80px;
  }
  .loader:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid var(--printess-magenta);
    border-color: var(--printess-magenta) transparent var(--printess-magenta) transparent;
    animation: loader 1.2s linear infinite;
  }
  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .spinner,
  .spinner:after {
    border-radius: 50%;
    width: 2em;
    height: 2em;
  }
  .spinner {
    font-size: 8px;
    position: relative;
    border-top: 0.5em solid rgba(230,0,126, 0.2);
    border-right: 0.5em solid rgba(230,0,126, 0.2);
    border-bottom: 0.5em solid rgba(230,0,126, 0.2);
    border-left: 0.5em solid #e6007e;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
  }
  @-webkit-keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

`;var __decorate$2i=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};function humanReadableBackendFailureDetails(e){try{if(e?.includes("Cannot parse resources: ")){const t=e.substring(24).trim().split("\n");for(const e of t){if(e.startsWith("{")&&e.endsWith("}")){const t=JSON.parse(e);if("ReadJavaScriptString"===t.func&&t.errorMessage.includes("ReferenceError")&&t.errorMessage.includes("error=not found: ")){const e=t.errorMessage.indexOf("Result of '"),o=t.errorMessage.indexOf("' is not a string."),r=t.errorMessage.split("error=not found: "),i=r[r.length-1];if(-1!==e&&o>e){const r=t.errorMessage.substring(e+11,o);return i.startsWith("form.")?`The expression '${r}' caused an error. The form field '${i.substring(5)}' does not exist.`:`The expression '${r}' caused an error. Caused by ${i}.`}console.error(i)}break}if(e.startsWith("Method 'ParseStyleFont' failed with 'Cannot find font from style")){const t=e.indexOf("font name=");if(-1!==t){const o=e.indexOf("'",t);if(-1!==o){return`The font '${e.substring(t+10,o)}' does not exist. It is used somewhere in the styles.`}}}}}}catch(e){console.error(e)}return e}let WcDialogErrorMessage=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal-wrapper {
        width: 70vmin;
      }
    `]}constructor(e){super(),this.backdrop=new WcBackdrop,this.errorMsg=e}showDialog(){document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Failure Details</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <p style="word-break: break-word;">${humanReadableBackendFailureDetails(this.errorMsg)}</p>
            <button @click=${this.closeDialog} class="submit">Close</button>
          </div>
        </div>
      </div>
    `}};__decorate$2i([e$3({attribute:!1,type:String})],WcDialogErrorMessage.prototype,"errorMsg",void 0),WcDialogErrorMessage=__decorate$2i([e$4("wc-dialog-error-message")],WcDialogErrorMessage);var __decorate$2h=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const columns=[{name:"id",title:"Id"},{name:"jobId",title:"Job Id"},{name:"shortInfo",title:"Short User Info"},{name:"userInfo",title:"User Info"},{name:"userId",title:"User Id"},{name:"sourceUserId",title:"Source User Id"},{name:"externalOrderId",title:"External Order Id"},{name:"templateName",title:"Template Name"},{name:"origin",title:"Origin"},{name:"shopSaveId",title:"Shop Save Id"},{name:"productType",title:"Product Type"},{name:"createdOn",title:"Created"},{name:"finishedOn",title:"Finished"},{name:"isFinished",title:"Status"},{name:"failureDetails",title:"Failure Details"},{name:"result",title:"File"},{name:"document",title:"Documents"},{name:"pages",title:"Pages"},{name:"size",title:"Size"},{name:"usedCredits",title:"Credits"}];let WcPrintjobsTable=class extends s$1{static get styles(){return[tableStyles$1]}constructor(e,t,o){super(),this.showIsoDate=!1,this.editorVersionPrefix="",this.data=e,this.headers=t,this.editorVersionPrefix=o;const r=localStorage.getItem("tableSettings");r?this.headers=JSON.parse(r):this.headers}getSearchValue(e){this.callback=e}setSearchValue(e,t){this.callback&&this.callback(e,t),this.copyToClipboard(t)}getUserInfo(e){let t="";if(this.data.users){const o=this.data.users.filter(t=>t.id===e.userId)[0];if(o&&(t+=o.d+" ("+o.e+")"),e.sourceUserId){const o=this.data.users.filter(t=>t.id===e.sourceUserId)[0];o&&(t+=", issued by "+o.d+" ("+o.e+")")}}return t}getShortUserInfo(e){if(this.data.users){const t=this.data.users.filter(t=>t.id===e.userId)[0];if(e.sourceUserId){const t=this.data.users.filter(t=>t.id===e.sourceUserId)[0];if(t)return t.d}else if(t)return t.d}return""}async retryOrder(e){const t={orderId:e.id,reloadPaymentData:!1};"paymentRequired"==e.failureDetails&&(t.reloadPaymentData=!0);const o=await api.retryOrder(t);o instanceof ServerErrorResponse$2?alert(o.message):console.log("retryOrder",o)}render(){return x`
    ${this.data?x`
    <div class="table-wrapper">
      <table class="layout display responsive-table">
        <thead>
          <tr>
            <th></th>
            ${c(columns,e=>e.name,e=>x`
              <th class=${this.headers.includes(`${e.title}`)?"":"hide"}>${"Shopify"===currentUser.displayName&&"externalOrderId"===e.name?"Shopify Order Id":e.title}</th>
            `)}
          </tr>
        </thead>
        <tbody>
          ${this.data&&c(this.data.orders,e=>e.id,e=>{const t=this.getUserInfo(e),o=this.getShortUserInfo(e),r=new Date(e.createdOn).toISOString();return x`
            <tr>
              <td><wc-icon style="width:16px; height:16px; cursor: pointer;" title="Process this order again. This will create a new order and costs credits according to the usage." primaryColor="lightgreen" icon="rotator" @click=${()=>this.retryOrder(e)}></wc-icon></td>
              <td class='orders-id ${this.headers.includes("Id")?"":"hide"}' style="cursor: copy;" @click=${()=>this.copyToClipboard(e.id)}>${e.id}</td>
              <td class=${this.headers.includes("Job Id")?"":"hide"} style="cursor: copy;" @click=${()=>this.copyToClipboard(e.jobId)}>${e.jobId}</td>
              <td class=${this.headers.includes("Short User Info")?"":"hide"} style="cursor: copy;" @click=${()=>this.setSearchValue("userId",e.userId)}>${o}</td>
              <td class=${this.headers.includes("User Info")?"":"hide"}>${t}</td>
              <td class=${this.headers.includes("User Id")?"":"hide"} style="cursor: copy;" @click=${()=>this.setSearchValue("userId",e.userId)}>${e.userId}</td>
              <td class=${this.headers.includes("Source User Id")?"":"hide"} style="cursor: copy;" @click=${()=>this.copyToClipboard(e.sourceUserId)}>${e.sourceUserId}</td>
              <td class=${this.headers.includes("External Order Id")?"":"hide"} style="cursor: copy;" @click=${()=>this.copyToClipboard(e.externalOrderId)}>${"Shopify"===currentUser.displayName?x`<a href=${`https://${currentUser.shopifyUrl}/admin/orders/${e.externalOrderId}`} target=_blank>${e.externalOrderId}</a>`:e.externalOrderId}</td>
              <td class=${this.headers.includes("Template Name")?"":"hide"}><a href="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7BcreateEditorUrl%28e%2Cthis.editorVersionPrefix%29%7D" target="_blank" style="display:flex;flex-direction:row;" title=${t}><wc-icon primaryColor="pink" icon="printess-wand"></wc-icon> &nbsp <span class="ellipsis">${e.templateName.replace("~published","").replace("~merged","")}</span></a></td>
              <td class="${this.headers.includes("Origin")?"":"hide"} ellipsis" style="cursor: copy;" @click=${()=>this.setSearchValue("origin",e.origin)}>${e.origin}</td>
              <td class=${this.headers.includes("Shop Save Id")?"":"hide"}>${e.shopSaveId}</td>
              <td class=${this.headers.includes("Product Type")?"":"hide"}>${e.productType}</td>
              <td class=${this.headers.includes("Created")?"":"hide"} style="cursor: copy;" title=${r} @click=${()=>this.copyToClipboard(r)}>${this.showIsoDate?r:formatDistance(new Date(e.createdOn),new Date,{addSuffix:!0})}</td>
              <td class=${this.headers.includes("Finished")?"":"hide"} style="cursor: copy;" title=${new Date(e.finishedOn??e.createdOn).toISOString()} @click=${()=>this.copyToClipboard(new Date(e.finishedOn??e.createdOn).toISOString())}>${e.isFinished?formatDistance(new Date(e.finishedOn?e.finishedOn:0),new Date,{addSuffix:!0}):""}</td>
              <td class=${this.headers.includes("Status")?"":"hide"}>${this.statusValue(e.isFinished,e.isFailure,e.failureDetails)}</td>
              <td class=${this.headers.includes("Failure Details")?"":"hide"}>${humanReadableBackendFailureDetails(e.failureDetails)}</td>
              <td class=${this.headers.includes("File")?"flex":"hide"}>${this.pdfValue(e.result?.r,e.result?.zip,e.result?.p,e.finishedOn)}</td>
              <td class=${this.headers.includes("Documents")?"":"hide"}>${e.documents}</td>
              <td class=${this.headers.includes("Pages")?"":"hide"}>${e.pages}</td>
              <td class=${this.headers.includes("Size")?"":"hide"}>${e.size?x`${(e.size/1048576).toFixed(2).toLocaleString()} MB`:"0 MB"}</td>
              <td class=${this.headers.includes("Credits")?"":"hide"}>${e.usedCredits??""}</td>
            </tr>
          `})}
          </tbody>
      </table>
    </div>
    `:x`<div class="loader"></div>`}`}copyToClipboard(e){navigator.clipboard.writeText(e).then(function(){},function(){})}showErrorMsg(e){new WcDialogErrorMessage(e).showDialog()}statusValue(e,t,o){return e&&!t?x`<wc-icon primaryColor="lightgreen" icon="check" style="display: inline-block;"></wc-icon>`:e?x`<wc-icon primaryColor="pink" icon="warning" @click=${()=>this.showErrorMsg(o)} style="cursor: pointer; display: inline-block;"></wc-icon>`:x`<div class="spinner" style="display: inline-block;"></div>`}pdfValue(e,t,o,r){if(r){const e=new Date,t=new Date(r);if(e.setDate(e.getDate()-30),t<e&&config.isPrintessSystem)return x`Files deleted. Please reprocess.`}return e&&Object.keys(e).length>0?x`${Object.keys(e).map(t=>x`
        <a href=${e[t]} style="display: inline-block" target="_blank" title=${t}>
          <wc-icon primaryColor="pink" icon="page-inverse" style="margin-right: 10px;"></wc-icon>
        </a>`)}`:t?x`
        <a href=${t} target="_blank">
          <wc-icon primaryColor="pink" icon="page-inverse"></wc-icon>
        </a>`:o&&o.length>0?x`${o.map(e=>x`
        <a href=${e.u} style="display: inline-block" target="_blank">
          <wc-icon primaryColor="pink" icon="image" style="margin-right: 10px;"></wc-icon>
        </a>
      `)}`:x`<wc-icon primaryColor="gray" icon="page-light"></wc-icon>`}};__decorate$2h([e$3({attribute:!1,type:Object})],WcPrintjobsTable.prototype,"data",void 0),__decorate$2h([e$3({attribute:!1,type:Array})],WcPrintjobsTable.prototype,"headers",void 0),__decorate$2h([e$3({attribute:!1,type:String})],WcPrintjobsTable.prototype,"errorMsg",void 0),__decorate$2h([e$3({attribute:!1,type:Object})],WcPrintjobsTable.prototype,"productionStatus",void 0),__decorate$2h([e$3({attribute:!1,type:Boolean})],WcPrintjobsTable.prototype,"showIsoDate",void 0),__decorate$2h([e$3({attribute:!1,type:String})],WcPrintjobsTable.prototype,"editorVersionPrefix",void 0),WcPrintjobsTable=__decorate$2h([e$4("wc-printjobs-table")],WcPrintjobsTable);var __decorate$2g=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const mobileColumns=[{name:"id",title:"Id"},{name:"jobId",title:"Job Id"},{name:"shortUserInfo",title:"Short User Info"},{name:"userInfo",title:"User Info"},{name:"userId",title:"User Id"},{name:"sourceUserId",title:"Source User Id"},{name:"externalOrderId",title:"External Order Id"},{name:"origin",title:"Origin"},{name:"shopSaveId",title:"Shop Save Id"},{name:"productType",title:"Product Type"},{name:"createdOn",title:"Created"},{name:"result",title:"File"},{name:"loadableTemplateName",title:"Loadable Template Name"}];let WcDialogTableSettings=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        padding-top: 50px;
      }

      .modal-content {
        max-height: calc(100% - 198px);
        overflow-y: auto;
      }
      
      label {
        cursor: pointer;
        font-family: var(--printess-text-font);
      }
      input {
        width: auto;
      }

      [type="checkbox"] {
        position: relative;
        border: none;
        border-radius: 10px;
        outline: none;
        left: 0px;
        top: -10px;
        width: 40px;
        height: 16px;
        z-index: 0;
        -webkit-appearance: none;
      }

      [type="checkbox"]:focus, [type="checkbox"]:hover {
        display: hidden;
        border: none;
        outline: none;
      }

      [type="checkbox"] + label {
        position: relative;
        display: block;
        cursor: pointer;
        line-height: 1.2;
        padding-left: 70px;
        position: relative;
        margin-top: -35px;
      }
      [type="checkbox"] + label:before {
        width: 40px;
        height: 18px;
        border-radius: 30px;
        border: 2px solid #ddd;
        background-color: #EEE;
        content: "";
        margin-right: 15px;
        transition: background-color 0.5s linear;
        z-index: 5;
        position: absolute;
        left: 0px;
      }
      [type="checkbox"] + label:after {
        width: 18px;
        height: 18px;
        border-radius: 30px;
        background-color: #fff;
        content: "";
        transition: margin 0.1s linear;
        box-shadow: 0px 0px 5px #aaa;
        position: absolute;
        left: 2px;
        top: 2px;
        z-index: 10;
      }
      [type="checkbox"]:checked + label:before {
        background-color: #e35fbc;
        border-color: #e35fbc;
      }
      [type="checkbox"]:checked + label:after {
        margin: 0 0 0 22px;
        box-shadow: #e447b6 0px 0px 5px;
      }
    `]}constructor(){super(),this.state=["Id","Template Name","Created","Status","File","Documents","Pages","Size"],this.headerSelection=config.isMobile?mobileColumns:columns,this.backdrop=new WcBackdrop}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this);const t=localStorage.getItem("tableSettings");t?this.state=JSON.parse(t):this.state}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}checkAll(e){e.target.checked?(columns.forEach(e=>this.state.push(e.title)),this.shadowRoot?.querySelectorAll("input").forEach(e=>e.checked=!0)):(this.shadowRoot?.querySelectorAll("input").forEach(e=>e.checked=!1),this.state=[])}addColumn(e){const t=e.target.value;if(this.state.includes(t)){const e=this.state.indexOf(t);this.state.splice(e,1)}else this.state=[...this.state,t]}adjustTable(){this.callback&&this.callback(this.state),localStorage.setItem("tableSettings",JSON.stringify(this.state)),this.closeDialog()}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Select Columns</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <input @change=${this.checkAll} type="checkbox" name="all" id="all" value="Select All">
            <label for="all" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #777777"> Select All</label>

            ${c(this.headerSelection,e=>e.name,e=>x`
              <input @change=${this.addColumn} type="checkbox" name=${e.name} id=${e.name} value=${e.title} .checked=${this.state.includes(`${e.title}`)}>
              <label for=${e.name}> ${e.title}</label><br>
            `)}

            <button @click=${this.adjustTable} class="submit">Change Table Settings</button>
          </div>
        </div>
      </div>
    `}};__decorate$2g([e$3({type:Array})],WcDialogTableSettings.prototype,"state",void 0),WcDialogTableSettings=__decorate$2g([e$4("wc-dialog-table-settings")],WcDialogTableSettings);const paginationStyles=i$4`
  wc-icon {
    width: 25px;
    height: 25px;
  }

  .pagination-container {
    font-size: 14px; 
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    align-items: center;
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .page-button {
    cursor: pointer;
    margin-left: 10px;
    background-color: transparent;
    border: none;
    outline: none;
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }

  .page-button:hover {
    background-color: #eee;
  }

  .page-button wc-icon {
    width: 20px;
    height: 20px;
  }

  .active-page {
    background-color: #d0049b;
    color: white;
  }

  .active-page:hover {
    background-color: #d0049b;
    cursor: default;
  }

  .disabled:hover, .disabled:focus {
    cursor: default;
    background-color: transparent;
  }

  .dropdown {
    position: relative;
    display: inline-block;
    width: 80px;
  }

  .current-take {
    background-color: rgba(208, 4, 155, 0.04);
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .entries-list {
    display: block;
    position: absolute;
    width: 80px;
    left: 0;
    z-index: 1;
    border: 1px solid lightgray;
    background-color: white;
    border-radius: 4px;
  }

  .top {
    top: 40px;
  }

  .bottom {
    bottom: 40px;
  }

  .entry {
    display: block;
    text-align: center;
    padding: 10px 20px;
    cursor: pointer;
  }

  .entry:hover {
    background-color: #eee;
  }

  .hidden {
    display: none;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .pagination-container {
      font-size: 12px;
      grid-template-columns: 2fr 1fr 3fr;
    }

    .current-take {
      font-size: 12px;
      height: 30px;
      width: 80px;
    }

    .top {
      top: 30px;
    }

    .bottom {
      bottom: 30px;
    }

    .page-button {
      margin-left: 0;
      width: 20px;
      height: 20px;
    }

    wc-icon {
      width: 15px;
      height: 15px;
    }

    .page-button wc-icon {
      width: 15px;
      height: 15px;
    }
  }
`;var __decorate$2f=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPagination=class extends s$1{static get styles(){return[paginationStyles]}constructor(e,t,o,r,i){super(),this.hideTopList=!0,this.hideBottomList=!0,this.page=1,this.take=100,this.skip=0,this.count=e,this.page=t,this.skip=o,this.take=r,this.position=i}getPageValues(e){this.callback=e}displayTopList(){this.hideTopList=!this.hideTopList}displayBottomList(){this.hideBottomList=!this.hideBottomList}changeEntries(e){const t=e.target.getAttribute("data-value");this.take=null!==t?parseInt(t):this.take,this.skip=0,this.page=1,"top"===this.position?this.hideTopList=!this.hideTopList:this.hideBottomList=!this.hideBottomList,this.callback&&this.callback(this.page,this.skip,this.take)}updateTable(){const e=this.count%this.take;this.skip=(this.page-1)*this.take,this.skip===this.count&&(this.take=e,this.skip=this.count-e),this.callback&&this.callback(this.page,this.skip,this.take)}nextPage(){this.page!==Math.ceil(this.count/this.take)&&(this.page++,this.updateTable())}prevPage(){1!==this.page&&(this.page--,this.updateTable())}firstPage(){1!==this.page&&(this.page=1,this.updateTable())}lastPage(){this.page!==Math.ceil(this.count/this.take)&&(this.page=Math.ceil(this.count/this.take),this.updateTable())}render(){return x`
    <div class="pagination-container">
      <div>
        ${config.isMobile?x`
          ${this.take*this.page-this.take+1} - ${this.page*this.take>this.count?this.count:this.page*this.take} / ${this.count}`:x`
        Showing ${this.take*this.page-this.take+1} to ${this.page*this.take>this.count?this.count:this.page*this.take} of ${this.count} entries`}
        
      </div>
      <div style="display: flex; justify-content: center; align-items: center;">
        ${config.isMobile?"":x`<span>Entries: &nbsp</span>`}
        <div class="dropdown">
          <div class="current-take" @click=${this.displayTopList}>${this.take}<wc-icon primaryColor="gray" icon="carret-down-solid" style="margin-left: 10px;"></wc-icon></div>
          <div class="entries-list ${this.position} ${this.hideTopList?"hidden":""}">
            <div @click=${this.changeEntries} class="entry" data-value="10">10</div>
            <div @click=${this.changeEntries} class="entry" data-value="20">20</div>
            <div @click=${this.changeEntries} class="entry" data-value="50">50</div>
            <div @click=${this.changeEntries} class="entry" data-value="100">100</div>
            <div @click=${this.changeEntries} class="entry" data-value="200">200</div>
            <div @click=${this.changeEntries} class="entry" data-value="500">500</div>
          </div>
        </div>
      </div>
      <div class="paging" style="display: flex; justify-content: flex-end; align-items: center;">
        <button @click=${this.firstPage} class="page-button ${1===this.page?"disabled":""}" style="margin: 0;">
          <wc-icon primaryColor=${1===this.page?"gray":"black"} icon="collapseLeft"></wc-icon>
        </button>
        <button @click=${this.prevPage} class="page-button ${1===this.page?"disabled":""}" style="margin: 0;">
          <wc-icon primaryColor=${1===this.page?"gray":"black"} icon="angle-left"></wc-icon>
        </button>
        <span style="margin: 0 10px;">${this.page} ${config.isMobile?"":x`of ${Math.ceil(this.count/this.take)}`}</span>
        <button @click=${this.nextPage} class="page-button ${this.page===Math.ceil(this.count/this.take)?"disabled":""}" style=" margin-left: 0;">
          <wc-icon primaryColor=${this.page===Math.ceil(this.count/this.take)?"gray":"black"} icon="angle-right"></wc-icon>
        </button>
        <button @click=${this.lastPage} class="page-button ${this.page===Math.ceil(this.count/this.take)?"disabled":""}" style="margin: 0 5px 0 0;">
          <wc-icon primaryColor=${this.page===Math.ceil(this.count/this.take)?"gray":"black"} icon="expandLeft"></wc-icon>
        </button>
      </div>
    </div>
  `}};__decorate$2f([e$3({attribute:!1,type:Boolean})],WcPagination.prototype,"hideTopList",void 0),__decorate$2f([e$3({attribute:!1,type:Boolean})],WcPagination.prototype,"hideBottomList",void 0),__decorate$2f([e$3({attribute:!1,type:Number})],WcPagination.prototype,"page",void 0),__decorate$2f([e$3({attribute:!1,type:Number})],WcPagination.prototype,"take",void 0),__decorate$2f([e$3({attribute:!1,type:Number})],WcPagination.prototype,"skip",void 0),__decorate$2f([e$3({attribute:!1,type:Number})],WcPagination.prototype,"count",void 0),__decorate$2f([e$3({attribute:!1,type:String})],WcPagination.prototype,"position",void 0),WcPagination=__decorate$2f([e$4("wc-pagination")],WcPagination);const tableStyles=i$4`
  .table-wrapper {
    margin-top: 15px;
    overflow: auto;
    border-bottom: 2px solid #d0049b;
    font-family: var(--printess-text-font);
  }

  a {
    text-decoration: none;
    color: white;
  }

  dl {
    display: grid;
    margin-top: 0;
    margin-bottom: 20px;
    grid-template-columns: 80px calc(100% - 80px);
  }

  .mobile-table-header {
    font-size: 14px;
    padding: 10px;
    grid-column: 1 / span 2;
    background-color: #D0049B;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
  }

  dt, dd {
    display: flex;
    line-height: 16px;
    margin-left: 0;
    text-align: left;
    padding: 10px;
    font-size: 12px;
  }

  dd {
    display: flex;
    justify-content: space-between;
  }

  dt:nth-of-type(even), dd:nth-of-type(even) {
    background-color: #D0049B19;
  }

  dd a {
    text-decoration: none;
    color: #d3277c;
  }

  dd.ellipsis {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(90%);
  }

  wc-icon {
    width: 15px;
    height: 15px;
  }

  .flex {
    display: flex;
  }

  .hide {
    display: none;
  }

  .loader {
    position: fixed;
    left: 50%;
    top: 50%;
    display: inline-block;
    width: 80px;
    height: 80px;
  }
  .loader:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid var(--printess-magenta);
    border-color: var(--printess-magenta) transparent var(--printess-magenta) transparent;
    animation: loader 1.2s linear infinite;
  }
  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .spinner,
  .spinner:after {
    border-radius: 50%;
    width: 2em;
    height: 2em;
  }
  .spinner {
    font-size: 8px;
    position: relative;
    border-top: 0.5em solid rgba(230,0,126, 0.2);
    border-right: 0.5em solid rgba(230,0,126, 0.2);
    border-bottom: 0.5em solid rgba(230,0,126, 0.2);
    border-left: 0.5em solid #e6007e;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
  }
  @-webkit-keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

`;var __decorate$2e=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPrintjobsTableMobile=class extends s$1{static get styles(){return[tableStyles]}constructor(e,t){super(),this.data=e,this.headers=t;const o=localStorage.getItem("tableSettings");o?this.headers=JSON.parse(o):this.headers}getSearchValue(e){this.callback=e}setSearchValue(e,t){this.callback&&this.callback(e,t)}getUserInfo(e){let t="";if(this.data.users){const o=this.data.users.filter(t=>t.id===e.userId)[0];if(o&&(t+=o.d+" ("+o.e+")"),e.sourceUserId){const o=this.data.users.filter(t=>t.id===e.sourceUserId)[0];o&&(t+=", issued by "+o.d+" ("+o.e+")")}}return t}getShortUserInfo(e){if(this.data.users){const t=this.data.users.filter(t=>t.id===e.userId)[0];if(e.sourceUserId){const t=this.data.users.filter(t=>t.id===e.sourceUserId)[0];if(t)return t.d}else if(t)return t.d}return""}showErrorMsg(e){new WcDialogErrorMessage(e).showDialog()}statusValue(e,t,o){return e&&!t?x`<wc-icon primaryColor="lightgreen" icon="check"></wc-icon>`:e?x`<wc-icon primaryColor="pink" icon="warning" @click=${()=>this.showErrorMsg(o)} style="cursor: pointer;"></wc-icon>`:x`<div class="spinner"></div>`}pdfValue(e,t,o){return e&&Object.keys(e).length>0?x`${Object.keys(e).map(t=>x`
        <a href=${e[t]} style="display: inline-block" target="_blank">
          <wc-icon primaryColor="pink" icon="page-inverse" style="margin-right: 10px;"></wc-icon>
        </a>`)}`:t?x`
        <a href="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Bt%7D" target="_blank">
          <wc-icon primaryColor="pink" icon="page-inverse"></wc-icon>
        </a>`:o&&o.length>0?x`${o.map(e=>x`
        <a href=${e.u} style="display: inline-block" target="_blank">
          <wc-icon primaryColor="pink" icon="image" style="margin-right: 10px; width: 20px; height: 20px;"></wc-icon>
        </a>
      `)}`:x`<wc-icon primaryColor="gray" icon="page-light"></wc-icon>`}render(){return x`
    ${this.data?x`
    <div class="table-wrapper">

        ${this.data&&c(this.data.orders,e=>e.id,e=>{const t=this.getUserInfo(e),o=this.getShortUserInfo(e);return x`
      <dl>
        ${this.headers.includes("Template Name")?x`
          <div class="mobile-table-header">
            <a href="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7BcreateEditorUrl%28e%29%7D" target="_blank" style="display:flex;flex-direction:row; align-items: center;" title=${t}>
              <wc-icon primaryColor="toolbar" icon="printess-wand"></wc-icon>
              &nbsp ${e.templateName.replace("~published","").replace("~merged","")}
            </a>
          </div>
        `:""}
        ${this.headers.includes("Id")?x`
          <dt>Id</dt>
          <dd>${e.id}</dd>
        `:""}
        ${this.headers.includes("Job Id")?x`
          <dt>Job Id</dt>
          <dd>${e.jobId}</dd>
        `:""}
        ${this.headers.includes("Short User Info")?x`
          <dt>Short User Info</dt>
          <dd @click=${()=>this.setSearchValue("userId",e.userId)}>${o}</dd>
        `:""}
        ${this.headers.includes("User Info")?x`
          <dt>User Info</dt>
          <dd>${t}</dd>
        `:""}
        ${this.headers.includes("User Id")?x`
          <dt>User Id</dt>
          <dd @click=${()=>this.setSearchValue("userId",e.userId)}>${e.userId}</dd>
        `:""}
        ${this.headers.includes("Source User Id")?x`
          <dt>Source User Id</dt>
          <dd>${e.sourceUserId}</dd>
        `:""}
        ${this.headers.includes("External Order Id")?x`
          <dt>External Order Id</dt>
          <dd>${e.externalOrderId}</dd>
        `:""}
        ${this.headers.includes("Origin")?x`
          <dt>Origin</dt>
          <dd class="ellipsis" @click=${()=>this.setSearchValue("origin",e.origin)}>${e.origin}</dd>
        `:""}
        ${this.headers.includes("Shop Save Id")?x`
          <dt>Shop Save Id</dt>
          <dd>${e.shopSaveId}</dd>
        `:""}
        ${this.headers.includes("Product Type")?x`
          <dt>Product Type</dt>
          <dd>${e.productType}</dd>
        `:""}
        ${this.headers.includes("Created")?x`
          <dt>Created</dt>
          <dd>
            ${formatDistance(new Date(e.createdOn),new Date,{addSuffix:!0})}
            ${this.statusValue(e.isFinished,e.isFailure,e.failureDetails)}
          </dd>
        `:""}
        ${this.headers.includes("File")?x`
          <dt>File</dt>
          <dd>
            <div style="display: flex; flex-direction: row; justify-content: center;">${this.pdfValue(e.result?.r,e.result?.zip,e.result?.p)}</div>
            (${e.size?x`${(e.size/1048576).toFixed(2).toLocaleString()} MB`:"0 MB"})
          </dd>
        `:""}
      </dl>
      `})}
    </div>
    `:x`<div class="loader"></div>`}`}};__decorate$2e([e$3({attribute:!1,type:Object})],WcPrintjobsTableMobile.prototype,"data",void 0),__decorate$2e([e$3({attribute:!1,type:Array})],WcPrintjobsTableMobile.prototype,"headers",void 0),__decorate$2e([e$3({attribute:!1,type:String})],WcPrintjobsTableMobile.prototype,"errorMsg",void 0),__decorate$2e([e$3({attribute:!1,type:Object})],WcPrintjobsTableMobile.prototype,"productionStatus",void 0),WcPrintjobsTableMobile=__decorate$2e([e$4("wc-printjobs-table-mobile")],WcPrintjobsTableMobile);class OrderStream extends ApiStream{constructor(e,t,o){super(e,"orders",t,e=>{if("order"==e.c){const t=JSON.parse(e.p);o(t)}})}}var __decorate$2d=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPrintjobsPage=class extends s$1{static get styles(){return[printjobsStyles]}setState(e){this.state=new SearchOrders(e,this.state)}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}constructor(){super(),this.headers=["ID","Template Name","Created","Status","File","Documents","Pages","Size"],this.hideFilter=!0,this.page=1,this.take=100,this.skip=0,this.isFilter=!1,this.showIsoDate=!1,this.action="proxy.php?url=https%3A%2F%2Faccount.printess.com%2Fpause",this.editorVersionPrefix="",this.loadOrdersDebounce=new ValueDebounce(async e=>{const t=await api.loadOrders(e);t instanceof ServerErrorResponse$2?this.showError(t):this.data=t}),this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()},this.date=new Date,this.date.setDate(this.date.getDate()-30),adm.canUseAdminMode&&(this.date=new Date,this.date.setDate(this.date.getDate()-1)),this.state=new SearchOrders({templateName:"",origin:"",productType:"",externalOrderId:"",take:this.take,startDate:this.date})}handleOrder(e){if(this.data&&this.data.users&&this.data.orders&&1===this.page&&!this.isFilter){const t=this.data.users;let o=this.data.count,r=[],i=!1;this.data.orders.forEach(t=>{t.id===e.id?(i=!0,e.isFinished?("isProcessing"!==this.status.value&&r.push(e),"isProcessing"===this.status.value&&o--):r.push(t)):r.push(t)}),i||("isProcessing"===this.status.value&&e.isFinished?(o--,r.length>this.take&&r.pop()):(o++,r=[e,...r],r.length>this.take&&r.pop())),this.data={orders:r,count:o,users:t}}}connectedCallback(){super.connectedCallback(),location.hash="#printjobs",window.addEventListener("resize",this._handleResize),this.loadEditorVersion()}async loadEditorVersion(){const e=await api.readUserSettings({keys:["version"]});if(e instanceof ServerErrorResponse$2)this.showError(e);else if(e.version)try{this.editorVersionPrefix="v/"+JSON.parse(e.version)+"/"}catch(t){this.editorVersionPrefix="v/"+e.version+"/"}this.initTable()}initTable(){const e=this.state.toDto("as admin");this.loadOrdersDebounce.immediate(e),this.connectOrderStream()}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),this.orderStream?.disconnect(),super.disconnectedCallback()}connectOrderStream(){this.orderStream&&this.orderStream.disconnect(),this.orderStream=new OrderStream(apiEndpoint,api.token??"",this.handleOrder.bind(this)),this.orderStream}loadTemplates(){const e=this.state.toDto("as admin");this.loadOrdersDebounce.change(e,500)}toggleDateDisplay(){this.showIsoDate=!this.showIsoDate}setSearchOrders(e,t){const o=new Nobs;this.page=1,o.setProperty(this.state,"skip",0),o.setProperty(this.state,"take",this.take),o.setProperty(this.state,e,t),this.setState(o),this.loadTemplates()}onSearchOrderChange(e){let t=e.target.name;const o="onlyMyOrders"===t?e.target.checked:e.target.value;this.isFilter=!0,"templateName"===t&&"string"==typeof o&&o.startsWith("st:")&&(t="shopSaveId"),"startDate"===t&&(this.startDate=new Date(e.target.value)),this.startDate||"startDate"===t||(this.startDate=new Date,adm.useAdminMode?this.startDate.setDate((new Date).getDate()-1):this.startDate.setDate((new Date).getDate()-30),this.setSearchOrders("startDate",this.startDate)),this.setSearchOrders(t,o)}onMyOrdersChange(e){const t=new Nobs;let o;switch(this.page=1,this.isFilter=!0,e.target.value){case"allOrders":o=!1;break;case"myOrders":o=!0}t.setProperty(this.state,"skip",0),t.setProperty(this.state,"take",this.take),t.setProperty(this.state,"onlyMyOrders",o),this.setState(t),this.loadTemplates()}onStatusChange(e){const t=new Nobs;let o,r;switch(this.page=1,this.isFilter=!0,e.target.value){case"all":o=void 0,r=void 0;break;case"isFinished":o=!0,r=!1;break;case"isProcessing":o=!1,r=!1,this.isFilter=!1;break;case"isFailed":o=!0,r=!0}t.setProperty(this.state,"skip",0),t.setProperty(this.state,"take",this.take),t.setProperty(this.state,"isFinished",o),t.setProperty(this.state,"isFailed",r),this.setState(t),this.loadTemplates()}expandFilter(){this.hideFilter=!this.hideFilter}resetFilter(){this.page=1,this.isFilter=!1,this.state=new SearchOrders({templateName:"",origin:"",productType:"",externalOrderId:"",take:this.take,startDate:this.date,onlyMyOrders:!1}),this.shadowRoot?.querySelectorAll("input").forEach(e=>e.value=""),this.status.value="all",this.onlyMyOrders.value="allOrders";const e=this.state.toDto("as admin");this.loadOrdersDebounce.immediate(e)}setTableSettings(){(new WcDialogTableSettings).showDialog(e=>{this.headers=e})}setPagination(e){if(this.data){const t=new WcPagination(this.data.count,this.page,this.skip,this.take,e);return t.getPageValues((e,t,o)=>{this.page=e,this.skip=t,this.take=o,this.applyPagination()}),t}}applyPagination(){const e=new Nobs;e.setProperty(this.state,"take",this.take),e.setProperty(this.state,"skip",this.skip),this.setState(e),this.loadTemplates()}renderTable(){const e=new WcPrintjobsTableMobile(this.data,this.headers),t=new WcPrintjobsTable(this.data,this.headers,this.editorVersionPrefix);return e.getSearchValue((e,t)=>{this.setSearchOrders(e,t),this.isFilter=!0}),t.getSearchValue((e,t)=>{this.setSearchOrders(e,t),this.isFilter=!0}),t.showIsoDate=this.showIsoDate,config.isMobile?e:t}toggleAdminMode(){adm.useAdminMode=!adm.useAdminMode,this.connectOrderStream(),this.loadTemplates(),this.requestUpdate()}setPrintjobsAction(){if(this.action="proxy.php?url=https%3A%2F%2Faccount.printess.com%2Fpause"===this.action?"continue":"pause","pause"===this.action){const e=this.state.toDto("as admin");this.loadOrdersDebounce.immediate(e),this.connectOrderStream()}else"continue"===this.action&&this.orderStream.disconnect()}render(){const e=(new Date).setDate((new Date).getDate()-30);return x`
      <div class="user-orders">
        <h3 class="topic">Print Jobs</h3>
        <p class="subtopic">Customer orders</p>

        <div class="buttons-wrapper">
          <div @click=${this.setTableSettings} class="option-button">select columns</div>
          <div @click=${this.loadTemplates} class="option-button">refresh printjobs</div>
          ${config.isMobile?x``:x`<div @click=${this.toggleDateDisplay} class="option-button">toggle date display</div>`}
          <div @click=${this.setPrintjobsAction} class="option-button">${config.isMobile?x`<wc-icon primaryColor="toolbar" icon=${"pause"===this.action?"pause-light":"carret-right-solid"} style="width: 12px; margin-right: 10px;"></wc-icon>`:this.action} ${config.isMobile?"":"live job"} streaming</div>
          ${adm.canUseAdminMode?x`<div class="option-button" @click=${this.toggleAdminMode}><wc-icon primaryColor="toolbar" icon=${adm.useAdminMode?"user-crown-solid":"user-solid"} style="width: 14px; margin-right: 10px;"></wc-icon>${adm.useAdminMode?"admin":"user"}</div>`:""}
        </div>

        <div class="inline" style="margin-top: 10px;">
          <wc-icon @click=${this.expandFilter} primaryColor="gray" icon=${this.hideFilter?"plus-square":"minus-square"} class="collapse-icon"></wc-icon>
          <label class="template-name-label" for="templateName">Search:</label>
          <input @keyup=${this.onSearchOrderChange} type="text" name="templateName" placeholder="template name or save token" class="template-name-input">
          <button class="filter-button"><wc-icon @click=${this.resetFilter} primaryColor="toolbar" icon="filter-reset" class="filter-icon"></wc-icon></button>
        </div>

        <div class="expanded-filter ${this.hideFilter?"hidden":""}">
          <!-- <div class="input-label">
            <label for="userId">User Id:</label>
            <input @keyup=${this.onSearchOrderChange} type="text" name="userId" placeholder="user id">
          </div> -->
          <div class="input-label">
            <label for="origin">Origin:</label>
            <input @keyup=${this.onSearchOrderChange} type="text" name="origin" placeholder="origin">
          </div>
          <div class="input-label">
            <label for="productType">Product Type:</label>
            <input @keyup=${this.onSearchOrderChange} type="text" name="productType" placeholder="product type">
          </div>
          <div class="input-label">
            <label for="externalOrderId">External Order Id:</label>
            <input @keyup=${this.onSearchOrderChange} type="text" name="externalOrderId" placeholder="external order id">
          </div>
          <div class="input-label">
            <label for="startDate">From:</label>
            <input @change=${this.onSearchOrderChange} type="date" name="startDate" placeholder="start date" value=${new Date(e).toISOString().split("T")[0]}>
          </div>
          <div class="input-label">
            <label for="endDate">To:</label>
            <input @change=${this.onSearchOrderChange} type="date" name="endDate" placeholder="end date" value=${(new Date).toISOString().split("T")[0]}>
          </div>
          <div class="input-label">
            <label for="status">Status:</label>
            <select @change=${this.onStatusChange} name="status" id="printStatus">
              <option value="all">All</option>
              <option value="isFinished">Finished</option>
              <option value="isProcessing">Unfinished</option>
              <option value="isFailed">Failed</option>
            </select>
          </div>
          <div class="input-label">
            <label for="onlyMyOrders">Orders:</label>
            <select @change=${this.onMyOrdersChange} name="onlyMyOrders" id="onlyMyOrders">
              <option value="allOrders">All Orders</option>
              <option value="myOrders">My Orders only</option>
            </select>
          </div>
          ${adm.canUseAdminMode?x`
            <div class="input-label">
              <label for="userId">User Id:</label>
              <input @keyup=${this.onSearchOrderChange} type="text" name="userId" placeholder="user id">
            </div>
          `:""}

        </div>

        ${this.data&&0===this.data.count?x`<div style="width: 100%; display: flex; justify-content: center;"><p>~ No Print Jobs available ~</p></div>`:x`
        <div class="pagination" style="margin-top: 30px;">
          ${this.setPagination("top")}
        </div>

        <div class="table-container">
          ${this.renderTable()}
        </div>

        <div class="pagination" style="margin-top: 10px;">
          ${this.setPagination("bottom")}
        </div>
        `}
      </div>
  `}};__decorate$2d([e$3({attribute:!1,type:Object})],WcPrintjobsPage.prototype,"state",void 0),__decorate$2d([e$3({attribute:!1,type:Object})],WcPrintjobsPage.prototype,"data",void 0),__decorate$2d([e$3({attribute:!1,type:Array})],WcPrintjobsPage.prototype,"headers",void 0),__decorate$2d([e$3({attribute:!1,type:Boolean})],WcPrintjobsPage.prototype,"hideFilter",void 0),__decorate$2d([e$3({attribute:!1,type:Number})],WcPrintjobsPage.prototype,"page",void 0),__decorate$2d([e$3({attribute:!1,type:Number})],WcPrintjobsPage.prototype,"take",void 0),__decorate$2d([e$3({attribute:!1,type:Number})],WcPrintjobsPage.prototype,"skip",void 0),__decorate$2d([e$3({attribute:!1,type:Object})],WcPrintjobsPage.prototype,"date",void 0),__decorate$2d([e$3({attribute:!1,type:Object})],WcPrintjobsPage.prototype,"startDate",void 0),__decorate$2d([e$3({attribute:!1,type:Boolean})],WcPrintjobsPage.prototype,"isFilter",void 0),__decorate$2d([e$3({attribute:!1,type:Boolean})],WcPrintjobsPage.prototype,"showIsoDate",void 0),__decorate$2d([e$3({attribute:!1,type:String})],WcPrintjobsPage.prototype,"action",void 0),__decorate$2d([e$3({attribute:!1,type:String})],WcPrintjobsPage.prototype,"editorVersionPrefix",void 0),__decorate$2d([i$1("#printStatus")],WcPrintjobsPage.prototype,"status",void 0),__decorate$2d([i$1("#onlyMyOrders")],WcPrintjobsPage.prototype,"onlyMyOrders",void 0),WcPrintjobsPage=__decorate$2d([e$4("wc-printjobs-page")],WcPrintjobsPage);var __decorate$2c=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcEditorPreview=class extends s$1{static get styles(){return[i$4`
      iframe {
      width: calc(100% - 2px);
      height: 100%;
      display: block;
      border: 1px solid var(--printess-blue);
      outline: none;
    }

    #message {
      position: fixed;
      top: 0;
      right: 0;
      display: none;
      justify-content: center;
      align-items: center;
      background-color: lightgoldenrodyellow;
      color: black;
      padding: 20px;
      font-family: sans-serif;
    }
  `]}constructor(e,t){super(),this.editorOptions={name:"",version:"draft",editor:"nightly",mode:"buyer"},this.url="",this.skipApiLoad=!1,this.editorOptions=e||this.editorOptions,this.skipApiLoad=t??!1}getCallbackValue(e){this.callback=e}closeEditor(e){this.callback&&this.callback(e)}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserSettings(e){if(this.skipApiLoad)return;const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):(t.editorOptions&&(this.editorOptions=Object.assign(this.editorOptions,JSON.parse(t.editorOptions))),t.imageUpload&&(this.url=encodeURIComponent(t.imageUpload)))}async connectedCallback(){super.connectedCallback(),await this.loadUserSettings({keys:["editorOptions","imageUpload"]});let e=!1;const t=getEditorUrl(),o=document.createElement("div");o.id="message";const r=document.createElement("iframe");r.id="printess",-1!==t.indexOf("editor.printess.com")?r.src=`https://editor.printess.com/${"current stable version"===this.editorOptions.editor?"":`v/${this.editorOptions.editor}/`}printess-editor/${"designer"===this.editorOptions.mode?"embed-designer.html":"embed.html"}#${this.url||""}`:-1!==t.indexOf("localhost")?r.src=`${t}${"designer"===this.editorOptions.mode?"embed-designer.html":"embed.html"}#${this.url||""}`:(r.src=`${t}printess-editor/${"designer"===this.editorOptions.mode?"embed-designer.html":"embed.html"}#${this.url||""}`,e=!0),r.onload=()=>{window.addEventListener("message",e=>{switch(e.data.cmd){case"back":this.closeEditor(!0);break;case"basket":prompt("Proceed to checkout.\n\nsave-token:\n"+e.data.token+"\n\nThumbnailUrl:",e.data.thumbnailUrl);break;case"formFieldChanged":o.style.display="flex",o.textContent="Form Field: ["+e.data.name+"] changed to '"+e.data.value+"'",setTimeout(()=>o.style.display="none",2e3)}}),r.contentWindow?.postMessage({cmd:"attach",properties:{token:api.token,domain:getDomain(),templateName:this.editorOptions.name,templateVersion:this.editorOptions.version,basketId:"Some-Unique-Basket-Or-Session-Id",shopUserId:"",mergeTemplates:this.editorOptions.mergeTemplates,theme:this.editorOptions.theme,siginingPublicKey:e?"xyHvq4MxAoZbov62ZnnvKQ4Zm23tzpaOYpy5G58i_6kHSbJPL1uNUJ1MLRIt_uLJRnqNmtH9QHte2v3jsaJR0VRxKDLFytkJ8RpYgHedMVmQoJf0q0BUXGU-diMvbKNdcjToUI914I508XITkPt0NhbSqZzldhcvloaJLk_jmK9WbcTQCfxYnItCJ-u_xqgP9uBQGtutpMwFDBOGtF4lzWw86mz6Ib8tQIRwC0UXF24PqlG3_0EHOJc5xtl0rKHuIybySiKhH0zddgVYIMZE0b2bKjutIluc5Xhnlagb4a8KuniNGPYlJUgWFexSyxx8JQemvPvzRbl74Zk5zNKgbHC5FwA-EYGMi7L2DAFZEfyiIFMeuPlZZ77ZH-IpCguuyCjoO70y9TDgW9Lu_QmNs7fUA_jqa05_896_l2o3S4lTw0HuMEmiN85RP3dSXeX2_XmgLyT33h6KE8OHvLgweoxhuxXfRablmvBqNcIHPjzZKtfoABQuGZR8Gq5KWMCvxk76DOBozKDQIFYIO2pk731QKY6SWBe79Kw8vQwSUgIAmpaADc66CoWpkEpYQv1H8dq36fcPAjVjqZc3aPGOI-16TyeSLf_MehDn9tTHPQs6-UD-HjknOscUrHQlLMNr2miSJhHlDIcfxdtfk9D5Gitzi6k7BgSO1_RVhsG9anE":""}},"*")},window.visualViewport&&window.visualViewport.addEventListener("scroll",()=>{r.contentWindow?.postMessage({cmd:"viewportScroll",height:window.visualViewport?.height,offsetTop:window.visualViewport?.offsetTop},"*")}),this.shadowRoot?.appendChild(r),this.shadowRoot?.appendChild(o)}};__decorate$2c([e$3({attribute:!0,type:Object})],WcEditorPreview.prototype,"editorOptions",void 0),WcEditorPreview=__decorate$2c([e$4("wc-editor-preview")],WcEditorPreview);const subscriptionStyles=i$4`
  .subscription-page {
    font-family: var(--printess-text-font);
    font-size: 14px;
    font-weight: 400;
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
    color: #555555;
  }

  .card {
    margin-top: 30px;
    margin-bottom: 70px;
  }

  wc-icon {
    padding: 5px 0 0 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .pink { border-bottom: 2px solid var(--printess-pink); }
  .green { border-bottom: 2px solid var(--printess-green); }
  .red { border-bottom: 2px solid var(--printess-red); }
  .blue { border-bottom: 2px solid var(--printess-blue); }

  .table-header {
    padding-left: 20px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 0;
    min-height: 50px;
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
  }

  .pink .table-header { background-color: var(--printess-pink); }
  .green .table-header { background-color: var(--printess-green); }
  .red .table-header { background-color: var(--printess-red); }
  .blue .table-header { background-color: var(--printess-blue); }

  dl {
    display: grid;
    margin-bottom: 0;
    grid-template-columns: 150px calc(100% - 150px);
  }

  dt, dd {
    display: flex;
    line-height: 25px;
    margin-left: 0;
    text-align: left;
    padding: 10px 20px;
    align-items: center;
  }

  dd {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
  }

  .overage {
    color: red;
  }

  .odd-row-pink {
    background-color: var(--printess-lightpink);
  }
  .odd-row-blue {
    background-color: var(--printess-lightblue);
  }
  .even-row-white {
    background-color: white!important;
  }

  .blue dt:nth-of-type(even), .blue dd:nth-of-type(even) {
    background-color: var(--printess-lightblue);
  }

  .green dt:nth-of-type(even), .green dd:nth-of-type(even) {
    background-color: var(--printess-lightgreen);
  }

  button {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
  }

  .button-wrapper {
    display: flex;
    gap: 10px;
    margin: 20px 15px;
  }

  .settings {
    padding: 7px 20px;
    margin: 20px 15px;
  }

  .pink button { background-color: var(--printess-pink); }
  .green button { background-color: var(--printess-green); }
  .red button { background-color: var(--printess-red); }
  .blue button { background-color: var(--printess-blue); }

  .pink button:hover { background-color: var(--printess-pinkHover); }
  .green button:hover { background-color: var(--printess-greenHover); }
  .red button:hover { background-color: var(--printess-redHover); }
  .blue button:hover { background-color: var(--printess-blueHover); }

  button.pink { background-color: var(--printess-pink); }
  button.green { background-color: var(--printess-green); }
  button.red { background-color: var(--printess-red); }
  button.blue { background-color: var(--printess-blue); }

  button:hover.pink { background-color: var(--printess-pinkHover); }
  button:hover.green { background-color: var(--printess-greenHover); }
  button:hover.red { background-color: var(--printess-redHover); }
  button:hover.blue { background-color: var(--printess-blueHover); }

  .order-package-table {
    display: grid;
    grid-template-columns: repeat(2, 150px 1fr);
  }

  .accept-billing {
    grid-column: 1 / span 2;
    padding: 10px 20px;
  }

  .card-input {
    color: #555;
    font-family: var(--printess-text-font);
    font-size: 14px;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    background-color: rgba(242,246,219,0.5);
    padding: 7px 10px;
    border-radius: 4px;
  }

  .card-number {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
  }

  .card-icon-input {
    position: relative;
  }

  .card-icon-input wc-icon {
    position: absolute;
    top: 9px;
    left: 10px;
    padding: 0px;
    width: 15px;
    height: 15px;
    cursor: default;
  }

  .card-date {
    display: flex;
    flex-direction: row;
  }

  .left {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: none;
    padding-left: 30px;
  }

  .middle {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  .right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    .card {
      width: 100%;
      margin-bottom: 50px;
    }

    .table-header {
      padding-left: 10px;
      min-height: 36px;
    }

    .title {
      font-size: 14px;
      line-height: 36px;
      margin: 0;
    }

    dl {
      grid-template-columns: 80px calc(50% - 80px) 80px calc(50% - 80px);
    }

    dd, dt {
      font-size: 12px;
      word-break: break-word;
      line-height: 16px;
      padding: 5px;
      align-items: center;
    }

    dd {
      grid-column: 2 / span 3;
    }

    .table-body p {
      font-size: 12px;
      padding: 0 10px;
    }

    .settings {
      font-size: 12px;
    }
  }
`,bootstrapStyles=i$4`
  button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: button;
    font-family: inherit;
    text-transform: none;
  }

  .default {
    --default-blue: #007bff;
    --default-indigo: #6610f2;
    --default-purple: #6f42c1;
    --default-pink: #e83e8c;
    --default-red: #dc3545;
    --default-orange: #fd7e14;
    --default-yellow: #ffc107;
    --default-green: #28a745;
    --default-teal: #20c997;
    --default-cyan: #17a2b8;
    --default-white: #fff;
    --default-gray: #6c757d;
    --default-gray-dark: #343a40;
    --default-primary: #007bff;
    --default-secondary: #6c757d;
    --default-success: #28a745;
    --default-info: #17a2b8;
    --default-warning: #ffc107;
    --default-danger: #dc3545;
    --default-light: #f8f9fa;
    --default-dark: #343a40;
    --default-breakpoint-xs: 0;
    --default-breakpoint-sm: 576px;
    --default-breakpoint-md: 768px;
    --default-breakpoint-lg: 992px;
    --default-breakpoint-xl: 1200px;
    --default-font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --default-font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
  }
  .default-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
  .default .btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }
  .default .btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
  }
  .default .btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
  }
  .default .btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  .default .btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  .default .btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }
  .default .btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  .default .btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
  }

  .cerulean {
    --cerulean-blue: #033c73;
    --cerulean-indigo: #6610f2;
    --cerulean-purple: #6f42c1;
    --cerulean-pink: #e83e8c;
    --cerulean-red: #c71c22;
    --cerulean-orange: #fd7e14;
    --cerulean-yellow: #dd5600;
    --cerulean-green: #73a839;
    --cerulean-teal: #20c997;
    --cerulean-cyan: #2fa4e7;
    --cerulean-white: #fff;
    --cerulean-gray: #868e96;
    --cerulean-gray-dark: #343a40;
    --cerulean-gray-100: #f8f9fa;
    --cerulean-gray-200: #e9ecef;
    --cerulean-gray-300: #dee2e6;
    --cerulean-gray-400: #ced4da;
    --cerulean-gray-500: #adb5bd;
    --cerulean-gray-600: #868e96;
    --cerulean-gray-700: #495057;
    --cerulean-gray-800: #343a40;
    --cerulean-gray-900: #212529;
    --cerulean-primary: #2fa4e7;
    --cerulean-secondary: #e9ecef;
    --cerulean-success: #73a839;
    --cerulean-info: #033c73;
    --cerulean-warning: #dd5600;
    --cerulean-danger: #c71c22;
    --cerulean-light: #f8f9fa;
    --cerulean-dark: #343a40;
    --cerulean-primary-rgb: 47, 164, 231;
    --cerulean-secondary-rgb: 233, 236, 239;
    --cerulean-success-rgb: 115, 168, 57;
    --cerulean-info-rgb: 3, 60, 115;
    --cerulean-warning-rgb: 221, 86, 0;
    --cerulean-danger-rgb: 199, 28, 34;
    --cerulean-light-rgb: 248, 249, 250;
    --cerulean-dark-rgb: 52, 58, 64;
    --cerulean-white-rgb: 255, 255, 255;
    --cerulean-black-rgb: 0, 0, 0;
    --cerulean-body-color-rgb: 73, 80, 87;
    --cerulean-body-bg-rgb: 255, 255, 255;
    --cerulean-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --cerulean-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --cerulean-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --cerulean-body-font-family: var(--cerulean-font-sans-serif);
    --cerulean-body-font-size: 1rem;
    --cerulean-body-font-weight: 400;
    --cerulean-body-line-height: 1.5;
    --cerulean-body-color: #495057;
    --cerulean-body-bg: #fff;

    margin: 0;
    font-family: var(--cerulean-body-font-family);
    font-size: var(--cerulean-body-font-size);
    font-weight: var(--cerulean-body-font-weight);
    line-height: var(--cerulean-body-line-height);
    color: var(--cerulean-body-color);
    text-align: var(--cerulean-body-text-align);
    background-color: var(--cerulean-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .cerulean-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transition: color 0.15s ease-in-out, 
    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .cerulean .btn-primary {
    color: #fff;
    background-color: #2fa4e7;
    border-color: #2fa4e7;
    background-image: linear-gradient(#50b3eb, #2fa4e7 60%, #2c9ad9);
  }
  .cerulean .btn-secondary {
    color: #495057;
    background-color: #e9ecef;
    border-color: #e9ecef;
    background-image: linear-gradient(#edeff2, #e9ecef 60%, #dbdee1);
  }
  .cerulean .btn-success {
    color: #fff;
    background-color: #73a839;
    border-color: #73a839;
    background-image: linear-gradient(#89b659, #73a839 60%, #6c9e36);
  }
  .cerulean .btn-info {
    color: #fff;
    background-color: #033c73;
    border-color: #033c73;
    background-image: linear-gradient(#2b5b89, #033c73 60%, #03386c);
  }
  .cerulean .btn-warning {
    color: #fff;
    background-color: #dd5600;
    border-color: #dd5600;
    background-image: linear-gradient(#e27129, #dd5600 60%, #d05100);
  }
  .cerulean .btn-danger {
    color: #fff;
    background-color: #c71c22;
    border-color: #c71c22;
    background-image: linear-gradient(#d04045, #c71c22 60%, #bb1a20);
  }
  .cerulean .btn-light {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    background-image: linear-gradient(#f9fafb, #f8f9fa 60%, #e9eaeb);
  }
  .cerulean .btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
    background-image: linear-gradient(#545a5f, #343a40 60%, #31373c);
  }

  .cosmo {
    --cosmo-blue: #2780e3;
    --cosmo-indigo: #6610f2;
    --cosmo-purple: #613d7c;
    --cosmo-pink: #e83e8c;
    --cosmo-red: #ff0039;
    --cosmo-orange: #f0ad4e;
    --cosmo-yellow: #ff7518;
    --cosmo-green: #3fb618;
    --cosmo-teal: #20c997;
    --cosmo-cyan: #9954bb;
    --cosmo-white: #fff;
    --cosmo-gray: #868e96;
    --cosmo-gray-dark: #373a3c;
    --cosmo-gray-100: #f8f9fa;
    --cosmo-gray-200: #e9ecef;
    --cosmo-gray-300: #dee2e6;
    --cosmo-gray-400: #ced4da;
    --cosmo-gray-500: #adb5bd;
    --cosmo-gray-600: #868e96;
    --cosmo-gray-700: #495057;
    --cosmo-gray-800: #373a3c;
    --cosmo-gray-900: #212529;
    --cosmo-primary: #2780e3;
    --cosmo-secondary: #373a3c;
    --cosmo-success: #3fb618;
    --cosmo-info: #9954bb;
    --cosmo-warning: #ff7518;
    --cosmo-danger: #ff0039;
    --cosmo-light: #f8f9fa;
    --cosmo-dark: #373a3c;
    --cosmo-primary-rgb: 39, 128, 227;
    --cosmo-secondary-rgb: 55, 58, 60;
    --cosmo-success-rgb: 63, 182, 24;
    --cosmo-info-rgb: 153, 84, 187;
    --cosmo-warning-rgb: 255, 117, 24;
    --cosmo-danger-rgb: 255, 0, 57;
    --cosmo-light-rgb: 248, 249, 250;
    --cosmo-dark-rgb: 55, 58, 60;
    --cosmo-white-rgb: 255, 255, 255;
    --cosmo-black-rgb: 0, 0, 0;
    --cosmo-body-color-rgb: 55, 58, 60;
    --cosmo-body-bg-rgb: 255, 255, 255;
    --cosmo-font-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --cosmo-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --cosmo-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --cosmo-body-font-family: var(--cosmo-font-sans-serif);
    --cosmo-body-font-size: 1rem;
    --cosmo-body-font-weight: 400;
    --cosmo-body-line-height: 1.5;
    --cosmo-body-color: #373a3c;
    --cosmo-body-bg: #fff;

    margin: 0;
    font-family: var(--cosmo-body-font-family);
    font-size: var(--cosmo-body-font-size);
    font-weight: var(--cosmo-body-font-weight);
    line-height: var(--cosmo-body-line-height);
    color: var(--cosmo-body-color);
    text-align: var(--cosmo-body-text-align);
    background-color: var(--cosmo-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .cosmo-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #373a3c;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .cosmo .btn-primary {
    color: #fff;
    background-color: #2780e3;
    border-color: #2780e3;
  }
  .cosmo .btn-secondary {
    color: #fff;
    background-color: #373a3c;
    border-color: #373a3c;
  }
  .cosmo .btn-success {
    color: #fff;
    background-color: #3fb618;
    border-color: #3fb618;
  }
  .cosmo .btn-info {
    color: #fff;
    background-color: #9954bb;
    border-color: #9954bb;
  }
  .cosmo .btn-warning {
    color: #fff;
    background-color: #ff7518;
    border-color: #ff7518;
  }
  .cosmo .btn-danger {
    color: #fff;
    background-color: #ff0039;
    border-color: #ff0039;
  }
  .cosmo .btn-light {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  .cosmo .btn-dark {
    color: #fff;
    background-color: #373a3c;
    border-color: #373a3c;
  }

  .cyborg {
    --cyborg-blue: #2a9fd6;
    --cyborg-indigo: #6610f2;
    --cyborg-purple: #6f42c1;
    --cyborg-pink: #e83e8c;
    --cyborg-red: #c00;
    --cyborg-orange: #fd7e14;
    --cyborg-yellow: #f80;
    --cyborg-green: #77b300;
    --cyborg-teal: #20c997;
    --cyborg-cyan: #93c;
    --cyborg-white: #fff;
    --cyborg-gray: #555;
    --cyborg-gray-dark: #222;
    --cyborg-gray-100: #f8f9fa;
    --cyborg-gray-200: #e9ecef;
    --cyborg-gray-300: #dee2e6;
    --cyborg-gray-400: #adafae;
    --cyborg-gray-500: #888;
    --cyborg-gray-600: #555;
    --cyborg-gray-700: #282828;
    --cyborg-gray-800: #222;
    --cyborg-gray-900: #212529;
    --cyborg-primary: #2a9fd6;
    --cyborg-secondary: #555;
    --cyborg-success: #77b300;
    --cyborg-info: #93c;
    --cyborg-warning: #f80;
    --cyborg-danger: #c00;
    --cyborg-light: #222;
    --cyborg-dark: #adafae;
    --cyborg-primary-rgb: 42, 159, 214;
    --cyborg-secondary-rgb: 85, 85, 85;
    --cyborg-success-rgb: 119, 179, 0;
    --cyborg-info-rgb: 153, 51, 204;
    --cyborg-warning-rgb: 255, 136, 0;
    --cyborg-danger-rgb: 204, 0, 0;
    --cyborg-light-rgb: 34, 34, 34;
    --cyborg-dark-rgb: 173, 175, 174;
    --cyborg-white-rgb: 255, 255, 255;
    --cyborg-black-rgb: 0, 0, 0;
    --cyborg-body-color-rgb: 173, 175, 174;
    --cyborg-body-bg-rgb: 6, 6, 6;
    --cyborg-font-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --cyborg-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --cyborg-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --cyborg-body-font-family: var(--cyborg-font-sans-serif);
    --cyborg-body-font-size: 1rem;
    --cyborg-body-font-weight: 400;
    --cyborg-body-line-height: 1.5;
    --cyborg-body-color: #adafae;
    --cyborg-body-bg: #060606;

    margin: 0;
    font-family: var(--cyborg-body-font-family);
    font-size: var(--cyborg-body-font-size);
    font-weight: var(--cyborg-body-font-weight);
    line-height: var(--cyborg-body-line-height);
    color: var(--cyborg-body-color);
    text-align: var(--cyborg-body-text-align);
    background-color: var(--cyborg-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .cyborg-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #adafae;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .cyborg .btn-primary {
    color: #fff;
    background-color: #2a9fd6;
    border-color: #2a9fd6;
  }
  .cyborg .btn-secondary {
    color: #fff;
    background-color: #555;
    border-color: #555;
  }
  .cyborg .btn-success {
    color: #fff;
    background-color: #77b300;
    border-color: #77b300;
  }
  .cyborg .btn-info {
    color: #fff;
    background-color: #93c;
    border-color: #93c;
  }
  .cyborg .btn-warning {
    color: #fff;
    background-color: #f80;
    border-color: #f80;
  }
  .cyborg .btn-danger {
    color: #fff;
    background-color: #c00;
    border-color: #c00;
  }
  .cyborg .btn-light {
    color: #fff;
    background-color: #222;
    border-color: #222;
  }
  .cyborg .btn-dark {
    color: #000;
    background-color: #adafae;
    border-color: #adafae;
  }

  .darkly {
    --darkly-blue: #375a7f;
    --darkly-indigo: #6610f2;
    --darkly-purple: #6f42c1;
    --darkly-pink: #e83e8c;
    --darkly-red: #e74c3c;
    --darkly-orange: #fd7e14;
    --darkly-yellow: #f39c12;
    --darkly-green: #00bc8c;
    --darkly-teal: #20c997;
    --darkly-cyan: #3498db;
    --darkly-white: #fff;
    --darkly-gray: #888;
    --darkly-gray-dark: #303030;
    --darkly-gray-100: #f8f9fa;
    --darkly-gray-200: #ebebeb;
    --darkly-gray-300: #dee2e6;
    --darkly-gray-400: #ced4da;
    --darkly-gray-500: #adb5bd;
    --darkly-gray-600: #888;
    --darkly-gray-700: #444;
    --darkly-gray-800: #303030;
    --darkly-gray-900: #222;
    --darkly-primary: #375a7f;
    --darkly-secondary: #444;
    --darkly-success: #00bc8c;
    --darkly-info: #3498db;
    --darkly-warning: #f39c12;
    --darkly-danger: #e74c3c;
    --darkly-light: #adb5bd;
    --darkly-dark: #303030;
    --darkly-primary-rgb: 55, 90, 127;
    --darkly-secondary-rgb: 68, 68, 68;
    --darkly-success-rgb: 0, 188, 140;
    --darkly-info-rgb: 52, 152, 219;
    --darkly-warning-rgb: 243, 156, 18;
    --darkly-danger-rgb: 231, 76, 60;
    --darkly-light-rgb: 173, 181, 189;
    --darkly-dark-rgb: 48, 48, 48;
    --darkly-white-rgb: 255, 255, 255;
    --darkly-black-rgb: 0, 0, 0;
    --darkly-body-color-rgb: 255, 255, 255;
    --darkly-body-bg-rgb: 34, 34, 34;
    --darkly-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --darkly-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --darkly-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --darkly-body-font-family: var(--darkly-font-sans-serif);
    --darkly-body-font-size: 1rem;
    --darkly-body-font-weight: 400;
    --darkly-body-line-height: 1.5;
    --darkly-body-color: #fff;
    --darkly-body-bg: #222;

    margin: 0;
    font-family: var(--darkly-body-font-family);
    font-size: var(--darkly-body-font-size);
    font-weight: var(--darkly-body-font-weight);
    line-height: var(--darkly-body-line-height);
    color: var(--darkly-body-color);
    text-align: var(--darkly-body-text-align);
    background-color: var(--darkly-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .darkly-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .darkly .btn-primary {
    color: #fff;
    background-color: #375a7f;
    border-color: #375a7f;
  }
  .darkly .btn-secondary {
    color: #fff;
    background-color: #444;
    border-color: #444;
  }
  .darkly .btn-success {
    color: #fff;
    background-color: #00bc8c;
    border-color: #00bc8c;
  }
  .darkly .btn-info {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
  }
  .darkly .btn-warning {
    color: #fff;
    background-color: #f39c12;
    border-color: #f39c12;
  }
  .darkly .btn-danger {
    color: #fff;
    background-color: #e74c3c;
    border-color: #e74c3c;
  }
  .darkly .btn-light {
    color: #fff;
    background-color: #adb5bd;
    border-color: #adb5bd;
  }
  .darkly .btn-dark {
    color: #fff;
    background-color: #303030;
    border-color: #303030;
  }

  .flatly {
    --flatly-blue: #2c3e50;
    --flatly-indigo: #6610f2;
    --flatly-purple: #6f42c1;
    --flatly-pink: #e83e8c;
    --flatly-red: #e74c3c;
    --flatly-orange: #fd7e14;
    --flatly-yellow: #f39c12;
    --flatly-green: #18bc9c;
    --flatly-teal: #20c997;
    --flatly-cyan: #3498db;
    --flatly-white: #fff;
    --flatly-gray: #95a5a6;
    --flatly-gray-dark: #343a40;
    --flatly-gray-100: #f8f9fa;
    --flatly-gray-200: #ecf0f1;
    --flatly-gray-300: #dee2e6;
    --flatly-gray-400: #ced4da;
    --flatly-gray-500: #b4bcc2;
    --flatly-gray-600: #95a5a6;
    --flatly-gray-700: #7b8a8b;
    --flatly-gray-800: #343a40;
    --flatly-gray-900: #212529;
    --flatly-primary: #2c3e50;
    --flatly-secondary: #95a5a6;
    --flatly-success: #18bc9c;
    --flatly-info: #3498db;
    --flatly-warning: #f39c12;
    --flatly-danger: #e74c3c;
    --flatly-light: #ecf0f1;
    --flatly-dark: #7b8a8b;
    --flatly-primary-rgb: 44, 62, 80;
    --flatly-secondary-rgb: 149, 165, 166;
    --flatly-success-rgb: 24, 188, 156;
    --flatly-info-rgb: 52, 152, 219;
    --flatly-warning-rgb: 243, 156, 18;
    --flatly-danger-rgb: 231, 76, 60;
    --flatly-light-rgb: 236, 240, 241;
    --flatly-dark-rgb: 123, 138, 139;
    --flatly-white-rgb: 255, 255, 255;
    --flatly-black-rgb: 0, 0, 0;
    --flatly-body-color-rgb: 33, 37, 41;
    --flatly-body-bg-rgb: 255, 255, 255;
    --flatly-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --flatly-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --flatly-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --flatly-body-font-family: var(--flatly-font-sans-serif);
    --flatly-body-font-size: 1rem;
    --flatly-body-font-weight: 400;
    --flatly-body-line-height: 1.5;
    --flatly-body-color: #212529;
    --flatly-body-bg: #fff;

    margin: 0;
    font-family: var(--flatly-body-font-family);
    font-size: var(--flatly-body-font-size);
    font-weight: var(--flatly-body-font-weight);
    line-height: var(--flatly-body-line-height);
    color: var(--flatly-body-color);
    text-align: var(--flatly-body-text-align);
    background-color: var(--flatly-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .flatly-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .flatly .btn-primary {
    color: #fff;
    background-color: #2c3e50;
    border-color: #2c3e50;
  }
  .flatly .btn-secondary {
    color: #fff;
    background-color: #95a5a6;
    border-color: #95a5a6;
  }
  .flatly .btn-success {
    color: #fff;
    background-color: #18bc9c;
    border-color: #18bc9c;
  }
  .flatly .btn-info {
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
  }
  .flatly .btn-warning {
    color: #fff;
    background-color: #f39c12;
    border-color: #f39c12;
  }
  .flatly .btn-danger {
    color: #fff;
    background-color: #e74c3c;
    border-color: #e74c3c;
  }
  .flatly .btn-light {
    color: #000;
    background-color: #ecf0f1;
    border-color: #ecf0f1;
  }
  .flatly .btn-dark {
    color: #fff;
    background-color: #7b8a8b;
    border-color: #7b8a8b;
  }

  .journal {
    --journal-blue: #eb6864;
    --journal-indigo: #6610f2;
    --journal-purple: #6f42c1;
    --journal-pink: #e83e8c;
    --journal-red: #f57a00;
    --journal-orange: #fd7e14;
    --journal-yellow: #f5e625;
    --journal-green: #22b24c;
    --journal-teal: #20c997;
    --journal-cyan: #369;
    --journal-white: #fff;
    --journal-gray: #777;
    --journal-gray-dark: #333;
    --journal-gray-100: #f8f9fa;
    --journal-gray-200: #eee;
    --journal-gray-300: #dee2e6;
    --journal-gray-400: #ced4da;
    --journal-gray-500: #aaa;
    --journal-gray-600: #777;
    --journal-gray-700: #495057;
    --journal-gray-800: #333;
    --journal-gray-900: #222;
    --journal-primary: #eb6864;
    --journal-secondary: #aaa;
    --journal-success: #22b24c;
    --journal-info: #369;
    --journal-warning: #f5e625;
    --journal-danger: #f57a00;
    --journal-light: #f8f9fa;
    --journal-dark: #222;
    --journal-primary-rgb: 235, 104, 100;
    --journal-secondary-rgb: 170, 170, 170;
    --journal-success-rgb: 34, 178, 76;
    --journal-info-rgb: 51, 102, 153;
    --journal-warning-rgb: 245, 230, 37;
    --journal-danger-rgb: 245, 122, 0;
    --journal-light-rgb: 248, 249, 250;
    --journal-dark-rgb: 34, 34, 34;
    --journal-white-rgb: 255, 255, 255;
    --journal-black-rgb: 0, 0, 0;
    --journal-body-color-rgb: 34, 34, 34;
    --journal-body-bg-rgb: 255, 255, 255;
    --journal-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --journal-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --journal-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --journal-body-font-family: var(--journal-font-sans-serif);
    --journal-body-font-size: 1rem;
    --journal-body-font-weight: 400;
    --journal-body-line-height: 1.5;
    --journal-body-color: #222;
    --journal-body-bg: #fff;

    margin: 0;
    font-family: var(--journal-body-font-family);
    font-size: var(--journal-body-font-size);
    font-weight: var(--journal-body-font-weight);
    line-height: var(--journal-body-line-height);
    color: var(--journal-body-color);
    text-align: var(--journal-body-text-align);
    background-color: var(--journal-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .journal-btn {
    display: inline-block;
    font-family: "News Cycle", "Arial Narrow Bold", sans-serif;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .journal .btn-primary {
    color: #fff;
    background-color: #eb6864;
    border-color: #eb6864;
  }
  .journal .btn-secondary {
    color: #fff;
    background-color: #aaa;
    border-color: #aaa;
  }
  .journal .btn-success {
    color: #fff;
    background-color: #22b24c;
    border-color: #22b24c;
  }
  .journal .btn-info {
    color: #fff;
    background-color: #369;
    border-color: #369;
  }
  .journal .btn-warning {
    color: #fff;
    background-color: #f5e625;
    border-color: #f5e625;
  }
  .journal .btn-danger {
    color: #fff;
    background-color: #f57a00;
    border-color: #f57a00;
  }
  .journal .btn-light {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  .journal .btn-dark {
    color: #fff;
    background-color: #222;
    border-color: #222;
  }

  .litera {
    --litera-blue: #4582ec;
    --litera-indigo: #6610f2;
    --litera-purple: #6f42c1;
    --litera-pink: #e83e8c;
    --litera-red: #d9534f;
    --litera-orange: #fd7e14;
    --litera-yellow: #f0ad4e;
    --litera-green: #02b875;
    --litera-teal: #20c997;
    --litera-cyan: #17a2b8;
    --litera-white: #fff;
    --litera-gray: #868e96;
    --litera-gray-dark: #343a40;
    --litera-gray-100: #f8f9fa;
    --litera-gray-200: #e9ecef;
    --litera-gray-300: #ddd;
    --litera-gray-400: #ced4da;
    --litera-gray-500: #adb5bd;
    --litera-gray-600: #868e96;
    --litera-gray-700: #495057;
    --litera-gray-800: #343a40;
    --litera-gray-900: #212529;
    --litera-primary: #4582ec;
    --litera-secondary: #adb5bd;
    --litera-success: #02b875;
    --litera-info: #17a2b8;
    --litera-warning: #f0ad4e;
    --litera-danger: #d9534f;
    --litera-light: #f8f9fa;
    --litera-dark: #343a40;
    --litera-primary-rgb: 69, 130, 236;
    --litera-secondary-rgb: 173, 181, 189;
    --litera-success-rgb: 2, 184, 117;
    --litera-info-rgb: 23, 162, 184;
    --litera-warning-rgb: 240, 173, 78;
    --litera-danger-rgb: 217, 83, 79;
    --litera-light-rgb: 248, 249, 250;
    --litera-dark-rgb: 52, 58, 64;
    --litera-white-rgb: 255, 255, 255;
    --litera-black-rgb: 0, 0, 0;
    --litera-body-color-rgb: 52, 58, 64;
    --litera-body-bg-rgb: 255, 255, 255;
    --litera-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --litera-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --litera-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --litera-body-font-family: var(--litera-font-sans-serif);
    --litera-body-font-size: 1.1rem;
    --litera-body-font-weight: 400;
    --litera-body-line-height: 1.5;
    --litera-body-color: #343a40;
    --litera-body-bg: #fff;

    margin: 0;
    font-family: var(--litera-body-font-family);
    font-size: var(--litera-body-font-size);
    font-weight: var(--litera-body-font-weight);
    line-height: var(--litera-body-line-height);
    color: var(--litera-body-color);
    text-align: var(--litera-body-text-align);
    background-color: var(--litera-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .litera-btn {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 400;
    line-height: 1.5;
    color: #343a40;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.5rem 1.1rem;
    font-size: 0.875rem;
    border-radius: 1.078em;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .litera .btn-primary {
    color: #fff;
    background-color: #4582ec;
    border-color: #4582ec;
  }
  .litera .btn-secondary {
    color: #fff;
    background-color: #adb5bd;
    border-color: #adb5bd;
  }
  .litera .btn-success {
    color: #fff;
    background-color: #02b875;
    border-color: #02b875;
  }
  .litera .btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  .litera .btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #f0ad4e;
  }
  .litera .btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
  }
  .litera .btn-light {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  .litera .btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
  }

  .lumen {
    --lumen-blue: #158cba;
    --lumen-indigo: #6610f2;
    --lumen-purple: #6f42c1;
    --lumen-pink: #e83e8c;
    --lumen-red: #ff4136;
    --lumen-orange: #fd7e14;
    --lumen-yellow: #ff851b;
    --lumen-green: #28b62c;
    --lumen-teal: #20c997;
    --lumen-cyan: #75caeb;
    --lumen-white: #fff;
    --lumen-gray: #999;
    --lumen-gray-dark: #333;
    --lumen-gray-100: #f6f6f6;
    --lumen-gray-200: #f0f0f0;
    --lumen-gray-300: #dee2e6;
    --lumen-gray-400: #ced4da;
    --lumen-gray-500: #adb5bd;
    --lumen-gray-600: #999;
    --lumen-gray-700: #555;
    --lumen-gray-800: #333;
    --lumen-gray-900: #222;
    --lumen-primary: #158cba;
    --lumen-secondary: #f0f0f0;
    --lumen-success: #28b62c;
    --lumen-info: #75caeb;
    --lumen-warning: #ff851b;
    --lumen-danger: #ff4136;
    --lumen-light: #f6f6f6;
    --lumen-dark: #555;
    --lumen-primary-rgb: 21, 140, 186;
    --lumen-secondary-rgb: 240, 240, 240;
    --lumen-success-rgb: 40, 182, 44;
    --lumen-info-rgb: 117, 202, 235;
    --lumen-warning-rgb: 255, 133, 27;
    --lumen-danger-rgb: 255, 65, 54;
    --lumen-light-rgb: 246, 246, 246;
    --lumen-dark-rgb: 85, 85, 85;
    --lumen-white-rgb: 255, 255, 255;
    --lumen-black-rgb: 0, 0, 0;
    --lumen-body-color-rgb: 34, 34, 34;
    --lumen-body-bg-rgb: 255, 255, 255;
    --lumen-font-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --lumen-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --lumen-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --lumen-body-font-family: var(--lumen-font-sans-serif);
    --lumen-body-font-size: 1rem;
    --lumen-body-font-weight: 400;
    --lumen-body-line-height: 1.5;
    --lumen-body-color: #222;
    --lumen-body-bg: #fff;

    margin: 0;
    font-family: var(--lumen-body-font-family);
    font-size: var(--lumen-body-font-size);
    font-weight: var(--lumen-body-font-weight);
    line-height: var(--lumen-body-line-height);
    color: var(--lumen-body-color);
    text-align: var(--lumen-body-text-align);
    background-color: var(--lumen-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .lumen-btn {
    display: inline-block;
    font-weight: 700;
    line-height: 1.5;
    color: #222;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-style: solid;
    border-width: 0 1px 4px 1px;
    text-transform: uppercase;
  }
  .lumen .btn-primary {
    color: #fff;
    background-color: #158cba;
    border-color: #137ea7;
  }
  .lumen .btn-secondary {
    color: #000;
    background-color: #f0f0f0;
    border-color: #d8d8d8;
  }
  .lumen .btn-success {
    color: #fff;
    background-color: #28b62c;
    border-color: #24a428;
  }
  .lumen .btn-success {
    color: #fff;
    background-color: #28b62c;
    border-color: #24a428;
  }
  .lumen .btn-info {
    color: #fff;
    background-color: #75caeb;
    border-color: #69b6d4;
  }
  .lumen .btn-warning {
    color: #fff;
    background-color: #ff851b;
    border-color: #e67818;
  }
  .lumen .btn-danger {
    color: #fff;
    background-color: #ff4136;
    border-color: #e63b31;
  }
  .lumen .btn-light {
    color: #000;
    background-color: #f6f6f6;
    border-color: #dddddd;
  }
  .lumen .btn-dark {
    color: #fff;
    background-color: #555;
    border-color: #4d4d4d;
  }

  .lux {
    --lux-blue: #007bff;
    --lux-indigo: #6610f2;
    --lux-purple: #6f42c1;
    --lux-pink: #e83e8c;
    --lux-red: #d9534f;
    --lux-orange: #fd7e14;
    --lux-yellow: #f0ad4e;
    --lux-green: #4bbf73;
    --lux-teal: #20c997;
    --lux-cyan: #1f9bcf;
    --lux-white: #fff;
    --lux-gray: #919aa1;
    --lux-gray-dark: #343a40;
    --lux-gray-100: #f8f9fa;
    --lux-gray-200: #f7f7f9;
    --lux-gray-300: #eceeef;
    --lux-gray-400: #ced4da;
    --lux-gray-500: #adb5bd;
    --lux-gray-600: #919aa1;
    --lux-gray-700: #55595c;
    --lux-gray-800: #343a40;
    --lux-gray-900: #1a1a1a;
    --lux-primary: #1a1a1a;
    --lux-secondary: #fff;
    --lux-success: #4bbf73;
    --lux-info: #1f9bcf;
    --lux-warning: #f0ad4e;
    --lux-danger: #d9534f;
    --lux-light: #fff;
    --lux-dark: #343a40;
    --lux-primary-rgb: 26, 26, 26;
    --lux-secondary-rgb: 255, 255, 255;
    --lux-success-rgb: 75, 191, 115;
    --lux-info-rgb: 31, 155, 207;
    --lux-warning-rgb: 240, 173, 78;
    --lux-danger-rgb: 217, 83, 79;
    --lux-light-rgb: 255, 255, 255;
    --lux-dark-rgb: 52, 58, 64;
    --lux-white-rgb: 255, 255, 255;
    --lux-black-rgb: 0, 0, 0;
    --lux-body-color-rgb: 85, 89, 92;
    --lux-body-bg-rgb: 255, 255, 255;
    --lux-font-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --lux-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --lux-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --lux-body-font-family: var(--lux-font-sans-serif);
    --lux-body-font-size: 1rem;
    --lux-body-font-weight: 400;
    --lux-body-line-height: 1.5;
    --lux-body-color: #55595c;
    --lux-body-bg: #fff;

    margin: 0;
    font-family: var(--lux-body-font-family);
    font-size: var(--lux-body-font-size);
    font-weight: var(--lux-body-font-weight);
    line-height: var(--lux-body-line-height);
    color: var(--lux-body-color);
    text-align: var(--lux-body-text-align);
    background-color: var(--lux-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .lux-btn {
    display: inline-block;
    font-weight: 600;
    line-height: 1.5rem;
    color: #55595c;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 0 solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 0.875rem;
    text-transform: uppercase;
  }
  .lux .btn-primary {
    color: #fff;
    background-color: #1a1a1a;
    border-color: #1a1a1a;
  }
  .lux .btn-secondary {
    color: #000;
    background-color: #fff;
    border-color: #fff;
  }
  .lux .btn-success {
    color: #fff;
    background-color: #4bbf73;
    border-color: #4bbf73;
  }
  .lux .btn-info {
    color: #fff;
    background-color: #1f9bcf;
    border-color: #1f9bcf;
  }
  .lux .btn-warning {
    color: #000;
    background-color: #f0ad4e;
    border-color: #f0ad4e;
  }
  .lux .btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
  }
  .lux .btn-light {
    color: #000;
    background-color: #fff;
    border-color: #fff;
  }
  .lux .btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
  }

  .materia {
    --materia-blue: #2196f3;
    --materia-indigo: #6610f2;
    --materia-purple: #6f42c1;
    --materia-pink: #e83e8c;
    --materia-red: #e51c23;
    --materia-orange: #fd7e14;
    --materia-yellow: #ff9800;
    --materia-green: #4caf50;
    --materia-teal: #20c997;
    --materia-cyan: #9c27b0;
    --materia-white: #fff;
    --materia-gray: #666;
    --materia-gray-dark: #222;
    --materia-gray-100: #f8f9fa;
    --materia-gray-200: #eee;
    --materia-gray-300: #dee2e6;
    --materia-gray-400: #ced4da;
    --materia-gray-500: #bbb;
    --materia-gray-600: #666;
    --materia-gray-700: #444;
    --materia-gray-800: #222;
    --materia-gray-900: #212121;
    --materia-primary: #2196f3;
    --materia-secondary: #fff;
    --materia-success: #4caf50;
    --materia-info: #9c27b0;
    --materia-warning: #ff9800;
    --materia-danger: #e51c23;
    --materia-light: #f8f9fa;
    --materia-dark: #222;
    --materia-primary-rgb: 33, 150, 243;
    --materia-secondary-rgb: 255, 255, 255;
    --materia-success-rgb: 76, 175, 80;
    --materia-info-rgb: 156, 39, 176;
    --materia-warning-rgb: 255, 152, 0;
    --materia-danger-rgb: 229, 28, 35;
    --materia-light-rgb: 248, 249, 250;
    --materia-dark-rgb: 34, 34, 34;
    --materia-white-rgb: 255, 255, 255;
    --materia-black-rgb: 0, 0, 0;
    --materia-body-color-rgb: 68, 68, 68;
    --materia-body-bg-rgb: 255, 255, 255;
    --materia-font-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --materia-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --materia-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --materia-body-font-family: var(--materia-font-sans-serif);
    --materia-body-font-size: 1rem;
    --materia-body-font-weight: 400;
    --materia-body-line-height: 1.5;
    --materia-body-color: #444;
    --materia-body-bg: #fff;

    margin: 0;
    font-family: var(--materia-body-font-family);
    font-size: var(--materia-body-font-size);
    font-weight: var(--materia-body-font-weight);
    line-height: var(--materia-body-line-height);
    color: var(--materia-body-color);
    text-align: var(--materia-body-text-align);
    background-color: var(--materia-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .materia-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #444;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    letter-spacing: .1px;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    transition: color .4s, background-color .4s, border-color .4s, box-shadow .4s;
  }
  .materia .btn-primary {
    color: #fff;
    background-color: #2196f3;
    background-image: var(--minty-gradient);
    border-color: #2196f3;
  }
  .materia .btn-secondary {
    color: #000;
    background-color: #fff;
    background-image: var(--minty-gradient);
    border-color: #fff;
  }
  .materia .btn-success {
    color: #fff;
    background-color: #4caf50;
    background-image: var(--minty-gradient);
    border-color: #4caf50;
  }
  .materia .btn-info {
    color: #fff;
    background-color: #9c27b0;
    background-image: var(--minty-gradient);
    border-color: #9c27b0;
  }
  .materia .btn-warning {
    color: #fff;
    background-color: #ff9800;
    background-image: var(--minty-gradient);
    border-color: #ff9800;
  }
  .materia .btn-danger {
    color: #fff;
    background-color: #e51c23;
    background-image: var(--minty-gradient);
    border-color: #e51c23;
  }
  .materia .btn-light {
    color: #000;
    background-color: #f8f9fa;
    background-image: var(--minty-gradient);
    border-color: #f8f9fa;
  }
  .materia .btn-dark {
    color: #fff;
    background-color: #222;
    background-image: var(--minty-gradient);
    border-color: #222;
  }

  .minty {
    --minty-blue: #007bff;
    --minty-indigo: #6610f2;
    --minty-purple: #6f42c1;
    --minty-pink: #e83e8c;
    --minty-red: #ff7851;
    --minty-orange: #fd7e14;
    --minty-yellow: #ffce67;
    --minty-green: #56cc9d;
    --minty-teal: #20c997;
    --minty-cyan: #6cc3d5;
    --minty-white: #fff;
    --minty-gray: #888;
    --minty-gray-dark: #343a40;
    --minty-gray-100: #f8f9fa;
    --minty-gray-200: #f7f7f9;
    --minty-gray-300: #eceeef;
    --minty-gray-400: #ced4da;
    --minty-gray-500: #aaa;
    --minty-gray-600: #888;
    --minty-gray-700: #5a5a5a;
    --minty-gray-800: #343a40;
    --minty-gray-900: #212529;
    --minty-primary: #78c2ad;
    --minty-secondary: #f3969a;
    --minty-success: #56cc9d;
    --minty-info: #6cc3d5;
    --minty-warning: #ffce67;
    --minty-danger: #ff7851;
    --minty-light: #f8f9fa;
    --minty-dark: #343a40;
    --minty-primary-rgb: 120, 194, 173;
    --minty-secondary-rgb: 243, 150, 154;
    --minty-success-rgb: 86, 204, 157;
    --minty-info-rgb: 108, 195, 213;
    --minty-warning-rgb: 255, 206, 103;
    --minty-danger-rgb: 255, 120, 81;
    --minty-light-rgb: 248, 249, 250;
    --minty-dark-rgb: 52, 58, 64;
    --minty-white-rgb: 255, 255, 255;
    --minty-black-rgb: 0, 0, 0;
    --minty-body-color-rgb: 136, 136, 136;
    --minty-body-bg-rgb: 255, 255, 255;
    --minty-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --minty-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --minty-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --minty-body-font-family: var(--minty-font-sans-serif);
    --minty-body-font-size: 1rem;
    --minty-body-font-weight: 400;
    --minty-body-line-height: 1.5;
    --minty-body-color: #888;
    --minty-body-bg: #fff;

    margin: 0;
    font-family: var(--minty-body-font-family);
    font-size: var(--minty-body-font-size);
    font-weight: var(--minty-body-font-weight);
    line-height: var(--minty-body-line-height);
    color: var(--minty-body-color);
    text-align: var(--minty-body-text-align);
    background-color: var(--minty-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .minty-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #888;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.4rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family: Montserrat, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  .minty .btn-primary {
    color: #fff;
    background-color: #78c2ad;
    border-color: #78c2ad;
  }
  .minty .btn-secondary {
    color: #fff;
    background-color: #f3969a;
    border-color: #f3969a;
  }
  .minty .btn-success {
    color: #fff;
    background-color: #56cc9d;
    border-color: #56cc9d;
  }
  .minty .btn-info {
    color: #fff;
    background-color: #6cc3d5;
    border-color: #6cc3d5;
  }
  .minty .btn-warning {
    color: #fff;
    background-color: #ffce67;
    border-color: #ffce67;
  }
  .minty .btn-danger {
    color: #fff;
    background-color: #ff7851;
    border-color: #ff7851;
  }
  .minty .btn-light {
    color: #000;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  .minty .btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
  }

  .morph {
    --morph-blue: #378dfc;
    --morph-indigo: #6610f2;
    --morph-purple: #5b62f4;
    --morph-pink: #d63384;
    --morph-red: #e52527;
    --morph-orange: #fd7e14;
    --morph-yellow: #ffc107;
    --morph-green: #43cc29;
    --morph-teal: #20c997;
    --morph-cyan: #0dcaf0;
    --morph-white: #fff;
    --morph-gray: #7f8a99;
    --morph-gray-dark: #444b40;
    --morph-gray-100: #f0f5fa;
    --morph-gray-200: #d9e3f1;
    --morph-gray-300: #dee2e6;
    --morph-gray-400: #bed1e6;
    --morph-gray-500: #adb5bd;
    --morph-gray-600: #7f8a99;
    --morph-gray-700: #7b8ab8;
    --morph-gray-800: #444b40;
    --morph-gray-900: #212529;
    --morph-primary: #378dfc;
    --morph-secondary: #d9e3f1;
    --morph-success: #43cc29;
    --morph-info: #5b62f4;
    --morph-warning: #ffc107;
    --morph-danger: #e52527;
    --morph-light: #f0f5fa;
    --morph-dark: #212529;
    --morph-primary-rgb: 55, 141, 252;
    --morph-secondary-rgb: 217, 227, 241;
    --morph-success-rgb: 67, 204, 41;
    --morph-info-rgb: 91, 98, 244;
    --morph-warning-rgb: 255, 193, 7;
    --morph-danger-rgb: 229, 37, 39;
    --morph-light-rgb: 240, 245, 250;
    --morph-dark-rgb: 33, 37, 41;
    --morph-white-rgb: 255, 255, 255;
    --morph-black-rgb: 0, 0, 0;
    --morph-body-color-rgb: 123, 138, 184;
    --morph-body-bg-rgb: 217, 227, 241;
    --morph-font-sans-serif: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --morph-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --morph-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --morph-body-font-family: var(--morph-font-sans-serif);
    --morph-body-font-size: 1rem;
    --morph-body-font-weight: 400;
    --morph-body-line-height: 1.5;
    --morph-body-color: #7b8ab8;
    --morph-body-bg: #d9e3f1;

    margin: 0;
    font-family: var(--morph-body-font-family);
    font-size: var(--morph-body-font-size);
    font-weight: var(--morph-body-font-weight);
    line-height: var(--morph-body-line-height);
    color: var(--morph-body-color);
    text-align: var(--morph-body-text-align);
    background-color: var(--morph-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .morph-btn {
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    color: #7b8ab8;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 0 solid transparent;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    border-radius: 50rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    position: relative;
    color: #7b8ab8;
    border-radius: 50rem;
    background-color: #d9e3f1;
    border: none;
    box-shadow: 5px 5px 10px rgba(55, 94, 148, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.4);
    transition: background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out;
  }
  .morph .btn-primary, .morph .btn-secondary, .morph .btn-success, .morph .btn-info, .morph .btn-warning, .morph .btn-danger, .morph .btn-light, .morph .btn-dark {
    position: relative;
    color: #7b8ab8;
    border-radius: 50rem;
    background-color: #d9e3f1;
    border: none;
    box-shadow: 5px 5px 10px rgba(55, 94, 148, 0.2), -5px -5px 10px rgba(255, 255, 255, 0.4);
    transition: background-color .15s ease-in-out, border .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out;
  }

  .pulse {
    --pulse-blue: #007bff;
    --pulse-indigo: #6610f2;
    --pulse-purple: #593196;
    --pulse-pink: #e83e8c;
    --pulse-red: #fc3939;
    --pulse-orange: #fd7e14;
    --pulse-yellow: #efa31d;
    --pulse-green: #13b955;
    --pulse-teal: #20c997;
    --pulse-cyan: #009cdc;
    --pulse-white: #fff;
    --pulse-gray: #868e96;
    --pulse-gray-dark: #343a40;
    --pulse-gray-100: #fafafa;
    --pulse-gray-200: #f9f8fc;
    --pulse-gray-300: #ededed;
    --pulse-gray-400: #cbc8d0;
    --pulse-gray-500: #adb5bd;
    --pulse-gray-600: #868e96;
    --pulse-gray-700: #444;
    --pulse-gray-800: #343a40;
    --pulse-gray-900: #17141f;
    --pulse-primary: #593196;
    --pulse-secondary: #a991d4;
    --pulse-success: #13b955;
    --pulse-info: #009cdc;
    --pulse-warning: #efa31d;
    --pulse-danger: #fc3939;
    --pulse-light: #f9f8fc;
    --pulse-dark: #17141f;
    --pulse-primary-rgb: 89, 49, 150;
    --pulse-secondary-rgb: 169, 145, 212;
    --pulse-success-rgb: 19, 185, 85;
    --pulse-info-rgb: 0, 156, 220;
    --pulse-warning-rgb: 239, 163, 29;
    --pulse-danger-rgb: 252, 57, 57;
    --pulse-light-rgb: 249, 248, 252;
    --pulse-dark-rgb: 23, 20, 31;
    --pulse-white-rgb: 255, 255, 255;
    --pulse-black-rgb: 0, 0, 0;
    --pulse-body-color-rgb: 68, 68, 68;
    --pulse-body-bg-rgb: 255, 255, 255;
    --pulse-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --pulse-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --pulse-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --pulse-body-font-family: var(--pulse-font-sans-serif);
    --pulse-body-font-size: 1rem;
    --pulse-body-font-weight: 400;
    --pulse-body-line-height: 1.5;
    --pulse-body-color: #444;
    --pulse-body-bg: #fff;

    margin: 0;
    font-family: var(--pulse-body-font-family);
    font-size: var(--pulse-body-font-size);
    font-weight: var(--pulse-body-font-weight);
    line-height: var(--pulse-body-line-height);
    color: var(--pulse-body-color);
    text-align: var(--pulse-body-text-align);
    background-color: var(--pulse-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .pulse-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #444;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .pulse .btn-primary {
    color: #fff;
    background-color: #593196;
    border-color: #593196;
  }
  .pulse .btn-secondary {
    color: #fff;
    background-color: #a991d4;
    border-color: #a991d4;
  }
  .pulse .btn-success {
    color: #fff;
    background-color: #13b955;
    border-color: #13b955;
  }
  .pulse .btn-info {
    color: #fff;
    background-color: #009cdc;
    border-color: #009cdc;
  }
  .pulse .btn-warning {
    color: #fff;
    background-color: #efa31d;
    border-color: #efa31d;
  }
  .pulse .btn-danger {
    color: #fff;
    background-color: #fc3939;
    border-color: #fc3939;
  }
  .pulse .btn-warning {
    color: #fff;
    background-color: #efa31d;
    border-color: #efa31d;
  }
  .pulse .btn-danger {
    color: #fff;
    background-color: #fc3939;
    border-color: #fc3939;
  }
  .pulse .btn-light {
    color: #000;
    background-color: #f9f8fc;
    border-color: #f9f8fc;
  }
  .pulse .btn-dark {
    color: #fff;
    background-color: #17141f;
    border-color: #17141f;
  }

  .quartz {
    --quartz-blue: #3a8fd9;
    --quartz-indigo: #6610f2;
    --quartz-purple: #686dc3;
    --quartz-pink: #e83283;
    --quartz-red: #fc346f;
    --quartz-orange: #fd7e14;
    --quartz-yellow: #ffc107;
    --quartz-green: #41d7a7;
    --quartz-teal: #528fb3;
    --quartz-cyan: #39cbfb;
    --quartz-white: #fff;
    --quartz-gray: #6c757d;
    --quartz-gray-dark: #343a40;
    --quartz-gray-100: #f8f9fa;
    --quartz-gray-200: #e9e9e8;
    --quartz-gray-300: #dee2e6;
    --quartz-gray-400: #ced4da;
    --quartz-gray-500: #adb5bd;
    --quartz-gray-600: #6c757d;
    --quartz-gray-700: #495057;
    --quartz-gray-800: #343a40;
    --quartz-gray-900: #212529;
    --quartz-primary: #e83283;
    --quartz-secondary: rgba(255, 255, 255, 0.4);
    --quartz-success: #41d7a7;
    --quartz-info: #39cbfb;
    --quartz-warning: #ffc107;
    --quartz-danger: #fd7e14;
    --quartz-light: #e9e9e8;
    --quartz-dark: #212529;
    --quartz-primary-rgb: 232, 50, 131;
    --quartz-secondary-rgb: 255, 255, 255;
    --quartz-success-rgb: 65, 215, 167;
    --quartz-info-rgb: 57, 203, 251;
    --quartz-warning-rgb: 255, 193, 7;
    --quartz-danger-rgb: 253, 126, 20;
    --quartz-light-rgb: 233, 233, 232;
    --quartz-dark-rgb: 33, 37, 41;
    --quartz-white-rgb: 255, 255, 255;
    --quartz-black-rgb: 0, 0, 0;
    --quartz-body-color-rgb: 255, 255, 255;
    --quartz-body-bg-rgb: 104, 109, 195;
    --quartz-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --quartz-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --quartz-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --quartz-body-font-family: var(--quartz-font-sans-serif);
    --quartz-body-font-size: 1rem;
    --quartz-body-font-weight: 400;
    --quartz-body-line-height: 1.5;
    --quartz-body-color: #fff;
    --quartz-body-bg: #686dc3;

    margin: 0;
    font-family: var(--quartz-body-font-family);
    font-size: var(--quartz-body-font-size);
    font-weight: var(--quartz-body-font-weight);
    line-height: var(--quartz-body-line-height);
    color: var(--quartz-body-color);
    text-align: var(--quartz-body-text-align);
    background-color: var(--quartz-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(90deg, #33b7e2, #5e62b0, #dc307c);
  }
  .quartz-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .quartz .btn-primary {
    color: #fff;
    background-color: #e83283;
    border-color: #e83283;
  }
  .quartz .btn-secondary {
    color: #000;
    background-color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.4);
    border: none;
    color: #fff;
  }
  .quartz .btn-success {
    color: #fff;
    background-color: #41d7a7;
    border-color: #41d7a7;
  }
  .quartz .btn-info {
    color: #fff;
    background-color: #39cbfb;
    border-color: #39cbfb;
  }
  .quartz .btn-warning {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  .quartz .btn-danger {
    color: #fff;
    background-color: #fd7e14;
    border-color: #fd7e14;
  }
  .quartz .btn-light {
    color: #000;
    background-color: #e9e9e8;
    border-color: #e9e9e8;
  }
  .quartz .btn-dark {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
  }

  .sandstone {
    --sandstone-blue: #325d88;
    --sandstone-indigo: #6610f2;
    --sandstone-purple: #6f42c1;
    --sandstone-pink: #e83e8c;
    --sandstone-red: #d9534f;
    --sandstone-orange: #f47c3c;
    --sandstone-yellow: #ffc107;
    --sandstone-green: #93c54b;
    --sandstone-teal: #20c997;
    --sandstone-cyan: #29abe0;
    --sandstone-white: #fff;
    --sandstone-gray: #8e8c84;
    --sandstone-gray-dark: #3e3f3a;
    --sandstone-gray-100: #f8f9fa;
    --sandstone-gray-200: #f8f5f0;
    --sandstone-gray-300: #dfd7ca;
    --sandstone-gray-400: #ced4da;
    --sandstone-gray-500: #98978b;
    --sandstone-gray-600: #8e8c84;
    --sandstone-gray-700: #495057;
    --sandstone-gray-800: #3e3f3a;
    --sandstone-gray-900: #212529;
    --sandstone-primary: #325d88;
    --sandstone-secondary: #8e8c84;
    --sandstone-success: #93c54b;
    --sandstone-info: #29abe0;
    --sandstone-warning: #f47c3c;
    --sandstone-danger: #d9534f;
    --sandstone-light: #f8f5f0;
    --sandstone-dark: #3e3f3a;
    --sandstone-primary-rgb: 50, 93, 136;
    --sandstone-secondary-rgb: 142, 140, 132;
    --sandstone-success-rgb: 147, 197, 75;
    --sandstone-info-rgb: 41, 171, 224;
    --sandstone-warning-rgb: 244, 124, 60;
    --sandstone-danger-rgb: 217, 83, 79;
    --sandstone-light-rgb: 248, 245, 240;
    --sandstone-dark-rgb: 62, 63, 58;
    --sandstone-white-rgb: 255, 255, 255;
    --sandstone-black-rgb: 0, 0, 0;
    --sandstone-body-color-rgb: 62, 63, 58;
    --sandstone-body-bg-rgb: 255, 255, 255;
    --sandstone-font-sans-serif: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --sandstone-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sandstone-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --sandstone-body-font-family: var(--sandstone-font-sans-serif);
    --sandstone-body-font-size: 1rem;
    --sandstone-body-font-weight: 400;
    --sandstone-body-line-height: 1.5;
    --sandstone-body-color: #3e3f3a;
    --sandstone-body-bg: #fff;

    margin: 0;
    font-family: var(--sandstone-body-font-family);
    font-size: var(--sandstone-body-font-size);
    font-weight: var(--sandstone-body-font-weight);
    line-height: var(--sandstone-body-line-height);
    color: var(--sandstone-body-color);
    text-align: var(--sandstone-body-text-align);
    background-color: var(--sandstone-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .sandstone-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #3e3f3a;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 13px;
    line-height: 22px;
    font-weight: 500;
    text-transform: uppercase;
  }
  .sandstone .btn-primary {
    color: #fff;
    background-color: #325d88;
    border-color: #325d88;
  }
  .sandstone .btn-secondary {
    color: #fff;
    background-color: #8e8c84;
    border-color: #8e8c84;
  }
  .sandstone .btn-success {
    color: #fff;
    background-color: #93c54b;
    border-color: #93c54b;
  }
  .sandstone .btn-info {
    color: #fff;
    background-color: #29abe0;
    border-color: #29abe0;
  }
  .sandstone .btn-warning {
    color: #fff;
    background-color: #f47c3c;
    border-color: #f47c3c;
  }
  .sandstone .btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
  }
  .sandstone .btn-light {
    color: #000;
    background-color: #f8f5f0;
    border-color: #f8f5f0;
  }
  .sandstone .btn-dark {
    color: #fff;
    background-color: #3e3f3a;
    border-color: #3e3f3a;
  }

  .simplex {
    --simplex-blue: #007bff;
    --simplex-indigo: #6610f2;
    --simplex-purple: #9b479f;
    --simplex-pink: #e83e8c;
    --simplex-red: #d9230f;
    --simplex-orange: #d9831f;
    --simplex-yellow: #ffc107;
    --simplex-green: #469408;
    --simplex-teal: #20c997;
    --simplex-cyan: #029acf;
    --simplex-white: #fff;
    --simplex-gray: #777;
    --simplex-gray-dark: #373a3c;
    --simplex-gray-100: #f8f9fa;
    --simplex-gray-200: #ddd;
    --simplex-gray-300: #ccc;
    --simplex-gray-400: #bbb;
    --simplex-gray-500: #adb5bd;
    --simplex-gray-600: #777;
    --simplex-gray-700: #444;
    --simplex-gray-800: #373a3c;
    --simplex-gray-900: #212529;
    --simplex-primary: #d9230f;
    --simplex-secondary: #fff;
    --simplex-success: #469408;
    --simplex-info: #029acf;
    --simplex-warning: #d9831f;
    --simplex-danger: #9b479f;
    --simplex-light: #fff;
    --simplex-dark: #373a3c;
    --simplex-primary-rgb: 217, 35, 15;
    --simplex-secondary-rgb: 255, 255, 255;
    --simplex-success-rgb: 70, 148, 8;
    --simplex-info-rgb: 2, 154, 207;
    --simplex-warning-rgb: 217, 131, 31;
    --simplex-danger-rgb: 155, 71, 159;
    --simplex-light-rgb: 255, 255, 255;
    --simplex-dark-rgb: 55, 58, 60;
    --simplex-white-rgb: 255, 255, 255;
    --simplex-black-rgb: 0, 0, 0;
    --simplex-body-color-rgb: 33, 37, 41;
    --simplex-body-bg-rgb: 252, 252, 252;
    --simplex-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --simplex-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --simplex-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --simplex-body-font-family: var(--simplex-font-sans-serif);
    --simplex-body-font-size: 1rem;
    --simplex-body-font-weight: 400;
    --simplex-body-line-height: 1.5;
    --simplex-body-color: #212529;
    --simplex-body-bg: #fcfcfc;

    margin: 0;
    font-family: var(--simplex-body-font-family);
    font-size: var(--simplex-body-font-size);
    font-weight: var(--simplex-body-font-weight);
    line-height: var(--simplex-body-line-height);
    color: var(--simplex-body-color);
    text-align: var(--simplex-body-text-align);
    background-color: var(--simplex-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .simplex-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .simplex .btn-primary {
    color: #fff;
    background-color: #d9230f;
    border-color: #d9230f;
    background-image: linear-gradient(#db301d, #d9230f 6%, #cc210e);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #bd1e0d;
  }
  .simplex .btn-secondary {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    background-image: linear-gradient(white, #fff 6%, #f0f0f0);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #dedede;
  }
  .simplex .btn-success {
    color: #fff;
    background-color: #469408;
    border-color: #469408;
    background-image: linear-gradient(#519a17, #469408 6%, #428b08);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #3d8107;
  }
  .simplex .btn-info {
    color: #fff;
    background-color: #029acf;
    border-color: #029acf;
    background-image: linear-gradient(#11a0d2, #029acf 6%, #0291c3);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #0286b4;
  }
  .simplex .btn-warning {
    color: #fff;
    background-color: #d9831f;
    border-color: #d9831f;
    background-image: linear-gradient(#db8a2c, #d9831f 6%, #cc7b1d);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #bd721b;
  }
  .simplex .btn-danger {
    color: #fff;
    background-color: #9b479f;
    border-color: #9b479f;
    background-image: linear-gradient(#a152a5, #9b479f 6%, #924395);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #873e8a;
  }
  .simplex .btn-light {
    color: #000;
    background-color: #fff;
    border-color: #fff;
    background-image: linear-gradient(white, #fff 6%, #f0f0f0);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #dedede;
  }
  .simplex .btn-dark {
    color: #fff;
    background-color: #373a3c;
    border-color: #373a3c;
    background-image: linear-gradient(#434648, #373a3c 6%, #343738);
    -webkit-filter: none;
    filter: none;
    border: 1px solid #303234;
  }

  .sketchy {
    --sketchy-blue: #007bff;
    --sketchy-indigo: #6610f2;
    --sketchy-purple: #6f42c1;
    --sketchy-pink: #e83e8c;
    --sketchy-red: #dc3545;
    --sketchy-orange: #fd7e14;
    --sketchy-yellow: #ffc107;
    --sketchy-green: #28a745;
    --sketchy-teal: #20c997;
    --sketchy-cyan: #17a2b8;
    --sketchy-white: #fff;
    --sketchy-gray: #868e96;
    --sketchy-gray-dark: #333;
    --sketchy-gray-100: #f8f9fa;
    --sketchy-gray-200: #f7f7f9;
    --sketchy-gray-300: #dee2e6;
    --sketchy-gray-400: #ccc;
    --sketchy-gray-500: #aaa;
    --sketchy-gray-600: #868e96;
    --sketchy-gray-700: #555;
    --sketchy-gray-800: #333;
    --sketchy-gray-900: #212529;
    --sketchy-primary: #333;
    --sketchy-secondary: #555;
    --sketchy-success: #28a745;
    --sketchy-info: #17a2b8;
    --sketchy-warning: #ffc107;
    --sketchy-danger: #dc3545;
    --sketchy-light: #fff;
    --sketchy-dark: #555;
    --sketchy-primary-rgb: 51, 51, 51;
    --sketchy-secondary-rgb: 85, 85, 85;
    --sketchy-success-rgb: 40, 167, 69;
    --sketchy-info-rgb: 23, 162, 184;
    --sketchy-warning-rgb: 255, 193, 7;
    --sketchy-danger-rgb: 220, 53, 69;
    --sketchy-light-rgb: 255, 255, 255;
    --sketchy-dark-rgb: 85, 85, 85;
    --sketchy-white-rgb: 255, 255, 255;
    --sketchy-black-rgb: 0, 0, 0;
    --sketchy-body-color-rgb: 33, 37, 41;
    --sketchy-body-bg-rgb: 255, 255, 255;
    --sketchy-font-sans-serif: Neucha, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sketchy-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --sketchy-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --sketchy-body-font-family: var(--sketchy-font-sans-serif);
    --sketchy-body-font-size: 1rem;
    --sketchy-body-font-weight: 700;
    --sketchy-body-line-height: 1.5;
    --sketchy-body-color: #212529;
    --sketchy-body-bg: #fff;

    margin: 0;
    font-family: var(--sketchy-body-font-family);
    font-size: var(--sketchy-body-font-size);
    font-weight: var(--sketchy-body-font-weight);
    line-height: var(--sketchy-body-line-height);
    color: var(--sketchy-body-color);
    text-align: var(--sketchy-body-text-align);
    background-color: var(--sketchy-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .sketchy-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 25px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-family: Neucha, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    border-radius: 255px 25px 225px 25px/25px 225px 25px 255px;
    text-decoration: none;
  }
  .sketchy .btn-primary {
    color: #fff;
    background-color: #333;
    border-color: #333;
  }
  .sketchy .btn-secondary {
    color: #fff;
    background-color: #555;
    border-color: #555;
  }
  .sketchy .btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
  }
  .sketchy .btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  .sketchy .btn-warning {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  .sketchy .btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }
  .sketchy .btn-light {
    color: #000;
    background-color: #fff;
    border-color: #fff;
  }
  .sketchy .btn-dark {
    color: #fff;
    background-color: #555;
    border-color: #555;
  }

  .slate {
    --slate-blue: #007bff;
    --slate-indigo: #6610f2;
    --slate-purple: #6f42c1;
    --slate-pink: #e83e8c;
    --slate-red: #ee5f5b;
    --slate-orange: #fd7e14;
    --slate-yellow: #f89406;
    --slate-green: #62c462;
    --slate-teal: #20c997;
    --slate-cyan: #5bc0de;
    --slate-white: #fff;
    --slate-gray: #7a8288;
    --slate-gray-dark: #3a3f44;
    --slate-gray-100: #f8f9fa;
    --slate-gray-200: #e9ecef;
    --slate-gray-300: #dee2e6;
    --slate-gray-400: #ced4da;
    --slate-gray-500: #999;
    --slate-gray-600: #7a8288;
    --slate-gray-700: #52575c;
    --slate-gray-800: #3a3f44;
    --slate-gray-900: #272b30;
    --slate-primary: #3a3f44;
    --slate-secondary: #7a8288;
    --slate-success: #62c462;
    --slate-info: #5bc0de;
    --slate-warning: #f89406;
    --slate-danger: #ee5f5b;
    --slate-light: #e9ecef;
    --slate-dark: #272b30;
    --slate-primary-rgb: 58, 63, 68;
    --slate-secondary-rgb: 122, 130, 136;
    --slate-success-rgb: 98, 196, 98;
    --slate-info-rgb: 91, 192, 222;
    --slate-warning-rgb: 248, 148, 6;
    --slate-danger-rgb: 238, 95, 91;
    --slate-light-rgb: 233, 236, 239;
    --slate-dark-rgb: 39, 43, 48;
    --slate-white-rgb: 255, 255, 255;
    --slate-black-rgb: 0, 0, 0;
    --slate-body-color-rgb: 170, 170, 170;
    --slate-body-bg-rgb: 39, 43, 48;
    --slate-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --slate-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --slate-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --slate-body-font-family: var(--slate-font-sans-serif);
    --slate-body-font-size: 1rem;
    --slate-body-font-weight: 400;
    --slate-body-line-height: 1.5;
    --slate-body-color: #aaa;
    --slate-body-bg: #272b30;

    margin: 0;
    font-family: var(--slate-body-font-family);
    font-size: var(--slate-body-font-size);
    font-weight: var(--slate-body-font-weight);
    line-height: var(--slate-body-line-height);
    color: var(--slate-body-color);
    text-align: var(--slate-body-text-align);
    background-color: var(--slate-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .slate-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #aaa;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-color: rgba(0, 0, 0, 0.6);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  }
  .slate .btn-primary {
    color: #fff;
    background-color: #3a3f44;
    border-color: #3a3f44;
    background-image: linear-gradient(#52565a, #3a3f44 60%, #353a3f);
    filter: none;
  }
  .slate .btn-secondary {
    color: #fff;
    background-color: #7a8288;
    border-color: #7a8288;
    background-image: linear-gradient(#8a9196, #7a8288 60%, #70787d);
    filter: none;
  }
  .slate .btn-success {
    color: #fff;
    background-color: #62c462;
    border-color: #62c462;
    background-image: linear-gradient(#75cb75, #62c462 60%, #5ab45a);
    filter: none;
    color: #fff;
  }
  .slate .btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #5bc0de;
    background-image: linear-gradient(#6fc8e2, #5bc0de 60%, #54b1cc);
    filter: none;
    color: #fff;
  }
  .slate .btn-warning {
    color: #fff;
    background-color: #f89406;
    border-color: #f89406;
    background-image: linear-gradient(#f9a124, #f89406 60%, #e48806);
    filter: none;
    color: #fff;
  }
  .slate .btn-danger {
    color: #fff;
    background-color: #ee5f5b;
    border-color: #ee5f5b;
    background-image: linear-gradient(#f0726f, #ee5f5b 60%, #db5754);
    filter: none;
  }
  .slate .btn-light {
    color: #000;
    background-color: #e9ecef;
    border-color: rgba(0, 0, 0, 0.6);
  }
  .slate .btn-dark {
    color: #fff;
    background-color: #272b30;
    border-color: rgba(0, 0, 0, 0.6);
  }

  .solar {
    --solar-blue: #b58900;
    --solar-indigo: #6610f2;
    --solar-purple: #6f42c1;
    --solar-pink: #e83e8c;
    --solar-red: #d33682;
    --solar-orange: #fd7e14;
    --solar-yellow: #cb4b16;
    --solar-green: #2aa198;
    --solar-teal: #20c997;
    --solar-cyan: #268bd2;
    --solar-white: #fff;
    --solar-gray: #839496;
    --solar-gray-dark: #073642;
    --solar-gray-100: #fdf6e3;
    --solar-gray-200: #eee8d5;
    --solar-gray-300: #dee2e6;
    --solar-gray-400: #ced4da;
    --solar-gray-500: #adb5bd;
    --solar-gray-600: #839496;
    --solar-gray-700: #495057;
    --solar-gray-800: #073642;
    --solar-gray-900: #002b36;
    --solar-primary: #b58900;
    --solar-secondary: #839496;
    --solar-success: #2aa198;
    --solar-info: #268bd2;
    --solar-warning: #cb4b16;
    --solar-danger: #d33682;
    --solar-light: #fdf6e3;
    --solar-dark: #073642;
    --solar-primary-rgb: 181, 137, 0;
    --solar-secondary-rgb: 131, 148, 150;
    --solar-success-rgb: 42, 161, 152;
    --solar-info-rgb: 38, 139, 210;
    --solar-warning-rgb: 203, 75, 22;
    --solar-danger-rgb: 211, 54, 130;
    --solar-light-rgb: 253, 246, 227;
    --solar-dark-rgb: 7, 54, 66;
    --solar-white-rgb: 255, 255, 255;
    --solar-black-rgb: 0, 0, 0;
    --solar-body-color-rgb: 131, 148, 150;
    --solar-body-bg-rgb: 0, 43, 54;
    --solar-font-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --solar-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --solar-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --solar-body-font-family: var(--solar-font-sans-serif);
    --solar-body-font-size: 1rem;
    --solar-body-font-weight: 400;
    --solar-body-line-height: 1.5;
    --solar-body-color: #839496;
    --solar-body-bg: #002b36;

    margin: 0;
    font-family: var(--solar-body-font-family);
    font-size: var(--solar-body-font-size);
    font-weight: var(--solar-body-font-weight);
    line-height: var(--solar-body-line-height);
    color: var(--solar-body-color);
    text-align: var(--solar-body-text-align);
    background-color: var(--solar-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .solar-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #839496;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .solar .btn-primary {
    color: #fff;
    background-color: #b58900;
    border-color: #b58900;
  }
  .solar .btn-secondary {
    color: #fff;
    background-color: #839496;
    border-color: #839496;
  }
  .solar .btn-success {
    color: #fff;
    background-color: #2aa198;
    border-color: #2aa198;
  }
  .solar .btn-info {
    color: #fff;
    background-color: #268bd2;
    border-color: #268bd2;
  }
  .solar .btn-warning {
    color: #fff;
    background-color: #cb4b16;
    border-color: #cb4b16;
  }
  .solar .btn-danger {
    color: #fff;
    background-color: #d33682;
    border-color: #d33682;
  }
  .solar .btn-light {
    color: #000;
    background-color: #fdf6e3;
    border-color: #fdf6e3;
  }
  .solar .btn-dark {
    color: #fff;
    background-color: #073642;
    border-color: #073642;
  }

  .spacelab {
    --spacelab-blue: #446e9b;
    --spacelab-indigo: #6610f2;
    --spacelab-purple: #6f42c1;
    --spacelab-pink: #e83e8c;
    --spacelab-red: #cd0200;
    --spacelab-orange: #fd7e14;
    --spacelab-yellow: #d47500;
    --spacelab-green: #3cb521;
    --spacelab-teal: #20c997;
    --spacelab-cyan: #3399f3;
    --spacelab-white: #fff;
    --spacelab-gray: #777;
    --spacelab-gray-dark: #333;
    --spacelab-gray-100: #f8f9fa;
    --spacelab-gray-200: #eee;
    --spacelab-gray-300: #dee2e6;
    --spacelab-gray-400: #ced4da;
    --spacelab-gray-500: #999;
    --spacelab-gray-600: #777;
    --spacelab-gray-700: #495057;
    --spacelab-gray-800: #333;
    --spacelab-gray-900: #2d2d2d;
    --spacelab-primary: #446e9b;
    --spacelab-secondary: #999;
    --spacelab-success: #3cb521;
    --spacelab-info: #3399f3;
    --spacelab-warning: #d47500;
    --spacelab-danger: #cd0200;
    --spacelab-light: #eee;
    --spacelab-dark: #333;
    --spacelab-primary-rgb: 68, 110, 155;
    --spacelab-secondary-rgb: 153, 153, 153;
    --spacelab-success-rgb: 60, 181, 33;
    --spacelab-info-rgb: 51, 153, 243;
    --spacelab-warning-rgb: 212, 117, 0;
    --spacelab-danger-rgb: 205, 2, 0;
    --spacelab-light-rgb: 238, 238, 238;
    --spacelab-dark-rgb: 51, 51, 51;
    --spacelab-white-rgb: 255, 255, 255;
    --spacelab-black-rgb: 0, 0, 0;
    --spacelab-body-color-rgb: 119, 119, 119;
    --spacelab-body-bg-rgb: 255, 255, 255;
    --spacelab-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --spacelab-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --spacelab-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --spacelab-body-font-family: var(--spacelab-font-sans-serif);
    --spacelab-body-font-size: 1rem;
    --spacelab-body-font-weight: 400;
    --spacelab-body-line-height: 1.5;
    --spacelab-body-color: #777;
    --spacelab-body-bg: #fff;

    margin: 0;
    font-family: var(--spacelab-body-font-family);
    font-size: var(--spacelab-body-font-size);
    font-weight: var(--spacelab-body-font-weight);
    line-height: var(--spacelab-body-line-height);
    color: var(--spacelab-body-color);
    text-align: var(--spacelab-body-text-align);
    background-color: var(--spacelab-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .spacelab-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #777;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
  }
  .spacelab .btn-primary {
    color: #fff;
    background-color: #446e9b;
    border-color: #446e9b;
    background-image: linear-gradient(#7191b3, #446e9b 50%, #3f658f);
    filter: none;
    border: 1px solid #36587c;
  }
  .spacelab .btn-secondary {
    color: #fff;
    background-color: #999;
    border-color: #999;
    background-image: linear-gradient(#b1b1b1, #999 50%, #8d8d8d);
    filter: none;
    border: 1px solid #7a7a7a;
  }
  .spacelab .btn-success {
    color: #fff;
    background-color: #3cb521;
    border-color: #3cb521;
    background-image: linear-gradient(#6bc756, #3cb521 50%, #37a71e);
    filter: none;
    border: 1px solid #30911a;
  }
  .spacelab .btn-info {
    color: #fff;
    background-color: #3399f3;
    border-color: #3399f3;
    background-image: linear-gradient(#64b1f6, #3399f3 50%, #2f8de0);
    filter: none;
    border: 1px solid #297ac2;
  }
  .spacelab .btn-warning {
    color: #fff;
    background-color: #d47500;
    border-color: #d47500;
    background-image: linear-gradient(#de963d, #d47500 50%, #c36c00);
    filter: none;
    border: 1px solid #aa5e00;
  }
  .spacelab .btn-danger {
    color: #fff;
    background-color: #cd0200;
    border-color: #cd0200;
    background-image: linear-gradient(#d93f3d, #cd0200 50%, #bd0200);
    filter: none;
    border: 1px solid #a40200;
  }
  .spacelab .btn-light {
    color: #000;
    background-color: #eee;
    border-color: #eee;
    background-image: linear-gradient(#f2f2f2, #eee 50%, #dbdbdb);
    filter: none;
    border: 1px solid #bebebe;
  }
  .spacelab .btn-dark {
    color: #fff;
    background-color: #333;
    border-color: #333;
    background-image: linear-gradient(#646464, #333 50%, #2f2f2f);
    filter: none;
    border: 1px solid #292929;
  }

  .superhero {
    --superhero-blue: #4c9be8;
    --superhero-indigo: #6610f2;
    --superhero-purple: #6f42c1;
    --superhero-pink: #e83e8c;
    --superhero-red: #d9534f;
    --superhero-orange: #f0ad4e;
    --superhero-yellow: #ffc107;
    --superhero-green: #5cb85c;
    --superhero-teal: #20c997;
    --superhero-cyan: #5bc0de;
    --superhero-white: #fff;
    --superhero-gray: #868e96;
    --superhero-gray-dark: #343a40;
    --superhero-gray-100: #ebebeb;
    --superhero-gray-200: #4e5d6c;
    --superhero-gray-300: #dee2e6;
    --superhero-gray-400: #ced4da;
    --superhero-gray-500: #adb5bd;
    --superhero-gray-600: #868e96;
    --superhero-gray-700: #495057;
    --superhero-gray-800: #343a40;
    --superhero-gray-900: #212529;
    --superhero-primary: #4c9be8;
    --superhero-secondary: #4e5d6c;
    --superhero-success: #5cb85c;
    --superhero-info: #5bc0de;
    --superhero-warning: #ffc107;
    --superhero-danger: #d9534f;
    --superhero-light: #abb6c2;
    --superhero-dark: #20374c;
    --superhero-primary-rgb: 76, 155, 232;
    --superhero-secondary-rgb: 78, 93, 108;
    --superhero-success-rgb: 92, 184, 92;
    --superhero-info-rgb: 91, 192, 222;
    --superhero-warning-rgb: 255, 193, 7;
    --superhero-danger-rgb: 217, 83, 79;
    --superhero-light-rgb: 170.516129, 182.25, 193.983871;
    --superhero-dark-rgb: 32, 55, 76;
    --superhero-white-rgb: 255, 255, 255;
    --superhero-black-rgb: 0, 0, 0;
    --superhero-body-color-rgb: 235, 235, 235;
    --superhero-body-bg-rgb: 15, 37, 55;
    --superhero-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --superhero-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --superhero-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --superhero-body-font-family: var(--superhero-font-sans-serif);
    --superhero-body-font-size: 1rem;
    --superhero-body-font-weight: 400;
    --superhero-body-line-height: 1.5;
    --superhero-body-color: #ebebeb;
    --superhero-body-bg: #0f2537;

    margin: 0;
    font-family: var(--superhero-body-font-family);
    font-size: var(--superhero-body-font-size);
    font-weight: var(--superhero-body-font-weight);
    line-height: var(--superhero-body-line-height);
    color: var(--superhero-body-color);
    text-align: var(--superhero-body-text-align);
    background-color: var(--superhero-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .superhero-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #ebebeb;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .superhero .btn-primary {
    color: #fff;
    background-color: #4c9be8;
    border-color: #4c9be8;
  }
  .superhero .btn-secondary {
    color: #fff;
    background-color: #4e5d6c;
    border-color: #4e5d6c;
  }
  .superhero .btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #5cb85c;
  }
  .superhero .btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #5bc0de;
  }
  .superhero .btn-warning {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  .superhero .btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
  }
  .superhero .btn-light {
    color: #fff;
    background-color: #abb6c2;
    border-color: #abb6c2;
  }
  .superhero .btn-dark {
    color: #fff;
    background-color: #20374c;
    border-color: #20374c;
  }

  .united {
    --united-blue: #007bff;
    --united-indigo: #6610f2;
    --united-purple: #772953;
    --united-pink: #e83e8c;
    --united-red: #df382c;
    --united-orange: #e95420;
    --united-yellow: #efb73e;
    --united-green: #38b44a;
    --united-teal: #20c997;
    --united-cyan: #17a2b8;
    --united-white: #fff;
    --united-gray: #868e96;
    --united-gray-dark: #333;
    --united-gray-100: #f8f9fa;
    --united-gray-200: #e9ecef;
    --united-gray-300: #dee2e6;
    --united-gray-400: #ced4da;
    --united-gray-500: #aea79f;
    --united-gray-600: #868e96;
    --united-gray-700: #495057;
    --united-gray-800: #333;
    --united-gray-900: #212529;
    --united-primary: #e95420;
    --united-secondary: #aea79f;
    --united-success: #38b44a;
    --united-info: #17a2b8;
    --united-warning: #efb73e;
    --united-danger: #df382c;
    --united-light: #e9ecef;
    --united-dark: #772953;
    --united-primary-rgb: 233, 84, 32;
    --united-secondary-rgb: 174, 167, 159;
    --united-success-rgb: 56, 180, 74;
    --united-info-rgb: 23, 162, 184;
    --united-warning-rgb: 239, 183, 62;
    --united-danger-rgb: 223, 56, 44;
    --united-light-rgb: 233, 236, 239;
    --united-dark-rgb: 119, 41, 83;
    --united-white-rgb: 255, 255, 255;
    --united-black-rgb: 0, 0, 0;
    --united-body-color-rgb: 51, 51, 51;
    --united-body-bg-rgb: 255, 255, 255;
    --united-font-sans-serif: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --united-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --united-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --united-body-font-family: var(--united-font-sans-serif);
    --united-body-font-size: 1rem;
    --united-body-font-weight: 400;
    --united-body-line-height: 1.5;
    --united-body-color: #333;
    --united-body-bg: #fff;

    margin: 0;
    font-family: var(--united-body-font-family);
    font-size: var(--united-body-font-size);
    font-weight: var(--united-body-font-weight);
    line-height: var(--united-body-line-height);
    color: var(--united-body-color);
    text-align: var(--united-body-text-align);
    background-color: var(--united-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .united-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .united .btn-primary {
    color: #fff;
    background-color: #e95420;
    border-color: #e95420;
  }
  .united .btn-secondary {
    color: #fff;
    background-color: #aea79f;
    border-color: #aea79f;
  }
  .united .btn-success {
    color: #fff;
    background-color: #38b44a;
    border-color: #38b44a;
  }
  .united .btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  .united .btn-warning {
    color: #fff;
    background-color: #efb73e;
    border-color: #efb73e;
  }
  .united .btn-danger {
    color: #fff;
    background-color: #df382c;
    border-color: #df382c;
  }
  .united .btn-light {
    color: #000;
    background-color: #e9ecef;
    border-color: #e9ecef;
  }
  .united .btn-dark {
    color: #fff;
    background-color: #772953;
    border-color: #772953;
  }

  .vapor {
    --vapor-blue: #1ba2f6;
    --vapor-indigo: #6610f2;
    --vapor-purple: #6f42c1;
    --vapor-pink: #ea39b8;
    --vapor-red: #e44c55;
    --vapor-orange: #f1b633;
    --vapor-yellow: #ffc107;
    --vapor-green: #3cf281;
    --vapor-teal: #3f81a2;
    --vapor-cyan: #32fbe2;
    --vapor-white: #fff;
    --vapor-gray: #6c757d;
    --vapor-gray-dark: #343a40;
    --vapor-gray-100: #f8f9fa;
    --vapor-gray-200: #e9ecef;
    --vapor-gray-300: #dee2e6;
    --vapor-gray-400: #ced4da;
    --vapor-gray-500: #adb5bd;
    --vapor-gray-600: #6c757d;
    --vapor-gray-700: #495057;
    --vapor-gray-800: #343a40;
    --vapor-gray-900: #170229;
    --vapor-primary: #6f42c1;
    --vapor-secondary: #ea39b8;
    --vapor-success: #3cf281;
    --vapor-info: #1ba2f6;
    --vapor-warning: #ffc107;
    --vapor-danger: #e44c55;
    --vapor-light: #44d9e8;
    --vapor-dark: #170229;
    --vapor-primary-rgb: 111, 66, 193;
    --vapor-secondary-rgb: 234, 57, 184;
    --vapor-success-rgb: 60, 242, 129;
    --vapor-info-rgb: 27, 162, 246;
    --vapor-warning-rgb: 255, 193, 7;
    --vapor-danger-rgb: 228, 76, 85;
    --vapor-light-rgb: 68, 217, 232;
    --vapor-dark-rgb: 23, 2, 41;
    --vapor-white-rgb: 255, 255, 255;
    --vapor-black-rgb: 0, 0, 0;
    --vapor-body-color-rgb: 50, 251, 226;
    --vapor-body-bg-rgb: 26, 9, 51;
    --vapor-font-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --vapor-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --vapor-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --vapor-body-font-family: var(--vapor-font-sans-serif);
    --vapor-body-font-size: 1rem;
    --vapor-body-font-weight: 400;
    --vapor-body-line-height: 1.5;
    --vapor-body-color: #32fbe2;
    --vapor-body-bg: #1a0933;

    margin: 0;
    font-family: var(--vapor-body-font-family);
    font-size: var(--vapor-body-font-size);
    font-weight: var(--vapor-body-font-weight);
    line-height: var(--vapor-body-line-height);
    color: var(--vapor-body-color);
    text-align: var(--vapor-body-text-align);
    background-color: var(--vapor-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .vapor-btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #32fbe2;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 0 solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.15rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .vapor .btn-primary {
    color: #fff;
    background-color: #6f42c1;
    border-color: #6f42c1;
    box-shadow: 0 0 2px rgba(111, 66, 193, 0.9), 0 0 4px rgba(111, 66, 193, 0.4), 0 0 1rem rgba(111, 66, 193, 0.3), 0 0 4rem rgba(111, 66, 193, 0.1);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
  }
  .vapor .btn-secondary {
    color: #fff;
    background-color: #ea39b8;
    border-color: #ea39b8;
    box-shadow: 0 0 2px rgba(234, 57, 184, 0.9), 0 0 4px rgba(234, 57, 184, 0.4), 0 0 1rem rgba(234, 57, 184, 0.3), 0 0 4rem rgba(234, 57, 184, 0.1);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
  }
  .vapor .btn-success {
    color: #fff;
    background-color: #3cf281;
    border-color: #3cf281;
    box-shadow: 0 0 2px rgba(60, 242, 129, 0.9), 0 0 4px rgba(60, 242, 129, 0.4), 0 0 1rem rgba(60, 242, 129, 0.3), 0 0 4rem rgba(60, 242, 129, 0.1);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
  }
  .vapor .btn-info {
    color: #fff;
    background-color: #1ba2f6;
    border-color: #1ba2f6;
    box-shadow: 0 0 2px rgba(27, 162, 246, 0.9), 0 0 4px rgba(27, 162, 246, 0.4), 0 0 1rem rgba(27, 162, 246, 0.3), 0 0 4rem rgba(27, 162, 246, 0.1);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
  }
  .vapor .btn-warning {
    color: #fff;
    background-color: #ffc107;
    border-color: #ffc107;
    box-shadow: 0 0 2px rgba(255, 193, 7, 0.9), 0 0 4px rgba(255, 193, 7, 0.4), 0 0 1rem rgba(255, 193, 7, 0.3), 0 0 4rem rgba(255, 193, 7, 0.1);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
  }
  .vapor .btn-danger {
    color: #fff;
    background-color: #e44c55;
    border-color: #e44c55;
    box-shadow: 0 0 2px rgba(228, 76, 85, 0.9), 0 0 4px rgba(228, 76, 85, 0.4), 0 0 1rem rgba(228, 76, 85, 0.3), 0 0 4rem rgba(228, 76, 85, 0.1);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
  }
  .vapor .btn-light {
    color: #fff;
    background-color: #44d9e8;
    border-color: #44d9e8;
    box-shadow: 0 0 2px rgba(68, 217, 232, 0.9), 0 0 4px rgba(68, 217, 232, 0.4), 0 0 1rem rgba(68, 217, 232, 0.3), 0 0 4rem rgba(68, 217, 232, 0.1);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
  }
  .vapor .btn-dark {
    color: #fff;
    background-color: #170229;
    border-color: #170229;
    box-shadow: 0 0 2px rgba(111, 66, 193, 0.9), 0 0 4px rgba(111, 66, 193, 0.4), 0 0 1rem rgba(111, 66, 193, 0.3), 0 0 4rem rgba(111, 66, 193, 0.1);
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.3), 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
  }

  .yeti {
    --yeti-blue: #008cba;
    --yeti-indigo: #6610f2;
    --yeti-purple: #6f42c1;
    --yeti-pink: #e83e8c;
    --yeti-red: #f04124;
    --yeti-orange: #fd7e14;
    --yeti-yellow: #e99002;
    --yeti-green: #43ac6a;
    --yeti-teal: #20c997;
    --yeti-cyan: #5bc0de;
    --yeti-white: #fff;
    --yeti-gray: #888;
    --yeti-gray-dark: #333;
    --yeti-gray-100: #f8f9fa;
    --yeti-gray-200: #eee;
    --yeti-gray-300: #dee2e6;
    --yeti-gray-400: #ccc;
    --yeti-gray-500: #adb5bd;
    --yeti-gray-600: #888;
    --yeti-gray-700: #495057;
    --yeti-gray-800: #333;
    --yeti-gray-900: #222;
    --yeti-primary: #008cba;
    --yeti-secondary: #eee;
    --yeti-success: #43ac6a;
    --yeti-info: #5bc0de;
    --yeti-warning: #e99002;
    --yeti-danger: #f04124;
    --yeti-light: #eee;
    --yeti-dark: #222;
    --yeti-primary-rgb: 0, 140, 186;
    --yeti-secondary-rgb: 238, 238, 238;
    --yeti-success-rgb: 67, 172, 106;
    --yeti-info-rgb: 91, 192, 222;
    --yeti-warning-rgb: 233, 144, 2;
    --yeti-danger-rgb: 240, 65, 36;
    --yeti-light-rgb: 238, 238, 238;
    --yeti-dark-rgb: 34, 34, 34;
    --yeti-white-rgb: 255, 255, 255;
    --yeti-black-rgb: 0, 0, 0;
    --yeti-body-color-rgb: 34, 34, 34;
    --yeti-body-bg-rgb: 255, 255, 255;
    --yeti-font-sans-serif: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --yeti-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --yeti-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --yeti-body-font-family: var(--yeti-font-sans-serif);
    --yeti-body-font-size: 1rem;
    --yeti-body-font-weight: 400;
    --yeti-body-line-height: 1.5;
    --yeti-body-color: #222;
    --yeti-body-bg: #fff;

    margin: 0;
    font-family: var(--yeti-body-font-family);
    font-size: var(--yeti-body-font-size);
    font-weight: var(--yeti-body-font-weight);
    line-height: var(--yeti-body-line-height);
    color: var(--yeti-body-color);
    text-align: var(--yeti-body-text-align);
    background-color: var(--yeti-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .yeti-btn {
    display: inline-block;
    font-weight: 300;
    line-height: 1.5;
    color: #222;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.5rem;
    font-size: 1rem;
    border-radius: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .yeti .btn-primary {
    color: #fff;
    background-color: #008cba;
    border-color: #007ea7;
  }
  .yeti .btn-secondary {
    color: #000;
    background-color: #eee;
    border-color: #d6d6d6;
  }
  .yeti .btn-success {
    color: #fff;
    background-color: #43ac6a;
    border-color: #3c9b5f;
  }
  .yeti .btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #52adc8;
  }
  .yeti .btn-warning {
    color: #fff;
    background-color: #e99002;
    border-color: #d28202;
  }
  .yeti .btn-danger {
    color: #fff;
    background-color: #f04124;
    border-color: #d83b20;
  }
  .yeti .btn-light {
    color: #000;
    background-color: #eee;
    border-color: #d6d6d6;
  }
  .yeti .btn-dark {
    color: #fff;
    background-color: #222;
    border-color: #1f1f1f;
  }

  .zephyr {
    --zephyr-blue: #3459e6;
    --zephyr-indigo: #6610f2;
    --zephyr-purple: #6f42c1;
    --zephyr-pink: #d63384;
    --zephyr-red: #da292e;
    --zephyr-orange: #f8765f;
    --zephyr-yellow: #f4bd61;
    --zephyr-green: #2fb380;
    --zephyr-teal: #20c997;
    --zephyr-cyan: #287bb5;
    --zephyr-white: #fff;
    --zephyr-gray: #6c757d;
    --zephyr-gray-dark: #343a40;
    --zephyr-gray-100: #f8f9fa;
    --zephyr-gray-200: #e9ecef;
    --zephyr-gray-300: #dee2e6;
    --zephyr-gray-400: #ced4da;
    --zephyr-gray-500: #adb5bd;
    --zephyr-gray-600: #6c757d;
    --zephyr-gray-700: #495057;
    --zephyr-gray-800: #343a40;
    --zephyr-gray-900: #212529;
    --zephyr-primary: #3459e6;
    --zephyr-secondary: #fff;
    --zephyr-success: #2fb380;
    --zephyr-info: #287bb5;
    --zephyr-warning: #f4bd61;
    --zephyr-danger: #da292e;
    --zephyr-light: #f8f9fa;
    --zephyr-dark: #212529;
    --zephyr-primary-rgb: 52, 89, 230;
    --zephyr-secondary-rgb: 255, 255, 255;
    --zephyr-success-rgb: 47, 179, 128;
    --zephyr-info-rgb: 40, 123, 181;
    --zephyr-warning-rgb: 244, 189, 97;
    --zephyr-danger-rgb: 218, 41, 46;
    --zephyr-light-rgb: 248, 249, 250;
    --zephyr-dark-rgb: 33, 37, 41;
    --zephyr-white-rgb: 255, 255, 255;
    --zephyr-black-rgb: 0, 0, 0;
    --zephyr-body-color-rgb: 73, 80, 87;
    --zephyr-body-bg-rgb: 255, 255, 255;
    --zephyr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --zephyr-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --zephyr-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --zephyr-body-font-family: var(--zephyr-font-sans-serif);
    --zephyr-body-font-size: 1rem;
    --zephyr-body-font-weight: 400;
    --zephyr-body-line-height: 1.5;
    --zephyr-body-color: #495057;
    --zephyr-body-bg: #fff;

    margin: 0;
    font-family: var(--zephyr-body-font-family);
    font-size: var(--zephyr-body-font-size);
    font-weight: var(--zephyr-body-font-weight);
    line-height: var(--zephyr-body-line-height);
    color: var(--zephyr-body-color);
    text-align: var(--zephyr-body-text-align);
    background-color: var(--zephyr-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .zephyr-btn {
    display: inline-block;
    font-weight: 500;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .zephyr .btn-primary {
    color: #fff;
    background-color: #3459e6;
    border-color: #3459e6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .zephyr .btn-secondary {
    color: #212529;
    background-color: #fff;
    border-color: #e6e6e6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .zephyr .btn-success {
    color: #fff;
    background-color: #2fb380;
    border-color: #2fb380;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .zephyr .btn-info {
    color: #fff;
    background-color: #287bb5;
    border-color: #287bb5;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .zephyr .btn-warning {
    color: #fff;
    background-color: #f4bd61;
    border-color: #f4bd61;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .zephyr .btn-danger {
    color: #fff;
    background-color: #da292e;
    border-color: #da292e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .zephyr .btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #dfe0e1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  .zephyr .btn-dark {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
`,settingsStyles=i$4`
  .settings-page {
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
  }

  .card {
    margin-top: 30px;
    margin-bottom: 70px;
    border-bottom: 2px solid var(--printess-green);
  }

  .table-header {
    padding-left: 20px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 0;
    background-color: var(--printess-green);
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
  }

  .table-body {
    padding: 10px 10px 0 20px;
    font-size: 14px;
  }

  dl {
    display: grid;
    margin-top: 10px;
    margin-bottom: 0;
    grid-template-columns: 110px 1fr;
  }

  dt, dd {
    display: flex;
    line-height: 25px;
    margin-left: 0;
    text-align: left;
    padding: 10px;
    align-items: center;
  }

  dt {
    padding-left: 20px;
  }

  dd {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
  }

  .password-input {
    color: #555;
    font-family: var(--printess-text-font);
    font-size: 14px;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    background-color: rgba(242,246,219,0.5);
    padding: 7px 10px;
    border-radius: 4px;
    margin-right: 10px;
  }

  .hidden {
    display: none;
  }

  .language-tabs {
    display: flex;
    flex-direction: row;
    background-color: rgba(76, 156, 226, 0.1);
    border-bottom: 1px solid var(--printess-blue);
  }

  .lang-tab {
    padding: 7px 20px;
    cursor: pointer;
    display: flex;
  }

  .lang-tab.active, .lang-tab:hover {
    color: var(--printess-blue);
  }

  .plus-input {
    background-color: transparent;
    border: none;
    outline: none;
    width: 30px;
    text-align: center;
    font-size: 16px;
    color: #555;
  }

  .jsonTitle {
    background-color: rgb(208, 4, 155);
    color: #fff;
    padding: 12px 20px;
    margin-top: 30px;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .jsonText {
    padding: 12px 20px;
    min-width: 100%;
    max-width: 100%;
    height: 300px;
    border: 0px;
    color: #555;
    outline: none;
  }

  #translation-table {
    background-color: rgba(76, 156, 226, 0.1);
    border-bottom: 2px solid var(--printess-blue);
  }

  #offensive-words {
    height: 100px;
    background-color: rgba(242, 246, 219, 0.5);
    border-bottom: 2px solid var(--printess-green);
  }

  .warning {
    color: rgb(210, 0, 100);
    text-align: left;
    width: 100%;
    font-size: 12px;
    margin: 10px 0 0;
  }

  .button-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: 10px 0 30px 0px;
  }

  button {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
  }

  .settings {
    padding: 7px 20px;
    margin: 20px 15px 20px 0px;
  }

  .green {
    background-color: var(--printess-green);
  }

  .red {
    background-color: rgb(210, 0, 100);
  }

  .pink {
    background-color: var(--printess-pink);
  }

  .blue {
    background-color: var(--printess-blue);
  }

  .icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .icon {
    margin: 20px;
    padding-top: 10px;
    font-size: 12px;
  }

  wc-icon {
    min-width: 20px;
    height: 20px;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    .card {
      width: 100%;
      margin-bottom: 50px;
    }

    .table-header {
      padding-left: 10px;
    }

    .title {
      font-size: 14px;
      line-height: 36px;
      margin: 0;
    }

    .table-body {
      padding: 10px 10px 0 10px;
      font-size: 12px;
    }

    .settings {
      font-size: 12px;
    }
  }
`;var __decorate$2b=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcUploadedImage=class extends s$1{static get styles(){return[i$4`
      .uploaded-image {
        margin: 20px;
        height: 100px;
        z-index: 8;
      }

      .img-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
      }

      #img-meta {
        background: var(--printess-lightgreen);
        width: calc(100% - 40px);
        text-align: center;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        padding: 0px 20px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 20;
      }

      .img-url {
        cursor: copy;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .uploaded-image {
          width: auto;
          height: auto;
          max-height: 120px;
          max-width: 100%;
        }
      }
    `]}constructor(e){super(),this.url="https://editor.printess.com/v/nightly/printess-logo.svg",this.url=e}connectedCallback(){super.connectedCallback(),this.style.width="100%"}render(){return x`
      <div class="img-wrapper">
        <img class="uploaded-image" src=${this.url} alt="user logo">
      </div>
    `}};__decorate$2b([e$3({type:String})],WcUploadedImage.prototype,"url",void 0),WcUploadedImage=__decorate$2b([e$4("wc-uploaded-image")],WcUploadedImage);var __decorate$2a=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const editorVersions=["current stable version","nightly","3.3.1","3.3.2","3.3.3","3.3.4","3.3.5","3.2.32","3.2.31","3.2.30","3.2.29","3.2.28","3.2.25","3.2.24","3.2.23","3.2.22","3.2.21","3.2.20","3.2.19","3.2.18","3.2.17","3.2.16","3.2.15","3.2.14","3.2.13","3.2.12","3.2.11","3.2.10","3.2.9","3.2.8","3.2.7","3.2.6","3.2.5","3.2.4","3.2.3","3.2.2","3.2.1","3.2.0","3.1.0","3.0.0"];let WcPrintessEditorVersion=class extends s$1{constructor(){super(...arguments),this.showDropdown="none",this.saving=!1}static get styles(){return[userProfileStyles,settingsStyles,i$4`
      .card {
        background: transparent;
        margin-bottom: 10px;
        border-bottom-color: var(--printess-green);
      }

      .table-body {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: 10px 10px 10px 20px;
        gap: 10px;
      }

      dt {
        padding: 0px;
      }
      dd {
        padding: 0px;
        position: relative;
      }

      .card-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        background-color: rgba(242, 246, 219, 0.5);
        padding: 7px 10px;
        border-radius: 4px;
      }

      .dropdown {
        position: relative;
        height: 21px;
        line-height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .dropdown-container {
        clear: both;
        position: absolute;
        left: 0;
        top: 40px;
        width: calc(100% - 2px);
        height: 0px;
        z-index: 999;
        border-radius: 4px;
        max-height: 40vh;
        overflow-y: auto;
        border: 1px solid #ccc;
        transition: height .4s ease, visibility .3s ease;
        background-color: white;
      }

      .version-dropdown {
        overflow: hidden;
        left: unset;
        right: 20px;
        top: 46px;
        width: 140px;
      }

      .dropdown-item {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        font-size: 14px;
      }
      .dropdown-item:last-of-type {
        border: none;
      }

      .dropdown-item:hover {
        background-color: var(--printess-blue);
        color: white;
      }

      .button-wrapper {
        margin-bottom: 70px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card-input {
          font-size: 12px;
          padding: 5px 7px;
        }

        .button-wrapper {
          margin-bottom: 50px;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async readUserSettings(e){const t=await api.readUserSettings(e);if(t instanceof ServerErrorResponse$2)this.showError(t);else if(t.version)try{this.editorVersion=JSON.parse(t.version)}catch(e){this.editorVersion=t.version}}async deleteUserSetting(){const e=await api.deleteUserSetting({key:"version"});e instanceof ServerErrorResponse$2&&this.showError(e)}connectedCallback(){super.connectedCallback(),this.readUserSettings({keys:["version"]})}toggleDropdown(e){this.showDropdown===e?this.showDropdown="none":this.showDropdown=e}setOption(e){this.editorVersion=e,this.showDropdown="none"}saveEditorVersion(){this.saving=!0,window.setTimeout(()=>{if(!this.editorVersion||"current stable version"===this.editorVersion)return this.deleteUrl(),void(this.saving=!1);this.writeUserSetting({key:"version",json:this.editorVersion}),this.saving=!1},2e3)}deleteUrl(){this.editorVersion=void 0,this.deleteUserSetting()}render(){return x`
      <wc-topic-header title="Printess Editor Version"></wc-topic-header>
      <p style="font-size: 14px;">
        Here you can set an editor version that you want your templates to be build on. When you open a template in a different version, a warning will be displayed.
        This feature can prevent you from breaking your templates.
      </p>

      <wc-card-container title="Editor Version" color="green" .hasButtonBelow="${!0}">
        <div class="table-body">
          <dt>Editor Version</dt>
          <dd>
            <div class="dropdown card-input" @click=${()=>this.toggleDropdown("editor")}>
              <span>${this.editorVersion||"current stable version"}</span>
              <wc-icon icon="angle-down-light" primaryColor="gray" class="collapse-icon"></wc-icon>
            </div>
            <div class="dropdown-container" style="height: ${"editor"===this.showDropdown?"20vh":"0px"}; visibility: ${"editor"===this.showDropdown?"visible":"hidden"};">
              ${editorVersions.filter(e=>"nightly"!==e).map(e=>x`<div class="dropdown-item" @click=${()=>this.setOption(e)}>${e}</div>`)}
            </div>
          </dd>
        </div>
      </wc-card-container>

      <div class="button-wrapper">
        <wc-button
          caption="Save Editor Version" color="green" size="md"
          @click=${()=>this.saveEditorVersion()}
          .loading=${this.saving}
          loadingText="Saving Editor Version"
        ></wc-button>
      </div>
    `}};__decorate$2a([e$3({type:String})],WcPrintessEditorVersion.prototype,"showDropdown",void 0),__decorate$2a([e$3({type:Boolean})],WcPrintessEditorVersion.prototype,"saving",void 0),__decorate$2a([e$3({type:String})],WcPrintessEditorVersion.prototype,"editorVersion",void 0),WcPrintessEditorVersion=__decorate$2a([e$4("wc-printess-editor-version")],WcPrintessEditorVersion);var __decorate$29=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcEditorOptions=class extends s$1{constructor(){super(...arguments),this.showDropdown="none",this.resetOptions=!1,this.editorOptions={name:"",version:"version",editor:"nightly",mode:"buyer"}}static get styles(){return[subscriptionStyles,bootstrapStyles,i$4`
    .card {
      margin: 0;
    }

    .settings {
      margin: 20px 10px 70px 0;
    }

    .template-input {
      background-color: transparent;
      border: none;
      font-size: 14px;
      font-family: var(--printess-text-font);
      color: #555;
      width: 100%;
      outline: none;
    }

    .card-input {
      background-color: rgba(76, 156, 226, 0.1);
    }

    input[type="search"]::-webkit-search-cancel-button {
      -webkit-appearance: none;
      height: 1.2em;
      width: 1.2em;
      border-radius: 50em;
      background: url("https://pro.fontawesome.com/releases/v5.10.0/svgs/light/times.svg") no-repeat 50% 50%;
      background-size: contain;
      opacity: 0;
      pointer-events: none;
    }

    input[type="search"]:focus::-webkit-search-cancel-button, input[type="search"]:hover::-webkit-search-cancel-button {
      opacity: .3;
      cursor: pointer;
      pointer-events: all;
    }

    dl {
      grid-template-columns: 160px calc(100% - 160px);
    }

    dt {
      font-size: 14px;
    }

    dd {
      position: relative;
    }
    .blue dt:nth-of-type(2n), .blue dd:nth-of-type(2n) {
      background-color: white;
    }

    .collapse-icon {
      width: 30px;
      height: 30px;
      padding: 0;
    }

    .dropdown {
      position: relative;
      height: 21px;
      line-height: 21px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .dropdown-container {
      clear: both;
      position: absolute;
      left: 0;
      top: 46px;
      width: calc(100% - 22px);
      height: 0px;
      z-index: 999;
      border-radius: 4px;
      max-height: 40vh;
      overflow-y: auto;
      border: 1px solid #ccc;
      transition: height .4s ease, visibility .3s ease;
      background-color: white;
    }

    .template-dropdown {
      width: calc(100% - 174px);
      max-height: 28vh;
    }

    .version-dropdown {
      overflow: hidden;
      left: unset;
      right: 20px;
      top: 46px;
      width: 140px;
    }

    .dropdown-item {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      font-size: 14px;
    }
    .dropdown-item:last-of-type {
      border: none;
    }

    .dropdown-item:hover {
      background-color: var(--printess-blue);
      color: white;
    }

    .color-btn {
      min-width: 70px;
      min-height: 25px;
      margin-right: 10px;
    }

    .custom-css {
      background-color: var(--printess-blue);
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .css-icon {
      width: 30px;
      height: 30px;
      padding: 0
    }

    .button-wrapper {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin: 10px 0 30px 0px;
    }

    .spinner,
    .spinner:after {
      border-radius: 50%;
      width: 2em;
      height: 2em;
    }
    .spinner {
      font-size: 6px;
      position: relative;
      border-top: 0.5em solid rgba(255,255,255, 0.2);
      border-right: 0.5em solid rgba(255,255,255, 0.2);
      border-bottom: 0.5em solid rgba(255,255,255, 0.2);
      border-left: 0.5em solid #ffffff;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: load8 1.1s infinite linear;
      animation: load8 1.1s infinite linear;
      margin-right: 10px;
    }
    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @media (max-width: ${config.mobileDeviceWidth}px) {
      dl {
        grid-template-columns: 1fr;
      }

      dt {
        font-size: 12px;
      }

      dd {
        grid-column: unset;
        flex-direction: column;
      }

      .card-input {
        font-size: 12px;
        width: calc(100% - 20px);
        flex: 1 0 auto;
      }

      .dropdown-container {
        left: 9px;
        width: calc(100% - 20px);
      }

      .template-input {
        font-size: 12px;
      }
    }
  `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadTemplates(){const e=await api.loadTemplatesList();e instanceof ServerErrorResponse$2?this.showError(e):(this.templates=e.uts.filter(t=>t.uid===e.uid)[0]?.ts,this.templateSearch=this.templates)}async loadUserSettings(e){const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):t.editorOptions&&(this.editorOptions=JSON.parse(t.editorOptions))}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2?this.showError(t):this.setEditorCallback()}async connectedCallback(){super.connectedCallback(),await this.loadUserSettings({keys:["editorOptions"]}),await this.loadTemplates()}getEditorOptions(e){this.callback=e}setEditorCallback(){this.callback&&this.callback(this.editorOptions)}toggleDropdown(e){this.showDropdown===e?this.showDropdown="none":this.showDropdown=e}setOption(e,t){this.editorOptions[e]=t,this.showDropdown="none","name"===e&&(this.nameInput.value=t),this.saveTemplateOptions()}saveTemplateOptions(){const e="version"===this.editorOptions.version?"draft":this.editorOptions.version,t=JSON.stringify({name:this.editorOptions.name,version:e,editor:this.editorOptions.editor});this.writeUserSetting({key:"editorOptions",json:t})}resetEditorOptions(){this.editorOptions={name:"",version:"version",editor:"nightly",mode:"buyer"},this.nameInput.value="",this.saveTemplateOptions()}getTemplateList(e){this.templateSearch=this.templates?.filter(t=>t.n.toLowerCase().includes(e.target.value.toLowerCase())),this.showDropdown="template"}render(){return x`
      <div style="border-bottom: 2px solid var(--printess-blue);">
        <dl>
          <dt>Template</dt>
          <dd style="gap: 10px;">
            <div class="dropdown card-input">
              <input type="search" id="template-name-input" class="template-input" placeholder="name"
                value=${this.editorOptions.name}
                @input=${e=>this.getTemplateList(e)}
              >
              <wc-icon icon="angle-down-light" primaryColor="gray" class="collapse-icon" @click=${()=>this.toggleDropdown("template")}></wc-icon>
            </div>
            <div class="dropdown-container template-dropdown" style="height: ${"template"===this.showDropdown?"auto":"0px"}; visibility: ${"template"===this.showDropdown?"visible":"hidden"}">
              ${this.templateSearch?.map(e=>x`
                <div class="dropdown-item" @click=${()=>this.setOption("name",e.n)}>
                  ${e.n} <!-- - ${new Date(e.ls).toLocaleDateString()} -->
                </div>
              `)}
            </div>
            <div class="dropdown card-input" style=${config.isMobile?"flex: 1 0 auto;":"flex: 0 0 120px;"} @click=${()=>this.toggleDropdown("version")}>
              <span>${this.editorOptions.version||"version"}</span>
              <wc-icon icon="angle-down-light" primaryColor="gray" class="collapse-icon"></wc-icon>
            </div>
            <div class="dropdown-container ${config.isMobile?"":"version-dropdown"}" style="height: ${"version"===this.showDropdown?"90px":"0px"}; visibility: ${"version"===this.showDropdown?"visible":"hidden"}; top: ${config.isMobile?"93px":"46px"}">
              <div class="dropdown-item" @click=${()=>this.setOption("version","draft")}>draft</div>
              <div class="dropdown-item" @click=${()=>this.setOption("version","published")}>published</div>
            </div>
          </dd>
          <dt>Editor Version</dt>
          <dd>
            <div class="dropdown card-input" @click=${()=>this.toggleDropdown("editor")}>
              <span>${this.editorOptions.editor||"nightly"}</span>
              <wc-icon icon="angle-down-light" primaryColor="gray" class="collapse-icon"></wc-icon>
            </div>
            <div class="dropdown-container" style="height: ${"editor"===this.showDropdown?"15vh":"0px"}; visibility: ${"editor"===this.showDropdown?"visible":"hidden"};">
              ${editorVersions.map(e=>x`
                <div class="dropdown-item" @click=${()=>this.setOption("editor",e)}>${e}</div>
              `)}
            </div>
          </dd>
        </dl>
      </div>
      <div class="button-wrapper">
        <wc-button caption="Preview" color="blue" size="md" @click=${this.setEditorCallback}></wc-button>
        <wc-button caption="Reset Preview Settings" color="blue" size="md" @click=${()=>this.resetEditorOptions()}></wc-button>
      </div>

    `}};__decorate$29([e$3({type:Array})],WcEditorOptions.prototype,"templates",void 0),__decorate$29([e$3({type:Array})],WcEditorOptions.prototype,"templateSearch",void 0),__decorate$29([e$3({type:String})],WcEditorOptions.prototype,"showDropdown",void 0),__decorate$29([e$3({type:Boolean})],WcEditorOptions.prototype,"resetOptions",void 0),__decorate$29([e$3({type:Object})],WcEditorOptions.prototype,"editorOptions",void 0),__decorate$29([i$1("input#template-name-input")],WcEditorOptions.prototype,"nameInput",void 0),WcEditorOptions=__decorate$29([e$4("wc-editor-options")],WcEditorOptions);const sansserifFonts=["Lato","Neucha","'Noto Sans'","Nunito","Roboto","'Source Sans Pro'","system-ui","Ubuntu"],bsThemes={default:{primary:{font:"#ffffff",btn:"#007bff",hover:"#0b5ed7"},secondary:{font:"#ffffff",btn:"#6c757d",hover:"#5c636a"},success:{font:"#ffffff",btn:"#198754",hover:"#157347"},danger:{font:"#ffffff",btn:"#dc3545",hover:"#bb2d3b"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"}},cerulean:{primary:{font:"#ffffff",btn:"#2fa4e7",hover:"#288bc4"},secondary:{font:"#495057",btn:"#e9ecef",hover:"#eceff1"},success:{font:"#ffffff",btn:"#73a839",hover:"#628f30"},danger:{font:"#ffffff",btn:"#c71c22",hover:"#a9181d"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"}},cyborg:{primary:{font:"#ffffff",btn:"#2a9fd6",hover:"#2487b6"},secondary:{font:"#ffffff",btn:"#555555",hover:"#484848"},success:{font:"#ffffff",btn:"#77b300",hover:"#659800"},danger:{font:"#ffffff",btn:"#c00",hover:"#ad0000"},light:{font:"#ffffff",btn:"#222222",hover:"#1d1d1d"}},litera:{primary:{font:"#ffffff",btn:"#4582ec",hover:"#3b6fc9"},secondary:{font:"#ffffff",btn:"#adb5bd",hover:"#939aa1"},success:{font:"#ffffff",btn:"#02b875",hover:"#029c63"},danger:{font:"#ffffff",btn:"#d9534f",hover:"#b84743"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"}},lumen:{primary:{font:"#ffffff",btn:"#158cba",hover:"#158cba"},secondary:{font:"#000000",btn:"#f0f0f0",hover:"#f0f0f0"},success:{font:"#ffffff",btn:"#28b62c",hover:"#28b62c"},danger:{font:"#ffffff",btn:"#ff4136",hover:"#ff4136"},light:{font:"#000000",btn:"#f6f6f6",hover:"#f6f6f6"}},materia:{primary:{font:"#ffffff",btn:"#2196f3",hover:"#1d84d6"},secondary:{font:"#000000",btn:"#ffffff",hover:"#e0e0e0"},success:{font:"#ffffff",btn:"#4caf50",hover:"#439a46"},danger:{font:"#ffffff",btn:"#e51c23",hover:"#ca191f"},light:{font:"#000000",btn:"#f8f9fa",hover:"#dadbdc"}},morph:{primary:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},secondary:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},success:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},danger:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},light:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"}},quartz:{primary:{font:"#ffffff",btn:"#e83283",hover:"#c52b6f"},secondary:{font:"#ffffff",btn:"#ffffff66",hover:"#ffffff7d"},success:{font:"#ffffff",btn:"#41d7a7",hover:"#37b78e"},danger:{font:"#ffffff",btn:"#fd7e14",hover:"#d76b11"},light:{font:"#000000",btn:"#e9e9e8",hover:"#ececeb"}},sandstone:{primary:{font:"#ffffff",btn:"#325d88",hover:"#2b4f74"},secondary:{font:"#ffffff",btn:"#8e8c84",hover:"#797770"},success:{font:"#ffffff",btn:"#93c54b",hover:"#7da740"},danger:{font:"#ffffff",btn:"#d9534f",hover:"#b84743"},light:{font:"#000000",btn:"#f8f5f0",hover:"#f9f7f2"}},sketchy:{primary:{font:"#ffffff",btn:"#333333",hover:"#2b2b2b"},secondary:{font:"#ffffff",btn:"#555555",hover:"#484848"},success:{font:"#ffffff",btn:"#28a745",hover:"#228e3b"},danger:{font:"#ffffff",btn:"#dc3545",hover:"#bb2d3b"},light:{font:"#000000",btn:"#ffffff",hover:"white"}},superhero:{primary:{font:"#ffffff",btn:"#4c9be8",hover:"#4184c5"},secondary:{font:"#ffffff",btn:"#4e5d6c",hover:"#424f5c"},success:{font:"#ffffff",btn:"#5cb85c",hover:"#4e9c4e"},danger:{font:"#ffffff",btn:"#d9534f",hover:"#b84743"},light:{font:"#ffffff",btn:"#abb6c2",hover:"#919ba5"}},united:{primary:{font:"#ffffff",btn:"#e95420",hover:"#c6471b"},secondary:{font:"#ffffff",btn:"#aea79f",hover:"#948e87"},success:{font:"#ffffff",btn:"#38b44a",hover:"#30993f"},danger:{font:"#ffffff",btn:"#df382c",hover:"#be3025"},light:{font:"#000000",btn:"#e9ecef",hover:"#eceff1"}},vapor:{primary:{font:"#ffffff",btn:"#6f42c1",hover:"#5e38a4"},secondary:{font:"#ffffff",btn:"#ea39b8",hover:"#c7309c"},success:{font:"#ffffff",btn:"#3cf281",hover:"#33ce6e"},danger:{font:"#ffffff",btn:"#e44c55",hover:"#c24148"},light:{font:"#ffffff",btn:"#44d9e8",hover:"#3ab8c5"}}},bsStyles={default:{primary:{font:"#ffffff",btn:"#007bff",hover:"#0b5ed7"},secondary:{font:"#ffffff",btn:"#6c757d",hover:"#5c636a"},success:{font:"#ffffff",btn:"#198754",hover:"#157347"},danger:{font:"#ffffff",btn:"#dc3545",hover:"#bb2d3b"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"},color:"#212529",background:"#ffffff",font:"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'",monospace:"SFMono-Regular",sansserif:"system-ui"},cerulean:{primary:{font:"#ffffff",btn:"#2fa4e7",hover:"#288bc4"},secondary:{font:"#495057",btn:"#e9ecef",hover:"#eceff1"},success:{font:"#ffffff",btn:"#73a839",hover:"#628f30"},danger:{font:"#ffffff",btn:"#c71c22",hover:"#a9181d"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"},color:"#2fa4e7",background:"#ffffff",font:'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',monospace:"SFMono-Regular",sansserif:"system-ui"},cyborg:{primary:{font:"#ffffff",btn:"#2a9fd6",hover:"#2487b6"},secondary:{font:"#ffffff",btn:"#555555",hover:"#484848"},success:{font:"#ffffff",btn:"#77b300",hover:"#659800"},danger:{font:"#ffffff",btn:"#c00",hover:"#ad0000"},light:{font:"#ffffff",btn:"#222222",hover:"#1d1d1d"},color:"#ffffff",background:"#060606",font:'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',monospace:"SFMono-Regular",sansserif:"Roboto"},litera:{primary:{font:"#ffffff",btn:"#4582ec",hover:"#3b6fc9"},secondary:{font:"#ffffff",btn:"#adb5bd",hover:"#939aa1"},success:{font:"#ffffff",btn:"#02b875",hover:"#029c63"},danger:{font:"#ffffff",btn:"#d9534f",hover:"#b84743"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"},color:"#343a40",background:"#ffffff",font:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',monospace:"SFMono-Regular",sansserif:"system-ui"},lumen:{primary:{font:"#ffffff",btn:"#158cba",hover:"#158cba"},secondary:{font:"#000000",btn:"#f0f0f0",hover:"#f0f0f0"},success:{font:"#ffffff",btn:"#28b62c",hover:"#28b62c"},danger:{font:"#ffffff",btn:"#ff4136",hover:"#ff4136"},light:{font:"#000000",btn:"#f6f6f6",hover:"#f6f6f6"},color:"#222222",background:"#ffffff",font:'"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',monospace:"SFMono-Regular",sansserif:"'Source Sans Pro'"},materia:{primary:{font:"#ffffff",btn:"#2196f3",hover:"#1d84d6"},secondary:{font:"#000000",btn:"#ffffff",hover:"#e0e0e0"},success:{font:"#ffffff",btn:"#4caf50",hover:"#439a46"},danger:{font:"#ffffff",btn:"#e51c23",hover:"#ca191f"},light:{font:"#000000",btn:"#f8f9fa",hover:"#dadbdc"},color:"#444444",background:"#ffffff",font:'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',monospace:"SFMono-Regular",sansserif:"Roboto"},morph:{primary:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},secondary:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},success:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},danger:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},light:{font:"#7b8ab8",btn:"#d9e3f1",hover:"#d9e3f1"},color:"#485785",background:"#d9e3f1",font:'Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',monospace:"SFMono-Regular",sansserif:"Nunito"},quartz:{primary:{font:"#ffffff",btn:"#e83283",hover:"#c52b6f"},secondary:{font:"#ffffff",btn:"#ffffff66",hover:"#ffffff7d"},success:{font:"#ffffff",btn:"#41d7a7",hover:"#37b78e"},danger:{font:"#ffffff",btn:"#fd7e14",hover:"#d76b11"},light:{font:"#000000",btn:"#e9e9e8",hover:"#ececeb"},color:"#ffffff",background:"linear-gradient(90deg, #33b7e2, #5e62b0, #dc307c)",font:'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',monospace:"SFMono-Regular",sansserif:"system-ui"},sandstone:{primary:{font:"#ffffff",btn:"#325d88",hover:"#2b4f74"},secondary:{font:"#ffffff",btn:"#8e8c84",hover:"#797770"},success:{font:"#ffffff",btn:"#93c54b",hover:"#7da740"},danger:{font:"#ffffff",btn:"#d9534f",hover:"#b84743"},light:{font:"#000000",btn:"#f8f5f0",hover:"#f9f7f2"},color:"#3e3f3a",background:"#ffffff",font:'Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',monospace:"SF-Mono-Regular",sansserif:"Roboto"},sketchy:{primary:{font:"#ffffff",btn:"#333333",hover:"#2b2b2b"},secondary:{font:"#ffffff",btn:"#555555",hover:"#484848"},success:{font:"#ffffff",btn:"#28a745",hover:"#228e3b"},danger:{font:"#ffffff",btn:"#dc3545",hover:"#bb2d3b"},light:{font:"#000000",btn:"#ffffff",hover:"white"},color:"#212529",background:"#ffffff",font:'Neucha, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',monospace:"SFMono-Regular",sansserif:"Neucha"},superhero:{primary:{font:"#ffffff",btn:"#4c9be8",hover:"#4184c5"},secondary:{font:"#ffffff",btn:"#4e5d6c",hover:"#424f5c"},success:{font:"#ffffff",btn:"#5cb85c",hover:"#4e9c4e"},danger:{font:"#ffffff",btn:"#d9534f",hover:"#b84743"},light:{font:"#ffffff",btn:"#abb6c2",hover:"#919ba5"},color:"#ebebeb",background:"#0f2537",font:'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',monospace:"SFMono-Regular",sansserif:"Lato"},united:{primary:{font:"#ffffff",btn:"#e95420",hover:"#c6471b"},secondary:{font:"#ffffff",btn:"#aea79f",hover:"#948e87"},success:{font:"#ffffff",btn:"#38b44a",hover:"#30993f"},danger:{font:"#ffffff",btn:"#df382c",hover:"#be3025"},light:{font:"#000000",btn:"#e9ecef",hover:"#eceff1"},color:"#333333",background:"#ffffff",font:'Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',monospace:"SFMono-Regular",sansserif:"Ubuntu"},vapor:{primary:{font:"#ffffff",btn:"#6f42c1",hover:"#5e38a4"},secondary:{font:"#ffffff",btn:"#ea39b8",hover:"#c7309c"},success:{font:"#ffffff",btn:"#3cf281",hover:"#33ce6e"},danger:{font:"#ffffff",btn:"#e44c55",hover:"#c24148"},light:{font:"#ffffff",btn:"#44d9e8",hover:"#3ab8c5"},color:"#32fbe2",background:"linear-gradient(#17082e 0%, #1a0933 7%, #1a0933 80%, #0c1f4c 100%)",font:'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',monospace:"SFMono-Regular",sansserif:"Lato"}};var __decorate$28=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogResetBootstrapStyles=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal-wrapper {
        height: auto;
        width: 50vmin;
      }

      .modal-content {
        padding-bottom: 35px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: auto;
        text-align: justify;
      }

      .attention-header {
        font-weight: 700;
        color: var(--printess-red);
        margin-top: 10px;
        display: flex;
        justify-content: center;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
      }

      .side-note {
        font-size: 14px;
        font-family: var(--printess-text-font);
        padding: 0px 20px;
        margin: 20px;
        border-top: 3px solid var(--dialog-warning-red);
        border-bottom: 3px solid var(--dialog-warning-red);
        border-radius: 4px;
        text-align: center;
        width: 90%;
        line-height: 25px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          width: 90vmin;
        }
      }
    `]}constructor(){super(),this.backdrop=new WcBackdrop}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(e){document.body.removeChild(this.backdrop),document.body.removeChild(this),this.callback&&this.callback(e)}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Reset Bootstrap Styles</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog(!1)}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="attention-header">ATTENTION</div>
            <p style="font-size: 16px; text-align: center">
              By resetting your Bootstrap Styles the theme, font and colors will be set back to default. <br><br>
              Do you really want to reset your Bootstrap Styles?
            </p>

            <!-- <div class="side-note">
              <p>
              * By resetting your Bootstrap Styles the theme, font and colors will be set back to default.
              </p>
            </div> -->

            <div class="button-wrapper">
              <button class="submit" @click=${()=>this.closeDialog(!0)} style="margin-right: 10px;">Reset</button>
              <button class="submit" @click=${()=>this.closeDialog(!1)}>Cancel</button>
            </div>
          </div>
        </div>
      </div>
    `}};WcDialogResetBootstrapStyles=__decorate$28([e$4("wc-dialog-reset-bootstrap-styles")],WcDialogResetBootstrapStyles);const colorPickerStyles=i$4`
  .clr-picker {
    display:none;
    flex-wrap:wrap;
    position:absolute;
    width:200px;
    z-index:1000;
    border-radius:4px;
    background-color:#fff;
    justify-content:space-between;
    box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
  }
  .clr-picker.clr-open {
    display:flex;
  }
  .clr-dark {
    background-color:#444;
  }
  .clr-gradient {
    position:relative;
    width:100%;
    height:100px;
    margin-bottom:15px;
    border-radius:3px 3px 0 0;
    background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);
    cursor:pointer;
  }
  .clr-marker {
    position:absolute;
    width:12px;
    height:12px;
    margin:-6px 0 0 -6px;
    border:1px solid #fff;
    border-radius:50%;
    background-color:currentColor;
    cursor:pointer;
  }
  .clr-picker input[type=range]::-webkit-slider-runnable-track {
    width:100%;
    height:8px;
  }
  .clr-picker input[type=range]::-webkit-slider-thumb {
    width:8px;
    height:8px;
    -webkit-appearance:none;
  }
  .clr-picker input[type=range]::-moz-range-track {
    width:100%;
    height:8px;
    border:0;
}
.clr-picker input[type=range]::-moz-range-thumb {
width:8px;
    height:8px;
    border:0;
}
.clr-hue {
background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%);
}
.clr-alpha,.clr-hue {
position:relative;
    width:calc(100% - 40px);
    height:8px;
    margin:5px 20px;
    border-radius:4px;
}
.clr-alpha span {
display:block;
    height:100%;
    width:100%;
    border-radius:inherit;
    background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor);
}
.clr-alpha input,.clr-hue input {
position:absolute;
    width:calc(100% + 16px);
    height:16px;
    left:-8px;
    top:-4px;
    margin:0;
    background-color:transparent;
    opacity:0;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
}
.clr-alpha div,.clr-hue div {
position:absolute;
    width:16px;
    height:16px;
    left:0;
    top:0;
    margin:-4px 0 0 -8px;
    border:2px solid #fff;
    border-radius:50%;
    background-color:currentColor;
    box-shadow:0 0 1px #888;
    pointer-events:none;
}
.clr-alpha div:before {
content:'';
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    border-radius:50%;
    background-color:currentColor;
}
.clr-swatches {
order:2;
    width:calc(100% - 40px);
    margin:0 20px;
}
.clr-swatches div {
display:flex;
    flex-wrap:wrap;
    padding-bottom:12px;
    justify-content:center;
}
.clr-swatches button {
position:relative;
    width:20px;
    height:20px;
    margin:0 8px 6px 0;
    border:0;
    border-radius:50%;
    color:inherit;
    text-indent:-1000px;
    white-space:nowrap;
    overflow:hidden;
    cursor:pointer;
}
.clr-swatches button:last-child,.clr-swatches button:nth-child(6n) {
margin-right:0;
}
.clr-swatches button:after {
content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    border-radius:inherit;
    background-color:currentColor;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.clr-dark .clr-swatches button:after {
box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}input.clr-color {
order:1;
    width:120px;
    height:32px;
    margin:15px 20px 15px 0;
    padding:0 15px;
    border:1px solid #ddd;
    border-radius:16px;
    color:#444;
    background-color:#fff;
    font-family:sans-serif;
    font-size:14px;
    text-align:left;
    box-shadow:none;
}
.clr-dark input.clr-color {
color:#fff;
    border-color:#777;
    background-color:#555}input.clr-color:focus {
outline:0;
    border:1px solid #aaa;
}
.clr-preview {
position:relative;
    width:32px;
    height:32px;
    margin:15px 0 20px 20px;
    border:0;
    border-radius:50%;
    overflow:hidden;
    cursor:pointer;
}
.clr-preview:after,.clr-preview:before {
content:'';
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    border:1px solid #fff;
    border-radius:50%;
}
.clr-preview:after {
border:0;
    background-color:currentColor;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);
}
.clr-dark .clr-preview:after {
box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.clr-alpha div,.clr-color,.clr-hue div,.clr-marker {
box-sizing:border-box;
}
.clr-field {
display:inline-block;
    position:relative;
    color:#000;
}
.clr-field button {
position:absolute;
    width:30px;
    height:100%;
    right:0;
    top:50%;
    transform:translateY(-50%);
    border:0;
    color:inherit;
    text-indent:-1000px;
    white-space:nowrap;
    overflow:hidden;
    pointer-events:none;
}
.clr-field button:after {
content:'';
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    border-radius:inherit;
    background-color:currentColor;
    box-shadow:inset 0 0 1px rgba(0,0,0,.5);
}
.clr-alpha,.clr-alpha div,.clr-field button,.clr-preview:before,.clr-swatches button {
background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);
    background-position:0 0,4px 4px;
    background-size:8px 8px;
}
.clr-marker:focus {
outline:0;
}
.clr-keyboard-nav .clr-alpha input:focus+div,.clr-keyboard-nav .clr-hue input:focus+div,.clr-keyboard-nav .clr-marker:focus {
outline:0;
    box-shadow:0 0 0 2px #1e90ff,0 0 2px 2px #fff}
`;var __decorate$27=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcColorPickerComplex=class extends s$1{static get styles(){return[colorPickerStyles,bootstrapStyles,i$4`
      .card-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 10px;
        border-radius: 4px;
      }

      .color-container {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      }

      .color-wrapper {
        display: flex;
        flex-direction: column;
      }

      .preview-button {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        margin-bottom: 10px;
      }

      .color-palette {
        display: flex;
        flex-direction: row;
        border: 1px solid rgb(204, 204, 204);
        border-radius: 5px;
        padding: 5px 7px;
        margin-bottom: 4px;
        background-color: rgba(255, 255, 255, 0.8);
      }

      .color-box {
        min-width: 40px;
        min-height: 25px;
        position: relative;
      }

      .color-hex {
        position: relative;
        flex: 1 0 25px;
        font-weight: 400;
        font-family: var(--printess-text-font);
      }
      .color-box:last-of-type {
        margin-right: 0;
      }

      .color-picker {
        outline: none;
        border: none;
        min-width: 30px;
      }

      input.color-text {
        background-color: transparent;
        border: none;
        position: relative;
        flex: 1 1 25px;
        font-weight: 400;
        font-family: var(--printess-text-font);
        font-size: 14px;
        color: rgb(85, 85, 85);
        width: 100%;
      }

      input[type="color"] {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        width: 30px;
        height: 25px;
        -webkit-appearance: none;
        appearance: none;
      }
      input[type=color i] {
        padding: 0;
        border-color: transparent;
        border-radius: 50%;
        color: transparent;
        background-color: transparent;
      }

      .color-box > button {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 9;
        width: 30px;
        height: 25px;
        pointer-events: none;
        border-radius: 4px;
        border: 1px solid rgb(204, 204, 204);
      }
      .color-btn > button {
        height: 30px;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .color-container {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        }        
      }
    `]}constructor(e,t,o){super(),this.theme="default",this.font="system-ui",this.names=["primary","secondary","success","danger","light"],this.colorSet={primary:{font:"#ffffff",btn:"#007bff",hover:"#0b5ed7"},secondary:{font:"#ffffff",btn:"#6c757d",hover:"#5c636a"},success:{font:"ffffff",btn:"#198754",hover:"#157347"},danger:{font:"#ffffff",btn:"#dc3545",hover:"#bb2d3b"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"}},this.theme=e,this.font=t,this.colorSet=o}returnColors(e){this.callback=e}setColors(e,t,o){const r=this.colorSet;r[this.names[o]][e]=t,this.colorSet={...r}}setButtonColor(e,t){e.target.style.background=t,e.target.style.borderColor=t}render(){const e=this.theme;return x`
      <div class="card-input color-container ${e}">
        ${this.colorSet&&Object.entries(this.colorSet).map((t,o)=>x`
          <div class="color-wrapper">
            <button 
              class="btn-${t[0]} ${e}-btn preview-button" 
              style="color: ${t[1].font}; background: ${t[1].btn}; border-color: ${t[1].btn};font-family: ${this.font}, sans-serif;"
              @mouseover=${e=>this.setButtonColor(e,t[1].hover)}
              @mouseout=${e=>this.setButtonColor(e,t[1].btn)}
            >
              ${t[0].slice(0,1).toUpperCase()+t[0].slice(1)}
            </button>

            <div class="color-palette">
              <div class="color-box">
                <button class="color-picker" style="background: ${t[1].font};"></button>
                <input 
                  type="color" 
                  name="bs-color" 
                  value=${t[1].font||"#0d6efd"} 
                  @change=${()=>this.callback&&this.callback(this.colorSet)}
                  @input=${e=>this.setColors("font",e.target.value,o)}
                >
              </div>
              <input 
                type="text" 
                class="color-text" 
                value=${t[1].font} 
                @change=${()=>this.callback&&this.callback(this.colorSet)}
                @input=${e=>this.setColors("font",e.target.value,o)} 
              />
              <!-- <div class="color-hex" style="margin-left: 10px;">${t[1].font}</div> -->
            </div>

            <div class="color-palette">
              <div class="color-box">
                <button class="color-picker" style="background: ${t[1].btn};"></button>
                <input 
                  type="color" 
                  name="bs-color" 
                  value=${t[1].btn||"#0d6efd"} 
                  @change=${()=>this.callback&&this.callback(this.colorSet)}
                  @input=${e=>this.setColors("btn",e.target.value,o)}
                >
              </div>
              <input 
                type="text" 
                class="color-text" 
                value=${t[1].btn} 
                @change=${()=>this.callback&&this.callback(this.colorSet)}
                @input=${e=>this.setColors("btn",e.target.value,o)} 
              />
              <!-- <div class="color-hex" style="margin-left: 10px;">${t[1].btn}</div> -->
            </div>

            <div class="color-palette">
              <div class="color-box">
                <button class="color-picker" style="background: ${t[1].hover};"></button>
                <input 
                  type="color" 
                  name="bs-color" 
                  value=${t[1].hover||"#0d6efd"} 
                  @change=${()=>this.callback&&this.callback(this.colorSet)}
                  @input=${e=>this.setColors("hover",e.target.value,o)}
                >
              </div>
              <input 
                type="text" 
                class="color-text" 
                value=${t[1].hover} 
                @change=${()=>this.callback&&this.callback(this.colorSet)}
                @input=${e=>this.setColors("hover",e.target.value,o)} 
              />
              <!-- <div class="color-hex" style="margin-left: 10px;">${t[1].hover}</div> -->
            </div>
            
          </div>
        `)}
      </div>
    `}};__decorate$27([e$3({attribute:!0,type:String})],WcColorPickerComplex.prototype,"theme",void 0),__decorate$27([e$3({attribute:!0,type:String})],WcColorPickerComplex.prototype,"font",void 0),__decorate$27([e$3({type:Array})],WcColorPickerComplex.prototype,"names",void 0),__decorate$27([e$3({attribute:!0,type:Object})],WcColorPickerComplex.prototype,"colorSet",void 0),WcColorPickerComplex=__decorate$27([e$4("wc-color-picker-complex")],WcColorPickerComplex);var __decorate$26=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcToolbarColors=class extends s$1{static get styles(){return[colorPickerStyles,bootstrapStyles,i$4`
      .color-container {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 10px;
        border-radius: 4px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr 1fr;
      }

      .color-palette {
        display: flex;
        flex-direction: row;
        border: 1px solid rgb(204, 204, 204);
        border-radius: 5px;
        padding: 5px 7px;
        background-color: rgba(255, 255, 255, 0.8);
      }

      .color-box {
        min-width: 40px;
        min-height: 25px;
        position: relative;
      }

      .color-hex {
        position: relative;
        flex: 1 0 25px;
        font-weight: 400;
        font-family: var(--printess-text-font);
      }
      .color-box:last-of-type {
        margin-right: 0;
      }

      .color-picker {
        outline: none;
        border: none;
        min-width: 30px;
      }

      input {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        width: 30px;
        height: 25px;
        -webkit-appearance: none;
        appearance: none;
      }
      input[type=color i] {
        padding: 0;
        border-color: transparent;
        border-radius: 50%;
        color: transparent;
        background-color: transparent;
      }

      .color-box > button {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 9;
        width: 30px;
        height: 25px;
        pointer-events: none;
        border-radius: 4px;
        border: 1px solid rgb(204, 204, 204);
      }
      .color-btn > button {
        height: 30px;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .color-container {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr 1fr;
        }        
      }
    `]}constructor(e){super(),this.colorSet={font:"#ffffff",background:"#6c757d",active:"#525960"},this.colorSet=e}returnColors(e){this.callback=e}setColors(e,t){const o=this.colorSet;o[e]=t,this.colorSet={...o}}render(){const e=this.colorSet;return x`
      <div class="color-container" style="background-color: ${e.background};">
        <div class="color-palette">
          <div class="color-box">
            <button class="color-picker" style="background: ${e.font}"></button>
            <input 
              type="color" 
              name="bs-color" 
              id="bc-color-picker" 
              value=${e.font||"#ffffff"} 
              @change=${()=>this.callback&&this.callback(this.colorSet)}
              @input=${e=>this.setColors("font",e.target.value)}
            >
          </div>
          <div class="color-hex" style="margin-left: 10px;">Font Color</div>
        </div>
        <div class="color-palette">
          <div class="color-box">
            <button class="color-picker" style="background: ${e.background}"></button>
            <input 
              type="color" 
              name="bs-color" 
              id="bc-color-picker" 
              value=${e.background||"#6c757d"} 
              @change=${()=>this.callback&&this.callback(this.colorSet)}
              @input=${e=>this.setColors("background",e.target.value)}
            >
          </div>
          <div class="color-hex" style="margin-left: 10px;">Background Color</div>
        </div>
        <div class="color-palette">
          <div class="color-box">
            <button class="color-picker" style="background: ${e.active}"></button>
            <input 
              type="color" 
              name="bs-color" 
              id="bc-color-picker" 
              value=${e.active||"#525960"} 
              @change=${()=>this.callback&&this.callback(this.colorSet)}
              @input=${e=>this.setColors("active",e.target.value)}
            >
          </div>
          <div class="color-hex" style="margin-left: 10px;">Active Tab Color</div>
        </div>
      </div>
    `}};__decorate$26([e$3({attribute:!0,type:Object})],WcToolbarColors.prototype,"colorSet",void 0),WcToolbarColors=__decorate$26([e$4("wc-toolbar-colors")],WcToolbarColors);var __decorate$25=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcBackgroundColors=class extends s$1{static get styles(){return[colorPickerStyles,bootstrapStyles,i$4`
      .color-container {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 10px;
        border-radius: 4px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr;
      }

      .color-palette {
        display: flex;
        flex-direction: row;
        border: 1px solid rgb(204, 204, 204);
        border-radius: 5px;
        padding: 5px 7px;
        background-color: rgba(255, 255, 255, 0.8);
      }

      .color-box {
        min-width: 40px;
        min-height: 25px;
        position: relative;
      }

      .color-hex {
        position: relative;
        flex: 1 0 25px;
        font-weight: 400;
        font-family: var(--printess-text-font);
      }
      .color-box:last-of-type {
        margin-right: 0;
      }

      .color-picker {
        outline: none;
        border: none;
        min-width: 30px;
      }

      input {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        width: 30px;
        height: 25px;
        -webkit-appearance: none;
        appearance: none;
      }
      input[type=color i] {
        padding: 0;
        border-color: transparent;
        border-radius: 50%;
        color: transparent;
        background-color: transparent;
      }

      .color-box > button {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 9;
        width: 30px;
        height: 25px;
        pointer-events: none;
        border-radius: 4px;
        border: 1px solid rgb(204, 204, 204);
      }
      .color-btn > button {
        height: 30px;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .color-container {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr;
        }        
      }
    `]}constructor(e){super(),this.colorSet={pagebar:"#ffffff",background:"#ffffff"},this.colorSet=e}returnColors(e){this.callback=e}setColors(e,t){const o=this.colorSet;o[e]=t,this.colorSet={...o}}render(){const e=this.colorSet;return x`
      <div class="color-container" style="background: ${e.background};">
        <div class="color-palette">
          <div class="color-box">
            <button class="color-picker" style="background: ${e.pagebar}"></button>
            <input 
              type="color" 
              name="bs-color" 
              id="bc-color-picker" 
              value=${e.pagebar||"#ffffff"} 
              @change=${()=>this.callback&&this.callback(this.colorSet)}
              @input=${e=>this.setColors("pagebar",e.target.value)}
            >
          </div>
          <div class="color-hex" style="margin-left: 10px;">Pagebar Color</div>
        </div>
        <div class="color-palette">
          <div class="color-box">
            <button class="color-picker" style="background: ${e.background}"></button>
            <input 
              type="color" 
              name="bs-color" 
              id="bc-color-picker" 
              value=${e.background||"#ffffff"} 
              @change=${()=>this.callback&&this.callback(this.colorSet)}
              @input=${e=>this.setColors("background",e.target.value)}
            >
          </div>
          <div class="color-hex" style="margin-left: 10px;">Properties Background</div>
        </div>
      </div>
    `}};__decorate$25([e$3({attribute:!0,type:Object})],WcBackgroundColors.prototype,"colorSet",void 0),WcBackgroundColors=__decorate$25([e$4("wc-background-colors")],WcBackgroundColors);var __decorate$24=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcMobileColors=class extends s$1{static get styles(){return[colorPickerStyles,bootstrapStyles,i$4`
      .color-container {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 10px;
        border-radius: 4px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 1fr 1fr;
      }

      .color-palette {
        display: flex;
        flex-direction: row;
        border: 1px solid rgb(204, 204, 204);
        border-radius: 5px;
        padding: 5px 7px;
        background-color: rgba(255, 255, 255, 0.8);
      }

      .color-box {
        min-width: 40px;
        min-height: 25px;
        position: relative;
      }

      .color-hex {
        position: relative;
        flex: 1 0 25px;
        font-weight: 400;
        font-family: var(--printess-text-font);
      }
      .color-box:last-of-type {
        margin-right: 0;
      }

      .color-picker {
        outline: none;
        border: none;
        min-width: 30px;
      }

      input {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        width: 30px;
        height: 25px;
        -webkit-appearance: none;
        appearance: none;
      }
      input[type=color i] {
        padding: 0;
        border-color: transparent;
        border-radius: 50%;
        color: transparent;
        background-color: transparent;
      }

      .color-box > button {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 9;
        width: 30px;
        height: 25px;
        pointer-events: none;
        border-radius: 4px;
        border: 1px solid rgb(204, 204, 204);
      }
      .color-btn > button {
        height: 30px;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .color-container {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr;
        }        
      }
    `]}constructor(e){super(),this.colorSet={panel:"#f8f8f8",buttonText:"#444444"},this.colorSet=e}returnColors(e){this.callback=e}setColors(e,t){const o=this.colorSet;o[e]=t,this.colorSet={...o}}render(){const e=this.colorSet;return x`
      <div class="color-container" style="background-color: ${e.panel};">
        <div class="color-palette">
          <div class="color-box">
            <button class="color-picker" style="background: ${e.buttonText}"></button>
            <input 
              type="color" 
              name="bs-color" 
              id="bc-color-picker" 
              value=${e.buttonText||"#444444"} 
              @change=${()=>this.callback&&this.callback(this.colorSet)}
              @input=${e=>this.setColors("buttonText",e.target.value)}
            >
          </div>
          <div class="color-hex" style="margin-left: 10px;">Button Text Color</div>
        </div>
        <div class="color-palette">
          <div class="color-box">
            <button class="color-picker" style="background: ${e.panel}"></button>
            <input 
              type="color" 
              name="bs-color" 
              id="bc-color-picker" 
              value=${e.panel||"#f8f8f8"} 
              @change=${()=>this.callback&&this.callback(this.colorSet)}
              @input=${e=>this.setColors("panel",e.target.value)}
            >
          </div>
          <div class="color-hex" style="margin-left: 10px;">Background</div>
        </div>
      </div>
    `}};__decorate$24([e$3({attribute:!0,type:Object})],WcMobileColors.prototype,"colorSet",void 0),WcMobileColors=__decorate$24([e$4("wc-mobile-colors")],WcMobileColors);var __decorate$23=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAceEditor=class extends s$1{constructor(e,t,o){super(),this.key="",this.text="",this.mode="json",this.key=e,this.text=t,this.mode=o,this.attachShadow({mode:"open"}),this.shadowRoot?.appendChild(this.getTemplate())}getTemplate(){const e=document.createElement("template");return e.innerHTML='\n      <div class="fileName"></div>\n      <div class="codeSnippet"></div>\n    ',e.content.cloneNode(!0)}connectedCallback(){const e=this.key,t=this.mode,o=this.shadowRoot?.querySelector(".codeSnippet"),r=window.ace.edit(o,{theme:"ace/theme/tomorrow",mode:`ace/mode/${t}`,value:this.text,showPrintMargin:!1,readOnly:!1,fontSize:12,maxLines:30,minLines:"css"===t?10:1,highlightActiveLine:!0,highlightGutterLine:!1});r.on("blur",async function(){const o=r.getValue();if("json"===t)try{JSON.parse(o),sessionStorage.setItem(`translation.${e}`,o)}catch(e){console.error(e),alert(e)}if("css"===t)try{sessionStorage.setItem("customCss",o)}catch(e){console.log(e),alert(e)}}),r.renderer.attachToShadowRoot()}};__decorate$23([e$3({type:String})],WcAceEditor.prototype,"key",void 0),__decorate$23([e$3({type:String})],WcAceEditor.prototype,"text",void 0),__decorate$23([e$3({type:String})],WcAceEditor.prototype,"mode",void 0),WcAceEditor=__decorate$23([e$4("wc-ace-editor")],WcAceEditor);var __decorate$22=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAdvancedStyles=class extends s$1{constructor(){super(...arguments),this.customCss="",this.selectedTheme="default",this.saving=!1}static get styles(){return[subscriptionStyles,bootstrapStyles,i$4`
    .card {
      margin: 0;
    }

    .settings {
      margin: 20px 10px 50px 0;
    }

    button.settings.red {
      display: flex;
      border: none;
      background-color: var(--printess-red);
    }
    button.settings.red:hover {
      background-color: var(--printess-redHover);
    }

    .custom-css {
      background-color: var(--printess-red);
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .folder-button {
      background-color: transparent;
      border: none;
      padding: 2px 7px;
    }

    .pulse {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
      animation: pulse-white 1s cubic-bezier(0.4, 0, 1, 1) infinite;
    }

    @keyframes pulse-white {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
      }

      70% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      }
    }

    .css-icon {
      width: 30px;
      height: 30px;
      padding: 0
    }

    #css-file {
      display: none;
    }

    .spinner,
    .spinner:after {
      border-radius: 50%;
      width: 2em;
      height: 2em;
    }
    .spinner {
      font-size: 6px;
      position: relative;
      border-top: 0.5em solid rgba(255,255,255, 0.2);
      border-right: 0.5em solid rgba(255,255,255, 0.2);
      border-bottom: 0.5em solid rgba(255,255,255, 0.2);
      border-left: 0.5em solid #ffffff;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: load8 1.1s infinite linear;
      animation: load8 1.1s infinite linear;
      margin-right: 10px;
    }
    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async setSelectedTheme(e){this.selectedTheme=e;const t="customCssUrl"+("default"===this.selectedTheme?"":":"+this.selectedTheme);await this.loadUserSettings({keys:[t]})}async uploadCss(e){let t="customCss.css";"default"!==this.selectedTheme&&(t=await sha1hex$1(this.selectedTheme)+"_customCss.css");const o=await api.uploadFile(e,t);if(o){const e=JSON.stringify(o),t="default"===this.selectedTheme?"":":"+this.selectedTheme;this.writeUserSetting({key:"customCssUrl"+t,json:e})}}async loadUserSettings(e){const t=await api.readUserSettings(e);if(t instanceof ServerErrorResponse$2)this.showError(t);else{const e="customCssUrl"+("default"===this.selectedTheme?"":":"+this.selectedTheme);if(t[e]){const o=JSON.parse(t[e]),r=await fetch(o+"?param="+Math.random());let i="";r.ok&&(i=await r.text()),this.customCss=i}else this.customCss=""}}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}connectedCallback(){sessionStorage.clear(),super.connectedCallback();const e="customCssUrl"+("default"===this.selectedTheme?"":":"+this.selectedTheme);this.loadUserSettings({keys:[e]})}loadAceEditor(){const e=Object.keys(sessionStorage).indexOf("customCss")>-1?sessionStorage.getItem("customCss"):this.customCss;return new WcAceEditor("custom",e||"","css")}readFile(){const e=new FileReader;e.onload=e=>this.customCss=e.target.result;const t=this.jsFile;t&&e.readAsText(t.files[0])}getStylesheet(e){const t=new Blob([`${e}`],{type:"text/css"});this.uploadCss(t)}saveCustomCss(){this.saving=!0;const e=Object.keys(sessionStorage).indexOf("customCss")>-1?sessionStorage.getItem("customCss"):this.customCss;this.customCss=e||"",this.getStylesheet(e||""),window.setTimeout(()=>{sessionStorage.removeItem("customCss"),this.saving=!1},2e3)}render(){return x`
      <div class="card red">
        <div class="table-header custom-css">
          <h3 class="title">Custom CSS ${"default"===this.selectedTheme?"for default Theme":"for Theme "+this.selectedTheme}</h3>
          <button class="folder-button">
            <label for="css-file"><wc-icon icon="folder-open-solid" primaryColor="head-toolbar" class="css-icon"></wc-icon></label>
            <input type="file" id="css-file" accept=".css" @input=${this.readFile}>
          </button>
        </div>
        <div class="table-body">${this.loadAceEditor()}</div>
      </div>

      <div style="display: flex">
        <button class="settings red" @click=${this.saveCustomCss}>
          ${this.saving?x`<div class="spinner"></div><span>Saving Styles</span>`:x`<span>Save Advanced Styles ${"default"===this.selectedTheme?"for default Theme":"for Theme "+this.selectedTheme}</span>`}
        </button>
      </div>
    `}};__decorate$22([e$3({type:String})],WcAdvancedStyles.prototype,"customCss",void 0),__decorate$22([e$3({type:String})],WcAdvancedStyles.prototype,"selectedTheme",void 0),__decorate$22([e$3({type:Boolean})],WcAdvancedStyles.prototype,"saving",void 0),__decorate$22([i$1("#css-file")],WcAdvancedStyles.prototype,"jsFile",void 0),WcAdvancedStyles=__decorate$22([e$4("wc-advanced-styles")],WcAdvancedStyles);var __decorate$21=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcBootstrapStyles=class extends s$1{static get styles(){return[subscriptionStyles,bootstrapStyles,i$4`
    .card {
      margin: 0;
    }

    select {
      font-size: 12px;
      min-width: 100px;
      margin-left: 10px;
      padding: 2px 15px;
      border-radius: 4px;
      font-weight: 400;
      text-align: center;
      border: 1px solid #ccc;
      font-family: var(--printess-text-font);
      background-color: var(--printess-lightpink);
    }

    .settings {
      margin: 20px 10px 70px 0;
    }

    .button-wrapper {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin: 10px 0 30px 0px;
    }

    .card-input {
      background-color: rgba(208, 4, 155, 0.04);
    }

    dl {
      grid-template-columns: 160px calc(100% - 160px);
    }

    dt {
      font-size: 14px;
    }

    dd {
      position: relative;
    }

    .dropdown {
      position: relative;
      height: 21px;
      line-height: 21px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .dropdown-container {
      clear: both;
      position: absolute;
      left: 0;
      top: 46px;
      width: calc(100% - 22px);
      height: 0px;
      z-index: 999;
      border-radius: 4px;
      max-height: 40vh;
      overflow-y: auto;
      border: 1px solid #ccc;
      transition: height .4s ease, visibility .3s ease;
      background-color: white;
    }

    .version-dropdown {
      overflow: hidden;
      left: unset;
      right: 20px;
      top: 46px;
      width: 140px;
    }

    .dropdown-item {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      font-size: 14px;
    }

    .dropdown-item:hover {
      background-color: var(--printess-pink);
      color: white;
    }

    .color-btn {
      min-width: 70px;
      min-height: 25px;
      margin-right: 10px;
    }

    .custom-css {
      background-color: var(--printess-blue);
      padding: 0 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .css-icon {
      width: 30px;
      height: 30px;
      padding: 0
    }

    #css-file {
      display: none;
    }

    @media (max-width: ${config.mobileDeviceWidth}px) {
      dl {
        grid-template-columns: 1fr;
      }

      dt {
        font-size: 12px;
      }

      dd {
        grid-column: unset;
      }

      .table-header {
        padding: 0 10px;
      }

      .dropdown-container {
        left: 10px;
      }

      .dropdown-item {
        flex-direction: column;
        align-items: flex-start;
      }

    }

    .menu {
      margin-right: 10px;
      background-color: var(--printess-lightpink);
    }

    .menu-entry {
      font-family: var(--printess-header-font);
      padding: 10px 20px 10px 10px;
      color: rgb(85, 85, 85);
      border-bottom: 1px solid var(--printess-pink);
      font-size: 14px;
    }

    .menu-entry:hover {
      outline: 1px solid var(--printess-lightpink);
      background-color: var(--printess-pinkHover);
      color: white;
    }
    .menu-entry.selected:hover {
      outline: none;
    }

    .selected {
      background-color: var(--printess-pink);
      color: white;
    }
    .selected:first-child {
      border-top: 1px solid var(--printess-lightpink);
    }
  `]}constructor(){super(),this.showAdvancedStyles=!1,this.showDropdown="none",this.selectedTheme="default",this.themeNames=["default"],this.showPrintess=!1,this.resetStyles=!1,this.backgroundColors={pagebar:"#ffffff",background:"#ffffff"},this.mobileColors={panel:"#f8f8f8",buttonText:"#444444"},this.toolbarColors={font:"#ffffff",background:"#6c757d",active:"#525960"},this.bootstrapStyles={theme:"default",sansserif:"system-ui",monospace:"SFMono-Regular",colors:{primary:{font:"#ffffff",btn:"#007bff",hover:"#0b5ed7"},secondary:{font:"#ffffff",btn:"#6c757d",hover:"#5c636a"},success:{font:"#ffffff",btn:"#198754",hover:"#157347"},danger:{font:"#ffffff",btn:"#dc3545",hover:"#bb2d3b"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"}}},this.as=new WcAdvancedStyles,this.as.style.width="100%"}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async uploadCss(e){let t="bootstrapCss.css";"default"!==this.selectedTheme&&(t=await sha1hex$1(this.selectedTheme)+"_bootstrapCss.css"),await api.uploadFile(e,t)}async loadThemeNames(){const e=await api.readUserSettings({keys:["userThemes"]});if(e instanceof ServerErrorResponse$2)this.showError(e);else if(e.userThemes){const t=JSON.parse(e.userThemes);Array.isArray(t)&&(t.includes("default")?this.themeNames=t:this.themeNames=["default",...t])}}async saveThemeNames(){await api.writeUserSetting({key:"userThemes",json:JSON.stringify(this.themeNames)})}setDefaultBootstrapStyle(){this.bootstrapStyles={theme:"default",sansserif:"system-ui",monospace:"SFMono-Regular",colors:{primary:{font:"#ffffff",btn:"#007bff",hover:"#0b5ed7"},secondary:{font:"#ffffff",btn:"#6c757d",hover:"#5c636a"},success:{font:"#ffffff",btn:"#198754",hover:"#157347"},danger:{font:"#ffffff",btn:"#dc3545",hover:"#bb2d3b"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"}}}}setDefaultBackgroundColors(){this.backgroundColors={pagebar:"#ffffff",background:"#ffffff"}}setDefaultToolbarColors(){this.toolbarColors={font:"#ffffff",background:"#6c757d",active:"#525960"}}setDefaultMobileColors(){this.mobileColors={panel:"#f8f8f8",buttonText:"#444444"}}async loadUserSettings(e){const t=await api.readUserSettings(e);if(t instanceof ServerErrorResponse$2)this.showError(t);else{const e="default"===this.selectedTheme?"":":"+this.selectedTheme;t["bootstrapStyles"+e]?(this.bootstrapStyles=JSON.parse(t["bootstrapStyles"+e]),this.bootstrapStyles.colors.success||(this.bootstrapStyles.colors={primary:this.bootstrapStyles.colors.primary,secondary:this.bootstrapStyles.colors.secondary,success:{font:"#ffffff",btn:"#198754",hover:"#157347"},danger:this.bootstrapStyles.colors.danger,light:this.bootstrapStyles.colors.light})):this.setDefaultBootstrapStyle(),t["backgroundColors"+e]?this.backgroundColors=JSON.parse(t["backgroundColors"+e]):this.setDefaultBackgroundColors(),t["toolbarColors"+e]?this.toolbarColors=JSON.parse(t["toolbarColors"+e]):this.setDefaultToolbarColors(),t["mobileColors"+e]?this.mobileColors=JSON.parse(t["mobileColors"+e]):this.setDefaultMobileColors()}}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}connectedCallback(){sessionStorage.clear(),super.connectedCallback(),this.loadUserSettings({keys:["bootstrapStyles","backgroundColors","toolbarColors","mobileColors"]}),this.loadThemeNames()}getBootstrapStyles(e){this.callback=e}reloadEditor(){this.callback&&this.callback(this.selectedTheme)}toggleDropdown(e){this.showDropdown===e?this.showDropdown="none":this.showDropdown=e}setBsStyle(e){this.bootstrapStyles.theme=e,this.bootstrapStyles.sansserif=bsStyles[e].sansserif||this.bootstrapStyles.sansserif,this.bootstrapStyles.colors=bsThemes[e],this.backgroundColors={pagebar:bsStyles[e].background||"#ffffff",background:bsStyles[e].background||"#ffffff"},this.showDropdown="none"}setSansserifFont(e){this.bootstrapStyles.sansserif=e,this.showDropdown="none"}getComplexColors(){const{theme:e,sansserif:t,colors:o}=this.bootstrapStyles,r=new WcColorPickerComplex(e,t,o);return r.style.width="calc(100% - 22px)",r.returnColors(e=>this.bootstrapStyles.colors=e),r}getBackgroundColors(){const e=new WcBackgroundColors(this.backgroundColors);return e.style.width="calc(100% - 22px)",e.returnColors(e=>this.backgroundColors=e),e}getToolbarColors(){const e=new WcToolbarColors(this.toolbarColors);return e.style.width="calc(100% - 22px)",e.returnColors(e=>this.toolbarColors=e),e}getMobileColors(){const e=new WcMobileColors(this.mobileColors);return e.style.width="calc(100% - 22px)",e.returnColors(e=>this.mobileColors=e),e}async saveStylesheet(){const e=this.bootstrapStyles.theme,t=`\n      :root {\n        --bs-primary: ${this.bootstrapStyles.colors.primary.btn};\n        --bs-secondary: ${this.bootstrapStyles.colors.secondary.btn};\n        --bs-success: ${this.bootstrapStyles.colors.success.btn};\n        --bs-danger: ${this.bootstrapStyles.colors.danger.btn};\n        --bs-light: ${this.bootstrapStyles.colors.light.btn};\n        --bs-font-sans-serif: ${this.bootstrapStyles.sansserif};\n        --bs-body-bg: ${this.backgroundColors.background};\n\n        --mobile-button-color: ${this.mobileColors.buttonText}!important;\n        --mobile-panel-background: ${this.mobileColors.panel}!important;\n\n      }\n      .page-link {\n        color: var(--bs-primary);\n        background-color: ${this.bootstrapStyles.colors.primary.font};\n      }\n      .page-link:hover {\n        color: ${this.bootstrapStyles.colors.primary.hover};\n      }\n      .btn-primary, .page-item.active .page-link {\n        color: ${this.bootstrapStyles.colors.primary.font};\n        background-color: var(--bs-primary);\n        border-color: var(--bs-primary);\n      }\n      .btn-secondary {\n        color: ${this.bootstrapStyles.colors.secondary.font};\n        background-color: var(--bs-secondary);\n        border-color: var(--bs-secondary);\n      }\n      .btn-success {\n        color: ${this.bootstrapStyles.colors.success.font};\n        background-color: var(--bs-success);\n        border-color: var(--bs-success);\n      }\n      .btn-danger {\n        color: ${this.bootstrapStyles.colors.danger.font};\n        background-color: var(--bs-danger);\n        border-color: var(--bs-danger);\n      }\n      .btn-light {\n        color: ${this.bootstrapStyles.colors.light.font};\n        background-color: var(--bs-light);\n        border-color: var(--bs-light);\n      }\n\n      .btn-primary:hover {\n        color: ${this.bootstrapStyles.colors.primary.font};\n        background-color: ${this.bootstrapStyles.colors.primary.hover};\n        border-color: ${this.bootstrapStyles.colors.primary.hover};\n      }\n      .btn-secondary:hover {\n        color: ${this.bootstrapStyles.colors.secondary.font};\n        background-color: ${this.bootstrapStyles.colors.secondary.hover};\n        border-color: ${this.bootstrapStyles.colors.secondary.hover};\n      }\n      .btn-success:hover {\n        color: ${this.bootstrapStyles.colors.success.font};\n        background-color: ${this.bootstrapStyles.colors.success.hover};\n        border-color: ${this.bootstrapStyles.colors.success.hover};\n      }\n      .btn-danger:hover {\n        color: ${this.bootstrapStyles.colors.danger.font};\n        background-color: ${this.bootstrapStyles.colors.danger.hover};\n        border-color: ${this.bootstrapStyles.colors.danger.hover};\n      }\n      .btn-light:hover {\n        color: ${this.bootstrapStyles.colors.light.font};\n        background-color: ${this.bootstrapStyles.colors.light.hover};\n        border-color: ${this.bootstrapStyles.colors.light.hover};\n      }\n\n      .btn-outline-primary {\n        color: var(--bs-primary);\n        border-color: var(--bs-primary);\n      }\n      .btn-outline-secondary {\n        color: var(--bs-secondary);\n        border-color: var(--bs-secondary);\n      }\n      .btn-outline-success {\n        color: var(--bs-success);\n        border-color: var(--bs-success);\n      }\n      .btn-outline-danger {\n        color: var(--bs-danger);\n        border-color: var(--bs-danger);\n      }\n      .btn-outline-light {\n        color: var(--bs-light);\n        border-color: var(--bs-light);\n      }\n\n      .btn-outline-primary:hover {\n        color: ${this.bootstrapStyles.colors.primary.font};\n        background-color: var(--bs-primary);\n        border-color: var(--bs-primary);\n      }\n      .btn-outline-secondary:hover {\n        color: ${this.bootstrapStyles.colors.secondary.font};\n        background-color: var(--bs-secondary);\n        border-color: var(--bs-secondary);\n      }\n      .btn-outline-success:hover {\n        color: ${this.bootstrapStyles.colors.success.font};\n        background-color: var(--bs-success);\n        border-color: var(--bs-success);\n      }\n      .btn-outline-danger:hover {\n        color: ${this.bootstrapStyles.colors.danger.font};\n        background-color: var(--bs-danger);\n        border-color: var(--bs-danger);\n      }\n      .btn-outline-light:hover {\n        color: ${this.bootstrapStyles.colors.light.font};\n        background-color: var(--bs-light);\n        border-color: var(--bs-light);\n      }\n\n      .bg-primary {\n        background-color: var(--bs-primary)!important;\n      }\n      .bg-secondary {\n        background-color: var(--bs-secondary)!important;\n      }\n      .bg-success {\n        background-color: var(--bs-success)!important;\n      }\n      .bg-danger {\n        background-color: var(--bs-danger)!important;\n      }\n      .bg-light {\n        background-color: var(--bs-light)!important;\n      }\n\n      .border-primary {\n        border-color: var(--bs-primary) !important;\n      }\n      .border-secondary {\n        border-color: var(--bs-secondary) !important;\n      }\n      .border-success {\n        border-color: var(--bs-success) !important;\n      }\n      .border-danger {\n        border-color: var(--bs-danger) !important;\n      }\n      .border-light {\n        border-color: var(--bs-light) !important;\n      }\n\n      .text-primary {\n        color: var(--bs-primary)!important;\n      }\n      .text-secondary {\n        color: var(--bs-seondary)!important;\n      }\n      .text-success {\n        color: var(--bs-success)!important;\n      }\n      .text-danger {\n        color: var(--bs-danger)!important;\n      }\n      .text-light {\n        color: var(--bs-light)!important;\n      }\n\n      #desktop-pagebar, .desktop-title-or-steps {\n        background-color: ${this.backgroundColors.pagebar}!important;\n      }\n\n      ${"cyborg"===e||"superhero"===e?"\n        .printess-font-dropdown img {\n          filter: invert(1);\n        }\n      ":""}\n\n      .tabs-navigation {\n        background-color: ${this.toolbarColors.background}!important;\n      }\n\n      .tabs-navigation li.nav-item {\n        color: ${this.toolbarColors.font}!important;\n      }\n\n      .tabs-navigation li.nav-item.selected {\n        background-color: ${this.toolbarColors.active}!important;\n        color: ${this.toolbarColors.font}!important;\n      }\n\n      .tabs-navigation a.nav-link {\n        color: ${this.toolbarColors.font}!important;\n      }\n\n      .tabs-navigation li.nav-item.selected a.nav-link {\n        color: ${this.toolbarColors.font}!important;\n      }\n    `;if("default"!==this.bootstrapStyles.theme){const e=await fetch(`https://editor.printess.com/v/nightly/printess-editor/bootstrap-themes/${this.bootstrapStyles.theme}.css`);if(!e.ok){const e="Cannot download bootstrap theme.";throw alert(e),new Error(e)}const o=await e.text(),r=new Blob([`\n            @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Neucha&family=Noto+Sans:wght@400;700&family=Nunito:wght@400;700&family=Roboto:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Ubuntu:wght@400;700&display=swap');\n            ${o}\n            ${t}\n          `],{type:"text/css"});await this.uploadCss(r)}else{const e=new Blob([`\n        @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Neucha&family=Noto+Sans:wght@400;700&family=Nunito:wght@400;700&family=Roboto:wght@400;700&family=Source+Sans+Pro:wght@400;700&family=Ubuntu:wght@400;700&display=swap');\n        ${t}\n      `],{type:"text/css"});await this.uploadCss(e)}}async saveBsStyles(){const e=[],t="default"===this.selectedTheme?"":":"+this.selectedTheme;e.push(this.saveStylesheet()),e.push(this.writeUserSetting({key:"bootstrapStyles"+t,json:JSON.stringify(this.bootstrapStyles)})),e.push(this.writeUserSetting({key:"backgroundColors"+t,json:JSON.stringify(this.backgroundColors)})),e.push(this.writeUserSetting({key:"toolbarColors"+t,json:JSON.stringify(this.toolbarColors)})),e.push(this.writeUserSetting({key:"mobileColors"+t,json:JSON.stringify(this.mobileColors)})),await Promise.all(e),this.resetStyles||this.reloadEditor()}resetBootstrapStyles(){const e=new WcDialogResetBootstrapStyles;return e.showDialog(e=>{e&&(this.resetStyles=!0,this.bootstrapStyles={theme:"default",sansserif:"system-ui",monospace:"SFMono-Regular",colors:{primary:{font:"#ffffff",btn:"#007bff",hover:"#0b5ed7"},secondary:{font:"#ffffff",btn:"#6c757d",hover:"#5c636a"},success:{font:"#ffffff",btn:"#198754",hover:"#157347"},danger:{font:"#ffffff",btn:"#dc3545",hover:"#bb2d3b"},light:{font:"#000000",btn:"#f8f9fa",hover:"#f9fafb"}}},this.backgroundColors={pagebar:"#ffffff",background:"#ffffff"},this.toolbarColors={font:"#ffffff",background:"#6c757d",active:"#525960"},this.mobileColors={panel:"#f8f8f8",buttonText:"#444444"},this.saveBsStyles())}),e}setSelectedTheme(e){this.selectedTheme=e,this.as.setSelectedTheme(e);const t="default"===this.selectedTheme?"":":"+this.selectedTheme;this.loadUserSettings({keys:["bootstrapStyles"+t,"backgroundColors"+t,"toolbarColors"+t,"mobileColors"+t]}),this.dispatchEvent(new CustomEvent("theme-selected",{detail:e}))}async createNewTheme(){const e=prompt("Please enter new theme name.","theme1");e&&(this.themeNames=[...this.themeNames,e],await this.saveThemeNames())}async deleteSelectedTheme(){if("default"!==this.selectedTheme){if("yes"===prompt("Do you really want to delete the theme '"+this.selectedTheme+"'? Enter yes to delete.","no")){const e=":"+this.selectedTheme,t=[],o=this.themeNames.filter(e=>e!==this.selectedTheme);t.push(api.deleteUserSetting({key:"bootstrapStyles"+e})),t.push(api.deleteUserSetting({key:"backgroundColors"+e})),t.push(api.deleteUserSetting({key:"toolbarColors"+e})),t.push(api.deleteUserSetting({key:"mobileColors"+e})),t.push(api.writeUserSetting({key:"userThemes",json:JSON.stringify(o)})),await Promise.all(t),this.themeNames=o,this.selectedTheme="default"}}}render(){const{theme:e,sansserif:t}=this.bootstrapStyles;return x`

      <div class="settings-container" style="margin-top: 30px;">

        <div class="card pink">
          <div class="table-header custom-css">
            <h3 class="title">Bootstrap Themes</h3>
            <div>
              ${config.claims.get("plan")?.has("large")&&config.isMobile?x`
                <select @change=${e=>this.setSelectedTheme(e.target.value)}>
                  ${c(this.themeNames,e=>e,e=>x`
                    <option value=${e} .selected=${this.selectedTheme===e}>${e}</option>
                  `)}
                </select>
              `:""}
            </div>
            <!-- <wc-icon icon="undo-arrow" primaryColor="toolbar" style="width: 20px; height: 25px; padding: 0;" @click=${this.resetBootstrapStyles}></wc-icon> -->
          </div>
          <div class="table-body">
            <div style="display: flex;">
              ${config.claims.get("plan")?.has("large")&&!config.isMobile?x`
              <div class="menu" style="min-width: 200px;">
                ${c(this.themeNames,e=>e,e=>x`
                  <div class="menu-entry ${o({selected:this.selectedTheme===e})}" @click=${()=>this.setSelectedTheme(e)}>
                    ${e}
                  </div>
                `)}

                <div  class="menu-entry" @click=${this.createNewTheme}>
                  + Add New
                </div>
              </div>
              `:""}

              <dl style="width:100%">
                <dt>Stylesheet:</dt>
                <dd>
                  <div class="dropdown card-input" @click=${()=>this.toggleDropdown("stylesheet")}>
                    <span style="text-transform: capitalize;">${e}</span>
                    <wc-icon icon="angle-down-light" primaryColor="gray" style="width: 30px; height: 30px"></wc-icon>
                  </div>
                  <div class="dropdown-container" style="height: ${"stylesheet"===this.showDropdown?"28vh":"0px"}; visibility: ${"stylesheet"===this.showDropdown?"visible":"hidden"}">
                    ${Object.entries(bsStyles).map(e=>{const t=e[0];return x`
                      <div class="dropdown-item ${t}" @click=${()=>this.setBsStyle(t)} style="font-size: 18px; ${config.isMobile?"width: 100%;":""}">
                        <span style="text-transform: capitalize;font-family: ${e[1].font} !important">${t}</span>
                        <div style="display: flex; ${config.isMobile?"width: calc(100% - 30px);":""}">
                          <button class="color-btn btn-primary ${t}-btn"></button>
                          <button class="color-btn btn-secondary ${t}-btn"></button>
                          <button class="color-btn btn-danger ${t}-btn"></button>
                          <button class="color-btn btn-light ${t}-btn"></button>
                        </div>
                      </div>
                    `})}
                  </div>
                </dd>
                <dt>Font Family:</dt>
                <dd>
                  <div class="dropdown card-input" @click=${()=>this.toggleDropdown("sansSerif")}>
                    <span style="font-family: ${t}, sans-serif">${t.replace("'","").replace("'","")}</span>
                    <wc-icon icon="angle-down-light" primaryColor="gray" style="width: 30px; height: 30px"></wc-icon>
                  </div>
                  <div class="dropdown-container" style="height: ${"sansSerif"===this.showDropdown?"28vh":"0px"}; visibility: ${"sansSerif"===this.showDropdown?"visible":"hidden"}">
                    ${sansserifFonts.map(e=>x`
                      <div class="dropdown-item" style="font-family: ${e}, sans-serif;" @click=${()=>this.setSansserifFont(e)}>
                        ${e.replace("'","").replace("'","")}
                      </div>
                    `)}
                  </div>
                </dd>
                <dt>Custom Font Family:</dt>
                <dd style="justify-content: initial">
                  <div class="role-input">
                    <input type="search"
                      class="card-input"
                      value=${sansserifFonts.filter(e=>e==t).length?"":t}
                      @input=${e=>this.setSansserifFont(e.target.value)}
                    >
                  </div>
                  <span style="margin-left: 10px;">You need to provide the font family import manually in the "Advanced Styles" css to make it work.</span>
                </dd>

                <dt style="display: flex;flex-direction: column;align-items: flex-start;">
                ${config.isMobile?x`
                  Color Selection:
                `:x`
                  <div style="margin: 60px 0 8px;">Font Color:</div>
                  <div style="margin: 8px 0;">Main Color:</div>
                  <div style="margin: 8px 0;">Hover Color:</div>
                `}
                </dt>
                <dd>${this.getComplexColors()}</dd>
                <dt>Background:</dt>
                <dd>${this.getBackgroundColors()}</dd>
                <dt>Mobile Colors:</dt>
                <dd>${this.getMobileColors()}</dd>
                <dt>Toolbar:</dt>
                <dd>${this.getToolbarColors()}</dd>

                <dt>
                  <wc-icon
                  style="padding: 0;"
                  primaryColor="gray"
                  icon=${this.showAdvancedStyles?"minus-square":"plus-square"}
                  class="collapse-icon"
                  @click=${()=>this.showAdvancedStyles=!this.showAdvancedStyles}>
                </wc-icon> Custom CSS</dt>
                <dd>${this.showAdvancedStyles?this.as:""}</dd>




              </dl>


            </div>

          </div>

        </div>

        <div class="button-wrapper">
          <wc-button caption="Save & Preview" size="md" color="pink" @click=${this.saveBsStyles}></wc-button>
          <wc-button caption="Reset Styles" size="md" color="pink" @click=${this.resetBootstrapStyles}></wc-button>
          ${"default"===this.selectedTheme?"":x`
            <wc-button caption="Delete Theme '${this.selectedTheme}'" size="md" color="pink" @click=${this.deleteSelectedTheme}></wc-button>
          `}
        </div>

      </div>
    `}};__decorate$21([e$3({type:Boolean})],WcBootstrapStyles.prototype,"showAdvancedStyles",void 0),__decorate$21([e$3({type:String})],WcBootstrapStyles.prototype,"showDropdown",void 0),__decorate$21([e$3({type:String})],WcBootstrapStyles.prototype,"selectedTheme",void 0),__decorate$21([e$3({type:Array})],WcBootstrapStyles.prototype,"themeNames",void 0),__decorate$21([e$3({type:Boolean})],WcBootstrapStyles.prototype,"showPrintess",void 0),__decorate$21([e$3({type:Boolean})],WcBootstrapStyles.prototype,"resetStyles",void 0),__decorate$21([e$3({type:Object})],WcBootstrapStyles.prototype,"backgroundColors",void 0),__decorate$21([e$3({type:Object})],WcBootstrapStyles.prototype,"mobileColors",void 0),__decorate$21([e$3({type:Object})],WcBootstrapStyles.prototype,"toolbarColors",void 0),__decorate$21([e$3({type:Object})],WcBootstrapStyles.prototype,"bootstrapStyles",void 0),WcBootstrapStyles=__decorate$21([e$4("wc-bootstrap-styles")],WcBootstrapStyles);var __decorate$20=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProgress=class extends s$1{constructor(){super(...arguments),this.width=0,this.i=0}connectedCallback(){super.connectedCallback();const e=()=>{this.width>=100?(clearInterval(t),this.i=0):this.width++},t=setInterval(e,10);e()}render(){return x`
      <div style="position: absolute; bottom: 0; left: 0; background: var(--printess-green); height: 20px; width: ${this.width}%"></div>
    `}};__decorate$20([e$3({type:Number})],WcProgress.prototype,"width",void 0),__decorate$20([e$3({type:Number})],WcProgress.prototype,"i",void 0),WcProgress=__decorate$20([e$4("wc-progress")],WcProgress);let WcFileUploader=class extends s$1{static get styles(){return[userProfileStyles,settingsStyles,i$4`
      .card.green {
        background: transparent;
        margin-bottom: 0;
      }

      .settings.green {
        display: flex;
        margin-right: 10px;
      }

      .table-body {
        display: flex;
        padding: 10px;
      }

      .upload-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        border: 2px dashed var(--printess-green);
        min-height: 200px;
      }

      .img-uploaded {
        position: relative;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgb(50, 50, 50);
        min-height: 250px;
      }

      .upgrade-plan-info {
        color: #ccc;
        font-size: 20px;
        margin: 50px;
        text-align: center;
      }

      .link-to-plan {
        text-decoration: none;
        color: var(--printess-pink);
        cursor: pointer;
      }

      .delete-icon {
        position: absolute;
        top: 15px;
        right: 15px;
        height: 25px;
        cursor: pointer;
        padding: 0;
      }

      .upload-icon {
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
      }

      .img-wrapper {
        width: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
      }

      input[type="file"] {
        display: none;
      }

      .button-wrapper {
        display: flex;
        gap: 10px;
        margin: 10px 0 30px 0;
      }

      .upload-label {
        color: var(--printess-green);
        font-weight: 700;
        cursor: pointer
      }

      .custom-file-upload {
        background: var(--printess-green);
        padding: 7px 20px;
        border: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-family: var(--printess-button-font);
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
      }

      button.settings.green {
        border: none;
      }

      .custom-file-upload:hover, button.settings.green:hover {
        background: var(--printess-greenHover);
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      .spinner.big {
        font-size: 26px;
        border-color: rgb(160 204 0 / 30%) rgb(160 204 0 / 30%) rgb(160 204 0 / 30%) rgb(160 204 0);
        margin: 0 10px 1px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .img-uploaded {
          max-height: 300px;
        }
        .custom-file-upload {
          font-size: 12px;
          padding: 4px 10px;
        }
        .upgrade-plan-info {
          font-size: 16px!important;
          margin: 20px;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async uploadLogo(e){const t=await api.uploadFile(e,"userLogo"),o=-1===e.type.indexOf("gif");if(t){const e={imageUrl:t+"?param="+Math.floor(100*Math.random()),showAnimation:o},r=JSON.stringify(e);if(this.writeUserSetting({key:"imageUpload",json:r}),window.parent)try{window.parent.postMessage({cmd:"newStartupLogo",imageUrl:t},"*")}catch(e){console.error(e)}this.showProgress=!0,window.setTimeout(()=>{this.loadingAnimation={imageUrl:t+"?param="+Math.floor(100*Math.random()),showAnimation:o},this.setLoadingAnimation(),this.uploading=!1},2e3),window.setTimeout(()=>this.showProgress=!1,2200)}}async deleteLogo(){const e=await api.deleteFile({name:"userLogo"});if(e instanceof ServerErrorResponse$2)this.showError(e);else{if(this.loadingAnimation={imageUrl:"https://editor.printess.com/v/nightly/printess-logo.svg",showAnimation:!0},window.parent)try{window.parent.postMessage({cmd:"newStartupLogo",imageUrl:""},"*")}catch(e){console.error(e)}this.callback&&this.callback({showAnimation:!0,imageUrl:""})}}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async readUserSettings(e){const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):(t.editorOptions&&(this.editorOptions=JSON.parse(t.editorOptions)),t.imageUpload&&(this.loadingAnimation=JSON.parse(t.imageUpload)))}async deleteUserSetting(){const e=await api.deleteUserSetting({key:"imageUpload"});e instanceof ServerErrorResponse$2?this.showError(e):this.deleteLogo()}connectedCallback(){super.connectedCallback(),this.readUserSettings({keys:["editorOptions","imageUpload"]}),this.renderForShopify="Shopify"==currentUser.displayName}constructor(e){super(),this.plan="",this.uploading=!1,this.showProgress=!1,this.editorOptions={name:"",version:"draft",editor:"nightly",mode:"buyer"},this.loadingAnimation={showAnimation:!0,imageUrl:""},this.renderForShopify=!1,this.plan=e}getFileUploader(e){this.callback=e}setLoadingAnimation(){this.callback&&this.callback(this.loadingAnimation)}readFile(e){const t=e?.name.substring(e.name.lastIndexOf("."))||"";if([".jpg",".jpeg",".png",".gif",".webp"].indexOf(t)<0)return void alert("File type not supported, please choose a different file.");this.uploading=!0;const o=new FileReader;o.onload=async()=>{await this.uploadLogo(e)},o.readAsDataURL(e)}uploadFile(e){if(e.preventDefault(),e.target){const t=e.target.files;if(t){const e=t[0];this.readFile(e)}}}dragoverHandler(e){e.preventDefault(),e.stopPropagation(),this.uploadWrapper.style.background="var(--printess-lightgreen)"}dropHandler(e){if(e.preventDefault(),e.dataTransfer&&e.dataTransfer.files.length){const t=e.dataTransfer.files[0];this.readFile(t)}this.dragleaveHandler()}dragleaveHandler(){this.uploadWrapper.style.background="transparent"}getUploadedImage(){return new WcUploadedImage(this.loadingAnimation.imageUrl||"https://editor.printess.com/v/nightly/printess-logo.svg")}copyToClipboard(){navigator.clipboard.writeText(`https://editor.printess.com/${"current stable version"===this.editorOptions.editor?"":`v/${this.editorOptions.editor}/`}printess-editor/embed.html#${encodeURIComponent(JSON.stringify(this.loadingAnimation))}`).then(function(){},function(){})}render(){return x`
      <div class="card green">
        <div class="table-header">
          <h3 class="title">
            <div class="plan-name">Logo</div>
          </h3>
        </div>
        <div class="table-body">
          <div class="img-uploaded">
            ${"Pay as you go"===this.plan||"Small"===this.plan?x`
              <p class="upgrade-plan-info">
                If you would like to add your own Logo to the Loading Animation you first need to upgrade your account to a higher plan
                <span @click=${()=>location.hash="subscription"} class="link-to-plan">here</span>.
              </p>
              <!-- <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
                <p style="color: #ccc; font-size: 20px;">To Upload a Logo for the Loading Animation you need to upgrade to a higher plan!</p>
                <p style="color: #ccc; font-size: 20px;">You can change your plan here.</p>
              </div> -->
            `:x`
              ${this.getUploadedImage()}
              ${this.loadingAnimation.showAnimation||!this.loadingAnimation.imageUrl?x`
                  <svg style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; max-width: 100%; height: 80%;" xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2" viewBox="0 0 1249.87 723.22"><defs><style>.cls-1,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-19,.cls-2,.cls-20,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:#fff;}.cls-1{opacity:0.56;}.cls-3{opacity:0.87;}.cls-4{opacity:0.2;}.cls-5{opacity:0.49;}.cls-6{opacity:0.57;}.cls-7{opacity:0.18;}.cls-8{opacity:0.77;}.cls-9{opacity:0.38;}.cls-10{opacity:0.53;}.cls-11{opacity:0.69;}.cls-12{opacity:0.32;}.cls-13{opacity:0.16;}.cls-14{opacity:0.4;}.cls-15{opacity:0.88;}.cls-16{opacity:0.8;}.cls-17{opacity:0.74;}.cls-18{opacity:0.42;}.cls-19{opacity:0.12;}.cls-20{opacity:0.15;}</style></defs><polygon class="cls-1" points="485.24 421.8 490.31 432.07 501.64 433.71 493.44 441.7 495.38 452.99 485.24 447.66 475.11 452.99 477.04 441.7 468.85 433.71 480.18 432.07 485.24 421.8"/><polygon class="cls-2" points="596.56 353.34 599.05 358.4 604.63 359.21 600.59 363.14 601.55 368.7 596.56 366.08 591.57 368.7 592.52 363.14 588.48 359.21 594.06 358.4 596.56 353.34"/><polygon class="cls-3" points="512.68 380.3 521.77 384.42 530.33 379.27 529.22 389.19 536.76 395.73 526.98 397.74 523.09 406.94 518.16 398.26 508.21 397.4 514.94 390.03 512.68 380.3"/><polygon class="cls-2" points="604.63 241.36 608.15 248.49 616.02 249.63 610.33 255.18 611.67 263.02 604.63 259.32 597.59 263.02 598.94 255.18 593.24 249.63 601.11 248.49 604.63 241.36"/><polygon class="cls-4" points="974.56 685.92 952.22 697.98 949.49 723.22 931.12 705.69 906.27 710.89 917.26 688.01 904.64 665.98 929.8 669.36 946.85 650.55 951.41 675.52 974.56 685.92"/><polygon class="cls-5" points="740.52 572.18 734.67 564.21 724.8 564.51 730.57 556.49 727.23 547.19 736.64 550.2 744.46 544.15 744.5 554.03 752.67 559.59 743.29 562.69 740.52 572.18"/><polygon class="cls-6" points="704.32 454.94 697.15 453.36 691.8 458.37 691.08 451.07 684.67 447.53 691.38 444.59 692.77 437.39 697.64 442.88 704.92 441.97 701.21 448.3 704.32 454.94"/><polygon class="cls-1" points="804.65 441.15 797.02 433.36 786.29 435.23 791.34 425.57 786.24 415.94 796.99 417.76 804.57 409.93 806.17 420.71 815.95 425.51 806.19 430.36 804.65 441.15"/><polygon class="cls-7" points="935.35 482.71 921.52 474.09 906.59 480.6 910.51 464.79 899.7 452.6 915.95 451.44 924.21 437.39 930.34 452.49 946.24 456 933.78 466.49 935.35 482.71"/><polygon class="cls-8" points="384.21 244.82 374.64 242.24 367.08 248.67 366.58 238.76 358.14 233.56 367.4 230.03 369.74 220.39 375.96 228.1 385.85 227.35 380.44 235.66 384.21 244.82"/><polygon class="cls-2" points="625.75 426.15 619.7 422.68 613.41 425.69 614.84 418.87 610.03 413.82 616.97 413.07 620.28 406.94 623.13 413.3 629.99 414.56 624.82 419.24 625.75 426.15"/><polygon class="cls-2" points="643.11 368.7 642.39 363.37 637.59 360.94 642.44 358.61 643.27 353.29 646.99 357.18 652.3 356.33 649.75 361.07 652.2 365.86 646.9 364.89 643.11 368.7"/><polygon class="cls-2" points="480.97 362.48 475.41 358.99 469.38 361.58 470.99 355.22 466.66 350.28 473.21 349.85 476.56 344.2 479 350.3 485.41 351.74 480.36 355.95 480.97 362.48"/><polygon class="cls-2" points="801.1 359.89 798.09 353.79 791.35 352.81 796.22 348.06 795.07 341.36 801.1 344.52 807.12 341.36 805.97 348.06 810.84 352.81 804.11 353.79 801.1 359.89"/><polygon class="cls-8" points="818.93 250.8 811.49 242.19 800.18 243.44 806.07 233.7 801.38 223.33 812.47 225.92 820.88 218.26 821.84 229.6 831.73 235.24 821.24 239.65 818.93 250.8"/><polygon class="cls-9" points="389.75 501.36 369.44 504.93 360.86 523.69 351.18 505.47 330.69 503.12 345.02 488.28 340.93 468.06 359.47 477.11 377.44 466.97 374.56 487.4 389.75 501.36"/><polygon class="cls-10" points="565.32 644.24 549.8 641.42 538.68 652.6 536.56 636.97 522.49 629.85 536.7 623.01 539.12 607.42 550.02 618.83 565.59 616.31 558.12 630.2 565.32 644.24"/><polygon class="cls-11" points="497.51 540.31 488.06 537.95 480.76 544.4 480.08 534.68 471.69 529.73 480.72 526.08 482.84 516.58 489.1 524.04 498.79 523.12 493.63 531.37 497.51 540.31"/><polygon class="cls-2" points="755.76 410.11 747.56 405.68 739.27 409.92 740.94 400.76 734.34 394.18 743.58 392.94 747.8 384.63 751.83 393.04 761.03 394.48 754.29 400.91 755.76 410.11"/><polygon class="cls-4" points="299.3 586.88 271.33 585.9 254.66 608.39 246.95 581.49 220.41 572.59 243.62 556.94 243.88 528.95 265.94 546.18 292.64 537.78 283.06 564.09 299.3 586.88"/><polygon class="cls-12" points="1021.56 255.87 1011.14 242.53 994.25 243.55 1003.72 229.52 997.53 213.77 1013.8 218.44 1026.87 207.69 1027.45 224.6 1041.71 233.71 1025.81 239.49 1021.56 255.87"/><polygon class="cls-13" points="950.7 539.81 944.18 526.59 929.6 524.48 940.15 514.19 937.66 499.66 950.7 506.52 963.74 499.66 961.25 514.19 971.8 524.48 957.22 526.59 950.7 539.81"/><polygon class="cls-2" points="730.18 336.07 724.54 332.71 718.58 335.46 720.02 329.06 715.57 324.23 722.11 323.63 725.32 317.91 727.91 323.94 734.34 325.22 729.41 329.55 730.18 336.07"/><polygon class="cls-2" points="588.48 321.26 584.31 320.76 581.53 323.92 580.72 319.8 576.86 318.14 580.52 316.08 580.91 311.9 584 314.75 588.09 313.83 586.34 317.64 588.48 321.26"/><polygon class="cls-14" points="328.69 214.36 318.17 211.25 309.65 218.15 309.35 207.19 300.16 201.22 310.49 197.55 313.33 186.95 320.01 195.65 330.96 195.08 324.76 204.12 328.69 214.36"/><polygon class="cls-15" points="701.47 217.32 695.01 209.22 684.67 209.95 690.38 201.3 686.49 191.69 696.48 194.45 704.42 187.78 704.88 198.14 713.67 203.63 703.97 207.27 701.47 217.32"/><polygon class="cls-2" points="443.07 278.41 437.26 275.35 431.44 278.4 432.55 271.92 427.85 267.33 434.35 266.39 437.27 260.5 440.17 266.39 446.68 267.34 441.97 271.93 443.07 278.41"/><polygon class="cls-6" points="343.85 393.73 332.11 391.93 323.98 400.59 322.06 388.87 311.32 383.81 321.87 378.36 323.36 366.58 331.81 374.93 343.47 372.71 338.14 383.32 343.85 393.73"/><polygon class="cls-16" points="889.27 331.49 882.04 324.27 871.99 326.13 876.62 317.03 871.75 308.05 881.84 309.64 888.87 302.22 890.48 312.32 899.7 316.71 890.6 321.36 889.27 331.49"/><polygon class="cls-17" points="608.07 536.16 602.67 525.41 590.75 523.76 599.32 515.3 597.2 503.45 607.89 508.98 618.51 503.31 616.55 515.18 625.23 523.53 613.33 525.34 608.07 536.16"/><polygon class="cls-10" points="891.28 212.43 880.7 210.4 873.04 217.97 871.7 207.29 862.14 202.34 871.88 197.76 873.63 187.14 881 194.99 891.64 193.37 886.45 202.8 891.28 212.43"/><polygon class="cls-11" points="494.34 220.39 490.82 213.26 482.95 212.11 488.64 206.56 487.3 198.72 494.34 202.42 501.38 198.72 500.04 206.56 505.73 212.11 497.86 213.26 494.34 220.39"/><polygon class="cls-2" points="637.59 304.27 635.92 300.88 632.17 300.33 634.88 297.69 634.24 293.97 637.59 295.73 640.94 293.97 640.3 297.69 643.01 300.33 639.27 300.88 637.59 304.27"/><polygon class="cls-2" points="505.33 291.76 501.04 288.95 496.3 290.89 497.65 285.95 494.34 282.04 499.45 281.8 502.15 277.44 503.97 282.23 508.94 283.45 504.95 286.65 505.33 291.76"/><polygon class="cls-2" points="684.67 268.81 681.97 263.34 675.93 262.46 680.3 258.2 679.27 252.19 684.67 255.03 690.07 252.19 689.03 258.2 693.4 262.46 687.37 263.34 684.67 268.81"/><polygon class="cls-18" points="622.75 159.74 612.13 152.46 600.12 157.08 603.76 144.73 595.65 134.73 608.52 134.38 615.53 123.58 619.84 135.71 632.27 139.04 622.07 146.89 622.75 159.74"/><polygon class="cls-4" points="1249.87 424.6 1222.81 423.65 1206.68 445.4 1199.22 419.38 1173.55 410.76 1196 395.62 1196.26 368.55 1217.59 385.22 1243.42 377.1 1234.16 402.54 1249.87 424.6"/><polygon class="cls-12" points="70.42 464.73 60.01 451.39 43.12 452.4 52.59 438.38 46.4 422.63 62.67 427.3 75.73 416.55 76.32 433.46 90.58 442.57 74.68 448.35 70.42 464.73"/><polygon class="cls-18" points="224.55 238.47 213.94 231.19 201.92 235.81 205.57 223.46 197.46 213.46 210.33 213.11 217.34 202.31 221.65 214.44 234.08 217.77 223.88 225.61 224.55 238.47"/><polygon class="cls-1" points="949.8 391.33 942.17 383.55 931.43 385.42 936.48 375.76 931.39 366.13 942.13 367.94 949.72 360.12 951.31 370.9 961.1 375.7 951.34 380.55 949.8 391.33"/><polygon class="cls-7" points="1103.35 460.05 1089.52 451.44 1074.59 457.94 1078.51 442.13 1067.7 429.94 1083.95 428.78 1092.21 414.74 1098.33 429.83 1114.24 433.35 1101.78 443.84 1103.35 460.05"/><polygon class="cls-7" points="192.64 487.39 178.81 478.77 163.87 485.28 167.79 469.47 156.99 457.27 173.24 456.11 181.5 442.07 187.62 457.17 203.53 460.68 191.06 471.17 192.64 487.39"/><polygon class="cls-19" points="76.81 341.65 49.57 340.7 33.35 362.6 25.84 336.4 0 327.73 22.59 312.5 22.85 285.24 44.33 302.02 70.32 293.85 61 319.46 76.81 341.65"/><polygon class="cls-20" points="1157.42 175.42 1131.02 174.5 1115.28 195.73 1108 170.32 1082.94 161.92 1104.86 147.15 1105.1 120.72 1125.93 136.99 1151.13 129.06 1142.09 153.9 1157.42 175.42"/><polygon class="cls-4" points="579 35.37 556.66 47.43 553.92 72.66 535.56 55.14 510.71 60.34 521.7 37.45 509.08 15.43 534.24 18.81 551.28 0 555.84 24.97 579 35.37"/></svg>
              `:""}
              <wc-icon primaryColor="head-toolbar" icon="trash" class="delete-icon" @click=${this.deleteUserSetting} title="Delete Logo"></wc-icon>
              <div style="position: absolute; bottom: 0; left: 0; background: var(--printess-lightgreen); height: 20px; width: 100%; opacity: ${this.showProgress?"1":"0"};transition: opacity .5s ease-in-out;"></div>
              ${this.showProgress?x`<wc-progress></wc-progress>`:""}
            `}
          </div>

          <!-- <div class="upload-wrapper" @dragover=${e=>this.dragoverHandler(e)} @dragleave=${()=>this.dragleaveHandler()} @drop=${e=>this.dropHandler(e)}>
            ${this.uploading?x`
              <div class="spinner big"></div>
            `:x`
              <label class="upload-label">
                <input type="file" @change=${e=>this.uploadFile(e)}>
                <wc-icon class="upload-icon" primaryColor="lightgreen" icon="cloud-upload-light"></wc-icon>
              </label>
              <span style="font-size: 16px;">
                Drag file here or
                <label class="upload-label">
                  <input type="file" @change=${e=>this.uploadFile(e)}>
                  Browse
                </label>
              </span>
            `}
          </div> -->
        </div>
      </div>

      ${"Pay as you go"===this.plan||"Small"===this.plan?x`
        <div class="button-wrapper" style="margin-bottom: 50px;"></div>
      `:x`
        <div class="button-wrapper">
          <label class="custom-file-upload">
            <input type="file" @change=${e=>this.uploadFile(e)}>
            Upload File
          </label>
          <wc-button caption="Reset Logo" size="md" color="green" @click=${this.deleteUserSetting}></wc-button>
        </div>
      `}
    `}};__decorate$20([e$3({type:String})],WcFileUploader.prototype,"plan",void 0),__decorate$20([e$3({type:Boolean})],WcFileUploader.prototype,"uploading",void 0),__decorate$20([e$3({type:Boolean})],WcFileUploader.prototype,"showProgress",void 0),__decorate$20([e$3({type:Object})],WcFileUploader.prototype,"editorOptions",void 0),__decorate$20([e$3({type:Object})],WcFileUploader.prototype,"loadingAnimation",void 0),__decorate$20([e$3({type:Boolean})],WcFileUploader.prototype,"renderForShopify",void 0),__decorate$20([i$1("div.upload-wrapper")],WcFileUploader.prototype,"uploadWrapper",void 0),WcFileUploader=__decorate$20([e$4("wc-file-uploader")],WcFileUploader);var __decorate$1$=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcEmbedCode=class extends s$1{static get styles(){return[settingsStyles,i$4`

      .embed-title {
        background-color: var(--printess-red);
        color: #fff;
        padding: 12px 20px;
        margin-top: 30px;
        font-size: 18px;
        font-weight: 400;
        line-height: 25px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .copy-icon {
        height: 26px;
        width: 26px;
        margin: 0;
        padding: 0;
        display: flex;
        cursor: pointer;
      }

      .embed-text {
        padding: 12px 20px;
        border: 0px;
        color: #555;
        outline: none;
        border-bottom: 2px solid var(--printess-red);
        background: rgba(210, 0, 100, 0.04);
      }

      code {
        white-space: pre-wrap;
        line-break: anywhere;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .embed-title {
          font-size: 14px;
          line-height: 36px;
          padding: 0 10px;
          max-height: 36px;
        }
        .copy-icon {
          height: 20px;
          width: 20px;
        }
        .settings {
          margin-right: 10px;
        }
      }
    `]}constructor(e,t){super(),this.editorOptions={name:"",version:"draft",editor:"nightly",mode:"buyer"},this.loadingAnimation={showAnimation:!0,imageUrl:""},this.editorOptions=e,this.loadingAnimation=t.imageUrl&&t.imageUrl.indexOf("printess-logo.svg")>-1?this.loadingAnimation:t}copyToClipboard(e){let t="";t="code"===e?`<iframe style="width: 100vw; height: 100vh; border: none; display: block;" id="printess" src="proxy.php?url=https%3A%2F%2Feditor.printess.com%2F%24%7B"current stable version"===this.editorOptions.editor?"":`v/${this.editorOptions.editor}/`}printess-editor/embed.html${this.loadingAnimation.imageUrl?`#${encodeURIComponent(JSON.stringify(this.loadingAnimation))}`:""}"></iframe>\n\n    <script>\n      const iframe = document.getElementById("printess");\n      iframe.onload = () => {\n  \n        /* **************************** */\n        /* listen to printess callbacks */\n        /* **************************** */\n        window.addEventListener("message", () => {\n          switch (event.data.cmd) {\n            case "back":\n              alert("Back to catalog. save-token:" + event.data.token);\n              break;\n            case "basket":\n              prompt("Proceed to checkout.\\n\\nsave-token:\\n" + event.data.token +  "\\n\\nThumbnailUrl:",event.data.thumbnailUrl );\n              break;\n          }\n        });\n  \n        /* *************************** */\n        /*    load Printess editor     */\n        /* *************************** */\n        iframe.contentWindow.postMessage({\n          cmd: "attach", properties: {\n            templateName: "${this.editorOptions.name}", // name of the template to load. You can also pass a save-token here.\n            templateVersion: "${this.editorOptions.version}", // "draft" or "published"\n            token: "${api.token}"\n          }\n        }, "*");\n      }\n  \n      /* *************************** */\n      /*   Forward Visual Viewport   */\n      /* *************************** */\n      if (window.visualViewport) {\n        window.visualViewport.addEventListener("scroll", () => {\n          // unfortunately an iframe on iOS is not able to receive the correct visual-viewport, so we forward it.\n          iframe.contentWindow.postMessage({ \n            cmd: "viewportScroll", \n            height: window.visualViewport.height, \n            offsetTop: window.visualViewport.offsetTop \n          },"*");\n        })\n      }\n  \n    <\/script>`:`https://editor.printess.com/${"current stable version"===this.editorOptions.editor?"":`v/${this.editorOptions.editor}/`}printess-editor/embed.html#${encodeURIComponent(JSON.stringify(this.loadingAnimation))}`,navigator.clipboard.writeText(t).then(function(){},function(){})}render(){return x`
      <div class="embed-title">
      Embed Code
      <wc-icon primarycolor="head-toolbar" icon="copy" class="copy-icon" @click=${()=>this.copyToClipboard("code")}></wc-icon>
    </div>
    <div class="embed-text">
      ${this.editorOptions&&this.loadingAnimation?x`
      <pre>
  <code>
  &lt;iframe style="width: 100vw; height: 100vh; border: none; display: block;" id="printess" src="proxy.php?url=https%3A%2F%2Feditor.printess.com%2F%24%7B"current stable version"===this.editorOptions.editor?"":`v/${this.editorOptions.editor}/`}printess-editor/embed.html${this.loadingAnimation.imageUrl?`#${encodeURIComponent(JSON.stringify(this.loadingAnimation))}`:""}"&gt;&lt;/iframe&gt;

  &lt;script&gt;
    const iframe = document.getElementById("printess");
    iframe.onload = () => {

      <span style="color: green">/* **************************** */</span>
      <span style="color: green">/* listen to Printess callbacks */</span>
      <span style="color: green">/* **************************** */</span>
      window.addEventListener("message", () => {
        switch (event.data.cmd) {
          case "back":
            alert("Back to catalog. save-token:" + event.data.token);
            break;
          case "basket":
            prompt("Proceed to checkout.\\n\\nsave-token:\\n" + event.data.token +  "\\n\\nThumbnailUrl:",event.data.thumbnailUrl );
            break;
        }
      });

      <span style="color: green">/* *************************** */</span>
      <span style="color: green">/*    load Printess editor     */</span>
      <span style="color: green">/* *************************** */</span>
      iframe.contentWindow.postMessage({
        cmd: "attach", properties: {
          templateName: "${this.editorOptions.name}", <span style="color: green">// name of the template to load. You can also pass a save-token here. </span>
          templateVersion: "${this.editorOptions.version}", <span style="color: green">// "draft" or "published"</span>
          token: token
        }
      }, "*");
    }

    <span style="color: green">/* *************************** */</span>
    <span style="color: green">/*   Forward Visual Viewport   */</span>
    <span style="color: green">/* *************************** */</span>
    if (window.visualViewport) {
      window.visualViewport.addEventListener("scroll", () => {
        <span style="color: green">// unfortunately an iframe on iOS is not able to receive the correct visual-viewport, so we forward it. </span>
        iframe.contentWindow.postMessage({ 
          cmd: "viewportScroll", 
          height: window.visualViewport.height, 
          offsetTop: window.visualViewport.offsetTop 
        },"*");
      })
    }

  &lt;/script&gt;</code>
        </pre>
        `:x`
          <div style="font-size: 14px; font-family: var(--printess-text-font);">Loading Embed Code ...</div>
        `}
      </div>

      <div class="button-wrapper">
        <wc-button caption="Copy Embed Code" color="red" size="md" @click=${()=>this.copyToClipboard("code")}></wc-button>
        <wc-button caption="Copy Embed Url" color="red" size="md" @click=${()=>this.copyToClipboard("url")}></wc-button>
      </div>
        
      </div>
    `}};__decorate$1$([e$3({type:Object})],WcEmbedCode.prototype,"editorOptions",void 0),__decorate$1$([e$3({type:Object})],WcEmbedCode.prototype,"loadingAnimation",void 0),__decorate$1$([i$1("#printess-iframe")],WcEmbedCode.prototype,"printess",void 0),__decorate$1$([i$1("div.design-page")],WcEmbedCode.prototype,"preview",void 0),WcEmbedCode=__decorate$1$([e$4("wc-embed-code")],WcEmbedCode);const designStyles=i$4`
  .design-page {
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }
  }
`;var __decorate$1_=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDesignPage=class extends s$1{static get styles(){return[designStyles,i$4`
      .card {
        margin-top: 30px;
        margin-bottom: 50px;
      }

      .table-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: white;
        background-color: var(--printess-blue);
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        margin-top: 10px;
        margin-bottom: 0px;
        min-height: 50px;
        padding: 0 20px;
      }
      .title {
        font-size: 18px;
        font-weight: 400;
        line-height: 50px;
        margin: 0px;
      }
      .menu-icon {
        width: 20px;
        height: 25px;
        padding: 0;
        cursor: pointer;
      }

      .editor-preview {
        width: 100%;
        height: 555px;
        background-color: #ececec;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .preview-window {
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 50px;
        text-align: center;
      }

      #printess-iframe {
        width: 100%;
      }

      button {
        padding: 4px 10px;
        border: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-family: var(--printess-button-font);
        font-size: 14px;
        font-weight: 400;
      }

      .settings.blue {
        padding: 7px 20px;
        margin: 20px 15px;
        background-color: var(--printess-blue);
      }
      .settings.blue:hover {
        background-color: var(--printess-blueHover);
      }

      .collapse-icon {
        height: 20px;
        width: 20px;
        padding: 0;
        margin-right: 10px;
        cursor: pointer
      }

      .fullscreen {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
      }

      .flex {
        display: flex;
        flex-direction: row;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .table-header {
          min-height: unset;
          max-height: 36px;
          padding: 0 10px;
        }
        .title {
          font-size: 14px;
          line-height: 36px;
        }
        .menu-icon {
          height: 20px;
        }
        div.preview-window > h1 {
          font-size: 18px;
        }
        div.preview-window > p, div.preview-window > button.settings {
          font-size: 12px;
        }
        .flex {
          flex-direction: column;
        }
      }
    `]}constructor(){super(),this.selectedTheme="default",this.plan="",this.primaryColor="var(--printess-green)",this.showAdvancedStyles=!1,this.showPrintess=!1,this.editorOptions={name:"",version:"draft",editor:"nightly",mode:"buyer"},this.loadingAnimation={showAnimation:!0,imageUrl:"https://editor.printess.com/v/nightly/printess-logo.svg"},this.renderForShopify=!1,this.td=new WcBootstrapStyles,this.as=new WcAdvancedStyles,this.td.addEventListener("theme-selected",e=>{this.selectedTheme=e.detail,this.as.setSelectedTheme(e.detail)})}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async readUserSettings(e){const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):(t.editorOptions&&(this.editorOptions=JSON.parse(t.editorOptions)),t.imageUpload&&(this.loadingAnimation=JSON.parse(t.imageUpload)))}async loadUserInfo(){const e=await api.loadUserBookedInfo();e instanceof ServerErrorResponse$2?this.showError(e):this.plan=e.bookedPlan.name}connectedCallback(){super.connectedCallback(),this.readUserSettings({keys:["editorOptions","imageUpload"]}),this.loadUserInfo(),location.hash="#design",this.renderForShopify="Shopify"==currentUser.displayName}renderEditorOptions(){const e=new WcEditorOptions;return e.getEditorOptions(e=>{""===e.name&&(this.showPrintess=!1),this.editorOptions=e,this.renderPrintess(e)}),e}renderPrintess(e){this.showPrintess=!0;const t=new WcEditorPreview(e);t.getCallbackValue(e=>{e&&(this.showPrintess=this.printess.classList.contains("fullscreen"),window.setTimeout(()=>this.printess.classList.remove("fullscreen"),100))}),this.printess.innerHTML="",this.printess.appendChild(t),window.setTimeout(()=>{this.preview?.scrollIntoView({behavior:"smooth",block:"start"})},0)}renderBootstrapStyles(){return this.td.getBootstrapStyles(e=>{this.renderPrintess({name:"",version:"draft",editor:"nightly",mode:"buyer",theme:e})}),this.td}renderFileUploader(){const e=new WcFileUploader(this.plan);return e.getFileUploader(e=>{e&&(this.loadingAnimation=e)}),e}renderEmebedCode(){return new WcEmbedCode(this.editorOptions,this.loadingAnimation)}userClick(e){this.showPrintess?showCtxMenu(e,[{caption:"View Fullscreen",callback:()=>{this.printess.classList.add("fullscreen")}},{caption:"Refresh Editor",callback:()=>this.renderPrintess()},{caption:"Close Editor",callback:()=>{this.showPrintess=!1,this.printess.classList.remove("fullscreen")}}]):showCtxMenu(e,[{caption:"Open Editor",callback:()=>this.renderPrintess()}])}copyToClipboard(){navigator.clipboard.writeText(`https://editor.printess.com/${"current stable version"===this.editorOptions.editor?"":`v/${this.editorOptions.editor}/`}printess-editor/embed.html#${encodeURIComponent(JSON.stringify(this.loadingAnimation))}`).then(function(){},function(){})}getLogoHintContent(){return x`
      <p>
        To effectively apply the uploaded logo to the Loading Animation you need to copy the
        <span style="color: var(--printess-blueHover)">Embed Url</span> or the
        <span style="color: var(--printess-blueHover)">Embed Code</span> from below.
      </p>
    `}getStyleHintContent(){return x`
      <p>
        Here you can change the look of your editor. Simply choose a Bootstrap Theme, Font and Colors.
        You can then easily preview the custom design above in the editor preview.
        Be aware that <span style="color: var(--printess-red)">saving and previewing</span> the modified settings will overwrite the default and change your real editor view.
      </p>
    `}getLegacyUiWarning(){return x`
      <p>
        This page belongs to the <span style="color: var(--printess-red)">Legacy Editor UI</span>.
        <br>
        Starting <span style="color: var(--printess-red)">summer 2026</span>, this UI will reach its end of life.
        <br><br>
        Do not start any new projects in the legacy UI and please move your existing editors to the new Panel UI!
        <br>
        See the documentation here:
        <a href="proxy.php?url=https%3A%2F%2Fwww.printess.com%2Fkb.html%23buyer-side%2Fpanel-ui.html">Panel UI</a></p>
      </p>
    `}getLegacyUiWarningHeader(){return x`Legacy UI <br>End of Life `}render(){return x`
      <div class="design-page">
        <h3 class="topic">Theme & Logo</h3>

        <wc-alert-container alertType="attention" .header="${this.getLegacyUiWarningHeader()}" .content="${this.getLegacyUiWarning()}"></wc-alert-container>

        <p class="subtopic">Loading Animation</p>

        ${"Pay as you go"===this.plan||"Small"===this.plan?"":x`
          <wc-alert-container alertType="info" .content="${this.getLogoHintContent()}"></wc-alert-container>
        `}

        ${this.renderFileUploader()}

        <p class="subtopic">Buyer Side Styles</p>

        <wc-alert-container alertType="attention" .content="${this.getStyleHintContent()}"></wc-alert-container>


        ${this.renderBootstrapStyles()}



        <p class="subtopic" id="preview">Buyer Side Appearance</p>

        <div class="card blue" style="margin-bottom: 0;">
          <div class="table-header">
            <h3 class="title">Editor Preview</h3>
            <wc-icon icon="ellipsis-v" primarycolor="head-toolbar" class="menu-icon" @mousedown=${e=>this.userClick(e)}></wc-icon>
          </div>
          <div class="table-body" style="display: flex; flex-direction: column;">
            <div class="editor-preview">
              <div id="printess-iframe" style="display: ${this.showPrintess?"block":"none"}; height: 100%;"></div>
              <div class="preview-window" style="display: ${this.showPrintess?"none":"flex"};">
                <h1>Preview Styles in Printess Editor</h1>
                <p>Choose a template and set up styles to preview your very own editor design!</p>
                <button class="settings blue" @click=${this.renderPrintess}>Open Editor Preview</button>
              </div>
            </div>
            <div style="border-top: 2px solid var(--printess-blue);">
              ${this.renderEditorOptions()}
            </div>
          </div>
        </div>

        ${"Pay as you go"===this.plan||"Small"===this.plan||this.renderForShopify?"":x`
          <p class="subtopic">Embed Printess Editor</p>
          ${this.renderEmebedCode()}
        `}

      </div>
    `}};__decorate$1_([e$3({type:String})],WcDesignPage.prototype,"selectedTheme",void 0),__decorate$1_([e$3({type:String})],WcDesignPage.prototype,"plan",void 0),__decorate$1_([e$3({type:String})],WcDesignPage.prototype,"primaryColor",void 0),__decorate$1_([e$3({type:Boolean})],WcDesignPage.prototype,"showAdvancedStyles",void 0),__decorate$1_([e$3({type:Boolean})],WcDesignPage.prototype,"showPrintess",void 0),__decorate$1_([e$3({type:Object})],WcDesignPage.prototype,"editorOptions",void 0),__decorate$1_([e$3({type:Object})],WcDesignPage.prototype,"loadingAnimation",void 0),__decorate$1_([e$3({type:Boolean})],WcDesignPage.prototype,"renderForShopify",void 0),__decorate$1_([i$1("#printess-iframe")],WcDesignPage.prototype,"printess",void 0),__decorate$1_([i$1("p#preview")],WcDesignPage.prototype,"preview",void 0),WcDesignPage=__decorate$1_([e$4("wc-design-page")],WcDesignPage);const translationsStyles=i$4`
  .settings-page {
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
  }

  .card {
    margin-top: 30px;
    margin-bottom: 70px;
    border-bottom: 2px solid var(--printess-green);
  }

  .table-header {
    padding-left: 20px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 0;
    background-color: var(--printess-green);
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
  }

  .table-body {
    padding: 10px 10px 0 20px;
    font-size: 14px;
  }

  dl {
    display: grid;
    margin-top: 10px;
    margin-bottom: 0;
    grid-template-columns: 110px 1fr;
  }

  dt, dd {
    display: flex;
    line-height: 25px;
    margin-left: 0;
    text-align: left;
    padding: 10px;
    align-items: center;
  }

  dt {
    padding-left: 20px;
  }

  dd {
    display: flex;
    justify-content: space-between;
    padding-left: 0;
  }

  .password-input {
    color: #555;
    font-family: var(--printess-text-font);
    font-size: 14px;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    background-color: rgba(242,246,219,0.5);
    padding: 7px 10px;
    border-radius: 4px;
    margin-right: 10px;
  }

  .hidden {
    display: none;
  }

  .language-tabs {
    display: flex;
    flex-direction: row;
    background-color: rgba(76, 156, 226, 0.1);
    border-bottom: 1px solid var(--printess-blue);
  }

  .lang-tab {
    padding: 7px 20px;
    cursor: pointer;
    display: flex;
  }

  .lang-tab.active, .lang-tab:hover {
    color: var(--printess-blue);
  }

  .plus-input {
    background-color: transparent;
    border: none;
    outline: none;
    width: 30px;
    text-align: center;
    font-size: 16px;
    color: #555;
  }

  .jsonTitle {
    background-color: rgb(208, 4, 155);
    color: #fff;
    padding: 12px 20px;
    margin-top: 30px;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .jsonText {
    padding: 12px 20px;
    min-width: 100%;
    max-width: 100%;
    height: 300px;
    border: 0px;
    color: #555;
    outline: none;
  }

  #translation-table {
    background-color: rgba(76, 156, 226, 0.1);
    border-bottom: 2px solid var(--printess-blue);
  }

  #offensive-words {
    height: 100px;
    background-color: rgba(242, 246, 219, 0.5);
    border-bottom: 2px solid var(--printess-green);
  }

  .warning {
    color: rgb(210, 0, 100);
    text-align: left;
    width: 100%;
    font-size: 12px;
    margin: 10px 0 0;
  }

  button {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
  }

  .settings {
    padding: 7px 20px;
  }

  .green {
    background-color: var(--printess-green);
  }

  .red {
    background-color: rgb(210, 0, 100);
  }

  .pink {
    background-color: var(--printess-pink);
  }

  .blue {
    background-color: var(--printess-blue);
  }

  .icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .icon {
    margin: 20px;
    padding-top: 10px;
    font-size: 12px;
  }

  wc-icon {
    min-width: 20px;
    height: 20px;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    .card {
      width: 100%;
      margin-bottom: 50px;
    }

    .table-header {
      padding-left: 10px;
    }

    .title {
      font-size: 14px;
      line-height: 36px;
      margin: 0;
    }

    .table-body {
      padding: 10px 10px 0 10px;
      font-size: 12px;
    }

    .settings {
      font-size: 12px;
    }
  }
`;var __decorate$1Z=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcEditorPrintessTranslations=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
        .modal-wrapper {
          min-width: 70vw;
        }
        .modal-header {
          padding: 0 20px;
        }
        
        .modal-header wc-icon {
          margin: 0px;
          width: 25px;
          height: 25px;
        }

        .modal-content {
          padding-top: 0px;
          max-height: 60vh;
        }

        .modal-controls {
          display: flex;
          gap: 5px;
        }

        .header {
          display: grid;
          grid-template-columns: 100px 100px auto;
          align-items: center;
          gap: 10px;
        }

        .header .search-input {
          width: 400px;
          margin-left: auto;
        }

        .namespace-container {
          display: flex;
          flex-direction: column;
          gap: 3px;
          border: 1px solid #eee;
          border-radius: 8px;
          margin: 0.5rem 0;
          padding-left: 0.5rem;
          background: #fafafa;
        }
        .namespace-header {
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
          font-weight: bold;
          padding: 0.5rem 0;
          width: 100%;
        }
        .namespace-content {
          margin-top: 0.5rem;
          display: flex;
          flex-direction: column;
          padding-right: 0.5rem;
          padding-bottom: 0.5rem;
          gap: 5px;
        }

        .row {
          display: flex;
          gap: 10px;
          align-items: center;
        }

        label {
          white-space: nowrap;
        }

        wc-input {
          margin-bottom: 0;
          width: 100%;
        }

        .modal-footer {
          background: var(--printess-pink);
          padding: 10px 20px;
        }

        .button-wrapper {
          width: 100%;
          display: flex;
          gap: 10px;
          flex-direction: row;
          justify-content: flex-end;
        }

        .add-custom-field-container {
          margin-top: 10px;
          padding: 10px;
          border: 1px solid var(--printess-pink);
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .plus-btn, .delete-btn {
          background: #eee;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .delete-btn {
          border-radius: 0px!important;
        }
        .plus-btn {
          padding: 0.5rem 0 0.5rem 0.5rem;
          border-top-right-radius: 8px;
        }
        .delete-btn > div {
          cursor: pointer;
        }
        .separator {
          background: #ccc;
          width: 1px;
          height: 80%;
        }

        wc-icon {
          width: 20px;
          height: 20px;
          margin: 5px 10px;
        }
  `]}constructor(){super(),this.openPaths=new Set,this.changedTranslationKeys=new Set,this.deletedTranslationKeys=new Set,this.localStorageItems=new Set,this.searchTerm="",this.activeLanguage="",this.printessTranslations={},this.customTranslations={},this.mergedTranslations={},this.languageKeys=["en","ar","bg","cs","da","de","es","et","fi","fr","hu","id","it","ja","ko","lt","lv","nb","nl","pl","pt-BR","pt-PT","ro","ru","se","sk","sl","tr","uk","zh"],this.customerLanguages=[],this.allowedNamespaces=["ui","alert","errors"],this.backdrop=new WcBackdrop}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2?showError(t):console.log("User settings have been updated")}async showDialog(e){this.callback=e,await this.loadLanguageKeys(),await this.loadAllTranslations(),this.mergeTranslations(),document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){this.openPaths=new Set,this.changedTranslationKeys=new Set;for(const e of this.localStorageItems)localStorage.removeItem(e);this.localStorageItems=new Set,this.callback&&this.callback(!0),document.body.removeChild(this.backdrop),document.body.removeChild(this)}async changeLanguage(e){const t=this.filterChangedTranslations(this.mergedTranslations,this.changedTranslationKeys);this.mergeFinalTranslations(this.customTranslations,t);const o=JSON.stringify(this.customTranslations,void 0,2);localStorage.setItem("translation."+this.activeLanguage,o),this.localStorageItems.add("translation."+this.activeLanguage),this.activeLanguage=e,await this.loadAllTranslations();const r=localStorage.getItem("translation."+e);r&&(this.customTranslations=JSON.parse(r)),this.mergeTranslations()}async loadLanguageKeys(){const e=await api.readUserTranslations();if(e instanceof ServerErrorResponse$2)showError(e);else{const t=Object.entries(e).filter(e=>e[0].includes("translation")&&!e[0].endsWith("."));if(0===t.length)return;this.customerLanguages=t.map(e=>e[0].replace("translation.","")).sort(),this.customerLanguages.includes("en")?this.activeLanguage="en":this.activeLanguage=this.customerLanguages[0]}}async loadAllTranslations(){const e=this.activeLanguage??"en",t=await api.readUserSettings({keys:["translation."+e]});t instanceof ServerErrorResponse$2?console.error(t.message):(this.printessTranslations=this.languageKeys.includes(e)?JSON.parse(t["printess-translation."+e]):{},this.customTranslations=this.customerLanguages.includes(e)?JSON.parse(t["translation."+e]):{})}mergeTranslations(){if(!this.printessTranslations)return;const e=structuredClone(this.printessTranslations),t=new Set;if(this.customTranslations)for(const o of this.allowedNamespaces){const r=this.customTranslations[o],i=e[o];if(r&&i)for(const a of Object.keys(r)){const s=r[a],n=i[a];void 0!==n&&void 0!==s&&s!==n&&(e[o][a]=s,t.add(`${o}.${a}`))}}this.mergedTranslations=e,this.changedTranslationKeys=t}async saveTranslation(){const e=this.filterChangedTranslations(this.mergedTranslations,this.changedTranslationKeys);this.mergeFinalTranslations(this.customTranslations,e);const t=JSON.stringify(this.customTranslations,void 0,2);await this.writeUserSetting({key:`translation.${this.activeLanguage}`,json:t});for(const e of this.localStorageItems){if(e==="translation."+this.activeLanguage)continue;const t=localStorage.getItem(e);t&&await this.writeUserSetting({key:e,json:t})}this.closeDialog()}filterChangedTranslations(e,t){if(!t.size)return{};return Array.from(t).reduce((t,o)=>{const[r,i]=o.split(".");if(!r||!i)return t;if(!e[r])return t;if(void 0===e[r][i])return t;t[r]||(t[r]={});let a=t[r],s=e[r];return a[i]=s[i],t},{})}mergeFinalTranslations(e,t){if(0!==Object.keys(t).length)return Object.keys(t).forEach(o=>{e[o]||(e[o]={}),this.deepMerge(e[o],t[o])}),e}deepMerge(e,t){Object.keys(t).forEach(o=>{const r=t[o],i=e[o];r&&"object"==typeof r&&!Array.isArray(r)?(e[o]=i||{},this.deepMerge(e[o],r)):e[o]=r})}handleSearch(e){this.searchTerm=e,e&&this.expandAllMatchingPaths(this.mergedTranslations)}filterTranslations(e,t){if(!t)return e;const o=t.toLowerCase();let r=!1;const i={};for(const[t,a]of Object.entries(e)){const e=t.toLowerCase().includes(o);if("string"==typeof a){const s=a.toLowerCase().includes(o);(e||s)&&(i[t]=a,r=!0)}else{const s=this.filterTranslations(a,o);(Object.keys(s).length||e)&&(i[t]=e?a:s,r=!0)}}return r?i:{}}expandAllMatchingPaths(e,t=""){Object.entries(e).forEach(([e,o])=>{const r=t?`${t}.${e}`:e;this.openPaths.add(r),"object"==typeof o&&this.expandAllMatchingPaths(o,r)})}updateValue(e,t,o){const r=`${e}.${t}`;this.changedTranslationKeys.add(r),this.deletedTranslationKeys.has(r)&&this.deletedTranslationKeys.delete(r),this.mergedTranslations=this.updateValueAtPath(this.mergedTranslations,e.split("."),t,o),this.requestUpdate()}updateValueAtPath(e,t,o,r){if(!t.length)return{...e,[o]:r};const[i,...a]=t;return{...e,[i]:this.updateValueAtPath(e[i],a,o,r)}}toggleOpen(e){const t=new Set(this.openPaths);t.has(e)?t.delete(e):t.add(e),this.openPaths=t}deleteKey(e,t){const o=this.getPrintessValueAtPath(e,t);void 0!==o&&(this.mergedTranslations=this.updateValueAtPath(this.mergedTranslations,e.split("."),t,o)),this.deletedTranslationKeys.add(`${e}.${t}`)}getPrintessValueAtPath(e,t){let o=this.printessTranslations;for(const t of e.split(".")){if(null==o||"object"!=typeof o)return;o=o[t]}return o?.[t]}renderTranslationRow(e,t,o){const r=this.changedTranslationKeys.has(`${o}.${e}`),i=this.deletedTranslationKeys.has(`${o}.${e}`);return x`
      <div class="row">
        <label style="${r&&!i?"":"color: rgb(210, 0, 100);"}">${e}:</label>
        <wc-input
          type="text"
          .value=${r&&!i?t:""}
          .placeholder=${t}
          .callback=${t=>this.updateValue(o,e,t)}
          .deleteInput=${r&&!i}
          @delete-input=${()=>this.deleteKey(o,e)}
        ></wc-input>
      </div>
    `}renderNamespaceContent(e,t){return x`
      <div class="namespace-content">
        ${Object.entries(e).map(([e,o])=>this.renderTranslationRow(e,o,t))}
      </div>
    `}renderNamespaceHeader(e,t){return x`
      <div style="display:flex;width:100%;">
        <div class="namespace-header" @click=${()=>this.toggleOpen(e)}>
          <wc-icon primarycolor="black" icon="carret-down-solid" style=${t?"":"transform: rotate(-90deg);"}></wc-icon>
          <span>${e}</span>
        </div>
      </div>
    `}renderNamespaceContainer(e,t){const o=this.openPaths.has(e);return this.allowedNamespaces.includes(e)?x`
      <div class="namespace-container">
        ${this.renderNamespaceHeader(e,o)}
        ${o?this.renderNamespaceContent(t,e):""}
      </div>
    `:x``}renderTranslationContainer(e){return x`
      ${Object.entries(e).map(([e,t])=>this.renderNamespaceContainer(e,t))}
    `}render(){const e=this.filterTranslations(this.mergedTranslations,this.searchTerm),t=Object.keys(e).length,o=this.activeLanguage;return x`
      <div class="modal pink">
        <div class="modal-wrapper">
          <div class="modal-header">
            <span class="modal-title">PRINTESS Translation Table</span>
            <wc-icon icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="header">
              <h3>
                Language:
              </h3>
              <wc-input 
                type="select" 
                .value=${o} 
                .options=${this.languageKeys} 
                .callback=${e=>this.changeLanguage(e)}
              ></wc-input>
              <wc-input 
                class="search-input"
                type="search"
                .value=${this.searchTerm} 
                placeholder="Search for translation keys and values ..."
                @text-input=${e=>this.handleSearch(e.detail.value)}
              />
            </div>
            ${t?this.renderTranslationContainer(e):x`
              <p>No Translation Keys found.</p>
            `}
          </div>

          <div class="modal-footer">
            <div class="button-wrapper">
              <wc-button caption="Cancel" color="light-pink" size="lg" @click=${()=>this.closeDialog()}></wc-button>
              <wc-button caption="Save Translation Table" color="light-pink" size="lg" @click=${()=>this.saveTranslation()}></wc-button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"openPaths",void 0),__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"changedTranslationKeys",void 0),__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"deletedTranslationKeys",void 0),__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"localStorageItems",void 0),__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"searchTerm",void 0),__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"activeLanguage",void 0),__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"printessTranslations",void 0),__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"customTranslations",void 0),__decorate$1Z([t$1()],WcEditorPrintessTranslations.prototype,"mergedTranslations",void 0),WcEditorPrintessTranslations=__decorate$1Z([e$4("wc-editor-printess-translations")],WcEditorPrintessTranslations);var __decorate$1Y=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogRemoveTranslationKeys=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
        z-index: 110;
      }

      .modal-wrapper {
        width: auto;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 40px;
        gap: 10px;
      }

      .delete, .close {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 16px;
        width: 50%;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }

      .close {
        margin: 20px 0px 0px 0px;
      }
    `]}constructor(e,t,o){super(),this.translationKey="",this.changedKeys=[],this.deletedKeys=[],this.backdrop=new WcBackdrop,this.backdrop.style.zIndex="100",this.translationKey=e,this.changedKeys=t,this.deletedKeys=o}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(e){this.callback&&this.callback(e),document.body.removeChild(this.backdrop),document.body.removeChild(this)}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Remove Translation Keys</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog(!1)}></wc-icon>
          </div>

          <div class="modal-content">
            <p style="font-weight: bold;">
                Translation keys in the "${this.translationKey}"-translation table have been modified.
            </p>
            ${this.changedKeys?.length>0?x`
              <p>
                  Following Translation Keys were updated:
              </p>
              <ul>
                  ${this.changedKeys.map(e=>x`
                      <li .key=${e}>${e}</li>
                  `)}
              </ul>
            `:""}
            ${this.deletedKeys?.length>0?x`
              <p>
                  Following Translation Keys were deleted:
              </p>
              <ul>
                  ${this.deletedKeys.map(e=>x`
                      <li .key=${e}>${e}</li>
                  `)}
              </ul>
            `:""}
            <p>
                Do you want to delete these keys from other languages so they can be re-translated?
            </p>
            <div class="button-wrapper">
              <wc-button caption="Remove Keys" color="gray" size="lg" style="width: 100%;" width="full-width" @click=${()=>this.closeDialog(!0)}></wc-button>
              <wc-button caption="Keep Keys" color="pink" size="lg" style="width: 100%;" width="full-width" @click=${()=>this.closeDialog(!1)}></wc-button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1Y([e$3({type:String})],WcDialogRemoveTranslationKeys.prototype,"translationKey",void 0),__decorate$1Y([e$3({type:Array})],WcDialogRemoveTranslationKeys.prototype,"changedKeys",void 0),__decorate$1Y([e$3({type:Array})],WcDialogRemoveTranslationKeys.prototype,"deletedKeys",void 0),WcDialogRemoveTranslationKeys=__decorate$1Y([e$4("wc-dialog-remove-translation-keys")],WcDialogRemoveTranslationKeys);var __decorate$1X=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcEditorSaasTranslations=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
        .modal-wrapper {
          min-width: 70vw;
        }
        .modal-header {
          padding: 0 20px;
        }

        .modal-header wc-icon {
          margin: 0px;
          width: 25px;
          height: 25px;
        }

        .modal-content {
          padding-top: 0px;
          max-height: 60vh;
          position: relative;
        }
        .modal-content.loading {
          pointer-events: none;
          opacity: 0.6;
        }
          
        .spinner,
        .spinner:after {
          border-radius: 50%;
          width: 5em;
          height: 5em;
        }
        .spinner {
          font-size: 20px;
          right: 50%;
          top: 50%;
          position: absolute;
          border-top: 0.5em solid rgba(255,255,255, 0.2);
          border-right: 0.5em solid rgba(255,255,255, 0.2);
          border-bottom: 0.5em solid rgba(255,255,255, 0.2);
          border-left: 0.5em solid var(--printess-red);
          -webkit-transform: translateZ(0);
          -ms-transform: translateZ(0);
          transform: translateZ(0);
          -webkit-animation: load8 1.1s infinite linear;
          animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
          0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @keyframes load8 {
          0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }

        .modal-controls {
          display: flex;
          gap: 5px;
        }

        .header {
          display: grid;
          grid-template-columns: 165px 120px auto;
          align-items: center;
          gap: 10px;
        }

        .header .search-input {
          width: 400px;
          margin-left: auto;
        }

        .row {
          display: flex;
          gap: 10px;
          align-items: center;
        }

        label {
          white-space: nowrap;
        }

        wc-input {
          margin-bottom: 0;
          width: 100%;
        }

        .new-key-container {
          display: flex;
          align-items: center;
          flex-direction: row;
          gap: 10px;
          margin-right: 0.5rem;
          margin-bottom: 0.5rem;
        }

        .new-key-input {
          width: 150px;
          margin: 0;
          padding: 5px;
        }

        .modal-footer {
          background: var(--printess-pink);
          padding: 10px 20px;
        }

        .button-wrapper {
          width: 100%;
          display: flex;
          gap: 10px;
          flex-direction: row;
          justify-content: flex-end;
        }

        .add-custom-field-container {
          margin-top: 10px;
          padding: 10px;
          border: 1px solid var(--printess-pink);
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .namespace-container {
          display: flex;
          flex-direction: column;
          gap: 3px;
          border: 1px solid #eee;
          border-radius: 8px;
          margin: 0.5rem 0;
          padding-left: 0.5rem;
          background: #fafafa;
        }
        .namespace-header {
          display: grid;
          grid-template-columns: 1fr auto;
        }
        .namespace-title {
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
          font-weight: bold;
          padding: 0.5rem 0;
          width: 100%;
        }
        .namespace-content {
          margin-top: 0.5rem;
          display: flex;
          flex-direction: column;
          padding-right: 0.5rem;
          padding-bottom: 0.5rem;
          gap: 5px;
        }
        .plus-btn, .delete-btn {
          background: #eee;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .delete-btn {
          border-radius: 0px!important;
        }
        .plus-btn {
          padding: 0.5rem 0 0.5rem 0.5rem;
          border-top-right-radius: 8px;
        }
        .delete-btn > div {
          cursor: pointer;
        }
        .separator {
          width: 1px;
          height: 100%;
        }

        wc-icon {
          width: 20px;
          height: 20px;
          margin: 5px 10px;
        }
  `]}constructor(){super(),this.language="",this.openPaths=new Set,this.localStorageItems=new Set,this.customerChangedKeys=new Set,this.deletedKeys=new Set,this.namespace="",this.searchTerm="",this.activeLanguage="en",this.printessTranslations={},this.loading=!1,this.languageKeys=["ar","bg","cs","da","de","en","es","et","fi","fr","hu","id","it","ja","ko","lt","lv","nb","nl","pl","pt-BR","pt-PT","ro","ru","se","sk","sl","tr","uk","zh"],this.newKeys=new Map,this.backdrop=new WcBackdrop}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2?showError(t):console.log("User settings have been updated")}async showDialog(e){this.callback=e,"gy8z44EmLiZ0vrUKrXlWtiZY15D2"!==currentUser.id&&this.closeDialog(),await this.updateTranslationsUi("en"),document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){this.newKeys.clear(),this.deletedKeys.clear(),this.openPaths.clear(),this.customerChangedKeys.clear();for(const e of this.localStorageItems)localStorage.removeItem(e);this.localStorageItems=new Set,this.callback&&this.callback(!0),document.body.removeChild(this.backdrop),document.body.removeChild(this)}async checkForTranslationChanges(){if("en"!==this.activeLanguage&&"de"!==this.activeLanguage)return Promise.resolve();const e=Array.from(this.customerChangedKeys),t=Array.from(this.deletedKeys);return 0===e.length&&0===this.deletedKeys.size?Promise.resolve():new Promise(o=>{new WcDialogRemoveTranslationKeys(this.activeLanguage,e,t).showDialog(async r=>{if(!r)return void o();const i=[...e,...t],a=this.languageKeys.filter(e=>e!==this.activeLanguage);for(const e of a){const t=await api.readUserSettings({keys:["translation."+e]});if(t instanceof ServerErrorResponse$2){console.error(t.message);continue}let o={};try{const r=t["translation."+e];r&&(o=JSON.parse(r))}catch{console.warn(`Invalid or empty JSON for ${e}`);continue}i.forEach(e=>this.deleteNestedKey(o,e)),await api.writeUserSetting({key:"translation."+e,json:JSON.stringify(o,void 0,2)})}o()})})}deleteNestedKey(e,t){const o=t.split(".");let r=e;for(let e=0;e<o.length-1;e++){if("object"!=typeof r[o[e]]||null===r[o[e]])return;r=r[o[e]]}delete r[o[o.length-1]],this.customerChangedKeys.delete(t)}async saveTranslation(e){const t=this.getTranslationJson();this.loading="translate"===e,await this.writeUserSetting({key:`translation.${this.activeLanguage}`,json:t});for(const e of this.localStorageItems){if(e==="translation."+this.activeLanguage)continue;const t=localStorage.getItem(e);t&&(await this.writeUserSetting({key:e,json:t}),this.localStorageItems.delete(e),localStorage.removeItem(e))}"translate"===e?(await this.checkForTranslationChanges(),await this.translateToOther(this.activeLanguage)):this.closeDialog()}getTranslationJson(){return JSON.stringify(this.printessTranslations,void 0,2)}async updateTranslationsUi(e){this.loading=!0,this.newKeys.clear(),this.deletedKeys.clear(),this.customerChangedKeys.clear();const t=localStorage.getItem("translation."+e);t?this.printessTranslations=JSON.parse(t):await this.loadTranslation(),this.loading=!1}async changeLanguage(e){const t=this.getTranslationJson();localStorage.setItem("translation."+this.activeLanguage,t),this.localStorageItems.add("translation."+this.activeLanguage),console.log("changing language: ",t),this.activeLanguage=e,this.updateTranslationsUi(e)}async translateToOther(e){try{await api.translate(e)}finally{this.loading=!1}}async loadTranslation(){const e=this.activeLanguage??"en",t=await api.readUserSettings({keys:["translation."+e]});t instanceof ServerErrorResponse$2?console.error(t.message):this.printessTranslations=this.languageKeys.includes(e)?JSON.parse(t["translation."+e]):{}}handleSearch(e){this.searchTerm=e,e&&this.expandAllMatchingPaths(this.printessTranslations)}filterTranslations(e,t){if(!t)return e;const o=t.toLowerCase();let r=!1;const i={};for(const[t,a]of Object.entries(e)){const e=t.toLowerCase().includes(o);if("string"==typeof a){const s=a.toLowerCase().includes(o);(e||s)&&(i[t]=a,r=!0)}else{const s=this.filterTranslations(a,o);(Object.keys(s).length||e)&&(i[t]=e?a:s,r=!0)}}return r?i:{}}expandAllMatchingPaths(e,t=""){Object.entries(e).forEach(([e,o])=>{const r=t?`${t}.${e}`:e;this.openPaths.add(r),"object"==typeof o&&this.expandAllMatchingPaths(o,r)})}setNewKey(e,t){e=e.trim().replace(/\s+/g,"-");const o=new Map(this.newKeys);o.set(t,e),this.newKeys=o,this.requestUpdate()}addNamespace(){const e=this.namespace.trim().replace(/\s+/g,"-");if(!e)return;if(this.printessTranslations[e])return void alert("key '"+e+"' already exists");/^[0-9a-zA-Z_]+[\w\-_öäü]*$/.test(e)?(this.printessTranslations={[e]:{},...this.printessTranslations},this.namespace=""):alert(e+" is an invalid key. Please only use letters and numbers as first character and then letters, numbers, dash or underscore.")}addNewKey(e,t){const o=this.newKeys.get(e);if(!o)return;if(!/^[0-9a-zA-Z_]+[\w\-_öäü]*$/.test(o))return void alert(o+" is an invalid key. Please only use letters and numbers as first character and then letters, numbers, dash or underscore.");this.printessTranslations=this.addKeyAtPath(this.printessTranslations,e.split("."),o,t);const r=new Map(this.newKeys);r.delete(e),this.newKeys=r,this.openPaths.has(e)||this.openPaths.add(e)}addKeyAtPath(e,t,o,r){if(!t.length)return"start"===r?{[o]:"",...e}:{...e,[o]:""};const[i,...a]=t;return Object.keys(e[i]).includes(o)?(alert("key '"+o+"' already exists in '"+i+"'"),e):{...e,[i]:this.addKeyAtPath(e[i],a,o,r)}}updateValue(e,t,o,r){this.printessTranslations=this.updateValueAtPath(this.printessTranslations,e.split("."),t,o),this.customerChangedKeys=r?this.customerChangedKeys.add(`${e}.${t}`):this.customerChangedKeys}updateValueAtPath(e,t,o,r){if(!t.length)return{...e,[o]:r};const[i,...a]=t;return{...e,[i]:this.updateValueAtPath(e[i],a,o,r)}}deleteKey(e,t){this.printessTranslations=this.deleteKeyAtPath(this.printessTranslations,e.split("."),t),this.customerChangedKeys.delete(`${e}.${t}`),this.deletedKeys.add(`${e}.${t}`)}deleteKeyAtPath(e,t,o){if(!t.length){const t={};for(const r in e)r!==o&&(t[r]=e[r]);return t}const[r,...i]=t;return{...e,[r]:this.deleteKeyAtPath(e[r],i,o)}}toggleOpen(e){const t=new Set(this.openPaths);t.has(e)?t.delete(e):t.add(e),this.openPaths=t}getNewKeyInput(e,t){return x`
      <wc-input 
        placeholder="new key" 
        color="green"
        .value=${this.newKeys.get(e)??""} 
        @text-input=${t=>this.setNewKey(t.detail.value,e)} 
        @keydown=${o=>"Enter"===o.key&&this.addNewKey(e,t)}
      ></wc-input>
    `}renderTranslationRow(e,t,o){return x`
      <div class="row">
        <label>${e}:</label>
        <wc-input
          type="text"
          .value=${t}
          .placeholder=${t}
          .callback=${r=>this.updateValue(o,e,r,t)}
          .deleteInput=${!0}
          @delete-input=${()=>this.deleteKey(o,e)}
        ></wc-input>
      </div>
    `}renderNamespaceContainer(e,t,o){const r=this.openPaths.has(o);return x`
      <div class="namespace-container" style="${o.split(".").length>1?"background: var(--printess-lightgray);":""}">
        ${this.renderNamespaceHeader(e,o,r)}
        ${r?this.renderNamespaceContent(t,o):""}
      </div>
    `}renderTranslationItem(e,t,o){const r=o?`${o}.${e}`:e;return"string"==typeof t?this.renderTranslationRow(e,t,o):this.renderNamespaceContainer(e,t,r)}renderNamespaceContent(e,t){return x`
      <div class="namespace-content">
        ${this.renderTranslationContainer(e,t)}
      </div>
      
      <div class="new-key-container">
        ${this.getNewKeyInput(t,"end")}
        <wc-button
          icon="plus"
          caption="Add Key"
          color="green"
          size="md"
          @click=${()=>this.addNewKey(t,"end")}
        ></wc-button>
      </div>
    `}renderNamespaceHeader(e,t,o){return x`
      <div class="namespace-header">
        <div class="namespace-title" @click=${()=>this.toggleOpen(t)}>
          <wc-icon
            primarycolor="black"
            icon="carret-down-solid"
            style=${o?"":"transform: rotate(-90deg);"}
          ></wc-icon>
          <span>${e}</span>
        </div>
        
        <div class="plus-btn">
          ${this.getNewKeyInput(t,"start")}
          <wc-icon
            primarycolor="magenta"
            icon="plus"
            @click=${()=>this.addNewKey(t,"start")}
          ></wc-icon>
        </div>
      </div>
    `}renderTranslationContainer(e,t=""){return x`
      ${Object.entries(e).map(([e,o])=>this.renderTranslationItem(e,o,t))}
    `}render(){const e=this.filterTranslations(this.printessTranslations,this.searchTerm),t="en"===this.activeLanguage||"de"===this.activeLanguage;return x`
      <div class="modal pink">
        <div class="modal-wrapper">
          <div class="modal-header">
            <span class="modal-title">CUSTOM Translation Table</span>
            <wc-icon icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content ${this.loading?"loading":""}">
            ${this.loading?x`<div class="spinner"></div>`:""}
            <div class="header">
              <h3>
                Select Language:
              </h3>
              <wc-input 
                type="select" 
                .value=${this.activeLanguage} 
                .options=${this.languageKeys} 
                .callback=${e=>this.changeLanguage(e)}
              ></wc-input>
              <wc-input 
                class="search-input"
                type="search"
                .value=${this.searchTerm} 
                placeholder="Search for translation keys and values ..."
                @text-input=${e=>this.handleSearch(e.detail.value)}
              />
            </div>
            <p style="font-size: 14px; margin-bottom: 30px;">
              You can change the language above. If no custom translations exist for the selected language yet, simply click the <b>plus button</b> to add it to your custom translations.
            </p>
            
            <div class="button-wrapper">
              <wc-input 
                color="blue"
                .value=${this.namespace} 
                placeholder="New namespace" 
                @text-input=${e=>this.namespace=e.detail.value}
                @keydown=${e=>"Enter"===e.key&&this.addNamespace()}
              ></wc-input>
              <wc-button icon="plus" caption="Add namespace" color="blue" size="md" @click=${this.addNamespace}></wc-button>
            </div>

            ${Object.keys(e).length?this.renderTranslationContainer(e):""}            
          </div>

          <div class="modal-footer">
            <div class="button-wrapper">
              ${t?x`
                <wc-button 
                  caption="Translate '${this.activeLanguage}' to other languages" 
                  color="light-pink" size="lg" style="margin-right: auto;"
                  @click=${()=>this.saveTranslation("translate")}
                ></wc-button>
              `:""}
              <wc-button caption="Cancel" color="light-pink" size="lg" @click=${()=>this.closeDialog()}></wc-button>
              <wc-button caption="Save Translation Table" color="light-pink" size="lg" @click=${()=>this.saveTranslation("close")}></wc-button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1X([e$3({type:String})],WcEditorSaasTranslations.prototype,"language",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"openPaths",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"localStorageItems",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"customerChangedKeys",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"deletedKeys",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"namespace",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"searchTerm",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"activeLanguage",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"printessTranslations",void 0),__decorate$1X([t$1()],WcEditorSaasTranslations.prototype,"loading",void 0),WcEditorSaasTranslations=__decorate$1X([e$4("wc-editor-saas-translations")],WcEditorSaasTranslations);var __decorate$1W=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcCardPrintessTranslations=class extends s$1{constructor(){super(...arguments),this.translationsEditorOpen=!1}static get styles(){return[i$4`
      p {
        font-size: 14px;
      }

      .translation-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 4px;
        padding: 20px;
        min-height: 200px;
        background-color: var(--printess-lightpink);
        border-bottom: 2px solid var(--printess-pink);
      }
      .header {
        font-weight: bold;
        margin: 8px 0px;
      }
    `]}openTranslationEditor(){if(this.translationsEditorOpen)return;this.translationsEditorOpen=!0;if("gy8z44EmLiZ0vrUKrXlWtiZY15D2"===currentUser.id){(new WcEditorSaasTranslations).showDialog(e=>{e&&(this.translationsEditorOpen=!1)})}else{(new WcEditorPrintessTranslations).showDialog(e=>{e&&(this.translationsEditorOpen=!1)})}}render(){return x`
      <div class="translation-card">
        <span class="header">Edit Printess Interface Texts</span>

        <p>
          Adjust the standard Buyer Side interface labels and system messages.
          <br><br>
          This table contains predefined Printess namespaces. You can modify only text values. 
          This ensures system stability while allowing label customization.
        </p>

        <wc-button 
          caption="Open Printess Translation Table" 
          size="sm" 
          color="pink"
          @click=${this.openTranslationEditor}
        ></wc-button>
      </div>
    `}};__decorate$1W([t$1()],WcCardPrintessTranslations.prototype,"translationsEditorOpen",void 0),WcCardPrintessTranslations=__decorate$1W([e$4("wc-card-printess-translations")],WcCardPrintessTranslations);const languageIdentifiers=[{value:"0x0001",identifier:"ar",language:"Arabic"},{value:"0x001f",identifier:"tr",language:"Turkish"},{value:"0x7804",identifier:"zh",language:"Chinese"},{value:"0x001b",identifier:"sk",language:"Slovak"},{value:"0x0024",identifier:"sl",language:"Slovenian"},{value:"0x003b",identifier:"se",language:"Swedish"},{value:"0x0019",identifier:"ru",language:"Russian"},{value:"0x0002",identifier:"bg",language:"Bulgarian"},{value:"0x0005",identifier:"cs",language:"Czech"},{value:"0x0006",identifier:"da",language:"Danish"},{value:"0x0007",identifier:"de",language:"German"},{value:"0x0009",identifier:"en-GB",language:"English, Great Britain"},{value:"0x0009",identifier:"en-US",language:"English, USA"},{value:"0x000a",identifier:"es",language:"Spanish"},{value:"0x000b",identifier:"fi",language:"Finnish"},{value:"0x000c",identifier:"fr",language:"French"},{value:"0x0025",identifier:"et",language:"Estonian"},{value:"0x0026",identifier:"lv",language:"Latvian"},{value:"0x0027",identifier:"lt",language:"Lithuanian"},{value:"0x040e",identifier:"hu",language:"Hungarian"},{value:"0x0021",identifier:"id",language:"Indonesian"},{value:"0x0022",identifier:"uk",language:"Ukrainian"},{value:"0x0010",identifier:"it",language:"Italian"},{value:"0x0011",identifier:"ja",language:"Japanese"},{value:"0x0012",identifier:"ko",language:"Korean"},{value:"0x0013",identifier:"nl",language:"Dutch"},{value:"0x0014",identifier:"no",language:"Norwegian"},{value:"0x0015",identifier:"pl",language:"Polish"},{value:"0x7c14",identifier:"nb",language:"Norwegian Bokmål"},{value:"0x0816",identifier:"pt-PT",language:"Portuguese, Portugal"},{value:"0x0416",identifier:"pt-BR",language:"Portuguese, Brazil"},{value:"0x0018",identifier:"ro",language:"Romanian"}];var __decorate$1V=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogTranslationAdd=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
        z-index: 110;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
      }
      
      .error-msg {
        color: #d20064;
        font-size: 12px;
        font-family: var(--printess-text-font);
      }

      .error {
        border: 1px solid #d20064;
      }
    `]}connectedCallback(){super.connectedCallback()}constructor(e){super(),this.key="",this.errorMsg="",this.languageKeys=[],this.color="pink",this.backdrop=new WcBackdrop,this.backdrop.style.zIndex="100",this.languageKeys=e}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}addKey(){this.languageKeys.includes("translation."+this.key)?this.errorMsg="Key already exists. Please enter a different one!":(this.callback&&this.callback(this.key),this.closeDialog())}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper ${this.color}">
          <div class="modal-header">
            <slot name="title" class="modal-title">Add Translation Key</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <p>Add a new translation key:</p>
            <span class="error-msg" style="display: ${this.errorMsg?"block":"none"}"> ${this.errorMsg}</span>

            <input 
              class=${this.errorMsg?"error":""}
              @input=${()=>this.errorMsg=""}
              @change=${e=>this.key=e.target.value.split(" ")[0]} 
              name="language-code" 
              type="text" 
              list="language-code" 
              placeholder="Translation key ..."
            >
            <datalist id="language-code">
              ${languageIdentifiers.sort((e,t)=>e.language.localeCompare(t.language)).map(e=>x`<option value='${e.identifier} - ${e.language}'></option>`)}
            </datalist>
            
            <button class="submit" @click=${this.addKey}>Add Translation Key</button>
          </div>
        </div>
      </div>
    `}};__decorate$1V([e$3({type:String})],WcDialogTranslationAdd.prototype,"key",void 0),__decorate$1V([e$3({type:String})],WcDialogTranslationAdd.prototype,"errorMsg",void 0),__decorate$1V([e$3({type:Array})],WcDialogTranslationAdd.prototype,"languageKeys",void 0),__decorate$1V([e$3({type:String})],WcDialogTranslationAdd.prototype,"color",void 0),WcDialogTranslationAdd=__decorate$1V([e$4("wc-dialog-translation-add")],WcDialogTranslationAdd);var __decorate$1U=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcEditorCustomTranslations=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
        .modal {
          padding: 0;
          align-content: center;
        }

        .modal-wrapper {
          min-width: 70vw;
        }
        .modal.mobile .modal-wrapper {
          width: 100%;
        }

        .modal-header {
          padding: 0 20px;
        }
        .modal.mobile .modal-header {
          margin: 0;
        }

        .modal-header wc-icon {
          margin: 0px;
          width: 25px;
          height: 25px;
        }

        .modal-content {
          padding-top: 0px;
          max-height: 60vh;
          position: relative;
        }
        .modal-content.loading {
          pointer-events: none;
          opacity: 0.6;
        }
        .modal.mobile .modal-content {
          max-height: unset;
        }
          
        .spinner,
        .spinner:after {
          border-radius: 50%;
          width: 5em;
          height: 5em;
        }
        .spinner {
          font-size: 20px;
          right: 50%;
          top: 50%;
          position: absolute;
          border-top: 0.5em solid rgba(255,255,255, 0.2);
          border-right: 0.5em solid rgba(255,255,255, 0.2);
          border-bottom: 0.5em solid rgba(255,255,255, 0.2);
          border-left: 0.5em solid var(--printess-red);
          -webkit-transform: translateZ(0);
          -ms-transform: translateZ(0);
          transform: translateZ(0);
          -webkit-animation: load8 1.1s infinite linear;
          animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
          0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
        @keyframes load8 {
          0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }

        .modal-controls {
          display: flex;
          gap: 5px;
        }

        .header {
          display: grid;
          grid-template-columns: 165px 120px 165px auto;
          align-items: center;
          gap: 10px;
        }
        .modal.mobile .header {
          grid-template-columns: 140px 120px auto;
        }

        .header .search-input {
          max-width: 400px;
          margin-left: auto;
        }
        .modal.mobile .header .search-input {
          min-width: 100px;
          max-width: 100%;
          margin-left: 0px;
          grid-column: 1 / 4;
        }

        .row {
          display: flex;
          gap: 10px;
          align-items: center;
        }

        label {
          white-space: nowrap;
        }

        wc-input {
          margin-bottom: 0;
          width: 100%;
        }

        .new-key-container {
          display: flex;
          align-items: center;
          flex-direction: row;
          gap: 10px;
          margin-right: 0.5rem;
          margin-bottom: 0.5rem;
        }

        .new-key-input {
          width: 150px;
          margin: 0;
          padding: 5px;
        }

        .modal-footer {
          background: var(--printess-pink);
          padding: 10px 20px;
        }

        .button-wrapper {
          width: 100%;
          display: flex;
          gap: 10px;
          flex-direction: row;
          justify-content: flex-end;
        }

        .add-custom-field-container {
          margin-top: 10px;
          padding: 10px;
          border: 1px solid var(--printess-pink);
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .namespace-container {
          display: flex;
          flex-direction: column;
          gap: 3px;
          border: 1px solid #eee;
          border-radius: 8px;
          margin: 0.5rem 0;
          padding-left: 0.5rem;
          background: #fafafa;
        }
        .namespace-header {
          display: grid;
          grid-template-columns: 1fr 45px 1px auto;
        }
        .namespace-title {
          display: flex;
          flex-direction: row;
          align-items: center;
          cursor: pointer;
          font-weight: bold;
          padding: 0.5rem 0;
          width: 100%;
        }
        .namespace-content {
          margin-top: 0.5rem;
          display: flex;
          flex-direction: column;
          padding-right: 0.5rem;
          padding-bottom: 0.5rem;
          gap: 5px;
        }
        .plus-btn, .delete-btn {
          background: #eee;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .delete-btn {
          border-radius: 0px!important;
        }
        .plus-btn {
          padding: 0.5rem 0 0.5rem 0.5rem;
          border-top-right-radius: 8px;
        }
        .delete-btn > div {
          cursor: pointer;
        }
        .separator {
          width: 1px;
          height: 100%;
        }

        wc-icon {
          width: 20px;
          height: 20px;
          margin: 5px 10px;
        }
  `]}constructor(){super(),this.language="",this.openPaths=new Set,this.changedTranslationKeys=new Set,this.customerChangedKeys=new Set,this.localStorageItems=new Set,this.namespace="",this.searchTerm="",this.activeLanguage="en",this.printessTranslations={},this.customTranslations={},this.editableTranslations={},this.lockedTranslations={},this.loading=!1,this.languageKeys=["en","ar","bg","cs","da","de","es","et","fi","fr","hu","id","it","ja","ko","lt","lv","nb","nl","pl","pt-BR","pt-PT","ro","ru","se","sk","sl","tr","uk","zh"],this.customerLanguages=[],this.newKeys=new Map,this.deletedKeys=new Set,this.printessOwnedNamespaces=["ui","alert","errors"],this.backdrop=new WcBackdrop}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2?showError(t):console.log("User settings have been updated")}async showDialog(e){this.callback=e,await this.updateTranslationsUi("en"),document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){this.newKeys.clear(),this.deletedKeys.clear(),this.openPaths.clear(),this.changedTranslationKeys.clear(),this.customerChangedKeys.clear();for(const e of this.localStorageItems)localStorage.removeItem(e);this.localStorageItems=new Set,this.callback&&this.callback(!0),document.body.removeChild(this.backdrop),document.body.removeChild(this)}async checkForTranslationChanges(){if("en"!==this.activeLanguage&&"de"!==this.activeLanguage)return Promise.resolve();const e=Array.from(this.customerChangedKeys),t=Array.from(this.deletedKeys);return 0===e.length&&0===this.deletedKeys.size?Promise.resolve():new Promise(o=>{new WcDialogRemoveTranslationKeys(this.activeLanguage,e,t).showDialog(async r=>{if(!r)return void o();const i=[...e,...t],a=this.customerLanguages.filter(e=>e!==this.activeLanguage);for(const e of a){const t=await api.readUserSettings({keys:["translation."+e]});if(t instanceof ServerErrorResponse$2){console.error(t.message);continue}let o={};try{const r=t["translation."+e];r&&(o=JSON.parse(r))}catch{console.warn(`Invalid or empty JSON for ${e}`);continue}i.forEach(e=>this.deleteNestedKey(o,e)),await api.writeUserSetting({key:"translation."+e,json:JSON.stringify(o,void 0,2)})}o()})})}deleteNestedKey(e,t){const o=t.split(".");let r=e;for(let e=0;e<o.length-1;e++){if("object"!=typeof r[o[e]]||null===r[o[e]])return;r=r[o[e]]}delete r[o[o.length-1]],this.customerChangedKeys.delete(t)}async saveTranslation(e){const t=this.getTranslationJson();this.loading=!0,await this.writeUserSetting({key:`translation.${this.activeLanguage}`,json:t});for(const e of this.localStorageItems){if(e==="translation."+this.activeLanguage)continue;const t=localStorage.getItem(e);t&&(await this.writeUserSetting({key:e,json:t}),this.localStorageItems.delete(e),localStorage.removeItem(e))}"translate"===e?(await this.checkForTranslationChanges(),await this.translateToOther(this.activeLanguage)):this.closeDialog()}getTranslationJson(){const e=this.buildCustomTranslations(),t=structuredClone(this.customTranslations);return this.deepMerge(t,e),this.applyDeletions(t),JSON.stringify(t,void 0,2)}applyDeletions(e){for(const t of this.deletedKeys){const o=t.split("."),r=o.pop();let i=e;for(const e of o){if(null==i[e]||"object"!=typeof i[e]){i=null;break}i=i[e]}if(i&&r){const e=o.join("."),t=this.getPrintessValueAtPath(e,r);void 0!==t?i[r]=t:delete i[r]}}}deepMerge(e,t){for(const[o,r]of Object.entries(t))"object"==typeof r&&null!==r&&"object"==typeof e[o]&&null!==e[o]?this.deepMerge(e[o],r):e[o]=r}buildCustomTranslations(){const e={},t={...this.editableTranslations};for(const[o,r]of Object.entries(t)){const t=this.compareWithPrintess(r,this.printessTranslations[o]);Object.keys(t).length&&(e[o]=t)}return e}compareWithPrintess(e,t){if(!t)return{...e};const o={};for(const[r,i]of Object.entries(e))if("object"==typeof i&&null!==i){const e=this.compareWithPrintess(i,t[r]);Object.keys(e).length&&(o[r]=e)}else i!==t[r]&&(o[r]=i);return o}async updateTranslationsUi(e){this.loading=!0,this.newKeys.clear(),this.deletedKeys.clear(),this.customerChangedKeys.clear(),await this.loadLanguageKeys(e),await this.loadAllTranslations();const t=localStorage.getItem("translation."+e);t&&(this.customTranslations=JSON.parse(t)),this.buildTranslationView()}async loadLanguageKeys(e){if(this.customerLanguages.length)return;const t=await api.readUserTranslations();if(t instanceof ServerErrorResponse$2)showError(t);else{const o=Object.entries(t).filter(e=>e[0].includes("translation")&&!e[0].endsWith("."));if(0===o.length)return;this.customerLanguages=o.map(e=>e[0].replace("translation.","")).sort(),this.customerLanguages.includes(e)?this.activeLanguage=e:this.activeLanguage=this.customerLanguages[0]}}async changeLanguage(e){const t=this.getTranslationJson();localStorage.setItem("translation."+this.activeLanguage,t),this.localStorageItems.add("translation."+this.activeLanguage),this.activeLanguage=e,this.updateTranslationsUi(e)}async translateToOther(e){try{await api.translate(e)}finally{this.loading=!1}}async addTranslationKey(){const e=new WcDialogTranslationAdd(this.languageKeys);return e.color="blue",e.showDialog(async e=>{if(this.customerLanguages.push(e),e){if(!this.languageKeys.includes(e)){const t=localStorage.getItem("translation.en");t&&this.writeUserSetting({key:"translation."+e,json:t})}this.loading=!0,await this.writeUserSetting({key:`translation.${e}`,json:"{}"}),await this.translateToOther("en"),this.activeLanguage=e,this.updateTranslationsUi(e)}}),e}async loadAllTranslations(){const e=this.activeLanguage??"en",t=await api.readUserSettings({keys:["translation."+e]});t instanceof ServerErrorResponse$2?console.error(t.message):(this.printessTranslations=this.languageKeys.includes(e)?JSON.parse(t["printess-translation."+e]):{},this.customTranslations=this.customerLanguages.includes(e)?JSON.parse(t["translation."+e]):{})}buildTranslationView(){const e=this.printessOwnedNamespaces,t={},o={},r=new Set,i=this.printessTranslations??{},a=this.customTranslations??{},s=new Set([...Object.keys(a),...Object.keys(i)]),n=Object.keys(i);for(const o of s){if(e.includes(o))continue;const s=i[o]??{},n=a[o]??{};t[o]={};const l=new Set([...Object.keys(n),...Object.keys(s)]);for(const e of l)void 0!==n[e]?(t[o][e]=n[e],void 0!==s[e]&&s[e]===n[e]||r.add(`${o}.${e}`)):t[o][e]=s[e]}for(const t of e)if(i[t]){o[t]={};for(const e of Object.keys(i[t]))void 0!==a[t]?.[e]?(o[t][e]=a[t][e],a[t][e]!==i[t][e]&&r.add(`${t}.${e}`)):o[t][e]=i[t][e]}this.editableTranslations=t,this.lockedTranslations=o,this.changedTranslationKeys=r,this.printessNamespaces=n,this.loading=!1}handleSearch(e){this.searchTerm=e,e&&this.expandAllMatchingPaths(this.editableTranslations)}filterTranslations(e,t){if(!t)return e;const o=t.toLowerCase();let r=!1;const i={};for(const[t,a]of Object.entries(e)){const e=t.toLowerCase().includes(o);if("string"==typeof a){const s=a.toLowerCase().includes(o);(e||s)&&(i[t]=a,r=!0)}else{const s=this.filterTranslations(a,o);(Object.keys(s).length||e)&&(i[t]=e?a:s,r=!0)}}return r?i:{}}expandAllMatchingPaths(e,t=""){Object.entries(e).forEach(([e,o])=>{const r=t?`${t}.${e}`:e;this.openPaths.add(r),"object"==typeof o&&this.expandAllMatchingPaths(o,r)})}setNewKey(e,t){e=e.trim().replace(/\s+/g,"-");const o=new Map(this.newKeys);o.set(t,e),this.newKeys=o,this.requestUpdate()}addNamespace(){const e=this.namespace.trim().replace(/\s+/g,"-");if(!e)return;if(this.editableTranslations[e])return void alert("key '"+e+"' already exists");/^[0-9a-zA-Z_]+[\w\-_öäü]*$/.test(e)?(this.editableTranslations={[e]:{},...this.editableTranslations},this.namespace=""):alert(e+" is an invalid key. Please only use letters and numbers as first character and then letters, numbers, dash or underscore.")}handleNestedDeleteKey(e,t,o){if(t.includes(".")){const e=t.substring(0,t.lastIndexOf("."));this.deleteKey(e,o)}else this.deleteNamespace(e,o)}deleteNamespace(e,t){e.stopPropagation();if("yes"!==prompt(`Are you sure you want to delete namespace "${t}"? Enter yes to delete.`,"no"))return;if(!this.editableTranslations[t])return;const o={...this.editableTranslations};delete o[t],this.editableTranslations=o,this.deletedKeys.add(t);const r=new Set([...this.openPaths].filter(e=>!e.startsWith(t)));this.openPaths=r}addNewKey(e,t){const o=this.newKeys.get(e);if(!o)return;if(!/^[0-9a-zA-Z_]+[\w\-_öäü]*$/.test(o))return void alert(o+" is an invalid key. Please only use letters and numbers as first character and then letters, numbers, dash or underscore.");this.editableTranslations=this.addKeyAtPath(this.editableTranslations,e.split("."),o,t);const r=new Map(this.newKeys);r.delete(e),this.newKeys=r,this.changedTranslationKeys.add(e+"."+o),this.openPaths.has(e)||this.openPaths.add(e)}addKeyAtPath(e,t,o,r){if(!t.length)return"start"===r?{[o]:"",...e}:{...e,[o]:""};const[i,...a]=t;return Object.keys(e[i]).includes(o)?(alert("key '"+o+"' already exists in '"+i+"'"),e):{...e,[i]:this.addKeyAtPath(e[i],a,o,r)}}updateValue(e,t,o,r){this.printessOwnedNamespaces.includes(e)?this.lockedTranslations=this.updateValueAtPath(this.lockedTranslations,e.split("."),t,o):this.editableTranslations=this.updateValueAtPath(this.editableTranslations,e.split("."),t,o),this.customerChangedKeys=r?this.customerChangedKeys.add(`${e}.${t}`):this.customerChangedKeys,this.changedTranslationKeys=new Set(this.changedTranslationKeys).add(`${e}.${t}`)}updateValueAtPath(e,t,o,r){if(!t.length)return{...e,[o]:r};const[i,...a]=t;return{...e,[i]:this.updateValueAtPath(e[i],a,o,r)}}deleteKey(e,t){const o=this.getPrintessValueAtPath(e,t),r=e.split(".")[0],i=this.printessOwnedNamespaces.includes(r)?"lockedTranslations":"editableTranslations";this[i]=void 0!==o?this.updateValueAtPath(this[i],e.split("."),t,o):this.deleteKeyAtPath(this[i],e.split("."),t),this.changedTranslationKeys.delete(`${e}.${t}`),this.customerChangedKeys.delete(`${e}.${t}`),this.deletedKeys.add(`${e}.${t}`)}getPrintessValueAtPath(e,t){let o=this.printessTranslations;for(const t of e.split(".")){if(null==o||"object"!=typeof o)return;o=o[t]}return o?.[t]}deleteKeyAtPath(e,t,o){if(!t.length){const t={};for(const r in e)r!==o&&(t[r]=e[r]);return t}const[r,...i]=t;return{...e,[r]:this.deleteKeyAtPath(e[r],i,o)}}toggleOpen(e){const t=new Set(this.openPaths);t.has(e)?t.delete(e):t.add(e),this.openPaths=t}getNewKeyInput(e,t){return x`
      <wc-input 
        placeholder="new key" 
        color="green"
        .value=${this.newKeys.get(e)??""} 
        @text-input=${t=>this.setNewKey(t.detail.value,e)} 
        @keydown=${o=>"Enter"===o.key&&this.addNewKey(e,t)}
      ></wc-input>
    `}renderTranslationRow(e,t,o){const r=this.changedTranslationKeys.has(`${o}.${e}`),i=this.printessNamespaces.includes(o)&&!r;return x`
      <div class="row">
        <label style="${i&&!r?"color: rgb(210, 0, 100);":""}">${e}:</label>
        <wc-input
          type="text"
          .value=${r||!i?t:""}
          .placeholder=${t}
          .callback=${r=>this.updateValue(o,e,r,t)}
          .deleteInput=${!i}
          @delete-input=${()=>this.deleteKey(o,e)}
        ></wc-input>
      </div>
    `}renderNamespaceContainer(e,t,o){const r=this.openPaths.has(o),i=o.split(".")[0],a=!this.printessOwnedNamespaces.includes(i),s=!this.printessNamespaces.includes(i);return x`
      <div class="namespace-container" style="${o.split(".").length>1?"background: var(--printess-lightgray);":""}">
        ${this.renderNamespaceHeader(e,o,r,a,s)}
        ${r?this.renderNamespaceContent(t,o,a):""}
      </div>
    `}renderTranslationItem(e,t,o){const r=o?`${o}.${e}`:e;return"string"==typeof t?this.renderTranslationRow(e,t,o):this.renderNamespaceContainer(e,t,r)}renderNamespaceContent(e,t,o){return x`
      <div class="namespace-content">
        ${this.renderTranslationContainer(e,t)}
      </div>

      ${o?x`
            <div class="new-key-container">
              ${this.getNewKeyInput(t,"end")}
              <wc-button
                icon="plus"
                caption="Add Key"
                color="green"
                size="md"
                @click=${()=>this.addNewKey(t,"end")}
              ></wc-button>
            </div>
          `:""}
    `}renderNamespaceHeader(e,t,o,r,i){return x`
      <div class="namespace-header">
        <div class="namespace-title" @click=${()=>this.toggleOpen(t)}>
          <wc-icon
            primarycolor="black"
            icon="carret-down-solid"
            style=${o?"":"transform: rotate(-90deg);"}
          ></wc-icon>
          <span>${e}</span>
        </div>

        ${i?x`
          <div class="delete-btn" @click=${o=>this.handleNestedDeleteKey(o,t,e)} style="${o?"":"border-bottom-right-radius: 8px"}">
            <wc-icon primarycolor="magenta" icon="trash"></wc-icon>
          </div>
        `:x`<div></div>`}
        ${r?x`
          <div class="separator"></div>
          <div class="plus-btn">
            ${this.getNewKeyInput(t,"start")}
            <wc-icon
              primarycolor="magenta"
              icon="plus"
              @click=${()=>this.addNewKey(t,"start")}
            ></wc-icon>
          </div>
        `:x`<div></div>`}
      </div>
    `}renderTranslationContainer(e,t=""){return x`
      ${Object.entries(e).map(([e,o])=>this.renderTranslationItem(e,o,t))}
    `}render(){const e=this.filterTranslations(this.editableTranslations,this.searchTerm),t="en"===this.activeLanguage||"de"===this.activeLanguage,o=this.customerLanguages.includes(this.activeLanguage),r=config.isMobile;return x`
      <div class="modal pink ${r?"mobile":""}">
        <div class="modal-wrapper">
          <div class="modal-header">
            <span class="modal-title">CUSTOM Translation Table</span>
            <wc-icon icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content ${this.loading?"loading":""}">
            ${this.loading?x`<div class="spinner"></div>`:""}
            <div class="header">
              ${config.isMobile?x`
                <p>Select Language:</p>
              `:x`
                <h3>Select Language:</h3>
              `}
              <wc-input 
                type="select" 
                color="pink"
                .value=${this.activeLanguage} 
                .options=${this.customerLanguages} 
                .callback=${e=>this.changeLanguage(e)}
              ></wc-input>
              <wc-button
                icon="plus"
                caption="Add Language"
                color="pink"
                size="md"
                @click=${()=>this.addTranslationKey()}
              ></wc-button>
              <wc-input 
                class="search-input"
                type="search"
                .value=${this.searchTerm} 
                placeholder="Search for translation keys and values ..."
                @text-input=${e=>this.handleSearch(e.detail.value)}
              />
            </div>
            <p style="font-size: 14px; margin-bottom: 30px;">
              You can change the language above. If no custom translations exist for the selected language yet, simply click the <b>plus button</b> to add it to your custom translations.
            </p>
            
            ${o?x`
              <div class="button-wrapper">
                <wc-input 
                  color="blue"
                  .value=${this.namespace} 
                  placeholder="New namespace" 
                  @text-input=${e=>this.namespace=e.detail.value}
                  @keydown=${e=>"Enter"===e.key&&this.addNamespace()}
                ></wc-input>
                <wc-button icon="plus" caption="Add namespace" color="blue" size="md" @click=${this.addNamespace}></wc-button>
              </div>

              ${Object.keys(e).length?this.renderTranslationContainer(e):""}
            `:""}

            ${Object.keys(e).length?"":x`
              <p>
                No Translation Keys found${!o&&this.activeLanguage?x`:
                <wc-button 
                  caption="Add '${this.activeLanguage}' to custom translations" 
                  color="blue" size="md" margin="0px 10px"
                  @click=${()=>this.addTranslationKey()}
                ></wc-button>
                  `:""}
              </p>
            `}
          </div>

          <div class="modal-footer">
            <div class="button-wrapper">
              ${t?x`
                <wc-button 
                  caption="Translate '${this.activeLanguage}' to other languages" 
                  color="light-pink" size="lg" style="margin-right: auto;"
                  @click=${()=>this.saveTranslation("translate")}
                ></wc-button>
              `:""}
              <wc-button caption="Cancel" color="light-pink" size="lg" @click=${()=>this.closeDialog()}></wc-button>
              <wc-button caption="Save Translation Table" color="light-pink" size="lg" @click=${()=>this.saveTranslation("close")}></wc-button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1U([e$3({type:String})],WcEditorCustomTranslations.prototype,"language",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"openPaths",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"changedTranslationKeys",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"customerChangedKeys",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"localStorageItems",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"namespace",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"searchTerm",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"activeLanguage",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"printessTranslations",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"customTranslations",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"editableTranslations",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"lockedTranslations",void 0),__decorate$1U([t$1()],WcEditorCustomTranslations.prototype,"loading",void 0),WcEditorCustomTranslations=__decorate$1U([e$4("wc-editor-custom-translations")],WcEditorCustomTranslations);var __decorate$1T=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcCardCustomTranslations=class extends s$1{constructor(){super(...arguments),this.translationsEditorOpen=!1}static get styles(){return[i$4`
      p {
        font-size: 14px;
      }
      
      .translation-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 4px;
        padding: 20px;
        min-height: 200px;
        background-color: var(--printess-lightpink);
        border-bottom: 2px solid var(--printess-pink);
      }
      .translation-card.blue {
        background-color: var(--printess-lightblue);
        border-bottom: 2px solid var(--printess-blue);
      }
      .header {
        font-weight: bold;
        margin: 8px 0px;
      }
    `]}openTranslationEditor(){if(this.translationsEditorOpen)return;this.translationsEditorOpen=!0;if("gy8z44EmLiZ0vrUKrXlWtiZY15D2"===currentUser.id){(new WcEditorSaasTranslations).showDialog(e=>{e&&(this.translationsEditorOpen=!1)})}else{(new WcEditorCustomTranslations).showDialog(e=>{e&&(this.translationsEditorOpen=!1)})}}render(){return x`
      <div class="translation-card blue">
        <span class="header">Manage Custom Translations</span>

        <p>
          Create and manage your own namespaces and translation keys.
          <br><br>
          You can add, edit or remove keys and fully extend the translation system 
          to cover template values, labels, and additional interface elements.
        </p>

        <wc-button 
          .disabled=${this.translationsEditorOpen}
          caption="Open Custom Translation Table" 
          size="sm" 
          color="blue"
          @click=${this.openTranslationEditor}
        ></wc-button>
      </div>
    `}};__decorate$1T([t$1()],WcCardCustomTranslations.prototype,"translationsEditorOpen",void 0),WcCardCustomTranslations=__decorate$1T([e$4("wc-card-custom-translations")],WcCardCustomTranslations);var __decorate$1S=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogTranslationDelete=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }

      .modal-wrapper {
        width: auto;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
      }

      wc-button {
        width: 100%;
      }
    `]}connectedCallback(){super.connectedCallback()}constructor(e){super(),this.key="",this.backdrop=new WcBackdrop,this.key=e}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(e){this.callback&&this.callback(e),document.body.removeChild(this.backdrop),document.body.removeChild(this)}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Delete Translation</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog(!1)}></wc-icon>
          </div>

          <div class="modal-content">
            <p>Are you sure to delete the <span style="font-weight: 700;">${this.key}</span> translation table?</p>
            <div class="button-wrapper">
              <wc-button caption="Delete" size="lg" color="pink" width="full-width" @click=${()=>this.closeDialog(!0)}></wc-button>
              <wc-button caption="Cancel" size="lg" color="gray" width="full-width" @click=${()=>this.closeDialog(!1)}></wc-button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1S([e$3({type:String})],WcDialogTranslationDelete.prototype,"key",void 0),WcDialogTranslationDelete=__decorate$1S([e$4("wc-dialog-translation-delete")],WcDialogTranslationDelete);var __decorate$1R=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAceEditorPure=class extends s$1{constructor(e="",t="json"){super(),this.readonly=!1,this.maxLines=30,this.text=e,this.mode=t,this.attachShadow({mode:"open"}),this.shadowRoot?.appendChild(this.getTemplate())}getTemplate(){const e=document.createElement("template");return e.innerHTML='\n      <div class="fileName"></div>\n      <div class="codeSnippet"></div>\n    ',e.content.cloneNode(!0)}requestUpdate(e,t,o){super.requestUpdate(e,t,o),"text"===e&&this.initializeAce()}connectedCallback(){super.connectedCallback(),this.initializeAce()}initializeAce(){const e=this.mode,t=this.shadowRoot?.querySelector(".codeSnippet"),o=window.ace.edit(t,{theme:"ace/theme/tomorrow",mode:`ace/mode/${e}`,value:this.text,showPrintMargin:!1,readOnly:this.readonly,fontSize:12,maxLines:this.maxLines,minLines:"css"===e?10:20,highlightActiveLine:!0,highlightGutterLine:!1});o.session.setValue(this.text),o.on("blur",()=>{this.valueChangeCallback&&this.valueChangeCallback(o.getValue())}),o.renderer.attachToShadowRoot()}};__decorate$1R([e$3({type:String,attribute:!0})],WcAceEditorPure.prototype,"text",void 0),__decorate$1R([e$3({type:Boolean,attribute:!0})],WcAceEditorPure.prototype,"readonly",void 0),__decorate$1R([e$3({type:String})],WcAceEditorPure.prototype,"mode",void 0),__decorate$1R([e$3({type:Object,attribute:!0})],WcAceEditorPure.prototype,"valueChangeCallback",void 0),__decorate$1R([e$3({type:Number,attribute:!0})],WcAceEditorPure.prototype,"maxLines",void 0),WcAceEditorPure=__decorate$1R([e$4("wc-ace-editor-pure")],WcAceEditorPure);var __decorate$1Q=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const rx=/^[0-9a-zA-Z_]+[\w\-_öäü]*$/;function isValidJson(e){if("object"!=typeof e)return alert("Can only work with object. Please do not use anything else besides objects."),!1;const t=Object.keys(e);let o=!0;for(let r=0;r<t.length;r++){const i=e[t[r]];if(!rx.test(t[r]))return alert(t[r]+" is an invalid key. Please only use letters and numbers as first character and then letters, numbers, dash or underscore."),!1;i&&"string"!=typeof i&&(o=o&&isValidJson(i))}return o}let WcEditorFullJson=class extends s$1{static get styles(){return[dialogStyles$1,translationsStyles,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
        overflow: hidden;
      }

      .modal-wrapper {
        width: 100%;
        height: 100%;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-header wc-icon {
        margin: 0px 20px;
        width: 25px;
        height: 25px;
      }

      .modal-content {
        height: 100%;
        max-height: 100%;
        background: white;
        padding: 0px;
        overflow: auto;
      }

      .json-container {
        height: auto;
        border-bottom: 2px solid var(--printess-blue);
      }

      .icon-container {
        min-width: 50px;
        margin-top: 20px;
        display:flex;
        justify-content: center;
        flex-direction: column;
        margin-right: 15px;
        text-align: center;
        font-size: 10px;
      }

      .link-text {
        text-decoration: none;
        color: var(--printess-pink);
        cursor: pointer;
      }
      .link-text:hover {
        color: var(--printess-pinkHover);
      }

      .custom-css {
        background-color: var(--printess-blue);
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .info-button {
        background-color: transparent;
        border: none;
        padding: 0;
      }

      .css-icon {
        height: 25px;
        width: 25px;
        padding: 0
      }

      .button-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 10px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .jsonTitle {
          font-size: 14px;
          line-height: 36px;
          padding: 0 10px;
        }
      }

      .language-tabs-container {
        position: relative;
        width: 100%;
        margin: 0 auto;
      }

      .language-tabs {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        background-color: rgba(76, 156, 226, 0.1);
        border-bottom: 1px solid var(--printess-blue);
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
      }

      .language-tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
      }

      .lang-tab {
        padding: 7px 20px;
        cursor: pointer;
        flex: 0 0 auto;
        transition: background-color 0.2s;
      }

      .lang-tab:hover {
        background-color: rgba(76, 156, 226, 0.2);
      }

      .lang-tab.active {
        background-color: rgba(76, 156, 226, 0.3);
        font-weight: bold;
      }

      .scroll-button {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 30px;
        background-color: var(--printess-fatButtonBackground);
        color: white;
        border: none;
        border-radius: unset;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 18px;
      }

      .scroll-button.left {
        left: 0;
      }

      .scroll-button.right {
        right: 0;
      }
    `]}constructor(){super(),this.translation="",this.oldTranslation="",this.activeKey="",this.languageKeys=[],this.loading=!1,this.translating=!1,this.backdrop=new WcBackdrop}showDialog(){document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadTranslations(){const e=await api.readUserTranslations();if(e instanceof ServerErrorResponse$2)this.showError(e);else{const t=Object.entries(e).filter(e=>e[0].includes("translation")&&!e[0].endsWith("."));t.length>0?(this.activeKey=t.sort((e,t)=>this.compare(e,t))[0][0].split(".")[1],this.translation=t.sort((e,t)=>this.compare(e,t))[0][1]||JSON.stringify(jsonfile,void 0,4),this.oldTranslation=this.translation):(this.activeKey="en",this.translation=JSON.stringify(jsonfile,void 0,4),this.oldTranslation=this.translation),Object.entries(e).forEach(e=>e[0].includes("translation")&&this.languageKeys.push(e[0])),this.languageKeys.includes("translation.en")&&(this.activeKey="en",this.translation=e["translation.en"],this.oldTranslation=this.translation),this.requestUpdate(),await this.updateComplete,requestAnimationFrame(()=>this.updateScrollButtons())}}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2?this.showError(t):console.log("User settings have been updated")}async deleteUserSetting(e){const t=await api.deleteUserSetting(e);t instanceof ServerErrorResponse$2?this.showError(t):console.log("User setting has been removed")}connectedCallback(){super.connectedCallback(),this.loadTranslations(),window.addEventListener("resize",this.updateScrollButtons.bind(this))}disconnectedCallback(){window.removeEventListener("resize",this.updateScrollButtons.bind(this)),this.tabsContainer&&this.tabsContainer.removeEventListener("scroll",this.updateScrollButtons.bind(this)),super.disconnectedCallback()}firstUpdated(){this.tabsContainer&&this.tabsContainer.addEventListener("scroll",this.updateScrollButtons.bind(this)),requestAnimationFrame(()=>this.updateScrollButtons())}async setTranslationTable(e){const t="translation."+e,o=await api.readUserSettings({keys:[t]});o instanceof ServerErrorResponse$2?console.error(o.message):(this.translation=o[t],this.oldTranslation=this.translation,this.activeKey=e,this.requestUpdate(),await this.updateComplete,requestAnimationFrame(()=>this.updateScrollButtons()))}compare(e,t){return e<t?-1:e>t?1:0}renderLanguageKeys(){return this.languageKeys.length>0?x`${this.languageKeys.sort((e,t)=>this.compare(e,t)).map(e=>x`
        <div class="lang-tab ${this.activeKey===e.split(".")[1]?"active":""}" @click=${()=>this.setTranslationTable(e.split(".")[1])}>
          ${e.split(".")[1]}
        </div>`)}`:x`<div class="lang-tab active" @click=${()=>this.setTranslationTable("en")}>en</div>`}addNewKey(){const e=new WcDialogTranslationAdd(this.languageKeys);return e.showDialog(e=>{this.activeKey=e,this.languageKeys.push("translation."+e),this.translation=JSON.stringify(jsonfile,void 0,2),this.oldTranslation=this.translation,this.writeUserSetting({key:`translation.${e}`,json:this.translation}),requestAnimationFrame(()=>this.updateScrollButtons())}),e}openDialog(){this.addNewKey()}async translateToOther(){this.translating=!0;try{await api.translate(this.activeKey)}finally{this.translating=!1}}deleteCurrentTranslationTable(){const e=this.activeKey,t=new WcDialogTranslationDelete(e);return t.showDialog(t=>{if(t){this.deleteUserSetting({key:`translation.${e}`});let t=this.languageKeys.indexOf(`translation.${e}`);this.languageKeys=this.languageKeys.filter(t=>t!==`translation.${e}`),1===this.languageKeys.length?(this.activeKey=this.languageKeys[0].split(".")[1],this.setTranslationTable(this.activeKey)):this.languageKeys.length>1?(t=t-1<0?t:t-1,this.activeKey=this.languageKeys.sort((e,t)=>this.compare(e,t))[t].split(".")[1],this.setTranslationTable(this.activeKey)):(this.activeKey="en",this.translation=JSON.stringify(jsonfile,void 0,2),this.requestUpdate(),this.updateComplete.then(()=>{requestAnimationFrame(()=>this.updateScrollButtons())}))}}),t}async saveTranslation(){let e,t="";const o=this.activeKey;try{if(e=JSON.parse(this.translation),!isValidJson(e))return;if(!Object.keys(e).length){if("sure"!==prompt("The translations you want to save for "+o+" seem to be empty. Are you sure to proceed? Enter 'sure' to continue.","better not"))return}t=JSON.stringify(e,void 0,2)}catch(e){return void alert("Cannot save, the JSON is invalid: "+e)}this.loading=!0,this.checkForTranslationChanges(e),await this.writeUserSetting({key:`translation.${o}`,json:t}),this.translation=t,this.oldTranslation=t,window.setTimeout(()=>{this.loading=!1},500)}checkForTranslationChanges(e){if("en"!==this.activeKey&&"de"!==this.activeKey)return;let t={};try{t=JSON.parse(this.oldTranslation)}catch{console.warn("Old translation JSON is invalid or empty.")}const o=this.getTranslationChanges(t,e);if(o.length>0){new WcDialogRemoveTranslationKeys(this.activeKey,o,[]).showDialog(async e=>{if(!e)return;const t=this.languageKeys.filter(e=>e!=="translation."+this.activeKey);for(const e of t){const t=await api.readUserSettings({keys:[e]});if(t instanceof ServerErrorResponse$2){console.error(t.message);continue}let r={};try{const o=t[e];o&&(r=JSON.parse(o))}catch{console.warn(`Invalid or empty JSON for ${e}`);continue}o.forEach(e=>this.deleteNestedKey(r,e)),await api.writeUserSetting({key:e,json:JSON.stringify(r,void 0,2)})}})}}deleteNestedKey(e,t){const o=t.split(".");let r=e;for(let e=0;e<o.length-1;e++){if("object"!=typeof r[o[e]]||null===r[o[e]])return;r=r[o[e]]}delete r[o[o.length-1]]}getTranslationChanges(e,t,o=""){const r=[];for(const i of Object.keys(t)){const a=o?`${o}.${i}`:i,s=e?e[i]:void 0,n=t[i];if("object"==typeof n&&null!==n){const e=this.getTranslationChanges(s||{},n,a);r.push(...e)}else s&&s!==n&&r.push(a)}return r}async onDownload(){const e=this.activeKey??"en",t=await api.readUserSettings({keys:["translation."+e]});t instanceof ServerErrorResponse$2?console.error(t.message):this.download(t["printess-translation."+e]??t["translation."+e],"printess-translations-"+e+".json","text/json")}download(e,t,o){const r=document.createElement("a"),i=new Blob([e],{type:o});r.href=URL.createObjectURL(i),setTimeout(()=>{URL.revokeObjectURL(r.href)},13337),r.download=t,r.click()}updateScrollButtons(){if(!this.tabsContainer||!this.leftButton||!this.rightButton)return;const e=this.tabsContainer.scrollWidth-this.tabsContainer.clientWidth;this.leftButton.style.display=this.tabsContainer.scrollLeft>0?"flex":"none",this.rightButton.style.display=e>0?"flex":"none",this.rightButton.style.display=this.tabsContainer.scrollLeft<e?"flex":"none"}scrollTabs(e){this.tabsContainer?(this.tabsContainer.scrollBy({left:e,behavior:"smooth"}),setTimeout(this.updateScrollButtons,300)):console.warn("tabsContainer not found")}get maxLines(){const e=.7*window.innerHeight;return Math.floor(e/16)}render(){return x`
    <div class="modal">
      
        <div class="modal-wrapper blue">
          <div class="modal-header">
            <slot name="title" class="modal-title">Translation Tables</slot>
            <wc-icon primaryColor="toolbar" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="language-tabs-container">
              <button class="scroll-button left" @click=${()=>this.scrollTabs(-100)}>&#8249;</button>
              <div class="language-tabs">
                ${this.renderLanguageKeys()}
                <div class="lang-tab" @click=${this.openDialog} title="Add a translation key" style="margin-right: 20px;">+</div>
              </div>
              <button class="scroll-button right" @click=${()=>this.scrollTabs(100)}>&#8250;</button>
            </div>
            <div class="json-container">
              <wc-ace-editor-pure .maxLines=${this.maxLines} .text=${this.translation} .valueChangeCallback=${e=>this.translation=e}></wc-ace-editor-pure>
            </div>
            <div class="button-wrapper">
              <wc-button caption="Save" size="md" color="blue" .loading=${this.loading} loadingText="Saving..." @click=${this.saveTranslation}></wc-button>
              <wc-button caption="Delete" size="md" color="blue" @click=${this.deleteCurrentTranslationTable}></wc-button>
              <wc-button caption="Download Printess Translations For '${this.activeKey??"en"}'" size="md" color="blue" @click=${this.onDownload}></wc-button>
              ${["en","de"].includes(this.activeKey)?x`
                <wc-button caption="Translate '${this.activeKey}' to other languages" size="md" color="blue" .loading=${this.translating} loadingText="Translate '${this.activeKey}' to other languages" @click=${this.translateToOther}></wc-button>
              `:""}
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1Q([e$3({type:String})],WcEditorFullJson.prototype,"translation",void 0),__decorate$1Q([e$3({type:String})],WcEditorFullJson.prototype,"oldTranslation",void 0),__decorate$1Q([e$3({type:String})],WcEditorFullJson.prototype,"activeKey",void 0),__decorate$1Q([e$3({type:Array})],WcEditorFullJson.prototype,"languageKeys",void 0),__decorate$1Q([e$3({type:Boolean})],WcEditorFullJson.prototype,"loading",void 0),__decorate$1Q([e$3({type:Boolean})],WcEditorFullJson.prototype,"translating",void 0),__decorate$1Q([i$1("div.language-tabs")],WcEditorFullJson.prototype,"tabsContainer",void 0),__decorate$1Q([i$1("button.scroll-button.left")],WcEditorFullJson.prototype,"leftButton",void 0),__decorate$1Q([i$1("button.scroll-button.right")],WcEditorFullJson.prototype,"rightButton",void 0),WcEditorFullJson=__decorate$1Q([e$4("wc-editor-full-json")],WcEditorFullJson);const jsonfile={usage:{customKey:"Add a text or value in any language ..."}};var __decorate$1P=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcCardJsonEditor=class extends s$1{static get styles(){return[i$4`
      p {
        font-size: 14px;
      }

      .translation-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 4px;
        padding: 20px;
        min-height: 200px;
        background-color: var(--printess-lightpink);
        border-bottom: 2px solid var(--printess-pink);
      }
      .translation-card.green {
        background-color: var(--printess-lightgreen);
        border-bottom: 2px solid var(--printess-green);
      }
      .header {
        font-weight: bold;
        margin: 8px 0px;
      }
    `]}openJsonEditor(){(new WcEditorFullJson).showDialog()}render(){return x`
      <div class="translation-card green">
        <span class="header">Edit Full Translation JSON</span>
        <p>
          Access the complete translation file in raw JSON format.
          <br><br>
          This mode is intended for advanced users or developer workflows, 
          allowing full control over the translation structure and bulk editing.
        </p>

        <wc-button caption="Open JSON Editor" size="sm" color="green" @click=${this.openJsonEditor}></wc-button>
      </div>
    `}};WcCardJsonEditor=__decorate$1P([e$4("wc-card-json-editor")],WcCardJsonEditor);var __decorate$1O=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcCardTranslationDownload=class extends s$1{constructor(){super(...arguments),this.activeKey="en",this.languageKeys=["ar","bg","cs","da","de","en","es","et","fi","fr","hu","id","it","ja","ko","lt","lv","nb","nl","pl","pt-BR","pt-PT","ro","ru","se","sk","sl","tr","uk","zh"]}static get styles(){return[i$4`
      p {
        font-size: 14px;
      }

      .translation-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 4px;
        padding: 20px;
        min-height: 200px;
        background-color: var(--printess-lightpink);
        border-bottom: 2px solid var(--printess-pink);
      }
      .translation-card.red {
        background-color: var(--printess-lightred);
        border-bottom: 2px solid var(--printess-red);
      }
      
      .flex-header {
        display: grid;
        grid-template-columns: 1fr 100px;
        align-items: center;
        gap: 10px;
      }
    `]}async onDownload(){const e=this.activeKey??"en",t=await api.readUserSettings({keys:["translation."+e]});t instanceof ServerErrorResponse$2?console.error(t.message):this.download(t["printess-translation."+e]??t["translation."+e],"printess-translations-"+e+".json","text/json")}download(e,t,o){const r=document.createElement("a"),i=new Blob([e],{type:o});r.href=URL.createObjectURL(i),setTimeout(()=>{URL.revokeObjectURL(r.href)},13337),r.download=t,r.click()}render(){const e=[this.activeKey,...this.languageKeys];return x`
      <div class="translation-card red">
        <div class="flex-header">
          <span style="font-weight: bold;">Download Printess Translation File</span>
          <wc-input type="select" color="green" name="language" .value=${this.activeKey??"en"} .options=${e} .callback=${e=>this.activeKey=e}></wc-input>
        </div>

        <p>
          Download the original Printess translation file for the selected language.
          <br><br>
          This can be used for backup, offline editing, 
          or as a reference when creating custom translations.
        </p>

        <wc-button caption="Download Printess Translations for '${this.activeKey}'" size="sm" color="red" @click=${this.onDownload}></wc-button>
      </div>
    `}};__decorate$1O([t$1()],WcCardTranslationDownload.prototype,"activeKey",void 0),WcCardTranslationDownload=__decorate$1O([e$4("wc-card-translation-download")],WcCardTranslationDownload);var __decorate$1N=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcTranslationsPage=class extends s$1{constructor(){super(...arguments),this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[userProfileStyles,translationsStyles,i$4`
      .settings-page {
        max-width: 900px;
      }

      .structure-info-container {
        background-color: rgb(248, 248, 248);
        padding: 10px 20px;
        border-radius: 4px;
      }

      .structure-info-container pre {
        display: flex;
        background: #f0f0f0;
        padding: 15px;
        border: 1px solid var(--printess-lightgray);
        border-radius: 4px;
      }

      p {
        font-size: 14px;
      }

      pre {
        display: flex;
        background: #f0f0f0;
        padding: 15px;
      }

      code {
        white-space: pre-wrap;
      }

      .translations-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .settings-page.mobile .translations-container {
        display: flex;
        flex-direction: column;
        gap: 20px;‚
      }
    `]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),location.hash="#translations"}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}getSampleJson(){const e=JSON.stringify({ui:{imageTab:"Upload Photo",uploadMultipleImagesInfo:"Hint: Multiple photos can be uploaded at the same time!"}},null,2);return x`<pre><code>${e}</code></pre>`}render(){const e=config.isMobile;return x`
      <div class="settings-page ${e?"mobile":""}">
        <wc-topic-header title="Translations"></wc-topic-header>
        
        <p>
          This section allows you to manage all Buyer Side translations in one place.
          You can adjust default interface labels, add your own translations, or manage complete language files.
        </p>

        <h4>Choose how you want to manage your translations</h4>

        <p>
          You can adjust standard Printess interface texts, create fully custom translation tables, 
          work directly in JSON format, or download the original language files for reference and backup.
        </p>

        <div class="translations-container">
          <wc-card-printess-translations></wc-card-printess-translations>
          <wc-card-custom-translations></wc-card-custom-translations>
          <wc-card-json-editor></wc-card-json-editor>
          <wc-card-translation-download></wc-card-translation-download>
        </div>

        <br>
        <h4>How translations are structured</h4>
        
        <p>
          Translations are organized by language. Each language contains namespaces, 
          and each namespace contains translation keys.
          Printess provides predefined system namespaces such as: 
        </p>

        <pre>
          <code>"ui", "alert", "errors", "menu", "tx"</code>
        </pre>

        <p>
          These contain all standard Buyer Side interface texts.
        </p>

        ${this.getSampleJson()}
          
        <p>
          You can overwrite these texts or extend the translation system with your own namespaces for template content.
          In the Buyer Side custom values inside templates can be referenced using the following function:
        </p>

        <pre>
          <code>${'${gl("namespace.key")}'}</code>
        </pre>

        <p>
          The editor automatically detects the browser language unless defined otherwise.
          If no region-specific translation exists, the base language (en - English) will be used.
        </p>

        <br>
        <h4>API Integration</h4>

        <p>
          Translations can also be controlled during editor attachment.
        </p>
        <p>
          You can enforce a fixed language to ignore your users' browser language 
          and take more direct control of i18n using the parameter “translationKey”:
        </p>

        <pre>
          <code>translationKey: "en"</code>
        </pre>

        <p> 
          You can also attach additional translations dynamically using the “translations” object:
        </p>
          
        <pre>
          <code>translations: ${JSON.stringify({custom:{name:"Your Name"}},null,2)}</code>
        </pre>
      </div>
    `}};WcTranslationsPage=__decorate$1N([e$4("wc-translations-page")],WcTranslationsPage);const notFoundStyles$1=i$4`
  .editor-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--printess-header-font);
    color: #555555;
  }

  .topic {
    font-weight: 500;
    font-size: 22px;
    margin-bottom: 0px;
  }

  .subtopic {
    font-size: 16px;
    font-family: var(--printess-text-font);
  }

  button {
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--printess-button-font);
    font-weight: 400;
    padding: 7px 40px;
    background-color: #2EB7FF;
    font-size: 14px;
    width: 40%;
  }

  img {
    width: 50%;
    margin-top: 30px;
    cursor: pointer;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
      margin-top: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    img {
      width: 90%;
    }

    button {
      width: 80%;
    }
  }
`;var __decorate$1M=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcEditorPage=class extends s$1{constructor(){super(...arguments),this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[notFoundStyles$1]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),location.hash="#editor"}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}render(){let e=getEditorUrl();return api.token&&(e+="#pt_"+api.token),x`
      <div class="editor-page">
        <h1 class="topic">Open Editor</h1>
        <p class="subtopic">Click the button below to open the Printess Editor.</p>
        <img @click=${()=>window.open(e,"_blank")} src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F.%2Fassets%2FProductTemplates.png" alt="printess editor">
        <button @click=${()=>window.open(e,"_blank")}>Open ${config.isMobile?"":"Printess"} Editor</button>
      </div>
    `}};WcEditorPage=__decorate$1M([e$4("wc-editor-page")],WcEditorPage);var __decorate$1L=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogUpdateAddress=class extends s$1{constructor(){super(...arguments),this.missingFields=[],this.warningOn=!1,this.profileChanged=!1,this.requiredFields=["company","displayName","addressOne","postalCode","city","country"]}static get styles(){return[userProfileStyles,i$4`
      .card {
        margin-bottom: 0px;
      }

      .table-body {
        padding-bottom: 10px;
      }

      dl {
        grid-template-columns: 130px calc(100% - 130px);
      }

      .mandatory {
        font-weight: bold;
      }

      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      .missing-field {
        border: 1px solid var(--dialog-warning-red);
      }

      .warning {
        color: var(--dialog-warning-red);
        text-align: center;
        width: 100%;
        font-size: 12px;
        margin: 30px 0 0;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .back, .continue {
        background-color: var(--printess-green);
        margin: 20px 5px 0px;
        padding: 10px 20px;
        font-size: 16px;
        min-width: 100px;
      }
      .back:hover, .continue:hover {
        background-color: var(--printess-greenHover);
      }

      .disabled {
        cursor: not-allowed;
        background-color: #d2dbaf;
      }
      .disabled:hover {
        background-color: #d2dbaf;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card.green {
          margin-top: 20px;
        }
        dd, dt {
          padding:5px;
        }
        .back, .continue {
          padding: 5px 7px;
          font-size: 12px;
          flex: 1 0 auto;
        }
      }
    `]}setState(e){this.state=new UserProfile(e,this.state)}showAddress(e){this.callback=e}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserProfile(){const e=await api.loadProfile();if(e instanceof ServerErrorResponse$2)this.showError(e);else if(this.state=new UserProfile(e),this.profile=e,!this.profile.timezone){const e=new Nobs;e.setProperty(this.state,"timezone",Intl.DateTimeFormat().resolvedOptions().timeZone),this.setState(e)}}async updateUserProfile(e){const t=await api.updateProfile(e);return t instanceof ServerErrorResponse$2?(this.showError(t),"failure"):(console.log(this.profile),"success")}connectedCallback(){super.connectedCallback(),this.loadUserProfile()}changeProfile(e){const t=new Nobs,o=e.target.name,r=e.target.value;t.setProperty(this.state,o,r),this.setState(t),this.missingFields=this.missingFields.filter(e=>e!==o),0===this.missingFields.length?this.warningOn=!1:this.warningOn=!0,this.profileChanged=!0}async updateProfile(e){const t=this.state.toDto();if(this.profileChanged){if("failure"===await this.updateUserProfile(t))return void alert("An error occurred, please try again later!")}this.callback&&this.callback(e,t)}async continueBooking(){const e=this.state.toDto();if(!this.warningOn){for(const[t,o]of Object.entries(e))this.requiredFields.includes(t)&&!o&&this.missingFields.push(t);if(this.missingFields.length>0)return this.requestUpdate(),void(this.warningOn=!0);this.updateProfile("finalOverview")}}getFlag(e){const t=e.toUpperCase().split("").map(e=>127397+e.charCodeAt(0));return String.fromCodePoint(...t)}render(){return x`
      <div class="address-wrapper">
        <div class="card green">
          <div class="table-header">
            <h3 class="title">Billing Address</h3>
          </div>
          <div class="table-body">
            <dl>${this.profile?x`
              <dt class="mandatory">Company:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("company")?"missing-field":""}" @change=${this.changeProfile} name="company" value=${this.profile.company??""} placeholder="company"></dd>
              <dt class="mandatory">Name:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("displayName")?"missing-field":""}" @change=${this.changeProfile} name="displayName" value=${this.profile.displayName??""} placeholder="display name"></dd>
              <!-- <dt>First Name:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("firstName")?"missing-field":""}" @change=${this.changeProfile} name="firstName" value=${this.profile.firstName??""} placeholder="first name"></dd>
              <dt>Last Name:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("lastName")?"missing-field":""}" @change=${this.changeProfile} name="lastName" value=${this.profile.lastName??""} placeholder="last name"></dd> -->
              <dt class="mandatory">Address 1:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("addressOne")?"missing-field":""}" @change=${this.changeProfile} name='addressOne' value=${this.profile.addressOne??""} placeholder="address line 1"></dd>
              <dt>Address 2:</dt>
              <dd><input class="profile-input" @change=${this.changeProfile} name='addressTwo' value=${this.profile.addressTwo??""} placeholder="address line 2"></dd>
              <dt class="mandatory">Postal Code:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("postalCode")?"missing-field":""}" @change=${this.changeProfile} name='postalCode' value=${this.profile.postalCode??""} placeholder=" postal code"></dd>
              <dt class="mandatory">City:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("city")?"missing-field":""}" @change=${this.changeProfile} name='city' value=${this.profile.city??""} placeholder="city"></dd>
              <dt>State:</dt>
              <dd><input class="profile-input" @change=${this.changeProfile} name='state' value=${this.profile.state??""} placeholder="state"></dd>
              <dt class="mandatory">Country:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("country")?"missing-field":""}" @change=${this.changeProfile} name="country" value=${this.profile.country??""} type="text" list="country" placeholder="country">
                <datalist id="country">
                  ${countries.map(e=>x`<option value=${e.country}>${e.country}</option>`)}
                </datalist>
              </dd>
              <dt>Phone:</dt>
              <dd style="display: grid; grid-template-columns: 102px 2fr;">
                <input class="profile-input" @change=${this.changeProfile} name="countryCode" value=${this.profile.countryCode??""} type="text" list="countryCode" placeholder="🇩🇪 +49">
                <datalist id="countryCode">
                  ${countries.sort((e,t)=>e.countryCode-t.countryCode).map(e=>x`
                    <option value='${this.getFlag(e.ISO2Code)} ${e.countryCode}'>
                    </option>`)}
                </datalist>
                <input class="profile-input" @change=${this.changeProfile} name='phone' value=${this.profile.phone??""} placeholder="phone">
              </dd>
              <dt>EU VAT-ID:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("vat")?"missing-field":""}" @change=${this.changeProfile} name='vat' value=${this.profile.vat??""} placeholder="VAT no."></dd>
              <dt>Accounting Email:</dt>
              <dd><input class="profile-input" @change=${this.changeProfile} name='accountingEmail' value=${this.profile.accountingEmail??""} placeholder="Accounting / billing email"></dd>
            `:""}
            </dl>
          </div>
        </div>
        <div class="button-wrapper">
          <button class="back" @click=${()=>this.updateProfile("planOptions")}>back</button>
          <button class="continue ${this.warningOn?"disabled":""}" @click=${this.continueBooking}>continue</button>
        </div>
        ${this.warningOn?x`<p class="warning">*Please fill in the missing information!</p>`:""}
      </div>
    `}};__decorate$1L([e$3({type:Object})],WcDialogUpdateAddress.prototype,"state",void 0),__decorate$1L([e$3({type:Object})],WcDialogUpdateAddress.prototype,"profile",void 0),__decorate$1L([e$3({type:Array})],WcDialogUpdateAddress.prototype,"missingFields",void 0),__decorate$1L([e$3({type:Boolean})],WcDialogUpdateAddress.prototype,"warningOn",void 0),__decorate$1L([e$3({type:Boolean})],WcDialogUpdateAddress.prototype,"profileChanged",void 0),WcDialogUpdateAddress=__decorate$1L([e$4("wc-dialog-update-address")],WcDialogUpdateAddress);var __decorate$1K=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogChoosePlan=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      label {
        cursor: pointer;
        font-family: var(--printess-text-font);
      }
      input {
        width: auto;
        padding: 0px;
      }
      input:hover {
        background-color: unset;
        border: none;
      }
      label {
        font-size: 18px;
      }

      [type="checkbox"] {
        position: relative;
        border: none;
        border-radius: 10px;
        outline: none;
        left: 0px;
        top: -10px;
        width: 0px;
        height: 0px;
        z-index: 0;
        -webkit-appearance: none;
      }

      [type="checkbox"]:focus, [type="checkbox"]:hover {
        display: hidden;
        border: none;
        outline: none;
      }

      [type="checkbox"] + label {
        position: relative;
        display: block;
        cursor: pointer;
        padding-left: 50px;
        position: relative;
      }
      [type="checkbox"] + label:before {
        width: 40px;
        height: 18px;
        border-radius: 30px;
        border: 2px solid #e35fbc;
        background-color: #e35fbc;
        content: "";
        transition: background-color 0.2s linear;
        z-index: 5;
        position: absolute;
        left: 0px;
      }
      [type="checkbox"] + label:after {
        width: 16px;
        height: 16px;
        border-radius: 30px;
        background-color: #fff;
        content: "";
        transition: margin 0.1s linear;
        box-shadow: 0px 0px 5px #e447b6;
        position: absolute;
        left: 4px;
        top: 3px;
        z-index: 10;
      }
      [type="checkbox"]:checked + label:before {
        background-color: #e35fbc;
        border-color: #e35fbc;
      }
      [type="checkbox"]:checked + label:after {
        margin: 0 0 0 20px;
        box-shadow: #e447b6 0px 0px 5px;
      }
      .image-crown {
        position: static;
        height: 76px;
        max-width: 100%;
        margin-top: 0px;
        margin-right: 0px;
        margin-left: 0px;
        padding: 0px 10px;
      }
      .plan-wrapper {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-column-gap: 5px;
      }

      .plan-overview {
        display: flex;
        flex-direction: column;
      }

      .plan-header, .plan-footer {
        border-radius: 4px;
        color: #fff;
        margin-top: 5px;
        margin-bottom: 5px;
      }

      .plan-footer {
        min-height: 107px;
      }

      .price-footer {
        background-color: #55555526;
        color: #555;
        height: 125.75px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .price-footer > h1 {
        color: #555;
        font-size: 22px;
        line-height: 35px;
      }

      .white-title {
        font-family: var(--printess-header-font);
        color: #fff;
        font-size: 18px;
        line-height: 30px;
        font-style: normal;
        font-weight: normal;
        text-align: center;
        letter-spacing: 0px;
        text-indent: 0px;
        text-transform: none;
      }

      .big {
        font-size: 28px;
        margin-bottom: 10px;
      }

      .plan-content {
        margin-bottom: 0px;
        font-family: var(--printess-text-font);
        font-size: 16px;
        line-height: 40px;
        text-align: center;
      }

      .bold-credits {
        font-size: 18px;
        line-height: 30px;
        font-style: normal;
        font-weight: 700;
        padding-top: 15px;
        padding-bottom: 10px;
      }

      .small-extra {
        font-size: 11px;
        line-height: 14px;
        text-align: center;
        min-height: 14px;
        padding: 0px 10px 20px;
      }

      .benefits {
        text-align: left;
        padding-left: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      button {
        border-radius: 4px;
        border: none;
        outline: none;
        padding: 0px 5px 0px 10px;
        color: #fff;
        margin-top: 10px;
        background-color: #555;
        cursor: pointer;
      }

      .upgrade-button {
        background-color: #555;
      }

      .upgrade-button:hover {
        background-color: #424242;
      }

      .disabled, .disabled:hover {
        background-color: #7e7e7e5c !important;
        cursor: not-allowed;
      }

      .side-note {
        font-size: 11px;
        font-family: var(--printess-text-font);
        padding: 10px 20px;
        margin-top: 20px;
        border-top: 3px solid var(--dialog-warning-red);
        border-bottom: 3px solid var(--dialog-warning-red);
        border-radius: 4px;
        line-height: 5px;
        text-align: center;
      }

      .tooltip .tooltiptext {
        display: inline-block;
        white-space: wrap;
        visibility: hidden;
        background-color: #fff;
        color: #555;
        text-align: center;
        padding: 10px 15px;
        border-radius: 2px;
        position: absolute;
        z-index: 1;
        width: auto;
        top: 105%;
        font-size: 12px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.19);
        line-height: 20px;
        font-weight: 400;
        width: 300px;
        height: auto;
        text-align: justify;
      }
      .tooltip:hover .tooltiptext {
        visibility: visible;
      }
      .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 3%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
      }
      .tooltip:hover .tooltiptext {
        visibility: visible;
      }

      .hidden {
        display: none;
      }

      wc-icon {
        width: 25px;
        height: 25px;
        margin: 0px;
        padding-bottom: 10px;
        cursor: context-menu;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .plan-wrapper {
          width: 100%;
          overflow: auto;
        }
        .plan-overview {
          min-width: 120px;
        }
        .plan-header {
          max-height: 40px;
        }
        .plan-header > .white-title.benefits {
          padding: 0 0 0 10px;
        }
        .plan-content {
          line-height: 35px;
          font-size: 12px;
        }
        .benefits {
          font-size: 12px;
          padding: 5px 7px;
          width: 120px;
          height: 25px;
        }
        .bold-credits {
          line-height: 25px;
          font-size: 12px;
          padding: 5px 7px;
        }
        .small-extra {
          font-size: 11px;
          line-height: 25px;
          min-height: 14px;
          padding: 5px 7px;
        }
        .plan-footer {
          min-height: 100px;
        }
        .white-title {
          font-size: 12px;
          line-height: 25px;
        }
        .white-title.big {
          font-size: 18px;
          padding: 0 10px;
          line-height: 25px;
        }
        .plan-footer > .small-extra.benefits {
          line-height: 20px;
        }
        .plan-header > h1.white-title {
          font-size: 12px;
          line-height: 25px;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadTeamMembers(){const e=await api.loadPinnedUsers();e instanceof ServerErrorResponse$2?this.showError(e):this.usedSeats+=e.length}async loadWhitelistMembers(){const e=await api.loadWhitelist();e instanceof ServerErrorResponse$2?this.showError(e):this.usedSeats+=e.length}async loadUserInfo(){const e=await api.loadUserBookedInfo();e instanceof ServerErrorResponse$2?this.showError(e):(this.bookedPlan=e.bookedPlan,this.additionalSeats=e.bookedSeats)}connectedCallback(){super.connectedCallback(),this.loadTeamMembers(),this.loadWhitelistMembers(),this.loadUserInfo()}constructor(e){super(),this.usedSeats=0,this.additionalSeats=0,this.payMode="yearly",this.plans=e.sort((e,t)=>e.order-t.order)}showOptions(e){this.callback=e}changePlan(e){this.canBookPlan(e)&&this.callback&&this.callback(e)}getStorageValue(e){const t=Math.floor(e/1073741824);return t>1e3?Math.floor(t/1024)+" TB":t+" GB"}upgradeValue(e){return this.bookedPlan?this.bookedPlan.order<e||this.bookedPlan.isTrial?"upgrade":this.bookedPlan.order===e?"current plan":"downgrade":""}canBookPlan(e){const t=e.includedSeats+this.additionalSeats;return!this.bookedPlan||e.order>this.bookedPlan.order||e.id!==this.bookedPlan.id&&(!(!this.bookedPlan.isTrial&&1!==this.bookedPlan.id)||!(1===e.id&&this.usedSeats>0)&&!(this.usedSeats>t))}render(){const e=this.plans.filter(e=>e.contractPeriod===this.payMode).sort((e,t)=>e.order-t.order),t=e.findIndex(e=>e.id===this.bookedPlan?.id),o=e[t-1],r=this.additionalSeats+(o?.includedSeats??0),i=r-this.usedSeats>=0,a=Math.abs(r-this.usedSeats);return x`
      <div class="plan-wrapper" style=${"yearly"===this.payMode?"grid-template-columns: repeat(5, 1fr);":""}>
        <div class="plan-overview" style="position: relative; width: 185px;">
          <div style="height: 76px;"></div>
          <div style="height: 76px; display: flex; justify-content: left; align-items: center; position: absolute; left: 0; width: 300px;">
            <span style="font-size: 14px;">
              ${"yearly"===this.payMode?"":"Save up to 25% and benefit from additional ramp up service if you pay annually"}
            </span>
          </div>
          <div class="plan-header" style="background-color: #55555526;">
            <h1 class="white-title benefits" style="color: #555;">Benefits</h1>
          </div>
          <div class="plan-content benefits" style="line-height: initial!important; min-height: 103px; margin-bottom: 5px;">
              Included<br>Order Credits<br>per month
            <div class="tooltip" style="position: relative;">
              <wc-icon primaryColor="gray" icon="info-circle"></wc-icon>
              <span class="tooltiptext">
                Monthly included volume of order credits. An order credit is valid for a document with max 4 pages / max 10 MB. If you exceed your included monthly volume and you have not bought additional order packages, you will be charged with the listed overage fee per started 100 order credits. Unused monthly volume will not transfer to the next month.
              </span>
            </div>
            <!-- <div class="small-extra benefits">(per month)</div> -->
          </div>
          <div class="plan-content benefits">
            Storage
            <div class="tooltip" style="position: relative;">
              <wc-icon primaryColor="gray" icon="info-circle"></wc-icon>
              <span class="tooltiptext">
                Included storage volume for templates, images and output files. If you exceed your storage volume you will be charged with EUR 10,00 per additional 5 GB per month (peak size per month is used).
              </span>
            </div>
          </div>
          <div class="plan-content benefits">
            SLA resp. time
            <div class="tooltip" style="position: relative;">
              <wc-icon primaryColor="gray" icon="info-circle"></wc-icon>
              <span class="tooltiptext">
                This is the support response time we grant for your selected plan. Support hours are workdays, 9:00-17:00 GMT+1.
              </span>
            </div>
          </div>
          <div class="plan-content benefits">
            Incl. Seats
            <div class="tooltip" style="position: relative;">
              <wc-icon primaryColor="gray" icon="info-circle"></wc-icon>
              <span class="tooltiptext">
                These are the included template designer seats of your plan. All Seats can collaborate and optionally share their templates. Seats can be added and removed monthly up from the small plan. Peak Nr. of seats per month is used for billing.
              </span>
            </div>
          </div>
          <div class="plan-content benefits">
            Custom Editor
            <div class="tooltip" style="position: relative;">
              <wc-icon primaryColor="gray" icon="info-circle"></wc-icon>
              <span class="tooltiptext">
                The Printess editor can get integrated with ease. However if you’d additionally like to customize the editor and/or use your own individual design & branding this is the option needed.
              </span>
            </div>
          </div>
          <div class="plan-content benefits" style="font-weight: 700;">
            Ramp up Service
            <!-- <div class="tooltip" style="position: relative;">
              <wc-icon primaryColor="gray" icon="info-circle"></wc-icon>
              <span class="tooltiptext">
                The Printess editor can get integrated with ease. However if you’d additionally like to customize the editor and/or use your own individual design & branding this is the option needed.
              </span>
            </div> -->
          </div>
          <!-- <div class="plan-content benefits">
            Single Sign On
            <div class="tooltip" style="position: relative;">
              <wc-icon primaryColor="gray" icon="info-circle"></wc-icon>
              <span class="tooltiptext">
                Integrate your enterprise identity provider. This will allow your users to securely use their company login whenever using Printess. We are able to integrate all std. SSO providers but additional service fees for integration and maintenance may apply.
              </span>
            </div>
          </div> -->
          <!-- <div class="plan-content benefits">
            Test env.
            <div class="tooltip" style="position: relative;">
              <wc-icon primaryColor="gray" icon="info-circle"></wc-icon>
              <span class="tooltiptext">
                Printess will update the editor and its service from time to time. The Test environment will provide you with the opportunity to test new functionality and new workflows in a non productive sandbox before going live.
              </span>
            </div>
          </div> -->
          <div class="plan-footer price-footer">
            <h1 class="white-title big benefits">Price per month</h1>
            <div>
              <div class="small-extra" style="padding: 0 10px 5px; text-align: left;">
                ${"yearly"===this.payMode?"Yearly contract, paid yearly":"Monthly contract, paid monthly"}
              </div>
              <div class="small-extra benefits">+ VAT / Taxes if applicable</div>
            </div>
          </div>
        </div>

        ${e&&c(e,e=>e.id,e=>{let t="community",o="no",r="99 Cent \nper Order Credit",i="no",a="#a0cc00",s="500 MB";return e.order>=300?(t="4h",o="yes",r="+ 25 Cent \nper Order Credit",i="yearly"===this.payMode?"24h / year":"1h / month",a="#a2256b",s="500 GB"):e.order>=200?(t="same day",o="yes",r="+ 30 Cent \nper Order Credit",i="yearly"===this.payMode?"3h / year":"on demand",a="#e35fbc",s="50 GB"):e.order>=100&&(t="asap",r="+ 40 Cent \nper Order Credit",i="on demand",a="#4c9ce2",s="5 GB"),x`
            <div class="plan-overview">
              <div style="height: 76px; display: flex; justify-content: center;">
                ${"Medium"===e.name&&"yearly"===this.payMode?x`
                <img src="proxy.php?url=https%3A%2F%2Fprintess.com%2Fimages%2FPricingCrown2.jpeg" loading="lazy" sizes="(max-width: 479px) 93.75px, (max-width: 767px) 20vw, (max-width: 991px) 12vw, 113.484375px" srcset="https://printess.com/images/PricingCrown2-p-500.jpeg 500w, https://printess.com/images/PricingCrown2-p-800.jpeg 800w, https://printess.com/images/PricingCrown2-p-1080.jpeg 1080w, https://printess.com/images/PricingCrown2.jpg 1459w" alt="" class="image-crown">
                `:""}
              </div>
              <div class="plan-header" style="background-color: ${a}">
                <h1 class="white-title">${e.name}</h1>
              </div>
              <div class="plan-content" style="margin-bottom: 5px; background-color: ${"Medium"===e.name&&"yearly"===this.payMode?"var(--printess-lightpink)":"none"}">
                <div class="bold-credits">${e.includedCredits.toLocaleString()}</div>
                <div class="small-extra">
                  ${e.pricePerMonth>0?x`= ${Math.ceil(e.pricePerMonth/e.includedCredits)} Cent<br> per Order Credit`:x`= 99 Cent<br> per Order Credit`}
                </div>
              </div>
              <div class="plan-content" style="background-color: ${"Medium"===e.name&&"yearly"===this.payMode?"var(--printess-lightpink)":"none"}">
                ${s}
              </div>
              <div class="plan-content" style="background-color: ${"Medium"===e.name&&"yearly"===this.payMode?"var(--printess-lightpink)":"none"}">
                ${t}
              </div>
              <div class="plan-content" style="background-color: ${"Medium"===e.name&&"yearly"===this.payMode?"var(--printess-lightpink)":"none"}">
                ${e.includedSeats}
              </div>
              <div class="plan-content" style="background-color: ${"Medium"===e.name&&"yearly"===this.payMode?"var(--printess-lightpink)":"none"}">
                ${o}
              </div>
              <div class="plan-content" style="background-color: ${"Medium"===e.name&&"yearly"===this.payMode?"var(--printess-lightpink)":"none"}">
                ${i}
              </div>
              <div class="plan-footer" style="background-color: ${a}">
                <h1 class="white-title big">€ ${Math.floor(e.pricePerMonth/100)}</h1>
                <div class="small-extra" style="padding: 0 10px 5px;">${e.order>=100?"Overage:":""}</div>
                <div class="small-extra" style="white-space: break-spaces;">${r}</div>
                <!-- <div class="small-extra">€ ${e.pricePerYear/100}</div> -->
              </div>
              <button
                @click=${()=>this.changePlan(e)}
                class="upgrade-button ${this.canBookPlan(e)?"":"disabled"}"
              >
                <h1 class="white-title">${this.upgradeValue(e.order)}</h1>
              </button>
            </div>
          `})}

        <div class="plan-overview" style="width: ${"yearly"===this.payMode?"100%":"130px"}; position: relative;">
          ${this.bookedPlan&&"monthly"!==this.bookedPlan.contractPeriod?"":x`
            <div style="height: 76px; display: flex; justify-content: flex-end; align-items: center; position: absolute; right: 0; width: 300px; text-align: right;">
              <div style="display: flex; justify-content: right;">
                <label for="annual-checker" style="font-weight: ${"yearly"===this.payMode?"700":"400"}">Annually</label>
                <input
                  type="checkbox" name="" id="annual-checker" value="some"
                  .checked=${"monthly"===this.payMode}
                  @change=${()=>"yearly"===this.payMode?this.payMode="monthly":this.payMode="yearly"}
                >
                <label for="annual-checker" style="font-weight: ${"monthly"===this.payMode?"700":"400"}">Monthly</label>
              </div>
            </div>
          `}
          <div style="height: 76px;"></div>
          <div class="plan-header" style="background-color: #825aba;">
            <h1 class="white-title">Enterprise</h1>
          </div>
          <div class="plan-content" style="min-height: 103px; margin-bottom: 5px;">
            <div class="bold-credits">individual</div>
            <div class="small-extra" style="visibility: hidden;">= 10 Cent <br>per Order Credit</div>
          </div>
          <div class="plan-content">unlimited</div>
          <div class="plan-content">custom SLA</div>
          <div class="plan-content">unlimited</div>
          <div class="plan-content">yes</div>
          <div class="plan-content">individual</div>
          <div class="plan-footer" style="background-color: #825aba;">
            <h1 class="white-title big">call us</h1>
            <div class="small-extra" style="padding: 0 10px 5px; visibility: hidden;">Overage:</div>
            <div class="small-extra" style="visibility: hidden;">+ 25 Cent <br>per Order Credit</div>
          </div>
        </div>

        ${this.usedSeats>0?x`
          <p style="font-size: 12px; color: var(--printess-red); grid-column: 2 / 7;">
            * You need to remove all Team Members to be able to downgrade to "Pay as you go"! <br>
            ${!i&&"Small"!==this.bookedPlan?.name||!i&&"Pay as you go"!==this.bookedPlan?.name?`\n              ** If you want to book a lower plan you need to book at least ${a} extra seat${a>1?"s":""} or remove Team Members.\n            `:""}
          </p>
        `:""}
      </div>
    `}};__decorate$1K([e$3({type:Object})],WcDialogChoosePlan.prototype,"bookedPlan",void 0),__decorate$1K([e$3({type:Array})],WcDialogChoosePlan.prototype,"plans",void 0),__decorate$1K([e$3({type:Number})],WcDialogChoosePlan.prototype,"usedSeats",void 0),__decorate$1K([e$3({type:Number})],WcDialogChoosePlan.prototype,"additionalSeats",void 0),__decorate$1K([e$3({type:String})],WcDialogChoosePlan.prototype,"payMode",void 0),WcDialogChoosePlan=__decorate$1K([e$4("wc-dialog-choose-plan")],WcDialogChoosePlan);var __decorate$1J=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogPlanOverview=class extends s$1{static get styles(){return i$4`
      .overview-wrapper {
        display: flex;
        flex-direction: column;
        padding: 30px 10px 0px;
      }

      .selection-overview {
        border-radius: 4px;
        border-top: 3px solid var(--printess-pink);
        border-bottom: 3px solid var(--printess-pink);
        padding: 10px;
        margin-bottom: 20px;
      }

      .flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .flex-span {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      hr {
        border: none;
        border-bottom: 1px solid #ccc;
      }

      .address-payment-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
      }

      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-family: var(--printess-header-font);
      }

      .edit {
        padding: 5px 10px;
        border: none;
        outline: none;
        background-color: var(--printess-pink);
        font-family: var(--printess-text-font);
        border-radius: 4px;
        color: #fff;
        margin-left: 5px;
        cursor: pointer;
      }
      .edit:hover {
        background-color: var(--printess-pinkHover);
      }

      .spinner, .spinner:after {
        border-radius: 50%;
        width: 5em;
        height: 5em;
        margin-top: 20px;
      }
      .spinner {
        font-size: 15px;
        position: relative;
        border-top: 0.5em solid rgba(230,0,126, 0.2);
        border-right: 0.5em solid rgba(230,0,126, 0.2);
        border-bottom: 0.5em solid rgba(230,0,126, 0.2);
        border-left: 0.5em solid #e6007e;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .back, .continue {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 16px;
        min-width: 100px;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }
      .back:hover, .continue:hover {
        background-color: var(--printess-pinkHover);
      }

      wc-icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin: 0 10px;
      }

      .coupon-input {
        padding: 5px 7px;
        font-size: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: var(--printess-text-font);
      }

      .terms-and-policy {
        width: 100%;
        text-align: center;
        font-size: 12px;
        margin-top: 30px;
      }

      .disabled {
        background-color: var(--dialog-disabled-pink);
        cursor: not-allowed;
      }
      .disabled:hover {
        background-color: var(--dialog-disabled-pink);
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .overview-wrapper {
          padding: 20px 10px 0;
          font-size: 12px;
        }
        .selection-overview {
          padding: 5px 7px;
          margin-bottom: 10px;
        }
        .address-payment-wrapper {
          grid-template-columns: 1fr;
          gap: 5px;
        }
        .title {
          margin-top: 5px;
        }
        .coupon-input {
          width: calc(100% - 70px);
        }
        .edit {
          font-size: 12px;
        }
        .back, .continue {
          flex: 1 0 auto;
          font-size: 12px;
          padding: 5px 7px;
        }
        .continue {
          margin-right: 0;
        }
        .terms-and-policy {
          margin-top: 10px;
        }
      }
    `}constructor(e,t,o,r){super(),this.plan=e,this.profile=t,this.planStatus=o,this.initalPlan=r}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async bookPlan(){const e=await api.updatePlan({planId:this.plan.id});e instanceof ServerErrorResponse$2?this.showError(e):this.buySelectedPlan()}async loadPaymentCalculation(){const e=await api.loadUpcomingPaymentInfo();if(e instanceof ServerErrorResponse$2)this.showError(e);else{const t=(new Date).getTime();this.upcomingPayments=e.periods.filter(e=>new Date(e.startDate).getTime()<t&&new Date(e.endDate).getTime()>t)[0]}}connectedCallback(){super.connectedCallback(),this.loadPaymentCalculation()}showOverview(e){this.callback=e}editPayment(){}setCouponValue(e){this.coupon=e.target.value}editPlan(){this.callback&&this.callback("planOptions",0)}backToAddress(){this.callback&&this.callback("updateAddress",0)}buySelectedPlan(){const e=this.finalPrice>0?this.finalPrice:this.plan.pricePerYear/100;this.callback&&this.callback("purchaseConfirmation",e)}returnFinalSetOff(){if("upgrade"!==this.planStatus)return 0;const e=12*this.initalPlan.pricePerMonth,t=new Date,o=this.upcomingPayments?new Date(this.upcomingPayments.bookedPlan.bookedTo):new Date,r=Math.floor((+o-+t)/1e3/60/60/24);return Math.floor(r*e/365)}calculatePrice(){let e=0;if("upgrade"!==this.planStatus)e="monthly"===this.plan.contractPeriod?this.plan.pricePerMonth:12*this.plan.pricePerMonth;else{const t=this.returnFinalSetOff();"yearly"===this.plan.contractPeriod&&(e=12*this.plan.pricePerMonth-t),"monthly"===this.plan.contractPeriod&&(e=this.plan.pricePerMonth-t)}return this.finalPrice=Math.round(e)/100,e}render(){return x`
      <div class="overview-wrapper">
        <div class="selection-overview">
          <p class="flex">
            <span class="flex-span">
              <wc-icon @click=${this.editPlan} primaryColor="gray" icon="edit" style="margin-left: 0px;"></wc-icon>
              Selected plan*: ${config.isMobile?x`<br>`:""} ${this.plan.name}
              incl. ${this.plan.includedSeats} seat${this.plan.includedSeats>1?"s":""}
              (${this.plan.contractPeriod} payment)
            </span>
            <span>
              € ${(this.plan.pricePerMonth/100).toLocaleString()}
              ${"yearly"===this.plan.contractPeriod?"x 12":""}
            </span>
          </p>

          ${this.returnFinalSetOff()>0?x`
            <p class="flex">
              Offsetting amount from previous plan
              <span>
                - € ${Math.round(this.returnFinalSetOff()/100).toLocaleString()}
              </span>
            </p>
          `:""}

          <hr>

          <p class="flex" style="font-weight: bold;">
            Total Price (excl. taxes)${"upgrade"===this.planStatus&&this.upcomingPayments?"**":""} :
            <span>€ ${Math.round(this.calculatePrice()/100).toLocaleString()}</span>
          </p>

          <p style="font-size: 12px;">
            ${"upgrade"!==this.planStatus&&this.upcomingPayments?x`
              * valid from ${new Date(this.upcomingPayments.bookedPlan.bookedTo).toLocaleDateString()}.
            `:x`
              * valid from ${(new Date).toLocaleDateString()}.
            `}
            ${"upgrade"===this.planStatus&&this.upcomingPayments?x`
              ${this.upcomingPayments.carryOverCredits} credits will be carried over.
              <br>** Unused months will be cleared with new plan. Price is approximate.
            `:""}
          </p>
        </div>

        ${this.profile?x`
          <div class="address-payment-wrapper">
            <div class="address">
              <h3 class="title">Billing Address <wc-icon primaryColor="gray" icon="edit" @click=${this.backToAddress}></wc-icon></h3>
              <p>
                ${this.profile.company?x`${this.profile.company}<br><br>`:""}
                ${this.profile.displayName}<br>
                ${this.profile.addressOne}<br>
                ${this.profile.addressTwo?x`${this.profile.addressTwo}<br>`:""}
                ${this.profile.postalCode} ${this.profile.city}<br><br>
                ${this.profile.state?x`${this.profile.state}, `:""}
                ${this.profile.country}
              </p>
            </div>

            <div class="payment">
              <h3 class="title">Payment Method <wc-icon primaryColor="lightgray" icon="edit" @click=${this.editPayment}></wc-icon></h3>
              <p>
                Full name: ${this.profile.displayName}<br>${config.isMobile?"":x`<br>`}
                VAT No.: ${this.profile.vat}<br>${config.isMobile?"":x`<br>`}
                Payment: A bill will be send to you.
              </p>
            </div>

            <div class="coupon">
              <h3 class="title">Coupon:</h3>
              <input @input=${e=>this.setCouponValue(e)} type="text" name="coupon" placeholder="Enter Code" class="coupon-input" value=${this.coupon}>
              <button @click=${()=>this.coupon&&alert("Entered coupon is invalid!")} class="edit ${this.coupon?"":"disabled"}">Submit</button>
            </div>

            <!-- <div class="terms-and-policy">
              <input type="checkbox" name="agreement" id="agreement">
              <label for="agreement">
                I agree to the
                <a href="proxy.php?url=https%3A%2F%2Fprintess.com%2Flegal%2FEN_Printess_AGB_20210401.html" target="_blank">Terms of Use</a> and
                <a href="proxy.php?url=https%3A%2F%2Fprintess.com%2Flegal%2FEN_PrivacyPolicy_20210401.html" target="_blank">Privacy Policy</a>
              </label>
            </div> -->
          </div>

        `:x`<div class="spinner"></div>`}

        <div class="button-wrapper">
          <button class="back" @click=${this.backToAddress}>back</button>
          <button class="continue" @click=${this.bookPlan}>buy now</button>
        </div>
        <p class="terms-and-policy">By clicking Buy Now, you agree to our
          <a href="proxy.php?url=https%3A%2F%2Fprintess.com%2Flegal%2FEN_Printess_AGB_20210401.html" target="_blank">Terms of Use</a> and
          <a href="proxy.php?url=https%3A%2F%2Fprintess.com%2Flegal%2FEN_PrivacyPolicy_20210401.html" target="_blank">Privacy Policy</a>.</p>
      </div>
    `}};__decorate$1J([e$3({type:Object})],WcDialogPlanOverview.prototype,"profile",void 0),__decorate$1J([e$3({type:Object})],WcDialogPlanOverview.prototype,"plan",void 0),__decorate$1J([e$3({type:Object})],WcDialogPlanOverview.prototype,"initalPlan",void 0),__decorate$1J([e$3({type:Object})],WcDialogPlanOverview.prototype,"upcomingPayments",void 0),__decorate$1J([e$3({type:String})],WcDialogPlanOverview.prototype,"planStatus",void 0),__decorate$1J([e$3({type:String})],WcDialogPlanOverview.prototype,"coupon",void 0),__decorate$1J([e$3({type:Number})],WcDialogPlanOverview.prototype,"finalPrice",void 0),WcDialogPlanOverview=__decorate$1J([e$4("wc-dialog-plan-overview")],WcDialogPlanOverview);var __decorate$1I=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogPurchaseConfirmation=class extends s$1{static get styles(){return i$4`
      .overview-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .spinner, .spinner:after {
        border-radius: 50%;
        width: 5em;
        height: 5em;
        margin-top: 20px;
      }
      .spinner {
        font-size: 15px;
        position: relative;
        border-top: 0.5em solid rgba(230,0,126, 0.2);
        border-right: 0.5em solid rgba(230,0,126, 0.2);
        border-bottom: 0.5em solid rgba(230,0,126, 0.2);
        border-left: 0.5em solid #e6007e;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      .purchase-wrapper {
        text-align: center;
      }

      .purchase-wrapper p {
        margin: 10px;
      }

      button {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 16px;
        min-width: 100px;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }
    `}constructor(e,t,o,r){super(),this.isLoading=!0,this.finalPrice=0,this.purchaseValue=e,this.finalPrice=t,this.plan=o,this.amount=r}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.isLoading=!1},2e3)}showCongratulation(e){this.callback=e}closeWindow(){this.callback&&this.callback(!0)}getPurchaseValue(){switch(this.purchaseValue){case"plan":return`${this.plan?this.plan.name:""} Plan`;case"packages":return`${this.plan?((this.amount?this.amount:1)*parseInt(this.plan.name)).toLocaleString():""} Credits`;case"seats":return`${this.amount} seat${this.amount&&this.amount>1?"s":""}`;case"addon":return`${this.plan.name_rewrite}`;default:assertNever$1(this.purchaseValue)}}render(){return x`
      <div class="overview-wrapper">
        ${this.isLoading?x`
          <p>Your purchase is being processed.</p>
          <div class="spinner"></div>
        `:x`
          <h2>Purchase successful!</h2>
          <!-- <p>Your purchase is being processed.</p> You will receive an order confirmation by e-mail within a few minutes. / Your can find your order confirmation in invoices. -->
          <lottie-player src="proxy.php?url=https%3A%2F%2Fassets9.lottiefiles.com%2Fprivate_files%2Flf30_poez9ped.json" background="transparent" speed="1" style="width: 200px; height: 200px;" autoplay></lottie-player>
          <div class="purchase-wrapper">
            <p>You just purchased ${this.getPurchaseValue()}</p>
            <p>for</p>
            <p style="font-weight: 700; font-size: 24px">€ ${this.finalPrice.toLocaleString()}</p>
          </div>
          <!-- <button @click=${this.closeWindow}>close</button> -->
        `}
      </div>
    `}};__decorate$1I([e$3({type:Object})],WcDialogPurchaseConfirmation.prototype,"plan",void 0),__decorate$1I([e$3({type:Number})],WcDialogPurchaseConfirmation.prototype,"amount",void 0),__decorate$1I([e$3({type:Boolean})],WcDialogPurchaseConfirmation.prototype,"isLoading",void 0),__decorate$1I([e$3({type:String})],WcDialogPurchaseConfirmation.prototype,"purchaseValue",void 0),__decorate$1I([e$3({type:Number})],WcDialogPurchaseConfirmation.prototype,"finalPrice",void 0),WcDialogPurchaseConfirmation=__decorate$1I([e$4("wc-dialog-purchase-confirmation")],WcDialogPurchaseConfirmation);var __decorate$1H=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogChangePlan=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        padding-top: 50px;
      }

      .modal-wrapper {
        width: 99vmin;
        min-height: auto;
        min-width: 850px;
      }

      .modal-content {
        max-height: 80vh;
      }

      .dot-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 12px;
      }

      .dot {
        height: 15px;
        width: 15px;
        margin: 5px 10px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }

      .active {
        background-color: #717171;
      }

      .hidden {
        display: none;
      }

      .content-title {
        text-align: center;
        margin: 30px 0 10px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal {
          padding: 0px;
        }
        .modal-wrapper {
          min-width: unset;
        }
        .modal-content {
          padding: 20px;
          overflow: auto;
          max-height: unset;
        }
        .dot-wrapper {
          font-size: 10px;
        }
        .content-title {
          font-size: 14px;
          margin: 20px 0 10px;
        }
      }
    `]}constructor(e,t){super(),this.wrapperContent="planOptions",this.finalPrice=0,this.backdrop=new WcBackdrop,this.plan=e,this.initialPlan=e,this.plans=t}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this),this.callback&&"purchaseConfirmation"===this.wrapperContent&&this.callback(this.plan)}getPlanOptions(){switch(this.wrapperContent){case"planOptions":{const e=new WcDialogChoosePlan(this.plans);return e.showOptions(e=>{this.plan=e,this.wrapperContent="updateAddress"}),e}case"updateAddress":{const e=new WcDialogUpdateAddress;return e.showAddress((e,t)=>{this.wrapperContent=e,this.profile=t}),e}case"finalOverview":{const e=this.plan.order>this.initialPlan.order?"upgrade":"",t=new WcDialogPlanOverview(this.plan,this.profile,e,this.initialPlan);return t.showOverview((e,t)=>{this.wrapperContent=e,this.finalPrice=t}),t}case"purchaseConfirmation":{const e=new WcDialogPurchaseConfirmation("plan",this.finalPrice,this.plan);return e.showCongratulation(e=>{e&&this.closeDialog()}),e}default:assertNever$1(this.wrapperContent)}}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Change Subscription</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="dot-wrapper ${"purchaseConfirmation"===this.wrapperContent?"hidden":""}">
              <span class="dot ${"planOptions"===this.wrapperContent&&"active"}"></span> Select Plan
              <span class="dot ${"updateAddress"===this.wrapperContent&&"active"}"></span> Update Address
              <span class="dot ${"finalOverview"===this.wrapperContent&&"active"}"></span> Final Overview
            </div>
            <div class="content-wrapper">
              ${"planOptions"===this.wrapperContent?x`
                <h3 class="content-title">With Printess you can create and sell stunning personalized products.</h3>
              `:""}
              ${this.getPlanOptions()}
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1H([e$3({type:Object})],WcDialogChangePlan.prototype,"plan",void 0),__decorate$1H([e$3({type:Object})],WcDialogChangePlan.prototype,"initialPlan",void 0),__decorate$1H([e$3({type:Array})],WcDialogChangePlan.prototype,"plans",void 0),__decorate$1H([e$3({type:String})],WcDialogChangePlan.prototype,"wrapperContent",void 0),__decorate$1H([e$3({type:Object})],WcDialogChangePlan.prototype,"profile",void 0),__decorate$1H([e$3({type:Number})],WcDialogChangePlan.prototype,"finalPrice",void 0),WcDialogChangePlan=__decorate$1H([e$4("wc-dialog-change-plan")],WcDialogChangePlan);var __decorate$1G=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogCancelPlan=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal-wrapper {
        width: 65vmin;
      }

      .seats-wrapper {
        text-align: center;
        margin: 20px 0 40px;
      }

      h1 {
        font-family: var(--printess-header-font);
        font-size: 18px;
        line-height: 30px;
        font-style: normal;
        letter-spacing: 0px;
        text-indent: 0px;
        text-transform: none;
        margin-bottom: 20px;
      }

      label {
        cursor: pointer;
        font-family: var(--printess-text-font);
      }
      input#seats {
        width: 100px;
        height: 40px;
        font-size: 16px;
        color: #555;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: var(--printess-text-font);
      }

      [type="checkbox"] {
        position: relative;
        border: none;
        border-radius: 10px;
        outline: none;
        left: 0px;
        top: -10px;
        width: 40px;
        height: 16px;
        z-index: 0;
        -webkit-appearance: none;
      }

      [type="checkbox"]:focus, [type="checkbox"]:hover {
        display: hidden;
        border: none;
        outline: none;
      }

      [type="checkbox"] + label {
        position: relative;
        display: block;
        cursor: pointer;
        line-height: 1.7;
        padding-left: 70px;
        position: relative;
        margin-top: -35px;
      }
      [type="checkbox"] + label:before {
        width: 40px;
        height: 18px;
        border-radius: 30px;
        border: 2px solid #ddd;
        background-color: #EEE;
        content: "";
        margin-right: 15px;
        transition: background-color 0.5s linear;
        z-index: 5;
        position: absolute;
        left: 0px;
      }
      [type="checkbox"] + label:after {
        width: 18px;
        height: 18px;
        border-radius: 30px;
        background-color: #fff;
        content: "";
        transition: margin 0.1s linear;
        box-shadow: 0px 0px 5px #aaa;
        position: absolute;
        left: 2px;
        top: 2px;
        z-index: 10;
      }
      [type="checkbox"]:checked + label:before {
        background-color: #e35fbc;
      }
      [type="checkbox"]:checked + label:after {
        margin: 0 0 0 22px;
      }

      .side-note {
        font-size: 14px;
        font-family: var(--printess-text-font);
        padding: 10px 20px;
        margin: 20px 0;
        border-top: 3px solid var(--dialog-warning-red);
        border-bottom: 3px solid var(--dialog-warning-red);
        border-radius: 4px;
        text-align: center;
      }

      .terms-of-use {
        font-size: 10px;
        margin-top: 30px;
        margin-bottom: 10px;
        text-align: center;
        width: 100%;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .back, .continue {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 14px;
        min-width: 100px;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }
      .back:hover, .continue:hover {
        background-color: var(--printess-pinkHover);
      }

      .disabled {
        background-color: var(--dialog-disabled-pink);
        cursor: not-allowed;
      }
      .disabled:hover {
        background-color: var(--dialog-disabled-pink);
      }

      .delete, .close {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 14px;
        width: 50%;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }

      .close {
        margin: 20px 0px 0px 0px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          width: 90vmin;
        }
      }
    `]}constructor(){super(),this.backdrop=new WcBackdrop}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}cancelPlan(){this.callback&&this.callback(),this.closeDialog()}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Cancel Plan</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="seats-wrapper">
              <p>Do you really want to cancel your subscription?</p>
            </div>

            <div class="side-note">
              <p>
                TODO: add text here
              </p>
            </div>
            <div class="button-wrapper">
              <button class="submit delete" @click=${()=>this.cancelPlan()}>End Plan</button>
              <button class="submit close" @click=${()=>this.closeDialog()}>Cancel</button>
            </div>
          </div>
        </div>
      </div>
    `}};WcDialogCancelPlan=__decorate$1G([e$4("wc-dialog-cancel-plan")],WcDialogCancelPlan);var __decorate$1F=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const AiCreditInfos=[{k:"bgr",d:"Remove Background",m:2},{k:"fs",d:"Face Segmentation",m:1},{k:"fs-cp",d:"Face Segmentation (CutoutPro)",m:1},{k:"sa",d:"Segment Anything",m:1},{k:"sa3",d:"Segment Anything 3",m:.5},{k:"nsfw",d:"NSFW Check",m:1},{k:"swap",d:"Face Swap",m:2},{k:"cc",d:"Cut Contour",m:1},{k:"tisdxl",d:"SDXL",m:1},{k:"tifs",d:"Flux Schnell",m:1},{k:"tifd",d:"Flux Dev",m:1.5},{k:"tifp",d:"Flux Pro",m:2},{k:"tifu",d:"Flux Ultra",m:4},{k:"tinb",d:"Nano Banana",m:2},{k:"tinbp",d:"Nano Banana Pro",m:5},{k:"tifpk",d:"Flux Pro Kontext",m:2},{k:"tif2k4",d:"Flux 2 Klein 4B",m:1},{k:"gpt-image-1-low",d:"GPT Image 1 - low",m:2},{k:"gpt-image-1-medium",d:"GPT Image 1 - medium",m:3},{k:"gpt-image-1-high",d:"GPT Image 1 - high",m:9},{k:"gpt-image-1.5-low",d:"GPT Image 1.5 - low",m:1},{k:"gpt-image-1.5-medium",d:"GPT Image 1.5 - medium",m:2},{k:"gpt-image-1.5-high",d:"GPT Image 1.5 - high",m:7},{k:"ui",d:"Upscale Image",m:1},{k:"p",d:"LLM / Text Generation",m:1},{k:"pb",d:"Photobook",m:0}];let WcAiOverview=class extends s$1{static get styles(){return[subscriptionStyles,i$4`
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .plan-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      dl.aiu {
        grid-template-columns: 150px 150px 150px;
      }

      .aiu dt {
        width: 200px;
        padding: 0px;
      }

      .aiu dd {
        flex-direction: row-reverse;
        min-width: 40px;
        padding: 0px;
      }

      .period-ui {
        justify-content: flex-start;
      }

      wc-icon {
        padding: 0px;
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}renderAiUsage(e){if(!e)return x``;const t=AiCreditInfos.map(t=>Math.ceil(t.m*(e[t.k]??0))).reduce((e,t)=>e+t,0),o=AiCreditInfos.map(t=>({d:t.d,c:e[t.k]??0,m:t.m})).map(e=>x`<dt>${e.d}</dt><dd>${e.c.toLocaleString(void 0,{maximumFractionDigits:2})}</dd><dd>${Math.ceil(e.c*e.m).toLocaleString()} credits</dd>`);return o.push(x`<dt>Overall</dt><dd></dd><dd>${t.toLocaleString()} credits</dd>`),x`
      <dt>AI Usage</dt>
      <dd><dl class="aiu">${o}</dl></dd>
    `}changeAiCredits(){}cancelAiCredits(){}render(){return x`
      <div class="card green">
        <div class="table-header">
          <h3 class="title">
            <div class="plan-name">
              AI Credits: ${this.plan?.name||"No active plan found"}
              <wc-icon primaryColor="toolbar" icon="check-circle-solid" style="margin-left: 10px;"></wc-icon>
            </div>
          </h3>
        </div>

        <div class="table-body">
          ${this.plan&&this.bookedPlan&&this.bookedPlanInfo?x`
            <dl>
              <dt>Contract Period:</dt>
              <dd>
                ${new Date(this.bookedPlan.bookedPlan.bookedTo).getTime()===new Date("9999-12-31T23:59:59.999999Z").getTime()?"from ":""}
                ${new Date(this.bookedPlan.bookedPlan.bookedOn).toLocaleDateString()}
                ${new Date(this.bookedPlan.bookedPlan.bookedTo).getTime()===new Date("9999-12-31T23:59:59.999999Z").getTime()?"":x`
                &nbsp; - &nbsp;
                ${new Date(this.bookedPlan.bookedPlan.bookedTo).toLocaleDateString()}
                `}
                &nbsp;(${this.plan?.contractPeriod})
              </dd>
              ${this.renderAiUsage(this.aiUsage)}
            </dl>
          `:""}
            <button @click=${this.changeAiCredits} class="settings">Change AI Credits</button>
            <button @click=${this.cancelAiCredits} class="settings">Cancel AI Credits</button>
        </div>
      </div>
      `}};__decorate$1F([e$3({type:Object})],WcAiOverview.prototype,"plan",void 0),__decorate$1F([e$3({type:Object})],WcAiOverview.prototype,"bookedPlan",void 0),__decorate$1F([e$3({type:Object})],WcAiOverview.prototype,"bookedPlanInfo",void 0),__decorate$1F([e$3({type:Object})],WcAiOverview.prototype,"aiUsage",void 0),WcAiOverview=__decorate$1F([e$4("wc-ai-overview")],WcAiOverview);var __decorate$1E=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPlanOverview=class extends s$1{constructor(){super(...arguments),this.shownBookedPlan=0,this.currentSeats=0,this.usedSeats=0,this.currentCredits=0,this.nextPlanOverageCredits=0}static get styles(){return[subscriptionStyles,i$4`
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .plan-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      dl.aiu {
        grid-template-columns: 150px 150px 150px;
      }

      .aiu dt {
        width: 200px;
        padding: 0px;
      }

      .aiu dd {
        flex-direction: row-reverse;
        min-width: 40px;
        padding: 0px;
      }

      .period-ui {
        justify-content: flex-start;
      }

      wc-icon {
        padding: 0px;
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}connectedCallback(){super.connectedCallback()}changePlan(){new WcDialogChangePlan(this.plan,this.plans).showDialog(e=>{if(this.bookedPlan&&e.order>this.plan.order){const t=(new Date).setFullYear((new Date).getFullYear()+1);this.bookedPlan.bookedPlan.planId=e.id,this.bookedPlan.thereofOverageCredits=0,this.bookedPlan.thereofMonthlyCredits=this.bookedPlan.carryOverCredits,this.bookedPlan.bookedPlan.bookedOn=(new Date).toISOString(),this.bookedPlan.bookedPlan.bookedTo=new Date(t).toISOString(),this.plan=e,this.nextBookedPlan=void 0,this.nextBookedPlanInfo=void 0}else if(e.order===this.plan.order)this.nextBookedPlan=void 0,this.nextBookedPlanInfo=void 0;else if(e.order<this.plan.order){const t=new Date(this.bookedPlan.bookedPlan.bookedTo).setFullYear(new Date(this.bookedPlan.bookedPlan.bookedTo).getFullYear()+1);this.nextBookedPlan=e,this.nextBookedPlanInfo={bookedOn:new Date(this.bookedPlan.bookedPlan.bookedTo),bookedTo:"Pay as you go"===e.name?new Date("9999-12-31T23:59:59.999999Z"):new Date(t),canceledOn:new Date},this.nextPlanOverageCredits=this.bookedPlan.carryOverCredits}})}cancelPlan(){(new WcDialogCancelPlan).showDialog(()=>{api.terminatePlan()})}getStorageValue(e){const t=Math.floor(e/1073741824);return t>1e3?Math.floor(t/1024).toLocaleString()+" TB":t.toLocaleString()+" GB"}storageValue(){const e=this.storage?this.storage.fonts+this.storage.images+this.storage.production:0;return e<1e4?`${e} Byte`:e<1e8?`${(e/1048576).toFixed(2).toLocaleString()} MB`:`${(e/1073741824).toFixed(2).toLocaleString()} GB`}renderPlanHistory(e){return e?x`
      <dt>Contract Period:</dt>
        <dd class="period-ui">
          <button @click=${()=>this.handleHistoryClick(1)} class="settings" ${0!=this.shownBookedPlan?"disabled":""}><wc-icon primaryColor="toolbar" icon="arrow-left"></wc-icon></button>

          ${new Date(e.startDate).toLocaleDateString()}
          &nbsp - &nbsp
          ${new Date(e.endDate).toLocaleDateString()}

          <button @click=${()=>this.handleHistoryClick(-1)} class="settings" ${this.shownBookedPlan<this.pastPlans.length-1?"disabled":""}><wc-icon primaryColor="toolbar" icon="arrow-right"></wc-icon></button>
        </dd>
      <dt>Credits:</dt>
        <dd>
          <div>
            <span>${e.usedCredits.toLocaleString()}</span>
            of ${this.plan.includedCredits.toLocaleString()} used
          </div>
        </dd>
      <dt></dt><dd></dd>
      ${this.renderAiUsage(e.aiUsage)}
      <dt></dt><dd></dd>
      ${this.renderMockupUsage(e.mockupCredits??0)}
    `:x``}renderAiUsage(e){if(!e)return x``;const t=AiCreditInfos.map(t=>Math.ceil(t.m*(e[t.k]??0))).reduce((e,t)=>e+t),o=AiCreditInfos.map(t=>({d:t.d,c:e[t.k]??0,m:t.m})).map(e=>x`<dt>${e.d}</dt><dd>${e.c.toLocaleString(void 0,{maximumFractionDigits:2})}</dd><dd>${Math.ceil(e.c*e.m).toLocaleString()} credits</dd>`);return o.push(x`<dt>Overall</dt><dd></dd><dd>${t.toLocaleString()} credits</dd>`),x`
      <dt>AI Usage</dt>
      <dd><dl class="aiu">${o}</dl></dd>
    `}renderMockupUsage(e){return x`
      <dt>Mockup Usage</dt>
      <dd>
        <dl class="aiu">
          <dt></dt>
          <dd></dd>
          <dd>${e.toLocaleString()} credits</dd>
        </dl>
      </dd>
      `}async handleHistoryClick(e){this.shownBookedPlan+e>=0&&this.shownBookedPlan+e<this.pastPlans.length&&(this.shownBookedPlan+=e),new Date(this.pastPlans[this.shownBookedPlan].startDate)}render(){return x`
      ${this.firstPlan?`\n        Account active since: ${new Date(this.firstPlan.startDate).toLocaleDateString()}\n        `:""}
      <div class="card green">
        <div class="table-header">
          <h3 class="title">
            <div class="plan-name">
              Active Plan: ${this.plan&&this.plan.name||"No active plan found"}
              <wc-icon primaryColor="toolbar" icon="check-circle-solid" style="margin-left: 10px;"></wc-icon>
            </div>
          </h3>
        </div>

        <div class="table-body">
          ${this.plan&&this.bookedPlan?x`
            <dl>
              <dt>Contract Period:</dt>
              <dd>
                ${new Date(this.bookedPlan.bookedPlan.bookedTo).getTime()===new Date("9999-12-31T23:59:59.999999Z").getTime()?"from ":""}

                ${new Date(this.bookedPlan.bookedPlan.bookedOn).toLocaleDateString()}

                ${new Date(this.bookedPlan.bookedPlan.bookedTo).getTime()===new Date("9999-12-31T23:59:59.999999Z").getTime()?"":x`
                &nbsp - &nbsp
                ${new Date(this.bookedPlan.bookedPlan.bookedTo).toLocaleDateString()}
                `}
                &nbsp(${this.plan?.contractPeriod})
              </dd>
              <dt>Included Seats:</dt>
              <dd>${Math.min(this.plan.includedSeats,this.usedSeats)} of ${this.plan.includedSeats} used</dd>
              <dt>Storage:</dt>
              <dd>${this.storageValue()} of ${this.getStorageValue(this.plan.includedStorage)} used</dd>
              <dt>Credits:</dt>
              <dd>
                  <div>
                    <span>${this.currentCredits.toLocaleString()}</span>
                    of ${this.plan.includedCredits.toLocaleString()} used
                  </div>
              </dd>
              ${this.plan.allowsOverage?x`
                <dt>Overage:</dt>
                <dd style="color: ${this.bookedPlan.thereofOverageCredits>0?"#d20064":"#555"}">${this.bookedPlan.thereofOverageCredits.toLocaleString()}</dd>
              `:""}
              ${this.renderAiUsage(this.aiUsage)}
              ${this.renderMockupUsage(this.bookedPlan.mockupCredits??0)}
            </dl>
          `:""}
          <div class="button-wrapper">
            <wc-button caption="Change Plan" size="md" color="green" @click=${this.changePlan}></wc-button>
            <wc-button caption="Cancel Plan" size="md" color="green" @click=${this.cancelPlan}></wc-button>
          </div>
        </div>
      </div>

      ${this.pastPlans?x`
        <div class="card green">
          <div class="table-header">
            <h3 class="title">
              <div class="plan-name">
                Previous Periods
              </div>
            </h3>
          </div>

          <div class="table-body">
            <dl>
              ${this.renderPlanHistory(this.pastPlans[this.shownBookedPlan])}
            </dl>
          </div>
        </div>
        `:""}

      ${this.nextBookedPlan&&this.nextBookedPlanInfo?x`
        <div class="card blue">
          <div class="table-header">
            <h3 class="title">
              <div class="plan-name">
                Upcoming Plan: ${this.nextBookedPlan.name}
              </div>
            </h3>
          </div>

          <div class="table-body">
            <dl>
              <dt>Additional Seats:</dt>
              <dd>
                ${this.nextBookedPlan.includedSeats}
              </dd>
              <dt>Storage:</dt>
              <dd>${this.getStorageValue(this.nextBookedPlan.includedStorage)}</dd>
              <dt>Credits:</dt>
              <dd>${this.nextBookedPlan.includedCredits.toLocaleString()}</dd>
              ${this.nextBookedPlan.allowsOverage&&this.nextPlanOverageCredits?x`
                <dt>Overage:</dt>
                <dd style="color: ${this.nextPlanOverageCredits>0?"#d20064":"#555"}">${this.nextPlanOverageCredits.toLocaleString()}</dd>
              `:""}
              <dt>Contract Period:</dt>
              <dd>
                  ${new Date(this.nextBookedPlanInfo.bookedTo).getTime()===new Date("9999-12-31T23:59:59.999999Z").getTime()?"from ":""}

                  ${new Date(this.nextBookedPlanInfo.bookedOn).toLocaleDateString()}

                  ${new Date(this.nextBookedPlanInfo.bookedTo).getTime()===new Date("9999-12-31T23:59:59.999999Z").getTime()?"":x`
                  &nbsp - &nbsp
                  ${new Date(this.nextBookedPlanInfo.bookedTo).toLocaleDateString()}
                  `}
                  (${this.nextBookedPlan?.contractPeriod})
              </dd>
            </dl>
          </div>
        </div>
      `:""}
    `}};__decorate$1E([e$3({type:Object})],WcPlanOverview.prototype,"plan",void 0),__decorate$1E([e$3({type:Array})],WcPlanOverview.prototype,"plans",void 0),__decorate$1E([e$3({type:Object})],WcPlanOverview.prototype,"storage",void 0),__decorate$1E([e$3({type:Object})],WcPlanOverview.prototype,"bookedPlan",void 0),__decorate$1E([e$3({type:Object})],WcPlanOverview.prototype,"aiUsage",void 0),__decorate$1E([e$3({type:Array})],WcPlanOverview.prototype,"pastPlans",void 0),__decorate$1E([e$3({type:Object})],WcPlanOverview.prototype,"firstPlan",void 0),__decorate$1E([e$3({type:Number})],WcPlanOverview.prototype,"shownBookedPlan",void 0),__decorate$1E([e$3({type:Array})],WcPlanOverview.prototype,"mockupUsage",void 0),__decorate$1E([e$3({type:Array})],WcPlanOverview.prototype,"pastMockupUsage",void 0),__decorate$1E([e$3({type:Number})],WcPlanOverview.prototype,"currentSeats",void 0),__decorate$1E([e$3({type:Number})],WcPlanOverview.prototype,"usedSeats",void 0),__decorate$1E([e$3({type:Number})],WcPlanOverview.prototype,"currentCredits",void 0),__decorate$1E([e$3({type:Object})],WcPlanOverview.prototype,"nextPlan",void 0),__decorate$1E([e$3({type:Object})],WcPlanOverview.prototype,"nextBookedPlan",void 0),__decorate$1E([e$3({type:Object})],WcPlanOverview.prototype,"nextBookedPlanInfo",void 0),__decorate$1E([e$3({type:Number})],WcPlanOverview.prototype,"nextPlanOverageCredits",void 0),WcPlanOverview=__decorate$1E([e$4("wc-plan-overview")],WcPlanOverview);var __decorate$1D=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogBookSeats=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal-wrapper {
        width: 65vmin;
      }

      .seats-wrapper {
        text-align: center;
        margin: 20px 0 40px;
      }

      h1 {
        font-family: var(--printess-header-font);
        font-size: 18px;
        line-height: 30px;
        font-style: normal;
        letter-spacing: 0px;
        text-indent: 0px;
        text-transform: none;
        margin-bottom: 20px;
      }

      label {
        cursor: pointer;
        font-family: var(--printess-text-font);
      }
      input#seats {
        width: 100px;
        height: 40px;
        font-size: 16px;
        color: #555;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: var(--printess-text-font);
      }

      [type="checkbox"] {
        position: relative;
        border: none;
        border-radius: 10px;
        outline: none;
        left: 0px;
        top: -10px;
        width: 40px;
        height: 16px;
        z-index: 0;
        -webkit-appearance: none;
      }

      [type="checkbox"]:focus, [type="checkbox"]:hover {
        display: hidden;
        border: none;
        outline: none;
      }

      [type="checkbox"] + label {
        position: relative;
        display: block;
        cursor: pointer;
        line-height: 1.7;
        padding-left: 70px;
        position: relative;
        margin-top: -35px;
      }
      [type="checkbox"] + label:before {
        width: 40px;
        height: 18px;
        border-radius: 30px;
        border: 2px solid #ddd;
        background-color: #EEE;
        content: "";
        margin-right: 15px;
        transition: background-color 0.5s linear;
        z-index: 5;
        position: absolute;
        left: 0px;
      }
      [type="checkbox"] + label:after {
        width: 18px;
        height: 18px;
        border-radius: 30px;
        background-color: #fff;
        content: "";
        transition: margin 0.1s linear;
        box-shadow: 0px 0px 5px #aaa;
        position: absolute;
        left: 2px;
        top: 2px;
        z-index: 10;
      }
      [type="checkbox"]:checked + label:before {
        background-color: #e35fbc;
      }
      [type="checkbox"]:checked + label:after {
        margin: 0 0 0 22px;
      }

      .side-note {
        font-size: 14px;
        font-family: var(--printess-text-font);
        padding: 10px 20px;
        margin: 20px 0;
        border-top: 3px solid var(--dialog-warning-red);
        border-bottom: 3px solid var(--dialog-warning-red);
        border-radius: 4px;
        text-align: center;
      }

      .terms-of-use {
        font-size: 10px;
        margin-top: 30px;
        margin-bottom: 10px;
        text-align: center;
        width: 100%;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .back, .continue {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 14px;
        min-width: 100px;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }
      .back:hover, .continue:hover {
        background-color: var(--printess-pinkHover);
      }

      .disabled {
        background-color: var(--dialog-disabled-pink);
        cursor: not-allowed;
      }
      .disabled:hover {
        background-color: var(--dialog-disabled-pink);
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          width: 90vmin;
        }
      }
    `]}constructor(e,t){super(),this.seats=0,this.bookedSeats=0,this.isTrial=!1,this.backdrop=new WcBackdrop,this.bookedSeats=e,this.isTrial=t}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async buySeats(){const e=await api.bookSeats(this.seats+this.bookedSeats);e instanceof ServerErrorResponse$2&&this.showError(e)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}setSeatsValue(e){const t=parseInt(e.target.value);this.seats=t>0?t:0}bookAdditionalSeats(){(0!==this.seats||this.isTrial)&&(this.callback&&(this.buySeats(),this.callback(this.seats)),this.closeDialog())}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Book Additional Seats</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="seats-wrapper">
              <h1>Add more seats to your subscription</h1>
              <input type="number" name="seats" id="seats" min="0" @change=${e=>this.setSeatsValue(e)} value=${this.seats}>
              ${this.isTrial?x`<label style="margin-left: 10px; cursor: default;">Free during trial!</label>`:""}
            </div>

            <div class="side-note">
              <p>
                * Additional seats will be charged with EUR 20/month per seat.
                Additional seats can get canceled anytime for the following month.
                We will always charge the maximum amount of existing additional seats in an account per month.
              </p>
            </div>
            <div class="terms-of-use">
              By continuing, you are indicating that you <br>accept our
              <a href="proxy.php?url=https%3A%2F%2Fprintess.com%2Flegal%2FEN_Printess_AGB_20210401.html" target="_blank">Terms of Use</a> and
              <a href="proxy.php?url=https%3A%2F%2Fprintess.com%2Flegal%2FEN_PrivacyPolicy_20210401.html" target="_blank">Privacy Policy</a>.
            </div>
            <div class="button-wrapper">
              <button class="back" @click=${this.closeDialog}>Cancel</button>
              <button class="continue ${0!==this.seats||this.isTrial?"":"disabled"}" @click=${this.bookAdditionalSeats}>${this.isTrial?"Get Trial Seats Now":`Buy Now for EUR ${20*this.seats},-`}</button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1D([e$3({type:Number})],WcDialogBookSeats.prototype,"seats",void 0),__decorate$1D([e$3({type:Number})],WcDialogBookSeats.prototype,"bookedSeats",void 0),__decorate$1D([e$3({type:Boolean})],WcDialogBookSeats.prototype,"isTrial",void 0),WcDialogBookSeats=__decorate$1D([e$4("wc-dialog-book-seats")],WcDialogBookSeats);var __decorate$1C=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogRemoveSeat=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal-wrapper {
        height: auto;
        min-width: 450px;
      }

      .modal-content {
        padding-bottom: 35px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: auto;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
      }

      .warning {
        font-size: 12px;
        font-family: var(--printess-text-font);
        color: var(--dialog-warning-red);
        margin: 10px;
        text-align: center;
      }

      .disabled {
        background-color: var(--dialog-disabled-pink);
        cursor: not-allowed;
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserSeatsCount(){const e=await api.loadUserBookedInfo();e instanceof ServerErrorResponse$2?this.showError(e):this.availableSeats=e.bookedSeats+e.bookedPlan.includedSeats}async loadTeamMembers(){const e=await api.loadPinnedUsers();e instanceof ServerErrorResponse$2?this.showError(e):this.usedSeats+=e.length}async loadWhitelistMembers(){const e=await api.loadWhitelist();e instanceof ServerErrorResponse$2?this.showError(e):this.usedSeats+=e.length}async buySeats(){const e=await api.bookSeats(this.extraSeats);e instanceof ServerErrorResponse$2?this.showError(e):this.closeDialog()}connectedCallback(){super.connectedCallback(),this.loadUserSeatsCount(),this.loadTeamMembers(),this.loadWhitelistMembers()}constructor(e){super(),this.removeSeat=!1,this.usedSeats=0,this.backdrop=new WcBackdrop,this.extraSeats=e}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this),this.callback&&this.callback(this.removeSeat)}undoRemove(){this.removeSeat=!1,this.closeDialog()}confirmRemove(){this.usedSeats>=this.availableSeats||(this.removeSeat=!0,this.extraSeats--,this.buySeats())}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Remove Seat</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <p>Do you really want to remove a seat?</p>
            ${this.usedSeats>=this.availableSeats?x`
              <p class="warning">You need to remove a team member to cancel a seat.</p>
            `:""}
            <div class="button-wrapper">
              <button class="submit" @click=${this.undoRemove}>Cancel</button>
              <button class="submit ${this.usedSeats>=this.availableSeats?"disabled":""}" @click=${this.confirmRemove}>Remove</button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$1C([e$3({type:Boolean})],WcDialogRemoveSeat.prototype,"removeSeat",void 0),__decorate$1C([e$3({type:Number})],WcDialogRemoveSeat.prototype,"extraSeats",void 0),__decorate$1C([e$3({type:Number})],WcDialogRemoveSeat.prototype,"availableSeats",void 0),__decorate$1C([e$3({type:Number})],WcDialogRemoveSeat.prototype,"usedSeats",void 0),WcDialogRemoveSeat=__decorate$1C([e$4("wc-dialog-remove-seat")],WcDialogRemoveSeat);var __decorate$1B=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcadditionalSeats=class extends s$1{constructor(){super(...arguments),this.additionalSeats=0,this.includedSeats=0,this.usedSeats=0,this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[subscriptionStyles,i$4`
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .plan-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .disabled {
        background-color: #8abdeb !important;
        cursor: not-allowed;
      }

      .hidden {
        display: none;
      }

      wc-icon {
        padding: 0px;
      }

      a {
        color: var(--printess-pink);
        text-decoration: none;
      }

      .module-description {
        margin-left: 1.25rem;
        font-size: 12px;
        line-height: 1.5rem;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .remove-button {
          font-size: 12px;
        }

        dl {
          grid-template-columns: 100px calc(100% - 100px);
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async getSeatsHistory(){const e=await api.loadSeatsHistory();e instanceof ServerErrorResponse$2?this.showError(e):this.nextSeats=e.seatsHistory.filter(e=>new Date(e.bookedOn).getTime()<(new Date).getTime()&&new Date(e.bookedTo).getTime()>(new Date).getTime()&&!e.canceledOn)[0]}connectedCallback(){super.connectedCallback(),this.getSeatsHistory(),window.addEventListener("resize",this._handleResize)}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}addSeats(){new WcDialogBookSeats(this.additionalSeats,this.bookedPlan.isTrial).showDialog(e=>{this.additionalSeats+=e})}removeSeats(){if(0===this.additionalSeats)return;new WcDialogRemoveSeat(this.additionalSeats).showDialog(e=>{e&&this.additionalSeats--})}render(){const e=Math.max(0,this.includedSeats-this.usedSeats),t=e>=0?this.additionalSeats:this.additionalSeats-e;return x`
      <div class="card green">
        <div class="table-header">
          <h3 class="title">
            <div class="plan-name">
              Additional Seats
            </div>
          </h3>
        </div>
        <div class="table-body">
          ${this.additionalSeats>0&&this.nextSeats?x`
            <dl>
              <dt>Additional Seats:</dt>
              <dd>
                ${this.additionalSeats-t} of ${this.additionalSeats} used
              </dd>
              <dt>Next Period:</dt>
              <dd>
                from
                ${new Date(this.nextSeats.bookedTo).toLocaleDateString()}
              </dd>
            </dl>
          `:x`
            <p style="padding: 10px 20px 0;">No extra seats booked.</p>
          `}
          <div class="button-wrapper">
            <wc-button caption="Add Seats" color="green" size="md" @click=${this.addSeats}></wc-button>
            ${this.additionalSeats>0&&this.nextSeats?x`
              <wc-button caption="Cancel Seats" color="green" size="md" @click=${this.removeSeats}></wc-button>
            `:""}
          </div>
          <div class="module-description">
            Added seats are billed from the time of booking until the end of the active plan. They are automatically renewed unless they are cancelled.
            <br>
            Cancelled seats disappear automatically at the end of the plan term. Please note that only free seats can be cancelled (view
              <a href="#team-members">Team Members</a>
            )
          </div>
        </div>
      </div>
    `}};__decorate$1B([e$3({type:Number})],WcadditionalSeats.prototype,"additionalSeats",void 0),__decorate$1B([e$3({type:Number})],WcadditionalSeats.prototype,"includedSeats",void 0),__decorate$1B([e$3({type:Number})],WcadditionalSeats.prototype,"usedSeats",void 0),__decorate$1B([e$3({type:Object})],WcadditionalSeats.prototype,"bookedPlan",void 0),__decorate$1B([e$3({type:Object})],WcadditionalSeats.prototype,"nextSeats",void 0),WcadditionalSeats=__decorate$1B([e$4("wc-extra-seats")],WcadditionalSeats);const dialogAddonStyles=[dialogStyles$1,i$4`
  .modal-wrapper {
    width: 65vmin;
  }

  .modal-content {
    max-height: 80vh;
  }

  .addon-wrapper {
    text-align: center;
    margin: 20px 0 20px;
  }

  h1 {
    font-family: var(--printess-header-font);
    font-size: 18px;
    line-height: 30px;
    font-style: normal;
    letter-spacing: 0px;
    text-indent: 0px;
    text-transform: none;
    margin-bottom: 20px;
  }

  .side-note {
    font-size: 14px;
    font-family: var(--printess-text-font);
    padding: 10px 20px;
    margin: 20px 0;
    border-top: 3px solid var(--dialog-warning-red);
    border-bottom: 3px solid var(--dialog-warning-red);
    border-radius: 4px;
    text-align: center;
  }

  .terms-of-use {
    font-size: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
  }

  .button-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  button {
    font-family: var(--printess-text-font);
    font-weight: 400px;
    background-color: var(--printess-pink);
    margin: 20px 10px 0px 0px;
    padding: 10px 20px;
    font-size: 14px;
    min-width: 100px;
    border: none;
    outline: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
  }

  button:hover, {
    background-color: var(--printess-magenta);
  }

  button.selected {
    background-color: var(--printess-lightmagenta);
    color: var(--printess-gallery-text);
  }

  .disabled {
    background-color: var(--dialog-disabled-pink);
    cursor: not-allowed;
  }

  .disabled:hover {
    background-color: var(--dialog-disabled-pink);
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .modal-wrapper {
      width: 90vmin;
    }
  }
`];var __decorate$1A=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogChooseAddon=class extends s$1{static get styles(){return[dialogAddonStyles,i$4`
    `]}constructor(e,t,o,r){super(),this.plan=t,this.addon=e,o&&(this.selectedAddon=o),r&&(this.selectableAddons=r)}showOptions(e){this.callback=e}closeDialog(){this.dispatchEvent(new DialogCloseEvent)}handleSubPlanChange(e){this.selectedAddon=e}selectModule(){this.callback&&this.selectedAddon&&this.callback(this.selectedAddon)}render(){let e=0,t="",o="";if(this.selectedAddon){const r=new AddonPrice(this.selectedAddon.price);e=("fixed"===this.addon.price.type&&"yearly"===this.plan.contractPeriod?r.yearly():r.monthly())/100,o=this.addon.variantResults&&this.addon.variantResults.get(this.selectedAddon.id.toString())||"",o=o.substring(o.indexOf("-")+1),this.selectableAddons&&this.addon.bookedAddon&&(t=this.addon.variantResults&&this.addon.variantResults.get(this.addon.bookedAddon.id.toString())||"")}return x`
      <div class="addon-wrapper">
        <h1>${this.selectableAddons&&this.selectedAddon?"Change to ":""}${this.addon.name} ${this.selectedAddon&&"fixed"!==this.addon.price.type?this.selectedAddon.name:""}</h1>
        ${this.selectedAddon?x`
          <h2 style="color: var(--printess-pink)">EUR ${e},- / Month</h2>
          `:x`<h2 style="color: var(--printess-pink)">Select${this.selectableAddons?" a new ":" an "}Addon!</h2>`}
        </div>
      <div class="button-wrapper" id="sub-addon-buttons">
        ${(()=>{const e=this.selectableAddons?this.selectableAddons:this.addon.variants;return e&&e.length>0?c(e,e=>e.id,e=>{const t=new AddonPrice(e.price).monthly()/100;return x`
              <button
                class="option-button ${this.selectedAddon?.id===e.id?"selected":""}"
                @click="${()=>this.handleSubPlanChange(e)}"
                data-value="${e.id}"
              >
                ${e.name} for ${t},-
              </button>
            `}):""})()}
      </div>

      ${o?x`
        <div class="side-note">
          <p>
            ${t?x`<span style="text-decoration: line-through; text-decoration-thickness: 1.5px;">${t}</span><br>`:""}
            ${o}
          </p>
        </div>
        `:""}
      <div class="terms-of-use">
        By continuing, you are indicating that you <br>accept our
        <a href="proxy.php?url=https%3A%2F%2Fwww.printess.com%2Flegal%2FPrintess_AGB_EN.html" target="_blank">Terms of Use</a> and
        <a href="proxy.php?url=https%3A%2F%2Fwww.printess.com%2Flegal%2FPrivacyPolicy_EN.html" target="_blank">Privacy Policy</a>.
      </div>
      <div class="button-wrapper">
        <button class="back" @click=${this.closeDialog}>Cancel</button>
        ${this.selectedAddon?x`
          <button class="continue" @click=${this.selectModule}>Buy Now for EUR ${e},- / Month</button>
          `:x`
          <button class="continue disabled">Buy Now</button>
          `}
        </div>
      </div>
        `}};__decorate$1A([e$3({type:Object})],WcDialogChooseAddon.prototype,"plan",void 0),__decorate$1A([e$3({type:Object})],WcDialogChooseAddon.prototype,"addon",void 0),__decorate$1A([e$3({type:Array})],WcDialogChooseAddon.prototype,"selectableAddons",void 0),__decorate$1A([e$3({type:Object})],WcDialogChooseAddon.prototype,"selectedAddon",void 0),WcDialogChooseAddon=__decorate$1A([e$4("wc-dialog-choose-addon")],WcDialogChooseAddon);var __decorate$1z=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogUpdateAddressAddon=class extends s$1{static get styles(){return[userProfileStyles,i$4`
      .card {
        margin-bottom: 0px;
      }

      .table-body {
        padding-bottom: 10px;
      }

      dl {
        grid-template-columns: 130px calc(100% - 130px);
      }

      .mandatory {
        font-weight: bold;
      }

      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      .missing-field {
        border: 1px solid var(--dialog-warning-red);
      }

      .warning {
        color: var(--dialog-warning-red);
        text-align: center;
        width: 100%;
        font-size: 12px;
        margin: 30px 0 0;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .back, .continue {
        background-color: var(--printess-green);
        margin: 20px 5px 0px;
        padding: 10px 20px;
        font-size: 16px;
        min-width: 100px;
      }
      .back:hover, .continue:hover {
        background-color: var(--printess-greenHover);
      }

      .disabled {
        cursor: not-allowed;
        background-color: #d2dbaf;
      }
      .disabled:hover {
        background-color: #d2dbaf;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card.green {
          margin-top: 20px;
        }
        dd, dt {
          padding:5px;
        }
        .back, .continue {
          padding: 5px 7px;
          font-size: 12px;
          flex: 1 0 auto;
        }
      }
    `]}constructor(e,t){super(),this.missingFields=[],this.warningOn=!1,this.profileChanged=!1,this.requiredFields=["company","displayName","addressOne","postalCode","city","country"],this.backAction=e,this.nextAction=t}setState(e){this.state=new UserProfile(e,this.state)}showAddress(e){this.callback=e}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserProfile(){const e=await api.loadProfile();if(e instanceof ServerErrorResponse$2)this.showError(e);else if(this.state=new UserProfile(e),this.profile=e,!this.profile.timezone){const e=new Nobs;e.setProperty(this.state,"timezone",Intl.DateTimeFormat().resolvedOptions().timeZone),this.setState(e)}}async updateUserProfile(e){const t=await api.updateProfile(e);return t instanceof ServerErrorResponse$2?(this.showError(t),"failure"):(console.log(this.profile),"success")}connectedCallback(){super.connectedCallback(),this.loadUserProfile()}changeProfile(e){const t=new Nobs,o=e.target.name,r=e.target.value;t.setProperty(this.state,o,r),this.setState(t),this.missingFields=this.missingFields.filter(e=>e!==o),0===this.missingFields.length?this.warningOn=!1:this.warningOn=!0,this.profileChanged=!0}async updateProfile(e){const t=this.state.toDto();if(this.profileChanged){if("failure"===await this.updateUserProfile(t))return void alert("An error occurred, please try again later!")}this.callback&&this.callback(e,t)}async continueBooking(){const e=this.state.toDto();if(!this.warningOn){for(const[t,o]of Object.entries(e))this.requiredFields.includes(t)&&!o&&this.missingFields.push(t);if(this.missingFields.length>0)return this.requestUpdate(),void(this.warningOn=!0);this.updateProfile(this.nextAction)}}getFlag(e){const t=e.toUpperCase().split("").map(e=>127397+e.charCodeAt(0));return String.fromCodePoint(...t)}render(){return x`
      <div class="address-wrapper">
        <div class="card green">
          <div class="table-header">
            <h3 class="title">Billing Address</h3>
          </div>
          <div class="table-body">
            <dl>${this.profile?x`
              <dt class="mandatory">Company:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("company")?"missing-field":""}" @change=${this.changeProfile} name="company" value=${this.profile.company??""} placeholder="company" readonly></dd>
              <dt class="mandatory">Name:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("displayName")?"missing-field":""}" @change=${this.changeProfile} name="displayName" value=${this.profile.displayName??""} placeholder="display name"></dd>
              <!-- <dt>First Name:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("firstName")?"missing-field":""}" @change=${this.changeProfile} name="firstName" value=${this.profile.firstName??""} placeholder="first name"></dd>
              <dt>Last Name:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("lastName")?"missing-field":""}" @change=${this.changeProfile} name="lastName" value=${this.profile.lastName??""} placeholder="last name"></dd> -->
              <dt class="mandatory">Address 1:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("addressOne")?"missing-field":""}" @change=${this.changeProfile} name='addressOne' value=${this.profile.addressOne??""} placeholder="address line 1"></dd>
              <dt>Address 2:</dt>
              <dd><input class="profile-input" @change=${this.changeProfile} name='addressTwo' value=${this.profile.addressTwo??""} placeholder="address line 2"></dd>
              <dt class="mandatory">Postal Code:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("postalCode")?"missing-field":""}" @change=${this.changeProfile} name='postalCode' value=${this.profile.postalCode??""} placeholder=" postal code"></dd>
              <dt class="mandatory">City:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("city")?"missing-field":""}" @change=${this.changeProfile} name='city' value=${this.profile.city??""} placeholder="city"></dd>
              <dt>State:</dt>
              <dd><input class="profile-input" @change=${this.changeProfile} name='state' value=${this.profile.state??""} placeholder="state"></dd>
              <dt class="mandatory">Country:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("country")?"missing-field":""}" @change=${this.changeProfile} name="country" value=${this.profile.country??""} type="text" list="country" placeholder="country">
                <datalist id="country">
                  ${countries.map(e=>x`<option value=${e.country}>${e.country}</option>`)}
                </datalist>
              </dd>
              <dt>Phone:</dt>
              <dd style="display: grid; grid-template-columns: 102px 2fr;">
                <input class="profile-input" @change=${this.changeProfile} name="countryCode" value=${this.profile.countryCode??""} type="text" list="countryCode" placeholder="🇩🇪 +49">
                <datalist id="countryCode">
                  ${countries.sort((e,t)=>e.countryCode-t.countryCode).map(e=>x`
                    <option value='${this.getFlag(e.ISO2Code)} ${e.countryCode}'>
                    </option>`)}
                </datalist>
                <input class="profile-input" @change=${this.changeProfile} name='phone' value=${this.profile.phone??""} placeholder="phone">
              </dd>
              <dt>EU VAT-ID:</dt>
              <dd><input class="profile-input ${this.missingFields.includes("vat")?"missing-field":""}" @change=${this.changeProfile} name='vat' value=${this.profile.vat??""} placeholder="VAT no."></dd>
              <dt>Accounting Email:</dt>
              <dd><input class="profile-input" @change=${this.changeProfile} name='accountingEmail' value=${this.profile.accountingEmail??""} placeholder="Accounting / billing email"></dd>
            `:""}
            </dl>
          </div>
        </div>
        <div class="button-wrapper">
          <button class="back" @click=${()=>this.updateProfile(this.backAction)}>back</button>
          <button class="continue ${this.warningOn?"disabled":""}" @click=${this.continueBooking}>continue</button>
        </div>
        ${this.warningOn?x`<p class="warning">*Please fill in the missing information!</p>`:""}
      </div>
    `}};__decorate$1z([e$3({type:Object})],WcDialogUpdateAddressAddon.prototype,"state",void 0),__decorate$1z([e$3({type:Object})],WcDialogUpdateAddressAddon.prototype,"profile",void 0),__decorate$1z([e$3({type:Array})],WcDialogUpdateAddressAddon.prototype,"missingFields",void 0),__decorate$1z([e$3({type:Boolean})],WcDialogUpdateAddressAddon.prototype,"warningOn",void 0),__decorate$1z([e$3({type:Boolean})],WcDialogUpdateAddressAddon.prototype,"profileChanged",void 0),WcDialogUpdateAddressAddon=__decorate$1z([e$4("wc-dialog-update-address-addon")],WcDialogUpdateAddressAddon);var __decorate$1y=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogOverview=class extends s$1{static get styles(){return i$4`
      .overview-wrapper {
        display: flex;
        flex-direction: column;
        padding: 30px 10px 0px;
      }

      .selection-overview {
        border-radius: 4px;
        border-top: 3px solid var(--printess-pink);
        border-bottom: 3px solid var(--printess-pink);
        padding: 10px;
        margin-bottom: 20px;
      }

      .flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      .flex-span {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      hr {
        border: none;
        border-bottom: 1px solid #ccc;
      }

      .address-payment-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
      }

      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-family: var(--printess-header-font);
      }

      .edit {
        padding: 5px 10px;
        border: none;
        outline: none;
        background-color: var(--printess-pink);
        font-family: var(--printess-text-font);
        border-radius: 4px;
        color: #fff;
        margin-left: 5px;
        cursor: pointer;
      }
      .edit:hover {
        background-color: var(--printess-pinkHover);
      }

      .spinner, .spinner:after {
        border-radius: 50%;
        width: 5em;
        height: 5em;
        margin-top: 20px;
      }
      .spinner {
        font-size: 15px;
        position: relative;
        border-top: 0.5em solid rgba(230,0,126, 0.2);
        border-right: 0.5em solid rgba(230,0,126, 0.2);
        border-bottom: 0.5em solid rgba(230,0,126, 0.2);
        border-left: 0.5em solid #e6007e;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .back, .continue {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 16px;
        min-width: 100px;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }
      .back:hover, .continue:hover {
        background-color: var(--printess-pinkHover);
      }

      wc-icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin: 0 10px;
      }

      .coupon-input {
        padding: 5px 7px;
        font-size: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: var(--printess-text-font);
      }

      .terms-and-policy {
        width: 100%;
        text-align: center;
        font-size: 12px;
        margin-top: 30px;
      }

      .disabled {
        background-color: var(--dialog-disabled-pink);
        cursor: not-allowed;
      }
      .disabled:hover {
        background-color: var(--dialog-disabled-pink);
      }

      .custom-strike {
        text-decoration: line-through;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .overview-wrapper {
          padding: 20px 10px 0;
          font-size: 12px;
        }
        .selection-overview {
          padding: 5px 7px;
          margin-bottom: 10px;
        }
        .address-payment-wrapper {
          grid-template-columns: 1fr;
          gap: 5px;
        }
        .title {
          margin-top: 5px;
        }
        .coupon-input {
          width: calc(100% - 70px);
        }
        .edit {
          font-size: 12px;
        }
        .back, .continue {
          flex: 1 0 auto;
          font-size: 12px;
          padding: 5px 7px;
        }
        .continue {
          margin-right: 0;
        }
        .terms-and-policy {
          margin-top: 10px;
        }
      }
    `}constructor(e,t,o,r,i,a,s,n){super(),this.addon=e,this.profile=t,o&&(this.parentAddon=o),this.plan=r,this.bookedPlanInfo=i,this.planMonthsLeft=getMonthsDifference(new Date,new Date(this.bookedPlanInfo.bookedPlan.bookedTo)),this.editAction=a,this.backAction=s,this.nextAction=n,this.addonPrice=new AddonPrice(this.addon?.price),this.calculatePrice()}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showOverview(e){this.callback=e}editPayment(){}editAddon(){this.callback&&this.callback(this.editAction,0)}backToAddress(){this.callback&&this.callback(this.backAction,0)}async bookAddon(){this.parentAddon.bookedAddon&&await api.cancelAddon(this.parentAddon.bookedAddon.id),await api.bookAddon(this.addon.id),this.callback&&this.callback(this.nextAction,this.finalPrice)}returnFinalSetOff(){return 0}calculatePrice(){let e=0;if("fixed"===this.addonPrice.type){const t=this.returnFinalSetOff();"yearly"===this.plan.contractPeriod&&(e=this.addonPrice.yearly()*this.planMonthsLeft-t),"monthly"===this.plan.contractPeriod&&(e=this.addonPrice.monthly()-t)}else e=this.addonPrice.baseFee??0;return this.finalPrice=Math.round(e)/100,e}render(){return x`
      <div class="overview-wrapper">
        <div class="selection-overview">
          <p class="flex">
            <span class="flex-span">
              <wc-icon @click=${this.editAddon} primaryColor="gray" icon="edit" style="margin-left: 0px;"></wc-icon>
              ${this.parentAddon.bookedAddon&&this.parentAddon.variants?x`
                <span class="custom-strike">${this.parentAddon.name} ${this.parentAddon.variants.find(e=>e.id===this.parentAddon.bookedAddon?.id)?.name} </span>
                <wc-icon primaryColor="gray" icon="arrow-right"></wc-icon>
                `:""}
              ${config.isMobile?x`<br>`:""} ${this.parentAddon.name} ${this.addon.name}
              (${"fixed"===this.addonPrice.type?this.plan.contractPeriod:"monthly"} payment)
            </span>
            <span>
              € ${("yearly"===this.plan.contractPeriod?this.addonPrice.yearly()/100:this.addonPrice.monthly()/100).toLocaleString()}
              ${"yearly"===this.plan.contractPeriod&&"fixed"===this.addonPrice.type?`x ${this.planMonthsLeft}`:""}
            </span>
          </p>
          <hr>
          <p class="flex" style="font-weight: bold;">
            Total Price (excl. taxes) :
            <span>€ ${this.finalPrice.toLocaleString()}</span>
          </p>
        </div>

        ${this.profile?x`
          <div class="address-payment-wrapper">
            <div class="address">
              <h3 class="title">Billing Address <wc-icon primaryColor="gray" icon="edit" @click=${this.backToAddress}></wc-icon></h3>
              <p>
                ${this.profile.company?x`${this.profile.company}<br><br>`:""}
                ${this.profile.displayName}<br>
                ${this.profile.addressOne}<br>
                ${this.profile.addressTwo?x`${this.profile.addressTwo}<br>`:""}
                ${this.profile.postalCode} ${this.profile.city}<br><br>
                ${this.profile.state?x`${this.profile.state}, `:""}
                ${this.profile.country}
              </p>
            </div>

            <div class="payment">
              <h3 class="title">Payment Method <wc-icon primaryColor="lightgray" icon="edit" @click=${this.editPayment}></wc-icon></h3>
              <p>
                Full name: ${this.profile.displayName}<br>${config.isMobile?"":x`<br>`}
                VAT No.: ${this.profile.vat}<br>${config.isMobile?"":x`<br>`}
                Payment: A bill will be send to you.
              </p>
            </div>
          </div>
        `:x`<div class="spinner"></div>`}

        <div class="button-wrapper">
          <button class="back" @click=${this.backToAddress}>Back</button>
          <button class="continue" @click=${this.bookAddon}>Buy Now</button>
        </div>
        <p class="terms-and-policy">By clicking Buy Now, you agree to our
          <a href="proxy.php?url=https%3A%2F%2Fwww.printess.com%2Flegal%2FPrintess_AGB_EN.html" target="_blank">Terms of Use</a> and
          <a href="proxy.php?url=https%3A%2F%2Fwww.printess.com%2Flegal%2FPrivacyPolicy_EN.html" target="_blank">Privacy Policy</a>.</p>
      </div>
    `}};__decorate$1y([e$3({type:Object})],WcDialogOverview.prototype,"addon",void 0),__decorate$1y([e$3({type:Object})],WcDialogOverview.prototype,"profile",void 0),__decorate$1y([e$3({type:Object})],WcDialogOverview.prototype,"parentAddon",void 0),__decorate$1y([e$3({type:Object})],WcDialogOverview.prototype,"plan",void 0),__decorate$1y([e$3({type:Object})],WcDialogOverview.prototype,"bookedPlanInfo",void 0),__decorate$1y([t$1()],WcDialogOverview.prototype,"planMonthsLeft",void 0),__decorate$1y([t$1()],WcDialogOverview.prototype,"finalPrice",void 0),WcDialogOverview=__decorate$1y([e$4("wc-dialog-overview")],WcDialogOverview);var __decorate$1x=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogBookAddon=class extends s$1{static get styles(){return[dialogAddonStyles,i$4`
    `]}constructor(e,t,o,r){if(super(),this.wrapperContent="chooseAddon",this.mode="book",this.finalPrice=0,this.backdrop=new WcBackdrop,this.addon=e,r&&(this.mode=r,"change"===r&&e&&e.variants&&e.bookedAddon)){const t=e.bookedAddon.id;this.selectableAddons=e.variants.filter(e=>e.id!==t)}if(this.addon.variants){if(e.bookedAddon){const t=e.bookedAddon.id,o=this.addon.variants.find(e=>e.id===t);o&&(this.selectedAddon=o)}}else this.selectedAddon=this.addon;this.plan=t,this.bookedPlanInfo=o}connectedCallback(){super.connectedCallback(),this.addEventListener("close-event",this.closeDialog)}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}getPlanOptions(){switch(this.wrapperContent){case"chooseAddon":{const e=new WcDialogChooseAddon(this.addon,this.plan,this.selectedAddon,this.selectableAddons);return e.showOptions(e=>{this.selectedAddon=e,this.wrapperContent="updateAddress"}),e}case"updateAddress":{const e=new WcDialogUpdateAddressAddon("chooseAddon","finalOverview");return e.showAddress((e,t)=>{this.wrapperContent=e,this.profile=t}),e}case"finalOverview":{const e=new WcDialogOverview(this.selectedAddon,this.profile,this.addon,this.plan,this.bookedPlanInfo,"chooseAddon","updateAddress","purchaseConfirmation");return e.showOverview((e,t)=>{this.wrapperContent=e,this.finalPrice=t,"purchaseConfirmation"===e&&this.callback&&this.callback(this.selectedAddon)}),e}case"purchaseConfirmation":{const e={id:this.selectedAddon.id,name_rewrite:`${this.addon.id!==this.selectedAddon.id?this.addon.name:""} ${this.selectedAddon.name}`},t=new WcDialogPurchaseConfirmation("addon",this.finalPrice,e);return t.showCongratulation(e=>{e&&this.closeDialog()}),t}default:assertNever$1(this.wrapperContent)}}render(){return x`
      <div class="modal">
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Book ${"fixed"===this.addon.price.type?this.addon.name:`A ${this.addon.name}`} Addon</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>
          <div class="modal-content">
            ${this.getPlanOptions()}
          </div>
        </div>
      </div>
    `}};__decorate$1x([e$3({type:String})],WcDialogBookAddon.prototype,"wrapperContent",void 0),__decorate$1x([e$3({type:String})],WcDialogBookAddon.prototype,"mode",void 0),__decorate$1x([e$3({type:Object})],WcDialogBookAddon.prototype,"plan",void 0),__decorate$1x([e$3({type:Object})],WcDialogBookAddon.prototype,"bookedPlanInfo",void 0),__decorate$1x([e$3({type:Object})],WcDialogBookAddon.prototype,"profile",void 0),__decorate$1x([e$3({type:Object})],WcDialogBookAddon.prototype,"addon",void 0),__decorate$1x([t$1()],WcDialogBookAddon.prototype,"selectableAddons",void 0),__decorate$1x([t$1()],WcDialogBookAddon.prototype,"selectedAddon",void 0),__decorate$1x([t$1()],WcDialogBookAddon.prototype,"finalPrice",void 0),WcDialogBookAddon=__decorate$1x([e$4("wc-dialog-book-addon")],WcDialogBookAddon);var __decorate$1w=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogCancelAddon=class extends s$1{static get styles(){return[dialogAddonStyles,i$4`
    `]}constructor(e){super(),this.backdrop=new WcBackdrop,this.addon=e}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}async cancelAddon(){let e;if(this.addon.bookedAddon&&this.addon.variants){const t=this.addon.bookedAddon;e=this.addon.variants.find(e=>e.id===t.id),e&&await api.cancelAddon(e.id)}else await api.cancelAddon(this.addon.id);this.callback&&this.callback(e||this.addon),this.closeDialog()}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Cancel ${this.addon.name}${this.addon.bookedAddon?` ${this.addon.bookedAddon.name} `:" "}Addon</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${this.closeDialog}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="addon-wrapper">
              <p>Do you really want to cancel the ${this.addon.name} ${this.addon.bookedAddon?` ${this.addon.bookedAddon.name} `:" "} addon?</p>
              </div>

            <div class="side-note">
              <p>
                ${this.addon.cancelResult}
              </p>
            </div>
            <div class="button-wrapper">
            <button class="submit delete" @click=${()=>this.cancelAddon()}>Terminate ${this.addon.name}</button>
              <button class="submit close" @click=${this.closeDialog}>Cancel</button>
            </div>
          </div>
        </div>
      </div>
      `}};__decorate$1w([e$3({type:Object})],WcDialogCancelAddon.prototype,"addon",void 0),WcDialogCancelAddon=__decorate$1w([e$4("wc-dialog-cancel-addon")],WcDialogCancelAddon);var __decorate$1v=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};class AddonPrice{constructor(e){Object.assign(this,e)}monthly(){return this.perMonth||this.baseFee||0}yearly(){return this.perYear||this.baseFee||0}}function calculateRenewalDate(e,t){const o=t||new Date,r=e.getDate(),i=new Date(o.getFullYear(),o.getMonth(),r);return i.getMonth()!==o.getMonth()&&i.setDate(0),i}function calculateTerminationDate(e,t){if(e>t)throw new Error("Booking date cannot be after cancellation date");return addMonths(e,getMonthsDifference(e,t)+1)}function getMonthsDifference(e,t){let o=12*(t.getFullYear()-e.getFullYear())+(t.getMonth()-e.getMonth());return t.getDate()-e.getDate()<0&&o--,Math.max(0,o)}function addMonths(e,t){const o=new Date(e),r=e.getDate();return o.setMonth(o.getMonth()+t),o.getDate()!==r&&o.setDate(0),o}class AddonStore{constructor(e,t){this.debug=e,this.now=t}flushStore(){this.addons=[],this.userAddons=[]}setAddons(e){this.addons=e,this.userAddons&&this.userPlan&&this.refreshAddons()}setUserAddons(e){this.userAddons=e,this.addons&&this.userPlan&&this.refreshAddons()}setUserPlan(e,t){this.userPlan=e,this.userPlanInfo=t,this.addons&&this.userAddons&&this.refreshAddons()}addUserAddon(e){this.userAddons.push(e),this.refreshAddons()}_getAddonEvents(e,t){const o=this.userAddons.filter(o=>e===o.addonId||t?.find(e=>e.id===o.addonId)).sort((e,t)=>new Date(e.createdOn).getTime()-new Date(t.createdOn).getTime());return o}_getAddonStatus(e,t){const o=this._getAddonEvents(e,t);if(0===o.length)return"never";return"book"===o[o.length-1].type?"booked":"cancelled"}getAddonEvents(e){return this._getAddonEvents(e.id,e.variants)}getAddonStatus(e){return this._getAddonStatus(e.id,e.variants)}refreshAddons(){if(!this.userPlan.contractPeriod)return;const e=new Date(this.userPlanInfo.startDate),t=new Date(this.userPlanInfo.bookedPlan.bookedTo),o=new Date(this.now);if(o.getTime()<e.getTime()||o.getTime()>=t.getTime()||o.getTime()>addMonths(e,1).getTime())this.addons=[];else for(const r of this.addons)this.processAddon(r,e,t,o)}processAddon(e,t,o,r){e.bookingState=this.getAddonStatus(e),e.bookedAddon=void 0;const i=this.getAddonEvents(e);if(0===i.length)return;const{bookEvent:a,cancelEvent:s}=this.extractEvents(i,e);if(!a)return;const n=new Date(a.createdOn);if(n.getTime()>r.getTime())return void(e.bookingState="never");const l=this.getBeginDate(e,n,t,o);"booked"===e.bookingState?this.handleBooked(e,n,l,t,o,r):"cancelled"===e.bookingState&&s&&this.handleCancelled(e,a,n,new Date(s.createdOn),l,t,o,r)}extractEvents(e,t){if(1===e.length)return"book"===e[0].type?{bookEvent:e[0]}:{};const[o,r]=[e[e.length-2],e[e.length-1]];if("cancel"===r.type&&"cancel"===o.type)return{};let i,a;if("book"===r.type&&"cancel"===o.type?[i,a]=[r,o]:"cancel"===r.type&&"book"===o.type?[i,a]=[o,r]:i="book"===r.type?r:"book"===o.type?o:void 0,i&&a){const e=a.addonId;if(i.addonId!==a.addonId&&t.id!==a.addonId&&!t.variants?.find(t=>t.id===e))return{}}return i?{bookEvent:i,cancelEvent:a}:{}}getBeginDate(e,t,o,r){if("booked"!==e.bookingState)return t.getTime()>=o.getTime()?t:o;if("fixed"===e.price.type){const e=addMonths(r,-12);return e.getTime()>t.getTime()?e:"monthly"===this.userPlan.contractPeriod&&t.getTime()<o.getTime()?o:t}return t.getTime()>=o.getTime()?t:o}handleBooked(e,t,o,r,i,a){t.getTime()>=Math.min(i.getTime(),a.getTime())?e.bookingState="never":(e.contractPeriod="fixed"===e.price.type||"monthly"===this.userPlan.contractPeriod?[o,i]:[o,addMonths(r,1)],e.bookedAddon=e.variants?.find(e=>"booked"===this._getAddonStatus(e.id)))}handleCancelled(e,t,o,r,i,a,s,n){if(o.getTime()>=Math.min(s.getTime(),n.getTime()))return;if("fixed"!==e.price.type&&(e.bookedAddon=e.variants?.find(e=>e.id===t.addonId)),!this.isValidCancellation(r,a,s,e.price.type))return void(e.bookedAddon=void 0);e.cancelDate=r;const l=addMonths(a,1),c=addMonths(a,-1),d=addMonths(s,-12);if(r>=a&&r<l)return e.contractPeriod="fixed"===e.price.type?[i,s]:[i,l],void("fixed"!==e.price.type&&(e.bookedAddon=e.variants?.find(e=>e.id===t.addonId)));if("monthly"===this.userPlan.contractPeriod&&"fixed"===e.price.type&&r<=a)return;if("yearly"===this.userPlan.contractPeriod&&"fixed"===e.price.type&&r>=d&&r<s)return e.contractPeriod=[o,s],void(e.bookedAddon=e.variants?.find(e=>e.id===t.addonId));if(r>=c&&r<=a&&"fixed"!==e.price.type){const t=calculateRenewalDate(o,n);return n.getTime()>t.getTime()?(e.bookingState="never",void(e.bookedAddon=void 0)):void(e.contractPeriod=[addMonths(t,-1),t])}const p=calculateTerminationDate(o,r),h="monthly"!==this.userPlan.contractPeriod&&"fixed"!==e.price.type&&p>n&&p<=s;e.contractPeriod=[i,h?p:s]}isValidCancellation(e,t,o,r){const i=e>=addMonths(t,-1)&&e<o,a="yearly"===this.userPlan.contractPeriod&&"fixed"===r&&e>=addMonths(o,-12)&&e<o;return i||a}findAddon(e){return this.addons.find(t=>t.id===e||t.variants?.find(t=>t.id===e))}getBookableAddons(){if(!this.addons)return[];return this.addons.filter(e=>e.bookableFromPlans?.includes(this.userPlan.name.toLocaleLowerCase())||!e.parentId&&!e.bookableFromPlans).filter(e=>"booked"!==e.bookingState)}getBookedAddons(){return this.addons?this.addons.filter(e=>"booked"===e.bookingState).filter(e=>!e.includedInPlans?.includes(this.userPlan.name.toLocaleLowerCase())):[]}getIncludedAddons(){return this.addons?this.addons.filter(e=>e.includedInPlans?.includes(this.userPlan.name.toLocaleLowerCase())):[]}getRelevantAddons(){return{booked:this.getBookedAddons(),bookable:this.getBookableAddons(),included:this.getIncludedAddons()}}}let WcAddAddons=class extends s$1{constructor(){super(...arguments),this.now=(new Date).toUTCString(),this.addonInfos=[{id:1,kbUrl:"https://www.printess.com/kb.html#formfields/table.html:tables",infoTemplate:e=>x`
        <div>
          <div>
            The runtime of the Database & Tables add-on depends on the runtime of your plan. <br>
            If you have a monthly plan, the add-on costs €${e.price?.perMonth?e.price?.perMonth/100:0}/month; if you have an annual plan, it costs €${e.price?.perYear?e.price?.perYear/100:0}/month. <br>
            The add-on is billed from the time of booking until the end of the plan term. It is automatically renewed if it is not cancelled. <br>
          </div>
        </div>
      `},{id:2,productUrl:"https://www.printess.com/solution/workflows.html",infoTemplate:e=>x`
        <div>
          <div>
            The runtime of the Workflow Automation add-on depends on the runtime of your plan. <br>
            If you have a monthly plan, the add-on costs €${e.price?.perMonth?e.price?.perMonth/100:0}/month; if you have an annual plan, it costs €${e.price?.perYear?e.price?.perYear/100:0}/month. <br>
            The add-on is billed from the time of booking until the end of the plan term. It is automatically renewed if it is not cancelled. <br>
          </div>
        </div>
      `},{id:3,name_rewrite:"AI Credits",kbUrl:"https://www.printess.com/kb.html#search:ai",infoTemplate:e=>x`
        <div>
          <div>
            AI functionality is offered based on AI order Credits which will be charged as follows in minimum a small package is mandatory to use AI functionalities.<br>
            Service is subject to availability within a region.<br><br>
            The term of the Al credits is synchronised with your booked Printess plan.<br>
            AI Credit upgrades take effect immediately. AI Credit downgrades and cancellations take effect at the end of the current plan month.
          </div>
          <h3>Available AI Credits</h3>
          <div>${Array.from(e.variants??[]).map(e=>x`${e[1]}<br>`)}</div>
          <h3>Credit Consumption:</h3>
          <div style="display: flex; gap: 4rem;">
            <div>
              Core Models: <br>
              Remove Background: 2 <br>
              Face Crop: 1 <br>
              Contour Generation: 1 <br>
              Face Swap: 2 <br>
              Upscale: 1 Credit per Megapixel
            </div>
            <div>
              Additional Models: <br>
              Image from Text (SDXL): 1 <br>
              Image from Text (Flux Schnell): 1 <br>
              Image from Text (Flux Pro): 2 <br>
              Image from Text (Flux Ultra): 4 <br>
              OpenAI Text Generation: 1 <br>
              Campaign generation: 4
            </div>
          </div>
          <br>
          <div>
            Availability and performance of additional AI models may change without notice.<br>
            Additional licensing terms imposed by AI model providers may apply. <br> <br>
          </div>
        </div>
      `,variantTemplate:e=>`${e.variant.name} €${e.variant.price.baseFee?e.variant.price.baseFee/100:0}/Month - ${e.variant.price.included?e.variant.price.included:0} Credits included, €${e.variant.price.overage?e.variant.price.overage/100:0} thereafter`},{id:7,name_rewrite:"Mockup Service",productUrl:"https://www.printess.com/solution/mockups-service.html",kbUrl:"https://www.printess.com/kb.html#api-reference/mockup-api.html:mockup-service",infoTemplate:e=>x`
        <div>
          <div>
            The Printess Mockup Service can be used for auto generation of shop product previews, personalized marketing and upsell images. <br>
            Image resolution is limited to 1 Megapixel. Use of the Mockup Service requires purchase of at least the Basic package. <br><br>
            The term of the Mockup Service is synchronised with your booked Printess plan. <br>
            Mockup Service upgrades take effect immediately. Mockup Service downgrades and cancellations take effect at the end of the current plan month. <br>
          </div>
          <h3>Available Mockup Service packages</h3>
          <div>${Array.from(e.variants??[]).map(e=>x`${e[1]}<br>`)}</div>
          <br>
        </div>
      `}],this.debug="localhost"===window.location.hostname||window.location.href.indexOf("debug=1")>0||!0===window.printessDebug}static get styles(){return[subscriptionStyles,i$4`
      dl.module-table {
        display: grid;
        grid-template-columns: auto 1fr;
      }

      dt, dd {
        background-color: var(--printess-lightgreen);
      }

      dt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
      }

      dd {
        padding-left: 10px;
        gap: 0.5rem;
        justify-content: flex-start;
      }

      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .plan-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      .module-price {
        font-weight: bold;
        color: var(--printess-pink);
      }

      .flex-box {
        display: flex;
        flex-wrap: nowrap;
        justify-content: start;
        align-items: center;
      }

      .check-icon {
        padding: 0px;
        width: 20px;
        height: 20px;
        fill: white;
        margin-right: 10px;
      }

      .module-description {
        margin-left: 1.25rem;
        font-size: 12px;
        line-height: 1.5rem;
      }

      .product-link {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
      }

      .product-link:hover {
        text-decoration: none;
        color: inherit;
      }

      .product-link:visited {
        color: inherit;
      }

      .product-link:focus {
        outline: 2px solid var(--printess-green);
        outline-offset: 2px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        // dl.module-table {
        //   grid-template-columns: 80px calc(50% - 80px) 100px;
        // }

        dd {
          grid-column: unset;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}connectedCallback(){super.connectedCallback(),this.addonStore=new AddonStore(this.debug,this.now)}applyLatestAddonEvents(){if(this.addons&&this.addonEvents){this.addonStore.flushStore();const e=(e=>e.filter(e=>!e.parentId).map(t=>{const o=e.filter(e=>e.parentId===t.id);return o.length>0?{...t,variants:o}:t}))(this.addons),t=new Map(this.addonInfos.map(e=>[e.id,e]));return this.addonStore.setAddons(e.map(e=>{const o=t.get(e.id),r={...e};if(o)if(o.name_rewrite&&(r.name=o.name_rewrite),(o.kbUrl||o.productUrl)&&(r.link=o.kbUrl??o.productUrl),o.cancelTemplate?r.cancelResult=o.cancelTemplate({name:r.name}):"fixed"!=r.price.type?r.cancelResult=x`${r.name} cancellations take effect at the end of the current plan month.`:r.cancelResult=x`${r.name} cancellations take effect at the end of your plan term.`,o.infoTemplate)if(e.variants){e.variants.sort((e,t)=>e.id-t.id);const t=o.variantTemplate,i=t?e.variants.map(e=>({[e.id.toString()]:t({variant:e})})):e.variants.map(e=>({[e.id.toString()]:`${e.name} €${e.price.baseFee?e.price.baseFee/100:0}/Month - ${e.price.included?e.price.included:0} Credits included, €${e.price.overage?e.price.overage/100:0} thereafter`}));r.variantResults=new Map(i.flatMap(e=>Object.entries(e))),r.templateResult=o.infoTemplate({variants:r.variantResults})}else"fixed"===e.price.type&&(r.templateResult=o.infoTemplate({price:e.price}));else r.templateResult=x`${r.description}`;else r.templateResult=x`${r.description}`;return"AI Credits"===r.name?r.usage=this.aiUsageSum:"Mockup Service"===r.name&&(r.usage=this.mockupUsageSum),r})),this.addonStore.setUserAddons(this.addonEvents),!0}return!1}async onClick(e){const t=e.target;if(e.stopPropagation(),e.preventDefault(),t.dataset.addonId&&t.dataset.addonAction){const e=parseInt(t.dataset.addonId),o=t.dataset.addonAction,r=this.addonStore.findAddon(e);if(r){let e;switch(o){case"book":case"change":e=new WcDialogBookAddon(r,this.bookedPlan,this.bookedPlanInfo,o);break;case"cancel":e=new WcDialogCancelAddon(r)}e&&e.showDialog(e=>{setTimeout(()=>{this.dispatchEvent(new ReloadEvent({reloads:["addonEvents"]}))},2500)})}}}willUpdate(e){(e.has("addons")||e.has("addonEvents"))&&this.applyLatestAddonEvents(),(e.has("bookedPlan")||e.has("bookedPlanInfo"))&&this.bookedPlan&&this.bookedPlanInfo&&(this.addonStore.now=this.now,this.addonStore.setUserPlan(this.bookedPlan,this.bookedPlanInfo))}handleForm(e){const{bookedPlan:t,contractPeriod:o,now:r,startDate:i,bookedTo:a}=e.detail;this.now=r,this.bookedPlan={...this.bookedPlan,name:t,contractPeriod:o},this.bookedPlanInfo={...this.bookedPlanInfo,startDate:i,bookedPlan:{...this.bookedPlanInfo.bookedPlan,bookedTo:a}},this.addonStore=new AddonStore(this.debug,this.now),this.applyLatestAddonEvents(),this.requestUpdate()}render(){const{booked:e,bookable:t,included:o}=this.addonStore.getRelevantAddons(),r="Small"!==this.bookedPlan.name&&this.bookedPlan&&!this.bookedPlan.isTrial;x`
    <wc-debug-plan-form
      @data-change=${this.handleForm}
      .bookedPlan=${this.bookedPlan.name}
      .contractPeriod=${this.bookedPlan.contractPeriod}
      .now=${this.now}
      .startDate=${this.bookedPlanInfo.startDate}
      .bookedTo=${this.bookedPlanInfo.bookedPlan.bookedTo}
    ></wc-debug-plan-form>
  `;const i=(e,t)=>e?.map(e=>x`
      <div class="card green" ${"bookable"===t?x`id="${e.bookableId}"`:""}>
        <div class="table-header">
          <h3 class="title">
            <a class="product-link" href="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Be.link%7D" target="_blank">
              <div class="plan-name">
                ${e.name} ${e.bookedAddon?e.bookedAddon.name:""}
                ${"bookable"!==t?x`
                 <wc-icon class="check-icon" primarycolor="toolbar"
                    icon="check-circle-solid" style="margin-left: 10px;"></wc-icon>`:""}
              </div>
            </a>
          </h3>
        </div>
        <div class="table-body">
          <dl class="module-table">
            ${"included"===t?x`
              <dt><div>Included:</div></dt>
              <dd>yes</dd>
            `:e.contractPeriod?x`
              <dt><div>Contract Period:</div></dt>
              <dd>
                ${e.contractPeriod[0].toLocaleDateString()} - ${e.contractPeriod[1].toLocaleDateString()}
                ${"bookable"===t?x`<span title="cancelled on ${e.cancelDate?.toISOString()}">(cancelled)</span>`:""}
              </dd>
            `:x`
              <dt><div>Active:</div></dt>
              <dd>no</dd>
            `}
            ${void 0!==e.usage&&e.bookedAddon?x`
              <dt><div>Credits:</div></dt>
              <dd>${e.usage} of ${e.bookedAddon?.price.included} used</dd>
            `:""}
          </dl>
          <div class="flex-box">
            ${"bookable"===t?x`
              <button class="settings green" data-addon-id="${e.id}"
                data-addon-action="proxy.php?url=https%3A%2F%2Faccount.printess.com%2Fbook" @click=${this.onClick}>
                ${e.contractPeriod?`Extend ${e.name}`:e.variants?`Add ${e.name}`:"Activate Addon"}
              </button>
            `:"booked"===t?x`
              ${e.bookedAddon?x`
                <button class="settings green" data-addon-id="${e.bookedAddon.id}"
                  data-addon-action="proxy.php?url=https%3A%2F%2Faccount.printess.com%2Fchange" @click=${this.onClick}>
                  Change ${e.name}
                </button>
              `:""}
              <button class="settings green" data-addon-id="${e.id}"
                data-addon-action="proxy.php?url=https%3A%2F%2Faccount.printess.com%2Fcancel" @click=${this.onClick}>
                Cancel ${e.name}
              </button>
            `:""}
          </div>
          <div class="module-description">${e.templateResult}</div>
        </div>
      </div>
    `);return r?x`
    ${i(t,"bookable")}
    ${i(e,"booked")}
    ${i(o,"included")}
  `:x``}};__decorate$1v([t$1()],WcAddAddons.prototype,"now",void 0),__decorate$1v([e$3({type:Object})],WcAddAddons.prototype,"bookedPlan",void 0),__decorate$1v([e$3({type:Object})],WcAddAddons.prototype,"bookedPlanInfo",void 0),__decorate$1v([e$3({type:Array})],WcAddAddons.prototype,"addons",void 0),__decorate$1v([e$3({type:Array})],WcAddAddons.prototype,"addonEvents",void 0),__decorate$1v([e$3({type:Number})],WcAddAddons.prototype,"aiUsageSum",void 0),__decorate$1v([e$3({type:Number})],WcAddAddons.prototype,"mockupUsageSum",void 0),__decorate$1v([e$3({type:Array})],WcAddAddons.prototype,"addonInfos",void 0),WcAddAddons=__decorate$1v([e$4("wc-add-addons")],WcAddAddons);var __decorate$1u=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const colors=["#a0cc00","#4c9ce2","#e35fbc","#a2256b","#825aba"];let WcDialogChoosePackage=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .plan-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 10px;
      }

      .plan-overview {
        display: flex;
        flex-direction: column;
      }

      .plan-header {
        border-radius: 4px;
        padding: 0px 5px 0px 10px;
        color: #fff;
        margin-top: 15px;
      }

      .white-title {
        font-family: var(--printess-header-font);
        color: #fff;
        font-size: 18px;
        line-height: 30px;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0px;
        text-indent: 0px;
        text-transform: none;
      }

      .plan-content {
        margin-bottom: 0px;
        font-family: var(--printess-text-font);
        font-size: 16px;
        line-height: 40px;
        text-align: center;
      }

      .bold-price {
        font-size: 18px;
        line-height: 30px;
        font-style: normal;
        font-weight: 700;
        padding-top: 15px;
        padding-bottom: 10px;
      }

      .slim {
        line-height: 20px;
      }

      button {
        border-radius: 4px;
        border: none;
        outline: none;
        padding: 0px 5px 0px 10px;
        color: #fff;
        margin-top: 15px;
        background-color: #555;
        cursor: pointer;
      }

      button:hover {
        background-color: #696969;
      }

      .hidden {
        display: none;
      }

      .side-note {
        font-size: 11px;
        font-family: var(--printess-text-font);
        padding: 10px 20px;
        margin-top: 20px;
        border-top: 3px solid var(--dialog-warning-red);
        border-bottom: 3px solid var(--dialog-warning-red);
        border-radius: 4px;
        line-height: 5px;
        text-align: center;
      }
    `]}constructor(e){super(),this.wrapperContent="planOptions",this.creditPackages=e}showOptions(e){this.callback=e}addPackage(e){this.callback&&this.callback(e)}render(){return x`
      <div class="plan-wrapper">
        <div class="plan-overview">
          <div class="plan-header" style="background-color: #55555526">
            <h1 class="white-title" style="color: #555">Order packages</h1>
          </div>
          <div class="plan-content">
            <!-- <div class="bold-price">Credits</div> -->
            <div class="bold-price">Price</div>
          </div>
        </div>
        ${this.creditPackages&&this.creditPackages.map((e,t)=>x`
          <div class="plan-overview">
            <div class="plan-header" style="background-color: ${colors[t]}">
              <h1 class="white-title">${e.credits.toLocaleString()}</h1>
            </div>
            <div class="plan-content">
              <!-- <div class="bold-price">${e.credits.toLocaleString()}</div> -->
              <div class="bold-price">€ ${(e.price/100).toLocaleString()}</div>
            </div>
            <button @click=${()=>this.addPackage(e)}>
              <h1 class="white-title slim">choose package</h1>
            </button>
          </div>
        `)}
      </div>

      <div class="side-note">
        <p>Order packages can be bought in any plan.</p>
        <p>They are valid for 1 year from the time of purchase.</p>
      </div>
    `}};__decorate$1u([e$3({type:String})],WcDialogChoosePackage.prototype,"wrapperContent",void 0),__decorate$1u([e$3({type:Array})],WcDialogChoosePackage.prototype,"creditPackages",void 0),WcDialogChoosePackage=__decorate$1u([e$4("wc-dialog-choose-package")],WcDialogChoosePackage);var __decorate$1t=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogPackagesOverview=class extends s$1{static get styles(){return i$4`
      .overview-wrapper {
        display: flex;
        flex-direction: column;
        padding: 30px 10px 0px;
      }

      .selection-overview {
        border-radius: 4px;
        border-top: 3px solid var(--printess-pink);
        border-bottom: 3px solid var(--printess-pink);
        padding: 10px;
        margin-bottom: 20px;
      }

      .flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
      }

      .flex-span {
        display: flex;
        flex-direction: row;
        align-items: center;
      }

      hr {
        border: none;
        border-bottom: 1px solid #ccc;
      }

      .amount-wrapper {
        border: 1px solid var(--printess-pink);
        border-radius: 7px;
      }

      .amount-button {
        background-color: var(--printess-pink);
        color: #fff;
        border: none;
        outline: none;
        cursor: pointer;
        margin: 0 10px;
        padding: 7px 10px;
        width: 30px;
      }

      .minus {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        margin-left: 0;
      }

      .plus {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        margin-right: 0;
      }

      .address-payment-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
      }

      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-family: var(--printess-header-font);
      }

      .edit {
        padding: 5px 10px;
        border: none;
        outline: none;
        background-color: var(--printess-pink);
        font-family: var(--printess-text-font);
        border-radius: 4px;
        color: #fff;
        margin-left: 5px;
        cursor: pointer;
      }

      .spinner, .spinner:after {
        border-radius: 50%;
        width: 5em;
        height: 5em;
        margin-top: 20px;
      }
      .spinner {
        font-size: 15px;
        position: relative;
        border-top: 0.5em solid rgba(230,0,126, 0.2);
        border-right: 0.5em solid rgba(230,0,126, 0.2);
        border-bottom: 0.5em solid rgba(230,0,126, 0.2);
        border-left: 0.5em solid #e6007e;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .back, .continue {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 16px;
        min-width: 100px;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }

      wc-icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
        margin: 0 10px;
      }

      .coupon-input {
        padding: 5px 7px;
        font-size: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-family: var(--printess-text-font);
      }

      .terms-and-policy {
        width: 100%;
        text-align: center;
        font-size: 12px;
        margin-top: 30px;
      }

      .disabled {
        background-color: var(--dialog-disabled-pink);
        cursor: not-allowed;
      }
    `}constructor(e,t){super(),this.amount=1,this.selectedPackage=e,this.profile=t}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async bookOrderPackage(){const e={packages:[{packageId:this.selectedPackage.id,amount:this.amount}]},t=await api.bookCreditPackages(e);t instanceof ServerErrorResponse$2?this.showError(t):this.renderPurchaseConfirmation()}showOverview(e){this.callback=e}editPlan(){this.callback&&this.callback("planOptions",0,0)}incrementAmount(){this.amount++}decrementAmount(){1!==this.amount&&this.amount--}editPayment(){}setCouponValue(e){this.coupon=e.target.value}backToAddress(){this.callback&&this.callback("updateAddress",0,0)}renderPurchaseConfirmation(){this.callback&&this.callback("purchaseConfirmation",this.selectedPackage.price*this.amount/100,this.amount)}render(){return x`
      <div class="overview-wrapper">
        <div class="selection-overview">
          <p class="flex">
            <span class="flex-span">
              <wc-icon @click=${this.editPlan} primaryColor="gray" icon="edit" style="margin-left: 0px;"></wc-icon>
              Selected package: ${this.selectedPackage.credits.toLocaleString()} credits
            </span>
            <span class="amount-wrapper">
              <button @click=${this.decrementAmount} class="amount-button minus ${1===this.amount?"disabled":""}">-</button>
              ${this.amount}
              <button @click=${this.incrementAmount} class="amount-button plus">+</button>
            </span>
            <span>€ ${(this.selectedPackage.price/100).toLocaleString()} x ${this.amount}</span>
          </p>

          <hr>

          <p class="flex" style="font-weight: bold;">
            Total Price (excl. taxes):
            <span>€ ${(this.selectedPackage.price*this.amount/100).toLocaleString()}</span>
          </p>
        </div>

        ${this.profile?x`
          <div class="address-payment-wrapper">
            <div class="address">
              <h3 class="title">Billing Address <wc-icon primaryColor="gray" icon="edit" @click=${this.backToAddress}></wc-icon></h3>
              <p>
                ${this.profile.company?x`${this.profile.company}<br><br>`:""}
                ${this.profile.firstName} ${this.profile.lastName}<br>
                ${this.profile.addressOne}<br>
                ${this.profile.addressTwo?x`${this.profile.addressTwo}<br>`:""}
                ${this.profile.postalCode} ${this.profile.city}<br><br>
                ${this.profile.state?x`${this.profile.state}, `:""}
                ${this.profile.country}
              </p>
            </div>

            <div class="payment">
              <h3 class="title">Payment Method <wc-icon primaryColor="lightgray" icon="edit" @click=${this.editPayment}></wc-icon></h3>
              <p>
                Full name: ${this.profile.firstName} ${this.profile.lastName}<br><br>
                VAT No.: ${this.profile.vat}<br><br>
                Payment: A bill will be send to you.
              </p>
            </div>

            <div class="coupon">
              <h3 class="title">Coupon:</h3>
              <input @input=${e=>this.setCouponValue(e)} type="text" name="coupon" placeholder="Enter Code" class="coupon-input" value=${this.coupon}>
              <button @click=${()=>this.coupon&&alert("Entered coupon is invalid!")} class="edit ${this.coupon?"":"disabled"}">Submit</button>
            </div>
          </div>

        `:x`<div class="spinner"></div>`}

        <div class="button-wrapper">
          <button class="back" @click=${this.backToAddress}>back</button>
          <button class="continue" @click=${this.bookOrderPackage}>buy now</button>
        </div>
        <p class="terms-and-policy">By clicking Buy Now, you agree to our
          <a href="proxy.php?url=https%3A%2F%2Fprintess.com%2Flegal%2FEN_Printess_AGB_20210401.html" target="_blank">Terms of Use</a> and
          <a href="proxy.php?url=https%3A%2F%2Fprintess.com%2Flegal%2FEN_PrivacyPolicy_20210401.html" target="_blank">Privacy Policy</a>.</p>
      </div>
    `}};__decorate$1t([e$3({type:Object})],WcDialogPackagesOverview.prototype,"profile",void 0),__decorate$1t([e$3({type:Object})],WcDialogPackagesOverview.prototype,"selectedPackage",void 0),__decorate$1t([e$3({type:Number})],WcDialogPackagesOverview.prototype,"amount",void 0),__decorate$1t([e$3({type:String})],WcDialogPackagesOverview.prototype,"coupon",void 0),WcDialogPackagesOverview=__decorate$1t([e$4("wc-dialog-packages-overview")],WcDialogPackagesOverview);var __decorate$1s=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogAddPackage=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal-wrapper {
        width: 95vmin;
        min-height: auto;
      }

      .modal-content {
        padding-bottom: 35px;
      }

      .dot {
        height: 15px;
        width: 15px;
        margin: 5px 10px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }

      .active, .dot:hover {
        background-color: #717171;
      }
    `]}constructor(e){super(),this.wrapperContent="planOptions",this.packagePrice=0,this.amount=1,this.backdrop=new WcBackdrop,this.creditPackages=e}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this),this.callback&&"purchaseConfirmation"===this.wrapperContent&&this.callback(this.selectedPackage,this.amount)}getPackageOptions(){switch(this.wrapperContent){case"planOptions":{const e=new WcDialogChoosePackage(this.creditPackages);return e.showOptions(e=>{this.selectedPackage=e,this.wrapperContent="updateAddress"}),e}case"updateAddress":{const e=new WcDialogUpdateAddress;return e.showAddress((e,t)=>{this.wrapperContent=e,this.profile=t}),e}case"finalOverview":{const e=new WcDialogPackagesOverview(this.selectedPackage,this.profile);return e.showOverview((e,t,o)=>{this.wrapperContent=e,this.packagePrice=t,this.amount=o}),e}case"purchaseConfirmation":{const e=new WcDialogPurchaseConfirmation("packages",this.packagePrice,this.selectedPackage,this.amount);return e.showCongratulation(e=>{e&&this.closeDialog()}),e}default:assertNever$1(this.wrapperContent)}}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Add Order Package</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            ${this.getPackageOptions()}
          </div>
        </div>
      </div>
    `}};__decorate$1s([e$3({type:String})],WcDialogAddPackage.prototype,"wrapperContent",void 0),__decorate$1s([e$3({type:Object})],WcDialogAddPackage.prototype,"selectedPackage",void 0),__decorate$1s([e$3({type:Array})],WcDialogAddPackage.prototype,"creditPackages",void 0),__decorate$1s([e$3({type:Object})],WcDialogAddPackage.prototype,"profile",void 0),__decorate$1s([e$3({type:Number})],WcDialogAddPackage.prototype,"packagePrice",void 0),__decorate$1s([e$3({type:Number})],WcDialogAddPackage.prototype,"amount",void 0),WcDialogAddPackage=__decorate$1s([e$4("wc-dialog-add-package")],WcDialogAddPackage);var __decorate$1r=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcOrderPackages=class extends s$1{constructor(){super(...arguments),this.creditPackages=[],this.userCreditPackages=[],this.packageCreditsUsed=0}static get styles(){return[subscriptionStyles,i$4`
      @media (max-width: ${config.mobileDeviceWidth}px) {
        dl.order-package-table {
          grid-template-columns: 80px calc(50% - 80px) 80px calc(50% - 80px);
        }

        dd {
          grid-column: unset;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserPackages(){const e=await api.loadPackagesHistory();e instanceof ServerErrorResponse$2?this.showError(e):this.userCreditPackages=e.packagesHistory}async loadAvailablePackages(){const e=await api.loadPackages();e instanceof ServerErrorResponse$2?this.showError(e):this.creditPackages=e.packages}async loadPaymentCalculation(){const e=await api.loadUpcomingPaymentInfo();if(e instanceof ServerErrorResponse$2)this.showError(e);else{const t=(new Date).getTime();this.upcomingPayments=e.periods.filter(e=>new Date(e.startDate).getTime()<t&&new Date(e.endDate).getTime()>t)[0],this.packageCreditsUsed=this.upcomingPayments&&this.upcomingPayments.thereofPackageCredits}}connectedCallback(){super.connectedCallback(),this.loadUserPackages(),this.loadAvailablePackages(),this.loadPaymentCalculation()}addPackage(){const e=new WcDialogAddPackage(this.creditPackages),t=new Date;t.setFullYear(t.getFullYear()+1),e.showDialog((e,o)=>{const r={id:e.id,userId:"",creditPackageId:e.id,amount:o,bookedOn:new Date,bookedTo:t,paidOn:new Date,paymentReference:""};this.userCreditPackages=[...this.userCreditPackages,r]})}getUsedCreditValue(e=0){const t=this.creditPackages.filter(t=>t.id===this.userCreditPackages[e].creditPackageId)[0].credits*this.userCreditPackages[e].amount,o=this.packageCreditsUsed;return o>t?(this.packageCreditsUsed-=t,t):o}render(){return x`
      ${this.userCreditPackages&&this.userCreditPackages.filter(e=>new Date(e.bookedTo)>=new Date).length>0?x`
        <div class="card blue">
          <div class="table-header">
            <h3 class="title">Order Packages</h3>
          </div>
          <div class="table-body">
            <dl class="order-package-table">
              ${this.userCreditPackages.filter(e=>new Date(e.bookedTo)>=new Date).map((e,t)=>x`
                <dt class=${t%2==1?"odd-row-blue":"even-row-white"}>Credits:</dt>
                <dd class=${t%2==1?"odd-row-blue":"even-row-white"}>
                  ${this.packageCreditsUsed>0?x`${this.getUsedCreditValue(t)} of `:""}
                  ${this.creditPackages&&(this.creditPackages.filter(t=>t.id===e.creditPackageId)[0]?.credits*e.amount).toLocaleString()}
                  ${this.packageCreditsUsed>0?"used":""}
                </dd>
                <dt class=${t%2==1?"odd-row-blue":"even-row-white"}>Expire:</dt>
                <dd class=${t%2==1?"odd-row-blue":"even-row-white"}>${new Date(e.bookedTo).toLocaleDateString()}</dd>
              `)}
            </dl>
            <!-- <button @click=${this.addPackage} class="settings">Add Package</button> -->
          </div>
        </div>
      `:""}
    `}};__decorate$1r([e$3({type:Array})],WcOrderPackages.prototype,"creditPackages",void 0),__decorate$1r([e$3({type:Array})],WcOrderPackages.prototype,"userCreditPackages",void 0),__decorate$1r([e$3({type:Object})],WcOrderPackages.prototype,"upcomingPayments",void 0),__decorate$1r([e$3({type:Number})],WcOrderPackages.prototype,"packageCreditsUsed",void 0),WcOrderPackages=__decorate$1r([e$4("wc-order-packages")],WcOrderPackages);var __decorate$1q=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPaymentDetails=class extends s$1{constructor(){super(...arguments),this.paymethod="billing"}static get styles(){return[subscriptionStyles,i$4`
      .card-input {
        background-color: #fff0f2;
      }

      dl {
        grid-template-columns: 160px calc(100% - 160px);
      }

      button.settings.red {
        border: none;
      }

      button.settings.red:hover {
        background-color: var(--printess-redHover);
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        dl {
          grid-template-columns: 130px calc(100% - 130px);
        }

        dd {
          grid-column: unset;
        }

        .card-input {
          font-size: 12px;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserProfile(){const e=await api.loadProfile();e instanceof ServerErrorResponse$2?this.showError(e):(this.address=`${e.addressOne??""}, ${e.addressTwo??""}${e.addressTwo?", ":""}${e.postalCode??""} ${e.city??""}, ${e.state??""}, ${e.country??""}`,e.firstName&&e.lastName&&(this.fullName=`${e.firstName} ${e.lastName}`))}connectedCallback(){super.connectedCallback(),this.loadUserProfile()}adjustMonthPattern(e){const t=e.target.value;t.match(/[0-9]/)||(e.target.value=""),parseInt(t)>12&&(e.target.value="")}adjustYearPattern(e){e.target.value.match(/[0-9]/)||(e.target.value="")}setMonth(e){const t=e.target.value;1===t.length&&parseInt(t)<10&&parseInt(t)>0?(e.target.value=`0${t}`,this.month=`0${t}`):this.month=t}setYear(e){this.year=e.target.value}currentMonthValue(){return this.month?this.month:""}currentYearValue(){return this.year?this.year:""}updatePayment(){const e=new Date,t=parseInt(e.getFullYear().toString().substr(2,2),10),o=e.getMonth()+1;(parseInt(this.year)<t&&parseInt(this.month)<=o||parseInt(this.year)<t)&&alert("credit card must be valid!")}changePaymentMethod(e){const t=e.target.value;this.paymethod=t}render(){return x`
      <div class="card red">
        <div class="table-header">
          <h3 class="title">Payment Details</h3>
        </div>
        <div class="table-body">
          <dl>
            <dt>Payment Method:</dt>
            <dd>
              <select class="card-input" @change=${e=>this.changePaymentMethod(e)}>
                <option value="billing">Billing</option>
                <option value="credit-card"><wc-icon primaryColor="gray" icon="credit-card"></wc-icon>Credit Card</option>
                <option value="paypal">Paypal</option>
              </select>
            </dd>
            <dt>Full Name:</dt>
            <dd><input class="card-input" type="text" name="fullName" value=${this.fullName} placeholder="full name"></dd>
            
            ${"credit-card"===this.paymethod?x`
            <dt>Card Number:</dt>
            <dd class="card-number">
              <div class="card-icon-input">
                <input class="card-input left" type="text" name="cardNumber" value="" placeholder="card number">
                <wc-icon primaryColor="gray" icon="credit-card"></wc-icon>
              </div>
              <div class="card-date">
                <input @change=${e=>this.setMonth(e)} @input=${e=>this.adjustMonthPattern(e)} class="card-input middle" type="text" name="dateMM" value=${this.currentMonthValue()} maxlength="2" placeholder="MM" style="padding-right: 0px; text-align: right;">
                <input class="card-input middle" type="text" value="/" readonly style="padding: 0px; text-align: center; max-width: 10px;">
                <input @change=${e=>this.setYear(e)} @input=${e=>this.adjustYearPattern(e)} class="card-input middle" type="text" name="dateYY" value=${this.currentYearValue()} maxlength="2" placeholder=YY style="padding-left: 0px;">
              </div>
              <input class="card-input right" type="password" name="cvc" value="" placeholder="CVC">
            </dd>`:""}

            ${"paypal"===this.paymethod?x`
              <dt>E-Mail:</dt>
              <dd><input class="card-input" type="text" name="fullName" value="" placeholder="e-mail"></dd>
            `:""}
            
            <dt>Billing Address:</dt>
            <dd><input type="text" class="card-input" value=${this.address} placeholder="billing address" readonly></dd>
            <!-- <dd>
              <select class="card-input" value=${this.address} placeholder="same as contact">
                <option value="contact">${this.address}</option>
                <option value="billing-address">add billing address</option>
              </select>
            </dd> -->
          </dl>
        <button @click=${this.updatePayment} class="settings red">Update Payment Details</button>
        </div>
      </div>
    `}};__decorate$1q([e$3({type:String})],WcPaymentDetails.prototype,"month",void 0),__decorate$1q([e$3({type:String})],WcPaymentDetails.prototype,"year",void 0),__decorate$1q([e$3({type:String})],WcPaymentDetails.prototype,"fullName",void 0),__decorate$1q([e$3({type:String})],WcPaymentDetails.prototype,"address",void 0),__decorate$1q([e$3({type:String})],WcPaymentDetails.prototype,"paymethod",void 0),WcPaymentDetails=__decorate$1q([e$4("wc-payment-details")],WcPaymentDetails);var __decorate$1p=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcRedeemReferralCode=class extends s$1{constructor(){super(...arguments),this.saving=!1}static get styles(){return[userProfileStyles,settingsStyles,i$4`
      .card {
        background: transparent;
        margin-bottom: 70px;
        border-bottom: 2px solid var(--printess-red);
      }

      .table-body {
        display: flex;
        padding: 10px;
      }

      .card-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        background-color: rgba(210, 0, 100, 0.04);
        padding: 7px 10px;
        border-radius: 4px;
      }
      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      button.settings.red {
        display: flex;
        margin: 0 0 0 10px;
        width: 124px;
        justify-content: center;
        align-items: center;
      }

      button.settings.red:hover {
        background-color: var(--printess-redHover);
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card-input {
          font-size: 12px;
          padding: 5px 7px;
        }

        .card.pink {
          margin-bottom: 50px;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async readUserSettings(e){const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):t.redeemReferralCode&&(this.referralCode=JSON.parse(t.redeemReferralCode))}connectedCallback(){super.connectedCallback(),this.readUserSettings({keys:["redeemReferralCode"]})}saveUrl(){this.saving=!0,window.setTimeout(()=>{if(!this.referralCode)return void(this.saving=!1);const e=JSON.stringify(this.referralCode);console.log(e),this.saving=!1},2e3)}setReferralCode(e){const t=e.target.value;this.referralCode=t?{code:t}:void 0}render(){return x`
      <h3 class="topic">Redeem Referral Code</h3>
      <!-- <p style="font-size: 14px;">
        Here could go some info text ...
      </p> -->

      <div class="card red">
        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>Referral Code</div>
          </h3>
        </div>
        <div class="table-body" style="display: flex">
          <input
            class="card-input"
            type="text"
            placeholder="Enter your referral code here ..."
            value=${this.referralCode?.code||""}
            @change=${e=>this.setReferralCode(e)}
          >
          <button class="settings red" @click=${this.saveUrl}>
            ${this.saving?x`<div class="spinner"></div><span>Redeeming</span>`:x`<span>Redeem</span>`}
          </button>
        </div>
      </div>
    `}};__decorate$1p([e$3({type:Boolean})],WcRedeemReferralCode.prototype,"saving",void 0),__decorate$1p([e$3({type:Object})],WcRedeemReferralCode.prototype,"referralCode",void 0),WcRedeemReferralCode=__decorate$1p([e$4("wc-redeem-referral-code")],WcRedeemReferralCode);var __decorate$1o=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDebugPlanForm=class extends s$1{constructor(){super(),this.bookedPlan="Small",this.contractPeriod="monthly",this.now="2025-08-11T11:56:30.513137Z",this.startDate="2025-07-25T11:56:30.513137Z",this.bookedTo="2025-08-25T11:56:30.513137Z"}dispatchDataChange(){const e=new CustomEvent("data-change",{detail:{bookedPlan:this.bookedPlan,contractPeriod:this.contractPeriod,now:this.now,startDate:this.startDate,bookedTo:this.bookedTo},bubbles:!0,composed:!0});this.dispatchEvent(e)}formatDateForInput(e){if(!e)return"";return new Date(e).toISOString().slice(0,16)}handleBookedPlanChange(e){const t=e.target;this.bookedPlan=t.value,this.dispatchDataChange()}handleContractPeriodChange(e){const t=e.target;if(this.contractPeriod=t.value,"monthly"===this.contractPeriod){const e=new Date(this.startDate),t=new Date(e.getFullYear(),e.getMonth()+1,e.getDate());e.getDate()!==t.getDate()&&t.setDate(0),this.bookedTo=t.toISOString()}console.log(t.value),this.dispatchDataChange()}handleGNowChange(e){const t=e.target;this.now=new Date(t.value).toISOString(),this.dispatchDataChange()}handleStartDateChange(e){const t=e.target;this.startDate=new Date(t.value).toISOString(),this.dispatchDataChange()}handleBookedToChange(e){const t=e.target;this.bookedTo=new Date(t.value).toISOString(),this.dispatchDataChange()}handleButtons(e){const t=e.target,o="+"===t.value?1:"-"===t.value?-1:0,r=t.dataset.type;console.log(o,r);const i=["now","startDate","bookedTo"];for(let e=0;e<i.length;e++){const t=i[e];if(2===e&&"yearly"===this.contractPeriod&&"month"===r)continue;const a=new Date(this[t]),s=new Date(a.getFullYear()+("year"===r?o:0),a.getMonth()+("month"===r?o:0),a.getDate()+(2===e?0:"day"===r?o:0),a.getHours(),a.getMinutes());"month"===r&&a.getDate()!==s.getDate()&&s.setDate(a.getDate()),this[t]=s.toISOString()}this.dispatchDataChange()}render(){return x`
      <div class="form-line">
        <div>
          <div>
            <label>bookedPlan:</label>
            <select .value=${this.bookedPlan} @change=${this.handleBookedPlanChange}>
              <option value="Small">Small</option>
              <option value="Medium">Medium</option>
              <option value="Large">Large</option>
            </select>
          </div>
          <div>
            <label>contractPeriod:</label>
            <select .value=${this.contractPeriod} @change=${this.handleContractPeriodChange}>
              <option value="monthly">Monthly</option>
              <option value="yearly">Yearly</option>
            </select>
          </div>
          <div>
            <button @click=${()=>this.dispatchEvent(new ReloadEvent({reloads:["addonEvents"]}))}>Reload</button>
          </div>
        </div>
        <div>
          <div>
            <label>now:</label>
            <input type="datetime-local" .value=${this.formatDateForInput(this.now)} @input=${this.handleGNowChange}>
          </div>
          <div>
            <label>startDate:</label>
            <input type="datetime-local" .value=${this.formatDateForInput(this.startDate)} @input=${this.handleStartDateChange}>
          </div>
          <div>
            <label>bookedTo:</label>
            <input type="datetime-local" .value=${this.formatDateForInput(this.bookedTo)} @input=${this.handleBookedToChange}>
            <br>
          </div>
        </div>
        <div>
          <div>
            <button value="-" data-type="day" @click=${this.handleButtons}>sub Day</button>
            <button value="+" data-type="day" @click=${this.handleButtons}>add Day</button>
          </div>
          <div>
            <button value="-" data-type="month" @click=${this.handleButtons}>sub Month</button>
            <button value="+" data-type="month" @click=${this.handleButtons}>add Month</button>
          </div>
          <div>
            <button value="-" data-type="year" @click=${this.handleButtons}>sub Year</button>
            <button value="+" data-type="year" @click=${this.handleButtons}>add Year</button>
          </div>
        </div>
      </div>
    `}};WcDebugPlanForm.styles=i$4`
    :host {
      display: block;
      font-family: Arial, sans-serif;
      padding: 10px;
    }

    .form-line {
      display: flex;
      flex-flow: column;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .form-line div {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .form-line label {
      font-weight: bold;
      white-space: nowrap;
    }

    .form-line input,
    .form-line select {
      padding: 4px 8px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }

    .form-line button {
      padding: 4px 12px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    .status-active { color: #28a745; font-weight: bold; }
    .status-expired { color: #dc3545; font-weight: bold; }
    .status-pending { color: #ffc107; font-weight: bold; }

    pre {
      background: #f4f4f4;
      padding: 8px;
      border-radius: 3px;
      font-size: 12px;
      margin: 10px 0;
    }
  `,__decorate$1o([e$3({type:String})],WcDebugPlanForm.prototype,"bookedPlan",void 0),__decorate$1o([e$3({type:String})],WcDebugPlanForm.prototype,"contractPeriod",void 0),__decorate$1o([e$3({type:String})],WcDebugPlanForm.prototype,"now",void 0),__decorate$1o([e$3({type:String})],WcDebugPlanForm.prototype,"startDate",void 0),__decorate$1o([e$3({type:String})],WcDebugPlanForm.prototype,"bookedTo",void 0),WcDebugPlanForm=__decorate$1o([e$4("wc-debug-plan-form")],WcDebugPlanForm);var __decorate$1n=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcSubscriptionPage=class extends s$1{constructor(){super(...arguments),this.shownBookedPlan=0,this.currentSeats=0,this.usedSeats=0,this.currentCredits=0,this.nextPlanOverageCredits=0,this.loaded=!1,this.debug="localhost"===window.location.hostname||window.location.href.indexOf("debug=1")>0||!0===window.printessDebug}static get styles(){return[subscriptionStyles,i$4`
      .spinner-box {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 70vh;
      }
      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      .spinner.big {
        font-size: 26px;
        border-color: rgb(160 204 0 / 30%) rgb(160 204 0 / 30%) rgb(160 204 0 / 30%) rgb(160 204 0);
        margin: 0 10px 1px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      `]}connectedCallback(){super.connectedCallback(),location.hash="#subscription",this.addEventListener("reload-triggered",this.handleReload),Promise.all([this.makeReload(["all"])]).then(()=>this.loaded=!0)}async makeReload(e){this.loaded=!1,1===e.length&&"all"===e[0]&&(e=["userInfo","storageInfo","paymentCalculation","planInfo","mockupInfo","seatsCount","addons","addonEvents","teamMembers","whiteListMembers"]);for(const t of e)switch(t){case"userInfo":await this.loadUserInfo();break;case"storageInfo":await this.loadStorageInfo();break;case"paymentCalculation":await this.loadPaymentCalculation();break;case"planInfo":await this.loadPlanInfo();break;case"seatsCount":await this.loadSeatsCount();break;case"addons":await this.loadAddons();break;case"addonEvents":await this.loadAddonEvents();break;case"teamMembers":await this.loadTeamMembers();break;case"whiteListMembers":await this.loadWhitelistMembers()}this.loaded=!0}async handleReload(e){const t=e.detail.reloads;e.detail.delay?(this.loaded=!1,setTimeout(async()=>await this.makeReload(t),e.detail.delay)):await this.makeReload(t)}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async handleApiCall(e,t,o,r){const i=await e();if(i instanceof ServerErrorResponse$2){(o||this.showError.bind(this))(i)}else t(i),r&&console.log(r,i)}async loadAddons(){await this.handleApiCall(()=>api.loadAddons(),e=>{this.addons=e})}async loadAddonEvents(){await this.handleApiCall(()=>api.loadAddonEvents(),e=>{this.addonEvents=e})}async loadSeatsCount(){await this.handleApiCall(()=>api.loadSeatsCount(),e=>{this.currentSeats=e})}async loadPlanInfo(){await this.handleApiCall(()=>api.loadPlans(),e=>{this.plans=e.plans})}async loadStorageInfo(){await this.handleApiCall(()=>api.loadUsedStorage(),e=>{this.storage=e})}async loadUserInfo(){await this.handleApiCall(()=>api.loadUserBookedInfo(),e=>{this.bookedInfo=e,this.plan=e.bookedPlan,this.nextBookedPlan=e.nextBookedPlan,this.nextBookedPlanInfo=e.nextBookedPlanInfo})}async loadPaymentCalculation(){const e=await api.loadUpcomingPaymentInfo();if(e instanceof ServerErrorResponse$2)this.showError(e);else{const t=(new Date).getTime();if(this.bookedPlan=e.periods.filter(e=>new Date(e.startDate).getTime()<t&&new Date(e.endDate).getTime()>=t)[0],this.aiUsage=this.bookedPlan.aiUsage,this.aiUsage){const e=this.aiUsage;this.aiUsageSum=AiCreditInfos.map(t=>Math.ceil(t.m*(e[t.k]??0))).reduce((e,t)=>e+t)}this.pastPlans=e.periods,this.pastPlans.sort((e,t)=>new Date(t.startDate).getTime()-new Date(e.startDate).getTime()),this.pastPlans=this.pastPlans.slice(1),this.firstPlan=this.pastPlans.slice(-1)[0],this.nextPlanOverageCredits=this.bookedPlan.thereofOverageCredits??0;for(let t=e.periods.length-1;t>=0;t--){if(e.periods[t].isFullPaymentPeriod)return;this.currentCredits+=e.periods[t].usedCredits}}}async loadTeamMembers(){const e=await api.loadPinnedUsers();e instanceof ServerErrorResponse$2?this.showError(e):this.usedSeats+=e.length}async loadWhitelistMembers(){const e=await api.loadWhitelist();e instanceof ServerErrorResponse$2?this.showError(e):this.usedSeats+=e.length}render(){return this.loaded?(window.scrollTo({top:0,behavior:"smooth"}),x`
      <div class="subscription-page">
        <h3 class="topic">Subscription</h3>
        <wc-plan-overview
          .plan=${this.plan}
          .plans=${this.plans}
          .storage=${this.storage}
          .currentSeats=${this.currentSeats}
          .usedSeats=${this.usedSeats}
          .bookedPlan=${this.bookedPlan}
          .aiUsage=${this.aiUsage}
          .pastPlans=${this.pastPlans}
          .firstPlan=${this.firstPlan}
          .nextPlanOverageCredits=${this.nextPlanOverageCredits}
          .currentCredits=${this.currentCredits}
        ></wc-plan-overview>
        ${this.bookedInfo&&this.plan&&"Small"!==this.plan.name?x`
          <wc-extra-seats
          .additionalSeats=${this.bookedInfo.bookedSeats}
          .includedSeats=${this.bookedInfo.bookedPlan.includedSeats}
          .usedSeats=${this.usedSeats}
          .bookedPlan=${this.plan}
          ></wc-extra-seats>
        `:""}
        ${this.debug?x`
          <wc-add-addons
            .addons=${this.addons}
            .addonEvents=${this.addonEvents}
            .bookedPlan=${this.plan}
            .bookedPlanInfo=${this.bookedPlan}
            .aiUsageSum=${this.aiUsageSum}
          ></wc-add-addons>
          `:""}
        <!-- <wc-order-packages></wc-order-packages> -->
        <!-- ${this.debug?x`<wc-payment-details></wc-payment-details>`:""} -->
        <!-- ${this.debug?x`<wc-redeem-referral-code></wc-redeem-referral-code>`:""} -->
      </div>
    `):x`
      <div class="subscription-page">
        <h3 class="topic">Subscription</h3>
        <div class="spinner-box">
          <div class="spinner big"></div>
        </div>
      </div>`}};__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"bookedInfo",void 0),__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"plan",void 0),__decorate$1n([e$3({type:Array})],WcSubscriptionPage.prototype,"plans",void 0),__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"storage",void 0),__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"bookedPlan",void 0),__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"aiUsage",void 0),__decorate$1n([e$3({type:Number})],WcSubscriptionPage.prototype,"aiUsageSum",void 0),__decorate$1n([e$3({type:Array})],WcSubscriptionPage.prototype,"pastPlans",void 0),__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"firstPlan",void 0),__decorate$1n([e$3({type:Number})],WcSubscriptionPage.prototype,"shownBookedPlan",void 0),__decorate$1n([e$3({type:Number})],WcSubscriptionPage.prototype,"currentSeats",void 0),__decorate$1n([e$3({type:Number})],WcSubscriptionPage.prototype,"usedSeats",void 0),__decorate$1n([e$3({type:Number})],WcSubscriptionPage.prototype,"currentCredits",void 0),__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"nextPlan",void 0),__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"nextBookedPlan",void 0),__decorate$1n([e$3({type:Object})],WcSubscriptionPage.prototype,"nextBookedPlanInfo",void 0),__decorate$1n([e$3({type:Number})],WcSubscriptionPage.prototype,"nextPlanOverageCredits",void 0),__decorate$1n([e$3({type:Array})],WcSubscriptionPage.prototype,"addons",void 0),__decorate$1n([e$3({type:Array})],WcSubscriptionPage.prototype,"addonEvents",void 0),__decorate$1n([e$3({type:Boolean})],WcSubscriptionPage.prototype,"loaded",void 0),WcSubscriptionPage=__decorate$1n([e$4("wc-subscription-page")],WcSubscriptionPage);const invoicesStyles=i$4`
  .invoices-page {
    font-family: var(--printess-text-font);
    font-size: 14px;
    font-weight: 400;
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }
  }
`;var __decorate$1m=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcInvoicesPage=class extends s$1{static get styles(){return[invoicesStyles,tableStyles$1,i$4`
      .topic {
        margin-bottom: 32px;
      }

      .table-wrapper {
        border-bottom: 1px solid #4c9ce2;
      }

      tr:nth-child(odd){
        background-color: rgba(76, 156, 226, 0.1);
      }

      th {
        background-color: #4c9ce2;
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async getInvoices(){const e=await api.loadInvoices();e instanceof ServerErrorResponse$2?this.showError(e):this.data=e}constructor(){super(),this.data={invoices:[{id:0,userId:"",paymentReference:"",createdOn:new Date("2021-07-21T19:15:00.496Z"),url:""},{id:1,userId:"",paymentReference:"",createdOn:new Date,url:""},{id:2,userId:"",paymentReference:"",createdOn:new Date,url:""}]}}connectedCallback(){super.connectedCallback(),location.hash="#invoices"}render(){return x`
      <div class="invoices-page">
        <h3 class="topic">Invoices</h3>
        <div class="table-wrapper">
          <table class="layout display responsive-table">
            <thead>
              <tr>
                <th>Id</th>
                <th>Date</th>
                <th>Payment Reference</th>
                <th>Pdf</th>
              </tr>
            </thead>
            <tbody>
              ${this.data&&c(this.data.invoices,e=>e.id,e=>x`
                <tr>
                  <td>${e.id}</td>
                  <td>
                    ${e.createdOn.toLocaleDateString()}
                  </td>
                  <td>${e.paymentReference}</td>
                  <td>
                    <a href=${e.url} style="display: inline-block" target="_blank">
                      <wc-icon primaryColor="table-blue" icon="page-inverse" style="margin-right: 10px;"></wc-icon>
                    </a>
                  </td>
                </tr>
              `)}
              </tbody>
          </table>
        </div>
      </div>
    `}};__decorate$1m([e$3({type:Object})],WcInvoicesPage.prototype,"data",void 0),WcInvoicesPage=__decorate$1m([e$4("wc-invoices-page")],WcInvoicesPage);var __decorate$1l=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcOffensiveWords=class extends s$1{constructor(){super(...arguments),this.updating=!1,this.offensiveWords=""}static get styles(){return[settingsStyles,i$4`
      pre {
        background-color: #f0f0f0;
        padding: 10px 15px;
        margin: 10px 0;
      }

      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      .settings {
        margin: 20px 10px 70px 0;
      }

      button.settings.green {
        display: flex;
      }
      button.settings.green:hover {
        background-color: var(--printess-greenHover);
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .jsonTitle {
          font-size: 14px;
          line-height: 36px;
          padding: 0 10px;
        }
        .settings {
          margin: 20px 10px 50px 0;
        }
        .settings.blue:last-of-type {
          margin: 0 10px 20px 0px;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadUserSettings(e){const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):t.offensive&&(this.offensiveWords=t.offensive)}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2?this.showError(t):console.log("User settings have been updated")}async deleteUserSetting(e){const t=await api.deleteUserSetting(e);t instanceof ServerErrorResponse$2?this.showError(t):console.log("User setting has been removed")}connectedCallback(){sessionStorage.clear(),super.connectedCallback(),this.loadUserSettings({keys:["offensive"]})}disconnectedCallback(){super.disconnectedCallback()}updateJSON(e){alert(e+" has been updated!")}updateOffensiveWords(e){this.updating=!0,window.setTimeout(()=>{""===this.offensiveWords?this.deleteUserSetting({key:e}):this.writeUserSetting({key:e,json:this.offensiveWords}),this.updating=!1},2e3)}render(){return x`
      <div class="settings-container">

        <p style="font-size: 14px;">
          To prevent the use of offensive language in customizeable texts, you can enter a list of forbidden words here. This list counts for all templates.
          The convention is as following:
        </p>
<pre><code>shit,fuck:f**k,piss</code></pre>
        <p style="font-size: 14px;">
          Hereby the words “shit” and "piss" would throw a validation exception and "fuck" would be replaced by "f**k".
          <!-- A validation exception will be thrown for each of your listed words. If you rather want a word to be replaced, separated the words by a colon like such "fuck:f**k".
          The word "fuck" then will be exchanged with "f**k". -->
        </p>

        <div class="jsonTitle green">Offensive Words</div>
        <textarea
          name="offensive-words"
          id="offensive-words"
          class="jsonText"
          @change=${e=>this.offensiveWords=e.target.value}
          placeholder="Enter your offensive words here ..."
        >${this.offensiveWords}</textarea>
        <wc-button
          caption="Save" color="green" size="md" margin="10px 0 70px 0;"
          .loading=${this.updating}
          loadingText="Saving"
          @click=${()=>this.updateOffensiveWords("offensive")}
        ></wc-button>
      </div>
    `}};__decorate$1l([e$3({type:Boolean})],WcOffensiveWords.prototype,"updating",void 0),__decorate$1l([e$3({type:String})],WcOffensiveWords.prototype,"offensiveWords",void 0),WcOffensiveWords=__decorate$1l([e$4("wc-offensive-words")],WcOffensiveWords);var __decorate$1k=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcSettingsPage=class extends s$1{constructor(){super(...arguments),this.emailAddress="",this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[userProfileStyles,settingsStyles]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),location.hash="#offensive-words"}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}render(){return x`
      <div class="settings-page">
        <h3 class="topic">Offensive Words</h3>

        <p class="subtopic">Editor Settings</p>

        <wc-offensive-words></wc-offensive-words>
      </div>
    `}};__decorate$1k([e$3({type:String})],WcSettingsPage.prototype,"emailAddress",void 0),WcSettingsPage=__decorate$1k([e$4("wc-settings-page")],WcSettingsPage);const notFoundStyles=i$4`
  .not-found-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--printess-header-font);
    color: #555555;
  }

  .topic {
    font-weight: 700;
    font-size: 8em;
    letter-spacing: 0.2em;
    margin-bottom: 0px;
  }

  .subtopic {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 2em;
  }

  button {
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--printess-button-font);
    font-weight: 400;
    padding: 7px 40px;
    margin: 20px 15px;
    background-color: var(--printess-pink);
    font-size: 14px;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 5em;
    }

    .subtopic {
      font-size: 1.2em;
    }
  }
`;var __decorate$1j=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcNotFoundPage=class extends s$1{static get styles(){return[notFoundStyles]}showErrorPage(e){this.callback=e}returnToDashboard(){this.callback&&this.callback(!0)}render(){return x`
      <div class="not-found-page">
        <h1 class="topic">404</h1>
        <p class="subtopic">Sorry, Page not found</p>
        <button @click=${this.returnToDashboard}>Back To ${config.tokenRoles.indexOf("externalDesigner")>-1?"Editor":"Dashboard"}</button>
      </div>
    `}};WcNotFoundPage=__decorate$1j([e$4("wc-not-found-page")],WcNotFoundPage);const iconsStyles=i$4`
  .icons-page {
    font-family: var(--printess-text-font);
    color: #555555;
    background: #ccc;
    margin: -65px -50px;
    padding: 65px 50px;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
  }
  
  .icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .icon {
    margin: 20px;
    padding-top: 10px;
    font-size: 12px;
  }

  wc-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }
  }
`;var __decorate$1i=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcIconsPage=class extends s$1{constructor(){super(...arguments),this.wcIcons=iconNames,this.wcColors=["headline","text","light","medium","toolbar","head-toolbar","remove","red","green","blue","gray","black","frame","warning","arrows","lightgreen","pink","lightgray"]}static get styles(){return[iconsStyles]}connectedCallback(){super.connectedCallback(),location.hash="#icons"}copyIconName(e){navigator.clipboard.writeText(e).then(function(){},function(){})}render(){return x`
            <div class="icons-page">
                <h3 class="topic">Wc-Icon</h3>
                <p class="subtopic">Icons list</p>
            
                <div class="icons">
                    ${this.wcIcons.map((e,t)=>x`
                        <p class="icon" style="cursor: copy">
                            <wc-icon primaryColor=${this.wcColors[Math.floor(t%this.wcColors.length)]} icon="${e}" @click=${()=>this.copyIconName(e)}></wc-icon>
                            <span>${e}</span><br>
                            <span>${this.wcColors[Math.floor(t%this.wcColors.length)]}</span>
                        </p>
                    `)}
                </div>
            </div>
        `}};WcIconsPage=__decorate$1i([e$4("wc-icons-page")],WcIconsPage);const layoutStyles=i$4`
  .account-layout {
    font-family: var(--printess-font);
    height: 100vh;
    display: grid;
    grid-template-rows: 50px 1fr;
    grid-template-columns: 250px 1fr;
  }

  #user-content {
    grid-column: 2/3;
    grid-row: 2/3;
    padding: 40px 50px;
    overflow-y: scroll;
  }
  
  .drawer {
    background-color: #ececec;
    grid-column: 1/2;
    grid-row: 2/3;
    border-right: 1px solid #1a39601a;
    outline: none;
    padding: 0px 30px 30px 25px;
    overflow: auto;
  }

  .account-layout.shopify {
    display: block;
  }
  .shopify .drawer, .shopify header {
    display: none;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .account-layout {
      display: flex;
      flex-direction: column;
    }

    #user-content {
      padding: 50px 30px 20px;
    }

    .drawer {
      position: fixed;
      top: 50;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      height: auto;
      padding: 0;
      z-index: 10;
    }
  }
`,navbarStyles=i$4`
  header {
    grid-column: 1/3;
    grid-row: 1/2;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 10;
    height: 50px;
    background-color: var(--printess-navbar-blue);
    padding-left: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #printess-logo {
    display: inline-block;
    height: 35px;
    width: 120px;
    padding-bottom: 5px;
    padding-left: 0px;
    background-size: 100%;
    background-image: url(https://www.printess.com/kb/img/PrintessLogoFinal_WEB.svg);
    background-position: 0px 0px;
    background-size: contain;
    background-repeat: no-repeat;
    text-decoration: none;
    background-origin: content-box;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    header {
      padding-left: 70px;
    }
  }
`;var __decorate$1h=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcRedirect=class extends s$1{static get styles(){return[i$4`
      .redirect {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: calc(100% - 210px);
        background: rgba(208, 4, 155, 0.04);
        padding: 70px 50px;
        color: #555555;
        overflow: auto;
      }

      .header {
        width: 100%;
        text-align: center;
        font-family: var(--printess-header-font);
      }

      p {
        font-family: var(--printess-text-font);
      }

      .wrapper {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 30px;
      }

      .container {
        width: 600px;
        max-width: 48%;
        background: white;
        border-radius: 4px;
        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        height: 450px;
        max-height: 450px;
        font-family: var(--printess-text-font);
        cursor: pointer;
        transform: scale(1);

        background: #eeeeee; background: white; width: 400px; height: 300px; display: flex; flex-direction: column; align-items: center; font-size: 22px;
      }

      .container:hover {
        /* box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px; */
        transform: scale(1.05);
        transition: 0.5s linear;
      }

      .subtitle {
        background: var(--printess-pink);
        color: white;
        width: 100%;
        line-height: 40px;
        text-align: center;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        font-size: 16px;
      }

      img {
        border-radius: 4px;
      }

      wc-icon {
        width: 170px;
        margin: auto;
      }

      .link-text {
        text-decoration: none;
        color: var(--printess-pink);
        cursor: pointer;
      }

      .disabled {
        opacity: 0.4;
        pointer-events: none;
      }
      
      @media (max-width: ${config.mobileDeviceWidth}px) {
        .redirect {
          display: block;
          width: calc(100% - 20px);
          padding: 70px 10px;
        }
        .container {
          width: calc(100% - 20px);
          height: auto;
          max-height: 300px;
          max-width: unset;
          margin-bottom: 20px;
        }
        h1 {
          font-size: 20px;
        }
        p {
          font-size: 14px;
          text-align: center;
        }
        .wrapper {
          flex-direction: column;
        }
        wc-icon {
          margin: 10px auto;
          width: 100px;
        }
      }
    `]}constructor(e){super(),this.isTrialExpired=e}connectedCallback(){super.connectedCallback(),location.hash=""}openEditor(){let e=getEditorUrl();api.token&&(e+="#pt_"+api.token),window.open(e,"_self")}openAccountPortal(){location.hash="#dashboard"}openSubscriptionPage(){location.hash="#subscription"}getAlertContent(){return x`
      <p>
        Your trial version has expired.
        Please choose a subscription 
        <span @click=${this.openSubscriptionPage} class="link-text">here</span>
        to continue designing with Printess and to get proper access to Printess features.
      </p>
    `}render(){return x`
      <div class="redirect">
        <h1 class="header">
          Welcome to Printess
        </h1>

        <p>
          "Go to Account Portal" for general adjustments or buyer side design. 
          "Go to Editor" for creating templates.
        </p>

        <div class="wrapper" style="justify-content: space-between;">
          <div class="container" @click=${this.openAccountPortal}>
            <wc-icon icon="chart-mixed" primaryColor="printess-pink"></wc-icon>
            <!-- <img src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F.%2Fassets%2Fdashboard.png" alt="Go to Account Portal"> -->
            <div class="subtitle">Go to Account Portal</div>
          </div>

          <div class="container ${this.isTrialExpired?"disabled":""}" @click=${this.openEditor}>
            <!-- <img src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F.%2Fassets%2Feditor-slim.png" alt="Go to Editor" style="width: 100%;"> -->
            <wc-icon icon="printess-wand" primaryColor="printess-pink"></wc-icon>
            <div class="subtitle">
              Go to Editor
            </div>
          </div>
        </div>


        ${this.isTrialExpired?x`
          <wc-alert-container alertType="attention" .content="${this.getAlertContent()}"></wc-alert-container>
        `:""}
      </div>
    `}};__decorate$1h([e$3({type:String})],WcRedirect.prototype,"source",void 0),__decorate$1h([e$3({type:Boolean})],WcRedirect.prototype,"isTrialExpired",void 0),WcRedirect=__decorate$1h([e$4("wc-redirect")],WcRedirect);const productTemplatesStyles=i$4`
  .template-wrapper {
    display: flex;
    flex-flow: row wrap;
    gap: 20px;
    margin-top: 30px;
  }

`;class ProductTemplateMergeTemplate extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof ProductTemplateSettings)){const t=e??{};this.templateName=t.templateName??"",this.documentName=t.documentName??"",this.mergeMode=t.mergeMode??"merge",this.templateVersion=t.templateVersion??"published"}}serialize(){return{templateName:this.templateName,documentName:this.documentName,mergeMode:this.mergeMode,templateVersion:this.templateVersion}}}class ProductTemplateSettings extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof ProductTemplateSettings)){const t=e??{};this.mergeMode=t.mergeMode??"merge",this.useDesignTemplateName=t.useDesignTemplateName??!1,this.mergeTemplates=t.mergeTemplates?t.mergeTemplates.map(e=>new ProductTemplateMergeTemplate(e)):[]}}serialize(){return{mergeMode:this.mergeMode,useDesignTemplateName:this.useDesignTemplateName,mergeTemplates:this.mergeTemplates.map(e=>e.serialize())}}}class ProductTemplate extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof ProductTemplate)){const t=e??{};this.id=t.id??0,this.name=t.name??"new merge configuration",this.baseTemplateName=t.baseTemplateName??"",this.thumbnailUrl=t.thumbnailUrl??"",this.settings=t.json?new ProductTemplateSettings(JSON.parse(t.json)):new ProductTemplateSettings}}toDto(){return{id:this.id,name:this.name,baseTemplateName:this.baseTemplateName,thumbnailUrl:this.thumbnailUrl,json:JSON.stringify(this.settings.serialize())}}}class ProductTemplates extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof ProductTemplates)){const t=e??{};this.templates=(t.templates??[]).map(e=>new ProductTemplate(e))}}toDto(){return{templates:this.templates.map(e=>e.toDto())}}}const templateDetailsCache=new Map;async function loadTemplateDetails(e){const t=templateDetailsCache.get(e);if(t)return t;const o=await api.loadTemplateDetails(e);return templateDetailsCache.set(e,o),o}var __decorate$1g=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProductTemplateMergeTemplate=class extends s$1{static get styles(){return[i$4`
    .merge-template {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      grid-template-columns: 580px 20px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 10px 0;
      align-items: center
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }
    `]}constructor(){super(),this.loadTemplatesDebounce=new ValueDebounce(async e=>{this.templates=await api.loadTemplates(e)}),this.templates=new UserTemplates,console.log("Created wc-merge-template")}connectedCallback(){super.connectedCallback(),this.state&&loadTemplateDetails(this.state.templateName).then(e=>this.templateDetails=e)}createSetter(e){return t=>this.setState(Snobs.setProperty(this.state,e,"checkbox"===t.target.type?t.target.checked:t.target.value))}async onTemplateNameChange(e){this.setState(Snobs.setProperty(this.state,"templateName",e.target.value)),this.templateDetails=await loadTemplateDetails(e.target.value)}removeMe(){this.setState(Snobs.removeObject(this.state))}render(){return x`
      <div class="merge-template">

        <dl>
          <dt>Template Name:</dt>
          <dd>
            <input @change=${this.onTemplateNameChange} @keyup=${e=>this.loadTemplatesDebounce.change(e.target.value)} value=${this.state.templateName} list="templates" />

            <datalist id="templates">
              ${c(this.templates.templates,e=>e.id,e=>x`
              <option>${e.name}</option>
              `)}
            </datalist>
          </dd>

          <dt>Document Name:</dt>
          <dd>
            <select @change=${this.createSetter("documentName")}>
              <option .selected=${""===this.state.templateName}>Please select a document...</option>
              ${this.templateDetails&&this.templateDetails.documentIdToNameMapping?Object.values(this.templateDetails.documentIdToNameMapping).map(e=>x`
              <option .selected=${this.state.documentName===e}>${e}</option>
              `):""}
            </select>
          </dd>

          <dt>Merge Option:</dt>
          <dd>
            <select @change=${this.createSetter("mergeMode")}>
              <option value="merge" .selected=${"merge"===this.state.mergeMode}>merge</option>
              <option value="layout-snippet-no-repeat" .selected=${"layout-snippet-no-repeat"===this.state.mergeMode}>layout snippet - no repeat</option>
              <option value="layout-snippet-repeat-all" .selected=${"layout-snippet-repeat-all"===this.state.mergeMode}>layout snippet - repeat all</option>
              <option value="layout-snippet-repeat-inside" .selected=${"layout-snippet-repeat-inside"===this.state.mergeMode}>layout snippet - repeat inside pages</option>
            </select>
          </dd>

          <dt>Version:</dt>
          <dd>
            <select @change=${this.createSetter("templateVersion")}>
              <option value="draft" .selected=${"draft"===this.state.templateVersion}>draft</option>
              <option value="published" .selected=${"published"===this.state.templateVersion}>published</option>
            </select>
          </dd>
        </dl>

        <wc-icon @click=${this.removeMe} icon="close" primaryColor="red"></wc-icon>

      </div>
      `}};__decorate$1g([e$3({attribute:!0,type:Object})],WcProductTemplateMergeTemplate.prototype,"state",void 0),__decorate$1g([e$3({attribute:!0,type:Object})],WcProductTemplateMergeTemplate.prototype,"templateDetails",void 0),__decorate$1g([e$3({attribute:!1,type:Object})],WcProductTemplateMergeTemplate.prototype,"templates",void 0),WcProductTemplateMergeTemplate=__decorate$1g([e$4("wc-product-template-merge-template")],WcProductTemplateMergeTemplate);var __decorate$1f=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProductTemplateSettings=class extends s$1{static get styles(){return[i$4`
    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      grid-template-columns: 300px 500px;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 10px 20px;
      align-items: center;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    input[type=checkbox] {
      width: unset;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin-top: 15px;
      margin-right: 15px;
    }
    `]}constructor(){super()}addMergeTemplate(){this.setState(Snobs.addToCollection(this.state.mergeTemplates,new ProductTemplateMergeTemplate))}createStringSetter(e){return t=>{this.setState(Snobs.setProperty(this.state,e,t.target.value))}}createBoolSetter(e){return t=>{this.setState(Snobs.setProperty(this.state,e,t.target.checked))}}renderMergeTemplates(){return x`
      <div style="margin: 10px;">   
        ${this.state.mergeTemplates.length?x`<div><b>Merge Templates:</b></div>`:""}              

        <div style="display: flex; flex-wrap: wrap;">
        ${this.state.mergeTemplates.map(e=>x`<wc-product-template-merge-template .state=${e} .setState=${e=>this.setState(e)}></wc-product-template-merge-template>`)}
        </div>

        <div>
          <button @click=${this.addMergeTemplate}>Add Merge Template</button>
        </div>
      </div>
      `}render(){return x`
       <dl>

        <dt>Use Design Template Name:</dt>
        <dd><input type="checkbox" @change=${this.createBoolSetter("useDesignTemplateName")} .checked=${this.state.useDesignTemplateName} /></dd>

        <dt>Design Template Merge Mode:</dt>
        <dd>
          <select @change=${this.createStringSetter("mergeMode")}>
            <option value="merge" .selected=${"merge"===this.state.mergeMode}>merge</option>
            <option value="layout-snippet-no-repeat" .selected=${"layout-snippet-no-repeat"===this.state.mergeMode}>layout snippet - no repeat</option>
            <option value="layout-snippet-repeat-all" .selected=${"layout-snippet-repeat-all"===this.state.mergeMode}>layout snippet - repeat all</option>
            <option value="layout-snippet-repeat-inside" .selected=${"layout-snippet-repeat-inside"===this.state.mergeMode}>layout snippet - repeat inside pages</option>
          </select>
        </dd>

      </dl>

      ${this.renderMergeTemplates()}
      `}};__decorate$1f([e$3({attribute:!0,type:Object})],WcProductTemplateSettings.prototype,"state",void 0),__decorate$1f([e$3({attribute:!0,type:Object})],WcProductTemplateSettings.prototype,"setState",void 0),WcProductTemplateSettings=__decorate$1f([e$4("wc-product-template-settings")],WcProductTemplateSettings);var __decorate$1e=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProductTemplateEdit=class extends s$1{static get styles(){return[i$4`
    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      grid-template-columns: 200px calc(100% - 150px);
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 10px 20px;
      align-items: center;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin-right: 8px;
    }
    `]}constructor(e){super(),this.templates=new UserTemplates,this.loadTemplatesDebounce=new ValueDebounce(async e=>{this.templates=await api.loadTemplates(e)}),this.state=e,this.loadRecentTemplates()}async loadRecentTemplates(){this.templates=await api.loadRecentTemplates()}setState(e){this.state=new ProductTemplate(e,this.state)}createSetter(e){return t=>this.setState(Snobs.setProperty(this.state,e,t.target.value))}async save(){await api.saveProductTemplate(this.state.toDto())}render(){return x`
      <div class="">
        <dl>
          <dt>Id:</dt>
          <dd><input value=${this.state.id} disabled /></dd>

          <dt>Name:</dt>
          <dd><input @change=${this.createSetter("name")} value=${this.state.name} /></dd>

          <!--
            This is the "master" template, can be created by drop shipper description later on.
            Main idea is to separate them, so you can also create a base template yourself.
            The base template must have a flag on the prod document(s), that they cannot be changed.
          -->
          <dt>Template:</dt>
          <dd>
            <input @change=${this.createSetter("baseTemplateName")} @keyup=${e=>this.loadTemplatesDebounce.change(e.target.value)} value=${this.state.baseTemplateName} list="templates" />

            <datalist id="templates">
              ${c(this.templates.templates,e=>e.id,e=>x`
              <option>${e.name}</option>
              `)}
            </datalist>
          </dd>

          <dt>Thumbnail Url:</dt>
          <dd><input @change=${this.createSetter("thumbnailUrl")} value=${this.state.thumbnailUrl} /></dd>
        </dl>

        <div style="margin: 20px 0;"><b>Settings:</b></div><!-- TODO: das sollte ne property sein und bei state change aktualisieren? sonst macht das new es zunichte und für zu vielen reloads in den unterelementen
        new WcProductTemplateSettings(this.state.settings, (nobs) => this.setState(nobs), this.templates)-->
        <wc-product-template-settings .state=${this.state.settings} .setState=${e=>this.setState(e)}></wc-product-template-settings>

        <hr />
        <div style="margin-top: 10px; margin-bottom: 10px;">
          <button @click=${this.save}>Save</button>
          <button @click=${()=>this.preview=new WcEditorPreview({name:this.state.baseTemplateName,version:"draft",editor:"nightly",mergeTemplates:this.state.settings.serialize().mergeTemplates,mode:"buyer"},!0)}>
            Preview as Buyer
          </button>
          <button @click=${()=>this.preview=new WcEditorPreview({name:this.state.baseTemplateName,version:"draft",editor:"nightly",mergeTemplates:this.state.settings.serialize().mergeTemplates,mode:"designer"},!0)}>
            Preview as Designer
          </button>
        </div>

        ${this.preview}
      </div>
      `}};__decorate$1e([e$3({attribute:!1,type:Object})],WcProductTemplateEdit.prototype,"state",void 0),__decorate$1e([e$3({attribute:!1,type:Object})],WcProductTemplateEdit.prototype,"preview",void 0),__decorate$1e([e$3({attribute:!1,type:Object})],WcProductTemplateEdit.prototype,"templates",void 0),WcProductTemplateEdit=__decorate$1e([e$4("wc-product-template-edit")],WcProductTemplateEdit);var __decorate$1d=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProductTemplatePreview=class extends s$1{static get styles(){return[i$4`
      .template-item {
        width: 270px;
        display: flex;
        border-radius: 5px;
        padding: 20px;
        font-family: var(--printess-text-font);
        color: rgb(85, 85, 85);
      }

      .template-img {
        display: flex;
        width: 100px;
        padding-right: 20px;
        justify-content: center;
        align-items: center;
      }

      .template-txt {
        justify-content: center;
        margin: auto;
        width: 180px;
        overflow: hidden;
      }

      .template-image {
        border-radius: 5px;
        width: 100px;
        height: 80px;
        object-fit: contain;
      }
      .green {
        background-color: var(--printess-lightgreen);
      }
    `]}constructor(e,t){super(),this.state=t,this.setState=e}render(){return x`
      <div class="template-item green"> 

        <div class="template-img">
          <img class="template-image" src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Bthis.state.thumbnailUrl%7D" >  
        </div>   

        <div class="template-txt">
        ${this.state.name}
        </div>        

      </div>
      `}};__decorate$1d([e$3({attribute:!1,type:Object})],WcProductTemplatePreview.prototype,"state",void 0),WcProductTemplatePreview=__decorate$1d([e$4("wc-product-template-preview")],WcProductTemplatePreview);var __decorate$1c=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProductTemplatesPage=class extends s$1{static get styles(){return[productTemplatesStyles]}setState(e){this.state=new ProductTemplates(e,this.state)}constructor(){super(),this.state=new ProductTemplates,this.loadProductTemplates()}connectedCallback(){super.connectedCallback(),location.hash="#merge-config"}showError(e){alert(e.message)}async loadProductTemplates(){const e=await api.loadProductTemplates();e instanceof ServerErrorResponse$2?this.showError(e):this.state=new ProductTemplates({templates:e})}async select(e){const t=await api.loadProductTemplate(e.id);t instanceof ServerErrorResponse$2?this.showError(t):this.selectedProductTemplate=new ProductTemplate(t)}render(){return x`
      <div>
        <div class="template-wrapper">
          ${this.state.templates.map(e=>{const t=new WcProductTemplatePreview(e=>this.setState(e),e);return t.onclick=()=>this.select(e),t})}
        </div>

        ${new WcProductTemplateEdit(this.selectedProductTemplate??new ProductTemplate)}
      </div>
      `}};function dropshipperTypeToDisplay(e){switch(e){case"printPlanet":return"Merchrocket / Digitalprint";case"flyeralarm":return"FLYERALARM";case"siteflow":return"HP Site Flow";case"sendgrid":return"SendGrid";case"sendgridPrintess":return"Printess E-Mail";case"custom":return"Custom";case"tcg":return"TCG / Picanova";case"dropbox":return"DropBox";case"ftp":return"FTP";case"kornitx":return"KornitX"}}__decorate$1c([e$3({attribute:!1,type:Object})],WcProductTemplatesPage.prototype,"state",void 0),__decorate$1c([e$3({attribute:!1,type:Object})],WcProductTemplatesPage.prototype,"selectedProductTemplate",void 0),WcProductTemplatesPage=__decorate$1c([e$4("wc-product-templates-page")],WcProductTemplatesPage);class Dropshipper extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof Dropshipper)){const t=e??{};this.id=t.id??0,this.type=t.type??"custom",this.display=t.display??"Something meaningful",this.json=JSON.stringify(JSON.parse(t.json??"{}"),null,"  ")}}toDto(){return{id:this.id,type:this.type,display:this.display,json:this.json}}}class Dropshippers extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof Dropshippers)){const t=e??{};this.dropshippers=(t.dropshippers??[]).map(e=>new Dropshipper(e))}}}class StringDictionaryEntry extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof StringDictionaryEntry)){const t=e??{};this.key=t.key??"",this.value=t.value??""}}}class StringDictionary extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof StringDictionary)){const t=e??{};this.entries=[],Object.keys(t).forEach(e=>{this.entries.push(new StringDictionaryEntry({key:e,value:t[e]}))})}}serialize(){const e={};return this.entries.forEach(t=>e[t.key]=t.value),e}}var __decorate$1b=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperSiteflow=class extends s$1{static get styles(){return[i$4`
    .merge-template {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      grid-template-columns: 580px 20px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }

    wc-icon {
      height: 14px;
      display: inline-block;
    }

    .no-width {
      width: unset;
    }

    .no-margin {
      margin: unset;
    }

    .entries {
      flex-direction: column;
      align-items: flex-start;
    }
    `]}getState(){return JSON.stringify({token:this.token,secret:this.secret,destinationName:this.destinationName,customerName:this.customerName,defaultShippingAlias:this.defaultShippingAlias,defaultCarrierCode:this.defaultCarrierCode,defaultCarrierService:this.defaultCarrierService,defaultCountry:this.defaultCountry,orderEndpoint:this.orderEndpoint,aliasCodeMappings:this.aliasCodeMappings.serialize(),titleCodeMappings:this.titleCodeMappings.serialize(),enableAlexandersCompatibility:this.enableAlexandersCompatibility,returnAddress:{name:this.name,companyName:this.companyName,address1:this.address1,address2:this.address2,town:this.town,postcode:this.postcode,isoCountry:this.isoCountry,phone:this.phone,email:this.email}})}constructor(){super(),this.registered=!1}connectedCallback(){super.connectedCallback(),!this.registered&&this.state&&(this.setStateValues(),this.registered=!0)}shouldUpdate(e){const t=super.shouldUpdate(e);return e.has("state")&&this.setStateValues(),t}setStateValues(){if(this.state){const e=JSON.parse(this.state.json??"{}"),t=e.returnAddress??{};this.token=e.token??"",this.secret=e.secret??"",this.destinationName=e.destinationName??"",this.defaultShippingAlias=e.defaultShippingAlias??"",this.defaultCountry=e.defaultCountry??"",this.orderEndpoint=e.orderEndpoint??"",this.customerName=e.customerName??"",this.defaultCarrierService=e.defaultCarrierService??"",this.defaultCarrierCode=e.defaultCarrierCode??"",this.registered=!0,this.aliasCodeMappings=new StringDictionary(e.aliasCodeMappings??{}),this.titleCodeMappings=new StringDictionary(e.titleCodeMappings??{}),this.enableAlexandersCompatibility=e.enableAlexandersCompatibility??!1,this.name=t.name??"",this.companyName=t.companyName??"",this.address1=t.address1??"",this.address2=t.address2??"",this.town=t.town??"",this.postcode=t.postcode??"",this.isoCountry=t.isoCountry??"",this.phone=t.phone??"",this.email=t.email??""}}createSetter(e){return t=>{this[e]=t.target.value,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}createBooleanSetter(e){return t=>{this[e]=t.target.checked,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}addCodeEntry(){this.aliasCodeMappings.entries.push(new StringDictionaryEntry({key:"incoming",value:"alias"})),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}removeCodeEntry(e){const t=this.aliasCodeMappings.entries.filter(t=>t.key==e)[0];if(t){const e=Snobs.removeObject(t);this.aliasCodeMappings=new StringDictionary(e,this.aliasCodeMappings),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}changeCodeKey(e,t){const o=this.aliasCodeMappings.entries.filter(t=>t.key==e)[0];if(o){const e=Snobs.replaceObject(o,new StringDictionaryEntry({key:t,value:o.value}));this.aliasCodeMappings=new StringDictionary(e,this.aliasCodeMappings),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}changeCodeValue(e,t){const o=this.aliasCodeMappings.entries.filter(t=>t.key==e)[0];if(o){const r=Snobs.replaceObject(o,new StringDictionaryEntry({key:e,value:t}));this.aliasCodeMappings=new StringDictionary(r,this.aliasCodeMappings),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}addTitleEntry(){this.titleCodeMappings.entries.push(new StringDictionaryEntry({key:"incoming",value:"alias"})),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}removeTitleEntry(e){const t=this.titleCodeMappings.entries.filter(t=>t.key==e)[0];if(t){const e=Snobs.removeObject(t);this.titleCodeMappings=new StringDictionary(e,this.titleCodeMappings),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}changeTitleKey(e,t){const o=this.titleCodeMappings.entries.filter(t=>t.key==e)[0];if(o){const e=Snobs.replaceObject(o,new StringDictionaryEntry({key:t,value:o.value}));this.titleCodeMappings=new StringDictionary(e,this.titleCodeMappings),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}changeTitleValue(e,t){const o=this.titleCodeMappings.entries.filter(t=>t.key==e)[0];if(o){const r=Snobs.replaceObject(o,new StringDictionaryEntry({key:e,value:t}));this.titleCodeMappings=new StringDictionary(r,this.titleCodeMappings),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}render(){return x`
      <dl>
        <dt>Token:</dt>
        <dd><input @change=${this.createSetter("token")} value=${this.token} /></dd>

        <dt>Secret:</dt>
        <dd><input @change=${this.createSetter("secret")} value=${this.secret} type="password" /></dd>

        <dt>Destination Account Name:</dt>
        <dd><input @change=${this.createSetter("destinationName")} value=${this.destinationName} /></dd>

        <dt>Customer Name Overwrite:</dt>
        <dd><input @change=${this.createSetter("customerName")} value=${this.customerName} /></dd>

        <dt>Default Shipping Alias:</dt>
        <dd><input @change=${this.createSetter("defaultShippingAlias")} value=${this.defaultShippingAlias} /></dd>

        <dt>Default Carrier Code:</dt>
        <dd><input @change=${this.createSetter("defaultCarrierCode")} value=${this.defaultCarrierCode} /></dd>

        <dt>Default Carrier Service:</dt>
        <dd><input @change=${this.createSetter("defaultCarrierService")} value=${this.defaultCarrierService} /></dd>

        <dt>Default Country:</dt>
        <dd><input @change=${this.createSetter("defaultCountry")} value=${this.defaultCountry} /></dd>

        <dt>Order Endpoint:</dt>
        <dd><input @change=${this.createSetter("orderEndpoint")} value=${this.orderEndpoint} /></dd>

        <dt>Enabled Alexanders Compatibility:</dt>
        <dd><input type="checkbox" @change=${this.createBooleanSetter("enableAlexandersCompatibility")} .checked=${this.enableAlexandersCompatibility} /></dd>

        <dt>Shipping Code Mappings:</dt>
        <dd class="entries">
          <div>
            ${this.aliasCodeMappings.entries.map(e=>x`
            <div style="margin-bottom: 5px">
            <input class="no-width" .value=${e.key} @change=${t=>this.changeCodeKey(e.key,t.target.value)} />
            <wc-icon primaryColor="pink" icon="arrow-right"></wc-icon>
            <input class="no-width" .value=${e.value} @change=${t=>this.changeCodeValue(e.key,t.target.value)} />
            <wc-icon primaryColor="pink" icon="trash" @click=${()=>this.removeCodeEntry(e.key)}></wc-icon>
            </div>
            `)}
          </div>
          <button class="no-margin" @click=${this.addCodeEntry}>Add New Code Mapping Entry</button>
        </dd>

        <dt>Shipping Title Mappings:</dt>
        <dd class="entries">
          <div>
            ${this.titleCodeMappings.entries.map(e=>x`
            <div style="margin-bottom: 5px">
            <input class="no-width" .value=${e.key} @change=${t=>this.changeTitleKey(e.key,t.target.value)} />
            <wc-icon primaryColor="pink" icon="arrow-right"></wc-icon>
            <input class="no-width" .value=${e.value} @change=${t=>this.changeTitleValue(e.key,t.target.value)} />
            <wc-icon primaryColor="pink" icon="trash" @click=${()=>this.removeTitleEntry(e.key)}></wc-icon>
            </div>
            `)}
          </div>
          <button class="no-margin" @click=${this.addTitleEntry}>Add New Title Mapping Entry</button>
        </dd>

        <dt>Return Address:</dt>
        <dd>
          <dl>
            <dt>Name:</dt>
            <dd><input @change=${this.createSetter("name")} value=${this.name} /></dd>

            <dt>Company Name:</dt>
            <dd><input @change=${this.createSetter("companyName")} value=${this.companyName} /></dd>

            <dt>Phone:</dt>
            <dd><input @change=${this.createSetter("phone")} value=${this.phone} /></dd>

            <dt>E-Mail:</dt>
            <dd><input @change=${this.createSetter("email")} value=${this.email} /></dd>

            <dt>Address 1:</dt>
            <dd><input @change=${this.createSetter("address1")} value=${this.address1} /></dd>

            <dt>Address 2:</dt>
            <dd><input @change=${this.createSetter("address2")} value=${this.address2} /></dd>

            <dt>Postcode:</dt>
            <dd><input @change=${this.createSetter("postcode")} value=${this.postcode} /></dd>

            <dt>Town:</dt>
            <dd><input @change=${this.createSetter("town")} value=${this.town} /></dd>

            <dt>ISO Country:</dt>
            <dd><input @change=${this.createSetter("isoCountry")} value=${this.isoCountry} /></dd>

          </dl>
        </dd>

      </dl>
      `}};__decorate$1b([e$3({attribute:!0,type:Object})],WcDropshipperSiteflow.prototype,"setState",void 0),__decorate$1b([e$3({attribute:!0,type:Object})],WcDropshipperSiteflow.prototype,"state",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"token",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"secret",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"destinationName",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"customerName",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"defaultShippingAlias",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"defaultCarrierCode",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"defaultCarrierService",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"defaultCountry",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"orderEndpoint",void 0),__decorate$1b([e$3({attribute:!1,type:Object})],WcDropshipperSiteflow.prototype,"aliasCodeMappings",void 0),__decorate$1b([e$3({attribute:!1,type:Object})],WcDropshipperSiteflow.prototype,"titleCodeMappings",void 0),__decorate$1b([e$3({attribute:!1,type:Boolean})],WcDropshipperSiteflow.prototype,"enableAlexandersCompatibility",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"name",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"companyName",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"address1",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"address2",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"town",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"postcode",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"isoCountry",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"phone",void 0),__decorate$1b([e$3({attribute:!1,type:String})],WcDropshipperSiteflow.prototype,"email",void 0),WcDropshipperSiteflow=__decorate$1b([e$4("wc-dropshipper-siteflow")],WcDropshipperSiteflow);var __decorate$1a=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperFlyeralarm=class extends s$1{static get styles(){return[i$4`
    .merge-template {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      grid-template-columns: 580px 20px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }
    `]}getState(){return JSON.stringify({userName:this.userName,password:this.password,defaultShippingAlias:this.defaultShippingAlias,defaultCountry:this.defaultCountry})}constructor(){super(),this.registered=!1}connectedCallback(){super.connectedCallback(),!this.registered&&this.state&&(this.setStateValues(),this.registered=!0)}shouldUpdate(e){const t=super.shouldUpdate(e);return e.has("state")&&this.setStateValues(),t}setStateValues(){if(this.state){const e=JSON.parse(this.state.json??"{}");this.userName=e.userName??"",this.password=e.password??"",this.defaultShippingAlias=e.defaultShippingAlias??"",this.defaultCountry=e.defaultCountry??"",this.registered=!0}}createSetter(e){return t=>{this[e]=t.target.value,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}render(){return x`
      <dl>
        <dt>User Name:</dt>
        <dd><input @change=${this.createSetter("userName")} value=${this.userName} /></dd>

        <dt>Password:</dt>
        <dd><input @change=${this.createSetter("password")} value=${this.password} type="password" /></dd>

        <dt>Default Shipping Alias TODO: liste:</dt>
        <dd><input @change=${this.createSetter("defaultShippingAlias")} value=${this.defaultShippingAlias} /></dd>

        <dt>Default Country:</dt>
        <dd><input @change=${this.createSetter("defaultCountry")} value=${this.defaultCountry} /></dd>
      </dl>
      `}};__decorate$1a([e$3({attribute:!0,type:Object})],WcDropshipperFlyeralarm.prototype,"setState",void 0),__decorate$1a([e$3({attribute:!0,type:Object})],WcDropshipperFlyeralarm.prototype,"state",void 0),__decorate$1a([e$3({attribute:!1,type:String})],WcDropshipperFlyeralarm.prototype,"userName",void 0),__decorate$1a([e$3({attribute:!1,type:String})],WcDropshipperFlyeralarm.prototype,"password",void 0),__decorate$1a([e$3({attribute:!1,type:String})],WcDropshipperFlyeralarm.prototype,"defaultShippingAlias",void 0),__decorate$1a([e$3({attribute:!1,type:String})],WcDropshipperFlyeralarm.prototype,"defaultCountry",void 0),WcDropshipperFlyeralarm=__decorate$1a([e$4("wc-dropshipper-flyeralarm")],WcDropshipperFlyeralarm);var __decorate$19=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperSendgrid=class extends s$1{static get styles(){return[i$4`
    .merge-template {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      grid-template-columns: 580px 20px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }

    wc-icon {
      height: 14px;
      display: inline-block;
    }

    .no-width {
      width: unset;
    }

    .no-margin {
      margin: unset;
    }

    .entries {
      flex-direction: column;
      align-items: flex-start;
    }
    `]}getState(){return JSON.stringify({token:this.token})}constructor(){super(),this.registered=!1}connectedCallback(){super.connectedCallback(),!this.registered&&this.state&&(this.setStateValues(),this.registered=!0)}shouldUpdate(e){const t=super.shouldUpdate(e);return e.has("state")&&this.setStateValues(),t}setStateValues(){if(this.state){const e=JSON.parse(this.state.json??"{}");this.token=e.token??""}}createSetter(e){return t=>{this[e]=t.target.value,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}render(){return x`
      <dl>

        ${"sendgridPrintess"===this.state.type?"":x`
        <dt>Token:</dt>
        <dd><input type="password" @change=${this.createSetter("token")} value=${this.token} /></dd>        
        `}        

      </dl>
      `}};__decorate$19([e$3({attribute:!0,type:Object})],WcDropshipperSendgrid.prototype,"setState",void 0),__decorate$19([e$3({attribute:!0,type:Object})],WcDropshipperSendgrid.prototype,"state",void 0),__decorate$19([e$3({attribute:!1,type:String})],WcDropshipperSendgrid.prototype,"token",void 0),WcDropshipperSendgrid=__decorate$19([e$4("wc-dropshipper-sendgrid")],WcDropshipperSendgrid);var __decorate$18=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperTcg=class extends s$1{static get styles(){return[i$4`
    .merge-template {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      grid-template-columns: 580px 20px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }
    `]}getState(){return JSON.stringify({apiUser:this.apiUser,apiKey:this.apiKey,defaultTrackingType:this.defaultTrackingType,defaultCountry:this.defaultCountry})}constructor(){super(),this.registered=!1}connectedCallback(){super.connectedCallback(),!this.registered&&this.state&&(this.setStateValues(),this.registered=!0)}shouldUpdate(e){const t=super.shouldUpdate(e);return e.has("state")&&this.setStateValues(),t}setStateValues(){if(this.state){const e=JSON.parse(this.state.json??"{}");this.apiUser=e.apiUser??"",this.apiKey=e.apiKey??"",this.defaultTrackingType=e.defaultTrackingType??"",this.defaultCountry=e.defaultCountry??"",this.registered=!0}}createSetter(e){return t=>{this[e]=t.target.value,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}render(){return x`
      <dl>
        <dt>User Name:</dt>
        <dd><input @change=${this.createSetter("apiUser")} value=${this.apiUser} /></dd>

        <dt>Password:</dt>
        <dd><input @change=${this.createSetter("apiKey")} value=${this.apiKey} type="password" /></dd>

        <dt>Default Tracking:</dt>
        <dd>
          <select @change=${this.createSetter("defaultTrackingType")}>
            <option>Please select an option...</option>
            <option value="TRACKED" ?selected=${"TRACKED"===this.defaultTrackingType}>Tracked</option>
            <option value="UNTRACKED" ?selected=${"UNTRACKED"===this.defaultTrackingType}>Untracked</option>
          </select>
        </dd>

        <dt>Default Country:</dt>
        <dd><input @change=${this.createSetter("defaultCountry")} value=${this.defaultCountry} /></dd>
      </dl>
      `}};__decorate$18([e$3({attribute:!0,type:Object})],WcDropshipperTcg.prototype,"setState",void 0),__decorate$18([e$3({attribute:!0,type:Object})],WcDropshipperTcg.prototype,"state",void 0),__decorate$18([e$3({attribute:!1,type:String})],WcDropshipperTcg.prototype,"apiUser",void 0),__decorate$18([e$3({attribute:!1,type:String})],WcDropshipperTcg.prototype,"apiKey",void 0),__decorate$18([e$3({attribute:!1,type:String})],WcDropshipperTcg.prototype,"defaultTrackingType",void 0),__decorate$18([e$3({attribute:!1,type:String})],WcDropshipperTcg.prototype,"defaultCountry",void 0),WcDropshipperTcg=__decorate$18([e$4("wc-dropshipper-tcg")],WcDropshipperTcg);const dropboxRefreshTokenRetrievalStyles=i$4`
  .account-page {
    font-family: var(--printess-text-font);
    font-size: 14px;
    font-weight: 400;
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
  }

  .card {
    margin-top: 30px;
    margin-bottom: 70px;
  }

  wc-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .pink { border-bottom: 2px solid var(--printess-pink); }
  .green { border-bottom: 2px solid var(--printess-green); }
  .red { border-bottom: 2px solid var(--printess-red); }
  .blue { border-bottom: 2px solid var(--printess-blue); }

  .table-header {
    padding-left: 20px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .title {
    font-size: 18px;
    font-weight: 400;
    line-height: 50px;
    margin: 0;
  }

  .table-body p {
    padding: 0 20px;
  }

  .pink .table-header { background-color: var(--printess-pink); }
  .green .table-header { background-color: var(--printess-green); }
  .red .table-header { background-color: var(--printess-red); }
  .blue .table-header { background-color: var(--printess-blue); }

  dl {
    display: grid;
    margin-top: 10px;
    margin-bottom: 0;
    grid-template-columns: 60px 1fr;
  }

  dt, dd {
    display: flex;
    line-height: 25px;
    margin-left: 0;
    text-align: left;
    padding: 10px;
    align-items: center;
  }

  dt {
    padding-left: 20px;
  }

  dd {
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
  }

  .token {
    width: 70%;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pink dt:nth-of-type(even), .pink dd:nth-of-type(even) {
    background-color: var(--printess-lightpink);
  }
  .lightgreen {
    background-color: var(--printess-lightgreen);
  }
  .blue dt:nth-of-type(even), .blue dd:nth-of-type(even) {
    background-color: var(--printess-lightblue);
  }

  button {
    padding: 4px 10px;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
  }

  .settings {
    padding: 7px 20px;
    margin: 20px 15px;
  }

  .pink button { background-color: var(--printess-pink); }
  .green button { background-color: var(--printess-green); }
  .red button { background-color: var(--printess-red); }
  .blue button { background-color: var(--printess-blue); }

  .pink .hide-token {
    background-color: var(--printess-pink);
    border: 1px solid var(--printess-pink);
    color: var(--printess-pink);
  }
  .green .hide-token {
    background-color: var(--printess-lightgreen);
    border: 1px solid var(--printess-green);
    color: var(--printess-green);
  }
  .magenta .hide-token {
    background-color: var(--printess-lightmagenta);
    border: 1px solid var(--printess-magenta);
    color: var(--printess-magenta);
  }
  .red .hide-token {
    background-color: var(--printess-lightred);
    border: 1px solid var(--printess-red);
    color: var(--printess-red);
  }
  .blue .hide-token {
    background-color: var(--printess-lightblue);
    border: 1px solid var(--printess-blue);
    color: var(--printess-blue);
  }
  
  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    .card {
      width: 100%;
      margin-bottom: 50px;
    }

    .table-header {
      padding-left: 10px;
    }

    .title {
      font-size: 14px;
      line-height: 36px;
      margin: 0;
    }

    dl {
      grid-template-columns: 80px calc(50% - 80px) 80px calc(50% - 80px);
    }

    dd, dt {
      font-size: 12px;
      word-break: break-word;
      line-height: 16px;
      padding: 10px;
      align-items: center;
    }

    dd {
      grid-column: 2 / span 3;
    }

    .table-body p {
      font-size: 12px;
      padding: 0 15px;
    }

    .settings {
      font-size: 12px;
    }
  }
`;var __decorate$17=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogGetDropboxRefreshToken=class extends s$1{static get styles(){return[dialogStyles$1,dropboxRefreshTokenRetrievalStyles,i$4`
      .modal {
        padding-top: 50px;
      }

      .modal-wrapper {
        width: 99vmin;
        min-height: auto;
        min-width: 850px;
      }

      .modal-content {
        max-height: 80vh;
      }

      .auth-link {
        margin-left: 20px;
      }
    `]}constructor(e,t){super(),this.authLink="https://www.dropbox.com/oauth2/authorize?response_type=code&client_id={appId}&token_access_type=offline",this.warningOn=!1,this.fullAccess=!1,this.isNewDropshipper=!1,this.isRetrieving=!1,this.clientId="plkbxdz9i946lm0",this.fullAccessClientId="lf9vkcqlg2pov9s",this.backdrop=new WcBackdrop,this.token="",this.refreshToken="",this.warning="",this.warningOn=!1,this.fullAccess=t,this.isNewDropshipper=e}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this),this.callback&&this.refreshToken&&this.callback(this.refreshToken,this.fullAccess)}changeAuthToken(e){this.token=e.target.value}changeFullAccess(e){this.fullAccess=1==e.target.checked}showError(e){this.warning="Unable to retrieve refresh token. Check your provided token and make sure that 5 minutes did not pass already. Otherwise reauthorize.",console.error("error msg: ",e.message,"error code: ",e.code)}async retrieveRefreshToken(){if(!this.isRetrieving&&this.token)try{this.warning="",this.warningOn=!1,this.isRetrieving=!0,this.refreshToken="";const e=await api.getDropboxRefreshToken(this.token,this.fullAccess);if(this.isRetrieving=!1,e instanceof ServerErrorResponse$2)return void this.showError(e);this.refreshToken=e,this.closeDialog()}catch(e){console.error(e)}finally{this.isRetrieving=!1}}render(){const e=!!this.fullAccess,t=!this.isNewDropshipper;return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Get Refresh Token</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${this.closeDialog}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="card green">
              <p>To retrieve the required <b>refresh token</b>, it is mandatory to give the Printess App write access to your DropBox account.
                Click on the <a href=${this.authLink.replace("{appId}",this.fullAccess?this.fullAccessClientId:this.clientId)} target="_blank">Dropbox Authorization link</a> to log in to your DropBox account and grant the Printess app the required permissions.
                After the permissions are given, the DropBox web page will show you the <b>authentication token</b> that is only valid for 5 minutes.
                Provide this token to the textbox below and click on "Retrieve refresh token" before the 5 minutes are up. Files will be stored in a sub- directory of the printess app.
                To have full control over the sub path outside of the app directory, select <b>Full Access</b> before clicking on the Dropbox Authorization link to have full control over the file path.
              </p>

              <div class="table-header">
                <h3>
                  Auth- Token
                </h3>
              </div>

              <div class="table-body">
                <dl>
                  <dt class="mandatory">Full Access:</dt>
                  <dd><input class="profile-input" @change=${this.changeFullAccess} name="fullaccess" .checked=${e} type="checkbox" .disabled=${t}></dd>
                </dl>
                <dl>
                  <dt class="mandatory">Token:</dt>
                  <dd><input class="profile-input" @change=${this.changeAuthToken} name="authtoken" value=${this.token} placeholder="Auth- Token"></dd>
                </dl>
              </div>

              <h4><a class="auth-link" href=${this.authLink.replace("{appId}",this.fullAccess?this.fullAccessClientId:this.clientId)} target="_blank">Dropbox Authorization link</a></h4>
            </div>

            ${this.warningOn?x`<p class="warning">${this.warning}</p>`:""}

            <div class="button-wrapper">
              <button class="back" @click=${this.closeDialog}>Cancel</button>
              <button class="continue ${this.warningOn?"disabled":""}" @click=${this.retrieveRefreshToken}>Retrieve refresh token</button>
            </div>
          </div>
        </div>
    `}};__decorate$17([e$3({type:String})],WcDialogGetDropboxRefreshToken.prototype,"token",void 0),__decorate$17([e$3({type:String})],WcDialogGetDropboxRefreshToken.prototype,"refreshToken",void 0),__decorate$17([e$3({type:String})],WcDialogGetDropboxRefreshToken.prototype,"warning",void 0),__decorate$17([e$3({type:String})],WcDialogGetDropboxRefreshToken.prototype,"authLink",void 0),__decorate$17([e$3({type:Boolean})],WcDialogGetDropboxRefreshToken.prototype,"warningOn",void 0),__decorate$17([e$3({type:Boolean})],WcDialogGetDropboxRefreshToken.prototype,"fullAccess",void 0),__decorate$17([e$3({type:Boolean})],WcDialogGetDropboxRefreshToken.prototype,"isNewDropshipper",void 0),WcDialogGetDropboxRefreshToken=__decorate$17([e$4("wc-dialog-get-dropbox-refresh-token")],WcDialogGetDropboxRefreshToken);var __decorate$16=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperDropBox=class extends s$1{static get styles(){return[i$4`
    .merge-template {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      grid-template-columns: 580px 20px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }

    wc-icon {
      height: 14px;
      display: inline-block;
    }

    .no-width {
      width: unset;
    }

    .no-margin {
      margin: unset;
    }

    .entries {
      flex-direction: column;
      align-items: flex-start;
    }
    `]}getState(){return JSON.stringify({refreshToken:this.refreshToken,fullAccess:this.fullAccess})}constructor(){super(),this.registered=!1}connectedCallback(){super.connectedCallback(),!this.registered&&this.state&&(this.setStateValues(),this.registered=!0)}shouldUpdate(e){const t=super.shouldUpdate(e);return e.has("state")&&this.setStateValues(),t}setStateValues(){if(this.state){const e=JSON.parse(this.state.json??"{}");this.refreshToken=e.refreshToken??"",this.fullAccess=void 0!==e.fullAccess&&!0===e.fullAccess,this.isNewDropshipper=this.state.id<=0}}createSetter(e){return t=>{this[e]="checkbox"===t.target.getAttribute("type")?t.target.checked:t.target.value,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}openRetrieveDialog(){new WcDialogGetDropboxRefreshToken(this.isNewDropshipper,this.fullAccess).showDialog((e,t)=>{this.refreshToken=e,this.fullAccess=t,this.setState(Snobs.setProperty(this.state,"json",this.getState()))})}render(){const e=!!this.fullAccess,t=!(this.isNewDropshipper||!(this.refreshToken&&this.refreshToken.trim().length>0));return x`
      <dl>
        <dt>Full Dropbox access (No directory restriction):</dt>
        <dd>
          <input type="checkbox" @change=${this.createSetter("fullAccess")} .checked=${e} .disabled=${t} />
        </dd>
      </dl>
      <dl>
        <dt>Refresh Token:</dt>
        <dd>
          <input type="password" @change=${this.createSetter("refreshToken")} value=${this.refreshToken} />
          <button @click=${this.openRetrieveDialog}>Retrieve</button>
        </dd>
      </dl>
      `}};__decorate$16([e$3({attribute:!0,type:Object})],WcDropshipperDropBox.prototype,"setState",void 0),__decorate$16([e$3({attribute:!0,type:Object})],WcDropshipperDropBox.prototype,"state",void 0),__decorate$16([e$3({attribute:!1,type:String})],WcDropshipperDropBox.prototype,"refreshToken",void 0),__decorate$16([e$3({attribute:!1,type:Boolean})],WcDropshipperDropBox.prototype,"fullAccess",void 0),__decorate$16([e$3({attribute:!1,type:Boolean})],WcDropshipperDropBox.prototype,"isNewDropshipper",void 0),WcDropshipperDropBox=__decorate$16([e$4("wc-dropshipper-dropbox")],WcDropshipperDropBox);var __decorate$15=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperFtp=class extends s$1{static get styles(){return[i$4`
    .merge-template {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      grid-template-columns: 580px 20px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    input[type=checkbox] {
      width: unset;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }

    wc-icon {
      height: 14px;
      display: inline-block;
    }

    .no-width {
      width: unset;
    }

    .no-margin {
      margin: unset;
    }

    .entries {
      flex-direction: column;
      align-items: flex-start;
    }
    `]}getState(){return JSON.stringify({host:this.host,user:this.user,password:this.password,targetDirectory:this.targetDirectory,port:this.port,encryption:this.encryption,disableCertificateValidation:this.disableCertificateValidation})}constructor(){super(),this.registered=!1,this.host="",this.user="",this.password="",this.targetDirectory="",this.encryption="auto",this.port=21,this.disableCertificateValidation=!1}connectedCallback(){super.connectedCallback(),!this.registered&&this.state&&(this.setStateValues(),this.registered=!0)}shouldUpdate(e){const t=super.shouldUpdate(e);return e.has("state")&&this.setStateValues(),t}setStateValues(){if(this.state){const e=JSON.parse(this.state.json??"{}");this.host=e.host??"",this.user=e.user??"",this.password=e.password??"",this.targetDirectory=e.targetDirectory??"/",this.encryption=e.encryption??"auto",this.port="number"==typeof e.port?e.port:21,this.disableCertificateValidation="boolean"!=typeof e.disableCertificateValidation||e.disableCertificateValidation}}createSetter(e){return t=>{this[e]=t.target.value,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}createNumberSetter(e){return t=>{this[e]=parseInt(t.target.value,10),this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}createBoolSetter(e){return t=>{this[e]=t.target.checked,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}render(){return x`
      <dl>

        <dt>Host:</dt>
        <dd><input @change=${this.createSetter("host")} value=${this.host} /></dd>

        <dt>User:</dt>
        <dd><input @change=${this.createSetter("user")} value=${this.user} /></dd>

        <dt>Password:</dt>
        <dd><input type="password" @change=${this.createSetter("password")} value=${this.password} /></dd>

        <dt>Target Directory:</dt>
        <dd><input @change=${this.createSetter("targetDirectory")} value=${this.targetDirectory} /></dd>

        <dt>Port:</dt>
        <dd><input type="number" @change=${this.createNumberSetter("port")} value=${this.port} /></dd>

        <dt>Encryption:</dt>
        <dd>
          <select @change=${this.createSetter("encryption")}>
            <option .selected=${"auto"===this.encryption} value="auto">Automatic</option>
            <option .selected=${"none"===this.encryption} value="none">None</option>
            <option .selected=${"implicit"===this.encryption} value="implicit">Implicit</option>
            <option .selected=${"Explicit"===this.encryption} value="explicit">Explicit</option>
          </select>
        </dd>

        <dt>Disable Certificate Validation:</dt>
        <dd><input type="checkbox" @change=${this.createBoolSetter("disableCertificateValidation")} ?checked=${!this.disableCertificateValidation} /></dd>

      </dl>
      `}};__decorate$15([e$3({attribute:!0,type:Object})],WcDropshipperFtp.prototype,"setState",void 0),__decorate$15([e$3({attribute:!0,type:Object})],WcDropshipperFtp.prototype,"state",void 0),__decorate$15([e$3({attribute:!1,type:String})],WcDropshipperFtp.prototype,"host",void 0),__decorate$15([e$3({attribute:!1,type:String})],WcDropshipperFtp.prototype,"user",void 0),__decorate$15([e$3({attribute:!1,type:String})],WcDropshipperFtp.prototype,"password",void 0),__decorate$15([e$3({attribute:!1,type:String})],WcDropshipperFtp.prototype,"targetDirectory",void 0),__decorate$15([e$3({attribute:!1,type:String})],WcDropshipperFtp.prototype,"encryption",void 0),__decorate$15([e$3({attribute:!1,type:Number})],WcDropshipperFtp.prototype,"port",void 0),__decorate$15([e$3({attribute:!1,type:Boolean})],WcDropshipperFtp.prototype,"disableCertificateValidation",void 0),WcDropshipperFtp=__decorate$15([e$4("wc-dropshipper-ftp")],WcDropshipperFtp);var __decorate$14=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperKornitX=class extends s$1{static get styles(){return[i$4`
    .merge-template {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      grid-template-columns: 580px 20px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    input[type=checkbox] {
      width: unset;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }

    wc-icon {
      height: 14px;
      display: inline-block;
    }

    .no-width {
      width: unset;
    }

    .no-margin {
      margin: unset;
    }

    .entries {
      flex-direction: column;
      align-items: flex-start;
    }
    `]}getState(){return JSON.stringify({clientId:this.clientId,clientSecret:this.clientSecret,basicAuthenticationHeader:this.basicAuthenticationHeader})}constructor(){super(),this.registered=!1,this.clientId="",this.clientSecret="",this.basicAuthenticationHeader=""}connectedCallback(){super.connectedCallback(),!this.registered&&this.state&&(this.setStateValues(),this.registered=!0)}shouldUpdate(e){const t=super.shouldUpdate(e);return e.has("state")&&this.setStateValues(),t}setStateValues(){if(this.state){const e=JSON.parse(this.state.json??"{}");this.clientId=e.clientId??"",this.clientSecret=e.clientSecret??"",this.basicAuthenticationHeader=e.basicAuthenticationHeader??""}}createSetter(e){return t=>{this[e]=t.target.value,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}render(){return x`
      <dl>

        <dt>ClientId:</dt>
        <dd><input @change=${this.createSetter("clientId")} value=${this.clientId} /></dd>

        <dt>ClientSecret:</dt>
        <dd><input type="password" @change=${this.createSetter("clientSecret")} value=${this.clientSecret} /></dd>

        <dt>BasicAuthenticationHeader:</dt>
        <dd><input type="password" @change=${this.createSetter("basicAuthenticationHeader")} value=${this.basicAuthenticationHeader} /></dd>

      </dl>
      `}};__decorate$14([e$3({attribute:!0,type:Object})],WcDropshipperKornitX.prototype,"setState",void 0),__decorate$14([e$3({attribute:!0,type:Object})],WcDropshipperKornitX.prototype,"state",void 0),__decorate$14([e$3({attribute:!1,type:String})],WcDropshipperKornitX.prototype,"clientId",void 0),__decorate$14([e$3({attribute:!1,type:String})],WcDropshipperKornitX.prototype,"clientSecret",void 0),__decorate$14([e$3({attribute:!1,type:String})],WcDropshipperKornitX.prototype,"basicAuthenticationHeader",void 0),WcDropshipperKornitX=__decorate$14([e$4("wc-dropshipper-kornitx")],WcDropshipperKornitX);var __decorate$13=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperPrintPlanet=class extends s$1{static get styles(){return[i$4`
   
    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    input[type=checkbox] {
      width: unset;
    }

    `]}getState(){return JSON.stringify({apiToken:this.apiToken})}constructor(){super(),this.registered=!1,this.apiToken=""}connectedCallback(){super.connectedCallback(),!this.registered&&this.state&&(this.setStateValues(),this.registered=!0)}shouldUpdate(e){const t=super.shouldUpdate(e);return e.has("state")&&this.setStateValues(),t}setStateValues(){if(this.state){const e=JSON.parse(this.state.json??"{}");this.apiToken=e.apiToken??""}}createSetter(e){return t=>{this[e]=t.target.value,this.setState(Snobs.setProperty(this.state,"json",this.getState()))}}render(){return x`
      <dl>

        <dt>API Token:</dt>
        <dd><input @change=${this.createSetter("apiToken")} value=${this.apiToken} type="password" /></dd>

      </dl>
      `}};__decorate$13([e$3({attribute:!0,type:Object})],WcDropshipperPrintPlanet.prototype,"setState",void 0),__decorate$13([e$3({attribute:!0,type:Object})],WcDropshipperPrintPlanet.prototype,"state",void 0),__decorate$13([e$3({attribute:!1,type:String})],WcDropshipperPrintPlanet.prototype,"apiToken",void 0),WcDropshipperPrintPlanet=__decorate$13([e$4("wc-dropshipper-print-planet")],WcDropshipperPrintPlanet);var __decorate$12=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipper=class extends s$1{constructor(){super(),this.hasKornitXDropshipper=!1}connectedCallback(){super.connectedCallback(),0===this.state.id&&this.state.type!==this.dropshipperType&&this.dropshipperType&&this.setState(Snobs.setProperty(this.state,"type",this.dropshipperType))}static get styles(){return[i$4`

    .dropshipper {
      margin-top: 0;
      background-color: rgba(219, 246, 238, 0.5);
      padding: 5px 25px;
    }

    .createNew {
      background-color: rgba(255, 246, 238, 0.5);
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 4px 0;
      align-items: center;
      font-size: 14px;
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }

    .delete {
      background-color: var(--printess-red);
    }
    `]}async save(e){const t=e.toDto(),o=await api.saveDropshipper(t);o instanceof ServerErrorResponse$2?alert("Could not save or create: "+o.message):0===e.id&&this.dispatchEvent(new CustomEvent("dropshipper-created",{detail:{id:o},bubbles:!0,composed:!0}))}async delete(e){if("yes"!==prompt("Are you sure? Enter 'yes' to delete this dropshipper: "+e.display,"better not"))return;const t=e.toDto(),o=await api.deleteDropshipper(t);o instanceof ServerErrorResponse$2?alert("Could not delete: "+o.message):this.dispatchEvent(new CustomEvent("dropshipper-deleted"))}createSetter(e){return t=>this.setState(Snobs.setProperty(this.state,e,t.target.value))}requestUpdate(e,t,o){super.requestUpdate(e,t,o)}renderDropshipConfigControl(){switch(this.state.type){case"custom":default:return x``;case"siteflow":return x`<wc-dropshipper-siteflow .state=${this.state} .setState=${e=>this.setState(e)}></wc-dropshipper-siteflow>`;case"flyeralarm":return x`<wc-dropshipper-flyeralarm .state=${this.state} .setState=${e=>this.setState(e)}></wc-dropshipper-flyeralarm>`;case"tcg":return x`<wc-dropshipper-tcg .state=${this.state} .setState=${e=>this.setState(e)}></wc-dropshipper-tcg>`;case"dropbox":return x`<wc-dropshipper-dropbox .state=${this.state} .setState=${e=>this.setState(e)}></wc-dropshipper-dropbox>`;case"ftp":return x`<wc-dropshipper-ftp .state=${this.state} .setState=${e=>this.setState(e)}></wc-dropshipper-ftp>`;case"kornitx":return x`<wc-dropshipper-kornitx .state=${this.state} .setState=${e=>this.setState(e)}></wc-dropshipper-kornitx>`;case"printPlanet":return x`<wc-dropshipper-print-planet .state=${this.state} .setState=${e=>this.setState(e)}></wc-dropshipper-print-planet>`;case"sendgrid":case"sendgridPrintess":return x`<wc-dropshipper-sendgrid .state=${this.state} .setState=${e=>this.setState(e)}></wc-dropshipper-sendgrid>`}}renderTypeControl(){return this.dropshipperType?x``:x`
      <dt>Type:</dt>
      <dd>
      ${0===this.state.id?x`
        <select @change=${this.createSetter("type")}>
          <option .selected=${"custom"===this.state.type} value="custom">Custom</option>
          <option .selected=${"printPlanet"===this.state.type} value="printPlanet">${dropshipperTypeToDisplay("printPlanet")}</option>
          <option .selected=${"siteflow"===this.state.type} value="siteflow">${dropshipperTypeToDisplay("siteflow")}</option>
          ${this.hasKornitXDropshipper?"":x`<option .selected=${"kornitx"===this.state.type} value="kornitx">${dropshipperTypeToDisplay("kornitx")}</option>`}          
          <option .selected=${"sendgrid"===this.state.type} value="sendgrid">${dropshipperTypeToDisplay("sendgrid")}</option>
          <option .selected=${"sendgridPrintess"===this.state.type} value="sendgridPrintess">${dropshipperTypeToDisplay("sendgridPrintess")}</option>
          <option .selected=${"tcg"===this.state.type} value="tcg">${dropshipperTypeToDisplay("tcg")}</option>
          <option .selected=${"flyeralarm"===this.state.type} value="flyeralarm">${dropshipperTypeToDisplay("flyeralarm")}</option>
          <option .selected=${"dropbox"===this.state.type} value="dropbox">${dropshipperTypeToDisplay("dropbox")}</option>
          <option .selected=${"ftp"===this.state.type} value="ftp">${dropshipperTypeToDisplay("ftp")}</option>
        </select>
      `:x`${dropshipperTypeToDisplay(this.state.type)}`}
      </dd>
    `}render(){return x`
      <div .className=${0===this.state.id?"dropshipper createNew":"dropshipper"}>
        <dl>
          <dt>Id:</dt>
          <dd>${this.state.id}</dd>

          <dt>Display:</dt>
          <dd><input @change=${this.createSetter("display")} value=${this.state.display} /></dd>

          ${this.renderTypeControl()}          
        </dl>
          
        ${this.renderDropshipConfigControl()}        
        
        <button @click=${()=>this.save(this.state)}> ${0===this.state.id?"Create":"Save"} </button>
        ${0===this.state.id?x``:x`<button class="delete" @click=${()=>this.delete(this.state)}> Delete </button>`}
      </div>
      `}};__decorate$12([e$3({attribute:!0,type:Object})],WcDropshipper.prototype,"state",void 0),__decorate$12([e$3({attribute:!0,type:Object})],WcDropshipper.prototype,"setState",void 0),__decorate$12([e$3({attribute:!0,type:String})],WcDropshipper.prototype,"dropshipperType",void 0),__decorate$12([e$3({attribute:!0,type:String})],WcDropshipper.prototype,"mode",void 0),__decorate$12([e$3({attribute:!0,type:Boolean})],WcDropshipper.prototype,"hasKornitXDropshipper",void 0),WcDropshipper=__decorate$12([e$4("wc-dropshipper")],WcDropshipper);var __decorate$11=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshippers=class extends s$1{setState(e){this.state=new Dropshippers(e,this.state),this.selectedDropshipper&&(this.selectedDropshipper=this.state.dropshippers.filter(e=>e.id===this.selectedDropshipper?.id)[0])}constructor(){super(),this.selectedDropshipperType="all",this.state=new Dropshippers,this.newState=new Dropshipper}connectedCallback(){super.connectedCallback(),this.loadDropshippers()}static get styles(){return i$4`

    .all {
      margin: 10px 0;
    }

    .head {
      display: flex;
      align-items: center;
      background-color: var(--printess-green);
      border-radius: 6px 6px 0px 0px;
      color: white;
    }

    .title {
      font-size: 22px;
      font-weight: 500;
      font-family: var(--printess-header-font);
      margin: 1em;
    }

    .content {
      display: grid;
      grid-template-columns: fit-content(400px) 1fr;
      border-bottom: 3px solid var(--printess-green);
    }

    .menu {
      grid-column: 1;
      background-color: var(--printess-lightgreen);
    }

    .details {
      grid-column: 2;
    }

    .menu-entry {
      font-family: var(--printess-header-font);
      padding: 10px 20px 10px 10px;
      color: rgb(85, 85, 85);    
      border-bottom: 1px solid var(--printess-green);
      font-size: 14px;
    }

    .menu-entry:hover {
      background-color: var(--printess-greenHover);
    }
    
    .selected {
      background-color: var(--printess-green);
      color: white;
    }

    select {
      color: rgb(85, 85, 85);
      padding: 4px 6px;
      border-radius: 4px;
    }
    `}showError(e){alert(e.message)}async loadDropshippers(){const e=await api.loadDropshippers(this.dropshipperType);if(e instanceof ServerErrorResponse$2)this.showError(e);else if(this.state=new Dropshippers({dropshippers:e.sort((e,t)=>e.id-t.id)}),!this.selectedDropshipper){const e=this.state.dropshippers.filter(e=>"all"===this.selectedDropshipperType||e.type===this.selectedDropshipperType).sort((e,t)=>e.display.localeCompare(t.display));e.length&&(this.selectedDropshipper=e[0])}}onDropshipperDeleted(){this.selectedDropshipper=void 0,this.loadDropshippers()}async onDropshipperCreated(e){this.newState=new Dropshipper,await this.loadDropshippers();const t=this.state.dropshippers.filter(t=>t.id===e.detail.id)[0];t&&(this.selectedDropshipper=t)}renderTitle(){return this.dropshipperType?x``:x`<h1 class="title">Dropshippers</h1>`}renderCreateTitle(){return this.dropshipperType?"siteflow"===this.dropshipperType?x`<h1 class="title">Create new HP Site Flow connection</h1>`:x`<h1 class="title">Create new ${this.dropshipperType} connection</h1>`:x`<h1 class="title">Create new dropshipper</h1>`}setSelectedDropshipperType(e){if(this.selectedDropshipperType=e,this.selectedDropshipper&&this.selectedDropshipper.type!==e){const e=this.state.dropshippers.filter(e=>"all"===this.selectedDropshipperType||e.type===this.selectedDropshipperType).sort((e,t)=>e.display.localeCompare(t.display));e.length?this.selectedDropshipper=e[0]:this.selectedDropshipper=void 0}}renderOperationMode(){const e=[];return this.mode?("edit"!==this.mode&&this.mode||e.push(x`
        ${this.renderTitle()}

        <div class="wrapper">
          ${this.state.dropshippers.map(e=>x`
          <wc-dropshipper mode="edit" .dropshipperType=${this.dropshipperType} .state=${e} .setState=${e=>this.setState(e)}></wc-dropshipper>
          `)}
        </div>
      `),"create"!==this.mode&&this.mode||e.push(x`
        ${this.renderCreateTitle()}
        <div class="wrapper">
          <wc-dropshipper mode="create" .dropshipperType=${this.dropshipperType} .state=${this.newState} .setState=${e=>this.newState=new Dropshipper(e,this.newState)}></wc-dropshipper>
        </div>
      `),e):(e.push(x`
        <div class="all">

          <div class="head">
            ${this.renderTitle()}
            <select @change=${e=>this.setSelectedDropshipperType(e.target.value)}>
              <option value="all" .selected=${"all"===this.selectedDropshipperType}>All</option>
              <option value="printPlanet" .selected=${"printPlanet"===this.selectedDropshipperType}>${dropshipperTypeToDisplay("printPlanet")}</option>
              <option value="siteflow" .selected=${"siteflow"===this.selectedDropshipperType}>${dropshipperTypeToDisplay("siteflow")}</option>
              <option value="sendgrid" .selected=${"sendgrid"===this.selectedDropshipperType}>${dropshipperTypeToDisplay("sendgrid")}</option>
              <option value="sendgridPrintess" .selected=${"sendgridPrintess"===this.selectedDropshipperType}>${dropshipperTypeToDisplay("sendgridPrintess")}</option>

              <option value="ftp" .selected=${"ftp"===this.selectedDropshipperType}>${dropshipperTypeToDisplay("ftp")}</option>
              <option value="dropbox" .selected=${"dropbox"===this.selectedDropshipperType}>${dropshipperTypeToDisplay("dropbox")}</option>
              <option value="flyeralarm" .selected=${"flyeralarm"===this.selectedDropshipperType}>${dropshipperTypeToDisplay("flyeralarm")}</option>
              <option value="tcg" .selected=${"tcg"===this.selectedDropshipperType}>${dropshipperTypeToDisplay("tcg")}</option>
              
            </select>
          </div>

          <div class="content">

            <div class="menu">
              ${this.state.dropshippers.filter(e=>"all"===this.selectedDropshipperType||e.type===this.selectedDropshipperType).sort((e,t)=>e.display.localeCompare(t.display)).map(e=>x`
              <div class="menu-entry ${o({selected:this.selectedDropshipper===e})}" @click=${()=>this.selectedDropshipper=e}>${e.display}</div>
              `)}
              <div class="menu-entry" @click=${()=>this.selectedDropshipper=this.newState}>
                + Create new Dropshipper
              </div>
            </div>

            <div class="details">
              ${this.selectedDropshipper?this.selectedDropshipper.id?x`<wc-dropshipper mode="edit" @dropshipper-deleted=${this.onDropshipperDeleted} .dropshipperType=${this.dropshipperType} .state=${this.selectedDropshipper} .setState=${e=>this.setState(e)}></wc-dropshipper>`:x`<wc-dropshipper mode="create" .hasKornitXDropshipper=${!!this.state.dropshippers.filter(e=>"kornitx"===e.type).length} @dropshipper-created=${this.onDropshipperCreated} .dropshipperType=${this.dropshipperType} .state=${this.newState} .setState=${e=>this.newState=new Dropshipper(e,this.newState)}></wc-dropshipper>`:x``}
            </div>

          </div>
        </div>

      
      `),e)}render(){return x`
      ${this.renderOperationMode()}
    `}};__decorate$11([e$3({attribute:!1,type:Object})],WcDropshippers.prototype,"state",void 0),__decorate$11([e$3({attribute:!1,type:Object})],WcDropshippers.prototype,"newState",void 0),__decorate$11([e$3({attribute:!0,type:String})],WcDropshippers.prototype,"dropshipperType",void 0),__decorate$11([e$3({attribute:!0,type:String})],WcDropshippers.prototype,"mode",void 0),__decorate$11([e$3({attribute:!1,type:Object})],WcDropshippers.prototype,"selectedDropshipper",void 0),__decorate$11([e$3({attribute:!0,type:String})],WcDropshippers.prototype,"selectedDropshipperType",void 0),WcDropshippers=__decorate$11([e$4("wc-dropshippers")],WcDropshippers);class ProductDefinition extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof ProductDefinition)){const t=e??{};this.id=t.id??0,this.dropshipperId=t.dropshipperId??0,this.display=t.display??"Something meaningful";try{this.json=JSON.stringify(JSON.parse(t.json??"{}"),null,"  ")}catch(e){this.json=t.json??"{}"}}}toDto(){return{id:this.id,dropshipperId:this.dropshipperId,display:this.display,json:this.json}}}class ProductDefinitions extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof ProductDefinitions)){const t=e??{};this.productDefinitions=(t.productDefinitions??[]).map(e=>new ProductDefinition(e)),this.type=t.type??"custom",this.step=t.step??"",this.json=t.json}}}var __decorate$10=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProductDefinition=class extends s$1{constructor(){super(),this.state=new ProductDefinition}static get styles(){return i$4`

    .item {
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    .createNew {
      background-color: rgba(255, 246, 238, 0.5);
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 10px 0;
      align-items: center
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }

    .delete {
      background-color: var(--printess-red);
    }
    `}async save(){const e=this.state.toDto();await api.saveProductDefinition(e)}async delete(){"sure"===prompt("Are you sure to delete this product definition? Enter 'sure' to confirm the deletion.","Better not...")&&(await api.deleteProductDefinition(this.state.id),this.setState(Snobs.removeObject(this.state)))}createSetter(e){return t=>this.setState(Snobs.setProperty(this.state,e,t.target.value))}renderConfigControl(){return x``}renderDropshipperInfo(){return this.dropshipper?"siteflow"===this.dropshipper.type?x`
        <dt>Connection:</dt>
        <dd>${this.dropshipper.display}</dd>
      `:x`
        <dt>Dropshipper:</dt>
        <dd>${this.dropshipper.display}</dd>
      `:x`
      <dt>Dropshipper Id:</dt>
      <dd>${this.state.dropshipperId}</dd>
    `}render(){return x`
      <div .className=${0===this.state.id?"item createNew":"item"}>
        <dl>
          <dt>Id:</dt>
          <dd>${this.state.id}</dd>

          ${this.renderDropshipperInfo()}

          <dt>Display:</dt>
          <dd><input @change=${this.createSetter("display")} value=${this.state.display} /></dd>          
          
        </dl>
          
        ${this.renderConfigControl()}
        
        <wc-ace-editor-pure .text=${this.state.json} .valueChangeCallback=${e=>this.setState(Snobs.setProperty(this.state,"json",e))}></wc-ace-editor-pure>
        
        <button @click=${()=>this.save()}> ${0===this.state.id?"Create":"Save"} </button>
        ${0===this.state.id?x``:x`<button class="delete" @click=${()=>this.delete()}> Delete </button>`}
      </div>
      `}};__decorate$10([e$3({attribute:!0,type:Object})],WcProductDefinition.prototype,"state",void 0),__decorate$10([e$3({attribute:!0,type:Object})],WcProductDefinition.prototype,"dropshipper",void 0),__decorate$10([e$3({attribute:!0,type:Object})],WcProductDefinition.prototype,"setState",void 0),WcProductDefinition=__decorate$10([e$4("wc-product-definition")],WcProductDefinition);var __decorate$$=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProductDefinitions=class extends s$1{setState(e){this.state=new ProductDefinitions(e,this.state)}constructor(){super(),this.registered=!1,this.dropshippers=new Map,this.state=new ProductDefinitions,this.newState=new ProductDefinition}connectedCallback(){super.connectedCallback(),this.loadProductDefinitions(),this.registered||(this.registered=!0,this.register&&this.register("product-definition-created",e=>this.loadProductDefinitions()))}static get styles(){return i$4`
    .title {
      font-size: 22px;
      font-weight: 500;
      font-family: var(--printess-header-font);
      color: rgb(85, 85, 85);
      margin: 1em 0;
    }
    .wrapper {
      display: flex;
      flex-wrap: wrap;
    }
    `}showError(e){alert(e.message)}async loadProductDefinitions(){const e=await api.loadProductDefinitions(this.dropshipperType);e instanceof ServerErrorResponse$2?this.showError(e):(this.state=new ProductDefinitions({productDefinitions:e.productDefinitions.sort((e,t)=>e.id-t.id)}),e.dropshippers.forEach(e=>this.dropshippers.set(e.id,e)))}render(){return x`
      ${this.dropshipperType?x``:x`<h1 class="title">Overview of Product Definitions</h1>`}      

      <div class="wrapper">
        ${this.state.productDefinitions.map(e=>x`
        <wc-product-definition .dropshipper=${this.dropshippers.get(e.dropshipperId)} .state=${e} .setState=${e=>this.setState(e)}></wc-product-definition>
        `)}
      </div>
    `}};__decorate$$([e$3({attribute:!1,type:Object})],WcProductDefinitions.prototype,"state",void 0),__decorate$$([e$3({attribute:!1,type:Object})],WcProductDefinitions.prototype,"newState",void 0),__decorate$$([e$3({attribute:!0,type:String})],WcProductDefinitions.prototype,"dropshipperType",void 0),__decorate$$([e$3({attribute:!0,type:Object})],WcProductDefinitions.prototype,"register",void 0),WcProductDefinitions=__decorate$$([e$4("wc-product-definitions")],WcProductDefinitions);var __decorate$_=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};function parseFormat(e){const t=e.match(/(\d+(,\d+)?)\s*[cm]*\s*x\s*(\d+(,\d+)?)/);return t?t[1].replace(",",".")+"x"+t[3].replace(",","."):e}function getValidFormFieldName(e){return e.replace(/[^0-9a-zA-Z]/gi,"_").replace(/^\d/,"A$1").replace(/_/g,"")}let WcCreateProductDefinition=class extends s$1{constructor(){super(),this.attributeSelections={},this.attributeValueSelections={},this.createLandscapeSizes=!0,this.loadFlyeralarmInventoryFiltered=new ValueDebounce(()=>{this.loadDropshipperInventory(this.selectedDropshipperId,"keepAttributes","productGroup",JSON.stringify({productGroupId:this.selectedFlyeralarmProductGroupId,attributes:Object.keys(this.attributeValueSelections).map(e=>({attributeName:e,includes:Object.keys(this.attributeValueSelections[e]).filter(t=>this.attributeValueSelections[e][t])}))}))}),this.variants=0,this.state=new ProductDefinition,this.dropshippers=new Dropshippers,this.inventory=new ProductDefinitions,this.selectedFlyeralarmProductGroupId=0}async connectedCallback(){super.connectedCallback(),await this.loadDropshippers();const e=this.dropshippers.dropshippers.filter(e=>e.id===this.dropshipperIdToSelect)[0];e&&this.selectDropshipper(e)}static get styles(){return i$4`

    .item {
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 10px;
      background-color: rgba(219, 246, 238, 0.5);
      border-radius: 5px;
      padding: 5px 25px;
    }

    .createNew {
      background-color: rgba(255, 246, 238, 0.5);
    }

    dl {
      display: grid;
      margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 20px;
      grid-template-columns: 240px 1fr;
    }

    dt, dd {
      font-family: var(--printess-text-font);
      display: flex;
      flex-wrap: wrap;
      line-height: 25px;
      margin-left: 0px;
      text-align: left;
      padding: 10px 0;
      align-items: center
    }

    input, select {
      color: rgb(85, 85, 85);
      font-family: var(--printess-text-font);
      font-size: 14px;
      width: 100%;
      outline: none;
      border: 1px solid rgb(204, 204, 204);
      background-color: rgba(242, 246, 219, 0.5);
      padding: 7px 10px;
      border-radius: 4px;
    }

    button {
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      color: rgb(255, 255, 255);
      cursor: pointer;
      font-family: var(--printess-button-font);
      background-color: var(--printess-green);
      font-size: 14px;
      font-weight: 400;
      padding: 7px 20px;
      margin: 20px 15px;
    }

    .no-width {
      width: unset;
    }

    .mr5 {
      margin-right: 5px
    }

    .tcgVariants {
      grid-column: 1 / span 2;
    }

    .tcgVariant {
      display: flex;
      gap: 6px;
      margin-top: 4px;
    }

    .tcgVariant input {
      width: unset;
    }
    `}setState(e){this.state=new ProductDefinition(e,this.state)}showError(e){alert(e.message)}async loadDropshippers(){const e=await api.loadDropshippers(this.dropshipperType);e instanceof ServerErrorResponse$2?this.showError(e):this.dropshippers=new Dropshippers({dropshippers:e})}async loadDropshipperInventory(e,t,o,r){const i=await api.loadDropshipperInventory(e,o,r);if(i instanceof ServerErrorResponse$2)this.showError(i);else if("dataSheets"!==t){if(this.inventory=new ProductDefinitions(i),"flyeralarm"===this.inventory.type&&this.inventory.productDefinitions.length&&(this.state=this.inventory.productDefinitions[0],this.onProductDefinitionChangedCore(t)),"tcg"===this.inventory.type){const e=this.inventory.json??"{}";"productGroups"===this.inventory.step?(this.tcgProductGroups=JSON.parse(e),this.selectedTcgVariantIds=void 0):"variants"===this.inventory.step&&(this.tcgVariants=JSON.parse(e),this.tcgVariants?this.selectedTcgVariantIds=new Set(this.tcgVariants.data.map(e=>e.variant_id)):this.selectedTcgVariantIds=void 0,this.setState(Snobs.setProperty(this.state,"json",this.getTcgDefinition())))}if("printPlanet"===this.inventory.type){const e=this.inventory.json??"{}";"catalogProducts"===this.inventory.step&&(this.printPlanetCatalogProducts=JSON.parse(e),this.selectedPrintPlanetCatalogProductId=void 0)}}else if(i.productDefinitions){const e=JSON.parse(i.productDefinitions[0].json);e.dataSheets&&(this.dataSheets=e.dataSheets)}}async save(e){const t=e.toDto();t.dropshipperId||(t.dropshipperId=this.selectedDropshipperId),await api.saveProductDefinition(t),this.dispatchEvent(new CustomEvent("product-definition-created")),"siteflow"===this.dropshipperType&&alert("New product definition created.")}loadDataSheets(){this.loadDropshipperInventory(this.selectedDropshipperId,"dataSheets","dataSheets",JSON.stringify({productGroupId:this.selectedFlyeralarmProductGroupId,attributes:Object.keys(this.attributeValueSelections).map(e=>({attributeName:e,includes:Object.keys(this.attributeValueSelections[e]).filter(t=>this.attributeValueSelections[e][t])}))}))}async createFormFields(){if("flyeralarm"===this.inventory.type&&this.selectedFlyeralarmProductGroup){const e={context:"GlobalFormFields",scopeId:"a",objects:Object.keys(this.attributeValueSelections).map(e=>{const t=Object.keys(this.attributeValueSelections[e]).filter(t=>this.attributeValueSelections[e][t]),o="Format"===e?"DOCUMENT_SIZE":e;let r=t[0]??"";"DOCUMENT_SIZE"===o&&(r=parseFormat(r));const i={type:"form",id:"DOCUMENT_SIZE"===o?"DOCUMENT_SIZE":void 0,data:{id:"DOCUMENT_SIZE"===o?"DOCUMENT_SIZE":"",t:"string",nt:"integer",na:o,ca:e,v:r,dv:r,vs:t.length>1?"buyer":"admin",pr:!0,ui:"select-list",g:"DOCUMENT_SIZE"===o?"Auto Generated":"",lst:Object.keys(this.attributeValueSelections[e]).filter(t=>this.attributeValueSelections[e][t]).map(t=>({k:"Format"===e?parseFormat(t):t,l:t,ds:"",tg:""}))}};if("DOCUMENT_SIZE"===o&&this.createLandscapeSizes){const e=i.data.lst.length;for(let t=0;t<e;t++){const e=JSON.parse(JSON.stringify(i.data.lst[t])),o=e.k.split("x");e.k=o[1]+"x"+o[0],e.l=e.l+" Landscape",i.data.lst.push(e)}}return i})};await navigator.clipboard.writeText(JSON.stringify(e,void 0,2)),console.log(e)}}async createFormFieldMapping(){if("flyeralarm"===this.inventory.type&&this.selectedFlyeralarmProductGroup){const e={};Object.keys(this.attributeValueSelections).forEach(t=>{const o="Format"===t?"DOCUMENT_SIZE":getValidFormFieldName(t);"DOCUMENT_SIZE"===o&&(e[o]={},Object.keys(this.attributeValueSelections[t]).filter(e=>this.attributeValueSelections[t][e]).forEach(t=>{const r="DOCUMENT_SIZE"===o?parseFormat(t):t;if(e[o][r]=t,this.createLandscapeSizes&&"DOCUMENT_SIZE"===o){const i=r.split("x"),a=i[1]+"x"+i[0];e[o][a]=t}}))}),await navigator.clipboard.writeText(JSON.stringify(e,void 0,2)),console.log(e)}}createSetter(e){return t=>this.setState(Snobs.setProperty(this.state,e,t.target.value))}selectDropshipper(e){this.dataSheets=void 0,this.selectedDropshipperId=e.id,this.selectedDropshipper=e,this.selectedFlyeralarmProductGroup=void 0,this.loadDropshipperInventory(e.id,"clearAttributes")}onDropshipperChanged(e){const t=parseInt(e.target.value,10),o=this.dropshippers.dropshippers.filter(e=>e.id===t)[0];o&&this.selectDropshipper(o)}onProductDefinitionChangedCore(e){if("flyeralarm"===this.inventory.type){if("keepAttributes"===e){const e=JSON.parse(this.state.json);return void(this.variants=e.variants.length)}this.selectedFlyeralarmProductDefinition=JSON.parse(this.state.json),this.attributeSelections={},this.attributeValueSelections={},this.variants=this.selectedFlyeralarmProductDefinition.variants.length,this.selectedFlyeralarmProductDefinition.variants.forEach(e=>{Object.keys(e.attributeValues).forEach(t=>{this.attributeSelections[t]||(this.attributeSelections[t]=new Set),this.attributeSelections[t].add(e.attributeValues[t])})}),Object.keys(this.attributeSelections).forEach(e=>{this.attributeValueSelections[e]={},this.attributeSelections[e].forEach(t=>{this.attributeValueSelections[e][t]=!0})})}}onProductDefinitionChanged(e){const t=this.inventory.productDefinitions.filter(t=>t.display===e.target.value)[0];t&&(this.state=t,this.onProductDefinitionChangedCore("clearAttributes"))}onFlyeralarmProductGroupChanged(e){const t=parseInt(e.target.value,10);this.selectedFlyeralarmProductGroupId=t,this.dataSheets=void 0,this.loadDropshipperInventory(this.selectedDropshipperId,"clearAttributes","productGroup",JSON.stringify({productGroupId:this.selectedFlyeralarmProductGroupId}))}onFlyeralarmAttributeChanged(e,t,o){this.attributeValueSelections[t][o]=e.target.checked,this.loadFlyeralarmInventoryFiltered.change(void 0)}requestUpdate(e,t,o){super.requestUpdate(e,t,o)}onTcgProductGroupChanged(e){const t=parseInt(e.target.value,10);this.selectedTcgProductGroupId=t,this.loadDropshipperInventory(this.selectedDropshipperId,"clearAttributes","productGroup",JSON.stringify({productGroupId:this.selectedTcgProductGroupId}))}renderFlyeralarm(){if("productGroups"===this.inventory.step)return this.selectedFlyeralarmProductGroup=JSON.parse(this.inventory.json??"{}"),x`
          <dt>Product Group:</dt>
          <dd>
            <select @change=${this.onFlyeralarmProductGroupChanged}>
              <option>Please select a product group</option>
              ${this.selectedFlyeralarmProductGroup.productGroups.filter(e=>e.has_quantities).sort((e,t)=>e.name.localeCompare(t.name)).map(e=>x`<option .value=${e.product_group_id.toString()}>${e.name}</option>`)}              
            </select>
          </dd>
          `;{const e=[],t=!!Object.keys(this.attributeSelections).find(e=>"Format"===e);return Object.keys(this.attributeSelections).forEach(t=>{const o=[];this.attributeSelections[t].forEach(e=>{o.push(x`<label class="mr5"><input class="no-width" type="checkbox" .checked=${this.attributeValueSelections[t][e]} @change=${o=>this.onFlyeralarmAttributeChanged(o,t,e)}>${e}</label>`)}),e.push(x`
            <dt>${t}:</dt>
            <dd>
              ${o}
            </dd>
            `)}),x`
          ${this.selectedFlyeralarmProductGroup?x`
          <dt>Product Group:</dt>
          <dd>
            <select @change=${this.onFlyeralarmProductGroupChanged}>
              <option>Please select a product group</option>
              ${this.selectedFlyeralarmProductGroup.productGroups.filter(e=>e.has_quantities).sort((e,t)=>e.name.localeCompare(t.name)).map(e=>x`<option .value=${e.product_group_id.toString()} .selected=${this.selectedFlyeralarmProductGroupId===e.product_group_id}>${e.name}</option>`)}
            </select>
          </dd>
          `:x``}
          
          <dt>Variants:</dt>
          <dd>${this.variants??0}</dd>
  
          ${e}

          ${t?x`
          <dt>Create Landscape Sizes:</dt>
          <dd><input class="no-width" type="checkbox" .checked=${this.createLandscapeSizes} @change=${()=>this.createLandscapeSizes=!this.createLandscapeSizes}></dd>
          `:x``}
  
          ${0===this.state.dropshipperId?x``:x`
          <dt>Display:</dt>
          <dd><input @change=${this.createSetter("display")} value=${this.state.display} /></dd>         
          `}
          `}}renderSiteflow(){return x`
      <dt>Hp Site Flow Products:</dt>
      <dd>
        <select @change=${this.onProductDefinitionChanged}>
          <option>Please select a product</option>
          ${this.inventory.productDefinitions.map(e=>x`<option>${e.display}</option>`)}              
        </select>
      </dd>

      ${0===this.state.dropshipperId?x``:x`
      <dt>Display:</dt>
      <dd><input @change=${this.createSetter("display")} value=${this.state.display} /></dd>         
      `}
    `}onTcgVariantSelectionChange(e,t){this.selectedTcgVariantIds&&(t?this.selectedTcgVariantIds.add(e):this.selectedTcgVariantIds.delete(e)),this.setState(Snobs.setProperty(this.state,"json",this.getTcgDefinition())),this.requestUpdate("selectedTcgVariantIds")}getTcgDefinition(){if(!this.tcgVariants)return"{}";const e=new Set,t=this.tcgVariants.data.filter(e=>this.selectedTcgVariantIds?.has(e.variant_id));if(t.forEach(t=>t.options.forEach(t=>e.add(t.name))),1===t.length)return JSON.stringify({sku:t[0].variant_code},void 0,2);const o={skuFormField:"sku"},r=2===this.selectedTcgProductGroupId;return e.size&&(o.optionFormFields=Array.from(e).map(e=>{const t=getValidFormFieldName(e),o=r&&"Stretcherframe"===t;return{option:e,default:"",formField:getValidFormFieldName(e),splitSequence:o?"#":void 0}})),JSON.stringify(o,void 0,2)}getTcgFormFields(){if(!this.tcgVariants)return"{}";const e=new Set,t={},o=this.tcgVariants.data.filter(e=>this.selectedTcgVariantIds?.has(e.variant_id));o.forEach(t=>e.add(t.printfile.format_width.toString()+"x"+t.printfile.format_height.toString())),o.forEach(e=>{e.options.length&&e.options.forEach(e=>{t[e.name]||(t[e.name]={}),e.is_required||(t[e.name][""]={id:0,name:"",price:0,image:{id:0,original:""}}),e.values.forEach(o=>{t[e.name][o.name]=o})})});const r={context:"GlobalFormFields",scopeId:"a",objects:[]};if(e.size>1){const t=Array.from(e),o={type:"form",id:"DOCUMENT_SIZE",data:{id:"DOCUMENT_SIZE",t:"string",nt:"integer",na:"DOCUMENT_SIZE",ca:"DOCUMENT_SIZE",v:t[0],dv:t[0],vs:"admin",pr:!0,ui:"select-list",g:"DOCUMENT_SIZE",lst:t.map(e=>({k:e,l:e,ds:"",tg:""}))}};r.objects.push(o)}r.objects.push({type:"form",id:void 0,data:{id:"",t:"string",nt:"integer",na:"sku",ca:"sku",v:o[0].variant_code,dv:o[0].variant_code,wff:"DOCUMENT_SIZE",wfw:"meta1",vs:"buyer",pr:!0,ui:"select-list",g:"",lst:o.map(e=>({k:e.variant_code,l:e.name,ds:"",tg:"",m1:e.printfile.format_width.toString()+"x"+e.printfile.format_height.toString()}))}});const i=2===this.selectedTcgProductGroupId;return Object.keys(t).forEach(e=>{const a=t[e],s=Object.keys(a).map(r=>{const i=t[e][r],a=o.filter(t=>t.options?.filter(t=>t.name===e&&t.values?.filter(e=>e.name===r).length).length);return{k:i.name,l:i.name?"":"None",ds:a.length===o.length?"":a.map(e=>e.variant_code).join(","),tg:""}}),n=getValidFormFieldName(e),l=i&&"Stretcherframe"===n,c=l?s.map(e=>({...e,m1:"0",m2:"Mirrored,Stretched,White,Black"})):s;if(l){const e=c.length;for(let t=0;t<e;t++){const e={...c[t]};"2 cm"===e.k?e.m1="25":"4 cm"===e.k&&(e.m1="45"),e.k+=" # "+e.m1,e.l=c[t].k,e.m2="Folded",c.push(e)}}r.objects.push({type:"form",id:void 0,data:{id:"",t:"string",nt:"integer",na:n,ca:e,v:s[0].k,dv:s[0].k,vs:s.length>1?"buyer":"admin",pr:!0,ui:"select-list",g:"",lst:c,lcd:s.filter(e=>e.ds).length?"sku":void 0,wff:l?"BLEED_SIZE":void 0,wfw:l?"meta1":void 0,lcm2:l?"Canvasborder":void 0}})}),navigator.clipboard.writeText(JSON.stringify(r,void 0,2)),console.log(r),JSON.stringify(r,void 0,2)}renderPicanova(){const e=[];if(this.tcgProductGroups&&(e.push(x`
      <dt>Product Group:</dt>
      <dd>
        <select @change=${this.onTcgProductGroupChanged}>
          <option>Please select a product group</option>
          ${this.tcgProductGroups.data.sort((e,t)=>e.name.localeCompare(t.name)).map(e=>x`
          <option .value=${e.id.toString()}>${e.name}</option>
          `)}              
        </select>
      </dd>
      `),this.selectedTcgProductGroupId)){const t=this.tcgProductGroups.data.filter(e=>e.id===this.selectedTcgProductGroupId)[0];e.push(x`
        <dt>Info</dt>
        <dd>${t.images.map(e=>x`<img src=${e.thumb} />`)}</dd>
        `)}return this.tcgVariants&&(e.push(x`
      <div class="tcgVariants">
        ${this.tcgVariants.data.map(e=>x`
        <div class="tcgVariant">
          <input type="checkbox" @change=${t=>this.onTcgVariantSelectionChange(e.variant_id,t.target.checked)} ?checked=${this.selectedTcgVariantIds?.has(e.variant_id)??!1} />
          <div>${e.name}</div>    
          <div>${e.variant_code}</div>    
          <div>${e.price_details.formatted}</div>
        </div>
        `)}

        Definition:
        <wc-ace-editor-pure .key=${this.selectedTcgVariantIds} .text=${this.getTcgDefinition()}></wc-ace-editor-pure>
        Form Fields:
        <wc-ace-editor-pure .key=${this.selectedTcgVariantIds} .text=${this.getTcgFormFields()}></wc-ace-editor-pure>
        Please make sure to set the document unit to mm before copying the form fields.
      </div>

       `),e.push(x`
      <dt>Display:</dt>
      <dd><input @change=${this.createSetter("display")} value=${this.state.display} /></dd>         
      `)),e}renderDefault(){return x`
      <dt>Product Definition:</dt>
      <dd>
        <select @change=${this.onProductDefinitionChanged}>
          <option>Please select a product definition</option>
          ${this.inventory.productDefinitions.sort((e,t)=>e.display.localeCompare(t.display)).map(e=>x`<option>${e.display}</option>`)}              
        </select>
      </dd>

      ${0===this.state.dropshipperId?x``:x`
      <dt>Display:</dt>
      <dd><input @change=${this.createSetter("display")} value=${this.state.display} /></dd>         
      `}
    `}onPrintPlanetCatalogProductChanged(e){this.selectedPrintPlanetCatalogProductId=e.target.value,this.loadDropshipperInventory(this.selectedDropshipperId,"clearAttributes","catalogProduct",JSON.stringify({catalogProductId:this.selectedPrintPlanetCatalogProductId}))}renderPrintPlanet(){const e=[];return this.printPlanetCatalogProducts&&e.push(x`
      <dt>Product Group:</dt>
      <dd>
        <select @change=${this.onPrintPlanetCatalogProductChanged}>
          <option>Please select a catalog product</option>
          ${c(this.printPlanetCatalogProducts.sort((e,t)=>e.name.localeCompare(t.name)),e=>e.id,e=>x`     
          <option .value=${e.id}>${e.name}</option>  
          `)}         
        </select>
      </dd>
      `),this.inventory.productDefinitions&&this.inventory.productDefinitions.length&&e.push(this.renderDefault()),e}renderInventorySource(){switch(this.inventory.type){case"flyeralarm":return this.renderFlyeralarm();case"siteflow":return this.renderSiteflow();case"tcg":return this.renderPicanova();case"printPlanet":return this.renderPrintPlanet();case"ftp":case"dropbox":case"sendgrid":case"sendgridPrintess":case"kornitx":return this.renderDefault()}return x``}renderSourceSelection(){const e=this.selectedDropshipperId?this.selectedDropshipperId:this.dropshipperIdToSelect;return"siteflow"===this.dropshipperType?x`
        <dt>HP Site Flow Connection:</dt>
        <dd>
          <select @change=${this.onDropshipperChanged}>
            <option value="0">Please select an HP Site Flow connection</option>
            ${this.dropshippers.dropshippers.sort((e,t)=>e.display.localeCompare(t.display)).map(t=>x`<option value=${t.id} .selected=${e===t.id}>${t.display}</option>`)}              
          </select>
        </dd>
      `:x`
      <dt>Dropshipper:</dt>
      <dd>
        <select @change=${this.onDropshipperChanged}>
          <option value="0">Please select a dropshipper</option>
          ${this.dropshippers.dropshippers.sort((e,t)=>e.display.localeCompare(t.display)).map(e=>x`<option value=${e.id}>${e.display}</option>`)}              
        </select>
      </dd>
    `}render(){let e="";if(this.state&&this.inventory&&"kornitx"===this.inventory.type)try{e=JSON.parse(this.state.json).productCode}catch(e){}return x`
      <div class="item">
        <dl>
          ${this.renderSourceSelection()}
          ${this.renderInventorySource()}
        </dl>          
        
        ${0===this.state.dropshipperId?x``:x`
        <wc-ace-editor-pure .text=${this.state.json} .valueChangeCallback=${e=>this.setState(Snobs.setProperty(this.state,"json",e))}></wc-ace-editor-pure>
        `}

        ${e?x`<a target=_blank href="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7BgetEditorUrl%28%29%7D%3Fname%3Dempty%26userId%3Dgy8z44EmLiZ0vrUKrXlWtiZY15D2%23kx-%24%7Be%7D">Create Template For This Product</a><br />`:""}
       

        ${this.dataSheets?x`
        <div>
          ${this.dataSheets.map(e=>x`<a href=${e} target="_blank">${e}</a><br />`)}
        </div>
        `:x``}
        
        <button @click=${()=>this.save(this.state)}> Create </button>
        ${this.variants?x`
        <button @click=${this.createFormFields}> Copy Form Fields to Clipboard </button>
        <button @click=${this.createFormFieldMapping}> Copy Mapping to Clipboard </button>
        <button @click=${this.loadDataSheets}> Load Datasheets </button>
        `:x``}
        
      </div>
      `}};__decorate$_([e$3({attribute:!0,type:Object})],WcCreateProductDefinition.prototype,"state",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"dropshippers",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"inventory",void 0),__decorate$_([e$3({attribute:!0,type:String})],WcCreateProductDefinition.prototype,"dropshipperType",void 0),__decorate$_([e$3({attribute:!0,type:Number})],WcCreateProductDefinition.prototype,"dropshipperIdToSelect",void 0),__decorate$_([e$3({attribute:!1,type:Number})],WcCreateProductDefinition.prototype,"selectedFlyeralarmProductGroupId",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"selectedFlyeralarmProductGroup",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"selectedFlyeralarmProductDefinition",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"attributeSelections",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"attributeValueSelections",void 0),__decorate$_([e$3({attribute:!1,type:Number})],WcCreateProductDefinition.prototype,"variants",void 0),__decorate$_([e$3({attribute:!1,type:Array})],WcCreateProductDefinition.prototype,"dataSheets",void 0),__decorate$_([e$3({attribute:!1,type:Boolean})],WcCreateProductDefinition.prototype,"createLandscapeSizes",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"tcgProductGroups",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"tcgVariants",void 0),__decorate$_([e$3({attribute:!1,type:Number})],WcCreateProductDefinition.prototype,"selectedTcgProductGroupId",void 0),__decorate$_([e$3({attribute:!1,type:Object})],WcCreateProductDefinition.prototype,"selectedTcgVariantIds",void 0),__decorate$_([e$3({attribute:!1,type:Array})],WcCreateProductDefinition.prototype,"printPlanetCatalogProducts",void 0),__decorate$_([e$3({attribute:!1,type:String})],WcCreateProductDefinition.prototype,"selectedPrintPlanetCatalogProductId",void 0),WcCreateProductDefinition=__decorate$_([e$4("wc-create-product-definition")],WcCreateProductDefinition);var __decorate$Z=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipperPage=class extends s$1{constructor(){super(),this.eventObservers=new Map,this.state="dropshippers"}connectedCallback(){super.connectedCallback(),location.hash="#dropshipper"}static get styles(){return i$4`
      .title {
        font-size: 22px;
        font-weight: 500;
        font-family: var(--printess-header-font);
        color: rgb(85, 85, 85);
        margin: 1em 0;
      }
    `}registerEventObserver(e,t){let o=this.eventObservers.get(e);o||(o=[],this.eventObservers.set(e,o)),o.push(t)}distributeEvents(e){const t=this.eventObservers.get(e.type);if(t)for(const o of t)setTimeout(()=>o(e),0)}render(){return x`
      <h1 class="title">Create Product Definition</h1>
      <wc-create-product-definition @product-definition-created=${this.distributeEvents}></wc-create-product-definition>

      <wc-dropshippers></wc-dropshippers>
      <wc-product-definitions .register=${(e,t)=>this.registerEventObserver(e,t)}></wc-product-definitions>
    `}};__decorate$Z([e$3({attribute:!0,type:String})],WcDropshipperPage.prototype,"state",void 0),WcDropshipperPage=__decorate$Z([e$4("wc-dropshipper-page")],WcDropshipperPage);var __decorate$Y=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogNotification=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }

      .modal-header {
        margin-top: 0px;
        align-items: center;
      }

      .modal-content {
        min-height: auto;
      }

      .text-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .delete, .close {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 14px;
        width: 50%;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }
      .delete:hover, .close:hover {
        background-color: var(--printess-pinkHover);
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async acceptInvitation(){const e=await api.acceptInvitation();e instanceof ServerErrorResponse$2&&this.showError(e)}async declineInvitation(){const e=await api.declineInvitation();e instanceof ServerErrorResponse$2&&this.showError(e)}constructor(e){super(),this.backdrop=new WcBackdrop,this.invitation=e}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(e){this.callback&&this.callback(e),"accepted"===e&&this.acceptInvitation(),"declined"===e&&this.declineInvitation(),document.body.removeChild(this.backdrop),document.body.removeChild(this)}render(){const{invitingUser:e}=this.invitation;return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Invitation Request</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog("pending")}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="text-wrapper">
              <p style="font-weight: 700; font-size: 18px; text-align: center; margin-bottom: 0;">${e?e.d:"Printess"}</p>
              <p style="margin: 0; font-weight: 700;">${e?"("+e.e+")":""}</p>
              <p>has invited you to become a team member.</p>
            </div>

            <div class="button-wrapper">
              <button class="close" @click=${()=>this.closeDialog("declined")}>Decline</button>
              <button class="delete" @click=${()=>this.closeDialog("accepted")}>Accept</button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$Y([e$3({type:Object})],WcDialogNotification.prototype,"invitation",void 0),WcDialogNotification=__decorate$Y([e$4("wc-dialog-notification")],WcDialogNotification);const dropshipOrdersStyles$1=i$4`
  .user-orders {
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
    color: #555555;
  }

  .buttons-wrapper {
    color: white;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 35px;
    cursor: pointer;
    margin-top: 30px;
  }
  .option-button {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    flex: 1 0 auto;
    justify-content: center;
    background: var(--printess-blue);
    border-radius: 4px;
    margin-right: 10px;
  }
  .option-button:last-of-type {
    margin-right: 0;
  }
  .option-button:hover {
    background-color: var(--printess-blueHover);
  }

  .filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
  }

  .setting-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .inline {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .template-name-label {
    font-size: 16px;
  }

  .template-name-input {
    margin: 0 10px;
    border: 1px solid #ccc;
    background: rgba(76, 156, 226, 0.1);
  }

  .collapse-icon {
    cursor: pointer;
    margin-right: 10px;
    height: 20px;
  }

  .table-settings {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    height: 35px;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #ADADAD;
    outline: none;
    border-radius: 4px;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
    color: #555555;
  }

  .table-settings:hover {
    background-color: #e2e2e2;
  }

  .input-label {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    flex: 1 0 300px;
    padding-right: 20px;
  }

  label {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
  }

  input {
    padding: 10px 20px;
    background-color: rgba(76, 156, 226, 0.1);
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    margin: 10px 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--printess-text-font);
    height: 40px;
    width: 100%;
    color:  #555555;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #a0a0a0;
    opacity: 1; /* Firefox */
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #a0a0a0;
  }
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #a0a0a0;
  }

  .filter-button {
    padding: 10px;
    border-radius: 4px;
    background-color: var(--printess-blue);
    border: none;
    height: 40px;
  }
  .filter-button:hover {
    background-color: var(--printess-blueHover);
  }

  .expanded-filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px 0 0 20px;
  }

  select {
    padding: 10px 20px;
    margin: 10px 10px 0 0;
    height: 40px;
    width: 100%;
    font-family: var(--printess-text-font);
    font-size: 14px;
    font-weight: 400;
    background-color: rgba(76, 156, 226, 0.1);
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: #555555;
  }

  wc-icon {
    width: 25px;
    height: 25px;
  }

  .filter-icon {
    cursor: pointer;
    height: 22px;
  }

  .table-container {
    margin-top: 10px;
  }

  .hidden {
    display: none;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    .buttons-wrapper {
      flex-wrap: wrap;
      height: auto;
    }
    .option-button {
      margin: 0 10px 10px 0;
      padding: 7px 10px;
      font-size: 12px;
      flex: 1 1 auto;
      height: 17px;
    }
    .option-button:last-of-type {
      margin: 0;
    }

    .collapse-icon {
      width: 20px;
      height: 20px;
    }

    .filter-wrapper {
      margin-top: 20px;
    }

    .filter-button {
      height: 30px;
      padding: 7px 10px;
    }

    .setting-buttons {
      margin-bottom: 10px;
    }

    .setting-buttons button {
      margin-bottom: 5px;
    }

    .table-settings {
      font-size: 12px;
      padding: 7px 10px;
      height: 30px;
      margin-right: 5px;
    }

    .inline {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      margin-top: 20px;
    }

    .template-name-label {
      font-size: 12px;
    }

    .input-label {
      flex: 1 0 150px;
    }
    
    input {
      padding: 0 15px;
      font-size: 12px;
      height: 30px;
    }

    label {
      font-size: 12px;
    }

    select {
      padding: 0 15px;
      font-size: 12px;
      height: 30px;
    }

    wc-icon {
      width: 15px;
      height: 15px;
    }

    .filter-icon {
      cursor: pointer; 
      width: 15px; 
      height: 15px;
    }
  }
`;var __decorate$X=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogDropshipDetails=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal-content {
        min-height: auto;
      }

      input {
        margin-bottom: 10px;
        border-radius: 4px;
      }

      td, th {
        padding: 4px 8px;
      }
    `]}constructor(e,t,o,r){super(),this.mode="order",this.backdrop=new WcBackdrop,this.mode=t,this.dropshipOrder=e,this.productDefinitions=o,this.saasProductDefinitions=r}showDialog(){document.body.appendChild(this.backdrop),document.body.appendChild(this),this.loadDropshipOrderInfo()}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}async loadDropshipOrderInfo(){const e=await api.loadDropshipOrderInfo(this.dropshipOrder.id);e instanceof ServerErrorResponse$2?alert(e):this.state=e}humanReadableMode(){switch(this.mode){case"order":return"Order Details";case"productDefinition":return"Product Definition Details";default:assertNever$1(this.mode)}}renderOrderResult(e){if(!e||!e.result)return"";if(e.result.p)return c(e.result.p,e=>x`
         <a href=${e.u} target="_blank">
          <wc-icon primaryColor="pink" icon="image" style="margin: 0px; margin-right:4px;"></wc-icon>
         </a>
        `);if(e.result.r){const t=[];for(const o in e.result.r)t.push(x`
        <a href=${e.result.r[o]} target="_blank" title=${o}>
         <wc-icon primaryColor="pink" icon="page-inverse" style="margin: 0px; margin-right:4px;"></wc-icon>
        </a>
       `);return t}return""}renderTemplateLink(e){return e?x`<a href="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7BcreateEditorUrl%28e%29%7D" target="_blank">${e.templateName.replace("~published","").replace("~merged","")}</a>`:""}renderState(){return this.state?this.state.linkedOrders?c(this.state.linkedOrders,e=>e.id,e=>{const t=this.state?.orders.filter(t=>t.id==e.orderId)[0],o=e.productDefinitionId;let r="unknown";return this.productDefinitions&&this.productDefinitions[o]?r=this.productDefinitions[o].display:this.saasProductDefinitions&&this.saasProductDefinitions[o]&&(r=this.saasProductDefinitions[o].display),x`
        <tr>
          <td>${t?.id}</td>
          <td>${WcDropshipOrdersPage.formatDropshipId(this.dropshipOrder,e.externalOrderId)}</td>
          <td>${t?.externalOrderId}</td>
          <td>${r}</td>
          <td>${this.renderTemplateLink(t)}</td>
          <td style="display:flex;">${this.renderOrderResult(t)}</td>
          <td>${t?.copies??"unknown"}</td>
          <td>${e.trackingId??""}</td>
          <td>${e.trackingUrl?x`<a target=_blank href=${e.trackingUrl}>${e.trackingUrl}</a>`:""}</td>
        </tr>
        `}):this.state.orders?c(this.state.orders,e=>e.id,e=>{const t=this.dropshipOrder,o=t.productDefinitionId;let r="unknown";return this.productDefinitions&&this.productDefinitions[o]?r=this.productDefinitions[o].display:this.saasProductDefinitions&&this.saasProductDefinitions[o]&&(r=this.saasProductDefinitions[o].display),x`
        <tr>
          <td>${e.id}</td>
          <td>${WcDropshipOrdersPage.formatDropshipId(this.dropshipOrder,t.externalOrderId)}</td>
          <td>${e.externalOrderId}</td>
          <td>${r}</td>
          <td>${this.renderTemplateLink(e)}</td>
          <td style="display:flex;">${this.renderOrderResult(e)}</td>
          <td>${e?.copies??"unknown"}</td>
          <td>${t.trackingId??""}</td>
          <td>${t.trackingPayload?x`<a target=_blank href=${t.trackingPayload}>${t.trackingPayload}</a>`:""}</td>
        </tr>
        `}):"":""}render(){return x`
      <div class="modal">
        <div class="modal-wrapper pink">

          <div class="modal-header">
            <slot name="title" class="modal-title">${this.humanReadableMode()}</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${this.closeDialog}></wc-icon>
          </div>

          <div class="modal-content">
            <table>
              <thead>
                <tr>
                  <th>Printess Order Id</th>
                  <th>Siteflow Order Id</th>
                  <th>External Order Id</th>
                  <th>Product</th>
                  <th>Template</th>
                  <th>Files</th>
                  <th>Quantity</th>
                  <th>Tracking Id</th>
                  <th>Tracking Url</th>
                </tr>
              </thead>
              ${this.renderState()}
            </table>
          </div>

        </div><!-- modal-wrapper pink -->
      </div>
    `}};__decorate$X([e$3({type:String})],WcDialogDropshipDetails.prototype,"mode",void 0),__decorate$X([e$3({type:Object})],WcDialogDropshipDetails.prototype,"dropshipOrder",void 0),__decorate$X([e$3({type:Object})],WcDialogDropshipDetails.prototype,"productDefinitions",void 0),__decorate$X([e$3({type:Object})],WcDialogDropshipDetails.prototype,"saasProductDefinitions",void 0),__decorate$X([e$3({type:Object})],WcDialogDropshipDetails.prototype,"state",void 0),WcDialogDropshipDetails=__decorate$X([e$4("wc-dialog-dropship-details")],WcDialogDropshipDetails);var WcDropshipOrdersPage_1,__decorate$W=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipOrdersPage=WcDropshipOrdersPage_1=class extends s$1{static get styles(){return[dropshipOrdersStyles$1,tableStyles$1,i$4`
      .table-wrapper {
        max-height: 80vh;
      }
    `]}constructor(){super(),this.state={orders:[]}}connectedCallback(){super.connectedCallback(),location.hash="#dropship-orders",this.loadDropshipOrders()}async loadDropshipOrders(){const e=await api.loadDropshipOrders();e instanceof ServerErrorResponse$2?alert(e):this.state=e}dropshipStateToHumanReadable(e){const t=e.state;if("kornitx"===e.dropshipperType)switch(t){case 0:return"Unknown";case 1:return"Received";case 2:return"Unused";case 4:return"In Production";case 8:return"Dispatched";case 32:return"Quality Control Query";case 64:return"Dispatched - Retailer Notified";case 128:return"Cancelled";case 256:case 512:return"On Hold";case 512:return"Sent to Supplier";case 513:return"Received by Supplier";case 515:return"Sent to Shipper";case 516:return"Received by Shipper";case 518:return"Passed Quality Control";case 1001:return"On Hold - Supplier";case 1003:return"Delivered";default:return t.toString()}else if("tcg"===e.dropshipperType)switch(t){case 0:return"Created";case 1e3:return"Generated";case 1001:return"Cancelled";case 1002:return"Refunded";case 1003:return"Partially Refunded";case 99:return"Error";case 1004:return"Draft";case 1005:return"Accepted";case 1006:return"InProgress";case 1:return"Fulfilled";case 1007:return"Pending";default:return t.toString()}switch(t){case 0:return"created";case 1:return"shipped";case 10:return"siteflow: received order";case 11:return"siteflow: print ready";case 98:return"cancelled";case 99:return"failed";default:return"unknown"}}static formatDropshipId(e,t){const o=t||e.externalOrderId;if("kornitx"===e.dropshipperType){const e=o.split(",").join(",/,").split(",");return c(e,e=>e,e=>"/"===e?x` / `:x`<a href="proxy.php?url=https%3A%2F%2Fplatform.kornitx.net%2Fv3%2Fsales%2Forder-manager%23%2Fsection%2Fheader%2Fmode%2Fview%2ForderId%2F%24%7Be%7D" target=_blank>${e}</a>`)}return"siteflow"===e.dropshipperType?x`<a href="proxy.php?url=https%3A%2F%2Fpro.oneflowcloud.com%2Forders%2F%23%2Forder%2Fview%2F%24%7Bo%7D" target=_blank>${o}</a>`:x`${o}`}openDropshipDetails(e,t){new WcDialogDropshipDetails(e,t,this.state.productDefinitions??{},this.state.saasProductDefinitions??{}).showDialog()}showErrorMsg(e){new WcDialogErrorMessage(e).showDialog()}statusHint(e){const t=[];return 1===e.state&&t.push(x`<wc-icon primaryColor="lightgreen" icon="check" style="display: inline-block;"></wc-icon>`),99===e.state&&(t.push(x`<wc-icon primaryColor="pink" icon="warning" @click=${()=>this.showErrorMsg(e.errorMessage??"Unknown Error")} style="cursor: pointer; display: inline-block;"></wc-icon>`),0==this.state.orders.filter(t=>t.orderId===e.orderId&&99!=t.state).length?t.push(x`<wc-icon primaryColor="lightgreen" icon="rotator" style="display: inline-block; cursor: pointer;" @click=${()=>this.resendOrder(e)}></wc-icon>`):t.push(x`<wc-icon primaryColor="gray" icon="check" style="display: inline-block;"></wc-icon>`)),t}renderTracking(e){return"kornitx"===e.dropshipperType&&"partial"==e.trackingId?"Info":e.trackingPayload?x`<a href=${e.trackingPayload} target=_blank>${e.trackingId}</a>`:e.trackingId}async resendOrder(e){"absolutely"===prompt("Are you sure to retry this order? A new dropship order will be created. Enter 'absolutely' to do so.","better not")&&await api.sendOrderToDropshipper(e.orderId)}productDefinitionToHumanReadable(e){let t=e.productDefinitionId.toLocaleString();return this.state.productDefinitions&&this.state.productDefinitions[e.productDefinitionId]?t=this.state.productDefinitions[e.productDefinitionId].display:this.state.saasProductDefinitions&&this.state.saasProductDefinitions[e.productDefinitionId]?t=this.state.saasProductDefinitions[e.productDefinitionId].display:0===e.productDefinitionId&&(t="Multiple Items"),t}render(){return x`
    <wc-topic-header title="Dropship Orders"></wc-topic-header>
    <div class="table-wrapper">
      <table class="layout display responsive-table">
        <thead>
          <tr>
            <th></th>
            <th>Created</th>
            <th>Dropship Order Id</th>
            <th>Printess Order Id</th>
            <!-- <th>External Order Id</th> -->
            <th>Product Definition</th>
               <!-- <th>Dropship Data Id</th> -->
            <th>State</th>
            <th>Quantity</th>
            <th>Tracking</th>
            <!-- <th>Preview</th> -->
            <th>Callback Payload</th>
            <!-- <th>TrackingPayload</th> -->
            <th>Error Message</th>
          </tr>
        </thead>
        <tbody>
          ${this.state.orders.map(e=>{const t=new Date,o=e.callbackPayload?JSON.parse(e.callbackPayload):{};return x`
            <tr>
              <td align="right">${this.statusHint(e)}</td>
              <!-- <td>${e.id}</td> -->
              <td>${formatDistance(new Date(e.createdOn),t,{addSuffix:!0})}</td>
              <td>${WcDropshipOrdersPage_1.formatDropshipId(e)}</td>
              <td style="cursor: pointer;" @click=${()=>this.openDropshipDetails(e,"order")}>${e.orderId}</td>
              <!-- <td>${e.externalOrderId}</td> -->
              <td style="cursor: pointer;" @click=${()=>this.openDropshipDetails(e,"productDefinition")}>${this.productDefinitionToHumanReadable(e)}</td>
              <!--<td>${e.dropshipDataId}</td> -->
              <td>${this.dropshipStateToHumanReadable(e)}</td>
              <td>${e.quantity}</td>
              <td>${this.renderTracking(e)}</td>
              <!-- <td>${e.trackingPayload}</td> -->
              <!-- <td>${o.thumbnailUrl?x`<img src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Bo.thumbnailUrl%7D" />`:x``}</td> -->
              <td>${e.callbackPayload}</td>
              <td>${e.errorMessage}</td>
            </tr>
            `})}
        </tbody>
      </table>
    </div>
    `}};__decorate$W([e$3({attribute:!1,type:Object})],WcDropshipOrdersPage.prototype,"state",void 0),WcDropshipOrdersPage=WcDropshipOrdersPage_1=__decorate$W([e$4("wc-dropship-orders-page")],WcDropshipOrdersPage);class PinnedUsersNobs extends NobsBase{constructor(e,t){if(super(e,t),!(e instanceof Nobs||t instanceof PinnedUsersNobs)){const t=e;this.pinnedUsers=t.pinnedUsers??[],this.whitelistUsers=t.whitelistUsers??[]}}toDto(){return{pinnedUsers:this.pinnedUsers,whitelistUsers:this.whitelistUsers}}}var __decorate$V=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogSendInvitation=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        padding-top: 100px;
      }

      .modal-content {
        min-height: auto;
        max-height: 50vh;
        overflow: visible;
      }

      .input-grid {
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-gap: 10px;
        align-items: center;
      }

      input {
        color: #555;
      }

      input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 1.2em;
        width: 1.2em;
        border-radius: 50em;
        background: url("https://pro.fontawesome.com/releases/v5.10.0/svgs/light/times.svg") no-repeat 50% 50%;
        background-size: contain;
        opacity: 0;
        pointer-events: none;
      }

      input[type="search"]:focus::-webkit-search-cancel-button, input[type="search"]:hover::-webkit-search-cancel-button {
        opacity: .3;
        cursor: pointer;
        pointer-events: all;
      }

      .directory-input {
        background-color: transparent;
        padding: 0;
        outline: none;
        border: none;
        margin: 0;
      }
      .directory-input:hover {
        border: none;
        background-color: transparent;
      }

      .role-input {
        padding: 10px;
        font-size: 14px;
        font-weight: 400;
        width: calc(100% - 22px);
        border: 1px solid rgb(118, 118, 118);
        height: 16px;
        line-height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .role-input:hover, input:hover {
        background-color: rgba(208, 4, 155, 0.04);
      }

      .dropdown-input {
        position: relative;
      }

      .dropdown-container {
        clear: both;
        position: absolute;
        left: 0px;
        top: 38px;
        width: calc(100% - 2px);
        height: 0px;
        z-index: 999;
        max-height: 40vh;
        overflow-y: auto;
        border: 1px solid rgb(204, 204, 204);
        transition: height 0.4s ease 0s, visibility 0.3s ease 0s;
        background-color: white;
        overflow: hidden;
      }

      .directory-dropdown {
        max-height: 28vh;
      }

      .dropdown-item {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
        font-size: 14px;
      }
      .dropdown-item:last-of-type {
        border: none;
      }

      .dropdown-item:hover {
        background-color: var(--printess-pink);
        color: white!important;
      }

      .submit {
        grid-column: 1/3;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          min-width: 80vw;
        }

        .input-grid {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }

        .dropdown-input {
          width: 100%;
        }
      }
    `]}constructor(e){super(),this.showDropdown="none",this.showUserLevel=!1,this.errorMsg="",this.directories=[],this.directorySearch=[],this.directory="Full Access",this.whitelistEntry={name:"",email:"",userLevel:"User",pinnedDirectoryId:0},this.backdrop=new WcBackdrop,this.directories=e,this.directorySearch=e}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}setName(e){this.whitelistEntry.name=e.target.value}setEmailAddress(e){this.whitelistEntry.email=e.target.value}validateInput(){const e=this.whitelistEntry.name,t=this.whitelistEntry.email;return e||-1!==t.indexOf("@")?e?-1===t.indexOf("@")?(this.errorMsg="Please enter a valid E-Mail Address!",-1):(this.errorMsg="",1):(this.errorMsg="To invite a member please fill in a Name!",-1):(this.errorMsg="To invite a member please fill in Name and E-Mail Address!",-1)}async sendInvitation(){if(-1===this.validateInput())return;this.closeDialog();const e=this.whitelistEntry.userLevel.replace(" ","")[0].toLowerCase()+this.whitelistEntry.userLevel.replace(" ","").slice(1),t=await api.addWhitelistEntry({...this.whitelistEntry,userLevel:e});if(t instanceof ServerErrorResponse$2)this.showError(t),alert(t.message);else{if(!this.callback)return;this.callback(!0,this.whitelistEntry.name,this.whitelistEntry.email,this.whitelistEntry.userLevel,this.whitelistEntry.pinnedDirectoryId)}}sendInvitationWithEnter(e){"Enter"!==e.key&&13!==e.which||(e.preventDefault(),this.sendInvitation())}setRole(e){this.whitelistEntry.userLevel=e,this.showDropdown="none"}setPinnedDirectoryId(e,t){this.whitelistEntry.pinnedDirectoryId=e,this.directory=t,this.showDropdown="none",this.folderInput.value=t}toggleDropdown(e){this.showDropdown===e?this.showDropdown="none":this.showDropdown=e}getDirectoryList(e){this.directorySearch=this.directories.filter(t=>t.name.toLowerCase().includes(e.target.value.toLowerCase())),this.showDropdown="pid"}formatUserLevel(e){switch(e){case"owner":return"Owner";case"externalDesigner":return"External Designer";case"buyersideUser":return"Buyerside User";default:return"User"}}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Invite Team Member</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="input-grid">
              <!-- @keyup=${e=>this.sendInvitationWithEnter(e)} -->

              <div style="color: red; grid-column: 1/3; display: ${this.errorMsg?"block":"none"}"> ${this.errorMsg}</div>

              <label>Name:</label>
              <input type="text" id="name" name="name" placeholder="Name" required
                @change=${e=>this.setName(e)}
                @click=${()=>this.toggleDropdown("none")}
              >

              <label>E-Mail Address:</label>
              <input type="email" id="email" name="email" placeholder="E-Mail Address" required
                @change=${e=>this.setEmailAddress(e)}
                @click=${()=>this.toggleDropdown("none")}
              >

              <label>User Level:</label>
              <div class="dropdown-input">
                <div class="role-input" @click=${()=>this.toggleDropdown("userLevel")}>
                  <span>${this.formatUserLevel(this.whitelistEntry.userLevel)}</span>
                  <wc-icon icon="angle-down-light" primaryColor="gray" style="width: 30px; height: 30px; margin: 0px;"></wc-icon>
                </div>
                <div class="dropdown-container" style="height: ${"userLevel"===this.showDropdown?"158px":"0px"}; visibility: ${"userLevel"===this.showDropdown?"visible":"hidden"}">
                  <div class="dropdown-item" @click=${()=>this.setRole("user")}>User</div>
                  <div class="dropdown-item" @click=${()=>this.setRole("owner")}>Owner</div>
                  <div class="dropdown-item" @click=${()=>this.setRole("externalDesigner")}>External Designer</div>
                  <div class="dropdown-item" @click=${()=>this.setRole("buyersideUser")}>Buyerside User</div>
                </div>
              </div>

              <label>Select Folder:</label>
              <div class="dropdown-input">
                <div class="role-input">
                  <input type="search"
                    id="directory-name-input"
                    class="directory-input"
                    value=${this.directory}
                    @input=${e=>this.getDirectoryList(e)}
                  >
                  <wc-icon
                    icon="angle-down-light"
                    primaryColor="gray"
                    style="width: 30px; height: 30px; margin: 0px;"
                    @click=${()=>this.toggleDropdown("pid")}
                  ></wc-icon>
                </div>
                <div class="dropdown-container directory-dropdown" style="overflow: auto; height: ${"pid"===this.showDropdown?"auto":"0px"}; visibility: ${"pid"===this.showDropdown?"visible":"hidden"}">
                  ${this.directorySearch?.map(e=>x`
                    <div
                      class="dropdown-item"
                      style=${"Full Access"===e.name?"font-weight: bold; color: var(--printess-red);":""}
                      @click=${()=>this.setPinnedDirectoryId(e.id,e.name)}
                    >
                      ${e.name}
                    </div>
                  `)}
                </div>
              </div>

              <button @click=${this.sendInvitation} class="submit">Send Invitation</button>
            </div>
          </div>
        </div>

      </div>
    `}};__decorate$V([e$3({type:String})],WcDialogSendInvitation.prototype,"showDropdown",void 0),__decorate$V([e$3({type:Boolean})],WcDialogSendInvitation.prototype,"showUserLevel",void 0),__decorate$V([e$3({type:String})],WcDialogSendInvitation.prototype,"errorMsg",void 0),__decorate$V([e$3({type:Array})],WcDialogSendInvitation.prototype,"directories",void 0),__decorate$V([e$3({type:Array})],WcDialogSendInvitation.prototype,"directorySearch",void 0),__decorate$V([e$3({type:String})],WcDialogSendInvitation.prototype,"directory",void 0),__decorate$V([e$3({type:Object})],WcDialogSendInvitation.prototype,"whitelistEntry",void 0),__decorate$V([i$1("input#directory-name-input")],WcDialogSendInvitation.prototype,"folderInput",void 0),WcDialogSendInvitation=__decorate$V([e$4("wc-dialog-send-invitation")],WcDialogSendInvitation);var __decorate$U=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogRemovePinnedUser=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal-wrapper {
        height: auto;
        width: 65vmin;
      }

      .modal-content {
        padding-bottom: 35px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: auto;
        overflow: unset;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
      }

      .side-note {
        font-size: 14px;
        font-family: var(--printess-text-font);
        padding: 0px 20px;
        margin: 20px;
        border-top: 3px solid var(--dialog-warning-red);
        border-bottom: 3px solid var(--dialog-warning-red);
        border-radius: 4px;
        text-align: center;
        width: 90%;
        line-height: 25px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          width: 90vmin;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async removeTeamMember(e){const t=await api.removePinnedUser(e);t instanceof ServerErrorResponse$2?this.showError(t):this.closeDialog()}async removeWhitelistMember(e){const t=await api.removeWhitelistEntry({email:e.email});t instanceof ServerErrorResponse$2?this.showError(t):this.closeDialog()}connectedCallback(){super.connectedCallback()}constructor(e,t){super(),this.removeMember=!1,this.backdrop=new WcBackdrop,this.pinnedUser=e,this.user=t}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this),this.callback&&this.callback(this.removeMember)}cancelRemove(){this.removeMember=!1,this.closeDialog()}confirmRemove(){switch(this.removeMember=!0,this.pinnedUser){case"pinned":{const e=this.user;this.removeTeamMember(e.id);break}case"whitelisted":{const e=this.user;this.removeWhitelistMember(e);break}default:assertNever$1(this.pinnedUser)}}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Remove Team Member</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <p style="font-size: 16px;">Do you really want to remove the following team member:</p>
            <p style="font-weight: 700; font-size: 18px;">${this.user.email}</p><!-- ${"pinned"===this.pinnedUser?"this.user.name - ":""}  -->

            <div class="side-note">
              <p>
              * By removing a team member you will only revoke the team members login. All created templates and data will stay within your account.
              The now free seat of the team member can either get assigned to a different team member or removed for the following month.
              </p>
            </div>
            <div class="button-wrapper">
              <button class="submit" @click=${this.confirmRemove} style="margin-right: 10px;">Remove</button>
              <button class="submit" @click=${this.cancelRemove}>Cancel</button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$U([e$3({type:Boolean})],WcDialogRemovePinnedUser.prototype,"removeMember",void 0),__decorate$U([e$3({type:String})],WcDialogRemovePinnedUser.prototype,"pinnedUser",void 0),__decorate$U([e$3({type:Object})],WcDialogRemovePinnedUser.prototype,"user",void 0),WcDialogRemovePinnedUser=__decorate$U([e$4("wc-dialog-remove-pinned-user")],WcDialogRemovePinnedUser);var __decorate$T=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogCancelSeat=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }

      .modal-wrapper {
        width: 65vmin;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
      }

      .seats-wrapper {
        text-align: center;
        margin: 20px 0 40px;
      }

      .side-note {
        font-size: 14px;
        font-family: var(--printess-text-font);
        padding: 10px 20px;
        margin: 20px 0;
        border-top: 3px solid var(--dialog-warning-red);
        border-bottom: 3px solid var(--dialog-warning-red);
        border-radius: 4px;
        text-align: center;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }

      .delete, .close {
        font-family: var(--printess-text-font);
        font-weight: 400px;
        background-color: var(--printess-pink);
        margin: 20px 10px 0px 0px;
        padding: 10px 20px;
        font-size: 14px;
        width: 50%;
        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
      }

      .close {
        margin: 20px 0px 0px 0px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          width: 90vmin;
        }
      }
    `]}connectedCallback(){super.connectedCallback()}constructor(){super(),this.backdrop=new WcBackdrop}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(e){this.callback&&this.callback(e),document.body.removeChild(this.backdrop),document.body.removeChild(this)}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Remove Seat</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog(!1)}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="seats-wrapper">
              <p>Do you really want to remove a seat?</p>

            </div>
            <div class="side-note">
              <p>
                * When you remove a seat it will not get invoiced in the following month.
                If you would like to reclaim a removed seat simply add it via the Buy Additional Seats button again.
              </p>
            </div>
            <div class="button-wrapper">
              <button class="submit delete" @click=${()=>this.closeDialog(!0)}>Remove</button>
              <button class="submit close" @click=${()=>this.closeDialog(!1)}>Cancel</button>
            </div>
          </div>
        </div>
      </div>
    `}};WcDialogCancelSeat=__decorate$T([e$4("wc-dialog-cancel-seat")],WcDialogCancelSeat);var __decorate$S=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPinnedUser=class extends s$1{constructor(){super(...arguments),this.includedSeats=0,this.additionalSeats=0,this.usedSeats=0,this.showDropdown="none",this.directories=[],this.directorySearch=[],this.saving=!1,this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[accountStyles,i$4`
      dl {
        grid-template-columns: 80px 1fr;
        overflow: auto;
      }
      dt {
        justify-content: center;
      }
      dd.used-seat {
        display: grid;
        grid-template-columns: 1fr 2fr 2fr 2fr auto;
      }
      .table-column {
        display: flex;
        justify-content: left;
        align-items: center;
        height: 35px;
        white-space: nowrap;
        gap: 10px;
      }
      .table-column.header {
        padding: 7px 10px;
      }

      .disabled {
        background-color: rgb(224, 175, 210) !important;
        cursor: not-allowed;
      }
      .user-icon {
        height: 25px;
        width: 20px;
        cursor: default;
      }
      .close-icon {
        height: 25px;
      }
      .status-icon {
        position: absolute;
        bottom: -10px;
        left: -10px;
        width: 15px;
        cursor: default;
      }
      .invite-link {
        color: var(--printess-headlineColor);
        cursor: pointer;
      }
      .invite-link:hover {
        color: var(--printess-headlineColorHover);
      }

      .info-text {
        padding: 20px;
      }

      .link-to-plan {
        text-decoration: none;
        color: var(--printess-pink);
        cursor: pointer;
      }

      .btn-input-wrapper {
        display: flex;
        width: 55%;
        justify-content: space-between;
        align-items: center;
      }

      .dropdown-wrapper {
        position: relative;
        background: white;
        border-radius: 4px;
        width: calc(100% - 10px);
        min-width: 140px;
      }

      .input-wrapper {
        background: white;
        border-radius: 4px;
        width: calc(100% - 10px);
      }

      .card-input {
        color: rgb(85, 85, 85);
        font-family: var(--printess-text-font);
        font-size: 14px;
        outline: none;
        border: 1px solid rgb(204, 204, 204);
        background-color: rgba(208, 4, 155, 0.04);
        padding: 7px 10px;
        border-radius: 4px;
        height: 19px;
        display: flex;
        align-items: center;
        white-space: nowrap;
      }

      input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 1.2em;
        width: 1.2em;
        border-radius: 50em;
        background: url("https://pro.fontawesome.com/releases/v5.10.0/svgs/light/times.svg") no-repeat 50% 50%;
        background-size: contain;
        opacity: 0;
        pointer-events: none;
      }

      input[type="search"]:focus::-webkit-search-cancel-button, input[type="search"]:hover::-webkit-search-cancel-button {
        opacity: .3;
        cursor: pointer;
        pointer-events: all;
      }

      .directory-input {
        background-color: transparent;
        border: none;
        font-size: 14px;
        font-family: var(--printess-text-font);
        color: #555;
        width: 100%;
        height: 35px;
        outline: none;
      }

      .dropdown {
        position: relative;
        height: 19px;
        line-height: 19px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .dropdown-container {
        clear: both;
        position: absolute;
        left: 0px;
        top: 34px;
        width: calc(100% - 2px);
        height: 0px;
        z-index: 999;
        border-radius: 4px;
        max-height: 40vh;
        overflow: hidden;
        border: 1px solid rgb(204, 204, 204);
        transition: height 0.4s ease 0s, visibility 0.3s ease 0s;
        background-color: white;
      }

      .directory-dropdown {
        max-height: 28vh;
      }

      .dropdown-item {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgb(204, 204, 204);
        cursor: pointer;
        font-size: 14px;
        text-align: left;
      }
      .dropdown-item:last-of-type {
        border: none;
      }

      .dropdown-item:hover {
        background-color: var(--printess-pink);
        color: white!important;
      }

      .dropdown-icon {
        width: 30px;
        height: 30px
      }

      .invite-member {
        width: 120px;
      }

      .remove-btn {
        display: flex;
        justify-content: center;
        height: 27px;
        margin-left: 10px;
        flex: 1 0;
        white-space: nowrap;
      }

      button:hover {
        background-color: var(--printess-pinkHover);
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        dl {
          margin-top: 0px;
        }
        input.directory-input {
          height: unset;
          font-size: 12px;
        }
        #team-member-list {
          grid-template-columns: 40px calc(50% - 40px) 80px calc(50% - 80px);
        }
        .info-text {
          font-size: 12px;
        }
        .mobile-column {
          flex-direction: column;
          align-items: flex-start;
          grid-template-columns: 1fr!important;
        }
        .btn-input-wrapper  {
          width: 100%;
          margin-top: 10px;
        }
        .card-input {
          font-size: 12px;
          padding: 5px 7px;
        }
        .dropdown {
          height: 17px;
          line-height: 17px;
        }
        .dropdown-wrapper {
          width: unset;
        }
        .dropdown-container {
          top: 28px;
        }
        .dropdown-item {
          font-size: 12px;
        }
        .dropdown-icon {
          width: 25px;
          height: 25px
        }
        .mobile-grid {
          grid-template-columns: 1fr auto auto auto 1fr!important;
          padding-right: 20px;
        }
        .remove-btn, .invite-member {
          margin: 0 10px 0 0;
          font-size: 12px;
          height: unset;
          width: calc(100% - 10px);
        }
        .close-icon {
          min-width: 20px;
        }
      }
    `]}setState(e){this.state=new PinnedUsersNobs(e,this.state)}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadDirectories(){const e=await api.loadDirectories({userId:""});e instanceof ServerErrorResponse$2?this.showError(e):(this.directories=this.getDirectories(e,[]),this.directorySearch=this.directories)}getDirectories(e,t,o=!0){return t.push({name:e.n||"Full Access",id:e.id}),null!==e.c&&e.c.length&&o&&e.c.forEach(e=>this.getDirectories(e,t,!1)),t}async loadPlanInfo(){const e=await api.loadPlans();e instanceof ServerErrorResponse$2?this.showError(e):this.plans=e.plans}async loadTeamMembers(){const e=await api.loadPinnedUsers();if(e instanceof ServerErrorResponse$2)this.showError(e);else{const t=new Nobs;t.setProperty(this.state,"pinnedUsers",e),this.setState(t),this.usedSeats+=e.length}}async updateTeamMember(e){const t=await api.updatedPinnedUser(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async loadWhitelistMembers(){const e=await api.loadWhitelist();if(e instanceof ServerErrorResponse$2)this.showError(e);else{const t=new Nobs;t.setProperty(this.state,"whitelistUsers",e),this.setState(t),this.usedSeats+=e.length}}async loadUserSeatsCount(){const e=await api.loadUserBookedInfo();e instanceof ServerErrorResponse$2?this.showError(e):(this.includedSeats=e.bookedPlan.includedSeats,this.additionalSeats=e.bookedSeats,this.bookedPlan=e.bookedPlan)}connectedCallback(){super.connectedCallback(),this.state=new PinnedUsersNobs({pinnedUsers:[],whitelistUsers:[]}),this.loadPlanInfo(),this.loadTeamMembers(),this.loadWhitelistMembers(),this.loadUserSeatsCount(),this.loadDirectories(),window.addEventListener("resize",this._handleResize)}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}removeTeamMember(e){new WcDialogRemovePinnedUser("pinned",e).showDialog(t=>{if(t){const t=new Nobs;t.setProperty(this.state,"pinnedUsers",this.state.pinnedUsers.filter(t=>t.id!==e.id)),this.setState(t),this.usedSeats--}})}async makeNewOwner(e){if("sure"===prompt(`Are you sure to set ${e.displayName} as new account owner? Enter sure to proceed.`,"better not")){const t=await api.changeAccountOwner(e.id);t instanceof ServerErrorResponse$2?alert(t.message):alert("Account owner changed.")}}removeWhitelistMember(e){new WcDialogRemovePinnedUser("whitelisted",e).showDialog(t=>{if(t){const t=new Nobs;t.setProperty(this.state,"whitelistUsers",this.state.whitelistUsers.filter(t=>t.email!==e.email)),this.setState(t),this.usedSeats--}})}toggleDropdown(e){this.showDropdown===e?this.showDropdown="none":this.showDropdown=e}setOption(e){const t=this.state.pinnedUsers,o=t.findIndex(t=>t.id===e.id);t.splice(o,1,e),this.showDropdown="none";const r=new Nobs;r.setProperty(this.state,"pinnedUsers",t),this.setState(r)}openInvitationDialog(){new WcDialogSendInvitation(this.directories).showDialog((e,t,o,r,i)=>{if(e){const e=new Nobs;e.setProperty(this.state,"whitelistUsers",[...this.state.whitelistUsers,{name:t,email:o,pinnedUserId:"",userLevel:r,pinnedDirectoryId:i}]),this.setState(e),this.usedSeats++,this.requestUpdate()}})}openBookSeatsDialog(){new WcDialogBookSeats(this.additionalSeats,this.bookedPlan.isTrial).showDialog(e=>{this.additionalSeats+=e})}async cancelSeats(){const e=await api.bookSeats(this.additionalSeats-1);e instanceof ServerErrorResponse$2&&this.showError(e)}removeSeat(){(new WcDialogCancelSeat).showDialog(e=>{e&&(this.cancelSeats(),this.additionalSeats-=1)})}saveUpdates(e,t){this.saving=!0,this.currentIdx=t,window.setTimeout(()=>{this.updateTeamMember(e),this.saving=!1},1500)}getDirectoryList(e,t){this.directorySearch=this.directories.filter(t=>t.name.toLowerCase().includes(e.target.value.toLowerCase())),this.showDropdown="pid"+t}currentDirectoryValue(e){if(this.state.pinnedUsers){const t=this.state.pinnedUsers[e].pinnedDirectoryId,o=this.directories.filter(e=>e.id===t)[0]?.name;return o||"Full Access"}return""}render(){const e=this.includedSeats+this.additionalSeats,t=Math.max(0,this.includedSeats-this.usedSeats),o=t>=0?this.additionalSeats:this.additionalSeats-t,r=this.bookedPlan?.name,i={user:"User",owner:"Owner",externalDesigner:"External Designer",buyersideUser:"Buyerside User"};return x`
      <div class="card pink">
        <div class="table-header" style=${config.isMobile?"":"padding: 0; height: 50px;"}>
          ${config.isMobile||0===e||"Pay as you go"===r?x`
            <h3 class="title" style=${0!==e||config.isMobile?"":"padding-left: 20px"}>Member List</h3>
          `:x`
            <dl style="font-size: 18px;">
              <dt class="header">Status</dt>
              <dd class="used-seat header">
                  <div class="table-column" style="padding: 0 10px;">Name</div>
                  <div class="table-column">Email Address</div>
                  <div class="table-column">User Level</div>
                  <div class="table-column">Folders</div>
                  <div class="table-column"></div>
              </dd>
            </dl>
          `}
        </div>
        <div class="table-body">
          ${"Pay as you go"===r?x`
            <div class="info-text">
              If you would like to add additional team members you first need to upgrade your account to a paid plan
              <a href="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%23subscription" class="link-to-plan">here</a>.
            </div>
          `:x`
            <dl id="team-member-list">

            <!-- PINNED USERS -->
            ${this.state&&this.state.pinnedUsers&&this.state.pinnedUsers.map((e,t)=>x`
              <dt>
                <div style="position: relative; cursor: default;" title="Active Member">
                  <wc-icon primaryColor="gray" icon="user-solid" class="user-icon"></wc-icon>
                  <wc-icon primaryColor="green" icon="circle-check-solid" class="status-icon"></wc-icon>
                </div>
              </dt>
              <dd class="mobile-column used-seat">
                <div class="table-column">${e.displayName?e.displayName:"Team Member"}</div>
                <div class="table-column">${e.email}</div>

                <!-- USER LEVEL -->
                <div class="table-column">
                  <div class="dropdown-wrapper">
                    <div class="dropdown card-input" @click=${()=>this.toggleDropdown("userLevel"+t)}>
                      <span>${i[e.userLevel]}</span>
                      <wc-icon icon="angle-down-light" primarycolor="gray" class="dropdown-icon"></wc-icon>
                    </div>
                    <div class="dropdown-container" style="height: ${this.showDropdown==="userLevel"+t?"168px":"0px"}; visibility: ${this.showDropdown==="userLevel"+t?"visible":"hidden"}">
                      ${Object.keys(i).map(t=>x` <div class="dropdown-item" @click=${()=>this.setOption({...e,userLevel:t})}>${i[t]}</div>`)}
                    </div>
                  </div>
                </div>

                <!-- FOLDERS -->
                <div class="table-column">
                  <div class="dropdown-wrapper">
                    <div class="dropdown card-input">
                      <input type="search"
                        id="directory-name-input"
                        class="directory-input"
                        .value=${this.currentDirectoryValue(t)}
                        @input=${e=>this.getDirectoryList(e,t)}
                        @change=${t=>this.setOption({...e,pinnedDirectoryId:this.directories.filter(e=>e.name===t.target.value)[0]?.id})}
                      >
                      <wc-icon icon="angle-down-light" primarycolor="gray" class="dropdown-icon" @click=${()=>this.toggleDropdown("pid"+t)}></wc-icon>
                    </div>
                    <div class="dropdown-container directory-dropdown" style="overflow: auto; height: ${this.showDropdown==="pid"+t?"auto":"0px"}; visibility: ${this.showDropdown==="pid"+t?"visible":"hidden"}">
                      ${this.directorySearch?.map(t=>x`
                        <div
                          class="dropdown-item"
                          @click=${()=>this.setOption({...e,pinnedDirectoryId:t.id})}
                          style=${"Full Access"===t.name?"font-weight: bold; color: var(--printess-red);":""}
                        >
                          ${t.name}
                        </div>
                      `)}
                    </div>
                  </div>
                </div>

                <!-- SAVE & REMOVE BUTTONS -->
                <div class="table-column">
                  <wc-button
                    caption="Save"
                    color="pink" size="sm"
                    .loading=${this.saving&&this.currentIdx===t}
                    loadingText="Saving"
                    @click=${()=>this.saveUpdates({userId:e.id,userLevel:e.userLevel,pinnedDirectoryId:e.pinnedDirectoryId},t)}
                  ></wc-button>
                  <wc-button caption="Remove" size="sm" color="pink" @click=${()=>this.removeTeamMember(e)}></wc-button>
                  <wc-button caption="Set As Account Owner" size="sm" color="pink" @click=${()=>this.makeNewOwner(e)}></wc-button>
                </div>
              </dd>
            `)}


            <!-- WHITELISTED USERS -->
            ${this.state?.whitelistUsers?.map(e=>x`
              <dt>
                <div style="position: relative;" title="Invitation pending">
                  <wc-icon primaryColor="gray" icon="user-solid" class="user-icon"></wc-icon>
                  <wc-icon primaryColor="warning" icon="circle-ellipsis-solid" class="status-icon"></wc-icon>
                </div>
              </dt>
              <dd class="mobile-column used-seat">
                <div class="table-column">${e.name||"[Pending]"}</div>
                <div class="table-column">${e.email}</div>

                <!-- USER LEVEL -->
                <div class="table-column">${e.userLevel[0].toUpperCase()+e.userLevel.slice(1)||"User"}</div>

                <!-- FOLDERS -->
                <div class="table-column">${this.directories?.filter(t=>t.id===e.pinnedDirectoryId)[0]?.name||"Full Access"}</div>

                <!-- REMOVE BUTTON -->
                <div class="table-column">
                  <wc-button caption="Remove" size="sm" color="pink" margin="0 0 0 10px" @click=${()=>this.removeWhitelistMember(e)}></wc-button>
                </div>
              </dd>
            `)}

            <!-- EMTPY INCLUDED SEATS -->
            ${t>0?Array.from(Array(t).keys()).map(()=>x`
              <dt>
                <wc-icon class="close-icon" primaryColor="lightgray" icon="user-solid" class="user-icon" title="Empty Seat"></wc-icon>
              </dt>
              <dd class="mobile-grid">
                <wc-button caption="Invite Member" size="sm" color="pink" @click=${this.openInvitationDialog}></wc-button>
              </dd>
            `):""}
            <!-- EMTPY ADDITIONAL SEATS -->
            ${o>0?Array.from(Array(o).keys()).map(()=>x`
              <dt>
                <wc-icon primaryColor="lightgray" icon="user-solid" class="user-icon" title="Empty Seat"></wc-icon>
              </dt>
              <dd class="used-seat mobile-grid">
                <wc-button caption="Invite Member" size="sm" color="pink" @click=${this.openInvitationDialog}></wc-button>

                <div></div>
                <div></div>
                <div></div>

                <div class=${config.isMobile?"":"table-column"}>
                  <wc-button caption="Remove Seat" size="sm" color="pink" margin="0 0 0 10px" @click=${this.removeSeat}></wc-button>
                </div>
              </dd>
            `):""}
            </dl>
            ${"Shopify"==currentUser.displayName?x``:x`
              <div class="bottom-info">
                Need more seats? Add seats to your <span @click=${()=>location.hash="subscription"} class="link-to-plan">subscription</span>.
              </div>
            `}
          `}
        </div>
      </div>
    `}};__decorate$S([e$3({type:Object})],WcPinnedUser.prototype,"state",void 0),__decorate$S([e$3({type:Array})],WcPinnedUser.prototype,"plans",void 0),__decorate$S([e$3({type:Object})],WcPinnedUser.prototype,"bookedPlan",void 0),__decorate$S([e$3({type:Number})],WcPinnedUser.prototype,"includedSeats",void 0),__decorate$S([e$3({type:Number})],WcPinnedUser.prototype,"additionalSeats",void 0),__decorate$S([e$3({type:Number})],WcPinnedUser.prototype,"usedSeats",void 0),__decorate$S([e$3({type:String})],WcPinnedUser.prototype,"showDropdown",void 0),__decorate$S([e$3({type:Array})],WcPinnedUser.prototype,"directories",void 0),__decorate$S([e$3({type:Array})],WcPinnedUser.prototype,"directorySearch",void 0),__decorate$S([e$3({type:Boolean})],WcPinnedUser.prototype,"saving",void 0),__decorate$S([e$3({type:Number})],WcPinnedUser.prototype,"currentIdx",void 0),WcPinnedUser=__decorate$S([e$4("wc-pinned-user")],WcPinnedUser);var __decorate$R=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcTeamMembers=class extends s$1{constructor(){super(...arguments),this.debug="localhost"===window.location.hostname||window.location.href.indexOf("debug=1")>0||!0===window.printessDebug}static get styles(){return[accountStyles,i$4`
        button.settings.red {
          border: none;
        }

        button.settings.red:hover {
          background-color: var(--printess-redHover);
        }

        .flex {
          display: flex;
          flex-direction: row;
        }

        .warning-title {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20px;
          color: var(--printess-red);
          font-size: 18px;
          font-weight: 700;
        }
        .warning-text {
          border-left: 3px solid var(--printess-red);
          border-right: 3px solid var(--printess-red);
          border-top: 1px solid var(--printess-red);
          border-bottom: 1px solid var(--printess-red);
          border-radius: 4px;
          padding: 0 20px;
          margin: 20px 0;
        }

        @media (max-width: ${config.mobileDeviceWidth}px) {
          .team-member-info {
            font-size: 12px;
          }
          .warning-title {
            margin-top: 20px;
            margin-right: 0;
            font-size: 14px;
          }
          .warning-text > p {
            font-size: 12px;
          }
        }
    `]}connectedCallback(){super.connectedCallback(),location.hash="#team-members"}render(){return window.scrollTo({top:0,behavior:"smooth"}),x`
      <div class="account-page">
        <wc-topic-header title="Team Members"></wc-topic-header>
        <div class="team-member-info">
          <span style="font-weight: bold;">Owner: </span>Full access to all templates and account functions.
          <br><br>
          <span style="font-weight: bold;">User: </span>Can create, open, save, publish and delete templates. Can log into account to see Dashboard and Jobs.
          <br><br>
          <span style="font-weight: bold;">External Designer: </span>Can create, open and save templates. No access to account.
          <br><br>
          <span style="font-weight: bold;">Buyerside User: </span>Can only view templates in buyerside view. No access to account.
          <br><br>
          <span style="font-weight: bold;">Select Folder: </span>A team member can be limited to only see a certain folder within your repository. This is useful if you would e.g. like to restrict an external designer to not view your complete repository.
        </div>
        <wc-pinned-user></wc-pinned-user>
      </div>
    `}};WcTeamMembers=__decorate$R([e$4("wc-team-members")],WcTeamMembers);const dropshipOrdersStyles=i$4`
  .user-orders {
    font-family: var(--printess-text-font);
    color: #555555;
  }

  .topic {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--printess-header-font);
    color: #555555;
  }

  .buttons-wrapper {
    color: white;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 35px;
    cursor: pointer;
    margin-top: 30px;
  }
  .option-button {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    flex: 1 0 auto;
    justify-content: center;
    background: var(--printess-blue);
    border-radius: 4px;
    margin-right: 10px;
  }
  .option-button:last-of-type {
    margin-right: 0;
  }
  .option-button:hover {
    background-color: var(--printess-blueHover);
  }

  .filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
  }

  .setting-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .inline {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .template-name-label {
    font-size: 16px;
  }

  .template-name-input {
    margin: 0 10px;
    border: 1px solid #ccc;
    background: rgba(76, 156, 226, 0.1);
  }

  .collapse-icon {
    cursor: pointer;
    margin-right: 10px;
    height: 20px;
  }

  .table-settings {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    height: 35px;
    margin-right: 10px;
    cursor: pointer;
    border: 1px solid #ADADAD;
    outline: none;
    border-radius: 4px;
    font-family: var(--printess-button-font);
    font-size: 14px;
    font-weight: 400;
    color: #555555;
  }

  .table-settings:hover {
    background-color: #e2e2e2;
  }

  .input-label {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    flex: 1 0 300px;
    padding-right: 20px;
  }

  label {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
  }

  input {
    padding: 10px 20px;
    background-color: rgba(76, 156, 226, 0.1);
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    margin: 10px 10px 0 0;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--printess-text-font);
    height: 40px;
    width: 100%;
    color:  #555555;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #a0a0a0;
    opacity: 1; /* Firefox */
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #a0a0a0;
  }
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #a0a0a0;
  }

  .filter-button {
    padding: 10px;
    border-radius: 4px;
    background-color: var(--printess-blue);
    border: none;
    height: 40px;
  }
  .filter-button:hover {
    background-color: var(--printess-blueHover);
  }

  .expanded-filter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 20px 0 0 20px;
  }

  select {
    padding: 10px 20px;
    margin: 10px 10px 0 0;
    height: 40px;
    width: 100%;
    font-family: var(--printess-text-font);
    font-size: 14px;
    font-weight: 400;
    background-color: rgba(76, 156, 226, 0.1);
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    color: #555555;
  }

  wc-icon {
    width: 25px;
    height: 25px;
  }

  .filter-icon {
    cursor: pointer;
    height: 22px;
  }

  .table-container {
    margin-top: 10px;
  }

  .hidden {
    display: none;
  }

  @media (max-width: ${config.mobileDeviceWidth}px) {
    .topic {
      font-size: 20px;
    }

    .subtopic {
      font-size: 14px;
    }

    .buttons-wrapper {
      flex-wrap: wrap;
      height: auto;
    }
    .option-button {
      margin: 0 10px 10px 0;
      padding: 7px 10px;
      font-size: 12px;
      flex: 1 1 auto;
      height: 17px;
    }
    .option-button:last-of-type {
      margin: 0;
    }

    .collapse-icon {
      width: 20px;
      height: 20px;
    }

    .filter-wrapper {
      margin-top: 20px;
    }

    .filter-button {
      height: 30px;
      padding: 7px 10px;
    }

    .setting-buttons {
      margin-bottom: 10px;
    }

    .setting-buttons button {
      margin-bottom: 5px;
    }

    .table-settings {
      font-size: 12px;
      padding: 7px 10px;
      height: 30px;
      margin-right: 5px;
    }

    .inline {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      margin-top: 20px;
    }

    .template-name-label {
      font-size: 12px;
    }

    .input-label {
      flex: 1 0 150px;
    }
    
    input {
      padding: 0 15px;
      font-size: 12px;
      height: 30px;
    }

    label {
      font-size: 12px;
    }

    select {
      padding: 0 15px;
      font-size: 12px;
      height: 30px;
    }

    wc-icon {
      width: 15px;
      height: 15px;
    }

    .filter-icon {
      cursor: pointer; 
      width: 15px; 
      height: 15px;
    }
  }
`;var __decorate$Q=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcSubmissionErrorsPage=class extends s$1{static get styles(){return[dropshipOrdersStyles,tableStyles$1,i$4`
      .table-wrapper {
        max-height: 80vh;
      }
    `]}constructor(){super(),this.state={errors:[]}}connectedCallback(){super.connectedCallback(),location.hash="#submission-errors",this.loadItems()}async loadItems(){const e=await api.loadSubmissionErrors();e instanceof ServerErrorResponse$2?alert(e):this.state=e}pathToHumanReadable(e){switch(e){case 1:return"produce";case 2:return"dropship";default:return"unknown"}}typeToHumanReadable(e){switch(e){case 1:return"validation";case 2:return"exception";default:return"unknown"}}render(){const e=new Date;return x`
      <wc-topic-header title="Submission Errors"></wc-topic-header>
      <div class="table-wrapper">
        <table class="layout display responsive-table">
          <thead>
            <tr>
              <th>Created</th>
              ${adm.canUseAdminMode?x`<th>UserId</th>`:x``}
              <th>Method</th>
              <th>Type</th>
              <th>Error Message</th>
              <th>JSON</th>
            </tr>
          </thead>
          <tbody>
            ${this.state.errors.map(t=>{const o=new Date(t.createdOn);return x`
              <tr>
                <!-- <td>${t.id}</td> -->
                <td>${o.toLocaleString()+" - "+formatDistance(o,e,{addSuffix:!0})}</td>
                 ${adm.canUseAdminMode?x`<td>${t.userId}</td>`:x``}
                <td>${this.pathToHumanReadable(t.path)}</td>
                <td>${this.typeToHumanReadable(t.type)}</td>
                <td>${t.errorMessage}</td>
                <td>${t.json}</td>
              </tr>
              `})}
          </tbody>
        </table>
      </div>
    `}};__decorate$Q([e$3({attribute:!1,type:Object})],WcSubmissionErrorsPage.prototype,"state",void 0),WcSubmissionErrorsPage=__decorate$Q([e$4("wc-submission-errors-page")],WcSubmissionErrorsPage);var __decorate$P=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcSiteflowPage=class extends s$1{constructor(e){super(),this.type="connections",this.eventObservers=new Map,this.type=e??"products"}connectedCallback(){super.connectedCallback(),location.hash="#siteflow"}static get styles(){return i$4`
      .title {
        font-size: 22px;
        font-weight: 500;
        font-family: var(--printess-header-font);
        color: rgb(85, 85, 85);
        margin: 1em 0;
      }

      button {
        line-height: 100%;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 22px;
        font-family: var(--printess-header-font);
        color: var(--printess-pink);    
        background-color: #f9f9f9;     
        border-color: var(--printess-pink);
        margin-right: 10px;
      }

      .selected {
        background-color: var(--printess-pink);
        color: #f9f9f9;
      }

      .wrapper {
        display: flex;
        flex-wrap: wrap;
      }
    `}registerEventObserver(e,t){let o=this.eventObservers.get(e);o||(o=[],this.eventObservers.set(e,o)),o.push(t)}distributeEvents(e){const t=this.eventObservers.get(e.type);if(t)for(const o of t)setTimeout(()=>o(e),0)}renderProductDefinitions(){return"products"===this.type?x`
        <wc-product-definitions dropshipperType="siteflow" .register=${(e,t)=>this.registerEventObserver(e,t)}></wc-product-definitions>
      `:x``}renderCreateProductDefinition(){return"newProduct"===this.type?x`
        <h1 class="title">Create Product Definition</h1>
        <wc-create-product-definition dropshipperType="siteflow" .dropshipperIdToSelect=${this.eventState?.id} @product-definition-created=${this.distributeEvents}></wc-create-product-definition>
      `:x``}renderConnections(){return"connections"===this.type?x`
        <wc-dropshippers mode="edit" dropshipperType="siteflow"></wc-dropshippers>
      `:x``}onDropshipperCreated(e){this.eventState=e.detail,this.type="newProduct"}renderCreateConnection(){return"newConnection"===this.type?x`
        <wc-dropshippers mode="create" dropshipperType="siteflow" @dropshipper-created=${this.onDropshipperCreated}></wc-dropshippers>
      `:x``}render(){return x`
      <wc-topic-header title="HP Siteflow Settings"></wc-topic-header>
      <div>
        <button @click=${()=>this.type="newConnection"} .className=${"newConnection"===this.type?"selected":""}>New Connection</button>
        <button @click=${()=>this.type="connections"} .className=${"connections"===this.type?"selected":""}>Connections</button>
        <button @click=${()=>this.type="newProduct"} .className=${"newProduct"===this.type?"selected":""}>New Product</button>
        <button @click=${()=>this.type="products"} .className=${"products"===this.type?"selected":""}>Products</button>
      </div>
      ${this.renderCreateConnection()}
      ${this.renderConnections()}
      ${this.renderCreateProductDefinition()}
      ${this.renderProductDefinitions()}
    `}};__decorate$P([e$3({attribute:!0,type:String})],WcSiteflowPage.prototype,"type",void 0),__decorate$P([e$3({attribute:!1,type:Object})],WcSiteflowPage.prototype,"eventState",void 0),WcSiteflowPage=__decorate$P([e$4("wc-siteflow-page")],WcSiteflowPage);var __decorate$O=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogTrialExpiredWarning=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
      }
    `]}connectedCallback(){super.connectedCallback()}constructor(){super(),this.backdrop=new WcBackdrop}showDialog(){document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}openSubscriptionPage(){this.closeDialog(),location.hash="#subscription"}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Trial Expired</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <p style="width: 100%; text-align: justify;">
              Your trial version has expired.
              Please choose a plan to continue designing with Printess and to get proper access to Printess features.
            </p>
            <button class="submit" @click=${this.openSubscriptionPage}>Close</button>
          </div>
        </div>
      </div>
    `}};WcDialogTrialExpiredWarning=__decorate$O([e$4("wc-dialog-trial-expired-warning")],WcDialogTrialExpiredWarning);var __decorate$N=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogConfirmRemoval=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0px;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
        max-height: 50vh;
        overflow: visible;
      }

      .input-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      input {
        color: #555;
        width: 100%;
        font-family: var(--printess-text-font);
      }

      .filename {
        font-size: 18px;
        font-weight: 700;
        margin-top: 0;
      }
      
      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          min-width: auto;
        }

        .input-grid {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    `]}constructor(e,t){super(),this.name="",this.response="better not",this.what="",this.backdrop=new WcBackdrop,this.name=e,this.what=t}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this),window.setTimeout(()=>this.removalInput.focus(),0)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}async removeImageCategory(){this.closeDialog(),this.callback&&this.callback(this.response)}enterKeyword(e){"Enter"===e.key&&(e.preventDefault(),this.removeImageCategory())}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">
              <div>
                Delete ${this.what}
                <!-- <span style="font-weight: bold">${this.name}</span> -->
              </div>
            </slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>
      
          <div class="modal-content">
            <div class="input-grid">

              <p>
                Do you really want to remove the ${this.what.toLowerCase()}
                <span style="color: var(--printess-red); font-weight: 700;">${this.name}</span>?
                This cannot be undone. Enter 'sure' to delete.
              </p>

              <input id="removalInput" type="text" value="better not" @change=${e=>this.response=e.target.value} 
                @keypress=${e=>this.enterKeyword(e)}
              />
              
              <div class="button-wrapper">
                <button @click=${this.removeImageCategory} class="submit" style="margin-right: 10px;">Delete ${this.what}</button>
                <button @click=${this.closeDialog} class="submit">Cancel</button>
              </div>
              
            </div>
          </div>
        </div>
      
      </div>
    `}};__decorate$N([e$3({type:String})],WcDialogConfirmRemoval.prototype,"name",void 0),__decorate$N([e$3({type:String})],WcDialogConfirmRemoval.prototype,"response",void 0),__decorate$N([e$3({type:String})],WcDialogConfirmRemoval.prototype,"what",void 0),__decorate$N([i$1("#removalInput")],WcDialogConfirmRemoval.prototype,"removalInput",void 0),WcDialogConfirmRemoval=__decorate$N([e$4("wc-dialog-confirm-removal")],WcDialogConfirmRemoval);var __decorate$M=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let Wc3dPage=class extends s$1{constructor(){super(),this.models=[],this.selected3dModel=void 0,this.loading=!1,this.selectedModelMaterial=void 0,this.viewerMode="json",this.modelMaterialsCache={}}connectedCallback(){super.connectedCallback(),location.hash="#3d",this.load3dModels()}static get styles(){return[settingsStyles,i$4`
      * {
        color: #555555;
      }

      .card {
        background: transparent;
        margin-bottom: 70px;
        border-bottom: 2px solid var(--printess-red);
      }

      .table-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .table-header div {
        color: white;
      }
      
      .table-body {
        display: flex;
        padding: 0px;
        min-height: 50vh;
      }

      form, .form {
        width: 100%;
        display: grid;
        margin-top: 10px;
        margin-bottom: 0;
        grid-template-columns: 80px calc(100% - 80px);
      }

      form div, .form div {
        display: flex;
        line-height: 25px;
        margin-left: 0;
        text-align: left;
        padding: 10px;
        align-items: center;
        min-width: 100px;
      }

      .form-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 10px;
        border-radius: 4px;
        background-color: rgba(210, 0, 100, 0.04);
      }

      input[type="file"] {
        display: none;
      }

      .file-upload-wrapper {
        display: flex;
        align-items: center;
        padding: 0px;
        width: calc(100% - 140px);
      }

      .upload-button, .custom-file-upload {
        border: 2px solid rgb(210, 0, 100);
        background: rgb(210, 0, 100);
        padding: 2px 30px;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-family: var(--printess-button-font);
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
      }

      .custom-file-upload {
        background: none;
        color: rgb(210, 0, 100);
        margin-right: 10px;
      }

      .custom-file-upload:hover {
        background-color: rgb(210, 0, 100);
        color: white;
      }

      .upload-button {
        display: flex;
        align-items: center;
        height: 33px;
      }

      .upload-button:hover {
        background-color: var(--printess-redHover);
      }

      .upload-button span {
        color: white;
      }

      #fileName {
        display: inline-block;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0px;
        margin-right: 10px;
      }

      .control {
        width: 100%;
        display: grid;
        grid-template-columns: 200px 1fr;
      }

      .menu {
        height: auto;
        background: var(--printess-lightred);
        border-top: 1px solid var(--printess-lightred);
      }

      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        width: calc(100% - 20px);
      }

      .menu-entry {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        font-size: 14px;
        border-bottom: 1px solid #f0b6ce;
      }

      .menu-entry:hover {
        color: #fff;
        background-color: var(--printess-red);
        cursor: pointer;
      }

      .new-entry {
        color: var(--printess-red);
      }
      .new-entry:hover {
        color: #fff;
      }

      .selected { 
        color: #fff;
        background-color: var(--printess-red);
      }
      .selected:hover {
        cursor: default;
      }

      .plus-icon {
        margin-right: 10px;
        fill: var(--printess-red);
      }
      .menu-entry:hover .plus-icon, .menu-entry.selected .plus-icon {
        fill: var(--printess-lightred);
      }

      .directory-url {
        margin-bottom: 10px;
        line-break: anywhere;
      }
      .directory-url p {
        margin: 5px 0px;
        font-weight: 700;
      }
      .directory-url div {
        font-size: 12px;
      }

      .settings {
        padding: 7px 20px;
        margin: 10px 10px 0px 0px;
      }

      .settings.green {
        background-color: var(--printess-green);
      }
      .settings.red {
        background-color: var(--printess-red);
      }
      
      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
        min-width: 2em;
        padding: 2px;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      .texturePreviewImg {
        background-size: cover;
        width: 20px;
        height: 20px;
        margin-left: 5px;
        display: inline-block;
        border: 1px solid black;
      }

      .modelInfoHeader a {
        display:inline-block;
        vertical-align: middle;
      }

    `]}async load3dModels(e=!1){this.modelMaterialsCache={};const t=await api.load3dModels();if(t instanceof ServerErrorResponse$2)return void alert(t.message);this.models=t;const o=this.models.length;if(o){const t=e?o-1:0;this.setSelectedModel(this.models[t])}}setSelectedModel(e){this.selected3dModel=e,e?this.modelMaterialsCache[e.id]?this.selectedModelMaterial=this.modelMaterialsCache[e.id]:(this.selectedModelMaterial=void 0,this.loadModelMaterials(e.directoryUrl).then(t=>{t&&(this.modelMaterialsCache[e.id]=t,this.selected3dModel&&this.selected3dModel.id==e.id&&(this.selectedModelMaterial=t))}).catch(e=>{console.log(e)})):this.selectedModelMaterial=void 0}async loadModelMaterials(e){let t=null;const o={method:"GET",mode:"cors",cache:"no-cache",credentials:"omit",headers:{Accept:"application/json"},redirect:"follow",referrerPolicy:"no-referrer"};try{const r=await fetch(normalizeUrl(e)+"modelMaterials.json",o);r.ok&&(t=await r.json())}catch(e){console.log(e)}return t}async upload(e){if(e.preventDefault(),this.shadowRoot){const e=this.shadowRoot.getElementById("theForm");if(e){const t=new FormData(e);this.loading=!0,await api.upload3dModel(t,(e,t)=>{console.log("uploaded: "+e/t),e/t===1&&(this.loading=!1)}),await this.load3dModels();const o=t.get("label");if(o){const e=this.models.filter(e=>e.label==o)[0];e&&this.setSelectedModel(e)}}}this.loading=!1,console.log("done..")}resetLoading(){this.loading=!1,this.setSelectedModel(void 0)}setFileName(e){if(e.preventDefault(),e.target){const t=e.target.files;if(t&&this.shadowRoot){const e=this.shadowRoot.getElementById("fileName");e&&(e.textContent=t[0].name)}}}async saveCurrentModelJson(){if(this.selected3dModel){const e=await api.save3dModelJson(this.selected3dModel.id,this.selected3dModel.json);e instanceof ServerErrorResponse$2&&alert(e.message)}}async deleteCurrentModel(){if(!this.selected3dModel)return;new WcDialogConfirmRemoval(this.selected3dModel.label,"3D Model").showDialog(async e=>{if("sure"!==e||!this.selected3dModel)return;const t=await api.delete3dModel(this.selected3dModel.id);t instanceof ServerErrorResponse$2?alert(t.message):await this.load3dModels()})}setModelJson(e){this.selected3dModel&&(this.selected3dModel.json=e)}getFileName(e){const t=e.indexOf("#");t>0&&(e=e.substring(0,t));const o=e.indexOf("?");o>0&&(e=e.substring(0,o));const r=e.split("/");return r[r.length-1]}renderMaterialInfos(){const e=[x`<a href="data:application/json;base64,${btoa(JSON.stringify(this.selectedModelMaterial,null,2))}" target="_blank" rel="noreferrer noopener" download>modelMaterials.json</a>`];let t;const o=[],r={},i=e=>{e&&!r[e]&&(r[e]=!0,o.push(normalizeUrl(this.selected3dModel.directoryUrl)+encodeURIComponent(e)))};if(this.selected3dModel&&this.selected3dModel.json){try{t=JSON.parse(this.selected3dModel.json)}catch{}t&&(t.textures||[]).forEach(e=>{i(e.fileUrl)})}return this.selectedModelMaterial&&this.selectedModelMaterial.forEach(e=>{i(e.baseColorTexture),i(e.metallicRoughnessTexture),i(e.normalTexture),i(e.emissiveTexture),i(e.occlusionTexture)}),o.forEach(t=>{e.push(x`<a href="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Bt%7D" target="_blank"><div class="texturePreviewImg" style="background-image: url(${t});" title="${decodeURIComponent(this.getFileName(t))}"></div></a>`)}),x`<div class="modelInfoHeader">${e}</div>`}render(){return x`
      <h3 class="topic">3D Models</h3>
      <p style="font-size: 14px;">
        Here you can upload a 3D Model for product previews.
      </p>


      <div class="card red">

        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>Current Models</div>
          </h3>
          <wc-icon icon="plus" primaryColor="head-toolbar" style="margin-right: 20px; cursor: pointer;" @click=${()=>this.resetLoading()}></wc-icon>
        </div>

        <div class="table-body">
          <div class="control">

            <div class="menu">
              ${c(this.models.sort((e,t)=>e.label.localeCompare(t.label)),e=>e.id,e=>x`
              <div class="${o({"menu-entry":!0,selected:this.selected3dModel?.id===e.id})}" @click=${()=>this.setSelectedModel(this.models.filter(t=>t.id===e.id)[0])}>${e.label}</div>
              `)}

              <div class="${o({"menu-entry":!0,"new-entry":!0,selected:!this.selected3dModel})}" @click=${()=>this.resetLoading()}>
                <wc-icon icon="plus" primaryColor="light" class="plus-icon"></wc-icon>
                New Model Upload
              </div>
            </div>

            <div class="content">
              ${this.selected3dModel?x`

                <div class="directory-url">
                  <p>Directory Url:</p>
                  <div>${this.selected3dModel.directoryUrl}</div>
                </div>

                ${this.selectedModelMaterial?this.renderMaterialInfos():""}

                <wc-ace-editor-pure .text=${this.selected3dModel.json} .valueChangeCallback=${e=>this.setModelJson(e)}></wc-ace-editor-pure>

                <div style="display: flex;">
                  <button class="settings green" @click=${this.saveCurrentModelJson}>Save</button>
                  <button class="settings red" @click=${this.deleteCurrentModel}>Delete Model</button>
                </div>

              `:x`

                <form id="theForm">
                  <div>Name:</div>
                  <div><input type="text" name="label" class="form-input" /></div>

                  <div>Json:</div>
                  <div><textarea name="json" class="form-input" style="min-height: 300px; resize: vertical;"></textarea></div>

                  <div>Zip File:</div>
                  <div style="justify-content: space-between">
                    <div class="file-upload-wrapper">
                      <label class="custom-file-upload">
                        <input type="file" name="zipFile" @change=${this.setFileName} />
                        Choose File
                      </label>
                      <div id="fileName"></div>
                    </div>
                    <button class="upload-button" @click=${this.upload}>
                      ${this.loading?x`<div class="spinner"></div><span>Creating Model</span>`:x`<span>Create Model</span>`}
                    </button>
                  </div>
                </form>

              `}
            
            </div>

          </div>
        </div>

      </div>   
    `}};__decorate$M([e$3({type:Array})],Wc3dPage.prototype,"models",void 0),__decorate$M([e$3({type:Object})],Wc3dPage.prototype,"selected3dModel",void 0),__decorate$M([e$3({type:Boolean})],Wc3dPage.prototype,"loading",void 0),__decorate$M([e$3({type:Array})],Wc3dPage.prototype,"selectedModelMaterial",void 0),__decorate$M([e$3({type:String})],Wc3dPage.prototype,"viewerMode",void 0),Wc3dPage=__decorate$M([e$4("wc-3d-page")],Wc3dPage);var __decorate$L=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogDisconnectImage=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0px;
      }

      .modal-wrapper {
        width: auto;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
        max-height: 50vh;
        overflow: visible;
      }

      .input-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .filename {
        font-size: 18px;
        font-weight: 700;
        margin-top: 0;
      }
      
      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          min-width: auto;
        }

        .input-grid {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    `]}constructor(e,t){super(),this.category="",this.filename="",this.backdrop=new WcBackdrop,this.category=e,this.filename=t}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}async disconnectImage(){this.closeDialog(),this.callback&&this.callback(!0)}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">
              <div>
                Remove Image from 
                <span style="text-transform: uppercase;">${this.category}</span>
              </div>
            </slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>
      
          <div class="modal-content">
            <div class="input-grid">

              <p>
                Do you really want to remove this image from the category
                <span style="color: var(--printess-red); font-weight: bold;">${this.category}</span>
                ?
              </p>
              <p class="filename">
                Filename: ${this.filename}
              </p>
              
              <div class="button-wrapper">
                <button @click=${this.disconnectImage} class="submit" style="margin-right: 10px;">Remove Image</button>
                <button @click=${this.closeDialog} class="submit">Cancel</button>
              </div>
              
            </div>
          </div>
        </div>
      
      </div>
    `}};__decorate$L([e$3({type:String})],WcDialogDisconnectImage.prototype,"category",void 0),__decorate$L([e$3({type:String})],WcDialogDisconnectImage.prototype,"filename",void 0),WcDialogDisconnectImage=__decorate$L([e$4("wc-dialog-disconnect-image")],WcDialogDisconnectImage);var __decorate$K=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcImageCategoriesPage=class extends s$1{static get styles(){return[settingsStyles,i$4`
      * {
        color: #555555;
      }

      .inline {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }

      .menu-name-label {
        white-space: nowrap;
        margin-right: 10px;
      }

      .menu-name-input {
        padding: 10px 20px;
        border-radius: 4px;
        border: 1px solid #ccc;
        outline: none;
        font-size: 14px;
        font-weight: 400;
        font-family: var(--printess-text-font);
        height: 41px;
        width: 100%;
        color:  #555555;
        margin-right: 10px;
        border: 1px solid #ccc;
        background: rgba(208, 4, 155, 0.04);
      }

      select {
        margin-left: 10px;
        padding: 4px 20px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 14px;
        font-weight: 400;
        font-family: var(--printess-text-font);
        background-color: var(--printess-lightblue);
      }

      .card {
        background: transparent;
        margin-bottom: 0px;
        border-bottom: 2px solid var(--printess-blue);
      }

      .table-header {
        background-color: var(--printess-blue);
      }
      .table-header div {
        color: white;
      }

      .table-body {
        display: flex;
        padding: 0px;
        min-height: 50vh;
      }

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: white;
      }

      .category-list {
        height: auto;
        background: var(--printess-lightblue);
        /*border-top: 1px solid var(--printess-lightblue);*/
      }

      .category-selector {
        display: flex;
        align-items: center;
        padding: 8px 10px;
        font-size: 14px;
        min-width: 100px;
        background: var(--printess-lightblue);
        border-bottom: 1px solid #c6d4e7;
        cursor: pointer;
        white-space: nowrap;
      }

      .category-selector.selected {
        border-bottom: none;
        color: white;
        background-color: var(--printess-blue);
      }
      .category-selector.selected:first-child {
        border-top: 1px solid var(--printess-lightblue);
      }
      .category-selector .badge {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 16px;
        padding: 2px 4px;
        margin-left: 10px;
        border-radius: 6px;
        background: var(--printess-blue);
        color: var(--printess-lightblue);
      }
      .category-selector.selected .badge {
        background: var(--printess-lightblue);
        color: var(--printess-blue);
      }

      .content {
        width: 100%;
      }

      .image-upload-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      
      .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
        grid-auto-rows: 150px;
        gap: 7px;
        place-items: center;
        padding: 10px;
        width: 100%;
      }

      .image-box {
        border: 1px solid rgb(204, 204, 204);
        position: relative;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
      }

      .delete-icon {
        opacity: 0;
        position: absolute;
        bottom: 4px;
        right: 4px;
        background: var(--printess-lightred);
        border: 2px solid var(--printess-magenta);
        border-radius: 4px;
        padding: 3px 6px;
        cursor: pointer;
      }

      .delete-icon:hover {
        border-color: var(--printess-magentaHover);
      } 
      
      .download-icon {
        left: 4px;
      }
      
      .image-box:hover .delete-icon, .delete-icon:hover {
        opacity: 1.0
      }

      .can-print-icon {
        margin-left: 5px;
        margin-top: 5px;
        min-width: 20px;
        width: 20px;
        min-height: 20px;
        height: 20px;
        opacity: 0.8;
      }

      .can-print-icon:hover {
        opacity: 1.0
      }

      wc-icon {
        min-width: 30px;
        width: 30px;
        min-height: 30px;
        height: 30px;
      }

      .menu-icon {
        min-width: 20px;
        min-height: 25px;
        width: 20px;
        height: 25px;
        padding: 0;
        margin-right: 20px;
        cursor: pointer;
      }

      .settings {
        background-color: var(--printess-blue);
      }
      .settings:hover {
        background-color: var(--printess-blueHover);
      }

      .inline .settings.pink {
        margin: 0px;
        padding: 10px 20px;
      }

      .settings.pink {
        background-color: var(--printess-pink);
      }
      .settings.pink:hover {
        background-color: var(--printess-pinkHover);
      }

      .button-wrapper {
        display: flex;
        flex-wrap: wrap;
        grid: 10px;
        margin: 10px 0 70px 0;
      }
      .button-wrapper .settings {
        margin: 0px 10px 0px 0px;
      }
      .button-wrapper .red {
        background-color: var(--printess-red);
      }
      .button-wrapper .red:hover {
        background-color: var(--printess-redHover);
      }

      input[type="file"] {
        display: none;
      }

      .custom-file-upload {
        background: var(--printess-blue);
        padding: 7px 20px;
        border: none;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-family: var(--printess-button-font);
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
      }

      .custom-file-upload:hover, button.settings.green:hover, .selected-image-group:hover {
        background: var(--printess-blueHover);
      }

      .image-group {
        background: var(--printess-lightgreen);
      }

      .image-group:hover {
        background: var(--printess-greenHover);
      }

      .selected-image-group {
        background: var(--printess-green);
      }

      .image-groups {
        display: flex;
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}constructor(){super(),this.imageCategories=[],this.imageCategoryImages=new Map,this.isUploading=!1,this.selectedGroupId=1}connectedCallback(){super.connectedCallback(),this.loadImageCategories(),location.hash="#image-categories"}async loadImageCategories(e=""){const t=await api.loadImageCategoriesWithCounts();t instanceof ServerErrorResponse$2?this.showError(t):(this.imageCategories=t.sort((e,t)=>e.name.localeCompare(t.name)),this.selectedCategory=e?this.imageCategories.filter(t=>t.name===e)[0]:this.imageCategories[0],this.selectedCategory&&await this.loadImageCategoryImages(this.selectedCategory.id,0,400))}async addImageCategory(){const e=this.shadowRoot?.getElementById("imageCategoryCtrl"),t=e.value;t&&(await api.addImageCategory(t),await this.loadImageCategories(t),e.value="")}async loadImageCategoryImages(e,t=0,o=400){const r=await api.loadImageCategoryImages(e,t,o);if(r instanceof ServerErrorResponse$2)this.showError(r);else{this.imageCategoryImages.set(e,r.images);const t=this.imageCategories.filter(t=>t.id===e)[0];t&&(t.count=r.images.length),this.requestUpdate()}}async uploadImages(e,t){if(t.target.files){this.isUploading=!0;const o=Array.from(t.target.files).map(t=>api.upload(t,e,this.selectedGroupId));try{await Promise.all(o)}finally{this.isUploading=!1}await this.loadImageCategoryImages(e)}}async uploadIntoNewGroup(e){const t=document.createElement("input");t.type="file",t.multiple=!0,t.style.display="hidden",t.addEventListener("change",async o=>{const r=prompt("Please enter new group name.","group2");if(r){const t=await api.addImageGroup(r);if(t instanceof ServerErrorResponse$2)this.showError(t);else{const r=t;this.selectedGroupId=r,this.uploadImages(e,o)}}t.remove()}),document.body.append(t),t.click()}async disconnectImage(e,t,o,r,i){new WcDialogDisconnectImage(t,i).showDialog(async t=>{if(!t)return;const i=await api.disconnectImage(e,r,o);i instanceof ServerErrorResponse$2?this.showError(i):await this.loadImageCategoryImages(e)})}async toggleCanPrint(e,t,o,r,i){let a=null;if(i){const e=JSON.parse(i);e.canPrint=!r,a=JSON.stringify(e)}else a=JSON.stringify({canPrint:!r});console.log(a);const s=await api.setImageCategoryImageMeta(e,o,t,a);s instanceof ServerErrorResponse$2?this.showError(s):await this.loadImageCategoryImages(e)}async deleteImageCategory(e,t){new WcDialogConfirmRemoval(t,"Image Category").showDialog(async t=>{if("sure"!==t)return;const o=await api.deleteImageCategory(e);o instanceof ServerErrorResponse$2?this.showError(o):await this.loadImageCategories()})}async deleteImageGroup(e,t){new WcDialogConfirmRemoval("currently selected","Image Group").showDialog(async o=>{"sure"===o&&(await api.deleteGroupImagesFromCategory(e,t),await this.loadImageCategoryImages(this.selectedCategory.id,0,400))})}async copyEverythingToOtherAccount(){const e=prompt("Please provide the target user id.","");e&&await adminApi.copyImageCategories(e)}async pasteImages(e){const t=await navigator.clipboard.readText();this.isUploading=!0;try{try{const o=JSON.parse(t);if(o.objects&&Array.isArray(o.objects)){const t=o.objects;for(let o=0;o<t.length;o++){const r=t[o];if(r.data&&r.data.fh){const t=await api.imageExistsV3(r.data.fh);if(t instanceof ServerErrorResponse$2){if(r.data.sc)if(r.data.sc.length){const t=r.data.sc.sort((e,t)=>t.w-e.w)[0];console.log(t),t.w>r.data.w?await api.importImageFromUrlV2(r.data.na,r.data.fh,t.u,"","",e,0,this.selectedGroupId):await api.importImageFromUrlV2(r.data.na,r.data.fh,r.data.u,"","",e,0,this.selectedGroupId)}else await api.importImageFromUrlV2(r.data.na,r.data.fh,r.data.u,"","",e,0,this.selectedGroupId)}else t.id>0&&await api.connectImage(e,t.id,this.selectedGroupId)}}}}catch(e){alert(e)}}finally{this.isUploading=!1}await this.loadImageCategoryImages(e)}async downloadImage(e){const t=await api.loadImageInfo(e);t instanceof ServerErrorResponse$2?this.showError(t):window.open(t.source?t.source.url:t.original.url,"_blank")}allowDrop(e){e.preventDefault()}startImageDrag(e,t){e.dataTransfer&&e.dataTransfer.setData("dto",JSON.stringify(t))}async dropImage(e,t,o){if(e.dataTransfer){const r=e.dataTransfer.getData("dto"),i=JSON.parse(r);if(o!==i.groupId)if(-1===o){const e=prompt("Please enter new group name.","new group");if(e){const o=await api.addImageGroup(e);if(o instanceof ServerErrorResponse$2)this.showError(o);else{const e=o;await api.connectImage(t,i.id,e),await api.disconnectImage(t,i.id,i.groupId),await this.loadImageCategoryImages(this.selectedCategory.id,0,400)}}}else await api.connectImage(t,i.id,o),await api.disconnectImage(t,i.id,i.groupId),await this.loadImageCategoryImages(this.selectedCategory.id,0,400)}}renderPreviewImage(e,t,o){let r=!1;if(o.meta){JSON.parse(o.meta).canPrint&&(r=!0)}return x`
    <div
      @dragstart=${e=>this.startImageDrag(e,o)}
      class="image-box" style="background-image: url(${o.previewUrl})" draggable="true"
    >
      <wc-icon class="can-print-icon" primaryColor=${r?"green":"lightgray"} .icon=${r?"print-solid":"print-slash-solid"} @click=${()=>this.toggleCanPrint(e,o.groupId,o.id,r,o.meta)}></wc-icon>
      <wc-icon class="delete-icon" primaryColor="magenta" icon="trash-solid" @click=${()=>this.disconnectImage(e,t,o.groupId,o.id,o.fileName)}></wc-icon>
      <wc-icon class="delete-icon download-icon" primaryColor="magenta" icon="download" @click=${()=>this.downloadImage(o.id)}></wc-icon>
    </div>      
    `}renderImageCategoryImages(e,t){const r=this.imageCategoryImages.get(e);if(r){const i=new Map,a=new Map;for(let e=0;e<r.length;e++){const t=r[e],o=i.get(t.groupId);o?o.push(t):(a.set(t.groupId,t.groupName),i.set(t.groupId,[t]))}a.has(1)&&a.set(1,"group1");const s=new Map([...a.entries()].sort((e,t)=>e[1].localeCompare(t[1]))),n=i.get(this.selectedGroupId);if(n)return x`
        <div class="image-groups">

          <div>
            <div
              @dragover=${e=>this.allowDrop(e)}
              @drop=${t=>this.dropImage(t,e,-1)}
              class="${o({"image-group":!0,"category-selector":!0})}">+ Add Via Drag&Drop</div>
            ${c(s,([e,t])=>e,([t,r])=>x`
            <div
              @click=${()=>this.selectedGroupId=t}
              @dragover=${e=>this.allowDrop(e)}
              @drop=${o=>this.dropImage(o,e,t)}
              class="${o({"selected-image-group":t===this.selectedGroupId,"image-group":!0,"category-selector":!0})}">${r}</div>
            `)}
          </div>
    
          <div class="image-grid">
          ${c(n,e=>e.id,o=>this.renderPreviewImage(e,t,o))}
          </div>

        </div>
        `;this.selectedGroupId=i.keys().next().value,setTimeout(()=>{this.requestUpdate()},0)}return""}renderLoadMoreImagesButton(e){const t=this.imageCategoryImages.get(e),o=this.imageCategories.filter(t=>t.id===e)[0];return t&&o.count!==t.length?x`<button class="settings pink" @click=${()=>this.loadImageCategoryImages(e)}>Load More Images</button>`:""}async selectImageCategory(e){this.selectedCategory=e,await this.loadImageCategoryImages(e.id,0,400)}async setImageCategoryAiMode(e,t){await api.updateImageCategory(e,t),this.selectedCategory&&(this.selectedCategory.aiMode=t,this.requestUpdate())}enterCategory(e){"Enter"===e.key&&(e.preventDefault(),this.addImageCategory())}uploadImagesViaMenuButton(){const e=this.shadowRoot?.getElementById("imageUploadCtrl");e.click()}userClick(e,t){showCtxMenu(e,[{caption:"Upload Images",callback:()=>this.uploadImagesViaMenuButton()},{caption:"Upload Images Into New Group",callback:()=>this.uploadIntoNewGroup(t.id)},{caption:"Paste Images",callback:()=>this.pasteImages(t.id)},{caption:"Delete Image Category",callback:()=>this.deleteImageCategory(t.id,t.name)}],0,0,240)}render(){const e=this.selectedCategory;return x`
      ${this.isUploading?x` <div style="position:absolute; width: 100vw; height: 100vh; background-color: rgba(20, 20, 20, 0.2);">Uploading</div>`:x``}
     
      <h3 class="topic">Image Categories</h3>
      <p style="font-size: 14px;">
        Organize your images into categories to keep your library structured and easy to manage.
      </p>

      <div class="inline" style="margin-top: 10px;">
        <input 
          id="imageCategoryCtrl" type="text" name="addKeywordMenu" 
          placeholder="Enter new image category ..." 
          class="menu-name-input" 
          @keypress=${e=>this.enterCategory(e)}
        >
        <wc-button caption="Add Category" color="pink" size="lg" @click=${this.addImageCategory}></wc-button>
      </div>

      <div>
        ${this.imageCategories.length?x`
          <div class="card">
            <div class="table-header">
              <div class="title">
                Image Library
                <div>
                  AI Mode: 
                  <select @change=${t=>this.setImageCategoryAiMode(e.id,t.target.value)}>
                    <option value="" .selected=${""===(e.aiMode??"")}>None</option>
                    <option value="face" .selected=${"face"===e.aiMode}>Face</option>
                    <option value="group" .selected=${"group"===e.aiMode}>Group</option>
                  </select>
                </div>
                <wc-icon icon="ellipsis-v" primarycolor="head-toolbar" class="menu-icon" @mousedown=${t=>this.userClick(t,e)}></wc-icon>
              </div>
            </div>
            <div class="table-body">
              <div class="category-list">
                ${c(this.imageCategories,e=>e.id,t=>x`
                  <div class="category-selector ${t.name===e.name?"selected":""}" @click=${()=>this.selectImageCategory(t)}>
                    ${t.name}
                    <div class="badge">${t.count}</div>
                  </div>
                `)}
              </div>
              <div class="content">
                ${e.count>0?x`
                  ${this.renderImageCategoryImages(e.id,e.name)}
                  ${this.renderLoadMoreImagesButton(e.id)}
                `:x`
                <div class="image-upload-container">
                  <p style="font-size: 16px">
                    Click the button below to add images to 
                    <span style="font-weight: bold; color: var(--printess-blue)">${e.name}</span>.
                  </p>
                  <label class="custom-file-upload" style="margin: 0px 10px 20px">
                    <input type="file" multiple @change=${t=>this.uploadImages(e.id,t)}>
                    Upload Images
                  </label>
                </div>
                `}
              </div>
            </div>
          </div>
          <div class="button-wrapper">
            <label class="custom-file-upload">
              <input id="imageUploadCtrl" type="file" multiple @change=${t=>this.uploadImages(e.id,t)}>
              Upload Images
            </label>
            <wc-button caption="Upload Images Into New Group" color="blue" size="md" @click=${()=>this.uploadIntoNewGroup(e.id)}></wc-button>
            <wc-button caption="Paste Images" color="blue" size="md" @click=${()=>this.pasteImages(e.id)}></wc-button>
            <wc-button caption="Delete Image Category" color="red" size="md" @click=${()=>this.deleteImageCategory(e.id,e.name)}></wc-button>
            <wc-button caption="Delete Image Category Group" color="red" size="md" @click=${()=>this.deleteImageGroup(e.id,this.selectedGroupId)}></wc-button>
            ${adm.canUseAdminMode?x`<wc-button caption="Copy Everything To Other Account" color="blue" size="md" @click=${this.copyEverythingToOtherAccount}></wc-button>`:""}            
          </div>
        `:""}
      </div>
    `}};__decorate$K([e$3({type:Object})],WcImageCategoriesPage.prototype,"selectedCategory",void 0),__decorate$K([e$3({type:Number})],WcImageCategoriesPage.prototype,"selectedGroupId",void 0),__decorate$K([e$3({type:Array})],WcImageCategoriesPage.prototype,"imageCategories",void 0),__decorate$K([e$3({type:Object})],WcImageCategoriesPage.prototype,"imageCategoryImages",void 0),__decorate$K([e$3({type:Boolean})],WcImageCategoriesPage.prototype,"isUploading",void 0),WcImageCategoriesPage=__decorate$K([e$4("wc-image-categories-page")],WcImageCategoriesPage);var __decorate$J=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogAddKeyword=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        padding-top: 100px;
      }

      .modal-content {
        min-height: auto;
        max-height: 50vh;
        overflow: visible;
      }

      .input-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      input {
        color: #555;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          min-width: 80vw;
        }

        .input-grid {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    `]}constructor(e,t){super(),this.type="Keyword",this.keyword="",this.imageCategories=[],this.backdrop=new WcBackdrop,this.type=e,this.imageCategories=t??[]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this),window.setTimeout(()=>this.keywordInput.focus(),0)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}setKeyword(e){this.keyword=e.target.value}addKeyword(){this.closeDialog(),this.callback&&this.callback(this.keyword)}setKeywordWithEnter(e){"Enter"!==e.key&&13!==e.which||(e.preventDefault(),this.addKeyword())}enterKeyword(e){"Enter"===e.key&&(e.preventDefault(),this.addKeyword())}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">New ${this.type}</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>
      
          <div class="modal-content">
            <div class="input-grid">
              <!-- @keyup=${e=>this.setKeywordWithEnter(e)} -->

              <input type="text" id="keywordInput" name="keyword" placeholder="Enter ${this.type} ..." list="imageCategories" required                
                @change=${e=>this.setKeyword(e)}
                @keypress=${e=>this.enterKeyword(e)}
              >
              <datalist id="imageCategories">
                ${"Topic"===this.type?this.imageCategories.map(e=>x`
                  <option value=${e.name}>${e.name}</option>
                `):""}
              </datalist>
              
              <button @click=${this.addKeyword} class="submit">Add ${this.type}</button>
            </div>
          </div>
        </div>
      
      </div>
    `}};__decorate$J([e$3({type:String})],WcDialogAddKeyword.prototype,"type",void 0),__decorate$J([e$3({type:String})],WcDialogAddKeyword.prototype,"keyword",void 0),__decorate$J([e$3({type:Array})],WcDialogAddKeyword.prototype,"imageCategories",void 0),__decorate$J([i$1("#keywordInput")],WcDialogAddKeyword.prototype,"keywordInput",void 0),WcDialogAddKeyword=__decorate$J([e$4("wc-dialog-add-keyword")],WcDialogAddKeyword);var __decorate$I=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogRemoveKeyword=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0px;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
        max-height: 50vh;
        overflow: visible;
      }

      .input-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      input {
        color: #555;
        width: 100%;
      }
      
      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          min-width: 80vw;
        }

        .input-grid {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    `]}constructor(e,t){super(),this.caption="",this.backdrop=new WcBackdrop,this.caption=e,this.type=t}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}async removeKeyword(){this.closeDialog(),this.callback&&this.callback(!0)}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Remove ${this.type.charAt(0).toUpperCase()+this.type.slice(1)}</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>
      
          <div class="modal-content">
            <div class="input-grid">

              <p>
                Do you really want to remove the ${this.type}
                <span style="color: var(--printess-red)">${this.caption}</span>
                ?
              </p>
              
              <div class="button-wrapper">
                <button @click=${this.removeKeyword} class="submit" style="margin-right: 10px;">Remove ${this.caption||"keyword"}</button>
                <button @click=${this.closeDialog} class="submit">Cancel</button>
              </div>
              
            </div>
          </div>
        </div>
      
      </div>
    `}};__decorate$I([e$3({type:String})],WcDialogRemoveKeyword.prototype,"caption",void 0),__decorate$I([e$3({type:String})],WcDialogRemoveKeyword.prototype,"type",void 0),WcDialogRemoveKeyword=__decorate$I([e$4("wc-dialog-remove-keyword")],WcDialogRemoveKeyword);var __decorate$H=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcUniversalTagList=class extends s$1{constructor(){super(...arguments),this.addtagsallowed=!1,this.loadglobal=!0,this.selectedtags=[],this.placeholder="",this.customtags=void 0,this.filtertags=[],this.theme="",this.darkmode=!1,this.loadedTags=[],this.loadedKeywords=[],this.loadedImageCategories=[],this.inputData=[],this.inputDataHash="",this.loadingInputHash=""}static get styles(){return i$4`
      /*
        ##################
        DEFAULT STYLE
        ##################
      */
      :host {
        display: flex;
        background: white;
        padding: 0;
        height: 100%;
      }

      .tags {
        min-height: 25px; //30px;
        width: 100%;
        height: 100%;
        border: 1px solid var(--printess-blue);
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .input-wrapper {
        border-radius: 3px;
        background-color: var(--printess-lightblue);
        width: 100%;
        margin: 0;
      }

      input {
        position: relative;
        outline: none;
        border-radius: 3px;
        width: calc(100% - 10px);
        display: inline-block;
        margin: 5px;
        border: none;
        padding: 5px;
      }

      .tags-list {
        min-height: 24px;
        background-color: white;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: small;
      }

      .tag {
        position: relative;
        margin: 2px;
        border-radius: 3px;
        padding: 2px 25px 2px 5px;
      }

      .tag.bg-keywords {
        background-color: var(--printess-green);
        color: white;
      }

      .tag.bg-group-tags,
      .tag.bg-layout-tags,
      .tag.bg-image-categories {
        background-color: var(--printess-blue);
        color: white;
      }

      .tag:after {
        color: white;
        content: '×';
        cursor: pointer;
        font-size: 18px;
        pointer-events: auto;
        position: absolute;
        right: 5px;
        top: -2px;
      }

      .tag:hover:after {
        color: red;
      }

    /* Default Dark Mode */
      .dark {
        background: var(--printess-headToolbarBackgroundColor);
        border-color: var(--printess-headToolbarBorderColor);
      }

      .dark .input-wrapper {
        background: var(--printess-headToolbarBackgroundColor);
      }

      .dark input {
        background: var(--printess-headToolbarBorderColor);
        color: white;
      }

      .dark input::placeholder {
        color: lightgray;
      }

      .dark .tags-list {
        background: var(--printess-headToolbarBackgroundColor);
      }

      .dark .tag {
        border: 1px solid var(--printess-headToolbarBorderColor);
      }

      /*
        ##################
        COLOR THEMES
        ##################
      */

      /* -PINK--------------------- */
      .tags.pink {
        background: var(--printess-lightpink);
        border-color: var(--printess-pink);
      }

      .tags.pink .input-wrapper {
        background: var(--printess-lightpink);
      }

      .tags.pink input {
        background: var(--printess-pink);
      }

      .tags.pink .tags-list {
        background: var(--printess-lightpink);
      }

      /* Dark mode */
      .dark.pink {
        background: hsl(from var(--printess-lightpink) h s calc(l - 20));
        border-color: var(--printess-lightpink);
      }

      .dark.pink .input-wrapper {
        background: hsl(from var(--printess-lightpink) h s calc(l - 20));
      }

      .dark.pink input {
        background: hsl(from var(--printess-pink) h s calc(l - 20));
        color: white;
      }

      .dark.pink input::placeholder {
        color: lightgray;
      }

      .dark.pink .tags-list {
        background: hsl(from var(--printess-lightpink) h s calc(l - 20));
      }

      .dark.pink .tag {
        border: 1px solid var(--printess-lightpink);
      }

      /* -YELLOW------------------- */
      .tags.yellow {
        background: var(--printess-lightyellow);
        border-color: var(--printess-yellow);
      }

      .tags.yellow .input-wrapper {
        background: var(--printess-lightyellow);
      }

      .tags.yellow input {
        background: var(--printess-yellow);
      }

      .tags.yellow input::placeholder {
        color: white;
      }

      .tags.yellow .tags-list {
        background: var(--printess-lightyellow);
      }

      /* Dark mode */
      .dark.yellow {
        background: hsl(from var(--printess-lightyellow) h s calc(l - 20));
        border-color: var(--printess-lightyellow);
      }

      .dark.yellow .input-wrapper {
        background: hsl(from var(--printess-lightyellow) h s calc(l - 20));
      }

      .dark.yellow input {
        background: hsl(from var(--printess-yellow) h s calc(l - 20));
        color: white;
      }

      .dark.yellow input::placeholder {
        color: lightgray;
      }

      .dark.yellow .tags-list {
        background: hsl(from var(--printess-lightyellow) h s calc(l - 20));
      }

      .dark.yellow .tag {
        border: 1px solid var(--printess-lightyellow);
      }

      /* -GREEN-------------------- */
      .tags.green {
        background: var(--printess-lightgreen);
        border-color: var(--printess-green);
      }

      .tags.green .input-wrapper {
        background: var(--printess-lightgreen);
      }

      .tags.green input {
        background: var(--printess-green);
      }

      .tags.green .tags-list {
        background: var(--printess-lightgreen);
      }

      /* Dark mode */
      .dark.green {
        background: hsl(from var(--printess-lightgreen) h s calc(l - 20));
        border-color: var(--printess-lightgreen);
      }

      .dark.green .input-wrapper {
        background: hsl(from var(--printess-lightgreen) h s calc(l - 20));
      }

      .dark.green input {
        background: hsl(from var(--printess-green) h s calc(l - 20));
        color: white;
      }

      .dark.green input::placeholder {
        color: lightgray;
      }

      .dark.green .tags-list {
        background: hsl(from var(--printess-lightgreen) h s calc(l - 20));
      }

      .dark.green .tag {
        border: 1px solid var(--printess-lightgreen);
      }
      /* -BLUE--------------------- */

      .blue.dark {
        background: hsl(from var(--printess-lightblue) h s calc(l - 20));
      }

      .blue.dark .input-wrapper {
        background: hsl(from var(--printess-lightblue) h s calc(l - 20));
      }

      .blue.dark input {
        background: hsl(from var(--printess-blue) h s calc(l - 20));
        color: white;
      }

      .blue.dark input::placeholder {
        color: lightgray;
      }

      .blue.dark .tags-list {
        background: hsl(from var(--printess-lightblue) h s calc(l - 20));
      }

      .blue.dark .tag {
        border: 1px solid var(--printess-lightblue);
      }

      /* -YELLOW-TAGS--------------------- */

      .yellow-tag.tag {
        background-color: var(--printess-yellow);
      }

      .dark.yellow-tag.tag {
        background-color: var(--printess-yellowHover);
      }

      /*
        ##################
        FORM THEMES
        ##################
      */

      /* No border Radius */
      .tags.square {
        border-radius: 0;
      }

      .tags.square .input-wrapper {
        border-radius: 0;
      }

      .tags.square input {
        border-radius: 0;
      }

      .tags.square .tag {
        border-radius: 0;
      }

      /* Tags below input */
      .tags.tags-below {
        flex-direction: column-reverse;
      }

      .tags-below .tags-list {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }

      /* Slimmed down */
      .slim.tags {
        height: auto;
      }

      .slim .tags-list {
        min-height: 0;
        padding: 0;
      }
    `}getInputDataHash(){return`${this.tagtype}|${this.filtertags.join()}|${this.loadglobal}`}filterInputData(e){if(this.filtertags.length>0){let t=[];return t=e.filter(e=>this.filtertags.includes(e)),t}return e}async loadLayoutTags(){const e=await api.loadSnippetTags(this.loadglobal);e instanceof ServerErrorResponse$2||(this.loadedTags=e.filter(e=>e.layout>0).map(e=>({...e,name:e.tag,isGlobal:e.tag.startsWith("printess-")})),this.inputData=this.filterInputData(this.loadedTags.map(e=>e.name)).sort())}async loadGroupTags(){const e=await api.loadSnippetTags(this.loadglobal);e instanceof ServerErrorResponse$2||(this.loadedTags=e.filter(e=>e.group>0).map(e=>({...e,name:e.tag,isGlobal:e.tag.startsWith("printess-")})),this.inputData=this.filterInputData(this.loadedTags.map(e=>e.name)).sort())}async loadKeywords(){const e=await api.loadLayoutKeywords(this.loadglobal);if(e instanceof ServerErrorResponse$2)return;this.loadedKeywords=e.map(e=>({name:e,keyword:e,isGlobal:e.startsWith("printess-")}));const t=this.filterInputData(this.loadedKeywords.map(e=>e.name));this.inputData=t}async loadImageCategories(){const e=await api.loadImageCategories();e instanceof ServerErrorResponse$2||(this.loadedImageCategories=e,this.inputData=this.filterInputData(this.loadedImageCategories.map(e=>e.name)))}async loadInputData(){const e=this.getInputDataHash();if(!this.inputDataHash||this.inputDataHash!==this.loadingInputHash){switch(this.loadingInputHash=e,this.tagtype){case"layout-tags":await this.loadLayoutTags();break;case"group-tags":await this.loadGroupTags();break;case"keywords":await this.loadKeywords();break;case"image-categories":await this.loadImageCategories();break;default:assertNever(this.tagtype)}this.inputDataHash=e,this.loadingInputHash="",this.requestUpdate()}}selectTag(e){this.selectedtags.includes(e)||(this.selectedtags=[...this.selectedtags,e]),this.dispatchEvent(new CustomEvent("tagsChanged",{detail:this.selectedtags})),this.requestUpdate()}removeTag(e){this.selectedtags=this.selectedtags.filter(t=>t!==e),this.dispatchEvent(new CustomEvent("tagsChanged",{detail:this.selectedtags})),this.requestUpdate()}inputChanged(e){const t=e.target,o=t.value;if(""!==o)return this.addtagsallowed?(this.selectTag(o),void(t.value="")):void(this.inputData.includes(o)&&(this.selectTag(o),t.value=""))}keydown(e){"Enter"===e.key&&(e.preventDefault(),this.inputChanged(e))}render(){if(Array.isArray(this.customtags))this.inputData=this.customtags,this.inputDataHash=this.getInputDataHash();else if(this.inputDataHash!==this.getInputDataHash())return this.loadInputData(),x`
      <div class="tags ${this.theme} ${this.darkmode?"dark":""}">
        <div class="tags-list">
        </div>
        <div autocomplete="off" class="input-wrapper">
          <input
            id="tag-input"
            name="no-completion"
            placeholder="Loading..."
            list="loadedTags"
            autocomplete="off"
          />
        </div>
        ${this.inputDataHash===this.getInputDataHash()?x`
          <datalist id="loadedTags">
            ${this.inputData.map(e=>x`<option value=${e}>${e}</option>`)}
          </datalist>
          `:""}
    </div>`;return x`
      <div class="tags ${this.theme} ${this.darkmode?"dark":""}">
        <div class="tags-list">
          ${this.selectedtags.map(e=>x`<div @click=${()=>this.removeTag(e)} class="tag ${`bg-${this.tagtype}`} ${this.theme}" role="button">${e}</div>`)}
        </div>
        <form autocomplete="off" class="input-wrapper">
          <input
            id="tag-input"
            placeholder=${this.placeholder?this.placeholder:`Add ${this.tagtype}`}
            list="loadedTags"
            @change=${e=>this.inputChanged(e)}
            autocomplete="off"
            @keydown=${e=>this.keydown(e)}
          />
        </form>
        ${this.inputDataHash===this.getInputDataHash()?x`
          <datalist id="loadedTags">
            ${this.inputData.map(e=>x`<option value=${e}>${e}</option>`)}
          </datalist>
          `:"Loading..."}
      </div>
      `}};__decorate$H([e$3({attribute:!0})],WcUniversalTagList.prototype,"tagtype",void 0),__decorate$H([e$3({attribute:!0,type:Boolean})],WcUniversalTagList.prototype,"addtagsallowed",void 0),__decorate$H([e$3({attribute:!0,type:Boolean})],WcUniversalTagList.prototype,"loadglobal",void 0),__decorate$H([e$3({attribute:!0,type:Array})],WcUniversalTagList.prototype,"selectedtags",void 0),__decorate$H([e$3({attribute:!0})],WcUniversalTagList.prototype,"placeholder",void 0),__decorate$H([e$3({attribute:!0,type:Array})],WcUniversalTagList.prototype,"customtags",void 0),__decorate$H([e$3({attribute:!0,type:Array})],WcUniversalTagList.prototype,"filtertags",void 0),__decorate$H([e$3({attribute:!0})],WcUniversalTagList.prototype,"theme",void 0),__decorate$H([e$3({attribute:!0,type:Boolean})],WcUniversalTagList.prototype,"darkmode",void 0),__decorate$H([t$1()],WcUniversalTagList.prototype,"loadedTags",void 0),__decorate$H([t$1()],WcUniversalTagList.prototype,"loadedKeywords",void 0),__decorate$H([t$1()],WcUniversalTagList.prototype,"loadedImageCategories",void 0),__decorate$H([t$1()],WcUniversalTagList.prototype,"inputData",void 0),WcUniversalTagList=__decorate$H([e$4("wc-universal-tag-list")],WcUniversalTagList);var __decorate$G=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogAddTopic=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0px;
      }

      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
        max-height: 50vh;
        overflow: visible;
      }

      .input-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .input-wrapper {
        display: grid;
        grid-template-columns: 100px 1fr;
        align-items: center;
        width: 100%;
        margin-bottom: 7px;
      }

      input {
        color: #555;
        width: 100%;
        margin-top: 0px;
      }

      textarea {
        height: 100px;
        padding: 10px;
        font-size: 14px;
        font-weight: 400;
        font-family: var(--printess-text-font);
      }

      #categoryInput {
        background-color: var(--printess-lightgreen);
      }
      #topicInput {
        background-color: var(--printess-lightblue);
      }
      #keywordsInput {
        background-color: var(--printess-lightyellow);
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          min-width: 80vw;
        }

        .input-grid {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    `]}constructor(e,t,o){super(),this.categories=[],this.imgCategories=[],this.keywords=[],this.ctg={category:"",topic:"",keywords:""},this.backdrop=new WcBackdrop,this.categories=e,this.imgCategories=t,this.keywords=o}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this),window.setTimeout(()=>this.categoryInput.focus(),0)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}setCategory(e){const t=e.target.name,o=e.target.value;this.ctg[t]=o}addCategory(){if(this.closeDialog(),this.callback){const e=`${this.ctg.topic.toLowerCase()},${this.ctg.keywords}`,t={n:this.ctg.category.toLowerCase(),id:generateID(),t:"category",tops:[{n:this.ctg.topic.toLowerCase(),id:generateID(),t:"topic",kws:e.split(",").filter(e=>""!==e.trim()).map(e=>e.trim().toLowerCase())}]};this.callback(t)}}enterKeyword(e){"Enter"===e.key&&(e.preventDefault(),this.addCategory())}render(){return x`
      <div class="modal">

        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Add Topic</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <div class="input-grid">

              <div class="input-wrapper">
                <label for="categoryInput">Category:</label>
                <input type="text" id="categoryInput" name="category" placeholder="Enter category ..." list="categoryList" required
                  @change=${e=>this.setCategory(e)}
                  @keypress=${e=>this.enterKeyword(e)}
                >
                <datalist id="categoryList">
                  ${this.categories.map(e=>x`
                    <option value=${e}>${e}</option>
                  `)}
                </datalist>
              </div>

              <div class="input-wrapper">
                <label for="topicInput">Topic:</label>
                <input type="text" id="topicInput" name="topic" placeholder="Enter topic ..." list="imageCategories" required
                  @change=${e=>this.setCategory(e)}
                  @keypress=${e=>this.enterKeyword(e)}
                >
                <datalist id="imageCategories">
                  ${this.imgCategories.map(e=>x`
                    <option value=${e.name}>${e.name}</option>
                  `)}
                </datalist>
              </div>

              <div class="input-wrapper">
                <label for="keywordsInput">Keywords:</label>
                <wc-universal-tag-list
                  tagtype="keywords"
                  addtagsallowed
                  theme="yellow slim"
                  @tagsChanged=${e=>this.ctg.keywords=e.detail.join(",")}
                >
                </wc-universal-tag-list>
              </div>

              <button @click=${this.addCategory} class="submit">Add Topic</button>
            </div>
          </div>
        </div>
      </div>
    `}};__decorate$G([e$3({type:Array})],WcDialogAddTopic.prototype,"categories",void 0),__decorate$G([e$3({type:Array})],WcDialogAddTopic.prototype,"imgCategories",void 0),__decorate$G([e$3({type:Array})],WcDialogAddTopic.prototype,"keywords",void 0),__decorate$G([e$3({type:Object})],WcDialogAddTopic.prototype,"ctg",void 0),__decorate$G([i$1("#categoryInput")],WcDialogAddTopic.prototype,"categoryInput",void 0),WcDialogAddTopic=__decorate$G([e$4("wc-dialog-add-topic")],WcDialogAddTopic);var __decorate$F=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProductMenu=class extends s$1{static get styles(){return[settingsStyles,i$4`
      :host {
        width: 100%;
      }

      * {
        color: #555555;
      }

      .first-category-button-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
      }

      .menu-content {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        flex-wrap: wrap;
        flex: 1 0 auto;
      }

      .container, .wrapper, .box {
        display: flex;
        align-items: stretch;
        min-width: 150px;
      }

      .container {
        flex-direction: row;
        flex-wrap: wrap;
        flex: 1 0 auto;
      }

      .wrapper {
        flex-direction: column;
        justify-content: center;
      }

      .box {
        border: 1px solid #ccc;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-right: 4px;
        margin-bottom: 4px;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
        text-align: center;
        width: 17vw;
        cursor: pointer;
      }

      .badge {
        position: absolute;
        top: 0px;
        left: 0px;
        background: var(--printess-blue);
        color: var(--printess-lightblue);
        padding: 4px 5px 5px 6px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-bottom-right-radius: 4px;
      }

      .badge wc-icon {
        min-width: 20px;
        min-height: 20px;
        fill: white;
        margin-right: 7px;
      }

      .category-box {
        background-color: var(--printess-lightgreen);
        border: 1px solid var(--printess-green);
      }

      .topic-box {
        background-color: var(--printess-lightblue);
        border: 1px solid var(--printess-blue);
      }

      .keyword-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--printess-lightyellow);
        border: 1px solid var(--printess-yellow);
        width: 22vw;
        text-align: left;
        cursor: default;
      }

      .key-input {
        font-family: var(--printess-font);
        font-size: 14px;
        text-align: center;
        border: none;
        border-radius: 4px;
        padding: 4px;
      }
      .key-input:disabled {
        border: none;
        padding: 4px;
        background-color: transparent;
        cursor: pointer;
      }

      .category-box .key-input {
        background-color: var(--printess-lightgreen);
      }
      .topic-box .key-input {
        background-color: var(--printess-lightblue);
      }
      .keyword-box .key-input {
        background-color: var(--printess-lightyellow);
        text-align: left;
      }
      .key-input:focus-visible {
        outline: none;
        background-color: var(--printess-green);
        color: var(--printess-lightgreen);
      }
      .topic-box .key-input:focus-visible {
        background-color: var(--printess-blue);
        color: var(--printess-lightblue);
      }
      .keyword-box .key-input:focus-visible {
        background-color: var(--printess-yellow);
        color: var(--printess-lightyellow);
      }

      .tool-container {
        display: none;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        margin-top: 10px;
      }

      .tool-container.edit {
        display: flex;
      }

      .tool-icon {
        display: block;
        cursor: pointer;
      }
      .edit .add-tool {
        display: none;
      }
      .check-tool {
        display: none;
      }
      .edit .check-tool {
        display: block;
      }
      .edit .move-tool {
        cursor: not-allowed;
        pointer-events: none;
      }

      .category-box:hover, .topic-box:hover, .keyword-box:hover {
        grid-template-rows: 1fr 25px;
      }

      .category-box:hover .tool-container, .topic-box:hover .tool-container, .keyword-box:hover .tool-container {
        display: flex;
      }

      .category-box.selected {
        border: 2px solid var(--printess-green);
      }
      .topic-box.selected {
        border: 2px solid var(--printess-blue);
      }
      .keyword-box.selected {
        border: 2px solid var(--printess-red);
      }

      wc-icon {
        min-width: 15px;
        width: 15px;
        min-height: 15px;
        height: 15px;
      }

      .plus-circle {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }

      .keyword {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #ccc;
        padding: 5px 7px;
      }

      .keyword .plus-icon {
        position: unset;
      }

      .icon-box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
        border-right: none;
      }

      .icon-box wc-icon {
        display: block;
        position: unset;
        cursor: pointer;
      }

      .grip-icon {
        cursor: grab!important;
      }

      .keyword-box .edit-tool, .keyword-box .submit-tool {
        min-height: 20px;
        min-width: 20px;
        margin-left: 4px;
        cursor: pointer;
      }

      .settings {
        background-color: var(--printess-pink);
        width: 200px;
      }
      .settings:hover {
        background-color: var(--printess-pinkHover);
      }

      .settings.green {
        padding: 10px 20px;
        background-color: var(--printess-green);
      }
      .settings.green:hover {
        background-color: var(--printess-greenHover);
      }

      .above {
        border: 1px solid #ccc;
        border-top: 5px solid var(--printess-pink);
      }
      .below {
        border: 1px solid #ccc;
        border-bottom: 5px solid var(--printess-pink);
        margin-bottom: 0px;
      }

      .moving .tool-container {
        display: none!important;
      }

      .moving .box:hover, .moving .box:hover {
        grid-template-rows: 1fr;
      }

      .box.edit-mode {
        grid-template-rows: 1fr 25px;
      }
      .box.edit-mode .tool-container {
        display: flex!important;
      }
      .box.edit-mode .check-tool {
        display: block!important;
      }

      .icon-wrapper {
        display: flex;
        align-items: center;
        flex-direction: row;
      }
      .icon-wrapper wc-icon {
        min-width: 20px;
        width: 20px;
        min-height: 20px;
        height: 20px;
        margin-right: 20px;
        cursor: pointer;
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async saveKeywordMenu(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async deleteKeywordMenu(e){const t=await api.deleteUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}constructor(e,t,o,r){super(),this.imageCategories=[],this.keywords=[],this.inEditMode=!1,this.activeKeywordsEdit="",this.drag=!1,this.dragItem=null,this.dragTargetItem=void 0,this.insertPosition="below",this.moveHandler=this.mousemove.bind(this),this.upHandler=this.mouseup.bind(this),this.key=e,this.menu=t,this.imageCategories=o,this.keywords=r}connectedCallback(){super.connectedCallback(),this.menu&&!this.menu.id&&this.setIDs()}setIDs(){const e={n:this.menu.n,t:"menu",id:generateID(),cats:[]};for(const t of this.menu.cats){const o={n:t.n,id:generateID(),t:t.t,tops:[]};for(const e of t.tops){const t={n:e.n,id:generateID(),t:e.t,kws:e.kws};o.tops.push(t)}e.cats.push(o)}this.menu=e,this.saveMenu()}getToolIcons(e,t,o){const r=t.n;return[{icon:"grip-dots-vertical",color:o?"lightgray":"gray",class:"move-tool",title:"Move "+t.t,disabled:o,task:o=>this.mousedown(o,e.n,t)},{icon:"database",color:"warning",class:"key-tool",title:"Add Keyword to "+r,disabled:!0,task:()=>console.log("adding keyword")},{icon:"edit",color:"green",class:"edit-tool",title:"Edit "+t.t,disabled:o,task:e=>this.openItemEditor(e)},{icon:"trash-solid",color:"frame",class:"delete-tool",title:"Delete "+t.t,disabled:!1,task:()=>{new WcDialogRemoveKeyword(t.n,t.t).showDialog(o=>{o&&("category"===t.t&&this.deleteCategory(t.id),"topic"===t.t&&this.deleteTopic(e,t))})}},{icon:"plus",color:"headline",class:"add-tool",title:"Add Keyword below",disabled:o,task:()=>{"category"===t.t&&this.addEmptyCategory(new MenuCategory(t)),"topic"===t.t&&this.plusClicked(e,new MenuTopic(t))}},{icon:"check",color:"headline",class:"check-tool",title:"Submit "+t.t,disabled:!1,task:o=>{"category"===t.t&&this.changeCategoryName(o,t),"topic"===t.t&&this.changeTopicName(o,e.id,t)}}]}mousedown(e,t,o){if(e.preventDefault(),o){this.dragItem=o,this.dragItemParent=t;const r=e.target;if(this.startX=e.clientX,this.startY=e.clientY,"WC-ICON"===r.tagName&&!r.classList.contains("move-tool")&&this.inEditMode)return void document.addEventListener("mouseup",this.upHandler);document.addEventListener("mouseup",this.upHandler),document.addEventListener("mousemove",this.moveHandler)}}createSprite(){const e=document.createElement("div");if(e.style.position="absolute",e.style.pointerEvents="none",e.style.display="flex",e.style.flexDirection="row",e.style.justifyContent="center",e.style.zIndex="9999",this.shadowRoot&&this.dragItem){let t=null;if(t=this.shadowRoot.querySelector("#"+this.dragItem.id),t){const o=t.cloneNode(!0);this.dragItem&&(o.style.background="rgba(255, 255, 255, 0.8)",o.style.border="1px solid var(--printess-lightred)",o.style.padding="8px 10px 4px 10px"),e.appendChild(o)}}return e}mousemove(e){if(e.preventDefault(),e.cancelBubble=!0,this.shadowRoot&&!this.drag&&(Math.abs(this.startY-e.clientY)>10||Math.abs(this.startX-e.clientX)>10))this.sprite=this.createSprite(),this.shadowRoot.appendChild(this.sprite),this.dragItem&&(this.drag=!0,this.dragTargetItem=void 0);else if(this.drag&&(this.sprite.style.left=e.clientX+"px",this.sprite.style.top=e.clientY+"px",this.shadowRoot)){const t=this.shadowRoot.elementFromPoint(e.clientX,e.clientY),o=this.shadowRoot.querySelector(".menu-content");if(o?.classList.add("moving"),t&&t.classList&&t.classList.contains("box")){const o=t.getBoundingClientRect(),r=e.offsetY<o.top+t.offsetHeight/2,i="string"==typeof this.dragItem?this.dragItem:this.dragItem?.n,a="string"==typeof this.dragItem?"keyword":this.dragItem?.t;a&&t.dataset.type===a&&t.dataset.name!==i&&(r?(t.classList.add("above"),t.classList.remove("below"),this.insertPosition="above"):(t.classList.add("below"),t.classList.remove("above"),this.insertPosition="below")),t!==this.dragTargetItem&&(this.dragTargetItem&&(this.dragTargetItem.classList.remove("above"),this.dragTargetItem.classList.remove("below")),this.dragTargetItem=t,this.insertPosition="below")}const r=["key-input","tool-icon","tool-container","box"];t&&t.classList&&-1===r.findIndex(e=>t.classList.contains(e))&&(t.classList.remove("above"),t.classList.remove("below"),this.dragTargetItem?.classList.remove("above"),this.dragTargetItem?.classList.remove("below"),this.dragTargetItem=void 0)}}async mouseup(e){e.preventDefault(),e.cancelBubble=!0,document.removeEventListener("mousemove",this.moveHandler),document.removeEventListener("mouseup",this.upHandler);const t=this.shadowRoot?.querySelector(".menu-content");if(t?.classList.remove("moving"),this.drag&&(this.sprite&&this.sprite.parentNode&&this.sprite.parentNode.removeChild(this.sprite),this.drag=!1,this.dragTargetItem&&(this.dragTargetItem.classList.remove("above"),this.dragTargetItem.classList.remove("below"),this.dragItem))){const e=this.dragItem;e.t===this.dragTargetItem.dataset.type&&this.dragTargetItem.dataset.parent&&("category"===e.t?this.moveCategory(this.dragItem,this.dragTargetItem.id,this.insertPosition):this.moveTopic(this.dragItem,this.dragItemParent,this.dragTargetItem.dataset.parent,this.dragTargetItem.id,this.insertPosition))}}moveCategory(e,t,o){const r=new MenuCategory(e),i=new Menu(this.menu);i.move(r,t,o),this.menu=i.serialize(),this.saveMenu()}moveTopic(e,t,o,r,i){const a=new MenuTopic(e),s=this.menu.cats.filter(e=>e.n===t)[0],n=new MenuCategory(s);n.delete(a.id);const l=new Menu(this.menu);l.update(s.id,n),this.menu=l.serialize();const c=this.menu.cats.filter(e=>e.n===o)[0],d=new MenuCategory(c);d.move(a,r,i),l.update(c.id,d),this.menu=l.serialize(),this.saveMenu()}deleteCategory(e){const t=new Menu(this.menu);t.delete(e),this.menu=t.serialize(),this.saveMenu()}deleteTopic(e,t){const o=new MenuCategory(e);o.delete(t.id);const r=new Menu(this.menu);r.update(o.id,o),this.menu=r.serialize(),this.saveMenu()}deleteKeyword(e,t){const o=new MenuTopic(e);o.delete(t),o.save(),this.saveMenu()}openItemEditor(e){this.inEditMode=!0;const t=e.target,o=t?.parentElement,r=o?.parentElement?.querySelector(".key-input");if(o&&r){r.disabled=!1,r.focus(),o.classList.add("edit");const e=o.querySelector(".move-tool");e&&(e.primaryColor="lightgray")}}changeCategoryName(e,t){const o=e.target,r=o?.parentElement,i=r?.parentElement?.querySelector(".key-input");if(i&&r){const e=new MenuCategory(t);e.rename(i.value||t.n);const o=new Menu(this.menu);o.update(t.id,e),this.menu=o.serialize(),this.inEditMode=!1,this.saveMenu(),this.resetBox(i,r)}}changeTopicName(e,t,o){const r=e.target,i=r?.parentElement,a=i?.parentElement?.querySelector(".key-input");if(a&&i){const e=new MenuTopic(o);e.rename(a.value||o.n);const r=this.menu.cats.filter(e=>e.id===t)[0],s=new MenuCategory(r);s.update(o.id,e);const n=new Menu(this.menu);n.update(r.id,s),this.menu=n.serialize(),this.inEditMode=!1,this.saveMenu(),this.resetBox(a,i)}}resetBox(e,t){e.disabled=!0,e.value=e.value.toLowerCase(),t.classList.remove("edit");const o=t.querySelector(".move-tool");o&&(o.primaryColor="gray")}enterPressed(e,t,o){"topic"===o.t?this.renameEmptyTopic(o,t,!0):this.renameEmptyCategory(o,!0)}plusClicked(e,t){if("category"===e.t){const o=new MenuCategory(e);this.addEmptyTopic(o,t);const r=new Menu(this.menu);r.update(o.id,o),this.menu=r.serialize(),this.saveMenu()}}addEmptyTopic(e,t){const o={n:"",id:generateID(),t:"topic",kws:[]},r=new MenuTopic(o);e.insert(r,t)}renameEmptyTopic(e,t,o){const r=this.shadowRoot?.getElementById("inp_"+e.id);if(r&&-1===t.tops.findIndex(e=>e.n===r.value)){const i=new MenuTopic(e);i.rename(r.value),i.addKeywords([r.value.toLowerCase()]);const a=new MenuCategory(t);a.update(i.id,i),o&&this.addEmptyTopic(a,i);const s=new Menu(this.menu);s.update(a.id,a),this.menu=s.serialize(),this.saveMenu()}}addEmptyCategory(e){const t={n:"",id:generateID(),t:"category",tops:[]},o=new MenuCategory(t),r=new Menu(this.menu);r.insert(o,e),this.menu=r.serialize(),this.saveMenu()}renameEmptyCategory(e,t){const o=this.shadowRoot?.getElementById("inp_"+e.id);if(o&&-1===this.menu.cats.findIndex(e=>e.n===o.value)){const r=new MenuCategory(e);r.rename(o.value),t&&this.addEmptyCategory(r);const i=new Menu(this.menu);i.update(r.id,r),this.menu=i.serialize(),this.saveMenu()}}editKeywords(e,t){const o=new MenuTopic(e);t.length?o.addKeywords(t):o.removeKeywords(),o.save();const r=new Menu(this.menu),i=r.findCategory(e);i&&(i.update(e.id,o),r.update(i.id,i),this.menu=r.serialize(),this.saveMenu())}saveMenu(){const e=JSON.stringify(this.menu);this.saveKeywordMenu({key:this.key,json:e}),this.requestUpdate()}renderNewCategoryButton(){return x`
      <div class="first-category-button-container">
        <p>Click the button below to add a new category to your ${this.menu.n} Keyword Menu.</p>
        <button class="settings green" @click=${()=>this.addTopicByImageCategory()}>Add Category</button>
      </div>
    `}async addTopicByImageCategory(){const e=new WcDialogAddTopic(this.menu.cats?.map(e=>e.n)||[],this.imageCategories,this.keywords);e.showDialog(e=>{const t=this.menu.cats?.filter(t=>t.n===e.n)[0];if(t){const o=new MenuTopic(e.tops[0]),r=new MenuCategory(t);r.insert(o,"bottom");const i=new Menu(this.menu);i.update(t.id,r),this.menu=i.serialize()}else this.menu.cats?this.menu.cats?.push(e):this.menu.cats=[e];const o=JSON.stringify(this.menu);this.saveKeywordMenu({key:this.key,json:o}),this.requestUpdate()})}render(){return x`
      <div class="menu-content">
        ${this.menu?this.menu.cats?.length?this.menu.cats.map(e=>this.addItemToDom(this.menu,e)):this.renderNewCategoryButton():""}
      </div>
    `}addItemToDom(e,t,o=!1){const r="topic"===t.t?this.imageCategories.filter(e=>e.name===t.n)[0]:null,i=this.getToolIcons(e,t,o);return""===t.n&&(o=!0,window.setTimeout(()=>{const e=this.shadowRoot?.getElementById("inp_"+t.id);e?.focus()},0)),x`
      <div class="container">
        <div class="box ${t.t}-box" id=${t.id} data-name=${t.n} data-type=${t.t} data-parent=${e.n}
          @mousedown=${r=>!o&&!this.inEditMode&&this.mousedown(r,e.n,t)}
        >
          ${r?x`
            <div class="badge">
              <wc-icon icon="image" primaryColor="light"></wc-icon>
              ${r.count}
            </div>
          `:""}

          <input id=${"inp_"+t.id} class="key-input" name="${t.t}-${t.n}" .value=${t.n}
            ?disabled=${!o} ?autofocus=${o}
            list=${"topic"===t.t?"imageCategoryList":""}
            @keypress=${r=>!(!o||"Enter"!==r.key)&&this.enterPressed(r,e,t)}
          />

          ${"topic"===t.t?x`
            <datalist id="imageCategoryList">
              ${this.imageCategories.map(e=>x`
                <option value=${e.name}>${e.name}</option>
              `)}
            </datalist>
          `:""}

          ${o?x`
            <div class="tool-container edit">
              <wc-icon class="tool-icon delete-icon" icon="trash-solid" primaryColor="frame" title="Delete ${t.t}" @click=${()=>"topic"===t.t?this.deleteTopic(e,t):this.deleteCategory(t.id)}></wc-icon>
              <wc-icon class="tool-icon submit-icon" icon="check" primaryColor="headline" title="Submit ${t.t}" @click=${()=>"topic"===t.t?this.renameEmptyTopic(t,e,!1):this.renameEmptyCategory(t,!1)}></wc-icon>
            </div>
          `:x`
            <div class="tool-container">
              ${i.filter(e=>!1===e.disabled).map(e=>x`
                <wc-icon class="tool-icon ${e.class}" icon=${e.icon} primaryColor=${e.color} title=${e.title} @click=${t=>e.task(t)}></wc-icon>
              `)}
            </div>
          `}
        </div>

        <div class="wrapper">
          ${"category"===t.t&&t.tops.length?x`
            <!-- TOPICS -->
            ${t.tops.map(e=>this.addItemToDom(t,e))}

          `:"topic"===t.t?x`
            <!-- KEYWORDS -->
            <div class="box keyword-box" id="keywords-${t.id}" data-name=${t.n} data-type="keywords" style="display: ${t.kws.length?"flex":"none"}">
              ${this.activeKeywordsEdit===t.id?x`
                  <wc-universal-tag-list
                  tagtype="keywords"
                  addtagsallowed
                  placeholder="Search Keywords..."
                  .selectedtags="${t.kws.filter(e=>e!==t.n)}"
                  @tagsChanged=${e=>this.editKeywords(t,e.detail)}
                  theme="yellow yellow-tag"
                  style="width: 100%;"
                  ></wc-universal-tag-list>
                <wc-icon class="submit-tool" icon="check" primaryColor="green" @click=${()=>this.activeKeywordsEdit=""}></wc-icon>

              `:x`
                <div class="key-input">
                  ${t.kws.join(", ")}
                </div>
                <wc-icon class="edit-tool" icon="edit" primaryColor="green" @click=${()=>this.activeKeywordsEdit=t.id}></wc-icon>
              `}

            </div>

          `:x`
            <!-- PLUS / ADD ICON -->
            <wc-icon class="plus-circle" icon="plus-circle" primaryColor="headline" @click=${()=>this.plusClicked(t,"bottom")}></wc-icon>
          `}
        </div>
      </div>
    `}};__decorate$F([e$3({type:String})],WcProductMenu.prototype,"key",void 0),__decorate$F([e$3({type:Object})],WcProductMenu.prototype,"menu",void 0),__decorate$F([e$3({type:Array})],WcProductMenu.prototype,"imageCategories",void 0),__decorate$F([e$3({type:Array})],WcProductMenu.prototype,"keywords",void 0),__decorate$F([e$3({type:Boolean})],WcProductMenu.prototype,"inEditMode",void 0),__decorate$F([e$3({type:String})],WcProductMenu.prototype,"activeKeywordsEdit",void 0),WcProductMenu=__decorate$F([e$4("wc-product-menu")],WcProductMenu);var __decorate$E=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogEditKeywordMenu=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0px;
      }
      .modal-header {
        margin-top: 0px;
      }

      .modal-content {
        min-height: auto;
        max-height: 50vh;
        overflow: visible;
      }

      .input-grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      input {
        color: #555;
        width: 100%;
      }
      
      .button-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .modal-wrapper {
          min-width: 80vw;
        }

        .input-grid {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
      }
    `]}constructor(e){super(),this.caption="",this.backdrop=new WcBackdrop,this.caption=e}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}showDialog(e){this.callback=e,document.body.appendChild(this.backdrop),document.body.appendChild(this),window.setTimeout(()=>this.captionInput.focus(),0)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}setCaption(e){this.caption=e.target.value}changeCaption(){this.closeDialog(),this.callback&&this.callback(this.caption)}setCaptionWithEnter(e){"Enter"!==e.key&&13!==e.which||(e.preventDefault(),this.changeCaption())}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Edit Keyword Menu Caption</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>
      
          <div class="modal-content">
            <div class="input-grid">

              <input type="text" id="menuCaption" name="menuCaption" placeholder="Enter new caption ..." value=${this.caption} required                
                @change=${e=>this.setCaption(e)}
                @keypress=${e=>this.setCaptionWithEnter(e)}
              >
              
              <div class="button-wrapper">
              <button @click=${this.changeCaption} class="submit" style="margin-right: 10px">Change Caption</button>
                <button @click=${this.closeDialog} class="submit">Cancel</button>
              </div>
            </div>
          </div>
        </div>
      
      </div>
    `}};__decorate$E([e$3({type:String})],WcDialogEditKeywordMenu.prototype,"caption",void 0),__decorate$E([i$1("#menuCaption")],WcDialogEditKeywordMenu.prototype,"captionInput",void 0),WcDialogEditKeywordMenu=__decorate$E([e$4("wc-dialog-edit-keyword-menu")],WcDialogEditKeywordMenu);var __decorate$D=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcTopicMenuPage=class extends s$1{static get styles(){return[settingsStyles,i$4`
      * {
        color: #555555;
      }

      .card {
        background: transparent;
        margin-bottom: 0px;
        border-bottom: 2px solid var(--printess-pink);
      }

      .table-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .table-header h3 {
        color: white;
      }

      .icon-wrapper {
        display: flex;
        align-items: center;
        flex-direction: row;
      }
      .icon-wrapper wc-icon {
        min-width: 20px;
        width: 20px;
        min-height: 20px;
        height: 20px;
        margin-right: 20px;
        cursor: pointer;
      }

      select {
        font-size: 16px;
        min-width: 150px;
        margin-left: 10px;
        padding: 4px 20px;
        border-radius: 4px;
        font-weight: 400;
        text-align: center;
        border: 1px solid #ccc;
        font-family: var(--printess-text-font);
        background-color: var(--printess-lightpink);
      }

      .table-body {
        display: flex;
        padding: 10px;
      }

      .menu-button-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        outline: 2px solid var(--printess-blue);
        max-width: 700px;
        margin-top: 50px;
        padding: 20px;
        border-radius: 4px;
      }

      .settings {
        background-color: var(--printess-pink);
        width: 200px;
        margin-right: 10px
      }
      .settings:hover {
        background-color: var(--printess-pinkHover);
      }

      .settings.blue {
        margin: 0px;
        padding: 10px 20px;
        background-color: var(--printess-blue);
      }
      .settings.blue:hover {
        background-color: var(--printess-blueHover);
      }

      .color-legend {
        color: rgb(85, 85, 85);
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: fit-content;
        outline: none;
        border: 1px solid rgb(204, 204, 204);
        padding: 7px 10px;
        margin-bottom: 20px;
        border-radius: 4px;
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(4, auto);
      }

      .color-container {
        display: flex;
        flex-direction: row;
        background-color: rgba(255, 255, 255, 0.8);
        align-items: center;
      }

      .color-box {
        min-width: 40px;
        min-height: 25px;
        position: relative;
      }

      .menu-caption {
        position: relative;
        flex: 1 0 25px;
        font-weight: 400;
        font-family: var(--printess-text-font);
      }
      .color-box:last-of-type {
        margin-right: 0;
      }

      .menu-color {
        outline: none;
        border: none;
        min-width: 30px;
      }

      .menu-color.image-category-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--printess-blue);
      }

      .color-box > button {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 9;
        width: 30px;
        height: 25px;
        pointer-events: none;
        border-radius: 4px;
      }
      .color-btn > button {
        height: 30px;
        width: 100%;
      }

      .inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
      }

      .menu-name-label {
        white-space: nowrap;
        margin-right: 10px;
      }

      .menu-name-input {
        padding: 10px 20px;
        background-color: rgba(76, 156, 226, 0.1);
        border-radius: 4px;
        border: 1px solid #ccc;
        outline: none;
        font-size: 14px;
        font-weight: 400;
        font-family: var(--printess-text-font);
        height: 41px;
        width: 100%;
        color:  #555555;
        border: 1px solid #ccc;
        background: rgba(76, 156, 226, 0.1);
        flex: 1 1 300px;
        min-width: 250px;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .color-legend {
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr 1fr;
        }

        .menu-name-input {
          font-size: 12px;
          padding: 7px 15px;
          height: unset;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadMenuKeys(){const e=await api.readUserSettings({keys:["topicUiMenus"]});e instanceof ServerErrorResponse$2?this.showError(e):e.topicUiMenus&&(this.keywordMenus=JSON.parse(e.topicUiMenus),this.keywordMenus=this.keywordMenus.filter(e=>e.k),this.keywordMenus.length&&this.loadKeywordMenu(this.keywordMenus[0].k))}async loadKeywordMenuCore(e){const t=await api.readUserSettings({keys:[e]});if(t instanceof ServerErrorResponse$2)this.showError(t);else if(t[e])return JSON.parse(t[e]);return null}async loadKeywordMenu(e){if(!e)return;const t=await this.loadKeywordMenuCore(e);t&&(this.selectedMenu={k:e,m:t},this.requestUpdate())}async saveKeywordMenus(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async deleteKeywordMenu(e){const t=await api.deleteUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async copyTopicsToClipboard(){const e=JSON.stringify(this.selectedMenu.m.cats);try{await navigator.clipboard.writeText(e)}catch(e){alert(e.message)}}async pasteTopicsFromClipboard(){try{const e=await navigator.clipboard.readText();if(e){const t=JSON.parse(e);if(!Array.isArray(t))throw new Error("Clipboard content not valid!");for(const e of t){if(!e.id||"string"!=typeof e.n||"string"!=typeof e.t||!Array.isArray(e.tops))throw new Error("Clipboard content not valid!");for(const t of e.tops)if(!t.id||!Array.isArray(t.kws)||"string"!=typeof t.n||"string"!=typeof t.t)throw new Error("Clipboard content not valid!")}if(this.selectedMenu){const e=this.selectedMenu.m,o=this.selectedMenu.k;e.cats.push(...t);const r=await api.writeUserSetting({key:o,json:JSON.stringify(e)});r instanceof ServerErrorResponse$2&&this.showError(r),this.requestUpdate()}}}catch(e){alert(e.message)}}async loadImageCategories(){const e=await api.loadImageCategoriesWithCounts();e instanceof ServerErrorResponse$2?this.showError(e):this.imageCategories=e}async loadKeywords(){const e=await api.loadLayoutKeywords(!1);e instanceof ServerErrorResponse$2?this.showError(e):this.keywords=e}constructor(){super(),this.keywordMenus=[],this.imageCategories=[],this.keywords=[]}connectedCallback(){super.connectedCallback(),this.loadMenuKeys(),this.loadImageCategories(),this.loadKeywords(),location.hash="#keyword-menu"}getId(){const e=(new Date).getTime();let t,o="P";const r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";for(t=0;t<20;t++)o+=r.charAt(Math.floor((e+52*Math.random())%52));return o}addNewMenu(e){if(e)if(e&&-1===this.keywordMenus.findIndex(t=>t.n===e)){const t="UiMenu"+this.getId(),o={n:e,id:generateID(),t:"menu",cats:[]};this.keywordMenus=[...this.keywordMenus,{n:e,k:t}];const r=JSON.stringify(this.keywordMenus);this.saveKeywordMenus({key:"topicUiMenus",json:r});const i=JSON.stringify(o);this.saveKeywordMenus({key:t,json:i}),this.selectedMenu={k:t,m:o}}else alert(e+" already exists. Please choose a different name!")}openCreateMenuDialog(){new WcDialogAddKeyword("Keyword Menu").showDialog(e=>{e&&-1===this.keywordMenus.findIndex(t=>t.n===e)&&this.addNewMenu(e)})}addMenuWithButton(){const e=this.shadowRoot?.getElementById("menuNameCtrl"),t=e.value;this.addNewMenu(t),t&&(e.value="")}addMenuWithEnter(e){"Enter"===e.key&&(e.preventDefault(),this.addMenuWithButton())}renderMenuCard(e){return new WcProductMenu(e.k,e.m,this.imageCategories,this.keywords)}deleteMenu(){const e=this.selectedMenu.m;new WcDialogRemoveKeyword(e.n,"Keyword Menu").showDialog(async t=>{if(t&&this.keywordMenus){const t=this.keywordMenus.findIndex(t=>t.n===e.n);if(t>=0){const e=this.keywordMenus[t],o=await api.readUserSettings({keys:["AllFeaturedOrHiddenLayouts"]});if(o&&o.AllFeaturedOrHiddenLayouts){const t=JSON.parse(o.AllFeaturedOrHiddenLayouts);if(Array.isArray(t)){const o=t.filter(t=>t.menu===e.k)[0];if(o)return void alert("You cannot delete this menu. It is used by sort index '"+o.name+"'. Please assign a different menu to this sort index or delete it.")}}this.keywordMenus.splice(t,1);const r=JSON.stringify(this.keywordMenus);this.saveKeywordMenus({key:"topicUiMenus",json:r}),this.deleteKeywordMenu({key:this.selectedMenu.k}),this.loadKeywordMenu(this.keywordMenus[0].k)}}})}editMenuCaption(){const e=this.selectedMenu.m;new WcDialogEditKeywordMenu(e.n).showDialog(async t=>{if(t){const o=this.keywordMenus?.findIndex(t=>t.n===e.n);if(o>=0){this.keywordMenus[o].n=t;const e=JSON.stringify(this.keywordMenus);this.saveKeywordMenus({key:"topicUiMenus",json:e});const r=await this.loadKeywordMenuCore(this.selectedMenu.k);if(r){r.n=t,this.selectedMenu={k:this.selectedMenu.k,m:r};const e=JSON.stringify(r);this.saveKeywordMenus({key:this.selectedMenu.k,json:e})}}}})}async addTopicByImageCategory(){await this.loadKeywordMenu(this.selectedMenu.k);const e=this.selectedMenu.m,t=new WcDialogAddTopic(e.cats?.map(e=>e.n)||[],this.imageCategories,this.keywords);t.showDialog(t=>{const o=e.cats?.filter(e=>e.n===t.n)[0];if(o){const r=new MenuTopic(t.tops[0]),i=new MenuCategory(o);i.insert(r,"bottom");const a=new Menu(e);a.update(o.id,i),this.selectedMenu={k:this.selectedMenu.k,m:a.serialize()}}else this.selectedMenu.m.cats?this.selectedMenu.m.cats?.push(t):this.selectedMenu.m.cats=[t];const r=JSON.stringify(this.selectedMenu.m);this.saveKeywordMenus({key:this.selectedMenu.k,json:r}),this.requestUpdate()})}selectKeywordMenu(e){const t=this.keywordMenus.filter(t=>t.n===e)[0];this.loadKeywordMenu(t.k)}copyMenuId(){navigator.clipboard.writeText(this.selectedMenu.k)}getMenuColors(){return[{color:"lightgreen",caption:"Categories"},{color:"lightblue",caption:"Topics"},{color:"lightyellow",caption:"Keywords"}]}render(){return x`
      <h3 class="topic">Keyword Menu Setup</h3>
      <p style="font-size: 14px;">
        Here you can create product specific menus for displaying specific layouts and stickers later in the buyer side.
      </p>

      ${this.keywordMenus?.length&&this.selectedMenu?x`
        <div class="color-legend" id="colorLegend">
          ${this.getMenuColors().map(e=>x`
            <div class="color-container">
              <div class="color-box">
                <button class="menu-color" style="background-color: var(--printess-${e.color}"></button>
              </div>
              <div class="menu-caption">${e.caption}</div>
            </div>
          `)}
          <div class="color-container">
            <div class="color-box">
              <button class="menu-color image-category-btn">
                <wc-icon icon="image" primarycolor="text"></wc-icon>
              </button>
            </div>
            <div class="menu-caption">Image Category</div>
          </div>
        </div>

        <label class="menu-name-label" for="addKeywordMenu">Create Keyword Menu</label>
        <div class="inline" style="margin-top: 10px;">
          <input
            id="menuNameCtrl" type="text" name="addKeywordMenu"
            placeholder="Enter Caption for Keyword Menu ..."
            class="menu-name-input"
            @keypress=${e=>this.addMenuWithEnter(e)}
          >
          <wc-button caption="Add Keyword Menu" color="blue" size="lg" @click=${()=>this.addMenuWithButton()}></wc-button>
        </div>

        <div class="card pink">

          <div class="table-header" style="background: var(--printess-pink);">
            <h3 class="title">Keyword Menu</h3>
            <div>
              <select @change=${e=>this.selectKeywordMenu(e.target.value)}>
                ${c(this.keywordMenus,e=>e.n,e=>x`
                  <option value=${e.n} .selected=${this.selectedMenu.k===e.k}>${e.n}</option>
                `)}
              </select>
            </div>
            <div class="icon-wrapper">
              <wc-icon icon="plus" primaryColor="arrows" title="Add Topic to Keyword Menu" @click=${this.addTopicByImageCategory}></wc-icon>
              <wc-icon icon="edit" primaryColor="arrows" title="Edit Keyword Menu Caption" @click=${this.editMenuCaption}></wc-icon>
              <wc-icon icon="copy" primaryColor="arrows" title="Copy Topics to Clipboard" @click=${this.copyTopicsToClipboard}></wc-icon>
              <wc-icon icon="paste" primaryColor="arrows" title="Paste Topics from Clipboard" @click=${this.pasteTopicsFromClipboard}></wc-icon>
              <wc-icon icon="primary" primaryColor="arrows" title="Copy Keyword Menu ID to Clipboard" @click=${this.copyMenuId}></wc-icon>
              <wc-icon icon="trash-solid" primaryColor="arrows" title="Delete Keyword Menu" @click=${this.deleteMenu}></wc-icon>
            </div>
          </div>

          <div class="table-body">
              ${this.selectedMenu?this.renderMenuCard(this.selectedMenu):""}
          </div>

        </div>
        <div class="button-wrapper">
          <wc-button caption="Edit Caption" color="pink" size="md" @click=${this.editMenuCaption}></wc-button>
          <wc-button caption="Delete Keyword Menu" color="pink" size="md" @click=${this.deleteMenu}></wc-button>
        </div>
      </div>

      `:x`

        <div class="menu-button-wrapper">
          <p>Click the button below to start creating a product specific Keyword Menu.</p>
          <button class="settings" @click=${()=>this.openCreateMenuDialog()}>Create Keyword Menu</button>
        </div>

      `}
    `}};__decorate$D([e$3({type:Array})],WcTopicMenuPage.prototype,"keywordMenus",void 0),__decorate$D([e$3({type:Object})],WcTopicMenuPage.prototype,"selectedMenu",void 0),__decorate$D([e$3({type:Array})],WcTopicMenuPage.prototype,"imageCategories",void 0),__decorate$D([e$3({type:Array})],WcTopicMenuPage.prototype,"keywords",void 0),__decorate$D([i$1(".menu-button-wrapper")],WcTopicMenuPage.prototype,"menuButtonWrapper",void 0),WcTopicMenuPage=__decorate$D([e$4("wc-topic-menu-page")],WcTopicMenuPage);var __decorate$C=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPrintSettingsPage=class extends s$1{constructor(){super(),this.settingsList=[],this.selectedSetting=void 0,this.changedSettingName="",this.newSettingName="",this.selectedSettingDto={outputType:"pdf",dpi:300,outputSpotColors:!0,linearize:!1,outputPdfX4:!1,outputLayers:!1,skipDefaultImages:!0,optimizeImages:!0,omitCmykProfile:!1,outputDeviceCmyk:!1,jpegCompression:95,proof:!1,allowJpegConversion:!0,cropToContent:!1,upscale:!1,productType:"",combine:!1,atomyxProfile:"",fps:30,impositionName:"",taggedPdf:!1,disableBleed:!1},this.impositions=[],this.nameErrorMessage="",this.loading=!1,this.deleting=!1,this.onChange=(e,t)=>o=>{const r=o.target;let i;i="checkbox"===r.type?r.checked:t?t(r.value):r.value||"",this.selectedSettingDto={...this.selectedSettingDto,[e]:i}}}connectedCallback(){super.connectedCallback(),location.hash="#print-settings",this.loadPrintSettings(),this.loadAtomyxProfiles(),this.loadImpositions()}static get styles(){return[settingsStyles,i$4`
        * {
            color: #555555;
        }

        .card {
            background: transparent;
            margin-bottom: 70px;
            border-bottom: 2px solid var(--printess-red);
        }

        .table-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .table-header div {
            color: white;
        }

        .table-body {
            display: flex;
            padding: 0px;
            min-height: 50vh;
        }

        .error-text {
            color: var(--printess-red);
        }

        form, .form {
            width: 100%;
            display: grid;
            margin-top: 10px;
            margin-bottom: 0;
            grid-template-columns: 200px calc(100% - 200px);
        }

        form div, .form div {
            display: flex;
            line-height: 25px;
            margin-left: 0;
            text-align: left;
            padding: 10px;
            padding-bottom: 2px;
            align-items: center;
            min-width: 100px;
        }

        .form-input {
            color: #555;
            font-family: var(--printess-text-font);
            font-size: 14px;
            width: 100%;
            outline: none;
            border: 1px solid #ccc;
            padding: 7px 10px;
            border-radius: 4px;
            background-color: rgba(210, 0, 100, 0.04);
        }

        .control {
            width: 100%;
            display: grid;
            grid-template-columns: 200px 1fr;
        }

        .menu {
            height: auto;
            background: var(--printess-lightred);
            border-top: 1px solid var(--printess-lightred);
        }

        .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 10px;
            width: calc(100% - 20px);
        }

        .menu-entry {
            display: flex;
            align-items: center;
            padding: 10px 20px;
            font-size: 14px;
            border-bottom: 1px solid #f0b6ce;
        }

        .menu-entry:hover {
            color: #fff;
            background-color: var(--printess-red);
            cursor: pointer;
        }

        .new-entry {
            color: var(--printess-red);
        }
        .new-entry:hover {
            color: #fff;
        }

        .selected {
            color: #fff;
            background-color: var(--printess-red);
        }
        .selected:hover {
            cursor: default;
        }

        .plus-icon {
            margin-right: 10px;
            fill: var(--printess-red);
        }
        .menu-entry:hover .plus-icon, .menu-entry.selected .plus-icon {
            fill: var(--printess-lightred);
        }

        .directory-url {
            margin-bottom: 10px;
            line-break: anywhere;
        }
        .directory-url p {
            margin: 5px 0px;
            font-weight: 700;
        }
        .directory-url div {
            font-size: 12px;
        }

        .settings {
            padding: 7px 20px;
            margin: 10px 10px 0px 0px;
        }

        .settings.green {
            background-color: var(--printess-green);
        }
        .settings.red {
            background-color: var(--printess-red);
        }

        .settings:disabled {
            background-color: #858585;
            cursor: not-allowed;
        }

        .settings span {
            color: white;
        }

        .spinner,
        .spinner:after {
            border-radius: 50%;
            width: 2em;
            height: 2em;
            min-width: 2em;
            padding: 2px;
        }
        .spinner {
            font-size: 6px;
            position: relative;
            border-top: 0.5em solid rgba(255,255,255, 0.2);
            border-right: 0.5em solid rgba(255,255,255, 0.2);
            border-bottom: 0.5em solid rgba(255,255,255, 0.2);
            border-left: 0.5em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
            margin-right: 10px;
        }
        @-webkit-keyframes load8 {
            0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            }
            100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            }
            100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            }
        }
    `]}onNameChange(e){this.resetErrors();const t=e.target.value;clearTimeout(this.debounceTimer),t!==this.selectedSetting?(this.loading=!0,this.debounceTimer=window.setTimeout(()=>{this.settingsList.includes(t)?this.nameErrorMessage="The name must be unique":this.selectedSetting?(this.changedSettingName=t,this.newSettingName=""):(this.changedSettingName="",this.newSettingName=t),this.loading=!1},300)):this.changedSettingName=""}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadPrintSettings(e=!1){const t=await api.readUserSettings({keys:["print-settings-list"]});if(t instanceof ServerErrorResponse$2)alert(t.message);else if(t["print-settings-list"]){this.settingsList=JSON.parse(t["print-settings-list"]);const o=this.settingsList.length;if(o){const t=e?o-1:0;this.setSelectedPrintSetting(this.settingsList[t])}}}async setSelectedPrintSetting(e){if(this.resetErrors(),e){const t="print-settings."+e,o=await api.readUserSettings({keys:[t]});o instanceof ServerErrorResponse$2?this.showError(o):o[t]&&(this.selectedSetting=e,this.changedSettingName="",this.newSettingName="",this.selectedSettingDto=JSON.parse(o[t]))}else this.selectedSetting=void 0,this.changedSettingName="",this.newSettingName="",this.selectedSettingDto={outputType:"pdf",dpi:300,outputSpotColors:!0,linearize:!1,outputPdfX4:!1,outputLayers:!1,skipDefaultImages:!0,optimizeImages:!0,omitCmykProfile:!1,outputDeviceCmyk:!1,jpegCompression:95,proof:!1,allowJpegConversion:!0,cropToContent:!1,upscale:!1,productType:"",combine:!1,fps:30,disableBleed:!1,taggedPdf:!1}}resetLoading(){this.loading=!1,this.resetErrors(),this.setSelectedPrintSetting(void 0)}async saveCurrentSetting(){if(this.selectedSettingDto&&this.selectedSetting){const e=this.changedSettingName?this.changedSettingName:this.selectedSetting;await this.saveSettingAs(e)}}async saveNewSetting(){this.selectedSettingDto&&this.newSettingName&&await this.saveSettingAs(this.newSettingName)}async saveSettingAs(e){if(this.selectedSettingDto&&e){this.loading=!0,this.debounceTimer=window.setTimeout(()=>{this.loading=!1},1e3);const t="print-settings."+e,o=await api.writeUserSetting({key:t,json:JSON.stringify(this.selectedSettingDto)});if(o instanceof ServerErrorResponse$2)this.showError(o);else{const t=[...new Set([...this.settingsList,e])],o=await api.writeUserSetting({key:"print-settings-list",json:JSON.stringify(t)});o instanceof ServerErrorResponse$2?this.showError(o):(await this.loadPrintSettings(),this.setSelectedPrintSetting(e))}}}async deleteCurrentSetting(){if(!this.selectedSettingDto||!this.selectedSetting)return;new WcDialogConfirmRemoval(this.selectedSetting,"Print Setting").showDialog(async e=>{if("sure"!==e||!this.selectedSettingDto||!this.selectedSetting)return;this.deleting=!0,window.setTimeout(()=>{this.deleting=!1},1e3);const t="print-settings."+this.selectedSetting,o=await api.deleteUserSetting({key:t});if(o instanceof ServerErrorResponse$2)alert(o.message);else{this.deleting=!0,window.setTimeout(()=>{this.deleting=!1},1e3);const e=this.settingsList.filter(e=>e!==this.selectedSetting),t=await api.writeUserSetting({key:"print-settings-list",json:JSON.stringify(e)});t instanceof ServerErrorResponse$2?this.showError(t):(await this.loadPrintSettings(),this.setSelectedPrintSetting(void 0))}})}async loadAtomyxProfiles(){const e=await api.loadAtomxyProfiles();e instanceof ServerErrorResponse$2?this.showError(e):this.atomyxProfiles=e}async loadImpositions(){const e=await api.readUserSettings({keys:["impositionsWithoutThumbnail"]});e instanceof ServerErrorResponse$2?this.showError(e):e.impositionsWithoutThumbnail&&(this.impositions=JSON.parse(e.impositionsWithoutThumbnail))}changedNameDiffersFromSelected(){return!!this.changedSettingName&&this.changedSettingName!==this.selectedSetting}resetErrors(){this.nameErrorMessage=""}hasErrors(){return this.nameErrorMessage.length>0}render(){return x`
      <h3 class="topic">Print Settings</h3>
      <p style="font-size: 14px;">
        Here you can create Print Setting Templates for production jobs.
      </p>


      <div class="card red">

        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>Current Settings</div>
          </h3>
          <wc-icon icon="plus" primaryColor="head-toolbar" style="margin-right: 20px; cursor: pointer;" @click=${()=>this.resetLoading()}></wc-icon>
        </div>

        <div class="table-body">
          <div class="control">

            <div class="menu">
              ${c(this.settingsList.sort((e,t)=>e.localeCompare(t)),e=>e,e=>x`
              <div class="${o({"menu-entry":!0,selected:this.selectedSetting===e})}" @click=${()=>this.setSelectedPrintSetting(e)}>${e}</div>
              `)}

              <div class="${o({"menu-entry":!0,"new-entry":!0,selected:!this.selectedSettingDto})}" @click=${()=>this.resetLoading()}>
                <wc-icon icon="plus" primaryColor="light" class="plus-icon"></wc-icon>
                New Setting
              </div>
            </div>

            <div class="content">
                <form id="theForm">
                    <div>Name:</div>
                    <div style="display: flex; flex-direction: column">
                        <input type="text" name="label" class="form-input"
                        @keyup=${this.onNameChange}
                        .value=${this.selectedSetting?this.selectedSetting:this.changedSettingName} />
                        <div class="error-text">${this.nameErrorMessage}</div>
                    </div>
                    <div>Output Type:</div>
                    <div>
                        <select id="fileFormat" @change=${this.onChange("outputType")} .value=${this.selectedSettingDto?.outputType??"pdf"}>
                            <option value="pdf">PDF</option>
                            <option value="png">PNG</option>
                            <option value="jpg">JPG</option>
                            <option value="gif">Animated GIF</option>
                            <option value="movie">Movie</option>
                        </select>
                    </div>

                    ${["movie","gif"].includes(this.selectedSettingDto?.outputType??"")?x``:x`
                    <div>Dpi:</div>
                    <div>
                        <input type="number" min="1" max="10000" @change=${this.onChange("dpi",e=>parseInt(e))} .value=${this.selectedSettingDto?.dpi?.toString()??"300"}>
                    </div>
                    <div>Skip Default Images:</div>
                    <div>
                        <input type="checkbox" @change=${this.onChange("skipDefaultImages")} .checked=${this.selectedSettingDto?.skipDefaultImages??!1}>
                    </div>
                    <div>Jpeg Compression:</div>
                    <div>
                        <input type="number" min="1" max="100" @change=${this.onChange("jpegCompression")} .value=${this.selectedSettingDto?.jpegCompression?.toString()??"90"}>
                    </div>`}

                    ${"pdf"===this.selectedSettingDto?.outputType?x`
                        <div>Spot Colors:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("outputSpotColors")} .checked=${this.selectedSettingDto?.outputSpotColors??!0}>
                        </div>
                        <div>PDF X/4:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("outputPdfX4")} .checked=${this.selectedSettingDto?.outputPdfX4??!1}>
                        </div>
                        <div>Output Layers:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("outputLayers")} .checked=${this.selectedSettingDto?.outputLayers??!1}>
                        </div>
                        <div>Omit CMYK profile:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("omitCmykProfile")} .checked=${this.selectedSettingDto?.omitCmykProfile??!1}>
                        </div>
                        <div>Output Device CMYK:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("outputDeviceCmyk")} .checked=${this.selectedSettingDto?.outputDeviceCmyk??!1}>
                        </div>
                        <div>Output Linearized Pdf:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("linearize")} .checked=${this.selectedSettingDto?.linearize??!1}>
                        </div>
                        <div>Allow conversion to Jpeg:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("allowJpegConversion")} .checked=${this.selectedSettingDto?.allowJpegConversion??!0}>
                        </div>
                        <div>Output Proof Pdf:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("proof")} .checked=${this.selectedSettingDto?.proof??!1}>
                        </div>
                        <div>Disable Bleed:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("disableBleed")} .checked=${this.selectedSettingDto?.disableBleed??!1}>
                        </div>
                        <div>Output Tagged Pdf:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("taggedPdf")} .checked=${this.selectedSettingDto?.taggedPdf??!1}>
                        </div>
                        <div>Combine Pdf files:</div>
                        <div>
                            <input type="checkbox" @change=${this.onChange("combine")} .checked=${this.selectedSettingDto?.combine??!1}>
                        </div>
                        <div>Imposition:</div>
                        <div>
                          <select @change=${this.onChange("impositionName")} class="card-input">
                            <option value="" .selected=${""===(this.selectedSettingDto?.impositionName??"")}>None</option>
                            ${this.impositions?c(this.impositions,e=>e,e=>x`
                            <option value=${e} .selected=${(this.selectedSettingDto?.impositionName??"")===e}>${e}</option>
                            `):""}
                          </select>
                        </div>
                        ${this.atomyxProfiles&&this.atomyxProfiles.files?x`
                            <div>Atomyx Profile:</div>
                            <div>
                                <select @change=${this.onChange("atomyxProfile")} class="card-input">
                                    ${this.atomyxProfiles?c(this.atomyxProfiles.files,e=>e.filename,e=>x`
                                    <option value=${e.path} .selected=${this.selectedSettingDto?.atomyxProfile===e.path}>${e.filename}</option>
                                    `):""}
                                </select>
                            </div>
                        `:""}
                            `:""}

                    ${["movie","gif"].includes(this.selectedSettingDto?.outputType??"")?x`
                    <div>Frames per second (fps):</div>
                    <div>
                        <input type="number" min="1" max="30" @change=${this.onChange("fps")} .value=${this.selectedSettingDto?.fps?.toString()??"30"}>
                    </div>`:x`
                    <div>Crop To Content:</div>
                    <div>
                        <input type="checkbox" @change=${this.onChange("cropToContent")} .checked=${this.selectedSettingDto?.cropToContent??!1}>
                    </div>
                    <div>Automatic Image Upscale:</div>
                    <div>
                        <input type="checkbox" @change=${this.onChange("upscale")} .checked=${this.selectedSettingDto?.upscale??!1}>
                    </div>`}

                    <div>Product Type:</div>
                    <div>
                        <input type="text" @change=${this.onChange("productType")} .value=${this.selectedSettingDto?.productType??""}>
                    </div>
                </form>
                ${this.selectedSetting?x`
                    <div style="display: flex;">
                        <button class="settings green" @click=${this.saveCurrentSetting} style="display: flex; margin-right: 10px;"
                            ?disabled=${this.hasErrors()}
                        >
                            ${this.loading?x`<div class="spinner"></div>`:""}
                            <span>Save ${this.changedNameDiffersFromSelected()?"as":""}</span>
                        </button>
                        <button class="settings red" @click=${this.deleteCurrentSetting} style="display: flex; margin-right: 10px;"
                            ?disabled=${this.hasErrors()}
                        >
                            ${this.deleting?x`<div class="spinner"></div><span>Delete Setting</span>`:x`<span>Delete Setting</span>`}
                        </button>
                    </div>
                `:x`
                    <div style="display: flex;">
                        <button class="settings green" @click=${this.saveNewSetting} style="display: flex; margin-right: 10px;"
                            ?disabled=${this.hasErrors()}
                        >
                            ${this.loading?x`<div class="spinner"></div><span>Save</span>`:x`<span>Save</span>`}
                        </button>
                    </div>
                `}
            </div>

          </div>
        </div>

      </div>
    `}};__decorate$C([e$3({type:Array})],WcPrintSettingsPage.prototype,"settingsList",void 0),__decorate$C([e$3({type:String})],WcPrintSettingsPage.prototype,"selectedSetting",void 0),__decorate$C([e$3({attribute:!1,type:String})],WcPrintSettingsPage.prototype,"changedSettingName",void 0),__decorate$C([e$3({attribute:!1,type:String})],WcPrintSettingsPage.prototype,"newSettingName",void 0),__decorate$C([e$3({attribute:!1,type:Object})],WcPrintSettingsPage.prototype,"selectedSettingDto",void 0),__decorate$C([e$3({attribute:!1,type:Object})],WcPrintSettingsPage.prototype,"atomyxProfiles",void 0),__decorate$C([e$3({attribute:!1,type:Array})],WcPrintSettingsPage.prototype,"impositions",void 0),__decorate$C([e$3({attribute:!1,type:String})],WcPrintSettingsPage.prototype,"nameErrorMessage",void 0),__decorate$C([e$3({attribute:!1,type:Boolean})],WcPrintSettingsPage.prototype,"loading",void 0),__decorate$C([e$3({attribute:!1,type:Boolean})],WcPrintSettingsPage.prototype,"deleting",void 0),__decorate$C([t$1()],WcPrintSettingsPage.prototype,"debounceTimer",void 0),WcPrintSettingsPage=__decorate$C([e$4("wc-print-settings-page")],WcPrintSettingsPage);let ServerErrorResponse$1=class e{constructor(e,t){this.code=e,this.message=t}static async Create(t){if("application/json; charset=utf-8"===t.headers.get("Content-Type")){const o=await t.json();return"number"==typeof o.c&&"string"==typeof o.m?new e(o.c,o.m):new e(t.status,o)}const o=await t.text();return new e(t.status,t.statusText+" => "+o)}};class PrintessApiSlim{constructor(e,t){this.urlPrefix=e||"http://localhost:5000",this.token=t}async postPlainText(e,t){e.startsWith("/")||(e="/"+e);return postPlainText(this.urlPrefix+e,t,this.token)}async postJson(e,t){e.startsWith("/")||(e="/"+e);return postJson(this.urlPrefix+e,t,this.token)}async postJsonTyped(e,t){e.startsWith("/")||(e="/"+e);const o=this.urlPrefix+e,r=await postJson(o,t,this.token);return 200===r.status?await r.json():await ServerErrorResponse$1.Create(r)}async postJsonVoid(e,t){e.startsWith("/")||(e="/"+e);const o=this.urlPrefix+e,r=await postJson(o,t,this.token);if(200!==r.status)return await ServerErrorResponse$1.Create(r)}async writeUserSetting(e){const t=await this.postJson("/user/setting/write",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$1.Create(t)}async writeUserSettings(e){const t=await this.postJson("/user/settings/write",JSON.stringify({settings:e}));if(200!==t.status)return await ServerErrorResponse$1.Create(t)}async readUserSettings(e){const t=await this.postJson("/user/settings/read",JSON.stringify(e));return 200===t.status?await t.json():await ServerErrorResponse$1.Create(t)}async readUserSettingsSlim(e){const t=await this.readUserSettings(e);if(t instanceof ServerErrorResponse$1)throw t;return t}async deleteUserSetting(e){const t=await this.postJson("/user/setting/delete",JSON.stringify(e));if(200!==t.status)return await ServerErrorResponse$1.Create(t);console.log('User setting has been deleted with key: "'+e.key+'"')}async loadSortIndices(){const e=await this.readUserSettings({keys:["AllFeaturedOrHiddenLayouts"]});if(e instanceof ServerErrorResponse$1)throw e;return e.AllFeaturedOrHiddenLayouts?JSON.parse(e.AllFeaturedOrHiddenLayouts):[]}async loadKeywordMenu(e){const t=await this.readUserSettings({keys:[e]});if(t instanceof ServerErrorResponse$1)throw new Error(t.message);const o=t[e];if(!o)throw new Error("Could not find menu with id="+e);return JSON.parse(o)}}class ShopifyApi{constructor(){this._products2Tag=[],this._productTaggingInProgress=!1,this.shopSystem="Shopify"}doHandleUrlRequest(e){return e.hasOwnProperty("host")&&e.hasOwnProperty("shop")&&e.hasOwnProperty("hmac")&&e.hasOwnProperty("shopify")}static removeUrlParameters(e,t=null){const o=new URL(e);return null===t?o.search="":Array.isArray(t)?t.forEach(e=>{o.searchParams.delete(e)}):"string"==typeof t&&o.searchParams.delete(t),o.href}static getShopifyTokenUpdateUrl(){const e=this.removeUrlParameters(window.location.href),t=new URL(e);return t.searchParams.append("shopify","token"),t.href}async loginToShopifyIntegration(e){const t=await api.postJsonTyped("shops/shopify/integrations/login",JSON.stringify(e));if(!(t instanceof ServerErrorResponse$1)){const e=t;!e.failed&&e.integration&&e.integration.metaDataJson&&"null"!==e.integration.metaDataJson&&(e.integration.metaData=JSON.parse(e.integration.metaDataJson))}return t}async requestAccessTokenAndInstallIntegration(e){const t=await api.postJsonTyped("shops/shopify/integrations/token",JSON.stringify(e));if(!(t instanceof ServerErrorResponse$1)){const e=t;!e.failed&&e.integration&&e.integration.metaDataJson&&"null"!==e.integration.metaDataJson&&(e.integration.metaData=JSON.parse(e.integration.metaDataJson))}return t}async handleUrlRequest(e){if(!this.doHandleUrlRequest(e))return null;switch(e.shopify){case"login":{const t=await this.loginToShopifyIntegration(e);if(console.log("login"),console.log(t),t instanceof ServerErrorResponse$1)return{failed:!0,errorMessage:"Unable to initialize shopify integration: "+t.message,finished:!1};if(!0===t.failed)return{failed:!0,errorMessage:"Unable to initialize shopify integration: "+t.errorMessage,finished:!1};if("RedirectToAuthentication"!==t.followUpAction)return{failed:!1,integration:t.integration,finished:!0};{const e=t;if("RedirectToAuthentication"===e.followUpAction)return window.location.href=e.redirectUrl.replace("{auth_redirect_uri}",encodeURIComponent(ShopifyApi.getShopifyTokenUpdateUrl())),{failed:!1,finished:!1}}break}case"token":{const t=await this.requestAccessTokenAndInstallIntegration(e);return console.log("token"),console.log(t),t instanceof ServerErrorResponse$1?{failed:!0,errorMessage:"Unable to initialize shopify integration: "+t.message,finished:!1}:!0===t.failed?{failed:!0,errorMessage:"Unable to initialize shopify integration: "+t.errorMessage,finished:!1}:{failed:!1,finished:!0,integration:t.integration}}default:return null}return null}static handleShopifyErrors(e){let t="";if(e&&e.hasErrors&&(e.errors&&e.errors.length>0&&e.errors.forEach(e=>{t+=e.message+" \r\n"}),e.userErrors&&e.userErrors.forEach(e=>{t+="["+e.field+"]: "+e.message+" \r\n"})),t)throw t}queryProductsInternal(e,t){return api.postJsonTyped("shops/shopify/productquery",JSON.stringify({domain:e,...t}))}tagProductInternal(e,t,o){return api.postJsonTyped("shops/shopify/tag/product",JSON.stringify({domain:e,productId:t,tags:o}))}untagProductInternal(e,t,o){return api.postJsonTyped("shops/shopify/untag/product",JSON.stringify({domain:e,productId:t,tags:o}))}updateProductMetaFieldValues(e,t,o){return api.postJsonTyped("shops/shopify/productupdatematefields",JSON.stringify({domain:e,productId:t,values:o}))}tagProducts(e,t){const o=this;if(!t||t.length<1)return;if(this._products2Tag=this._products2Tag.concat(t),this._productTaggingInProgress)return;this._productTaggingInProgress=!0;let r=this._products2Tag;this._products2Tag=[],setTimeout(async function(){for(let t=0;t<r.length;++t)await o.tagProductInternal(e||"",r[t].id,["Printess"]),t===r.length-1&&o._products2Tag.length>0&&(t=-1,r=o._products2Tag,o._products2Tag=[]);o._productTaggingInProgress=!1},0)}async queryProducts(e,t){const o={resultCount:t.resultsPerRequest??20,printessProductsOnly:t.printessProductsOnly??!1,metaFields:t.metaFields??[]};t.cursor&&(o.afterCursor=t.cursor||""),t.searchTerm&&(o.searchTerm=t.searchTerm);const r=await PrintessShopIntegrationApi.shopify.queryProductsInternal(e,o);if(r instanceof ServerErrorResponse$1)throw`[${r.code}]: ${r.message}`;ShopifyApi.handleShopifyErrors(r),this.tagProducts(e,(r.data??[]).filter(e=>e.templateName&&!(e.tags??[]).find(e=>"Printess"===e)));for(const e of r.data??[]){const t=e.metaData.productDefinitionId?.trim();e.metaData.productDefinitionId=t||"-1"}return{products:r.data??[],cursor:r.pageInfo?.endCursor||""}}async tagProduct(e,t,o){const r=await this.tagProductInternal(e||"",t,Array.isArray(o)?o:[o]);if(r instanceof ServerErrorResponse$1)throw`[${r.code}]: ${r.message}`;return ShopifyApi.handleShopifyErrors(r),r.data??[]}async untagProduct(e,t,o){const r=await this.untagProductInternal(e||"",t,Array.isArray(o)?o:[o]);if(r instanceof ServerErrorResponse$1)throw`[${r.code}]: ${r.message}`;return ShopifyApi.handleShopifyErrors(r),r.data??[]}async saveProductChanges(e,t,o){const r=await this.updateProductMetaFieldValues(e||"",t,o);if(r instanceof ServerErrorResponse$1)throw`[${r.code}]: ${r.message}`;return ShopifyApi.handleShopifyErrors(r),r.data??0}}class PrintessShopIntegrationApi{static transformIntegrationMetaData(e){e.metaDataJson&&"null"!==e.metaDataJson&&(e.metaData=JSON.parse(e.metaDataJson))}static isPlainObject(e){return null!==e&&("object"==typeof e&&"[object Object]"===Object.prototype.toString.call(e))}static getApiForUrlRequest(e){if(e)for(const[t,o]of Object.entries(this))if(this.isPlainObject(o)&&"function"==typeof o.doHandleUrlRequest&&!0===o.doHandleUrlRequest(e))return o;return null}static canHandleUrlRequest(e){return!this.requestHandlingRunning&&null!==PrintessShopIntegrationApi.getApiForUrlRequest(e)}static async handleUrlRequest(e){const t=PrintessShopIntegrationApi.getApiForUrlRequest(e);if(t){this.requestHandlingRunning=!0;try{return await t.handleUrlRequest(e)}finally{this.requestHandlingRunning=!1}}return null}static async getShopIntegrations(e){const t=await api.postJsonTyped("shopintegration/list",JSON.stringify(e));if(t instanceof ServerErrorResponse$1){const e=t;throw`Unable to query list of shop integrations: [${e.code}] ${e.message}`}const o=t;return o.forEach(e=>{PrintessShopIntegrationApi.transformIntegrationMetaData(e)}),o}static async updateShopIntegration(e){const t=await api.postJsonTyped("shopintegration/update",JSON.stringify(e));if(t instanceof ServerErrorResponse$1){const e=t;throw`Unable to update shop integration: [${e.code}] ${e.message}`}const o=t;return PrintessShopIntegrationApi.transformIntegrationMetaData(o),o}static async deleteShopIntegration(e){const t=await api.postJsonTyped("shopintegration/delete",JSON.stringify({shopDomain:e}));if(t instanceof ServerErrorResponse$1){const e=t;throw`Unable to delete shop integration: [${e.code}] ${e.message}`}const o=t;return PrintessShopIntegrationApi.transformIntegrationMetaData(o),o}}PrintessShopIntegrationApi.shopify=new ShopifyApi,PrintessShopIntegrationApi.requestHandlingRunning=!1;class ShopCss{static convertColor(e){switch(e){case"Pink":return i$4`var(--printess-pink)`;case"LightPink":return i$4`var(--printess-lightpink)`;case"PinkHover":return i$4`var(--printess-pinkHover)`;case"LightGreen":return i$4`var(--printess-lightgreen)`;case"GreenHover":return i$4`var(--printess-greenHover)`;case"Blue":return i$4`var(--printess-blue)`;case"LightBlue":return i$4`var(--printess-lightblue)`;case"BlueHover":return i$4`var(--printess-blueHover)`;case"Magenta":return i$4`var(--printess-magenta)`;case"LightMagenta":return i$4`var(--printess-lightmagenta)`;case"MagentaHover":return i$4`var(--printess-magentaHover)`;case"Red":return i$4`var(--printess-red)`;case"LightRed":return i$4`var(--printess-lightred)`;case"RedHover":return i$4`var(--printess-redHover)`;case"Navbar":return i$4`var(--printess-navbar)`;case"Yellow":return i$4`var(--printess-yellow)`;case"LightYellow":return i$4`var(--printess-lightyellow)`;case"YellowHover":return i$4`var(--printess-yellowHover)`;default:return i$4`var(--printess-green)`}}static hoverColor(e){switch(e){case"Pink":case"LightPink":case"PinkHover":return i$4`var(--printess-pinkHover)`;case"Blue":case"LightBlue":case"BlueHover":return i$4`var(--printess-blueHover)`;case"Magenta":case"LightMagenta":case"MagentaHover":return i$4`var(--printess-magentaHover)`;case"Red":case"LightRed":case"RedHover":return i$4`var(--printess-redHover)`;case"Navbar":return i$4`var(--printess-navbar)`;case"Yellow":case"LightYellow":case"YellowHover":return i$4`var(--printess-yellowHover)`;default:return i$4`var(--printess-greenHover)`}}static lightColor(e){switch(e){case"Pink":case"LightPink":case"PinkHover":return i$4`var(--printess-lightpink)`;case"Blue":case"LightBlue":case"BlueHover":return i$4`var(--printess-lightblue)`;case"Magenta":case"LightMagenta":case"MagentaHover":return i$4`var(--printess-lightmagenta)`;case"Red":case"LightRed":case"RedHover":return i$4`var(--printess-lightred)`;case"Navbar":return i$4`var(--printess-navbar)`;case"Yellow":case"LightYellow":case"YellowHover":return i$4`var(--printess-lightyellow)`;default:return i$4`var(--printess-lightgreem)`}}static inputCss(e){return i$4`
      input[type="text"], select {
        color: rgb(85, 85, 85);
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid rgb(204, 204, 204);
        background-color: ${ShopCss.convertColor(e)}
        padding: 7px 10px;
        border-radius: 4px;
        margin-right: 10px;
      }
    `}static buttonCss(e){return i$4`
      button {
          padding: 10px 20px;
          border-radius: 4px;
          background-color: ${ShopCss.convertColor(e)};
          border: none;
          height: 40px;
          font-family: var(--printess-font);
          cursor: pointer;
          font-weight: 700;
          color: white;
        }
    `}static dialogCss(e){return i$4`
      dialog {
        position: fixed;
        transform: translate(-50%, -50%);
        border: 1px solid #ccc;
        padding: 20px;
        background-color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: ${e}px;
      }

      dialog::backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
    `}static spinnerCss(e){return i$4`
      ${e} {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        animation: spin-loader 1s linear infinite;
        display: none;
      }

      @keyframes spin-loader {
        to {
            transform:rotate(360deg)
          }
      }
    `}static spinnerButton(e,t){return i$4`
      ${e} {
        display: inline-flex;
        align-items: center;
        flex: 1 0 auto;
        justify-content: center;
      }

      ${this.spinnerCss(i$4`${e} > svg`)}
    `}}ShopCss.Color={pink:"Pink",lightPink:"LightPink",pinkHover:"PinkHover",green:"Green",lightGreen:"LightGreen",greenHover:"GreenHover",blue:"Blue",lightBlue:"LightBlue",blueHover:"BlueHover",magenta:"Magenta",lightMagenta:"LightMagenta",magentaHover:"MagentaHover",red:"Red",lightRed:"LightRed",redHover:"RedHover",navbar:"Navbar",yellow:"Yellow",lightYellow:"LightYellow",yellowHover:"YellowHover"};var WcShopifyConfiguration_1,__decorate$B=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcShopifyConfiguration=WcShopifyConfiguration_1=class extends s$1{constructor(){super(...arguments),this.shopifyIntegration=null,this.saveButtonLabel="Save",this.cancelButtonLabel="Discard Changes",this.hookId="",this.hookSecret="",this.label="",this.shopDomain="",this.callbackUrl="",this.useCartTransform=!1,this.hasChanges=!1,this.useDropshipping=!1}static get styles(){return[userProfileStyles,ShopCss.buttonCss(ShopCss.Color.blue),i$4`
      input[type="checkbox"].profile-input {
        width: auto !important;
      }
      input[type="checkbox"].profile-input:checked {
        accent-color: #f8faed;
      }
      input.profile-input {
        background-color: var(--printess-lightblue);
      }
      .shop-link {
        background-color: var(--printess-blue);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        text-decoration: none;
      }

      .shop-link:hover {
        background-color: var(--printess-blueHover);
      }
      `]}updateInternalStateValues(){const e=this.shopifyIntegration;this.hookId=e?e.hookId:"",this.label=e?e.label:"",this.shopDomain=e?e.shopDomain:"",this.callbackUrl=e&&e.metaData&&e.metaData.callbackUrl?e.metaData?.callbackUrl:"",this.hookSecret=e?e.hookSecret:"",this.useCartTransform=!!(e&&e.installedComponents&&e.installedComponents.indexOf("cartTransform")>-1)}static editArray(e,t,o){o&&!e&&(e=[]);const r=e.indexOf(t);return o?r<0&&e.push(t):r>-1&&e.splice(r,1),e}updateConfigValues(){this.shopifyIntegration&&(this.shopifyIntegration.label=this.label,this.shopifyIntegration.hookSecret=this.hookSecret,this.shopifyIntegration.installedComponents=WcShopifyConfiguration_1.editArray(this.shopifyIntegration.installedComponents,"cartTransform",this.useCartTransform),this.callbackUrl?this.shopifyIntegration.metaData?this.shopifyIntegration.metaData.callbackUrl=this.callbackUrl:this.shopifyIntegration.metaData={callbackUrl:this.callbackUrl}:this.shopifyIntegration.metaData&&this.shopifyIntegration.metaData.callbackUrl&&delete this.shopifyIntegration.metaData.callbackUrl)}reevaluateHasChangesState(){if(!this.shopifyIntegration)return void(this.hasChanges=!1);if(this.label!==this.shopifyIntegration.label)return void(this.hasChanges=!0);if(this.hookSecret!==this.shopifyIntegration.hookSecret)return void(this.hasChanges=!0);if(this.callbackUrl){if(!this.shopifyIntegration.metaData||!this.shopifyIntegration.metaData.callbackUrl||this.callbackUrl!==this.shopifyIntegration.metaData.callbackUrl)return void(this.hasChanges=!0)}else if(this.shopifyIntegration.metaData&&this.shopifyIntegration.metaData.callbackUrl)return void(this.hasChanges=!0);(this.shopifyIntegration.installedComponents&&this.shopifyIntegration.installedComponents.indexOf("cartTransform")>-1)===this.useCartTransform?this.hasChanges=!1:this.hasChanges=!0}connectedCallback(){super.connectedCallback(),this.updateInternalStateValues()}updated(e){e.has("shopifyIntegration")&&this.updateInternalStateValues()}onSaveClick(){const e=this;if(this.hasChanges)try{const t=new ShopIntegrationStatusEvent("status-message","savingChanges");t.autoHide=!1,t.progressIcon=!0,t.successIcon=!1,this.dispatchEvent(t);const o={...this.shopifyIntegration?.metaData};o.callbackUrl=this.callbackUrl||"";const r={label:this.label||"",metaData:o,shopDomain:this.shopifyIntegration?.shopDomain||"",componentsToAdd:[],componentsToRemove:[]};this.hookSecret!=this.shopifyIntegration?.hookSecret&&(r.hookSecret=this.hookSecret);const i=this.shopifyIntegration?.installedComponents&&this.shopifyIntegration.installedComponents.indexOf("cartTransform")>-1;this.useCartTransform!==i&&(this.useCartTransform?r.componentsToAdd?.push("cartTransform"):r.componentsToRemove?.push("cartTransform")),PrintessShopIntegrationApi.updateShopIntegration(r).catch(t=>{e.dispatchEvent(new ShopIntegrationStatusEvent("status-message","")),e.dispatchEvent(ShopIntegrationStatusEvent.createErrorMessage("savingFailed",t))}).then(t=>{e.updateConfigValues(),e.reevaluateHasChangesState();const o=new ShopIntegrationStatusEvent("status-message","savingSuccessful");o.autoHide=!0,o.progressIcon=!1,o.successIcon=!0,e.dispatchEvent(o)})}catch(e){this.dispatchEvent(new ShopIntegrationStatusEvent("status-message","")),this.dispatchEvent(ShopIntegrationStatusEvent.createErrorMessage("savingFailed",e)),console.error(e)}}onDiscardChanges(){this.updateInternalStateValues(),this.reevaluateHasChangesState()}render(){return x`
      <div class="card lightblue">
        <div class="table-body">
          <dl>
            ${this.hookId?x`
                    <dt>Internal Shopify Domain:</dt>
                    <dd>
                      <span>${this.shopDomain}</span>
                      <a href=${`https://${this.shopDomain}`} target="_blank" class="shop-link">
                        Visit
                      </a>
                    </dd>
                    <dt>Webhook Url:</dt>
                    <dd><span>${"https://api.printess.com/shops/shopify/order/"+this.hookId}</span></dd>
                `:""}
            <dt>Webhook Signing Key:</dt>
            <dd><input class="profile-input" @change=${e=>{this.hookSecret=e.target.value,this.reevaluateHasChangesState()}} name="hookSecret" .value=${this.hookSecret} placeholder="The signing key for your shopify webhooks" @keydown=${e=>{"Enter"===e.key&&(this.hookSecret=e.target?.value||"",this.reevaluateHasChangesState())}}></dd>

            <dt>Label:</dt>
            <dd><input class="profile-input" @change=${e=>{this.label=e.target.value,this.reevaluateHasChangesState()}} name="label" .value=${this.label} placeholder="The display name for this store" @keydown=${e=>{"Enter"===e.key&&(this.label=e.target?.value||"",this.reevaluateHasChangesState())}}></dd>
            <dt>Production Callback Url:</dt>
            <dd><input class="profile-input" @change=${e=>{this.callbackUrl=e.target.value,this.reevaluateHasChangesState()}} name="callbackUrl" .value=${this.callbackUrl} placeholder="Production finished callback URL" @keydown=${e=>{"Enter"===e.key&&(this.callbackUrl=e.target?.value||"",this.reevaluateHasChangesState())}}></dd>

            <dt style="display: none">Use cart transform (e.g. Additional page pricing):</dt>
            <dd style="display: none"><input class="profile-input" type="checkbox" @click=${e=>{this.useCartTransform=!0===e.target.checked,this.reevaluateHasChangesState()}} name="hookSecret" .checked=${this.useCartTransform}></dd>
          </dl>

          <div class="button-wrapper" style="display: flex; flex-direction: row;">
            ${this.hasChanges?x`
              <button class="settings" style="display: flex; margin-right: 10px;" @click=${e=>{this.onSaveClick()}}>
                ${this.saveButtonLabel||"Save"}
              </button>

              <button class="settings" style="margin-left: 0;" @click=${e=>{this.onDiscardChanges()}}>
                ${this.cancelButtonLabel||"Discard Changes"}
              </button>
            `:""}
          </div>
        </div>
      </div>
    `}};__decorate$B([e$3({attribute:!0,type:Object})],WcShopifyConfiguration.prototype,"shopifyIntegration",void 0),__decorate$B([e$3({attribute:!0,type:String})],WcShopifyConfiguration.prototype,"saveButtonLabel",void 0),__decorate$B([e$3({attribute:!0,type:String})],WcShopifyConfiguration.prototype,"cancelButtonLabel",void 0),__decorate$B([e$3({attribute:!1,type:String})],WcShopifyConfiguration.prototype,"hookId",void 0),__decorate$B([e$3({attribute:!1,type:String})],WcShopifyConfiguration.prototype,"hookSecret",void 0),__decorate$B([e$3({attribute:!1,type:String})],WcShopifyConfiguration.prototype,"label",void 0),__decorate$B([e$3({attribute:!1,type:String})],WcShopifyConfiguration.prototype,"shopDomain",void 0),__decorate$B([e$3({attribute:!1,type:String})],WcShopifyConfiguration.prototype,"callbackUrl",void 0),__decorate$B([e$3({attribute:!1,type:Boolean})],WcShopifyConfiguration.prototype,"useCartTransform",void 0),__decorate$B([e$3({attribute:!1,type:Boolean})],WcShopifyConfiguration.prototype,"hasChanges",void 0),__decorate$B([e$3({attribute:!1,type:Boolean})],WcShopifyConfiguration.prototype,"useDropshipping",void 0),WcShopifyConfiguration=WcShopifyConfiguration_1=__decorate$B([e$4("wc-shopify-configuration")],WcShopifyConfiguration);var __decorate$A=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcShopProducts=class extends s$1{constructor(){super(),this.shopIntegration=null,this.filterForPrintessProducts=!1,this.displayedProducts=null,this.editProduct=null,this.triggerTemplateColumnRerender=!1,this.triggerIsPrintessProductRerender=!1,this._lastQueryResult=null,this._resultsPerPage=15,this._isLoading=!1,this.filter="",this.productDefinitions=null,this.dropshippers=null}connectedCallback(){super.connectedCallback()}startLoading(){this._isLoading=!0,this.renderRoot?.querySelector("#load-more-button")?.classList.add("show-progress")}finishLoading(){this.renderRoot?.querySelector("#load-more-button")?.classList.remove("show-progress"),this._isLoading=!1}async queryProducts(e){if(this._isLoading)return null;try{if(this.startLoading(),!this.shopIntegration)return this.showErrorMessage("No storefront configuration loaded yet"),null;const t={resultsPerRequest:this._resultsPerPage,printessProductsOnly:this.filterForPrintessProducts,metaFields:["productDefinitionId"]};this.filter&&(t.searchTerm=this.filter),e&&(t.cursor=e),this._lastQueryResult=await PrintessShopIntegrationApi.shopify.queryProducts(this.shopIntegration.shopDomain,t);const o=await api.loadProductDefinitions(),r=await api.loadDropshippers();return o instanceof ServerErrorResponse$2||r instanceof ServerErrorResponse$2?(this.showErrorMessage("Error getting Dropshipping information"),null):(this.productDefinitions=new ProductDefinitions({productDefinitions:o.productDefinitions.sort((e,t)=>e.id-t.id)}),this.dropshippers=new Dropshippers({dropshippers:r}),this._lastQueryResult.products??null)}catch(e){this.showErrorMessage(e)}finally{this.finishLoading()}return[]}showStatusMessage(e){"string"==typeof e&&(e=new ShopIntegrationStatusEvent("status-message",e));try{this.dispatchEvent(e)}catch(t){console.log(e),console.error(t)}}showErrorMessage(e){const t=new ShopIntegrationStatusEvent("error-message",e);t.isError=!0,this.dispatchEvent(t)}addProductsToUiList(e,t=!1){let o=-1;this.displayedProducts&&!t&&(o=this.displayedProducts[this.displayedProducts.length-1].index);const r=e.map(e=>(e.index=++o,e.isAlternatingRow=0!==o&&o%2!=0,e));this.displayedProducts&&!0!==t?this.displayedProducts=[...this.displayedProducts,...r]:this.displayedProducts=r}loadMoreProducts(){this._isLoading||this.queryProducts(this._lastQueryResult?.cursor).then(e=>{this.addProductsToUiList(e||[],!1)})}willUpdate(e){e.has("shopIntegration")&&this.shopIntegration&&this.queryProducts().then(e=>{e&&this.addProductsToUiList(e,!0)})}startProductEditing(e,t){t&&(e.preventDefault(),e.stopPropagation(),this.showEditingDialog(t))}getProductById(e){if(!this.displayedProducts||0===this.displayedProducts.length)return null;const t=this.displayedProducts.filter(t=>t.id===e);return t&&t.length>0?t[0]:null}showEditingDialog(e){this.editProduct=this.getProductById(e);const t=this.renderRoot.querySelector("#editing-dialog-backdrop");t&&(t.style.display="flex")}hideEditingDialog(){const e=this.renderRoot.querySelector("#editing-dialog-backdrop");e&&(e.style.display="none")}cancelEditing(){this.checkForUnsavedChanges()&&!confirm("You have unsaved changes, do you want to discard these?")||this.hideEditingDialog()}onSaveChanges(e){e.showProgress(!0);const t=this.shopIntegration?.shopDomain||"";PrintessShopIntegrationApi.shopify.saveProductChanges(t,e.product.id,e.changedValues).catch(t=>{e.updateFailed(),this.showErrorMessage(t)}).then(()=>{e.showProgress(!1);for(const t in e.changedValues)e.changedValues.hasOwnProperty(t)&&(e.product[t]=e.changedValues[t]);void 0!==e.changedValues.templateName&&(e.changedValues.templateName?(e.product.isPrintessProduct=!0,e.product.tags&&e.product.tags.includes("Printess")||PrintessShopIntegrationApi.shopify.tagProduct(t,e.product.id,["Printess"]).then(t=>{e.product.tags=(e.product.tags||[]).concat(["Printess"])})):(e.product.isPrintessProduct=!1,PrintessShopIntegrationApi.shopify.untagProduct(t,e.product.id,["Printess"]).then(t=>{e.product.tags=(e.product.tags||[]).filter(e=>"Printess"!==e)}))),e.updateWasSuccessful(),this.triggerTemplateColumnRerender=!this.triggerTemplateColumnRerender,this.triggerIsPrintessProductRerender=!this.triggerIsPrintessProductRerender,void 0!==e.changedValues.productDefinitionId&&this.reloadProducts(),this.hideEditingDialog()})}checkForUnsavedChanges(){const e=this.renderRoot.querySelector("#editing-dialog");return!!e&&("none"!==e.style.display&&(e.querySelector("wc-shop-product-configuration")?.hasUnsavedChanges()||!1))}onFilterChanged(e){this.filter=e.target.value||""}filterByInput(){this.checkForUnsavedChanges()&&!confirm("You have unsaved changes, do you want to discard these?")||this.queryProducts().then(e=>{this.addProductsToUiList(e||[],!0)})}onFilterForPrintessProductsClick(e){this.checkForUnsavedChanges()&&!confirm("You have unsaved changes, do you want to discard these?")||(this.filterForPrintessProducts=!this.filterForPrintessProducts,this.queryProducts().then(e=>{this.addProductsToUiList(e||[],!0)}))}async reloadProducts(){const e=await this.queryProducts();e&&this.addProductsToUiList(e,!0)}static get styles(){return i$4`
      ${ShopCss.inputCss(ShopCss.Color.blue)}
      ${ShopCss.buttonCss(ShopCss.Color.blue)}
      ${ShopCss.spinnerButton(i$4`.table-footer > button`,ShopCss.Color.blue)}

      .product-list {
        display: grid;
        grid-template-columns: 25px 60px auto auto 100px;
      }

      .table-cell {
        padding: 10;
        align-items: center;
        display: flex;
      }

      .table-cell.table-header {
        background-color: #4c9ce2;
        font-weight: 700;
        color: white;
      }

      .product-thumbnail > img {
        width: 40px;
      }

      .table-body.is-alternating, #edit-row.is-alternating {
        background-color: #F5FBFF;
      }

      .search-bar {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding: 10px;
      }

      .search-bar > label {
        font-size: 16px;
        font-weight: 400;
        color: black;
        margin-right: 10px;
      }

      .search-bar > input {
        background: ${ShopCss.convertColor(ShopCss.Color.lightBlue)};
        width: 100%;
        color: #555555;
      }

      .search-bar > button {
        padding: 10px;
        border-radius: 4px;
        background-color: var(--printess-blue);
        border: none;
        height: 40px;
      }

      .table-row {
        grid-column: span 5;
        display: grid;
        grid-template-columns: 25px 60px auto auto 100px;
      }

      .product-link {
        border-radius: 5px;
        padding: 10px 10px;
        background-color: var(--printess-blue);
        width: 100%;
        color: white;
        text-decoration: none;
        text-align: center;
      }

      .product-link:hover {
        background-color: var(--printess-blueHover);
      }

      .table-footer > button {
        margin-bottom: 10px;
        margin-left: 10px;
      }

      .table-footer > button.show-progress > svg {
        display: block;
      }

      .table-cell.is-printess-product {
        padding-left: 5px;
        padding-right: 5px;
        width: 36px;
      }

      .table-cell.is-printess-product > svg {
        fill: rgb(211, 39, 124);
        width: 26px;
      }

      .table-body.table-cell.product-title > a:link,.table-body.table-cell.product-title > a:visited {
        color: black;
      }

      .table-body.table-cell.product-thumbnail > img {
        pointer-events: none;//Make the image click through

      }

      .filter-button.printess-only {
        margin-left: 10px;
      }

      #editing-dialog-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.1);
      }

      .editing-dialog {
        background-color: white;
        border-radius: 5px;
        padding: 20px;
      }
    `}render(){const e=this._lastQueryResult&&this._lastQueryResult.products&&this._lastQueryResult.products.length>=this._resultsPerPage,t=this;return this.displayedProducts?x`
        <div class="search-bar">
          <label class="template-name-label" for="templateName">Search:</label>
          <input type="text" id="searchTerm" @change=${e=>this.onFilterChanged(e)} name="searchTerm" placeholder="Type in your search term here" class="search-term-input" .value=${this.filter} >
          <button class="filter-button" @click=${e=>this.filterByInput()}><wc-icon primarycolor="toolbar" icon="filter-reset" class="filter-icon"></wc-icon></button>
          <button class="filter-button printess-only" @click=${e=>this.onFilterForPrintessProductsClick(e)} alt="Load Printess Products only" title="Load Printess Products only"><wc-icon primarycolor="${this.filterForPrintessProducts?"printess-pink":"toolbar"}" icon="printess-wand" class="filter-icon"></wc-icon></button>
        </div>

        ${0===this.displayedProducts.length?x`<div class="status-message">No products found.</div>`:x`

        <div class="product-list">
          <div class="table-header table-cell is-printess-product">&nbsp;</div>
          <div class="table-header table-cell product-thumbnail">&nbsp;</div>
          <div class="table-header table-cell product-title">Title</div>
          <div class="table-header table-cell printess-template-name">Template name</div>
          <div class="table-header table-cell product-actions">Actions</div>

          ${this.displayedProducts.map(e=>{const t=e.isAlternatingRow?"is-alternating":"";return x`
              <div class="table-row" @click=${t=>this.startProductEditing(t,e.id)}>
                <div class="table-body table-cell is-printess-product ${t}" data-product-id="${e.id}" data-trigger=${this.triggerIsPrintessProductRerender}>
                  ${e.isPrintessProduct?x`<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64"><path d="M58.08,21.21l-7.11-7.55l2.19-10.13c0.16-0.74-0.12-1.52-0.71-1.99s-1.41-0.57-2.1-0.24l-9.38,4.42L32.01,0.5		c-0.66-0.38-1.48-0.36-2.11,0.06c-0.63,0.42-0.98,1.17-0.88,1.92l1.31,10.29l-7.73,6.91c-0.57,0.51-0.8,1.29-0.59,2.03		c0.2,0.73,0.81,1.29,1.55,1.43l7.4,1.4L5.41,55.96c-0.87,1.07-0.71,2.65,0.36,3.52c0.46,0.38,1.02,0.56,1.58,0.56		c0.73,0,1.45-0.32,1.94-0.92l25.6-31.48l3.05,6.92c0.31,0.7,0.98,1.16,1.74,1.19c0.03,0,0.06,0,0.09,0c0.73,0,1.4-0.4,1.75-1.04		l4.98-9.09l10.32-1.05c0.76-0.08,1.41-0.58,1.67-1.29C58.76,22.56,58.6,21.76,58.08,21.21z M45.06,21.74		c-0.66,0.07-1.24,0.45-1.55,1.03l-3.54,6.46l-2.97-6.74c-0.27-0.6-0.81-1.04-1.46-1.16l-7.24-1.37l5.49-4.91		c0.49-0.44,0.73-1.09,0.65-1.74L33.5,6l6.37,3.71c0.57,0.33,1.27,0.36,1.86,0.08l6.66-3.14l-1.56,7.2		c-0.14,0.64,0.05,1.31,0.5,1.79L52.39,21L45.06,21.74z"/>	<polygon   points="12.92,5.15 10.56,9.47 6.25,11.83 10.56,14.19 12.92,18.5 15.28,14.19 19.6,11.83 15.28,9.47 		12.92,5.15 	"/>	<path  d="M49.4,40.73c1.38,0,2.77,1,2.77,2.63c0,1.81-1.7,2.63-2.63,2.63s-2.63-0.9-2.63-2.63		c0-2.29,2.02-2.63,2.63-2.63 M49.54,34.48l-3.14,5.74l-5.74,3.14l5.74,3.14l3.14,5.74l3.14-5.74l5.74-3.14l-5.74-3.14L49.54,34.48		L49.54,34.48z"/></svg>`:""}
                </div>
                <div class="table-body table-cell product-thumbnail ${t}" data-product-id="${e.id}">
                  <img src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Be.previewUrl%7D" alt="${e.previewAltText?e.previewAltText:"Product thumbnail"}">
                </div>
                <div class="table-body table-cell product-title ${t}" data-product-id="${e.id}">
                  <a data-product-id="${e.id}" href="#">${e.title}</a>
                </div>
                <div class="table-body table-cell printess-template-name ${t}" data-product-id="${e.id}" data-trigger=${this.triggerTemplateColumnRerender}>
                  ${e.templateName?e.templateName:""}
                </div>
                <div class="table-body table-cell product-actions ${t}" data-product-id="${e.id}" data-trigger=${this.triggerTemplateColumnRerender}>
                  <a href=${`https://${this.shopIntegration?.shopDomain}/products/${e.handle}`} target="_blank" class="product-link" @click=${e=>e.stopPropagation()}>Visit</a>
                </div>
              </div>
              `})}

        </div>
        <div class="table-footer">
          ${e?x`<button id="load-more-button" class="pager-input" @click=${this.loadMoreProducts}><svg aria-hidden="true" role="status" class="inline w-4 h-4 me-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="white"/>
            </svg> Load more results</button>`:""}
        </div>

        <div id="editing-dialog-backdrop">
          <div class="editing-dialog">
            <wc-shop-product-configuration
              .product=${this.editProduct}
              .shopIntegration=${this.shopIntegration}
              .dropshippers=${this.dropshippers}
              .productDefinitions=${this.productDefinitions}
              @savechanges=${t.onSaveChanges}
              @cancel-product-editing=${t.cancelEditing}
              @slimChanged=${this.reloadProducts}
            ></wc-shop-product-configuration>
          </div>
        </div>
           `}
      `:x`<div class="status-message">Loading products ...</div>`}};async function postJsonCore(e,t,o,r,i){t.startsWith("/")||(t="/"+t);const a="https://"+e+t;return await fetch(a,{method:"POST",mode:"cors",cache:"no-cache",credentials:"omit",headers:Object.assign({"Content-Type":"application/json",Authorization:"Bearer "+o},i),redirect:"follow",referrerPolicy:"no-referrer",body:r})}__decorate$A([e$3({attribute:!0,type:Object})],WcShopProducts.prototype,"shopIntegration",void 0),__decorate$A([e$3({attribute:!0,type:Boolean})],WcShopProducts.prototype,"filterForPrintessProducts",void 0),__decorate$A([e$3({attribute:!1,type:Array})],WcShopProducts.prototype,"displayedProducts",void 0),__decorate$A([e$3({attribute:!1,type:Object})],WcShopProducts.prototype,"editProduct",void 0),__decorate$A([e$3({attribute:!1,type:Boolean})],WcShopProducts.prototype,"triggerTemplateColumnRerender",void 0),__decorate$A([e$3({attribute:!1,type:Boolean})],WcShopProducts.prototype,"triggerIsPrintessProductRerender",void 0),__decorate$A([t$1()],WcShopProducts.prototype,"filter",void 0),__decorate$A([t$1()],WcShopProducts.prototype,"productDefinitions",void 0),__decorate$A([t$1()],WcShopProducts.prototype,"dropshippers",void 0),WcShopProducts=__decorate$A([e$4("wc-shop-products")],WcShopProducts);class ServerErrorResponse{constructor(e,t){this.code=e,this.message=t}static async Create(e){if("application/json; charset=utf-8"===e.headers.get("Content-Type")){const t=await e.json();return"number"==typeof t.c&&"string"==typeof t.m?new ServerErrorResponse(t.c,t.m):new ServerErrorResponse(e.status,t)}const t=await e.text();return new ServerErrorResponse(e.status,e.statusText+" => "+t)}}class PrintessShopApi{constructor(e,t){if(!e)throw new Error("Please provide a domain.");if(!e)throw new Error("Please provide a shopToken.");this.domain=e,this.token=t}async postJsonVoid(e,t){const o=await postJsonCore(this.domain,e,this.token,t);if(200!==o.status)return await ServerErrorResponse.Create(o)}async postJson(e,t){const o=await postJsonCore(this.domain,e,this.token,t);return 200===o.status?await o.json():await ServerErrorResponse.Create(o)}async readUserSettings(e){return await this.postJson("/user/settings/read",JSON.stringify({keys:e}))}async writeUserSetting(e,t){const o=await this.postJsonVoid("/user/setting/write",JSON.stringify({key:e,json:t}));if(o instanceof ServerErrorResponse)throw new Error(o.message)}async loadKeywordMenu(e){const t=await this.readUserSettings([e]);if(t instanceof ServerErrorResponse)throw new Error(t.message);const o=t[e];if(!o)throw new Error("Could not find menu with id="+e);return JSON.parse(o)}async loadKeywordMenus(){const e=await this.readUserSettings(["topicUiMenus"]);if(e instanceof ServerErrorResponse)throw new Error(e.message);const t=e.topicUiMenus;if(!t)return[];return JSON.parse(t).filter(e=>e.k)}async loadLayoutSnippets(e,t,o,r,i=!0,a,s,n){const l=await this.postJson("/layoutSnippets/load",JSON.stringify({tags:e,keywords:t,aspectRatio:o,language:r,includeGlobal:i,sealing:a,featuredSetKey:s,hiddenSetKey:n,productType:"*"}));if(l instanceof ServerErrorResponse)throw new Error(l.message);return l.map(e=>new Snippet(e))}async loadLayoutSnippetById(e){const t={};Array.isArray(e)?t.ids=e:t.id=e;const o=await this.postJson("/layoutSnippets/loadbyid",JSON.stringify(t));if(o instanceof ServerErrorResponse)throw new Error(o.message);return o.map(e=>new Snippet(e))}async loadTemplateInfos(e,t){const o=await this.postJson("/templates/load",JSON.stringify({templates:[{id:e,p:t,userId:"",verstionId:""}]}));if(o instanceof ServerErrorResponse)throw new Error(o.message);if(o&&o.templates&&"string"==typeof o.templates[e]){const t=JSON.parse(o.templates[e]);if(t.menuBrowsing)return console.log("Loading Template Infos: ",t.menuBrowsing),t.menuBrowsing}return null}}class Snippet{constructor(e){this.title=e.title??"",this.imageUrl=e.iurl,this.snippetUrl=e.surl,this.id=e.id,this.docId=e.did,this.uid=e.uid,this.language=e.l,this.metadata=JSON.parse(e.meta??"{}"),this.isGlobal="gy8z44EmLiZ0vrUKrXlWtiZY15D2"===e.uid}get imageCount(){return this.metadata?.editables?.images??0}hasImageCountEqual(e){return!(!this.metadata||!this.metadata.editables)&&this.metadata.editables.images===e}hasTextCountEqual(e){return!(!this.metadata||!this.metadata.editables)&&this.metadata.editables.texts===e}}class ShopTools{static decodeHTML(e){const t=document.createElement("textarea");return t.innerHTML=e,t.value}static parseMergeTemplate(e){let t=[];if(e)if(Array.isArray(e))e.forEach(e=>{t=[...t,...ShopTools.parseMergeTemplate(e)]});else if("string"!=typeof e)t.push(e);else try{let o=JSON.parse(e);t=[...t,...ShopTools.parseMergeTemplate(o)]}catch{try{let o=JSON.parse(ShopTools.decodeHTML(e));t=[...t,...ShopTools.parseMergeTemplate(o)]}catch{t.push({templateName:e})}}return t}static forEach(e,t){if(e&&"function"==typeof t)if(Array.isArray(e))e.forEach(t);else{let o=0;for(const r in e)e.hasOwnProperty(r)&&(t(e[r],o,e,r),++o)}}static map(e,t){if(!e||"function"!=typeof t)return[];if(Array.isArray(e))return e.map(t);{const o=[];let r=0;for(const i in e)e.hasOwnProperty(i)&&o.push(t(e[i],r,e,i)),++r;return o}}}class ShopCache{static getCache(e){window.printessShopCache||(window.printessShopCache={});let t=window.printessShopCache[e];return t||(t={},window.printessShopCache[e]=t),t}static convertLayoutSnippet(e){return e instanceof Snippet?{id:e.id,name:e.title||e.id,thumbnail:e.imageUrl||"",isGlobal:e.title.endsWith("~gid")}:e}static addLayoutSnippet(e){const t=ShopCache.getCache("Snippets"),o=[];if(Array.isArray(e))e.forEach(e=>{const r=ShopCache.convertLayoutSnippet(e);t[e.id]=r,o.push(r)});else{const r=ShopCache.convertLayoutSnippet(e);t[e.id]=r,o.push(r)}return o}static getLayoutSnippets(e){const t=ShopCache.getCache("Snippets"),o={};return(Array.isArray(e)?e:[e]).forEach(e=>{t[e]&&(o[e]=t[e])}),o}static addItem(e,t){const o=ShopCache.getCache(e);Array.isArray(t)?t.forEach(e=>{o[e.name]=e}):o[XMLDocument.name]=t}static getItems(e){const t=ShopCache.getCache(e),o=[];return ShopTools.forEach(t,e=>{o.push(e)}),o}static resetItems(e,t){const o=ShopCache.getCache(e),r=[];return window.printessShopCache[e]={},t&&t.forEach(t=>{window.printessShopCache[e][t.name]=t}),ShopTools.forEach(o,e=>{r.push(e)}),r}}ShopCache.CacheTypes={tags:"Tags",keywords:"Keywords",templates:"Templates",printTemplates:"PrintTemplates"};class ShopCachedApi{static async getLayoutSnippetsById(e){const t=ShopCache.getLayoutSnippets(e),o=[],r=[];if(Array.isArray(e)||(e=[e]),e.forEach(e=>{t[e]?r.push(t[e]):o.push(e)}),o.length>0){let t=[];const o=new PrintessShopApi(apiEndpoint,api.token??""),i=await o.loadLayoutSnippetById(e);if(i instanceof ServerErrorResponse)throw"["+i.code+"] "+i.message;t=ShopCachedApi.convertSnippets(i||[]),ShopCache.addLayoutSnippet(t),t.forEach(t=>{e.includes(t.id)&&r.push(t)})}return r.length!==e.length&&e.forEach(e=>{const t=r.filter(t=>t.id===e);if(!t||0===t.length){const t={id:e,uid:"",name:e,thumbnail:"",isGlobal:e.endsWith("~gid"),snippetUrl:"",keywords:[]};r.push(t)}}),r}static convertSnippets(e){return e.map(e=>({id:e.id,name:e.title,thumbnail:e.imageUrl,isGlobal:"gy8z44EmLiZ0vrUKrXlWtiZY15D2"===e.uid,uid:e.uid,snippetUrl:e.snippetUrl,keywords:e.metadata?.keywords??[]}))}static async loadLayouts(e,t){const o=new PrintessShopApi(apiEndpoint,api.token??""),r=await o.loadLayoutSnippets(e,t,void 0,void 0,!0);if(r instanceof ServerErrorResponse)throw"["+r.code+"] "+r.message;const i=ShopCachedApi.convertSnippets(r||[]);return ShopCache.addLayoutSnippet(i),i}}var WcShopMergeTemplateConfigurator_1,__decorate$z=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};class MergeTemplateChangedEvent extends Event{constructor(){super(...arguments),this.editingCanceled=!1,this.mergeTemplate=""}}class SelectTemplateEvent extends Event{}class MergeTemplateVM{constructor(e,t,o,r){e instanceof MergeTemplateVM?(this.original=e.original,this.mergeMode=null!=o?o:e.mergeMode,this.templateName="merge"===e.mergeMode&&null!=r?r:e.templateName,this.layoutSnippetId="merge"!==e.mergeMode&&null!=r?r:e.layoutSnippetId,this.layoutSnippetLabel=null!=t?t??"":e.layoutSnippetLabel||this.layoutSnippetId,this.id=e.id):(this.original=e,this.mergeMode=e.mergeMode||"layout-snippet-no-repeat",this.templateName="merge"===this.mergeMode&&e.templateName||"",this.layoutSnippetId="merge"!==this.mergeMode&&e.templateName||"",this.id=++MergeTemplateVM.idCounter),this.isEmpty=!this.templateName&&!this.layoutSnippetId,this.hasUnsavedChanges=this.original.mergeMode!==this.mergeMode||this.original.templateName!==("merge"===this.mergeMode?this.templateName:this.layoutSnippetId)}}MergeTemplateVM.idCounter=-1;let WcShopMergeTemplateConfigurator=WcShopMergeTemplateConfigurator_1=class extends s$1{willUpdate(e){e.has("mergeTemplate")&&this.initViewModel(this.mergeTemplate)}constructor(){super(),this.mergeTemplate="",this._hasUnsavedChanges=!1,this._layoutSelectionId=null}ensureEmptyItemAtEndOfViewModel(){0!==this._viewModel.length&&this._viewModel[this._viewModel.length-1].isEmpty||this._viewModel.push(new MergeTemplateVM({templateName:"",mergeMode:"layout-snippet-no-repeat"}))}initViewModel(e){this._viewModel=ShopTools.parseMergeTemplate(e).map(e=>new MergeTemplateVM(e)),this.ensureEmptyItemAtEndOfViewModel(),this.mergeTemplateCount=this._viewModel.length}connectedCallback(){super.connectedCallback()}static get styles(){return i$4`
      ${ShopCss.dialogCss(600)}
      ${ShopCss.buttonCss(ShopCss.Color.green)}
      ${ShopCss.inputCss(ShopCss.Color.green)}
      #layout-snippets {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap: 10px;
        align-items: center;
      }

      .layout-snippet-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      }

      .layout-snippet-footer button {
        width: 100px;
      }

      .select-layout-snippet,
      .select-template {
        width: 100%;
        background-color: var(--printess-blue);
      }

      #template-selection-ok,
      #template-selection-cancel {
        background-color: var(--printess-blue);
      }

      .delete-template {
        width: 100%;
        background-color: var(--printess-red);
      }

      .delete-template:hover {
        background-color: var(--printess-redHover);
      }
    `}getLayoutSnippetLabel(e){const t=this;let o=e.layoutSnippetId||"";o.startsWith("sid~")&&(o=o.substring(4)),o.endsWith("~gid")&&(o=o.substring(0,o.length-4));const r=e.layoutSnippetLabel||o;return ShopCachedApi.getLayoutSnippetsById(o).then(i=>{const a=i.filter(e=>e.id===o);a&&a.length>0&&a[0].name!==r&&t.updateProperty(e,"layoutSnippetLabel",a[0].name)}),e.layoutSnippetLabel||o||""}updateProperty(e,t,o){let r=null;switch(t){case"mergeMode":r=new MergeTemplateVM(e,null,o);break;case"templateName":case"layoutSnippetId":r=new MergeTemplateVM(e,Array.isArray(o)?o[1]:null,null,Array.isArray(o)?o[0]:o);break;case"layoutSnippetLabel":r=new MergeTemplateVM(e,o)}if(null!=r){var i=this._viewModel.indexOf(e);-1!==i&&(this._viewModel[i]=r,this._viewModel=[...this._viewModel])}this.reevaluateHasUnsavedChanges(),this.ensureEmptyItemAtEndOfViewModel()}getSelectedListValue(e){for(let t=0;t<e.options.length;++t)if(e.options[t].selected)return e.options[t].getAttribute("value")||"";return""}reevaluateHasUnsavedChanges(){const e=this._viewModel.filter(e=>e.hasUnsavedChanges).length>0||this._viewModel.length!==this.mergeTemplateCount;return this._hasUnsavedChanges=e,e}onSaveChanges(e){const t=new MergeTemplateChangedEvent("save-changes");if(e)t.mergeTemplate="",t.editingCanceled=!0;else{t.editingCanceled=!1;const e=this._viewModel.filter(e=>!e.isEmpty).map(e=>({mergeMode:e.mergeMode,templateName:"merge"===e.mergeMode?e.templateName:e.layoutSnippetId}));0===e.length?t.mergeTemplate="":1===e.length&&"layout-snippet-no-repeat"===e[0].mergeMode?t.mergeTemplate=e[0].templateName||"":t.mergeTemplate=JSON.stringify(e)}this.mergeTemplate||this.initViewModel(""),this.dispatchEvent(t)}onSelectTemplate(e){const t=this,o=new SelectTemplateEvent("select-template");o.currentTemplateName=e.templateName,o.templateSelected=(r,i)=>{t.updateProperty(e,"templateName",i?o.currentTemplateName:r)},this.dispatchEvent(o)}removeItem(e){this._viewModel=this._viewModel.filter(t=>t!==e),this.ensureEmptyItemAtEndOfViewModel(),this.reevaluateHasUnsavedChanges()}onSelectLayoutSnippet(e){this._layoutSelectionId=e.id,this.renderRoot.querySelector("#select-layout-snippet-dialog")?.showModal()}onLayoutsnippetSelected(e){if(this.renderRoot.querySelector("#select-layout-snippet-dialog")?.close(),e.selectedItem){const t=this._viewModel.filter(e=>e.id===this._layoutSelectionId);t&&t.length>0&&e.selectedItem.id&&this.updateProperty(t[0],"layoutSnippetId",["sid~"+e.selectedItem.id+(e.selectedItem.isGlobal?"~gid":""),e.selectedItem.name])}}render(){const e=this;return x`
      <div id="layout-snippets">
      ${this._viewModel.map(t=>x`
            <div class="cell merge-mode" id="${t.id}">
              <select class="merge-mode-input" @change=${o=>{e.updateProperty(t,"mergeMode",e.getSelectedListValue(o.target))}}>
                ${ShopTools.map(WcShopMergeTemplateConfigurator_1.MergeModeLabels,(e,o,r,i)=>x`<option .value=${i} .selected=${i===t.mergeMode?"selected":""}>${e}</option>`)}
              </select>
            </div>
            <div class="cell merge-source" id="${"merge-source-"+t.id}">
              <span>${t.isEmpty?"None selected":"merge"===t.mergeMode?t.templateName:this.getLayoutSnippetLabel(t)}</span>
            </div>
            <div class="cell merge-config" id="${"merge-config-"+t.id}">
              <button type="button" class="select-template" style="${"merge"===t.mergeMode?"display:block;":"display:none;"}" @click=${()=>{e.onSelectTemplate(t)}}>${t.isEmpty?"Select template":"Change template"}</button>
              <button type="button" class="select-layout-snippet" style="${"merge"!==t.mergeMode?"display:block;":"display:none;"}" @click=${()=>{e.onSelectLayoutSnippet(t)}}>${t.isEmpty?"Select layout snippet":"Change layout snippet"}</button>
            </div>
            <div class="cell delete-button" id="${"delete-button-"+t.id}">
              <button type="button" class="delete-template" style="${this._viewModel[this._viewModel.length-1]===t&&t.isEmpty?"display:none":""}" @click=${()=>{this.removeItem(t)}}>Remove</button>
            </div>
          `)}
    </div>
      <div class="layout-snippet-footer">
        <button type="button" id="template-selection-ok" @click=${()=>{e.onSaveChanges(!1)}} style="${e._hasUnsavedChanges?"":"display:none"}">Ok</button>
        <button type="button" id="template-selection-cancel" @click=${()=>{e.onSaveChanges(!0)}}>Cancel</button>
      </div>
      <dialog id="select-layout-snippet-dialog" style="height: 93%; width: 70%; transform: unset;">
        <wc-shop-layout-selection @change=${this.onLayoutsnippetSelected}></wc-shop-layout-selection>
      </dialog>
  `}};WcShopMergeTemplateConfigurator.MergeModeLabels={merge:"Template Merge","layout-snippet-no-repeat":"Layoutsnippet - No repeat","layout-snippet-repeat-all":"Layoutsnippet - Repeat all","layout-snippet-repeat-inside":"Layoutsnippet - Repeat inside","layout-snippet-no-repeat-persist-stickers":"Layoutsnippet - No repeat, persist sticker","layout-snippet-repeat-all-persist-stickers":"Layoutsnippet - Repeat all, persist sticker","layout-snippet-repeat-inside-persist-stickers":"Layoutsnippet - Repeat inside, persist sticker"},__decorate$z([e$3({attribute:!0,type:String})],WcShopMergeTemplateConfigurator.prototype,"mergeTemplate",void 0),__decorate$z([t$1()],WcShopMergeTemplateConfigurator.prototype,"_viewModel",void 0),__decorate$z([t$1()],WcShopMergeTemplateConfigurator.prototype,"_hasUnsavedChanges",void 0),__decorate$z([t$1()],WcShopMergeTemplateConfigurator.prototype,"mergeTemplateCount",void 0),WcShopMergeTemplateConfigurator=WcShopMergeTemplateConfigurator_1=__decorate$z([e$4("wc-shop-merge-template-configurator")],WcShopMergeTemplateConfigurator);var __decorate$y=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};class SaveChangesEvent extends Event{}let WcShopProductConfiguration=class extends s$1{constructor(){super(),this.templateName="",this.printTemplateName="",this.mergeTemplates="",this.shopIntegration=null,this.product=null,this.displaySaveButton=!1,this.loadedTemmplates=null,this.showSavingProgress=!1,this.dropshippers=null,this.productDefinitions=null,this.templateSelectionContextTemplateName=null,this.templateSelectionContextCallback=null,this.mergeTemplateLabels="",this.productDefinitionId=this.product?this.product.metaData.productDefinitionId:"-1",this.usesSlimUi=!!this.product&&this.product.tags.includes("printess-slimui"),this.productDefinitionFilter="",this.selectedDropshipper=this.dropshippers?this.dropshippers.dropshippers[0]:null,this.displayedProductDefinitions=[],this.initialDropshipperValue="-1",this.originalValues={templateName:"",printTemplateName:"",mergeTemplates:"",usesSlimUi:!1,productDefinitionId:""}}initOriginalValues(){this.templateName=this.originalValues.templateName=this.product?.templateName||"",this.printTemplateName=this.originalValues.printTemplateName=this.product?.printTemplateName||"",this.mergeTemplates=this.originalValues.mergeTemplates=this.product?.mergeTemplates||"",this.usesSlimUi=this.originalValues.usesSlimUi=this.product?.tags.includes("printess-slimui")||!1,this.productDefinitionId=this.originalValues.productDefinitionId=this.product?.metaData?.productDefinitionId||""}willUpdate(e){e.has("product")&&(this.showSavingProgress=!1,this.displaySaveButton=!1,this.initSelectedDropshipper(),this.initOriginalValues()),e.has("mergeTemplates")&&this.initMergeTemplateLabels(this.mergeTemplates)}initMergeTemplateLabels(e){const t=this,o=[];if(e){let t=[];if(e){const r=ShopTools.parseMergeTemplate(e);r&&r.length>0&&(t=r.map(e=>{let t=e.templateName||"";return t.startsWith("sid~")&&(t=t.substring(4)),t.endsWith("~gid")&&(t=t.substring(0,t.length-4)),o.push(t),t}).filter(e=>!!e))}this.mergeTemplateLabels=t.join(",")}else this.mergeTemplateLabels="";o.length>0&&ShopCachedApi.getLayoutSnippetsById(o).then(e=>{t.mergeTemplateLabels=o.map(t=>{const o=e.find(e=>e.id===t);return o?o.name:t}).join(",")})}initSelectedDropshipper(){const e=this.product?parseInt(this.product.metaData.productDefinitionId):-1;if(e<1)return this.selectedDropshipper=null,this.initialDropshipperValue=e.toString(),void(this.displayedProductDefinitions=[]);if(this.productDefinitions&&this.dropshippers&&1===this.dropshippers.dropshippers.length)this.selectedDropshipper=this.dropshippers.dropshippers[0],this.displayedProductDefinitions=this.productDefinitions.productDefinitions.filter(e=>e.dropshipperId===this.selectedDropshipper?.id);else if(e&&e>0&&this.productDefinitions){const t=this.productDefinitions.productDefinitions.find(t=>t.id===e);if(t){const e=this.dropshippers?.dropshippers.find(e=>e.id===t.dropshipperId);this.selectedDropshipper=e||(this.dropshippers?this.dropshippers.dropshippers[0]:null),this.displayedProductDefinitions=this.productDefinitions.productDefinitions.filter(e=>e.dropshipperId===this.selectedDropshipper?.id)}}}hasUnsavedChanges(){return this.templateName!==this.originalValues.templateName||this.printTemplateName!==this.originalValues.printTemplateName||this.mergeTemplates!==this.originalValues.mergeTemplates||this.usesSlimUi!==this.originalValues.usesSlimUi||this.productDefinitionId!==this.originalValues.productDefinitionId}getChangedValues(){const e={};return this.originalValues.templateName!==this.templateName&&(e.templateName=this.templateName),this.originalValues.printTemplateName!==this.printTemplateName&&(e.printTemplateName=this.printTemplateName),this.originalValues.mergeTemplates!==this.mergeTemplates&&(e.mergeTemplates=this.mergeTemplates),this.originalValues.productDefinitionId!==this.productDefinitionId&&(e.productDefinitionId=this.productDefinitionId),e}reevaluateSaveButtonState(){this.displaySaveButton=this.hasUnsavedChanges()}connectedCallback(){super.connectedCallback()}showStatusMessage(e){"string"==typeof e&&(e=new ShopIntegrationStatusEvent("status-message",e));try{this.dispatchEvent(e)}catch(t){console.log(e),console.error(t)}}showErrorMessage(e){const t=new ShopIntegrationStatusEvent("error-message",e);t.isError=!0,this.dispatchEvent(t)}parseMergeTemplates(e){if(!e)return[];try{let t=[];const o=JSON.parse(e);return o?(Array.isArray(o)?o.forEach(e=>{e&&("string"==typeof e?t=[...t,...this.parseMergeTemplates(e)]:t.push(e))}):"string"==typeof o?t=[...t,...this.parseMergeTemplates(o)]:t.push(o),t):[]}catch{return[{templateName:e}]}}onShowTemplateSelectionDialog(e){const t=this;e instanceof SelectTemplateEvent?(this.templateSelectionContextCallback=e.templateSelected,this.templateSelectionContextTemplateName=e.currentTemplateName):(this.templateSelectionContextTemplateName=this.templateName,this.templateSelectionContextCallback=(e,o)=>{t.templateName=o?this.originalValues.templateName:e,t.templateSelectionContextTemplateName=this.templateName,t.reevaluateSaveButtonState()});const o=()=>{const e=this.renderRoot?.querySelector("#template-selection");e&&e.showModal()};if(this.loadedTemmplates&&0!==this.loadedTemmplates.length)o();else{let e=ShopCache.getItems(ShopCache.CacheTypes.templates);e.length>0?(this.loadedTemmplates=e,o()):api.loadTemplates().then(t=>{t instanceof ServerErrorResponse$2?(this.loadedTemmplates=[],alert(t.message)):(e=(t.templates||[]).map(e=>({name:e.name,thumbnail:e.thumbnailUrl||""})),this.loadedTemmplates=e,ShopCache.resetItems(ShopCache.CacheTypes.templates,e),o())})}}getPrintTemplates(){if(this.loadedPrintTemplates)return this.loadedPrintTemplates.sort((e,t)=>(e.name||"").localeCompare(t.name||""));{const e=ShopCache.getItems(ShopCache.CacheTypes.printTemplates);return e.length>0?(this.loadedPrintTemplates=e,this.loadedPrintTemplates.sort((e,t)=>(e.name||"").localeCompare(t.name||""))):(api.readUserSettings({keys:["print-settings-list"]}).then(e=>{if(e instanceof ServerErrorResponse$2)alert(e.message);else if(e&&e["print-settings-list"]){const t=(JSON.parse(e["print-settings-list"])||[]).map(e=>({name:e}));this.loadedPrintTemplates=t,ShopCache.resetItems(ShopCache.CacheTypes.printTemplates,t)}}),[])}}onTemplateSelectionCancelClicked(){const e=this.renderRoot?.querySelector("#template-selection");this.templateSelectionContextCallback&&this.templateSelectionContextCallback("",!0),e&&e.close(),this.templateSelectionContextTemplateName=null,this.templateSelectionContextCallback=null}onTemplateSelectionOkClicked(){const e=this.renderRoot?.querySelector("#template-selection");e&&e.close(),this.templateSelectionContextTemplateName=null,this.templateSelectionContextCallback=null}onTemplateNameChanged(e){const t=e.target;if(t){const e=t.value.trim();this.templateName=e,this.reevaluateSaveButtonState()}}onSelectedTemplateChanged(e){this.templateSelectionContextCallback&&this.templateSelectionContextCallback("string"==typeof e.selectedItem?e.selectedItem:e.selectedItem.name,!1)}onPrintTemplateNameChanged(e){this.printTemplateName=e.target?.value||"",this.reevaluateSaveButtonState()}showTemplateSaveProgress(e){this.showSavingProgress=e}onDropshipperChanged(e){const t=e.target;if(t&&this.dropshippers&&this.productDefinitions){const e=t.value;if(console.log(e),"-1"===e||"0"===e)return this.productDefinitionId=e,console.log(this.productDefinitionId),void this.reevaluateSaveButtonState();const o=this.dropshippers.dropshippers.find(e=>e.id.toString()===t.value);this.selectedDropshipper=o||null,this.displayedProductDefinitions=this.productDefinitions.productDefinitions.filter(e=>e.dropshipperId===this.selectedDropshipper?.id)}}onProductDefinitionChanged(e){const t=e.target;t&&(this.productDefinitionId=t.value,this.reevaluateSaveButtonState())}onProductDefinitionFilterChanged(e){this.productDefinitionFilter=e.target.value}async onSaveChangesClicked(e){if(this.product&&!this.showSavingProgress){const e=this,t=new SaveChangesEvent("savechanges");if(t.changedValues=this.getChangedValues(),t.product=this.product,t.showProgress=function(t){e.showTemplateSaveProgress(t)},t.updateFailed=function(){},t.updateWasSuccessful=function(){e.initOriginalValues(),e.reevaluateSaveButtonState()},this.originalValues.usesSlimUi!==this.usesSlimUi&&this.shopIntegration&&this.product){this.usesSlimUi?await PrintessShopIntegrationApi.shopify.tagProduct(this.shopIntegration.shopDomain,this.product.id,"printess-slimui"):await PrintessShopIntegrationApi.shopify.untagProduct(this.shopIntegration.shopDomain,this.product.id,"printess-slimui");const e=new Event("slimChanged");this.dispatchEvent(e)}this.dispatchEvent(t)}}onCancelClicked(e){const t=new Event("cancel-product-editing",{bubbles:!0,composed:!0});this.dispatchEvent(t)}onShowLayoutSelectionDialog(e){this.renderRoot.querySelector("#layout-snippet-selection")?.showModal()}onLayoutSnippetSelected(e){const t=this.renderRoot?.querySelector("#layout-snippet-selection");t&&t.close()}onMergeTemplateChanged(e){this.renderRoot.querySelector("#layout-snippet-selection")?.close(),e.editingCanceled||(this.mergeTemplates=e.mergeTemplate,this.reevaluateSaveButtonState())}onSlimUIChanged(e){const t=e.target;t&&(this.usesSlimUi=t.checked,this.reevaluateSaveButtonState())}static get styles(){const e=ShopCss.Color.blue;return i$4`
      ${ShopCss.inputCss(e)}
      ${ShopCss.buttonCss(e)}
      ${ShopCss.dialogCss(600)}
      ${ShopCss.spinnerCss(i$4`"#save-changes > svg"`)}

      .product-configuration {
        display: grid;
        grid-template-columns: 200px 300px min-content;
        align-items: center;
      }

      .table-cell {
        padding: 10;
        align-items: center;
        display: flex;
        max-height: 100px;
        overflow: hidden;
      }

      #save-changes {
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        flex: 1 0 auto;
        justify-content: center;
      }

      #save-changes > svg {
        width: 16px;
        height: 16px;
        margin-right: 10px;
        animation: spin-loader 1s linear infinite;
        display: none;
      }

      #save-changes.show-progress > svg {
        display: block;
      }

      .product-definition-selection {
        display: flex;
        flex-direction: column;
      }

      button {
        width: 100%;
      }

      button:disabled {
        background-color: var(--printess-lightblue);
      }

      button:disabled:hover {
        cursor: not-allowed;
      }

      .template-selection-dialog {
        transform: none;
        height: 75vh;
      }

      .merge-template-selection-dialog {
        transform: none;
        width: 761px;
      }

      dialog form {
        margin-bottom: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }

      dialog form button{
        width: 100px;
        background-color: var(--printess-blue);
      }

      @keyframes spin-loader {
        to {
            transform:rotate(360deg)
          }
      }
    `}render(){return x`
      <div class="product-configuration">
        <div class="table-cell template-name-label">Template name:</div>
        <div class="table-cell template-name-config">
          <input type="text" name="template-name-input" @change=${this.onTemplateNameChanged} .value=${this.templateName||""}>
        </div>
        <button @click=${this.onShowTemplateSelectionDialog}>Select</button>

        <div class="table-cell merge-template-label">Merge templates:</div>
        <div class="table-cell merge-template-config">${this.mergeTemplateLabels}</div>
        <button @click=${this.onShowLayoutSelectionDialog}>Configure</button>

        <div class="table-cell print-template-label">Print template name:</div>
        <div class="table-cell print-template-config">
          <select @change=${this.onPrintTemplateNameChanged} data-current-value=${this.printTemplateName}>
            <option value="" ?selected=${!this.printTemplateName}>Not used</option>
            ${this.loadedPrintTemplates?this.getPrintTemplates().map(e=>x`<option ?selected=${this.printTemplateName===e.name} value="${e.name}">${e.name}</option>`):(this.getPrintTemplates().length,"")}
          </select>
        </div>
        <div></div>

        <div class="table-cell print-template-label">Use Slim UI</div>
        <div class="table-cell print-template-config">
          <input type="checkbox" @change=${this.onSlimUIChanged} .checked=${this.usesSlimUi}>
        </div>
        <div></div>

        ${this.dropshippers&&this.dropshippers.dropshippers.length>1?x`<div class="table-cell print-template-label">Select Dropshipper</div>`:""}

        <div class="table-cell print-template-config">
          <select @change=${this.onDropshipperChanged}>
            <option value="-1" .selected=${"-1"===this.initialDropshipperValue}>No Dropshipping</option>
            <option value="0" .selected=${"0"===this.initialDropshipperValue}>Take Template Value</option>
            ${this.dropshippers?.dropshippers.map(e=>x`<option value=${e.id} .selected=${this.selectedDropshipper?.id===e.id}>${e.display}</option>`)}
          </select>
        </div>
        <div></div>


        <div class="table-cell print-template-label">Select Product Definition</div>
        <div class="table-cell print-template-config product-definition-selection">
          <input type="text" placeholder="Search..." .value=${this.productDefinitionFilter} @input=${this.onProductDefinitionFilterChanged}>
          <select @change=${this.onProductDefinitionChanged}>
            ${this.displayedProductDefinitions.filter(e=>e.display.toLowerCase().includes(this.productDefinitionFilter.toLowerCase())).map(e=>x`<option value=${e.id} .selected=${e.id===parseInt(this.productDefinitionId)}>${e.display}</option>`)}
          </select>
        </div>

        <div>&nbsp</div>
        ${this.displaySaveButton?x`<button type="button" id="save-changes" @click=${this.onSaveChangesClicked} class="${this.showSavingProgress?"show-progress":""}"><svg aria-hidden="true" role="status" class="inline w-4 h-4 me-3 text-white animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="white"/>
</svg>Save changes</button>`:x`<div></div>`}
        <div>&nbsp</div>
        <button @click=${this.onCancelClicked}>Cancel</button>
      </div>

      <dialog class="template-selection-dialog" id="template-selection">
        <wc-shop-item-list .items=${this.loadedTemmplates||[]} .selectedItem=${(this.loadedTemmplates||[]).find(e=>e.name===this.templateSelectionContextTemplateName)??""} @change=${this.onSelectedTemplateChanged} ?hasNoneEntry=${!0}></wc-shop-item-list>

        <form method="dialog">
          <button type="button" id="template-selection-ok" @click=${this.onTemplateSelectionOkClicked}>OK</button>
          <button type="button" id="template-selection-cancel" @click=${this.onTemplateSelectionCancelClicked}>Cancel</button>
        </form>
      </dialog>

      <dialog class="merge-template-selection-dialog" id ="layout-snippet-selection">
        <wc-shop-merge-template-configurator .mergeTemplate=${this.mergeTemplates} @save-changes=${this.onMergeTemplateChanged} @select-template=${this.onShowTemplateSelectionDialog}></wc-shop-merge-template-configurator>
      </dialog>
      `}};__decorate$y([e$3({attribute:!0,type:String})],WcShopProductConfiguration.prototype,"templateName",void 0),__decorate$y([e$3({attribute:!0,type:String})],WcShopProductConfiguration.prototype,"printTemplateName",void 0),__decorate$y([e$3({attribute:!0,type:String})],WcShopProductConfiguration.prototype,"mergeTemplates",void 0),__decorate$y([e$3({attribute:!0,type:Object})],WcShopProductConfiguration.prototype,"shopIntegration",void 0),__decorate$y([e$3({attribute:!0,type:Object})],WcShopProductConfiguration.prototype,"product",void 0),__decorate$y([e$3({attribute:!1,type:Boolean})],WcShopProductConfiguration.prototype,"displaySaveButton",void 0),__decorate$y([e$3({attribute:!1,type:Array})],WcShopProductConfiguration.prototype,"loadedTemmplates",void 0),__decorate$y([e$3({attribute:!1,type:Array})],WcShopProductConfiguration.prototype,"loadedPrintTemplates",void 0),__decorate$y([e$3({attribute:!1,type:Array})],WcShopProductConfiguration.prototype,"loadedSnippets",void 0),__decorate$y([e$3({attribute:!1,type:Boolean})],WcShopProductConfiguration.prototype,"showSavingProgress",void 0),__decorate$y([e$3({attribute:!0,type:Object})],WcShopProductConfiguration.prototype,"dropshippers",void 0),__decorate$y([e$3({attribute:!0,type:Object})],WcShopProductConfiguration.prototype,"productDefinitions",void 0),__decorate$y([t$1()],WcShopProductConfiguration.prototype,"templateSelectionContextTemplateName",void 0),__decorate$y([t$1()],WcShopProductConfiguration.prototype,"templateSelectionContextCallback",void 0),__decorate$y([t$1()],WcShopProductConfiguration.prototype,"mergeTemplateLabels",void 0),__decorate$y([t$1()],WcShopProductConfiguration.prototype,"productDefinitionId",void 0),__decorate$y([t$1()],WcShopProductConfiguration.prototype,"usesSlimUi",void 0),__decorate$y([t$1()],WcShopProductConfiguration.prototype,"productDefinitionFilter",void 0),__decorate$y([t$1()],WcShopProductConfiguration.prototype,"selectedDropshipper",void 0),__decorate$y([t$1()],WcShopProductConfiguration.prototype,"displayedProductDefinitions",void 0),WcShopProductConfiguration=__decorate$y([e$4("wc-shop-product-configuration")],WcShopProductConfiguration);var __decorate$x=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};class SelectionChangeEvent extends Event{}let WcShopItemList=class extends s$1{constructor(){super(),this.items=null,this.selectedItem="",this.selectedItems=[],this.hasNoneEntry=!1,this.searchTerm="",this.multiSelect=!1,this.displayHeader=!0}connectedCallback(){super.connectedCallback()}setState(e,t){this.items=e,this.multiSelect?t?Array.isArray(t)?this.selectedItems=[...t]:this.selectedItems=[t]:this.selectedItems=[]:!t||Array.isArray(t)&&0===t.length?this.selectedItem="":this.selectedItem=Array.isArray(t)?t[0]:t}static get styles(){return i$4`
    ${ShopCss.inputCss(ShopCss.Color.blue)}
      label {
        font-size: 16px;
        font-weight: 400;
        color: rgb(85, 85, 85);
        font-family: var(--printess-text-font);
        margin-right:10px;
      }

      .items {
        height: auto;
        max-height: 59vh;
        min-height: 300px;
        margin-bottom: 10px;
        margin-top: 10px;
        border: 1px solid black;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 10px;
      }

      .search-bar {
        padding: 10px 0;
        display: flex;
        align-items: center;
      }

      .search-bar > input {
        background-color: ${ShopCss.convertColor(ShopCss.Color.lightBlue)};
      }

      .row {
        padding: 10px 5px;
        align-items: center;
      }

      .row:hover {
        background-color: ${ShopCss.convertColor(ShopCss.Color.lightBlue)}
      }

      .row.selected {
        background-color: ${ShopCss.convertColor(ShopCss.Color.blueHover)};
        color: white;
      }

      .row > .cell.thumbnail.has-thumbnail > img {
        width: 40px;
      }

      .row > .cell.thumbnail:not(.has-thumbnail) {
        display:none;
      }

      .row.has-thumbnails {
       display: grid;
       grid-template-columns: 50px auto;
      }
    `}onUpdateSearchTerm(e){this.searchTerm=(e?.target)?.value??""}getFilteredItems(){const e=(this.searchTerm||"").toLowerCase();return(this.items??[]).filter(t=>{if(!e)return!0;return(("string"==typeof t?t:t.name)??"").toLowerCase().indexOf(e)>-1})}onSelectItem(e){if(this.multiSelect)if(""===e){if(this.selectedItems&&this.selectedItems.length>0){this.selectedItems=[];const e=new SelectionChangeEvent("change");e.selectedItem=this.selectedItem,this.dispatchEvent(e)}}else{this.itemIsSelected(e)?this.selectedItems=this.selectedItems.filter(t=>t!==e):this.selectedItems=[...this.selectedItems||[],e];const t=new SelectionChangeEvent("change");t.selectedItem=this.selectedItems,this.dispatchEvent(t)}else if(""===e){if(this.selectedItem){this.selectedItem="";const e=new SelectionChangeEvent("change");e.selectedItem="",this.dispatchEvent(e)}}else if(this.selectedItem!==e){this.selectedItem=e;const t=new SelectionChangeEvent("change");t.selectedItem=e,this.dispatchEvent(t)}}itemIsSelected(e){return this.multiSelect?!0===this.selectedItems?.includes(e):e===this.selectedItem}getSelectedItemsLabel(){if(this.multiSelect){const e=this.selectedItems.map(e=>"string"==typeof e?e:e.name);return e.join(",")??""}return"string"==typeof this.selectedItem?this.selectedItem:this.selectedItem.name}render(){const e=this,t=(this.items?.filter(e=>"string"!=typeof e&&e.thumbnail)||[]).length>0;return x`
      ${this.displayHeader?x`<div class="info-text">Currently selected: ${this.getSelectedItemsLabel()}</div>`:""}

      <div class="search-bar">
        <label class="search-term-label">Search:</label>
        <input type="text" @input=${this.onUpdateSearchTerm} value=${this.searchTerm||""} placeholder="Your search term">
      </div>

      <div class="items">
        ${this.hasNoneEntry?x`<div class="row ${(this.multiSelect?0===this.selectedItems.length||this.selectedItems?.includes(""):!this.selectedItem)?"selected":""}" @click=${function(t){t.preventDefault(),t.stopPropagation(),e.onSelectItem("")}}><div class="cell thumbnail ${t?"has-thumbnail":""}"></div><div class="cell label none-entry">None</div></div>`:""}

        ${this.getFilteredItems().map(o=>{const r=this.itemIsSelected(o),i="string"!=typeof o&&o.thumbnail;let a=r?"selected ":"";return t&&(a+="has-thumbnails"),x`<div class="row ${a}" @click=${function(t){t.preventDefault(),t.stopPropagation(),e.onSelectItem(o)}}><div class="cell thumbnail  ${i?"has-thumbnail":""}">${i?x`<img .src=${o.thumbnail}>`:""}</div><div class="cell label">${"string"==typeof o?o:o.name}</div></div>`})}

      </div>
      `}};__decorate$x([e$3({attribute:!0,type:Array})],WcShopItemList.prototype,"items",void 0),__decorate$x([e$3({attribute:!0,type:Object})],WcShopItemList.prototype,"selectedItem",void 0),__decorate$x([e$3({attribute:!0,type:Array})],WcShopItemList.prototype,"selectedItems",void 0),__decorate$x([e$3({attribute:!0,type:Boolean})],WcShopItemList.prototype,"hasNoneEntry",void 0),__decorate$x([e$3({attribute:!0,type:String})],WcShopItemList.prototype,"searchTerm",void 0),__decorate$x([e$3({attribute:!0,type:Boolean})],WcShopItemList.prototype,"multiSelect",void 0),__decorate$x([e$3({attribute:!0,type:Boolean})],WcShopItemList.prototype,"displayHeader",void 0),WcShopItemList=__decorate$x([e$4("wc-shop-item-list")],WcShopItemList);var __decorate$w=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcShopLayoutSelector=class extends s$1{constructor(){super(),this.selectedLayoutName="",this.tagsLoading=!1,this.keywordsLoading=!1,this.layoutsLoading=!1,this.showTags=!0,this.inOverlay=!0,this.loadedTags=null,this.selectedTags=null,this.loadedKeywords=null,this.selectedKeywords=null,this.loadedLayouts=null,this.selectedLayout=null,this.uidCopied=!1,this.layoutFilter="",this.filteredLayouts=null,this.selectedSnippets=[],this.thumbNailSize=160,this.snippetKeywords=[]}willUpdate(e){e.has("selectedLayoutName")&&null===this.loadedTags&&this.loadTagsAsync().then(e=>{this.loadKeywordsAsync()}),super.willUpdate(e)}static get styles(){return i$4`
      ${ShopCss.buttonCss(ShopCss.Color.green)}

      :host {
        font-family: var(--printess-text-font);
        color: rgb(85, 85, 85);
      }

      .content {
        display: grid;
        grid-template-columns: 350px 1fr;
        grid-gap: 10px;
      }

      .controls {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
        grid-gap: 10px;
      }

      .input-wrapper {
        display: flex;
        flex-direction: column;
      }

      .navigation {
        margin-top: 10px;
        grid-row: 6;
        display: flex;
        flex-direction: row;
      }

      .navigation button {
        margin-right: 10px;
      }

      .selection-options {
        grid-row: 5;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 2fr 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 5px;
      }

      .snippet-bulk-delete {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        font-size: 18px;
        background-color: var(--printess-red);
      }

      .copy-notification {
        grid-row: 2;
        grid-column: span 2;
        margin: 0;
      }

      .thumbnail-size-control {
        grid-column: 1;
        grid-row: 4;
        display: grid;
        justify-self: center;
        width: 100%;
      }

      .thumbnail-size-range {
        grid-column: span 2;
        grid-row: 1;
        width: 100%;
      }

      .thumbnail-size-label {
        grid-column: 1;
        grid-row: 2;
      }

      .thumbnail-size-number {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
      }

      .layouts {
        border-bottom: 2px solid var(--printess-blue);
        background-color: var(--printess-lightblue);
      }

      .layouts-heading {
        width: calc(100% - 20px);
        background-color: var(--printess-blue);
        color: white;
        margin: 0;
        padding-left: 20px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 18px;
        font-weight: 400;
        line-height: 50px;
      }

      .snippet-list {
        max-height: 80vh;
        display: flex;
        overflow-y: auto;
        flex-wrap: wrap;
        background-color: var(--printess-lightblue);
      }

      .snippet-list.no-border {
        border: none;
      }

      .empty-list {
        margin-left: 20px;
      }

      .snippet-list-item {
        position: relative;
        margin: 5px;
        height: 100%;
        color: black;
        background: white;
        height: auto;
        display: grid;
        grid-template-rows: 1fr 20px;
        font-weight: 400;
        border-radius: 5px;
        overflow: hidden;
      }

      .snippet-item-heading {
        margin: 0;
        font-weight: lighter;
        font-size: 14;
        color: rgb(85, 85, 85);
        width: 100%;
        align-self: center;
        justify-self: end;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .selection > .snippet-list-item:hover {
        cursor: pointer;
      }

      .snippet-list-thumb {
        display: block;
        max-width: 160px;
        max-height: 160px;
        /* aspect-ratio: 1; */
        object-fit: contain;
        /* border-top-left-radius: 5px;
        border-top-right-radius: 5px; */
        width: 100%;
        align-self: center;
        justify-self: center;
      }

      .snippet-item-buttons {
        position: absolute;
        top: 8px;
        width: 100%;
        height: 85%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 5px;
      }

      .snippet-list-button {
        align-self: flex-end;
        background-color: var(--printess-green);
        color: white;
        width: 30px;
        height: 30px;
        margin: 0;
        padding: 3px;
        font-size: 12px;
        grid-column: 3;
        grid-row: 3;
        opacity: 0;
      }

      .snippet-item-buttons:hover > button,
      .snippet-item-buttons:hover > div {
        opacity: 1;
      }

      .snippet-list-button:hover {
        background-color: var(--printess-greenHover);
      }

      .snippet-list-button.copy {
        grid-column: 4;
      }

      .snippet-list-button.last-position {
        grid-column: 5;
      }

      .snippet-list-button.delete {
        background-color: var(--printess-red);
        grid-column: 5;
      }

      .snippet-checkmark {
        grid-column: 5;
        grid-row: 1;
        width: 15px;
        height: 15px;
        background-color: white;
        border: 1px solid gray;
        border-radius: 3px;
        opacity: 0;
        cursor: pointer;
      }

      .snippet-checkmark.selected {
        opacity: 1;
      }

      .snippet-list-button.delete:hover {
        background-color: var(--printess-redHover);
      }

      .filter-spacer {
        height: 100%;
        border: 1px solid var(--printess-blue);
        border-radius: 5px;
        background: var(--printess-lightblue);
      }

      .layout-filter {
        position: relative;
        outline: none;
        border-radius: 3px;
        width: calc(100% - 10px);
        display: inline-block;
        margin: 5px;
        border: none;
        padding: 5px;
      }

      .layout-filter:focus-visible {
        border: none;
        outline: none;
      }

      .selected-layout {
        grid-row: 5;
        border: 1px solid var(--printess-blue);
        border-radius: 5px;
      }

      .selected-snippet {
        width: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }

      .selected-snippet-heading {
        width: auto;
        margin: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        padding: 10px;
        background-color: var(--printess-lightblue);
        font-size: 12px;
        color: rgb(85, 85, 85);
      }

      .selected-snippet > img {
        height: 70px;
        margin-top: 10px;
      }
    `}async loadTagsAsync(){if(this.tagsLoading)return[];this.tagsLoading=!0;try{const e=ShopCache.getItems(ShopCache.CacheTypes.tags);if(e.length>0)this.loadedTags=e;else{const e=await api.loadSnippetTags(!0);if(e instanceof ServerErrorResponse)return[];this.loadedTags=e.map(e=>(e.name=e.tag,e.isGlobal=!0===(e.tag&&e.tag.startsWith("printess-")),e)),ShopCache.resetItems(ShopCache.CacheTypes.tags,this.loadedTags)}return this.loadedTags}finally{this.tagsLoading=!1}}async loadKeywordsAsync(){if(this.keywordsLoading)return[];this.keywordsLoading=!0;try{const e=ShopCache.getItems(ShopCache.CacheTypes.keywords);if(e.length>0)this.loadedKeywords=e;else{const e=await api.loadLayoutKeywords(!0);if(e instanceof ServerErrorResponse)return[];this.loadedKeywords=e.map(e=>({name:e,keyword:e,isGlobal:!0===(e&&e.startsWith("printess-"))})),ShopCache.resetItems(ShopCache.CacheTypes.keywords,this.loadedKeywords)}return this.loadedKeywords}finally{this.keywordsLoading=!1}}updateLayoutFilter(e){this.layoutFilter=(e?.target)?.value??"",this.filterLayouts()}filterLayouts(){this.loadedLayouts&&(this.filteredLayouts=this.loadedLayouts.filter(e=>e.name.toLowerCase().includes(this.layoutFilter.toLowerCase())))}async loadLayouts(){const e=this.selectedTags?.map(e=>e.tag)??[],t=this.selectedKeywords?.map(e=>e.name)??[];this.layoutsLoading=!0;try{this.loadedLayouts=await ShopCachedApi.loadLayouts(e,t);let o=[];this.loadedLayouts.forEach(e=>{e.keywords.forEach(e=>{o.includes(e)||o.push(e)})}),this.snippetKeywords=o}finally{this.layoutsLoading=!1}return this.uidCopied=!1,this.filterLayouts(),this.selectedSnippets=[],this.loadedLayouts??[]}toggleSnippetSelection(e){this.selectedSnippets?.find(t=>t.id===e.id)?this.selectedSnippets=this.selectedSnippets.filter(t=>t.id!==e.id):this.selectedSnippets.push(e),this.requestUpdate()}onOkClicked(){const e=new SelectionChangeEvent("change");e.selectedItem=this.selectedLayout||"",this.dispatchEvent(e)}onCancelClicked(){const e=new SelectionChangeEvent("change");e.selectedItem="",this.dispatchEvent(e)}async deleteSnippet(e){new WcDialogConfirmRemoval(e.name,"Layout Snippet").showDialog(async t=>{if("sure"!==t)return;const o=await api.deleteLayoutSnippet(e.id);o instanceof ServerErrorResponse?alert(o.message):setTimeout(()=>{this.loadLayouts()},200)})}async deleteSnippets(){new WcDialogConfirmRemoval(`${this.selectedSnippets.length} Layout Snippets`,"").showDialog(async e=>{if("sure"!==e)return;const t=(await Promise.all(this.selectedSnippets.map(async e=>await api.deleteLayoutSnippet(e.id)))).find(e=>e instanceof ServerErrorResponse);t?alert(t.message):(this.selectedSnippets=[],setTimeout(()=>{this.loadLayouts()},200))})}thumbNailSizeChanged(e){const t=e.target;this.thumbNailSize=+t.value,this.requestUpdate()}render(){!this.loadedKeywords||this.loadedKeywords.map(({keyword:e})=>e),!this.loadedTags||this.loadedTags.map(({tag:e})=>e),this.style.display="flex",this.style.flexDirection="column",this.style.justifyContent="space-between";const e=e=>{e&&(this.selectedKeywords=this.loadedKeywords?this.loadedKeywords?.filter(t=>e.includes(t.keyword)):[],this.loadLayouts())},t=e=>{e&&(this.selectedTags=this.loadedTags?this.loadedTags?.filter(t=>e.includes(t.tag)):[],this.loadLayouts())},o=e=>{const t=`sid~${e.id}${e.isGlobal?"~gid":""}`;navigator.clipboard.writeText(t),this.uidCopied=!0};return x`
      <div class="content">
        <div class="controls">
          <div class="input-wrapper">
            <wc-universal-tag-list
              tagtype="layout-tags"
              placeholder="Search Tags..."
              @tagsChanged=${e=>t(e.detail)}
              ></wc-universal-tag-list>
          </div>
          ${this.selectedTags&&this.selectedTags.length>0&&!this.layoutsLoading?x`
          <div class="input-wrapper">
            <!-- using selectedTags to preserve selected keywords through rerender -->
            <wc-universal-tag-list
              tagtype="keywords"
              placeholder="Search Keywords..."
              @tagsChanged=${t=>e(t.detail)}
              .filtertags=${this.snippetKeywords}
              .selectedtags=${(()=>this.selectedKeywords?this.selectedKeywords.map(({keyword:e})=>e):[])()}
              ></wc-universal-tag-list>
          </div>`:""}

          ${this.loadedLayouts&&this.loadedLayouts.length>0?x`
            <div class="input-wrapper">
              <div class="filter-spacer">
                <input type="text" @input=${this.updateLayoutFilter} class="layout-filter" placeholder="Search Snippet Name">
              </div>
            </div>`:""}

          ${this.inOverlay?"":x`
          <div class="selection-options">
            ${this.selectedSnippets.length>0?x`
            <button class="snippet-bulk-delete" @click=${()=>this.deleteSnippets()}>
              <wc-icon primarycolor="remove" icon="trash-solid"></wc-icon>
              ${this.selectedSnippets.length}
            </button>`:""}
            ${this.uidCopied?x`<p class="copy-notification">UID copied to clipboard!</p>`:""}
          </div>`}


          <div class="thumbnail-size-control">
              <input class="thumbnail-size-range" type="range" id="thumbnail-size" name="thumbnail-size" min="120" max="250" step="1" @change=${this.thumbNailSizeChanged} aria-label="Thumbnail Size"/>
              <label class="thumbnail-size-label" for="thumbnail-size">Thumbnail Size</label>
              <div class="thumbnail-size-number"> ${this.thumbNailSize} </div>
            </div>

          ${this.inOverlay?x`
          <div class="selected-layout">
            ${this.selectedLayout?x`
              <div class="selected-snippet">
                <span>${this.selectedLayout?.name}</span>
                <img .src=${this.selectedLayout.thumbnail} class="snippet-list-thumb">
              </div>
            `:x`<p class="selected-snippet-heading">No Layout selected</p>`}<div>
            </div>
          </div>`:""}
          <div class="navigation">
            <button type="button" style="${this.selectedLayout?"":"display:none"}" @click=${this.onOkClicked}>Ok</button>
            <button type="button" style="${this.inOverlay?"":"display:none"}" @click=${this.onCancelClicked}>Cancel</button>
          </div>
        </div>

        <div class="layouts">

          <h3 class="layouts-heading">Layout-Snippets</h3>
          ${this.layoutsLoading?x`Loading layouts`:""}

          ${this.inOverlay?x`
            <div class="snippet-list selection">
              ${this.loadedLayouts&&this.filteredLayouts&&this.filteredLayouts.length>0?"":x`
                <p class="empty-list">No Layouts matching your search...</p>
              `}
              ${this.filteredLayouts?.map(e=>x`
              <div class="snippet-list-item" title="${e.name}" style="width: ${this.thumbNailSize}px;" @click=${()=>this.selectedLayout=e}>
                <img .src=${e.thumbnail} class="snippet-list-thumb" style="max-width: ${this.thumbNailSize}px; max-height: ${this.thumbNailSize}px;">
                <p class="snippet-item-heading" style="width: ${this.thumbNailSize}px;">${e.name}</p>
              </div>
              `)}
            </div>
          `:""}

          ${this.inOverlay?"":x`
            <div class="snippet-list ${this.selectedTags?.length?"":"no-border"}">
              ${this.selectedTags?.length?x`${this.filteredLayouts&&this.filteredLayouts.length>0?"":x`<p class="empty-list">No Layouts matching your search...</p>`}`:x`<p class="empty-list">Select a Tag to load Layout Snippets</p>`}
              ${this.filteredLayouts?.map(e=>x`
              <div class="snippet-list-item" title="${e.name}" style="width: ${this.thumbNailSize}px;">
                <img .src=${e.thumbnail} class="snippet-list-thumb" style="max-width: ${this.thumbNailSize}px; max-height: ${this.thumbNailSize}px;">
                <div class="snippet-item-buttons">
                  ${e.isGlobal?"":x`
                    <div role="checkbox" @click=${()=>this.toggleSnippetSelection(e)}
                      class="snippet-checkmark ${this.selectedSnippets.find(t=>e.id===t.id)?"selected":""}"
                    >
                      ${this.selectedSnippets.find(t=>e.id===t.id)?x`
                      <wc-icon class="snippet-selected-check" primarycolor="gray" icon="check-solid"></wc-icon>
                      `:""}

                    </div>`}
                  <button type="button" class="snippet-list-button ${e.isGlobal?"last-position":""}" aria-label="Copy ID" title="Copy ID" @click=${()=>o(e)}><wc-icon primarycolor="gray" icon="copy"></wc-icon></button>
                  ${e.isGlobal?"":x`<button type="button" class="snippet-list-button copy" aria-label="Go to Snippet" title="Go to Snippet" @click=${()=>(async e=>{const t=await fetch(e.snippetUrl).then(e=>e.json()),o=`https://editor.printess.com/?name=${t.template.id}&version=draft&doc=${t.documents[0].id}&userId=${e.uid}`;window.open(o)})(e)}><wc-icon primarycolor="gray" icon="link"></wc-icon></button>`}
                  ${e.isGlobal?"":x`<button type="button" class="snippet-list-button delete" aria-label="Delete Snippet" title="Delete Snippet" @click=${()=>this.deleteSnippet(e)}><wc-icon primarycolor="remove" icon="trash-solid"></wc-icon></button>`}
                </div>
                <p class="snippet-item-heading" style="width: ${this.thumbNailSize}px;">${e.name}</p>
              </div>
              `)}
            </div>
          `}
        </div>
      </div>
    `}};__decorate$w([e$3({attribute:!0,type:String})],WcShopLayoutSelector.prototype,"selectedLayoutName",void 0),__decorate$w([e$3({attribute:!1,type:Boolean})],WcShopLayoutSelector.prototype,"tagsLoading",void 0),__decorate$w([e$3({attribute:!1,type:Boolean})],WcShopLayoutSelector.prototype,"keywordsLoading",void 0),__decorate$w([e$3({attribute:!1,type:Boolean})],WcShopLayoutSelector.prototype,"layoutsLoading",void 0),__decorate$w([e$3({attribute:!1,type:Boolean})],WcShopLayoutSelector.prototype,"showTags",void 0),__decorate$w([e$3({attribute:!1,type:Boolean})],WcShopLayoutSelector.prototype,"inOverlay",void 0),__decorate$w([e$3({attribute:!1,type:Array})],WcShopLayoutSelector.prototype,"loadedTags",void 0),__decorate$w([e$3({attribute:!1,type:Array})],WcShopLayoutSelector.prototype,"selectedTags",void 0),__decorate$w([e$3({attribute:!1,type:Array})],WcShopLayoutSelector.prototype,"loadedKeywords",void 0),__decorate$w([e$3({attribute:!1,type:Array})],WcShopLayoutSelector.prototype,"selectedKeywords",void 0),__decorate$w([e$3({attribute:!1,type:Array})],WcShopLayoutSelector.prototype,"loadedLayouts",void 0),__decorate$w([e$3({attribute:!1,type:Object})],WcShopLayoutSelector.prototype,"selectedLayout",void 0),__decorate$w([t$1()],WcShopLayoutSelector.prototype,"uidCopied",void 0),__decorate$w([t$1()],WcShopLayoutSelector.prototype,"layoutFilter",void 0),__decorate$w([t$1()],WcShopLayoutSelector.prototype,"filteredLayouts",void 0),__decorate$w([t$1()],WcShopLayoutSelector.prototype,"selectedSnippets",void 0),__decorate$w([t$1()],WcShopLayoutSelector.prototype,"thumbNailSize",void 0),__decorate$w([t$1()],WcShopLayoutSelector.prototype,"snippetKeywords",void 0),WcShopLayoutSelector=__decorate$w([e$4("wc-shop-layout-selection")],WcShopLayoutSelector);class ShopIntegrationStatusEvent extends CustomEvent{constructor(e,t,o=!1,r=null){super(e),this.autoHide=!1,this.progressIcon=!1,this.successIcon=!1,this.isError=!1,this.params=null,this.message=t||"",this.autoHide=!0===o,this.params=r}static createErrorMessage(e,t=null){const o=new ShopIntegrationStatusEvent("error-message",e,!1,t);return o.isError=!0,o.progressIcon=!1,o.successIcon=!1,o}}var __decorate$v=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcShopUi=class extends s$1{constructor(){super(),this.shopIntegration=null,this.currentMenu="setup"}connectedCallback(){super.connectedCallback()}static get styles(){return i$4`

    .all {
      margin: 10px 0;
    }

    .head {
      display: flex;
      align-items: center;
      background-color: ${ShopCss.convertColor("Blue")};
      border-radius: 6px 6px 0px 0px;
      color: white;
    }

    .title {
      font-size: 22px;
      font-weight: 500;
      font-family: var(--printess-header-font);
      margin: 1em;
    }

    .content {
      display: grid;
      grid-template-columns: fit-content(400px) 1fr;
      border-bottom: 3px solid var(--printess-lightblue);
    }

    .menu {
      grid-column: 1;
      background-color: ${ShopCss.convertColor("LightBlue")};
    }

    .details {
      grid-column: 2;
      overflow-x: auto;
    }

    .menu-entry {
      font-family: var(--printess-header-font);
      padding: 10px 20px 10px 10px;
      color: rgb(85, 85, 85);
      border-bottom: 1px solid #c6d4e7;
      font-size: 14px;
    }

    .menu-entry:first-of-type {
      border-top: 1px solid var(--printess-lightblue);
    }

    .menu-entry:hover {
      background-color: ${ShopCss.convertColor("BlueHover")};
      cursor: pointer;
    }

    .selected {
      background-color: ${ShopCss.convertColor("Blue")};
      color: white;
    }
    `}showStatusMessage(e){"string"==typeof e&&(e=new ShopIntegrationStatusEvent("status-message",e));try{this.dispatchEvent(e)}catch(t){console.log(e),console.error(t)}}setCurrentMenuEntry(e){this.currentMenu=e}shopifyConfigHasChanges(){const e=this.renderRoot.querySelector("wc-shopify-configuration");return!!e&&e.hasChanges}renderContent(e){switch(e){case"setup":return x`
          <wc-shopify-configuration
            .hideTitle=${!0}
            .shopifyIntegration=${this.shopIntegration}
            @error-message=${this.showStatusMessage}
            @status-message=${this.showStatusMessage}
          ></wc-shopify-configuration>`;case"products":return x`<wc-shop-products .shopIntegration=${this.shopIntegration}></wc-shop-products>`;default:return x`<h3>${e}</h3>`}}render(){return x`
        <div class="all">

          <div class="head">
            <h1 class="title">${this.shopIntegration?this.shopIntegration.shopDomain+" ( "+this.shopIntegration.shopSystem+" )":""}</h1>
          </div>

          <div class="content">

            <div class="menu">
              <div class="menu-entry ${o({selected:"setup"===this.currentMenu})}" @click=${()=>this.setCurrentMenuEntry("setup")}>
                Setup
              </div>
              <div class="menu-entry ${o({selected:"products"===this.currentMenu})}" @click=${()=>this.setCurrentMenuEntry("products")}>
                Products
              </div>
              <div class="menu-entry ${o({selected:"orders"===this.currentMenu})}" style="display: none;" @click=${()=>this.setCurrentMenuEntry("orders")}>
                Orders
              </div>
            </div>

            <div class="details">
              ${this.renderContent(this.currentMenu)}
            </div>

          </div>
        </div>


      `}};__decorate$v([e$3({attribute:!0,type:Object})],WcShopUi.prototype,"shopIntegration",void 0),__decorate$v([e$3({attribute:!1,type:String})],WcShopUi.prototype,"currentMenu",void 0),WcShopUi=__decorate$v([e$4("wc-shop-ui")],WcShopUi);var __decorate$u=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAccountLayoutSelection=class extends s$1{constructor(){super()}connectedCallback(){super.connectedCallback(),location.hash="#layout-snippets"}render(){return window.scrollTo({top:0,behavior:"smooth"}),x`
      <wc-topic-header title="Layout Snippets"></wc-topic-header>
      <wc-shop-layout-selection .inOverlay=${!1} ></wc-shop-layout-selection>
    `}};WcAccountLayoutSelection=__decorate$u([e$4("wc-account-layout-selection")],WcAccountLayoutSelection);const SortIndexTypes=["Hidden","Featured"],LayoutSnippetAspects=["super-portrait","portrait","square","landscape","super-landscape"];function getUserSettingIdCore(e,t,o,r){return"LayoutSnippet"+r+"_"+e+":"+o+"|"+t+"|"}class SortIndexProcessor{constructor(e,t){this.sourceApi=e,this.targetApi=t}async copyTopic(e,t,o){const r=[],i=new Map;for(const a of SortIndexTypes)for(const s of LayoutSnippetAspects){const n=getUserSettingIdCore(t,e.id,s,a),l=getUserSettingIdCore(o,e.id,s,a);r.push(n),i.set(n,l)}const a=await this.sourceApi.readUserSettingsSlim({keys:r});console.log(a);const s=[];for(const[e,t]of i){const o=a[e];o&&s.push(this.targetApi.writeUserSetting({key:t,json:o}))}await Promise.all(s)}async copyCategory(e,t,o){for(const r of e.tops)await this.copyTopic(r,t,o)}async copyCategories(e,t,o){for(const r of e.cats)await this.copyCategory(r,t,o)}async copy(e,t){const o=(await this.sourceApi.loadSortIndices()).filter(t=>t.name===e)[0];if(!o)throw new Error(`Sort index with name ${e} not found.`);const r=await this.sourceApi.loadKeywordMenu(o.menu);await this.copyCategories(r,e,t)}async addToAllTopicsCore(e,t,o){const r=(await this.sourceApi.loadSortIndices()).filter(t=>t.name===e)[0];if(!r)throw new Error(`Sort index with name ${e} not found.`);const i=await this.sourceApi.loadKeywordMenu(r.menu),a=[];for(const t of i.cats)for(const r of t.tops)for(const t of LayoutSnippetAspects){const i=getUserSettingIdCore(e,r.id,t,o);a.push(i)}const s=await this.sourceApi.readUserSettingsSlim({keys:a}),n=[];for(const e of a){const o=s[e];if(!o){n.push({key:e,json:JSON.stringify([t])});continue}const r=JSON.parse(o);Array.isArray(r)&&(r.push(t),n.push({key:e,json:JSON.stringify(r)}))}await this.sourceApi.writeUserSettings(n)}async removeFromAllTopicsCore(e,t,o){const r=(await this.sourceApi.loadSortIndices()).filter(t=>t.name===e)[0];if(!r)throw new Error(`Sort index with name ${e} not found.`);const i=await this.sourceApi.loadKeywordMenu(r.menu),a=[];for(const t of i.cats)for(const r of t.tops)for(const t of LayoutSnippetAspects){const i=getUserSettingIdCore(e,r.id,t,o);a.push(i)}const s=await this.sourceApi.readUserSettingsSlim({keys:a}),n=[];for(const e of a){const o=s[e];if(!o)continue;const r=JSON.parse(o);Array.isArray(r)&&n.push({key:e,json:JSON.stringify(r.filter(e=>e!=t))})}await this.sourceApi.writeUserSettings(n)}static async addToAllTopics(e,t,o){const r=new PrintessApiSlim("https://"+apiEndpoint,api.token),i=new SortIndexProcessor(r,r);await i.addToAllTopicsCore(e,t,o)}static async removeFromAllTopics(e,t,o){const r=new PrintessApiSlim("https://"+apiEndpoint,api.token),i=new SortIndexProcessor(r,r);await i.removeFromAllTopicsCore(e,t,o)}}const allLayoutSnippetAspects=["super-portrait","portrait","square","landscape","super-landscape"],allLayoutSnippetAspectsAndNames=allLayoutSnippetAspects.map(e=>{const t=layoutSnippetAspectNumber(e);let o=100,r=100;return t<1?o=100*t:t>1&&(r=100/t),{aspect:t,name:e,w:o,h:r}});function getLayoutAspectBounds(e){const t=layoutSnippetAspectNumber(e),o=layoutSnippetAspectNumber(e);let r=0,i=100;if("super-portrait"!==layoutSnippetAspectName(t)){const e=scaleLayoutAspect(t,"down");r=e+(t-e)/2}if("super-landscape"!==layoutSnippetAspectName(o)){const e=scaleLayoutAspect(o,"up");i=e-(e-o)/2}return{min:r,max:i}}function scaleLayoutAspect(e,t){const o=layoutSnippetAspectName(e);let r=allLayoutSnippetAspects.indexOf(o);return r="down"===t?Math.max(r-1,0):Math.min(r+1,allLayoutSnippetAspects.length-1),layoutSnippetAspectNumber(allLayoutSnippetAspects[r])}function layoutSnippetAspectNumber(e){switch(e){case"super-landscape":return 3;case"landscape":return 1.42;case"square":return 1;case"portrait":return 1/1.42;case"super-portrait":return 1/3}}function layoutSnippetAspectName(e){return e>=3?"super-landscape":e<=1/3?"super-portrait":e>=1.42?"landscape":e<=1/1.42?"portrait":"square"}const aspectRanges=allLayoutSnippetAspects.map(e=>({index:allLayoutSnippetAspects.indexOf(e),bounds:getLayoutAspectBounds(e)}));function getAspectNameByRange(e){const t=aspectRanges.filter(t=>t.bounds.min<e&&t.bounds.max>=e);return t.length?allLayoutSnippetAspects[t[0].index]:allLayoutSnippetAspects[allLayoutSnippetAspects.length-1]}const universalProduct={templateName:"",mockUpTemplateName:"universal-px-thumb-flex",mockUpDocumentName:"",initialSize:"400x400",imageWidth:250,outline:!0,tags:["printess-photo-variants"],layoutSnippetSortIndex:"printess-photo-variants"};async function init(e){const t=e.container.querySelector(".categories"),o=e.container.querySelector(".options"),r=e.container.querySelector(".specials"),i=e.container.querySelector(".results");if(!(t&&o&&i&&r))throw new Error("Cannot find sub-elements");const a=new PrintessShopApi(e.domain,e.shopToken),s=await a.loadKeywordMenus();if(!s.length)throw alert("Please create a keyword menu before."),new Error("Cannot initialize view. No Menu.");let n=null,l=null;for(let e=0;e<s.length;e++)try{const t=await a.loadKeywordMenu(s[e].k);t.cats&&t.cats[0]&&t.cats[0].tops&&(n=t,l=s[e].k)}catch(e){console.error(e)}if(null===n||null===l)throw alert("Cannot load any menu with valid sort index."),new Error("Cannot initialize view. No Menu.");const c=universalProduct,d={attachParameters:e,product:c,shopApi:a,allCategories:n.cats,selectedCategory:n.cats[0],selectedTopic:n.cats[0].tops[0],selectedSize:c.initialSize,selectedLayoutAspect:getAspectNameByRange(parseSizeToAspect(c.initialSize)),selectedImageCount:"star",selectedLanguage:"",snippets:[],snippetsHash:"",uploadSingleFotoSnippet:null,designYourselfSnippet:null,mainDiv:e.container,categoriesDiv:t,optionsDiv:o,resultsDiv:i,specialsDiv:r,featured:new Set,hidden:new Set,menus:s.map(e=>({name:e.n,key:e.k})),selectedMenuKey:l,allLayoutSortIndizies:[],layoutSnippetSortIndex:"Printess-Photo-Variants",tags:["Printess-Photo-Variants"],availableTags:e.tags};await loadAllLayoutSortIndizies(d);let p=!1;if(d.allLayoutSortIndizies.length){const t=d.allLayoutSortIndizies.filter(e=>e.name===c.layoutSnippetSortIndex)[0];if(t){const e=d.selectedMenuKey!==t.menu;d.layoutSnippetSortIndex=t.name,d.tags=t.tags,d.selectedMenuKey=t.menu,p=!0,e&&await loadSelectedMenu(d)}else e.serviceToken&&(d.layoutSnippetSortIndex=d.allLayoutSortIndizies[0].name,d.tags=d.allLayoutSortIndizies[0].tags,d.selectedMenuKey=d.allLayoutSortIndizies[0].menu,p=!0)}p||(d.layoutSnippetSortIndex=c.layoutSnippetSortIndex,d.tags=c.tags),await loadHiddenAndFeatured(d),await renderMain(d),renderFeaturedNavbar(d)}function isInEditMode(e){return e.product===universalProduct&&!!e.layoutSnippetSortIndex}function getUserSettingId(e,t){return"LayoutSnippet"+t+"_"+e.layoutSnippetSortIndex+":"+e.selectedLayoutAspect+"|"+e.selectedTopic.id+"|"+e.selectedLanguage}async function loadHiddenAndFeatured(e){if(e.layoutSnippetSortIndex){const t=new PrintessShopApi(e.attachParameters.domain,e.attachParameters.shopToken);e.featured=new Set,e.hidden=new Set;const o=getUserSettingId(e,"Featured"),r=getUserSettingId(e,"Hidden");console.log("LOADING: "+o);try{const i=await t.readUserSettings([o,r]);if(i&&i[o])try{const t=JSON.parse(i[o]);e.featured=new Set(t??[])}catch(e){console.error(e)}if(i&&i[r])try{const t=JSON.parse(i[r]);e.hidden=new Set(t??[])}catch(e){console.error(e)}}catch(e){console.error("Can't load user settings!")}}}async function storeHiddenOrFeatured(e,t){if(e.layoutSnippetSortIndex&&e.attachParameters.serviceToken){const o=getUserSettingId(e,t),r=new PrintessShopApi(e.attachParameters.domain,e.attachParameters.serviceToken),i=JSON.stringify(Array.from(e["Featured"===t?"featured":"hidden"]));console.log("SAVING: "+o,i),await r.writeUserSetting(o,i)}}async function loadAllLayoutSortIndizies(e){const t=new PrintessShopApi(e.attachParameters.domain,e.attachParameters.shopToken);try{const o=await t.readUserSettings(["AllFeaturedOrHiddenLayouts"]);if(o&&o.AllFeaturedOrHiddenLayouts){const t=JSON.parse(o.AllFeaturedOrHiddenLayouts);Array.isArray(t)&&(e.allLayoutSortIndizies=t.filter(e=>e.name&&e.tags))}}catch(e){console.error("Can't load user setting [AllFeaturedOrHiddenLayouts]",e)}}async function loadSelectedMenu(e){const t=new PrintessShopApi(e.attachParameters.domain,e.attachParameters.shopToken),o=await t.loadKeywordMenu(e.selectedMenuKey);o.cats&&o.cats[0]&&o.cats[0].tops?(e.allCategories=o.cats,e.selectedCategory=o.cats[0],e.selectedTopic=o.cats[0].tops[0]):alert("Please create categories and topics for the menu '"+o.n+"'")}async function storeAllFeaturedOrHiddenLayouts(e){const t=e.layoutSnippetSortIndex,o=e.tags,r=new PrintessShopApi(e.attachParameters.domain,e.attachParameters.serviceToken),i=e.allLayoutSortIndizies;let a=!1;for(let r=0;r<i.length;r++){if(e.allLayoutSortIndizies[r].name.toLowerCase()===t.toLowerCase()){i[r].tags=o,i[r].menu=e.selectedMenuKey,a=!0;break}}a||i.push({name:t,tags:o,menu:e.selectedMenuKey}),console.log("SAVING AllFeaturedOrHiddenLayouts",i),await r.writeUserSetting("AllFeaturedOrHiddenLayouts",JSON.stringify(i))}function parseSizeToAspect(e){const t=e.split("x");return 2===t.length?+t[0]/+t[1]:1}function sizeInInch(e){const t=e.split("x");if(2===t.length){const e=+t[0],o=+t[1];return(e/2.54).toFixed(2)+'" x '+(o/2.54).toFixed(2)+'"'}return"???"}function getAspectName(e){return e>=4?"ultra-landscape":e<=1/3?"ultra-portrait":e>=2?"super-landscape":e<=.5?"super-portrait":e>=1.1?"landscape":e<=1/1.1?"portrait":"square"}function getAvailableAspects(e){const t=[];if(e.product.sizes)for(const o of e.product.sizes)if(o){const e=getAspectName(parseSizeToAspect(o));t.push({aspect:e,inch:sizeInInch(o),size:o})}return t}function loadPrintess(e,t){const o=document.getElementById("printess");o&&o.remove(),console.log("Loading "+t);const r=document.createElement("iframe");r.id="printess",r.src="proxy.php?url=https%3A%2F%2Feditor.printess.com%2Fprintess-editor%2Fembed.html",r.dataset.templateName=e.product.templateName,r.dataset.snippetUrl=t,r.dataset.documentSize=e.selectedSize,r.setAttribute("onload","loadPrintess()"),document.body.append(r)}async function renderMain(e){renderCategories(e),renderSpecials(e),renderSnippets(e)}function renderSpecials(e){if(isInEditMode(e))return;const t=x`
    <div>
        Select one of the designs below
    </div>
    ${e.uploadSingleFotoSnippet?x`
      <div style="margin-left: -5px">
        or
      </div>
      <div class="specials-button uplopad-foto" @click=${()=>{let t,o;return loadPrintess(e,null!==(o=null===(t=e.uploadSingleFotoSnippet)||void 0===t?void 0:t.snippetUrl)&&void 0!==o?o:"")}}>
        Upload a Photo
      </div>
    `:""}
    ${e.designYourselfSnippet?x`
        <div>
            or
        </div>
      <div class="specials-button design-yourself"  @click=${()=>{let t,o;return loadPrintess(e,null!==(o=null===(t=e.designYourselfSnippet)||void 0===t?void 0:t.snippetUrl)&&void 0!==o?o:"")}}>
        Design Yourself
      </div>
    `:""}
  `;B(t,e.specialsDiv)}function renderCategories(e){const t=x`
    <ul class="category-tabs">
      ${e.allCategories.map(t=>x`
        <li class="topic-tab ${t===e.selectedCategory?"selected":""}" @click=${()=>(async t=>{t.tops.length>0&&(e.selectedCategory=t,e.selectedTopic=t.tops[0],await loadHiddenAndFeatured(e),renderCategories(e),renderSnippets(e))})(t)} />${t.n}</li>
      `)}
    </ul>
    <div class="topics">
      ${e.selectedCategory.tops.map(t=>x`
        <button class="topic ${t===e.selectedTopic?"selected":""}" @click=${()=>(async t=>{e.selectedTopic=t,await loadHiddenAndFeatured(e),renderCategories(e),renderSnippets(e)})(t)} />${t.n}</button>
      `)}
    </div>
  `;B(t,e.categoriesDiv)}function renderOptions(e){const t=x`
    ${renderAspectRatioFilter(e)}
    ${renderImageCountFilter(e)}
  `;B(t,e.optionsDiv),isInEditMode(e)||window.setTimeout(()=>{const t=e.mainDiv,o=t.querySelector(".content"),r=t.querySelector(".head");o&&r&&(o.style.marginTop=20+r.offsetHeight+"px",window.scrollTo(0,0))},0)}function renderFeaturedNavbar(e){if(e.product!==universalProduct)return;const t=e.allLayoutSortIndizies,o=e.menus,r=x`
   <div>
    <label>
      Name:
      <select @change=${t=>(async t=>{const o=t.target.value,r=e.allLayoutSortIndizies.filter(e=>e.name===o)[0];r&&(e.layoutSnippetSortIndex=r.name,e.tags=r.tags,e.selectedMenuKey=r.menu??e.menus[0].key,r.menu||await storeAllFeaturedOrHiddenLayouts(e),await loadSelectedMenu(e),await loadHiddenAndFeatured(e),renderCategories(e),renderSnippets(e),renderFeaturedNavbar(e))})(t)}>
        ${t.map(t=>x`<option .selected=${t.name===e.layoutSnippetSortIndex} value="${t.name}">${t.name}</option>`)}
      </select>
    </label>
    ${getIcon("plus","",async()=>{let t=null;for(;!t&&0===e.allLayoutSortIndizies.filter(e=>e.name===t).length;)if(t=prompt("Enter a name for the new feature or hidden set?"),null==t)return;t&&(e.layoutSnippetSortIndex=t,await storeAllFeaturedOrHiddenLayouts(e),await loadHiddenAndFeatured(e),renderSnippets(e),renderFeaturedNavbar(e))})}
    ${getIcon("trash","",async()=>{if(confirm("Do you really want to delete this featured or hidden set?\nThis can not be undone!")){const t=e.layoutSnippetSortIndex,o=e.allLayoutSortIndizies.filter(e=>e.name!==t);o.length>0?(e.layoutSnippetSortIndex=o[0].name,e.tags=o[0].tags):e.layoutSnippetSortIndex="",e.allLayoutSortIndizies=o,await storeAllFeaturedOrHiddenLayouts(e),await loadHiddenAndFeatured(e),renderSnippets(e),renderFeaturedNavbar(e)}})}
    ${getIcon("copy","",async()=>{let t=null;for(;!t&&0===e.allLayoutSortIndizies.filter(e=>e.name===t).length;)if(t=prompt("Please enter a name for the new sort index. The new sort index will be a copy of '"+e.layoutSnippetSortIndex+"'."),null==t)return;if(t){e.mainDiv.style.opacity="0.5";const o=new PrintessApiSlim("https://"+apiEndpoint,api.token),r=new SortIndexProcessor(o,o),i=e.layoutSnippetSortIndex;e.layoutSnippetSortIndex=t,await storeAllFeaturedOrHiddenLayouts(e),await r.copy(i,t),await loadHiddenAndFeatured(e),renderSnippets(e),renderFeaturedNavbar(e),alert("The new sort index has been added."),e.mainDiv.style.opacity=""}})}
    <div></div>
    <label>
      Menu:
      <select @change=${t=>(async t=>{const o=t.target.value,r=e.menus.filter(e=>e.key===o)[0];r&&(e.selectedMenuKey=r.key,await storeAllFeaturedOrHiddenLayouts(e),await loadSelectedMenu(e),await loadHiddenAndFeatured(e),renderCategories(e),renderSnippets(e),renderFeaturedNavbar(e))})(t)}>
        ${o.map(t=>x`<option .selected=${t.key===e.selectedMenuKey} value="${t.key}">${t.name}</option>`)}
      </select>
    </label>
    <div></div>
    <span>Tags: </span>
    <wc-universal-tag-list
      style="width: 300px;"
      .selectedtags=${e.tags}
      tagtype="layout-tags"
      .filtertags=${e.availableTags}
      @tagsChanged=${t=>(async t=>{e.tags=t,storeAllFeaturedOrHiddenLayouts(e),await loadHiddenAndFeatured(e),renderSnippets(e),renderFeaturedNavbar(e)})(t.detail)}
      addtagsallowed
      theme="slim"
      ></wc-universal-tag-list>
  </div>
  `,i=e.mainDiv.querySelector(".featured-navbar");i&&B(r,i)}function renderAspectRatioFilter(e){if(isInEditMode(e))return x`
      <div class="aspect-control">
        ${allLayoutSnippetAspectsAndNames.map(t=>x`

            <div class="aspect-item-container" data-aspect="${t.name}"
              @click=${()=>(async t=>{isInEditMode(e)&&(e.selectedLayoutAspect=t,await loadHiddenAndFeatured(e),renderSnippets(e))})(t.name)} title="${t.name}" >
                <div style="width: ${t.w}%; height: ${t.h}%; border: 1px solid var(--printess-font-color); background-color: ${e.selectedLayoutAspect===t.name?"var(--p-toolbar-bg)":"white"}; " ></div>
            </div>

        `)}
    </div>`;{const t=getAvailableAspects(e);if(0===t.length)return x``;const o=getAspectName(parseSizeToAspect(e.selectedSize));return x`
    <div class="aspect">
      <div>Size & Orientation:</div>
      <select @change=${t=>(async t=>{e.selectedSize=t.target.value,e.selectedLayoutAspect=getAspectNameByRange(parseSizeToAspect(e.selectedSize)),await loadHiddenAndFeatured(e),renderSnippets(e)})(t)}>
        ${t.map(e=>x`<option ?selected=${e.aspect===o} value="${e.size}">${e.inch+" "+e.aspect}</option>`)}
      </select>
    </div>
  `}}function renderImageCountFilter(e){if(!e.snippets?.length)return x``;const t=new Set;for(const o of e.snippets)o.title.startsWith("@@")||t.add(o.imageCount);if(isInEditMode(e)){const o=e.selectedImageCount;return x`
    <div class="img-count">

      ${getIcon("star-solid","star"===o?"selected":"",()=>{e.selectedImageCount="star",renderSnippets(e)})}

      <div class="img-count ${"all"===o?"selected":""}" @click=${()=>{e.selectedImageCount="all",renderSnippets(e)}}>All</div>

      ${Array.from(t).sort((e,t)=>e-t).map(t=>x`
        <div class="img-count ${o===t?"selected":""}" @click=${()=>{e.selectedImageCount=t,renderSnippets(e)}}>${t}</div>
      `)}

      ${getIcon("eye-slash","hidden"===o?"selected":"",()=>{e.selectedImageCount="hidden",renderSnippets(e)})}
    </div>
  `}return x`
    <div class="aspect">
      <div>Number of Photos:</div>
      <select @change=${t=>(t=>{t.target.value&&"star"!==t.target.value?e.selectedImageCount=parseInt(t.target.value,10):e.selectedImageCount="star",renderSnippets(e)})(t)}>
      ${"star"===e.selectedImageCount?x`
         <option selected value="star">Recommended designs</option>
      `:x`
         <option value="star">Recommended designs</option>
      `}
      ${Array.from(t).sort((e,t)=>e-t).map(e=>x`

         ${0===e?x`
           <option value="${e}">Designs without photos</option>
        `:1===e?x`
           <option value="${e}">Designs with 1 photo</option>
        `:x`
           <option value="${e}">Designs with ${e} Photos</option>
        `}

      `)}
      </select>
    </div>
  `}function filterSnippetsByMetaData(e){const t=e.selectedImageCount,o=e.snippets.filter(o=>!(o.title.startsWith("@@")||"hidden"!==t&&e.hidden.has(o.id))),r=e.snippets.filter(e=>e.title.startsWith("@@"));e.uploadSingleFotoSnippet=null,e.designYourselfSnippet=null;for(let t=0;t<r.length;t++)r[t].imageCount>0?e.uploadSingleFotoSnippet=r[t]:e.designYourselfSnippet=r[t];const i=new Map(o.map(e=>[e.id,e]));if("star"===t){const t=[];for(const o of e.featured){const e=i.get(o);e&&t.push(e)}return t}if("hidden"===t){const t=[];for(const o of e.hidden){const e=i.get(o);e&&t.push(e)}return t}if("all"===t)return Array.from(i.values());{const r=[],i=new Map(o.filter(e=>e.hasImageCountEqual(t)).map(e=>[e.id,e]));for(const t of e.featured){const e=i.get(t);e&&(r.push(e),i.delete(t))}return[...r,...Array.from(i.values())]}}async function renderSnippets(e){const t=e.tags,o=e.selectedTopic.kws,r=layoutSnippetAspectNumber(e.selectedLayoutAspect);let i=r<=1?e.product.imageWidth:e.product.imageWidth*r;i>.9*window.innerWidth&&(i=.9*window.innerWidth);const a=i/r;let s="";s=isInEditMode(e)?2*i+"x"+2*a:e.selectedSize;const n=new URLSearchParams(window.location.search).get("lang"),l=null===n?"en":n,c=e.product.mockUpTemplateName?{t:e.product.mockUpTemplateName,d:e.product.mockUpDocumentName,DOCUMENT_SIZE:s,TRANSLATION_KEY:l,uid:e.product===universalProduct?"gy8z44EmLiZ0vrUKrXlWtiZY15D2":void 0}:{};isInEditMode(e)||B(x``,e.resultsDiv);const d=t.join("|")+"|"+o.join("|")+"|"+r+"||"+e.selectedImageCount;if(d!==e.snippetsHash){const i=getUserSettingId(e,"Featured"),a="hidden"===e.selectedImageCount?"":getUserSettingId(e,"Hidden");e.snippets=await e.shopApi.loadLayoutSnippets(t,o,r,"",!0,c,i,a),e.snippetsHash=d}const p=filterSnippetsByMetaData(e),h=isInEditMode(e)?x` <div class="snippets">
      ${p.map(t=>x`
        <div class="snippet sort-mode">




           ${e.hidden.has(t.id)?x`
            ${getIcon("eye-slash","eye",()=>removeFromHidden(e,t.id))}
            <div class="eye-all-caption" @click=${()=>removeFromHiddenAll(e,t.id)}>ALL</div>
          `:x`
            ${getIcon("eye","eye",()=>addToHidden(e,t.id))}
            <div class="eye-all-caption" @click=${()=>addToHiddenAll(e,t.id)}>ALL</div>

            ${getIcon("star-solid","white")}
            ${e.featured.has(t.id)?x`
              ${getIcon("star-solid","star",()=>removeFromFavs(e,t.id))}
              <div class="star-all-caption" @click=${()=>removeFromFavsAll(e,t.id)}>ALL</div>
            `:x`
              ${getIcon("star-light","star",()=>addToFavs(e,t.id))}
              <div class="star-all-caption" @click=${()=>addToFavsAll(e,t.id)}>ALL</div>
            `}

          `}

          ${"star"===e.selectedImageCount&&e.featured.has(t.id)?x`
            <div class="arrows">
              ${getIcon("arrow-left-to-line","",()=>moveFirst(e,t.id))}
              ${getIcon("arrow-left","",()=>moveLeft(e,t.id))}
              ${getIcon("arrow-right","",()=>moveRight(e,t.id))}
              ${getIcon("arrow-right-to-line","",()=>moveLast(e,t.id))}
            </div>
          `:""}
          <img width="${i}"  height="${a}" style="${e.product.outline?"border: 1px solid #bbb;":""}" src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Bt.imageUrl%7D" />
        </div>
      `)}
    </div>`:x`
    <div class="snippets">
      ${p.map(t=>x`
      <div class="snippet select-mode">
        <img width="${i}"  height="${a}" style="${e.product.outline?"border: 1px solid #bbb;":""}"
           src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Bt.imageUrl%7D" @click=${()=>loadPrintess(e,t.snippetUrl)} />
      </div>
    `)}
    </div>
  `;isInEditMode(e)||window.scrollTo(0,0),renderSpecials(e),B(h,e.resultsDiv),renderOptions(e)}async function addToHidden(e,t){isInEditMode(e)&&(e.hidden.add(t),await storeHiddenOrFeatured(e,"Hidden"),renderSnippets(e))}async function removeFromHidden(e,t){isInEditMode(e)&&(e.hidden.delete(t),await storeHiddenOrFeatured(e,"Hidden"),renderSnippets(e))}async function addToFavs(e,t){isInEditMode(e)&&(e.featured.add(t),await storeHiddenOrFeatured(e,"Featured"),renderSnippets(e))}async function removeFromFavs(e,t){isInEditMode(e)&&(e.featured.delete(t),await storeHiddenOrFeatured(e,"Featured"),renderSnippets(e))}async function addToFavsAll(e,t){isInEditMode(e)&&(await SortIndexProcessor.addToAllTopics(e.layoutSnippetSortIndex,t,"Featured"),await loadHiddenAndFeatured(e),renderSnippets(e))}async function removeFromFavsAll(e,t){isInEditMode(e)&&(await SortIndexProcessor.removeFromAllTopics(e.layoutSnippetSortIndex,t,"Featured"),await loadHiddenAndFeatured(e),renderSnippets(e))}async function addToHiddenAll(e,t){isInEditMode(e)&&(await SortIndexProcessor.addToAllTopics(e.layoutSnippetSortIndex,t,"Hidden"),await loadHiddenAndFeatured(e),renderSnippets(e))}async function removeFromHiddenAll(e,t){isInEditMode(e)&&(await SortIndexProcessor.removeFromAllTopics(e.layoutSnippetSortIndex,t,"Hidden"),await loadHiddenAndFeatured(e),renderSnippets(e))}async function moveLeft(e,t){if(console.error("Move Left: "+t),isInEditMode(e)){const o=Array.from(e.featured);for(let e=0;e<o.length;e++)if(o[e]===t&&e>0){o[e]=o[e-1],o[e-1]=t;break}e.featured=new Set(o),await storeHiddenOrFeatured(e,"Featured"),renderSnippets(e)}}async function moveFirst(e,t){isInEditMode(e)&&(e.featured.delete(t),e.featured=new Set([t,...Array.from(e.featured).filter(e=>e!==t)]),await storeHiddenOrFeatured(e,"Featured"),renderSnippets(e))}async function moveRight(e,t){if(isInEditMode(e)&&e.featured.size>1){const o=Array.from(e.featured);for(let e=0;e<o.length-1;e++)if(o[e]===t){o[e]=o[e+1],o[e+1]=t;break}e.featured=new Set(o),await storeHiddenOrFeatured(e,"Featured"),renderSnippets(e)}}async function moveLast(e,t){isInEditMode(e)&&(e.featured.delete(t),e.featured=new Set([...Array.from(e.featured).filter(e=>e!==t),t]),await storeHiddenOrFeatured(e,"Featured"),renderSnippets(e))}function getIcon(e,t,o){switch(e){case"star-light":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 576 512"><path d="M226.5 168.8L287.9 42.3l61.4 126.5c4.6 9.5 13.6 16.1 24.1 17.7l137.4 20.3-99.8 98.8c-7.4 7.3-10.8 17.8-9 28.1l23.5 139.5L303 407.7c-9.4-5-20.7-5-30.2 0L150.2 473.2l23.5-139.5c1.7-10.3-1.6-20.7-9-28.1L65 206.8l137.4-20.3c10.5-1.5 19.5-8.2 24.1-17.7zM424.9 509.1c8.1 4.3 17.9 3.7 25.3-1.7s11.2-14.5 9.7-23.5L433.6 328.4 544.8 218.2c6.5-6.4 8.7-15.9 5.9-24.5s-10.3-14.9-19.3-16.3L378.1 154.8 309.5 13.5C305.5 5.2 297.1 0 287.9 0s-17.6 5.2-21.6 13.5L197.7 154.8 44.5 177.5c-9 1.3-16.5 7.6-19.3 16.3s-.5 18.1 5.9 24.5L142.2 328.4 116 483.9c-1.5 9 2.2 18.1 9.7 23.5s17.3 6 25.3 1.7l137-73.2 137 73.2z"/></svg>`;case"star-solid":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`;case"stars-solid":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 512 512"><path d="M325.8 152.3c1.3 4.6 5.5 7.7 10.2 7.7s8.9-3.1 10.2-7.7L360 104l48.3-13.8c4.6-1.3 7.7-5.5 7.7-10.2s-3.1-8.9-7.7-10.2L360 56 346.2 7.7C344.9 3.1 340.7 0 336 0s-8.9 3.1-10.2 7.7L312 56 263.7 69.8c-4.6 1.3-7.7 5.5-7.7 10.2s3.1 8.9 7.7 10.2L312 104l13.8 48.3zm-112.4 5.1c-8.8-17.9-34.3-17.9-43.1 0l-46.3 94L20.5 266.5C.9 269.3-7 293.5 7.2 307.4l74.9 73.2L64.5 483.9c-3.4 19.6 17.2 34.6 34.8 25.3l92.6-48.8 92.6 48.8c17.6 9.3 38.2-5.7 34.8-25.3L301.6 380.6l74.9-73.2c14.2-13.9 6.4-38.1-13.3-40.9L259.7 251.4l-46.3-94zm215.4 85.8l11 38.6c1 3.6 4.4 6.2 8.2 6.2s7.1-2.5 8.2-6.2l11-38.6 38.6-11c3.6-1 6.2-4.4 6.2-8.2s-2.5-7.1-6.2-8.2l-38.6-11-11-38.6c-1-3.6-4.4-6.2-8.2-6.2s-7.1 2.5-8.2 6.2l-11 38.6-38.6 11c-3.6 1-6.2 4.4-6.2 8.2s2.5 7.1 6.2 8.2l38.6 11z"/></svg>`;case"stars-light":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 512 512"><path d="M352 16l0 64 64 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-64 0 0 64c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64-64 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l64 0 0-64c0-8.8 7.2-16 16-16s16 7.2 16 16zM152.8 265.5c-4.7 9.5-13.7 16-24.1 17.5L41.2 295.8l63.4 61.9c7.5 7.3 11 17.9 9.2 28.3l-15 87.3L177 432.1c9.3-4.9 20.5-4.9 29.8 0L285 473.3l-15-87.3c-1.8-10.4 1.7-20.9 9.2-28.3l63.4-61.9-87.5-12.7c-10.4-1.5-19.4-8.1-24.1-17.5l-39.1-79.4-39.1 79.4zm17.6-108.1c8.8-17.9 34.3-17.9 43.1 0l46.3 94 103.5 15.1c19.7 2.9 27.5 27 13.3 40.9l-74.9 73.2 17.7 103.3c3.4 19.6-17.2 34.6-34.8 25.3l-92.6-48.8L99.3 509.2c-17.6 9.3-38.2-5.7-34.8-25.3L82.2 380.6 7.2 307.4C-7 293.5 .9 269.3 20.5 266.5l103.5-15.1 46.3-94zM448 160c8.8 0 16 7.2 16 16l0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-32-32 0c-8.8 0-16-7.2-16-16s7.2-16 16-16l32 0 0-32c0-8.8 7.2-16 16-16z"/></svg>`;case"arrow-left":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 448 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>`;case"arrow-left-to-line":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V96zM137.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L237.3 224 416 224c17.7 0 32 14.3 32 32s-14.3 32-32 32l-178.7 0 73.4 73.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-128-128z"/></svg>`;case"arrow-right":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>`;case"arrow-right-to-line":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 448 512"><path d="M448 96c0-17.7-14.3-32-32-32s-32 14.3-32 32V416c0 17.7 14.3 32 32 32s32-14.3 32-32V96zM310.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l178.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"/></svg>`;case"eye-slash":return x`<svg  xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 640 512"><path  d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path></svg>`;case"eye":return x`<svg  xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 576 512"><path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg>`;case"eyes-thin":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 640 512"><path d="M312 256c0 58.8-17.5 111.4-44.9 148.9C239.6 442.5 203 464 164 464s-75.6-21.5-103.1-59.1c-11.1-15.1-20.5-32.7-27.8-52.1C46.3 362.4 62.5 368 80 368c44.2 0 80-35.8 80-80s-35.8-80-80-80c-25.9 0-48.9 12.3-63.5 31.4c3-52.1 19.6-98.4 44.5-132.3C88.4 69.5 125 48 164 48s75.6 21.5 103.1 59.1C294.5 144.6 312 197.2 312 256zM16.8 277.8C21.7 247.3 48.1 224 80 224c35.3 0 64 28.7 64 64s-28.7 64-64 64c-25.5 0-47.5-14.9-57.8-36.5c-2.6-12.1-4.4-24.7-5.4-37.7zM320 186.7C298.6 96.9 236.9 32 164 32C73.4 32 0 132.3 0 256S73.4 480 164 480c72.9 0 134.6-64.9 156-154.7C341.4 415.1 403.1 480 476 480c90.6 0 164-100.3 164-224s-73.4-224-164-224c-72.9 0-134.6 64.9-156 154.7zm52.9 218.2c-13-17.7-23.7-38.9-31.5-62.4C356.1 358.2 376.9 368 400 368c44.2 0 80-35.8 80-80s-35.8-80-80-80c-31.7 0-59 18.4-72 45.1c.6-57.6 17.9-109.1 44.9-146C400.4 69.5 437 48 476 48s75.6 21.5 103.1 59.1C606.5 144.6 624 197.2 624 256s-17.5 111.4-44.9 148.9C551.6 442.5 515 464 476 464s-75.6-21.5-103.1-59.1zM400 352a64 64 0 1 1 0-128 64 64 0 1 1 0 128z"/></svg>`;case"eyes":return x`<svg xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 640 512"><path d="M96 224c-11.1 0-21.6 2.8-30.7 7.8c4-36.7 16.8-68.8 34.5-92.4C121.3 110.8 148.6 96 176 96s54.7 14.8 76.2 43.4C273.7 168.1 288 209.2 288 256s-14.3 87.9-35.8 116.6S203.4 416 176 416s-54.7-14.8-76.2-43.4c-4.9-6.5-9.4-13.6-13.4-21.3c3.1 .5 6.4 .7 9.6 .7c35.3 0 64-28.7 64-64s-28.7-64-64-64zm224-97.3c-5-9.1-10.5-17.6-16.6-25.7C272.8 60.2 228.1 32 176 32s-96.8 28.2-127.4 69C18 141.8 0 196.7 0 256s18 114.2 48.6 155c30.6 40.8 75.3 69 127.4 69s96.8-28.2 127.4-69c6-8 11.6-16.6 16.6-25.7c5 9.1 10.5 17.6 16.6 25.7c30.6 40.8 75.3 69 127.4 69s96.8-28.2 127.4-69C622 370.2 640 315.3 640 256s-18-114.2-48.6-155C560.8 60.2 516.1 32 464 32s-96.8 28.2-127.4 69c-6 8-11.6 16.6-16.6 25.7zm54.4 224.6c3.1 .5 6.4 .7 9.6 .7c35.3 0 64-28.7 64-64s-28.7-64-64-64c-11.1 0-21.6 2.8-30.7 7.8c4-36.7 16.8-68.8 34.5-92.4C409.3 110.8 436.6 96 464 96s54.7 14.8 76.2 43.4C561.7 168.1 576 209.2 576 256s-14.3 87.9-35.8 116.6S491.4 416 464 416s-54.7-14.8-76.2-43.4c-4.9-6.5-9.4-13.6-13.4-21.3z"/></svg>`;case"plus":return x`<svg xmlns="http://www.w3.org/2000/svg"  class="icon ${t}" @click=${o} viewBox="0 0 512 512"><path d="M384 250v12c0 6.6-5.4 12-12 12h-98v98c0 6.6-5.4 12-12 12h-12c-6.6 0-12-5.4-12-12v-98h-98c-6.6 0-12-5.4-12-12v-12c0-6.6 5.4-12 12-12h98v-98c0-6.6 5.4-12 12-12h12c6.6 0 12 5.4 12 12v98h98c6.6 0 12 5.4 12 12zm120 6c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-32 0c0-119.9-97.3-216-216-216-119.9 0-216 97.3-216 216 0 119.9 97.3 216 216 216 119.9 0 216-97.3 216-216z"/></svg>`;case"trash":return x`<svg  xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 448 512"><path  d="M296 432h16a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8h-16a8 8 0 0 0-8 8v272a8 8 0 0 0 8 8zm-160 0h16a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8h-16a8 8 0 0 0-8 8v272a8 8 0 0 0 8 8zM440 64H336l-33.6-44.8A48 48 0 0 0 264 0h-80a48 48 0 0 0-38.4 19.2L112 64H8a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h24v368a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V96h24a8 8 0 0 0 8-8V72a8 8 0 0 0-8-8zM171.2 38.4A16.1 16.1 0 0 1 184 32h80a16.1 16.1 0 0 1 12.8 6.4L296 64H152zM384 464a16 16 0 0 1-16 16H80a16 16 0 0 1-16-16V96h320zm-168-32h16a8 8 0 0 0 8-8V152a8 8 0 0 0-8-8h-16a8 8 0 0 0-8 8v272a8 8 0 0 0 8 8z"></path></svg>`;case"copy":return x`<svg  xmlns="http://www.w3.org/2000/svg" class="icon ${t}" @click=${o} viewBox="0 0 448 512"><path  d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM352 32.491a15.88 15.88 0 0 1 7.431 4.195l51.882 51.883A15.885 15.885 0 0 1 415.508 96H352V32.491zM288 464c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V144c0-8.822 7.178-16 16-16h80v240c0 26.51 21.49 48 48 48h112v48zm128-96c0 8.822-7.178 16-16 16H176c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v240z"></path></svg>`}}var __decorate$t=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcGalleryPage=class extends s$1{static get styles(){return i$4`

    /* Counter act the Safari viewport-height bug */
    html {
      height: -webkit-fill-available;
    }

    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      height: -webkit-fill-available;
      font-size: var(--printess-gallery-font-size-normal);
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      color: var(--printess-gallery-font-color);
    }

    .views {
      position:fixed;
      z-index: 200;
    }

    select,
    input {
      font-size: var(--printess-gallery-font-size-normal);
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      color: var(--printess-gallery-font-color);
    }

    .printess-navbar {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: 50px;
      background-color: var(--p-toolbar-bg);
      position: fixed;
      right: 0;
      left: 250px;
      top: 0;
      z-index: 200;
    }

    .printess-logo {
      width: 120px;
      height: 35px;
      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 20px;
      background-image: url('/printess-white-2.svg');
      background-position: 0px 0px;
      background-size: contain;
      background-repeat: no-repeat;
      text-decoration: none;
      background-origin: content-box;
    }

    .featured-navbar {
      display: flex;
      top: 9px;
      left: 260px;
      z-index: 300;
      align-items: center;
      align-content: center;
      justify-content: space-around;
    }

    .featured-navbar > div {
      display: grid;
      grid-template-columns: auto 30px 30px 30px 30px  auto 30px 45px 1fr;
      align-items: center;
    }

    .featured-navbar select {
      min-width: 200px;
    }

    .featured-navbar .icon {
      width: 22px;
      height: 22px;
      padding-left: 8px;
      fill: var(--p-toolbar-bg);
    }

    .featured-navbar .icon:hover {
      fill: var(--p-toolbar-bg-hover)
    }

    iframe {
      width: 100vw;
      height: 100%;
      border: none;
      display: block;
      position: fixed;
      top: 0;
      left: 250px;
      z-index: 300;
    }



    .link-list {
      display: flex;
      position: fixed;
      z-index: 205;
      padding: 10px 20px;
      font-size: 18px;
      gap: 10px;
      top: 10px;
      left: 108px;
      color: white;

      /*TEST-START*/
      top: 10px;
      right: 0px;
      left: unset;
      font-size: 12px;
      /*TEST-END*/
    }

    .back-link {
      border-left: 1px solid white;
      padding-left: 10px;

      /*TEST-START*/
      display: none;
      /*TEST-END*/

    }

    .link-list>a {
      color: white;
      text-decoration: none;
    }

    .link-list>a:hover {
      color: pink;
      text-decoration: none;
    }

    #main {
      /* */
      display: block;
    }

    .head {
      position: fixed;
      top: 50px;
      left: 250px;
      right: 0;
      background: white;
      z-index: 100;
      padding-top: 20px;
    }

    .content {
      margin-top: 220px;
    }

    .specials {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 15px 0 30px 0;
    }

    .specials-button {
      font-size: 16px;
      color: #777;
      padding: 7px;
      border: 1px solid gray;
      cursor: pointer;
    }

    .specials-button:hover {
      background: #eee;
    }

    .categories {
      display: grid;
      flex-direction: column;
      grid-template-rows: auto auto auto;
      grid-auto-columns: 1fr;
      align-content: center;
      justify-content: center;
      justify-items: center;
    }

    .options {
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 1px 6px #000000aa;
    }

    .aspect {
      display: flex;
      flex-direction: column;
    }

    .aspect>div {
      font-size: var(--printess-gallery-font-size-small);
      padding-left: 2px;
      padding-bottom: 2px;
    }

    .img-count {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .img-count>div {
      border: #666 solid 1px;
      text-align: center;
      padding: 4px;
      font-size: 12px;
      line-height: 12px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    .img-count>svg {
      border: #666 solid 1px;
      width: 20px;
      height: 20px;
      padding: 4px;
      fill: #444;
      cursor: pointer;
    }

    .img-count>.selected,
    .img-count>div:hover,
    .img-count>svg:hover {
      background-color: var(--p-toolbar-bg-hover);
      color: white;
      fill: gold;
    }

    .aspect-control {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3px;
    }

    .aspect-item-container {
      width: 24px;
      height: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 2px;
    }

    .snippets {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }

    .snippet {
      padding: 4px;
      cursor: pointer;
      position: relative;
    }

    .snippet.select-mode {
      border: 2px solid white;
      border-radius: 3px;
    }

    .snippet.select-mode:hover {
      border: 2px solid black;

    }

    .snippet.sort-mode {
      cursor: default;
      border: 2px solid white;
    }

    .snippet .star {
      position: absolute;
      left: 12px;
      top: 10px;
      width: 30px;
      height: 30px;
      fill: gold;
      cursor: pointer;
    }

    .snippet .star-all-caption {
      background-color: white;
      border: 1px solid gold;
      color: gold;
      border-radius: 2px;
      font-size: 10px;
      line-height: 0.9;
      padding: 2px 4px;
      position: absolute;
      left: 13px;
      top: 45px;
      cursor: pointer;
    }
    .snippet .star-all-caption:hover {
      color: white;
      background-color: gold;
    }

    .snippet .white-all {
      position: absolute;
      left: 43px;
      top: 7px;
      width: 30px;
      height: 30px;
      fill: white;
    }

    .snippet .white {
      position: absolute;
      left: 12px;
      top: 10px;
      width: 30px;
      height: 30px;
      fill: white;
    }

    .snippet .eye {
      position: absolute;
      right: 10px;
      top: 10px;
      width: 30px;
      height: 30px;
      fill: #d1479b;
      cursor: pointer;
    }

    .snippet .arrows {
      display: none;


      gap: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      align-items: center;
      justify-content: center;
    }

    .snippet:hover .arrows {
      display: flex;
    }

    .snippet .eye-all-caption {
      background-color: white;
      border: 1px solid #d1479b;
      color: #d1479b;
      border-radius: 2px;
      font-size: 10px;
      line-height: 0.9;
      padding: 2px 4px;
      position: absolute;
      right: 12px;
      top: 45px;
      cursor: pointer;
    }
    .snippet .eye-all-caption:hover {
      color: white;
      background-color: #d1479b;
    }

    .snippet .arrows>svg {
      border: #444 1px solid;
      background-color: #ffffffff;
      padding: 7px;
      border-radius: 7px;
      width: 32px;
      height: 32px;
      fill: var(--p-toolbar-bg);
      cursor: pointer;
    }


    .snippet .arrows>svg:hover {
      fill: black;
    }

    select {
      padding: 4px;
    }

    .category-tabs {
      list-style: none;
      display: flex;
      justify-content: stretch;
      padding: 0 60px;
      margin: 0;
      margin-top: 24px;
    }

    .category-tabs>li {
      padding: 12px 10px;
      border-top: 1px solid gray;
      border-left: 1px solid gray;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      width: 100%;
      font-size: var(--printess-gallery-font-size-big);
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
      margin-bottom: -1px;
    }

    .category-tabs>li.selected {
      background: #eee;
      border-bottom: 1px solid #eee;
      position: relative;
    }

    .topics {
      align-self: center;
      background: #eee;
      width: 100%;
      justify-content: center;
      display: flex;
      padding: 19px 0;
      border-top: 1px solid gray;
      flex-wrap: wrap;
    }

    .topic {
      background-color: white;
      font-size: var(--printess-gallery-font-size-normal);
      vertical-align: middle;
      margin: 5px;
      padding: 6px 12px;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      color: #666;
    }

    .topic:hover {
      background: var(--printess-gallery-light);
    }

    .topic.selected {
      background: var(--printess-gallery-dark);
      color: white;
    }

    .category-tabs>li:last-child {
      border-right: 1px solid gray;
    }

    .options {
      background: #ddd;
      padding: 12px;
      font-size: var(--printess-gallery-font-size-normal);
      display: flex;
      gap: 20px;
    }

    @media screen and (max-width: 600px) {

      .category-tabs>li {
        padding: 12px 5px;
        margin-bottom: -2px;
        font-size: var(--printess-gallery-font-size-normal);
      }

      .options {
        flex-direction: column;
        gap: 10px;
      }

      select {
        width: 80%;
      }

    }
    `}constructor(){super(),this.loadKeywords()}async loadKeywords(){const e=await api.loadSnippetTags(!1);e instanceof ServerErrorResponse$2?alert(e.message):this.initEditView(e.filter(e=>e.layout>0).map(e=>e.tag))}createMainDiv(){const e=(new DOMParser).parseFromString('\n      <div id="main">\n        <div class="head">\n          <div class="featured-navbar"></div>\n          <div class="categories"></div>\n          <div class="options"></div>\n        </div>\n        <div class="content">\n          <div class="specials"></div>\n          <div class="results"></div>\n        </div>\n      </div>\n      ',"text/html").getElementById("main");if(!e)throw new Error("Cannot create main div.");return e}initEditView(e){const t=this.createMainDiv();this.mainDiv=t,init({container:t,domain:getDomain(),shopToken:api.token??"",serviceToken:api.token??"",tags:e})}connectedCallback(){super.connectedCallback(),location.hash="#sort-index"}render(){return x`${this.mainDiv}`}};__decorate$t([e$3({attribute:!1,type:Object})],WcGalleryPage.prototype,"mainDiv",void 0),WcGalleryPage=__decorate$t([e$4("wc-gallery-page")],WcGalleryPage);var WcShopIntegrationsPage_1,__decorate$s=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcShopIntegrationsPage=WcShopIntegrationsPage_1=class extends s$1{constructor(){super(),this.loadedIntegrations=[],this.selectedIntegration=null,this.errorMessage="",this.statusMessage="",this.displayProgressIcon=!1,this.displaySuccessIcon=!1,this.state="loadingIntegrations"}async connectedCallback(){super.connectedCallback();const e=this;setTimeout(async function(){await e.handleUrlSpecificActions(WcShopIntegrationsPage_1.getUrlParams())},0),location.hash="#shopintegrations"}static removeUrlParameters(e,t=null){const o=new URL(e);return null===t?o.search="":Array.isArray(t)?t.forEach(e=>{o.searchParams.delete(e)}):"string"==typeof t&&o.searchParams.delete(t),o.href}async handleUrlSpecificActions(e){if(PrintessShopIntegrationApi.canHandleUrlRequest(e)){let t=new ShopIntegrationStatusEvent("status-message","initIntegration",!1);t.progressIcon=!0,this.setStatusMessage(t);const o=await PrintessShopIntegrationApi.handleUrlRequest(e);o?!0===o.failed?this.setErrorMessage(o.errorMessage||""):o.finished&&(window.history.replaceState({},"",WcShopIntegrationsPage_1.removeUrlParameters(window.location.href)),console.log("Loading shop integrations"),await this.loadShopIntegrations(o.integration?.shopDomain||""),this.state="finished"):(await this.loadShopIntegrations(""),this.state="finished")}else await this.loadShopIntegrations(""),this.state="finished"}async loadShopIntegrations(e){let t=new ShopIntegrationStatusEvent("status-message","loading",!1);t.progressIcon=!0,this.setStatusMessage(t);try{const o=await PrintessShopIntegrationApi.getShopIntegrations({});this.loadedIntegrations=o.sort((e,t)=>(e.label||e.shopDomain).localeCompare(t.label||t.shopDomain)),e||(e=this.selectedIntegration?this.selectedIntegration?.shopDomain:"");let r=this.loadedIntegrations.length>0?this.loadedIntegrations[0]:null;if(e&&this.loadedIntegrations.length>0){const t=this.loadedIntegrations.find(t=>t.shopDomain===e);t&&(r=t)}r&&(this.selectedIntegration=r),0===this.loadedIntegrations.length?(this.setErrorMessage("nostorefront"),this.setStatusMessage("")):(t.message="loadingFinished",t.autoHide=!0,t.progressIcon=!1,t.successIcon=!0,this.setStatusMessage(t))}catch(e){this.setStatusMessage(""),this.setErrorMessage(ShopIntegrationStatusEvent.createErrorMessage("unableToLoadShopIntegrations",[e]))}}static get styles(){return[i$4`
            .form-container {
                display: flex;
                flex-flow: wrap;
                align-items: center;
                gap: 10px;
                border: 1px solid rgb(204, 204, 204);
                border-radius: 4px;
                padding: 20px;
            }

            label {
                font-size: 12px;
                font-weight: 400;
                color: #555555;
            }

            input,select {
                padding: 10px 20px;
                background-color: rgba(76, 156, 226, 0.1);
                border-radius: 4px;
                border: 1px solid #ccc;
                outline: none;
                margin: 10px 10px 0 0;
                font-size: 14px;
                font-weight: 400;
                font-family: var(--printess-text-font);
                height: 40px;
                width: 100%;
                color:  #555555;
            }
            .error-message {
                border: 1px solid red;
                padding: 20px;
                margin-bottom: 20px;
                background: #fcc3c3;
                height: 40px;
            }

            .icon {
                width: 20px;
                height: 15px;
                margin-right: 15px;
                display: inline-block !important;
            }

            .option-button {
                display: flex;
                align-items: center;
                padding: 10px 20px;
                justify-content: center;
                background: var(--printess-blue);
                color: white;
                border-radius: 4px;
                margin-right: 10px;
                margin-top: 23px;
                cursor: pointer;
            }

            .option-button.delete {
              background: var(--printess-red);
            }

            .status-message {
              display: flex;
              align-items: center;
              background: ${ShopCss.convertColor("LightBlue")};
              height: 32px;
              padding: 10px;
              margin-top: 20px;
              margin-bottom: 20px;
            }

            .status-message > wc-icon {
              width: 16px;
              height: 16px;
              margin-right: 10px;
            }
        `]}setStatusMessage(e,t=null){const o=this;e&&"string"!=typeof e?(this.displaySuccessIcon=!0===e.successIcon,this.displayProgressIcon=!0===e.progressIcon,e.autoHide&&setTimeout(()=>{o.statusMessage===(WcShopIntegrationsPage_1.messages[e]||e)&&(o.statusMessage="",o.displaySuccessIcon=!1,o.displayProgressIcon=!1)},WcShopIntegrationsPage_1.statusMessageTimeOut),e.params&&(t=e.params),e=e.message):(this.displaySuccessIcon=!1,this.displayProgressIcon=!1);let r=WcShopIntegrationsPage_1.messages[e]||e;if(t&&t.length>0)for(let e=0;e<t.length;++e)r=r.replace("{"+e.toString()+"}",t[e]);this.statusMessage=r}setErrorMessage(e,t=null){e&&"string"!=typeof e&&(e.params&&(t=e.params),e=e.message);let o=WcShopIntegrationsPage_1.messages[e]||e||"";if(t&&t.length>0)for(let e=0;e<t.length;++e)o=o.replace("{"+e.toString()+"}",t[e]);this.errorMessage=o}static getUrlParams(){const e=new URLSearchParams(window.location.search),t={};return e.forEach((e,o)=>{t[o]=e}),t}renderShopSpecificUi(){return this.selectedIntegration?"Shopify"===this.selectedIntegration.shopSystem?x`
            <wc-shop-ui
              @status-message=${this.setStatusMessage}
              .shopIntegration=${this.selectedIntegration}
              @status-message=${this.setStatusMessage}
              @error-message=${this.setErrorMessage}
            ></wc-shop-ui>`:x`<h3>${this.selectedIntegration.shopSystem} is not supported yet.</h3>`:x`&nbsp;`}async deleteShopIntegration(e){if(!e||!confirm(`Do you really want to delete the shop integration ${e.label||e.shopDomain}?`))return;let t=new ShopIntegrationStatusEvent("status-message","deleteIntegration",!1);t.progressIcon=!0,this.setStatusMessage(t);try{await PrintessShopIntegrationApi.deleteShopIntegration(e.shopDomain);t=new ShopIntegrationStatusEvent("status-message","deletionSuccessfull",!1),t.progressIcon=!1,t.successIcon=!0,this.setStatusMessage(t),this.selectedIntegration=null,this.loadShopIntegrations("")}catch(e){this.setStatusMessage(""),this.setErrorMessage("integrationDeletionFailed",[e])}}selectShopIntegration(e){const t=this.renderRoot.querySelector("wc-shop-ui");if(t)if(t.shopifyConfigHasChanges())if(confirm("You have unsaved changes in this Shopify Configuration, which will be lost by switching stores. Are you sure?"))this.selectedIntegration=this.loadedIntegrations.find(t=>(t.label||t.shopDomain)===e)||null;else{this.renderRoot.querySelectorAll("option").forEach(e=>{e.selected&&(e.selected=!1),e.value!==this.selectedIntegration?.label&&e.value!==this.selectedIntegration?.shopDomain||(e.selected=!0)})}else this.selectedIntegration=this.loadedIntegrations.find(t=>(t.label||t.shopDomain)===e)||null}render(){const e={};return x`

            <wc-topic-header title="Shop Integrations"></wc-topic-header>
            <div class="container">
                ${this.errorMessage?x`<div class="error-message"><wc-icon icon="warning" primaryColor="warning" class="icon"></wc-icon><span>${this.errorMessage}</span></div>`:""}
                <div class="form-container">
                    <div class="option">
                        <label for="shopintegration">Shop integration:</label>
                        <select name="shopintegration" class="integrations" @change=${e=>this.selectShopIntegration(e.target.value)}>
                            ${this.loadedIntegrations.filter(t=>!e[t.shopSystem]&&(e[t.shopSystem]=!0,!0)).map(e=>x`<option ?selected=${this.selectedIntegration&&(this.selectedIntegration.label||this.selectedIntegration.shopDomain)===(e.label||e.shopDomain)}>${e.shopSystem}</option>`)}
                        </select>
                    </div>
                    <div class="option">
                        <label for="shop">Store:</label>
                        <select class="shop" @change=${e=>this.selectShopIntegration(e.target.value)}>
                            ${this.loadedIntegrations.map(e=>x`<option value=${e.label||e.shopDomain} ?selected=${this.selectedIntegration&&(this.selectedIntegration.label||this.selectedIntegration.shopDomain)===(e.label||e.shopDomain)}>${e.label||e.shopDomain}</option>`)}
                        </select>
                    </div>

                    ${null!=this.selectedIntegration?x`<div class="option-button delete" style="margin-left: auto" @click=${e=>{this.deleteShopIntegration(this.selectedIntegration)}}>
                            Delete
                    </div>`:""}
                </div>

                ${this.statusMessage?x`<div class="status-message">${this.displaySuccessIcon?x`<wc-icon icon="check-solid" primaryColor="green" />`:""}${this.displayProgressIcon?x`<wc-icon icon="sync-alt" primaryColor="lightgreen" />`:""}<span>${this.statusMessage}</span></div>`:""}

                <div class="page-content">
                  ${"finished"===this.state?x`${this.renderShopSpecificUi()}`:""}
                </div>
            </div>
        `}};WcShopIntegrationsPage.messages={nostorefront:"No store fronts configured.",noselectedstorefront:"No storefront selected",unknownshoptype:"Unknown shop type: {0}",installShopify:"Installing shopify integration.",unableToLoadShopIntegrations:"Error while trying to load list of shop integrations: {0}",savingFailed:"Saving failed: {0}",integrationDeletionFailed:"Deletion of shop integration failed: {0}",enableCartTransformeFailed:"Cart transform activation failed: {0}",loadingIntegrations:"Loading list of shop integrations.",initIntegration:"Initializing shop integration",finished:"Preperations done",savingChanges:"Saving changes",savingSuccessful:"Successfully saved changes.",deleteIntegration:"Deleting shop integration integration",deletionSuccessfull:"Shop integration deleted successfully.",cartTransfomrEnabled:"Cart transform enabled successfully",enablingCartTransform:"Trying to enable cart transform",loadingIntegrationSettings:"Loading shop integration settings"},WcShopIntegrationsPage.statusMessageTimeOut=4e3,__decorate$s([e$3({attribute:!1,type:Array})],WcShopIntegrationsPage.prototype,"loadedIntegrations",void 0),__decorate$s([e$3({attribute:!1,type:Object})],WcShopIntegrationsPage.prototype,"selectedIntegration",void 0),__decorate$s([e$3({attribute:!1,type:String})],WcShopIntegrationsPage.prototype,"errorMessage",void 0),__decorate$s([e$3({attribute:!1,type:String})],WcShopIntegrationsPage.prototype,"statusMessage",void 0),__decorate$s([e$3({attribute:!1,type:Boolean})],WcShopIntegrationsPage.prototype,"displayProgressIcon",void 0),__decorate$s([e$3({attribute:!1,type:Boolean})],WcShopIntegrationsPage.prototype,"displaySuccessIcon",void 0),__decorate$s([e$3({attribute:!1,type:String})],WcShopIntegrationsPage.prototype,"state",void 0),WcShopIntegrationsPage=WcShopIntegrationsPage_1=__decorate$s([e$4("wc-shopintegrations")],WcShopIntegrationsPage);const baseTooltipCss=i$4`
[role="tooltip"] {
  visibility: hidden;
  position: absolute;
  top: 2rem;
  left: 2rem;
  background: black;
  color: white;
  padding: 0.5rem;
  border-radius: 0.25rem;
  transition: visibility 0.5s;
}
[aria-describedby]:hover,
[aria-describedby]:focus {
  position: relative;
}
[aria-describedby]:hover + [role="tooltip"],
[aria-describedby]:focus + [role="tooltip"],
[role="tooltip"]:hover,
[role="tooltip"]:focus {
  visibility: visible;
}
`;var __decorate$r=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialog=class extends s$1{static get styles(){return[dialogStyles$1,baseStyles]}connectedCallback(){super.connectedCallback(),this.addEventListeners()}constructor(){super(),this.title="",this.debounceTimer=null,this.debounceDelay=300,this.backdrop=new WcBackdrop,this.handleKeyDown=this.handleKeyDown.bind(this),this.handleBackdropClick=this.handleBackdropClick.bind(this)}showDialog(){document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){this.removeEventListeners(),document.body.removeChild(this.backdrop),document.body.removeChild(this)}renderTitle(){return x`<slot name="title" class="modal-title">${this.title}</slot>`}renderContent(){return x`<slot name="content"></slot>`}renderAdditionalContent(){return x``}render(){return x`
      <div class="modal" @click=${this.handleBackdropClick}>

        <div class="modal-wrapper pink" @click=${e=>e.stopPropagation()}>
          <div class="modal-header">
            ${this.renderTitle()}
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>
          <div class="modal-content">
            ${this.renderContent()}
            ${this.renderAdditionalContent()}
          </div>
        </div>
      </div>
    `}handleKeyDown(e){"Escape"===e.key&&this.closeDialog()}handleBackdropClick(e){this.closeDialog()}addEventListeners(){document.addEventListener("keydown",this.handleKeyDown)}removeEventListeners(){document.removeEventListener("keydown",this.handleKeyDown)}};__decorate$r([e$3({type:String})],WcDialog.prototype,"title",void 0),WcDialog=__decorate$r([e$4("wc-dialog")],WcDialog);var __decorate$q=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogWithOneParamAndCallback=class extends WcDialog{constructor(e,t){super(),this.edited=!1,this.title=e||"Do something",this.callback=t}connectedCallback(){super.connectedCallback()}submitDialog(){this.value&&(this.callback?this.callback(this.value):console.log(`Got value: ${this.value}.`),super.closeDialog())}showDialog(e){super.showDialog(),this.callback=e}setValueDebounced(e){this.edited=!0}renderContent(){return x`
    <div class="input-grid">
      <input type="text" id="valueInput" name="keyword" placeholder="Enter a value ..." required
      @change=${this.setValueDebounced}
      >
      <button @click=${this.submitDialog} class="submit">Submit ${this.value}</button>
    </div>`}};__decorate$q([e$3({type:Object})],WcDialogWithOneParamAndCallback.prototype,"value",void 0),__decorate$q([e$3({type:Function})],WcDialogWithOneParamAndCallback.prototype,"callback",void 0),WcDialogWithOneParamAndCallback=__decorate$q([e$4("wc-dialog-with-one-param-and-callback")],WcDialogWithOneParamAndCallback);var __decorate$p=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogImageAiFilter=class extends WcDialogWithOneParamAndCallback{static get styles(){return[dialogStyles$1,i$4`
      .modal-content {
        max-height: 80vh;
        overflow: auto;
      }

      .input-grid {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .form-field {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
      }

      .form-field label {
        margin-bottom: 5px;
        font-weight: 500;
      }

      .form-field input,
      .form-field select,
      .form-field textarea {
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        margin-top: 0px;
      }

      .form-field textarea {
        resize: vertical;
        min-height: 100px;
      }

      .form-field:has(input[type="checkbox"]) {
        flex-direction: row;
        align-items: center;
        gap: 10px;
      }
      .form-field:has(input[type="checkbox"]) label {
        margin-bottom: 0px;
      }
      .form-field input[type="checkbox"] {
        width: auto;
      }

      .input-error {
        color: red;
      }

      .image-upload-section {
        margin-top: 10px;
      }

      .preview-container {
        margin-top: 10px;
        border: 1px dashed #ccc;
        border-radius: 4px;
        padding: 10px;
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .preview-container.has-image {
        border-style: solid;
        border-color: #ddd;
      }

      .preview-container.uploading {
        background-color: #f9f9f9;
      }

      .preview-image {
        max-width: 100%;
        max-height: 200px;
        display: block;
      }

      .clear-image-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: #ff4444;
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .preview-placeholder {
        color: #999;
        text-align: center;
      }

      .upload-status {
        color: #666;
        font-style: italic;
      }

      button.submit {
        margin-top: 20px;
      }

      @media (max-width: 768px) {
        .form-field {
          margin-bottom: 15px;
        }

        .preview-image {
          max-height: 150px;
        }
      }

      .inactive {
        display: none;
      }
    `]}constructor(e,t,o,r){super(),this.dialogMode="create",this.isUploading=!1,this.showErrors=!1,this.dialogMode=r??(o?"edit":"create"),this.title="create"===this.dialogMode?"Add AI Image Effect":"Edit AI Image Effect",this.value=o||new ImageAiFilter(generateDBID(),"","IMAGE-EDIT","Nano Banana"),this.imageAiFilterCategoryId=e,this.context=t}setValueDebounced(e){super.setValueDebounced(e);const t=e.target,o=t.name;"label"===o?this.value.label=t.value:"type"===o?this.value.type=t.value:"model"===o?this.value.model=t.value:"gptQuality"===o?this.value.gptQuality=t.value:"isUserPrompt"===o?this.value.isUserPrompt=t.checked:"promptPrefix"===o?this.value.promptPrefix=t.value:"prompt"===o&&(this.value.prompt=t.value),this.requestUpdate()}async handleImageUpload(e){const t=e.target,o=t.files?.[0];if(!o)return;if(!o.type.startsWith("image/"))return void alert("Please select a valid image file");if(o.size>5242880)return void alert("Image size must be less than 5MB");const r=new FileReader;r.onload=e=>{this.previewUrl=e.target?.result,this.requestUpdate()},r.readAsDataURL(o),this.isUploading=!0,this.requestUpdate();try{if(!this.context)throw new Error("Context not provided");const e=await this.context.uploadThumbnail(this.imageAiFilterCategoryId,"",{target:t});e?(this.value.thumbnailUrl=e,this.previewUrl=e):(alert("Failed to upload image"),this.previewUrl="")}catch(e){console.error("Upload failed:",e),alert("Failed to upload image"),this.previewUrl=""}finally{this.isUploading=!1,this.requestUpdate()}}clearImage(){this.value.thumbnailUrl="",this.previewUrl="";const e=this.shadowRoot?.querySelector("#imageUpload");e&&(e.value=""),this.requestUpdate()}async cloneImageAiFilter(){const e={...this.value,id:generateDBID(),label:this.value.label+" copy"};this.dispatchEvent(new CustomEvent("image-ai-filter-categories",{detail:{type:"clone-filter",imageAiFilterBlob:e,openNewModalWithDelay:!0},bubbles:!0,composed:!0})),this.closeDialog()}async deleteImageAiFilter(){this.dispatchEvent(new CustomEvent("image-ai-filter-categories",{detail:{type:"delete-filter",imageAiFilterBlob:this.value?.id},bubbles:!0,composed:!0})),this.closeDialog()}get isLabelValid(){return""!==this.value.label.trim()}get isPromptValid(){return this.value.isUserPrompt||""!==this.value.prompt.trim()}get isModelValid(){return"GPT ImageEdit"!==this.value.model||!!this.value.gptQuality}trySaveFilter(){this.isLabelValid&&this.isPromptValid&&this.isModelValid?super.submitDialog():(this.showErrors=!0,this.requestUpdate())}renderContent(){return x`
      <div class="input-grid">
        ${this.showErrors&&!this.isLabelValid?x`
          <div class="input-error">Please enter a label for the effect.</div>
        `:""}

        <div class="form-field">
          <label for="labelInput">Name</label>
          <input type="text" id="labelInput" name="label" placeholder="Enter a name ..." .value=${this.value.label} required @input=${this.setValueDebounced}>
        </div>

        <div class="form-field">
          <label for="typeSelect">Type</label>
          <select id="typeSelect" name="type" .value=${this.value.type} required @change=${this.setValueDebounced}>
            <option value="" disabled>Select type</option>
            ${imageAiFilterType.map(e=>x`<option value="${e}" ?selected=${e===this.value.type}>${e}</option>`)}
          </select>
        </div>

        ${this.showErrors&&!this.isModelValid?x`
          <div class="input-error">Please select a model and quality if required.</div>
        `:""}

        <div class="form-field">
          <label for="modelSelect">Model</label>
          <select id="modelSelect" name="model" .value=${this.value.model} required @change=${this.setValueDebounced}>
            ${imageAiFilterModel.map(e=>x`<option value="${e}" ?selected=${e===this.value.model}>${e}</option>`)}
          </select>
        </div>

        ${"GPT ImageEdit"===this.value.model?x`
          <div class="form-field ${"GPT ImageEdit"!==this.value.model?"inactive":""}">
            <label for="modelSelect">Quality</label>
            <select id="modelSelect" name="gptQuality" .value=${this.value.gptQuality??"low"} required @change=${this.setValueDebounced}>
              <option value="" disabled>Select Quality</option>
              ${imageAiGptImageEditQuality.map(e=>x`<option value="${e}" ?selected=${e===this.value.gptQuality}>${e}</option>`)}
            </select>
          </div>
        `:""}

        ${this.showErrors&&!this.isPromptValid?x`
          <div class="input-error">Please either enter a predefined prompt or allow users to enter their own prompts.</div>
        `:""}

        <div class="form-field">
          <label for="promptInput">Ask user for prompt</label>
          <input type="checkbox" name="isUserPrompt" .checked=${this.value.isUserPrompt} @input=${this.setValueDebounced}>
        </div>

        ${this.value.isUserPrompt?x`
          <div class="form-field">
            <label for="promptInput">Prompt Prefix</label>
            <textarea id="promptInput" name="promptPrefix" placeholder="Enter prompt prefix ..." rows="4" .value=${this.value.promptPrefix??""} required @input=${this.setValueDebounced}></textarea>
          </div>`:""}

        <div class="form-field">
          <label for="promptInput">${"Prompt"+(this.value.isUserPrompt?" Placeholder":"")}</label>
          <textarea id="promptInput" name="prompt" placeholder="Enter prompt ..." rows="4" .value=${this.value.prompt} required @input=${this.setValueDebounced}></textarea>
        </div>

        <div class="form-field image-upload-section">
          <label for="imageUpload">Thumbnail Image</label>
          <input id="imageUpload" type="file" accept="image/*" name="thumbnail"
           @change=${this.handleImageUpload}
           ?disabled=${this.isUploading}
          >

          <div class="preview-container ${this.previewUrl||this.value.thumbnailUrl?"has-image":""} ${this.isUploading?"uploading":""}">
            ${this.isUploading?x`<div class="upload-status">Uploading...</div>`:this.previewUrl||this.value.thumbnailUrl?x`
            <img src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Bthis.previewUrl%7C%7Cthis.value.thumbnailUrl%7D" alt="Preview" class="preview-image">
            <button class="clear-image-btn" @click=${this.clearImage} type="button" ?disabled=${this.isUploading}>X</button>
          `:x`<div class="preview-placeholder">No image selected<br>Preview will appear here</div>`}
          </div>
        </div>

        <div style="display: grid; gap: 10px;  grid-auto-flow: column; grid-auto-columns: 1fr;">
          <button @click=${this.trySaveFilter} class="submit" ?disabled=${this.isUploading}>
            ${this.isUploading?"Uploading...":"Save"}
          </button>
          <button class="submit gray" @click=${this.closeDialog} type="button" ?disabled=${this.isUploading}>
            Cancel
          </button>
          ${"edit"===this.dialogMode?x`
            <button @click=${this.cloneImageAiFilter} class="submit gray" ?disabled=${this.isUploading}>
              Clone
            </button>
            <button @click=${this.deleteImageAiFilter} class="submit gray" ?disabled=${this.isUploading}>
              Delete
            </button>
          `:""}
        </div>

      </div>`}};WcDialogImageAiFilter=__decorate$p([e$4("wc-dialog-image-ai-filter")],WcDialogImageAiFilter);const imageAiFilterCss=i$4`
* {
  color: #555555;
}

.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.menu-name-input {
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--printess-text-font);
  height: 41px;
  width: 100%;
  color: #555555;
  border: 1px solid #ccc;
  background: rgba(208, 4, 155, 0.04);
  flex: 1 1 300px;
  min-width: 250px;
}

@media (max-width: ${config.mobileDeviceWidth}px) {          
  .menu-name-input {
    font-size: 12px;
    padding: 7px 15px;
    height: unset;
  }
}

select {
  margin-left: 10px;
  padding: 4px 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--printess-text-font);
  background-color: var(--printess-lightblue);
}

.card {
  background: transparent;
  margin-bottom: 0px;
  border-bottom: 2px solid var(--printess-blue);
}

.table-header {
  background-color: var(--printess-blue);
}

.table-header div {
  color: white;
}

.table-body {
  display: flex;
  padding: 0px;
  min-height: 50vh;
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.category-list {
  height: auto;
  background: var(--printess-lightblue);
  /*border-top: 1px solid var(--printess-lightblue);*/
}

.category-selector {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  font-size: 14px;
  min-width: 100px;
  background: var(--printess-lightblue);
  border-bottom: 1px solid #c6d4e7;
  cursor: pointer;
  white-space: nowrap;
}

.category-selector.selected {
  border-bottom: none;
  color: white;
  background-color: var(--printess-blue);
}

.category-selector .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 16px;
  padding: 2px 4px;
  margin-left: 10px;
  border-radius: 6px;
  background: var(--printess-blue);
  color: var(--printess-lightblue);
}

.category-selector.selected .badge {
  background: var(--printess-lightblue);
  color: var(--printess-blue);
}

.content {
  width: 100%;
}

wc-icon {
  min-width: 30px;
  width: 30px;
  min-height: 30px;
  height: 30px;
}

.menu-icon {
  min-width: 20px;
  min-height: 25px;
  width: 20px;
  height: 25px;
  padding: 0;
  margin-right: 20px;
  cursor: pointer;
}

.settings {
  background-color: var(--printess-blue);
}

.settings:hover {
  background-color: var(--printess-blueHover);
}

.inline .settings.pink {
  margin: 0px;
  padding: 10px 20px;
}

.settings.pink {
  background-color: var(--printess-pink);
}

.settings.pink:hover {
  background-color: var(--printess-pinkHover);
}

.button-wrapper {
  display: flex;
  justify-content: space-around;
  margin: 10px 0 70px 0;
}

.button-wrapper .settings {
  margin: 0px 10px 0px 0px;
}

.button-wrapper .red {
  background-color: var(--printess-red);
}

.button-wrapper .red:hover {
  background-color: var(--printess-redHover);
}

.button-box {
  display: flex;
}

input[type="file"] {
  display: none;
}

.image-upload-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.grid-container {
  flex: 1;
  overflow: auto;
  position: relative;
  background: var(--printess-white);
  border-radius: 8px;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-size, 280px), 1fr));
  gap: calc(16px * var(--zoom-factor, 1));
  padding: calc(16px * var(--zoom-factor, 1));
  transition: all 0.3s ease;
}

.model-card {
  background: white;
  border: 1px solid var(--printess-gallery-text);
  border-radius: 8px;
  padding: calc(16px * var(--zoom-factor, 1));
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--zoom-factor, 1));
  font-size: calc(14px * var(--zoom-factor, 1));
}

.model-card:hover {
  border-color: var(--printess-green);
  transform: translateY(-1px);
  box-shadow: 0 1px 3px var(--printess-gallery-text);
}

.model-card-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.model-card-header img {
  width: 100%;
}

.model-card-label {
  font-size: calc(16px * var(--zoom-factor, 1));
  color: var(--printess-grey);
  word-break: break-word;
  flex: 1;
}

.model-card-id {
  font-size: calc(10px * var(--zoom-factor, 1));
  color: var(--printess-grey);
  background: var(--printess-white);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.model-card-section {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--zoom-factor, 1));
}

.model-card-section-title {
  font-size: calc(11px * var(--zoom-factor, 1));
  color: var(--printess-grey);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.model-card-section-content {
  color: var(--printess-gallery-text);
  word-break: break-word;
  max-height: calc(6em * var(--zoom-factor, 1)); /* 4 Zeilen bei 1.5em line-height */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.model-card-type {
  display: inline-block;
  background: var(--printess-white);
  color: var(--printess-blue);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: calc(12px * var(--zoom-factor, 1));
}

.model-card-model {
  display: inline-block;
  background: var(--printess-white);
  color: var(--printess-pink);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: calc(12px * var(--zoom-factor, 1));
}

.model-card-prompt {
  background: var(--printess-white);
  padding: calc(8px * var(--zoom-factor, 1));
  border-radius: 4px;
  border-left: 3px solid var(--printess-green);
  color: var(--printess-grey);
  line-height: 1.5;
  font-size: calc(13px * var(--zoom-factor, 1));
  white-space: pre-wrap;
  word-break: break-word;
  max-height: calc(6em * var(--zoom-factor, 1)); /* 4 Zeilen bei 1.5em line-height */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.model-card-prompt.user {
  border-left: 0px;
  font-style: italic;
}

.model-card-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(12px * var(--zoom-factor, 1));
  color: var(--printess-grey);
}

.model-card-group-badge {
  background: var(--printess-white);
  color: var(--printess-red);
  padding: 2px 8px;
  border-radius: 3px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--printess-grey);
  font-size: calc(16px * var(--zoom-factor, 1));
}

.model-card-type-tag {
  text-transform: lowercase;
  color: white;
  padding: 0.125rem 0.25rem;
  background-color: var(--printess-blue);
  border-radius: 2px;
}
`;var __decorate$o=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcImageAiFilterCategoriesPage=class extends s$1{static get styles(){return[baseTooltipCss,settingsStyles,imageAiFilterCss]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}constructor(){super(),this.context={uploadThumbnail:this.uploadThumbnail.bind(this),showError:this.showError.bind(this),reload:this.reload.bind(this)},this.selectedGroupId="",this.isUploading=!1}connectedCallback(){super.connectedCallback(),this.loadImageAiFilterCategories(),location.hash="#image-ai-effects"}async reload(e){await sleep(500),await this.loadImageAiFilterCategories(e),this.requestUpdate()}async loadImageAiFilterCategories(e){const t=await api.loadImageAiFilterCategories();this.imageAiFilterCategories=[];for(const e of t)this.imageAiFilterCategories.push({...e,filters:e.filters.filter(e=>e.id)});this.selectedCategory=e?this.imageAiFilterCategories.filter(t=>t.id===e)[0]:this.imageAiFilterCategories[0],this.selectedCategory&&this.loadImageAiFilterCategory(this.selectedCategory.id)}async addImageAiFilterCategory(){const e=this.shadowRoot?.getElementById("imageAiFilterCategoryCtrl"),t=e.value;if(t){const o=await api.addImageAiFilterCategory(t);!o||o instanceof ServerErrorResponse$2||(await this.reload(),await this.loadImageAiFilterCategories(o.id),e.value="")}}loadImageAiFilterCategory(e){if(this.imageAiFilterCategories){const t=this.imageAiFilterCategories.find(t=>t.id===e);if(t){if(this.selectedCategory=t,this.selectedCategory.filters instanceof Array){const t=this.selectedCategory.filters.find(t=>t.id===e);this.imageAiFilter=t||void 0,this.requestUpdate()}}else this.showError({message:"Category not found.",code:404});this.isUploading=!1}}async uploadThumbnail(e,t,o){let r;if(o.target.files&&o.target.files.length>0){this.isUploading=!0;const i=api.uploadAiFilterThumbnail(o.target.files[0],e,t);try{r=await i}finally{this.isUploading=!1}}return r}async openImageAiFilterDialog(e,t,o,r){const i=new WcDialogImageAiFilter(e,t,o,r);i.addEventListener("image-ai-filter-categories",e=>{this.handleEvents(e)}),i.showDialog(async o=>{const r=await api.addOrUpdateImageAiFilterToCategory(e,o);r instanceof ServerErrorResponse$2?t.showError(r):r||console.error("Can't create/edit:",o),await t.reload(e)})}async createExampleAiFilter(e,t,o){const r=await api.addOrUpdateImageAiFilterToCategory(e,o);r instanceof ServerErrorResponse$2?t.showError(r):r||console.error("Can't create:",o),await t.reload(e)}async deleteImageAiFilterCategory(e,t){new WcDialogConfirmRemoval(t,"Image AI Filter Category").showDialog(async t=>{if("sure"!==t)return;const o=await api.deleteImageAiFilterCategory(e);o instanceof ServerErrorResponse$2?this.showError(o):await this.reload()})}async copyEverythingToOtherAccount(){alert("not implemented")}renderImageAiFilterCategory(e,t){if(!this.imageAiFilterCategories)return x``;const o=this.imageAiFilterCategories.find(t=>t.id===e);if(o){const t=o.filters||[];return x`
        <div class="grid-container">
          <div class="model-grid" style="--card-size: 250px; --zoom-factor: 1">
            ${t.length>0?c(t,e=>e.id,t=>this.renderModelCard(e,t)):""}
          </div>
        </div>
      `}return x``}renderModelCard(e,t){return x`
      <div
        class="model-card"
        @click=${()=>this.openImageAiFilterDialog(e,this.context,t)}
      >
        <div class="model-card-header">
          <div class="model-card-label">${t.label}</div>
          <div>
            <img src="proxy.php?url=https%3A%2F%2Faccount.printess.com%2F%24%7Bt.thumbnailUrl%7D">
          </div>
          <div class="model-card-type-tag">${t.type}</div>
        </div>

        <div class="model-card-section">
          <div class="model-card-section-title">Model</div>
          <div class="model-card-model">
            ${t.model}&nbsp${"GPT ImageEdit"===t.model?`(${t.gptQuality})`:""}
          </div>
        </div>

        ${t.prompt||t.isUserPrompt?x`
        <div class="model-card-section">
          <div class="model-card-section-title">Prompt</div>
          ${t.isUserPrompt?x`<div class="model-card-prompt">${(t.promptPrefix?t.promptPrefix+" + ":"")+"<user prompt>"}</div>`:x`<div class="model-card-prompt">${t.prompt}</div>`}
        </div>
        `:""}
      </div>
    `}async selectImageAiFilterCategory(e){this.selectedCategory=e}enterCategory(e){"Enter"===e.key&&(e.preventDefault(),this.addImageAiFilterCategory())}userClick(e,t){showCtxMenu(e,[{caption:"Delete Category",callback:()=>this.deleteImageAiFilterCategory(t.id,t.label)}])}addFilterClick(e,t){showCtxMenu(e,[{caption:"Add new filter",callback:()=>this.openImageAiFilterDialog(t.id,this.context)},{caption:"B/W Comic (GPT ImageEdit example)",callback:()=>this.createExampleAiFilter(t.id,this.context,{id:"EXAMPLEFILTER1",label:"B/W Comic",type:"IMAGE-EDIT",model:"GPT ImageEdit",gptQuality:"medium",isUserPrompt:!1,prompt:"Make a b/w comic version of the photo",thumbnailUrl:"https://editor.printess.com/printess-editor/img/bcui/gpt-comic-bw-1.jpeg"})},{caption:"Hergé Cartoon (GPT ImageEdit example)",callback:()=>this.createExampleAiFilter(t.id,this.context,{id:"EXAMPLEFILTER2",label:"Hergé Cartoon",type:"IMAGE-EDIT",model:"GPT ImageEdit",gptQuality:"medium",isUserPrompt:!1,prompt:"Create a hergé like cartoon version of the photo",thumbnailUrl:"https://editor.printess.com/printess-editor/img/bcui/gpt-herge.jpg"})},{caption:"Disney Cartoon (GPT ImageEdit example)",callback:()=>this.createExampleAiFilter(t.id,this.context,{id:"EXAMPLEFILTER3",label:"Disney Cartoon",type:"IMAGE-EDIT",model:"GPT ImageEdit",gptQuality:"medium",isUserPrompt:!1,prompt:"Create a disney like cartoon version of the photo",thumbnailUrl:"https://editor.printess.com/printess-editor/img/bcui/gpt-disney.jpg"})},{caption:"Clownify (Nano Banana example)",callback:()=>this.createExampleAiFilter(t.id,this.context,{id:"EXAMPLEFILTER4",label:"Clownify",type:"IMAGE-EDIT",model:"Nano Banana",gptQuality:"medium",isUserPrompt:!1,prompt:"Add a clown hat and nose",thumbnailUrl:"https://printess-prod.s3.eu-central-1.amazonaws.com/uploads/fc8b773be98ee6d58ffebd9d955a55252ddc9a0a/images/b7f41b428697e4a13db42c441db74880346d81db.jpeg"})}],void 0,void 0,300)}async handleEvents(e){const t=e.detail.type;if(this.selectedCategory&&t){const o=e.detail.imageAiFilterBlob;if("delete-filter"===t){const e=o;if(e){const t=await api.deleteImageAiFilterFromCategory(this.selectedCategory.id,e);!t||t instanceof ServerErrorResponse$2?alert(`Couldn't remove imageAiFilter (${e}) try again later.`):this.selectedCategory.filters=this.selectedCategory.filters.filter(e=>!(e.id===t.id)),this.requestUpdate()}}else if("clone-filter"===t){const t=o;if(t){e.detail.openNewModalWithDelay?(await sleep(250),await this.openImageAiFilterDialog(this.selectedCategory.id,this.context,t,"clone")):await this.openImageAiFilterDialog(this.selectedCategory.id,this.context,t,"clone")}}else console.log("ERROR: Unhandled event: ",{selectedCategory:!!this.selectedCategory,event:e})}else console.log("ERROR: handleEvents: Event is not processable: ",{selectedCategory:!!this.selectedCategory,event:e})}async requestReInit(){await this.loadImageAiFilterCategories()}render(){if(!this.imageAiFilterCategories)return x``;const e=this.selectedCategory;return x`
      ${this.isUploading?x` <div style="position:absolute; width: 100vw; height: 100vh; background-color: rgba(20, 20, 20, 0.2);">Uploading</div>`:x``}

      <h3 class="topic">AI Image Effects</h3>
      <p style="font-size: 14px;">
        Here you can create an manage your AI Image Effect Categories and Effects
      </p>

      <div class="inline" style="margin-top: 10px;">
        <input
          id="imageAiFilterCategoryCtrl" type="text" name="addKeywordMenu"
          placeholder="Enter new AI Image Effect category ..."
          class="menu-name-input"
          @keypress=${e=>this.enterCategory(e)}
        >
        <wc-button caption="Add Category" color="pink" size="lg" @click=${this.addImageAiFilterCategory}></wc-button>
        ${adm.canUseAdminMode?x`<wc-button caption="Flush Categories" color="pink" size="lg" @click=${this.requestReInit}></wc-button>`:""}
      </div>
      <div>
        ${e&&this.imageAiFilterCategories.length>0?x`
          <div class="card">
            <div class="table-header">
              <div class="title">
                Your Custom AI Image Effects
                <div class="button-box">
                  <wc-icon id="AddNewImageAiFilter" icon="plus" primarycolor="head-toolbar" class="menu-icon" @mousedown=${t=>this.addFilterClick(t,e)}></wc-icon>
                  <div role="tooltip" id="AddNewImageAiFilter">Add new AI Image Effect</div>
                  <wc-icon icon="ellipsis-v" primarycolor="head-toolbar" class="menu-icon" @mousedown=${t=>this.userClick(t,e)}></wc-icon>
                </div>
              </div>
            </div>
            <div class="table-body">
              <div class="category-list">
                ${c(this.imageAiFilterCategories,e=>e.id,t=>x`
                  <div class="category-selector ${t.id===e.id?"selected":""}" @click=${()=>this.selectImageAiFilterCategory(t)}>
                    ${t.label}
                    <div class="badge">${t.filters.length}</div>
                  </div>
                `)}
              </div>
              <div class="content">
                ${e.filters&&e.filters.length>0?x`
                  ${this.renderImageAiFilterCategory(e.id,e.label)}
                `:x`
                <div class="image-upload-container">
                  <p style="font-size: 16px; margin-bottom: 5px;">
                    Click the button below to add an AI Image Effect to
                    <span style="font-weight: bold; color: var(--printess-blue)">${e.label}</span>.
                  </p>
                    <button class="settings" styles="margin-bottom: 5px;" @click=${t=>this.addFilterClick(t,e)}>
                    Add AI Image Effect
                    </button>
                </div>
                `}
              </div>
            </div>
          </div>
          <!-- <div class="button-wrapper">
            ${adm.canUseAdminMode?x`<button class="settings" @click=${this.copyEverythingToOtherAccount}>Copy Everything To Other Account</button>`:""}
          </div> -->
        `:x``}
      </div>
    `}};__decorate$o([e$3({type:Object})],WcImageAiFilterCategoriesPage.prototype,"selectedCategory",void 0),__decorate$o([e$3({type:String})],WcImageAiFilterCategoriesPage.prototype,"selectedGroupId",void 0),__decorate$o([e$3({type:Array})],WcImageAiFilterCategoriesPage.prototype,"imageAiFilterCategories",void 0),__decorate$o([e$3({type:Object})],WcImageAiFilterCategoriesPage.prototype,"imageAiFilter",void 0),__decorate$o([e$3({type:Boolean})],WcImageAiFilterCategoriesPage.prototype,"isUploading",void 0),WcImageAiFilterCategoriesPage=__decorate$o([e$4("wc-image-ai-filter-categories-page")],WcImageAiFilterCategoriesPage);var __decorate$n=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcLetterGeneratorJsonBuilderModal=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
        .modal-wrapper {
          min-width: 70vw;
        }
        .modal-header {
          padding: 0 20px;
        }

        .modal-content {
          padding-top: 0px;
          max-height: 60vh;
        }

        .modal-controls {
          display: flex;
          gap: 5px;
        }

        .properties-list {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 10px;
        }

        .property-item-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .input-group, .property-item {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        wc-input {
          margin-bottom: 5px;
        }

        .modal-footer {
          background: var(--printess-pink);
          padding: 10px 20px;
        }

        .button-wrapper {
          width: 100%;
          display: flex;
          gap: 10px;
          flex-direction: row-reverse;
        }

        .add-custom-field-container {
          margin-top: 10px;
          padding: 10px;
          border: 1px solid var(--printess-pink);
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .property-item,
        .option-item,
        .nested-property-item {
          border: 1px solid #eee;
          border-radius: 8px;
          margin: 0.5rem 0;
          padding-left: 0.5rem;
          background: #fafafa;
        }
        .property-header,
        .option-header,
        .nested-property-header {
          display: flex;
          align-items: center;
          cursor: pointer;
          font-weight: bold;
          padding: 0.5rem 0;
          width: 100%;
        }
        .property-body,
        .option-body,
        .nested-property-body {
          margin-top: 0.5rem;
          display: flex;
          flex-direction: column;
          padding-right: 0.5rem;
          padding-bottom: 0.5rem;
        }
        .nested-properties {
          margin-left: 1rem;
          border-left: 2px dashed #ddd;
          padding-left: 1rem;
          margin-top: 0.5rem;
        }
        .delete-btn {
          background: var(--printess-lightmagenta);
          padding: 0.5rem 0;
          border-top-right-radius: 8px;
          cursor: pointer;
        }
        .arrow-btn {
          background: #eee;
          align-items: center;
          justify-content: center;
          display: grid;
          grid-template-columns: repeat(3, auto);
          border-radius: 0px;
        }
        .arrow-btn > div {
          cursor: pointer;
        }
        .separator {
          background: #ccc;
          width: 1px;
          height: 80%;
        }
        wc-icon {
          width: 20px;
          height: 20px;
          margin: 5px 10px;
        }
  `]}constructor(){super(),this.title="",this.menuTitle="",this.placeholder="",this.prefix="",this.suffix="",this.promptTemplate="",this.customMainFields=[],this.customMainValues={},this.properties=[],this.openProperties=new Set,this.backdrop=new WcBackdrop}showDialog(e,t){this.callback=e,this.reset(),t&&this.load(t),document.body.appendChild(this.backdrop),document.body.appendChild(this)}serializeProperty(e){const{options:t,...o}=e,r={...o};return t&&(r.options=t.map(e=>{const{properties:t,...o}=e,r={...o};return t&&(r.properties=t.map(e=>this.serializeProperty(e))),r})),r}save(){const e={title:this.title,menuTitle:this.menuTitle,placeholder:this.placeholder,prefix:this.prefix,suffix:this.suffix,promptTemplate:this.promptTemplate,properties:this.properties.map(e=>this.serializeProperty(e))};for(const t of this.customMainFields)e[t.name]=this.customMainValues[t.name];this.callback?.(e.title||"Untitled",e),this.closeDialog()}deserializeProperty(e){const t={...e};return e.options&&Array.isArray(e.options)&&(t.options=e.options.map(e=>{const t={...e};return e.properties&&(t.properties=e.properties.map(e=>this.deserializeProperty(e))),t})),t}load(e){this.title=e.title??"",this.menuTitle=e.menuTitle??"",this.placeholder=e.placeholder??"",this.prefix=e.prefix??"",this.suffix=e.suffix??"",this.promptTemplate=e.promptTemplate??"",Object.entries(e).forEach(([e,t])=>{["title","menuTitle","placeholder","prefix","suffix","promptTemplate","properties"].includes(e)||(this.customMainFields.push({label:this.formatLabel(e),name:e,value:()=>String(t)}),this.customMainValues[e]=String(t))}),this.properties=(e.properties??[]).map(e=>this.deserializeProperty(e))}reset(){this.title="",this.menuTitle="",this.placeholder="",this.prefix="",this.suffix="",this.promptTemplate="",this.customMainFields=[],this.customMainValues={},this.properties=[],this.openProperties.clear()}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}toggleOpen(e){this.openProperties.has(e)?this.openProperties.delete(e):this.openProperties.add(e),this.requestUpdate()}updateProperty(e,t,o){this.properties[e]={...this.properties[e],[t]:o},this.requestUpdate()}updateOption(e,t,o,r){const i=this.properties[e];i.options&&(i.options[t]={...i.options[t],[o]:r},this.requestUpdate())}addProperty(){const e=this.properties.length;this.properties=[...this.properties,{name:"",label:"",type:"input"}],this.openProperties.add("prop-"+e)}addOption(e){const t=this.properties[e];t.options=[...t.options??[],{value:"",label:""}],this.requestUpdate()}addNestedProperty(e,t){const o=this.properties[e].options?.[t];o&&(o.properties=[...o.properties??[],{name:"",label:"",type:"input"}],this.requestUpdate())}updateNestedProperty(e,t,o,r,i){const a=this.properties[e].options?.[t];a?.properties&&(a.properties[o]={...a.properties[o],[r]:i},this.requestUpdate())}deleteProperty(e,t){e.stopPropagation(),this.properties=this.properties.filter((e,o)=>o!==t),this.requestUpdate()}deleteOption(e,t,o){e.stopPropagation();const r=this.properties[t];r.options=(r.options??[]).filter((e,t)=>t!==o),this.requestUpdate()}deleteNestedProperty(e,t,o,r){e.stopPropagation();const i=this.properties[t].options?.[o];i?.properties&&(i.properties=i.properties.filter((e,t)=>t!==r),this.requestUpdate())}moveProperty(e,t,o){e.stopPropagation(),this.properties=this.moveItem(this.properties,t,o),this.requestUpdate()}moveOption(e,t,o,r){e.stopPropagation();const i=this.properties[t];i.options&&(i.options=this.moveItem(i.options,o,r),this.requestUpdate())}moveNestedProperty(e,t,o,r,i){e.stopPropagation();const a=this.properties[t].options?.[o];a?.properties&&(a.properties=this.moveItem(a.properties,r,i),this.requestUpdate())}formatLabel(e){return e.replace(/([A-Z])/g," $1").replace(/^./,e=>e.toUpperCase())}moveItem(e,t,o){const r="up"===o?t-1:t+1;if(r<0||r>=e.length)return e;const i=[...e],[a]=i.splice(t,1);return i.splice(r,0,a),i}renderProperty(e,t,o=""){const r=`${o}prop-${t}`,i=this.openProperties.has(r);return x`
      <div class="property-item">
        <div style="display: flex; width: 100%">
          <div class="property-header" @click=${()=>this.toggleOpen(r)}>
            ${i?x`<wc-icon primarycolor="black" icon="carret-down-solid"></wc-icon>`:x`<wc-icon primarycolor="black" icon="carret-down-solid" style="transform: rotate(-90deg);"></wc-icon>`}
            <span>${e.label||e.name||"Property "+(t+1)}</span>
          </div>
          <div class="arrow-btn">
              ${t<this.properties.length-1?x`
                <div @click=${e=>this.moveProperty(e,t,"down")}>
                  <wc-icon primarycolor="magenta" icon="arrow-right-long" style="transform: rotate(90deg);"></wc-icon>
                </div>`:""}
              ${t<this.properties.length-1&&t>0?x`<div class="separator"></div>`:""}
              ${t>0?x`
                <div @click=${e=>this.moveProperty(e,t,"up")}>
                  <wc-icon primarycolor="magenta" icon="arrow-right-long" style="transform: rotate(-90deg);"></wc-icon>
                </div>
                  `:""}
            </div>
            <div class="delete-btn" style="${i?"":"border-bottom-right-radius: 8px"}" @click=${e=>this.deleteProperty(e,t)}>
              <wc-icon primarycolor="magenta" icon="trash"></wc-icon>
            </div>
        </div>
        ${i?x`
              <div class="property-body">
                <label>Name:</label>
                <wc-input .value=${e.name} .callback=${e=>this.updateProperty(t,"name",e)}></wc-input>

                <label>Label:</label>
                <wc-input .value=${e.label} .callback=${e=>this.updateProperty(t,"label",e)}></wc-input>

                <label>Type:</label>
                <wc-input type="select" .value=${e.options?.length?"select":e.type} .options=${["input","select","textarea"]}
                  .callback=${e=>this.updateProperty(t,"type",e)}></wc-input>

                <label>Placeholder:</label>
                <wc-input .value=${e.placeholder??""} .callback=${e=>this.updateProperty(t,"placeholder",e)}></wc-input>

                <label>Prompt:</label>
                <wc-input .value=${e.prompt??""} .callback=${e=>this.updateProperty(t,"prompt",e)}></wc-input>

                <!-- Custom keys -->
                ${Object.entries(e).filter(([e])=>!["name","label","type","placeholder","prompt","options"].includes(e)).map(([e,o])=>x`
                    <label>${this.formatLabel(e)}:</label>
                    <wc-input .value=${String(o)} .callback=${o=>this.updateProperty(t,e,o)}></wc-input>
                  `)}

                <!-- Options for select -->
                ${"select"===e.type?x`
                  <h4>Options</h4>
                  ${(e.options??[]).map((e,o)=>this.renderOption(e,t,o,r))}
                  <wc-button caption="+ Add Option" @click=${()=>this.addOption(t)}></wc-button>
                `:null}
              </div>
            `:null}
      </div>
    `}renderOption(e,t,o,r){const i=`${r}-opt-${o}`,a=this.openProperties.has(i);return x`
      <div class="option-item">
        <div style="display: flex; width: 100%">
        <div class="option-header" @click=${()=>this.toggleOpen(i)}>
          ${a?x`<wc-icon primarycolor="black" icon="carret-down-solid"></wc-icon>`:x`<wc-icon primarycolor="black" icon="carret-down-solid" style="transform: rotate(-90deg);"></wc-icon>`}
          <span>${e.label||e.value||"Option "+(o+1)}</span>
        </div>
        <div class="arrow-btn">
          ${o<(this.properties[t].options?.length??0)-1?x`
            <div @click=${e=>this.moveOption(e,t,o,"down")}>
              <wc-icon primarycolor="magenta" icon="arrow-right-long" style="transform: rotate(90deg); cursor: pointer;"></wc-icon>
            </div>`:""}
          ${o<(this.properties[t].options?.length??0)-1&&o>0?x`<div class="separator"></div>`:""}
          ${o>0?x`
            <div @click=${e=>this.moveOption(e,t,o,"up")}>
              <wc-icon primarycolor="magenta" icon="arrow-right-long" style="transform: rotate(-90deg); cursor: pointer;"></wc-icon>
            </div>`:""}
        </div>
        <div class="delete-btn" style="${a?"":"border-bottom-right-radius: 8px"}" @click=${e=>this.deleteOption(e,t,o)}>
          <wc-icon primarycolor="magenta" icon="trash"></wc-icon>
        </div>
      </div>
        ${a?x`
          <div class="option-body">
            <label>Label:</label>
            <wc-input .value=${e.label} .callback=${e=>this.updateOption(t,o,"label",e)}></wc-input>

            <label>Value:</label>
            <wc-input .value=${e.value} .callback=${e=>this.updateOption(t,o,"value",e)}></wc-input>

            <label>Prompt:</label>
            <wc-input .value=${e.prompt??""} .callback=${e=>this.updateOption(t,o,"prompt",e)}></wc-input>

            <!-- Nested properties -->
            <div class="nested-properties">
              <h5>Nested Properties</h5>
              ${(e.properties??[]).map((e,r)=>this.renderNestedProperty(e,t,o,r,i))}
              <wc-button caption="+ Add Nested Property" @click=${()=>this.addNestedProperty(t,o)}></wc-button>
            </div>
          </div>
        `:""}
      </div>
    `}renderNestedProperty(e,t,o,r,i){const a=`${i}-nested-${r}`,s=this.openProperties.has(a);return x`
      <div class="nested-property-item">
        <div style="display: flex; width: 100%">
          <div class="nested-property-header" @click=${()=>this.toggleOpen(a)}>
            ${s?x`<wc-icon primarycolor="black" icon="carret-down-solid"></wc-icon>`:x`<wc-icon primarycolor="black" icon="carret-down-solid" style="transform: rotate(-90deg);"></wc-icon>`}
            <span>${e.label||e.name||"Nested "+(r+1)}</span>
          </div>
          <div class="arrow-btn">
            ${r<(this.properties[t].options?.[o]?.properties?.length??0)-1?x`
              <div @click=${e=>this.moveNestedProperty(e,t,o,r,"down")}>
                <wc-icon primarycolor="magenta" icon="arrow-right-long" style="transform: rotate(90deg); cursor: pointer;" ></wc-icon>
              </div>`:""}
            ${r<(this.properties[t].options?.[o]?.properties?.length??0)-1&&r>0?x`<div class="separator"></div>`:""}
            ${r>0?x`
              <div @click=${e=>this.moveNestedProperty(e,t,o,r,"up")}>
                <wc-icon primarycolor="magenta" icon="arrow-right-long" style="transform: rotate(-90deg); cursor: pointer;"></wc-icon>
              </div> `:""}
          </div>
          <div class="delete-btn" style="${s?"border-bottom-left-radius: 8px":"border-bottom-right-radius: 8px"}" @click=${e=>this.deleteNestedProperty(e,t,o,r)}>
            <wc-icon primarycolor="magenta" icon="trash"></wc-icon>
          </div>
        </div>
      ${s?x`
            <div class="nested-property-body" style="display: flex; flex-direction: column;">
              <label>Name:</label>
              <wc-input
                .value=${e.name}
                .callback=${e=>this.updateNestedProperty(t,o,r,"name",e)}
              ></wc-input>

              <label>Label:</label>
              <wc-input
                .value=${e.label}
                .callback=${e=>this.updateNestedProperty(t,o,r,"label",e)}
              ></wc-input>

              <label>Type:</label>
              <wc-input
                type="select"
                .value=${e.type}
                .options=${["input","select","textarea"]}
                .callback=${e=>this.updateNestedProperty(t,o,r,"type",e)}
              ></wc-input>
            </div>
          `:null}
    </div>
  `}render(){return x`
    <div class="modal pink">
      <div class="modal-wrapper">
        <div class="modal-header">
          <span class="modal-title">Build JSON Structure</span>
          <div class="modal-controls">
            <wc-button caption="Clear All" color="light-pink" size="sm" @click=${this.reset}>Clear All</wc-button>
            <wc-button icon="close" color="light-pink" size="sm" @click=${()=>this.closeDialog()}></wc-button>
          </div>
        </div>

        <div class="modal-content">
          <div style="display: flex; flex-direction: column;">
            <h3>Main Settings</h3>
            <label>Title:</label>
            <wc-input .value=${this.title} .callback=${e=>this.title=e}></wc-input>

            <label>Menu Title:</label>
            <wc-input .value=${this.menuTitle} .callback=${e=>this.menuTitle=e}></wc-input>

            <label>Placeholder:</label>
            <wc-input .value=${this.placeholder} .callback=${e=>this.placeholder=e}></wc-input>

            <label>Prefix:</label>
            <wc-input .value=${this.prefix} .callback=${e=>this.prefix=e}></wc-input>

            <label>Suffix:</label>
            <wc-input .value=${this.suffix} .callback=${e=>this.suffix=e}></wc-input>

            <label>Prompt Template:</label>
            <wc-input type="textarea" .value=${this.promptTemplate} .callback=${e=>this.promptTemplate=e}></wc-input>

            ${this.customMainFields.map(e=>x`
              <label>${e.label}:</label>
              <wc-input .value=${this.customMainValues[e.name]??""} .callback=${t=>this.customMainValues[e.name]=t}></wc-input>
            `)}

            <h3>Properties</h3>
            ${this.properties.map((e,t)=>this.renderProperty(e,t))}
            <wc-button caption="+ Add Property" color="pink" @click=${this.addProperty}></wc-button>

          </div>
        </div>

        <div class="modal-footer">
          <div class="button-wrapper">
            <wc-button caption="Generate JSON & Save" color="light-pink" size="lg" @click=${this.save}></wc-button>
            <wc-button caption="Cancel" color="light-pink" size="lg" @click=${()=>this.closeDialog()}></wc-button>
          </div>
        </div>
      </div>
    </div>
    `}};__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"title",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"menuTitle",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"placeholder",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"prefix",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"suffix",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"promptTemplate",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"customMainFields",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"customMainValues",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"properties",void 0),__decorate$n([t$1()],WcLetterGeneratorJsonBuilderModal.prototype,"openProperties",void 0),WcLetterGeneratorJsonBuilderModal=__decorate$n([e$4("wc-letter-generator-json-builder-modal")],WcLetterGeneratorJsonBuilderModal);var __decorate$m=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcLetterGeneratorSettings=class extends s$1{constructor(){super(...arguments),this.saving=!1,this.deleting=!1,this.jsonEntries=[]}static get styles(){return[userProfileStyles,settingsStyles,i$4`
      .card {
        background: transparent;
        margin-bottom: 70px;
        border-bottom: 2px solid var(--printess-red);
      }

      .card.green {
        border-bottom-color: var(--printess-green);
      }

      p, ul {
        font-size: 14px;
      }

      .table-header {
        background: var(--printess-red);
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .table-body {
        display: flex;
        padding: 0px;
/*      height: 495px; */
      }

      .control {
        width: 100%;
        display: grid;
        grid-template-columns: 200px 1fr;
      }

      .menu {
        height: auto;
        background: var(--printess-lightred);
        border-top: 1px solid var(--printess-lightred);
      }

      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0px;
        width: 100%;
      }

      .menu-entry {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        font-size: 14px;
        border-bottom: 1px solid #f0b6ce;
      }

      .menu-entry:hover {
        color: #fff;
        background-color: var(--printess-red);
        cursor: pointer;
      }

      .json-icons {
        display: flex;
        align-items: center;
      }
      .json-icons wc-icon {
        margin-right: 20px;
        padding: 0px;
        width: 25px;
        height: 25px;
        cursor: pointer;
      }

      .new-entry {
        color: var(--printess-red);
      }
      .new-entry:hover {
        color: #fff;
      }

      .selected {
        color: #fff;
        background-color: var(--printess-red);
      }
      .selected:hover {
        cursor: default;
      }

      .plus-icon {
        margin-right: 10px;
        fill: var(--printess-red);
      }
      .menu-entry:hover .plus-icon, .menu-entry.selected .plus-icon {
        fill: var(--printess-lightred);
      }

      .form-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 10px;
        border-radius: 4px;
        background-color: rgba(210, 0, 100, 0.04);
      }

      .json-name-save-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-top: 1px solid var(--printess-red);
      }

      .card-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        background-color: rgba(210, 0, 100, 0.04);
        padding: 7px 10px;
        border-radius: 4px;
      }
      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      button.settings.red {
        display: flex;
        margin: 20px 15px 20px 10px;
        width: 124px;
        justify-content: center;
        align-items: center;
      }

      button.settings.red:hover {
        background-color: var(--printess-redHover);
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card-input {
          font-size: 12px;
          padding: 5px 7px;
        }

        .card.pink {
          margin-bottom: 50px;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async readFallbackSettings(){const e=await api.readUserSettings({});if(!(e instanceof ServerErrorResponse$2)){const t=Object.keys(e).filter(e=>e.startsWith("letterGenerator."));if(0===t.length)return{keys:[],apiResponse:""};const o=t.map(t=>({key:t,title:this.parseJson(e[t],t)?.title||"",menuTitle:this.parseJson(e[t],t)?.menuTitle||"",lastSaved:(new Date).toISOString()}));return await this.writeUserSetting({key:"letterGeneratorKeys",json:JSON.stringify(o)}),{keys:t,apiResponse:e}}this.showError(e)}async readUserSettingsByKeyList(e){const t={keys:e.map(e=>e.key)},o=await api.readUserSettings(t);if(!(o instanceof ServerErrorResponse$2))return{keys:Object.keys(o).filter(e=>e.startsWith("letterGenerator")),apiResponse:o};this.showError(o)}async readUserSettings(){const e=await api.readUserSettings({keys:["letterGeneratorKeys"]});if(e instanceof ServerErrorResponse$2)this.showError(e);else{this.jsonKeyList=this.parseJson(e.letterGeneratorKeys,"letterGeneratorKeys");const t=this.jsonKeyList&&this.jsonKeyList.length?await this.readUserSettingsByKeyList(this.jsonKeyList):await this.readFallbackSettings();if(t&&t.keys.length&&t.apiResponse&&(this.jsonEntries=t.keys.map(e=>{const o=t.apiResponse[e]??"{}",r=this.parseJson(o),i=r&&r.title?r.title:e.replace(/^letterGenerator\./,"").replace(/_/g," ");return{key:e,content:o,menuTitle:r&&r.menuTitle?r.menuTitle:"",label:i}}),this.jsonEntries.length&&this.jsonKeyList)){const e=this.jsonKeyList.slice().sort((e,t)=>new Date(t.lastSaved).getTime()-new Date(e.lastSaved).getTime())[0]?.key;this.selectedJson=this.jsonEntries.find(t=>t.key===e)??this.jsonEntries[0]}}}async deleteSelectedJson(e){this.deleting=!0;try{this.jsonKeyList=this.jsonKeyList.filter(t=>t.key!==e),await this.writeUserSetting({key:"letterGeneratorKeys",json:JSON.stringify(this.jsonKeyList)}),await api.deleteUserSetting({key:e});const t=this.jsonEntries.findIndex(t=>t.key===e);-1!==t&&(this.jsonEntries=this.jsonEntries.filter(t=>t.key!==e),this.selectedJson=this.jsonEntries[t-1]??this.jsonEntries[t]??void 0)}finally{this.deleting=!1}}parseJson(e,t){try{return JSON.parse(e)}catch(e){t?console.warn(`Invalid JSON for key ${t}`,e):console.warn("Invalid JSON",e)}}connectedCallback(){super.connectedCallback(),this.readUserSettings()}async saveJson(){if(this.selectedJson){this.saving=!0;try{const e=this.parseJson(this.selectedJson.content)?.menuTitle||"";this.jsonKeyList=this.jsonEntries.filter(e=>this.selectedJson?.key!==e.key).map(e=>({key:e.key,title:e.label??"New JSON Template",menuTitle:e.menuTitle??"",lastSaved:this.jsonKeyList.filter(t=>t.key===e.key)[0].lastSaved??(new Date).toISOString()})),this.jsonKeyList.push({key:this.selectedJson.key,title:this.selectedJson.label||"New JSON Template",menuTitle:e,lastSaved:(new Date).toISOString()}),await this.writeUserSetting({key:"letterGeneratorKeys",json:JSON.stringify(this.jsonKeyList)}),await this.writeUserSetting({key:this.selectedJson.key,json:this.selectedJson.content??"{}"})}finally{window.setTimeout(()=>this.saving=!1,700)}}}setLetterGeneratorJson(e){this.selectedJson&&(this.selectedJson.content=e)}openJsonBuilder(){const e=new WcLetterGeneratorJsonBuilderModal;let t;try{const e=this.selectedJson?.content||"{}",o=JSON.parse(e);o&&(t=o)}catch(e){console.error("Error parsing existing letterJson:",e)}e.showDialog((e,t)=>{t?(this.selectedJson||(this.selectedJson={key:`letterGenerator.${generateID()}`,label:e,menuTitle:"",content:"{}"},this.jsonEntries.push(this.selectedJson)),this.selectedJson.label=e,this.selectedJson.content=JSON.stringify(t,null,2),this.saveJson()):console.log("Dialog cancelled.")},t)}addNewJson(){const e={title:"New JSON Template",menuTitle:"Generate Letter",placeholder:"Please fill in the form to generate your letter.",prefix:"",suffix:"",promptTemplate:"Use the fields below to personalize your letter.",properties:[{name:"name",label:"Receipients Name",type:"input",placeholder:"Enter receipients first name"},{name:"occasion",label:"Occasion",type:"select",options:[{value:"birthday",label:"Birthday",prompt:"Write a letter in ${language}. The receipients name is ${name}. The occasion is ${occasion}. The receipient turns ${years} old. The receipients relation to me is ${relative}. The senders name of the letter is ${sender}. Write the letter directly. Do not include explanations or commentary. Only output the final letter text.",properties:[{name:"years",label:"Years old",type:"input",placeholder:"How old gets the receipient?"},{name:"relative",label:"Relative",type:"input",placeholder:"How do you relate to the birthday person?"}]},{value:"anniversary",label:"Anniversary",prompt:"Write an anniversary letter in ${language}. The receipients name is ${name}. The senders name of the letter is ${sender}. Write the letter directly. Do not include explanations or commentary. Only output the final letter text."}]},{name:"sender",label:"Your Name",type:"input",placeholder:"Enter your first name"}]},t={key:`letterGenerator.${generateID()}`,label:e.title,menuTitle:e.menuTitle||"",content:JSON.stringify(e,null,2)};this.jsonEntries=[...this.jsonEntries,t],this.selectedJson=t}onLabelChanged(e){if(this.selectedJson){this.selectedJson.label=e;try{const t=JSON.parse(this.selectedJson.content||"{}");t.title=e,this.selectedJson.content=JSON.stringify(t,null,2)}catch(e){console.warn("Could not update title in JSON content",e)}this.requestUpdate()}}render(){return x`
      <h3 class="topic">Letter Generator JSON</h3>

      <p>
        The <strong>AI Letter Generator</strong> lets you create dynamic, AI-assisted texts
        for your templates. To use it in the Buyer Side, you first need to define one or more
        <em>Letter Generator JSON</em> files.
      </p>

      <button class="settings red" style="width: unset;" @click=${this.openJsonBuilder}>
        <wc-icon icon="pencil-ruler" primarycolor="head-toolbar" style="margin-right: 10px; padding: 0px;"></wc-icon>
        Open JSON Builder
      </button>

      <p>
        Each JSON file defines how the AI creates text:
      </p>

      <ul>
        <li><strong>title</strong> - shown as the dialog header when generating text.</li>
        <li><strong>menuTitle</strong> - used as the label in the buyer-side dropdown menu.</li>
        <li><strong>placeholder</strong> - instructs customers what to enter in the form.</li>
        <li><strong>promptTemplate</strong> - the instruction text passed to the AI after form input.</li>
        <li><strong>properties</strong> - step-by-step fields shown to customers while filling in the form.</li>
      </ul>
      <p>
        In the Designer you need to go to the <em>Buyer View Appearance Dialog → Text Settings</em> and select which JSON configuration a template should use to make the Letter Generator work in the Buyer Side.
      </p>

      <div class="card red">
        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>JSON</div>
          </h3>
          <div class="json-icons">
            <wc-icon icon="pencil-ruler" primaryColor="head-toolbar" @click=${this.openJsonBuilder}></wc-icon>
            <wc-icon icon="plus" primaryColor="head-toolbar" @click=${this.addNewJson}></wc-icon>
          </div>
        </div>

        <div class="table-body">
          <div class="control">

            <div class="menu">
    ${c(this.jsonEntries,e=>e.key,e=>{const t=e.label;return x`
        <div class="menu-entry ${this.selectedJson?.key===e.key?"selected":""}" @click=${()=>this.selectedJson=e}>
          ${t}
        </div>
      `})}
    <div class="menu-entry new-entry" @click=${this.addNewJson}>
      <wc-icon icon="plus" primaryColor="light" class="plus-icon"></wc-icon>
      Create new JSON
    </div>
  </div>


            <div class="content">
              ${this.selectedJson?x`
                <wc-ace-editor-pure
                  .text=${this.selectedJson.content}
                  .valueChangeCallback=${e=>this.setLetterGeneratorJson(e)}>
                </wc-ace-editor-pure>

              <div class="json-name-save-container">
                <div>Name:</div>
                <wc-input name="name" color="red" placeholder="Enter a name for your json file" .value="${this.selectedJson?.label||""}" .callback="${e=>this.onLabelChanged(e)}" style="width: 100%"></wc-input>
                <wc-button caption="Save" color="red" size="md" loadingText="Saving..." ?loading=${this.saving} @click=${this.saveJson}></wc-button>
                <wc-button caption="Delete" color="red" size="md" @click=${()=>this.deleteSelectedJson(this.selectedJson?.key||"")}></wc-button>
              </div>

              `:x`
                <div style="margin: 10px 20px">Select or create a JSON</div>
              `}

            </div>

          </div>
        </div>

      </div>
    `}};__decorate$m([e$3({type:Boolean})],WcLetterGeneratorSettings.prototype,"saving",void 0),__decorate$m([e$3({type:Boolean})],WcLetterGeneratorSettings.prototype,"deleting",void 0),__decorate$m([e$3({type:Array})],WcLetterGeneratorSettings.prototype,"jsonEntries",void 0),__decorate$m([e$3({type:Object})],WcLetterGeneratorSettings.prototype,"selectedJson",void 0),__decorate$m([e$3({attribute:!1,type:Array})],WcLetterGeneratorSettings.prototype,"jsonKeyList",void 0),WcLetterGeneratorSettings=__decorate$m([e$4("wc-letter-generator-settings")],WcLetterGeneratorSettings);var __decorate$l=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcOpenAiSettings=class extends s$1{constructor(){super(...arguments),this.enableProgressSpinner=!1}static get styles(){return[userProfileStyles,settingsStyles,i$4`
      .card {
        background: transparent;
        margin-bottom: 70px;
        border-bottom: 2px solid var(--printess-red);
      }

      .card.green {
        border-bottom-color: var(--printess-green);
      }

      .table-body {
        display: flex;
        padding: 10px;
      }

      .card-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        background-color: rgba(210, 0, 100, 0.04);
        padding: 7px 10px;
        border-radius: 4px;
      }
      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      button.settings.red {
        display: flex;
        margin: 0 0 0 10px;
        width: 124px;
        justify-content: center;
        align-items: center;
      }

      button.settings.red:hover {
        background-color: var(--printess-redHover);
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card-input {
          font-size: 12px;
          padding: 5px 7px;
        }

        .card.pink {
          margin-bottom: 50px;
        }
      }
    `]}showError(e){alert(e.message)}async load(){const e=await api.readUserSettings({keys:["openAiSettings"]});e instanceof ServerErrorResponse$2?this.showError(e):e.openAiSettings&&(this.state=JSON.parse(e.openAiSettings))}async write(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async delete(){const e=await api.deleteUserSetting({key:"openAiSettings"});e instanceof ServerErrorResponse$2&&this.showError(e)}connectedCallback(){super.connectedCallback(),this.load()}saveUrl(){this.enableProgressSpinner=!0,window.setTimeout(async()=>{if(this.state){const e=JSON.stringify(this.state);await this.write({key:"openAiSettings",json:e})}else await this.delete();this.enableProgressSpinner=!1},500)}setValue(e){const t=e.target.value;this.state=t?{key:t}:void 0}render(){const e=config.isPrintessSystem?" display:none;":"";return x`
      <h3 class="topic" style=${e}>OpenAI Settings</h3>
      <p style="font-size: 14px;  ${e}">
        Here you can provide the <a href="proxy.php?url=https%3A%2F%2Fopenai.com%2F">OpenAI</a> access key for using various services like Chat GPT.
        Currently used for the letter generator.
      </p>

      <div class="card red" style=${e}>
        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>Access Key</div>
          </h3>
        </div>
        <div class="table-body" style="display: flex">
          <input
            class="card-input"
            type="password"
            placeholder="Enter your OpenAI access key here ..."
            value=${this.state?.key||""}
            @change=${e=>this.setValue(e)}
          >
          <button class="settings red" @click=${this.saveUrl}>
            ${this.enableProgressSpinner?x`<div class="spinner"></div><span>Saving</span>`:x`<span>Save</span>`}
          </button>
        </div>
      </div>
    `}};__decorate$l([e$3({type:Boolean})],WcOpenAiSettings.prototype,"enableProgressSpinner",void 0),__decorate$l([e$3({type:Object})],WcOpenAiSettings.prototype,"state",void 0),WcOpenAiSettings=__decorate$l([e$4("wc-open-ai-settings")],WcOpenAiSettings);var __decorate$k=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAdvancedSettingsBuyerside=class extends s$1{constructor(){super(...arguments),this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[userProfileStyles,settingsStyles]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),location.hash="#advanced-buyerside-settings"}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}render(){return x`
      <div class="settings-page">
        <wc-open-ai-settings></wc-open-ai-settings>
        <wc-letter-generator-settings></wc-letter-generator-settings>
      </div>
    `}};WcAdvancedSettingsBuyerside=__decorate$k([e$4("wc-advanced-settings-buyerside")],WcAdvancedSettingsBuyerside);
/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const l=e$2(class extends i{constructor(o){if(super(o),o.type!==t.PROPERTY&&o.type!==t.ATTRIBUTE&&o.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!e(o))throw Error("`live` bindings can only contain a single expression")}render(e){return e}update(e,[o]){if(o===T||o===A)return o;const r=e.element,i=e.name;if(e.type===t.PROPERTY){if(o===r[i])return T}else if(e.type===t.BOOLEAN_ATTRIBUTE){if(!!o===r.hasAttribute(i))return T}else if(e.type===t.ATTRIBUTE&&r.getAttribute(i)===o+"")return T;return s(e),o}});var __decorate$j=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcSaveTokenSettings=class extends s$1{static get styles(){return[userProfileStyles,settingsStyles,i$4`
      .card {
        background: transparent;
        margin-bottom: 10px;
        border-bottom: 2px solid var(--printess-red);
      }

      .card.green {
        border-bottom-color: var(--printess-green);
      }

      .table-body {
        display: grid;
        grid-template-columns: 180px auto;
        padding: 10px;
      }

      .card-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        background-color: rgba(210, 0, 100, 0.04);
        padding: 7px 10px;
        border-radius: 4px;
      }
      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      button.settings.red {
        display: flex;
        margin: 0 0 0 10px;
        width: 124px;
        justify-content: center;
        align-items: center;
      }

      button.settings.red:hover {
        background-color: var(--printess-redHover);
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card-input {
          font-size: 12px;
          padding: 5px 7px;
        }

        .card.pink {
          margin-bottom: 50px;
        }
      }
    `]}showError(e){alert(e.message)}constructor(){super(),this.enableProgressSpinner=!1,this.createdDays=30,this.producedDays=30}connectedCallback(){super.connectedCallback(),this.load()}async load(){const e=await api.readUserSettings({keys:["saveTokenCreatedDays","saveTokenProducedDays"]});e instanceof ServerErrorResponse$2?this.showError(e):(e.saveTokenCreatedDays&&(this.createdDays=parseInt(e.saveTokenCreatedDays,10)),e.saveTokenProducedDays&&(this.producedDays=parseInt(e.saveTokenProducedDays,10)))}async write(e,t){const o=await api.writeUserSetting({key:e,json:t});o instanceof ServerErrorResponse$2&&this.showError(o)}save(){this.enableProgressSpinner=!0,window.setTimeout(async()=>{await this.write("saveTokenCreatedDays",(this.createdDays??30).toString()),await this.write("saveTokenProducedDays",(this.producedDays??30).toString()),this.enableProgressSpinner=!1},500)}setCreatedDays(e){this.createdDays=Math.min(Math.max(parseInt(e.target.value,10),30),400)}setProducedDays(e){this.producedDays=Math.min(Math.max(parseInt(e.target.value,10),30),800)}render(){return x`
    <wc-topic-header title="SaveToken Settings"></wc-topic-header>
      <p style="font-size: 14px;">
        Here you can provide the default saveToken settings.
        How long are resources uploaded by the users kept, the resources you upload within the full editor when designing are not affected at all and handled differently.
        You can define the days for creation and production.
        Creation days are used when the customer hits add to basket or any other mechanism creating saveTokens.
        Production days apply to any produced (via production/produce or dropship/produce) saveToken.
        Setting the lifetime to more than 30 days may lead to additional costs.
      </p>

      <div class="card red">
        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>User Resource Storage</div>
          </h3>
        </div>

        <div class="table-body">
          <dt>Created Days</dt>
          <dd>
            <input
              class="card-input"
              type="number"
              placeholder="Enter the days to keep resources for new saveTokens ..."
              .value=${l(this.createdDays.toString())}
              @change=${this.setCreatedDays}
            >
          </dd>

          <dt>Produced Days</dt>
          <dd>
            <input
              class="card-input"
              type="number"
              placeholder="Enter the days to keep resources for produced saveTokens ..."
              .value=${l(this.producedDays.toString())}
              @change=${this.setProducedDays}
            >
          </dd>
        </div>
      </div>

      <div style="margin-bottom: 70px;">
        <wc-button
          caption="Save Changes" color="red" size="md"
          @click=${this.save}
          .loading=${this.enableProgressSpinner}
          loadingText="Saving"
        ></wc-button>
      </div>
    `}};__decorate$j([e$3({type:Boolean})],WcSaveTokenSettings.prototype,"enableProgressSpinner",void 0),__decorate$j([e$3({type:Number})],WcSaveTokenSettings.prototype,"createdDays",void 0),__decorate$j([e$3({type:Number})],WcSaveTokenSettings.prototype,"producedDays",void 0),WcSaveTokenSettings=__decorate$j([e$4("wc-savetoken-settings")],WcSaveTokenSettings);var __decorate$i=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcEventCallbackSettings=class extends s$1{constructor(){super(...arguments),this.saving=!1,this.deleting=!1}static get styles(){return i$4`
      .table-body {
        display: flex;
        padding: 10px;
        gap: 10px;
      }

      .full-width {
        width: 100%;
      }
    `}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async readUserSettings(e){const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):this.eventCallbackSettings=t.eventCallbackSettings?JSON.parse(t.eventCallbackSettings):void 0}async deleteUserSetting(){const e=await api.deleteUserSetting({key:"eventCallbackSettings"});e instanceof ServerErrorResponse$2&&this.showError(e)}connectedCallback(){super.connectedCallback(),this.readUserSettings({keys:["eventCallbackSettings"]})}saveUrl(){this.saving=!0,window.setTimeout(async()=>{if(!this.eventCallbackSettings)return await this.deleteUrl(),void(this.saving=!1);const e=JSON.stringify(this.eventCallbackSettings);await this.writeUserSetting({key:"eventCallbackSettings",json:e}),this.saving=!1},500)}async deleteUrl(){this.eventCallbackSettings=void 0,await this.deleteUserSetting(),this.deleting=!1}setCallbackUrl(e){this.eventCallbackSettings=e?{url:e}:void 0}render(){return x`
      <wc-topic-header title="Event Callback"></wc-topic-header>
      <p style="font-size: 14px;">
        Here you can provide an event callback url that fires when templates are saved, published, deleted or unpublished.
      </p>

      <wc-card-container title="Callback Url" color="red">
        <div class="table-body">
          <wc-input class="full-width" color="red"
            placeholder="Enter your callback url here ..."
            autocomplete="off"
            value="${this.eventCallbackSettings?.url||""}"
            .callback=${e=>this.setCallbackUrl(e)}
          ></wc-input>
          <wc-button caption="Save" color="red" size="md" @click=${()=>{this.saveUrl()}} .loading=${this.saving} loadingText="Saving"></wc-button>
        </div>
      </wc-card-container>
    `}};__decorate$i([e$3({type:Boolean})],WcEventCallbackSettings.prototype,"saving",void 0),__decorate$i([e$3({type:Boolean})],WcEventCallbackSettings.prototype,"deleting",void 0),__decorate$i([e$3({type:Object})],WcEventCallbackSettings.prototype,"eventCallbackSettings",void 0),WcEventCallbackSettings=__decorate$i([e$4("wc-event-callback-settings")],WcEventCallbackSettings);var __decorate$h=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPiktIdSettings=class extends s$1{constructor(){super(...arguments),this.enableProgressSpinner=!1}static get styles(){return i$4`
      .table-body {
        display: flex;
        padding: 10px;
        gap: 10px;
      }
        
      .full-width {
        width: 100%;
      }
    `}showError(e){alert(e.message)}async load(){const e=await api.readUserSettings({keys:["piktIdAccessKey"]});e instanceof ServerErrorResponse$2?this.showError(e):e.piktIdAccessKey&&(this.piktIdAccessKey=e.piktIdAccessKey)}async write(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async delete(){const e=await api.deleteUserSetting({key:"piktIdAccessKey"});e instanceof ServerErrorResponse$2&&this.showError(e)}connectedCallback(){super.connectedCallback(),this.load()}saveUrl(){this.enableProgressSpinner=!0,window.setTimeout(async()=>{this.piktIdAccessKey?await this.write({key:"piktIdAccessKey",json:this.piktIdAccessKey}):await this.delete(),this.enableProgressSpinner=!1},500)}setValue(e){this.piktIdAccessKey=e}render(){return x`
      <wc-topic-header title="PiktID Settings"></wc-topic-header>
      <p style="font-size: 14px;">
        Here you can provide the <a href="proxy.php?url=https%3A%2F%2Fpiktid.com%2F">PiktID</a> access key for using various services like face swap.
      </p>

      <wc-card-container title="Access Key" color="red">
        <div class="table-body">
          <wc-input class="full-width" color="red" 
            placeholder="Enter your PiktID access key here ..."
            name="access key"
            type="password"
            value=${this.piktIdAccessKey??""}
            .callback=${e=>this.setValue(e)}
          ></wc-input>
          <wc-button caption="Save" color="red" size="md" @click=${this.saveUrl} .loading=${this.enableProgressSpinner} loadingText="Saving"></wc-button>
        </div>
      </wc-card-container>
    `}};__decorate$h([e$3({type:Boolean})],WcPiktIdSettings.prototype,"enableProgressSpinner",void 0),__decorate$h([e$3({type:String})],WcPiktIdSettings.prototype,"piktIdAccessKey",void 0),WcPiktIdSettings=__decorate$h([e$4("wc-piktid-settings")],WcPiktIdSettings);var __decorate$g=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcCutoutProSettings=class extends s$1{constructor(){super(...arguments),this.enableProgressSpinner=!1}static get styles(){return i$4`
      .table-body {
        display: flex;
        padding: 10px;
        gap: 10px;
      }
        
      .full-width {
        width: 100%;
      }
    `}showError(e){alert(e.message)}async load(){const e=await api.readUserSettings({keys:["cutoutProAccessKey_private"]});console.log("### cutoutpro response:",e),e instanceof ServerErrorResponse$2?this.showError(e):e.cutoutProAccessKey_private&&(this.cutoutProAccessKey=e.cutoutProAccessKey_private)}async write(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async delete(){const e=await api.deleteUserSetting({key:"cutoutProAccessKey_private"});e instanceof ServerErrorResponse$2&&this.showError(e)}connectedCallback(){super.connectedCallback(),this.load()}saveUrl(){this.enableProgressSpinner=!0,window.setTimeout(async()=>{this.cutoutProAccessKey?await this.write({key:"cutoutProAccessKey_private",json:this.cutoutProAccessKey}):await this.delete(),this.enableProgressSpinner=!1},500)}setValue(e){this.cutoutProAccessKey=e}render(){return x`
      <wc-topic-header title="CutoutPro Settings"></wc-topic-header>
      <p style="font-size: 14px;">
        Here you can provide the <a href="proxy.php?url=https%3A%2F%2Fwww.cutout.pro%2F">CutoutPro</a> access key for using various services like face segmentation.
      </p>

      <wc-card-container title="Access Key" color="red">
        <div class="table-body">
          <wc-input class="full-width" color="red" 
            placeholder="Enter your CutoutPro access key here ..."
            name="access key"
            type="password"
            value=${this.cutoutProAccessKey??""}
            .callback=${e=>this.setValue(e)}
          ></wc-input>
          <wc-button caption="Save" color="red" size="md" @click=${this.saveUrl} .loading=${this.enableProgressSpinner} loadingText="Saving"></wc-button>
        </div>
      </wc-card-container>
    `}};__decorate$g([e$3({type:Boolean})],WcCutoutProSettings.prototype,"enableProgressSpinner",void 0),__decorate$g([e$3({type:String})],WcCutoutProSettings.prototype,"cutoutProAccessKey",void 0),WcCutoutProSettings=__decorate$g([e$4("wc-cutoutpro-settings")],WcCutoutProSettings);var WcAtomxySettings_1,__decorate$f=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};class AtomxyState{constructor(){this.key="",this.profileForProduction="",this.profileForUpload=""}clone(){return Object.assign(new AtomxyState,this)}}let WcAtomxySettings=WcAtomxySettings_1=class extends s$1{constructor(){super(...arguments),this.enableProgressSpinner=!1}static get styles(){return[userProfileStyles,settingsStyles,i$4`
      .card {
        background: transparent;
        margin-bottom: 10px;
        border-bottom: 2px solid var(--printess-red);
      }

      .card.green {
        border-bottom-color: var(--printess-green);
      }

      .table-body {
        display: grid;
        grid-template-columns: 180px auto;
        padding: 10px;
      }

      .card-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        background-color: rgba(210, 0, 100, 0.04);
        padding: 7px 10px;
        border-radius: 4px;
      }
      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      button.settings.red {
        display: flex;
        margin: 0 0 0 10px;
        width: 124px;
        justify-content: center;
        align-items: center;
      }

      button.settings.red:hover {
        background-color: var(--printess-redHover);
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card-input {
          font-size: 12px;
          padding: 5px 7px;
        }

        .card.pink {
          margin-bottom: 50px;
        }
      }
    `]}showError(e){alert(e.message)}connectedCallback(){super.connectedCallback(),this.load()}async loadAtomxyProfiles(){if(!this.state||!this.state.key)return;const e=await api.loadAtomxyProfiles();e instanceof ServerErrorResponse$2?alert(e.message):this.profiles=e}async load(){const e=await api.readUserSettings({keys:[WcAtomxySettings_1.SETTINGS_KEY]});e instanceof ServerErrorResponse$2?this.showError(e):e[WcAtomxySettings_1.SETTINGS_KEY]&&(this.state=Object.assign(new AtomxyState,JSON.parse(e[WcAtomxySettings_1.SETTINGS_KEY])),await this.loadAtomxyProfiles())}async write(){const e=JSON.stringify(this.state),t=await api.writeUserSetting({key:WcAtomxySettings_1.SETTINGS_KEY,json:e});t instanceof ServerErrorResponse$2?this.showError(t):this.state&&this.state.key&&setTimeout(()=>{this.loadAtomxyProfiles()},512)}async delete(){const e=await api.deleteUserSetting({key:WcAtomxySettings_1.SETTINGS_KEY});e instanceof ServerErrorResponse$2&&this.showError(e)}save(){this.enableProgressSpinner=!0,window.setTimeout(async()=>{this.state?await this.write():await this.delete(),this.enableProgressSpinner=!1},500)}setKey(e){const t=e.target.value,o=this.state?this.state.clone():new AtomxyState;o.key=t,this.state=o}setUploadProfile(e){const t=e.target.value,o=this.state?this.state.clone():new AtomxyState;o.profileForUpload=t,this.state=o}setProductionProfile(e){const t=e.target.value,o=this.state?this.state.clone():new AtomxyState;o.profileForProduction=t,this.state=o}render(){return x`

      <div class="card red">
        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>Atomyx Settings</div>
          </h3>
        </div>

        <p style="font-size: 14px; margin-left: 10px;">
        Here you can provide the <a href="proxy.php?url=https%3A%2F%2Fwww.atomyx.io%2F">Atomyx</a> settings for using pdf conversion and profiling services.
        </p>

        <div class="table-body">
          <dt>Access Key</dt>
          <dd>
            <input
              class="card-input"
              type="password"
              placeholder="Enter your Atomxy access key here ..."
              value=${this.state?.key||""}
              @change=${this.setKey}
            >
          </dd>

          <dt>PDF Upload Profile</dt>
          <dd>
            <select @change=${this.setUploadProfile} class="card-input">
              ${this.profiles?c(this.profiles.files,e=>e.filename,e=>x`
              <option value=${e.path} .selected=${this.state?.profileForUpload===e.path}>${e.filename}</option>
              `):""}
            </select>
          </dd>

          <!-- <dt>Production Output Profile</dt>
          <dd>
            <select @change=${this.setProductionProfile} class="card-input">
              ${this.profiles?c(this.profiles.files,e=>e.filename,e=>x`
              <option value=${e.path} .selected=${this.state?.profileForProduction===e.path}>${e.filename}</option>
              `):""}
            </select>
          </dd> -->
        </div>
      </div>

      <div style="margin-bottom: 70px;">
        <wc-button
          caption="Save Changes" color="red" size="md"
          @click=${this.save}
          .loading=${this.enableProgressSpinner}
          loadingText="Saving"
        ></wc-button>
      </div>
    `}};WcAtomxySettings.SETTINGS_KEY="atomyxSettings",__decorate$f([e$3({type:Boolean})],WcAtomxySettings.prototype,"enableProgressSpinner",void 0),__decorate$f([e$3({type:Object})],WcAtomxySettings.prototype,"state",void 0),__decorate$f([e$3({type:Object})],WcAtomxySettings.prototype,"profiles",void 0),WcAtomxySettings=WcAtomxySettings_1=__decorate$f([e$4("wc-atomxy-settings")],WcAtomxySettings);var __decorate$e=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcOrderProducedCallbackSettings=class extends s$1{constructor(){super(...arguments),this.saving=!1,this.deleting=!1}static get styles(){return i$4`
      .table-body {
        display: flex;
        padding: 10px;
        gap: 10px;
      }

      .full-width {
        width: 100%;
      }
    `}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async readUserSettings(e){const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):this.orderProducedCallbackSettings=t.orderProducedCallbackSettings_private}async deleteUserSetting(){const e=await api.deleteUserSetting({key:"orderProducedCallbackSettings_private"});e instanceof ServerErrorResponse$2&&this.showError(e)}connectedCallback(){super.connectedCallback(),this.readUserSettings({keys:["orderProducedCallbackSettings_private"]})}saveUrl(){this.saving=!0,window.setTimeout(async()=>{if(!this.orderProducedCallbackSettings)return await this.deleteUrl(),void(this.saving=!1);await this.writeUserSetting({key:"orderProducedCallbackSettings_private",json:this.orderProducedCallbackSettings}),this.saving=!1},500)}async deleteUrl(){this.orderProducedCallbackSettings="",await this.deleteUserSetting(),this.deleting=!1}setCallbackUrl(e){this.orderProducedCallbackSettings=e||""}render(){return x`
      <wc-topic-header title="Order Produced Callback"></wc-topic-header>
      <p style="font-size: 14px;">
        Here you can provide a callback url that fires when an order has been produced.
      </p>

      <wc-card-container title="Callback Url" color="red">
        <div class="table-body">
          <wc-input class="full-width" color="red"
            placeholder="Enter your callback url here ..."
            autocomplete="off"
            value="${this.orderProducedCallbackSettings||""}"
            .callback=${e=>this.setCallbackUrl(e)}
          ></wc-input>
          <wc-button caption="Save" color="red" size="md" @click=${()=>{this.saveUrl()}} .loading=${this.saving} loadingText="Saving"></wc-button>
        </div>
      </wc-card-container>
    `}};__decorate$e([e$3({type:Boolean})],WcOrderProducedCallbackSettings.prototype,"saving",void 0),__decorate$e([e$3({type:Boolean})],WcOrderProducedCallbackSettings.prototype,"deleting",void 0),__decorate$e([e$3({type:Object})],WcOrderProducedCallbackSettings.prototype,"orderProducedCallbackSettings",void 0),WcOrderProducedCallbackSettings=__decorate$e([e$4("wc-order-produced-callback-settings")],WcOrderProducedCallbackSettings);var __decorate$d=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDropshipOrderCreatedCallbackSettings=class extends s$1{constructor(){super(...arguments),this.saving=!1,this.deleting=!1}static get styles(){return i$4`
      .table-body {
        display: flex;
        padding: 10px;
        gap: 10px;
      }

      .full-width {
        width: 100%;
      }
    `}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async writeUserSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async readUserSettings(e){const t=await api.readUserSettings(e);t instanceof ServerErrorResponse$2?this.showError(t):this.dropshipOrderCreatedCallbackSettings=t.dropshipOrderCreatedCallbackSettings_private}async deleteUserSetting(){const e=await api.deleteUserSetting({key:"dropshipOrderCreatedCallbackSettings_private"});e instanceof ServerErrorResponse$2&&this.showError(e)}connectedCallback(){super.connectedCallback(),this.readUserSettings({keys:["dropshipOrderCreatedCallbackSettings_private"]})}saveUrl(){this.saving=!0,window.setTimeout(async()=>{if(!this.dropshipOrderCreatedCallbackSettings)return await this.deleteUrl(),void(this.saving=!1);await this.writeUserSetting({key:"dropshipOrderCreatedCallbackSettings_private",json:this.dropshipOrderCreatedCallbackSettings}),this.saving=!1},500)}async deleteUrl(){this.dropshipOrderCreatedCallbackSettings="",await this.deleteUserSetting(),this.deleting=!1}setCallbackUrl(e){this.dropshipOrderCreatedCallbackSettings=e||""}render(){return x`
      <wc-topic-header title="Dropship Order Created Callback"></wc-topic-header>
      <p style="font-size: 14px;">
        Here you can provide a callback url that fires when an order has been produced.
      </p>

      <wc-card-container title="Callback Url" color="red">
        <div class="table-body">
          <wc-input class="full-width" color="red"
            placeholder="Enter your callback url here ..."
            autocomplete="off"
            value="${this.dropshipOrderCreatedCallbackSettings||""}"
            .callback=${e=>this.setCallbackUrl(e)}
          ></wc-input>
          <wc-button caption="Save" color="red" size="md" @click=${()=>{this.saveUrl()}} .loading=${this.saving} loadingText="Saving"></wc-button>
        </div>
      </wc-card-container>
    `}};__decorate$d([e$3({type:Boolean})],WcDropshipOrderCreatedCallbackSettings.prototype,"saving",void 0),__decorate$d([e$3({type:Boolean})],WcDropshipOrderCreatedCallbackSettings.prototype,"deleting",void 0),__decorate$d([e$3({type:Object})],WcDropshipOrderCreatedCallbackSettings.prototype,"dropshipOrderCreatedCallbackSettings",void 0),WcDropshipOrderCreatedCallbackSettings=__decorate$d([e$4("wc-dropship-order-created-callback-settings")],WcDropshipOrderCreatedCallbackSettings);var __decorate$c=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAdvancedSettingsEditor=class extends s$1{constructor(){super(...arguments),this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[userProfileStyles,settingsStyles]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),location.hash="#advanced-editor-settings"}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}render(){return x`
      <div class="settings-page">
        <wc-printess-editor-version></wc-printess-editor-version>
        <wc-event-callback-settings></wc-event-callback-settings>
        <wc-order-produced-callback-settings></wc-order-produced-callback-settings>
        <wc-dropship-order-created-callback-settings></wc-dropship-order-created-callback-settings>
        <wc-piktid-settings></wc-piktid-settings>
        <wc-cutoutpro-settings></wc-cutoutpro-settings>
        <wc-savetoken-settings></wc-savetoken-settings>
        <wc-atomxy-settings></wc-atomxy-settings>
      </div>
    `}};WcAdvancedSettingsEditor=__decorate$c([e$4("wc-advanced-settings-editor")],WcAdvancedSettingsEditor);var __decorate$b=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcProofSettings=class extends s$1{constructor(){super(...arguments),this.enableProgressSpinner=!1,this.proofDpi=96,this.proofJpgCompression=90}static get styles(){return[userProfileStyles,settingsStyles,i$4`
      .card {
        background: transparent;
        margin-bottom: 10px;
        border-bottom: 2px solid var(--printess-red);
      }

      .card.green {
        border-bottom-color: var(--printess-green);
      }

      .table-body {
        display: grid;
        grid-template-columns: 500px auto;
        padding: 10px;
      }

      .card-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        width: 100%;
        outline: none;
        border: 1px solid #ccc;
        background-color: rgba(210, 0, 100, 0.04);
        padding: 7px 10px;
        border-radius: 4px;
      }
      ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #a0a0a0;
        opacity: 1; /* Firefox */
      }
      :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #a0a0a0;
      }
      ::-ms-input-placeholder { /* Microsoft Edge */
        color: #a0a0a0;
      }

      button.settings.red {
        display: flex;
        margin: 20px 15px 20px 0px;
        width: 124px;
        justify-content: center;
        align-items: center;
      }

      button.settings.red:hover {
        background-color: var(--printess-redHover);
      }

      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .card-input {
          font-size: 12px;
          padding: 5px 7px;
        }

        .card.pink {
          margin-bottom: 50px;
        }
      }
    `]}showError(e){alert(e.message)}async load(){const e=await api.readUserSettings({keys:["shop_proof","disableProofText","proofDpi","proofJpgCompression"]});e instanceof ServerErrorResponse$2?this.showError(e):(e.shop_proof?this.allowProof=e.shop_proof??"false":this.allowProof="false",e.disableProofText?this.disableProofText=e.disableProofText??"false":this.disableProofText="false",e.proofDpi?this.proofDpi=parseInt(e.proofDpi,10):this.proofDpi=96,e.proofDpi?this.proofJpgCompression=parseInt(e.proofJpgCompression,10):this.proofJpgCompression=90)}async write(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async delete(){const e=await api.deleteUserSetting({key:"shop_proof"});e instanceof ServerErrorResponse$2&&this.showError(e)}connectedCallback(){super.connectedCallback(),this.load()}save(){this.enableProgressSpinner=!0,window.setTimeout(async()=>{this.allowProof?(await this.write({key:"shop_proof",json:this.allowProof}),await this.write({key:"disableProofText",json:this.disableProofText??""}),await this.write({key:"proofDpi",json:this.proofDpi.toString()}),await this.write({key:"proofJpgCompression",json:this.proofJpgCompression.toString()})):await this.delete(),this.enableProgressSpinner=!1},500)}setAllowProof(e){this.allowProof=e.target.value}setDisableProofText(e){this.disableProofText=e.target.value}render(){return x`
      <h3 class="topic">Shop Proof Settings</h3>
      <p style="font-size: 14px;">
        Here you can allow that shop users can use the PDF proof feature.
        Per default no shop user can ever render PDF files.
        Proof PDFs are charged with 1/10th of the production credits.
      </p>

      <div class="card red">
        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>Proof PDFs</div>
          </h3>
        </div>
        <div class="table-body">
          <dt>Allow Proof PDF Generation for Shop Users</dt>
          <dd>
            <select @change=${e=>this.setAllowProof(e)} class="card-input" >
              <option value="true" .selected=${"true"===this.allowProof}>Yes</option>
              <option value="false" .selected=${"true"!==this.allowProof}>No</option>
            </select>
          </dd>

          <dt>Disable Proof Text</dt>
          <dd>
            <select @change=${e=>this.setDisableProofText(e)} class="card-input" >
              <option value="true" .selected=${"true"===this.disableProofText}>Yes</option>
              <option value="false" .selected=${"true"!==this.disableProofText}>No</option>
            </select>
          </dd>

          <dt>Proof Output DPI (max 96)</dt>
          <dd>
            <input @change=${e=>this.proofDpi=Math.max(1,Math.min(parseInt(e.target.value,10),96))} .value=${l(this.proofDpi.toString())} class="card-input" />
          </dd>

          <dt>Proof Jpg Compression (1: super low quality, 100: best quality)</dt>
          <dd>
            <input @change=${e=>this.proofJpgCompression=Math.max(1,Math.min(parseInt(e.target.value,10),100))} .value=${l(this.proofJpgCompression.toString())} class="card-input" />
          </dd>
        </div>
      </div>

      <div style="margin-bottom: 70px;">
        <wc-button
          caption="Save Changes" color="red" size="md"
          @click=${this.save}
          .loading=${this.enableProgressSpinner}
          loadingText="Saving"
        ></wc-button>
      </div>
    `}};__decorate$b([e$3({type:Boolean})],WcProofSettings.prototype,"enableProgressSpinner",void 0),__decorate$b([e$3({type:String})],WcProofSettings.prototype,"allowProof",void 0),__decorate$b([e$3({type:String})],WcProofSettings.prototype,"disableProofText",void 0),__decorate$b([e$3({type:Number})],WcProofSettings.prototype,"proofDpi",void 0),__decorate$b([e$3({type:Number})],WcProofSettings.prototype,"proofJpgCompression",void 0),WcProofSettings=__decorate$b([e$4("wc-proof-settings")],WcProofSettings);var __decorate$a=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcShopifyWebhooks=class extends s$1{constructor(){super(),this.webHooks=[],this.selectedWebHook=void 0,this.loading=!1,this.currentlyClearingCache=!1}connectedCallback(){super.connectedCallback(),location.hash="#advanced-settings",this.loadShopifyHooks()}static get styles(){return[settingsStyles,i$4`
      * {
        color: #555555;
      }

      .card {
        background: transparent;
        margin-bottom: 70px;
        border-bottom: 2px solid var(--printess-red);
      }

      .table-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .table-header div {
        color: white;
      }
      
      .table-body {
        display: flex;
        padding: 0px;
        min-height: 50vh;
      }

      form, .form {
        width: 100%;
        display: grid;
        margin-top: 10px;
        margin-bottom: 0;
        grid-template-columns: 80px calc(100% - 80px);
      }

      form div, .form div {
        display: flex;
        line-height: 25px;
        margin-left: 0;
        text-align: left;
        padding: 10px;
        align-items: center;
        /*min-width: 100px;*/
      }

      .form-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 10px;
        border-radius: 4px;
        background-color: rgba(210, 0, 100, 0.04);
      }

      .form-input:not(input[type='checkbox']) {
        width: 100%;
      }

      input[type="file"] {
        display: none;
      }

      .file-upload-wrapper {
        display: flex;
        align-items: center;
        padding: 0px;
        width: calc(100% - 140px);
      }

      .upload-button, .custom-file-upload {
        border: 2px solid rgb(210, 0, 100);
        background: rgb(210, 0, 100);
        padding: 2px 30px;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-family: var(--printess-button-font);
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
      }

      .custom-file-upload {
        background: none;
        color: rgb(210, 0, 100);
        margin-right: 10px;
      }

      .custom-file-upload:hover {
        background-color: rgb(210, 0, 100);
        color: white;
      }

      .upload-button {
        display: flex;
        align-items: center;
        height: 33px;
      }

      .upload-button:hover {
        background-color: var(--printess-redHover);
      }

      .upload-button span {
        color: white;
      }

      #fileName {
        display: inline-block;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0px;
        margin-right: 10px;
      }

      .control {
        width: 100%;
        display: grid;
        grid-template-columns: 200px 1fr;
      }

      .menu {
        height: auto;
        background: var(--printess-lightred);
        border-top: 1px solid var(--printess-lightred);
      }

      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        width: calc(100% - 20px);
      }

      .menu-entry {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        font-size: 14px;
        border-bottom: 1px solid #f0b6ce;
      }

      .menu-entry:hover {
        color: #fff;
        background-color: var(--printess-red);
        cursor: pointer;
      }

      .new-entry {
        color: var(--printess-red);
      }
      .new-entry:hover {
        color: #fff;
      }

      .selected { 
        color: #fff;
        background-color: var(--printess-red);
      }
      .selected:hover {
        cursor: default;
      }

      .plus-icon {
        margin-right: 10px;
        fill: var(--printess-red);
      }
      .menu-entry:hover .plus-icon, .menu-entry.selected .plus-icon {
        fill: var(--printess-lightred);
      }

      .directory-url {
        margin-bottom: 10px;
        line-break: anywhere;
      }
      .directory-url p {
        margin: 5px 0px;
        font-weight: 700;
      }
      .directory-url div {
        font-size: 12px;
      }

      .settings {
        padding: 7px 20px;
        margin: 10px 10px 0px 0px;
      }

      .settings.green {
        background-color: var(--printess-green);
      }
      .settings.red {
        background-color: var(--printess-red);
      }
      
      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
        min-width: 2em;
        padding: 2px;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      .texturePreviewImg {
        background-size: cover;
        width: 20px;
        height: 20px;
        margin-left: 5px;
        display: inline-block;
        border: 1px solid black;
      }

      .modelInfoHeader a {
        display:inline-block;
        vertical-align: middle;
      }

    `]}setSelectedWebhook(e){this.selectedWebHook=e}resetLoading(){this.loading=!1;this.setSelectedWebhook({hookId:"",shopifyWebhookSecret:"",processAmazonOrders:!1,callbackUrl:"",addAllOrderItemsToFormField:!1,useOrderNameAsExternalOrderId:!0,label:""})}async loadShopifyHooks(e=null){this.loading=!0;const t=await api.loadShopifyHooks();if(t instanceof ServerErrorResponse$2)return void alert(t.message);this.webHooks=t;let o=null;if(t.length>0&&(o=t[0],e)){const r=t.filter(t=>t.hookId===e);r.length>0&&(o=r[0])}o&&this.setSelectedWebhook(o),this.loading=!1}getSelectedHookUrl(){return this.selectedWebHook&&this.selectedWebHook.hookId?`https://${apiEndpoint}/shops/shopify/order/${this.selectedWebHook.hookId}`:""}onLabelChanged(e){this.selectedWebHook&&(this.selectedWebHook.label=e.target.value)}onWebhookSecretChanged(e){this.selectedWebHook&&(this.selectedWebHook.shopifyWebhookSecret=e.target.value)}onCallbackUrlChanged(e){this.selectedWebHook&&(this.selectedWebHook.callbackUrl=e.target.value)}onProcessAmazonOrdersChanged(e){this.selectedWebHook&&(this.selectedWebHook.processAmazonOrders=!0===e.target.checked)}onUseOrderNameAsExternalOrderIdChanged(e){this.selectedWebHook&&(this.selectedWebHook.useOrderNameAsExternalOrderId=!0===e.target.checked)}async onSave(e){if(this.selectedWebHook){const e=await api.saveShopifyHook(this.selectedWebHook);e instanceof ServerErrorResponse$2?alert(e.message):await this.loadShopifyHooks(this.selectedWebHook.hookId)}}onDelete(e){if(this.selectedWebHook){new WcDialogConfirmRemoval(this.selectedWebHook.label?this.selectedWebHook.label:(this.selectedWebHook?.hookId||"").toString(),"Webhook").showDialog(async e=>{if("sure"!==e||!this.selectedWebHook)return;const t=await api.deleteShopifyHook(this.selectedWebHook);t instanceof ServerErrorResponse$2?alert(t.message):await this.loadShopifyHooks()})}}async onClearCache(e){if(!this.currentlyClearingCache)try{this.currentlyClearingCache=!0,await api.clearShopifyCreateOrderCache(),alert("Cache cleared.")}finally{this.currentlyClearingCache=!1}}render(){return x`
      <h3 class="topic">Shopify Webhooks</h3>
      <p style="font-size: 14px;">
        Here you can create your shopify webhook endpoints.
      </p>


      <div class="card red">

        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>Current Endpoints</div>
          </h3>
          <wc-icon icon="plus" primaryColor="head-toolbar" style="margin-right: 20px; cursor: pointer;" @click=${()=>this.resetLoading()}></wc-icon>
        </div>

        <div class="table-body">
          <div class="control">

            <div class="menu">
              ${c(this.webHooks.sort((e,t)=>(e.hookId||"").localeCompare(t.hookId||"")),e=>e.hookId,e=>x`
              <div class="${o({"menu-entry":!0,selected:this.selectedWebHook?.hookId===e.hookId})}" @click=${()=>this.setSelectedWebhook(this.webHooks.filter(t=>t.hookId===e.hookId)[0])}>${e.label?e.label:e.hookId}</div>
              `)}

              <div class="${o({"menu-entry":!0,"new-entry":!0,selected:!this.selectedWebHook})}" @click=${()=>this.resetLoading()}>
                <wc-icon icon="plus" primaryColor="light" class="plus-icon"></wc-icon>
                Create new Endpoint
              </div>
            </div>

            <div class="content">
              ${this.selectedWebHook?x`
                  <form id="theForm">
                    <div>Hook Id:</div>
                    <div>${this.selectedWebHook.hookId}</div>

                    <div>Hook Url</div>
                    <div>${this.getSelectedHookUrl()}</div>

                    <div>Label</div>
                    <div><input type="text" name="label" class="form-input" .value="${this.selectedWebHook.label||""}" @input="${this.onLabelChanged}"/></div>

                    <div>Shopify Webhook secret</div>
                    <div><input type="text" name="webhookSecret" class="form-input" .value="${this.selectedWebHook.shopifyWebhookSecret?this.selectedWebHook.shopifyWebhookSecret:""}" @input="${this.onWebhookSecretChanged}"/></div>

                    <div>Callback Url</div>
                    <div><input type="text" name="callbackUrl" class="form-input" .value="${this.selectedWebHook.callbackUrl?this.selectedWebHook.callbackUrl:""}" @input="${this.onCallbackUrlChanged}"/></div>

                    <div style="display:none">Process Amazon orders</div>
                    <div style="display:none"><input type="checkbox" name="processAmazonOrders" class="form-input" .checked="${!(void 0===this.selectedWebHook.processAmazonOrders||null===this.selectedWebHook.processAmazonOrders||!this.selectedWebHook.processAmazonOrders)}" clicked="${this.onProcessAmazonOrdersChanged}"/></div>

                    <div>Use Shopify order name as external order id in Printess</div>
                    <div><input type="checkbox" name="useOrderName" class="form-input" .checked="${!(void 0===this.selectedWebHook.useOrderNameAsExternalOrderId||null===this.selectedWebHook.useOrderNameAsExternalOrderId||!this.selectedWebHook.useOrderNameAsExternalOrderId)}" clicked="${this.onUseOrderNameAsExternalOrderIdChanged}"/></div>

                    <div style="display: flex;">
                      <button type="button" class="settings green" @click=${this.onSave}>Save</button>
                      <button type="button" class="settings red" @click=${this.onDelete}>Delete Webhook</button>
                    </div>
                  </form>
                `:""}
            </div>

          </div>
        </div>

        <p>
          In some very rare cases, sending (large) Shopify orders to the Printess Production Backend takes longer than the maximum allowed time that Shopify accepts for running callbacks. In these cases, Shopify marks the callback as failed and will periodically try to reexecuted the order created callback.
          On Printess side, this will result in countless production requests for the same order. To protect our customers from having to pay production costs for orders that have been already processed, we are caching all incoming order id's  and prevent reproduction for these orders for 24 hours.
          The shopify backend will recieve a success result in these cases and will stop its retry queue.
          In case you need to reproduce the same order within 24 hours, you can click on the <b>Clear Shopify order cache</b> button below, to clear the cache of already processed orders.
        </p>

        <button type="button" class="settings red" style="margin-bottom: 20px;" @click=${this.onClearCache}>Clear Shopify order cache</button>

      </div>   
    `}};__decorate$a([e$3({type:Array})],WcShopifyWebhooks.prototype,"webHooks",void 0),__decorate$a([e$3({type:Object})],WcShopifyWebhooks.prototype,"selectedWebHook",void 0),__decorate$a([e$3({type:Boolean})],WcShopifyWebhooks.prototype,"loading",void 0),WcShopifyWebhooks=__decorate$a([e$4("wc-shopify-hooks")],WcShopifyWebhooks);var __decorate$9=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcShopifyFulfillment=class extends s$1{constructor(){super(),this.settings=[],this.selectedSetting=void 0,this.loading=!1}connectedCallback(){super.connectedCallback(),location.hash="#advanced-shop-settings",this.loadShopifyFulfillmentSettings()}static get styles(){return[settingsStyles,i$4`
      * {
        color: #555555;
      }

      .card {
        background: transparent;
        margin-bottom: 70px;
        border-bottom: 2px solid var(--printess-red);
      }

      .table-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }

      .table-header div {
        color: white;
      }
      
      .table-body {
        display: flex;
        padding: 0px;
        min-height: 50vh;
      }

      form, .form {
        width: 100%;
        display: grid;
        margin-top: 10px;
        margin-bottom: 0;
        grid-template-columns: 80px calc(100% - 80px);
      }

      form div, .form div {
        display: flex;
        line-height: 25px;
        margin-left: 0;
        text-align: left;
        padding: 10px;
        align-items: center;
        /*min-width: 100px;*/
      }

      .form-input {
        color: #555;
        font-family: var(--printess-text-font);
        font-size: 14px;
        outline: none;
        border: 1px solid #ccc;
        padding: 7px 10px;
        border-radius: 4px;
        background-color: rgba(210, 0, 100, 0.04);
      }

      .form-input:not(input[type='checkbox']) {
        width: 100%;
      }

      input[type="file"] {
        display: none;
      }

      .file-upload-wrapper {
        display: flex;
        align-items: center;
        padding: 0px;
        width: calc(100% - 140px);
      }

      .upload-button, .custom-file-upload {
        border: 2px solid rgb(210, 0, 100);
        background: rgb(210, 0, 100);
        padding: 2px 30px;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-family: var(--printess-button-font);
        font-size: 14px;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
      }

      .custom-file-upload {
        background: none;
        color: rgb(210, 0, 100);
        margin-right: 10px;
      }

      .custom-file-upload:hover {
        background-color: rgb(210, 0, 100);
        color: white;
      }

      .upload-button {
        display: flex;
        align-items: center;
        height: 33px;
      }

      .upload-button:hover {
        background-color: var(--printess-redHover);
      }

      .upload-button span {
        color: white;
      }

      #fileName {
        display: inline-block;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0px;
        margin-right: 10px;
      }

      .control {
        width: 100%;
        display: grid;
        grid-template-columns: 200px 1fr;
      }

      .menu {
        height: auto;
        background: var(--printess-lightred);
        border-top: 1px solid var(--printess-lightred);
      }

      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        width: calc(100% - 20px);
      }

      .menu-entry {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        font-size: 14px;
        border-bottom: 1px solid #f0b6ce;
      }

      .menu-entry:hover {
        color: #fff;
        background-color: var(--printess-red);
        cursor: pointer;
      }

      .new-entry {
        color: var(--printess-red);
      }
      .new-entry:hover {
        color: #fff;
      }

      .selected { 
        color: #fff;
        background-color: var(--printess-red);
      }
      .selected:hover {
        cursor: default;
      }

      .plus-icon {
        margin-right: 10px;
        fill: var(--printess-red);
      }
      .menu-entry:hover .plus-icon, .menu-entry.selected .plus-icon {
        fill: var(--printess-lightred);
      }

      .directory-url {
        margin-bottom: 10px;
        line-break: anywhere;
      }
      .directory-url p {
        margin: 5px 0px;
        font-weight: 700;
      }
      .directory-url div {
        font-size: 12px;
      }

      .settings {
        padding: 7px 20px;
        margin: 10px 10px 0px 0px;
      }

      .settings.green {
        background-color: var(--printess-green);
      }
      .settings.red {
        background-color: var(--printess-red);
      }
      
      .spinner,
      .spinner:after {
        border-radius: 50%;
        width: 2em;
        height: 2em;
        min-width: 2em;
        padding: 2px;
      }
      .spinner {
        font-size: 6px;
        position: relative;
        border-top: 0.5em solid rgba(255,255,255, 0.2);
        border-right: 0.5em solid rgba(255,255,255, 0.2);
        border-bottom: 0.5em solid rgba(255,255,255, 0.2);
        border-left: 0.5em solid #ffffff;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: load8 1.1s infinite linear;
        animation: load8 1.1s infinite linear;
        margin-right: 10px;
      }
      @-webkit-keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }
      @keyframes load8 {
        0% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      .texturePreviewImg {
        background-size: cover;
        width: 20px;
        height: 20px;
        margin-left: 5px;
        display: inline-block;
        border: 1px solid black;
      }

      .modelInfoHeader a {
        display:inline-block;
        vertical-align: middle;
      }

    `]}setSelectedWebhook(e){this.selectedSetting=e}resetLoading(){this.loading=!1;this.setSelectedWebhook({apiAccessToken:"",internalShopifyHostname:""})}async loadShopifyFulfillmentSettings(e=null){this.loading=!0;const t=await api.loadShopifyFulfillmentSetting();if(t instanceof ServerErrorResponse$2)return void alert(t.message);this.settings=t;let o=null;if(t.length>0&&(o=t[0],e)){const r=t.filter(t=>t.internalShopifyHostname===e);r.length>0&&(o=r[0])}o&&this.setSelectedWebhook(o),this.loading=!1}onInternalDomainChanged(e){this.selectedSetting&&(this.selectedSetting.internalShopifyHostname=e.target.value)}onAccessKeyChanged(e){this.selectedSetting&&(this.selectedSetting.apiAccessToken=e.target.value)}async onSave(e){if(this.selectedSetting){const e=await api.saveShopifyFulfillmentSetting(this.selectedSetting);e instanceof ServerErrorResponse$2?alert(e.message):await this.loadShopifyFulfillmentSettings(this.selectedSetting.internalShopifyHostname)}}onDelete(e){if(this.selectedSetting){new WcDialogConfirmRemoval(this.selectedSetting.internalShopifyHostname?this.selectedSetting.internalShopifyHostname:(this.selectedSetting?.internalShopifyHostname||"").toString(),"Access Key").showDialog(async e=>{if("sure"!==e||!this.selectedSetting)return;const t=await api.deleteShopifyFulfillmentSetting(this.selectedSetting);t instanceof ServerErrorResponse$2?alert(t.message):await this.loadShopifyFulfillmentSettings()})}}render(){const e=x`<div>${this.selectedSetting&&this.selectedSetting.internalShopifyHostname}</div>`,t=x`<div><input type="text" name="hostname" class="form-input" .value="${this.selectedSetting&&this.selectedSetting.internalShopifyHostname?this.selectedSetting.internalShopifyHostname:""}" @input="${this.onInternalDomainChanged}"/></div>`;return x`
      <h3 class="topic">Shopify Fulfillment Access Keys</h3>
      <p style="font-size: 14px;">
        Here you can configure your shopify fulfillment access keys.
      </p>


      <div class="card red">

        <div class="table-header" style="background: var(--printess-red)">
          <h3 class="title">
            <div>Access Keys</div>
          </h3>
          <wc-icon icon="plus" primaryColor="head-toolbar" style="margin-right: 20px; cursor: pointer;" @click=${()=>this.resetLoading()}></wc-icon>
        </div>

        <div class="table-body">
          <div class="control">

            <div class="menu">
              ${c(this.settings.sort((e,t)=>(e.internalShopifyHostname||"").localeCompare(t.internalShopifyHostname||"")),e=>e.internalShopifyHostname,e=>x`
              <div class="${o({"menu-entry":!0,selected:this.selectedSetting?.internalShopifyHostname===e.internalShopifyHostname})}" @click=${()=>this.setSelectedWebhook(this.settings.filter(t=>t.internalShopifyHostname===e.internalShopifyHostname)[0])}>${e.internalShopifyHostname?e.internalShopifyHostname:""}</div>
              `)}

              <div class="${o({"menu-entry":!0,"new-entry":!0,selected:!this.selectedSetting})}" @click=${()=>this.resetLoading()}>
                <wc-icon icon="plus" primaryColor="light" class="plus-icon"></wc-icon>
                Create new Key
              </div>
            </div>

            <div class="content">
              ${this.selectedSetting?x`
                  <form id="theForm">
                    <div>Internal Shopify domain</div>
                    ${this.selectedSetting.internalShopifyHostname?e:t}


                    <div>Shopify app access token</div>
                    <div><input type="text" name="apiAccessToken" class="form-input" .value="${this.selectedSetting.apiAccessToken||""}" @input="${this.onAccessKeyChanged}"/></div>

                    <div style="display: flex;">
                      <button type="button" class="settings green" @click=${this.onSave}>Save</button>
                      <button type="button" class="settings red" @click=${this.onDelete}>Delete Entry</button>
                    </div>
                  </form>
                `:""}
            </div>

          </div>
        </div>

      </div>   
    `}};__decorate$9([e$3({type:Array})],WcShopifyFulfillment.prototype,"settings",void 0),__decorate$9([e$3({type:Object})],WcShopifyFulfillment.prototype,"selectedSetting",void 0),__decorate$9([e$3({type:Boolean})],WcShopifyFulfillment.prototype,"loading",void 0),WcShopifyFulfillment=__decorate$9([e$4("wc-shopify-fulfillment")],WcShopifyFulfillment);var __decorate$8=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAdvancedSettingsShop=class extends s$1{constructor(){super(...arguments),this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[userProfileStyles,settingsStyles]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),location.hash="#advanced-shop-settings"}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}render(){return x`
      <div class="settings-page">
        <wc-proof-settings></wc-proof-settings>
        <wc-shopify-hooks></wc-shopify-hooks>
        <wc-shopify-fulfillment></wc-shopify-fulfillment>
      </div>
    `}};WcAdvancedSettingsShop=__decorate$8([e$4("wc-advanced-settings-shop")],WcAdvancedSettingsShop);var __decorate$7=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let thumbWidth=140,thumbHeight=70;const captionHeight=20;function hasKeywordPart(e,t){for(const o of e)if(o.includes(t))return!0;return!1}const dialogStyles=css`
  :host, :host * {
    box-sizing: border-box;
  }
  :host  {
    position: absolute;
    background-color: var(--printess-panelBackground);
    box-shadow: black 0 0 10px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: auto;
    max-height: 100vh;
    max-width: 100vw;

    font-size: var(--printess-textSize);
    color:  var(--printess-textColor);

    display: grid;
    width: -moz-fit-content;
    width: fit-content;
    grid-template-rows: 1fr auto;
    z-index: 100;
}

  .content {
    padding: var(--printess-dialog-padding);
    overflow: auto;
  }

  h1 {
    font-size: var(--printess-headlineSize);
    color: white;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-family: var(--printess-header-font);
    font-weight: normal;
  }

  p {
    font-size: var(--printess-textSize);
    line-height: 1.4;
    color: var(--printess-textColor);
    margin-top: 10px;
    margin-bottom: 20px;
  }

  p > b {
    color: var(--printess-headlineColor);
  }
`;let WcDialogBookSnippetSetup=class extends LitElement{constructor(){super(),this.themeName="baby",this.themeTags=[],this.searchTags=[],this.backgroundTags=[],this.stickerTags=[],this.textStickerTags=[],this.photoStickerTags=[],this.allLayoutTags=[],this.filtering="show-all-themes",this.wizard="show-ai-and-freestyle",this.assignSinglePhoto="not-on-landscape",this.themeSnippets=[],this.themeKeywords=[],this.themeKeyword="ALL",this.searchSnippets=[],this.searchKeywords=[],this.searchKeyword="ALL",this.backgroundSnippets=[],this.backgroundKeywords=[],this.backgroundKeyword="ALL",this.stickers=[],this.stickerKeywords=[],this.stickerKeyword="ALL",this.stickerMenuId="",this.textStickers=[],this.textStickerKeywords=[],this.textStickerKeyword="ALL",this.textStickerMenuId="",this.photoStickers=[],this.photoStickerKeywords=[],this.photoStickerKeyword="ALL",this.photoStickerMenuId="",this.keywordMenus=[],this.pageCount=28,this.allowSaveAs=!0,this.backgroundSnippet=null,this.pageSetup=[],this.hasThemeLayoutsCover=!1,this.hasThemeLayoutsSingle=!1,this.hasThemeLayoutsDouble=!1,this.hasThemeLayoutsBackground=!1,this.initialLoading=!0,this.getValidName=e=>null,this.selectedTags=null,this.lastFillIndex=0,this._tagMode="theme-tags",this.isUploading=!1,this.dragged=null,this.backdrop=new WcBackdrop}async loadMenuKeys(){const e=await api.readUserSettings({keys:["topicUiMenus"]});e instanceof ServerErrorResponse$2?console.error("Can't load keyword menus",e):e.topicUiMenus&&(this.keywordMenus=JSON.parse(e.topicUiMenus),this.keywordMenus=this.keywordMenus.filter(e=>e.k),this.keywordMenus.unshift({n:"*** Leave Unchanged ***",k:""}))}async showDialog(e,t,o,r){this.callback=o,this.allowSaveAs=t,this.searchTags=e.searchTags??[],this.themeTags=e.themeTags,this.backgroundTags=e.backgroundTags??["printess-background"],this.backgroundSnippet=e.backgroundSnippet??null,this.stickerTags=e.stickerTags??[],this.stickerMenuId=e.stickerMenuId??"",this.textStickerTags=e.textStickerTags??[],this.textStickerMenuId=e.textStickerMenuId??"",this.photoStickerTags=e.photoStickerTags??[],this.photoStickerMenuId=e.photoStickerMenuId??"",this.pageCount=e.pageCount??28,this.pageSetup=e.pageSetup??[],this.name=e.name,this.newName="",this.keywords=e.keywords,this.thumb=e.thumb,this.allLayoutTags=await this.loadLayoutTags(),this.filtering=e.filtering??"show-all-themes",this.wizard=e.wizard??"show-ai-and-freestyle",this.assignSinglePhoto=e.assignSinglePhoto??"not-on-landscape",this.hasThemeLayoutsBackground=e.hasThemeLayoutsBackground??!1,this.hasThemeLayoutsCover=e.hasThemeLayoutsCover??!1,this.hasThemeLayoutsDouble=e.hasThemeLayoutsDouble??!1,this.hasThemeLayoutsSingle=e.hasThemeLayoutsSingle??!1,this.getValidName=r,this._tagMode="theme-tags",document.body.appendChild(this.backdrop),document.body.appendChild(this),await this.loadMenuKeys(),await this.reloadSnippets(),await this.populate(),this.initialLoading=!1,this.requestUpdate()}getCallbackParams(){return{thumb:this.thumb,pageCount:this.pageCount,themeTags:this.themeTags,searchTags:this.searchTags,backgroundTags:this.backgroundTags,stickerTags:this.stickerTags,stickerMenuId:this.stickerMenuId,textStickerTags:this.textStickerTags,textStickerMenuId:this.textStickerMenuId,photoStickerTags:this.photoStickerTags,photoStickerMenuId:this.photoStickerMenuId,backgroundSnippet:this.backgroundSnippet,keywords:this.keywords,filtering:this.filtering,wizard:this.wizard,assignSinglePhoto:this.assignSinglePhoto,pageSetup:this.pageSetup,hasThemeLayoutsBackground:this.hasThemeLayoutsBackground,hasThemeLayoutsCover:this.hasThemeLayoutsCover,hasThemeLayoutsDouble:this.hasThemeLayoutsDouble,hasThemeLayoutsSingle:this.hasThemeLayoutsSingle}}async loadLayoutTags(){const e=await api.loadSnippetTags(!0);return e instanceof ServerErrorResponse$2?(alert(e.message),[]):e.map(e=>e.tag)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}async saveAs(){let e=null,t=this.name;for(;!e;){if(e=prompt("Please enter new theme name.",t??""),!e)return;e=this.getValidName(e),e||(alert("Name already exists!"),t=e??this.name)}e&&this.callback&&(this.callback(!0,e,this.getCallbackParams()),this.closeDialog())}async ok(){if(this.callback){let e=this.name;if(this.newName&&this.name!==this.newName){if(e=this.getValidName(this.newName),!e)return void alert("New name is empty. May only contain chars and numbers.");if(!e)return void alert("New name ["+e+"] already exists.")}if(this.pageSetup.filter(e=>!e.snippet).length)return void alert("Please assign a default layout to every page.");if(0===this.themeTags.length)return void alert("Please assign at least one theme tag.");this.callback(!1,e,this.getCallbackParams())}this.closeDialog()}static get styles(){return[dialogStyles,css`
    :host  {
      width: 95vw;
      height: 95vh;
      background-color: var(--printess-panelBackground);
    }
    .loading {
      height: 100%;
      font-size: 16px;
      font-family: var(--printess-header-font);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .custom-content {
      width: 95vw;
      height: 95vh;
      background: white;
      font-family: var(--printess-header-font);
      display: grid;
      grid-template-rows: auto 1fr auto;
      position: relative;
    }

    .footer {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto auto auto;
    column-gap: calc(var(--printess-dialog-padding) / 2);
    padding: var(--printess-dialog-padding);
    border-top: 1px solid var(--printess-textColorDisabled);

      background: var(--printess-pink);

    }

    button {cursor: pointer;}

  .header {

    display: grid;
    grid-template-columns: 1fr 1fr;

    min-height: 207px;
    border-top: 50px solid var(--printess-pink);
    background-color: var(--printess-doalog-background);
    color: white;

  }
  .headline {
    font-family: var(--printess-header-font);
    position: absolute;
    left: 10px;
    top: 10px;
    margin: 0;
    padding: 0;
    z-index: 1;
  }

  select {
    font-size: 12px;
  }

  .headline > input {
    font-size: 20px; width: 250px;
    background: #ffffffaa;
    border: none;
    padding: 3px 6px;
  }
  .headline > span {
    font-size: 20px;
    padding-right: 10px;
  }
  .header-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px;
    background: #eee;
    gap: 10px;
  }

  .header-right {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 10px;
    padding: 10px;
    background-color: #666;
  }

  input-wrapper {
    margin: 0;
  }
  .theme-thumb {
    width: 100px;
    height: 100px;
    background-color: gray;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    margin-top: 16px;
  }
  .bg-thumb {
    width: 100px;
    height: 60px;
    background-color: gray;
    color:  white;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    position: relative;
  }
  .bg-thumb-delele {
    position: absolute;
    right: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
    .layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .snippets-wrapper {
      height: 115px;
      padding: 10px;
      overflow-y: scroll;
      overflow-x: none;
      width: 100%;
      height: 100%;
      position: relative;
      border-right: 1px solid var(--printess-path-editor-disabled-path-color);
    }
    .book-wrapper {
      height: 400px;
      padding: 10px;
      overflow-x: hidden;
      overflow-y: scroll;
      width: 100%;
      height: 100%;
      position: relative;
      background: #444;
    }
    .table {
      display: flex;
      flex-wrap: wrap;
      column-gap: 6px;
      width: 100%;
      height: auto;
      row-gap: 10px;
    }
    .table-keywords {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    .table-keywords > div {
      background-color: #ddd;
      padding: 3px 7px;
      font-size: 11px;
      border-radius: 3px;
      color: black;
      cursor: pointer;
     }
     .table-keywords > div.selected {
      background-color: var(--printess-pink);
      color: white;
     }
    .spacer {
      width: 10px;
    }



    .fixed {
      align-self: center;
      justify-self: center;
      font-size: 14px;
    }
   /* .thumb-wrapper {
      width: ${thumbWidth}px;
      height: ${thumbHeight+20}px;
      display: grid;
      grid-template-rows: ${thumbHeight}px ${20}px;
      grid-template-columns: ${thumbWidth}px;
      border: 1px solid transparent
    }

    .thumb-wrapper.single,
    .thumb-wrapper.cover {
      width: ${thumbWidth/2}px;
      grid-template-columns: ${thumbWidth/2}px;
    }
     .thumb-wrapper.selected {
      border: 1px solid var(--printess-headlineColor);
     }

     .thumb-wrapper.double {
      margin: 0 3px;
     }

     .thumb-wrapper.drag-over > * {
      background-color: var(--printess-headlineColor) !important;
     }

    .thumb {
      position: relative;
      width: ${thumbWidth}px;
      height: ${thumbHeight}px;
      overflow: hidden;
      border: 1px solid var(--printess-greenHover);
    }
    .thumb-wrapper.cover .thumb {
      border-color: var(--printess-magentaHover);
    }
    .thumb-wrapper.cover .thumb,
    .thumb-wrapper.single .thumb {
      width: ${thumbWidth/2}px;
      border-color: var(--printess-blueHover);
    } */

    .snippets-wrapper .thumb {
      cursor: grab;
    }


    .snippets-wrapper .thumb-wrapper:hover .thumb {
        border: 1px solid var(--printess-headlineColor);
    }

    .thumb-caption {
      font-size: 11px;
      text-overflow: clip;
      background-color: var(--printess-greenHover);
      color: white;
      text-align: center;
      line-height: 20px;
    }

    .thumb-caption.inside {
        background-color: var(--printess-keywords);
    }
    .thumb-caption.cover {
        background-color: var(--printess-magentaHover);
    }
     .thumb-caption.single {
        background-color: var(--printess-blueHover);
    }

    /*
    .thumb-wrapper.cover .thumb-caption,
    .thumb-wrapper.single .thumb-caption {
      width: ${thumbWidth/2}px;
    }
*/
    .thumb-wrapper.selected > .thumb-caption {
       background-color:var(--printess-headlineColor);
    }


     .tab-thumb {
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        background-position: center center;
      }
      .table.book .tab-thumb {
          background-size: cover;
      }
      .tab-thumb.sticker {
         background-size: contain;
      }

      #pages-input {
        padding: 3px;
        width: 90px;
        border-radius: 3px;
        background: white;
        height: 27px;
        border: 1px solid var(--printess-lightpink);
      }

      .book-setup-button {
        background: white;
        border: none;
        padding: 20px;
        border-radius: 3px;
        height: 50px;
        display: flex;
        align-items: center;
      }

      .info-container {
        color: #666;
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
      .info-container p {
        font-size: 11px;
        color: black;
        margin: 0;
        padding: 0;
      }

      .info-container code {
        font-size: 12px;
        border-color: var(--printess-green);
        background-color: var(--printess-green);
        color: white;
        border-radius: 3px;
        padding: 2px 5px 2px 5px;
        font-family: var(--printess-header-font);
      }
      .button-bar {
        color: #666;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
      }
      .button-bar button {
        background-color: white;
        border: 1px solid #666;
        border-radius: 3px;
        padding: 4px 6px;
        cursor: pointer;
        font-size: 14px;
      }

      .button-bar button.selected {
        background-color: var(--printess-pink);
        color: white;
      }

      .clickable {
        border-radius: 5px;
      }

      .theme-select {
        width: 145px;
      }

    `]}serialize(){return{st:this.searchTags,pc:this.pageCount,ps:this.pageSetup}}async loadLayouts(e,t=[]){const o=await api.loadLayoutSnippets(e,t,void 0,void 0,!0);return o instanceof ServerErrorResponse$2?(console.error("["+o.code+"] "+o.message),[]):o||[]}async loadSticker(e,t=[]){const o=await api.loadStickerSnippets(e,t,void 0,!0);return o instanceof ServerErrorResponse$2?(console.error("["+o.code+"] "+o.message),[]):o||[]}async populate(e="read"){const t=this.getSnippets(!0);"clear"===e&&(this.pageSetup=[]);const o=[];let r=0,i=1;if(o.push({snippet:this.pageSetup[0]?.snippet??("fill"===e?this.getFillSnippet(t,"cover"):null),type:"cover"}),!this.thumb||this.thumb.endsWith("default.svg")){const e=o[0].snippet;e&&(this.thumb=e.thumb)}for(;r<this.pageCount;)if(0===r){let a=this.pageSetup[1]?.snippet??null;a||"fill"!==e||(a=this.getFillSnippet(t,"single")),o.push({snippet:a,type:"single"}),r++,i++}else if(r===this.pageCount-1){let a=this.pageSetup[this.pageSetup.length-1]?.snippet??null;a||"fill"!==e||(a=this.getFillSnippet(t,"single")),o.push({snippet:a,type:"single"}),r++,i++}else{let a=this.pageSetup[i];"double"===a?.type&&a.snippet?o.push({snippet:a.snippet,type:"double"}):o.push({snippet:"fill"===e?this.getFillSnippet(t,"double"):null,type:"double"}),r+=2,i++}this.pageSetup=o}getFillSnippet(e,t){for(let o=0;o<2;o++){for(let o=this.lastFillIndex;o<e.length;o++){const r=e[o];if(r.type===t)return this.lastFillIndex=o+1,r}this.lastFillIndex=0}return null}getAvailableSnippets(e){const t=[],o=[],r=[],i=new Set;for(const a of e){const e=a.metadata?.keywords;if(e){const s=hasKeywordPart(e,"cover")?"cover":hasKeywordPart(e,"single-page")?"single":hasKeywordPart(e,"double-page")?"double":null;if(s){const n={id:a.id,docId:a.docId,snippetUrl:a.snippetUrl,thumb:a.imageUrl,keywords:e,type:s,global:a.isGlobal,editables:a.metadata?.editables};switch(e.forEach(e=>i.add(e)),s){case"cover":t.push(n);break;case"single":r.push(n);break;case"double":o.push(n)}}}}return{snippets:[...t,...r,...o],keywords:Array.from(i)}}getAvailableBackgrounds(e){const t=[],o=new Set;for(const r of e){const e=r.metadata?.keywords;if(e&&hasKeywordPart(e,"background")){const i={id:r.id,docId:r.docId,snippetUrl:r.snippetUrl,thumb:r.imageUrl,keywords:e,type:"background",global:r.isGlobal,editables:void 0};t.push(i),e.forEach(e=>o.add(e))}}return{snippets:t,keywords:Array.from(o)}}getAvailableStickers(e){const t=[],o=new Set;for(const r of e){const e=r.metadata?.keywords;if(e?.length){const i={id:r.id,docId:r.docId,snippetUrl:r.snippetUrl,thumb:r.imageUrl,keywords:e,type:"sticker",global:r.isGlobal,editables:void 0};t.push(i),e.forEach(e=>o.add(e))}}return{snippets:t,keywords:Array.from(o)}}setThemeLayoutsFlags(e){this.hasThemeLayoutsBackground=!1,this.hasThemeLayoutsCover=!1,this.hasThemeLayoutsDouble=!1,this.hasThemeLayoutsSingle=!1;for(const t of e){const e=t.metadata?.keywords;e&&(!this.hasThemeLayoutsCover&&hasKeywordPart(e,"cover-design")&&(this.hasThemeLayoutsCover=!0),!this.hasThemeLayoutsBackground&&hasKeywordPart(e,"background-design")&&(this.hasThemeLayoutsBackground=!0),!this.hasThemeLayoutsSingle&&hasKeywordPart(e,"single-page-design")&&(this.hasThemeLayoutsSingle=!0),!this.hasThemeLayoutsDouble&&hasKeywordPart(e,"double-page-design")&&(this.hasThemeLayoutsDouble=!0))}}get tagMode(){return this._tagMode}set tagMode(e){this.tagMode!==e&&(this._tagMode=e,this.reloadSnippets())}async reloadSnippets(){switch(this.tagMode){case"theme-tags":{const e=this.themeTags.length?await this.loadLayouts(this.themeTags):[],t=this.getAvailableSnippets(e);this.themeSnippets=t.snippets,this.themeKeywords=["ALL",...t.keywords.sort()],t.keywords.includes(this.themeKeyword)||(this.themeKeyword="ALL"),this.setThemeLayoutsFlags(e);break}case"search-tags":{const e=this.themeTags.length?await this.loadLayouts(this.searchTags):[],t=this.getAvailableSnippets(e);this.searchSnippets=t.snippets,this.searchKeywords=["ALL",...t.keywords.sort()],t.keywords.includes(this.searchKeyword)||(this.searchKeyword="ALL");break}case"background-tags":{const e=this.themeTags.length?await this.loadLayouts([...this.backgroundTags,...this.themeTags]):[],t=this.getAvailableBackgrounds(e);this.backgroundSnippets=t.snippets,this.backgroundKeywords=["ALL",...t.keywords.sort()],t.keywords.includes(this.backgroundKeyword)||(this.backgroundKeyword="ALL");break}case"sticker-tags":{const e=this.stickerTags.length?await this.loadSticker(this.stickerTags):[],t=this.getAvailableStickers(e);this.stickers=t.snippets,this.stickerKeywords=["ALL",...t.keywords.sort()],t.keywords.includes(this.stickerKeyword)||(this.stickerKeyword="ALL");break}case"text-sticker-tags":{const e=this.textStickerTags.length?await this.loadSticker(this.textStickerTags):[],t=this.getAvailableStickers(e);this.textStickers=t.snippets,this.textStickerKeywords=["ALL",...t.keywords.sort()],t.keywords.includes(this.textStickerKeyword)||(this.textStickerKeyword="ALL");break}case"photo-sticker-tags":{const e=this.photoStickerTags.length?await this.loadSticker(this.photoStickerTags):[],t=this.getAvailableStickers(e);this.photoStickers=t.snippets,this.photoStickerKeywords=["ALL",...t.keywords.sort()],t.keywords.includes(this.photoStickerKeyword)||(this.photoStickerKeyword="ALL");break}}}selectKeywordMenuSticker(e){const t=this.keywordMenus.filter(t=>t.n===e)[0];this.stickerMenuId=t.k}selectKeywordMenuTextSticker(e){const t=this.keywordMenus.filter(t=>t.n===e)[0];this.textStickerMenuId=t.k}selectKeywordMenuPhotoSticker(e){const t=this.keywordMenus.filter(t=>t.n===e)[0];this.photoStickerMenuId=t.k}render(){return this.initialLoading?html`<div class="loading">Loading ...</div>`:html`

    <style>

      .thumb-wrapper {
        width: ${thumbWidth}px;
        height: ${thumbHeight+20}px;
        display: grid;
        grid-template-rows: ${thumbHeight}px ${20}px;
        grid-template-columns: ${thumbWidth}px;
        border: 1px solid transparent
      }

      .thumb-wrapper.single,
      .thumb-wrapper.cover {
        width: ${thumbWidth/2}px;
        grid-template-columns: ${thumbWidth/2}px;
      }
      .thumb-wrapper.selected {
        border: 1px solid var(--printess-headlineColor);
      }

      .thumb-wrapper.double {
        margin: 0 3px;
      }

      .thumb-wrapper.drag-over > * {
        background-color: var(--printess-headlineColor) !important;
      }

      .thumb {
        position: relative;
        width: ${thumbWidth}px;
        height: ${thumbHeight}px;
        overflow: hidden;
        border: 1px solid var(--printess-greenHover); /* rgba(0,0,0,0.5); */
      }
      .thumb-wrapper.cover .thumb {
        border-color: var(--printess-magentaHover);
      }
      .thumb-wrapper.cover .thumb,
      .thumb-wrapper.single .thumb {
        width: ${thumbWidth/2}px;
        border-color: var(--printess-blueHover);
      }
      .thumb-wrapper.cover .thumb-caption,
      .thumb-wrapper.single .thumb-caption {
        width: ${thumbWidth/2}px;
      }
      .thumb-caption {
        width: ${thumbWidth}px;
        height: ${20}px;
      }
    </style>

    <div class="headline">
      <span style="font-size: 20px; padding-right: 10px;">Photobook Theme:</span>
      <input type="text" value="${this.newName||this.name}" @input=${e=>this.newName=e.target?.value??""} />
    </div>

    <div class="headline" style="left:calc(10px + 50%);">
      <span>Freestyle Page Setup:</span>
    </div>

    <div class="custom-content">

      <div class="header">


        <div class="header-left">
          <div class="info-container">
            <div class="button-bar" style="margin-bottom: 5px;">
              <button class="${"theme-tags"===this.tagMode?"selected":""}" @click=${()=>this.tagMode="theme-tags"}>Theme Tags</button>
              <button class="${"search-tags"===this.tagMode?"selected":""}" @click=${()=>this.tagMode="search-tags"}>Search Tags</button>
              <button class="${"background-tags"===this.tagMode?"selected":""}" @click=${()=>this.tagMode="background-tags"}>Background</button>
            </div>
            <div class="button-bar">
              <button style="font-size: 11px;" class="${"sticker-tags"===this.tagMode?"selected":""}" @click=${()=>this.tagMode="sticker-tags"}>#STICKERS</button>
              <button style="font-size: 11px;" class="${"text-sticker-tags"===this.tagMode?"selected":""}" @click=${()=>this.tagMode="text-sticker-tags"}>#TEXT Stickers</button>
              <button style="font-size: 11px;" class="${"photo-sticker-tags"===this.tagMode?"selected":""}" @click=${()=>this.tagMode="photo-sticker-tags"}>#PHOTOS Stickers</button>
            </div>
             ${"theme-tags"===this.tagMode?html`
                <p><strong>Theme-Tags</strong> loads all layout-snippets for creating a photobook in AI-mode. It shows only snippets which have keywords starting with <code>single-page</code>, <code>double-page</code> or <code>cover</code> </p>

             `:"search-tags"===this.tagMode?html`

                <p><strong>Search-Tags</strong> are only for setting up the freestyle layout. It shows only snippets which have keywords starting with <code>single-page</code>, <code>double-page</code> or <code>cover</code> </p>


             `:"background-tags"===this.tagMode?html`
                <div style="display: grid; grid-template-columns: auto 1fr; gap: 10px;">
                  ${this.backgroundSnippet?html`
                    <div class="bg-thumb" style="background-image: url(${this.backgroundSnippet?.thumb});">
                      <wc-icon class="bg-thumb-delele" @click=${()=>this.backgroundSnippet=null} primaryColor="red" icon="trash"></wc-icon>
                    </div>

                  `:html`
                    <div class="bg-thumb" >[No Background]</div>
                  `}

                  <p>Shows only snippets which have the <code>background</code> keyword. To assign, simply click on the snippet below.</p>
                </div>

              `:"sticker-tags"===this.tagMode?html`
                <div style="display: grid; grid-template-rows: auto auto;">
                  <h5 style="margin: 0 0 5px 0;">#STICKERS Keyword Menu</h5>
                  <div>
                    <select style="padding: 5px" @change=${e=>this.selectKeywordMenuSticker(e.target.value)}>
                      ${this.keywordMenus.map(e=>html`
                        <option value=${e.n} .selected=${this.stickerMenuId===e.k}>${e.n}</option>
                      `)}
                    </select>
                  </div>
                </div>
              `:"text-sticker-tags"===this.tagMode?html`
                <div style="display: grid; grid-template-rows: auto auto;">
                  <h5 style="margin: 0 0 5px 0;">#TEXT Sticker Keyword Menu</h5>
                  <div>
                    <select style="padding: 5px" @change=${e=>this.selectKeywordMenuTextSticker(e.target.value)}>
                      ${this.keywordMenus.map(e=>html`
                        <option value=${e.n} .selected=${this.textStickerMenuId===e.k}>${e.n}</option>
                      `)}
                    </select>
                  </div>
                </div>
              `:"photo-sticker-tags"===this.tagMode?html`
                <div style="display: grid; grid-template-rows: auto auto;">
                  <h5 style="margin: 0 0 5px 0;">#PHOTOS Sticker Keyword Menu</h5>
                  <div>
                    <select style="padding: 5px" @change=${e=>this.selectKeywordMenuPhotoSticker(e.target.value)}>
                      ${this.keywordMenus.map(e=>html`
                        <option value=${e.n} .selected=${this.photoStickerMenuId===e.k}>${e.n}</option>
                      `)}
                    </select>
                  </div>
                </div>
              `:html``}
          </div>
          <div class="input-wrapper">
            ${"theme-tags"===this.tagMode?html`
              <wc-universal-tag-list
                class="clickable"
                tagtype="layout-tags"
                placeholder="Theme Tags (AI Creation)"
                .selectedtags=${this.themeTags}
                @tagsChanged=${e=>this.setThemeTags([...e.detail])}
              ></wc-universal-tag-list>
            `:"search-tags"===this.tagMode?html`
              <wc-universal-tag-list
                class="clickable"
                tagtype="layout-tags"
                placeholder="Search Tags (Freestyle Setup)"
                .selectedtags=${this.searchTags}
                @tagsChanged=${e=>this.setSearchTags([...e.detail])}
              ></wc-universal-tag-list>
           `:"background-tags"===this.tagMode?html`
              <wc-universal-tag-list
                class="clickable"
                tagtype="layout-tags"
                placeholder="Background Tags"
                .selectedtags=${this.backgroundTags}
                @tagsChanged=${e=>this.setBackgroundTags([...e.detail])}
              ></wc-universal-tag-list>
            `:"sticker-tags"===this.tagMode?html`
              <wc-universal-tag-list
                class="clickable"
                tagtype="group-tags"
                placeholder="Sticker Tags"
                .selectedtags=${this.stickerTags}
                @tagsChanged=${e=>this.setStickerTags([...e.detail])}
              ></wc-universal-tag-list>
            `:"text-sticker-tags"===this.tagMode?html`
              <wc-universal-tag-list
                class="clickable"
                tagtype="group-tags"
                placeholder="Text Sticker Tags"
                .selectedtags=${this.textStickerTags}
                @tagsChanged=${e=>this.setTextStickerTags([...e.detail])}
              ></wc-universal-tag-list>
            `:"photo-sticker-tags"===this.tagMode?html`
              <wc-universal-tag-list
                class="clickable"
                tagtype="group-tags"
                placeholder="Photo Sticker Tags"
                .selectedtags=${this.photoStickerTags}
                @tagsChanged=${e=>this.setPhotoStickerTags([...e.detail])}
              ></wc-universal-tag-list>
            `:html`Tag Mode Not found: ${this.tagMode}`}
          </div>
        </div>



        <div class="header-right">

          <label class="form-field image-upload-section">

            <input id="imageUpload" type="file" accept="image/*" name="thumbnail" style="visibility: hidden; position: absolute;"
            @change=${this.handleImageUpload} ?disabled=${this.isUploading}>
              ${this.isUploading?html`<div class="upload-status">Uploading...</div>`:html`<div class="theme-thumb" style="background-image: url(${this.thumb});"
                @dragenter=${e=>this.dragEnter(e,-1)}
                @dragleave=${e=>this.dragLeave(e,-1)}
                @dragover=${e=>this.dragOver(e)}
                @drop=${e=>this.handleDrop(e,-1)}
        ></div>`}
          </label>

          <div class="input-wrapper" style="display: flex;flex-direction: column; justify-content: center; justify-items: start; align-items: start;">
            <label style="font-size: var(--printess-labelSize); display: grid; grid-template-columns: 130px auto;">
              <div style="margin-bottom: 5px;" >Freestyle Page Count<br>(without Cover)</div>
              <input id="pages-input" style="font-size: 13px;"
                  @change=${()=>this.setPages()} .value=${this.pageCount.toString()} type="number" min="4" max="200" step="4" />
            </label>
            <label style="font-size: var(--printess-labelSize); padding-top: 5px; display: grid; grid-template-columns: 130px auto;">
              <div style="margin-bottom: 5px;" ><strong>Filter</strong> Available<br>Book Themes</div>
               <select class="theme-select" id="themeFiltering" @change="${this.onThemeFilteringChange}">
                  <option value="show-all-themes" .selected=${"show-all-themes"===this.filtering}>Show All Themes</option>
                  <option value="hide-theme-selection" .selected=${"hide-theme-selection"===this.filtering}>Hide Theme Selection</option>
                  <option value="use-theme-keywords" .selected=${"use-theme-keywords"===this.filtering}>Filter by Keywords</option>
                </select>
           </label>
           <label style="font-size: var(--printess-labelSize); padding-top: 5px; display: grid; grid-template-columns: 130px auto;">
              <div style="margin-bottom: 5px;" >Photobook<br><strong>Wizard</strong> Mode</div>
               <select class="theme-select" id="themeWizard" @change="${this.onThemeWizardChange}">
                  <option value="show-ai-and-freestyle" .selected=${"show-ai-and-freestyle"===this.wizard}>AI and Freestyle</option>
                  <option value="show-only-ai" .selected=${"show-only-ai"===this.wizard}>Only AI wizard</option>
                  <option value="show-only-freestyle" .selected=${"show-only-freestyle"===this.wizard}>Only Freestyle</option>
                </select>
           </label>
           <label style="font-size: var(--printess-labelSize); padding-top: 5px; display: grid; grid-template-columns: 130px auto;">
              <div style="margin-bottom: 5px;" >Assign Single Photos<br>per Spread</div>
               <select class="theme-select" id="themeSinglePhoto" @change="${this.onAssignSinglePhotoChange}">
                  <option value="always" .selected=${"always"===this.assignSinglePhoto}>always</option>
                  <option value="never" .selected=${"never"===this.assignSinglePhoto}>never</option>
                  <option value="not-on-landscape" .selected=${"not-on-landscape"===this.assignSinglePhoto}>Not on Landscape</option>
                </select>
           </label>
          </div>

          <div class="input-wrapper">
            <wc-universal-tag-list
              class="clickable"
              tagtype="keywords"
              .customtags=${["neutral","travel","wedding","baby"]}
              placeholder="Add Theme Keywords ..."
              .selectedtags=${this.keywords}
              addtagsallowed
              @tagsChanged=${e=>this.setKeywords([...e.detail])}
              darkmode
            ></wc-universal-tag-list>
          </div>

        </div>

      </div>

      <div class="layout">
        <div class="snippets-wrapper">
          <div class="table">
            <div class="table-keywords">${this.getKeywords().map(e=>html`<div @click=${()=>this.setKeyword(e)} class="${e===this.getKeyword()?"selected":""}">${e}</div>`)}</div>
            ${this.getSnippets().map((e,t)=>html`
              <div class="thumb-wrapper ${e.type}" draggable="true" @click=${()=>this.backgroundSnippet=e} @dragstart=${e=>this.dragStart(t,e)}
              >
                <div class="thumb" >
                  <div class="tab-thumb ${"sticker"===e.type?"sticker":""}" style="background-image: url('${e.thumb}');" ></div>

                </div>
                <div class="thumb-caption  ${e.type}">${e.type}</div>
              </div>
            `)}
          </div>
        </div>
        <div class="book-wrapper">
          <div class="table book">
            ${this.pageSetup.map((e,t)=>html`
              <div class="thumb-wrapper ${e.type}" data-index="${t}" style="${t===this.pageSetup.length-1?"margin-right: "+thumbWidth/2+"px":""}"
                >
                <div class="thumb"
                @dragenter=${e=>this.dragEnter(e,t)}
                @dragleave=${e=>this.dragLeave(e,t)}
                @dragover=${e=>this.dragOver(e)}
                @drop=${e=>this.handleDrop(e,t)} >
                  ${e.snippet?html`
                    <div class="tab-thumb" style="background-image: url('${e.snippet.thumb}');" ></div>
                  `:""}
                </div>
                <div class="thumb-caption ${e.type}">${this.pageCaption(t)}</div>
              </div>
            `)}
          </div>

        </div>
      </div>


      <div class="footer">

        <button class="book-setup-button" @click=${this.fill} theme = "secondary" > FILL </button>
        <button class="book-setup-button" @click=${this.clear} theme = "secondary" > CLEAR </button>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3px;">
          <button style="font-size: 20px;" class="book-setup-button" @click=${()=>this.thumbSize(-20)} theme = "secondary" >-</button>
          <button style="font-size: 20px;" class="book-setup-button" @click=${()=>this.thumbSize(20)} theme = "secondary" >+</button>
        </div>

        <div></div>
        ${this.allowSaveAs?html`
          <button class="book-setup-button" @click=${this.saveAs} theme = "secondary" > SAVE AS </button>
        `:html`<div></div>`}
        <button class="book-setup-button" @click=${this.closeDialog} theme = "secondary" > CANCEL </button>
        <button class="book-setup-button" @click=${this.ok} theme = "primary" > OK </button>
      </div>

    </div>
        `}thumbSize(e){thumbHeight+e>20&&(thumbWidth+=e,thumbHeight+=e,this.populate(),this.requestUpdate())}async onThemeFilteringChange(){const e=this.themeFilteringSelect.value;this.filtering=e}async onThemeWizardChange(){const e=this.themeWizardSelect.value;this.wizard=e}async onAssignSinglePhotoChange(){const e=this.themeSinglePhotoSelect.value;this.assignSinglePhoto=e}async uploadThumbnail(e){let t;if(e.target.files&&e.target.files.length>0){this.isUploading=!0;const o=api.uploadPhotoBookThemeThumbnail(e.target.files[0]);try{t=await o}finally{this.isUploading=!1}}return t}async handleImageUpload(e){const t=e.target,o=t.files?.[0];if(!o)return;if(!o.type.startsWith("image/"))return void alert("Please select a valid image file");if(o.size>5242880)return void alert("Image size must be less than 5MB");const r=new FileReader;r.onload=e=>{this.thumb=e.target?.result,this.requestUpdate()},r.readAsDataURL(o),this.isUploading=!0,this.requestUpdate();try{const e=await this.uploadThumbnail({target:t});e?this.thumb=e:alert("Failed to upload image")}catch(e){console.error("Upload failed:",e),alert("Failed to upload image")}finally{this.isUploading=!1,this.requestUpdate()}}async fill(){await this.populate("fill"),this.requestUpdate()}async clear(){await this.populate("clear"),this.requestUpdate()}async setPages(){const e=this.shadowRoot?.querySelector("#pages-input");if(e){let t=parseInt(e.value);t>=4&&t%4==0&&(this.pageCount=t,await this.populate(),this.requestUpdate())}}getSnippets(e=!1){switch(this.tagMode){case"theme-tags":return e?this.themeSnippets.filter(e=>e.keywords.includes("double-page-basic")||e.keywords.includes("double-page-design")||e.keywords.includes("single-page-basic")||e.keywords.includes("single-page-design")||e.keywords.includes("cover-basic")||e.keywords.includes("cover-design")):this.themeSnippets.filter(e=>"ALL"===this.themeKeyword||e.keywords.includes(this.themeKeyword));case"search-tags":return this.searchSnippets.filter(e=>"ALL"===this.searchKeyword||e.keywords.includes(this.searchKeyword));case"background-tags":return this.backgroundSnippets.filter(e=>"ALL"===this.backgroundKeyword||e.keywords.includes(this.backgroundKeyword));case"sticker-tags":return this.stickers.filter(e=>"ALL"===this.stickerKeyword||e.keywords.includes(this.stickerKeyword));case"text-sticker-tags":return this.textStickers.filter(e=>"ALL"===this.textStickerKeyword||e.keywords.includes(this.textStickerKeyword));case"photo-sticker-tags":return this.photoStickers.filter(e=>"ALL"===this.photoStickerKeyword||e.keywords.includes(this.photoStickerKeyword))}}getKeywords(){switch(this.tagMode){case"theme-tags":return this.themeKeywords;case"search-tags":return this.searchKeywords;case"background-tags":return this.backgroundKeywords;case"sticker-tags":return this.stickerKeywords;case"text-sticker-tags":return this.textStickerKeywords;case"photo-sticker-tags":return this.photoStickerKeywords}}getKeyword(){switch(this.tagMode){case"theme-tags":return this.themeKeyword;case"search-tags":return this.searchKeyword;case"background-tags":return this.backgroundKeyword;case"sticker-tags":return this.stickerKeyword;case"text-sticker-tags":return this.textStickerKeyword;case"photo-sticker-tags":return this.photoStickerKeyword}}setKeyword(e){switch(this.tagMode){case"theme-tags":this.themeKeyword=e;break;case"search-tags":this.searchKeyword=e;break;case"background-tags":this.backgroundKeyword=e;break;case"sticker-tags":this.stickerKeyword=e;break;case"text-sticker-tags":this.textStickerKeyword=e;break;case"photo-sticker-tags":this.photoStickerKeyword=e}}async setSearchTags(e){this.searchTags=e,this.reloadSnippets()}async setThemeTags(e){this.themeTags=e,this.reloadSnippets()}async setBackgroundTags(e){this.backgroundTags=e,this.reloadSnippets()}async setStickerTags(e){this.stickerTags=e,this.reloadSnippets()}async setTextStickerTags(e){this.textStickerTags=e,this.reloadSnippets()}async setPhotoStickerTags(e){this.photoStickerTags=e,this.reloadSnippets()}async setKeywords(e){this.keywords=e}pageCaption(e){return 0===e?"Cover":1===e?"1":e===this.pageSetup.length-1?(2*(this.pageSetup.length-2)).toString():2*(e-1)+"-"+(2*(e-1)+1)}dragStart(e,t){if("background-tags"===this.tagMode)return t.preventDefault(),void(this.dragged=null);this.dragged=e,t.dataTransfer?.setData("text/plain","INDEX:"+e)}dragEnter(e,t){if(e.preventDefault(),-1!==t&&this.shadowRoot&&this.canDrop(t)){const e=this.shadowRoot.querySelector(`[data-index="${t}"]`);e&&e.classList.add("drag-over")}}dragLeave(e,t){if(e.preventDefault(),-1!==t&&(console.log("drag-leave: "+t),this.shadowRoot)){const e=this.shadowRoot.querySelector(`[data-index="${t}"]`);e&&e.classList.remove("drag-over")}}dragOver(e){e.preventDefault()}canDrop(e){if(null===this.dragged)return!1;const t=this.getSnippets()[this.dragged];if(-1===e)return!0;const o=this.pageSetup[e];return t.type===o.type}async handleDrop(e,t){if(e.preventDefault(),this.dragLeave(e,t),null!==this.dragged&&this.canDrop(t)){const e=this.getSnippets()[this.dragged];-1===t?this.thumb=e.thumb:(this.pageSetup[t].snippet=e,0!==t||this.thumb&&!this.thumb.endsWith("default.svg")||(this.thumb=e.thumb)),this.requestUpdate()}}};__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"themeSnippets",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"themeKeywords",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"themeKeyword",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"searchSnippets",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"searchKeywords",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"searchKeyword",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"backgroundSnippets",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"backgroundKeywords",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"backgroundKeyword",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"stickers",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"stickerKeywords",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"stickerKeyword",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"stickerMenuId",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"textStickers",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"textStickerKeywords",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"textStickerKeyword",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"textStickerMenuId",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"photoStickers",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"photoStickerKeywords",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"photoStickerKeyword",void 0),__decorate$7([property({attribute:!1,type:String})],WcDialogBookSnippetSetup.prototype,"photoStickerMenuId",void 0),__decorate$7([property({type:Array})],WcDialogBookSnippetSetup.prototype,"keywordMenus",void 0),__decorate$7([property({attribute:!1,type:Number})],WcDialogBookSnippetSetup.prototype,"pageCount",void 0),__decorate$7([property({attribute:!1,type:Boolean})],WcDialogBookSnippetSetup.prototype,"allowSaveAs",void 0),__decorate$7([property({attribute:!1,type:Object})],WcDialogBookSnippetSetup.prototype,"backgroundSnippet",void 0),__decorate$7([property({attribute:!1,type:Array})],WcDialogBookSnippetSetup.prototype,"selectedTags",void 0),__decorate$7([query("#themeFiltering")],WcDialogBookSnippetSetup.prototype,"themeFilteringSelect",void 0),__decorate$7([query("#themeWizard")],WcDialogBookSnippetSetup.prototype,"themeWizardSelect",void 0),__decorate$7([query("#themeSinglePhoto")],WcDialogBookSnippetSetup.prototype,"themeSinglePhotoSelect",void 0),WcDialogBookSnippetSetup=__decorate$7([customElement("wc-dialog-book-snippet-setup")],WcDialogBookSnippetSetup);var __decorate$6=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcPhotobookThemesPage=class extends s$1{static get styles(){return[accountStyles,i$4`
            :host {
                font-family: var(--printess-text-font);
                color: rgb(85, 85, 85);
            }

            .photobook-themes-container {
              display: flex;
              flex-wrap: wrap;
              gap: 10px;
              padding: 10px;
            }

            .theme-box {
              display: grid;
              grid-template-rows: 150px 40px;
              gap: 5px;
              position: relative;
              width: 150px;
              overflow: hidden;
              cursor: pointer;
               border: 3px solid #ddd;
            }
             .theme-box:hover {
              border: 3px solid var(--printess-pink);
             }
            .theme-caption {
              font-size: 12px;
              text-align: center;
              text-overflow: ellipsis;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .delete-icon {
                width: 26px;
                height: 26px;
                position: absolute;
                background-color: white;
                padding: 3px;
                border-radius: 5px;
                top: 4px;
                right: 4px;
                display: none;
            }

            .theme-box:hover .delete-icon {
                display: block;
            }

            .theme-image {
                margin-bottom: 0px;
                margin-top: 0px;
                width: 150px;
                height: 150px;
                background-color: gray;
                cursor: pointer;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                background-size: cover;
            }

        `]}constructor(){super(),this.loadedTags=null,this.themeList=[],this.color="pink"}async connectedCallback(){super.connectedCallback(),await this.loadPhotobookThemes(),location.hash="#photobook-themes"}showError(e){alert("error msg: "+e.message+"   error code: "+e.code),console.log("error msg: ",e.message,"error code: ",e.code)}async loadPhotobookThemes(){const e=await api.readUserSettings({keys:["magicPhotobookThemes"]});if(e instanceof ServerErrorResponse$2)this.showError(e);else if(e.magicPhotobookThemes){const t=JSON.parse(e.magicPhotobookThemes);if(Array.isArray(t)&&t.length&&t[0].n&&t[0].t&&t[0].kws){this.themeList=[];for(const e of t)this.themeList.push({n:e.n,t:e.t??"",kws:e.kws??[],tt:e.tt??[]})}else this.themeList=[]}}async loadPhotobookTheme(e){const t=await api.readUserSettings({keys:["magicPhotobookTheme:"+e]});if(t instanceof ServerErrorResponse$2)this.showError(t);else if(t){for(const e of Object.keys(t))if(!e.startsWith("printess-")){const o=JSON.parse(t[e]);return{...this.getThemeObject("new"),...o}}this.requestUpdate()}return null}async savePhotobookTheme(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async deleteUserSetting(e){const t=await api.deleteUserSetting(e);t instanceof ServerErrorResponse$2?this.showError(t):console.log("Theme has been removed")}async openBookSnippetSetup(e){const t=new WcDialogBookSnippetSetup,o=e?await this.loadPhotobookTheme(e):this.getNewTheme();o?t.showDialog(o,!!e,async(e,t,r)=>{let i=o.name;if(t&&e)i=t;else if(t&&t!==o.name){const e=this.getValidName(t);e&&(i=e)}const a={...r,name:i},s=[];if(e||!this.themeList.find(e=>e.n===o.name))s.push(...this.themeList,{n:a.name,t:a.thumb,kws:a.keywords,tt:a.themeTags});else for(const e of this.themeList)e.n===o.name?s.push({n:a.name,t:a.thumb,kws:a.keywords,tt:a.themeTags}):s.push(e);this.themeList=s,await this.savePhotobookTheme({key:"magicPhotobookThemes",json:JSON.stringify(s)}),await this.savePhotobookTheme({key:"magicPhotobookTheme:"+a.name,json:JSON.stringify(a)})},e=>this.getValidName(e)):e&&alert("Can't load theme ["+e+"]")}getValidName(e){let t=getValidJsName(e);return t&&this.themeList.find(e=>e.n===t)?null:t}getThemeObject(e){return{name:e,themeTags:["printess-book-universal"],searchTags:[],backgroundTags:["printess-background"],thumb:"https://editor.printess.com/v/nightly/printess-editor/img/default.svg",pageCount:28,pageSetup:[],backgroundSnippet:null,keywords:[],filtering:"show-all-themes",wizard:"show-ai-and-freestyle"}}getNewTheme(){let e="universal",t="";for(;!t;){if(e=prompt("Please enter new theme name.",e??""),!e)return null;t=this.getValidName(e),t||(alert("Name already exists!"),e=t||"universal")}return t?this.getThemeObject(t):null}async deleteTheme(e){"ok"===prompt("Enter 'ok' to Delete Photobook-Theme: "+e)&&(this.themeList=this.themeList.filter(t=>t.n!==e),await this.savePhotobookTheme({key:"magicPhotobookThemes",json:JSON.stringify(this.themeList)}),await this.deleteUserSetting({key:"magicPhotobookTheme:"+e}))}renderThemes(){return x`
      <div class="photobook-themes-container">

        ${this.themeList.length?this.themeList.map((e,t)=>x`
          <div class="theme-box">

            <wc-icon icon="trash" primaryColor="pink" class="delete-icon" @click="${()=>this.deleteTheme(e.n)}"></wc-icon>

            <div class="theme-image" style="background-image: url(${e.t});" @click="${()=>this.openBookSnippetSetup(e.n)}"></div>

            <div class="theme-caption"  @click="${()=>this.openBookSnippetSetup(e.n)}">${e.n}</div>

          </div>
        `):x`
          <div style="padding: 20px">No Themes found</div>
        `}
      </div>
  `}render(){return x`
      <wc-topic-header title="Photobook Themes"></wc-topic-header>

      <p style="font-size: 14px; color: #555555;">
        Manage your photobook themes. Click on a theme to edit tags and page setups or
        <wc-button caption="Add Theme" size="sm" color="pink" margin="0 5px" @click=${()=>this.openBookSnippetSetup("")}></wc-button>
      </p>

      <wc-card-container title="All Your Photobook Themes" color="${this.color}" .hasButtonBelow=${!0}>${this.renderThemes()}</wc-card-container>

      <wc-button caption="Add Theme" size="md" color="pink" @click=${()=>this.openBookSnippetSetup("")}></wc-button>
    `}};__decorate$6([e$3({attribute:!1,type:Array})],WcPhotobookThemesPage.prototype,"loadedTags",void 0),__decorate$6([e$3({attribute:!1,type:Array})],WcPhotobookThemesPage.prototype,"themeList",void 0),WcPhotobookThemesPage=__decorate$6([e$4("wc-photobook-themes-page")],WcPhotobookThemesPage);const UNITS_TO_PT={pt:1,mm:72/25.4,cm:72/2.54,inch:72,in:72};function parseUnit(e){const t=e.trim();if(""===t)throw new Error('Empty value — expected a number with optional unit (e.g. "10mm")');const o=t.match(/^(-?\d+(?:\.\d+)?)\s*(pt|mm|cm|inch|in)?$/i);if(!o)throw new Error(`Invalid value "${e}" — expected a number with optional unit (mm, cm, pt, inch)`);const r=parseFloat(o[1]),i=o[2]?o[2].toLowerCase():"mm";return r*UNITS_TO_PT[i]}function formatUnit(e,t){const o=t.toLowerCase().trim(),r=UNITS_TO_PT[o];if(!r)throw new Error(`Unknown unit: "${t}"`);const i=e/r;return`${Math.round(1e4*i)/1e4}${o}`}function detectUnit(e){const t=e.trim().match(/(pt|mm|cm|inch|in)$/i);return t?t[1].toLowerCase():"mm"}function parseDef(e,t,o){const r=e.definition,i=parseUnit(r.sheetWidth),a=parseUnit(r.sheetHeight),s=parseUnit(r.gripperLeft),n=parseUnit(r.gripperTop),l=parseUnit(r.gripperRight),c=parseUnit(r.gripperBottom),d=parseInt(r.rotateSignatures||"0",10);let p=parseUnit(r.inputPageWidth),h=parseUnit(r.inputPageHeight);return 90!==d&&270!==d||([p,h]=[h,p]),{sheetW:i,sheetH:a,doubleSided:"true"===r.sheetDoubleSided,pageW:p,pageH:h,gripL:s,gripT:n,gripR:l,gripB:c,slugV:parseUnit(r.slugVertical),slugH:parseUnit(r.slugHorizontal),bleed:r.bleed.map(parseUnit),markerDist:Math.min(parseUnit(r.markerDistance),parseUnit(r.slugVertical),parseUnit(r.slugHorizontal)),markerThickness:r.markerThickness,markerColor:r.markerColor,markerStrategy:r["marker-strategy"],layoutStrategy:r["layout-strategy"],printableW:i-s-l,printableH:a-n-c,outUnit:detectUnit(r.sheetWidth),hGutter:parseUnit(r.horizontalGutter||"0mm"),vGutter:parseUnit(r.verticalGutter||"0mm"),rotateSignatures:d}}function createImposition(e,t,o,r){const i=parseInt(e.definition.inputPageCount,10)||1;switch(e.definition.mode){case"2Up-Brochure":return createBrochure2Up(e,i);case"4Up-CutStack":return createBrochure4UpCutStack(e,i);case"4Up-FoldStack":return createBrochure4UpFoldStack(e,i);case"Stacking":return createStacking(e,i);case"Repeat":return createRepeat(e,i);default:return createNUp(e,i)}}function createNUp(e,t,o,r){const i=parseDef(e),a=e.definition,s=computeAutoCols(i);let n="auto"===a.columns?s.cols:parseInt(a.columns,10),l="auto"===a.rows?s.rows:parseInt(a.rows,10);const c=i.doubleSided?Math.ceil(t/2):t;n*l>c&&(l=Math.max(1,Math.ceil(c/n)),1===l&&(n=Math.min(n,c)));const{hGap:d,vGap:p,offsetX:h,offsetY:g}=computeLayout(i,n,l),u=n*l,m=i.doubleSided?2*u:u,f=Math.ceil(t/m),b=[];let y=1;for(let e=0;e<f;e++){const o=makeGrid(l,n,null),r=makeGrid(l,n,null);if(i.doubleSided)for(let e=0;e<l;e++)for(let i=0;i<n;i++){y<=t&&(o[e][i]={page:y++,orientation:"north"});const a=n-1-i;y<=t&&(r[e][a]={page:y++,orientation:"north"})}else for(let e=0;e<l;e++)for(let r=0;r<n;r++)y<=t&&(o[e][r]={page:y++,orientation:"north"});emitSignatures(o,"front",e,n,l,h,g,i,d,p,b),i.doubleSided&&emitSignatures(r,"back",e,n,l,h,g,i,d,p,b)}return{definition:e,output:{isFromImpositionEditor:!0,pages:i.doubleSided?2*f:f,width:formatUnit(parseUnit(e.definition.sheetWidth),i.outUnit),height:formatUnit(parseUnit(e.definition.sheetHeight),i.outUnit),placement:b}}}function createBrochure2Up(e,t,o,r){const i=parseDef(e),a=4*Math.ceil(t/4),s=a/4,{hGap:n,vGap:l,offsetX:c,offsetY:d}=computeLayout(i,2,1),p=[];for(let e=0;e<s;e++){const o=a-2*e,r=2*e+1,s=2*e+2,h=a-2*e-1,g=makeGrid(1,2,null),u=makeGrid(1,2,null);o<=t&&(g[0][0]={page:o,orientation:"north"}),r<=t&&(g[0][1]={page:r,orientation:"north"}),s<=t&&(u[0][0]={page:s,orientation:"north"}),h<=t&&(u[0][1]={page:h,orientation:"north"}),emitSignatures(g,"front",e,2,1,c,d,i,n,l,p,!0),emitSignatures(u,"back",e,2,1,c,d,i,n,l,p,!0)}return{definition:e,output:{isFromImpositionEditor:!0,pages:i.doubleSided?2*s:s,width:e.definition.sheetWidth,height:e.definition.sheetHeight,placement:p}}}function createBrochure4UpCutStack(e,t,o,r){const i=parseDef(e),a=8*Math.ceil(t/8),s=a/4,n=s/2,{hGap:l,vGap:c,offsetX:d,offsetY:p}=computeLayout(i,2,2),h=[];for(let e=0;e<n;e++){const o=e,r=s-1-e,n=makeGrid(2,2,null),g=makeGrid(2,2,null),u=a-2*o,m=2*o+1,f=2*o+2,b=a-2*o-1;u<=t&&(n[0][0]={page:u,orientation:"north"}),m<=t&&(n[0][1]={page:m,orientation:"north"}),f<=t&&(g[0][0]={page:f,orientation:"north"}),b<=t&&(g[0][1]={page:b,orientation:"north"});const y=a-2*r,v=2*r+1,w=2*r+2,x=a-2*r-1;y<=t&&(n[1][0]={page:y,orientation:"north"}),v<=t&&(n[1][1]={page:v,orientation:"north"}),w<=t&&(g[1][0]={page:w,orientation:"north"}),x<=t&&(g[1][1]={page:x,orientation:"north"}),emitSignatures(n,"front",e,2,2,d,p,i,l,c,h,!0),emitSignatures(g,"back",e,2,2,d,p,i,l,c,h,!0)}return{definition:e,output:{isFromImpositionEditor:!0,pages:i.doubleSided?2*n:n,width:e.definition.sheetWidth,height:e.definition.sheetHeight,placement:h}}}function createBrochure4UpFoldStack(e,t,o,r){const i=parseDef(e),a=8*Math.ceil(t/8),s=a/4/2,{hGap:n,vGap:l,offsetX:c,offsetY:d}=computeLayout(i,2,2),p=[];for(let e=0;e<s;e++){const o=2*e,r=2*e+1,s=makeGrid(2,2,null),h=makeGrid(2,2,null),g=a-2*r,u=2*r+1,m=2*r+2,f=a-2*r-1;g<=t&&(s[0][0]={page:g,orientation:"south"}),u<=t&&(s[0][1]={page:u,orientation:"south"}),m<=t&&(h[0][0]={page:m,orientation:"south"}),f<=t&&(h[0][1]={page:f,orientation:"south"});const b=a-2*o,y=2*o+1,v=2*o+2,w=a-2*o-1;b<=t&&(s[1][0]={page:b,orientation:"north"}),y<=t&&(s[1][1]={page:y,orientation:"north"}),v<=t&&(h[1][0]={page:v,orientation:"north"}),w<=t&&(h[1][1]={page:w,orientation:"north"}),emitSignatures(s,"front",e,2,2,c,d,i,n,l,p,!0),emitSignatures(h,"back",e,2,2,c,d,i,n,l,p,!0)}return{definition:e,output:{isFromImpositionEditor:!0,pages:i.doubleSided?2*s:s,width:e.definition.sheetWidth,height:e.definition.sheetHeight,placement:p}}}function createStacking(e,t,o,r){const i=parseDef(e),a=e.definition,s=computeAutoCols(i),n="auto"===a.columns?s.cols:parseInt(a.columns,10),l="auto"===a.rows?s.rows:parseInt(a.rows,10),{hGap:c,vGap:d,offsetX:p,offsetY:h}=computeLayout(i,n,l),g=n*l,u=i.doubleSided?2:1,m=g*u,f=Math.ceil(t/m),b=f*u,y=[];for(let e=0;e<f;e++){const o=makeGrid(l,n,null),r=makeGrid(l,n,null);for(let a=0;a<l;a++)for(let s=0;s<n;s++){const l=a*n+s,c=l*b+e*u+1;if(c<=t&&(o[a][s]={page:c,orientation:"north"}),i.doubleSided){const o=l*b+e*u+2,i=n-1-s;o<=t&&(r[a][i]={page:o,orientation:"north"})}}emitSignatures(o,"front",e,n,l,p,h,i,c,d,y),i.doubleSided&&emitSignatures(r,"back",e,n,l,p,h,i,c,d,y)}return{definition:e,output:{isFromImpositionEditor:!0,pages:i.doubleSided?2*f:f,width:e.definition.sheetWidth,height:e.definition.sheetHeight,placement:y}}}function createRepeat(e,t,o,r){const i=parseDef(e),a=e.definition,s=computeAutoCols(i),n="auto"===a.columns?s.cols:parseInt(a.columns,10),l="auto"===a.rows?s.rows:parseInt(a.rows,10),{hGap:c,vGap:d,offsetX:p,offsetY:h}=computeLayout(i,n,l),g=i.doubleSided?2:1,u=Math.ceil(t/g),m=[];for(let e=0;e<u;e++){const o=e*g+1,r=makeGrid(l,n,null);if(o<=t)for(let e=0;e<l;e++)for(let t=0;t<n;t++)r[e][t]={page:o,orientation:"north"};if(emitSignatures(r,"front",e,n,l,p,h,i,c,d,m),i.doubleSided){const o=e*g+2,r=makeGrid(l,n,null);if(o<=t)for(let e=0;e<l;e++)for(let t=0;t<n;t++)r[e][t]={page:o,orientation:"north"};emitSignatures(r,"back",e,n,l,p,h,i,c,d,m)}}return{definition:e,output:{isFromImpositionEditor:!0,pages:i.doubleSided?2*u:u,width:e.definition.sheetWidth,height:e.definition.sheetHeight,placement:m}}}function makeGrid(e,t,o){const r=[];for(let i=0;i<e;i++){r[i]=[];for(let e=0;e<t;e++)r[i][e]=o}return r}function computeAutoCols(e){const t=Math.max(e.slugH,e.bleed[0]),o=Math.max(e.slugH,e.bleed[2]),r=Math.max(e.slugV,e.bleed[1]),i=Math.max(e.slugV,e.bleed[3]);let a,s;if("gutter"===e.layoutStrategy)a=e.hGutter,s=e.vGutter;else{if("distribute"===e.layoutStrategy){const a=Math.max(t,o),s=Math.max(r,i);return{cols:Math.max(1,Math.floor((e.printableW-a)/(e.pageW+a))),rows:Math.max(1,Math.floor((e.printableH-s)/(e.pageH+s)))}}a=e.bleed[0]+e.bleed[2],s=e.bleed[1]+e.bleed[3]}const n=e.printableW-t-o,l=e.printableH-r-i;return{cols:Math.max(1,Math.floor((n+a)/(e.pageW+a))),rows:Math.max(1,Math.floor((l+s)/(e.pageH+s)))}}function computeLayout(e,t,o){let r,i,a,s;if("distribute"===e.layoutStrategy){const n=t*e.pageW,l=o*e.pageH;r=Math.max(0,(e.printableW-n)/(t+1)),i=Math.max(0,(e.printableH-l)/(o+1)),a=e.gripL+r,s=e.gripT+i}else if("gutter"===e.layoutStrategy){r=e.hGutter,i=e.vGutter;const n=t*e.pageW+(t-1)*r,l=o*e.pageH+(o-1)*i;a=e.gripL+(e.printableW-n)/2,s=e.gripT+(e.printableH-l)/2}else{r=e.bleed[0]+e.bleed[2],i=e.bleed[1]+e.bleed[3];const n=t*e.pageW+(t-1)*r,l=o*e.pageH+(o-1)*i;a=e.gripL+(e.printableW-n)/2,s=e.gripT+(e.printableH-l)/2}return{hGap:r,vGap:i,offsetX:a,offsetY:s}}function emitSignatures(e,t,o,r,i,a,s,n,l,c,d,p=!1){for(let h=0;h<i;h++)for(let g=0;g<r;g++){const u=e[h][g];if(null===u)continue;const m=a+g*(n.pageW+l),f=s+h*(n.pageH+c),b=computeMarkers(h,g,i,r,n.markerStrategy,l,c,n.slugH,n.slugV,n.markerDist),y=p&&g<r-1,v=p&&g>0?n.bleed[2]:n.bleed[0],w=y?n.bleed[2]:n.bleed[0],x=g>0?Math.min(v,l/2):v,k=h>0?Math.min(n.bleed[1],c/2):n.bleed[1],S=g<r-1?Math.min(w,l/2):w,$=h<i-1?Math.min(n.bleed[3],c/2):n.bleed[3],C=formatUnit(n.slugH,n.outUnit),P=formatUnit(n.slugV,n.outUnit);d.push({left:formatUnit(m,n.outUnit),top:formatUnit(f,n.outUnit),width:formatUnit(n.pageW,n.outUnit),height:formatUnit(n.pageH,n.outUnit),bleed:[formatUnit(x,n.outUnit),formatUnit(k,n.outUnit),formatUnit(S,n.outUnit),formatUnit($,n.outUnit)],slug:[C,P,C,P],marker:b,markerDistance:formatUnit(n.markerDist,n.outUnit),markerThickness:n.markerThickness,markerColor:n.markerColor,orientate:applyRotation(u.orientation,n.rotateSignatures,t),sourcePageNumber:u.page,targetPageNumber:(n.doubleSided?"back"===t?2*o+1:2*o:o)+1,usebox:"trim"})}}const ORIENTATIONS=["north","east","south","west"];function applyRotation(e,t,o){if(0===t)return e;const r=ORIENTATIONS.indexOf(e);return ORIENTATIONS[(r+("back"===o?(4-t/90%4)%4:t/90%4))%4]}function computeMarkers(e,t,o,r,i,a,s,n,l,c){const d=0===e,p=e===o-1,h=0===t,g=t===r-1;if("all-marks"===i){const e=2*c+n,t=2*c+l,o=p||s>=t,r=h||a>=e,i=g||a>=e,u=[];return(d||s>=t)&&u.push("UL","UR"),o&&u.push("BL","BR"),r&&u.push("LB","LT"),i&&u.push("RT","RB"),u}const u=[];return d&&u.push("UL","UR"),p&&u.push("BL","BR"),h&&u.push("LB","LT"),g&&u.push("RT","RB"),u}const SVG_NS="http://www.w3.org/2000/svg",SHEET_PAIR_GAP=60;function parseColor(e){const t=e.trim().split(/\s+/);if("cmyk"===t[0]&&5===t.length){const e=parseFloat(t[1]),o=parseFloat(t[2]),r=parseFloat(t[3]),i=parseFloat(t[4]);return{css:`rgb(${Math.round(255*(1-e)*(1-i))},${Math.round(255*(1-o)*(1-i))},${Math.round(255*(1-r)*(1-i))})`}}if("rgb"===t[0]&&4===t.length){return{css:`rgb(${Math.round(255*parseFloat(t[1]))},${Math.round(255*parseFloat(t[2]))},${Math.round(255*parseFloat(t[3]))})`}}return{css:"black"}}function renderPreview(e,t){e.innerHTML="";const o=t.definition.definition,r=parseUnit(o.sheetWidth),i=parseUnit(o.sheetHeight),a="true"===o.sheetDoubleSided,s=a?2:1,n=e.clientWidth-40-20*s*2-(a?20:0),l=Math.min(1,n/(s*r)),c=new Map;for(const e of t.output.placement){const t=e.targetPageNumber-1;c.has(t)||c.set(t,[]),c.get(t).push(e)}const d=a?t.output.pages/2:t.output.pages;for(let t=0;t<d;t++){const s=document.createElement("div");s.className="sheet-pair",s.style.marginBottom="60px";const n=a?2*t:t,d=t+1,p=createSheetSvg(r,i,l,c.get(n)||[],o,`Sheet ${d}${a?" - Front":""}`);if(s.appendChild(p),a){const e=2*t+1,a=createSheetSvg(r,i,l,c.get(e)||[],o,`Sheet ${d} - Back`);s.appendChild(a)}e.appendChild(s)}}function createSheetSvg(e,t,o,r,i,a){const s=document.createElement("div");s.className="sheet-wrapper";const n=20,l=e*o+40,c=t*o+40+25,d=document.createElementNS(SVG_NS,"svg");d.setAttribute("width",String(l)),d.setAttribute("height",String(c)),d.setAttribute("viewBox",`0 0 ${l} ${c}`);const p=createRect(n,n,e*o,t*o,"white","#555");p.setAttribute("stroke-width","1"),d.appendChild(p);const h=parseUnit(i.gripperLeft)*o,g=parseUnit(i.gripperTop)*o,u=parseUnit(i.gripperRight)*o,m=parseUnit(i.gripperBottom)*o;h>0&&d.appendChild(createRect(n,n,h,t*o,"rgba(233,30,99,0.12)","none")),g>0&&d.appendChild(createRect(n,n,e*o,g,"rgba(233,30,99,0.12)","none")),u>0&&d.appendChild(createRect(n+e*o-u,n,u,t*o,"rgba(233,30,99,0.12)","none")),m>0&&d.appendChild(createRect(n,n+t*o-m,e*o,m,"rgba(233,30,99,0.12)","none"));for(const e of r)drawSignature(d,e,o,n,i);const f=document.createElementNS(SVG_NS,"text");return f.setAttribute("x",String(n+e*o/2)),f.setAttribute("y",String(n+t*o+18)),f.setAttribute("text-anchor","middle"),f.setAttribute("fill","#333"),f.setAttribute("font-size","13"),f.setAttribute("font-family","Arial, sans-serif"),f.textContent=a,d.appendChild(f),s.appendChild(d),s}function drawSignature(e,t,o,r,i){const a=parseUnit(t.left)*o+r,s=parseUnit(t.top)*o+r,n=parseUnit(t.width)*o,l=parseUnit(t.height)*o,c=t.bleed.map(e=>parseUnit(e)*o),d=c[0],p=c[1],h=createRect(a-d,s-p,n+d+c[2],l+p+c[3],"rgba(255, 105, 180, 0.15)","rgba(255, 105, 180, 0.6)");h.setAttribute("stroke-width","0.5"),e.appendChild(h);const g=createRect(a,s,n,l,"white","rgba(255, 105, 180, 0.8)");g.setAttribute("stroke-width","0.75"),e.appendChild(g);const u=.35*Math.min(n,l),m=document.createElementNS(SVG_NS,"text");m.setAttribute("x",String(a+n/2)),m.setAttribute("y",String(s+l/2+.35*u)),m.setAttribute("text-anchor","middle"),m.setAttribute("fill","#333"),m.setAttribute("font-size",String(u)),m.setAttribute("font-family","Arial, sans-serif"),m.setAttribute("font-weight","bold");const f=t.orientate;if("north"!==f){const e=a+n/2,t=s+l/2;let o=0;"south"===f?o=180:"west"===f?o=-90:"east"===f&&(o=90),m.setAttribute("transform",`rotate(${o} ${e} ${t})`)}m.textContent=String(t.sourcePageNumber),e.appendChild(m),drawOrientationIndicator(e,a,s,n,l,t.orientate);const b=parseUnit(i.slugVertical)*o,y=parseUnit(i.slugHorizontal)*o;drawMarkers(e,t,a,s,n,l,o,b,y,i)}function drawOrientationIndicator(e,t,o,r,i,a,s){const n="east"===a||"west"===a,l=n?r:i,c=(n?i:r)*(2/3),d=.15*c,p=t+r/2,h=o+i/2,g=h-(l/2-Math.max(2,.04*l)-d/2),u=document.createElementNS(SVG_NS,"g"),m=document.createElementNS(SVG_NS,"line");m.setAttribute("x1",String(p-c/2)),m.setAttribute("y1",String(g-d/2)),m.setAttribute("x2",String(p+c/2)),m.setAttribute("y2",String(g-d/2)),m.setAttribute("stroke","rgba(255, 105, 180, 0.8)"),m.setAttribute("stroke-width","1.5"),u.appendChild(m);const f=document.createElementNS(SVG_NS,"line");f.setAttribute("x1",String(p)),f.setAttribute("y1",String(g-d/2)),f.setAttribute("x2",String(p)),f.setAttribute("y2",String(g+d/2)),f.setAttribute("stroke","rgba(255, 105, 180, 0.8)"),f.setAttribute("stroke-width","1.5"),u.appendChild(f);const b=t+r/2;let y=0;"south"===a?y=180:"west"===a?y=-90:"east"===a&&(y=90),0!==y&&u.setAttribute("transform",`rotate(${y} ${b} ${h})`),e.appendChild(u)}function drawMarkers(e,t,o,r,i,a,s,n,l,c){const d=parseUnit(c.markerDistance)*s,p=parseUnit(c.markerThickness)*s,h=parseColor(c.markerColor);for(const s of t.marker){const t=getMarkerLine(s,o,r,i,a,d,n,l);if(!t)continue;const c=document.createElementNS(SVG_NS,"line");c.setAttribute("x1",String(t.x1)),c.setAttribute("y1",String(t.y1)),c.setAttribute("x2",String(t.x2)),c.setAttribute("y2",String(t.y2)),c.setAttribute("stroke",h.css),c.setAttribute("stroke-width",String(Math.max(p,.5))),e.appendChild(c)}}function getMarkerLine(e,t,o,r,i,a,s,n){const l=t,c=o,d=t+r,p=o+i;switch(e){case"UL":return{x1:l,y1:c-s,x2:l,y2:c-a};case"UR":return{x1:d,y1:c-s,x2:d,y2:c-a};case"BL":return{x1:l,y1:p+a,x2:l,y2:p+s};case"BR":return{x1:d,y1:p+a,x2:d,y2:p+s};case"LT":return{x1:l-n,y1:c,x2:l-a,y2:c};case"LB":return{x1:l-n,y1:p,x2:l-a,y2:p};case"RT":return{x1:d+a,y1:c,x2:d+n,y2:c};case"RB":return{x1:d+a,y1:p,x2:d+n,y2:p};default:return null}}function createRect(e,t,o,r,i,a){const s=document.createElementNS(SVG_NS,"rect");return s.setAttribute("x",String(e)),s.setAttribute("y",String(t)),s.setAttribute("width",String(o)),s.setAttribute("height",String(r)),s.setAttribute("fill",i),"none"!==a&&s.setAttribute("stroke",a),s}class ImpositionOverlayElement extends s$1{constructor(){super(...arguments),this._result=null,this._resolve=null,this._debounceTimer=null,this._onResize=()=>{this.hasAttribute("open")&&this._debouncedGenerate()}}q(e){return this.renderRoot.querySelector(`#${e}`)}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._onResize)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._onResize)}open(e){return this._definition=structuredClone(e),this._result=null,this.setAttribute("open",""),this.updateComplete.then(()=>{this._populateForm(this._definition);const e=this._definition.definition.mode,t="2Up-Brochure"===e||"4Up-CutStack"===e||"4Up-FoldStack"===e;this._updateBleedLabels(t),this._updateGutterVisibility(),this._updateModeConstraints(),this._generate()}),new Promise(e=>{this._resolve=e})}_close(e){if(this.removeAttribute("open"),this._resolve){const t=this._resolve;this._resolve=null,t(e)}}_handleOk(){this._definition=this._readForm(),this._close({definition:this._definition,svg:this._result?.svg})}_handleCancel(){this._close(null)}_handleInput(){this._debouncedGenerate()}_handleChange(){this._updateModeConstraints(),this._updateGutterVisibility(),this._debouncedGenerate()}_populateForm(e){const t=e.definition;this.q("name").value=e.name,this.q("sheetWidth").value=t.sheetWidth,this.q("sheetHeight").value=t.sheetHeight,this.q("doubleSided").checked="true"===t.sheetDoubleSided,this.q("columns").value=t.columns,this.q("rows").value=t.rows,this.q("inputPageWidth").value=t.inputPageWidth,this.q("inputPageHeight").value=t.inputPageHeight,this.q("pageCount").value=t.inputPageCount,this.q("gripperLeft").value=t.gripperLeft,this.q("gripperTop").value=t.gripperTop,this.q("gripperRight").value=t.gripperRight,this.q("gripperBottom").value=t.gripperBottom,this.q("mode").value=t.mode,this.q("slugVertical").value=t.slugVertical,this.q("slugHorizontal").value=t.slugHorizontal,this.q("bleedOutside").value=t.bleed[0],this.q("bleedTop").value=t.bleed[1],this.q("bleedInside").value=t.bleed[2],this.q("bleedBottom").value=t.bleed[3],this.q("markerDistance").value=t.markerDistance,this.q("markerThickness").value=t.markerThickness,this.q("markerColor").value=t.markerColor,this.q("markerStrategy").value=t["marker-strategy"],this.q("layoutStrategy").value=t["layout-strategy"],this.q("horizontalGutter").value=t.horizontalGutter||"10mm",this.q("verticalGutter").value=t.verticalGutter||"10mm",this.q("rotateSignatures").value=t.rotateSignatures||"0"}_ensureUnit(e,t){const o=e.trim();if(!o)return t;const r=detectUnit(/[a-z]+$/i.test(o)?o:t);return formatUnit(parseUnit(o),r)}_readForm(){const e=this._definition.definition;return{name:this.q("name").value,meta:this._definition.meta,definition:{sheetWidth:this._ensureUnit(this.q("sheetWidth").value,e.sheetWidth),sheetHeight:this._ensureUnit(this.q("sheetHeight").value,e.sheetHeight),sheetDoubleSided:this.q("doubleSided").checked?"true":"false",columns:this.q("columns").value,rows:this.q("rows").value,inputPageWidth:this._ensureUnit(this.q("inputPageWidth").value,e.inputPageWidth),inputPageHeight:this._ensureUnit(this.q("inputPageHeight").value,e.inputPageHeight),inputPageCount:this.q("pageCount").value,gripperLeft:this._ensureUnit(this.q("gripperLeft").value,e.gripperLeft),gripperTop:this._ensureUnit(this.q("gripperTop").value,e.gripperTop),gripperRight:this._ensureUnit(this.q("gripperRight").value,e.gripperRight),gripperBottom:this._ensureUnit(this.q("gripperBottom").value,e.gripperBottom),mode:this.q("mode").value,slugVertical:this._ensureUnit(this.q("slugVertical").value,e.slugVertical),slugHorizontal:this._ensureUnit(this.q("slugHorizontal").value,e.slugHorizontal),bleed:[this._ensureUnit(this.q("bleedOutside").value,e.bleed[0]),this._ensureUnit(this.q("bleedTop").value,e.bleed[1]),this._ensureUnit(this.q("bleedInside").value,e.bleed[2]),this._ensureUnit(this.q("bleedBottom").value,e.bleed[3])],markerDistance:this._ensureUnit(this.q("markerDistance").value,e.markerDistance),markerThickness:this._ensureUnit(this.q("markerThickness").value,e.markerThickness),markerColor:this.q("markerColor").value,"marker-strategy":this.q("markerStrategy").value,"layout-strategy":this.q("layoutStrategy").value,horizontalGutter:this._ensureUnit(this.q("horizontalGutter").value,e.horizontalGutter||"10mm"),verticalGutter:this._ensureUnit(this.q("verticalGutter").value,e.verticalGutter||"10mm"),rotateSignatures:this.q("rotateSignatures").value}}}_clampMarkerDistance(){const e=this.q("markerDistance"),t=this.q("slugHorizontal").value,o=this.q("slugVertical").value;try{const r=parseUnit(e.value),i=Math.min(parseUnit(t),parseUnit(o));if(r>i){const t=detectUnit(e.value);e.value=formatUnit(i,t)}}catch{}}_generate(){try{this._clampMarkerDistance(),this._definition=this._readForm(),this._result=createImposition(this._definition);const e=this.q("preview");renderPreview(e,this._result);const t=e.querySelector("svg");t&&(this._result.svg=(new XMLSerializer).serializeToString(t));const o=this.q("status");o.textContent=`Generated: ${this._result.output.placement.length} signatures on ${this._result.output.pages} page(s)`,o.className="status success"}catch(e){const t=this.q("status");t.textContent=`Error: ${e.message}`,t.className="status error"}}_debouncedGenerate(){this._debounceTimer&&clearTimeout(this._debounceTimer),this._debounceTimer=setTimeout(()=>this._generate(),300)}_updateGutterVisibility(){const e="gutter"===this.q("layoutStrategy").value;this.q("gutterSection").style.display=e?"":"none"}_updateBleedLabels(e){this.q("labelBleedOutside").textContent=e?"Outside":"Left",this.q("labelBleedInside").textContent=e?"Inside":"Right"}_updateModeConstraints(){const e=this.q("mode").value,t=this.q("doubleSided"),o=this.q("columns"),r=this.q("rows"),i="2Up-Brochure"===e||"4Up-CutStack"===e||"4Up-FoldStack"===e;i?(t.checked=!0,t.disabled=!0,o.value="auto",o.disabled=!0,r.value="auto",r.disabled=!0):(t.disabled=!1,o.disabled=!1,r.disabled=!1),this._updateBleedLabels(i)}render(){return x`
      <header>
        <h1>Print Imposition</h1>
        <div class="toolbar">
          <button class="btn-cancel" @click=${this._handleCancel}>Cancel</button>
          <button class="btn-ok" @click=${this._handleOk}>Save</button>
        </div>
      </header>

      <main>
        <aside @input=${this._handleInput} @change=${this._handleChange}>
          <section>
            <h3>General</h3>
            <label>Name <input type="text" id="name"></label>
            <label>Mode
              <select id="mode">
                <option value="N-up">N-Up</option>
                <option value="2Up-Brochure">2-Up Brochure</option>
                <option value="4Up-CutStack">4-Up Brochure Cut &amp; Stack</option>
                <option value="4Up-FoldStack">4-Up Brochure Fold &amp; Stack</option>
                <option value="Stacking">Stacking</option>
                <option value="Repeat">Repeat</option>
              </select>
            </label>
            <label>Page Count <input type="number" id="pageCount" min="1" value="8"></label>
          </section>

          <section>
            <h3>Sheet</h3>
            <div class="row">
              <label>Width <input type="text" id="sheetWidth"></label>
              <label>Height <input type="text" id="sheetHeight"></label>
            </div>
            <label class="checkbox">
              <input type="checkbox" id="doubleSided"> Double Sided
            </label>
          </section>

          <section>
            <h3>Input Page</h3>
            <div class="row">
              <label>Width <input type="text" id="inputPageWidth"></label>
              <label>Height <input type="text" id="inputPageHeight"></label>
            </div>
          </section>

          <section>
            <h3>Layout</h3>
            <div class="row">
              <label>Columns <input type="text" id="columns" placeholder="auto"></label>
              <label>Rows <input type="text" id="rows" placeholder="auto"></label>
            </div>
            <label>Layout Strategy
              <select id="layoutStrategy">
                <option value="minimal-distance">Minimal Distance</option>
                <option value="distribute">Distribute</option>
                <option value="gutter">Gutter</option>
              </select>
            </label>
            <div id="gutterSection" style="display:none">
              <div class="row">
                <label>H. Gutter <input type="text" id="horizontalGutter" value="10mm"></label>
                <label>V. Gutter <input type="text" id="verticalGutter" value="10mm"></label>
              </div>
            </div>
            <label>Rotate Signatures
              <select id="rotateSignatures">
                <option value="0">0&deg;</option>
                <option value="90">90&deg; CW</option>
                <option value="180">180&deg;</option>
                <option value="270">270&deg; CW</option>
              </select>
            </label>
          </section>

          <section>
            <h3>Slug</h3>
            <div class="row">
              <label>Horizontal <input type="text" id="slugHorizontal"></label>
              <label>Vertical <input type="text" id="slugVertical"></label>
            </div>
          </section>

          <section>
            <h3>Bleed</h3>
            <div class="row">
              <label><span id="labelBleedOutside">Left</span> <input type="text" id="bleedOutside"></label>
              <label><span id="labelBleedInside">Right</span> <input type="text" id="bleedInside"></label>
            </div>
            <div class="row">
              <label>Top <input type="text" id="bleedTop"></label>
              <label>Bottom <input type="text" id="bleedBottom"></label>
            </div>
          </section>

          <section>
            <h3>Grippers</h3>
            <div class="row">
              <label>Left <input type="text" id="gripperLeft"></label>
              <label>Right <input type="text" id="gripperRight"></label>
            </div>
            <div class="row">
              <label>Top <input type="text" id="gripperTop"></label>
              <label>Bottom <input type="text" id="gripperBottom"></label>
            </div>
          </section>

          <section>
            <h3>Markers</h3>
            <label>Distance <input type="text" id="markerDistance"></label>
            <label>Thickness <input type="text" id="markerThickness"></label>
            <label>Color <input type="text" id="markerColor"></label>
            <label>Strategy
              <select id="markerStrategy">
                <option value="outside-only">Outside Only</option>
                <option value="all-marks">All Marks</option>
              </select>
            </label>
          </section>
        </aside>

        <div class="preview-panel">
          <div id="status" class="status"></div>
          <div id="preview" class="preview"></div>
        </div>
      </main>
    `}}ImpositionOverlayElement.styles=i$4`
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :host {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: #f5f5f5;
      display: none;
      flex-direction: column;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
    }

    :host([open]) {
      display: flex;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      background: #fff;
      border-bottom: 1px solid #ddd;
      flex-shrink: 0;
    }

    header h1 {
      font-size: 16px;
      font-weight: 600;
      color: #e91e63;
    }

    .toolbar {
      display: flex;
      gap: 8px;
    }

    .toolbar button {
      padding: 6px 14px;
      background: #f0f0f0;
      color: #333;
      border: 1px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: background 0.15s;
    }

    .toolbar button:hover {
      background: #e0e0e0;
    }

    .toolbar .btn-ok {
      background: #e91e63;
      color: white;
      border: 1px solid #e91e63;
      font-weight: 600;
    }

    .toolbar .btn-ok:hover {
      background: #c2185b;
      border-color: #c2185b;
    }

    main {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    aside {
      width: 280px;
      min-width: 280px;
      padding: 12px;
      background: #fff;
      border-right: 1px solid #ddd;
      overflow-y: auto;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }

    aside section {
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px dotted #ccc;
    }

    aside h3 {
      font-size: 13px;
      font-weight: 600;
      color: #e91e63;
      margin-bottom: 8px;
    }

    aside label {
      display: flex;
      flex-direction: column;
      font-size: 11px;
      color: #666;
      margin-bottom: 6px;
    }

    aside label.checkbox {
      flex-direction: row;
      align-items: center;
      gap: 6px;
    }

    aside label.checkbox input {
      width: auto;
      accent-color: #e91e63;
    }

    aside input,
    aside select {
      margin-top: 2px;
      padding: 7px 10px;
      background: #ececec;
      border: 1px solid #ddd;
      border-radius: 4px;
      color: #333;
      font-size: 13px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    aside input:focus,
    aside select:focus {
      outline: none;
      border-color: #e91e63;
      background: #fff;
    }

    .row {
      display: flex;
      gap: 8px;
    }

    .row label {
      flex: 1;
      min-width: 0;
    }

    .row label input,
    .row label select {
      width: 100%;
    }

    .preview-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .status {
      padding: 6px 16px;
      font-size: 12px;
      background: #fafafa;
      border-bottom: 1px solid #ddd;
      flex-shrink: 0;
      min-height: 28px;
    }

    .status.success {
      color: #4caf50;
    }

    .status.error {
      color: #e91e63;
    }

    .preview {
      flex: 1;
      overflow: auto;
      padding: 20px;
      background: #f0f0f0;
    }

    .sheet-pair {
      display: flex;
      flex-wrap: nowrap;
      gap: 20px;
      justify-content: center;
    }

    .sheet-wrapper {
      display: inline-block;
    }
  `,customElements.define("imposition-overlay",ImpositionOverlayElement);let overlayEl=null;function openImpositionEditor(e){return overlayEl||(overlayEl=new ImpositionOverlayElement,document.body.appendChild(overlayEl)),overlayEl.open(e)}const DEFAULT_IMPOSITION_DEFINITION={name:"std N-Up",meta:{},definition:{sheetWidth:"320mm",sheetHeight:"450mm",sheetDoubleSided:"true",columns:"auto",rows:"auto",inputPageWidth:"105mm",inputPageHeight:"148.5mm",inputPageCount:"8",gripperLeft:"0mm",gripperTop:"0mm",gripperRight:"0mm",gripperBottom:"0mm",mode:"N-up",slugVertical:"5mm",slugHorizontal:"5mm",bleed:["3mm","3mm","3mm","3mm"],markerDistance:"2mm",markerThickness:"1pt",markerColor:"cmyk 0 0 0 1","marker-strategy":"outside-only","layout-strategy":"minimal-distance",horizontalGutter:"10mm",verticalGutter:"10mm",rotateSignatures:"0"}};var __decorate$5=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcImpositionsPage=class extends s$1{static get styles(){return[accountStyles,i$4`
            :host {
                font-family: var(--printess-text-font);
                color: rgb(85, 85, 85);
            }

            .photobook-themes-container {
              display: flex;
              flex-wrap: wrap;
              gap: 10px;
              padding: 10px;
            }

            .theme-box {
              display: grid;
              grid-template-rows: 150px 40px;
              gap: 5px;
              position: relative;
              width: 150px;
              overflow: hidden;
              cursor: pointer;
               border: 3px solid #ddd;
            }

            .theme-box:hover {
            border: 3px solid var(--printess-pink);
            }

            .theme-caption {
              font-size: 12px;
              text-align: center;
              text-overflow: ellipsis;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .delete-icon {
                width: 26px;
                height: 26px;
                position: absolute;
                background-color: white;
                padding: 3px;
                border-radius: 5px;
                top: 4px;
                right: 4px;
                display: none;
            }

            .theme-box:hover .delete-icon {
                display: block;
            }

            .theme-image {
                margin-bottom: 0px;
                margin-top: 0px;
                width: 150px;
                height: 150px;
                background-color: gray;
                cursor: pointer;
                background-repeat: no-repeat;
                background-position: 50% 50%;
                background-size: cover;
            }

        `]}constructor(){super(),this.impositions=[]}async connectedCallback(){super.connectedCallback(),await this.loadImpositions(),location.hash="#impositions"}showError(e){alert("error msg: "+e.message+"   error code: "+e.code),console.log("error msg: ",e.message,"error code: ",e.code)}async loadImpositions(){const e="impositions",t=await api.readUserSettings({keys:[e]});if(t instanceof ServerErrorResponse$2)this.showError(t);else try{t[e]&&(this.impositions=JSON.parse(t[e]))}catch(e){console.error(e)}}async loadImposition(e){const t="imposition:"+e,o=await api.readUserSettings({keys:[t]});if(o instanceof ServerErrorResponse$2)this.showError(o);else if(o[t])try{return JSON.parse(o[t])}catch(e){return null}return null}async writeSetting(e){const t=await api.writeUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async deleteUserSetting(e){const t=await api.deleteUserSetting(e);t instanceof ServerErrorResponse$2&&this.showError(t)}async openImpositionEditor(e){let t=null;e&&(t=await this.loadImposition(e)),t||(t=DEFAULT_IMPOSITION_DEFINITION);const o=await openImpositionEditor(t);if(o){const e=this.impositions.filter(e=>e.name!==o.definition.name).concat([{name:o.definition.name,svg:o.svg??"https://editor.printess.com/printess-editor/img/default.svg"}]);await this.writeSetting({key:"imposition:"+o.definition.name,json:JSON.stringify(o.definition)}),await this.writeSetting({key:"impositions",json:JSON.stringify(e)}),await this.writeSetting({key:"impositionsWithoutThumbnail",json:JSON.stringify(e.map(e=>e.name))}),this.impositions=e}}async deleteImposition(e){"ok"===prompt("Enter 'ok' to delete imposition: "+e)&&(this.impositions=this.impositions.filter(t=>t.name!==e),await this.writeSetting({key:"impositions",json:JSON.stringify(this.impositions)}),await this.writeSetting({key:"impositionsWithoutThumbnail",json:JSON.stringify(this.impositions.map(e=>e.name))}),await this.deleteUserSetting({key:"imposition:"+e}))}renderImpositions(){return x`
      <div class="photobook-themes-container">
        ${this.impositions.length?this.impositions.sort((e,t)=>e.name.localeCompare(t.name)).map(e=>x`
          <div class="theme-box">
            <wc-icon icon="trash" primaryColor="pink" class="delete-icon" @click="${()=>this.deleteImposition(e.name)}"></wc-icon>
            ${e.svg.startsWith("https://")?x`
              <div class="theme-image" style="background-image: url(${e.svg});" @click="${()=>this.openImpositionEditor(e.name)}"></div>`:x`
              <div class="theme-image" @click="${()=>this.openImpositionEditor(e.name)}">${o$1(e.svg.replace(/width=".+?"/,'width="100%"').replace(/height=".+?"/,'height="100%"'))}</div>`}

            <div class="theme-caption" @click="${()=>this.openImpositionEditor(e.name)}">${e.name}</div>
          </div>
        `):x`
          <div style="padding: 20px">No impositions found</div>
        `}
      </div>
  `}render(){return x`
      <wc-topic-header title="Impositions"></wc-topic-header>

      <p style="font-size: 14px; color: #555555;">
        Manage your impositions. Click on a imposition to edit.
        <wc-button caption="Add Imposition" size="sm" color="pink" margin="0 5px" @click=${()=>this.openImpositionEditor()}></wc-button>
      </p>

      <wc-card-container title="All Your Impositions" color="pink" .hasButtonBelow=${!0}>${this.renderImpositions()}</wc-card-container>
      <wc-button caption="Add Imposition" size="md" color="pink" @click=${()=>this.openImpositionEditor()}></wc-button>
    `}};__decorate$5([e$3({attribute:!1,type:Array})],WcImpositionsPage.prototype,"impositions",void 0),WcImpositionsPage=__decorate$5([e$4("wc-impositions-page")],WcImpositionsPage);var __decorate$4=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};const AiFeatures=["SDXL","Flux Schnell","Flux Dev","Flux Pro","Flux Ultra","Nano Banana","Nano Banana Pro","gpt-image-1","gpt-image-1.5","dall-e-2","Flux Pro Kontext","Flux 2 Klein 4B","OpenAi","Background Remove","Segment Face","Segment Face (CutoutPro)","Segment Anything","Segment Anything 3","Upscale Image","Image Contour","NSFW Check","Face Swap"];function aiFeatureToGroup(e){switch(e){case"SDXL":case"Flux Schnell":case"Flux Dev":case"Flux Pro":case"Flux Ultra":return"textToImage";case"Nano Banana":case"Nano Banana Pro":case"Flux Pro Kontext":case"Flux 2 Klein 4B":case"gpt-image-1":case"gpt-image-1.5":case"dall-e-2":return"imageEdit";case"OpenAi":return"llm";case"Background Remove":case"Segment Face":case"Segment Face (CutoutPro)":case"Segment Anything":case"Segment Anything 3":case"Upscale Image":case"Image Contour":case"NSFW Check":case"Face Swap":return"misc";default:assertNever$1(e)}}let WcAiLimits=class extends s$1{constructor(){super(...arguments),this.saving=!1,this.isInitialized=!1,this.featureAccess=[],this.exampleJson="{}",this.saveState={},this._handleResize=()=>{config.isMobile=window.innerWidth<=config.mobileDeviceWidth,this.requestUpdate()}}static get styles(){return[userProfileStyles,settingsStyles,i$4`
        .grid {
          display: grid;
          grid-template-columns: auto 1fr;
          grid-gap: 8px;
        }

        .grid3 {
          display: grid;
          grid-template-columns: auto auto 1fr;
          grid-gap: 8px;
        }

        .grid3f {
          display: grid;
          grid-template-columns: 100px 30px 250px;
          grid-gap: 8px;
        }

        .center {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        select {
          background-color: var(--printess-lightblue);
        }

        .span2 {
          grid-column: span 2;
        }

        .span3 {
          grid-column: span 3;
        }

        .w {
          color: red;
        }
    `]}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),location.hash="#ai-access",this.initialize()}disconnectedCallback(){window.removeEventListener("resize",this._handleResize),super.disconnectedCallback()}parseAiFeatureAccess(e,t){if(t?.startsWith("{")){const o=JSON.parse(t);if("rateLimit"===o.type)return{feature:e,access:"rateLimit",model:o,group:aiFeatureToGroup(e)}}return{feature:e,access:t,group:aiFeatureToGroup(e)}}async initialize(){let e=await api.readUserSettings({keys:["aiAccess",...AiFeatures.map(e=>"aiAccess:"+e)]});e instanceof ServerErrorResponse$2?alert(e.message):(this.selectedAccountAccess=e.aiAccess,this.featureAccess=AiFeatures.map(t=>this.parseAiFeatureAccess(t,e["aiAccess:"+t])),this.isInitialized=!0)}onAccountAccessChanged(e){this.selectedAccountAccess=e.target.value,this.saveState.aiAccess=this.selectedAccountAccess??""}onFeatureAccessChanged(e,t){const o=t.target.value,r=this.featureAccess.filter(t=>t.feature===e)[0];r.access=o,r.model=void 0,"rateLimit"===o?(r.model={type:"rateLimit",amount:5,period:"5minutes"},this.saveState["aiAccess:"+e]=JSON.stringify(r.model)):this.saveState["aiAccess:"+e]=o??"",this.requestUpdate("featureAccess")}renderAccountAccessDescription(){return this.selectedAccountAccess?"blocked"===this.selectedAccountAccess?x`<div class="span3">Unauthenticated access is blocked for shop users.</div>`:"unrestricted"===this.selectedAccountAccess?x`<div class="span3 w">WARNING! No access rights are checked at all. This can incur high costs.</div>`:"feature"===this.selectedAccountAccess?x`<div class="span3">Setup the access limits for each AI feature for unauthenticated shop users.</div>`:null:x`<div class="span3">Please select an option. When not choosing an option the access will be possibly blocked per default in future.</div>`}onRateLimitingChange(e,t,o){e.model={type:"rateLimit",amount:t,period:o},this.saveState["aiAccess:"+e.feature]=JSON.stringify(e.model),this.requestUpdate("featureAccess")}async saveAiSettings(){const e=[];this.saving=!0;for(const t of Object.keys(this.saveState))e.push(api.writeUserSetting({key:t,json:this.saveState[t]}));this.saveState={};try{await Promise.all(e)}finally{setTimeout(()=>{this.saving=!1},500)}}renderRateLimiting(e){return e.model?"rateLimit"!==e.model.type?x`<div></div>`:x`
      <div class="grid3f">
        <input type="number" .value=${l(e.model.amount.toString())} @change=${t=>this.onRateLimitingChange(e,t.target.valueAsNumber,e.model?.period)} />
        <div class="center">Per</div>
        <select @change=${t=>this.onRateLimitingChange(e,e.model?.amount??5,t.target.value)}>
            <option .selected=${!e.model.period} value="">Please choose an option ...</option>
            <option .selected=${"5minutes"===e.model.period} value="5minutes">5 Minutes</option>
            <option .selected=${"hour"===e.model.period} value="hour">Hour</option>
            <option .selected=${"day"===e.model.period} value="day">Day</option>
        </select>
      </div>
    `:x`<div></div>`}renderAiFeatureSettings(){return"feature"!==this.selectedAccountAccess?null:x`
      ${c(this.featureAccess,e=>e.feature,e=>x`
        <div class="center">${e.feature}</div>
        <select @change=${t=>this.onFeatureAccessChanged(e.feature,t)}>
          <option .selected=${!e.access} value="">Possibly blocked per default in future, please choose one option ...</option>
          <option .selected=${"blocked"===e.access} value="blocked">Blocked</option>
          <option .selected=${"unrestricted"===e.access} value="unrestricted">Unrestricted</option>
          <option .selected=${"rateLimit"===e.access} value="rateLimit">Rate Limit</option>
        </select>
        ${this.renderRateLimiting(e)}
      `)}
    `}renderAccountSettings(){return this.isInitialized?x`
      <div class="grid3">
        <div class="center">Access:</div>
        <select @change=${this.onAccountAccessChanged}>
          <option .selected=${!this.selectedAccountAccess} value="">Blocked per default from March 14th on ...</option>
          <option .selected=${"blocked"===this.selectedAccountAccess} value="blocked">Blocked</option>
          <option .selected=${"unrestricted"===this.selectedAccountAccess} value="unrestricted">Unrestricted</option>
          <option .selected=${"feature"===this.selectedAccountAccess} value="feature">Per Feature</option>
        </select>

        ${this.renderAccountAccessDescription()}
        ${this.renderAiFeatureSettings()}
        <wc-button caption="Save AI Settings" size="md" color="red" @click=${this.saveAiSettings} loadingText="Saving" .loading=${this.saving}></wc-button>
      </div>`:x`<div> Loading settings ...</div>`}pickExample(e){const t=new Date;switch(t.setDate((new Date).getDate()+2),e.target.value){case"simple":this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:{all:{type:"rateLimit",amount:100,period:"hour"}}},void 0,2);break;case"simpleFixed":this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:{all:{type:"fixed",amount:100}}},void 0,2);break;case"simpleTextToImage":this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:{textToImage:{type:"rateLimit",amount:100,period:"hour"}}},void 0,2);break;case"simpleImageEdit":this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:{imageEdit:{type:"rateLimit",amount:100,period:"hour"}}},void 0,2);break;case"allFeatures":{const e={};AiFeatures.forEach(t=>e[t]={type:"rateLimit",amount:100,period:"hour"}),this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:e},void 0,2)}break;case"allFeaturesMixed":{const e={};let o=0;AiFeatures.forEach(t=>{o++,e[t]=o%3==0?{type:"rateLimit",amount:100,period:o%3==0?"hour":o%3==1?"5minutes":"day"}:o%3==1?{type:"fixed",amount:30}:{type:"unrestricted"}}),this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:e},void 0,2)}break;case"allTextToImageFeatures":{const e={};AiFeatures.filter(e=>"textToImage"===aiFeatureToGroup(e)).forEach(t=>e[t]={type:"rateLimit",amount:100,period:"hour"}),this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:e},void 0,2)}break;case"allImageEditFeatures":{const e={};AiFeatures.filter(e=>"imageEdit"===aiFeatureToGroup(e)).forEach(t=>e[t]={type:"rateLimit",amount:100,period:"hour"}),this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:e},void 0,2)}break;case"allLlmFeatures":{const e={};AiFeatures.filter(e=>"llm"===aiFeatureToGroup(e)).forEach(t=>e[t]={type:"rateLimit",amount:100,period:"hour"}),this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:e},void 0,2)}break;case"allMiscFeatures":{const e={};AiFeatures.filter(e=>"misc"===aiFeatureToGroup(e)).forEach(t=>e[t]={type:"rateLimit",amount:100,period:"hour"}),this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:e},void 0,2)}break;case"allButMisc":{const e={all:{type:"rateLimit",amount:100,period:"hour"},misc:"blocked"};this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:e},void 0,2)}break;case"unrestricted":{const e={all:{type:"unrestricted"},misc:"blocked"};this.exampleJson=JSON.stringify({expirationDate:t.toISOString(),accessRights:e},void 0,2)}break;default:this.exampleJson="{}"}}render(){return x`

      <wc-topic-header title="AI Limits"></wc-topic-header>
      <div class="settings-page">
        <p>
        Here you can setup the unauthenticated AI usage limits for your account.
        These settings are <b>account wide</b> and <b>not</b> based on any user session. 
        To handle per user sessions please use the ai authorization token.
        For authenticated access you need to get an authorization token via our api.
        To get an AI authorization token you need to call our api endpoint method "ai/auth/create" with the service token.
        </p>
        <h4>Unauthenticated AI Access</h4>
        ${this.renderAccountSettings()}
        <br />
        <br />
        <h4>Authenticated AI Access Example Payloads</h4>
        <p>
          POST this payload to https://api.printess.com/ai/auth/create to get back an ai auth token.
          This auth token needs to be set in the Printess attach parameters via "aiAuthToken": "YOUR_AUTH_TOKEN".
        </p>
        <p>
          Only specified models are checked, all other are blocked per default.
        </p>
        <select @change=${this.pickExample}>
          <option value="">Please choose an example ...</option>
          <option value="simple">Rate limiting for all AI requests</option>
          <option value="simpleFixed">Fixed limit for all AI requests</option>
          <option value="simpleTextToImage">Rate limiting for all text to image models</option>
          <option value="simpleImageEdit">Rate limiting for all image edit models</option>
          <option value="allFeatures">Rate limiting for each model</option>
          <option value="allFeaturesMixed">Mixed limiting for each model</option>
          <option value="allTextToImageFeatures">Rate limiting for each text to image model</option>
          <option value="allImageEditFeatures">Rate limiting for each image edit model</option>
          <option value="allLlmFeatures">Rate limiting for each large language model (llm)</option>
          <option value="allMiscFeatures">Rate limiting for each miscellaneous model</option>
          <option value="allButMisc">Rate limiting all features, but block misc models</option>
          <option value="unrestricted">Rate limiting showing unrestricted access</option>
        </select>
        <br />
        <br />
        <wc-card-container title="JSON Payloads Example" color="blue">
          <wc-ace-editor-pure mode="json" .text=${this.exampleJson}></wc-ace-editor-pure>
        </wc-card-container>
      </div>
    `}};__decorate$4([e$3({type:Boolean})],WcAiLimits.prototype,"saving",void 0),__decorate$4([e$3({type:Boolean})],WcAiLimits.prototype,"isInitialized",void 0),__decorate$4([e$3({type:String})],WcAiLimits.prototype,"selectedAccountAccess",void 0),__decorate$4([e$3({type:Array})],WcAiLimits.prototype,"featureAccess",void 0),__decorate$4([e$3({type:String})],WcAiLimits.prototype,"exampleJson",void 0),WcAiLimits=__decorate$4([e$4("wc-ai-limits")],WcAiLimits);var __decorate$3=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcTaglistTest=class extends s$1{static get styles(){return i$4`
    .tag-lists {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-gap: 20px;
    }

    .example-heading {
      font-weight: 700;
    }

    wc-universal-tag-list {
      height: auto;
    }

    .tag-lists > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  `}constructor(){super(),this.selectedTags=["aaa","bbb","ccc"],this.layoutTagsGlobal=!0,this.selectedKeywords=[],this.keywordsGlobal=!0,this.selectedThemes=[],this.themeDark=!1,this.layoutTagsAddAllowed=!1,this.selectedTagType="layout-tags",this.selectedImageCategories=[],this.selectedSwitcherLayoutTags=[],this.selectedSwitcherGroupTags=[],this.selectedSwitcherKeywords=[],this.themes=["yellow","green","pink","blue","slim","square","tags-below","yellow-tag"]}connectedCallback(){super.connectedCallback(),location.hash="#taglist-test"}stringifyThemes(){return this.selectedThemes.join(" ")}updateTags(e){this.selectedTags=e}updateKeywords(e){this.selectedKeywords=e}toggleLayoutTagsGlobal(){this.layoutTagsGlobal=!this.layoutTagsGlobal}toggleLayoutTagsAddAlowed(){this.layoutTagsAddAllowed=!this.layoutTagsAddAllowed}toggleKeywordsGlobal(){this.keywordsGlobal=!this.keywordsGlobal}toggleThemeDark(){this.themeDark=!this.themeDark}updateThemes(e){this.selectedThemes=e}selectTagType(e){const t=e.target;isTagType(t.value)&&(this.selectedTagType=t.value)}updateImageCategories(e){this.selectedImageCategories=e}updateCurrentTagType(e){switch(this.selectedTagType){case"layout-tags":this.selectedSwitcherLayoutTags=e;break;case"group-tags":this.selectedSwitcherGroupTags=e;break;case"keywords":this.selectedSwitcherKeywords=e}}selectedSwitcherTags(){switch(this.selectedTagType){case"layout-tags":return this.selectedSwitcherLayoutTags;case"group-tags":return this.selectedSwitcherGroupTags;case"keywords":return this.selectedSwitcherKeywords}}render(){return window.scrollTo({top:0,behavior:"smooth"}),x`
      <wc-topic-header title="Testing Taglists"></wc-topic-header>
      <div class="tag-lists">
        <div>
          <label for="default-tag-list" class="example-heading">Default Case with Layout Tags</label>
          <div>Selected Tags: [${this.selectedTags.join(", ")}]</div>
          <div>
            <input id="global-layout-check" type="checkbox" .checked=${this.layoutTagsGlobal} @change=${()=>this.toggleLayoutTagsGlobal()}/>
            <label for="global-layout-check">Include Global Tags</label>
            <input id="addAllowed-layout-check" type="checkbox" .checked=${this.layoutTagsAddAllowed} @change=${()=>this.toggleLayoutTagsAddAlowed()}/>
            <label for="addAllowed-layout-check">Allow adding Tags</label>
            <button @click=${()=>this.selectedTags=[...this.selectedTags,"Something"]}> Add Something </button>
          </div>
          <wc-universal-tag-list
            id="default-tag-list"
            tagtype="layout-tags"
            .selectedtags=${this.selectedTags}
            @tagsChanged=${e=>this.updateTags(e.detail)}
            .loadglobal=${this.layoutTagsGlobal}
            .addtagsallowed=${this.layoutTagsAddAllowed}
          ></wc-universal-tag-list>
        </div>

        <div>
          <label for="default-keyword-list" class="example-heading">Default Case with Keywords</label>
          <div>Selected Keywords: [${this.selectedKeywords.join(", ")}]</div>
          <div>
            <input id="global-keywords-check" type="checkbox" .checked=${this.keywordsGlobal} @change=${()=>this.toggleKeywordsGlobal()}/>
            <label for="global-keywords-check">Include Global Keywords</label>
          </div>
          <wc-universal-tag-list
            id="default-keyword-list"
            tagtype="keywords"
            @tagsChanged=${e=>this.updateKeywords(e.detail)}
            .loadglobal=${this.keywordsGlobal}
          ></wc-universal-tag-list>
        </div>

        <div>
          <label for="themed-tag-list" class="example-heading">Custom Input (controls themes)</label>
          <div>Selected Themes: [${this.selectedThemes.join(", ")}]</div>
          <wc-universal-tag-list
            id="themed-tag-list"
            tagtype="keywords"
            @tagsChanged=${e=>this.updateThemes(e.detail)}
            .customtags=${this.themes}
          ></wc-universal-tag-list>
        </div>

        <div>
          <label for="themed-tag-list" class="example-heading">Themed Version</label>
          <div>Selected Keywords: ${this.selectedKeywords.join()}</div>
          <div>
            <input id="theme-dark-check" type="checkbox" @change=${()=>this.toggleThemeDark()}/>
            <label for="theme-dark-check">Dark Mode</label>
          </div>

          <wc-universal-tag-list
            id="themed-tag-list"
            tagtype="keywords"
            @tagsChanged=${e=>this.updateKeywords(e.detail)}
            .theme=${this.stringifyThemes()}
            .darkmode=${this.themeDark}
          ></wc-universal-tag-list>
        </div>
        <div>
          <label for="type-switch-tag-list" class="example-heading">Switch TagTypes</label>
          <div>Selected: [${this.selectedSwitcherTags().join(", ")}]</div>
          <div>
            <select @change=${e=>this.selectTagType(e)} id="tag-type-select">
              <option value="layout-tags">Layout Tags</option>
              <option value="group-tags">Group Tags</option>
              <option value="keywords">Keywords</option>
            </select>
            <label for="tag-type-select">Select a Tag Type</label>
          </div>

          <wc-universal-tag-list
            id="type-switch-tag-list"
            .tagtype=${this.selectedTagType}
            @tagsChanged=${e=>this.updateCurrentTagType(e.detail)}
            .selectedtags=${this.selectedSwitcherTags()}
          ></wc-universal-tag-list>
        </div>

        <div>
          <label for="image-categories-tag-list" class="example-heading">ImageCategories</label>
          <div>Selected: [${this.selectedImageCategories.join(", ")}]</div>

          <wc-universal-tag-list
            id="image-categories-tag-list"
            tagtype="image-categories"
            @tagsChanged=${e=>this.updateImageCategories(e.detail)}
          ></wc-universal-tag-list>
        </div>

      </div>
      </div>
    `}};__decorate$3([t$1()],WcTaglistTest.prototype,"selectedTags",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"layoutTagsGlobal",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"selectedKeywords",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"keywordsGlobal",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"selectedThemes",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"themeDark",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"layoutTagsAddAllowed",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"selectedTagType",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"selectedImageCategories",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"selectedSwitcherLayoutTags",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"selectedSwitcherGroupTags",void 0),__decorate$3([t$1()],WcTaglistTest.prototype,"selectedSwitcherKeywords",void 0),WcTaglistTest=__decorate$3([e$4("wc-taglist-test")],WcTaglistTest);var __decorate$2=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcControlsOverview=class extends s$1{static get styles(){return i$4`
      section {
        margin-bottom: 2rem;
        font-size: 14px;
        color: #555555;
      }

      .code-snippet {
        position: relative;
      }

      pre {
        display: flex;
        background: #f0f0f0;
        padding: 20px;
        padding-right: 40px;
        border-radius: 4px;
        overflow-x: auto;
      }

      code {
        display:flex;
        white-space: normal;
      }

      .copy-icon {
        width: 20px;
        height: 30px;
        position: absolute;
        top: 7px;
        right: 9px;
        display: flex;
      }

      .bold {
        font-weight: bold;
      }

      .italic {
        font-style: italic;
      }

      hr {
        border: none;
        border-top: 1px solid #cccccc;
        margin: 20px 0 50px 0;
      }

      .card-content {
        padding: 10px 20px;
      }

      .blue {
        --color: var(--printess-blue);
      }
      .green {
        --color: var(--printess-green);
      }
      .red {
        --color: var(--printess-red);
      }
      .pink {
        --color: var(--printess-pink);
      }
      .orange { 
        --color: var(--printess-orange); 
      }

      .color-list-container {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .color-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
      }
      .color-item {
        padding: 7px 10px;
        border-radius: 4px;
        background: var(--color);
        color: white;
        cursor: pointer;
      }
      .color-item.light {
        color: #404040;
      }

      .color-buttons-container {
        display: grid;
        grid-template-columns: repeat(5, minmax(auto, 150px));
        gap: 10px;
      }

      .button-wrapper {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: flex-end;
      }
    `}connectedCallback(){super.connectedCallback(),location.hash="#controls-overview"}constructor(){super(),this.loading=!1,this.cardColor="red"}setLoading(){this.loading=!0,window.setTimeout(()=>{this.loading=!1},2e3)}copyToClipboard(e){navigator.clipboard.writeText(e).then(()=>{alert("Copied code successfully!")})}renderCodeSnippet(e){return x`
      <div class="code-snippet">
        <wc-icon primaryColor="headline" icon="copy" class="copy-icon" @click=${()=>this.copyToClipboard(e)}></wc-icon>
        <pre>
          <code>
            ${e}
          </code>
        </pre>
      </div>
    `}getColorList(e){return x`

      <div class="color-list-container">
        <span class="bold">Colors: </span>
        <div class="color-list">
          ${e.map(e=>x`<div class="color-item ${e} ${e.includes("light")?"light":""}">${e}</div`)}
        </div>
      </div>
    `}getHeaderComponent(){return x`
      <section>
        <wc-topic-header title="Components Overview"></wc-topic-header>

        <p>
          <span class="bold">Note: </span> An optional <span class="italic"> color </span> attribute can be added.
        </p>

        ${this.renderCodeSnippet('<wc-topic-header title="Components Overview"></wc-topic-header>')}
      </section>
    `}getButtonComponents(){const e=["blue","pink","green","red","light-pink"];return x`
      <section>
        <wc-topic-header title="Buttons"></wc-topic-header>

        <p>
          <span class="bold">Attributes: </span> <br>
          <span class="italic">size: </span> sm (small), md (medium), lg (large) <br>
          <span class="italic">margin: </span> is optional for custom margins <br>
          <span class="italic">loading: </span> enables display of spinner with a <span class="italic">loadingText </span>
        </p>

        <div class="color-buttons-container">
          ${e.map(e=>x`
            <wc-button caption="${e}-sm" color="${e}" size="sm"></wc-button>
          `)}
          ${e.map(e=>x`
            <wc-button caption="${e}-md" color="${e}" size="md"></wc-button>
          `)}
          ${e.map(e=>x`
            <wc-button caption="${e}-lg" color="${e}" size="lg"></wc-button>
          `)}
        </div>

        ${this.renderCodeSnippet('<wc-button caption="caption" size="sm" color="pink" @click=${this.handleButtonAction}></wc-button>')}

        <h3 style="margin: 40px 0 10px;">Icon Buttons</h3>
        <p><span class="italic">Caption </span> is optional</p>

        <div class="button-wrapper">
          <wc-button caption="Close" icon="close" color="blue" size="sm"></wc-button>
          <wc-button caption="Edit" icon="pen" color="pink" size="md"></wc-button>
          <wc-button icon="pencil-ruler" color="green" size="lg"></wc-button>
        </div>

        ${this.renderCodeSnippet('<wc-button caption="Close" icon="close" size="sm" color="red" @click=${this.handleButtonAction}></wc-button>')}

        <h3 style="margin: 40px 0 10px;">Loading Button</h3>
        <p>Click the button below to see the loading animation</p>
        <wc-button caption="Save" color="red" size="md" loadingText="Saving" .loading=${this.loading} @click=${this.setLoading}></wc-button>

        ${this.renderCodeSnippet('<wc-button caption="Save" size="md" color="red" loadingText="Saving" .loading=${this.loading} @click=${this.saveUserSettings}></wc-button>')}
      </section>
    `}getIconButtons(){return x`
      <button
        slot="actions"
        class="wc-card-action"
        title="JSON Builder"
      >
        <wc-icon icon="pencil-ruler" primaryColor="head-toolbar" style="width: 25px; height: 25px;"></wc-icon>
      </button>
    `}getCardComponent(){const e=`<wc-card-container title="Card Container" color="${this.cardColor}">content</wc-card-container>`;return x`
      <section>
        <wc-topic-header title="Card Container"></wc-topic-header>

        <wc-card-container title="Card Component" .color="${this.cardColor}" .hasButtonBelow="${!0}">
          ${this.getIconButtons()}
          <p class="card-content">Content with its own styles goes here</p>
        </wc-card-container>

        <p>
          <span class="bold">Note: </span> If there is a related button below, add the attribute <span class="italic"> .hasButtonBelow="${!0}" </span>.
        </p>

        <div class="color-list-container">
          <span class="bold">Colors: </span>
          <div class="color-list">
            ${["blue","pink","green","red"].map(e=>x`<div class="color-item ${e} ${e.includes("light")?"light":""}" @click=${()=>this.cardColor=e}>${e}</div`)}
          </div>
          <div>(click buttons for color preview)</div>
        </div>
        
        ${this.renderCodeSnippet(e)}

        <p>
          <span class="bold">Icons: </span> For use of icons add icon-buttons before the content inside the wc-card-container.
        <br>
          <span class="bold">Important: </span> Reference to <span class="italic">slot="actions"</span> keeps the icons in the right place.
        </p>

        ${this.renderCodeSnippet('<button slot="actions" class="wc-card-action" title="JSON Builder" @click=${this.handleIconClick}><wc-icon icon="pencil-ruler" primaryColor="head-toolbar" style="width: 25px; height: 25px;"></wc-icon></button>')}
      </section>
    `}getAlertContent(){return x`
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    `}getAlertComponent(){return x`
      <section>
        <wc-topic-header title="Alert Container"></wc-topic-header>

        <p>
          <span class="bold">Note: </span> Choose between an <span class="italic"> attention </span> and an <span class="italic"> info </span> alert.
        </p>

        <wc-alert-container alertType="info" .content="${this.getAlertContent()}"></wc-alert-container>
        ${this.renderCodeSnippet('<wc-alert-container alerttype="info" .content="${this.getAlertContent()}"></wc-alert-container>')}
        <wc-alert-container alertType="attention" .content="${this.getAlertContent()}"></wc-alert-container>
        ${this.renderCodeSnippet('<wc-alert-container alerttype="attention" .content="${this.getAlertContent()}"></wc-alert-container>')}
      </section>
    `}render(){return x`
      <div style="max-width: 900px">
        ${this.getHeaderComponent()}
        <hr>
        ${this.getButtonComponents()}
        <hr>
        ${this.getCardComponent()}
        <hr>
        ${this.getAlertComponent()}
      </div>
    `}};__decorate$2([t$1()],WcControlsOverview.prototype,"loading",void 0),__decorate$2([t$1()],WcControlsOverview.prototype,"cardColor",void 0),WcControlsOverview=__decorate$2([e$4("wc-controls-overview")],WcControlsOverview);var __decorate$1=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcAppLayout=class extends s$1{constructor(){super(...arguments),this.selectedDrawer="editor",this.notifications=0,this.isTrialExpired=!1,this.trialExpiredWarningDisplayed=!1,this.renderForShopify=!1,this.isRedirectPage=""===window.location.hash||"#"===window.location.hash,this._handleHashChange=()=>{this.selectedDrawer=this.setSelectedDrawer(),this.requestUpdate()}}static get styles(){return[layoutStyles,navbarStyles,i$4`
      .redirect-layout {
        height: 100%;
      }

      .toolbar-buttons {
        margin-right: 40px;
        position: relative;
        display: flex;
        align-items: center;
      }

      .editor-btn {
        border: 1px solid white;
        border-radius: 4px;
        padding: 5px 7px;
        font-size: 18px;
        margin-right: 15px;
        color: white;
        background: transparent;
        cursor: pointer;
        font-family: var(--printess-font);
      }
      .editor-btn:hover {
        color: #ffcccc;
        border-color: #ffcccc;
      }

      .help-btn {
        margin-right: 10px; cursor: pointer;
      }
      .menu-btn {
        position: relative;
        cursor: pointer;
      }
      .icon-btn {
        width: 30px;
        height: 25px;
      }

      .notification {
        position: absolute;
        bottom: -10px;
        left: -5px;
        color: var(--printess-lightmagenta);
        border-radius: 50%;
        background: var(--printess-magenta);
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: 700;
      }

      footer {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--printess-navbar-blue);
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 70px;
        font-family: var(--printess-header-font);
        color: #ffffffcc;
      }
      .footer-text {
        margin-left: 20px;
      }

      .disabled {
        opacity: 0.4;
        pointer-events: none;
      }

      @media (max-width: ${config.mobileDeviceWidth}px) {
        .editor-btn {
          font-size: 12px;
          margin-right: 10px;
        }
        .toolbar-buttons {
          margin-right: 15px;
        }
        .help-btn {
          margin-right: 5px;
        }
        .icon-btn {
          height: 20px;
          width: 25px;
        }
        footer {
          flex-direction: column;
        }
        h3 {
          margin: 7px;
          font-size: 14px;
        }
        .footer-text {
          font-size: 12px;
        }
      }
    `]}showError(e){console.log("error msg: ",e.message,"error code: ",e.code)}async loadInvitation(){const e=await api.loadInvitation();e instanceof ServerErrorResponse$2?this.showError(e):e.invitingUser&&e.invitation&&(this.displayNotifications(e),this.invitation=e,this.invitationStatus="pending",this.notifications++)}connectedCallback(){super.connectedCallback(),this.loadInvitation(),window.addEventListener("hashchange",this._handleHashChange),this.selectedDrawer=this.setSelectedDrawer(),this.renderForShopify="Shopify"==currentUser.displayName}disconnectedCallback(){window.removeEventListener("hashchange",this._handleHashChange),super.disconnectedCallback()}displayNotifications(e){const t=new WcDialogNotification(e);return t.showDialog(e=>{this.invitationStatus=e,"accepted"!==e&&"declined"!==e||this.notifications--}),t}setSelectedDrawerCore(e,t,o){const r=config.tokenRoles;if(this.isTrialExpired){if(-1===t)return"pageerror";if(!this.isRedirectPage&&!this.trialExpiredWarningDisplayed){this.trialExpiredWarningDisplayed=!0;(new WcDialogTrialExpiredWarning).showDialog()}return"subscription"}if("#settings"===o||"#advanced-settings"===o)return"advanced-editor-settings";if(t>-1){return drawerCanBeDisplayed(e[t],this.isTrialExpired)?this.selectedDrawerBasedOnApiEndpoint(o.slice(1)):(alert("As "+r[0]+" you don't have access to "+e[t].title),"editor")}return"pageerror"}setSelectedDrawer(){let e=location.hash,t=-1;e&&0===e.indexOf("#o_")&&(e="#"+JSON.parse(decodeURIComponent(window.location.hash.substring(3))).hash);for(const o in publicDrawer){const r=publicDrawer[o];if(t=r.findIndex(t=>t.name===e.slice(1)),-1!==t)return this.setSelectedDrawerCore(r,t,e)}return"pageerror"}selectedDrawerBasedOnApiEndpoint(e){return"design"===e&&"api.printess.com"!==apiEndpoint&&"dev-aws.printess.com"!==apiEndpoint&&"localhost:5001"!==apiEndpoint?(alert("Redirecting to dashboard ..."),"dashboard"):e}renderDrawer(){const e=new WcAppDrawer(this.selectedDrawer,this.isTrialExpired);return e.getDrawerSelection(e=>{this.selectedDrawer=e}),e}getUserContent(){switch(this.isTrialExpired&&"pageerror"!==this.selectedDrawer&&(this.selectedDrawer="subscription"),this.selectedDrawer){case"dashboard":return new WcDashboardPage;case"account":return new WcAccountPage;case"team-members":return new WcTeamMembers;case"templates":return new WcTemplatesPage;case"merge-config":return new WcProductTemplatesPage;case"dropshipper":return new WcDropshipperPage;case"printjobs":return new WcPrintjobsPage;case"dropship-orders":return new WcDropshipOrdersPage;case"sort-index":return new WcGalleryPage;case"submission-errors":return new WcSubmissionErrorsPage;case"siteflow-connections":return new WcSiteflowPage("connections");case"siteflow-products":return new WcSiteflowPage("products");case"siteflow":return new WcSiteflowPage;case"3d":return new Wc3dPage;case"design":return new WcDesignPage;case"translations":return new WcTranslationsPage;case"image-categories":return new WcImageCategoriesPage;case"keyword-menu":return new WcTopicMenuPage;case"editor":return new WcEditorPage;case"subscription":return new WcSubscriptionPage;case"invoices":return new WcInvoicesPage;case"offensive-words":return new WcSettingsPage;case"advanced-buyerside-settings":return new WcAdvancedSettingsBuyerside;case"ai-access":return new WcAiLimits;case"advanced-editor-settings":return new WcAdvancedSettingsEditor;case"advanced-shop-settings":return new WcAdvancedSettingsShop;case"icons":return new WcIconsPage;case"shopintegrations":return new WcShopIntegrationsPage;case"layout-snippets":return new WcAccountLayoutSelection;case"photobook-themes":return new WcPhotobookThemesPage;case"impositions":return new WcImpositionsPage;case"print-settings":return new WcPrintSettingsPage;case"image-ai-effects":return new WcImageAiFilterCategoriesPage;case"taglist-test":return new WcTaglistTest;case"controls-overview":return new WcControlsOverview;case"pageerror":{const e=new WcNotFoundPage,t=config.tokenRoles.indexOf("externalDesigner")>-1?"editor":"dashboard";return e.showErrorPage(e=>!!e&&(this.selectedDrawer=t)),e}default:assertNever$1(this.selectedDrawer)}}userClick(e){const t=[{caption:currentUser.displayName,disabled:!0},{caption:"-"},{caption:"Open Editor",disabled:this.isTrialExpired,icon:"printess-wand",iconColor:"gray",callback:()=>{let e=getEditorUrl();api.token&&(e+="#pt_"+api.token),window.open(e,"_blank")}},{caption:"-"},{caption:"Change Password",callback:()=>{this.sendResetMail()}},{caption:"Log out",callback:()=>{this.logoutUser()}}],o={caption:"Pending Invitation (1)",icon:"user-friends-solid",iconColor:"pink",color:"rgb(211, 39, 124)",bold:!0,callback:()=>{this.displayNotifications(this.invitation)}};"pending"===this.invitationStatus&&(t.splice(1,0,{caption:"-"}),t.splice(2,0,o)),showCtxMenu(e,t)}sendResetMail(){const e=new WcDialogEmailSent;return e.showDialog(),sendPasswordResetMail(),e}logoutUser(){logoutFunc()}renderRedirectPage(){return new WcRedirect(this.isTrialExpired)}render(){return x`
      ${""===location.hash||"#"===location.hash?x`
        <div class="redirect-layout">
          ${this.renderHeader("_self")}
          ${this.renderRedirectPage()}
          ${this.renderFooter()}
        </div>

      `:x`

        <div class="account-layout ${this.renderForShopify?"shopify":""}">
          ${this.renderForShopify?"":x`
            ${this.renderHeader("_blank")}
            <div class="drawer">${this.renderDrawer()}</div>
          `}
          <div id="user-content">
            ${this.getUserContent()}
          </div>
        </div>
      `}
    `}renderHeader(e){let t=getEditorUrl();return api.token&&(t+="#pt_"+api.token),x`
      <header>
        <a href="proxy.php?url=https%3A%2F%2Fprintess.com" id="printess-logo"></a>
        <div class="toolbar-buttons">
          <button class="editor-btn ${this.isTrialExpired?"disabled":""}" @click=${()=>window.open(t,e)}>Open Editor</button>
          <div class="help-btn" title="User Manual - Account Portal" @click=${()=>window.open(config.helpUrl+"account-portal",e)}>
            <wc-icon primaryColor="head-toolbar" icon="help" class="icon-btn"></wc-icon>
          </div>
          <div class="menu-btn" title="User Menu" @mousedown=${e=>this.userClick(e)}>
            <wc-icon primaryColor="head-toolbar" icon="user-solid" class="icon-btn"></wc-icon>
            ${this.notifications>0?x`<div class="notification">${this.notifications}</div>`:""}
          </div>
        </div>
      </header>
    `}renderFooter(){return x`
      <footer>
        <h3>Contact:</h3>
        <div class="footer-text">
          E-Mail: info@printess.com &nbsp; & &nbsp; Phone: +49 337 66 469 886
        </div>
      </footer>
    `}};__decorate$1([e$3({type:String})],WcAppLayout.prototype,"selectedDrawer",void 0),__decorate$1([e$3({type:Number})],WcAppLayout.prototype,"notifications",void 0),__decorate$1([e$3({type:Object})],WcAppLayout.prototype,"invitation",void 0),__decorate$1([e$3({type:String})],WcAppLayout.prototype,"invitationStatus",void 0),__decorate$1([e$3({type:Boolean})],WcAppLayout.prototype,"isTrialExpired",void 0),__decorate$1([e$3({type:Boolean})],WcAppLayout.prototype,"trialExpiredWarningDisplayed",void 0),__decorate$1([e$3({type:Boolean})],WcAppLayout.prototype,"renderForShopify",void 0),WcAppLayout=__decorate$1([e$4("wc-app-layout")],WcAppLayout),i$4`
  :host, :host * {
    box-sizing: border-box; 
  }
  :host  {
    position: absolute;
    background-color: var(--printess-panelBackground);
    box-shadow: black 0 0 10px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: auto;
    max-height: 100vh;
    max-width: 100vw;
    
    font-family: Lato, sans-serif; 
    font-size: var(--printess-textSize);
    color:  var(--printess-textColor); 
    display: grid;
    width: fit-content;
    grid-template-rows: 1fr auto;
    z-index: 100;
}
  .content {
    padding: var(--printess-dialog-padding);
    overflow: auto;
  }
  .footer {                
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: calc(var(--printess-dialog-padding) / 2);
    padding: var(--printess-dialog-padding);
    border-top: 1px solid var(--printess-textColorDisabled);
  }
  .header {                
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: var(--printess-dialog-padding);
    padding-bottom: 25px;
    border-bottom: 1px solid var(--printess-textColorDisabled);
    font-size: var(--printess-headlineSize);
    color: var(--printess-headlineColor);
    
  }
  h1 {
    font-size: var(--printess-headlineSize);
    color: var(--printess-headlineColor);
    margin-top: 20px;
    margin-bottom: 10px;
  }
  p {
    font-size: var(--printess-textSize);
    line-height: 1.4;
    color: var(--printess-textColor);
    margin-top: 10px;
    margin-bottom: 20px;
  }
  p > b {
    color: var(--printess-headlineColor);
  }
`,i$4`
  
    :host {
      display: block;
      width: 100%;
      overflow: hidden; 
    } 
     
   /* :host > *:not(.seperator) {*/
    :host > *:not(.two-cols) {
      /*border-bottom: 20px solid yellow;*/
        margin-bottom: 7px;
    }
    .two-cols > * {
      margin-bottom: 7px;
    }
    .seperator {
      height: 0px;
      opacity: 0.5;
      border-bottom: dashed 1px var(--printess-textColorDisabled);
    }
    p {
      font-size: 12px;
      color: var(--printess-textColor);
      margin: 0px;
      margin-bottom: 3px;
    }
    b {
      background-color: var(--printess-headlineColor);
      color: white;
      padding: 2px;
      padding-left: 6px;
      padding-right: 6px;
      border-radius: 15%;
      box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
      margin-right: 3px;
      margin-left: 3px;
    }
    h5 {
      font-size: 14px;
      color: var(--printess-textColor);
      margin-bottom: 3px;
      margin-top: 2px;
    }
    .section-head {
        font-size: var(--printess-labelSize);
        margin: 0;
        margin-bottom: 10px;
    }
    .two-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 5px;
  }
  .two-cols.uneven {
      grid-template-columns: auto 1fr;
      
  }
  .two-cols.fr2fr1 {
      grid-template-columns: 2fr 1fr;
      
  }
    .buyer-properties-devider {
        margin-top: 20px;
        margin-bottom: 5px;
        background: var(--printess-headlineColor);
        color:  var(--printess-headlineColorInverse);
        padding: 4px;
        font-size: var(--printess-textSize); /* 16px; */
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    .admin-properties-devider {
        position: relative;
        margin-top: 20px;
        margin-bottom: 5px;
        background: var(--printess-headlineColor);
        color:  var(--printess-headlineColorInverse);
        padding: 2px;
        padding-bottom: 3px;
        font-size: var(--printess-labelSize);  
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .anchor-grid {
      display: grid;
            
      align-items: stretch;
      align-content: stretch;
      grid-gap: 8px 8px;
      grid-template-rows:   var(--printess-anchor-size)  var(--printess-anchor-size)  var(--printess-anchor-size) ;
      grid-template-columns:    var(--printess-anchor-size)  var(--printess-anchor-size)  var(--printess-anchor-size) ;
                  
      grid-template-areas:  "m_lt m_ct m_rt"
                            "m_lm m_cm m_rm"
                            "m_lb m_cb m_rb";
      margin-top: 10px;                        
    }
    
    .anchor-box {
        grid-column-start: m_lt; 
        grid-column-end: m_rb;
        grid-row-start: m_lt; 
        grid-row-end: m_rb;
        padding: calc(var(--printess-anchor-size) / 2);
    }
    .anchor-box > div {
        border: 1px solid var(--printess-headlineColor); 
        height: 100%;
    }
    .anchor-grid > .checker {
        border: var(--printess-headlineColor) 1px solid;
      border-radius: 10%;
      transition: border-color;
      transition-duration: 0.7s;
      cursor: pointer;
    }
    .anchor-grid > .checker:hover {
         background-color: white;
    }
    
    .anchor-grid >  .on {
        background-color: var(--printess-headlineColor);
    }
    .anchor-grid >  .off {
        background-color: #eee;
    }
    
    .anchor-grid > .checker.on:hover {
        background-color: var(--printess-headlineColorHover);
    }
    
    .anchor-grid > .mixed {
        background-color: #ddd;
    }
    .anchor-grid > .null {
        background-color: yellow;
    }
`,i$4`
  
    :host {
      display: block;
      width: 100%;
      overflow: hidden; 
    } 
   /* :host > *:not(.seperator) {*/
    :host > *:not(.two-cols) {
      /*border-bottom: 20px solid yellow;*/
        margin-bottom: 7px;
    }
    .two-cols > * {
      margin-bottom: 7px;
    }
    .seperator {
      height: 0px;
      opacity: 0.5;
      border-bottom: dashed 1px var(--printess-textColorDisabled);
    }
    p {
      font-size: 12px;
      color: var(--printess-textColor);
      margin: 0px;
      margin-bottom: 3px;
    }
    b {
      background-color: var(--printess-headlineColor);
      color: white;
      padding: 2px;
      padding-left: 6px;
      padding-right: 6px;
      border-radius: 15%;
      box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
      margin-right: 3px;
      margin-left: 3px;
    }
    h5 {
      font-size: 14px;
      color: var(--printess-textColor);
      margin-bottom: 3px;
      margin-top: 2px;
    }
    .section-head {
        font-size: var(--printess-labelSize);
        margin: 0;
        margin-bottom: 10px;
    }
    .two-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 5px;
  }
    .two-cols.uneven {
      grid-template-columns: auto 1fr;
      
  }
    .header-bar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 5px;
        background: var(--printess-headlineColor);
       
        padding: 4px;
       
    }
    .header-bar-title {
      font-size: var(--printess-textSize); /* 16px; */
      text-transform: none;
      letter-spacing: 0px;
      color: var(--printess-headlineColorInverse);
    }
    .header-button {
      grid-column: 3;
      border: 1px solid var(--printess-headlineColorInverse);
      cursor: pointer;
      display: flex;
      align-items: center;
      flex-direction: row;
    } 
    .header-button:hover {
      background-color: rgba(0,0,0,0.1);
    }
    .header-button-icon {
      padding: 2px;
      width: 24px;
      height: 24px;
      font-size: var(--printess-textSize); /* 16px; */
      text-transform: uppercase;
      color:  var(--printess-headlineColorInverse);
    }
    .header-button-text {
      padding: 2px 6px;
      font-size: var(--printess-textSize); /* 16px; */
      text-transform: none;
      letter-spacing: 0px;
      color:  var(--printess-headlineColorInverse);
    }
    /****** IMAGE PROPERTIES ******/
    .image-property-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-column-gap: 15px;
      align-items: center;
    }
    
    .image-property-caption {
      color: var(--printess-headlineColor);
      font-size: 14px; 
      font-weight: bold;
    }
    .image-property-container {
      display: flex;
      flex-wrap: wrap;
    }
    .image-property-button {
      margin: 5px;
      padding: 3px;
      background-color:  var( --printess-fatButtonBackgroundSelected);
      color:  var(--printess-fatButtonForeground);
      border-radius: 2px;
      cursor: pointer;
      display: flex;
      align-items: center;
      flex-direction: row;
    } 
    
    .image-property-button-icon {
      padding: 2px;
      width: 24px;
      height: 24px;
      font-size: var(--printess-textSize); /* 16px; */
      fill:  var(--printess-fatButtonForeground);
    }
    .image-property-button-text {
      padding: 2px 6px;
      font-size: var(--printess-textSize); /* 16px; */
      text-transform: none;
      letter-spacing: 0px;
      color:  var( --printess-fatButtonForeground);
    } 
    .image-property-button.sepia > * {
      color: #a39775;
      fill: #a39775;
    }
    .image-property-button.enhance > * {
      color: #7b658b;
      fill: #7b658b;
    }
    .image-property-button:hover {
      background-color: var(--printess-headlineColor);
    }
    .image-property-button:hover > * {
      color: var(--printess-headlineColorInverse);
      fill: var(--printess-headlineColorInverse);
    }
    
   /* .image-property-button.sepia:hover > * {
      color: #746b53;
      fill: #746b53;
    }*/
  
   /* .image-property-button.enhance:hover > * {
      color: #544560;
      fill: #544560;
    }*/
   
    
    .color-list {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .color-list > * {
      margin: 4px;
    }
    
    .admin-properties-devider {
        position: relative;
        margin-top: 20px;
        margin-bottom: 5px;
        background: var(--printess-headlineColor);
        color:  var(--printess-headlineColorInverse);
        padding: 2px;
        padding-bottom: 3px;
        font-size: var(--printess-labelSize);  
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .anchor-grid {
      display: grid;
            
      align-items: stretch;
      align-content: stretch;
      grid-gap: 8px 8px;
      grid-template-rows:   var(--printess-anchor-size)  var(--printess-anchor-size)  var(--printess-anchor-size) ;
      grid-template-columns:    var(--printess-anchor-size)  var(--printess-anchor-size)  var(--printess-anchor-size) ;
                  
      grid-template-areas:  "m_lt m_ct m_rt"
                            "m_lm m_cm m_rm"
                            "m_lb m_cb m_rb";
      margin-top: 10px;                        
    }
    
    .anchor-box {
        grid-column-start: m_lt; 
        grid-column-end: m_rb;
        grid-row-start: m_lt; 
        grid-row-end: m_rb;
        padding: calc(var(--printess-anchor-size) / 2);
    }
    .anchor-box > div {
        border: 1px solid var(--printess-headlineColor); 
        height: 100%;
    }
    .anchor-grid > .checker {
        border: var(--printess-headlineColor) 1px solid;
      border-radius: 10%;
      transition: border-color;
      transition-duration: 0.7s;
      cursor: pointer;
    }
    .anchor-grid > .checker:hover {
         background-color: white;
    }
    
    .anchor-grid >  .on {
        background-color: var(--printess-headlineColor);
    }
    .anchor-grid >  .off {
        background-color: #eee;
    }
    
    .anchor-grid > .checker.on:hover {
        background-color: var(--printess-headlineColorHover);
    }
    
    .anchor-grid > .mixed {
        background-color: #ddd;
    }
    .anchor-grid > .null {
        background-color: yellow;
    }
    .imageListWrapper {
        display: block;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 22px; /* because of scrollbar */
    }
    .imageList {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin: -2px;
    }
    .imageItem {
        display: grid;
        grid-template-columns: 70px;
        grid-template-rows: 70px;
        margin: 2px;
        cursor: pointer;
    }
    .small-image-list {
        height: 70px;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 2px;
    }
    .small-image-item {
        width: 33px;
        height: 33px;
        margin-right: 2px;
        margin-bottom: 2px;
        cursor: pointer;
    }
   
    .imageBox {
        width: 100%;  
        height: 100%;
      
        background-size: cover;
        border: 1px solid  var(--printess-textColor);
        border-radius: 3px;
        background-color: #bbb;
     } 
     .imageBox:hover {
      border: 1px solid  var(--printess-headlineColor);
     }
     .imageBox.selected {
        border: 2px solid  var(--printess-headlineColor);
    }
    .imageName {
        font-size: 9px;
        text-overflow: ellipsis;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }   
    .image-upload .progress {
      width: 250px; 
      border: 1px solid black; 
      height: 22px;
    }
    .image-upload-progress > div {
      background: var(--printess-headlineColor); 
      height: 100%; 
      color: var(--printess-headlineColorInverse);
      text-align: center;
      padding: 2px;
    }

    









    
`;const masterStyles=i$4` 
:root {
    --printess-properties-width: 442px;
    --printess-resourcebar-width: 32px;
    --printess-toolbar-width: 38px;
    --printess-open-toolbar-width: 72px;
    --printess-top-tabs-height: 36px;
    --printess-dialog-padding: 20px;
    --printess-anchor-size: 10px; /* small boxes in anchor grid */
    /**** PATH EDITOR  ******/
    --printess-path-editor-cover-bg: rgba(0,0,0,0.1);
    --printess-path-editor-cover-border: 1px solid rgba(0,0,0,0.5);
    --printess-path-editor-path-color: #21b7ff;
    --printess-path-editor-disabled-path-color: #bbbbbb;
    /**** Z-INDEX *****/
    --printess-z-index-ui-hint: 9987;
    --printess-z-index-context-menu: 9990;
    --printess-z-index-box-drag: 9985;
    --printess-z-index-box-selection: 9980;
    --printess-z-index-click-action-boxes: 9975;
    --printess-z-index-page-border: 9970;
    --printess-z-index-pasteboard: 9960;
    --printess-z-index-bleed: 9962;
    
    
    /*** FRAME  ***/
    --printess-frame-mover-size: 5px;
    --printess-extra-mover-catch-offset: -14px;
    --printess-cropper-large-side: 15px;
    --printess-cropper-small-side: 5px;
    --printess-annotationColor: DarkSlateBlue;
    --printess-rubberBandColor: red;
    --printess-resource-toolbar-width: 32px;
    --printess-resource-panel-initial-width: 200px;
    /* Mobile buyer side */ 
    /***** FORM PADDING *****/
    --printess-input-top-padding: 0; /*8px;*/ 
 
    /***** TEXT SIZE *****/
    --printess-annotationSize: 10px;
    --printess-labelSize: 11px;
    --printess-inputSize: 12px;
    --printess-textSize: 14px;
    --printess-headlineSize: 18px;
 
    /****** HEAD-TOOLBAR *******/ 
    --printess-headToolbarColor: white;
    --printess-headToolbarColorHover: #ffcccc;
    --printess-headToolbarBackgroundColor:   rgb(150, 150, 150);
    --printess-headToolbarBorderColor:   #444444; 
    /*** VAADIN COLOR MAPPING ***/
    --lumo-primary-text-color: var(--printess-headlineColor);
    --lumo-primary-color: var(--printess-headlineColor);
    --lumo-secondary-text-color: var(--printess-textColor) ;
    --lumo-disabled-text-color: var(--printess-textColorDisabled);  
    --lumo-body-text-color: var(--printess-inputColor);
    --lumo-base-color: var(--printess-panelBackground);
    --lumo-contrast-60pct: var(--printess-textColor);
    --lumo-contrast-5pct: var(--printess-inputBackgroundDisabled); /* input disabled background color */ 
    --lumo-contrast-10pct: var(--printess-inputBackground); /*rgba(255,255,255,0.2);*/ /* input background-color */
    --lumo-contrast-20pct: var(--printess-radioBackground); /*rgba(255,255,255,0.2);*/ /* input background-color used in radio buttons */
    --lumo-contrast-30pct: var(--printess-radioBackgroundHover); /*rgba(255,255,255,0.2);*/ /* input background-color used in radio buttons */
    --lumo-space-m: var(--printess-input-top-padding); /* padding-top of vaadin-text-box */
    --vaadin-text-field-default-width: 50px; /* make smaller to addopt to 100% later */
    /*input and button captions */ 
    --lumo-font-size-s: var(--printess-inputSize); /* input box size */
    --lumo-font-size-m:  var(--printess-inputSize); /* select-box does not react to theme=small */
    /*labels*/
    --lumo-font-size-xs:  var(--printess-labelSize); 
   
    /* MOBILE THEME DEFAULT */ 
    --printess-maxContrastColor: white;
    --printess-maxContrastColorInverse: black;
   
    /****** TEXT COLORS ********/
    --printess-headlineColor: #ff82d7;  
    --printess-headlineColorInverse: white;  
    --printess-headlineColorHover: #ffbeea;  
    --printess-textColor:#fff;
    --printess-textColorDisabled: #ddd;
    --printess-menuColorDisabled: #aaa;
    --printess-textColorHover: #fff;
    
    --printess-inputColor: white;
    --printess-inputColorDisabled:  rgb(200,200,200);
    --printess-inputBackground: rgba(255, 255, 255, 0.1);
    --printess-radioBackground: rgba(255, 255, 255, 0.2);
    --printess-radioBackgroundHover: rgba(255, 255, 255, 0.3);
    --printess-inputBackgroundDisabled: rgba(255, 255, 255, 0.05); 
    /****** FAT-BUTTON *****/
    --printess-fatButtonBackground: var(--printess-panelBackground);
    --printess-fatButtonBackgroundHover: var( --panelBackgroundHover:);
    --printess-fatButtonBackgroundSelected: var(--printess-panelBackgroundSelected);
    --printess-fatButtonForeground: var(--printess-textColor);
    --printess-fatButtonForegroundSelected: var(--printess-headlineColor);
     /****** SIDE-TOOLBARs *******/ 
    --printess-toolbarColor:  #fff;
    --printess-toolbarColorHover: #fff;
    --printess-toolbarBackgroundSelected: #000;
    --printess-toolbarBackground: #333; 
    --printess-toolbarBackgroundHover: #222;
    --printess-toolbarBorderColor:  Indigo; /* black */
     /*** PANEL COLORS ***/
    --printess-panelBackground: #15518e; //   hsl(214, 90%, 52%);  
    --printess-panelBackgroundSelected: #2a2a2a;
    --printess-panelAnchorMixed: #934a7c;
    --printess-panelBackgroundHover: #222;
    --printess-slider-rail: hsl(216, 85%, 68%);
    --printess-frameColor: #21b7ff;
    --printess-frameColorHover:  #1ca0df;
     
}
/* DESKTOP / TABLET STYLES */






  
*, *:before, *:after {
    box-sizing: border-box;
}
#printessMainGrid h1 {
  color: var(--printess-headlineColor);
}
#printessMainGrid h2 {
  color: red; 
}
#printessMainGrid {
    background: var(--printess-panelBackground); /* #727272;*/
    font-family: Lato, sans-serif; 
    font-size: var(--printess-textSize);
    overflow: hidden;
    margin: 0;
    padding: 0;
    color:  var(--printess-textColor); 
    opacity: 0; /* until loaded */
}
.printess-container-fullscreen {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: initial !important;
  height: initial !important;
  right: 0 !important;
  bottom: 0 !important;
}
#printessCopyPasteIndicator {
    background-color: black;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    opacity: 0.25;
}
#printess-clipboard-container {
    height: 16px;
    width: 50px;
    position: absolute;
   right: 100px;;
    top: 0
}
 
/*
 ************** MAIN LAYOUT GRID  *******************
 */
#printessMainGrid {
    transform: none;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*width: 100vw;
    height: 100vh;*/
   /* background-color: transparent;*/
    display: grid;
    grid-gap: 0;
    grid-template-rows: 0px 36px auto 100px;
    grid-template-columns: 1fr;
    grid-template-areas: 'doc-selector' 'toolbar' 'stage' 'properties';
}
#printessMainGrid.hide-controls {
    grid-template-areas: 'stage';
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}
#printessMainGrid.hide-controls > .doc-selector,
#printessMainGrid.hide-controls > .toolbar,
#printessMainGrid.hide-controls > .printess-resources,
#printessMainGrid.hide-controls > .printess-properties,
#printessMainGrid.hide-controls > .printess-buyer-pages,
#printessMainGrid.hide-controls > .printess-data-panel,
#printessMainGrid.hide-controls > .printess-footer,
#printessMainGrid.hide-controls > #resourcesSplitterBar,
#printessMainGrid.hide-controls > #propertiesSplitterBar
{
  display: none !important;
}
.printess-data-panel {
  border-top: 1px solid black;
  grid-area: data;
  height: inherit;
}
.printess-resources {
    grid-area: resources;
    display: none;
    height: 100%;
    background: var(--printess-panelBackground);
}
#propertiesSplitterBar {
    grid-area: propertiesSplitterBar;
}
#resourcesSplitterBar {
    grid-area: resourcesSplitterBar;
    display: none;
}
#printessMainGrid.admin > #resourcesSplitterBar {
    display: block;
}
#resourcesSplitterBar, #propertiesSplitterBar {
    background-color: black; /* loooks better in dark and light mode var(--printess-maxContrastColor); */
    cursor: ew-resize;
    position: relative;
    display: none;
}
#resourcesSplitterBar::after, #propertiesSplitterBar::after {
    content: "";
    position: absolute;
    background-color: transparent;
    width: 7px;
    left: -3px;
    top: 0;
    bottom: 0;
    cursor: ew-resize;
}
.printess-nav-bar {
    grid-row: 2;
    height: 100%;
    width: 100%;
    grid-area: toolbar;
}
.printess-doc-selector {
    grid-row: 1;
    grid-area: doc-selector;
    display: none;
}
.printess-stage {
    grid-area: stage;
    height: 100%;
    overflow: hidden;
    background: #4e4e50;
    position: relative;
}
.printess-stage  > .printess-content {
    width: 1200px;
    height: 1200px;
    position: relative;
    /* background: white;*/
}
.printess-properties {
    grid-area: properties;
    height: 100%;
    background: var(--printess-panelBackground);
    position: relative;
}
.printess-buyer-pages {
    grid-area: pages;
    height: 100%;
    display: none;
    background: var(--printess-panelBackground);
}
#printessMainGrid.buyer > .printess-buyer-pages {
    display: block;
}
.printess-footer {
    background-color: lightblue;
    grid-area: footer;
}














 /*
 ******** SAFARI WEB APP NOTIFICATION 
 */
 #webAppNotification {
  z-index: 99999;
  display: none;
  position: absolute;
  bottom: 30px;
  left: 5%;
  right: 5%;
  height: 80px;
  padding: 7px;
  border-radius: 3px;
  background-color: #f7f8ef; /* ED6BB8FF*/ 
  color:  black;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0px 5px 10px black;
} 
/* Triangle hack to make tooltip look like a speech bubble */
#webAppNotification:after {
  position: absolute;
  bottom: -20px;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 20px solid #f7f8ef;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
  
}
#webAppNotification > .closeAppNotification {
  position: absolute;
  cursor: pointer;
  left: 4px;
  top: 4px;
  text-decoration: underline; 
  color: darkblue;
}
#webAppNotification > .closeAppNotification:hover {
  color: red;
}
/*
 ************** CONTEXT MENU AND TOAST************
 */
/*
.printess-toastwrp {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    overflow: hidden;
    z-index: -999;
}
.printess-toast {
    position: absolute;
    border-radius: 3px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.43);
    color: rgba(255, 255, 255, 0.84);
    animation-name: printess-toast;
    animation-duration: 1s;
    animation-iteration-count: 1;
    transition-timing-function: cubic-bezier(0.27, 0.81, 0.86, 1.37);
}
@keyframes printess-toast {
    0% {
        top: 100vh;
    }
    30% {
        top: 90vh;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        top: 90vh;
    }
}*/
/* BASIC MENU */
.printess-ctx-menu, .printess-rev-ctx-menu, .printess-sub-menu {
    cursor: pointer;
    position: absolute;
    border-radius: 2px;
    width: 150px;
    height: 200px;
    background-color: white;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 4px #555;
    animation-duration: 0.2s;
    animation-iteration-count: 1;
    transition: 0.2s;
    font-family: Lato, sans-serif; 
}
.printess-ctx-menu-item {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    grid-template-rows: 28px;
    list-style-type: none;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
  
}
.printess-ctx-menu-item-seperator {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--printess-textColorDisabled);
    margin-top: 3px;
    margin-bottom: 3px;
}
.printess-ctx-menu-item > .printess-ctx-menu-caption {
  color: #555555;
  white-space: nowrap;
  align-self: center;
  font-size: var(--printess-inputSize);
  padding-left: 10px;
}
.printess-ctx-menu-item > wc-icon {
   width: 16px;
   height: 16px; 
   align-self: center;
   justify-self: center;
}
.printess-ctx-menu-item > wc-icon.arrow {
   width: 14px;
   height: 14px;
   align-self: center;
   justify-self: center;
}
.printess-ctx-menu-item > .color {
   width: 16px;
   height: 16px;
   align-self: center;
   justify-self: center;
}
.printess-ctx-menu-item.disabled > .printess-ctx-menu-caption{
    color: var(--printess-menuColorDisabled);
}
.printess-ctx-menu-item:hover {
    background-color: var(--printess-headlineColor);
}
.printess-ctx-menu-item:hover > .printess-ctx-menu-caption, .printess-ctx-menu-item:hover > wc-icon {
    color: #fff!important;
}
 .printess-ctx-menu-item.disabled:hover {
    background-color: transparent; 
    
}
 .printess-ctx-menu-item.disabled:hover > .printess-ctx-menu-caption{
     color: var(--printess-menuColorDisabled);
}
.printess-ctx-menu:hover, .printess-rev-ctx-menu:hover, .printess-sub-menu:hover {
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.05) inset, 0px 4px 8px #555;
}
.printess-ctx-menu ul {
    margin: 0;
    padding: 0;
    text-align: left;
}
.printess-ctx-menu {
    animation-name: printess-appear;
    z-index: var(--printess-z-index-context-menu);
}
.printess-rev-ctx-menu {
    animation-name: printess-revappear;
}
.printess-sub-menu {
    height: 175px;
    display: none;
    overflow: auto;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.05) inset, 0px 4px 8px #555;
}
.printess-sub-menu:hover {
    display: block;
}
.printess-red-line {
    position: absolute;
    height: 3px;
    width: 25px;
    top: 12px;
    left: 1px;
    transform-origin: 50% 50%;
    transform: rotate(45deg);
    background-color: red;
}
@keyframes printess-appear { 
    0% {
        transform: scale(0.1) translateX(-100px);
    }
    100% {
        transform: scale(1) translateX(0px);
    }
}
@keyframes printess-revappear {
    0% {
        transform: scale(0.1) translateX(100px);
    }
    100% {
        transform: scale(1) translateX(0px);
    }
}
`;class JOSEError extends Error{constructor(e){super(e),this.code=JOSEError.code,this.name=this.constructor.name,Error.captureStackTrace&&Error.captureStackTrace(this,this.constructor)}}JOSEError.code="ERR_JOSE_GENERIC";class JWTClaimValidationFailed extends JOSEError{constructor(e,t="unspecified",o="unspecified"){super(e),this.code=JWTClaimValidationFailed.code,this.claim=t,this.reason=o}}JWTClaimValidationFailed.code="ERR_JWT_CLAIM_VALIDATION_FAILED";class JOSEAlgNotAllowed extends JOSEError{constructor(){super(...arguments),this.code=JOSEAlgNotAllowed.code}}JOSEAlgNotAllowed.code="ERR_JOSE_ALG_NOT_ALLOWED";class JOSENotSupported extends JOSEError{constructor(){super(...arguments),this.code=JOSENotSupported.code}}JOSENotSupported.code="ERR_JOSE_NOT_SUPPORTED";class JWEDecryptionFailed extends JOSEError{constructor(){super(...arguments),this.code=JWEDecryptionFailed.code,this.message="decryption operation failed"}}JWEDecryptionFailed.code="ERR_JWE_DECRYPTION_FAILED";class JWEInvalid extends JOSEError{constructor(){super(...arguments),this.code=JWEInvalid.code}}JWEInvalid.code="ERR_JWE_INVALID";class JWSInvalid extends JOSEError{constructor(){super(...arguments),this.code=JWSInvalid.code}}JWSInvalid.code="ERR_JWS_INVALID";class JWTInvalid extends JOSEError{constructor(){super(...arguments),this.code=JWTInvalid.code}}JWTInvalid.code="ERR_JWT_INVALID";class JWKInvalid extends JOSEError{constructor(){super(...arguments),this.code=JWKInvalid.code}}JWKInvalid.code="ERR_JWK_INVALID";class JWKSInvalid extends JOSEError{constructor(){super(...arguments),this.code=JWKSInvalid.code}}JWKSInvalid.code="ERR_JWKS_INVALID";class JWKSNoMatchingKey extends JOSEError{constructor(){super(...arguments),this.code=JWKSNoMatchingKey.code,this.message="no applicable key found in the JSON Web Key Set"}}JWKSNoMatchingKey.code="ERR_JWKS_NO_MATCHING_KEY";class JWKSMultipleMatchingKeys extends JOSEError{constructor(){super(...arguments),this.code=JWKSMultipleMatchingKeys.code,this.message="multiple matching keys found in the JSON Web Key Set"}}JWKSMultipleMatchingKeys.code="ERR_JWKS_MULTIPLE_MATCHING_KEYS";class JWSSignatureVerificationFailed extends JOSEError{constructor(){super(...arguments),this.code=JWSSignatureVerificationFailed.code,this.message="signature verification failed"}}JWSSignatureVerificationFailed.code="ERR_JWS_SIGNATURE_VERIFICATION_FAILED";class JWTExpired extends JWTClaimValidationFailed{constructor(){super(...arguments),this.code=JWTExpired.code}}JWTExpired.code="ERR_JWT_EXPIRED";const encoder=new TextEncoder,decoder=new TextDecoder;function concat(...e){const t=e.reduce((e,{length:t})=>e+t,0),o=new Uint8Array(t);let r=0;return e.forEach(e=>{o.set(e,r),r+=e.length}),o}const isDisjoint=(...e)=>{const t=e.filter(Boolean);if(0===t.length||1===t.length)return!0;let o;for(const e of t){const t=Object.keys(e);if(o&&0!==o.size)for(const e of t){if(o.has(e))return!1;o.add(e)}else o=new Set(t)}return!0};function isObjectLike(e){return"object"==typeof e&&null!==e}function isObject(e){if(!isObjectLike(e)||"[object Object]"!==Object.prototype.toString.call(e))return!1;if(null===Object.getPrototypeOf(e))return!0;let t=e;for(;null!==Object.getPrototypeOf(t);)t=Object.getPrototypeOf(t);return Object.getPrototypeOf(e)===t}const checkKeyType=(e,t)=>{if(e.startsWith("HS")||"dir"===e||e.startsWith("PBES2")||e.match(/^A\d{3}(?:GCM)KW$/)){if(t instanceof Uint8Array||"secret"===t.type)return;throw new TypeError('CryptoKey or KeyObject instances for symmetric algorithms must be of type "secret"')}if(t instanceof Uint8Array)throw new TypeError("CryptoKey or KeyObject instances must be used for asymmetric algorithms");if("secret"===t.type)throw new TypeError('CryptoKey or KeyObject instances for asymmetric algorithms must not be of type "secret"')};function getGlobal(){if("undefined"!=typeof globalThis)return globalThis;if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;throw new Error("unable to locate global object")}var globalThis$1=getGlobal();const decode=e=>{let t=e;t instanceof Uint8Array&&(t=decoder.decode(t)),t=t.replace(/-/g,"+").replace(/_/g,"/").replace(/\s/g,"");try{return new Uint8Array(globalThis$1.atob(t).split("").map(e=>e.charCodeAt(0)))}catch(e){throw new TypeError("The input to be decoded is not correctly encoded.")}};function subtleDsa(e){switch(e){case"HS256":return{hash:{name:"SHA-256"},name:"HMAC"};case"HS384":return{hash:{name:"SHA-384"},name:"HMAC"};case"HS512":return{hash:{name:"SHA-512"},name:"HMAC"};case"PS256":return{hash:{name:"SHA-256"},name:"RSA-PSS",saltLength:32};case"PS384":return{hash:{name:"SHA-384"},name:"RSA-PSS",saltLength:48};case"PS512":return{hash:{name:"SHA-512"},name:"RSA-PSS",saltLength:64};case"RS256":return{hash:{name:"SHA-256"},name:"RSASSA-PKCS1-v1_5"};case"RS384":return{hash:{name:"SHA-384"},name:"RSASSA-PKCS1-v1_5"};case"RS512":return{hash:{name:"SHA-512"},name:"RSASSA-PKCS1-v1_5"};case"ES256":return{hash:{name:"SHA-256"},name:"ECDSA",namedCurve:"P-256"};case"ES384":return{hash:{name:"SHA-384"},name:"ECDSA",namedCurve:"P-384"};case"ES512":return{hash:{name:"SHA-512"},name:"ECDSA",namedCurve:"P-521"};default:throw new JOSENotSupported(`alg ${e} is not supported either by JOSE or your javascript runtime`)}}var crypto$1=globalThis$1.crypto;function isCryptoKey(e){return void 0!==globalThis$1.CryptoKey&&(null!=e&&e instanceof globalThis$1.CryptoKey)}var checkKeyLength=(e,t)=>{if(e.startsWith("HS")){const o=parseInt(e.substr(-3),10),{length:r}=t.algorithm;if("number"!=typeof r||r<o)throw new TypeError(`${e} requires symmetric keys to be ${o} bits or larger`)}if(e.startsWith("RS")||e.startsWith("PS")){const{modulusLength:o}=t.algorithm;if("number"!=typeof o||o<2048)throw new TypeError(`${e} requires key modulusLength to be 2048 bits or larger`)}};function getCryptoKey(e,t,o){if(isCryptoKey(t))return t;if(t instanceof Uint8Array){if(!e.startsWith("HS"))throw new TypeError("symmetric keys are only applicable for HMAC-based algorithms");return crypto$1.subtle.importKey("raw",t,{hash:{name:`SHA-${e.substr(-3)}`},name:"HMAC"},!1,[o])}throw new TypeError("invalid key input")}const verify=async(e,t,o,r)=>{const i=await getCryptoKey(e,t,"verify");checkKeyLength(e,i);const a=subtleDsa(e);try{return await crypto$1.subtle.verify(a,i,o,r)}catch(e){return!1}};function validateCrit(e,t,o,r,i){if(void 0!==i.crit&&void 0===r.crit)throw new e('"crit" (Critical) Header Parameter MUST be integrity protected');if(!r||void 0===r.crit)return new Set;if(!Array.isArray(r.crit)||0===r.crit.length||r.crit.some(e=>"string"!=typeof e||0===e.length))throw new e('"crit" (Critical) Header Parameter MUST be an array of non-empty strings when present');let a;a=void 0!==o?new Map([...Object.entries(o),...t.entries()]):t;for(const t of r.crit){if(!a.has(t))throw new JOSENotSupported(`Extension Header Parameter "${t}" is not recognized`);if(void 0===i[t])throw new e(`Extension Header Parameter "${t}" is missing`);if(a.get(t)&&void 0===r[t])throw new e(`Extension Header Parameter "${t}" MUST be integrity protected`)}return new Set(r.crit)}const validateAlgorithms=(e,t)=>{if(void 0!==t&&(!Array.isArray(t)||t.some(e=>"string"!=typeof e)))throw new TypeError(`"${e}" option must be an array of strings`);if(t)return new Set(t)},checkExtensions=validateCrit.bind(void 0,JWSInvalid,new Map([["b64",!0]])),checkAlgOption=validateAlgorithms.bind(void 0,"algorithms");async function flattenedVerify(e,t,o){var r;if(!isObject(e))throw new JWSInvalid("Flattened JWS must be an object");if(void 0===e.protected&&void 0===e.header)throw new JWSInvalid('Flattened JWS must have either of the "protected" or "header" members');if(void 0!==e.protected&&"string"!=typeof e.protected)throw new JWSInvalid("JWS Protected Header incorrect type");if(void 0===e.payload)throw new JWSInvalid("JWS Payload missing");if("string"!=typeof e.signature)throw new JWSInvalid("JWS Signature missing or incorrect type");if(void 0!==e.header&&!isObject(e.header))throw new JWSInvalid("JWS Unprotected Header incorrect type");let i={};if(e.protected){const t=decode(e.protected);i=JSON.parse(decoder.decode(t))}if(!isDisjoint(i,e.header))throw new JWSInvalid("JWS Protected and JWS Unprotected Header Parameter names must be disjoint");const a={...i,...e.header};let s=!0;if(checkExtensions(null==o?void 0:o.crit,i,a).has("b64")&&(s=i.b64,"boolean"!=typeof s))throw new JWSInvalid('The "b64" (base64url-encode payload) Header Parameter must be a boolean');const{alg:n}=a;if("string"!=typeof n||!n)throw new JWSInvalid('JWS "alg" (Algorithm) Header Parameter missing or invalid');const l=o&&checkAlgOption(o.algorithms);if(l&&!l.has(n))throw new JOSEAlgNotAllowed('"alg" (Algorithm) Header Parameter not allowed');if(s){if("string"!=typeof e.payload)throw new JWSInvalid("JWS Payload must be a string")}else if("string"!=typeof e.payload&&!(e.payload instanceof Uint8Array))throw new JWSInvalid("JWS Payload must be a string or an Uint8Array instance");"function"==typeof t&&(t=await t(i,e)),checkKeyType(n,t);const c=concat(encoder.encode(null!==(r=e.protected)&&void 0!==r?r:""),encoder.encode("."),"string"==typeof e.payload?encoder.encode(e.payload):e.payload),d=decode(e.signature);if(!await verify(n,t,d,c))throw new JWSSignatureVerificationFailed;let p;p=s?decode(e.payload):"string"==typeof e.payload?encoder.encode(e.payload):e.payload;const h={payload:p};return void 0!==e.protected&&(h.protectedHeader=i),void 0!==e.header&&(h.unprotectedHeader=e.header),h}async function compactVerify(e,t,o){if(e instanceof Uint8Array&&(e=decoder.decode(e)),"string"!=typeof e)throw new JWSInvalid("Compact JWS must be a string or Uint8Array");const{0:r,1:i,2:a,length:s}=e.split(".");if(3!==s)throw new JWSInvalid("Invalid Compact JWS");const n=await flattenedVerify({payload:i||void 0,protected:r||void 0,signature:a||void 0},t,o);return{payload:n.payload,protectedHeader:n.protectedHeader}}var epoch=e=>Math.floor(e.getTime()/1e3);const minute=60,hour=3600,day=86400,week=7*day,year=31557600,REGEX=/^(\d+|\d+\.\d+) ?(seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)$/i;var secs=e=>{const t=REGEX.exec(e);if(!t)throw new TypeError("invalid time period format");const o=parseFloat(t[1]);switch(t[2].toLowerCase()){case"sec":case"secs":case"second":case"seconds":case"s":return Math.round(o);case"minute":case"minutes":case"min":case"mins":case"m":return Math.round(60*o);case"hour":case"hours":case"hr":case"hrs":case"h":return Math.round(3600*o);case"day":case"days":case"d":return Math.round(o*day);case"week":case"weeks":case"w":return Math.round(o*week);default:return Math.round(o*year)}};const normalizeTyp=e=>e.toLowerCase().replace(/^application\//,""),checkAudiencePresence=(e,t)=>"string"==typeof e?t.includes(e):!!Array.isArray(e)&&t.some(Set.prototype.has.bind(new Set(e)));var jwtPayload=(e,t,o={})=>{const{typ:r}=o;if(r&&("string"!=typeof e.typ||normalizeTyp(e.typ)!==normalizeTyp(r)))throw new JWTClaimValidationFailed('unexpected "typ" JWT header value',"typ","check_failed");let i;try{i=JSON.parse(decoder.decode(t))}catch(e){}if(!isObject(i))throw new JWTInvalid("JWT Claims Set must be a top-level JSON object");const{issuer:a}=o;if(a&&!(Array.isArray(a)?a:[a]).includes(i.iss))throw new JWTClaimValidationFailed('unexpected "iss" claim value',"iss","check_failed");const{subject:s}=o;if(s&&i.sub!==s)throw new JWTClaimValidationFailed('unexpected "sub" claim value',"sub","check_failed");const{audience:n}=o;if(n&&!checkAudiencePresence(i.aud,"string"==typeof n?[n]:n))throw new JWTClaimValidationFailed('unexpected "aud" claim value',"aud","check_failed");let l;switch(typeof o.clockTolerance){case"string":l=secs(o.clockTolerance);break;case"number":l=o.clockTolerance;break;case"undefined":l=0;break;default:throw new TypeError("invalid clockTolerance option type")}const{currentDate:c}=o,d=epoch(c||new Date);if(void 0!==i.iat||o.maxTokenAge){if("number"!=typeof i.iat)throw new JWTClaimValidationFailed('"iat" claim must be a number',"iat","invalid");if(void 0===i.exp&&i.iat>d+l)throw new JWTClaimValidationFailed('"iat" claim timestamp check failed (it should be in the past)',"iat","check_failed")}if(void 0!==i.nbf){if("number"!=typeof i.nbf)throw new JWTClaimValidationFailed('"nbf" claim must be a number',"nbf","invalid");if(i.nbf>d+l)throw new JWTClaimValidationFailed('"nbf" claim timestamp check failed',"nbf","check_failed")}if(void 0!==i.exp){if("number"!=typeof i.exp)throw new JWTClaimValidationFailed('"exp" claim must be a number',"exp","invalid");if(i.exp<=d-l)throw new JWTExpired('"exp" claim timestamp check failed',"exp","check_failed")}if(o.maxTokenAge){const e=d-i.iat;if(e-l>("number"==typeof o.maxTokenAge?o.maxTokenAge:secs(o.maxTokenAge)))throw new JWTExpired('"iat" claim timestamp check failed (too far in the past)',"iat","check_failed");if(e<0-l)throw new JWTClaimValidationFailed('"iat" claim timestamp check failed (it should be in the past)',"iat","check_failed")}return i};async function jwtVerify(e,t,o){var r;const i=await compactVerify(e,t,o);if((null===(r=i.protectedHeader.crit)||void 0===r?void 0:r.includes("b64"))&&!1===i.protectedHeader.b64)throw new JWTInvalid("JWTs MUST NOT use unencoded payload");return{payload:jwtPayload(i.protectedHeader,i.payload,o),protectedHeader:i.protectedHeader}}function subtleMapping(e){let t,o;switch(e.kty){case"oct":switch(e.alg){case"HS256":case"HS384":case"HS512":t={name:"HMAC",hash:{name:`SHA-${e.alg.substr(-3)}`}},o=["sign","verify"];break;case"A128CBC-HS256":case"A192CBC-HS384":case"A256CBC-HS512":throw new JOSENotSupported(`${e.alg} keys cannot be imported as CryptoKey instances`);case"A128GCM":case"A192GCM":case"A256GCM":case"A128GCMKW":case"A192GCMKW":case"A256GCMKW":t={name:"AES-GCM"},o=["encrypt","decrypt"];break;case"A128KW":case"A192KW":case"A256KW":t={name:"AES-KW"},o=["wrapKey","unwrapKey"];break;case"PBES2-HS256+A128KW":case"PBES2-HS384+A192KW":case"PBES2-HS512+A256KW":t={name:"PBKDF2"},o=["deriveBits"];break;default:throw new JOSENotSupported('unsupported or invalid JWK "alg" (Algorithm) Parameter value')}break;case"RSA":switch(e.alg){case"PS256":case"PS384":case"PS512":t={name:"RSA-PSS",hash:{name:`SHA-${e.alg.substr(-3)}`}},o=e.d?["sign"]:["verify"];break;case"RS256":case"RS384":case"RS512":t={name:"RSASSA-PKCS1-v1_5",hash:{name:`SHA-${e.alg.substr(-3)}`}},o=e.d?["sign"]:["verify"];break;case"RSA-OAEP":case"RSA-OAEP-256":case"RSA-OAEP-384":case"RSA-OAEP-512":t={name:"RSA-OAEP",hash:{name:`SHA-${parseInt(e.alg.substr(-3),10)||1}`}},o=e.d?["decrypt","unwrapKey"]:["encrypt","wrapKey"];break;default:throw new JOSENotSupported('unsupported or invalid JWK "alg" (Algorithm) Parameter value')}break;case"EC":switch(e.alg){case"ES256":case"ES384":case"ES512":t={name:"ECDSA",namedCurve:e.crv},o=e.d?["sign"]:["verify"];break;case"ECDH-ES":case"ECDH-ES+A128KW":case"ECDH-ES+A192KW":case"ECDH-ES+A256KW":t={name:"ECDH",namedCurve:e.crv},o=e.d?["deriveBits"]:[];break;default:throw new JOSENotSupported('unsupported or invalid JWK "alg" (Algorithm) Parameter value')}break;default:throw new JOSENotSupported('unsupported or invalid JWK "kty" (Key Type) Parameter value')}return{algorithm:t,keyUsages:o}}const parse=async e=>{var t,o;const{algorithm:r,keyUsages:i}=subtleMapping(e);let a="jwk",s={...e};return delete s.alg,"PBKDF2"===r.name&&(a="raw",s=decode(e.k)),crypto$1.subtle.importKey(a,s,r,null!==(t=e.ext)&&void 0!==t&&t,null!==(o=e.key_ops)&&void 0!==o?o:i)};async function parseJwk(e,t,o){if(!isObject(e))throw new TypeError("JWK must be an object");switch(e.kty){case"oct":if("string"!=typeof e.k||!e.k)throw new TypeError('missing "k" (Key Value) Parameter value');return null!=o||(o=!0!==e.ext),o?parse({...e,alg:t,ext:!1}):decode(e.k);case"RSA":if(void 0!==e.oth)throw new JOSENotSupported('RSA JWK "oth" (Other Primes Info) Parameter value is not supported');case"EC":case"OKP":return parse({...e,alg:t});default:throw new JOSENotSupported('unsupported "kty" (Key Type) Parameter value')}}var __decorate=function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};let WcDialogResetPassword=class extends s$1{static get styles(){return[dialogStyles$1,i$4`
      .modal {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px;
      }

      .modal-header {
        margin-top: 0px;
      }
      
      .error-msg {
        color: #d20064;
        font-size: 12px;
        font-family: var(--printess-text-font);
      }

      input, input:hover {
        border: 1px solid #ccc;
      }
    `]}connectedCallback(){super.connectedCallback()}constructor(){super(),this.email="",this.errorMsg="",this.backdrop=new WcBackdrop}showDialog(){document.body.appendChild(this.backdrop),document.body.appendChild(this)}closeDialog(){document.body.removeChild(this.backdrop),document.body.removeChild(this)}sendResetEmail(){this.email?-1!==this.email.indexOf("@")?(sendPasswordResetMail(this.email),this.closeDialog()):this.errorMsg="Please enter a valid email address!":this.errorMsg="Please enter an email address!"}render(){return x`
      <div class="modal">
      
        <div class="modal-wrapper pink">
          <div class="modal-header">
            <slot name="title" class="modal-title">Forgot your password?</slot>
            <wc-icon primaryColor="arrows" icon="close" @click=${()=>this.closeDialog()}></wc-icon>
          </div>

          <div class="modal-content">
            <p>No worry! Enter your email address and we will send you a link to reset your password.</p>
            <span class="error-msg" style="display: ${this.errorMsg?"block":"none"}"> ${this.errorMsg}</span>
            <input type="email" placeholder="Email address*" @change=${e=>this.email=e.target.value}>
            <button class="submit" @click=${this.sendResetEmail}>Send Reset Link</button>
          </div>
        </div>
      </div>
    `}};__decorate([e$3({type:String})],WcDialogResetPassword.prototype,"email",void 0),__decorate([e$3({type:String})],WcDialogResetPassword.prototype,"errorMsg",void 0),WcDialogResetPassword=__decorate([e$4("wc-dialog-reset-password")],WcDialogResetPassword);class PrintessAdminApi{constructor(e,t){this.urlPrefix=e||"http://localhost:5000",this.token=t}async postJson(e,t){e.startsWith("/")||(e="/"+e);const o=this.urlPrefix+e,r=await postJson(o,t,this.token);return 200===r.status?await r.json():await ServerErrorResponse$2.Create(r)}async postJsonVoid(e,t){e.startsWith("/")||(e="/"+e);const o=this.urlPrefix+e,r=await postJson(o,t,this.token);if(200!==r.status)return await ServerErrorResponse$2.Create(r)}async copyImageCategories(e,t){const o={targetUserId:e,sourceUserId:t};return this.postJsonVoid("admin/copy/imagecategories",JSON.stringify(o))}async loadUsers(e){return this.postJson("/admin/codes/load",JSON.stringify(e))}async activateUser(e){const t={userId:e};return this.postJsonVoid("admin/user/activate",JSON.stringify(t))}async deactivateUser(e){const t={userId:e};return this.postJsonVoid("admin/user/deactivate",JSON.stringify(t))}async setEmailVerified(e){const t={userId:e};return this.postJsonVoid("admin/user/setemailverified",JSON.stringify(t))}async setEmailUnverified(e){const t={userId:e};return this.postJsonVoid("admin/user/setemailunverified",JSON.stringify(t))}async loadWhitelist(){return this.postJson("admin/whitelist/load",JSON.stringify({}))}async addWhitelistEntry(e){const t={email:e};return this.postJsonVoid("admin/whitelist/add",JSON.stringify(t))}async removeWhitelistEntry(e){const t={email:e};return this.postJsonVoid("admin/whitelist/remove",JSON.stringify(t))}}const apiEndpoint=getDomain(),adm={useAdminMode:!1,canUseAdminMode:!1,isPinnedUser:!1},api=new PrintessApi("https://"+apiEndpoint),adminApi=new PrintessAdminApi("https://"+apiEndpoint);let currentUser={id:"",displayName:"",eMailAddress:"",isEmailAddressVerified:!1,lastLogin:new Date,code:"",isActivated:!1,shopifyUrl:""};const wcAppLayout=new WcAppLayout;function setDisplay(e,t){const o=document.getElementById(e);o&&(o.style.display=t)}if(document.getElementById("passwordCtrl")?.addEventListener("keyup",async e=>{"Enter"!==e.key&&13!==e.which||(e.preventDefault(),document.getElementById("createAccountCtrl")?.click())}),document.getElementById("createAccountCtrl")?.addEventListener("click",async()=>{const e=document.getElementById("emailCtrl")?.value,t=document.getElementById("passwordCtrl")?.value;await signinUser(e,t)}),document.getElementById("google-signin")?.addEventListener("click",async()=>{await signinWithGoogle()}),window.location.hash&&window.location.hash.startsWith("#pt_")){const e=window.location.hash.substring(4);currentUser.displayName="Shopify",setDisplay("userAccount",""),loginViaToken(e),window.location.hash=""}else if(window.location.hash&&window.location.hash.startsWith("#ptt_")){const e=window.location.hash.substring(5);currentUser.displayName="Team Tool",setDisplay("userAccount",""),loginViaToken(e),window.location.hash=""}else if(window.location.hash&&window.location.hash.startsWith("#o_")){const e=decodeURIComponent(window.location.hash.substring(3)),t=JSON.parse(e);currentUser.displayName="Shopify",setDisplay("userAccount",""),loginViaToken(t.token),window.location.hash=t.hash}else{const e=new firebase.auth.SAMLAuthProvider("saml.cardfactory");let t=!1;firebase.auth().onAuthStateChanged(async function(o){if(o){const e=new Date(o.metadata.lastSignInTime);currentUser={id:o.uid,displayName:o.displayName,eMailAddress:o.email,isEmailAddressVerified:o.emailVerified,lastLogin:e,code:o.providerData[0].photoURL,isActivated:!1,shopifyUrl:""},setDisplay("userAccount",""),await printessLogin(o)}else!t&&window.location.pathname.endsWith("/cardfactory.html")?(t=!0,firebase.auth().signInWithPopup(e).then(e=>{firebase.auth.OAuthProvider.credentialFromResult(e)}).catch(e=>{})):setDisplay("loginPage","")})}async function readTokenData(e){try{let t="wXIBXKQ_dpETu27jq5mx2blcCqrjvF5B0zuI4I1O3LJjOFqEKJrfIfVxVNf9er4qfQquSLaNYf_780rtUZTZkqX5rittfeTiQqzMVuFwipmfNdqlFMJeJiZAlZRq_t1BOQ9FxaE2Iz85eo_uWxT_tcXYDVPiLn-SzJNV2BNrLOvE1Qb3fqz3t-Tol4LudlcNI_-1DWRGTqHlllC6BUivFfbaBbCJBK1zTHJNtzXDvpNvADJWzmbRn8mBUcRjNFqPwUX6dwa_SudQ0oKvuBJXJhaxo1mfNntJj2UIOuJDBrNqEmY8uaUjNHzAtrzh2YUaTwaG6R6vdGlDsbqXWV6m966Y1KZP2tMv1cMyD0EgfOBGLKp98MY8uO3KvvN_8lfSyHbHMAz-I_0Gd7n1LjRUIFGmrXHp-xnyiZw3MuwhVyIP9JUzH87HQ5OlOfSJeaknqa9mWvoMldD0LnUdiaVXef7icTMjppykadj8rOiC5VAmhL6Cm_EL_GFLmylyQ5cSW0b6ns6ufO-3OuIAaxd5iacuIkgZr1ZX-r_ViA4lUnjl2fp-DEi_-BZPQCVzvwWE8QNKxTMpj1qm2rIvR1cWDcxQNuoyJEAEynk_b0vUxaWiu91dNgUtmC8AOunCxr7Hj41YBJPhRI2I985MF4xRLWISLhFmkttT0NpWUxzxsf0";"api.printess.com"!==getDomain()&&"localhost:5001"!==getDomain()&&"dev-aws.printess.com"!==getDomain()&&(t="xyHvq4MxAoZbov62ZnnvKQ4Zm23tzpaOYpy5G58i_6kHSbJPL1uNUJ1MLRIt_uLJRnqNmtH9QHte2v3jsaJR0VRxKDLFytkJ8RpYgHedMVmQoJf0q0BUXGU-diMvbKNdcjToUI914I508XITkPt0NhbSqZzldhcvloaJLk_jmK9WbcTQCfxYnItCJ-u_xqgP9uBQGtutpMwFDBOGtF4lzWw86mz6Ib8tQIRwC0UXF24PqlG3_0EHOJc5xtl0rKHuIybySiKhH0zddgVYIMZE0b2bKjutIluc5Xhnlagb4a8KuniNGPYlJUgWFexSyxx8JQemvPvzRbl74Zk5zNKgbHC5FwA-EYGMi7L2DAFZEfyiIFMeuPlZZ77ZH-IpCguuyCjoO70y9TDgW9Lu_QmNs7fUA_jqa05_896_l2o3S4lTw0HuMEmiN85RP3dSXeX2_XmgLyT33h6KE8OHvLgweoxhuxXfRablmvBqNcIHPjzZKtfoABQuGZR8Gq5KWMCvxk76DOBozKDQIFYIO2pk731QKY6SWBe79Kw8vQwSUgIAmpaADc66CoWpkEpYQv1H8dq36fcPAjVjqZc3aPGOI-16TyeSLf_MehDn9tTHPQs6-UD-HjknOscUrHQlLMNr2miSJhHlDIcfxdtfk9D5Gitzi6k7BgSO1_RVhsG9anE",config.isPrintessSystem=!1);const o=await parseJwk({kty:"RSA",e:"AQAB",n:t},"RS256"),{payload:r}=await jwtVerify(e,o,{issuer:"Printess GmbH & Co.KG",audience:"printess-saas"});if("Shopify"===currentUser.displayName&&(currentUser.shopifyUrl=r.sub??""),r.oid&&(adm.isPinnedUser=!0),r.sub&&(currentUser.id=r.sub),r.plan&&"string"==typeof r.plan){const e=new Set;e.add(r.plan),config.claims.set("plan",e)}if(r.allow){const e=new Set;if(config.claims.set("allow",e),"string"==typeof r.allow)e.add(r.allow);else if(Array.isArray(r.allow))for(let t=0;t<r.allow.length;t++){const o=r.allow[t];e.add(o)}}if(r.role)if("string"==typeof r.role)"admin"===r.role&&(adm.canUseAdminMode=!0,config.tokenRole="admin"),config.tokenRoles.push(r.role),config.tokenRole=r.role;else{const e=r.role;e&&e.length&&(config.tokenRoles=e,config.tokenRole=e[0]),e.forEach(e=>{"admin"===e&&(adm.canUseAdminMode=!0,config.tokenRole="admin")})}("localhost"===window.location.hostname||window.location.href.indexOf("debug=1")>0||!0===window.printessDebug)&&config.tokenRoles.push("debug")}catch(e){console.error(e)}adm.canUseAdminMode&&(adm.useAdminMode=!0)}async function printessLogin(e){const t=await e.getIdToken(),o=await api.loginWithGoogleAuthToken(t);o instanceof ServerErrorResponse$2?(alert(o.message),setDisplay("loginPage","")):(wcAppLayout.isTrialExpired=o.hasTrialEnded,await loginViaToken(o.token))}async function loginViaToken(e){setDisplay("loginPage","none"),adminApi.token=e,api.token=adminApi.token,await readTokenData(e);const t=document.getElementById("userAccount");t?.append(wcAppLayout);const o=document.getElementsByTagName("head")[0],r=document.createElement("style");r.setAttribute("type","text/css"),r.appendChild(document.createTextNode(masterStyles.toString())),o.appendChild(r)}const logoutFunc=()=>{(async()=>{await firebase.auth().signOut(),window.location.reload()})()};document.getElementById("eye")?.addEventListener("click",()=>{const e=document.getElementById("eye"),t=document.getElementById("passwordCtrl");"password"===t.type?(e.classList.remove("fa-eye-slash"),e.classList.add("fa-eye"),t.type="text"):(e.classList.remove("fa-eye"),e.classList.add("fa-eye-slash"),t.type="password")}),document.getElementById("password-reset")?.addEventListener("click",()=>{const e=new WcDialogResetPassword;return e.showDialog(),e});export{adm,adminApi,api,apiEndpoint,currentUser,logoutFunc,printessLogin};