@node-projects/web-component-designer 0.0.50 → 0.0.51

package/dist/elements/item/IDesignItem.d.ts

@@ -35,8 +35,8 @@ export interface IDesignItem {
     appliedDesignerExtensions: Map<ExtensionType, IDesignerExtension[]>;
     getOrCreateDesignItem(node: Node): any;
     openGroup(title: string, affectedItems?: IDesignItem[]): ChangeGroup;
-    setStyle(name: keyof CSSStyleDeclaration, value?: string | null): any;
-    removeStyle(name: keyof CSSStyleDeclaration): any;
+    setStyle(name: string, value?: string | null): any;
+    removeStyle(name: string): any;
     setAttribute(name: string, value?: string | null): any;
     removeAttribute(name: string): any;
     hideAtDesignTime: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",

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

@@ -1,17 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare 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 copy.js

@@ -1,82 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ImageButtonListSelector 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() {
-        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() {
-        var _a, _b;
-        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 = (_a = this.property) !== null && _a !== void 0 ? _a : '';
-        this._getDomElement('value').innerText = (_b = this.unsetValue) !== null && _b !== void 0 ? _b : '';
-        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/NumericInput.js

@@ -1 +0,0 @@
-"use strict";

package/dist/elements/controls/ThicknessEditor copy.d.ts

@@ -1,33 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export declare type ThicknessEditorValueChangedEventArgs = {
-    newValue?: string;
-    oldValue?: string;
-};
-export declare class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
-    static readonly style: CSSStyleSheet;
-    static readonly template: HTMLTemplateElement;
-    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;
-    ready(): void;
-}

package/dist/elements/controls/ThicknessEditor copy.js

@@ -1,145 +0,0 @@
-import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
-export class ThicknessEditor extends BaseCustomWebComponentConstructorAppend {
-    static style = css `
-  :host {
-    margin: 4px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  #container {
-    display: grid;
-    grid-template-columns: minmax(30px, 40px) minmax(30px, 60px) minmax(30px, 40px);
-    grid-template-rows: auto;
-    grid-template-areas: 
-          "  .   top     ."
-          "left middle right"
-          "  .  bottom   .";
-    column-gap: 2px;
-    row-gap: 2px;
-  }
-  input {
-    width: 20px;
-    text-align: center;
-    font-size: 10px;
-    height: 20px;
-    padding: 0;
-  }
-  #left {
-    grid-area: left;
-    justify-self: end;
-  }
-  #top {
-    grid-area: top;
-    align-self: end;
-    justify-self: center;
-  }
-  #right {
-    grid-area: right;
-    justify-self: start;
-  }
-  #bottom {
-    grid-area: bottom;
-    align-self: start;
-    justify-self: center;
-  }
-  #rect {
-    grid-area: middle;
-    border: 1px solid black;
-    background: lightgray;
-  }
-  `;
-    static template = html `
-    <div id="container">
-      <input id="left">
-      <input id="top">
-      <input id="right">
-      <input id="bottom">
-      <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._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;
-        this._updateValue();
-    }
-}
-customElements.define('node-projects-thickness-editor', ThicknessEditor);

package/dist/elements/helper/CssPropertiesList.js

@@ -1 +0,0 @@
-"use strict";

package/dist/elements/item/Binding.d.ts

@@ -1,14 +0,0 @@
-import { BindingMode } from "./BindingMode";
-import { BindingTarget } from "./BindingTarget";
-export interface IBinding {
-    bindableObjectNames?: string[];
-    expression?: string;
-    mode?: BindingMode;
-    target?: BindingTarget;
-    invert?: boolean;
-    converter?: string;
-    changedEvent?: string;
-    nullSafe?: boolean;
-    rawName?: string;
-    rawValue?: string;
-}

package/dist/elements/item/Binding.js

@@ -1,4 +0,0 @@
-export class Binding {
-}
-export class ExtendedBinding extends Binding {
-}

package/dist/elements/item/IBinding copy.d.ts

@@ -1,14 +0,0 @@
-import { BindingMode } from "./BindingMode";
-import { BindingTarget } from "./BindingTarget";
-export interface IBinding {
-    bindableObjectNames?: string[];
-    expression?: string;
-    mode?: BindingMode;
-    target?: BindingTarget;
-    invert?: boolean;
-    converter?: string;
-    changedEvent?: string;
-    nullSafe?: boolean;
-    rawName?: string;
-    rawValue?: string;
-}

package/dist/elements/item/IBinding copy.js

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

package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService copy.d.ts

@@ -1,9 +0,0 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "./IBinding";
-import { IBindingService } from "./IBindingService";
-export declare class PolymerBindingsService implements IBindingService {
-    writeBindingMode: 'direct';
-    parseBindings(designItem: IDesignItem): void;
-    writeBinding(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, type: 'style' | 'attribute', keyValuePair: [key: string, value: IBinding]): boolean;
-}

package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService copy.js

@@ -1,31 +0,0 @@
-import { DomConverter } from "../../widgets/designerView/DomConverter";
-import { BindingMode } from './BindingMode';
-export class PolymerBindingsService {
-    constructor() {
-        this.writeBindingMode = 'direct';
-    }
-    parseBindings(designItem) {
-        for (let a of designItem.attributes.entries()) {
-            if (typeof a[1] == 'string' && (a[1].startsWith("[[") || a[1].startsWith("{{"))) {
-                let bnd = {};
-                if (a[1].startsWith("[["))
-                    bnd.mode = BindingMode.oneWay;
-                else
-                    bnd.mode = BindingMode.twoWay;
-                bnd.invert = a[1][3] == '!';
-                bnd.expression = a[1];
-                let nm = a[0];
-                if (nm.endsWith('$')) {
-                    bnd.escapeAttribute = true;
-                    nm = nm.slice(0, -1);
-                    designItem.attributes.delete(a[0]);
-                }
-                designItem.attributes.set(nm, bnd);
-            }
-        }
-    }
-    writeBinding(indentedTextWriter, designItem, type, keyValuePair) {
-        indentedTextWriter.write(keyValuePair[0] + '="' + (keyValuePair[1].mode == BindingMode.oneWay ? '[[' : '{{') + DomConverter.normalizeAttributeValue(keyValuePair[1].expression) + (keyValuePair[1].mode == BindingMode.oneWay ? ']]' : ']]') + '"');
-        return true;
-    }
-}

package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService.d.ts

@@ -1,11 +0,0 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "../../item/IBinding";
-import { IBindingService } from "./IBindingService";
-export declare class BaseCustomeWebcomponentBindingsService implements IBindingService {
-    writeBindingMode: 'direct';
-    parseBindingAttribute(attributeName: string, value: string): IBinding;
-    parseBindingCss(attributeName: string, value: string): IBinding;
-    serializeBinding(): void;
-    writeBinding(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, type: 'style' | 'attribute', keyValuePair: [key: string, value: IBinding]): boolean;
-}

package/dist/elements/services/bindingsService/BaseCustomeWebcomponentBindingsService.js

@@ -1,34 +0,0 @@
-import { DomConverter } from "../../widgets/designerView/DomConverter";
-import { BindingMode } from '../../item/BindingMode';
-import { BindingTarget } from './BindingTarget';
-export class BaseCustomeWebcomponentBindingsService {
-    constructor() {
-        this.writeBindingMode = 'direct';
-    }
-    parseBindingAttribute(attributeName, value) {
-        if (value.startsWith("[[") || value.startsWith("{{")) {
-            let bnd = {};
-            bnd.rawName = attributeName;
-            bnd.rawValue = value;
-            bnd.target = BindingTarget.property;
-            if (value.startsWith("[["))
-                bnd.mode = BindingMode.oneWay;
-            else
-                bnd.mode = BindingMode.twoWay;
-            bnd.invert = value[3] == '!';
-            bnd.nullSafe = value[3] == '?';
-            bnd.expression = value;
-            return bnd;
-        }
-        return null;
-    }
-    parseBindingCss(attributeName, value) {
-        return null;
-    }
-    serializeBinding() {
-    }
-    writeBinding(indentedTextWriter, designItem, type, keyValuePair) {
-        indentedTextWriter.write(keyValuePair[0] + '="' + (keyValuePair[1].mode == BindingMode.oneWay ? '[[' : '{{') + DomConverter.normalizeAttributeValue(keyValuePair[1].expression) + (keyValuePair[1].mode == BindingMode.oneWay ? ']]' : ']]') + '"');
-        return true;
-    }
-}

package/dist/elements/services/bindingsService/BindingMode.d.ts

@@ -1,4 +0,0 @@
-export declare enum BindingMode {
-    oneWay = "oneWay",
-    twoWay = "twoWay"
-}

package/dist/elements/services/bindingsService/BindingMode.js

@@ -1,5 +0,0 @@
-export var BindingMode;
-(function (BindingMode) {
-    BindingMode["oneWay"] = "oneWay";
-    BindingMode["twoWay"] = "twoWay";
-})(BindingMode || (BindingMode = {}));

package/dist/elements/services/bindingsService/BindingTarget.d.ts

@@ -1,6 +0,0 @@
-export declare enum BindingTarget {
-    property = "property",
-    attribute = "attribute",
-    style = "style",
-    event = "event"
-}

package/dist/elements/services/bindingsService/BindingTarget.js

@@ -1,7 +0,0 @@
-export var BindingTarget;
-(function (BindingTarget) {
-    BindingTarget["property"] = "property";
-    BindingTarget["attribute"] = "attribute";
-    BindingTarget["style"] = "style";
-    BindingTarget["event"] = "event";
-})(BindingTarget || (BindingTarget = {}));

package/dist/elements/services/bindingsService/IBinding.d.ts

@@ -1,14 +0,0 @@
-import { BindingMode } from "./BindingMode";
-import { BindingTarget } from "./BindingTarget";
-export interface IBinding {
-    bindableObjectNames?: string[];
-    expression?: string;
-    mode?: BindingMode;
-    target?: BindingTarget;
-    invert?: boolean;
-    converter?: string;
-    changedEvent?: string;
-    nullSafe?: boolean;
-    rawName?: string;
-    rawValue?: string;
-}

package/dist/elements/services/bindingsService/IBinding.js

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

package/dist/elements/services/bindingsService/PolymerBindingsService copy.d.ts

@@ -1,9 +0,0 @@
-import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
-import { IDesignItem } from "../../item/IDesignItem";
-import { IBinding } from "./IBinding";
-import { IBindingService } from "./IBindingService";
-export declare class PolymerBindingsService implements IBindingService {
-    writeBindingMode: 'direct';
-    parseBindings(designItem: IDesignItem): void;
-    writeBinding(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, type: 'style' | 'attribute', keyValuePair: [key: string, value: IBinding]): boolean;
-}

package/dist/elements/services/bindingsService/PolymerBindingsService copy.js

@@ -1,31 +0,0 @@
-import { DomConverter } from "../../widgets/designerView/DomConverter";
-import { BindingMode } from './BindingMode';
-export class PolymerBindingsService {
-    constructor() {
-        this.writeBindingMode = 'direct';
-    }
-    parseBindings(designItem) {
-        for (let a of designItem.attributes.entries()) {
-            if (typeof a[1] == 'string' && (a[1].startsWith("[[") || a[1].startsWith("{{"))) {
-                let bnd = {};
-                if (a[1].startsWith("[["))
-                    bnd.mode = BindingMode.oneWay;
-                else
-                    bnd.mode = BindingMode.twoWay;
-                bnd.invert = a[1][3] == '!';
-                bnd.expression = a[1];
-                let nm = a[0];
-                if (nm.endsWith('$')) {
-                    bnd.escapeAttribute = true;
-                    nm = nm.slice(0, -1);
-                    designItem.attributes.delete(a[0]);
-                }
-                designItem.attributes.set(nm, bnd);
-            }
-        }
-    }
-    writeBinding(indentedTextWriter, designItem, type, keyValuePair) {
-        indentedTextWriter.write(keyValuePair[0] + '="' + (keyValuePair[1].mode == BindingMode.oneWay ? '[[' : '{{') + DomConverter.normalizeAttributeValue(keyValuePair[1].expression) + (keyValuePair[1].mode == BindingMode.oneWay ? ']]' : ']]') + '"');
-        return true;
-    }
-}

package/dist/elements/services/bindingsService/PolymerBindingsService.js

@@ -1,38 +0,0 @@
-"use strict";
-/*import { IndentedTextWriter } from "../../helper/IndentedTextWriter";
-import { IDesignItem } from "../../item/IDesignItem";
-import { DomConverter } from "../../widgets/designerView/DomConverter";
-import { IBinding } from "./IBinding";
-import { IBindingService } from "./IBindingService";
-import { BindingMode } from './BindingMode';
-
-
-export class PolymerBindingsService implements IBindingService {
-  writeBindingMode: 'direct' = 'direct';
-
-  parseBindings(designItem: IDesignItem) {
-    for (let a of designItem.attributes.entries()) {
-      if (typeof a[1] == 'string' && (a[1].startsWith("[[") || a[1].startsWith("{{"))) {
-        let bnd: IBinding & { escapeAttribute?: boolean } = {};
-        if (a[1].startsWith("[["))
-          bnd.mode = BindingMode.oneWay;
-        else
-          bnd.mode = BindingMode.twoWay;
-        bnd.invert = a[1][3] == '!';
-        bnd.expression = a[1];
-        let nm = a[0];
-        if (nm.endsWith('$')) {
-          bnd.escapeAttribute = true;
-          nm = nm.slice(0, -1);
-          designItem.attributes.delete(a[0]);
-        }
-        designItem.attributes.set(nm, bnd);
-      }
-    }
-  }
-
-  writeBinding(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem, type: 'style' | 'attribute', keyValuePair: [key: string, value: IBinding]): boolean {
-    indentedTextWriter.write(keyValuePair[0] + '="' + (keyValuePair[1].mode == BindingMode.oneWay ? '[[' : '{{') + DomConverter.normalizeAttributeValue(keyValuePair[1].expression) + (keyValuePair[1].mode == BindingMode.oneWay ? ']]' : ']]') + '"');
-    return true;
-  }
-}*/ 

package/dist/elements/services/copyPasteService/ICopyPasteService copy.js

@@ -1 +0,0 @@
-"use strict";

package/dist/elements/services/htmlParserService/NodeHtmlParserService.ts.BASE.d.ts

@@ -1,9 +0,0 @@
-import { InstanceServiceContainer } from "../InstanceServiceContainer";
-import { ServiceContainer } from "../ServiceContainer";
-import { IHtmlParserService } from "./IHtmlParserService";
-import { IDesignItem } from '../../item/IDesignItem';
-export declare class NodeHtmlParserService implements IHtmlParserService {
-    parse(html: string, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem[]>;
-    private _parseDiv;
-    _createDesignItemsRecursive(item: any, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, namespace: string): IDesignItem;
-}