@node-projects/web-component-designer 0.0.32 → 0.0.33

package/assets/images/chromeDevtools/sources_panel_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15mm" height="15mm" viewBox="0 0 15 15"><path fill="#000" d="M13.5 7.5a6 6 0 10-12 0 6 6 0 0012 0zm1 0a7 7 0 10-14 0 7 7 0 0014 0zm-10 2h5.072l1.636-2-1.636-2H4.5zm-1 0a1 1 0 001 1h5.072a1 1 0 00.774-.367l1.636-2a1 1 0 000-1.266l-1.637-2a1 1 0 00-.773-.367H4.5a1 1 0 00-1 1z" clip-rule="evenodd" fill-rule="evenodd"/></svg>

package/assets/images/chromeDevtools/survey_feedback_icon.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 11.5h9a1 1 0 001-1v-8a1 1 0 00-1-1H3a1 1 0 00-1 1v12l3-3zm-2 .586L4.586 10.5H14v-8H3v9.586z" fill="#000"/><path fill="#000" d="M8 4h1v3H8zM8 8h1v1H8z"/></svg>

package/assets/images/chromeDevtools/switcherIcon.svg

@@ -0,0 +1,57 @@
+<?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 16 16"
+   version="1.1"
+   id="svg22"
+   sodipodi:docname="switcherIcon.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   width="16"
+   height="16">
+  <metadata
+     id="metadata28">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs26" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2496"
+     inkscape:window-height="1570"
+     id="namedview24"
+     showgrid="false"
+     inkscape:zoom="75.333333"
+     inkscape:cx="6.1593412"
+     inkscape:cy="7.523637"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg22" />
+  <path
+     d="m 5.2405,6.0043674 h 5.518841 L 7.9999213,2.1505 Z m 0,3.9915058 h 5.518841 L 7.9999213,13.84974 Z"
+     fill="#000000"
+     id="path20"
+     style="stroke-width:0.949681" />
+</svg>

package/assets/images/chromeDevtools/three_dots_menu_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="4" height="14.029" viewBox="0 0 1.058 3.712"><g fill-rule="evenodd"><path d="M.926.533a.397.397 0 11-.794 0 .397.397 0 11.794 0zM.926 1.856a.397.397 0 11-.794 0 .397.397 0 11.794 0zM.926 3.179a.397.397 0 11-.794 0 .397.397 0 11.794 0z"/></g></svg>

package/assets/images/chromeDevtools/trash_bin_icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2.91 4.233" height="16" width="11"><path d="M.265 1.323h2.38L2.25 3.969H.661M2.381.53h-.529V.264h-.794v.264H.53a.27.27 0 00-.264.265v.264H2.646V.794A.27.27 0 002.38.529"/></svg>

package/assets/images/chromeDevtools/treeoutlineTriangles.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+   width="32"
+   height="24"
+   id="svg3620"
+   version="1.1"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
+   sodipodi:docname="treeoutlineTriangles.svg"
+   inkscape:export-xdpi="192"
+   inkscape:export-ydpi="192">
+  <defs
+     id="defs3622" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.999999"
+     inkscape:cx="5.8968306"
+     inkscape:cy="33.634397"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1680"
+     inkscape:window-height="1005"
+     inkscape:window-x="0"
+     inkscape:window-y="1"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata3625">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1028.3622)">
+    <path
+       d="m 7.5,1034.3622 -5.5,-3.75 v 7.5"
+       id="path3619"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+    <path
+       d="m 20.5,1037.8622 3.75,-5.5 h -7.5"
+       id="path3621"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccc" />
+  </g>
+</svg>

package/assets/images/chromeDevtools/warning_icon.svg

@@ -0,0 +1,83 @@
+<?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"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="warning_icon.svg"
+   id="svg2709"
+   version="1.1"
+   viewBox="0 0 10 10"
+   height="10mm"
+   width="10mm">
+  <defs
+     id="defs2703" />
+  <sodipodi:namedview
+     inkscape:window-maximized="1"
+     inkscape:window-y="0"
+     inkscape:window-x="0"
+     inkscape:window-height="1391"
+     inkscape:window-width="2560"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     inkscape:current-layer="layer1"
+     inkscape:document-units="mm"
+     inkscape:cy="14.346581"
+     inkscape:cx="29.445859"
+     inkscape:zoom="15.839192"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     borderopacity="1.0"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     id="base" />
+  <metadata
+     id="metadata2706">
+    <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>
+  <g
+     transform="translate(27.781233,-68.224719)"
+     id="layer1"
+     inkscape:groupmode="layer"
+     inkscape:label="Layer 1">
+    <g
+       id="g4443"
+       transform="matrix(1.0000124,0,0,1.0000124,-27.781295,68.224595)">
+      <path
+         style="stroke:#c19600;stroke-width:2;stroke-linejoin:round"
+         inkscape:connector-curvature="0"
+         id="path4447"
+         d="m 61,9 4,-8 4,8 z"
+         transform="translate(-60)" />
+      <path
+         style="fill:#f4bd00;stroke:#f5bd00;stroke-width:1.5;stroke-linejoin:round"
+         inkscape:connector-curvature="0"
+         id="path4449"
+         d="m 61,9 4,-8 4,8 z"
+         transform="translate(-60)" />
+      <path
+         style="fill:#ad8601"
+         inkscape:connector-curvature="0"
+         id="path4451"
+         d="m 63.75,2.75 h 2.5 v 2.5 L 65.75,7 h -1.5 l -0.5,-1.75 v -2.5 m 0,5.25 h 2.5 v 1.25 h -2.5"
+         transform="translate(-60)" />
+      <path
+         style="fill:#ffffff"
+         inkscape:connector-curvature="0"
+         id="path4453"
+         d="m 64,3 h 2 V 5.25 L 65.5,7 h -1 L 64,5.25 V 3 m 0,5 h 2 v 1 h -2"
+         transform="translate(-60)" />
+    </g>
+  </g>
+</svg>

package/dist/commandHandling/CommandType.d.ts

@@ -5,6 +5,7 @@ export declare enum CommandType {
     'delete' = "delete",
     'undo' = "undo",
     'redo' = "redo",
+    'selectAll' = "selectAll",
     'moveToFront' = "moveToFront",
     'moveForward' = "moveForward",
     'moveBackward' = "moveBackward",

package/dist/commandHandling/CommandType.js

@@ -6,6 +6,7 @@ export var CommandType;
     CommandType["delete"] = "delete";
     CommandType["undo"] = "undo";
     CommandType["redo"] = "redo";
+    CommandType["selectAll"] = "selectAll";
     CommandType["moveToFront"] = "moveToFront";
     CommandType["moveForward"] = "moveForward";
     CommandType["moveBackward"] = "moveBackward";

package/dist/elements/controls/DesignerTabControl.js

@@ -82,6 +82,7 @@ export class DesignerTabControl extends BaseCustomWebComponentLazyAppend {
             let htmlItem = item;
             let tabHeaderDiv = document.createElement("div");
             tabHeaderDiv.innerText = htmlItem.title;
+            tabHeaderDiv.title = htmlItem.title;
             tabHeaderDiv.className = 'tab-header';
             let j = i;
             tabHeaderDiv.onpointerdown = () => {
@@ -133,6 +134,7 @@ DesignerTabControl.style = css `
             flex-direction: column; 
             height: 100%;
             position: relative;
+            overflow: hidden;
         }
         .header {
             display: inline-flex; 
@@ -193,6 +195,7 @@ DesignerTabControl.style = css `
             font-weight: 500;
             line-height: 1.5;
             letter-spacing: 1px;
+            white-space: nowrap;
         }
         .tab-header:hover {
             background: var(--light-grey, #383f52);

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,82 @@
+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/ImageButtonListSelector.d.ts

@@ -0,0 +1,17 @@
+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.js

@@ -0,0 +1,82 @@
+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/ThicknessEditor.d.ts

@@ -0,0 +1,17 @@
+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 _value;
+    get value(): string;
+    set value(value: string);
+    valueChanged: TypedEvent<ThicknessEditorValueChangedEventArgs>;
+    property: string;
+    unsetValue: string;
+    _updateValue(): void;
+    ready(): void;
+}

package/dist/elements/controls/ThicknessEditor.js

@@ -0,0 +1,80 @@
+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 `
+  :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;
+  }
+  `;
+ThicknessEditor.template = html `
+    <div id="container">
+      <input id="left">
+      <input id="top">
+      <input id="right">
+      <input id="bottom">
+      <div id="rect"></div>
+    </div>
+  `;
+customElements.define('node-projects-thickness-editor', ThicknessEditor);

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

@@ -5,6 +5,8 @@ import { NumberPropertyEditor } from "./propertyEditors/NumberPropertyEditor";
 import { SelectPropertyEditor } from "./propertyEditors/SelectPropertyEditor";
 import { TextPropertyEditor } from './propertyEditors/TextPropertyEditor';
 import { BooleanPropertyEditor } from './propertyEditors/BooleanPropertyEditor';
+import { ImageButtonListPropertyEditor } from './propertyEditors/ImageButtonListPropertyEditor';
+import { ThicknessPropertyEditor } from "./propertyEditors/ThicknessPropertyEditor.js";
 export class DefaultEditorTypesService {
     getEditorForProperty(property) {
         if (property.createEditor)
@@ -38,6 +40,14 @@ export class DefaultEditorTypesService {
                 {
                     return new BooleanPropertyEditor(property);
                 }
+            case "img-list":
+                {
+                    return new ImageButtonListPropertyEditor(property);
+                }
+            case "thickness":
+                {
+                    return new ThicknessPropertyEditor(property);
+                }
             case "css-length":
             case "thickness":
             case "string":

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

@@ -0,0 +1,8 @@
+import { IProperty } from "../IProperty";
+import { BasePropertyEditor } from './BasePropertyEditor';
+import { ValueType } from "../ValueType";
+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 copy.js

@@ -0,0 +1,40 @@
+import { BasePropertyEditor } from './BasePropertyEditor';
+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/ImageButtonListPropertyEditor.d.ts

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