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

package/dist/elements/services/placementService/ISnaplinesProviderService.d.ts

@@ -0,0 +1,12 @@
+import { IService } from '../IService.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IRect } from "../../../interfaces/IRect.js";
+export interface ISnaplinesProviderService extends IService {
+    provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
+        outerRect: DOMRect;
+        positionsH: [number, IRect][];
+        positionsMiddleH: [number, IRect][];
+        positionsV: [number, IRect][];
+        positionsMiddleV: [number, IRect][];
+    };
+}

package/dist/elements/services/placementService/ISnaplinesProviderService.js

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

package/dist/elements/services/placementService/SnaplinesProviderService.d.ts

@@ -0,0 +1,14 @@
+import { IRect } from '../../../interfaces/IRect.js';
+import type { IDesignItem } from '../../item/IDesignItem.js';
+import { ISnaplinesProviderService } from './ISnaplinesProviderService.js';
+export declare const provideSnaplinesWithDistance = "provideSnaplinesWithDistance";
+export declare const provideSnaplinesWithDistanceDistance = "provideSnaplinesWithDistanceDistance";
+export declare class SnaplinesProviderService implements ISnaplinesProviderService {
+    provideSnaplines(containerItem: IDesignItem, ignoredItems: IDesignItem[]): {
+        outerRect: DOMRect;
+        positionsH: [number, IRect][];
+        positionsMiddleH: [number, IRect][];
+        positionsV: [number, IRect][];
+        positionsMiddleV: [number, IRect][];
+    };
+}

package/dist/elements/services/placementService/SnaplinesProviderService.js

@@ -0,0 +1,52 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent';
+export const provideSnaplinesWithDistance = 'provideSnaplinesWithDistance';
+export const provideSnaplinesWithDistanceDistance = 'provideSnaplinesWithDistanceDistance';
+export class SnaplinesProviderService {
+    provideSnaplines(containerItem, ignoredItems) {
+        {
+            const canvas = containerItem.instanceServiceContainer.designerCanvas;
+            const ignMap = new Map(ignoredItems.map(i => [i.element, i]));
+            const outerRect = containerItem.element.getBoundingClientRect();
+            const provideWithDist = canvas.instanceServiceContainer.designContext.extensionOptions[provideSnaplinesWithDistance] !== false;
+            const provideWithDistDist = canvas.instanceServiceContainer.designContext.extensionOptions[provideSnaplinesWithDistanceDistance] ?? 5;
+            const positionsH = [];
+            const positionsMiddleH = [];
+            const positionsV = [];
+            const positionsMiddleV = [];
+            let ignoreElements = ignoredItems.map(x => x.element);
+            for (let n of DomHelper.getAllChildNodes(containerItem.element, false, ignoreElements)) {
+                if (!ignMap.has(n)) {
+                    const p = n.getBoundingClientRect();
+                    const pLeft = (p.x - outerRect.x) / canvas.scaleFactor;
+                    const pMidH = (p.x - outerRect.x + p.width / 2) / canvas.scaleFactor;
+                    const pRight = (p.x - outerRect.x + p.width) / canvas.scaleFactor;
+                    const pTop = (p.y - outerRect.y) / canvas.scaleFactor;
+                    const pMidV = (p.y - outerRect.y + p.height / 2) / canvas.scaleFactor;
+                    const pBottom = (p.y - outerRect.y + p.height) / canvas.scaleFactor;
+                    const transformedP = { x: pLeft + outerRect.x, y: pTop + outerRect.y, width: p.width / canvas.scaleFactor, height: p.height / canvas.scaleFactor };
+                    if (provideWithDist)
+                        positionsH.push([pLeft - provideWithDistDist, transformedP]);
+                    positionsH.push([pLeft, transformedP]);
+                    positionsMiddleH.push([pMidH, transformedP]);
+                    positionsH.push([pRight, transformedP]);
+                    if (provideWithDist)
+                        positionsH.push([pRight + provideWithDistDist, transformedP]);
+                    if (provideWithDist)
+                        positionsV.push([pTop - provideWithDistDist, transformedP]);
+                    positionsV.push([pTop, transformedP]);
+                    positionsMiddleV.push([pMidV, transformedP]);
+                    positionsV.push([pBottom, transformedP]);
+                    if (provideWithDist)
+                        positionsV.push([pBottom + provideWithDistDist, transformedP]);
+                }
+            }
+            positionsH.push([0, { x: 0, y: 0, width: 0, height: 0 }]);
+            positionsH.sort((a, b) => a[0] - b[0]);
+            positionsMiddleH.sort((a, b) => a[0] - b[0]);
+            positionsV.push([0, { x: 0, y: 0, width: 0, height: 0 }]);
+            positionsV.sort((a, b) => a[0] - b[0]);
+            positionsMiddleV.sort((a, b) => a[0] - b[0]);
+            return { outerRect, positionsH, positionsMiddleH, positionsV, positionsMiddleV };
+        }
+    }
+}

package/dist/elements/services/popupService/IPopupService.d.ts

@@ -0,0 +1,16 @@
+export type PlacementType = 'automatic' | 'relativeTo';
+export type PopupPlacement = {
+    placementType: PlacementType;
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+    width?: number;
+    height?: number;
+};
+export type Popup = {
+    close: () => void;
+};
+export interface IPopupService {
+    showPopup(element: Element, popupPlacement?: PopupPlacement): Popup;
+}

package/dist/elements/services/popupService/IPopupService.js

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

package/dist/elements/services/popupService/PopupService.d.ts

@@ -0,0 +1,9 @@
+import { IPopupService, Popup, PopupPlacement } from './IPopupService.js';
+export declare class PopupService implements IPopupService {
+    private container;
+    private zindex;
+    constructor(container: Element);
+    showPopup(element: Element, popupPlacement?: PopupPlacement): Popup;
+    closePopup(element: Element): void;
+    bringToFront(element: Element): void;
+}

package/dist/elements/services/popupService/PopupService.js

@@ -0,0 +1,20 @@
+export class PopupService {
+    container;
+    zindex;
+    ;
+    constructor(container) {
+        this.container = container;
+    }
+    showPopup(element, popupPlacement) {
+        this.container.appendChild(element);
+        this.bringToFront(element);
+        return { close: () => this.closePopup(element) };
+    }
+    closePopup(element) {
+        this.container.removeChild(element);
+    }
+    bringToFront(element) {
+        this.zindex++;
+        element.style.zIndex = this.zindex;
+    }
+}

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

@@ -0,0 +1,6 @@
+import { IEditorTypesService } from './IEditorTypesService.js';
+import { IProperty } from './IProperty.js';
+import { IPropertyEditor } from './IPropertyEditor.js';
+export declare class DefaultEditorTypesService implements IEditorTypesService {
+    getEditorForProperty(property: IProperty): IPropertyEditor;
+}

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

@@ -0,0 +1,64 @@
+import { ColorPropertyEditor } from './propertyEditors/ColorPropertyEditor.js';
+import { DatePropertyEditor } from './propertyEditors/DatePropertyEditor.js';
+import { JsonPropertyEditor } from './propertyEditors/JsonPropertyEditor.js';
+import { NumberPropertyEditor } from './propertyEditors/NumberPropertyEditor.js';
+import { SelectPropertyEditor } from './propertyEditors/SelectPropertyEditor.js';
+import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor.js';
+import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor.js';
+import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor.js';
+import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
+import { FontPropertyEditor } from './propertyEditors/FontPropertyEditor.js';
+export class DefaultEditorTypesService {
+    getEditorForProperty(property) {
+        if (property.createEditor)
+            return property.createEditor(property);
+        switch (property.type) {
+            case "json":
+                {
+                    return new JsonPropertyEditor(property);
+                }
+            case "color":
+                {
+                    return new ColorPropertyEditor(property);
+                }
+            case "font":
+                {
+                    return new FontPropertyEditor(property);
+                }
+            case "date":
+                {
+                    return new DatePropertyEditor(property);
+                }
+            case "number":
+                {
+                    return new NumberPropertyEditor(property);
+                }
+            case "list":
+                {
+                    return new SelectPropertyEditor(property);
+                }
+            case "enum":
+                {
+                    return new SelectPropertyEditor(property);
+                }
+            case "boolean":
+                {
+                    return new BooleanPropertyEditor(property);
+                }
+            case "img-list":
+                {
+                    return new ImageButtonListPropertyEditor(property);
+                }
+            case "thickness":
+                {
+                    return new ThicknessPropertyEditor(property);
+                }
+            case "css-length":
+            case "string":
+            default:
+                {
+                    return new TextPropertyEditor(property);
+                }
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+import { IProperty } from './IProperty.js';
+import { IPropertyEditor } from './IPropertyEditor.js';
+export interface IEditorTypesService {
+    getEditorForProperty(type: IProperty): IPropertyEditor;
+}

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

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

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

@@ -0,0 +1,25 @@
+import { IProperty } from './IProperty.js';
+import { IService } from '../IService.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 enum RefreshMode {
+    none = 0,
+    full = 1,
+    fullOnValueChange = 2
+}
+export interface IPropertiesService extends IService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[] | IPropertyGroup[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getBinding(designItems: IDesignItem[], property: IProperty): IBinding;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+    setValue(designItems: IDesignItem[], property: IProperty, value: any): any;
+    clearValue(designItems: IDesignItem[], property: IProperty, clearType: 'all' | 'binding' | 'value'): any;
+    isSet(designItems: IDesignItem[], property: IProperty): ValueType;
+    getValue(designItems: IDesignItem[], property: IProperty): any;
+    getUnsetValue(designItems: IDesignItem[], property: IProperty): any;
+}

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

@@ -0,0 +1,6 @@
+export var RefreshMode;
+(function (RefreshMode) {
+    RefreshMode[RefreshMode["none"] = 0] = "none";
+    RefreshMode[RefreshMode["full"] = 1] = "full";
+    RefreshMode[RefreshMode["fullOnValueChange"] = 2] = "fullOnValueChange";
+})(RefreshMode || (RefreshMode = {}));

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

@@ -0,0 +1,22 @@
+import { IPropertiesService } from './IPropertiesService.js';
+import { IPropertyEditor } from './IPropertyEditor.js';
+import { PropertyType } from './PropertyType.js';
+export interface IProperty {
+    name: string;
+    renamable?: boolean;
+    propertyName?: string;
+    attributeName?: string;
+    description?: string;
+    type?: 'addNew' | 'json' | 'color' | 'date' | 'number' | 'list' | 'enum' | 'boolean' | 'img-lis' | 'thickness' | 'css-length' | 'string' | string;
+    default?: any;
+    min?: number;
+    max?: number;
+    step?: number;
+    values?: string[];
+    enumValues?: [name: string, value: string | number][];
+    createEditor?: (property: IProperty) => IPropertyEditor;
+    value?: any;
+    service: IPropertiesService;
+    defaultValue?: any;
+    propertyType: PropertyType;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IProperty } from './IProperty.js';
+import { ValueType } from './ValueType.js';
+export interface IPropertyEditor {
+    readonly element: Element;
+    property: IProperty;
+    designItems: IDesignItem[];
+    designItemsChanged(designItems: IDesignItem[]): any;
+    refreshValue(valueType: ValueType, value: any): any;
+    refreshValueWithoutNotification(valueType: ValueType, value: any): any;
+}
+export interface IPropertyEditorT<T extends Element> extends IPropertyEditor {
+    readonly element: T;
+    property: IProperty;
+    designItems: IDesignItem[];
+    designItemsChanged(designItems: IDesignItem[]): any;
+    refreshValue(valueType: ValueType, value: any): any;
+    refreshValueWithoutNotification(valueType: ValueType, value: any): any;
+}

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

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

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

@@ -0,0 +1,6 @@
+import { IProperty } from './IProperty.js';
+export interface IPropertyGroup {
+    name: string;
+    description?: string;
+    properties: IProperty[];
+}

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

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

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

@@ -0,0 +1,8 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPropertiesService } from './IPropertiesService.js';
+export interface IPropertyTabsService {
+    getPropertygroups(designItems: IDesignItem[]): {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+}

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

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

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

@@ -0,0 +1,27 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IPropertiesService } from './IPropertiesService.js';
+import { IPropertyTabsService } from './IPropertyTabsService.js';
+import { AttachedPropertiesService } from './services/AttachedPropertiesService.js';
+export declare class PropertyTabsService implements IPropertyTabsService {
+    protected _attachedPropertiesService: AttachedPropertiesService;
+    protected _pgList: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _svgPgList: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _gridChild: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    protected _flexChild: {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+    getPropertygroups(designItems: IDesignItem[]): {
+        name: string;
+        propertiesService: IPropertiesService;
+    }[];
+}

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

@@ -0,0 +1,53 @@
+import { NodeType } from '../../item/NodeType.js';
+import { AttachedPropertiesService } from './services/AttachedPropertiesService.js';
+import { AttributesPropertiesService } from './services/AttributesPropertiesService.js';
+import { CommonPropertiesService } from './services/CommonPropertiesService.js';
+import { CssCurrentPropertiesService } from './services/CssCurrentPropertiesService.js';
+import { CssCustomPropertiesService } from './services/CssCustomPropertiesService.js';
+import { CssPropertiesService } from './services/CssPropertiesService.js';
+export class PropertyTabsService {
+    _attachedPropertiesService = new AttachedPropertiesService();
+    _pgList = [
+        { name: 'properties', propertiesService: null },
+        { name: 'attached', propertiesService: this._attachedPropertiesService },
+        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
+        { name: 'common', propertiesService: new CommonPropertiesService() },
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
+        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
+        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
+        { name: 'flex', propertiesService: new CssPropertiesService("flex") },
+        { name: 'grid', propertiesService: new CssPropertiesService("grid") },
+    ];
+    _svgPgList = [
+        { name: 'properties', propertiesService: null },
+        { name: 'attached', propertiesService: this._attachedPropertiesService },
+        { name: 'attributes', propertiesService: new AttributesPropertiesService() },
+        { name: 'styles', propertiesService: new CssCurrentPropertiesService() },
+        { name: 'css vars', propertiesService: new CssCustomPropertiesService() },
+        { name: 'layout', propertiesService: new CssPropertiesService("layout") },
+        { name: 'svg', propertiesService: new CssPropertiesService("svg") },
+    ];
+    _gridChild = [
+        { name: 'gridChild', propertiesService: new CssPropertiesService("gridChild") },
+    ];
+    _flexChild = [
+        { name: 'flexChild', propertiesService: new CssPropertiesService("flexChild") },
+    ];
+    getPropertygroups(designItems) {
+        if (designItems == null || designItems.length == 0)
+            return [];
+        if (designItems[0].nodeType == NodeType.TextNode || designItems[0].nodeType == NodeType.Comment)
+            return [];
+        this._pgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
+        this._svgPgList[0].propertiesService = designItems[0].serviceContainer.getLastServiceWhere('propertyService', x => x.isHandledElement(designItems[0]));
+        let lst = this._pgList;
+        if (designItems[0].element instanceof SVGElement)
+            lst = this._svgPgList;
+        const parentStyle = getComputedStyle(designItems[0].element.parentElement);
+        if (parentStyle.display.includes('grid'))
+            lst = [...lst, this._gridChild[0]];
+        else if (parentStyle.display.includes('flex'))
+            lst = [...lst, this._flexChild[0]];
+        return lst;
+    }
+}

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

@@ -0,0 +1,8 @@
+export declare enum PropertyType {
+    property = "property",
+    attribute = "attribute",
+    propertyAndAttribute = "propertyAndAttribute",
+    cssValue = "cssvalue",
+    complex = "complex",
+    add = "add"
+}

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

@@ -0,0 +1,9 @@
+export var PropertyType;
+(function (PropertyType) {
+    PropertyType["property"] = "property";
+    PropertyType["attribute"] = "attribute";
+    PropertyType["propertyAndAttribute"] = "propertyAndAttribute";
+    PropertyType["cssValue"] = "cssvalue";
+    PropertyType["complex"] = "complex";
+    PropertyType["add"] = "add"; // editor allows to add a new one
+})(PropertyType || (PropertyType = {}));

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

@@ -0,0 +1,7 @@
+export declare enum ValueType {
+    'none' = "none",
+    'all' = "all",
+    'some' = "some",
+    'bound' = "bound",
+    'fromStylesheet' = "fromStylesheet"
+}

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

@@ -0,0 +1,8 @@
+export var ValueType;
+(function (ValueType) {
+    ValueType["none"] = "none";
+    ValueType["all"] = "all";
+    ValueType["some"] = "some";
+    ValueType["bound"] = "bound";
+    ValueType["fromStylesheet"] = "fromStylesheet";
+})(ValueType || (ValueType = {}));

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

@@ -0,0 +1,2 @@
+declare function getProtoProperties(target: any): string[];
+declare function getAttributesIfCustomElement(target: any): any;

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

@@ -0,0 +1,71 @@
+"use strict";
+function getProtoProperties(target) {
+    // If this is a custom element, you need to go up the prototype
+    // chain until you get proper HTMLElement, since everything under it
+    // is generated prototypes and will have propeties that are dupes (like:
+    // every observedAttribute is also mirrored as a property)
+    const isCustomElement = target.tagName.indexOf('-') !== -1;
+    let proto = target.__proto__;
+    if (isCustomElement) {
+        while (proto.constructor !== window.HTMLElement.prototype.constructor) {
+            proto = proto.__proto__;
+        }
+    }
+    let protoProps = {};
+    // We literally want nothing other than 'href' and 'target' from HTMLAnchorElement.
+    if (proto.constructor.name === 'HTMLAnchorElement') {
+        protoProps['href'] = Object.getOwnPropertyDescriptors(proto).href;
+        protoProps['target'] = Object.getOwnPropertyDescriptors(proto).target;
+        proto = proto.__proto__;
+    }
+    while (proto.constructor.name !== 'Element') {
+        Object.assign(protoProps, Object.getOwnPropertyDescriptors(proto));
+        proto = proto.__proto__;
+    }
+    let propNames = Object.keys(protoProps).sort();
+    // Skip some very specific Polymer/element properties.
+    let blacklist = [
+        // Polymer specific
+        'isAttached',
+        'constructor', 'created', 'ready', 'attached', 'detached',
+        'attributeChanged', 'is', 'listeners', 'observers', 'properties',
+        // Native elements ones we don't care about
+        'validity', 'useMap', 'innerText', 'outerText', 'style', 'accessKey',
+        'draggable', 'lang', 'spellcheck', 'tabIndex', 'translate', 'align', 'dir',
+        'isMap', 'useMap', 'hspace', 'vspace', 'referrerPolicy', 'crossOrigin',
+        'lowsrc', 'longDesc',
+        // Specific elements stuff
+        'receivedFocusFromKeyboard', 'pointerDown', 'valueAsNumber',
+        'selectionDirection', 'selectionStart', 'selectionEnd'
+    ];
+    let i = 0;
+    while (i < propNames.length) {
+        let name = propNames[i];
+        // Skip everything that starts with a _ which is a Polymer private/protected
+        // and you probably don't care about it.
+        // Also anything in the blacklist. Or that starts with webkit.
+        if (name.charAt(0) === '_' ||
+            name === 'keyEventTarget' ||
+            blacklist.indexOf(name) !== -1 ||
+            name.indexOf('webkit') === 0 ||
+            name.indexOf('on') === 0) {
+            propNames.splice(i, 1);
+            continue;
+        }
+        // Skip everything that doesn't have a setter.
+        if (!protoProps[name].set) {
+            propNames.splice(i, 1);
+            continue;
+        }
+        i++;
+    }
+    return propNames || [];
+}
+function getAttributesIfCustomElement(target) {
+    if (target.tagName.indexOf('-') !== -1) {
+        return target.constructor.observedAttributes;
+    }
+    else {
+        return [];
+    }
+}

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

@@ -0,0 +1,15 @@
+import { IPropertyEditorT } from '../IPropertyEditor.js';
+import { IProperty } from '../IProperty.js';
+import { ValueType } from '../ValueType.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare abstract class BasePropertyEditor<T extends HTMLElement> implements IPropertyEditorT<T> {
+    element: T;
+    property: IProperty;
+    designItems: IDesignItem[];
+    protected disableChangeNotification: boolean;
+    constructor(property: IProperty);
+    protected _valueChanged(newValue: any): void;
+    designItemsChanged(designItems: IDesignItem[]): void;
+    abstract refreshValue(valueType: ValueType, value: any): any;
+    refreshValueWithoutNotification(valueType: ValueType, value: any): void;
+}

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

@@ -0,0 +1,41 @@
+import { ValueType } from '../ValueType.js';
+export class BasePropertyEditor {
+    element;
+    property;
+    designItems;
+    disableChangeNotification = false;
+    constructor(property) {
+        this.property = property;
+    }
+    _valueChanged(newValue) {
+        if (!this.disableChangeNotification) {
+            if (this.designItems && this.designItems.length) {
+                const cg = this.designItems[0].openGroup("set property: " + this.property.name);
+                for (let d of this.designItems) {
+                    if (newValue == null)
+                        this.property.service.clearValue([d], this.property, 'value');
+                    else
+                        this.property.service.setValue([d], this.property, newValue);
+                }
+                cg.commit();
+            }
+        }
+    }
+    designItemsChanged(designItems) {
+        this.designItems = designItems;
+    }
+    refreshValueWithoutNotification(valueType, value) {
+        if (valueType == ValueType.none)
+            this.element.classList.add('unset-value');
+        else
+            this.element.classList.remove('unset-value');
+        this.disableChangeNotification = true;
+        try {
+            this.refreshValue(valueType, value);
+        }
+        catch (err) {
+            console.error(err);
+        }
+        this.disableChangeNotification = false;
+    }
+}

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

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

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

@@ -0,0 +1,13 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+export class BooleanPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let element = document.createElement('input');
+        element.type = "checkbox";
+        element.onchange = (e) => this._valueChanged(element.checked);
+        this.element = element;
+    }
+    refreshValue(valueType, value) {
+        this.element.checked = value;
+    }
+}

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

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

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

@@ -0,0 +1,22 @@
+import { BasePropertyEditor } from './BasePropertyEditor.js';
+import { w3color } from '../../../helper/w3color.js';
+export class ColorPropertyEditor extends BasePropertyEditor {
+    constructor(property) {
+        super(property);
+        let element = document.createElement('input');
+        element.type = 'color';
+        element.onchange = (e) => {
+            let w3Col = w3color.toColorObject(element.value);
+            this._valueChanged(w3Col.toNameOrHexString());
+        };
+        this.element = element;
+    }
+    refreshValue(valueType, value) {
+        if (!value)
+            this.element.value = '#000000';
+        else {
+            let w3Col = w3color.toColorObject(value);
+            this.element.value = w3Col.toHexString();
+        }
+    }
+}