@operato/property-editor 1.0.0-alpha.4 → 1.0.0-alpha.40

package/@types/global/index.d.ts

@@ -0,0 +1,2 @@
+declare module '*.png'
+declare module '*.css'

package/CHANGELOG.md

@@ -3,6 +3,312 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.40](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.39...v1.0.0-alpha.40) (2022-03-26)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.39](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.38...v1.0.0-alpha.39) (2022-03-25)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.38](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.37...v1.0.0-alpha.38) (2022-03-25)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.37](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.36...v1.0.0-alpha.37) (2022-03-25)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.36](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.35...v1.0.0-alpha.36) (2022-03-21)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.34...v1.0.0-alpha.35) (2022-03-21)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.33...v1.0.0-alpha.34) (2022-03-20)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.33](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.32...v1.0.0-alpha.33) (2022-03-19)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.31...v1.0.0-alpha.32) (2022-03-19)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.30...v1.0.0-alpha.31) (2022-03-19)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.29...v1.0.0-alpha.30) (2022-03-18)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.29](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.28...v1.0.0-alpha.29) (2022-03-17)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.26...v1.0.0-alpha.28) (2022-03-17)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.27](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.26...v1.0.0-alpha.27) (2022-03-17)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.26](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.25...v1.0.0-alpha.26) (2022-03-17)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.25](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.24...v1.0.0-alpha.25) (2022-03-17)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.24](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.23...v1.0.0-alpha.24) (2022-03-17)
+
+
+### :bug: Bug Fix
+
+* ccp, dataset, property-editor style ([92b2448](https://github.com/hatiolab/operato/commit/92b2448756604ee0b885949dd193241f319cf147))
+* refactoring grist-editor, property-editor and input ([ea7431a](https://github.com/hatiolab/operato/commit/ea7431a5e2dfd96ef392c1905e9622df7c2ef88c))
+
+
+
+## [1.0.0-alpha.23](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.22...v1.0.0-alpha.23) (2022-03-17)
+
+
+### :rocket: New Features
+
+* added qc module ([263b679](https://github.com/hatiolab/operato/commit/263b6794b97a635df1a50d013adaef2e83635908))
+
+
+
+## [1.0.0-alpha.22](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.21...v1.0.0-alpha.22) (2022-03-17)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.21](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.20...v1.0.0-alpha.21) (2022-03-16)
+
+
+### :rocket: New Features
+
+* add ccp module ([cbea635](https://github.com/hatiolab/operato/commit/cbea635d5f638d49fc99d68cc1727ac3e06ddf22))
+
+
+
+## [1.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.19...v1.0.0-alpha.20) (2022-03-15)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.18...v1.0.0-alpha.19) (2022-03-14)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.18](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.17...v1.0.0-alpha.18) (2022-03-14)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.17](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.16...v1.0.0-alpha.17) (2022-03-13)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.16](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.15...v1.0.0-alpha.16) (2022-03-13)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.15](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.14...v1.0.0-alpha.15) (2022-03-13)
+
+
+### :rocket: New Features
+
+* migrate input, property-editor from things-factory ([dbd5e73](https://github.com/hatiolab/operato/commit/dbd5e73eac328e72c4bb7abd113a819532bc894d))
+
+
+
+## [1.0.0-alpha.14](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.13...v1.0.0-alpha.14) (2022-03-13)
+
+
+### :bug: Bug Fix
+
+* typo ([24e77ac](https://github.com/hatiolab/operato/commit/24e77aca7938c895fdfe37f5235c6c781964d81a))
+
+
+
+## [1.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.12...v1.0.0-alpha.13) (2022-03-13)
+
+
+### :bug: Bug Fix
+
+* typos ([71447fa](https://github.com/hatiolab/operato/commit/71447fa2dfb52c5e45909baac735c2e195856256))
+
+
+
+## [1.0.0-alpha.12](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.11...v1.0.0-alpha.12) (2022-03-13)
+
+
+### :rocket: New Features
+
+* migrate input, property-editor from things-factory ([4800d85](https://github.com/hatiolab/operato/commit/4800d859473bf623325233a7f2af851e5d093dcb))
+
+
+
+## [1.0.0-alpha.11](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.10...v1.0.0-alpha.11) (2022-03-12)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.10](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.9...v1.0.0-alpha.10) (2022-03-12)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.9](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.8...v1.0.0-alpha.9) (2022-03-12)
+
+
+### :rocket: New Features
+
+* settled concept for input, property-editor, grist-editor, so on ([0c9e1d0](https://github.com/hatiolab/operato/commit/0c9e1d054c7aef5d965868242cf471667af7a3c3))
+
+
+
+## [1.0.0-alpha.8](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.7...v1.0.0-alpha.8) (2022-03-11)
+
+
+### :bug: Bug Fix
+
+* ox-property-editor-checkbox fault ([7e54318](https://github.com/hatiolab/operato/commit/7e54318b6a350782113e18d01ce7999c1e95fe47))
+
+
+
+## [1.0.0-alpha.7](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.6...v1.0.0-alpha.7) (2022-03-11)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [1.0.0-alpha.6](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.5...v1.0.0-alpha.6) (2022-03-11)
+
+
+### :bug: Bug Fix
+
+* ox-property-editor package.json missing ([ee8d0f8](https://github.com/hatiolab/operato/commit/ee8d0f8634e7f701b322981b8194442cdc2ebed1))
+
+
+
+## [1.0.0-alpha.5](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2022-03-11)
+
+
+### :bug: Bug Fix
+
+* migrate parameter-editor from things-factory ([019a30d](https://github.com/hatiolab/operato/commit/019a30df6fd4c8a273d4194d13f5784ed6f8d956))
+
+
+### :rocket: New Features
+
+* migrate property-editor from things-factory ([272cdaa](https://github.com/hatiolab/operato/commit/272cdaafd74f3c3c597403f88655cb5cf4a81313))
+* migrated property-editors from things-factory ([9d0b73a](https://github.com/hatiolab/operato/commit/9d0b73a8c05187e7ca8db874ddde8c977ec52a55))
+
+
+
 ## [1.0.0-alpha.4](https://github.com/hatiolab/operato/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-03-11)
 
 **Note:** Version bump only for package @operato/property-editor

package/demo/index.html

@@ -7,7 +7,6 @@
       body {
         margin: 0;
         padding: 0;
-        overflow: hidden;
 
         /* This is a font-stack that tries to use the system-default sans-serifs first */
         font-family: Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -15,21 +14,198 @@
         -webkit-font-smoothing: antialiased;
       }
 
-      ox-property-editor {
+      ox-properties-dynamic-view {
         width: 100vw;
-        height: 100vh;
       }
     </style>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
+
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
   </head>
   <body>
     <div id="demo"></div>
+
     <script type="module">
       import { html, render } from 'lit'
-      import '../dist/src/ox-property-editor.js'
+      import '@operato/i18n/ox-i18n.js'
+
+      import '../dist/src/ox-property-editor-angle.js'
+      import '../dist/src/ox-property-editor-checkbox.js'
+      import '../dist/src/ox-property-editor-color.js'
+      import '../dist/src/ox-property-editor-date.js'
+      import '../dist/src/ox-property-editor-legend.js'
+      import '../dist/src/ox-property-editor-number.js'
+      import '../dist/src/ox-property-editor-password.js'
+      import '../dist/src/ox-property-editor-range.js'
+      import '../dist/src/ox-property-editor-select.js'
+      import '../dist/src/ox-property-editor-string.js'
+      import '../dist/src/ox-property-editor-image.js'
+      import '../dist/src/ox-property-editor-file.js'
+      import '../dist/src/ox-property-editor-multiple-colors.js'
+      import '../dist/src/ox-property-editor-crontab.js'
+      // import '../dist/src/ox-property-editor-textarea.js'
+      // import '../dist/src/ox-property-editor-options.js'
+
+      import '../dist/src/ox-properties-dynamic-view.js'
+
+      import { OxPropertyEditor } from '@operato/property-editor'
+
+      OxPropertyEditor.register({
+        legend: 'ox-property-editor-legend',
+        number: 'ox-property-editor-number',
+        slider: 'ox-property-editor-range',
+        password: 'ox-property-editor-password',
+        angle: 'ox-property-editor-angle',
+        string: 'ox-property-editor-string',
+        textarea: 'ox-property-editor-textarea',
+        javascript: 'ox-property-editor-textarea',
+        checkbox: 'ox-property-editor-checkbox',
+        boolean: 'ox-property-editor-checkbox',
+        select: 'ox-property-editor-select',
+        date: 'ox-property-editor-date',
+        options: 'ox-property-editor-options',
+        data: 'ox-property-editor-data',
+        file: 'ox-property-editor-file',
+        image: 'ox-property-editor-image',
+        'range-input': 'ox-property-editor-range',
+        'attachment-selector': 'ox-property-editor-attachment-selector',
+        'gltf-selector': 'ox-property-editor-attachment-selector',
+        'image-selector': 'ox-property-editor-image-selector',
+        color: 'ox-property-editor-color',
+        'solid-color-stops': 'ox-property-editor-solid-colorstops',
+        'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
+        'multiple-color': 'ox-property-editor-multiple-colors',
+        map: 'ox-property-editor-value-map',
+        range: 'ox-property-editor-value-ranges',
+        graphql: 'ox-property-editor-graphql',
+        'editor-table': 'ox-property-editor-table',
+        'id-input': 'ox-property-editor-scene-component-id',
+        'font-selector': 'ox-property-editor-font-selector',
+        crontab: 'ox-property-editor-crontab'
+      })
+
+      const properties = [
+        {
+          type: 'string',
+          label: 'ABC',
+          name: 'ABC'
+        },
+        {
+          type: 'password',
+          label: 'PWD',
+          name: 'PWD'
+        },
+        {
+          type: 'select',
+          label: 'SLT',
+          name: 'SLT',
+          property: {
+            options: ['aaa', 'bbb']
+          }
+        },
+        {
+          type: 'number',
+          label: 'N#',
+          name: 'N#'
+        },
+        {
+          type: 'checkbox',
+          label: 'XV',
+          name: 'XV'
+        },
+        {
+          type: 'angle',
+          label: 'Degree',
+          name: 'Degree'
+        },
+        {
+          type: 'date',
+          label: 'DD',
+          name: 'DD'
+        },
+        {
+          type: 'legend',
+          label: '',
+          name: 'NEW-GROUP',
+          property: {
+            label: 'NEW-GROUP'
+          }
+        },
+        {
+          type: 'slider',
+          label: 'S',
+          name: 'S',
+          property: {
+            min: 30,
+            max: 300,
+            step: 10
+          }
+        },
+        {
+          type: 'textarea',
+          label: 'TA',
+          name: 'TA'
+        },
+        {
+          type: 'options',
+          label: 'OT',
+          name: 'OT'
+        },
+        {
+          type: 'data',
+          label: 'DT',
+          name: 'DT'
+        },
+        {
+          type: 'color',
+          label: 'CL',
+          name: 'CL'
+        },
+        {
+          type: 'multiple-color',
+          label: 'CLS',
+          name: 'CLS'
+        },
+        {
+          type: 'image',
+          label: 'IM',
+          name: 'IM'
+        },
+        {
+          type: 'file',
+          label: 'FL',
+          name: 'FL',
+          property: {
+            multiple: true
+          }
+        },
+        {
+          type: 'crontab',
+          label: 'schedule',
+          name: 'schedule'
+        }
+      ]
+
+      const value = {
+        S: 290,
+        SLT: 'bbb',
+        IM: 'https://www.hatiolab.com/assets/img/arch-thingsboard.png',
+        CLS: ['yello', 'green'],
+        schedule: '* * * * * *'
+      }
 
-      render(html` <ox-property-editor></ox-property-editor> `, document.querySelector('#demo'))
+      render(
+        html`
+          <ox-properties-dynamic-view
+            .props=${properties}
+            .value=${value}
+            @property-change=${e => console.log(e.currentTarget.value)}
+          ></ox-properties-dynamic-view>
+        `,
+        document.querySelector('#demo')
+      )
     </script>
   </body>
 </html>

package/dist/src/index.d.ts

@@ -1 +1,2 @@
-export * from './ox-property-editor';
+export * from './types.js';
+export * from './ox-property-editor.js';

package/dist/src/index.js

@@ -1,2 +1,3 @@
-export * from './ox-property-editor';
+export * from './types.js';
+export * from './ox-property-editor.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './ox-property-editor'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,yBAAyB,CAAA","sourcesContent":["export * from './types.js'\nexport * from './ox-property-editor.js'\n"]}

package/dist/src/ox-properties-dynamic-view.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+export {};

package/dist/src/ox-properties-dynamic-view.js

@@ -0,0 +1,122 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxPropertyEditor } from './ox-property-editor.js';
+/**
+모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.
+
+Example:
+
+    <ox-properties-dynamic-view value="{{value}}">
+      <label>Center X</label>
+      <input type="number" .value="${value.cx}">
+      <label>Width</label>
+      <input type="number" .value="${value.width}">
+    </ox-properties-dynamic-view>
+*/
+const DEFAULT_VALUE = {
+    legend: '',
+    number: 0,
+    angle: 0,
+    string: '',
+    password: '',
+    textarea: '',
+    checkbox: false,
+    select: '',
+    color: '#000000',
+    'solidcolor-stops': null,
+    'gradientcolor-stops': null,
+    'gltf-selector': '',
+    'image-selector': '',
+    multiplecolor: null,
+    editortable: null,
+    imageselector: '',
+    options: null,
+    date: null
+};
+let OxPropertiesDynamicView = class OxPropertiesDynamicView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    firstUpdated() {
+        this.addEventListener('change', this._onValueChanged.bind(this));
+    }
+    updated(changes) {
+        changes.has('props') && this._onPropsChanged(this.props || []);
+        changes.has('value') && this._setValues();
+    }
+    _onPropsChanged(props) {
+        const specs = this.props || [];
+        this.textContent = '';
+        specs.forEach(spec => {
+            let elementType = OxPropertyEditor.getEditor(spec.type);
+            if (!elementType) {
+                console.warn('Property Editor not defined', spec.type);
+                return;
+            }
+            let element = document.createElement(elementType);
+            element.label = spec.label;
+            element.type = spec.type;
+            element.placeholder = spec.placeholder;
+            element.setAttribute('name', spec.name);
+            if (spec.observe) {
+                element.observe = spec.observe;
+            }
+            element.property = spec.property;
+            element.setAttribute('property-editor', 'true');
+            this.appendChild(element);
+        });
+    }
+    _setValues() {
+        this.value &&
+            Array.from(this.querySelectorAll('[name]')).forEach(prop => {
+                const editor = prop;
+                const name = editor.getAttribute('name');
+                var value = this.value[name];
+                if (value === undefined) {
+                    value = DEFAULT_VALUE[editor.type];
+                }
+                editor.value = value;
+                editor.observe && editor.observe.call(prop, editor.value);
+            });
+    }
+    _onValueChanged(e) {
+        e.stopPropagation();
+        var target = e.target;
+        const editor = target.closest('[property-editor]');
+        var name = editor.getAttribute('name');
+        if (!name) {
+            return;
+        }
+        if (this.value) {
+            this.value[name] = editor.value;
+        }
+        else {
+            this.value = {
+                [name]: editor.value
+            };
+        }
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], OxPropertiesDynamicView.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], OxPropertiesDynamicView.prototype, "props", void 0);
+OxPropertiesDynamicView = __decorate([
+    customElement('ox-properties-dynamic-view')
+], OxPropertiesDynamicView);
+//# sourceMappingURL=ox-properties-dynamic-view.js.map

package/dist/src/ox-properties-dynamic-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-properties-dynamic-view.js","sourceRoot":"","sources":["../../src/ox-properties-dynamic-view.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement, PropertyValues, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n/**\n모든 에디터들은 change 이벤트를 지원해야 한다. 또한, 모든 에디터들은 value속성에 값을 가져야 한다.\n\nExample:\n\n    <ox-properties-dynamic-view value=\"{{value}}\">\n      <label>Center X</label>\n      <input type=\"number\" .value=\"${value.cx}\">\n      <label>Width</label>\n      <input type=\"number\" .value=\"${value.width}\">\n    </ox-properties-dynamic-view>\n*/\n\nconst DEFAULT_VALUE = {\n  legend: '',\n  number: 0,\n  angle: 0,\n  string: '',\n  password: '',\n  textarea: '',\n  checkbox: false,\n  select: '',\n  color: '#000000',\n  'solidcolor-stops': null,\n  'gradientcolor-stops': null,\n  'gltf-selector': '',\n  'image-selector': '',\n  multiplecolor: null,\n  editortable: null,\n  imageselector: '',\n  options: null,\n  date: null\n}\n\n@customElement('ox-properties-dynamic-view')\nclass OxPropertiesDynamicView extends LitElement {\n  @property({ type: Object }) value: { [name: string]: any } = {}\n  @property({ type: Array }) props?: PropertySpec[]\n\n  render() {\n    return html`<slot></slot>`\n  }\n\n  firstUpdated() {\n    this.addEventListener('change', this._onValueChanged.bind(this))\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('props') && this._onPropsChanged(this.props || [])\n    changes.has('value') && this._setValues()\n  }\n\n  _onPropsChanged(props: PropertySpec[]) {\n    const specs = this.props || []\n\n    this.textContent = ''\n    specs.forEach(spec => {\n      let elementType = OxPropertyEditor.getEditor(spec.type)\n      if (!elementType) {\n        console.warn('Property Editor not defined', spec.type)\n        return\n      }\n      let element = document.createElement(elementType) as OxPropertyEditor\n\n      element.label = spec.label\n      element.type = spec.type\n      element.placeholder = spec.placeholder\n      element.setAttribute('name', spec.name)\n\n      if (spec.observe) {\n        element.observe = spec.observe\n      }\n      element.property = spec.property\n      element.setAttribute('property-editor', 'true')\n\n      this.appendChild(element)\n    })\n  }\n\n  _setValues() {\n    this.value &&\n      Array.from(this.querySelectorAll('[name]')).forEach(prop => {\n        const editor = prop as OxPropertyEditor\n        const name = editor.getAttribute('name')\n\n        var value = this.value[name!]\n        if (value === undefined) {\n          value = (DEFAULT_VALUE as any)[editor.type]\n        }\n\n        editor.value = value\n        editor.observe && editor.observe.call(prop, editor.value)\n      })\n  }\n\n  _onValueChanged(e: Event) {\n    e.stopPropagation()\n    var target = e.target as Element\n\n    const editor = target.closest('[property-editor]') as OxPropertyEditor\n\n    var name = editor.getAttribute('name')\n    if (!name) {\n      return\n    }\n\n    if (this.value) {\n      this.value[name] = editor.value\n    } else {\n      this.value = {\n        [name]: editor.value\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-property-editor-angle.d.ts

@@ -0,0 +1,5 @@
+import '@operato/input/ox-input-angle.js';
+import { OxPropertyEditor } from './ox-property-editor.js';
+export declare class OxPropertyEditorAngle extends OxPropertyEditor {
+    editorTemplate(): import("lit-html").TemplateResult<1>;
+}