@netless/telebox-insider 1.0.0-alpha.2 → 1.0.0-alpha.3

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,r=Object.prototype.propertyIsEnumerable,o=(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)&&o(e,i,t[i]);if(s)for(var i of s(t))r.call(t,i)&&o(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{Val as u,combine as x,withReadonlyValueEnhancer as g,withValueEnhancer as p}from"value-enhancer";import{ResizeObserver as f}from"@juggle/resize-observer";var $,b,v,w,C,y,E,z,B,_;(b=$||($={})).Light="light",b.Dark="dark",b.Auto="auto",(w=v||(v={})).Normal="normal",w.Minimized="minimized",w.Maximized="maximized",(y=C||(C={})).DarkMode="dark_mode",y.PrefersColorScheme="prefers_color_scheme",y.Close="close",y.Focus="focus",y.Blur="blur",y.IntrinsicMove="intrinsic_move",y.IntrinsicResize="intrinsic_resize",y.ZIndex="z_index",y.State="state",y.Minimized="minimized",y.Maximized="maximized",y.Readonly="readonly",y.Destroyed="destroyed",(z=E||(E={})).Close="close",z.Maximize="maximize",z.Minimize="minimize",(_=B||(B={})).North="n",_.South="s",_.West="w",_.East="e",_.NorthWest="nw",_.NorthEast="ne",_.SouthEast="se",_.SouthWest="sw";const N="dh";function M(e,t,i){return Math.min(Math.max(e,t),i)}function S(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function I(e){return e.touches?e.touches[0]:e}let k=1;function R(){return"New Box "+k++}function L(e){return Boolean(e)}function D(e){return!e}class T{constructor({readonly$:e,state$:t,title:i="",buttons:s,onEvent:a,onDragStart:r,namespace:o="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;S(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:E.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;S(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:E.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$=new u(i),this.onEvent=a,this.onDragStart=r,this.namespace=o,this.buttons=s||[{type:E.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:E.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===v.Maximized},{type:E.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}get title(){return this.title$.value}setTitle(e){this.title$.setValue(e)}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){S(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 V{constructor({namespace:e,rootRect$:t,ratio$:i,highlightStage$:s,root$:a}){this._sideEffect=new c,this.namespace=e,this.highlightStage$=s,this.stageRect$=x([t,s,i],(([e,t,i])=>{if(!t)return e;if(i<=0||e.width<=0||e.height<=0)return e;const s=e.width*i;if(s===e.height)return e;if(s<e.height)return{x:0,y:(e.height-s)/2,width:e.width,height:s};const a=e.height/i;return{x:(e.width-a)/2,y:0,width:a,height:e.height}}),{compare:d}),this._sideEffect.addDisposer(x([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,r,o,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(o),s.appendChild(r),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(x([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 H=window.ResizeObserver||f;class A{constructor({id:e=m(),title:t=R(),namespace:i="telebox",visible:s=!0,width:a=.5,height:r=.5,minWidth:o=0,minHeight:n=0,x:l=.1,y:f=.1,resizable:$=!0,draggable:b=!0,ratio:w=-1,focus:y=!1,zIndex:E=100,titleBar:z,content:B,footer:_,styles:N,highlightStage:S=null,darkMode$:I,fence$:k,minimized$:L,maximized$:D,readonly$:H,root$:A,rootRect$:W,managerStageRect$:Y,stageRatio$:X,collectorRect$:P,managerHighlightStage$:O}){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 j=new u(t),Z=new u(s),F=new u($),G=new u(b),J=new u(w),q=new u(E),Q=new u(y),K=new u(B),U=new u(_),ee=new u(N),te=x([L,D],(([e,t])=>e?v.Minimized:t?v.Maximized:v.Normal)),ie=new u({width:M(o,0,1),height:M(n,0,1)},{compare:d}),se=x([ie,Y],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:d}),ae=new u({width:a,height:r},{compare:d});this._sideEffect.addDisposer(ie.reaction(((e,t)=>{ae.setValue({width:Math.max(a,e.width),height:Math.max(r,e.height)},t)})));const re=new u({x:l,y:f},{compare:d}),oe=x([ae,Y],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:d}),ne=x([re,Y],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:d}),he=new u(S),le=x([D,he,O],(([e,t,i])=>null===t?i&&e:t)),de=new u(null),ce=new u(W.value,{compare:d}),me=new V({namespace:i,root$:de,rootRect$:ce,ratio$:X,highlightStage$:le});this._sideEffect.addDisposer((()=>me.destroy()));const ue={darkMode:I,fence:k,minimized:L,maximized:D,readonly:H,rootRect:W,managerStageRect:Y,collectorRect:P,zIndex:q,focus:Q,$userContent:K,$userFooter:U,$userStyles:ee,state:te,minSize:ie,pxMinSize:se,intrinsicSize:ae,intrinsicCoord:re,pxIntrinsicSize:oe,pxIntrinsicCoord:ne,highlightStage:le,boxHighlightStage:he,contentRect:ce,contentStageRect:me.stageRect$};g(this,ue);p(this,{title:j,visible:Z,resizable:F,draggable:G,ratio:J}),this.titleBar=z||new T({readonly$:H,state$:te,title:j.value,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(J.subscribe((e=>{e>0&&this.transform(ne.value.x,ne.value.y,oe.value.width,oe.value.height,!0)}))),this._sideEffect.addDisposer(k.subscribe((e=>{e&&this.move(ne.value.x,ne.value.y,!0)}))),this.$box=this.render(),de.setValue(this.$content.parentElement);const xe=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,i)=>{i||this.events.emit(t,e)})))};xe(I,C.DarkMode),xe(H,C.Readonly),xe(q,C.ZIndex),xe(L,C.Minimized),xe(D,C.Maximized),xe(te,C.State),xe(ae,C.IntrinsicResize),xe(re,C.IntrinsicMove),this._sideEffect.addDisposer([Z.reaction(((e,t)=>{t||e||this.events.emit(C.Close)})),Q.reaction(((e,t)=>{t||this.events.emit(e?C.Focus:C.Blur)})),A.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 r=this.managerStageRect,o=this.pxIntrinsicSize;if(this.fence)s=M(e,r.x,r.x+r.width-o.width),a=M(t,r.y,r.y+r.height-o.height);else{const i=this.rootRect;s=M(e,i.x-o.width+20,i.x+i.width-20),a=M(t,i.y,i.y+i.height-20)}this._intrinsicCoord$.setValue({x:(s-r.x)/r.width,y:(a-r.y)/r.height},i)}transform(e,t,i,s,a=!1){const r=this.managerStageRect,o=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<o.y&&(t=o.y,s=this.pxIntrinsicSize.height),this.move(e,t,a),this._intrinsicSize$.setValue({width:i/r.width,height:s/r.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=L)=>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",D),e(this.$box,this._resizable$,"no-resize",D),e(this.$box,this._focus$,"blur",D),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",D),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===v.Minimized),s===v.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=x([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$],(([e,t,i,s,a])=>t&&a?{x:a.x+a.width/2,y:a.y+a.height/2,width:i.width+"px",height:i.height+"px",scaleX:a.width/i.width,scaleY:a.height/i.height}: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}),{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 r=document.createElement("div");r.className=this.wrapClassName("titlebar-wrap"),r.appendChild(this.titleBar.render()),this.$titleBar=r;const o=document.createElement("div");o.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 H((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&&o.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userContent$.subscribe((t=>{e&&e.remove(),e=t,t&&n.appendChild(t)}))})),o.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(r),a.appendChild(o),a.appendChild(h),this._renderResizeHandlers(),this.$box}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(B).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,r=0,o=0,n=0,h=0,l=0,d=0;const c=e=>{if(this.state!==v.Normal)return;S(e);let{pageX:t,pageY:i}=I(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 B.North:u=o+c,g=h-c;break;case B.South:g=h+c;break;case B.West:m=r+s,x=n-s;break;case B.East:x=n+s;break;case B.NorthWest:m=r+s,u=o+c,x=n-s,g=h-c;break;case B.NorthEast:u=o+c,x=n+s,g=h-c;break;case B.SouthEast:x=n+s,g=h+c;break;case B.SouthWest:m=r+s,x=n-s,g=h+c;break;default:return void this.move(r+s,o+c)}this.transform(m,u,x,g)},m=e=>{a=void 0,s&&(S(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!==v.Normal)return;const x=e.target;if(null==(u=x.dataset)?void 0:u.teleBoxHandle){S(e),({x:r,y:o}=this.pxIntrinsicCoord),({width:n,height:h}=this.pxIntrinsicSize),({pageX:l,pageY:d}=I(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(C.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var W,Y;class X{constructor({minimized$:e,readonly$:t,darkMode$:i,rootRect$:s,namespace:a="telebox",styles:r={},root$:o}){this._sideEffect=new c,this.namespace=a;const n=new u(void 0),h=e,l=new u(r),d=new u(document.createElement("button"));p(this,{styles:l,el:d});g(this,{rect:n,visible:h,root:o}),d.value.className=this.wrapClassName("collector"),d.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(d.subscribe((a=>{this._sideEffect.addEventListener(a,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([h.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)})),l.subscribe((e=>{Object.keys(e).forEach((t=>{const i=e[t];null!=i&&(a.style[t]=i)}))})),o.subscribe((e=>{e&&e.appendChild(a)})),x([e,s,o]).subscribe((([e,t,i])=>{if(e&&i){const{x:e,y:i,width:s,height:r}=a.getBoundingClientRect();n.setValue({x:e-t.x,y:i-t.y,width:s,height:r})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}(Y=W||(W={})).Focused="focused",Y.Blurred="blurred",Y.Created="created",Y.Removed="removed",Y.State="state",Y.Maximized="maximized",Y.Minimized="minimized",Y.IntrinsicMove="intrinsic_move",Y.IntrinsicResize="intrinsic_resize",Y.ZIndex="z_index",Y.PrefersColorScheme="prefers_color_scheme",Y.DarkMode="dark_mode";class P extends T{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===v.Maximized){const{children:i}=this.$titles.firstElementChild;for(let s=i.length-1;s>=0;s-=1){const a=i[s],r=null==(t=a.dataset)?void 0:t.teleBoxID;r&&(e&&r===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&r===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===v.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)})),x([this.state$,this.boxes$]).subscribe((([t,i])=>{t===v.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===i.length),1===i.length?this.setTitle(i[0].title):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 O=window.ResizeObserver||f;class j{constructor({root:e=null,prefersColorScheme:t=$.Light,minimized:i=!1,maximized:s=!1,fence:a=!1,collector:r,namespace:o="telebox",readonly:n=!1,stageRatio:l=-1,highlightStage:m=!0}={}){this.events=new h,this._sideEffect=new c,this.namespace=o;const f=new u(e),b=new u(n),w=new u(i),y=new u(s),z=new u(a),B=new u(l),_=new u(m),N=new u({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:d});this._sideEffect.addDisposer(f.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new O((e=>{this._sideEffect.setTimeout((()=>{var t;const i=null==(t=e[0])?void 0:t.contentRect;i&&N.setValue({x:i.x,y:i.y,width:i.width,height:i.height})}),50,"root-resize-observer")}));return t.observe(e),()=>t.disconnect()}),"calc-root-rect")}))),this.boxes$=new u([]),this.topBox$=new u(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 M=window.matchMedia("(prefers-color-scheme: dark)"),S=new u(!1);M&&(S.setValue(M.matches),this._sideEffect.add((()=>{const e=e=>{S.setValue(e.matches)};return M.addEventListener("change",e),()=>M.removeEventListener("change",e)})));const I=new u(t);this._sideEffect.addDisposer(I.reaction(((e,t)=>{t||this.events.emit(W.PrefersColorScheme,e)})));const k=x([S,I],(([e,t])=>"auto"===t?e:"dark"===t)),R=x([w,y],(([e,t])=>e?v.Minimized:t?v.Maximized:v.Normal));this.collector=null!=r?r:new X({minimized$:w,readonly$:b,darkMode$:k,namespace:o,root$:f,rootRect$:N});const L=new V({namespace:o,rootRect$:N,ratio$:B,root$:f,highlightStage$:_});this._sideEffect.addDisposer((()=>L.destroy()));const D={darkMode:k,state:R,root:f,rootRect:N,stageRect:L.stageRect$};g(this,D);p(this,{prefersColorScheme:I,readonly:b,fence:z,minimized:w,maximized:y,stageRatio:B,highlightStage:_});const T=this.wrapClassName("titlebar-icon-close"),H=e=>{var t;if(b.value)return;const i=e.target;if(i.tagName)for(let s=i;s;s=s.parentElement){if(s.classList&&s.classList.contains(T))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",H,!0),this._sideEffect.addEventListener(window,"touchstart",H,!0),this.titleBar=new P({namespace:this.namespace,boxes$:this.boxes$,darkMode$:k,readonly$:b,state$:R,root$:f,rootRect$:N,onEvent:e=>{switch(e.type){case E.Maximize:y.setValue(!y.value);break;case E.Minimize:w.setValue(!0);break;case C.Close:this.removeTopBox(),this.focusTopBox()}}}),this._sideEffect.addDisposer([R.reaction(((e,t)=>{t||this.events.emit(W.State,e)})),y.reaction(((e,t)=>{t||this.events.emit(W.Maximized,e)})),w.reaction(((e,t)=>{t||this.events.emit(W.Minimized,e)})),k.reaction(((e,t)=>{t||this.events.emit(W.DarkMode,e)}))])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case v.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case v.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 A((r=n(n({zIndex:this.topBox?this.topBox.zIndex+1:100},e),s?this.smartPosition(e):{}),o={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(r,i(o))));var r,o;return a.focus&&(this.focusBox(a),s&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(E.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(E.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(E.Close,(()=>{this.remove(a),this.focusTopBox()})),a._intrinsicCoord$.reaction(((e,t)=>{t||this.events.emit(W.IntrinsicMove,a)})),a._intrinsicSize$.reaction(((e,t)=>{t||this.events.emit(W.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(W.ZIndex,a)}))]),this.events.emit(W.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(W.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(W.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(W.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(W.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(W.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,r,o,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!=(r=t.width)?r:e.intrinsicWidth,height:null!=(o=t.height)?o: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,r=this.stageRect,o=this.topBox;if(null==t){let e=r.x+20;if(o){const t=o.pxIntrinsicCoord.x+20;t+s*r.width<=r.x+r.width&&(e=t)}t=(e-r.x)/r.width}if(null==i){let e=r.y+20;if(o){const t=o.pxIntrinsicCoord.y+20;t+a*r.height<=r.y+r.height&&(e=t)}i=(e-r.y)/r.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{T as DefaultTitleBar,$ as TELE_BOX_COLOR_SCHEME,E as TELE_BOX_DELEGATE_EVENT,C as TELE_BOX_EVENT,W as TELE_BOX_MANAGER_EVENT,B as TELE_BOX_RESIZE_HANDLE,v as TELE_BOX_STATE,A as TeleBox,X as TeleBoxCollector,N as TeleBoxDragHandleType,j as TeleBoxManager};
+var e=Object.defineProperty,t=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,n=(t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,o=(e,t)=>{for(var i in t||(t={}))a.call(t,i)&&n(e,i,t[i]);if(s)for(var i of s(t))r.call(t,i)&&n(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{Val as u,combine as x,withReadonlyValueEnhancer as g,withValueEnhancer as p}from"value-enhancer";import{ResizeObserver as f}from"@juggle/resize-observer";var $,b,v,w,C,y,E,z,B,_;(b=$||($={})).Light="light",b.Dark="dark",b.Auto="auto",(w=v||(v={})).Normal="normal",w.Minimized="minimized",w.Maximized="maximized",(y=C||(C={})).DarkMode="dark_mode",y.PrefersColorScheme="prefers_color_scheme",y.Close="close",y.Focus="focus",y.Blur="blur",y.IntrinsicMove="intrinsic_move",y.IntrinsicResize="intrinsic_resize",y.ZIndex="z_index",y.State="state",y.Minimized="minimized",y.Maximized="maximized",y.Readonly="readonly",y.Destroyed="destroyed",(z=E||(E={})).Close="close",z.Maximize="maximize",z.Minimize="minimize",(_=B||(B={})).North="n",_.South="s",_.West="w",_.East="e",_.NorthWest="nw",_.NorthEast="ne",_.SouthEast="se",_.SouthWest="sw";const N="dh";function M(e,t,i){return Math.min(Math.max(e,t),i)}function S(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function I(e){return e.touches?e.touches[0]:e}let k=1;function R(){return"New Box "+k++}function L(e){return Boolean(e)}function D(e){return!e}class T{constructor({readonly$:e,state$:t,title:i="",buttons:s,onEvent:a,onDragStart:r,namespace:n="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;S(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:E.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;S(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:E.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$=new u(i),this.onEvent=a,this.onDragStart=r,this.namespace=n,this.buttons=s||[{type:E.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:E.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===v.Maximized},{type:E.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}get title(){return this.title$.value}setTitle(e){this.title$.setValue(e)}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){S(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 V{constructor({namespace:e,rootRect$:t,ratio$:i,highlightStage$:s,root$:a}){this._sideEffect=new c,this.namespace=e,this.highlightStage$=s,this.stageRect$=x([t,s,i],(([e,t,i])=>{if(!t)return e;if(i<=0||e.width<=0||e.height<=0)return e;const s=e.width*i;if(s===e.height)return e;if(s<e.height)return{x:0,y:(e.height-s)/2,width:e.width,height:s};const a=e.height/i;return{x:(e.width-a)/2,y:0,width:a,height:e.height}}),{compare:d}),this._sideEffect.addDisposer(x([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,r,n,o]=["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(n),s.appendChild(r),s.appendChild(o),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(x([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 H=window.ResizeObserver||f;class A{constructor({id:e=m(),title:t=R(),namespace:i="telebox",visible:s=!0,width:a=.5,height:r=.5,minWidth:n=0,minHeight:o=0,x:l=.1,y:f=.1,resizable:$=!0,draggable:b=!0,ratio:w=-1,focus:y=!1,zIndex:E=100,titleBar:z,content:B,footer:_,styles:N,highlightStage:S=null,darkMode$:I,fence$:k,minimized$:L,maximized$:D,readonly$:H,root$:A,rootRect$:W,managerStageRect$:Y,stageRatio$:X,collectorRect$:P,managerHighlightStage$:O}){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 j=new u(t),Z=new u(s),F=new u($),G=new u(b),J=new u(w),q=new u(E),Q=new u(y),K=new u(B),U=new u(_),ee=new u(N),te=x([L,D],(([e,t])=>e?v.Minimized:t?v.Maximized:v.Normal)),ie=new u({width:M(n,0,1),height:M(o,0,1)},{compare:d}),se=x([ie,Y],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:d}),ae=new u({width:a,height:r},{compare:d});this._sideEffect.addDisposer(ie.reaction(((e,t)=>{ae.setValue({width:Math.max(a,e.width),height:Math.max(r,e.height)},t)})));const re=new u({x:l,y:f},{compare:d}),ne=x([ae,Y],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:d}),oe=x([re,Y],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:d}),he=new u(S),le=x([D,he,O],(([e,t,i])=>null===t?i&&e:t)),de=new u(null),ce=new u(W.value,{compare:d}),me=new V({namespace:i,root$:de,rootRect$:ce,ratio$:X,highlightStage$:le});this._sideEffect.addDisposer((()=>me.destroy()));const ue={darkMode:I,fence:k,minimized:L,maximized:D,readonly:H,rootRect:W,managerStageRect:Y,collectorRect:P,zIndex:q,focus:Q,$userContent:K,$userFooter:U,$userStyles:ee,state:te,minSize:ie,pxMinSize:se,intrinsicSize:ae,intrinsicCoord:re,pxIntrinsicSize:ne,pxIntrinsicCoord:oe,highlightStage:le,boxHighlightStage:he,contentRect:ce,contentStageRect:me.stageRect$};g(this,ue);p(this,{title:j,visible:Z,resizable:F,draggable:G,ratio:J}),this.titleBar=z||new T({readonly$:H,state$:te,title:j.value,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(J.subscribe((e=>{e>0&&this.transform(oe.value.x,oe.value.y,ne.value.width,ne.value.height,!0)}))),this._sideEffect.addDisposer(k.subscribe((e=>{e&&this.move(oe.value.x,oe.value.y,!0)}))),this.$box=this.render(),de.setValue(this.$content.parentElement);const xe=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,i)=>{i||this.events.emit(t,e)})))};xe(I,C.DarkMode),xe(H,C.Readonly),xe(q,C.ZIndex),xe(L,C.Minimized),xe(D,C.Maximized),xe(te,C.State),xe(ae,C.IntrinsicResize),xe(re,C.IntrinsicMove),this._sideEffect.addDisposer([Z.reaction(((e,t)=>{t||e||this.events.emit(C.Close)})),Q.reaction(((e,t)=>{t||this.events.emit(e?C.Focus:C.Blur)})),A.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 r=this.managerStageRect,n=this.pxIntrinsicSize;if(this.fence)s=M(e,r.x,r.x+r.width-n.width),a=M(t,r.y,r.y+r.height-n.height);else{const i=this.rootRect;s=M(e,i.x-n.width+20,i.x+i.width-20),a=M(t,i.y,i.y+i.height-20)}this._intrinsicCoord$.setValue({x:(s-r.x)/r.width,y:(a-r.y)/r.height},i)}transform(e,t,i,s,a=!1){const r=this.managerStageRect,n=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<n.y&&(t=n.y,s=this.pxIntrinsicSize.height),this.move(e,t,a),this._intrinsicSize$.setValue({width:i/r.width,height:s/r.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=L)=>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",D),e(this.$box,this._resizable$,"no-resize",D),e(this.$box,this._focus$,"blur",D),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",D),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===v.Minimized),s===v.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=x([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$],(([e,t,i,s,a])=>t&&a?{x:a.x+a.width/2,y:a.y+a.height/2,width:i.width+"px",height:i.height+"px",scaleX:a.width/i.width,scaleY:a.height/i.height}: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}),{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 r=document.createElement("div");r.className=this.wrapClassName("titlebar-wrap"),r.appendChild(this.titleBar.render()),this.$titleBar=r;const n=document.createElement("div");n.className=this.wrapClassName("content-wrap");const o=document.createElement("div");o.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=o,this._sideEffect.add((()=>{const e=new H((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(o),()=>e.disconnect()})),this._sideEffect.add((()=>{let e;return this._$userStyles$.subscribe((t=>{e&&e.remove(),e=t,t&&n.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userContent$.subscribe((t=>{e&&e.remove(),e=t,t&&o.appendChild(t)}))})),n.appendChild(o);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(r),a.appendChild(n),a.appendChild(h),this._renderResizeHandlers(),this.$box}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(B).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,r=0,n=0,o=0,h=0,l=0,d=0;const c=e=>{if(this.state!==v.Normal)return;S(e);let{pageX:t,pageY:i}=I(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 B.North:u=n+c,g=h-c;break;case B.South:g=h+c;break;case B.West:m=r+s,x=o-s;break;case B.East:x=o+s;break;case B.NorthWest:m=r+s,u=n+c,x=o-s,g=h-c;break;case B.NorthEast:u=n+c,x=o+s,g=h-c;break;case B.SouthEast:x=o+s,g=h+c;break;case B.SouthWest:m=r+s,x=o-s,g=h+c;break;default:return void this.move(r+s,n+c)}this.transform(m,u,x,g)},m=e=>{a=void 0,s&&(S(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!==v.Normal)return;const x=e.target;if(null==(u=x.dataset)?void 0:u.teleBoxHandle){S(e),({x:r,y:n}=this.pxIntrinsicCoord),({width:o,height:h}=this.pxIntrinsicSize),({pageX:l,pageY:d}=I(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(C.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var W,Y;class X{constructor({minimized$:e,readonly$:t,darkMode$:i,rootRect$:s,namespace:a="telebox",styles:r={},root$:n}){this._sideEffect=new c,this.namespace=a;const o=new u(void 0),h=e,l=new u(r),d=new u(document.createElement("button"));p(this,{styles:l,el:d});g(this,{rect:o,visible:h,root:n}),d.value.className=this.wrapClassName("collector"),d.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(d.subscribe((a=>{this._sideEffect.addEventListener(a,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([h.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)})),l.subscribe((e=>{Object.keys(e).forEach((t=>{const i=e[t];null!=i&&(a.style[t]=i)}))})),n.subscribe((e=>{e&&e.appendChild(a)})),x([e,s,n]).subscribe((([e,t,i])=>{if(e&&i){const{x:e,y:i,width:s,height:r}=a.getBoundingClientRect();o.setValue({x:e-t.x,y:i-t.y,width:s,height:r})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}(Y=W||(W={})).Focused="focused",Y.Blurred="blurred",Y.Created="created",Y.Removed="removed",Y.State="state",Y.Maximized="maximized",Y.Minimized="minimized",Y.IntrinsicMove="intrinsic_move",Y.IntrinsicResize="intrinsic_resize",Y.ZIndex="z_index",Y.PrefersColorScheme="prefers_color_scheme",Y.DarkMode="dark_mode";class P extends T{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===v.Maximized){const{children:i}=this.$titles.firstElementChild;for(let s=i.length-1;s>=0;s-=1){const a=i[s],r=null==(t=a.dataset)?void 0:t.teleBoxID;r&&(e&&r===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&r===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===v.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)})),x([this.state$,this.boxes$]).subscribe((([t,i])=>{t===v.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===i.length),1===i.length?this.setTitle(i[0].title):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 O=window.ResizeObserver||f;class j{constructor({root:e=null,prefersColorScheme:t=$.Light,minimized:i=!1,maximized:s=!1,fence:a=!1,collector:r,namespace:n="telebox",readonly:o=!1,stageRatio:l=-1,highlightStage:m=!0}={}){this.events=new h,this._sideEffect=new c,this.namespace=n;const f=new u(e),b=new u(o),w=new u(i),y=new u(s),z=new u(a),B=new u(l),_=new u(m),N=new u({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:d});this._sideEffect.addDisposer(f.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new O((e=>{var t;const i=null==(t=e[0])?void 0:t.contentRect;i&&N.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 u([]),this.topBox$=new u(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 M=window.matchMedia("(prefers-color-scheme: dark)"),S=new u(!1);M&&(S.setValue(M.matches),this._sideEffect.add((()=>{const e=e=>{S.setValue(e.matches)};return M.addEventListener("change",e),()=>M.removeEventListener("change",e)})));const I=new u(t);this._sideEffect.addDisposer(I.reaction(((e,t)=>{t||this.events.emit(W.PrefersColorScheme,e)})));const k=x([S,I],(([e,t])=>"auto"===t?e:"dark"===t)),R=x([w,y],(([e,t])=>e?v.Minimized:t?v.Maximized:v.Normal));this.collector=null!=r?r:new X({minimized$:w,readonly$:b,darkMode$:k,namespace:n,root$:f,rootRect$:N});const L=new V({namespace:n,rootRect$:N,ratio$:B,root$:f,highlightStage$:x([_,y],(([e,t])=>e&&!t))});this._sideEffect.addDisposer((()=>L.destroy()));const D={darkMode:k,state:R,root:f,rootRect:N,stageRect:L.stageRect$};g(this,D);p(this,{prefersColorScheme:I,readonly:b,fence:z,minimized:w,maximized:y,stageRatio:B,highlightStage:_});const T=this.wrapClassName("titlebar-icon-close"),H=e=>{var t;if(b.value)return;const i=e.target;if(i.tagName)for(let s=i;s;s=s.parentElement){if(s.classList&&s.classList.contains(T))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",H,!0),this._sideEffect.addEventListener(window,"touchstart",H,!0),this.titleBar=new P({namespace:this.namespace,boxes$:this.boxes$,darkMode$:k,readonly$:b,state$:R,root$:f,rootRect$:N,onEvent:e=>{switch(e.type){case E.Maximize:y.setValue(!y.value);break;case E.Minimize:w.setValue(!0);break;case C.Close:this.removeTopBox(),this.focusTopBox()}}}),this._sideEffect.addDisposer([R.reaction(((e,t)=>{t||this.events.emit(W.State,e)})),y.reaction(((e,t)=>{t||this.events.emit(W.Maximized,e)})),w.reaction(((e,t)=>{t||this.events.emit(W.Minimized,e)})),k.reaction(((e,t)=>{t||this.events.emit(W.DarkMode,e)}))])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case v.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case v.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 A((r=o(o({zIndex:this.topBox?this.topBox.zIndex+1:100},e),s?this.smartPosition(e):{}),n={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(r,i(n))));var r,n;return a.focus&&(this.focusBox(a),s&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(E.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(E.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(E.Close,(()=>{this.remove(a),this.focusTopBox()})),a._intrinsicCoord$.reaction(((e,t)=>{t||this.events.emit(W.IntrinsicMove,a)})),a._intrinsicSize$.reaction(((e,t)=>{t||this.events.emit(W.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(W.ZIndex,a)}))]),this.events.emit(W.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(W.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(W.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(W.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(W.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(W.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,r,n,o,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!=(r=t.width)?r:e.intrinsicWidth,height:null!=(n=t.height)?n: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!=(o=t.minWidth)?o: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,r=this.stageRect,n=this.topBox;if(null==t){let e=r.x+20;if(n){const t=n.pxIntrinsicCoord.x+20;t+s*r.width<=r.x+r.width&&(e=t)}t=(e-r.x)/r.width}if(null==i){let e=r.y+20;if(n){const t=n.pxIntrinsicCoord.y+20;t+a*r.height<=r.y+r.height&&(e=t)}i=(e-r.y)/r.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{T as DefaultTitleBar,$ as TELE_BOX_COLOR_SCHEME,E as TELE_BOX_DELEGATE_EVENT,C as TELE_BOX_EVENT,W as TELE_BOX_MANAGER_EVENT,B as TELE_BOX_RESIZE_HANDLE,v as TELE_BOX_STATE,A as TeleBox,X as TeleBoxCollector,N as TeleBoxDragHandleType,j as TeleBoxManager};
 //# sourceMappingURL=telebox-insider.es.js.map