@node-projects/web-component-designer 0.0.96 → 0.0.99

package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolbarPopupToolSelect.js

@@ -1,10 +1,12 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { DesignerToolRenderer } from "./designerToolRenderer";
-export class DesignerToolbarPopupToolSelect extends BaseCustomWebComponentConstructorAppend {
+import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
+export class DesignerToolbarPopupToolSelect extends BaseCustomWebComponentConstructorAppend {
     static style = css `
       .popup-tool-select {
           display: flex;
           flex-wrap: wrap;
+          gap: 3px;
+          margin: 0 3px;
+          justify-content: center;
       }
 
       .tool {
@@ -16,29 +18,25 @@ export class DesignerToolbarPopupToolSelect extends BaseCustomWebComponentConstr
           background-position: center center;
           flex-shrink: 0;
           border-bottom: 1px solid black;
-    }`;
+    }`;
     static template = html `
-        <div id="popup-tool-select" class="popup-tool-select"></div>`;
-    _popupToolSelected;
-    //TODO: remove this element. it only contains a div, and binds events. 
-    //  this could also be done by the user of this
-    constructor() {
-        super();
-        this._popupToolSelected = this._getDomElement("popup-tool-select");
-    }
-    toolActivated = new TypedEvent();
-    async insertToolContent(template) {
-        this._popupToolSelected.appendChild(template.content.cloneNode(true));
-        await this._waitForChildrenReady();
-        this._setupEventHandler();
-    }
-    _setupEventHandler() {
-        for (let tool of [...this._popupToolSelected.querySelectorAll("div.tool")]) {
-            tool.addEventListener("click", () => this._toolSelected(tool));
-        }
-    }
-    _toolSelected(tool) {
-        this.toolActivated.emit(DesignerToolRenderer.createObjectFromTool(tool));
-    }
-}
-customElements.define('node-projects-designer-tools-popup-select', DesignerToolbarPopupToolSelect);
+        <div id="popup-tool-select" class="popup-tool-select"></div>`;
+    _popupToolSelected;
+    //TODO: remove this element. it only contains a div, and binds events. 
+    //  this could also be done by the user of this
+    constructor() {
+        super();
+        this._popupToolSelected = this._getDomElement("popup-tool-select");
+    }
+    async insertToolContent(template) {
+        this._popupToolSelected.appendChild(template.content.cloneNode(true));
+        await this._waitForChildrenReady();
+        this._setupEventHandler();
+    }
+    _setupEventHandler() {
+        for (let tool of [...this._popupToolSelected.querySelectorAll("div.tool")]) {
+            tool.addEventListener("click", () => this._toolSelected(tool));
+        }
+    }
+}
+customElements.define('node-projects-designer-tools-popup-select', DesignerToolbarPopupToolSelect);

package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolsButtons.d.ts

@@ -1,36 +1,36 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { NamedTools } from "../NamedTools.js";
-export interface ToolTypeAsArg {
-    command_parameter: string;
-    open_popup?: boolean;
-    popup_category?: string;
-}
-export interface ToolPopupCategoryCollection {
-    category: string;
-    command: string;
-    command_parameter: string;
-    title: string;
-    tool: NamedTools;
-    background_url: string;
-    margin?: string;
-}
-export interface Seperator {
-    tool: 'seperator';
-}
-export declare class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    readonly toolActivated: TypedEvent<[ToolPopupCategoryCollection, boolean]>;
-    private _toolButtons;
-    private _toolCollection;
-    private _toolbarhost;
-    ready(): void;
-    setToolsExternal(tools: ChildNode[]): void;
-    private _initToolCategories;
-    private _createToolEventListeners;
-    private _toolSelected;
-    markToolAsSelected(id: string): void;
-    private _unselectTools;
-    externalToolChange(command_name: string): void;
-    get toolCollection(): ToolPopupCategoryCollection[];
-}
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { NamedTools } from "../NamedTools.js";
+export interface ToolTypeAsArg {
+    command_parameter: string;
+    open_popup?: boolean;
+    popup_category?: string;
+}
+export interface ToolPopupCategoryCollection {
+    category: string;
+    command: string;
+    command_parameter: string;
+    title: string;
+    tool: NamedTools;
+    background_url: string;
+    margin?: string;
+}
+export interface Seperator {
+    tool: 'seperator';
+}
+export declare class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    readonly toolActivated: TypedEvent<[ToolPopupCategoryCollection, boolean]>;
+    private _toolButtons;
+    private _toolCollection;
+    private _toolbarhost;
+    ready(): void;
+    setToolsExternal(tools: ChildNode[]): void;
+    private _initToolCategories;
+    private _createToolEventListeners;
+    private _toolSelected;
+    markToolAsSelected(id: string): void;
+    private _unselectTools;
+    externalToolChange(command_name: string): void;
+    get toolCollection(): ToolPopupCategoryCollection[];
+}

package/dist/elements/widgets/designerView/tools/designerToolbarGenerics/designerToolsButtons.js

@@ -1,8 +1,8 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { assetsPath } from "../../../../../Constants.js";
-import { NamedTools } from "../NamedTools.js";
-import { DesignerToolRenderer } from "./designerToolRenderer.js";
-export class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppend {
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../Constants.js";
+import { NamedTools } from "../NamedTools.js";
+import { DesignerToolRenderer } from "./designerToolRenderer.js";
+export class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppend {
     static style = css `
     .toolbar-host{
         width: calc(100% - 2px);
@@ -32,65 +32,56 @@ export class DesignerToolsButtons extends BaseCustomWebComponentConstructorAppen
     .tool:hover {
         cursor: pointer;
     }
-`;
+`;
     static template = html `
-        <div id="toolbar-host" class="toolbar-host"></div>`;
-    toolActivated = new TypedEvent();
-    _toolButtons;
-    _toolCollection;
-    _toolbarhost;
-    ready() {
-        this._initToolCategories();
-        this._toolbarhost = this._getDomElement("toolbar-host");
-    }
-    setToolsExternal(tools) {
-        for (let tool of tools) {
-            this._toolbarhost.appendChild(tool);
-        }
-        this._createToolEventListeners();
-    }
-    _initToolCategories() {
-        let toolCollection = [];
-        toolCollection.push({ tool: NamedTools.Pointer, category: "pointer", command: "setTool", command_parameter: NamedTools.Pointer, title: "Pointer Tool", background_url: "url(" + assetsPath + "images/layout/PointerTool.svg)", margin: '0 0 5px 0' });
-        toolCollection.push({ tool: NamedTools.MagicWandSelector, category: "selector", command: "setTool", command_parameter: NamedTools.MagicWandSelector, title: "Magic Wand Selector", background_url: "url(" + assetsPath + "images/layout/MagicWandTool.svg)" });
-        toolCollection.push({ tool: NamedTools.RectangleSelector, category: "selector", command: "setTool", command_parameter: NamedTools.RectangleSelector, title: "Rectangle Selector", background_url: "url(" + assetsPath + "images/layout/SelectRectTool.svg)" });
-        toolCollection.push({ tool: NamedTools.Zoom, category: "zoom", command: "setTool", command_parameter: NamedTools.Zoom, title: "Zoom Tool", background_url: "url(" + assetsPath + "images/layout/ZoomTool.svg)" });
-        toolCollection.push({ tool: NamedTools.PickColor, category: "pick", command: "setTool", command_parameter: NamedTools.PickColor, title: "Color Picker", background_url: "url(" + assetsPath + "images/layout/ColorPickerTool.svg)", margin: '0 0 5px 0' });
-        toolCollection.push({ tool: NamedTools.DrawLine, category: "draw", command: "setTool", command_parameter: NamedTools.DrawLine, title: "Draw Line", background_url: "url(" + assetsPath + "images/layout/DrawLineTool.svg)" });
-        toolCollection.push({ tool: NamedTools.DrawPath, category: "draw", command: "setTool", command_parameter: NamedTools.DrawPath, title: "Draw Path", background_url: "url(" + assetsPath + "images/layout/DrawPathTool.svg)" });
-        toolCollection.push({ tool: NamedTools.DrawRect, category: "draw", command: "setTool", command_parameter: NamedTools.DrawRect, title: "Draw Rectangle", background_url: "url(" + assetsPath + "images/layout/DrawRectTool.svg)" });
-        toolCollection.push({ tool: NamedTools.DrawEllipsis, category: "draw", command: "setTool", command_parameter: NamedTools.DrawEllipsis, title: "Draw Ellipsis", background_url: "url(" + assetsPath + "images/layout/DrawEllipTool.svg)" });
-        toolCollection.push({ tool: NamedTools.Text, category: "text", command: "setTool", command_parameter: NamedTools.Text, title: "Text Tool", background_url: "url(" + assetsPath + "images/layout/TextTool.svg)" });
-        toolCollection.push({ tool: NamedTools.TextBoc, category: "text", command: "setTool", command_parameter: NamedTools.TextBoc, title: "Textbox Tool", background_url: "url(" + assetsPath + "images/layout/TextBoxTool.svg)" });
-        this._toolCollection = toolCollection;
-    }
-    _createToolEventListeners() {
-        this._toolButtons = [...this._toolbarhost.querySelectorAll('div.tool')];
-        for (let tool of this._toolButtons) {
-            tool.addEventListener("click", () => this._toolSelected(tool, false));
-        }
-    }
-    _toolSelected(tool, external) {
-        this.toolActivated.emit([DesignerToolRenderer.createObjectFromTool(tool), external]);
-    }
-    markToolAsSelected(id) {
-        this._unselectTools();
-        let selectedElement = this._toolButtons.find(t => t.getAttribute("data-command-parameter") == id);
-        selectedElement?.setAttribute("selected", "");
-    }
-    _unselectTools() {
-        for (let tool of this._toolButtons) {
-            tool.removeAttribute("selected");
-        }
-    }
-    externalToolChange(command_name) {
-        let tool = this._toolButtons.find(x => x.getAttribute("data-command-parameter") == command_name);
-        if (tool != null) {
-            this._toolSelected(tool, true);
-        }
-    }
-    get toolCollection() {
-        return this._toolCollection;
-    }
-}
-customElements.define('node-projects-designer-tools-buttons', DesignerToolsButtons);
+        <div id="toolbar-host" class="toolbar-host"></div>`;
+    toolActivated = new TypedEvent();
+    _toolButtons;
+    _toolCollection;
+    _toolbarhost;
+    ready() {
+        this._initToolCategories();
+        this._toolbarhost = this._getDomElement("toolbar-host");
+    }
+    setToolsExternal(tools) {
+        for (let tool of tools) {
+            this._toolbarhost.appendChild(tool);
+        }
+        this._createToolEventListeners();
+    }
+    _initToolCategories() {
+        let toolCollection = [];
+        toolCollection.push({ tool: NamedTools.PickColor, category: "pick", command: "setTool", command_parameter: NamedTools.PickColor, title: "Color Picker", background_url: "url(" + assetsPath + "images/layout/ColorPickerTool.svg)", margin: '0 0 5px 0' });
+        toolCollection.push({ tool: NamedTools.TextBoc, category: "text", command: "setTool", command_parameter: NamedTools.TextBoc, title: "Textbox Tool", background_url: "url(" + assetsPath + "images/layout/TextBoxTool.svg)" });
+        this._toolCollection = toolCollection;
+    }
+    _createToolEventListeners() {
+        this._toolButtons = [...this._toolbarhost.querySelectorAll('div.tool')];
+        for (let tool of this._toolButtons) {
+            tool.addEventListener("click", () => this._toolSelected(tool, false));
+        }
+    }
+    _toolSelected(tool, external) {
+        this.toolActivated.emit([DesignerToolRenderer.createObjectFromTool(tool), external]);
+    }
+    markToolAsSelected(id) {
+        this._unselectTools();
+        let selectedElement = this._toolButtons.find(t => t.getAttribute("data-command-parameter") == id);
+        selectedElement?.setAttribute("selected", "");
+    }
+    _unselectTools() {
+        for (let tool of this._toolButtons) {
+            tool.removeAttribute("selected");
+        }
+    }
+    externalToolChange(command_name) {
+        let tool = this._toolButtons.find(x => x.getAttribute("data-command-parameter") == command_name);
+        if (tool != null) {
+            this._toolSelected(tool, true);
+        }
+    }
+    get toolCollection() {
+        return this._toolCollection;
+    }
+}
+customElements.define('node-projects-designer-tools-buttons', DesignerToolsButtons);

package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup copy.d.ts

@@ -0,0 +1,8 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { ToolPopupCategoryCollection } from "../designerToolbarGenerics/designerToolsButtons";
+export declare class DrawToolPopup extends DesignerToolbarPopup {
+    private readonly templateToolSelect;
+    readonly toolActivated: TypedEvent<ToolPopupCategoryCollection>;
+    ready(): void;
+}

package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup copy.js

@@ -0,0 +1,25 @@
+import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../Constants";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
+export class DrawToolPopup extends DesignerToolbarPopup {
+    templateToolSelect = html `
+        <div class="tool" data-command="setTool" popup="draw" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
+    `;
+    toolActivated = new TypedEvent();
+    ready() {
+        this._setTitle(this.getAttribute("title"));
+        let toolSelect = new DesignerToolbarPopupToolSelect();
+        toolSelect.insertToolContent(this.templateToolSelect);
+        toolSelect.toolActivated.on((toolArg) => {
+            this.toolActivated.emit(toolArg);
+        });
+        let content = [];
+        content.push(toolSelect);
+        this._setContent(content);
+    }
+}
+customElements.define('node-projects-designer-popup-drawtool', DrawToolPopup);

package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup.d.ts

@@ -1,8 +1,5 @@
-import { TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
-import { ToolPopupCategoryCollection } from "../designerToolbarGenerics/designerToolsButtons";
-export declare class DrawToolPopup extends DesignerToolbarPopup {
-    private readonly templateToolSelect;
-    readonly toolActivated: TypedEvent<ToolPopupCategoryCollection>;
-    ready(): void;
-}
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+export declare class DrawToolPopup extends DesignerToolbarPopup {
+    private readonly templateToolSelect;
+    ready(): void;
+}

package/dist/elements/widgets/designerView/tools/designerToolbarPopups/DrawToolPopup.js

@@ -1,25 +1,21 @@
-import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
-import { assetsPath } from "../../../../../Constants";
-import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
-import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
-export class DrawToolPopup extends DesignerToolbarPopup {
-    templateToolSelect = html `
-        <div class="tool" data-command="setTool" popup="draw" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
-        <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
-        <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
-        <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
-    `;
-    toolActivated = new TypedEvent();
-    ready() {
-        this._setTitle(this.getAttribute("title"));
-        let toolSelect = new DesignerToolbarPopupToolSelect();
-        toolSelect.insertToolContent(this.templateToolSelect);
-        toolSelect.toolActivated.on((toolArg) => {
-            this.toolActivated.emit(toolArg);
-        });
-        let content = [];
-        content.push(toolSelect);
-        this._setContent(content);
-    }
-}
-customElements.define('node-projects-designer-popup-drawtool', DrawToolPopup);
+import { html } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../Constants";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
+export class DrawToolPopup extends DesignerToolbarPopup {
+    templateToolSelect = html `
+        <div class="tool" data-command="setTool" popup="draw" data-command-parameter="DrawLine" title="Draw Line" style="background-image: url('${assetsPath}images/layout/DrawLineTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawPath" title="Pointer Tool" style="background-image: url('${assetsPath}images/layout/DrawPathTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawRect" title="Draw Rectangle" style="background-image: url('${assetsPath}images/layout/DrawRectTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="DrawEllipsis" title="Draw Ellipsis" style="background-image: url('${assetsPath}images/layout/DrawEllipTool.svg');"></div>
+    `;
+    ready() {
+        this._setTitle(this.getAttribute("title"));
+        let toolSelect = new DesignerToolbarPopupToolSelect();
+        toolSelect.insertToolContent(this.templateToolSelect);
+        let content = [];
+        content.push(toolSelect);
+        this._setContent(content);
+    }
+}
+customElements.define('node-projects-designer-popup-drawtool', DrawToolPopup);

package/dist/elements/widgets/designerView/tools/designerToolbarPopups/SelectorToolsPopup.d.ts

@@ -0,0 +1,8 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { ToolPopupCategoryCollection } from "../designerToolbarGenerics/designerToolsButtons";
+export declare class SelectorToolsPopup extends DesignerToolbarPopup {
+    private readonly templateToolSelect;
+    readonly toolActivated: TypedEvent<ToolPopupCategoryCollection>;
+    ready(): void;
+}

package/dist/elements/widgets/designerView/tools/designerToolbarPopups/SelectorToolsPopup.js

@@ -0,0 +1,23 @@
+import { html, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { assetsPath } from "../../../../../Constants";
+import { DesignerToolbarPopup } from "../designerToolbarGenerics/designerToolbarPopup";
+import { DesignerToolbarPopupToolSelect } from "../designerToolbarGenerics/designerToolbarPopupToolSelect";
+export class SelectorToolsPopup extends DesignerToolbarPopup {
+    templateToolSelect = html `
+        <div class="tool" data-command="setTool" popup="selector" data-command-parameter="RectangleSelector" title="Rectangle Selector" style="background-image: url('${assetsPath}images/layout/SelectRectTool.svg');"></div>
+        <div class="tool" data-command="setTool" data-command-parameter="MagicWandSelector" title="Magic Wand Selector" style="background-image: url('${assetsPath}images/layout/MagicWandTool.svg');"></div>
+    `;
+    toolActivated = new TypedEvent();
+    ready() {
+        this._setTitle(this.getAttribute("title"));
+        let toolSelect = new DesignerToolbarPopupToolSelect();
+        toolSelect.insertToolContent(this.templateToolSelect);
+        toolSelect.toolActivated.on((toolArg) => {
+            this.toolActivated.emit(toolArg);
+        });
+        let content = [];
+        content.push(toolSelect);
+        this._setContent(content);
+    }
+}
+customElements.define('node-projects-designer-popup-selector', SelectorToolsPopup);

package/dist/elements/widgets/designerView/tools/designerToolsDock.d.ts

@@ -1,23 +1,24 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
-import { ServiceContainer } from "../../../services/ServiceContainer.js";
-import { DesignerView } from "../designerView.js";
-import "./designerToolbarGenerics/designerToolsButtons.js";
-import "./designerToolbarPopups/DrawToolPopup.js";
-export declare class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _designerView;
-    private _toolButtonsElem;
-    private _toolPopupElems;
-    private _serviceContainer;
-    private _prevSelected;
-    ready(): Promise<void>;
-    initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
-    private _registerPopups;
-    private _toolButtonActivated;
-    private _activatePopup;
-    private _popupToolSelected;
-    private _isPopupScenario;
-    private _resetPreviousElements;
-    private _hideAllPopups;
-}
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { ServiceContainer } from "../../../services/ServiceContainer.js";
+import { DesignerView } from "../designerView.js";
+import "./designerToolbarGenerics/designerToolsButtons.js";
+import "./designerToolbarPopups/DrawToolPopup.js";
+import "./designerToolbarPopups/SelectorToolsPopup.js";
+export declare class DesignerToolsDock extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    private _designerView;
+    private _toolButtonsElem;
+    private _toolPopupElems;
+    private _serviceContainer;
+    private _prevSelected;
+    ready(): Promise<void>;
+    initialize(serviceContainer: ServiceContainer, designerView: DesignerView): void;
+    private _registerPopups;
+    private _toolButtonActivated;
+    private _activatePopup;
+    private _popupToolSelected;
+    private _isPopupScenario;
+    private _resetPreviousElements;
+    private _hideAllPopups;
+}