@nyaruka/temba-components 0.129.2 → 0.129.4

package/out-tsc/src/form/KeyValueEditor.js

@@ -0,0 +1,223 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { BaseListEditor } from './BaseListEditor';
+let KeyValueEditor = class KeyValueEditor extends BaseListEditor {
+    constructor() {
+        super();
+        this.keyPlaceholder = 'Key';
+        this.valuePlaceholder = 'Value';
+        this.showValidation = true;
+        this.keyErrors = {};
+        // Configure to maintain empty items
+        this.maintainEmptyItem = true;
+        this._items = [];
+    }
+    // External API uses array format to preserve duplicate keys
+    get value() {
+        return this._items.filter(({ key, value }) => key.trim() !== '' || value.trim() !== '');
+    }
+    set value(newValue) {
+        if (Array.isArray(newValue)) {
+            this._items = [...newValue];
+        }
+        else {
+            // Convert Record to array format
+            this._items = Object.entries(newValue || {}).map(([key, value]) => ({
+                key,
+                value: typeof value === 'string' ? value : String(value)
+            }));
+        }
+        this.requestUpdate();
+    }
+    // Implement abstract methods
+    isEmptyItem(item) {
+        return item.key.trim() === '' && item.value.trim() === '';
+    }
+    createEmptyItem() {
+        return { key: '', value: '' };
+    }
+    // Override cleanItems to return array format to preserve duplicate keys
+    cleanItems(items) {
+        return items.filter(({ key, value }) => key.trim() !== '' || value.trim() !== '');
+    }
+    // Method to convert to Record format for final form submission
+    toRecord() {
+        const result = {};
+        this._items.forEach(({ key, value }) => {
+            if (key.trim() !== '' || value.trim() !== '') {
+                result[key] = value;
+            }
+        });
+        return result;
+    }
+    // Method to validate and set key errors for duplicates and empty keys with values
+    validateKeys() {
+        const newKeyErrors = {};
+        // Check for empty keys with values
+        this._items.forEach(({ key, value }, index) => {
+            if (key.trim() === '' && value.trim() !== '') {
+                newKeyErrors[index] = 'Key is required when value is provided';
+            }
+        });
+        // Check for duplicate keys (only non-empty ones)
+        const nonEmptyKeys = this._items
+            .map(({ key }, index) => ({ key: key.trim(), index }))
+            .filter(({ key }) => key !== '');
+        const keyCount = new Map();
+        nonEmptyKeys.forEach(({ key, index }) => {
+            if (!keyCount.has(key)) {
+                keyCount.set(key, []);
+            }
+            keyCount.get(key).push(index);
+        });
+        // Mark duplicate keys with errors
+        keyCount.forEach((indices, key) => {
+            if (indices.length > 1) {
+                indices.forEach((index) => {
+                    // Only show duplicate error if there's no empty key error already
+                    if (!newKeyErrors[index]) {
+                        newKeyErrors[index] = `Duplicate key "${key}"`;
+                    }
+                });
+            }
+        });
+        this.keyErrors = newKeyErrors;
+        return Object.keys(newKeyErrors).length === 0;
+    }
+    // Clear key errors
+    clearKeyErrors() {
+        this.keyErrors = {};
+    }
+    // Override updateValue to emit array format and validate keys
+    updateValue(newValue) {
+        this._items = newValue;
+        // Clear errors and re-validate when items change
+        this.clearKeyErrors();
+        this.validateKeys();
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.cleanItems(newValue) },
+            bubbles: true
+        }));
+        this.requestUpdate();
+    }
+    handleKeyChange(index, newKey) {
+        const items = this.displayItems;
+        const currentItem = items[index];
+        // Clear any existing error for this key when it's modified
+        if (this.keyErrors[index]) {
+            const newKeyErrors = { ...this.keyErrors };
+            delete newKeyErrors[index];
+            this.keyErrors = newKeyErrors;
+        }
+        this.handleItemChange(index, {
+            key: newKey,
+            value: currentItem.value
+        });
+    }
+    handleValueChange(index, newValue) {
+        const items = this.displayItems;
+        const currentItem = items[index];
+        // Clear any existing error for this key when value is modified
+        if (this.keyErrors[index]) {
+            const newKeyErrors = { ...this.keyErrors };
+            delete newKeyErrors[index];
+            this.keyErrors = newKeyErrors;
+        }
+        this.handleItemChange(index, {
+            key: currentItem.key,
+            value: newValue
+        });
+    }
+    renderItem(item, index) {
+        const canRemove = this.canRemoveItem(index);
+        const keyError = this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';
+        return html `
+      <div class="row">
+        <temba-textinput
+          .value=${item.key}
+          .placeholder=${this.keyPlaceholder}
+          .errors=${keyError ? [keyError] : []}
+          @change=${(e) => this.handleKeyChange(index, e.target.value)}
+        ></temba-textinput>
+        <temba-textinput
+          .value=${item.value}
+          .placeholder=${this.valuePlaceholder}
+          @change=${(e) => this.handleValueChange(index, e.target.value)}
+        ></temba-textinput>
+        ${canRemove
+            ? html `
+              <button class="remove-btn" @click=${() => this.removeItem(index)}>
+                ×
+              </button>
+            `
+            : html `<div class="remove-btn-spacer"></div>`}
+      </div>
+    `;
+    }
+    getContainerClass() {
+        return 'key-value-editor';
+    }
+};
+KeyValueEditor.styles = css `
+    .key-value-editor {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 1fr 1fr auto;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .remove-btn {
+      width: 32px;
+      height: 32px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: #f8f8f8;
+      color: #666;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+    }
+
+    .remove-btn:hover:not(:disabled) {
+      background: #f0f0f0;
+    }
+
+    .remove-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .remove-btn-spacer {
+      width: 32px;
+      height: 32px;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], KeyValueEditor.prototype, "keyPlaceholder", void 0);
+__decorate([
+    property({ type: String })
+], KeyValueEditor.prototype, "valuePlaceholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], KeyValueEditor.prototype, "showValidation", void 0);
+__decorate([
+    state()
+], KeyValueEditor.prototype, "keyErrors", void 0);
+__decorate([
+    property({ type: Array })
+], KeyValueEditor.prototype, "value", null);
+KeyValueEditor = __decorate([
+    customElement('temba-key-value-editor')
+], KeyValueEditor);
+export { KeyValueEditor };
+//# sourceMappingURL=KeyValueEditor.js.map

package/out-tsc/src/form/KeyValueEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueEditor.js","sourceRoot":"","sources":["../../../src/form/KeyValueEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { BaseListEditor, ListItem } from './BaseListEditor';\n\ninterface KeyValueItem extends ListItem {\n  key: string;\n  value: string;\n}\n\n@customElement('temba-key-value-editor')\nexport class KeyValueEditor extends BaseListEditor<KeyValueItem> {\n  @property({ type: String })\n  keyPlaceholder = 'Key';\n\n  @property({ type: String })\n  valuePlaceholder = 'Value';\n\n  @property({ type: Boolean })\n  showValidation = true;\n\n  @state()\n  private keyErrors: { [index: number]: string } = {};\n\n  // Configure to maintain empty items\n  maintainEmptyItem = true;\n\n  constructor() {\n    super();\n    this._items = [];\n  }\n\n  // External API uses array format to preserve duplicate keys\n  @property({ type: Array })\n  get value(): KeyValueItem[] {\n    return this._items.filter(\n      ({ key, value }) => key.trim() !== '' || value.trim() !== ''\n    );\n  }\n\n  set value(newValue: KeyValueItem[] | Record<string, string>) {\n    if (Array.isArray(newValue)) {\n      this._items = [...newValue];\n    } else {\n      // Convert Record to array format\n      this._items = Object.entries(newValue || {}).map(([key, value]) => ({\n        key,\n        value: typeof value === 'string' ? value : String(value)\n      }));\n    }\n    this.requestUpdate();\n  }\n\n  // Implement abstract methods\n  isEmptyItem(item: KeyValueItem): boolean {\n    return item.key.trim() === '' && item.value.trim() === '';\n  }\n\n  createEmptyItem(): KeyValueItem {\n    return { key: '', value: '' };\n  }\n\n  // Override cleanItems to return array format to preserve duplicate keys\n  protected cleanItems(items: KeyValueItem[]): KeyValueItem[] {\n    return items.filter(\n      ({ key, value }) => key.trim() !== '' || value.trim() !== ''\n    );\n  }\n\n  // Method to convert to Record format for final form submission\n  toRecord(): Record<string, string> {\n    const result: Record<string, string> = {};\n    this._items.forEach(({ key, value }) => {\n      if (key.trim() !== '' || value.trim() !== '') {\n        result[key] = value;\n      }\n    });\n    return result;\n  }\n\n  // Method to validate and set key errors for duplicates and empty keys with values\n  validateKeys(): boolean {\n    const newKeyErrors: { [index: number]: string } = {};\n\n    // Check for empty keys with values\n    this._items.forEach(({ key, value }, index) => {\n      if (key.trim() === '' && value.trim() !== '') {\n        newKeyErrors[index] = 'Key is required when value is provided';\n      }\n    });\n\n    // Check for duplicate keys (only non-empty ones)\n    const nonEmptyKeys = this._items\n      .map(({ key }, index) => ({ key: key.trim(), index }))\n      .filter(({ key }) => key !== '');\n\n    const keyCount = new Map<string, number[]>();\n    nonEmptyKeys.forEach(({ key, index }) => {\n      if (!keyCount.has(key)) {\n        keyCount.set(key, []);\n      }\n      keyCount.get(key)!.push(index);\n    });\n\n    // Mark duplicate keys with errors\n    keyCount.forEach((indices, key) => {\n      if (indices.length > 1) {\n        indices.forEach((index) => {\n          // Only show duplicate error if there's no empty key error already\n          if (!newKeyErrors[index]) {\n            newKeyErrors[index] = `Duplicate key \"${key}\"`;\n          }\n        });\n      }\n    });\n\n    this.keyErrors = newKeyErrors;\n    return Object.keys(newKeyErrors).length === 0;\n  }\n\n  // Clear key errors\n  clearKeyErrors(): void {\n    this.keyErrors = {};\n  }\n\n  // Override updateValue to emit array format and validate keys\n  protected updateValue(newValue: KeyValueItem[]) {\n    this._items = newValue;\n\n    // Clear errors and re-validate when items change\n    this.clearKeyErrors();\n    this.validateKeys();\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n    this.requestUpdate();\n  }\n\n  private handleKeyChange(index: number, newKey: string) {\n    const items = this.displayItems;\n    const currentItem = items[index];\n\n    // Clear any existing error for this key when it's modified\n    if (this.keyErrors[index]) {\n      const newKeyErrors = { ...this.keyErrors };\n      delete newKeyErrors[index];\n      this.keyErrors = newKeyErrors;\n    }\n\n    this.handleItemChange(index, {\n      key: newKey,\n      value: currentItem.value\n    });\n  }\n\n  private handleValueChange(index: number, newValue: string) {\n    const items = this.displayItems;\n    const currentItem = items[index];\n\n    // Clear any existing error for this key when value is modified\n    if (this.keyErrors[index]) {\n      const newKeyErrors = { ...this.keyErrors };\n      delete newKeyErrors[index];\n      this.keyErrors = newKeyErrors;\n    }\n\n    this.handleItemChange(index, {\n      key: currentItem.key,\n      value: newValue\n    });\n  }\n\n  renderItem(item: KeyValueItem, index: number): TemplateResult {\n    const canRemove = this.canRemoveItem(index);\n    const keyError =\n      this.showValidation && this.keyErrors[index] ? this.keyErrors[index] : '';\n\n    return html`\n      <div class=\"row\">\n        <temba-textinput\n          .value=${item.key}\n          .placeholder=${this.keyPlaceholder}\n          .errors=${keyError ? [keyError] : []}\n          @change=${(e: any) => this.handleKeyChange(index, e.target.value)}\n        ></temba-textinput>\n        <temba-textinput\n          .value=${item.value}\n          .placeholder=${this.valuePlaceholder}\n          @change=${(e: any) => this.handleValueChange(index, e.target.value)}\n        ></temba-textinput>\n        ${canRemove\n          ? html`\n              <button class=\"remove-btn\" @click=${() => this.removeItem(index)}>\n                ×\n              </button>\n            `\n          : html`<div class=\"remove-btn-spacer\"></div>`}\n      </div>\n    `;\n  }\n\n  protected getContainerClass(): string {\n    return 'key-value-editor';\n  }\n\n  static styles = css`\n    .key-value-editor {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .row {\n      display: grid;\n      grid-template-columns: 1fr 1fr auto;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .remove-btn {\n      width: 32px;\n      height: 32px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: #f8f8f8;\n      color: #666;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n    }\n\n    .remove-btn:hover:not(:disabled) {\n      background: #f0f0f0;\n    }\n\n    .remove-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .remove-btn-spacer {\n      width: 32px;\n      height: 32px;\n    }\n  `;\n}\n"]}

package/out-tsc/src/{mediapicker → form}/MediaPicker.js

@@ -3,7 +3,7 @@ import { css, html } from 'lit';
 import { RapidElement } from '../RapidElement';
 import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
-import { Icon } from '../vectoricon';
+import { Icon } from '../Icons';
 import { DEFAULT_MEDIA_ENDPOINT, getClasses, postFormData } from '../utils';
 const verifyAccept = (type, accept) => {
     if (accept) {

package/out-tsc/src/form/MediaPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/form/MediaPicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,EACL,sBAAsB,EAEtB,UAAU,EACV,YAAY,EACb,MAAM,UAAU,CAAC;AAElB,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,MAAc,EAAW,EAAE;IAC7D,IAAI,MAAM,EAAE,CAAC;QACX,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACvD,OAAO,CACL,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CACtE,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAqGE,aAAQ,GAAG,sBAAsB,CAAC;QAMlC,SAAI,GAAG,IAAI,CAAC,GAAG,CAAC;QAGhB,WAAM,GAAG,EAAE,CAAC,CAAC,mBAAmB;QAGhC,QAAG,GAAG,CAAC,CAAC;QAGR,gBAAW,GAAiB,EAAE,CAAC;IA2MjC,CAAC;IA9TC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FT,CAAC;IACJ,CAAC;IAuBM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,0CAA0C;YAC1C,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC1C,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,CAAC,OAAO,EAAE;gBACvC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;aACpC,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,kBAAkB,CAAC,GAAc;QACvC,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,CAAC;QAC5B,IAAI,EAAE,EAAE,CAAC;YACP,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;YAC5B,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,GAAc;QACpC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAEO,cAAc,CAAC,GAAc;QACnC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAEO,eAAe,CAAC,GAAc;QACpC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAEO,UAAU,CAAC,GAAc;QAC/B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAEM,oBAAoB;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;IAC5C,CAAC;IAEO,SAAS,CAAC,GAAc;QAC9B,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,GAAc;QAChC,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAEO,oBAAoB,CAAC,eAAoB;QAC/C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC;IAEO,uBAAuB,CAAC,kBAAuB;QACrD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CACxC,CAAC,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,KAAK,kBAAkB,CAChE,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC;IAEO,uBAAuB,CAAC,GAAU;QACxC,MAAM,MAAM,GAAG,GAAG,CAAC,MAAwB,CAAC;QAC5C,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CACrD,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,MAAM,CAAC,EAAE,CAC/B,CAAC;QACF,IAAI,yBAAyB,EAAE,CAAC;YAC9B,IAAI,CAAC,uBAAuB,CAAC,yBAAyB,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAEO,4BAA4B,CAAC,GAAU;QAC7C,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B,CAAC;QAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;IAC/B,CAAC;IAEM,WAAW,CAAC,KAAa;QAC9B,IAAI,aAAa,GAAG,EAAE,CAAC;QAEvB,wDAAwD;QACxD,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YACpC,sCAAsC;YACtC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC1C,OAAO,KAAK,CAAC;gBACf,CAAC;YACH,CAAC;YAED,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CACtC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CACpE,CAAC;YACF,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;YACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,UAAU,CAAC,IAAU;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1B,MAAM,OAAO,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC/B,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAC7B,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC;aACvB,IAAI,CAAC,CAAC,QAAqB,EAAE,EAAE;YAC9B,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;gBACvC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAkB,CAAC;gBAC/C,IAAI,UAAU,EAAE,CAAC;oBACf,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;gBACxC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAkB,EAAE,EAAE;YAC5B,IAAI,WAAW,GAAG,EAAE,CAAC;YACrB,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;gBACzB,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,WAAW,GAAG,gBAAgB,CAAC;YACjC,CAAC;YACD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC7B,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,IAAI,CAAA,qDAAqD,CAAC;QACnE,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG;gBACvC,CAAC,CAAC,IAAI,CAAA;;;0BAGY,IAAI,CAAC,GAAG,GAAG,CAAC;wBACd,IAAI,CAAC,MAAM;yBACV,IAAI,CAAC,4BAA4B;;;;;;;;oCAQtB,IAAI,CAAC,IAAI;;qBAExB;gBACb,CAAC,CAAC,IAAI,CAAC;QACX,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;cACD,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;oBACtD,IAAI,CAAC,eAAe;mBACrB,IAAI,CAAC,cAAc;oBAClB,IAAI,CAAC,eAAe;eACzB,IAAI,CAAC,UAAU;;;;YAIlB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,EAAE;YACzC,OAAO,IAAI,CAAA;;;0BAGG,IAAI,CAAC,uBAAuB;sBAChC,eAAe,CAAC,GAAG;wBACjB,IAAI,CAAC,YAAY;;;8BAGX,eAAe,CAAC,YAAY,IAAI,eAAe,CAAC,GAAG;;mBAE9D,CAAC;QACV,CAAC,CAAC;YACA,IAAI,CAAC,cAAc,EAAE;;;WAGtB,CAAC;IACV,CAAC;CACF;AA1NC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CACX;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACK;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CAC3B","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType } from '../interfaces';\nimport { Icon } from '../Icons';\nimport {\n  DEFAULT_MEDIA_ENDPOINT,\n  WebResponse,\n  getClasses,\n  postFormData\n} from '../utils';\n\nconst verifyAccept = (type: string, accept: string): boolean => {\n  if (accept) {\n    const allowed = accept.split(',').map((x) => x.trim());\n    return (\n      allowed.includes(type) || allowed.includes(type.split('/')[0] + '/*')\n    );\n  }\n  return true;\n};\n\nexport class MediaPicker extends RapidElement {\n  static get styles() {\n    return css`\n      .drop-mask {\n        border-radius: var(--curvature-widget);\n        transition: opacity ease-in-out var(--transition-speed);\n      }\n\n      .highlight .drop-mask {\n        background: rgba(210, 243, 184, 0.8);\n      }\n\n      .drop-mask > div {\n        margin: auto;\n        border-radius: var(--curvature-widget);\n        font-weight: 400;\n        color: rgba(0, 0, 0, 0.5);\n      }\n\n      .attachments {\n      }\n\n      .attachments-list {\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        padding: 0.2em;\n        align-items: center;\n      }\n\n      .attachment-item {\n        padding: 0.4em;\n        padding-top: 1em;\n      }\n\n      .attachment-item.error {\n        background: #fff;\n        color: rgba(250, 0, 0, 0.75);\n        padding: 0.2em;\n        margin: 0.3em 0.5em;\n        border-radius: var(--curvature);\n        display: block;\n      }\n\n      .remove-item {\n        --icon-color: #ccc;\n        background: #fff;\n        border-radius: 99%;\n        transition: transform 200ms linear;\n        transform: scale(0);\n        display: block;\n        margin-bottom: -24px;\n        margin-left: 10px;\n        width: 1em;\n        height: 1em;\n      }\n\n      .attachment-item:hover .remove-item {\n        transform: scale(1);\n      }\n\n      .remove-item:hover {\n        --icon-color: #333;\n        cursor: pointer;\n      }\n\n      .attachment-name {\n        align-self: center;\n        font-size: 12px;\n        padding: 2px 8px;\n      }\n\n      #upload-input {\n        display: none;\n      }\n\n      .upload-label {\n        display: flex;\n        align-items: center;\n      }\n\n      .upload-icon {\n        color: rgb(102, 102, 102);\n      }\n\n      .add-attachment {\n        padding: 1em;\n        background-color: rgba(0, 0, 0, 0.05);\n        border-radius: var(--curvature);\n        color: #aaa;\n        margin: 0.5em;\n      }\n\n      .add-attachment:hover {\n        background-color: rgba(0, 0, 0, 0.07);\n        cursor: pointer;\n      }\n    `;\n  }\n\n  @property({ type: String, attribute: false })\n  endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n  @property({ type: Boolean })\n  pendingDrop: boolean;\n\n  @property({ type: String })\n  icon = Icon.add;\n\n  @property({ type: String })\n  accept = ''; //e.g. \".xls,.xlsx\"\n\n  @property({ type: Number })\n  max = 3;\n\n  @property({ type: Array })\n  attachments: Attachment[] = [];\n\n  @property({ type: Boolean, attribute: false })\n  uploading: boolean;\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n    if (changes.has('attachments')) {\n      // wait one cycle to fire change for tests\n      setTimeout(() => {\n        this.dispatchEvent(new Event('change'));\n      }, 0);\n    }\n\n    if (changes.has('uploading')) {\n      this.dispatchEvent(\n        new CustomEvent(CustomEventType.Loading, {\n          detail: { loading: this.uploading }\n        })\n      );\n    }\n  }\n\n  private getAcceptableFiles(evt: DragEvent): File[] {\n    const dt = evt.dataTransfer;\n    if (dt) {\n      const files = [...dt.files];\n      return files.filter((file) => verifyAccept(file.type, this.accept));\n    }\n  }\n\n  private handleDragEnter(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragOver(evt: DragEvent): void {\n    this.highlight(evt);\n  }\n\n  private handleDragLeave(evt: DragEvent): void {\n    this.unhighlight(evt);\n  }\n\n  private handleDrop(evt: DragEvent): void {\n    this.unhighlight(evt);\n    if (this.canAcceptAttachments()) {\n      this.uploadFiles(this.getAcceptableFiles(evt));\n    }\n  }\n\n  public canAcceptAttachments() {\n    return this.attachments.length < this.max;\n  }\n\n  private highlight(evt: DragEvent): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n    if (this.canAcceptAttachments()) {\n      this.pendingDrop = true;\n    }\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    evt.preventDefault();\n    evt.stopPropagation();\n    this.pendingDrop = false;\n  }\n\n  private addCurrentAttachment(attachmentToAdd: any) {\n    this.attachments.push(attachmentToAdd);\n    this.requestUpdate('attachments');\n  }\n\n  private removeCurrentAttachment(attachmentToRemove: any) {\n    this.attachments = this.attachments.filter(\n      (currentAttachment) => currentAttachment !== attachmentToRemove\n    );\n    this.requestUpdate('attachments');\n  }\n\n  private handleRemoveFileClicked(evt: Event): void {\n    const target = evt.target as HTMLDivElement;\n    const currentAttachmentToRemove = this.attachments.find(\n      ({ url }) => url === target.id\n    );\n    if (currentAttachmentToRemove) {\n      this.removeCurrentAttachment(currentAttachmentToRemove);\n    }\n  }\n\n  private handleUploadFileInputChanged(evt: Event): void {\n    const target = evt.target as HTMLInputElement;\n    const files = target.files;\n    this.uploadFiles([...files]);\n  }\n\n  public uploadFiles(files: File[]): void {\n    let filesToUpload = [];\n\n    //remove duplicate files that have already been uploaded\n    filesToUpload = files.filter((file) => {\n      // check our file type against accepts\n      if (this.accept) {\n        if (!verifyAccept(file.type, this.accept)) {\n          return false;\n        }\n      }\n\n      const index = this.attachments.findIndex(\n        (value) => value.filename === file.name && value.size === file.size\n      );\n      if (index === -1) {\n        return file;\n      }\n    });\n\n    filesToUpload.map((fileToUpload) => {\n      this.uploadFile(fileToUpload);\n    });\n  }\n\n  private uploadFile(file: File): void {\n    this.uploading = true;\n\n    const url = this.endpoint;\n    const payload = new FormData();\n    payload.append('file', file);\n    postFormData(url, payload)\n      .then((response: WebResponse) => {\n        if (this.attachments.length < this.max) {\n          const attachment = response.json as Attachment;\n          if (attachment) {\n            this.addCurrentAttachment(attachment);\n          }\n        }\n      })\n      .catch((error: WebResponse) => {\n        let uploadError = '';\n        if (error.status === 400) {\n          uploadError = error.json.file[0];\n        } else {\n          uploadError = 'Server failure';\n        }\n        console.error(uploadError);\n      })\n      .finally(() => {\n        this.uploading = false;\n      });\n  }\n\n  private renderUploader(): TemplateResult {\n    if (this.uploading) {\n      return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n    } else {\n      return this.attachments.length < this.max\n        ? html`<input\n              type=\"file\"\n              id=\"upload-input\"\n              ?multiple=${this.max > 1}\n              accept=\"${this.accept}\"\n              @change=\"${this.handleUploadFileInputChanged}\"\n            />\n            <label\n              id=\"upload-label\"\n              class=\"actions-left upload-label\"\n              for=\"upload-input\"\n            >\n              <div class=\"add-attachment\">\n                <temba-icon name=\"${this.icon}\" size=\"1.5\"></temba-icon>\n              </div>\n            </label>`\n        : null;\n    }\n  }\n\n  public render(): TemplateResult {\n    return html` <div\n      class=${getClasses({ container: true, highlight: this.pendingDrop })}\n      @dragenter=\"${this.handleDragEnter}\"\n      @dragover=\"${this.handleDragOver}\"\n      @dragleave=\"${this.handleDragLeave}\"\n      @drop=\"${this.handleDrop}\"\n    >\n      <div class=\"drop-mask\">\n        <div class=\"attachments-list\">\n          ${this.attachments.map((validAttachment) => {\n            return html`<div class=\"attachment-item\">\n              <temba-icon\n                class=\"remove-item\"\n                @click=\"${this.handleRemoveFileClicked}\"\n                id=\"${validAttachment.url}\"\n                name=\"${Icon.delete_small}\"\n              ></temba-icon>\n              <temba-thumbnail\n                attachment=\"${validAttachment.content_type}:${validAttachment.url}\"\n              ></temba-thumbnail>\n            </div>`;\n          })}\n          ${this.renderUploader()}\n        </div>\n      </div>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/form/RangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RangePicker.js","sourceRoot":"","sources":["../../../src/form/RangePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { DateTime } from 'luxon';\nimport { html, css } from 'lit';\nimport { DatePicker } from './DatePicker';\nimport { CustomEventType } from '../interfaces';\n\nexport class RangePicker extends RapidElement {\n  static styles = css`\n    .range-container {\n      display: flex;\n      gap: 0.5em;\n      align-items: center;\n    }\n    .date-display {\n      cursor: pointer;\n      padding: 0.2em 0.5em;\n      margin: 0.6em 0;\n      border-radius: 4px;\n      border: 1px solid transparent;\n      transition: border 0.2s;\n    }\n\n    .date-display:hover {\n      border: 1px solid var(--color-widget-border, #bbb);\n      background: var(--color-widget-hover, #f5f5f5);\n    }\n\n    input[type='date'] {\n      font-size: 1em;\n      padding: 0.2em 0.5em;\n      border-radius: 4px;\n      border: 1px solid #bbb;\n    }\n\n    .navigation-container {\n      display: flex;\n      align-items: center;\n      gap: 0.25em;\n    }\n\n    .nav-arrow {\n      background: #f5f5f5;\n      border: 1px solid #bbb;\n\n      border-radius: var(--curvature);\n      padding: 0em 0em;\n      cursor: pointer;\n      font-size: 0.6em;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 23px;\n      height: 23px;\n      transition: background 0.2s, border 0.2s, opacity 0.2s;\n    }\n\n    .nav-arrow:hover:not(:disabled) {\n      background: #e0eaff;\n      border-color: #3399ff;\n    }\n\n    .nav-arrow:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      background: #f9f9f9;\n    }\n\n    .nav-arrow.hidden {\n      visibility: hidden;\n    }\n\n    .button-group {\n      display: flex;\n      margin-left: 0em;\n    }\n    .range-btn {\n      background: #f5f5f5;\n      border: 1px solid #bbb;\n      border-radius: 0px;\n      margin-left: -1px;\n      padding: 0.2em 0.8em;\n      cursor: pointer;\n      font-size: 0.95em;\n      transition: background 0.2s, border 0.2s;\n    }\n\n    .button-group .range-btn:first-child {\n      border-radius: 4px 0 0 4px;\n    }\n\n    .button-group .range-btn:last-child {\n      border-radius: 0 4px 4px 0;\n    }\n\n    .range-btn.selected,\n    .range-btn:active {\n      background: #e0eaff;\n      border-color: #3399ff;\n    }\n  `;\n\n  @property({ type: String, attribute: 'start' })\n  startDate = '';\n\n  @property({ type: String, attribute: 'end' })\n  endDate = '';\n\n  @property({ type: Boolean })\n  editingStart = false;\n\n  @property({ type: Boolean })\n  editingEnd = false;\n\n  @property({ type: String })\n  selectedRange: 'W' | 'M' | 'Y' | 'ALL' | '' = '';\n\n  @property({ type: String, attribute: 'min' })\n  minDate = '2012-01-01';\n\n  @property({ type: String, attribute: 'max' })\n  maxDate = DateTime.now().toISODate();\n\n  private handleStartClick() {\n    this.editingStart = true;\n  }\n\n  private handleEndClick() {\n    this.editingEnd = true;\n  }\n\n  private setRange(type: 'W' | 'M' | 'Y' | 'ALL') {\n    const today = DateTime.now().toISODate();\n    let start = '';\n    if (type === 'W') {\n      start = DateTime.now().minus({ days: 6 }).toISODate();\n    } else if (type === 'M') {\n      start = DateTime.now().minus({ months: 1 }).plus({ days: 1 }).toISODate();\n    } else if (type === 'Y') {\n      start = DateTime.now().minus({ years: 1 }).plus({ days: 1 }).toISODate();\n    } else if (type === 'ALL') {\n      start = this.minDate || '2012-01-01';\n    }\n    this.startDate = start;\n    this.endDate = today;\n    this.selectedRange = type;\n    this.editingStart = false;\n    this.editingEnd = false;\n\n    this.fireCustomEvent(CustomEventType.DateRangeChanged, {\n      start: this.startDate,\n      end: this.endDate,\n      range: this.selectedRange\n    });\n  }\n\n  private setValidRange(type: 'start' | 'end', value: string) {\n    // Enforce min/max\n    let newValue = value;\n    if (newValue < this.minDate) newValue = this.minDate;\n    if (newValue > this.maxDate) newValue = this.maxDate;\n    const start = DateTime.fromISO(\n      type === 'start' ? newValue : this.startDate\n    );\n    const end = DateTime.fromISO(type === 'end' ? newValue : this.endDate);\n\n    if (!start.isValid || !end.isValid) return;\n    if (start > end) {\n      if (type === 'start') {\n        this.startDate = newValue;\n        this.endDate = start.toISODate();\n      } else {\n        this.endDate = newValue;\n        this.startDate = end.toISODate();\n      }\n    } else {\n      if (type === 'start') this.startDate = newValue;\n      else this.endDate = newValue;\n    }\n\n    this.fireCustomEvent(CustomEventType.DateRangeChanged, {\n      start: this.startDate,\n      end: this.endDate,\n      range: this.selectedRange\n    });\n  }\n\n  private canNavigatePrevious(): boolean {\n    if (this.selectedRange === 'ALL') return false;\n\n    const currentStart = DateTime.fromISO(this.startDate);\n    let previousStart: DateTime;\n\n    if (this.selectedRange === 'W') {\n      previousStart = currentStart.minus({ weeks: 1 });\n    } else if (this.selectedRange === 'M') {\n      previousStart = currentStart.minus({ months: 1 });\n    } else if (this.selectedRange === 'Y') {\n      previousStart = currentStart.minus({ years: 1 });\n    } else if (this.selectedRange === '') {\n      // Custom range - determine the interval and navigate by that amount\n      const interval = this.getCustomRangeInterval();\n      if (interval.type === 'days') {\n        previousStart = currentStart.minus({ days: interval.amount });\n      } else if (interval.type === 'months') {\n        previousStart = currentStart.minus({ months: interval.amount });\n      } else if (interval.type === 'years') {\n        previousStart = currentStart.minus({ years: interval.amount });\n      } else {\n        return false;\n      }\n    } else {\n      return false;\n    }\n\n    return previousStart.toISODate() >= this.minDate;\n  }\n\n  private canNavigateNext(): boolean {\n    if (this.selectedRange === 'ALL') return false;\n\n    const currentEnd = DateTime.fromISO(this.endDate);\n    let nextEnd: DateTime;\n\n    if (this.selectedRange === 'W') {\n      nextEnd = currentEnd.plus({ weeks: 1 });\n    } else if (this.selectedRange === 'M') {\n      nextEnd = currentEnd.plus({ months: 1 });\n    } else if (this.selectedRange === 'Y') {\n      nextEnd = currentEnd.plus({ years: 1 });\n    } else if (this.selectedRange === '') {\n      // Custom range - determine the interval and navigate by that amount\n      const interval = this.getCustomRangeInterval();\n      if (interval.type === 'days') {\n        nextEnd = currentEnd.plus({ days: interval.amount });\n      } else if (interval.type === 'months') {\n        nextEnd = currentEnd.plus({ months: interval.amount });\n      } else if (interval.type === 'years') {\n        nextEnd = currentEnd.plus({ years: interval.amount });\n      } else {\n        return false;\n      }\n    } else {\n      return false;\n    }\n\n    return nextEnd.toISODate() <= this.maxDate;\n  }\n\n  private getCustomRangeInterval(): {\n    type: 'days' | 'months' | 'years';\n    amount: number;\n  } {\n    const start = DateTime.fromISO(this.startDate);\n    const end = DateTime.fromISO(this.endDate);\n\n    if (!start.isValid || !end.isValid) {\n      return { type: 'days', amount: 1 };\n    }\n\n    // Check if it's a complete month (first day to last day of any month)\n    const isLastDayOfMonth = end.day === end.daysInMonth;\n    if (start.day === 1 && isLastDayOfMonth) {\n      // Single complete month\n      if (start.month === end.month && start.year === end.year) {\n        return { type: 'months', amount: 1 };\n      }\n\n      // Multiple complete months - check if we span complete months only\n      const startOfFirstMonth = start.startOf('month');\n      const endOfLastMonth = end.endOf('month');\n      const monthsDiff =\n        endOfLastMonth.diff(startOfFirstMonth, 'months').months + 1;\n\n      if (monthsDiff > 0 && Number.isInteger(monthsDiff)) {\n        return { type: 'months', amount: Math.round(monthsDiff) };\n      }\n    }\n\n    // Check if it's a full year\n    if (\n      start.month === 1 &&\n      start.day === 1 &&\n      end.month === 12 &&\n      end.day === 31\n    ) {\n      // Single complete year\n      if (start.year === end.year) {\n        return { type: 'years', amount: 1 };\n      }\n\n      // Multiple complete years\n      const yearsDiff = end.year - start.year + 1;\n      if (yearsDiff > 0) {\n        return { type: 'years', amount: yearsDiff };\n      }\n    }\n\n    // Default to days for any other custom range\n    const daysDiff = end.diff(start, 'days').days + 1; // +1 to include both start and end days\n    return { type: 'days', amount: Math.max(1, Math.round(daysDiff)) };\n  }\n\n  private navigatePrevious() {\n    if (!this.canNavigatePrevious()) return;\n\n    const currentStart = DateTime.fromISO(this.startDate);\n    const currentEnd = DateTime.fromISO(this.endDate);\n    let newStart: DateTime;\n    let newEnd: DateTime;\n\n    if (this.selectedRange === 'W') {\n      newStart = currentStart.minus({ weeks: 1 });\n      newEnd = currentEnd.minus({ weeks: 1 });\n    } else if (this.selectedRange === 'M') {\n      // Check if current M range is a complete month, if so maintain month boundaries\n      const interval = this.getCustomRangeInterval();\n      if (interval.type === 'months') {\n        newStart = currentStart.minus({ months: 1 }).startOf('month');\n        newEnd = newStart\n          .plus({ months: interval.amount })\n          .minus({ days: 1 })\n          .endOf('day');\n      } else {\n        newStart = currentStart.minus({ months: 1 });\n        newEnd = currentEnd.minus({ months: 1 });\n      }\n    } else if (this.selectedRange === 'Y') {\n      newStart = currentStart.minus({ years: 1 });\n      newEnd = currentEnd.minus({ years: 1 });\n    } else if (this.selectedRange === '') {\n      // Custom range - determine the interval and navigate by that amount\n      const interval = this.getCustomRangeInterval();\n      if (interval.type === 'days') {\n        newStart = currentStart.minus({ days: interval.amount });\n        newEnd = currentEnd.minus({ days: interval.amount });\n      } else if (interval.type === 'months') {\n        // For month navigation, maintain complete month boundaries\n        newStart = currentStart\n          .minus({ months: interval.amount })\n          .startOf('month');\n        newEnd = newStart\n          .plus({ months: interval.amount })\n          .minus({ days: 1 })\n          .endOf('day');\n      } else if (interval.type === 'years') {\n        newStart = currentStart.minus({ years: interval.amount });\n        newEnd = currentEnd.minus({ years: interval.amount });\n      } else {\n        return;\n      }\n    } else {\n      return;\n    }\n\n    // Enforce min/max bounds\n    const minDateTime = DateTime.fromISO(this.minDate);\n    const maxDateTime = DateTime.fromISO(this.maxDate);\n    const startDate =\n      newStart < minDateTime ? this.minDate : newStart.toISODate();\n    const endDate = newEnd > maxDateTime ? this.maxDate : newEnd.toISODate();\n\n    this.startDate = startDate;\n    this.endDate = endDate;\n\n    this.fireCustomEvent(CustomEventType.DateRangeChanged, {\n      start: this.startDate,\n      end: this.endDate,\n      range: this.selectedRange\n    });\n  }\n\n  private navigateNext() {\n    if (!this.canNavigateNext()) return;\n\n    const currentStart = DateTime.fromISO(this.startDate);\n    const currentEnd = DateTime.fromISO(this.endDate);\n    let newStart: DateTime;\n    let newEnd: DateTime;\n\n    if (this.selectedRange === 'W') {\n      newStart = currentStart.plus({ weeks: 1 });\n      newEnd = currentEnd.plus({ weeks: 1 });\n    } else if (this.selectedRange === 'M') {\n      // Check if current M range is a complete month, if so maintain month boundaries\n      const interval = this.getCustomRangeInterval();\n      if (interval.type === 'months') {\n        newStart = currentStart.plus({ months: 1 }).startOf('month');\n        newEnd = newStart\n          .plus({ months: interval.amount })\n          .minus({ days: 1 })\n          .endOf('day');\n      } else {\n        newStart = currentStart.plus({ months: 1 });\n        newEnd = currentEnd.plus({ months: 1 });\n      }\n    } else if (this.selectedRange === 'Y') {\n      newStart = currentStart.plus({ years: 1 });\n      newEnd = currentEnd.plus({ years: 1 });\n    } else if (this.selectedRange === '') {\n      // Custom range - determine the interval and navigate by that amount\n      const interval = this.getCustomRangeInterval();\n      if (interval.type === 'days') {\n        newStart = currentStart.plus({ days: interval.amount });\n        newEnd = currentEnd.plus({ days: interval.amount });\n      } else if (interval.type === 'months') {\n        // For month navigation, maintain complete month boundaries\n        newStart = currentStart\n          .plus({ months: interval.amount })\n          .startOf('month');\n        newEnd = newStart\n          .plus({ months: interval.amount })\n          .minus({ days: 1 })\n          .endOf('day');\n      } else if (interval.type === 'years') {\n        newStart = currentStart.plus({ years: interval.amount });\n        newEnd = currentEnd.plus({ years: interval.amount });\n      } else {\n        return;\n      }\n    } else {\n      return;\n    }\n\n    // Enforce min/max bounds\n    const minDateTime = DateTime.fromISO(this.minDate);\n    const maxDateTime = DateTime.fromISO(this.maxDate);\n    const startDate =\n      newStart < minDateTime ? this.minDate : newStart.toISODate();\n    const endDate = newEnd > maxDateTime ? this.maxDate : newEnd.toISODate();\n\n    this.startDate = startDate;\n    this.endDate = endDate;\n\n    this.fireCustomEvent(CustomEventType.DateRangeChanged, {\n      start: this.startDate,\n      end: this.endDate,\n      range: this.selectedRange\n    });\n  }\n\n  private getNavigationLabel(direction: 'previous' | 'next'): string {\n    const interval = this.getCustomRangeInterval();\n    const amount = interval.amount;\n    const unit =\n      interval.type === 'days'\n        ? amount === 1\n          ? 'day'\n          : 'days'\n        : interval.type === 'months'\n        ? amount === 1\n          ? 'month'\n          : 'months'\n        : amount === 1\n        ? 'year'\n        : 'years';\n\n    return `${\n      direction === 'previous' ? 'Previous' : 'Next'\n    } ${amount} ${unit}`;\n  }\n\n  updated(changed: Map<string, any>) {\n    super.updated(changed);\n\n    if (\n      changed.has('startDate') &&\n      changed.has('endDate') &&\n      (!this.startDate || !this.endDate)\n    ) {\n      this.setRange('M');\n    }\n\n    if (changed.has('editingStart') && this.editingStart) {\n      setTimeout(() => {\n        const startPicker: DatePicker = this.shadowRoot?.querySelector(\n          'temba-datepicker.start-picker'\n        );\n\n        if (startPicker) {\n          startPicker.handleClicked();\n        }\n      }, 0);\n    }\n\n    if (changed.has('editingEnd') && this.editingEnd) {\n      setTimeout(() => {\n        const endPicker: DatePicker = this.shadowRoot?.querySelector(\n          'temba-datepicker.end-picker'\n        );\n        if (endPicker) {\n          endPicker.handleClicked();\n        }\n      }, 0);\n    }\n  }\n\n  private formatDateForDisplay(dateString: string): string {\n    if (!dateString) return '';\n\n    const date = DateTime.fromISO(dateString);\n    if (!date.isValid) return dateString;\n\n    // Use the browser's locale for formatting\n    return date.toLocaleString();\n  }\n\n  render() {\n    return html`\n      <div class=\"range-container\">\n        ${this.editingStart\n          ? html`<temba-datepicker\n              class=\"start-picker\"\n              .value=${this.startDate}\n              .min=${this.minDate}\n              .max=${this.maxDate}\n              @change=${(e: Event) => {\n                const value = (e.target as any).value;\n                this.setValidRange('start', value);\n                this.editingStart = false;\n                this.selectedRange = '';\n              }}\n              @blur=${() => (this.editingStart = false)}\n            ></temba-datepicker>`\n          : html`<span class=\"date-display\" @click=${this.handleStartClick}\n              >${this.formatDateForDisplay(this.startDate) ||\n              'Start date'}</span\n            >`}\n        <span> - </span>\n        ${this.editingEnd\n          ? html`<temba-datepicker\n              .value=${this.endDate}\n              class=\"end-picker\"\n              .min=${this.minDate}\n              .max=${this.maxDate}\n              @change=${(e: Event) => {\n                const value = (e.target as any).value;\n                this.setValidRange('end', value);\n                this.editingEnd = false;\n                this.selectedRange = '';\n              }}\n              @blur=${() => (this.editingEnd = false)}\n            ></temba-datepicker>`\n          : html`<span class=\"date-display\" @click=${this.handleEndClick}\n              >${this.formatDateForDisplay(this.endDate) || 'End date'}</span\n            >`}\n        <div class=\"navigation-container\">\n          <button\n            class=\"nav-arrow ${this.selectedRange === 'ALL' ? 'hidden' : ''}\"\n            ?disabled=${!this.canNavigatePrevious()}\n            @click=${this.navigatePrevious}\n            title=\"Previous ${this.selectedRange === 'W'\n              ? 'week'\n              : this.selectedRange === 'M'\n              ? 'month'\n              : this.selectedRange === 'Y'\n              ? 'year'\n              : this.selectedRange === ''\n              ? this.getNavigationLabel('previous')\n              : 'period'}\"\n          >\n            ◀\n          </button>\n          <div class=\"button-group\">\n            <button\n              class=\"range-btn ${this.selectedRange === 'W' ? 'selected' : ''}\"\n              @click=${() => this.setRange('W')}\n            >\n              W\n            </button>\n            <button\n              class=\"range-btn ${this.selectedRange === 'M' ? 'selected' : ''}\"\n              @click=${() => this.setRange('M')}\n            >\n              M\n            </button>\n            <button\n              class=\"range-btn ${this.selectedRange === 'Y' ? 'selected' : ''}\"\n              @click=${() => this.setRange('Y')}\n            >\n              Y\n            </button>\n            <button\n              class=\"range-btn ${this.selectedRange === 'ALL'\n                ? 'selected'\n                : ''}\"\n              @click=${() => this.setRange('ALL')}\n            >\n              All\n            </button>\n          </div>\n          <button\n            class=\"nav-arrow ${this.selectedRange === 'ALL' ? 'hidden' : ''}\"\n            ?disabled=${!this.canNavigateNext()}\n            @click=${this.navigateNext}\n            title=\"Next ${this.selectedRange === 'W'\n              ? 'week'\n              : this.selectedRange === 'M'\n              ? 'month'\n              : this.selectedRange === 'Y'\n              ? 'year'\n              : this.selectedRange === ''\n              ? this.getNavigationLabel('next')\n              : 'period'}\"\n          >\n            ▶\n          </button>\n        </div>\n      </div>\n    `;\n  }\n}\n\ncustomElements.define('temba-range-picker', RangePicker);\n"]}

package/out-tsc/src/{slider → form}/TembaSlider.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { getClasses } from '../utils';
 export class TembaSlider extends FormElement {
     constructor() {

package/out-tsc/src/form/TembaSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TembaSlider.js","sourceRoot":"","sources":["../../../src/form/TembaSlider.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from './FormElement';\nimport { getClasses } from '../utils';\n\nexport class TembaSlider extends FormElement {\n  static get styles() {\n    return css`\n      :host {\n        display: block;\n      }\n\n      .track {\n        height: 2px;\n        border-top: 0.5em solid #fff;\n        border-bottom: 0.5em solid #fff;\n        background: #ddd;\n        flex-grow: 1;\n      }\n\n      .circle {\n        margin-bottom: -1.05em;\n        margin-left: -0.5em;\n        width: 0.75em;\n        height: 0.75em;\n        border: 2px solid #999;\n        border-radius: 999px;\n        position: relative;\n        background: #fff;\n        box-shadow: 0 0 0 4px rgb(255, 255, 255);\n        transition: transform 200ms ease-in-out;\n      }\n\n      .grabbed .track {\n        cursor: pointer;\n      }\n\n      :hover .circle {\n        border-color: #777;\n        cursor: pointer;\n      }\n\n      .grabbed .circle {\n        border-color: var(--color-primary-dark);\n        background: #fff;\n      }\n\n      .grabbed .circle {\n        transform: scale(1.2);\n      }\n\n      .wrapper {\n        display: flex;\n        align-items: center;\n      }\n\n      .pre,\n      .post {\n        font-size: 0.9em;\n        color: #999;\n        padding: 0em 1em;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  range = false;\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  max = 100;\n\n  circleX = 0;\n  grabbed = false;\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n    this.handleMouseMove = this.handleMouseMove.bind(this);\n    this.handleMouseUp = this.handleMouseUp.bind(this);\n  }\n\n  public updated(changedProperties: Map<string, any>): void {\n    if (changedProperties.has('value')) {\n      this.updateCircle();\n    }\n  }\n\n  public updateValue(evt: MouseEvent) {\n    const track = this.shadowRoot.querySelector('.track') as HTMLDivElement;\n    const left = evt.pageX - track.offsetLeft;\n    const pct = left / track.offsetWidth;\n\n    const range = this.max - this.min;\n    const pctAsValue = range * pct + this.min;\n    this.value =\n      '' + Math.max(this.min, Math.min(Math.round(pctAsValue), this.max));\n  }\n\n  public handleMouseMove(evt: MouseEvent) {\n    if (this.grabbed) {\n      this.updateValue(evt);\n    }\n  }\n\n  public handleTrackDown(evt: MouseEvent) {\n    this.grabbed = true;\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n    document.querySelector('html').classList.add('dragging');\n    this.updateValue(evt);\n    this.requestUpdate();\n  }\n\n  public handleMouseUp(evt: MouseEvent) {\n    this.grabbed = false;\n    this.updateValue(evt);\n    this.requestUpdate();\n\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n    document.querySelector('html').classList.remove('dragging');\n  }\n\n  public updateCircle() {\n    const track = this.shadowRoot.querySelector('.track') as HTMLDivElement;\n    const pre = this.shadowRoot.querySelector('.pre') as HTMLDivElement;\n    const range = this.max - this.min;\n    let cValue = parseInt(this.value);\n    if (!cValue || cValue < this.min) {\n      cValue = this.min;\n    } else if (cValue > this.max) {\n      cValue = this.max;\n    }\n    this.value = '' + cValue;\n    const pct = (cValue - this.min) / range;\n    const pctAsPixels = track.offsetWidth * pct;\n\n    this.circleX = pctAsPixels + (pre ? pre.offsetWidth : 0);\n    this.requestUpdate();\n  }\n\n  public render(): TemplateResult {\n    return html` <div class=\"${getClasses({ grabbed: this.grabbed })}\">\n      <div\n        style=${styleMap({ left: this.circleX + 'px' })}\n        class=\"circle\"\n        @mousedown=${this.handleTrackDown}\n      ></div>\n      <div class=\"wrapper\">\n        ${this.range ? html`<div class=\"pre\">${this.min}</div>` : null}\n        <div class=\"track\" @mousedown=${this.handleTrackDown}></div>\n        ${this.range ? html`<div class=\"post\">${this.max}</div>` : null}\n      </div>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/{templates → form}/TemplateEditor.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { property } from 'lit/decorators.js';
-import { FormElement } from '../FormElement';
+import { FormElement } from './FormElement';
 import { html, css, LitElement } from 'lit';
 import { CustomEventType } from '../interfaces';
 import { getClasses } from '../utils';

package/out-tsc/src/form/TemplateEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateEditor.js","sourceRoot":"","sources":["../../../src/form/TemplateEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { property } from 'lit/decorators.js';\nimport { FormElement } from './FormElement';\nimport { TemplateResult, html, css, LitElement } from 'lit';\nimport { CustomEventType } from '../interfaces';\nimport { MediaPicker } from './MediaPicker';\nimport { getClasses } from '../utils';\n\ninterface Component {\n  name: string;\n  type: string;\n  content: string;\n  variables: { [key: string]: number };\n}\n\ninterface Translation {\n  locale: string;\n  status: string;\n  channel: { uuid: string; name: string };\n  components: Component[];\n  variables: { type: string }[];\n}\n\ninterface Template {\n  created_on: string;\n  modified_on: string;\n  name: string;\n  uuid: string;\n  base_translation: Translation;\n}\n\nexport class TemplateEditor extends FormElement {\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true\n  };\n\n  static get styles() {\n    return css`\n      .component {\n        background: #fff;\n        border: 1px solid var(--color-widget-border);\n        border-radius: var(--curvature);\n        padding: 1em;\n        margin-top: 1em;\n      }\n\n      .content {\n      }\n\n      .picker {\n        margin-bottom: 0.5em;\n        display: block;\n      }\n      .param {\n        display: flex;\n        margin-bottom: 0.5em;\n        align-items: center;\n      }\n      label {\n        margin-right: 0.5em;\n      }\n\n      .content span {\n        margin-right: 0.25em;\n      }\n\n      .error-message {\n        padding-left: 0.5em;\n        padding-bottom: 1em;\n      }\n\n      .variable {\n        display: inline-block;\n        margin: 0.25em 0em;\n        margin-right: 0.25em;\n      }\n\n      .button-wrapper {\n        background: #f9f9f9;\n        border-radius: var(--curvature);\n        padding: 0.5em;\n        display: flex;\n        flex-direction: column;\n      }\n\n      .button-header {\n        font-weight: normal;\n        margin-left: 0.25em;\n        margin-bottom: -0.5em;\n        font-size: 0.9em;\n        color: #777;\n      }\n\n      .buttons {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        margin-bottom: 1em;\n      }\n\n      .button {\n        background: #fff;\n        padding: 0.3em 1em;\n        border: 1px solid #e6e6e6;\n        border-radius: var(--curvature);\n        min-height: 23px;\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        margin-right: 0.5em;\n        margin-top: 0.5em;\n        align-items: center;\n      }\n\n      .button .content {\n        margin-bottom: 0;\n      }\n\n      .button .display {\n        margin-right: 0.5em;\n        background: #f9f9f9;\n        padding: 0.25em 1em;\n        border-radius: var(--curvature);\n      }\n\n      .variable {\n        --temba-textinput-padding: 5px 5px;\n        --temba-textinput-font-size: 0.9em;\n        line-height: initial;\n      }\n\n      .template {\n        background: #fff;\n        border-radius: var(--curvature);\n        border: 1px solid var(--color-widget-border);\n        padding: 1em;\n        line-height: 2.2em;\n        max-height: 50vh;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding-bottom: 0;\n      }\n\n      .label {\n        font-size: 0.9em;\n        color: #777;\n        margin-left: 0.25em;\n      }\n    `;\n  }\n\n  @property({ type: String })\n  url: string;\n\n  // initial template uuid\n  @property({ type: String })\n  template: string;\n\n  @property({ type: Object })\n  selectedTemplate: Template;\n\n  // initial variables, not reflected back\n  @property({ type: Array })\n  variables: string[];\n\n  @property({ type: Array })\n  currentVariables: string[];\n\n  @property({ type: Object, attribute: false })\n  translation: Translation;\n\n  @property({ type: Boolean })\n  translating: boolean;\n\n  pickersLoading: { [key: number]: boolean } = {};\n\n  textInputAttachments: { [index: number]: boolean } = {};\n\n  public updated(changes: Map<string, any>): void {\n    super.updated(changes);\n    if (changes.has('template')) {\n      this.textInputAttachments = {};\n      this.currentVariables = this.variables || [];\n\n      // check if our variables should be a textinput\n      if (this.currentVariables.length > 0) {\n        this.currentVariables.forEach((variable, index) => {\n          const split = variable.split(':');\n          if (split.length > 1) {\n            // we have a generary content type\n            if (split[0].indexOf('/') === -1) {\n              this.textInputAttachments[index] = true;\n            }\n          }\n        });\n      }\n    }\n  }\n\n  private handleTemplateChanged(event: CustomEvent) {\n    const prev = this.selectedTemplate;\n    this.selectedTemplate = (event.target as any).values[0] as Template;\n    if (prev) {\n      this.currentVariables = [];\n      this.textInputAttachments = {};\n    }\n\n    if (this.selectedTemplate) {\n      this.translation = this.selectedTemplate.base_translation;\n      if (this.translation) {\n        this.variables = new Array(\n          (this.translation.variables || []).length\n        ).fill('');\n      } else {\n        this.variables = [];\n      }\n    } else {\n      this.translation = null;\n      this.variables = [];\n    }\n\n    this.fireCustomEvent(CustomEventType.ContextChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.currentVariables\n    });\n  }\n\n  private handleAttachmentLoading(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    const index = parseInt(media.getAttribute('index'));\n    this.pickersLoading[index] = event.detail.loading;\n    this.requestUpdate();\n  }\n\n  private handleAttachmentsChanged(event: CustomEvent) {\n    const media = event.target as MediaPicker;\n    const index = parseInt(media.getAttribute('index'));\n\n    if (media.attachments.length === 0) {\n      this.currentVariables[index] = '';\n    } else {\n      const attachment = media.attachments[0];\n      if (attachment.url && attachment.content_type) {\n        this.currentVariables[\n          index\n        ] = `${attachment.content_type}:${attachment.url}`;\n      } else {\n        this.currentVariables[index] = ``;\n      }\n    }\n    this.fireContentChange();\n    this.requestUpdate('currentVariables');\n  }\n\n  private handleVariableChanged(event: InputEvent) {\n    const target = event.target as HTMLInputElement;\n    const variableIndex = parseInt(target.getAttribute('index'));\n    const prefix = target.getAttribute('prefix') || '';\n\n    // add our prefix if we have a value\n    let value = target.value;\n    if (value) {\n      value = prefix + value;\n    }\n\n    this.currentVariables[variableIndex] = value;\n    this.fireContentChange();\n  }\n\n  private fireContentChange() {\n    this.fireCustomEvent(CustomEventType.ContentChanged, {\n      template: this.selectedTemplate,\n      translation: this.translation,\n      variables: this.currentVariables\n    });\n  }\n\n  private renderVariables(component: Component) {\n    // create a regex match based on the variable names\n    const variableRegex = new RegExp(\n      `{{(${Object.keys(component.variables || []).join('|')})}}`,\n      'g'\n    );\n\n    let variables = null;\n\n    let parts = [];\n    if (component.content && component.content.trim().length > 0) {\n      parts = component.content?.split(variableRegex) || [];\n    }\n    const currVariables = this.currentVariables || [];\n    if (parts.length > 0) {\n      variables = parts.map((part, index) => {\n        if (index % 2 === 0) {\n          return html`<span class=\"text\">${part}</span>`;\n        }\n        const variableIndex = component.variables[part];\n\n        return html`<temba-completion\n          class=\"variable\"\n          type=\"text\"\n          value=${variableIndex < currVariables.length\n            ? currVariables[variableIndex]\n            : null}\n          @keyup=${this.handleVariableChanged}\n          name=\"${component.name}\"\n          index=\"${variableIndex}\"\n          placeholder=\"{{${part}}}\"\n        ></temba-completion>`;\n      });\n    } else {\n      variables = Object.values(component.variables).map((variableIndex) => {\n        const variableSpec = this.translation.variables[variableIndex];\n        if (\n          variableSpec.type === 'image' ||\n          variableSpec.type === 'document' ||\n          variableSpec.type === 'audio' ||\n          variableSpec.type === 'video'\n        ) {\n          let attachments = [];\n          if (this.currentVariables[variableIndex]) {\n            const parts = this.currentVariables[variableIndex].split(':');\n            const content_type = parts[0];\n            const url = parts.slice(1).join(':');\n            attachments = [{ url, content_type }];\n          }\n\n          const loading = this.pickersLoading[variableIndex];\n\n          const prefix = variableSpec.type + ':';\n          let value =\n            variableIndex < currVariables.length\n              ? currVariables[variableIndex]\n              : null;\n\n          if (value && value.startsWith(prefix)) {\n            value = value.slice(prefix.length);\n          }\n\n          return html`\n            ${this.textInputAttachments[variableIndex]\n              ? html` <div class=\"label\">\n                    ${variableSpec.type.charAt(0).toUpperCase() +\n                    variableSpec.type.slice(1)}\n                    URL\n                  </div>\n                  <div\n                    style=\"display:flex;align-items:center;margin-bottom:1em;\"\n                  >\n                    <temba-completion\n                      style=\"flex-grow:1; margin-right:1em;\"\n                      prefix=\"${prefix}\"\n                      index=${variableIndex}\n                      value=${value}\n                      @keyup=${this.handleVariableChanged}\n                    ></temba-completion>\n                    <temba-icon\n                      name=\"close\"\n                      clickable\n                      @click=${() => {\n                        this.textInputAttachments[variableIndex] = false;\n                        this.currentVariables[variableIndex] = '';\n                        this.requestUpdate();\n                      }}\n                    >\n                    </temba-icon>\n                    <div></div>\n                  </div>`\n              : html`\n                  <div\n                    class=${getClasses({ loading })}\n                    style=\"\n              display: flex; \n              align-items: center; \n              border-radius: var(--curvature);\n              margin-bottom: 0.5em;\n              ${attachments.length === 0 && !loading\n                      ? `background-color:rgba(0,0,0,.04);`\n                      : ``}\"\n                  >\n                    <temba-media-picker\n                      accept=\"${variableSpec.type === 'document'\n                        ? 'application/pdf'\n                        : variableSpec.type + '/*'}\"\n                      max=\"1\"\n                      index=${variableIndex}\n                      icon=\"attachment_${variableSpec.type}\"\n                      attachments=${JSON.stringify(attachments)}\n                      @temba-loading=${this.handleAttachmentLoading.bind(this)}\n                      @change=${this.handleAttachmentsChanged.bind(this)}\n                    ></temba-media-picker>\n                    <div style=\"flex-grow:1\">\n                      ${attachments.length == 0 && !loading\n                        ? html`Attach ${variableSpec.type} to continue`\n                        : ''}\n                    </div>\n                    <temba-icon\n                      clickable\n                      name=\"edit\"\n                      @click=${() => {\n                        this.currentVariables[variableIndex] = '';\n                        this.textInputAttachments[variableIndex] = true;\n                        this.requestUpdate();\n                      }}\n                      style=\"margin-right:1em\"\n                    ></temba-icon>\n                  </div>\n                `}\n          `;\n        }\n      });\n    }\n\n    return html`<div class=\"content\">${variables}</div> `;\n  }\n\n  public renderComponents(components: Component[]): TemplateResult {\n    const nonButtons = components\n      .filter((comp) => !comp.type.startsWith('button/'))\n      .map(\n        (component) =>\n          html`<div class=\"${component['name']}\">\n            ${this.renderVariables(component)}\n          </div>`\n      );\n    const buttonComponents = components.filter((comp) =>\n      comp.type.startsWith('button/')\n    );\n    const buttons =\n      buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;\n    return html`<div class=\"main\">${nonButtons}</div>\n      <div class=\"buttons\">\n        ${buttons}\n        <div></div>\n      </div>`;\n  }\n\n  public renderButtons(components): TemplateResult {\n    const buttons = components.map((component) => {\n      if (component.display) {\n        return html`\n          <div class=\"button\">\n            <div class=\"display\">${component.display}</div>\n            ${this.renderVariables(component)}\n          </div>\n        `;\n      } else {\n        return html`\n          <div class=\"button\">${this.renderVariables(component)}</div>\n        `;\n      }\n    });\n    return html`<div class=\"button-wrapper\">\n      <div class=\"button-header\">Template Buttons</div>\n      <div class=\"buttons\">${buttons}</div>\n    </div>`;\n  }\n\n  public render(): TemplateResult {\n    let content = null;\n    if (this.translation) {\n      content = this.renderComponents(this.translation.components);\n    } else if (this.selectedTemplate) {\n      content = html`<div class=\"error-message\">\n        This template currently has no approved translations.\n      </div>`;\n    }\n\n    return html`\n      <div>\n        <temba-select\n          searchable\n          ?clearable=${!this.translating}\n          ?disabled=${this.translating}\n          valuekey=\"uuid\"\n          class=\"picker\"\n          value=\"${this.template}\"\n          endpoint=\"${this.url}\"\n          shouldExclude=${(template) => template.status !== 'approved'}\n          placeholder=\"Select a template\"\n          @temba-content-changed=${this.swallowEvent}\n          @change=${this.handleTemplateChanged}\n        >\n        </temba-select>\n        ${content ? html` <div class=\"template\">${content}</div>` : null}\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/{textinput → form}/TextInput.js

@@ -3,8 +3,8 @@ import { html, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { FormElement } from '../FormElement';
-import { sanitize } from './helpers';
+import { FormElement } from './FormElement';
+import { sanitizeUnintendedUnicode } from '../utils';
 export var InputType;
 (function (InputType) {
     InputType["Text"] = "text";
@@ -209,7 +209,7 @@ export class TextInput extends FormElement {
         }
     }
     sanitizeGSM(text) {
-        return this.gsm ? sanitize(text) : text;
+        return this.gsm ? sanitizeUnintendedUnicode(text) : text;
     }
     handleChange(update) {
         if (this.disabled) {

package/out-tsc/src/form/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/form/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { FormElement } from './FormElement';\nimport { Modax } from '../layout/Modax';\nimport { sanitizeUnintendedUnicode } from '../utils';\nimport { CharCount } from '../display/CharCount';\n\nexport enum InputType {\n  Text = 'text',\n  Password = 'password',\n  Number = 'number'\n}\n\nexport class TextInput extends FormElement {\n  static get styles() {\n    return css`\n      .input-container {\n        border-radius: var(--curvature-widget);\n        cursor: var(--input-cursor);\n        background: var(--color-widget-bg);\n        border: 1px solid var(--color-widget-border);\n        transition: all ease-in-out var(--transition-speed);\n        display: flex;\n        flex-direction: row;\n        align-items: stretch;\n        box-shadow: var(--widget-box-shadow);\n        caret-color: var(--input-caret);\n      }\n\n      .clear-icon {\n        --icon-color: var(--color-text-dark-secondary);\n        cursor: pointer;\n        margin: auto;\n        padding-right: 10px;\n        line-height: 1;\n      }\n\n      .clear-icon:hover {\n        --icon-color: var(--color-text-dark);\n      }\n\n      .hidden {\n        visibility: hidden;\n        position: absolute;\n      }\n\n      .input-container:focus-within {\n        border-color: var(--color-focus);\n        background: var(--color-widget-bg-focused);\n        box-shadow: var(--widget-box-shadow-focused);\n        position: relative;\n      }\n\n      .input-container:hover {\n      }\n\n      textarea {\n        height: var(--textarea-height);\n        min-height: var(--textarea-min-height, var(--textarea-height));\n        transition: height var(--transition-speed) ease-in-out;\n        unicode-bidi: var(--unicode-bidi, normal);\n      }\n\n      .textinput:focus {\n      }\n\n      .textinput {\n        padding: var(--temba-textinput-padding);\n        border: none;\n        flex: 1;\n        margin: 0;\n        background: transparent;\n        color: var(--color-widget-text);\n        font-family: var(--font-family);\n        font-size: var(--temba-textinput-font-size);\n        line-height: normal;\n        cursor: var(--input-cursor);\n        resize: none;\n        width: 100%;\n      }\n\n      .textinput:focus {\n        outline: none;\n        box-shadow: none;\n        cursor: text;\n        color: var(--color-widget-text-focused, var(--color-widget-text));\n      }\n\n      .textinput::placeholder {\n        color: var(--color-placeholder);\n      }\n\n      .grow-wrap {\n        display: flex;\n        align-items: stretch;\n        width: 100%;\n        margin-bottom: 1em;\n      }\n\n      .grow-wrap > div {\n        border: 0px solid green;\n        white-space: pre-wrap;\n        width: 100%;\n        padding: var(--temba-textinput-padding);\n        flex: 1;\n        margin: 0;\n        background: none;\n        color: var(--color-widget-text);\n        font-family: var(--font-family);\n        font-size: var(--temba-textinput-font-size);\n        line-height: normal;\n        cursor: text;\n        resize: none;\n        width: 100%;\n        word-break: break-word;\n        opacity: 0;\n        z-index: -1;\n        max-height: var(--temba-textinput-max-height, 30em);\n      }\n\n      .grow-wrap textarea {\n        margin-left: -100%;\n        height: 100%;\n        flex-grow: 1;\n      }\n\n      input[type='number'] {\n        appearance: none;\n      }\n\n      input[type='number']::-webkit-inner-spin-button {\n        display: none;\n      }\n\n      .type-icon {\n        color: #e3e3e3;\n      }\n    `;\n  }\n\n  @property({ type: Boolean })\n  textarea: boolean;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: Boolean })\n  password: boolean;\n\n  @property({ type: Number })\n  maxlength: number;\n\n  @property({ type: Object })\n  inputElement: HTMLInputElement;\n\n  @property({ type: Boolean })\n  clearable: boolean;\n\n  @property({ type: Boolean })\n  gsm: boolean;\n\n  @property({ type: String })\n  counter: string;\n\n  // if we are still loading\n  @property({ type: Boolean })\n  loading = true;\n\n  @property({ type: Boolean })\n  submitOnEnter = true;\n\n  @property()\n  onBlur: any;\n\n  @property({ type: Boolean })\n  autogrow = false;\n\n  @property({ type: String })\n  type = InputType.Text;\n\n  counterElement: CharCount = null;\n  cursorStart = -1;\n  cursorEnd = -1;\n\n  public constructor() {\n    super();\n  }\n\n  public firstUpdated(changes: Map<string, any>) {\n    super.firstUpdated(changes);\n\n    this.inputElement = this.shadowRoot.querySelector('.textinput');\n\n    if (changes.has('counter')) {\n      let root = this.getParentModax() as any;\n      if (root) {\n        root = root.shadowRoot;\n      }\n      if (!root) {\n        root = document;\n      }\n      this.counterElement = root.querySelector(this.counter);\n      this.counterElement.text = this.value;\n    }\n  }\n\n  public updated(changes: Map<string, any>) {\n    super.updated(changes);\n\n    if (changes.has('value')) {\n      if (changes.get('value') !== undefined) {\n        this.fireEvent('change');\n      }\n\n      if (this.textarea && this.autogrow) {\n        const autogrow = this.shadowRoot.querySelector(\n          '.grow-wrap > div'\n        ) as HTMLDivElement;\n        autogrow.innerText = this.value + String.fromCharCode(10);\n      }\n\n      if (this.cursorStart > -1 && this.cursorEnd > -1) {\n        this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);\n        this.cursorStart = -1;\n        this.cursorEnd = -1;\n      }\n    }\n  }\n\n  public getDisplayValue() {\n    return this.inputElement.value;\n  }\n\n  private handleClear(event: any): void {\n    event.stopPropagation();\n    event.preventDefault();\n    this.value = null;\n  }\n\n  public getTextInput(): TextInput {\n    return this;\n  }\n\n  public updateValue(value: string): void {\n    const cursorStart = this.inputElement.selectionStart;\n    const cursorEnd = this.inputElement.selectionEnd;\n    const sanitized = this.sanitizeGSM(value);\n\n    if (sanitized !== value) {\n      this.cursorStart = cursorStart;\n      this.cursorEnd = cursorEnd;\n    }\n\n    this.value = sanitized;\n\n    if (this.textarea) {\n      this.inputElement.value = this.value;\n    }\n\n    if (this.counterElement) {\n      this.counterElement.text = value;\n    }\n  }\n\n  private sanitizeGSM(text: string): string {\n    return this.gsm ? sanitizeUnintendedUnicode(text) : text;\n  }\n\n  private handleChange(update: any): void {\n    if (this.disabled) {\n      return;\n    }\n    this.updateValue(update.target.value);\n    this.fireEvent('change');\n  }\n\n  private handleContainerClick(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (this.inputElement) {\n      this.inputElement.click();\n    }\n  }\n\n  private handleContainerFocus(): void {\n    if (this.disabled) {\n      return;\n    }\n    if (this.inputElement) {\n      this.inputElement.focus();\n    }\n  }\n\n  private handleInput(update: any): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.updateValue(update.target.value);\n    this.fireEvent('input');\n  }\n\n  /** we just return the value since it should be a string */\n  public serializeValue(value: any): string {\n    return value;\n  }\n\n  public getParentModax(): Modax {\n    let parent = this as HTMLElement;\n\n    while (parent) {\n      if (parent.parentElement) {\n        parent = parent.parentElement;\n      } else {\n        parent = (parent as any).getRootNode().host;\n      }\n\n      if (!parent) {\n        return null;\n      }\n\n      if (parent.tagName == 'TEMBA-MODAX') {\n        return parent as Modax;\n      }\n    }\n  }\n\n  public getParentForm(): HTMLFormElement {\n    let parent = this as HTMLElement;\n\n    while (parent) {\n      if (parent.parentElement) {\n        parent = parent.parentElement;\n      } else {\n        parent = (parent as any).getRootNode().host;\n      }\n\n      if (!parent) {\n        return null;\n      }\n\n      if (parent.tagName === 'FORM') {\n        return parent as HTMLFormElement;\n      }\n    }\n  }\n\n  public click(): void {\n    super.click();\n    this.handleContainerClick();\n  }\n\n  public focus(): void {\n    super.focus();\n    this.handleContainerFocus();\n  }\n\n  // TODO make this a formelement and have contactsearch set the root\n  public render(): TemplateResult {\n    const containerStyle = {\n      height: `${this.textarea ? '100%' : 'auto'}`\n    };\n\n    const clear =\n      this.clearable && this.inputElement && this.inputElement.value\n        ? html`<temba-icon\n            name=\"x\"\n            class=\"clear-icon\"\n            @click=${this.handleClear}\n          />`\n        : null;\n\n    let input = html`\n      <input\n        autofocus\n        class=\"textinput\"\n        autocomplete=\"off\"\n        name=${this.name}\n        type=\"${this.password || this.type === InputType.Password\n          ? 'password'\n          : this.type}\"\n        maxlength=\"${ifDefined(this.maxlength)}\"\n        @change=${this.handleChange}\n        @input=${this.handleInput}\n        @blur=${this.blur}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            // eslint-disable-next-line @typescript-eslint/no-this-alias\n            const input = this;\n\n            if (this.submitOnEnter) {\n              const parentModax = input.getParentModax();\n              const parentForm = !parentModax ? input.getParentForm() : null;\n\n              // if we don't have something to submit then bail\n              if (!parentModax && !parentForm) {\n                return false;\n              }\n\n              // don't submit disabled forms on enter\n              if (parentModax && parentModax.disabled) {\n                return false;\n              }\n\n              input.blur();\n\n              // look for a form to submit\n              window.setTimeout(function () {\n                // first, look for a modax that contains us\n                const modax = input.getParentModax();\n                if (modax) {\n                  input.blur();\n\n                  modax.submit();\n                } else {\n                  // otherwise, just look for a vanilla submit button\n                  const form = input.getParentForm();\n\n                  if (form) {\n                    const submitButton = form.querySelector(\n                      \"input[type='submit']\"\n                    ) as HTMLInputElement;\n                    if (submitButton) {\n                      submitButton.click();\n                    } else {\n                      form.submit();\n                    }\n                  }\n                }\n              }, 10);\n              // this is needed for firefox, would be nice to\n              // find a way to do this with a callback instead\n            }\n          }\n        }}\n        placeholder=${this.placeholder}\n        .value=${this.value}\n        .disabled=${this.disabled}\n      />\n    `;\n\n    if (this.textarea) {\n      input = html`\n        <textarea\n          class=\"textinput\"\n          name=${this.name}\n          maxlength=\"${ifDefined(this.maxlength)}\"\n          placeholder=${this.placeholder}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @blur=${this.blur}\n          .value=${this.value}\n          .disabled=${this.disabled}\n        ></textarea>\n      `;\n\n      if (this.autogrow) {\n        input = html` <div class=\"grow-wrap\">\n          <div></div>\n          ${input}\n        </div>`;\n      }\n    }\n\n    return html`\n      <temba-field\n        name=${this.name}\n        .label=\"${this.label}\"\n        .helpText=\"${this.helpText}\"\n        .errors=${this.errors}\n        .widgetOnly=${this.widgetOnly}\n        .hideLabel=${this.hideLabel}\n        .disabled=${this.disabled}\n      >\n        <div\n          class=\"input-container\"\n          style=${styleMap(containerStyle)}\n          @click=${this.handleContainerClick}\n        >\n          <slot name=\"prefix\"></slot>\n\n          ${input} ${clear}\n          <slot name=\"type\" class=\"type-icon\"\n            >${this.type === InputType.Number\n              ? html`<temba-icon name=\"number\"></temba-icon>`\n              : null}</slot\n          >\n          <slot></slot>\n        </div>\n      </temba-field>\n    `;\n  }\n}\n"]}

package/out-tsc/src/{omnibox → form/select}/Omnibox.js

@@ -2,8 +2,8 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { Select } from '../select/Select';
-import { Icon } from '../vectoricon';
+import { Select } from './Select';
+import { Icon } from '../../Icons';
 var OmniType;
 (function (OmniType) {
     OmniType["Group"] = "group";

package/out-tsc/src/form/select/Omnibox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Omnibox.js","sourceRoot":"","sources":["../../../../src/form/select/Omnibox.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { Select, SelectOption } from './Select';\nimport { Icon } from '../../Icons';\n\nenum OmniType {\n  Group = 'group',\n  Contact = 'contact'\n}\n\nexport interface OmniOption extends SelectOption {\n  id: string;\n  name: string;\n  type: OmniType;\n  urn?: string;\n  count?: number;\n  contact?: string;\n  scheme?: string;\n}\n\nconst postNameStyle = {\n  color: 'var(--color-text-dark)',\n  padding: '0px 6px',\n  fontSize: '12px'\n};\n\nexport class Omnibox extends Select<OmniOption> {\n  @property({ type: String })\n  valueKey = 'uuid';\n\n  @property({ type: Boolean })\n  groups = false;\n\n  @property({ type: Boolean })\n  contacts = false;\n\n  @property({ type: String })\n  placeholder = 'Select recipients';\n\n  @property({ type: Boolean })\n  multi = true;\n\n  @property({ type: Boolean })\n  searchable = true;\n\n  @property({ type: Boolean })\n  searchOnFocus = true;\n\n  @property({ type: Boolean })\n  queryParam = 'search';\n\n  public update(changes: PropertyValues): void {\n    super.update(changes);\n\n    if (\n      (changes.has('groups') || changes.has('contacts')) &&\n      (this.groups || this.contacts)\n    ) {\n      let types = '&types=';\n      if (this.groups) {\n        types += 'g';\n      }\n\n      if (this.contacts) {\n        types += 'c';\n      }\n\n      this.endpoint = this.endpoint + types;\n    }\n  }\n\n  /** An option in the drop down */\n  public renderOptionDefault(option: OmniOption): TemplateResult {\n    return html`\n      <div style=\"display:flex;\">\n        <div style=\"margin-right: 8px\">${this.getIcon(option)}</div>\n        <div style=\"flex: 1\">${option.name}</div>\n        <div\n          style=\"background: rgba(50, 50, 50, 0.15); margin-left: 5px; display: flex; align-items: center; border-radius: 4px\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getPostName(option: OmniOption): TemplateResult {\n    const style = { ...postNameStyle };\n\n    if (option.urn && option.type === OmniType.Contact) {\n      if (option.urn !== option.name) {\n        return html`<div style=${styleMap(style)}>${option.urn}</div>`;\n      }\n    }\n\n    if (option.type === OmniType.Group) {\n      return html`\n        <div style=${styleMap(style)}>${option.count.toLocaleString()}</div>\n      `;\n    }\n\n    return null;\n  }\n\n  /** Selection in the multi-select select box */\n  public renderSelectedItemDefault(option: OmniOption): TemplateResult {\n    return html`\n      <div\n        style=\"flex:1 1 auto; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;\"\n      >\n        <div style=\"align-self: center; padding: 0px 7px; color: #bbb\">\n          ${this.getIcon(option)}\n        </div>\n        <div\n          class=\"name\"\n          style=\"align-self: center; padding: 0px; font-size: 12px;\"\n        >\n          ${option.name}\n        </div>\n        <div\n          style=\"background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.1); margin-left: 12px; display: flex; align-items: center\"\n        >\n          ${this.getPostName(option)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getIcon(option: OmniOption): TemplateResult {\n    if (option.type === OmniType.Group) {\n      return html`<temba-icon name=\"${Icon.group}\"></temba-icon>`;\n    }\n\n    if (option.type === OmniType.Contact) {\n      return html`<temba-icon name=\"${Icon.contact}\"></temba-icon>`;\n    }\n  }\n}\n"]}

package/out-tsc/src/{select → form/select}/PopupSelect.js

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

package/out-tsc/src/form/select/PopupSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupSelect.js","sourceRoot":"","sources":["../../../../src/form/select/PopupSelect.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAqBE,gBAAW,GAAW,EAAE,CAAC;QAGzB,aAAQ,GAAW,EAAE,CAAC;IAwBxB,CAAC;IAtBS,YAAY;QAClB,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;4BAMa,IAAI,CAAC,WAAW;yBACnB,IAAI,CAAC,QAAQ;;;wBAGd,IAAI,CAAC,YAAY;;;;;KAKpC,CAAC;IACJ,CAAC;;AA9Ca,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;GAiBzB,AAjBmB,CAiBlB;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACF;AAGzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACL","sourcesContent":["import { css, html } from 'lit';\nimport { RapidElement } from '../../RapidElement';\nimport { property } from 'lit/decorators.js';\n\nexport class PopupSelect extends RapidElement {\n  public static styles = css`\n    :host {\n    }\n\n    .dropdown {\n      background: #fff;\n      border-radius: 0.5em;\n      padding: 0.15em;\n      border-radius: var(--curvature);\n    }\n\n    temba-select {\n      width: 250px;\n      display: block;\n      --color-widget-border: transparent;\n      --widget-box-shadow: none;\n    }\n  `;\n\n  @property({ type: String })\n  placeholder: string = '';\n\n  @property({ type: String })\n  endpoint: string = '';\n\n  private handleChange() {\n    this.blur();\n  }\n\n  public render() {\n    return html`\n      <div>\n        <temba-dropdown>\n          <div slot=\"toggle\"><slot name=\"toggle\"></slot></div>\n          <div class=\"dropdown\" slot=\"dropdown\">\n            <temba-select\n              placeholder=${this.placeholder}\n              endpoint=${this.endpoint}\n              clearable\n              searchable\n              @change=${this.handleChange}\n            ></temba-select>\n          </div>\n        </temba-dropdown>\n      </div>\n    `;\n  }\n}\n"]}