13563.278e546551669dc2.js

(self.webpackChunkdemo=self.webpackChunkdemo||[]).push([[13563],{13563:(e,t,n)=>{n.r(t),n.d(t,{default:()=>p});var i=n(16727),r=n(75407),l=n(19908),o=n(48032);function c(e,t){if(1&e&&r.EFF(0),2&e){const e=r.XpG().$implicit;r.SpI(" ",e.text," ")}}function s(e,t){if(1&e){const e=r.RV6();r.j41(0,"div",4)(1,"div",5),r.bIt("pointerup",(function(){r.eBV(e);const t=r.XpG().$implicit,n=r.XpG();return r.Njj(n.onDrop(t))})),r.k0s(),r.j41(2,"tui-tiles",6)(3,"tui-tile")(4,"div",7),r.bIt("pointerdown",(function(){r.eBV(e);const t=r.XpG().$implicit,n=r.XpG();return r.Njj(n.onDrag(t))})),r.EFF(5),r.k0s()()(),r.j41(6,"div",5),r.bIt("pointerup",(function(){r.eBV(e);const t=r.XpG().$implicit,n=r.XpG();return r.Njj(n.onDrop(t,1))})),r.k0s()()}if(2&e){const e=r.XpG().$implicit;r.R7$(5),r.SpI(" ",e.text," ")}}function d(e,t){if(1&e&&(r.DNE(0,c,1,1,"ng-template",null,2,r.C5r),r.DNE(2,s,7,1,"div",3)),2&e){const e=t.$implicit,n=r.sdS(1);r.R7$(2),r.Y8G("ngIf",!e.children)("ngIfElse",n)}}const p=(()=>{var e;class t{constructor(){this.drag=(0,r.vPA)(null),this.cd=(0,r.WQX)(r.gRc),this.data={text:"Topmost",children:[{text:"Top level 1",children:[{text:"Another item",children:[{text:"Next level 1"},{text:"Next level 2"},{text:"Next level 3"}]}]},{text:"Top level 2"},{text:"Top level 3",children:[{text:"Test 1"},{text:"Test 2"}]}]},this.handler=e=>e.children||l.Mlv}onDrag(e){this.drag.set(e)}onDrop(e,t=0){const n=this.drag();if(!n)return;const i=a(n,this.data),r=a(e,this.data);i&&(i.children=i?.children?.filter((e=>e!==n)));const l=(r?.children?.indexOf(e)??0)+t;r?.children&&(r.children=[...r.children.slice(0,l),n,...r.children.slice(l)]),this.drag.set(null)}}return(e=t).ɵfac=function(t){return new(t||e)},e.ɵcmp=r.VBU({type:e,selectors:[["ng-component"]],standalone:!0,exportAs:"Example8",features:[r.aNF],decls:3,vars:6,consts:[[1,"tree",3,"childrenHandler","content","tuiTreeController","value"],["content",""],["parent",""],["class","wrapper",4,"ngIf","ngIfElse"],[1,"wrapper"],[1,"drop",3,"pointerup"],[1,"tiles"],["tuiTileHandle","",1,"content",3,"pointerdown"]],template:function(e,t){if(1&e&&(r.j41(0,"tui-tree",0),r.DNE(1,d,3,2,"ng-template",null,1,r.C5r),r.k0s()),2&e){const e=r.sdS(2);r.AVh("_dragged",t.drag()),r.Y8G("childrenHandler",t.handler)("content",e)("tuiTreeController",!0)("value",t.data)}},dependencies:[i.bT,o.JK3,o.T$X,o.h$L,o.GQu,o.CHz,o.CtF],styles:[".tree._dragged[_ngcontent-%COMP%]   .drop[_ngcontent-%COMP%]{pointer-events:auto}.tree._dragged[_ngcontent-%COMP%]   .drop[_ngcontent-%COMP%]:hover{opacity:1}.wrapper[_ngcontent-%COMP%]{position:relative;inline-size:100%}.content[_ngcontent-%COMP%]{display:flex;inline-size:100%;align-items:center}.tiles[_ngcontent-%COMP%]{inline-size:100%;grid-template-rows:1.5rem}.drop[_ngcontent-%COMP%]{position:absolute;z-index:1;inline-size:100%;block-size:.5rem;margin-top:-.25rem;background:#87ceeb;border-radius:1rem;opacity:0;pointer-events:none}"],changeDetection:0}),t})();function a(e,t){if(!t.children)return null;if(t.children.includes(e))return t;for(const n of t.children){const t=a(e,n);if(t)return t}return null}}}]);