npm - @antscorp/antsomi-ui - Versions diffs - 1.3.5-common.1 → 1.3.5-common.3 - Mend

@antscorp/antsomi-ui 1.3.5-common.1 → 1.3.5-common.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/723.index.js +1 -1
package/dist/index.js +1 -1
package/dist/index.js.LICENSE.txt +0 -33
package/es/components/molecules/EditorTab/EditorTab.d.ts +2 -6
package/es/components/molecules/EditorTab/EditorTab.js +10 -17
package/es/components/molecules/EditorTab/styled.js +10 -0
package/es/components/organism/LeftMenu/hooks/useLeftMenu.js +4 -4
package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js +10 -2
package/es/constants/theme.js +3 -3
package/package.json +1 -1

package/dist/723.index.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";(self.webpackChunk_antscorp_antsomi_ui=self.webpackChunk_antscorp_antsomi_ui\|\|[]).push([[723],{12723:(e,n,t)=>{t.r(n),t.d(n,{TemplateListing:()=>gn});var i,r,o,a,l,s=t(39155),c=t.n(s),d=t(2543),p=t(85851),m=t.n(p),u=t(72830),h=t(30115),g=t.n(h),b=t(30496),f=t(43350);function v(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const{Text:y}=f.A,w=b.Ay.div(i\|\|(i=v(["\n position: relative;\n flex-shrink: 0;\n width: ",";\n overflow: auto;\n overflow-x: hidden;\n border-right: 1px solid rgba(5, 5, 5, 0.06);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n .category__listing {\n position: relative;\n height: 100%;\n overflow-y: auto;\n\n .antsomi-menu,\n .ant-menu {\n [role='menu'] {\n background-color: white !important;\n }\n\n [role='menuitem'] {\n width: 100%;\n border-radius: 0;\n height: 30px;\n padding: 0 10px !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n\n .antsomi-menu-title-content,\n .ant-menu-title-content {\n height: 100%;\n }\n }\n\n .antsomi-menu-submenu-title,\n .ant-menu-submenu-title {\n height: 30px !important;\n }\n\n .antsomi-menu-submenu-title {\n margin-top: 10px;\n margin-bottom: 10px;\n }\n }\n\n .category-loading {\n height: 100%;\n }\n\n .empty-wrapper {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n }\n"])),(e=>{let{$width:n}=e;return void 0!==n?"".concat(n,"px"):"auto"})),x=b.Ay.div(r\|\|(r=v(["\n display: flex;\n justify-content: space-between;\n height: 100%;\n align-items: center;\n\n .label {\n flex: 1 1 0%;\n display: flex;\n gap: 9px;\n overflow: auto;\n\n .antsomi-checkbox-wrapper {\n width: 100%;\n display: flex;\n align-items: center;\n\n .antsomi-checkbox-wrapper {\n flex-shrink: 0;\n }\n\n span:nth-child(2) {\n flex: 1 1 0%;\n overflow: auto;\n }\n }\n }\n\n .total {\n flex-shrink: 0;\n font-size: 13px;\n font-weight: 400;\n color: ",";\n line-height: 1 !important;\n font-size: 11px;\n height: fit-content;\n }\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.bw8),O=b.Ay.div(o\|\|(o=v(["\n font-size: 13px !important;\n font-weight: 400;\n /* color: ","; /\n height: 100%;\n display: flex;\n align-items: center;\n padding-right: 20px;\n"])),null===(l=null===u.C\|\|void 0===u.C?void 0:u.C.token)\|\|void 0===l?void 0:l.bw8),E=(0,b.Ay)(y)(a\|\|(a=v(["\n max-width: 100%;\n color: inherit !important;\n height: fit-content;\n font-size: inherit !important;\n"])));var j,k,N,C,P,A=t(91196),T=t(7450),z=t(28086),S=t(5668),_=t(69099),I=t(86336);function M(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const R=(0,b.Ay)(I.A)(j\|\|(j=M(["\n width: 100%;\n height: 100%;\n\n .antsomi-typography {\n color: ",";\n }\n"])),null===(N=u.C.token)\|\|void 0===N?void 0:N.bw8);R.defaultProps={vertical:!0,align:"center",justify:"center",gap:15};const $=b.Ay.div(k\|\|(k=M(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 60px;\n height: 60px;\n border-radius: 100%;\n background-color: ",";\n\n i {\n font-size: 24px;\n color: ",";\n }\n"])),null===(C=u.C.token)\|\|void 0===C?void 0:C.bw2,null===(P=u.C.token)\|\|void 0===P?void 0:P.bw6),{Text:B}=f.A,L=e=>{const{icon:n=c().createElement(_.I,{type:"icon-ants-media"}),description:t="No data"}=e;return c().createElement(R,null,c().createElement($,{className:"animate__animated animate__tada"},(0,d.isString)(n)?c().createElement(_.I,{type:n}):n),c().createElement(B,{className:"animate__animated animate__fadeInUp"},t))};var D=t(29743);const W=220,H=30,Q=400,V={removable:!0},F={show:!1},K={width:W,show:!0,checkedCategories:{},onMenuChange:()=>{}},U={templateItemProps:V,blankTemplateProps:F},Z={description:"No data"},q={items:[]};var J=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const G="src/components/template/TemplateListing/components/CategoryListing/index.tsx",X=(0,s.memo)((e=>{var n;const{width:t=W,items:i=[],loading:r=!1,show:o=!0,checkedCategories:a={},emptyProps:l,debounceChangeMenu:p=Q,header:h,footer:b,onMenuChange:f}=e,v=J(e,["width","items","loading","show","checkedCategories","emptyProps","debounceChangeMenu","header","footer","onMenuChange"]),[y,j]=(0,s.useState)({});(0,s.useEffect)((()=>{j((e=>g()(e,a)?e:a))}),[a]);const k=(0,s.useRef)(null),N=(0,s.useCallback)((e=>{var n;try{const{key:t,parentId:i,label:r,total:o}=e,a=!(!i\|\|!(null===(n=null==y?void 0:y[i])\|\|void 0===n?void 0:n.includes(t)));return c().createElement(x,{onClick:e=>e.preventDefault()},c().createElement("div",{className:"label"},c().createElement(A.A,{checked:a},c().createElement(E,{ellipsis:{tooltip:r}},r))),c().createElement("span",{className:"total"},(0,d.isNumber)(o)?o:""))}catch(n){return(0,D.H)(n,{path:G,name:"renderCustomLabel()",args:e}),null}}),[y]),C=(0,s.useCallback)(((e,n)=>{try{const{key:t,label:i,children:r}=e;return Object.assign(Object.assign(Object.assign({},e),n?{label:c().createElement(O,null,c().createElement(E,{ellipsis:{tooltip:i}},i))}:{}),{children:r&&!(0,d.isEmpty)(r)?null==r?void 0:r.map((e=>{const n=Object.assign(Object.assign({},e),{parentId:t});return C(Object.assign(Object.assign({},n),{label:N(n)}))})):void 0})}catch(t){return void(0,D.H)(t,{path:G,name:"getItem()",args:{item:e,isRoot:n}})}}),[N]),P=(0,s.useMemo)((()=>{const e=[];return null==i\|\|i.forEach(((n,t)=>{const i=C(Object.assign(Object.assign({},n),{parentId:null}),!0);i&&e.push(i)})),e}),[C,i]);return o&&!(0,d.isEmpty)(P)\|\|h\|\|r?c().createElement(w,{$width:t},h,c().createElement(T.u,{className:"category__listing"},c().createElement(z.t,{spinning:r,wrapperClassName:"template-listing__loading"},(0,d.isEmpty)(P)&&!r?c().createElement("div",{className:"empty-wrapper"},c().createElement(L,Object.assign({},l))):c().createElement(S.A,Object.assign({selectedKeys:[],items:P,inlineIndent:0,mode:"inline",defaultOpenKeys:null==i?void 0:i.map((e=>String(e.key))),expandIcon:c().createElement(m(),{type:"icon-ants-expand-more",style:{fontSize:20,color:null===(n=null===u.C\|\|void 0===u.C?void 0:u.C.token)\|\|void 0===n?void 0:n.bw8}}),onClick:e=>{var n;try{const{key:t,keyPath:i}=e,r=null==i?void 0:i[1];if(r){const e=(null===(n=null==y?void 0:y[r])\|\|void 0===n?void 0:n.includes(t))?Object.assign(Object.assign({},y),{[r]:y[r].filter((e=>e!==t))}):Object.assign(Object.assign({},y),{[r]:[...(null==y?void 0:y[r])\|\|[],t]});k&&(j(e),clearTimeout(k.current)),k.current=setTimeout((()=>{null==f\|\|f(e)}),p)}}catch(n){(0,D.H)(n,{path:G,name:"handleClickMenu()",args:{e}})}}},v)),b))):null}));X.displayName="CategoryListing";var Y,ee=t(41864);const ne=(0,b.Ay)(I.A)(Y\|\|(te=["\n box-sizing: border-box;\n border: 1px solid #b8cfe6;\n border-radius: 5px;\n cursor: pointer;\n\n .add-blank-btn {\n width: 50px !important;\n height: 50px !important;\n border-radius: 999px;\n background-color: #005eb80d !important;\n\n .antsomi-btn-icon {\n margin-top: 3px;\n }\n }\n\n .description {\n font-weight: 700;\n max-width: 90%;\n }\n"],ie\|\|(ie=te.slice(0)),Y=Object.freeze(Object.defineProperties(te,{raw:{value:Object.freeze(ie)}}))));var te,ie,re=t(64904);const oe=(0,s.memo)((e=>{const{width:n=re.TQ,height:t=re.Q,show:i,description:r="Blank Template",blankTemplateRender:o,onClick:a}=e,l=c().createElement(ne,{style:{width:n,height:t},align:"center",justify:"center",onClick:a},c().createElement(I.A,{align:"center",justify:"center",gap:10,vertical:!0,style:{width:"100%"}},c().createElement(ee.$,{type:"text",className:"add-blank-btn",icon:c().createElement(m(),{type:"icon-ants-plus-slim",style:{fontSize:24}})}),c().createElement("div",{className:"description"},c().createElement(f.A.Text,{ellipsis:{tooltip:r},style:{maxWidth:"100%",color:"inherit"}},r))));return i?o?c().createElement(c().Fragment,null,o(l)):l:null}));oe.displayName="BlankTemplate";var ae,le,se,ce,de=t(18470),pe=t(46942),me=t.n(pe),ue=t(85677);function he(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const ge=b.Ay.div(ae\|\|(ae=he(["\n width: 100%;\n overflow-y: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ",";\n border-radius: ","px;\n border: 1px solid ",";\n height: ","px;\n\n // Calculate scale of mobile frame\n #banner-mobile {\n ","\n }\n\n / "," /\n\n .mobile-wrapper {\n position: relative;\n border-radius: 80px;\n animation-duration: 0.2s !important;\n\n .content-wrapper {\n width: fit-content;\n height: fit-content;\n }\n\n .skeleton,\n .backdrop {\n left: 5px;\n }\n }\n\n .desktop-wrapper {\n position: relative;\n height: 100%;\n width: 100%;\n border-radius: ","px;\n transition: width 0.2s ease, height 0.2s ease;\n .content-wrapper {\n width: 100%;\n height: 100%;\n }\n }\n\n .content-wrapper {\n position: absolute;\n z-index: 12;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .skeleton {\n width: 100%;\n height: 100%;\n background: center / cover no-repeat url(",");\n border-radius: inherit;\n }\n\n .backdrop {\n border-radius: inherit;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 0.5;\n z-index: 10;\n top: 0;\n left: 0;\n }\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.colorBgSkeleton,null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius,null===u.N\|\|void 0===u.N?void 0:u.N.blue1_1,(e=>e.$height\|\|700),(e=>{const n=((e.$height\|\|700)-10)/722.41;return(0,b.AH)(le\|\|(le=he(["\n transform: scale(",");\n "])),n)}),(e=>e.$height?(0,b.AH)(se\|\|(se=he(["\n height: ","px;\n\n .mobile-wrapper {\n width: 359px;\n height: ","px;\n }\n "])),e.$height,e.$height):(0,b.AH)(ce\|\|(ce=he(["\n @media screen and (max-height: 1000px) {\n height: 760px;\n max-height: 760px;\n\n .mobile-wrapper {\n width: 359px;\n height: 722.41px;\n }\n }\n\n @media screen and (min-height: 1001px) {\n height: 830px;\n max-height: 830px;\n\n .mobile-wrapper {\n width: 380px;\n height: 800px;\n }\n }\n "])))),5,ue.A);var be=t(91012);const fe={DESKTOP:{value:"desktop",label:"Desktop",icon:"icon-ants-laptop"},MOBILE:{value:"mobile",label:"Mobile",icon:"icon-ants-smart-phone"}};var ve=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const ye=(0,s.memo)((e=>{const{deviceType:n,showSkeleton:t=!1,children:i,height:r}=e,o=ve(e,["deviceType","showSkeleton","children","height"]),a=(0,s.useMemo)((()=>n===fe.MOBILE.value),[n]),[l,d]=(0,s.useState)(!1);return(0,s.useEffect)((()=>{d(!0);const e=setTimeout((()=>{d(!1)}),1e3);return()=>clearTimeout(e)}),[i]),c().createElement(ge,Object.assign({$height:r},o),c().createElement("div",{className:"".concat(a?"mobile-wrapper animate__animated animate__zoomIn":"desktop-wrapper")},c().createElement("div",{className:me()({"content-wrapper":!0,"animate__animated animate__fadeIn":l})},a?c().createElement(be.E,{id:"banner-mobile"},i\|\|null):i\|\|null),t&&c().createElement(c().Fragment,null,c().createElement("div",{className:"skeleton"}))))}));var we,xe,Oe,Ee=t(63325),je=t(67848);function ke(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const Ne=b.Ay.div(we\|\|(we=ke(["\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n\n .swiper {\n max-width: 1030px;\n\n .swiper-slide {\n width: fit-content !important;\n }\n }\n\n .thumbnail-animation {\n box-shadow: none;\n transition: box-shadow 0.1s ease-in-out;\n border-radius: ","px;\n\n > div {\n border-radius: ","px;\n }\n\n &:hover {\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);\n }\n }\n\n .custom-button-prev,\n .custom-button-next {\n z-index: 10;\n position: absolute;\n width: 24px;\n height: 24px;\n background-color: #ffffff;\n box-shadow: 0px 3px 3px 0px #002e591a;\n border-radius: 999px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n / Remove default style of Antd button /\n border-color: white !important;\n\n &.antsomi-btn-default:not(:disabled):hover {\n border-color: white !important;\n background-color: #ffffff !important;\n }\n }\n\n .custom-button-prev {\n left: 0px;\n transform: rotate(90deg);\n }\n\n .custom-button-next {\n right: 0px;\n transform: rotate(-90deg);\n }\n\n .hidden {\n display: none !important;\n }\n\n i {\n font-size: 20px;\n color: ",";\n }\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius,null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius,null===(Oe=null===u.C\|\|void 0===u.C?void 0:u.C.token)\|\|void 0===Oe?void 0:Oe.bw8),Ce=(0,b.Ay)(Ee.qr)(xe\|\|(xe=ke(["\n list-style: none;\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n"]))),Pe=180,Ae=126,Te=330,ze=230,Se={show:!1,similarTemplates:[]},_e={thumbnails:[]};var Ie=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const Me=(0,s.memo)((e=>{const{thumbnails:n,width:t=Pe,height:i=Ae,onClickThumbnail:r}=e,o=Ie(e,["thumbnails","width","height","onClickThumbnail"]),[a,l]=(0,s.useState)(!0),[p,u]=(0,s.useState)(!1),h=(0,s.useRef)(null),g=(0,s.useRef)(null),b=(0,s.useMemo)((()=>t+20+24),[t]),f=(0,s.useMemo)((()=>((null==n?void 0:n.length)\|\|0)b>990),[null==n?void 0:n.length,b]),v=(0,s.useMemo)((()=>(new Date).getTime()),[]),y=e=>{const{thumbnail:n,index:a}=e,{id:l,url:s}=n;return c().createElement(I.A,{gap:10},!!a&&c().createElement(I.A,{align:"center"},c().createElement(m(),{type:"icon-ants-expand-more",style:{fontSize:24,transform:"rotate(270deg)"}})),c().createElement(de.Z,Object.assign({key:l,id:l,width:t,height:i,thumbnail:s,thumbnailCacheValue:v,style:{flexShrink:0},className:"thumbnail-animation",actionAvailable:!1,onClickWrapper:()=>null==r?void 0:r(n)},o)))};return n&&!(0,d.isEmpty)(n)?c().createElement(Ne,null,f?c().createElement(c().Fragment,null,c().createElement(Ee.RC,{slidesPerView:Math.floor(990/b),spaceBetween:10,modules:[je.Vx,je.Jq,je.WO],navigation:{prevEl:h.current,nextEl:g.current},onBeforeInit:e=>{setTimeout((()=>{e.params.navigation&&"boolean"!=typeof e.params.navigation&&(e.params.navigation.prevEl=h.current,e.params.navigation.nextEl=g.current,e.navigation.destroy(),e.navigation.init(),e.navigation.update())}))},onSlideChange:e=>{let{isBeginning:n,isEnd:t}=e;l(n),u(t)}},n.map(((e,n)=>c().createElement(Ce,{key:"slide-".concat(e.id)},y({thumbnail:e,index:n}))))),c().createElement(ee.$,{ref:h,className:me()({"custom-button-prev":!0,hidden:a})},c().createElement(m(),{type:"icon-ants-expand-more"})),c().createElement(ee.$,{ref:g,className:me()({"custom-button-next":!0,hidden:p})},c().createElement(m(),{type:"icon-ants-expand-more"}))):c().createElement(I.A,{gap:10,style:{width:"fit-content"}},null==n?void 0:n.map(((e,n)=>c().createElement(c().Fragment,{key:e.id},y({thumbnail:e,index:n})))))):null}));var Re,$e,Be;function Le(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const De=(0,b.Ay)(I.A)(Re\|\|(Re=Le(["\n width: 300px;\n flex-shrink: 0;\n font-size: 12px;\n height: 100%;\n max-height: 100%;\n\n .title {\n font-size: 16px;\n font-weight: 700;\n max-width: 100%;\n color: inherit;\n padding-right: 25px;\n word-break: break-word;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n }\n\n .antsomi-radio-group {\n width: 100%;\n display: flex;\n\n .antsomi-radio-button-wrapper {\n flex: 1 1 0%;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 30px;\n\n i {\n height: fit-content;\n font-size: 24px;\n }\n }\n }\n\n .content-information {\n flex: 1 1 0%;\n height: fit-content;\n overflow-y: auto;\n max-height: 682px;\n }\n"]))),We=(0,b.Ay)(ee.$)($e\|\|($e=Le(["\n color: "," !important;\n\n ","\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.colorText,(e=>e.$active&&(0,b.AH)(Be\|\|(Be=Le(["\n color: "," !important;\n background-color: "," !important;\n "])),null===u.N\|\|void 0===u.N?void 0:u.N.colorPrimary,null===u.N\|\|void 0===u.N?void 0:u.N.blue1_1))),He=(0,s.memo)((e=>{var n;const{deviceType:t,itemName:i="Template name",buttonText:r="Use template",description:o,categoryListing:a,showDeviceRadios:l=!0,onButtonClick:s,onDeviceTypeChange:d}=e;return c().createElement(De,{gap:20,vertical:!0},c().createElement("div",{style:{flexShrink:0},className:"title"},i),c().createElement(I.A,{gap:15,vertical:!0,className:"content-information"},o&&c().createElement("div",{style:{color:null===(n=u.C.token)\|\|void 0===n?void 0:n.bw8}},o),null==a?void 0:a.map((e=>{let{key:n,label:t,children:i}=e;var r;return c().createElement("div",{key:n},c().createElement("div",{style:{color:null===(r=u.C.token)\|\|void 0===r?void 0:r.bw8}},t,":"),c().createElement("div",{style:{fontWeight:"bold"}},null==i?void 0:i.map((e=>{let{label:n}=e;return n})).join(", ")))}))),c().createElement(I.A,{gap:20,style:{flexShrink:0},vertical:!0},l&&c().createElement(I.A,{align:"center",gap:1},Object.values(fe).map((e=>{let{value:n,label:i,icon:r}=e;return c().createElement(We,{key:n,icon:c().createElement(m(),{type:r}),block:!0,$active:t===n,onClick:()=>d(n),type:"text"},i)}))),c().createElement(ee.$,{type:"primary",style:{width:"100%",flexShrink:0},onClick:s},c().createElement(f.A.Text,{ellipsis:{tooltip:r},style:{maxWidth:"100%",color:"inherit"}},r))))}));var Qe,Ve;function Fe(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const Ke=(0,b.Ay)(I.A)(Qe\|\|(Qe=Fe(["\n margin-top: 15px;\n\n .title {\n font-weight: 400;\n font-size: 16px;\n }\n"]))),Ue=b.Ay.div(Ve\|\|(Ve=Fe(["\n display: flex;\n gap: 30px;\n\n .thumbnail-card {\n border-radius: ","px;\n\n > div {\n border-radius: ","px;\n }\n }\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius,null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius);var Ze=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const qe=(0,s.memo)((e=>{var n;const{show:t=!0,similarTemplates:i=[],similarCardProps:r}=e,o=r\|\|{},{width:a=Te,height:l=ze}=o,p=Ze(o,["width","height"]),m=(0,s.useMemo)((()=>(new Date).getTime()),[]);return t&&!(0,d.isEmpty)(i)?c().createElement(Ke,{gap:15,vertical:!0},c().createElement("div",{className:"title"},"Similar templates"),c().createElement(Ue,{templateQuantity:4},null===(n=i.slice(0,4))\|\|void 0===n?void 0:n.map(((e,n)=>{const{id:t,name:i,thumbnail:r}=e\|\|{};return c().createElement(de.Z,Object.assign({key:t,id:t\|\|n,name:i,width:a,height:l,thumbnail:r,actionAvailable:!1,className:"thumbnail-card",thumbnailCacheValue:m},p))})))):null}));var Je,Ge,Xe,Ye=t(56496);function en(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const nn=(0,b.Ay)(Ye.a)(Je\|\|(Je=en(["\n &.antsomi-modal {\n width: fit-content !important;\n\n .antsomi-modal-content {\n width: 1400px;\n height: auto;\n }\n }\n\n .overview {\n flex: 1 1 0%;\n }\n"]))),tn=b.Ay.div(Ge\|\|(Ge=en(["\n padding: 20px;\n width: fit-content;\n box-sizing: border-box;\n"])));b.Ay.img(Xe\|\|(Xe=en(["\n width: 100%;\n height: 100%;\n object-fit: contain;\n"])));var rn=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const on=(0,s.memo)((e=>{const{bannerProps:n,thumbnailProps:t=_e,similarTemplateProps:i=Se,informationProps:r,loading:o=!1}=e,a=rn(e,["bannerProps","thumbnailProps","similarTemplateProps","informationProps","loading"]),[l,p]=(0,s.useState)(fe.DESKTOP.value);return(0,s.useEffect)((()=>{(0,d.isNil)(null==n?void 0:n.deviceType)\|\|p(n.deviceType)}),[null==n?void 0:n.deviceType]),c().createElement(nn,Object.assign({footer:null,centered:!0,modalRender:e=>c().createElement(tn,null,e)},a),c().createElement(z.t,{spinning:o},c().createElement(I.A,{gap:20},c().createElement("div",{className:"overview"},c().createElement(I.A,{gap:20,vertical:!0,style:{width:"100%"}},c().createElement(ye,Object.assign({deviceType:l},n)),c().createElement(Me,Object.assign({},t)))),c().createElement(He,Object.assign({deviceType:l,onDeviceTypeChange:e=>p(e)},r))),c().createElement(qe,Object.assign({},i))))}));var an,ln,sn;function cn(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const dn=(0,b.Ay)(I.A)(an\|\|(an=cn(["\n position: relative;\n height: 100%;\n\n .template-listing {\n width: 100%;\n flex: 1 1 0%;\n height: 100%;\n max-height: 100%;\n overflow-y: auto;\n box-sizing: border-box;\n\n &__loading {\n height: 100%;\n\n .antsomi-spin-container {\n height: 100%;\n width: 100%;\n\n > div {\n max-height: 100%;\n }\n }\n\n &--full {\n width: 100%;\n }\n }\n\n div.scrollbar-view {\n box-sizing: border-box;\n padding: 15px;\n }\n }\n"]))),pn=b.Ay.div(ln\|\|(ln=cn(["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n"]))),mn=b.Ay.div(sn\|\|(sn=cn([""])));var un=t(47747);var hn=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const gn=(0,s.memo)((e=>{const{templatesProps:n=q,templateItemProps:t=V,blankTemplateProps:i=F,categoryListingProps:r=K,emptyProps:o=Z,previewModalProps:a}=e,[l,p]=(0,s.useState)(!1),{header:m,footer:u,items:h=[],gap:g=H,loading:b=!1,wrapperClassName:f,wrapperStyle:v,onLoadMoreTemplates:y=(()=>{})}=n\|\|{},w=a\|\|{},{onOk:x,onCancel:O}=w,E=hn(w,["onOk","onCancel"]),j=t\|\|{},{width:k=re.TQ,height:N=re.Q,previewBtnProps:C}=j,P=hn(j,["width","height","previewBtnProps"]),{onClick:A}=C\|\|{},S=h.length>0,_=(0,s.useMemo)((()=>(new Date).getTime()),[]),{ref:I,itemPerRow:M,ratio:R,gap:$}=(e=>{var n;const{initialWidth:t,gap:i}=e,r=(0,s.useRef)(null),o=(0,un.C)(),a=null===(n=null==r?void 0:r.current)\|\|void 0===n?void 0:n.offsetWidth,l=(0,s.useMemo)((()=>{if((0,d.isNumber)(a)){const e=Math.floor(a/t);return a>=et+i(e-1)?e:e-1}}),[a,i,t]),c=(0,s.useMemo)((()=>(0,d.isNumber)(a)&&(0,d.isNumber)(l)?(a-i(l-1))/l/t:1),[a,i,t,l]);return(0,s.useEffect)((()=>{var e;const n=null===(e=document.getElementsByClassName("template-listing-container"))\|\|void 0===e?void 0:e[0];let t=null;const i=new ResizeObserver((()=>{t&&clearTimeout(t),t=setTimeout((()=>{o()}),0)}));return n&&i.observe(n),()=>{t&&clearTimeout(t)}}),[o]),{ref:r,itemPerRow:l,ratio:c,gap:i}})({gap:g,initialWidth:k\|\|re.TQ}),{ref:B}=function(e,n){var t;const i="current"in e,r=i?n:e,{threshold:o=0,root:a=null,rootMargin:l="0%",freezeOnceVisible:c=!1,initialIsIntersecting:d=!1}=null!=r?r:{},[p,m]=(0,s.useState)(null),u=i?e.current:p,[h,g]=(0,s.useState)((()=>({isIntersecting:d,entry:void 0}))),b=(0,s.useRef)();b.current=null==r?void 0:r.onChange;const f=(null===(t=h.entry)\|\|void 0===t?void 0:t.isIntersecting)&&c;(0,s.useEffect)((()=>{if(!u)return;if(!("IntersectionObserver"in window))return;if(f)return;let e;const n=new IntersectionObserver((t=>{const i=Array.isArray(n.thresholds)?n.thresholds:[n.thresholds];t.forEach((n=>{const t=n.isIntersecting&&i.some((e=>n.intersectionRatio>=e));g({isIntersecting:t,entry:n}),b.current&&b.current(t,n),t&&c&&e&&(e(),e=void 0)}))}),{threshold:o,root:a,rootMargin:l});return n.observe(u),()=>{n.disconnect()}}),[u,JSON.stringify(o),a,l,f,c]);const v=(0,s.useRef)(null);if((0,s.useEffect)((()=>{var e;u\|\|!(null===(e=h.entry)\|\|void 0===e?void 0:e.target)\|\|c\|\|f\|\|v.current===h.entry.target\|\|(v.current=h.entry.target,g({isIntersecting:d,entry:void 0}))}),[u,h.entry,c,f,d]),i)return h.entry;const y=[m,!!h.isIntersecting,h.entry];return y.ref=y[0],y.isIntersecting=y[1],y.entry=y[2],y}({threshold:0,initialIsIntersecting:!1,onChange(e){e&&y()}}),D=e=>{null==A\|\|A(e),p(!0)};return c().createElement(dn,null,c().createElement(X,Object.assign({},r,{emptyProps:o})),c().createElement(pn,{className:f,style:v},m,c().createElement(z.t,{spinning:b\|\|!M,wrapperClassName:"template-listing__loading template-listing__loading--full"},c().createElement(T.u,{className:"template-listing"},c().createElement("div",{className:"template-listing-container",ref:I,style:{display:"grid",gap:$,gridTemplateColumns:"repeat(".concat(M,", minmax(0, 1fr))")}},c().createElement(oe,Object.assign({width:kR,height:NR},i)),!!M&&(null==h?void 0:h.map(((e,n)=>{const{id:i,name:r,thumbnail:o}=e\|\|{},a=void 0===(null==e?void 0:e.name);return c().createElement("div",{key:i},n===h.length-2&&c().createElement(mn,{ref:B}),c().createElement(de.Z,Object.assign({id:i\|\|0,name:r\|\|"Untitled",loading:a,width:kR,height:N*R,thumbnail:o,className:"".concat(t.className),thumbnailCacheValue:_,previewBtnProps:{onClick:D}},P)))})))),!b&&!i.show&&!S&&c().createElement(L,Object.assign({},o)))),u),c().createElement(on,Object.assign({open:l,onOk:e=>{null==x\|\|x(e),p(!1)},onCancel:e=>{null==O\|\|O(e),p(!1)}},E)))}));gn.displayName="TemplateListing",gn.defaultProps=U}}]);
1	+ "use strict";(self.webpackChunk_antscorp_antsomi_ui=self.webpackChunk_antscorp_antsomi_ui\|\|[]).push([[723],{12723:(e,n,t)=>{t.r(n),t.d(n,{TemplateListing:()=>bn});var i,r,o,a,l,s=t(39155),c=t.n(s),d=t(2543),p=t(85851),m=t.n(p),u=t(72830),h=t(30115),g=t.n(h),b=t(30496),f=t(43350);function v(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const{Text:y}=f.A,x=b.Ay.div(i\|\|(i=v(["\n position: relative;\n flex-shrink: 0;\n width: ",";\n overflow: auto;\n overflow-x: hidden;\n border-right: 1px solid rgba(5, 5, 5, 0.06);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n .category__listing {\n position: relative;\n height: 100%;\n overflow-y: auto;\n\n .antsomi-menu,\n .ant-menu {\n [role='menu'] {\n background-color: white !important;\n }\n\n [role='menuitem'] {\n width: 100%;\n border-radius: 0;\n height: 30px;\n padding: 0 10px !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n\n .antsomi-menu-title-content,\n .ant-menu-title-content {\n height: 100%;\n }\n }\n\n .antsomi-menu-submenu-title,\n .ant-menu-submenu-title {\n height: 30px !important;\n }\n\n .antsomi-menu-submenu-title {\n margin-top: 10px;\n margin-bottom: 10px;\n }\n }\n\n .category-loading {\n height: 100%;\n }\n\n .empty-wrapper {\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n }\n"])),(e=>{let{$width:n}=e;return void 0!==n?"".concat(n,"px"):"auto"})),w=b.Ay.div(r\|\|(r=v(["\n display: flex;\n justify-content: space-between;\n height: 100%;\n align-items: center;\n\n .label {\n flex: 1 1 0%;\n display: flex;\n gap: 9px;\n overflow: auto;\n\n .antsomi-checkbox-wrapper {\n width: 100%;\n display: flex;\n align-items: center;\n\n .antsomi-checkbox-wrapper {\n flex-shrink: 0;\n }\n\n span:nth-child(2) {\n flex: 1 1 0%;\n overflow: auto;\n }\n }\n }\n\n .total {\n flex-shrink: 0;\n font-size: 13px;\n font-weight: 400;\n color: ",";\n line-height: 1 !important;\n font-size: 11px;\n height: fit-content;\n }\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.bw8),O=b.Ay.div(o\|\|(o=v(["\n font-size: 13px !important;\n font-weight: 400;\n /* color: ","; /\n height: 100%;\n display: flex;\n align-items: center;\n padding-right: 20px;\n"])),null===(l=null===u.C\|\|void 0===u.C?void 0:u.C.token)\|\|void 0===l?void 0:l.bw8),E=(0,b.Ay)(y)(a\|\|(a=v(["\n max-width: 100%;\n color: inherit !important;\n height: fit-content;\n font-size: inherit !important;\n"])));var j,k,N,C,P,A=t(91196),T=t(7450),z=t(28086),S=t(5668),_=t(69099),I=t(86336);function M(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const R=(0,b.Ay)(I.A)(j\|\|(j=M(["\n width: 100%;\n height: 100%;\n\n .antsomi-typography {\n color: ",";\n }\n"])),null===(N=u.C.token)\|\|void 0===N?void 0:N.bw8);R.defaultProps={vertical:!0,align:"center",justify:"center",gap:15};const $=b.Ay.div(k\|\|(k=M(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 60px;\n height: 60px;\n border-radius: 100%;\n background-color: ",";\n\n i {\n font-size: 24px;\n color: ",";\n }\n"])),null===(C=u.C.token)\|\|void 0===C?void 0:C.bw2,null===(P=u.C.token)\|\|void 0===P?void 0:P.bw6),{Text:B}=f.A,L=e=>{const{icon:n=c().createElement(_.I,{type:"icon-ants-media"}),description:t="No data"}=e;return c().createElement(R,null,c().createElement($,{className:"animate__animated animate__tada"},(0,d.isString)(n)?c().createElement(_.I,{type:n}):n),c().createElement(B,{className:"animate__animated animate__fadeInUp"},t))};var D=t(29743);const W=220,H=30,Q=400,V={removable:!0},F={show:!1},K={width:W,show:!0,checkedCategories:{},onMenuChange:()=>{}},U={templateItemProps:V,blankTemplateProps:F},Z={description:"No data"},q={items:[]};var J=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const G="src/components/template/TemplateListing/components/CategoryListing/index.tsx",X=(0,s.memo)((e=>{var n;const{width:t=W,items:i=[],loading:r=!1,show:o=!0,checkedCategories:a={},emptyProps:l,debounceChangeMenu:p=Q,header:h,footer:b,onMenuChange:f}=e,v=J(e,["width","items","loading","show","checkedCategories","emptyProps","debounceChangeMenu","header","footer","onMenuChange"]),[y,j]=(0,s.useState)({});(0,s.useEffect)((()=>{j((e=>g()(e,a)?e:a))}),[a]);const k=(0,s.useRef)(null),N=(0,s.useCallback)((e=>{var n;try{const{key:t,parentId:i,label:r,total:o}=e,a=!(!i\|\|!(null===(n=null==y?void 0:y[i])\|\|void 0===n?void 0:n.includes(t)));return c().createElement(w,{onClick:e=>e.preventDefault()},c().createElement("div",{className:"label"},c().createElement(A.A,{checked:a},c().createElement(E,{ellipsis:{tooltip:r}},r))),c().createElement("span",{className:"total"},(0,d.isNumber)(o)?o:""))}catch(n){return(0,D.H)(n,{path:G,name:"renderCustomLabel()",args:e}),null}}),[y]),C=(0,s.useCallback)(((e,n)=>{try{const{key:t,label:i,children:r}=e;return Object.assign(Object.assign(Object.assign({},e),n?{label:c().createElement(O,null,c().createElement(E,{ellipsis:{tooltip:i}},i))}:{}),{children:r&&!(0,d.isEmpty)(r)?null==r?void 0:r.map((e=>{const n=Object.assign(Object.assign({},e),{parentId:t});return C(Object.assign(Object.assign({},n),{label:N(n)}))})):void 0})}catch(t){return void(0,D.H)(t,{path:G,name:"getItem()",args:{item:e,isRoot:n}})}}),[N]),P=(0,s.useMemo)((()=>{const e=[];return null==i\|\|i.forEach(((n,t)=>{const i=C(Object.assign(Object.assign({},n),{parentId:null}),!0);i&&e.push(i)})),e}),[C,i]);return o&&!(0,d.isEmpty)(P)\|\|h\|\|r?c().createElement(x,{$width:t},h,c().createElement(T.u,{className:"category__listing"},c().createElement(z.t,{spinning:r,wrapperClassName:"template-listing__loading"},(0,d.isEmpty)(P)&&!r?c().createElement("div",{className:"empty-wrapper"},c().createElement(L,Object.assign({},l))):c().createElement(S.A,Object.assign({selectedKeys:[],items:P,inlineIndent:0,mode:"inline",defaultOpenKeys:null==i?void 0:i.map((e=>String(e.key))),expandIcon:c().createElement(m(),{type:"icon-ants-expand-more",style:{fontSize:20,color:null===(n=null===u.C\|\|void 0===u.C?void 0:u.C.token)\|\|void 0===n?void 0:n.bw8}}),onClick:e=>{var n;try{const{key:t,keyPath:i}=e,r=null==i?void 0:i[1];if(r){const e=(null===(n=null==y?void 0:y[r])\|\|void 0===n?void 0:n.includes(t))?Object.assign(Object.assign({},y),{[r]:y[r].filter((e=>e!==t))}):Object.assign(Object.assign({},y),{[r]:[...(null==y?void 0:y[r])\|\|[],t]});k&&(j(e),clearTimeout(k.current)),k.current=setTimeout((()=>{null==f\|\|f(e)}),p)}}catch(n){(0,D.H)(n,{path:G,name:"handleClickMenu()",args:{e}})}}},v)),b))):null}));X.displayName="CategoryListing";var Y,ee=t(41864);const ne=(0,b.Ay)(I.A)(Y\|\|(te=["\n box-sizing: border-box;\n border: 1px solid #b8cfe6;\n border-radius: 5px;\n cursor: pointer;\n\n .add-blank-btn {\n width: 50px !important;\n height: 50px !important;\n border-radius: 999px;\n background-color: #005eb80d !important;\n\n .antsomi-btn-icon {\n margin-top: 3px;\n }\n }\n\n .description {\n font-weight: 700;\n max-width: 90%;\n }\n"],ie\|\|(ie=te.slice(0)),Y=Object.freeze(Object.defineProperties(te,{raw:{value:Object.freeze(ie)}}))));var te,ie,re=t(64904);const oe=(0,s.memo)((e=>{const{width:n=re.TQ,height:t=re.Q,show:i,description:r="Blank Template",blankTemplateRender:o,onClick:a}=e,l=c().createElement(ne,{style:{width:n,height:t},align:"center",justify:"center",onClick:a},c().createElement(I.A,{align:"center",justify:"center",gap:10,vertical:!0,style:{width:"100%"}},c().createElement(ee.$,{type:"text",className:"add-blank-btn",icon:c().createElement(m(),{type:"icon-ants-plus-slim",style:{fontSize:24}})}),c().createElement("div",{className:"description"},c().createElement(f.A.Text,{ellipsis:{tooltip:r},style:{maxWidth:"100%",color:"inherit"}},r))));return i?o?c().createElement(c().Fragment,null,o(l)):l:null}));oe.displayName="BlankTemplate";var ae,le,se,ce,de=t(18470),pe=t(46942),me=t.n(pe),ue=t(85677),he=t(27874);function ge(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const be=b.Ay.div(ae\|\|(ae=ge(["\n width: 100%;\n overflow-y: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: ",";\n border-radius: ","px;\n border: 1px solid ",";\n height: ","px;\n\n // Calculate scale of mobile frame\n #banner-mobile {\n ","\n }\n\n / "," /\n\n .mobile-wrapper {\n position: relative;\n border-radius: 80px;\n animation-duration: 0.2s !important;\n\n .content-wrapper {\n width: fit-content;\n height: fit-content;\n }\n\n .skeleton,\n .backdrop {\n left: 5px;\n }\n }\n\n .desktop-wrapper {\n position: relative;\n height: 100%;\n width: 100%;\n border-radius: ","px;\n transition: width 0.2s ease, height 0.2s ease;\n .content-wrapper {\n width: 100%;\n height: 100%;\n }\n }\n\n .content-wrapper {\n position: absolute;\n z-index: 12;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .skeleton {\n width: 100%;\n height: 100%;\n background: center / cover no-repeat url(",");\n border-radius: inherit;\n }\n\n .backdrop {\n border-radius: inherit;\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: black;\n opacity: 0.5;\n z-index: 10;\n top: 0;\n left: 0;\n }\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.colorBgSkeleton,null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius,null===u.N\|\|void 0===u.N?void 0:u.N.blue1_1,(e=>e.$height\|\|700),(e=>{const n=e.$height\|\|700,t=(n-10)/(he.O.MD.height+36),i=(n-10)/(he.O.LG.height+36);return(0,b.AH)(le\|\|(le=ge(["\n @media screen and (max-height: 1000px) {\n transform: scale(",");\n }\n\n @media screen and (min-height: 1001px) {\n transform: scale(",");\n }\n "])),t,i)}),(e=>e.$height?(0,b.AH)(se\|\|(se=ge(["\n height: ","px;\n\n .mobile-wrapper {\n width: 359px;\n height: ","px;\n }\n "])),e.$height,e.$height):(0,b.AH)(ce\|\|(ce=ge(["\n @media screen and (max-height: 1000px) {\n height: 760px;\n max-height: 760px;\n\n .mobile-wrapper {\n width: 359px;\n height: 722.41px;\n }\n }\n\n @media screen and (min-height: 1001px) {\n height: 830px;\n max-height: 830px;\n\n .mobile-wrapper {\n width: 380px;\n height: 800px;\n }\n }\n "])))),5,ue.A);var fe=t(98548);const ve={DESKTOP:{value:"desktop",label:"Desktop",icon:"icon-ants-laptop"},MOBILE:{value:"mobile",label:"Mobile",icon:"icon-ants-smart-phone"}};var ye=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const xe=(0,s.memo)((e=>{const{deviceType:n,showSkeleton:t=!1,children:i,height:r}=e,o=ye(e,["deviceType","showSkeleton","children","height"]),a=(0,s.useMemo)((()=>n===ve.MOBILE.value),[n]),[l,d]=(0,s.useState)(!1);return(0,s.useEffect)((()=>{d(!0);const e=setTimeout((()=>{d(!1)}),1e3);return()=>clearTimeout(e)}),[i]),c().createElement(be,Object.assign({$height:r},o),c().createElement("div",{className:"".concat(a?"mobile-wrapper animate__animated animate__zoomIn":"desktop-wrapper")},c().createElement("div",{className:me()({"content-wrapper":!0,"animate__animated animate__fadeIn":l})},a?c().createElement(fe.E,{id:"banner-mobile"},i\|\|null):i\|\|null),t&&c().createElement(c().Fragment,null,c().createElement("div",{className:"skeleton"}))))}));var we,Oe,Ee,je=t(63325),ke=t(67848);function Ne(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const Ce=b.Ay.div(we\|\|(we=Ne(["\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n\n .swiper {\n max-width: 1030px;\n\n .swiper-slide {\n width: fit-content !important;\n }\n }\n\n .thumbnail-animation {\n box-shadow: none;\n transition: box-shadow 0.1s ease-in-out;\n border-radius: ","px;\n\n > div {\n border-radius: ","px;\n }\n\n &:hover {\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);\n }\n }\n\n .custom-button-prev,\n .custom-button-next {\n z-index: 10;\n position: absolute;\n width: 24px;\n height: 24px;\n background-color: #ffffff;\n box-shadow: 0px 3px 3px 0px #002e591a;\n border-radius: 999px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n / Remove default style of Antd button /\n border-color: white !important;\n\n &.antsomi-btn-default:not(:disabled):hover {\n border-color: white !important;\n background-color: #ffffff !important;\n }\n }\n\n .custom-button-prev {\n left: 0px;\n transform: rotate(90deg);\n }\n\n .custom-button-next {\n right: 0px;\n transform: rotate(-90deg);\n }\n\n .hidden {\n display: none !important;\n }\n\n i {\n font-size: 20px;\n color: ",";\n }\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius,null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius,null===(Ee=null===u.C\|\|void 0===u.C?void 0:u.C.token)\|\|void 0===Ee?void 0:Ee.bw8),Pe=(0,b.Ay)(je.qr)(Oe\|\|(Oe=Ne(["\n list-style: none;\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n"]))),Ae=180,Te=126,ze=330,Se=230,_e={show:!1,similarTemplates:[]},Ie={thumbnails:[]};var Me=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const Re=(0,s.memo)((e=>{const{thumbnails:n,width:t=Ae,height:i=Te,onClickThumbnail:r}=e,o=Me(e,["thumbnails","width","height","onClickThumbnail"]),[a,l]=(0,s.useState)(!0),[p,u]=(0,s.useState)(!1),h=(0,s.useRef)(null),g=(0,s.useRef)(null),b=(0,s.useMemo)((()=>t+20+24),[t]),f=(0,s.useMemo)((()=>((null==n?void 0:n.length)\|\|0)b>990),[null==n?void 0:n.length,b]),v=(0,s.useMemo)((()=>(new Date).getTime()),[]),y=e=>{const{thumbnail:n,index:a}=e,{id:l,url:s}=n;return c().createElement(I.A,{gap:10},!!a&&c().createElement(I.A,{align:"center"},c().createElement(m(),{type:"icon-ants-expand-more",style:{fontSize:24,transform:"rotate(270deg)"}})),c().createElement(de.Z,Object.assign({key:l,id:l,width:t,height:i,thumbnail:s,thumbnailCacheValue:v,style:{flexShrink:0},className:"thumbnail-animation",actionAvailable:!1,onClickWrapper:()=>null==r?void 0:r(n)},o)))};return n&&!(0,d.isEmpty)(n)?c().createElement(Ce,null,f?c().createElement(c().Fragment,null,c().createElement(je.RC,{slidesPerView:Math.floor(990/b),spaceBetween:10,modules:[ke.Vx,ke.Jq,ke.WO],navigation:{prevEl:h.current,nextEl:g.current},onBeforeInit:e=>{setTimeout((()=>{e.params.navigation&&"boolean"!=typeof e.params.navigation&&(e.params.navigation.prevEl=h.current,e.params.navigation.nextEl=g.current,e.navigation.destroy(),e.navigation.init(),e.navigation.update())}))},onSlideChange:e=>{let{isBeginning:n,isEnd:t}=e;l(n),u(t)}},n.map(((e,n)=>c().createElement(Pe,{key:"slide-".concat(e.id)},y({thumbnail:e,index:n}))))),c().createElement(ee.$,{ref:h,className:me()({"custom-button-prev":!0,hidden:a})},c().createElement(m(),{type:"icon-ants-expand-more"})),c().createElement(ee.$,{ref:g,className:me()({"custom-button-next":!0,hidden:p})},c().createElement(m(),{type:"icon-ants-expand-more"}))):c().createElement(I.A,{gap:10,style:{width:"fit-content"}},null==n?void 0:n.map(((e,n)=>c().createElement(c().Fragment,{key:e.id},y({thumbnail:e,index:n})))))):null}));var $e,Be,Le;function De(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const We=(0,b.Ay)(I.A)($e\|\|($e=De(["\n width: 300px;\n flex-shrink: 0;\n font-size: 12px;\n height: 100%;\n max-height: 100%;\n\n .title {\n font-size: 16px;\n font-weight: 700;\n max-width: 100%;\n color: inherit;\n padding-right: 25px;\n word-break: break-word;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n }\n\n .antsomi-radio-group {\n width: 100%;\n display: flex;\n\n .antsomi-radio-button-wrapper {\n flex: 1 1 0%;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 30px;\n\n i {\n height: fit-content;\n font-size: 24px;\n }\n }\n }\n\n .content-information {\n flex: 1 1 0%;\n height: fit-content;\n overflow-y: auto;\n max-height: 682px;\n }\n"]))),He=(0,b.Ay)(ee.$)(Be\|\|(Be=De(["\n color: "," !important;\n\n ","\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.colorText,(e=>e.$active&&(0,b.AH)(Le\|\|(Le=De(["\n color: "," !important;\n background-color: "," !important;\n "])),null===u.N\|\|void 0===u.N?void 0:u.N.colorPrimary,null===u.N\|\|void 0===u.N?void 0:u.N.blue1_1))),Qe=(0,s.memo)((e=>{var n;const{deviceType:t,itemName:i="Template name",buttonText:r="Use template",description:o,categoryListing:a,showDeviceRadios:l=!0,onButtonClick:s,onDeviceTypeChange:d}=e;return c().createElement(We,{gap:20,vertical:!0},c().createElement("div",{style:{flexShrink:0},className:"title"},i),c().createElement(I.A,{gap:15,vertical:!0,className:"content-information"},o&&c().createElement("div",{style:{color:null===(n=u.C.token)\|\|void 0===n?void 0:n.bw8}},o),null==a?void 0:a.map((e=>{let{key:n,label:t,children:i}=e;var r;return c().createElement("div",{key:n},c().createElement("div",{style:{color:null===(r=u.C.token)\|\|void 0===r?void 0:r.bw8}},t,":"),c().createElement("div",{style:{fontWeight:"bold"}},null==i?void 0:i.map((e=>{let{label:n}=e;return n})).join(", ")))}))),c().createElement(I.A,{gap:20,style:{flexShrink:0},vertical:!0},l&&c().createElement(I.A,{align:"center",gap:1},Object.values(ve).map((e=>{let{value:n,label:i,icon:r}=e;return c().createElement(He,{key:n,icon:c().createElement(m(),{type:r}),block:!0,$active:t===n,onClick:()=>d(n),type:"text"},i)}))),c().createElement(ee.$,{type:"primary",style:{width:"100%",flexShrink:0},onClick:s},c().createElement(f.A.Text,{ellipsis:{tooltip:r},style:{maxWidth:"100%",color:"inherit"}},r))))}));var Ve,Fe;function Ke(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const Ue=(0,b.Ay)(I.A)(Ve\|\|(Ve=Ke(["\n margin-top: 15px;\n\n .title {\n font-weight: 400;\n font-size: 16px;\n }\n"]))),Ze=b.Ay.div(Fe\|\|(Fe=Ke(["\n display: flex;\n gap: 30px;\n\n .thumbnail-card {\n border-radius: ","px;\n\n > div {\n border-radius: ","px;\n }\n }\n"])),null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius,null===u.N\|\|void 0===u.N?void 0:u.N.borderRadius);var qe=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const Je=(0,s.memo)((e=>{var n;const{show:t=!0,similarTemplates:i=[],similarCardProps:r}=e,o=r\|\|{},{width:a=ze,height:l=Se}=o,p=qe(o,["width","height"]),m=(0,s.useMemo)((()=>(new Date).getTime()),[]);return t&&!(0,d.isEmpty)(i)?c().createElement(Ue,{gap:15,vertical:!0},c().createElement("div",{className:"title"},"Similar templates"),c().createElement(Ze,{templateQuantity:4},null===(n=i.slice(0,4))\|\|void 0===n?void 0:n.map(((e,n)=>{const{id:t,name:i,thumbnail:r}=e\|\|{};return c().createElement(de.Z,Object.assign({key:t,id:t\|\|n,name:i,width:a,height:l,thumbnail:r,actionAvailable:!1,className:"thumbnail-card",thumbnailCacheValue:m},p))})))):null}));var Ge,Xe,Ye,en=t(56496);function nn(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const tn=(0,b.Ay)(en.a)(Ge\|\|(Ge=nn(["\n &.antsomi-modal {\n width: fit-content !important;\n\n .antsomi-modal-content {\n width: 1400px;\n height: auto;\n }\n }\n\n .overview {\n flex: 1 1 0%;\n }\n"]))),rn=b.Ay.div(Xe\|\|(Xe=nn(["\n padding: 20px;\n width: fit-content;\n box-sizing: border-box;\n"])));b.Ay.img(Ye\|\|(Ye=nn(["\n width: 100%;\n height: 100%;\n object-fit: contain;\n"])));var on=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const an=(0,s.memo)((e=>{const{bannerProps:n,thumbnailProps:t=Ie,similarTemplateProps:i=_e,informationProps:r,loading:o=!1}=e,a=on(e,["bannerProps","thumbnailProps","similarTemplateProps","informationProps","loading"]),[l,p]=(0,s.useState)(ve.DESKTOP.value);return(0,s.useEffect)((()=>{(0,d.isNil)(null==n?void 0:n.deviceType)\|\|p(n.deviceType)}),[null==n?void 0:n.deviceType]),c().createElement(tn,Object.assign({footer:null,centered:!0,modalRender:e=>c().createElement(rn,null,e)},a),c().createElement(z.t,{spinning:o},c().createElement(I.A,{gap:20},c().createElement("div",{className:"overview"},c().createElement(I.A,{gap:20,vertical:!0,style:{width:"100%"}},c().createElement(xe,Object.assign({deviceType:l},n)),c().createElement(Re,Object.assign({},t)))),c().createElement(Qe,Object.assign({deviceType:l,onDeviceTypeChange:e=>p(e)},r))),c().createElement(Je,Object.assign({},i))))}));var ln,sn,cn;function dn(e,n){return n\|\|(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}const pn=(0,b.Ay)(I.A)(ln\|\|(ln=dn(["\n position: relative;\n height: 100%;\n\n .template-listing {\n width: 100%;\n flex: 1 1 0%;\n height: 100%;\n max-height: 100%;\n overflow-y: auto;\n box-sizing: border-box;\n\n &__loading {\n height: 100%;\n\n .antsomi-spin-container {\n height: 100%;\n width: 100%;\n\n > div {\n max-height: 100%;\n }\n }\n\n &--full {\n width: 100%;\n }\n }\n\n div.scrollbar-view {\n box-sizing: border-box;\n padding: 15px;\n }\n }\n"]))),mn=b.Ay.div(sn\|\|(sn=dn(["\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n"]))),un=b.Ay.div(cn\|\|(cn=dn([""])));var hn=t(47747);var gn=function(e,n){var t={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&n.indexOf(i)<0&&(t[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++)n.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(t[i[r]]=e[i[r]])}return t};const bn=(0,s.memo)((e=>{const{templatesProps:n=q,templateItemProps:t=V,blankTemplateProps:i=F,categoryListingProps:r=K,emptyProps:o=Z,previewModalProps:a}=e,[l,p]=(0,s.useState)(!1),{header:m,footer:u,items:h=[],gap:g=H,loading:b=!1,wrapperClassName:f,wrapperStyle:v,onLoadMoreTemplates:y=(()=>{})}=n\|\|{},x=a\|\|{},{onOk:w,onCancel:O}=x,E=gn(x,["onOk","onCancel"]),j=t\|\|{},{width:k=re.TQ,height:N=re.Q,previewBtnProps:C}=j,P=gn(j,["width","height","previewBtnProps"]),{onClick:A}=C\|\|{},S=h.length>0,_=(0,s.useMemo)((()=>(new Date).getTime()),[]),{ref:I,itemPerRow:M,ratio:R,gap:$}=(e=>{var n;const{initialWidth:t,gap:i}=e,r=(0,s.useRef)(null),o=(0,hn.C)(),a=null===(n=null==r?void 0:r.current)\|\|void 0===n?void 0:n.offsetWidth,l=(0,s.useMemo)((()=>{if((0,d.isNumber)(a)){const e=Math.floor(a/t);return a>=et+i(e-1)?e:e-1}}),[a,i,t]),c=(0,s.useMemo)((()=>(0,d.isNumber)(a)&&(0,d.isNumber)(l)?(a-i(l-1))/l/t:1),[a,i,t,l]);return(0,s.useEffect)((()=>{var e;const n=null===(e=document.getElementsByClassName("template-listing-container"))\|\|void 0===e?void 0:e[0];let t=null;const i=new ResizeObserver((()=>{t&&clearTimeout(t),t=setTimeout((()=>{o()}),0)}));return n&&i.observe(n),()=>{t&&clearTimeout(t)}}),[o]),{ref:r,itemPerRow:l,ratio:c,gap:i}})({gap:g,initialWidth:k\|\|re.TQ}),{ref:B}=function(e,n){var t;const i="current"in e,r=i?n:e,{threshold:o=0,root:a=null,rootMargin:l="0%",freezeOnceVisible:c=!1,initialIsIntersecting:d=!1}=null!=r?r:{},[p,m]=(0,s.useState)(null),u=i?e.current:p,[h,g]=(0,s.useState)((()=>({isIntersecting:d,entry:void 0}))),b=(0,s.useRef)();b.current=null==r?void 0:r.onChange;const f=(null===(t=h.entry)\|\|void 0===t?void 0:t.isIntersecting)&&c;(0,s.useEffect)((()=>{if(!u)return;if(!("IntersectionObserver"in window))return;if(f)return;let e;const n=new IntersectionObserver((t=>{const i=Array.isArray(n.thresholds)?n.thresholds:[n.thresholds];t.forEach((n=>{const t=n.isIntersecting&&i.some((e=>n.intersectionRatio>=e));g({isIntersecting:t,entry:n}),b.current&&b.current(t,n),t&&c&&e&&(e(),e=void 0)}))}),{threshold:o,root:a,rootMargin:l});return n.observe(u),()=>{n.disconnect()}}),[u,JSON.stringify(o),a,l,f,c]);const v=(0,s.useRef)(null);if((0,s.useEffect)((()=>{var e;u\|\|!(null===(e=h.entry)\|\|void 0===e?void 0:e.target)\|\|c\|\|f\|\|v.current===h.entry.target\|\|(v.current=h.entry.target,g({isIntersecting:d,entry:void 0}))}),[u,h.entry,c,f,d]),i)return h.entry;const y=[m,!!h.isIntersecting,h.entry];return y.ref=y[0],y.isIntersecting=y[1],y.entry=y[2],y}({threshold:0,initialIsIntersecting:!1,onChange(e){e&&y()}}),D=e=>{null==A\|\|A(e),p(!0)};return c().createElement(pn,null,c().createElement(X,Object.assign({},r,{emptyProps:o})),c().createElement(mn,{className:f,style:v},m,c().createElement(z.t,{spinning:b\|\|!M,wrapperClassName:"template-listing__loading template-listing__loading--full"},c().createElement(T.u,{className:"template-listing"},c().createElement("div",{className:"template-listing-container",ref:I,style:{display:"grid",gap:$,gridTemplateColumns:"repeat(".concat(M,", minmax(0, 1fr))")}},c().createElement(oe,Object.assign({width:kR,height:NR},i)),!!M&&(null==h?void 0:h.map(((e,n)=>{const{id:i,name:r,thumbnail:o}=e\|\|{},a=void 0===(null==e?void 0:e.name);return c().createElement("div",{key:i},n===h.length-2&&c().createElement(un,{ref:B}),c().createElement(de.Z,Object.assign({id:i\|\|0,name:r\|\|"Untitled",loading:a,width:kR,height:N*R,thumbnail:o,className:"".concat(t.className),thumbnailCacheValue:_,previewBtnProps:{onClick:D}},P)))})))),!b&&!i.show&&!S&&c().createElement(L,Object.assign({},o)))),u),c().createElement(an,Object.assign({open:l,onOk:e=>{null==w\|\|w(e),p(!1)},onCancel:e=>{null==O\|\|O(e),p(!1)}},E)))}));bn.displayName="TemplateListing",bn.defaultProps=U}}]);