@netless/telebox-insider 1.0.0-alpha.19 → 1.0.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/TeleBox/index.d.ts +37 -34
- package/dist/TeleBox/typings.d.ts +12 -8
- package/dist/TeleBoxManager/MaxTitleBar/index.d.ts +1 -1
- package/dist/TeleBoxManager/index.d.ts +3 -1
- package/dist/TeleBoxManager/typings.d.ts +9 -5
- package/dist/style.css +1 -1
- package/dist/telebox-insider.cjs.js +2 -1
- package/dist/telebox-insider.cjs.js.map +1 -1
- package/dist/telebox-insider.es.js +1647 -1
- package/dist/telebox-insider.es.js.map +1 -1
- package/package.json +67 -67
- package/src/TeleBox/index.ts +219 -220
- package/src/TeleBox/style.scss +9 -45
- package/src/TeleBox/style.shadow.scss +87 -0
- package/src/TeleBox/typings.ts +12 -8
- package/src/TeleBoxCollector/style.scss +9 -3
- package/src/TeleBoxManager/MaxTitleBar/index.ts +2 -20
- package/src/TeleBoxManager/MaxTitleBar/style.scss +33 -14
- package/src/TeleBoxManager/index.ts +58 -50
- package/src/TeleBoxManager/style.scss +23 -6
- package/src/TeleBoxManager/typings.ts +12 -4
- package/src/TeleTitleBar/DefaultTitleBar/style.scss +68 -11
- package/src/scss/mixins.scss +5 -0
- package/src/scss/variables.scss +40 -6
package/dist/TeleBox/index.d.ts
CHANGED
|
@@ -14,9 +14,9 @@ declare type ValConfig = {
|
|
|
14
14
|
resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
|
|
15
15
|
draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
|
|
16
16
|
boxRatio: Val<RequiredTeleBoxConfig["boxRatio"], boolean>;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
stageRatio: Val<RequiredTeleBoxConfig["stageRatio"], boolean>;
|
|
18
|
+
stageStyle: Val<RequiredTeleBoxConfig["stageStyle"], boolean>;
|
|
19
|
+
bodyStyle: Val<RequiredTeleBoxConfig["bodyStyle"], boolean>;
|
|
20
20
|
};
|
|
21
21
|
declare type PropsValConfig = {
|
|
22
22
|
darkMode: RequiredTeleBoxConfig["darkMode$"];
|
|
@@ -26,17 +26,13 @@ declare type PropsValConfig = {
|
|
|
26
26
|
readonly: RequiredTeleBoxConfig["readonly$"];
|
|
27
27
|
rootRect: RequiredTeleBoxConfig["rootRect$"];
|
|
28
28
|
managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
|
|
30
|
+
defaultBoxBodyStyle: RequiredTeleBoxConfig["defaultBoxBodyStyle$"];
|
|
31
31
|
collectorRect: RequiredTeleBoxConfig["collectorRect$"];
|
|
32
32
|
};
|
|
33
33
|
declare type MyReadonlyValConfig = {
|
|
34
34
|
zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
|
|
35
35
|
focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
|
|
36
|
-
$userContent: Val<TeleBoxConfig["content"], boolean>;
|
|
37
|
-
$userStage: Val<TeleBoxConfig["stage"], boolean>;
|
|
38
|
-
$userFooter: Val<TeleBoxConfig["footer"], boolean>;
|
|
39
|
-
$userStyles: Val<TeleBoxConfig["styles"], boolean>;
|
|
40
36
|
minSize: Val<TeleBoxSize, boolean>;
|
|
41
37
|
intrinsicSize: Val<TeleBoxSize, boolean>;
|
|
42
38
|
intrinsicCoord: Val<TeleBoxCoord, boolean>;
|
|
@@ -44,17 +40,19 @@ declare type MyReadonlyValConfig = {
|
|
|
44
40
|
pxIntrinsicSize: ReadonlyVal<TeleBoxSize, boolean>;
|
|
45
41
|
pxIntrinsicCoord: ReadonlyVal<TeleBoxCoord, boolean>;
|
|
46
42
|
state: ReadonlyVal<TeleBoxState, boolean>;
|
|
47
|
-
|
|
48
|
-
|
|
43
|
+
bodyRect: Val<TeleBoxRect>;
|
|
44
|
+
stageRect: ReadonlyVal<TeleBoxRect>;
|
|
49
45
|
};
|
|
50
46
|
declare type CombinedValEnhancedResult = ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig> & ValEnhancedResult<ValConfig>;
|
|
51
47
|
export interface TeleBox extends CombinedValEnhancedResult {
|
|
52
48
|
}
|
|
53
49
|
export declare class TeleBox {
|
|
54
|
-
constructor({ id, title, namespace, visible, width, height, minWidth, minHeight, x, y, resizable, draggable, boxRatio, focus, zIndex,
|
|
50
|
+
constructor({ id, title, namespace, visible, width, height, minWidth, minHeight, x, y, resizable, draggable, boxRatio, focus, zIndex, stageRatio, enableShadowDOM, titleBar, content, stage, footer, styles, userStyles, bodyStyle, stageStyle, darkMode$, fence$, minimized$, maximized$, readonly$, root, rootRect$, managerStageRect$, managerStageRatio$, defaultBoxBodyStyle$, defaultBoxStageStyle$, collectorRect$, }: TeleBoxConfig);
|
|
55
51
|
readonly id: string;
|
|
56
52
|
/** ClassName Prefix. For CSS styling. Default "telebox" */
|
|
57
53
|
readonly namespace: string;
|
|
54
|
+
/** Enable shadow DOM for box content. Default true. */
|
|
55
|
+
readonly enableShadowDOM: boolean;
|
|
58
56
|
readonly events: Emittery<{
|
|
59
57
|
dark_mode: boolean;
|
|
60
58
|
prefers_color_scheme: "light" | "dark" | "auto";
|
|
@@ -155,39 +153,44 @@ export declare class TeleBox {
|
|
|
155
153
|
* @returns this
|
|
156
154
|
*/
|
|
157
155
|
protected transform(x: number, y: number, width: number, height: number, skipUpdate?: boolean): void;
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
*/
|
|
156
|
+
private $authorContent?;
|
|
157
|
+
/** Mount dom to box content. */
|
|
161
158
|
mountContent(content: HTMLElement): void;
|
|
162
|
-
/**
|
|
163
|
-
* Unmount content from the box.
|
|
164
|
-
*/
|
|
159
|
+
/** Unmount content from the box. */
|
|
165
160
|
unmountContent(): void;
|
|
161
|
+
private $authorStage?;
|
|
162
|
+
/** Mount dom to box stage. */
|
|
166
163
|
mountStage(stage: HTMLElement): void;
|
|
167
|
-
/**
|
|
168
|
-
* Unmount content from the box.
|
|
169
|
-
*/
|
|
164
|
+
/** Unmount content from the box. */
|
|
170
165
|
unmountStage(): void;
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
*/
|
|
166
|
+
private $authorFooter?;
|
|
167
|
+
/** Mount dom to box Footer. */
|
|
174
168
|
mountFooter(footer: HTMLElement): void;
|
|
175
|
-
/**
|
|
176
|
-
* Unmount Footer from the box.
|
|
177
|
-
*/
|
|
169
|
+
/** Unmount Footer from the box. */
|
|
178
170
|
unmountFooter(): void;
|
|
179
|
-
|
|
180
|
-
mountStyles(styles: string
|
|
171
|
+
/** Mount styles for box content */
|
|
172
|
+
mountStyles(styles: string): void;
|
|
173
|
+
/** Umount styles for box content */
|
|
181
174
|
unmountStyles(): void;
|
|
175
|
+
/** Mount user styles for box content */
|
|
176
|
+
mountUserStyles(styles: string): void;
|
|
177
|
+
/** Umount user styles for box content */
|
|
178
|
+
unmountUserStyles(): void;
|
|
182
179
|
/** DOM of the box */
|
|
183
180
|
$box: HTMLElement;
|
|
184
|
-
/** DOM of the box
|
|
181
|
+
/** DOM of the box body */
|
|
182
|
+
$body: HTMLElement;
|
|
183
|
+
/** DOM of the box content container inside box body */
|
|
185
184
|
$content: HTMLElement;
|
|
186
|
-
/** DOM of the box stage area */
|
|
185
|
+
/** DOM of the box stage area inside box body */
|
|
187
186
|
$stage?: HTMLElement;
|
|
188
|
-
/** DOM of
|
|
187
|
+
/** DOM of custom box content styles */
|
|
188
|
+
$styles: HTMLStyleElement;
|
|
189
|
+
/** DOM of end user custom box content styles */
|
|
190
|
+
$userStyles: HTMLStyleElement;
|
|
191
|
+
/** DOM of the box title bar container */
|
|
189
192
|
$titleBar: HTMLElement;
|
|
190
|
-
/** DOM of the box footer */
|
|
193
|
+
/** DOM of the box footer container */
|
|
191
194
|
$footer: HTMLElement;
|
|
192
195
|
private _render;
|
|
193
196
|
private _renderStage;
|
|
@@ -201,4 +204,4 @@ export declare class TeleBox {
|
|
|
201
204
|
wrapClassName(className: string): string;
|
|
202
205
|
}
|
|
203
206
|
declare type PropKeys<K = keyof TeleBox> = K extends keyof TeleBox ? TeleBox[K] extends Function ? never : K : never;
|
|
204
|
-
export declare type ReadonlyTeleBox = Pick<TeleBox, PropKeys | "wrapClassName" | "mountContent" | "unmountContent" | "mountFooter" | "unmountFooter" | "mountStage" | "unmountStage" | "mountStyles" | "unmountStyles" | "
|
|
207
|
+
export declare type ReadonlyTeleBox = Pick<TeleBox, PropKeys | "wrapClassName" | "mountContent" | "unmountContent" | "mountFooter" | "unmountFooter" | "mountStage" | "unmountStage" | "mountStyles" | "unmountStyles" | "setTitle" | "setDraggable" | "setResizable" | "setVisible" | "setBoxRatio" | "setStageRatio" | "setStageStyle" | "setBodyStyle" | "handleTrackStart" | "onValChanged">;
|
|
@@ -50,9 +50,11 @@ export interface TeleBoxConfig {
|
|
|
50
50
|
/** Base z-index for box. */
|
|
51
51
|
readonly zIndex?: number;
|
|
52
52
|
/** Box content stage ratio. Follow manager stage ratio if null. Default null. */
|
|
53
|
-
readonly
|
|
53
|
+
readonly stageRatio?: number | null;
|
|
54
54
|
/** Classname Prefix. For CSS styling. Default "telebox". */
|
|
55
55
|
readonly namespace?: string;
|
|
56
|
+
/** Enable shadow DOM for box content. Default true. */
|
|
57
|
+
readonly enableShadowDOM?: boolean;
|
|
56
58
|
/** TeleTitleBar Instance. */
|
|
57
59
|
readonly titleBar?: TeleTitleBar;
|
|
58
60
|
/** Box content element. */
|
|
@@ -62,11 +64,13 @@ export interface TeleBoxConfig {
|
|
|
62
64
|
/** Box footer element. */
|
|
63
65
|
readonly footer?: HTMLElement;
|
|
64
66
|
/** Box content styles. */
|
|
65
|
-
readonly styles?:
|
|
67
|
+
readonly styles?: string;
|
|
68
|
+
/** Box content styles from end users. */
|
|
69
|
+
readonly userStyles?: string;
|
|
66
70
|
/** Custom styles for box content container. Inherit from manager container style if null. Default null. */
|
|
67
|
-
readonly
|
|
71
|
+
readonly bodyStyle?: string | null;
|
|
68
72
|
/** Custom styles for box content stage. Inherit from manager stage style if null. Default null. */
|
|
69
|
-
readonly
|
|
73
|
+
readonly stageStyle?: string | null;
|
|
70
74
|
/** Actual Box Dark Mode */
|
|
71
75
|
readonly darkMode$: ReadonlyVal<boolean, boolean>;
|
|
72
76
|
/** Restrict box to always be within the stage area. Default false. */
|
|
@@ -85,10 +89,10 @@ export interface TeleBoxConfig {
|
|
|
85
89
|
readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
|
|
86
90
|
/** Stage area height/with ratio. No ratio if <= 0. */
|
|
87
91
|
readonly managerStageRatio$: ReadonlyVal<number, boolean>;
|
|
88
|
-
/**
|
|
89
|
-
readonly
|
|
90
|
-
/**
|
|
91
|
-
readonly
|
|
92
|
+
/** Default content styles for all boxes */
|
|
93
|
+
readonly defaultBoxBodyStyle$: ReadonlyVal<string | null>;
|
|
94
|
+
/** Default stage styles for all boxes */
|
|
95
|
+
readonly defaultBoxStageStyle$: ReadonlyVal<string | null>;
|
|
92
96
|
/** Position and dimension of collector */
|
|
93
97
|
readonly collectorRect$: ReadonlyVal<TeleBoxRect | undefined>;
|
|
94
98
|
}
|
|
@@ -9,7 +9,7 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
|
|
|
9
9
|
darkMode$: ReadonlyVal<boolean>;
|
|
10
10
|
boxes$: ReadonlyVal<TeleBox[]>;
|
|
11
11
|
rootRect$: ReadonlyVal<TeleBoxRect>;
|
|
12
|
-
root
|
|
12
|
+
root: HTMLElement;
|
|
13
13
|
}
|
|
14
14
|
export declare class MaxTitleBar extends DefaultTitleBar {
|
|
15
15
|
constructor(config: MaxTitleBarConfig);
|
|
@@ -26,12 +26,14 @@ declare type ValConfig = {
|
|
|
26
26
|
stageRatio: Val<number, boolean>;
|
|
27
27
|
containerStyle: Val<string>;
|
|
28
28
|
stageStyle: Val<string>;
|
|
29
|
+
defaultBoxBodyStyle: Val<string | null>;
|
|
30
|
+
defaultBoxStageStyle: Val<string | null>;
|
|
29
31
|
};
|
|
30
32
|
declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<ReadonlyValConfig>;
|
|
31
33
|
export interface TeleBoxManager extends CombinedValEnhancedResult {
|
|
32
34
|
}
|
|
33
35
|
export declare class TeleBoxManager {
|
|
34
|
-
constructor({ root, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, containerStyle, stageStyle, }?: TeleBoxManagerConfig);
|
|
36
|
+
constructor({ root, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, containerStyle, stageStyle, defaultBoxBodyStyle, defaultBoxStageStyle, }?: TeleBoxManagerConfig);
|
|
35
37
|
readonly $container: HTMLDivElement;
|
|
36
38
|
readonly $stage: HTMLDivElement;
|
|
37
39
|
get boxes(): ReadonlyArray<TeleBox>;
|
|
@@ -20,14 +20,18 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
|
|
|
20
20
|
readonly minimized?: boolean;
|
|
21
21
|
/** Is box readonly */
|
|
22
22
|
readonly readonly?: boolean;
|
|
23
|
-
/**
|
|
23
|
+
/** Custom styles for telebox manager container */
|
|
24
24
|
readonly containerStyle?: string;
|
|
25
|
-
/**
|
|
25
|
+
/** Custom styles for telebox manager stage */
|
|
26
26
|
readonly stageStyle?: string;
|
|
27
|
+
/** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
|
|
28
|
+
readonly defaultBoxBodyStyle?: string | null;
|
|
29
|
+
/** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
|
|
30
|
+
readonly defaultBoxStageStyle?: string | null;
|
|
27
31
|
}
|
|
28
|
-
declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "boxRatio" | "zIndex" | "
|
|
29
|
-
export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer" | "id" | "focus">;
|
|
30
|
-
export declare type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, "title" | "visible" | "resizable" | "draggable" | "boxRatio" | "
|
|
32
|
+
declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "boxRatio" | "zIndex" | "stageRatio";
|
|
33
|
+
export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer" | "styles" | "bodyStyle" | "stageStyle" | "id" | "focus" | "enableShadowDOM">;
|
|
34
|
+
export declare type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, "title" | "visible" | "resizable" | "draggable" | "boxRatio" | "stageRatio" | "zIndex" | "id" | "focus">;
|
|
31
35
|
export declare type TeleBoxManagerUpdateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer">;
|
|
32
36
|
declare type CheckTeleBoxManagerConfig<T extends Record<`${TELE_BOX_MANAGER_EVENT}`, any>> = T;
|
|
33
37
|
export declare type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:rgba(68,78,96,.1);background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:rgba(68,78,96,.1)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:rgba(68,78,96,.2)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:rgba(68,78,96,.2)}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4, .9, .71, 1.02),height .4s cubic-bezier(.55, .82, .63, .95),opacity .6s cubic-bezier(.7, 0, .84, 0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 10px 0 rgba(47,65,146,.15);border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.telebox-content{width:100%;height:100%;position:relative;background:#f9f9f9}.telebox-content-stage{position:absolute;z-index:1;overflow:hidden;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.08)}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap::before{content:"";display:block;flex:1}.telebox-resize-handle{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width 50ms cubic-bezier(.4, .9, .71, 1.02),height 50ms cubic-bezier(.55, .82, .63, .95),opacity .6s cubic-bezier(.7, 0, .84, 0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7, 0, .84, 0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;border-color:#43434d}.telebox-color-scheme-dark .telebox-content{background:#25282e}.telebox-color-scheme-dark .telebox-content-stage{background:#272a30;box-shadow:0 0 16px rgba(0,0,0,.24)}.telebox-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;box-sizing:border-box;height:26px;display:flex;align-items:center;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;touch-action:manipulation}.telebox-title-area{padding-left:16px;overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-drag-area{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:10}.telebox-titlebar-btns{padding-right:16px;white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=")}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==")}.telebox-titlebar-icon-maximize.is-active{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K")}.telebox-titlebar-icon-close{background:center/cover no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=")}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-manager-container{position:relative;overflow:hidden;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#f9f9f9}.telebox-manager-container.is-maximized>.telebox-manager-stage,.telebox-manager-container.is-minimized>.telebox-manager-stage{overflow:visible}.telebox-manager-stage{position:relative;overflow:hidden;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.08)}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-manager-container{background:#25282e}.telebox-color-scheme-dark.telebox-manager-container>.telebox-manager-stage{background:#272a30;box-shadow:0 0 16px rgba(0,0,0,.24)}.telebox-collector{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;visibility:hidden;display:block;position:absolute;z-index:5120;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px 0 rgba(47,65,146,.15);cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center;-webkit-tap-highlight-color:transparent}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;display:none;position:absolute;top:0;left:0;width:100%;z-index:5100;border-top-left-radius:6px;border-top-right-radius:6px}.telebox-max-titlebar .telebox-title{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title{display:block}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:rgba(238,238,247,.8);background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:rgba(238,238,247,.8)}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:150px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer;user-select:none}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}
|
|
1
|
+
.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-quarantine{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.telebox-body-wrap{color:#191919;color:var(--tele-box-color, #191919);flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.telebox-content{width:100%;height:100%;position:relative;background-color:#f9f9f9;background-color:var(--tele-manager-container-background, #f9f9f9)}.telebox-box-stage{position:absolute;z-index:1;overflow:hidden;background-color:#fff;background-color:var(--tele-manager-stage-background, #fff);box-shadow:0 0 16px #00000014;box-shadow:var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, .08))}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-color-scheme-dark .telebox-body-wrap{color:#e9e9e9;color:var(--tele-box-color-dark, #e9e9e9)}.telebox-color-scheme-dark .telebox-content{background-color:#25282e;background-color:var(--tele-manager-container-background-dark, #25282e)}.telebox-color-scheme-dark .telebox-box-stage{background-color:#272a30;background-color:var(--tele-manager-stage-background-dark, #272a30);box-shadow:0 0 16px #0000003d;box-shadow:var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, .24))}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{border:1px solid #e3e3ec;border:var(--tele-box-border, 1px solid #e3e3ec);box-shadow:0 4px 10px #2f419226;box-shadow:var(--tele-box-shadow, 0px 4px 10px 0px rgba(47, 65, 146, .15));position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:6px}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-quarantine-wrap{all:initial;flex:1;width:100%;overflow:hidden}.telebox-resize-handle{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width .05s cubic-bezier(.4,.9,.71,1.02),height .05s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{border:1px solid #383b42;border:var(--tele-box-border-dark, 1px solid #383b42);box-shadow:0 4px 10px #383b4226;box-shadow:var(--tele-box-shadow-dark, 0px 4px 10px 0px rgba(56, 59, 66, .15))}.telebox-titlebar{-webkit-touch-callout:none;-webkit-user-select:none;box-sizing:border-box;height:26px;display:flex;align-items:center;user-select:none;touch-action:manipulation;color:#191919;color:var(--tele-titlebar-color, #191919);background-color:#fff;background-color:var(--tele-titlebar-background, #fff);border-bottom:1px solid #eeeef7;border-bottom:var(--tele-titlebar-border-bottom, 1px solid #eeeef7)}.telebox-title-area{padding-left:16px;overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;color:#191919;color:var(--tele-titlebar-color, #191919);overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis}.telebox-drag-area{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;z-index:10}.telebox-titlebar-btns{padding-right:16px;white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;width:22px;height:22px;padding:0;outline:none;border:none;background:transparent;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=);background-image:var(--tele-titlebar-icon-minimize, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=))}.telebox-titlebar-icon-maximize{background:center/cover no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==);background-image:var(--tele-titlebar-icon-maximize, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==))}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K);background-image:var(--tele-titlebar-icon-maximize-active, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K))}.telebox-titlebar-icon-close{background:center/cover no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=);background-image:var(--tele-titlebar-icon-close, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=))}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9;color:var(--tele-titlebar-color-dark, #e9e9e9)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;color:var(--tele-titlebar-color-dark, #e9e9e9);background-color:#383b42;background-color:var(--tele-titlebar-background-dark, #383b42);border-bottom:none;border-bottom:var(--tele-titlebar-border-bottom-dark, none)}.telebox-color-scheme-dark .telebox-titlebar-icon-minimize{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=);background-image:var(--tele-titlebar-icon-minimize-dark, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=))}.telebox-color-scheme-dark .telebox-titlebar-icon-maximize{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==);background-image:var(--tele-titlebar-icon-maximize-dark, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==))}.telebox-color-scheme-dark .telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K);background-image:var(--tele-titlebar-icon-maximize-active-dark, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K))}.telebox-color-scheme-dark .telebox-titlebar-icon-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=);background-image:var(--tele-titlebar-icon-close-dark, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=))}.telebox-manager-container{position:relative;overflow:hidden;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background:#f9f9f9;background:var(--tele-manager-container-background, #f9f9f9)}.telebox-manager-container.is-maximized>.telebox-manager-stage,.telebox-manager-container.is-minimized>.telebox-manager-stage{overflow:visible}.telebox-manager-stage{position:relative;overflow:hidden;background:#fff;background:var(--tele-manager-stage-background, #fff);box-shadow:0 0 16px #00000014;box-shadow:var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, .08))}.telebox-color-scheme-dark.telebox-manager-container{background:#25282e;background:var(--tele-manager-container-background-dark, #25282e)}.telebox-color-scheme-dark.telebox-manager-container>.telebox-manager-stage{background:#272a30;background:var(--tele-manager-stage-background-dark, #272a30);box-shadow:0 0 16px #0000003d;box-shadow:var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, .24))}.telebox-collector{-webkit-touch-callout:none;-webkit-user-select:none;visibility:hidden;display:block;position:absolute;z-index:5120;width:40px;height:40px;margin:0;padding:0;border:none;outline:none;font-size:0;border-radius:50%;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center;-webkit-tap-highlight-color:transparent;background-color:#fff;background-color:var(--tele-collector-background, #fff);box-shadow:0 2px 6px #2f419226;box-shadow:var(--tele-collector-shadow, 0px 2px 6px 0px rgba(47, 65, 146, .15))}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#383b42;background-color:var(--tele-collector-background-dark, #383b42);box-shadow:0 2px 6px #2f419226;box-shadow:var(--tele-collector-shadow-dark, 0px 2px 6px 0px rgba(47, 65, 146, .15))}.telebox-max-titlebar{user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;display:none;position:absolute;top:0;left:0;width:100%;z-index:5100;border-top-left-radius:6px;border-top-right-radius:6px}.telebox-max-titlebar .telebox-title,.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-titles{display:none}.telebox-max-titlebar.telebox-max-titlebar-single-title .telebox-title{display:block}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:4px;width:4px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:2px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:150px;padding:0 26px 0 16px;outline:none;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right-width:1px;border-right-style:solid;cursor:pointer;user-select:none;color:#7b88a0;color:var(--tele-titlebar-tab-color, #7b88a0);background-color:transparent;background-color:var(--tele-titlebar-tab-background, transparent);border-right-color:#e5e5f0;border-right-color:var(--tele-titlebar-tab-divider-color, #e5e5f0)}.telebox-titles-tab-focus{color:#357bf6;color:var(--tele-titlebar-tab-focus-color, #357bf6)}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-titles-tab{color:#e9e9e9;color:var(--tele-titlebar-tab-color-dark, #e9e9e9);background-color:transparent;background-color:var(--tele-titlebar-tab-background-dark, transparent);border-right-color:#7b88a0;border-right-color:var(--tele-titlebar-tab-divider-color-dark, #7b88a0)}.telebox-color-scheme-dark .telebox-titles-tab-focus{color:#357bf6;color:var(--tele-titlebar-tab-focus-color-dark, #357bf6)}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
"use strict";var e=Object.defineProperty,t=Object.defineProperties,s=Object.getOwnPropertyDescriptors,i=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,o=(t,s,i)=>s in t?e(t,s,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[s]=i,r=(e,t)=>{for(var s in t||(t={}))a.call(t,s)&&o(e,s,t[s]);if(i)for(var s of i(t))n.call(t,s)&&o(e,s,t[s]);return e};Object.defineProperty(exports,"__esModule",{value:!0}),exports[Symbol.toStringTag]="Module";var l=require("emittery"),h=require("stylefire"),c=require("shallowequal"),d=require("side-effect-manager"),E=require("value-enhancer"),u=require("@juggle/resize-observer");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x,p,_,g,f,b=m(l),$=m(h),T=m(c);exports.TELE_BOX_COLOR_SCHEME=void 0,(x=exports.TELE_BOX_COLOR_SCHEME||(exports.TELE_BOX_COLOR_SCHEME={})).Light="light",x.Dark="dark",x.Auto="auto",exports.TELE_BOX_STATE=void 0,(p=exports.TELE_BOX_STATE||(exports.TELE_BOX_STATE={})).Normal="normal",p.Minimized="minimized",p.Maximized="maximized",exports.TELE_BOX_EVENT=void 0,(_=exports.TELE_BOX_EVENT||(exports.TELE_BOX_EVENT={})).DarkMode="dark_mode",_.PrefersColorScheme="prefers_color_scheme",_.Close="close",_.Focus="focus",_.Blur="blur",_.IntrinsicMove="intrinsic_move",_.IntrinsicResize="intrinsic_resize",_.ZIndex="z_index",_.State="state",_.Minimized="minimized",_.Maximized="maximized",_.Readonly="readonly",_.Destroyed="destroyed",exports.TELE_BOX_DELEGATE_EVENT=void 0,(g=exports.TELE_BOX_DELEGATE_EVENT||(exports.TELE_BOX_DELEGATE_EVENT={})).Close="close",g.Maximize="maximize",g.Minimize="minimize",exports.TELE_BOX_RESIZE_HANDLE=void 0,(f=exports.TELE_BOX_RESIZE_HANDLE||(exports.TELE_BOX_RESIZE_HANDLE={})).North="n",f.South="s",f.West="w",f.East="e",f.NorthWest="nw",f.NorthEast="ne",f.SouthEast="se",f.SouthWest="sw";function v(e,t,s){return Math.min(Math.max(e,t),s)}function w(e){e.stopPropagation(),e.cancelable&&e.preventDefault()}function B(e){return e.touches?e.touches[0]:e}let N=1;function C(){return"New Box "+N++}function L(e){return Boolean(e)}function y(e){return!e}class S{constructor({readonly$:e,state$:t,title$:s,buttons:i,onEvent:a,onDragStart:n,namespace:o="telebox"}){this.sideEffect=new d.SideEffectManager,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;w(e);const s=Date.now();s-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:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarClick.timestamp=s,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;w(e);const s=Date.now(),{clientX:i=this.lastTitleBarTouch.clientX+100,clientY:a=this.lastTitleBarTouch.clientY+100}=e.touches[0]||{};s-this.lastTitleBarTouch.timestamp<=500?Math.abs(i-this.lastTitleBarTouch.clientX)<=10&&Math.abs(a-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:exports.TELE_BOX_DELEGATE_EVENT.Maximize}):this.onDragStart&&this.onDragStart(e),this.lastTitleBarTouch.timestamp=s,this.lastTitleBarTouch.clientX=i,this.lastTitleBarTouch.clientY=a},this.readonly$=e,this.state$=t,this.title$=s,this.onEvent=a,this.onDragStart=n,this.namespace=o,this.buttons=i||[{type:exports.TELE_BOX_DELEGATE_EVENT.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:exports.TELE_BOX_DELEGATE_EVENT.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:e=>e===exports.TELE_BOX_STATE.Maximized},{type:exports.TELE_BOX_DELEGATE_EVENT.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 s=document.createElement("div");s.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach((({iconClassName:e},t)=>{const i=String(t),a=document.createElement("button");a.className=`${this.wrapClassName("titlebar-btn")} ${e}`,a.dataset.teleTitleBarBtnIndex=i,a.dataset.teleTitleBarNoDblClick="true",s.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,i)=>{var a;t.isActive&&(null==(a=s.children[i])||a.classList.toggle("is-active",t.isActive(e)))}))})),"render-state-btns"),this.sideEffect.addEventListener(s,"click",(e=>{var t;if(this.readonly$.value)return;const s=e.target,i=Number(null==(t=s.dataset)?void 0:t.teleTitleBarBtnIndex);if(!Number.isNaN(i)&&i<this.buttons.length){w(e);const t=this.buttons[i];this.onEvent&&this.onEvent({type:t.type,value:t.value})}}),{},"render-btns-container-click"),this.$titleBar.appendChild(e),this.$titleBar.appendChild(s)}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)}}function z([e,t]){if(t<=0||e.width<=0||e.height<=0)return e;const s=e.width*t;if(s===e.height)return e;if(s<e.height)return{x:0,y:(e.height-s)/2,width:e.width,height:s};const i=e.height/t;return{x:(e.width-i)/2,y:0,width:i,height:e.height}}const V=window.ResizeObserver||u.ResizeObserver;class M{constructor({id:e=d.genUID(),title:t=C(),namespace:s="telebox",visible:i=!0,width:a=.5,height:n=.5,minWidth:o=0,minHeight:r=0,x:l=.1,y:h=.1,resizable:c=!0,draggable:u=!0,boxRatio:m=-1,focus:x=!1,zIndex:p=100,contentStageRatio:_=null,titleBar:g,content:f,stage:$,footer:w,styles:B,contentStyle:N=null,contentStageStyle:L=null,darkMode$:y,fence$:V,minimized$:M,maximized$:A,readonly$:O,root:R,rootRect$:X,managerStageRect$:I,managerStageRatio$:D,managerContainerStyle$:k,managerStageStyle$:H,collectorRect$:G}){this.events=new b.default,this._delegateEvents=new b.default,this.handleTrackStart=e=>{var t;return null==(t=this._handleTrackStart)?void 0:t.call(this,e)},this._sideEffect=new d.SideEffectManager,this.id=e,this.namespace=s;const Z=new E.ValManager;this._sideEffect.addDisposer((()=>Z.destroy()));const W=new E.Val(t),Y=new E.Val(i),P=new E.Val(c),j=new E.Val(u),F=new E.Val(m),q=new E.Val(p),J=new E.Val(x),Q=new E.Val(f),U=new E.Val($),K=new E.Val(w),ee=new E.Val(B),te=E.combine([M,A],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal)),se=new E.Val({width:v(o,0,1),height:v(r,0,1)},{compare:T.default}),ie=E.combine([se,I],(([e,t])=>({width:e.width*t.width,height:e.height*t.height})),{compare:T.default}),ae=new E.Val({width:a,height:n},{compare:T.default});this._sideEffect.addDisposer(se.reaction(((e,t)=>{ae.setValue({width:Math.max(a,e.width),height:Math.max(n,e.height)},t)})));const ne=new E.Val({x:l,y:h},{compare:T.default}),oe=E.combine([ae,I],(([e,t])=>({width:t.width*e.width,height:t.height*e.height})),{compare:T.default}),re=E.combine([ne,I],(([e,t])=>({x:e.x*t.width,y:e.y*t.height})),{compare:T.default}),le=new E.Val(N),he=new E.Val(L),ce=new E.Val(null),de=new E.Val(I.value,{compare:T.default}),Ee=new E.Val(_),ue=E.combine([Ee,D],(([e,t])=>null!=e?e:t)),me=E.combine([de,ue],z,{compare:T.default}),xe={darkMode:y,fence:V,minimized:M,maximized:A,readonly:O,rootRect:X,managerStageRect:I,managerContainerStyle:k,managerStageStyle:H,collectorRect:G};E.withReadonlyValueEnhancer(this,xe);const pe={zIndex:q,focus:J,$userContent:Q,$userStage:U,$userFooter:K,$userStyles:ee,state:te,minSize:se,pxMinSize:ie,intrinsicSize:ae,intrinsicCoord:ne,pxIntrinsicSize:oe,pxIntrinsicCoord:re,contentRect:de,contentStageRect:me};E.withReadonlyValueEnhancer(this,pe,Z);const _e={title:W,visible:Y,resizable:P,draggable:j,boxRatio:F,contentStageRatio:Ee,contentStyle:le,contentStageStyle:he};E.withValueEnhancer(this,_e,Z),this.titleBar=g||new S({readonly$:O,state$:te,title$:W,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(F.subscribe((e=>{e>0&&this.transform(re.value.x,re.value.y,oe.value.width,oe.value.height)}))),this._sideEffect.addDisposer(V.subscribe((e=>{e&&this.move(re.value.x,re.value.y)}))),this.$box=this._render(),ce.setValue(this.$content.parentElement),R.appendChild(this.$box);const ge=(e,t)=>{this._sideEffect.addDisposer(e.reaction(((e,s)=>{s||this.events.emit(t,e)})))};ge(y,exports.TELE_BOX_EVENT.DarkMode),ge(O,exports.TELE_BOX_EVENT.Readonly),ge(q,exports.TELE_BOX_EVENT.ZIndex),ge(M,exports.TELE_BOX_EVENT.Minimized),ge(A,exports.TELE_BOX_EVENT.Maximized),ge(te,exports.TELE_BOX_EVENT.State),ge(ae,exports.TELE_BOX_EVENT.IntrinsicResize),ge(ne,exports.TELE_BOX_EVENT.IntrinsicMove),this._sideEffect.addDisposer([Y.reaction(((e,t)=>{t||e||this.events.emit(exports.TELE_BOX_EVENT.Close)})),J.reaction(((e,t)=>{t||this.events.emit(e?exports.TELE_BOX_EVENT.Focus:exports.TELE_BOX_EVENT.Blur)}))])}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,s=!1){this._intrinsicSize$.setValue({width:Math.max(e,this.minWidth),height:Math.max(t,this.minHeight)},s)}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,s=!1){let i,a;const n=this.managerStageRect,o=this.pxIntrinsicSize;this.fence?(i=v(e,0,n.width-o.width),a=v(t,0,n.height-o.height)):(i=v(e,-(o.width-120),0+n.width-20),a=v(t,0,0+n.height-20)),this._intrinsicCoord$.setValue({x:i/n.width,y:a/n.height},s)}transform(e,t,s,i,a=!1){const n=this.managerStageRect;if(s=Math.max(s,this.pxMinSize.width),i=Math.max(i,this.pxMinSize.height),this.boxRatio>0){const e=this.boxRatio*s;t!==this.pxIntrinsicCoord.y&&(t-=e-i),i=e}t<0&&(t=0,i=this.pxIntrinsicSize.height),this.move(e,t,a),this._intrinsicSize$.setValue({width:s/n.width,height:i/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)}_render(){if(this.$box)return this.$box;this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box"));const e=(e,t,s,i=L)=>this._sideEffect.add((()=>{const a=this.wrapClassName(s);return t.subscribe((t=>{e.classList.toggle(a,i(t))}))}));e(this.$box,this._readonly$,"readonly"),e(this.$box,this._draggable$,"no-drag",y),e(this.$box,this._resizable$,"no-resize",y),e(this.$box,this._focus$,"blur",y),e(this.$box,this._darkMode$,"color-scheme-dark"),e(this.$box,this._darkMode$,"color-scheme-light",y),this._sideEffect.add((()=>{const e=this.wrapClassName("minimized"),t=this.wrapClassName("maximized"),s="box-maximized-timer";return this._state$.subscribe((i=>{this.$box.classList.toggle(e,i===exports.TELE_BOX_STATE.Minimized),i===exports.TELE_BOX_STATE.Maximized?(this._sideEffect.flush(s),this.$box.classList.toggle(t,!0)):this._sideEffect.setTimeout((()=>{this.$box.classList.toggle(t,!1)}),0,s)}))})),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=$.default(this.$box),s=E.combine([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$,this._rootRect$,this._managerStageRect$],(([e,t,s,i,a,n,o])=>{const r=e?{x:-o.x,y:-o.y,width:n.width,height:n.height,scaleX:1,scaleY:1}:{x:i.x,y:i.y,width:s.width,height:s.height,scaleX:1,scaleY:1};if(t&&a){const{width:t,height:i}=e?this.rootRect:s;r.x=a.x-t/2+a.width/2-o.x,r.y=a.y-i/2+a.height/2-o.y,r.scaleX=a.width/t,r.scaleY=a.height/i}return r}),{compare:T.default}),i=s.value;this.$box.style.width=i.width+"px",this.$box.style.height=i.height+"px",this.$box.style.transform=`translate(${i.x-10}px,${i.y-10}px)`,this._sideEffect.addDisposer(s.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.addDisposer(E.combine([this._contentStyle$,this._managerContainerStyle$],(([e,t])=>null!=e?e:t)).subscribe((e=>r.style.cssText=e)));const l=()=>{const e=r.getBoundingClientRect();this._contentRect$.setValue({x:0,y:0,width:e.width,height:e.height})};this._sideEffect.add((()=>{const e=new V((()=>{this.minimized||l()}));return e.observe(r),()=>e.disconnect()})),this._sideEffect.addDisposer(this._minimized$.reaction((e=>{e||this._sideEffect.setTimeout(l,400,"minimized-content-rect-fix")}))),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 s;e&&e.remove(),e=t,t?(this.$stage||(this.$stage=this._renderStage(),r.appendChild(this.$stage)),this.$stage.parentElement||r.appendChild(this.$stage),this.$stage.appendChild(t)):(null==(s=this.$stage)?void 0:s.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}_renderStage(){const e=document.createElement("div");e.className=this.wrapClassName("content-stage");const 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"};return this._sideEffect.addDisposer([E.combine([this._contentStageStyle$,this._managerStageStyle$],(([e,t])=>null!=e?e:t)).subscribe((s=>{e.style.cssText=s,t(this._contentStageRect$.value)})),this._contentStageRect$.subscribe(t)],"content-stage-styles"),e}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(exports.TELE_BOX_RESIZE_HANDLE).forEach((t=>{const s=document.createElement("div");s.className=this.wrapClassName(t)+" "+this.wrapClassName("resize-handle"),s.dataset.teleBoxHandle=t,e.appendChild(s)})),this.$box.appendChild(e);const t="handle-tracking-listener",s=this.wrapClassName("transforming");let i,a,n=0,o=0,r=0,l=0,h=0,c=0;const d=e=>{if(this.state!==exports.TELE_BOX_STATE.Normal)return;w(e);let{pageX:t,pageY:s}=B(e);s<0&&(s=0);const i=t-h,d=s-c;let{x:E,y:u}=this.pxIntrinsicCoord,{width:m,height:x}=this.pxIntrinsicSize;switch(a){case exports.TELE_BOX_RESIZE_HANDLE.North:u=o+d,x=l-d;break;case exports.TELE_BOX_RESIZE_HANDLE.South:x=l+d;break;case exports.TELE_BOX_RESIZE_HANDLE.West:E=n+i,m=r-i;break;case exports.TELE_BOX_RESIZE_HANDLE.East:m=r+i;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthWest:E=n+i,u=o+d,m=r-i,x=l-d;break;case exports.TELE_BOX_RESIZE_HANDLE.NorthEast:u=o+d,m=r+i,x=l-d;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthEast:m=r+i,x=l+d;break;case exports.TELE_BOX_RESIZE_HANDLE.SouthWest:E=n+i,m=r-i,x=l+d;break;default:return void this.move(n+i,o+d)}this.transform(E,u,m,x)},E=e=>{a=void 0,i&&(w(e),this.$box.classList.toggle(s,!1),this._sideEffect.flush(t),i.remove())},u=e=>{var u;if(this.readonly)return;if(null!=e.button&&0!==e.button)return;if(!this.draggable||a||this.state!==exports.TELE_BOX_STATE.Normal)return;const m=e.target;if(null==(u=m.dataset)?void 0:u.teleBoxHandle){w(e),({x:n,y:o}=this.pxIntrinsicCoord),({width:r,height:l}=this.pxIntrinsicSize),({pageX:h,pageY:c}=B(e)),a=m.dataset.teleBoxHandle,i||(i=document.createElement("div"));const u=a?this.wrapClassName(`cursor-${a}`):"";i.className=this.wrapClassName("track-mask"+(u?` ${u}`:"")),this.$box.appendChild(i),this.$box.classList.add(s),this._sideEffect.add((()=>(window.addEventListener("mousemove",d),window.addEventListener("touchmove",d,{passive:!1}),window.addEventListener("mouseup",E),window.addEventListener("touchend",E,{passive:!1}),window.addEventListener("touchcancel",E,{passive:!1}),()=>{window.removeEventListener("mousemove",d),window.removeEventListener("touchmove",d),window.removeEventListener("mouseup",E),window.removeEventListener("touchend",E),window.removeEventListener("touchcancel",E)})),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(exports.TELE_BOX_EVENT.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var A;class O{constructor({minimized$:e,readonly$:t,darkMode$:s,namespace:i="telebox",styles:a={},root$:n}){this._sideEffect=new d.SideEffectManager,this.namespace=i;const o=new E.ValManager;this._sideEffect.addDisposer((()=>o.destroy()));const r=new E.Val(void 0),l=E.derive(e),h=new E.Val(a),c=new E.Val(document.createElement("button")),u={styles:h,$collector:c};E.withValueEnhancer(this,u,o);const m={root:n};E.withReadonlyValueEnhancer(this,m);const x={rect:r,visible:l};E.withReadonlyValueEnhancer(this,x,o),c.value.className=this.wrapClassName("collector"),c.value.style.backgroundImage="url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K')",this._sideEffect.addDisposer(c.subscribe((i=>{this._sideEffect.addEventListener(i,"click",(()=>{t.value||e.setValue(!1)}),{},"telebox-collector-click"),this._sideEffect.addDisposer([l.subscribe((e=>{i.classList.toggle(this.wrapClassName("collector-visible"),e)})),t.subscribe((e=>{i.classList.toggle(this.wrapClassName("collector-readonly"),e)})),s.subscribe((e=>{i.classList.toggle(this.wrapClassName("color-scheme-dark"),e),i.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),h.subscribe((e=>{Object.keys(e).forEach((t=>{const s=e[t];null!=s&&(i.style[t]=s)}))})),n.subscribe((e=>{e&&e.appendChild(i)})),E.combine([e,n]).subscribe((([e,t])=>{if(e&&t){const{x:e,y:s,width:a,height:n}=i.getBoundingClientRect(),o=t.getBoundingClientRect();r.setValue({x:e-o.x,y:s-o.y,width:a,height:n})}}))],"telebox-collector-el")})))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}exports.TELE_BOX_MANAGER_EVENT=void 0,(A=exports.TELE_BOX_MANAGER_EVENT||(exports.TELE_BOX_MANAGER_EVENT={})).Focused="focused",A.Blurred="blurred",A.Created="created",A.Removed="removed",A.State="state",A.Maximized="maximized",A.Minimized="minimized",A.IntrinsicMove="intrinsic_move",A.IntrinsicResize="intrinsic_resize",A.ZIndex="z_index",A.PrefersColorScheme="prefers_color_scheme",A.DarkMode="dark_mode";class R extends S{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===exports.TELE_BOX_STATE.Maximized){const{children:s}=this.$titles.firstElementChild;for(let i=s.length-1;i>=0;i-=1){const a=s[i],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===exports.TELE_BOX_STATE.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)})),E.combine([this.state$,this.boxes$]).subscribe((([t,s])=>{t===exports.TELE_BOX_STATE.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),1===s.length),1!==s.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 s=document.createElement("button");return s.className=this.wrapClassName("titles-tab"),s.textContent=t.title,s.dataset.teleBoxID=t.id,s.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&t.id===this.focusedBox.id&&s.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(s),t._title$.reaction((e=>s.textContent=e))}));return this.sideEffect.addDisposer((()=>t.forEach((e=>e()))),"max-render-tab-titles"),this.$titles}}const X=window.ResizeObserver||u.ResizeObserver;exports.DefaultTitleBar=S,exports.TeleBox=M,exports.TeleBoxCollector=O,exports.TeleBoxDragHandleType="dh",exports.TeleBoxManager=class{constructor({root:e=null,prefersColorScheme:t=exports.TELE_BOX_COLOR_SCHEME.Light,minimized:s=!1,maximized:i=!1,fence:a=!0,collector:n,namespace:o="telebox",readonly:r=!1,stageRatio:l=-1,containerStyle:h="",stageStyle:c=""}={}){this.events=new b.default,this._sideEffect=new d.SideEffectManager,this.namespace=o;const u=new E.ValManager;this._sideEffect.addDisposer((()=>u.destroy()));const m=new E.Val(e),x=new E.Val(r),p=new E.Val(s),_=new E.Val(i),g=new E.Val(a),f=new E.Val(h),$=new E.Val(c),v=new E.Val(l),w=new E.Val({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:T.default});this._sideEffect.addDisposer(m.subscribe((e=>{this._sideEffect.add((()=>{if(!e)return()=>{};const t=new X((()=>{const t=e.getBoundingClientRect();w.setValue({x:0,y:0,width:t.width,height:t.height})}));return t.observe(e),()=>t.disconnect()}),"calc-root-rect")})));const B=E.combine([w,v],z,{compare:T.default});this.boxes$=new E.Val([]),this.topBox$=new E.Val(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 N=window.matchMedia("(prefers-color-scheme: dark)"),C=new E.Val(!1);N&&(C.setValue(N.matches),this._sideEffect.add((()=>{const e=e=>{C.setValue(e.matches)};return N.addEventListener("change",e),()=>N.removeEventListener("change",e)})));const L=new E.Val(t);this._sideEffect.addDisposer(L.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.PrefersColorScheme,e)})));const y=E.combine([C,L],(([e,t])=>"auto"===t?e:"dark"===t)),S=E.combine([p,_],(([e,t])=>e?exports.TELE_BOX_STATE.Minimized:t?exports.TELE_BOX_STATE.Maximized:exports.TELE_BOX_STATE.Normal));this.collector=null!=n?n:new O({minimized$:p,readonly$:x,darkMode$:y,namespace:o,root$:m});const V={darkMode:y,state:S,root:m,rootRect:w,stageRect:B};E.withReadonlyValueEnhancer(this,V,u);const M={prefersColorScheme:L,readonly:x,fence:g,minimized:p,maximized:_,stageRatio:v,containerStyle:f,stageStyle:$};E.withValueEnhancer(this,M,u);const A=this.wrapClassName("titlebar-icon-close"),I=e=>{var t;if(x.value)return;const s=e.target;if(s.tagName)for(let i=s;i;i=i.parentElement){if(i.classList&&i.classList.contains(A))return;const e=null==(t=i.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",I,!0),this._sideEffect.addEventListener(window,"touchstart",I,!0),this.titleBar=new R({namespace:this.namespace,title$:E.derive(this.topBox$,(e=>(null==e?void 0:e.title)||"")),boxes$:this.boxes$,darkMode$:y,readonly$:x,state$:S,root$:m,rootRect$:w,onEvent:e=>{switch(e.type){case exports.TELE_BOX_DELEGATE_EVENT.Maximize:_.setValue(!_.value);break;case exports.TELE_BOX_DELEGATE_EVENT.Minimize:p.setValue(!0);break;case exports.TELE_BOX_EVENT.Close:this.removeTopBox(),this.focusTopBox()}}}),this._sideEffect.addDisposer([S.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.State,e)})),_.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Maximized,e)})),p.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Minimized,e)})),y.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.DarkMode,e)}))]),this.$container=document.createElement("div"),this.$container.className=this.wrapClassName("manager-container"),this.$stage=document.createElement("div"),this.$stage.className=this.wrapClassName("manager-stage"),this.$container.appendChild(this.$stage),this._sideEffect.addDisposer([y.subscribe((e=>{this.$container.classList.toggle(this.wrapClassName("color-scheme-dark"),e),this.$container.classList.toggle(this.wrapClassName("color-scheme-light"),!e)})),_.subscribe((e=>{this.$container.classList.toggle("is-maximized",e)})),p.subscribe((e=>{this.$container.classList.toggle("is-minimized",e)})),f.subscribe((e=>{this.$container.style.cssText=e})),$.subscribe((e=>{this.$stage.style.cssText=e,this.$stage.style.width=B.value.width+"px",this.$stage.style.height=B.value.height+"px"})),B.subscribe((e=>{this.$stage.style.width=e.width+"px",this.$stage.style.height=e.height+"px"})),m.subscribe((e=>{e?e.appendChild(this.$container):this.$container.parentElement&&this.$container.remove()}))])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case exports.TELE_BOX_STATE.Maximized:this.setMinimized(!1,t),this.setMaximized(!0,t);break;case exports.TELE_BOX_STATE.Minimized:this.setMinimized(!0,t),this.setMaximized(!1,t);break;default:this.setMinimized(!1,t),this.setMaximized(!1,t)}return this}create(e={},i=!0){const a=new M((n=r(r({zIndex:this.topBox?this.topBox.zIndex+1:100},e),i?this.smartPosition(e):{}),o={namespace:this.namespace,root:this.$stage,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$,managerContainerStyle$:this._containerStyle$,managerStageStyle$:this._stageStyle$},t(n,s(o))));var n,o;return a.focus&&(this.focusBox(a),i&&this.makeBoxTop(a)),this.boxes$.setValue([...this.boxes,a]),this._sideEffect.addDisposer([a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Maximize,(()=>{this.setMaximized(!this.maximized)})),a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Minimize,(()=>{this.setMinimized(!0)})),a._delegateEvents.on(exports.TELE_BOX_DELEGATE_EVENT.Close,(()=>{this.remove(a),this.focusTopBox()})),a._intrinsicCoord$.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.IntrinsicMove,a)})),a._intrinsicSize$.reaction(((e,t)=>{t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.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(exports.TELE_BOX_MANAGER_EVENT.ZIndex,a)}))]),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.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,s=!1){const i=this.boxes.find((t=>t.id===e));if(i)return this.updateBox(i,t,s)}updateAll(e,t=!1){this.boxes.forEach((s=>{this.updateBox(s,e,t)}))}remove(e,t=!1){const s=this.getBoxIndex(e);if(s>=0){const e=this.boxes.slice(),i=e.splice(s,1);return this.boxes$.setValue(e),i.forEach((e=>e.destroy())),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Removed,i)),i[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(exports.TELE_BOX_MANAGER_EVENT.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 s=this.getBox(e);s&&(this.boxes.forEach((e=>{if(s===e){let e=!1;s.focus||(e=!0,s._focus$.setValue(!0,t)),e&&!t&&this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Focused,s)}else e.focus&&this.blurBox(e,t)})),this.titleBar.focusBox(s))}focusTopBox(){if(this.topBox&&!this.topBox.focus)return this.focusBox(this.topBox)}blurBox(e,t=!1){const s=this.getBox(e);s&&(s.focus&&(s._focus$.setValue(!1,t),t||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred,s)),this.titleBar.focusedBox===s&&this.titleBar.focusBox())}blurAll(e=!1){this.boxes.forEach((t=>{t.focus&&(t._focus$.setValue(!1,e),e||this.events.emit(exports.TELE_BOX_MANAGER_EVENT.Blurred,t))})),this.titleBar.focusedBox&&this.titleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return s=>t.every((t=>e[t]===s[t]))}updateBox(e,t,s=!1){var i,a,n,o,r,l;null==t.x&&null==t.y||e._intrinsicCoord$.setValue({x:null!=(i=t.x)?i:e.intrinsicX,y:null!=(a=t.y)?a:e.intrinsicY},s),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},s),null!=t.title&&e._title$.setValue(t.title),null!=t.visible&&e._visible$.setValue(t.visible,s),null!=t.resizable&&e._resizable$.setValue(t.resizable,s),null!=t.draggable&&e._draggable$.setValue(t.draggable,s),null!=t.boxRatio&&e._boxRatio$.setValue(t.boxRatio,s),null!=t.zIndex&&e._zIndex$.setValue(t.zIndex,s),void 0!==t.contentStageRatio&&e.setContentStageRatio(t.contentStageRatio,s),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!=(l=t.minHeight)?l:e.minHeight},s)}smartPosition(e){let{x:t,y:s}=e;const{width:i=.5,height:a=.5}=e,n=this.stageRect,o=this.topBox;if(null==t){let e=20;if(o){const t=o.pxIntrinsicCoord.x+20;t+i*n.width<=n.width&&(e=t)}t=e/n.width}if(null==s){let e=20;if(o){const t=o.pxIntrinsicCoord.y+20;t+a*n.height<=n.height&&(e=t)}s=e/n.height}return{x:t,y:s,width:i,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}};
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var Be=require("emittery"),Ze=require("stylefire"),Pe=require("shallowequal"),K=require("side-effect-manager"),r=require("value-enhancer"),Ce=require("@juggle/resize-observer");function ce(s){return s&&typeof s=="object"&&"default"in s?s:{default:s}}var ne=ce(Be),Te=ce(Ze),Z=ce(Pe);var We=(()=>`.telebox-quarantine{position:relative;width:100%;height:100%;display:flex;flex-direction:column}.telebox-body-wrap{color:#191919;color:var(--tele-box-color, #191919);flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative}.telebox-content{width:100%;height:100%;position:relative;background-color:#f9f9f9;background-color:var(--tele-manager-container-background, #f9f9f9)}.telebox-box-stage{position:absolute;z-index:1;overflow:hidden;background-color:#fff;background-color:var(--tele-manager-stage-background, #fff);box-shadow:0 0 16px #00000014;box-shadow:var(--tele-manager-stage-shadow, 0px 0px 16px rgba(0, 0, 0, .08))}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark .telebox-body-wrap{color:#e9e9e9;color:var(--tele-box-color-dark, #e9e9e9)}.telebox-color-scheme-dark .telebox-content{background-color:#25282e;background-color:var(--tele-manager-container-background-dark, #25282e)}.telebox-color-scheme-dark .telebox-box-stage{background-color:#272a30;background-color:var(--tele-manager-stage-background-dark, #272a30);box-shadow:0 0 16px #0000003d;box-shadow:var(--tele-manager-stage-shadow-dark, 0px 0px 16px rgba(0, 0, 0, .24))}
|
|
2
|
+
`)();var ge=(s=>(s.Light="light",s.Dark="dark",s.Auto="auto",s))(ge||{}),z=(s=>(s.Normal="normal",s.Minimized="minimized",s.Maximized="maximized",s))(z||{}),L=(s=>(s.DarkMode="dark_mode",s.PrefersColorScheme="prefers_color_scheme",s.Close="close",s.Focus="focus",s.Blur="blur",s.IntrinsicMove="intrinsic_move",s.IntrinsicResize="intrinsic_resize",s.ZIndex="z_index",s.State="state",s.Minimized="minimized",s.Maximized="maximized",s.Readonly="readonly",s.Destroyed="destroyed",s))(L||{}),B=(s=>(s.Close="close",s.Maximize="maximize",s.Minimize="minimize",s))(B||{}),P=(s=>(s.North="n",s.South="s",s.West="w",s.East="e",s.NorthWest="nw",s.NorthEast="ne",s.SouthEast="se",s.SouthWest="sw",s))(P||{});const ee="dh";function R(s,e,t){return Math.min(Math.max(s,e),t)}function E(s){s.stopPropagation(),s.cancelable&&s.preventDefault()}function xe(s){return s.touches?s.touches[0]:s}let He=1;function Qe(){return`New Box ${He++}`}class de{constructor({readonly$:e,state$:t,title$:i,buttons:a,onEvent:o,onDragStart:l,namespace:n="telebox"}){this.sideEffect=new K.SideEffectManager,this.lastTitleBarClick={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarClick=d=>{var w;if(this.readonly$.value||d.button!==0||(w=d.target.dataset)!=null&&w.teleTitleBarNoDblClick)return;E(d);const x=Date.now();x-this.lastTitleBarClick.timestamp<=500?Math.abs(d.clientX-this.lastTitleBarClick.clientX)<=5&&Math.abs(d.clientY-this.lastTitleBarClick.clientY)<=5&&this.onEvent&&this.onEvent({type:B.Maximize}):this.onDragStart&&this.onDragStart(d),this.lastTitleBarClick.timestamp=x,this.lastTitleBarClick.clientX=d.clientX,this.lastTitleBarClick.clientY=d.clientY},this.lastTitleBarTouch={timestamp:0,clientX:-100,clientY:-100},this.handleTitleBarTouch=d=>{var k;if(this.readonly$.value||(k=d.target.dataset)!=null&&k.teleTitleBarNoDblClick)return;E(d);const x=Date.now(),{clientX:w=this.lastTitleBarTouch.clientX+100,clientY:p=this.lastTitleBarTouch.clientY+100}=d.touches[0]||{};x-this.lastTitleBarTouch.timestamp<=500?Math.abs(w-this.lastTitleBarTouch.clientX)<=10&&Math.abs(p-this.lastTitleBarTouch.clientY)<=10&&this.onEvent&&this.onEvent({type:B.Maximize}):this.onDragStart&&this.onDragStart(d),this.lastTitleBarTouch.timestamp=x,this.lastTitleBarTouch.clientX=w,this.lastTitleBarTouch.clientY=p},this.readonly$=e,this.state$=t,this.title$=i,this.onEvent=o,this.onDragStart=l,this.namespace=n,this.buttons=a||[{type:B.Minimize,iconClassName:this.wrapClassName("titlebar-icon-minimize")},{type:B.Maximize,iconClassName:this.wrapClassName("titlebar-icon-maximize"),isActive:d=>d===z.Maximized},{type:B.Close,iconClassName:this.wrapClassName("titlebar-icon-close")}],this.$dragArea=this.renderDragArea()}render(){if(!this.$titleBar){this.$titleBar=document.createElement("div"),this.$titleBar.className=this.wrapClassName("titlebar");const e=document.createElement("div");e.className=this.wrapClassName("title-area"),e.dataset.teleBoxHandle=ee;const t=document.createElement("h1");t.className=this.wrapClassName("title"),t.dataset.teleBoxHandle=ee,e.appendChild(t),e.appendChild(this.$dragArea);const i=document.createElement("div");i.className=this.wrapClassName("titlebar-btns"),this.buttons.forEach(({iconClassName:a},o)=>{const l=String(o),n=document.createElement("button");n.className=`${this.wrapClassName("titlebar-btn")} ${a}`,n.dataset.teleTitleBarBtnIndex=l,n.dataset.teleTitleBarNoDblClick="true",i.appendChild(n)}),this.sideEffect.addDisposer(this.title$.subscribe(a=>{t.textContent=a,t.title=a}),"render-title"),this.sideEffect.addDisposer(this.state$.subscribe(a=>{this.buttons.forEach((o,l)=>{var n;o.isActive&&((n=i.children[l])==null||n.classList.toggle("is-active",o.isActive(a)))})}),"render-state-btns"),this.sideEffect.addEventListener(i,"click",a=>{var n;if(this.readonly$.value)return;const o=a.target,l=Number((n=o.dataset)==null?void 0:n.teleTitleBarBtnIndex);if(!Number.isNaN(l)&&l<this.buttons.length){E(a);const d=this.buttons[l];this.onEvent&&this.onEvent({type:d.type,value:d.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=ee,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)}}function Ae([s,e]){if(e<=0||s.width<=0||s.height<=0)return s;const t=s.width*e;if(t===s.height)return s;if(t<s.height)return{x:0,y:(s.height-t)/2,width:s.width,height:t};const i=s.height/e;return{x:(s.width-i)/2,y:0,width:i,height:s.height}}const Ve=window.ResizeObserver||Ce.ResizeObserver;class fe{constructor({id:e=K.genUID(),title:t=Qe(),namespace:i="telebox",visible:a=!0,width:o=.5,height:l=.5,minWidth:n=0,minHeight:d=0,x=.1,y:w=.1,resizable:p=!0,draggable:k=!0,boxRatio:h=-1,focus:C=!1,zIndex:c=100,stageRatio:I=null,enableShadowDOM:u=!0,titleBar:m,content:M,stage:y,footer:N,styles:v,userStyles:D,bodyStyle:te=null,stageStyle:O=null,darkMode$:H,fence$:Q,minimized$:V,maximized$:G,readonly$:T,root:J,rootRect$:ie,managerStageRect$:Y,managerStageRatio$:se,defaultBoxBodyStyle$:U,defaultBoxStageStyle$:g,collectorRect$:A}){this.events=new ne.default,this._delegateEvents=new ne.default,this.handleTrackStart=b=>{var f;return(f=this._handleTrackStart)==null?void 0:f.call(this,b)},this._sideEffect=new K.SideEffectManager,this.id=e,this.namespace=i,this.enableShadowDOM=u;const S=new r.ValManager;this._sideEffect.addDisposer(()=>S.destroy());const $=new r.Val(t),X=new r.Val(a),_=new r.Val(p),pe=new r.Val(k),he=new r.Val(h),Ie=new r.Val(c),be=new r.Val(C),ae=r.combine([V,G],([b,f])=>b?z.Minimized:f?z.Maximized:z.Normal),oe=new r.Val({width:R(n,0,1),height:R(d,0,1)},{compare:Z.default}),Me=r.combine([oe,Y],([b,f])=>({width:b.width*f.width,height:b.height*f.height}),{compare:Z.default}),q=new r.Val({width:o,height:l},{compare:Z.default});this._sideEffect.addDisposer(oe.reaction((b,f)=>{q.setValue({width:Math.max(o,b.width),height:Math.max(l,b.height)},f)}));const re=new r.Val({x,y:w},{compare:Z.default}),le=r.combine([q,Y],([b,f])=>({width:f.width*b.width,height:f.height*b.height}),{compare:Z.default}),F=r.combine([re,Y],([b,f])=>({x:b.x*f.width,y:b.y*f.height}),{compare:Z.default}),ve=new r.Val(te),ye=new r.Val(O),ze=new r.Val(null),me=new r.Val(Y.value,{compare:Z.default}),ue=new r.Val(I),ke=r.combine([ue,se],([b,f])=>b!=null?b:f),je=r.combine([me,ke],Ae,{compare:Z.default}),Ne={darkMode:H,fence:Q,minimized:V,maximized:G,readonly:T,rootRect:ie,managerStageRect:Y,defaultBoxBodyStyle:U,defaultBoxStageStyle:g,collectorRect:A};r.withReadonlyValueEnhancer(this,Ne);const Le={zIndex:Ie,focus:be,state:ae,minSize:oe,pxMinSize:Me,intrinsicSize:q,intrinsicCoord:re,pxIntrinsicSize:le,pxIntrinsicCoord:F,bodyRect:me,stageRect:je};r.withReadonlyValueEnhancer(this,Le,S);const De={title:$,visible:X,resizable:_,draggable:pe,boxRatio:he,stageRatio:ue,bodyStyle:ve,stageStyle:ye};r.withValueEnhancer(this,De,S),this.titleBar=m||new de({readonly$:T,state$:ae,title$:$,namespace:this.namespace,onDragStart:b=>{var f;return(f=this._handleTrackStart)==null?void 0:f.call(this,b)},onEvent:b=>this._delegateEvents.emit(b.type)}),this._sideEffect.addDisposer(he.subscribe(b=>{b>0&&this.transform(F.value.x,F.value.y,le.value.width,le.value.height)})),this._sideEffect.addDisposer(Q.subscribe(b=>{b&&this.move(F.value.x,F.value.y)})),this.$box=this._render(),ze.setValue(this.$content.parentElement),M&&this.mountContent(M),y&&this.mountStage(y),N&&this.mountFooter(N),v&&this.mountStyles(v),D&&this.mountUserStyles(D),J.appendChild(this.$box);const W=(b,f)=>{this._sideEffect.addDisposer(b.reaction((Se,$e)=>{$e||this.events.emit(f,Se)}))};W(H,L.DarkMode),W(T,L.Readonly),W(Ie,L.ZIndex),W(V,L.Minimized),W(G,L.Maximized),W(ae,L.State),W(q,L.IntrinsicResize),W(re,L.IntrinsicMove),this._sideEffect.addDisposer([X.reaction((b,f)=>{!f&&!b&&this.events.emit(L.Close)}),be.reaction((b,f)=>{f||this.events.emit(b?L.Focus:L.Blur)})])}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 a,o;const l=this.managerStageRect,n=this.pxIntrinsicSize;this.fence?(a=R(e,0,l.width-n.width),o=R(t,0,l.height-n.height)):(a=R(e,-(n.width-120),0+l.width-20),o=R(t,0,0+l.height-20)),this._intrinsicCoord$.setValue({x:a/l.width,y:o/l.height},i)}transform(e,t,i,a,o=!1){const l=this.managerStageRect;if(i=Math.max(i,this.pxMinSize.width),a=Math.max(a,this.pxMinSize.height),this.boxRatio>0){const n=this.boxRatio*i;t!==this.pxIntrinsicCoord.y&&(t-=n-a),a=n}t<0&&(t=0,a=this.pxIntrinsicSize.height),this.move(e,t,o),this._intrinsicSize$.setValue({width:i/l.width,height:a/l.height},o)}mountContent(e){var t;(t=this.$authorContent)==null||t.remove(),this.$authorContent=e,this.$content.appendChild(e)}unmountContent(){this.$authorContent&&(this.$authorContent.remove(),this.$authorContent=void 0)}mountStage(e){var t;(t=this.$authorStage)==null||t.remove(),this.$authorStage=e,this.$stage||(this.$stage=this._renderStage()),this.$stage.appendChild(e),this.$stage.parentElement||this.$body.appendChild(this.$stage)}unmountStage(){var e;this.$authorStage&&(this.$authorStage.remove(),this.$authorStage=void 0),(e=this.$stage)==null||e.remove()}mountFooter(e){var t;(t=this.$authorFooter)==null||t.remove(),this.$authorFooter=e,this.$footer.appendChild(e)}unmountFooter(){this.$authorFooter&&(this.$authorFooter.remove(),this.$authorFooter=void 0)}mountStyles(e){this.$styles.textContent=e}unmountStyles(){this.$styles.textContent=""}mountUserStyles(e){this.$userStyles.textContent=e}unmountUserStyles(){this.$userStyles.textContent=""}_render(){if(this.$box)return this.$box;const e=(h,C)=>this._sideEffect.addDisposer([this._readonly$.subscribe(c=>h.classList.toggle(this.wrapClassName("readonly"),c)),this._draggable$.subscribe(c=>h.classList.toggle(this.wrapClassName("no-drag"),!c)),this._resizable$.subscribe(c=>h.classList.toggle(this.wrapClassName("no-resize"),!c)),this._focus$.subscribe(c=>h.classList.toggle(this.wrapClassName("blur"),!c)),this._darkMode$.subscribe(c=>{h.classList.toggle(this.wrapClassName("color-scheme-dark"),c),h.classList.toggle(this.wrapClassName("color-scheme-light"),!c)})],C);this.$box=document.createElement("div"),this.$box.classList.add(this.wrapClassName("box")),e(this.$box,"bind-box-state"),this._sideEffect.add(()=>{const h=this.wrapClassName("minimized"),C=this.wrapClassName("maximized"),c="box-maximized-timer";return this._state$.subscribe(I=>{this.$box.classList.toggle(h,I===z.Minimized),I===z.Maximized?(this._sideEffect.flush(c),this.$box.classList.toggle(C,!0)):this._sideEffect.setTimeout(()=>{this.$box.classList.toggle(C,!1)},0,c)})}),this._sideEffect.addDisposer(this._visible$.subscribe(h=>{this.$box.style.display=h?"block":"none"})),this._sideEffect.addDisposer(this._zIndex$.subscribe(h=>{this.$box.style.zIndex=String(h)})),this.$box.dataset.teleBoxID=this.id;const t=Te.default(this.$box),i=r.combine([this._maximized$,this._minimized$,this._pxIntrinsicSize$,this._pxIntrinsicCoord$,this._collectorRect$,this._rootRect$,this._managerStageRect$],([h,C,c,I,u,m,M])=>{const y=h?{x:-M.x,y:-M.y,width:m.width,height:m.height,scaleX:1,scaleY:1}:{x:I.x,y:I.y,width:c.width,height:c.height,scaleX:1,scaleY:1};if(C&&u){const{width:N,height:v}=h?this.rootRect:c;y.x=u.x-N/2+u.width/2-M.x,y.y=u.y-v/2+u.height/2-M.y,y.scaleX=u.width/N,y.scaleY=u.height/v}return y},{compare:Z.default}),a=i.value;this.$box.style.width=a.width+"px",this.$box.style.height=a.height+"px",this.$box.style.transform=`translate(${a.x-10}px,${a.y-10}px)`,this._sideEffect.addDisposer(i.subscribe(h=>{t.set(h)}));const o=document.createElement("div");o.className=this.wrapClassName("box-main"),this.$box.appendChild(o);const l=document.createElement("div");l.className=this.wrapClassName("titlebar-wrap"),l.appendChild(this.titleBar.render()),this.$titleBar=l;const n=document.createElement("div");n.className=this.wrapClassName("body-wrap"),this.$body=n;const d=document.createElement("style");this.$styles=d,n.appendChild(d);const x=document.createElement("style");this.$userStyles=x,n.appendChild(x);const w=document.createElement("div");w.className=this.wrapClassName("content")+" tele-fancy-scrollbar",this.$content=w,this._sideEffect.addDisposer(r.combine([this._bodyStyle$,this._defaultBoxBodyStyle$],([h,C])=>h!=null?h:C).subscribe(h=>w.style.cssText=h||"")),n.appendChild(w);const p=document.createElement("div");if(p.className=this.wrapClassName("footer-wrap"),this.$footer=p,o.appendChild(l),this.enableShadowDOM){const h=document.createElement("div");h.className=this.wrapClassName("quarantine-wrap"),o.appendChild(h);const C=document.createElement("div");C.className=this.wrapClassName("quarantine"),e(C,"bind-quarantine-state");const c=document.createElement("style");c.textContent=We,C.appendChild(c),C.appendChild(n),C.appendChild(p),h.attachShadow({mode:"open"}).appendChild(C)}else o.appendChild(n),o.appendChild(p);this._renderResizeHandlers();const k=()=>{const h=n.getBoundingClientRect();this._bodyRect$.setValue({x:0,y:0,width:h.width,height:h.height})};return this._sideEffect.add(()=>{const h=new Ve(()=>{this.minimized||k()});return h.observe(n),()=>h.disconnect()}),this._sideEffect.addDisposer(this._minimized$.reaction(h=>{h||this._sideEffect.setTimeout(k,400,"minimized-content-rect-fix")})),this.$box}_renderStage(){const e=document.createElement("div");e.className=this.wrapClassName("box-stage");const t=i=>{e.style.top=i.y+"px",e.style.left=i.x+"px",e.style.width=i.width+"px",e.style.height=i.height+"px"};return this._sideEffect.addDisposer([r.combine([this._stageStyle$,this._defaultBoxStageStyle$],([i,a])=>i!=null?i:a).subscribe(i=>{e.style.cssText=i||"",t(this._stageRect$.value)}),this._stageRect$.subscribe(t)],"box-stage-styles"),e}_renderResizeHandlers(){const e=document.createElement("div");e.className=this.wrapClassName("resize-handles"),Object.values(P).forEach(c=>{const I=document.createElement("div");I.className=this.wrapClassName(c)+" "+this.wrapClassName("resize-handle"),I.dataset.teleBoxHandle=c,e.appendChild(I)}),this.$box.appendChild(e);const t="handle-tracking-listener",i=this.wrapClassName("transforming");let a,o=0,l=0,n=0,d=0,x=0,w=0,p;const k=c=>{if(this.state!==z.Normal)return;E(c);let{pageX:I,pageY:u}=xe(c);u<0&&(u=0);const m=I-x,M=u-w;let{x:y,y:N}=this.pxIntrinsicCoord,{width:v,height:D}=this.pxIntrinsicSize;switch(p){case P.North:{N=l+M,D=d-M;break}case P.South:{D=d+M;break}case P.West:{y=o+m,v=n-m;break}case P.East:{v=n+m;break}case P.NorthWest:{y=o+m,N=l+M,v=n-m,D=d-M;break}case P.NorthEast:{N=l+M,v=n+m,D=d-M;break}case P.SouthEast:{v=n+m,D=d+M;break}case P.SouthWest:{y=o+m,v=n-m,D=d+M;break}default:{this.move(o+m,l+M);return}}this.transform(y,N,v,D)},h=c=>{p=void 0,a&&(E(c),this.$box.classList.toggle(i,!1),this._sideEffect.flush(t),a.remove())},C=c=>{var u;if(this.readonly||c.button!=null&&c.button!==0||!this.draggable||p||this.state!==z.Normal)return;const I=c.target;if((u=I.dataset)!=null&&u.teleBoxHandle){E(c),{x:o,y:l}=this.pxIntrinsicCoord,{width:n,height:d}=this.pxIntrinsicSize,{pageX:x,pageY:w}=xe(c),p=I.dataset.teleBoxHandle,a||(a=document.createElement("div"));const m=p?this.wrapClassName(`cursor-${p}`):"";a.className=this.wrapClassName(`track-mask${m?` ${m}`:""}`),this.$box.appendChild(a),this.$box.classList.add(i),this._sideEffect.add(()=>(window.addEventListener("mousemove",k),window.addEventListener("touchmove",k,{passive:!1}),window.addEventListener("mouseup",h),window.addEventListener("touchend",h,{passive:!1}),window.addEventListener("touchcancel",h,{passive:!1}),()=>{window.removeEventListener("mousemove",k),window.removeEventListener("touchmove",k),window.removeEventListener("mouseup",h),window.removeEventListener("touchend",h),window.removeEventListener("touchcancel",h)}),t)}};this._handleTrackStart=C,this._sideEffect.addEventListener(e,"mousedown",C,{},"box-resizeHandles-mousedown"),this._sideEffect.addEventListener(e,"touchstart",C,{passive:!1},"box-resizeHandles-touchstart")}async destroy(){this.$box.remove(),this._sideEffect.flushAll(),this._sideEffect.flushAll(),await this.events.emit(L.Destroyed),this.events.clearListeners(),this._delegateEvents.clearListeners()}wrapClassName(e){return`${this.namespace}-${e}`}}var Ge="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxOCAxNiI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwYXRoIHN0cm9rZT0iIzdCODhBMCIgc3Ryb2tlLXdpZHRoPSIxLjQiIGQ9Ik0uNyAxLjJoMTYuNnYxMy42SC43eiIgLz4KICAgICAgICA8cGF0aCBmaWxsPSIjN0I4OEEwIiBkPSJNNCA1LjVoNnYxLjRINHpNNCA5LjVoMTB2MS40SDR6IiAvPgogICAgPC9nPgo8L3N2Zz4K";class we{constructor({minimized$:e,readonly$:t,darkMode$:i,namespace:a="telebox",styles:o={},root$:l}){this._sideEffect=new K.SideEffectManager,this.namespace=a;const n=new r.ValManager;this._sideEffect.addDisposer(()=>n.destroy());const d=new r.Val(void 0),x=r.derive(e),w=new r.Val(o),p=new r.Val(document.createElement("button")),k={styles:w,$collector:p};r.withValueEnhancer(this,k,n);const h={root:l};r.withReadonlyValueEnhancer(this,h);const C={rect:d,visible:x};r.withReadonlyValueEnhancer(this,C,n),p.value.className=this.wrapClassName("collector"),p.value.style.backgroundImage=`url('${Ge}')`,this._sideEffect.addDisposer(p.subscribe(c=>{this._sideEffect.addEventListener(c,"click",()=>{t.value||e.setValue(!1)},{},"telebox-collector-click"),this._sideEffect.addDisposer([x.subscribe(I=>{c.classList.toggle(this.wrapClassName("collector-visible"),I)}),t.subscribe(I=>{c.classList.toggle(this.wrapClassName("collector-readonly"),I)}),i.subscribe(I=>{c.classList.toggle(this.wrapClassName("color-scheme-dark"),I),c.classList.toggle(this.wrapClassName("color-scheme-light"),!I)}),w.subscribe(I=>{Object.keys(I).forEach(u=>{const m=I[u];m!=null&&(c.style[u]=m)})}),l.subscribe(I=>{I&&I.appendChild(c)}),r.combine([e,l]).subscribe(([I,u])=>{if(I&&u){const{x:m,y:M,width:y,height:N}=c.getBoundingClientRect(),v=u.getBoundingClientRect();d.setValue({x:m-v.x,y:M-v.y,width:y,height:N})}})],"telebox-collector-el")}))}destroy(){this._sideEffect.flushAll()}wrapClassName(e){return`${this.namespace}-${e}`}}var j=(s=>(s.Focused="focused",s.Blurred="blurred",s.Created="created",s.Removed="removed",s.State="state",s.Maximized="maximized",s.Minimized="minimized",s.IntrinsicMove="intrinsic_move",s.IntrinsicResize="intrinsic_resize",s.ZIndex="z_index",s.PrefersColorScheme="prefers_color_scheme",s.DarkMode="dark_mode",s))(j||{});class Ye extends de{constructor(e){super(e),this.boxes$=e.boxes$,this.rootRect$=e.rootRect$,this.darkMode$=e.darkMode$,e.root.appendChild(this.render())}focusBox(e){var t;if(!(this.focusedBox&&this.focusedBox===e)){if(this.$titles&&this.state$.value===z.Maximized){const{children:i}=this.$titles.firstElementChild;for(let a=i.length-1;a>=0;a-=1){const o=i[a],l=(t=o.dataset)==null?void 0:t.teleBoxID;l&&(e&&l===e.id?o.classList.toggle(this.wrapClassName("titles-tab-focus"),!0):this.focusedBox&&l===this.focusedBox.id&&o.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(i=>{e.classList.toggle(this.wrapClassName("max-titlebar-maximized"),i===z.Maximized)}),this.readonly$.subscribe(i=>{e.classList.toggle(this.wrapClassName("readonly"),i)}),r.combine([this.state$,this.boxes$]).subscribe(([i,a])=>{i===z.Maximized&&(e.classList.toggle(this.wrapClassName("max-titlebar-single-title"),a.length===1),a.length!==1&&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",i=>{i.currentTarget.scrollBy({left:i.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(i=>{const a=document.createElement("button");return a.className=this.wrapClassName("titles-tab"),a.textContent=i.title,a.dataset.teleBoxID=i.id,a.dataset.teleTitleBarNoDblClick="true",this.focusedBox&&i.id===this.focusedBox.id&&a.classList.add(this.wrapClassName("titles-tab-focus")),e.appendChild(a),i._title$.reaction(o=>a.textContent=o)});return this.sideEffect.addDisposer(()=>t.forEach(i=>i()),"max-render-tab-titles"),this.$titles}}const Oe=window.ResizeObserver||Ce.ResizeObserver;class Re{constructor({root:e=null,prefersColorScheme:t=ge.Light,minimized:i=!1,maximized:a=!1,fence:o=!0,collector:l,namespace:n="telebox",readonly:d=!1,stageRatio:x=-1,containerStyle:w="",stageStyle:p="",defaultBoxBodyStyle:k=null,defaultBoxStageStyle:h=null}={}){this.events=new ne.default,this._sideEffect=new K.SideEffectManager,this.namespace=n;const C=new r.ValManager;this._sideEffect.addDisposer(()=>C.destroy());const c=new r.Val(e),I=new r.Val(d),u=new r.Val(i),m=new r.Val(a),M=new r.Val(o),y=new r.Val(w),N=new r.Val(p),v=new r.Val(x),D=new r.Val(k),te=new r.Val(h),O=new r.Val({x:0,y:0,width:window.innerWidth,height:window.innerHeight},{compare:Z.default});this._sideEffect.addDisposer(c.subscribe(g=>{this._sideEffect.add(()=>{if(!g)return()=>{};const A=new Oe(()=>{const S=g.getBoundingClientRect();O.setValue({x:0,y:0,width:S.width,height:S.height})});return A.observe(g),()=>A.disconnect()},"calc-root-rect")}));const H=r.combine([O,v],Ae,{compare:Z.default});this.boxes$=new r.Val([]),this.topBox$=new r.Val(void 0),this._sideEffect.addDisposer(this.boxes$.subscribe(g=>{if(g.length>0){const A=g.reduce((S,$)=>S.zIndex>$.zIndex?S:$);this.topBox$.setValue(A)}else this.topBox$.setValue(void 0)}));const Q=window.matchMedia("(prefers-color-scheme: dark)"),V=new r.Val(!1);Q&&(V.setValue(Q.matches),this._sideEffect.add(()=>{const g=A=>{V.setValue(A.matches)};return Q.addEventListener("change",g),()=>Q.removeEventListener("change",g)}));const G=new r.Val(t);this._sideEffect.addDisposer(G.reaction((g,A)=>{A||this.events.emit(j.PrefersColorScheme,g)}));const T=r.combine([V,G],([g,A])=>A==="auto"?g:A==="dark"),J=r.combine([u,m],([g,A])=>g?z.Minimized:A?z.Maximized:z.Normal);this.collector=l!=null?l:new we({minimized$:u,readonly$:I,darkMode$:T,namespace:n,root$:c});const ie={darkMode:T,state:J,root:c,rootRect:O,stageRect:H};r.withReadonlyValueEnhancer(this,ie,C);const Y={prefersColorScheme:G,readonly:I,fence:M,minimized:u,maximized:m,stageRatio:v,containerStyle:y,stageStyle:N,defaultBoxBodyStyle:D,defaultBoxStageStyle:te};r.withValueEnhancer(this,Y,C);const se=this.wrapClassName("titlebar-icon-close"),U=g=>{var S;if(I.value)return;const A=g.target;if(!!A.tagName)for(let $=A;$;$=$.parentElement){if($.classList&&$.classList.contains(se))return;const X=(S=$.dataset)==null?void 0:S.teleBoxID;if(X){const _=this.getBox(X);if(_){this.focusBox(_),this.makeBoxTop(_);return}}}};this._sideEffect.addEventListener(window,"mousedown",U,!0),this._sideEffect.addEventListener(window,"touchstart",U,!0),this.$container=document.createElement("div"),this.$container.className=this.wrapClassName("manager-container"),this.$stage=document.createElement("div"),this.$stage.className=this.wrapClassName("manager-stage"),this.$container.appendChild(this.$stage),this._sideEffect.addDisposer([T.subscribe(g=>{this.$container.classList.toggle(this.wrapClassName("color-scheme-dark"),g),this.$container.classList.toggle(this.wrapClassName("color-scheme-light"),!g)}),m.subscribe(g=>{this.$container.classList.toggle("is-maximized",g)}),u.subscribe(g=>{this.$container.classList.toggle("is-minimized",g)}),y.subscribe(g=>{this.$container.style.cssText=g}),N.subscribe(g=>{this.$stage.style.cssText=g,this.$stage.style.width=H.value.width+"px",this.$stage.style.height=H.value.height+"px"}),H.subscribe(g=>{this.$stage.style.width=g.width+"px",this.$stage.style.height=g.height+"px"}),c.subscribe(g=>{g?g.appendChild(this.$container):this.$container.parentElement&&this.$container.remove()})]),this.titleBar=new Ye({namespace:this.namespace,title$:r.derive(this.topBox$,g=>(g==null?void 0:g.title)||""),boxes$:this.boxes$,darkMode$:T,readonly$:I,state$:J,rootRect$:O,root:this.$container,onEvent:g=>{switch(g.type){case B.Maximize:{m.setValue(!m.value);break}case B.Minimize:{u.setValue(!0);break}case L.Close:{this.removeTopBox(),this.focusTopBox();break}}}}),this._sideEffect.addDisposer([J.reaction((g,A)=>{A||this.events.emit(j.State,g)}),m.reaction((g,A)=>{A||this.events.emit(j.Maximized,g)}),u.reaction((g,A)=>{A||this.events.emit(j.Minimized,g)}),T.reaction((g,A)=>{A||this.events.emit(j.DarkMode,g)})])}get boxes(){return this.boxes$.value}get topBox(){return this.topBox$.value}setState(e,t=!1){switch(e){case z.Maximized:{this.setMinimized(!1,t),this.setMaximized(!0,t);break}case z.Minimized:{this.setMinimized(!0,t),this.setMaximized(!1,t);break}default:{this.setMinimized(!1,t),this.setMaximized(!1,t);break}}return this}create(e={},t=!0){const i=new fe({zIndex:this.topBox?this.topBox.zIndex+1:100,...e,...t?this.smartPosition(e):{},namespace:this.namespace,root:this.$stage,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$,defaultBoxBodyStyle$:this._defaultBoxBodyStyle$,defaultBoxStageStyle$:this._defaultBoxStageStyle$});return i.focus&&(this.focusBox(i),t&&this.makeBoxTop(i)),this.boxes$.setValue([...this.boxes,i]),this._sideEffect.addDisposer([i._delegateEvents.on(B.Maximize,()=>{this.setMaximized(!this.maximized)}),i._delegateEvents.on(B.Minimize,()=>{this.setMinimized(!0)}),i._delegateEvents.on(B.Close,()=>{this.remove(i),this.focusTopBox()}),i._intrinsicCoord$.reaction((a,o)=>{o||this.events.emit(j.IntrinsicMove,i)}),i._intrinsicSize$.reaction((a,o)=>{o||this.events.emit(j.IntrinsicResize,i)}),i._zIndex$.reaction((a,o)=>{if(this.boxes.length>0){const l=this.boxes.reduce((n,d)=>n.zIndex>d.zIndex?n:d);this.topBox$.setValue(l)}o||this.events.emit(j.ZIndex,i)})]),this.events.emit(j.Created,i),i}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 a=this.boxes.find(o=>o.id===e);if(a)return this.updateBox(a,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 a=this.boxes.slice(),o=a.splice(i,1);return this.boxes$.setValue(a),o.forEach(l=>l.destroy()),t||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(j.Removed,o)),o[0]}}removeTopBox(){if(this.topBox)return this.remove(this.topBox)}removeAll(e=!1){const t=this.boxes$.value;return this.boxes$.setValue([]),t.forEach(i=>i.destroy()),e||(this.boxes.length<=0&&(this.setMaximized(!1),this.setMinimized(!1)),this.events.emit(j.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(a=>{if(i===a){let o=!1;i.focus||(o=!0,i._focus$.setValue(!0,t)),o&&!t&&this.events.emit(j.Focused,i)}else a.focus&&this.blurBox(a,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(j.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(j.Blurred,t))}),this.titleBar.focusedBox&&this.titleBar.focusBox()}teleBoxMatcher(e){const t=Object.keys(e);return i=>t.every(a=>e[a]===i[a])}updateBox(e,t,i=!1){var a,o,l,n,d,x;(t.x!=null||t.y!=null)&&e._intrinsicCoord$.setValue({x:(a=t.x)!=null?a:e.intrinsicX,y:(o=t.y)!=null?o:e.intrinsicY},i),(t.width!=null||t.height!=null)&&e._intrinsicSize$.setValue({width:(l=t.width)!=null?l:e.intrinsicWidth,height:(n=t.height)!=null?n:e.intrinsicHeight},i),t.title!=null&&e._title$.setValue(t.title),t.visible!=null&&e._visible$.setValue(t.visible,i),t.resizable!=null&&e._resizable$.setValue(t.resizable,i),t.draggable!=null&&e._draggable$.setValue(t.draggable,i),t.boxRatio!=null&&e._boxRatio$.setValue(t.boxRatio,i),t.zIndex!=null&&e._zIndex$.setValue(t.zIndex,i),t.stageRatio!==void 0&&e.setStageRatio(t.stageRatio,i),t.content!=null&&e.mountContent(t.content),t.footer!=null&&e.mountFooter(t.footer),(t.minHeight!=null||t.minWidth!=null)&&e._minSize$.setValue({width:(d=t.minWidth)!=null?d:e.minWidth,height:(x=t.minHeight)!=null?x:e.minHeight},i)}smartPosition(e){let{x:t,y:i}=e;const{width:a=.5,height:o=.5}=e,l=this.stageRect,n=this.topBox;if(t==null){let d=20;if(n){const x=n.pxIntrinsicCoord.x+20,w=a*l.width;x+w<=l.width&&(d=x)}t=d/l.width}if(i==null){let d=20;if(n){const x=n.pxIntrinsicCoord.y+20,w=o*l.height;x+w<=l.height&&(d=x)}i=d/l.height}return{x:t,y:i,width:a,height:o}}makeBoxTop(e,t=!1){this.topBox&&e!==this.topBox&&e._zIndex$.setValue(this.topBox.zIndex+1,t)}getBoxIndex(e){return typeof e=="string"?this.boxes.findIndex(t=>t.id===e):this.boxes.findIndex(t=>t===e)}getBox(e){return typeof e=="string"?this.boxes.find(t=>t.id===e):e}}exports.DefaultTitleBar=de;exports.TELE_BOX_COLOR_SCHEME=ge;exports.TELE_BOX_DELEGATE_EVENT=B;exports.TELE_BOX_EVENT=L;exports.TELE_BOX_MANAGER_EVENT=j;exports.TELE_BOX_RESIZE_HANDLE=P;exports.TELE_BOX_STATE=z;exports.TeleBox=fe;exports.TeleBoxCollector=we;exports.TeleBoxDragHandleType=ee;exports.TeleBoxManager=Re;
|
|
2
3
|
//# sourceMappingURL=telebox-insider.cjs.js.map
|