@creaditor/web-starterkit 1.0.0

package/dist/7523.creaditor.bundle.js

@@ -0,0 +1,27 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7523],{67523(t,e,r){r.r(e),r.d(e,{FormatColor:()=>o});var i=r(59929);class o extends i.WF{constructor(){super(),this.iconStyle=""}render(){return i.qy`
+      <svg
+        style=${this.iconStyle}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        focusable="false"
+        width="24"
+        height="24"
+      >
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path
+          d="M15.246 14H8.754l-1.6 4H5l6-15h2l6 15h-2.154l-1.6-4zm-.8-2L12 5.885 9.554 12h4.892zM3 20h18v2H3v-2z"
+        />
+        <path style="fill:${this.color}" d="M0 20h24v4H0z"></path>
+      </svg>
+    `}}o.styles=i.AH`
+    :host {
+      display: inherit;
+      --cdtr-icon-width: 20px;
+      --cdtr-icon-height: 20px;
+    }
+    svg {
+      width: var(--cdtr-icon-width);
+      height: var(--cdtr-icon-height);
+      color: var(--cdtr-icon-color);
+    }
+  `,o.properties={iconStyle:{type:String},color:{type:String}},customElements.define("cdtr-text-format-color",o)}}]);

package/dist/7564.creaditor.bundle.js

@@ -0,0 +1 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7564],{7564(e,t,n){n.d(t,{default:()=>y});const o=e=>{{const{component:t,commands:n,helpers:o}=e;return{select:e=>{let{changeTab:t,tab:n}=e;"design"!==n.text&&t("design")},tabs:e=>{const t=[{text:"design"},{text:"animations"},{text:"settings"}];return t.forEach(t=>t.selected=t.selected=t.text===e),t},layout:e=>{let{tab:o,changeTab:r,tabs:s}=e;const l=t.closest("col");return[{type:"colorpicker",title:"color",value:t.props.style.borderColor,onChange:e=>{const t=e.target.value;n.execCommand("style",{borderColor:t})}},{type:"slider",title:"width",value:parseFloat(t.props.style.width),unit:"px",min:20,max:parseInt(window.getComputedStyle(l.element).width),onInput:e=>{const t=e.target.value;n.execCommand("style",{width:t+"px"})}},{type:"slider",title:"height",unit:"px",value:parseFloat(t.props.style.borderTopWidth),min:1,max:80,onInput:e=>{const t=e.target.value;n.execCommand("style",{borderTopWidth:t+"px"})}},{type:"slider",title:"radius",unit:"px",value:parseFloat(t.props.style.borderRadius),min:0,max:99,onInput:e=>{const t=e.target.value;n.execCommand("style",{borderRadius:t+"px"})}},{type:"borderpicker",title:"style",value:t.props.style.borderTopStyle,onChange:e=>{const t=e.target.value;n.execCommand("style",{borderTopStyle:t})}}]}}}},r=e=>{let{helpers:t}=e;return{set:(e,n,o)=>"style"===n&&(e[n]=t.deepMerge(e[n],o),!0)}};var s=n(72591),l=n.n(s),a=n(88639),i=n.n(a),d=n(88128),p=n.n(d),A=n(30855),c=n.n(A),u=n(93051),m=n.n(u),b=n(26149),h={};h.setAttributes=c(),h.insert=p().bind(null,"head"),h.domAPI=i(),h.insertStyleElement=m();l()(b.A,h);const C=b.A&&b.A.locals?b.A.locals:void 0,y=()=>{const e="divider";return{name:e,create:t=>{let{createElement:n,compose:s,helpers:l}=t;const a=document.createElement("div"),i=document.createElement("div");return i.classList.add(C.divider),a.classList.add(C.root),a.append(i),n({name:e,id:s.id,template:a,defaultProps:{style:{width:"300px",borderTopWidth:"5px",borderTopStyle:"solid",borderTopColor:"#000"}},draggable:{group:"element"},droppable:{group:"element"},handleBar:!0,render:()=>{if(s.props.style)for(const e in s.props.style)if(Object.hasOwnProperty.call(s.props.style,e)){const t=s.props.style[e];i.style[e]=t}},validator:r({template:a,helpers:l,divider:i}),schema:s.schema,onSelect:e=>{a.classList.add(e)},onDeselect:e=>{a.classList.remove(e)},elementProps:s,remove:()=>{a.remove()},createEditor:o})}}}},26149(e,t,n){n.d(t,{A:()=>a});var o=n(82001),r=n.n(o),s=n(40935),l=n.n(s)()(r());l.push([e.id,'.bb8tTDVKPL6l_p1cP_MF{\n    min-height: 20px;\n}\n\n.ZKWR9YGnzQtvYWPfni0a{\n    margin: auto;\n    display: block;\n}\n.ZKWR9YGnzQtvYWPfni0a:after{\n    content: "";\n    display: block;\n    width: 100%;\n    height:20px;\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n}\n.ZKWR9YGnzQtvYWPfni0a:before{\n    content: "";\n    display: block;\n    width: 100%;\n    height:20px;\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform: translateY(-100%);\n    z-index: 1;\n}',"",{version:3,sources:["webpack://./../web-editors/divider-editor-component/lib/style.module.css"],names:[],mappings:"AAAA;IACI,gBAAgB;AACpB;;AAEA;IACI,YAAY;IACZ,cAAc;AAClB;AACA;IACI,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;IACX,6BAA6B;IAC7B,kBAAkB;IAClB,MAAM;IACN,OAAO;IACP,UAAU;AACd;AACA;IACI,WAAW;IACX,cAAc;IACd,WAAW;IACX,WAAW;IACX,6BAA6B;IAC7B,kBAAkB;IAClB,MAAM;IACN,OAAO;IACP,4BAA4B;IAC5B,UAAU;AACd",sourcesContent:['.root{\n    min-height: 20px;\n}\n\n.divider{\n    margin: auto;\n    display: block;\n}\n.divider:after{\n    content: "";\n    display: block;\n    width: 100%;\n    height:20px;\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n}\n.divider:before{\n    content: "";\n    display: block;\n    width: 100%;\n    height:20px;\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform: translateY(-100%);\n    z-index: 1;\n}'],sourceRoot:""}]),l.locals={root:"bb8tTDVKPL6l_p1cP_MF",divider:"ZKWR9YGnzQtvYWPfni0a"};const a=l}}]);

package/dist/763.creaditor.bundle.js

@@ -0,0 +1 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[763],{10763(e,t,n){n.d(t,{default:()=>B});var o=n(96374);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"},{text:"settings"}];return t.forEach(t=>t.selected=t.selected=t.text===e),t},layout:e=>{let{tab:i,changeTab:r,tabs:a}=e;return[{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:"divider",active:()=>"design"===i.text},{type:"divider",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 i="underline"===t.props.style.textDecoration?"none":"underline";n.execCommand("style",{textDecoration:i})}}},{type:"divider",active:()=>"design"===i.text},{type:"fontFamily",active:()=>"design"===i.text,value:t.props.style.fontFamily,onChange:e=>{const t=e.target.value;n.execCommand("style",{fontFamily:t})}},{type:"divider",active:()=>"design"===i.text},{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:"divider",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:"divider",active:()=>"design"===i.text},{type:"colorpicker",alpha:!1,title:"button_background",active:()=>"design"===i.text,value:t.props.style.background,onChange:e=>{const i=e.target.value,r=(0,o.w)(t.props.style.color,i);n.execCommand("style",{color:r}),n.execCommand("style",{background:i,backgroundColor:null})}},{type:"divider",active:()=>"design"===i.text},{type:"colorpicker",title:"font_color",alpha:!1,active:()=>"design"===i.text,value:t.props.style.color,onChange:e=>{const t=e.target.value;n.execCommand("style",{color:t})}},{type:"divider",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:"divider",active:()=>"design"===i.text},{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:"divider",active:()=>"design"===i.text},{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:"divider",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,i=e.target.leftValue,r=e.target.rightValue;n.execCommand("style",{paddingTop:t+"px",paddingBottom:o+"px",paddingLeft:i+"px",paddingRight:r+"px",padding:null})}}]}}}},r=e=>{let{helpers:t,editor:n,getFocused:o}=e;return{set:(e,i,r)=>{switch(i){case"style":return e[i]=t.deepMerge(e[i],r),!0;case"text":return e.text=r,o()||n.chain().setContent(r).run(),!0;case"ripple":case"rippleColor":case"scaleOnHover":case"hasIcon":case"iconUrl":case"iconSize":case"iconDirection":return e[i]=r,!0;case"onClick":if(r.link)return e[i]=r,!0}}}};var a=n(72591),s=n.n(a),l=n(88639),c=n.n(l),d=n(88128),p=n.n(d),u=n(30855),m=n.n(u),g=n(93051),A=n.n(g),h=n(49536),y={};y.setAttributes=m(),y.insert=p().bind(null,"head"),y.domAPI=c(),y.insertStyleElement=A();s()(h.A,y);const x=h.A&&h.A.locals?h.A.locals:void 0;var C=n(81318),v=n(1366);const b=C.bP.create({name:"paragraph",priority:1e3,addOptions:()=>({HTMLAttributes:{}}),group:"block",content:"inline*",parseHTML:()=>[{tag:"p"}],renderHTML({HTMLAttributes:e}){return["p",(0,C.KV)(this.options.HTMLAttributes,e),0]},addCommands(){return{setParagraph:()=>({commands:e})=>e.setNode(this.name)}},addKeyboardShortcuts(){return{"Mod-Alt-0":()=>this.editor.commands.setParagraph()}}});var f=n(85194),E=n(28396);const k=C.YY.create({addKeyboardShortcuts:()=>({Enter:()=>!0})});const B=()=>{const e="button";return{name:e,create:t=>{const{createElement:n,compose:o,helpers:a}=t,{arrayToString:s,mergeDiff:l}=a;let c=!1;const d=document.createElement("div"),p=document.createElement("div"),{editor:u}=function(e){let{content:t,element:n}=e;return{element:n,editor:new C.KE({element:n,extensions:[v.A,b,E.A,f.Ay,k],content:t})}}({content:o.props.text,element:p});d.appendChild(p);return u.view.dom.setAttribute("dir","auto"),u.on("update",e=>{let{editor:t}=e;const n=t.getText();o.editor.store().updateComponent(o,"text",n)}),u.on("focus",e=>{let{event:t,editor:n}=e;c=!0}),u.on("blur",e=>{let{event:t,editor:n}=e;c=!1}),d.className=x.button,n({name:e,id:o.id,template:d,commands:{insertContent:e=>{u.commands.insertContent(e),u.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)}l(d,{style:o.props.style}),d.style.height="auto";const e=o.props.hasIcon,t=o.props.iconUrl,n=o.props.iconDirection,i=o.props.iconSize,r="icon_in_button";let a=d.querySelector(`.${r}`)||document.createElement("img");e&&t?(a.className=r,a.src=t,a.style.width=(i||16)+"px",a.style.height=(i||16)+"px",a.style.marginRight="8px",a.style.marginLeft="8px","left"===n?d.insertBefore(a,d.firstChild):d.appendChild(a)):a.remove()},draggable:{group:"element"},droppable:{group:"element"},resizeable:()=>d,handleBar:!0,validator:r({template:d,helpers:a,editor:u,getFocused:function(){return c}}),schema:o.schema,onSelect:e=>{d.classList.add(e)},onDeselect:e=>{d.classList.remove(e)},elementProps:o,destroy:()=>{u.destroy()},remove:()=>{d.remove()},createEditor:i})}}}},49536(e,t,n){n.d(t,{A:()=>s});var o=n(82001),i=n.n(o),r=n(40935),a=n.n(r)()(i());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 s=a}}]);

package/dist/767.creaditor.bundle.js

@@ -0,0 +1,274 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[767],{70767(e,t,r){r.r(t),r.d(t,{PexelsGallery:()=>c});var o=r(59929),a=r(49549),s=r(93967),l=r(86959);function i(e){e||(e={query:"nature",per_page:1});const t=`${l.XW.agent_url}pexels/search/?query=${e.query||"marketing"}&per_page=${e.per_page||1}`;return fetch(t).then(e=>e.json()).then(e=>{if("success"===e.status&&e.data)return e.data.photos;throw new Error("Invalid response from backend")}).catch(e=>{throw console.error("Error fetching images:",e),e})}class c extends o.WF{constructor(){super(),this.images=[],this.loading=!1,this.searchQuery="",this.page=1,this.hasMore=!0,this.perPage=20,this.multi=!0,this.selectedColor="",this.defaultSearchTerms=["nature","landscape","city","people","technology","food","architecture","travel","business","art"],this.colorOptions=[{name:"Red",value:"red",hex:"#ff0000"},{name:"Orange",value:"orange",hex:"#ff8000"},{name:"Yellow",value:"yellow",hex:"#ffff00"},{name:"Green",value:"green",hex:"#00ff00"},{name:"Blue",value:"blue",hex:"#0000ff"},{name:"Purple",value:"purple",hex:"#8000ff"},{name:"Pink",value:"pink",hex:"#ff0080"},{name:"Brown",value:"brown",hex:"#8b4513"},{name:"Black",value:"black",hex:"#000000"},{name:"White",value:"white",hex:"#ffffff"},{name:"Gray",value:"gray",hex:"#808080"},{name:"Teal",value:"teal",hex:"#008080"},{name:"Navy",value:"navy",hex:"#000080"},{name:"Maroon",value:"maroon",hex:"#800000"},{name:"Olive",value:"olive",hex:"#808000"},{name:"Lime",value:"lime",hex:"#00ff00"},{name:"Aqua",value:"aqua",hex:"#00ffff"},{name:"Silver",value:"silver",hex:"#c0c0c0"},{name:"Fuchsia",value:"fuchsia",hex:"#ff00ff"},{name:"Coral",value:"coral",hex:"#ff7f50"},{name:"Gold",value:"gold",hex:"#ffd700"},{name:"Indigo",value:"indigo",hex:"#4b0082"},{name:"Violet",value:"violet",hex:"#ee82ee"},{name:"Cyan",value:"cyan",hex:"#00ffff"},{name:"Magenta",value:"magenta",hex:"#ff00ff"}],this.cacheKey="pexels-gallery-cache",this.cacheExpiry=864e5,this.isTyping=!1,this.lastSearchQuery="",this.searchTimeout=null}connectedCallback(){super.connectedCallback(),this.loadFromCache()}getCacheData(){try{const e=localStorage.getItem(this.cacheKey);if(!e)return null;const t=JSON.parse(e),r=Date.now();return t.timestamp&&r-t.timestamp>this.cacheExpiry?(localStorage.removeItem(this.cacheKey),null):t}catch(e){return console.error("Error reading cache:",e),null}}saveToCache(){if(!this.isTyping)try{const e={images:this.images,searchQuery:this.searchQuery,selectedColor:this.selectedColor,page:this.page,hasMore:this.hasMore,timestamp:Date.now()};localStorage.setItem(this.cacheKey,JSON.stringify(e))}catch(e){console.error("Error saving to cache:",e)}}loadFromCache(){const e=this.getCacheData();e?(this.images=e.images||[],this.searchQuery=e.searchQuery||"",this.selectedColor=e.selectedColor||"",this.page=e.page||1,this.hasMore=void 0===e.hasMore||e.hasMore,console.log("Gallery state restored from cache"),this.requestUpdate(),this.updateComplete.then(()=>{this.updateSearchInput()})):this.loadRandomImages()}updateSearchInput(){const e=this.shadowRoot?.querySelector('cdtr-input[type="search"]');e&&(e.value=this.searchQuery)}async loadRandomImages(){this.loading=!0;try{const e=this.defaultSearchTerms[Math.floor(Math.random()*this.defaultSearchTerms.length)],t=await i({query:e,per_page:this.perPage});t?(this.images=t||[],this.hasMore=t&&t.length===this.perPage,this.searchQuery="",this.selectedColor="",this.page=1,this.saveToCache()):(console.error("Failed to load images from Pexels"),this.images=[])}catch(e){console.error("Error loading images:",e),this.images=[]}finally{this.loading=!1}}async searchImages(e){if(!e.trim())return this.loadRandomImages();this.loading=!0,this.searchQuery=e,this.page=1;try{const t=await i({query:e,per_page:this.perPage});t?(this.images=t||[],this.hasMore=t&&t.length===this.perPage,this.saveToCache()):(console.error("Failed to search images from Pexels"),this.images=[])}catch(e){console.error("Error searching images:",e),this.images=[]}finally{this.loading=!1}}async loadMoreImages(){if(!this.loading&&this.hasMore){this.loading=!0,this.page++;try{let e;if(this.selectedColor&&"all"!==this.selectedColor){let t=this.removeColorFilters(this.searchQuery);e=t.trim()?`${t} ${this.selectedColor}`:this.selectedColor}else{e=this.removeColorFilters(this.searchQuery)||this.defaultSearchTerms[Math.floor(Math.random()*this.defaultSearchTerms.length)]}const t=await i({query:e,per_page:this.perPage});if(t.ok){const e=(await t.json()).photos||[];this.images=[...this.images,...e],this.hasMore=e.length===this.perPage,this.saveToCache()}}catch(e){console.error("Error loading more images:",e)}finally{this.loading=!1}}}onSearch(e){const t=e.target.value;this.isTyping=!0,t!==this.lastSearchQuery&&(this.lastSearchQuery=t,this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.isTyping=!1,this.searchWithColor(t,this.selectedColor)},500))}onSelectImage(e){const t=`Photo by ${e.photographer} on Pexels`,r=`Photo by <a href="${e.photographer_url}" target="_blank" rel="noopener noreferrer">${e.photographer}</a> on <a href="${e.url}" target="_blank" rel="noopener noreferrer">Pexels</a>`,o={detail:{id:e.id,src:e.src.medium||e.src.large||e.src.original,name:`Pexels Image ${e.id}`,size:`${e.width}x${e.height}`,photographer:e.photographer,photographerUrl:e.photographer_url,pexelsUrl:e.url,alt:e.alt||`Photo by ${e.photographer} on Pexels`,attributionText:t,attributionHtml:r},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",o))}sendSelectedImages(){const e={detail:this.images.filter(e=>e.selected).map(e=>{const t=`Photo by ${e.photographer} on Pexels`,r=`Photo by <a href="${e.photographer_url}" target="_blank" rel="noopener noreferrer">${e.photographer}</a> on <a href="${e.url}" target="_blank" rel="noopener noreferrer">Pexels</a>`;return{id:e.id,src:e.src.medium||e.src.large||e.src.original,name:`Pexels Image ${e.id}`,size:`${e.width}x${e.height}`,photographer:e.photographer,photographerUrl:e.photographer_url,pexelsUrl:e.url,alt:e.alt||`Photo by ${e.photographer} on Pexels`,attributionText:t,attributionHtml:r}}),bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",e))}onScroll(e){const t=e.target;t.scrollTop+t.offsetHeight>=t.scrollHeight-50&&this.loadMoreImages()}clearCache(){localStorage.removeItem(this.cacheKey),console.log("Gallery cache cleared")}onColorChange(e){console.log("Color change event:",e);const t=e.target.value;console.log("Selected color:",t),this.selectedColor="all"===t?"":t;const r=this.searchQuery||"";this.searchWithColor(r,this.selectedColor)}searchWithColor(e,t){if(t&&"all"!==t){let r=this.removeColorFilters(e),o=r.trim()?`${r} ${t}`:t;this.searchImages(o)}else{let t=this.removeColorFilters(e);this.searchImages(t)}}removeColorFilters(e){if(!e)return"";const t=this.colorOptions.map(e=>e.value);return e.split(" ").filter(e=>{const r=e.toLowerCase().trim();return!t.includes(r)}).join(" ").trim()}getSelectedColorName(){if(!this.selectedColor)return"Filter by color";const e=this.colorOptions.find(e=>e.value===this.selectedColor);return e?e.name:"Filter by color"}getSelectedColorHex(){if(!this.selectedColor)return"#666";const e=this.colorOptions.find(e=>e.value===this.selectedColor);return e?e.hex:"#666"}render(){return o.qy`
+      <div class="gallery-container">
+        <cdtr-row alignItems="center">
+          <cdtr-input
+            type="search"
+            @input=${this.onSearch}
+            placeholder="Search images..."
+            class="search"
+          ></cdtr-input>
+
+          <div class="divider-y"></div>
+
+          <!-- Color Filter Dropdown -->
+          <div class="color-dropdown">
+            <cdtr-dropdown
+              .value=${this.selectedColor||""}
+              @change=${this.onColorChange}
+            >
+              <paper-button slot="trigger">
+                <div
+                  class="color-preview"
+                  style="background-color: ${this.getSelectedColorHex()}"
+                ></div>
+              </paper-button>
+              <div slot="content">
+                <cdtr-dropdown-item
+                  value="all"
+                  .selected=${!this.selectedColor}
+                >
+                  <div
+                    class="color-circle"
+                    style="background-color: transparent; border: 2px dashed #ccc;"
+                  ></div>
+                  <span style="margin-left: 8px; font-size: 12px;">All Colors</span>
+                </cdtr-dropdown-item>
+                ${this.colorOptions.map(e=>o.qy`
+                    <cdtr-dropdown-item
+                      value="${e.value}"
+                      .selected=${this.selectedColor===e.value}
+                    >
+                      <div
+                        class="color-circle"
+                        style="background-color: ${e.hex}"
+                      ></div>
+                      <span style="margin-left: 8px; font-size: 12px;">${e.name}</span>
+                    </cdtr-dropdown-item>
+                  `)}
+              </div>
+            </cdtr-dropdown>
+          </div>
+
+          <paper-button @click=${this.loadRandomImages} class="icon-btn">
+            <cdtr-tooltip delay="500,0" arrow=${!1} content="refresh">
+              <cdtr-refresh-icon></cdtr-refresh-icon>
+            </cdtr-tooltip>
+          </paper-button>
+        </cdtr-row>
+
+        <cdtr-row mt="2" alignItems="center" justify="space-between">
+          <div class="pexels-header-credit">
+            <div class="status-indicator">
+              <div class="connected-dot"></div>
+            </div>
+            <div class="credit-content">
+              <span class="credit-text">Powered by </span>
+              <a
+                href="https://www.pexels.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="pexels-header-link"
+              >
+                Pexels
+              </a>
+            </div>
+          </div>
+        </cdtr-row>
+
+        <cdtr-row mt="2" justify="space-between">
+          <cdtr-col sm="12">
+            <cdtr-row
+              @scroll=${this.onScroll}
+              class="scroll-body"
+              justify="space-evenly"
+            >
+              ${this.loading&&0===this.images.length?o.qy`<cdtr-col sm="12">
+                    <cdtr-row justify="center">
+                      <cdtr-spinner></cdtr-spinner>
+                      <lang-text text="loading"></lang-text>
+                    </cdtr-row>
+                  </cdtr-col>`:(0,a.u)(this.images||[],e=>e.id,(e,t)=>o.qy`<cdtr-col class="file-col" sm="3">
+                        <cdtr-editor-media-card
+                          @dblclick=${()=>this.onSelectImage(e)}
+                          @click=${t=>{t.shiftKey&&this.multi||this.images.forEach(e=>e.selected=!1),e.selected=!e.selected,this.images=[...this.images],this.isTyping||this.saveToCache()}}
+                          .selected=${e.selected}
+                          .controls=${!1}
+                          src=${e.src.medium||e.src.large||e.src.original}
+                          name=${`Photo by ${e.photographer}`}
+                          subTitle=${`${e.width}x${e.height}`}
+                        >
+                          <div slot="footer" class="pexels-credit">
+                            <a
+                              href="${e.photographer_url}"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              class="photographer-link"
+                            >
+                              ${e.photographer}
+                            </a>
+                            <span class="credit-text"> on </span>
+                            <a
+                              href="${e.url}"
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              class="pexels-link"
+                            >
+                              Pexels
+                            </a>
+                          </div>
+                        </cdtr-editor-media-card>
+                      </cdtr-col>`)}
+              ${this.loading&&this.images.length>0?o.qy`<cdtr-col sm="12">
+                    <cdtr-row justify="center">
+                      <cdtr-spinner></cdtr-spinner>
+                      <lang-text text="loadingMore"></lang-text>
+                    </cdtr-row>
+                  </cdtr-col>`:null}
+            </cdtr-row>
+          </cdtr-col>
+        </cdtr-row>
+
+        <cdtr-row alignItems="center" justify="flex-start" class="footer">
+          <paper-button @click=${this.sendSelectedImages} class="add-btn">
+            <lang-text text="choose"></lang-text>
+          </paper-button>
+        </cdtr-row>
+      </div>
+    `}}c.styles=[s.T,o.AH`
+      :host {
+        --alpha: rgba(0, 123, 255, 0.1);
+        --primary: #007bff;
+      }
+
+      .color-dropdown {
+        display: inline-block;
+      }
+
+      .color-preview {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid white;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+        display: inline-block;
+      }
+
+      .color-circle {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid white;
+        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+        display: inline-block;
+      }
+
+      .clear-color {
+        color: #666;
+        font-style: italic;
+      }
+      .pexels-credit {
+        position: absolute;
+        bottom: 5px;
+        left: 5px;
+        right: 5px;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 10px;
+        text-align: center;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+
+      .file-col:hover .pexels-credit {
+        opacity: 1;
+      }
+
+      .photographer-link,
+      .pexels-link {
+        color: #fff;
+        text-decoration: none;
+        font-weight: 500;
+      }
+
+      .photographer-link:hover,
+      .pexels-link:hover {
+        text-decoration: underline;
+      }
+
+      .credit-text {
+        color: rgba(255, 255, 255, 0.8);
+      }
+
+      .pexels-header-credit {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(10px);
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-radius: 12px;
+        padding: 6px 12px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        transition: all 0.2s ease;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.3px;
+      }
+
+      .pexels-header-credit:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+        border-color: rgba(0, 0, 0, 0.12);
+      }
+
+      .status-indicator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .connected-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #10b981;
+        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+        animation: pulse-green 2s infinite;
+      }
+
+      @keyframes pulse-green {
+        0%,
+        100% {
+          box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
+          transform: scale(1);
+        }
+        50% {
+          box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
+          transform: scale(1.1);
+        }
+      }
+
+      .credit-content {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .credit-text {
+        color: #6b7280;
+        font-weight: 400;
+      }
+
+      .pexels-header-link {
+        color: #3b82f6;
+        text-decoration: none;
+        font-weight: 600;
+        transition: color 0.2s ease;
+      }
+
+      .pexels-header-link:hover {
+        color: #2563eb;
+      }
+    `],c.properties={images:{type:Array},loading:{type:Boolean},searchQuery:{type:String},page:{type:Number},hasMore:{type:Boolean},multi:{type:Boolean},selectedColor:{type:String}},customElements.define("cdtr-pexels-gallery",c)}}]);

package/dist/7759.creaditor.bundle.js

@@ -0,0 +1,25 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7759],{97759(t,i,e){e.r(i),e.d(i,{VideoIcon:()=>s});var h=e(59929);class s extends h.WF{constructor(){super(),this.iconStyle="",this.width="24",this.height="24"}render(){return h.qy`
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        style="${this.iconStyle}"
+        width="${this.width}"
+        height="${this.height}"
+      >
+        <path fill="none" d="M0 0H24V24H0z" />
+        <path
+          d="M16 4c.552 0 1 .448 1 1v4.2l5.213-3.65c.226-.158.538-.103.697.124.058.084.09.184.09.286v12.08c0 .276-.224.5-.5.5-.103 0-.203-.032-.287-.09L17 14.8V19c0 .552-.448 1-1 1H2c-.552 0-1-.448-1-1V5c0-.552.448-1 1-1h14zm-1 2H3v12h12V6zM8 8h2v3h3v2H9.999L10 16H8l-.001-3H5v-2h3V8zm13 .841l-4 2.8v.718l4 2.8V8.84z"
+        />
+      </svg>
+    `}}s.styles=h.AH`
+    :host {
+      display: inherit;
+      --cdtr-icon-width: 20px;
+      --cdtr-icon-height: 20px;
+    }
+    svg {
+      width: var(--cdtr-icon-width);
+      height: var(--cdtr-icon-height);
+      color: var(--cdtr-icon-color);
+    }
+  `,s.properties={iconStyle:{type:String},width:{type:String},height:{type:String}},customElements.define("cdtr-video-icon",s)}}]);

package/dist/7838.creaditor.bundle.js

@@ -0,0 +1,20 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7838],{67838(t,e,i){i.r(e),i.d(e,{FilterIcon:()=>s});var r=i(59929);class s extends r.WF{constructor(){super(),this.iconStyle="",this.width="24",this.height="24"}render(){return r.qy`<svg
+      style="${this.iconStyle}"
+      width="${this.width}"
+      height="${this.height}"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      viewBox="0 0 24 24"
+      ariaLabelledby="filterIconTitle"
+      stroke="black"
+      strokeWidth="1"
+      strokeLinecap="square"
+      strokeLinejoin="round"
+      fill="none"
+      color="black"
+    >
+      <title id="filterIconTitle">Filter</title>
+      <path d="M10 12.261L4.028 3.972h16L14 12.329V17l-4 3z"></path>
+    </svg>`}}s.styles=r.AH`
+  
+  `,s.properties={iconStyle:{type:String},width:{type:String},height:{type:String}},customElements.define("cdtr-filter-icon",s)}}]);

package/dist/7937.creaditor.bundle.js

@@ -0,0 +1,130 @@
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[7937],{67937(t,e,i){i.r(e),i.d(e,{EditorTabItem:()=>o});var n=i(59929);class o extends n.WF{constructor(){super()}firstUpdated(){super.firstUpdated()}focus(){const t=this.shadowRoot.querySelector("paper-button");t?t.focus():super.focus()}onClickItem(t){this.value=t;const e=new UIEvent("change",{view:window,bubbles:!0,cancelable:!0});this.dispatchEvent(e)}handleKeyDown(t){if(console.log("Key pressed:",t.key,"on icon:",this.icon),"Enter"===t.key||" "===t.key)return t.preventDefault(),t.stopPropagation(),void this.onClickItem(this.icon);if("ArrowUp"===t.key||"ArrowDown"===t.key||"ArrowLeft"===t.key||"ArrowRight"===t.key){t.preventDefault(),t.stopPropagation(),console.log("Dispatching arrow navigation event for:",t.key,"current icon:",this.icon);const e=new CustomEvent("arrow-navigation",{detail:{key:t.key,currentIcon:this.icon},bubbles:!0,cancelable:!0});this.dispatchEvent(e)}}factory(){let t=this.selected?"fill: var(--primary);":"";switch(this.icon){case"box-shadow":return i.e(1456).then(i.bind(i,11456)),n.qy`<cdtr-box-shadow-icon
+          iconStyle=${t}
+        ></cdtr-box-shadow-icon>`;case"design":return i.e(9162).then(i.bind(i,59162)),n.qy`<cdtr-design-icon iconStyle=${t}></cdtr-design-icon>`;case"text":case"typography":return i.e(9089).then(i.bind(i,59089)),n.qy`<cdtr-text-icon iconStyle=${t}></cdtr-text-icon>`;case"animations":return i.e(9184).then(i.bind(i,29184)),n.qy`<cdtr-animation-icon
+          iconStyle=${t}
+        ></cdtr-animation-icon>`;case"settings":return i.e(4114).then(i.bind(i,84114)),n.qy`<cdtr-setting-icon
+          iconStyle=${t}
+        ></cdtr-setting-icon>`;case"qr":return n.qy`<img style="width: 20px; height: 20px;" alt="qr" width="20" height="20" src="https://img.creaditor.ai/images/qr?link=https%3A%2F%2Fexample.com&size=20" />`;case"link":return i.e(5428).then(i.bind(i,85428)),n.qy`<cdtr-link-icon iconStyle=${t}></cdtr-link-icon>`;case"spacing":return i.e(365).then(i.bind(i,50365)),n.qy`<cdtr-spacing-icon
+          iconStyle=${t}
+        ></cdtr-spacing-icon>`;case"background":case"image":case"giphy":return i.e(1452).then(i.bind(i,61452)),n.qy`<cdtr-background-icon
+          iconStyle=${t}
+        ></cdtr-background-icon>`;case"video":return i.e(7759).then(i.bind(i,97759)),n.qy`<cdtr-video-icon iconStyle=${t}></cdtr-video-icon>`;case"list-check":return i.e(6459).then(i.bind(i,16459)),n.qy`<cdtr-list-check-icon
+          iconStyle=${t}
+        ></cdtr-list-check-icon>`;case"time":return i.e(307).then(i.bind(i,307)),n.qy`<cdtr-time-icon iconStyle=${t}></cdtr-time-icon>`;case"icons":return n.qy`<cdtr-icon icon="emoji"></cdtr-icon>`;case"list-settings":return i.e(8676).then(i.bind(i,48676)),n.qy`<cdtr-list-settings-icon
+          iconStyle=${t}
+        ></cdtr-list-settings-icon>`;case"automations":return i.e(8305).then(i.bind(i,58305)),n.qy`<cdtr-automation-icon
+          iconStyle=${t}
+        ></cdtr-automation-icon>`;case"ai":return n.qy`<svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlnsXlink="http://www.w3.org/1999/xlink"
+          width="20"
+          zoomAndPan="magnify"
+          viewBox="0 0 20.25 20.999999"
+          height="28"
+          preserveAspectRatio="xMidYMid meet"
+          version="1.0"
+        >
+          <defs>
+            <clippath id="84a0f9f97b">
+              <path
+                d="M 0 0.375 L 19.527344 0.375 L 19.527344 19.902344 L 0 19.902344 Z M 0 0.375 "
+                clip-rule="nonzero"
+              ></path>
+            </clippath>
+          </defs>
+          <g clip-path="url(#84a0f9f97b)">
+            <path
+              fill="#9747ff"
+              d="M 12.316406 0.679688 C 12.160156 0.382812 11.734375 0.382812 11.574219 0.679688 L 11.132812 1.507812 C 11.09375 1.582031 11.035156 1.640625 10.960938 1.679688 L 10.128906 2.117188 C 9.828125 2.277344 9.828125 2.699219 10.128906 2.855469 L 10.960938 3.296875 C 11.035156 3.335938 11.09375 3.394531 11.132812 3.46875 L 11.574219 4.296875 C 11.734375 4.59375 12.160156 4.59375 12.316406 4.296875 L 12.757812 3.46875 C 12.800781 3.394531 12.859375 3.335938 12.933594 3.296875 L 13.765625 2.855469 C 14.0625 2.699219 14.0625 2.277344 13.765625 2.117188 L 12.933594 1.679688 C 12.859375 1.640625 12.800781 1.582031 12.757812 1.507812 Z M 15.167969 16.96875 L 16.875 17.617188 L 16.226562 15.917969 Z M 16.882812 13.496094 L 5.136719 1.816406 C 4.15625 0.839844 2.558594 0.839844 1.574219 1.816406 L 0.984375 2.40625 C 0 3.382812 0 4.96875 0.984375 5.949219 L 12.730469 17.625 C 12.929688 17.824219 13.273438 18.039062 13.542969 18.140625 L 17.152344 19.507812 C 18.167969 19.890625 19.164062 18.902344 18.777344 17.890625 L 17.402344 14.300781 C 17.300781 14.035156 17.085938 13.695312 16.882812 13.496094 Z M 15.316406 14.296875 L 5.730469 4.769531 L 3.953125 6.535156 L 13.535156 16.066406 Z M 3.949219 3 L 4.542969 3.585938 L 2.765625 5.355469 L 2.171875 4.765625 C 1.84375 4.441406 1.84375 3.910156 2.171875 3.585938 L 2.761719 3 C 3.089844 2.671875 3.621094 2.671875 3.949219 3 Z M 4.550781 12.996094 C 4.390625 12.699219 3.964844 12.699219 3.808594 12.996094 L 3 14.503906 C 2.960938 14.578125 2.902344 14.640625 2.828125 14.679688 L 1.308594 15.480469 C 1.011719 15.636719 1.011719 16.058594 1.308594 16.214844 L 2.828125 17.015625 C 2.902344 17.054688 2.960938 17.117188 3 17.191406 L 3.808594 18.699219 C 3.964844 18.996094 4.390625 18.996094 4.550781 18.699219 L 5.355469 17.191406 C 5.394531 17.117188 5.453125 17.054688 5.527344 17.015625 L 7.046875 16.214844 C 7.34375 16.058594 7.34375 15.636719 7.046875 15.480469 L 5.527344 14.679688 C 5.453125 14.640625 5.394531 14.578125 5.355469 14.503906 Z M 17.355469 5.480469 C 17.199219 5.183594 16.773438 5.183594 16.613281 5.480469 L 16.027344 6.582031 C 15.988281 6.65625 15.929688 6.714844 15.855469 6.753906 L 14.746094 7.335938 C 14.449219 7.496094 14.449219 7.917969 14.746094 8.074219 L 15.855469 8.660156 C 15.929688 8.699219 15.988281 8.757812 16.027344 8.832031 L 16.613281 9.933594 C 16.773438 10.230469 17.199219 10.230469 17.355469 9.933594 L 17.945312 8.832031 C 17.984375 8.757812 18.042969 8.699219 18.117188 8.660156 L 19.226562 8.074219 C 19.523438 7.917969 19.523438 7.496094 19.226562 7.335938 L 18.117188 6.753906 C 18.042969 6.714844 17.984375 6.65625 17.945312 6.582031 Z M 17.355469 5.480469 "
+              fill-opacity="1"
+              fill-rule="evenodd"
+            ></path>
+          </g>
+        </svg>`;default:return null}}render(){return n.qy`
+      <paper-button
+        data-icon="${this.icon}"
+        tabindex="0"
+        @keydown=${t=>this.handleKeyDown(t)}
+        @click=${()=>this.onClickItem(this.icon)}
+        style="outline: none;"
+        ><cdtr-row style="position:relative;min-height:40px;" justify="center">
+          <cdtr-col sm="12">
+            <div
+              class="${this.selected?"tab-item selected":"tab-item"}"
+            ></div>
+            <cdtr-row justify="center"
+              ><span style="transform:translateY(50%)" class="factory-item"
+                >${this.factory()}</span
+              >
+            </cdtr-row>
+          </cdtr-col>
+          <cdtr-col style="margin-top: 7px;" sm="12">
+            <cdtr-title
+              style="${this.selected?"color:var(--primary)":""}"
+              ><lang-text
+                style="font-size:10px;"
+                class="label-item"
+                text="${this.icon}"
+              ></lang-text
+            ></cdtr-title>
+          </cdtr-col> </cdtr-row
+      ></paper-button>
+    `}}o.styles=n.AH`
+    :host {
+      display: flex;
+      margin-bottom: 10px;
+    }
+    paper-button {
+      min-width: 0;
+      margin: 0;
+      width: 100%;
+      padding: 0;
+      height: 50px;
+    }
+    .factory-item {
+      transition: transform 0.5s ease-in-out;
+    }
+
+    .tab-item {
+      padding: 5px 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      opacity: 0.1;
+      width: 100%;
+      height: 40px;
+      transform: translate(-50%, -50%);
+    }
+    .tab-selected:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1px;
+      transform: translateX(-1px);
+      height: 100%;
+      background: #fff;
+      opacity: 1;
+      z-index: 1;
+    }
+    .label-item {
+      transform: translateY(-50%);
+    }
+   
+    .tab-item:hover {
+      background: #9a9a9a;
+    }
+    .selected {
+      background: var(--primary) !important;
+      border-top: 1px solid black;
+      border-bottom: 1px solid black;
+    }
+
+    cdtr-title {
+      text-align: center;
+      display: block;
+      margin: auto;
+      width: 100%;
+    }
+ 
+  `,o.properties={icon:{},labelMode:{},selected:{}},customElements.define("cdtr-editor-tab-item",o)}}]);