@operato/property-panel 9.0.0-beta.14

package/dist/src/property-panel/styles/styles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/help/ox-title-with-help.js';
+import '@operato/popup/ox-popup-list.js';
+import '@operato/input/ox-input-range.js';
+import '@operato/input/ox-input-color.js';
+import '@operato/input/ox-select.js';
+import '@operato/font/ox-font-selector.js';
+import '@operato/i18n/ox-i18n.js';
+import '../../input/ox-input-fill-style.js';
+import { Component } from '@hatiolab/things-scene';
+import { AbstractProperty } from '../abstract-property.js';
+export declare class PropertyStyles extends AbstractProperty {
+    static styles: import("lit").CSSResult[];
+    value: any;
+    selected: Component[];
+    fonts: any[];
+    isLine: boolean;
+    connectedCallback(): void;
+    onButtonGroupClick(e: Event): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/property-panel/styles/styles.js

@@ -0,0 +1,269 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/help/ox-title-with-help.js';
+import '@operato/popup/ox-popup-list.js';
+import '@operato/input/ox-input-range.js';
+import '@operato/input/ox-input-color.js';
+import '@operato/input/ox-select.js';
+import '@operato/font/ox-font-selector.js';
+import '@operato/i18n/ox-i18n.js';
+import '../../input/ox-input-fill-style.js';
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { LineStyles } from '@operato/styles/line-styles.js';
+import { AbstractProperty } from '../abstract-property.js';
+export class PropertyStyles extends AbstractProperty {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this.selected = [];
+        this.fonts = [];
+        this.isLine = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
+    }
+    onButtonGroupClick(e) {
+        const target = e.target;
+        if (target.hasAttribute('value-key')) {
+            target.toggleAttribute('active');
+            target.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+    render() {
+        var { alpha = 1, fontFamily, fontSize, lineHeight, fontColor, letterSpacing, bold, italic, fillStyle, lineWidth, strokeStyle, lineDash = 'solid', lineCap, lineJoin, begin = 'none', beginSize = 'size1', end = 'none', endSize = 'size1' } = this.value || {};
+        return html `
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/styles/opacity" msgid="label.opacity">opacity</ox-title-with-help>
+        </legend>
+        <ox-input-range min="0" max="1" step="0.1" value-key="alpha" .value=${alpha} editable> </ox-input-range>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/styles/text-style" msgid="label.text-style"
+            >text style</ox-title-with-help
+          >
+        </legend>
+
+        <div class="property-grid">
+          <label>
+            <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
+          </label>
+
+          <ox-font-selector class="custom-editor" value-key="fontFamily" .value=${fontFamily}></ox-font-selector>
+
+          <label class="property-onethird-label icon-only-label"><md-icon>format_size</md-icon></label>
+          <input type="number" value-key="fontSize" .value=${fontSize} class="property-onethird-input" />
+
+          <label class="property-onethird-label icon-only-label"><md-icon>format_line_spacing</md-icon></label>
+          <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-onethird-input" />
+
+          <label class="property-onethird-label icon-only-label"><md-icon>format_letter_spacing</md-icon></label>
+          <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="property-onethird-input" />
+
+          <label class="property-half-label icon-only-label"><md-icon>format_color_text</md-icon></label>
+          <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
+
+          <label class="property-half-label"><md-icon>format_shapes</md-icon></label>
+          <div class="property-half-input btn-group" @click=${this.onButtonGroupClick}>
+            <md-icon value-key="bold" ?active=${bold}>format_bold</md-icon>
+            <md-icon value-key="italic" ?active=${italic}>format_italic</md-icon>
+          </div>
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/styles/fill-style" msgid="label.fill-style"
+            >fill style</ox-title-with-help
+          >
+        </legend>
+
+        <ox-input-fill-style value-key="fillStyle" .value=${fillStyle}> </ox-input-fill-style>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help msgid="label.line-style" topic="board-modeller/styles/line-style"></ox-title-with-help>
+        </legend>
+
+        <div class="property-grid">
+          <label class="property-half-label icon-only-label"><md-icon>line_weight</md-icon></label>
+          <input type="number" value-key="lineWidth" .value=${lineWidth} class="property-half-input" />
+
+          <label class="property-half-label icon-only-label"><md-icon>border_color</md-icon></label>
+          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
+
+          <label>
+            <ox-i18n msgid="label.line-type">line type</ox-i18n>
+          </label>
+          <ox-select value-key="lineDash" .value=${lineDash} class="custom-editor">
+            <div class="line-type ${lineDash}" slot="label"></div>
+            <ox-popup-list align-left nowrap>
+              <style>
+                ${LineStyles.cssText}
+              </style>
+              <div class="line-type solid" value="solid" option></div>
+              <div class="line-type round-dot" value="round-dot" option></div>
+              <div class="line-type square-dot" value="square-dot" option></div>
+              <div class="line-type dash" value="dash" option></div>
+              <div class="line-type dash-dot" value="dash-dot" option></div>
+              <div class="line-type long-dash" value="long-dash" option></div>
+              <div class="line-type long-dash-dot" value="long-dash-dot" option></div>
+              <div class="line-type long-dash-dot-dot" value="long-dash-dot-dot" option></div>
+            </ox-popup-list>
+          </ox-select>
+
+          <label>
+            <ox-i18n msgid="label.cap-type">cap type</ox-i18n>
+          </label>
+          <select value-key="lineCap" .value=${lineCap}>
+            <option value="butt"><ox-i18n msgid="label.square">square</ox-i18n></option>
+            <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
+          </select>
+
+          <label>
+            <ox-i18n msgid="label.join-type">join type</ox-i18n>
+          </label>
+          <select value-key="lineJoin" .value=${lineJoin}>
+            <option value="miter"><ox-i18n msgid="label.miter">miter</ox-i18n></option>
+            <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
+            <option value="bevel"><ox-i18n msgid="label.bevel">bevel</ox-i18n></option>
+          </select>
+
+          ${this.isLine
+            ? html `
+                <label>
+                  <ox-i18n msgid="label.begin-type">begin type</ox-i18n>
+                </label>
+                <ox-select value-key="begin" .value=${begin} class="custom-editor">
+                  <div class="arrow-type ${begin ? `begin-${begin}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type begin-none" value="none" option></div>
+                    <div class="arrow-type begin-arrow" value="arrow" option></div>
+                    <div class="arrow-type begin-open-arrow" value="open-arrow" option></div>
+                    <div class="arrow-type begin-sharp-arrow" value="sharp-arrow" option></div>
+                    <div class="arrow-type begin-diamond" value="diamond" option></div>
+                    <div class="arrow-type begin-oval" value="oval" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
+                  <ox-i18n msgid="label.begin-size">begin size</ox-i18n>
+                </label>
+                <ox-select value-key="beginSize" .value=${beginSize} class="custom-editor">
+                  <div class="arrow-type ${beginSize ? `begin-${beginSize}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type begin-size1" value="size1" option></div>
+                    <div class="arrow-type begin-size2" value="size2" option></div>
+                    <div class="arrow-type begin-size3" value="size3" option></div>
+                    <div class="arrow-type begin-size4" value="size4" option></div>
+                    <div class="arrow-type begin-size5" value="size5" option></div>
+                    <div class="arrow-type begin-size6" value="size6" option></div>
+                    <div class="arrow-type begin-size7" value="size7" option></div>
+                    <div class="arrow-type begin-size8" value="size8" option></div>
+                    <div class="arrow-type begin-size9" value="size9" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
+                  <ox-i18n msgid="label.end-type">end type</ox-i18n>
+                </label>
+                <ox-select value-key="end" .value=${end} class="custom-editor">
+                  <div class="arrow-type ${end ? `end-${end}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type end-none" value="none" option></div>
+                    <div class="arrow-type end-arrow" value="arrow" option></div>
+                    <div class="arrow-type end-open-arrow" value="open-arrow" option></div>
+                    <div class="arrow-type end-sharp-arrow" value="sharp-arrow" option></div>
+                    <div class="arrow-type end-diamond" value="diamond" option></div>
+                    <div class="arrow-type end-oval" value="oval" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
+                  <ox-i18n msgid="label.end-size">end size</ox-i18n>
+                </label>
+                <ox-select value-key="endSize" .value=${endSize} class="custom-editor">
+                  <div class="arrow-type ${endSize ? `end-${endSize}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type end-size1" value="size1" option></div>
+                    <div class="arrow-type end-size2" value="size2" option></div>
+                    <div class="arrow-type end-size3" value="size3" option></div>
+                    <div class="arrow-type end-size4" value="size4" option></div>
+                    <div class="arrow-type end-size5" value="size5" option></div>
+                    <div class="arrow-type end-size6" value="size6" option></div>
+                    <div class="arrow-type end-size7" value="size7" option></div>
+                    <div class="arrow-type end-size8" value="size8" option></div>
+                    <div class="arrow-type end-size9" value="size9" option></div>
+                  </ox-popup-list>
+                </ox-select>
+              `
+            : html ``}
+        </div>
+      </fieldset>
+    `;
+    }
+}
+PropertyStyles.styles = [
+    PropertyGridStyles,
+    LineStyles,
+    css `
+      ox-input-range {
+        width: 100%;
+      }
+
+      .btn-group {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+      }
+
+      .btn-group * {
+        width: 30px;
+        height: 24px;
+        min-width: initial;
+        border-radius: 0;
+        border-bottom: 2px solid #fff;
+      }
+
+      .btn-group [active] {
+        border-bottom: 2px solid #f2471c;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyStyles.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], PropertyStyles.prototype, "selected", void 0);
+__decorate([
+    property({ type: Array })
+], PropertyStyles.prototype, "fonts", void 0);
+__decorate([
+    property({ type: Boolean })
+], PropertyStyles.prototype, "isLine", void 0);
+//# sourceMappingURL=styles.js.map

package/dist/src/property-panel/styles/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/property-panel/styles/styles.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/help/ox-title-with-help.js'\nimport '@operato/popup/ox-popup-list.js'\nimport '@operato/input/ox-input-range.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-select.js'\nimport '@operato/font/ox-font-selector.js'\nimport '@operato/i18n/ox-i18n.js'\nimport '../../input/ox-input-fill-style.js'\n\nimport { css, html, nothing } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Component } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\nimport { LineStyles } from '@operato/styles/line-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nexport class PropertyStyles extends AbstractProperty {\n  static styles = [\n    PropertyGridStyles,\n    LineStyles,\n    css`\n      ox-input-range {\n        width: 100%;\n      }\n\n      .btn-group {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n      }\n\n      .btn-group * {\n        width: 30px;\n        height: 24px;\n        min-width: initial;\n        border-radius: 0;\n        border-bottom: 2px solid #fff;\n      }\n\n      .btn-group [active] {\n        border-bottom: 2px solid #f2471c;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value: any = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Boolean }) isLine: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  onButtonGroupClick(e: Event) {\n    const target = e.target as HTMLElement\n\n    if (target.hasAttribute('value-key')) {\n      target.toggleAttribute('active')\n\n      target.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true\n        })\n      )\n    }\n  }\n\n  render() {\n    var {\n      alpha = 1,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      fontColor,\n      letterSpacing,\n      bold,\n      italic,\n      fillStyle,\n      lineWidth,\n      strokeStyle,\n      lineDash = 'solid',\n      lineCap,\n      lineJoin,\n      begin = 'none',\n      beginSize = 'size1',\n      end = 'none',\n      endSize = 'size1'\n    } = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-title-with-help topic=\"board-modeller/styles/opacity\" msgid=\"label.opacity\">opacity</ox-title-with-help>\n        </legend>\n        <ox-input-range min=\"0\" max=\"1\" step=\"0.1\" value-key=\"alpha\" .value=${alpha} editable> </ox-input-range>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-title-with-help topic=\"board-modeller/styles/text-style\" msgid=\"label.text-style\"\n            >text style</ox-title-with-help\n          >\n        </legend>\n\n        <div class=\"property-grid\">\n          <label>\n            <ox-i18n msgid=\"label.font-family\">Font Family</ox-i18n>\n          </label>\n\n          <ox-font-selector class=\"custom-editor\" value-key=\"fontFamily\" .value=${fontFamily}></ox-font-selector>\n\n          <label class=\"property-onethird-label icon-only-label\"><md-icon>format_size</md-icon></label>\n          <input type=\"number\" value-key=\"fontSize\" .value=${fontSize} class=\"property-onethird-input\" />\n\n          <label class=\"property-onethird-label icon-only-label\"><md-icon>format_line_spacing</md-icon></label>\n          <input type=\"number\" value-key=\"lineHeight\" .value=${lineHeight} class=\"property-onethird-input\" />\n\n          <label class=\"property-onethird-label icon-only-label\"><md-icon>format_letter_spacing</md-icon></label>\n          <input type=\"number\" value-key=\"letterSpacing\" .value=${letterSpacing} class=\"property-onethird-input\" />\n\n          <label class=\"property-half-label icon-only-label\"><md-icon>format_color_text</md-icon></label>\n          <ox-input-color value-key=\"fontColor\" .value=${fontColor} class=\"property-half-input\"> </ox-input-color>\n\n          <label class=\"property-half-label\"><md-icon>format_shapes</md-icon></label>\n          <div class=\"property-half-input btn-group\" @click=${this.onButtonGroupClick}>\n            <md-icon value-key=\"bold\" ?active=${bold}>format_bold</md-icon>\n            <md-icon value-key=\"italic\" ?active=${italic}>format_italic</md-icon>\n          </div>\n        </div>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-title-with-help topic=\"board-modeller/styles/fill-style\" msgid=\"label.fill-style\"\n            >fill style</ox-title-with-help\n          >\n        </legend>\n\n        <ox-input-fill-style value-key=\"fillStyle\" .value=${fillStyle}> </ox-input-fill-style>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-title-with-help msgid=\"label.line-style\" topic=\"board-modeller/styles/line-style\"></ox-title-with-help>\n        </legend>\n\n        <div class=\"property-grid\">\n          <label class=\"property-half-label icon-only-label\"><md-icon>line_weight</md-icon></label>\n          <input type=\"number\" value-key=\"lineWidth\" .value=${lineWidth} class=\"property-half-input\" />\n\n          <label class=\"property-half-label icon-only-label\"><md-icon>border_color</md-icon></label>\n          <ox-input-color value-key=\"strokeStyle\" .value=${strokeStyle} class=\"property-half-input\"> </ox-input-color>\n\n          <label>\n            <ox-i18n msgid=\"label.line-type\">line type</ox-i18n>\n          </label>\n          <ox-select value-key=\"lineDash\" .value=${lineDash} class=\"custom-editor\">\n            <div class=\"line-type ${lineDash}\" slot=\"label\"></div>\n            <ox-popup-list align-left nowrap>\n              <style>\n                ${LineStyles.cssText}\n              </style>\n              <div class=\"line-type solid\" value=\"solid\" option></div>\n              <div class=\"line-type round-dot\" value=\"round-dot\" option></div>\n              <div class=\"line-type square-dot\" value=\"square-dot\" option></div>\n              <div class=\"line-type dash\" value=\"dash\" option></div>\n              <div class=\"line-type dash-dot\" value=\"dash-dot\" option></div>\n              <div class=\"line-type long-dash\" value=\"long-dash\" option></div>\n              <div class=\"line-type long-dash-dot\" value=\"long-dash-dot\" option></div>\n              <div class=\"line-type long-dash-dot-dot\" value=\"long-dash-dot-dot\" option></div>\n            </ox-popup-list>\n          </ox-select>\n\n          <label>\n            <ox-i18n msgid=\"label.cap-type\">cap type</ox-i18n>\n          </label>\n          <select value-key=\"lineCap\" .value=${lineCap}>\n            <option value=\"butt\"><ox-i18n msgid=\"label.square\">square</ox-i18n></option>\n            <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n          </select>\n\n          <label>\n            <ox-i18n msgid=\"label.join-type\">join type</ox-i18n>\n          </label>\n          <select value-key=\"lineJoin\" .value=${lineJoin}>\n            <option value=\"miter\"><ox-i18n msgid=\"label.miter\">miter</ox-i18n></option>\n            <option value=\"round\"><ox-i18n msgid=\"label.round\">round</ox-i18n></option>\n            <option value=\"bevel\"><ox-i18n msgid=\"label.bevel\">bevel</ox-i18n></option>\n          </select>\n\n          ${this.isLine\n            ? html`\n                <label>\n                  <ox-i18n msgid=\"label.begin-type\">begin type</ox-i18n>\n                </label>\n                <ox-select value-key=\"begin\" .value=${begin} class=\"custom-editor\">\n                  <div class=\"arrow-type ${begin ? `begin-${begin}` : nothing}\" slot=\"label\"></div>\n                  <ox-popup-list align-left nowrap>\n                    <style>\n                      ${LineStyles.cssText}\n                    </style>\n                    <div class=\"arrow-type begin-none\" value=\"none\" option></div>\n                    <div class=\"arrow-type begin-arrow\" value=\"arrow\" option></div>\n                    <div class=\"arrow-type begin-open-arrow\" value=\"open-arrow\" option></div>\n                    <div class=\"arrow-type begin-sharp-arrow\" value=\"sharp-arrow\" option></div>\n                    <div class=\"arrow-type begin-diamond\" value=\"diamond\" option></div>\n                    <div class=\"arrow-type begin-oval\" value=\"oval\" option></div>\n                  </ox-popup-list>\n                </ox-select>\n\n                <label>\n                  <ox-i18n msgid=\"label.begin-size\">begin size</ox-i18n>\n                </label>\n                <ox-select value-key=\"beginSize\" .value=${beginSize} class=\"custom-editor\">\n                  <div class=\"arrow-type ${beginSize ? `begin-${beginSize}` : nothing}\" slot=\"label\"></div>\n                  <ox-popup-list align-left nowrap>\n                    <style>\n                      ${LineStyles.cssText}\n                    </style>\n                    <div class=\"arrow-type begin-size1\" value=\"size1\" option></div>\n                    <div class=\"arrow-type begin-size2\" value=\"size2\" option></div>\n                    <div class=\"arrow-type begin-size3\" value=\"size3\" option></div>\n                    <div class=\"arrow-type begin-size4\" value=\"size4\" option></div>\n                    <div class=\"arrow-type begin-size5\" value=\"size5\" option></div>\n                    <div class=\"arrow-type begin-size6\" value=\"size6\" option></div>\n                    <div class=\"arrow-type begin-size7\" value=\"size7\" option></div>\n                    <div class=\"arrow-type begin-size8\" value=\"size8\" option></div>\n                    <div class=\"arrow-type begin-size9\" value=\"size9\" option></div>\n                  </ox-popup-list>\n                </ox-select>\n\n                <label>\n                  <ox-i18n msgid=\"label.end-type\">end type</ox-i18n>\n                </label>\n                <ox-select value-key=\"end\" .value=${end} class=\"custom-editor\">\n                  <div class=\"arrow-type ${end ? `end-${end}` : nothing}\" slot=\"label\"></div>\n                  <ox-popup-list align-left nowrap>\n                    <style>\n                      ${LineStyles.cssText}\n                    </style>\n                    <div class=\"arrow-type end-none\" value=\"none\" option></div>\n                    <div class=\"arrow-type end-arrow\" value=\"arrow\" option></div>\n                    <div class=\"arrow-type end-open-arrow\" value=\"open-arrow\" option></div>\n                    <div class=\"arrow-type end-sharp-arrow\" value=\"sharp-arrow\" option></div>\n                    <div class=\"arrow-type end-diamond\" value=\"diamond\" option></div>\n                    <div class=\"arrow-type end-oval\" value=\"oval\" option></div>\n                  </ox-popup-list>\n                </ox-select>\n\n                <label>\n                  <ox-i18n msgid=\"label.end-size\">end size</ox-i18n>\n                </label>\n                <ox-select value-key=\"endSize\" .value=${endSize} class=\"custom-editor\">\n                  <div class=\"arrow-type ${endSize ? `end-${endSize}` : nothing}\" slot=\"label\"></div>\n                  <ox-popup-list align-left nowrap>\n                    <style>\n                      ${LineStyles.cssText}\n                    </style>\n                    <div class=\"arrow-type end-size1\" value=\"size1\" option></div>\n                    <div class=\"arrow-type end-size2\" value=\"size2\" option></div>\n                    <div class=\"arrow-type end-size3\" value=\"size3\" option></div>\n                    <div class=\"arrow-type end-size4\" value=\"size4\" option></div>\n                    <div class=\"arrow-type end-size5\" value=\"size5\" option></div>\n                    <div class=\"arrow-type end-size6\" value=\"size6\" option></div>\n                    <div class=\"arrow-type end-size7\" value=\"size7\" option></div>\n                    <div class=\"arrow-type end-size8\" value=\"size8\" option></div>\n                    <div class=\"arrow-type end-size9\" value=\"size9\" option></div>\n                  </ox-popup-list>\n                </ox-select>\n              `\n            : html``}\n        </div>\n      </fieldset>\n    `\n  }\n}\n"]}

package/dist/src/types.d.ts

@@ -0,0 +1,43 @@
+import { Model } from '@hatiolab/things-scene';
+export interface PalletItem {
+    type: string;
+    description: string;
+    icon: HTMLImageElement;
+    group: string | string[];
+    model: Model;
+}
+export interface Pallet {
+    name: string;
+    templates: PalletItem[];
+}
+export type ComponentTemplate = {
+    type: string;
+    description: string;
+    group: 'line' | 'shape' | 'textAndMedia' | 'chartAndGauge' | 'table' | 'container' | 'dataSource' | 'IoT' | '3D' | 'warehouse' | 'form' | 'etc' | string;
+    icon: any;
+    model: Model;
+};
+export type ComponentGroup = {
+    name: string;
+    description: string;
+    icon: string;
+    templates: ComponentTemplate[];
+};
+export type Board = {
+    id?: string;
+    name?: string;
+    description?: string;
+    model?: any;
+    groupId?: string;
+    thumbnail?: string;
+};
+export type BoardGroup = {
+    id?: string;
+    name?: string;
+    description?: string;
+};
+export type PlayGroup = {
+    id?: string;
+    name?: string;
+    description?: string;
+};

package/dist/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Model } from '@hatiolab/things-scene'\n\nexport interface PalletItem {\n  type: string\n  description: string\n  icon: HTMLImageElement\n  group: string | string[]\n  model: Model\n}\n\nexport interface Pallet {\n  name: string\n  templates: PalletItem[]\n}\n\nexport type ComponentTemplate = {\n  type: string\n  description: string\n  group:\n    | 'line'\n    | 'shape'\n    | 'textAndMedia'\n    | 'chartAndGauge'\n    | 'table'\n    | 'container'\n    | 'dataSource'\n    | 'IoT'\n    | '3D'\n    | 'warehouse'\n    | 'form'\n    | 'etc'\n    | string\n  icon: any\n  model: Model\n}\n\nexport type ComponentGroup = {\n  name: string\n  description: string\n  icon: string\n  templates: ComponentTemplate[]\n}\n\nexport type Board = {\n  id?: string\n  name?: string\n  description?: string\n  model?: any\n  groupId?: string\n  thumbnail?: string\n}\n\nexport type BoardGroup = {\n  id?: string\n  name?: string\n  description?: string\n}\n\nexport type PlayGroup = {\n  id?: string\n  name?: string\n  description?: string\n}\n"]}

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

@@ -0,0 +1,22 @@
+import { TemplateResult } from 'lit';
+import '../src/ox-property-panel.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        model: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    model?: any;
+}
+export declare const Regular: Story<ArgTypes>;
+export declare const Custom: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -0,0 +1,121 @@
+import { html } from 'lit';
+import '../src/ox-property-panel.js';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
+export default {
+    title: 'OxPropertyPanel',
+    component: 'ox-property-panel',
+    argTypes: {
+        model: { control: 'object' }
+    }
+};
+const Template = ({ model }) => html `
+  <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>
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      text-align: center;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <ox-property-panel .model=${model}> </ox-property-panel>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    model: {
+        type: 'progress-circle',
+        cy: 100,
+        cx: 100,
+        rx: 100,
+        ry: 100,
+        value: '#{data}',
+        startAngle: 0,
+        endAngle: 360,
+        fontSize: 70,
+        strokeStyle: 'rgb(82, 199, 255)',
+        blankStrokeStyle: 'rgba(0,0,0,.2)',
+        fontFamily: 'digital',
+        fontColor: '#fff',
+        text: '#{data}',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 20,
+        lineDash: 'solid',
+        lineCap: 'butt',
+        rotation: 0,
+        paddingTop: 50,
+        shadow: {
+            left: 4,
+            top: 4,
+            blurSize: 4,
+            color: 'rgba(0,0,0,.3)'
+        },
+        paddingRight: 15,
+        textAlign: 'center',
+        textFormat: '#,##0.0',
+        data: 99,
+        mappings: [],
+        locked: false,
+        fillStyle: 'rgba(76, 187, 250, 0.2)',
+        paddingLeft: 0,
+        textBaseline: null,
+        packmanStyle: true,
+        animFromBase: true,
+        bold: true,
+        refid: 45
+    }
+};
+export const Custom = Template.bind({});
+Custom.args = {
+    model: {
+        type: 'rect',
+        left: 95.56740614334475,
+        top: 30.973680756104017,
+        width: 239.5904436860068,
+        height: 47.098976109215045,
+        fillStyle: 'red',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 1,
+        lineDash: 'solid',
+        lineCap: 'butt',
+        refid: 8,
+        rotation: 0,
+        id: 'a',
+        mappings: [
+            {
+                rule: 'value',
+                target: '(self)',
+                property: 'text'
+            }
+        ]
+    }
+};
+//# sourceMappingURL=index.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,6BAA6B,CAAA;AACpC,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAE7F,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;KAC7B;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;MAsBzD,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;8BAcD,KAAK;CAClC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE;QACL,IAAI,EAAE,iBAAiB;QACvB,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,EAAE,EAAE,GAAG;QACP,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,GAAG;QACb,QAAQ,EAAE,EAAE;QACZ,WAAW,EAAE,mBAAmB;QAChC,gBAAgB,EAAE,gBAAgB;QAClC,UAAU,EAAE,SAAS;QACrB,SAAS,EAAE,MAAM;QACjB,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,OAAO;QACjB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,EAAE;QACd,MAAM,EAAE;YACN,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,QAAQ,EAAE,CAAC;YACX,KAAK,EAAE,gBAAgB;SACxB;QACD,YAAY,EAAE,EAAE;QAChB,SAAS,EAAE,QAAQ;QACnB,UAAU,EAAE,SAAS;QACrB,IAAI,EAAE,EAAE;QACR,QAAQ,EAAE,EAAE;QACZ,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,yBAAyB;QACpC,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,EAAE;KACV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACvC,MAAM,CAAC,IAAI,GAAG;IACZ,KAAK,EAAE;QACL,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,iBAAiB;QACvB,GAAG,EAAE,kBAAkB;QACvB,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,kBAAkB;QAC1B,SAAS,EAAE,KAAK;QAChB,WAAW,EAAE,MAAM;QACnB,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,OAAO;QACjB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,CAAC;QACX,EAAE,EAAE,GAAG;QACP,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,QAAQ;gBAChB,QAAQ,EAAE,MAAM;aACjB;SACF;KACF;CACF,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport '../src/ox-property-panel.js'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nexport default {\n  title: 'OxPropertyPanel',\n  component: 'ox-property-panel',\n  argTypes: {\n    model: { control: 'object' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  model?: any\n}\n\nconst Template: Story<ArgTypes> = ({ model }: 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  <style>\n    #place {\n      width: 100%;\n      height: 500px;\n      text-align: center;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <ox-property-panel .model=${model}> </ox-property-panel>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  model: {\n    type: 'progress-circle',\n    cy: 100,\n    cx: 100,\n    rx: 100,\n    ry: 100,\n    value: '#{data}',\n    startAngle: 0,\n    endAngle: 360,\n    fontSize: 70,\n    strokeStyle: 'rgb(82, 199, 255)',\n    blankStrokeStyle: 'rgba(0,0,0,.2)',\n    fontFamily: 'digital',\n    fontColor: '#fff',\n    text: '#{data}',\n    alpha: 1,\n    hidden: false,\n    lineWidth: 20,\n    lineDash: 'solid',\n    lineCap: 'butt',\n    rotation: 0,\n    paddingTop: 50,\n    shadow: {\n      left: 4,\n      top: 4,\n      blurSize: 4,\n      color: 'rgba(0,0,0,.3)'\n    },\n    paddingRight: 15,\n    textAlign: 'center',\n    textFormat: '#,##0.0',\n    data: 99,\n    mappings: [],\n    locked: false,\n    fillStyle: 'rgba(76, 187, 250, 0.2)',\n    paddingLeft: 0,\n    textBaseline: null,\n    packmanStyle: true,\n    animFromBase: true,\n    bold: true,\n    refid: 45\n  }\n}\n\nexport const Custom = Template.bind({})\nCustom.args = {\n  model: {\n    type: 'rect',\n    left: 95.56740614334475,\n    top: 30.973680756104017,\n    width: 239.5904436860068,\n    height: 47.098976109215045,\n    fillStyle: 'red',\n    strokeStyle: '#000',\n    alpha: 1,\n    hidden: false,\n    lineWidth: 1,\n    lineDash: 'solid',\n    lineCap: 'butt',\n    refid: 8,\n    rotation: 0,\n    id: 'a',\n    mappings: [\n      {\n        rule: 'value',\n        target: '(self)',\n        property: 'text'\n      }\n    ]\n  }\n}\n"]}

package/dist/stories/input-table-property.stories.d.ts

@@ -0,0 +1,21 @@
+import { TemplateResult } from 'lit';
+import '../src/input/ox-input-table.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    value?: any;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/input-table-property.stories.js

@@ -0,0 +1,84 @@
+import { html } from 'lit';
+import '../src/input/ox-input-table.js';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
+export default {
+    title: 'OxInputTableProperty',
+    component: 'ox-input-table',
+    argTypes: {
+        value: { control: 'object' }
+    }
+};
+const Template = ({ value }) => html `
+  <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>
+
+  <style>
+    #place {
+      width: 100%;
+      height: 500px;
+      text-align: center;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <ox-input-table .value=${value}> </ox-input-table>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    value: {
+        type: 'table-cell',
+        left: 290.42944785276075,
+        top: 0,
+        width: 96.80981595092024,
+        height: 62.02453987730057,
+        textWrap: true,
+        border: {
+            top: {
+                strokeStyle: '#999',
+                lineDash: 'solid',
+                lineWidth: 1
+            },
+            left: {
+                strokeStyle: '#999',
+                lineDash: 'solid',
+                lineWidth: 1
+            },
+            bottom: {
+                strokeStyle: '#999',
+                lineDash: 'solid',
+                lineWidth: 1
+            },
+            right: {
+                strokeStyle: '#999',
+                lineDash: 'solid',
+                lineWidth: 1
+            }
+        },
+        refid: 12,
+        dataIndex: 0
+    }
+};
+//# sourceMappingURL=input-table-property.stories.js.map