https://static.lightxeditor.com/web/5199.f8e3b1d05a837c84.js

1"use strict";(self.webpackChunklightx=self.webpackChunklightx||[]).push([[5199],{45199:(ze,w,c)=>{c.r(w),c.d(w,{TutorialModule:()=>He});var p=c(60177),S=c(79421),g=c(74710),F=c(24886),_=c(16478),e=c(54438),b=c(68287),P=c(61343),v=c(34183),L=c(91367),$=c(68010),M=c(24045),h=c(68064),B=c(21413),T=c(7673),V=c(28793),C=c(70152),x=c(23294),I=c(25558),O=c(99437),y=c(88141),E=c(96354),N=c(62261),m=c(84341),u=c(89818);const Y=["templateImageSb"],D=["searchselector"],X=["searchInput"];function H(i,r){if(1&i){const o=e.RV6();e.j41(0,"li",27),e.bIt("click",function(){const t=e.eBV(o).$implicit,a=e.XpG(4);return e.Njj(a.searchTemplateItem(t))}),e.EFF(1),e.k0s()}if(2&i){const o=r.$implicit;e.R7$(),e.SpI(" ",o.trendingSearch," ")}}function U(i,r){if(1&i){const o=e.RV6();e.j41(0,"div",23)(1,"div",24),e.EFF(2,"Recent Search "),e.j41(3,"span")(4,"a",25),e.bIt("click",function(){e.eBV(o);const t=e.XpG(3);return e.Njj(t.deleteAll())}),e.EFF(5,"Clear all"),e.k0s()()(),e.j41(6,"ul"),e.DNE(7,H,2,1,"li",26),e.k0s()()}if(2&i){const o=e.XpG(3);e.R7$(7),e.Y8G("ngForOf",o.recentSearch)}}function z(i,r){if(1&i&&(e.qex(0,21),e.DNE(1,U,8,1,"div",22),e.bVm()),2&i){const o=e.XpG(2);e.R7$(),e.Y8G("ngIf",o.recentSearch.length>0)}}function A(i,r){1&i&&(e.j41(0,"div",28),e.EFF(1,"Trending Tutorials"),e.k0s())}function W(i,r){1&i&&(e.j41(0,"div",29),e.EFF(1,"Suggested"),e.k0s())}function J(i,r){if(1&i&&(e.j41(0,"div",30),e.EFF(1),e.k0s()),2&i){const o=e.XpG(2);e.R7$(),e.SpI(" ",o.customNoItemsText," ")}}function Q(i,r){1&i&&(e.j41(0,"div",31),e.nrm(1,"hr"),e.k0s())}function K(i,r){if(1&i){const o=e.RV6();e.j41(0,"li",27),e.bIt("click",function(){const t=e.eBV(o).$implicit,a=e.XpG(3);return e.Njj(a.searchTemplateItem(t))}),e.EFF(1),e.k0s()}if(2&i){const o=r.$implicit;e.R7$(),e.SpI(" ",o.trendingSearch," ")}}function Z(i,r){if(1&i&&(e.qex(0,21),e.j41(1,"div",23)(2,"div",32),e.EFF(3,"Trending Search"),e.k0s(),e.j41(4,"ul"),e.DNE(5,K,2,1,"li",26),e.k0s()(),e.bVm()),2&i){const o=e.XpG(2);e.R7$(5),e.Y8G("ngForOf",o.templateOptionList)}}function q(i,r){if(1&i&&(e.DNE(0,z,2,1,"ng-container",15),e.qex(1,16),e.DNE(2,A,2,0,"div",17)(3,W,2,0,"div",18)(4,J,2,1,"div",19)(5,Q,2,0,"div",20),e.bVm(),e.DNE(6,Z,6,1,"ng-container",15)),2&i){const o=e.XpG();e.Y8G("ngIf",!o.templateNamesLoading),e.R7$(2),e.Y8G("ngIf",!o.templateNamesLoading),e.R7$(),e.Y8G("ngIf",o.templateNamesLoading&&o.mediaContentService.searchDashboardcount>0),e.R7$(),e.Y8G("ngIf",o.templateNamesLoading&&o.mediaContentService.searchDashboardcount<0),e.R7$(),e.Y8G("ngIf",o.templateNamesLoading&&o.mediaContentService.searchDashboardcount<0),e.R7$(),e.Y8G("ngIf",o.templateNamesLoading&&o.mediaContentService.searchDashboardcount<=0)}}function ee(i,r){if(1&i){const o=e.RV6();e.j41(0,"div",33),e.bIt("click",function(){e.eBV(o);const t=e.XpG();return t.searchTerm="",e.Njj(t.clearSearch())}),e.nrm(1,"pi",34),e.k0s()}}let te=(()=>{var i;class r{constructor(n,t,a,s){this.mediaContentService=n,this.route=t,this.router=a,this.renderer=s,this.subscriptions=[],this.searchTerm=null,this.searchText=null,this.loading=!0,this.trendingBuffer=[],this.bufferSize=50,this.isheader=!1,this.closeIconclass="default-searchbar",this.numberOfItemsFromEndBeforeFetchingMore=10,this.recentSearch=[],this.searchList=!1,this.isImageProgress=!1,this.templateOptionList=[],this.templateImages=[],this.ngOpenValue=!1,this.clickTemplateImage=new e.bkB,this.resetTemplate=new e.bkB,this.template=new e.bkB,this.templateType=1,this.resetSearchTerm=null,this.catId=null,this.placeholderTxt="Search a tutorial",this.searchTemplatet$=new B.B,this.templateNamesLoading=!1,this.initData=[],this.isOpenDropDown=!1,this.customNoItemsText="We couldn't find any tutorial matching your search.",this.isEditorisDrawer=!1,this.pageType="tutorial",this.search=l=>l.pipe((0,C.B)(200),(0,x.F)(),(0,I.n)(d=>this.mediaContentService.searchDashboardLookupInvestment(d).pipe((0,O.W)(()=>(this.templateNamesLoading=!0,(0,T.of)([]))),(0,y.M)(()=>this.templateNamesLoading=!0)))),this.searchTemplatet=l=>{l.pipe((0,C.B)(200),(0,x.F)(),(0,E.T)(d=>d.length<2?[]:G=>[]))}}ngAfterViewInit(){const n=localStorage.getItem("recentTutorialSearch");this.recentSearch=null!==n?JSON.parse(n):[],this.getTrandingTemplateList(

1)}updatetemplateList(n){}ngOnInit(){let n;n=this.router.events.subscribe(t=>{t instanceof g.wF&&(this.route.snapshot.queryParamMap.get("search")||(this.searchText="",this.searchTerm=null))}),this.subscriptions.push(n),n=this.route.queryParams.subscribe(t=>{t&&t.search&&(this.searchTerm=t.search,this.resetSearchTerm=t.search)}),this.subscriptions.push(n)}ngOpen(){this.ngOpenValue=!0}ngClose(){this.ngOpenValue=!1,this.searchText=null,this.searchTerm&&this.searchTerm.length<1&&(this.searchTerm=null,this.searchTemplatet$.next(this.searchTerm),this.searchInput.nativeElement.input())}clickInput(n){this.ngOpenValue=!0,document}blurInput(){document,setTimeout(()=>{setTimeout(()=>{this.templateNamesLoading=!1,this.getTrandingTemplateList()},200),this.ngOpenValue=!1,this.mediaContentService.searchDashboardcount=0,this.searchText=null,this.searchTerm=null,this.ngselect.blur()})}onEnterInput(){}clearSearch(){this.searchTerm="",this.templateNamesLoading=!1,this.resetTemplate.emit(this.searchTerm)}deleteAll(){this.recentSearch=[]}change(n){n.preventDefault(),n.stopPropagation(),this.searchTerm.trim().length>1&&this.searchTemplatet$.next(this.searchTerm.trim()),0===this.searchTerm.trim().length?setTimeout(()=>{this.templateNamesLoading=!1,this.getTrandingTemplateList()},400):this.templateNamesLoading=!0}tabChangeReset(){this.searchTerm="",this.searchTerm.trim().length>1&&this.searchTemplatet$.next(this.searchTerm.trim()),0===this.searchTerm.trim().length&&setTimeout(()=>{this.templateNamesLoading=!1},700)}getTrandingTemplateList(){this.isImageProgress=!0,this.mediaContentService.getDashboardTrendingSearches(n=>{this.templateOptionList=n?.body?.trendingSearches||[],this.templateOptionList=this.templateOptionList.map(t=>({...t,trendingSearch:t.subType?t.subType.replaceAll("-ai","-AI").replaceAll("-"," ").replaceAll("ai ","AI "):""})),this.initData=this.templateOptionList,this.trendingBuffer=this.templateOptionList.slice(0,this.bufferSize),setTimeout(()=>{this.isImageProgress=!1},800),this.templateNames$=(0,V.x)((0,T.of)(this.initData),this.searchTemplatet$.pipe((0,C.B)(200),(0,x.F)(),(0,y.M)(()=>this.templateNamesLoading=!0),(0,I.n)(t=>{if(t)return this.mediaContentService.searchDashboardLookupInvestment(t,this.pageType).pipe((0,O.W)(()=>(this.templateNamesLoading=!0,(0,T.of)([]))),(0,y.M)(()=>this.templateNamesLoading=!0));this.templateNamesLoading=!1,this.initData=this.templateOptionList,this.ngOnInit()})))},n=>{this.isImageProgress=!1},this.pageType)}searchAndAddTag(n){let t;if(n){if(n.hasOwnProperty("trendingSearch"))this.addToRecentSearch(n),t=n;else{let a;n.target?a=n.target.value:("string"==typeof n||n instanceof String)&&(a=n),t={id:JSON.stringify(this.recentSearch.length+1),trendingSearch:a,bgImgUrl:""},this.addToRecentSearch(t)}this.searchInput.nativeElement.blur()}else this.getTrandingTemplateList(),setTimeout(()=>{this.ngselect.close(),this.ngselect.blur(),this.searchTerm=null},200);t&&t.trendingSearch&&(this.searchTerm=t.trendingSearch),sessionStorage.setItem("recentTutorialSearch",JSON.stringify(this.recentSearch)),this.ngOpenValue=!1,this.ngselect.blur(),this.clearSearch(),this.template.emit(t)}ngOnChanges(n){}searchTemplateItem(n){this.searchTerm=n.trendingSearch,this.ngOpenValue=!1,this.template.emit(n),this.ngselect.blur(),this.searchInput.nativeElement.blur()}searchCustom(n){this.searchTerm=n.target.value,this.ngOpenValue=!1,this.template.emit(this.searchTerm),this.ngselect.blur(),this.searchInput.nativeElement.blur()}addToRecentSearch(n){if(n.trendingSearch&&n.trendingSearch.trim()){for(let t=0;t<this.recentSearch.length;t++)if(n.trendingSearch===this.recentSearch[t].trendingSearch)return this.recentSearch.splice(t,1),void this.recentSearch.splice(0,0,n);this.recentSearch.length>=_.b.maxRecentSearchEntries?(this.recentSearch.splice(_.b.maxRecentSearchEntries-1,1),this.recentSearch.splice(0,0,n)):this.recentSearch.splice(0,0,n),localStorage.setItem("recentTutorialSearch",JSON.stringify(this.recentSearch))}}ngOnDestroy(){this.subscriptions.forEach(n=>n.unsubscribe())}onWindowBlur(n){this.searchInput&&setTimeout(()=>{this.searchInput.nativeElement.blur()})}}return(i=r).\u0275fac=function(n){return new(n||i)(e.rXU(N.Z),e.rXU(g.nX),e.rXU(g.Ix),e.rXU(e.sFG))},i.\u0275cmp=e.VBU({type:i,selectors:[["app-tutorial-search"]],viewQuery:function(n,t){if(1&n&&(e.GBs(Y,5),e.GBs(D,5),e.GBs(X,5)),2&n){let a;e.mGM(a=e.lsd())&&(t.templateImageSb=a.first),e.mGM(a=e.lsd())&&(t.ngselect=a.first),e.mGM(a=e.lsd())&&(t.searchInput=a.first)}},hostBindings:function(n,t){1&n&&e.bIt("blur",function(s){return t.onWindowBlur(s)},!1,e.tSv)},inputs:{isheader:"isheader",closeIconclass:"closeIconclass",searchReset:"searchReset",placeholder:"placeholder",templateType:"templateType",catId:"catId",isEditorisDrawer:"isEditorisDrawer",pageType:"pageType"},outputs:{clickTemplateImage:"clickTemplateImage",resetTemplate:"resetTemplate",template:"template"},features:[e.OA$],decls:16,vars:12,consts:[["searchInput",""],["searchselector",""],[1,"card-body","d-flex","justify-content-center","mainsearch-tutorial"],[1,"d-flex","wp-100","tutorial-search-dashboard",2,"max-width","670px"],[1,"card-body"],[1,"d-flex","wp-100","templatelisting-search"],[1,"template-menu","search-bar","wp-100",2,"max-width","670px"],[1,"input-group-append","h-100","m-0"],[1,"input-group-text","border-end-0"],["name","searchLineIcon",1,"f-20"],[1,"position-relative","d-flex","w-100","detect-zoom",2,"z-index","97"],["type","text",1,"search-input","text-semi",3,"keyup.enter","blur","click","ngModelChange","input","ngModel","placeholder"],["bindLabel","trendingSearch",1,"template-section","template-listing",3,"ngModelChange","focus","focusout","change","ngModel","dropdownPosition","items","notFoundText","isOpen","clearable","searchable"],["ng-header-tmp",""],["class","input-group-text ms-auto position-relative close-icon","style","z-index:97",3,"click",4,"ngIf"],["class","recentSection",4,"ngIf"],[1,"trandingSection"],["class","search-heading mt-1",4,"ngIf"],["class","search-heading",4,"ngIf"],["class","recentSearch text-semi","style","padding: 19px 0px; color: #606576; font-size: 16px;",4,"ngIf"],["class","d-flex pl-9 pr-9 pt-1 divider-line",4,"ngIf"],[1,"recentSection"],["class","recentSearch",4,"ngIf"],[1,"recentSearch"],[1,"search-heading","d-flex","justify-content-between","text-semi"],[1,"text-sm","text-primary","text-decoration-none","text-normal","h-40","d-inline-flex",3,"click"],["class","grey-600 d-flex align-items-center pointer p-2 text-semi",3,"click",4,"ngFor","ngForOf"],[1,"grey-600","d-flex","align-items-center","pointer","p-2","text-semi",3,"click"],[1,"search-heading","mt-1"],[1,"search-heading"],[1,"recentSearch","text-semi",2,"padding","19px 0px","color","#606576","font-size","16px"],[1,"d-flex","pl-9","pr-9","pt-1","divider-line"],[1,"search-heading","d-flex","justify-content-between"],[1,"input-group-text","ms-auto","position-relative","close-icon",2,"z-index","97",3,"click"],["name","searchclose",1,"pointer"]],template:function(n,t){if(1&n){const a=e.RV6();e.j41(0,"div",2)(1,"div",3)(2,"div",4)(3,"div",5)(4,"div",6)(5,"div",7)(6,"div",8),e.nrm(7,"pi",9),e.k0s(),e.j41(8,"div",10)(9,"

1input",11,0),e.bIt("keyup.enter",function(){return e.eBV(a),e.Njj(t.onEnterInput())})("blur",function(){return e.eBV(a),e.Njj(t.blurInput())})("click",function(l){return e.eBV(a),e.Njj(t.clickInput(l))}),e.mxI("ngModelChange",function(l){return e.eBV(a),e.DH7(t.searchTerm,l)||(t.searchTerm=l),e.Njj(l)}),e.bIt("input",function(l){return e.eBV(a),e.Njj(t.change(l))}),e.k0s(),e.j41(11,"ng-select",12,1),e.nI1(13,"async"),e.mxI("ngModelChange",function(l){return e.eBV(a),e.DH7(t.searchText,l)||(t.searchText=l),e.Njj(l)}),e.bIt("focus",function(){return e.eBV(a),e.Njj(t.ngOpen())})("focusout",function(){return e.eBV(a),e.Njj(t.ngClose())})("change",function(l){return e.eBV(a),e.Njj(t.searchAndAddTag(l))}),e.DNE(14,q,7,6,"ng-template",13),e.k0s()(),e.DNE(15,ee,2,0,"div",14),e.k0s()()()()()()}2&n&&(e.R7$(9),e.R50("ngModel",t.searchTerm),e.Y8G("placeholder",t.placeholderTxt),e.R7$(2),e.R50("ngModel",t.searchText),e.Y8G("dropdownPosition","bottom")("items",e.bMT(13,10,t.templateNames$))("notFoundText","")("isOpen",t.ngOpenValue)("clearable",!1)("searchable",!0),e.R7$(4),e.Y8G("ngIf",t.searchTerm&&t.searchTerm.length>0))},dependencies:[p.Sq,p.bT,m.me,m.BC,m.vS,u.vr,u.Uc,h.b,p.Jj],styles:[".input-group-text[_ngcontent-%COMP%]{background:transparent!important;position:absolute;z-index:1001;padding:.45rem .75rem;height:48px;border-radius:12px 0 0 12px;border:0px solid #e9e9eb}.template-menu[_ngcontent-%COMP%]   .ng-dropdown-panel.ng-select-bottom[_ngcontent-%COMP%]{margin-top:10px!important;border-top-right-radius:4px!important;border-top-left-radius:4px!important}.template-menu[_ngcontent-%COMP%]   .ng-dropdown-panel[_ngcontent-%COMP%]   .ng-dropdown-header[_ngcontent-%COMP%]{border-bottom:none!important}.recentSearch[_ngcontent-%COMP%]{overflow:hidden;overflow-y:auto}.recentSearch[_ngcontent-%COMP%]   .optionsList[_ngcontent-%COMP%]{display:block}.recentSearch[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{margin:0;padding:0}.recentSearch[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{list-style:none;list-style:22px;padding:0;border-radius:8px;height:40px;font-size:13px;text-transform:capitalize}.recentSearch[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover{background:#626adf0d;color:#626adf}@media (max-width: 576px){.recentSearch[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover{background:transparent!important;color:unset!important}}.ng-select.ng-select-single[_ngcontent-%COMP%]   .ng-select-container[_ngcontent-%COMP%]   .ng-value-container[_ngcontent-%COMP%], .ng-select.ng-select-single[_ngcontent-%COMP%]   .ng-select-container[_ngcontent-%COMP%]   .ng-value-container[_ngcontent-%COMP%]   .ng-value[_ngcontent-%COMP%]{margin-left:40px!important}.ng-arrow-wrapper[_ngcontent-%COMP%]{display:none!important}.search-heading[_ngcontent-%COMP%]{height:40px;border-radius:12px;padding:0 12px;margin:0 auto;font-size:13px;font-weight:600;color:#b0b3bf;display:flex;align-items:center}.search-heading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{margin-right:-12px}.search-heading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{font-size:12px;font-weight:400;color:#626adf!important;padding:0 12px;align-items:center;line-height:normal;border-radius:12px;cursor:pointer;text-transform:none}.search-heading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover{background:#626adf0d}.template-section[_ngcontent-%COMP%]   .ng-dropdown-panel.ng-select-bottom[_ngcontent-%COMP%]{border-radius:12px;margin-top:4px;min-height:400px;max-height:400px;overflow:hidden;overflow-y:auto}.search-icon-bg[_ngcontent-%COMP%]{background:transparent!important;border:0px solid #fff!important}.search-input[_ngcontent-%COMP%]{z-index:1002;width:100%;padding:0 0 0 48px;user-select:auto!important;-webkit-user-select:auto!important}.search-input[_ngcontent-%COMP%]::placeholder{color:#b0b3bf;font-size:14px;font-weight:400;opacity:1}.template-section[_ngcontent-%COMP%]{width:100%;border-radius:12px!important;z-index:1000}.search-input[_ngcontent-%COMP%], .template-section[_ngcontent-%COMP%]{position:absolute;height:48px!important;border:none;background:transparent;border-radius:12px}.search-input[_ngcontent-%COMP%]:focus{outline:none;background:transparent}

1.search-bar[_ngcontent-%COMP%]{height:48px;transition:max-width .15s ease-in-out}.search-width[_ngcontent-%COMP%]{max-width:100%!important;transition:max-width .15s ease-in-out}.divider-line[_ngcontent-%COMP%]   hr[_ngcontent-%COMP%]{height:1px;background:#eeedf3;margin:0;padding:0;border:0px!important;width:100%}"]}),r})();const ne=i=>[i],ie=i=>({"d-flex justify-content-center":i}),oe=(i,r,o,n)=>({"area-inner":i,"position-fixed w-100 pt-10":r,"pt-10":o,"mt-13":n}),ae=i=>({"mx-auto pb-0 pt-0":i}),re=i=>({tabBtnMobile:i}),se=i=>({tabBtnActive:i}),le=i=>({"mw-100":i});function ce(i,r){if(1&i){const o=e.RV6();e.j41(0,"li",25)(1,"a",26),e.bIt("click",function(){e.eBV(o);const t=e.XpG().$implicit,a=e.XpG(2);return e.Njj(a.onTabSelect(t))}),e.j41(2,"li",27),e.EFF(3),e.k0s()()()}if(2&i){const o=e.XpG().$implicit,n=e.XpG(2);e.R7$(2),e.Y8G("ngClass",e.eq3(2,se,n.type==o.type)),e.R7$(),e.JRh(o.text)}}function pe(i,r){if(1&i&&(e.qex(0),e.DNE(1,ce,4,4,"li",24),e.bVm()),2&i){const o=r.$implicit;e.R7$(),e.Y8G("ngIf",null==o.metadata?null:o.metadata.active)}}function de(i,r){1&i&&e.nrm(0,"hr")}function ge(i,r){1&i&&e.nrm(0,"hr")}function he(i,r){if(1&i&&(e.j41(0,"div",31)(1,"a",32)(2,"div",33),e.EFF(3),e.k0s(),e.j41(4,"div",34),e.EFF(5),e.k0s()()()),2&i){const o=r.$implicit,n=e.XpG(3);e.Y8G("ngClass",e.eq3(6,le,n.env.isMobileView)),e.R7$(),e.Y8G("href",n.getToolUrl(o),e.B4B)("ngClass",n.env.isMobileView?"p-toolInfoBoxMobile":"p-ltrt-40 h-300"),e.R7$(2),e.SpI(" ",null==o||null==o.metadata?null:o.metadata.toolDesc," "),e.R7$(),e.Y8G("ngClass",n.env.isMobileView?"text-28":"text-40"),e.R7$(),e.SpI(" ",null==o?null:o.displayName," ")}}function me(i,r){if(1&i){const o=e.RV6();e.j41(0,"div",35)(1,"button",36),e.bIt("click",function(){e.eBV(o);const t=e.XpG(3);return e.Njj(t.loadMore())}),e.EFF(2,"Load More Tutorials"),e.k0s()()}if(2&i){const o=e.XpG(3);e.R7$(),e.Y8G("disabled",!o.isLoaded)}}function ue(i,r){if(1&i&&(e.j41(0,"div",28),e.DNE(1,he,6,8,"div",29)(2,me,3,1,"div",30),e.k0s()),2&i){const o=e.XpG(2);e.R7$(),e.Y8G("ngForOf",o.tutorialList),e.R7$(),e.Y8G("ngIf",!o.isProductsEnd&&o.tutorialList.length>0)}}function fe(i,r){if(1&i){const o=e.RV6();e.j41(0,"div")(1,"div",2)(2,"div",3)(3,"a",4),e.EFF(4,"Home"),e.k0s(),e.nrm(5,"pi",5),e.j41(6,"span",6),e.EFF(7,"Tutorial"),e.k0s()(),e.j41(8,"div",7)(9,"div",8),e.EFF(10),e.k0s(),e.j41(11,"p",9),e.EFF(12),e.k0s(),e.j41(13,"div",10)(14,"app-tutorial-search",11),e.bIt("template",function(t){e.eBV(o);const a=e.XpG();return e.Njj(a.template(t))}),e.k0s()()()(),e.j41(15,"div",12)(16,"div",13)(17,"div",14)(18,"ul",15),e.DNE(19,pe,2,1,"ng-container",16),e.k0s(),e.DNE(20,de,1,0,"hr",1),e.k0s(),e.DNE(21,ge,1,0,"hr",1),e.k0s()(),e.j41(22,"div",17),e.DNE(23,ue,3,2,"div",18),e.k0s(),e.j41(24,"div",19)(25,"div",20),e.EFF(26,"Get started with LightX"),e.k0s(),e.j41(27,"div",21),e.EFF(28,"Get access to dozens of professional AI Tools"),e.k0s(),e.j41(29,"div",22)(30,"button",23),e.bIt("click",function(){e.eBV(o);const t=e.XpG();return e.Njj(t.startCreating())}),e.EFF(31,"Start Creating"),e.k0s()()()()}if(2&i){const o=e.XpG();e.R7$(3),e.Y8G("routerLink",e.eq3(16,ne,o.homeURL)),e.R7$(7),e.SpI(" ",o.storyPage.sections[0].title,""),e.R7$(2),e.SpI(" ",o.storyPage.sections[0].subTitle,""),e.R7$(2),e.Y8G("isheader",!0)("searchReset",o.searchReset)("templateType",o.templateTypeForSearch)("placeholder",o.searchPlaceholder)("pageType",o.pageType),e.R7$(),e.Y8G("ngClass",e.eq3(18,ie,o.windowScrolled)),e.R7$(),e.Y8G("ngClass",e.ziG(20,oe,!o.env.isMobileView,o.windowScrolled,o.env.isMobileView,!o.env.isMobileView&&!o.windowScrolled)),e.R7$(),e.Y8G("ngClass",e.eq3(25,ae,o.windowScrolled)),e.R7$(),e.Y8G("ngClass",e.eq3(27,re,o.env.isMobileView)),e.R7$(),e.Y8G("ngForOf",o.storyPage.sections[0].links),e.R7$(),e.Y8G("ngIf",o.windowScrolled||!o.env.isMobileView),e.R7$(),e.Y8G("ngIf",!o.windowScrolled||o.env.isMobileView),e.R7$(2),e.Y8G("ngIf",o.isLoaded)}}function _e(i,r){1&i&&(e.qex(0),e.nrm(1,"div",37),e.j41(2,"div",38)(3,"div",39),e.nrm(4,"div",40),e.k0s(),e.j41(5,"div",39),e.nrm(6,"div",40),e.k0s(),e.j41(7,"div",39),e.nrm(8,"div",40),e.k0s(),e.j41(9,"div",39),e.nrm(10,"div",40),e.k0s()(),e.bVm())}let be=(()=>{var i;

1class r{constructor(n,t,a,s,l,d,G,Ue){this.document=n,this.env=t,this.alltoolsservice=a,this.storyPageService=s,this.loginService=l,this.authService=d,this.router=G,this.seoService=Ue,this.tutorialListing=[],this.homeURL="/",this.searchPlaceholder="",this.templateTypeForSearch=F.If.NONE,this.isLoaded=!1,this.tutorialList=[],this.pageType="tutorial",this.type="tutorial-ai-editing",this.pageNumber=0,this.rowsCount=10,this.isProductsEnd=!1,this.toolType="tutorial-category",this.isscroll=!1}ngOnInit(){this.getTutorialContent()}updatetemplateList(n){this.searchPlaceholder="Search a tutorial"}template(n){n&&n.type&&n.subType&&this.goToSinglePage(n)}getTutorialContent(){this.storyPageService.getStoryPageContent("tutorial-list-home","tutorial-list-home","tutorial-list-home",n=>{if(this.storyPage=n.body.storyPage,this.storyPage){this.seoService.updatePageTitle(this.storyPage.pageTitle),this.seoService.updatePageMeta("description",this.storyPage.pageDescription);const t=this.storyPage?.sections.filter(a=>a.type==this.toolType);this.storyPage.sections=t&&t.length>0?t:[],this.storyPage.sections.length>0&&(this.type=this.storyPage.sections[0].links[0].type,this.tutorialDetailsList(this.pageType,this.type))}this.isLoaded=!0},n=>{n&&1e3===n.statusCode&&this.router.navigate(["/404"])})}tutorialDetailsList(n,t){this.isLoaded=!1,this.alltoolsservice.getTutorialStoryList({format:0,pageNumber:this.pageNumber,rows:this.rowsCount,type:t,pageType:n},s=>{if(s&&s.storyPages){let l=s.storyPages;l&&l.length>0?(this.tutorialList=this.tutorialList.concat(l),this.isProductsEnd=l.length<this.rowsCount):this.isProductsEnd=!0}this.isLoaded=!0},s=>{this.isLoaded=!0})}loadMore(){this.pageNumber=this.pageNumber+1,this.tutorialDetailsList(this.pageType,this.type)}startCreating(){if(this.env.isMobileView)return this.env.openPlayStoreUrl(),!1;this.user=this.authService.currentUser(),this.user?this.router.navigate(["/user-dashboard"]):this.loginService.openLoginDialog(n=>{this.user=this.authService.currentUser(),this.user&&this.router.navigate([_.b.AFTER_LOGIN_REDIRATION_URI])})}resetList(){this.tutorialList=[],this.pageNumber=0,this.isProductsEnd=!1,this.scrollToSection("contentDiv")}scrollToSection(n){document.getElementById(n)&&window.scrollTo({top:400,behavior:"smooth"})}onTabSelect(n){this.type=n.type,this.resetList(),this.tutorialDetailsList(this.pageType,this.type)}onWindowScroll(n){n>430?(this.windowScrolled=!0,this.document.getElementById("layout-wrapper").classList.add("mega-opp-full")):this.windowScrolled=!1}windowScroll(n){let t=n.target||n.currentTarget;if(t.documentElement){let a=Number(t.documentElement.scrollTop);this.onWindowScroll(a)}}goToSinglePage(n){window.open("./tutorial/"+n.type+"/"+n.subType,"_blank")}getToolUrl(n){return"./tutorial/"+n.type+"/"+n.subType}}return(i=r).\u0275fac=function(n){return new(n||i)(e.rXU(p.qQ),e.rXU(b.L),e.rXU(P.u),e.rXU(v.K),e.rXU(L.H),e.rXU($.u),e.rXU(g.Ix),e.rXU(M.F))},i.\u0275cmp=e.VBU({type:i,selectors:[["tutorial"]],hostBindings:function(n,t){1&n&&e.bIt("scroll",function(s){return t.windowScroll(s)},!1,e.tSv)},decls:3,vars:2,consts:[[2,"margin-top","73px","min-height","500px"],[4,"ngIf"],[1,"tutorialTopBanner"],[1,"lightThemeBreadcrumb","text-14"],[3,"routerLink"],["name","lightbreadcrumbarrow",1,"ms-2","me-2"],[1,"text-white"],[1,"text-center","mt-4","p-ltrt-100","herobanner-text"],[1,"text-bold","text-white","text-48","lh-125"],[1,"text-white","lh-160","mt-3","text-xxl"],[1,"mx-auto","me-lg-0","mt-60","pb-60"],[3,"template","isheader","searchReset","templateType","placeholder","pageType"],[3,"ngClass"],["id","animateDiv",1,"mx-auto","pb-0","pt-0","animateDiv",3,"ngClass"],["Class","tabBtnBox overflow-auto new-scroll-behave",3,"ngClass"],[1,"nav","nav-pills",3,"ngClass"],[4,"ngFor","ngForOf"],[1,"area-inner","mx-auto","pt-0",2,"min-height","400px"],["id","contentDiv","class","row g-0 justify-content-between toolInfoContainer mt-40",4,"ngIf"],[1,"tutorialBottomBanner","text-center","padding-top-bottom100"],[1,"text-40","text-bold","lh-125"],[1,"text-lg","lh-160","mt-8"],[1,"mt-40"],[1,"btn","btn-primary","btn-h48",3,"click"],["class","d-flex",4,"ngIf"],[1,"d-flex"],["data-toggle","tab",1,"",3,"click"],[1,"nav-item","tabBtn","text-semi",3,"ngClass"],["

1id","contentDiv",1,"row","g-0","justify-content-between","toolInfoContainer","mt-40"],["class","col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12","style","max-width: 48.5%;",3,"ngClass",4,"ngFor","ngForOf"],["class","col-12 d-flex justify-content-center",4,"ngIf"],[1,"col-xl-6","col-lg-6","col-md-6","col-sm-12","col-12",2,"max-width","48.5%",3,"ngClass"],["target","_blank",1,"toolInfoBox","mt-lg-0","d-flex","flex-column","justify-content-center",3,"href","ngClass"],[1,"text-14","text-semi","lh-160","text-capitalize","toolName"],[1,"text-bold","lh-125","mt-2","toolInfo",3,"ngClass"],[1,"col-12","d-flex","justify-content-center"],["_ngcontent-prm-c104","","type","submit",1,"btn-all","btn-outline-primary","btn-h48","text-lg","ps-5","pe-5",3,"click","disabled"],[2,"height","300px","background","rgba(98, 106, 223, 0.05)"],[1,"row","g-0","justify-content-between","toolInfoContainer","mt-40","area-inner","mx-auto"],[1,"col-xl-6","col-lg-6","col-md-6","col-sm-12","col-12",2,"max-width","563px"],[1,"border-radius-lg",2,"height","300px","background","rgba(98, 106, 223, 0.05)"]],template:function(n,t){1&n&&(e.j41(0,"div",0),e.DNE(1,fe,32,29,"div",1)(2,_e,11,0,"ng-container",1),e.k0s()),2&n&&(e.R7$(),e.Y8G("ngIf",t.storyPage&&t.storyPage.sections&&t.storyPage.sections.length>0),e.R7$(),e.Y8G("ngIf",!t.isLoaded))},dependencies:[p.YU,p.Sq,p.bT,g.Wk,h.b,te],styles:[".tutorialTopBanner[_ngcontent-%COMP%]{background:linear-gradient(90deg,#9956f0,#b381f1);min-height:330px}.lightThemeBreadcrumb[_ngcontent-%COMP%]{padding:24px 40px}@media (max-width: 576px){.lightThemeBreadcrumb[_ngcontent-%COMP%]{padding:24px 16px}}.lightThemeBreadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#fffc}@media (min-width: 577px){.lightThemeBreadcrumb[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover{color:#fff;text-decoration:underline}}.pb-60[_ngcontent-%COMP%]{padding-bottom:60px}.p-ltrt-100[_ngcontent-%COMP%]{padding:0 100px}@media (max-width: 576px){.p-ltrt-100[_ngcontent-%COMP%]{padding:0 1rem}}.toolInfoContainer[_ngcontent-%COMP%]{row-gap:40px}@media (max-width: 576px){.toolInfoContainer[_ngcontent-%COMP%]{row-gap:16px}}.toolInfoBox[_ngcontent-%COMP%]{border:1px solid #E2E3E9;border-radius:16px;cursor:pointer;word-wrap:break-word}.toolInfoBox[_ngcontent-%COMP%]   .toolInfo[_ngcontent-%COMP%]{color:#272b34!important}.toolInfoBox[_ngcontent-%COMP%]   .toolName[_ngcontent-%COMP%]{color:#959aa7}@media (min-width: 577px){.toolInfoBox[_ngcontent-%COMP%]:hover{background:#626adf0d}.toolInfoBox[_ngcontent-%COMP%]:hover   .toolInfo[_ngcontent-%COMP%]{color:#626adf!important}.toolInfoBox[_ngcontent-%COMP%]:hover   .toolName[_ngcontent-%COMP%]{color:#272b34}}.h-300[_ngcontent-%COMP%]{height:300px}.p-ltrt-40[_ngcontent-%COMP%]{padding:0 39px}.p-toolInfoBoxMobile[_ngcontent-%COMP%]{padding:39px 19px}.tutorialBottomBanner[_ngcontent-%COMP%]{background:linear-gradient(90deg,#f3deff -4%,#e0e2ff)}.tabBtn[_ngcontent-%COMP%]{display:flex;height:60px;padding:0 40px;flex-direction:column;justify-content:center;align-items:center;color:#272b34;font-size:16px;cursor:pointer;white-space:nowrap;border-bottom:4px solid transparent}@media (max-width: 576px){.tabBtn[_ngcontent-%COMP%]{padding:0 20px}}.tabBtnActive[_ngcontent-%COMP%]{display:flex;height:60px;flex-direction:column;justify-content:center;align-items:center;font-size:16px;color:#626adf;border-bottom:4px solid #626ADF}hr[_ngcontent-%COMP%]{border:1px solid #C9CAD4;margin-top:-2px!important;margin:0}.new-scroll-behave[_ngcontent-%COMP%]{-ms-overflow-style:none;scrollbar-width:none}.searchFixedPosition[_ngcontent-%COMP%]{top:73px;background:#f8f9f9;margin-top:0!important;left:0;padding:16px 16px 0;z-index:1}.tabBtnMobile[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:first-child{padding-left:16px}.tabBtnMobile[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:last-child{padding-right:16px}"]}),r})();var ve=c(67091),Te=c(25939),f=c(33391),j=c(8708);const Ce=["videoPlayer"];function xe(i,r){if(1&i){const o=e.RV6();e.j41(0,"button",4),e.bIt("click",function(){e.eBV(o);const t=e.XpG();return e.Njj(t.activeModal.close())}),e.nrm(1,"pi",5),e.k0s()}}let ye=(()=>{var i;

1class r{constructor(n,t){this.activeModal=n,this.document=t,this.videoId="",this.closevedio=new e.bkB,this.isLoaded=!1}ngOnInit(){if(!this.isLoaded){const n=this.document.createElement("script");n.setAttribute("id","youtube-script"),this.document.getElementById("youtube-script")||(n.src="https://www.youtube.com/iframe_api",this.document.body.appendChild(n)),this.isLoaded=!0}}}return(i=r).\u0275fac=function(n){return new(n||i)(e.rXU(f.Lw),e.rXU(p.qQ))},i.\u0275cmp=e.VBU({type:i,selectors:[["video-preview"]],viewQuery:function(n,t){if(1&n&&e.GBs(Ce,5),2&n){let a;e.mGM(a=e.lsd())&&(t.videoplayer=a.first)}},inputs:{videoId:"videoId"},outputs:{closevedio:"closevedio"},decls:6,vars:3,consts:[[1,"modal-header","border-0"],["type","button","aria-hidden","close","class","close","style","margin-top: 16px;",3,"click",4,"ngIf"],[1,"text-center","youtubePlayer"],[3,"videoId","width"],["type","button","aria-hidden","close",1,"close",2,"margin-top","16px",3,"click"],["name","close",1,"f-30"]],template:function(n,t){1&n&&(e.j41(0,"div")(1,"div",0),e.DNE(2,xe,2,0,"button",1),e.k0s(),e.j41(3,"div")(4,"div",2),e.nrm(5,"youtube-player",3),e.k0s()()()),2&n&&(e.R7$(2),e.Y8G("ngIf",t.isLoaded),e.R7$(3),e.Y8G("videoId",t.videoId)("width",624))},dependencies:[p.bT,h.b,j.x9],styles:[".video[_ngcontent-%COMP%]{margin:100px}.modal-content[_ngcontent-%COMP%]{background:transparent!important}"]}),r})();var we=c(345);function Se(i,r){if(1&i&&(e.j41(0,"h3",10),e.EFF(1),e.k0s()),2&i){const o=e.XpG();e.Y8G("ngClass",o.env.isMobileView?"text-28":"text-32"),e.R7$(),e.JRh(null==o.area?null:o.area.title)}}function Pe(i,r){if(1&i&&e.nrm(0,"span",11),2&i){const o=e.XpG();e.Y8G("ngClass",o.env.isMobileView?"text-lg":"text-xxl")("innerHTML",null==o.area?null:o.area.desc1,e.npT)}}function Me(i,r){if(1&i){const o=e.RV6();e.j41(0,"div",17),e.bIt("click",function(){e.eBV(o);const t=e.XpG(2);return e.Njj(t.vedioPreview(null==t.area?null:t.area.img1))}),e.j41(1,"a",18),e.nrm(2,"pi",19),e.k0s()()}}function Ie(i,r){if(1&i&&(e.j41(0,"div",12)(1,"div",13)(2,"picture",14),e.nrm(3,"img",15),e.DNE(4,Me,3,0,"div",16),e.k0s()()()),2&i){const o=e.XpG();e.R7$(),e.Y8G("ngClass",o.env.isMobileView?"border-radius-12":"border-radius-20"),e.R7$(2),e.FS9("src",(null==o.area?null:o.area.img2)||"https://static.lightxeditor.com/assets/images/sample-details.png",e.B4B),e.R7$(),e.Y8G("ngIf",null==o.area?null:o.area.img2)}}function Oe(i,r){if(1&i&&(e.j41(0,"h4",20),e.EFF(1),e.k0s()),2&i){const o=e.XpG();e.Y8G("ngClass",o.env.isMobileView?"text-xxl":"text-24"),e.R7$(),e.JRh(null==o.area?null:o.area.desc2)}}function je(i,r){if(1&i&&(e.j41(0,"div",21),e.nrm(1,"div",22),e.k0s()),2&i){const o=e.XpG();e.R7$(),e.Y8G("innerHTML",null==o.area||null==o.area.metadata?null:o.area.metadata.steps,e.npT)}}function ke(i,r){if(1&i&&(e.j41(0,"div",23),e.nrm(1,"span",24),e.k0s()),2&i){const o=e.XpG();e.R7$(),e.Y8G("ngClass",o.env.isMobileView?"text-lg":"text-xxl")("innerHTML",null==o.area||null==o.area.metadata?null:o.area.metadata.note,e.npT)}}let Re=(()=>{var i;class r{constructor(n,t,a,s){this.sanitizer=n,this.storyPageService=t,this.modalService=a,this.env=s}ngOnInit(){this.area.metadata.steps=this.decodeUriAndTrustHtml(this.area?.metadata?.steps),this.area.metadata.note=this.decodeUriAndTrustHtml(this.area?.metadata?.note)}getYouTubeVideoId(n){const a=n.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);return a&&11===a[1].length?a[1]:null}vedioPreview(n){const t=this.getYouTubeVideoId(n);this.openVedio(t)}openVedio(n){if(n){const t=this.modalService.open(ye,{centered:!0,size:"xl",backdropClass:"bg-dark-blur",windowClass:"youtubevideo"});t.componentInstance.videoId=n,t.componentInstance.tabName="",t.result.then(a=>{}).catch(a=>{})}else console.log("no vedio url found")}decodeUriAndTrustHtml(n){const t=decodeURI(n);return this.sanitizer.bypassSecurityTrustHtml(t)}getText(n){return n.startsWith("\n")}handleLink(n){const t=n.links[0].url,a=n.type;this.env.isMobileView?window.location.href=t:"steps-iphone"==a?window.open("https://apps.apple.com/us/app/lightx-photo-editor-retouch/id1400740705","_blank"):"steps-android"==a?window.open("https://play.google.com/store/apps/details?id=com.lightx&hl=en","_blank"):window.open(t,"_blank")}}return(i=r).\u0275fac=function(n){return new(n||i)(e.rXU(we.up),e.rXU(v.K),e.rXU(f.Bq),e.rXU(b.L))},i.\u0275cmp=e.VBU({type:i,selectors:[["story-how-to"]],inputs:{area:"area"},decls:11,vars:8,consts:[[1,"d-flex","align-items-center","justify-content-start","flex-column",3,"ngClass"],[1,"d-flex","align-items-center","justify-content-start","w-100","flex-column","mb-13"],["class","grey-800 text-bold lh-125 mb-0 w-100",3,"ngClass",4,"ngIf"],["class","grey-800 lh-160 w-100 mt-10",3,"ngClass","innerHTML",4,"ngIf"],["class","d-flex align-items-center justify-content-start mb-13 mt-0 w-100",4,"ngIf"],["class","grey-800 text-semi lh-125 mb-13 w-100",3,"ngClass",4,"ngIf"],["class","d-flex align-items-center justify-content-start w-100 order-list-items mb-13 w-100",4,"ngIf"],["class","d-flex align-items-center justify-content-start w-100 note-column mb-13",4,"ngIf"],[1,"d-flex","align-items-center","justify-content-start","w-100","cta-section","w-100"],["target","_blank",1,"btn","btn-primary","btn-h48","text-lg","d-inline-flex","align-items-center","justify-content-center",2,"text-decoration","none",3,"click"],[1,"grey-800","text-bold","lh-125","mb-0","w-100",3,"ngClass"],[1,"grey-800","lh-160","w-100","mt-10",3,"ngClass","innerHTML"],[1,"d-flex","align-items-center","justify-content-start","mb-13","mt-0","w-100"],[1,"d-flex","align-items-center","justify-content-center","image-preview-box","overflow-hidden","w-100",3,"ngClass"],[1,"position-relative","video-preview","pointer","overflow-hidden"],[3,"src"],["class","btn-play position-absolute h-100 w-100 d-flex align-items-center justify-content-center",3,"click",4,"ngIf"],[1,"btn-play","position-absolute","h-100","w-100","d-flex","align-items-center","justify-content-center",3,"click"],[1,"pointer"],["name","playtutorialvideo",1,"f-120"],[1,"grey-800","text-semi","lh-125","mb-13","w-100",3,"ngClass"],[1,"d-flex","align-items-center","justify-content-start","w-100","order-list-items","mb-13","w-100"],[3,"innerHTML"],[1,"d-flex","align-items-center","justify-content-start","w-100","note-column","mb-13"],[1,"grey-800","lh-160","w-100",3,"ngClass","innerHTML"]],template:function(n,t){1&n&&(e.j41(0,"div",0)(1,"div",1),e.DNE(2,Se,2,2,"h3",2)(3,Pe,1,2,"span",3),e.k0s(),e.DNE(4,Ie,5,3,"div",4)(5,Oe,2,2,"h4",5)(6,je,2,1,"div",6)(7,ke,2,2,"div",7),e.j41(8,"div",8)(9,"a",9),e.bIt("click",function(){return t.handleLink(t.area)}),e.EFF(10),e.k0s()()()),2&n&&(e.Y8G("ngClass",t.env.isMobileView?"mb-14":"mb-80"),e.R7$(2),e.Y8G("ngIf",(null==t.area?null:t.area.title)&&!t.getText(null==t.area?null:t.area.title)),e.R7$(),e.Y8G("ngIf",(null==t.area?null:t.area.desc1)&&!t.getText(null==t.area?null:t.area.desc1)),e.R7$(),e.Y8G("ngIf",null==t.area?null:t.area.img1),e.R7$(),e.Y8G("ngIf",(null==t.area?null:t.area.desc2)&&!t.getText(null==t.area?null:t.area.desc2)),e.R7$(),e.Y8G("ngIf",null==t.area||null==t.area.metadata?null:t.area.metadata.steps),e.R7$(),e.Y8G("ngIf",null==t.area||null==t.area.metadata?null:t.area.metadata.note),e.R7$(3),e.JRh(t.area.links[0].text))},dependencies:[p.YU,p.bT,h.b],styles:[".tutorialTopBanner[_ngcontent-%COMP%]{background:linear-gradient(90deg,#9956f0,#b381f1)}.detailed-left[_ngcontent-%COMP%]{padding:40px 60px 0 0}.detailed-left[_ngcontent-%COMP%]   .mb-80[_ngcontent-%COMP%]{margin-bottom:80px}.detailed-left[_ngcontent-%COMP%]   .video-preview[_ngcontent-%COMP%]   .btn-play[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .detailed-left[_ngcontent-%COMP%]   .video-preview[_ngcontent-%COMP%]   .btn-play[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{height:120px;width:120px}.mb-80[_ngcontent-%COMP%]{margin-bottom:80px}.image-preview-box[_ngcontent-%COMP%]{background:#efeef2;max-height:540px;position:relative!important;min-height:540px}.image-preview-box[_ngcontent-%COMP%]   img[_ngcontent-%COMP%]{width:100%;height:100%;object-fit:contain!important;max-height:540px}"]}),r})();const Ge=i=>[i];function Fe(i,r){if(1&i&&(e.j41(0,"h3",22),e.EFF(1),e.k0s()),2&i){const o=e.XpG();e.Y8G("ngClass",o.env.isMobileView?"text-28":"text-32"),e.R7$(),e.JRh(null==o.heading?null:o.heading.desc1)}}function Le(i,r){if(1&i&&e.nrm(0,"span",23),2&i){const o=e.XpG();e.Y8G("ngClass",o.env.isMobileView?"text-lg":"text-xxl")("innerHTML",null==o.heading?null:o.heading.subTitle,e.

1npT)}}function $e(i,r){if(1&i&&e.nrm(0,"story-how-to",26),2&i){const o=e.XpG().$implicit;e.Y8G("area",o)("id",o.type)}}function Be(i,r){if(1&i&&e.nrm(0,"story-how-to",26),2&i){const o=e.XpG().$implicit;e.Y8G("area",o)("id",o.type)}}function Ve(i,r){if(1&i&&e.nrm(0,"story-how-to",26),2&i){const o=e.XpG().$implicit;e.Y8G("area",o)("id",o.type)}}function Ee(i,r){if(1&i&&(e.qex(0),e.j41(1,"div",24),e.DNE(2,$e,1,2,"story-how-to",25)(3,Be,1,2,"story-how-to",25)(4,Ve,1,2,"story-how-to",25),e.k0s(),e.bVm()),2&i){const o=r.$implicit;e.R7$(),e.Y8G("ngSwitch",o.type),e.R7$(),e.Y8G("ngSwitchCase","steps-web"),e.R7$(),e.Y8G("ngSwitchCase","steps-android"),e.R7$(),e.Y8G("ngSwitchCase","steps-iphone")}}function Ne(i,r){if(1&i){const o=e.RV6();e.j41(0,"div",27)(1,"ng-image-slider",28,0),e.bIt("imageClick",function(t){e.eBV(o);const a=e.XpG();return e.Njj(a.openTool(t))}),e.k0s()()}if(2&i){const o=e.XpG();e.R7$(),e.Y8G("images",o.selectedProductObj.imageObjects)("sliderType","tutorial")("imageSize",o.selectedProductObj.imageSizel)("imagePopup",!1)("footerShow",!0)("projectNameShow",!0)("recentProject",!0)("isSubscribed","false")}}let k=(()=>{var i;class r{constructor(n,t,a,s,l){this.storyPageService=n,this.route=t,this.env=a,this.alltoolsservice=s,this.seoService=l,this.currentSection="heading",this.slug="",this.homeURL="/",this.type="",this.tutorialImages=[],this.screenWidth=0,this.route.params.subscribe(d=>{this.getStoryPage(d.type,d.subType),this.tutorialSinglePageList(d.type,d.subType)})}openTool(n){let t=n?.img?.item;window.open("./tutorial/"+t.type+"/"+t.subType,"_blank")}tutorialSinglePageList(n,t){this.alltoolsservice.getTutorialSinglePageList({type:n,pageType:"tutorial"},s=>

1{if(s&&s.storyPages){let l=s.storyPages;l&&l.length>0&&(this.selectedProductObj=this.getFormattedProduct(l)),setTimeout(()=>{this.scrollToDevice()},400)}},s=>{})}ngOnInit(){}getFormattedProduct(n){this.screenWidth=window.innerWidth,window,this.screenWidth=window.innerWidth>=420?this.screenWidth/2:342;let a=[];for(let d=0;d<n.length;d++)a.push({image:n[d].url,title:n[d].text,item:n[d],format:2,imageSizel:{width:this.screenWidth,height:264,space:0}});return{imageSizel:{width:this.screenWidth,height:264,space:0},imageObjects:a}}onResize(n){this.screenWidth=n.target.innerWidth,this.getFormattedProduct(this.selectedProductObj)}ngAfterViewInit(){}getStoryPage(n,t){this.storyPageService.getStoryPageContent(n,"tutorial",t,a=>{a.body.storyPage&&(this.storyPage=a.body.storyPage,this.seoService.updatePageTitle(this.storyPage.pageTitle),this.seoService.updatePageMeta("description",this.storyPage.pageDescription),this.storyPage?.sections&&this.storyPage?.sections.length&&(this.heading=this.storyPage?.sections[0]))},a=>{})}scrollToSection(n){const t=document.getElementById(n);if(t){const s=t.getBoundingClientRect().top+window.scrollY-154;window.scrollTo({top:s,behavior:"smooth"})}}onScroll(){const n=["heading","steps-web","steps-android","steps-iphone"],t=window.scrollY+174;for(let a of n){const s=document.getElementById(a);if(s){const l=s.offsetTop;if(t>=l&&t<l+s.offsetHeight){this.currentSection=a;break}}}}scrollToDevice(){let n=(0,ve.o0)();"iOS"===n.os&&this.env.isMobileView?this.scrollToSection("steps-iphone"):"Android OS"===n.os?this.scrollToSection("steps-android"):this.onScroll()}}return(i=r).\u0275fac=function(n){return new(n||i)(e.rXU(v.K),e.rXU(g.nX),e.rXU(b.L),e.rXU(P.u),e.rXU(M.F))},i.\u0275cmp=e.VBU({type:i,selectors:[["story-page"]],hostBindings:function(n,t){1&n&&e.bIt("resize",function(s){return t.onResize(s)},!1,e.tSv)("scroll",function(){return t.onScroll()},!1,e.tSv)},inputs:{type:"type"},decls:36,vars:26,consts:[["nav",""],[1,"container-fluid","p-0",2,"margin-top","73px","min-height","500px"],[1,"darkThemeBreadcrumb","text-14","pt-9","pb-9","d-flex","align-items-center",2,"height","72px",3,"ngClass"],[3,"routerLink"],["name","breadcrumbarrow",1,"ms-2","me-2"],[1,"text-primary"],["id","heading",1,"area-inner","pad-md","p-ltrt",3,"ngClass"],[1,"grey-800","text-bold","lh-125",2,"letter-spacing","-1px",3,"ngClass"],[1,"row","g-0","area-inner","pad-md","p-ltrt","pt-0","pb-0",2,"padding-right","40px",3,"ngClass"],[1,"col-xl-10","col-lg-10","col-md-10",3,"ngClass"],[1,"d-flex","align-items-center","justify-content-start","flex-column","w-100","detailed-left",3,"ngClass"],[1,"d-flex","align-items-center","justify-content-start","flex-column","w-100",3,"ngClass"],["class","grey-800 text-bold lh-125 mb-10 w-100",3,"ngClass",4,"ngIf"],["class","grey-800 lh-160 w-100",3,"ngClass","innerHTML",4,"ngIf"],[4,"ngFor","ngForOf"],[1,"col-xl-2","col-lg-2","col-md-2",3,"ngClass"],[1,"d-flex","align-items-center","justify-content-start","w-100","flex-column","detailed-right","ps-3"],[1,"d-flex","align-items-center","nav-list","mt-3","w-100"],[1,"d-inline-flex","align-items-center","text-lg","grey-500",3,"click"],[1,"d-flex","align-items-center","nav-list","mt-3","mb-3","w-100"],[1,"container-fluid","p-0","mt-10"],["class","templates-thumbs hometemplate p-0 design-template tutorial-content-slider",4,"ngIf"],[1,"grey-800","text-bold","lh-125","mb-10","w-100",3,"ngClass"],[1,"grey-800","lh-160","w-100",3,"ngClass","innerHTML"],[1,"container-fluid","p-0",3,"ngSwitch"],[3,"area","id",4,"ngSwitchCase"],[3,"area","id"],[1,"templates-thumbs","hometemplate","p-0","design-template","tutorial-content-slider"],[1,"d-flex",3,"imageClick","images","sliderType","imageSize","imagePopup","footerShow","projectNameShow","recentProject","isSubscribed"]],template:function(n,t){1&n&&(e.j41(0,"div",1)(1,"div",2)(2,"a",3),e.EFF(3,"Home"),e.k0s(),e.nrm(4,"pi",4),e.j41(5,"a",3),e.EFF(6,"Tutorial"),e.k0s(),e.nrm(7,"pi",4),e.j41(8,"span",5),e.EFF(9),e.k0s()(),e.j41(10,"div",6)(11,"h1",7),e.EFF(12),e.k0s()(),e.j41(13,"div",8)(14,"div",9)(15,"div",10)(16,"div",11),e.DNE(17,Fe,2,2,"h3",12)(18,Le,1,2,"span",13),e.k0s(),e.DNE(19,Ee,5,4,"ng-container",14),e.k0s()(),e.j41(20,"div",15)(21,"div",16)(22,"div",17)(23,"a",18),e.bIt("click",function(){return t.scrollToSection("heading")}),e.EFF(24,"Overview"),e.k0s()(),e.j41(25,"div",17)(26,"a",18),e.bIt("click",function(){return t.scrollToSection("steps-web")}),e.EFF(27,"On Web"),e.k0s()(),e.j41(28,"div",17)(29,"a",18),e.bIt("click",function(){return t.scrollToSection("steps-android")}),e.EFF(30,"On Android"),e.k0s()(),e.j41(31,"div",19)(32,"a",18),e.bIt("click",function(){return t.scrollToSection("steps-i

1phone")}),e.EFF(33,"On iOS"),e.k0s()()()()(),e.j41(34,"div",20),e.DNE(35,Ne,3,8,"div",21),e.k0s()()),2&n&&(e.R7$(),e.Y8G("ngClass",t.env.isMobileView?"ps-3 pe-3 h-60":"pl-13 pr-13"),e.R7$(),e.Y8G("routerLink",e.eq3(24,Ge,t.homeURL)),e.R7$(3),e.Y8G("routerLink","/tutorial"),e.R7$(4),e.JRh(null==t.storyPage?null:t.storyPage.displayName),e.R7$(),e.Y8G("ngClass",t.env.isMobileView?"pt-4 pb-0":"pt-14 pb-14"),e.R7$(),e.Y8G("ngClass",t.env.isMobileView?"text-48":"text-56"),e.R7$(),e.JRh(null==t.heading?null:t.heading.title),e.R7$(),e.Y8G("ngClass",t.env.isMobileView?"pe-3":"pr-13"),e.R7$(),e.Y8G("ngClass",t.env.isMobileView?"order-2":"order-1"),e.R7$(),e.Y8G("ngClass",t.env.isMobileView?"pt-0 pe-0":"detailed-left"),e.R7$(),e.Y8G("ngClass",t.env.isMobileView?"mb-28":"mb-80"),e.R7$(),e.Y8G("ngIf",null==t.heading?null:t.heading.desc1),e.R7$(),e.Y8G("ngIf",null==t.heading?null:t.heading.subTitle),e.R7$(),e.Y8G("ngForOf",null==t.storyPage?null:t.storyPage.sections),e.R7$(),e.Y8G("ngClass",t.env.isMobileView?"order-1 mt-28 mb-28":"order-2"),e.R7$(3),e.AVh("active-tab","heading"===t.currentSection),e.R7$(3),e.AVh("active-tab","steps-web"===t.currentSection),e.R7$(3),e.AVh("active-tab","steps-android"===t.currentSection),e.R7$(3),e.AVh("active-tab","steps-iphone"===t.currentSection),e.R7$(3),e.Y8G("ngIf",t.selectedProductObj))},dependencies:[p.YU,p.Sq,p.bT,p.ux,p.e1,g.Wk,h.b,Te.h,Re],styles:[".tutorialTopBanner[_ngcontent-%COMP%]{background:linear-gradient(90deg,#9956f0,#b381f1)}.detailed-left[_ngcontent-%COMP%]{padding:40px 60px 0 0}.detailed-left[_ngcontent-%COMP%]   .mb-80[_ngcontent-%COMP%]{margin-bottom:80px}.detailed-left[_ngcontent-%COMP%]   .video-preview[_ngcontent-%COMP%]   .btn-play[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .detailed-left[_ngcontent-%COMP%]   .video-preview[_ngcontent-%COMP%]   .btn-play[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{height:120px;width:120px}.detailed-right[_ngcontent-%COMP%]{border-left:2px solid #E2E3E9;position:sticky;top:113px}.detailed-right[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{min-height:26px;cursor:pointer}.active-tab[_ngcontent-%COMP%]{color:#000!important;font-family:Inter!important;font-weight:600!important}.h-60[_ngcontent-%COMP%]{height:60px!important}"]}),r})();const Ye=[{path:"",component:be},{path:":slug",component:k},{path:":type/:subType",component:k}];let De=(()=>{var i;class r{}return(i=r).\u0275fac=function(n){return new(n||i)},i.\u0275mod=e.$C({type:i}),i.\u0275inj=e.G2t({imports:[g.iI.forChild(Ye),g.iI]}),r})();var R=c(84387);let Xe=(()=>{var i;class r{}return(i=r).\u0275fac=function(n){return new(n||i)},i.\u0275mod=e.$C({type:i}),i.\u0275inj=e.G2t({imports:[p.MD,g.iI,m.YN,f.zH,u.MQ,S.r,R.W]}),r})(),He=(()=>{var i;class r{}return(i=r).\u0275fac=function(n){return new(n||i)},i.\u0275mod=e.$C({type:i}),i.\u0275inj=e.G2t({imports:[p.MD,g.iI,m.YN,f.zH,u.MQ,S.r,De,Xe,j.vo,R.W]}),r})()}}]);