@nyaruka/temba-components 0.129.7 → 0.129.8

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

@@ -1 +1 @@
-{"version":3,"file":"BaseListEditor.js","sourceRoot":"","sources":["../../../src/form/BaseListEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport interface ListItem {\n  [key: string]: any;\n}\n\nexport interface ListEditorConfig {\n  // Determines if empty items should be automatically maintained\n  maintainEmptyItem?: boolean;\n  // Function to check if an item is considered empty\n  isEmptyItem?: (item: ListItem) => boolean;\n  // Function to create a new empty item\n  createEmptyItem?: () => ListItem;\n  // Function to clean items before emitting (e.g., filter out empty items)\n  cleanItems?: (items: ListItem[]) => ListItem[];\n  // Minimum number of items to maintain\n  minItems?: number;\n  // Maximum number of items allowed\n  maxItems?: number;\n}\n\nexport abstract class BaseListEditor<\n  T extends ListItem = ListItem\n> extends LitElement {\n  @property({ attribute: false })\n  protected _items: T[] = [];\n\n  @property({ type: Number })\n  minItems = 0;\n\n  @property({ type: Number })\n  maxItems?: number;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = false;\n\n  // Abstract methods that must be implemented by subclasses\n  abstract isEmptyItem(item: T): boolean;\n  abstract createEmptyItem(): T;\n  abstract renderItem(item: T, index: number): TemplateResult;\n\n  // Optional methods that subclasses can override\n  protected getContainerClass(): string {\n    return 'base-list-editor';\n  }\n\n  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>Add Item</button>\n    `;\n  }\n\n  protected shouldShowAddButton(): boolean {\n    return (\n      !this.maintainEmptyItem &&\n      (!this.maxItems || this._items.length < this.maxItems)\n    );\n  }\n\n  render(): TemplateResult {\n    const items = this.displayItems;\n\n    return html`\n      <div class=${this.getContainerClass()}>\n        <div\n          class=\"list-items\"\n          style=\"gap: 8px; display: grid; grid-template-columns: 1fr;\"\n        >\n          ${items.map((item, index) => this.renderItem(item, index))}\n        </div>\n        ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n      </div>\n    `;\n  }\n\n  // Optional method for cleaning items before emission (can return any type)\n  protected cleanItems(items: T[]): any {\n    if (!this.maintainEmptyItem) {\n      return items;\n    }\n    // Filter out empty items for the emitted value\n    return items.filter((item) => !this.isEmptyItem(item));\n  }\n\n  // Get the items to display (may include empty items for UI)\n  protected get displayItems(): T[] {\n    const items = [...this._items];\n\n    if (this.maintainEmptyItem) {\n      const hasEmptyItem = items.some((item) => this.isEmptyItem(item));\n      if (!hasEmptyItem) {\n        items.push(this.createEmptyItem());\n      }\n    }\n\n    return items;\n  }\n\n  // Handle changes to an item\n  protected handleItemChange(index: number, newItem: T) {\n    const updatedItems = [...this._items];\n    updatedItems[index] = newItem;\n    this.updateValue(updatedItems);\n  }\n\n  // Handle field changes within an item (for complex items)\n  protected handleFieldChange(\n    index: number,\n    fieldName: string,\n    fieldValue: any\n  ) {\n    const updatedItems = [...this._items];\n    const currentItem = updatedItems[index] || this.createEmptyItem();\n\n    updatedItems[index] = {\n      ...currentItem,\n      [fieldName]: fieldValue\n    };\n\n    this.updateValue(updatedItems);\n  }\n\n  // Add a new item\n  protected addItem(item?: T) {\n    if (this.maxItems && this._items.length >= this.maxItems) {\n      return;\n    }\n\n    const newItem = item || this.createEmptyItem();\n    const updatedItems = [...this._items, newItem];\n    this.updateValue(updatedItems);\n  }\n\n  // Remove an item\n  protected removeItem(index: number) {\n    if (this._items.length <= this.minItems) {\n      return;\n    }\n\n    const updatedItems = this._items.filter((_, i) => i !== index);\n    this.updateValue(updatedItems);\n  }\n\n  // Check if an item can be removed\n  protected canRemoveItem(index: number): boolean {\n    const item = this.displayItems[index];\n\n    // Can't remove if it would go below minimum\n    if (this._items.length <= this.minItems) {\n      return false;\n    }\n\n    // Can't remove empty items if we're maintaining them\n    if (this.maintainEmptyItem && this.isEmptyItem(item)) {\n      return false;\n    }\n\n    return true;\n  }\n\n  // Update the value and emit change event\n  protected updateValue(newValue: T[]) {\n    this._items = newValue;\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n  }\n\n  // Utility method for subclasses to check if two items are equal\n  protected itemsEqual(item1: T, item2: T): boolean {\n    return JSON.stringify(item1) === JSON.stringify(item2);\n  }\n}\n"]}
+{"version":3,"file":"BaseListEditor.js","sourceRoot":"","sources":["../../../src/form/BaseListEditor.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport interface ListItem {\n  [key: string]: any;\n}\n\nexport interface ListEditorConfig {\n  // Determines if empty items should be automatically maintained\n  maintainEmptyItem?: boolean;\n  // Function to check if an item is considered empty\n  isEmptyItem?: (item: ListItem) => boolean;\n  // Function to create a new empty item\n  createEmptyItem?: () => ListItem;\n  // Function to clean items before emitting (e.g., filter out empty items)\n  cleanItems?: (items: ListItem[]) => ListItem[];\n  // Minimum number of items to maintain\n  minItems?: number;\n  // Maximum number of items allowed\n  maxItems?: number;\n}\n\nexport abstract class BaseListEditor<\n  T extends ListItem = ListItem\n> extends LitElement {\n  @property({ attribute: false })\n  protected _items: T[] = [];\n\n  @property({ type: Number })\n  minItems = 0;\n\n  @property({ type: Number })\n  maxItems?: number;\n\n  @property({ type: Boolean })\n  maintainEmptyItem = false;\n\n  // Abstract methods that must be implemented by subclasses\n  abstract isEmptyItem(item: T): boolean;\n  abstract createEmptyItem(): T;\n  abstract renderItem(item: T, index: number): TemplateResult;\n\n  // Optional methods that subclasses can override\n  protected getContainerClass(): string {\n    return 'base-list-editor';\n  }\n\n  protected renderAddButton(): TemplateResult {\n    return html`\n      <button class=\"add-btn\" @click=${() => this.addItem()}>Add Item</button>\n    `;\n  }\n\n  protected shouldShowAddButton(): boolean {\n    // Never show add button when maintaining empty items (auto-add behavior)\n    if (this.maintainEmptyItem) {\n      return false;\n    }\n\n    return !this.maxItems || this._items.length < this.maxItems;\n  }\n\n  render(): TemplateResult {\n    const items = this.displayItems;\n\n    return html`\n      <div class=${this.getContainerClass()}>\n        <div\n          class=\"list-items\"\n          style=\"display: grid; grid-template-columns: 1fr; gap: 8px;\"\n        >\n          ${items.map((item, index) => this.renderItem(item, index))}\n        </div>\n        ${this.shouldShowAddButton() ? this.renderAddButton() : ''}\n      </div>\n    `;\n  }\n\n  // Optional method for cleaning items before emission (can return any type)\n  protected cleanItems(items: T[]): any {\n    if (!this.maintainEmptyItem) {\n      return items;\n    }\n    // Filter out empty items for the emitted value\n    return items.filter((item) => !this.isEmptyItem(item));\n  }\n\n  // Get the items to display (may include empty items for UI)\n  protected get displayItems(): T[] {\n    const items = [...this._items];\n\n    if (this.maintainEmptyItem) {\n      const hasEmptyItem = items.some((item) => this.isEmptyItem(item));\n      // Only add empty item if we haven't reached maxItems and don't already have an empty item\n      if (!hasEmptyItem && (!this.maxItems || items.length < this.maxItems)) {\n        items.push(this.createEmptyItem());\n      }\n    }\n\n    return items;\n  }\n\n  // Handle changes to an item\n  protected handleItemChange(index: number, newItem: T) {\n    const updatedItems = [...this._items];\n    updatedItems[index] = newItem;\n    this.updateValue(updatedItems);\n  }\n\n  // Handle field changes within an item (for complex items)\n  protected handleFieldChange(\n    index: number,\n    fieldName: string,\n    fieldValue: any\n  ) {\n    const updatedItems = [...this._items];\n\n    // If editing beyond the current array (auto-generated empty row), check maxItems\n    if (index >= this._items.length) {\n      if (this.maxItems && this._items.length >= this.maxItems) {\n        // Don't allow adding new items if we've reached maxItems\n        return;\n      }\n      // Extend the array to include the new item\n      while (updatedItems.length <= index) {\n        updatedItems.push(this.createEmptyItem());\n      }\n    }\n\n    const currentItem = updatedItems[index] || this.createEmptyItem();\n\n    updatedItems[index] = {\n      ...currentItem,\n      [fieldName]: fieldValue\n    };\n\n    this.updateValue(updatedItems);\n  }\n\n  // Add a new item\n  protected addItem(item?: T) {\n    if (this.maxItems && this._items.length >= this.maxItems) {\n      return;\n    }\n\n    const newItem = item || this.createEmptyItem();\n    const updatedItems = [...this._items, newItem];\n    this.updateValue(updatedItems);\n  }\n\n  // Remove an item\n  protected removeItem(index: number) {\n    if (this._items.length <= this.minItems) {\n      return;\n    }\n\n    const updatedItems = this._items.filter((_, i) => i !== index);\n    this.updateValue(updatedItems);\n  }\n\n  // Check if an item can be removed\n  protected canRemoveItem(index: number): boolean {\n    const item = this.displayItems[index];\n\n    // Can't remove if it would go below minimum\n    if (this._items.length <= this.minItems) {\n      return false;\n    }\n\n    // Can't remove empty items if we're maintaining them\n    if (this.maintainEmptyItem && this.isEmptyItem(item)) {\n      return false;\n    }\n\n    return true;\n  }\n\n  // Update the value and emit change event\n  protected updateValue(newValue: T[]) {\n    this._items = newValue;\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.cleanItems(newValue) },\n        bubbles: true\n      })\n    );\n  }\n\n  // Utility method for subclasses to check if two items are equal\n  protected itemsEqual(item1: T, item2: T): boolean {\n    return JSON.stringify(item1) === JSON.stringify(item2);\n  }\n}\n"]}

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

@@ -33,7 +33,7 @@ export class FormField extends LitElement {
         font-size: var(--label-size);
         letter-spacing: 0.05em;
         line-height: normal;
-        color: #777;
+        color: var(--color-label, #777);
       }
 
       .help-text {

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/form/FormField.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QAkJE,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;IA2DnB,CAAC;IApOC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4IT,CAAC;IACJ,CAAC;IA6BD,OAAO,CAAC,iBAAyD;QAC/D,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IACE,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC;YAC/B,iBAAiB,CAAC,GAAG,CAAC,YAAY,CAAC,EACnC,CAAC;YACD,MAAM,SAAS,GACb,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAC5D,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAEM,MAAM;QACX,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAC5E,MAAM,MAAM,GAAG,SAAS;YACtB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,EAAE;gBAChC,OAAO,IAAI,CAAA;uCACkB,cAAc,CAAC,KAAK,CAAC;WACjD,CAAC;YACJ,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAA;sBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC3C,MAAM;OACT,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS;YACzD,CAAC,CAAC,WAAW;YACb,CAAC,CAAC,EAAE;;UAEJ,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;;;YAGJ,MAAM;;UAER,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;;KAEX,CAAC;IACJ,CAAC;CACF;AAnFC;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';\nimport { renderMarkdown } from '../markdown';\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        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 1000;\n        background: white;\n        border: 1px solid var(--color-error);\n        color: var(--color-error);\n        padding: 8px 12px;\n        margin: 2px 0 0 0;\n        border-radius: var(--curvature);\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n          0 2px 4px -1px rgba(0, 0, 0, 0.06);\n        font-size: 0.85em;\n        line-height: 1.2;\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(-12px);\n        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,\n          transform 0.2s ease-in-out;\n      }\n\n      .field:hover .alert-error {\n        opacity: 1;\n        visibility: visible;\n        transform: translateY(2px);\n      }\n\n      /* Hide error popup when widget is focused */\n      .field:focus-within .alert-error {\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(-4px);\n      }\n\n      .field.has-error {\n        position: relative;\n        /* Set CSS custom properties that form components can use */\n        --color-widget-border: var(--color-error);\n        --widget-box-shadow-focused: var(\n          --widget-box-shadow-focused-error,\n          0 0 0 3px rgba(255, 99, 71, 0.3)\n        );\n        --color-focus: var(--color-error);\n      }\n\n      .field.has-error .widget {\n        border-radius: var(--curvature-widget);\n        position: relative;\n      }\n\n      /* Force error styling with higher specificity */\n      :host(.has-error) .field.has-error .widget .input-container,\n      :host(.has-error) .field.has-error .widget .select-container,\n      :host(.has-error) .field.has-error .widget .comp-container,\n      :host(.has-error) .field.has-error .widget .checkbox-container,\n      :host(.has-error) .field.has-error .widget .container,\n      :host(.has-error) .field.has-error .widget .range-container,\n      .field.has-error .widget .input-container,\n      .field.has-error .widget .select-container,\n      .field.has-error .widget .comp-container,\n      .field.has-error .widget .checkbox-container,\n      .field.has-error .widget .container,\n      .field.has-error .widget .range-container {\n        border-color: var(--color-error) !important;\n      }\n\n      /* When error field is focused, use error-colored focus ring */\n      :host(.has-error) .field.has-error .widget .input-container:focus-within,\n      :host(.has-error) .field.has-error .widget .select-container:focus-within,\n      :host(.has-error) .field.has-error .widget .select-container.focused,\n      :host(.has-error) .field.has-error .widget .comp-container:focus-within,\n      :host(.has-error)\n        .field.has-error\n        .widget\n        .checkbox-container:focus-within,\n      :host(.has-error) .field.has-error .widget .container:focus-within,\n      :host(.has-error) .field.has-error .widget .range-container:focus-within,\n      .field.has-error .widget .input-container:focus-within,\n      .field.has-error .widget .select-container:focus-within,\n      .field.has-error .widget .select-container.focused,\n      .field.has-error .widget .comp-container:focus-within,\n      .field.has-error .widget .checkbox-container:focus-within,\n      .field.has-error .widget .container:focus-within,\n      .field.has-error .widget .range-container:focus-within {\n        border-color: var(--color-error) !important;\n        box-shadow: var(\n          --widget-box-shadow-focused-error,\n          0 0 0 3px rgba(255, 99, 71, 0.3)\n        ) !important;\n      }\n\n      .alert-error p {\n        margin: 0;\n        padding: 0;\n      }\n\n      .disabled {\n        opacity: var(--disabled-opacity) !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  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('errors') ||\n      changedProperties.has('hideErrors')\n    ) {\n      const hasErrors =\n        !this.hideErrors && this.errors && this.errors.length > 0;\n      this.classList.toggle('has-error', hasErrors);\n    }\n  }\n\n  public render(): TemplateResult {\n    const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;\n    const errors = hasErrors\n      ? this.errors.map((error: string) => {\n          return html`\n            <div class=\"alert-error\">${renderMarkdown(error)}</div>\n          `;\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\n        class=\"field ${this.disabled ? 'disabled' : ''} ${hasErrors\n          ? 'has-error'\n          : ''}\"\n      >\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          ${errors}\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      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/form/FormField.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { renderMarkdown } from '../markdown';\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: var(--color-label, #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        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        z-index: 1000;\n        background: white;\n        border: 1px solid var(--color-error);\n        color: var(--color-error);\n        padding: 8px 12px;\n        margin: 2px 0 0 0;\n        border-radius: var(--curvature);\n        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\n          0 2px 4px -1px rgba(0, 0, 0, 0.06);\n        font-size: 0.85em;\n        line-height: 1.2;\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(-12px);\n        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out,\n          transform 0.2s ease-in-out;\n      }\n\n      .field:hover .alert-error {\n        opacity: 1;\n        visibility: visible;\n        transform: translateY(2px);\n      }\n\n      /* Hide error popup when widget is focused */\n      .field:focus-within .alert-error {\n        opacity: 0;\n        visibility: hidden;\n        transform: translateY(-4px);\n      }\n\n      .field.has-error {\n        position: relative;\n        /* Set CSS custom properties that form components can use */\n        --color-widget-border: var(--color-error);\n        --widget-box-shadow-focused: var(\n          --widget-box-shadow-focused-error,\n          0 0 0 3px rgba(255, 99, 71, 0.3)\n        );\n        --color-focus: var(--color-error);\n      }\n\n      .field.has-error .widget {\n        border-radius: var(--curvature-widget);\n        position: relative;\n      }\n\n      /* Force error styling with higher specificity */\n      :host(.has-error) .field.has-error .widget .input-container,\n      :host(.has-error) .field.has-error .widget .select-container,\n      :host(.has-error) .field.has-error .widget .comp-container,\n      :host(.has-error) .field.has-error .widget .checkbox-container,\n      :host(.has-error) .field.has-error .widget .container,\n      :host(.has-error) .field.has-error .widget .range-container,\n      .field.has-error .widget .input-container,\n      .field.has-error .widget .select-container,\n      .field.has-error .widget .comp-container,\n      .field.has-error .widget .checkbox-container,\n      .field.has-error .widget .container,\n      .field.has-error .widget .range-container {\n        border-color: var(--color-error) !important;\n      }\n\n      /* When error field is focused, use error-colored focus ring */\n      :host(.has-error) .field.has-error .widget .input-container:focus-within,\n      :host(.has-error) .field.has-error .widget .select-container:focus-within,\n      :host(.has-error) .field.has-error .widget .select-container.focused,\n      :host(.has-error) .field.has-error .widget .comp-container:focus-within,\n      :host(.has-error)\n        .field.has-error\n        .widget\n        .checkbox-container:focus-within,\n      :host(.has-error) .field.has-error .widget .container:focus-within,\n      :host(.has-error) .field.has-error .widget .range-container:focus-within,\n      .field.has-error .widget .input-container:focus-within,\n      .field.has-error .widget .select-container:focus-within,\n      .field.has-error .widget .select-container.focused,\n      .field.has-error .widget .comp-container:focus-within,\n      .field.has-error .widget .checkbox-container:focus-within,\n      .field.has-error .widget .container:focus-within,\n      .field.has-error .widget .range-container:focus-within {\n        border-color: var(--color-error) !important;\n        box-shadow: var(\n          --widget-box-shadow-focused-error,\n          0 0 0 3px rgba(255, 99, 71, 0.3)\n        ) !important;\n      }\n\n      .alert-error p {\n        margin: 0;\n        padding: 0;\n      }\n\n      .disabled {\n        opacity: var(--disabled-opacity) !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  updated(changedProperties: Map<string | number | symbol, unknown>): void {\n    super.updated(changedProperties);\n\n    if (\n      changedProperties.has('errors') ||\n      changedProperties.has('hideErrors')\n    ) {\n      const hasErrors =\n        !this.hideErrors && this.errors && this.errors.length > 0;\n      this.classList.toggle('has-error', hasErrors);\n    }\n  }\n\n  public render(): TemplateResult {\n    const hasErrors = !this.hideErrors && this.errors && this.errors.length > 0;\n    const errors = hasErrors\n      ? this.errors.map((error: string) => {\n          return html`\n            <div class=\"alert-error\">${renderMarkdown(error)}</div>\n          `;\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\n        class=\"field ${this.disabled ? 'disabled' : ''} ${hasErrors\n          ? 'has-error'\n          : ''}\"\n      >\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          ${errors}\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      </div>\n    `;\n  }\n}\n"]}

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

@@ -169,8 +169,8 @@ KeyValueEditor.styles = css `
     .row {
       display: grid;
       grid-template-columns: 1fr 1fr auto;
-      gap: 8px;
       align-items: center;
+      column-gap: 6px;
     }
 
     .remove-btn {

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

@@ -1 +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"]}
+{"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      align-items: center;\n      column-gap: 6px;\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/form/MediaPicker.js

@@ -16,6 +16,7 @@ export class MediaPicker extends RapidElement {
     constructor() {
         super(...arguments);
         this.endpoint = DEFAULT_MEDIA_ENDPOINT;
+        this.ignoreDrops = false;
         this.icon = Icon.add;
         this.accept = ''; //e.g. ".xls,.xlsx"
         this.max = 3;
@@ -29,7 +30,6 @@ export class MediaPicker extends RapidElement {
       }
 
       .highlight .drop-mask {
-        background: rgba(210, 243, 184, 0.8);
       }
 
       .drop-mask > div {
@@ -150,6 +150,9 @@ export class MediaPicker extends RapidElement {
         this.unhighlight(evt);
     }
     handleDrop(evt) {
+        if (this.ignoreDrops) {
+            return;
+        }
         this.unhighlight(evt);
         if (this.canAcceptAttachments()) {
             this.uploadFiles(this.getAcceptableFiles(evt));
@@ -159,6 +162,9 @@ export class MediaPicker extends RapidElement {
         return this.attachments.length < this.max;
     }
     highlight(evt) {
+        if (this.ignoreDrops) {
+            return;
+        }
         evt.preventDefault();
         evt.stopPropagation();
         if (this.canAcceptAttachments()) {
@@ -166,6 +172,9 @@ export class MediaPicker extends RapidElement {
         }
     }
     unhighlight(evt) {
+        if (this.ignoreDrops) {
+            return;
+        }
         evt.preventDefault();
         evt.stopPropagation();
         this.pendingDrop = false;
@@ -297,6 +306,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], MediaPicker.prototype, "pendingDrop", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediaPicker.prototype, "ignoreDrops", void 0);
 __decorate([
     property({ type: String })
 ], MediaPicker.prototype, "icon", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/form/MediaPicker.ts"],"names":[],"mappings":"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","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"]}
+{"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;;QAoGE,aAAQ,GAAG,sBAAsB,CAAC;QAMlC,gBAAW,GAAG,KAAK,CAAC;QAGpB,SAAI,GAAG,IAAI,CAAC,GAAG,CAAC;QAGhB,WAAM,GAAG,EAAE,CAAC,CAAC,mBAAmB;QAGhC,QAAG,GAAG,CAAC,CAAC;QAGR,gBAAW,GAAiB,EAAE,CAAC;IAqNjC,CAAC;IA1UC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8FT,CAAC;IACJ,CAAC;IA0BM,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,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,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,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,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,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,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;AAvOC;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,OAAO,EAAE,CAAC;gDACR;AAGpB;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      }\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: Boolean })\n  ignoreDrops = false;\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    if (this.ignoreDrops) {\n      return;\n    }\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    if (this.ignoreDrops) {\n      return;\n    }\n\n    evt.preventDefault();\n    evt.stopPropagation();\n    if (this.canAcceptAttachments()) {\n      this.pendingDrop = true;\n    }\n  }\n\n  private unhighlight(evt: DragEvent): void {\n    if (this.ignoreDrops) {\n      return;\n    }\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"]}