@nyaruka/temba-components 0.121.5 → 0.121.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/temba-components.js +3 -3
  3. package/dist/temba-components.js.map +1 -1
  4. package/out-tsc/src/dropdown/Dropdown.js +0 -5
  5. package/out-tsc/src/dropdown/Dropdown.js.map +1 -1
  6. package/out-tsc/src/list/NotificationList.js +1 -4
  7. package/out-tsc/src/list/NotificationList.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/dropdown/Dropdown.ts +0 -8
  10. package/src/list/NotificationList.ts +2 -6
package/out-tsc/src/dropdown/Dropdown.js CHANGED
@@ -100,10 +100,6 @@ export class Dropdown extends RapidElement {
100
100
  this.arrowStyle = {};
101
101
  this.calculatePosition = this.calculatePosition.bind(this);
102
102
  }
103
- firstUpdated(props) {
104
- super.firstUpdated(props);
105
- this.resetBlurHandler();
106
- }
107
103
  resetBlurHandler() {
108
104
  const dropdown = this.shadowRoot.querySelector('.dropdown');
109
105
  if (this.activeFocus) {
@@ -135,7 +131,6 @@ export class Dropdown extends RapidElement {
135
131
  closeDropdown() {
136
132
  this.activeFocus.removeEventListener('blur', this.blurHandler);
137
133
  this.open = false;
138
- this.resetBlurHandler();
139
134
  window.setTimeout(() => {
140
135
  this.dormant = true;
141
136
  }, 250);
package/out-tsc/src/dropdown/Dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\n\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport class Dropdown extends RapidElement {\n static get styles() {\n return css`\n :host {\n }\n\n .wrapper {\n position: relative;\n }\n\n .toggle {\n cursor: pointer;\n }\n\n .dropdown-wrapper {\n position: relative;\n overflow: auto;\n }\n\n .dropdown:focus {\n }\n\n .dropdown.dormant {\n height: 0;\n overflow: hidden;\n }\n\n .dropdown {\n position: fixed;\n z-index: 2;\n padding: 0;\n opacity: 0;\n border-radius: calc(var(--curvature) * 1.5);\n background: #fff;\n transition: all calc(0.8 * var(--transition-speed)) var(--bounce);\n user-select: none;\n margin-top: 0px;\n margin-left: 0px;\n box-shadow: var(--dropdown-shadow);\n }\n\n .dropdown:focus {\n outline: none;\n }\n\n .arrow {\n content: '';\n width: 0px;\n height: 0;\n z-index: 10;\n position: absolute;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid white;\n }\n\n .open .dropdown {\n opacity: 1;\n transform: translateY(0.5em) scale(1);\n }\n\n .mask {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n opacity: 0.5;\n transition: opacity var(--transition-speed) ease-in-out;\n pointer-events: none;\n z-index: 1;\n }\n\n .mask.open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .right {\n right: 0;\n }\n `;\n }\n\n @property({ type: Boolean })\n open = false;\n\n @property({ type: Boolean })\n dormant = true;\n\n @property({ type: Number })\n arrowSize = 8;\n\n @property({ type: Number })\n margin = 10;\n\n @property({ type: Boolean })\n mask = false;\n\n @property({ type: Object, attribute: false })\n dropdownStyle = {};\n\n @property({ type: Object, attribute: false })\n arrowStyle = {};\n\n constructor() {\n super();\n this.calculatePosition = this.calculatePosition.bind(this);\n }\n\n private activeFocus: any;\n private blurHandler: any;\n\n public firstUpdated(props: any) {\n super.firstUpdated(props);\n this.resetBlurHandler();\n }\n\n private resetBlurHandler() {\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n if (this.activeFocus) {\n this.activeFocus.removeEventListener('blur', this.blurHandler);\n }\n\n this.activeFocus = dropdown;\n this.blurHandler = this.handleBlur.bind(this);\n\n this.activeFocus.addEventListener('blur', this.blurHandler);\n }\n\n private handleBlur(event: FocusEvent) {\n const newTarget = event.relatedTarget as any;\n\n if (this.contains(newTarget)) {\n newTarget.addEventListener('blur', this.blurHandler);\n this.activeFocus = newTarget;\n } else {\n this.closeDropdown();\n }\n }\n\n private openDropdown() {\n this.open = true;\n this.dormant = false;\n this.resetBlurHandler();\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n dropdown.focus();\n dropdown.click();\n\n this.fireCustomEvent(CustomEventType.Opened);\n }\n\n private closeDropdown() {\n this.activeFocus.removeEventListener('blur', this.blurHandler);\n\n this.open = false;\n this.resetBlurHandler();\n\n window.setTimeout(() => {\n this.dormant = true;\n }, 250);\n\n this.blur();\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n this.dropdownStyle = {};\n }\n\n if (changedProperties.has('dropdownStyle')) {\n if (Object.keys(this.dropdownStyle).length === 0) {\n this.calculatePosition();\n }\n }\n }\n\n public calculatePosition() {\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n const toggle = this.querySelector('*[slot=\"toggle\"]');\n\n const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n\n let bumpedUp = false;\n let bumpedLeft = false;\n\n if (dropdown && toggle) {\n const dropdownBounds = dropdown.getBoundingClientRect();\n const toggleBounds = toggle.getBoundingClientRect();\n const arrowBounds = arrow.getBoundingClientRect();\n\n if (!toggle) {\n return;\n }\n\n const dropdownStyle = {\n border: '1px solid rgba(0,0,0,0.1)',\n marginTop: '0.5em'\n };\n\n // if off the the right, bump it left\n if (dropdownBounds.right > window.innerWidth) {\n dropdownStyle['left'] =\n toggleBounds.right - dropdownBounds.width + 'px';\n delete dropdownStyle['right'];\n bumpedLeft = true;\n }\n\n // if off to the bottom, bump it up\n if (dropdownBounds.bottom > window.innerHeight) {\n dropdownStyle['top'] = toggleBounds.top - dropdownBounds.height + 'px';\n dropdownStyle['margin-top'] = '-0.5em';\n bumpedUp = true;\n }\n\n // if our arrow is aligned with the left of the dropdown, scootch\n // the dropdown left a pinch so our arrow still overlaps properly\n let arrowLeft = toggleBounds.width / 2 - arrowBounds.width / 2;\n if (arrowLeft <= 0) {\n dropdownStyle['marginLeft'] = '-10px';\n arrowLeft = 10;\n }\n\n const arrowStyle = {\n left: arrowLeft + 'px',\n borderWidth: this.arrowSize + 'px',\n top: '-' + this.arrowSize + 'px'\n };\n\n if (bumpedUp) {\n // rotate our arrow 180 degrees\n arrowStyle['transform'] = 'rotate(180deg)';\n\n // and place it at the bottom of the dropdown\n arrowStyle['top'] = 'auto';\n arrowStyle['bottom'] = '-' + this.arrowSize + 'px';\n }\n\n if (bumpedLeft) {\n arrowStyle['right'] =\n toggleBounds.width / 2 - arrowBounds.width / 2 + 'px';\n delete arrowStyle['left'];\n }\n\n this.arrowStyle = arrowStyle;\n this.dropdownStyle = dropdownStyle;\n }\n this.requestUpdate();\n }\n\n public handleToggleClicked(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.open && this.dormant) {\n this.openDropdown();\n }\n }\n\n public render(): TemplateResult {\n return html`\n ${this.mask\n ? html`<div class=\"mask ${this.open ? 'open' : ''}\" />`\n : null}\n\n <div\n class=\"wrapper ${getClasses({\n open: this.open\n })}\"\n >\n <slot\n name=\"toggle\"\n class=\"toggle\"\n @click=${this.handleToggleClicked}\n ></slot>\n <div\n class=\"${getClasses({\n dropdown: true,\n dormant: this.dormant\n })}\"\n style=${styleMap(this.dropdownStyle)}\n tabindex=\"0\"\n >\n <div class=\"arrow\" style=${styleMap(this.arrowStyle)}></div>\n <div class=\"dropdown-wrapper\">\n <slot name=\"dropdown\" tabindex=\"1\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../src/dropdown/Dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\n\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport class Dropdown extends RapidElement {\n static get styles() {\n return css`\n :host {\n }\n\n .wrapper {\n position: relative;\n }\n\n .toggle {\n cursor: pointer;\n }\n\n .dropdown-wrapper {\n position: relative;\n overflow: auto;\n }\n\n .dropdown:focus {\n }\n\n .dropdown.dormant {\n height: 0;\n overflow: hidden;\n }\n\n .dropdown {\n position: fixed;\n z-index: 2;\n padding: 0;\n opacity: 0;\n border-radius: calc(var(--curvature) * 1.5);\n background: #fff;\n transition: all calc(0.8 * var(--transition-speed)) var(--bounce);\n user-select: none;\n margin-top: 0px;\n margin-left: 0px;\n box-shadow: var(--dropdown-shadow);\n }\n\n .dropdown:focus {\n outline: none;\n }\n\n .arrow {\n content: '';\n width: 0px;\n height: 0;\n z-index: 10;\n position: absolute;\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid white;\n }\n\n .open .dropdown {\n opacity: 1;\n transform: translateY(0.5em) scale(1);\n }\n\n .mask {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.7);\n opacity: 0.5;\n transition: opacity var(--transition-speed) ease-in-out;\n pointer-events: none;\n z-index: 1;\n }\n\n .mask.open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .right {\n right: 0;\n }\n `;\n }\n\n @property({ type: Boolean })\n open = false;\n\n @property({ type: Boolean })\n dormant = true;\n\n @property({ type: Number })\n arrowSize = 8;\n\n @property({ type: Number })\n margin = 10;\n\n @property({ type: Boolean })\n mask = false;\n\n @property({ type: Object, attribute: false })\n dropdownStyle = {};\n\n @property({ type: Object, attribute: false })\n arrowStyle = {};\n\n constructor() {\n super();\n this.calculatePosition = this.calculatePosition.bind(this);\n }\n\n private activeFocus: any;\n private blurHandler: any;\n\n private resetBlurHandler() {\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n if (this.activeFocus) {\n this.activeFocus.removeEventListener('blur', this.blurHandler);\n }\n\n this.activeFocus = dropdown;\n this.blurHandler = this.handleBlur.bind(this);\n this.activeFocus.addEventListener('blur', this.blurHandler);\n }\n\n private handleBlur(event: FocusEvent) {\n const newTarget = event.relatedTarget as any;\n\n if (this.contains(newTarget)) {\n newTarget.addEventListener('blur', this.blurHandler);\n this.activeFocus = newTarget;\n } else {\n this.closeDropdown();\n }\n }\n\n private openDropdown() {\n this.open = true;\n this.dormant = false;\n this.resetBlurHandler();\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n dropdown.focus();\n dropdown.click();\n\n this.fireCustomEvent(CustomEventType.Opened);\n }\n\n private closeDropdown() {\n this.activeFocus.removeEventListener('blur', this.blurHandler);\n this.open = false;\n\n window.setTimeout(() => {\n this.dormant = true;\n }, 250);\n\n this.blur();\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n this.dropdownStyle = {};\n }\n\n if (changedProperties.has('dropdownStyle')) {\n if (Object.keys(this.dropdownStyle).length === 0) {\n this.calculatePosition();\n }\n }\n }\n\n public calculatePosition() {\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n const toggle = this.querySelector('*[slot=\"toggle\"]');\n\n const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n\n let bumpedUp = false;\n let bumpedLeft = false;\n\n if (dropdown && toggle) {\n const dropdownBounds = dropdown.getBoundingClientRect();\n const toggleBounds = toggle.getBoundingClientRect();\n const arrowBounds = arrow.getBoundingClientRect();\n\n if (!toggle) {\n return;\n }\n\n const dropdownStyle = {\n border: '1px solid rgba(0,0,0,0.1)',\n marginTop: '0.5em'\n };\n\n // if off the the right, bump it left\n if (dropdownBounds.right > window.innerWidth) {\n dropdownStyle['left'] =\n toggleBounds.right - dropdownBounds.width + 'px';\n delete dropdownStyle['right'];\n bumpedLeft = true;\n }\n\n // if off to the bottom, bump it up\n if (dropdownBounds.bottom > window.innerHeight) {\n dropdownStyle['top'] = toggleBounds.top - dropdownBounds.height + 'px';\n dropdownStyle['margin-top'] = '-0.5em';\n bumpedUp = true;\n }\n\n // if our arrow is aligned with the left of the dropdown, scootch\n // the dropdown left a pinch so our arrow still overlaps properly\n let arrowLeft = toggleBounds.width / 2 - arrowBounds.width / 2;\n if (arrowLeft <= 0) {\n dropdownStyle['marginLeft'] = '-10px';\n arrowLeft = 10;\n }\n\n const arrowStyle = {\n left: arrowLeft + 'px',\n borderWidth: this.arrowSize + 'px',\n top: '-' + this.arrowSize + 'px'\n };\n\n if (bumpedUp) {\n // rotate our arrow 180 degrees\n arrowStyle['transform'] = 'rotate(180deg)';\n\n // and place it at the bottom of the dropdown\n arrowStyle['top'] = 'auto';\n arrowStyle['bottom'] = '-' + this.arrowSize + 'px';\n }\n\n if (bumpedLeft) {\n arrowStyle['right'] =\n toggleBounds.width / 2 - arrowBounds.width / 2 + 'px';\n delete arrowStyle['left'];\n }\n\n this.arrowStyle = arrowStyle;\n this.dropdownStyle = dropdownStyle;\n }\n this.requestUpdate();\n }\n\n public handleToggleClicked(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.open && this.dormant) {\n this.openDropdown();\n }\n }\n\n public render(): TemplateResult {\n return html`\n ${this.mask\n ? html`<div class=\"mask ${this.open ? 'open' : ''}\" />`\n : null}\n\n <div\n class=\"wrapper ${getClasses({\n open: this.open\n })}\"\n >\n <slot\n name=\"toggle\"\n class=\"toggle\"\n @click=${this.handleToggleClicked}\n ></slot>\n <div\n class=\"${getClasses({\n dropdown: true,\n dormant: this.dormant\n })}\"\n style=${styleMap(this.dropdownStyle)}\n tabindex=\"0\"\n >\n <div class=\"arrow\" style=${styleMap(this.arrowStyle)}></div>\n <div class=\"dropdown-wrapper\">\n <slot name=\"dropdown\" tabindex=\"1\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
package/out-tsc/src/list/NotificationList.js CHANGED
@@ -35,7 +35,7 @@ export class NotificationList extends TembaList {
35
35
  super();
36
36
  this.reverseRefresh = false;
37
37
  this.internalFocusDisabled = true;
38
- this.valueKey = 'target_url';
38
+ this.valueKey = 'url';
39
39
  this.renderOption = (notification) => {
40
40
  let icon = null;
41
41
  let body = null;
@@ -127,9 +127,6 @@ export class NotificationList extends TembaList {
127
127
  <div class="title">Notifications</div>
128
128
  </div>`;
129
129
  }
130
- handleSelection(event) {
131
- super.handleSelected(event);
132
- }
133
130
  scrollToTop() {
134
131
  // scroll back to the top
135
132
  window.setTimeout(() => {
package/out-tsc/src/list/NotificationList.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NotificationList.js","sourceRoot":"","sources":["../../../src/list/NotificationList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { TembaList } from './TembaList';\nimport { Options } from '../options/Options';\nimport { Icon } from '../vectoricon';\n\ninterface Notification {\n created_on: string;\n type: string;\n target_url: string;\n is_seen: boolean;\n export?: {\n type: string;\n num_records: number;\n };\n import?: {\n type: string;\n num_records: number;\n };\n incident?: {\n type: string;\n started_on: string;\n ended_on?: string;\n };\n}\n\nexport class NotificationList extends TembaList {\n reverseRefresh = false;\n internalFocusDisabled = true;\n static get styles() {\n return css`\n :host {\n --option-hover-bg: #f9f9f9;\n }\n\n .header {\n padding: 0.25em 1em;\n background: #f9f9f9;\n border-top-left-radius: var(--curvature);\n border-top-right-radius: var(--curvature);\n display: flex;\n color: #999;\n border-bottom: 1px solid #f3f3f3;\n }\n\n .header temba-icon {\n margin-right: 0.35em;\n }\n\n .footer {\n background: #f9f9f9;\n }\n\n .title {\n font-weight: normal;\n }\n `;\n }\n\n constructor() {\n super();\n this.valueKey = 'target_url';\n this.renderOption = (notification: Notification): TemplateResult => {\n let icon = null;\n let body = null;\n const color = '#333';\n\n if (notification.type === 'incident:started') {\n if (notification.incident.type === 'org:flagged') {\n icon = Icon.incidents;\n body =\n 'Your workspace was flagged, please contact support for assistance.';\n } else if (notification.incident.type === 'org:suspended') {\n icon = Icon.incidents;\n body =\n 'Your workspace was suspended, please contact support for assistance.';\n } else if (notification.incident.type === 'channel:disconnected') {\n icon = Icon.channel;\n body = 'Your android channel is not connected';\n } else if (notification.incident.type === 'channel:templates_failed') {\n icon = Icon.channel;\n body = 'Your WhatsApp channel templates failed syncing';\n } else if (notification.incident.type === 'webhooks:unhealthy') {\n icon = Icon.webhook;\n body = 'Your webhook calls are not working properly.';\n }\n } else if (notification.type === 'import:finished') {\n if (notification.import.type === 'contact') {\n icon = Icon.contact_import;\n body = `Imported ${notification.import.num_records.toLocaleString()} contacts`;\n }\n } else if (notification.type === 'export:finished') {\n if (notification.export.type === 'contact') {\n icon = Icon.contact_export;\n body = `Exported ${notification.export.num_records.toLocaleString()} contacts`;\n } else if (notification.export.type === 'message') {\n icon = Icon.message_export;\n body = `Exported ${notification.export.num_records.toLocaleString()} messages`;\n } else if (notification.export.type === 'results') {\n icon = Icon.results_export;\n body = 'Exported flow results';\n } else if (notification.export.type === 'ticket') {\n icon = Icon.tickets_export;\n body = `Exported ${notification.export.num_records.toLocaleString()} tickets`;\n } else if (notification.export.type === 'definition') {\n icon = Icon.definitions_export;\n body = 'Exported definitions';\n }\n } else if (notification.type === 'tickets:activity') {\n icon = Icon.tickets;\n body = 'New ticket activity';\n } else if (notification.type === 'tickets:opened') {\n icon = Icon.tickets;\n body = 'New unassigned ticket';\n }\n return html`<div\n style=\"color:${color};display:flex;align-items:flex-start;flex-direction:row;font-weight:${notification.is_seen\n ? 400\n : 500}\"\n >\n ${icon\n ? html`<div style=\"margin-right:0.6em\">\n <temba-icon name=\"${icon}\"></temba-icon>\n </div>`\n : null}\n <div style=\"display:flex;flex-direction:column\">\n <div style=\"line-height:1.1em\">${body}</div>\n <temba-date\n style=\"font-size:80%\"\n value=${notification.created_on}\n display=\"duration\"\n ></temba-date>\n </div>\n </div>`;\n };\n }\n\n public renderHeader(): TemplateResult {\n return html`<div class=\"header\">\n <temba-icon name=\"notification\"></temba-icon>\n <div class=\"title\">Notifications</div>\n </div>`;\n }\n\n protected handleSelection(event: CustomEvent) {\n super.handleSelected(event);\n }\n\n public scrollToTop(): void {\n // scroll back to the top\n window.setTimeout(() => {\n const options = this.shadowRoot.querySelector('temba-options') as Options;\n options.scrollToTop();\n }, 1000);\n }\n}\n"]}
1
+ {"version":3,"file":"NotificationList.js","sourceRoot":"","sources":["../../../src/list/NotificationList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { TembaList } from './TembaList';\nimport { Options } from '../options/Options';\nimport { Icon } from '../vectoricon';\n\ninterface Notification {\n created_on: string;\n type: string;\n url: string;\n is_seen: boolean;\n export?: {\n type: string;\n num_records: number;\n };\n import?: {\n type: string;\n num_records: number;\n };\n incident?: {\n type: string;\n started_on: string;\n ended_on?: string;\n };\n}\n\nexport class NotificationList extends TembaList {\n reverseRefresh = false;\n internalFocusDisabled = true;\n static get styles() {\n return css`\n :host {\n --option-hover-bg: #f9f9f9;\n }\n\n .header {\n padding: 0.25em 1em;\n background: #f9f9f9;\n border-top-left-radius: var(--curvature);\n border-top-right-radius: var(--curvature);\n display: flex;\n color: #999;\n border-bottom: 1px solid #f3f3f3;\n }\n\n .header temba-icon {\n margin-right: 0.35em;\n }\n\n .footer {\n background: #f9f9f9;\n }\n\n .title {\n font-weight: normal;\n }\n `;\n }\n\n constructor() {\n super();\n this.valueKey = 'url';\n this.renderOption = (notification: Notification): TemplateResult => {\n let icon = null;\n let body = null;\n const color = '#333';\n\n if (notification.type === 'incident:started') {\n if (notification.incident.type === 'org:flagged') {\n icon = Icon.incidents;\n body =\n 'Your workspace was flagged, please contact support for assistance.';\n } else if (notification.incident.type === 'org:suspended') {\n icon = Icon.incidents;\n body =\n 'Your workspace was suspended, please contact support for assistance.';\n } else if (notification.incident.type === 'channel:disconnected') {\n icon = Icon.channel;\n body = 'Your android channel is not connected';\n } else if (notification.incident.type === 'channel:templates_failed') {\n icon = Icon.channel;\n body = 'Your WhatsApp channel templates failed syncing';\n } else if (notification.incident.type === 'webhooks:unhealthy') {\n icon = Icon.webhook;\n body = 'Your webhook calls are not working properly.';\n }\n } else if (notification.type === 'import:finished') {\n if (notification.import.type === 'contact') {\n icon = Icon.contact_import;\n body = `Imported ${notification.import.num_records.toLocaleString()} contacts`;\n }\n } else if (notification.type === 'export:finished') {\n if (notification.export.type === 'contact') {\n icon = Icon.contact_export;\n body = `Exported ${notification.export.num_records.toLocaleString()} contacts`;\n } else if (notification.export.type === 'message') {\n icon = Icon.message_export;\n body = `Exported ${notification.export.num_records.toLocaleString()} messages`;\n } else if (notification.export.type === 'results') {\n icon = Icon.results_export;\n body = 'Exported flow results';\n } else if (notification.export.type === 'ticket') {\n icon = Icon.tickets_export;\n body = `Exported ${notification.export.num_records.toLocaleString()} tickets`;\n } else if (notification.export.type === 'definition') {\n icon = Icon.definitions_export;\n body = 'Exported definitions';\n }\n } else if (notification.type === 'tickets:activity') {\n icon = Icon.tickets;\n body = 'New ticket activity';\n } else if (notification.type === 'tickets:opened') {\n icon = Icon.tickets;\n body = 'New unassigned ticket';\n }\n return html`<div\n style=\"color:${color};display:flex;align-items:flex-start;flex-direction:row;font-weight:${notification.is_seen\n ? 400\n : 500}\"\n >\n ${icon\n ? html`<div style=\"margin-right:0.6em\">\n <temba-icon name=\"${icon}\"></temba-icon>\n </div>`\n : null}\n <div style=\"display:flex;flex-direction:column\">\n <div style=\"line-height:1.1em\">${body}</div>\n <temba-date\n style=\"font-size:80%\"\n value=${notification.created_on}\n display=\"duration\"\n ></temba-date>\n </div>\n </div>`;\n };\n }\n\n public renderHeader(): TemplateResult {\n return html`<div class=\"header\">\n <temba-icon name=\"notification\"></temba-icon>\n <div class=\"title\">Notifications</div>\n </div>`;\n }\n\n public scrollToTop(): void {\n // scroll back to the top\n window.setTimeout(() => {\n const options = this.shadowRoot.querySelector('temba-options') as Options;\n options.scrollToTop();\n }, 1000);\n }\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nyaruka/temba-components",
3
- "version": "0.121.5",
3
+ "version": "0.121.7",
4
4
  "description": "Web components to support rapidpro and related projects",
5
5
  "author": "Nyaruka <code@nyaruka.coim>",
6
6
  "main": "dist/index.js",
package/src/dropdown/Dropdown.ts CHANGED
@@ -120,11 +120,6 @@ export class Dropdown extends RapidElement {
120
120
  private activeFocus: any;
121
121
  private blurHandler: any;
122
122
 
123
- public firstUpdated(props: any) {
124
- super.firstUpdated(props);
125
- this.resetBlurHandler();
126
- }
127
-
128
123
  private resetBlurHandler() {
129
124
  const dropdown = this.shadowRoot.querySelector(
130
125
  '.dropdown'
@@ -136,7 +131,6 @@ export class Dropdown extends RapidElement {
136
131
 
137
132
  this.activeFocus = dropdown;
138
133
  this.blurHandler = this.handleBlur.bind(this);
139
-
140
134
  this.activeFocus.addEventListener('blur', this.blurHandler);
141
135
  }
142
136
 
@@ -167,9 +161,7 @@ export class Dropdown extends RapidElement {
167
161
 
168
162
  private closeDropdown() {
169
163
  this.activeFocus.removeEventListener('blur', this.blurHandler);
170
-
171
164
  this.open = false;
172
- this.resetBlurHandler();
173
165
 
174
166
  window.setTimeout(() => {
175
167
  this.dormant = true;
package/src/list/NotificationList.ts CHANGED
@@ -6,7 +6,7 @@ import { Icon } from '../vectoricon';
6
6
  interface Notification {
7
7
  created_on: string;
8
8
  type: string;
9
- target_url: string;
9
+ url: string;
10
10
  is_seen: boolean;
11
11
  export?: {
12
12
  type: string;
@@ -58,7 +58,7 @@ export class NotificationList extends TembaList {
58
58
 
59
59
  constructor() {
60
60
  super();
61
- this.valueKey = 'target_url';
61
+ this.valueKey = 'url';
62
62
  this.renderOption = (notification: Notification): TemplateResult => {
63
63
  let icon = null;
64
64
  let body = null;
@@ -141,10 +141,6 @@ export class NotificationList extends TembaList {
141
141
  </div>`;
142
142
  }
143
143
 
144
- protected handleSelection(event: CustomEvent) {
145
- super.handleSelected(event);
146
- }
147
-
148
144
  public scrollToTop(): void {
149
145
  // scroll back to the top
150
146
  window.setTimeout(() => {