@node-projects/web-component-designer 0.0.291 → 0.1.0

package/README.md

@@ -1,13 +1,12 @@
 # web-component-designer
 
-```It#s now considered beta. It works, we use it in production, but there are many more features to come```
+```It's now considered beta. It works, we use it in production, but there are many more features to come```
 
 A HTML web component for designing web components and HTML pages based on PolymerLabs wizzywid which can easily be integrated in your own software.
 Meanwhile polymer is not used anymore.
 
 ![image](https://user-images.githubusercontent.com/364896/117482820-358e2d80-af65-11eb-97fd-9d15ebf1966f.png)
 
-There is also a Preview VS-Code Addon using the Designer: https://github.com/node-projects/vs-code-designer-addon
 
 ## NPM Package
 
@@ -20,34 +19,6 @@ https://www.npmjs.com/package/@node-projects/web-component-designer
   - At the moment Chrome, and Firefox Nightly with Experimental Import Assertions enabled.
   But when import Assertions are landing in Safari and Firefox they will work again.
   And you could transpile them away in the meantime.
-  
-## Projects using it
-
-A ZPL Designer included in a comercial Application:
-![image](https://github.com/node-projects/web-component-designer/assets/364896/e1f1e3cc-29a3-4749-a676-389577fab69a)
-
-A Materialflow Layout Editor in a comercial Application:
-![image](https://github.com/node-projects/web-component-designer/assets/364896/0062562a-4224-4b11-aaa4-03e31494fcfa)
-
-## Demo
-
-look at: https://node-projects.github.io/web-component-designer-demo/index.html
-repository: https://github.com/node-projects/web-component-designer-demo
-
-or a simple one: https://node-projects.github.io/web-component-designer-simple-demo/index.html
-repository: https://github.com/node-projects/web-component-designer-simple-demo
-
-## What is needed
-
-- @node-projects/base-custom-webcomponent a very small basic webcomponent library (maybe this will be included directly later, to be dependecy free)
-- optional - ace code editor
-- optional - monaco code editor (if you use code-view-monaco)
-- optional - code mirror code editor (if you use code-view-codemirror) (workin but buggy)
-- optional - fancytree (if you use tree-view-extended, palette-tree-view or bindable-objects-browser)
-
-## Features we are workin on
-
-https://github.com/node-projects/web-component-designer/issues
 
 ## Developing
 

package/package.json

@@ -1,14 +1,13 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.291",
+  "version": "0.1.0",
   "type": "module",
   "main": "./dist/index.js",
-  "author": "",
+  "author": "jochen.kuehner@gmx.de",
   "license": "MIT",
   "scripts": {
     "tsc": "tsc",
-    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "build": "tsc",
     "prepublishOnly": "npm run build"
   },
@@ -16,28 +15,7 @@
     "@node-projects/base-custom-webcomponent": "^0.17.2"
   },
   "devDependencies": {
-    "@adobe/css-tools": "4.3.1",
-    "@node-projects/lean-he-esm": "^3.3.0",
-    "@node-projects/node-html-parser-esm": "^6.1.5",
-    "@papyrs/stylo": "^0.0.45",
-    "@types/codemirror": "^5.60.10",
-    "@types/css-tree": "^2.3.2",
-    "@types/jquery": "^3.5.18",
-    "@types/jquery.fancytree": "0.0.7",
-    "@types/node": "^20.5.9",
-    "ace-builds": "^1.24.1",
-    "codemirror": "^5.0.0",
-    "css-tree": "^2.3.1",
-    "esprima-next": "^5.8.4",
-    "html2canvas": "*",
-    "jest": "^29.6.4",
-    "jquery": "^3.7.1",
-    "jquery.fancytree": "^2.38.3",
-    "mdn-data": "^2.1.0",
-    "monaco-editor": "^0.41.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.2.2",
-    "typescript-lit-html-plugin": "^0.9.0"
+    "mdn-data": "^2.1.0"
   },
   "repository": {
     "type": "git",

package/.editorconfig

@@ -1,7 +0,0 @@
-root = true
-
-[*]
-end_of_line = crlf
-insert_final_newline = false
-indent_style = space
-indent_size = 2

package/.github/FUNDING.yml

@@ -1,4 +0,0 @@
-# These are supported funding model platforms
-
-github: jogibear9988
-patreon: jogibear9988

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "typescript.tsdk": "node_modules/typescript/lib"
-}

package/ACKNOWLEDGMENTS

@@ -1,15 +0,0 @@
-# Acknowledgments
-
-- Thanks to @notwaldorf who created the original `wizzywid` project (MIT License).
-  https://github.com/PolymerLabs/wizzywid
-  This was a start for this whole project (even if mostly nothing of the original code is left)
-- Thanks to @chdh for plain-scrollbar component
-  https://github.com/chdh/plain-scrollbar
-- Thanks to @m-thalmann for contextmenujs
-  https://github.com/m-thalmann/contextmenujs (also we have heavily modified it)
-- Levi Cole for parts of the cssUnits conversion code
-  https://stackoverflow.com/a/66569574/579623
-- Domi for text-width code
-  https://stackoverflow.com/a/21015393
-- gwwar for getColsestStackingContext
-  https://github.com/gwwar/z-context

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 node-projects 
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/RemoveOldRemoteBranches.bat

@@ -1,7 +0,0 @@
-@echo off
-echo.
-echo Removes Remote Branches not existing on Server any more
-echo.
-pause
-git remote prune origin
-pause

package/dist/Constants.d.ts

@@ -1,4 +0,0 @@
-export declare const dragDropFormatNameElementDefinition = "text/json/elementdefintion";
-export declare const dragDropFormatNameBindingObject = "text/json/bindingobject";
-export declare const dragDropFormatNamePropertyGrid = "text/json/propertydrop";
-export declare var assetsPath: string;

package/dist/Constants.js

@@ -1,6 +0,0 @@
-export const dragDropFormatNameElementDefinition = 'text/json/elementdefintion';
-export const dragDropFormatNameBindingObject = 'text/json/bindingobject';
-export const dragDropFormatNamePropertyGrid = 'text/json/propertydrop';
-//export const assetsPath = './node_modules/@node-projects/web-component-designer/assets/';
-let imporUrl = new URL((import.meta.url));
-export var assetsPath = imporUrl.origin + imporUrl.pathname.split('/').slice(0, -1).join('/') + '/../assets/';

package/dist/commandHandling/CommandType.d.ts

@@ -1,34 +0,0 @@
-export declare enum CommandType {
-    'copy' = "copy",
-    'paste' = "paste",
-    'cut' = "cut",
-    'delete' = "delete",
-    'undo' = "undo",
-    'redo' = "redo",
-    'holdUndo' = "holdUndo",
-    'holdRedo' = "holdRedo",
-    'rotateCounterClockwise' = "rotateCounterClockwise",
-    'rotateClockwise' = "rotateClockwise",
-    'mirrorHorizontal' = "mirrorHorizontal",
-    'mirrorVertical' = "mirrorVertical",
-    'selectAll' = "selectAll",
-    'moveToFront' = "moveToFront",
-    'moveForward' = "moveForward",
-    'moveBackward' = "moveBackward",
-    'moveToBack' = "moveToBack",
-    'arrangeLeft' = "arrangeLeft",
-    'arrangeCenter' = "arrangeCenter",
-    'arrangeRight' = "arrangeRight",
-    'arrangeTop' = "arrangeTop",
-    'arrangeMiddle' = "arrangeMiddle",
-    'arrangeBottom' = "arrangeBottom",
-    'unifyWidth' = "unifyWidth",
-    'unifyHeight' = "unifyHeight",
-    'distributeHorizontal' = "distributeHorizontaly",
-    'distributeVertical' = "distributeVertical",
-    'setTool' = "setTool",
-    'setStrokeColor' = "setStrokeColor",
-    'setFillBrush' = "setFillBrush",
-    'setStrokeThickness' = "setStrokeThickness",
-    'screenshot' = "screenshot"
-}

package/dist/commandHandling/CommandType.js

@@ -1,35 +0,0 @@
-export var CommandType;
-(function (CommandType) {
-    CommandType["copy"] = "copy";
-    CommandType["paste"] = "paste";
-    CommandType["cut"] = "cut";
-    CommandType["delete"] = "delete";
-    CommandType["undo"] = "undo";
-    CommandType["redo"] = "redo";
-    CommandType["holdUndo"] = "holdUndo";
-    CommandType["holdRedo"] = "holdRedo";
-    CommandType["rotateCounterClockwise"] = "rotateCounterClockwise";
-    CommandType["rotateClockwise"] = "rotateClockwise";
-    CommandType["mirrorHorizontal"] = "mirrorHorizontal";
-    CommandType["mirrorVertical"] = "mirrorVertical";
-    CommandType["selectAll"] = "selectAll";
-    CommandType["moveToFront"] = "moveToFront";
-    CommandType["moveForward"] = "moveForward";
-    CommandType["moveBackward"] = "moveBackward";
-    CommandType["moveToBack"] = "moveToBack";
-    CommandType["arrangeLeft"] = "arrangeLeft";
-    CommandType["arrangeCenter"] = "arrangeCenter";
-    CommandType["arrangeRight"] = "arrangeRight";
-    CommandType["arrangeTop"] = "arrangeTop";
-    CommandType["arrangeMiddle"] = "arrangeMiddle";
-    CommandType["arrangeBottom"] = "arrangeBottom";
-    CommandType["unifyWidth"] = "unifyWidth";
-    CommandType["unifyHeight"] = "unifyHeight";
-    CommandType["distributeHorizontal"] = "distributeHorizontaly";
-    CommandType["distributeVertical"] = "distributeVertical";
-    CommandType["setTool"] = "setTool";
-    CommandType["setStrokeColor"] = "setStrokeColor";
-    CommandType["setFillBrush"] = "setFillBrush";
-    CommandType["setStrokeThickness"] = "setStrokeThickness";
-    CommandType["screenshot"] = "screenshot";
-})(CommandType || (CommandType = {}));

package/dist/commandHandling/IUiCommand.d.ts

@@ -1,10 +0,0 @@
-import { CommandType } from './CommandType.js';
-export interface IUiCommand {
-    type: CommandType;
-    event?: Event;
-    special?: string;
-    parameter?: any;
-    altKey?: boolean;
-    ctrlKey?: boolean;
-    shiftKey?: boolean;
-}

package/dist/commandHandling/IUiCommand.js

@@ -1 +0,0 @@
-export {};

package/dist/commandHandling/IUiCommandHandler.d.ts

@@ -1,5 +0,0 @@
-import { IUiCommand } from './IUiCommand.js';
-export interface IUiCommandHandler {
-    executeCommand: (command: IUiCommand) => void;
-    canExecuteCommand: (command: IUiCommand) => boolean;
-}

package/dist/commandHandling/IUiCommandHandler.js

@@ -1 +0,0 @@
-export {};

package/dist/elements/controls/DesignerTabControl.d.ts

@@ -1,24 +0,0 @@
-import { BaseCustomWebComponentLazyAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export type DesignerTabControlIndexChangedEventArgs = {
-    newIndex: number;
-    oldIndex?: number;
-    changedViaClick?: boolean;
-};
-export declare class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
-    private _selectedIndex;
-    private _panels;
-    private _headerDiv;
-    private _moreDiv;
-    private _moreContainer;
-    private _elementMap;
-    private _firstConnect;
-    static readonly style: CSSStyleSheet;
-    constructor();
-    private _showHideHeaderItems;
-    connectedCallback(): void;
-    get selectedIndex(): number;
-    set selectedIndex(value: number);
-    refreshItems(): void;
-    private _selectedIndexChanged;
-    readonly onSelectedTabChanged: TypedEvent<DesignerTabControlIndexChangedEventArgs>;
-}

package/dist/elements/controls/DesignerTabControl.js

@@ -1,237 +0,0 @@
-import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
-export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
-    _selectedIndex = -1;
-    //private _contentObserver: MutationObserver;
-    _panels;
-    _headerDiv;
-    _moreDiv;
-    _moreContainer;
-    _elementMap = new WeakMap();
-    _firstConnect = true;
-    static style = css `
-        :host {
-            height: 100%;
-        }
-        .outer {
-            display: flex; 
-            flex-direction: column; 
-            height: 100%;
-            position: relative;
-            overflow: hidden;
-        }
-        .header {
-            display: inline-flex; 
-            user-select: none;
-            -webkit-user-select: none; 
-            flex-direction: row; 
-            cursor: pointer; 
-            height: 30px;
-            width: calc(100% - 30px);
-            background-color: var(--dark-grey, #232733);
-            overflow-x: auto;
-            scrollbar-width: none;  /* Firefox */
-        }
-        .header-more {
-            right: 0;
-            top: 0;
-            width: 30px;
-            position: absolute;
-            color: white;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-family: cursive;
-        }
-        .header-more:hover {
-            background: var(--light-grey, #383f52);
-        }
-        .more-container {
-            z-index: 1;
-            user-select: none;
-            -webkit-user-select: none;
-            background-color: var(--dark-grey, #232733);
-            right: 0;
-            top: 30px;
-            position: absolute;
-            color: white;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            cursor: pointer;
-        }
-        .more-container .tab-header { 
-            width: 100%;
-        }
-        .header::-webkit-scrollbar { 
-            display: none;  /* Safari and Chrome */
-        }
-        .tab-header {
-            height: 30px;
-            font-family: Arial;
-            display: flex;
-            justify-content: center;
-            align-items: center;                
-            text-transform: uppercase;                
-            box-sizing: content-box;                
-            padding-left: 5px;
-            padding-right: 5px;
-            color: white;
-            font-size: 12px;
-            font-weight: 500;
-            line-height: 1.5;
-            letter-spacing: 1px;
-            white-space: nowrap;
-        }
-        .tab-header:hover {
-            background: var(--light-grey, #383f52);
-        }
-        .selected {
-            background: var(--medium-grey, #2f3545);
-            box-shadow: inset 0 3px 0 var(--highlight-pink, #e91e63);
-        }
-        .panels {
-            z-index: 0;
-            background: var(--medium-grey, #2f3545);
-            height: calc(100% - 30px);
-        }
-        `;
-    constructor() {
-        super();
-        /*this._contentObserver = new MutationObserver((mut) => {
-          let refresh = false;
-          for (let m of mut) {
-            if (m.type != 'attributes' || m.attributeName == 'style')
-              refresh = true;
-          }
-          if (refresh)
-            this.refreshItems();
-        });*/
-        let outerDiv = document.createElement("div");
-        outerDiv.className = 'outer';
-        this.shadowRoot.appendChild(outerDiv);
-        this._headerDiv = document.createElement("div");
-        this._headerDiv.className = 'header';
-        outerDiv.appendChild(this._headerDiv);
-        this._moreDiv = document.createElement("div");
-        this._moreDiv.className = "header header-more";
-        this._moreDiv.innerText = "<<";
-        outerDiv.appendChild(this._moreDiv);
-        this._moreContainer = document.createElement("div");
-        this._moreContainer.className = "more-container";
-        this._moreContainer.style.visibility = "hidden";
-        outerDiv.appendChild(this._moreContainer);
-        this._moreDiv.onclick = () => {
-            if (this._moreContainer.children.length && this._moreContainer.style.visibility == "hidden")
-                this._moreContainer.style.visibility = 'visible';
-            else
-                this._moreContainer.style.visibility = "hidden";
-        };
-        this._panels = document.createElement("div");
-        this._panels.className = 'panels';
-        outerDiv.appendChild(this._panels);
-        let _slot = document.createElement("slot");
-        _slot.name = 'panels';
-        this._panels.appendChild(_slot);
-        const resizeObserver = new ResizeObserver(entries => {
-            this._showHideHeaderItems();
-        });
-        resizeObserver.observe(this._headerDiv);
-    }
-    _showHideHeaderItems() {
-        this._moreContainer.style.visibility = "hidden";
-        let w = 0;
-        DomHelper.removeAllChildnodes(this._moreContainer);
-        DomHelper.removeAllChildnodes(this._headerDiv);
-        let reloadOnce = true;
-        for (let item of this.children) {
-            if (item.style.display != 'none') {
-                let htmlItem = item;
-                if (!this._elementMap.has(htmlItem) && reloadOnce) {
-                    this.refreshItems();
-                    reloadOnce = false;
-                }
-                const tabHeaderDiv = this._elementMap.get(htmlItem);
-                this._moreContainer.appendChild(tabHeaderDiv);
-                if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
-                    this._headerDiv.appendChild(tabHeaderDiv);
-                    w += tabHeaderDiv.clientWidth;
-                }
-            }
-        }
-    }
-    connectedCallback() {
-        if (this._firstConnect) {
-            this.refreshItems();
-            this._firstConnect = false;
-            //this._contentObserver.observe(this, { childList: true, subtree: true, attributes: true });
-            let selectedIndexAttribute = this.getAttribute("selected-index");
-            if (selectedIndexAttribute) {
-                this.selectedIndex = parseInt(selectedIndexAttribute);
-            }
-        }
-    }
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    set selectedIndex(value) {
-        let old = this._selectedIndex;
-        this._selectedIndex = value;
-        if (this.children.length && old != this._selectedIndex)
-            this._selectedIndexChanged(old);
-    }
-    refreshItems() {
-        this._headerDiv.innerHTML = "";
-        let i = 0;
-        for (let item of this.children) {
-            if (item.style.display != 'none') {
-                let htmlItem = item;
-                let tabHeaderDiv = document.createElement("div");
-                tabHeaderDiv.innerText = htmlItem.title;
-                tabHeaderDiv.title = htmlItem.title;
-                tabHeaderDiv.className = 'tab-header';
-                let j = i;
-                tabHeaderDiv.onpointerdown = () => {
-                    let old = this._selectedIndex;
-                    this._selectedIndex = j;
-                    if (this._headerDiv.children.length)
-                        this._selectedIndexChanged(old, true);
-                    this._moreContainer.style.visibility = 'hidden';
-                };
-                this._elementMap.set(htmlItem, tabHeaderDiv);
-                this._headerDiv.appendChild(tabHeaderDiv);
-                i++;
-            }
-        }
-        this._showHideHeaderItems();
-        this._selectedIndexChanged();
-    }
-    _selectedIndexChanged(oldIndex, viaClick = false) {
-        let index = -1;
-        for (let element of this.children) {
-            if (element.style.display != 'none') {
-                index++;
-                if (index == this._selectedIndex) {
-                    if (element.slot != "panels")
-                        element.slot = "panels";
-                    const headerEl = this._elementMap.get(element);
-                    if (headerEl) {
-                        headerEl.classList.add('selected');
-                        if (element.activated)
-                            element.activated();
-                    }
-                }
-                else {
-                    element.removeAttribute("slot");
-                    const headerEl = this._elementMap.get(element);
-                    if (headerEl) {
-                        headerEl.classList.remove('selected');
-                    }
-                }
-            }
-        }
-        this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
-        this._moreContainer.style.visibility = 'hidden';
-    }
-    onSelectedTabChanged = new TypedEvent();
-}
-customElements.define('node-projects-designer-tab-control', DesignerTabControl);

package/dist/elements/controls/ImageButtonListSelector.d.ts

@@ -1,17 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export type ImageButtonListSelectorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ImageButtonListSelectorValueChangedEventArgs>;
-    property: string;
-    unsetValue: string;
-    _updateValue(): void;
-    ready(): void;
-}

package/dist/elements/controls/ImageButtonListSelector.js

@@ -1,81 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-    div {
-      font-size: 10px;
-      color: white;
-    }
-    #property {
-      color: #00aff0;
-    }
-    #value {
-      color: lightgray;
-    }
-    #value.value-set {
-      color: wheat;
-    }
-    .container {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-    }
-    ::slotted(button) {
-      min-width: 24px;
-      height: 24px;
-      padding: 1px;
-      background: white;
-      border: 1px solid lightgray;
-    }
-  `;
-    static template = html `
-    <div>
-      <div><span id="property"></span>: <span id="value"></span></div>
-      <div class="container"><slot id="slot"></slot></div>
-    </div>
-  `;
-    _value;
-    get value() {
-        return this._value;
-    }
-    set value(value) {
-        const oldValue = this._value;
-        this._value = value;
-        this._updateValue();
-        this.valueChanged.emit({ newValue: this._value, oldValue: oldValue });
-    }
-    valueChanged = new TypedEvent();
-    property;
-    unsetValue;
-    _updateValue() {
-        if (this.value) {
-            this._getDomElement('value').innerText = this.value;
-            this._getDomElement('value').classList.add('value-set');
-        }
-        else {
-            this._getDomElement('value').classList.remove('value-set');
-        }
-        const slot = this._getDomElement('slot');
-        for (let e of slot.assignedElements()) {
-            if (e.dataset.value == this.value)
-                e.style.background = "cornflowerblue";
-            else
-                e.style.background = "";
-        }
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        const slot = this._getDomElement('slot');
-        slot.onclick = (e) => {
-            const path = e.composedPath();
-            for (let e of slot.assignedElements()) {
-                if (path.indexOf(e) >= 0) {
-                    this.value = e.dataset.value;
-                }
-            }
-        };
-        this._getDomElement('property').innerText = this.property ?? '';
-        this._getDomElement('value').innerText = this.unsetValue ?? '';
-        this._updateValue();
-    }
-}
-customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);

package/dist/elements/controls/MetricsEditor.d.ts

@@ -1,18 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
-export type ThicknessEditorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class MetricsEditor extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    property: string;
-    unsetValue: string;
-    private _borderDiv;
-    private _elementDiv;
-    constructor();
-    ready(): void;
-    onDoubleClick(event: PointerEvent): void;
-    onKeyDown(event: KeyboardEvent): void;
-    refresh(element: Element): void;
-}