@node-projects/web-component-designer 0.0.35 → 0.0.36

package/README.md

@@ -75,3 +75,10 @@ Your addition to your index.html should look like this:
     <link rel="stylesheet" href="/node_modules/mobile-drag-drop/default.css">
     <script src="/node_modules/mobile-drag-drop/index.js"></script>
     <script src="/node_modules/@node-projects/web-component-designer/dist/polyfill/mobileDragDrop.js"></script>
+
+## Copyright notice:
+
+The Library uses Images from the Chrome Dev Tools, see
+https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src
+and
+https://github.com/ChromeDevTools/devtools-frontend/blob/main/LICENSE

package/assets/images/chromeDevtools/LICENSE

@@ -0,0 +1,27 @@
+// Copyright 2014 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/assets/images/chromeDevtools/flex-direction-column-icon.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><g clip-path="url(#clip0)"><rect x="2" y="2.816" width="4.607" height="2.738" rx=".5" stroke="#000"/><rect x="1.5" y="6.989" width="5.607" height="3.738" rx="1" fill="#000"/><path d="M9.461 1.5v7.63H8L10.002 12 12 9.13h-1.458V1.5h-1.08z" fill="#000"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h13v13H0z"/></clipPath></defs></svg>

package/assets/images/chromeDevtools/flex-direction-row-icon.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 13"><g clip-path="url(#clip0)"><rect x="2" y="2.816" width="4.607" height="2.738" rx=".5" stroke="#000"/><rect x="1.5" y="6.989" width="5.607" height="3.738" rx="1" fill="#000"/><path d="M9.461 1.5v7.63H8L10.002 12 12 9.13h-1.458V1.5h-1.08z" fill="#000"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h13v13H0z"/></clipPath></defs></svg>

package/assets/images/chromeDevtools/info.txt

@@ -0,0 +1,2 @@
+Images from
+https://github.com/ChromeDevTools/devtools-frontend/tree/main/front_end/Images/src

package/dist/elements/controls/DesignerTabControl.js

@@ -1,10 +1,99 @@
 import { BaseCustomWebComponentLazyAppend, css, TypedEvent, DomHelper } from '@node-projects/base-custom-webcomponent';
 export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
+    _selectedIndex = -1;
+    _contentObserver;
+    _panels;
+    _headerDiv;
+    _moreDiv;
+    _moreContainer;
+    _elementMap = new WeakMap();
+    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; 
+            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; 
+            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._selectedIndex = -1;
-        this._elementMap = new WeakMap();
-        this.onSelectedTabChanged = new TypedEvent();
         this._contentObserver = new MutationObserver(() => {
             this._createItems();
         });
@@ -124,90 +213,6 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
         this.onSelectedTabChanged.emit({ newIndex: this._selectedIndex, oldIndex: oldIndex, changedViaClick: viaClick });
         this._moreContainer.style.visibility = 'hidden';
     }
+    onSelectedTabChanged = new TypedEvent();
 }
-DesignerTabControl.style = css `
-        :host {
-            height: 100%;
-        }
-        .outer {
-            display: flex; 
-            flex-direction: column; 
-            height: 100%;
-            position: relative;
-            overflow: hidden;
-        }
-        .header {
-            display: inline-flex; 
-            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; 
-            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);
-        }
-        `;
 customElements.define('node-projects-designer-tab-control', DesignerTabControl);

package/dist/elements/controls/ImageButtonListSelector.js

@@ -1,9 +1,39 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAppend {
-    constructor() {
-        super(...arguments);
-        this.valueChanged = new TypedEvent();
+    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;
     }
@@ -13,6 +43,9 @@ export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAp
         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;
@@ -30,7 +63,6 @@ export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAp
         }
     }
     ready() {
-        var _a, _b;
         this._parseAttributesToProperties();
         const slot = this._getDomElement('slot');
         slot.onclick = (e) => {
@@ -41,42 +73,9 @@ export class ImageButtonListSelector extends BaseCustomWebComponentConstructorAp
                 }
             }
         };
-        this._getDomElement('property').innerText = (_a = this.property) !== null && _a !== void 0 ? _a : '';
-        this._getDomElement('value').innerText = (_b = this.unsetValue) !== null && _b !== void 0 ? _b : '';
+        this._getDomElement('property').innerText = this.property ?? '';
+        this._getDomElement('value').innerText = this.unsetValue ?? '';
         this._updateValue();
     }
 }
-ImageButtonListSelector.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;
-    }
-  `;
-ImageButtonListSelector.template = html `
-    <div>
-      <div><span id="property"></span>: <span id="value"></span></div>
-      <div class="container"><slot id="slot"></slot></div>
-    </div>
-  `;
 customElements.define('node-projects-image-button-list-selector', ImageButtonListSelector);

package/dist/elements/controls/ThicknessEditor.js

@@ -1,26 +1,6 @@
 import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
 export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
-    constructor() {
-        super(...arguments);
-        this.valueChanged = new TypedEvent();
-    }
-    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 });
-    }
-    _updateValue() {
-    }
-    ready() {
-        this._parseAttributesToProperties();
-        this._updateValue();
-    }
-}
-ThicknessEditor.style = css `
+    static style = css `
   :host {
     margin: 4px;
     margin-left: auto;
@@ -68,7 +48,7 @@ ThicknessEditor.style = css `
     background: lightgray;
   }
   `;
-ThicknessEditor.template = html `
+    static template = html `
     <div id="container">
       <input id="left">
       <input id="top">
@@ -77,4 +57,24 @@ ThicknessEditor.template = html `
       <div id="rect"></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() {
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this._updateValue();
+    }
+}
 customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/documentContainer.js

@@ -2,9 +2,28 @@ import { BaseCustomWebComponentLazyAppend, css } from "@node-projects/base-custo
 import { DesignerTabControl } from "./controls/DesignerTabControl";
 import { DesignerView } from "./widgets/designerView/designerView";
 export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
+    designerView;
+    codeView;
+    demoView;
+    additionalData;
+    _serviceContainer;
+    _content = '';
+    _tabControl;
+    _selectionPosition;
+    static get style() {
+        return css `
+      div {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }                            
+      node-projects-designer-view {
+        height: 100%;
+        /*overflow: auto;*/
+      }`;
+    }
     constructor(serviceContainer, content) {
         super();
-        this._content = '';
         this._serviceContainer = serviceContainer;
         if (content != null)
             this._content = content;
@@ -27,18 +46,6 @@ export class DocumentContainer extends BaseCustomWebComponentLazyAppend {
             this._tabControl.selectedIndex = 0;
         });
     }
-    static get style() {
-        return css `
-      div {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-      }                            
-      node-projects-designer-view {
-        height: 100%;
-        /*overflow: auto;*/
-      }`;
-    }
     dispose() {
         this.codeView.dispose();
     }

package/dist/elements/helper/CssAttributeParser.js

@@ -9,11 +9,11 @@ export class CssEntry {
         this.name = name.trim();
         this.value = value.trim();
     }
+    name;
+    value;
 }
 export class CssAttributeParser {
-    constructor() {
-        this.entries = [];
-    }
+    entries = [];
     parse(text) {
         this.entries = [];
         let name = '';

package/dist/elements/helper/CssCombiner.js

@@ -1,4 +1,5 @@
 export class CssCombiner {
+    static _helperElement = document.createElement('div');
     //todo: inset, 
     static combine(styles, globalStyles) {
         let e = CssCombiner._helperElement;
@@ -285,4 +286,3 @@ export class CssCombiner {
         return true;
     }
 }
-CssCombiner._helperElement = document.createElement('div');

package/dist/elements/helper/IndentedTextWriter.js

@@ -1,9 +1,7 @@
 export class IndentedTextWriter {
-    constructor() {
-        this._textHolder = '';
-        this.indent = 4;
-        this.level = 0;
-    }
+    _textHolder = '';
+    indent = 4;
+    level = 0;
     get position() {
         return this._textHolder.length;
     }

package/dist/elements/helper/Screenshot.js

@@ -1,5 +1,9 @@
 // for screenshots to be genrated properly, you need to select the current tab only in media source selector
 export class Screenshot {
+    static _canvas;
+    static _context;
+    static _video;
+    static _captureStream;
     static _disableStream() {
         Screenshot._captureStream.getTracks().forEach(track => track.stop());
         Screenshot._canvas = null;

package/dist/elements/helper/contextMenu/ContextMenuHelper.js

@@ -1,7 +1,62 @@
 import { css } from "@node-projects/base-custom-webcomponent";
 export class ContextMenuHelper {
-    constructor() {
-    }
+    static _contextMenuCss = css `
+  .context-menu {
+    display: none;
+    position: absolute;
+    z-index: 999999;
+    padding: 0px 0;
+    background-color: rgb(255 255 255 / 93%);
+    border: solid 1px #dfdfdf;
+    box-shadow: 1px 1px 2px #cfcfcf;
+    cursor: default;
+    user-select: none;
+    border-radius: 12px;
+  }
+
+  .context-menu hr {
+    margin: 0 0 5px 5%;
+    height: 1px;
+    width: 90%;
+    background-color: #e2e2e2;
+  }
+  
+  .context-menu--active {
+    display: block;
+  }
+  
+  .context-menu__items {
+    list-style: none;
+    margin: 8px;
+    padding: 0;
+  }
+  
+  .context-menu__item {
+    display: block;
+    margin-bottom: 4px;
+  }
+  
+  .context-menu__item:last-child {
+    margin-bottom: 0;
+  }
+  
+  .context-menu__link {
+    display: block;
+    padding: 0px 12px;
+    color: #0066aa;
+    text-decoration: none;
+  }
+  
+  .context-menu__link:hover {
+    color: #fff;
+    background-color: #0066aa;
+  }`;
+    _shadowRoot;
+    _element;
+    _closeBound;
+    _keyUpBound;
+    _closeOnDownBound;
+    _closeOnUpBound;
     static addContextMenu(element, items) {
         element.oncontextmenu = (event) => {
             event.preventDefault();
@@ -22,6 +77,8 @@ export class ContextMenuHelper {
         ctxMenu.positionMenu(e);
         return ctxMenu;
     }
+    constructor() {
+    }
     init(shadowRoot, element) {
         this._shadowRoot = shadowRoot;
         this._element = element;
@@ -153,54 +210,3 @@ export class ContextMenuHelper {
         }
     }
 }
-ContextMenuHelper._contextMenuCss = css `
-  .context-menu {
-    display: none;
-    position: absolute;
-    z-index: 999999;
-    padding: 0px 0;
-    background-color: rgb(255 255 255 / 93%);
-    border: solid 1px #dfdfdf;
-    box-shadow: 1px 1px 2px #cfcfcf;
-    cursor: default;
-    user-select: none;
-    border-radius: 12px;
-  }
-
-  .context-menu hr {
-    margin: 0 0 5px 5%;
-    height: 1px;
-    width: 90%;
-    background-color: #e2e2e2;
-  }
-  
-  .context-menu--active {
-    display: block;
-  }
-  
-  .context-menu__items {
-    list-style: none;
-    margin: 8px;
-    padding: 0;
-  }
-  
-  .context-menu__item {
-    display: block;
-    margin-bottom: 4px;
-  }
-  
-  .context-menu__item:last-child {
-    margin-bottom: 0;
-  }
-  
-  .context-menu__link {
-    display: block;
-    padding: 0px 12px;
-    color: #0066aa;
-    text-decoration: none;
-  }
-  
-  .context-menu__link:hover {
-    color: #fff;
-    background-color: #0066aa;
-  }`;

package/dist/elements/helper/w3color.js

@@ -1,22 +1,20 @@
 /* w3color.js ver.1.18 by w3schools.com (Do not remove this line)*/
 export class w3color {
-    constructor() {
-        this.red = 0;
-        this.green = 0;
-        this.blue = 0;
-        this.hue = 0;
-        this.sat = 0;
-        this.lightness = 0;
-        this.whiteness = 0;
-        this.blackness = 0;
-        this.cyan = 0;
-        this.magenta = 0;
-        this.yellow = 0;
-        this.black = 0;
-        this.ncol = 'R';
-        this.opacity = 1;
-        this.valid = false;
-    }
+    red = 0;
+    green = 0;
+    blue = 0;
+    hue = 0;
+    sat = 0;
+    lightness = 0;
+    whiteness = 0;
+    blackness = 0;
+    cyan = 0;
+    magenta = 0;
+    yellow = 0;
+    black = 0;
+    ncol = 'R';
+    opacity = 1;
+    valid = false;
     toRgbString() {
         return "rgb(" + this.red + ", " + this.green + ", " + this.blue + ")";
     }