@operato/property-editor 1.11.16 → 1.11.18

package/src/ox-property-editor-solid-colorstops.ts

@@ -19,6 +19,7 @@ export class OxPropertyEditorSolidColorStops extends OxPropertyEditor {
         .min=${spec.property && spec.property.min}
         .max=${spec.property && spec.property.max}
         ?fullwidth=${fullwidth}
+        ?disabled=${this.disabled}
       >
       </ox-input-color-stops>
     `

package/src/ox-property-editor-string.ts

@@ -7,6 +7,14 @@ import { PropertySpec } from './types.js'
 @customElement('ox-property-editor-string')
 export class OxPropertyEditorString extends OxPropertyEditor {
   editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    return html` <input type="text" id="editor" .value=${value || ''} placeholder=${spec.placeholder || ''} /> `
+    return html`
+      <input
+        type="text"
+        id="editor"
+        .value=${value || ''}
+        placeholder=${spec.placeholder || ''}
+        ?disabled=${this.disabled}
+      />
+    `
   }
 }

package/src/ox-property-editor-table.ts

@@ -11,6 +11,13 @@ export class OxPropertyEditorString extends OxPropertyEditor {
   editorTemplate(value: any, spec: PropertySpec): TemplateResult {
     const { fullwidth = true } = spec.editor || {}
 
-    return html` <ox-input-table id="editor" .property=${spec.property} ?fullwidth=${fullwidth}></ox-input-table> `
+    return html`
+      <ox-input-table
+        id="editor"
+        .property=${spec.property}
+        ?fullwidth=${fullwidth}
+        ?disabled=${this.disabled}
+      ></ox-input-table>
+    `
   }
 }

package/src/ox-property-editor-textarea.ts

@@ -19,6 +19,7 @@ export class OxPropertyEditorTextArea extends OxPropertyEditor {
         tab-as-space=${spec.property?.tabAsSpace || 'false'}
         ?fullwidth=${fullwidth}
         language=${spec.property?.language || 'javascript'}
+        ?disabled=${this.disabled}
       >
       </ox-input-code>
     `

package/src/ox-property-editor-time.ts

@@ -7,6 +7,6 @@ import { PropertySpec } from './types.js'
 @customElement('ox-property-editor-time')
 export class OxPropertyEditorTime extends OxPropertyEditor {
   editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    return html` <input type="time" id="editor" .value=${value} /> `
+    return html` <input type="time" id="editor" .value=${value} ?disabled=${this.disabled} /> `
   }
 }

package/src/ox-property-editor-unit-number.ts

@@ -26,6 +26,7 @@ export class OxPropertyEditorNumberUnit extends OxPropertyEditor {
         .step=${step}
         .min=${min}
         .max=${max}
+        ?disabled=${this.disabled}
       ></ox-input-unit-number>
     `
   }

package/src/ox-property-editor-value-map.ts

@@ -20,6 +20,7 @@ export class OxPropertyEditorValueMap extends OxPropertyEditor {
         .valuetype=${valuetype}
         .value=${value}
         ?fullwidth=${fullwidth}
+        ?disabled=${this.disabled}
       ></ox-input-value-map>
     `
   }

package/src/ox-property-editor-value-ranges.ts

@@ -20,6 +20,7 @@ export class OxPropertyEditorValueRanges extends OxPropertyEditor {
         .valuetype=${valuetype}
         .value=${value}
         ?fullwidth=${fullwidth}
+        ?disabled=${this.disabled}
       ></ox-input-value-ranges>
     `
   }

package/src/ox-property-editor-work-shift.ts

@@ -12,6 +12,13 @@ export class OxPropertyEditorWorkShift extends OxPropertyEditor {
     const { editor } = spec
     const { fullwidth = true } = editor || {}
 
-    return html` <ox-input-work-shift id="editor" .value=${value} ?fullwidth=${fullwidth}></ox-input-work-shift> `
+    return html`
+      <ox-input-work-shift
+        id="editor"
+        .value=${value}
+        ?fullwidth=${fullwidth}
+        ?disabled=${this.disabled}
+      ></ox-input-work-shift>
+    `
   }
 }

package/src/ox-property-editor.ts

@@ -124,9 +124,12 @@ export class OxPropertyEditor extends LitElement {
   @property({ type: Object }) editor?: EditorProperty
   @property({ type: Object }) host: any
   @property({ type: Array }) quantifier?: [min: number, max: number] = [1, 1]
-  @property({ type: Object }) observe?: (value: any) => void
+  @property({ type: Object }) observeHandler?: (value: any) => void
   @property({ type: Object }) defaultValue?: any
   @property({ type: Object }) context?: any
+  @property({ type: Boolean }) disabled?: boolean
+
+  private observing: boolean = false
 
   connectedCallback() {
     super.connectedCallback()
@@ -213,7 +216,14 @@ export class OxPropertyEditor extends LitElement {
 
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
 
-    if (!this.observe) return
-    this.observe.call(this, this.value)
+    this.observe(this.value)
+  }
+
+  observe(value: any) {
+    if (this.observeHandler && !this.observing) {
+      this.observing = true
+      this.observeHandler.call(this, value)
+      this.observing = false
+    }
   }
 }