@nyaruka/temba-components 0.123.0 → 0.124.1

package/out-tsc/src/chart/TembaChart.js

@@ -110,6 +110,7 @@ export class TembaChart extends RapidElement {
         this.other = false;
         this.datasets = [];
         this.maxSplits = 2;
+        this.hideOther = false;
         this.splits = [];
         this.dataname = 'Counts';
         this.single = false;
@@ -129,6 +130,9 @@ export class TembaChart extends RapidElement {
     }
     updated(changes) {
         super.updated(changes);
+        if (changes.has('splitNames')) {
+            this.splits = this.splitNames.split(',').map((s) => s.trim());
+        }
         if (changes.has('data') || changes.has('splits')) {
             this.calculateSplits();
         }
@@ -178,13 +182,15 @@ export class TembaChart extends RapidElement {
                 });
             }
             else {
-                datasets.push({
-                    label: 'Other',
-                    data: sums,
-                    backgroundColor: otherBackgroundColor,
-                    borderColor: otherBorderColor,
-                    borderWidth: 1
-                });
+                if (!this.hideOther) {
+                    datasets.push({
+                        label: 'Other',
+                        data: sums,
+                        backgroundColor: otherBackgroundColor,
+                        borderColor: otherBorderColor,
+                        borderWidth: 1
+                    });
+                }
             }
             this.datasets = datasets;
         }
@@ -228,15 +234,6 @@ export class TembaChart extends RapidElement {
                             x: { from: 500 },
                             y: { from: 500 }
                         },
-                        animations: {
-                            tension: {
-                                duration: 1000,
-                                easing: 'linear',
-                                from: 1,
-                                to: 0,
-                                loop: true
-                            }
-                        },
                         scales: {
                             y: {
                                 min: 0,
@@ -350,6 +347,12 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], TembaChart.prototype, "maxSplits", void 0);
+__decorate([
+    property({ type: String, attribute: 'splits' })
+], TembaChart.prototype, "splitNames", void 0);
+__decorate([
+    property({ type: Boolean })
+], TembaChart.prototype, "hideOther", void 0);
 __decorate([
     state()
 ], TembaChart.prototype, "splits", void 0);

package/out-tsc/src/chart/TembaChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"TembaChart.js","sourceRoot":"","sources":["../../../src/chart/TembaChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { RapidElement } from '../RapidElement';\nimport { property, state } from 'lit/decorators.js';\nimport { css, html, PropertyValueMap, TemplateResult } from 'lit';\n\nimport { Select, SelectOption } from '../select/Select';\nimport { getClasses } from '../utils';\nimport { getStore } from '../store/Store';\n\n// eslint-disable-next-line import/no-named-as-default\nimport Chart, { ChartType } from 'chart.js/auto';\nimport 'chartjs-adapter-luxon';\n\nconst colors = [\n  'rgba(54, 162, 235, 0.2)',\n  'rgba(255, 159, 64, 0.2)',\n  'rgba(75, 192, 192, 0.2)',\n  'rgba(153, 102, 255, 0.2)',\n  'rgba(255, 205, 86, 0.2)',\n  'rgba(255, 99, 132, 0.2)'\n];\n\nconst colorsBorder = [\n  'rgb(54, 162, 235)',\n  'rgb(255, 159, 64)',\n  'rgb(75, 192, 192)',\n  'rgb(153, 102, 255)',\n  'rgb(255, 205, 86)',\n  'rgb(255, 99, 132)'\n];\n\nconst otherBackgroundColor = 'rgba(201, 203, 207, 0.2)';\nconst otherBorderColor = 'rgb(201, 203, 207)';\n\n/**\n * Formats a duration in seconds to a human-readable string showing the two largest units.\n * Examples: 68787 -> \"19h 6m\", 958000 -> \"11d 2h\", 3661 -> \"1h 1m\"\n */\nexport function formatDurationFromSeconds(seconds: number): string {\n  if (seconds === 0) {\n    return '0s';\n  }\n\n  const totalDays = Math.floor(seconds / 86400);\n  const remainingAfterDays = seconds % 86400;\n  const remainingHours = Math.floor(remainingAfterDays / 3600);\n  const remainingAfterHours = remainingAfterDays % 3600;\n  const remainingMinutes = Math.floor(remainingAfterHours / 60);\n  const remainingSeconds = remainingAfterHours % 60;\n\n  const units = [];\n\n  if (totalDays > 0) {\n    units.push(`${totalDays}d`);\n  }\n  if (remainingHours > 0) {\n    units.push(`${remainingHours}h`);\n  }\n  if (remainingMinutes > 0 && units.length < 2) {\n    units.push(`${remainingMinutes}m`);\n  }\n  if (remainingSeconds > 0 && units.length < 2) {\n    units.push(`${remainingSeconds}s`);\n  }\n\n  // Return the first two most significant units\n  return units.slice(0, 2).join(' ');\n}\n\nexport interface RapidChartData {\n  labels: string[];\n  datasets: { label: string; data: number[] }[];\n}\n\nexport class TembaChart extends RapidElement {\n  @property({ type: String })\n  chartType: ChartType = 'bar';\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  header: string = '';\n\n  @property({ type: Boolean })\n  other: boolean = false;\n\n  @property({ type: Object })\n  data: RapidChartData;\n\n  @state()\n  datasets: { label: string; data: number[] }[] = [];\n\n  @property({ type: Number })\n  maxSplits: number = 2;\n\n  @state()\n  splits: string[] = [];\n\n  @property({ type: String })\n  dataname = 'Counts';\n\n  @property({ type: Boolean })\n  single: boolean = false;\n\n  @property({ type: Boolean })\n  legend: boolean = false;\n\n  @property({ type: Boolean })\n  config: boolean = false;\n\n  @property({ type: Boolean })\n  formatDuration: boolean = false;\n\n  @property({ type: Number })\n  colorIndex: number = 0;\n\n  @state()\n  showConfig: boolean = false;\n\n  chart: Chart;\n  shadowRootDiv: HTMLDivElement;\n  canvas: HTMLCanvasElement;\n  ctx: CanvasRenderingContext2D;\n\n  static get styles() {\n    return css`\n      .chart-title {\n        font-size: 1.2em;\n        font-weight: 600;\n        text-align: center;\n      }\n\n      temba-select {\n        display: block;\n      }\n\n      .config-toggle {\n        margin-top: -2.5em;\n        margin-right: -0.5em;\n        color: #bbb;\n        display: none;\n      }\n\n      .config-toggle:hover {\n        color: #666;\n      }\n\n      .config-toggle.show {\n        color: #666;\n        display: block;\n      }\n\n      .config {\n        max-height: 0px;\n        margin: 2em 0.5em;\n        padding: 0em 1em;\n        border-radius: var(--curvature);\n        border: 1px solid transparent;\n        background: transparent;\n        overflow: hidden;\n        transition: all 0.2s ease-in-out;\n      }\n\n      .config.show {\n        padding: 1em;\n        max-height: 50px;\n        background: rgba(0, 0, 0, 0.02);\n        border: 1px solid rgba(0, 0, 0, 0.09);\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    const wrapper = this.shadowRoot.querySelector('#canvas-wrapper');\n    this.canvas = document.createElement('canvas');\n    this.canvas.setAttribute('height', '300px');\n    wrapper.appendChild(this.canvas);\n    this.ctx = this.canvas.getContext('2d');\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('data') || changes.has('splits')) {\n      this.calculateSplits();\n    }\n\n    if (changes.has('datasets')) {\n      this.updateChart();\n    }\n\n    if (changes.has('url')) {\n      const store = getStore();\n      store.getUrl(this.url).then((response) => {\n        this.data = response.json.data;\n      });\n    }\n  }\n\n  private calculateSplits() {\n    if (this.data) {\n      const datasets = [];\n      // keep a running list of values that is the sum at each index\n      const sums = [];\n      for (const dataset of this.data.datasets) {\n        if (this.splits.find((s) => s === dataset.label) === undefined) {\n          // update our sums\n          for (let i = 0; i < dataset.data.length; i++) {\n            if (sums[i] === undefined) {\n              sums[i] = dataset.data[i];\n            } else {\n              sums[i] += dataset.data[i];\n            }\n          }\n        } else {\n          datasets.push({\n            ...dataset,\n            backgroundColor:\n              colors[(datasets.length + this.colorIndex) % colors.length],\n            borderColor:\n              colorsBorder[\n                (datasets.length + this.colorIndex) % colorsBorder.length\n              ],\n            borderWidth: 1\n          });\n        }\n      }\n\n      if (datasets.length === 0) {\n        datasets.push({\n          label: this.single ? this.dataname : `All ${this.dataname}`,\n          data: sums,\n          backgroundColor: colors[this.colorIndex % colors.length],\n          borderColor: colorsBorder[this.colorIndex % colorsBorder.length],\n          borderWidth: 1\n        });\n      } else {\n        datasets.push({\n          label: 'Other',\n          data: sums,\n          backgroundColor: otherBackgroundColor,\n          borderColor: otherBorderColor,\n          borderWidth: 1\n        });\n      }\n      this.datasets = datasets;\n    }\n  }\n\n  public updateChart(): void {\n    if (this.datasets?.length > 0) {\n      if (this.chart) {\n        this.chart.data.labels = this.data.labels;\n        this.chart.data.datasets = this.datasets;\n        this.chart.update();\n      } else {\n        const chartData = {\n          type: this.chartType,\n          data: {\n            labels: this.data.labels,\n            datasets: this.datasets\n          },\n          options: {\n            plugins: {\n              legend: {\n                display: this.legend\n              },\n              ...(this.formatDuration && {\n                tooltip: {\n                  callbacks: {\n                    label: (context: any) => {\n                      const label = context.dataset.label || '';\n                      const value = context.parsed.y;\n                      const formattedValue = formatDurationFromSeconds(value);\n                      return `${label}: ${formattedValue}`;\n                    }\n                  }\n                }\n              })\n            },\n            responsive: true,\n            maintainAspectRatio: false,\n            animation: {\n              x: { from: 500 },\n              y: { from: 500 }\n            },\n            animations: {\n              tension: {\n                duration: 1000,\n                easing: 'linear',\n                from: 1,\n                to: 0,\n                loop: true\n              }\n            },\n            scales: {\n              y: {\n                min: 0,\n                stacked: true,\n                ...(this.formatDuration && {\n                  ticks: {\n                    callback: (value: any) => {\n                      return formatDurationFromSeconds(value);\n                    }\n                  }\n                })\n              },\n              x: {\n                type: 'time',\n                time: {\n                  unit: 'day',\n                  tooltipFormat: 'DDD', // Luxon for 'Feb 16, 2025'\n                  displayFormats: {\n                    day: 'MMM dd'\n                  }\n                },\n                grid: {\n                  display: false\n                },\n                stacked: true\n              }\n            }\n          }\n        };\n        this.chart = new Chart(this.ctx, chartData as any);\n      }\n    }\n  }\n\n  private handleSplitsChanged(e: Event) {\n    const select = e.target as Select<SelectOption>;\n    this.splits = select.values.map((option) => {\n      return option.value;\n    });\n  }\n\n  private handleToggleConfig() {\n    this.showConfig = !this.showConfig;\n    if (!this.showConfig) {\n      this.splits = [];\n    }\n  }\n\n  protected render(): TemplateResult {\n    return html`<div>\n      ${this.header\n        ? html`<div class=\"chart-title\">${this.header}</div>`\n        : null}\n      <div id=\"canvas-wrapper\"></div>\n      ${this.config && this.data\n        ? html`\n            <div\n              class=\"${getClasses({\n                'config-toggle': true,\n                show: this.showConfig && this.data?.datasets?.length > 1\n              })}\"\n              style=\"display: flex; flex-direction: row; align-items: center; justify-content: space-between;\"\n            >\n              <div></div>\n              <div>\n                <temba-icon\n                  animateChange=\"spin\"\n                  name=\"${this.showConfig ? 'close' : 'settings'}\"\n                  clickable\n                  size=\"1.5\"\n                  @click=${this.handleToggleConfig}\n                ></temba-icon>\n              </div>\n            </div>\n          `\n        : null}\n\n      <div class=${getClasses({ config: true, show: this.showConfig })}>\n        <temba-select\n          multi\n          placeholder=\"Select ${this.dataname}\"\n          options=${JSON.stringify(\n            this.data?.datasets.map((dataset) => ({\n              name: dataset.label,\n              value: dataset.label\n            }))\n          )}\n          .values=${this.splits.map((s) => ({ name: s, value: s }))}\n          @change=${this.handleSplitsChanged}\n        >\n        </temba-select>\n        <div></div>\n      </div>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"TembaChart.js","sourceRoot":"","sources":["../../../src/chart/TembaChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { RapidElement } from '../RapidElement';\nimport { property, state } from 'lit/decorators.js';\nimport { css, html, PropertyValueMap, TemplateResult } from 'lit';\n\nimport { Select, SelectOption } from '../select/Select';\nimport { getClasses } from '../utils';\nimport { getStore } from '../store/Store';\n\n// eslint-disable-next-line import/no-named-as-default\nimport Chart, { ChartType } from 'chart.js/auto';\nimport 'chartjs-adapter-luxon';\n\nconst colors = [\n  'rgba(54, 162, 235, 0.2)',\n  'rgba(255, 159, 64, 0.2)',\n  'rgba(75, 192, 192, 0.2)',\n  'rgba(153, 102, 255, 0.2)',\n  'rgba(255, 205, 86, 0.2)',\n  'rgba(255, 99, 132, 0.2)'\n];\n\nconst colorsBorder = [\n  'rgb(54, 162, 235)',\n  'rgb(255, 159, 64)',\n  'rgb(75, 192, 192)',\n  'rgb(153, 102, 255)',\n  'rgb(255, 205, 86)',\n  'rgb(255, 99, 132)'\n];\n\nconst otherBackgroundColor = 'rgba(201, 203, 207, 0.2)';\nconst otherBorderColor = 'rgb(201, 203, 207)';\n\n/**\n * Formats a duration in seconds to a human-readable string showing the two largest units.\n * Examples: 68787 -> \"19h 6m\", 958000 -> \"11d 2h\", 3661 -> \"1h 1m\"\n */\nexport function formatDurationFromSeconds(seconds: number): string {\n  if (seconds === 0) {\n    return '0s';\n  }\n\n  const totalDays = Math.floor(seconds / 86400);\n  const remainingAfterDays = seconds % 86400;\n  const remainingHours = Math.floor(remainingAfterDays / 3600);\n  const remainingAfterHours = remainingAfterDays % 3600;\n  const remainingMinutes = Math.floor(remainingAfterHours / 60);\n  const remainingSeconds = remainingAfterHours % 60;\n\n  const units = [];\n\n  if (totalDays > 0) {\n    units.push(`${totalDays}d`);\n  }\n  if (remainingHours > 0) {\n    units.push(`${remainingHours}h`);\n  }\n  if (remainingMinutes > 0 && units.length < 2) {\n    units.push(`${remainingMinutes}m`);\n  }\n  if (remainingSeconds > 0 && units.length < 2) {\n    units.push(`${remainingSeconds}s`);\n  }\n\n  // Return the first two most significant units\n  return units.slice(0, 2).join(' ');\n}\n\nexport interface RapidChartData {\n  labels: string[];\n  datasets: { label: string; data: number[] }[];\n}\n\nexport class TembaChart extends RapidElement {\n  @property({ type: String })\n  chartType: ChartType = 'bar';\n\n  @property({ type: String })\n  url: string;\n\n  @property({ type: String })\n  header: string = '';\n\n  @property({ type: Boolean })\n  other: boolean = false;\n\n  @property({ type: Object })\n  data: RapidChartData;\n\n  @state()\n  datasets: { label: string; data: number[] }[] = [];\n\n  @property({ type: Number })\n  maxSplits: number = 2;\n\n  @property({ type: String, attribute: 'splits' })\n  splitNames: string;\n\n  @property({ type: Boolean })\n  hideOther: boolean = false;\n\n  @state()\n  splits: string[] = [];\n\n  @property({ type: String })\n  dataname = 'Counts';\n\n  @property({ type: Boolean })\n  single: boolean = false;\n\n  @property({ type: Boolean })\n  legend: boolean = false;\n\n  @property({ type: Boolean })\n  config: boolean = false;\n\n  @property({ type: Boolean })\n  formatDuration: boolean = false;\n\n  @property({ type: Number })\n  colorIndex: number = 0;\n\n  @state()\n  showConfig: boolean = false;\n\n  chart: Chart;\n  shadowRootDiv: HTMLDivElement;\n  canvas: HTMLCanvasElement;\n  ctx: CanvasRenderingContext2D;\n\n  static get styles() {\n    return css`\n      .chart-title {\n        font-size: 1.2em;\n        font-weight: 600;\n        text-align: center;\n      }\n\n      temba-select {\n        display: block;\n      }\n\n      .config-toggle {\n        margin-top: -2.5em;\n        margin-right: -0.5em;\n        color: #bbb;\n        display: none;\n      }\n\n      .config-toggle:hover {\n        color: #666;\n      }\n\n      .config-toggle.show {\n        color: #666;\n        display: block;\n      }\n\n      .config {\n        max-height: 0px;\n        margin: 2em 0.5em;\n        padding: 0em 1em;\n        border-radius: var(--curvature);\n        border: 1px solid transparent;\n        background: transparent;\n        overflow: hidden;\n        transition: all 0.2s ease-in-out;\n      }\n\n      .config.show {\n        padding: 1em;\n        max-height: 50px;\n        background: rgba(0, 0, 0, 0.02);\n        border: 1px solid rgba(0, 0, 0, 0.09);\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    const wrapper = this.shadowRoot.querySelector('#canvas-wrapper');\n    this.canvas = document.createElement('canvas');\n    this.canvas.setAttribute('height', '300px');\n    wrapper.appendChild(this.canvas);\n    this.ctx = this.canvas.getContext('2d');\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n\n    if (changes.has('splitNames')) {\n      this.splits = this.splitNames.split(',').map((s) => s.trim());\n    }\n\n    if (changes.has('data') || changes.has('splits')) {\n      this.calculateSplits();\n    }\n\n    if (changes.has('datasets')) {\n      this.updateChart();\n    }\n\n    if (changes.has('url')) {\n      const store = getStore();\n      store.getUrl(this.url).then((response) => {\n        this.data = response.json.data;\n      });\n    }\n  }\n\n  private calculateSplits() {\n    if (this.data) {\n      const datasets = [];\n      // keep a running list of values that is the sum at each index\n      const sums = [];\n      for (const dataset of this.data.datasets) {\n        if (this.splits.find((s) => s === dataset.label) === undefined) {\n          // update our sums\n          for (let i = 0; i < dataset.data.length; i++) {\n            if (sums[i] === undefined) {\n              sums[i] = dataset.data[i];\n            } else {\n              sums[i] += dataset.data[i];\n            }\n          }\n        } else {\n          datasets.push({\n            ...dataset,\n            backgroundColor:\n              colors[(datasets.length + this.colorIndex) % colors.length],\n            borderColor:\n              colorsBorder[\n                (datasets.length + this.colorIndex) % colorsBorder.length\n              ],\n            borderWidth: 1\n          });\n        }\n      }\n\n      if (datasets.length === 0) {\n        datasets.push({\n          label: this.single ? this.dataname : `All ${this.dataname}`,\n          data: sums,\n          backgroundColor: colors[this.colorIndex % colors.length],\n          borderColor: colorsBorder[this.colorIndex % colorsBorder.length],\n          borderWidth: 1\n        });\n      } else {\n        if (!this.hideOther) {\n          datasets.push({\n            label: 'Other',\n            data: sums,\n            backgroundColor: otherBackgroundColor,\n            borderColor: otherBorderColor,\n            borderWidth: 1\n          });\n        }\n      }\n      this.datasets = datasets;\n    }\n  }\n\n  public updateChart(): void {\n    if (this.datasets?.length > 0) {\n      if (this.chart) {\n        this.chart.data.labels = this.data.labels;\n        this.chart.data.datasets = this.datasets;\n        this.chart.update();\n      } else {\n        const chartData = {\n          type: this.chartType,\n          data: {\n            labels: this.data.labels,\n            datasets: this.datasets\n          },\n          options: {\n            plugins: {\n              legend: {\n                display: this.legend\n              },\n              ...(this.formatDuration && {\n                tooltip: {\n                  callbacks: {\n                    label: (context: any) => {\n                      const label = context.dataset.label || '';\n                      const value = context.parsed.y;\n                      const formattedValue = formatDurationFromSeconds(value);\n                      return `${label}: ${formattedValue}`;\n                    }\n                  }\n                }\n              })\n            },\n            responsive: true,\n            maintainAspectRatio: false,\n            animation: {\n              x: { from: 500 },\n              y: { from: 500 }\n            },\n            scales: {\n              y: {\n                min: 0,\n                stacked: true,\n                ...(this.formatDuration && {\n                  ticks: {\n                    callback: (value: any) => {\n                      return formatDurationFromSeconds(value);\n                    }\n                  }\n                })\n              },\n              x: {\n                type: 'time',\n                time: {\n                  unit: 'day',\n                  tooltipFormat: 'DDD', // Luxon for 'Feb 16, 2025'\n                  displayFormats: {\n                    day: 'MMM dd'\n                  }\n                },\n                grid: {\n                  display: false\n                },\n                stacked: true\n              }\n            }\n          }\n        };\n        this.chart = new Chart(this.ctx, chartData as any);\n      }\n    }\n  }\n\n  private handleSplitsChanged(e: Event) {\n    const select = e.target as Select<SelectOption>;\n    this.splits = select.values.map((option) => {\n      return option.value;\n    });\n  }\n\n  private handleToggleConfig() {\n    this.showConfig = !this.showConfig;\n    if (!this.showConfig) {\n      this.splits = [];\n    }\n  }\n\n  protected render(): TemplateResult {\n    return html`<div>\n      ${this.header\n        ? html`<div class=\"chart-title\">${this.header}</div>`\n        : null}\n      <div id=\"canvas-wrapper\"></div>\n      ${this.config && this.data\n        ? html`\n            <div\n              class=\"${getClasses({\n                'config-toggle': true,\n                show: this.showConfig && this.data?.datasets?.length > 1\n              })}\"\n              style=\"display: flex; flex-direction: row; align-items: center; justify-content: space-between;\"\n            >\n              <div></div>\n              <div>\n                <temba-icon\n                  animateChange=\"spin\"\n                  name=\"${this.showConfig ? 'close' : 'settings'}\"\n                  clickable\n                  size=\"1.5\"\n                  @click=${this.handleToggleConfig}\n                ></temba-icon>\n              </div>\n            </div>\n          `\n        : null}\n\n      <div class=${getClasses({ config: true, show: this.showConfig })}>\n        <temba-select\n          multi\n          placeholder=\"Select ${this.dataname}\"\n          options=${JSON.stringify(\n            this.data?.datasets.map((dataset) => ({\n              name: dataset.label,\n              value: dataset.label\n            }))\n          )}\n          .values=${this.splits.map((s) => ({ name: s, value: s }))}\n          @change=${this.handleSplitsChanged}\n        >\n        </temba-select>\n        <div></div>\n      </div>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/fields/FieldManager.js

@@ -120,7 +120,7 @@ export class FieldManager extends EndpointMonitorElement {
         border-radius: var(--curvature);
       }
 
-      .featured temba-sortable-list .field:hover {
+      .featured:not(.dragging) temba-sortable-list .field:hover {
         cursor: move;
         border-color: #e6e6e6;
         background: #fcfcfc;
@@ -163,30 +163,26 @@ export class FieldManager extends EndpointMonitorElement {
             this.filterFields();
         }
     }
-    handleSaveOrder(event) {
-        const list = event.currentTarget;
-        postJSON(this.priorityEndpoint, list
-            .getIds()
-            .reverse()
-            .reduce((map, key, idx) => {
-            map[key] = idx;
-            return map;
-        }, {})).then(() => {
-            this.store.refreshFields();
-        });
-    }
     handleOrderChanged(event) {
-        const swapsies = event.detail;
-        const temp = this.featuredFields[swapsies.fromIdx];
-        this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];
-        this.featuredFields[swapsies.toIdx] = temp;
-        this.requestUpdate('featuredFields');
-    }
-    handleDragStart(event) {
-        this.draggingId = event.detail.id;
-    }
-    handleDragStop() {
-        this.draggingId = null;
+        // Apply the reordering immediately - the SortableList now provides accurate indexes
+        const [fromIdx, toIdx] = event.detail.swap;
+        const temp = this.featuredFields[fromIdx];
+        this.featuredFields.splice(fromIdx, 1);
+        this.featuredFields.splice(toIdx, 0, temp);
+        this.requestUpdate();
+        // Save the new order to the server
+        const list = event.currentTarget;
+        setTimeout(() => {
+            postJSON(this.priorityEndpoint, list
+                .getIds()
+                .reverse()
+                .reduce((map, key, idx) => {
+                map[key] = idx;
+                return map;
+            }, {})).then(() => {
+                this.store.refreshFields();
+            });
+        }, 0);
     }
     handleFieldAction(event) {
         const ele = event.target;
@@ -210,10 +206,13 @@ export class FieldManager extends EndpointMonitorElement {
             display: flex; 
             flex-direction: row; 
             align-items: center;
-            padding: 0.25em 1em; 
-            ${field.key === this.draggingId
-            ? 'background: var(--color-selection)'
-            : ''}"
+            padding: 0.25em 1em;"
+        @click=${(e) => {
+            const ele = e.currentTarget;
+            const key = ele.dataset.key;
+            const action = ele.dataset.action;
+            this.fireCustomEvent(CustomEventType.Selection, { key, action });
+        }}
       >
         <div
           style="display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em"
@@ -285,10 +284,7 @@ export class FieldManager extends EndpointMonitorElement {
                   `
                 : html `
                     <temba-sortable-list
-                      @change=${this.handleSaveOrder}
                       @temba-order-changed=${this.handleOrderChanged}
-                      @temba-drag-start=${this.handleDragStart}
-                      @temba-drag-stop=${this.handleDragStop}
                     >
                       ${this.featuredFields.map((field) => this.renderField(field))}
                     </temba-sortable-list>
@@ -318,9 +314,6 @@ __decorate([
 __decorate([
     property({ type: Object, attribute: false })
 ], FieldManager.prototype, "otherFieldKeys", void 0);
-__decorate([
-    property({ type: String })
-], FieldManager.prototype, "draggingId", void 0);
 __decorate([
     property({ type: String })
 ], FieldManager.prototype, "query", void 0);

package/out-tsc/src/fields/FieldManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldManager.js","sourceRoot":"","sources":["../../../src/fields/FieldManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { EndpointMonitorElement } from '../store/EndpointMonitorElement';\nimport { postJSON } from '../utils';\n\nconst TYPE_NAMES = {\n  text: 'Text',\n  numeric: 'Number',\n  number: 'Number',\n  datetime: 'Date & Time',\n  state: 'State',\n  ward: 'Ward',\n  district: 'District'\n};\n\nconst matches = (field: ContactField, query: string): boolean => {\n  if (!query) {\n    return true;\n  }\n  const search = (\n    field.label +\n    field.key +\n    TYPE_NAMES[field.value_type]\n  ).toLowerCase();\n  if (search.toLowerCase().indexOf(query) > -1) {\n    return true;\n  }\n  return false;\n};\n\nexport class FieldManager extends EndpointMonitorElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        min-height: 0px;\n      }\n\n      .featured,\n      .other-fields {\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: var(--shadow);\n        margin-bottom: 1em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .featured {\n        max-height: 40%;\n      }\n\n      .other-fields {\n        flex-grow: 2;\n        min-height: 0px;\n        margin-bottom: 0px;\n      }\n\n      temba-textinput {\n        margin-bottom: 1em;\n      }\n\n      .scroll-box {\n        overflow-y: auto;\n        flex-grow: 1;\n        flex-direction: column;\n        display: flex;\n      }\n\n      .header temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .label {\n        flex-grow: 1;\n      }\n\n      .header {\n        padding: 0.5em 1em;\n        display: flex;\n        align-items: flex-start;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      .featured-field {\n        user-select: none;\n      }\n\n      temba-sortable-list {\n        padding: 0.5em 0em;\n        width: 100%;\n        overflow-y: auto;\n      }\n\n      .scroll-box {\n        padding: 0.5em 0em;\n      }\n\n      temba-icon[name='usages']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field:hover temba-icon[name='delete_small'] {\n        opacity: 1 !important;\n        cursor: pointer !important;\n        pointer-events: all !important;\n      }\n\n      temba-icon[name='delete_small']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field {\n        border: 1px solid transparent;\n        margin: 0 0.5em;\n        border-radius: var(--curvature);\n      }\n\n      .featured temba-sortable-list .field:hover {\n        cursor: move;\n        border-color: #e6e6e6;\n        background: #fcfcfc;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'priority-endpoint' })\n  priorityEndpoint: string;\n\n  @property({ type: Object, attribute: false })\n  featuredFields: ContactField[];\n\n  @property({ type: Object, attribute: false })\n  otherFieldKeys: string[] = [];\n\n  @property({ type: String })\n  draggingId: string;\n\n  @property({ type: String })\n  query = '';\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    this.url = this.store.fieldsEndpoint;\n  }\n\n  private filterFields() {\n    const filteredKeys = this.store.getFieldKeys().filter((key) => {\n      const field = this.store.getContactField(key);\n      if (field.featured) {\n        return false;\n      }\n      return matches(field, this.query);\n    });\n\n    // sort by the label instead of the key\n    filteredKeys.sort((a, b) => {\n      return this.store\n        .getContactField(a)\n        .label.localeCompare(this.store.getContactField(b).label);\n    });\n\n    const featured: ContactField[] = [];\n    this.store.getFeaturedFields().forEach((field) => {\n      if (matches(field, this.query)) {\n        featured.push(field);\n      }\n    });\n\n    this.otherFieldKeys = filteredKeys;\n    this.featuredFields = featured;\n  }\n\n  protected updated(\n    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.update(properties);\n    if (properties.has('data')) {\n      this.filterFields();\n    } else if (properties.has('query')) {\n      this.filterFields();\n    }\n  }\n\n  private handleSaveOrder(event) {\n    const list = event.currentTarget as SortableList;\n    postJSON(\n      this.priorityEndpoint,\n      list\n        .getIds()\n        .reverse()\n        .reduce((map, key, idx) => {\n          map[key] = idx;\n          return map;\n        }, {})\n    ).then(() => {\n      this.store.refreshFields();\n    });\n  }\n\n  private handleOrderChanged(event) {\n    const swapsies = event.detail;\n    const temp = this.featuredFields[swapsies.fromIdx];\n    this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];\n    this.featuredFields[swapsies.toIdx] = temp;\n    this.requestUpdate('featuredFields');\n  }\n\n  private handleDragStart(event) {\n    this.draggingId = event.detail.id;\n  }\n\n  private handleDragStop() {\n    this.draggingId = null;\n  }\n\n  private handleFieldAction(event: MouseEvent) {\n    const ele = event.target as HTMLDivElement;\n    const key = ele.dataset.key;\n    const action = ele.dataset.action;\n    this.fireCustomEvent(CustomEventType.Selection, { key, action });\n  }\n\n  private handleSearch(event) {\n    this.query = (event.target.value || '').trim();\n  }\n\n  private hasUsages(field: ContactField): boolean {\n    return (\n      field.usages.campaign_events + field.usages.flows + field.usages.groups >\n      0\n    );\n  }\n\n  private renderField(field: ContactField) {\n    return html`\n      <div\n        class=\"field sortable\"\n        id=\"${field.key}\"\n        style=\"\n            display: flex; \n            flex-direction: row; \n            align-items: center;\n            padding: 0.25em 1em; \n            ${field.key === this.draggingId\n          ? 'background: var(--color-selection)'\n          : ''}\"\n      >\n        <div\n          style=\"display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em\"\n        >\n          <span\n            @click=${this.handleFieldAction}\n            data-key=${field.key}\n            data-action=\"update\"\n            style=\"color: var(--color-link-primary); cursor:pointer;\"\n          >\n            ${field.label}\n          </span>\n          ${this.hasUsages(field)\n            ? html`\n                <temba-icon\n                  size=\"0.8\"\n                  style=\"color: #ccc; margin-left: 0.7em;\"\n                  name=\"usages\"\n                  data-key=${field.key}\n                  data-action=\"usages\"\n                  @click=${this.handleFieldAction}\n                  clickable\n                ></temba-icon>\n              `\n            : null}\n          <div class=\"flex-grow:1\"></div>\n        </div>\n        <div\n          style=\"flex-grow:1; font-family: Roboto Mono, monospace; font-size:0.8em;\"\n        >\n          @fields.${field.key}\n        </div>\n        <div>${TYPE_NAMES[field.value_type]}</div>\n        <temba-icon\n          style=\"pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0\"\n          name=\"delete_small\"\n          data-key=${field.key}\n          data-action=\"delete\"\n          @click=${this.handleFieldAction}\n        ></temba-icon>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (!this.featuredFields) {\n      return null;\n    }\n\n    return html`\n      <temba-textinput\n        id=\"search\"\n        placeholder=\"Search\"\n        @change=${this.handleSearch}\n        clearable\n        value=${this.query}\n      ></temba-textinput>\n\n      ${this.featuredFields.length > 0\n        ? html`\n            <div class=\"featured\">\n              <div class=\"header\">\n                <temba-icon name=\"featured\"></temba-icon>\n                <div class=\"label\">Featured</div>\n              </div>\n              ${this.query\n                ? html`\n                    <div class=\"scroll-box\">\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </div>\n                  `\n                : html`\n                    <temba-sortable-list\n                      @change=${this.handleSaveOrder}\n                      @temba-order-changed=${this.handleOrderChanged}\n                      @temba-drag-start=${this.handleDragStart}\n                      @temba-drag-stop=${this.handleDragStop}\n                    >\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </temba-sortable-list>\n                  `}\n            </div>\n          `\n        : null}\n\n      <div class=\"other-fields\">\n        <div class=\"header\">\n          <temba-icon name=\"fields\"></temba-icon>\n          <div class=\"label\">Everything Else</div>\n        </div>\n        <div class=\"scroll-box\">\n          ${this.otherFieldKeys.map((field) =>\n            this.renderField(this.store.getContactField(field))\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FieldManager.js","sourceRoot":"","sources":["../../../src/fields/FieldManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { EndpointMonitorElement } from '../store/EndpointMonitorElement';\nimport { postJSON } from '../utils';\n\nconst TYPE_NAMES = {\n  text: 'Text',\n  numeric: 'Number',\n  number: 'Number',\n  datetime: 'Date & Time',\n  state: 'State',\n  ward: 'Ward',\n  district: 'District'\n};\n\nconst matches = (field: ContactField, query: string): boolean => {\n  if (!query) {\n    return true;\n  }\n  const search = (\n    field.label +\n    field.key +\n    TYPE_NAMES[field.value_type]\n  ).toLowerCase();\n  if (search.toLowerCase().indexOf(query) > -1) {\n    return true;\n  }\n  return false;\n};\n\nexport class FieldManager extends EndpointMonitorElement {\n  static get styles() {\n    return css`\n      :host {\n        display: flex;\n        flex-grow: 1;\n        flex-direction: column;\n        min-height: 0px;\n      }\n\n      .featured,\n      .other-fields {\n        background: #fff;\n        border-radius: var(--curvature);\n        box-shadow: var(--shadow);\n        margin-bottom: 1em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .featured {\n        max-height: 40%;\n      }\n\n      .other-fields {\n        flex-grow: 2;\n        min-height: 0px;\n        margin-bottom: 0px;\n      }\n\n      temba-textinput {\n        margin-bottom: 1em;\n      }\n\n      .scroll-box {\n        overflow-y: auto;\n        flex-grow: 1;\n        flex-direction: column;\n        display: flex;\n      }\n\n      .header temba-icon {\n        margin-right: 0.5em;\n      }\n\n      .label {\n        flex-grow: 1;\n      }\n\n      .header {\n        padding: 0.5em 1em;\n        display: flex;\n        align-items: flex-start;\n        border-bottom: 1px solid var(--color-widget-border);\n      }\n\n      .featured-field {\n        user-select: none;\n      }\n\n      temba-sortable-list {\n        padding: 0.5em 0em;\n        width: 100%;\n        overflow-y: auto;\n      }\n\n      .scroll-box {\n        padding: 0.5em 0em;\n      }\n\n      temba-icon[name='usages']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field:hover temba-icon[name='delete_small'] {\n        opacity: 1 !important;\n        cursor: pointer !important;\n        pointer-events: all !important;\n      }\n\n      temba-icon[name='delete_small']:hover {\n        --icon-color: var(--color-link-primary);\n      }\n\n      .field {\n        border: 1px solid transparent;\n        margin: 0 0.5em;\n        border-radius: var(--curvature);\n      }\n\n      .featured:not(.dragging) temba-sortable-list .field:hover {\n        cursor: move;\n        border-color: #e6e6e6;\n        background: #fcfcfc;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: 'priority-endpoint' })\n  priorityEndpoint: string;\n\n  @property({ type: Object, attribute: false })\n  featuredFields: ContactField[];\n\n  @property({ type: Object, attribute: false })\n  otherFieldKeys: string[] = [];\n\n  @property({ type: String })\n  query = '';\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    this.url = this.store.fieldsEndpoint;\n  }\n\n  private filterFields() {\n    const filteredKeys = this.store.getFieldKeys().filter((key) => {\n      const field = this.store.getContactField(key);\n      if (field.featured) {\n        return false;\n      }\n      return matches(field, this.query);\n    });\n\n    // sort by the label instead of the key\n    filteredKeys.sort((a, b) => {\n      return this.store\n        .getContactField(a)\n        .label.localeCompare(this.store.getContactField(b).label);\n    });\n\n    const featured: ContactField[] = [];\n    this.store.getFeaturedFields().forEach((field) => {\n      if (matches(field, this.query)) {\n        featured.push(field);\n      }\n    });\n\n    this.otherFieldKeys = filteredKeys;\n    this.featuredFields = featured;\n  }\n\n  protected updated(\n    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.update(properties);\n    if (properties.has('data')) {\n      this.filterFields();\n    } else if (properties.has('query')) {\n      this.filterFields();\n    }\n  }\n\n  private handleOrderChanged(event) {\n    // Apply the reordering immediately - the SortableList now provides accurate indexes\n    const [fromIdx, toIdx] = event.detail.swap;\n\n    const temp = this.featuredFields[fromIdx];\n    this.featuredFields.splice(fromIdx, 1);\n    this.featuredFields.splice(toIdx, 0, temp);\n    this.requestUpdate();\n\n    // Save the new order to the server\n    const list = event.currentTarget as SortableList;\n    setTimeout(() => {\n      postJSON(\n        this.priorityEndpoint,\n        list\n          .getIds()\n          .reverse()\n          .reduce((map, key, idx) => {\n            map[key] = idx;\n            return map;\n          }, {})\n      ).then(() => {\n        this.store.refreshFields();\n      });\n    }, 0);\n  }\n\n  private handleFieldAction(event: MouseEvent) {\n    const ele = event.target as HTMLDivElement;\n    const key = ele.dataset.key;\n    const action = ele.dataset.action;\n    this.fireCustomEvent(CustomEventType.Selection, { key, action });\n  }\n\n  private handleSearch(event) {\n    this.query = (event.target.value || '').trim();\n  }\n\n  private hasUsages(field: ContactField): boolean {\n    return (\n      field.usages.campaign_events + field.usages.flows + field.usages.groups >\n      0\n    );\n  }\n\n  private renderField(field: ContactField) {\n    return html`\n      <div\n        class=\"field sortable\"\n        id=\"${field.key}\"\n        style=\"\n            display: flex; \n            flex-direction: row; \n            align-items: center;\n            padding: 0.25em 1em;\"\n        @click=${(e: MouseEvent) => {\n          const ele = e.currentTarget as HTMLDivElement;\n          const key = ele.dataset.key;\n          const action = ele.dataset.action;\n          this.fireCustomEvent(CustomEventType.Selection, { key, action });\n        }}\n      >\n        <div\n          style=\"display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em\"\n        >\n          <span\n            @click=${this.handleFieldAction}\n            data-key=${field.key}\n            data-action=\"update\"\n            style=\"color: var(--color-link-primary); cursor:pointer;\"\n          >\n            ${field.label}\n          </span>\n          ${this.hasUsages(field)\n            ? html`\n                <temba-icon\n                  size=\"0.8\"\n                  style=\"color: #ccc; margin-left: 0.7em;\"\n                  name=\"usages\"\n                  data-key=${field.key}\n                  data-action=\"usages\"\n                  @click=${this.handleFieldAction}\n                  clickable\n                ></temba-icon>\n              `\n            : null}\n          <div class=\"flex-grow:1\"></div>\n        </div>\n        <div\n          style=\"flex-grow:1; font-family: Roboto Mono, monospace; font-size:0.8em;\"\n        >\n          @fields.${field.key}\n        </div>\n        <div>${TYPE_NAMES[field.value_type]}</div>\n        <temba-icon\n          style=\"pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0\"\n          name=\"delete_small\"\n          data-key=${field.key}\n          data-action=\"delete\"\n          @click=${this.handleFieldAction}\n        ></temba-icon>\n      </div>\n    `;\n  }\n\n  public render(): TemplateResult {\n    if (!this.featuredFields) {\n      return null;\n    }\n\n    return html`\n      <temba-textinput\n        id=\"search\"\n        placeholder=\"Search\"\n        @change=${this.handleSearch}\n        clearable\n        value=${this.query}\n      ></temba-textinput>\n\n      ${this.featuredFields.length > 0\n        ? html`\n            <div class=\"featured\">\n              <div class=\"header\">\n                <temba-icon name=\"featured\"></temba-icon>\n                <div class=\"label\">Featured</div>\n              </div>\n              ${this.query\n                ? html`\n                    <div class=\"scroll-box\">\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </div>\n                  `\n                : html`\n                    <temba-sortable-list\n                      @temba-order-changed=${this.handleOrderChanged}\n                    >\n                      ${this.featuredFields.map((field) =>\n                        this.renderField(field)\n                      )}\n                    </temba-sortable-list>\n                  `}\n            </div>\n          `\n        : null}\n\n      <div class=\"other-fields\">\n        <div class=\"header\">\n          <temba-icon name=\"fields\"></temba-icon>\n          <div class=\"label\">Everything Else</div>\n        </div>\n        <div class=\"scroll-box\">\n          ${this.otherFieldKeys.map((field) =>\n            this.renderField(this.store.getContactField(field))\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/flow/Editor.js

@@ -135,7 +135,7 @@ export class Editor extends RapidElement {
     updated(changes) {
         super.updated(changes);
         if (changes.has('canvasSize')) {
-            console.log('Setting canvas size', this.canvasSize);
+            // console.log('Setting canvas size', this.canvasSize);
         }
     }
     render() {

package/out-tsc/src/flow/Editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/flow/Editor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,GAAG,EAAoB,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAY,SAAS,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,OAAO,MAAO,SAAQ,YAAY;IACtC,0DAA0D;IAC1D,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAiBD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2GT,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAES,YAAY,CACpB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;QAC1D,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAEM,MAAM;QACX,2DAA2D;QAC3D,MAAM,KAAK,GAAG,IAAI,CAAA;QACd,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;QAChC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC;aAC/B,CAAC;QAEV,OAAO,IAAI,CAAA,GAAG,KAAK;;;;wCAIiB,IAAI,CAAC,UAAU,CAAC,KAAK,cAAc,IAAI;aAClE,UAAU,CAAC,MAAM;;;cAGhB,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACjC,OAAO,IAAI,CAAA;+BACE,IAAI,CAAC,OAAO;4BACf,IAAI;0BACN,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;sCACxB,CAAC;YACvB,CAAC,CAAC;YACJ,CAAC,CAAC,IAAI,CAAA,iCAAiC;;;aAGxC,CAAC;IACZ,CAAC;CACF;AA7KQ;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACP;AAGb;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACJ;AAGf;IADP,SAAS,CAAC,OAAO,EAAE,CAAC,KAAe,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC;0CAC1B;AAG5B;IADP,SAAS,CAAC,OAAO,EAAE,CAAC,KAAe,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC;0CACH","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport { css, PropertyValueMap, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FlowDefinition } from '../store/flow-definition';\nimport { getStore } from '../store/Store';\nimport { AppState, fromStore, zustand } from '../store/AppState';\nimport { RapidElement } from '../RapidElement';\n\nimport { Plumber } from './Plumber';\nimport { EditorNode } from './EditorNode';\n\nexport class Editor extends RapidElement {\n  // Unfortunately, jsplumb requires that we be in light DOM\n  createRenderRoot() {\n    return this;\n  }\n\n  // This is the master plumber\n  private plumber: Plumber;\n\n  @property({ type: String })\n  public flow: string;\n\n  @property({ type: String })\n  public version: string;\n\n  @fromStore(zustand, (state: AppState) => state.flowDefinition)\n  private definition!: FlowDefinition;\n\n  @fromStore(zustand, (state: AppState) => state.canvasSize)\n  private canvasSize!: { width: number; height: number };\n\n  static get styles() {\n    return css`\n      #editor {\n        overflow: scroll;\n        flex: 1;\n      }\n\n      #grid {\n        position: relative;\n        background-color: #f9f9f9;\n        background-position: 13px 13px;\n        background-image: linear-gradient(\n            0deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          ),\n          linear-gradient(\n            90deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          );\n        background-size: 40px 40px;\n        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);\n        border-top: 1px solid #e0e0e0;\n        display: inline-block;\n        width: 100%;\n      }\n\n      #canvas {\n        position: relative;\n        padding: 20px;\n        margin: 20px;\n      }\n\n      body .jtk-endpoint {\n        width: initial;\n        height: initial;\n      }\n\n      .jtk-endpoint {\n        z-index: 1;\n      }\n\n      .plumb-source {\n        z-index: 300;\n        border: 0px solid var(--color-connectors);\n      }\n\n      .plumb-source.connected {\n        box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);\n        border-radius: 50%;\n      }\n\n      .plumb-source circle {\n        fill: tomato;\n      }\n\n      .plumb-source.connected circle {\n        fill: #fff;\n      }\n\n      .plumb-source svg {\n        fill: var(--color-connectors) !important;\n        stroke: var(--color-connectors);\n      }\n\n      .plumb-target {\n        margin-top: -6px;\n        z-index: 200;\n        opacity: 0;\n        cursor: pointer;\n      }\n\n      body .plumb-connector path {\n        stroke: var(--color-connectors) !important;\n        stroke-width: 3px;\n      }\n\n      body .plumb-connector .plumb-arrow {\n        fill: var(--color-connectors);\n        stroke: var(--color-connectors);\n        stroke-width: 0px;\n        margin-top: 6px;\n      }\n\n      body svg.jtk-connector.jtk-hover path {\n        stroke: var(--color-success) !important;\n        stroke-width: 3px;\n      }\n\n      body .plumb-connector.jtk-hover .plumb-arrow {\n        fill: var(--color-success) !important;\n        stroke-width: 0px;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    this.plumber = new Plumber(this.querySelector('#canvas'));\n    if (changes.has('flow')) {\n      getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);\n    }\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('canvasSize')) {\n      console.log('Setting canvas size', this.canvasSize);\n    }\n  }\n\n  public render(): TemplateResult {\n    // we have to embed our own style since we are in light DOM\n    const style = html`<style>\n      ${unsafeCSS(Editor.styles.cssText)}\n      ${unsafeCSS(EditorNode.styles.cssText)}\n    </style>`;\n\n    return html`${style}\n      <div id=\"editor\">\n        <div\n          id=\"grid\"\n          style=\"min-width:100%;width:${this.canvasSize.width}px; height:${this\n            .canvasSize.height}px\"\n        >\n          <div id=\"canvas\">\n            ${this.definition\n              ? this.definition.nodes.map((node) => {\n                  return html`<temba-flow-node\n                    .plumber=${this.plumber}\n                    .node=${node}\n                    .ui=${this.definition._ui.nodes[node.uuid]}\n                  ></temba-flow-node>`;\n                })\n              : html`<temba-loading></temba-loading>`}\n          </div>\n        </div>\n      </div>`;\n  }\n}\n"]}
+{"version":3,"file":"Editor.js","sourceRoot":"","sources":["../../../src/flow/Editor.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,GAAG,EAAoB,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAY,SAAS,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,OAAO,MAAO,SAAQ,YAAY;IACtC,0DAA0D;IAC1D,gBAAgB;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAiBD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2GT,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAES,YAAY,CACpB,OAA0D;QAE1D,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;QAC1D,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,aAAa,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,uDAAuD;QACzD,CAAC;IACH,CAAC;IAEM,MAAM;QACX,2DAA2D;QAC3D,MAAM,KAAK,GAAG,IAAI,CAAA;QACd,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;QAChC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC;aAC/B,CAAC;QAEV,OAAO,IAAI,CAAA,GAAG,KAAK;;;;wCAIiB,IAAI,CAAC,UAAU,CAAC,KAAK,cAAc,IAAI;aAClE,UAAU,CAAC,MAAM;;;cAGhB,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACjC,OAAO,IAAI,CAAA;+BACE,IAAI,CAAC,OAAO;4BACf,IAAI;0BACN,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;sCACxB,CAAC;YACvB,CAAC,CAAC;YACJ,CAAC,CAAC,IAAI,CAAA,iCAAiC;;;aAGxC,CAAC;IACZ,CAAC;CACF;AA7KQ;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACP;AAGb;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACJ;AAGf;IADP,SAAS,CAAC,OAAO,EAAE,CAAC,KAAe,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC;0CAC1B;AAG5B;IADP,SAAS,CAAC,OAAO,EAAE,CAAC,KAAe,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC;0CACH","sourcesContent":["import { html, TemplateResult } from 'lit-html';\nimport { css, PropertyValueMap, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FlowDefinition } from '../store/flow-definition';\nimport { getStore } from '../store/Store';\nimport { AppState, fromStore, zustand } from '../store/AppState';\nimport { RapidElement } from '../RapidElement';\n\nimport { Plumber } from './Plumber';\nimport { EditorNode } from './EditorNode';\n\nexport class Editor extends RapidElement {\n  // Unfortunately, jsplumb requires that we be in light DOM\n  createRenderRoot() {\n    return this;\n  }\n\n  // This is the master plumber\n  private plumber: Plumber;\n\n  @property({ type: String })\n  public flow: string;\n\n  @property({ type: String })\n  public version: string;\n\n  @fromStore(zustand, (state: AppState) => state.flowDefinition)\n  private definition!: FlowDefinition;\n\n  @fromStore(zustand, (state: AppState) => state.canvasSize)\n  private canvasSize!: { width: number; height: number };\n\n  static get styles() {\n    return css`\n      #editor {\n        overflow: scroll;\n        flex: 1;\n      }\n\n      #grid {\n        position: relative;\n        background-color: #f9f9f9;\n        background-position: 13px 13px;\n        background-image: linear-gradient(\n            0deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          ),\n          linear-gradient(\n            90deg,\n            transparent 24%,\n            rgba(61, 177, 255, 0.15) 25%,\n            rgba(61, 177, 255, 0.15) 26%,\n            transparent 27%,\n            transparent 74%,\n            rgba(61, 177, 255, 0.15) 75%,\n            rgba(61, 177, 255, 0.15) 76%,\n            transparent 77%,\n            transparent\n          );\n        background-size: 40px 40px;\n        box-shadow: inset -5px 0 10px rgba(0, 0, 0, 0.05);\n        border-top: 1px solid #e0e0e0;\n        display: inline-block;\n        width: 100%;\n      }\n\n      #canvas {\n        position: relative;\n        padding: 20px;\n        margin: 20px;\n      }\n\n      body .jtk-endpoint {\n        width: initial;\n        height: initial;\n      }\n\n      .jtk-endpoint {\n        z-index: 1;\n      }\n\n      .plumb-source {\n        z-index: 300;\n        border: 0px solid var(--color-connectors);\n      }\n\n      .plumb-source.connected {\n        box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.1);\n        border-radius: 50%;\n      }\n\n      .plumb-source circle {\n        fill: tomato;\n      }\n\n      .plumb-source.connected circle {\n        fill: #fff;\n      }\n\n      .plumb-source svg {\n        fill: var(--color-connectors) !important;\n        stroke: var(--color-connectors);\n      }\n\n      .plumb-target {\n        margin-top: -6px;\n        z-index: 200;\n        opacity: 0;\n        cursor: pointer;\n      }\n\n      body .plumb-connector path {\n        stroke: var(--color-connectors) !important;\n        stroke-width: 3px;\n      }\n\n      body .plumb-connector .plumb-arrow {\n        fill: var(--color-connectors);\n        stroke: var(--color-connectors);\n        stroke-width: 0px;\n        margin-top: 6px;\n      }\n\n      body svg.jtk-connector.jtk-hover path {\n        stroke: var(--color-success) !important;\n        stroke-width: 3px;\n      }\n\n      body .plumb-connector.jtk-hover .plumb-arrow {\n        fill: var(--color-success) !important;\n        stroke-width: 0px;\n      }\n    `;\n  }\n\n  constructor() {\n    super();\n  }\n\n  protected firstUpdated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(changes);\n    this.plumber = new Plumber(this.querySelector('#canvas'));\n    if (changes.has('flow')) {\n      getStore().getState().fetchRevision(`/flow/revisions/${this.flow}`);\n    }\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('canvasSize')) {\n      // console.log('Setting canvas size', this.canvasSize);\n    }\n  }\n\n  public render(): TemplateResult {\n    // we have to embed our own style since we are in light DOM\n    const style = html`<style>\n      ${unsafeCSS(Editor.styles.cssText)}\n      ${unsafeCSS(EditorNode.styles.cssText)}\n    </style>`;\n\n    return html`${style}\n      <div id=\"editor\">\n        <div\n          id=\"grid\"\n          style=\"min-width:100%;width:${this.canvasSize.width}px; height:${this\n            .canvasSize.height}px\"\n        >\n          <div id=\"canvas\">\n            ${this.definition\n              ? this.definition.nodes.map((node) => {\n                  return html`<temba-flow-node\n                    .plumber=${this.plumber}\n                    .node=${node}\n                    .ui=${this.definition._ui.nodes[node.uuid]}\n                  ></temba-flow-node>`;\n                })\n              : html`<temba-loading></temba-loading>`}\n          </div>\n        </div>\n      </div>`;\n  }\n}\n"]}