@operato/chart 2.0.0-beta.25

package/dist/src/editors/input-chart-multi-series-abstract.js

@@ -0,0 +1,418 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { InputChartAbstract } from './input-chart-abstract';
+export class InputChartMultiSeriesAbstract extends InputChartAbstract {
+    static { this.styles = [...InputChartAbstract.styles]; }
+    get tabContainer() {
+        return this.tabs;
+    }
+    firstUpdated() {
+        this.tabContainer?.addEventListener('scroll', e => {
+            this._onTabScroll(e);
+        });
+    }
+    subTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <input id="multi-axis" type="checkbox" value-key="multiAxis" ?checked=${configurer.multiAxis} />
+      <label for="multi-axis"> <ox-i18n msgid="label.multi-axis">Multi Axis</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.series">Series</ox-i18n></legend>
+
+      ${this.multiSeriesTabTemplate()}
+
+      <legend><ox-i18n msgid="label.x-axes">X Axes</ox-i18n></legend>
+
+      <label for="label-data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+      <input id="label-data-key" type="text" value-key="labelDataKey" .value=${configurer.labelDataKey || ''} />
+
+      <label for="axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input id="axis-title" type="text" value-key="xAxes0.axisTitle" .value=${configurer.xAxes0.axisTitle || ''} />
+
+      <label for="x-axes0-thickness"> <ox-i18n msgid="label.thickness">Thickness</ox-i18n> </label>
+      <input
+        id="x-axes0-thickness"
+        type="number"
+        value-key="xAxes0.barPercentage"
+        .value=${configurer.xAxes0.barPercentage || 0}
+      />
+
+      <input
+        for="grid-line"
+        type="checkbox"
+        value-key="value.options.xGridLine"
+        ?checked=${configurer.config.options?.xGridLine}
+      />
+      <label id="grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        for="x-axes0-ticks-display"
+        type="checkbox"
+        value-key="xAxes0.ticks.display"
+        ?checked=${configurer.xAxes0.ticks?.display}
+      />
+      <label id="x-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      <legend><ox-i18n msgid="label.y-axes">Y Axes</ox-i18n></legend>
+
+      <label for="y-axes0-axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+      <input
+        id="y-axes0-axis-title"
+        type="text"
+        value-key="yAxes0.axisTitle"
+        .value=${configurer.yAxes0.axisTitle || ''}
+      />
+
+      <input
+        id="y-axes0-ticks-automin"
+        type="checkbox"
+        value-key="yAxes0.ticks.autoMin"
+        ?checked=${configurer.yAxes0.ticks?.autoMin}
+      />
+      <label for="y-axes0-ticks-automin"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
+
+      <input
+        id="y-axes0-ticks-automax"
+        type="checkbox"
+        value-key="yAxes0.ticks.autoMax"
+        ?checked=${configurer.yAxes0.ticks?.autoMax}
+      />
+      <label for="y-axes0-ticks-automax"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
+
+      ${!configurer.yAxes0.ticks?.autoMin
+            ? html `
+            <label for="y-axes0-ticks-min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
+            <input
+              id="y-axes0-ticks-min"
+              type="number"
+              value-key="yAxes0.ticks.min"
+              .value=${configurer.yAxes0.ticks?.min}
+            />
+          `
+            : html ``}
+      ${!configurer.yAxes0.ticks?.autoMax
+            ? html `
+            <label for="y-axes0-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
+            <input
+              id="y-axes0-ticks-max"
+              type="number"
+              value-key="yAxes0.ticks.max"
+              .value=${configurer.yAxes0.ticks?.max}
+            />
+          `
+            : html ``}
+
+      <label for="y-axes0-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
+      <input
+        id="y-axes0-ticks-step-size"
+        type="number"
+        value-key="yAxes0.ticks.stepSize"
+        .value=${configurer.yAxes0.ticks?.stepSize}
+      />
+
+      <input
+        id="y-grid-line"
+        type="checkbox"
+        value-key="value.options.yGridLine"
+        ?checked=${configurer.config.options?.yGridLine}
+      />
+      <label for="y-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+      <input
+        id="y-axes0-ticks-display"
+        type="checkbox"
+        value-key="yAxes0.ticks.display"
+        ?checked=${configurer.yAxes0.ticks?.display}
+      />
+      <label for="y-axes0-ticks-display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+
+      ${configurer.config.options?.multiAxis
+            ? html `
+            <legend><ox-i18n msgid="label.y-2nd-axes">Y 2nd Axes</ox-i18n></legend>
+
+            <label for="y-axes1.axis-title"> <ox-i18n msgid="label.title">Title</ox-i18n> </label>
+            <input
+              id="y-axes1.axis-title"
+              type="text"
+              value-key="yAxes1.axisTitle"
+              .value=${configurer.yAxes1.axisTitle || ''}
+            />
+
+            <input
+              id="axis-min-auto"
+              type="checkbox"
+              value-key="yAxes1.ticks.autoMin"
+              ?checked=${configurer.yAxes1.ticks?.autoMin}
+            />
+            <label for="axis-min-auto"> <ox-i18n msgid="label.axis-min-auto">Min Auto</ox-i18n> </label>
+
+            <input
+              id="axis-max-auto"
+              type="checkbox"
+              value-key="yAxes1.ticks.autoMax"
+              ?checked=${configurer.yAxes1.ticks?.autoMax}
+            />
+            <label for="axis-max-auto"> <ox-i18n msgid="label.axis-max-auto">Max Auto</ox-i18n> </label>
+
+            ${!configurer.yAxes1.ticks?.autoMin
+                ? html `
+                  <label for="y-axes1.ticks.min"> <ox-i18n msgid="label.axis-min">Min</ox-i18n> </label>
+                  <input
+                    id="y-axes1.ticks.min"
+                    type="number"
+                    value-key="yAxes1.ticks.min"
+                    .value=${configurer.yAxes1.ticks?.min}
+                  />
+                `
+                : html ``}
+            ${!configurer.yAxes1.ticks?.autoMax
+                ? html `
+                  <label for="y-axes1-ticks-max"> <ox-i18n msgid="label.axis-max">Max</ox-i18n> </label>
+                  <input
+                    id="y-axes1-ticks-max"
+                    type="number"
+                    value-key="yAxes1.ticks.max"
+                    .value=${configurer.yAxes1.ticks?.max}
+                  />
+                `
+                : html ``}
+
+            <label for="y-axes1-ticks-step-size"> <ox-i18n msgid="label.axis-step-size">StepSize</ox-i18n> </label>
+            <input
+              id="y-axes1-ticks-step-size"
+              type="number"
+              value-key="yAxes1.ticks.stepSize"
+              .value=${configurer.yAxes1.ticks?.stepSize}
+            />
+
+            <input
+              id="y2nd-grid-line"
+              type="checkbox"
+              value-key="value.options.y2ndGridLine"
+              ?checked=${configurer.config.options.y2ndGridLine}
+            />
+            <label for="y2nd-grid-line"> <ox-i18n msgid="label.grid-line">Grid Line</ox-i18n> </label>
+
+            <input
+              id="y-axes1.ticks.display"
+              type="checkbox"
+              value-key="yAxes1.ticks.display"
+              ?checked=${configurer.yAxes1.ticks?.display}
+            />
+            <label for="y-axes1.ticks.display"> <ox-i18n msgid="label.display-tick">Display Tick</ox-i18n> </label>
+          `
+            : html ``}
+    `;
+    }
+    multiSeriesTabTemplate() {
+        const configurer = this.configurer;
+        return html `
+      <div id="series-properties-container" fullwidth>
+        <div id="tab-header">
+          <md-icon
+            id="tab-nav-left-button"
+            @tap=${(e) => {
+            this._onTabScrollNavLeft(e);
+        }}
+            disabled
+            >chevron_left</md-icon
+          >
+          <div
+            id="tabs"
+            @change=${(e) => {
+            configurer.currentSeriesIndex = e.target.activeTabIndex;
+        }}
+            active-tab-index=${configurer.currentSeriesIndex}
+            fit-container
+          >
+            ${configurer.datasets.map((dataset, index) => html `
+                <div
+                  data-series=${index + 1}
+                  data-tab-index=${index}
+                  tab
+                  ?selected=${index == configurer.currentSeriesIndex}
+                  @click=${(e) => {
+            const target = e.target;
+            this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')));
+            this.value = { ...this.configurer.value };
+        }}
+                >
+                  ${index + 1}
+                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)
+            ? html ` <md-icon @tap="${(e) => this.onTapRemoveCurrentTab(e)}"> close </md-icon> `
+            : html ``}
+                </div>
+              `)}
+          </div>
+          <md-icon
+            id="tab-nav-right-button"
+            @click=${(e) => {
+            this._onTabScrollNavRight(e);
+        }}
+            disabled
+            >chevron_right</md-icon
+          >
+        </div>
+        <div id="add-series-button-container">
+          <md-icon id="add-series-button" @tap=${(e) => this.onTapAddTab(e)}>add</md-icon>
+        </div>
+
+        <div class="tab-content">
+          <label for="data-key"> <ox-i18n msgid="label.data-key">Data Key</ox-i18n> </label>
+          <input id="data-key" type="text" value-key="dataKey" .value=${configurer.dataKey || ''} />
+
+          ${configurer.config.type == 'mixed'
+            ? html `
+                <label for="series-type"> <ox-i18n msgid="label.series-type">type</ox-i18n> </label>
+                <select
+                  id="series-type"
+                  class="select-content"
+                  value-key="series.type"
+                  .value=${configurer.series.type || ''}
+                >
+                  <option value="bar" selected>bar</option>
+                  <option value="line">line</option>
+                </select>
+              `
+            : html ``}
+
+          <label for="series-label"> <ox-i18n msgid="label.label">label</ox-i18n> </label>
+          <input id="series-label" type="text" value-key="series.label" .value=${configurer.series.label} />
+
+          ${configurer.series.type == 'line'
+            ? html `
+                <label for="series-line-tension"> <ox-i18n msgid="label.line-tension">line tension</ox-i18n> </label>
+                <select
+                  id="series-line-tension"
+                  class="select-content"
+                  value-key="series.lineTension"
+                  .value=${configurer.series.lineTension || 0}
+                >
+                  <option value="0.4">smooth</option>
+                  <option value="0">angled</option>
+                </select>
+              `
+            : html ``}
+          ${configurer.series.type == 'line'
+            ? html `
+                <label for="series-border-width"> <ox-i18n msgid="label.border-width">border width</ox-i18n> </label>
+                <input
+                  id="series-border-width"
+                  type="number"
+                  value-key="series.borderWidth"
+                  .value=${configurer.series.borderWidth || 0}
+                />
+              `
+            : html ``}
+
+          <label for="series-color"> <ox-i18n msgid="label.color">color</ox-i18n> </label>
+          <ox-input-color id="series-color" value-key="color" .value=${configurer.color}></ox-input-color>
+
+          ${configurer.series.type == 'line'
+            ? html `
+                <label for="series-point-style"> <ox-i18n msgid="label.point-shape">point shape</ox-i18n> </label>
+                <select
+                  id="series-point-style"
+                  class="select-content"
+                  value-key="series.pointStyle"
+                  .value=${configurer.series.pointStyle || ''}
+                >
+                  <option value="circle">⚬</option>
+                  <option value="triangle">▵</option>
+                  <option value="rect">□</option>
+                  <option value="rectRot">◇</option>
+                  <option value="cross">+</option>
+                  <option value="crossRot">⨉</option>
+                  <option value="star">✱</option>
+                  <option value="line">―</option>
+                  <option value="dash">┄</option>
+                </select>
+
+                <label for="series-point-radius"> <ox-i18n msgid="label.point-size">point size</ox-i18n> </label>
+                <input
+                  id="series-point-radius"
+                  type="number"
+                  value-key="series.pointRadius"
+                  .value=${configurer.series.pointRadius || 0}
+                />
+              `
+            : html ``} <label for="series-stack"> <ox-i18n msgid="label.stack-group">Stack group</ox-i18n> </label>
+          <input id="series-stack" type="text" value-key="series.stack" .value=${configurer.series.stack || ''} />
+          ${configurer.series.type == 'line'
+            ? html `
+                <input id="seires-fill" type="checkbox" value-key="series.fill" ?checked=${configurer.series.fill} />
+                <label for="seires-fill"> <ox-i18n msgid="label.fill">fill</ox-i18n> </label>
+              `
+            : html ``}
+          ${configurer.multiAxis
+            ? html `
+                <label for="series-y-axis-id"> <ox-i18n msgid="label.target-axis">target axis</ox-i18n> </label>
+                <select
+                  id="series-y-axis-id"
+                  class="select-content"
+                  value-key="series.yAxisID"
+                  .value=${configurer.series.yAxisID || ''}
+                >
+                  <option value="left">left</option>
+                  <option value="right">right</option>
+                </select>
+              `
+            : html ``}
+          ${this.displayValueTemplate()}
+        </div>
+      </div>
+    `;
+    }
+    _onTabScroll(e) {
+        if (!this.tabContainer) {
+            return;
+        }
+        if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {
+            this.tabNavLeftButton.setAttribute('disabled', '');
+            this.tabNavRightButton.setAttribute('disabled', '');
+        }
+        // left-end
+        else if (this.tabContainer.scrollLeft == 0) {
+            this.tabNavLeftButton.setAttribute('disabled', '');
+            this.tabNavRightButton.removeAttribute('disabled');
+        }
+        // right-end
+        else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {
+            this.tabNavLeftButton.removeAttribute('disabled');
+            this.tabNavRightButton.setAttribute('disabled', '');
+        }
+        else {
+            this.tabNavLeftButton.removeAttribute('disabled');
+            this.tabNavRightButton.removeAttribute('disabled');
+        }
+    }
+    _onTabScrollNavLeft(e) {
+        if (!this.tabContainer) {
+            return;
+        }
+        this.tabContainer.style.scrollBehavior = 'smooth';
+        this.tabContainer.scrollLeft -= this.tabContainer.clientWidth;
+        this.tabContainer.style.scrollBehavior = 'auto';
+    }
+    _onTabScrollNavRight(e) {
+        if (!this.tabContainer) {
+            return;
+        }
+        this.tabContainer.style.scrollBehavior = 'smooth';
+        this.tabContainer.scrollLeft += this.tabContainer.clientWidth;
+        this.tabContainer.style.scrollBehavior = 'auto';
+    }
+}
+__decorate([
+    query('#tabs')
+], InputChartMultiSeriesAbstract.prototype, "tabs", void 0);
+__decorate([
+    query('#tab-nav-left-button')
+], InputChartMultiSeriesAbstract.prototype, "tabNavLeftButton", void 0);
+__decorate([
+    query('#tab-nav-right-button')
+], InputChartMultiSeriesAbstract.prototype, "tabNavRightButton", void 0);
+//# sourceMappingURL=input-chart-multi-series-abstract.js.map

package/dist/src/editors/input-chart-multi-series-abstract.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-chart-multi-series-abstract.js","sourceRoot":"","sources":["../../../src/editors/input-chart-multi-series-abstract.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html } from 'lit'\nimport { query } from 'lit/decorators.js'\n\nimport { MdIcon } from '@material/web/icon/icon.js'\n\nimport { InputChartAbstract } from './input-chart-abstract'\n\nexport class InputChartMultiSeriesAbstract extends InputChartAbstract {\n  static styles = [...InputChartAbstract.styles]\n\n  @query('#tabs') tabs!: HTMLElement\n  @query('#tab-nav-left-button') tabNavLeftButton!: MdIcon\n  @query('#tab-nav-right-button') tabNavRightButton!: MdIcon\n\n  get tabContainer(): HTMLElement | null | undefined {\n    return this.tabs\n  }\n\n  firstUpdated() {\n    this.tabContainer?.addEventListener('scroll', e => {\n      this._onTabScroll(e)\n    })\n  }\n\n  subTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <input id=\"multi-axis\" type=\"checkbox\" value-key=\"multiAxis\" ?checked=${configurer.multiAxis} />\n      <label for=\"multi-axis\"> <ox-i18n msgid=\"label.multi-axis\">Multi Axis</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.series\">Series</ox-i18n></legend>\n\n      ${this.multiSeriesTabTemplate()}\n\n      <legend><ox-i18n msgid=\"label.x-axes\">X Axes</ox-i18n></legend>\n\n      <label for=\"label-data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n      <input id=\"label-data-key\" type=\"text\" value-key=\"labelDataKey\" .value=${configurer.labelDataKey || ''} />\n\n      <label for=\"axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input id=\"axis-title\" type=\"text\" value-key=\"xAxes0.axisTitle\" .value=${configurer.xAxes0.axisTitle || ''} />\n\n      <label for=\"x-axes0-thickness\"> <ox-i18n msgid=\"label.thickness\">Thickness</ox-i18n> </label>\n      <input\n        id=\"x-axes0-thickness\"\n        type=\"number\"\n        value-key=\"xAxes0.barPercentage\"\n        .value=${configurer.xAxes0.barPercentage || 0}\n      />\n\n      <input\n        for=\"grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.xGridLine\"\n        ?checked=${configurer.config.options?.xGridLine}\n      />\n      <label id=\"grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        for=\"x-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"xAxes0.ticks.display\"\n        ?checked=${configurer.xAxes0.ticks?.display}\n      />\n      <label id=\"x-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      <legend><ox-i18n msgid=\"label.y-axes\">Y Axes</ox-i18n></legend>\n\n      <label for=\"y-axes0-axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n      <input\n        id=\"y-axes0-axis-title\"\n        type=\"text\"\n        value-key=\"yAxes0.axisTitle\"\n        .value=${configurer.yAxes0.axisTitle || ''}\n      />\n\n      <input\n        id=\"y-axes0-ticks-automin\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMin\"\n        ?checked=${configurer.yAxes0.ticks?.autoMin}\n      />\n      <label for=\"y-axes0-ticks-automin\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-automax\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.autoMax\"\n        ?checked=${configurer.yAxes0.ticks?.autoMax}\n      />\n      <label for=\"y-axes0-ticks-automax\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n      ${!configurer.yAxes0.ticks?.autoMin\n        ? html`\n            <label for=\"y-axes0-ticks-min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-min\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.min\"\n              .value=${configurer.yAxes0.ticks?.min}\n            />\n          `\n        : html``}\n      ${!configurer.yAxes0.ticks?.autoMax\n        ? html`\n            <label for=\"y-axes0-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n            <input\n              id=\"y-axes0-ticks-max\"\n              type=\"number\"\n              value-key=\"yAxes0.ticks.max\"\n              .value=${configurer.yAxes0.ticks?.max}\n            />\n          `\n        : html``}\n\n      <label for=\"y-axes0-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n      <input\n        id=\"y-axes0-ticks-step-size\"\n        type=\"number\"\n        value-key=\"yAxes0.ticks.stepSize\"\n        .value=${configurer.yAxes0.ticks?.stepSize}\n      />\n\n      <input\n        id=\"y-grid-line\"\n        type=\"checkbox\"\n        value-key=\"value.options.yGridLine\"\n        ?checked=${configurer.config.options?.yGridLine}\n      />\n      <label for=\"y-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n      <input\n        id=\"y-axes0-ticks-display\"\n        type=\"checkbox\"\n        value-key=\"yAxes0.ticks.display\"\n        ?checked=${configurer.yAxes0.ticks?.display}\n      />\n      <label for=\"y-axes0-ticks-display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n\n      ${configurer.config.options?.multiAxis\n        ? html`\n            <legend><ox-i18n msgid=\"label.y-2nd-axes\">Y 2nd Axes</ox-i18n></legend>\n\n            <label for=\"y-axes1.axis-title\"> <ox-i18n msgid=\"label.title\">Title</ox-i18n> </label>\n            <input\n              id=\"y-axes1.axis-title\"\n              type=\"text\"\n              value-key=\"yAxes1.axisTitle\"\n              .value=${configurer.yAxes1.axisTitle || ''}\n            />\n\n            <input\n              id=\"axis-min-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMin\"\n              ?checked=${configurer.yAxes1.ticks?.autoMin}\n            />\n            <label for=\"axis-min-auto\"> <ox-i18n msgid=\"label.axis-min-auto\">Min Auto</ox-i18n> </label>\n\n            <input\n              id=\"axis-max-auto\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.autoMax\"\n              ?checked=${configurer.yAxes1.ticks?.autoMax}\n            />\n            <label for=\"axis-max-auto\"> <ox-i18n msgid=\"label.axis-max-auto\">Max Auto</ox-i18n> </label>\n\n            ${!configurer.yAxes1.ticks?.autoMin\n              ? html`\n                  <label for=\"y-axes1.ticks.min\"> <ox-i18n msgid=\"label.axis-min\">Min</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1.ticks.min\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.min\"\n                    .value=${configurer.yAxes1.ticks?.min}\n                  />\n                `\n              : html``}\n            ${!configurer.yAxes1.ticks?.autoMax\n              ? html`\n                  <label for=\"y-axes1-ticks-max\"> <ox-i18n msgid=\"label.axis-max\">Max</ox-i18n> </label>\n                  <input\n                    id=\"y-axes1-ticks-max\"\n                    type=\"number\"\n                    value-key=\"yAxes1.ticks.max\"\n                    .value=${configurer.yAxes1.ticks?.max}\n                  />\n                `\n              : html``}\n\n            <label for=\"y-axes1-ticks-step-size\"> <ox-i18n msgid=\"label.axis-step-size\">StepSize</ox-i18n> </label>\n            <input\n              id=\"y-axes1-ticks-step-size\"\n              type=\"number\"\n              value-key=\"yAxes1.ticks.stepSize\"\n              .value=${configurer.yAxes1.ticks?.stepSize}\n            />\n\n            <input\n              id=\"y2nd-grid-line\"\n              type=\"checkbox\"\n              value-key=\"value.options.y2ndGridLine\"\n              ?checked=${configurer.config.options.y2ndGridLine}\n            />\n            <label for=\"y2nd-grid-line\"> <ox-i18n msgid=\"label.grid-line\">Grid Line</ox-i18n> </label>\n\n            <input\n              id=\"y-axes1.ticks.display\"\n              type=\"checkbox\"\n              value-key=\"yAxes1.ticks.display\"\n              ?checked=${configurer.yAxes1.ticks?.display}\n            />\n            <label for=\"y-axes1.ticks.display\"> <ox-i18n msgid=\"label.display-tick\">Display Tick</ox-i18n> </label>\n          `\n        : html``}\n    `\n  }\n\n  multiSeriesTabTemplate() {\n    const configurer = this.configurer\n\n    return html`\n      <div id=\"series-properties-container\" fullwidth>\n        <div id=\"tab-header\">\n          <md-icon\n            id=\"tab-nav-left-button\"\n            @tap=${(e: Event) => {\n              this._onTabScrollNavLeft(e)\n            }}\n            disabled\n            >chevron_left</md-icon\n          >\n          <div\n            id=\"tabs\"\n            @change=${(e: Event) => {\n              configurer.currentSeriesIndex = (e.target as any).activeTabIndex\n            }}\n            active-tab-index=${configurer.currentSeriesIndex}\n            fit-container\n          >\n            ${configurer.datasets.map(\n              (dataset: any, index: number) => html`\n                <div\n                  data-series=${index + 1}\n                  data-tab-index=${index}\n                  tab\n                  ?selected=${index == configurer.currentSeriesIndex}\n                  @click=${(e: Event) => {\n                    const target = e.target as HTMLDivElement\n                    this.configurer.setCurrentSeriesIndex(Number(target.getAttribute('data-tab-index')))\n                    this.value = { ...this.configurer.value }\n                  }}\n                >\n                  ${index + 1}\n                  ${!configurer.datasets || (configurer.datasets.length != 1 && configurer.currentSeriesIndex == index)\n                    ? html` <md-icon @tap=\"${(e: Event) => this.onTapRemoveCurrentTab(e)}\"> close </md-icon> `\n                    : html``}\n                </div>\n              `\n            )}\n          </div>\n          <md-icon\n            id=\"tab-nav-right-button\"\n            @click=${(e: Event) => {\n              this._onTabScrollNavRight(e)\n            }}\n            disabled\n            >chevron_right</md-icon\n          >\n        </div>\n        <div id=\"add-series-button-container\">\n          <md-icon id=\"add-series-button\" @tap=${(e: Event) => this.onTapAddTab(e)}>add</md-icon>\n        </div>\n\n        <div class=\"tab-content\">\n          <label for=\"data-key\"> <ox-i18n msgid=\"label.data-key\">Data Key</ox-i18n> </label>\n          <input id=\"data-key\" type=\"text\" value-key=\"dataKey\" .value=${configurer.dataKey || ''} />\n\n          ${configurer.config.type == 'mixed'\n            ? html`\n                <label for=\"series-type\"> <ox-i18n msgid=\"label.series-type\">type</ox-i18n> </label>\n                <select\n                  id=\"series-type\"\n                  class=\"select-content\"\n                  value-key=\"series.type\"\n                  .value=${configurer.series.type || ''}\n                >\n                  <option value=\"bar\" selected>bar</option>\n                  <option value=\"line\">line</option>\n                </select>\n              `\n            : html``}\n\n          <label for=\"series-label\"> <ox-i18n msgid=\"label.label\">label</ox-i18n> </label>\n          <input id=\"series-label\" type=\"text\" value-key=\"series.label\" .value=${configurer.series.label} />\n\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-line-tension\"> <ox-i18n msgid=\"label.line-tension\">line tension</ox-i18n> </label>\n                <select\n                  id=\"series-line-tension\"\n                  class=\"select-content\"\n                  value-key=\"series.lineTension\"\n                  .value=${configurer.series.lineTension || 0}\n                >\n                  <option value=\"0.4\">smooth</option>\n                  <option value=\"0\">angled</option>\n                </select>\n              `\n            : html``}\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-border-width\"> <ox-i18n msgid=\"label.border-width\">border width</ox-i18n> </label>\n                <input\n                  id=\"series-border-width\"\n                  type=\"number\"\n                  value-key=\"series.borderWidth\"\n                  .value=${configurer.series.borderWidth || 0}\n                />\n              `\n            : html``}\n\n          <label for=\"series-color\"> <ox-i18n msgid=\"label.color\">color</ox-i18n> </label>\n          <ox-input-color id=\"series-color\" value-key=\"color\" .value=${configurer.color}></ox-input-color>\n\n          ${configurer.series.type == 'line'\n            ? html`\n                <label for=\"series-point-style\"> <ox-i18n msgid=\"label.point-shape\">point shape</ox-i18n> </label>\n                <select\n                  id=\"series-point-style\"\n                  class=\"select-content\"\n                  value-key=\"series.pointStyle\"\n                  .value=${configurer.series.pointStyle || ''}\n                >\n                  <option value=\"circle\">⚬</option>\n                  <option value=\"triangle\">▵</option>\n                  <option value=\"rect\">□</option>\n                  <option value=\"rectRot\">◇</option>\n                  <option value=\"cross\">+</option>\n                  <option value=\"crossRot\">⨉</option>\n                  <option value=\"star\">✱</option>\n                  <option value=\"line\">―</option>\n                  <option value=\"dash\">┄</option>\n                </select>\n\n                <label for=\"series-point-radius\"> <ox-i18n msgid=\"label.point-size\">point size</ox-i18n> </label>\n                <input\n                  id=\"series-point-radius\"\n                  type=\"number\"\n                  value-key=\"series.pointRadius\"\n                  .value=${configurer.series.pointRadius || 0}\n                />\n              `\n            : html``} <label for=\"series-stack\"> <ox-i18n msgid=\"label.stack-group\">Stack group</ox-i18n> </label>\n          <input id=\"series-stack\" type=\"text\" value-key=\"series.stack\" .value=${configurer.series.stack || ''} />\n          ${configurer.series.type == 'line'\n            ? html`\n                <input id=\"seires-fill\" type=\"checkbox\" value-key=\"series.fill\" ?checked=${configurer.series.fill} />\n                <label for=\"seires-fill\"> <ox-i18n msgid=\"label.fill\">fill</ox-i18n> </label>\n              `\n            : html``}\n          ${configurer.multiAxis\n            ? html`\n                <label for=\"series-y-axis-id\"> <ox-i18n msgid=\"label.target-axis\">target axis</ox-i18n> </label>\n                <select\n                  id=\"series-y-axis-id\"\n                  class=\"select-content\"\n                  value-key=\"series.yAxisID\"\n                  .value=${configurer.series.yAxisID || ''}\n                >\n                  <option value=\"left\">left</option>\n                  <option value=\"right\">right</option>\n                </select>\n              `\n            : html``}\n          ${this.displayValueTemplate()}\n        </div>\n      </div>\n    `\n  }\n\n  _onTabScroll(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    if (this.tabContainer.clientWidth == this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    }\n    // left-end\n    else if (this.tabContainer.scrollLeft == 0) {\n      this.tabNavLeftButton.setAttribute('disabled', '')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n    // right-end\n    else if (this.tabContainer.scrollLeft + this.tabContainer.clientWidth >= this.tabContainer.scrollWidth) {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.setAttribute('disabled', '')\n    } else {\n      this.tabNavLeftButton.removeAttribute('disabled')\n      this.tabNavRightButton.removeAttribute('disabled')\n    }\n  }\n\n  _onTabScrollNavLeft(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft -= this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n\n  _onTabScrollNavRight(e: Event) {\n    if (!this.tabContainer) {\n      return\n    }\n\n    this.tabContainer.style.scrollBehavior = 'smooth'\n    this.tabContainer.scrollLeft += this.tabContainer.clientWidth\n    this.tabContainer.style.scrollBehavior = 'auto'\n  }\n}\n"]}

package/dist/src/editors/input-chart-styles.d.ts

@@ -0,0 +1 @@
+export declare const InputChartStyles: import("lit").CSSResult;

package/dist/src/editors/input-chart-styles.js

@@ -0,0 +1,167 @@
+import { css } from 'lit';
+export const InputChartStyles = css `
+  :host {
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+  }
+
+  :host > * {
+    box-sizing: border-box;
+    grid-column: span 7;
+  }
+
+  :host > label {
+    box-sizing: border-box;
+    grid-column: span 3;
+  }
+
+  :host > legend {
+    box-sizing: border-box;
+    grid-column: 1 / -1;
+    color: var(--md-sys-color-on-secondary-container, #e46c2e);
+    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));
+    text-transform: capitalize;
+  }
+
+  #series-properties-container {
+    display: grid;
+    grid-template-columns: 1fr 25px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #series-properties-container > [tab-content] {
+    grid-column: span 2;
+  }
+
+  #tab-header {
+    display: grid;
+    grid-template-columns: 25px 1fr 25px;
+    grid-gap: 5px;
+    overflow: hidden;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-bottom: 0;
+    background-color: var(--md-sys-color-surface-variant);
+    color: var(--md-sys-color-on-surface);
+    box-sizing: border-box;
+    padding-top: 3px;
+    align-items: center;
+  }
+
+  #tab-header > div {
+    height: 25px;
+  }
+
+  #tab-header md-icon[disabled] {
+    opacity: 0.1;
+  }
+
+  #tabs {
+    display: flex;
+    overflow: hidden;
+  }
+
+  #tab-header #tabs [tab] md-icon {
+    margin-left: 5px;
+    padding: 2px;
+    color: var(--md-sys-color-on-surface);
+
+    --md-icon-size: 12px;
+  }
+
+  #add-series-button-container {
+    height: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding-top: 3px;
+    display: flex;
+    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
+  }
+
+  #add-series-button {
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  .tab-content {
+    grid-column: 1 / -1;
+
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-width: 0 1px 1px 1px;
+    padding: 5px;
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-gap: 5px;
+  }
+
+  .tab-content > * {
+    box-sizing: border-box;
+    grid-column: span 7;
+  }
+
+  label,
+  .tab-content > label {
+    grid-column: span 3;
+    text-align: right;
+    color: var(--md-sys-color-on-secondary-container);
+    font-size: 0.8em;
+    line-height: 2;
+    text-transform: capitalize;
+  }
+
+  input,
+  select {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: var(--spacing-small);
+  }
+
+  input[type='checkbox'],
+  .tab-content > input[type='checkbox'] {
+    grid-column: span 4;
+    justify-self: end;
+    align-self: center;
+  }
+
+  input[type='checkbox'] + label,
+  .tab-content > input[type='checkbox'] + label {
+    grid-column: span 6;
+
+    text-align: left;
+  }
+
+  [fullwidth] {
+    grid-column: 1 / -1;
+    margin: 0;
+    border: 0;
+  }
+
+  div[tab] {
+    display: flex;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-width: 1px 1px 0 1px;
+    padding: 0 5px;
+    color: var(--md-sys-color-on-surface);
+    box-sizing: border-box;
+    min-width: 45px;
+  }
+
+  div[tab][disabled] {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  div[tab]:last-child {
+    border-width: 0;
+  }
+
+  div[tab][selected] {
+    background-color: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+  }
+`;
+//# sourceMappingURL=input-chart-styles.js.map

package/dist/src/editors/input-chart-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-chart-styles.js","sourceRoot":"","sources":["../../../src/editors/input-chart-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoKlC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const InputChartStyles = css`\n  :host {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  :host > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  :host > label {\n    box-sizing: border-box;\n    grid-column: span 3;\n  }\n\n  :host > legend {\n    box-sizing: border-box;\n    grid-column: 1 / -1;\n    color: var(--md-sys-color-on-secondary-container, #e46c2e);\n    font: var(--property-sidebar-fieldset-legend, bold 13px var(--theme-font));\n    text-transform: capitalize;\n  }\n\n  #series-properties-container {\n    display: grid;\n    grid-template-columns: 1fr 25px;\n    align-items: center;\n    justify-content: center;\n  }\n\n  #series-properties-container > [tab-content] {\n    grid-column: span 2;\n  }\n\n  #tab-header {\n    display: grid;\n    grid-template-columns: 25px 1fr 25px;\n    grid-gap: 5px;\n    overflow: hidden;\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-bottom: 0;\n    background-color: var(--md-sys-color-surface-variant);\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    padding-top: 3px;\n    align-items: center;\n  }\n\n  #tab-header > div {\n    height: 25px;\n  }\n\n  #tab-header md-icon[disabled] {\n    opacity: 0.1;\n  }\n\n  #tabs {\n    display: flex;\n    overflow: hidden;\n  }\n\n  #tab-header #tabs [tab] md-icon {\n    margin-left: 5px;\n    padding: 2px;\n    color: var(--md-sys-color-on-surface);\n\n    --md-icon-size: 12px;\n  }\n\n  #add-series-button-container {\n    height: 100%;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    padding-top: 3px;\n    display: flex;\n    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;\n  }\n\n  #add-series-button {\n    width: 20px;\n    height: 20px;\n    padding: 0;\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  .tab-content {\n    grid-column: 1 / -1;\n\n    background-color: rgba(255, 255, 255, 0.5);\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-width: 0 1px 1px 1px;\n    padding: 5px;\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    grid-gap: 5px;\n  }\n\n  .tab-content > * {\n    box-sizing: border-box;\n    grid-column: span 7;\n  }\n\n  label,\n  .tab-content > label {\n    grid-column: span 3;\n    text-align: right;\n    color: var(--md-sys-color-on-secondary-container);\n    font-size: 0.8em;\n    line-height: 2;\n    text-transform: capitalize;\n  }\n\n  input,\n  select {\n    border: 1px solid rgba(0, 0, 0, 0.2);\n    border-radius: var(--spacing-small);\n  }\n\n  input[type='checkbox'],\n  .tab-content > input[type='checkbox'] {\n    grid-column: span 4;\n    justify-self: end;\n    align-self: center;\n  }\n\n  input[type='checkbox'] + label,\n  .tab-content > input[type='checkbox'] + label {\n    grid-column: span 6;\n\n    text-align: left;\n  }\n\n  [fullwidth] {\n    grid-column: 1 / -1;\n    margin: 0;\n    border: 0;\n  }\n\n  div[tab] {\n    display: flex;\n    align-items: center;\n    background-color: rgba(0, 0, 0, 0.2);\n    border-width: 1px 1px 0 1px;\n    padding: 0 5px;\n    color: var(--md-sys-color-on-surface);\n    box-sizing: border-box;\n    min-width: 45px;\n  }\n\n  div[tab][disabled] {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n\n  div[tab]:last-child {\n    border-width: 0;\n  }\n\n  div[tab][selected] {\n    background-color: var(--md-sys-color-surface);\n    color: var(--md-sys-color-on-surface);\n  }\n`\n"]}

package/dist/src/editors/ox-input-chart-hbar.d.ts

@@ -0,0 +1,11 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-color.js';
+import '@operato/i18n/ox-i18n.js';
+import { InputChartMultiSeriesAbstract } from './input-chart-multi-series-abstract';
+export declare class OxInputChartHBar extends InputChartMultiSeriesAbstract {
+    static styles: import("lit").CSSResult[];
+    getChartType(): 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'mixed';
+    subTemplate(): import("lit-html").TemplateResult<1>;
+    multiSeriesTabTemplate(): import("lit-html").TemplateResult<1>;
+    getDefaultDatasets(): OperatoChart.Dataset[];
+}