@nyaruka/temba-components 0.131.1 → 0.131.3

package/out-tsc/src/Icons.js

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-duplicate-enum-values */
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = '6ba60d8c1832b26e5dab7ba5c4cb6b74';
+export const SVG_FINGERPRINT = '85bc933ed21ae1cc8595b761dda8d26d';
 // only icons below are included in the sprite sheet
 export var Icon;
 (function (Icon) {
     Icon["ai"] = "beaker-02";
     Icon["alert_warning"] = "alert-square";
     Icon["account"] = "user-01";
+    Icon["action"] = "lightning-02";
     Icon["active"] = "play";
     Icon["add"] = "plus";
     Icon["add_note"] = "file-02";
@@ -108,6 +109,7 @@ export var Icon;
     Icon["missed_call"] = "phone-x";
     Icon["new"] = "plus";
     Icon["next_schedule"] = "alarm-clock";
+    Icon["note"] = "edit-03";
     Icon["notes"] = "edit-03";
     Icon["notification"] = "bell-01";
     Icon["number"] = "hash-01";
@@ -147,6 +149,7 @@ export var Icon;
     Icon["shortcut"] = "zap-fast";
     Icon["show"] = "eye";
     Icon["simulator"] = "phone-02";
+    Icon["split"] = "flow";
     Icon["sort"] = "chevron-selector-vertical";
     Icon["sort_down"] = "sort-arrow-down";
     Icon["sort_up"] = "sort-arrow-up";

package/out-tsc/src/Icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../src/Icons.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-duplicate-enum-values */\n// for cache busting we dynamically generate a fingerprint, use yarn svg to update\nexport const SVG_FINGERPRINT = '6ba60d8c1832b26e5dab7ba5c4cb6b74';\n\n// only icons below are included in the sprite sheet\nexport enum Icon {\n  ai = 'beaker-02',\n  alert_warning = 'alert-square',\n  account = 'user-01',\n  active = 'play',\n  add = 'plus',\n  add_note = 'file-02',\n  airtime = 'bank-note-01',\n  analytics = 'bar-chart-01',\n  archive = 'archive',\n  arrow_up = 'chevron-up',\n  arrow_down = 'chevron-down',\n  arrow_left = 'chevron-left',\n  arrow_right = 'chevron-right',\n  attachment = 'paperclip',\n  attachment_audio = 'volume-min',\n  attachment_document = 'file-06',\n  attachment_image = 'image-01',\n  attachment_location = 'marker-pin-01',\n  attachment_video = 'video-recorder',\n  branding = 'brush-02',\n  branding_hostname = 'server-05',\n  branding_notifications = 'mail-01',\n  branding_styling = 'palette',\n  branding_raw = 'pencil-01',\n  broadcast = 'announcement-01',\n  call = 'phone-call-01',\n  call_missed = 'phone-call-02',\n  campaign = 'clock-refresh',\n  campaign_active = 'play',\n  campaign_archived = 'archive',\n  campaigns = 'clock-refresh',\n  channel = 'zap',\n  children = 'git-branch-01',\n  check = 'check',\n  checkbox = 'square',\n  checkbox_checked = 'check-square',\n  checkbox_partial = 'stop-square',\n  close = 'x',\n  compose = 'send-01',\n  contact = 'user-01',\n  contact_archived = 'archive',\n  contact_blocked = 'message-x-square',\n  contact_export = 'download-cloud-01',\n  contact_import = 'upload-cloud-01',\n  contact_stopped = 'slash-octagon',\n  contact_updated = 'user-edit',\n  contacts = 'user-01',\n  copy = 'copy-04',\n  dashboard = 'pie-chart-01',\n  definitions_export = 'download-cloud-01',\n  delete = 'trash-03',\n  delete_small = 'x',\n  down = 'chevron-down',\n  download = 'download-01',\n  drag = 'dots-grid',\n  edit = 'edit-02',\n  email = 'mail-01',\n  error = 'alert-circle',\n  event = 'zap',\n  export = 'download-cloud-01',\n  expressions = 'at-sign',\n  fields = 'user-edit',\n  filter = 'filter-funnel-01',\n  flow = 'flow',\n  flow_background = 'layers-two-01',\n  flow_interrupted = 'x-close',\n  flow_ivr = 'phone',\n  flow_message = 'message-square-02',\n  flow_surveyor = 'tablet-01',\n  flow_user = 'hard-drive',\n  flows = 'flow',\n  global = 'at-sign',\n  grid = 'dots-grid',\n  group = 'users-01',\n  group_exclude = 'users-x',\n  group_include = 'users-check',\n  group_smart = 'atom-01',\n  help = 'help-circle',\n  hide = 'eye-off',\n  home = 'settings-02',\n  image = 'image-01',\n  import = 'upload-cloud-01',\n  inbox = 'inbox-01',\n  incidents = 'alert-square',\n  incoming_call = 'phone-incoming-01',\n  info = 'user-square',\n  integrations = 'layers-three-01',\n  invitations = 'user-plus-01',\n  issue = 'alert-square',\n  label = 'tag-01',\n  language = 'translate-01',\n  link = 'link-external-01',\n  location = 'marker-pin-01',\n  log = 'file-02',\n  logout = 'log-out-04',\n  menu = 'menu-01',\n  menu_collapse = 'chevron-left-double',\n  message = 'message-square-02',\n  message_export = 'download-cloud-01',\n  messages = 'message-square-02',\n  missing = 'maximize-02',\n  missed_call = 'phone-x',\n  new = 'plus',\n  next_schedule = 'alarm-clock',\n  notes = 'edit-03',\n  notification = 'bell-01',\n  number = 'hash-01',\n  optin_requested = 'message-notification-circle',\n  optin = 'message-check-circle',\n  optout = 'message-x-circle',\n  org_active = 'credit-card-02',\n  org_anonymous = 'glasses-01',\n  org_bulk = 'credit-card-plus',\n  org_flagged = 'flag-01',\n  org_new = 'stars-02',\n  org_suspended = 'slash-circle-01',\n  org_verified = 'check-verified-02',\n  overview = 'pie-chart-01',\n  prometheus = 'prometheus',\n  progress_spinner = 'refresh-cw-04',\n  featured = 'star-01',\n  quick_replies = 'dotpoints-01',\n  recording = 'microphone-01',\n  resend = 'refresh-cw-05',\n  reset = 'flip-backward',\n  resthooks = 'share-07',\n  restore = 'play',\n  results_export = 'download-cloud-01',\n  retry = 'refresh-cw-05',\n  revisions = 'clock-rewind',\n  rocketchat = 'rocketchat',\n  runs = 'rows-03',\n  schedule = 'calendar',\n  search = 'search-refraction',\n  select_open = 'chevron-down',\n  select_clear = 'x',\n  send = 'send-03',\n  service = 'magic-wand-01',\n  service_end = 'log-out-04',\n  settings = 'settings-02',\n  shortcut = 'zap-fast',\n  show = 'eye',\n  simulator = 'phone-02',\n  sort = 'chevron-selector-vertical',\n  sort_down = 'sort-arrow-down',\n  sort_up = 'sort-arrow-up',\n  staff = 'hard-drive',\n  submit = 'check',\n  success = 'check',\n  template_approved = 'check-circle',\n  template_pending = 'hourglass-01',\n  template_rejected = 'alert-circle',\n  tickets = 'agent',\n  tickets_all = 'archive',\n  tickets_closed = 'check',\n  tickets_mine = 'coffee',\n  tickets_mine_done = 'coffee-empty',\n  tickets_open = 'inbox-01',\n  tickets_export = 'download-cloud-01',\n  tickets_unassigned = 'inbox-01',\n  topic = 'message-text-circle-02',\n  two_factor_enabled = 'shield-02',\n  two_factor_disabled = 'shield-01',\n  trigger = 'signal-01',\n  trigger_active = 'play',\n  trigger_archived = 'archive',\n  trigger_new = 'plus',\n  trigger_keyword = 'message-check-square',\n  trigger_catch_all = 'message-question-square',\n  trigger_inbound_call = 'phone-incoming-01',\n  trigger_missed_call = 'phone-hang-up',\n  trigger_schedule = 'calendar',\n  trigger_new_conversation = 'message-chat-square',\n  trigger_referral = 'user-right-01',\n  trigger_closed_ticket = 'agent',\n  trigger_opt_in = 'message-check-circle',\n  trigger_opt_out = 'message-x-circle',\n  triggers = 'signal-01',\n  updated = 'edit-02',\n  up = 'chevron-up',\n  upload = 'upload-cloud-01',\n  upload_image = 'camera-01',\n  usages = 'link-04',\n  user = 'users-01',\n  user_beta = 'shield-zap',\n  user_token = 'key-01',\n  users = 'users-01',\n  video = 'video-recorder',\n  webhook = 'link-external-01',\n  workspace = 'folder',\n\n  // channel types\n  channel_a = 'channel-android',\n  channel_ac = 'zap', // TODO https://www.arabiacell.com/\n  channel_at = 'zap', // TODO https://africastalking.com/\n  channel_bs = 'zap', // TODO https://burstsms.com/\n  channel_bw = 'zap', // TODO https://www.bandwidth.com/\n  channel_cs = 'zap', // TODO https://www.clicksend.com/\n  channel_ct = 'channel-clickatell',\n  channel_d3 = 'channel-whatsapp',\n  channel_d3c = 'channel-whatsapp',\n  channel_da = 'zap', // TODO https://dartmedia.co.id/\n  channel_ds = 'channel-discord',\n  channel_ex = 'zap',\n  channel_fb = 'channel-facebook',\n  channel_fba = 'channel-facebook',\n  channel_fc = 'channel-freshchat',\n  channel_fcm = 'channel-firebase',\n  channel_hm = 'zap', // TODO https://hormuud.com/\n  channel_ib = 'zap', // TODO https://www.infobip.com/\n  channel_ig = 'channel-instagram',\n  channel_jc = 'channel-jiochat',\n  channel_kn = 'channel-kannel',\n  channel_kwa = 'channel-whatsapp',\n  channel_ln = 'channel-line',\n  channel_mt = 'channel-mtarget',\n  channel_mtn = 'zap', // TODO https://mtn.com/\n  channel_nx = 'channel-vonage',\n  channel_pl = 'channel-plivo',\n  channel_rc = 'channel-rocketchat',\n  channel_sl = 'channel-slack',\n  channel_sq = 'zap', // TODO https://shaqodoon.org/\n  channel_st = 'zap', // TODO https://bulk.startmobile.ua\n  channel_sw = 'channel-signalwire',\n  channel_t = 'channel-twilio',\n  channel_tg = 'channel-telegram',\n  channel_tms = 'channel-twilio',\n  channel_tq = 'channel-thinq',\n  channel_tw = 'zap', // TODO https://www.somleng.org/\n  channel_twa = 'channel-whatsapp',\n  channel_twc = 'zap', // TODO\n  channel_twt = 'channel-twitter',\n  channel_vk = 'channel-vk',\n  channel_vp = 'channel-viber',\n  channel_wa = 'channel-whatsapp',\n  channel_wac = 'channel-whatsapp',\n  channel_wc = 'channel-wechat',\n  channel_yo = 'zap', // TODO https://www.yo.co.ug/\n  channel_zvw = 'channel-whatsapp',\n\n  // ai\n  ai_openai = 'openai',\n  ai_anthropic = 'anthropic',\n  ai_google = 'gemini',\n  ai_microsoft = 'azure',\n  ai_deepseek = 'deepseek',\n\n  // classifiers\n  classifier_wit = 'classifier-wit',\n\n  // other brands\n  dtone = 'dtone',\n  zapier = 'zapier',\n\n  // demo\n  default = 'list',\n  datepicker = 'calendar',\n  slider = 'sliders-02',\n  select = 'browser',\n  input = 'edit-05'\n}\n"]}
+{"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../src/Icons.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-duplicate-enum-values */\n// for cache busting we dynamically generate a fingerprint, use yarn svg to update\nexport const SVG_FINGERPRINT = '85bc933ed21ae1cc8595b761dda8d26d';\n\n// only icons below are included in the sprite sheet\nexport enum Icon {\n  ai = 'beaker-02',\n  alert_warning = 'alert-square',\n  account = 'user-01',\n  action = 'lightning-02',\n  active = 'play',\n  add = 'plus',\n  add_note = 'file-02',\n  airtime = 'bank-note-01',\n  analytics = 'bar-chart-01',\n  archive = 'archive',\n  arrow_up = 'chevron-up',\n  arrow_down = 'chevron-down',\n  arrow_left = 'chevron-left',\n  arrow_right = 'chevron-right',\n  attachment = 'paperclip',\n  attachment_audio = 'volume-min',\n  attachment_document = 'file-06',\n  attachment_image = 'image-01',\n  attachment_location = 'marker-pin-01',\n  attachment_video = 'video-recorder',\n  branding = 'brush-02',\n  branding_hostname = 'server-05',\n  branding_notifications = 'mail-01',\n  branding_styling = 'palette',\n  branding_raw = 'pencil-01',\n  broadcast = 'announcement-01',\n  call = 'phone-call-01',\n  call_missed = 'phone-call-02',\n  campaign = 'clock-refresh',\n  campaign_active = 'play',\n  campaign_archived = 'archive',\n  campaigns = 'clock-refresh',\n  channel = 'zap',\n  children = 'git-branch-01',\n  check = 'check',\n  checkbox = 'square',\n  checkbox_checked = 'check-square',\n  checkbox_partial = 'stop-square',\n  close = 'x',\n  compose = 'send-01',\n  contact = 'user-01',\n  contact_archived = 'archive',\n  contact_blocked = 'message-x-square',\n  contact_export = 'download-cloud-01',\n  contact_import = 'upload-cloud-01',\n  contact_stopped = 'slash-octagon',\n  contact_updated = 'user-edit',\n  contacts = 'user-01',\n  copy = 'copy-04',\n  dashboard = 'pie-chart-01',\n  definitions_export = 'download-cloud-01',\n  delete = 'trash-03',\n  delete_small = 'x',\n  down = 'chevron-down',\n  download = 'download-01',\n  drag = 'dots-grid',\n  edit = 'edit-02',\n  email = 'mail-01',\n  error = 'alert-circle',\n  event = 'zap',\n  export = 'download-cloud-01',\n  expressions = 'at-sign',\n  fields = 'user-edit',\n  filter = 'filter-funnel-01',\n  flow = 'flow',\n  flow_background = 'layers-two-01',\n  flow_interrupted = 'x-close',\n  flow_ivr = 'phone',\n  flow_message = 'message-square-02',\n  flow_surveyor = 'tablet-01',\n  flow_user = 'hard-drive',\n  flows = 'flow',\n  global = 'at-sign',\n  grid = 'dots-grid',\n  group = 'users-01',\n  group_exclude = 'users-x',\n  group_include = 'users-check',\n  group_smart = 'atom-01',\n  help = 'help-circle',\n  hide = 'eye-off',\n  home = 'settings-02',\n  image = 'image-01',\n  import = 'upload-cloud-01',\n  inbox = 'inbox-01',\n  incidents = 'alert-square',\n  incoming_call = 'phone-incoming-01',\n  info = 'user-square',\n  integrations = 'layers-three-01',\n  invitations = 'user-plus-01',\n  issue = 'alert-square',\n  label = 'tag-01',\n  language = 'translate-01',\n  link = 'link-external-01',\n  location = 'marker-pin-01',\n  log = 'file-02',\n  logout = 'log-out-04',\n  menu = 'menu-01',\n  menu_collapse = 'chevron-left-double',\n  message = 'message-square-02',\n  message_export = 'download-cloud-01',\n  messages = 'message-square-02',\n  missing = 'maximize-02',\n  missed_call = 'phone-x',\n  new = 'plus',\n  next_schedule = 'alarm-clock',\n  note = 'edit-03',\n  notes = 'edit-03',\n  notification = 'bell-01',\n  number = 'hash-01',\n  optin_requested = 'message-notification-circle',\n  optin = 'message-check-circle',\n  optout = 'message-x-circle',\n  org_active = 'credit-card-02',\n  org_anonymous = 'glasses-01',\n  org_bulk = 'credit-card-plus',\n  org_flagged = 'flag-01',\n  org_new = 'stars-02',\n  org_suspended = 'slash-circle-01',\n  org_verified = 'check-verified-02',\n  overview = 'pie-chart-01',\n  prometheus = 'prometheus',\n  progress_spinner = 'refresh-cw-04',\n  featured = 'star-01',\n  quick_replies = 'dotpoints-01',\n  recording = 'microphone-01',\n  resend = 'refresh-cw-05',\n  reset = 'flip-backward',\n  resthooks = 'share-07',\n  restore = 'play',\n  results_export = 'download-cloud-01',\n  retry = 'refresh-cw-05',\n  revisions = 'clock-rewind',\n  rocketchat = 'rocketchat',\n  runs = 'rows-03',\n  schedule = 'calendar',\n  search = 'search-refraction',\n  select_open = 'chevron-down',\n  select_clear = 'x',\n  send = 'send-03',\n  service = 'magic-wand-01',\n  service_end = 'log-out-04',\n  settings = 'settings-02',\n  shortcut = 'zap-fast',\n  show = 'eye',\n  simulator = 'phone-02',\n  split = 'flow',\n  sort = 'chevron-selector-vertical',\n  sort_down = 'sort-arrow-down',\n  sort_up = 'sort-arrow-up',\n  staff = 'hard-drive',\n  submit = 'check',\n  success = 'check',\n  template_approved = 'check-circle',\n  template_pending = 'hourglass-01',\n  template_rejected = 'alert-circle',\n  tickets = 'agent',\n  tickets_all = 'archive',\n  tickets_closed = 'check',\n  tickets_mine = 'coffee',\n  tickets_mine_done = 'coffee-empty',\n  tickets_open = 'inbox-01',\n  tickets_export = 'download-cloud-01',\n  tickets_unassigned = 'inbox-01',\n  topic = 'message-text-circle-02',\n  two_factor_enabled = 'shield-02',\n  two_factor_disabled = 'shield-01',\n  trigger = 'signal-01',\n  trigger_active = 'play',\n  trigger_archived = 'archive',\n  trigger_new = 'plus',\n  trigger_keyword = 'message-check-square',\n  trigger_catch_all = 'message-question-square',\n  trigger_inbound_call = 'phone-incoming-01',\n  trigger_missed_call = 'phone-hang-up',\n  trigger_schedule = 'calendar',\n  trigger_new_conversation = 'message-chat-square',\n  trigger_referral = 'user-right-01',\n  trigger_closed_ticket = 'agent',\n  trigger_opt_in = 'message-check-circle',\n  trigger_opt_out = 'message-x-circle',\n  triggers = 'signal-01',\n  updated = 'edit-02',\n  up = 'chevron-up',\n  upload = 'upload-cloud-01',\n  upload_image = 'camera-01',\n  usages = 'link-04',\n  user = 'users-01',\n  user_beta = 'shield-zap',\n  user_token = 'key-01',\n  users = 'users-01',\n  video = 'video-recorder',\n  webhook = 'link-external-01',\n  workspace = 'folder',\n\n  // channel types\n  channel_a = 'channel-android',\n  channel_ac = 'zap', // TODO https://www.arabiacell.com/\n  channel_at = 'zap', // TODO https://africastalking.com/\n  channel_bs = 'zap', // TODO https://burstsms.com/\n  channel_bw = 'zap', // TODO https://www.bandwidth.com/\n  channel_cs = 'zap', // TODO https://www.clicksend.com/\n  channel_ct = 'channel-clickatell',\n  channel_d3 = 'channel-whatsapp',\n  channel_d3c = 'channel-whatsapp',\n  channel_da = 'zap', // TODO https://dartmedia.co.id/\n  channel_ds = 'channel-discord',\n  channel_ex = 'zap',\n  channel_fb = 'channel-facebook',\n  channel_fba = 'channel-facebook',\n  channel_fc = 'channel-freshchat',\n  channel_fcm = 'channel-firebase',\n  channel_hm = 'zap', // TODO https://hormuud.com/\n  channel_ib = 'zap', // TODO https://www.infobip.com/\n  channel_ig = 'channel-instagram',\n  channel_jc = 'channel-jiochat',\n  channel_kn = 'channel-kannel',\n  channel_kwa = 'channel-whatsapp',\n  channel_ln = 'channel-line',\n  channel_mt = 'channel-mtarget',\n  channel_mtn = 'zap', // TODO https://mtn.com/\n  channel_nx = 'channel-vonage',\n  channel_pl = 'channel-plivo',\n  channel_rc = 'channel-rocketchat',\n  channel_sl = 'channel-slack',\n  channel_sq = 'zap', // TODO https://shaqodoon.org/\n  channel_st = 'zap', // TODO https://bulk.startmobile.ua\n  channel_sw = 'channel-signalwire',\n  channel_t = 'channel-twilio',\n  channel_tg = 'channel-telegram',\n  channel_tms = 'channel-twilio',\n  channel_tq = 'channel-thinq',\n  channel_tw = 'zap', // TODO https://www.somleng.org/\n  channel_twa = 'channel-whatsapp',\n  channel_twc = 'zap', // TODO\n  channel_twt = 'channel-twitter',\n  channel_vk = 'channel-vk',\n  channel_vp = 'channel-viber',\n  channel_wa = 'channel-whatsapp',\n  channel_wac = 'channel-whatsapp',\n  channel_wc = 'channel-wechat',\n  channel_yo = 'zap', // TODO https://www.yo.co.ug/\n  channel_zvw = 'channel-whatsapp',\n\n  // ai\n  ai_openai = 'openai',\n  ai_anthropic = 'anthropic',\n  ai_google = 'gemini',\n  ai_microsoft = 'azure',\n  ai_deepseek = 'deepseek',\n\n  // classifiers\n  classifier_wit = 'classifier-wit',\n\n  // other brands\n  dtone = 'dtone',\n  zapier = 'zapier',\n\n  // demo\n  default = 'list',\n  datepicker = 'calendar',\n  slider = 'sliders-02',\n  select = 'browser',\n  input = 'edit-05'\n}\n"]}

package/out-tsc/src/display/FloatingTab.js

@@ -0,0 +1,167 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+import { getClasses } from '../utils';
+export class FloatingTab extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.color = '#6B7280';
+        this.top = -1; // -1 means auto-calculate position
+        this.hidden = false;
+    }
+    static get styles() {
+        return css `
+      .tab.hidden {
+        transform: translateX(100%);
+      }
+      .tab {
+        position: fixed;
+        right: 0;
+        z-index: 9998;
+        transition: transform var(--transition-duration, 300ms) ease-in-out;
+        display: flex;
+        align-items: center;
+        padding: 12px;
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+        cursor: pointer;
+        box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);
+        transition: all calc(var(--transition-duration, 300ms) * 0.7)
+          ease-in-out;
+        user-select: none;
+      }
+
+      .tab:hover {
+        padding-right: 16px;
+        box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3);
+      }
+
+      .icon-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+      }
+
+      temba-icon {
+        --icon-color: white;
+      }
+
+      .label {
+        color: white;
+        font-weight: 500;
+        font-size: 16px;
+        max-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        margin-left: 0;
+        opacity: 0;
+        transition: all var(--transition-duration, 300ms) ease-in-out;
+      }
+
+      .tab:hover .label {
+        max-width: 200px;
+        margin-left: 12px;
+        opacity: 1;
+      }
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        FloatingTab.allTabs.push(this);
+        this.updatePosition();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        const index = FloatingTab.allTabs.indexOf(this);
+        if (index > -1) {
+            FloatingTab.allTabs.splice(index, 1);
+        }
+        // update positions of remaining tabs
+        FloatingTab.allTabs.forEach((tab) => tab.updatePosition());
+    }
+    updatePosition() {
+        // if top is manually set, use it
+        if (this.top !== -1) {
+            return;
+        }
+        // auto-calculate position based on index
+        const index = FloatingTab.allTabs.indexOf(this);
+        if (index === -1) {
+            this.top = 100; // default fallback
+        }
+        else {
+            // start at 100px and stack with 10px gap between tabs
+            this.top = 100 + index * (FloatingTab.TAB_HEIGHT + 10);
+        }
+    }
+    updated(changes) {
+        super.updated(changes);
+        if (changes.has('hidden')) {
+            this.classList.toggle('hidden', this.hidden);
+        }
+        if (changes.has('top')) {
+            this.updatePosition();
+        }
+    }
+    handleClick() {
+        // hide all tabs when one is clicked
+        FloatingTab.allTabs.forEach((tab) => {
+            tab.hidden = true;
+        });
+        this.fireCustomEvent(CustomEventType.ButtonClicked, {
+            action: 'toggle'
+        });
+    }
+    static showAllTabs() {
+        FloatingTab.allTabs.forEach((tab) => {
+            tab.hidden = false;
+        });
+    }
+    static hideAllTabs() {
+        FloatingTab.allTabs.forEach((tab) => {
+            tab.hidden = true;
+        });
+    }
+    render() {
+        const tabStyle = `
+      background-color: ${this.color};
+      top: ${this.top}px;
+    `;
+        const classes = getClasses({
+            tab: true,
+            hidden: this.hidden
+        });
+        return html `
+      <div class="${classes}" style="${tabStyle}" @click=${this.handleClick}>
+        <div class="icon-container">
+          ${this.icon
+            ? html `<temba-icon size="2" name="${this.icon}"></temba-icon>`
+            : ''}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+    }
+}
+FloatingTab.TAB_HEIGHT = 56; // height of tab for auto-stacking
+FloatingTab.allTabs = [];
+__decorate([
+    property({ type: String })
+], FloatingTab.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], FloatingTab.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FloatingTab.prototype, "color", void 0);
+__decorate([
+    property({ type: Number })
+], FloatingTab.prototype, "top", void 0);
+__decorate([
+    property({ type: Boolean })
+], FloatingTab.prototype, "hidden", void 0);
+//# sourceMappingURL=FloatingTab.js.map

package/out-tsc/src/display/FloatingTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingTab.js","sourceRoot":"","sources":["../../../src/display/FloatingTab.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { getClasses } from '../utils';\n\nexport class FloatingTab extends RapidElement {\n  static get styles() {\n    return css`\n      .tab.hidden {\n        transform: translateX(100%);\n      }\n      .tab {\n        position: fixed;\n        right: 0;\n        z-index: 9998;\n        transition: transform var(--transition-duration, 300ms) ease-in-out;\n        display: flex;\n        align-items: center;\n        padding: 12px;\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n        cursor: pointer;\n        box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);\n        transition: all calc(var(--transition-duration, 300ms) * 0.7)\n          ease-in-out;\n        user-select: none;\n      }\n\n      .tab:hover {\n        padding-right: 16px;\n        box-shadow: -4px 4px 12px rgba(0, 0, 0, 0.3);\n      }\n\n      .icon-container {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 32px;\n        height: 32px;\n      }\n\n      temba-icon {\n        --icon-color: white;\n      }\n\n      .label {\n        color: white;\n        font-weight: 500;\n        font-size: 16px;\n        max-width: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        margin-left: 0;\n        opacity: 0;\n        transition: all var(--transition-duration, 300ms) ease-in-out;\n      }\n\n      .tab:hover .label {\n        max-width: 200px;\n        margin-left: 12px;\n        opacity: 1;\n      }\n    `;\n  }\n\n  static TAB_HEIGHT = 56; // height of tab for auto-stacking\n  static allTabs: FloatingTab[] = [];\n\n  @property({ type: String })\n  icon: string;\n\n  @property({ type: String })\n  label: string;\n\n  @property({ type: String })\n  color = '#6B7280';\n\n  @property({ type: Number })\n  top = -1; // -1 means auto-calculate position\n\n  @property({ type: Boolean })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    FloatingTab.allTabs.push(this);\n    this.updatePosition();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    const index = FloatingTab.allTabs.indexOf(this);\n    if (index > -1) {\n      FloatingTab.allTabs.splice(index, 1);\n    }\n    // update positions of remaining tabs\n    FloatingTab.allTabs.forEach((tab) => tab.updatePosition());\n  }\n\n  private updatePosition() {\n    // if top is manually set, use it\n    if (this.top !== -1) {\n      return;\n    }\n\n    // auto-calculate position based on index\n    const index = FloatingTab.allTabs.indexOf(this);\n    if (index === -1) {\n      this.top = 100; // default fallback\n    } else {\n      // start at 100px and stack with 10px gap between tabs\n      this.top = 100 + index * (FloatingTab.TAB_HEIGHT + 10);\n    }\n  }\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.updated(changes);\n    if (changes.has('hidden')) {\n      this.classList.toggle('hidden', this.hidden);\n    }\n    if (changes.has('top')) {\n      this.updatePosition();\n    }\n  }\n\n  private handleClick() {\n    // hide all tabs when one is clicked\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = true;\n    });\n\n    this.fireCustomEvent(CustomEventType.ButtonClicked, {\n      action: 'toggle'\n    });\n  }\n\n  public static showAllTabs() {\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = false;\n    });\n  }\n\n  public static hideAllTabs() {\n    FloatingTab.allTabs.forEach((tab) => {\n      tab.hidden = true;\n    });\n  }\n\n  public render(): TemplateResult {\n    const tabStyle = `\n      background-color: ${this.color};\n      top: ${this.top}px;\n    `;\n\n    const classes = getClasses({\n      tab: true,\n      hidden: this.hidden\n    });\n\n    return html`\n      <div class=\"${classes}\" style=\"${tabStyle}\" @click=${this.handleClick}>\n        <div class=\"icon-container\">\n          ${this.icon\n            ? html`<temba-icon size=\"2\" name=\"${this.icon}\"></temba-icon>`\n            : ''}\n        </div>\n        <div class=\"label\">${this.label}</div>\n      </div>\n    `;\n  }\n}\n"]}

package/out-tsc/src/display/ProgressBar.js

@@ -11,13 +11,14 @@ export class ProgressBar extends RapidElement {
         this.done = false;
         this.showEstimatedCompletion = false;
         this.showPercentage = false;
+        this.animated = true;
     }
     updated(changes) {
         if (changes.has('eta') && this.eta) {
             this.estimatedCompletionDate = new Date(this.eta);
             this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();
         }
-        if (changes.has('current')) {
+        if (changes.has('current') || changes.has('total')) {
             const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));
             if (Number.isNaN(pct)) {
                 this.showPercentage = false;
@@ -30,8 +31,15 @@ export class ProgressBar extends RapidElement {
         }
     }
     render() {
+        const meterClasses = [
+            'meter',
+            this.done ? 'done' : '',
+            this.animated ? '' : 'static'
+        ]
+            .filter(Boolean)
+            .join(' ');
         return html `<div class="wrapper ${this.done ? 'complete' : ''}">
-      <div class="meter ${this.done ? 'done' : ''}">
+      <div class="${meterClasses}">
         ${this.message
             ? html `<div class="message">${this.message}</div>`
             : null}
@@ -132,6 +140,15 @@ ProgressBar.styles = css `
       display: none;
     }
 
+    .meter.static > span:after {
+      display: none;
+      animation: none;
+    }
+
+    .meter.static > span {
+      background-image: none;
+    }
+
     @keyframes move {
       0% {
         background-position: 0 0;
@@ -208,4 +225,7 @@ __decorate([
 __decorate([
     property({ type: String })
 ], ProgressBar.prototype, "message", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProgressBar.prototype, "animated", void 0);
 //# sourceMappingURL=ProgressBar.js.map

package/out-tsc/src/display/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/display/ProgressBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\n\nexport class ProgressBar extends RapidElement {\n  static styles = css`\n    .wrapper {\n      display: flex;\n      box-sizing: content-box;\n      background: #f1f1f1;\n      border-radius: var(--curvature);\n      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);\n      overflow: hidden;\n      min-height: 1.5rem;\n    }\n\n    .message {\n      padding: 0 0.5rem;\n      color: rgba(0, 0, 0, 0.4);\n      white-space: nowrap;\n    }\n\n    .meter {\n      flex-grow: 1;\n      display: flex;\n      box-sizing: content-box;\n      position: relative;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      padding: 4px;\n      min-height: 6px;\n    }\n    .meter > span {\n      display: block;\n      height: 100%;\n      border-radius: calc(var(--curvature) * 0.8);\n      background-color: var(--color-primary-dark);\n      background-image: linear-gradient(\n        center bottom,\n        rgb(43, 194, 83) 37%,\n        rgb(84, 240, 83) 69%\n      );\n\n      position: relative;\n      overflow: hidden;\n    }\n\n    .meter > span:after,\n    .animate > span > span {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background-image: linear-gradient(\n        -45deg,\n        rgba(255, 255, 255, 0.2) 25%,\n        transparent 25%,\n        transparent 50%,\n        rgba(255, 255, 255, 0.2) 50%,\n        rgba(255, 255, 255, 0.2) 75%,\n        transparent 75%,\n        transparent\n      );\n      z-index: 1;\n      background-size: 50px 50px;\n      animation: move 8s linear infinite;\n      border-top-right-radius: var(--curvature);\n      border-bottom-right-radius: var(--curvature);\n      border-top-left-radius: var(--curvature);\n      border-bottom-left-radius: var(--curvature);\n      overflow: hidden;\n    }\n\n    .animate > span:after {\n      display: none;\n    }\n\n    @keyframes move {\n      0% {\n        background-position: 0 0;\n      }\n      100% {\n        background-position: 50px 50px;\n      }\n    }\n\n    .meter .complete {\n      transition: flex-basis 2s;\n    }\n\n    .meter .incomplete {\n      flex-grow: 1;\n    }\n\n    .etc {\n      display: flex;\n      flex-direction: row;\n      background: rgba(0, 0, 0, 0.07);\n      font-weight: bold;\n      white-space: nowrap;\n      color: rgba(0, 0, 0, 0.5);\n      align-self: center;\n      padding: 0px 6px;\n      align-self: stretch;\n      align-items: center;\n    }\n\n    .etc > div {\n      font-size: 0.7em;\n    }\n\n    .wrapper *::last-child {\n      border-top-right-radius: var(--curvature);\n      border-bottom-right-radius: var(--curvature);\n      overflow: hidden;\n    }\n\n    .meter.done > span:after,\n    .done .animate > span > span {\n      display: none;\n    }\n\n    .meter.done > span {\n      background: rgb(var(--success-rgb));\n    }\n  `;\n\n  @property({ type: Number })\n  total = 100;\n\n  @property({ type: Number })\n  current = 0;\n\n  @property({ type: Number })\n  pct = 0;\n\n  @property({ type: Boolean })\n  done = false;\n\n  @property({ type: String })\n  eta: string;\n\n  @property({ type: String, attribute: false })\n  estimatedCompletionDate: Date;\n\n  @property({ type: Boolean })\n  showEstimatedCompletion = false;\n\n  @property({ type: Boolean })\n  showPercentage = false;\n\n  @property({ type: String })\n  message: string;\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changes.has('eta') && this.eta) {\n      this.estimatedCompletionDate = new Date(this.eta);\n      this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();\n    }\n\n    if (changes.has('current')) {\n      const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));\n      if (Number.isNaN(pct)) {\n        this.showPercentage = false;\n      } else {\n        this.pct = pct;\n        this.showPercentage = true;\n      }\n\n      this.done = this.pct >= 100;\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`<div class=\"wrapper ${this.done ? 'complete' : ''}\">\n      <div class=\"meter ${this.done ? 'done' : ''}\">\n        ${this.message\n          ? html`<div class=\"message\">${this.message}</div>`\n          : null}\n        <span class=\"complete\" style=\"flex-basis: ${this.pct}%\"></span>\n        <div class=\"incomplete\"></div>\n      </div>\n\n      ${this.showPercentage || this.showEstimatedCompletion\n        ? html`<div class=\"etc\">\n            <div>\n              ${this.estimatedCompletionDate &&\n              this.showEstimatedCompletion &&\n              !this.done\n                ? html`<temba-date\n                    value=\"${this.estimatedCompletionDate.toISOString()}\"\n                    display=\"countdown\"\n                  ></temba-date>`\n                : html`${this.pct}%`}\n            </div>\n          </div>`\n        : null}\n\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../src/display/ProgressBar.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\n\nexport class ProgressBar extends RapidElement {\n  static styles = css`\n    .wrapper {\n      display: flex;\n      box-sizing: content-box;\n      background: #f1f1f1;\n      border-radius: var(--curvature);\n      box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.05);\n      overflow: hidden;\n      min-height: 1.5rem;\n    }\n\n    .message {\n      padding: 0 0.5rem;\n      color: rgba(0, 0, 0, 0.4);\n      white-space: nowrap;\n    }\n\n    .meter {\n      flex-grow: 1;\n      display: flex;\n      box-sizing: content-box;\n      position: relative;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n      padding: 4px;\n      min-height: 6px;\n    }\n    .meter > span {\n      display: block;\n      height: 100%;\n      border-radius: calc(var(--curvature) * 0.8);\n      background-color: var(--color-primary-dark);\n      background-image: linear-gradient(\n        center bottom,\n        rgb(43, 194, 83) 37%,\n        rgb(84, 240, 83) 69%\n      );\n\n      position: relative;\n      overflow: hidden;\n    }\n\n    .meter > span:after,\n    .animate > span > span {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      background-image: linear-gradient(\n        -45deg,\n        rgba(255, 255, 255, 0.2) 25%,\n        transparent 25%,\n        transparent 50%,\n        rgba(255, 255, 255, 0.2) 50%,\n        rgba(255, 255, 255, 0.2) 75%,\n        transparent 75%,\n        transparent\n      );\n      z-index: 1;\n      background-size: 50px 50px;\n      animation: move 8s linear infinite;\n      border-top-right-radius: var(--curvature);\n      border-bottom-right-radius: var(--curvature);\n      border-top-left-radius: var(--curvature);\n      border-bottom-left-radius: var(--curvature);\n      overflow: hidden;\n    }\n\n    .animate > span:after {\n      display: none;\n    }\n\n    .meter.static > span:after {\n      display: none;\n      animation: none;\n    }\n\n    .meter.static > span {\n      background-image: none;\n    }\n\n    @keyframes move {\n      0% {\n        background-position: 0 0;\n      }\n      100% {\n        background-position: 50px 50px;\n      }\n    }\n\n    .meter .complete {\n      transition: flex-basis 2s;\n    }\n\n    .meter .incomplete {\n      flex-grow: 1;\n    }\n\n    .etc {\n      display: flex;\n      flex-direction: row;\n      background: rgba(0, 0, 0, 0.07);\n      font-weight: bold;\n      white-space: nowrap;\n      color: rgba(0, 0, 0, 0.5);\n      align-self: center;\n      padding: 0px 6px;\n      align-self: stretch;\n      align-items: center;\n    }\n\n    .etc > div {\n      font-size: 0.7em;\n    }\n\n    .wrapper *::last-child {\n      border-top-right-radius: var(--curvature);\n      border-bottom-right-radius: var(--curvature);\n      overflow: hidden;\n    }\n\n    .meter.done > span:after,\n    .done .animate > span > span {\n      display: none;\n    }\n\n    .meter.done > span {\n      background: rgb(var(--success-rgb));\n    }\n  `;\n\n  @property({ type: Number })\n  total = 100;\n\n  @property({ type: Number })\n  current = 0;\n\n  @property({ type: Number })\n  pct = 0;\n\n  @property({ type: Boolean })\n  done = false;\n\n  @property({ type: String })\n  eta: string;\n\n  @property({ type: String, attribute: false })\n  estimatedCompletionDate: Date;\n\n  @property({ type: Boolean })\n  showEstimatedCompletion = false;\n\n  @property({ type: Boolean })\n  showPercentage = false;\n\n  @property({ type: String })\n  message: string;\n\n  @property({ type: Boolean })\n  animated = true;\n\n  public updated(\n    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    if (changes.has('eta') && this.eta) {\n      this.estimatedCompletionDate = new Date(this.eta);\n      this.showEstimatedCompletion = this.estimatedCompletionDate > new Date();\n    }\n\n    if (changes.has('current') || changes.has('total')) {\n      const pct = Math.floor(Math.min((this.current / this.total) * 100, 100));\n      if (Number.isNaN(pct)) {\n        this.showPercentage = false;\n      } else {\n        this.pct = pct;\n        this.showPercentage = true;\n      }\n\n      this.done = this.pct >= 100;\n    }\n  }\n\n  public render(): TemplateResult {\n    const meterClasses = [\n      'meter',\n      this.done ? 'done' : '',\n      this.animated ? '' : 'static'\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`<div class=\"wrapper ${this.done ? 'complete' : ''}\">\n      <div class=\"${meterClasses}\">\n        ${this.message\n          ? html`<div class=\"message\">${this.message}</div>`\n          : null}\n        <span class=\"complete\" style=\"flex-basis: ${this.pct}%\"></span>\n        <div class=\"incomplete\"></div>\n      </div>\n\n      ${this.showPercentage || this.showEstimatedCompletion\n        ? html`<div class=\"etc\">\n            <div>\n              ${this.estimatedCompletionDate &&\n              this.showEstimatedCompletion &&\n              !this.done\n                ? html`<temba-date\n                    value=\"${this.estimatedCompletionDate.toISOString()}\"\n                    display=\"countdown\"\n                  ></temba-date>`\n                : html`${this.pct}%`}\n            </div>\n          </div>`\n        : null}\n\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/out-tsc/src/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/events.ts"],"names":[],"mappings":"","sourcesContent":["import { Msg, ObjectReference, User } from './interfaces';\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport interface ContactEvent {\n  uuid?: string;\n  type: string;\n  created_on: string;\n  created_by?: User; // deprecated\n  _user?: ObjectReference;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n}\n\nexport interface ContactStatusChangedEvent extends ContactEvent {\n  status: string;\n}\n\nexport interface OptInEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface CallEvent extends ContactEvent {\n  call?: {\n    uuid: string;\n    urn: string;\n  };\n}\n\nexport interface ChatStartedEvent extends ContactEvent {\n  params?: object;\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  optin?: ObjectReference;\n  _status?: string;\n  _failed_reason?: string;\n  _logs_url?: string;\n  status?: string; // deprecated\n  failed_reason_display?: string; // deprecated\n  logs_url?: string; // deprecated\n}\n\nexport interface RunEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  ticket: {\n    // ticket_opened\n    uuid: string;\n    topic?: ObjectReference;\n  };\n  ticket_uuid?: string; // all other event types\n  assignee?: User;\n  note?: string;\n  topic?: ObjectReference;\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  amount: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\n\nexport interface ContactHistoryPage {\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n  start_date: Date;\n  events: ContactEvent[];\n}\n"]}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/events.ts"],"names":[],"mappings":"","sourcesContent":["import { Msg, ObjectReference, User } from './interfaces';\n\nexport interface EventGroup {\n  type: string;\n  events: ContactEvent[];\n  open: boolean;\n}\n\nexport interface ContactEvent {\n  uuid?: string;\n  type: string;\n  created_on: string;\n  _user?: ObjectReference;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n  channel_event_type: string;\n  duration: number;\n\n  event: {\n    type: string;\n    channel: { uuid: string; name: string };\n    duration?: number;\n    optin?: {\n      uuid: string;\n      name: string;\n    };\n  };\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n  language: string;\n}\n\nexport interface ContactStatusChangedEvent extends ContactEvent {\n  status: string;\n}\n\nexport interface OptInEvent extends ContactEvent {\n  optin: {\n    uuid: string;\n    name: string;\n  };\n}\n\nexport interface CallEvent extends ContactEvent {\n  call?: {\n    uuid: string;\n    urn: string;\n  };\n}\n\nexport interface ChatStartedEvent extends ContactEvent {\n  params?: object;\n}\n\nexport interface MsgEvent extends ContactEvent {\n  msg: Msg;\n  optin?: ObjectReference;\n  _status?: { created_on: string; status: string; reason: string };\n  _logs_url?: string;\n}\n\nexport interface RunEvent extends ContactEvent {\n  flow: ObjectReference;\n  status: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n  urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n  ticket: {\n    // ticket_opened\n    uuid: string;\n    topic?: ObjectReference;\n  };\n  ticket_uuid?: string; // all other event types\n  assignee?: User;\n  note?: string;\n  topic?: ObjectReference;\n}\n\nexport interface NameChangedEvent extends ContactEvent {\n  name: string;\n}\n\nexport interface UpdateFieldEvent extends ContactEvent {\n  field: { key: string; name: string };\n  value: { text: string };\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n  groups_added: ObjectReference[];\n  groups_removed: ObjectReference[];\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n  sender: string;\n  recipient: string;\n  currency: string;\n  amount: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\n\nexport interface ContactHistoryPage {\n  events: ContactEvent[];\n  has_older: boolean;\n  recent_only: boolean;\n  next_before: number;\n  next_after: number;\n}\n"]}

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

@@ -0,0 +1,200 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { RapidElement } from '../RapidElement';
+import { CustomEventType } from '../interfaces';
+/**
+ * CanvasMenu - A popup menu for adding items to the flow canvas
+ * Displayed when double-clicking on empty canvas space
+ */
+export class CanvasMenu extends RapidElement {
+    constructor() {
+        super(...arguments);
+        this.x = 0;
+        this.y = 0;
+        this.open = false;
+        this.clickPosition = { x: 0, y: 0 };
+    }
+    static get styles() {
+        return css `
+      :host {
+        position: fixed;
+        z-index: 10000;
+        display: block;
+        pointer-events: none;
+      }
+
+      .menu {
+        position: fixed;
+        background: white;
+        border-radius: var(--curvature);
+        box-shadow: var(--dropdown-shadow);
+        padding: 0.5em 0;
+        width: 265px;
+        pointer-events: auto;
+      }
+
+      .menu-item {
+        padding: 0.75em 1.5em;
+        cursor: pointer;
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75em;
+        transition: background-color 0.15s ease;
+      }
+
+      .menu-item:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      .menu-item temba-icon {
+        --icon-color: var(--color-text);
+        margin-top: 0.15em;
+      }
+
+      .menu-item-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0.15em;
+      }
+
+      .menu-item-title {
+        font-weight: 500;
+        font-size: 1rem;
+        color: var(--color-text-dark);
+      }
+
+      .menu-item-description {
+        font-size: 0.85rem;
+        color: var(--color-text);
+      }
+
+      .divider {
+        height: 1px;
+        background: rgba(0, 0, 0, 0.1);
+        margin: 0.5em 0;
+      }
+    `;
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        // Close menu when clicking outside
+        const handleClickOutside = (e) => {
+            if (this.open && !this.contains(e.target)) {
+                this.close();
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        // Store cleanup function
+        this._clickOutsideHandler = handleClickOutside;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._clickOutsideHandler) {
+            document.removeEventListener('click', this._clickOutsideHandler);
+        }
+    }
+    show(x, y, clickPosition) {
+        this.x = x;
+        this.y = y;
+        this.clickPosition = clickPosition;
+        this.open = true;
+        // Adjust position after menu renders to ensure it fits on screen
+        requestAnimationFrame(() => {
+            this.adjustPosition();
+        });
+    }
+    adjustPosition() {
+        var _a;
+        const menuElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.menu');
+        if (!menuElement)
+            return;
+        const menuRect = menuElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const margin = 10; // margin from viewport edges
+        let adjustedX = this.x;
+        let adjustedY = this.y;
+        // Check if menu goes off the right edge
+        if (this.x + menuRect.width + margin > viewportWidth) {
+            adjustedX = viewportWidth - menuRect.width - margin;
+        }
+        // Check if menu goes off the bottom edge
+        if (this.y + menuRect.height + margin > viewportHeight) {
+            adjustedY = viewportHeight - menuRect.height - margin;
+        }
+        // Update position if needed
+        if (adjustedX !== this.x || adjustedY !== this.y) {
+            this.x = adjustedX;
+            this.y = adjustedY;
+        }
+    }
+    close() {
+        this.open = false;
+    }
+    handleMenuItemClick(action) {
+        this.fireCustomEvent(CustomEventType.Selection, {
+            action,
+            position: this.clickPosition
+        });
+        this.close();
+    }
+    render() {
+        if (!this.open) {
+            return html ``;
+        }
+        return html `
+      <div class="menu" style="left: ${this.x}px; top: ${this.y}px;">
+        <div
+          class="menu-item"
+          @click=${() => this.handleMenuItemClick('action')}
+        >
+          <temba-icon name="action" size="1.25"></temba-icon>
+          <div class="menu-item-content">
+            <div class="menu-item-title">Add Action</div>
+            <div class="menu-item-description">
+              Send messages, update contacts
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="menu-item"
+          @click=${() => this.handleMenuItemClick('split')}
+        >
+          <temba-icon name="split" size="1.25"></temba-icon>
+          <div class="menu-item-content">
+            <div class="menu-item-title">Add Split</div>
+            <div class="menu-item-description">Branch based on conditions</div>
+          </div>
+        </div>
+
+        <div class="divider"></div>
+
+        <div
+          class="menu-item"
+          @click=${() => this.handleMenuItemClick('sticky')}
+        >
+          <temba-icon name="note" size="1.25"></temba-icon>
+          <div class="menu-item-content">
+            <div class="menu-item-title">Add Sticky Note</div>
+            <div class="menu-item-description">Add a note to the canvas</div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Number })
+], CanvasMenu.prototype, "x", void 0);
+__decorate([
+    property({ type: Number })
+], CanvasMenu.prototype, "y", void 0);
+__decorate([
+    property({ type: Boolean })
+], CanvasMenu.prototype, "open", void 0);
+__decorate([
+    state()
+], CanvasMenu.prototype, "clickPosition", void 0);
+//# sourceMappingURL=CanvasMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasMenu.js","sourceRoot":"","sources":["../../../src/flow/CanvasMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\n\n/**\n * Event detail for canvas menu selection\n */\nexport interface CanvasMenuSelection {\n  action: 'sticky' | 'action' | 'split';\n  position: { x: number; y: number };\n}\n\n/**\n * CanvasMenu - A popup menu for adding items to the flow canvas\n * Displayed when double-clicking on empty canvas space\n */\nexport class CanvasMenu extends RapidElement {\n  static get styles() {\n    return css`\n      :host {\n        position: fixed;\n        z-index: 10000;\n        display: block;\n        pointer-events: none;\n      }\n\n      .menu {\n        position: fixed;\n        background: white;\n        border-radius: var(--curvature);\n        box-shadow: var(--dropdown-shadow);\n        padding: 0.5em 0;\n        width: 265px;\n        pointer-events: auto;\n      }\n\n      .menu-item {\n        padding: 0.75em 1.5em;\n        cursor: pointer;\n        display: flex;\n        align-items: flex-start;\n        gap: 0.75em;\n        transition: background-color 0.15s ease;\n      }\n\n      .menu-item:hover {\n        background-color: rgba(0, 0, 0, 0.05);\n      }\n\n      .menu-item temba-icon {\n        --icon-color: var(--color-text);\n        margin-top: 0.15em;\n      }\n\n      .menu-item-content {\n        display: flex;\n        flex-direction: column;\n        gap: 0.15em;\n      }\n\n      .menu-item-title {\n        font-weight: 500;\n        font-size: 1rem;\n        color: var(--color-text-dark);\n      }\n\n      .menu-item-description {\n        font-size: 0.85rem;\n        color: var(--color-text);\n      }\n\n      .divider {\n        height: 1px;\n        background: rgba(0, 0, 0, 0.1);\n        margin: 0.5em 0;\n      }\n    `;\n  }\n\n  @property({ type: Number })\n  public x = 0;\n\n  @property({ type: Number })\n  public y = 0;\n\n  @property({ type: Boolean })\n  public open = false;\n\n  @state()\n  private clickPosition = { x: 0, y: 0 };\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    // Close menu when clicking outside\n    const handleClickOutside = (e: MouseEvent) => {\n      if (this.open && !this.contains(e.target as Node)) {\n        this.close();\n      }\n    };\n\n    document.addEventListener('click', handleClickOutside);\n\n    // Store cleanup function\n    (this as any)._clickOutsideHandler = handleClickOutside;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if ((this as any)._clickOutsideHandler) {\n      document.removeEventListener('click', (this as any)._clickOutsideHandler);\n    }\n  }\n\n  public show(x: number, y: number, clickPosition: { x: number; y: number }) {\n    this.x = x;\n    this.y = y;\n    this.clickPosition = clickPosition;\n    this.open = true;\n\n    // Adjust position after menu renders to ensure it fits on screen\n    requestAnimationFrame(() => {\n      this.adjustPosition();\n    });\n  }\n\n  private adjustPosition(): void {\n    const menuElement = this.shadowRoot?.querySelector('.menu') as HTMLElement;\n    if (!menuElement) return;\n\n    const menuRect = menuElement.getBoundingClientRect();\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    const margin = 10; // margin from viewport edges\n\n    let adjustedX = this.x;\n    let adjustedY = this.y;\n\n    // Check if menu goes off the right edge\n    if (this.x + menuRect.width + margin > viewportWidth) {\n      adjustedX = viewportWidth - menuRect.width - margin;\n    }\n\n    // Check if menu goes off the bottom edge\n    if (this.y + menuRect.height + margin > viewportHeight) {\n      adjustedY = viewportHeight - menuRect.height - margin;\n    }\n\n    // Update position if needed\n    if (adjustedX !== this.x || adjustedY !== this.y) {\n      this.x = adjustedX;\n      this.y = adjustedY;\n    }\n  }\n\n  public close() {\n    this.open = false;\n  }\n\n  private handleMenuItemClick(action: 'sticky' | 'action' | 'split') {\n    this.fireCustomEvent(CustomEventType.Selection, {\n      action,\n      position: this.clickPosition\n    } as CanvasMenuSelection);\n    this.close();\n  }\n\n  public render(): TemplateResult {\n    if (!this.open) {\n      return html``;\n    }\n\n    return html`\n      <div class=\"menu\" style=\"left: ${this.x}px; top: ${this.y}px;\">\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('action')}\n        >\n          <temba-icon name=\"action\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-content\">\n            <div class=\"menu-item-title\">Add Action</div>\n            <div class=\"menu-item-description\">\n              Send messages, update contacts\n            </div>\n          </div>\n        </div>\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('split')}\n        >\n          <temba-icon name=\"split\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-content\">\n            <div class=\"menu-item-title\">Add Split</div>\n            <div class=\"menu-item-description\">Branch based on conditions</div>\n          </div>\n        </div>\n\n        <div class=\"divider\"></div>\n\n        <div\n          class=\"menu-item\"\n          @click=${() => this.handleMenuItemClick('sticky')}\n        >\n          <temba-icon name=\"note\" size=\"1.25\"></temba-icon>\n          <div class=\"menu-item-content\">\n            <div class=\"menu-item-title\">Add Sticky Note</div>\n            <div class=\"menu-item-description\">Add a note to the canvas</div>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}