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

package/dist/elements/services/propertiesService/propertyEditors/DatePropertyEditor.d.ts

@@ -0,0 +1,7 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class DatePropertyEditor extends BasePropertyEditor<HTMLInputElement> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/DatePropertyEditor.js

@@ -0,0 +1,16 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class DatePropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let element = document.createElement('input');
+        element.type = "datetime-local";
+        element.onchange = (e) => this._valueChanged(element.value);
+        this.element = element;
+    }
+    refreshValue(valueType, value) {
+        if (!value)
+            this.element.value = null;
+        else
+            this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/FontPropertyEditor.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class FontPropertyEditor extends BasePropertyEditor<HTMLSelectElement> {
+    static fontList: string[];
+    constructor(property: IProperty);
+    parseFontList(): void;
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/FontPropertyEditor.js

@@ -0,0 +1,37 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class FontPropertyEditor extends BasePropertyEditor {
+    static fontList;
+    constructor(property) {
+        super(property);
+        let element = document.createElement("select");
+        this.element = element;
+        if (FontPropertyEditor.fontList) {
+            this.parseFontList();
+            //@ts-ignore
+        }
+        else if (window.queryLocalFonts) {
+            //@ts-ignore
+            window.queryLocalFonts().then(x => {
+                //@ts-ignore
+                FontPropertyEditor.fontList = [...new Set(x.map(y => y.family))];
+                this.parseFontList();
+            });
+        }
+        else {
+            FontPropertyEditor.fontList = ["Verdana", "Arial", "Tahoma", "Trebuchet MS", "Times New Roman", "Georgia", "Garamond", "Courier New", "Brush Script MT"];
+            this.parseFontList();
+        }
+    }
+    parseFontList() {
+        for (let v of FontPropertyEditor.fontList) {
+            let option = document.createElement("option");
+            option.value = v;
+            option.text = v;
+            this.element.appendChild(option);
+        }
+        this.element.onchange = (e) => this._valueChanged(this.element.value);
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+export declare class ImageButtonListPropertyEditor extends BasePropertyEditor<ImageButtonListSelector> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/ImageButtonListPropertyEditor.js

@@ -0,0 +1,40 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ImageButtonListSelector } from "../../../controls/ImageButtonListSelector.js";
+import { PropertiesHelper } from "../services/PropertiesHelper.js";
+import { assetsPath } from "../../../../Constants.js";
+export class ImageButtonListPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ImageButtonListSelector();
+        selector.property = property.name;
+        selector.unsetValue = property.defaultValue;
+        const propName = PropertiesHelper.camelToDashCase(property.name);
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let button = document.createElement("button");
+                button.dataset.value = v[1];
+                let img = document.createElement("img");
+                img.title = v[1];
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v[1] + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let button = document.createElement("button");
+                button.dataset.value = v;
+                let img = document.createElement("img");
+                img.title = v;
+                img.src = assetsPath + 'images/chromeDevtools/' + propName + '-' + v + '-icon.svg';
+                button.appendChild(img);
+                selector.appendChild(button);
+            }
+        }
+        selector.valueChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class JsonPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    static template: HTMLTemplateElement;
+    _input: HTMLInputElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyEditor.js

@@ -0,0 +1,21 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { html } from '@node-projects/base-custom-webcomponent';
+export class JsonPropertyEditor extends BasePropertyEditor {
+    static template = html `
+    <div style="display: flex;">
+      <input id="input" type="text">
+      <button style="width: 30px;">...</button>
+    </div>
+  `;
+    _input;
+    constructor(property) {
+        super(property);
+        let el = JsonPropertyEditor.template.content.cloneNode(true);
+        this._input = el.getElementById('input');
+        this._input.onchange = (e) => this._valueChanged(this._input.value);
+        this.element = el;
+    }
+    refreshValue(valueType, value) {
+        this._input.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.d.ts

@@ -0,0 +1,5 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
+    static template: HTMLTemplateElement;
+    constructor();
+}

package/dist/elements/services/propertiesService/propertyEditors/JsonPropertyPopupEditor.js

@@ -0,0 +1,13 @@
+import { html, BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export class JsonPropertyPopupEditor extends BaseCustomWebComponentConstructorAppend {
+    static template = html `
+    <div style="display: flex;">
+      <input id="input" type="text">
+      <button style="width: 30px;">...</button>
+    </div>
+  `;
+    constructor() {
+        super();
+        //codeview
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/NumberPropertyEditor.d.ts

@@ -0,0 +1,7 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class NumberPropertyEditor extends BasePropertyEditor<HTMLInputElement> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/NumberPropertyEditor.js

@@ -0,0 +1,16 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class NumberPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let element = document.createElement('input');
+        element.type = "number";
+        element.min = property.min;
+        element.max = property.max;
+        element.step = property.step;
+        element.onchange = (e) => this._valueChanged(element.value == '' ? null : element.valueAsNumber);
+        this.element = element;
+    }
+    refreshValue(valueType, value) {
+        this.element.value = value === undefined ? null : value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/SelectPropertyEditor.d.ts

@@ -0,0 +1,9 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class SelectPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    elementSelect: HTMLSelectElement;
+    elementInput: HTMLInputElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/SelectPropertyEditor.js

@@ -0,0 +1,45 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class SelectPropertyEditor extends BasePropertyEditor {
+    elementSelect;
+    elementInput;
+    constructor(property) {
+        super(property);
+        let element = document.createElement("div");
+        let elementSel = document.createElement("select");
+        if (property.type == 'enum') {
+            for (let v of property.enumValues) {
+                let option = document.createElement("option");
+                option.value = v[1];
+                option.text = v[0];
+                elementSel.appendChild(option);
+            }
+        }
+        else {
+            for (let v of property.values) {
+                let option = document.createElement("option");
+                option.value = v;
+                option.text = v;
+                elementSel.appendChild(option);
+            }
+        }
+        elementSel.onchange = (e) => this._valueChanged(elementSel.value);
+        let elementInput = document.createElement("input");
+        elementInput.style.display = 'none';
+        elementInput.onchange = (e) => this._valueChanged(elementInput.value);
+        this.elementSelect = elementSel;
+        this.elementInput = elementInput;
+        element.appendChild(this.elementSelect);
+        element.appendChild(this.elementInput);
+        this.element = element;
+    }
+    refreshValue(valueType, value) {
+        this.elementSelect.style.display = 'block';
+        this.elementInput.style.display = 'none';
+        this.elementSelect.value = value;
+        if (this.elementSelect.value != value && value) {
+            this.elementInput.value = value;
+            this.elementSelect.style.display = 'none';
+            this.elementInput.style.display = 'block';
+        }
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/TextPropertyEditor.d.ts

@@ -0,0 +1,7 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+export declare class TextPropertyEditor extends BasePropertyEditor<HTMLInputElement> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/TextPropertyEditor.js

@@ -0,0 +1,20 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class TextPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let element = document.createElement('input');
+        element.type = "text";
+        element.onchange = (e) => this._valueChanged(element.value);
+        element.onfocus = (e) => {
+            element.selectionStart = 0;
+            element.selectionEnd = element.value?.length;
+        };
+        this.element = element;
+    }
+    refreshValue(valueType, value) {
+        if (value == null)
+            this.element.value = "";
+        else
+            this.element.value = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from '../IProperty.js';
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ValueType } from '../ValueType.js';
+import { ThicknessEditor } from '../../../controls/ThicknessEditor.js';
+export declare class ThicknessPropertyEditor extends BasePropertyEditor<ThicknessEditor> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/ThicknessPropertyEditor.js

@@ -0,0 +1,14 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { ThicknessEditor } from '../../../controls/ThicknessEditor.js';
+export class ThicknessPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        const selector = new ThicknessEditor();
+        selector.property = property.name;
+        selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.valueLeft = value;
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from '../../IProperty.js';
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { ValueType } from '../../ValueType.js';
+export declare class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor<HTMLDivElement> {
+    _root: HTMLDivElement;
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/special/GridAssignedRowColumnPropertyEditor.js

@@ -0,0 +1,50 @@
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { getElementGridInformation } from '../../../../helper/GridHelper.js';
+export class GridAssignedRowColumnPropertyEditor extends BasePropertyEditor {
+    //Todo: multiple cell selection, grid area support, span support
+    _root;
+    constructor(property) {
+        super(property);
+        this._root = document.createElement('div');
+        this._root.style.display = 'grid';
+        this._root.style.padding = '4px 0px';
+        this._root.style.boxSizing = 'border-box';
+        this._root.style.minHeight = '50px';
+        this.element = this._root;
+    }
+    refreshValue(valueType, value) {
+        this._root.innerHTML = "";
+        if (this.designItems != null && this.designItems.length) {
+            let container = this.designItems[0].element.parentElement;
+            if (container) {
+                let styleContainer = getComputedStyle(container);
+                let info = getElementGridInformation(this.designItems[0].element);
+                let style = getComputedStyle(this.designItems[0].element);
+                let cntCol = styleContainer.gridTemplateColumns.split(' ').length;
+                let cntRow = styleContainer.gridTemplateRows.split(' ').length;
+                this._root.style.gridTemplateColumns = 'repeat(' + cntCol + ', 1fr)';
+                this._root.style.gridTemplateRows = 'repeat(' + cntRow + ', 1fr)';
+                let rowStart = parseInt(style.gridRowStart);
+                let rowEnd = rowStart + info.rowSpan;
+                let colStart = parseInt(style.gridColumnStart);
+                let colEnd = colStart + info.colSpan;
+                for (let p = 1; p <= cntRow; p++) {
+                    for (let n = 1; n <= cntCol; n++) {
+                        const b = document.createElement('button');
+                        b.style.minHeight = '10px';
+                        b.onclick = () => {
+                            let info = getElementGridInformation(this.designItems[0].element);
+                            let grp = this.designItems[0].openGroup('Change grid row/column');
+                            this.designItems[0].setStyle("grid-row", p + ' / ' + (p + info.rowSpan));
+                            this.designItems[0].setStyle("grid-column", n + ' / ' + (n + info.colSpan));
+                            grp.commit();
+                        };
+                        if (p >= rowStart && p < rowEnd && n >= colStart && n < colEnd)
+                            b.style.backgroundColor = 'coral';
+                        this._root.appendChild(b);
+                    }
+                }
+            }
+        }
+    }
+}

package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.d.ts

@@ -0,0 +1,8 @@
+import { IProperty } from '../../IProperty.js';
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { ValueType } from '../../ValueType.js';
+import { MetricsEditor } from '../../../../controls/MetricsEditor.js';
+export declare class MetricsPropertyEditor extends BasePropertyEditor<MetricsEditor> {
+    constructor(property: IProperty);
+    refreshValue(valueType: ValueType, value: any): void;
+}

package/dist/elements/services/propertiesService/propertyEditors/special/MetricsPropertyEditor.js

@@ -0,0 +1,15 @@
+import { BasePropertyEditor } from '../BasePropertyEditor.js';
+import { MetricsEditor } from '../../../../controls/MetricsEditor.js';
+export class MetricsPropertyEditor extends BasePropertyEditor {
+    //Todo: metrics editor does not work at all yet
+    constructor(property) {
+        super(property);
+        const selector = new MetricsEditor();
+        selector.property = property.name;
+        //selector.valueLeftChanged.on((e) => this._valueChanged(e.newValue));
+        this.element = selector;
+    }
+    refreshValue(valueType, value) {
+        this.element.refresh(this.designItems?.[0]?.element);
+    }
+}

package/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.d.ts

@@ -0,0 +1,11 @@
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { RefreshMode } from '../IPropertiesService.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare abstract class AbstractPolymerLikePropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    protected parseProperties(list: any): IProperty[];
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+}

package/dist/elements/services/propertiesService/services/AbstractPolymerLikePropertiesService.js

@@ -0,0 +1,55 @@
+import { PropertiesHelper } from './PropertiesHelper.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
+import { PropertyType } from '../PropertyType.js';
+import { RefreshMode } from '../IPropertiesService.js';
+export class AbstractPolymerLikePropertiesService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.full;
+    }
+    getProperties(designItem) {
+        if (!this.isHandledElement(designItem))
+            return null;
+        return this.parseProperties(designItem.element.constructor.properties);
+    }
+    parseProperties(list) {
+        let properties = [];
+        for (const name in list) {
+            const polymerProperty = list[name];
+            let type = polymerProperty;
+            if (polymerProperty.type)
+                type = polymerProperty.type;
+            if (type === String) {
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Object) {
+                let property = { name: name, type: "object", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Number) {
+                let property = { name: name, type: "number", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Date) {
+                let property = { name: name, type: "date", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (type === Boolean) {
+                let property = { name: name, type: "boolean", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else if (PropertiesHelper.isTypescriptEnum(type)) {
+                let property = { name: name, type: "enum", enumValues: PropertiesHelper.getTypescriptEnumEntries(type), service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+            else {
+                let property = { name: name, type: "string", service: this, propertyType: PropertyType.propertyAndAttribute };
+                properties.push(property);
+            }
+        }
+        return properties;
+    }
+    getUnsetValue(designItems, property) {
+        return designItems[0].element[property.propertyName ?? property.name];
+    }
+}

package/dist/elements/services/propertiesService/services/AbstractPropertiesService.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="node" />
+import { IPropertiesService, RefreshMode } from '../IPropertiesService.js';
+import { IProperty } from '../IProperty.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { ValueType } from '../ValueType.js';
+import { BindingTarget } from '../../../item/BindingTarget.js';
+import { IBinding } from '../../../item/IBinding.js';
+import { IPropertyGroup } from '../IPropertyGroup.js';
+export declare abstract class AbstractPropertiesService implements IPropertiesService {
+    _stylesCache: Map<IDesignItem, Set<string>>;
+    _cacheClearTimer: NodeJS.Timeout;
+    abstract getRefreshMode(designItem: IDesignItem): RefreshMode;
+    abstract isHandledElement(designItem: IDesignItem): boolean;
+    protected _notifyChangedProperty(designItem: IDesignItem, property: IProperty, value: any): void;
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    abstract getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): void;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): void;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): string | boolean;
+    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+}