@operato/property-editor 2.0.0-alpha.94 → 2.0.0-alpha.96

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.96](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.95...v2.0.0-alpha.96) (2024-04-21)
+
+
+### :bug: Bug Fix
+
+* style for ox-parameters-builder ([6a9a3fb](https://github.com/hatiolab/operato/commit/6a9a3fb74493257790677ecc2664f27beb6b849e))
+
+
+
+## [2.0.0-alpha.95](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.94...v2.0.0-alpha.95) (2024-04-21)
+
+
+### :bug: Bug Fix
+
+* add styles for CSStyles property into PropertySpec ([1c18564](https://github.com/hatiolab/operato/commit/1c185645c2f8e8b0c8a654d15e3b7603b80d2864))
+
+
+
 ## [2.0.0-alpha.94](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.93...v2.0.0-alpha.94) (2024-04-20)
 
 **Note:** Version bump only for package @operato/property-editor

package/demo/index.html

@@ -16,6 +16,9 @@
 
       ox-properties-dynamic-view {
         width: 100vw;
+
+        display: flex;
+        flex-direction: column;
       }
     </style>
 
@@ -197,7 +200,10 @@
         {
           type: 'textarea',
           label: 'TA',
-          name: 'TA'
+          name: 'TA',
+          styles: {
+            flex: '1'
+          }
         },
         {
           type: 'options',

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

@@ -56,7 +56,7 @@ let OxPropertiesDynamicView = class OxPropertiesDynamicView extends LitElement {
         const specs = this.props || [];
         this.textContent = '';
         specs.forEach(spec => {
-            const { label, type, name, placeholder, editor, quantifier, observe, property, defaultValue } = spec;
+            const { label, type, name, placeholder, editor, quantifier, observe, property, defaultValue, styles } = spec;
             let elementType = OxPropertyEditor.getEditor(type);
             if (!elementType) {
                 console.warn('Property Editor not defined', type);
@@ -76,6 +76,11 @@ let OxPropertiesDynamicView = class OxPropertiesDynamicView extends LitElement {
             }
             element.property = property;
             element.setAttribute('property-editor', 'true');
+            if (styles) {
+                Object.keys(styles).forEach((key) => {
+                    element.style[key] = styles[key];
+                });
+            }
             this.appendChild(element);
         });
     }

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

@@ -1 +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 { html, LitElement, PropertyValues } 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')\nexport class 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      const { label, type, name, placeholder, editor, quantifier, observe, property, defaultValue } = spec\n\n      let elementType = OxPropertyEditor.getEditor(type)\n      if (!elementType) {\n        console.warn('Property Editor not defined', type)\n        return\n      }\n      let element = document.createElement(elementType) as OxPropertyEditor\n\n      element.label = label\n      element.type = type\n      element.placeholder = placeholder\n      element.name = name\n      element.setAttribute('name', name)\n      element.editor = editor\n      element.quantifier = quantifier\n      element.defaultValue = defaultValue\n\n      if (observe) {\n        element.observeHandler = observe\n      }\n      element.property = 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 = editor.defaultValue !== undefined ? editor.defaultValue : (DEFAULT_VALUE as any)[editor.type]\n        }\n\n        editor.value = value\n        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"]}
+{"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 { html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec, CSSStyles } 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')\nexport class 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      const { label, type, name, placeholder, editor, quantifier, observe, property, defaultValue, styles } = spec\n\n      let elementType = OxPropertyEditor.getEditor(type)\n      if (!elementType) {\n        console.warn('Property Editor not defined', type)\n        return\n      }\n      let element = document.createElement(elementType) as OxPropertyEditor\n\n      element.label = label\n      element.type = type\n      element.placeholder = placeholder\n      element.name = name\n      element.setAttribute('name', name)\n      element.editor = editor\n      element.quantifier = quantifier\n      element.defaultValue = defaultValue\n\n      if (observe) {\n        element.observeHandler = observe\n      }\n      element.property = property\n      element.setAttribute('property-editor', 'true')\n\n      if (styles) {\n        Object.keys(styles).forEach((key: string) => {\n          element.style[key as keyof CSSStyles] = styles![key as keyof CSSStyles]\n        })\n      }\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 = editor.defaultValue !== undefined ? editor.defaultValue : (DEFAULT_VALUE as any)[editor.type]\n        }\n\n        editor.value = value\n        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-textarea.d.ts

@@ -3,5 +3,6 @@ import { TemplateResult } from 'lit';
 import { OxPropertyEditor } from './ox-property-editor.js';
 import { PropertySpec } from './types.js';
 export declare class OxPropertyEditorTextArea extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
     editorTemplate(value: any, spec: PropertySpec): TemplateResult;
 }

package/dist/src/ox-property-editor-textarea.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-code.js';
-import { html } from 'lit';
+import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorTextArea = class OxPropertyEditorTextArea extends OxPropertyEditor {
@@ -21,6 +21,14 @@ let OxPropertyEditorTextArea = class OxPropertyEditorTextArea extends OxProperty
     `;
     }
 };
+OxPropertyEditorTextArea.styles = [
+    ...OxPropertyEditor.styles,
+    css `
+      :host {
+        grid-template-rows: auto 1fr;
+      }
+    `
+];
 OxPropertyEditorTextArea = __decorate([
     customElement('ox-property-editor-textarea')
 ], OxPropertyEditorTextArea);

package/dist/src/ox-property-editor-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-textarea.js","sourceRoot":"","sources":["../../src/ox-property-editor-textarea.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAInD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,gBAAgB;IAC5D,cAAc,CAAC,KAAU,EAAE,IAAkB;;QAC3C,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE9C,OAAO,IAAI,CAAA;;;iBAGE,KAAK;mBACH,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,KAAI,EAAE;uBACxB,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,KAAI,OAAO;qBACtC,SAAS;mBACX,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,KAAI,YAAY;oBACtC,IAAI,CAAC,QAAQ;;;KAG5B,CAAA;IACH,CAAC;CACF,CAAA;AAjBY,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAiBpC","sourcesContent":["import '@operato/input/ox-input-code.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-textarea')\nexport class OxPropertyEditorTextArea extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const { fullwidth = true } = spec.editor || {}\n\n    return html`\n      <ox-input-code\n        id=\"editor\"\n        .value=${value}\n        tab-size=${spec.property?.tabSize || ''}\n        tab-as-space=${spec.property?.tabAsSpace || 'false'}\n        ?fullwidth=${fullwidth}\n        language=${spec.property?.language || 'javascript'}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-code>\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-textarea.js","sourceRoot":"","sources":["../../src/ox-property-editor-textarea.ts"],"names":[],"mappings":";AAAA,OAAO,iCAAiC,CAAA;AAExC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAInD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,gBAAgB;IAU5D,cAAc,CAAC,KAAU,EAAE,IAAkB;;QAC3C,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAE9C,OAAO,IAAI,CAAA;;;iBAGE,KAAK;mBACH,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,OAAO,KAAI,EAAE;uBACxB,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,KAAI,OAAO;qBACtC,SAAS;mBACX,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,KAAI,YAAY;oBACtC,IAAI,CAAC,QAAQ;;;KAG5B,CAAA;IACH,CAAC;;AAxBM,+BAAM,GAAG;IACd,GAAG,gBAAgB,CAAC,MAAM;IAC1B,GAAG,CAAA;;;;KAIF;CACF,AAPY,CAOZ;AARU,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CA0BpC","sourcesContent":["import '@operato/input/ox-input-code.js'\n\nimport { css, html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-textarea')\nexport class OxPropertyEditorTextArea extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      :host {\n        grid-template-rows: auto 1fr;\n      }\n    `\n  ]\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const { fullwidth = true } = spec.editor || {}\n\n    return html`\n      <ox-input-code\n        id=\"editor\"\n        .value=${value}\n        tab-size=${spec.property?.tabSize || ''}\n        tab-as-space=${spec.property?.tabAsSpace || 'false'}\n        ?fullwidth=${fullwidth}\n        language=${spec.property?.language || 'javascript'}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-code>\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor.js

@@ -174,7 +174,7 @@ OxPropertyEditor.styles = [
       ox-input-code,
       ox-input-data,
       .multiline-input {
-        height: 300px;
+        min-height: 300px;
       }
 
       :host > div {

package/dist/src/ox-property-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor.js","sourceRoot":"","sources":["../../src/ox-property-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nimport { EditorProperty, PropertySpec } from './types'\n\nexport class OxPropertyEditor extends LitElement {\n  static registry: { [type: string]: string } = {}\n\n  public static register(types: { [type: string]: string }) {\n    Object.keys(types).forEach(type => {\n      OxPropertyEditor.registry[type] = types[type]\n    })\n  }\n\n  public static getEditor(type: string): string {\n    return OxPropertyEditor.registry[type]\n  }\n\n  static styles = [\n    css`\n      :host {\n        margin: 5px;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n\n        color: var(--property-sidebar-fieldset-legend-color);\n      }\n\n      :host > * {\n        box-sizing: border-box;\n\n        grid-column: span 7;\n        order: 2;\n\n        align-self: stretch;\n      }\n\n      :host > label {\n        grid-column: span 3;\n        order: 1;\n\n        text-align: right;\n\n        font: var(--label-font);\n        text-transform: capitalize;\n\n        align-self: center;\n      }\n\n      :host > input[type='checkbox'] ~ label,\n      :host > ox-checkbox ~ label {\n        grid-column: span 6;\n        order: 2;\n\n        text-align: left;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n      }\n\n      :host > legend {\n        grid-column: 1 / -1;\n\n        display: inline-block;\n\n        text-align: left;\n        text-transform: capitalize;\n      }\n\n      :host > [fullwidth] {\n        grid-column: 1 / -1;\n      }\n\n      :host > input[type='checkbox'],\n      :host > ox-checkbox {\n        grid-column: span 4;\n        order: 1;\n\n        justify-self: end;\n        align-self: center;\n      }\n\n      ox-input-code,\n      ox-input-data,\n      .multiline-input {\n        height: 300px;\n      }\n\n      :host > div {\n        display: flex;\n        flex-direction: column;\n        gap: 3px;\n      }\n\n      div[data-index] {\n        display: flex;\n        min-height: 24px;\n      }\n\n      div[data-index] > * {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) type!: string\n  @property({ type: String, attribute: true, reflect: true }) name!: string\n  @property({ type: String }) label!: string\n  @property({ type: String }) placeholder?: string\n  @property({ type: Object }) property?: any\n  @property({ type: Object }) editor?: EditorProperty\n  @property({ type: Object }) host: any\n  @property({ type: Array }) quantifier?: [min: number, max: number] = [1, 1]\n  @property({ type: Object }) observeHandler?: (value: any) => void\n  @property({ type: Object }) defaultValue?: any\n  @property({ type: Object }) context?: any\n  @property({ type: Boolean }) disabled?: boolean\n\n  private observing: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', this._valueChanged.bind(this))\n  }\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html``\n  }\n\n  render() {\n    const { defaultValue } = this\n    const { value = defaultValue, quantifier } = this\n    const [min = 1, max = 1] = quantifier || [1, 1]\n\n    return html`\n      ${max <= 1\n        ? this.editorTemplate(value, this)\n        : html`\n            <div ?fullwidth=${this.editor?.fullwidth}>\n              ${new Array(max)\n                .fill('')\n                .map(\n                  (_, idx) => html` <div editor data-index=${idx}>${this.editorTemplate(value?.[idx], this)}</div> `\n                )}\n            </div>\n          `}\n      ${this.label\n        ? html`\n            <label for=\"editor\">\n              <ox-i18n msgid=${this._computeLabelId(this.label)}>${this.label}</ox-i18n>\n            </label>\n          `\n        : html``}\n    `\n  }\n\n  @state() __by_me = false\n\n  shouldUpdate(changedProperties: any) {\n    if (this.__by_me) {\n      return false\n    }\n\n    if (changedProperties.has('value')) {\n      this.__by_me = true\n      this.value = this.makeup(this.value)\n      this.__by_me = false\n    }\n\n    return true\n  }\n\n  get valueProperty() {\n    return 'value'\n  }\n\n  makeup(v: any) {\n    return deepClone(v)\n  }\n\n  _computeLabelId(label: string) {\n    if (label.indexOf('label.') >= 0) return label\n\n    return 'label.' + label\n  }\n\n  _valueChanged(e: Event) {\n    e.stopPropagation()\n    const editor = e.target as HTMLInputElement\n\n    const [min = 1, max = 1] = this.quantifier || []\n    const value = this.makeup((editor as any)[this.valueProperty])\n\n    if (max > 1) {\n      const index = Number(editor.closest('[data-index]')?.getAttribute('data-index'))\n      var array: any[] = this.value instanceof Array ? [...this.value] : []\n      array[index] = value\n      this.value = array\n    } else {\n      this.value = value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.observe(this.value)\n  }\n\n  observe(value: any) {\n    if (this.observeHandler && !this.observing) {\n      this.observing = true\n      this.observeHandler.call(this, value)\n      this.observing = false\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor.js","sourceRoot":"","sources":["../../src/ox-property-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep'\n\nimport { EditorProperty, PropertySpec } from './types'\n\nexport class OxPropertyEditor extends LitElement {\n  static registry: { [type: string]: string } = {}\n\n  public static register(types: { [type: string]: string }) {\n    Object.keys(types).forEach(type => {\n      OxPropertyEditor.registry[type] = types[type]\n    })\n  }\n\n  public static getEditor(type: string): string {\n    return OxPropertyEditor.registry[type]\n  }\n\n  static styles = [\n    css`\n      :host {\n        margin: 5px;\n\n        display: grid;\n        grid-template-columns: repeat(10, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n\n        color: var(--property-sidebar-fieldset-legend-color);\n      }\n\n      :host > * {\n        box-sizing: border-box;\n\n        grid-column: span 7;\n        order: 2;\n\n        align-self: stretch;\n      }\n\n      :host > label {\n        grid-column: span 3;\n        order: 1;\n\n        text-align: right;\n\n        font: var(--label-font);\n        text-transform: capitalize;\n\n        align-self: center;\n      }\n\n      :host > input[type='checkbox'] ~ label,\n      :host > ox-checkbox ~ label {\n        grid-column: span 6;\n        order: 2;\n\n        text-align: left;\n      }\n\n      select,\n      ox-select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-radius: 4px;\n      }\n\n      :host > legend {\n        grid-column: 1 / -1;\n\n        display: inline-block;\n\n        text-align: left;\n        text-transform: capitalize;\n      }\n\n      :host > [fullwidth] {\n        grid-column: 1 / -1;\n      }\n\n      :host > input[type='checkbox'],\n      :host > ox-checkbox {\n        grid-column: span 4;\n        order: 1;\n\n        justify-self: end;\n        align-self: center;\n      }\n\n      ox-input-code,\n      ox-input-data,\n      .multiline-input {\n        min-height: 300px;\n      }\n\n      :host > div {\n        display: flex;\n        flex-direction: column;\n        gap: 3px;\n      }\n\n      div[data-index] {\n        display: flex;\n        min-height: 24px;\n      }\n\n      div[data-index] > * {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any\n  @property({ type: String }) type!: string\n  @property({ type: String, attribute: true, reflect: true }) name!: string\n  @property({ type: String }) label!: string\n  @property({ type: String }) placeholder?: string\n  @property({ type: Object }) property?: any\n  @property({ type: Object }) editor?: EditorProperty\n  @property({ type: Object }) host: any\n  @property({ type: Array }) quantifier?: [min: number, max: number] = [1, 1]\n  @property({ type: Object }) observeHandler?: (value: any) => void\n  @property({ type: Object }) defaultValue?: any\n  @property({ type: Object }) context?: any\n  @property({ type: Boolean }) disabled?: boolean\n\n  private observing: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', this._valueChanged.bind(this))\n  }\n\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html``\n  }\n\n  render() {\n    const { defaultValue } = this\n    const { value = defaultValue, quantifier } = this\n    const [min = 1, max = 1] = quantifier || [1, 1]\n\n    return html`\n      ${max <= 1\n        ? this.editorTemplate(value, this)\n        : html`\n            <div ?fullwidth=${this.editor?.fullwidth}>\n              ${new Array(max)\n                .fill('')\n                .map(\n                  (_, idx) => html` <div editor data-index=${idx}>${this.editorTemplate(value?.[idx], this)}</div> `\n                )}\n            </div>\n          `}\n      ${this.label\n        ? html`\n            <label for=\"editor\">\n              <ox-i18n msgid=${this._computeLabelId(this.label)}>${this.label}</ox-i18n>\n            </label>\n          `\n        : html``}\n    `\n  }\n\n  @state() __by_me = false\n\n  shouldUpdate(changedProperties: any) {\n    if (this.__by_me) {\n      return false\n    }\n\n    if (changedProperties.has('value')) {\n      this.__by_me = true\n      this.value = this.makeup(this.value)\n      this.__by_me = false\n    }\n\n    return true\n  }\n\n  get valueProperty() {\n    return 'value'\n  }\n\n  makeup(v: any) {\n    return deepClone(v)\n  }\n\n  _computeLabelId(label: string) {\n    if (label.indexOf('label.') >= 0) return label\n\n    return 'label.' + label\n  }\n\n  _valueChanged(e: Event) {\n    e.stopPropagation()\n    const editor = e.target as HTMLInputElement\n\n    const [min = 1, max = 1] = this.quantifier || []\n    const value = this.makeup((editor as any)[this.valueProperty])\n\n    if (max > 1) {\n      const index = Number(editor.closest('[data-index]')?.getAttribute('data-index'))\n      var array: any[] = this.value instanceof Array ? [...this.value] : []\n      array[index] = value\n      this.value = array\n    } else {\n      this.value = value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.observe(this.value)\n  }\n\n  observe(value: any) {\n    if (this.observeHandler && !this.observing) {\n      this.observing = true\n      this.observeHandler.call(this, value)\n      this.observing = false\n    }\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -1,6 +1,10 @@
 export type EditorProperty = {
     fullwidth?: boolean;
 };
+type WritableKeysOf<T> = {
+    [P in keyof T]: T[P] extends Readonly<T[P]> ? never : P;
+}[keyof T];
+export type CSSStyles = Pick<CSSStyleDeclaration, WritableKeysOf<CSSStyleDeclaration>>;
 export type PropertySpec = {
     type: string;
     label: string;
@@ -12,4 +16,6 @@ export type PropertySpec = {
     observe?: (value: any) => void;
     defaultValue?: any;
     disabled?: boolean;
+    styles?: CSSStyles;
 };
+export {};

package/dist/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type EditorProperty = {\n  fullwidth?: boolean\n}\n\nexport type PropertySpec = {\n  type: string\n  label: string\n  name: string\n  placeholder?: string\n  property?: any\n  editor?: EditorProperty\n  quantifier?: [min: number, max: number]\n  observe?: (value: any) => void\n  defaultValue?: any\n  disabled?: boolean\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type EditorProperty = {\n  fullwidth?: boolean\n}\n\ntype WritableKeysOf<T> = {\n  [P in keyof T]: T[P] extends Readonly<T[P]> ? never : P\n}[keyof T]\n\nexport type CSSStyles = Pick<CSSStyleDeclaration, WritableKeysOf<CSSStyleDeclaration>>\n\nexport type PropertySpec = {\n  type: string\n  label: string\n  name: string\n  placeholder?: string\n  property?: any\n  editor?: EditorProperty\n  quantifier?: [min: number, max: number]\n  observe?: (value: any) => void\n  defaultValue?: any\n  disabled?: boolean\n  styles?: CSSStyles\n}\n"]}

package/dist/stories/index.stories.d.ts

@@ -1,4 +1,28 @@
 import { TemplateResult } from 'lit';
+import '../src/ox-property-editor-3axis.js';
+import '../src/ox-property-editor-3dish.js';
+import '../src/ox-property-editor-angle.js';
+import '../src/ox-property-editor-checkbox.js';
+import '../src/ox-property-editor-color.js';
+import '../src/ox-property-editor-date.js';
+import '../src/ox-property-editor-legend.js';
+import '../src/ox-property-editor-number.js';
+import '../src/ox-property-editor-unit-number.js';
+import '../src/ox-property-editor-password.js';
+import '../src/ox-property-editor-range.js';
+import '../src/ox-property-editor-select.js';
+import '../src/ox-property-editor-string.js';
+import '../src/ox-property-editor-image.js';
+import '../src/ox-property-editor-file.js';
+import '../src/ox-property-editor-multiple-colors.js';
+import '../src/ox-property-editor-crontab.js';
+import '../src/ox-property-editor-work-shift.js';
+import '../src/ox-property-editor-partition-keys.js';
+import '../src/ox-property-editor-key-values.js';
+import '../src/ox-property-editor-textarea.js';
+import '../src/ox-property-editor-options.js';
+import '../src/ox-property-editor-hashtags.js';
+import '../src/ox-properties-dynamic-view.js';
 declare const _default: {
     title: string;
     component: string;
@@ -27,6 +51,3 @@ interface ArgTypes {
     slot?: TemplateResult;
 }
 export declare const Regular: Story<ArgTypes>;
-export declare const CustomTitle: Story<ArgTypes>;
-export declare const CustomCounter: Story<ArgTypes>;
-export declare const SlottedContent: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -1,32 +1,271 @@
 import { html } from 'lit';
+import '../src/ox-property-editor-3axis.js';
+import '../src/ox-property-editor-3dish.js';
+import '../src/ox-property-editor-angle.js';
+import '../src/ox-property-editor-checkbox.js';
+import '../src/ox-property-editor-color.js';
+import '../src/ox-property-editor-date.js';
+import '../src/ox-property-editor-legend.js';
+import '../src/ox-property-editor-number.js';
+import '../src/ox-property-editor-unit-number.js';
+import '../src/ox-property-editor-password.js';
+import '../src/ox-property-editor-range.js';
+import '../src/ox-property-editor-select.js';
+import '../src/ox-property-editor-string.js';
+import '../src/ox-property-editor-image.js';
+import '../src/ox-property-editor-file.js';
+import '../src/ox-property-editor-multiple-colors.js';
+import '../src/ox-property-editor-crontab.js';
+import '../src/ox-property-editor-work-shift.js';
+import '../src/ox-property-editor-partition-keys.js';
+import '../src/ox-property-editor-key-values.js';
+import '../src/ox-property-editor-textarea.js';
+import '../src/ox-property-editor-options.js';
+import '../src/ox-property-editor-hashtags.js';
+import '../src/ox-properties-dynamic-view.js';
+import { OxPropertyEditor } from '../src/ox-property-editor.js';
 export default {
-    title: 'PropertyEditor',
-    component: 'ox-property-editor',
+    title: 'Properties Dynamic View',
+    component: 'ox-properties-dynamic-view',
     argTypes: {
         title: { control: 'text' },
         counter: { control: 'number' },
         textColor: { control: 'color' }
     }
 };
-const Template = ({ title = 'Hello world', counter = 5, textColor, slot }) => html `
-  <ox-board-viewer style="--board-viewer-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
-    ${slot}
-  </ox-board-viewer>
+OxPropertyEditor.register({
+    legend: 'ox-property-editor-legend',
+    number: 'ox-property-editor-number',
+    'unit-number': 'ox-property-editor-unit-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',
+    shift: 'ox-property-editor-work-shift',
+    'partition-keys': 'ox-property-editor-partition-keys',
+    'key-values': 'ox-property-editor-key-values',
+    hashtags: 'ox-property-editor-hashtags',
+    '3axis': 'ox-property-editor-3axis',
+    '3dish': 'ox-property-editor-3dish'
+});
+const properties = [
+    {
+        type: 'string',
+        label: 'ABC',
+        name: 'ABC',
+        quantifier: [1, 20]
+    },
+    {
+        type: 'password',
+        label: 'PWD',
+        name: 'PWD'
+    },
+    {
+        type: 'select',
+        label: 'SLT',
+        name: 'SLT',
+        property: {
+            options: [
+                { display: '', value: '' },
+                { display: 'AAA', value: 'aaa' },
+                { display: 'BBB', value: 'bbb' }
+            ]
+        }
+    },
+    {
+        type: 'number',
+        label: 'N#',
+        name: 'N#'
+    },
+    {
+        type: 'unit-number',
+        label: 'NU',
+        name: 'NU',
+        property: {
+            unit: 'K'
+        }
+    },
+    {
+        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',
+        editor: {
+            fullwidth: true
+        }
+    },
+    {
+        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'
+    },
+    {
+        type: 'shift',
+        label: 'shift',
+        name: 'shift'
+    },
+    {
+        type: 'key-values',
+        label: 'key-values',
+        name: 'key-values'
+    },
+    {
+        type: 'hashtags',
+        label: 'hashtags',
+        name: 'hashtags'
+    },
+    {
+        type: '3dish',
+        label: '3dish',
+        name: '3dish'
+    }
+];
+const value = {
+    ABC: [4, 3, 2, 1],
+    S: 290,
+    SLT: 'bbb',
+    NU: 1000,
+    IM: 'https://www.hatiolab.com/assets/img/arch-thingsboard.png',
+    CLS: ['yello', 'green'],
+    schedule: '* * * * * *',
+    shift: [
+        {
+            name: 'DAY',
+            fromDate: -1,
+            fromTime: '22:00',
+            toDate: 0,
+            toTime: '06:00'
+        },
+        {
+            name: 'SWING',
+            fromDate: 0,
+            fromTime: '06:00',
+            toDate: 0,
+            toTime: '14:00'
+        },
+        {
+            name: 'NIGHT',
+            fromDate: 0,
+            fromTime: '14:00',
+            toDate: 0,
+            toTime: '22:00'
+        }
+    ],
+    hashtags: ['abc', 'def'],
+    '3dish': {
+        dimension: { x: 1, y: 1, z: 1 },
+        position: { x: 1, y: 1, z: 1 },
+        rotate: { x: 1, y: 1, z: 1 },
+        scale: { x: 1, y: 1, z: 1 }
+    }
+};
+const Template = () => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <ox-properties-dynamic-view .props=${properties} .value=${value}></ox-properties-dynamic-view>
 `;
 export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'My title'
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-    counter: 123456
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } }
-};
 //# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,oBAAoB;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;uDACtD,SAAS,IAAI,OAAO,YAAY,KAAK,aAAa,OAAO;MAC1G,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAA;AACD,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAA","sourcesContent":["import { TemplateResult, html } from 'lit'\n\nexport default {\n  title: 'PropertyEditor',\n  component: 'ox-property-editor',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title?: string\n  counter?: number\n  textColor?: string\n  slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`\n  <ox-board-viewer style=\"--board-viewer-text-color: ${textColor || 'black'}\" .title=${title} .counter=${counter}>\n    ${slot}\n  </ox-board-viewer>\n`\n\nexport const Regular = Template.bind({})\n\nexport const CustomTitle = Template.bind({})\nCustomTitle.args = {\n  title: 'My title'\n}\n\nexport const CustomCounter = Template.bind({})\nCustomCounter.args = {\n  counter: 123456\n}\n\nexport const SlottedContent = Template.bind({})\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`\n}\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } }\n}\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit'\n\nimport '../src/ox-property-editor-3axis.js'\nimport '../src/ox-property-editor-3dish.js'\nimport '../src/ox-property-editor-angle.js'\nimport '../src/ox-property-editor-checkbox.js'\nimport '../src/ox-property-editor-color.js'\nimport '../src/ox-property-editor-date.js'\nimport '../src/ox-property-editor-legend.js'\nimport '../src/ox-property-editor-number.js'\nimport '../src/ox-property-editor-unit-number.js'\nimport '../src/ox-property-editor-password.js'\nimport '../src/ox-property-editor-range.js'\nimport '../src/ox-property-editor-select.js'\nimport '../src/ox-property-editor-string.js'\nimport '../src/ox-property-editor-image.js'\nimport '../src/ox-property-editor-file.js'\nimport '../src/ox-property-editor-multiple-colors.js'\nimport '../src/ox-property-editor-crontab.js'\nimport '../src/ox-property-editor-work-shift.js'\nimport '../src/ox-property-editor-partition-keys.js'\nimport '../src/ox-property-editor-key-values.js'\nimport '../src/ox-property-editor-textarea.js'\nimport '../src/ox-property-editor-options.js'\nimport '../src/ox-property-editor-hashtags.js'\n\nimport '../src/ox-properties-dynamic-view.js'\n\nimport { OxPropertyEditor } from '../src/ox-property-editor.js'\n\nexport default {\n  title: 'Properties Dynamic View',\n  component: 'ox-properties-dynamic-view',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title?: string\n  counter?: number\n  textColor?: string\n  slot?: TemplateResult\n}\n\nOxPropertyEditor.register({\n  legend: 'ox-property-editor-legend',\n  number: 'ox-property-editor-number',\n  'unit-number': 'ox-property-editor-unit-number',\n  slider: 'ox-property-editor-range',\n  password: 'ox-property-editor-password',\n  angle: 'ox-property-editor-angle',\n  string: 'ox-property-editor-string',\n  textarea: 'ox-property-editor-textarea',\n  javascript: 'ox-property-editor-textarea',\n  checkbox: 'ox-property-editor-checkbox',\n  boolean: 'ox-property-editor-checkbox',\n  select: 'ox-property-editor-select',\n  date: 'ox-property-editor-date',\n  options: 'ox-property-editor-options',\n  data: 'ox-property-editor-data',\n  file: 'ox-property-editor-file',\n  image: 'ox-property-editor-image',\n  'range-input': 'ox-property-editor-range',\n  'attachment-selector': 'ox-property-editor-attachment-selector',\n  'gltf-selector': 'ox-property-editor-attachment-selector',\n  'image-selector': 'ox-property-editor-image-selector',\n  color: 'ox-property-editor-color',\n  'solid-color-stops': 'ox-property-editor-solid-colorstops',\n  'gradient-color-stops': 'ox-property-editor-gradient-colorstops',\n  'multiple-color': 'ox-property-editor-multiple-colors',\n  map: 'ox-property-editor-value-map',\n  range: 'ox-property-editor-value-ranges',\n  graphql: 'ox-property-editor-graphql',\n  'editor-table': 'ox-property-editor-table',\n  'id-input': 'ox-property-editor-scene-component-id',\n  'font-selector': 'ox-property-editor-font-selector',\n  crontab: 'ox-property-editor-crontab',\n  shift: 'ox-property-editor-work-shift',\n  'partition-keys': 'ox-property-editor-partition-keys',\n  'key-values': 'ox-property-editor-key-values',\n  hashtags: 'ox-property-editor-hashtags',\n  '3axis': 'ox-property-editor-3axis',\n  '3dish': 'ox-property-editor-3dish'\n})\n\nconst properties = [\n  {\n    type: 'string',\n    label: 'ABC',\n    name: 'ABC',\n    quantifier: [1, 20]\n  },\n  {\n    type: 'password',\n    label: 'PWD',\n    name: 'PWD'\n  },\n  {\n    type: 'select',\n    label: 'SLT',\n    name: 'SLT',\n    property: {\n      options: [\n        { display: '', value: '' },\n        { display: 'AAA', value: 'aaa' },\n        { display: 'BBB', value: 'bbb' }\n      ]\n    }\n  },\n  {\n    type: 'number',\n    label: 'N#',\n    name: 'N#'\n  },\n  {\n    type: 'unit-number',\n    label: 'NU',\n    name: 'NU',\n    property: {\n      unit: 'K'\n    }\n  },\n  {\n    type: 'checkbox',\n    label: 'XV',\n    name: 'XV'\n  },\n  {\n    type: 'angle',\n    label: 'Degree',\n    name: 'Degree'\n  },\n  {\n    type: 'date',\n    label: 'DD',\n    name: 'DD'\n  },\n  {\n    type: 'legend',\n    label: '',\n    name: 'NEW-GROUP',\n    property: {\n      label: 'NEW-GROUP'\n    }\n  },\n  {\n    type: 'slider',\n    label: 'S',\n    name: 'S',\n    property: {\n      min: 30,\n      max: 300,\n      step: 10\n    }\n  },\n  {\n    type: 'textarea',\n    label: 'TA',\n    name: 'TA'\n  },\n  {\n    type: 'options',\n    label: 'OT',\n    name: 'OT',\n    editor: {\n      fullwidth: true\n    }\n  },\n  {\n    type: 'data',\n    label: 'DT',\n    name: 'DT'\n  },\n  {\n    type: 'color',\n    label: 'CL',\n    name: 'CL'\n  },\n  {\n    type: 'multiple-color',\n    label: 'CLS',\n    name: 'CLS'\n  },\n  {\n    type: 'image',\n    label: 'IM',\n    name: 'IM'\n  },\n  {\n    type: 'file',\n    label: 'FL',\n    name: 'FL',\n    property: {\n      multiple: true\n    }\n  },\n  {\n    type: 'crontab',\n    label: 'schedule',\n    name: 'schedule'\n  },\n  {\n    type: 'shift',\n    label: 'shift',\n    name: 'shift'\n  },\n  {\n    type: 'key-values',\n    label: 'key-values',\n    name: 'key-values'\n  },\n  {\n    type: 'hashtags',\n    label: 'hashtags',\n    name: 'hashtags'\n  },\n  {\n    type: '3dish',\n    label: '3dish',\n    name: '3dish'\n  }\n]\n\nconst value = {\n  ABC: [4, 3, 2, 1],\n  S: 290,\n  SLT: 'bbb',\n  NU: 1000,\n  IM: 'https://www.hatiolab.com/assets/img/arch-thingsboard.png',\n  CLS: ['yello', 'green'],\n  schedule: '* * * * * *',\n  shift: [\n    {\n      name: 'DAY',\n      fromDate: -1,\n      fromTime: '22:00',\n      toDate: 0,\n      toTime: '06:00'\n    },\n    {\n      name: 'SWING',\n      fromDate: 0,\n      fromTime: '06:00',\n      toDate: 0,\n      toTime: '14:00'\n    },\n    {\n      name: 'NIGHT',\n      fromDate: 0,\n      fromTime: '14:00',\n      toDate: 0,\n      toTime: '22:00'\n    }\n  ],\n  hashtags: ['abc', 'def'],\n  '3dish': {\n    dimension: { x: 1, y: 1, z: 1 },\n    position: { x: 1, y: 1, z: 1 },\n    rotate: { x: 1, y: 1, z: 1 },\n    scale: { x: 1, y: 1, z: 1 }\n  }\n}\n\nconst Template: Story<ArgTypes> = () => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <ox-properties-dynamic-view .props=${properties} .value=${value}></ox-properties-dynamic-view>\n`\n\nexport const Regular = Template.bind({})\n"]}