@nyaruka/temba-components 0.26.1 → 0.26.2

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 (38) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/demo/index.html +32 -13
  3. package/dist/4f80c187.js +4277 -0
  4. package/dist/index.js +279 -202
  5. package/dist/sw.js +1 -1
  6. package/dist/sw.js.map +1 -1
  7. package/dist/templates/components-body.html +1 -1
  8. package/dist/templates/components-head.html +1 -1
  9. package/out-tsc/src/contacts/ContactChat.js +99 -85
  10. package/out-tsc/src/contacts/ContactChat.js.map +1 -1
  11. package/out-tsc/src/contacts/ContactHistory.js +30 -36
  12. package/out-tsc/src/contacts/ContactHistory.js.map +1 -1
  13. package/out-tsc/src/contacts/events.js +61 -74
  14. package/out-tsc/src/contacts/events.js.map +1 -1
  15. package/out-tsc/src/list/TembaMenu.js +18 -13
  16. package/out-tsc/src/list/TembaMenu.js.map +1 -1
  17. package/out-tsc/src/tabpane/Tab.js +46 -0
  18. package/out-tsc/src/tabpane/Tab.js.map +1 -0
  19. package/out-tsc/src/tabpane/TabPane.js +109 -0
  20. package/out-tsc/src/tabpane/TabPane.js.map +1 -0
  21. package/out-tsc/temba-modules.js +4 -0
  22. package/out-tsc/temba-modules.js.map +1 -1
  23. package/out-tsc/test/temba-contact-history.test.js +9 -7
  24. package/out-tsc/test/temba-contact-history.test.js.map +1 -1
  25. package/package.json +1 -1
  26. package/screenshots/truth/contacts/history-expanded.png +0 -0
  27. package/screenshots/truth/contacts/history.png +0 -0
  28. package/screenshots/truth/list/menu-submenu.png +0 -0
  29. package/src/contacts/ContactChat.ts +113 -94
  30. package/src/contacts/ContactHistory.ts +57 -59
  31. package/src/contacts/events.ts +61 -75
  32. package/src/list/TembaMenu.ts +19 -14
  33. package/src/tabpane/Tab.ts +42 -0
  34. package/src/tabpane/TabPane.ts +113 -0
  35. package/temba-modules.ts +4 -0
  36. package/test/temba-contact-history.test.ts +9 -7
  37. package/test-assets/style.css +6 -0
  38. package/dist/e477aebd.js +0 -4200
package/out-tsc/src/contacts/events.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/contacts/events.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { Msg, ObjectReference, User } from '../interfaces';\nimport { getClasses, oxford, oxfordFn, oxfordNamed, timeSince } from '../utils';\nimport { getDisplayName } from './helpers';\n\nexport const getEventStyles = () => {\n return css`\n .grouping {\n padding: 0 2em;\n margin: 0 -1em;\n }\n\n .grouping.verbose {\n background: #f9f9f9;\n max-height: 1px;\n border-top: 1px solid #f9f9f9;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 1.5em;\n color: #efefef;\n --color-link-primary: rgba(38, 166, 230, 1);\n pointer-events: none;\n }\n\n .grouping.verbose.expanded,\n .grouping.verbose .event-count {\n pointer-events: auto;\n }\n\n .grouping.verbose temba-icon {\n margin-top: 3px;\n }\n\n .grouping.verbose > .event,\n .grouping.verbose > pre {\n max-height: 0px;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 0;\n opacity: 0;\n }\n\n .grouping.verbose .attn {\n color: #fff;\n }\n\n .event-count {\n position: relative;\n top: -1.2em;\n font-size: 0.8em;\n text-align: center;\n border: 2px solid #f9f9f9;\n background: #fff;\n margin: 0 auto;\n display: table;\n padding: 3px 10px;\n font-weight: 400;\n color: #777;\n border-radius: var(--curvature);\n cursor: pointer;\n min-width: 0%;\n opacity: 1;\n transition: all var(--transition-speed) ease-in, opacity 0.1ms,\n margin-top 0ms;\n }\n\n .closing .grouping-close-button {\n opacity: 0 !important;\n transition: none !important;\n }\n\n .event-count {\n z-index: 1;\n margin-bottom: 1em;\n }\n\n .event-count:hover {\n padding: 3px 10px;\n min-width: 50%;\n background: #f9f9f9;\n color: #333;\n }\n\n .expanded .event-count {\n opacity: 0;\n margin-top: -42px;\n z-index: 0;\n pointer-events: none;\n }\n\n .grouping.flows {\n margin-left: 1em;\n margin-right: 1em;\n margin-bottom: 1.5em;\n\n border: 1px solid #f2f2f2;\n border-radius: var(--curvature);\n padding: 0.5em 1em;\n }\n\n .grouping.flows .event {\n margin: 0;\n padding: 0;\n }\n\n .grouping.tickets {\n margin-bottom: 2em;\n }\n\n pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .grouping.verbose.closing {\n opacity: 0 !important;\n padding: 0 !important;\n background: #f9f9f9 !important;\n max-height: 1px !important;\n border-top: 1px solid #f9f9f9 !important;\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n }\n\n .grouping.verbose.closing .event,\n .grouping.verbose.closing pre {\n max-height: 0px;\n }\n\n .grouping.verbose.expanded {\n transition: all var(--transition-speed)\n cubic-bezier(0.68, -0.55, 0.265, 1.05),\n color 0.1ms;\n background: #444;\n color: #efefef;\n max-height: 1000px;\n border-top: 1px solid #f1f1f1;\n padding: 2em;\n margin-left: 1em;\n margin-right: 1em;\n border-radius: var(--curvature);\n padding-bottom: 1em;\n box-shadow: inset 0px 11px 4px -15px #000, inset 0px -11px 4px -15px #000;\n }\n\n .grouping.verbose.expanded .event,\n .grouping.verbose.expanded pre {\n max-height: 500px;\n margin-bottom: 0.5em;\n opacity: 1;\n transition: all var(--transition-speed) ease-in-out;\n }\n\n .grouping-close-button {\n opacity: 0;\n float: right;\n margin-top: -1em !important;\n margin-right: -1em !important;\n fill: #f2f2f2;\n transition: opacity var(--transition-speed) ease-in;\n }\n\n .grouping.verbose.expanded:hover .grouping-close-button {\n opacity: 1;\n }\n\n .grouping.messages,\n .grouping.tickets {\n display: flex;\n flex-direction: column;\n }\n\n .event {\n margin-bottom: 1em;\n border-radius: var(--curvature);\n flex-grow: 1;\n }\n\n .msg {\n padding: var(--event-padding);\n border-radius: 8px;\n border: 2px solid rgba(100, 100, 100, 0.1);\n max-width: 300px;\n }\n\n .event.msg_received .msg {\n background: rgba(200, 200, 200, 0.1);\n }\n\n .event.msg_created,\n .event.broadcast_created,\n .event.ivr_created,\n .tickets .event.ticket_note_added {\n align-self: flex-end;\n }\n\n .event.msg_created .msg,\n .event.broadcast_created .msg,\n .event.ivr_created .msg {\n background: rgb(231, 243, 255);\n }\n\n .webhook_called {\n fill: #e68628;\n word-break: break-all;\n }\n\n .webhook_called .failed {\n fill: var(--color-error);\n color: var(--color-error);\n }\n\n .input_labels_added,\n .contact_name_changed,\n .contact_field_changed,\n .contact_urns_changed,\n .contact_language_changed,\n .run_result_changed {\n fill: rgba(1, 193, 175, 1);\n }\n\n .email_sent {\n fill: #8e5ea7;\n }\n\n .contact_groups_changed .added {\n fill: #309c42;\n }\n .contact_groups_changed .removed {\n fill: var(--color-error);\n }\n\n .event.error .description,\n .event.failure .description {\n color: var(--color-error);\n }\n\n .description.error {\n color: var(--color-error);\n }\n\n .info {\n border: 1px solid rgba(100, 100, 100, 0.2);\n background: rgba(10, 10, 10, 0.02);\n }\n\n .tickets .ticket_note_added {\n max-width: 300px;\n }\n\n .tickets .note-summary {\n display: flex;\n flex-direction: row;\n line-height: 0.5;\n font-size: 80%;\n color: rgba(0, 0, 0, 0.6);\n padding: 8px 3px;\n }\n\n .tickets .ticket_note_added .description {\n border: 2px solid rgba(100, 100, 100, 0.1);\n background: rgb(255, 249, 194);\n padding: var(--event-padding);\n border-radius: 8px;\n }\n\n .channel_event {\n fill: rgb(230, 230, 230);\n }\n\n .airtime_transferred,\n .flow_exited,\n .flow_entered,\n .ticket_opened,\n .ticket_reopened,\n .ticket_closed,\n .call_started,\n .campaign_fired {\n fill: rgba(223, 65, 159, 1);\n }\n\n .active-ticket.ticket_opened {\n padding: 0em 1em;\n }\n\n .ticket_opened temba-icon.clickable[name='check'] {\n fill: rgba(100, 100, 100, 1);\n }\n\n .ticket_opened .active {\n color: var(--color-text);\n }\n\n .ticket_closed .inactive .subtext {\n display: none;\n }\n\n .attn {\n color: var(--color-text);\n }\n\n .flow_exited,\n .flow_entered {\n align-self: center;\n max-width: 80%;\n display: flex;\n flex-direction: row;\n }\n\n .flow_exited temba-icon,\n .flow_entered temba-icon {\n margin-top: 5px;\n }\n\n .event {\n display: flex;\n align-items: center;\n }\n\n .event .description {\n flex-grow: 1;\n }\n\n .msg-summary {\n display: flex;\n line-height: 0.5;\n\n font-size: 80%;\n color: rgba(0, 0, 0, 0.6);\n padding: 6px 3px;\n }\n\n .msg-summary temba-icon[name='log'] {\n --icon-color: rgba(0, 0, 0, 0.2);\n }\n\n .msg-summary temba-icon[name='log']:hover {\n --icon-color: var(--color-link-primary-hover);\n cursor: pointer;\n }\n\n .msg-summary temba-icon.error[name='log'] {\n --icon-color: rgba(var(--error-rgb), 0.75);\n }\n\n .msg-summary temba-icon.error[name='log']:hover {\n --icon-color: var(--color-error);\n cursor: pointer;\n }\n\n .msg-summary temba-icon[name='megaphone'] {\n --icon-color: rgba(90, 90, 90, 0.5);\n }\n\n .msg-summary * {\n display: flex;\n margin-right: 1px;\n margin-left: 1px;\n }\n\n .unsupported {\n border: 1px solid #f2f2f2;\n color: #999;\n padding: 0.5em 1em;\n border-radius: var(--curvature);\n }\n\n .time {\n padding: 0.3em 1px;\n }\n\n .status {\n padding: 0.3em 3px;\n }\n\n .separator {\n padding: 0.3em 0px;\n }\n\n .recipients {\n padding: 0.3em 3px;\n }\n\n .verbose temba-icon,\n .flows temba-icon,\n .tickets temba-icon {\n margin-right: 0.75em;\n }\n\n temba-icon[name='check'] {\n margin-top: 3px;\n }\n\n .attn {\n display: inline-block;\n font-weight: 500;\n margin: 0px 2px;\n }\n\n .subtext {\n font-size: 80%;\n }\n\n .body-pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n font-size: 90%;\n }\n\n a,\n .linked {\n color: var(--color-link-primary);\n cursor: pointer;\n }\n\n a:hover,\n .linked:hover {\n text-decoration: underline;\n color: var(--color-link-primary-hover);\n }\n\n temba-icon[name='alert-triangle'] {\n --icon-color: var(--color-error);\n }\n\n .flow {\n fill: #ddd;\n background: #fff;\n width: 18px;\n height: 18px;\n padding-top: 4px;\n padding-left: 9px;\n border: 0px solid #f3f3f3;\n }\n\n .assigned {\n color: #777;\n max-width: 300px;\n margin-left: auto;\n margin-right: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .assigned .attn {\n color: #777;\n }\n `;\n};\n\nconst FLOW_USER_ID = 'flow';\n\nexport interface EventGroup {\n type: string;\n events: ContactEvent[];\n open: boolean;\n closing: boolean;\n}\n\nexport enum Events {\n MESSAGE_CREATED = 'msg_created',\n MESSAGE_RECEIVED = 'msg_received',\n BROADCAST_CREATED = 'broadcast_created',\n IVR_CREATED = 'ivr_created',\n FLOW_ENTERED = 'flow_entered',\n FLOW_EXITED = 'flow_exited',\n RUN_RESULT_CHANGED = 'run_result_changed',\n CONTACT_FIELD_CHANGED = 'contact_field_changed',\n CONTACT_GROUPS_CHANGED = 'contact_groups_changed',\n CONTACT_NAME_CHANGED = 'contact_name_changed',\n CONTACT_URNS_CHANGED = 'contact_urns_changed',\n CAMPAIGN_FIRED = 'campaign_fired',\n CHANNEL_EVENT = 'channel_event',\n CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',\n WEBHOOK_CALLED = 'webhook_called',\n AIRTIME_TRANSFERRED = 'airtime_transferred',\n CALL_STARTED = 'call_started',\n EMAIL_SENT = 'email_sent',\n INPUT_LABELS_ADDED = 'input_labels_added',\n NOTE_CREATED = 'note_created',\n TICKET_ASSIGNED = 'ticket_assigned',\n TICKET_NOTE_ADDED = 'ticket_note_added',\n TICKET_CLOSED = 'ticket_closed',\n TICKET_OPENED = 'ticket_opened',\n TICKET_REOPENED = 'ticket_reopened',\n ERROR = 'error',\n FAILURE = 'failure',\n}\n\nexport interface ContactEvent {\n type: string;\n created_on: string;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n channel_event_type: string;\n duration: number;\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n language: string;\n step_uuid: string;\n session_uuid: string;\n}\n\nexport interface MsgEvent extends ContactEvent {\n msg: Msg;\n status: string;\n logs_url: string;\n msg_type: string;\n recipient_count?: number;\n created_by?: User;\n}\n\nexport interface FlowEvent extends ContactEvent {\n flow: ObjectReference;\n status: string;\n}\n\nexport interface EmailSentEvent extends ContactEvent {\n to: string[];\n subject: string;\n body: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n note?: string;\n assignee?: User;\n ticket: {\n uuid: string;\n ticketer: ObjectReference;\n body: string;\n topic?: ObjectReference;\n external_id?: string;\n closed_on?: string;\n opened_on?: string;\n };\n created_by?: User;\n}\n\nexport interface LabelsAddedEvent extends ContactEvent {\n labels: 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 ErrorMessageEvent extends ContactEvent {\n text: string;\n}\n\nexport interface UpdateResultEvent extends ContactEvent {\n name: string;\n value: string;\n category: string;\n input: string;\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n groups_added: ObjectReference[];\n groups_removed: ObjectReference[];\n}\n\nexport interface WebhookEvent extends ContactEvent {\n status: string;\n status_code: number;\n elapsed_ms: number;\n logs_url: string;\n url: string;\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n sender: string;\n recipient: string;\n currency: string;\n desired_amount: string;\n actual_amount: string;\n logs_url: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\nexport interface CampaignFiredEvent extends ContactEvent {\n campaign: { id: number; name: string };\n campaign_event: {\n id: number;\n offset_display: string;\n relative_to: { key: string; name: string };\n };\n fired_result: string;\n}\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\nexport const getEventGroupType = (event: ContactEvent, ticket: string) => {\n if (!event) {\n return 'messages';\n }\n switch (event.type) {\n case Events.TICKET_ASSIGNED:\n case Events.TICKET_NOTE_ADDED:\n case Events.TICKET_OPENED:\n case Events.TICKET_CLOSED:\n case Events.TICKET_REOPENED:\n if (!ticket) {\n return 'verbose';\n }\n\n if ((event as TicketEvent).ticket.uuid === ticket) {\n return 'tickets';\n }\n\n break;\n case Events.FLOW_ENTERED:\n case Events.FLOW_EXITED:\n return 'flows';\n case Events.BROADCAST_CREATED:\n case Events.MESSAGE_CREATED:\n case Events.MESSAGE_RECEIVED:\n case Events.IVR_CREATED:\n return 'messages';\n }\n return 'verbose';\n};\n\nexport const renderAvatar = (user: User, agent = '') => {\n const current = user && user.email === agent;\n if (user.email === FLOW_USER_ID || !user || !user.first_name) {\n return html`<temba-tip text=\"Automated message\" position=\"top\"\n ><div class=\"avatar flow\" style=\"margin-top:0.5em\">\n <temba-icon size=\"1\" name=\"activity\" /></div\n ></temba-tip>`;\n } else {\n return html`<temba-tip\n text=\"${user.first_name + ' ' + user.last_name}\"\n position=\"top\"\n >\n <div\n class=\"avatar\"\n style=\"\n border-radius: 9999px; \n display:flex;\n align-items:center;\n border: 2px solid rgba(0,0,0,.05);\n background: ${current ? 'var(--color-primary-dark)' : '#eee'};\n color: ${current ? '#fff' : '#999'} ;\n font-weight: 400;\n padding: 0.5em;\n line-height:1.2em;\n \"\n >\n ${user.first_name[0] + user.last_name[0]}\n </div>\n </temba-tip>`;\n }\n};\n\nexport const renderAttachment = (attachment: string): TemplateResult => {\n const idx = attachment.indexOf(':');\n const attType = attachment.substr(0, idx);\n const url = attachment.substr(idx + 1);\n const [mediaType, ext] = attType.split('/', 2);\n\n let inner = null;\n if (mediaType === 'image') {\n inner = html`<div class=\"linked\" onclick=\"goto(event)\" href=\"${url}\"><img src=\"${url}\" style=\"width:100%;height:auto;display:block\"></img></a>`;\n } else if (ext === 'pdf') {\n return html`<div\n style=\"width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden\"\n ><embed src=\"${url}#view=Fit\" type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"100%\" width=\"100%\"></embed></div>`;\n } else if (mediaType === 'video') {\n return html`<video max-width=\"400px\" height=\"auto\" controls=\"controls\">\n <source src=\"${url}\" type=\"video/mp4\" />\n </video> `;\n } else {\n return html`<div style=\"display:flex\">\n <temba-icon name=\"download\"></temba-icon>\n <div>Attachment ${ext}</div>\n </div>`;\n }\n\n return html`<div\n style=\"width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden\"\n >\n ${inner}\n </div>`;\n};\n\nexport const renderMsgEvent = (\n event: MsgEvent,\n agent: string\n): TemplateResult => {\n const isInbound = event.type === Events.MESSAGE_RECEIVED;\n const isError = event.status === 'E' || event.status === 'F';\n const msg = html`<div style=\"display:flex;align-items:flex-start\">\n <div style=\"display:flex;flex-direction:column\">\n ${event.msg.text ? html`<div class=\"msg\">${event.msg.text}</div>` : null}\n ${event.msg.attachments\n ? html`<div class=\"attachments\">\n ${event.msg.attachments.map(attachment =>\n renderAttachment(attachment)\n )}\n </div> `\n : null}\n ${!event.msg.text && !event.msg.attachments\n ? html`<div class=\"unsupported\">Unsupported Message</div>`\n : null}\n <div\n class=\"msg-summary\"\n style=\"flex-direction:row${isInbound ? '-reverse' : ''}\"\n >\n <div style=\"flex-grow:1\"></div>\n ${event.logs_url\n ? html`\n <div class=\"icon-link\">\n <temba-icon\n onclick=\"goto(event)\"\n href=\"${event.logs_url}\"\n name=\"log\"\n class=\"${isError ? 'error' : ''}\"\n ></temba-icon>\n </div>\n `\n : isError\n ? html`<temba-icon\n title=\"Message delivery error\"\n name=\"alert-triangle\"\n ></temba-icon>`\n : null}\n ${event.recipient_count > 1\n ? html`<temba-icon size=\"1\" name=\"megaphone\"></temba-icon>\n <div class=\"recipients\">${event.recipient_count} contacts</div>\n <div class=\"separator\">•</div>`\n : null}\n <div class=\"time\">${timeSince(new Date(event.created_on))}</div>\n </div>\n </div>\n\n ${!isInbound\n ? html`<div style=\"margin-left:0.8em;margin-top:0.3em\">\n ${event.msg.created_by\n ? html`<div style=\"font-size:0.8em\">\n ${renderAvatar(event.msg.created_by, agent)}\n </div>`\n : renderAvatar({ email: FLOW_USER_ID })}\n </div>`\n : null}\n </div>`;\n return msg;\n};\n\nexport const renderFlowEvent = (event: FlowEvent): TemplateResult => {\n let verb = 'Interrupted';\n let icon = 'x-octagon';\n\n if (event.status !== 'I') {\n if (event.type === Events.FLOW_ENTERED) {\n verb = 'Started';\n icon = 'flow';\n } else {\n verb = 'Completed';\n icon = 'flow';\n }\n }\n\n return html`\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${verb}\n <span\n class=\"linked\"\n href=\"/flow/editor/${event.flow.uuid}/\"\n onclick=\"goto(event)\"\n >\n ${event.flow.name}\n </span>\n </div>\n `;\n};\n\nexport const renderResultEvent = (event: UpdateResultEvent): TemplateResult => {\n if (event.name.startsWith('_')) {\n return null;\n }\n return html`\n <temba-icon name=\"flow\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">${event.name}</div>\n to\n <div class=\"attn\">${event.value}</div>\n ${event.category\n ? html`with category\n <div class=\"attn\">${event.category}</div>`\n : null}\n </div>\n `;\n};\n\nexport const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {\n return html`\n <temba-icon name=\"contact\"></temba-icon>\n <div class=\"description\">\n ${event.value\n ? html`Updated\n <div class=\"attn\">${event.field.name}</div>\n to\n <div class=\"attn\">${event.value.text}</div>`\n : html`Cleared\n <div class=\"attn\">${event.field.name}</div>`}\n </div>\n `;\n};\n\nexport const renderNameChanged = (event: NameChangedEvent): TemplateResult => {\n return html`\n <temba-icon name=\"contact\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">Name</div>\n to\n <div class=\"attn\">${event.name}</div>\n </div>\n `;\n};\n\nexport const renderContactURNsChanged = (\n event: URNsChangedEvent\n): TemplateResult => {\n return html`\n <temba-icon name=\"contact\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">URNs</div>\n to\n ${oxfordFn(\n event.urns,\n (urn: string) =>\n html`<div class=\"attn\">${urn.split(':')[1].split('?')[0]}</div>`\n )}\n </div>\n </div>\n `;\n};\n\nexport const renderEmailSent = (event: EmailSentEvent): TemplateResult => {\n return html`\n <temba-icon name=\"mail\"></temba-icon>\n <div class=\"description\">\n Email sent to\n <div class=\"attn\">${oxford(event.to, 'and')}</div>\n with subject\n <div class=\"attn\">${event.subject}</div>\n </div>\n `;\n};\n\nexport const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {\n return html`\n <temba-icon name=\"tag\"></temba-icon>\n <div class=\"description\">\n Message labeled with\n <div class=\"attn\">${oxfordNamed(event.labels, 'and')}</div>\n </div>\n `;\n};\n\nexport const renderNoteCreated = (\n event: TicketEvent,\n agent: string\n): TemplateResult => {\n return html`<div style=\"display:flex;align-items:flex-start\">\n <div style=\"display:flex;flex-direction:column\">\n <div class=\"description\">${event.note}</div>\n <div class=\"note-summary\">\n <div style=\"flex-grow:1\"></div>\n <div class=\"time\">${timeSince(new Date(event.created_on))}</div>\n </div>\n </div>\n <div style=\"margin-left:0.8em;margin-top:0.3em;font-size:0.8em\">\n ${renderAvatar(event.created_by, agent)}\n </div>\n </div>`;\n};\n\nconst getTicketIcon = (event: TicketEvent) => {\n let icon = 'inbox';\n if (event.ticket.ticketer.name.indexOf('Email') > -1) {\n icon = 'mail';\n } else if (event.ticket.ticketer.name.indexOf('Zendesk') > -1) {\n icon = 'zendesk';\n }\n return icon;\n};\n\nexport const renderTicketAction = (\n event: TicketEvent,\n action: string,\n grouped: boolean\n): TemplateResult => {\n const reopened = new Date(event.created_on);\n const icon = getTicketIcon(event);\n if (grouped) {\n return html`<div class=\"\" style=\"display: flex\">\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${getDisplayName(event.created_by)} ${action} a\n <span\n onclick=\"goto(event)\"\n class=\"linked\"\n href=\"/ticket/all/open/${event.ticket.uuid}\"\n >\n ticket\n </span>\n </div>\n </div>`;\n }\n\n return html`\n <div class=\"assigned active\">\n <div style=\"text-align:center\">\n ${getDisplayName(event.created_by)} ${action} this ticket\n </div>\n <div class=\"subtext\" style=\"justify-content:center\">\n ${timeSince(reopened, { hideRecentText: true, suffix: ' ago' })}\n </div>\n </div>\n `;\n};\n\nexport const renderTicketAssigned = (event: TicketEvent): TemplateResult => {\n const created = new Date(event.created_on);\n return html`\n <div class=\"assigned active\">\n <div style=\"text-align:center\">\n ${event.assignee\n ? event.assignee.id === event.created_by.id\n ? html`${getDisplayName(event.created_by)} took this ticket`\n : html`${getDisplayName(event.created_by)} assigned this ticket to\n <div class=\"attn\">${getDisplayName(event.assignee)}</div>`\n : html`${getDisplayName(event.created_by)} unassigned this ticket`}\n </div>\n <div class=\"subtext\" style=\"justify-content:center\">\n ${timeSince(created, { hideRecentText: true, suffix: ' ago' })}\n </div>\n </div>\n `;\n};\n\nexport const renderTicketOpened = (\n event: TicketEvent,\n handleClose: (uuid: string) => void,\n grouped: boolean\n): TemplateResult => {\n const icon = getTicketIcon(event);\n\n if (grouped) {\n return html`<div class=\"\" style=\"display: flex\">\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${event.ticket.topic.name}\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/tickets/all/open/${event.ticket.uuid}\"\n >ticket</span\n >\n was opened\n </div>\n </div>`;\n } else {\n return html`\n <temba-icon size=\"1.5\" name=\"${icon}\"></temba-icon>\n\n <div class=\"active\" style=\"flex-grow:1;\">\n Opened\n <div class=\"attn\">\n ${event.ticket.topic ? event.ticket.topic.name : 'General'}\n </div>\n <div class=\"subtext\">${timeSince(new Date(event.created_on))}</div>\n </div>\n ${handleClose\n ? html`\n <temba-tip text=\"Resolve\" position=\"left\" style=\"width:1.5em\">\n <temba-icon\n class=\"clickable\"\n size=\"1.5\"\n name=\"check\"\n @click=${() => {\n handleClose(event.ticket.uuid);\n }}\n ?clickable=${open}\n />\n </temba-tip>\n `\n : null}\n `;\n }\n};\n\nexport const renderErrorMessage = (\n event: ErrorMessageEvent\n): TemplateResult => {\n return html`\n <temba-icon\n name=\"alert-triangle\"\n style=\"fill:var(--color-error)\"\n ></temba-icon>\n <div class=\"description\">\n ${event.text}\n ${event.type === Events.FAILURE\n ? html`<div>Run ended prematurely, check the flow design.</div>`\n : null}\n </div>\n `;\n};\n\nexport const renderWebhookEvent = (event: WebhookEvent): TemplateResult => {\n return html`\n <div\n class=\"${event.status === 'success' ? '' : 'failed'}\"\n style=\"display: flex\"\n >\n <temba-icon name=\"external-link\"></temba-icon>\n <div class=\"description\">\n ${event.status === 'success'\n ? html`Successfully called ${event.url}`\n : html`Failed to call ${event.url}`}\n </div>\n </div>\n `;\n};\n\nexport const renderAirtimeTransferredEvent = (\n event: AirtimeTransferredEvent\n): TemplateResult => {\n if (parseFloat(event.actual_amount) === 0) {\n return html`<temba-icon\n name=\"alert-triangle\"\n style=\"fill:var(--color-error)\"\n ></temba-icon>\n <div class=\"description error\">Airtime transfer failed</div>`;\n }\n\n return html`<temba-icon name=\"dollar-sign\"></temba-icon>\n <div class=\"description\">\n Transferred\n <div class=\"attn\">${event.actual_amount} ${event.currency}</div>\n of airtime\n </div>`;\n};\n\nexport const renderCallStartedEvent = (): TemplateResult => {\n return html`<temba-icon name=\"phone\"></temba-icon>\n <div class=\"description\">Call Started</div>`;\n};\n\nexport const renderContactLanguageChangedEvent = (\n event: ContactLanguageChangedEvent\n): TemplateResult => {\n return html`<temba-icon name=\"contact\"></temba-icon>\n <div class=\"description\">Language updated to ${event.language}</div>`;\n};\n\nexport const renderChannelEvent = (event: ChannelEvent): TemplateResult => {\n let eventMessage = '';\n let icon = 'phone';\n\n if (event.channel_event_type === 'mt_miss') {\n eventMessage = 'Missed outgoing call';\n icon = 'phone-missed';\n } else if (event.channel_event_type === 'mo_miss') {\n eventMessage = 'Missed incoming call';\n icon = 'phone-missed';\n } else if (event.channel_event_type === 'new_conversation') {\n eventMessage = 'Started Conversation';\n icon = 'zap';\n } else if (event.channel_event_type === 'welcome_message') {\n eventMessage = 'Welcome Message Sent';\n icon = 'zap';\n } else if (event.channel_event_type === 'referral') {\n eventMessage = 'Referred';\n icon = 'zap';\n } else if (event.channel_event_type === 'follow') {\n eventMessage = 'Followed';\n icon = 'zap';\n } else if (event.channel_event_type === 'stop_contact') {\n eventMessage = 'Stopped';\n icon = 'x-octagon';\n } else if (event.channel_event_type === 'mt_call') {\n eventMessage = 'Outgoing Phone Call';\n } else if (event.channel_event_type == 'mo_call') {\n eventMessage = 'Incoming Phone call';\n }\n\n return html`<temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">${eventMessage}</div>`;\n};\n\nexport const renderCampaignFiredEvent = (\n event: CampaignFiredEvent\n): TemplateResult => {\n return html`<temba-icon name=\"campaign\"></temba-icon>\n <div class=\"description\">\n Campaign\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/campaign/read/${event.campaign.id}\"\n >${event.campaign.name}</span\n >\n ${event.fired_result === 'S' ? 'skipped' : 'triggered'}\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/campaignevent/read/${event.campaign_event.id}\"\n >\n ${event.campaign_event.offset_display}\n ${event.campaign_event.relative_to.name}</span\n >\n </div>`;\n};\n\nexport const renderContactGroupsEvent = (\n event: ContactGroupsEvent\n): TemplateResult => {\n const groups = event.groups_added || event.groups_removed;\n const added = !!event.groups_added;\n return html`\n <temba-icon\n name=\"users\"\n class=\"${getClasses({ added: added, removed: !added })}\"\n ></temba-icon>\n <div class=\"description\">\n ${added ? 'Added to' : 'Removed from'}\n ${oxfordFn(\n groups,\n (group: ObjectReference) =>\n html`<span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/contact/filter/${group.uuid}\"\n >${group.name}</span\n >`\n )}\n ${event.type === Events.FAILURE\n ? html`<div>Run ended prematurely, check the flow design.</div>`\n : null}\n </div>\n `;\n};\n"]}
1
+ {"version":3,"file":"events.js","sourceRoot":"","sources":["../../../src/contacts/events.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { Msg, ObjectReference, User } from '../interfaces';\nimport { getClasses, oxford, oxfordFn, oxfordNamed, timeSince } from '../utils';\nimport { getDisplayName } from './helpers';\n\nexport const getEventStyles = () => {\n return css`\n .grouping {\n margin-top: 1em;\n }\n\n .grouping.verbose {\n background: #f9f9f9;\n color: var(--color-dark);\n --color-link-primary: rgba(38, 166, 230, 1);\n pointer-events: none;\n background: #fefefe;\n box-shadow: -8px 0px 8px 1px rgba(0, 0, 0, 0.05) inset;\n margin-right: -16px;\n padding-right: 16px;\n margin-bottom: 1.3em;\n }\n\n .grouping .items {\n display: block;\n user-select: none;\n }\n\n .grouping.verbose .items {\n opacity: 0;\n max-height: 0;\n display: flex;\n flex-direction: column;\n }\n\n .grouping.flows .items {\n padding: 0;\n }\n\n .grouping.messages .items {\n display: flex;\n flex-direction: column;\n margin: 0em 0.75em;\n }\n\n .grouping.verbose.expanded .items {\n transition: max-height var(--transition-speed) ease-in-out,\n opacity var(--transition-speed) ease-in-out;\n opacity: 1;\n max-height: 1000px;\n padding: 1em 1em;\n }\n\n .grouping.verbose.expanded {\n border-top: 1px solid #f3f3f3;\n border-bottom: 1px solid #f3f3f3;\n }\n\n .grouping.verbose.expanded,\n .grouping.verbose .event-count {\n pointer-events: auto;\n }\n\n .grouping.verbose temba-icon {\n margin-top: 3px;\n }\n\n .grouping.verbose > .event,\n .grouping.verbose > pre {\n max-height: 0px;\n padding-top: 0;\n padding-bottom: 0;\n margin-top: 0;\n margin-bottom: 0;\n opacity: 0;\n }\n\n .grouping.verbose .attn {\n color: #666;\n }\n\n .event-count {\n position: relative;\n font-size: 0.8em;\n text-align: center;\n margin: 0 auto;\n display: table;\n padding: 3px 10px;\n font-weight: 400;\n color: #999;\n cursor: pointer;\n width: 100%;\n opacity: 1;\n z-index: 1;\n }\n\n .event-count temba-icon {\n display: inline-block;\n position: absolute;\n right: 5px;\n top: 5px;\n }\n\n .event-count:hover {\n color: var(--color-link-primary-hover);\n }\n\n .expanded .event-count {\n padding: 0;\n pointer-events: none;\n }\n\n .grouping.flows {\n margin-left: 1em;\n margin-right: 1em;\n margin-bottom: 1.5em;\n\n border: 1px solid #f2f2f2;\n border-radius: var(--curvature);\n padding: 0.5em 1em;\n }\n\n .grouping.flows .event {\n margin: 0;\n padding: 0;\n }\n\n .grouping.tickets {\n margin-bottom: 2em;\n }\n\n pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .grouping.verbose.expanded .event,\n .grouping.verbose.expanded pre {\n max-height: 500px;\n opacity: 1;\n }\n\n .grouping-close-button {\n position: relative;\n display: inline-block;\n opacity: 0;\n float: right;\n --icon-color: #666;\n }\n\n .grouping.verbose.expanded:hover .grouping-close-button {\n opacity: 1;\n }\n\n .grouping.messages,\n .grouping.tickets {\n display: flex;\n flex-direction: column;\n }\n\n .event {\n margin: 0.25em 0.5em;\n border-radius: var(--curvature);\n flex-grow: 1;\n }\n\n .msg {\n padding: var(--event-padding);\n border-radius: 8px;\n border: 2px solid rgba(100, 100, 100, 0.1);\n max-width: 300px;\n }\n\n .event.msg_received .msg {\n background: rgba(200, 200, 200, 0.1);\n }\n\n .event.msg_created,\n .event.broadcast_created,\n .event.ivr_created,\n .tickets .event.ticket_note_added {\n align-self: flex-end;\n }\n\n .event.msg_created .msg,\n .event.broadcast_created .msg,\n .event.ivr_created .msg {\n background: rgb(231, 243, 255);\n }\n\n .webhook_called {\n fill: #e68628;\n word-break: break-all;\n }\n\n .webhook_called .failed {\n fill: var(--color-error);\n color: var(--color-error);\n }\n\n .input_labels_added,\n .contact_name_changed,\n .contact_field_changed,\n .contact_urns_changed,\n .contact_language_changed,\n .run_result_changed {\n fill: rgba(1, 193, 175, 1);\n }\n\n .email_sent {\n fill: #8e5ea7;\n }\n\n .contact_groups_changed .added {\n fill: #309c42;\n }\n .contact_groups_changed .removed {\n fill: var(--color-error);\n }\n\n .event.error .description,\n .event.failure .description {\n color: var(--color-error);\n }\n\n .description.error {\n color: var(--color-error);\n }\n\n .info {\n border: 1px solid rgba(100, 100, 100, 0.2);\n background: rgba(10, 10, 10, 0.02);\n }\n\n .tickets .ticket_note_added {\n max-width: 300px;\n }\n\n .tickets .note-summary {\n display: flex;\n flex-direction: row;\n line-height: 0.5;\n font-size: 80%;\n color: rgba(0, 0, 0, 0.6);\n padding: 8px 3px;\n }\n\n .tickets .ticket_note_added .description {\n border: 2px solid rgba(100, 100, 100, 0.1);\n background: rgb(255, 249, 194);\n padding: var(--event-padding);\n border-radius: 8px;\n }\n\n .channel_event {\n fill: rgb(230, 230, 230);\n }\n\n .airtime_transferred,\n .flow_exited,\n .flow_entered,\n .ticket_opened,\n .ticket_reopened,\n .ticket_closed,\n .call_started,\n .campaign_fired {\n fill: rgba(223, 65, 159, 1);\n }\n\n .active-ticket.ticket_opened {\n padding: 0em 1em;\n }\n\n .ticket_opened temba-icon.clickable[name='check'] {\n fill: rgba(100, 100, 100, 1);\n }\n\n .ticket_opened .active {\n color: var(--color-text);\n }\n\n .ticket_closed .inactive .subtext {\n display: none;\n }\n\n .attn {\n color: var(--color-text);\n }\n\n .flow_exited,\n .flow_entered {\n align-self: center;\n max-width: 80%;\n display: flex;\n flex-direction: row;\n }\n\n .flow_exited temba-icon,\n .flow_entered temba-icon {\n margin-top: 5px;\n }\n\n .event {\n display: flex;\n align-items: center;\n }\n\n .event .description {\n flex-grow: 1;\n }\n\n .msg-summary {\n display: flex;\n line-height: 0.5;\n\n font-size: 80%;\n color: rgba(0, 0, 0, 0.6);\n padding: 6px 3px;\n margin-bottom: 0.5em;\n }\n\n .msg-summary temba-icon[name='log'] {\n --icon-color: rgba(0, 0, 0, 0.2);\n }\n\n .msg-summary temba-icon[name='log']:hover {\n --icon-color: var(--color-link-primary-hover);\n cursor: pointer;\n }\n\n .msg-summary temba-icon.error[name='log'] {\n --icon-color: rgba(var(--error-rgb), 0.75);\n }\n\n .msg-summary temba-icon.error[name='log']:hover {\n --icon-color: var(--color-error);\n cursor: pointer;\n }\n\n .msg-summary temba-icon[name='megaphone'] {\n --icon-color: rgba(90, 90, 90, 0.5);\n }\n\n .msg-summary * {\n display: flex;\n margin-right: 1px;\n margin-left: 1px;\n }\n\n .unsupported {\n border: 1px solid #f2f2f2;\n color: #999;\n padding: 0.5em 1em;\n border-radius: var(--curvature);\n }\n\n .time {\n padding: 0.3em 1px;\n }\n\n .status {\n padding: 0.3em 3px;\n }\n\n .separator {\n padding: 0.3em 0px;\n }\n\n .recipients {\n padding: 0.3em 3px;\n }\n\n .verbose temba-icon,\n .flows temba-icon,\n .tickets temba-icon {\n margin-right: 0.75em;\n }\n\n temba-icon[name='check'] {\n margin-top: 3px;\n }\n\n .attn {\n display: inline-block;\n font-weight: 500;\n margin: 0px 2px;\n }\n\n .subtext {\n font-size: 80%;\n }\n\n .body-pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n font-size: 90%;\n }\n\n a,\n .linked {\n color: var(--color-link-primary);\n cursor: pointer;\n }\n\n a:hover,\n .linked:hover {\n text-decoration: underline;\n color: var(--color-link-primary-hover);\n }\n\n temba-icon[name='alert-triangle'] {\n --icon-color: var(--color-error);\n }\n\n .flow {\n fill: #ddd;\n background: #fff;\n width: 18px;\n height: 18px;\n padding-top: 4px;\n padding-left: 9px;\n border: 0px solid #f3f3f3;\n }\n\n .assigned {\n color: #777;\n max-width: 300px;\n margin-left: auto;\n margin-right: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: 10px;\n }\n\n .assigned .attn {\n color: #777;\n }\n `;\n};\n\nconst FLOW_USER_ID = 'flow';\n\nexport interface EventGroup {\n type: string;\n events: ContactEvent[];\n open: boolean;\n}\n\nexport enum Events {\n MESSAGE_CREATED = 'msg_created',\n MESSAGE_RECEIVED = 'msg_received',\n BROADCAST_CREATED = 'broadcast_created',\n IVR_CREATED = 'ivr_created',\n FLOW_ENTERED = 'flow_entered',\n FLOW_EXITED = 'flow_exited',\n RUN_RESULT_CHANGED = 'run_result_changed',\n CONTACT_FIELD_CHANGED = 'contact_field_changed',\n CONTACT_GROUPS_CHANGED = 'contact_groups_changed',\n CONTACT_NAME_CHANGED = 'contact_name_changed',\n CONTACT_URNS_CHANGED = 'contact_urns_changed',\n CAMPAIGN_FIRED = 'campaign_fired',\n CHANNEL_EVENT = 'channel_event',\n CONTACT_LANGUAGE_CHANGED = 'contact_language_changed',\n WEBHOOK_CALLED = 'webhook_called',\n AIRTIME_TRANSFERRED = 'airtime_transferred',\n CALL_STARTED = 'call_started',\n EMAIL_SENT = 'email_sent',\n INPUT_LABELS_ADDED = 'input_labels_added',\n NOTE_CREATED = 'note_created',\n TICKET_ASSIGNED = 'ticket_assigned',\n TICKET_NOTE_ADDED = 'ticket_note_added',\n TICKET_CLOSED = 'ticket_closed',\n TICKET_OPENED = 'ticket_opened',\n TICKET_REOPENED = 'ticket_reopened',\n ERROR = 'error',\n FAILURE = 'failure',\n}\n\nexport interface ContactEvent {\n type: string;\n created_on: string;\n}\n\nexport interface ChannelEvent extends ContactEvent {\n channel_event_type: string;\n duration: number;\n}\n\nexport interface ContactLanguageChangedEvent extends ContactEvent {\n language: string;\n step_uuid: string;\n session_uuid: string;\n}\n\nexport interface MsgEvent extends ContactEvent {\n msg: Msg;\n status: string;\n logs_url: string;\n msg_type: string;\n recipient_count?: number;\n created_by?: User;\n}\n\nexport interface FlowEvent extends ContactEvent {\n flow: ObjectReference;\n status: string;\n}\n\nexport interface EmailSentEvent extends ContactEvent {\n to: string[];\n subject: string;\n body: string;\n}\n\nexport interface URNsChangedEvent extends ContactEvent {\n urns: string[];\n}\n\nexport interface TicketEvent extends ContactEvent {\n note?: string;\n assignee?: User;\n ticket: {\n uuid: string;\n ticketer: ObjectReference;\n body: string;\n topic?: ObjectReference;\n external_id?: string;\n closed_on?: string;\n opened_on?: string;\n };\n created_by?: User;\n}\n\nexport interface LabelsAddedEvent extends ContactEvent {\n labels: 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 ErrorMessageEvent extends ContactEvent {\n text: string;\n}\n\nexport interface UpdateResultEvent extends ContactEvent {\n name: string;\n value: string;\n category: string;\n input: string;\n}\n\nexport interface ContactGroupsEvent extends ContactEvent {\n groups_added: ObjectReference[];\n groups_removed: ObjectReference[];\n}\n\nexport interface WebhookEvent extends ContactEvent {\n status: string;\n status_code: number;\n elapsed_ms: number;\n logs_url: string;\n url: string;\n}\n\nexport interface AirtimeTransferredEvent extends ContactEvent {\n sender: string;\n recipient: string;\n currency: string;\n desired_amount: string;\n actual_amount: string;\n logs_url: string;\n}\n\nexport type CallStartedEvent = ContactEvent;\nexport interface CampaignFiredEvent extends ContactEvent {\n campaign: { id: number; name: string };\n campaign_event: {\n id: number;\n offset_display: string;\n relative_to: { key: string; name: string };\n };\n fired_result: string;\n}\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\nexport const getEventGroupType = (event: ContactEvent, ticket: string) => {\n if (!event) {\n return 'messages';\n }\n switch (event.type) {\n case Events.TICKET_ASSIGNED:\n case Events.TICKET_NOTE_ADDED:\n case Events.TICKET_OPENED:\n case Events.TICKET_CLOSED:\n case Events.TICKET_REOPENED:\n if (!ticket) {\n return 'verbose';\n }\n\n if ((event as TicketEvent).ticket.uuid === ticket) {\n return 'tickets';\n }\n\n break;\n case Events.FLOW_ENTERED:\n case Events.FLOW_EXITED:\n return 'flows';\n case Events.BROADCAST_CREATED:\n case Events.MESSAGE_CREATED:\n case Events.MESSAGE_RECEIVED:\n case Events.IVR_CREATED:\n return 'messages';\n }\n return 'verbose';\n};\n\nexport const renderAvatar = (user: User, agent = '') => {\n const current = user && user.email === agent;\n if (user.email === FLOW_USER_ID || !user || !user.first_name) {\n return html`<temba-tip text=\"Automated message\" position=\"top\"\n ><div class=\"avatar flow\" style=\"margin-top:0.5em\">\n <temba-icon size=\"1\" name=\"activity\" /></div\n ></temba-tip>`;\n } else {\n return html`<temba-tip\n text=\"${user.first_name + ' ' + user.last_name}\"\n position=\"top\"\n >\n <div\n class=\"avatar\"\n style=\"\n border-radius: 9999px; \n display:flex;\n align-items:center;\n border: 2px solid rgba(0,0,0,.05);\n background: ${current ? 'var(--color-primary-dark)' : '#eee'};\n color: ${current ? '#fff' : '#999'} ;\n font-weight: 400;\n padding: 0.5em;\n line-height:1.2em;\n \"\n >\n ${user.first_name[0] + user.last_name[0]}\n </div>\n </temba-tip>`;\n }\n};\n\nexport const renderAttachment = (attachment: string): TemplateResult => {\n const idx = attachment.indexOf(':');\n const attType = attachment.substr(0, idx);\n const url = attachment.substr(idx + 1);\n const [mediaType, ext] = attType.split('/', 2);\n\n let inner = null;\n if (mediaType === 'image') {\n inner = html`<div class=\"linked\" onclick=\"goto(event)\" href=\"${url}\"><img src=\"${url}\" style=\"width:100%;height:auto;display:block\"></img></a>`;\n } else if (ext === 'pdf') {\n return html`<div\n style=\"width:100%;height:300px;border-radius:var(--curvature);box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden\"\n ><embed src=\"${url}#view=Fit\" type=\"application/pdf\" frameBorder=\"0\" scrolling=\"auto\" height=\"100%\" width=\"100%\"></embed></div>`;\n } else if (mediaType === 'video') {\n return html`<video max-width=\"400px\" height=\"auto\" controls=\"controls\">\n <source src=\"${url}\" type=\"video/mp4\" />\n </video> `;\n } else {\n return html`<div style=\"display:flex\">\n <temba-icon name=\"download\"></temba-icon>\n <div>Attachment ${ext}</div>\n </div>`;\n }\n\n return html`<div\n style=\"width:100%;max-width:300px;border-radius:var(--curvature); box-shadow:0px 0px 10px -1px rgb(160 160 160);overflow:hidden\"\n >\n ${inner}\n </div>`;\n};\n\nexport const renderMsgEvent = (\n event: MsgEvent,\n agent: string\n): TemplateResult => {\n const isInbound = event.type === Events.MESSAGE_RECEIVED;\n const isError = event.status === 'E' || event.status === 'F';\n const msg = html`<div style=\"display:flex;align-items:flex-start\">\n <div style=\"display:flex;flex-direction:column\">\n ${event.msg.text ? html`<div class=\"msg\">${event.msg.text}</div>` : null}\n ${event.msg.attachments\n ? html`<div class=\"attachments\">\n ${event.msg.attachments.map(attachment =>\n renderAttachment(attachment)\n )}\n </div> `\n : null}\n ${!event.msg.text && !event.msg.attachments\n ? html`<div class=\"unsupported\">Unsupported Message</div>`\n : null}\n <div\n class=\"msg-summary\"\n style=\"flex-direction:row${isInbound ? '-reverse' : ''}\"\n >\n <div style=\"flex-grow:1\"></div>\n ${event.logs_url\n ? html`\n <div class=\"icon-link\">\n <temba-icon\n onclick=\"goto(event)\"\n href=\"${event.logs_url}\"\n name=\"log\"\n class=\"${isError ? 'error' : ''}\"\n ></temba-icon>\n </div>\n `\n : isError\n ? html`<temba-icon\n title=\"Message delivery error\"\n name=\"alert-triangle\"\n ></temba-icon>`\n : null}\n ${event.recipient_count > 1\n ? html`<temba-icon size=\"1\" name=\"megaphone\"></temba-icon>\n <div class=\"recipients\">${event.recipient_count} contacts</div>\n <div class=\"separator\">•</div>`\n : null}\n <div class=\"time\">${timeSince(new Date(event.created_on))}</div>\n </div>\n </div>\n\n ${!isInbound\n ? html`<div style=\"margin-left:0.8em;margin-top:0.3em\">\n ${event.msg.created_by\n ? html`<div style=\"font-size:0.8em\">\n ${renderAvatar(event.msg.created_by, agent)}\n </div>`\n : renderAvatar({ email: FLOW_USER_ID })}\n </div>`\n : null}\n </div>`;\n return msg;\n};\n\nexport const renderFlowEvent = (event: FlowEvent): TemplateResult => {\n let verb = 'Interrupted';\n let icon = 'x-octagon';\n\n if (event.status !== 'I') {\n if (event.type === Events.FLOW_ENTERED) {\n verb = 'Started';\n icon = 'flow';\n } else {\n verb = 'Completed';\n icon = 'flow';\n }\n }\n\n return html`\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${verb}\n <span\n class=\"linked\"\n href=\"/flow/editor/${event.flow.uuid}/\"\n onclick=\"goto(event)\"\n >\n ${event.flow.name}\n </span>\n </div>\n `;\n};\n\nexport const renderResultEvent = (event: UpdateResultEvent): TemplateResult => {\n if (event.name.startsWith('_')) {\n return null;\n }\n return html`\n <temba-icon name=\"flow\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">${event.name}</div>\n to\n <div class=\"attn\">${event.value}</div>\n ${event.category\n ? html`with category\n <div class=\"attn\">${event.category}</div>`\n : null}\n </div>\n `;\n};\n\nexport const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {\n return html`\n <temba-icon name=\"contact\"></temba-icon>\n <div class=\"description\">\n ${event.value\n ? html`Updated\n <div class=\"attn\">${event.field.name}</div>\n to\n <div class=\"attn\">${event.value.text}</div>`\n : html`Cleared\n <div class=\"attn\">${event.field.name}</div>`}\n </div>\n `;\n};\n\nexport const renderNameChanged = (event: NameChangedEvent): TemplateResult => {\n return html`\n <temba-icon name=\"contact\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">Name</div>\n to\n <div class=\"attn\">${event.name}</div>\n </div>\n `;\n};\n\nexport const renderContactURNsChanged = (\n event: URNsChangedEvent\n): TemplateResult => {\n return html`\n <temba-icon name=\"contact\"></temba-icon>\n <div class=\"description\">\n Updated\n <div class=\"attn\">URNs</div>\n to\n ${oxfordFn(\n event.urns,\n (urn: string) =>\n html`<div class=\"attn\">${urn.split(':')[1].split('?')[0]}</div>`\n )}\n </div>\n </div>\n `;\n};\n\nexport const renderEmailSent = (event: EmailSentEvent): TemplateResult => {\n return html`\n <temba-icon name=\"mail\"></temba-icon>\n <div class=\"description\">\n Email sent to\n <div class=\"attn\">${oxford(event.to, 'and')}</div>\n with subject\n <div class=\"attn\">${event.subject}</div>\n </div>\n `;\n};\n\nexport const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {\n return html`\n <temba-icon name=\"tag\"></temba-icon>\n <div class=\"description\">\n Message labeled with\n <div class=\"attn\">${oxfordNamed(event.labels, 'and')}</div>\n </div>\n `;\n};\n\nexport const renderNoteCreated = (\n event: TicketEvent,\n agent: string\n): TemplateResult => {\n return html`<div style=\"display:flex;align-items:flex-start\">\n <div style=\"display:flex;flex-direction:column\">\n <div class=\"description\">${event.note}</div>\n <div class=\"note-summary\">\n <div style=\"flex-grow:1\"></div>\n <div class=\"time\">${timeSince(new Date(event.created_on))}</div>\n </div>\n </div>\n <div style=\"margin-left:0.8em;margin-top:0.3em;font-size:0.8em\">\n ${renderAvatar(event.created_by, agent)}\n </div>\n </div>`;\n};\n\nconst getTicketIcon = (event: TicketEvent) => {\n let icon = 'inbox';\n if (event.ticket.ticketer.name.indexOf('Email') > -1) {\n icon = 'mail';\n } else if (event.ticket.ticketer.name.indexOf('Zendesk') > -1) {\n icon = 'zendesk';\n }\n return icon;\n};\n\nexport const renderTicketAction = (\n event: TicketEvent,\n action: string,\n grouped: boolean\n): TemplateResult => {\n const reopened = new Date(event.created_on);\n const icon = getTicketIcon(event);\n if (grouped) {\n return html`<div class=\"\" style=\"display: flex\">\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${getDisplayName(event.created_by)} ${action} a\n <span\n onclick=\"goto(event)\"\n class=\"linked\"\n href=\"/ticket/all/open/${event.ticket.uuid}\"\n >\n ticket\n </span>\n </div>\n </div>`;\n }\n\n return html`\n <div class=\"assigned active\">\n <div style=\"text-align:center\">\n ${getDisplayName(event.created_by)} ${action} this ticket\n </div>\n <div class=\"subtext\" style=\"justify-content:center\">\n ${timeSince(reopened, { hideRecentText: true, suffix: ' ago' })}\n </div>\n </div>\n `;\n};\n\nexport const renderTicketAssigned = (event: TicketEvent): TemplateResult => {\n const created = new Date(event.created_on);\n return html`\n <div class=\"assigned active\">\n <div style=\"text-align:center\">\n ${event.assignee\n ? event.assignee.id === event.created_by.id\n ? html`${getDisplayName(event.created_by)} took this ticket`\n : html`${getDisplayName(event.created_by)} assigned this ticket to\n <div class=\"attn\">${getDisplayName(event.assignee)}</div>`\n : html`${getDisplayName(event.created_by)} unassigned this ticket`}\n </div>\n <div class=\"subtext\" style=\"justify-content:center\">\n ${timeSince(created, { hideRecentText: true, suffix: ' ago' })}\n </div>\n </div>\n `;\n};\n\nexport const renderTicketOpened = (\n event: TicketEvent,\n handleClose: (uuid: string) => void,\n grouped: boolean\n): TemplateResult => {\n const icon = getTicketIcon(event);\n\n if (grouped) {\n return html`<div class=\"\" style=\"display: flex\">\n <temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">\n ${event.ticket.topic.name}\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/tickets/all/open/${event.ticket.uuid}\"\n >ticket</span\n >\n was opened\n </div>\n </div>`;\n } else {\n return html`\n <temba-icon size=\"1.5\" name=\"${icon}\"></temba-icon>\n\n <div class=\"active\" style=\"flex-grow:1;\">\n Opened\n <div class=\"attn\">\n ${event.ticket.topic ? event.ticket.topic.name : 'General'}\n </div>\n <div class=\"subtext\">${timeSince(new Date(event.created_on))}</div>\n </div>\n ${handleClose\n ? html`\n <temba-tip text=\"Resolve\" position=\"left\" style=\"width:1.5em\">\n <temba-icon\n class=\"clickable\"\n size=\"1.5\"\n name=\"check\"\n @click=${() => {\n handleClose(event.ticket.uuid);\n }}\n ?clickable=${open}\n />\n </temba-tip>\n `\n : null}\n `;\n }\n};\n\nexport const renderErrorMessage = (\n event: ErrorMessageEvent\n): TemplateResult => {\n return html`\n <temba-icon\n name=\"alert-triangle\"\n style=\"fill:var(--color-error)\"\n ></temba-icon>\n <div class=\"description\">\n ${event.text}\n ${event.type === Events.FAILURE\n ? html`<div>Run ended prematurely, check the flow design.</div>`\n : null}\n </div>\n `;\n};\n\nexport const renderWebhookEvent = (event: WebhookEvent): TemplateResult => {\n return html`\n <div\n class=\"${event.status === 'success' ? '' : 'failed'}\"\n style=\"display: flex\"\n >\n <temba-icon name=\"external-link\"></temba-icon>\n <div class=\"description\">\n ${event.status === 'success'\n ? html`Successfully called ${event.url}`\n : html`Failed to call ${event.url}`}\n </div>\n </div>\n `;\n};\n\nexport const renderAirtimeTransferredEvent = (\n event: AirtimeTransferredEvent\n): TemplateResult => {\n if (parseFloat(event.actual_amount) === 0) {\n return html`<temba-icon\n name=\"alert-triangle\"\n style=\"fill:var(--color-error)\"\n ></temba-icon>\n <div class=\"description error\">Airtime transfer failed</div>`;\n }\n\n return html`<temba-icon name=\"dollar-sign\"></temba-icon>\n <div class=\"description\">\n Transferred\n <div class=\"attn\">${event.actual_amount} ${event.currency}</div>\n of airtime\n </div>`;\n};\n\nexport const renderCallStartedEvent = (): TemplateResult => {\n return html`<temba-icon name=\"phone\"></temba-icon>\n <div class=\"description\">Call Started</div>`;\n};\n\nexport const renderContactLanguageChangedEvent = (\n event: ContactLanguageChangedEvent\n): TemplateResult => {\n return html`<temba-icon name=\"contact\"></temba-icon>\n <div class=\"description\">\n Language updated to <span class=\"attn\">${event.language}</span>\n </div>`;\n};\n\nexport const renderChannelEvent = (event: ChannelEvent): TemplateResult => {\n let eventMessage = '';\n let icon = 'phone';\n\n if (event.channel_event_type === 'mt_miss') {\n eventMessage = 'Missed outgoing call';\n icon = 'phone-missed';\n } else if (event.channel_event_type === 'mo_miss') {\n eventMessage = 'Missed incoming call';\n icon = 'phone-missed';\n } else if (event.channel_event_type === 'new_conversation') {\n eventMessage = 'Started Conversation';\n icon = 'zap';\n } else if (event.channel_event_type === 'welcome_message') {\n eventMessage = 'Welcome Message Sent';\n icon = 'zap';\n } else if (event.channel_event_type === 'referral') {\n eventMessage = 'Referred';\n icon = 'zap';\n } else if (event.channel_event_type === 'follow') {\n eventMessage = 'Followed';\n icon = 'zap';\n } else if (event.channel_event_type === 'stop_contact') {\n eventMessage = 'Stopped';\n icon = 'x-octagon';\n } else if (event.channel_event_type === 'mt_call') {\n eventMessage = 'Outgoing Phone Call';\n } else if (event.channel_event_type == 'mo_call') {\n eventMessage = 'Incoming Phone call';\n }\n\n return html`<temba-icon name=\"${icon}\"></temba-icon>\n <div class=\"description\">${eventMessage}</div>`;\n};\n\nexport const renderCampaignFiredEvent = (\n event: CampaignFiredEvent\n): TemplateResult => {\n return html`<temba-icon name=\"campaign\"></temba-icon>\n <div class=\"description\">\n Campaign\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/campaign/read/${event.campaign.id}\"\n >${event.campaign.name}</span\n >\n ${event.fired_result === 'S' ? 'skipped' : 'triggered'}\n <span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/campaignevent/read/${event.campaign_event.id}\"\n >\n ${event.campaign_event.offset_display}\n ${event.campaign_event.relative_to.name}</span\n >\n </div>`;\n};\n\nexport const renderContactGroupsEvent = (\n event: ContactGroupsEvent\n): TemplateResult => {\n const groups = event.groups_added || event.groups_removed;\n const added = !!event.groups_added;\n return html`\n <temba-icon\n name=\"users\"\n class=\"${getClasses({ added: added, removed: !added })}\"\n ></temba-icon>\n <div class=\"description\">\n ${added ? 'Added to' : 'Removed from'}\n ${oxfordFn(\n groups,\n (group: ObjectReference) =>\n html`<span\n class=\"linked\"\n onclick=\"goto(event)\"\n href=\"/contact/filter/${group.uuid}\"\n >${group.name}</span\n >`\n )}\n ${event.type === Events.FAILURE\n ? html`<div>Run ended prematurely, check the flow design.</div>`\n : null}\n </div>\n `;\n};\n"]}
package/out-tsc/src/list/TembaMenu.js CHANGED
@@ -22,7 +22,7 @@ export class TembaMenu extends RapidElement {
22
22
  this.selection = [];
23
23
  this.pending = [];
24
24
  this.state = {};
25
- this.renderMenuItem = (menuItem) => {
25
+ this.renderMenuItem = (menuItem, parent = null) => {
26
26
  if (menuItem.type === 'divider') {
27
27
  return html `<div class="divider"></div>`;
28
28
  }
@@ -70,7 +70,7 @@ export class TembaMenu extends RapidElement {
70
70
  id="menu-${menuItem.id}"
71
71
  class="${itemClasses}"
72
72
  @click=${event => {
73
- this.handleItemClicked(event, menuItem);
73
+ this.handleItemClicked(event, menuItem, parent);
74
74
  }}
75
75
  >
76
76
  ${menuItem.level === 0
@@ -124,7 +124,7 @@ export class TembaMenu extends RapidElement {
124
124
  }
125
125
 
126
126
  .section {
127
- font-size: 1.875rem;
127
+ font-size: 1.5em;
128
128
  margin-bottom: 0.2em;
129
129
  color: var(--color-text-dark);
130
130
  }
@@ -147,7 +147,7 @@ export class TembaMenu extends RapidElement {
147
147
  user-select: none;
148
148
  -webkit-user-select: none;
149
149
  display: flex;
150
- font-size: 1.15em;
150
+ font-size: 1em;
151
151
  --icon-color: var(--color-text-dark);
152
152
  }
153
153
 
@@ -435,7 +435,7 @@ export class TembaMenu extends RapidElement {
435
435
  }
436
436
 
437
437
  .sub-section {
438
- font-size: 1.1rem;
438
+ font-size: 1rem;
439
439
  color: #888;
440
440
  margin-top: 1rem;
441
441
  margin-left: 0.3rem;
@@ -462,8 +462,8 @@ export class TembaMenu extends RapidElement {
462
462
  }
463
463
 
464
464
  temba-button {
465
- margin-top: 0.5em;
466
- margin-bottom: 0.5em;
465
+ margin-top: 0.2em;
466
+ margin-bottom: 0.2em;
467
467
  margin-left: 0.75em;
468
468
  margin-right: 0.75em;
469
469
  }
@@ -539,7 +539,7 @@ export class TembaMenu extends RapidElement {
539
539
  if (subItem.items) {
540
540
  subItem.items.forEach(inlineItem => {
541
541
  inlineItem.level = item.level + 2;
542
- inlineItem.parent = subItem;
542
+ // inlineItem.parent = subItem;
543
543
  });
544
544
  }
545
545
  });
@@ -577,9 +577,9 @@ export class TembaMenu extends RapidElement {
577
577
  });
578
578
  }
579
579
  }
580
- handleItemClicked(event, menuItem, alias = false) {
581
- if (menuItem.parent) {
582
- this.handleItemClicked(null, menuItem.parent, alias);
580
+ handleItemClicked(event, menuItem, parent = null) {
581
+ if (parent && parent.inline) {
582
+ this.handleItemClicked(null, parent);
583
583
  }
584
584
  if (this.collapsed) {
585
585
  this.collapsed = false;
@@ -619,7 +619,6 @@ export class TembaMenu extends RapidElement {
619
619
  this.dispatchEvent(new Event('change'));
620
620
  }
621
621
  else {
622
- this.dispatchEvent(new Event('change'));
623
622
  if (this.pending && this.pending.length > 0) {
624
623
  // auto select the next pending click
625
624
  const nextId = this.pending.shift();
@@ -629,11 +628,17 @@ export class TembaMenu extends RapidElement {
629
628
  if (nextItem) {
630
629
  this.handleItemClicked(null, nextItem);
631
630
  }
631
+ else {
632
+ this.fireNoPath(nextId);
633
+ }
632
634
  }
633
635
  else {
634
636
  this.fireNoPath(nextId);
635
637
  }
636
638
  }
639
+ else {
640
+ this.dispatchEvent(new Event('change'));
641
+ }
637
642
  this.requestUpdate('root');
638
643
  }
639
644
  }
@@ -807,7 +812,7 @@ export class TembaMenu extends RapidElement {
807
812
  return html `${this.renderMenuItem(item)}
808
813
  <div class="inline-children">
809
814
  ${item.items.map((child) => {
810
- return this.renderMenuItem(child);
815
+ return this.renderMenuItem(child, item);
811
816
  })}
812
817
  </div>`;
813
818
  }
package/out-tsc/src/list/TembaMenu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA0BpD,MAAM,QAAQ,GAAG,CACf,KAAiB,EACjB,EAAU,EACyB,EAAE;IACrC,MAAM,MAAM,GAAG,KAAK,IAAI,EAAE,CAAC;IAE3B,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,IAAc,EAAE,EAAE;QAChD,OAAO,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;QACd,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;KACxB;IAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,OAAO,SAAU,SAAQ,YAAY;IAmYzC;QACE,KAAK,EAAE,CAAC;QA9BV,UAAK,GAAG,KAAK,CAAC;QAyBd,cAAS,GAAa,EAAE,CAAC;QACzB,YAAO,GAAa,EAAE,CAAC;QACvB,UAAK,GAAoC,EAAE,CAAC;QAqUpC,mBAAc,GAAG,CAAC,QAAkB,EAAkB,EAAE;YAC9D,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,EAAE;gBAC/B,OAAO,IAAI,CAAA,6BAA6B,CAAC;aAC1C;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,IAAI,QAAQ,CAAC,MAAM,EAAE;gBAClD,OAAO,IAAI,CAAA,4BAA4B,QAAQ,CAAC,IAAI,QAAQ,CAAC;aAC9D;YAED,IAAI,QAAQ,CAAC,IAAI,KAAK,cAAc,EAAE;gBACpC,OAAO,IAAI,CAAA;eACF,QAAQ,CAAC,IAAI;iBACX,KAAK,CAAC,EAAE;oBACf,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;gBAC1C,CAAC;SACA,CAAC;aACL;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YAC7C,MAAM,eAAe,GACnB,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;YAE3D,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI;gBACxB,CAAC,CAAC,IAAI,CAAA;kBACM,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;kBAClC,QAAQ,CAAC,IAAI;uBACR;gBACjB,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc;gBAC3C,CAAC,CAAC,IAAI,CAAA;kBACM,QAAQ,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;kBAClC,QAAQ,CAAC,cAAc;;uBAElB;gBACjB,CAAC,CAAC,IAAI,CAAC;YAET,MAAM,WAAW,GAAG,UAAU,CAAC;gBAC7B,CAAC,OAAO,GAAG,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI;gBAC7B,gBAAgB,EAAE,eAAe;gBACjC,QAAQ,EAAE,UAAU;gBACpB,IAAI,EAAE,IAAI;gBACV,MAAM,EAAE,QAAQ,CAAC,MAAM;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,CAAC,EAAE;gBAC3D,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;gBACnC,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa;aAClC,CAAC,CAAC;YAEH,MAAM,IAAI,GAAG,IAAI,CAAA;0BACK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI;;;;mBAIrC,QAAQ,CAAC,EAAE;iBACb,WAAW;iBACX,KAAK,CAAC,EAAE;gBACf,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YAC1C,CAAC;;UAEC,QAAQ,CAAC,KAAK,KAAK,CAAC;gBACpB,CAAC,CAAC,IAAI,CAAA;;sBAEM,QAAQ,CAAC,IAAI;;iBAElB,IAAI;cACP;gBACJ,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,GAAG,aAAa,EAAE;;;;;8DAKqB,IAAI,CAAC,KAAK;gBAC1D,CAAC,CAAC,QAAQ;gBACV,CAAC,CAAC,QAAQ;;cAEV,QAAQ,CAAC,IAAI;;YAEf,QAAQ,CAAC,KAAK,GAAG,CAAC;gBAClB,CAAC,CAAC,QAAQ,CAAC,MAAM;oBACf,CAAC,CAAC,IAAI,CAAA;kCACc,UAAU,IAAI,eAAe;wBAC3C,CAAC,CAAC,IAAI;wBACN,CAAC,CAAC,MAAM;+BACG;oBACjB,CAAC,CAAC,IAAI,CAAA,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,IAAI,CAAC;wBAC1C,CAAC,CAAC,IAAI,CAAA;;0BAEE,QAAQ,CAAC,KAAK,CAAC,cAAc,EAAE;;qBAEpC;wBACH,CAAC,CAAC,IAAI,CAAA,2BAA2B,EAAE;gBACzC,CAAC,CAAC,IAAI;;;;;gCAKc,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,UAAU,CAAC;YAErE,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;IApaF,CAAC;IApYD,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgWT,CAAC;IACJ,CAAC;IAoCO,gBAAgB,CAAC,EAAU;QACjC,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,IAAI,EAAE,EAAE;YACN,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAC3B,IAAI,CAAC,SAAS,EAAE;gBACd,SAAS,GAAG,EAAE,CAAC;gBACf,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;aAC5B;SACF;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACxB,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;SAClD;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YACnD,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;SACnC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG;gBACV,KAAK,EAAE,CAAC,CAAC;gBACT,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC;YAEF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC3B;SACF;IACH,CAAC;IAEM,OAAO,CAAC,OAAiB,IAAI;QAClC,IAAI,CAAC,IAAI,EAAE;YACT,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;SAC5B;QAED,2CAA2C;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SAC7B;aAAM;YACL,IAAI,CAAC,GAAG,EAAE,CAAC;YACX,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;SACpB;IACH,CAAC;IAEO,UAAU,CAAC,SAAiB;QAClC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEhC,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,IAAI,CAAC,EAAE;YACb,SAAS,EAAE,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;YACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,SAAS,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM;SAC1E,CAAC;QAEF,uCAAuC;QACvC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC3C,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEtC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QACtD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IAED,gEAAgE;IACxD,SAAS,CAAC,IAAc,EAAE,WAAW,GAAG,IAAI;QAClD,IAAI,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAClD,CAAC,KAAiB,EAAE,EAAE;gBACpB,wBAAwB;gBACxB,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;oBACtB,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;oBAC/B,mEAAmE;oBACnE,IAAI,OAAO,CAAC,KAAK,EAAE;wBACjB,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;4BACjC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;4BAClC,UAAU,CAAC,MAAM,GAAG,OAAO,CAAC;wBAC9B,CAAC,CAAC,CAAC;qBACJ;gBACH,CAAC,CAAC,CAAC;gBAEH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC3B,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAC9B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC3C,qCAAqC;oBACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBACpC,IAAI,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;wBAC9B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;wBACzC,IAAI,QAAQ,CAAC,IAAI,EAAE;4BACjB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;yBAC7C;6BAAM;4BACL,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;yBACzB;qBACF;iBACF;qBAAM;oBACL,6BAA6B;oBAC7B,IACE,WAAW;wBACX,KAAK,CAAC,MAAM,GAAG,CAAC;wBAChB,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC;wBAC1B,CAAC,IAAI,CAAC,MAAM,EACZ;wBACA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;4BACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gCACd,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;gCACnC,MAAM;6BACP;yBACF;qBACF;iBACF;YACH,CAAC,CACF,CAAC;SACH;IACH,CAAC;IAEO,iBAAiB,CACvB,KAAiB,EACjB,QAAkB,EAClB,KAAK,GAAG,KAAK;QAEb,IAAI,QAAQ,CAAC,MAAM,EAAE;YACnB,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;SACtD;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;QAED,IAAI,KAAK,EAAE;YACT,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;QAED,IAAI,QAAQ,CAAC,IAAI,IAAI,cAAc,EAAE;YACnC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,aAAa,EAAE;gBAClD,KAAK,EAAE,QAAQ,CAAC,IAAI;gBACpB,IAAI,EAAE,QAAQ,CAAC,IAAI;gBACnB,SAAS,EAAE,QAAQ,CAAC,SAAS;aAC9B,CAAC,CAAC;YACH,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,OAAO,EAAE;YACpB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;SAC5B;aAAM;YACL,IAAI,QAAQ,CAAC,KAAK,KAAK,CAAC,EAAE;gBACxB;;;;kBAIE;aACH;YAED,uBAAuB;YACvB,IAAI,QAAQ,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;gBAC3C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;aACxD;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,MAAM,CACnB,QAAQ,CAAC,KAAK,EACd,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,EACtC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAClC,CAAC;aACH;YAED,IAAI,QAAQ,CAAC,QAAQ,EAAE;gBACrB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACzC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;aACzC;iBAAM;gBACL,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACxC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC3C,qCAAqC;oBACrC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;oBACpC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;oBAChC,IAAI,MAAM,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;wBACzD,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC;wBACnD,IAAI,QAAQ,EAAE;4BACZ,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;yBACxC;qBACF;yBAAM;wBACL,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;qBACzB;iBACF;gBACD,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;aAC5B;SACF;IACH,CAAC;IAEM,sBAAsB;QAC3B,uCAAuC;QACvC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACrB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;YAC3D,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gBACjB,GAAG,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAC3D,CAAC,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAEM,SAAS,CAAC,EAAU;QACzB,MAAM,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAEhD,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAC;SACb;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3D,CAAC;IAEM,uBAAuB,CAAC,SAAmB;QAChD,MAAM,IAAI,GAAG,CAAC,GAAG,SAAS,CAAC,CAAC;QAC5B,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,IAAI,IAAI,GAAG,IAAI,CAAC;QAChB,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAClC,IAAI,KAAK,EAAE;gBACT,IAAI,GAAG,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC;gBAClC,IAAI,IAAI,EAAE;oBACR,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;iBACpB;qBAAM;oBACL,MAAM;iBACP;aACF;iBAAM;gBACL,MAAM;aACP;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,YAAY;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAEM,YAAY,CAAC,IAAc;QAChC,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QAEpB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC3B;IACH,CAAC;IAEM,gBAAgB,CAAC,IAAY;QAClC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAEtD,0CAA0C;QAC1C,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;QAE1D,IAAI,CAAC,OAAO,EAAE;YACZ,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SAC3B;IACH,CAAC;IAEM,KAAK,CAAC,cAAc,CAAC,IAAY;QACtC,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAE3D,sDAAsD;QACtD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1B,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAChE,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO;aACR;SACF;QAED,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;QACtB,OAAO,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7B,MAAM,MAAM,GAAG,WAAW,CAAC,KAAK,EAAE,CAAC;YACnC,IAAI,MAAM,EAAE;gBACV,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;oBAChB,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;oBAC7B,MAAM,IAAI,CAAC,YAAY,CAAC;iBACzB;gBAED,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC;gBAC3C,IAAI,CAAC,KAAK,EAAE;oBACV,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;iBAC3C;qBAAM;oBACL,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;SACF;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;QACzB,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,IAAI,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;YAC1C,MAAM,QAAQ,GACZ,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC;YACxE,OAAO,QAAQ,CAAC;SACjB;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,UAAU,CAAC,QAAkB;QACnC,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CACpC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAC/C,CAAC;QACF,OAAO,QAAQ,CAAC;IAClB,CAAC;IAuGM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAClC,OAAO,IAAI,CAAA;;;;;SAKR,CAAC;SACL;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAClC,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,MAAM,CAAC,IAAI,CACT,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;UAGzD,KAAK;aACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC5B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;;UAGF,KAAK;aACJ,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;aAC7B,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;YACtB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC;;aAEC,CACR,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YACnC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC;YAE1C,IAAI,SAAS,GAAG,KAAK,CAAC;YACtB,IAAI,QAAQ,EAAE;gBACZ,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACvB,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACrD,uCAAuC;gBACvC,IAAI,SAAS,CAAC,SAAS,EAAE;oBACvB,SAAS,GAAG,SAAS,CAAC,SAAS,KAAK,WAAW,CAAC;iBACjD;gBACD,0CAA0C;qBACrC;oBACH,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,GAAG,CAAC,EAAE;wBAC9C,SAAS,GAAG,KAAK,CAAC;qBACnB;iBACF;aACF;iBAAM;gBACL,KAAK,GAAG,IAAI,CAAC;aACd;YAED,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;gBACjD,MAAM,CAAC,IAAI,CACT,IAAI,CAAA;qBACO,UAAU,CAAC;oBAClB,KAAK,EAAE,IAAI;oBACX,CAAC,QAAQ,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI;oBAC9B,SAAS;iBACV,CAAC;;cAEA,CAAC,IAAI,CAAC,OAAO;oBACb,CAAC,CAAC,IAAI,CAAA,wBAAwB,QAAQ,CAAC,IAAI,QAAQ;oBACnD,CAAC,CAAC,IAAI;cACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAc,EAAE,EAAE;oBAC7B,IAAI,IAAI,CAAC,MAAM,EAAE;wBACf,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;;sBAEjC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAe,EAAE,EAAE;4BACnC,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;wBACpC,CAAC,CAAC;yBACG,CAAC;qBACX;oBACD,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;gBACnC,CAAC,CAAC;iBACG,CACR,CAAC;aACH;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,IAAI,CAAA;oBACD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;;QAEnD,MAAM;WACH,CAAC;QACR,OAAO,IAAI,CAAA,GAAG,IAAI,EAAE,CAAC;IACvB,CAAC;CACF;AA9hBC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAId;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACT","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\n\nexport interface MenuItem {\n id?: string;\n vanity_id?: string;\n name?: string;\n count?: number;\n icon?: string;\n collapsed_icon?: string;\n endpoint?: string;\n loading?: boolean;\n bottom?: boolean;\n level?: number;\n trigger?: string;\n href?: string;\n items?: MenuItem[];\n inline?: boolean;\n type?: string;\n parent?: MenuItem;\n on_submit?: string;\n}\n\ninterface MenuItemState {\n collapsed?: string;\n}\n\nconst findItem = (\n items: MenuItem[],\n id: string\n): { item: MenuItem; index: number } => {\n const search = items || [];\n\n const index = search.findIndex((item: MenuItem) => {\n return item.id == id || item.vanity_id == id;\n });\n\n if (index > -1) {\n const item = search[index];\n return { item, index };\n }\n\n return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends RapidElement {\n static get styles() {\n return css`\n :host {\n width: 100%;\n display: block;\n --color-widget-bg-focused: transparent;\n --options-block-shadow: none;\n }\n\n .section {\n font-size: 1.875rem;\n margin-bottom: 0.2em;\n color: var(--color-text-dark);\n }\n\n .collapse-toggle {\n width: 0.5em;\n cursor: pointer;\n display: block;\n margin-right: 5px;\n margin-top: 3px;\n margin-bottom: 3px;\n }\n\n .collapse-toggle:hover {\n background: rgb(100, 100, 100, 0.05);\n }\n\n .item {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n display: flex;\n font-size: 1.15em;\n --icon-color: var(--color-text-dark);\n }\n\n .item.selected {\n background: var(--color-selection);\n color: var(--color-primary-dark);\n --icon-color: var(--color-primary-dark);\n }\n\n .root {\n display: flex;\n flex-direction: row;\n height: 100%;\n }\n\n .level {\n display: flex;\n flex-direction: column;\n }\n\n .level.hidden {\n display: none;\n }\n\n .submenu {\n }\n\n .level-0 > .item {\n background: var(--color-primary-dark);\n --icon-color: #fff;\n font-size: 1em;\n }\n\n .level-0 > .top {\n padding-top: var(--menu-padding);\n background: var(--color-primary-dark);\n }\n\n .level-0 > .empty {\n background: var(--color-primary-dark);\n align-self: stretch;\n flex-grow: 1;\n }\n\n .level-0 > .bottom {\n height: 1em;\n background: var(--color-primary-dark);\n }\n\n .level-0 > .item > .details {\n display: none !important;\n }\n\n .level-0.expanding {\n }\n\n .level-0.expanded {\n background: inherit;\n }\n\n .level-0 > .item.selected {\n background: inherit;\n --icon-color: var(--color-primary-dark);\n }\n\n .level {\n padding: var(--menu-padding);\n }\n\n .level-0 {\n padding: 0px;\n }\n\n .item {\n padding: 0.2em 0.75em;\n margin-top: 0.1em;\n border-radius: var(--curvature);\n display: flex;\n\n min-width: 12em;\n max-width: 12em;\n }\n\n .item > temba-icon {\n margin-right: 0.5em;\n }\n\n .item.inline > temba-icon {\n }\n\n .item > .details > .name {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 0;\n }\n\n .level-0 > .item {\n padding: 1em 1em;\n margin-top: 0em;\n border-radius: 0px;\n min-width: inherit;\n max-width: inherit;\n }\n\n .level-0 > .item > temba-icon {\n margin-right: 0px;\n }\n\n .level-0 > .item > .name {\n min-width: 0px;\n }\n\n .count {\n align-self: center;\n margin-left: 1em;\n font-size: 0.8em;\n font-weight: 400;\n }\n\n .level-0 > .item-top {\n background: var(--color-primary-dark);\n min-height: var(--curvature);\n }\n\n .level-0 > .item-bottom {\n background: var(--color-primary-dark);\n min-height: var(--curvature);\n }\n\n .level-0 > .item-bottom.selected {\n border-top-right-radius: var(--curvature);\n }\n\n .level-0 > .item-top.selected {\n border-bottom-right-radius: var(--curvature);\n }\n\n .level-0 > .selected-top {\n }\n\n .level-0 > .item:hover {\n background: rgba(var(--primary-rgb), 0.85);\n }\n\n .level-0 > .item.selected:hover {\n background: inherit;\n }\n\n .inline-children {\n }\n\n .inline-children .item {\n }\n\n .item.inline {\n border: 0px solid transparent;\n }\n\n .level-1,\n .level-2 {\n border-right: 1px solid rgba(0 0 0 / 8%);\n box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n }\n\n .level-1 {\n transition: opacity 100ms linear, margin 200ms linear;\n overflow-y: auto;\n z-index: 1500;\n }\n\n .level-2 {\n background: #fbfbfb;\n overflow-y: auto;\n z-index: 1000;\n }\n\n .level-2 .item .details {\n overflow: hidden;\n }\n\n .level-2 .item {\n min-width: 12em;\n max-width: 12em;\n }\n\n .level-1 .item {\n overflow: hidden;\n max-width: 12em;\n min-width: 12em;\n min-height: 1.5em;\n max-height: 1.5em;\n transition: min-width var(--transition-speed) !important;\n }\n\n .level-1 .item .details {\n }\n\n .collapsed .item {\n overflow: hidden;\n min-width: 0;\n margin: 0;\n }\n\n .item .details {\n opacity: 1;\n min-height: 1.5em;\n max-height: 1.5em;\n align-items: center;\n }\n\n .item .details .name {\n }\n\n .item temba-icon {\n }\n\n .collapsed .item {\n margin-bottom: 0.5em;\n }\n\n .collapsed .item .details {\n overflow: hidden;\n max-height: 0em;\n max-width: 0em;\n }\n\n .collapsed .item .details {\n max-height: 0em;\n }\n\n .collapsed .item temba-icon {\n margin-right: 0;\n }\n\n .section {\n max-width: 12em;\n }\n\n .collapsed .section {\n opacity: 0;\n max-width: 0em;\n max-height: 0.6em;\n }\n\n .collapsed.level-1 {\n overflow: hidden;\n padding: 0.5em;\n --icon-color: #999;\n }\n\n .collapsed .item .right {\n flex-grow: 1;\n }\n\n .collapse-icon {\n display: none;\n }\n\n .collapsed .collapse-icon {\n --icon-color: #ccc;\n display: block;\n }\n\n .collapsed .item.iconless {\n max-height: 0em;\n padding: 0em;\n min-height: 0em;\n margin-bottom: 0em;\n }\n\n .divider {\n height: 1px;\n background: #f3f3f3;\n margin: 0.5em 0.75em;\n min-height: 1px;\n }\n\n .collapsed .divider {\n height: 0;\n margin: 0;\n padding: 0;\n min-height: 0px;\n }\n\n .sub-section {\n font-size: 1.1rem;\n color: #888;\n margin-top: 1rem;\n margin-left: 0.3rem;\n }\n\n .fully-collapsed .level-0 {\n z-index: 1;\n }\n\n .fully-collapsed .level-1 {\n margin-left: -245px;\n z-index: 0;\n border: none;\n }\n\n .fully-collapsed .level-1 .item,\n .fully-collapsed .level-1 .divider {\n opacity: 0;\n }\n\n .fully-collapsed .level-2,\n .fully-collapsed .level-3 {\n display: none;\n }\n\n temba-button {\n margin-top: 0.5em;\n margin-bottom: 0.5em;\n margin-left: 0.75em;\n margin-right: 0.75em;\n }\n `;\n }\n\n @property({ type: Boolean })\n wraps = false;\n\n @property({ type: Boolean })\n wait: boolean;\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: String })\n expanding: string;\n\n @property({ type: String })\n value: string;\n\n // submenu to constrain to\n @property({ type: String })\n submenu: string;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n // http promise to monitor for completeness\n public httpComplete: Promise<void>;\n\n root: MenuItem;\n selection: string[] = [];\n pending: string[] = [];\n state: { [id: string]: MenuItemState } = {};\n\n constructor() {\n super();\n }\n\n private getMenuItemState(id: string): MenuItemState {\n let itemState = {};\n if (id) {\n itemState = this.state[id];\n if (!itemState) {\n itemState = {};\n this.state[id] = itemState;\n }\n }\n return itemState;\n }\n\n public updated(changes: Map<string, any>) {\n if (changes.has('value')) {\n this.setSelection((this.value || '').split('/'));\n }\n\n if (changes.has('submenu') && !changes.has('value')) {\n this.setSelection([this.submenu]);\n }\n\n if (changes.has('endpoint')) {\n this.root = {\n level: -1,\n endpoint: this.endpoint,\n };\n\n if (!this.wait) {\n this.loadItems(this.root);\n }\n }\n }\n\n public refresh(path: string[] = null) {\n if (!path) {\n path = [...this.selection];\n }\n\n // go up the tree until we find an endpoint\n const item = this.getMenuItemForSelection(path);\n\n if (item.endpoint) {\n this.loadItems(item, false);\n } else {\n path.pop();\n this.refresh(path);\n }\n }\n\n private fireNoPath(missingId: string) {\n const item = this.getMenuItem();\n\n const details = {\n item: item.id,\n selection: '/' + this.selection.join('/'),\n endpoint: item.endpoint,\n path: missingId + '/' + this.pending.join('/') + document.location.search,\n };\n\n // remove any excess from our selection\n const selection = this.selection.join('/');\n selection.replace(details.path, '');\n this.selection = selection.split('/');\n\n this.fireCustomEvent(CustomEventType.NoPath, details);\n this.pending = [];\n this.requestUpdate('root');\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private loadItems(item: MenuItem, selectFirst = true) {\n if (item && item.endpoint) {\n item.loading = true;\n this.httpComplete = fetchResults(item.endpoint).then(\n (items: MenuItem[]) => {\n // update our item level\n items.forEach(subItem => {\n subItem.level = item.level + 1;\n // if we came with preset items, set the level for them accordingly\n if (subItem.items) {\n subItem.items.forEach(inlineItem => {\n inlineItem.level = item.level + 2;\n inlineItem.parent = subItem;\n });\n }\n });\n\n item.items = items;\n item.loading = false;\n this.requestUpdate('root');\n this.scrollSelectedIntoView();\n if (this.pending && this.pending.length > 0) {\n // auto select the next pending click\n const nextId = this.pending.shift();\n if (nextId && items.length > 0) {\n const nextItem = findItem(items, nextId);\n if (nextItem.item) {\n this.handleItemClicked(null, nextItem.item);\n } else {\n this.fireNoPath(nextId);\n }\n }\n } else {\n // auto select the first item\n if (\n selectFirst &&\n items.length > 0 &&\n this.selection.length >= 1 &&\n !item.inline\n ) {\n for (const item of items) {\n if (!item.type) {\n this.handleItemClicked(null, item);\n break;\n }\n }\n }\n }\n }\n );\n }\n }\n\n private handleItemClicked(\n event: MouseEvent,\n menuItem: MenuItem,\n alias = false\n ) {\n if (menuItem.parent) {\n this.handleItemClicked(null, menuItem.parent, alias);\n }\n\n if (this.collapsed) {\n this.collapsed = false;\n }\n\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (menuItem.type == 'modax-button') {\n this.fireCustomEvent(CustomEventType.ButtonClicked, {\n title: menuItem.name,\n href: menuItem.href,\n on_submit: menuItem.on_submit,\n });\n return;\n }\n\n if (menuItem.trigger) {\n window[menuItem.trigger]();\n } else {\n if (menuItem.level === 0) {\n /* this.expanding = menuItem.id;\n window.setTimeout(() => {\n this.expanding = null;\n }, 60);\n */\n }\n\n // update our selection\n if (menuItem.level >= this.selection.length) {\n this.selection.push(menuItem.vanity_id || menuItem.id);\n } else {\n this.selection.splice(\n menuItem.level,\n this.selection.length - menuItem.level,\n menuItem.vanity_id || menuItem.id\n );\n }\n\n if (menuItem.endpoint) {\n this.loadItems(menuItem, !menuItem.href);\n this.dispatchEvent(new Event('change'));\n } else {\n this.dispatchEvent(new Event('change'));\n if (this.pending && this.pending.length > 0) {\n // auto select the next pending click\n const nextId = this.pending.shift();\n const item = this.getMenuItem();\n if (nextId && item && item.items && item.items.length > 0) {\n const nextItem = findItem(item.items, nextId).item;\n if (nextItem) {\n this.handleItemClicked(null, nextItem);\n }\n } else {\n this.fireNoPath(nextId);\n }\n }\n this.requestUpdate('root');\n }\n }\n }\n\n public scrollSelectedIntoView() {\n // makes sure we are scrolled into view\n window.setTimeout(() => {\n const eles = this.shadowRoot.querySelectorAll('.selected');\n eles.forEach(ele => {\n ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n });\n }, 0);\n }\n\n public clickItem(id: string): boolean {\n const path = [...this.selection];\n path.splice(path.length - 1, 1, id);\n const item = this.getMenuItemForSelection(path);\n\n if (item) {\n this.handleItemClicked(null, item);\n this.scrollSelectedIntoView();\n return true;\n }\n return false;\n }\n\n public getMenuItem(): MenuItem {\n return this.getMenuItemForSelection([...this.selection]);\n }\n\n public getMenuItemForSelection(selection: string[]) {\n const path = [...selection];\n let items = this.root.items;\n let item = null;\n while (path.length > 0) {\n const step = path.splice(0, 1)[0];\n if (items) {\n item = findItem(items, step).item;\n if (item) {\n items = item.items;\n } else {\n break;\n }\n } else {\n break;\n }\n }\n\n return item;\n }\n\n public getSelection() {\n return this.selection;\n }\n\n public setSelection(path: string[]) {\n this.pending = [...path];\n this.selection = [];\n\n if (this.wait) {\n this.wait = false;\n this.loadItems(this.root);\n }\n }\n\n public setSelectionPath(path: string) {\n const asPath = path.split('/').filter(step => !!step);\n\n // first try to click in the current space\n const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n if (!clicked) {\n this.wait = true;\n this.setSelection(asPath);\n }\n }\n\n public async setFocusedItem(path: string) {\n const focusedPath = path.split('/').filter(step => !!step);\n\n // if we don't match at the first level, we are a noop\n if (focusedPath.length > 0) {\n const rootItem = findItem(this.root.items, focusedPath[0]).item;\n if (!rootItem) {\n return;\n }\n }\n\n const newPath = [];\n let level = this.root;\n while (focusedPath.length > 0) {\n const nextId = focusedPath.shift();\n if (nextId) {\n if (!level.items) {\n this.loadItems(level, false);\n await this.httpComplete;\n }\n\n level = findItem(level.items, nextId).item;\n if (!level) {\n focusedPath.splice(0, focusedPath.length);\n } else {\n newPath.push(nextId);\n }\n }\n }\n\n this.selection = newPath;\n this.requestUpdate('root');\n }\n\n private isSelected(menuItem: MenuItem) {\n if (menuItem.level < this.selection.length) {\n const selected =\n this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n return selected;\n }\n return false;\n }\n\n private isExpanded(menuItem: MenuItem) {\n const expanded = !!this.selection.find(\n id => id === menuItem.vanity_id || menuItem.id\n );\n return expanded;\n }\n\n private renderMenuItem = (menuItem: MenuItem): TemplateResult => {\n if (menuItem.type === 'divider') {\n return html`<div class=\"divider\"></div>`;\n }\n\n if (menuItem.type === 'section' || menuItem.inline) {\n return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n }\n\n if (menuItem.type === 'modax-button') {\n return html`<temba-button\n name=${menuItem.name}\n @click=${event => {\n this.handleItemClicked(event, menuItem);\n }}\n />`;\n }\n\n const isSelected = this.isSelected(menuItem);\n const isChildSelected =\n isSelected && this.selection.length > menuItem.level + 1;\n\n const icon = menuItem.icon\n ? html`<temba-icon\n size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n name=\"${menuItem.icon}\"\n ></temba-icon>`\n : null;\n\n const collapsedIcon = menuItem.collapsed_icon\n ? html`<temba-icon\n size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n name=\"${menuItem.collapsed_icon}\"\n class=\"collapse-icon\"\n ></temba-icon>`\n : null;\n\n const itemClasses = getClasses({\n ['menu-' + menuItem.id]: true,\n 'child-selected': isChildSelected,\n selected: isSelected,\n item: true,\n inline: menuItem.inline,\n expanding: this.expanding && this.expanding === menuItem.id,\n expanded: this.isExpanded(menuItem),\n iconless: !icon && !collapsedIcon,\n });\n\n const item = html` <div\n class=\"item-top ${isSelected ? 'selected' : null} \"\n ></div>\n\n <div\n id=\"menu-${menuItem.id}\"\n class=\"${itemClasses}\"\n @click=${event => {\n this.handleItemClicked(event, menuItem);\n }}\n >\n ${menuItem.level === 0\n ? html`<temba-tip\n style=\"display:flex;\"\n text=\"${menuItem.name}\"\n position=\"right\"\n >${icon}</temba-tip\n >`\n : html`${icon}${collapsedIcon}`}\n\n <div class=\"details\" style=\"flex-grow:1;display:flex\">\n <div\n class=\"name\"\n style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n ? 'normal'\n : 'nowrap'};\"\n >\n ${menuItem.name}\n </div>\n ${menuItem.level > 0\n ? menuItem.inline\n ? html`<temba-icon\n name=\"chevron-${isSelected || isChildSelected\n ? 'up'\n : 'down'}\"\n ></temba-icon>`\n : html`${menuItem.count || menuItem.count == 0\n ? html`\n <div class=\"count\">\n ${menuItem.count.toLocaleString()}\n </div>\n `\n : html`<div class=\"count\"></div>`}`\n : null}\n </div>\n <div class=\"right\"></div>\n </div>\n\n <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n return item;\n };\n\n public render(): TemplateResult {\n if (!this.root || !this.root.items) {\n return html`<temba-loading\n units=\"3\"\n size=\"10\"\n direction=\"column\"\n style=\"margin:1em;margin-right:0em\"\n />`;\n }\n\n let items = this.root.items || [];\n const levels = [];\n\n levels.push(\n html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n <div class=\"top\"></div>\n\n ${items\n .filter(item => !item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n\n <div class=\"empty\"></div>\n ${items\n .filter(item => !!item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n <div class=\"bottom\"></div>\n </div>`\n );\n\n this.selection.forEach((id, index) => {\n const selected = findItem(items, id).item;\n\n let collapsed = false;\n if (selected) {\n items = selected.items;\n const itemState = this.getMenuItemState(selected.id);\n // users set an explicit collapse state\n if (itemState.collapsed) {\n collapsed = itemState.collapsed === 'collapsed';\n }\n // otherwise pick a default collapse state\n else {\n if (this.selection.length > selected.level + 2) {\n collapsed = false;\n }\n }\n } else {\n items = null;\n }\n\n if (items && items.length > 0 && !selected.inline) {\n levels.push(\n html`<div\n class=\"${getClasses({\n level: true,\n ['level-' + (index + 1)]: true,\n collapsed,\n })}\"\n >\n ${!this.submenu\n ? html`<div class=\"section\">${selected.name}</div>`\n : null}\n ${items.map((item: MenuItem) => {\n if (item.inline) {\n return html`${this.renderMenuItem(item)}\n <div class=\"inline-children\">\n ${item.items.map((child: MenuItem) => {\n return this.renderMenuItem(child);\n })}\n </div>`;\n }\n return this.renderMenuItem(item);\n })}\n </div>`\n );\n }\n });\n\n const menu = html`<div\n class=\"root ${this.collapsed ? 'fully-collapsed' : ''}\"\n >\n ${levels}\n </div>`;\n return html`${menu}`;\n }\n}\n"]}
1
+ {"version":3,"file":"TembaMenu.js","sourceRoot":"","sources":["../../../src/list/TembaMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { fetchResults, getClasses } from '../utils';\n\nexport interface MenuItem {\n id?: string;\n vanity_id?: string;\n name?: string;\n count?: number;\n icon?: string;\n collapsed_icon?: string;\n endpoint?: string;\n loading?: boolean;\n bottom?: boolean;\n level?: number;\n trigger?: string;\n href?: string;\n items?: MenuItem[];\n inline?: boolean;\n type?: string;\n on_submit?: string;\n}\n\ninterface MenuItemState {\n collapsed?: string;\n}\n\nconst findItem = (\n items: MenuItem[],\n id: string\n): { item: MenuItem; index: number } => {\n const search = items || [];\n\n const index = search.findIndex((item: MenuItem) => {\n return item.id == id || item.vanity_id == id;\n });\n\n if (index > -1) {\n const item = search[index];\n return { item, index };\n }\n\n return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends RapidElement {\n static get styles() {\n return css`\n :host {\n width: 100%;\n display: block;\n --color-widget-bg-focused: transparent;\n --options-block-shadow: none;\n }\n\n .section {\n font-size: 1.5em;\n margin-bottom: 0.2em;\n color: var(--color-text-dark);\n }\n\n .collapse-toggle {\n width: 0.5em;\n cursor: pointer;\n display: block;\n margin-right: 5px;\n margin-top: 3px;\n margin-bottom: 3px;\n }\n\n .collapse-toggle:hover {\n background: rgb(100, 100, 100, 0.05);\n }\n\n .item {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n display: flex;\n font-size: 1em;\n --icon-color: var(--color-text-dark);\n }\n\n .item.selected {\n background: var(--color-selection);\n color: var(--color-primary-dark);\n --icon-color: var(--color-primary-dark);\n }\n\n .root {\n display: flex;\n flex-direction: row;\n height: 100%;\n }\n\n .level {\n display: flex;\n flex-direction: column;\n }\n\n .level.hidden {\n display: none;\n }\n\n .submenu {\n }\n\n .level-0 > .item {\n background: var(--color-primary-dark);\n --icon-color: #fff;\n font-size: 1em;\n }\n\n .level-0 > .top {\n padding-top: var(--menu-padding);\n background: var(--color-primary-dark);\n }\n\n .level-0 > .empty {\n background: var(--color-primary-dark);\n align-self: stretch;\n flex-grow: 1;\n }\n\n .level-0 > .bottom {\n height: 1em;\n background: var(--color-primary-dark);\n }\n\n .level-0 > .item > .details {\n display: none !important;\n }\n\n .level-0.expanding {\n }\n\n .level-0.expanded {\n background: inherit;\n }\n\n .level-0 > .item.selected {\n background: inherit;\n --icon-color: var(--color-primary-dark);\n }\n\n .level {\n padding: var(--menu-padding);\n }\n\n .level-0 {\n padding: 0px;\n }\n\n .item {\n padding: 0.2em 0.75em;\n margin-top: 0.1em;\n border-radius: var(--curvature);\n display: flex;\n\n min-width: 12em;\n max-width: 12em;\n }\n\n .item > temba-icon {\n margin-right: 0.5em;\n }\n\n .item.inline > temba-icon {\n }\n\n .item > .details > .name {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 0;\n }\n\n .level-0 > .item {\n padding: 1em 1em;\n margin-top: 0em;\n border-radius: 0px;\n min-width: inherit;\n max-width: inherit;\n }\n\n .level-0 > .item > temba-icon {\n margin-right: 0px;\n }\n\n .level-0 > .item > .name {\n min-width: 0px;\n }\n\n .count {\n align-self: center;\n margin-left: 1em;\n font-size: 0.8em;\n font-weight: 400;\n }\n\n .level-0 > .item-top {\n background: var(--color-primary-dark);\n min-height: var(--curvature);\n }\n\n .level-0 > .item-bottom {\n background: var(--color-primary-dark);\n min-height: var(--curvature);\n }\n\n .level-0 > .item-bottom.selected {\n border-top-right-radius: var(--curvature);\n }\n\n .level-0 > .item-top.selected {\n border-bottom-right-radius: var(--curvature);\n }\n\n .level-0 > .selected-top {\n }\n\n .level-0 > .item:hover {\n background: rgba(var(--primary-rgb), 0.85);\n }\n\n .level-0 > .item.selected:hover {\n background: inherit;\n }\n\n .inline-children {\n }\n\n .inline-children .item {\n }\n\n .item.inline {\n border: 0px solid transparent;\n }\n\n .level-1,\n .level-2 {\n border-right: 1px solid rgba(0 0 0 / 8%);\n box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n }\n\n .level-1 {\n transition: opacity 100ms linear, margin 200ms linear;\n overflow-y: auto;\n z-index: 1500;\n }\n\n .level-2 {\n background: #fbfbfb;\n overflow-y: auto;\n z-index: 1000;\n }\n\n .level-2 .item .details {\n overflow: hidden;\n }\n\n .level-2 .item {\n min-width: 12em;\n max-width: 12em;\n }\n\n .level-1 .item {\n overflow: hidden;\n max-width: 12em;\n min-width: 12em;\n min-height: 1.5em;\n max-height: 1.5em;\n transition: min-width var(--transition-speed) !important;\n }\n\n .level-1 .item .details {\n }\n\n .collapsed .item {\n overflow: hidden;\n min-width: 0;\n margin: 0;\n }\n\n .item .details {\n opacity: 1;\n min-height: 1.5em;\n max-height: 1.5em;\n align-items: center;\n }\n\n .item .details .name {\n }\n\n .item temba-icon {\n }\n\n .collapsed .item {\n margin-bottom: 0.5em;\n }\n\n .collapsed .item .details {\n overflow: hidden;\n max-height: 0em;\n max-width: 0em;\n }\n\n .collapsed .item .details {\n max-height: 0em;\n }\n\n .collapsed .item temba-icon {\n margin-right: 0;\n }\n\n .section {\n max-width: 12em;\n }\n\n .collapsed .section {\n opacity: 0;\n max-width: 0em;\n max-height: 0.6em;\n }\n\n .collapsed.level-1 {\n overflow: hidden;\n padding: 0.5em;\n --icon-color: #999;\n }\n\n .collapsed .item .right {\n flex-grow: 1;\n }\n\n .collapse-icon {\n display: none;\n }\n\n .collapsed .collapse-icon {\n --icon-color: #ccc;\n display: block;\n }\n\n .collapsed .item.iconless {\n max-height: 0em;\n padding: 0em;\n min-height: 0em;\n margin-bottom: 0em;\n }\n\n .divider {\n height: 1px;\n background: #f3f3f3;\n margin: 0.5em 0.75em;\n min-height: 1px;\n }\n\n .collapsed .divider {\n height: 0;\n margin: 0;\n padding: 0;\n min-height: 0px;\n }\n\n .sub-section {\n font-size: 1rem;\n color: #888;\n margin-top: 1rem;\n margin-left: 0.3rem;\n }\n\n .fully-collapsed .level-0 {\n z-index: 1;\n }\n\n .fully-collapsed .level-1 {\n margin-left: -245px;\n z-index: 0;\n border: none;\n }\n\n .fully-collapsed .level-1 .item,\n .fully-collapsed .level-1 .divider {\n opacity: 0;\n }\n\n .fully-collapsed .level-2,\n .fully-collapsed .level-3 {\n display: none;\n }\n\n temba-button {\n margin-top: 0.2em;\n margin-bottom: 0.2em;\n margin-left: 0.75em;\n margin-right: 0.75em;\n }\n `;\n }\n\n @property({ type: Boolean })\n wraps = false;\n\n @property({ type: Boolean })\n wait: boolean;\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: String })\n expanding: string;\n\n @property({ type: String })\n value: string;\n\n // submenu to constrain to\n @property({ type: String })\n submenu: string;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n // http promise to monitor for completeness\n public httpComplete: Promise<void>;\n\n root: MenuItem;\n selection: string[] = [];\n pending: string[] = [];\n state: { [id: string]: MenuItemState } = {};\n\n constructor() {\n super();\n }\n\n private getMenuItemState(id: string): MenuItemState {\n let itemState = {};\n if (id) {\n itemState = this.state[id];\n if (!itemState) {\n itemState = {};\n this.state[id] = itemState;\n }\n }\n return itemState;\n }\n\n public updated(changes: Map<string, any>) {\n if (changes.has('value')) {\n this.setSelection((this.value || '').split('/'));\n }\n\n if (changes.has('submenu') && !changes.has('value')) {\n this.setSelection([this.submenu]);\n }\n\n if (changes.has('endpoint')) {\n this.root = {\n level: -1,\n endpoint: this.endpoint,\n };\n\n if (!this.wait) {\n this.loadItems(this.root);\n }\n }\n }\n\n public refresh(path: string[] = null) {\n if (!path) {\n path = [...this.selection];\n }\n\n // go up the tree until we find an endpoint\n const item = this.getMenuItemForSelection(path);\n\n if (item.endpoint) {\n this.loadItems(item, false);\n } else {\n path.pop();\n this.refresh(path);\n }\n }\n\n private fireNoPath(missingId: string) {\n const item = this.getMenuItem();\n\n const details = {\n item: item.id,\n selection: '/' + this.selection.join('/'),\n endpoint: item.endpoint,\n path: missingId + '/' + this.pending.join('/') + document.location.search,\n };\n\n // remove any excess from our selection\n const selection = this.selection.join('/');\n selection.replace(details.path, '');\n this.selection = selection.split('/');\n\n this.fireCustomEvent(CustomEventType.NoPath, details);\n this.pending = [];\n this.requestUpdate('root');\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private loadItems(item: MenuItem, selectFirst = true) {\n if (item && item.endpoint) {\n item.loading = true;\n this.httpComplete = fetchResults(item.endpoint).then(\n (items: MenuItem[]) => {\n // update our item level\n items.forEach(subItem => {\n subItem.level = item.level + 1;\n // if we came with preset items, set the level for them accordingly\n if (subItem.items) {\n subItem.items.forEach(inlineItem => {\n inlineItem.level = item.level + 2;\n // inlineItem.parent = subItem;\n });\n }\n });\n\n item.items = items;\n item.loading = false;\n this.requestUpdate('root');\n this.scrollSelectedIntoView();\n if (this.pending && this.pending.length > 0) {\n // auto select the next pending click\n const nextId = this.pending.shift();\n if (nextId && items.length > 0) {\n const nextItem = findItem(items, nextId);\n if (nextItem.item) {\n this.handleItemClicked(null, nextItem.item);\n } else {\n this.fireNoPath(nextId);\n }\n }\n } else {\n // auto select the first item\n if (\n selectFirst &&\n items.length > 0 &&\n this.selection.length >= 1 &&\n !item.inline\n ) {\n for (const item of items) {\n if (!item.type) {\n this.handleItemClicked(null, item);\n break;\n }\n }\n }\n }\n }\n );\n }\n }\n\n private handleItemClicked(\n event: MouseEvent,\n menuItem: MenuItem,\n parent: MenuItem = null\n ) {\n if (parent && parent.inline) {\n this.handleItemClicked(null, parent);\n }\n\n if (this.collapsed) {\n this.collapsed = false;\n }\n\n if (event) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n if (menuItem.type == 'modax-button') {\n this.fireCustomEvent(CustomEventType.ButtonClicked, {\n title: menuItem.name,\n href: menuItem.href,\n on_submit: menuItem.on_submit,\n });\n return;\n }\n\n if (menuItem.trigger) {\n window[menuItem.trigger]();\n } else {\n if (menuItem.level === 0) {\n /* this.expanding = menuItem.id;\n window.setTimeout(() => {\n this.expanding = null;\n }, 60);\n */\n }\n\n // update our selection\n if (menuItem.level >= this.selection.length) {\n this.selection.push(menuItem.vanity_id || menuItem.id);\n } else {\n this.selection.splice(\n menuItem.level,\n this.selection.length - menuItem.level,\n menuItem.vanity_id || menuItem.id\n );\n }\n\n if (menuItem.endpoint) {\n this.loadItems(menuItem, !menuItem.href);\n this.dispatchEvent(new Event('change'));\n } else {\n if (this.pending && this.pending.length > 0) {\n // auto select the next pending click\n const nextId = this.pending.shift();\n const item = this.getMenuItem();\n if (nextId && item && item.items && item.items.length > 0) {\n const nextItem = findItem(item.items, nextId).item;\n if (nextItem) {\n this.handleItemClicked(null, nextItem);\n } else {\n this.fireNoPath(nextId);\n }\n } else {\n this.fireNoPath(nextId);\n }\n } else {\n this.dispatchEvent(new Event('change'));\n }\n this.requestUpdate('root');\n }\n }\n }\n\n public scrollSelectedIntoView() {\n // makes sure we are scrolled into view\n window.setTimeout(() => {\n const eles = this.shadowRoot.querySelectorAll('.selected');\n eles.forEach(ele => {\n ele.scrollIntoView({ block: 'end', behavior: 'smooth' });\n });\n }, 0);\n }\n\n public clickItem(id: string): boolean {\n const path = [...this.selection];\n path.splice(path.length - 1, 1, id);\n const item = this.getMenuItemForSelection(path);\n\n if (item) {\n this.handleItemClicked(null, item);\n this.scrollSelectedIntoView();\n return true;\n }\n return false;\n }\n\n public getMenuItem(): MenuItem {\n return this.getMenuItemForSelection([...this.selection]);\n }\n\n public getMenuItemForSelection(selection: string[]) {\n const path = [...selection];\n let items = this.root.items;\n let item = null;\n while (path.length > 0) {\n const step = path.splice(0, 1)[0];\n if (items) {\n item = findItem(items, step).item;\n if (item) {\n items = item.items;\n } else {\n break;\n }\n } else {\n break;\n }\n }\n\n return item;\n }\n\n public getSelection() {\n return this.selection;\n }\n\n public setSelection(path: string[]) {\n this.pending = [...path];\n this.selection = [];\n\n if (this.wait) {\n this.wait = false;\n this.loadItems(this.root);\n }\n }\n\n public setSelectionPath(path: string) {\n const asPath = path.split('/').filter(step => !!step);\n\n // first try to click in the current space\n const clicked = this.clickItem(asPath[asPath.length - 1]);\n\n if (!clicked) {\n this.wait = true;\n this.setSelection(asPath);\n }\n }\n\n public async setFocusedItem(path: string) {\n const focusedPath = path.split('/').filter(step => !!step);\n\n // if we don't match at the first level, we are a noop\n if (focusedPath.length > 0) {\n const rootItem = findItem(this.root.items, focusedPath[0]).item;\n if (!rootItem) {\n return;\n }\n }\n\n const newPath = [];\n let level = this.root;\n while (focusedPath.length > 0) {\n const nextId = focusedPath.shift();\n if (nextId) {\n if (!level.items) {\n this.loadItems(level, false);\n await this.httpComplete;\n }\n\n level = findItem(level.items, nextId).item;\n if (!level) {\n focusedPath.splice(0, focusedPath.length);\n } else {\n newPath.push(nextId);\n }\n }\n }\n\n this.selection = newPath;\n this.requestUpdate('root');\n }\n\n private isSelected(menuItem: MenuItem) {\n if (menuItem.level < this.selection.length) {\n const selected =\n this.selection[menuItem.level] == (menuItem.vanity_id || menuItem.id);\n return selected;\n }\n return false;\n }\n\n private isExpanded(menuItem: MenuItem) {\n const expanded = !!this.selection.find(\n id => id === menuItem.vanity_id || menuItem.id\n );\n return expanded;\n }\n\n private renderMenuItem = (\n menuItem: MenuItem,\n parent: MenuItem = null\n ): TemplateResult => {\n if (menuItem.type === 'divider') {\n return html`<div class=\"divider\"></div>`;\n }\n\n if (menuItem.type === 'section' || menuItem.inline) {\n return html`<div class=\"sub-section\">${menuItem.name}</div>`;\n }\n\n if (menuItem.type === 'modax-button') {\n return html`<temba-button\n name=${menuItem.name}\n @click=${event => {\n this.handleItemClicked(event, menuItem);\n }}\n />`;\n }\n\n const isSelected = this.isSelected(menuItem);\n const isChildSelected =\n isSelected && this.selection.length > menuItem.level + 1;\n\n const icon = menuItem.icon\n ? html`<temba-icon\n size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n name=\"${menuItem.icon}\"\n ></temba-icon>`\n : null;\n\n const collapsedIcon = menuItem.collapsed_icon\n ? html`<temba-icon\n size=\"${menuItem.level === 0 ? '1.5' : '1'}\"\n name=\"${menuItem.collapsed_icon}\"\n class=\"collapse-icon\"\n ></temba-icon>`\n : null;\n\n const itemClasses = getClasses({\n ['menu-' + menuItem.id]: true,\n 'child-selected': isChildSelected,\n selected: isSelected,\n item: true,\n inline: menuItem.inline,\n expanding: this.expanding && this.expanding === menuItem.id,\n expanded: this.isExpanded(menuItem),\n iconless: !icon && !collapsedIcon,\n });\n\n const item = html` <div\n class=\"item-top ${isSelected ? 'selected' : null} \"\n ></div>\n\n <div\n id=\"menu-${menuItem.id}\"\n class=\"${itemClasses}\"\n @click=${event => {\n this.handleItemClicked(event, menuItem, parent);\n }}\n >\n ${menuItem.level === 0\n ? html`<temba-tip\n style=\"display:flex;\"\n text=\"${menuItem.name}\"\n position=\"right\"\n >${icon}</temba-tip\n >`\n : html`${icon}${collapsedIcon}`}\n\n <div class=\"details\" style=\"flex-grow:1;display:flex\">\n <div\n class=\"name\"\n style=\"flex-grow:1; flex-shrink:0; white-space: ${this.wraps\n ? 'normal'\n : 'nowrap'};\"\n >\n ${menuItem.name}\n </div>\n ${menuItem.level > 0\n ? menuItem.inline\n ? html`<temba-icon\n name=\"chevron-${isSelected || isChildSelected\n ? 'up'\n : 'down'}\"\n ></temba-icon>`\n : html`${menuItem.count || menuItem.count == 0\n ? html`\n <div class=\"count\">\n ${menuItem.count.toLocaleString()}\n </div>\n `\n : html`<div class=\"count\"></div>`}`\n : null}\n </div>\n <div class=\"right\"></div>\n </div>\n\n <div class=\"item-bottom ${isSelected ? 'selected' : null}\"></div>`;\n\n return item;\n };\n\n public render(): TemplateResult {\n if (!this.root || !this.root.items) {\n return html`<temba-loading\n units=\"3\"\n size=\"10\"\n direction=\"column\"\n style=\"margin:1em;margin-right:0em\"\n />`;\n }\n\n let items = this.root.items || [];\n const levels = [];\n\n levels.push(\n html`<div class=\"level level-0 ${this.submenu ? 'hidden' : ''}\">\n <div class=\"top\"></div>\n\n ${items\n .filter(item => !item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n\n <div class=\"empty\"></div>\n ${items\n .filter(item => !!item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n <div class=\"bottom\"></div>\n </div>`\n );\n\n this.selection.forEach((id, index) => {\n const selected = findItem(items, id).item;\n\n let collapsed = false;\n if (selected) {\n items = selected.items;\n const itemState = this.getMenuItemState(selected.id);\n // users set an explicit collapse state\n if (itemState.collapsed) {\n collapsed = itemState.collapsed === 'collapsed';\n }\n // otherwise pick a default collapse state\n else {\n if (this.selection.length > selected.level + 2) {\n collapsed = false;\n }\n }\n } else {\n items = null;\n }\n\n if (items && items.length > 0 && !selected.inline) {\n levels.push(\n html`<div\n class=\"${getClasses({\n level: true,\n ['level-' + (index + 1)]: true,\n collapsed,\n })}\"\n >\n ${!this.submenu\n ? html`<div class=\"section\">${selected.name}</div>`\n : null}\n ${items.map((item: MenuItem) => {\n if (item.inline) {\n return html`${this.renderMenuItem(item)}\n <div class=\"inline-children\">\n ${item.items.map((child: MenuItem) => {\n return this.renderMenuItem(child, item);\n })}\n </div>`;\n }\n return this.renderMenuItem(item);\n })}\n </div>`\n );\n }\n });\n\n const menu = html`<div\n class=\"root ${this.collapsed ? 'fully-collapsed' : ''}\"\n >\n ${levels}\n </div>`;\n return html`${menu}`;\n }\n}\n"]}
package/out-tsc/src/tabpane/Tab.js ADDED
@@ -0,0 +1,46 @@
1
+ import { __decorate } from "tslib";
2
+ import { css, html } from 'lit';
3
+ import { property } from 'lit/decorators';
4
+ import { RapidElement } from '../RapidElement';
5
+ import { getClasses } from '../utils';
6
+ export class Tab extends RapidElement {
7
+ constructor() {
8
+ super(...arguments);
9
+ this.selected = false;
10
+ }
11
+ static get styles() {
12
+ return css `
13
+ :host {
14
+ display: flex;
15
+ flex-direction: column;
16
+ flex-grow: 1;
17
+ min-height: 0;
18
+ }
19
+
20
+ slot {
21
+ // display: none;
22
+
23
+
24
+ slot.selected {
25
+ // display: flex;
26
+ // flex-direction: column;
27
+ // flex-grow: 1;
28
+ }
29
+ `;
30
+ }
31
+ render() {
32
+ return html `<slot
33
+ class="${getClasses({ selected: this.selected })}"
34
+ ></slot>`;
35
+ }
36
+ }
37
+ __decorate([
38
+ property({ type: String })
39
+ ], Tab.prototype, "name", void 0);
40
+ __decorate([
41
+ property({ type: String })
42
+ ], Tab.prototype, "icon", void 0);
43
+ __decorate([
44
+ property({ type: Boolean })
45
+ ], Tab.prototype, "selected", void 0);
46
+ //# sourceMappingURL=Tab.js.map
package/out-tsc/src/tabpane/Tab.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/tabpane/Tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,OAAO,GAAI,SAAQ,YAAY;IAArC;;QA6BE,aAAQ,GAAG,KAAK,CAAC;IAOnB,CAAC;IAnCC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBT,CAAC;IACJ,CAAC;IAWM,MAAM;QACX,OAAO,IAAI,CAAA;eACA,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;aACzC,CAAC;IACZ,CAAC;CACF;AAbC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACX","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\n\nexport class Tab extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n flex-grow: 1; \n min-height: 0;\n } \n \n slot {\n // display: none;\n \n\n slot.selected {\n // display: flex;\n // flex-direction: column;\n // flex-grow: 1;\n }\n `;\n }\n\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n icon: string;\n\n @property({ type: Boolean })\n selected = false;\n\n public render(): TemplateResult {\n return html`<slot\n class=\"${getClasses({ selected: this.selected })}\"\n ></slot>`;\n }\n}\n"]}