@netless/telebox-insider 1.0.0-alpha.7 → 1.0.0-alpha.8

package/dist/telebox-insider.es.js

@@ -1,2 +1,2 @@
-var e=Object.defineProperty,t=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,n=(e,t)=>{for(var i in t||(t={}))a.call(t,i)&&r(e,i,t[i]);if(s)for(var i of s(t))o.call(t,i)&&r(e,i,t[i]);return e};import h from"emittery";import l from"stylefire";import d from"shallowequal";import{SideEffectManager as c,genUID as m}from"side-effect-manager";import{combine as u,ValManager as x,Val as p,withReadonlyValueEnhancer as g,withValueEnhancer as f,derive as $}from"value-enhancer";import{ResizeObserver as b}from"@juggle/resize-observer";var v,w,y,C,E,z,B,_,N,M;(w=v||(v={})).Light="light",w.Dark="dark",w.Auto="auto",(C=y||(y={})).Normal="normal",C.Minimized="minimized",C.Maximized="maximized",(z=E||(E={})).DarkMode="dark_mode",z.PrefersColorScheme="prefers_color_scheme",z.Close="close",z.Focus="focus",z.Blur="blur",z.IntrinsicMove="intrinsic_move",z.IntrinsicResize="intrinsic_resize",z.ZIndex="z_index",z.State="state",z.Minimized="minimized",z.Maximized="maximized",z.Readonly="readonly",z.Destroyed="destroyed",(_=B||(B={})).Close="close",_.Maximize="maximize",_.Minimize="minimize",(M=N||(N={})).North="n",M.South="s",M.West="w",M.East="e",M.NorthWest="nw",M.NorthEast="ne",M.SouthEast="se",M.SouthWest="sw";const S="dh";function I(e,t,i){return Math.min(Math.max(e,t),i)}function k(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function R(e){return e.touches?e.touches[0]:e}let D=1;function L(){return"New Box "+D++}function T(e){return Boolean(e)}function V(e){return!e}class H{constructor({readonly$:e,state$:t,title$:i,buttons:s,onEvent:a,onDragStart:o,namespace:r="telebox"}){this.sideEffect=new c,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=e=>{var t;if(this.readonly$.value)return;if(0!==e.button)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;k(e);const i=Date.now();i-this.lastTitleBarClick.timestamp<=500?Math.abs(e.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(e.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:B.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=i,this.lastTitleBarClick.clientX=e.clientX,this.lastTitleBarClick.clientY=e.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=e=>{var t;if(this.readonly$.value)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;k(e);const i=Date.now(),{clientX:s=this.lastTitleBarTouch.clientX+100,clientY:a=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};i-this.lastTitleBarTouch.timestamp<=500?Math.abs(s-this.lastTitleBarTouch.clientX)<=10&&Math.abs(a-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:B.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=i,this.lastTitleBarTouch.clientX=s,this.lastTitleBarTouch.clientY=a},this.readonly$=e,this.state$=t,this.title$=i,this.onEvent=a,this.onDragStart=o,this.namespace=r,this.buttons=s||[{type:B.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:B.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===y.Maximized},{type:B.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle="dh";const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle="dh",e.appendChild(t),e.appendChild(this.$dragArea);const i=document.createElement("div");i.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e},t)=>{const s=String(t),a=document.createElement("button");a.className=`${this.wrapClassName("titlebar-btn")} ${e}`,a.dataset.teleTitleBarBtnIndex=s,a.dataset.teleTitleBarNoDblClick="true",i.appendChild(a)})),this.sideEffect.addDisposer(this.title$.subscribe((e=>{t.textContent=e,t.title=e})),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe((e=>{this.buttons.forEach(((t,s)=>{var a;t.isActive&&(null==(a=i.children[s])||a.classList.toggle("is-active",t.isActive(e)))}))})),"render-state-btns"),this.sideEffect.addEventListener(i,"click",(e=>{var t;if(this.readonly$.value)return;const i=e.target,s=Number(null==(t=i.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(s)&&s<this.buttons.length){k(e);const t=this.buttons[s];this.onEvent&&this.onEvent({type:t.type,value:t.value})}}),{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(i)}return this.$titleBar}renderDragArea(){const e=document.createElement("div");return e.className=this.wrapClassName("drag-area"),e.dataset.teleBoxHandle="dh",this.sideEffect.addEventListener(e,"mousedown",this.handleTitleBarClick),this.sideEffect.addEventListener(e,"touchstart",this.handleTitleBarTouch,{passive:!0}),e}dragHandle(){return this.$titleBar}wrapClassName(e){return`${this.namespace}-${e}`}destroy(){this.sideEffect.flushAll(),this.$titleBar&&(this.$titleBar=void 0,this.onDragStart=void 0,this.onEvent=void 0)}}class A{constructor({namespace:e,rootRect$:t,ratio$:i,highlightStage$:s,root$:a}){this._sideEffect=new c,this.namespace=e,this.highlightStage$=s,this.stageRect$=u([t,i],(([e,t])=>{if(t<=0||e.width<=0||e.height<=0)return e;const i=e.width*t;if(i===e.height)return e;if(i<e.height)return{x:0,y:(e.height-i)/2,width:e.width,height:i};const s=e.height/t;return{x:(e.width-s)/2,y:0,width:s,height:e.height}}),{compare:d}),this._sideEffect.addDisposer(u([a,s]).subscribe((([e,t])=>{var i;e&&t?e.appendChild(this.render()):(null==(i=this.$boxStage)?void 0:i.parentNode)&&this.$boxStage.remove()})))}render(){if(this.$boxStage)return this.$boxStage;const e=document.createElement("div");e.className=this.wrapClassName("box-stage-container");const t=document.createElement("div");t.className=this.wrapClassName("box-stage-mask");const i=document.createElement("div");i.className=this.wrapClassName("box-stage-mask");const s=document.createElement("div");s.className=this.wrapClassName("box-stage-frame");const[a,o,r,n]=["M0 8V0h8v2H2v6H0Z","M8 8V0H0v2h6v6h2Z","M0 0v8h8V6H2V0H0Z","M8 0v8H0V6h6V0h2Z"].map(((e,t)=>{const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("viewBox","0 0 8 8"),i.setAttribute("class",`${this.wrapClassName("box-stage-frame-corner")} is-${t}`);const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",e),s.setAttribute("fill","#3381FF"),i.appendChild(s),i}));return s.appendChild(a),s.appendChild(r),s.appendChild(o),s.appendChild(n),e.appendChild(t),e.appendChild(s),e.appendChild(i),this._sideEffect.addDisposer(this.highlightStage$.subscribe((t=>{e.classList.toggle("is-active",t)}))),this._sideEffect.addDisposer(u([this.highlightStage$,this.stageRect$]).subscribe((([s,a])=>{s&&(a.x>0?(e.style.flexDirection="row",t.style.width=`${a.x}px`,t.style.height="",i.style.width=`${a.x}px`,i.style.height=""):a.y>0&&(e.style.flexDirection="column",t.style.width="",t.style.height=`${a.y}px`,i.style.width="",i.style.height=`${a.y}px`))}))),this.$boxStage=e,e}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}const W=window.ResizeObserver||b;class Y{constructor({id:e=m(),title:t=L(),namespace:i="telebox",visible:s=!0,width:a=.5,height:o=.5,minWidth:r=0,minHeight:n=0,x:l=.1,y:$=.1,resizable:b=!0,draggable:v=!0,ratio:w=-1,focus:C=!1,zIndex:z=100,titleBar:B,content:_,footer:N,styles:M,highlightStage:S=null,darkMode$:k,fence$:R,minimized$:D,maximized$:T,readonly$:V,root$:W,rootRect$:Y,managerStageRect$:X,stageRatio$:P,collectorRect$:O,managerHighlightStage$:j}){this.events=new h,this._delegateEvents=new h,this.handleTrackStart=e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},this._sideEffect=new c,this.id=e,this.namespace=i;const Z=new x;this._sideEffect.addDisposer((()=>Z.destroy()));const F=new p(t),G=new p(s),J=new p(b),q=new p(v),Q=new p(w),K=new p(z),U=new p(C),ee=new p(_),te=new p(N),ie=new p(M),se=u([D,T],(([e,t])=>e?y.Minimized:t?y.Maximized:y.Normal)),ae=new p({width:I(r,0,1),height:I(n,0,1)},{compare:d}),oe=u([ae,X],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:d}),re=new p({width:a,height:o},{compare:d});this._sideEffect.addDisposer(ae.reaction(((e,t)=>{re.setValue({width:Math.max(a,e.width),height:Math.max(o,e.height)},t)})));const ne=new p({x:l,y:$},{compare:d}),he=u([re,X],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:d}),le=u([ne,X],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:d}),de=new p(S),ce=u([T,de,j],(([e,t,i])=>null===t?i&&e:t)),me=new p(null),ue=new p(Y.value,{compare:d}),xe=new A({namespace:i,root$:me,rootRect$:ue,ratio$:P,highlightStage$:ce});this._sideEffect.addDisposer((()=>xe.destroy()));g(this,{darkMode:k,fence:R,minimized:D,maximized:T,readonly:V,rootRect:Y,managerStageRect:X,collectorRect:O});const pe={zIndex:K,focus:U,$userContent:ee,$userFooter:te,$userStyles:ie,state:se,minSize:ae,pxMinSize:oe,intrinsicSize:re,intrinsicCoord:ne,pxIntrinsicSize:he,pxIntrinsicCoord:le,highlightStage:ce,boxHighlightStage:de,contentRect:ue,contentStageRect:xe.stageRect$};g(this,pe,Z);f(this,{title:F,visible:G,resizable:J,draggable:q,ratio:Q},Z),this.titleBar=B||new H({readonly$:V,state$:se,title$:F,namespace:this.namespace,onDragStart:e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},onEvent:e=>this._delegateEvents.emit(e.type)}),this._sideEffect.addDisposer(Q.subscribe((e=>{e>0&&this.transform(le.value.x,le.value.y,he.value.width,he.value.height,!0)}))),this._sideEffect.addDisposer(R.subscribe((e=>{e&&this.move(le.value.x,le.value.y,!0)}))),this.$box=this.render(),me.setValue(this.$content.parentElement);const ge=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,i)=>{i||this.events.emit(t,e)})))};ge(k,E.DarkMode),ge(V,E.Readonly),ge(K,E.ZIndex),ge(D,E.Minimized),ge(T,E.Maximized),ge(se,E.State),ge(re,E.IntrinsicResize),ge(ne,E.IntrinsicMove),this._sideEffect.addDisposer([G.reaction(((e,t)=>{t||e||this.events.emit(E.Close)})),U.reaction(((e,t)=>{t||this.events.emit(e?E.Focus:E.Blur)})),W.subscribe((e=>{e?e.appendChild(this.$box):this.$box.parentNode&&this.$box.remove()}))])}get minWidth(){return this._minSize$.value.width}get minHeight(){return this._minSize$.value.height}setMinWidth(e,t=!1){this._minSize$.setValue({width:e,height:this.minHeight},t)}setMinHeight(e,t=!1){this._minSize$.setValue({width:this.minWidth,height:e},t)}resize(e,t,i=!1){this._intrinsicSize$.setValue({width:Math.max(e,this.minWidth),height:Math.max(t,this.minHeight)},i)}get intrinsicX(){return this._intrinsicCoord$.value.x}get intrinsicY(){return this._intrinsicCoord$.value.y}get intrinsicWidth(){return this._intrinsicSize$.value.width}get intrinsicHeight(){return this._intrinsicSize$.value.height}move(e,t,i=!1){let s,a;const o=this.managerStageRect,r=this.pxIntrinsicSize;if(this.fence)s=I(e,o.x,o.x+o.width-r.width),a=I(t,o.y,o.y+o.height-r.height);else{const i=this.rootRect;s=I(e,i.x-r.width+20,i.x+i.width-20),a=I(t,i.y,i.y+i.height-20)}this._intrinsicCoord$.setValue({x:(s-o.x)/o.width,y:(a-o.y)/o.height},i)}transform(e,t,i,s,a=!1){const o=this.managerStageRect,r=this.rootRect;if(i=Math.max(i,this.pxMinSize.width),s=Math.max(s,this.pxMinSize.height),this.ratio>0){const e=this.ratio*i;t!==this.pxIntrinsicCoord.y&&(t-=e-s),s=e}t<r.y&&(t=r.y,s=this.pxIntrinsicSize.height),this.move(e,t,a),this._intrinsicSize$.setValue({width:i/o.width,height:s/o.height},a)}mountContent(e){this._$userContent$.setValue(e)}unmountContent(){this._$userContent$.setValue(void 0)}mountFooter(e){this._$userFooter$.setValue(e)}unmountFooter(){this._$userFooter$.setValue(void 0)}getUserStyles(){return this.$userStyles}mountStyles(e){let t;"string"==typeof e?(t=document.createElement("style"),t.textContent=e):t=e,this._$userStyles$.setValue(t)}unmountStyles(){this._$userStyles$.setValue(void 0)}setHighlightStage(e){this._boxHighlightStage$.setValue(e)}render(){if(this.$box)return this.$box;this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box"));const e=(e,t,i,s=T)=>this._sideEffect.add((()=>{const a=this.wrapClassName(i);return t.subscribe((t=>{e.classList.toggle(a,s(t))}))}));e(this.$box,this._readonly$,"readonly"),e(this.$box,this._draggable$,"no-drag",V),e(this.$box,this._resizable$,"no-resize",V),e(this.$box,this._focus$,"blur",V),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",V),this._sideEffect.add((()=>{const e=this.wrapClassName("minimized"),t=this.wrapClassName("maximized"),i="box-maximized-timer";return this._state$.subscribe((s=>{this.$box.classList.toggle(e,s===y.Minimized),s===y.Maximized?(this._sideEffect.flush(i),this.$box.classList.toggle(t,!0)):this._sideEffect.setTimeout((()=>{this.$box.classList.toggle(t,!1)}),0,i)}))})),this._sideEffect.addDisposer(this._visible$.subscribe((e=>{this.$box.style.display=e?"block":"none"}))),this._sideEffect.addDisposer(this._zIndex$.subscribe((e=>{this.$box.style.zIndex=String(e)}))),this.$box.dataset.teleBoxID=this.id;const t=l(this.$box),i=u([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$],(([e,t,i,s,a])=>{const o=e?{x:0,y:0,width:"100%",height:"100%",scaleX:1,scaleY:1}:{x:s.x,y:s.y,width:i.width+"px",height:i.height+"px",scaleX:1,scaleY:1};if(t&&a){const t=e?this.rootRect.width:i.width,s=e?this.rootRect.height:i.height;o.x=a.x-t/2+a.width/2,o.y=a.y-s/2+a.height/2,o.scaleX=a.width/t,o.scaleY=a.height/s}return o}),{compare:d}),s=i.value;this.$box.style.width=s.width,this.$box.style.height=s.height,this.$box.style.transform=`translate(${s.x-10}px,${s.y-10}px)`,this._sideEffect.addDisposer(i.subscribe((e=>{t.set(e)})));const a=document.createElement("div");a.className=this.wrapClassName("box-main"),this.$box.appendChild(a);const o=document.createElement("div");o.className=this.wrapClassName("titlebar-wrap"),o.appendChild(this.titleBar.render()),this.$titleBar=o;const r=document.createElement("div");r.className=this.wrapClassName("content-wrap");const n=document.createElement("div");n.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=n,this._sideEffect.add((()=>{const e=new W((e=>{var t;const i=null==(t=e[0])?void 0:t.contentRect;i&&this._contentRect$.setValue({x:i.x,y:i.y,width:i.width,height:i.height})}));return e.observe(n),()=>e.disconnect()})),this._sideEffect.add((()=>{let e;return this._$userStyles$.subscribe((t=>{e&&e.remove(),e=t,t&&r.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userContent$.subscribe((t=>{e&&e.remove(),e=t,t&&n.appendChild(t)}))})),r.appendChild(n);const h=document.createElement("div");return h.className=this.wrapClassName("footer-wrap"),this.$footer=h,this._sideEffect.add((()=>{let e;return this._$userFooter$.subscribe((t=>{e&&e.remove(),e=t,t&&h.appendChild(t)}))})),a.appendChild(o),a.appendChild(r),a.appendChild(h),this._renderResizeHandlers(),this.$box}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(N).forEach((t=>{const i=document.createElement("div");i.className=this.wrapClassName(t)+" "+this.wrapClassName("resize-handle"),i.dataset.teleBoxHandle=t,e.appendChild(i)})),this.$box.appendChild(e);const t="handle-tracking-listener",i=this.wrapClassName("transforming");let s,a,o=0,r=0,n=0,h=0,l=0,d=0;const c=e=>{if(this.state!==y.Normal)return;k(e);let{pageX:t,pageY:i}=R(e);i<this.rootRect.y&&(i=this.rootRect.y);const s=t-l,c=i-d;let{x:m,y:u}=this.pxIntrinsicCoord,{width:x,height:p}=this.pxIntrinsicSize;switch(a){case N.North:u=r+c,p=h-c;break;case N.South:p=h+c;break;case N.West:m=o+s,x=n-s;break;case N.East:x=n+s;break;case N.NorthWest:m=o+s,u=r+c,x=n-s,p=h-c;break;case N.NorthEast:u=r+c,x=n+s,p=h-c;break;case N.SouthEast:x=n+s,p=h+c;break;case N.SouthWest:m=o+s,x=n-s,p=h+c;break;default:return void this.move(o+s,r+c)}this.transform(m,u,x,p)},m=e=>{a=void 0,s&&(k(e),this.$box.classList.toggle(i,!1),this._sideEffect.flush(t),s.remove())},u=e=>{var u;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||a||this.state!==y.Normal)return;const x=e.target;if(null==(u=x.dataset)?void 0:u.teleBoxHandle){k(e),({x:o,y:r}=this.pxIntrinsicCoord),({width:n,height:h}=this.pxIntrinsicSize),({pageX:l,pageY:d}=R(e)),a=x.dataset.teleBoxHandle,s||(s=document.createElement("div"));const u=a?this.wrapClassName(`cursor-${a}`):"";s.className=this.wrapClassName("track-mask"+(u?` ${u}`:"")),this.$box.appendChild(s),this.$box.classList.add(i),this._sideEffect.add((()=>(window.addEventListener("mousemove",c),window.addEventListener("touchmove",c,{passive:!1}),window.addEventListener("mouseup",m),window.addEventListener("touchend",m,{passive:!1}),window.addEventListener("touchcancel",m,{passive:!1}),()=>{window.removeEventListener("mousemove",c),window.removeEventListener("touchmove",c),window.removeEventListener("mouseup",m),window.removeEventListener("touchend",m),window.removeEventListener("touchcancel",m)})),t)}};this._handleTrackStart=u,this._sideEffect.addEventListener(e,"mousedown",u,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",u,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(E.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var X,P;class O{constructor({minimized$:e,readonly$:t,darkMode$:i,rootRect$:s,namespace:a="telebox",styles:o={},root$:r}){this._sideEffect=new c,this.namespace=a;const n=new x;this._sideEffect.addDisposer((()=>n.destroy()));const h=new p(void 0),l=$(e),d=new p(o),m=new p(document.createElement("button"));f(this,{styles:d,$collector:m},n);g(this,{root:r});g(this,{rect:h,visible:l},n),m.value.className=this.wrapClassName("collector"),m.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(m.subscribe((a=>{this._sideEffect.addEventListener(a,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([l.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-visible"),e)})),t.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-readonly"),e)})),i.subscribe((e=>{a.classList.toggle(this.wrapClassName("color-scheme-dark"),e),a.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),d.subscribe((e=>{Object.keys(e).forEach((t=>{const i=e[t];null!=i&&(a.style[t]=i)}))})),r.subscribe((e=>{e&&e.appendChild(a)})),u([e,s,r]).subscribe((([e,t,i])=>{if(e&&i){const{x:e,y:i,width:s,height:o}=a.getBoundingClientRect();h.setValue({x:e-t.x,y:i-t.y,width:s,height:o})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}(P=X||(X={})).Focused="focused",P.Blurred="blurred",P.Created="created",P.Removed="removed",P.State="state",P.Maximized="maximized",P.Minimized="minimized",P.IntrinsicMove="intrinsic_move",P.IntrinsicResize="intrinsic_resize",P.ZIndex="z_index",P.PrefersColorScheme="prefers_color_scheme",P.DarkMode="dark_mode";class j extends H{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,this.sideEffect.addDisposer(e.root$.subscribe((e=>{var t;e?e.appendChild(this.render()):(null==(t=this.$titleBar)?void 0:t.parentNode)&&this.$titleBar.remove()})))}focusBox(e){var t;if(!this.focusedBox||this.focusedBox!==e){if(this.$titles&&this.state$.value===y.Maximized){const{children:i}=this.$titles.firstElementChild;for(let s=i.length-1;s>=0;s-=1){const a=i[s],o=null==(t=a.dataset)?void 0:t.teleBoxID;o&&(e&&o===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&o===this.focusedBox.id&&a.classList.toggle(this.wrapClassName("titles-tab-focus"),!1))}}this.focusedBox=e}}render(){if(this.$titleBar)return this.$titleBar;const e=super.render();e.classList.add(this.wrapClassName("max-titlebar")),this.sideEffect.addDisposer([this.rootRect$.subscribe((t=>{const{x:i,y:s,width:a}=t;e.style.transform=`translate(${i}px, ${s}px)`,e.style.width=a+"px"})),this.state$.subscribe((t=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),t===y.Maximized)})),this.readonly$.subscribe((t=>{e.classList.toggle(this.wrapClassName("readonly"),t)})),this.darkMode$.subscribe((t=>{e.classList.toggle(this.wrapClassName("color-scheme-dark"),t),e.classList.toggle(this.wrapClassName("color-scheme-light"),!t)})),u([this.state$,this.boxes$]).subscribe((([t,i])=>{t===y.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===i.length),1!==i.length&&e.replaceChild(this.renderTitles(),e.firstElementChild))}))],"max-render");const t=document.createElement("div");return t.classList.add(this.wrapClassName("titles-area")),e.insertBefore(t,e.firstElementChild),e}destroy(){super.destroy(),this.$titles=void 0,this.focusedBox=void 0}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.sideEffect.addEventListener(this.$titles,"wheel",(e=>{e.currentTarget.scrollBy({left:e.deltaY>0?250:-250,behavior:"smooth"})}),{passive:!1},"max-render-wheel-titles");const e=document.createElement("div");e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e);const t=this.boxes$.value.map((t=>{const i=document.createElement("button");return i.className=this.wrapClassName("titles-tab"),i.textContent=t.title,i.dataset.teleBoxID=t.id,i.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&i.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(i),t._title$.reaction((e=>i.textContent=e))}));return this.sideEffect.addDisposer((()=>t.forEach((e=>e()))),"max-render-tab-titles"),this.$titles}}const Z=window.ResizeObserver||b;class F{constructor({root:e=null,prefersColorScheme:t=v.Light,minimized:i=!1,maximized:s=!1,fence:a=!1,collector:o,namespace:r="telebox",readonly:n=!1,stageRatio:l=-1,highlightStage:m=!0}={}){this.events=new h,this._sideEffect=new c,this.namespace=r;const b=new x;this._sideEffect.addDisposer((()=>b.destroy()));const w=new p(e),C=new p(n),z=new p(i),_=new p(s),N=new p(a),M=new p(l),S=new p(m),I=new p({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:d});this._sideEffect.addDisposer(w.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new Z((e=>{var t;const i=null==(t=e[0])?void 0:t.contentRect;i&&I.setValue({x:i.x,y:i.y,width:i.width,height:i.height})}));return t.observe(e),()=>t.disconnect()}),"calc-root-rect")}))),this.boxes$=new p([]),this.topBox$=new p(void 0),this._sideEffect.addDisposer(this.boxes$.subscribe((e=>{if(e.length>0){const t=e.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(t)}else this.topBox$.setValue(void 0)})));const k=window.matchMedia("(prefers-color-scheme: dark)"),R=new p(!1);k&&(R.setValue(k.matches),this._sideEffect.add((()=>{const e=e=>{R.setValue(e.matches)};return k.addEventListener("change",e),()=>k.removeEventListener("change",e)})));const D=new p(t);this._sideEffect.addDisposer(D.reaction(((e,t)=>{t||this.events.emit(X.PrefersColorScheme,e)})));const L=u([R,D],(([e,t])=>"auto"===t?e:"dark"===t)),T=u([z,_],(([e,t])=>e?y.Minimized:t?y.Maximized:y.Normal));this.collector=null!=o?o:new O({minimized$:z,readonly$:C,darkMode$:L,namespace:r,root$:w,rootRect$:I});const V=new A({namespace:r,rootRect$:I,ratio$:M,root$:w,highlightStage$:u([S,_,z],(([e,t,i])=>e&&(i||!t)))});this._sideEffect.addDisposer((()=>V.destroy()));const H={darkMode:L,state:T,root:w,rootRect:I,stageRect:V.stageRect$};g(this,H,b);f(this,{prefersColorScheme:D,readonly:C,fence:N,minimized:z,maximized:_,stageRatio:M,highlightStage:S},b);const W=this.wrapClassName("titlebar-icon-close"),Y=e=>{var t;if(C.value)return;const i=e.target;if(i.tagName)for(let s=i;s;s=s.parentElement){if(s.classList&&s.classList.contains(W))return;const e=null==(t=s.dataset)?void 0:t.teleBoxID;if(e){const t=this.getBox(e);if(t)return this.focusBox(t),void this.makeBoxTop(t)}}};this._sideEffect.addEventListener(window,"mousedown",Y,!0),this._sideEffect.addEventListener(window,"touchstart",Y,!0),this.titleBar=new j({namespace:this.namespace,title$:$(this.topBox$,(e=>(null==e?void 0:e.title)||"")),boxes$:this.boxes$,darkMode$:L,readonly$:C,state$:T,root$:w,rootRect$:I,onEvent:e=>{switch(e.type){case B.Maximize:_.setValue(!_.value);break;case B.Minimize:z.setValue(!0);break;case E.Close:this.removeTopBox(),this.focusTopBox()}}}),this._sideEffect.addDisposer([T.reaction(((e,t)=>{t||this.events.emit(X.State,e)})),_.reaction(((e,t)=>{t||this.events.emit(X.Maximized,e)})),z.reaction(((e,t)=>{t||this.events.emit(X.Minimized,e)})),L.reaction(((e,t)=>{t||this.events.emit(X.DarkMode,e)}))])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case y.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case y.Minimized:this.setMinimized(!0,t),this.setMaximized(!1,t);break;default:this.setMinimized(!1,t),this.setMaximized(!1,t)}return this}create(e={},s=!0){const a=new Y((o=n(n({zIndex:this.topBox?this.topBox.zIndex+1:100},e),s?this.smartPosition(e):{}),r={namespace:this.namespace,root$:this._root$,darkMode$:this._darkMode$,maximized$:this._maximized$,minimized$:this._minimized$,fence$:this._fence$,rootRect$:this._rootRect$,managerStageRect$:this._stageRect$,stageRatio$:this._stageRatio$,readonly$:this._readonly$,collectorRect$:this.collector._rect$,managerHighlightStage$:this._highlightStage$},t(o,i(r))));var o,r;return a.focus&&(this.focusBox(a),s&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(B.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(B.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(B.Close,(()=>{this.remove(a),this.focusTopBox()})),a._intrinsicCoord$.reaction(((e,t)=>{t||this.events.emit(X.IntrinsicMove,a)})),a._intrinsicSize$.reaction(((e,t)=>{t||this.events.emit(X.IntrinsicResize,a)})),a._zIndex$.reaction(((e,t)=>{if(this.boxes.length>0){const e=this.boxes.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(e)}t||this.events.emit(X.ZIndex,a)}))]),this.events.emit(X.Created,a),a}query(e){return e?this.boxes.filter(this.teleBoxMatcher(e)):[...this.boxes]}queryOne(e){return e?this.boxes.find(this.teleBoxMatcher(e)):this.boxes[0]}update(e,t,i=!1){const s=this.boxes.find((t=>t.id===e));if(s)return this.updateBox(s,t,i)}updateAll(e,t=!1){this.boxes.forEach((i=>{this.updateBox(i,e,t)}))}remove(e,t=!1){const i=this.getBoxIndex(e);if(i>=0){const e=this.boxes.slice(),s=e.splice(i,1);return this.boxes$.setValue(e),s.forEach((e=>e.destroy())),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(X.Removed,s)),s[0]}}removeTopBox(){if(this.topBox)return this.remove(this.topBox)}removeAll(e=!1){const t=this.boxes$.value;return this.boxes$.setValue([]),t.forEach((e=>e.destroy())),e||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(X.Removed,t)),t}mount(e){this._root$.setValue(e)}unmount(){this._root$.setValue(null)}destroy(e=!1){this.events.clearListeners(),this._sideEffect.flushAll(),this.removeAll(e),this.collector.destroy(),this.titleBar.destroy()}wrapClassName(e){return`${this.namespace}-${e}`}focusBox(e,t=!1){const i=this.getBox(e);i&&(this.boxes.forEach((e=>{if(i===e){let e=!1;i.focus||(e=!0,i._focus$.setValue(!0,t)),e&&!t&&this.events.emit(X.Focused,i)}else e.focus&&this.blurBox(e,t)})),this.titleBar.focusBox(i))}focusTopBox(){if(this.topBox&&!this.topBox.focus)return this.focusBox(this.topBox)}blurBox(e,t=!1){const i=this.getBox(e);i&&(i.focus&&(i._focus$.setValue(!1,t),t||this.events.emit(X.Blurred,i)),this.titleBar.focusedBox===i&&this.titleBar.focusBox())}blurAll(e=!1){this.boxes.forEach((t=>{t.focus&&(t._focus$.setValue(!1,e),e||this.events.emit(X.Blurred,t))})),this.titleBar.focusedBox&&this.titleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return i=>t.every((t=>e[t]===i[t]))}updateBox(e,t,i=!1){var s,a,o,r,n,h;null==t.x&&null==t.y||e._intrinsicCoord$.setValue({x:null!=(s=t.x)?s:e.intrinsicX,y:null!=(a=t.y)?a:e.intrinsicY},i),null==t.width&&null==t.height||e._intrinsicSize$.setValue({width:null!=(o=t.width)?o:e.intrinsicWidth,height:null!=(r=t.height)?r:e.intrinsicHeight},i),null!=t.title&&e._title$.setValue(t.title),null!=t.visible&&e._visible$.setValue(t.visible,i),null!=t.resizable&&e._resizable$.setValue(t.resizable,i),null!=t.draggable&&e._draggable$.setValue(t.draggable,i),null!=t.ratio&&e._ratio$.setValue(t.ratio,i),null!=t.zIndex&&e._zIndex$.setValue(t.zIndex,i),null!=t.content&&e.mountContent(t.content),null!=t.footer&&e.mountFooter(t.footer),null==t.minHeight&&null==t.minWidth||e._minSize$.setValue({width:null!=(n=t.minWidth)?n:e.minWidth,height:null!=(h=t.minHeight)?h:e.minHeight},i)}smartPosition(e){let{x:t,y:i}=e;const{width:s=.5,height:a=.5}=e,o=this.stageRect,r=this.topBox;if(null==t){let e=o.x+20;if(r){const t=r.pxIntrinsicCoord.x+20;t+s*o.width<=o.x+o.width&&(e=t)}t=(e-o.x)/o.width}if(null==i){let e=o.y+20;if(r){const t=r.pxIntrinsicCoord.y+20;t+a*o.height<=o.y+o.height&&(e=t)}i=(e-o.y)/o.height}return{x:t,y:i,width:s,height:a}}makeBoxTop(e,t=!1){this.topBox&&e!==this.topBox&&e._zIndex$.setValue(this.topBox.zIndex+1,t)}getBoxIndex(e){return"string"==typeof e?this.boxes.findIndex((t=>t.id===e)):this.boxes.findIndex((t=>t===e))}getBox(e){return"string"==typeof e?this.boxes.find((t=>t.id===e)):e}}export{H as DefaultTitleBar,v as TELE_BOX_COLOR_SCHEME,B as TELE_BOX_DELEGATE_EVENT,E as TELE_BOX_EVENT,X as TELE_BOX_MANAGER_EVENT,N as TELE_BOX_RESIZE_HANDLE,y as TELE_BOX_STATE,Y as TeleBox,O as TeleBoxCollector,S as TeleBoxDragHandleType,F as TeleBoxManager};
+var e=Object.defineProperty,t=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,n=(e,t)=>{for(var i in t||(t={}))a.call(t,i)&&r(e,i,t[i]);if(s)for(var i of s(t))o.call(t,i)&&r(e,i,t[i]);return e};import h from"emittery";import l from"stylefire";import d from"shallowequal";import{SideEffectManager as c,genUID as m}from"side-effect-manager";import{combine as u,ValManager as x,Val as g,withReadonlyValueEnhancer as p,withValueEnhancer as f,derive as $}from"value-enhancer";import{ResizeObserver as b}from"@juggle/resize-observer";var v,w,C,y,E,z,B,_,N,M;(w=v||(v={})).Light="light",w.Dark="dark",w.Auto="auto",(y=C||(C={})).Normal="normal",y.Minimized="minimized",y.Maximized="maximized",(z=E||(E={})).DarkMode="dark_mode",z.PrefersColorScheme="prefers_color_scheme",z.Close="close",z.Focus="focus",z.Blur="blur",z.IntrinsicMove="intrinsic_move",z.IntrinsicResize="intrinsic_resize",z.ZIndex="z_index",z.State="state",z.Minimized="minimized",z.Maximized="maximized",z.Readonly="readonly",z.Destroyed="destroyed",(_=B||(B={})).Close="close",_.Maximize="maximize",_.Minimize="minimize",(M=N||(N={})).North="n",M.South="s",M.West="w",M.East="e",M.NorthWest="nw",M.NorthEast="ne",M.SouthEast="se",M.SouthWest="sw";const S="dh";function I(e,t,i){return Math.min(Math.max(e,t),i)}function k(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function R(e){return e.touches?e.touches[0]:e}let D=1;function L(){return"New Box "+D++}function T(e){return Boolean(e)}function V(e){return!e}class H{constructor({readonly$:e,state$:t,title$:i,buttons:s,onEvent:a,onDragStart:o,namespace:r="telebox"}){this.sideEffect=new c,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=e=>{var t;if(this.readonly$.value)return;if(0!==e.button)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;k(e);const i=Date.now();i-this.lastTitleBarClick.timestamp<=500?Math.abs(e.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(e.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:B.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=i,this.lastTitleBarClick.clientX=e.clientX,this.lastTitleBarClick.clientY=e.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=e=>{var t;if(this.readonly$.value)return;if(null==(t=e.target.dataset)?void 0:t.teleTitleBarNoDblClick)return;k(e);const i=Date.now(),{clientX:s=this.lastTitleBarTouch.clientX+100,clientY:a=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};i-this.lastTitleBarTouch.timestamp<=500?Math.abs(s-this.lastTitleBarTouch.clientX)<=10&&Math.abs(a-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:B.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=i,this.lastTitleBarTouch.clientX=s,this.lastTitleBarTouch.clientY=a},this.readonly$=e,this.state$=t,this.title$=i,this.onEvent=a,this.onDragStart=o,this.namespace=r,this.buttons=s||[{type:B.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:B.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===C.Maximized},{type:B.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle="dh";const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle="dh",e.appendChild(t),e.appendChild(this.$dragArea);const i=document.createElement("div");i.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e},t)=>{const s=String(t),a=document.createElement("button");a.className=`${this.wrapClassName("titlebar-btn")} ${e}`,a.dataset.teleTitleBarBtnIndex=s,a.dataset.teleTitleBarNoDblClick="true",i.appendChild(a)})),this.sideEffect.addDisposer(this.title$.subscribe((e=>{t.textContent=e,t.title=e})),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe((e=>{this.buttons.forEach(((t,s)=>{var a;t.isActive&&(null==(a=i.children[s])||a.classList.toggle("is-active",t.isActive(e)))}))})),"render-state-btns"),this.sideEffect.addEventListener(i,"click",(e=>{var t;if(this.readonly$.value)return;const i=e.target,s=Number(null==(t=i.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(s)&&s<this.buttons.length){k(e);const t=this.buttons[s];this.onEvent&&this.onEvent({type:t.type,value:t.value})}}),{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(i)}return this.$titleBar}renderDragArea(){const e=document.createElement("div");return e.className=this.wrapClassName("drag-area"),e.dataset.teleBoxHandle="dh",this.sideEffect.addEventListener(e,"mousedown",this.handleTitleBarClick),this.sideEffect.addEventListener(e,"touchstart",this.handleTitleBarTouch,{passive:!0}),e}dragHandle(){return this.$titleBar}wrapClassName(e){return`${this.namespace}-${e}`}destroy(){this.sideEffect.flushAll(),this.$titleBar&&(this.$titleBar=void 0,this.onDragStart=void 0,this.onEvent=void 0)}}class A{constructor({namespace:e,rootRect$:t,ratio$:i,highlightStage$:s,root$:a}){this._sideEffect=new c,this.namespace=e,this.highlightStage$=s,this.stageRect$=u([t,i],(([e,t])=>{if(t<=0||e.width<=0||e.height<=0)return e;const i=e.width*t;if(i===e.height)return e;if(i<e.height)return{x:0,y:(e.height-i)/2,width:e.width,height:i};const s=e.height/t;return{x:(e.width-s)/2,y:0,width:s,height:e.height}}),{compare:d}),this._sideEffect.addDisposer(u([a,s]).subscribe((([e,t])=>{var i;e&&t?e.appendChild(this.render()):(null==(i=this.$boxStage)?void 0:i.parentNode)&&this.$boxStage.remove()})))}render(){if(this.$boxStage)return this.$boxStage;const e=document.createElement("div");e.className=this.wrapClassName("box-stage-container");const t=document.createElement("div");t.className=this.wrapClassName("box-stage-mask");const i=document.createElement("div");i.className=this.wrapClassName("box-stage-mask");const s=document.createElement("div");s.className=this.wrapClassName("box-stage-frame");const[a,o,r,n]=["M0 8V0h8v2H2v6H0Z","M8 8V0H0v2h6v6h2Z","M0 0v8h8V6H2V0H0Z","M8 0v8H0V6h6V0h2Z"].map(((e,t)=>{const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("viewBox","0 0 8 8"),i.setAttribute("class",`${this.wrapClassName("box-stage-frame-corner")} is-${t}`);const s=document.createElementNS("http://www.w3.org/2000/svg","path");return s.setAttribute("d",e),s.setAttribute("fill","#3381FF"),i.appendChild(s),i}));return s.appendChild(a),s.appendChild(r),s.appendChild(o),s.appendChild(n),e.appendChild(t),e.appendChild(s),e.appendChild(i),this._sideEffect.addDisposer(this.highlightStage$.subscribe((t=>{e.classList.toggle("is-active",t)}))),this._sideEffect.addDisposer(u([this.highlightStage$,this.stageRect$]).subscribe((([s,a])=>{s&&(a.x>0?(e.style.flexDirection="row",t.style.width=`${a.x}px`,t.style.height="",i.style.width=`${a.x}px`,i.style.height=""):a.y>0&&(e.style.flexDirection="column",t.style.width="",t.style.height=`${a.y}px`,i.style.width="",i.style.height=`${a.y}px`))}))),this.$boxStage=e,e}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}const W=window.ResizeObserver||b;class Y{constructor({id:e=m(),title:t=L(),namespace:i="telebox",visible:s=!0,width:a=.5,height:o=.5,minWidth:r=0,minHeight:n=0,x:l=.1,y:$=.1,resizable:b=!0,draggable:v=!0,ratio:w=-1,focus:y=!1,zIndex:z=100,titleBar:B,content:_,footer:N,styles:M,highlightStage:S=null,darkMode$:k,fence$:R,minimized$:D,maximized$:T,readonly$:V,root$:W,rootRect$:Y,managerStageRect$:X,stageRatio$:P,collectorRect$:O,managerHighlightStage$:j}){this.events=new h,this._delegateEvents=new h,this.handleTrackStart=e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},this._sideEffect=new c,this.id=e,this.namespace=i;const Z=new x;this._sideEffect.addDisposer((()=>Z.destroy()));const F=new g(t),G=new g(s),J=new g(b),q=new g(v),Q=new g(w),K=new g(z),U=new g(y),ee=new g(_),te=new g(N),ie=new g(M),se=u([D,T],(([e,t])=>e?C.Minimized:t?C.Maximized:C.Normal)),ae=new g({width:I(r,0,1),height:I(n,0,1)},{compare:d}),oe=u([ae,X],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:d}),re=new g({width:a,height:o},{compare:d});this._sideEffect.addDisposer(ae.reaction(((e,t)=>{re.setValue({width:Math.max(a,e.width),height:Math.max(o,e.height)},t)})));const ne=new g({x:l,y:$},{compare:d}),he=u([re,X],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:d}),le=u([ne,X],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:d}),de=new g(S),ce=u([T,de,j],(([e,t,i])=>null===t?i&&e:t)),me=new g(null),ue=new g(Y.value,{compare:d}),xe=new A({namespace:i,root$:me,rootRect$:ue,ratio$:P,highlightStage$:ce});this._sideEffect.addDisposer((()=>xe.destroy()));p(this,{darkMode:k,fence:R,minimized:D,maximized:T,readonly:V,rootRect:Y,managerStageRect:X,collectorRect:O});const ge={zIndex:K,focus:U,$userContent:ee,$userFooter:te,$userStyles:ie,state:se,minSize:ae,pxMinSize:oe,intrinsicSize:re,intrinsicCoord:ne,pxIntrinsicSize:he,pxIntrinsicCoord:le,highlightStage:ce,boxHighlightStage:de,contentRect:ue,contentStageRect:xe.stageRect$};p(this,ge,Z);f(this,{title:F,visible:G,resizable:J,draggable:q,ratio:Q},Z),this.titleBar=B||new H({readonly$:V,state$:se,title$:F,namespace:this.namespace,onDragStart:e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},onEvent:e=>this._delegateEvents.emit(e.type)}),this._sideEffect.addDisposer(Q.subscribe((e=>{e>0&&this.transform(le.value.x,le.value.y,he.value.width,he.value.height,!0)}))),this._sideEffect.addDisposer(R.subscribe((e=>{e&&this.move(le.value.x,le.value.y,!0)}))),this.$box=this.render(),me.setValue(this.$content.parentElement);const pe=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,i)=>{i||this.events.emit(t,e)})))};pe(k,E.DarkMode),pe(V,E.Readonly),pe(K,E.ZIndex),pe(D,E.Minimized),pe(T,E.Maximized),pe(se,E.State),pe(re,E.IntrinsicResize),pe(ne,E.IntrinsicMove),this._sideEffect.addDisposer([G.reaction(((e,t)=>{t||e||this.events.emit(E.Close)})),U.reaction(((e,t)=>{t||this.events.emit(e?E.Focus:E.Blur)})),W.subscribe((e=>{e?e.appendChild(this.$box):this.$box.parentNode&&this.$box.remove()}))])}get minWidth(){return this._minSize$.value.width}get minHeight(){return this._minSize$.value.height}setMinWidth(e,t=!1){this._minSize$.setValue({width:e,height:this.minHeight},t)}setMinHeight(e,t=!1){this._minSize$.setValue({width:this.minWidth,height:e},t)}resize(e,t,i=!1){this._intrinsicSize$.setValue({width:Math.max(e,this.minWidth),height:Math.max(t,this.minHeight)},i)}get intrinsicX(){return this._intrinsicCoord$.value.x}get intrinsicY(){return this._intrinsicCoord$.value.y}get intrinsicWidth(){return this._intrinsicSize$.value.width}get intrinsicHeight(){return this._intrinsicSize$.value.height}move(e,t,i=!1){let s,a;const o=this.managerStageRect,r=this.pxIntrinsicSize;if(this.fence)s=I(e,o.x,o.x+o.width-r.width),a=I(t,o.y,o.y+o.height-r.height);else{const i=this.rootRect;s=I(e,i.x-r.width+20,i.x+i.width-20),a=I(t,i.y,i.y+i.height-20)}this._intrinsicCoord$.setValue({x:(s-o.x)/o.width,y:(a-o.y)/o.height},i)}transform(e,t,i,s,a=!1){const o=this.managerStageRect,r=this.rootRect;if(i=Math.max(i,this.pxMinSize.width),s=Math.max(s,this.pxMinSize.height),this.ratio>0){const e=this.ratio*i;t!==this.pxIntrinsicCoord.y&&(t-=e-s),s=e}t<r.y&&(t=r.y,s=this.pxIntrinsicSize.height),this.move(e,t,a),this._intrinsicSize$.setValue({width:i/o.width,height:s/o.height},a)}mountContent(e){this._$userContent$.setValue(e)}unmountContent(){this._$userContent$.setValue(void 0)}mountFooter(e){this._$userFooter$.setValue(e)}unmountFooter(){this._$userFooter$.setValue(void 0)}getUserStyles(){return this.$userStyles}mountStyles(e){let t;"string"==typeof e?(t=document.createElement("style"),t.textContent=e):t=e,this._$userStyles$.setValue(t)}unmountStyles(){this._$userStyles$.setValue(void 0)}setHighlightStage(e){this._boxHighlightStage$.setValue(e)}render(){if(this.$box)return this.$box;this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box"));const e=(e,t,i,s=T)=>this._sideEffect.add((()=>{const a=this.wrapClassName(i);return t.subscribe((t=>{e.classList.toggle(a,s(t))}))}));e(this.$box,this._readonly$,"readonly"),e(this.$box,this._draggable$,"no-drag",V),e(this.$box,this._resizable$,"no-resize",V),e(this.$box,this._focus$,"blur",V),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",V),this._sideEffect.add((()=>{const e=this.wrapClassName("minimized"),t=this.wrapClassName("maximized"),i="box-maximized-timer";return this._state$.subscribe((s=>{this.$box.classList.toggle(e,s===C.Minimized),s===C.Maximized?(this._sideEffect.flush(i),this.$box.classList.toggle(t,!0)):this._sideEffect.setTimeout((()=>{this.$box.classList.toggle(t,!1)}),0,i)}))})),this._sideEffect.addDisposer(this._visible$.subscribe((e=>{this.$box.style.display=e?"block":"none"}))),this._sideEffect.addDisposer(this._zIndex$.subscribe((e=>{this.$box.style.zIndex=String(e)}))),this.$box.dataset.teleBoxID=this.id;const t=l(this.$box),i=u([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$],(([e,t,i,s,a])=>{const o=e?{x:0,y:0,width:"100%",height:"100%",scaleX:1,scaleY:1}:{x:s.x,y:s.y,width:i.width+"px",height:i.height+"px",scaleX:1,scaleY:1};if(t&&a){const{width:t,height:s}=e?this.rootRect:i;o.x=a.x-t/2+a.width/2,o.y=a.y-s/2+a.height/2,o.scaleX=a.width/t,o.scaleY=a.height/s}return o}),{compare:d}),s=i.value;this.$box.style.width=s.width,this.$box.style.height=s.height,this.$box.style.transform=`translate(${s.x-10}px,${s.y-10}px)`,this._sideEffect.addDisposer(i.subscribe((e=>{t.set(e)})));const a=document.createElement("div");a.className=this.wrapClassName("box-main"),this.$box.appendChild(a);const o=document.createElement("div");o.className=this.wrapClassName("titlebar-wrap"),o.appendChild(this.titleBar.render()),this.$titleBar=o;const r=document.createElement("div");r.className=this.wrapClassName("content-wrap");const n=document.createElement("div");n.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=n,this._sideEffect.add((()=>{const e=new W((()=>{const e=n.getBoundingClientRect();this._contentRect$.setValue({x:e.x,y:e.y,width:e.width,height:e.height})}));return e.observe(n),()=>e.disconnect()})),this._sideEffect.add((()=>{let e;return this._$userStyles$.subscribe((t=>{e&&e.remove(),e=t,t&&r.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userContent$.subscribe((t=>{e&&e.remove(),e=t,t&&n.appendChild(t)}))})),r.appendChild(n);const h=document.createElement("div");return h.className=this.wrapClassName("footer-wrap"),this.$footer=h,this._sideEffect.add((()=>{let e;return this._$userFooter$.subscribe((t=>{e&&e.remove(),e=t,t&&h.appendChild(t)}))})),a.appendChild(o),a.appendChild(r),a.appendChild(h),this._renderResizeHandlers(),this.$box}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(N).forEach((t=>{const i=document.createElement("div");i.className=this.wrapClassName(t)+" "+this.wrapClassName("resize-handle"),i.dataset.teleBoxHandle=t,e.appendChild(i)})),this.$box.appendChild(e);const t="handle-tracking-listener",i=this.wrapClassName("transforming");let s,a,o=0,r=0,n=0,h=0,l=0,d=0;const c=e=>{if(this.state!==C.Normal)return;k(e);let{pageX:t,pageY:i}=R(e);i<this.rootRect.y&&(i=this.rootRect.y);const s=t-l,c=i-d;let{x:m,y:u}=this.pxIntrinsicCoord,{width:x,height:g}=this.pxIntrinsicSize;switch(a){case N.North:u=r+c,g=h-c;break;case N.South:g=h+c;break;case N.West:m=o+s,x=n-s;break;case N.East:x=n+s;break;case N.NorthWest:m=o+s,u=r+c,x=n-s,g=h-c;break;case N.NorthEast:u=r+c,x=n+s,g=h-c;break;case N.SouthEast:x=n+s,g=h+c;break;case N.SouthWest:m=o+s,x=n-s,g=h+c;break;default:return void this.move(o+s,r+c)}this.transform(m,u,x,g)},m=e=>{a=void 0,s&&(k(e),this.$box.classList.toggle(i,!1),this._sideEffect.flush(t),s.remove())},u=e=>{var u;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||a||this.state!==C.Normal)return;const x=e.target;if(null==(u=x.dataset)?void 0:u.teleBoxHandle){k(e),({x:o,y:r}=this.pxIntrinsicCoord),({width:n,height:h}=this.pxIntrinsicSize),({pageX:l,pageY:d}=R(e)),a=x.dataset.teleBoxHandle,s||(s=document.createElement("div"));const u=a?this.wrapClassName(`cursor-${a}`):"";s.className=this.wrapClassName("track-mask"+(u?` ${u}`:"")),this.$box.appendChild(s),this.$box.classList.add(i),this._sideEffect.add((()=>(window.addEventListener("mousemove",c),window.addEventListener("touchmove",c,{passive:!1}),window.addEventListener("mouseup",m),window.addEventListener("touchend",m,{passive:!1}),window.addEventListener("touchcancel",m,{passive:!1}),()=>{window.removeEventListener("mousemove",c),window.removeEventListener("touchmove",c),window.removeEventListener("mouseup",m),window.removeEventListener("touchend",m),window.removeEventListener("touchcancel",m)})),t)}};this._handleTrackStart=u,this._sideEffect.addEventListener(e,"mousedown",u,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",u,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(E.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var X,P;class O{constructor({minimized$:e,readonly$:t,darkMode$:i,rootRect$:s,namespace:a="telebox",styles:o={},root$:r}){this._sideEffect=new c,this.namespace=a;const n=new x;this._sideEffect.addDisposer((()=>n.destroy()));const h=new g(void 0),l=$(e),d=new g(o),m=new g(document.createElement("button"));f(this,{styles:d,$collector:m},n);p(this,{root:r});p(this,{rect:h,visible:l},n),m.value.className=this.wrapClassName("collector"),m.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(m.subscribe((a=>{this._sideEffect.addEventListener(a,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([l.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-visible"),e)})),t.subscribe((e=>{a.classList.toggle(this.wrapClassName("collector-readonly"),e)})),i.subscribe((e=>{a.classList.toggle(this.wrapClassName("color-scheme-dark"),e),a.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),d.subscribe((e=>{Object.keys(e).forEach((t=>{const i=e[t];null!=i&&(a.style[t]=i)}))})),r.subscribe((e=>{e&&e.appendChild(a)})),u([e,s,r]).subscribe((([e,t,i])=>{if(e&&i){const{x:e,y:i,width:s,height:o}=a.getBoundingClientRect();h.setValue({x:e-t.x,y:i-t.y,width:s,height:o})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}(P=X||(X={})).Focused="focused",P.Blurred="blurred",P.Created="created",P.Removed="removed",P.State="state",P.Maximized="maximized",P.Minimized="minimized",P.IntrinsicMove="intrinsic_move",P.IntrinsicResize="intrinsic_resize",P.ZIndex="z_index",P.PrefersColorScheme="prefers_color_scheme",P.DarkMode="dark_mode";class j extends H{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,this.sideEffect.addDisposer(e.root$.subscribe((e=>{var t;e?e.appendChild(this.render()):(null==(t=this.$titleBar)?void 0:t.parentNode)&&this.$titleBar.remove()})))}focusBox(e){var t;if(!this.focusedBox||this.focusedBox!==e){if(this.$titles&&this.state$.value===C.Maximized){const{children:i}=this.$titles.firstElementChild;for(let s=i.length-1;s>=0;s-=1){const a=i[s],o=null==(t=a.dataset)?void 0:t.teleBoxID;o&&(e&&o===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&o===this.focusedBox.id&&a.classList.toggle(this.wrapClassName("titles-tab-focus"),!1))}}this.focusedBox=e}}render(){if(this.$titleBar)return this.$titleBar;const e=super.render();e.classList.add(this.wrapClassName("max-titlebar")),this.sideEffect.addDisposer([this.state$.subscribe((t=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),t===C.Maximized)})),this.readonly$.subscribe((t=>{e.classList.toggle(this.wrapClassName("readonly"),t)})),this.darkMode$.subscribe((t=>{e.classList.toggle(this.wrapClassName("color-scheme-dark"),t),e.classList.toggle(this.wrapClassName("color-scheme-light"),!t)})),u([this.state$,this.boxes$]).subscribe((([t,i])=>{t===C.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===i.length),1!==i.length&&e.replaceChild(this.renderTitles(),e.firstElementChild))}))],"max-render");const t=document.createElement("div");return t.classList.add(this.wrapClassName("titles-area")),e.insertBefore(t,e.firstElementChild),e}destroy(){super.destroy(),this.$titles=void 0,this.focusedBox=void 0}renderTitles(){this.$titles=document.createElement("div"),this.$titles.className=this.wrapClassName("titles"),this.sideEffect.addEventListener(this.$titles,"wheel",(e=>{e.currentTarget.scrollBy({left:e.deltaY>0?250:-250,behavior:"smooth"})}),{passive:!1},"max-render-wheel-titles");const e=document.createElement("div");e.className=this.wrapClassName("titles-content"),this.$titles.appendChild(e);const t=this.boxes$.value.map((t=>{const i=document.createElement("button");return i.className=this.wrapClassName("titles-tab"),i.textContent=t.title,i.dataset.teleBoxID=t.id,i.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&i.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(i),t._title$.reaction((e=>i.textContent=e))}));return this.sideEffect.addDisposer((()=>t.forEach((e=>e()))),"max-render-tab-titles"),this.$titles}}const Z=window.ResizeObserver||b;class F{constructor({root:e=null,prefersColorScheme:t=v.Light,minimized:i=!1,maximized:s=!1,fence:a=!1,collector:o,namespace:r="telebox",readonly:n=!1,stageRatio:l=-1,highlightStage:m=!0}={}){this.events=new h,this._sideEffect=new c,this.namespace=r;const b=new x;this._sideEffect.addDisposer((()=>b.destroy()));const w=new g(e),y=new g(n),z=new g(i),_=new g(s),N=new g(a),M=new g(l),S=new g(m),I=new g({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:d});this._sideEffect.addDisposer(w.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new Z((()=>{const t=e.getBoundingClientRect();I.setValue({x:t.x,y:t.y,width:t.width,height:t.height})}));return t.observe(e),()=>t.disconnect()}),"calc-root-rect")}))),this.boxes$=new g([]),this.topBox$=new g(void 0),this._sideEffect.addDisposer(this.boxes$.subscribe((e=>{if(e.length>0){const t=e.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(t)}else this.topBox$.setValue(void 0)})));const k=window.matchMedia("(prefers-color-scheme: dark)"),R=new g(!1);k&&(R.setValue(k.matches),this._sideEffect.add((()=>{const e=e=>{R.setValue(e.matches)};return k.addEventListener("change",e),()=>k.removeEventListener("change",e)})));const D=new g(t);this._sideEffect.addDisposer(D.reaction(((e,t)=>{t||this.events.emit(X.PrefersColorScheme,e)})));const L=u([R,D],(([e,t])=>"auto"===t?e:"dark"===t)),T=u([z,_],(([e,t])=>e?C.Minimized:t?C.Maximized:C.Normal));this.collector=null!=o?o:new O({minimized$:z,readonly$:y,darkMode$:L,namespace:r,root$:w,rootRect$:I});const V=new A({namespace:r,rootRect$:I,ratio$:M,root$:w,highlightStage$:u([S,_,z],(([e,t,i])=>e&&(i||!t)))});this._sideEffect.addDisposer((()=>V.destroy()));const H={darkMode:L,state:T,root:w,rootRect:I,stageRect:V.stageRect$};p(this,H,b);f(this,{prefersColorScheme:D,readonly:y,fence:N,minimized:z,maximized:_,stageRatio:M,highlightStage:S},b);const W=this.wrapClassName("titlebar-icon-close"),Y=e=>{var t;if(y.value)return;const i=e.target;if(i.tagName)for(let s=i;s;s=s.parentElement){if(s.classList&&s.classList.contains(W))return;const e=null==(t=s.dataset)?void 0:t.teleBoxID;if(e){const t=this.getBox(e);if(t)return this.focusBox(t),void this.makeBoxTop(t)}}};this._sideEffect.addEventListener(window,"mousedown",Y,!0),this._sideEffect.addEventListener(window,"touchstart",Y,!0),this.titleBar=new j({namespace:this.namespace,title$:$(this.topBox$,(e=>(null==e?void 0:e.title)||"")),boxes$:this.boxes$,darkMode$:L,readonly$:y,state$:T,root$:w,rootRect$:I,onEvent:e=>{switch(e.type){case B.Maximize:_.setValue(!_.value);break;case B.Minimize:z.setValue(!0);break;case E.Close:this.removeTopBox(),this.focusTopBox()}}}),this._sideEffect.addDisposer([T.reaction(((e,t)=>{t||this.events.emit(X.State,e)})),_.reaction(((e,t)=>{t||this.events.emit(X.Maximized,e)})),z.reaction(((e,t)=>{t||this.events.emit(X.Minimized,e)})),L.reaction(((e,t)=>{t||this.events.emit(X.DarkMode,e)}))])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case C.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case C.Minimized:this.setMinimized(!0,t),this.setMaximized(!1,t);break;default:this.setMinimized(!1,t),this.setMaximized(!1,t)}return this}create(e={},s=!0){const a=new Y((o=n(n({zIndex:this.topBox?this.topBox.zIndex+1:100},e),s?this.smartPosition(e):{}),r={namespace:this.namespace,root$:this._root$,darkMode$:this._darkMode$,maximized$:this._maximized$,minimized$:this._minimized$,fence$:this._fence$,rootRect$:this._rootRect$,managerStageRect$:this._stageRect$,stageRatio$:this._stageRatio$,readonly$:this._readonly$,collectorRect$:this.collector._rect$,managerHighlightStage$:this._highlightStage$},t(o,i(r))));var o,r;return a.focus&&(this.focusBox(a),s&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(B.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(B.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(B.Close,(()=>{this.remove(a),this.focusTopBox()})),a._intrinsicCoord$.reaction(((e,t)=>{t||this.events.emit(X.IntrinsicMove,a)})),a._intrinsicSize$.reaction(((e,t)=>{t||this.events.emit(X.IntrinsicResize,a)})),a._zIndex$.reaction(((e,t)=>{if(this.boxes.length>0){const e=this.boxes.reduce(((e,t)=>e.zIndex>t.zIndex?e:t));this.topBox$.setValue(e)}t||this.events.emit(X.ZIndex,a)}))]),this.events.emit(X.Created,a),a}query(e){return e?this.boxes.filter(this.teleBoxMatcher(e)):[...this.boxes]}queryOne(e){return e?this.boxes.find(this.teleBoxMatcher(e)):this.boxes[0]}update(e,t,i=!1){const s=this.boxes.find((t=>t.id===e));if(s)return this.updateBox(s,t,i)}updateAll(e,t=!1){this.boxes.forEach((i=>{this.updateBox(i,e,t)}))}remove(e,t=!1){const i=this.getBoxIndex(e);if(i>=0){const e=this.boxes.slice(),s=e.splice(i,1);return this.boxes$.setValue(e),s.forEach((e=>e.destroy())),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(X.Removed,s)),s[0]}}removeTopBox(){if(this.topBox)return this.remove(this.topBox)}removeAll(e=!1){const t=this.boxes$.value;return this.boxes$.setValue([]),t.forEach((e=>e.destroy())),e||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(X.Removed,t)),t}mount(e){this._root$.setValue(e)}unmount(){this._root$.setValue(null)}destroy(e=!1){this.events.clearListeners(),this._sideEffect.flushAll(),this.removeAll(e),this.collector.destroy(),this.titleBar.destroy()}wrapClassName(e){return`${this.namespace}-${e}`}focusBox(e,t=!1){const i=this.getBox(e);i&&(this.boxes.forEach((e=>{if(i===e){let e=!1;i.focus||(e=!0,i._focus$.setValue(!0,t)),e&&!t&&this.events.emit(X.Focused,i)}else e.focus&&this.blurBox(e,t)})),this.titleBar.focusBox(i))}focusTopBox(){if(this.topBox&&!this.topBox.focus)return this.focusBox(this.topBox)}blurBox(e,t=!1){const i=this.getBox(e);i&&(i.focus&&(i._focus$.setValue(!1,t),t||this.events.emit(X.Blurred,i)),this.titleBar.focusedBox===i&&this.titleBar.focusBox())}blurAll(e=!1){this.boxes.forEach((t=>{t.focus&&(t._focus$.setValue(!1,e),e||this.events.emit(X.Blurred,t))})),this.titleBar.focusedBox&&this.titleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return i=>t.every((t=>e[t]===i[t]))}updateBox(e,t,i=!1){var s,a,o,r,n,h;null==t.x&&null==t.y||e._intrinsicCoord$.setValue({x:null!=(s=t.x)?s:e.intrinsicX,y:null!=(a=t.y)?a:e.intrinsicY},i),null==t.width&&null==t.height||e._intrinsicSize$.setValue({width:null!=(o=t.width)?o:e.intrinsicWidth,height:null!=(r=t.height)?r:e.intrinsicHeight},i),null!=t.title&&e._title$.setValue(t.title),null!=t.visible&&e._visible$.setValue(t.visible,i),null!=t.resizable&&e._resizable$.setValue(t.resizable,i),null!=t.draggable&&e._draggable$.setValue(t.draggable,i),null!=t.ratio&&e._ratio$.setValue(t.ratio,i),null!=t.zIndex&&e._zIndex$.setValue(t.zIndex,i),null!=t.content&&e.mountContent(t.content),null!=t.footer&&e.mountFooter(t.footer),null==t.minHeight&&null==t.minWidth||e._minSize$.setValue({width:null!=(n=t.minWidth)?n:e.minWidth,height:null!=(h=t.minHeight)?h:e.minHeight},i)}smartPosition(e){let{x:t,y:i}=e;const{width:s=.5,height:a=.5}=e,o=this.stageRect,r=this.topBox;if(null==t){let e=o.x+20;if(r){const t=r.pxIntrinsicCoord.x+20;t+s*o.width<=o.x+o.width&&(e=t)}t=(e-o.x)/o.width}if(null==i){let e=o.y+20;if(r){const t=r.pxIntrinsicCoord.y+20;t+a*o.height<=o.y+o.height&&(e=t)}i=(e-o.y)/o.height}return{x:t,y:i,width:s,height:a}}makeBoxTop(e,t=!1){this.topBox&&e!==this.topBox&&e._zIndex$.setValue(this.topBox.zIndex+1,t)}getBoxIndex(e){return"string"==typeof e?this.boxes.findIndex((t=>t.id===e)):this.boxes.findIndex((t=>t===e))}getBox(e){return"string"==typeof e?this.boxes.find((t=>t.id===e)):e}}export{H as DefaultTitleBar,v as TELE_BOX_COLOR_SCHEME,B as TELE_BOX_DELEGATE_EVENT,E as TELE_BOX_EVENT,X as TELE_BOX_MANAGER_EVENT,N as TELE_BOX_RESIZE_HANDLE,C as TELE_BOX_STATE,Y as TeleBox,O as TeleBoxCollector,S as TeleBoxDragHandleType,F as TeleBoxManager};
 //# sourceMappingURL=telebox-insider.es.js.map