@creaditor/web-starterkit 1.0.10 → 1.0.12

package/dist/5119.creaditor.bundle.js

@@ -1 +1,34 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5119],{15119(e,t,n){n.d(t,{default:()=>I});var o=n(96374),a=n(86319);const i=e=>{{const{component:t,commands:n,helpers:i}=e;return{select:e=>{let{changeTab:t,tab:n}=e},tabs:e=>{const t=[{text:"design",selected:!0},{text:"link"},{text:"icons"},..."web"===a.M.get("config","channel")?[{text:"animations"},{text:"modal"}]:[],{text:"settings"}];return t.forEach(t=>t.selected=t.selected=t.text===e),t},layout:e=>{let{tab:i,changeTab:l,tabs:r}=e;const s=(a.M.get("components")||[]).filter(e=>e&&"block"===e.type&&e.props?.modalable),c=[{value:"",label:"modal_none"},...s.map((e,t)=>({value:e.id,label:e.props?.modalName||`modal ${t+1}`}))],d=t.props.modalBlockId||"",p=c.find(e=>e.value===d)?.label||"modal_none";return[{type:"heading",level:6,text:"open_modal",active:()=>"modal"===i.text},{type:"info",text:s.length?"modal_pick_hint":"modal_none_hint",active:()=>"modal"===i.text},{type:"dropdown",title:"modal_block",active:()=>"modal"===i.text,value:p,selected:d,items:c,onChange:e=>{n.execCommand("modalBlockId",e.target.value)}},{type:"heading",level:6,text:"settings",active:()=>"design"===i.text},{type:"input",title:"whatTheBtnSays",mergeTags:!0,emoji:!0,active:()=>"design"===i.text,value:t.props.text||"",onInput:e=>{const t=e.target.value;n.execCommand("text",t)}},{type:"heading",level:6,text:"typography",active:()=>"design"===i.text},{type:"typography",active:()=>"design"===i.text,bold:700===t.props.style.fontWeight,italic:"italic"===t.props.style.fontStyle,underline:"underline"===t.props.style.textDecoration,onChange:e=>{switch(e){case"bold":const e=700===t.props.style.fontWeight?400:700;n.execCommand("style",{fontWeight:e});break;case"italic":const o="italic"===t.props.style.fontStyle?"normal":"italic";n.execCommand("style",{fontStyle:o});break;case"underline":const a="underline"===t.props.style.textDecoration?"none":"underline";n.execCommand("style",{textDecoration:a})}}},{type:"fontFamily",active:()=>"design"===i.text,value:t.props.style.fontFamily,weight:"web"===a.M.get("config","channel"),weightValue:t.props.style.fontWeight,onChange:e=>{const t=e.target.value;n.execCommand("style",{fontFamily:t})},onWeightChange:e=>{n.execCommand("style",{fontWeight:e.detail.value})}},{type:"slider",title:"fontSize",step:1,min:8,max:50,active:()=>"design"===i.text,value:parseInt(t.props.style.fontSize)||14,onInput:e=>{const t=e.target.value;n.execCommand("style",{fontSize:t+"px",height:"auto"})}},{type:"heading",level:6,text:"dimensions",active:()=>"design"===i.text},{type:"slider",title:"width",min:10,max:500,active:()=>"design"===i.text,value:parseInt(t.props.style.width),onInput:e=>{const t=e.target.value;n.execCommand("style",{width:t+"px",minWidth:null})}},{type:"heading",level:6,text:"colors",active:()=>"design"===i.text},{type:"colorSwatchGroup",active:()=>"design"===i.text,columns:2,items:[{title:"button_background",allowGradient:!0,value:t.props.style.background||"#000000",onChange:e=>{const a=e.target.value;if(!a.includes("gradient(")){const e=(0,o.w)(t.props.style.color,a);n.execCommand("style",{color:e})}n.execCommand("style",{background:a,backgroundColor:null})}},{title:"font_color",value:t.props.style.color||"#ffffff",onChange:e=>{const t=e.target.value;n.execCommand("style",{color:t})}}]},{type:"heading",level:6,text:"border_design",active:()=>"design"===i.text},{type:"slider",title:"radius",min:0,max:100,active:()=>"design"===i.text,value:parseInt(t.props.style.borderRadius),onInput:e=>{const t=e.target.value;n.execCommand("style",{borderRadius:t+"px"})}},{type:"borderpicker",title:"border",active:()=>"design"===i.text,value:t.props.style.border,onChange:e=>{const t=e.target.value;n.execCommand("style",{border:t})}},{type:"slider",title:"borderWidth",active:()=>"design"===i.text,value:t.props.style.borderWidth,onInput:e=>{const t=e.target.value;n.execCommand("style",{borderWidth:t+"px"})}},{type:"colorpicker",title:"borderColor",active:()=>"design"===i.text,value:t.props.style.borderColor,onChange:e=>{const t=e.target.value;n.execCommand("style",{borderColor:t})}},{type:"linkpicker",href:t.props.onClick?.link,protocol:t.props.onClick?.link?.protocol,target:t.props.onClick?.link?.target,autofocus:!0,active:()=>"link"===i.text,onChange:e=>{const t={link:e.target.value};n.execCommand("onClick",t)}},{type:"checkbox",title:"hasIcon",useIconsApi:!0,checked:!!t.props.hasIcon,active:()=>"icons"===i.text,onChange:e=>{const t=e.target.checked;n.execCommand("hasIcon",t),n.execCommand("iconDirection","left")}},{type:"dropdown",active:()=>"icons"===i.text&&!0===t.props.hasIcon,title:"iconDirection",value:t.props.iconDirection,onChange:e=>{const t=e.target.value;n.execCommand("iconDirection",t)},items:[{value:"left",label:"left"},{value:"right",label:"right"}]},{type:"slider",title:"size",min:10,max:100,active:()=>"icons"===i.text&&!0===t.props.hasIcon,value:t.props.iconSize||16,onInput:e=>{const t=e.target.value;n.execCommand("iconSize",t)}},{type:"icons",active:()=>"icons"===i.text&&!0===t.props.hasIcon,selectedIcon:t.props.iconUrl,onChange:e=>{const t=e.detail;n.execCommand("iconUrl",t.src)}},{type:"heading",level:6,text:"spacing",active:()=>"design"===i.text},{type:"spacingPicker",active:()=>"design"===i.text,hasLeft:!1,hasRight:!1,value:{top:parseInt(t.props.style.paddingTop)||0,bottom:parseInt(t.props.style.paddingBottom)||0,left:parseInt(t.props.style.paddingLeft)||0,right:parseInt(t.props.style.paddingRight)||0},onChange:e=>{e.target.value;const t=e.target.topValue,o=e.target.bottomValue,a=e.target.leftValue,i=e.target.rightValue;n.execCommand("style",{paddingTop:t+"px",paddingBottom:o+"px",paddingLeft:a+"px",paddingRight:i+"px",padding:null})}}]}}}},l=e=>{let{helpers:t,editor:n,getFocused:o}=e;return{set:(e,a,i)=>{switch(a){case"style":return e[a]=t.deepMerge(e[a],i),!0;case"text":return e.text=i,o()||n.chain().setContent(i).run(),!0;case"ripple":case"rippleColor":case"scaleOnHover":case"hasIcon":case"iconUrl":case"iconSize":case"iconDirection":case"modalBlockId":return e[a]=i,!0;case"onClick":if(i.link)return e[a]=i,!0}}}};var r=n(72591),s=n.n(r),c=n(88639),d=n.n(c),p=n(88128),m=n.n(p),u=n(30855),g=n.n(u),h=n(93051),A=n.n(h),y=n(49536),x={};x.setAttributes=g(),x.insert=m().bind(null,"head"),x.domAPI=d(),x.insertStyleElement=A();s()(y.A,x);const C=y.A&&y.A.locals?y.A.locals:void 0;var b=n(81318),v=n(1366),f=n(67291),E=n(85194),k=n(28396);const B=b.YY.create({addKeyboardShortcuts:()=>({Enter:()=>!0})});const I=()=>{const e="button";return{name:e,create:t=>{const{createElement:n,compose:o,helpers:a}=t,{arrayToString:r,mergeDiff:s}=a;let c=!1;const d=document.createElement("div"),p=document.createElement("div"),{editor:m}=function(e){let{content:t,element:n}=e;return{element:n,editor:new b.KE({element:n,extensions:[v.A,f.A,k.A,E.Ay,B],content:t})}}({content:o.props.text,element:p});d.appendChild(p);return m.view.dom.setAttribute("dir","auto"),m.on("update",e=>{let{editor:t}=e;const n=t.getText();o.editor.store().updateComponent(o,"text",n)}),m.on("focus",e=>{let{event:t,editor:n}=e;c=!0}),m.on("blur",e=>{let{event:t,editor:n}=e;c=!1}),d.className=C.button,n({name:e,id:o.id,template:d,commands:{insertContent:e=>{m.commands.insertContent(e),m.chain().focus()}},defaultProps:{style:{height:"auto",width:"200px",padding:"10px",borderRadius:"5px",fontFamily:"Arial",fontSize:"16px"},text:"button"},render:()=>{try{o.props.style.display="",o.props.style.direction=""}catch(e){console.error(e)}s(d,{style:o.props.style}),d.style.height="auto";const e=o.props.hasIcon,t=o.props.iconUrl,n=o.props.iconDirection,a=o.props.iconSize,i="icon_in_button";let l=d.querySelector(`.${i}`)||document.createElement("img");e&&t?(l.className=i,l.src=t,l.style.width=(a||16)+"px",l.style.height=(a||16)+"px",l.style.marginRight="8px",l.style.marginLeft="8px","left"===n?d.insertBefore(l,d.firstChild):d.appendChild(l)):l.remove()},draggable:{group:"element"},droppable:{group:"element"},resizeable:()=>d,handleBar:!0,validator:l({template:d,helpers:a,editor:m,getFocused:function(){return c}}),schema:o.schema,onSelect:e=>{d.classList.add(e)},onDeselect:e=>{d.classList.remove(e)},elementProps:o,destroy:()=>{m.destroy()},remove:()=>{d.remove()},createEditor:i})}}}},49536(e,t,n){n.d(t,{A:()=>r});var o=n(82001),a=n.n(o),i=n(40935),l=n.n(i)()(a());l.push([e.id,".BEr8unIfy4OEGYhlHclN {\n  cursor: text !important;\n}\n.BEr8unIfy4OEGYhlHclN {\n  min-width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding:10px;\n}\n.BEr8unIfy4OEGYhlHclN p {\n  margin: 0;\n  line-height: 1;\n}\n.cI3RTMAdk9qoZ8mu9Sm9 {\n  width: 100%;\n}\n.VSumPf0Ui7b1pl8cMATP {\n  position: absolute;\n  z-index: 9;\n  width: 3px;\n  height: 90%;\n  background: var(--resizer-color);\n  border-radius: 20px;\n}\n.Vo2Ewnq6ekWFdNMjxBIB {\n  left: -8px;\n  cursor: w-resize;\n}\n.WLZC84sb1rfaRnHCDyj8 {\n  left: calc(100% + 5px);\n  cursor: e-resize;\n}\n\n.BEr8unIfy4OEGYhlHclN .VSumPf0Ui7b1pl8cMATP {\n  display: none;\n}\n.BEr8unIfy4OEGYhlHclN.Qh20ei1Fa8QUbGinFFbw .VSumPf0Ui7b1pl8cMATP {\n  display: block;\n}\n/* .handle{\n  display: none;\n}\n.button.selected .handle{\n  display: block;\n} */\n","",{version:3,sources:["webpack://./../web-editors/button-editor-component/lib/style.module.css"],names:[],mappings:"AAAA;EACE,uBAAuB;AAOzB;AARA;EAEE,eAAe;EACf,aAAa;EACb,uBAAuB;EACvB,mBAAmB;EACnB,kBAAkB;EAClB,YAAY;AACd;AACA;EACE,SAAS;EACT,cAAc;AAChB;AACA;EACE,WAAW;AACb;AACA;EACE,kBAAkB;EAClB,UAAU;EACV,UAAU;EACV,WAAW;EACX,gCAAgC;EAChC,mBAAmB;AACrB;AACA;EACE,UAAU;EACV,gBAAgB;AAClB;AACA;EACE,sBAAsB;EACtB,gBAAgB;AAClB;;AAEA;EACE,aAAa;AACf;AACA;EACE,cAAc;AAChB;AACA;;;;;GAKG",sourcesContent:[".button {\n  cursor: text !important;\n  min-width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding:10px;\n}\n.button p {\n  margin: 0;\n  line-height: 1;\n}\n.contentEditable {\n  width: 100%;\n}\n.margin {\n  position: absolute;\n  z-index: 9;\n  width: 3px;\n  height: 90%;\n  background: var(--resizer-color);\n  border-radius: 20px;\n}\n.marginLeft {\n  left: -8px;\n  cursor: w-resize;\n}\n.marginRight {\n  left: calc(100% + 5px);\n  cursor: e-resize;\n}\n\n.button .margin {\n  display: none;\n}\n.button.selected .margin {\n  display: block;\n}\n/* .handle{\n  display: none;\n}\n.button.selected .handle{\n  display: block;\n} */\n"],sourceRoot:""}]),l.locals={button:"BEr8unIfy4OEGYhlHclN",contentEditable:"cI3RTMAdk9qoZ8mu9Sm9",margin:"VSumPf0Ui7b1pl8cMATP",marginLeft:"Vo2Ewnq6ekWFdNMjxBIB",marginRight:"WLZC84sb1rfaRnHCDyj8",selected:"Qh20ei1Fa8QUbGinFFbw"};const r=l},67291(e,t,n){n.d(t,{A:()=>a});var o=n(81318);const a=o.bP.create({name:"paragraph",priority:1e3,addOptions:()=>({HTMLAttributes:{}}),group:"block",content:"inline*",parseHTML:()=>[{tag:"p"}],renderHTML({HTMLAttributes:e}){return["p",(0,o.KV)(this.options.HTMLAttributes,e),0]},addCommands(){return{setParagraph:()=>({commands:e})=>e.setNode(this.name)}},addKeyboardShortcuts(){return{"Mod-Alt-0":()=>this.editor.commands.setParagraph()}}})}}]);
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5119],{15119(e,t,o){o.d(t,{default:()=>W});var n=o(96374),r=o(86319),l=o(59929);const a=e=>{{const{component:t,commands:o,helpers:a}=e;return{select:e=>{let{changeTab:t,tab:o}=e},tabs:e=>{const t=r.M.get("config","channel"),o=[{text:"style",selected:!0},..."web"===t?[{text:"styles"}]:[],{text:"link"},{text:"icons"},..."web"===t?[{text:"animations"},{text:"modal"}]:[],{text:"settings"}];return o.forEach(t=>t.selected=t.selected=t.text===e),o},layout:e=>{let{tab:a,changeTab:d,tabs:i}=e;const s=(r.M.get("components")||[]).filter(e=>e&&"block"===e.type&&e.props?.modalable),c=[{value:"",label:"modal_none"},...s.map((e,t)=>({value:e.id,label:e.props?.modalName||`modal ${t+1}`}))],p=t.props.modalBlockId||"",b=c.find(e=>e.value===p)?.label||"modal_none";return[{type:"custom",active:()=>"styles"===a.text,node:()=>{const e="web"===r.M.get("config","channel"),n={cart:"http://app.creaditor.com/assets/bullets/images/cart-icon.png",arrowRight:"http://app.creaditor.com/assets/bullets/images/1469020585_ic_keyboard_arrow_right_48px.png"},a=[{category:"Basic",presets:[{name:"Solid",style:{background:"#111111",color:"#ffffff",borderRadius:"6px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}},{name:"Pill",style:{background:"#2563eb",color:"#ffffff",borderRadius:"999px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}},{name:"Outline",style:{background:"transparent",color:"#111111",borderRadius:"6px",border:"1px solid #111111",borderWidth:"1px",borderColor:"#111111",boxShadow:null}},{name:"Soft",style:{background:"#eef2ff",color:"#3730a3",borderRadius:"10px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}}]},{category:"Gradients",presets:[{name:"Sunset",style:{background:"linear-gradient(135deg,#ff6a00,#ee0979)",color:"#ffffff",borderRadius:"8px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}},{name:"Ocean",style:{background:"linear-gradient(135deg,#2193b0,#6dd5ed)",color:"#ffffff",borderRadius:"8px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}},{name:"Grape",webOnly:!0,style:{background:"linear-gradient(135deg,#7b2ff7,#f107a3)",color:"#ffffff",borderRadius:"8px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}},{name:"Lime",webOnly:!0,style:{background:"linear-gradient(135deg,#11998e,#38ef7d)",color:"#ffffff",borderRadius:"8px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}}]},{category:"3D blocks",presets:[{name:"Orange",webOnly:!0,style:{background:"#ed8936",color:"#ffffff",borderRadius:"10px",padding:"14px 22px",fontWeight:700,border:"none",borderWidth:null,borderColor:null,boxShadow:"0px 5px 0px 0px #b45309"}},{name:"Green",webOnly:!0,style:{background:"#38a169",color:"#ffffff",borderRadius:"10px",padding:"14px 22px",fontWeight:700,border:"none",borderWidth:null,borderColor:null,boxShadow:"0px 5px 0px 0px #276749"}},{name:"Blue",webOnly:!0,style:{background:"#3182ce",color:"#ffffff",borderRadius:"10px",padding:"14px 22px",fontWeight:700,border:"none",borderWidth:null,borderColor:null,boxShadow:"0px 5px 0px 0px #2151a1"}},{name:"Red",webOnly:!0,style:{background:"#e53e3e",color:"#ffffff",borderRadius:"10px",padding:"14px 22px",fontWeight:700,border:"none",borderWidth:null,borderColor:null,boxShadow:"0px 5px 0px 0px #9b2c2c"}},{name:"Purple",webOnly:!0,style:{background:"#805ad5",color:"#ffffff",borderRadius:"10px",padding:"14px 22px",fontWeight:700,border:"none",borderWidth:null,borderColor:null,boxShadow:"0px 5px 0px 0px #553c9a"}},{name:"Dark",webOnly:!0,style:{background:"#2d3748",color:"#ffffff",borderRadius:"10px",padding:"14px 22px",fontWeight:700,border:"none",borderWidth:null,borderColor:null,boxShadow:"0px 5px 0px 0px #1a202c"}}]},{category:"Effects",presets:[{name:"Neon",webOnly:!0,style:{background:"#0a0a0a",color:"#39ff14",borderRadius:"8px",border:"1px solid #39ff14",borderWidth:"1px",borderColor:"#39ff14",boxShadow:"0 0 10px #39ff14, 0 0 22px rgba(57,255,20,0.5)"}},{name:"Glow",webOnly:!0,style:{background:"#7b2ff7",color:"#ffffff",borderRadius:"10px",border:"none",borderWidth:null,borderColor:null,boxShadow:"0 8px 24px rgba(123,47,247,0.55)"}},{name:"Glass",webOnly:!0,style:{background:"rgba(255,255,255,0.18)",color:"#111111",borderRadius:"12px",border:"1px solid rgba(255,255,255,0.6)",borderWidth:"1px",borderColor:"rgba(255,255,255,0.6)",backdropFilter:"blur(8px)",boxShadow:"0 4px 30px rgba(0,0,0,0.1)"}},{name:"Shadow",webOnly:!0,style:{background:"#ffffff",color:"#111111",borderRadius:"12px",border:"none",borderWidth:null,borderColor:null,boxShadow:"0 10px 24px rgba(0,0,0,0.18)"}},{name:"Emboss",webOnly:!0,style:{background:"#e2e8f0",color:"#2d3748",borderRadius:"10px",border:"none",borderWidth:null,borderColor:null,boxShadow:"inset 0 2px 4px rgba(255,255,255,0.9), inset 0 -2px 4px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1)"}}]},{category:"Premium gradients",presets:[{name:"Aurora",webOnly:!0,style:{background:"linear-gradient(135deg,#667eea,#764ba2)",color:"#ffffff",borderRadius:"10px",border:"none",borderWidth:null,borderColor:null,boxShadow:"0 8px 20px rgba(118,75,162,0.4)"}},{name:"Peach",webOnly:!0,style:{background:"linear-gradient(135deg,#ff9a9e,#fecfef)",color:"#7a2e3a",borderRadius:"10px",border:"none",borderWidth:null,borderColor:null,boxShadow:"0 8px 20px rgba(255,154,158,0.45)"}},{name:"Gold",webOnly:!0,style:{background:"linear-gradient(135deg,#f6d365,#fda085)",color:"#5a3a1a",borderRadius:"10px",border:"none",borderWidth:null,borderColor:null,boxShadow:"0 8px 20px rgba(253,160,133,0.45)"}},{name:"Midnight",webOnly:!0,style:{background:"linear-gradient(135deg,#0f2027,#203a43,#2c5364)",color:"#ffffff",borderRadius:"10px",border:"none",borderWidth:null,borderColor:null,boxShadow:"0 8px 20px rgba(15,32,39,0.5)"}},{name:"Candy",webOnly:!0,style:{background:"linear-gradient(135deg,#f093fb,#f5576c)",color:"#ffffff",borderRadius:"10px",border:"none",borderWidth:null,borderColor:null,boxShadow:"0 8px 20px rgba(245,87,108,0.45)"}}]},{category:"With icon",presets:[{name:"Buy now",icon:{src:n.cart,direction:"left",size:18},style:{background:"#16a34a",color:"#ffffff",borderRadius:"8px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}},{name:"Continue",icon:{src:n.arrowRight,direction:"right",size:18},style:{background:"linear-gradient(135deg,#2563eb,#1e3a8a)",color:"#ffffff",borderRadius:"8px",border:"none",borderWidth:null,borderColor:null,boxShadow:null}}]}].map(t=>({...t,presets:t.presets.filter(t=>e||!t.webOnly)})).filter(e=>e.presets.length>0),d=t.props.text||"Button",i=e=>e.icon?l.qy`<img
+                      src="${e.icon.src}"
+                      style="width:16px;height:16px;object-fit:contain;vertical-align:middle;${"right"===e.icon.direction?"margin-left:6px;order:2;":"margin-right:6px;"}"
+                    />`:"",s=e=>l.qy`
+                <button
+                  type="button"
+                  title="${e.name}"
+                  @click=${()=>(e=>{o.execCommand("style",{...e.style}),e.icon&&(o.execCommand("hasIcon",!0),o.execCommand("iconUrl",e.icon.src),o.execCommand("iconDirection",e.icon.direction||"left"),o.execCommand("iconSize",e.icon.size||18))})(e)}
+                  style="display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;padding:12px 14px;font-size:13px;overflow:hidden;white-space:nowrap;
+                         background:${e.style.background};
+                         color:${e.style.color};
+                         border-radius:${e.style.borderRadius};
+                         border:${e.style.border};
+                         font-weight:${e.style.fontWeight||400};
+                         box-shadow:${e.style.boxShadow||"none"};"
+                >
+                  ${e.icon&&"right"!==e.icon.direction?i(e):""}
+                  <span style="overflow:hidden;text-overflow:ellipsis;">${d}</span>
+                  ${e.icon&&"right"===e.icon.direction?i(e):""}
+                </button>
+              `;return l.qy`
+                <cdtr-editor-container pt="0">
+                  <div style="display:flex;flex-direction:column;gap:10px;padding:8px 16px;">
+                    ${a.map(e=>l.qy`
+                        <div
+                          style="margin-top:6px;font-size:11px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:#888;"
+                        >
+                          ${e.category}
+                        </div>
+                        ${e.presets.map(e=>s(e))}
+                      `)}
+                  </div>
+                </cdtr-editor-container>
+              `}},{type:"heading",level:6,text:"open_modal",active:()=>"modal"===a.text},{type:"info",text:s.length?"modal_pick_hint":"modal_none_hint",active:()=>"modal"===a.text},{type:"dropdown",title:"modal_block",active:()=>"modal"===a.text,value:b,selected:p,items:c,onChange:e=>{o.execCommand("modalBlockId",e.target.value)}},{type:"heading",level:6,text:"settings",active:()=>"style"===a.text},{type:"input",title:"whatTheBtnSays",mergeTags:!0,emoji:!0,active:()=>"style"===a.text,value:t.props.text||"",onInput:e=>{const t=e.target.value;o.execCommand("text",t)}},{type:"heading",level:6,text:"colors",active:()=>"style"===a.text},{type:"colorSwatchGroup",active:()=>"style"===a.text,columns:2,items:[{title:"button_background",allowGradient:!0,value:t.props.style.background||"#000000",onChange:e=>{const r=e.target.value;if(!r.includes("gradient(")){const e=(0,n.w)(t.props.style.color,r);o.execCommand("style",{color:e})}o.execCommand("style",{background:r,backgroundColor:null})}},{title:"font_color",value:t.props.style.color||"#ffffff",onChange:e=>{const t=e.target.value;o.execCommand("style",{color:t})}}]},{type:"heading",level:6,text:"typography",active:()=>"style"===a.text},{type:"typography",active:()=>"style"===a.text,bold:700===t.props.style.fontWeight,italic:"italic"===t.props.style.fontStyle,underline:"underline"===t.props.style.textDecoration,onChange:e=>{switch(e){case"bold":const e=700===t.props.style.fontWeight?400:700;o.execCommand("style",{fontWeight:e});break;case"italic":const n="italic"===t.props.style.fontStyle?"normal":"italic";o.execCommand("style",{fontStyle:n});break;case"underline":const r="underline"===t.props.style.textDecoration?"none":"underline";o.execCommand("style",{textDecoration:r})}}},{type:"fontFamily",active:()=>"style"===a.text,value:t.props.style.fontFamily,weight:"web"===r.M.get("config","channel"),weightValue:t.props.style.fontWeight,onChange:e=>{const t=e.target.value;o.execCommand("style",{fontFamily:t})},onWeightChange:e=>{o.execCommand("style",{fontWeight:e.detail.value})}},{type:"slider",title:"fontSize",step:1,min:8,max:50,active:()=>"style"===a.text,value:parseInt(t.props.style.fontSize)||14,onInput:e=>{const t=e.target.value;o.execCommand("style",{fontSize:t+"px",height:"auto"})}},{type:"heading",level:6,text:"dimensions",active:()=>"style"===a.text},{type:"slider",title:"width",min:10,max:500,active:()=>"style"===a.text,value:parseInt(t.props.style.width),onInput:e=>{const t=e.target.value;o.execCommand("style",{width:t+"px",minWidth:null})}},{type:"heading",level:6,text:"border_design",active:()=>"style"===a.text},{type:"slider",title:"radius",min:0,max:100,active:()=>"style"===a.text,value:parseInt(t.props.style.borderRadius),onInput:e=>{const t=e.target.value;o.execCommand("style",{borderRadius:t+"px"})}},{type:"borderpicker",title:"border",active:()=>"style"===a.text,value:t.props.style.border,onChange:e=>{const t=e.target.value;o.execCommand("style",{border:t})}},{type:"slider",title:"borderWidth",active:()=>"style"===a.text,value:t.props.style.borderWidth,onInput:e=>{const t=e.target.value;o.execCommand("style",{borderWidth:t+"px"})}},{type:"colorpicker",title:"borderColor",active:()=>"style"===a.text,value:t.props.style.borderColor,onChange:e=>{const t=e.target.value;o.execCommand("style",{borderColor:t})}},{type:"heading",level:6,text:"shadow",active:()=>"style"===a.text},{type:"boxShadow",active:()=>"style"===a.text,value:t.props.style.boxShadow,onChange:e=>{o.execCommand("style",{boxShadow:e})}},{type:"linkpicker",href:t.props.onClick?.link,protocol:t.props.onClick?.link?.protocol,target:t.props.onClick?.link?.target,autofocus:!0,active:()=>"link"===a.text,onChange:e=>{const t={link:e.target.value};o.execCommand("onClick",t)}},{type:"checkbox",title:"hasIcon",useIconsApi:!0,checked:!!t.props.hasIcon,active:()=>"icons"===a.text,onChange:e=>{const t=e.target.checked;o.execCommand("hasIcon",t),o.execCommand("iconDirection","left")}},{type:"dropdown",active:()=>"icons"===a.text&&!0===t.props.hasIcon,title:"iconDirection",value:t.props.iconDirection,onChange:e=>{const t=e.target.value;o.execCommand("iconDirection",t)},items:[{value:"left",label:"left"},{value:"right",label:"right"}]},{type:"slider",title:"size",min:10,max:100,active:()=>"icons"===a.text&&!0===t.props.hasIcon,value:t.props.iconSize||16,onInput:e=>{const t=e.target.value;o.execCommand("iconSize",t)}},{type:"icons",active:()=>"icons"===a.text&&!0===t.props.hasIcon,selectedIcon:t.props.iconUrl,onChange:e=>{const t=e.detail;o.execCommand("iconUrl",t.src)}},{type:"heading",level:6,text:"spacing",active:()=>"style"===a.text},{type:"spacingPicker",active:()=>"style"===a.text,hasLeft:!1,hasRight:!1,value:{top:parseInt(t.props.style.paddingTop)||0,bottom:parseInt(t.props.style.paddingBottom)||0,left:parseInt(t.props.style.paddingLeft)||0,right:parseInt(t.props.style.paddingRight)||0},onChange:e=>{e.target.value;const t=e.target.topValue,n=e.target.bottomValue,r=e.target.leftValue,l=e.target.rightValue;o.execCommand("style",{paddingTop:t+"px",paddingBottom:n+"px",paddingLeft:r+"px",paddingRight:l+"px",padding:null})}}]}}}},d=e=>{let{helpers:t,editor:o,getFocused:n}=e;return{set:(e,r,l)=>{switch(r){case"style":return e[r]=t.deepMerge(e[r],l),!0;case"text":return e.text=l,n()||o.chain().setContent(l).run(),!0;case"ripple":case"rippleColor":case"scaleOnHover":case"hasIcon":case"iconUrl":case"iconSize":case"iconDirection":case"modalBlockId":return e[r]=l,!0;case"onClick":if(l.link)return e[r]=l,!0}}}};var i=o(72591),s=o.n(i),c=o(88639),p=o.n(c),b=o(88128),u=o.n(b),x=o(30855),f=o.n(x),g=o(93051),h=o.n(g),m=o(49536),y={};y.setAttributes=f(),y.insert=u().bind(null,"head"),y.domAPI=p(),y.insertStyleElement=h();s()(m.A,y);const A=m.A&&m.A.locals?m.A.locals:void 0;var C=o(81318),w=o(1366),v=o(67291),k=o(85194),S=o(28396);const E=C.YY.create({addKeyboardShortcuts:()=>({Enter:()=>!0})});const W=()=>{const e="button";return{name:e,create:t=>{const{createElement:o,compose:n,helpers:r}=t,{arrayToString:l,mergeDiff:i}=r;let s=!1;const c=document.createElement("div"),p=document.createElement("div"),{editor:b}=function(e){let{content:t,element:o}=e;return{element:o,editor:new C.KE({element:o,extensions:[w.A,v.A,S.A,k.Ay,E],content:t})}}({content:n.props.text,element:p});c.appendChild(p);return b.view.dom.setAttribute("dir","auto"),b.on("update",e=>{let{editor:t}=e;const o=t.getText();n.editor.store().updateComponent(n,"text",o)}),b.on("focus",e=>{let{event:t,editor:o}=e;s=!0}),b.on("blur",e=>{let{event:t,editor:o}=e;s=!1}),c.className=A.button,o({name:e,id:n.id,template:c,commands:{insertContent:e=>{b.commands.insertContent(e),b.chain().focus()}},defaultProps:{style:{height:"auto",width:"200px",padding:"10px",borderRadius:"5px",fontFamily:"Arial",fontSize:"16px"},text:"button"},render:()=>{try{n.props.style.display="",n.props.style.direction=""}catch(e){console.error(e)}i(c,{style:n.props.style}),c.style.height="auto";const e=n.props.hasIcon,t=n.props.iconUrl,o=n.props.iconDirection,r=n.props.iconSize,l="icon_in_button";let a=c.querySelector(`.${l}`)||document.createElement("img");e&&t?(a.className=l,a.src=t,a.style.width=(r||16)+"px",a.style.height=(r||16)+"px",a.style.marginRight="8px",a.style.marginLeft="8px","left"===o?c.insertBefore(a,c.firstChild):c.appendChild(a)):a.remove()},draggable:{group:"element"},droppable:{group:"element"},resizeable:()=>c,handleBar:!0,validator:d({template:c,helpers:r,editor:b,getFocused:function(){return s}}),schema:n.schema,onSelect:e=>{c.classList.add(e)},onDeselect:e=>{c.classList.remove(e)},elementProps:n,destroy:()=>{b.destroy()},remove:()=>{c.remove()},createEditor:a})}}}},49536(e,t,o){o.d(t,{A:()=>d});var n=o(82001),r=o.n(n),l=o(40935),a=o.n(l)()(r());a.push([e.id,".BEr8unIfy4OEGYhlHclN {\n  cursor: text !important;\n}\n.BEr8unIfy4OEGYhlHclN {\n  min-width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding:10px;\n}\n.BEr8unIfy4OEGYhlHclN p {\n  margin: 0;\n  line-height: 1;\n}\n.cI3RTMAdk9qoZ8mu9Sm9 {\n  width: 100%;\n}\n.VSumPf0Ui7b1pl8cMATP {\n  position: absolute;\n  z-index: 9;\n  width: 3px;\n  height: 90%;\n  background: var(--resizer-color);\n  border-radius: 20px;\n}\n.Vo2Ewnq6ekWFdNMjxBIB {\n  left: -8px;\n  cursor: w-resize;\n}\n.WLZC84sb1rfaRnHCDyj8 {\n  left: calc(100% + 5px);\n  cursor: e-resize;\n}\n\n.BEr8unIfy4OEGYhlHclN .VSumPf0Ui7b1pl8cMATP {\n  display: none;\n}\n.BEr8unIfy4OEGYhlHclN.Qh20ei1Fa8QUbGinFFbw .VSumPf0Ui7b1pl8cMATP {\n  display: block;\n}\n/* .handle{\n  display: none;\n}\n.button.selected .handle{\n  display: block;\n} */\n","",{version:3,sources:["webpack://./../web-editors/button-editor-component/lib/style.module.css"],names:[],mappings:"AAAA;EACE,uBAAuB;AAOzB;AARA;EAEE,eAAe;EACf,aAAa;EACb,uBAAuB;EACvB,mBAAmB;EACnB,kBAAkB;EAClB,YAAY;AACd;AACA;EACE,SAAS;EACT,cAAc;AAChB;AACA;EACE,WAAW;AACb;AACA;EACE,kBAAkB;EAClB,UAAU;EACV,UAAU;EACV,WAAW;EACX,gCAAgC;EAChC,mBAAmB;AACrB;AACA;EACE,UAAU;EACV,gBAAgB;AAClB;AACA;EACE,sBAAsB;EACtB,gBAAgB;AAClB;;AAEA;EACE,aAAa;AACf;AACA;EACE,cAAc;AAChB;AACA;;;;;GAKG",sourcesContent:[".button {\n  cursor: text !important;\n  min-width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  padding:10px;\n}\n.button p {\n  margin: 0;\n  line-height: 1;\n}\n.contentEditable {\n  width: 100%;\n}\n.margin {\n  position: absolute;\n  z-index: 9;\n  width: 3px;\n  height: 90%;\n  background: var(--resizer-color);\n  border-radius: 20px;\n}\n.marginLeft {\n  left: -8px;\n  cursor: w-resize;\n}\n.marginRight {\n  left: calc(100% + 5px);\n  cursor: e-resize;\n}\n\n.button .margin {\n  display: none;\n}\n.button.selected .margin {\n  display: block;\n}\n/* .handle{\n  display: none;\n}\n.button.selected .handle{\n  display: block;\n} */\n"],sourceRoot:""}]),a.locals={button:"BEr8unIfy4OEGYhlHclN",contentEditable:"cI3RTMAdk9qoZ8mu9Sm9",margin:"VSumPf0Ui7b1pl8cMATP",marginLeft:"Vo2Ewnq6ekWFdNMjxBIB",marginRight:"WLZC84sb1rfaRnHCDyj8",selected:"Qh20ei1Fa8QUbGinFFbw"};const d=a},67291(e,t,o){o.d(t,{A:()=>r});var n=o(81318);const r=n.bP.create({name:"paragraph",priority:1e3,addOptions:()=>({HTMLAttributes:{}}),group:"block",content:"inline*",parseHTML:()=>[{tag:"p"}],renderHTML({HTMLAttributes:e}){return["p",(0,n.KV)(this.options.HTMLAttributes,e),0]},addCommands(){return{setParagraph:()=>({commands:e})=>e.setNode(this.name)}},addKeyboardShortcuts(){return{"Mod-Alt-0":()=>this.editor.commands.setParagraph()}}})}}]);

package/dist/5340.creaditor.bundle.js

@@ -1,4 +1,4 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5340],{12258(e,t,o){o.d(t,{A:()=>c});var n=o(59929),s=o(40648);class i extends n.WF{constructor(){super(),this.label="",this.open=!0,this.persistKey=""}toggle(){this.open=!this.open,(0,s.Q)(this.persistKey,this.open)}render(){return n.qy`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5340],{12258(e,t,o){o.d(t,{A:()=>i});var n=o(59929),s=o(40648);class r extends n.WF{constructor(){super(),this.label="",this.open=!0,this.persistKey=""}toggle(){this.open=!this.open,(0,s.Q)(this.persistKey,this.open)}render(){return n.qy`
       <div class="section">
         <div class="header" @click=${this.toggle}>
           <span class="title"><lang-text text="${this.label}"></lang-text></span>
@@ -12,44 +12,44 @@
           </div>
         </div>
       </div>
-    `}}i.styles=n.AH`
+    `}}r.styles=n.AH`
     :host {
       display: block;
       direction: var(--direction-locale, ltr);
       --editor-container-inline-padding: 0;
     }
     .section {
-      border-bottom: 1px solid #eaeaee;
+      border-bottom: 1px solid var(--color-border);
     }
     .header {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 12px 16px;
+      padding: var(--space-3) var(--space-4);
       cursor: pointer;
       user-select: none;
     }
     .title {
-      font-size: 12.5px;
+      font-size: var(--text-md);
       font-weight: 600;
-      color: #222;
+      color: var(--color-text);
       letter-spacing: 0.01em;
     }
     .chevron {
       width: 16px;
       height: 16px;
-      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease;
-      color: #ccc;
+      transition: transform var(--duration-normal) var(--ease-default), color var(--duration-fast) var(--ease-default);
+      color: var(--color-text-faint);
     }
     .header:hover .chevron {
-      color: #888;
+      color: var(--color-text-muted);
     }
     .chevron.open {
       transform: rotate(180deg);
     }
     .content {
       overflow: hidden;
-      transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
+      transition: max-height var(--duration-normal) var(--ease-default), opacity var(--duration-fast) var(--ease-default);
       max-height: 0;
       opacity: 0;
     }
@@ -58,9 +58,9 @@
       opacity: 1;
     }
     .content-inner {
-      padding: 0 16px 12px 16px;
+      padding: var(--space-3) var(--space-4) var(--space-3) var(--space-4);
     }
-  `,i.properties={label:{type:String},open:{type:Boolean},persistKey:{type:String}},customElements.define("cdtr-editor-section",i);const c=(e,t)=>n.qy`
+  `,r.properties={label:{type:String},open:{type:Boolean},persistKey:{type:String}},customElements.define("cdtr-editor-section",r);const i=(e,t)=>n.qy`
   <cdtr-editor-section
     .label=${e.label}
     .open=${!1!==e.open}
@@ -68,28 +68,28 @@
   >
     ${t}
   </cdtr-editor-section>
-`},40648(e,t,o){o.d(t,{Q:()=>c,i:()=>i});const n="cdtr:section-open";function s(){try{const e=localStorage.getItem(n);return e?JSON.parse(e):{}}catch(e){return{}}}function i(e){if(!e)return;const t=s();return Object.prototype.hasOwnProperty.call(t,e)?!!t[e]:void 0}function c(e,t){if(!e)return;const o=s();o[e]=!!t,function(e){try{localStorage.setItem(n,JSON.stringify(e))}catch(e){}}(o)}},45340(e,t,o){o.r(t),o.d(t,{SettingEditor:()=>r});var n=o(59929),s=o(86319),i=o(36565),c=(o(12258),o(79307));class r extends n.WF{constructor(){super(),this.onInspect=this.onInspect.bind(this),this.name="",this.element_ID=" ",this.cmds={onToggleDisplayMode:(e,t)=>{i.Ay.store().execCommand(`show_on_${e}`,t),this[`show_on_${e}`]=t},onChangeElementID(e){i.Ay.store().execCommand("element_ID",e.target.value)},onChangeName(e){i.Ay.store().execCommand("name",e.target.value)}}}onInspect(){if(i.Ay.components.length>0){const e=i.Ay.components[0].props;this.show_on_desktop=!!e.show_on_desktop,this.show_on_tablet=!!e.show_on_tablet,this.show_on_mobile=!!e.show_on_mobile,this.name=e.name||"",this.element_ID=e.element_ID||""}}connectedCallback(){super.connectedCallback(),i.Ay.on("select",this.onInspect),i.Ay.on("update",this.onInspect),this.onInspect()}disconnectedCallback(){super.disconnectedCallback(),i.Ay.off("select",this.onInspect),i.Ay.off("update",this.onInspect)}render(){const e="block"===i.Ay.getSelectedComponent()[0].type,t="web"===s.M.get("config","channel");return n.qy`
+`},40648(e,t,o){o.d(t,{Q:()=>i,i:()=>r});const n="cdtr:section-open";function s(){try{const e=localStorage.getItem(n);return e?JSON.parse(e):{}}catch(e){return{}}}function r(e){if(!e)return;const t=s();return Object.prototype.hasOwnProperty.call(t,e)?!!t[e]:void 0}function i(e,t){if(!e)return;const o=s();o[e]=!!t,function(e){try{localStorage.setItem(n,JSON.stringify(e))}catch(e){}}(o)}},45340(e,t,o){o.r(t),o.d(t,{SettingEditor:()=>a});var n=o(59929),s=o(86319),r=o(36565),i=(o(12258),o(79307));class a extends n.WF{constructor(){super(),this.onInspect=this.onInspect.bind(this),this.name="",this.element_ID=" ",this.cmds={onToggleDisplayMode:(e,t)=>{r.Ay.store().execCommand(`show_on_${e}`,t),this[`show_on_${e}`]=t},onChangeElementID(e){r.Ay.store().execCommand("element_ID",e.target.value)},onChangeName(e){r.Ay.store().execCommand("name",e.target.value)}}}onInspect(){if(r.Ay.components.length>0){const e=r.Ay.components[0].props;this.show_on_desktop=!!e.show_on_desktop,this.show_on_tablet=!!e.show_on_tablet,this.show_on_mobile=!!e.show_on_mobile,this.name=e.name||"",this.element_ID=e.element_ID||""}}connectedCallback(){super.connectedCallback(),r.Ay.on("select",this.onInspect),r.Ay.on("update",this.onInspect),this.onInspect()}disconnectedCallback(){super.disconnectedCallback(),r.Ay.off("select",this.onInspect),r.Ay.off("update",this.onInspect)}render(){const e="block"===r.Ay.getSelectedComponent()[0].type,t="web"===s.M.get("config","channel");return n.qy`
       ${e&&t?n.qy`<cdtr-editor-section label="display_mode" .open=${!0}>
               <div class="device-toggle-row">
                 <div
                   class="device-toggle-btn ${this.show_on_desktop?"active":""}"
                   @click=${()=>this.cmds.onToggleDisplayMode("desktop",!this.show_on_desktop)}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${c.oe}</svg>
+                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${i.oe}</svg>
                   <lang-text text="desktop"></lang-text>
                 </div>
                 <div
                   class="device-toggle-btn ${this.show_on_tablet?"active":""}"
                   @click=${()=>this.cmds.onToggleDisplayMode("tablet",!this.show_on_tablet)}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${c.kN}</svg>
+                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${i.kN}</svg>
                   <lang-text text="tablet"></lang-text>
                 </div>
                 <div
                   class="device-toggle-btn ${this.show_on_mobile?"active":""}"
                   @click=${()=>this.cmds.onToggleDisplayMode("mobile",!this.show_on_mobile)}
                 >
-                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${c.S9}</svg>
+                  <svg width="14" height="14" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">${i.S9}</svg>
                   <lang-text text="mobile"></lang-text>
                 </div>
               </div>
@@ -120,37 +120,38 @@
             ></cdtr-input>
           </cdtr-row>
       </cdtr-editor-section>
-    `}}r.properties={name:{},element_ID:{},show_on_desktop:{},show_on_tablet:{},show_on_mobile:{}},r.styles=n.AH`
+    `}}a.properties={name:{},element_ID:{},show_on_desktop:{},show_on_tablet:{},show_on_mobile:{}},a.styles=n.AH`
     :host {
       direction: var(--direction-locale);
     }
     .device-toggle-row {
       display: flex;
-      gap: 6px;
+      gap: var(--space-2, 8px);
     }
     .device-toggle-btn {
       display: flex;
       align-items: center;
-      gap: 4px;
-      padding: 7px 8px;
+      gap: var(--space-1, 4px);
+      padding: var(--space-2, 8px) var(--space-3, 12px);
       border: none;
-      border-radius: 6px;
+      border-radius: var(--radius-sm, 6px);
       cursor: pointer;
-      color: #bbb;
-      background: #f4f4f6;
-      transition: all 0.15s;
-      font-size: 12px;
+      color: var(--color-text-faint, #bbb);
+      background: var(--color-bg-muted, #f4f4f6);
+      transition: background var(--duration-fast, 120ms) var(--ease-default, ease),
+                  color var(--duration-fast, 120ms) var(--ease-default, ease);
+      font-size: var(--text-xs, 12px);
     }
     .device-toggle-btn:hover {
       background: #eaeaed;
-      color: #888;
+      color: var(--color-text-muted, #888);
     }
     .device-toggle-btn svg {
       fill: currentColor;
       flex-shrink: 0;
     }
     .device-toggle-btn.active {
-      background: color-mix(in srgb, var(--accent, #5B5FC7) 12%, transparent);
-      color: var(--accent, #5B5FC7);
+      background: var(--color-primary-soft, rgba(99, 102, 241, 0.08));
+      color: var(--color-primary, #6366f1);
     }
-  `,customElements.define("cdtr-setting-editor",r)}}]);
+  `,customElements.define("cdtr-setting-editor",a)}}]);

package/dist/5884.creaditor.bundle.js

@@ -0,0 +1,91 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[5884],{55884(e,t,r){r.d(t,{default:()=>L});var o=r(12106),s=r(59929);let i={};function n(e){i.selected=e}function c(e){return i.selected}var a=r(83423),l=r(81444);const d="https://img.creaditor.ai";function p(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};const r=t.width??24,o=t.height??24;let s=t.color??"000000";s.startsWith("#")&&(s=s.slice(1));const i=`${d}/icons/serve/${encodeURIComponent(e.category)}/${encodeURIComponent(e.name)}.png?width=${r}&height=${o}`;return(0,l.tG)(i,s)}class h extends s.WF{constructor(){super(),this.searchQuery="",this.iconColor="000000",this.iconSize=34,this.selectedSrc="",this._icons=[],this._loading=!1,this._error=""}willUpdate(e){e.has("searchQuery")&&this.searchQuery?this._fetchIcons():e.has("searchQuery")&&!this.searchQuery&&(this._icons=[],this._error="")}async _fetchIcons(){const e=(this.searchQuery||"").trim();if(e){this._loading=!0,this._error="";try{const t=new URLSearchParams({q:e,limit:"20"}),r=await fetch(`${d}/icons/search?${t.toString()}`);if(!r.ok)throw new Error(r.statusText);const o=await r.json();this._icons=o.icons||[]}catch(e){this._icons=[],this._error=e.message||"Failed to load icons"}finally{this._loading=!1}}else this._icons=[]}_onSelect(e){const t=(this.iconColor||"000000").replace(/^#/,""),r=Number(this.iconSize)||34,o=p(e,{width:r,height:r,color:t});this.dispatchEvent(new CustomEvent("icon-selected",{detail:{src:o,icon:e},bubbles:!0,composed:!0}))}render(){if(!this.searchQuery?.trim())return s.qy``;if(this._loading)return s.qy`<div class="loading"><span class="spinner"></span>Loading icons…</div>`;if(this._error)return s.qy`<div class="error">${this._error}</div>`;if(!this._icons.length)return s.qy``;const e=(this.iconColor||"000000").replace(/^#/,"");return s.qy`
+      
+      <div class="grid">
+        ${this._icons.map(t=>{const r=p(t,{width:24,height:24,color:e}),o=this.selectedSrc&&(this.selectedSrc.includes(t.name)||this.selectedSrc===r);return s.qy`
+              <button
+                type="button"
+                class="icon-wrap ${o?"selected":""}"
+                title="${t.name}"
+                @click=${()=>this._onSelect(t)}
+              >
+                <img src="${r}" alt="${t.name}" loading="lazy" />
+              </button>
+            `})}
+      </div>
+    `}}h.properties={searchQuery:{type:String},iconColor:{type:String},iconSize:{type:Number},selectedSrc:{type:String},_icons:{type:Array,state:!0},_loading:{type:Boolean,state:!0},_error:{type:String,state:!0}},h.styles=s.AH`
+    :host {
+      display: block;
+      font-size: 12px;
+    }
+    .label {
+      margin-bottom: 6px;
+      color: var(--secondary-text, #666);
+      font-weight: 500;
+    }
+    .grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+    .icon-wrap {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      background: var(--input-bg, #f5f5f5);
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+    .icon-wrap:hover {
+      border-color: var(--primary, #007bff);
+      box-shadow: 0 0 0 1px var(--primary, #007bff);
+    }
+    .icon-wrap.selected {
+      border-color: var(--primary, #007bff);
+      background: color-mix(in srgb, var(--primary, #007bff) 12%, transparent);
+    }
+    .icon-wrap img {
+      width: 24px;
+      height: 24px;
+      object-fit: contain;
+    }
+    .loading,
+    .error {
+      padding: 8px 0;
+      color: var(--secondary-text, #666);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .spinner {
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--input-bg, #e0e0e0);
+      border-top-color: var(--primary, #007bff);
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      flex: 0 0 auto;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    .error {
+      color: var(--error-color, #c00);
+    }
+  `,customElements.define("social-icon-suggestions",h);var m=r(61919);const f=e=>{{const{component:t,commands:r}=e,o=()=>{let e=c();if(e||(e=t.props.items.find(e=>!e.link),!e&&t.props.items.length>0&&(e=t.props.items[0])),e){!t.props.items.find(t=>t.id===e.id)&&t.props.items.length>0&&(e=t.props.items[0])}return e};return{select:e=>{let{changeTab:t,tab:r}=e;"link"!==r&&t("link")},tabs:e=>{e||(e="link");const t=[{text:"image"},{text:"design"},{text:"link",selected:!0}];return t.forEach(t=>t.selected=t.selected=t.text===e),t},layout:e=>{let{tab:i,changeTab:n,tabs:c}=e;const d=o(),p=[{type:"node",node:()=>s.qy`<img
+                style="padding:10px;display:block;margin:auto"
+                width="52"
+                height="52"
+                src=${d?.src?(0,l.tG)(d.src,d.fgColor||d.iconColor):""}
+              />`},{type:"button",text:"delete",bgColor:"#df381d",color:"#fff",icon:"deleteBin",active:!0,onClick:e=>{const s=o();if(!s)return;const i=[...t.props.items];if(i.length<2)return;const n=i.findIndex(e=>e.id===s.id);-1!==n&&(i.splice(n,1),r.execCommand("items",i))}},{type:"divider"},{type:"gallery",active:"image"===i.text,src:d?.src,hasPreview:!0,text:"open_gallery",justify:"flex-start",onChange:e=>{const s=o();if(!s)return;let i=e.detail;Array.isArray(i)&&(i=i[0]);const n=t.props,c=JSON.parse(JSON.stringify(n.items)),a=c.findIndex(e=>e.id===s.id);-1!==a&&(c[a].src=i.src,r.execCommand("items",c))}},{type:"custom",active:()=>{const e=d?.link?.href||d?.url,t=e?(0,l.IE)(a.A,e):null;return("link"===i.text||"image"===i.text)&&!!t},node:()=>{const e=d?.link?.href||d?.url,i=e&&(0,l.IE)(a.A,e)||"";return s.qy`<cdtr-editor-container><social-icon-suggestions
+              .searchQuery=${i}
+              .iconColor=${d?.fgColor||d?.iconColor||"000000"}
+              .iconSize=${parseInt(d?.style?.width,10)||34}
+              .selectedSrc=${d?.src||""}
+              @icon-selected=${e=>{const s=o();if(!s)return;const i=t.props,n=JSON.parse(JSON.stringify(i.items)),c=n.findIndex(e=>e.id===s.id);-1!==c&&(n[c].src=e.detail.src,r.execCommand("items",n))}}
+            ></social-icon-suggestions></cdtr-editor-container>`}},{type:"divider"},{type:"linkpicker",href:d?.link||d?.url,active:()=>"link"===i.text&&!!d,onChange:e=>{const s=o();if(!s)return;const i=e.target.value,n=t.props,c=JSON.parse(JSON.stringify(n.items)),d=c.findIndex(e=>e.id===s.id);if(-1!==d){const e=c[d].fgColor||c[d].iconColor,t=function(e,t){const r=(0,l.IE)(a.A,e),o=r?a.A.find(e=>e.type===r):null,s=o?o.src:null;return s?(0,l.tG)(s,t):null}(i.href,e);t&&(c[d].src=t),c[d].url=i.href,c[d].link=i,r.execCommand("items",c)}}},{type:"slider",title:"size",active:"design"===i.text,value:parseInt(d?.style?.width),min:10,max:80,onInput:e=>{const o=e.target.value,s=[...t.props.items];s.forEach(e=>{e.style.width=o+"px",e.style.height=o+"px"}),r.execCommand("items",s)}},{type:"colorpicker",title:"icon_color",alpha:!1,active:()=>"design"===i.text&&!!d,value:d?.fgColor?d.fgColor.startsWith("#")?d.fgColor:"#"+d.fgColor:"#000000",onChange:e=>{const s=o();if(!s)return;let i=e.target.value;i=(0,m.A)(i).toHex(),i.startsWith("#")&&(i=i.slice(1)),8===i.length&&/^[0-9a-fA-F]+$/.test(i)&&(i=i.slice(0,6));const n=t.props,c=JSON.parse(JSON.stringify(n.items));if(!0===n.applyColorToAll)c.forEach(e=>{e.fgColor=i});else{const e=c.findIndex(e=>e.id===s.id);-1!==e&&(c[e].fgColor=i)}r.execCommand("items",c)}},{type:"checkbox",title:"color_them_all",checked:!!t.props.applyColorToAll,active:()=>"design"===i.text&&!!d,onChange:e=>{const t=!!e.target.checked;r.execCommand("applyColorToAll",t)}},{type:"divider"},{type:"slider",title:"spacing",active:"design"===i.text,value:parseFloat(t.props.style.gap),min:0,max:80,onInput:e=>{const t=e.target.value;r.execCommand("style",{gap:t+"px"})}}];return p}}}};var u=r(52144);const g=()=>({set:(e,t,r)=>{switch(t){case"style":if("object"==typeof r)return e[t]=(0,u.A)(e[t],r),!0;break;case"items":if(e[t]=r,Array.isArray(r)){const e=c(),t=r.find(t=>t.id===e?.id);t&&n(t)}return!0;case"src":const o=c();if(o&&Array.isArray(e.items)){const t=[...e.items],s=t.findIndex(e=>e.id===o.id);if(-1!==s)return t[s].src=r,e.items=t,!0}break;case"applyColorToAll":return e[t]=r,!0}}});var y=r(72591),x=r.n(y),b=r(88639),C=r.n(b),v=r(88128),A=r.n(v),k=r(30855),_=r.n(k),w=r(93051),S=r.n(w),I=r(89820),E={};E.setAttributes=_(),E.insert=A().bind(null,"head"),E.domAPI=C(),E.insertStyleElement=S();x()(I.A,E);const $=I.A&&I.A.locals?I.A.locals:void 0;var O=r(23571),T=r(91597);const L=()=>{const e="social";return{name:e,create:t=>{let{createElement:r,compose:s,helpers:i}=t;const d=(0,T.S)(),p=document.createElement("div"),h=document.createElement("div");h.classList.add($.root);new O.Ay(h,{sort:!0,delay:0,delayOnTouchOnly:!1,touchStartThreshold:0,disabled:!1,store:null,animation:150,easing:"cubic-bezier(1, 0, 0, 1)",preventOnFilter:!0,draggable:".item",dataIdAttr:"data-id",ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:1,direction:"horizontal",forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,dragoverBubble:!1,removeCloneOnHide:!0,emptyInsertThreshold:5,setData:function(e,t){e.setData("Text",t.textContent)},onChoose:function(e){e.oldIndex},onUnchoose:function(e){},onStart:function(e){e.oldIndex},onEnd:function(e){const t=JSON.parse(JSON.stringify(s.props.items)),{oldIndex:r,newIndex:o}=e,[i]=t.splice(r,1);t.splice(o,0,i),s.editor.store().execCommand("items",t)},onMove:function(e,t){e.dragged,e.draggedRect,e.related,e.relatedRect,e.willInsertAfter,t.clientY},onChange:function(e){e.newIndex}});p.appendChild(h);const m=r({name:e,id:s.id,template:p,draggable:{group:"element"},droppable:{group:"element"},render:()=>{const e=s.props.items;let t=!1;const r=e.map(e=>{const r=e.url||e.link?.link||"";if(!e.src&&r){const o=(0,l.IE)(a.A,r),s=o?a.A.find(e=>e.type===o):null;if(s)return t=!0,{...e,src:s.src}}return e});t&&setTimeout(()=>s.editor.store().execCommand("items",r),0);const d=t?r:e;for(;h.firstChild;)h.removeChild(h.firstChild);i.mergeDiff(h,{style:s.props.style});const p=c();d.forEach(e=>{const t=document.createElement("img");p?.id===e.id&&t.classList.add($.selected),t.addEventListener("click",()=>{n(e),Array.from(h.children).forEach(e=>{e.classList.remove($.selected)}),t.classList.add($.selected)}),t.classList.add("item"),e.id&&t.setAttribute("data-id",e.id);const r=(0,l.fm)(h);t.src=(0,l.Ff)(e,{color:e.fgColor||e.iconColor,bg:r})||"https://render.creaditor.ai/media/social-icons/broken-link-black-circle.png",i.mergeDiff(t,{style:e.style}),h.append(t)});const m=document.createElement("paper-button");m.style.minWidth="0",m.style.padding=0,m.innerHTML="<cdtr-icon icon='add'></cdtr-icon>",h.append(m),m.addEventListener("click",()=>{setTimeout(()=>{const e=s.props.items[s.props.items.length-1],t={id:(0,o.A)(),fgColor:"",bgColor:"",style:e.style,url:"",src:"https://render.creaditor.ai/media/social-icons/broken-link-black-circle.png"},r=[...s.props.items];r.push(t),n(t),s.editor.store().execCommand("items",r)},200)})},handleBar:!0,defaultProps:{},validator:g(),schema:s.schema,onSelect:e=>{const t=c();if(t){const r=document.querySelector(`[data-id="${t.id}"]`);r?(window.___social_cdtr_item=r,r.classList.add("selected_underlined")):p.classList.add(e)}},onDeselect:e=>{c();window.___social_cdtr_item&&window.___social_cdtr_item.classList.remove("selected_underlined"),p?.classList?.remove(e)},elementProps:s,remove:()=>{p.remove()},createEditor:f});return m.app.on("update",()=>{d.run(()=>{const e=(0,l.fm)(h);if(!e)return;const t=h.querySelectorAll("img"),r=s.props.items;t.forEach((t,o)=>{const s=r[o];if(!s)return;const i=(0,l.Ff)(s,{color:s.fgColor||s.iconColor,bg:e});i&&(t.src=i)})})}),m}}}},89820(e,t,r){r.d(t,{A:()=>c});var o=r(82001),s=r.n(o),i=r(40935),n=r.n(i)()(s());n.push([e.id,".Z7AEJu5h_9kumGVl3K4x{\n    display: flex;\n}\n.UA2xJ_pGYNrGNLfjkExO{\n    border:1px solid var(--primary);\n}","",{version:3,sources:["webpack://./../newsletter-editors/social-editor-component-newsletter/lib/style.module.css"],names:[],mappings:"AAAA;IACI,aAAa;AACjB;AACA;IACI,+BAA+B;AACnC",sourcesContent:[".root{\n    display: flex;\n}\n.selected{\n    border:1px solid var(--primary);\n}"],sourceRoot:""}]),n.locals={root:"Z7AEJu5h_9kumGVl3K4x",selected:"UA2xJ_pGYNrGNLfjkExO"};const c=n}}]);

package/dist/5926.creaditor.bundle.js

@@ -25,21 +25,25 @@
     cdtr-editor-tab-item:focus {
       outline: none;
     }
+    cdtr-editor-tab-item:focus-visible {
+      outline: none;
+      box-shadow: var(--focus-ring-inset, inset 0 0 0 2px #6366f1);
+    }
     cdtr-editor-tab-item {
       width: 100%;
     }
     .icon-tabs {
-      padding: 10px 0;
-      background: #fafafa;
+      padding: var(--space-3, 12px) 0;
+      background: var(--color-bg-subtle, #fafafa);
       width: 52px;
       height: 100%;
       min-height: 400px;
-      border-left: 1px solid #eaeaee;
+      border-left: 1px solid var(--color-border, #eaeaee);
       direction: ltr;
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 2px;
+      gap: var(--space-1, 4px);
     }
 
     .main {
@@ -51,6 +55,6 @@
       overflow-x: hidden;
       max-height: calc(100vh - 130px);
       min-height: 80%;
-      padding-top: 12px;
+      padding-top: var(--space-3, 12px);
     }
   `,s.properties={tabs:{type:Array},value:{type:String}},customElements.define("cdtr-editor-tabs",s)}}]);

package/dist/6151.creaditor.bundle.js

@@ -1 +1 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6151],{36151(e,n,t){t.d(n,{default:()=>x});let a=!0;const o=e=>{{const{component:n,commands:t,helpers:o}=e,i=n.parent("col");return{select:e=>{let{changeTab:n,tab:t}=e;t.text||n("image")},tabs:e=>{const n=[{text:"image",selected:!0},{text:"design"},{text:"link"},{text:"ai"},{text:"settings"}];return e?(n.forEach(n=>n.selected=n.selected=n.text===e),n):n},layout:e=>{const{tab:o,changeTab:s,tabs:r}=e;return[{type:"info",text:"image_micro_copy",active:()=>"image"===o.text},{type:"imagePrompt",active:()=>"ai"===o.text,onChange:e=>{e.target.value}},{type:"gallery",active:()=>"image"===o.text,src:n.props.src,hasPreview:!0,text:"openGalleryImage",justify:"flex-start",onChange:e=>{let n=e.detail;Array.isArray(n)&&(n=n[0]),t.execCommand("src",n.src)}},{type:"input",title:"add_urlAddress_from_media_site",active:()=>"image"===o.text,value:n.props.src||"",onChange:e=>{const n=e.target.value;t.execCommand("src",n)}},{type:"input",title:"altText",active:()=>"image"===o.text,value:n.props.alt||"",onChange:e=>{const n=e.target.value;t.execCommand("alt",n)}},{type:"checkbox",title:"fullWidthOnMobile",checked:!!n.props.isFullWidthOnMobile,active:()=>"image"===o.text,onChange:e=>{const n=e.target.checked;t.execCommand("isFullWidthOnMobile",n)}},{type:"divider",active:()=>"design"===o.text},{type:"checkbox",title:"keep_ratio",checked:!!a,active:()=>"design"===o.text,onChange:e=>{a=!a,s("design")}},{type:"slider",min:10,title:"size",active:()=>"design"===o.text&&a,max:a?1e3:i?.element?.offsetWidth,value:parseInt(n.props.style.width),onInput:e=>{const n=e.target.value;t.execCommand("style",{width:n+"px",height:"auto"})}},{type:"slider",min:10,title:"width",active:()=>"design"===o.text&&!a,max:a?1e3:i?.element?.offsetWidth,value:parseInt(n.props.style.width),onInput:e=>{const a=e.target.value,o=n.atomElement.getBoundingClientRect().height;t.execCommand("style",{width:a+"px",height:o+"px"})}},{type:"slider",min:10,title:"height",active:()=>"design"===o.text&&!a,max:2*i?.element?.offsetWidth,value:parseInt(n.props.style.height),onInput:e=>{const a=e.target.value,o=n.atomElement.getBoundingClientRect().width;t.execCommand("style",{height:a+"px",width:o+"px"})}},{type:"radius",title:"radius",active:()=>"design"===o.text,min:0,max:parseInt(n.props.style.width)/2,value:parseInt(n.props.style.borderRadius),elementId:n.id,borderTopRightRadius:parseInt(n.props.style.borderTopRightRadius),borderTopLeftRadius:parseInt(n.props.style.borderTopLeftRadius),borderBottomRightRadius:parseInt(n.props.style.borderBottomRightRadius),borderBottomLeftRadius:parseInt(n.props.style.borderBottomLeftRadius),onInput:e=>{const n=e.target.json;t.execCommand("style",{borderTopRightRadius:n.borderTopRightRadius+"px",borderTopLeftRadius:n.borderTopLeftRadius+"px",borderBottomRightRadius:n.borderBottomRightRadius+"px",borderBottomLeftRadius:n.borderBottomLeftRadius+"px",borderRadius:null})}},{type:"divider",active:()=>"design"===o.text},{type:"linkpicker",href:n.props.onClick?.link,protocol:n.props.onClick?.link?.protocol,target:n.props.onClick?.link?.target,autofocus:!0,active:()=>"link"===o.text,onChange:e=>{const n={link:e.target.value};t.execCommand("onClick",n)}}]}}}};var i=t(52144);const s=()=>({set:(e,n,t)=>{switch(n){case"src":case"isFullWidthOnMobile":case"isOpenWithModal":case"isCircle":case"alt":case"onClick":return e[n]=t,!0;case"style":if("object"==typeof t)return e[n]=(0,i.A)(e[n],t),!0}}});var r=t(72591),l=t.n(r),d=t(88639),A=t.n(d),c=t(88128),p=t.n(c),m=t(30855),g=t.n(m),u=t(93051),h=t.n(u),C=t(98481),E={};E.setAttributes=g(),E.insert=p().bind(null,"head"),E.domAPI=A(),E.insertStyleElement=h();l()(C.A,E);const y=C.A&&C.A.locals?C.A.locals:void 0;function b(e){const n=document.createElement("div");n.className=y.wrapper;const t=document.createElement("div");t.className=y.skeleton;const a=document.createElement("div");a.className=y.shimmer,t.appendChild(a);const o=document.createElement("div");o.className=y.scanline,t.appendChild(o);const i=document.createElement("div");i.className=y.imageContainer,i.appendChild(e);let s=!1;function r(){if(!s)return;s=!1,n.classList.remove(y.loading),n.classList.add(y.revealed),e.classList.remove(y.imageHidden),e.classList.add(y.imageRevealed);const t=()=>{n.classList.remove(y.revealed),e.classList.remove(y.imageRevealed),e.removeEventListener("animationend",t)};e.addEventListener("animationend",t)}return e.addEventListener("load",r),e.addEventListener("error",r),{wrapper:n,showLoader:function(){(arguments.length>0&&void 0!==arguments[0]&&arguments[0]||e.src&&!e.complete)&&(s=!0,n.classList.add(y.loading),e.classList.add(y.imageHidden))},hideLoader:r,wrap:function(e){n.appendChild(t),n.appendChild(i),e.appendChild(n)},skeleton:t}}var v=t(44217),f={};f.setAttributes=g(),f.insert=p().bind(null,"head"),f.domAPI=A(),f.insertStyleElement=h();l()(v.A,f);const k=v.A&&v.A.locals?v.A.locals:void 0,x=()=>{const e="image";return{name:e,create:n=>{const{createElement:t,compose:a,helpers:i}=n,{arrayToString:r,mergeDiff:l}=i,d=document.createElement("img"),A=document.createElement("div");a.props.style&&!parseInt(a.props.style.height)&&(a.props.style.height="auto"),d.addEventListener("drop",e=>{e.preventDefault();var n=e.dataTransfer.getData("text/html");const t=document.createElement("div");t.innerHTML=n;const o=t.querySelector("img");o&&o.src&&a.editor.store().updateComponent(a,"src",o.src)}),d.draggable=!0,d.src=a.props.src;const c=r(a.classList);d.className=r(c,"editor-image",k.image),A.append(d);const p=b(d);p.wrap(A);let m=a.props.src;function g(e){const n=e.target;n.classList.contains("amazingbar-content-wrapper")&&"INPUT"!==n.tagName&&"TEXTAREA"!==n.tagName&&("Delete"!==e.key&&"Backspace"!==e.key||u.commands.remove())}a.props.src&&p.showLoader(),d.addEventListener("dblclick",()=>{const e=document.createElement("cdtr-gallery");e.opened=!0,e.multi=!0,document.body.append(e),e.addEventListener("file",n=>{let t=n.detail;Array.isArray(t)&&(t=t[0]),a.editor.store().execCommands([{key:"src",value:t.src},{key:"style",value:{height:"auto"}}]),e.opened=!1,setTimeout(()=>{e.remove()},1500)}),e.addEventListener("close",()=>{e.remove()})});const u=t({name:e,id:a.id,template:A,defaultProps:{style:{height:"auto",width:"200px"}},draggable:{group:"element"},droppable:{group:"element"},render:()=>{l(d,{style:a.props.style}),d.width=a.props.width||a.props.style.width,d.height=a.props.height||a.props.style.height,a.props.src&&a.props.src!==m&&(m=a.props.src,p.showLoader(!0)),l(d,{src:a.props.src}),l(d,{alt:a.props.alt})},resizeable:()=>A,handleBar:!0,validator:s(),schema:a.schema,onSelect:e=>{d.classList.add(e),document.addEventListener("keyup",g)},onDeselect:e=>{d.classList.remove(e),document.removeEventListener("keyup",g)},elementProps:a,remove:()=>{A.remove()},createEditor:o});let h=0,C=0,E=!1,y=!1,v=!1,f=!1;return d.addEventListener("dragover",e=>{e.preventDefault()}),d.addEventListener("dragstart",e=>{h=e.clientX,C=e.clientY,E=!0,y=!1,v=!1,f=!1}),d.addEventListener("drag",e=>{if(!E)return;const n=d.closest(".block-component")||d.closest("[data-block]")||d.parentElement;if(!n)return;const t=n.getBoundingClientRect(),a=t.width,o=t.left,i=e.clientX-o,s=.3*a,r=.7*a;if(i<s&&!y){y=!0,f=!1,v=!1;const e=u.parent("col");e&&e.commands.execCommand("justify","start")}else if(i>r&&!v){v=!0,f=!1,y=!1;const e=u.parent("col");e&&e.commands.execCommand("justify","end")}else if(i>=s&&i<=r&&!f){f=!0,y=!1,v=!1;const e=u.closest("col");e&&e.commands.execCommand("justify","center")}}),d.addEventListener("dragend",e=>{E=!1,y=!1,v=!1,f=!1}),u}}}},98481(e,n,t){t.d(n,{A:()=>r});var a=t(82001),o=t.n(a),i=t(40935),s=t.n(i)()(o());s.push([e.id,".lohuqKHS721dHgrbXSxR {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n}\n\n.svsvvszZebJje0J5_aR0 {\n  position: relative;\n  display: block;\n  line-height: 0;\n}\n\n.X_p_Nfsu3cFahVFu4_Bw {\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n._6bzBNhs7hY6_EZJBee1 {\n  animation: RDp05pdkytBCK3jwjH1H 0.4s ease-out forwards;\n}\n\n@keyframes RDp05pdkytBCK3jwjH1H {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Skeleton overlay - light purple placeholder */\n.gT24aWaYLc3ogXj85wMz {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(\n    110deg,\n    #e8e4f0 8%,\n    #f0ecf8 18%,\n    #e8e4f0 33%\n  );\n  background-size: 200% 100%;\n  animation: _Mzf8MsKMSARt4xYISlA 1.5s ease-in-out infinite;\n  pointer-events: none;\n}\n\n.lohuqKHS721dHgrbXSxR.MhfE6WSo5ganwIXH6eLf .gT24aWaYLc3ogXj85wMz {\n  opacity: 1;\n  z-index: 1;\n}\n\n.lohuqKHS721dHgrbXSxR:not(.MhfE6WSo5ganwIXH6eLf) .gT24aWaYLc3ogXj85wMz {\n  opacity: 0;\n  pointer-events: none;\n  z-index: -1;\n  transition: opacity 0.2s ease-out;\n}\n\n.lohuqKHS721dHgrbXSxR.MsTRDhZG2BCJz9_2FibU .gT24aWaYLc3ogXj85wMz {\n  animation: j0DUaUfa5Px2EIxpK3zU 0.4s ease-out forwards;\n}\n\n@keyframes _Mzf8MsKMSARt4xYISlA {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@keyframes j0DUaUfa5Px2EIxpK3zU {\n  to {\n    opacity: 0;\n  }\n}\n\n/* Shimmer highlight sweep */\n.EcbfYuWAe3Ej6GnLZxPW {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.4) 50%,\n    transparent 100%\n  );\n  background-size: 50% 100%;\n  animation: dOhdOxhPYbAyl0kAuAmR 2s ease-in-out infinite;\n}\n\n@keyframes dOhdOxhPYbAyl0kAuAmR {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n}\n\n/* Print-style scanline */\n.ixwwhz1RPbWh52COfXpg {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    rgba(255, 255, 255, 0.6),\n    transparent\n  );\n  animation: qDDvb69LDcaVxWWlah1p 1.2s ease-in-out infinite;\n  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);\n}\n\n@keyframes qDDvb69LDcaVxWWlah1p {\n  0% {\n    top: 0;\n    opacity: 1;\n  }\n  90% {\n    top: 100%;\n    opacity: 0.8;\n  }\n  100% {\n    top: 100%;\n    opacity: 0;\n  }\n}\n","",{version:3,sources:["webpack://./../web-editors/image-editor-component/lib/image-loader.module.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,qBAAqB;EACrB,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,cAAc;EACd,cAAc;AAChB;;AAEA;EACE,UAAU;EACV,kCAAkC;AACpC;;AAEA;EACE,sDAA6C;AAC/C;;AAEA;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,gDAAgD;AAChD;EACE,kBAAkB;EAClB,MAAQ;EAAR,QAAQ;EAAR,SAAQ;EAAR,OAAQ;EACR;;;;;GAKC;EACD,0BAA0B;EAC1B,yDAAoD;EACpD,oBAAoB;AACtB;;AAEA;EACE,UAAU;EACV,UAAU;AACZ;;AAEA;EACE,UAAU;EACV,oBAAoB;EACpB,WAAW;EACX,iCAAiC;AACnC;;AAEA;EACE,sDAAiD;AACnD;;AAEA;EACE;IACE,2BAA2B;EAC7B;EACA;IACE,4BAA4B;EAC9B;AACF;;AAEA;EACE;IACE,UAAU;EACZ;AACF;;AAEA,4BAA4B;AAC5B;EACE,kBAAkB;EAClB,MAAQ;EAAR,QAAQ;EAAR,SAAQ;EAAR,OAAQ;EACR;;;;;GAKC;EACD,yBAAyB;EACzB,uDAA+C;AACjD;;AAEA;EACE;IACE,4BAA4B;EAC9B;EACA;IACE,2BAA2B;EAC7B;AACF;;AAEA,yBAAyB;AACzB;EACE,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACX;;;;;GAKC;EACD,yDAAiD;EACjD,4CAA4C;AAC9C;;AAEA;EACE;IACE,MAAM;IACN,UAAU;EACZ;EACA;IACE,SAAS;IACT,YAAY;EACd;EACA;IACE,SAAS;IACT,UAAU;EACZ;AACF",sourcesContent:[".wrapper {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n}\n\n.imageContainer {\n  position: relative;\n  display: block;\n  line-height: 0;\n}\n\n.imageHidden {\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.imageRevealed {\n  animation: imageFadeIn 0.4s ease-out forwards;\n}\n\n@keyframes imageFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Skeleton overlay - light purple placeholder */\n.skeleton {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    110deg,\n    #e8e4f0 8%,\n    #f0ecf8 18%,\n    #e8e4f0 33%\n  );\n  background-size: 200% 100%;\n  animation: skeletonShimmer 1.5s ease-in-out infinite;\n  pointer-events: none;\n}\n\n.wrapper.loading .skeleton {\n  opacity: 1;\n  z-index: 1;\n}\n\n.wrapper:not(.loading) .skeleton {\n  opacity: 0;\n  pointer-events: none;\n  z-index: -1;\n  transition: opacity 0.2s ease-out;\n}\n\n.wrapper.revealed .skeleton {\n  animation: skeletonFadeOut 0.4s ease-out forwards;\n}\n\n@keyframes skeletonShimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@keyframes skeletonFadeOut {\n  to {\n    opacity: 0;\n  }\n}\n\n/* Shimmer highlight sweep */\n.shimmer {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.4) 50%,\n    transparent 100%\n  );\n  background-size: 50% 100%;\n  animation: shimmerSweep 2s ease-in-out infinite;\n}\n\n@keyframes shimmerSweep {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n}\n\n/* Print-style scanline */\n.scanline {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    rgba(255, 255, 255, 0.6),\n    transparent\n  );\n  animation: scanlineMove 1.2s ease-in-out infinite;\n  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);\n}\n\n@keyframes scanlineMove {\n  0% {\n    top: 0;\n    opacity: 1;\n  }\n  90% {\n    top: 100%;\n    opacity: 0.8;\n  }\n  100% {\n    top: 100%;\n    opacity: 0;\n  }\n}\n"],sourceRoot:""}]),s.locals={wrapper:"lohuqKHS721dHgrbXSxR",imageContainer:"svsvvszZebJje0J5_aR0",imageHidden:"X_p_Nfsu3cFahVFu4_Bw",imageRevealed:"_6bzBNhs7hY6_EZJBee1",imageFadeIn:"RDp05pdkytBCK3jwjH1H",skeleton:"gT24aWaYLc3ogXj85wMz",skeletonShimmer:"_Mzf8MsKMSARt4xYISlA",loading:"MhfE6WSo5ganwIXH6eLf",revealed:"MsTRDhZG2BCJz9_2FibU",skeletonFadeOut:"j0DUaUfa5Px2EIxpK3zU",shimmer:"EcbfYuWAe3Ej6GnLZxPW",shimmerSweep:"dOhdOxhPYbAyl0kAuAmR",scanline:"ixwwhz1RPbWh52COfXpg",scanlineMove:"qDDvb69LDcaVxWWlah1p"};const r=s},44217(e,n,t){t.d(n,{A:()=>r});var a=t(82001),o=t.n(a),i=t(40935),s=t.n(i)()(o());s.push([e.id,".YbsG1_k3QD06_W0gNo53{\n    display: block;\n    max-width: 100%;\n}","",{version:3,sources:["webpack://./../web-editors/image-editor-component/lib/style.module.css"],names:[],mappings:"AAAA;IACI,cAAc;IACd,eAAe;AACnB",sourcesContent:[".image{\n    display: block;\n    max-width: 100%;\n}"],sourceRoot:""}]),s.locals={image:"YbsG1_k3QD06_W0gNo53"};const r=s}}]);
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[6151],{36151(e,n,t){t.d(n,{default:()=>x});let a=!0;const o=e=>{{const{component:n,commands:t,helpers:o}=e,i=n.parent("col");return{select:e=>{let{changeTab:n,tab:t}=e;t.text||n("image")},tabs:e=>{const n=[{text:"image",selected:!0},{text:"style"},{text:"link"},{text:"ai"},{text:"settings"}];return e?(n.forEach(n=>n.selected=n.selected=n.text===e),n):n},layout:e=>{const{tab:o,changeTab:s,tabs:r}=e;return[{type:"gallery",active:()=>"image"===o.text,src:n.props.src,hasPreview:!0,text:"openGalleryImage",justify:"flex-start",onChange:e=>{let n=e.detail;Array.isArray(n)&&(n=n[0]),t.execCommand("src",n.src)}},{type:"input",title:"altText",active:()=>"image"===o.text,value:n.props.alt||"",onChange:e=>{const n=e.target.value;t.execCommand("alt",n)}},{type:"input",title:"add_urlAddress_from_media_site",active:()=>"image"===o.text,value:n.props.src||"",onChange:e=>{const n=e.target.value;t.execCommand("src",n)}},{type:"imagePrompt",active:()=>"ai"===o.text,onChange:e=>{e.target.value}},{type:"checkbox",title:"fullWidthOnMobile",checked:!!n.props.isFullWidthOnMobile,active:()=>"image"===o.text,onChange:e=>{const n=e.target.checked;t.execCommand("isFullWidthOnMobile",n)}},{type:"divider",active:()=>"style"===o.text},{type:"checkbox",title:"keep_ratio",checked:!!a,active:()=>"style"===o.text,onChange:e=>{a=!a,s("style")}},{type:"slider",min:10,title:"size",active:()=>"style"===o.text&&a,max:a?1e3:i?.element?.offsetWidth,value:parseInt(n.props.style.width),onInput:e=>{const n=e.target.value;t.execCommand("style",{width:n+"px",height:"auto"})}},{type:"slider",min:10,title:"width",active:()=>"style"===o.text&&!a,max:a?1e3:i?.element?.offsetWidth,value:parseInt(n.props.style.width),onInput:e=>{const a=e.target.value,o=n.atomElement.getBoundingClientRect().height;t.execCommand("style",{width:a+"px",height:o+"px"})}},{type:"slider",min:10,title:"height",active:()=>"style"===o.text&&!a,max:2*i?.element?.offsetWidth,value:parseInt(n.props.style.height),onInput:e=>{const a=e.target.value,o=n.atomElement.getBoundingClientRect().width;t.execCommand("style",{height:a+"px",width:o+"px"})}},{type:"radius",title:"radius",active:()=>"style"===o.text,min:0,max:parseInt(n.props.style.width)/2,value:parseInt(n.props.style.borderRadius),elementId:n.id,borderTopRightRadius:parseInt(n.props.style.borderTopRightRadius),borderTopLeftRadius:parseInt(n.props.style.borderTopLeftRadius),borderBottomRightRadius:parseInt(n.props.style.borderBottomRightRadius),borderBottomLeftRadius:parseInt(n.props.style.borderBottomLeftRadius),onInput:e=>{const n=e.target.json;t.execCommand("style",{borderTopRightRadius:n.borderTopRightRadius+"px",borderTopLeftRadius:n.borderTopLeftRadius+"px",borderBottomRightRadius:n.borderBottomRightRadius+"px",borderBottomLeftRadius:n.borderBottomLeftRadius+"px",borderRadius:null})}},{type:"heading",level:6,text:"alignment",active:()=>"style"===o.text},{type:"dropdown",title:"horizontal_align",active:()=>"style"===o.text,value:"auto"===n.props.style.marginLeft&&"auto"===n.props.style.marginRight?"center":"auto"===n.props.style.marginLeft?"right":"left",items:[{value:"left",label:"left"},{value:"center",label:"center"},{value:"right",label:"right"}],onChange:e=>{const n=e.target.value,a={marginLeft:null,marginRight:null};"center"===n?(a.marginLeft="auto",a.marginRight="auto"):"right"===n?(a.marginLeft="auto",a.marginRight="0"):(a.marginLeft="0",a.marginRight="auto"),t.execCommand("style",a)}},{type:"dropdown",title:"vertical_align",active:()=>"style"===o.text,value:n.props.style.verticalAlign||"top",items:[{value:"top",label:"top"},{value:"middle",label:"middle"},{value:"bottom",label:"bottom"}],onChange:e=>{const n=e.target.value;t.execCommand("style",{verticalAlign:n})}},{type:"divider",active:()=>"style"===o.text},{type:"linkpicker",href:n.props.onClick?.link,protocol:n.props.onClick?.link?.protocol,target:n.props.onClick?.link?.target,autofocus:!0,active:()=>"link"===o.text,onChange:e=>{const n={link:e.target.value};t.execCommand("onClick",n)}}]}}}};var i=t(52144);const s=()=>({set:(e,n,t)=>{switch(n){case"src":case"isFullWidthOnMobile":case"isOpenWithModal":case"isCircle":case"alt":case"onClick":return e[n]=t,!0;case"style":if("object"==typeof t)return e[n]=(0,i.A)(e[n],t),!0}}});var r=t(72591),l=t.n(r),d=t(88639),A=t.n(d),c=t(88128),p=t.n(c),m=t(30855),g=t.n(m),u=t(93051),h=t.n(u),C=t(98481),E={};E.setAttributes=g(),E.insert=p().bind(null,"head"),E.domAPI=A(),E.insertStyleElement=h();l()(C.A,E);const y=C.A&&C.A.locals?C.A.locals:void 0;function v(e){const n=document.createElement("div");n.className=y.wrapper;const t=document.createElement("div");t.className=y.skeleton;const a=document.createElement("div");a.className=y.shimmer,t.appendChild(a);const o=document.createElement("div");o.className=y.scanline,t.appendChild(o);const i=document.createElement("div");i.className=y.imageContainer,i.appendChild(e);let s=!1;function r(){if(!s)return;s=!1,n.classList.remove(y.loading),n.classList.add(y.revealed),e.classList.remove(y.imageHidden),e.classList.add(y.imageRevealed);const t=()=>{n.classList.remove(y.revealed),e.classList.remove(y.imageRevealed),e.removeEventListener("animationend",t)};e.addEventListener("animationend",t)}return e.addEventListener("load",r),e.addEventListener("error",r),{wrapper:n,showLoader:function(){(arguments.length>0&&void 0!==arguments[0]&&arguments[0]||e.src&&!e.complete)&&(s=!0,n.classList.add(y.loading),e.classList.add(y.imageHidden))},hideLoader:r,wrap:function(e){n.appendChild(t),n.appendChild(i),e.appendChild(n)},skeleton:t}}var b=t(44217),f={};f.setAttributes=g(),f.insert=p().bind(null,"head"),f.domAPI=A(),f.insertStyleElement=h();l()(b.A,f);const k=b.A&&b.A.locals?b.A.locals:void 0,x=()=>{const e="image";return{name:e,create:n=>{const{createElement:t,compose:a,helpers:i}=n,{arrayToString:r,mergeDiff:l}=i,d=document.createElement("img"),A=document.createElement("div");a.props.style&&!parseInt(a.props.style.height)&&(a.props.style.height="auto"),d.addEventListener("drop",e=>{e.preventDefault();var n=e.dataTransfer.getData("text/html");const t=document.createElement("div");t.innerHTML=n;const o=t.querySelector("img");o&&o.src&&a.editor.store().updateComponent(a,"src",o.src)}),d.draggable=!0,d.src=a.props.src;const c=r(a.classList);d.className=r(c,"editor-image",k.image),A.append(d);const p=v(d);p.wrap(A);let m=a.props.src;function g(e){const n=e.target;n.classList.contains("amazingbar-content-wrapper")&&"INPUT"!==n.tagName&&"TEXTAREA"!==n.tagName&&("Delete"!==e.key&&"Backspace"!==e.key||u.commands.remove())}a.props.src&&p.showLoader(),d.addEventListener("dblclick",()=>{const e=document.createElement("cdtr-gallery");e.opened=!0,e.multi=!0,document.body.append(e),e.addEventListener("file",n=>{let t=n.detail;Array.isArray(t)&&(t=t[0]),a.editor.store().execCommands([{key:"src",value:t.src},{key:"style",value:{height:"auto"}}]),e.opened=!1,setTimeout(()=>{e.remove()},1500)}),e.addEventListener("close",()=>{e.remove()})});const u=t({name:e,id:a.id,template:A,defaultProps:{style:{height:"auto",width:"200px"}},draggable:{group:"element"},droppable:{group:"element"},render:()=>{l(d,{style:a.props.style}),d.width=a.props.width||a.props.style.width,d.height=a.props.height||a.props.style.height,a.props.src&&a.props.src!==m&&(m=a.props.src,p.showLoader(!0)),l(d,{src:a.props.src}),l(d,{alt:a.props.alt})},resizeable:()=>A,handleBar:!0,validator:s(),schema:a.schema,onSelect:e=>{d.classList.add(e),document.addEventListener("keyup",g)},onDeselect:e=>{d.classList.remove(e),document.removeEventListener("keyup",g)},elementProps:a,remove:()=>{A.remove()},createEditor:o});let h=0,C=0,E=!1,y=!1,b=!1,f=!1;return d.addEventListener("dragover",e=>{e.preventDefault()}),d.addEventListener("dragstart",e=>{h=e.clientX,C=e.clientY,E=!0,y=!1,b=!1,f=!1}),d.addEventListener("drag",e=>{if(!E)return;const n=d.closest(".block-component")||d.closest("[data-block]")||d.parentElement;if(!n)return;const t=n.getBoundingClientRect(),a=t.width,o=t.left,i=e.clientX-o,s=.3*a,r=.7*a;if(i<s&&!y){y=!0,f=!1,b=!1;const e=u.parent("col");e&&e.commands.execCommand("justify","start")}else if(i>r&&!b){b=!0,f=!1,y=!1;const e=u.parent("col");e&&e.commands.execCommand("justify","end")}else if(i>=s&&i<=r&&!f){f=!0,y=!1,b=!1;const e=u.closest("col");e&&e.commands.execCommand("justify","center")}}),d.addEventListener("dragend",e=>{E=!1,y=!1,b=!1,f=!1}),u}}}},98481(e,n,t){t.d(n,{A:()=>r});var a=t(82001),o=t.n(a),i=t(40935),s=t.n(i)()(o());s.push([e.id,".lohuqKHS721dHgrbXSxR {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n}\n\n.svsvvszZebJje0J5_aR0 {\n  position: relative;\n  display: block;\n  line-height: 0;\n}\n\n.X_p_Nfsu3cFahVFu4_Bw {\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n._6bzBNhs7hY6_EZJBee1 {\n  animation: RDp05pdkytBCK3jwjH1H 0.4s ease-out forwards;\n}\n\n@keyframes RDp05pdkytBCK3jwjH1H {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Skeleton overlay - light purple placeholder */\n.gT24aWaYLc3ogXj85wMz {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(\n    110deg,\n    #e8e4f0 8%,\n    #f0ecf8 18%,\n    #e8e4f0 33%\n  );\n  background-size: 200% 100%;\n  animation: _Mzf8MsKMSARt4xYISlA 1.5s ease-in-out infinite;\n  pointer-events: none;\n}\n\n.lohuqKHS721dHgrbXSxR.MhfE6WSo5ganwIXH6eLf .gT24aWaYLc3ogXj85wMz {\n  opacity: 1;\n  z-index: 1;\n}\n\n.lohuqKHS721dHgrbXSxR:not(.MhfE6WSo5ganwIXH6eLf) .gT24aWaYLc3ogXj85wMz {\n  opacity: 0;\n  pointer-events: none;\n  z-index: -1;\n  transition: opacity 0.2s ease-out;\n}\n\n.lohuqKHS721dHgrbXSxR.MsTRDhZG2BCJz9_2FibU .gT24aWaYLc3ogXj85wMz {\n  animation: j0DUaUfa5Px2EIxpK3zU 0.4s ease-out forwards;\n}\n\n@keyframes _Mzf8MsKMSARt4xYISlA {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@keyframes j0DUaUfa5Px2EIxpK3zU {\n  to {\n    opacity: 0;\n  }\n}\n\n/* Shimmer highlight sweep */\n.EcbfYuWAe3Ej6GnLZxPW {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.4) 50%,\n    transparent 100%\n  );\n  background-size: 50% 100%;\n  animation: dOhdOxhPYbAyl0kAuAmR 2s ease-in-out infinite;\n}\n\n@keyframes dOhdOxhPYbAyl0kAuAmR {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n}\n\n/* Print-style scanline */\n.ixwwhz1RPbWh52COfXpg {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    rgba(255, 255, 255, 0.6),\n    transparent\n  );\n  animation: qDDvb69LDcaVxWWlah1p 1.2s ease-in-out infinite;\n  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);\n}\n\n@keyframes qDDvb69LDcaVxWWlah1p {\n  0% {\n    top: 0;\n    opacity: 1;\n  }\n  90% {\n    top: 100%;\n    opacity: 0.8;\n  }\n  100% {\n    top: 100%;\n    opacity: 0;\n  }\n}\n","",{version:3,sources:["webpack://./../web-editors/image-editor-component/lib/image-loader.module.css"],names:[],mappings:"AAAA;EACE,kBAAkB;EAClB,qBAAqB;EACrB,gBAAgB;AAClB;;AAEA;EACE,kBAAkB;EAClB,cAAc;EACd,cAAc;AAChB;;AAEA;EACE,UAAU;EACV,kCAAkC;AACpC;;AAEA;EACE,sDAA6C;AAC/C;;AAEA;EACE;IACE,UAAU;EACZ;EACA;IACE,UAAU;EACZ;AACF;;AAEA,gDAAgD;AAChD;EACE,kBAAkB;EAClB,MAAQ;EAAR,QAAQ;EAAR,SAAQ;EAAR,OAAQ;EACR;;;;;GAKC;EACD,0BAA0B;EAC1B,yDAAoD;EACpD,oBAAoB;AACtB;;AAEA;EACE,UAAU;EACV,UAAU;AACZ;;AAEA;EACE,UAAU;EACV,oBAAoB;EACpB,WAAW;EACX,iCAAiC;AACnC;;AAEA;EACE,sDAAiD;AACnD;;AAEA;EACE;IACE,2BAA2B;EAC7B;EACA;IACE,4BAA4B;EAC9B;AACF;;AAEA;EACE;IACE,UAAU;EACZ;AACF;;AAEA,4BAA4B;AAC5B;EACE,kBAAkB;EAClB,MAAQ;EAAR,QAAQ;EAAR,SAAQ;EAAR,OAAQ;EACR;;;;;GAKC;EACD,yBAAyB;EACzB,uDAA+C;AACjD;;AAEA;EACE;IACE,4BAA4B;EAC9B;EACA;IACE,2BAA2B;EAC7B;AACF;;AAEA,yBAAyB;AACzB;EACE,kBAAkB;EAClB,OAAO;EACP,QAAQ;EACR,WAAW;EACX;;;;;GAKC;EACD,yDAAiD;EACjD,4CAA4C;AAC9C;;AAEA;EACE;IACE,MAAM;IACN,UAAU;EACZ;EACA;IACE,SAAS;IACT,YAAY;EACd;EACA;IACE,SAAS;IACT,UAAU;EACZ;AACF",sourcesContent:[".wrapper {\n  position: relative;\n  display: inline-block;\n  overflow: hidden;\n}\n\n.imageContainer {\n  position: relative;\n  display: block;\n  line-height: 0;\n}\n\n.imageHidden {\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.imageRevealed {\n  animation: imageFadeIn 0.4s ease-out forwards;\n}\n\n@keyframes imageFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n/* Skeleton overlay - light purple placeholder */\n.skeleton {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    110deg,\n    #e8e4f0 8%,\n    #f0ecf8 18%,\n    #e8e4f0 33%\n  );\n  background-size: 200% 100%;\n  animation: skeletonShimmer 1.5s ease-in-out infinite;\n  pointer-events: none;\n}\n\n.wrapper.loading .skeleton {\n  opacity: 1;\n  z-index: 1;\n}\n\n.wrapper:not(.loading) .skeleton {\n  opacity: 0;\n  pointer-events: none;\n  z-index: -1;\n  transition: opacity 0.2s ease-out;\n}\n\n.wrapper.revealed .skeleton {\n  animation: skeletonFadeOut 0.4s ease-out forwards;\n}\n\n@keyframes skeletonShimmer {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n@keyframes skeletonFadeOut {\n  to {\n    opacity: 0;\n  }\n}\n\n/* Shimmer highlight sweep */\n.shimmer {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.4) 50%,\n    transparent 100%\n  );\n  background-size: 50% 100%;\n  animation: shimmerSweep 2s ease-in-out infinite;\n}\n\n@keyframes shimmerSweep {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(200%);\n  }\n}\n\n/* Print-style scanline */\n.scanline {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(\n    to bottom,\n    transparent,\n    rgba(255, 255, 255, 0.6),\n    transparent\n  );\n  animation: scanlineMove 1.2s ease-in-out infinite;\n  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);\n}\n\n@keyframes scanlineMove {\n  0% {\n    top: 0;\n    opacity: 1;\n  }\n  90% {\n    top: 100%;\n    opacity: 0.8;\n  }\n  100% {\n    top: 100%;\n    opacity: 0;\n  }\n}\n"],sourceRoot:""}]),s.locals={wrapper:"lohuqKHS721dHgrbXSxR",imageContainer:"svsvvszZebJje0J5_aR0",imageHidden:"X_p_Nfsu3cFahVFu4_Bw",imageRevealed:"_6bzBNhs7hY6_EZJBee1",imageFadeIn:"RDp05pdkytBCK3jwjH1H",skeleton:"gT24aWaYLc3ogXj85wMz",skeletonShimmer:"_Mzf8MsKMSARt4xYISlA",loading:"MhfE6WSo5ganwIXH6eLf",revealed:"MsTRDhZG2BCJz9_2FibU",skeletonFadeOut:"j0DUaUfa5Px2EIxpK3zU",shimmer:"EcbfYuWAe3Ej6GnLZxPW",shimmerSweep:"dOhdOxhPYbAyl0kAuAmR",scanline:"ixwwhz1RPbWh52COfXpg",scanlineMove:"qDDvb69LDcaVxWWlah1p"};const r=s},44217(e,n,t){t.d(n,{A:()=>r});var a=t(82001),o=t.n(a),i=t(40935),s=t.n(i)()(o());s.push([e.id,".YbsG1_k3QD06_W0gNo53{\n    display: block;\n    max-width: 100%;\n}","",{version:3,sources:["webpack://./../web-editors/image-editor-component/lib/style.module.css"],names:[],mappings:"AAAA;IACI,cAAc;IACd,eAAe;AACnB",sourcesContent:[".image{\n    display: block;\n    max-width: 100%;\n}"],sourceRoot:""}]),s.locals={image:"YbsG1_k3QD06_W0gNo53"};const r=s}}]);

package/dist/638.creaditor.bundle.js

@@ -1,23 +1,52 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[638],{638(e,t,i){i.r(t),i.d(t,{DevicePicker:()=>h});var o,r,c,n,d=i(59088),s=i(36936),p=i(59929);let h=(o=(0,i(49410).MZ)({type:String}),(n=class extends p.WF{constructor(){super(),(0,d.A)(this,"device",c,this),this.device="desktop"}choose(e){this.device=e}render(){return p.qy` <cdtr-row alignItems="center">
-      <paper-button @click=${()=>this.choose("phone")}>
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[638],{638(e,t,o){o.r(t),o.d(t,{DevicePicker:()=>i});var r=o(59929);class i extends r.WF{constructor(){super(),this.device=void 0,this.device="desktop"}choose(e){this.device!==e&&(this.device=e,this.dispatchEvent(new CustomEvent("device-change",{detail:{device:e},bubbles:!0,composed:!0})))}render(){return r.qy`<div class="segmented" role="group">
+      <button
+        type="button"
+        aria-pressed=${"desktop"===this.device}
+        @click=${()=>this.choose("desktop")}
+      >
+        <cdtr-tooltip content="design_for_desktop">
+          <cdtr-icon width="18" icon="desktop"></cdtr-icon>
+        </cdtr-tooltip>
+      </button>
+      <button
+        type="button"
+        aria-pressed=${"phone"===this.device}
+        @click=${()=>this.choose("phone")}
+      >
         <cdtr-tooltip content="design_for_phone">
-          <cdtr-icon
-            color=${"phone"===this.device?"var(--primary)":""}
-            width="18"
-            icon="phone"
-          ></cdtr-icon>
+          <cdtr-icon width="18" icon="phone"></cdtr-icon>
         </cdtr-tooltip>
-      </paper-button>
-      <paper-button @click=${()=>this.choose("desktop")}
-        ><cdtr-tooltip content="design_for_desktop"
-          ><cdtr-icon
-            color=${"desktop"===this.device?"var(--primary)":""}
-            width="18"
-            icon="desktop"
-          ></cdtr-icon></cdtr-tooltip></paper-button
-    ></cdtr-row>`}}).styles=p.AH`
-    paper-button {
-      padding: 0;
-      min-width: 0;
+      </button>
+    </div>`}}i.properties={device:{type:String,reflect:!0}},i.styles=r.AH`
+    :host {
+      display: inline-flex;
+    }
+    .segmented {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      padding: 2px;
+      border-radius: 8px;
+      background: var(--surface-2, rgba(0, 0, 0, 0.05));
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px 6px;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      cursor: pointer;
+      color: var(--text-secondary, #6b7280);
+      transition: background 0.15s ease, color 0.15s ease;
+    }
+    button:hover {
+      background: var(--surface-3, rgba(0, 0, 0, 0.06));
+    }
+    button[aria-pressed="true"] {
+      background: var(--surface-1, #fff);
+      color: var(--primary);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
     }
-  `,r=n,c=(0,s.A)(r.prototype,"device",[o],{configurable:!0,enumerable:!0,writable:!0,initializer:null}),r);customElements.define("cdtr-device-picker",h)}}]);
+  `,customElements.define("cdtr-device-picker",i)}}]);

package/dist/6713.creaditor.bundle.js

@@ -14,7 +14,7 @@
     :host {
       position: fixed;
       inset: 0;
-      z-index: 2147483000;
+      z-index: var(--z-blocking, 2147483646);
       pointer-events: none;
       display: block;
     }