@node-projects/web-component-designer 0.0.34 → 0.0.38

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,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="none"
+   viewBox="0 0 13 13"
+   version="1.1"
+   id="svg15"
+   sodipodi:docname="flex-direction-row-icon.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
+  <metadata
+     id="metadata19">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="987"
+     id="namedview17"
+     showgrid="false"
+     inkscape:zoom="63.076923"
+     inkscape:cx="6.5"
+     inkscape:cy="6.5"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg15" />
+  <g
+     clip-path="url(#clip0)"
+     id="g8"
+     transform="matrix(0,1,1,0,0,0)">
+    <rect
+       x="2"
+       y="2.816"
+       width="4.6069999"
+       height="2.7379999"
+       rx="0.5"
+       stroke="#000000"
+       id="rect2" />
+    <rect
+       x="1.5"
+       y="6.9889998"
+       width="5.6069999"
+       height="3.7379999"
+       rx="1"
+       fill="#000000"
+       id="rect4" />
+    <path
+       d="M 9.461,1.5 V 9.13 H 8 L 10.002,12 12,9.13 H 10.542 V 1.5 h -1.08 z"
+       fill="#000000"
+       id="path6" />
+  </g>
+  <defs
+     id="defs13">
+    <clipPath
+       id="clip0">
+      <path
+         fill="#fff"
+         d="M0 0h13v13H0z"
+         id="path10" />
+    </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();
         });
@@ -48,7 +137,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             let htmlItem = item;
             const tabHeaderDiv = this._elementMap.get(htmlItem);
             this._moreContainer.appendChild(tabHeaderDiv);
-            if (w < this._headerDiv.clientWidth) {
+            if (this._headerDiv.children.length == 0 || (w + (tabHeaderDiv.clientWidth / 2)) < this._headerDiv.clientWidth) {
                 this._headerDiv.appendChild(tabHeaderDiv);
                 w += tabHeaderDiv.clientWidth;
             }
@@ -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.d.ts

@@ -6,10 +6,26 @@ export declare type ThicknessEditorValueChangedEventArgs = {
 export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
-    private _value;
-    get value(): string;
-    set value(value: string);
-    valueChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _leftInput;
+    private _topInput;
+    private _rightInput;
+    private _bottomInput;
+    private _valueLeft;
+    get valueLeft(): string;
+    set valueLeft(value: string);
+    valueLeftChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueTop;
+    get valueTop(): string;
+    set valueTop(value: string);
+    valueTopChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueRight;
+    get valueRight(): string;
+    set valueRight(value: string);
+    valueRightChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    private _valueBottom;
+    get valueBottom(): string;
+    set valueBottom(value: string);
+    valueBottomChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
     property: string;
     unsetValue: string;
     _updateValue(): void;

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,89 @@ ThicknessEditor.template = html `
       <div id="rect"></div>
     </div>
   `;
+    _leftInput;
+    _topInput;
+    _rightInput;
+    _bottomInput;
+    _valueLeft;
+    get valueLeft() {
+        return this._valueLeft;
+    }
+    set valueLeft(value) {
+        const oldValue = this._valueLeft;
+        this._valueLeft = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueLeftChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueLeftChanged = new TypedEvent();
+    _valueTop;
+    get valueTop() {
+        return this._valueTop;
+    }
+    set valueTop(value) {
+        const oldValue = this._valueTop;
+        this._valueTop = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueTopChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueTopChanged = new TypedEvent();
+    _valueRight;
+    get valueRight() {
+        return this._valueRight;
+    }
+    set valueRight(value) {
+        const oldValue = this._valueRight;
+        this._valueRight = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueRightChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueRightChanged = new TypedEvent();
+    _valueBottom;
+    get valueBottom() {
+        return this._valueBottom;
+    }
+    set valueBottom(value) {
+        const oldValue = this._valueBottom;
+        this._valueBottom = value;
+        if (oldValue !== value) {
+            this._updateValue();
+            this.valueBottomChanged.emit({ newValue: value, oldValue: oldValue });
+        }
+    }
+    valueBottomChanged = new TypedEvent();
+    property;
+    unsetValue;
+    _updateValue() {
+        this._leftInput.value = this.valueLeft;
+        this._topInput.value = this.valueTop;
+        this._rightInput.value = this.valueRight;
+        this._bottomInput.value = this._valueBottom;
+    }
+    ready() {
+        this._parseAttributesToProperties();
+        this._updateValue();
+        this._leftInput = this._getDomElement('left');
+        this._topInput = this._getDomElement('top');
+        this._rightInput = this._getDomElement('right');
+        this._bottomInput = this._getDomElement('bottom');
+        this._leftInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueLeft = this._leftInput.value; };
+        this._topInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueTop = this._topInput.value; };
+        this._rightInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueRight = this._rightInput.value; };
+        this._bottomInput.onkeyup = (e) => { if (e.key === 'Enter')
+            this._valueBottom = this._bottomInput.value; };
+        this._leftInput.onblur = (e) => this._valueLeft = this._leftInput.value;
+        this._topInput.onblur = (e) => this._valueTop = this._topInput.value;
+        this._rightInput.onblur = (e) => this._valueRight = this._rightInput.value;
+        this._bottomInput.onblur = (e) => this._valueBottom = this._bottomInput.value;
+    }
+}
 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;
     }