@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/lines/numericInputComponent.js

@@ -1,86 +1,86 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-export class NumericInputComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._localChange = false;
-        this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) };
-    }
-    componentWillUnmount() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = false;
-        }
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (this._localChange) {
-            return true;
-        }
-        if (nextProps.value.toString() !== nextState.value) {
-            nextState.value = nextProps.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3);
-            return true;
-        }
-        return false;
-    }
-    updateValue(valueString) {
-        if (/[^0-9.-]/g.test(valueString)) {
-            return;
-        }
-        const valueAsNumber = parseFloat(valueString);
-        this._localChange = true;
-        this.setState({ value: valueString });
-        if (isNaN(valueAsNumber)) {
-            return;
-        }
-        this.props.onChange(valueAsNumber);
-    }
-    onBlur() {
-        this._localChange = false;
-        const valueAsNumber = parseFloat(this.state.value);
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = false;
-        }
-        if (isNaN(valueAsNumber)) {
-            this.props.onChange(this.props.value);
-            return;
-        }
-        this.props.onChange(valueAsNumber);
-    }
-    incrementValue(amount) {
-        let currentValue = parseFloat(this.state.value);
-        if (isNaN(currentValue)) {
-            currentValue = 0;
-        }
-        this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));
-    }
-    onKeyDown(evt) {
-        const step = this.props.step || 1;
-        const handleArrowKey = (sign) => {
-            if (evt.shiftKey) {
-                sign *= 10;
-                if (evt.ctrlKey || evt.metaKey) {
-                    sign *= 10;
-                }
-            }
-            this.incrementValue(sign * step);
-            evt.preventDefault();
-        };
-        if (evt.key === "ArrowUp") {
-            handleArrowKey(1);
-        }
-        else if (evt.key === "ArrowDown") {
-            handleArrowKey(-1);
-        }
-    }
-    render() {
-        return (_jsxs("div", { className: "numeric", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && (_jsx("div", { className: "numeric-label", title: this.props.label, children: `${this.props.label}: ` })), _jsx("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
-                        if (this.props.lockObject) {
-                            this.props.lockObject.lock = true;
-                        }
-                    }, onBlur: () => this.onBlur() })] }));
-    }
-}
-// eslint-disable-next-line @typescript-eslint/naming-convention
-NumericInputComponent.defaultProps = {
-    step: 1,
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class NumericInputComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) };
+    }
+    componentWillUnmount() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this._localChange) {
+            return true;
+        }
+        if (nextProps.value.toString() !== nextState.value) {
+            nextState.value = nextProps.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3);
+            return true;
+        }
+        return false;
+    }
+    updateValue(valueString) {
+        if (/[^0-9.-]/g.test(valueString)) {
+            return;
+        }
+        const valueAsNumber = parseFloat(valueString);
+        this._localChange = true;
+        this.setState({ value: valueString });
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+        this.props.onChange(valueAsNumber);
+    }
+    onBlur() {
+        this._localChange = false;
+        const valueAsNumber = parseFloat(this.state.value);
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+        if (isNaN(valueAsNumber)) {
+            this.props.onChange(this.props.value);
+            return;
+        }
+        this.props.onChange(valueAsNumber);
+    }
+    incrementValue(amount) {
+        let currentValue = parseFloat(this.state.value);
+        if (isNaN(currentValue)) {
+            currentValue = 0;
+        }
+        this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));
+    }
+    onKeyDown(evt) {
+        const step = this.props.step || 1;
+        const handleArrowKey = (sign) => {
+            if (evt.shiftKey) {
+                sign *= 10;
+                if (evt.ctrlKey || evt.metaKey) {
+                    sign *= 10;
+                }
+            }
+            this.incrementValue(sign * step);
+            evt.preventDefault();
+        };
+        if (evt.key === "ArrowUp") {
+            handleArrowKey(1);
+        }
+        else if (evt.key === "ArrowDown") {
+            handleArrowKey(-1);
+        }
+    }
+    render() {
+        return (_jsxs("div", { className: "numeric", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && (_jsx("div", { className: "numeric-label", title: this.props.label, children: `${this.props.label}: ` })), _jsx("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
+                        if (this.props.lockObject) {
+                            this.props.lockObject.lock = true;
+                        }
+                    }, onBlur: () => this.onBlur() })] }));
+    }
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+NumericInputComponent.defaultProps = {
+    step: 1,
+};
 //# sourceMappingURL=numericInputComponent.js.map

package/lines/optionsLineComponent.d.ts

@@ -1,48 +1,48 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable.js";
-export declare const Null_Value: number;
-export interface IOptionsLineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    options: IInspectableOptions[];
-    addInput?: boolean;
-    noDirectUpdate?: boolean;
-    onSelect?: (value: number | string) => void;
-    extractValue?: (target: any) => number | string;
-    addVal?: (newVal: {
-        label: string;
-        value: number;
-    }, prevVal: number) => void;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    allowNullValue?: boolean;
-    icon?: string;
-    iconLabel?: string;
-    className?: string;
-    valuesAreStrings?: boolean;
-    defaultIfNull?: number;
-    fromFontDropdown?: boolean;
-    valueProp?: number;
-    fallbackValue?: number;
-}
-export declare class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
-    value: number | string;
-    addCustom: boolean;
-}> {
-    private _localChange;
-    private _remapValueIn;
-    private _remapValueOut;
-    private _getValue;
-    constructor(props: IOptionsLineComponentProps);
-    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
-        value: number;
-        addCustom: boolean;
-    }): boolean;
-    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-    setValue(value: string | number): void;
-    updateValue(valueString: string): void;
-    updateCustomValue(): void;
-    render(): JSX.Element;
-}
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { IInspectableOptions } from "@babylonjs/core/Misc/iInspectable.js";
+export declare const Null_Value: number;
+export interface IOptionsLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    options: IInspectableOptions[];
+    addInput?: boolean;
+    noDirectUpdate?: boolean;
+    onSelect?: (value: number | string) => void;
+    extractValue?: (target: any) => number | string;
+    addVal?: (newVal: {
+        label: string;
+        value: number;
+    }, prevVal: number) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    allowNullValue?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    className?: string;
+    valuesAreStrings?: boolean;
+    defaultIfNull?: number;
+    fromFontDropdown?: boolean;
+    valueProp?: number;
+    fallbackValue?: number;
+}
+export declare class OptionsLineComponent extends React.Component<IOptionsLineComponentProps, {
+    value: number | string;
+    addCustom: boolean;
+}> {
+    private _localChange;
+    private _remapValueIn;
+    private _remapValueOut;
+    private _getValue;
+    constructor(props: IOptionsLineComponentProps);
+    shouldComponentUpdate(nextProps: IOptionsLineComponentProps, nextState: {
+        value: number;
+        addCustom: boolean;
+    }): boolean;
+    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+    setValue(value: string | number): void;
+    updateValue(valueString: string): void;
+    updateCustomValue(): void;
+    render(): JSX.Element;
+}

package/lines/optionsLineComponent.js

@@ -1,119 +1,119 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const Null_Value = Number.MAX_SAFE_INTEGER;
-const DEFAULT_FALLBACK_VALUE = -1;
-export class OptionsLineComponent extends React.Component {
-    constructor(props) {
-        // Initialize default props
-        super(props);
-        this._localChange = false;
-        this.state = { value: this._remapValueIn(this._getValue(props)), addCustom: false };
-    }
-    _remapValueIn(value) {
-        return this.props.allowNullValue && value === null ? Null_Value : value;
-    }
-    _remapValueOut(value) {
-        return this.props.allowNullValue && value === Null_Value ? null : value;
-    }
-    _getValue(props) {
-        if (props.extractValue) {
-            return props.extractValue(props.target);
-        }
-        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (this._localChange) {
-            this._localChange = false;
-            return true;
-        }
-        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(nextProps.target) : nextProps.target[nextProps.propertyName]);
-        if (newValue != null && newValue !== nextState.value) {
-            nextState.value = newValue;
-            return true;
-        }
-        if (this.props.options !== nextProps.options) {
-            return true;
-        }
-        return false;
-    }
-    raiseOnPropertyChanged(newValue, previousValue) {
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: newValue,
-            initialValue: previousValue,
-            allowNullValue: this.props.allowNullValue,
-        });
-    }
-    setValue(value) {
-        this.setState({ value: value });
-    }
-    updateValue(valueString) {
-        var _a, _b;
-        let value = this.props.valuesAreStrings ? valueString : parseInt(valueString);
-        if (isNaN(Number(value))) {
-            for (let i = 0; i < this.props.options.length; i++) {
-                if (((_a = this.props.options.at(i)) === null || _a === void 0 ? void 0 : _a.label) === valueString) {
-                    value = Number((_b = this.props.options.at(i)) === null || _b === void 0 ? void 0 : _b.value);
-                }
-            }
-        }
-        if (value === 0 && this.props.fromFontDropdown) {
-            this.setState({ addCustom: true });
-        }
-        this._localChange = true;
-        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
-        if (!this.props.noDirectUpdate) {
-            this.props.target[this.props.propertyName] = this._remapValueOut(value);
-        }
-        //selecting a regular option from font dropdown
-        if (value != 0 && this.props.fromFontDropdown) {
-            this.setState({ value: value });
-            if (this.props.onSelect) {
-                this.props.onSelect(value);
-            }
-            //selecting 'custom font' from font dropdown
-        }
-        else if (this.props.fromFontDropdown) {
-            if (this.props.onSelect) {
-                this.props.onSelect(this.state.value);
-            }
-        }
-        //selecting from a dropdown that's not font dropdown
-        else {
-            this.setState({ value: value });
-            if (this.props.onSelect) {
-                this.props.onSelect(value);
-            }
-        }
-        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
-        this.raiseOnPropertyChanged(newValue, store);
-    }
-    updateCustomValue() {
-        this.setState({ addCustom: false });
-    }
-    render() {
-        var _a;
-        const fallback = this.props.fallbackValue !== undefined ? this.props.fallbackValue : DEFAULT_FALLBACK_VALUE;
-        return (_jsxs("div", { className: `listLine ${(_a = this.props.className) !== null && _a !== void 0 ? _a : ""}`, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "options", children: this.state.addCustom ? (_jsx("input", { type: "text", placeholder: "Enter a custom font here", onKeyDown: (event) => {
-                            event.key === "Enter" && this.props.addVal != undefined
-                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
-                                    this.updateCustomValue(),
-                                    this.forceUpdate())
-                                : null;
-                        }, onBlur: (event) => {
-                            this.props.addVal != undefined
-                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
-                                    this.updateCustomValue(),
-                                    this.forceUpdate())
-                                : null;
-                        } })) : (_jsx("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value === null || this.state.value === undefined ? fallback : this.state.value, children: this.props.options.map((option, i) => {
-                            return (_jsx("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
-                        }) })) })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Null_Value = Number.MAX_SAFE_INTEGER;
+const DEFAULT_FALLBACK_VALUE = -1;
+export class OptionsLineComponent extends React.Component {
+    constructor(props) {
+        // Initialize default props
+        super(props);
+        this._localChange = false;
+        this.state = { value: this._remapValueIn(this._getValue(props)), addCustom: false };
+    }
+    _remapValueIn(value) {
+        return this.props.allowNullValue && value === null ? Null_Value : value;
+    }
+    _remapValueOut(value) {
+        return this.props.allowNullValue && value === Null_Value ? null : value;
+    }
+    _getValue(props) {
+        if (props.extractValue) {
+            return props.extractValue(props.target);
+        }
+        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this._localChange) {
+            this._localChange = false;
+            return true;
+        }
+        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(nextProps.target) : nextProps.target[nextProps.propertyName]);
+        if (newValue != null && newValue !== nextState.value) {
+            nextState.value = newValue;
+            return true;
+        }
+        if (this.props.options !== nextProps.options) {
+            return true;
+        }
+        return false;
+    }
+    raiseOnPropertyChanged(newValue, previousValue) {
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: newValue,
+            initialValue: previousValue,
+            allowNullValue: this.props.allowNullValue,
+        });
+    }
+    setValue(value) {
+        this.setState({ value: value });
+    }
+    updateValue(valueString) {
+        var _a, _b;
+        let value = this.props.valuesAreStrings ? valueString : parseInt(valueString);
+        if (isNaN(Number(value))) {
+            for (let i = 0; i < this.props.options.length; i++) {
+                if (((_a = this.props.options.at(i)) === null || _a === void 0 ? void 0 : _a.label) === valueString) {
+                    value = Number((_b = this.props.options.at(i)) === null || _b === void 0 ? void 0 : _b.value);
+                }
+            }
+        }
+        if (value === 0 && this.props.fromFontDropdown) {
+            this.setState({ addCustom: true });
+        }
+        this._localChange = true;
+        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
+        if (!this.props.noDirectUpdate) {
+            this.props.target[this.props.propertyName] = this._remapValueOut(value);
+        }
+        //selecting a regular option from font dropdown
+        if (value != 0 && this.props.fromFontDropdown) {
+            this.setState({ value: value });
+            if (this.props.onSelect) {
+                this.props.onSelect(value);
+            }
+            //selecting 'custom font' from font dropdown
+        }
+        else if (this.props.fromFontDropdown) {
+            if (this.props.onSelect) {
+                this.props.onSelect(this.state.value);
+            }
+        }
+        //selecting from a dropdown that's not font dropdown
+        else {
+            this.setState({ value: value });
+            if (this.props.onSelect) {
+                this.props.onSelect(value);
+            }
+        }
+        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
+        this.raiseOnPropertyChanged(newValue, store);
+    }
+    updateCustomValue() {
+        this.setState({ addCustom: false });
+    }
+    render() {
+        var _a;
+        const fallback = this.props.fallbackValue !== undefined ? this.props.fallbackValue : DEFAULT_FALLBACK_VALUE;
+        return (_jsxs("div", { className: `listLine ${(_a = this.props.className) !== null && _a !== void 0 ? _a : ""}`, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "options", children: this.state.addCustom ? (_jsx("input", { type: "text", placeholder: "Enter a custom font here", onKeyDown: (event) => {
+                            event.key === "Enter" && this.props.addVal != undefined
+                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
+                                    this.updateCustomValue(),
+                                    this.forceUpdate())
+                                : null;
+                        }, onBlur: (event) => {
+                            this.props.addVal != undefined
+                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
+                                    this.updateCustomValue(),
+                                    this.forceUpdate())
+                                : null;
+                        } })) : (_jsx("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value === null || this.state.value === undefined ? fallback : this.state.value, children: this.props.options.map((option, i) => {
+                            return (_jsx("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
+                        }) })) })] }));
+    }
+}
 //# sourceMappingURL=optionsLineComponent.js.map

package/lines/popup.d.ts

@@ -1,4 +1,4 @@
-export declare class Popup {
-    static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
-    private static _CopyStyles;
-}
+export declare class Popup {
+    static CreatePopup(title: string, windowVariableName: string, width?: number, height?: number): HTMLDivElement | null;
+    private static _CopyStyles;
+}

package/lines/popup.js

@@ -1,68 +1,68 @@
-export class Popup {
-    static CreatePopup(title, windowVariableName, width = 300, height = 800) {
-        const windowCreationOptionsList = {
-            width: width,
-            height: height,
-            top: (window.innerHeight - width) / 2 + window.screenY,
-            left: (window.innerWidth - height) / 2 + window.screenX,
-        };
-        const windowCreationOptions = Object.keys(windowCreationOptionsList)
-            .map((key) => key + "=" + windowCreationOptionsList[key])
-            .join(",");
-        const popupWindow = window.open("", title, windowCreationOptions);
-        if (!popupWindow) {
-            return null;
-        }
-        const parentDocument = popupWindow.document;
-        // Font
-        const newLinkEl = parentDocument.createElement("link");
-        newLinkEl.rel = "stylesheet";
-        newLinkEl.href = "https://use.typekit.net/cta4xsb.css";
-        parentDocument.head.appendChild(newLinkEl);
-        parentDocument.title = title;
-        parentDocument.body.style.width = "100%";
-        parentDocument.body.style.height = "100%";
-        parentDocument.body.style.margin = "0";
-        parentDocument.body.style.padding = "0";
-        const parentControl = parentDocument.createElement("div");
-        parentControl.style.width = "100%";
-        parentControl.style.height = "100%";
-        parentControl.style.margin = "0";
-        parentControl.style.padding = "0";
-        popupWindow.document.body.appendChild(parentControl);
-        this._CopyStyles(window.document, parentDocument);
-        setTimeout(() => {
-            // need this for late bindings
-            this._CopyStyles(window.document, parentDocument);
-        }, 0);
-        this[windowVariableName] = popupWindow;
-        return parentControl;
-    }
-    static _CopyStyles(sourceDoc, targetDoc) {
-        for (let index = 0; index < sourceDoc.styleSheets.length; index++) {
-            const styleSheet = sourceDoc.styleSheets[index];
-            try {
-                if (styleSheet.cssRules) {
-                    // for <style> elements
-                    const newStyleEl = sourceDoc.createElement("style");
-                    for (const cssRule of styleSheet.cssRules) {
-                        // write the text of each rule into the body of the style element
-                        newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
-                    }
-                    targetDoc.head.appendChild(newStyleEl);
-                }
-                else if (styleSheet.href) {
-                    // for <link> elements loading CSS from a URL
-                    const newLinkEl = sourceDoc.createElement("link");
-                    newLinkEl.rel = "stylesheet";
-                    newLinkEl.href = styleSheet.href;
-                    targetDoc.head.appendChild(newLinkEl);
-                }
-            }
-            catch (e) {
-                console.log(e);
-            }
-        }
-    }
-}
+export class Popup {
+    static CreatePopup(title, windowVariableName, width = 300, height = 800) {
+        const windowCreationOptionsList = {
+            width: width,
+            height: height,
+            top: (window.innerHeight - width) / 2 + window.screenY,
+            left: (window.innerWidth - height) / 2 + window.screenX,
+        };
+        const windowCreationOptions = Object.keys(windowCreationOptionsList)
+            .map((key) => key + "=" + windowCreationOptionsList[key])
+            .join(",");
+        const popupWindow = window.open("", title, windowCreationOptions);
+        if (!popupWindow) {
+            return null;
+        }
+        const parentDocument = popupWindow.document;
+        // Font
+        const newLinkEl = parentDocument.createElement("link");
+        newLinkEl.rel = "stylesheet";
+        newLinkEl.href = "https://use.typekit.net/cta4xsb.css";
+        parentDocument.head.appendChild(newLinkEl);
+        parentDocument.title = title;
+        parentDocument.body.style.width = "100%";
+        parentDocument.body.style.height = "100%";
+        parentDocument.body.style.margin = "0";
+        parentDocument.body.style.padding = "0";
+        const parentControl = parentDocument.createElement("div");
+        parentControl.style.width = "100%";
+        parentControl.style.height = "100%";
+        parentControl.style.margin = "0";
+        parentControl.style.padding = "0";
+        popupWindow.document.body.appendChild(parentControl);
+        this._CopyStyles(window.document, parentDocument);
+        setTimeout(() => {
+            // need this for late bindings
+            this._CopyStyles(window.document, parentDocument);
+        }, 0);
+        this[windowVariableName] = popupWindow;
+        return parentControl;
+    }
+    static _CopyStyles(sourceDoc, targetDoc) {
+        for (let index = 0; index < sourceDoc.styleSheets.length; index++) {
+            const styleSheet = sourceDoc.styleSheets[index];
+            try {
+                if (styleSheet.cssRules) {
+                    // for <style> elements
+                    const newStyleEl = sourceDoc.createElement("style");
+                    for (const cssRule of styleSheet.cssRules) {
+                        // write the text of each rule into the body of the style element
+                        newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
+                    }
+                    targetDoc.head.appendChild(newStyleEl);
+                }
+                else if (styleSheet.href) {
+                    // for <link> elements loading CSS from a URL
+                    const newLinkEl = sourceDoc.createElement("link");
+                    newLinkEl.rel = "stylesheet";
+                    newLinkEl.href = styleSheet.href;
+                    targetDoc.head.appendChild(newLinkEl);
+                }
+            }
+            catch (e) {
+                console.log(e);
+            }
+        }
+    }
+}
 //# sourceMappingURL=popup.js.map