npm - @nyaruka/temba-components - Versions diffs - 0.25.2 → 0.26.2 - Mend

@nyaruka/temba-components 0.25.2 → 0.26.2

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

Files changed (186) hide show

package/.github/workflows/build.yml +1 -1
package/CHANGELOG.md +33 -0
package/demo/index.html +60 -1
package/dist/4f80c187.js +4277 -0
package/dist/index.js +3957 -36
package/dist/static/icons/symbol-defs.svg +29 -20
package/dist/sw.js +1 -1
package/dist/sw.js.map +1 -1
package/dist/templates/components-body.html +1 -1
package/dist/templates/components-head.html +1 -1
package/out-tsc/src/FormElement.js +1 -1
package/out-tsc/src/FormElement.js.map +1 -1
package/out-tsc/src/RapidElement.js +1 -1
package/out-tsc/src/RapidElement.js.map +1 -1
package/out-tsc/src/alert/Alert.js +3 -3
package/out-tsc/src/alert/Alert.js.map +1 -1
package/out-tsc/src/aliaseditor/AliasEditor.js +3 -3
package/out-tsc/src/aliaseditor/AliasEditor.js.map +1 -1
package/out-tsc/src/anchor/Anchor.js +2 -1
package/out-tsc/src/anchor/Anchor.js.map +1 -1
package/out-tsc/src/button/Button.js +2 -1
package/out-tsc/src/button/Button.js.map +1 -1
package/out-tsc/src/charcount/CharCount.js +2 -1
package/out-tsc/src/charcount/CharCount.js.map +1 -1
package/out-tsc/src/checkbox/Checkbox.js +3 -1
package/out-tsc/src/checkbox/Checkbox.js.map +1 -1
package/out-tsc/src/completion/Completion.js +2 -1
package/out-tsc/src/completion/Completion.js.map +1 -1
package/out-tsc/src/completion/helpers.js +27 -4
package/out-tsc/src/completion/helpers.js.map +1 -1
package/out-tsc/src/contacts/ContactChat.js +101 -86
package/out-tsc/src/contacts/ContactChat.js.map +1 -1
package/out-tsc/src/contacts/ContactDetails.js +2 -1
package/out-tsc/src/contacts/ContactDetails.js.map +1 -1
package/out-tsc/src/contacts/ContactHistory.js +32 -37
package/out-tsc/src/contacts/ContactHistory.js.map +1 -1
package/out-tsc/src/contacts/events.js +62 -76
package/out-tsc/src/contacts/events.js.map +1 -1
package/out-tsc/src/contactsearch/ContactSearch.js +2 -1
package/out-tsc/src/contactsearch/ContactSearch.js.map +1 -1
package/out-tsc/src/datepicker/DatePicker.js +2 -1
package/out-tsc/src/datepicker/DatePicker.js.map +1 -1
package/out-tsc/src/dialog/Dialog.js +2 -2
package/out-tsc/src/dialog/Dialog.js.map +1 -1
package/out-tsc/src/dialog/Modax.js +3 -6
package/out-tsc/src/dialog/Modax.js.map +1 -1
package/out-tsc/src/dropdown/Dropdown.js +133 -0
package/out-tsc/src/dropdown/Dropdown.js.map +1 -0
package/out-tsc/src/formfield/FormField.js +2 -1
package/out-tsc/src/formfield/FormField.js.map +1 -1
package/out-tsc/src/label/Label.js +2 -1
package/out-tsc/src/label/Label.js.map +1 -1
package/out-tsc/src/leafletmap/LeafletMap.js +2 -1
package/out-tsc/src/leafletmap/LeafletMap.js.map +1 -1
package/out-tsc/src/list/TembaList.js +7 -5
package/out-tsc/src/list/TembaList.js.map +1 -1
package/out-tsc/src/list/TembaMenu.js +112 -97
package/out-tsc/src/list/TembaMenu.js.map +1 -1
package/out-tsc/src/list/TicketList.js +2 -1
package/out-tsc/src/list/TicketList.js.map +1 -1
package/out-tsc/src/loading/Loading.js +2 -1
package/out-tsc/src/loading/Loading.js.map +1 -1
package/out-tsc/src/omnibox/Omnibox.js +2 -1
package/out-tsc/src/omnibox/Omnibox.js.map +1 -1
package/out-tsc/src/options/Options.js +3 -2
package/out-tsc/src/options/Options.js.map +1 -1
package/out-tsc/src/remote/Remote.js +2 -1
package/out-tsc/src/remote/Remote.js.map +1 -1
package/out-tsc/src/select/Select.js +8 -10
package/out-tsc/src/select/Select.js.map +1 -1
package/out-tsc/src/shadowless/Shadowless.js +2 -2
package/out-tsc/src/shadowless/Shadowless.js.map +1 -1
package/out-tsc/src/store/Store.js +2 -1
package/out-tsc/src/store/Store.js.map +1 -1
package/out-tsc/src/tabpane/Tab.js +46 -0
package/out-tsc/src/tabpane/Tab.js.map +1 -0
package/out-tsc/src/tabpane/TabPane.js +109 -0
package/out-tsc/src/tabpane/TabPane.js.map +1 -0
package/out-tsc/src/textinput/TextInput.js +3 -2
package/out-tsc/src/textinput/TextInput.js.map +1 -1
package/out-tsc/src/tip/Tip.js +2 -2
package/out-tsc/src/tip/Tip.js.map +1 -1
package/out-tsc/src/vectoricon/VectorIcon.js +18 -6
package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
package/out-tsc/temba-modules.js +6 -0
package/out-tsc/temba-modules.js.map +1 -1
package/out-tsc/test/temba-contact-history.test.js +9 -6
package/out-tsc/test/temba-contact-history.test.js.map +1 -1
package/out-tsc/test/temba-dialog.test.js +3 -3
package/out-tsc/test/temba-dialog.test.js.map +1 -1
package/package.json +10 -9
package/screenshots/truth/alert/error.png +0 -0
package/screenshots/truth/alert/info.png +0 -0
package/screenshots/truth/alert/warning.png +0 -0
package/screenshots/truth/contacts/history-expanded.png +0 -0
package/screenshots/truth/contacts/history.png +0 -0
package/screenshots/truth/counter/summary.png +0 -0
package/screenshots/truth/counter/unicode-variables.png +0 -0
package/screenshots/truth/counter/unicode.png +0 -0
package/screenshots/truth/dialog/focused.png +0 -0
package/screenshots/truth/list/items-selected.png +0 -0
package/screenshots/truth/list/items-updated.png +0 -0
package/screenshots/truth/list/items.png +0 -0
package/screenshots/truth/list/menu-root.png +0 -0
package/screenshots/truth/list/menu-submenu.png +0 -0
package/screenshots/truth/modax/form.png +0 -0
package/screenshots/truth/modax/simple.png +0 -0
package/screenshots/truth/options/block.png +0 -0
package/screenshots/truth/select/embedded.png +0 -0
package/screenshots/truth/select/expression-selected.png +0 -0
package/screenshots/truth/select/expressions.png +0 -0
package/screenshots/truth/select/functions.png +0 -0
package/screenshots/truth/select/local-options.png +0 -0
package/screenshots/truth/select/remote-options.png +0 -0
package/screenshots/truth/select/search-enabled.png +0 -0
package/screenshots/truth/select/search-selected-focus.png +0 -0
package/screenshots/truth/select/search-selected.png +0 -0
package/screenshots/truth/select/search-with-selected.png +0 -0
package/screenshots/truth/select/searching.png +0 -0
package/screenshots/truth/select/selected-multi.png +0 -0
package/screenshots/truth/select/selected-single.png +0 -0
package/screenshots/truth/select/selection-clearable.png +0 -0
package/screenshots/truth/select/with-placeholder.png +0 -0
package/screenshots/truth/select/without-placeholder.png +0 -0
package/screenshots/truth/textinput/date-initialized.png +0 -0
package/screenshots/truth/textinput/input-focused.png +0 -0
package/screenshots/truth/textinput/textarea-focused.png +0 -0
package/screenshots/truth/tip/bottom.png +0 -0
package/screenshots/truth/tip/left.png +0 -0
package/screenshots/truth/tip/right.png +0 -0
package/screenshots/truth/tip/top.png +0 -0
package/src/FormElement.ts +1 -1
package/src/RapidElement.ts +1 -1
package/src/alert/Alert.ts +3 -3
package/src/aliaseditor/AliasEditor.ts +4 -3
package/src/anchor/Anchor.ts +2 -1
package/src/button/Button.ts +3 -1
package/src/charcount/CharCount.ts +2 -1
package/src/checkbox/Checkbox.ts +3 -1
package/src/completion/Completion.ts +2 -1
package/src/completion/helpers.ts +30 -4
package/src/contacts/ContactChat.ts +115 -95
package/src/contacts/ContactDetails.ts +2 -1
package/src/contacts/ContactHistory.ts +64 -67
package/src/contacts/events.ts +62 -77
package/src/contactsearch/ContactSearch.ts +2 -1
package/src/datepicker/DatePicker.ts +2 -7
package/src/dialog/Dialog.ts +2 -2
package/src/dialog/Modax.ts +4 -6
package/src/dropdown/Dropdown.ts +136 -0
package/src/formfield/FormField.ts +2 -1
package/src/label/Label.ts +2 -8
package/src/leafletmap/LeafletMap.ts +2 -2
package/src/list/TembaList.ts +8 -5
package/src/list/TembaMenu.ts +125 -103
package/src/list/TicketList.ts +2 -1
package/src/loading/Loading.ts +2 -1
package/src/omnibox/Omnibox.ts +2 -1
package/src/options/Options.ts +3 -2
package/src/remote/Remote.ts +2 -7
package/src/select/Select.ts +11 -10
package/src/shadowless/Shadowless.ts +2 -2
package/src/store/Store.ts +2 -1
package/src/tabpane/Tab.ts +42 -0
package/src/tabpane/TabPane.ts +113 -0
package/src/textinput/TextInput.ts +3 -2
package/src/tip/Tip.ts +2 -2
package/src/vectoricon/VectorIcon.ts +18 -6
package/static/css/temba-components.css +11 -0
package/static/icons/Read Me.txt +1 -1
package/static/icons/SVG/pause.svg +5 -0
package/static/icons/SVG/play.svg +5 -0
package/static/icons/SVG/{upload-cloud.svg → publish.svg} +1 -1
package/static/icons/SVG/user-x.svg +5 -0
package/static/icons/demo-external-svg.html +157 -142
package/static/icons/demo-files/demo.css +3 -3
package/static/icons/demo.html +186 -162
package/static/icons/selection.json +390 -318
package/static/icons/symbol-defs.svg +29 -20
package/temba-modules.ts +6 -0
package/test/temba-contact-history.test.ts +10 -6
package/test/temba-dialog.test.ts +5 -6
package/test-assets/modax/form.html +1 -1
package/test-assets/style.css +7 -0
package/web-test-runner.config.mjs +130 -117
package/dist/56e0e480.js +0 -356

package/out-tsc/src/textinput/TextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/textinput/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css, property } from 'lit-element';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { FormElement } from '../FormElement';\nimport { Modax } from '../dialog/Modax';\nimport { sanitize } from './helpers';\nimport { CharCount } from '../charcount/CharCount';\nimport 'lit-flatpickr';\n\nexport class TextInput extends FormElement {\n static get styles() {\n return css`\n .input-container {\n border-radius: var(--curvature-widget);\n cursor: text;\n background: var(--color-widget-bg);\n border: 1px solid var(--color-widget-border);\n transition: all ease-in-out 200ms;\n display: flex;\n flex-direction: row;\n align-items: stretch;\n\n box-shadow: var(--widget-box-shadow);\n\n caret-color: var(--input-caret);\n }\n\n .clear-icon {\n --icon-color: var(--color-text-dark-secondary);\n cursor: pointer;\n margin: auto;\n padding-right: 10px;\n line-height: 1;\n }\n\n .clear-icon:hover {\n --icon-color: var(--color-text-dark);\n }\n\n .hidden {\n visibility: hidden;\n position: absolute;\n }\n\n .input-container:focus-within {\n border-color: var(--color-focus);\n background: var(--color-widget-bg-focused);\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .input-container:hover {\n background: var(--color-widget-bg-focused);\n }\n\n textarea {\n height: var(--textarea-height);\n }\n\n .textinput {\n padding: var(--temba-textinput-padding);\n border: none;\n flex: 1;\n margin: 0;\n background: none;\n color: var(--color-widget-text);\n font-family: var(--font-family);\n font-size: var(--temba-textinput-font-size);\n line-height: normal;\n cursor: text;\n resize: none;\n font-weight: 300;\n width: 100%;\n }\n\n .textinput.withdate {\n cursor: pointer;\n }\n\n .textinput.withdate.loading {\n color: #fff;\n }\n\n .datepicker {\n padding: 9px;\n margin: 0px;\n border: 1px red solid;\n }\n\n .textinput:focus {\n outline: none;\n box-shadow: none;\n cursor: text;\n }\n\n .textinput::placeholder {\n color: var(--color-placeholder);\n font-weight: 300;\n }\n\n .grow-wrap {\n display: flex;\n align-items: stretch;\n width: 100%;\n }\n\n .grow-wrap > div {\n border: 0px solid green;\n width: 100%;\n padding: var(--temba-textinput-padding);\n flex: 1;\n margin: 0;\n background: none;\n color: var(--color-widget-text);\n font-family: var(--font-family);\n font-size: var(--temba-textinput-font-size);\n line-height: normal;\n cursor: text;\n resize: none;\n font-weight: 300;\n width: 100%;\n }\n\n .grow-wrap textarea {\n margin-left: -100%;\n }\n `;\n }\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: Boolean })\n datepicker: boolean;\n\n @property({ type: Boolean })\n datetimepicker: boolean;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: String })\n value = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n password: boolean;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: Object })\n inputElement: HTMLInputElement;\n\n @property({ type: Object })\n dateElement: any;\n\n @property({ type: Boolean })\n clearable: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: String })\n counter: string;\n\n // if we are still loading\n @property({ type: Boolean })\n loading = true;\n\n @property({ type: Boolean })\n submitOnEnter = true;\n\n @property()\n onBlur: any;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n autogrow = false;\n\n counterElement: CharCount = null;\n cursorStart = -1;\n cursorEnd = -1;\n\n public constructor() {\n super();\n }\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n\n this.dateElement = this.shadowRoot.querySelector('.datepicker');\n if (this.dateElement) {\n this.onDateUpdated = this.onDateUpdated.bind(this);\n this.onDateReady = this.onDateReady.bind(this);\n }\n\n this.inputElement = this.shadowRoot.querySelector('.textinput');\n\n if (changes.has('counter')) {\n let root = this.getParentModax() as any;\n if (root) {\n root = root.shadowRoot;\n }\n if (!root) {\n root = document;\n }\n this.counterElement = root.querySelector(this.counter);\n this.counterElement.text = this.value;\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n if (changes.has('value')) {\n this.setValues([this.value]);\n this.fireEvent('change');\n\n if (this.textarea && this.autogrow) {\n const autogrow = this.shadowRoot.querySelector(\n '.grow-wrap > div'\n ) as HTMLDivElement;\n autogrow.innerText = this.value + String.fromCharCode(10);\n }\n\n if (this.cursorStart > -1 && this.cursorEnd > -1) {\n this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);\n this.cursorStart = -1;\n this.cursorEnd = -1;\n }\n }\n }\n\n private onDateUpdated(dates: Date[], formattedDate: string) {\n if (dates.length > 0) {\n this.inputElement.value = this.dateElement.formatDate(\n dates[0],\n this.dateElement.altFormat\n );\n\n this.setValue(formattedDate);\n this.inputElement.blur();\n }\n }\n\n private onDateReady() {\n window.setTimeout(() => {\n if (this.value) {\n this.inputElement.value = this.dateElement.formatDate(\n this.dateElement.parseDate(this.value),\n this.dateElement.altFormat\n );\n this.dateElement.setDate(this.value);\n }\n\n this.loading = false;\n }, 0);\n }\n\n private handleClear(event: any): void {\n event.stopPropagation();\n event.preventDefault();\n this.setValue(null);\n }\n\n private updateValue(value: string): void {\n const cursorStart = this.inputElement.selectionStart;\n const cursorEnd = this.inputElement.selectionEnd;\n\n const sanitized = this.sanitizeGSM(value);\n\n if (sanitized !== value) {\n this.cursorStart = cursorStart;\n this.cursorEnd = cursorEnd;\n }\n\n this.value = sanitized;\n\n if (this.textarea) {\n this.inputElement.value = this.value;\n }\n\n if (this.counterElement) {\n this.counterElement.text = value;\n }\n }\n\n private sanitizeGSM(text: string): string {\n return this.gsm ? sanitize(text) : text;\n }\n\n private handleChange(update: any): void {\n if (this.disabled) {\n return;\n }\n this.updateValue(update.target.value);\n this.fireEvent('change');\n }\n\n private handleDateClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.dateElement.open();\n this.dateElement.focus();\n }\n\n private handleContainerClick(): void {\n if (this.disabled) {\n return;\n }\n\n if (this.inputElement) {\n this.inputElement.focus();\n } else {\n this.handleDateClick();\n }\n }\n\n private handleInput(update: any): void {\n if (this.disabled) {\n return;\n }\n\n this.updateValue(update.target.value);\n this.setValues([this.value]);\n this.fireEvent('input');\n }\n\n /** we just return the value since it should be a string */\n public serializeValue(value: any): string {\n return value;\n }\n\n public getParentModax(): Modax {\n let parent = this as HTMLElement;\n\n while (parent) {\n if (parent.parentElement) {\n parent = parent.parentElement;\n } else {\n parent = (parent as any).getRootNode().host;\n }\n\n if (!parent) {\n return null;\n }\n\n if (parent.tagName == 'TEMBA-MODAX') {\n return parent as Modax;\n }\n }\n }\n\n public getParentForm(): HTMLFormElement {\n let parent = this as HTMLElement;\n\n while (parent) {\n if (parent.parentElement) {\n parent = parent.parentElement;\n } else {\n parent = (parent as any).getRootNode().host;\n }\n\n if (!parent) {\n return null;\n }\n\n if (parent.tagName === 'FORM') {\n return parent as HTMLFormElement;\n }\n }\n }\n\n public click(): void {\n super.click();\n this.handleContainerClick();\n }\n\n // TODO make this a formelement and have contactsearch set the root\n public render(): TemplateResult {\n const containerStyle = {\n height: `${this.textarea ? '100%' : 'auto'}`,\n };\n\n const clear =\n this.clearable && this.inputElement && this.inputElement.value\n ? html`<temba-icon\n name=\"x\"\n class=\"clear-icon\"\n @click=${this.handleClear}\n />`\n : null;\n\n let input = html`\n <input\n class=\"textinput\"\n name=${this.name}\n type=\"${this.password ? 'password' : 'text'}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n @change=${this.handleChange}\n @input=${this.handleInput}\n @blur=${this.blur}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const input = this;\n\n if (this.submitOnEnter) {\n const parentModax = input.getParentModax();\n const parentForm = !parentModax ? input.getParentForm() : null;\n\n this.value = this.values[0];\n this.fireEvent('change');\n\n // if we don't have something to submit then bail\n if (!parentModax && !parentForm) {\n return false;\n }\n\n input.blur();\n\n // look for a form to submit\n window.setTimeout(function () {\n // first, look for a modax that contains us\n const modax = input.getParentModax();\n if (modax) {\n input.blur();\n\n modax.submit();\n } else {\n // otherwise, just look for a vanilla submit button\n const form = input.getParentForm();\n\n if (form) {\n const submitButton = form.querySelector(\n \"input[type='submit']\"\n ) as HTMLInputElement;\n if (submitButton) {\n submitButton.click();\n } else {\n form.submit();\n }\n }\n }\n }, 10);\n // this is needed for firefox, would be nice to\n // find a way to do this with a callback instead\n }\n }\n }}\n placeholder=${this.placeholder}\n .value=${this.value}\n .disabled=${this.disabled}\n />\n `;\n\n if (this.textarea) {\n input = html`\n <textarea\n class=\"textinput\"\n name=${this.name}\n placeholder=${this.placeholder}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @blur=${this.blur}\n .value=${this.value}\n .disabled=${this.disabled}\n ></textarea>\n `;\n\n if (this.autogrow) {\n input = html` <div class=\"grow-wrap\">\n <div></div>\n ${input}\n </div>`;\n }\n }\n\n if (this.datepicker \|\| this.datetimepicker) {\n input = html`\n <input\n class=\"textinput withdate ${this.loading ? 'loading' : ''}\"\n name=${this.name}\n type=\"text\"\n @click=${this.handleDateClick}\n @focus=${this.handleDateClick}\n @keydown=${(e: any) => {\n e.preventDefault();\n }}\n readonly=\"true\"\n placeholder=\"${this.placeholder}\"\n .value=\"${this.value}\"\n ?disabled=${this.disabled}\n />\n <lit-flatpickr\n class=\"datepicker hidden\"\n altInput\n altFormat=\"${this.datepicker ? 'F j, Y' : 'F j, Y h:i K'}\"\n dateFormat=\"${this.datepicker ? 'Y-m-d' : 'Y-m-d H:i'}\"\n .onValueUpdate=${this.onDateUpdated}\n .onReady=${this.onDateReady}\n ?enableTime=${this.datetimepicker}\n ></lit-flatpickr>\n `;\n }\n\n return html`\n <temba-field\n name=${this.name}\n .label=\"${this.label}\"\n .helpText=\"${this.helpText}\"\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .hideLabel=${this.hideLabel}\n .disabled=${this.disabled}\n >\n <div\n class=\"input-container\"\n style=${styleMap(containerStyle)}\n @click=${this.handleContainerClick}\n >\n ${input} ${clear}\n <slot></slot>\n </div>\n </temba-field>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/textinput/TextInput.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\nimport { ifDefined } from 'lit-html/directives/if-defined';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { FormElement } from '../FormElement';\nimport { Modax } from '../dialog/Modax';\nimport { sanitize } from './helpers';\nimport { CharCount } from '../charcount/CharCount';\nimport 'lit-flatpickr';\n\nexport class TextInput extends FormElement {\n static get styles() {\n return css`\n .input-container {\n border-radius: var(--curvature-widget);\n cursor: text;\n background: var(--color-widget-bg);\n border: 1px solid var(--color-widget-border);\n transition: all ease-in-out var(--transition-speed);\n display: flex;\n flex-direction: row;\n align-items: stretch;\n\n box-shadow: var(--widget-box-shadow);\n\n caret-color: var(--input-caret);\n }\n\n .clear-icon {\n --icon-color: var(--color-text-dark-secondary);\n cursor: pointer;\n margin: auto;\n padding-right: 10px;\n line-height: 1;\n }\n\n .clear-icon:hover {\n --icon-color: var(--color-text-dark);\n }\n\n .hidden {\n visibility: hidden;\n position: absolute;\n }\n\n .input-container:focus-within {\n border-color: var(--color-focus);\n background: var(--color-widget-bg-focused);\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .input-container:hover {\n background: var(--color-widget-bg-focused);\n }\n\n textarea {\n height: var(--textarea-height);\n }\n\n .textinput {\n padding: var(--temba-textinput-padding);\n border: none;\n flex: 1;\n margin: 0;\n background: none;\n color: var(--color-widget-text);\n font-family: var(--font-family);\n font-size: var(--temba-textinput-font-size);\n line-height: normal;\n cursor: text;\n resize: none;\n font-weight: 300;\n width: 100%;\n }\n\n .textinput.withdate {\n cursor: pointer;\n }\n\n .textinput.withdate.loading {\n color: #fff;\n }\n\n .datepicker {\n padding: 9px;\n margin: 0px;\n border: 1px red solid;\n }\n\n .textinput:focus {\n outline: none;\n box-shadow: none;\n cursor: text;\n }\n\n .textinput::placeholder {\n color: var(--color-placeholder);\n font-weight: 300;\n }\n\n .grow-wrap {\n display: flex;\n align-items: stretch;\n width: 100%;\n }\n\n .grow-wrap > div {\n border: 0px solid green;\n width: 100%;\n padding: var(--temba-textinput-padding);\n flex: 1;\n margin: 0;\n background: none;\n color: var(--color-widget-text);\n font-family: var(--font-family);\n font-size: var(--temba-textinput-font-size);\n line-height: normal;\n cursor: text;\n resize: none;\n font-weight: 300;\n width: 100%;\n }\n\n .grow-wrap textarea {\n margin-left: -100%;\n }\n `;\n }\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: Boolean })\n datepicker: boolean;\n\n @property({ type: Boolean })\n datetimepicker: boolean;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ type: String })\n value = '';\n\n @property({ type: String })\n name = '';\n\n @property({ type: Boolean })\n password: boolean;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: Object })\n inputElement: HTMLInputElement;\n\n @property({ type: Object })\n dateElement: any;\n\n @property({ type: Boolean })\n clearable: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: String })\n counter: string;\n\n // if we are still loading\n @property({ type: Boolean })\n loading = true;\n\n @property({ type: Boolean })\n submitOnEnter = true;\n\n @property()\n onBlur: any;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n autogrow = false;\n\n counterElement: CharCount = null;\n cursorStart = -1;\n cursorEnd = -1;\n\n public constructor() {\n super();\n }\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n\n this.dateElement = this.shadowRoot.querySelector('.datepicker');\n if (this.dateElement) {\n this.onDateUpdated = this.onDateUpdated.bind(this);\n this.onDateReady = this.onDateReady.bind(this);\n }\n\n this.inputElement = this.shadowRoot.querySelector('.textinput');\n\n if (changes.has('counter')) {\n let root = this.getParentModax() as any;\n if (root) {\n root = root.shadowRoot;\n }\n if (!root) {\n root = document;\n }\n this.counterElement = root.querySelector(this.counter);\n this.counterElement.text = this.value;\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n if (changes.has('value')) {\n this.setValues([this.value]);\n this.fireEvent('change');\n\n if (this.textarea && this.autogrow) {\n const autogrow = this.shadowRoot.querySelector(\n '.grow-wrap > div'\n ) as HTMLDivElement;\n autogrow.innerText = this.value + String.fromCharCode(10);\n }\n\n if (this.cursorStart > -1 && this.cursorEnd > -1) {\n this.inputElement.setSelectionRange(this.cursorStart, this.cursorEnd);\n this.cursorStart = -1;\n this.cursorEnd = -1;\n }\n }\n }\n\n private onDateUpdated(dates: Date[], formattedDate: string) {\n if (dates.length > 0) {\n this.inputElement.value = this.dateElement.formatDate(\n dates[0],\n this.dateElement.altFormat\n );\n\n this.setValue(formattedDate);\n this.inputElement.blur();\n }\n }\n\n private onDateReady() {\n window.setTimeout(() => {\n if (this.value) {\n this.inputElement.value = this.dateElement.formatDate(\n this.dateElement.parseDate(this.value),\n this.dateElement.altFormat\n );\n this.dateElement.setDate(this.value);\n }\n\n this.loading = false;\n }, 0);\n }\n\n private handleClear(event: any): void {\n event.stopPropagation();\n event.preventDefault();\n this.setValue(null);\n }\n\n private updateValue(value: string): void {\n const cursorStart = this.inputElement.selectionStart;\n const cursorEnd = this.inputElement.selectionEnd;\n\n const sanitized = this.sanitizeGSM(value);\n\n if (sanitized !== value) {\n this.cursorStart = cursorStart;\n this.cursorEnd = cursorEnd;\n }\n\n this.value = sanitized;\n\n if (this.textarea) {\n this.inputElement.value = this.value;\n }\n\n if (this.counterElement) {\n this.counterElement.text = value;\n }\n }\n\n private sanitizeGSM(text: string): string {\n return this.gsm ? sanitize(text) : text;\n }\n\n private handleChange(update: any): void {\n if (this.disabled) {\n return;\n }\n this.updateValue(update.target.value);\n this.fireEvent('change');\n }\n\n private handleDateClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.dateElement.open();\n this.dateElement.focus();\n }\n\n private handleContainerClick(): void {\n if (this.disabled) {\n return;\n }\n\n if (this.inputElement) {\n this.inputElement.focus();\n } else {\n this.handleDateClick();\n }\n }\n\n private handleInput(update: any): void {\n if (this.disabled) {\n return;\n }\n\n this.updateValue(update.target.value);\n this.setValues([this.value]);\n this.fireEvent('input');\n }\n\n /** we just return the value since it should be a string */\n public serializeValue(value: any): string {\n return value;\n }\n\n public getParentModax(): Modax {\n let parent = this as HTMLElement;\n\n while (parent) {\n if (parent.parentElement) {\n parent = parent.parentElement;\n } else {\n parent = (parent as any).getRootNode().host;\n }\n\n if (!parent) {\n return null;\n }\n\n if (parent.tagName == 'TEMBA-MODAX') {\n return parent as Modax;\n }\n }\n }\n\n public getParentForm(): HTMLFormElement {\n let parent = this as HTMLElement;\n\n while (parent) {\n if (parent.parentElement) {\n parent = parent.parentElement;\n } else {\n parent = (parent as any).getRootNode().host;\n }\n\n if (!parent) {\n return null;\n }\n\n if (parent.tagName === 'FORM') {\n return parent as HTMLFormElement;\n }\n }\n }\n\n public click(): void {\n super.click();\n this.handleContainerClick();\n }\n\n // TODO make this a formelement and have contactsearch set the root\n public render(): TemplateResult {\n const containerStyle = {\n height: `${this.textarea ? '100%' : 'auto'}`,\n };\n\n const clear =\n this.clearable && this.inputElement && this.inputElement.value\n ? html`<temba-icon\n name=\"x\"\n class=\"clear-icon\"\n @click=${this.handleClear}\n />`\n : null;\n\n let input = html`\n <input\n class=\"textinput\"\n name=${this.name}\n type=\"${this.password ? 'password' : 'text'}\"\n maxlength=\"${ifDefined(this.maxlength)}\"\n @change=${this.handleChange}\n @input=${this.handleInput}\n @blur=${this.blur}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const input = this;\n\n if (this.submitOnEnter) {\n const parentModax = input.getParentModax();\n const parentForm = !parentModax ? input.getParentForm() : null;\n\n this.value = this.values[0];\n this.fireEvent('change');\n\n // if we don't have something to submit then bail\n if (!parentModax && !parentForm) {\n return false;\n }\n\n input.blur();\n\n // look for a form to submit\n window.setTimeout(function () {\n // first, look for a modax that contains us\n const modax = input.getParentModax();\n if (modax) {\n input.blur();\n\n modax.submit();\n } else {\n // otherwise, just look for a vanilla submit button\n const form = input.getParentForm();\n\n if (form) {\n const submitButton = form.querySelector(\n \"input[type='submit']\"\n ) as HTMLInputElement;\n if (submitButton) {\n submitButton.click();\n } else {\n form.submit();\n }\n }\n }\n }, 10);\n // this is needed for firefox, would be nice to\n // find a way to do this with a callback instead\n }\n }\n }}\n placeholder=${this.placeholder}\n .value=${this.value}\n .disabled=${this.disabled}\n />\n `;\n\n if (this.textarea) {\n input = html`\n <textarea\n class=\"textinput\"\n name=${this.name}\n placeholder=${this.placeholder}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @blur=${this.blur}\n .value=${this.value}\n .disabled=${this.disabled}\n ></textarea>\n `;\n\n if (this.autogrow) {\n input = html` <div class=\"grow-wrap\">\n <div></div>\n ${input}\n </div>`;\n }\n }\n\n if (this.datepicker \|\| this.datetimepicker) {\n input = html`\n <input\n class=\"textinput withdate ${this.loading ? 'loading' : ''}\"\n name=${this.name}\n type=\"text\"\n @click=${this.handleDateClick}\n @focus=${this.handleDateClick}\n @keydown=${(e: any) => {\n e.preventDefault();\n }}\n readonly=\"true\"\n placeholder=\"${this.placeholder}\"\n .value=\"${this.value}\"\n ?disabled=${this.disabled}\n />\n <lit-flatpickr\n class=\"datepicker hidden\"\n altInput\n altFormat=\"${this.datepicker ? 'F j, Y' : 'F j, Y h:i K'}\"\n dateFormat=\"${this.datepicker ? 'Y-m-d' : 'Y-m-d H:i'}\"\n .onValueUpdate=${this.onDateUpdated}\n .onReady=${this.onDateReady}\n ?enableTime=${this.datetimepicker}\n ></lit-flatpickr>\n `;\n }\n\n return html`\n <temba-field\n name=${this.name}\n .label=\"${this.label}\"\n .helpText=\"${this.helpText}\"\n .errors=${this.errors}\n .widgetOnly=${this.widgetOnly}\n .hideLabel=${this.hideLabel}\n .disabled=${this.disabled}\n >\n <div\n class=\"input-container\"\n style=${styleMap(containerStyle)}\n @click=${this.handleContainerClick}\n >\n ${input} ${clear}\n <slot></slot>\n </div>\n </temba-field>\n `;\n }\n}\n"]}

package/out-tsc/src/tip/Tip.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
-import { css, property } from 'lit-element';
-import { html } from 'lit-html';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators';
 import { styleMap } from 'lit-html/directives/style-map';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';

package/out-tsc/src/tip/Tip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tip.js","sourceRoot":"","sources":["../../../src/tip/Tip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,~~QAAQ~~,~~EAAE~~,MAAM,~~aAAa~~,CAAC;~~AAC5C~~,OAAO,EAAE,~~IAAI~~,~~EAAkB~~,MAAM,~~UAAU~~,CAAC;~~AAChD~~,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEjD,MAAM,OAAO,GAAI,SAAQ,YAAY;IAArC;;QA4DE,YAAO,GAAG,KAAK,CAAC;QAGhB,aAAQ,GAAG,MAAM,CAAC;QAgFlB,cAAS,GAAG,CAAC,CAAC;QACd,aAAQ,GAAG,CAAC,CAAC;IAwDf,CAAC;IAvMC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoDT,CAAC;IACJ,CAAC;IA+BM,OAAO,CAAC,OAAyB;QACtC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE;YACnE,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,EAAE;YAC5C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;IACH,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,qBAAqB,EAAE,CAAC;YAC9D,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,EAAE,CAAC;YAElE,uCAAuC;YACvC,IAAI,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC5B,IAAI,OAAO,KAAK,MAAM,EAAE;gBACtB,OAAO,GAAG,MAAM,CAAC;aAClB;YAED,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YAElB,IAAI,OAAO,KAAK,MAAM,EAAE;gBACtB,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,GAAG,EAAE,CAAC;gBACrD,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBAE9C,qBAAqB;gBACrB,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;aAClB;iBAAM,IAAI,OAAO,KAAK,OAAO,EAAE;gBAC9B,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;gBACpC,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBAE9C,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;gBACpB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;aAClB;iBAAM,IAAI,OAAO,KAAK,KAAK,EAAE;gBAC5B,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,GAAG,GAAG,SAAS,CAAC,MAAM,GAAG,EAAE,CAAC;gBACpD,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBAE/C,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;gBACrC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;aAClB;iBAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;gBAC/B,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,MAAM,GAAG,EAAE,CAAC;gBACpC,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;gBAE/C,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;gBACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;aAClB;SACF;IACH,CAAC;IAKO,gBAAgB;QACtB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACtC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACvB,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,gBAAgB;QACtB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACnC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAEM,MAAM;QACX,MAAM,QAAQ,GAAQ;YACpB,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK;SAC3C,CAAC;QAEF,MAAM,UAAU,GAAQ;YACtB,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK;YACjD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,KAAK;SACrD,CAAC;QAEF,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QAAQ,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;SACpC;QAED,MAAM,OAAO,GAAG,UAAU,CAAC;YACzB,GAAG,EAAE,IAAI;YACT,IAAI,EAAE,IAAI,CAAC,OAAO;YAClB,GAAG,EAAE,IAAI,CAAC,SAAS;YACnB,gBAAgB,EAAE,IAAI,CAAC,YAAY;SACpC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,gBAAgB;sBAChB,IAAI,CAAC,gBAAgB;sBACrB,IAAI,CAAC,gBAAgB;;;;oBAIvB,OAAO,WAAW,QAAQ,CAAC,QAAQ,CAAC;UAC9C,IAAI,CAAC,IAAI;4BACS,IAAI,CAAC,KAAK,WAAW,QAAQ,CAAC,UAAU,CAAC;YACzD,IAAI,CAAC,KAAK;;;KAGjB,CAAC;IACJ,CAAC;CACF;AA/IC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACN;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gCACjC;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iCAChC;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kCAC/B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sCAC3B","sourcesContent":["import { css, ~~property~~ } from 'lit~~-element~~';\nimport { ~~html,~~ ~~TemplateResult~~ } from 'lit~~-html~~';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { getCenter, getMiddle } from './helpers';\n\nexport class Tip extends RapidElement {\n static get styles() {\n return css`\n .tip {\n transition: opacity 200ms ease-in-out;\n margin: 0px;\n position: fixed;\n opacity: 0;\n background: #fff;\n padding: 4px 8px;\n pointer-events: none;\n border-radius: var(--curvature-widget);\n box-shadow: 0 1px 10px 10px rgba(0, 0, 0, 0.035),\n 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n font-size: 14px;\n z-index: 10000;\n color: #333;\n }\n\n .tip.hide-on-change {\n transition: none;\n }\n\n .show {\n opacity: 1;\n }\n\n .slot {\n display: flex;\n flex-direction: column;\n }\n\n .arrow {\n position: absolute;\n color: #fff;\n font-size: 10px;\n line-height: 0px;\n }\n\n .◀ {\n text-shadow: -1px 2px 2px rgba(0, 0, 0, 0.1);\n }\n\n .▶ {\n text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);\n }\n\n .▼ {\n text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);\n }\n\n .▲ {\n text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);\n }\n `;\n }\n @property({ type: String })\n text: string;\n\n @property({ type: Boolean })\n visible = false;\n\n @property({ type: String })\n position = 'auto';\n\n @property({ type: Boolean })\n hideOnChange: boolean;\n\n @property({ type: Number, attribute: false })\n top: number;\n\n @property({ type: Number, attribute: false })\n left: number;\n\n @property({ type: Number, attribute: false })\n width: number;\n\n @property({ type: Boolean, attribute: false })\n poppedTop: boolean;\n\n arrow: string;\n\n arrowTop: number;\n arrowLeft: number;\n arrowDirection: string;\n\n public updated(changed: Map<string, any>) {\n if ((changed.has('visible') \|\| changed.has('text')) && this.visible) {\n this.calculatePosition();\n }\n\n if (changed.has('text') && this.hideOnChange) {\n this.visible = false;\n }\n }\n\n private calculatePosition() {\n if (this.visible) {\n const tipBounds = this.getDiv('.tip').getBoundingClientRect();\n const anchorBounds = this.getDiv('.slot').getBoundingClientRect();\n\n // TODO: pick a direction automatically\n let tipSide = this.position;\n if (tipSide === 'auto') {\n tipSide = 'left';\n }\n\n this.arrowLeft = 0;\n this.arrowTop = 0;\n\n if (tipSide === 'left') {\n this.left = anchorBounds.left - tipBounds.width - 16;\n this.top = getMiddle(anchorBounds, tipBounds);\n\n // position our arrow\n this.arrowTop = tipBounds.height / 2;\n this.arrowLeft = tipBounds.width - 1;\n this.arrow = '▶';\n } else if (tipSide === 'right') {\n this.left = anchorBounds.right + 12;\n this.top = getMiddle(anchorBounds, tipBounds);\n\n this.arrowTop = tipBounds.height / 2;\n this.arrowLeft = -8;\n this.arrow = '◀';\n } else if (tipSide === 'top') {\n this.top = anchorBounds.top - tipBounds.height - 12;\n this.left = getCenter(anchorBounds, tipBounds);\n\n this.arrowTop = tipBounds.height + 2;\n this.arrowLeft = tipBounds.width / 2 - 4;\n this.arrow = '▼';\n } else if (tipSide === 'bottom') {\n this.top = anchorBounds.bottom + 10;\n this.left = getCenter(anchorBounds, tipBounds);\n\n this.arrowTop = -2;\n this.arrowLeft = tipBounds.width / 2 - 3;\n this.arrow = '▲';\n }\n }\n }\n\n lastEnter = 0;\n failSafe = 0;\n\n private handleMouseEnter() {\n this.lastEnter = window.setTimeout(() => {\n this.visible = true;\n this.failSafe = window.setTimeout(() => {\n this.visible = false;\n }, 2000);\n }, 600);\n }\n\n private handleMouseLeave() {\n window.clearTimeout(this.lastEnter);\n window.clearTimeout(this.failSafe);\n this.visible = false;\n }\n\n public render(): TemplateResult {\n const tipStyle: any = {\n top: this.top ? `${this.top}px` : '0px',\n left: this.left ? `${this.left}px` : '0px',\n };\n\n const arrowStyle: any = {\n top: this.arrowTop ? `${this.arrowTop}px` : '0px',\n left: this.arrowLeft ? `${this.arrowLeft}px` : '0px',\n };\n\n if (this.width) {\n tipStyle.width = `${this.width}px`;\n }\n\n const classes = getClasses({\n tip: true,\n show: this.visible,\n top: this.poppedTop,\n 'hide-on-change': this.hideOnChange,\n });\n\n return html`\n <div\n class=\"slot\"\n @click=${this.handleMouseLeave}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n >\n <slot></slot>\n </div>\n <div class=\"${classes}\" style=${styleMap(tipStyle)}>\n ${this.text}\n <div class=\"arrow ${this.arrow}\" style=${styleMap(arrowStyle)}>\n ${this.arrow}\n </div>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"Tip.js","sourceRoot":"","sources":["../../../src/tip/Tip.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators';\nimport { styleMap } from 'lit-html/directives/style-map';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { getCenter, getMiddle } from './helpers';\n\nexport class Tip extends RapidElement {\n static get styles() {\n return css`\n .tip {\n transition: opacity 200ms ease-in-out;\n margin: 0px;\n position: fixed;\n opacity: 0;\n background: #fff;\n padding: 4px 8px;\n pointer-events: none;\n border-radius: var(--curvature-widget);\n box-shadow: 0 1px 10px 10px rgba(0, 0, 0, 0.035),\n 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);\n font-size: 14px;\n z-index: 10000;\n color: #333;\n }\n\n .tip.hide-on-change {\n transition: none;\n }\n\n .show {\n opacity: 1;\n }\n\n .slot {\n display: flex;\n flex-direction: column;\n }\n\n .arrow {\n position: absolute;\n color: #fff;\n font-size: 10px;\n line-height: 0px;\n }\n\n .◀ {\n text-shadow: -1px 2px 2px rgba(0, 0, 0, 0.1);\n }\n\n .▶ {\n text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);\n }\n\n .▼ {\n text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);\n }\n\n .▲ {\n text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.1);\n }\n `;\n }\n @property({ type: String })\n text: string;\n\n @property({ type: Boolean })\n visible = false;\n\n @property({ type: String })\n position = 'auto';\n\n @property({ type: Boolean })\n hideOnChange: boolean;\n\n @property({ type: Number, attribute: false })\n top: number;\n\n @property({ type: Number, attribute: false })\n left: number;\n\n @property({ type: Number, attribute: false })\n width: number;\n\n @property({ type: Boolean, attribute: false })\n poppedTop: boolean;\n\n arrow: string;\n\n arrowTop: number;\n arrowLeft: number;\n arrowDirection: string;\n\n public updated(changed: Map<string, any>) {\n if ((changed.has('visible') \|\| changed.has('text')) && this.visible) {\n this.calculatePosition();\n }\n\n if (changed.has('text') && this.hideOnChange) {\n this.visible = false;\n }\n }\n\n private calculatePosition() {\n if (this.visible) {\n const tipBounds = this.getDiv('.tip').getBoundingClientRect();\n const anchorBounds = this.getDiv('.slot').getBoundingClientRect();\n\n // TODO: pick a direction automatically\n let tipSide = this.position;\n if (tipSide === 'auto') {\n tipSide = 'left';\n }\n\n this.arrowLeft = 0;\n this.arrowTop = 0;\n\n if (tipSide === 'left') {\n this.left = anchorBounds.left - tipBounds.width - 16;\n this.top = getMiddle(anchorBounds, tipBounds);\n\n // position our arrow\n this.arrowTop = tipBounds.height / 2;\n this.arrowLeft = tipBounds.width - 1;\n this.arrow = '▶';\n } else if (tipSide === 'right') {\n this.left = anchorBounds.right + 12;\n this.top = getMiddle(anchorBounds, tipBounds);\n\n this.arrowTop = tipBounds.height / 2;\n this.arrowLeft = -8;\n this.arrow = '◀';\n } else if (tipSide === 'top') {\n this.top = anchorBounds.top - tipBounds.height - 12;\n this.left = getCenter(anchorBounds, tipBounds);\n\n this.arrowTop = tipBounds.height + 2;\n this.arrowLeft = tipBounds.width / 2 - 4;\n this.arrow = '▼';\n } else if (tipSide === 'bottom') {\n this.top = anchorBounds.bottom + 10;\n this.left = getCenter(anchorBounds, tipBounds);\n\n this.arrowTop = -2;\n this.arrowLeft = tipBounds.width / 2 - 3;\n this.arrow = '▲';\n }\n }\n }\n\n lastEnter = 0;\n failSafe = 0;\n\n private handleMouseEnter() {\n this.lastEnter = window.setTimeout(() => {\n this.visible = true;\n this.failSafe = window.setTimeout(() => {\n this.visible = false;\n }, 2000);\n }, 600);\n }\n\n private handleMouseLeave() {\n window.clearTimeout(this.lastEnter);\n window.clearTimeout(this.failSafe);\n this.visible = false;\n }\n\n public render(): TemplateResult {\n const tipStyle: any = {\n top: this.top ? `${this.top}px` : '0px',\n left: this.left ? `${this.left}px` : '0px',\n };\n\n const arrowStyle: any = {\n top: this.arrowTop ? `${this.arrowTop}px` : '0px',\n left: this.arrowLeft ? `${this.arrowLeft}px` : '0px',\n };\n\n if (this.width) {\n tipStyle.width = `${this.width}px`;\n }\n\n const classes = getClasses({\n tip: true,\n show: this.visible,\n top: this.poppedTop,\n 'hide-on-change': this.hideOnChange,\n });\n\n return html`\n <div\n class=\"slot\"\n @click=${this.handleMouseLeave}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n >\n <slot></slot>\n </div>\n <div class=\"${classes}\" style=${styleMap(tipStyle)}>\n ${this.text}\n <div class=\"arrow ${this.arrow}\" style=${styleMap(arrowStyle)}>\n ${this.arrow}\n </div>\n </div>\n `;\n }\n}\n"]}

package/out-tsc/src/vectoricon/VectorIcon.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { property, LitElement, html, css } from 'lit-element';
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators';
 import { getClasses } from '../utils';
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 5;
+const ICON_VERSION = 6;
 export class VectorIcon extends LitElement {
     constructor() {
         super();
@@ -74,7 +75,7 @@ export class VectorIcon extends LitElement {
         display: flex;
         flex-direction: column;
         border-radius: 999px;
-        transition: background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
+        transition: background 200ms linear,
           transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),
           padding 150ms linear, margin 150ms linear;
       }
@@ -84,8 +85,14 @@ export class VectorIcon extends LitElement {
       }
       .wrapper.clickable:hover {
-        padding: 0.35em;
-        margin: -0.35em;
+        --icon-circle-size: 0.35em;
+        --icon-background: var(--icon-color-circle-hover);
+      }
+      .wrapper.clickable {
+        padding: var(--icon-circle-size);
+        margin: calc(-1 * var(--icon-circle-size));
+        background: var(--icon-background);
       }
     `;
     }
@@ -148,7 +155,9 @@ export class VectorIcon extends LitElement {
         })}"
         >
           <use
-            href="/sitestatic/icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this
+            href="${this.prefix ||
+            window.static_url ||
+            '/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this
             .lastName ||
             this.name ||
             this.id}"
@@ -161,6 +170,9 @@ export class VectorIcon extends LitElement {
 __decorate([
     property({ type: String })
 ], VectorIcon.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], VectorIcon.prototype, "prefix", void 0);
 __decorate([
     property({ type: String })
 ], VectorIcon.prototype, "id", void 0);

package/out-tsc/src/vectoricon/VectorIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,~~QAAQ,EAAE,~~UAAU,EAAkB,IAAI,EAAE,GAAG,EAAE,MAAM,~~aAAa~~,CAAC;~~AAE9E~~,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,4DAA4D;AAC5D,MAAM,YAAY,GAAG,CAAC,CAAC;AAEvB,MAAM,OAAO,UAAW,SAAQ,UAAU;~~IA+GxC~~;QACE,KAAK,EAAE,CAAC;~~QAvGV~~,SAAI,GAAG,CAAC,CAAC;QAYT,sBAAiB,GAAG,GAAG,CAAC;QAGxB,UAAK,GAAG,CAAC,CAAC;QAMV,WAAM,GAAG,wCAAwC,CAAC;~~IAmFlD~~,CAAC;~~IAjFD~~,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2ET~~,CAAC;IACJ,CAAC;IAQM,YAAY,CAAC,OAAyB;QAC3C,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5B,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChC,0CAA0C;YAC1C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE;gBACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC;aAC9D;YAED,IAAI,IAAI,CAAC,aAAa,KAAK,MAAM,EAAE;gBACjC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;gBACf,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC;gBAC7B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;aACxB;SACF;IACH,CAAC;IAEM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;YAChC,6CAA6C;YAC7C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;gBACzD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;YAED,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,EAAE;oBAC7D,IAAI,CAAC,aAAa,EAAE,CAAC;iBACtB;qBAAM;oBACL,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;iBACxB;YACH,CAAC,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;SACzC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;YAC7C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAEpC,oCAAoC;YACpC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE;gBACvC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;aACxB;SACF;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;yBAEU,UAAU,CAAC;YAC1B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa;SAC9B,CAAC;;;0BAGgB,IAAI,CAAC,IAAI,YAAY,IAAI;aACtC,IAAI,2BAA2B,IAAI,CAAC,iBAAiB;YACxD,IAAI,CAAC,KAAK;YACR,IAAI,CAAC,MAAM;mBACJ,UAAU,CAAC;YAClB,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa;YAC1C,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC,EAC7C,IAAI,CAAC,aAAa,GAAG,CAAC;SACzB,CAAC;;;~~wDAG4C~~,YAAY,SAAS,IAAI;~~aAClE~~,QAAQ;YACX,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,EAAE;;;;KAId,CAAC;IACJ,CAAC;CACF;~~AA9LC~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACd;~~AAIb~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAChB;AAGX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACT;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACX;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACL;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACH;AAGxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACnC;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDACvB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACuB","sourcesContent":["import { ~~property,~~ LitElement, TemplateResult, html, css } from 'lit~~-element~~';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 5;\n\nexport class VectorIcon extends LitElement {\n @property({ type: String })\n name: string;\n\n // same as name but without implicit coloring\n @property({ type: String })\n id: string;\n\n @property({ type: Number })\n size = 1;\n\n @property({ type: Boolean })\n clickable: boolean;\n\n @property({ type: Boolean })\n circled: boolean;\n\n @property({ type: String })\n animateChange: string;\n\n @property({ type: Number })\n animationDuration = 200;\n\n @property({ type: Number, attribute: false })\n steps = 2;\n\n @property({ type: Number, attribute: false })\n animationStep: number;\n\n @property({ type: String })\n easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n static get styles() {\n return css`\n :host {\n margin: auto;\n --color1: var(--icon-color);\n }\n\n :host([id='flow']),\n :host([name='flow']) {\n padding-bottom: 0.2em;\n }\n\n svg {\n fill: var(--icon-color);\n transform: scale(1);\n transition: fill 100ms ease-in-out,\n background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n }\n\n svg.spin {\n transform: rotate(0deg);\n }\n\n svg.spin-1 {\n transform: rotate(180deg);\n }\n\n svg.spin-2 {\n transform: rotate(360deg);\n }\n\n svg.spin-3 {\n transform: rotate(0deg);\n transition-duration: 0ms !important;\n }\n\n svg.pulse {\n transform: scale(1);\n }\n\n svg.pulse-1 {\n transform: scale(1.2);\n }\n\n .clickable:hover {\n cursor: pointer;\n fill: var(--color-link-primary);\n background: rgb(255, 255, 255);\n }\n\n .circled {\n background: rgb(240, 240, 240);\n padding: 0.15em;\n margin: -0.15em;\n box-shadow: var(--shadow);\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n border-radius: 999px;\n transition: background 200ms ~~cubic-bezier(0.68, -0.55, 0.265, 1.55)~~,\n transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 150ms linear, margin 150ms linear;\n }\n\n .wrapper.clickable {\n transform: scale(1);\n }\n\n .wrapper.clickable:hover {\n ~~padding~~: 0.35em;\n ~~margin~~: -0.~~35em~~;\n }\n `;\n }\n\n constructor() {\n super();\n }\n\n private lastName: string;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n if (changes.has('animateChange')) {\n // set our default duration if we need one\n if (!changes.has('animationDuration')) {\n this.animationDuration = this.steps * this.animationDuration;\n }\n\n if (this.animateChange === 'spin') {\n this.steps = 3;\n this.animationDuration = 400;\n this.easing = 'linear';\n }\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('animationStep')) {\n // if we are halfway through, change the icon\n if (this.lastName && this.animationStep >= this.steps / 2) {\n this.lastName = null;\n this.requestUpdate();\n }\n\n setTimeout(() => {\n if (this.animationStep > 0 && this.animationStep < this.steps) {\n this.animationStep++;\n } else {\n this.animationStep = 0;\n }\n }, this.animationDuration / this.steps);\n }\n\n if (changes.has('name') && this.animateChange) {\n this.lastName = changes.get('name');\n\n // our name changed, lets animate it\n if (this.lastName && this.animateChange) {\n this.animationStep = 1;\n }\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div\n class=\"wrapper ${getClasses({\n clickable: this.clickable,\n circled: this.circled,\n animate: !!this.animateChange,\n })}\"\n >\n <svg\n style=\"height:${this.size}em;width:${this\n .size}em;transition:transform ${this.animationDuration /\n this.steps}ms\n ${this.easing}\"\n class=\"${getClasses({\n [this.animateChange]: !!this.animateChange,\n [this.animateChange + '-' + this.animationStep]:\n this.animationStep > 0,\n })}\"\n >\n <use\n href=\"/~~sitestatic~~/icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this\n .lastName \|\|\n this.name \|\|\n this.id}\"\n />\n </svg>\n </div>\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"VectorIcon.js","sourceRoot":"","sources":["../../../src/vectoricon/VectorIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators';\n\nimport { getClasses } from '../utils';\n\n// for cache busting, increase whenever the icon set changes\nconst ICON_VERSION = 6;\n\nexport class VectorIcon extends LitElement {\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n prefix: string;\n\n // same as name but without implicit coloring\n @property({ type: String })\n id: string;\n\n @property({ type: Number })\n size = 1;\n\n @property({ type: Boolean })\n clickable: boolean;\n\n @property({ type: Boolean })\n circled: boolean;\n\n @property({ type: String })\n animateChange: string;\n\n @property({ type: Number })\n animationDuration = 200;\n\n @property({ type: Number, attribute: false })\n steps = 2;\n\n @property({ type: Number, attribute: false })\n animationStep: number;\n\n @property({ type: String })\n easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';\n\n static get styles() {\n return css`\n :host {\n margin: auto;\n --color1: var(--icon-color);\n }\n\n :host([id='flow']),\n :host([name='flow']) {\n padding-bottom: 0.2em;\n }\n\n svg {\n fill: var(--icon-color);\n transform: scale(1);\n transition: fill 100ms ease-in-out,\n background 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n }\n\n svg.spin {\n transform: rotate(0deg);\n }\n\n svg.spin-1 {\n transform: rotate(180deg);\n }\n\n svg.spin-2 {\n transform: rotate(360deg);\n }\n\n svg.spin-3 {\n transform: rotate(0deg);\n transition-duration: 0ms !important;\n }\n\n svg.pulse {\n transform: scale(1);\n }\n\n svg.pulse-1 {\n transform: scale(1.2);\n }\n\n .clickable:hover {\n cursor: pointer;\n fill: var(--color-link-primary);\n background: rgb(255, 255, 255);\n }\n\n .circled {\n background: rgb(240, 240, 240);\n padding: 0.15em;\n margin: -0.15em;\n box-shadow: var(--shadow);\n }\n\n .wrapper {\n display: flex;\n flex-direction: column;\n border-radius: 999px;\n transition: background 200ms linear,\n transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55),\n padding 150ms linear, margin 150ms linear;\n }\n\n .wrapper.clickable {\n transform: scale(1);\n }\n\n .wrapper.clickable:hover {\n --icon-circle-size: 0.35em;\n --icon-background: var(--icon-color-circle-hover);\n }\n\n .wrapper.clickable {\n padding: var(--icon-circle-size);\n margin: calc(-1 * var(--icon-circle-size));\n background: var(--icon-background);\n }\n `;\n }\n\n constructor() {\n super();\n }\n\n private lastName: string;\n\n public firstUpdated(changes: Map<string, any>) {\n super.firstUpdated(changes);\n if (changes.has('animateChange')) {\n // set our default duration if we need one\n if (!changes.has('animationDuration')) {\n this.animationDuration = this.steps * this.animationDuration;\n }\n\n if (this.animateChange === 'spin') {\n this.steps = 3;\n this.animationDuration = 400;\n this.easing = 'linear';\n }\n }\n }\n\n public updated(changes: Map<string, any>) {\n super.updated(changes);\n\n if (changes.has('animationStep')) {\n // if we are halfway through, change the icon\n if (this.lastName && this.animationStep >= this.steps / 2) {\n this.lastName = null;\n this.requestUpdate();\n }\n\n setTimeout(() => {\n if (this.animationStep > 0 && this.animationStep < this.steps) {\n this.animationStep++;\n } else {\n this.animationStep = 0;\n }\n }, this.animationDuration / this.steps);\n }\n\n if (changes.has('name') && this.animateChange) {\n this.lastName = changes.get('name');\n\n // our name changed, lets animate it\n if (this.lastName && this.animateChange) {\n this.animationStep = 1;\n }\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div\n class=\"wrapper ${getClasses({\n clickable: this.clickable,\n circled: this.circled,\n animate: !!this.animateChange,\n })}\"\n >\n <svg\n style=\"height:${this.size}em;width:${this\n .size}em;transition:transform ${this.animationDuration /\n this.steps}ms\n ${this.easing}\"\n class=\"${getClasses({\n [this.animateChange]: !!this.animateChange,\n [this.animateChange + '-' + this.animationStep]:\n this.animationStep > 0,\n })}\"\n >\n <use\n href=\"${this.prefix \|\|\n (window as any).static_url \|\|\n '/static/'}icons/symbol-defs.svg?v=${ICON_VERSION}#icon-${this\n .lastName \|\|\n this.name \|\|\n this.id}\"\n />\n </svg>\n </div>\n `;\n }\n}\n"]}

package/out-tsc/temba-modules.js CHANGED Viewed

@@ -22,6 +22,9 @@ import { Omnibox } from './src/omnibox/Omnibox';
 import { Tip } from './src/tip/Tip';
 import { TembaMenu } from './src/list/TembaMenu';
 import { Anchor } from './src/anchor/Anchor';
+import { Dropdown } from './src/dropdown/Dropdown';
+import { TabPane } from './src/tabpane/TabPane';
+import { Tab } from './src/tabpane/Tab';
 export function addCustomElement(name, comp) {
     if (!window.customElements.get(name)) {
         window.customElements.define(name, comp);
@@ -51,4 +54,7 @@ addCustomElement('temba-list', TembaList);
 addCustomElement('temba-menu', TembaMenu);
 addCustomElement('temba-contact-search', ContactSearch);
 addCustomElement('temba-icon', VectorIcon);
+addCustomElement('temba-dropdown', Dropdown);
+addCustomElement('temba-tabs', TabPane);
+addCustomElement('temba-tab', Tab);
 //# sourceMappingURL=temba-modules.js.map

package/out-tsc/temba-modules.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"temba-modules.js","sourceRoot":"","sources":["../temba-modules.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;~~AAE7C~~,MAAM,UAAU,gBAAgB,CAAC,IAAY,EAAE,IAAS;IACtD,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACpC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KAC1C;AACH,CAAC;AAED,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACzC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;AACvC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;AACvC,gBAAgB,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;AAC/C,gBAAgB,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;AACjD,gBAAgB,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;AAC7C,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACzC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAC3C,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAC3C,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACzC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAC3C,gBAAgB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AAEnC,gBAAgB,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;AAC3C,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AACzC,gBAAgB,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;AACvC,gBAAgB,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;AAC/C,gBAAgB,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;AAC1D,gBAAgB,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAC;AACpD,gBAAgB,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC;AAC1D,gBAAgB,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC;AAClD,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAC1C,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;AAC1C,gBAAgB,CAAC,sBAAsB,EAAE,aAAa,CAAC,CAAC;AACxD,gBAAgB,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC","sourcesContent":["import { Checkbox } from './src/checkbox/Checkbox';\nimport { TextInput } from './src/textinput/TextInput';\nimport { Store } from './src/store/Store';\nimport { Select } from './src/select/Select';\nimport { Completion } from './src/completion/Completion';\nimport { Modax } from './src/dialog/Modax';\nimport { Dialog } from './src/dialog/Dialog';\nimport { Button } from './src/button/Button';\nimport { FormField } from './src/formfield/FormField';\nimport { Loading } from './src/loading/Loading';\nimport { CharCount } from './src/charcount/CharCount';\nimport { Options } from './src/options/Options';\nimport { ContactChat } from './src/contacts/ContactChat';\nimport { ContactHistory } from './src/contacts/ContactHistory';\nimport { TicketList } from './src/list/TicketList';\nimport { ContactDetails } from './src/contacts/ContactDetails';\nimport { TembaList } from './src/list/TembaList';\nimport { ContactSearch } from './src/contactsearch/ContactSearch';\nimport { VectorIcon } from './src/vectoricon/VectorIcon';\nimport { Alert } from './src/alert/Alert';\nimport { Omnibox } from './src/omnibox/Omnibox';\nimport { Tip } from './src/tip/Tip';\nimport { TembaMenu } from './src/list/TembaMenu';\nimport { Anchor } from './src/anchor/Anchor';\n\nexport function addCustomElement(name: string, comp: any) {\n if (!window.customElements.get(name)) {\n window.customElements.define(name, comp);\n }\n}\n\naddCustomElement('temba-anchor', Anchor);\naddCustomElement('temba-alert', Alert);\naddCustomElement('temba-store', Store);\naddCustomElement('temba-textinput', TextInput);\naddCustomElement('temba-completion', Completion);\naddCustomElement('temba-checkbox', Checkbox);\naddCustomElement('temba-select', Select);\naddCustomElement('temba-options', Options);\naddCustomElement('temba-loading', Loading);\naddCustomElement('temba-button', Button);\naddCustomElement('temba-omnibox', Omnibox);\naddCustomElement('temba-tip', Tip);\n\naddCustomElement('temba-field', FormField);\naddCustomElement('temba-dialog', Dialog);\naddCustomElement('temba-modax', Modax);\naddCustomElement('temba-charcount', CharCount);\naddCustomElement('temba-contact-history', ContactHistory);\naddCustomElement('temba-contact-chat', ContactChat);\naddCustomElement('temba-contact-details', ContactDetails);\naddCustomElement('temba-ticket-list', TicketList);\naddCustomElement('temba-list', TembaList);\naddCustomElement('temba-menu', TembaMenu);\naddCustomElement('temba-contact-search', ContactSearch);\naddCustomElement('temba-icon', VectorIcon);\n"]}
1	+ {"version":3,"file":"temba-modules.js","sourceRoot":"","sources":["../temba-modules.ts"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox } from './src/checkbox/Checkbox';\nimport { TextInput } from './src/textinput/TextInput';\nimport { Store } from './src/store/Store';\nimport { Select } from './src/select/Select';\nimport { Completion } from './src/completion/Completion';\nimport { Modax } from './src/dialog/Modax';\nimport { Dialog } from './src/dialog/Dialog';\nimport { Button } from './src/button/Button';\nimport { FormField } from './src/formfield/FormField';\nimport { Loading } from './src/loading/Loading';\nimport { CharCount } from './src/charcount/CharCount';\nimport { Options } from './src/options/Options';\nimport { ContactChat } from './src/contacts/ContactChat';\nimport { ContactHistory } from './src/contacts/ContactHistory';\nimport { TicketList } from './src/list/TicketList';\nimport { ContactDetails } from './src/contacts/ContactDetails';\nimport { TembaList } from './src/list/TembaList';\nimport { ContactSearch } from './src/contactsearch/ContactSearch';\nimport { VectorIcon } from './src/vectoricon/VectorIcon';\nimport { Alert } from './src/alert/Alert';\nimport { Omnibox } from './src/omnibox/Omnibox';\nimport { Tip } from './src/tip/Tip';\nimport { TembaMenu } from './src/list/TembaMenu';\nimport { Anchor } from './src/anchor/Anchor';\nimport { Dropdown } from './src/dropdown/Dropdown';\nimport { TabPane } from './src/tabpane/TabPane';\nimport { Tab } from './src/tabpane/Tab';\n\nexport function addCustomElement(name: string, comp: any) {\n if (!window.customElements.get(name)) {\n window.customElements.define(name, comp);\n }\n}\n\naddCustomElement('temba-anchor', Anchor);\naddCustomElement('temba-alert', Alert);\naddCustomElement('temba-store', Store);\naddCustomElement('temba-textinput', TextInput);\naddCustomElement('temba-completion', Completion);\naddCustomElement('temba-checkbox', Checkbox);\naddCustomElement('temba-select', Select);\naddCustomElement('temba-options', Options);\naddCustomElement('temba-loading', Loading);\naddCustomElement('temba-button', Button);\naddCustomElement('temba-omnibox', Omnibox);\naddCustomElement('temba-tip', Tip);\n\naddCustomElement('temba-field', FormField);\naddCustomElement('temba-dialog', Dialog);\naddCustomElement('temba-modax', Modax);\naddCustomElement('temba-charcount', CharCount);\naddCustomElement('temba-contact-history', ContactHistory);\naddCustomElement('temba-contact-chat', ContactChat);\naddCustomElement('temba-contact-details', ContactDetails);\naddCustomElement('temba-ticket-list', TicketList);\naddCustomElement('temba-list', TembaList);\naddCustomElement('temba-menu', TembaMenu);\naddCustomElement('temba-contact-search', ContactSearch);\naddCustomElement('temba-icon', VectorIcon);\naddCustomElement('temba-dropdown', Dropdown);\naddCustomElement('temba-tabs', TabPane);\naddCustomElement('temba-tab', Tab);\n"]}

package/out-tsc/test/temba-contact-history.test.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { assertScreenshot, getClip, getHTML, mockGET, } from '../test/utils.test
 import './utils.test';
 export const createHistory = async (def) => {
     const parentNode = document.createElement('div');
-    parentNode.setAttribute('style', 'width: 500px;height:750px;display:flex;flex-direction:column');
+    parentNode.setAttribute('style', 'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;');
     const history = (await fixture(def, { parentNode }));
     // let history fetch start and wait for it
     await waitFor(0);
@@ -16,7 +16,9 @@ export const createHistory = async (def) => {
     await history.httpComplete;
     return history;
 };
-const getHistoryHTML = (attrs = {}) => getHTML('temba-contact-history', attrs);
+const getHistoryHTML = (attrs = {}) =>
+// attrs = "min-height:0;display:flex;flex-grow:1;flex-direction:column";
+getHTML('temba-contact-history', attrs);
 const getHistoryClip = (ele) => {
     const clip = getClip(ele);
     clip.height = Math.min(clip.height, 750);
@@ -44,9 +46,9 @@ describe('temba-contact-history', () => {
         // we should have scrolled to the bottom
         const events = history.shadowRoot.querySelector('.events');
         const top = events.scrollHeight - events.getBoundingClientRect().height;
-        expect(top).to.equal(218);
+        expect(top).to.equal(539);
         // make sure we actually scrolled to there
-        expect(events.scrollTop).to.equal(top - 1);
+        expect(events.scrollTop).to.equal(top - 4);
         await assertScreenshot('contacts/history', getHistoryClip(history));
     });
     it('expands event groups', async () => {
@@ -54,11 +56,12 @@ describe('temba-contact-history', () => {
             uuid: '1234',
         }));
         // our groups with collapsed events
-        const groups = [3, 11];
+        const groups = [3, 5, 7];
         for (const idx of groups) {
-            const group = history.shadowRoot.querySelector(`[data-group-index='${idx}']`);
+            const group = history.shadowRoot.querySelector(`.event-count[data-group-index='${idx}']`);
             group.click();
         }
+        await waitFor(500);
         await assertScreenshot('contacts/history-expanded', getHistoryClip(history));
     });
 });

package/out-tsc/test/temba-contact-history.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"temba-contact-history.test.js","sourceRoot":"","sources":["../../test/temba-contact-history.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EACL,gBAAgB,EAChB,OAAO,EACP,OAAO,EACP,OAAO,GACR,MAAM,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAAE,GAAW,EAAE,EAAE;IACjD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,YAAY,CACrB,OAAO,EACP,~~8DAA8D~~,~~CAC/D~~,CAAC;IACF,MAAM,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,EAAE,EAAE,UAAU,EAAE,CAAC,CAAmB,CAAC;IAEvE,0CAA0C;IAC1C,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,OAAO,CAAC,YAAY,CAAC;IAE3B,yBAAyB;IACzB,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,OAAO,CAAC,YAAY,CAAC;IAE3B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,QAAa,~~EAAE~~,EAAE,EAAE,~~CACzC~~,OAAO,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;AAE1C,MAAM,cAAc,GAAG,CAAC,GAAmB,EAAE,EAAE;IAC7C,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;IACrC,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,mDAAmD;AACnD,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE;IACrD,OAAO,IAAI,IAAI,CAAC,+BAA+B,CAAC,CAAC;AACnD,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,CACL,8BAA8B,EAC9B,oCAAoC,CACrC,CAAC;QAEF,OAAO,CACL,wCAAwC,EACxC,+BAA+B,CAChC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,OAAO,GAAG,MAAM,aAAa,CAAC,cAAc,EAAE,CAAC,CAAC;QACtD,MAAM,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,OAAO,GAAG,MAAM,aAAa,CACjC,cAAc,CAAC;YACb,IAAI,EAAE,MAAM;SACb,CAAC,CACH,CAAC;QAEF,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;QAEnB,wCAAwC;QACxC,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;QAC3D,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;~~QACxE~~,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAE1B,0CAA0C;QAC1C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAE3C,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,OAAO,GAAG,MAAM,aAAa,CACjC,cAAc,CAAC;YACb,IAAI,EAAE,MAAM;SACb,CAAC,CACH,CAAC;QAEF,mCAAmC;QACnC,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;~~QACvB~~,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;YACxB,MAAM,KAAK,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAC5C,~~sBAAsB~~,GAAG,IAAI,~~CACZ~~,CAAC;YACpB,KAAK,CAAC,KAAK,EAAE,CAAC;SACf;QAED,MAAM,gBAAgB,CACpB,2BAA2B,EAC3B,cAAc,CAAC,OAAO,CAAC,CACxB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { ContactHistory } from '../src/contacts/ContactHistory';\nimport { stubbable } from '../src/utils';\nimport {\n assertScreenshot,\n getClip,\n getHTML,\n mockGET,\n} from '../test/utils.test';\nimport './utils.test';\n\nexport const createHistory = async (def: string) => {\n const parentNode = document.createElement('div');\n parentNode.setAttribute(\n 'style',\n 'width: 500px;height:750px;display:flex;flex-direction:column'\n );\n const history = (await fixture(def, { parentNode })) as ContactHistory;\n\n // let history fetch start and wait for it\n await waitFor(0);\n await history.httpComplete;\n\n // wait for scroll update\n await waitFor(0);\n await history.httpComplete;\n\n return history;\n};\n\nconst getHistoryHTML = (attrs: any = {}) =>\n getHTML('temba-contact-history', attrs);\n\nconst getHistoryClip = (ele: ContactHistory) => {\n const clip = getClip(ele);\n clip.height = Math.min(clip.height, 750);\n clip.bottom = clip.top + clip.height;\n return clip;\n};\n\n// stub our current date for consistent screenshots\nsinon.stub(stubbable, 'getCurrentDate').callsFake(() => {\n return new Date('2021-03-31T00:00:00.000-00:00');\n});\n\ndescribe('temba-contact-history', () => {\n beforeEach(() => {\n mockGET(\n /\\/contact\\/history\\/1234\\/.*/,\n '/test-assets/contacts/history.json'\n );\n\n mockGET(\n /\\/api\\/v2\\/tickets\\.json\\?contact=1234/,\n '/test-assets/api/tickets.json'\n );\n });\n\n it('can be created', async () => {\n const history = await createHistory(getHistoryHTML());\n assert.instanceOf(history, ContactHistory);\n });\n\n it('renders history', async () => {\n const history = await createHistory(\n getHistoryHTML({\n uuid: '1234',\n })\n );\n\n await waitFor(500);\n\n // we should have scrolled to the bottom\n const events = history.shadowRoot.querySelector('.events');\n const top = events.scrollHeight - events.getBoundingClientRect().height;\n expect(top).to.equal(~~218~~);\n\n // make sure we actually scrolled to there\n expect(events.scrollTop).to.equal(top - 1);\n\n await assertScreenshot('contacts/history', getHistoryClip(history));\n });\n\n it('expands event groups', async () => {\n const history = await createHistory(\n getHistoryHTML({\n uuid: '1234',\n })\n );\n\n // our groups with collapsed events\n const groups = [3, 11];\n for (const idx of groups) {\n const group = history.shadowRoot.querySelector(\n `[data-group-index='${idx}']`\n ) as HTMLDivElement;\n group.click();\n }\n\n await assertScreenshot(\n 'contacts/history-expanded',\n getHistoryClip(history)\n );\n });\n});\n"]}
1	+ {"version":3,"file":"temba-contact-history.test.js","sourceRoot":"","sources":["../../test/temba-contact-history.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, assert, expect } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { ContactHistory } from '../src/contacts/ContactHistory';\nimport { stubbable } from '../src/utils';\nimport {\n assertScreenshot,\n getClip,\n getHTML,\n mockGET,\n} from '../test/utils.test';\nimport './utils.test';\n\nexport const createHistory = async (def: string) => {\n const parentNode = document.createElement('div');\n parentNode.setAttribute(\n 'style',\n 'width: 500px;height:750px;display:flex;flex-direction:column;flex-grow:1;min-height:0;'\n );\n const history = (await fixture(def, { parentNode })) as ContactHistory;\n\n // let history fetch start and wait for it\n await waitFor(0);\n await history.httpComplete;\n\n // wait for scroll update\n await waitFor(0);\n await history.httpComplete;\n\n return history;\n};\n\nconst getHistoryHTML = (attrs: any = {} as any) =>\n // attrs = \"min-height:0;display:flex;flex-grow:1;flex-direction:column\";\n getHTML('temba-contact-history', attrs);\n\nconst getHistoryClip = (ele: ContactHistory) => {\n const clip = getClip(ele);\n clip.height = Math.min(clip.height, 750);\n clip.bottom = clip.top + clip.height;\n return clip;\n};\n\n// stub our current date for consistent screenshots\nsinon.stub(stubbable, 'getCurrentDate').callsFake(() => {\n return new Date('2021-03-31T00:00:00.000-00:00');\n});\n\ndescribe('temba-contact-history', () => {\n beforeEach(() => {\n mockGET(\n /\\/contact\\/history\\/1234\\/.*/,\n '/test-assets/contacts/history.json'\n );\n\n mockGET(\n /\\/api\\/v2\\/tickets\\.json\\?contact=1234/,\n '/test-assets/api/tickets.json'\n );\n });\n\n it('can be created', async () => {\n const history = await createHistory(getHistoryHTML());\n assert.instanceOf(history, ContactHistory);\n });\n\n it('renders history', async () => {\n const history = await createHistory(\n getHistoryHTML({\n uuid: '1234',\n })\n );\n\n await waitFor(500);\n\n // we should have scrolled to the bottom\n const events = history.shadowRoot.querySelector('.events');\n const top = events.scrollHeight - events.getBoundingClientRect().height;\n\n expect(top).to.equal(539);\n\n // make sure we actually scrolled to there\n expect(events.scrollTop).to.equal(top - 4);\n\n await assertScreenshot('contacts/history', getHistoryClip(history));\n });\n\n it('expands event groups', async () => {\n const history = await createHistory(\n getHistoryHTML({\n uuid: '1234',\n })\n );\n\n // our groups with collapsed events\n const groups = [3, 5, 7];\n for (const idx of groups) {\n const group = history.shadowRoot.querySelector(\n `.event-count[data-group-index='${idx}']`\n ) as HTMLDivElement;\n group.click();\n }\n\n await waitFor(500);\n\n await assertScreenshot(\n 'contacts/history-expanded',\n getHistoryClip(history)\n );\n });\n});\n"]}

package/out-tsc/test/temba-dialog.test.js CHANGED Viewed

@@ -8,7 +8,7 @@ const getDialogClip = (dialog) => {
 const getDialogHTML = (hideOnClick = false) => {
     return `
     <temba-dialog header="Hello Dialog" ${hideOnClick ? 'hideOnClick' : ''}>
-      <textarea name="comment" style="margin: 10px"></textarea>
+      <input name="comment" type="text" style="margin: 10px"/>
     </temba-dialog>
   `;
 };
@@ -68,8 +68,8 @@ describe('temba-dialog', () => {
     it('focuses the first text input', async () => {
         const dialog = await fixture(getDialogHTML());
         await open(dialog);
-        const textarea = dialog.querySelector('textarea');
-        expect(document.activeElement).to.equal(textarea);
+        const input = dialog.querySelector('input');
+        expect(document.activeElement).to.equal(input);
         await assertScreenshot('dialog/focused', getDialogClip(dialog));
     });
     it('hides on click', async () => {

package/out-tsc/test/temba-dialog.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"temba-dialog.test.js","sourceRoot":"","sources":["../../test/temba-dialog.test.ts"],"names":[],"mappings":"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~~QAAQ~~,GAAG,MAAM,CAAC,aAAa,CAAC,~~UAAU~~,CAAC,CAAC;~~QAClD~~,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,~~QAAQ~~,CAAC,CAAC;~~QAClD~~,MAAM,gBAAgB,CAAC,gBAAgB,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK,IAAI,EAAE;QAC9B,MAAM,MAAM,GAAW,MAAM,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1D,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC;QAEnB,MAAM,IAAI,~~GAAmB~~,MAAM,CAAC,UAAU,CAAC,aAAa,~~CAC1D~~,cAAc,~~CACf~~,CAAC;~~QACF~~,IAAI,CAAC,KAAK,EAAE,CAAC;QAEb,MAAM,MAAM,CAAC,cAAc,CAAC;QAC5B,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iBAAiB,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,MAAM,GAAW,MAAM,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1D,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC;QACnB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEnC,0BAA0B;QAC1B,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACrE,OAAO,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;QACrE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { assert, expect, fixture } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { Dialog } from '../src/dialog/Dialog';\nimport { assertScreenshot, getClip } from './utils.test';\n\nconst getDialogClip = (dialog: Dialog) => {\n return getClip(\n dialog.shadowRoot.querySelector('.dialog-container') as HTMLElement\n );\n};\n\nconst getDialogHTML = (hideOnClick = false) => {\n return `\n <temba-dialog header=\"Hello Dialog\" ${hideOnClick ? 'hideOnClick' : ''}>\n <~~textarea~~ name=\"comment\" style=\"margin: 10px\"~~></textarea>\~~n </temba-dialog>\n `;\n};\n\nconst open = async (dialog: Dialog) => {\n const clock = sinon.useFakeTimers();\n dialog.open = true;\n\n await dialog.updateComplete;\n\n // our dialog will animate onto the screen\n clock.tick(400);\n await dialog.updateComplete;\n\n // gain focus for first text input\n clock.tick(100);\n await dialog.updateComplete;\n\n clock.restore();\n};\n\nconst close = async (dialog: Dialog) => {\n const clock = sinon.useFakeTimers();\n dialog.open = false;\n await dialog.updateComplete;\n\n // tick forward for close to complete\n clock.tick(400);\n\n clock.restore();\n};\n\ndescribe('temba-dialog', () => {\n it('can be created', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n assert.instanceOf(dialog, Dialog);\n });\n\n it('can be opened', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n expect(dialog.ready).to.equal(true);\n });\n\n it('can be closed by attribute', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n expect(dialog.ready).to.equal(true);\n dialog.open = false;\n });\n\n it('can be canceled', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n expect(dialog.ready).to.equal(true);\n\n dialog.getCancelButton().click();\n expect(dialog.open).to.equal(false);\n });\n\n it('restricts and restores background scrolling', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n const body = document.querySelector('body');\n expect(body.style.position).to.equal('fixed');\n\n await close(dialog);\n dialog.getCancelButton().click();\n await dialog.updateComplete;\n expect(body.style.position).to.equal('');\n });\n\n it('focuses the first text input', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n\n const ~~textarea~~ = dialog.querySelector('~~textarea~~');\n expect(document.activeElement).to.equal(~~textarea~~);\n await assertScreenshot('dialog/focused', getDialogClip(dialog));\n });\n\n it('hides on click', async () => {\n const dialog: Dialog = await fixture(getDialogHTML(true));\n await open(dialog);\n\n const mask: HTMLDivElement = dialog.shadowRoot.querySelector(\n '#dialog-mask'\n );\n mask.click();\n\n await dialog.updateComplete;\n expect(dialog.open).to.equal(false);\n });\n\n it('hides on escape', async () => {\n const dialog: Dialog = await fixture(getDialogHTML(true));\n await open(dialog);\n expect(dialog.open).to.equal(true);\n\n // simulate the escape key\n const element = dialog.shadowRoot.querySelector('.dialog-container');\n element.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));\n expect(dialog.open).to.equal(false);\n });\n});\n"]}
1	+ {"version":3,"file":"temba-dialog.test.js","sourceRoot":"","sources":["../../test/temba-dialog.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { assert, expect, fixture } from '@open-wc/testing';\nimport sinon from 'sinon';\nimport { Dialog } from '../src/dialog/Dialog';\nimport { assertScreenshot, getClip } from './utils.test';\n\nconst getDialogClip = (dialog: Dialog) => {\n return getClip(\n dialog.shadowRoot.querySelector('.dialog-container') as HTMLElement\n );\n};\n\nconst getDialogHTML = (hideOnClick = false) => {\n return `\n <temba-dialog header=\"Hello Dialog\" ${hideOnClick ? 'hideOnClick' : ''}>\n <input name=\"comment\" type=\"text\" style=\"margin: 10px\"/>\n </temba-dialog>\n `;\n};\n\nconst open = async (dialog: Dialog) => {\n const clock = sinon.useFakeTimers();\n dialog.open = true;\n\n await dialog.updateComplete;\n\n // our dialog will animate onto the screen\n clock.tick(400);\n await dialog.updateComplete;\n\n // gain focus for first text input\n clock.tick(100);\n await dialog.updateComplete;\n\n clock.restore();\n};\n\nconst close = async (dialog: Dialog) => {\n const clock = sinon.useFakeTimers();\n dialog.open = false;\n await dialog.updateComplete;\n\n // tick forward for close to complete\n clock.tick(400);\n\n clock.restore();\n};\n\ndescribe('temba-dialog', () => {\n it('can be created', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n assert.instanceOf(dialog, Dialog);\n });\n\n it('can be opened', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n expect(dialog.ready).to.equal(true);\n });\n\n it('can be closed by attribute', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n expect(dialog.ready).to.equal(true);\n dialog.open = false;\n });\n\n it('can be canceled', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n expect(dialog.ready).to.equal(true);\n\n dialog.getCancelButton().click();\n expect(dialog.open).to.equal(false);\n });\n\n it('restricts and restores background scrolling', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n const body = document.querySelector('body');\n expect(body.style.position).to.equal('fixed');\n\n await close(dialog);\n dialog.getCancelButton().click();\n await dialog.updateComplete;\n expect(body.style.position).to.equal('');\n });\n\n it('focuses the first text input', async () => {\n const dialog: Dialog = await fixture(getDialogHTML());\n await open(dialog);\n\n const input = dialog.querySelector('input');\n expect(document.activeElement).to.equal(input);\n await assertScreenshot('dialog/focused', getDialogClip(dialog));\n });\n\n it('hides on click', async () => {\n const dialog: Dialog = await fixture(getDialogHTML(true));\n await open(dialog);\n\n const mask: HTMLDivElement =\n dialog.shadowRoot.querySelector('#dialog-mask');\n mask.click();\n\n await dialog.updateComplete;\n expect(dialog.open).to.equal(false);\n });\n\n it('hides on escape', async () => {\n const dialog: Dialog = await fixture(getDialogHTML(true));\n await open(dialog);\n expect(dialog.open).to.equal(true);\n\n // simulate the escape key\n const element = dialog.shadowRoot.querySelector('.dialog-container');\n element.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));\n expect(dialog.open).to.equal(false);\n });\n});\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.25.2",
+  "version": "0.26.2",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -34,10 +34,9 @@
     "highlight.js": "^10.7.1",
     "image-size": "^0.9.7",
     "leaflet": "1.5.1",
-    "lit-element": "^2.0.1",
-    "lit-flatpickr": "^0.2.2",
-    "lit-html": "^1.0.0",
-    "marked": "0.7.0",
+    "lit": "2.2.0",
+    "lit-flatpickr": "^0.3",
+    "marked": "4.0.10",
     "remarkable": "^2.0.1",
     "serialize-javascript": "^3.0.0"
   },
@@ -46,7 +45,7 @@
     "@open-wc/building-rollup": "^1.0.0",
     "@open-wc/demoing-storybook": "2.4.7",
     "@open-wc/eslint-config": "4.2.0",
-    "@open-wc/testing": "^2.0.0",
+    "@open-wc/testing": "3.1.2",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@types/leaflet": "1.4.4",
     "@types/node": "13.11.1",
@@ -55,7 +54,7 @@
     "@typescript-eslint/parser": "4.0.0",
     "@web/dev-server": "^0.0.12",
     "@web/test-runner": "^0.7.41",
-    "@web/test-runner-puppeteer": "^0.9.3",
+    "@web/test-runner-puppeteer": "0.10.5",
     "auto-changelog": "^1.16.2",
     "concurrently": "^5.1.0",
     "deepmerge": "^4.2.2",
@@ -77,7 +76,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "sinon": "^9.2.4",
     "tslib": "^1.11.0",
-    "typescript": "~4.0.3"
+    "typescript": "4.6.2"
   },
   "eslintConfig": {
     "extends": [
@@ -103,6 +102,8 @@
   },
   "resolutions": {
     "trim": "^0.0.3",
-    "prismjs": "^1.23.0"
+    "prismjs": "^1.23.0",
+    "lit-element": "^3",
+    "lit-html": "^2"
   }
 }