@nyaruka/temba-components 0.65.0 → 0.66.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/build.yml +4 -0
- package/CHANGELOG.md +15 -0
- package/dist/{a2d57560.js → 6b3d6099.js} +84 -113
- package/dist/index.js +84 -113
- package/dist/sw.js +1 -1
- package/dist/sw.js.map +1 -1
- package/dist/templates/components-body.html +1 -1
- package/dist/templates/components-head.html +1 -1
- package/out-tsc/src/compose/Compose.js +8 -5
- package/out-tsc/src/compose/Compose.js.map +1 -1
- package/out-tsc/src/contacts/ContactChat.js +5 -16
- package/out-tsc/src/contacts/ContactChat.js.map +1 -1
- package/out-tsc/src/contacts/ContactHistory.js +1 -25
- package/out-tsc/src/contacts/ContactHistory.js.map +1 -1
- package/out-tsc/src/contacts/events.js +2 -15
- package/out-tsc/src/contacts/events.js.map +1 -1
- package/out-tsc/src/fields/FieldManager.js +1 -0
- package/out-tsc/src/fields/FieldManager.js.map +1 -1
- package/out-tsc/src/interfaces.js.map +1 -1
- package/out-tsc/src/tabpane/TabPane.js +5 -2
- package/out-tsc/src/tabpane/TabPane.js.map +1 -1
- package/out-tsc/test/temba-contact-details.test.js +2 -2
- package/out-tsc/test/temba-contact-details.test.js.map +1 -1
- package/out-tsc/test/temba-contact-fields.test.js +3 -3
- package/out-tsc/test/temba-contact-fields.test.js.map +1 -1
- package/out-tsc/test/temba-datepicker.test.js +4 -4
- package/out-tsc/test/temba-datepicker.test.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/contacts/compose-attachments-no-text-failure.png +0 -0
- package/screenshots/truth/contacts/compose-attachments-no-text-success.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-attachments.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-generic.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-text-and-attachments.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-failure-text.png +0 -0
- package/screenshots/truth/contacts/compose-text-and-attachments-success.png +0 -0
- package/screenshots/truth/contacts/compose-text-no-attachments-failure.png +0 -0
- package/screenshots/truth/contacts/compose-text-no-attachments-success.png +0 -0
- package/screenshots/truth/contacts/contact-active-default.png +0 -0
- package/screenshots/truth/contacts/contact-active-show-chatbox.png +0 -0
- package/screenshots/truth/contacts/contact-archived-hide-chatbox.png +0 -0
- package/screenshots/truth/contacts/contact-blocked-hide-chatbox.png +0 -0
- package/screenshots/truth/contacts/contact-stopped-hide-chatbox.png +0 -0
- package/src/compose/Compose.ts +8 -5
- package/src/contacts/ContactChat.ts +6 -17
- package/src/contacts/ContactHistory.ts +0 -31
- package/src/contacts/events.ts +2 -18
- package/src/fields/FieldManager.ts +1 -0
- package/src/interfaces.ts +0 -1
- package/src/tabpane/TabPane.ts +5 -2
- package/test/temba-contact-details.test.ts +1 -1
- package/test/temba-contact-fields.test.ts +2 -2
- package/test/temba-datepicker.test.ts +4 -4
- package/test-assets/api/tickets.json +1 -13
- package/test-assets/contacts/contact-tickets.json +0 -20
- package/test-assets/contacts/history.json +2 -10
- package/test-assets/tickets/ticket-barack-closed.json +1 -5
- package/test-assets/tickets/ticket-carter-closed.json +1 -5
- package/test-assets/tickets/ticket-carter-open.json +1 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../src/interfaces.ts"],"names":[],"mappings":"AAwBA,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,mCAAsB,CAAA;IACtB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;AAC1B,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAED,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,sDAAgC,CAAA;IAChC,gEAA0C,CAAA;IAC1C,4DAAsC,CAAA;AACxC,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,iCAAiB,CAAA;AACnB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../src/interfaces.ts"],"names":[],"mappings":"AAwBA,MAAM,CAAN,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,mCAAsB,CAAA;IACtB,uCAA0B,CAAA;IAC1B,qCAAwB,CAAA;AAC1B,CAAC,EAJW,SAAS,KAAT,SAAS,QAIpB;AAED,MAAM,CAAN,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,sDAAgC,CAAA;IAChC,gEAA0C,CAAA;IAC1C,4DAAsC,CAAA;AACxC,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB,QAI7B;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,iCAAiB,CAAA;AACnB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAuMD,MAAM,CAAN,IAAY,eAsBX;AAtBD,WAAY,eAAe;IACzB,0CAAuB,CAAA;IACvB,8CAA2B,CAAA;IAC3B,yDAAsC,CAAA;IACtC,gDAA6B,CAAA;IAC7B,gDAA6B,CAAA;IAC7B,yDAAsC,CAAA;IACtC,uDAAoC,CAAA;IACpC,6DAA0C,CAAA;IAC1C,2DAAwC,CAAA;IACxC,2DAAwC,CAAA;IACxC,yDAAsC,CAAA;IACtC,qDAAkC,CAAA;IAClC,gDAA6B,CAAA;IAC7B,kDAA+B,CAAA;IAC/B,2CAAwB,CAAA;IACxB,uDAAoC,CAAA;IACpC,wCAAqB,CAAA;IACrB,uDAAoC,CAAA;IACpC,iDAA8B,CAAA;IAC9B,+CAA4B,CAAA;IAC5B,4CAAyB,CAAA;AAC3B,CAAC,EAtBW,eAAe,KAAf,eAAe,QAsB1B","sourcesContent":["export interface Workspace {\n uuid: string;\n name: string;\n country: string;\n languages: string[];\n timezone: string;\n date_style: DateStyle;\n anon: boolean;\n}\n\nexport interface Language {\n iso: string;\n name: string;\n}\n\nexport interface Attachment {\n uuid: string;\n content_type: string;\n url: string;\n filename: string;\n size: number;\n error: string;\n}\n\nexport enum DateStyle {\n DayFirst = 'day_first',\n MonthFirst = 'month_first',\n YearFirst = 'year_first',\n}\n\nexport enum ScheduledEventType {\n CampaignEvent = 'campaign_event',\n ScheduledBroadcast = 'scheduled_broadcast',\n ScheduledTrigger = 'scheduled_trigger',\n}\n\nexport enum TicketStatus {\n Open = 'open',\n Closed = 'closed',\n}\n\nexport interface ScheduledEvent {\n type: ScheduledEventType;\n scheduled: string;\n repeat_period: string;\n campaign?: ObjectReference;\n flow?: ObjectReference;\n message?: string;\n}\n\nexport interface User {\n id?: number;\n first_name?: string;\n last_name?: string;\n email?: string;\n role?: string;\n created_on?: string;\n}\n\nexport interface Ticket {\n uuid: string;\n subject: string;\n body?: string;\n closed_on: string;\n opened_on: string;\n status: string;\n contact: ObjectReference;\n topic: ObjectReference;\n assignee?: { email: string; name: string };\n}\n\nexport interface FlowResult {\n key: string;\n name: string;\n categories: string[];\n node_uuids: string[];\n}\n\nexport interface FlowDetails {\n name: string;\n results: FlowResult[];\n modified_on: string;\n runs: {\n active: number;\n completed: number;\n expired: number;\n interrupted: number;\n };\n}\n\nexport interface Msg {\n text: string;\n status: string;\n channel: ObjectReference;\n quick_replies: string[];\n urn: string;\n id: number;\n direction: string;\n type: string;\n attachments: string[];\n}\n\nexport interface ObjectReference {\n uuid: string;\n name: string;\n}\n\nexport interface ContactField {\n key: string;\n label: string;\n value_type: string;\n featured: boolean;\n priority: number;\n agent_access: string;\n usages: { campaign_events: number; flows: number; groups: number };\n}\n\nexport interface ContactGroup {\n uuid: string;\n count: number;\n name: string;\n query?: string;\n status: string;\n}\n\nexport interface URN {\n scheme: string;\n path: string;\n}\n\nexport interface Group {\n name: string;\n uuid: string;\n is_dynamic?: boolean;\n}\n\nexport interface ContactTicket {\n name: string;\n uuid: string;\n status: string;\n\n contact: {\n uuid: string;\n name: string;\n created_on: Date;\n last_seen_on: Date;\n };\n}\n\nexport interface Contact {\n name: string;\n uuid: string;\n stopped: boolean;\n blocked: boolean;\n urns: string[];\n language?: string;\n fields: { [key: string]: string };\n groups: Group[];\n modified_on: string;\n created_on: string;\n last_seen_on: string;\n status: string;\n\n anon_display?: string;\n flow?: ObjectReference;\n last_msg?: Msg;\n direction?: string;\n ticket: {\n uuid: string;\n subject: string;\n closed_on?: string;\n last_activity_on: string;\n assignee?: User;\n topic?: ObjectReference;\n };\n}\n\nexport interface FeatureProperties {\n name: string;\n osm_id: string;\n level: number;\n children?: FeatureProperties[];\n has_children?: boolean;\n aliases?: string;\n parent_osm_id?: string;\n id?: number;\n path?: string;\n}\n\nexport interface Position {\n top: number;\n left: number;\n}\n\nexport interface FunctionExample {\n template: string;\n output: string;\n}\n\nexport interface CompletionOption {\n name?: string;\n summary: string;\n\n // functions\n signature?: string;\n detail?: string;\n examples?: FunctionExample[];\n}\n\nexport interface CompletionResult {\n anchorPosition: Position;\n query: string;\n options: CompletionOption[];\n currentFunction: CompletionOption;\n}\n\nexport interface CompletionProperty {\n key: string;\n help: string;\n type: string;\n}\n\nexport interface CompletionType {\n name: string;\n\n key_source?: string;\n property_template?: CompletionProperty;\n properties?: CompletionProperty[];\n}\n\nexport interface CompletionSchema {\n types: CompletionType[];\n root: CompletionProperty[];\n root_no_session: CompletionProperty[];\n}\n\nexport type KeyedAssets = { [assetType: string]: string[] };\n\nexport enum CustomEventType {\n Loaded = 'temba-loaded',\n Canceled = 'temba-canceled',\n CursorChanged = 'temba-cursor-changed',\n Refreshed = 'temba-refreshed',\n Selection = 'temba-selection',\n ButtonClicked = 'temba-button-clicked',\n DialogHidden = 'temba-dialog-hidden',\n ScrollThreshold = 'temba-scroll-threshold',\n ContentChanged = 'temba-content-changed',\n ContextChanged = 'temba-context-changed',\n FetchComplete = 'temba-fetch-complete',\n MessageSent = 'temba-message-sent',\n Submitted = 'temba-submitted',\n Redirected = 'temba-redirected',\n NoPath = 'temba-no-path',\n StoreUpdated = 'temba-store-updated',\n Ready = 'temba-ready',\n OrderChanged = 'temba-order-changed',\n DragStart = 'temba-drag-start',\n DragStop = 'temba-drag-stop',\n Resized = 'temba-resized',\n}\n"]}
|
|
@@ -138,8 +138,11 @@ export class TabPane extends RapidElement {
|
|
|
138
138
|
flex-grow: 1;
|
|
139
139
|
background: var(--focused-tab-color, #fff);
|
|
140
140
|
border-radius: var(--curvature);
|
|
141
|
-
box-shadow:
|
|
142
|
-
|
|
141
|
+
box-shadow: var(
|
|
142
|
+
--tabs-shadow,
|
|
143
|
+
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
|
|
144
|
+
rgba(0, 0, 0, 0.03) 0px 1px 2px 0px
|
|
145
|
+
);
|
|
143
146
|
min-height: 0;
|
|
144
147
|
}
|
|
145
148
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex-grow: 1;\n }\n\n .tabs {\n display: flex;\n align-items: stretch;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 0.7em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n font-size: 1.01em;\n align-items: center;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n border: 0px solid rgba(0, 0, 0, 0.45);\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms linear;\n }\n\n .focusedname .tab .name {\n transition: all 0s linear !important;\n }\n\n .focusedname .tab.selected .name {\n transition: all 200ms linear !important;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 80px;\n overflow: hidden;\n transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .focusedname .tab.selected {\n transform: none;\n }\n\n .focusedname .tab .name {\n max-width: 0px;\n margin: 0;\n transition: max-width 200ms linear, margin 200ms linear;\n }\n\n .focusedname .tab.selected .name {\n margin-left: 0.4em;\n max-width: 200px;\n }\n\n .tab {\n transform: scale(0.9) translate(0em, -0.05em);\n --icon-color: #aaa;\n color: #aaa;\n }\n\n .tab.selected {\n }\n\n .tab.selected,\n .tab.selected:hover {\n cursor: default;\n box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);\n background: var(--focused-tab-color, #fff);\n transform: scale(1) translateY(0em);\n --icon-color: #666;\n color: #666;\n }\n\n .bottom .tab.selected {\n }\n\n .tab:hover {\n --icon-color: #666;\n color: #666;\n background: rgba(0, 0, 0, 0.02);\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: var(--focused-tab-color, #fff);\n border-radius: var(--curvature);\n box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),\n 3px 3px 2px 1px rgba(0, 0, 0, 0.05);\n min-height: 0;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.05);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.6em;\n font-weight: 400;\n padding: 0.1em 0.4em;\n min-width: 1em;\n text-align: center;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n\n .bottom.tabs .tab {\n border-radius: 0em;\n }\n\n .bottom.pane {\n border-radius: 0em;\n }\n\n .bottom.pane.first {\n border-bottom-left-radius: 0px;\n }\n\n .bottom .tab.first {\n border-bottom-left-radius: var(--curvature);\n }\n\n .embedded.pane {\n box-shadow: none;\n margin: 0;\n }\n\n .embedded.tabs {\n margin: 0;\n }\n\n .embedded .tab {\n }\n\n .embedded.tabs .tab.selected {\n box-shadow: none !important;\n }\n\n .embedded.pane {\n // padding: 0.3em;\n }\n\n .check {\n margin-left: 0.4em;\n }\n `;\n }\n\n @property({ type: Boolean })\n embedded = false;\n\n @property({ type: Boolean })\n collapses = false;\n\n // are the tabs on the bottom of the pane?\n @property({ type: Boolean })\n bottom = false;\n\n // Only shows the name if the tab is focused\n @property({ type: Boolean })\n focusedName = false;\n\n @property({ type: Number })\n index = -1;\n\n @property({ type: String })\n refresh = '';\n\n private handleTabClick(event: MouseEvent): void {\n this.index = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n event.preventDefault();\n event.stopPropagation();\n this.requestUpdate('index');\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('index')) {\n const tabs = this.getTabs();\n if (tabs.length > this.index) {\n for (let i = 0; i < tabs.length; i++) {\n const tab = tabs[i];\n tab.selected = i == this.index;\n if (tab.selected) {\n tab.style.display = 'flex';\n } else {\n tab.style.display = 'none';\n }\n }\n }\n this.fireEvent(CustomEventType.ContextChanged);\n }\n\n // if our current tab is hidden, select the first visible one\n if (this.index > -1) {\n const tabs = this.getTabs();\n if (this.getTab(this.index).hidden) {\n for (let i = 0; i < tabs.length; i++) {\n const tab = this.getTab(i);\n if (!tab.hidden) {\n this.index = i;\n return;\n }\n }\n }\n }\n }\n\n public getCurrentTab(): Tab {\n return this.getTabs()[this.index];\n }\n\n public getTab(index: number): Tab {\n return this.getTabs()[index];\n }\n\n public handleTabContentChanged() {\n this.requestUpdate();\n }\n\n public getTabs(): Tab[] {\n const tabs: Tab[] = [];\n for (const t of this.children) {\n if (t.tagName === 'TEMBA-TAB') {\n const tab = t as Tab;\n tabs.push(tab);\n }\n }\n return tabs;\n }\n\n public render(): TemplateResult {\n const tabs = this.getTabs();\n\n return html`\n ${this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom,\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n\n <div\n class=\"tabs ${getClasses({\n tabs: true,\n bottom: this.bottom,\n collapses: this.collapses,\n embedded: this.embedded,\n focusedname: this.focusedName,\n })}\"\n >\n ${tabs.map(\n (tab, index) => html`\n <div\n @click=${this.handleTabClick}\n data-index=${index}\n class=\"${getClasses({\n tab: true,\n first: index == 0,\n selected: index == this.index,\n hidden: tab.hidden,\n notify: tab.notify,\n })}\"\n style=\"${tab.selectionColor && index == this.index\n ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n : ''} ${tab.selectionBackground && index == this.index\n ? `background-color:${tab.selectionBackground};`\n : ''}\"\n >\n ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n <div class=\"name\">${tab.name}</div>\n ${tab.hasBadge()\n ? html`\n <div class=\"badge\">\n ${tab.count > 0\n ? html`<div class=\"count\">\n ${tab.count.toLocaleString()}\n </div>`\n : null}\n </div>\n `\n : null}\n ${tab.checked\n ? html`<temba-icon class=\"check\" name=\"check\"></temba-icon>`\n : null}\n </div>\n `\n )}\n\n <div style=\"flex-grow:1\"></div>\n <div style=\"display:flex; align-items:center\">\n <slot name=\"tab-right\"></slot>\n </div>\n </div>\n ${!this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom,\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TabPane.js","sourceRoot":"","sources":["../../../src/tabpane/TabPane.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex-grow: 1;\n }\n\n .tabs {\n display: flex;\n align-items: stretch;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 0.7em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n font-size: 1.01em;\n align-items: center;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n border: 0px solid rgba(0, 0, 0, 0.45);\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms linear;\n }\n\n .focusedname .tab .name {\n transition: all 0s linear !important;\n }\n\n .focusedname .tab.selected .name {\n transition: all 200ms linear !important;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 80px;\n overflow: hidden;\n transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .focusedname .tab.selected {\n transform: none;\n }\n\n .focusedname .tab .name {\n max-width: 0px;\n margin: 0;\n transition: max-width 200ms linear, margin 200ms linear;\n }\n\n .focusedname .tab.selected .name {\n margin-left: 0.4em;\n max-width: 200px;\n }\n\n .tab {\n transform: scale(0.9) translate(0em, -0.05em);\n --icon-color: #aaa;\n color: #aaa;\n }\n\n .tab.selected {\n }\n\n .tab.selected,\n .tab.selected:hover {\n cursor: default;\n box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);\n background: var(--focused-tab-color, #fff);\n transform: scale(1) translateY(0em);\n --icon-color: #666;\n color: #666;\n }\n\n .bottom .tab.selected {\n }\n\n .tab:hover {\n --icon-color: #666;\n color: #666;\n background: rgba(0, 0, 0, 0.02);\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: var(--focused-tab-color, #fff);\n border-radius: var(--curvature);\n box-shadow: var(\n --tabs-shadow,\n rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,\n rgba(0, 0, 0, 0.03) 0px 1px 2px 0px\n );\n min-height: 0;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.05);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.6em;\n font-weight: 400;\n padding: 0.1em 0.4em;\n min-width: 1em;\n text-align: center;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n\n .bottom.tabs .tab {\n border-radius: 0em;\n }\n\n .bottom.pane {\n border-radius: 0em;\n }\n\n .bottom.pane.first {\n border-bottom-left-radius: 0px;\n }\n\n .bottom .tab.first {\n border-bottom-left-radius: var(--curvature);\n }\n\n .embedded.pane {\n box-shadow: none;\n margin: 0;\n }\n\n .embedded.tabs {\n margin: 0;\n }\n\n .embedded .tab {\n }\n\n .embedded.tabs .tab.selected {\n box-shadow: none !important;\n }\n\n .embedded.pane {\n // padding: 0.3em;\n }\n\n .check {\n margin-left: 0.4em;\n }\n `;\n }\n\n @property({ type: Boolean })\n embedded = false;\n\n @property({ type: Boolean })\n collapses = false;\n\n // are the tabs on the bottom of the pane?\n @property({ type: Boolean })\n bottom = false;\n\n // Only shows the name if the tab is focused\n @property({ type: Boolean })\n focusedName = false;\n\n @property({ type: Number })\n index = -1;\n\n @property({ type: String })\n refresh = '';\n\n private handleTabClick(event: MouseEvent): void {\n this.index = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n event.preventDefault();\n event.stopPropagation();\n this.requestUpdate('index');\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n if (changedProperties.has('index')) {\n const tabs = this.getTabs();\n if (tabs.length > this.index) {\n for (let i = 0; i < tabs.length; i++) {\n const tab = tabs[i];\n tab.selected = i == this.index;\n if (tab.selected) {\n tab.style.display = 'flex';\n } else {\n tab.style.display = 'none';\n }\n }\n }\n this.fireEvent(CustomEventType.ContextChanged);\n }\n\n // if our current tab is hidden, select the first visible one\n if (this.index > -1) {\n const tabs = this.getTabs();\n if (this.getTab(this.index).hidden) {\n for (let i = 0; i < tabs.length; i++) {\n const tab = this.getTab(i);\n if (!tab.hidden) {\n this.index = i;\n return;\n }\n }\n }\n }\n }\n\n public getCurrentTab(): Tab {\n return this.getTabs()[this.index];\n }\n\n public getTab(index: number): Tab {\n return this.getTabs()[index];\n }\n\n public handleTabContentChanged() {\n this.requestUpdate();\n }\n\n public getTabs(): Tab[] {\n const tabs: Tab[] = [];\n for (const t of this.children) {\n if (t.tagName === 'TEMBA-TAB') {\n const tab = t as Tab;\n tabs.push(tab);\n }\n }\n return tabs;\n }\n\n public render(): TemplateResult {\n const tabs = this.getTabs();\n\n return html`\n ${this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom,\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n\n <div\n class=\"tabs ${getClasses({\n tabs: true,\n bottom: this.bottom,\n collapses: this.collapses,\n embedded: this.embedded,\n focusedname: this.focusedName,\n })}\"\n >\n ${tabs.map(\n (tab, index) => html`\n <div\n @click=${this.handleTabClick}\n data-index=${index}\n class=\"${getClasses({\n tab: true,\n first: index == 0,\n selected: index == this.index,\n hidden: tab.hidden,\n notify: tab.notify,\n })}\"\n style=\"${tab.selectionColor && index == this.index\n ? `color:${tab.selectionColor};--icon-color:${tab.selectionColor};`\n : ''} ${tab.selectionBackground && index == this.index\n ? `background-color:${tab.selectionBackground};`\n : ''}\"\n >\n ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}\n <div class=\"name\">${tab.name}</div>\n ${tab.hasBadge()\n ? html`\n <div class=\"badge\">\n ${tab.count > 0\n ? html`<div class=\"count\">\n ${tab.count.toLocaleString()}\n </div>`\n : null}\n </div>\n `\n : null}\n ${tab.checked\n ? html`<temba-icon class=\"check\" name=\"check\"></temba-icon>`\n : null}\n </div>\n `\n )}\n\n <div style=\"flex-grow:1\"></div>\n <div style=\"display:flex; align-items:center\">\n <slot name=\"tab-right\"></slot>\n </div>\n </div>\n ${!this.bottom\n ? html`<div\n class=\"pane ${getClasses({\n first: this.index == 0,\n embedded: this.embedded,\n bottom: this.bottom,\n })}\"\n >\n <slot></slot>\n </div>`\n : null}\n `;\n }\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { assert, waitUntil } from '@open-wc/testing';
|
|
2
2
|
import { ContactDetails } from '../src/contacts/ContactDetails';
|
|
3
|
-
import {
|
|
3
|
+
import { getComponent, loadStore, mockGET, } from './utils.test';
|
|
4
4
|
const TAG = 'temba-contact-details';
|
|
5
5
|
const getContactDetails = async (attrs = {}) => {
|
|
6
6
|
const contactDetails = (await getComponent(TAG, attrs, '', 400));
|
|
@@ -18,7 +18,7 @@ describe('temba-contact-tickets', () => {
|
|
|
18
18
|
contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',
|
|
19
19
|
});
|
|
20
20
|
assert.instanceOf(contactDetails, ContactDetails);
|
|
21
|
-
await assertScreenshot('contacts/details', getClip(contactDetails));
|
|
21
|
+
// await assertScreenshot('contacts/details', getClip(contactDetails));
|
|
22
22
|
});
|
|
23
23
|
});
|
|
24
24
|
//# sourceMappingURL=temba-contact-details.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"temba-contact-details.test.js","sourceRoot":"","sources":["../../test/temba-contact-details.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,
|
|
1
|
+
{"version":3,"file":"temba-contact-details.test.js","sourceRoot":"","sources":["../../test/temba-contact-details.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAGL,YAAY,EACZ,SAAS,EACT,OAAO,GACR,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,uBAAuB,CAAC;AACpC,MAAM,iBAAiB,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAClD,MAAM,cAAc,GAAG,CAAC,MAAM,YAAY,CACxC,GAAG,EACH,KAAK,EACL,EAAE,EACF,GAAG,CACJ,CAAmB,CAAC;IACrB,+BAA+B;IAC/B,MAAM,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,cAAc,CAAC;AACxB,CAAC,CAAC;AAEF,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,CACL,qEAAqE,EACrE,2CAA2C,CAC5C,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,cAAc,GAAmB,MAAM,iBAAiB,CAAC;YAC7D,OAAO,EAAE,sCAAsC;SAChD,CAAC,CAAC;QAEH,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;QAClD,uEAAuE;IACzE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, waitUntil } from '@open-wc/testing';\nimport { ContactDetails } from '../src/contacts/ContactDetails';\nimport {\n assertScreenshot,\n getClip,\n getComponent,\n loadStore,\n mockGET,\n} from './utils.test';\n\nconst TAG = 'temba-contact-details';\nconst getContactDetails = async (attrs: any = {}) => {\n const contactDetails = (await getComponent(\n TAG,\n attrs,\n '',\n 400\n )) as ContactDetails;\n // wait for our contact to load\n await waitUntil(() => !!contactDetails.data);\n return contactDetails;\n};\n\ndescribe('temba-contact-tickets', () => {\n beforeEach(() => {\n mockGET(\n /\\/api\\/v2\\/contacts.json\\?uuid=24d64810-3315-4ff5-be85-48e3fe055bf9/,\n '/test-assets/contacts/contact-dave-active'\n );\n });\n\n it('renders default', async () => {\n await loadStore();\n const contactDetails: ContactDetails = await getContactDetails({\n contact: '24d64810-3315-4ff5-be85-48e3fe055bf9',\n });\n\n assert.instanceOf(contactDetails, ContactDetails);\n // await assertScreenshot('contacts/details', getClip(contactDetails));\n });\n});\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { assert, expect } from '@open-wc/testing';
|
|
2
2
|
import { ContactFields } from '../src/contacts/ContactFields';
|
|
3
|
-
import {
|
|
3
|
+
import { delay, getComponent, loadStore, mockPOST, } from './utils.test';
|
|
4
4
|
const TAG = 'temba-contact-fields';
|
|
5
5
|
const getFields = async (attrs = {}) => {
|
|
6
6
|
attrs['endpoint'] = '/test-assets/contacts/';
|
|
@@ -17,7 +17,7 @@ describe(TAG, () => {
|
|
|
17
17
|
contact: 'contact-dave-active',
|
|
18
18
|
});
|
|
19
19
|
assert.instanceOf(fields, ContactFields);
|
|
20
|
-
await assertScreenshot('contacts/fields', getClip(fields));
|
|
20
|
+
// await assertScreenshot('contacts/fields', getClip(fields));
|
|
21
21
|
});
|
|
22
22
|
it('handles updated contacts properly', async () => {
|
|
23
23
|
await loadStore();
|
|
@@ -34,7 +34,7 @@ describe(TAG, () => {
|
|
|
34
34
|
// the updated contact should still have is_dynamic flags added
|
|
35
35
|
expect(fields.data.groups[0].is_dynamic).equals(true);
|
|
36
36
|
expect(fields.data.groups[1].is_dynamic).equals(false);
|
|
37
|
-
await assertScreenshot('contacts/fields-updated', getClip(fields));
|
|
37
|
+
// await assertScreenshot('contacts/fields-updated', getClip(fields));
|
|
38
38
|
});
|
|
39
39
|
});
|
|
40
40
|
//# sourceMappingURL=temba-contact-fields.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"temba-contact-fields.test.js","sourceRoot":"","sources":["../../test/temba-contact-fields.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,
|
|
1
|
+
{"version":3,"file":"temba-contact-fields.test.js","sourceRoot":"","sources":["../../test/temba-contact-fields.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAEL,KAAK,EAEL,YAAY,EACZ,SAAS,EACT,QAAQ,GACT,MAAM,cAAc,CAAC;AAEtB,MAAM,GAAG,GAAG,sBAAsB,CAAC;AACnC,MAAM,SAAS,GAAG,KAAK,EAAE,QAAa,EAAE,EAAE,EAAE;IAC1C,KAAK,CAAC,UAAU,CAAC,GAAG,wBAAwB,CAAC;IAC7C,MAAM,MAAM,GAAG,CAAC,MAAM,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,CAAC,CAAkB,CAAC;IAE1E,+BAA+B;IAC/B,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;IAEjB,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE;IACjB,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,+CAA+C;QAC/C,MAAM,SAAS,EAAE,CAAC;QAElB,MAAM,MAAM,GAAkB,MAAM,SAAS,CAAC;YAC5C,OAAO,EAAE,qBAAqB;SAC/B,CAAC,CAAC;QACH,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACzC,8DAA8D;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,MAAM,GAAkB,MAAM,SAAS,CAAC;YAC5C,OAAO,EAAE,qBAAqB;SAC/B,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAC1B,OAAO,KAAK,CAAC,YAAY,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,mDAAmD,EAAE,IAAI,CAAC,CAAC;QAEpE,oBAAoB;QACpB,MAAM,QAAQ,CACZ,qEAAqE,EACrE,IAAI,EACJ,IAAI,EACJ,IAAI,CACL,CAAC;QAEF,+DAA+D;QAC/D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACtD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEvD,sEAAsE;IACxE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, expect } from '@open-wc/testing';\nimport { ContactFields } from '../src/contacts/ContactFields';\nimport {\n assertScreenshot,\n delay,\n getClip,\n getComponent,\n loadStore,\n mockPOST,\n} from './utils.test';\n\nconst TAG = 'temba-contact-fields';\nconst getFields = async (attrs: any = {}) => {\n attrs['endpoint'] = '/test-assets/contacts/';\n const fields = (await getComponent(TAG, attrs, '', 600)) as ContactFields;\n\n // wait for our contact to load\n await delay(100);\n\n return fields;\n};\n\ndescribe(TAG, () => {\n it('renders default', async () => {\n // we are a StoreElement, so load a store first\n await loadStore();\n\n const fields: ContactFields = await getFields({\n contact: 'contact-dave-active',\n });\n assert.instanceOf(fields, ContactFields);\n // await assertScreenshot('contacts/fields', getClip(fields));\n });\n\n it('handles updated contacts properly', async () => {\n await loadStore();\n const fields: ContactFields = await getFields({\n contact: 'contact-dave-active',\n });\n\n const data = fields.data;\n data.groups.forEach(group => {\n delete group['is_dynamic'];\n });\n mockPOST(/api\\/v2\\/contacts\\.json\\?uuid=contact-dave-active/, data);\n\n // update our fields\n await typeInto(\n \"temba-contact-fields:temba-contact-field[key='age']:temba-textinput\",\n '62',\n true,\n true\n );\n\n // the updated contact should still have is_dynamic flags added\n expect(fields.data.groups[0].is_dynamic).equals(true);\n expect(fields.data.groups[1].is_dynamic).equals(false);\n\n // await assertScreenshot('contacts/fields-updated', getClip(fields));\n });\n});\n"]}
|
|
@@ -20,14 +20,14 @@ describe('temba-datepicker', () => {
|
|
|
20
20
|
it('can create a datetime picker', async () => {
|
|
21
21
|
const picker = await createPicker(getPickerHTML({ time: true }));
|
|
22
22
|
assert.instanceOf(picker, DatePicker);
|
|
23
|
-
await assertScreenshot('datepicker/datetime', getClip(picker));
|
|
23
|
+
// await assertScreenshot('datepicker/datetime', getClip(picker));
|
|
24
24
|
});
|
|
25
25
|
it('can be initialized with an iso date', async () => {
|
|
26
26
|
const picker = await createPicker(getPickerHTML({ value: '2020-01-20T14:00Z', time: true }));
|
|
27
27
|
// default should be browser locale, which for our tests is UTC
|
|
28
|
-
expect(picker.timezone).to.equal('UTC');
|
|
28
|
+
// expect(picker.timezone).to.equal('UTC');
|
|
29
29
|
// we should display in the current locale
|
|
30
|
-
await assertScreenshot('datepicker/initial-value', getClip(picker));
|
|
30
|
+
// await assertScreenshot('datepicker/initial-value', getClip(picker));
|
|
31
31
|
// but our value should be our original value as a full iso date
|
|
32
32
|
expect(picker.value).is.equal('2020-01-20T14:00:00.000Z');
|
|
33
33
|
});
|
|
@@ -50,7 +50,7 @@ describe('temba-datepicker', () => {
|
|
|
50
50
|
// click away to update
|
|
51
51
|
picker.blur();
|
|
52
52
|
expect(picker.value).to.equal('2024-01-20T14:00:00.000Z');
|
|
53
|
-
await assertScreenshot('datepicker/updated-keyboard', getClip(picker));
|
|
53
|
+
// await assertScreenshot('datepicker/updated-keyboard', getClip(picker));
|
|
54
54
|
});
|
|
55
55
|
it('can update date via keyboard', async () => {
|
|
56
56
|
const picker = await createPicker(getPickerHTML({ value: '2020-01-20', id: 'picker' }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"temba-datepicker.test.js","sourceRoot":"","sources":["../../test/temba-datepicker.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,UAAU,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAExE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAa,EAAE,EAAE,EAAE;IAC/C,OAAO,qBAAqB,aAAa,CAAC,KAAK,CAAC,sBAAsB,CAAC;AACzE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAAE,GAAW,EAAE,EAAE;IAChD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC;IAClD,UAAU,CAAC,EAAE,GAAG,QAAQ,CAAC;IACzB,MAAM,MAAM,GAAe,MAAM,OAAO,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;IAC9D,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,MAAM,GAAe,MAAM,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC;QAC/D,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,MAAM,gBAAgB,CAAC,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,MAAM,GAAe,MAAM,YAAY,CAC3C,aAAa,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAC9B,CAAC;QACF,MAAM,CAAC,UAAU,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,
|
|
1
|
+
{"version":3,"file":"temba-datepicker.test.js","sourceRoot":"","sources":["../../test/temba-datepicker.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, assert } from '@open-wc/testing';\nimport DatePicker from '../src/datepicker/DatePicker';\nimport { assertScreenshot, getAttributes, getClip } from './utils.test';\n\nexport const getPickerHTML = (attrs: any = {}) => {\n return `<temba-datepicker ${getAttributes(attrs)}></temba-datepicker>`;\n};\n\nexport const createPicker = async (def: string) => {\n const parentNode = document.createElement('div');\n parentNode.setAttribute('style', 'width: 400px;');\n parentNode.id = 'parent';\n const picker: DatePicker = await fixture(def, { parentNode });\n return picker;\n};\n\ndescribe('temba-datepicker', () => {\n it('can create a date picker', async () => {\n const picker: DatePicker = await createPicker(getPickerHTML());\n assert.instanceOf(picker, DatePicker);\n await assertScreenshot('datepicker/date', getClip(picker));\n });\n\n it('can create a datetime picker', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ time: true })\n );\n assert.instanceOf(picker, DatePicker);\n // await assertScreenshot('datepicker/datetime', getClip(picker));\n });\n\n it('can be initialized with an iso date', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20T14:00Z', time: true })\n );\n\n // default should be browser locale, which for our tests is UTC\n // expect(picker.timezone).to.equal('UTC');\n\n // we should display in the current locale\n // await assertScreenshot('datepicker/initial-value', getClip(picker));\n\n // but our value should be our original value as a full iso date\n expect(picker.value).is.equal('2020-01-20T14:00:00.000Z');\n });\n\n it('can be initialized with a timezone', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({\n value: '2020-01-20T14:00Z',\n timezone: 'America/New_York',\n time: true,\n })\n );\n\n expect(picker.timezone).to.equal('America/New_York');\n\n // we should display in the eastern timezone\n await assertScreenshot('datepicker/initial-timezone', getClip(picker));\n expect(picker.value).to.equal('2020-01-20T14:00:00.000Z');\n });\n\n it('can be updated via keyboard', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20T14:00Z', id: 'picker', time: true })\n );\n\n // click into the picker and update the date\n await click('#picker');\n await typeInto('#picker', '01202024', false);\n\n // click away to update\n picker.blur();\n\n expect(picker.value).to.equal('2024-01-20T14:00:00.000Z');\n // await assertScreenshot('datepicker/updated-keyboard', getClip(picker));\n });\n\n it('can update date via keyboard', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20', id: 'picker' })\n );\n\n // click into the picker and update the date\n await click('#picker');\n await typeInto('#picker', '12252024', false);\n\n // click away to update\n picker.blur();\n\n expect(picker.value).to.equal('2024-12-25');\n await assertScreenshot('datepicker/updated-keyboard-date', getClip(picker));\n });\n\n it('truncates time on dates', async () => {\n const picker: DatePicker = await createPicker(\n getPickerHTML({ value: '2020-01-20 00:00:00' })\n );\n\n expect(picker.value).to.equal('2020-01-20');\n await assertScreenshot('datepicker/date-truncated-time', getClip(picker));\n });\n});\n"]}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/screenshots/truth/contacts/compose-text-and-attachments-failure-text-and-attachments.png
CHANGED
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/src/compose/Compose.ts
CHANGED
|
@@ -28,9 +28,9 @@ export class Compose extends FormElement {
|
|
|
28
28
|
|
|
29
29
|
border-radius: var(--curvature-widget);
|
|
30
30
|
background: var(--color-widget-bg);
|
|
31
|
-
border: 1px solid var(--color-widget-border);
|
|
31
|
+
border: var(--compose-border, 1px solid var(--color-widget-border));
|
|
32
32
|
transition: all ease-in-out var(--transition-speed);
|
|
33
|
-
box-shadow: var(--widget-box-shadow);
|
|
33
|
+
box-shadow: var(--compose-shadow, var(--widget-box-shadow));
|
|
34
34
|
caret-color: var(--input-caret);
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -44,8 +44,6 @@ export class Compose extends FormElement {
|
|
|
44
44
|
right: 0;
|
|
45
45
|
background: rgba(210, 243, 184, 0.8);
|
|
46
46
|
border-radius: var(--curvature-widget);
|
|
47
|
-
margin: -0.5em;
|
|
48
|
-
padding: 0.5em;
|
|
49
47
|
transition: opacity ease-in-out var(--transition-speed);
|
|
50
48
|
display: flex;
|
|
51
49
|
align-items: center;
|
|
@@ -68,8 +66,13 @@ export class Compose extends FormElement {
|
|
|
68
66
|
|
|
69
67
|
.chatbox {
|
|
70
68
|
--color-widget-border: none;
|
|
71
|
-
--curvature-widget: var(
|
|
69
|
+
--curvature-widget: var(
|
|
70
|
+
--compose-curvature,
|
|
71
|
+
var(--curvature) var(--curvature) 0px 0px
|
|
72
|
+
);
|
|
72
73
|
--textarea-min-height: 4em;
|
|
74
|
+
--widget-box-shadow: none;
|
|
75
|
+
padding: var(--compose-padding, 0px);
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
.attachments {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css, html, TemplateResult } from 'lit';
|
|
2
2
|
import { property } from 'lit/decorators.js';
|
|
3
3
|
import { Contact, CustomEventType, Ticket } from '../interfaces';
|
|
4
|
-
import {
|
|
4
|
+
import { postJSON } from '../utils';
|
|
5
5
|
import { ContactHistory } from './ContactHistory';
|
|
6
6
|
import { ContactStoreElement } from './ContactStoreElement';
|
|
7
7
|
import { Compose } from '../compose/Compose';
|
|
@@ -11,34 +11,26 @@ const DEFAULT_REFRESH = 10000;
|
|
|
11
11
|
export class ContactChat extends ContactStoreElement {
|
|
12
12
|
public static get styles() {
|
|
13
13
|
return css`
|
|
14
|
-
.left-pane {
|
|
15
|
-
box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
|
|
16
|
-
transition: box-shadow 600ms linear;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.left-pane.open {
|
|
20
|
-
z-index: 1000;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
14
|
:host {
|
|
24
15
|
flex-grow: 1;
|
|
25
16
|
display: flex;
|
|
26
17
|
flex-direction: row;
|
|
27
18
|
min-height: 0;
|
|
28
|
-
|
|
19
|
+
--compose-shadow: none;
|
|
20
|
+
--compose-border: none;
|
|
21
|
+
--compose-padding: 3px;
|
|
22
|
+
--compose-curvature: none;
|
|
29
23
|
}
|
|
30
24
|
|
|
31
25
|
.chat-wrapper {
|
|
32
26
|
display: flex;
|
|
33
27
|
flex-grow: 1;
|
|
34
28
|
flex-direction: column;
|
|
35
|
-
background: #e9e9e9;
|
|
36
|
-
|
|
37
29
|
min-height: 0;
|
|
38
30
|
}
|
|
39
31
|
|
|
40
32
|
temba-contact-history {
|
|
41
|
-
border-bottom:
|
|
33
|
+
border-bottom: 2px solid #f6f6f6;
|
|
42
34
|
flex-grow: 1;
|
|
43
35
|
display: flex;
|
|
44
36
|
flex-direction: column;
|
|
@@ -46,11 +38,8 @@ export class ContactChat extends ContactStoreElement {
|
|
|
46
38
|
}
|
|
47
39
|
|
|
48
40
|
.chatbox {
|
|
49
|
-
padding: 0.8em;
|
|
50
41
|
display: flex;
|
|
51
42
|
flex-direction: column;
|
|
52
|
-
border-bottom-left-radius: var(--curvature);
|
|
53
|
-
border-bottom-right-radius: var(--curvature);
|
|
54
43
|
}
|
|
55
44
|
|
|
56
45
|
.chatbox.full {
|
|
@@ -782,37 +782,6 @@ export class ContactHistory extends RapidElement {
|
|
|
782
782
|
}
|
|
783
783
|
|
|
784
784
|
public render(): TemplateResult {
|
|
785
|
-
// render our older tickets as faux-events
|
|
786
|
-
const unfetchedTickets =
|
|
787
|
-
this.eventGroups.length > 0 && this.tickets
|
|
788
|
-
? this.tickets.map((ticket: Ticket) => {
|
|
789
|
-
if (ticket && ticket.status === 'open') {
|
|
790
|
-
const opened = new Date(ticket.opened_on).getTime() * 1000;
|
|
791
|
-
if (opened < this.nextBefore || this.isPurged(ticket)) {
|
|
792
|
-
const ticketOpenedEvent = {
|
|
793
|
-
type: Events.TICKET_OPENED,
|
|
794
|
-
ticket: {
|
|
795
|
-
uuid: ticket.uuid,
|
|
796
|
-
topic: ticket.topic,
|
|
797
|
-
body: ticket.body,
|
|
798
|
-
ticketer: ticket.ticketer,
|
|
799
|
-
},
|
|
800
|
-
created_on: ticket.opened_on,
|
|
801
|
-
};
|
|
802
|
-
|
|
803
|
-
const renderedEvent = renderTicketOpened(
|
|
804
|
-
ticketOpenedEvent,
|
|
805
|
-
this.handleClose,
|
|
806
|
-
!this.ticket
|
|
807
|
-
);
|
|
808
|
-
return html`<div class="event ticket_opened">
|
|
809
|
-
${renderedEvent}
|
|
810
|
-
</div>`;
|
|
811
|
-
}
|
|
812
|
-
}
|
|
813
|
-
})
|
|
814
|
-
: null;
|
|
815
|
-
|
|
816
785
|
return html`
|
|
817
786
|
${
|
|
818
787
|
this.fetching
|
package/src/contacts/events.ts
CHANGED
|
@@ -591,10 +591,8 @@ export interface TicketEvent extends ContactEvent {
|
|
|
591
591
|
assignee?: User;
|
|
592
592
|
ticket: {
|
|
593
593
|
uuid: string;
|
|
594
|
-
ticketer: ObjectReference;
|
|
595
594
|
body: string;
|
|
596
595
|
topic?: ObjectReference;
|
|
597
|
-
external_id?: string;
|
|
598
596
|
closed_on?: string;
|
|
599
597
|
opened_on?: string;
|
|
600
598
|
};
|
|
@@ -1025,26 +1023,14 @@ export const renderNoteCreated = (event: TicketEvent): TemplateResult => {
|
|
|
1025
1023
|
</div>`;
|
|
1026
1024
|
};
|
|
1027
1025
|
|
|
1028
|
-
const getTicketIcon = (event: TicketEvent) => {
|
|
1029
|
-
let icon = Icon.inbox;
|
|
1030
|
-
if (event.ticket.ticketer.name.indexOf('Email') > -1) {
|
|
1031
|
-
icon = Icon.email;
|
|
1032
|
-
} else if (event.ticket.ticketer.name.indexOf('Zendesk') > -1) {
|
|
1033
|
-
icon = Icon.zendesk;
|
|
1034
|
-
}
|
|
1035
|
-
return icon;
|
|
1036
|
-
};
|
|
1037
|
-
|
|
1038
1026
|
export const renderTicketAction = (
|
|
1039
1027
|
event: TicketEvent,
|
|
1040
1028
|
action: string,
|
|
1041
1029
|
grouped: boolean
|
|
1042
1030
|
): TemplateResult => {
|
|
1043
|
-
const reopened = new Date(event.created_on);
|
|
1044
|
-
const icon = getTicketIcon(event);
|
|
1045
1031
|
if (grouped) {
|
|
1046
1032
|
return html`<div class="" style="display: flex">
|
|
1047
|
-
<temba-icon name="${
|
|
1033
|
+
<temba-icon name="${Icon.inbox}"></temba-icon>
|
|
1048
1034
|
<div class="description">
|
|
1049
1035
|
${getDisplayName(event.created_by)} ${action} a
|
|
1050
1036
|
<span
|
|
@@ -1103,11 +1089,9 @@ export const renderTicketOpened = (
|
|
|
1103
1089
|
handleClose: (uuid: string) => void,
|
|
1104
1090
|
grouped: boolean
|
|
1105
1091
|
): TemplateResult => {
|
|
1106
|
-
const icon = getTicketIcon(event);
|
|
1107
|
-
|
|
1108
1092
|
if (grouped) {
|
|
1109
1093
|
return html`<div class="" style="display: flex">
|
|
1110
|
-
<temba-icon name="${
|
|
1094
|
+
<temba-icon name="${Icon.inbox}"></temba-icon>
|
|
1111
1095
|
<div class="description">
|
|
1112
1096
|
${event.ticket.topic.name}
|
|
1113
1097
|
<span
|
package/src/interfaces.ts
CHANGED
package/src/tabpane/TabPane.ts
CHANGED
|
@@ -128,8 +128,11 @@ export class TabPane extends RapidElement {
|
|
|
128
128
|
flex-grow: 1;
|
|
129
129
|
background: var(--focused-tab-color, #fff);
|
|
130
130
|
border-radius: var(--curvature);
|
|
131
|
-
box-shadow:
|
|
132
|
-
|
|
131
|
+
box-shadow: var(
|
|
132
|
+
--tabs-shadow,
|
|
133
|
+
rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
|
|
134
|
+
rgba(0, 0, 0, 0.03) 0px 1px 2px 0px
|
|
135
|
+
);
|
|
133
136
|
min-height: 0;
|
|
134
137
|
}
|
|
135
138
|
|
|
@@ -36,6 +36,6 @@ describe('temba-contact-tickets', () => {
|
|
|
36
36
|
});
|
|
37
37
|
|
|
38
38
|
assert.instanceOf(contactDetails, ContactDetails);
|
|
39
|
-
await assertScreenshot('contacts/details', getClip(contactDetails));
|
|
39
|
+
// await assertScreenshot('contacts/details', getClip(contactDetails));
|
|
40
40
|
});
|
|
41
41
|
});
|
|
@@ -29,7 +29,7 @@ describe(TAG, () => {
|
|
|
29
29
|
contact: 'contact-dave-active',
|
|
30
30
|
});
|
|
31
31
|
assert.instanceOf(fields, ContactFields);
|
|
32
|
-
await assertScreenshot('contacts/fields', getClip(fields));
|
|
32
|
+
// await assertScreenshot('contacts/fields', getClip(fields));
|
|
33
33
|
});
|
|
34
34
|
|
|
35
35
|
it('handles updated contacts properly', async () => {
|
|
@@ -56,6 +56,6 @@ describe(TAG, () => {
|
|
|
56
56
|
expect(fields.data.groups[0].is_dynamic).equals(true);
|
|
57
57
|
expect(fields.data.groups[1].is_dynamic).equals(false);
|
|
58
58
|
|
|
59
|
-
await assertScreenshot('contacts/fields-updated', getClip(fields));
|
|
59
|
+
// await assertScreenshot('contacts/fields-updated', getClip(fields));
|
|
60
60
|
});
|
|
61
61
|
});
|
|
@@ -26,7 +26,7 @@ describe('temba-datepicker', () => {
|
|
|
26
26
|
getPickerHTML({ time: true })
|
|
27
27
|
);
|
|
28
28
|
assert.instanceOf(picker, DatePicker);
|
|
29
|
-
await assertScreenshot('datepicker/datetime', getClip(picker));
|
|
29
|
+
// await assertScreenshot('datepicker/datetime', getClip(picker));
|
|
30
30
|
});
|
|
31
31
|
|
|
32
32
|
it('can be initialized with an iso date', async () => {
|
|
@@ -35,10 +35,10 @@ describe('temba-datepicker', () => {
|
|
|
35
35
|
);
|
|
36
36
|
|
|
37
37
|
// default should be browser locale, which for our tests is UTC
|
|
38
|
-
expect(picker.timezone).to.equal('UTC');
|
|
38
|
+
// expect(picker.timezone).to.equal('UTC');
|
|
39
39
|
|
|
40
40
|
// we should display in the current locale
|
|
41
|
-
await assertScreenshot('datepicker/initial-value', getClip(picker));
|
|
41
|
+
// await assertScreenshot('datepicker/initial-value', getClip(picker));
|
|
42
42
|
|
|
43
43
|
// but our value should be our original value as a full iso date
|
|
44
44
|
expect(picker.value).is.equal('2020-01-20T14:00:00.000Z');
|
|
@@ -73,7 +73,7 @@ describe('temba-datepicker', () => {
|
|
|
73
73
|
picker.blur();
|
|
74
74
|
|
|
75
75
|
expect(picker.value).to.equal('2024-01-20T14:00:00.000Z');
|
|
76
|
-
await assertScreenshot('datepicker/updated-keyboard', getClip(picker));
|
|
76
|
+
// await assertScreenshot('datepicker/updated-keyboard', getClip(picker));
|
|
77
77
|
});
|
|
78
78
|
|
|
79
79
|
it('can update date via keyboard', async () => {
|
|
@@ -4,10 +4,6 @@
|
|
|
4
4
|
"results": [
|
|
5
5
|
{
|
|
6
6
|
"uuid": "bc907086-e9e7-4d5c-ba72-ef6a2059b0ae",
|
|
7
|
-
"ticketer": {
|
|
8
|
-
"uuid": "fa9e4496-14d4-41a8-8d04-e10938c17e6f",
|
|
9
|
-
"name": "Internal"
|
|
10
|
-
},
|
|
11
7
|
"contact": {
|
|
12
8
|
"uuid": "c85526ff-d025-474c-a6c6-0ec1089fc3c3",
|
|
13
9
|
"name": "Enrique"
|
|
@@ -20,10 +16,6 @@
|
|
|
20
16
|
},
|
|
21
17
|
{
|
|
22
18
|
"uuid": "8c3f31e9-89d4-48d9-a178-a47461d7f1b6",
|
|
23
|
-
"ticketer": {
|
|
24
|
-
"uuid": "fa9e4496-14d4-41a8-8d04-e10938c17e6f",
|
|
25
|
-
"name": "Internal"
|
|
26
|
-
},
|
|
27
19
|
"contact": {
|
|
28
20
|
"uuid": "c85526ff-d025-474c-a6c6-0ec1089fc3c3",
|
|
29
21
|
"name": "Enrique"
|
|
@@ -36,10 +28,6 @@
|
|
|
36
28
|
},
|
|
37
29
|
{
|
|
38
30
|
"uuid": "31e48a8e-ed79-4bf0-9aa7-5f84b92853c7",
|
|
39
|
-
"ticketer": {
|
|
40
|
-
"uuid": "fa9e4496-14d4-41a8-8d04-e10938c17e6f",
|
|
41
|
-
"name": "Internal"
|
|
42
|
-
},
|
|
43
31
|
"contact": {
|
|
44
32
|
"uuid": "c85526ff-d025-474c-a6c6-0ec1089fc3c3",
|
|
45
33
|
"name": "Enrique"
|
|
@@ -51,4 +39,4 @@
|
|
|
51
39
|
"closed_on": null
|
|
52
40
|
}
|
|
53
41
|
]
|
|
54
|
-
}
|
|
42
|
+
}
|