@nyaruka/temba-components 0.35.3 → 0.37.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';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { StoreElement } from '../store/StoreElement';\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 StoreElement {\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      }\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 style=\"flex-grow:1; font-family: monospace; font-size:0.8em;\">\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      ></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 { StoreElement } from '../store/StoreElement';\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 StoreElement {\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      }\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 style=\"flex-grow:1; font-family: monospace; font-size:0.8em;\">\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      ></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"]}

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { StoreElement } from '../store/StoreElement';
 export class FlowStoreElement extends StoreElement {
     constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":"FlowStoreElement.js","sourceRoot":"","sources":["../../../src/flow/FlowStoreElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,OAAO,gBAAiB,SAAQ,YAAY;IAAlD;;QAQE,aAAQ,GAAG,0BAA0B,CAAC;IA4BxC,CAAC;IA1BC,WAAW,CAAC,IAAS;QACnB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;SAChB;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;aAC3C;iBAAM;gBACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;aACjB;SACF;IACH,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QACD,OAAO,IAAI,CAAA,aAAa,CAAC;IAC3B,CAAC;CACF;AAlCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CAC3B;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACW","sourcesContent":["import { html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { FlowDetails } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\n\nexport class FlowStoreElement extends StoreElement {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  data: FlowDetails;\n\n  @property({ type: String })\n  endpoint = '/api/v2/flows.json?uuid=';\n\n  prepareData(data: any) {\n    if (data && data.length > 0) {\n      data = data[0];\n    }\n    return data;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('flow')) {\n      if (this.flow) {\n        this.url = `${this.endpoint}${this.flow}`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    if (!this.data) {\n      return;\n    }\n    return html`<div></div>`;\n  }\n}\n"]}
+{"version":3,"file":"FlowStoreElement.js","sourceRoot":"","sources":["../../../src/flow/FlowStoreElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,OAAO,gBAAiB,SAAQ,YAAY;IAAlD;;QAQE,aAAQ,GAAG,0BAA0B,CAAC;IA4BxC,CAAC;IA1BC,WAAW,CAAC,IAAS;QACnB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YAC3B,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;SAChB;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACvB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;aAC3C;iBAAM;gBACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;aACjB;SACF;IACH,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,OAAO;SACR;QACD,OAAO,IAAI,CAAA,aAAa,CAAC;IAC3B,CAAC;CACF;AAlCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CAC3B;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACW","sourcesContent":["import { html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FlowDetails } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\n\nexport class FlowStoreElement extends StoreElement {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  data: FlowDetails;\n\n  @property({ type: String })\n  endpoint = '/api/v2/flows.json?uuid=';\n\n  prepareData(data: any) {\n    if (data && data.length > 0) {\n      data = data[0];\n    }\n    return data;\n  }\n\n  protected updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('flow')) {\n      if (this.flow) {\n        this.url = `${this.endpoint}${this.flow}`;\n      } else {\n        this.url = null;\n      }\n    }\n  }\n\n  public render(): TemplateResult {\n    if (!this.data) {\n      return;\n    }\n    return html`<div></div>`;\n  }\n}\n"]}

package/out-tsc/src/formfield/FormField.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 /**
  * A small wrapper to display labels and help text in a smartmin style.
  * This exists so we can display things consistently before restyling.

package/out-tsc/src/formfield/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/formfield/FormField.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QA4DE,cAAS,GAAG,KAAK,CAAC;QAGlB,eAAU,GAAG,KAAK,CAAC;QAGnB,WAAM,GAAa,EAAE,CAAC;QAGtB,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,EAAE,CAAC;QAGd,eAAU,GAAG,IAAI,CAAC;QAGlB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,EAAE,CAAC;QAGV,aAAQ,GAAG,KAAK,CAAC;IAuCnB,CAAC;IA1HC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDT,CAAC;IACJ,CAAC;IA6BM,MAAM;QACX,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU;YAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,EAAE;gBACxC,OAAO,IAAI,CAAA,6BAA6B,KAAK,SAAS,CAAC;YACzD,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,IAAI,CAAA;sBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC3C,MAAM;OACT,CAAC;SACH;QAED,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/C,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;YAC9C,CAAC,CAAC,IAAI,CAAA;kDACkC,IAAI,CAAC,IAAI;mBACxC,IAAI,CAAC,KAAK;;aAEhB;YACH,CAAC,CAAC,IAAI;;;;UAIN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM;YACzC,CAAC,CAAC,IAAI,CAAA;sCACsB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI;kBAC1D,IAAI,CAAC,QAAQ;;aAElB;YACH,CAAC,CAAC,IAAI;UACN,MAAM;;KAEX,CAAC;IACJ,CAAC;CACF;AA/DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CACnC;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CACnC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACtB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CACrC;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CACpC;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX","sourcesContent":["import { TemplateResult, html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators';\n\n/**\n * A small wrapper to display labels and help text in a smartmin style.\n * This exists so we can display things consistently before restyling.\n */\nexport class FormField extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        font-family: var(--font-family);\n      }\n\n      label {\n        margin-bottom: 5px;\n        margin-left: 4px;\n        display: block;\n        font-weight: 400;\n        font-size: var(--label-size);\n        letter-spacing: 0.05em;\n        line-height: normal;\n        color: #777;\n      }\n\n      .help-text {\n        font-size: var(--help-text-size);\n        line-height: normal;\n        color: var(--color-text-help);\n        margin-left: var(--help-text-margin-left);\n        margin-top: -16px;\n        opacity: 0;\n        transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;\n        pointer-events: none;\n      }\n\n      .help-text.help-always {\n        opacity: 1;\n        margin-top: 6px;\n        margin-left: var(--help-text-margin-left);\n      }\n\n      .field:focus-within .help-text {\n        margin-top: 6px;\n        opacity: 1;\n      }\n\n      .alert-error {\n        background: rgba(255, 181, 181, 0.17);\n        border: none;\n        border-left: 0px solid var(--color-error);\n        color: var(--color-error);\n        padding: 10px;\n        margin: 15px 0px;\n        border-radius: var(--curvature);\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n      }\n\n      .disabled {\n        opacity: 0.6 !important;\n        pointer-events: none !important;\n      }\n    `;\n  }\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel = false;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly = false;\n\n  @property({ type: Array, attribute: false })\n  errors: string[] = [];\n\n  @property({ type: Boolean })\n  hideErrors = false;\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText = '';\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways = true;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  public render(): TemplateResult {\n    const errors = !this.hideErrors\n      ? (this.errors || []).map((error: string) => {\n          return html` <div class=\"alert-error\">${error}</div> `;\n        })\n      : [];\n\n    if (this.widgetOnly) {\n      return html`\n        <div class=\"${this.disabled ? 'disabled' : ''}\"><slot></slot></div>\n        ${errors}\n      `;\n    }\n\n    return html`\n      <div class=\"field ${this.disabled ? 'disabled' : ''}\">\n        ${!!this.name && !this.hideLabel && !!this.label\n          ? html`\n              <label class=\"control-label\" for=\"${this.name}\"\n                >${this.label}</label\n              >\n            `\n          : null}\n        <div class=\"widget\">\n          <slot></slot>\n        </div>\n        ${this.helpText && this.helpText !== 'None'\n          ? html`\n              <div class=\"help-text ${this.helpAlways ? 'help-always' : null}\">\n                ${this.helpText}\n              </div>\n            `\n          : null}\n        ${errors}\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/formfield/FormField.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QA4DE,cAAS,GAAG,KAAK,CAAC;QAGlB,eAAU,GAAG,KAAK,CAAC;QAGnB,WAAM,GAAa,EAAE,CAAC;QAGtB,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,EAAE,CAAC;QAGd,eAAU,GAAG,IAAI,CAAC;QAGlB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,EAAE,CAAC;QAGV,aAAQ,GAAG,KAAK,CAAC;IAuCnB,CAAC;IA1HC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDT,CAAC;IACJ,CAAC;IA6BM,MAAM;QACX,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU;YAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,EAAE;gBACxC,OAAO,IAAI,CAAA,6BAA6B,KAAK,SAAS,CAAC;YACzD,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,OAAO,IAAI,CAAA;sBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC3C,MAAM;OACT,CAAC;SACH;QAED,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/C,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;YAC9C,CAAC,CAAC,IAAI,CAAA;kDACkC,IAAI,CAAC,IAAI;mBACxC,IAAI,CAAC,KAAK;;aAEhB;YACH,CAAC,CAAC,IAAI;;;;UAIN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM;YACzC,CAAC,CAAC,IAAI,CAAA;sCACsB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI;kBAC1D,IAAI,CAAC,QAAQ;;aAElB;YACH,CAAC,CAAC,IAAI;UACN,MAAM;;KAEX,CAAC;IACJ,CAAC;CACF;AA/DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CACnC;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CACnC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACtB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CACrC;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CACpC;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX","sourcesContent":["import { TemplateResult, html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * A small wrapper to display labels and help text in a smartmin style.\n * This exists so we can display things consistently before restyling.\n */\nexport class FormField extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        font-family: var(--font-family);\n      }\n\n      label {\n        margin-bottom: 5px;\n        margin-left: 4px;\n        display: block;\n        font-weight: 400;\n        font-size: var(--label-size);\n        letter-spacing: 0.05em;\n        line-height: normal;\n        color: #777;\n      }\n\n      .help-text {\n        font-size: var(--help-text-size);\n        line-height: normal;\n        color: var(--color-text-help);\n        margin-left: var(--help-text-margin-left);\n        margin-top: -16px;\n        opacity: 0;\n        transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;\n        pointer-events: none;\n      }\n\n      .help-text.help-always {\n        opacity: 1;\n        margin-top: 6px;\n        margin-left: var(--help-text-margin-left);\n      }\n\n      .field:focus-within .help-text {\n        margin-top: 6px;\n        opacity: 1;\n      }\n\n      .alert-error {\n        background: rgba(255, 181, 181, 0.17);\n        border: none;\n        border-left: 0px solid var(--color-error);\n        color: var(--color-error);\n        padding: 10px;\n        margin: 15px 0px;\n        border-radius: var(--curvature);\n        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n          0 1px 2px 0 rgba(0, 0, 0, 0.06);\n      }\n\n      .disabled {\n        opacity: 0.6 !important;\n        pointer-events: none !important;\n      }\n    `;\n  }\n\n  @property({ type: Boolean, attribute: 'hide_label' })\n  hideLabel = false;\n\n  @property({ type: Boolean, attribute: 'widget_only' })\n  widgetOnly = false;\n\n  @property({ type: Array, attribute: false })\n  errors: string[] = [];\n\n  @property({ type: Boolean })\n  hideErrors = false;\n\n  @property({ type: String, attribute: 'help_text' })\n  helpText = '';\n\n  @property({ type: Boolean, attribute: 'help_always' })\n  helpAlways = true;\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  public render(): TemplateResult {\n    const errors = !this.hideErrors\n      ? (this.errors || []).map((error: string) => {\n          return html` <div class=\"alert-error\">${error}</div> `;\n        })\n      : [];\n\n    if (this.widgetOnly) {\n      return html`\n        <div class=\"${this.disabled ? 'disabled' : ''}\"><slot></slot></div>\n        ${errors}\n      `;\n    }\n\n    return html`\n      <div class=\"field ${this.disabled ? 'disabled' : ''}\">\n        ${!!this.name && !this.hideLabel && !!this.label\n          ? html`\n              <label class=\"control-label\" for=\"${this.name}\"\n                >${this.label}</label\n              >\n            `\n          : null}\n        <div class=\"widget\">\n          <slot></slot>\n        </div>\n        ${this.helpText && this.helpText !== 'None'\n          ? html`\n              <div class=\"help-text ${this.helpAlways ? 'help-always' : null}\">\n                ${this.helpText}\n              </div>\n            `\n          : null}\n        ${errors}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/label/Label.js

@@ -1,8 +1,8 @@
 import { __decorate } from "tslib";
 import { LitElement, html, css } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { getClasses } from '../utils';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 export default class Label extends LitElement {
     static get styles() {
         return css `

package/out-tsc/src/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/label/Label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyET,CAAC;IACJ,CAAC;IAgCM,MAAM;QACX,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,UAAU,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC;SACjD;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;YACrC,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;SAC7C;QAED,OAAO,IAAI,CAAA;;uBAEQ,UAAU,CAAC;YACxB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;gBACM,QAAQ,CAAC,UAAU,CAAC;;;YAGxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;;;;KAIhE,CAAC;IACJ,CAAC;CACF;AA5DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCACd;AAGb;IADC,QAAQ,EAAE;8CACa;AAGxB;IADC,QAAQ,EAAE;wCACO","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map';\n\nexport default class Label extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline-block;\n      }\n\n      slot {\n        white-space: nowrap;\n      }\n\n      .mask {\n        padding: 3px 8px;\n        border-radius: 12px;\n        display: flex;\n      }\n\n      temba-icon {\n        margin-right: 0.3em;\n        padding-bottom: 0.1em;\n      }\n\n      .label.clickable .mask:hover {\n        background: rgb(0, 0, 0, 0.05);\n      }\n\n      .label {\n        font-size: 0.8em;\n        font-weight: 400;\n        border-radius: 12px;\n        box-shadow: 0 0.04em 0.08em rgba(0, 0, 0, 0.15);\n        background: var(--color-overlay-light);\n        color: var(--color-overlay-light-text);\n        --icon-color: var(--color-overlay-light-text);\n        text-shadow: none;\n      }\n\n      .danger {\n        background: tomato;\n        color: #fff;\n        --icon-color: #fff;\n      }\n\n      .primary {\n        background: var(--color-primary-dark);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .secondary {\n        background: var(--color-secondary-dark);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .tertiary {\n        background: var(--color-tertiary);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .dark {\n        background: var(--color-overlay-dark);\n        color: var(--color-overlay-dark-text);\n        --icon-color: var(--color-overlay-dark-text);\n        text-shadow: none;\n      }\n\n      .clickable {\n        cursor: pointer;\n      }\n\n      .shadow {\n        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  primary: boolean;\n\n  @property({ type: Boolean })\n  secondary: boolean;\n\n  @property({ type: Boolean })\n  tertiary: boolean;\n\n  @property({ type: Boolean })\n  danger: boolean;\n\n  @property({ type: Boolean })\n  dark: boolean;\n\n  @property({ type: Boolean })\n  shadow: boolean;\n\n  @property({ type: String })\n  icon: string;\n\n  @property()\n  backgroundColor: string;\n\n  @property()\n  textColor: string;\n\n  public render(): TemplateResult {\n    const labelStyle = {};\n\n    if (this.backgroundColor) {\n      labelStyle['background'] = this.backgroundColor;\n    }\n\n    if (this.textColor) {\n      labelStyle['color'] = this.textColor;\n      labelStyle['--icon-color'] = this.textColor;\n    }\n\n    return html`\n      <div\n        class=\"label ${getClasses({\n          clickable: this.clickable,\n          primary: this.primary,\n          secondary: this.secondary,\n          tertiary: this.tertiary,\n          shadow: this.shadow,\n          danger: this.danger,\n        })}\"\n        style=${styleMap(labelStyle)}\n      >\n        <div class=\"mask\">\n          ${this.icon ? html`<temba-icon name=${this.icon} />` : null}\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/label/Label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyET,CAAC;IACJ,CAAC;IAgCM,MAAM;QACX,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,UAAU,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC;SACjD;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;YACrC,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;SAC7C;QAED,OAAO,IAAI,CAAA;;uBAEQ,UAAU,CAAC;YACxB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;gBACM,QAAQ,CAAC,UAAU,CAAC;;;YAGxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;;;;KAIhE,CAAC;IACJ,CAAC;CACF;AA5DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCACd;AAGb;IADC,QAAQ,EAAE;8CACa;AAGxB;IADC,QAAQ,EAAE;wCACO","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport default class Label extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        display: inline-block;\n      }\n\n      slot {\n        white-space: nowrap;\n      }\n\n      .mask {\n        padding: 3px 8px;\n        border-radius: 12px;\n        display: flex;\n      }\n\n      temba-icon {\n        margin-right: 0.3em;\n        padding-bottom: 0.1em;\n      }\n\n      .label.clickable .mask:hover {\n        background: rgb(0, 0, 0, 0.05);\n      }\n\n      .label {\n        font-size: 0.8em;\n        font-weight: 400;\n        border-radius: 12px;\n        box-shadow: 0 0.04em 0.08em rgba(0, 0, 0, 0.15);\n        background: var(--color-overlay-light);\n        color: var(--color-overlay-light-text);\n        --icon-color: var(--color-overlay-light-text);\n        text-shadow: none;\n      }\n\n      .danger {\n        background: tomato;\n        color: #fff;\n        --icon-color: #fff;\n      }\n\n      .primary {\n        background: var(--color-primary-dark);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .secondary {\n        background: var(--color-secondary-dark);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .tertiary {\n        background: var(--color-tertiary);\n        color: var(--color-text-light);\n        --icon-color: var(--color-text-light);\n      }\n\n      .dark {\n        background: var(--color-overlay-dark);\n        color: var(--color-overlay-dark-text);\n        --icon-color: var(--color-overlay-dark-text);\n        text-shadow: none;\n      }\n\n      .clickable {\n        cursor: pointer;\n      }\n\n      .shadow {\n        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  clickable: boolean;\n\n  @property({ type: Boolean })\n  primary: boolean;\n\n  @property({ type: Boolean })\n  secondary: boolean;\n\n  @property({ type: Boolean })\n  tertiary: boolean;\n\n  @property({ type: Boolean })\n  danger: boolean;\n\n  @property({ type: Boolean })\n  dark: boolean;\n\n  @property({ type: Boolean })\n  shadow: boolean;\n\n  @property({ type: String })\n  icon: string;\n\n  @property()\n  backgroundColor: string;\n\n  @property()\n  textColor: string;\n\n  public render(): TemplateResult {\n    const labelStyle = {};\n\n    if (this.backgroundColor) {\n      labelStyle['background'] = this.backgroundColor;\n    }\n\n    if (this.textColor) {\n      labelStyle['color'] = this.textColor;\n      labelStyle['--icon-color'] = this.textColor;\n    }\n\n    return html`\n      <div\n        class=\"label ${getClasses({\n          clickable: this.clickable,\n          primary: this.primary,\n          secondary: this.secondary,\n          tertiary: this.tertiary,\n          shadow: this.shadow,\n          danger: this.danger,\n        })}\"\n        style=${styleMap(labelStyle)}\n      >\n        <div class=\"mask\">\n          ${this.icon ? html`<temba-icon name=${this.icon} />` : null}\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/leafletmap/LeafletMap.js

@@ -1,21 +1,10 @@
 import { __decorate } from "tslib";
 import { geoJSON, map as createMap, } from 'leaflet';
 import { css, html, LitElement } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { getUrl } from '../utils';
 import { highlightedFeature, normalFeature, visibleStyle } from './helpers';
 export class LeafletMap extends LitElement {
-    constructor() {
-        super();
-        this.osmId = '';
-        this.endpoint = '';
-        this.hovered = null;
-        this.path = [];
-        this.renderedMap = null;
-        this.states = null;
-        this.paths = {};
-        this.lastHovered = null;
-    }
     static get styles() {
         return css `
       :host {
@@ -54,6 +43,17 @@ export class LeafletMap extends LitElement {
       }
     `;
     }
+    constructor() {
+        super();
+        this.osmId = '';
+        this.endpoint = '';
+        this.hovered = null;
+        this.path = [];
+        this.renderedMap = null;
+        this.states = null;
+        this.paths = {};
+        this.lastHovered = null;
+    }
     getRenderRoot() {
         return this.renderRoot;
     }

package/out-tsc/src/leafletmap/LeafletMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeafletMap.js","sourceRoot":"","sources":["../../../src/leafletmap/LeafletMap.ts"],"names":[],"mappings":";AACA,OAAO,EAEL,OAAO,EAIP,GAAG,IAAI,SAAS,GAEjB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE5E,MAAM,OAAO,UAAW,SAAQ,UAAU;IA6DxC;QACE,KAAK,EAAE,CAAC;QAlBV,UAAK,GAAG,EAAE,CAAC;QAGX,aAAQ,GAAG,EAAE,CAAC;QAMd,YAAO,GAAsB,IAAI,CAAC;QAGlC,SAAI,GAAwB,EAAE,CAAC;QAE/B,gBAAW,GAAgB,IAAI,CAAC;QAChC,WAAM,GAAiB,IAAI,CAAC;QAc5B,UAAK,GAA8B,EAAE,CAAC;QACtC,gBAAW,GAAS,IAAI,CAAC;IAXzB,CAAC;IA9DD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT,CAAC;IACJ,CAAC;IA2BO,aAAa;QACnB,OAAO,IAAI,CAAC,UAA8B,CAAC;IAC7C,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACnE,CAAC;IAKO,UAAU;QAChB,MAAM,aAAa,GAAG,CAAC,OAA+B,EAAE,IAAU,EAAE,EAAE;YACpE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;YAE7C,IAAI,CAAC,EAAE,CAAC;gBACN,KAAK,EAAE,CAAC,KAAwB,EAAE,EAAE;oBAClC,MAAM,OAAO,GAAsB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC;oBACnE,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;wBAC7D,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC;wBAEjC,IAAI,CAAC,eAAe,EAAE,CAAC;wBACvB,IAAI,CAAC,cAAc,EAAE,CAAC;wBAEtB,IAAI,IAAI,CAAC,gBAAgB,EAAE;4BACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;yBAChC;wBAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;wBACpB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;wBACxB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC;wBAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;qBACnB;gBACH,CAAC;gBACD,SAAS,EAAE,CAAC,KAAmB,EAAE,EAAE;oBACjC,MAAM,OAAO,GAAsB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC;oBACnE,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE;wBAC7D,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;wBAC1C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;qBACxB;gBACH,CAAC;gBACD,QAAQ,EAAE,CAAC,KAAmB,EAAE,EAAE;oBAChC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;oBACrC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACtB,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,IAAI,CAC9D,CAAC,QAAqB,EAAE,EAAE;YACxB,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;aAC3C;YAED,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC1B,IAAI,CAAC,IAAI,GAAG;oBACV;wBACE,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,MAAM,EAAE,IAAI,CAAC,KAAK;wBAClB,KAAK,EAAE,CAAC;qBACT;iBACF,CAAC;aACH;YAED,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACnC,KAAK,EAAE,YAAY;gBACnB,aAAa;aACd,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,CAAC,CACF,CAAC;IACJ,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YACpC,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;aAC1C;YAED,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBAC9C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,IAAI,KAAK,EAAE;oBACT,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;iBACpC;aACF;SACF;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;YACpD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IACE,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;gBACtB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,EAC9D;gBACA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC9B;SACF;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,MAAM,IAAI,GAAwB,EAAE,CAAC;YACrC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;gBAC/B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACnB,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,EAAE;oBACjC,IAAI,IAAI,CAAC,gBAAgB,EAAE;wBACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;qBAChC;oBACD,MAAM;iBACP;aACF;YAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YAEjB,IAAI,CAAC,UAAU,EAAE,CAAC;SACnB;IACH,CAAC;IAEM,YAAY,CAAC,iBAAsB;QACxC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QACpE,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE;YACvC,kBAAkB,EAAE,KAAK;YACzB,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;QAE3C,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;IACxC,CAAC;IAEO,uBAAuB,CAAC,CAAa;QAC3C,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,aAA6B,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACzE,MAAM,IAAI,GAAwB,EAAE,CAAC;QACrC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE;YAC/B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnB,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,EAAE;gBACjC,IAAI,IAAI,CAAC,gBAAgB,EAAE;oBACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;iBAChC;gBACD,MAAM;aACP;SACF;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACf,OAAO,IAAI,CAAA,0BAA0B,CAAC;SACvC;QAED,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;CACF;AA1LC;IADC,QAAQ,EAAE;2CACgB;AAG3B;IADC,QAAQ,EAAE;yCACA;AAGX;IADC,QAAQ,EAAE;4CACG;AAGd;IADC,QAAQ,EAAE;oDAC4C;AAGvD;IADC,QAAQ,EAAE;2CACuB;AAGlC;IADC,QAAQ,EAAE;wCACoB","sourcesContent":["import { Feature, Geometry } from 'geojson';\nimport {\n  GeoJSON,\n  geoJSON,\n  LeafletEvent,\n  LeafletMouseEvent,\n  Map as RenderedMap,\n  map as createMap,\n  Path,\n} from 'leaflet';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators';\n\nimport { FeatureProperties } from '../interfaces';\nimport { getUrl, WebResponse } from '../utils';\nimport { highlightedFeature, normalFeature, visibleStyle } from './helpers';\n\nexport class LeafletMap extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        padding: 0px;\n      }\n\n      #alias-map {\n        top: 0px;\n        height: 100%;\n      }\n\n      .leaflet-container {\n        background: transparent;\n      }\n\n      .path {\n        position: absolute;\n        color: #666;\n      }\n\n      .path > .step {\n        display: inline-block;\n        font-size: 12px;\n        margin-left: 5px;\n      }\n\n      .path > .step.hovered {\n        color: #999;\n      }\n\n      .path > .step.linked {\n        text-decoration: underline;\n        color: var(--color-link-primary);\n        cursor: pointer;\n      }\n    `;\n  }\n\n  @property()\n  feature: FeatureProperties;\n\n  @property()\n  osmId = '';\n\n  @property()\n  endpoint = '';\n\n  @property()\n  onFeatureClicked: (feature: FeatureProperties) => void;\n\n  @property()\n  hovered: FeatureProperties = null;\n\n  @property()\n  path: FeatureProperties[] = [];\n\n  renderedMap: RenderedMap = null;\n  states: GeoJSON<any> = null;\n\n  constructor() {\n    super();\n  }\n\n  private getRenderRoot(): DocumentFragment {\n    return this.renderRoot as DocumentFragment;\n  }\n\n  private getEndpoint(): string {\n    return this.endpoint + (!this.endpoint.endsWith('/') ? '/' : '');\n  }\n\n  paths: { [osmId: string]: Path } = {};\n  lastHovered: Path = null;\n\n  private refreshMap(): void {\n    const onEachFeature = (feature: Feature<Geometry, any>, path: Path) => {\n      this.paths[feature.properties.osm_id] = path;\n\n      path.on({\n        click: (event: LeafletMouseEvent) => {\n          const feature: FeatureProperties = event.target.feature.properties;\n          if (feature.osm_id !== this.path[this.path.length - 1].osm_id) {\n            const orig = event.originalEvent;\n\n            orig.stopPropagation();\n            orig.preventDefault();\n\n            if (this.onFeatureClicked) {\n              this.onFeatureClicked(feature);\n            }\n\n            this.hovered = null;\n            this.path.push(feature);\n            this.osmId = feature.osm_id;\n            this.refreshMap();\n          }\n        },\n        mouseover: (event: LeafletEvent) => {\n          const feature: FeatureProperties = event.target.feature.properties;\n          if (feature.osm_id !== this.path[this.path.length - 1].osm_id) {\n            event.target.setStyle(highlightedFeature);\n            this.hovered = feature;\n          }\n        },\n        mouseout: (event: LeafletEvent) => {\n          event.target.setStyle(normalFeature);\n          this.hovered = null;\n        },\n      });\n    };\n\n    getUrl(this.getEndpoint() + 'geometry/' + this.osmId + '/').then(\n      (response: WebResponse) => {\n        if (this.states) {\n          this.renderedMap.removeLayer(this.states);\n        }\n\n        const data = response.json;\n        if (this.path.length === 0) {\n          this.path = [\n            {\n              name: data.name,\n              osm_id: this.osmId,\n              level: 0,\n            },\n          ];\n        }\n\n        this.states = geoJSON(data.geometry, {\n          style: visibleStyle,\n          onEachFeature,\n        });\n        this.renderedMap.fitBounds(this.states.getBounds(), {});\n        this.states.addTo(this.renderedMap);\n      }\n    );\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('hovered')) {\n      if (this.lastHovered) {\n        this.lastHovered.setStyle(normalFeature);\n      }\n\n      if (this.hovered) {\n        const layer = this.paths[this.hovered.osm_id];\n        this.lastHovered = layer;\n        if (layer) {\n          layer.setStyle(highlightedFeature);\n        }\n      }\n    }\n\n    if (changedProperties.has('feature') && this.feature) {\n      this.hovered = null;\n      if (\n        this.path.length === 0 ||\n        this.path[this.path.length - 1].osm_id !== this.feature.osm_id\n      ) {\n        this.path.push(this.feature);\n      }\n    }\n\n    if (changedProperties.has('osmId')) {\n      const path: FeatureProperties[] = [];\n      for (const feature of this.path) {\n        path.push(feature);\n        if (feature.osm_id === this.osmId) {\n          if (this.onFeatureClicked) {\n            this.onFeatureClicked(feature);\n          }\n          break;\n        }\n      }\n\n      this.path = path;\n\n      this.refreshMap();\n    }\n  }\n\n  public firstUpdated(changedProperties: any) {\n    const mapElement = this.getRenderRoot().getElementById('alias-map');\n    this.renderedMap = createMap(mapElement, {\n      attributionControl: false,\n      scrollWheelZoom: false,\n      zoomControl: false,\n    }).setView([0, 1], 4);\n    this.renderedMap.dragging.disable();\n    this.renderedMap.doubleClickZoom.disable();\n\n    this.refreshMap();\n    super.firstUpdated(changedProperties);\n  }\n\n  private handleClickedBreadcrumb(e: MouseEvent): void {\n    this.osmId = (e.currentTarget as HTMLElement).getAttribute('data-osmid');\n    const path: FeatureProperties[] = [];\n    for (const feature of this.path) {\n      path.push(feature);\n      if (feature.osm_id === this.osmId) {\n        if (this.onFeatureClicked) {\n          this.onFeatureClicked(feature);\n        }\n        break;\n      }\n    }\n\n    this.path = path;\n    this.refreshMap();\n  }\n\n  render() {\n    if (!this.osmId) {\n      return html`<div>No osm map id</div>`;\n    }\n\n    return html`\n      <link\n        rel=\"stylesheet\"\n        href=\"https://unpkg.com/leaflet@1.5.1/dist/leaflet.css\"\n      />\n      <div id=\"alias-map\"></div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"LeafletMap.js","sourceRoot":"","sources":["../../../src/leafletmap/LeafletMap.ts"],"names":[],"mappings":"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","sourcesContent":["import { Feature, Geometry } from 'geojson';\nimport {\n  GeoJSON,\n  geoJSON,\n  LeafletEvent,\n  LeafletMouseEvent,\n  Map as RenderedMap,\n  map as createMap,\n  Path,\n} from 'leaflet';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { FeatureProperties } from '../interfaces';\nimport { getUrl, WebResponse } from '../utils';\nimport { highlightedFeature, normalFeature, visibleStyle } from './helpers';\n\nexport class LeafletMap extends LitElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n        padding: 0px;\n      }\n\n      #alias-map {\n        top: 0px;\n        height: 100%;\n      }\n\n      .leaflet-container {\n        background: transparent;\n      }\n\n      .path {\n        position: absolute;\n        color: #666;\n      }\n\n      .path > .step {\n        display: inline-block;\n        font-size: 12px;\n        margin-left: 5px;\n      }\n\n      .path > .step.hovered {\n        color: #999;\n      }\n\n      .path > .step.linked {\n        text-decoration: underline;\n        color: var(--color-link-primary);\n        cursor: pointer;\n      }\n    `;\n  }\n\n  @property()\n  feature: FeatureProperties;\n\n  @property()\n  osmId = '';\n\n  @property()\n  endpoint = '';\n\n  @property()\n  onFeatureClicked: (feature: FeatureProperties) => void;\n\n  @property()\n  hovered: FeatureProperties = null;\n\n  @property()\n  path: FeatureProperties[] = [];\n\n  renderedMap: RenderedMap = null;\n  states: GeoJSON<any> = null;\n\n  constructor() {\n    super();\n  }\n\n  private getRenderRoot(): DocumentFragment {\n    return this.renderRoot as DocumentFragment;\n  }\n\n  private getEndpoint(): string {\n    return this.endpoint + (!this.endpoint.endsWith('/') ? '/' : '');\n  }\n\n  paths: { [osmId: string]: Path } = {};\n  lastHovered: Path = null;\n\n  private refreshMap(): void {\n    const onEachFeature = (feature: Feature<Geometry, any>, path: Path) => {\n      this.paths[feature.properties.osm_id] = path;\n\n      path.on({\n        click: (event: LeafletMouseEvent) => {\n          const feature: FeatureProperties = event.target.feature.properties;\n          if (feature.osm_id !== this.path[this.path.length - 1].osm_id) {\n            const orig = event.originalEvent;\n\n            orig.stopPropagation();\n            orig.preventDefault();\n\n            if (this.onFeatureClicked) {\n              this.onFeatureClicked(feature);\n            }\n\n            this.hovered = null;\n            this.path.push(feature);\n            this.osmId = feature.osm_id;\n            this.refreshMap();\n          }\n        },\n        mouseover: (event: LeafletEvent) => {\n          const feature: FeatureProperties = event.target.feature.properties;\n          if (feature.osm_id !== this.path[this.path.length - 1].osm_id) {\n            event.target.setStyle(highlightedFeature);\n            this.hovered = feature;\n          }\n        },\n        mouseout: (event: LeafletEvent) => {\n          event.target.setStyle(normalFeature);\n          this.hovered = null;\n        },\n      });\n    };\n\n    getUrl(this.getEndpoint() + 'geometry/' + this.osmId + '/').then(\n      (response: WebResponse) => {\n        if (this.states) {\n          this.renderedMap.removeLayer(this.states);\n        }\n\n        const data = response.json;\n        if (this.path.length === 0) {\n          this.path = [\n            {\n              name: data.name,\n              osm_id: this.osmId,\n              level: 0,\n            },\n          ];\n        }\n\n        this.states = geoJSON(data.geometry, {\n          style: visibleStyle,\n          onEachFeature,\n        });\n        this.renderedMap.fitBounds(this.states.getBounds(), {});\n        this.states.addTo(this.renderedMap);\n      }\n    );\n  }\n\n  public updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('hovered')) {\n      if (this.lastHovered) {\n        this.lastHovered.setStyle(normalFeature);\n      }\n\n      if (this.hovered) {\n        const layer = this.paths[this.hovered.osm_id];\n        this.lastHovered = layer;\n        if (layer) {\n          layer.setStyle(highlightedFeature);\n        }\n      }\n    }\n\n    if (changedProperties.has('feature') && this.feature) {\n      this.hovered = null;\n      if (\n        this.path.length === 0 ||\n        this.path[this.path.length - 1].osm_id !== this.feature.osm_id\n      ) {\n        this.path.push(this.feature);\n      }\n    }\n\n    if (changedProperties.has('osmId')) {\n      const path: FeatureProperties[] = [];\n      for (const feature of this.path) {\n        path.push(feature);\n        if (feature.osm_id === this.osmId) {\n          if (this.onFeatureClicked) {\n            this.onFeatureClicked(feature);\n          }\n          break;\n        }\n      }\n\n      this.path = path;\n\n      this.refreshMap();\n    }\n  }\n\n  public firstUpdated(changedProperties: any) {\n    const mapElement = this.getRenderRoot().getElementById('alias-map');\n    this.renderedMap = createMap(mapElement, {\n      attributionControl: false,\n      scrollWheelZoom: false,\n      zoomControl: false,\n    }).setView([0, 1], 4);\n    this.renderedMap.dragging.disable();\n    this.renderedMap.doubleClickZoom.disable();\n\n    this.refreshMap();\n    super.firstUpdated(changedProperties);\n  }\n\n  private handleClickedBreadcrumb(e: MouseEvent): void {\n    this.osmId = (e.currentTarget as HTMLElement).getAttribute('data-osmid');\n    const path: FeatureProperties[] = [];\n    for (const feature of this.path) {\n      path.push(feature);\n      if (feature.osm_id === this.osmId) {\n        if (this.onFeatureClicked) {\n          this.onFeatureClicked(feature);\n        }\n        break;\n      }\n    }\n\n    this.path = path;\n    this.refreshMap();\n  }\n\n  render() {\n    if (!this.osmId) {\n      return html`<div>No osm map id</div>`;\n    }\n\n    return html`\n      <link\n        rel=\"stylesheet\"\n        href=\"https://unpkg.com/leaflet@1.5.1/dist/leaflet.css\"\n      />\n      <div id=\"alias-map\"></div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/list/ContentMenu.js

@@ -0,0 +1,176 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { CustomEventType } from '../interfaces';
+import { RapidElement } from '../RapidElement';
+import { getUrl } from '../utils';
+const HEADERS = {
+    'Temba-Content-Menu': '1',
+    'Temba-Spa': '1',
+};
+export var ContentMenuItemType;
+(function (ContentMenuItemType) {
+    ContentMenuItemType["LINK"] = "link";
+    ContentMenuItemType["JS"] = "js";
+    ContentMenuItemType["URL_POST"] = "url_post";
+    ContentMenuItemType["MODAX"] = "modax";
+    ContentMenuItemType["DIVIDER"] = "divider";
+})(ContentMenuItemType || (ContentMenuItemType = {}));
+export class ContentMenu extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.buttons = [];
+        this.items = [];
+    }
+    static get styles() {
+        return css `
+      .container {
+        --button-y: 0.4em;
+        --button-x: 1em;
+        display: flex;
+      }
+
+      .button_item,
+      .primary_button_item {
+        margin-left: 1rem;
+      }
+
+      .toggle {
+        --icon-color: rgb(102, 102, 102);
+        padding: 0.5rem;
+        margin-left: 0.5rem;
+      }
+
+      .toggle:hover {
+        background: rgba(0, 0, 0, 0.05);
+        border-radius: var(--curvature);
+        --icon-color: rgb(136, 136, 136);
+      }
+
+      .dropdown {
+        padding: 1rem 1.5rem;
+        color: rgb(45, 45, 45);
+        z-index: 50;
+        min-width: 200px;
+      }
+
+      .divider {
+        border-bottom: 1px solid rgb(237, 237, 237);
+        margin: 1rem -1.5em;
+      }
+
+      .item {
+        white-space: nowrap;
+        margin: 0.2em 0em;
+        font-size: 1.1rem;
+        cursor: pointer;
+        font-weight: 400;
+      }
+
+      .item:hover {
+        color: rgb(var(--primary-rgb));
+      }
+    `;
+    }
+    fetchContentMenu() {
+        const url = this.endpoint;
+        if (url) {
+            const legacy = this.legacy;
+            const headers = HEADERS;
+            if (legacy) {
+                delete headers['Temba-Spa'];
+            }
+            //ok, fetch the content menu
+            getUrl(url, null, headers)
+                .then((response) => {
+                const json = response.json;
+                const contentMenu = json.items;
+                //populate (or initialize) the buttons and items
+                if (contentMenu) {
+                    this.buttons = contentMenu.filter(item => item.as_button);
+                    this.items = contentMenu.filter(item => !item.as_button);
+                }
+                else {
+                    this.buttons = [];
+                    this.items = [];
+                }
+                //fire custom loaded event type when we're finished
+                this.fireCustomEvent(CustomEventType.Loaded, {
+                    buttons: this.buttons,
+                    items: this.items,
+                });
+            })
+                .catch((error) => {
+                console.error(error);
+            });
+        }
+    }
+    refresh() {
+        this.fetchContentMenu();
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('endpoint') || changes.has('legacy')) {
+            this.fetchContentMenu();
+        }
+    }
+    handleItemClicked(item) {
+        this.fireCustomEvent(CustomEventType.Selection, item);
+    }
+    render() {
+        return html `
+      <div class="container">
+        ${this.buttons.map(button => {
+            return html `<temba-button
+            class="${button.primary ? 'primary_button_item' : 'button_item'}"
+            name=${button.label}
+            @click=${() => this.handleItemClicked(button)}
+          >
+            ${button.label}
+          </temba-button>`;
+        })}
+        ${this.items && this.items.length > 0
+            ? html ` <temba-dropdown
+              arrowsize="8"
+              arrowoffset="-12"
+              offsetx="-200"
+              offsety="6"
+            >
+              <div slot="toggle" class="toggle">
+                <temba-icon name="menu" size="1.5"></temba-icon>
+              </div>
+              <div slot="dropdown" class="dropdown">
+                ${this.items.map(item => {
+                if (item.type === ContentMenuItemType.DIVIDER) {
+                    return html ` <div class="divider"></div>`;
+                }
+                else {
+                    return html ` <div
+                      class="item"
+                      name=${item.label}
+                      @click=${() => this.handleItemClicked(item)}
+                    >
+                      ${item.label}
+                    </div>`;
+                }
+            })}
+              </div>
+            </temba-dropdown>`
+            : null}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], ContentMenu.prototype, "endpoint", void 0);
+__decorate([
+    property({ type: Number })
+], ContentMenu.prototype, "legacy", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], ContentMenu.prototype, "buttons", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], ContentMenu.prototype, "items", void 0);
+//# sourceMappingURL=ContentMenu.js.map

package/out-tsc/src/list/ContentMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentMenu.js","sourceRoot":"","sources":["../../../src/list/ContentMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, WebResponse } from '../utils';\n\nconst HEADERS = {\n  'Temba-Content-Menu': '1',\n  'Temba-Spa': '1',\n};\nexport interface ContentMenuItem {\n  type: string;\n  as_button: boolean;\n  label: string;\n  url: string;\n  disabled: boolean;\n  modal_id: string;\n  on_submit: string;\n  primary: boolean;\n  title: string;\n  on_click: null;\n  link_class: string;\n}\n\nexport enum ContentMenuItemType {\n  LINK = 'link',\n  JS = 'js',\n  URL_POST = 'url_post',\n  MODAX = 'modax',\n  DIVIDER = 'divider',\n}\n\nexport class ContentMenu extends RapidElement {\n  static get styles() {\n    return css`\n      .container {\n        --button-y: 0.4em;\n        --button-x: 1em;\n        display: flex;\n      }\n\n      .button_item,\n      .primary_button_item {\n        margin-left: 1rem;\n      }\n\n      .toggle {\n        --icon-color: rgb(102, 102, 102);\n        padding: 0.5rem;\n        margin-left: 0.5rem;\n      }\n\n      .toggle:hover {\n        background: rgba(0, 0, 0, 0.05);\n        border-radius: var(--curvature);\n        --icon-color: rgb(136, 136, 136);\n      }\n\n      .dropdown {\n        padding: 1rem 1.5rem;\n        color: rgb(45, 45, 45);\n        z-index: 50;\n        min-width: 200px;\n      }\n\n      .divider {\n        border-bottom: 1px solid rgb(237, 237, 237);\n        margin: 1rem -1.5em;\n      }\n\n      .item {\n        white-space: nowrap;\n        margin: 0.2em 0em;\n        font-size: 1.1rem;\n        cursor: pointer;\n        font-weight: 400;\n      }\n\n      .item:hover {\n        color: rgb(var(--primary-rgb));\n      }\n    `;\n  }\n\n  @property({ type: String })\n  endpoint: string;\n\n  @property({ type: Number })\n  legacy: number;\n\n  @property({ type: Array, attribute: false })\n  buttons: ContentMenuItem[] = [];\n\n  @property({ type: Array, attribute: false })\n  items: ContentMenuItem[] = [];\n\n  private fetchContentMenu() {\n    const url = this.endpoint;\n    if (url) {\n      const legacy = this.legacy;\n      const headers = HEADERS;\n      if (legacy) {\n        delete headers['Temba-Spa'];\n      }\n\n      //ok, fetch the content menu\n      getUrl(url, null, headers)\n        .then((response: WebResponse) => {\n          const json = response.json;\n          const contentMenu = json.items as ContentMenuItem[];\n\n          //populate (or initialize) the buttons and items\n          if (contentMenu) {\n            this.buttons = contentMenu.filter(item => item.as_button);\n            this.items = contentMenu.filter(item => !item.as_button);\n          } else {\n            this.buttons = [];\n            this.items = [];\n          }\n\n          //fire custom loaded event type when we're finished\n          this.fireCustomEvent(CustomEventType.Loaded, {\n            buttons: this.buttons,\n            items: this.items,\n          });\n        })\n        .catch((error: any) => {\n          console.error(error);\n        });\n    }\n  }\n\n  public refresh() {\n    this.fetchContentMenu();\n  }\n\n  protected updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('endpoint') || changes.has('legacy')) {\n      this.fetchContentMenu();\n    }\n  }\n\n  private handleItemClicked(item: ContentMenuItem) {\n    this.fireCustomEvent(CustomEventType.Selection, item);\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        ${this.buttons.map(button => {\n          return html`<temba-button\n            class=\"${button.primary ? 'primary_button_item' : 'button_item'}\"\n            name=${button.label}\n            @click=${() => this.handleItemClicked(button)}\n          >\n            ${button.label}\n          </temba-button>`;\n        })}\n        ${this.items && this.items.length > 0\n          ? html` <temba-dropdown\n              arrowsize=\"8\"\n              arrowoffset=\"-12\"\n              offsetx=\"-200\"\n              offsety=\"6\"\n            >\n              <div slot=\"toggle\" class=\"toggle\">\n                <temba-icon name=\"menu\" size=\"1.5\"></temba-icon>\n              </div>\n              <div slot=\"dropdown\" class=\"dropdown\">\n                ${this.items.map(item => {\n                  if (item.type === ContentMenuItemType.DIVIDER) {\n                    return html` <div class=\"divider\"></div>`;\n                  } else {\n                    return html` <div\n                      class=\"item\"\n                      name=${item.label}\n                      @click=${() => this.handleItemClicked(item)}\n                    >\n                      ${item.label}\n                    </div>`;\n                  }\n                })}\n              </div>\n            </temba-dropdown>`\n          : null}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/list/RunList.js

@@ -1,19 +1,11 @@
 import { __decorate } from "tslib";
 import { html } from 'lit';
-import { property } from 'lit/decorators';
+import { property } from 'lit/decorators.js';
 import { capitalize } from '../utils';
+import { Icon } from '../vectoricon';
 import { TembaList } from './TembaList';
 const FLOW_COLOR = 'rgb(223, 65, 159)';
 export class RunList extends TembaList {
-    constructor() {
-        super();
-        this.responses = true;
-        this.resultKeys = {};
-        this.reverseRefresh = false;
-        this.valueKey = 'uuid';
-        this.hideShadow = true;
-        this.createRenderOption();
-    }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
     }
@@ -237,7 +229,7 @@ export class RunList extends TembaList {
                       <temba-date
                         value="${this.selectedRun.created_on}"
                         display="duration"
-                      />
+                      ></temba-date>
                     </div>`}
             </div>
           </div>
@@ -255,7 +247,7 @@ export class RunList extends TembaList {
           <temba-icon
             clickable
             style="margin-left:0.75em;"
-            name="trash"
+            name=${Icon.delete}
             onclick="deleteRun(${this.selectedRun.id});"
           ></temba-icon>
         </div>
@@ -300,6 +292,15 @@ export class RunList extends TembaList {
       </div>
     </div>`;
     }
+    constructor() {
+        super();
+        this.responses = true;
+        this.resultKeys = {};
+        this.reverseRefresh = false;
+        this.valueKey = 'uuid';
+        this.hideShadow = true;
+        this.createRenderOption();
+    }
 }
 __decorate([
     property({ type: String })

package/out-tsc/src/list/RunList.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  results: any[];\n\n  @property({ type: Boolean })\n  responses = true;\n\n  @property({ type: Object })\n  resultPreview: any;\n\n  @property({ type: Object })\n  selectedRun: any;\n\n  private resultKeys = {};\n\n  public firstUpdated(changedProperties: Map<string, any>) {\n    super.firstUpdated(changedProperties);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('responses') || changedProperties.has('flow')) {\n      if (this.flow) {\n        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n          this.responses ? '&responded=1' : ''\n        }`;\n      }\n    }\n\n    if (changedProperties.has('resultPreview')) {\n      this.createRenderOption();\n    }\n\n    if (changedProperties.has('results')) {\n      if (this.results) {\n        const select = this.shadowRoot.querySelector('temba-select') as Select;\n        select.setOptions(this.results);\n        this.resultKeys = this.results.reduce(\n          (current, result) => ({ ...current, [result.key]: result }),\n          {}\n        );\n      }\n    }\n  }\n\n  public renderResultPreview(run: any) {\n    if (this.resultPreview) {\n      const runResult = run.values[this.resultPreview.key];\n      if (runResult) {\n        if (this.resultPreview.categories.length > 1) {\n          if (runResult.category) {\n            return runResult.category;\n          }\n        } else {\n          return runResult.value;\n        }\n      }\n    }\n    return null;\n  }\n\n  public removeRun(id: number) {\n    this.items = this.items.filter(run => run.id !== id);\n    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n    this.requestUpdate('cursorIndex');\n  }\n\n  public getIcon(run: any): TemplateResult {\n    let icon = null;\n    if (run.exit_type == 'completed') {\n      icon = html`<temba-icon\n        name=\"check\"\n        style=\"--icon-color:#666;margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'interrupted') {\n      icon = html`<temba-icon\n        name=\"x-octagon\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'expired') {\n      icon = html`<temba-icon\n        name=\"clock\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (!run.exit_type) {\n      if (run.responded) {\n        icon = html`<temba-icon\n          name=\"activity\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      } else {\n        icon = html`<temba-icon\n          name=\"hourglass\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      }\n    }\n    return icon;\n  }\n\n  public createRenderOption() {\n    this.renderOption = (run: any): TemplateResult => {\n      let statusStyle = '';\n\n      if (!run.exited_on) {\n        statusStyle = 'font-weight:400;';\n      }\n\n      if (!run.responded) {\n        statusStyle += '';\n      }\n\n      return html`\n        <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n          <div\n            style=\"width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n          >\n            <temba-contact-name\n              name=${run.contact.name || run.contact.anon_display}\n              urn=${run.contact.urn}\n              icon-size=\"15\"\n            />\n          </div>\n\n          <div\n            style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n          >\n            ${this.renderResultPreview(run)}\n          </div>\n\n          <div style=\"flex-shrink:1\">\n            <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n          </div>\n          ${this.getIcon(run)}\n        </div>\n      `;\n    };\n  }\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const modifiedOn = this.items[0].modified_on;\n      return this.endpoint + '&after=' + modifiedOn;\n    }\n    return this.endpoint;\n  }\n\n  public toggleResponded() {\n    this.responses = (\n      this.shadowRoot.querySelector('#responded') as Checkbox\n    ).checked;\n  }\n\n  public handleColumnChanged(event: any) {\n    if (event.target.values.length > 0) {\n      this.resultPreview = event.target.values[0];\n    } else {\n      this.resultPreview = null;\n    }\n  }\n\n  public handleSelected(selected: any) {\n    this.selectedRun = selected;\n  }\n\n  public getListStyle(): string {\n    return '';\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`\n      <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n        <div style=\"flex-grow:1\">\n          ${this.results\n            ? html`\n                <temba-select\n                  clearable\n                  placeholder=\"Result Preview\"\n                  @change=${this.handleColumnChanged}\n                />\n              `\n            : null}\n        </div>\n        <div style=\"margin-left:1em;\">\n          <temba-checkbox\n            id=\"responded\"\n            label=\"Responses Only\"\n            checked=\"true\"\n            @click=${this.toggleResponded}\n          />\n        </div>\n      </div>\n      <div\n        style=\"\n        font-size:0.8em;\n        color:rgba(0,0,0,.4);\n        text-align:right;\n        background:#f9f9f9;\n        border: 1px solid var(--color-widget-border);\n        margin-bottom:-0.5em; \n        padding-bottom: 0.6em;\n        padding-top: 0.3em;\n        padding-right: 4.5em;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature)\n    \"\n      >\n        Last Updated\n      </div>\n    `;\n  }\n\n  public renderFooter(): TemplateResult {\n    if (!this.selectedRun || !this.resultKeys) {\n      return null;\n    }\n\n    const resultKeys = Object.keys(this.selectedRun.values);\n\n    return html` <div\n      style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n    >\n      <div style=\"display:flex;flex-direction:column;\">\n        <div\n          style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n        >\n          <div>\n            <temba-contact-name\n              style=\"cursor:pointer\"\n              name=${this.selectedRun.contact.name ||\n              this.selectedRun.contact.anon_display}\n              urn=${this.selectedRun.contact.urn}\n              onclick=\"goto(event, this)\"\n              href=\"/contact/read/${this.selectedRun.contact.uuid}/\"\n            ></temba-contact-name>\n            <div\n              style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n            >\n              ${this.selectedRun.exit_type\n                ? html`\n                    <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n                      ${this.getIcon(this.selectedRun)}\n                      <div style=\"margin-left:0.5em\">\n                        ${capitalize(this.selectedRun.exit_type)}&nbsp;\n                      </div>\n                      <temba-date\n                        value=\"${this.selectedRun.exited_on}\"\n                        compare=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>\n                  `\n                : html`${this.getIcon(this.selectedRun)}\n                    <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n                      <div>Started&nbsp;</div>\n                      <temba-date\n                        value=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>`}\n            </div>\n          </div>\n          <div style=\"flex-grow:1\"></div>\n          <div style=\"display:flex;flex-direction: column\">\n            <div style=\"font-size:0.75em\">\n              ${new Date(this.selectedRun.created_on).toLocaleString()}\n            </div>\n            <div\n              style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n            >\n              Started\n            </div>\n          </div>\n          <temba-icon\n            clickable\n            style=\"margin-left:0.75em;\"\n            name=\"trash\"\n            onclick=\"deleteRun(${this.selectedRun.id});\"\n          ></temba-icon>\n        </div>\n\n        ${resultKeys.length > 0\n          ? html`\n              <div\n                style=\"padding:1em;overflow-y:auto;overflow-x:hidden;max-height:15vh;\"\n              >\n                <div\n                  style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n                >\n                  <div style=\"flex-grow:1\"></div>\n                </div>\n\n                <table width=\"100%\">\n                  <tr>\n                    <th style=\"text-align:left\" width=\"25%\">Result</th>\n                    <th style=\"text-align:left\" width=\"25%\">Category</th>\n                    <th style=\"text-align:left\">Value</th>\n                  </tr>\n\n                  ${Object.keys(this.selectedRun.values).map((key: string) => {\n                    const result = this.selectedRun.values[key];\n                    const meta = this.resultKeys[key];\n\n                    // if our result is no longer represented in the flow, skip it\n                    if (meta) {\n                      return html`<tr>\n                        <td>${result.name}</td>\n                        <td>\n                          ${meta.categories.length > 1 ? result.category : '--'}\n                        </td>\n                        <td>${result.value}</td>\n                      </tr>`;\n                    }\n                    return null;\n                  })}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    </div>`;\n  }\n\n  constructor() {\n    super();\n    this.reverseRefresh = false;\n    this.valueKey = 'uuid';\n    this.hideShadow = true;\n    this.createRenderOption();\n  }\n}\n"]}
+{"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n  @property({ type: String })\n  flow: string;\n\n  @property({ type: Object, attribute: false })\n  results: any[];\n\n  @property({ type: Boolean })\n  responses = true;\n\n  @property({ type: Object })\n  resultPreview: any;\n\n  @property({ type: Object })\n  selectedRun: any;\n\n  private resultKeys = {};\n\n  public firstUpdated(changedProperties: Map<string, any>) {\n    super.firstUpdated(changedProperties);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('responses') || changedProperties.has('flow')) {\n      if (this.flow) {\n        this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n          this.responses ? '&responded=1' : ''\n        }`;\n      }\n    }\n\n    if (changedProperties.has('resultPreview')) {\n      this.createRenderOption();\n    }\n\n    if (changedProperties.has('results')) {\n      if (this.results) {\n        const select = this.shadowRoot.querySelector('temba-select') as Select;\n        select.setOptions(this.results);\n        this.resultKeys = this.results.reduce(\n          (current, result) => ({ ...current, [result.key]: result }),\n          {}\n        );\n      }\n    }\n  }\n\n  public renderResultPreview(run: any) {\n    if (this.resultPreview) {\n      const runResult = run.values[this.resultPreview.key];\n      if (runResult) {\n        if (this.resultPreview.categories.length > 1) {\n          if (runResult.category) {\n            return runResult.category;\n          }\n        } else {\n          return runResult.value;\n        }\n      }\n    }\n    return null;\n  }\n\n  public removeRun(id: number) {\n    this.items = this.items.filter(run => run.id !== id);\n    this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n    this.requestUpdate('cursorIndex');\n  }\n\n  public getIcon(run: any): TemplateResult {\n    let icon = null;\n    if (run.exit_type == 'completed') {\n      icon = html`<temba-icon\n        name=\"check\"\n        style=\"--icon-color:#666;margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'interrupted') {\n      icon = html`<temba-icon\n        name=\"x-octagon\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (run.exit_type == 'expired') {\n      icon = html`<temba-icon\n        name=\"clock\"\n        style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n      />`;\n    } else if (!run.exit_type) {\n      if (run.responded) {\n        icon = html`<temba-icon\n          name=\"activity\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      } else {\n        icon = html`<temba-icon\n          name=\"hourglass\"\n          style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n        />`;\n      }\n    }\n    return icon;\n  }\n\n  public createRenderOption() {\n    this.renderOption = (run: any): TemplateResult => {\n      let statusStyle = '';\n\n      if (!run.exited_on) {\n        statusStyle = 'font-weight:400;';\n      }\n\n      if (!run.responded) {\n        statusStyle += '';\n      }\n\n      return html`\n        <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n          <div\n            style=\"width: 12em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n          >\n            <temba-contact-name\n              name=${run.contact.name || run.contact.anon_display}\n              urn=${run.contact.urn}\n              icon-size=\"15\"\n            />\n          </div>\n\n          <div\n            style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n          >\n            ${this.renderResultPreview(run)}\n          </div>\n\n          <div style=\"flex-shrink:1\">\n            <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n          </div>\n          ${this.getIcon(run)}\n        </div>\n      `;\n    };\n  }\n\n  public getRefreshEndpoint() {\n    if (this.items.length > 0) {\n      const modifiedOn = this.items[0].modified_on;\n      return this.endpoint + '&after=' + modifiedOn;\n    }\n    return this.endpoint;\n  }\n\n  public toggleResponded() {\n    this.responses = (\n      this.shadowRoot.querySelector('#responded') as Checkbox\n    ).checked;\n  }\n\n  public handleColumnChanged(event: any) {\n    if (event.target.values.length > 0) {\n      this.resultPreview = event.target.values[0];\n    } else {\n      this.resultPreview = null;\n    }\n  }\n\n  public handleSelected(selected: any) {\n    this.selectedRun = selected;\n  }\n\n  public getListStyle(): string {\n    return '';\n  }\n\n  public renderHeader(): TemplateResult {\n    return html`\n      <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n        <div style=\"flex-grow:1\">\n          ${this.results\n            ? html`\n                <temba-select\n                  clearable\n                  placeholder=\"Result Preview\"\n                  @change=${this.handleColumnChanged}\n                />\n              `\n            : null}\n        </div>\n        <div style=\"margin-left:1em;\">\n          <temba-checkbox\n            id=\"responded\"\n            label=\"Responses Only\"\n            checked=\"true\"\n            @click=${this.toggleResponded}\n          />\n        </div>\n      </div>\n      <div\n        style=\"\n        font-size:0.8em;\n        color:rgba(0,0,0,.4);\n        text-align:right;\n        background:#f9f9f9;\n        border: 1px solid var(--color-widget-border);\n        margin-bottom:-0.5em; \n        padding-bottom: 0.6em;\n        padding-top: 0.3em;\n        padding-right: 4.5em;\n        border-top-right-radius: var(--curvature);\n        border-top-left-radius: var(--curvature)\n    \"\n      >\n        Last Updated\n      </div>\n    `;\n  }\n\n  public renderFooter(): TemplateResult {\n    if (!this.selectedRun || !this.resultKeys) {\n      return null;\n    }\n\n    const resultKeys = Object.keys(this.selectedRun.values);\n\n    return html` <div\n      style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n    >\n      <div style=\"display:flex;flex-direction:column;\">\n        <div\n          style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n        >\n          <div>\n            <temba-contact-name\n              style=\"cursor:pointer\"\n              name=${this.selectedRun.contact.name ||\n              this.selectedRun.contact.anon_display}\n              urn=${this.selectedRun.contact.urn}\n              onclick=\"goto(event, this)\"\n              href=\"/contact/read/${this.selectedRun.contact.uuid}/\"\n            ></temba-contact-name>\n            <div\n              style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n            >\n              ${this.selectedRun.exit_type\n                ? html`\n                    <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n                      ${this.getIcon(this.selectedRun)}\n                      <div style=\"margin-left:0.5em\">\n                        ${capitalize(this.selectedRun.exit_type)}&nbsp;\n                      </div>\n                      <temba-date\n                        value=\"${this.selectedRun.exited_on}\"\n                        compare=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      />\n                    </div>\n                  `\n                : html`${this.getIcon(this.selectedRun)}\n                    <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n                      <div>Started&nbsp;</div>\n                      <temba-date\n                        value=\"${this.selectedRun.created_on}\"\n                        display=\"duration\"\n                      ></temba-date>\n                    </div>`}\n            </div>\n          </div>\n          <div style=\"flex-grow:1\"></div>\n          <div style=\"display:flex;flex-direction: column\">\n            <div style=\"font-size:0.75em\">\n              ${new Date(this.selectedRun.created_on).toLocaleString()}\n            </div>\n            <div\n              style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n            >\n              Started\n            </div>\n          </div>\n          <temba-icon\n            clickable\n            style=\"margin-left:0.75em;\"\n            name=${Icon.delete}\n            onclick=\"deleteRun(${this.selectedRun.id});\"\n          ></temba-icon>\n        </div>\n\n        ${resultKeys.length > 0\n          ? html`\n              <div\n                style=\"padding:1em;overflow-y:auto;overflow-x:hidden;max-height:15vh;\"\n              >\n                <div\n                  style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n                >\n                  <div style=\"flex-grow:1\"></div>\n                </div>\n\n                <table width=\"100%\">\n                  <tr>\n                    <th style=\"text-align:left\" width=\"25%\">Result</th>\n                    <th style=\"text-align:left\" width=\"25%\">Category</th>\n                    <th style=\"text-align:left\">Value</th>\n                  </tr>\n\n                  ${Object.keys(this.selectedRun.values).map((key: string) => {\n                    const result = this.selectedRun.values[key];\n                    const meta = this.resultKeys[key];\n\n                    // if our result is no longer represented in the flow, skip it\n                    if (meta) {\n                      return html`<tr>\n                        <td>${result.name}</td>\n                        <td>\n                          ${meta.categories.length > 1 ? result.category : '--'}\n                        </td>\n                        <td>${result.value}</td>\n                      </tr>`;\n                    }\n                    return null;\n                  })}\n                </table>\n              </div>\n            `\n          : null}\n      </div>\n    </div>`;\n  }\n\n  constructor() {\n    super();\n    this.reverseRefresh = false;\n    this.valueKey = 'uuid';\n    this.hideShadow = true;\n    this.createRenderOption();\n  }\n}\n"]}