@nyaruka/temba-components 0.112.0 → 0.113.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/temba-components.js +3 -4
  3. package/dist/temba-components.js.map +1 -1
  4. package/out-tsc/src/compose/Compose.js +6 -15
  5. package/out-tsc/src/compose/Compose.js.map +1 -1
  6. package/out-tsc/src/tabpane/TabPane.js +13 -3
  7. package/out-tsc/src/tabpane/TabPane.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/compose/Compose.ts +6 -16
  10. package/src/tabpane/TabPane.ts +15 -3
package/out-tsc/src/compose/Compose.js CHANGED
@@ -299,8 +299,9 @@ export class Compose extends FormElement {
299
299
  const line = text.substring(lineStart, cursor);
300
300
  if (line.startsWith('/')) {
301
301
  // switch to the shortcuts tab
302
- const tabs = this.shadowRoot.querySelector('temba-tabs');
303
- tabs.focusTab('Shortcuts');
302
+ if (this.currentTab.name !== 'Shortcuts') {
303
+ this.getTabs().focusTab('Shortcuts');
304
+ }
304
305
  const shortcuts = this.shadowRoot.querySelector('temba-shortcuts');
305
306
  shortcuts.filter = line.substring(1);
306
307
  }
@@ -336,20 +337,11 @@ export class Compose extends FormElement {
336
337
  num <= tabs.tabs.length) {
337
338
  tabs.index = num - 1;
338
339
  }
339
- // if they type / as the first character in a line, switch to the shortcut
340
- if (evt.key === '/' && this.currentTab.name !== 'Shortcuts') {
341
- const line = this.getCurrentLine();
342
- const text = line.text.trim();
343
- if (text.trim().length === 1) {
344
- evt.preventDefault();
345
- tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Shortcuts');
346
- }
347
- }
348
- else if (evt.key === 'Backspace') {
340
+ if (evt.key === 'Backspace') {
349
341
  const line = this.getCurrentLine();
350
342
  const text = line.text;
351
343
  if (text === '/') {
352
- tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');
344
+ tabs.focusTab('Reply');
353
345
  }
354
346
  }
355
347
  if (this.currentTab.name === 'Shortcuts') {
@@ -384,7 +376,7 @@ export class Compose extends FormElement {
384
376
  this.currentLanguage = select.values[0].iso;
385
377
  }
386
378
  resetTabs() {
387
- this.shadowRoot.querySelector('temba-tabs').index = 0;
379
+ this.getTabs().focusTab('Reply');
388
380
  }
389
381
  getTabs() {
390
382
  return this.shadowRoot.querySelector('temba-tabs');
@@ -465,7 +457,6 @@ export class Compose extends FormElement {
465
457
  <temba-tabs
466
458
  embedded
467
459
  focusedname
468
- index="0"
469
460
  @temba-context-changed=${this.handleTabChanged}
470
461
  refresh="${(this.currentAttachments || []).length}|${this.index}|${this
471
462
  .currentQuickReplies.length}|${showOptins}|${this
package/out-tsc/src/compose/Compose.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { MediaPicker } from '../mediapicker/MediaPicker';\nimport { Tab } from '../tabpane/Tab';\nimport { TextInput } from '../textinput/TextInput';\nimport { ShortcutList } from '../list/ShortcutList';\n\nexport interface ComposeValue {\n text: string;\n attachments: { uuid: string }[];\n quick_replies: string[];\n optin: string;\n template: string;\n variables: string[];\n}\n\nexport class Compose extends FormElement {\n static get styles() {\n return css`\n :host {\n overflow: hidden;\n border-top-right-radius: var(--curvature);\n border-top-left-radius: var(--curvature);\n }\n\n .active-template .chatbox {\n display: none;\n }\n\n .active-template .actions {\n border: none;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n overflow: hidden;\n border-radius: var(--compose-curvature, var(--curvature-widget));\n background: var(--color-widget-bg);\n border: var(--compose-border, 1px solid var(--color-widget-border));\n transition: all ease-in-out var(--transition-speed);\n box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n caret-color: var(--input-caret);\n --color-widget-bg-focused: transparent;\n --color-widget-bg: transparent;\n }\n\n .chatbox {\n --color-widget-border: none;\n --curvature-widget: var(\n --compose-curvature,\n var(--curvature) var(--curvature) 0px 0px\n );\n\n --widget-box-shadow: none;\n display: block;\n flex-grow: 1;\n --widget-box-shadow-focused: none;\n --temba-textinput-padding: 1em 1em;\n }\n\n .actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0em;\n background: #f9f9f9;\n }\n\n .actions-right {\n display: flex;\n align-items: center;\n }\n\n temba-charcount {\n margin-right: 5px;\n overflow: hidden;\n --temba-charcount-counts-margin-top: 0px;\n --temba-charcount-summary-margin-top: 0px;\n --temba-charcount-summary-position: fixed;\n --temba-charcount-summary-right: 105px;\n --temba-charcount-summary-bottom: 105px;\n }\n\n .send-error {\n color: rgba(250, 0, 0, 0.75);\n font-size: var(--help-text-size);\n padding: 0.5em;\n }\n\n .language {\n margin-bottom: 0.6em;\n display: block;\n }\n\n .top-right {\n align-items: center;\n display: flex;\n }\n\n .gutter {\n align-items: center;\n display: flex;\n margin: 0.5em;\n }\n\n temba-tabs {\n --focused-tab-color: #f4f4f4;\n min-height: var(--compose-min-height, 13.5em);\n }\n\n .quick-replies {\n margin: 0.8em;\n }\n\n .optins {\n margin: 0.8em;\n }\n\n .templates {\n margin: 0.8em;\n }\n\n .attachments {\n min-height: 5em;\n padding: 0.2em;\n align-items: center;\n display: flex;\n background: #f9f9f9;\n border-radius: var(--curvature);\n margin: 0.6em;\n margin-bottom: 0em;\n }\n\n .pane-bottom {\n border: 0px solid red;\n --color-placeholder: rgba(0, 0, 0, 0.2);\n flex-grow: 99;\n }\n\n .shortcut-wrapper {\n max-height: var(--shortcuts-height, 12em);\n display: flex;\n flex-direction: row;\n align-items: stretch;\n --options-block-shadow: none;\n --curvature-widget: 0px;\n --color-options-bg: #fff;\n border-bottom: 1px solid var(--color-widget-border);\n }\n\n temba-shortcuts {\n flex-grow: 1;\n }\n\n .quick-replies {\n background: #f9f9f9;\n }\n `;\n }\n\n @property({ type: Number })\n index = 1;\n\n @property({ type: Number })\n maxAttachments = 3;\n\n @property({ type: Number })\n maxLength = 640;\n\n @property({ type: Boolean })\n completion: boolean;\n\n @property({ type: Boolean })\n attachments: boolean;\n\n @property({ type: Boolean })\n quickReplies: boolean;\n\n @property({ type: Boolean })\n optIns: boolean;\n\n @property({ type: Boolean })\n templates: boolean;\n\n @property({ type: Boolean })\n counter: boolean;\n\n @property({ type: Boolean })\n autogrow: boolean;\n\n @property({ type: Boolean })\n shortcuts: boolean;\n\n @property({ type: String })\n currentText = '';\n\n @property({ type: String })\n initialText = '';\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n @property({ type: Array })\n languages: Language[] = [];\n\n @property({ type: Array })\n currentAttachments: Attachment[] = [];\n\n @property({ type: Array })\n currentQuickReplies: { name: string; value: string }[] = [];\n\n @property({ type: Array })\n currentOptin: { name: string; uuid: string }[] = [];\n\n @property({ type: Array })\n variables: string[] = [];\n\n @property({ type: String })\n template: string;\n\n @property({ type: Object })\n currentTemplate: { name: string; uuid: string };\n\n // locale for the template\n @property({ type: String })\n locale: string;\n\n @property({ type: String })\n optinEndpoint = '/api/v2/optins.json';\n\n @property({ type: String })\n templateEndpoint = '/api/internal/templates.json';\n\n @property({ type: Boolean, attribute: false })\n empty = true;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: Object })\n langValues: {\n [lang: string]: {\n text: string;\n attachments: Attachment[];\n quick_replies: string[];\n optin?: { name: string; uuid: string };\n template?: string;\n variables?: string[];\n locale?: string;\n };\n } = {};\n\n @property({ type: String })\n currentLanguage = 'und';\n\n @property({ type: Object })\n currentTab: Tab;\n\n @property({ type: Boolean })\n hasPendingText = false;\n\n @property({ type: Object })\n activeShortcut: Shortcut;\n\n public constructor() {\n super();\n }\n\n private isBaseLanguage(): boolean {\n return (\n this.currentLanguage == 'und' ||\n this.currentLanguage == this.languages[0].iso\n );\n }\n\n private handleTabChanged() {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n this.currentTab = tabs.getCurrentTab();\n\n if (this.currentTab && this.currentTab.name === 'Shortcuts') {\n const shortcuts = this.shadowRoot.querySelector(\n 'temba-shortcuts'\n ) as ShortcutList;\n shortcuts.filter = '';\n }\n this.setFocusOnChatbox();\n }\n\n public firstUpdated(changes: Map<string, any>): void {\n super.firstUpdated(changes);\n\n if (changes.has('languages') && this.languages.length > 0) {\n this.currentLanguage = this.languages[0].iso;\n }\n\n if (changes.has('value')) {\n this.langValues = this.getDeserializedValue() || {};\n this.variables = this.langValues[this.currentLanguage]?.variables || [];\n this.template = this.langValues[this.currentLanguage]?.template || null;\n }\n this.setFocusOnChatbox();\n }\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n\n if (changes.has('currentLanguage') && this.langValues) {\n let langValue = {\n text: '',\n attachments: [],\n quick_replies: []\n };\n\n if (this.currentLanguage in this.langValues) {\n langValue = this.langValues[this.currentLanguage];\n }\n\n this.currentText = langValue.text;\n this.initialText = langValue.text;\n this.currentAttachments = langValue.attachments;\n this.currentQuickReplies = (langValue.quick_replies || []).map(\n (value) => {\n return { name: value, value };\n }\n );\n this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n this.setFocusOnChatbox();\n\n // TODO: this feels like it shouldn't be needed\n const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n if (chatbox) {\n chatbox.value = this.initialText;\n }\n this.resetTabs();\n this.requestUpdate('currentAttachments');\n }\n\n if (\n (this.langValues &&\n (changes.has('currentText') ||\n changes.has('currentAttachments') ||\n changes.has('currentQuickReplies'))) ||\n changes.has('currentOptin') ||\n changes.has('currentTemplate') ||\n changes.has('variables')\n ) {\n this.checkIfEmpty();\n\n const trimmed = this.currentText ? this.currentText.trim() : '';\n if (\n trimmed ||\n (this.currentAttachments || []).length > 0 ||\n this.currentQuickReplies.length > 0 ||\n this.variables.length > 0\n ) {\n this.langValues[this.currentLanguage] = {\n text: trimmed,\n attachments: this.currentAttachments,\n quick_replies: this.currentQuickReplies.map((option) => option.value),\n optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n template: this.currentTemplate ? this.currentTemplate.uuid : null,\n variables: this.variables,\n locale: this.locale\n };\n } else {\n delete this.langValues[this.currentLanguage];\n }\n this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n this.requestUpdate('langValues');\n this.setValue(this.langValues);\n }\n }\n\n private handleAttachmentsChanged(event: CustomEvent) {\n const media = event.target as MediaPicker;\n this.currentAttachments = media.attachments;\n this.requestUpdate();\n }\n\n private setFocusOnChatbox(): void {\n const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n if (completion) {\n window.setTimeout(() => {\n completion.focus();\n }, 0);\n }\n }\n\n public reset(): void {\n const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n if (completion) {\n completion.textInputElement.value = '';\n completion.value = '';\n this.initialText = '';\n this.currentText = '';\n this.currentQuickReplies = [];\n this.currentAttachments = [];\n this.resetTabs();\n }\n }\n\n private handleQuickReplyChange() {\n this.requestUpdate('currentQuickReplies');\n }\n\n private handleOptInChange(event: InputEvent) {\n this.currentOptin = (event.target as any).values;\n this.requestUpdate('optIn');\n }\n\n private handleChatboxChange(evt: Event) {\n const chatbox = evt.target as Completion;\n const inputElement = chatbox.getTextInput().inputElement;\n\n this.currentText = inputElement.value;\n this.hasPendingText = inputElement.value.length > 0;\n\n // is the last character a / and is it at the beginning of the line\n const cursor = inputElement.selectionStart;\n const text = inputElement.value;\n const lineStart = text.lastIndexOf('\\n', cursor - 1) + 1;\n const line = text.substring(lineStart, cursor);\n\n if (line.startsWith('/')) {\n // switch to the shortcuts tab\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n tabs.focusTab('Shortcuts');\n\n const shortcuts = this.shadowRoot.querySelector(\n 'temba-shortcuts'\n ) as ShortcutList;\n shortcuts.filter = line.substring(1);\n }\n }\n\n public checkIfEmpty() {\n const chatboxEmpty = this.currentText.trim().length === 0;\n const attachmentsEmpty = this.currentAttachments.length === 0;\n if (this.attachments) {\n this.empty = chatboxEmpty && attachmentsEmpty;\n } else {\n this.empty = chatboxEmpty;\n }\n }\n\n private getCurrentLine(): { text: string; index: number } {\n const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;\n\n const cursor = chatbox.getTextInput().inputElement.selectionStart - 1;\n const text = chatbox.value;\n const start = text.substring(0, cursor).lastIndexOf('\\n') + 1;\n\n let end = chatbox.value.indexOf('\\n', start);\n if (end === -1) {\n end = chatbox.value.length;\n }\n\n return { text: chatbox.value.substring(start, end), index: start };\n }\n\n private handleKeyDown(evt: KeyboardEvent) {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n const num = parseInt(evt.key);\n if (\n !Number.isNaN(num) &&\n num > 0 &&\n evt.ctrlKey &&\n evt.metaKey &&\n num <= tabs.tabs.length\n ) {\n tabs.index = num - 1;\n }\n\n // if they type / as the first character in a line, switch to the shortcut\n if (evt.key === '/' && this.currentTab.name !== 'Shortcuts') {\n const line = this.getCurrentLine();\n const text = line.text.trim();\n if (text.trim().length === 1) {\n evt.preventDefault();\n tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Shortcuts');\n }\n } else if (evt.key === 'Backspace') {\n const line = this.getCurrentLine();\n const text = line.text;\n if (text === '/') {\n tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');\n }\n }\n\n if (this.currentTab.name === 'Shortcuts') {\n if (evt.key === 'Enter' && !evt.shiftKey) {\n return;\n }\n }\n\n if (evt.key === 'Enter') {\n if (!evt.shiftKey) {\n evt.preventDefault();\n if (this.completion) {\n const chat = evt.target as Completion;\n if (!chat.hasVisibleOptions()) {\n this.triggerSend();\n }\n } else {\n this.triggerSend();\n }\n }\n }\n }\n\n public triggerSend() {\n if (!this.empty) {\n this.fireCustomEvent(CustomEventType.Submitted, {\n langValues: this.langValues\n });\n }\n }\n\n private handleLanguageChange(evt: Event) {\n const select = evt.target as Select;\n this.currentLanguage = select.values[0].iso;\n }\n\n public resetTabs() {\n (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = 0;\n }\n\n public getTabs(): TabPane {\n return this.shadowRoot.querySelector('temba-tabs') as TabPane;\n }\n\n public render(): TemplateResult {\n return html`\n <temba-field\n name=${this.name}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .value=${this.value}\n class=${getClasses({\n 'active-template':\n !!this.currentTemplate &&\n this.currentTab &&\n this.currentTab.name === 'Template'\n })}\n >\n ${this.languages.length > 1\n ? html`<temba-select\n @change=${this.handleLanguageChange}\n class=\"language\"\n name=\"language\"\n .staticOptions=${this.languages}\n valueKey=\"iso\"\n >\n </temba-select>`\n : null}\n <div class=\"container\">\n <div class=\"items actions\">${this.getActions()}</div>\n </div>\n </temba-field>\n `;\n }\n\n private handleTemplateChanged(evt: CustomEvent) {\n this.currentTemplate = evt.detail.template;\n this.locale = evt.detail.translation?.locale;\n this.requestUpdate();\n }\n\n private handleTemplateVariablesChanged(evt: CustomEvent) {\n this.variables = [...evt.detail.variables];\n }\n\n public getTextInput(): TextInput {\n return (\n this.shadowRoot.querySelector('.chatbox') as Completion\n ).getTextInput();\n }\n\n public handleShortcutSelection(event: CustomEvent) {\n this.activeShortcut = event.detail.selected;\n const line = this.getCurrentLine();\n const chatbox = this.getTextInput();\n\n const originalText = chatbox.value;\n\n if (line.text.startsWith('/')) {\n const newText =\n originalText.substring(0, line.index) +\n this.activeShortcut.text +\n originalText.substring(line.index + line.text.length);\n\n chatbox.updateValue(newText);\n\n // set our cursor to the end of the shortcut\n const cursor = line.index + this.activeShortcut.text.length;\n chatbox.inputElement.setSelectionRange(cursor, cursor);\n } else {\n // add the text where the cursor is\n const cursor = chatbox.inputElement.selectionStart;\n const newText =\n originalText.substring(0, cursor) +\n this.activeShortcut.text +\n originalText.substring(cursor);\n chatbox.updateValue(newText);\n\n // set the cursor to the end of the shortcut text\n const newCursor = cursor + this.activeShortcut.text.length;\n chatbox.inputElement.setSelectionRange(newCursor, newCursor);\n }\n\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');\n }\n\n private getActions(): TemplateResult {\n const showOptins = this.optIns && this.isBaseLanguage();\n const showTemplates = this.templates && this.isBaseLanguage();\n return html`\n <temba-tabs\n embedded\n focusedname\n index=\"0\"\n @temba-context-changed=${this.handleTabChanged}\n refresh=\"${(this.currentAttachments || []).length}|${this.index}|${this\n .currentQuickReplies.length}|${showOptins}|${this\n .currentOptin}|${showTemplates}|${this.currentTemplate}\"\n >\n <temba-tab\n name=\"Reply\"\n icon=\"message\"\n selectionBackground=\"#fff\"\n ></temba-tab>\n ${this.attachments\n ? html`<temba-tab\n name=\"Attachments\"\n icon=\"attachment\"\n selectionBackground=\"#fff\"\n .count=${(this.currentAttachments || []).length}\n >\n <div class=\"items attachments\">\n <temba-media-picker\n accept=${this.accept}\n max=${this.maxAttachments}\n attachments=${JSON.stringify(this.currentAttachments || [])}\n @change=${this.handleAttachmentsChanged.bind(this)}\n ></temba-media-picker>\n </div>\n </temba-tab>`\n : null}\n ${this.quickReplies\n ? html`<temba-tab\n name=\"Quick Replies\"\n icon=\"quick_replies\"\n selectionBackground=\"#fff\"\n .count=${this.currentQuickReplies.length}\n >\n <temba-select\n class=\"quick-replies\"\n @change=${this.handleQuickReplyChange}\n .values=${this.currentQuickReplies}\n class=\"quick-replies\"\n tags\n multi\n searchable\n expressions\n placeholder=\"Add Quick Reply\"\n ></temba-select>\n </temba-tab>`\n : null}\n ${showOptins\n ? html`<temba-tab\n name=\"Opt-in\"\n icon=\"channel_fba\"\n selectionBackground=\"#fff\"\n ?hidden=${!showOptins}\n ?checked=${this.currentOptin.length > 0}\n >\n <temba-select\n @change=${this.handleOptInChange}\n .values=${this.currentOptin}\n endpoint=\"${this.optinEndpoint}\"\n class=\"optins\"\n searchable\n clearable\n placeholder=\"Select an opt-in to use for Facebook (optional)\"\n ></temba-select>\n </temba-tab>`\n : null}\n ${showTemplates\n ? html`<temba-tab\n name=\"Template\"\n icon=\"channel_wa\"\n selectionBackground=\"#fff\"\n ?alert=${this.errors &&\n this.errors.find((error) => error.includes('template'))}\n ?hidden=${!showTemplates}\n ?checked=${this.currentTemplate}\n >\n <temba-template-editor\n class=\"templates\"\n @temba-context-changed=${this.handleTemplateChanged}\n @temba-content-changed=${this.handleTemplateVariablesChanged}\n template=${this.template}\n variables=${JSON.stringify(this.variables)}\n url=${this.templateEndpoint}\n lang=${this.currentLanguage}\n >\n </temba-template-editor>\n </temba-tab>`\n : null}\n\n <!--temba-tab\n name=\"Note\"\n icon=\"notes\"\n activityColor=\"#ffbd00\"\n selectionBackground=\"#fff9c2\"\n borderColor=\"#ebdf6f\"\n ></temba-tab-->\n\n ${this.shortcuts\n ? html`<temba-tab\n name=\"Shortcuts\"\n icon=\"shortcut\"\n selectionBackground=\"#fff\"\n >\n <div class=\"shortcut-wrapper\">\n <temba-shortcuts\n @temba-selection=${this.handleShortcutSelection}\n ></temba-shortcuts>\n </div>\n </temba-tab>`\n : null}\n\n <div slot=\"tab-right\" class=\"top-right\">\n ${this.counter ? this.getCounter() : null}\n </div>\n\n <div\n slot=\"pane-bottom\"\n class=\"pane-bottom ${this.hasPendingText ? 'pending' : ''}\"\n >\n <temba-completion\n class=\"chatbox\"\n .value=${this.initialText}\n gsm\n textarea\n ?disableCompletion=${!this.completion}\n ?autogrow=${this.autogrow}\n maxlength=${this.maxLength}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleKeyDown}\n placeholder=\"Write something here\"\n >\n </temba-completion>\n </div>\n </temba-tabs>\n `;\n }\n\n private getCounter(): TemplateResult {\n return html`<temba-charcount\n .text=\"${this.currentText}\"\n ></temba-charcount>`;\n }\n}\n"]}
1
+ {"version":3,"file":"Compose.js","sourceRoot":"","sources":["../../../src/compose/Compose.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';\nimport { DEFAULT_MEDIA_ENDPOINT, getClasses } from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { MediaPicker } from '../mediapicker/MediaPicker';\nimport { Tab } from '../tabpane/Tab';\nimport { TextInput } from '../textinput/TextInput';\nimport { ShortcutList } from '../list/ShortcutList';\n\nexport interface ComposeValue {\n text: string;\n attachments: { uuid: string }[];\n quick_replies: string[];\n optin: string;\n template: string;\n variables: string[];\n}\n\nexport class Compose extends FormElement {\n static get styles() {\n return css`\n :host {\n overflow: hidden;\n border-top-right-radius: var(--curvature);\n border-top-left-radius: var(--curvature);\n }\n\n .active-template .chatbox {\n display: none;\n }\n\n .active-template .actions {\n border: none;\n }\n\n .container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n overflow: hidden;\n border-radius: var(--compose-curvature, var(--curvature-widget));\n background: var(--color-widget-bg);\n border: var(--compose-border, 1px solid var(--color-widget-border));\n transition: all ease-in-out var(--transition-speed);\n box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n caret-color: var(--input-caret);\n --color-widget-bg-focused: transparent;\n --color-widget-bg: transparent;\n }\n\n .chatbox {\n --color-widget-border: none;\n --curvature-widget: var(\n --compose-curvature,\n var(--curvature) var(--curvature) 0px 0px\n );\n\n --widget-box-shadow: none;\n display: block;\n flex-grow: 1;\n --widget-box-shadow-focused: none;\n --temba-textinput-padding: 1em 1em;\n }\n\n .actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0em;\n background: #f9f9f9;\n }\n\n .actions-right {\n display: flex;\n align-items: center;\n }\n\n temba-charcount {\n margin-right: 5px;\n overflow: hidden;\n --temba-charcount-counts-margin-top: 0px;\n --temba-charcount-summary-margin-top: 0px;\n --temba-charcount-summary-position: fixed;\n --temba-charcount-summary-right: 105px;\n --temba-charcount-summary-bottom: 105px;\n }\n\n .send-error {\n color: rgba(250, 0, 0, 0.75);\n font-size: var(--help-text-size);\n padding: 0.5em;\n }\n\n .language {\n margin-bottom: 0.6em;\n display: block;\n }\n\n .top-right {\n align-items: center;\n display: flex;\n }\n\n .gutter {\n align-items: center;\n display: flex;\n margin: 0.5em;\n }\n\n temba-tabs {\n --focused-tab-color: #f4f4f4;\n min-height: var(--compose-min-height, 13.5em);\n }\n\n .quick-replies {\n margin: 0.8em;\n }\n\n .optins {\n margin: 0.8em;\n }\n\n .templates {\n margin: 0.8em;\n }\n\n .attachments {\n min-height: 5em;\n padding: 0.2em;\n align-items: center;\n display: flex;\n background: #f9f9f9;\n border-radius: var(--curvature);\n margin: 0.6em;\n margin-bottom: 0em;\n }\n\n .pane-bottom {\n border: 0px solid red;\n --color-placeholder: rgba(0, 0, 0, 0.2);\n flex-grow: 99;\n }\n\n .shortcut-wrapper {\n max-height: var(--shortcuts-height, 12em);\n display: flex;\n flex-direction: row;\n align-items: stretch;\n --options-block-shadow: none;\n --curvature-widget: 0px;\n --color-options-bg: #fff;\n border-bottom: 1px solid var(--color-widget-border);\n }\n\n temba-shortcuts {\n flex-grow: 1;\n }\n\n .quick-replies {\n background: #f9f9f9;\n }\n `;\n }\n\n @property({ type: Number })\n index = 1;\n\n @property({ type: Number })\n maxAttachments = 3;\n\n @property({ type: Number })\n maxLength = 640;\n\n @property({ type: Boolean })\n completion: boolean;\n\n @property({ type: Boolean })\n attachments: boolean;\n\n @property({ type: Boolean })\n quickReplies: boolean;\n\n @property({ type: Boolean })\n optIns: boolean;\n\n @property({ type: Boolean })\n templates: boolean;\n\n @property({ type: Boolean })\n counter: boolean;\n\n @property({ type: Boolean })\n autogrow: boolean;\n\n @property({ type: Boolean })\n shortcuts: boolean;\n\n @property({ type: String })\n currentText = '';\n\n @property({ type: String })\n initialText = '';\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n @property({ type: Array })\n languages: Language[] = [];\n\n @property({ type: Array })\n currentAttachments: Attachment[] = [];\n\n @property({ type: Array })\n currentQuickReplies: { name: string; value: string }[] = [];\n\n @property({ type: Array })\n currentOptin: { name: string; uuid: string }[] = [];\n\n @property({ type: Array })\n variables: string[] = [];\n\n @property({ type: String })\n template: string;\n\n @property({ type: Object })\n currentTemplate: { name: string; uuid: string };\n\n // locale for the template\n @property({ type: String })\n locale: string;\n\n @property({ type: String })\n optinEndpoint = '/api/v2/optins.json';\n\n @property({ type: String })\n templateEndpoint = '/api/internal/templates.json';\n\n @property({ type: Boolean, attribute: false })\n empty = true;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: Object })\n langValues: {\n [lang: string]: {\n text: string;\n attachments: Attachment[];\n quick_replies: string[];\n optin?: { name: string; uuid: string };\n template?: string;\n variables?: string[];\n locale?: string;\n };\n } = {};\n\n @property({ type: String })\n currentLanguage = 'und';\n\n @property({ type: Object })\n currentTab: Tab;\n\n @property({ type: Boolean })\n hasPendingText = false;\n\n @property({ type: Object })\n activeShortcut: Shortcut;\n\n public constructor() {\n super();\n }\n\n private isBaseLanguage(): boolean {\n return (\n this.currentLanguage == 'und' ||\n this.currentLanguage == this.languages[0].iso\n );\n }\n\n private handleTabChanged() {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n this.currentTab = tabs.getCurrentTab();\n if (this.currentTab && this.currentTab.name === 'Shortcuts') {\n const shortcuts = this.shadowRoot.querySelector(\n 'temba-shortcuts'\n ) as ShortcutList;\n shortcuts.filter = '';\n }\n this.setFocusOnChatbox();\n }\n\n public firstUpdated(changes: Map<string, any>): void {\n super.firstUpdated(changes);\n\n if (changes.has('languages') && this.languages.length > 0) {\n this.currentLanguage = this.languages[0].iso;\n }\n\n if (changes.has('value')) {\n this.langValues = this.getDeserializedValue() || {};\n this.variables = this.langValues[this.currentLanguage]?.variables || [];\n this.template = this.langValues[this.currentLanguage]?.template || null;\n }\n this.setFocusOnChatbox();\n }\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n\n if (changes.has('currentLanguage') && this.langValues) {\n let langValue = {\n text: '',\n attachments: [],\n quick_replies: []\n };\n\n if (this.currentLanguage in this.langValues) {\n langValue = this.langValues[this.currentLanguage];\n }\n\n this.currentText = langValue.text;\n this.initialText = langValue.text;\n this.currentAttachments = langValue.attachments;\n this.currentQuickReplies = (langValue.quick_replies || []).map(\n (value) => {\n return { name: value, value };\n }\n );\n this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];\n this.setFocusOnChatbox();\n\n // TODO: this feels like it shouldn't be needed\n const chatbox = this.shadowRoot.querySelector('.chatbox') as any;\n if (chatbox) {\n chatbox.value = this.initialText;\n }\n this.resetTabs();\n this.requestUpdate('currentAttachments');\n }\n\n if (\n (this.langValues &&\n (changes.has('currentText') ||\n changes.has('currentAttachments') ||\n changes.has('currentQuickReplies'))) ||\n changes.has('currentOptin') ||\n changes.has('currentTemplate') ||\n changes.has('variables')\n ) {\n this.checkIfEmpty();\n\n const trimmed = this.currentText ? this.currentText.trim() : '';\n if (\n trimmed ||\n (this.currentAttachments || []).length > 0 ||\n this.currentQuickReplies.length > 0 ||\n this.variables.length > 0\n ) {\n this.langValues[this.currentLanguage] = {\n text: trimmed,\n attachments: this.currentAttachments,\n quick_replies: this.currentQuickReplies.map((option) => option.value),\n optin: this.currentOptin.length > 0 ? this.currentOptin[0] : null,\n template: this.currentTemplate ? this.currentTemplate.uuid : null,\n variables: this.variables,\n locale: this.locale\n };\n } else {\n delete this.langValues[this.currentLanguage];\n }\n this.fireCustomEvent(CustomEventType.ContentChanged, this.langValues);\n this.requestUpdate('langValues');\n this.setValue(this.langValues);\n }\n }\n\n private handleAttachmentsChanged(event: CustomEvent) {\n const media = event.target as MediaPicker;\n this.currentAttachments = media.attachments;\n this.requestUpdate();\n }\n\n private setFocusOnChatbox(): void {\n const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n if (completion) {\n window.setTimeout(() => {\n completion.focus();\n }, 0);\n }\n }\n\n public reset(): void {\n const completion = this.shadowRoot.querySelector('.chatbox') as Completion;\n if (completion) {\n completion.textInputElement.value = '';\n completion.value = '';\n this.initialText = '';\n this.currentText = '';\n this.currentQuickReplies = [];\n this.currentAttachments = [];\n this.resetTabs();\n }\n }\n\n private handleQuickReplyChange() {\n this.requestUpdate('currentQuickReplies');\n }\n\n private handleOptInChange(event: InputEvent) {\n this.currentOptin = (event.target as any).values;\n this.requestUpdate('optIn');\n }\n\n private handleChatboxChange(evt: Event) {\n const chatbox = evt.target as Completion;\n const inputElement = chatbox.getTextInput().inputElement;\n\n this.currentText = inputElement.value;\n this.hasPendingText = inputElement.value.length > 0;\n\n // is the last character a / and is it at the beginning of the line\n const cursor = inputElement.selectionStart;\n const text = inputElement.value;\n const lineStart = text.lastIndexOf('\\n', cursor - 1) + 1;\n const line = text.substring(lineStart, cursor);\n\n if (line.startsWith('/')) {\n // switch to the shortcuts tab\n if (this.currentTab.name !== 'Shortcuts') {\n this.getTabs().focusTab('Shortcuts');\n }\n const shortcuts = this.shadowRoot.querySelector(\n 'temba-shortcuts'\n ) as ShortcutList;\n shortcuts.filter = line.substring(1);\n }\n }\n\n public checkIfEmpty() {\n const chatboxEmpty = this.currentText.trim().length === 0;\n const attachmentsEmpty = this.currentAttachments.length === 0;\n if (this.attachments) {\n this.empty = chatboxEmpty && attachmentsEmpty;\n } else {\n this.empty = chatboxEmpty;\n }\n }\n\n private getCurrentLine(): { text: string; index: number } {\n const chatbox = this.shadowRoot.querySelector('.chatbox') as Completion;\n\n const cursor = chatbox.getTextInput().inputElement.selectionStart - 1;\n const text = chatbox.value;\n const start = text.substring(0, cursor).lastIndexOf('\\n') + 1;\n\n let end = chatbox.value.indexOf('\\n', start);\n if (end === -1) {\n end = chatbox.value.length;\n }\n\n return { text: chatbox.value.substring(start, end), index: start };\n }\n\n private handleKeyDown(evt: KeyboardEvent) {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n const num = parseInt(evt.key);\n if (\n !Number.isNaN(num) &&\n num > 0 &&\n evt.ctrlKey &&\n evt.metaKey &&\n num <= tabs.tabs.length\n ) {\n tabs.index = num - 1;\n }\n\n if (evt.key === 'Backspace') {\n const line = this.getCurrentLine();\n const text = line.text;\n if (text === '/') {\n tabs.focusTab('Reply');\n }\n }\n\n if (this.currentTab.name === 'Shortcuts') {\n if (evt.key === 'Enter' && !evt.shiftKey) {\n return;\n }\n }\n\n if (evt.key === 'Enter') {\n if (!evt.shiftKey) {\n evt.preventDefault();\n if (this.completion) {\n const chat = evt.target as Completion;\n if (!chat.hasVisibleOptions()) {\n this.triggerSend();\n }\n } else {\n this.triggerSend();\n }\n }\n }\n }\n\n public triggerSend() {\n if (!this.empty) {\n this.fireCustomEvent(CustomEventType.Submitted, {\n langValues: this.langValues\n });\n }\n }\n\n private handleLanguageChange(evt: Event) {\n const select = evt.target as Select;\n this.currentLanguage = select.values[0].iso;\n }\n\n public resetTabs() {\n this.getTabs().focusTab('Reply');\n }\n\n public getTabs(): TabPane {\n return this.shadowRoot.querySelector('temba-tabs') as TabPane;\n }\n\n public render(): TemplateResult {\n return html`\n <temba-field\n name=${this.name}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .value=${this.value}\n class=${getClasses({\n 'active-template':\n !!this.currentTemplate &&\n this.currentTab &&\n this.currentTab.name === 'Template'\n })}\n >\n ${this.languages.length > 1\n ? html`<temba-select\n @change=${this.handleLanguageChange}\n class=\"language\"\n name=\"language\"\n .staticOptions=${this.languages}\n valueKey=\"iso\"\n >\n </temba-select>`\n : null}\n <div class=\"container\">\n <div class=\"items actions\">${this.getActions()}</div>\n </div>\n </temba-field>\n `;\n }\n\n private handleTemplateChanged(evt: CustomEvent) {\n this.currentTemplate = evt.detail.template;\n this.locale = evt.detail.translation?.locale;\n this.requestUpdate();\n }\n\n private handleTemplateVariablesChanged(evt: CustomEvent) {\n this.variables = [...evt.detail.variables];\n }\n\n public getTextInput(): TextInput {\n return (\n this.shadowRoot.querySelector('.chatbox') as Completion\n ).getTextInput();\n }\n\n public handleShortcutSelection(event: CustomEvent) {\n this.activeShortcut = event.detail.selected;\n const line = this.getCurrentLine();\n const chatbox = this.getTextInput();\n\n const originalText = chatbox.value;\n\n if (line.text.startsWith('/')) {\n const newText =\n originalText.substring(0, line.index) +\n this.activeShortcut.text +\n originalText.substring(line.index + line.text.length);\n\n chatbox.updateValue(newText);\n\n // set our cursor to the end of the shortcut\n const cursor = line.index + this.activeShortcut.text.length;\n chatbox.inputElement.setSelectionRange(cursor, cursor);\n } else {\n // add the text where the cursor is\n const cursor = chatbox.inputElement.selectionStart;\n const newText =\n originalText.substring(0, cursor) +\n this.activeShortcut.text +\n originalText.substring(cursor);\n chatbox.updateValue(newText);\n\n // set the cursor to the end of the shortcut text\n const newCursor = cursor + this.activeShortcut.text.length;\n chatbox.inputElement.setSelectionRange(newCursor, newCursor);\n }\n\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');\n }\n\n private getActions(): TemplateResult {\n const showOptins = this.optIns && this.isBaseLanguage();\n const showTemplates = this.templates && this.isBaseLanguage();\n return html`\n <temba-tabs\n embedded\n focusedname\n @temba-context-changed=${this.handleTabChanged}\n refresh=\"${(this.currentAttachments || []).length}|${this.index}|${this\n .currentQuickReplies.length}|${showOptins}|${this\n .currentOptin}|${showTemplates}|${this.currentTemplate}\"\n >\n <temba-tab\n name=\"Reply\"\n icon=\"message\"\n selectionBackground=\"#fff\"\n ></temba-tab>\n ${this.attachments\n ? html`<temba-tab\n name=\"Attachments\"\n icon=\"attachment\"\n selectionBackground=\"#fff\"\n .count=${(this.currentAttachments || []).length}\n >\n <div class=\"items attachments\">\n <temba-media-picker\n accept=${this.accept}\n max=${this.maxAttachments}\n attachments=${JSON.stringify(this.currentAttachments || [])}\n @change=${this.handleAttachmentsChanged.bind(this)}\n ></temba-media-picker>\n </div>\n </temba-tab>`\n : null}\n ${this.quickReplies\n ? html`<temba-tab\n name=\"Quick Replies\"\n icon=\"quick_replies\"\n selectionBackground=\"#fff\"\n .count=${this.currentQuickReplies.length}\n >\n <temba-select\n class=\"quick-replies\"\n @change=${this.handleQuickReplyChange}\n .values=${this.currentQuickReplies}\n class=\"quick-replies\"\n tags\n multi\n searchable\n expressions\n placeholder=\"Add Quick Reply\"\n ></temba-select>\n </temba-tab>`\n : null}\n ${showOptins\n ? html`<temba-tab\n name=\"Opt-in\"\n icon=\"channel_fba\"\n selectionBackground=\"#fff\"\n ?hidden=${!showOptins}\n ?checked=${this.currentOptin.length > 0}\n >\n <temba-select\n @change=${this.handleOptInChange}\n .values=${this.currentOptin}\n endpoint=\"${this.optinEndpoint}\"\n class=\"optins\"\n searchable\n clearable\n placeholder=\"Select an opt-in to use for Facebook (optional)\"\n ></temba-select>\n </temba-tab>`\n : null}\n ${showTemplates\n ? html`<temba-tab\n name=\"Template\"\n icon=\"channel_wa\"\n selectionBackground=\"#fff\"\n ?alert=${this.errors &&\n this.errors.find((error) => error.includes('template'))}\n ?hidden=${!showTemplates}\n ?checked=${this.currentTemplate}\n >\n <temba-template-editor\n class=\"templates\"\n @temba-context-changed=${this.handleTemplateChanged}\n @temba-content-changed=${this.handleTemplateVariablesChanged}\n template=${this.template}\n variables=${JSON.stringify(this.variables)}\n url=${this.templateEndpoint}\n lang=${this.currentLanguage}\n >\n </temba-template-editor>\n </temba-tab>`\n : null}\n\n <!--temba-tab\n name=\"Note\"\n icon=\"notes\"\n activityColor=\"#ffbd00\"\n selectionBackground=\"#fff9c2\"\n borderColor=\"#ebdf6f\"\n ></temba-tab-->\n\n ${this.shortcuts\n ? html`<temba-tab\n name=\"Shortcuts\"\n icon=\"shortcut\"\n selectionBackground=\"#fff\"\n >\n <div class=\"shortcut-wrapper\">\n <temba-shortcuts\n @temba-selection=${this.handleShortcutSelection}\n ></temba-shortcuts>\n </div>\n </temba-tab>`\n : null}\n\n <div slot=\"tab-right\" class=\"top-right\">\n ${this.counter ? this.getCounter() : null}\n </div>\n\n <div\n slot=\"pane-bottom\"\n class=\"pane-bottom ${this.hasPendingText ? 'pending' : ''}\"\n >\n <temba-completion\n class=\"chatbox\"\n .value=${this.initialText}\n gsm\n textarea\n ?disableCompletion=${!this.completion}\n ?autogrow=${this.autogrow}\n maxlength=${this.maxLength}\n @change=${this.handleChatboxChange}\n @keydown=${this.handleKeyDown}\n placeholder=\"Write something here\"\n >\n </temba-completion>\n </div>\n </temba-tabs>\n `;\n }\n\n private getCounter(): TemplateResult {\n return html`<temba-charcount\n .text=\"${this.currentText}\"\n ></temba-charcount>`;\n }\n}\n"]}
package/out-tsc/src/tabpane/TabPane.js CHANGED
@@ -70,7 +70,7 @@ export class TabPane extends RapidElement {
70
70
 
71
71
  .tab .name {
72
72
  margin-left: 0.4em;
73
- max-width: 80px;
73
+ max-width: 200px;
74
74
  overflow: hidden;
75
75
  transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
76
76
  white-space: nowrap;
@@ -289,6 +289,7 @@ export class TabPane extends RapidElement {
289
289
  }
290
290
  }
291
291
  this.tabs = tabs;
292
+ this.index = 0;
292
293
  }
293
294
  firstUpdated(changes) {
294
295
  super.firstUpdated(changes);
@@ -296,11 +297,20 @@ export class TabPane extends RapidElement {
296
297
  }
297
298
  updated(changedProperties) {
298
299
  super.updated(changedProperties);
299
- if (changedProperties.has('index') || changedProperties.has('tabs')) {
300
+ if (changedProperties.has('tabs')) {
300
301
  this.tabs.forEach((tab, index) => {
301
302
  tab.selected = index == this.index;
302
303
  });
303
- this.fireEvent(CustomEventType.ContextChanged);
304
+ }
305
+ if (changedProperties.has('index')) {
306
+ if (this.tabs.length >= 0) {
307
+ if (this.index !== changedProperties.get('index')) {
308
+ this.tabs.forEach((tab, index) => {
309
+ tab.selected = index == this.index;
310
+ });
311
+ this.fireEvent(CustomEventType.ContextChanged);
312
+ }
313
+ }
304
314
  }
305
315
  // if our current tab is hidden, select the first visible one
306
316
  if (this.index > this.tabs.length) {
package/out-tsc/src/tabpane/TabPane.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex-grow: 1;\n }\n\n .tabs {\n display: flex;\n align-items: stretch;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 0.7em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n font-size: 1.1em;\n align-items: center;\n border: 1px inset transparent;\n border-bottom: 0px;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms linear;\n }\n\n .focusedname .tab .name {\n transition: all 0s linear !important;\n }\n\n .focusedname .tab.selected .name {\n transition: all 200ms linear !important;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 80px;\n overflow: hidden;\n transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .focusedname .tab.selected {\n }\n\n .focusedname .tab .name {\n max-width: 0px;\n margin: 0;\n transition: max-width 200ms linear, margin 200ms linear;\n }\n\n .focusedname .tab.selected .name {\n margin-left: 0.4em;\n max-width: 200px;\n }\n\n .tab {\n transform: scale(0.9) translateY(0em);\n --icon-color: rgba(0, 0, 0, 0.5);\n color: rgba(0, 0, 0, 0.5);\n }\n\n .tab.selected {\n }\n\n .tab.selected,\n .tab.selected:hover {\n cursor: default;\n box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);\n\n background: var(--focused-tab-color, #fff);\n transform: scale(1) translateY(1px);\n --icon-color: #666;\n color: #666;\n border: 1px inset rgba(0, 0, 0, 0.15);\n border-bottom: 0px;\n }\n\n .embedded .tab.selected {\n }\n\n .tab.selected .dot {\n display: none;\n }\n\n .bottom .tab.selected {\n }\n\n .unselect .tab.selected {\n cursor: pointer;\n }\n\n .unselect .tab.selected:hover {\n background: var(--unselect-tab-color, #eee);\n }\n\n .tab:hover {\n --icon-color: #666;\n color: #666;\n background: rgba(0, 0, 0, 0.02);\n }\n\n .tab.dirty {\n font-weight: 500;\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: var(--focused-tab-color, #fff);\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n overflow: hidden;\n\n box-shadow: var(\n --tabs-shadow,\n rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,\n rgba(0, 0, 0, 0.03) 0px 1px 2px 0px\n );\n min-height: 0;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.1);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.7em;\n font-weight: 500;\n min-width: 1.5em;\n text-align: center;\n }\n\n .dot {\n height: 0.5em;\n width: 0.5em;\n margin-left: 0.2em;\n background: var(--color-primary-dark);\n border-radius: 99px;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n\n .alert {\n color: var(--color-alert);\n --icon-color: var(--color-alert);\n }\n\n .bottom.tabs .tab {\n border-radius: 0em;\n }\n\n .bottom.pane {\n border-radius: 0em;\n }\n\n .bottom.pane.first {\n border-bottom-left-radius: 0px;\n }\n\n .bottom .tab.first {\n border-bottom-left-radius: var(--curvature);\n }\n\n .embedded.pane {\n box-shadow: none;\n margin: 0;\n border-left: none !important;\n border-right: none !important;\n border-bottom: none !important;\n }\n\n .embedded.tabs {\n padding-top: 0em;\n }\n\n .embedded .tab {\n border-bottom: none !important;\n border-radius: 0em;\n border-top: none !important;\n }\n\n .embedded .tab.first {\n margin-left: 0em;\n border-top: none !important;\n border-left: none;\n }\n\n .embedded.tabs .tab.selected {\n box-shadow: none !important;\n }\n\n .embedded.pane {\n // padding: 0.3em;\n }\n\n .check {\n margin-left: 0.4em;\n }\n\n .pane {\n display: flex;\n }\n `;\n }\n\n @property({ type: Boolean })\n embedded = false;\n\n @property({ type: Boolean })\n collapses = false;\n\n // are the tabs on the bottom of the pane?\n @property({ type: Boolean })\n bottom = false;\n\n // do we allow unselecting the current tab\n @property({ type: Boolean })\n unselect = false;\n\n // Only shows the name if the tab is focused\n @property({ type: Boolean })\n focusedName = false;\n\n @property({ type: Number })\n index = -1;\n\n @property({ type: String })\n refresh = '';\n\n @property({ type: Array, attribute: false })\n tabs: Tab[] = [];\n\n private handleTabClick(event: MouseEvent): void {\n const newIndex = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n\n if (this.unselect && this.index === newIndex) {\n this.index = -1;\n } else {\n this.index = newIndex;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.requestUpdate('index');\n }\n\n public handleSlotChange() {\n const tabs: Tab[] = [];\n for (const t of this.children) {\n if (t.tagName === 'TEMBA-TAB') {\n const tab = t as Tab;\n tabs.push(tab);\n }\n }\n this.tabs = tabs;\n }\n\n public firstUpdated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(changes);\n this.shadowRoot.addEventListener(\n 'slotchange',\n this.handleSlotChange.bind(this)\n );\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('index') || changedProperties.has('tabs')) {\n this.tabs.forEach((tab, index) => {\n tab.selected = index == this.index;\n });\n this.fireEvent(CustomEventType.ContextChanged);\n }\n\n // if our current tab is hidden, select the first visible one\n if (this.index > this.tabs.length) {\n const tab = this.tabs[this.index];\n if (tab && tab.hidden) {\n for (let i = 0; i < this.tabs.length; i++) {\n const other = this.tabs[i];\n if (other && !other.hidden) {\n this.index = i;\n return;\n }\n }\n }\n }\n }\n\n public focusTab(name: string): Tab {\n const index = this.tabs.findIndex((tab) => tab.name === name);\n if (index >= 0) {\n this.index = index;\n return this.getTab(index);\n }\n }\n\n public setTabDetails(\n index: number,\n details: { count: number; hidden: boolean }\n ) {\n if (index < this.tabs.length) {\n const tab = this.tabs[index];\n tab.count = details.count;\n tab.hidden = details.hidden;\n this.requestUpdate();\n } else {\n // not ready yet, set the tab details later\n setTimeout(() => {\n this.setTabDetails(index, details);\n }, 100);\n }\n }\n\n public getCurrentTab(): Tab {\n return this.tabs[this.index];\n }\n\n public getTab(index: number): Tab {\n return this.tabs[index];\n }\n\n public handleTabContentChanged() {\n this.requestUpdate();\n }\n\n public handleTabDetailsChanged() {\n this.requestUpdate();\n }\n\n public render(): TemplateResult {\n const activeTab = this.tabs[this.index];\n return html`\n ${this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n\n <div\n class=\"tabs ${getClasses({\n tabs: true,\n bottom: this.bottom,\n collapses: this.collapses,\n embedded: this.embedded,\n focusedname: this.focusedName,\n unselect: this.unselect\n })}\"\n >\n ${this.tabs.map(\n (tab, index) => html`\n <div\n @click=${this.handleTabClick}\n data-index=${index}\n class=\"${getClasses({\n tab: true,\n first: index == 0,\n selected: index == this.index,\n hidden: tab.hidden,\n notify: tab.notify,\n alert: tab.alert,\n dirty: tab.dirty\n })}\"\n style=\"${tab.selectionColor && index == this.index\n ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n : ''} ${tab.selectionBackground && index == this.index\n ? `background-color:${tab.selectionBackground};`\n : ''}\"\n >\n ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n <div class=\"name\">${tab.name} ${tab.dirty ? ` *` : ``}</div>\n ${tab.hasBadge()\n ? html`\n <div class=\"badge\">\n ${tab.count > 0 && !tab.activity\n ? html`<div class=\"count\">\n ${tab.activity ? '' : tab.count.toLocaleString()}\n </div>`\n : null}\n ${tab.activity && tab.count > 0 && !tab.dirty\n ? html`<div\n class=\"dot\"\n style=\"background:${tab.activityColor}\"\n ></div>`\n : null}\n </div>\n `\n : null}\n ${tab.checked && !tab.alert\n ? html`<temba-icon class=\"check\" name=\"check\"></temba-icon>`\n : null}\n </div>\n `\n )}\n\n <div style=\"flex-grow:1\"></div>\n <div style=\"display:flex; align-items:center\">\n <slot name=\"tab-right\"></slot>\n </div>\n </div>\n ${!this.bottom\n ? html`<div\n @temba-details-changed=${this.handleTabDetailsChanged}\n style=\"${activeTab?.borderColor\n ? `border: 1px solid ${activeTab?.borderColor};`\n : ''} ${activeTab?.selectionBackground\n ? `background:${activeTab?.selectionBackground};`\n : ``}\"\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom\n })}\"\n >\n <slot></slot>\n <slot name=\"pane-bottom\"></slot>\n </div>`\n : null}\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex-grow: 1;\n }\n\n .tabs {\n display: flex;\n align-items: stretch;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 0.7em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n font-size: 1.1em;\n align-items: center;\n border: 1px inset transparent;\n border-bottom: 0px;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms linear;\n }\n\n .focusedname .tab .name {\n transition: all 0s linear !important;\n }\n\n .focusedname .tab.selected .name {\n transition: all 200ms linear !important;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 200px;\n overflow: hidden;\n transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .focusedname .tab.selected {\n }\n\n .focusedname .tab .name {\n max-width: 0px;\n margin: 0;\n transition: max-width 200ms linear, margin 200ms linear;\n }\n\n .focusedname .tab.selected .name {\n margin-left: 0.4em;\n max-width: 200px;\n }\n\n .tab {\n transform: scale(0.9) translateY(0em);\n --icon-color: rgba(0, 0, 0, 0.5);\n color: rgba(0, 0, 0, 0.5);\n }\n\n .tab.selected {\n }\n\n .tab.selected,\n .tab.selected:hover {\n cursor: default;\n box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);\n\n background: var(--focused-tab-color, #fff);\n transform: scale(1) translateY(1px);\n --icon-color: #666;\n color: #666;\n border: 1px inset rgba(0, 0, 0, 0.15);\n border-bottom: 0px;\n }\n\n .embedded .tab.selected {\n }\n\n .tab.selected .dot {\n display: none;\n }\n\n .bottom .tab.selected {\n }\n\n .unselect .tab.selected {\n cursor: pointer;\n }\n\n .unselect .tab.selected:hover {\n background: var(--unselect-tab-color, #eee);\n }\n\n .tab:hover {\n --icon-color: #666;\n color: #666;\n background: rgba(0, 0, 0, 0.02);\n }\n\n .tab.dirty {\n font-weight: 500;\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: var(--focused-tab-color, #fff);\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n overflow: hidden;\n\n box-shadow: var(\n --tabs-shadow,\n rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,\n rgba(0, 0, 0, 0.03) 0px 1px 2px 0px\n );\n min-height: 0;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.1);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.7em;\n font-weight: 500;\n min-width: 1.5em;\n text-align: center;\n }\n\n .dot {\n height: 0.5em;\n width: 0.5em;\n margin-left: 0.2em;\n background: var(--color-primary-dark);\n border-radius: 99px;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n\n .alert {\n color: var(--color-alert);\n --icon-color: var(--color-alert);\n }\n\n .bottom.tabs .tab {\n border-radius: 0em;\n }\n\n .bottom.pane {\n border-radius: 0em;\n }\n\n .bottom.pane.first {\n border-bottom-left-radius: 0px;\n }\n\n .bottom .tab.first {\n border-bottom-left-radius: var(--curvature);\n }\n\n .embedded.pane {\n box-shadow: none;\n margin: 0;\n border-left: none !important;\n border-right: none !important;\n border-bottom: none !important;\n }\n\n .embedded.tabs {\n padding-top: 0em;\n }\n\n .embedded .tab {\n border-bottom: none !important;\n border-radius: 0em;\n border-top: none !important;\n }\n\n .embedded .tab.first {\n margin-left: 0em;\n border-top: none !important;\n border-left: none;\n }\n\n .embedded.tabs .tab.selected {\n box-shadow: none !important;\n }\n\n .embedded.pane {\n // padding: 0.3em;\n }\n\n .check {\n margin-left: 0.4em;\n }\n\n .pane {\n display: flex;\n }\n `;\n }\n\n @property({ type: Boolean })\n embedded = false;\n\n @property({ type: Boolean })\n collapses = false;\n\n // are the tabs on the bottom of the pane?\n @property({ type: Boolean })\n bottom = false;\n\n // do we allow unselecting the current tab\n @property({ type: Boolean })\n unselect = false;\n\n // Only shows the name if the tab is focused\n @property({ type: Boolean })\n focusedName = false;\n\n @property({ type: Number })\n index = -1;\n\n @property({ type: String })\n refresh = '';\n\n @property({ type: Array, attribute: false })\n tabs: Tab[] = [];\n\n private handleTabClick(event: MouseEvent): void {\n const newIndex = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n\n if (this.unselect && this.index === newIndex) {\n this.index = -1;\n } else {\n this.index = newIndex;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.requestUpdate('index');\n }\n\n public handleSlotChange() {\n const tabs: Tab[] = [];\n for (const t of this.children) {\n if (t.tagName === 'TEMBA-TAB') {\n const tab = t as Tab;\n tabs.push(tab);\n }\n }\n this.tabs = tabs;\n this.index = 0;\n }\n\n public firstUpdated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(changes);\n this.shadowRoot.addEventListener(\n 'slotchange',\n this.handleSlotChange.bind(this)\n );\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('tabs')) {\n this.tabs.forEach((tab, index) => {\n tab.selected = index == this.index;\n });\n }\n\n if (changedProperties.has('index')) {\n if (this.tabs.length >= 0) {\n if (this.index !== changedProperties.get('index')) {\n this.tabs.forEach((tab, index) => {\n tab.selected = index == this.index;\n });\n this.fireEvent(CustomEventType.ContextChanged);\n }\n }\n }\n\n // if our current tab is hidden, select the first visible one\n if (this.index > this.tabs.length) {\n const tab = this.tabs[this.index];\n if (tab && tab.hidden) {\n for (let i = 0; i < this.tabs.length; i++) {\n const other = this.tabs[i];\n if (other && !other.hidden) {\n this.index = i;\n return;\n }\n }\n }\n }\n }\n\n public focusTab(name: string): Tab {\n const index = this.tabs.findIndex((tab) => tab.name === name);\n if (index >= 0) {\n this.index = index;\n return this.getTab(index);\n }\n }\n\n public setTabDetails(\n index: number,\n details: { count: number; hidden: boolean }\n ) {\n if (index < this.tabs.length) {\n const tab = this.tabs[index];\n tab.count = details.count;\n tab.hidden = details.hidden;\n this.requestUpdate();\n } else {\n // not ready yet, set the tab details later\n setTimeout(() => {\n this.setTabDetails(index, details);\n }, 100);\n }\n }\n\n public getCurrentTab(): Tab {\n return this.tabs[this.index];\n }\n\n public getTab(index: number): Tab {\n return this.tabs[index];\n }\n\n public handleTabContentChanged() {\n this.requestUpdate();\n }\n\n public handleTabDetailsChanged() {\n this.requestUpdate();\n }\n\n public render(): TemplateResult {\n const activeTab = this.tabs[this.index];\n return html`\n ${this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n\n <div\n class=\"tabs ${getClasses({\n tabs: true,\n bottom: this.bottom,\n collapses: this.collapses,\n embedded: this.embedded,\n focusedname: this.focusedName,\n unselect: this.unselect\n })}\"\n >\n ${this.tabs.map(\n (tab, index) => html`\n <div\n @click=${this.handleTabClick}\n data-index=${index}\n class=\"${getClasses({\n tab: true,\n first: index == 0,\n selected: index == this.index,\n hidden: tab.hidden,\n notify: tab.notify,\n alert: tab.alert,\n dirty: tab.dirty\n })}\"\n style=\"${tab.selectionColor && index == this.index\n ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n : ''} ${tab.selectionBackground && index == this.index\n ? `background-color:${tab.selectionBackground};`\n : ''}\"\n >\n ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n <div class=\"name\">${tab.name} ${tab.dirty ? ` *` : ``}</div>\n ${tab.hasBadge()\n ? html`\n <div class=\"badge\">\n ${tab.count > 0 && !tab.activity\n ? html`<div class=\"count\">\n ${tab.activity ? '' : tab.count.toLocaleString()}\n </div>`\n : null}\n ${tab.activity && tab.count > 0 && !tab.dirty\n ? html`<div\n class=\"dot\"\n style=\"background:${tab.activityColor}\"\n ></div>`\n : null}\n </div>\n `\n : null}\n ${tab.checked && !tab.alert\n ? html`<temba-icon class=\"check\" name=\"check\"></temba-icon>`\n : null}\n </div>\n `\n )}\n\n <div style=\"flex-grow:1\"></div>\n <div style=\"display:flex; align-items:center\">\n <slot name=\"tab-right\"></slot>\n </div>\n </div>\n ${!this.bottom\n ? html`<div\n @temba-details-changed=${this.handleTabDetailsChanged}\n style=\"${activeTab?.borderColor\n ? `border: 1px solid ${activeTab?.borderColor};`\n : ''} ${activeTab?.selectionBackground\n ? `background:${activeTab?.selectionBackground};`\n : ``}\"\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom\n })}\"\n >\n <slot></slot>\n <slot name=\"pane-bottom\"></slot>\n </div>`\n : null}\n `;\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nyaruka/temba-components",
3
- "version": "0.112.0",
3
+ "version": "0.113.0",
4
4
  "description": "Web components to support rapidpro and related projects",
5
5
  "author": "Nyaruka <code@nyaruka.coim>",
6
6
  "main": "dist/index.js",
package/src/compose/Compose.ts CHANGED
@@ -294,7 +294,6 @@ export class Compose extends FormElement {
294
294
  private handleTabChanged() {
295
295
  const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
296
296
  this.currentTab = tabs.getCurrentTab();
297
-
298
297
  if (this.currentTab && this.currentTab.name === 'Shortcuts') {
299
298
  const shortcuts = this.shadowRoot.querySelector(
300
299
  'temba-shortcuts'
@@ -441,9 +440,9 @@ export class Compose extends FormElement {
441
440
 
442
441
  if (line.startsWith('/')) {
443
442
  // switch to the shortcuts tab
444
- const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
445
- tabs.focusTab('Shortcuts');
446
-
443
+ if (this.currentTab.name !== 'Shortcuts') {
444
+ this.getTabs().focusTab('Shortcuts');
445
+ }
447
446
  const shortcuts = this.shadowRoot.querySelector(
448
447
  'temba-shortcuts'
449
448
  ) as ShortcutList;
@@ -489,19 +488,11 @@ export class Compose extends FormElement {
489
488
  tabs.index = num - 1;
490
489
  }
491
490
 
492
- // if they type / as the first character in a line, switch to the shortcut
493
- if (evt.key === '/' && this.currentTab.name !== 'Shortcuts') {
494
- const line = this.getCurrentLine();
495
- const text = line.text.trim();
496
- if (text.trim().length === 1) {
497
- evt.preventDefault();
498
- tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Shortcuts');
499
- }
500
- } else if (evt.key === 'Backspace') {
491
+ if (evt.key === 'Backspace') {
501
492
  const line = this.getCurrentLine();
502
493
  const text = line.text;
503
494
  if (text === '/') {
504
- tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');
495
+ tabs.focusTab('Reply');
505
496
  }
506
497
  }
507
498
 
@@ -540,7 +531,7 @@ export class Compose extends FormElement {
540
531
  }
541
532
 
542
533
  public resetTabs() {
543
- (this.shadowRoot.querySelector('temba-tabs') as TabPane).index = 0;
534
+ this.getTabs().focusTab('Reply');
544
535
  }
545
536
 
546
537
  public getTabs(): TabPane {
@@ -637,7 +628,6 @@ export class Compose extends FormElement {
637
628
  <temba-tabs
638
629
  embedded
639
630
  focusedname
640
- index="0"
641
631
  @temba-context-changed=${this.handleTabChanged}
642
632
  refresh="${(this.currentAttachments || []).length}|${this.index}|${this
643
633
  .currentQuickReplies.length}|${showOptins}|${this
package/src/tabpane/TabPane.ts CHANGED
@@ -57,7 +57,7 @@ export class TabPane extends RapidElement {
57
57
 
58
58
  .tab .name {
59
59
  margin-left: 0.4em;
60
- max-width: 80px;
60
+ max-width: 200px;
61
61
  overflow: hidden;
62
62
  transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;
63
63
  white-space: nowrap;
@@ -308,6 +308,7 @@ export class TabPane extends RapidElement {
308
308
  }
309
309
  }
310
310
  this.tabs = tabs;
311
+ this.index = 0;
311
312
  }
312
313
 
313
314
  public firstUpdated(
@@ -322,11 +323,22 @@ export class TabPane extends RapidElement {
322
323
 
323
324
  public updated(changedProperties: Map<string, any>) {
324
325
  super.updated(changedProperties);
325
- if (changedProperties.has('index') || changedProperties.has('tabs')) {
326
+
327
+ if (changedProperties.has('tabs')) {
326
328
  this.tabs.forEach((tab, index) => {
327
329
  tab.selected = index == this.index;
328
330
  });
329
- this.fireEvent(CustomEventType.ContextChanged);
331
+ }
332
+
333
+ if (changedProperties.has('index')) {
334
+ if (this.tabs.length >= 0) {
335
+ if (this.index !== changedProperties.get('index')) {
336
+ this.tabs.forEach((tab, index) => {
337
+ tab.selected = index == this.index;
338
+ });
339
+ this.fireEvent(CustomEventType.ContextChanged);
340
+ }
341
+ }
330
342
  }
331
343
 
332
344
  // if our current tab is hidden, select the first visible one