@veltdev/sdk/velt-arrow.js

Velt is an SDK to add collaborative features to your product within minutes. Example: Comments like Figma, Frame.io, Google docs or sheets, Recording like Loom, Huddles like Slack and much more.

import{b as zt,c as Gt,d as Xt}from"./chunk-KEET32BV.js";import{b as ue}from"./chunk-4ACOV475.js";import{a as we}from"./chunk-6E3N35RF.js";import{a as ut}from"./chunk-KEM6PWSD.js";import{a as Kt}from"./chunk-UJRDSNTY.js";import{Y as qt,da as pt,ea as me,ga as pe,r as Yt,t as Jt}from"./chunk-KU45CEXD.js";import{$ as j,$f as dt,Bf as Ct,Db as X,E as I,Eb as Y,Ed as Qt,Ee as d,Fa as O,Fb as J,G as Ot,Ga as at,Gc as ct,He as gt,Ii as he,J as F,Jb as K,Kb as N,Kc as $t,L as St,Ma as Wt,Ne as Zt,Nf as te,Of as ee,Pa as p,Pc as lt,Rf as re,T as f,Ua as k,Wg as ht,Ya as kt,Zg as ie,_a as $,_b as Ut,_g as ne,a as w,b as y,bb as Bt,bc as jt,bi as mt,ca as v,ci as x,db as B,di as A,ei as ce,g as At,ha as E,ia as C,ja as et,jg as yt,jh as oe,l as tt,la as Rt,lb as R,le as Et,li as D,mb as W,mg as bt,mi as V,nb as z,ob as st,oe as H,pb as rt,qa as Mt,qb as Nt,r as P,rb as Ht,sb as xt,tb as Vt,ti as le,ua as Lt,v as S,vb as G,vh as _,wa as ot,wb as Ft,xb as U,xh as ae,yb as Pt,yh as se,yi as ge,zb as b,zi as de}from"./chunk-GR3NESUB.js";var M=(()=>{let s=class s{constructor(t,e,r,i,n,o,a,m,h,u,T,L){this.analyticsService=t,this.configService=e,this.docService=r,this.databaseService=i,this.authService=n,this.domService=o,this.afAuth=a,this.iamService=m,this.dialog=h,this.loggingService=u,this.serviceBook=T,this.commonDbService=L,this.arrowAnnotations$=new tt({}),this.arrowAnnotationsByDocumentId$=new tt({}),this.documentPaths=null,this.allowedElementIds$=new tt([]),this.addArrowMode$=new tt(!1),this.loggingService.log("%c[WB] Creating CLASS: ArrowService","color: blue;"),this.databaseService.getDb().pipe(I(g=>!!g),F(1)).subscribe(g=>{g&&this.getDocumentPaths()},g=>{this.loggingService.catch("Error in ArrowService getDb subscription: ",g)}),this.domService.onWindowPointerMove$().subscribe(g=>{if(this.addArrowMode$.value){let Z=!0,nt=this.domService.getBackgroundElement(g.clientX,g.clientY);nt&&(this.isElementInsideAllowedElements(nt)?bt(g.target)?this.domService.removeClassFromElement(document.body,"show-pin-cursor"):(this.domService.addClassToElement(document.body,"show-pin-cursor"),this.highlightElement&&this.highlightElement!==nt&&this.domService.removeHighlightFromElement(this.highlightElement),this.highlightElement=nt,this.domService.highlightElement(this.highlightElement,d.CURSOR.ARROW_PIN),Z=!1):this.domService.removeClassFromElement(document.body,"show-pin-cursor")),this.highlightElement&&Z&&(this.domService.removeHighlightFromElement(this.highlightElement),this.highlightElement=null)}},g=>{this.loggingService.catch("Error in ArrowService onWindowPointerMove$ subscription: ",g)}),this.domService.onWindowKeyupEsc$().subscribe(g=>{this.addArrowMode$.value&&this.disableAddArrowMode()},g=>{this.loggingService.catch("Error in ArrowService onWindowKeyupEsc$ subscription: ",g)}),this.domService.onDocumentClick$().subscribe(g=>{if(g&&this.addArrowMode$.value){if(!bt(g.target)){let Z=this.domService.getBackgroundElement(g.clientX,g.clientY);Z&&this.isElementInsideAllowedElements(Z)&&(g.preventDefault(),g.stopPropagation(),this.addArrow(g))}this.disableAddArrowMode()}},g=>{this.loggingService.catch("Error in ArrowService onDocumentClick$ subscription: ",g)}),this.addArrowMode$.subscribe(g=>{this.highlightElement&&this.domService.removeHighlightFromElement(this.highlightElement),g?this.domService.addClassToElement(document.body,"snippyly-add-arrow-mode"):(this.domService.removeClassFromElement(document.body,"snippyly-add-arrow-mode"),this.domService.removeClassFromElement(document.body,"show-pin-cursor"))},g=>{this.loggingService.catch("Error in ArrowService addArrowMode$ subscription: ",g)}),this.domService.onWindowKeyupBackspace$().subscribe(g=>{this.deleteArrowPinAnnotations("keyupBackspace")},g=>{this.loggingService.catch("Error in ArrowService onWindowKeyupBackspace$ subscription: ",g)}),this.domService.onWindowKeyupDelete$().subscribe(g=>{this.deleteArrowPinAnnotations("keyupDelete")},g=>{this.loggingService.catch("Error in ArrowService onWindowKeyupDelete$ subscription: ",g)})}getDocumentPaths(){this.loggingService.log("%c[WB] Calling FUNCTION: getDocumentPaths","color: green;"),this.docService.getDocumentPaths$()}setAllowedElementIds(t){this.allowedElementIds$.next(t||[])}getAllowedElementIds(){return this.allowedElementIds$.asObservable()}getAllArrowAnnotations(t,e,r){this.loggingService.log("%c[WB] Calling FUNCTION: getAllArrowAnnotations","color: green;");let i,n;try{if(t&&(n=Ct(t)),e&&typeof e=="object"){let o=re(e);i=Ct(JSON.stringify(o))}}catch(o){this.loggingService.catch("Error in ArrowService getAllArrowAnnotations: ",o)}return this.authService.getAuthState$().pipe(I(o=>!!o),f(o=>this.isFeatureAllowed({firebaseUser:o,annotations:[],filteredAnnotations:[]})),f(o=>o.featureAllowed?this.iamService.isUserAllowed$().pipe(S(a=>(o.featureAllowed=a,o))):P(o)),f(o=>o.featureAllowed?this.authService.isPlanExpired$().pipe(S(a=>(o.featureAllowed=!a,o))):P(o)),f(o=>o.featureAllowed?P(o).pipe(f(a=>this.docService.getDocumentPaths$().pipe(S(m=>(this.documentPaths=m,a.documentPaths=m,a)))),f(a=>this.getDataFromDocumentId(n).pipe(S(m=>(a.annotations=m||[],w({},a))))),f(a=>this.docService.getLocation$().pipe(S(m=>(a.location=m,a)))),f(a=>this.docService.getLocations$().pipe(S(m=>(a.customLocations=m,a)))),S(a=>{if(a.filteredAnnotations=[],n&&!i)return a.filteredAnnotations=a.annotations?.slice(),a;{let m=[];return i?m.push(i):(m.push(a?.location?.locationId),m.push(...Object.values(a?.customLocations||[]).map(h=>h.locationId))),a.filteredAnnotations=this.filterAnnotationsByLocationIds(a?.annotations,m),a}}),f(a=>r?P(a):a?.annotations?.length?this.domService.onWindowResize$().pipe(S(()=>a)):P(a)),f(a=>r?P(a):a?.annotations?.length?this.domService.onDomChange$("ArrowService getAllArrowAnnotations").pipe(S(()=>a)):P(a)),S(a=>(a?.filteredAnnotations?.forEach(m=>{this.calculateArrowAnnotationPosition(m)}),a)),f(a=>a?.filteredAnnotations?P(a?.filteredAnnotations||[]):P([]))):P([])),St(oe))}isFeatureAllowed(t){return this.configService.getConfig$().pipe(I(e=>!!e),S(e=>y(w({},t),{config:e})),f(e=>this.authService.getUser$().pipe(S(r=>y(w({},e),{user:r})))),f(e=>te(e.config,e.user,H.ARROW)?P(y(w({},e),{featureAllowed:!0})):(this.loggingService.warn("Arrow feature is not allowed."),P(y(w({},e),{featureAllowed:!1})))),St((e,r)=>e?.featureAllowed===r?.featureAllowed))}getDataFromDocumentId(t){return this.databaseService.getDb().pipe(I(e=>!!e),f(e=>this.configService.getApiKey()&&this.documentPaths?.arrow&&this.documentPaths?this.commonDbService.dbListener({feature:"allArrows",properties:{documentId:t??this.documentPaths?.documentId,organizationId:this.documentPaths?.organizationId,skipFirestore:!0}}).pipe(S(r=>({data:r?.data,operation:r?.operation})),S(({data:r,operation:i})=>{let n=[];return r&&(n=Object.values(r).filter(o=>typeof o=="object")),{data:n,operation:i}}),Ot(r=>(this.loggingService.catch("Error in ArrowService getDataFromDocumentId: ",r),P({data:[],operation:null}))),S(({data:r,operation:i})=>{if(i?.type==="removed"){if(i?.ids?.length){let n=this.arrowAnnotationsByDocumentId$.value;i?.ids?.forEach(o=>{delete n?.[o]}),this.arrowAnnotationsByDocumentId$.next(n)}}else this.setArrowAnnotationsByDocumentId(t||this.documentPaths?.documentId,r);return r})):P([])))}setArrowAnnotationsByDocumentId(t,e){try{if(t){let r=y(w({},this.arrowAnnotationsByDocumentId$.value),{[t]:e});this.arrowAnnotationsByDocumentId$.next(r)}}catch(r){this.loggingService.catch("Error in ArrowService setArrowAnnotationsByDocumentId:",r)}}filterAnnotationsByLocationIds(t,e){try{return t.filter(r=>e.includes(r.locationId))}catch(r){return this.loggingService.catch("Error in ArrowService filterAnnotationsByLocations:",r),[]}}calculateArrowAnnotationPosition(t){try{if(t.targetElement){let e=this.domService.getXPath(t.targetElement?.xpath);if(e){let r=e.iterateNext();if(r&&dt(r)){let i=r.getBoundingClientRect();if(i&&i.width&&i.height){let{height:n,width:o}=ie(r);t.position={top:n*t.targetElement.topPercentage/100,left:o*t.targetElement.leftPercentage/100}}else t.position=null}else t.position=null}else t.position=null}}catch(e){this.loggingService.catch("Error in ArrowService calculateArrowAnnotationPosition:",e)}}addArrow(t){this.loggingService.log("%c[WB] Calling FUNCTION: addArrow","color: green;");try{let e=this.authService.getUser();if(e)if(e.isReadOnly||e.isAnonymous)this.loggingService.catch("Anonymous/Readonly users cannot add arrows.");else{let r=new Zt;r.from=e,r.color=e?.color||d.DEFAULT_ANNOTATION_COLOR,r.lastUpdated=this.timestamp,r.props=new gt;let i=this.domService.getCurrentWindowSizeValue();if(r.props.screenWidth=i.screenWidth,r.props.screenHeight=i.screenHeight,r.props.screenScrollHeight=i.screenScrollHeight,r.props.viewportWidth=window.innerWidth,r.props.viewportHeight=window.innerHeight,r.props.arrowLength=d.VELT_MIN_ARROW_LENGTH,(t?.clientX||0)>d.VELT_MIN_ARROW_LENGTH?r.props.arrowAngle=135:r.props.arrowAngle=45,t&&(r.targetElement=this.domService.getTargetElementForCursorPosition(t)),r?.targetElement?.xpath){let n=this.domService.getXPath(r.targetElement.xpath);if(n){let o=n.iterateNext();o&&(dt(o)||(r.targetElement=null))}}this.setLocationToArrowAnnotation(r),r.pageInfo=yt(),r.pageInfo&&(r.pageInfo.screenWidth=this.domService.getCurrentWindowSizeValue()?.screenWidth),this.saveArrowToDb(r)}}catch(e){this.loggingService.catch("Error in ArrowService addArrow: ",e)}}setLocationToArrowAnnotation(t){try{let e=this.docService.getLocation();e?(t.locationId=e.locationId,t.location=e.location):(delete t.locationId,delete t.location);try{if(t.targetElement?.xpath){let r=this.domService.getElementFromXPath(t.targetElement.xpath),i=this.docService.getAdditionLocationFromElement(r);if(i){let n=this.docService.addLocation({location:i,source:"internal"});n?.[0]&&(t.locationId=n[0].locationId,t.location=n[0].location)}}}catch{}}catch(e){this.loggingService.catch("Error in ArrowService setLocationToArrowAnnotation:",e)}}saveArrowToDb(t){this.loggingService.log("%c[WB] Calling FUNCTION: saveArrowToDb","color: green;");try{this.authService.getUser()&&this.authService.isFeatureAllowed(H.ARROW)&&this.docService.getDocumentPaths$().pipe(I(e=>!!e),F(1),f(e=>(this.documentPaths=e,this.loggingService.log(this.documentPaths),this.databaseService.getDb().pipe(I(r=>!!r),F(1),f(r=>{if(this.documentPaths?.arrow){t.annotationId=this.commonDbService.generateDocumentId(),t.pageInfo&&(t.pageInfo.arrowUrl=this.generateArrowUrl(t));let i=JSON.parse(JSON.stringify(t));return i.position=null,this.domService.toggleAnnotationSelection(i),this.analyticsService.trackEvent(_.Events.Arrow.ARROW_DRAFT_ADDED,{annotationId:t.annotationId}),this.commonDbService.setData({feature:"arrow",properties:{documentId:this.documentPaths?.documentId??"",organizationId:this.documentPaths?.organizationId??"",id:t.annotationId,skipFirestore:!0},data:JSON.parse(JSON.stringify(i))})}else return P(null)}))))).subscribe(()=>{},e=>{this.loggingService.catch("Error in ArrowService saveArrowToDb subscription: ",e)})}catch(e){this.loggingService.catch("Error in ArrowService saveArrowToDb: ",e)}}updateArrow(t,e=!1,r){try{r&&this.setLocationToArrowAnnotation(t),e&&this.updateNotificationsDatabase(t,Et.UPDATED),this.updateArrowToDb(t)}catch(i){this.loggingService.catch("Error in ArrowService updateArrow: ",i)}}updateArrowToDb(t){this.loggingService.log("%c[WB] Calling FUNCTION: updateArrowToDb","color: green;");try{if(t?.targetElement?.xpath){let e=this.domService.getXPath(t.targetElement.xpath);if(e){let r=e.iterateNext();r&&(dt(r)||(t.targetElement=null))}}this.domService.updateSelectedAnnotationInMap([t]),this.authService.getUser()&&this.authService.isFeatureAllowed(H.ARROW)&&this.docService.getDocumentPaths$().pipe(I(e=>!!e),F(1),f(e=>(this.documentPaths=e,this.loggingService.log(this.documentPaths),this.databaseService.getDb().pipe(I(r=>!!r),F(1),f(r=>{if(this.documentPaths?.arrow&&t?.annotationId){let i=JSON.parse(JSON.stringify(t));return i.position=null,this.commonDbService.setData({feature:"arrow",properties:{documentId:this.documentPaths?.documentId??"",organizationId:this.documentPaths?.organizationId??"",id:t.annotationId,skipFirestore:!0},data:JSON.parse(JSON.stringify(i))})}else return P(null)}))))).subscribe(()=>{},e=>{this.loggingService.catch("Error in ArrowService updateArrowToDb subscription: ",e)})}catch(e){this.loggingService.catch("Error in ArrowService updateArrowToDb: ",e)}}deleteArrowPinAnnotations(t){try{let e=this.domService.getSelectedAnnotationsMap(),r=this.authService.getUser(),i=[];Object.keys(e).forEach(n=>At(this,null,function*(){let o=e[n];if(o.type==="arrow"){let a=r&&!r?.isAnonymous&&!r?.isGuest;r&&o.from&&(a||o.from.userId===r.userId)&&i.push(o)}})),i?.length&&(this.analyticsService.trackEvent(_.Events.Arrow.ARROW_DELETE_TRIGGERED,{triggerType:t,annotationId:i.map(n=>n.annotationId).join()}),this.dialog.open(ue,{panelClass:"velt-mat-dialog-container",data:{title:"Delete arrow?",message:"This selected arrow will be deleted.",yesButton:"Delete",noButton:"Cancel",variant:"arrow"}}).afterClosed().pipe(F(1)).subscribe(n=>{n&&(i.forEach(o=>At(this,null,function*(){yield this.deleteArrowPinAnnotation(o)})),setTimeout(()=>{document.querySelectorAll(`[${d.SNIPPYLY_HIGHLIGHT}]`).forEach(a=>{this.domService.removeHighlightFromElement(a)})},100))})),this.domService.resetSelectedAnnotationsMap(!0,"arrow")}catch(e){this.loggingService.catch("Error in ArrowService deleteArrowPinAnnotations: ",e)}}deleteArrowPinAnnotation(t){return this.authService.isFeatureAllowed(H.ARROW)&&this.documentPaths?.arrow&&t?.annotationId?(this.updateNotificationsDatabase(t,Et.DELETED),this.analyticsService.trackEvent(_.Events.Arrow.ARROW_DELETED,{annotationId:t.annotationId}),this.commonDbService.deleteData({feature:"arrow",properties:{documentId:this.documentPaths?.documentId??"",organizationId:this.documentPaths?.organizationId??"",id:t.annotationId,skipFirestore:!0}})):Promise.resolve()}enableAddArrowMode(){this.authService.isFeatureAllowed(H.ARROW)?(this.analyticsService.trackEvent(_.Events.Arrow.ARROW_ADD_MODE_ENABLED),this.addArrowMode$.next(!0)):this.loggingService.catch("Error in ArrowService enableAddArrowMode: ","Arrow feature is not enabled.")}disableAddArrowMode(){this.analyticsService.trackEvent(_.Events.Arrow.ARROW_ADD_MODE_DISABLED),this.addArrowMode$.next(!1)}addArrowModeChange(){return this.addArrowMode$.asObservable()}get timestamp(){return this.commonDbService.getServerTimestamp()}isElementInsideAllowedElements(t){try{return this.domService.isElementInsideListedElementIds(t,this.allowedElementIds$.value)}catch(e){return this.loggingService.catch("Error in ArrowService isElementInsideAllowedElements: ",e),!1}}updateNotificationsDatabase(t,e){try{let r={annotationData:t,actionType:e,notificationSource:"arrow"};this.serviceBook.get(se)?.updateNotificationDatabase(r)}catch(r){this.loggingService.catch("Error in ArrowService updateNotificationsDatabase: ",r)}}getArrowUrl(t){try{return t?.pageInfo?.arrowUrl?t.pageInfo.arrowUrl:(t?.pageInfo||(t.pageInfo=yt(),t.pageInfo&&(t.pageInfo.screenWidth=this.domService.getCurrentWindowSizeValue()?.screenWidth)),t.pageInfo.arrowUrl=this.generateArrowUrl(t),this.updateArrow(t),t.pageInfo?.arrowUrl)}catch(e){this.loggingService.catch("Error in ArrowService getArrowUrl: ",e);return}}generateArrowUrl(t){let e;try{e=new URL(t?.pageInfo?.url||window.location.href)}catch(r){this.loggingService.catch("Error in ArrowService generateArrowUrl: ",r),e=new URL(window.location.href)}return e.searchParams.delete(d.URL_PARAMS.TAG_ID),e.searchParams.append(d.URL_PARAMS.TAG_ID,t.annotationId),e.href}};s.\u0275fac=function(e){return new(e||s)(v(x),v(ce),v(ge),v(le),v(V),v(D),v(Qt),v(ut),v(qt),v(A),v(mt),v(he))},s.\u0275prov=j({token:s,factory:s.\u0275fac,providedIn:"root"});let l=s;return l})();var Ce=["handle"],ye=["arrowRef"],be=["headRef"],Ie=l=>({transform:l});function _e(l,s){if(l&1){let c=G();W(0,"div",8,2),U("cdkDragStarted",function(e){E(c);let r=b();return C(r.onDragStarted(e))})("cdkDragMoved",function(e){E(c);let r=b();return C(r.onDragMoved(e))})("cdkDragReleased",function(e){E(c);let r=b();return C(r.onDragReleased(e))}),et(),W(2,"svg",9),st(3,"path",10)(4,"path",11),z()()}if(l&2){let c=b();N("s-arrow-annotation-handle-dragging",c.isResizing),R("cdkDragRootElement","arrow-pin-container-"+(c.arrowPinAnnotation==null?null:c.arrowPinAnnotation.annotationId))("cdkDragDisabled",!c.isEditable||c.isResizing)}}function De(l,s){if(l&1){let c=G();W(0,"div",12,2),U("cdkDragStarted",function(){E(c);let e=b();return C(e.onResizeHandleDragStarted())})("cdkDragMoved",function(e){E(c);let r=b();return C(r.onResizeHandleDragMoved(e))})("cdkDragReleased",function(){E(c);let e=b();return C(e.onResizeHandleDragReleased())}),et(),W(2,"svg",13),st(3,"path",14),z()()}if(l&2){let c=b();N("s-arrow-annotation-handle-dragging",c.isResizing)}}var ve=(()=>{let s=class s{get arrowPinAnnotation(){return this._arrowPinAnnotation}set arrowPinAnnotation(t){this._arrowPinAnnotation=t,this.updatedArrowAngle&&this.arrowPinAnnotation?.props&&(this.arrowPinAnnotation.props.arrowAngle=this.updatedArrowAngle),this.calculateArrowWidthBasedOnViewport()}get arrowPinSelected(){return this._arrowPinSelected}set arrowPinSelected(t){this._arrowPinSelected=t,this.updateHighlightOnElement()}get arrowPinHover(){return this._arrowPinHover}set arrowPinHover(t){this._arrowPinHover=t,this.updateHighlightOnElement()}constructor(t,e,r,i){this.arrowService=t,this.domService=e,this.loggingService=r,this.elementRef=i,this._arrowPinSelected=!1,this.multipleArrowPinsSelected=!1,this.dragStarted=new at,this.dragMoved=new at,this.dragReleased=new at,this._arrowPinHover=!1,this.subscriptions=[],this.veltElement=!0,this.isDragging=!1,this.isResizing=!1,this.isEditable=!1,this.centerX=0,this.centerY=0,this.newAngle=0,this.newWidth=0,this.updatedArrowAngle=0,this.MIN_ARROW_LENGTH=d.VELT_MIN_ARROW_LENGTH,this.pointerEventSubscriptions=[],this.loggingService.log("%c[WB] Creating COMPONENT ArrowPinComponent","color: blue;")}ngOnInit(){this.loggingService.log("%c[WB] Calling FUNCTION: ngOnInit","color: green;")}ngAfterViewInit(){try{this.updateHighlightOnElement(),setTimeout(()=>{this.calculateArrowWidthBasedOnViewport()},100)}catch(t){this.loggingService.catch("Error in ArrowPinComponent AfterViewInit: ",t)}}ngOnChanges(t){try{t.arrowPinAnnotation&&this.checkIsEditable(),t.user&&this.checkIsEditable()}catch(e){this.loggingService.catch("Error in ArrowPinComponent ngOnChanges: ",e)}}checkIsEditable(){try{this.user?.userId===this.arrowPinAnnotation?.from?.userId?this.isEditable=!0:this.user&&!this.user.isAnonymous&&!this.user.isGuest?this.isEditable=!0:this.isEditable=!1}catch(t){this.loggingService.catch("Error in ArrowPinComponent checkIsEditable: ",t)}}onResizeHandleDragStarted(){try{this.isResizing||(this.updatedArrowAngle=0,this.updateCenter(),this.isResizing=!0)}catch(t){this.loggingService.catch("Error in ArrowPinComponent onResizeHandleDragStarted: ",t)}}onResizeHandleDragMoved(t){try{let e=t.event;if(!this.isResizing||!this.isWithinViewport(e))return;let r=this.getAngleAndDistanceFromMouseEvent(e);this.newAngle=r.angle,this.newWidth=Math.min(r.distance,this.getMaxAllowedArrowLength()),e.stopPropagation()}catch(e){this.loggingService.catch("Error in ArrowPinComponent onResizeHandleDragMoved: ",e)}}onResizeHandleDragReleased(){try{this.isResizing=!1,this.updateArrowPinAnnotationProps(),setTimeout(()=>{this.newAngle=0,this.newWidth=0},100)}catch(t){this.loggingService.catch("Error in ArrowPinComponent onResizeHandleDragReleased: ",t)}}updateCenter(){try{let t=this.elementRef.nativeElement.getBoundingClientRect();this.centerX=t.x,this.centerY=t.y}catch(t){this.loggingService.catch("Error in ArrowPinComponent updateCenter: ",t)}}getAngleAndDistanceFromMouseEvent(t){try{let e=t instanceof MouseEvent?t.clientX:t.touches[0].clientX,r=t instanceof MouseEvent?t.clientY:t.touches[0].clientY,i=e-this.centerX,n=r-this.centerY,a=Math.atan2(n,i)*(180/Math.PI);a=a<0?a+360:a;let m=Math.sqrt(i*i+n*n);return{angle:a,distance:m}}catch(e){return this.loggingService.catch("Error in ArrowPinComponent getAngleAndDistanceFromMouseEvent: ",e),{angle:0,distance:0}}}isWithinViewport(t){try{return typeof TouchEvent<"u"&&t instanceof TouchEvent?t.touches[0].clientX>=0&&t.touches[0].clientX<=window?.innerWidth&&t.touches[0].clientY>=0&&t.touches[0].clientY<=window?.innerHeight:t.clientX>=0&&t.clientX<=window?.innerWidth&&t.clientY>=0&&t.clientY<=window?.innerHeight}catch(e){return this.loggingService.catch("Error in ArrowPinComponent isWithinViewport: ",e),!1}}calculateArrowWidthBasedOnViewport(){try{if(this.isDragging)return;if(this.arrowPinAnnotation?.props){let t=this.arrowPinAnnotation.props.viewportWidth||0,e=this.arrowPinAnnotation.props.viewportHeight||0,r=window.innerWidth,i=window.innerHeight;this.arrowPinAnnotation.props.arrowLength||(this.arrowPinAnnotation.props.arrowLength=0);let n=(this.arrowPinAnnotation.props.arrowAngle||0)%360;n>45&&n<135||n>225&&n<315?e>0&&(this.arrowPinAnnotation.props.arrowLength=this.arrowPinAnnotation.props.arrowLength*i/e):t>0&&(this.arrowPinAnnotation.props.arrowLength=this.arrowPinAnnotation.props.arrowLength*r/t);let o=this.arrowRef?.nativeElement?.getBoundingClientRect();if(o){n<0&&(n=360+n);let a=n,m=n>90&&n<=180,h=n>180&&n<=270,u=r-o.x;(m||h)&&(u=o.right,a=180-n);let T=ht(u-d.VELT_ARROW_VIEWPORT_PADDING,a);if(T>0&&this.arrowPinAnnotation.props.arrowLength>T)if(T<this.MIN_ARROW_LENGTH){let L=(this.arrowPinAnnotation.props.arrowAngle||0)%360;L>=90&&L<=270?this.updatedArrowAngle=45:this.updatedArrowAngle=135,this.arrowPinAnnotation.props.arrowLength=this.MIN_ARROW_LENGTH}else this.arrowPinAnnotation.props.arrowLength=T}this.arrowPinAnnotation.props.arrowLength=Math.min(this.arrowPinAnnotation.props.arrowLength,this.getMaxAllowedArrowLength())}}catch(t){this.loggingService.catch("Error in ArrowPinComponent calculateArrowWidthBasedOnViewport: ",t)}}getMaxAllowedArrowLength(){try{return Math.max(window.innerWidth,window.innerHeight)*.8}catch(t){return this.loggingService.catch("Error in ArrowPinComponent getMaxAllowedArrowLength: ",t),0}}updateHighlightOnElement(){try{this.targetElement&&(this.arrowPinSelected||this.arrowPinHover?this.domService.highlightElement(this.targetElement):this.domService.removeHighlightFromElement(this.targetElement))}catch(t){this.loggingService.catch("Error in ArrowPinComponent updateHighlightOnElement: ",t)}}updateArrowPinAnnotationProps(){try{this.arrowPinAnnotation?.props||(this.arrowPinAnnotation.props=new gt),this.arrowPinAnnotation.props.viewportWidth=window.innerWidth,this.arrowPinAnnotation.props.viewportHeight=window.innerHeight,this.arrowPinAnnotation.props.arrowAngle=this.newAngle,this.arrowPinAnnotation.props.arrowLength=this.newWidth,this.arrowService.updateArrow(this.arrowPinAnnotation)}catch(t){this.loggingService.catch("Error in ArrowPinComponent updateArrowPinAnnotation: ",t)}}onPointerOver(t){try{t.buttons?this.arrowPinHover&&(this.arrowPinHover=!1):this.arrowPinHover||(this.arrowPinHover=!0)}catch(e){this.loggingService.catch("Error in ArrowPinComponent onPointerOver: ",e)}}onDragStarted(t){this.isDragging=!0,this.dragStarted.emit(t)}onDragMoved(t){this.dragMoved.emit(t)}onDragReleased(t){this.isDragging=!1,this.dragReleased.emit(t)}onPointerOut(){this.arrowPinHover=!1}ngOnDestroy(){this.loggingService.log("%c[WB] Calling FUNCTION: ngOnDestroy","color: green;");try{this.unsubscribe()}catch(t){this.loggingService.catch("Error in ArrowPinComponent ondestroy: ",t)}}unsubscribe(){this.loggingService.log("%c[WB] Calling FUNCTION: unsubscribe","color: green;");try{this.subscriptions.map(t=>{t.unsubscribe()}),this.subscriptions=[]}catch(t){this.loggingService.catch("Error in ArrowPinComponent unsubscribe: ",t)}}};s.\u0275fac=function(e){return new(e||s)(p(M),p(D),p(A),p(ot))},s.\u0275cmp=k({type:s,selectors:[["snippyly-arrow-pin"]],viewQuery:function(e,r){if(e&1&&(X(Ce,5),X(ye,5),X(be,5)),e&2){let i;Y(i=J())&&(r.handle=i.first),Y(i=J())&&(r.arrowRef=i.first),Y(i=J())&&(r.headRef=i.first)}},hostVars:1,hostBindings:function(e,r){e&2&&B("data-velt-element",r.veltElement)},inputs:{arrowPinAnnotation:"arrowPinAnnotation",arrowPinSelected:"arrowPinSelected",multipleArrowPinsSelected:"multipleArrowPinsSelected",user:"user",targetElement:"targetElement"},outputs:{dragStarted:"dragStarted",dragMoved:"dragMoved",dragReleased:"dragReleased"},features:[Lt],decls:7,vars:15,consts:[["arrowRef",""],["headRef",""],["handle",""],[1,"s-arrow-annotation",3,"pointerover","pointerout","click","ngStyle"],["class","s-arrow-annotation-drag-handle","cdkDrag","","cdkDragHandle","",3,"s-arrow-annotation-handle-dragging","cdkDragRootElement","cdkDragDisabled","cdkDragStarted","cdkDragMoved","cdkDragReleased",4,"ngIf"],[1,"s-arrow-annotation-head"],[1,"s-arrow-annotation-line"],["class","s-arrow-annotation-handle","cdkDrag","",3,"s-arrow-annotation-handle-dragging","cdkDragStarted","cdkDragMoved","cdkDragReleased",4,"ngIf"],["cdkDrag","","cdkDragHandle","",1,"s-arrow-annotation-drag-handle",3,"cdkDragStarted","cdkDragMoved","cdkDragReleased","cdkDragRootElement","cdkDragDisabled"],["width","32","height","32","viewBox","0 0 24 24","fill","none","xmlns","http://www.w3.org/2000/svg"],["d","M18.0039 5.99219H14.4039M18.0039 5.99219V9.59219M18.0039 5.99219L13.8039 10.1922M6.00391 17.9922H9.60391M6.00391 17.9922V14.3922M6.00391 17.9922L10.2039 13.7922","stroke","#0093FF","stroke-width","1.2","stroke-linecap","round","stroke-linejoin","round"],["d","M6 5.99219H9.6M6 5.99219V9.59219M6 5.99219L10.2 10.1922M18 17.9922H14.4M18 17.9922V14.3922M18 17.9922L13.8 13.7922","stroke","#0093FF","stroke-width","1.2","stroke-linecap","round","stroke-linejoin","round"],["cdkDrag","",1,"s-arrow-annotation-handle",3,"cdkDragStarted","cdkDragMoved","cdkDragReleased"],["width","16","height","16","viewBox","0 0 10 10","fill","none","xmlns","http://www.w3.org/2000/svg"],["d","M1 5C1 3.11438 1 2.17157 1.58579 1.58579C2.17157 1 3.11438 1 5 1C6.88562 1 7.82843 1 8.41421 1.58579C9 2.17157 9 3.11438 9 5C9 6.88562 9 7.82843 8.41421 8.41421C7.82843 9 6.88562 9 5 9C3.11438 9 2.17157 9 1.58579 8.41421C1 7.82843 1 6.88562 1 5Z","stroke","#0093FF","stroke-width","1.5"]],template:function(e,r){if(e&1){let i=G();W(0,"div",3,0),U("pointerover",function(o){return E(i),C(r.onPointerOver(o))})("pointerout",function(){return E(i),C(r.onPointerOut())})("click",function(o){return E(i),C(o.preventDefault())}),$(2,_e,5,4,"div",4),st(3,"div",5,1)(5,"div",6),$(6,De,4,2,"div",7),z()}e&2&&(K("width",r.newWidth||(r.arrowPinAnnotation==null||r.arrowPinAnnotation.props==null?null:r.arrowPinAnnotation.props.arrowLength)||r.MIN_ARROW_LENGTH,"px"),N("s-arrow-annotation-selected",r.arrowPinSelected)("s-arrow-annotation-draggable",r.isEditable),R("ngStyle",jt(13,Ie,"rotate("+(r.newAngle||r.updatedArrowAngle||(r.arrowPinAnnotation==null||r.arrowPinAnnotation.props==null?null:r.arrowPinAnnotation.props.arrowAngle)||0)+"deg)")),O(2),R("ngIf",r.isEditable),O(),K("border-right-color",((r.arrowPinAnnotation==null||r.arrowPinAnnotation.from==null?null:r.arrowPinAnnotation.from.color)||(r.arrowPinAnnotation==null?null:r.arrowPinAnnotation.color))+" !important"),O(2),K("background-color",((r.arrowPinAnnotation==null||r.arrowPinAnnotation.from==null?null:r.arrowPinAnnotation.from.color)||(r.arrowPinAnnotation==null?null:r.arrowPinAnnotation.color))+" !important"),O(),R("ngIf",r.isEditable))},dependencies:[lt,ct,$t,Xt,Gt,zt],styles:["html[_ngcontent-%COMP%]{--velt-base-rem-unit: 1}*[data-snippyly-element=true][_ngcontent-%COMP%], *[data-velt-element=true][_ngcontent-%COMP%]{font-family:var(--velt-default-font-family)}velt-wireframe[_ngcontent-%COMP%]{display:none!important}body.velt-pin-dragging[_ngcontent-%COMP%]   iframe[_ngcontent-%COMP%]{pointer-events:none!important}.s-arrow-annotation[_ngcontent-%COMP%]{position:absolute!important;z-index:20!important;height:calc((.4rem + 0px) * var(--velt-base-rem-unit))!important;transform-origin:0 100%!important;left:50%!important;top:50%!important;display:flex!important;align-items:center!important;justify-content:flex-end!important}.s-arrow-annotation[_ngcontent-%COMP%]   .s-arrow-annotation-line[_ngcontent-%COMP%]{height:calc((.4rem + 0px) * var(--velt-base-rem-unit))!important;transform-origin:0 100%!important;width:100%!important;background-color:#625df5!important}.s-arrow-annotation[_ngcontent-%COMP%]   .s-arrow-annotation-head[_ngcontent-%COMP%]{width:0!important;height:0!important;border-top:calc((1.1rem + 0px) * var(--velt-base-rem-unit)) solid transparent!important;border-bottom:calc((1.1rem + 0px) * var(--velt-base-rem-unit)) solid transparent!important;border-right:calc((1.1rem + 0px) * var(--velt-base-rem-unit)) solid #625DF5!important}.s-arrow-annotation[_ngcontent-%COMP%]   .s-arrow-annotation-drag-handle[_ngcontent-%COMP%]{transform:none!important;cursor:move!important;display:flex!important;position:absolute!important;left:-20px!important;opacity:0!important}.s-arrow-annotation[_ngcontent-%COMP%]   .s-arrow-annotation-handle[_ngcontent-%COMP%]{transform:none!important;display:flex!important;opacity:0!important;cursor:grab!important}.s-arrow-annotation[_ngcontent-%COMP%]   .s-arrow-annotation-handle[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%]{width:calc((1rem + 0px) * var(--velt-base-rem-unit))!important;height:calc((1rem + 0px) * var(--velt-base-rem-unit))!important}.s-arrow-annotation[_ngcontent-%COMP%]   .s-arrow-annotation-handle.s-arrow-annotation-handle-dragging[_ngcontent-%COMP%]{cursor:grabbing!important}.s-arrow-annotation[_ngcontent-%COMP%]:hover   .s-arrow-annotation-drag-handle[_ngcontent-%COMP%], .s-arrow-annotation.s-arrow-annotation-selected[_ngcontent-%COMP%]   .s-arrow-annotation-drag-handle[_ngcontent-%COMP%], .s-arrow-annotation[_ngcontent-%COMP%]:hover   .s-arrow-annotation-handle[_ngcontent-%COMP%], .s-arrow-annotation.s-arrow-annotation-selected[_ngcontent-%COMP%]   .s-arrow-annotation-handle[_ngcontent-%COMP%]{opacity:1!important}"],changeDetection:0});let l=s;return l})();var Te=["arrowPinRef"];function Oe(l,s){if(l&1){let c=G();W(0,"div",3),U("pointerup",function(e){return E(c),b(2).togglePinSelection(),C(e.stopPropagation())})("pointerdown",function(e){return E(c),C(e.stopPropagation())})("click",function(e){return E(c),C(e.stopPropagation())}),W(1,"snippyly-arrow-pin",4,0),U("dragStarted",function(){E(c);let e=b(2);return C(e.onPinDragStart())})("dragMoved",function(e){E(c);let r=b(2);return C(r.onPinMove(e))})("dragReleased",function(){E(c);let e=b(2);return C(e.onPinRelease())}),z()()}if(l&2){let c=b().ngIf,t=b();K("top",c.annotationDragging?c.dragPosition==null?null:c.dragPosition.top:(c.arrowPinAnnotation==null||c.arrowPinAnnotation.position==null?null:c.arrowPinAnnotation.position.top)+c.offsetTop,"px")("left",c.annotationDragging?c.dragPosition==null?null:c.dragPosition.left:(c.arrowPinAnnotation==null||c.arrowPinAnnotation.position==null?null:c.arrowPinAnnotation.position.left)+c.offsetLeft,"px"),N("pin-dragging",c.annotationDragging),R("id","arrow-pin-container-"+(c.arrowPinAnnotation==null?null:c.arrowPinAnnotation.annotationId)),O(),R("arrowPinAnnotation",c.arrowPinAnnotation)("arrowPinSelected",c.selectedAnnotationsMap[c.arrowPinAnnotation==null?null:c.arrowPinAnnotation.annotationId]&&!c.annotationDragging&&t.objectKeys(c.selectedAnnotationsMap).length===1)("multipleArrowPinsSelected",c.selectedAnnotationsMap[c.arrowPinAnnotation==null?null:c.arrowPinAnnotation.annotationId]&&t.objectKeys(c.selectedAnnotationsMap).length>1)("targetElement",c.targetElement)("user",c.user)}}function Re(l,s){if(l&1&&(xt(0),$(1,Oe,3,12,"div",2),Vt()),l&2){let c=s.ngIf;O(),R("ngIf",c.arrowPinAnnotation==null?null:c.arrowPinAnnotation.position)}}var fe=(()=>{let s=class s{constructor(t,e,r,i,n){this.analyticsService=t,this.authService=e,this.domService=r,this.arrowService=i,this.loggingService=n,this.multipleArrowPinsSelected=!1,this.avatarErrorImage="",this.objectKeys=Object.keys,this.subscriptions=[],this.componentConfigSignal=Mt({arrowPinAnnotation:void 0,annotationDragging:!1,dragPosition:null,offsetTop:0,offsetLeft:0,selectedAnnotationsMap:{},targetElement:void 0,user:void 0}),this.veltElement=!0,this.subscriptions.push(this.authService.getUser$().subscribe(o=>{this.componentConfigSignal.update(a=>(a=y(w({},a),{user:o}),a))},o=>{this.loggingService.catch("Error in ArrowPinPortalComponent getUser$ subscription: ",o)})),this.subscriptions.push(this.domService.getSelectedAnnotationsMap$().subscribe(o=>{this.componentConfigSignal.update(a=>(a=y(w({},a),{selectedAnnotationsMap:o}),a))},o=>{this.loggingService.catch("Error in ArrowPinPortalComponent getSelectedAnnotationsMap$ subscription: ",o)}))}ngOnInit(){}setArrowPinAnnotation(t){try{this.componentConfigSignal.update(e=>(e=y(w({},e),{arrowPinAnnotation:t}),e)),this.id=this.componentConfigSignal().arrowPinAnnotation?.annotationId}catch(e){this.loggingService.catch("Error in ArrowPinPortalComponent setArrowPinAnnotation: ",e)}}setTargetElement(t){try{this.componentConfigSignal.update(e=>(e=y(w({},e),{targetElement:t}),e))}catch(e){this.loggingService.catch("Error in ArrowPinPortalComponent setTargetElement: ",e)}}setOffsetLeft(t){try{this.componentConfigSignal.update(e=>(e=y(w({},e),{offsetLeft:t}),e))}catch(e){this.loggingService.catch("Error in ArrowPinPortalComponent setOffsetLeft: ",e)}}setOffsetTop(t){try{this.componentConfigSignal.update(e=>(e=y(w({},e),{offsetTop:t}),e))}catch(e){this.loggingService.catch("Error in ArrowPinPortalComponent setOffsetTop: ",e)}}togglePinSelection(){try{this.domService.toggleAnnotationSelection(this.componentConfigSignal().arrowPinAnnotation)}catch(t){this.loggingService.catch("Error in ArrowPinPortalComponent togglePinSelection: ",t)}}onPinDragStart(){this.componentConfigSignal().selectedAnnotationsMap[this.componentConfigSignal().arrowPinAnnotation.annotationId]&&this.domService.toggleAnnotationSelection(this.componentConfigSignal().arrowPinAnnotation);let t=document.getElementById(this.componentConfigSignal().arrowPinAnnotation.annotationId);t&&(this.parentElement=t.parentElement,t.style.opacity="0",document.body.appendChild(t)),this.componentConfigSignal.update(e=>(e=y(w({},e),{annotationDragging:!0}),e)),setTimeout(()=>{t&&(t.style.opacity="1")},50)}onPinMove(t){try{this.updateCurrentPinPosition(t)}catch(e){this.loggingService.catch("Error in ArrowPinPortalComponent onPinMove: ",e)}}updateCurrentPinPosition(t){try{this.domService.removeHighlightFromElement(this.componentConfigSignal().targetElement);let e=t.event,r=e?.touches?.length?e.touches[0]?.clientX:e.clientX,i=e?.touches?.length?e.touches[0]?.clientY:e.clientY,n=this.domService.getBackgroundElement(r,i);n&&(this.componentConfigSignal.update(o=>(o=y(w({},o),{targetElement:n}),o)),this.domService.highlightElement(this.componentConfigSignal().targetElement),this.pointerMoveEvent=t.event,this.componentConfigSignal.update(o=>(o=y(w({},o),{dragPosition:{top:i,left:r}}),o)))}catch(e){this.loggingService.catch("Error in ArrowPinPortalComponent updateCurrentPinPosition: ",e)}}onPinRelease(){try{let t=document.getElementById(this.componentConfigSignal().arrowPinAnnotation.annotationId);t&&this.parentElement&&this.parentElement.appendChild(t);let e=this.domService.getElementFromXPath(this.componentConfigSignal().arrowPinAnnotation.targetElement?.xpath);if(this.pointerMoveEvent){this.componentConfigSignal.update(h=>(h=w({},h),h.arrowPinAnnotation.targetElement=this.domService.getTargetElementForCursorPosition(this.pointerMoveEvent),h));let n=this.pointerMoveEvent,o=n?.touches?.length?n.touches[0]?.clientX:n.clientX,a=!1;if(o<d.VELT_MIN_ARROW_LENGTH){let h=this.componentConfigSignal().arrowPinAnnotation.props.arrowAngle||0;h>=90&&h<=270&&(this.componentConfigSignal.update(u=>(u=w({},u),u.arrowPinAnnotation.props.arrowAngle=45,u)),a=!0)}if(o>window?.innerWidth-d.VELT_MIN_ARROW_LENGTH){let h=this.componentConfigSignal().arrowPinAnnotation.props.arrowAngle||0;(h>=270&&h<=360||h>=0&&h<=90)&&(this.componentConfigSignal.update(u=>(u=w({},u),u.arrowPinAnnotation.props.arrowAngle=135,u)),a=!0)}if(!a){let h=o,u=this.componentConfigSignal().arrowPinAnnotation.props.arrowAngle||0;u>=0&&u<=90||u>=270&&u<=360?h=window.innerWidth-o:u=180-u;let T=ht(h-d.VELT_ARROW_VIEWPORT_PADDING,u);T>0&&T<(this.componentConfigSignal().arrowPinAnnotation.props.arrowLength||0)&&this.componentConfigSignal.update(L=>(L=w({},L),L.arrowPinAnnotation.props.arrowLength=T,L))}let m=this.domService.getCurrentWindowSizeValue();this.componentConfigSignal.update(h=>(h=w({},h),h.arrowPinAnnotation.props.screenWidth=m.screenWidth,h.arrowPinAnnotation.props.screenHeight=m.screenHeight,h.arrowPinAnnotation.props.screenScrollHeight=m.screenScrollHeight,h.arrowPinAnnotation.props.viewportWidth=window.innerWidth,h.arrowPinAnnotation.props.viewportHeight=window.innerHeight,h))}let r=this.domService.getElementFromXPath(this.componentConfigSignal().arrowPinAnnotation.targetElement?.xpath),i=this.domService.isElementInsideAdditionalLocationContainer(e)||this.domService.isElementInsideAdditionalLocationContainer(r);this.arrowService.updateArrow(this.componentConfigSignal().arrowPinAnnotation,!1,i),setTimeout(()=>{this.componentConfigSignal.update(n=>(n=w({},n),n.annotationDragging=!1,n.dragPosition=null,n)),this.domService.removeHighlightFromElement(this.componentConfigSignal().targetElement),this.arrowPinRef&&(this.arrowPinRef.updatedArrowAngle=0)},100),this.analyticsService.trackEvent(_.Events.Arrow.ARROW_DRAGGED,{annotationId:this.componentConfigSignal().arrowPinAnnotation.annotationId})}catch(t){this.loggingService.catch("Error in ArrowPinPortalComponent onPinRelease: ",t)}}ngOnDestroy(){this.loggingService.log("%c[WB] Calling FUNCTION: ngOnDestroy","color: green;");try{this.unsubscribe()}catch(t){this.loggingService.catch("Error in ArrowPinPortalComponent ondestroy: ",t)}}unsubscribe(){this.loggingService.log("%c[WB] Calling FUNCTION: unsubscribe","color: green;");try{this.subscriptions.map(t=>{t.unsubscribe()}),this.subscriptions=[]}catch(t){this.loggingService.catch("Error in ArrowPinPortalComponent unsubscribe: ",t)}}};s.\u0275fac=function(e){return new(e||s)(p(x),p(V),p(D),p(M),p(A))},s.\u0275cmp=k({type:s,selectors:[["snippyly-arrow-pin-portal"]],viewQuery:function(e,r){if(e&1&&X(Te,5),e&2){let i;Y(i=J())&&(r.arrowPinRef=i.first)}},hostVars:2,hostBindings:function(e,r){e&2&&(Ft("id",r.id),B("data-velt-element",r.veltElement))},inputs:{multipleArrowPinsSelected:"multipleArrowPinsSelected",avatarErrorImage:"avatarErrorImage"},decls:1,vars:1,consts:[["arrowPinRef",""],[4,"ngIf"],["class","arrow-pin-portal",3,"id","pin-dragging","top","left","pointerup","pointerdown","click",4,"ngIf"],[1,"arrow-pin-portal",3,"pointerup","pointerdown","click","id"],[3,"dragStarted","dragMoved","dragReleased","arrowPinAnnotation","arrowPinSelected","multipleArrowPinsSelected","targetElement","user"]],template:function(e,r){e&1&&$(0,Re,2,1,"ng-container",1),e&2&&R("ngIf",r.componentConfigSignal())},dependencies:[lt,ct,ve],styles:["html[_ngcontent-%COMP%]{--velt-base-rem-unit: 1}*[data-snippyly-element=true][_ngcontent-%COMP%], *[data-velt-element=true][_ngcontent-%COMP%]{font-family:var(--velt-default-font-family)}velt-wireframe[_ngcontent-%COMP%]{display:none!important}body.velt-pin-dragging[_ngcontent-%COMP%]   iframe[_ngcontent-%COMP%]{pointer-events:none!important}[_nghost-%COMP%]{position:absolute!important;top:0!important;left:0!important;box-sizing:border-box!important;-webkit-tap-highlight-color:rgba(255,255,255,0)!important;outline:none!important;margin:0!important;padding:0!important;height:unset!important;width:unset!important;text-align:left!important}*[_ngcontent-%COMP%]{box-sizing:border-box;-webkit-tap-highlight-color:rgba(255,255,255,0)!important;outline:none!important;margin:0!important;padding:0!important;height:unset;width:unset;text-align:left!important;line-height:1.5!important;color:#000!important;font-size:calc((1rem + 0px) * var(--velt-base-rem-unit))}*[_ngcontent-%COMP%]:empty{display:revert!important}.arrow-pin-portal[_ngcontent-%COMP%]{position:absolute;transform:none!important;top:0;left:0}.arrow-pin-portal.pin-dragging[_ngcontent-%COMP%]{position:fixed;z-index:var(--velt-arrow-z-index)!important}"],changeDetection:0});let l=s;return l})();var Ae=(()=>{let s=class s{constructor(t,e,r,i,n){this.domService=t,this.componentFactoryResolver=e,this.injector=r,this.appRef=i,this.loggingService=n,this.arrowsPinById={}}setArrowPin(t){try{if(!this.arrowsPinById[t.annotationId])this.setPinPortal(t);else if(t.targetElement?.xpath===this.arrowsPinById[t.annotationId]?.annotation?.targetElement?.xpath){let e=this.arrowsPinById[t.annotationId].portalRef,r=this.arrowsPinById[t.annotationId].userTargetElement,i=this.arrowsPinById[t.annotationId].pinHostElement;if(document.body.contains(r)&&document.body.contains(i))e&&(e.instance.setArrowPinAnnotation(JSON.parse(JSON.stringify(t))),this.updateElementOffset(t));else{let n=this.arrowsPinById[t.annotationId].pinHostDomPortalOutlet;n&&(this.arrowsPinById[t.annotationId].pinHostElement?.removeAttribute(d.ATTRIBUTES.VELT_ARROW_PIN_HOST),this.arrowsPinById[t.annotationId].pinHostElement?.removeAttribute(d.ATTRIBUTES.VELT_ARROW_PIN_HOST_STATIC),n.detach(),delete this.arrowsPinById[t.annotationId],this.setPinPortal(t))}}else{let e=this.arrowsPinById[t.annotationId].pinHostDomPortalOutlet;e&&(this.arrowsPinById[t.annotationId].pinHostElement?.removeAttribute(d.ATTRIBUTES.VELT_ARROW_PIN_HOST),this.arrowsPinById[t.annotationId].pinHostElement?.removeAttribute(d.ATTRIBUTES.VELT_ARROW_PIN_HOST_STATIC),e.detach(),delete this.arrowsPinById[t.annotationId],this.setPinPortal(t))}}catch(e){this.loggingService.catch("Error in ArrowPinPortalService setArrowPin: ",e)}}setPinPortal(t){try{let e=this.domService.getXPath(t.targetElement?.xpath);if(e){let r=e.iterateNext();if(r){let i=this.domService.getHostElement(r),n=new Yt(fe),o=new Jt(i,this.appRef,this.injector),a=o.attach(n);a.instance.setArrowPinAnnotation(JSON.parse(JSON.stringify(t))),a.instance.setTargetElement(r),this.arrowsPinById[t.annotationId]={pinHostDomPortalOutlet:o,pinPortal:n,portalRef:a,annotation:JSON.parse(JSON.stringify(t)),userTargetElement:r,pinHostElement:i},i.setAttribute(d.ATTRIBUTES.VELT_ARROW_PIN_HOST,t.annotationId),window.getComputedStyle(i).position==="static"&&(ne(i)||i.setAttribute(d.ATTRIBUTES.VELT_ARROW_PIN_HOST_STATIC,"true")),this.updateElementOffset(t)}}}catch(e){this.loggingService.catch("Error in ArrowPinPortalService setPinPortal: ",e)}}updateElementOffset(t){try{let{portalRef:e,userTargetElement:r,pinHostElement:i}=this.arrowsPinById[t.annotationId],n=this.domService.getElementOffset(r,i);e.instance.setOffsetLeft(n.offsetLeft),e.instance.setOffsetTop(n.offsetTop)}catch(e){this.loggingService.catch("Error in ArrowPinPortalService updateElementOffset: ",e)}}checkPinsToRemove(t){try{let e=t.map(r=>r.annotationId);Object.keys(this.arrowsPinById).forEach(r=>{if(!e.includes(r)){let i=this.arrowsPinById[r];i.pinHostDomPortalOutlet.detach(),i.pinHostElement?.removeAttribute(d.ATTRIBUTES.VELT_ARROW_PIN_HOST),i.pinHostElement?.removeAttribute(d.ATTRIBUTES.VELT_ARROW_PIN_HOST_STATIC),this.domService.removeHighlightFromElement(i.pinHostElement),delete this.arrowsPinById[r]}})}catch(e){this.loggingService.catch("Error in ArrowPinPortalService checkPinsToRemove: ",e)}}};s.\u0275fac=function(e){return new(e||s)(v(D),v(Wt),v(Rt),v(Bt),v(A))},s.\u0275prov=j({token:s,factory:s.\u0275fac,providedIn:"root"});let l=s;return l})();var Dt=(()=>{let s=class s{constructor(t,e,r,i,n,o){this.analyticsService=t,this.authService=e,this.domService=r,this.arrowService=i,this.arrowPinPortalService=n,this.loggingService=o,this.arrowPinAnnotations=[],this.subscriptions=[],this.isFirstComponent=!0,this.veltId=ee(),this.veltElement=!0;try{this.loggingService.log("%c[WB] Creating CLASS: ArrowsContainerComponent","color: blue;")}catch(a){this.loggingService.catch("Error in ArrowsContainerComponent constructor: ",a)}}ngOnInit(){this.loggingService.log("%c[WB] Calling FUNCTION: ngOnInit","color: green;")}ngAfterViewInit(){try{let t=document.querySelector(d.TAGS.SNIPPYLY_ARROWS),e=document.querySelector(d.TAGS.VELT_ARROWS);e?this.veltId===e?.getAttribute(d.ATTRIBUTES.VELT_ID)&&(this.isFirstComponent=!0,this.initComponent()):this.veltId===t?.getAttribute(d.ATTRIBUTES.VELT_ID)&&(this.isFirstComponent=!0,this.initComponent())}catch(t){this.loggingService.catch("Error in ArrowsContainerComponent AfterViewInit: ",t)}}initComponent(){try{this.subscriptions.push(this.authService.getUser$().pipe(I(t=>!!t)).subscribe(t=>{t&&this.setArrowInstalledInAnalytics()},t=>{this.loggingService.catch("Error in getUser: ",t)})),this.getAllArrowsOnCurrentDocument()}catch(t){this.loggingService.catch("Error in ArrowsContainerComponent initComponent: ",t)}}getAllArrowsOnCurrentDocument(){this.loggingService.log("%c[WB] Calling FUNCTION: getAllArrowsOnCurrentDocument","color: green;");try{this.subscriptions.push(this.arrowService.getAllArrowAnnotations().pipe(I(t=>!!t),f(t=>this.domService.getSelectedAnnotationsMap$().pipe(S(e=>({annotations:t,selectedAnnotationsMap:e||{}}))))).subscribe(t=>{try{this.loggingService.log(t),this.arrowPinAnnotations=t?.annotations;let e=this.arrowPinAnnotations.filter(r=>r.targetElement);this.arrowPinPortalService.checkPinsToRemove(e),e.forEach(r=>{this.arrowPinPortalService.setArrowPin(r)})}catch(e){this.loggingService.catch("Error in ArrowsContainerComponent getAllArrowsOnCurrentDocument inside subscription: ",e)}},t=>{this.loggingService.catch("Error in ArrowsContainerComponent getAllArrowsOnCurrentDocument subscription: ",t)}))}catch(t){this.loggingService.catch("Error in ArrowsContainerComponent getAllArrowsOnCurrentDocument: ",t)}}ngOnDestroy(){this.loggingService.log("%c[WB] Calling FUNCTION: ngOnDestroy","color: green;");try{this.unsubscribe()}catch(t){this.loggingService.catch("Error in ArrowsContainerComponent ondestroy: ",t)}}unsubscribe(){this.loggingService.log("%c[WB] Calling FUNCTION: unsubscribe","color: green;");try{this.subscriptions.map(t=>{t.unsubscribe()}),this.subscriptions=[]}catch(t){this.loggingService.catch("Error in ArrowsContainerComponent unsubscribe: ",t)}}setArrowInstalledInAnalytics(){try{this.analyticsService.setInstalledFeature(H.ARROW)}catch(t){this.loggingService.catch("Error in ArrowsContainerComponent setArrowInstalledInAnalytics: ",t)}}};s.\u0275fac=function(e){return new(e||s)(p(x),p(V),p(D),p(M),p(Ae),p(A))},s.\u0275cmp=k({type:s,selectors:[["snippyly-arrows-container"]],hostVars:2,hostBindings:function(e,r){e&2&&B("data-velt-id",r.veltId)("data-velt-element",r.veltElement)},decls:0,vars:0,template:function(e,r){},encapsulation:2,changeDetection:0});let l=s;return l})();var Tt=(()=>{let s=class s extends pe{constructor(t,e,r,i,n,o,a,m,h){super(a,o,void 0,void 0,void 0,m,n),this.analyticsService=t,this.authService=e,this.arrowService=r,this.iamService=i,this.loggingService=n,this.themeService=o,this.elementRef=a,this.dynamicDataService=m,this.domService=h,this.customButtonAdded=!1,this.disabled=!1,this.addArrowMode=!1,this.subscriptions=[],this.veltElement=!0,this.subscriptions.push(this.authService.getUser$().subscribe(u=>{this.user=u},u=>{this.loggingService.catch("Error in ArrowsToolComponent getUser$ subscription: ",u)}))}ngAfterViewInit(){try{this.subscriptions.push(this.domService.subscribeInjectCustomCss(this.elementRef)),this.subscriptions.push(this.arrowService.addArrowModeChange().subscribe(t=>{this.addArrowMode=t})),this.subscriptions.push(this.iamService.getFeaturesAccessLevel$().subscribe(t=>{this.disabled=!!t?.all?.disabled}))}catch(t){this.loggingService.catch("Error in ArrowsToolComponent AfterViewInit: ",t)}}onButtonSlotChange(){this.customButtonAdded=!0}addArrow(){this.loggingService.log("%c[WB] Calling FUNCTION: addArrow","color: green;");try{if(this.analyticsService.trackEvent(_.Events.Arrow.ARROW_TOOL_CLICKED,{toolType:this.customButtonAdded?"custom":"default"}),this.user){if(this.disabled){this.loggingService.catch("Arrows are disabled.");return}this.user.isReadOnly||this.user.isAnonymous?this.loggingService.catch("Anonymous/Readonly users cannot add arrows."):!this.authService.isPlanExpired()&&this.iamService.getRole()?this.arrowService.enableAddArrowMode():this.loggingService.catch("User does not have permission to add arrows.")}else this.loggingService.catch("Velt sdk not authenticated.")}catch(t){this.loggingService.catch("Error in ArrowsToolComponent addArrow: ",t)}}ngOnDestroy(){this.loggingService.log("%c[WB] Calling FUNCTION: ngOnDestroy","color: green;");try{super.ngOnDestroy(),this.unsubscribe()}catch(t){this.loggingService.catch("Error in ArrowsToolComponent ondestroy: ",t)}}unsubscribe(){this.loggingService.log("%c[WB] Calling FUNCTION: unsubscribe","color: green;");try{this.subscriptions.map(t=>{t.unsubscribe()}),this.subscriptions=[]}catch(t){this.loggingService.catch("Error in ArrowsToolComponent unsubscribe: ",t)}}};s.\u0275fac=function(e){return new(e||s)(p(x),p(V),p(M),p(ut),p(A),p(me),p(ot),p(pt),p(D))},s.\u0275cmp=k({type:s,selectors:[["snippyly-arrows-tool"]],hostVars:1,hostBindings:function(e,r){e&2&&B("data-velt-element",r.veltElement)},features:[Ut([pt]),kt],decls:5,vars:2,consts:[["part","container",1,"snippyly-arrow-btn-container",3,"click"],["name","button",3,"slotchange"],["part","button-container","tabindex","0",1,"action-btn"],["part","button-icon","width","24","height","24","viewBox","0 0 25 24","fill","none","xmlns","http://www.w3.org/2000/svg",1,"action-btn-icon"],["d","M17.5 7L7.5 17M17.5 7H10M17.5 7V14.5","stroke","currentColor","stroke-width","1.5","stroke-linecap","round","stroke-linejoin","round"]],template:function(e,r){e&1&&(rt(0,"div",0),Pt("click",function(n){return r.addArrow(),n.stopPropagation()}),rt(1,"slot",1),Pt("slotchange",function(){return r.onButtonSlotChange()}),rt(2,"div",2),et(),rt(3,"svg",3),Ht(4,"path",4),Nt()()()()),e&2&&(O(2),N("active",r.addArrow