@operato/property-editor 9.0.0-beta.21 → 9.0.0-beta.29

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.0-beta.29](https://github.com/hatiolab/operato/compare/v9.0.0-beta.28...v9.0.0-beta.29) (2025-01-30)
+
+**Note:** Version bump only for package @operato/property-editor
+
+
+
+
+
+## [9.0.0-beta.28](https://github.com/hatiolab/operato/compare/v9.0.0-beta.27...v9.0.0-beta.28) (2025-01-28)
+
+
+### :rocket: New Features
+
+* module property-panel ([d3dd184](https://github.com/hatiolab/operato/commit/d3dd18461756814dc17e33157a397d8d679650a6))
+
+
+
 ## [9.0.0-beta.21](https://github.com/hatiolab/operato/compare/v9.0.0-beta.20...v9.0.0-beta.21) (2025-01-28)
 
 **Note:** Version bump only for package @operato/property-editor

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

@@ -11,7 +11,7 @@ export declare class OxPropertiesDynamicView extends LitElement {
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
     updated(changes: PropertyValues<this>): void;
-    _onPropsChanged(props: PropertySpec[]): void;
-    _setValues(): void;
-    _onValueChanged(e: Event): void;
+    private onPropsChanged;
+    private setValues;
+    private onValueChanged;
 }

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

@@ -46,13 +46,13 @@ let OxPropertiesDynamicView = class OxPropertiesDynamicView extends LitElement {
         return html `<slot></slot>`;
     }
     firstUpdated() {
-        this.addEventListener('change', this._onValueChanged.bind(this));
+        this.addEventListener('change', this.onValueChanged.bind(this));
     }
     updated(changes) {
-        changes.has('props') && this._onPropsChanged(this.props || []);
-        changes.has('value') && this._setValues();
+        changes.has('props') && this.onPropsChanged(this.props || []);
+        changes.has('value') && this.setValues();
     }
-    _onPropsChanged(props) {
+    onPropsChanged(props) {
         const specs = this.props || [];
         this.textContent = '';
         specs.forEach(spec => {
@@ -84,7 +84,7 @@ let OxPropertiesDynamicView = class OxPropertiesDynamicView extends LitElement {
             this.appendChild(element);
         });
     }
-    _setValues() {
+    setValues() {
         this.value &&
             Array.from(this.querySelectorAll('[name]')).forEach(prop => {
                 var _a, _b;
@@ -98,7 +98,7 @@ let OxPropertiesDynamicView = class OxPropertiesDynamicView extends LitElement {
                 (_b = editor.observe) === null || _b === void 0 ? void 0 : _b.call(prop, editor.value);
             });
     }
-    _onValueChanged(e) {
+    onValueChanged(e) {
         e.stopPropagation();
         var target = e.target;
         const editor = target.closest('[property-editor]');

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, 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.getDefaultValue?.() || (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  private 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  private 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.getDefaultValue?.() || (DEFAULT_VALUE as any)[editor.type]\n        }\n\n        editor.value = value\n        editor.observe?.call(prop, editor.value)\n      })\n  }\n\n  private 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.js

@@ -116,26 +116,26 @@ OxPropertyEditor.styles = [
         margin: 5px;
 
         display: grid;
-        grid-template-columns: repeat(10, 1fr);
+        grid-template-columns: repeat(24, 1fr);
         grid-gap: 5px;
         grid-auto-rows: minmax(24px, auto);
 
         align-items: center;
 
-        color: var(--property-sidebar-fieldset-legend-color, var(--md-sys-color-on-secondary-container));
+        color: var(--md-sys-color-on-secondary-container);
       }
 
       :host > * {
         box-sizing: border-box;
 
-        grid-column: span 7;
+        grid-column: 9 / -1;
         order: 2;
 
         align-self: stretch;
       }
 
       :host > label {
-        grid-column: span 3;
+        grid-column: 1 / 9;
         order: 1;
 
         text-align: right;
@@ -148,17 +148,37 @@ OxPropertyEditor.styles = [
 
       :host > input[type='checkbox'] ~ label,
       :host > ox-checkbox ~ label {
-        grid-column: span 6;
+        grid-column: 12 / -1;
         order: 2;
 
         text-align: left;
       }
 
+      #editor,
       select,
-      ox-select,
       input:not([type='checkbox']) {
         border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
+        color: var(--md-sys-color-on-secondary-container);
+        background-color: field;
+        border-radius: var(--spacing-small);
+        outline: none;
+      }
+
+      ox-buttons-radio#editor {
+        display: flex;
+        align-items: center;
+        margin: var(--spacing-tiny);
+        gap: var(--spacing-tiny);
+        justify-content: space-between;
+        background-color: transparent;
+        border: none;
+      }
+
+      ox-buttons-radio#editor > * {
+        flex: 1;
+        border-radius: 0;
+        border-bottom: 2px solid #fff;
+        text-align: center;
       }
 
       :host > legend {
@@ -170,13 +190,14 @@ OxPropertyEditor.styles = [
         text-transform: capitalize;
       }
 
-      :host > [fullwidth] {
+      :host > [fullwidth],
+      :host > .fullwidth {
         grid-column: 1 / -1;
       }
 
       :host > input[type='checkbox'],
       :host > ox-checkbox {
-        grid-column: span 4;
+        grid-column: 9 / 11;
         order: 1;
 
         justify-self: end;
@@ -187,7 +208,7 @@ OxPropertyEditor.styles = [
       ox-input-data,
       .multiline-input {
         min-height: 300px;
-        border-radius: var(--spacing-small);
+        border-radius: var(--spacing-smail);
       }
 
       :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":";AAAA,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAI9C,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAsH6B,eAAU,GAAgC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAMnE,cAAS,GAAY,KAAK,CAAA;QAoDzB,YAAO,GAAG,KAAK,CAAA;IA0D1B,CAAC;IAvOQ,MAAM,CAAC,QAAQ,CAAC,KAAiC;QACtD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA;QAC/C,CAAC,CAAC,CAAA;IACJ,CAAC;IAEM,MAAM,CAAC,SAAS,CAAC,IAAY;QAClC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IACxC,CAAC;IAmHD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;IAED,eAAe;QACb,OAAO,OAAO,IAAI,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAA;IAClG,CAAC;IAED,MAAM;;QACJ,MAAM,EAAE,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;QAC3D,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAE/C,OAAO,IAAI,CAAA;QACP,GAAG,IAAI,CAAC;YACR,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC;YAClC,CAAC,CAAC,IAAI,CAAA;8BACgB,MAAA,IAAI,CAAC,MAAM,0CAAE,SAAS;gBACpC,IAAI,KAAK,CAAC,GAAG,CAAC;iBACb,IAAI,CAAC,EAAE,CAAC;iBACR,GAAG,CACF,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA,2BAA2B,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAG,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS,CACnG;;WAEN;QACH,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;;;uBAGS,GAAG,EAAE;gBACZ,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAE,CAAA;gBAC5D,MAAM,eAAe,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;gBAE1D,IAAI,eAAe,EAAE,CAAC;oBACpB,CAAC;oBAAC,UAA0B,CAAC,KAAK,EAAE,CAAA;gBACtC,CAAC;YACH,CAAC;;+BAEgB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK;;WAElE;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAID,YAAY,CAAC,iBAAsB;QACjC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,OAAO,KAAK,CAAA;QACd,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACpC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACtB,CAAC;QAED,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,aAAa;QACf,OAAO,OAAO,CAAA;IAChB,CAAC;IAED,MAAM,CAAC,CAAM;QACX,OAAO,SAAS,CAAC,CAAC,CAAC,CAAA;IACrB,CAAC;IAED,eAAe,CAAC,KAAa;QAC3B,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,OAAO,KAAK,CAAA;QAE9C,OAAO,QAAQ,GAAG,KAAK,CAAA;IACzB,CAAC;IAED,aAAa,CAAC,CAAQ;;QACpB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAE3C,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE,CAAA;QAChD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAE,MAAc,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAA;QAE9D,IAAI,GAAG,GAAG,CAAC,EAAE,CAAC;YACZ,MAAM,KAAK,GAAG,MAAM,CAAC,MAAA,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,0CAAE,YAAY,CAAC,YAAY,CAAC,CAAC,CAAA;YAChF,IAAI,KAAK,GAAU,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;YACrE,KAAK,CAAC,KAAK,CAAC,GAAG,KAAK,CAAA;YACpB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAEhF,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC;IAED,OAAO,CAAC,KAAU;QAChB,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;YACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;QACxB,CAAC;IACH,CAAC;;AAxOM,yBAAQ,GAA+B,EAAE,AAAjC,CAAiC;AAYzC,uBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6FF;CACF,AA/FY,CA+FZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAW;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAc;AACmB;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAc;AAC7C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAU;AACV;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAiD;AAC/C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsC;AACrC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAc;AACZ;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAmB;AAsDtC;IAAR,KAAK,EAAE;iDAAgB","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.js'\n\nimport { EditorProperty, PropertySpec } from './types.js'\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, var(--md-sys-color-on-secondary-container));\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        border-radius: var(--spacing-small);\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  getDefaultValue() {\n    return typeof this.defaultValue == 'function' ? this.defaultValue.call(this) : this.defaultValue\n  }\n\n  render() {\n    const { value = this.getDefaultValue(), 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\n              for=\"editor\"\n              @click=${() => {\n                const forElement = this.renderRoot.querySelector('#editor')!\n                const isCustomElement = forElement?.nodeName.includes('-')\n\n                if (isCustomElement) {\n                  ;(forElement as HTMLElement).click()\n                }\n              }}\n            >\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.js'\n\nimport { EditorProperty, PropertySpec } from './types.js'\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(24, 1fr);\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n\n        align-items: center;\n\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      :host > * {\n        box-sizing: border-box;\n\n        grid-column: 9 / -1;\n        order: 2;\n\n        align-self: stretch;\n      }\n\n      :host > label {\n        grid-column: 1 / 9;\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: 12 / -1;\n        order: 2;\n\n        text-align: left;\n      }\n\n      #editor,\n      select,\n      input:not([type='checkbox']) {\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: field;\n        border-radius: var(--spacing-small);\n        outline: none;\n      }\n\n      ox-buttons-radio#editor {\n        display: flex;\n        align-items: center;\n        margin: var(--spacing-tiny);\n        gap: var(--spacing-tiny);\n        justify-content: space-between;\n        background-color: transparent;\n        border: none;\n      }\n\n      ox-buttons-radio#editor > * {\n        flex: 1;\n        border-radius: 0;\n        border-bottom: 2px solid #fff;\n        text-align: center;\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      :host > .fullwidth {\n        grid-column: 1 / -1;\n      }\n\n      :host > input[type='checkbox'],\n      :host > ox-checkbox {\n        grid-column: 9 / 11;\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        border-radius: var(--spacing-smail);\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  getDefaultValue() {\n    return typeof this.defaultValue == 'function' ? this.defaultValue.call(this) : this.defaultValue\n  }\n\n  render() {\n    const { value = this.getDefaultValue(), 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\n              for=\"editor\"\n              @click=${() => {\n                const forElement = this.renderRoot.querySelector('#editor')!\n                const isCustomElement = forElement?.nodeName.includes('-')\n\n                if (isCustomElement) {\n                  ;(forElement as HTMLElement).click()\n                }\n              }}\n            >\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/stories/ox-properties-dynamic-view.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
 import '../src/ox-property-editor-3axis.js';
 import '../src/ox-property-editor-3dish.js';
 import '../src/ox-property-editor-angle.js';
@@ -268,7 +269,29 @@ const value = {
     }
 };
 const Template = () => html `
-  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+  <link href="/themes/help-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"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
 
   <link
     href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"

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

@@ -1 +1 @@
-{"version":3,"file":"ox-properties-dynamic-view.stories.js","sourceRoot":"","sources":["../../stories/ox-properties-dynamic-view.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-datetime.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'\nimport '../src/ox-property-editor-signature.js'\n\nimport '../src/ox-properties-dynamic-view.js'\n\nimport { OxPropertyEditor } from '../src/ox-property-editor.js'\nimport { PropertySpec } from '../src/types.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  datetime: 'ox-property-editor-datetime',\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  signature: 'ox-property-editor-signature',\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: 'datetime',\n    label: 'DT',\n    name: 'DT'\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    styles: {\n      flex: '1'\n    }\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: 'signature',\n    label: 'ST',\n    name: 'ST'\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] as PropertySpec[]\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  ST: 'data:image/png;base64,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',\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"]}
+{"version":3,"file":"ox-properties-dynamic-view.stories.js","sourceRoot":"","sources":["../../stories/ox-properties-dynamic-view.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\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-datetime.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'\nimport '../src/ox-property-editor-signature.js'\n\nimport '../src/ox-properties-dynamic-view.js'\n\nimport { OxPropertyEditor } from '../src/ox-property-editor.js'\nimport { PropertySpec } from '../src/types.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  datetime: 'ox-property-editor-datetime',\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  signature: 'ox-property-editor-signature',\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: 'datetime',\n    label: 'DT',\n    name: 'DT'\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    styles: {\n      flex: '1'\n    }\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: 'signature',\n    label: 'ST',\n    name: 'ST'\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] as PropertySpec[]\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  ST: 'data:image/png;base64,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',\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=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/help-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  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\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"]}