npm - @nyaruka/temba-components - Versions diffs - 0.111.6 → 0.112.0 - Mend

@nyaruka/temba-components 0.111.6 → 0.112.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/CHANGELOG.md +14 -3
package/dist/temba-components.js +383 -266
package/dist/temba-components.js.map +1 -1
package/out-tsc/src/button/Button.js +4 -0
package/out-tsc/src/button/Button.js.map +1 -1
package/out-tsc/src/chat/Chat.js +24 -20
package/out-tsc/src/chat/Chat.js.map +1 -1
package/out-tsc/src/compose/Compose.js +9 -7
package/out-tsc/src/compose/Compose.js.map +1 -1
package/out-tsc/src/contacts/ContactChat.js +172 -21
package/out-tsc/src/contacts/ContactChat.js.map +1 -1
package/out-tsc/src/interfaces.js +1 -0
package/out-tsc/src/interfaces.js.map +1 -1
package/out-tsc/src/list/RunList.js +1 -1
package/out-tsc/src/list/RunList.js.map +1 -1
package/out-tsc/src/options/Options.js +1 -0
package/out-tsc/src/options/Options.js.map +1 -1
package/out-tsc/src/select/Select.js +30 -3
package/out-tsc/src/select/Select.js.map +1 -1
package/out-tsc/src/store/EndpointMonitorElement.js +4 -4
package/out-tsc/src/store/EndpointMonitorElement.js.map +1 -1
package/out-tsc/src/store/Store.js +8 -7
package/out-tsc/src/store/Store.js.map +1 -1
package/out-tsc/src/store/StoreMonitorElement.js +1 -6
package/out-tsc/src/store/StoreMonitorElement.js.map +1 -1
package/out-tsc/src/tabpane/TabPane.js +6 -4
package/out-tsc/src/tabpane/TabPane.js.map +1 -1
package/out-tsc/src/user/TembaUser.js +43 -23
package/out-tsc/src/user/TembaUser.js.map +1 -1
package/out-tsc/test/temba-contact-chat.test.js +2 -1
package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
package/out-tsc/test/temba-contact-tickets.test.js +2 -2
package/out-tsc/test/temba-contact-tickets.test.js.map +1 -1
package/out-tsc/test/utils.test.js +25 -0
package/out-tsc/test/utils.test.js.map +1 -1
package/package.json +1 -1
package/screenshots/truth/contacts/chat-failure.png +0 -0
package/screenshots/truth/contacts/chat-for-active-contact.png +0 -0
package/screenshots/truth/contacts/chat-for-archived-contact.png +0 -0
package/screenshots/truth/contacts/chat-for-blocked-contact.png +0 -0
package/screenshots/truth/contacts/chat-for-stopped-contact.png +0 -0
package/screenshots/truth/contacts/chat-sends-attachments-only.png +0 -0
package/screenshots/truth/contacts/chat-sends-text-and-attachments.png +0 -0
package/screenshots/truth/contacts/chat-sends-text-only.png +0 -0
package/src/button/Button.ts +4 -0
package/src/chat/Chat.ts +28 -28
package/src/compose/Compose.ts +9 -7
package/src/contacts/ContactChat.ts +176 -23
package/src/interfaces.ts +2 -1
package/src/list/RunList.ts +1 -1
package/src/options/Options.ts +1 -0
package/src/select/Select.ts +34 -8
package/src/store/EndpointMonitorElement.ts +5 -5
package/src/store/Store.ts +8 -9
package/src/store/StoreMonitorElement.ts +2 -10
package/src/tabpane/TabPane.ts +6 -4
package/src/user/TembaUser.ts +48 -26
package/test/temba-contact-chat.test.ts +3 -0
package/test/temba-contact-tickets.test.ts +2 -5
package/test/utils.test.ts +27 -0
package/test-assets/api/users/admin1.json +13 -0
package/test-assets/api/users/agent1.json +13 -0
package/test-assets/api/users/editor1.json +13 -0
package/test-assets/api/users/viewer1.json +13 -0

package/out-tsc/src/list/RunList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n @property({ type: String })\n flow: string;\n\n @property({ type: Object, attribute: false })\n results: any[];\n\n @property({ type: Boolean })\n responses = true;\n\n @property({ type: Object })\n resultPreview: any;\n\n @property({ type: Object })\n selectedRun: any;\n\n @property({ type: Boolean })\n allowDelete = true;\n\n private resultKeys = {};\n\n static get styles() {\n return css`\n :host {\n overflow-y: auto !important;\n --contact-name-font-size: 1em;\n }\n\n @media only screen and (max-height: 768px) {\n temba-options {\n max-height: 20vh;\n }\n }\n\n temba-options {\n display: block;\n width: 100%;\n flex-grow: 1;\n }\n `;\n }\n\n public firstUpdated(changedProperties: Map<string, any>) {\n super.firstUpdated(changedProperties);\n }\n\n public updated(changedProperties: Map<string, any>): void {\n super.updated(changedProperties);\n if (changedProperties.has('responses') \|\| changedProperties.has('flow')) {\n if (this.flow) {\n this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n this.responses ? '&responded=1' : ''\n }`;\n }\n }\n\n if (changedProperties.has('resultPreview')) {\n this.createRenderOption();\n }\n\n if (changedProperties.has('results')) {\n if (this.results) {\n const select = this.shadowRoot.querySelector('temba-select') as Select;\n select.setOptions(this.results);\n this.resultKeys = this.results.reduce(\n (current, result) => ({ ...current, [result.key]: result }),\n {}\n );\n }\n }\n }\n\n public renderResultPreview(run: any) {\n if (this.resultPreview) {\n const runResult = run.values[this.resultPreview.key];\n if (runResult) {\n if (this.resultPreview.categories.length > 1) {\n if (runResult.category) {\n return runResult.category;\n }\n } else {\n return runResult.value;\n }\n }\n }\n return null;\n }\n\n public removeRun(id: number) {\n this.items = this.items.filter((run) => run.id !== id);\n this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n this.requestUpdate('cursorIndex');\n }\n\n public getIcon(run: any): TemplateResult {\n let icon = null;\n if (run.exit_type == 'completed') {\n icon = html`<temba-icon\n name=\"check\"\n style=\"--icon-color:#666;margin-left:0.5em\"\n />`;\n } else if (run.exit_type == 'interrupted') {\n icon = html`<temba-icon\n name=\"x-octagon\"\n style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n />`;\n } else if (run.exit_type == 'expired') {\n icon = html`<temba-icon\n name=\"clock\"\n style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n />`;\n } else if (!run.exit_type) {\n if (run.responded) {\n icon = html`<temba-icon\n name=\"activity\"\n style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n />`;\n } else {\n icon = html`<temba-icon\n name=\"hourglass\"\n style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n />`;\n }\n }\n return icon;\n }\n\n public createRenderOption() {\n this.renderOption = (run: any): TemplateResult => {\n let statusStyle = '';\n\n if (!run.exited_on) {\n statusStyle = 'font-weight:400;';\n }\n\n if (!run.responded) {\n statusStyle += '';\n }\n\n return html`\n <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n <div\n style=\"width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n >\n <temba-contact-name\n name=${run.contact.name \|\| run.contact.anon_display}\n urn=${run.contact.urn}\n icon-size=\"15\"\n />\n </div>\n\n <div\n style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n >\n ${this.renderResultPreview(run)}\n </div>\n\n <div style=\"flex-shrink:1\">\n <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n </div>\n ${this.getIcon(run)}\n </div>\n `;\n };\n }\n\n public getRefreshEndpoint() {\n if (this.items.length > 0) {\n const modifiedOn = this.items[0].modified_on;\n return this.endpoint + '&after=' + modifiedOn;\n }\n return this.endpoint;\n }\n\n public toggleResponded() {\n this.responses = (\n this.shadowRoot.querySelector('#responded') as Checkbox\n ).checked;\n }\n\n public handleColumnChanged(event: any) {\n if (event.target.values.length > 0) {\n this.resultPreview = event.target.values[0];\n } else {\n this.resultPreview = null;\n }\n }\n\n public handleSelected(selected: any) {\n this.selectedRun = selected;\n }\n\n public getListStyle(): string {\n return '';\n }\n\n public renderHeader(): TemplateResult {\n return html`\n <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n <div style=\"flex-grow:1\">\n ${this.results\n ? html`\n <temba-select\n clearable\n placeholder=\"Result Preview\"\n @change=${this.handleColumnChanged}\n />\n `\n : null}\n </div>\n <div style=\"margin-left:1em;\">\n <temba-checkbox\n id=\"responded\"\n label=\"Responses Only\"\n checked=\"true\"\n @click=${this.toggleResponded}\n />\n </div>\n </div>\n <div\n style=\"\n font-size:0.8em;\n color:rgba(0,0,0,.4);\n text-align:right;\n background:#f9f9f9;\n border: 1px solid var(--color-widget-border);\n margin-bottom:-0.5em; \n padding-bottom: 0.6em;\n padding-top: 0.3em;\n padding-right: 4.5em;\n border-top-right-radius: var(--curvature);\n border-top-left-radius: var(--curvature)\n \"\n >\n Last Updated\n </div>\n `;\n }\n\n public renderFooter(): TemplateResult {\n if (!this.selectedRun \|\| !this.resultKeys) {\n return null;\n }\n\n const resultKeys = Object.keys(this.selectedRun.values);\n\n return html` <div\n style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n >\n <div style=\"display:flex;flex-direction:column;\">\n <div\n style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n >\n <div>\n <temba-contact-name\n style=\"cursor:pointer\"\n name=${this.selectedRun.contact.name \|\|\n this.selectedRun.contact.anon_display}\n urn=${this.selectedRun.contact.urn}\n onclick=\"goto(event, this)\"\n href=\"/contact/read/${this.selectedRun.contact.uuid}/\"\n ></temba-contact-name>\n <div\n style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n >\n ${this.selectedRun.exit_type\n ? html`\n <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n ${this.getIcon(this.selectedRun)}\n <div style=\"margin-left:0.5em\">\n ${capitalize(this.selectedRun.exit_type)} \n </div>\n <temba-date\n value=\"${this.selectedRun.exited_on}\"\n compare=\"${this.selectedRun.created_on}\"\n display=\"duration\"\n />\n </div>\n `\n : html`${this.getIcon(this.selectedRun)}\n <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n <div>Started </div>\n <temba-date\n value=\"${this.selectedRun.created_on}\"\n display=\"duration\"\n ></temba-date>\n </div>`}\n </div>\n </div>\n <div style=\"flex-grow:1\"></div>\n <div style=\"display:flex;flex-direction: column\">\n <div style=\"font-size:0.75em\">\n ${new Date(this.selectedRun.created_on).toLocaleString()}\n </div>\n <div\n style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n >\n Started\n </div>\n </div>\n ${this.allowDelete\n ? html` <temba-icon\n clickable\n style=\"margin-left:0.75em;\"\n name=${Icon.delete}\n onclick=\"deleteRun(${this.selectedRun.id});\"\n ></temba-icon>`\n : null}\n </div>\n\n ${resultKeys.length > 0\n ? html`\n <div style=\"padding:1em;\">\n <div\n style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n >\n <div style=\"flex-grow:1\"></div>\n </div>\n\n <table width=\"100%\">\n <tr>\n <th style=\"text-align:left\" width=\"25%\">Result</th>\n <th style=\"text-align:left\" width=\"25%\">Category</th>\n <th style=\"text-align:left\">Value</th>\n </tr>\n\n ${Object.keys(this.selectedRun.values).map((key: string) => {\n const result = this.selectedRun.values[key];\n const meta = this.resultKeys[key];\n\n // if our result is no longer represented in the flow, skip it\n if (meta) {\n return html`<tr>\n <td>${result.name}</td>\n <td>\n ${meta.categories.length > 1 ? result.category : '--'}\n </td>\n <td>${result.value}</td>\n </tr>`;\n }\n return null;\n })}\n </table>\n </div>\n `\n : null}\n </div>\n </div>`;\n }\n\n constructor() {\n super();\n this.reverseRefresh = false;\n this.valueKey = 'uuid';\n this.hideShadow = true;\n this.createRenderOption();\n }\n}\n"]}
1	+ {"version":3,"file":"RunList.js","sourceRoot":"","sources":["../../../src/list/RunList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n @property({ type: String })\n flow: string;\n\n @property({ type: Object, attribute: false })\n results: any[];\n\n @property({ type: Boolean })\n responses = true;\n\n @property({ type: Object })\n resultPreview: any;\n\n @property({ type: Object })\n selectedRun: any;\n\n @property({ type: Boolean })\n allowDelete = false;\n\n private resultKeys = {};\n\n static get styles() {\n return css`\n :host {\n overflow-y: auto !important;\n --contact-name-font-size: 1em;\n }\n\n @media only screen and (max-height: 768px) {\n temba-options {\n max-height: 20vh;\n }\n }\n\n temba-options {\n display: block;\n width: 100%;\n flex-grow: 1;\n }\n `;\n }\n\n public firstUpdated(changedProperties: Map<string, any>) {\n super.firstUpdated(changedProperties);\n }\n\n public updated(changedProperties: Map<string, any>): void {\n super.updated(changedProperties);\n if (changedProperties.has('responses') \|\| changedProperties.has('flow')) {\n if (this.flow) {\n this.endpoint = `/api/v2/runs.json?flow=${this.flow}${\n this.responses ? '&responded=1' : ''\n }`;\n }\n }\n\n if (changedProperties.has('resultPreview')) {\n this.createRenderOption();\n }\n\n if (changedProperties.has('results')) {\n if (this.results) {\n const select = this.shadowRoot.querySelector('temba-select') as Select;\n select.setOptions(this.results);\n this.resultKeys = this.results.reduce(\n (current, result) => ({ ...current, [result.key]: result }),\n {}\n );\n }\n }\n }\n\n public renderResultPreview(run: any) {\n if (this.resultPreview) {\n const runResult = run.values[this.resultPreview.key];\n if (runResult) {\n if (this.resultPreview.categories.length > 1) {\n if (runResult.category) {\n return runResult.category;\n }\n } else {\n return runResult.value;\n }\n }\n }\n return null;\n }\n\n public removeRun(id: number) {\n this.items = this.items.filter((run) => run.id !== id);\n this.cursorIndex = Math.min(this.cursorIndex, this.items.length);\n this.requestUpdate('cursorIndex');\n }\n\n public getIcon(run: any): TemplateResult {\n let icon = null;\n if (run.exit_type == 'completed') {\n icon = html`<temba-icon\n name=\"check\"\n style=\"--icon-color:#666;margin-left:0.5em\"\n />`;\n } else if (run.exit_type == 'interrupted') {\n icon = html`<temba-icon\n name=\"x-octagon\"\n style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n />`;\n } else if (run.exit_type == 'expired') {\n icon = html`<temba-icon\n name=\"clock\"\n style=\"--icon-color:${FLOW_COLOR};margin-left:0.5em\"\n />`;\n } else if (!run.exit_type) {\n if (run.responded) {\n icon = html`<temba-icon\n name=\"activity\"\n style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n />`;\n } else {\n icon = html`<temba-icon\n name=\"hourglass\"\n style=\"--icon-color:var(--color-primary-dark);margin-left:0.5em\"\n />`;\n }\n }\n return icon;\n }\n\n public createRenderOption() {\n this.renderOption = (run: any): TemplateResult => {\n let statusStyle = '';\n\n if (!run.exited_on) {\n statusStyle = 'font-weight:400;';\n }\n\n if (!run.responded) {\n statusStyle += '';\n }\n\n return html`\n <div class=\"row\" style=\"${statusStyle}display:flex;align-items:center\">\n <div\n style=\"width:16em;white-space:nowrap;overflow: hidden; text-overflow: ellipsis;\"\n >\n <temba-contact-name\n name=${run.contact.name \|\| run.contact.anon_display}\n urn=${run.contact.urn}\n icon-size=\"15\"\n />\n </div>\n\n <div\n style=\"margin: 0em 1em;flex:1;white-space:nowrap; overflow:hidden; text-overflow: ellipsis;\"\n >\n ${this.renderResultPreview(run)}\n </div>\n\n <div style=\"flex-shrink:1\">\n <temba-date value=\"${run.modified_on}\" display=\"duration\" />\n </div>\n ${this.getIcon(run)}\n </div>\n `;\n };\n }\n\n public getRefreshEndpoint() {\n if (this.items.length > 0) {\n const modifiedOn = this.items[0].modified_on;\n return this.endpoint + '&after=' + modifiedOn;\n }\n return this.endpoint;\n }\n\n public toggleResponded() {\n this.responses = (\n this.shadowRoot.querySelector('#responded') as Checkbox\n ).checked;\n }\n\n public handleColumnChanged(event: any) {\n if (event.target.values.length > 0) {\n this.resultPreview = event.target.values[0];\n } else {\n this.resultPreview = null;\n }\n }\n\n public handleSelected(selected: any) {\n this.selectedRun = selected;\n }\n\n public getListStyle(): string {\n return '';\n }\n\n public renderHeader(): TemplateResult {\n return html`\n <div style=\"display:flex;width:100%;margin-bottom: 1em;\">\n <div style=\"flex-grow:1\">\n ${this.results\n ? html`\n <temba-select\n clearable\n placeholder=\"Result Preview\"\n @change=${this.handleColumnChanged}\n />\n `\n : null}\n </div>\n <div style=\"margin-left:1em;\">\n <temba-checkbox\n id=\"responded\"\n label=\"Responses Only\"\n checked=\"true\"\n @click=${this.toggleResponded}\n />\n </div>\n </div>\n <div\n style=\"\n font-size:0.8em;\n color:rgba(0,0,0,.4);\n text-align:right;\n background:#f9f9f9;\n border: 1px solid var(--color-widget-border);\n margin-bottom:-0.5em; \n padding-bottom: 0.6em;\n padding-top: 0.3em;\n padding-right: 4.5em;\n border-top-right-radius: var(--curvature);\n border-top-left-radius: var(--curvature)\n \"\n >\n Last Updated\n </div>\n `;\n }\n\n public renderFooter(): TemplateResult {\n if (!this.selectedRun \|\| !this.resultKeys) {\n return null;\n }\n\n const resultKeys = Object.keys(this.selectedRun.values);\n\n return html` <div\n style=\"margin-top: 1.5em; margin-bottom:0.5em;flex-grow:1;border-radius:var(--curvature); border: 1px solid var(--color-widget-border);\"\n >\n <div style=\"display:flex;flex-direction:column;\">\n <div\n style=\"font-size:1.5em;background:#f9f9f9;padding:.75em;padding-top:.35em;display:flex;align-items:center;border-top-right-radius:var(--curvature);border-top-left-radius:var(--curvature)\"\n >\n <div>\n <temba-contact-name\n style=\"cursor:pointer\"\n name=${this.selectedRun.contact.name \|\|\n this.selectedRun.contact.anon_display}\n urn=${this.selectedRun.contact.urn}\n onclick=\"goto(event, this)\"\n href=\"/contact/read/${this.selectedRun.contact.uuid}/\"\n ></temba-contact-name>\n <div\n style=\"display:flex;margin-left:-0.2em;margin-top:0.25em;font-size: 0.65em\"\n >\n ${this.selectedRun.exit_type\n ? html`\n <div style=\"margin-left:2em;flex-grow:1;display:flex\">\n ${this.getIcon(this.selectedRun)}\n <div style=\"margin-left:0.5em\">\n ${capitalize(this.selectedRun.exit_type)} \n </div>\n <temba-date\n value=\"${this.selectedRun.exited_on}\"\n compare=\"${this.selectedRun.created_on}\"\n display=\"duration\"\n />\n </div>\n `\n : html`${this.getIcon(this.selectedRun)}\n <div style=\"margin-left:1.5em;flex-grow:1;display:flex\">\n <div>Started </div>\n <temba-date\n value=\"${this.selectedRun.created_on}\"\n display=\"duration\"\n ></temba-date>\n </div>`}\n </div>\n </div>\n <div style=\"flex-grow:1\"></div>\n <div style=\"display:flex;flex-direction: column\">\n <div style=\"font-size:0.75em\">\n ${new Date(this.selectedRun.created_on).toLocaleString()}\n </div>\n <div\n style=\"font-size:0.6em;align-self:flex-end;color:#888;line-height:0.75em\"\n >\n Started\n </div>\n </div>\n ${this.allowDelete\n ? html` <temba-icon\n clickable\n style=\"margin-left:0.75em;\"\n name=${Icon.delete}\n onclick=\"deleteRun(${this.selectedRun.id});\"\n ></temba-icon>`\n : null}\n </div>\n\n ${resultKeys.length > 0\n ? html`\n <div style=\"padding:1em;\">\n <div\n style=\"display:flex;font-size:1.2em;position:relative;right:0px\"\n >\n <div style=\"flex-grow:1\"></div>\n </div>\n\n <table width=\"100%\">\n <tr>\n <th style=\"text-align:left\" width=\"25%\">Result</th>\n <th style=\"text-align:left\" width=\"25%\">Category</th>\n <th style=\"text-align:left\">Value</th>\n </tr>\n\n ${Object.keys(this.selectedRun.values).map((key: string) => {\n const result = this.selectedRun.values[key];\n const meta = this.resultKeys[key];\n\n // if our result is no longer represented in the flow, skip it\n if (meta) {\n return html`<tr>\n <td>${result.name}</td>\n <td>\n ${meta.categories.length > 1 ? result.category : '--'}\n </td>\n <td>${result.value}</td>\n </tr>`;\n }\n return null;\n })}\n </table>\n </div>\n `\n : null}\n </div>\n </div>`;\n }\n\n constructor() {\n super();\n this.reverseRefresh = false;\n this.valueKey = 'uuid';\n this.hideShadow = true;\n this.createRenderOption();\n }\n}\n"]}

package/out-tsc/src/options/Options.js CHANGED Viewed

@@ -134,6 +134,7 @@ export class Options extends RapidElement {
         cursor: pointer;
         color: var(--color-text-dark);
         scroll-margin: 5px 0px;
+        text-align: left;
       }
       .option * {

package/out-tsc/src/options/Options.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport {\n getClasses,\n getScrollParent,\n isElementVisible,\n throttle\n} from '../utils';\n\nexport class Options extends RapidElement {\n static get styles() {\n return css`\n .options-container {\n background: var(--color-options-bg);\n user-select: none;\n border-radius: var(--curvature-widget);\n overflow: hidden;\n margin-top: var(--options-margin-top);\n display: flex;\n flex-direction: column;\n transform: scaleY(0.5) translateY(-5em);\n transition: transform var(--transition-speed)\n cubic-bezier(0.71, 0.18, 0.61, 1.33),\n opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);\n opacity: 0;\n border: 1px transparent;\n z-index: 1000;\n }\n\n .shadow {\n box-shadow: var(--options-shadow);\n }\n\n .anchored {\n position: fixed;\n }\n\n :host([block]) .options-container {\n flex-grow: 1;\n height: 100%;\n border: none;\n }\n\n :host([block]) .options-scroll {\n height: 100%;\n visibility: visible;\n overflow-y: auto;\n flex-grow: 1;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n :host([block]) {\n border-radius: var(--curvature);\n display: block;\n height: 100%;\n }\n\n :host([block]) .shadow {\n box-shadow: var(--options-block-shadow);\n }\n\n .bordered {\n border: 1px solid var(--color-widget-border) !important;\n }\n\n :host([block]) .options {\n margin-bottom: 1.5em;\n }\n\n .options-scroll {\n display: flex;\n flex-direction: column;\n }\n\n :host([collapsed]) temba-icon {\n flex-grow: 1;\n margin-right: 0px !important;\n padding-top: 0.25em;\n padding-bottom: 0.25em;\n }\n\n :host([collapsed]) .name {\n display: none;\n }\n\n :host([collapsed]) .count {\n display: none;\n }\n\n .options {\n border-radius: var(--curvature-widget);\n overflow-y: auto;\n max-height: 225px;\n border: none;\n }\n\n .show {\n transform: scaleY(1) translateY(0);\n border: 1px solid var(--color-widget-border);\n opacity: 1;\n z-index: 1;\n }\n\n .option {\n font-size: var(--temba-options-font-size);\n padding: 5px 10px;\n border-radius: 4px;\n margin: 0.3em;\n cursor: pointer;\n color: var(--color-text-dark);\n scroll-margin: 5px 0px;\n }\n\n .option * {\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -moz-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n\n .option .detail {\n font-size: 85%;\n color: rgba(0, 0, 0, 0.4);\n }\n\n code {\n background: rgba(0, 0, 0, 0.05);\n padding: 1px 5px;\n border-radius: var(--curvature-widget);\n }\n\n :host([block]) {\n position: relative;\n }\n\n :host([block]) .options {\n overflow-y: initial;\n }\n\n temba-loading {\n align-self: center;\n margin-top: 0.025em;\n }\n\n .loader-bar {\n pointer-events: none;\n align-items: center;\n background: #eee;\n max-height: 0;\n transition: max-height var(--transition-speed) ease-in-out;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n display: flex;\n overflow: hidden;\n }\n\n .loading .loader-bar {\n max-height: 1.1em;\n }\n\n .option:hover {\n background: var(--option-hover-bg);\n color: var(--option-hover-text);\n }\n\n .option.focused {\n background: var(--color-selection);\n color: var(--color-text-dark);\n }\n `;\n }\n\n @property({ type: Number })\n top: number;\n\n @property({ type: Number })\n left: number;\n\n @property({ type: Number })\n width: number;\n\n @property({ type: Number, attribute: 'static-width' })\n staticWidth: number;\n\n @property({ type: Boolean, attribute: 'anchor-right' })\n anchorRight: boolean;\n\n @property({ type: Number })\n marginHorizontal = 0;\n\n @property({ type: Number })\n marginVertical = 7;\n\n @property({ type: Object })\n anchorTo: HTMLElement;\n\n @property({ type: Boolean })\n visible: boolean;\n\n @property({ type: Boolean })\n block: boolean;\n\n // if we allow the focus to follow the cursor\n @property({ type: Boolean })\n cursorHover: boolean;\n\n // fire selection events when cursor changes\n @property({ type: Boolean })\n cursorSelection: boolean;\n\n @property({ type: Number })\n scrollPct = 75;\n\n @property({ type: Number })\n cursorIndex = -1;\n\n @property({ type: Boolean })\n internalFocusDisabled = false;\n\n @property({ type: Array })\n options: any[];\n\n @property({ type: Array })\n tempOptions: any[];\n\n @property({ type: Boolean })\n poppedTop: boolean;\n\n @property({ type: Boolean })\n spaceSelect: boolean;\n\n @property({ type: String })\n nameKey = 'name';\n\n @property({ type: Boolean })\n loading = false;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n @property({ type: Boolean })\n hideShadow = false;\n\n @property({ attribute: false })\n getName: { (option: any): string } = function (option: any) {\n return option[this.nameKey \|\| 'name'];\n };\n\n @property({ attribute: false })\n renderInputOption: { (): TemplateResult } = function () {\n return null;\n };\n\n @property({ attribute: false })\n renderOption: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n @property({ type: Number })\n scrollHeight = 0;\n\n @property({ type: Boolean })\n triggerScroll = false;\n\n scrollParent: HTMLElement = null;\n\n resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n public firstUpdated() {\n if (!this.block) {\n this.scrollParent = getScrollParent(this);\n this.calculatePosition = this.calculatePosition.bind(this);\n if (this.scrollParent) {\n this.scrollParent.addEventListener('scroll', this.calculatePosition);\n }\n this.calculatePosition();\n }\n\n this.resolvedRenderOption = (\n this.renderOption \|\| this.renderOptionDefault\n ).bind(this);\n }\n\n public disconnectedCallback() {\n if (!this.block) {\n if (this.scrollParent) {\n this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n }\n }\n }\n\n private isFocused() {\n const focused =\n this.closestElement(document.activeElement.tagName) ===\n document.activeElement;\n\n return focused;\n }\n\n public updated(changed: Map<string, any>) {\n super.updated(changed);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (!this.internalFocusDisabled && changed.has('cursorIndex')) {\n this.fireCustomEvent(CustomEventType.CursorChanged, {\n index: this.cursorIndex\n });\n }\n\n if (changed.has('visible') && changed.has('options')) {\n if (!this.visible && this.options.length == 0) {\n this.tempOptions = changed.get('options');\n window.setTimeout(() => {\n this.tempOptions = [];\n }, 300);\n }\n }\n\n if (changed.has('options')) {\n this.calculatePosition();\n\n // allow scrolls to trigger again\n this.triggerScroll = true;\n\n const prevOptions = changed.get('options');\n const previousCount = prevOptions ? prevOptions.length : 0;\n const newCount = this.options ? this.options.length : 0;\n\n if (\n this.cursorIndex === -1 \|\|\n newCount < previousCount \|\|\n (previousCount === 0 && newCount > 0 && !changed.has('cursorIndex'))\n ) {\n if (!this.internalFocusDisabled) {\n if (!this.block \|\| this.cursorIndex === -1) {\n this.cursorIndex = 0;\n } else {\n if (this.cursorIndex >= newCount) {\n this.cursorIndex = newCount - 1;\n }\n }\n\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n }\n }\n\n // if on initial load we don't have enough options to load, trigger a scroll\n // threshold event in case the page size is smaller than our control height\n const scrollBox = this.shadowRoot.querySelector('.options');\n if (scrollBox) {\n if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n }\n }\n }\n\n if (changed.has('visible')) {\n window.setTimeout(() => {\n this.calculatePosition();\n }, 100);\n }\n }\n\n private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n const renderOptionName = (\n this.renderOptionName \|\| this.renderOptionNameDefault\n ).bind(this);\n const renderOptionDetail = (\n this.renderOptionDetail \|\| this.renderOptionDetailDefault\n ).bind(this);\n\n if (selected) {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n `;\n } else {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n `;\n }\n }\n\n private renderOptionNameDefault(option: any): TemplateResult {\n return html`<div style=\"display:flex; align-items:flex-start\">\n ${option.icon\n ? html`<temba-icon\n name=\"${option.icon}\"\n style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n ></temba-icon>`\n : null}\n <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n </div>`;\n }\n\n private renderOptionDetailDefault(option: any): TemplateResult {\n return html` ${option.detail} `;\n }\n\n public getSelection() {\n return this.options[this.cursorIndex];\n }\n\n private handleSelection(tabbed = false, index = -1) {\n if (!this.internalFocusDisabled) {\n if (index === -1) {\n index = this.cursorIndex;\n }\n }\n\n const selected = this.options[index];\n this.fireCustomEvent(CustomEventType.Selection, {\n selected,\n tabbed,\n index\n });\n }\n\n private moveCursor(direction: number): void {\n if (!this.internalFocusDisabled) {\n const newIndex = Math.max(\n Math.min(this.cursorIndex + direction, this.options.length - 1),\n 0\n );\n this.setCursor(newIndex);\n }\n }\n\n private setCursor: (index: number) => void = throttle(function (\n index: number\n ) {\n if (!this.internalFocusDisabled) {\n if (index !== this.cursorIndex) {\n this.cursorIndex = index;\n }\n }\n },\n 50);\n\n public scrollToTop() {\n const scrollBox = this.shadowRoot.querySelector('.options-scroll');\n scrollBox.scrollTop = 0;\n }\n\n private ensureOptionVisible() {\n const focusedOption = this.shadowRoot.querySelector(\n `div[data-option-index=\"${this.cursorIndex}\"]`\n ) as HTMLDivElement;\n if (focusedOption) {\n focusedOption.scrollIntoView({\n block: 'nearest',\n inline: 'start'\n });\n }\n }\n private handleKeyDown(evt: KeyboardEvent) {\n if (this.internalFocusDisabled \|\| (this.block && !this.isFocused())) {\n return;\n }\n\n if (this.offsetParent === null) {\n return;\n }\n\n if (this.options && this.options.length > 0) {\n if ((evt.ctrlKey && evt.key === 'n') \|\| evt.key === 'ArrowDown') {\n this.moveCursor(1);\n evt.preventDefault();\n evt.stopPropagation();\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n this.ensureOptionVisible();\n } else if ((evt.ctrlKey && evt.key === 'p') \|\| evt.key === 'ArrowUp') {\n this.moveCursor(-1);\n evt.preventDefault();\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n this.ensureOptionVisible();\n } else if (\n evt.key === 'Enter' \|\|\n evt.key === 'Tab' \|\|\n (this.spaceSelect && evt.key === ' ')\n ) {\n evt.preventDefault();\n evt.stopPropagation();\n this.handleSelection(evt.key === 'Tab');\n } else if (evt.key === 'Escape') {\n this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n }\n\n private handleInnerScroll(evt: Event) {\n const scrollbox = evt.target as HTMLDivElement;\n\n // scroll height has changed, enable scroll trigger\n if (scrollbox.scrollHeight > this.scrollHeight) {\n this.scrollHeight = scrollbox.scrollHeight;\n this.triggerScroll = true;\n }\n\n if (this.triggerScroll) {\n const scrollPct =\n scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n if (scrollPct * 100 > this.scrollPct) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n this.triggerScroll = false;\n }\n }\n }\n\n private calculatePosition() {\n if (this.visible && !this.block) {\n const optionsBounds = this.shadowRoot\n .querySelector('.options-container')\n .getBoundingClientRect();\n\n if (this.anchorTo) {\n const anchorBounds = this.anchorTo.getBoundingClientRect();\n const topTop = anchorBounds.top - optionsBounds.height;\n\n if (this.anchorTo && this.scrollParent) {\n if (!isElementVisible(this.anchorTo, this.scrollParent)) {\n // this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n\n if (\n topTop > 0 &&\n anchorBounds.bottom + optionsBounds.height > window.innerHeight\n ) {\n this.top = topTop; // + window.pageYOffset;\n this.poppedTop = true;\n } else {\n this.top = anchorBounds.bottom; // + window.pageYOffset;\n this.poppedTop = false;\n }\n\n this.left = anchorBounds.left;\n this.width =\n this.staticWidth > 0\n ? this.staticWidth\n : anchorBounds.width - 2 - this.marginHorizontal * 2;\n\n if (this.anchorRight) {\n this.left = anchorBounds.right - this.width;\n }\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n {\n event: 'keydown',\n method: this.handleKeyDown,\n isDocument: true\n },\n {\n event: 'scroll',\n method: this.calculatePosition,\n isDocument: true\n }\n ];\n }\n\n private handleMouseMove(evt: MouseEvent) {\n if (!this.block \|\| this.cursorHover) {\n if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n this.setCursor(parseInt(index));\n }\n }\n }\n\n // we need to swallow mouse down so we don't grab focus\n private handleMouseDown(evt: MouseEvent) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n private handleOptionClick(evt: MouseEvent) {\n evt.preventDefault();\n evt.stopPropagation();\n\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n\n if (index) {\n const newIndex = parseInt(index);\n this.setCursor(newIndex);\n this.handleSelection(false, newIndex);\n }\n }\n\n public render(): TemplateResult {\n if (!this.resolvedRenderOption) {\n return null;\n }\n\n let vertical = this.block ? 0 : this.marginVertical;\n if (this.poppedTop) {\n vertical *= -1;\n }\n\n const containerStyle = {\n 'margin-left': `${this.marginHorizontal}px`,\n 'margin-top': `${vertical}px`\n };\n\n if (this.top) {\n containerStyle['top'] = `${this.top}px`;\n }\n\n if (this.left) {\n containerStyle['left'] = `${this.left}px`;\n }\n\n const optionsStyle = {};\n if (this.width) {\n optionsStyle['width'] = `${this.width}px`;\n }\n\n const classes = getClasses({\n 'options-container': true,\n show: this.visible,\n top: this.poppedTop,\n anchored: !this.block,\n loading: this.loading,\n shadow: !this.hideShadow,\n bordered: this.hideShadow\n });\n\n const classesInner = getClasses({\n options: true\n });\n\n let options = this.options \|\| [];\n if (\n options.length == 0 &&\n this.tempOptions &&\n this.tempOptions.length > 0\n ) {\n options = this.tempOptions;\n }\n\n return html`\n <div class=${classes} style=${styleMap(containerStyle)}>\n <div\n class=\"options-scroll\"\n @scroll=${this.handleInnerScroll}\n @mousedown=${this.handleMouseDown}\n >\n <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n ${options.map((option, index) => {\n return html`<div\n data-option-index=\"${index}\"\n @mousemove=${this.handleMouseMove}\n @click=${this.handleOptionClick}\n @mousedown=${this.handleMouseDown}\n class=\"option ${index === this.cursorIndex &&\n !this.internalFocusDisabled\n ? 'focused'\n : ''}\"\n >\n ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n </div>`;\n })}\n ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n </div>\n <slot></slot>\n </div>\n\n <div class=\"loader-bar\">\n <temba-loading></temba-loading>\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"Options.js","sourceRoot":"","sources":["../../../src/options/Options.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement, EventHandler } from '../RapidElement';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport {\n getClasses,\n getScrollParent,\n isElementVisible,\n throttle\n} from '../utils';\n\nexport class Options extends RapidElement {\n static get styles() {\n return css`\n .options-container {\n background: var(--color-options-bg);\n user-select: none;\n border-radius: var(--curvature-widget);\n overflow: hidden;\n margin-top: var(--options-margin-top);\n display: flex;\n flex-direction: column;\n transform: scaleY(0.5) translateY(-5em);\n transition: transform var(--transition-speed)\n cubic-bezier(0.71, 0.18, 0.61, 1.33),\n opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);\n opacity: 0;\n border: 1px transparent;\n z-index: 1000;\n }\n\n .shadow {\n box-shadow: var(--options-shadow);\n }\n\n .anchored {\n position: fixed;\n }\n\n :host([block]) .options-container {\n flex-grow: 1;\n height: 100%;\n border: none;\n }\n\n :host([block]) .options-scroll {\n height: 100%;\n visibility: visible;\n overflow-y: auto;\n flex-grow: 1;\n -webkit-mask-image: -webkit-radial-gradient(white, black);\n }\n\n :host([block]) {\n border-radius: var(--curvature);\n display: block;\n height: 100%;\n }\n\n :host([block]) .shadow {\n box-shadow: var(--options-block-shadow);\n }\n\n .bordered {\n border: 1px solid var(--color-widget-border) !important;\n }\n\n :host([block]) .options {\n margin-bottom: 1.5em;\n }\n\n .options-scroll {\n display: flex;\n flex-direction: column;\n }\n\n :host([collapsed]) temba-icon {\n flex-grow: 1;\n margin-right: 0px !important;\n padding-top: 0.25em;\n padding-bottom: 0.25em;\n }\n\n :host([collapsed]) .name {\n display: none;\n }\n\n :host([collapsed]) .count {\n display: none;\n }\n\n .options {\n border-radius: var(--curvature-widget);\n overflow-y: auto;\n max-height: 225px;\n border: none;\n }\n\n .show {\n transform: scaleY(1) translateY(0);\n border: 1px solid var(--color-widget-border);\n opacity: 1;\n z-index: 1;\n }\n\n .option {\n font-size: var(--temba-options-font-size);\n padding: 5px 10px;\n border-radius: 4px;\n margin: 0.3em;\n cursor: pointer;\n color: var(--color-text-dark);\n scroll-margin: 5px 0px;\n text-align: left;\n }\n\n .option * {\n user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -moz-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n }\n\n .option .detail {\n font-size: 85%;\n color: rgba(0, 0, 0, 0.4);\n }\n\n code {\n background: rgba(0, 0, 0, 0.05);\n padding: 1px 5px;\n border-radius: var(--curvature-widget);\n }\n\n :host([block]) {\n position: relative;\n }\n\n :host([block]) .options {\n overflow-y: initial;\n }\n\n temba-loading {\n align-self: center;\n margin-top: 0.025em;\n }\n\n .loader-bar {\n pointer-events: none;\n align-items: center;\n background: #eee;\n max-height: 0;\n transition: max-height var(--transition-speed) ease-in-out;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n display: flex;\n overflow: hidden;\n }\n\n .loading .loader-bar {\n max-height: 1.1em;\n }\n\n .option:hover {\n background: var(--option-hover-bg);\n color: var(--option-hover-text);\n }\n\n .option.focused {\n background: var(--color-selection);\n color: var(--color-text-dark);\n }\n `;\n }\n\n @property({ type: Number })\n top: number;\n\n @property({ type: Number })\n left: number;\n\n @property({ type: Number })\n width: number;\n\n @property({ type: Number, attribute: 'static-width' })\n staticWidth: number;\n\n @property({ type: Boolean, attribute: 'anchor-right' })\n anchorRight: boolean;\n\n @property({ type: Number })\n marginHorizontal = 0;\n\n @property({ type: Number })\n marginVertical = 7;\n\n @property({ type: Object })\n anchorTo: HTMLElement;\n\n @property({ type: Boolean })\n visible: boolean;\n\n @property({ type: Boolean })\n block: boolean;\n\n // if we allow the focus to follow the cursor\n @property({ type: Boolean })\n cursorHover: boolean;\n\n // fire selection events when cursor changes\n @property({ type: Boolean })\n cursorSelection: boolean;\n\n @property({ type: Number })\n scrollPct = 75;\n\n @property({ type: Number })\n cursorIndex = -1;\n\n @property({ type: Boolean })\n internalFocusDisabled = false;\n\n @property({ type: Array })\n options: any[];\n\n @property({ type: Array })\n tempOptions: any[];\n\n @property({ type: Boolean })\n poppedTop: boolean;\n\n @property({ type: Boolean })\n spaceSelect: boolean;\n\n @property({ type: String })\n nameKey = 'name';\n\n @property({ type: Boolean })\n loading = false;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n @property({ type: Boolean })\n hideShadow = false;\n\n @property({ attribute: false })\n getName: { (option: any): string } = function (option: any) {\n return option[this.nameKey \|\| 'name'];\n };\n\n @property({ attribute: false })\n renderInputOption: { (): TemplateResult } = function () {\n return null;\n };\n\n @property({ attribute: false })\n renderOption: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionName: { (option: any, selected: boolean): TemplateResult };\n\n @property({ attribute: false })\n renderOptionDetail: { (option: any, selected: boolean): TemplateResult };\n\n @property({ type: Number })\n scrollHeight = 0;\n\n @property({ type: Boolean })\n triggerScroll = false;\n\n scrollParent: HTMLElement = null;\n\n resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };\n\n public firstUpdated() {\n if (!this.block) {\n this.scrollParent = getScrollParent(this);\n this.calculatePosition = this.calculatePosition.bind(this);\n if (this.scrollParent) {\n this.scrollParent.addEventListener('scroll', this.calculatePosition);\n }\n this.calculatePosition();\n }\n\n this.resolvedRenderOption = (\n this.renderOption \|\| this.renderOptionDefault\n ).bind(this);\n }\n\n public disconnectedCallback() {\n if (!this.block) {\n if (this.scrollParent) {\n this.scrollParent.removeEventListener('scroll', this.calculatePosition);\n }\n }\n }\n\n private isFocused() {\n const focused =\n this.closestElement(document.activeElement.tagName) ===\n document.activeElement;\n\n return focused;\n }\n\n public updated(changed: Map<string, any>) {\n super.updated(changed);\n\n // if our cursor changed, lets make sure our scrollbox is showing it\n if (!this.internalFocusDisabled && changed.has('cursorIndex')) {\n this.fireCustomEvent(CustomEventType.CursorChanged, {\n index: this.cursorIndex\n });\n }\n\n if (changed.has('visible') && changed.has('options')) {\n if (!this.visible && this.options.length == 0) {\n this.tempOptions = changed.get('options');\n window.setTimeout(() => {\n this.tempOptions = [];\n }, 300);\n }\n }\n\n if (changed.has('options')) {\n this.calculatePosition();\n\n // allow scrolls to trigger again\n this.triggerScroll = true;\n\n const prevOptions = changed.get('options');\n const previousCount = prevOptions ? prevOptions.length : 0;\n const newCount = this.options ? this.options.length : 0;\n\n if (\n this.cursorIndex === -1 \|\|\n newCount < previousCount \|\|\n (previousCount === 0 && newCount > 0 && !changed.has('cursorIndex'))\n ) {\n if (!this.internalFocusDisabled) {\n if (!this.block \|\| this.cursorIndex === -1) {\n this.cursorIndex = 0;\n } else {\n if (this.cursorIndex >= newCount) {\n this.cursorIndex = newCount - 1;\n }\n }\n\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n }\n }\n\n // if on initial load we don't have enough options to load, trigger a scroll\n // threshold event in case the page size is smaller than our control height\n const scrollBox = this.shadowRoot.querySelector('.options');\n if (scrollBox) {\n if (scrollBox.scrollHeight == scrollBox.clientHeight) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n }\n }\n }\n\n if (changed.has('visible')) {\n window.setTimeout(() => {\n this.calculatePosition();\n }, 100);\n }\n }\n\n private renderOptionDefault(option: any, selected: boolean): TemplateResult {\n const renderOptionName = (\n this.renderOptionName \|\| this.renderOptionNameDefault\n ).bind(this);\n const renderOptionDetail = (\n this.renderOptionDetail \|\| this.renderOptionDetailDefault\n ).bind(this);\n\n if (selected) {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n <div class=\"detail\">${renderOptionDetail(option, selected)}</div>\n `;\n } else {\n return html`\n <div class=\"name\">${renderOptionName(option, selected)}</div>\n `;\n }\n }\n\n private renderOptionNameDefault(option: any): TemplateResult {\n return html`<div style=\"display:flex; align-items:flex-start\">\n ${option.icon\n ? html`<temba-icon\n name=\"${option.icon}\"\n style=\"margin-right:0.5em; fill: var(--color-text-dark);\"\n ></temba-icon>`\n : null}\n <div style=\"flex-grow:1\">${option.prefix}${this.getName(option)}</div>\n </div>`;\n }\n\n private renderOptionDetailDefault(option: any): TemplateResult {\n return html` ${option.detail} `;\n }\n\n public getSelection() {\n return this.options[this.cursorIndex];\n }\n\n private handleSelection(tabbed = false, index = -1) {\n if (!this.internalFocusDisabled) {\n if (index === -1) {\n index = this.cursorIndex;\n }\n }\n\n const selected = this.options[index];\n this.fireCustomEvent(CustomEventType.Selection, {\n selected,\n tabbed,\n index\n });\n }\n\n private moveCursor(direction: number): void {\n if (!this.internalFocusDisabled) {\n const newIndex = Math.max(\n Math.min(this.cursorIndex + direction, this.options.length - 1),\n 0\n );\n this.setCursor(newIndex);\n }\n }\n\n private setCursor: (index: number) => void = throttle(function (\n index: number\n ) {\n if (!this.internalFocusDisabled) {\n if (index !== this.cursorIndex) {\n this.cursorIndex = index;\n }\n }\n },\n 50);\n\n public scrollToTop() {\n const scrollBox = this.shadowRoot.querySelector('.options-scroll');\n scrollBox.scrollTop = 0;\n }\n\n private ensureOptionVisible() {\n const focusedOption = this.shadowRoot.querySelector(\n `div[data-option-index=\"${this.cursorIndex}\"]`\n ) as HTMLDivElement;\n if (focusedOption) {\n focusedOption.scrollIntoView({\n block: 'nearest',\n inline: 'start'\n });\n }\n }\n private handleKeyDown(evt: KeyboardEvent) {\n if (this.internalFocusDisabled \|\| (this.block && !this.isFocused())) {\n return;\n }\n\n if (this.offsetParent === null) {\n return;\n }\n\n if (this.options && this.options.length > 0) {\n if ((evt.ctrlKey && evt.key === 'n') \|\| evt.key === 'ArrowDown') {\n this.moveCursor(1);\n evt.preventDefault();\n evt.stopPropagation();\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n this.ensureOptionVisible();\n } else if ((evt.ctrlKey && evt.key === 'p') \|\| evt.key === 'ArrowUp') {\n this.moveCursor(-1);\n evt.preventDefault();\n if (this.cursorSelection) {\n this.handleSelection(false);\n }\n this.ensureOptionVisible();\n } else if (\n evt.key === 'Enter' \|\|\n evt.key === 'Tab' \|\|\n (this.spaceSelect && evt.key === ' ')\n ) {\n evt.preventDefault();\n evt.stopPropagation();\n this.handleSelection(evt.key === 'Tab');\n } else if (evt.key === 'Escape') {\n this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n }\n\n private handleInnerScroll(evt: Event) {\n const scrollbox = evt.target as HTMLDivElement;\n\n // scroll height has changed, enable scroll trigger\n if (scrollbox.scrollHeight > this.scrollHeight) {\n this.scrollHeight = scrollbox.scrollHeight;\n this.triggerScroll = true;\n }\n\n if (this.triggerScroll) {\n const scrollPct =\n scrollbox.scrollTop / (scrollbox.scrollHeight - scrollbox.clientHeight);\n if (scrollPct * 100 > this.scrollPct) {\n this.fireCustomEvent(CustomEventType.ScrollThreshold);\n this.triggerScroll = false;\n }\n }\n }\n\n private calculatePosition() {\n if (this.visible && !this.block) {\n const optionsBounds = this.shadowRoot\n .querySelector('.options-container')\n .getBoundingClientRect();\n\n if (this.anchorTo) {\n const anchorBounds = this.anchorTo.getBoundingClientRect();\n const topTop = anchorBounds.top - optionsBounds.height;\n\n if (this.anchorTo && this.scrollParent) {\n if (!isElementVisible(this.anchorTo, this.scrollParent)) {\n // this.fireCustomEvent(CustomEventType.Canceled);\n }\n }\n\n if (\n topTop > 0 &&\n anchorBounds.bottom + optionsBounds.height > window.innerHeight\n ) {\n this.top = topTop; // + window.pageYOffset;\n this.poppedTop = true;\n } else {\n this.top = anchorBounds.bottom; // + window.pageYOffset;\n this.poppedTop = false;\n }\n\n this.left = anchorBounds.left;\n this.width =\n this.staticWidth > 0\n ? this.staticWidth\n : anchorBounds.width - 2 - this.marginHorizontal * 2;\n\n if (this.anchorRight) {\n this.left = anchorBounds.right - this.width;\n }\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n {\n event: 'keydown',\n method: this.handleKeyDown,\n isDocument: true\n },\n {\n event: 'scroll',\n method: this.calculatePosition,\n isDocument: true\n }\n ];\n }\n\n private handleMouseMove(evt: MouseEvent) {\n if (!this.block \|\| this.cursorHover) {\n if (Math.abs(evt.movementX) + Math.abs(evt.movementY) > 0) {\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n this.setCursor(parseInt(index));\n }\n }\n }\n\n // we need to swallow mouse down so we don't grab focus\n private handleMouseDown(evt: MouseEvent) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n private handleOptionClick(evt: MouseEvent) {\n evt.preventDefault();\n evt.stopPropagation();\n\n const index = (evt.currentTarget as HTMLElement).getAttribute(\n 'data-option-index'\n );\n\n if (index) {\n const newIndex = parseInt(index);\n this.setCursor(newIndex);\n this.handleSelection(false, newIndex);\n }\n }\n\n public render(): TemplateResult {\n if (!this.resolvedRenderOption) {\n return null;\n }\n\n let vertical = this.block ? 0 : this.marginVertical;\n if (this.poppedTop) {\n vertical *= -1;\n }\n\n const containerStyle = {\n 'margin-left': `${this.marginHorizontal}px`,\n 'margin-top': `${vertical}px`\n };\n\n if (this.top) {\n containerStyle['top'] = `${this.top}px`;\n }\n\n if (this.left) {\n containerStyle['left'] = `${this.left}px`;\n }\n\n const optionsStyle = {};\n if (this.width) {\n optionsStyle['width'] = `${this.width}px`;\n }\n\n const classes = getClasses({\n 'options-container': true,\n show: this.visible,\n top: this.poppedTop,\n anchored: !this.block,\n loading: this.loading,\n shadow: !this.hideShadow,\n bordered: this.hideShadow\n });\n\n const classesInner = getClasses({\n options: true\n });\n\n let options = this.options \|\| [];\n if (\n options.length == 0 &&\n this.tempOptions &&\n this.tempOptions.length > 0\n ) {\n options = this.tempOptions;\n }\n\n return html`\n <div class=${classes} style=${styleMap(containerStyle)}>\n <div\n class=\"options-scroll\"\n @scroll=${this.handleInnerScroll}\n @mousedown=${this.handleMouseDown}\n >\n <div class=\"${classesInner}\" style=${styleMap(optionsStyle)}>\n ${options.map((option, index) => {\n return html`<div\n data-option-index=\"${index}\"\n @mousemove=${this.handleMouseMove}\n @click=${this.handleOptionClick}\n @mousedown=${this.handleMouseDown}\n class=\"option ${index === this.cursorIndex &&\n !this.internalFocusDisabled\n ? 'focused'\n : ''}\"\n >\n ${this.resolvedRenderOption(option, index === this.cursorIndex)}\n </div>`;\n })}\n ${this.block ? html`<div style=\"height:0.1em\"></div>` : null}\n </div>\n <slot></slot>\n </div>\n\n <div class=\"loader-bar\">\n <temba-loading></temba-loading>\n </div>\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/select/Select.js CHANGED Viewed

@@ -45,12 +45,21 @@ export class Select extends FormElement {
             return name.toLowerCase().indexOf(q) > -1;
         };
         this.getValue = (option) => option[this.valueKey || 'value'] || option.id;
+        this.sortFunction = null;
         this.renderOptionDetail = () => html ``;
         this.renderSelectedItem = this.renderSelectedItemDefault;
         this.createArbitraryOption = this.createArbitraryOptionDefault;
         this.getOptions = this.getOptionsDefault;
+        this.prepareOptions = (options) => options;
         this.isComplete = this.isCompleteDefault;
         this.staticOptions = [];
+        this.alphaSort = (a, b) => {
+            // by default, all endpoint values are sorted by name
+            if (this.endpoint) {
+                return this.getName(a).localeCompare(this.getName(b));
+            }
+            return 0;
+        };
         this.next = null;
         this.lruCache = lru(20, 60000);
         this.getNameInternal = (option) => {
@@ -109,8 +118,11 @@ export class Select extends FormElement {
       }
       .wrapper-bg {
-        background: #fff;
-        box-shadow: inset 0px 0px 4px rgb(0 0 0 / 10%);
+        background: var(--select-wrapper-bg, #fff);
+        box-shadow: var(
+          --select-wrapper-shadow,
+          inset 0px 0px 4px rgb(0 0 0 / 10%)
+        );
         border-radius: var(--curvature-widget);
       }
@@ -198,6 +210,10 @@ export class Select extends FormElement {
         margin: 2px 2px;
       }
+      .option-name > span {
+        text-align: left;
+      }
       .selected-item .option-name {
         padding: 0px;
         font-size: var(--temba-select-selected-font-size);
@@ -418,6 +434,9 @@ export class Select extends FormElement {
     }
     updated(changedProperties) {
         super.updated(changedProperties);
+        if (changedProperties.has('sorted')) {
+            this.sortFunction = this.sorted ? this.alphaSort : null;
+        }
         if (changedProperties.has('values')) {
             this.updateInputs();
             if (this.multi ||
@@ -732,6 +751,7 @@ export class Select extends FormElement {
                 // if we are searchable, but doing it locally, fetch all the options
                 if (this.searchable && !this.queryParam) {
                     fetchResults(url).then((results) => {
+                        results = this.prepareOptions(results);
                         if (this.cache && !this.tags) {
                             this.lruCache.set(url, {
                                 options: results,
@@ -748,9 +768,10 @@ export class Select extends FormElement {
                 else {
                     getUrl(url)
                         .then((response) => {
-                        const results = this.getOptions(response).filter((option) => {
+                        let results = this.getOptions(response).filter((option) => {
                             return this.isMatch(option, q);
                         });
+                        results = this.prepareOptions(results);
                         this.next = null;
                         const json = response.json;
                         if (json['next']) {
@@ -1261,6 +1282,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Select.prototype, "clearable", void 0);
+__decorate([
+    property({ type: Boolean })
+], Select.prototype, "sorted", void 0);
 __decorate([
     property({ type: String })
 ], Select.prototype, "flavor", void 0);
@@ -1312,6 +1336,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], Select.prototype, "getOptions", void 0);
+__decorate([
+    property({ attribute: false })
+], Select.prototype, "prepareOptions", void 0);
 __decorate([
     property({ attribute: false })
 ], Select.prototype, "isComplete", void 0);