@nyaruka/temba-components 0.78.2 → 0.80.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/.devcontainer/Dockerfile +1 -1
- package/CHANGELOG.md +13 -15
- package/dist/static/svg/index.svg +1 -1
- package/dist/temba-components.js +8225 -0
- package/dist/temba-components.js.map +1 -0
- package/out-tsc/src/FormElement.js.map +1 -1
- package/out-tsc/src/RapidElement.js.map +1 -1
- package/out-tsc/src/RefreshElement.js.map +1 -1
- package/out-tsc/src/aliaseditor/AliasEditor.js.map +1 -1
- package/out-tsc/src/button/Button.js.map +1 -1
- package/out-tsc/src/charcount/CharCount.js.map +1 -1
- package/out-tsc/src/charcount/helpers.js.map +1 -1
- package/out-tsc/src/checkbox/Checkbox.js.map +1 -1
- package/out-tsc/src/colorpicker/ColorPicker.js.map +1 -1
- package/out-tsc/src/completion/Completion.js.map +1 -1
- package/out-tsc/src/completion/ExcellentParser.js.map +1 -1
- package/out-tsc/src/completion/helpers.js.map +1 -1
- package/out-tsc/src/compose/Compose.js.map +1 -1
- package/out-tsc/src/contacts/ContactBadges.js.map +1 -1
- package/out-tsc/src/contacts/ContactChat.js.map +1 -1
- package/out-tsc/src/contacts/ContactDetails.js.map +1 -1
- package/out-tsc/src/contacts/ContactFieldEditor.js.map +1 -1
- package/out-tsc/src/contacts/ContactFields.js.map +1 -1
- package/out-tsc/src/contacts/ContactHistory.js.map +1 -1
- package/out-tsc/src/contacts/ContactNameFetch.js.map +1 -1
- package/out-tsc/src/contacts/ContactPending.js.map +1 -1
- package/out-tsc/src/contacts/ContactStoreElement.js.map +1 -1
- package/out-tsc/src/contacts/ContactTickets.js.map +1 -1
- package/out-tsc/src/contacts/events.js.map +1 -1
- package/out-tsc/src/contacts/helpers.js.map +1 -1
- package/out-tsc/src/contactsearch/ContactSearch.js.map +1 -1
- package/out-tsc/src/date/TembaDate.js.map +1 -1
- package/out-tsc/src/datepicker/DatePicker.js.map +1 -1
- package/out-tsc/src/dialog/Dialog.js.map +1 -1
- package/out-tsc/src/dialog/Modax.js.map +1 -1
- package/out-tsc/src/dropdown/Dropdown.js.map +1 -1
- package/out-tsc/src/fields/FieldManager.js.map +1 -1
- package/out-tsc/src/flow/FlowStoreElement.js.map +1 -1
- package/out-tsc/src/formfield/FormField.js.map +1 -1
- package/out-tsc/src/imagepicker/ImagePicker.js.map +1 -1
- package/out-tsc/src/label/Label.js.map +1 -1
- package/out-tsc/src/leafletmap/LeafletMap.js.map +1 -1
- package/out-tsc/src/lightbox/Lightbox.js.map +1 -1
- package/out-tsc/src/list/ContentMenu.js.map +1 -1
- package/out-tsc/src/list/NotificationList.js.map +1 -1
- package/out-tsc/src/list/RunList.js.map +1 -1
- package/out-tsc/src/list/SortableList.js.map +1 -1
- package/out-tsc/src/list/TembaList.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/list/TicketList.js.map +1 -1
- package/out-tsc/src/mask/Mask.js.map +1 -1
- package/out-tsc/src/omnibox/Omnibox.js.map +1 -1
- package/out-tsc/src/options/Options.js.map +1 -1
- package/out-tsc/src/options/helpers.js.map +1 -1
- package/out-tsc/src/remote/Remote.js.map +1 -1
- package/out-tsc/src/resizer/Resizer.js.map +1 -1
- package/out-tsc/src/select/Select.js +3 -3
- package/out-tsc/src/select/Select.js.map +1 -1
- package/out-tsc/src/shadowless/Shadowless.js.map +1 -1
- package/out-tsc/src/slider/TembaSlider.js.map +1 -1
- package/out-tsc/src/sms/gsmsplitter.js.map +1 -1
- package/out-tsc/src/sms/gsmvalidator.js.map +1 -1
- package/out-tsc/src/sms/index.js.map +1 -1
- package/out-tsc/src/sms/unicodesplitter.js.map +1 -1
- package/out-tsc/src/store/Store.js +2 -2
- package/out-tsc/src/store/Store.js.map +1 -1
- package/out-tsc/src/store/StoreElement.js.map +1 -1
- package/out-tsc/src/store/StoreMonitorElement.js.map +1 -1
- package/out-tsc/src/tabpane/TabPane.js.map +1 -1
- package/out-tsc/src/templates/TemplateEditor.js.map +1 -1
- package/out-tsc/src/textinput/TextInput.js.map +1 -1
- package/out-tsc/src/textinput/helpers.js.map +1 -1
- package/out-tsc/src/thumbnail/Thumbnail.js.map +1 -1
- package/out-tsc/src/tip/Tip.js.map +1 -1
- package/out-tsc/src/user/TembaUser.js.map +1 -1
- package/out-tsc/src/utils/index.js.map +1 -1
- package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
- package/out-tsc/src/vectoricon/index.js +1 -1
- package/out-tsc/src/vectoricon/index.js.map +1 -1
- package/out-tsc/src/webchat/WebChat.js +109 -40
- package/out-tsc/src/webchat/WebChat.js.map +1 -1
- package/out-tsc/temba-components.js +1 -0
- package/out-tsc/temba-components.js.map +1 -1
- package/out-tsc/temba-modules.js.map +1 -1
- package/out-tsc/temba-webchat.js +10 -0
- package/out-tsc/temba-webchat.js.map +1 -0
- package/out-tsc/test/temba-compose.test.js.map +1 -1
- package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
- package/out-tsc/test/temba-contact-history.test.js.map +1 -1
- package/out-tsc/test/temba-content-menu.test.js.map +1 -1
- package/out-tsc/test/temba-list.test.js.map +1 -1
- package/out-tsc/test/temba-modax.test.js.map +1 -1
- package/out-tsc/test/temba-select.test.js.map +1 -1
- package/out-tsc/test/temba-sortable-list.test.js +2 -2
- package/out-tsc/test/temba-sortable-list.test.js.map +1 -1
- package/out-tsc/test/utils.test.js.map +1 -1
- package/package.json +28 -21
- package/rollup.components.mjs +45 -0
- package/rollup.webchat.mjs +11 -0
- package/src/select/Select.ts +3 -3
- package/src/store/Store.ts +2 -2
- package/src/untyped.d.ts +5 -0
- package/src/vectoricon/VectorIcon.ts +0 -1
- package/src/vectoricon/index.ts +1 -1
- package/src/webchat/WebChat.ts +110 -40
- package/static/svg/index.svg +1 -1
- package/static/svg/work/traced/agent.svg +1 -1
- package/static/svg/work/traced/channel-facebook.svg +1 -1
- package/static/svg/work/traced/channel-rocketchat.svg +1 -1
- package/static/svg/work/traced/channel-thinq.svg +1 -1
- package/static/svg/work/traced/channel-vonage.svg +1 -1
- package/static/svg/work/traced/zendesk.svg +1 -1
- package/temba-components.ts +1 -0
- package/temba-webchat.ts +11 -0
- package/test/temba-sortable-list.test.ts +2 -2
- package/dist/49b5238f.js +0 -7999
- package/dist/index.js +0 -7999
- package/dist/sw.js +0 -2
- package/dist/sw.js.map +0 -1
- package/dist/templates/components-body.html +0 -1
- package/dist/templates/components-head.html +0 -1
- package/dist/workbox-919adfb7.js +0 -2
- package/dist/workbox-919adfb7.js.map +0 -1
- package/rollup.config.js +0 -83
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/dialog/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse, getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\nimport { ButtonType, Dialog, DialogButton } from './Dialog';\n\nexport class Modax extends RapidElement {\n static get styles() {\n return css`\n fieldset {\n border: none;\n margin: 0;\n padding: 0;\n }\n\n .control-group {\n margin-bottom: var(--control-margin-bottom);\n }\n\n .form-actions {\n display: none;\n }\n\n button[type='submit'],\n input[type='submit'] {\n display: none;\n }\n\n .modax-body {\n padding: 20px;\n display: block;\n position: relative;\n background: var(--body-bg);\n }\n\n .modax-body.submitting:before {\n display: inline-block;\n content: '';\n height: 100%;\n width: 100%;\n margin-left: -20px;\n margin-top: -20px;\n background: rgba(200, 200, 200, 0.1);\n position: absolute;\n z-index: 10000;\n }\n\n temba-loading {\n margin: 0 auto;\n display: block;\n width: 150px;\n }\n\n ul.errorlist {\n margin-top: 0px;\n list-style-type: none;\n padding-left: 0;\n padding-bottom: 7px;\n }\n\n ul.errorlist li {\n color: var(--color-error);\n background: rgba(255, 181, 181, 0.17);\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n color: tomato;\n padding: 10px;\n margin-bottom: 10px;\n border-radius: 6px;\n font-weight: 300;\n }\n\n .step-ball {\n background: rgba(var(--primary-rgb), 0.2);\n width: 1.2em;\n height: 1.2em;\n border-radius: 100%;\n margin-right: 0.5em;\n border: 0.15em solid transparent;\n }\n\n .step-ball.complete {\n background: rgba(var(--primary-rgb), 0.7);\n cursor: pointer;\n }\n .step-ball.complete:hover {\n background: rgba(var(--primary-rgb), 0.8);\n }\n\n .step-ball.active {\n border: 0.15em solid var(--color-primary-dark);\n }\n\n .wizard-steps {\n display: flex;\n flex-direction: row;\n margin-left: 0.6em;\n }\n `;\n }\n\n @property({ type: String })\n header = '';\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: Boolean })\n fetching = false;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: String })\n primaryName: string;\n\n @property({ type: String })\n cancelName: string;\n\n @property({ type: String })\n onLoaded: string;\n\n @property({ type: Boolean })\n noSubmit: boolean;\n\n @property({ type: Object })\n headers: any = {};\n\n @property({ type: String })\n body: any = this.getLoading();\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Array })\n buttons: DialogButton[] = [];\n\n @property({ type: Number })\n wizardStep = 0;\n\n @property({ type: Number })\n wizardStepCount = 0;\n\n @property({ type: Boolean })\n suspendSubmit = false;\n // private cancelToken: CancelTokenSource;\n\n private handleSlotClicked(): void {\n this.open = true;\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('open')) {\n if (this.open) {\n this.fetchForm();\n } else {\n // open can get reflected into undefined, make sure we've been open before\n if (changes.get('open') !== undefined) {\n // hide our body after our hiding animation is done\n if (this.open) {\n window.setTimeout(() => {\n this.body = this.getLoading();\n this.submitting = false;\n }, 500);\n } else {\n // clear the modal body out when closed, note that js functions declared on the\n // window will hang around\n this.setBody('');\n }\n }\n }\n }\n\n if (changes.has('body') && this.open && this.body && !this.fetching) {\n const dialog = this.shadowRoot.querySelector('temba-dialog') as Dialog;\n dialog.focusFirstInput();\n }\n }\n\n private getLoading() {\n return html`<temba-loading units=\"6\" size=\"8\"></temba-loading>`;\n }\n\n public updatePrimaryButton(): void {\n const wizard = this.shadowRoot.querySelector(\n '#wizard-form'\n ) as HTMLDivElement;\n if (wizard) {\n this.wizardStep = parseInt(wizard.dataset.step);\n this.wizardStepCount = parseInt(wizard.dataset.steps);\n }\n\n if (!this.noSubmit) {\n this.updateComplete.then(() => {\n const submitButton = this.shadowRoot.querySelector(\n \"input[type='submit'],button[type='submit']\"\n ) as any;\n\n if (submitButton) {\n this.buttons = [\n { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },\n { type: ButtonType.PRIMARY, name: submitButton.value },\n ];\n } else {\n this.buttons = [\n { type: ButtonType.SECONDARY, name: 'Ok', closes: true },\n ];\n }\n this.submitting = false;\n });\n }\n }\n\n private setBody(body: string): boolean {\n // remove any existing on our previous body\n const scriptBlock = this.shadowRoot.querySelector('.scripts') as any;\n for (const child of scriptBlock.children) {\n child.remove();\n }\n\n // parse out any scripts in the body\n const div = this.ownerDocument.createElement('div');\n div.innerHTML = body;\n const scripts = div.getElementsByTagName('script');\n const toAdd: any = [];\n // now add them in\n for (let i = scripts.length - 1; i >= 0; i--) {\n // for (let i = 0; i < scripts.length; i++) {\n const script = this.ownerDocument.createElement('script');\n const code = scripts[i].innerText;\n\n if (scripts[i].src && scripts[i].src.indexOf('web-dev-server') === -1) {\n script.src = scripts[i].src;\n script.type = 'text/javascript';\n script.async = true;\n\n // TODO: track and fire event once all scripts are loaded\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n script.onload = function () {};\n toAdd.push(script);\n } else if (code) {\n script.appendChild(this.ownerDocument.createTextNode(code));\n toAdd.push(script);\n // remove it from our current body text\n }\n scripts[i].remove();\n }\n\n const scriptOnly = !!div.querySelector('.success-script');\n\n if (!scriptOnly) {\n this.body = unsafeHTML(div.innerHTML);\n }\n\n this.updateComplete.then(() => {\n for (const script of toAdd) {\n scriptBlock.appendChild(script);\n }\n });\n return !scriptOnly;\n }\n\n public getHeaders(): any {\n const headers = this.headers;\n headers['X-PJAX'] = 1;\n return headers;\n }\n\n private fetchForm() {\n // const CancelToken = axios.CancelToken;\n // this.cancelToken = CancelToken.source();\n this.fetching = true;\n this.body = this.getLoading();\n getUrl(this.endpoint, null, this.getHeaders()).then(\n (response: WebResponse) => {\n // if it's a full page, breakout of the modal\n if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {\n document.location = response.url;\n } else {\n this.setBody(response.body);\n this.fetching = false;\n this.updateComplete.then(() => {\n this.updatePrimaryButton();\n this.fireCustomEvent(CustomEventType.Loaded, {\n body: this.getBody(),\n });\n });\n }\n }\n );\n }\n\n public submit(extra = {}): void {\n this.submitting = true;\n const form = this.shadowRoot.querySelector('form');\n\n let postData = form ? serialize(form) : '';\n if (extra) {\n Object.keys(extra).forEach(key => {\n postData +=\n (postData.length > 1 ? '&' : '') +\n encodeURIComponent(key) +\n '=' +\n encodeURIComponent(extra[key]);\n });\n }\n\n postUrl(\n this.endpoint,\n postData,\n this.getHeaders(),\n 'application/x-www-form-urlencoded'\n )\n .then((response: WebResponse) => {\n window.setTimeout(() => {\n let redirect = response.headers.get('temba-success');\n if (\n !redirect &&\n response.url &&\n response.url.indexOf(this.endpoint) === -1\n ) {\n redirect = response.url;\n }\n\n if (redirect) {\n if (redirect === 'hide') {\n this.updateComplete.then(() => {\n this.open = false;\n this.fireCustomEvent(CustomEventType.Submitted);\n });\n } else {\n this.fireCustomEvent(CustomEventType.Redirected, {\n url: redirect,\n });\n this.open = false;\n }\n } else {\n // if we set the body, update our submit button\n if (this.setBody(response.body)) {\n this.updateComplete.then(() => {\n this.updatePrimaryButton();\n });\n }\n }\n }, 1000);\n })\n .catch(error => {\n console.error(error);\n });\n }\n\n private handleDialogClick(evt: CustomEvent) {\n const button = evt.detail.button;\n const detail = evt.detail.detail;\n if (!button.disabled && !button.submitting) {\n if (button.primary || button.destructive) {\n if (!this.suspendSubmit) {\n this.submit();\n }\n }\n }\n\n if (detail.closes) {\n this.open = false;\n this.fetching = false;\n this.cancelName = undefined;\n }\n }\n\n private handleDialogHidden() {\n // this.cancelToken.cancel();\n this.open = false;\n this.fetching = false;\n }\n\n private isDestructive(): boolean {\n return this.endpoint && this.endpoint.indexOf('delete') > -1;\n }\n\n private handleGotoStep(evt: MouseEvent) {\n const step = (evt.target as HTMLDivElement).dataset.gotoStep;\n if (step) {\n this.submit({ wizard_goto_step: step });\n }\n }\n\n public getBody() {\n return this.shadowRoot.querySelector('.modax-body');\n }\n\n public render(): TemplateResult {\n const wizardStepBalls = [];\n\n const wizard = this.shadowRoot.querySelector(\n '#wizard-form'\n ) as HTMLDivElement;\n if (wizard) {\n const completed = (wizard.getAttribute('data-completed') || '')\n .split(',')\n .filter(step => step.length > 0);\n\n for (let i = 0; i < this.wizardStepCount; i++) {\n wizardStepBalls.push(\n html`<div\n data-goto-step=${completed[i]}\n @click=${this.handleGotoStep.bind(this)}\n class=\"${getClasses({\n 'step-ball': true,\n active: this.wizardStep - 1 === i,\n complete: i < completed.length,\n })}\"\n ></div>`\n );\n }\n }\n\n return html`\n <temba-dialog\n .header=${this.header}\n .buttons=${this.buttons}\n ?open=${this.open}\n ?loading=${this.fetching}\n ?submitting=${this.submitting}\n ?destructive=${this.isDestructive()}\n ?noFocus=${true}\n ?disabled=${this.disabled}\n @temba-button-clicked=${this.handleDialogClick.bind(this)}\n @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}\n >\n <div\n class=\"modax-body ${this.submitting ? 'submitting' : ''}\"\n style=\"${this.isMobile() ? 'flex-grow:1' : ''}\"\n >\n ${this.body}\n </div>\n <div class=\"scripts\"></div>\n <div slot=\"gutter\">\n <div class=\"wizard-steps\">${wizardStepBalls}</div>\n </div>\n </temba-dialog>\n <div class=\"slot-wrapper\" @click=${this.handleSlotClicked}>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Modax.js","sourceRoot":"","sources":["../../../src/dialog/Modax.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, serialize, postUrl, WebResponse, getClasses } from '../utils';\nimport { CustomEventType } from '../interfaces';\nimport { ButtonType, Dialog, DialogButton } from './Dialog';\n\nexport class Modax extends RapidElement {\n static get styles() {\n return css`\n fieldset {\n border: none;\n margin: 0;\n padding: 0;\n }\n\n .control-group {\n margin-bottom: var(--control-margin-bottom);\n }\n\n .form-actions {\n display: none;\n }\n\n button[type='submit'],\n input[type='submit'] {\n display: none;\n }\n\n .modax-body {\n padding: 20px;\n display: block;\n position: relative;\n background: var(--body-bg);\n }\n\n .modax-body.submitting:before {\n display: inline-block;\n content: '';\n height: 100%;\n width: 100%;\n margin-left: -20px;\n margin-top: -20px;\n background: rgba(200, 200, 200, 0.1);\n position: absolute;\n z-index: 10000;\n }\n\n temba-loading {\n margin: 0 auto;\n display: block;\n width: 150px;\n }\n\n ul.errorlist {\n margin-top: 0px;\n list-style-type: none;\n padding-left: 0;\n padding-bottom: 7px;\n }\n\n ul.errorlist li {\n color: var(--color-error);\n background: rgba(255, 181, 181, 0.17);\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n color: tomato;\n padding: 10px;\n margin-bottom: 10px;\n border-radius: 6px;\n font-weight: 300;\n }\n\n .step-ball {\n background: rgba(var(--primary-rgb), 0.2);\n width: 1.2em;\n height: 1.2em;\n border-radius: 100%;\n margin-right: 0.5em;\n border: 0.15em solid transparent;\n }\n\n .step-ball.complete {\n background: rgba(var(--primary-rgb), 0.7);\n cursor: pointer;\n }\n .step-ball.complete:hover {\n background: rgba(var(--primary-rgb), 0.8);\n }\n\n .step-ball.active {\n border: 0.15em solid var(--color-primary-dark);\n }\n\n .wizard-steps {\n display: flex;\n flex-direction: row;\n margin-left: 0.6em;\n }\n `;\n }\n\n @property({ type: String })\n header = '';\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: Boolean })\n fetching = false;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: String })\n primaryName: string;\n\n @property({ type: String })\n cancelName: string;\n\n @property({ type: String })\n onLoaded: string;\n\n @property({ type: Boolean })\n noSubmit: boolean;\n\n @property({ type: Object })\n headers: any = {};\n\n @property({ type: String })\n body: any = this.getLoading();\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Array })\n buttons: DialogButton[] = [];\n\n @property({ type: Number })\n wizardStep = 0;\n\n @property({ type: Number })\n wizardStepCount = 0;\n\n @property({ type: Boolean })\n suspendSubmit = false;\n // private cancelToken: CancelTokenSource;\n\n private handleSlotClicked(): void {\n this.open = true;\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('open')) {\n if (this.open) {\n this.fetchForm();\n } else {\n // open can get reflected into undefined, make sure we've been open before\n if (changes.get('open') !== undefined) {\n // hide our body after our hiding animation is done\n if (this.open) {\n window.setTimeout(() => {\n this.body = this.getLoading();\n this.submitting = false;\n }, 500);\n } else {\n // clear the modal body out when closed, note that js functions declared on the\n // window will hang around\n this.setBody('');\n }\n }\n }\n }\n\n if (changes.has('body') && this.open && this.body && !this.fetching) {\n const dialog = this.shadowRoot.querySelector('temba-dialog') as Dialog;\n dialog.focusFirstInput();\n }\n }\n\n private getLoading() {\n return html`<temba-loading units=\"6\" size=\"8\"></temba-loading>`;\n }\n\n public updatePrimaryButton(): void {\n const wizard = this.shadowRoot.querySelector(\n '#wizard-form'\n ) as HTMLDivElement;\n if (wizard) {\n this.wizardStep = parseInt(wizard.dataset.step);\n this.wizardStepCount = parseInt(wizard.dataset.steps);\n }\n\n if (!this.noSubmit) {\n this.updateComplete.then(() => {\n const submitButton = this.shadowRoot.querySelector(\n \"input[type='submit'],button[type='submit']\"\n ) as any;\n\n if (submitButton) {\n this.buttons = [\n { type: ButtonType.SECONDARY, name: 'Cancel', closes: true },\n { type: ButtonType.PRIMARY, name: submitButton.value },\n ];\n } else {\n this.buttons = [\n { type: ButtonType.SECONDARY, name: 'Ok', closes: true },\n ];\n }\n this.submitting = false;\n });\n }\n }\n\n private setBody(body: string): boolean {\n // remove any existing on our previous body\n const scriptBlock = this.shadowRoot.querySelector('.scripts') as any;\n for (const child of scriptBlock.children) {\n child.remove();\n }\n\n // parse out any scripts in the body\n const div = this.ownerDocument.createElement('div');\n div.innerHTML = body;\n const scripts = div.getElementsByTagName('script');\n const toAdd: any = [];\n // now add them in\n for (let i = scripts.length - 1; i >= 0; i--) {\n // for (let i = 0; i < scripts.length; i++) {\n const script = this.ownerDocument.createElement('script');\n const code = scripts[i].innerText;\n\n if (scripts[i].src && scripts[i].src.indexOf('web-dev-server') === -1) {\n script.src = scripts[i].src;\n script.type = 'text/javascript';\n script.async = true;\n\n // TODO: track and fire event once all scripts are loaded\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n script.onload = function () {};\n toAdd.push(script);\n } else if (code) {\n script.appendChild(this.ownerDocument.createTextNode(code));\n toAdd.push(script);\n // remove it from our current body text\n }\n scripts[i].remove();\n }\n\n const scriptOnly = !!div.querySelector('.success-script');\n\n if (!scriptOnly) {\n this.body = unsafeHTML(div.innerHTML);\n }\n\n this.updateComplete.then(() => {\n for (const script of toAdd) {\n scriptBlock.appendChild(script);\n }\n });\n return !scriptOnly;\n }\n\n public getHeaders(): any {\n const headers = this.headers;\n headers['X-PJAX'] = 1;\n return headers;\n }\n\n private fetchForm() {\n // const CancelToken = axios.CancelToken;\n // this.cancelToken = CancelToken.source();\n this.fetching = true;\n this.body = this.getLoading();\n getUrl(this.endpoint, null, this.getHeaders()).then(\n (response: WebResponse) => {\n // if it's a full page, breakout of the modal\n if (response.body.indexOf('<!DOCTYPE HTML>') == 0) {\n document.location = response.url;\n } else {\n this.setBody(response.body);\n this.fetching = false;\n this.updateComplete.then(() => {\n this.updatePrimaryButton();\n this.fireCustomEvent(CustomEventType.Loaded, {\n body: this.getBody(),\n });\n });\n }\n }\n );\n }\n\n public submit(extra = {}): void {\n this.submitting = true;\n const form = this.shadowRoot.querySelector('form');\n\n let postData = form ? serialize(form) : '';\n if (extra) {\n Object.keys(extra).forEach(key => {\n postData +=\n (postData.length > 1 ? '&' : '') +\n encodeURIComponent(key) +\n '=' +\n encodeURIComponent(extra[key]);\n });\n }\n\n postUrl(\n this.endpoint,\n postData,\n this.getHeaders(),\n 'application/x-www-form-urlencoded'\n )\n .then((response: WebResponse) => {\n window.setTimeout(() => {\n let redirect = response.headers.get('temba-success');\n if (\n !redirect &&\n response.url &&\n response.url.indexOf(this.endpoint) === -1\n ) {\n redirect = response.url;\n }\n\n if (redirect) {\n if (redirect === 'hide') {\n this.updateComplete.then(() => {\n this.open = false;\n this.fireCustomEvent(CustomEventType.Submitted);\n });\n } else {\n this.fireCustomEvent(CustomEventType.Redirected, {\n url: redirect,\n });\n this.open = false;\n }\n } else {\n // if we set the body, update our submit button\n if (this.setBody(response.body)) {\n this.updateComplete.then(() => {\n this.updatePrimaryButton();\n });\n }\n }\n }, 1000);\n })\n .catch(error => {\n console.error(error);\n });\n }\n\n private handleDialogClick(evt: CustomEvent) {\n const button = evt.detail.button;\n const detail = evt.detail.detail;\n if (!button.disabled && !button.submitting) {\n if (button.primary || button.destructive) {\n if (!this.suspendSubmit) {\n this.submit();\n }\n }\n }\n\n if (detail.closes) {\n this.open = false;\n this.fetching = false;\n this.cancelName = undefined;\n }\n }\n\n private handleDialogHidden() {\n // this.cancelToken.cancel();\n this.open = false;\n this.fetching = false;\n }\n\n private isDestructive(): boolean {\n return this.endpoint && this.endpoint.indexOf('delete') > -1;\n }\n\n private handleGotoStep(evt: MouseEvent) {\n const step = (evt.target as HTMLDivElement).dataset.gotoStep;\n if (step) {\n this.submit({ wizard_goto_step: step });\n }\n }\n\n public getBody() {\n return this.shadowRoot.querySelector('.modax-body');\n }\n\n public render(): TemplateResult {\n const wizardStepBalls = [];\n\n const wizard = this.shadowRoot.querySelector(\n '#wizard-form'\n ) as HTMLDivElement;\n if (wizard) {\n const completed = (wizard.getAttribute('data-completed') || '')\n .split(',')\n .filter(step => step.length > 0);\n\n for (let i = 0; i < this.wizardStepCount; i++) {\n wizardStepBalls.push(\n html`<div\n data-goto-step=${completed[i]}\n @click=${this.handleGotoStep.bind(this)}\n class=\"${getClasses({\n 'step-ball': true,\n active: this.wizardStep - 1 === i,\n complete: i < completed.length,\n })}\"\n ></div>`\n );\n }\n }\n\n return html`\n <temba-dialog\n .header=${this.header}\n .buttons=${this.buttons}\n ?open=${this.open}\n ?loading=${this.fetching}\n ?submitting=${this.submitting}\n ?destructive=${this.isDestructive()}\n ?noFocus=${true}\n ?disabled=${this.disabled}\n @temba-button-clicked=${this.handleDialogClick.bind(this)}\n @temba-dialog-hidden=${this.handleDialogHidden.bind(this)}\n >\n <div\n class=\"modax-body ${this.submitting ? 'submitting' : ''}\"\n style=\"${this.isMobile() ? 'flex-grow:1' : ''}\"\n >\n ${this.body}\n </div>\n <div class=\"scripts\"></div>\n <div slot=\"gutter\">\n <div class=\"wizard-steps\">${wizardStepBalls}</div>\n </div>\n </temba-dialog>\n <div class=\"slot-wrapper\" @click=${this.handleSlotClicked}>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -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 { ContactStoreElement } from '../contacts/ContactStoreElement';\n\nexport class Dropdown extends RapidElement {\n static get styles() {\n return css`\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 {\n position: absolute;\n opacity: 0;\n z-index: 2;\n pointer-events: none;\n padding: 0;\n border-radius: var(--curvature);\n background: #fff;\n transform: translateY(1em) scale(0.9);\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 top: -6px;\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 pointer-events: auto;\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;\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 top = false;\n\n @property({ type: Boolean })\n bottom = false;\n\n @property({ type: Boolean })\n left = false;\n\n @property({ type: Boolean })\n right = false;\n\n @property({ type: Number })\n arrowSize = 6;\n\n @property({ type: Number })\n arrowOffset = this.arrowSize * 2;\n\n @property({ type: Number })\n offsetX = 0;\n\n @property({ type: Number })\n offsetY = 0;\n\n @property({ type: Boolean })\n mask = false;\n\n constructor() {\n super();\n this.ensureOnScreen = this.ensureOnScreen.bind(this);\n }\n\n public firstUpdated(props: any) {\n super.firstUpdated(props);\n\n const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n arrow.style.borderWidth = this.arrowSize + 'px';\n arrow.style.top = '-' + this.arrowSize + 'px';\n\n if (this.arrowOffset < 0) {\n arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n } else {\n arrow.style.left = this.arrowOffset + 'px';\n }\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n dropdown.addEventListener('blur', () => {\n // we nest this to deal with clicking the toggle to close\n // as we don't want it to toggle an immediate open, probably\n // a better way to deal with this\n window.setTimeout(() => {\n this.open = false;\n // blur our host element too\n (this.shadowRoot.host as HTMLDivElement).blur();\n }, 200);\n });\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\n dropdown.style.marginTop = this.offsetY + 'px';\n if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n dropdown.style.marginLeft =\n '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n } else {\n if (this.right) {\n dropdown.style.marginRight = this.offsetX + 'px';\n } else {\n dropdown.style.marginLeft = this.offsetX + 'px';\n }\n }\n }\n\n if (changedProperties.has('open')) {\n // check right away if we are on the screen, and then again moments after render\n window.setTimeout(this.ensureOnScreen, 0);\n window.setTimeout(this.ensureOnScreen, 100);\n }\n }\n\n public ensureOnScreen() {\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n if (dropdown) {\n // dropdown will go off the screen, let's push it up\n const toggle = this.querySelector('div[slot=\"toggle\"]');\n\n if (!toggle) {\n return;\n }\n\n if (dropdown.getBoundingClientRect().bottom > window.innerHeight - 100) {\n if (this.bottom) {\n dropdown.style.top = toggle.clientHeight + 'px';\n } else {\n dropdown.style.top = '';\n dropdown.style.bottom = toggle.clientHeight + 'px';\n }\n } else if (dropdown.getBoundingClientRect().top < 0) {\n if (this.bottom) {\n dropdown.style.top = toggle.clientHeight + 'px';\n } else {\n dropdown.style.top = toggle.clientHeight + 'px';\n dropdown.style.bottom = '';\n }\n }\n\n if (dropdown.getBoundingClientRect().right > window.innerWidth) {\n dropdown.style.left = '';\n dropdown.style.right = '0px';\n } else if (dropdown.getBoundingClientRect().left < 0) {\n dropdown.style.left = 0 + 'px';\n dropdown.style.right = '';\n }\n }\n }\n\n public handleToggleClicked(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.open) {\n this.open = true;\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n dropdown.focus();\n }\n }\n\n private handleDropdownMouseDown(event: MouseEvent): void {\n // block mouse down when clicking inside dropdown so we don't lose focus yet\n event.preventDefault();\n event.stopPropagation();\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 class=\"wrapper ${this.open ? 'open' : ''}\">\n <slot\n name=\"toggle\"\n class=\"toggle\"\n @click=${this.handleToggleClicked}\n ></slot>\n <div\n class=\"${getClasses({\n dropdown: true,\n right: this.right,\n left: this.left,\n top: this.top,\n bottom: this.bottom,\n })}\"\n tabindex=\"0\"\n @mousedown=${this.handleDropdownMouseDown}\n >\n <div class=\"arrow\"></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 { ContactStoreElement } from '../contacts/ContactStoreElement';\n\nexport class Dropdown extends RapidElement {\n static get styles() {\n return css`\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 {\n position: absolute;\n opacity: 0;\n z-index: 2;\n pointer-events: none;\n padding: 0;\n border-radius: var(--curvature);\n background: #fff;\n transform: translateY(1em) scale(0.9);\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 top: -6px;\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 pointer-events: auto;\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;\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 top = false;\n\n @property({ type: Boolean })\n bottom = false;\n\n @property({ type: Boolean })\n left = false;\n\n @property({ type: Boolean })\n right = false;\n\n @property({ type: Number })\n arrowSize = 6;\n\n @property({ type: Number })\n arrowOffset = this.arrowSize * 2;\n\n @property({ type: Number })\n offsetX = 0;\n\n @property({ type: Number })\n offsetY = 0;\n\n @property({ type: Boolean })\n mask = false;\n\n constructor() {\n super();\n this.ensureOnScreen = this.ensureOnScreen.bind(this);\n }\n\n public firstUpdated(props: any) {\n super.firstUpdated(props);\n\n const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;\n arrow.style.borderWidth = this.arrowSize + 'px';\n arrow.style.top = '-' + this.arrowSize + 'px';\n\n if (this.arrowOffset < 0) {\n arrow.style.right = Math.abs(this.arrowOffset) + 'px';\n } else {\n arrow.style.left = this.arrowOffset + 'px';\n }\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n dropdown.addEventListener('blur', () => {\n // we nest this to deal with clicking the toggle to close\n // as we don't want it to toggle an immediate open, probably\n // a better way to deal with this\n window.setTimeout(() => {\n this.open = false;\n // blur our host element too\n (this.shadowRoot.host as HTMLDivElement).blur();\n }, 200);\n });\n }\n\n public updated(changedProperties: Map<string, any>) {\n super.updated(changedProperties);\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {\n dropdown.style.marginTop = this.offsetY + 'px';\n if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {\n dropdown.style.marginLeft =\n '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';\n } else {\n if (this.right) {\n dropdown.style.marginRight = this.offsetX + 'px';\n } else {\n dropdown.style.marginLeft = this.offsetX + 'px';\n }\n }\n }\n\n if (changedProperties.has('open')) {\n // check right away if we are on the screen, and then again moments after render\n window.setTimeout(this.ensureOnScreen, 0);\n window.setTimeout(this.ensureOnScreen, 100);\n }\n }\n\n public ensureOnScreen() {\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n\n if (dropdown) {\n // dropdown will go off the screen, let's push it up\n const toggle = this.querySelector('div[slot=\"toggle\"]');\n\n if (!toggle) {\n return;\n }\n\n if (dropdown.getBoundingClientRect().bottom > window.innerHeight - 100) {\n if (this.bottom) {\n dropdown.style.top = toggle.clientHeight + 'px';\n } else {\n dropdown.style.top = '';\n dropdown.style.bottom = toggle.clientHeight + 'px';\n }\n } else if (dropdown.getBoundingClientRect().top < 0) {\n if (this.bottom) {\n dropdown.style.top = toggle.clientHeight + 'px';\n } else {\n dropdown.style.top = toggle.clientHeight + 'px';\n dropdown.style.bottom = '';\n }\n }\n\n if (dropdown.getBoundingClientRect().right > window.innerWidth) {\n dropdown.style.left = '';\n dropdown.style.right = '0px';\n } else if (dropdown.getBoundingClientRect().left < 0) {\n dropdown.style.left = 0 + 'px';\n dropdown.style.right = '';\n }\n }\n }\n\n public handleToggleClicked(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n if (!this.open) {\n this.open = true;\n\n const dropdown = this.shadowRoot.querySelector(\n '.dropdown'\n ) as HTMLDivElement;\n dropdown.focus();\n }\n }\n\n private handleDropdownMouseDown(event: MouseEvent): void {\n // block mouse down when clicking inside dropdown so we don't lose focus yet\n event.preventDefault();\n event.stopPropagation();\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 class=\"wrapper ${this.open ? 'open' : ''}\">\n <slot\n name=\"toggle\"\n class=\"toggle\"\n @click=${this.handleToggleClicked}\n ></slot>\n <div\n class=\"${getClasses({\n dropdown: true,\n right: this.right,\n left: this.left,\n top: this.top,\n bottom: this.bottom,\n })}\"\n tabindex=\"0\"\n @mousedown=${this.handleDropdownMouseDown}\n >\n <div class=\"arrow\"></div>\n <div class=\"dropdown-wrapper\">\n <slot name=\"dropdown\" tabindex=\"1\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldManager.js","sourceRoot":"","sources":["../../../src/fields/FieldManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { StoreElement } from '../store/StoreElement';\nimport { TextInput } from '../textinput/TextInput';\nimport { postJSON } from '../utils';\n\nconst TYPE_NAMES = {\n text: 'Text',\n numeric: 'Number',\n number: 'Number',\n datetime: 'Date & Time',\n state: 'State',\n ward: 'Ward',\n district: 'District',\n};\n\nconst matches = (field: ContactField, query: string): boolean => {\n if (!query) {\n return true;\n }\n const search = (\n field.label +\n field.key +\n TYPE_NAMES[field.value_type]\n ).toLowerCase();\n if (search.toLowerCase().indexOf(query) > -1) {\n return true;\n }\n return false;\n};\n\nexport class FieldManager extends StoreElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n min-height: 0px;\n }\n\n .featured,\n .other-fields {\n background: #fff;\n border-radius: var(--curvature);\n box-shadow: var(--shadow);\n margin-bottom: 1em;\n display: flex;\n flex-direction: column;\n }\n\n .featured {\n max-height: 40%;\n }\n\n .other-fields {\n flex-grow: 2;\n min-height: 0px;\n margin-bottom: 0px;\n }\n\n temba-textinput {\n margin-bottom: 1em;\n }\n\n .scroll-box {\n overflow-y: auto;\n flex-grow: 1;\n flex-direction: column;\n display: flex;\n }\n\n .header temba-icon {\n margin-right: 0.5em;\n }\n\n .label {\n flex-grow: 1;\n }\n\n .header {\n padding: 0.5em 1em;\n display: flex;\n align-items: flex-start;\n border-bottom: 1px solid var(--color-widget-border);\n }\n\n .featured-field {\n user-select: none;\n }\n\n temba-sortable-list {\n padding: 0.5em 0em;\n width: 100%;\n overflow-y: auto;\n }\n\n .scroll-box {\n padding: 0.5em 0em;\n }\n\n temba-icon[name='usages']:hover {\n --icon-color: var(--color-link-primary);\n }\n\n .field:hover temba-icon[name='delete_small'] {\n opacity: 1 !important;\n cursor: pointer !important;\n pointer-events: all !important;\n }\n\n temba-icon[name='delete_small']:hover {\n --icon-color: var(--color-link-primary);\n }\n\n .field {\n border: 1px solid transparent;\n margin: 0 0.5em;\n border-radius: var(--curvature);\n }\n\n .featured temba-sortable-list .field:hover {\n cursor: move;\n border-color: #e6e6e6;\n background: #fcfcfc;\n }\n `;\n }\n\n @property({ type: String, attribute: 'priority-endpoint' })\n priorityEndpoint: string;\n\n @property({ type: Object, attribute: false })\n featuredFields: ContactField[];\n\n @property({ type: Object, attribute: false })\n otherFieldKeys: string[] = [];\n\n @property({ type: String })\n draggingId: string;\n\n @property({ type: String })\n query = '';\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\n this.url = this.store.fieldsEndpoint;\n }\n\n private filterFields() {\n const filteredKeys = this.store.getFieldKeys().filter(key => {\n const field = this.store.getContactField(key);\n if (field.featured) {\n return false;\n }\n return matches(field, this.query);\n });\n\n // sort by the label instead of the key\n filteredKeys.sort((a, b) => {\n return this.store\n .getContactField(a)\n .label.localeCompare(this.store.getContactField(b).label);\n });\n\n const featured: ContactField[] = [];\n this.store.getFeaturedFields().forEach(field => {\n if (matches(field, this.query)) {\n featured.push(field);\n }\n });\n\n this.otherFieldKeys = filteredKeys;\n this.featuredFields = featured;\n }\n\n protected updated(\n properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.update(properties);\n if (properties.has('data')) {\n this.filterFields();\n } else if (properties.has('query')) {\n this.filterFields();\n }\n }\n\n private handleSaveOrder(event) {\n const list = event.currentTarget as SortableList;\n postJSON(\n this.priorityEndpoint,\n list\n .getIds()\n .reverse()\n .reduce((map, key, idx) => {\n map[key] = idx;\n return map;\n }, {})\n ).then(() => {\n this.store.refreshFields();\n });\n }\n\n private handleOrderChanged(event) {\n const swapsies = event.detail;\n const temp = this.featuredFields[swapsies.fromIdx];\n this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];\n this.featuredFields[swapsies.toIdx] = temp;\n this.requestUpdate('featuredFields');\n }\n\n private handleDragStart(event) {\n this.draggingId = event.detail.id;\n }\n\n private handleDragStop() {\n this.draggingId = null;\n }\n\n private handleFieldAction(event: MouseEvent) {\n const ele = event.target as HTMLDivElement;\n const key = ele.dataset.key;\n const action = ele.dataset.action;\n this.fireCustomEvent(CustomEventType.Selection, { key, action });\n }\n\n private handleSearch(event) {\n this.query = (event.target.value || '').trim();\n }\n\n private hasUsages(field: ContactField): boolean {\n return (\n field.usages.campaign_events + field.usages.flows + field.usages.groups >\n 0\n );\n }\n\n private renderField(field: ContactField) {\n return html`\n <div\n class=\"field sortable\"\n id=\"${field.key}\"\n style=\"\n display: flex; \n flex-direction: row; \n align-items: center;\n padding: 0.25em 1em; \n ${field.key === this.draggingId\n ? 'background: var(--color-selection)'\n : ''}\"\n >\n <div\n style=\"display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em\"\n >\n <span\n @click=${this.handleFieldAction}\n data-key=${field.key}\n data-action=\"update\"\n style=\"color: var(--color-link-primary); cursor:pointer;\"\n >\n ${field.label}\n </span>\n ${this.hasUsages(field)\n ? html`\n <temba-icon\n size=\"0.8\"\n style=\"color: #ccc; margin-left: 0.7em;\"\n name=\"usages\"\n data-key=${field.key}\n data-action=\"usages\"\n @click=${this.handleFieldAction}\n clickable\n ></temba-icon>\n `\n : null}\n <div class=\"flex-grow:1\"></div>\n </div>\n <div\n style=\"flex-grow:1; font-family: Roboto Mono, monospace; font-size:0.8em;\"\n >\n @fields.${field.key}\n </div>\n <div>${TYPE_NAMES[field.value_type]}</div>\n <temba-icon\n style=\"pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0\"\n name=\"delete_small\"\n data-key=${field.key}\n data-action=\"delete\"\n @click=${this.handleFieldAction}\n ></temba-icon>\n </div>\n `;\n }\n\n public render(): TemplateResult {\n if (!this.featuredFields) {\n return null;\n }\n\n return html`\n <temba-textinput\n id=\"search\"\n placeholder=\"Search\"\n @change=${this.handleSearch}\n clearable\n value=${this.query}\n ></temba-textinput>\n\n ${this.featuredFields.length > 0\n ? html`\n <div class=\"featured\">\n <div class=\"header\">\n <temba-icon name=\"featured\"></temba-icon>\n <div class=\"label\">Featured</div>\n </div>\n ${this.query\n ? html`\n <div class=\"scroll-box\">\n ${this.featuredFields.map(field =>\n this.renderField(field)\n )}\n </div>\n `\n : html`\n <temba-sortable-list\n @change=${this.handleSaveOrder}\n @temba-order-changed=${this.handleOrderChanged}\n @temba-drag-start=${this.handleDragStart}\n @temba-drag-stop=${this.handleDragStop}\n >\n ${this.featuredFields.map(field =>\n this.renderField(field)\n )}\n </temba-sortable-list>\n `}\n </div>\n `\n : null}\n\n <div class=\"other-fields\">\n <div class=\"header\">\n <temba-icon name=\"fields\"></temba-icon>\n <div class=\"label\">Everything Else</div>\n </div>\n <div class=\"scroll-box\">\n ${this.otherFieldKeys.map(field =>\n this.renderField(this.store.getContactField(field))\n )}\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"FieldManager.js","sourceRoot":"","sources":["../../../src/fields/FieldManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ContactField, CustomEventType } from '../interfaces';\n\nimport { SortableList } from '../list/SortableList';\nimport { StoreElement } from '../store/StoreElement';\nimport { TextInput } from '../textinput/TextInput';\nimport { postJSON } from '../utils';\n\nconst TYPE_NAMES = {\n text: 'Text',\n numeric: 'Number',\n number: 'Number',\n datetime: 'Date & Time',\n state: 'State',\n ward: 'Ward',\n district: 'District',\n};\n\nconst matches = (field: ContactField, query: string): boolean => {\n if (!query) {\n return true;\n }\n const search = (\n field.label +\n field.key +\n TYPE_NAMES[field.value_type]\n ).toLowerCase();\n if (search.toLowerCase().indexOf(query) > -1) {\n return true;\n }\n return false;\n};\n\nexport class FieldManager extends StoreElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-grow: 1;\n flex-direction: column;\n min-height: 0px;\n }\n\n .featured,\n .other-fields {\n background: #fff;\n border-radius: var(--curvature);\n box-shadow: var(--shadow);\n margin-bottom: 1em;\n display: flex;\n flex-direction: column;\n }\n\n .featured {\n max-height: 40%;\n }\n\n .other-fields {\n flex-grow: 2;\n min-height: 0px;\n margin-bottom: 0px;\n }\n\n temba-textinput {\n margin-bottom: 1em;\n }\n\n .scroll-box {\n overflow-y: auto;\n flex-grow: 1;\n flex-direction: column;\n display: flex;\n }\n\n .header temba-icon {\n margin-right: 0.5em;\n }\n\n .label {\n flex-grow: 1;\n }\n\n .header {\n padding: 0.5em 1em;\n display: flex;\n align-items: flex-start;\n border-bottom: 1px solid var(--color-widget-border);\n }\n\n .featured-field {\n user-select: none;\n }\n\n temba-sortable-list {\n padding: 0.5em 0em;\n width: 100%;\n overflow-y: auto;\n }\n\n .scroll-box {\n padding: 0.5em 0em;\n }\n\n temba-icon[name='usages']:hover {\n --icon-color: var(--color-link-primary);\n }\n\n .field:hover temba-icon[name='delete_small'] {\n opacity: 1 !important;\n cursor: pointer !important;\n pointer-events: all !important;\n }\n\n temba-icon[name='delete_small']:hover {\n --icon-color: var(--color-link-primary);\n }\n\n .field {\n border: 1px solid transparent;\n margin: 0 0.5em;\n border-radius: var(--curvature);\n }\n\n .featured temba-sortable-list .field:hover {\n cursor: move;\n border-color: #e6e6e6;\n background: #fcfcfc;\n }\n `;\n }\n\n @property({ type: String, attribute: 'priority-endpoint' })\n priorityEndpoint: string;\n\n @property({ type: Object, attribute: false })\n featuredFields: ContactField[];\n\n @property({ type: Object, attribute: false })\n otherFieldKeys: string[] = [];\n\n @property({ type: String })\n draggingId: string;\n\n @property({ type: String })\n query = '';\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(_changedProperties);\n this.url = this.store.fieldsEndpoint;\n }\n\n private filterFields() {\n const filteredKeys = this.store.getFieldKeys().filter(key => {\n const field = this.store.getContactField(key);\n if (field.featured) {\n return false;\n }\n return matches(field, this.query);\n });\n\n // sort by the label instead of the key\n filteredKeys.sort((a, b) => {\n return this.store\n .getContactField(a)\n .label.localeCompare(this.store.getContactField(b).label);\n });\n\n const featured: ContactField[] = [];\n this.store.getFeaturedFields().forEach(field => {\n if (matches(field, this.query)) {\n featured.push(field);\n }\n });\n\n this.otherFieldKeys = filteredKeys;\n this.featuredFields = featured;\n }\n\n protected updated(\n properties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.update(properties);\n if (properties.has('data')) {\n this.filterFields();\n } else if (properties.has('query')) {\n this.filterFields();\n }\n }\n\n private handleSaveOrder(event) {\n const list = event.currentTarget as SortableList;\n postJSON(\n this.priorityEndpoint,\n list\n .getIds()\n .reverse()\n .reduce((map, key, idx) => {\n map[key] = idx;\n return map;\n }, {})\n ).then(() => {\n this.store.refreshFields();\n });\n }\n\n private handleOrderChanged(event) {\n const swapsies = event.detail;\n const temp = this.featuredFields[swapsies.fromIdx];\n this.featuredFields[swapsies.fromIdx] = this.featuredFields[swapsies.toIdx];\n this.featuredFields[swapsies.toIdx] = temp;\n this.requestUpdate('featuredFields');\n }\n\n private handleDragStart(event) {\n this.draggingId = event.detail.id;\n }\n\n private handleDragStop() {\n this.draggingId = null;\n }\n\n private handleFieldAction(event: MouseEvent) {\n const ele = event.target as HTMLDivElement;\n const key = ele.dataset.key;\n const action = ele.dataset.action;\n this.fireCustomEvent(CustomEventType.Selection, { key, action });\n }\n\n private handleSearch(event) {\n this.query = (event.target.value || '').trim();\n }\n\n private hasUsages(field: ContactField): boolean {\n return (\n field.usages.campaign_events + field.usages.flows + field.usages.groups >\n 0\n );\n }\n\n private renderField(field: ContactField) {\n return html`\n <div\n class=\"field sortable\"\n id=\"${field.key}\"\n style=\"\n display: flex; \n flex-direction: row; \n align-items: center;\n padding: 0.25em 1em; \n ${field.key === this.draggingId\n ? 'background: var(--color-selection)'\n : ''}\"\n >\n <div\n style=\"display: flex; min-width: 200px; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 2em\"\n >\n <span\n @click=${this.handleFieldAction}\n data-key=${field.key}\n data-action=\"update\"\n style=\"color: var(--color-link-primary); cursor:pointer;\"\n >\n ${field.label}\n </span>\n ${this.hasUsages(field)\n ? html`\n <temba-icon\n size=\"0.8\"\n style=\"color: #ccc; margin-left: 0.7em;\"\n name=\"usages\"\n data-key=${field.key}\n data-action=\"usages\"\n @click=${this.handleFieldAction}\n clickable\n ></temba-icon>\n `\n : null}\n <div class=\"flex-grow:1\"></div>\n </div>\n <div\n style=\"flex-grow:1; font-family: Roboto Mono, monospace; font-size:0.8em;\"\n >\n @fields.${field.key}\n </div>\n <div>${TYPE_NAMES[field.value_type]}</div>\n <temba-icon\n style=\"pointer-events:none;color:#ccc;margin-left:0.3em;margin-right:-0.5em;opacity:0\"\n name=\"delete_small\"\n data-key=${field.key}\n data-action=\"delete\"\n @click=${this.handleFieldAction}\n ></temba-icon>\n </div>\n `;\n }\n\n public render(): TemplateResult {\n if (!this.featuredFields) {\n return null;\n }\n\n return html`\n <temba-textinput\n id=\"search\"\n placeholder=\"Search\"\n @change=${this.handleSearch}\n clearable\n value=${this.query}\n ></temba-textinput>\n\n ${this.featuredFields.length > 0\n ? html`\n <div class=\"featured\">\n <div class=\"header\">\n <temba-icon name=\"featured\"></temba-icon>\n <div class=\"label\">Featured</div>\n </div>\n ${this.query\n ? html`\n <div class=\"scroll-box\">\n ${this.featuredFields.map(field =>\n this.renderField(field)\n )}\n </div>\n `\n : html`\n <temba-sortable-list\n @change=${this.handleSaveOrder}\n @temba-order-changed=${this.handleOrderChanged}\n @temba-drag-start=${this.handleDragStart}\n @temba-drag-stop=${this.handleDragStop}\n >\n ${this.featuredFields.map(field =>\n this.renderField(field)\n )}\n </temba-sortable-list>\n `}\n </div>\n `\n : null}\n\n <div class=\"other-fields\">\n <div class=\"header\">\n <temba-icon name=\"fields\"></temba-icon>\n <div class=\"label\">Everything Else</div>\n </div>\n <div class=\"scroll-box\">\n ${this.otherFieldKeys.map(field =>\n this.renderField(this.store.getContactField(field))\n )}\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowStoreElement.js","sourceRoot":"","sources":["../../../src/flow/FlowStoreElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,OAAO,gBAAiB,SAAQ,YAAY;IAAlD;;QAQE,aAAQ,GAAG,0BAA0B,CAAC;IA4BxC,CAAC;IA1BC,WAAW,CAAC,IAAS;QACnB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE;
|
|
1
|
+
{"version":3,"file":"FlowStoreElement.js","sourceRoot":"","sources":["../../../src/flow/FlowStoreElement.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAoC,MAAM,KAAK,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,OAAO,gBAAiB,SAAQ,YAAY;IAAlD;;QAQE,aAAQ,GAAG,0BAA0B,CAAC;IA4BxC,CAAC;IA1BC,WAAW,CAAC,IAAS;QACnB,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5B,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAES,OAAO,CACf,OAA0D;QAE1D,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAClB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO;QACT,CAAC;QACD,OAAO,IAAI,CAAA,aAAa,CAAC;IAC3B,CAAC;CACF;AAlCC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CAC3B;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACW","sourcesContent":["import { html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FlowDetails } from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\n\nexport class FlowStoreElement extends StoreElement {\n @property({ type: String })\n flow: string;\n\n @property({ type: Object, attribute: false })\n data: FlowDetails;\n\n @property({ type: String })\n endpoint = '/api/v2/flows.json?uuid=';\n\n prepareData(data: any) {\n if (data && data.length > 0) {\n data = data[0];\n }\n return data;\n }\n\n protected updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n if (changes.has('flow')) {\n if (this.flow) {\n this.url = `${this.endpoint}${this.flow}`;\n } else {\n this.url = null;\n }\n }\n }\n\n public render(): TemplateResult {\n if (!this.data) {\n return;\n }\n return html`<div></div>`;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/formfield/FormField.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QA4DE,cAAS,GAAG,KAAK,CAAC;QAGlB,eAAU,GAAG,KAAK,CAAC;QAGnB,WAAM,GAAa,EAAE,CAAC;QAGtB,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,EAAE,CAAC;QAGd,eAAU,GAAG,IAAI,CAAC;QAGlB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,EAAE,CAAC;QAGV,aAAQ,GAAG,KAAK,CAAC;IAuCnB,CAAC;IA1HC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDT,CAAC;IACJ,CAAC;IA6BM,MAAM;QACX,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU;YAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,EAAE;gBACxC,OAAO,IAAI,CAAA,6BAA6B,KAAK,SAAS,CAAC;YACzD,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,IAAI,CAAC,UAAU,EAAE;
|
|
1
|
+
{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/formfield/FormField.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QA4DE,cAAS,GAAG,KAAK,CAAC;QAGlB,eAAU,GAAG,KAAK,CAAC;QAGnB,WAAM,GAAa,EAAE,CAAC;QAGtB,eAAU,GAAG,KAAK,CAAC;QAGnB,aAAQ,GAAG,EAAE,CAAC;QAGd,eAAU,GAAG,IAAI,CAAC;QAGlB,UAAK,GAAG,EAAE,CAAC;QAGX,SAAI,GAAG,EAAE,CAAC;QAGV,aAAQ,GAAG,KAAK,CAAC;IAuCnB,CAAC;IA1HC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsDT,CAAC;IACJ,CAAC;IA6BM,MAAM;QACX,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,UAAU;YAC7B,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,EAAE;gBACxC,OAAO,IAAI,CAAA,6BAA6B,KAAK,SAAS,CAAC;YACzD,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;QAEP,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,OAAO,IAAI,CAAA;sBACK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC3C,MAAM;OACT,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/C,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK;YAC9C,CAAC,CAAC,IAAI,CAAA;kDACkC,IAAI,CAAC,IAAI;mBACxC,IAAI,CAAC,KAAK;;aAEhB;YACH,CAAC,CAAC,IAAI;;;;UAIN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM;YACzC,CAAC,CAAC,IAAI,CAAA;sCACsB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI;kBAC1D,IAAI,CAAC,QAAQ;;aAElB;YACH,CAAC,CAAC,IAAI;UACN,MAAM;;KAEX,CAAC;IACJ,CAAC;CACF;AA/DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CACnC;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CACnC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACtB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;2CACrC;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;6CACpC;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX","sourcesContent":["import { TemplateResult, html, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * A small wrapper to display labels and help text in a smartmin style.\n * This exists so we can display things consistently before restyling.\n */\nexport class FormField extends LitElement {\n static get styles() {\n return css`\n :host {\n font-family: var(--font-family);\n }\n\n label {\n margin-bottom: 5px;\n margin-left: 4px;\n display: block;\n font-weight: 400;\n font-size: var(--label-size);\n letter-spacing: 0.05em;\n line-height: normal;\n color: #777;\n }\n\n .help-text {\n font-size: var(--help-text-size);\n line-height: normal;\n color: var(--color-text-help);\n margin-left: var(--help-text-margin-left);\n margin-top: -16px;\n opacity: 0;\n transition: opacity ease-in-out 100ms, margin-top ease-in-out 200ms;\n pointer-events: none;\n }\n\n .help-text.help-always {\n opacity: 1;\n margin-top: 6px;\n margin-left: var(--help-text-margin-left);\n }\n\n .field:focus-within .help-text {\n margin-top: 6px;\n opacity: 1;\n }\n\n .alert-error {\n background: rgba(255, 181, 181, 0.17);\n border: none;\n border-left: 0px solid var(--color-error);\n color: var(--color-error);\n padding: 10px;\n margin: 15px 0px;\n border-radius: var(--curvature);\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),\n 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n }\n\n .disabled {\n opacity: var(--disabled-opacity) !important;\n pointer-events: none !important;\n }\n `;\n }\n\n @property({ type: Boolean, attribute: 'hide_label' })\n hideLabel = false;\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly = false;\n\n @property({ type: Array, attribute: false })\n errors: string[] = [];\n\n @property({ type: Boolean })\n hideErrors = false;\n\n @property({ type: String, attribute: 'help_text' })\n helpText = '';\n\n @property({ type: Boolean, attribute: 'help_always' })\n helpAlways = true;\n\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n disabled = false;\n\n public render(): TemplateResult {\n const errors = !this.hideErrors\n ? (this.errors || []).map((error: string) => {\n return html` <div class=\"alert-error\">${error}</div> `;\n })\n : [];\n\n if (this.widgetOnly) {\n return html`\n <div class=\"${this.disabled ? 'disabled' : ''}\"><slot></slot></div>\n ${errors}\n `;\n }\n\n return html`\n <div class=\"field ${this.disabled ? 'disabled' : ''}\">\n ${!!this.name && !this.hideLabel && !!this.label\n ? html`\n <label class=\"control-label\" for=\"${this.name}\"\n >${this.label}</label\n >\n `\n : null}\n <div class=\"widget\">\n <slot></slot>\n </div>\n ${this.helpText && this.helpText !== 'None'\n ? html`\n <div class=\"help-text ${this.helpAlways ? 'help-always' : null}\">\n ${this.helpText}\n </div>\n `\n : null}\n ${errors}\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePicker.js","sourceRoot":"","sources":["../../../src/imagepicker/ImagePicker.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-this-alias */\nimport { html, css, PropertyValueMap } from 'lit';\nimport { CroppieCSS } from './CroppieCSS';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { FormElement } from '../FormElement';\n\nexport class ImagePicker extends FormElement {\n static styles = css`\n ${CroppieCSS}\n\n .croppie {\n max-width: 400px;\n border: 0px solid #ccc;\n border-radius: 0.5em;\n overflow: hidden;\n background: #fff;\n margin-top: -20%;\n box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);\n }\n\n .croppie .controls {\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: center;\n position: absolute;\n z-index: 1;\n width: 400px;\n margin-top: -42px;\n }\n\n .toggle {\n height: 110px;\n width: 110px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .circle .toggle {\n border-radius: 50%;\n }\n\n .toggle.set {\n box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);\n }\n\n .toggle.set:hover {\n box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);\n }\n\n .toggle temba-icon {\n color: rgba(0, 0, 0, 0.2);\n padding: 5px;\n }\n\n toggle:hover temba-icon {\n color: rgba(0, 0, 0, 0.8);\n }\n\n .toggle.set temba-icon {\n border-radius: 50%;\n margin-right: -90%;\n margin-bottom: -50%;\n background: rgba(240, 240, 240, 1);\n box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;\n }\n\n .toggle.set:hover temba-icon {\n background: #fff;\n color: var(--color-primary-dark);\n }\n\n .circle .toggle.set temba-icon {\n margin-right: -70%;\n margin-bottom: -70%;\n }\n\n .hidden {\n display: none;\n }\n\n .controls temba-icon {\n margin: 0em 0.75em;\n background: rgba(255, 255, 255, 0.8);\n border-radius: 50%;\n padding: 6px;\n transition: all 0.1s ease-in-out;\n }\n\n .controls {\n pointer-events: none;\n display: flex;\n }\n\n .controls temba-icon {\n pointer-events: all;\n }\n\n .controls temba-icon.close {\n color: rgba(0, 0, 0, 0.2);\n background: rgba(255, 255, 255, 0.2);\n }\n\n .controls temba-icon.submit {\n color: rgba(0, 0, 0, 0.2);\n box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n }\n\n .controls temba-icon:hover {\n color: white;\n cursor: pointer;\n background: var(--color-primary-dark);\n }\n `;\n\n @property({ type: String })\n tempImage: string;\n\n @property({ type: String })\n url: string;\n\n @property({ type: String })\n shape = 'square';\n\n @property({ type: Boolean, attribute: false })\n showCroppie = false;\n\n uploadReader = new FileReader();\n croppie: any;\n\n protected firstUpdated(\n changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(changed);\n const picker = this;\n\n this.uploadReader.onload = function () {\n picker.launchCroppie(picker.uploadReader.result as any);\n };\n }\n\n public updated(changed: Map<string, any>): void {\n super.updated(changed);\n if (changed.has('url')) {\n this.setAttribute('url', this.url);\n }\n }\n\n private closeCroppie() {\n this.showCroppie = false;\n const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n if (wrapper.firstChild) {\n wrapper.removeChild(wrapper.firstChild);\n }\n }\n\n private launchCroppie(url: string) {\n const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n if (wrapper.firstChild) {\n wrapper.removeChild(wrapper.firstChild);\n }\n this.showCroppie = true;\n const ele = document.createElement('div');\n wrapper.appendChild(ele);\n\n const Croppie = (window as any).Croppie;\n this.croppie = new Croppie(ele, {\n enableExif: true,\n viewport: {\n width: 300,\n height: 300,\n type: this.shape,\n },\n boundary: {\n width: 400,\n height: 400,\n },\n });\n\n this.croppie.bind({ url });\n }\n\n private saveResult() {\n const picker = this;\n this.croppie\n .result({\n type: 'blob',\n size: 'viewport',\n format: 'webp',\n quality: 1,\n circle: false,\n })\n .then(function (resp: any) {\n const blob = resp;\n picker.url = URL.createObjectURL(blob);\n\n // const blob = dataURItoBlob(resp);\n const fd = new FormData();\n fd.append(picker.name, blob, 'filename.webp');\n\n picker.value = fd;\n picker.closeCroppie();\n });\n }\n\n private handleToggleClicked() {\n const fileInput = this.shadowRoot.querySelector('#file');\n (fileInput as any).click();\n }\n\n private handleFileChanged(e: Event) {\n const input = e.target as any;\n if (input.files.length > 0) {\n this.uploadReader.readAsDataURL(input.files[0]);\n }\n input.value = '';\n }\n\n protected render() {\n return html`\n <div class=\"wrapper ${this.shape} ${this.label ? 'label' : ''}\">\n <temba-field\n name=${this.name}\n label=${this.label}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .helpAlways=${true}\n ?disabled=${this.disabled}\n >\n <input class='hidden' type=\"file\" accept=\"image/*\" capture=\"camera\" id=\"file\" name=\"file\" @change=${\n this.handleFileChanged\n }/>\n <div class='toggle ${this.url ? 'set' : ''} ${\n this.showCroppie ? 'hidden' : ''\n }' @click=${this.handleToggleClicked} style=\"background: ${\n this.url\n ? `url('${this.url}') center / contain no-repeat`\n : 'rgba(0, 0, 0, 0.1)'\n }\">\n <temba-icon name=${Icon.upload_image} size=\"1.5\"></temba-icon>\n </div>\n \n <temba-mask ?show=${this.showCroppie} class=\"${\n this.showCroppie ? 'editing' : ''\n }\">\n <div class='croppie'>\n <div class='embed'></div>\n <div class='controls'>\n <temba-icon class=\"close\" size=\"1\" name=${Icon.close} @click=${\n this.closeCroppie\n }></temba-icon>\n <div style=\"flex-grow:1\"></div>\n <temba-icon class=\"submit\" size=\"1\" name=${Icon.submit} @click=${\n this.saveResult\n }></temba-icon>\n </div>\n </temba-mask>\n </temba-field>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ImagePicker.js","sourceRoot":"","sources":["../../../src/imagepicker/ImagePicker.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-this-alias */\nimport { html, css, PropertyValueMap } from 'lit';\nimport { CroppieCSS } from './CroppieCSS';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { FormElement } from '../FormElement';\n\nexport class ImagePicker extends FormElement {\n static styles = css`\n ${CroppieCSS}\n\n .croppie {\n max-width: 400px;\n border: 0px solid #ccc;\n border-radius: 0.5em;\n overflow: hidden;\n background: #fff;\n margin-top: -20%;\n box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.1);\n }\n\n .croppie .controls {\n display: flex;\n align-items: center;\n flex-direction: row;\n justify-content: center;\n position: absolute;\n z-index: 1;\n width: 400px;\n margin-top: -42px;\n }\n\n .toggle {\n height: 110px;\n width: 110px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .circle .toggle {\n border-radius: 50%;\n }\n\n .toggle.set {\n box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.1);\n }\n\n .toggle.set:hover {\n box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 7px 0px,\n rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, inset 0 0 0 5px rgba(0, 0, 0, 0.2);\n }\n\n .toggle temba-icon {\n color: rgba(0, 0, 0, 0.2);\n padding: 5px;\n }\n\n toggle:hover temba-icon {\n color: rgba(0, 0, 0, 0.8);\n }\n\n .toggle.set temba-icon {\n border-radius: 50%;\n margin-right: -90%;\n margin-bottom: -50%;\n background: rgba(240, 240, 240, 1);\n box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;\n }\n\n .toggle.set:hover temba-icon {\n background: #fff;\n color: var(--color-primary-dark);\n }\n\n .circle .toggle.set temba-icon {\n margin-right: -70%;\n margin-bottom: -70%;\n }\n\n .hidden {\n display: none;\n }\n\n .controls temba-icon {\n margin: 0em 0.75em;\n background: rgba(255, 255, 255, 0.8);\n border-radius: 50%;\n padding: 6px;\n transition: all 0.1s ease-in-out;\n }\n\n .controls {\n pointer-events: none;\n display: flex;\n }\n\n .controls temba-icon {\n pointer-events: all;\n }\n\n .controls temba-icon.close {\n color: rgba(0, 0, 0, 0.2);\n background: rgba(255, 255, 255, 0.2);\n }\n\n .controls temba-icon.submit {\n color: rgba(0, 0, 0, 0.2);\n box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);\n }\n\n .controls temba-icon:hover {\n color: white;\n cursor: pointer;\n background: var(--color-primary-dark);\n }\n `;\n\n @property({ type: String })\n tempImage: string;\n\n @property({ type: String })\n url: string;\n\n @property({ type: String })\n shape = 'square';\n\n @property({ type: Boolean, attribute: false })\n showCroppie = false;\n\n uploadReader = new FileReader();\n croppie: any;\n\n protected firstUpdated(\n changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.firstUpdated(changed);\n const picker = this;\n\n this.uploadReader.onload = function () {\n picker.launchCroppie(picker.uploadReader.result as any);\n };\n }\n\n public updated(changed: Map<string, any>): void {\n super.updated(changed);\n if (changed.has('url')) {\n this.setAttribute('url', this.url);\n }\n }\n\n private closeCroppie() {\n this.showCroppie = false;\n const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n if (wrapper.firstChild) {\n wrapper.removeChild(wrapper.firstChild);\n }\n }\n\n private launchCroppie(url: string) {\n const wrapper = this.shadowRoot.querySelector('.croppie .embed');\n if (wrapper.firstChild) {\n wrapper.removeChild(wrapper.firstChild);\n }\n this.showCroppie = true;\n const ele = document.createElement('div');\n wrapper.appendChild(ele);\n\n const Croppie = (window as any).Croppie;\n this.croppie = new Croppie(ele, {\n enableExif: true,\n viewport: {\n width: 300,\n height: 300,\n type: this.shape,\n },\n boundary: {\n width: 400,\n height: 400,\n },\n });\n\n this.croppie.bind({ url });\n }\n\n private saveResult() {\n const picker = this;\n this.croppie\n .result({\n type: 'blob',\n size: 'viewport',\n format: 'webp',\n quality: 1,\n circle: false,\n })\n .then(function (resp: any) {\n const blob = resp;\n picker.url = URL.createObjectURL(blob);\n\n // const blob = dataURItoBlob(resp);\n const fd = new FormData();\n fd.append(picker.name, blob, 'filename.webp');\n\n picker.value = fd;\n picker.closeCroppie();\n });\n }\n\n private handleToggleClicked() {\n const fileInput = this.shadowRoot.querySelector('#file');\n (fileInput as any).click();\n }\n\n private handleFileChanged(e: Event) {\n const input = e.target as any;\n if (input.files.length > 0) {\n this.uploadReader.readAsDataURL(input.files[0]);\n }\n input.value = '';\n }\n\n protected render() {\n return html`\n <div class=\"wrapper ${this.shape} ${this.label ? 'label' : ''}\">\n <temba-field\n name=${this.name}\n label=${this.label}\n .helpText=${this.helpText}\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .helpAlways=${true}\n ?disabled=${this.disabled}\n >\n <input class='hidden' type=\"file\" accept=\"image/*\" capture=\"camera\" id=\"file\" name=\"file\" @change=${\n this.handleFileChanged\n }/>\n <div class='toggle ${this.url ? 'set' : ''} ${\n this.showCroppie ? 'hidden' : ''\n }' @click=${this.handleToggleClicked} style=\"background: ${\n this.url\n ? `url('${this.url}') center / contain no-repeat`\n : 'rgba(0, 0, 0, 0.1)'\n }\">\n <temba-icon name=${Icon.upload_image} size=\"1.5\"></temba-icon>\n </div>\n \n <temba-mask ?show=${this.showCroppie} class=\"${\n this.showCroppie ? 'editing' : ''\n }\">\n <div class='croppie'>\n <div class='embed'></div>\n <div class='controls'>\n <temba-icon class=\"close\" size=\"1\" name=${Icon.close} @click=${\n this.closeCroppie\n }></temba-icon>\n <div style=\"flex-grow:1\"></div>\n <temba-icon class=\"submit\" size=\"1\" name=${Icon.submit} @click=${\n this.saveResult\n }></temba-icon>\n </div>\n </temba-mask>\n </temba-field>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/label/Label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;IACJ,CAAC;IAgCM,MAAM;QACX,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,eAAe,EAAE;
|
|
1
|
+
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../src/label/Label.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,UAAU;IAC3C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0ET,CAAC;IACJ,CAAC;IAgCM,MAAM;QACX,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,UAAU,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC;QAClD,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,UAAU,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;YACrC,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;QAC9C,CAAC;QAED,OAAO,IAAI,CAAA;;uBAEQ,UAAU,CAAC;YACxB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;gBACM,QAAQ,CAAC,UAAU,CAAC;;;YAGxB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI;;;;KAIhE,CAAC;IACJ,CAAC;CACF;AA7DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCACd;AAGb;IADC,QAAQ,EAAE;8CACa;AAGxB;IADC,QAAQ,EAAE;wCACO","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\nexport default class Label extends LitElement {\n static get styles() {\n return css`\n :host {\n display: inline-block;\n }\n\n slot {\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n display: block;\n }\n\n .mask {\n padding: 3px 8px;\n border-radius: 12px;\n display: flex;\n }\n\n temba-icon {\n margin-right: 0.3em;\n padding-bottom: 0.1em;\n }\n\n .label.clickable .mask:hover {\n background: var(--color-background-hover, rgb(0, 0, 0, 0.05));\n }\n\n .label {\n font-size: 0.8em;\n font-weight: 400;\n border-radius: 12px;\n box-shadow: var(--widget-shadow, 0 0.04em 0.08em rgba(0, 0, 0, 0.15));\n background: var(--color-overlay-light);\n color: var(--color-overlay-light-text);\n --icon-color: var(--color-overlay-light-text);\n text-shadow: none;\n }\n\n .danger {\n background: tomato;\n color: #fff;\n --icon-color: #fff;\n }\n\n .primary {\n background: var(--color-primary-dark);\n color: var(--color-text-light);\n --icon-color: var(--color-text-light);\n }\n\n .secondary {\n background: var(--color-secondary-dark);\n color: var(--color-text-light);\n --icon-color: var(--color-text-light);\n }\n\n .tertiary {\n background: var(--color-tertiary);\n color: var(--color-text-light);\n --icon-color: var(--color-text-light);\n }\n\n .dark {\n background: var(--color-overlay-dark);\n text-shadow: none;\n }\n\n .clickable {\n cursor: pointer;\n }\n\n .shadow {\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\n }\n `;\n }\n\n @property({ type: Boolean })\n clickable: boolean;\n\n @property({ type: Boolean })\n primary: boolean;\n\n @property({ type: Boolean })\n secondary: boolean;\n\n @property({ type: Boolean })\n tertiary: boolean;\n\n @property({ type: Boolean })\n danger: boolean;\n\n @property({ type: Boolean })\n dark: boolean;\n\n @property({ type: Boolean })\n shadow: boolean;\n\n @property({ type: String })\n icon: string;\n\n @property()\n backgroundColor: string;\n\n @property()\n textColor: string;\n\n public render(): TemplateResult {\n const labelStyle = {};\n\n if (this.backgroundColor) {\n labelStyle['background'] = this.backgroundColor;\n }\n\n if (this.textColor) {\n labelStyle['color'] = this.textColor;\n labelStyle['--icon-color'] = this.textColor;\n }\n\n return html`\n <div\n class=\"label ${getClasses({\n clickable: this.clickable,\n primary: this.primary,\n secondary: this.secondary,\n tertiary: this.tertiary,\n shadow: this.shadow,\n danger: this.danger,\n dark: this.dark,\n })}\"\n style=${styleMap(labelStyle)}\n >\n <div class=\"mask\">\n ${this.icon ? html`<temba-icon name=${this.icon} />` : null}\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LeafletMap.js","sourceRoot":"","sources":["../../../src/leafletmap/LeafletMap.ts"],"names":[],"mappings":"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","sourcesContent":["import { Feature, Geometry } from 'geojson';\nimport {\n GeoJSON,\n geoJSON,\n LeafletEvent,\n LeafletMouseEvent,\n Map as RenderedMap,\n map as createMap,\n Path,\n} from 'leaflet';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { FeatureProperties } from '../interfaces';\nimport { getUrl, WebResponse } from '../utils';\nimport { highlightedFeature, normalFeature, visibleStyle } from './helpers';\n\nexport class LeafletMap extends LitElement {\n static get styles() {\n return css`\n :host {\n display: block;\n padding: 0px;\n }\n\n #alias-map {\n top: 0px;\n height: 100%;\n }\n\n .leaflet-container {\n background: transparent;\n }\n\n .path {\n position: absolute;\n color: #666;\n }\n\n .path > .step {\n display: inline-block;\n font-size: 12px;\n margin-left: 5px;\n }\n\n .path > .step.hovered {\n color: #999;\n }\n\n .path > .step.linked {\n text-decoration: underline;\n color: var(--color-link-primary);\n cursor: pointer;\n }\n `;\n }\n\n @property()\n feature: FeatureProperties;\n\n @property()\n osmId = '';\n\n @property()\n endpoint = '';\n\n @property()\n onFeatureClicked: (feature: FeatureProperties) => void;\n\n @property()\n hovered: FeatureProperties = null;\n\n @property()\n path: FeatureProperties[] = [];\n\n renderedMap: RenderedMap = null;\n states: GeoJSON<any> = null;\n\n constructor() {\n super();\n }\n\n private getRenderRoot(): DocumentFragment {\n return this.renderRoot as DocumentFragment;\n }\n\n private getEndpoint(): string {\n return this.endpoint + (!this.endpoint.endsWith('/') ? '/' : '');\n }\n\n paths: { [osmId: string]: Path } = {};\n lastHovered: Path = null;\n\n private refreshMap(): void {\n const onEachFeature = (feature: Feature<Geometry, any>, path: Path) => {\n this.paths[feature.properties.osm_id] = path;\n\n path.on({\n click: (event: LeafletMouseEvent) => {\n const feature: FeatureProperties = event.target.feature.properties;\n if (feature.osm_id !== this.path[this.path.length - 1].osm_id) {\n const orig = event.originalEvent;\n\n orig.stopPropagation();\n orig.preventDefault();\n\n if (this.onFeatureClicked) {\n this.onFeatureClicked(feature);\n }\n\n this.hovered = null;\n this.path.push(feature);\n this.osmId = feature.osm_id;\n this.refreshMap();\n }\n },\n mouseover: (event: LeafletEvent) => {\n const feature: FeatureProperties = event.target.feature.properties;\n if (feature.osm_id !== this.path[this.path.length - 1].osm_id) {\n event.target.setStyle(highlightedFeature);\n this.hovered = feature;\n }\n },\n mouseout: (event: LeafletEvent) => {\n event.target.setStyle(normalFeature);\n this.hovered = null;\n },\n });\n };\n\n getUrl(this.getEndpoint() + 'geometry/' + this.osmId + '/').then(\n (response: WebResponse) => {\n if (this.states) {\n this.renderedMap.removeLayer(this.states);\n }\n\n const data = response.json;\n if (this.path.length === 0) {\n this.path = [\n {\n name: data.name,\n osm_id: this.osmId,\n level: 0,\n },\n ];\n }\n\n this.states = geoJSON(data.geometry, {\n style: visibleStyle,\n onEachFeature,\n });\n this.renderedMap.fitBounds(this.states.getBounds(), {});\n this.states.addTo(this.renderedMap);\n }\n );\n }\n\n public updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('hovered')) {\n if (this.lastHovered) {\n this.lastHovered.setStyle(normalFeature);\n }\n\n if (this.hovered) {\n const layer = this.paths[this.hovered.osm_id];\n this.lastHovered = layer;\n if (layer) {\n layer.setStyle(highlightedFeature);\n }\n }\n }\n\n if (changedProperties.has('feature') && this.feature) {\n this.hovered = null;\n if (\n this.path.length === 0 ||\n this.path[this.path.length - 1].osm_id !== this.feature.osm_id\n ) {\n this.path.push(this.feature);\n }\n }\n\n if (changedProperties.has('osmId')) {\n const path: FeatureProperties[] = [];\n for (const feature of this.path) {\n path.push(feature);\n if (feature.osm_id === this.osmId) {\n if (this.onFeatureClicked) {\n this.onFeatureClicked(feature);\n }\n break;\n }\n }\n\n this.path = path;\n\n this.refreshMap();\n }\n }\n\n public firstUpdated(changedProperties: any) {\n const mapElement = this.getRenderRoot().getElementById('alias-map');\n this.renderedMap = createMap(mapElement, {\n attributionControl: false,\n scrollWheelZoom: false,\n zoomControl: false,\n }).setView([0, 1], 4);\n this.renderedMap.dragging.disable();\n this.renderedMap.doubleClickZoom.disable();\n\n this.refreshMap();\n super.firstUpdated(changedProperties);\n }\n\n private handleClickedBreadcrumb(e: MouseEvent): void {\n this.osmId = (e.currentTarget as HTMLElement).getAttribute('data-osmid');\n const path: FeatureProperties[] = [];\n for (const feature of this.path) {\n path.push(feature);\n if (feature.osm_id === this.osmId) {\n if (this.onFeatureClicked) {\n this.onFeatureClicked(feature);\n }\n break;\n }\n }\n\n this.path = path;\n this.refreshMap();\n }\n\n render() {\n if (!this.osmId) {\n return html`<div>No osm map id</div>`;\n }\n\n return html`\n <link\n rel=\"stylesheet\"\n href=\"https://unpkg.com/leaflet@1.5.1/dist/leaflet.css\"\n />\n <div id=\"alias-map\"></div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"LeafletMap.js","sourceRoot":"","sources":["../../../src/leafletmap/LeafletMap.ts"],"names":[],"mappings":";AACA,OAAO,EAEL,OAAO,EAIP,GAAG,IAAI,SAAS,GAEjB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE5E,MAAM,OAAO,UAAW,SAAQ,UAAU;IACxC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCT,CAAC;IACJ,CAAC;IAuBD;QACE,KAAK,EAAE,CAAC;QAlBV,UAAK,GAAG,EAAE,CAAC;QAGX,aAAQ,GAAG,EAAE,CAAC;QAMd,YAAO,GAAsB,IAAI,CAAC;QAGlC,SAAI,GAAwB,EAAE,CAAC;QAE/B,gBAAW,GAAgB,IAAI,CAAC;QAChC,WAAM,GAAiB,IAAI,CAAC;QAc5B,UAAK,GAA8B,EAAE,CAAC;QACtC,gBAAW,GAAS,IAAI,CAAC;IAXzB,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,UAA8B,CAAC;IAC7C,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACnE,CAAC;IAKO,UAAU;QAChB,MAAM,aAAa,GAAG,CAAC,OAA+B,EAAE,IAAU,EAAE,EAAE;YACpE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;YAE7C,IAAI,CAAC,EAAE,CAAC;gBACN,KAAK,EAAE,CAAC,KAAwB,EAAE,EAAE;oBAClC,MAAM,OAAO,GAAsB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC;oBACnE,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;wBAC9D,MAAM,IAAI,GAAG,KAAK,CAAC,aAAa,CAAC;wBAEjC,IAAI,CAAC,eAAe,EAAE,CAAC;wBACvB,IAAI,CAAC,cAAc,EAAE,CAAC;wBAEtB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;4BAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;wBACjC,CAAC;wBAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;wBACpB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;wBACxB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC;wBAC5B,IAAI,CAAC,UAAU,EAAE,CAAC;oBACpB,CAAC;gBACH,CAAC;gBACD,SAAS,EAAE,CAAC,KAAmB,EAAE,EAAE;oBACjC,MAAM,OAAO,GAAsB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC;oBACnE,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;wBAC9D,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;wBAC1C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;oBACzB,CAAC;gBACH,CAAC;gBACD,QAAQ,EAAE,CAAC,KAAmB,EAAE,EAAE;oBAChC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;oBACrC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACtB,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,GAAG,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,IAAI,CAC9D,CAAC,QAAqB,EAAE,EAAE;YACxB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAC5C,CAAC;YAED,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC3B,IAAI,CAAC,IAAI,GAAG;oBACV;wBACE,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,MAAM,EAAE,IAAI,CAAC,KAAK;wBAClB,KAAK,EAAE,CAAC;qBACT;iBACF,CAAC;YACJ,CAAC;YAED,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;gBACnC,KAAK,EAAE,YAAY;gBACnB,aAAa;aACd,CAAC,CAAC;YACH,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;YACxD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,CAAC,CACF,CAAC;IACJ,CAAC;IAEM,OAAO,CAAC,iBAAmC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;YAC3C,CAAC;YAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;gBAC9C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,IAAI,KAAK,EAAE,CAAC;oBACV,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;gBACrC,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACrD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IACE,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;gBACtB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,CAAC,MAAM,EAC9D,CAAC;gBACD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,MAAM,IAAI,GAAwB,EAAE,CAAC;YACrC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACnB,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;oBAClC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;wBAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;oBACjC,CAAC;oBACD,MAAM;gBACR,CAAC;YACH,CAAC;YAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YAEjB,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAEM,YAAY,CAAC,iBAAsB;QACxC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QACpE,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE;YACvC,kBAAkB,EAAE,KAAK;YACzB,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;QAE3C,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;IACxC,CAAC;IAEO,uBAAuB,CAAC,CAAa;QAC3C,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,aAA6B,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACzE,MAAM,IAAI,GAAwB,EAAE,CAAC;QACrC,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACnB,IAAI,OAAO,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;gBAClC,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;gBACjC,CAAC;gBACD,MAAM;YACR,CAAC;QACH,CAAC;QAED,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA,0BAA0B,CAAC;QACxC,CAAC;QAED,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;CACF;AA1LC;IADC,QAAQ,EAAE;2CACgB;AAG3B;IADC,QAAQ,EAAE;yCACA;AAGX;IADC,QAAQ,EAAE;4CACG;AAGd;IADC,QAAQ,EAAE;oDAC4C;AAGvD;IADC,QAAQ,EAAE;2CACuB;AAGlC;IADC,QAAQ,EAAE;wCACoB","sourcesContent":["import { Feature, Geometry } from 'geojson';\nimport {\n GeoJSON,\n geoJSON,\n LeafletEvent,\n LeafletMouseEvent,\n Map as RenderedMap,\n map as createMap,\n Path,\n} from 'leaflet';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { FeatureProperties } from '../interfaces';\nimport { getUrl, WebResponse } from '../utils';\nimport { highlightedFeature, normalFeature, visibleStyle } from './helpers';\n\nexport class LeafletMap extends LitElement {\n static get styles() {\n return css`\n :host {\n display: block;\n padding: 0px;\n }\n\n #alias-map {\n top: 0px;\n height: 100%;\n }\n\n .leaflet-container {\n background: transparent;\n }\n\n .path {\n position: absolute;\n color: #666;\n }\n\n .path > .step {\n display: inline-block;\n font-size: 12px;\n margin-left: 5px;\n }\n\n .path > .step.hovered {\n color: #999;\n }\n\n .path > .step.linked {\n text-decoration: underline;\n color: var(--color-link-primary);\n cursor: pointer;\n }\n `;\n }\n\n @property()\n feature: FeatureProperties;\n\n @property()\n osmId = '';\n\n @property()\n endpoint = '';\n\n @property()\n onFeatureClicked: (feature: FeatureProperties) => void;\n\n @property()\n hovered: FeatureProperties = null;\n\n @property()\n path: FeatureProperties[] = [];\n\n renderedMap: RenderedMap = null;\n states: GeoJSON<any> = null;\n\n constructor() {\n super();\n }\n\n private getRenderRoot(): DocumentFragment {\n return this.renderRoot as DocumentFragment;\n }\n\n private getEndpoint(): string {\n return this.endpoint + (!this.endpoint.endsWith('/') ? '/' : '');\n }\n\n paths: { [osmId: string]: Path } = {};\n lastHovered: Path = null;\n\n private refreshMap(): void {\n const onEachFeature = (feature: Feature<Geometry, any>, path: Path) => {\n this.paths[feature.properties.osm_id] = path;\n\n path.on({\n click: (event: LeafletMouseEvent) => {\n const feature: FeatureProperties = event.target.feature.properties;\n if (feature.osm_id !== this.path[this.path.length - 1].osm_id) {\n const orig = event.originalEvent;\n\n orig.stopPropagation();\n orig.preventDefault();\n\n if (this.onFeatureClicked) {\n this.onFeatureClicked(feature);\n }\n\n this.hovered = null;\n this.path.push(feature);\n this.osmId = feature.osm_id;\n this.refreshMap();\n }\n },\n mouseover: (event: LeafletEvent) => {\n const feature: FeatureProperties = event.target.feature.properties;\n if (feature.osm_id !== this.path[this.path.length - 1].osm_id) {\n event.target.setStyle(highlightedFeature);\n this.hovered = feature;\n }\n },\n mouseout: (event: LeafletEvent) => {\n event.target.setStyle(normalFeature);\n this.hovered = null;\n },\n });\n };\n\n getUrl(this.getEndpoint() + 'geometry/' + this.osmId + '/').then(\n (response: WebResponse) => {\n if (this.states) {\n this.renderedMap.removeLayer(this.states);\n }\n\n const data = response.json;\n if (this.path.length === 0) {\n this.path = [\n {\n name: data.name,\n osm_id: this.osmId,\n level: 0,\n },\n ];\n }\n\n this.states = geoJSON(data.geometry, {\n style: visibleStyle,\n onEachFeature,\n });\n this.renderedMap.fitBounds(this.states.getBounds(), {});\n this.states.addTo(this.renderedMap);\n }\n );\n }\n\n public updated(changedProperties: Map<string, any>) {\n if (changedProperties.has('hovered')) {\n if (this.lastHovered) {\n this.lastHovered.setStyle(normalFeature);\n }\n\n if (this.hovered) {\n const layer = this.paths[this.hovered.osm_id];\n this.lastHovered = layer;\n if (layer) {\n layer.setStyle(highlightedFeature);\n }\n }\n }\n\n if (changedProperties.has('feature') && this.feature) {\n this.hovered = null;\n if (\n this.path.length === 0 ||\n this.path[this.path.length - 1].osm_id !== this.feature.osm_id\n ) {\n this.path.push(this.feature);\n }\n }\n\n if (changedProperties.has('osmId')) {\n const path: FeatureProperties[] = [];\n for (const feature of this.path) {\n path.push(feature);\n if (feature.osm_id === this.osmId) {\n if (this.onFeatureClicked) {\n this.onFeatureClicked(feature);\n }\n break;\n }\n }\n\n this.path = path;\n\n this.refreshMap();\n }\n }\n\n public firstUpdated(changedProperties: any) {\n const mapElement = this.getRenderRoot().getElementById('alias-map');\n this.renderedMap = createMap(mapElement, {\n attributionControl: false,\n scrollWheelZoom: false,\n zoomControl: false,\n }).setView([0, 1], 4);\n this.renderedMap.dragging.disable();\n this.renderedMap.doubleClickZoom.disable();\n\n this.refreshMap();\n super.firstUpdated(changedProperties);\n }\n\n private handleClickedBreadcrumb(e: MouseEvent): void {\n this.osmId = (e.currentTarget as HTMLElement).getAttribute('data-osmid');\n const path: FeatureProperties[] = [];\n for (const feature of this.path) {\n path.push(feature);\n if (feature.osm_id === this.osmId) {\n if (this.onFeatureClicked) {\n this.onFeatureClicked(feature);\n }\n break;\n }\n }\n\n this.path = path;\n this.refreshMap();\n }\n\n render() {\n if (!this.osmId) {\n return html`<div>No osm map id</div>`;\n }\n\n return html`\n <link\n rel=\"stylesheet\"\n href=\"https://unpkg.com/leaflet@1.5.1/dist/leaflet.css\"\n />\n <div id=\"alias-map\"></div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/lightbox/Lightbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D;;;;GAIG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QAiCE,kBAAa,GAAG,GAAG,CAAC;QAGpB,SAAI,GAAG,KAAK,CAAC;QAGb,SAAI,GAAG,KAAK,CAAC;QAGb,YAAO,GAAG,GAAG,CAAC;QAON,UAAK,GAAG,CAAC,CAAC;QACV,WAAM,GAAG,KAAK,CAAC;QACf,WAAM,GAAG,KAAK,CAAC;IAsGzB,CAAC;IAxJC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BT,CAAC;IACJ,CAAC;IAuBS,OAAO,CACf,OAA0D;QAE1D,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/lightbox/Lightbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D;;;;GAIG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QAiCE,kBAAa,GAAG,GAAG,CAAC;QAGpB,SAAI,GAAG,KAAK,CAAC;QAGb,SAAI,GAAG,KAAK,CAAC;QAGb,YAAO,GAAG,GAAG,CAAC;QAON,UAAK,GAAG,CAAC,CAAC;QACV,WAAM,GAAG,KAAK,CAAC;QACf,WAAM,GAAG,KAAK,CAAC;IAsGzB,CAAC;IAxJC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BT,CAAC;IACJ,CAAC;IAuBS,OAAO,CACf,OAA0D;QAE1D,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACnB,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACnD,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAEM,WAAW,CAAC,GAAgB;QACjC,mDAAmD;QACnD,MAAM,MAAM,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QAC3C,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,SAAS,EAAiB,CAAC;QAC1C,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAE5B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAEf,IAAI,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9B,IAAI,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;QAChC,IAAI,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAE9B,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;QACpD,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAElD,yCAAyC;QACzC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,QAAQ,EAAE,CAAC;YACtD,aAAa,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;YAClD,YAAY,GAAG,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAC3C,YAAY,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;YAChD,YAAY,GAAG,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;YACzC,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC7C,CAAC;QAED,MAAM,OAAO,GAAG,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACrD,IAAI,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;QAEjD,MAAM,OAAO,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAClD,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC;QAEhD,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEM,MAAM;QACX,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,aAAa,IAAI,CAAC,aAAa,uBAAuB,IAAI,CAAC,aAAa,SAAS;SAC9F,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YAClC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAChC,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YACpC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACxC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,CACJ,WAAW,CACZ,GAAG,aAAa,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC;QACtF,CAAC;QAED,OAAO,IAAI,CAAA;;gBAEC,UAAU,CAAC;YACjB,SAAS,EAAE,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;iBACO,IAAI,CAAC,WAAW;;;kBAGf,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;mCACT,IAAI,CAAC,aAAa;;qBAEhC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,UAAU,QAAQ,CAAC,MAAM,CAAC;YAC9D,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;;;KAGlC,CAAC;IACJ,CAAC;CACF;AAxHC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACP;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACb","sourcesContent":["import { css, html, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\n/**\n * This component relies on a bit of sleight of hand magic\n * to achieve it's effect. As such, it requires the use of\n * computed animation times and window.setTimeout().\n */\nexport class Lightbox extends RapidElement {\n static get styles() {\n return css`\n :host {\n position: absolute;\n }\n\n .mask {\n display: flex;\n opacity: 0;\n background: rgba(0, 0, 0, 0.5);\n position: absolute;\n height: 100svh;\n width: 100svw;\n pointer-events: none;\n }\n\n .zoom .mask {\n opacity: 1;\n pointer-events: auto;\n }\n\n .matte {\n position: absolute;\n transform: translate(400, 400) scale(3, 3);\n border-radius: 2%;\n overflow: hidden;\n box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);\n }\n `;\n }\n\n @property({ type: Number })\n animationTime = 300;\n\n @property({ type: Boolean })\n show = false;\n\n @property({ type: Boolean })\n zoom = false;\n\n @property({ type: Number })\n zoomPct = 0.9;\n\n private ele: HTMLElement;\n private left: number;\n private top: number;\n private height: number;\n private width: number;\n private scale = 1;\n private xTrans = '0px';\n private yTrans = '0px';\n\n protected updated(\n changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n if (changed.has('show') && this.show) {\n window.setTimeout(() => {\n this.zoom = true;\n }, 0);\n }\n\n if (changed.has('zoom') && !this.zoom && this.show) {\n window.setTimeout(() => {\n this.show = false;\n }, this.animationTime);\n }\n }\n\n public showElement(ele: HTMLElement) {\n // size our matte according to the ele's boundaries\n const bounds = ele.getBoundingClientRect();\n this.ele = ele.cloneNode() as HTMLElement;\n this.left = bounds.left;\n this.top = bounds.top;\n this.width = bounds.width;\n this.height = bounds.height;\n\n this.xTrans = '0px';\n this.yTrans = '0px';\n this.scale = 1;\n\n let desiredWidth = this.width;\n let desiredHeight = this.height;\n let desiredScale = this.scale;\n\n const maxHeight = window.innerHeight * this.zoomPct;\n const maxWidth = window.innerWidth * this.zoomPct;\n\n // if the width fits, constrain by height\n if (this.width * (maxHeight / this.height) < maxWidth) {\n desiredHeight = window.innerHeight * this.zoomPct;\n desiredScale = desiredHeight / this.height;\n desiredWidth = this.width * desiredScale;\n } else {\n desiredWidth = window.innerWidth * this.zoomPct;\n desiredScale = desiredWidth / this.width;\n desiredHeight = this.height * desiredScale;\n }\n\n const xGrowth = (desiredWidth - this.width) / 2;\n const xDest = (window.innerWidth - desiredWidth) / 2;\n this.xTrans = xDest - this.left + xGrowth + 'px';\n\n const yGrowth = (desiredHeight - this.height) / 2;\n const yDest = (window.innerHeight - desiredHeight) / 2;\n this.yTrans = yDest - this.top + yGrowth + 'px';\n\n this.scale = desiredScale;\n this.show = true;\n }\n\n public handleClick() {\n this.zoom = false;\n }\n\n public render() {\n const styles = {\n transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`,\n };\n\n if (this.show) {\n styles['left'] = this.left + 'px';\n styles['top'] = this.top + 'px';\n styles['width'] = this.width + 'px';\n styles['height'] = this.height + 'px';\n }\n\n if (this.zoom) {\n styles[\n 'transform'\n ] = `translate(${this.xTrans}, ${this.yTrans}) scale(${this.scale}, ${this.scale})`;\n }\n\n return html`\n <div\n class=${getClasses({\n container: true,\n show: this.show,\n zoom: this.zoom,\n })}\n @click=${this.handleClick}\n >\n <div\n class=${getClasses({ mask: true })}\n style=\"transition: all ${this.animationTime}ms; ease\"\n ></div>\n <div class=${getClasses({ matte: true })} style=${styleMap(styles)}>\n ${this.show ? this.ele : null}\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentMenu.js","sourceRoot":"","sources":["../../../src/list/ContentMenu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,MAAM,OAAO,GAAG;IACd,oBAAoB,EAAE,GAAG;IACzB,WAAW,EAAE,GAAG;CACjB,CAAC;AAeF,MAAM,CAAN,IAAY,mBAMX;AAND,WAAY,mBAAmB;IAC7B,oCAAa,CAAA;IACb,gCAAS,CAAA;IACT,4CAAqB,CAAA;IACrB,sCAAe,CAAA;IACf,0CAAmB,CAAA;AACrB,CAAC,EANW,mBAAmB,KAAnB,mBAAmB,QAM9B;AAED,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QA2DE,YAAO,GAAsB,EAAE,CAAC;QAGhC,UAAK,GAAsB,EAAE,CAAC;IAgGhC,CAAC;IA7JC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+CT,CAAC;IACJ,CAAC;IAcO,gBAAgB;QACtB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1B,IAAI,GAAG,EAAE;
|
|
1
|
+
{"version":3,"file":"ContentMenu.js","sourceRoot":"","sources":["../../../src/list/ContentMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\n\nimport { RapidElement } from '../RapidElement';\nimport { getUrl, WebResponse } from '../utils';\n\nconst HEADERS = {\n 'Temba-Content-Menu': '1',\n 'Temba-Spa': '1',\n};\nexport interface ContentMenuItem {\n type: string;\n as_button: boolean;\n label: string;\n url: string;\n disabled: boolean;\n modal_id: string;\n on_submit: string;\n primary: boolean;\n title: string;\n on_click: null;\n link_class: string;\n}\n\nexport enum ContentMenuItemType {\n LINK = 'link',\n JS = 'js',\n URL_POST = 'url_post',\n MODAX = 'modax',\n DIVIDER = 'divider',\n}\n\nexport class ContentMenu extends RapidElement {\n static get styles() {\n return css`\n .container {\n --button-y: 0.4em;\n --button-x: 1em;\n display: flex;\n }\n\n .button_item,\n .primary_button_item {\n margin-left: 1rem;\n }\n\n .toggle {\n --icon-color: rgb(102, 102, 102);\n padding: 0.5rem;\n margin-left: 0.5rem;\n }\n\n .toggle:hover {\n background: rgba(0, 0, 0, 0.05);\n border-radius: var(--curvature);\n --icon-color: rgb(136, 136, 136);\n }\n\n .dropdown {\n padding: 1rem 1.5rem;\n color: rgb(45, 45, 45);\n z-index: 50;\n min-width: 200px;\n }\n\n .divider {\n border-bottom: 1px solid rgb(237, 237, 237);\n margin: 1rem -1.5em;\n }\n\n .item {\n white-space: nowrap;\n margin: 0.2em 0em;\n font-size: 1.1rem;\n cursor: pointer;\n font-weight: 400;\n }\n\n .item:hover {\n color: var(--color-link-primary);\n }\n `;\n }\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: Number })\n legacy: number;\n\n @property({ type: Array, attribute: false })\n buttons: ContentMenuItem[] = [];\n\n @property({ type: Array, attribute: false })\n items: ContentMenuItem[] = [];\n\n private fetchContentMenu() {\n const url = this.endpoint;\n if (url) {\n const legacy = this.legacy;\n const headers = HEADERS;\n if (legacy) {\n delete headers['Temba-Spa'];\n }\n\n //ok, fetch the content menu\n getUrl(url, null, headers)\n .then((response: WebResponse) => {\n const json = response.json;\n const contentMenu = json.items as ContentMenuItem[];\n\n //populate (or initialize) the buttons and items\n if (contentMenu) {\n this.buttons = contentMenu.filter(item => item.as_button);\n this.items = contentMenu.filter(item => !item.as_button);\n } else {\n this.buttons = [];\n this.items = [];\n }\n\n //fire custom loaded event type when we're finished\n this.fireCustomEvent(CustomEventType.Loaded, {\n buttons: this.buttons,\n items: this.items,\n });\n })\n .catch((error: any) => {\n console.error(error);\n });\n }\n }\n\n public refresh() {\n this.fetchContentMenu();\n }\n\n protected updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('endpoint') || changes.has('legacy')) {\n this.fetchContentMenu();\n }\n }\n\n private handleItemClicked(item: ContentMenuItem, event: MouseEvent) {\n this.fireCustomEvent(CustomEventType.Selection, { item, event });\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"container\">\n ${this.buttons.map(button => {\n return html`<temba-button\n class=\"${button.primary ? 'primary_button_item' : 'button_item'}\"\n name=${button.label}\n @click=${event => this.handleItemClicked(button, event)}\n >\n ${button.label}\n </temba-button>`;\n })}\n ${this.items && this.items.length > 0\n ? html`<temba-dropdown\n arrowsize=\"8\"\n arrowoffset=\"-12\"\n offsety=\"6\"\n bottom\n >\n <div slot=\"toggle\" class=\"toggle\">\n <temba-icon name=\"menu\" size=\"1.5\"></temba-icon>\n </div>\n <div slot=\"dropdown\" class=\"dropdown\">\n ${this.items.map(item => {\n if (item.type === ContentMenuItemType.DIVIDER) {\n return html` <div class=\"divider\"></div>`;\n } else {\n return html` <div\n class=\"item\"\n name=${item.label}\n @click=${event => this.handleItemClicked(item, event)}\n >\n ${item.label}\n </div>`;\n }\n })}\n </div>\n </temba-dropdown>`\n : null}\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationList.js","sourceRoot":"","sources":["../../../src/list/NotificationList.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAqBrC,MAAM,OAAO,gBAAiB,SAAQ,SAAS;IAG7C,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BT,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAjCV,mBAAc,GAAG,KAAK,CAAC;QACvB,0BAAqB,GAAG,IAAI,CAAC;QAiC3B,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC;QAC7B,IAAI,CAAC,YAAY,GAAG,CAAC,YAA0B,EAAkB,EAAE;YACjE,IAAI,IAAI,GAAG,IAAI,CAAC;YAChB,IAAI,IAAI,GAAG,IAAI,CAAC;YAChB,MAAM,KAAK,GAAG,MAAM,CAAC;YAErB,IAAI,YAAY,CAAC,IAAI,KAAK,kBAAkB,EAAE;
|
|
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 { StyleInfo } from 'lit-html/directives/style-map.js';\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 };\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 contacts';\n } else if (notification.export.type === 'message') {\n icon = Icon.message_export;\n body = 'Exported 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 tickets';\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 ? 300\n : 400}\"\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"]}
|