@netless/telebox-insider 1.0.0-alpha.13 → 1.0.0-alpha.16

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,n=Object.prototype.propertyIsEnumerable,o=(t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,r=(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))n.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{combine as u,ValManager as g,Val as x,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,S;(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=_||(_={})).Close="close",B.Maximize="maximize",B.Minimize="minimize",(S=N||(N={})).North="n",S.South="s",S.West="w",S.East="e",S.NorthWest="nw",S.NorthEast="ne",S.SouthEast="se",S.SouthWest="sw";const M="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:n,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;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:_.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:_.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=n,this.namespace=o,this.buttons=s||[{type:_.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:_.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===C.Maximized},{type:_.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,n,o,r]=["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(n),s.appendChild(r),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:n=.5,minWidth:o=0,minHeight:r=0,x:l=.1,y:$=.1,resizable:b=!0,draggable:v=!0,ratio:w=-1,focus:y=!1,zIndex:z=100,stageRatio:_=null,titleBar:B,content:N,stage:S,footer:M,styles:k,highlightStage:R=null,darkMode$:D,fence$:T,minimized$:V,maximized$:W,readonly$:Y,root$:X,rootRect$:P,managerStageRect$:O,managerStageRatio$:j,collectorRect$:Z,managerHighlightStage$:F}){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 G=new g;this._sideEffect.addDisposer((()=>G.destroy()));const J=new x(t),q=new x(s),Q=new x(b),K=new x(v),U=new x(w),ee=new x(z),te=new x(y),ie=new x(N),se=new x(S),ae=new x(M),ne=new x(k),oe=u([V,W],(([e,t])=>e?C.Minimized:t?C.Maximized:C.Normal)),re=new x({width:I(o,0,1),height:I(r,0,1)},{compare:d}),he=u([re,O],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:d}),le=new x({width:a,height:n},{compare:d});this._sideEffect.addDisposer(re.reaction(((e,t)=>{le.setValue({width:Math.max(a,e.width),height:Math.max(n,e.height)},t)})));const de=new x({x:l,y:$},{compare:d}),ce=u([le,O],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:d}),me=u([de,O],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:d}),ue=new x(R),ge=u([ue,F],(([e,t])=>null!=e?e:t)),xe=new x(null),pe=new x(P.value,{compare:d}),fe=new x(_),$e=new A({namespace:i,root$:xe,rootRect$:pe,ratio$:u([fe,j],(([e,t])=>null!=e?e:t)),highlightStage$:ge});this._sideEffect.addDisposer((()=>$e.destroy()));p(this,{darkMode:D,fence:T,minimized:V,maximized:W,readonly:Y,rootRect:P,managerStageRect:O,collectorRect:Z});const be={zIndex:ee,focus:te,$userContent:ie,$userStage:se,$userFooter:ae,$userStyles:ne,state:oe,minSize:re,pxMinSize:he,intrinsicSize:le,intrinsicCoord:de,pxIntrinsicSize:ce,pxIntrinsicCoord:me,highlightStage:ge,boxHighlightStage:ue,contentRect:pe,contentStageRect:$e.stageRect$};p(this,be,G);f(this,{title:J,visible:q,resizable:Q,draggable:K,ratio:U,stageRatio:fe},G),this.titleBar=B||new H({readonly$:Y,state$:oe,title$:J,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(U.subscribe((e=>{e>0&&this.transform(me.value.x,me.value.y,ce.value.width,ce.value.height,!0)}))),this._sideEffect.addDisposer(T.subscribe((e=>{e&&this.move(me.value.x,me.value.y,!0)}))),this.$box=this.render(),xe.setValue(this.$content.parentElement);const ve=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,i)=>{i||this.events.emit(t,e)})))};ve(D,E.DarkMode),ve(Y,E.Readonly),ve(ee,E.ZIndex),ve(V,E.Minimized),ve(W,E.Maximized),ve(oe,E.State),ve(le,E.IntrinsicResize),ve(de,E.IntrinsicMove),this._sideEffect.addDisposer([q.reaction(((e,t)=>{t||e||this.events.emit(E.Close)})),te.reaction(((e,t)=>{t||this.events.emit(e?E.Focus:E.Blur)})),X.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 n=this.managerStageRect,o=this.pxIntrinsicSize;if(this.fence)s=I(e,n.x,n.x+n.width-o.width),a=I(t,n.y,n.y+n.height-o.height);else{const i=this.rootRect;s=I(e,0-o.width+20,0+i.width-20),a=I(t,0,0+i.height-20)}this._intrinsicCoord$.setValue({x:(s-n.x)/n.width,y:(a-n.y)/n.height},i)}transform(e,t,i,s,a=!1){const n=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/n.width,height:s/n.height},a)}mountContent(e){this._$userContent$.setValue(e)}unmountContent(){this._$userContent$.setValue(void 0)}mountStage(e){this._$userStage$.setValue(e)}unmountStage(){this._$userStage$.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 n=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;n.x=a.x-t/2+a.width/2,n.y=a.y-s/2+a.height/2,n.scaleX=a.width/t,n.scaleY=a.height/s}return n}),{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 n=document.createElement("div");n.className=this.wrapClassName("titlebar-wrap"),n.appendChild(this.titleBar.render()),this.$titleBar=n;const o=document.createElement("div");o.className=this.wrapClassName("content-wrap");const r=document.createElement("div");r.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=r,this._sideEffect.add((()=>{const e=new W((()=>{const e=r.getBoundingClientRect();this._contentRect$.setValue({x:e.x,y:e.y,width:e.width,height:e.height})}));return e.observe(r),()=>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&&r.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userStage$.subscribe((t=>{var i;if(e&&e.remove(),e=t,t){if(!this.$stage){const e=document.createElement("div");this.$stage=e,e.className=this.wrapClassName("content-stage"),this._sideEffect.addDisposer(this._contentStageRect$.subscribe((t=>{t&&(e.style.top=t.y+"px",e.style.left=t.x+"px",e.style.width=t.width+"px",e.style.height=t.height+"px")})),"content-stage-rect"),r.appendChild(e)}this.$stage.parentElement||r.appendChild(this.$stage),this.$stage.appendChild(t)}else(null==(i=this.$stage)?void 0:i.parentElement)&&this.$stage.remove()}))})),o.appendChild(r);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(n),a.appendChild(o),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,n=0,o=0,r=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:g,height:x}=this.pxIntrinsicSize;switch(a){case N.North:u=o+c,x=h-c;break;case N.South:x=h+c;break;case N.West:m=n+s,g=r-s;break;case N.East:g=r+s;break;case N.NorthWest:m=n+s,u=o+c,g=r-s,x=h-c;break;case N.NorthEast:u=o+c,g=r+s,x=h-c;break;case N.SouthEast:g=r+s,x=h+c;break;case N.SouthWest:m=n+s,g=r-s,x=h+c;break;default:return void this.move(n+s,o+c)}this.transform(m,u,g,x)},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 g=e.target;if(null==(u=g.dataset)?void 0:u.teleBoxHandle){k(e),({x:n,y:o}=this.pxIntrinsicCoord),({width:r,height:h}=this.pxIntrinsicSize),({pageX:l,pageY:d}=R(e)),a=g.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:n={},root$:o}){this._sideEffect=new c,this.namespace=a;const r=new g;this._sideEffect.addDisposer((()=>r.destroy()));const h=new x(void 0),l=$(e),d=new x(n),m=new x(document.createElement("button"));f(this,{styles:d,$collector:m},r);p(this,{root:o});p(this,{rect:h,visible:l},r),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)}))})),o.subscribe((e=>{e&&e.appendChild(a)})),u([e,s,o]).subscribe((([e,t,i])=>{if(e&&i){const{x:e,y:i,width:s,height:n}=a.getBoundingClientRect();h.setValue({x:e-t.x,y:i-t.y,width:s,height:n})}}))],"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],n=null==(t=a.dataset)?void 0:t.teleBoxID;n&&(e&&n===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&n===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:n,namespace:o="telebox",readonly:r=!1,stageRatio:l=-1,highlightStage:m=!0}={}){this.events=new h,this._sideEffect=new c,this.namespace=o;const b=new g;this._sideEffect.addDisposer((()=>b.destroy()));const w=new x(e),y=new x(r),z=new x(i),B=new x(s),N=new x(a),S=new x(l),M=new x(m),I=new x({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 x([]),this.topBox$=new x(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 x(!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 x(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,B],(([e,t])=>e?C.Minimized:t?C.Maximized:C.Normal));this.collector=null!=n?n:new O({minimized$:z,readonly$:y,darkMode$:L,namespace:o,root$:w,rootRect$:I});const V=new A({namespace:o,rootRect$:I,ratio$:S,root$:w,highlightStage$:u([M,B,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:B,stageRatio:S,highlightStage:M},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 _.Maximize:B.setValue(!B.value);break;case _.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)})),B.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((n=r(r({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$,managerStageRatio$:this._stageRatio$,readonly$:this._readonly$,collectorRect$:this.collector._rect$,managerHighlightStage$:this._highlightStage$},t(n,i(o))));var n,o;return a.focus&&(this.focusBox(a),s&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(_.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(_.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(_.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,n,o,r,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!=(n=t.width)?n: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),void 0!==t.stageRatio&&e.setStageRatio(t.stageRatio,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!=(r=t.minWidth)?r: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,n=this.stageRect,o=this.topBox;if(null==t){let e=n.x+20;if(o){const t=o.pxIntrinsicCoord.x+20;t+s*n.width<=n.x+n.width&&(e=t)}t=(e-n.x)/n.width}if(null==i){let e=n.y+20;if(o){const t=o.pxIntrinsicCoord.y+20;t+a*n.height<=n.y+n.height&&(e=t)}i=(e-n.y)/n.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,_ 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,M as TeleBoxDragHandleType,F as TeleBoxManager};
+var e=Object.defineProperty,t=Object.defineProperties,i=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,o=(t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,r=(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))n.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{combine as u,ValManager as g,Val as p,withReadonlyValueEnhancer as x,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,S;(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=_||(_={})).Close="close",B.Maximize="maximize",B.Minimize="minimize",(S=N||(N={})).North="n",S.South="s",S.West="w",S.East="e",S.NorthWest="nw",S.NorthEast="ne",S.SouthEast="se",S.SouthWest="sw";const M="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:n,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;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:_.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:_.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=n,this.namespace=o,this.buttons=s||[{type:_.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:_.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===C.Maximized},{type:_.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,n,o,r]=["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(n),s.appendChild(r),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:n=.5,minWidth:o=0,minHeight:r=0,x:l=.1,y:$=.1,resizable:b=!0,draggable:v=!0,ratio:w=-1,focus:y=!1,zIndex:z=100,stageRatio:_=null,titleBar:B,content:N,stage:S,footer:M,styles:k,highlightStage:R=null,darkMode$:D,fence$:T,minimized$:V,maximized$:W,readonly$:Y,root$:X,rootRect$:P,managerStageRect$:O,managerStageRatio$:j,collectorRect$:Z,managerHighlightStage$:F}){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 G=new g;this._sideEffect.addDisposer((()=>G.destroy()));const J=new p(t),q=new p(s),Q=new p(b),K=new p(v),U=new p(w),ee=new p(z),te=new p(y),ie=new p(N),se=new p(S),ae=new p(M),ne=new p(k),oe=u([V,W],(([e,t])=>e?C.Minimized:t?C.Maximized:C.Normal)),re=new p({width:I(o,0,1),height:I(r,0,1)},{compare:d}),he=u([re,O],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:d}),le=new p({width:a,height:n},{compare:d});this._sideEffect.addDisposer(re.reaction(((e,t)=>{le.setValue({width:Math.max(a,e.width),height:Math.max(n,e.height)},t)})));const de=new p({x:l,y:$},{compare:d}),ce=u([le,O],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:d}),me=u([de,O],(([e,t])=>({x:e.x*t.width+t.x,y:e.y*t.height+t.y})),{compare:d}),ue=new p(R),ge=u([ue,F],(([e,t])=>null!=e?e:t)),pe=new p(null),xe=new p(P.value,{compare:d}),fe=new p(_),$e=new A({namespace:i,root$:pe,rootRect$:xe,ratio$:u([fe,j],(([e,t])=>null!=e?e:t)),highlightStage$:ge});this._sideEffect.addDisposer((()=>$e.destroy()));x(this,{darkMode:D,fence:T,minimized:V,maximized:W,readonly:Y,rootRect:P,managerStageRect:O,collectorRect:Z});const be={zIndex:ee,focus:te,$userContent:ie,$userStage:se,$userFooter:ae,$userStyles:ne,state:oe,minSize:re,pxMinSize:he,intrinsicSize:le,intrinsicCoord:de,pxIntrinsicSize:ce,pxIntrinsicCoord:me,highlightStage:ge,boxHighlightStage:ue,contentRect:xe,contentStageRect:$e.stageRect$};x(this,be,G);f(this,{title:J,visible:q,resizable:Q,draggable:K,ratio:U,stageRatio:fe},G),this.titleBar=B||new H({readonly$:Y,state$:oe,title$:J,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(U.subscribe((e=>{e>0&&this.transform(me.value.x,me.value.y,ce.value.width,ce.value.height,!0)}))),this._sideEffect.addDisposer(T.subscribe((e=>{e&&this.move(me.value.x,me.value.y,!0)}))),this.$box=this.render(),pe.setValue(this.$content.parentElement);const ve=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,i)=>{i||this.events.emit(t,e)})))};ve(D,E.DarkMode),ve(Y,E.Readonly),ve(ee,E.ZIndex),ve(V,E.Minimized),ve(W,E.Maximized),ve(oe,E.State),ve(le,E.IntrinsicResize),ve(de,E.IntrinsicMove),this._sideEffect.addDisposer([q.reaction(((e,t)=>{t||e||this.events.emit(E.Close)})),te.reaction(((e,t)=>{t||this.events.emit(e?E.Focus:E.Blur)})),X.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 n=this.managerStageRect,o=this.pxIntrinsicSize;if(this.fence)s=I(e,n.x,n.x+n.width-o.width),a=I(t,n.y,n.y+n.height-o.height);else{const i=this.rootRect;s=I(e,0-o.width+20,0+i.width-20),a=I(t,0,0+i.height-20)}this._intrinsicCoord$.setValue({x:(s-n.x)/n.width,y:(a-n.y)/n.height},i)}transform(e,t,i,s,a=!1){const n=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/n.width,height:s/n.height},a)}mountContent(e){this._$userContent$.setValue(e)}unmountContent(){this._$userContent$.setValue(void 0)}mountStage(e){this._$userStage$.setValue(e)}unmountStage(){this._$userStage$.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 n=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;n.x=a.x-t/2+a.width/2,n.y=a.y-s/2+a.height/2,n.scaleX=a.width/t,n.scaleY=a.height/s}return n}),{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 n=document.createElement("div");n.className=this.wrapClassName("titlebar-wrap"),n.appendChild(this.titleBar.render()),this.$titleBar=n;const o=document.createElement("div");o.className=this.wrapClassName("content-wrap");const r=document.createElement("div");r.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=r,this._sideEffect.add((()=>{const e=new W((()=>{const e=r.getBoundingClientRect();this._contentRect$.setValue({x:0,y:0,width:e.width,height:e.height})}));return e.observe(r),()=>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&&r.appendChild(t)}))})),this._sideEffect.add((()=>{let e;return this._$userStage$.subscribe((t=>{var i;if(e&&e.remove(),e=t,t){if(!this.$stage){const e=document.createElement("div");this.$stage=e,e.className=this.wrapClassName("content-stage"),this._sideEffect.addDisposer(this._contentStageRect$.subscribe((t=>{t&&(e.style.top=t.y+"px",e.style.left=t.x+"px",e.style.width=t.width+"px",e.style.height=t.height+"px")})),"content-stage-rect"),r.appendChild(e)}this.$stage.parentElement||r.appendChild(this.$stage),this.$stage.appendChild(t)}else(null==(i=this.$stage)?void 0:i.parentElement)&&this.$stage.remove()}))})),o.appendChild(r);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(n),a.appendChild(o),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,n=0,o=0,r=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:g,height:p}=this.pxIntrinsicSize;switch(a){case N.North:u=o+c,p=h-c;break;case N.South:p=h+c;break;case N.West:m=n+s,g=r-s;break;case N.East:g=r+s;break;case N.NorthWest:m=n+s,u=o+c,g=r-s,p=h-c;break;case N.NorthEast:u=o+c,g=r+s,p=h-c;break;case N.SouthEast:g=r+s,p=h+c;break;case N.SouthWest:m=n+s,g=r-s,p=h+c;break;default:return void this.move(n+s,o+c)}this.transform(m,u,g,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!==C.Normal)return;const g=e.target;if(null==(u=g.dataset)?void 0:u.teleBoxHandle){k(e),({x:n,y:o}=this.pxIntrinsicCoord),({width:r,height:h}=this.pxIntrinsicSize),({pageX:l,pageY:d}=R(e)),a=g.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,namespace:s="telebox",styles:a={},root$:n}){this._sideEffect=new c,this.namespace=s;const o=new g;this._sideEffect.addDisposer((()=>o.destroy()));const r=new p(void 0),h=$(e),l=new p(a),d=new p(document.createElement("button"));f(this,{styles:l,$collector:d},o);x(this,{root:n});x(this,{rect:r,visible:h},o),d.value.className=this.wrapClassName("collector"),d.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(d.subscribe((s=>{this._sideEffect.addEventListener(s,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([h.subscribe((e=>{s.classList.toggle(this.wrapClassName("collector-visible"),e)})),t.subscribe((e=>{s.classList.toggle(this.wrapClassName("collector-readonly"),e)})),i.subscribe((e=>{s.classList.toggle(this.wrapClassName("color-scheme-dark"),e),s.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),l.subscribe((e=>{Object.keys(e).forEach((t=>{const i=e[t];null!=i&&(s.style[t]=i)}))})),n.subscribe((e=>{e&&e.appendChild(s)})),u([e,n]).subscribe((([e,t])=>{if(e&&t){const{x:e,y:i,width:a,height:n}=s.getBoundingClientRect(),o=t.getBoundingClientRect();r.setValue({x:e-o.x,y:i-o.y,width:a,height:n})}}))],"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],n=null==(t=a.dataset)?void 0:t.teleBoxID;n&&(e&&n===e.id?a.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&n===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:n,namespace:o="telebox",readonly:r=!1,stageRatio:l=-1,highlightStage:m=!0}={}){this.events=new h,this._sideEffect=new c,this.namespace=o;const b=new g;this._sideEffect.addDisposer((()=>b.destroy()));const w=new p(e),y=new p(r),z=new p(i),B=new p(s),N=new p(a),S=new p(l),M=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((()=>{const t=e.getBoundingClientRect();I.setValue({x:0,y:0,width:t.width,height:t.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,B],(([e,t])=>e?C.Minimized:t?C.Maximized:C.Normal));this.collector=null!=n?n:new O({minimized$:z,readonly$:y,darkMode$:L,namespace:o,root$:w});const V=new A({namespace:o,rootRect$:I,ratio$:S,root$:w,highlightStage$:u([M,B,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$};x(this,H,b);f(this,{prefersColorScheme:D,readonly:y,fence:N,minimized:z,maximized:B,stageRatio:S,highlightStage:M},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 _.Maximize:B.setValue(!B.value);break;case _.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)})),B.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((n=r(r({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$,managerStageRatio$:this._stageRatio$,readonly$:this._readonly$,collectorRect$:this.collector._rect$,managerHighlightStage$:this._highlightStage$},t(n,i(o))));var n,o;return a.focus&&(this.focusBox(a),s&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(_.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(_.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(_.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,n,o,r,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!=(n=t.width)?n: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),void 0!==t.stageRatio&&e.setStageRatio(t.stageRatio,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!=(r=t.minWidth)?r: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,n=this.stageRect,o=this.topBox;if(null==t){let e=n.x+20;if(o){const t=o.pxIntrinsicCoord.x+20;t+s*n.width<=n.x+n.width&&(e=t)}t=(e-n.x)/n.width}if(null==i){let e=n.y+20;if(o){const t=o.pxIntrinsicCoord.y+20;t+a*n.height<=n.y+n.height&&(e=t)}i=(e-n.y)/n.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,_ 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,M as TeleBoxDragHandleType,F as TeleBoxManager};
 //# sourceMappingURL=telebox-insider.es.js.map