';\n};\nrules.paragraph_close = function(tokens, idx /*, options, env */) {\n var addBreak = !(tokens[idx].tight && idx && tokens[idx - 1].type === 'inline' && !tokens[idx - 1].content);\n return (tokens[idx].tight ? '' : '
') + (addBreak ? getBreak(tokens, idx) : '');\n};\n\n/**\n * Links\n */\n\nrules.link_open = function(tokens, idx, options /* env */) {\n var title = tokens[idx].title ? (' title=\"' + escapeHtml(replaceEntities(tokens[idx].title)) + '\"') : '';\n var target = options.linkTarget ? (' target=\"' + options.linkTarget + '\"') : '';\n return '';\n};\nrules.link_close = function(/* tokens, idx, options, env */) {\n return '';\n};\n\n/**\n * Images\n */\n\nrules.image = function(tokens, idx, options /*, env */) {\n var src = ' src=\"' + escapeHtml(tokens[idx].src) + '\"';\n var title = tokens[idx].title ? (' title=\"' + escapeHtml(replaceEntities(tokens[idx].title)) + '\"') : '';\n var alt = ' alt=\"' + (tokens[idx].alt ? escapeHtml(replaceEntities(unescapeMd(tokens[idx].alt))) : '') + '\"';\n var suffix = options.xhtmlOut ? ' /' : '';\n return '\\n' : '
\\n';\n};\nrules.softbreak = function(tokens, idx, options /*, env */) {\n return options.breaks ? (options.xhtmlOut ? '
\\n' : '
\\n') : '\\n';\n};\n\n/**\n * Text\n */\n\nrules.text = function(tokens, idx /*, options, env */) {\n return escapeHtml(tokens[idx].content);\n};\n\n/**\n * Content\n */\n\nrules.htmlblock = function(tokens, idx /*, options, env */) {\n return tokens[idx].content;\n};\nrules.htmltag = function(tokens, idx /*, options, env */) {\n return tokens[idx].content;\n};\n\n/**\n * Abbreviations, initialism\n */\n\nrules.abbr_open = function(tokens, idx /*, options, env */) {\n return '';\n};\nrules.abbr_close = function(/* tokens, idx, options, env */) {\n return '';\n};\n\n/**\n * Footnotes\n */\n\nrules.footnote_ref = function(tokens, idx) {\n var n = Number(tokens[idx].id + 1).toString();\n var id = 'fnref' + n;\n if (tokens[idx].subId > 0) {\n id += ':' + tokens[idx].subId;\n }\n return '[' + n + ']';\n};\nrules.footnote_block_open = function(tokens, idx, options) {\n var hr = options.xhtmlOut\n ? '
\\n'\n : '
\\n';\n return hr + '
- \\n';\n};\nrules.footnote_block_close = function() {\n return '
- \\n';\n};\nrules.dt_open = function() {\n return '
- ';\n};\nrules.dd_open = function() {\n return '
- ';\n};\nrules.dl_close = function() {\n return '
)\n breaks: false, // Convert '\\n' in paragraphs into
\n langPrefix: 'language-', // CSS language prefix for fenced blocks\n linkTarget: '', // set target to open link in\n\n // Enable some language-neutral replacements + quotes beautification\n typographer: false,\n\n // Double + single quotes replacement pairs, when typographer enabled,\n // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.\n quotes: '“”‘’',\n\n // Highlighter function. Should return escaped HTML,\n // or '' if input not changed\n //\n // function (/*str, lang*/) { return ''; }\n //\n highlight: null,\n\n maxNesting: 20 // Internal protection, recursion limit\n },\n\n components: {\n\n core: {\n rules: [\n 'block',\n 'inline',\n 'references',\n 'replacements',\n 'smartquotes',\n 'references',\n 'abbr2',\n 'footnote_tail'\n ]\n },\n\n block: {\n rules: [\n 'blockquote',\n 'code',\n 'fences',\n 'footnote',\n 'heading',\n 'hr',\n 'htmlblock',\n 'lheading',\n 'list',\n 'paragraph',\n 'table'\n ]\n },\n\n inline: {\n rules: [\n 'autolink',\n 'backticks',\n 'del',\n 'emphasis',\n 'entity',\n 'escape',\n 'footnote_ref',\n 'htmltag',\n 'links',\n 'newline',\n 'text'\n ]\n }\n }\n};\n\n// Remarkable default options\n\nvar fullConfig = {\n options: {\n html: false, // Enable HTML tags in source\n xhtmlOut: false, // Use '/' to close single tags (
)\n breaks: false, // Convert '\\n' in paragraphs into
\n langPrefix: 'language-', // CSS language prefix for fenced blocks\n linkTarget: '', // set target to open link in\n\n // Enable some language-neutral replacements + quotes beautification\n typographer: false,\n\n // Double + single quotes replacement pairs, when typographer enabled,\n // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.\n quotes: '“”‘’',\n\n // Highlighter function. Should return escaped HTML,\n // or '' if input not changed\n //\n // function (/*str, lang*/) { return ''; }\n //\n highlight: null,\n\n maxNesting: 20 // Internal protection, recursion limit\n },\n\n components: {\n // Don't restrict core/block/inline rules\n core: {},\n block: {},\n inline: {}\n }\n};\n\n// Commonmark default options\n\nvar commonmarkConfig = {\n options: {\n html: true, // Enable HTML tags in source\n xhtmlOut: true, // Use '/' to close single tags (
)\n breaks: false, // Convert '\\n' in paragraphs into
\n langPrefix: 'language-', // CSS language prefix for fenced blocks\n linkTarget: '', // set target to open link in\n\n // Enable some language-neutral replacements + quotes beautification\n typographer: false,\n\n // Double + single quotes replacement pairs, when typographer enabled,\n // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.\n quotes: '“”‘’',\n\n // Highlighter function. Should return escaped HTML,\n // or '' if input not changed\n //\n // function (/*str, lang*/) { return ''; }\n //\n highlight: null,\n\n maxNesting: 20 // Internal protection, recursion limit\n },\n\n components: {\n\n core: {\n rules: [\n 'block',\n 'inline',\n 'references',\n 'abbr2'\n ]\n },\n\n block: {\n rules: [\n 'blockquote',\n 'code',\n 'fences',\n 'heading',\n 'hr',\n 'htmlblock',\n 'lheading',\n 'list',\n 'paragraph'\n ]\n },\n\n inline: {\n rules: [\n 'autolink',\n 'backticks',\n 'emphasis',\n 'entity',\n 'escape',\n 'htmltag',\n 'links',\n 'newline',\n 'text'\n ]\n }\n }\n};\n\n/**\n * Preset configs\n */\n\nvar config = {\n 'default': defaultConfig,\n 'full': fullConfig,\n 'commonmark': commonmarkConfig\n};\n\n/**\n * The `StateCore` class manages state.\n *\n * @param {Object} `instance` Remarkable instance\n * @param {String} `str` Markdown string\n * @param {Object} `env`\n */\n\nfunction StateCore(instance, str, env) {\n this.src = str;\n this.env = env;\n this.options = instance.options;\n this.tokens = [];\n this.inlineMode = false;\n\n this.inline = instance.inline;\n this.block = instance.block;\n this.renderer = instance.renderer;\n this.typographer = instance.typographer;\n}\n\n/**\n * The main `Remarkable` class. Create an instance of\n * `Remarkable` with a `preset` and/or `options`.\n *\n * @param {String} `preset` If no preset is given, `default` is used.\n * @param {Object} `options`\n */\n\nfunction Remarkable(preset, options) {\n if (typeof preset !== 'string') {\n options = preset;\n preset = 'default';\n }\n\n if (options && options.linkify != null) {\n console.warn(\n 'linkify option is removed. Use linkify plugin instead:\\n\\n' +\n 'import Remarkable from \\'remarkable\\';\\n' +\n 'import linkify from \\'remarkable/linkify\\';\\n' +\n 'new Remarkable().use(linkify)\\n'\n );\n }\n\n this.inline = new ParserInline();\n this.block = new ParserBlock();\n this.core = new Core();\n this.renderer = new Renderer();\n this.ruler = new Ruler();\n\n this.options = {};\n this.configure(config[preset]);\n this.set(options || {});\n}\n\n/**\n * Set options as an alternative to passing them\n * to the constructor.\n *\n * ```js\n * md.set({typographer: true});\n * ```\n * @param {Object} `options`\n * @api public\n */\n\nRemarkable.prototype.set = function (options) {\n assign(this.options, options);\n};\n\n/**\n * Batch loader for components rules states, and options\n *\n * @param {Object} `presets`\n */\n\nRemarkable.prototype.configure = function (presets) {\n var self = this;\n\n if (!presets) { throw new Error('Wrong `remarkable` preset, check name/content'); }\n if (presets.options) { self.set(presets.options); }\n if (presets.components) {\n Object.keys(presets.components).forEach(function (name) {\n if (presets.components[name].rules) {\n self[name].ruler.enable(presets.components[name].rules, true);\n }\n });\n }\n};\n\n/**\n * Use a plugin.\n *\n * ```js\n * var md = new Remarkable();\n *\n * md.use(plugin1)\n * .use(plugin2, opts)\n * .use(plugin3);\n * ```\n *\n * @param {Function} `plugin`\n * @param {Object} `options`\n * @return {Object} `Remarkable` for chaining\n */\n\nRemarkable.prototype.use = function (plugin, options) {\n plugin(this, options);\n return this;\n};\n\n\n/**\n * Parse the input `string` and return a tokens array.\n * Modifies `env` with definitions data.\n *\n * @param {String} `string`\n * @param {Object} `env`\n * @return {Array} Array of tokens\n */\n\nRemarkable.prototype.parse = function (str, env) {\n var state = new StateCore(this, str, env);\n this.core.process(state);\n return state.tokens;\n};\n\n/**\n * The main `.render()` method that does all the magic :)\n *\n * @param {String} `string`\n * @param {Object} `env`\n * @return {String} Rendered HTML.\n */\n\nRemarkable.prototype.render = function (str, env) {\n env = env || {};\n return this.renderer.render(this.parse(str, env), this.options, env);\n};\n\n/**\n * Parse the given content `string` as a single string.\n *\n * @param {String} `string`\n * @param {Object} `env`\n * @return {Array} Array of tokens\n */\n\nRemarkable.prototype.parseInline = function (str, env) {\n var state = new StateCore(this, str, env);\n state.inlineMode = true;\n this.core.process(state);\n return state.tokens;\n};\n\n/**\n * Render a single content `string`, without wrapping it\n * to paragraphs\n *\n * @param {String} `str`\n * @param {Object} `env`\n * @return {String}\n */\n\nRemarkable.prototype.renderInline = function (str, env) {\n env = env || {};\n return this.renderer.render(this.parseInline(str, env), this.options, env);\n};\n\nexport { Remarkable, utils };\n","import { html, TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html.js';\nimport {\n directive,\n Directive,\n Part,\n PartInfo,\n PartType,\n} from 'lit/directive.js';\nimport ExcellentParser, { Expression } from './ExcellentParser';\nimport {\n CompletionOption,\n CompletionProperty,\n CompletionResult,\n CompletionSchema,\n CompletionType,\n KeyedAssets,\n} from '../interfaces';\nimport { Store } from '../store/Store';\nimport { Remarkable } from 'remarkable';\n\nconst md = new Remarkable();\n\nconst messageParser = new ExcellentParser('@', [\n 'contact',\n 'fields',\n 'globals',\n 'urns',\n]);\n\nconst sessionParser = new ExcellentParser('@', [\n 'contact',\n 'fields',\n 'globals',\n 'urns',\n 'results',\n 'input',\n 'run',\n 'child',\n 'parent',\n 'node',\n 'webhook',\n 'ticket',\n 'trigger',\n 'resume',\n]);\n\n// Class-based directive API\nexport class RenderMarkdown extends Directive {\n // State stored in class field\n value: string | undefined;\n constructor(partInfo: PartInfo) {\n super(partInfo);\n // When necessary, validate part in constructor using `part.type`\n if (partInfo.type !== PartType.CHILD) {\n throw new Error('renderMarkdown only supports child expressions');\n }\n }\n // Optional: override update to perform any direct DOM manipulation\n // DirectiveParameters
\n \n ${args}\n
\n ƒ
\n ${name}
\n ${selected\n ? html`\n ${renderMarkdown(option.summary)}
\n `\n : null}\n \n `;\n }\n\n return html`\n \n
\n `;\n};\n\nexport const getFunctions = (\n functions: CompletionOption[],\n query: string\n): CompletionOption[] => {\n if (!query) {\n return functions;\n }\n return functions.filter((option: CompletionOption) => {\n if (option.signature) {\n return option.signature.indexOf((query || '').toLowerCase()) === 0;\n }\n return false;\n });\n};\n\n/**\n * Takes a dot query and returns the completions options at the current level\n * @param dotQuery query such as \"contact.first_n\"\n */\nexport const getCompletions = (\n schema: CompletionSchema,\n dotQuery: string,\n keyedAssets: KeyedAssets = {},\n session: boolean\n): CompletionOption[] => {\n const parts = (dotQuery || '').split('.');\n let currentProps: CompletionProperty[] = session\n ? schema.root\n : schema.root_no_session;\n\n if (!currentProps) {\n return [];\n }\n\n let prefix = '';\n let part = '';\n while (parts.length > 0) {\n part = parts.shift();\n if (part) {\n // eslint-disable-next-line\n const nextProp = currentProps.find(\n (prop: CompletionProperty) => prop.key === part\n );\n if (nextProp) {\n // eslint-disable-next-line\n const nextType = schema.types.find(\n (type: CompletionType) => type.name === nextProp.type\n );\n if (nextType && nextType.properties) {\n currentProps = nextType.properties;\n prefix += part + '.';\n } else if (nextType && nextType.property_template) {\n prefix += part + '.';\n const template = nextType.property_template;\n if (keyedAssets[nextType.name]) {\n currentProps = keyedAssets[nextType.name].map((key: string) => ({\n key: template.key.replace('{key}', key),\n help: template.help.replace('{key}', key),\n type: template.type,\n }));\n } else {\n currentProps = [];\n }\n } else {\n // eslint-disable-next-line\n currentProps = currentProps.filter((prop: CompletionProperty) =>\n prop.key.startsWith(part.toLowerCase())\n );\n break;\n }\n } else {\n // eslint-disable-next-line\n currentProps = currentProps.filter((prop: CompletionProperty) =>\n prop.key.startsWith(part.toLowerCase())\n );\n break;\n }\n }\n }\n\n return currentProps.map((prop: CompletionProperty) => {\n const name =\n prop.key === '__default__'\n ? prefix.substr(0, prefix.length - 1)\n : prefix + prop.key;\n return { name, summary: prop.help };\n });\n};\n\nexport const getOffset = (el: HTMLElement) => {\n const rect = el.getBoundingClientRect(),\n scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,\n scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n return { top: rect.top + scrollTop, left: rect.left + scrollLeft };\n};\n\nexport const getVerticalScroll = (ele: Node) => {\n let current = ele;\n const verticalScroll = 0;\n while (current) {\n current = current.parentNode;\n }\n return verticalScroll;\n};\n\nexport const getCompletionName = (option: CompletionOption): string => {\n return (\n option.name || option.signature.substr(0, option.signature.indexOf('('))\n );\n};\n\nexport const getCompletionSignature = (option: CompletionOption): string => {\n return option.signature.substr(option.signature.indexOf('('));\n};\n\n/**\n * Determines the pixel position of position inside a textarea or input\n * TODO: Explore somethign like contenteditable to avoid this madness\n * see: https://jh3y.medium.com/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a\n */\nconst getCursorXY = (input, selectionPoint) => {\n const { offsetLeft: inputX, offsetTop: inputY } = input;\n const div = document.createElement('div');\n const copyStyle = getComputedStyle(input);\n for (const prop of copyStyle) {\n div.style[prop] = copyStyle[prop];\n }\n div.style.position = 'relative';\n const swap = '.';\n const inputValue =\n input.tagName === 'INPUT' ? input.value.replace(/ /g, swap) : input.value;\n const textContent = inputValue.substr(0, selectionPoint);\n div.textContent = textContent;\n if (input.tagName === 'TEXTAREA') div.style.height = 'auto';\n if (input.tagName === 'INPUT') div.style.width = 'auto';\n const span = document.createElement('span');\n span.textContent = inputValue.substr(selectionPoint) || '.';\n div.appendChild(span);\n document.body.appendChild(div);\n const { offsetLeft: spanX, offsetTop: spanY } = span;\n document.body.removeChild(div);\n return {\n left: inputX + spanX,\n top: inputY + spanY,\n };\n};\n\nexport const updateInputElementWithCompletion = (\n currentQuery: string,\n ele: HTMLInputElement,\n option: CompletionOption\n) => {\n let insertText = '';\n\n if (option.signature) {\n // they selected a function\n insertText = option.signature.substr(0, option.signature.indexOf('(') + 1);\n } else {\n insertText = option.name;\n }\n\n const queryLength = currentQuery.length;\n\n if (ele) {\n const value = ele.value;\n const insertionPoint = ele.selectionStart - queryLength;\n\n // strip out our query\n // const insertionPoint = value.lastIndexOf(value.substring(0, this.inputElement.selectionStart));\n const leftSide = value.substr(0, insertionPoint);\n const remaining = value.substr(insertionPoint + queryLength);\n const caret = leftSide.length + insertText.length;\n\n // set our value and our new caret\n ele.value = leftSide + insertText + remaining;\n ele.setSelectionRange(caret, caret);\n\n // now scroll our text box if necessary\n const position = getCursorXY(ele, caret);\n if (position.left > ele.width) {\n ele.scrollLeft = position.left;\n }\n\n ele.dispatchEvent(new Event('input'));\n }\n};\n\nexport const executeCompletionQuery = (\n ele: HTMLInputElement,\n store: Store,\n session: boolean\n): CompletionResult => {\n const result: CompletionResult = {\n currentFunction: null,\n options: [],\n anchorPosition: null,\n query: null,\n };\n\n if (!ele) {\n return;\n }\n\n // we need a store to do anything useful\n if (!store) {\n return result;\n }\n\n const cursor = ele.selectionStart;\n const input = ele.value.substring(0, cursor);\n\n const parser = session ? sessionParser : messageParser;\n const expressions = parser.findExpressions(input);\n const currentExpression = expressions.find(\n (expr: Expression) =>\n expr.start <= cursor &&\n (expr.end > cursor || (expr.end === cursor && !expr.closed))\n );\n\n if (currentExpression) {\n const includeFunctions = currentExpression.text.indexOf('(') > -1;\n if (includeFunctions) {\n const functionQuery = parser.functionContext(currentExpression.text);\n if (functionQuery) {\n const fns = getFunctions(store.getFunctions(), functionQuery);\n if (fns.length > 0) {\n result.currentFunction = fns[0];\n }\n }\n }\n\n for (let i = currentExpression.text.length; i >= 0; i--) {\n const curr = currentExpression.text[i];\n if (\n curr === '@' ||\n curr === '(' ||\n curr === ' ' ||\n curr === ',' ||\n curr === ')' ||\n i === 0\n ) {\n // don't include non-expression chars\n if (\n curr === '(' ||\n curr === ' ' ||\n curr === ',' ||\n curr === ')' ||\n curr === '@'\n ) {\n i++;\n }\n\n const caret = getCursorXY(ele, currentExpression.start + i);\n\n result.anchorPosition = {\n left: caret.left - 2 - ele.scrollLeft,\n top: caret.top - ele.scrollTop,\n };\n\n result.query = currentExpression.text.substr(\n i,\n currentExpression.text.length - i\n );\n\n result.options = [\n ...getCompletions(\n store.getCompletionSchema(),\n result.query,\n store.getKeyedAssets(),\n session\n ),\n ...(includeFunctions\n ? getFunctions(store.getFunctions(), result.query)\n : []),\n ];\n\n return result;\n }\n }\n } else {\n result.options = [];\n result.query = '';\n }\n return result;\n};\n","/* eslint-disable @typescript-eslint/no-empty-function */\nimport { TemplateResult, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n getUrl,\n getClasses,\n fetchResults,\n WebResponse,\n postJSON,\n} from '../utils';\nimport '../options/Options';\nimport { EventHandler } from '../RapidElement';\nimport { FormElement } from '../FormElement';\n\nimport { lru } from 'tiny-lru';\nimport { CompletionOption, CustomEventType, Position } from '../interfaces';\nimport {\n renderCompletionOption,\n updateInputElementWithCompletion,\n executeCompletionQuery,\n} from '../completion/helpers';\nimport { Store } from '../store/Store';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { Icon } from '../vectoricon';\nimport { msg } from '@lit/localize';\n\nconst LOOK_AHEAD = 20;\n\nexport class Select extends FormElement {\n private hiddenInputs: HTMLInputElement[] = [];\n\n static get styles() {\n return css`\n :host {\n font-family: var(--font-family);\n transition: all ease-in-out var(--transition-speed);\n display: inline;\n line-height: normal;\n outline: none;\n position: relative;\n --icon-color: var(--color-text-dark-secondary);\n }\n\n temba-options {\n --temba-options-font-size: var(--temba-select-selected-font-size);\n --icon-color: var(--color-text-dark);\n }\n\n :host:focus {\n outline: none;\n }\n\n #anchor {\n position: absolute;\n visibility: hidden;\n width: 250px;\n height: 25px;\n }\n\n .remove-item {\n cursor: pointer;\n display: inline-block;\n padding: 3px 6px;\n border-right: 1px solid rgba(100, 100, 100, 0.2);\n margin: 0;\n background: rgba(100, 100, 100, 0.05);\n }\n\n .selected-item.multi .remove-item {\n display: none;\n }\n\n .remove-item:hover {\n background: rgba(100, 100, 100, 0.1);\n }\n\n input:focus {\n outline: none;\n box-shadow: none;\n cursor: text;\n }\n\n .wrapper-bg {\n background: #f3f3f3;\n box-shadow: inset 0px 0px 4px rgb(0 0 0 / 10%);\n border-radius: var(--curvature-widget);\n }\n\n .select-container {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: center;\n border: 1px solid var(--color-widget-border);\n transition: all ease-in-out var(--transition-speed);\n cursor: pointer;\n border-radius: var(--curvature-widget);\n background: var(--color-widget-bg);\n padding-top: 1px;\n box-shadow: var(--widget-box-shadow);\n position: relative;\n }\n\n temba-icon.select-open:hover,\n .clear-button:hover {\n --icon-color: var(--color-text-dark);\n }\n\n .select-container:focus {\n outline: none;\n }\n\n .select-container.multi {\n /* background: var(--color-widget-bg); */\n }\n\n .select-container.focused {\n background: var(--color-widget-bg-focused);\n border-color: var(--color-focus);\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .left-side {\n flex: 1;\n overflow: hidden;\n }\n\n .empty .placeholder {\n display: block;\n }\n\n .selected {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n user-select: none;\n padding: var(--temba-select-selected-padding);\n }\n\n .searchable .selected {\n padding: 4px !important;\n }\n\n .multi .selected {\n flex-wrap: wrap;\n padding: 4px;\n }\n\n .multi.empty .selected {\n padding: var(--temba-select-selected-padding);\n }\n\n .selected .selected-item {\n display: flex;\n overflow: hidden;\n color: var(--color-widget-text);\n line-height: var(--temba-select-selected-line-height);\n --icon-color: var(--color-text-dark);\n }\n\n .multi .selected .selected-item {\n vertical-align: middle;\n background: rgba(100, 100, 100, 0.1);\n user-select: none;\n border-radius: 2px;\n align-items: stretch;\n flex-direction: row;\n flex-wrap: nowrap;\n margin: 2px 2px;\n }\n\n .selected-item .option-name {\n padding: 0px;\n font-size: var(--temba-select-selected-font-size);\n align-self: center;\n }\n\n .multi .selected-item .option-name {\n flex: 1 1 auto;\n align-self: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 12px;\n padding: 2px 8px;\n }\n\n .multi .selected .selected-item.focused {\n background: rgba(100, 100, 100, 0.3);\n }\n\n input {\n font-size: 13px;\n width: 0px;\n cursor: pointer;\n background: none;\n resize: none;\n border: none !important;\n visibility: visible;\n line-height: inherit !important;\n height: var(--search-input-height) !important;\n margin: 0px !important;\n padding: 0px !important;\n box-shadow: none !important;\n font-family: var(--font-family);\n caret-color: var(--input-caret);\n }\n\n input:focus {\n box-shadow: none !important;\n }\n\n .searchable.no-search-input .input-wrapper {\n flex-grow: inherit;\n min-width: 1px;\n }\n\n .searchable.no-search-input.empty .input-wrapper {\n flex-grow: 1;\n min-width: 1px;\n }\n\n .searchable.no-search-input .input-wrapper .searchbox {\n flex-grow: inherit;\n min-width: 1px;\n }\n\n .searchable .input-wrapper .searchbox {\n flex-grow: 1;\n min-width: 80%;\n height: 100%;\n }\n\n .searchable.single.search-input .selected .selected-item {\n display: none;\n }\n\n .searchable.single.no-search-input\n .selected\n .input-wrapper\n input.searchbox {\n padding: 6px 2px !important;\n }\n\n .searchable.single.no-search-input.empty\n .selected\n .input-wrapper\n input.searchbox {\n padding: 6px 6px !important;\n }\n\n .empty input {\n width: 100%;\n }\n\n .searchable input {\n padding: 6px 4px !important;\n }\n\n .searchable input {\n font-weight: 300;\n visibility: visible;\n cursor: pointer;\n background: none;\n color: var(--color-text);\n resize: none;\n box-shadow: none !important;\n flex-grow: 1;\n border: none;\n caret-color: var(--input-caret);\n }\n\n .searchable input:focus {\n box-shadow: none !important;\n }\n\n .input-wrapper {\n flex-grow: 1;\n }\n\n .input-wrapper .searchbox {\n }\n\n .searchbox {\n border: 0px;\n }\n\n .searchbox::placeholder {\n color: var(--color-placeholder);\n font-weight: 300;\n font-size: 1em;\n line-height: var(--temba-select-selected-line-height);\n padding-left: 1px;\n }\n\n .placeholder {\n font-size: var(--temba-select-selected-font-size);\n color: var(--color-placeholder);\n display: none;\n font-weight: 300;\n line-height: var(--temba-select-selected-line-height);\n }\n\n .footer {\n padding: 5px 10px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n font-size: 80%;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n }\n\n .small {\n --temba-select-selected-padding: 7px;\n --temba-select-selected-line-height: 13px;\n --temba-select-selected-font-size: 12px;\n --search-input-height: 7px !important;\n }\n\n .info-text {\n opacity: 1;\n transition: padding-top var(--transition-speed) ease-in-out,\n padding-bottom var(--transition-speed) ease-in-out;\n margin-bottom: 16px;\n padding: 0.5em 1em;\n border-radius: var(--curvature);\n font-size: 0.9em;\n color: rgba(0, 0, 0, 0.5);\n position: relative;\n }\n\n .info-text.focused {\n opacity: 1;\n }\n\n .info-text.hide {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0px;\n pointer-events: none;\n padding: 0px;\n }\n `;\n }\n\n @property({ type: Boolean })\n multi = false;\n\n @property({ type: Boolean })\n searchOnFocus = false;\n\n @property({ type: String })\n placeholder = '';\n\n @property()\n name = '';\n\n @property()\n endpoint: string;\n\n @property({ type: String })\n nameKey = 'name';\n\n @property({ type: String })\n valueKey = 'value';\n\n @property({ attribute: false })\n currentFunction: CompletionOption;\n\n @property({ type: String })\n queryParam: string = null;\n\n @property({ type: String })\n input = '';\n\n @property({ type: Array })\n visibleOptions: any[] = [];\n\n @property({ type: Array })\n completionOptions: CompletionOption[] = [];\n\n @property({ type: Number })\n quietMillis = 0;\n\n @property({ type: Boolean })\n fetching: boolean;\n\n @property({ type: Boolean })\n searchable = false;\n\n @property({ type: String })\n expressions: string;\n\n @property({ type: Boolean })\n cache = true;\n\n @property({ type: String })\n cacheKey = '';\n\n @property({ type: Boolean })\n focused = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ attribute: false })\n selectedIndex = -1;\n\n @property({ type: Number })\n cursorIndex: number;\n\n @property({ attribute: false })\n anchorElement: HTMLElement;\n\n @property({ attribute: false })\n anchorExpressions: HTMLElement;\n\n @property({ type: Object })\n anchorPosition: Position = { left: 0, top: 0 };\n\n @property({ type: Boolean })\n tags = false;\n\n @property({ type: Boolean, attribute: 'space_select' })\n spaceSelect: boolean;\n\n @property({ type: Boolean })\n jsonValue: boolean;\n\n @property({ type: Boolean })\n hideErrors: boolean;\n\n @property({ type: Boolean })\n clearable: boolean;\n\n @property({ type: String })\n flavor = 'default';\n\n @property({ type: String, attribute: 'info_text' })\n infoText = '';\n\n @property({ type: Array })\n values: any[] = [];\n\n @property({ type: Object })\n selection: any;\n\n @property({ attribute: false })\n getName: (option: any) => string = (option: any) =>\n option[this.nameKey || 'name'];\n\n @property({ attribute: false })\n isMatch: (option: any, q: string) => boolean = (option: any, q: string) => {\n const name = this.getName(option) || '';\n return name.toLowerCase().indexOf(q) > -1;\n };\n\n @property({ attribute: false })\n getValue: (option: any) => string = (option: any) =>\n option[this.valueKey || 'value'] || option.id;\n\n @property({ type: Number, attribute: 'option-width' })\n optionWidth: number;\n\n @property({ type: Boolean, attribute: 'anchor-right' })\n anchorRight: boolean;\n\n @property({ attribute: false })\n shouldExclude: (option: any) => boolean;\n\n @property({ attribute: false })\n sortFunction: (a: any, b: any) => number;\n\n @property({ attribute: false })\n renderOption: (option: any, selected: boolean) => TemplateResult;\n\n @property({ attribute: false })\n renderOptionName: (option: any, selected: boolean) => TemplateResult;\n\n @property({ attribute: false })\n renderOptionDetail: (option: any, selected: boolean) => TemplateResult = () =>\n html``;\n\n @property({ attribute: false })\n renderSelectedItem: (option: any) => TemplateResult =\n this.renderSelectedItemDefault;\n\n @property({ attribute: false })\n createArbitraryOption: (input: string, options: any[]) => any =\n this.createArbitraryOptionDefault;\n\n @property({ attribute: false })\n getOptions: (response: WebResponse) => any[] = this.getOptionsDefault;\n\n @property({ attribute: false })\n isComplete: (newestOptions: any[], response: WebResponse) => boolean =\n this.isCompleteDefault;\n\n @property({ type: Array, attribute: 'options' })\n private staticOptions: any[] = [];\n\n private lastQuery: number;\n\n // private cancelToken: CancelTokenSource;\n private complete: boolean;\n private page: number;\n private next: string = null;\n private query: string;\n\n private removingSelection: boolean;\n\n private lruCache = lru(20, 60000);\n\n public updated(changedProperties: Map${option.name}
\n ${selected\n ? html` ${option.summary}
`\n : null}\n \n ${option.icon\n ? html``\n : null}${this.getName(option)}\n
\n `;\n }\n\n public serializeValue(value: any): string {\n // static options just use their value\n if (!this.jsonValue && (this.staticOptions.length > 0 || this.tags)) {\n return value.value;\n }\n\n return super.serializeValue(value);\n }\n\n public setSelection(value: string): void {\n for (const option of this.staticOptions) {\n if (this.getValue(option.value) === value) {\n if (this.values.length === 0 || this.values[0].value !== '' + value) {\n this.setValues([option]);\n }\n return;\n }\n }\n }\n\n private handleClear(evt: MouseEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n this.setValues([]);\n }\n\n public setValues(values: any[]) {\n this.values = values;\n this.requestUpdate('values');\n }\n\n public addValue(value: any) {\n this.values.push(value);\n this.requestUpdate('values');\n }\n\n public removeValue(valueToRemove: any) {\n const idx = this.values.indexOf(valueToRemove);\n if (idx > -1) {\n this.values.splice(idx, 1);\n }\n this.requestUpdate('values');\n }\n\n public popValue() {\n this.values.pop();\n this.requestUpdate('values');\n }\n\n public clear() {\n this.values = [];\n this.requestUpdate('values');\n }\n\n public render(): TemplateResult {\n const placeholder = this.values.length === 0 ? this.placeholder : '';\n const placeholderDiv = html`\n ${placeholder}
\n `;\n\n const clear =\n this.clearable && this.values.length > 0 && !this.multi\n ? html`\n
\n `\n : placeholderDiv;\n\n return html`\n \n \n
\n\n \n\n ${clear}\n\n \n
\n `\n )}\n ${this.multi ? input : null}\n \n ${!this.multi ? input : null}\n ${this.values.map(\n (selected: any, index: number) => html`\n \n ${this.multi\n ? html`\n {\n this.removingSelection = true;\n }}\n @mouseup=${() => {\n this.removingSelection = false;\n }}\n @click=${(evt: MouseEvent) => {\n evt.preventDefault();\n evt.stopPropagation();\n this.handleRemoveSelection(selected);\n }}\n >\n \n
\n `\n : null}\n ${this.renderSelectedItem(selected)}\n ${this.infoText}
\n\n \n \n ${renderCompletionOption(this.currentFunction, true)}\n
\n `\n : null\n }\n ${\n this.completionOptions.length > 0\n ? html``\n : null\n }\n \n \n `;\n }\n}\n","import { TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { TextInput } from '../textinput/TextInput';\nimport {\n renderCompletionOption,\n updateInputElementWithCompletion,\n executeCompletionQuery,\n} from './helpers';\n\nimport { FormElement } from '../FormElement';\nimport { CompletionOption, Position } from '../interfaces';\nimport { Store } from '../store/Store';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { msg } from '@lit/localize';\n\n/**\n * Completion is a text input that handles excellent completion options in a popup\n */\nexport class Completion extends FormElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n temba-options {\n --widget-box-shadow-focused: 0 0 4px rgba(0, 0, 0, 0.15);\n --color-focus: #e6e6e6;\n }\n\n .comp-container {\n position: relative;\n height: 100%;\n }\n\n #anchor {\n /* background: rgba(132, 40, 158, .1); */\n position: absolute;\n visibility: hidden;\n width: 250px;\n height: 20px;\n }\n\n .fn-marker {\n font-weight: bold;\n font-size: 42px;\n }\n\n .option-slot {\n background: #fff;\n }\n\n .current-fn {\n padding: 10px;\n margin: 5px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n border-radius: var(--curvature-widget);\n font-size: 90%;\n }\n\n .footer {\n padding: 5px 10px;\n background: var(--color-primary-light);\n color: rgba(0, 0, 0, 0.5);\n font-size: 80%;\n border-bottom-left-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n }\n\n code {\n background: rgba(0, 0, 0, 0.1);\n padding: 1px 5px;\n border-radius: var(--curvature);\n }\n `;\n }\n\n @property({ type: Number })\n maxLength: number;\n\n @property({ type: Boolean })\n session: boolean;\n\n @property({ type: Boolean })\n submitOnEnter = false;\n\n @property({ type: Object })\n anchorPosition: Position = { left: 0, top: 0 };\n\n @property({ attribute: false })\n currentFunction: CompletionOption;\n\n @property({ type: String })\n placeholder = '';\n\n @property({ attribute: false })\n textInputElement: TextInput;\n\n @property({ attribute: false })\n anchorElement: HTMLDivElement;\n\n @property({ type: Array })\n options: any[] = [];\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n value = '';\n\n @property({ type: Boolean })\n textarea: boolean;\n\n @property({ type: Boolean })\n gsm: boolean;\n\n @property({ type: String })\n counter: string;\n\n @property({ type: Boolean })\n autogrow = false;\n\n private hiddenElement: HTMLInputElement;\n private query: string;\n\n public firstUpdated() {\n this.textInputElement = this.shadowRoot.querySelector(\n 'temba-textinput'\n ) as TextInput;\n this.anchorElement = this.shadowRoot.querySelector('#anchor');\n\n // create our hidden container so it gets included in our host element's form\n this.hiddenElement = document.createElement('input');\n this.hiddenElement.setAttribute('type', 'hidden');\n this.hiddenElement.setAttribute('name', this.getAttribute('name'));\n this.hiddenElement.setAttribute('value', this.getAttribute('value') || '');\n this.appendChild(this.hiddenElement);\n }\n\n private handleKeyUp(evt: KeyboardEvent) {\n // if we have options, ignore keys that are meant for them\n if (this.options && this.options.length > 0) {\n if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {\n return;\n }\n\n if (evt.ctrlKey) {\n if (evt.key === 'n' || evt.key === 'p') {\n return;\n }\n }\n\n if (\n evt.key === 'Enter' ||\n evt.key === 'Escape' ||\n evt.key === 'Tab' ||\n evt.key.startsWith('Control')\n ) {\n evt.stopPropagation();\n evt.preventDefault();\n return;\n }\n\n this.executeQuery(evt.currentTarget as TextInput);\n }\n }\n\n public hasVisibleOptions() {\n return this.options.length > 0;\n }\n\n private executeQuery(ele: TextInput) {\n const store: Store = document.querySelector('temba-store');\n if (!ele.inputElement) {\n return;\n }\n const result = executeCompletionQuery(\n ele.inputElement,\n store,\n this.session\n );\n\n this.query = result.query;\n this.options = result.options;\n this.anchorPosition = result.anchorPosition;\n }\n\n private handleClick(evt: MouseEvent) {\n this.executeQuery(evt.currentTarget as TextInput);\n }\n\n public updated(changedProperties: Map\n \n \n \n \n ${this.currentFunction\n ? html`\n
\n \n `;\n }\n}\n","import { RapidElement } from './RapidElement';\nimport { throttle } from './utils';\n\nexport class ResizeElement extends RapidElement {\n public handleResize() {\n this.requestUpdate();\n }\n\n public getEventHandlers() {\n return [\n {\n event: 'resize',\n method: throttle(this.handleResize, 50),\n isWindow: true,\n },\n ];\n }\n}\n","import { property } from 'lit/decorators.js';\nimport { TemplateResult, html, css, PropertyValueMap } from 'lit';\nimport { Button } from '../button/Button';\nimport { RapidElement } from '../RapidElement';\nimport { CustomEventType } from '../interfaces';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { getClasses } from '../utils';\nimport { ResizeElement } from '../ResizeElement';\n\nexport enum ButtonType {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n}\nexport class DialogButton {\n name?: string;\n id?: string;\n details?: any;\n type?: string;\n closes?: boolean;\n}\n\nexport class Dialog extends ResizeElement {\n static get widths(): { [size: string]: string } {\n return {\n small: '400px',\n medium: '600px',\n large: '655px',\n };\n }\n\n static get styles() {\n return css`\n :host {\n position: absolute;\n z-index: 10000;\n font-family: var(--font-family);\n background: white;\n }\n\n .flex-grow {\n flex-grow: 1;\n }\n\n .flex {\n display: flex;\n flex-direction: column;\n width: 100%;\n position: relative;\n left: 0px;\n top: 0px;\n align-items: center;\n height: 100vh;\n }\n\n .mobile .flex {\n height: 100%;\n position: fixed;\n }\n\n .mobile .grow-top {\n flex-grow: 0;\n }\n\n .mobile .grow-bottom {\n flex-grow: 0;\n }\n\n .grow-top {\n flex-grow: 1;\n }\n\n .grow-bottom {\n flex-grow: 3;\n }\n\n .bottom-padding {\n padding: 3rem;\n }\n\n .dialog-mask {\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n opacity: 0;\n position: fixed;\n top: 0px;\n left: 0px;\n transition: opacity linear calc(var(--transition-speed) / 2ms);\n pointer-events: none;\n }\n\n .mobile.dialog-mask .dialog-container {\n border-radius: 0px;\n }\n\n .dialog-mask .dialog-container {\n position: relative;\n transition: transform var(--transition-speed) var(--bounce),\n opacity ease-in-out calc(var(--transition-speed) - 50ms);\n border-radius: var(--curvature);\n box-shadow: 0px 0px 2px 4px rgba(0, 0, 0, 0.06);\n overflow: hidden;\n transform: scale(0.9) translatey(2em);\n background: white;\n margin: auto;\n display: flex;\n flex-direction: column;\n }\n\n .dialog-body {\n background: #fff;\n overflow-y: auto;\n flex-grow: 1;\n }\n\n .dialog-mask.dialog-open {\n opacity: 1;\n pointer-events: auto;\n }\n\n .dialog-mask.dialog-open .dialog-container {\n top: inherit;\n }\n\n .dialog-mask.dialog-animation-end .dialog-container {\n transform: scale(1) !important;\n }\n\n .dialog-mask.dialog-ready .dialog-container {\n transform: none;\n }\n\n .dialog-mask.dialog-loading .dialog-container {\n margin-top: -10000px;\n }\n\n .header-text {\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 20px;\n padding: 12px 20px;\n font-weight: 300;\n color: var(--header-text);\n background: var(--header-bg);\n }\n\n .header-text .title {\n flex-grow: 1;\n }\n\n .header-text .status {\n font-size: 0.6em;\n font-weight: bold;\n }\n\n .dialog-footer {\n background: var(--color-primary-light);\n padding: 10px;\n display: flex;\n flex-flow: row;\n align-items: center;\n }\n\n temba-button {\n margin-left: 10px;\n }\n\n .dialog-body temba-loading {\n position: absolute;\n right: 12px;\n margin-top: -30px;\n padding-bottom: 9px;\n display: none;\n }\n\n #page-loader {\n text-align: center;\n display: block;\n position: relative;\n opacity: 0;\n margin: auto;\n margin-top: 30px;\n width: 154px;\n transition: opacity calc(var(--transition-speed) * 5ms) ease-in\n calc(var(--transition-speed * 2));\n visibility: hidden;\n }\n\n .dialog-mask.dialog-loading #page-loader {\n opacity: 1;\n visibility: visible;\n }\n\n #submit-loader {\n flex-grow: 1;\n text-align: right;\n }\n `;\n }\n\n @property({ type: Boolean })\n open: boolean;\n\n @property()\n header: string;\n\n @property()\n body: string;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n loading: boolean;\n\n @property({ type: Boolean })\n hideOnClick: boolean;\n\n @property({ type: Boolean })\n noFocus: boolean;\n\n @property()\n size = 'medium';\n\n @property({ type: String })\n primaryButtonName = 'Ok';\n\n @property({ type: String })\n cancelButtonName = 'Cancel';\n\n @property({ type: String })\n width = null;\n\n @property()\n submittingName = 'Saving';\n\n @property()\n animationEnd: boolean;\n\n @property()\n ready: boolean;\n\n @property({ type: Array })\n buttons: DialogButton[] = [];\n\n @property({ attribute: false })\n onButtonClicked: (button: Button) => void;\n\n scrollOffset: any = 0;\n\n public constructor() {\n super();\n }\n\n protected firstUpdated(\n changes: PropertyValueMap\n ${renderCompletionOption(this.currentFunction, true)}\n
\n `\n : null}\n \n \n \n
\n `\n : null;\n\n return html`\n \n
\n ${this.header}
\n \n \n
\n\n \n \n \n ${header}\n
\n \n \n \n \n `;\n }\n}\n","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\n ${this.body ? this.body : html`
\n\n \n \n
\n \n ${wizardStepBalls}
\n \n
\n `;\n }\n}\n","import { LitElement, TemplateResult, html, css } from 'lit';\nimport { getClasses } from '../utils';\n\nimport { property } from 'lit/decorators.js';\n\nexport class Button extends LitElement {\n static get styles() {\n return css`\n :host {\n display: inline-block;\n font-family: var(--font-family);\n font-weight: 400;\n }\n\n .small {\n font-size: 0.8em;\n --button-y: 0px;\n --button-x: 0.5em;\n }\n\n .v-2.button-container {\n background: var(--button-bg);\n background-image: var(--button-bg-img);\n color: var(--button-text);\n box-shadow: var(--button-shadow);\n transition: all calc(var(--transition-speed) / 2) ease-in;\n }\n\n .button-container {\n color: #fff;\n cursor: pointer;\n display: block;\n border-radius: var(--curvature);\n outline: none;\n transition: background ease-in var(--transition-speed);\n user-select: none;\n -webkit-user-select: none;\n text-align: center;\n }\n\n .button-name {\n white-space: nowrap;\n }\n\n .secondary-button:hover .button-mask {\n border: 1px solid var(--color-button-secondary);\n }\n\n .button-mask:hover {\n background: rgba(0, 0, 0, 0.05);\n }\n\n .button-container:focus {\n outline: none;\n margin: 0;\n }\n\n .button-container:focus {\n box-shadow: var(--widget-box-shadow-focused);\n }\n\n .button-container.secondary-button:focus .button-mask {\n background: transparent;\n }\n\n .button-mask {\n padding: var(--button-y) var(--button-x);\n border-radius: var(--curvature);\n border: 1px solid transparent;\n transition: var(--transition-speed);\n background: var(--button-mask);\n }\n\n .button-container.disabled-button {\n background: rgba(0, 0, 0, 0.05);\n color: rgba(255, 255, 255, 0.45);\n cursor: default;\n }\n\n .button-container.disabled-button .button-mask {\n box-shadow: 0 0 0px 1px var(--color-button-disabled);\n }\n\n .button-container.disabled-button:hover .button-mask {\n box-shadow: 0 0 0px 1px var(--color-button-disabled);\n background: rgba(0, 0, 0, 0.05);\n }\n\n .button-container.active-button .button-mask {\n }\n\n .secondary-button.active-button {\n background: transparent;\n color: var(--color-text);\n }\n\n .secondary-button.active-button .button-mask {\n border: none;\n }\n\n .button-container.secondary-button.active-button:focus .button-mask {\n background: transparent;\n box-shadow: none;\n }\n\n .primary-button {\n background: var(--color-button-primary);\n color: var(--color-button-primary-text);\n }\n\n .light-button {\n background: var(--color-button-light);\n color: var(--color-button-light-text);\n }\n\n .attention-button {\n background: var(--color-button-attention);\n color: var(--color-button-primary-text);\n }\n\n .secondary-button {\n background: transparent;\n color: var(--color-text);\n font-weight: 300;\n }\n\n .destructive-button {\n background: var(--color-button-destructive);\n color: var(--color-button-destructive-text);\n }\n\n .button-mask.disabled-button {\n background: rgba(0, 0, 0, 0.1);\n }\n\n .secondary-button .button-mask:hover {\n background: transparent;\n }\n\n .submit-animation {\n padding: 1px 4px;\n }\n\n .submit-animation temba-loading {\n margin-bottom: -3px;\n line-height: normal;\n }\n `;\n }\n\n @property({ type: Boolean })\n primary: boolean;\n\n @property({ type: Boolean })\n secondary: boolean;\n\n @property({ type: Boolean })\n attention: boolean;\n\n @property({ type: Number })\n v = 1;\n\n @property({ type: Boolean })\n destructive: boolean;\n\n @property({ type: Boolean })\n light: boolean;\n\n @property()\n name: string;\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n submitting: boolean;\n\n @property({ type: Boolean })\n active: boolean;\n\n @property({ type: Boolean })\n small: boolean;\n\n @property({ type: String })\n href: string;\n\n @property({ type: Number })\n index?: number;\n\n private handleClick(evt: MouseEvent) {\n if (this.disabled) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n if (this.href && !this.disabled) {\n this.ownerDocument.location.href = this.href;\n evt.preventDefault();\n evt.stopPropagation();\n }\n }\n\n private handleKeyUp(event: KeyboardEvent): void {\n this.active = false;\n if (event.key === 'Enter') {\n this.click();\n }\n }\n\n private handleMouseDown(): void {\n if (!this.disabled && !this.submitting) {\n this.active = true;\n this.classList.add('active');\n }\n }\n\n private handleMouseUp(): void {\n this.active = false;\n this.classList.remove('active');\n }\n\n public render(): TemplateResult {\n const buttonName = this.submitting\n ? html`\n
`\n : this.name;\n\n return html`\n ${error}
`;\n })\n : [];\n\n if (this.widgetOnly) {\n return html`\n \n ${!!this.name && !this.hideLabel && !!this.label\n ? html`\n
\n `;\n }\n}\n","import { html, TemplateResult, css, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { range } from '../utils';\n\nexport class Loading extends LitElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n .loading-unit {\n border: 1px inset rgba(0, 0, 0, 0.05);\n animation: loading-pulse 0.9s cubic-bezier(0.3, 0, 0.7, 1) infinite;\n }\n\n .loading-container {\n display: flex;\n }\n\n @keyframes loading-pulse {\n 0% {\n transform: scale(0.2);\n opacity: 0.1;\n }\n 20% {\n transform: scale(1);\n opacity: 1;\n }\n 100% {\n transform: scale(0.2);\n opacity: 0.1;\n }\n }\n `;\n }\n\n @property({ type: String })\n color = 'var(--color-primary-dark)';\n\n @property({ type: Number })\n size = 5;\n\n @property({ type: Number })\n units = 5;\n\n @property({ type: Boolean })\n square?: boolean;\n\n @property({ type: String })\n direction = 'row';\n\n public render(): TemplateResult {\n const margin = this.size / 2;\n\n return html`\n \n ${range(0, this.units).map((num: number) => {\n const ballStyle = {\n 'border-radius': this.square ? '0' : '50%',\n width: this.size + 'px',\n height: this.size + 'px',\n margin: margin + 'px',\n animationDelay: `-${1 - num * (1 / this.units)}s`,\n background: this.color,\n };\n return html`\n \n `;\n })}\n
\n `;\n }\n}\n","// '@£$¥èéùìòÇ\\nØø\\rÅåΔ_ΦΓΛΩΠΨΣΘΞÆæßÉ\\x20!\"#¤%&\\'()*+,-./0123456789:;<=>?¡ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÑܧ¿abcdefghijklmnopqrstuvwxyzäöñüà\\f^{}\\\\[~]|€'\nconst GSM_charCodes = [\n 10, 12, 13, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47,\n 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66,\n 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85,\n 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 97, 98, 99, 100, 101, 102, 103, 104,\n 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119,\n 120, 121, 122, 123, 124, 125, 126, 161, 163, 164, 165, 167, 191, 196, 197,\n 198, 199, 201, 209, 214, 216, 220, 223, 224, 228, 229, 230, 232, 233, 236,\n 241, 242, 246, 248, 249, 252, 915, 916, 920, 923, 926, 928, 931, 934, 936,\n 937, 8364,\n];\n\n// '\\f|^€{}[~]\\\\'\nconst GSMe_charCodes = [12, 91, 92, 93, 94, 123, 124, 125, 126, 8364];\n\nfunction existsInArray(code, array) {\n const len = array.length;\n let i = 0;\n while (i < len) {\n const e = array[i];\n if (code === e) return true;\n i++;\n }\n return false;\n}\n\nexport function validateCharacter(character) {\n const code = character.charCodeAt(0);\n return existsInArray(code, GSM_charCodes);\n}\n\nexport function validateMessage(message) {\n for (let i = 0; i < message.length; i++) {\n if (!validateCharacter(message.charAt(i))) return false;\n }\n return true;\n}\n\nexport function validateExtendedCharacter(character) {\n const code = character.charCodeAt(0);\n return existsInArray(code, GSMe_charCodes);\n}\n","import { validateCharacter, validateExtendedCharacter } from './gsmvalidator';\n\nfunction isHighSurrogate(code) {\n return code >= 0xd800 && code <= 0xdbff;\n}\n\nexport const gsmSplit = function (message, options) {\n options = options || { summary: false };\n\n if (message === '') {\n return {\n parts: [\n {\n content: options.summary ? undefined : '',\n length: 0,\n bytes: 0,\n },\n ],\n totalLength: 0,\n totalBytes: 0,\n };\n }\n\n const messages = [];\n let length = 0;\n let bytes = 0;\n let totalBytes = 0;\n let totalLength = 0;\n let messagePart = '';\n\n function bank() {\n const msg = {\n content: options.summary ? undefined : messagePart,\n length: length,\n bytes: bytes,\n };\n messages.push(msg);\n\n totalLength += length;\n length = 0;\n totalBytes += bytes;\n bytes = 0;\n messagePart = '';\n }\n\n for (let i = 0, count = message.length; i < count; i++) {\n let c = message.charAt(i);\n\n if (!validateCharacter(c)) {\n if (isHighSurrogate(c.charCodeAt(0))) {\n i++;\n }\n c = '\\u0020';\n } else if (validateExtendedCharacter(c)) {\n if (bytes === 152) bank();\n bytes++;\n }\n\n bytes++;\n length++;\n\n if (!options.summary) messagePart += c;\n\n if (bytes === 153) bank();\n }\n\n if (bytes > 0) bank();\n\n if (messages[1] && totalBytes <= 160) {\n return {\n parts: [\n {\n content: options.summary\n ? undefined\n : messages[0].content + messages[1].content,\n length: totalLength,\n bytes: totalBytes,\n },\n ],\n totalLength: totalLength,\n totalBytes: totalBytes,\n };\n }\n\n return {\n parts: messages,\n totalLength: totalLength,\n totalBytes: totalBytes,\n };\n};\n","function isHighSurrogate(code) {\n return code >= 0xd800 && code <= 0xdbff;\n}\n\nexport const unicodeSplit = function (message, options) {\n options = options || { summary: false };\n\n if (message === '') {\n return {\n parts: [\n {\n content: options.summary ? undefined : '',\n length: 0,\n bytes: 0,\n },\n ],\n totalLength: 0,\n totalBytes: 0,\n };\n }\n\n const messages = [];\n let length = 0;\n let bytes = 0;\n let totalBytes = 0;\n let totalLength = 0;\n let partStart = 0;\n\n function bank(partEnd = undefined) {\n const msg = {\n content: options.summary\n ? undefined\n : partEnd\n ? message.substring(partStart, partEnd + 1)\n : message.substring(partStart),\n length: length,\n bytes: bytes,\n };\n messages.push(msg);\n\n partStart = partEnd + 1;\n\n totalLength += length;\n length = 0;\n totalBytes += bytes;\n bytes = 0;\n }\n\n for (let i = 0, count = message.length; i < count; i++) {\n const code = message.charCodeAt(i);\n const highSurrogate = isHighSurrogate(code);\n\n if (highSurrogate) {\n if (bytes === 132) bank(i - 1);\n bytes += 2;\n i++;\n }\n\n bytes += 2;\n length++;\n\n if (bytes === 134) bank(i);\n }\n\n if (bytes > 0) bank();\n\n if (messages[1] && totalBytes <= 140) {\n return {\n parts: [\n {\n content: options.summary ? undefined : message,\n length: totalLength,\n bytes: totalBytes,\n },\n ],\n totalLength: totalLength,\n totalBytes: totalBytes,\n };\n }\n\n return {\n parts: messages,\n totalLength: totalLength,\n totalBytes: totalBytes,\n };\n};\n","/**\n * This is the same SMS splitter we've been using but we've\n * updated it here to use it with ESM imports\n * See https://github.com/Codesleuth/split-sms\n */\n\nimport { gsmSplit } from './gsmsplitter';\nimport { validateMessage } from './gsmvalidator';\nimport { unicodeSplit } from './unicodesplitter';\n\nexport const UNICODE = 'Unicode';\nexport const GSM = 'GSM';\n\nfunction calculateRemaining(parts, singleBytes, multiBytes, charBytes) {\n const max = parts.length === 1 ? singleBytes : multiBytes;\n return (max - parts[parts.length - 1].bytes) / charBytes;\n}\n\nexport const splitSMS = function (message: string, options: any = {}) {\n const characterset = options && options.characterset;\n\n options = {\n summary: options && options.summary,\n };\n\n const isGsm =\n (characterset === undefined && validateMessage(message)) ||\n characterset === GSM;\n let splitResult, singleBytes, multiBytes, charBytes;\n\n if (isGsm) {\n splitResult = gsmSplit(message, options);\n singleBytes = 160;\n multiBytes = 153;\n charBytes = 1;\n } else {\n splitResult = unicodeSplit(message, options);\n singleBytes = 140;\n multiBytes = 134;\n charBytes = 2;\n }\n\n const remainingInPart = calculateRemaining(\n splitResult.parts,\n singleBytes,\n multiBytes,\n charBytes\n );\n\n return {\n characterSet: isGsm ? GSM : UNICODE,\n parts: splitResult.parts,\n bytes: splitResult.totalBytes,\n length: splitResult.totalLength,\n remainingInPart: remainingInPart,\n };\n};\n","export const MAX_GSM_SINGLE = 160;\nexport const MAX_GSM_MULTI = 153;\nexport const MAX_UNICODE_SINGLE = 70;\nexport const MAX_UNICODE_MULTI = 67;\n\nexport const COMPLETION_HELP = 'Tab to complete, enter to select';\n\nexport const GSM: { [key: string]: number } = {\n // char: charCode\n 0: 48,\n 1: 49,\n 2: 50,\n 3: 51,\n 4: 52,\n 5: 53,\n 6: 54,\n 7: 55,\n 8: 56,\n 9: 57,\n '\\n': 10,\n '\\f': 12,\n '\\r': 13,\n ' ': 32,\n '!': 33,\n '\"': 34,\n '#': 35,\n $: 36,\n '%': 37,\n '&': 38,\n \"'\": 39,\n '(': 40,\n ')': 41,\n '*': 42,\n '+': 43,\n ',': 44,\n '-': 45,\n '.': 46,\n '/': 47,\n ':': 58,\n ';': 59,\n '<': 60,\n '=': 61,\n '>': 62,\n '?': 63,\n '@': 64,\n A: 65,\n B: 66,\n C: 67,\n D: 68,\n E: 69,\n F: 70,\n G: 71,\n H: 72,\n I: 73,\n J: 74,\n K: 75,\n L: 76,\n M: 77,\n N: 78,\n O: 79,\n P: 80,\n Q: 81,\n R: 82,\n S: 83,\n T: 84,\n U: 85,\n V: 86,\n W: 87,\n X: 88,\n Y: 89,\n Z: 90,\n '[': 91,\n '\\\\': 92,\n ']': 93,\n '^': 94,\n _: 95,\n a: 97,\n b: 98,\n c: 99,\n d: 100,\n e: 101,\n f: 102,\n g: 103,\n h: 104,\n i: 105,\n j: 106,\n k: 107,\n l: 108,\n m: 109,\n n: 110,\n o: 111,\n p: 112,\n q: 113,\n r: 114,\n s: 115,\n t: 116,\n u: 117,\n v: 118,\n w: 119,\n x: 120,\n y: 121,\n z: 122,\n '{': 123,\n '|': 124,\n '}': 125,\n '~': 126,\n '¡': 161,\n '£': 163,\n '¤': 164,\n '¥': 165,\n '§': 167,\n '¿': 191,\n Ä: 196,\n Å: 197,\n Æ: 198,\n Ç: 199,\n É: 201,\n Ñ: 209,\n Ö: 214,\n Ø: 216,\n Ü: 220,\n ß: 223,\n à: 224,\n ä: 228,\n å: 229,\n æ: 230,\n è: 232,\n é: 233,\n ì: 236,\n ñ: 241,\n ò: 242,\n ö: 246,\n ø: 248,\n ù: 249,\n ü: 252,\n Γ: 915,\n Δ: 916,\n Θ: 920,\n Λ: 923,\n Ξ: 926,\n Π: 928,\n Σ: 931,\n Φ: 934,\n Ψ: 936,\n Ω: 937,\n '€': 8364,\n};\n\nexport const isGSM = (char: string): boolean => {\n // eslint-disable-next-line no-prototype-builtins\n return GSM.hasOwnProperty(char);\n};\n\nexport const getExtendedCharacters = (text: string): string[] => {\n const extended: { [ch: string]: boolean } = {};\n for (const ch of text) {\n if (!isGSM(ch)) {\n extended[ch] = true;\n }\n }\n return Object.keys(extended);\n};\n","import { css, html, TemplateResult } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { splitSMS } from '../sms';\nimport { getExtendedCharacters } from './helpers';\nimport { property } from 'lit/decorators.js';\n\nexport class CharCount extends RapidElement {\n static get styles() {\n return css`\n :host {\n overflow: auto;\n }\n\n :host::after {\n content: '';\n clear: both;\n display: table;\n }\n\n .counter {\n float: right;\n text-align: right;\n position: relative;\n }\n\n .extended {\n font-size: 14px;\n display: flex;\n margin-top: 4px;\n }\n\n .extended-char {\n border: 1px solid #e6e6e6;\n border-radius: var(--curvature-widget);\n padding: 4px;\n text-align: center;\n line-height: 20px;\n margin-right: 4px;\n }\n\n .summary {\n width: 180px;\n padding: 8px 12px;\n font-size: 12px;\n background: white;\n border-radius: var(--curvature-widget);\n overflow: hidden;\n opacity: 0.3;\n transform: scale(0.7);\n box-shadow: var(--shadow);\n transition: transform cubic-bezier(0.71, 0.18, 0.61, 1.33)\n var(--transition-speed);\n visibility: hidden;\n margin-top: var(--temba-charcount-summary-margin-top);\n right: var(--temba-charcount-summary-right);\n bottom: var(--temba-charcount-summary-bottom);\n text-align: left;\n position: var(--temba-charcount-summary-position);\n z-index: 1000;\n }\n\n .fine-print {\n margin-top: 8px;\n margin-left: -12px;\n margin-right: -12px;\n margin-bottom: -8px;\n padding: 8px 12px;\n color: #999;\n background: #f5f5f5;\n font-size: 10px;\n }\n\n .extended-warning {\n margin-top: 8px;\n }\n\n .note {\n font-weight: 600;\n display: inline-block;\n margin-right: 2px;\n }\n\n .counts {\n cursor: pointer;\n transition: all cubic-bezier(0.71, 0.18, 0.61, 1.33) 200ms;\n transform: scale(0.9);\n display: inline-block;\n padding: 2px 6px;\n border-radius: var(--curvature);\n margin-top: var(--temba-charcount-counts-margin-top);\n }\n\n .segments {\n font-size: 85%;\n display: inline-block;\n }\n\n .attention .counts {\n transform: scale(0.95);\n background: var(--color-overlay-light);\n color: var(--color-overlay-light-text);\n }\n\n .attention .segments {\n font-weight: 600;\n }\n\n .counter:hover .summary {\n opacity: 1;\n transform: scale(1);\n visibility: visible;\n }\n `;\n }\n\n @property({ type: String })\n text: string;\n\n @property({ type: Number })\n count: number;\n\n @property({ type: Number, attribute: false })\n segments: number;\n\n @property({ type: Object, attribute: false })\n extended: string[] = [];\n\n public updated(changes: Map${ch}
`\n );\n extended = html`\n \n Some characters require more space over SMS. To save on fees, consider\n replacing them.\n
\n `;\n }\n\n const summary =\n this.count > 1\n ? html` ${extended}
\n \n This message is ${this.count} characters\n ${segments} ${extended}\n ${hasExpressions\n ? html`\n
`\n : null;\n\n return html`\n
\n `\n : null}\n NOTE
\n Using variables may result in more messages when sending\n over SMS than this estimate.\n ${this.count}${\n this.segments > 1 || hasExpressions\n ? html`
${summary}\n / ${this.segments}${hasExpressions ? html`+` : null}\n \n
`\n : null\n }${contactHistory} ${chatbox}
\n `;\n return html`${contactHistoryAndChatbox}`;\n }\n\n private getTembaContactHistory(): TemplateResult {\n return html` \n \n \n
`;\n }\n}\n","import { Contact, User } from '../interfaces';\nimport { fetchResults, getUrl, postUrl, WebResponse } from '../utils';\nimport { ContactHistoryPage } from './events';\n\nexport const SCROLL_THRESHOLD = 100;\nexport const SIMULATED_WEB_SLOWNESS = 0;\nexport const MAX_CHAT_REFRESH = 10000;\nexport const MIN_CHAT_REFRESH = 500;\nexport const BODY_SNIPPET_LENGTH = 250;\n\nexport const closeTicket = (uuid: string): Promise\n
`;\n }\n\n return html`Attachment ${ext}
\n ${inner}
`;\n};\n\nexport const renderMsgEvent = (event: MsgEvent): TemplateResult => {\n const isInbound = event.type === Events.MESSAGE_RECEIVED;\n const isError = event.status === 'E';\n const isFailure = event.status === 'F';\n\n // summary items which appear under the message bubble\n const summary: TemplateResult[] = [];\n\n if (event.logs_url) {\n summary.push(html` \n \n
`);\n } else if (isError) {\n summary.push(\n html`${event.recipient_count} contacts
`\n );\n }\n summary.push(html`•
`);\n }\n\n if (event.optin) {\n summary.push(\n html`${event.optin.name}
\n •
`\n );\n }\n\n if (event.status === 'Q') {\n summary.push(html`Queued
`);\n }\n\n summary.push(\n html`\n \n ${event.msg.text\n ? html`
\n\n ${!event.msg.text && !event.msg.attachments && !event.optin\n ? html`${event.msg.text}
`\n : null}\n ${event.msg.attachments\n ? html` `\n : null}\n Unsupported Message
`\n : null}\n\n \n ${verb}\n \n ${event.flow.name}\n \n
\n `;\n};\n\nexport const renderResultEvent = (event: UpdateResultEvent): TemplateResult => {\n if (event.name.startsWith('_')) {\n return null;\n }\n return html`\n \n Updated\n
\n `;\n};\n\nexport const renderUpdateEvent = (event: UpdateFieldEvent): TemplateResult => {\n return html`\n ${event.name}
\n to\n ${event.value}
\n ${event.category\n ? html`with category\n ${event.category}
`\n : null}\n \n ${event.value\n ? html`Updated\n
\n `;\n};\n\nexport const renderNameChanged = (event: NameChangedEvent): TemplateResult => {\n return html`\n ${event.field.name}
\n to\n ${event.value.text}
`\n : html`Cleared\n ${event.field.name}
`}\n \n Updated\n
\n `;\n};\n\nexport const renderContactURNsChanged = (\n event: URNsChangedEvent\n): TemplateResult => {\n return html`\n Name
\n to\n ${event.name}
\n \n Updated\n
\n \n `;\n};\n\nexport const renderEmailSent = (event: EmailSentEvent): TemplateResult => {\n return html`\n URNs
\n to\n ${oxfordFn(\n event.urns,\n (urn: string) =>\n html`${urn.split(':')[1].split('?')[0]}
`\n )}\n \n Email sent to\n
\n `;\n};\n\nexport const renderLabelsAdded = (event: LabelsAddedEvent): TemplateResult => {\n return html`\n ${oxford(event.to, 'and')}
\n with subject\n ${event.subject}
\n \n Message labeled with\n
\n `;\n};\n\nexport const renderNoteCreated = (event: TicketEvent): TemplateResult => {\n return html` ${oxfordNamed(event.labels, 'and')}
\n \n
`;\n};\n\nexport const renderTicketAction = (\n event: TicketEvent,\n action: string,\n grouped: boolean\n): TemplateResult => {\n if (grouped) {\n return html`\n
\n ${event.note}
\n \n \n \n
\n \n
`;\n }\n\n return html`\n \n ${getDisplayName(event.created_by)} ${action} a\n \n ticket\n \n
\n \n
\n `;\n};\n\nexport const renderTicketAssigned = (event: TicketEvent): TemplateResult => {\n return html`\n \n ${event.created_by\n ? html` ${getDisplayName(event.created_by)} ${action} this ticket `\n : html` This ticket was ${action} `}\n
\n \n \n
\n \n
\n `;\n};\n\nexport const renderTicketOpened = (\n event: TicketEvent,\n handleClose: (uuid: string) => void,\n grouped: boolean\n): TemplateResult => {\n if (grouped) {\n return html`\n ${event.assignee\n ? event.assignee.id === event.created_by.id\n ? html`${getDisplayName(event.created_by)} took this ticket`\n : html`${getDisplayName(event.created_by)} assigned this ticket to\n
\n ${getDisplayName(event.assignee)}
`\n : html`${getDisplayName(event.created_by)} unassigned this ticket`}\n \n \n
\n \n
`;\n } else {\n return html`\n \n ${event.ticket.topic.name}\n ticket \n was opened\n
\n \n
\n `;\n }\n};\n\nexport const renderErrorMessage = (\n event: ErrorMessageEvent\n): TemplateResult => {\n return html`\n \n ${getDisplayName(event.created_by)} opened this ticket\n
\n \n \n
\n \n ${event.text}\n ${event.type === Events.FAILURE\n ? html`
\n `;\n};\n\nexport const renderWebhookEvent = (event: WebhookEvent): TemplateResult => {\n return html`\n Run ended prematurely, check the flow design.
`\n : null}\n \n ${event.status === 'success'\n ? html`Successfully called ${event.url}`\n : html`Failed to call ${event.url}`}\n
\n \n `;\n};\n\nexport const renderAirtimeTransferredEvent = (\n event: AirtimeTransferredEvent\n): TemplateResult => {\n if (parseFloat(event.actual_amount) === 0) {\n return html`Airtime transfer failed
`;\n }\n\n return html`\n Transferred\n
`;\n};\n\nexport const renderCallStartedEvent = (): TemplateResult => {\n return html`${event.actual_amount} ${event.currency}
\n of airtime\n Call Started
`;\n};\n\nexport const renderContactLanguageChangedEvent = (\n event: ContactLanguageChangedEvent\n): TemplateResult => {\n return html`\n Language updated to ${event.language}\n
`;\n};\n\nexport const renderOptinRequested = (\n event: OptinRequestedEvent\n): TemplateResult => {\n return html`\n Requested opt-in for ${event.optin.name}\n
`;\n};\n\nexport const renderChannelEvent = (event: ChannelEvent): TemplateResult => {\n let eventMessage: string | TemplateResult = '';\n let icon = Icon.call;\n\n if (event.event.type === 'mt_miss') {\n eventMessage = 'Missed outgoing call';\n icon = Icon.call_missed;\n } else if (event.event.type === 'mo_miss') {\n eventMessage = 'Missed incoming call';\n icon = Icon.call_missed;\n } else if (event.event.type === 'new_conversation') {\n eventMessage = 'Started Conversation';\n icon = Icon.event;\n } else if (event.channel_event_type === 'welcome_message') {\n eventMessage = 'Welcome Message Sent';\n icon = Icon.event;\n } else if (event.event.type === 'referral') {\n eventMessage = 'Referred';\n icon = Icon.event;\n } else if (event.event.type === 'follow') {\n eventMessage = 'Followed';\n icon = Icon.event;\n } else if (event.event.type === 'stop_contact') {\n eventMessage = 'Stopped';\n icon = Icon.contact_stopped;\n } else if (event.event.type === 'mt_call') {\n eventMessage = 'Outgoing Phone Call';\n } else if (event.event.type == 'mo_call') {\n eventMessage = 'Incoming Phone call';\n } else if (event.event.type == 'optin') {\n eventMessage = html`Opted in to\n ${event.event.optin?.name}`;\n icon = Icon.optin;\n } else if (event.event.type == 'optout') {\n eventMessage = html`Opted out of\n ${event.event.optin?.name}`;\n icon = Icon.optout;\n }\n\n return html`${eventMessage}
`;\n};\n\nexport const renderCampaignFiredEvent = (\n event: CampaignFiredEvent\n): TemplateResult => {\n return html`\n Campaign\n ${event.campaign.name} \n ${event.fired_result === 'S' ? 'skipped' : 'triggered'}\n \n ${event.campaign_event.offset_display}\n ${event.campaign_event.relative_to.name} \n
`;\n};\n\nexport const renderContactGroupsEvent = (\n event: ContactGroupsEvent\n): TemplateResult => {\n const groups = event.groups_added || event.groups_removed;\n const added = !!event.groups_added;\n return html`\n \n ${added ? 'Added to' : 'Removed from'}\n ${oxfordFn(\n groups,\n (group: ObjectReference) =>\n html`${group.name} `\n )}\n ${event.type === Events.FAILURE\n ? html`
\n `;\n};\n","import { css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { html, TemplateResult } from 'lit-html';\nimport { Contact, CustomEventType, Msg, Ticket } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { Asset, getAssets, getClasses, postJSON, throttle } from '../utils';\n\nimport {\n AirtimeTransferredEvent,\n CampaignFiredEvent,\n ChannelEvent,\n ContactEvent,\n ContactGroupsEvent,\n ContactHistoryPage,\n ContactLanguageChangedEvent,\n EmailSentEvent,\n ErrorMessageEvent,\n EventGroup,\n Events,\n FlowEvent,\n getEventGroupType,\n getEventStyles,\n LabelsAddedEvent,\n MsgEvent,\n NameChangedEvent,\n OptinRequestedEvent,\n renderAirtimeTransferredEvent,\n renderCallStartedEvent,\n renderCampaignFiredEvent,\n renderChannelEvent,\n renderContactGroupsEvent,\n renderContactLanguageChangedEvent,\n renderContactURNsChanged,\n renderEmailSent,\n renderErrorMessage,\n renderFlowEvent,\n renderLabelsAdded,\n renderMsgEvent,\n renderNameChanged,\n renderNoteCreated,\n renderOptinRequested,\n renderResultEvent,\n renderTicketAction,\n renderTicketAssigned,\n renderTicketOpened,\n renderUpdateEvent,\n renderWebhookEvent,\n TicketEvent,\n UpdateFieldEvent,\n UpdateResultEvent,\n URNsChangedEvent,\n WebhookEvent,\n} from './events';\nimport {\n fetchContactHistory,\n MAX_CHAT_REFRESH,\n MIN_CHAT_REFRESH,\n SCROLL_THRESHOLD,\n} from './helpers';\nimport { Lightbox } from '../lightbox/Lightbox';\nimport { Store } from '../store/Store';\n\n// when images load, make sure we are on the bottom of the scroll window if necessary\nexport const loadHandler = function (event) {\n const target = event.target as HTMLElement;\n const events = this.host.getEventsPane();\n if (target.tagName == 'IMG') {\n if (!this.host.showMessageAlert) {\n if (\n events.scrollTop > target.offsetTop - 1000 &&\n target.offsetTop > events.scrollHeight - 500\n ) {\n this.host.scrollToBottom();\n }\n }\n }\n};\n\nexport class ContactHistory extends RapidElement {\n public httpComplete: PromiseRun ended prematurely, check the flow design.
`\n : null}\n ${event.type}
`;\n }\n\n private handleClose(uuid: string) {\n this.httpComplete = postJSON(`/api/v2/ticket_actions.json`, {\n tickets: [uuid],\n action: 'close',\n })\n .then(() => {\n this.refreshTickets();\n this.refresh();\n this.fireCustomEvent(CustomEventType.ContentChanged, {\n ticket: { uuid, status: 'closed' },\n });\n })\n .catch((response: any) => {\n console.error(response);\n });\n }\n\n public checkForAgentAssignmentEvent(agent: string) {\n this.httpComplete = getAssets(\n `/api/v2/tickets.json?uuid=${this.ticket}`\n ).then((assets: Asset[]) => {\n if (assets.length === 1) {\n const ticket = assets[0] as Ticket;\n if (ticket.assignee && ticket.assignee.email === agent) {\n this.fireCustomEvent(CustomEventType.ContentChanged, {\n ticket: { uuid: this.ticket, assigned: 'self' },\n });\n } else {\n this.fireCustomEvent(CustomEventType.ContentChanged, {\n ticket: {\n uuid: this.ticket,\n assigned: ticket.assignee ? ticket.assignee : null,\n },\n });\n }\n }\n });\n }\n\n public getEventHandlers() {\n return [\n {\n event: 'scroll',\n method: throttle(this.handleScroll, 50),\n },\n ];\n }\n\n /** Check if a ticket event is no longer represented in a session */\n private isPurged(ticket: Ticket): boolean {\n return !this.ticketEvents[ticket.uuid];\n }\n\n private handleEventClicked(event) {\n const ele = event.target as HTMLDivElement;\n if (ele.tagName == 'IMG') {\n // if we have one, show in our lightbox\n const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n if (lightbox) {\n lightbox.showElement(ele);\n }\n }\n }\n\n private renderEventContainer(event: ContactEvent) {\n const renderedEvent = html`\n ${JSON.stringify(event, null, 2)}` : null}\n `;\n return renderedEvent;\n }\n\n public render(): TemplateResult {\n return html`\n ${\n this.fetching\n ? html`\n ${this.eventGroups.map((eventGroup: EventGroup, index: number) => {\n const grouping = getEventGroupType(eventGroup.events[0], this.ticket);\n const groupIndex = this.eventGroups.length - index - 1;\n\n const classes = getClasses({\n grouping: true,\n [grouping]: true,\n expanded: eventGroup.open,\n });\n return html`
`;\n })}\n \n\n ${\n this.contact && this.contact.status === 'active'\n ? html`\n `\n : null\n }\n \n \n `;\n }\n}\n","import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { fetchResultsPage, ResultsPage } from '../utils';\n\nconst DEFAULT_REFRESH = 10000;\n\nexport class TembaList extends RapidElement {\n @property({ type: Array, attribute: false })\n items: any[] = [];\n\n @property({ type: Object, attribute: false })\n selected: any;\n\n @property({ type: Number })\n cursorIndex = -1;\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: String })\n nextSelection: any;\n\n @property({ type: Number })\n tabIndex = 1;\n\n @property({ type: String })\n valueKey = 'id';\n\n @property({ type: String })\n value: string;\n\n @property({ type: Boolean })\n loading = false;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n @property({ type: Boolean })\n hideShadow: boolean;\n\n @property({ type: Boolean })\n paused = false;\n\n @property({ type: Boolean })\n internalFocusDisabled = false;\n\n @property({ attribute: false })\n getNextRefresh: (firstOption: any) => any;\n\n @property({ attribute: false })\n sanitizeOption: (option: any) => any;\n\n @property({ attribute: false })\n renderOption: (option: any, selected: boolean) => TemplateResult;\n\n @property({ attribute: false })\n renderOptionDetail: (option: any, selected: boolean) => TemplateResult;\n\n @property({ attribute: false, type: Object })\n mostRecentItem: any;\n\n // changes to the refresh key force a refresh\n @property({ type: String })\n refreshKey = '0';\n\n reverseRefresh = true;\n\n // our next page from our endpoint\n nextPage: string = null;\n\n pages = 0;\n clearRefreshTimeout: any;\n pending: AbortController[] = [];\n\n store: Store;\n\n // used for testing only\n preserve: boolean;\n\n static get styles() {\n return css`\n temba-options {\n display: block;\n width: 100%;\n flex-grow: 1;\n }\n `;\n }\n\n constructor() {\n super();\n this.store = document.querySelector('temba-store') as Store;\n this.handleSelection.bind(this);\n }\n\n private reset(): void {\n this.selected = null;\n this.nextPage = null;\n this.cursorIndex = -1;\n this.mostRecentItem = null;\n this.items = [];\n }\n\n refreshInterval = null;\n\n public connectedCallback() {\n super.connectedCallback();\n this.refreshInterval = setInterval(() => {\n if (!this.paused) {\n this.refreshKey = 'default_' + new Date().getTime();\n }\n }, DEFAULT_REFRESH);\n }\n\n public disconnectedCallback() {\n clearInterval(this.refreshInterval);\n }\n\n public updated(changedProperties: Map\n ${grouping === 'verbose'\n ? html`\n ${eventGroup.open\n ? html``\n : html`${eventGroup.events.length}\n ${eventGroup.events.length === 1\n ? html`event`\n : html`events`} `}\n
`\n : null}\n\n \n ${eventGroup.events.map((event: ContactEvent) => {\n if (\n event.type === Events.TICKET_ASSIGNED &&\n (event as TicketEvent).note\n ) {\n const noteEvent = { ...event };\n noteEvent.type = Events.TICKET_NOTE_ADDED;\n\n return html`${this.renderEventContainer(\n noteEvent\n )}${this.renderEventContainer(event)}`;\n } else {\n return this.renderEventContainer(event);\n }\n })}\n
\n \n \n ${contact.name}\n
\n ${contact.ticket.closed_on\n ? null\n : contact.last_msg\n ? html`\n \n
`\n : 'Unsupported Message'\n }\n \n `\n : null}\n \n \n \n
\n \n Attachment\n
\n \n ${!contact.ticket.closed_on && contact.ticket.assignee\n ? html``\n : null}\n
\n \n \n\n \n \n
\n \n `;\n };\n }\n}\n","import { css, html, TemplateResult } from 'lit';\nimport { ContactStoreElement } from './ContactStoreElement';\nimport { Icon } from '../vectoricon';\nimport { capitalize } from '../utils';\n\nconst STATUS = {\n active: 'Active',\n blocked: 'Blocked',\n stopped: 'Stopped',\n archived: 'Archived',\n};\n\nconst SCHEMES = {\n tel: 'Phone',\n whatsapp: 'WhatsApp',\n fcm: 'Firebase Cloud Messaging',\n twitter: 'Twitter',\n};\n\nexport class ContactDetails extends ContactStoreElement {\n static get styles() {\n return css`\n .urn {\n display: flex;\n padding: 0.4em 1em 0.8em 1em;\n border-bottom: 1px solid #e6e6e6;\n margin-bottom: 0.5em;\n }\n\n .urn .path {\n margin-left: 0.2em;\n }\n\n .wrapper {\n padding-top: 0em;\n }\n\n .groups {\n padding: 0.4em 0.5em 0.6em 0.5em;\n border-bottom: 1px solid #e6e6e6;\n margin-bottom: 0.4em;\n }\n .group {\n margin-right: 0.7em;\n margin-bottom: 0.7em;\n }\n\n .label {\n font-size: 0.8em;\n color: rgb(136, 136, 136);\n margin-left: 0.5em;\n margin-bottom: 0.4em;\n }\n `;\n }\n\n // Not sure if we want to include name here or not, so hold onto this for the moment\n // ${this.data.name ? html`\n ${this.data.groups.length > 0\n ? html` `;\n })}\n\n \n ${lang\n ? html``\n : null}\n\n \n \n
\n `;\n }\n}\n","import { css, html, LitElement, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class Alert extends LitElement {\n static get styles() {\n return css`\n :host {\n display: block;\n }\n\n .temba-alert {\n color: rgba(0, 0, 0, 0.8);\n padding: 0.65rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.35);\n border-left: 10px solid rgba(0, 0, 0, 0.35);\n border-radius: var(--curvature-widget);\n box-shadow: var(--shadow);\n }\n\n .temba-info {\n background: var(--color-info);\n border-color: var(--color-info-border);\n }\n\n .temba-warning {\n background: var(--color-warning);\n border-color: var(--color-warning-border);\n }\n\n .temba-error {\n border-color: var(--color-error);\n background: #fff;\n border: 1px solid var(--color-error);\n border-left: 10px solid var(--color-error);\n }\n `;\n }\n\n @property({ type: String })\n level = 'info';\n\n public render(): TemplateResult {\n return html`\n \n \n ${group.name}\n `;\n })}\n
`\n : null}\n ${this.data.urns.map(urn => {\n const parts = urn.split(':');\n let scheme = SCHEMES[parts[0]];\n if (!scheme) {\n scheme = capitalize(parts[0] as any);\n }\n return html`Groups
\n ${this.data.groups.map(group => {\n return html`\n Found\n \n ${count.toLocaleString()}\n \n contact${count !== 1 ? 's' : ''}\n
\n \n
\n \n `;\n }\n }\n\n if (\n this.summary &&\n this.summary.blockers &&\n this.summary.blockers.length > 0\n ) {\n return html`${this.summary.blockers.map(\n error =>\n html`\n ${this.advanced\n ? html` \n Start Over`\n : html` \n Edit Query`}\n
\n \n \n \n
`\n : html`${summary}
\n \n\n ${this.summary && this.summary.warnings\n ? this.summary.warnings.map(\n warning =>\n html`\n \n ${this.getPostName(option)}\n
\n \n `;\n }\n\n private getPostName(option: OmniOption): TemplateResult {\n const style = { ...postNameStyle };\n\n if (option.urn && option.type === OmniType.Contact) {\n if (option.urn !== option.name) {\n return html`${this.getIcon(option)}
\n ${option.name}
\n ${option.urn}
`;\n }\n }\n\n if (option.type === OmniType.Group) {\n return html`\n ${option.count.toLocaleString()}
\n `;\n }\n\n return null;\n }\n\n /** Selection in the multi-select select box */\n private renderSelection(option: OmniOption): TemplateResult {\n return html`\n \n ${this.getIcon(option)}\n
\n \n ) {\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 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 \n
\n \n ${this.text}\n
\n `;\n }\n}\n","import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { debounce, fetchResults, getClasses, renderAvatar } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { Dropdown } from '../dropdown/Dropdown';\nimport { NotificationList } from './NotificationList';\nimport { ResizeElement } from '../ResizeElement';\nexport interface MenuItem {\n id?: string;\n vanity_id?: string;\n name?: string;\n verbose_name?: string;\n count?: number;\n icon?: string;\n collapsed_icon?: string;\n endpoint?: string;\n loading?: boolean;\n bottom?: boolean;\n level?: number;\n href?: string;\n show_header?: boolean;\n items?: MenuItem[];\n inline?: boolean;\n type?: string;\n on_submit?: string;\n bubble?: string;\n popup?: boolean;\n avatar?: string;\n trigger?: boolean;\n event?: string;\n mobile?: boolean;\n}\n\ninterface MenuItemState {\n collapsed?: string;\n}\n\nconst findItem = (\n items: MenuItem[],\n id: string\n): { item: MenuItem; index: number } => {\n const search = items || [];\n\n const index = search.findIndex((item: MenuItem) => {\n return item.id == id || item.vanity_id == id;\n });\n\n if (index > -1) {\n const item = search[index];\n return { item, index };\n }\n\n return { item: null, index: -1 };\n};\n\nexport class TembaMenu extends ResizeElement {\n static get styles() {\n return css`\n :host {\n width: 100%;\n display: block;\n --color-widget-bg-focused: transparent;\n --options-block-shadow: none;\n }\n\n .bubble {\n width: 0.6em;\n height: 0.6em;\n right: 0em;\n bottom: 0em;\n border-radius: 99em;\n border: 0.12em solid rgba(0, 0, 0, 0.1);\n position: absolute;\n }\n\n .bubble.count {\n position: relative;\n width: inherit;\n height: inherit;\n right: inherit;\n bottom: inherit;\n color: #fff;\n line-height: 1em;\n padding: 0.12em;\n min-width: 1em;\n text-align: center;\n }\n\n .section {\n font-size: 1.5em;\n margin-bottom: 0.2em;\n color: var(--color-text-dark);\n }\n\n .collapse-toggle {\n width: 0.5em;\n cursor: pointer;\n display: block;\n margin-right: 5px;\n margin-top: 3px;\n margin-bottom: 3px;\n }\n\n .collapse-toggle:hover {\n background: rgb(100, 100, 100, 0.05);\n }\n\n .item {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n display: flex;\n --icon-color: var(--color-text-dark);\n }\n\n .item.selected,\n .item.pressed {\n background: var(--color-selection);\n color: var(--color-primary-dark);\n --icon-color: var(--color-primary-dark);\n }\n\n .root {\n display: flex;\n flex-direction: row;\n height: 100%;\n }\n\n .level {\n display: flex;\n flex-direction: column;\n }\n\n .level.hidden {\n display: none;\n }\n\n .popup {\n --icon-color: rgba(255, 255, 255, 0.7);\n }\n\n .level-0 > .item,\n .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {\n padding: 0px;\n --icon-color: rgba(255, 255, 255, 0.7);\n flex-direction: column;\n border: 0px solid green;\n width: 100%;\n display: flex;\n align-items: center;\n }\n\n .level-0 > temba-dropdown .icon-wrapper {\n padding: 0.2em 0.4em 0.2em 0.4em;\n }\n\n .level-0 > .item.selected::before,\n .level-0 > .item.selected::after {\n content: ' ';\n height: var(--curvature);\n background: var(--color-primary-dark);\n display: block;\n width: 100%;\n }\n\n .level-0 > .item.selected::before {\n border-bottom-right-radius: var(--curvature);\n }\n\n .level-0 .item > temba-tip {\n padding: 0.5em 0em;\n }\n\n .level-0 > .item.selected::after {\n border-top-right-radius: var(--curvature);\n }\n\n .level-0 {\n padding-top: var(--menu-padding) !important;\n }\n\n .level-0 > .empty {\n background: var(--color-primary-dark);\n align-self: stretch;\n flex-grow: 1;\n }\n\n .level-0 > .bottom {\n height: 1em;\n background: var(--color-primary-dark);\n }\n\n .level-0 > temba-dropdown.open > div[slot='toggle'] > .avatar {\n background: transparent !important;\n }\n\n .level-0 {\n background: var(--color-primary-dark);\n }\n\n temba-dropdown {\n }\n\n temba-dropdown > div[slot='dropdown'] .avatar > .details {\n margin-left: 0.75em;\n }\n\n temba-dropdown > div[slot='dropdown'] .bubble.count {\n margin-right: 0.75em;\n }\n\n .level-0 > .item > .details,\n .level-0 > temba-dropdown > div[slot='toggle'] .details {\n display: none !important;\n }\n\n .avatar {\n align-items: center;\n }\n\n temba-dropdown > div[slot='dropdown'] {\n }\n\n temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle,\n temba-dropdown > div[slot='dropdown'] .avatar .bubble {\n font-size: 0.7em;\n }\n\n .level-0.expanded {\n background: inherit;\n }\n\n .level-0 > .item.selected {\n background: white;\n --icon-color: var(--color-primary-dark);\n }\n\n .level {\n padding: var(--menu-padding);\n }\n\n .level-0 {\n padding: 0px;\n }\n\n .top {\n display: flex;\n align-items: center;\n flex-direction: column;\n }\n\n .item {\n padding: 0.2em 0.75em;\n margin-top: 0.1em;\n border-radius: var(--curvature);\n display: flex;\n min-width: 12em;\n position: relative;\n }\n\n .item > temba-icon {\n margin-right: 0.5em;\n }\n\n .item > .details > .name {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n width: 0;\n }\n\n .level-0 .item {\n margin-top: 0em;\n border-radius: 0px;\n min-width: inherit;\n max-width: inherit;\n }\n\n .popup:hover {\n --icon-color: #fff;\n }\n\n .level-0 > .item > temba-icon {\n margin-right: 0px;\n }\n\n .level-0 > .item > .name {\n min-width: 0px;\n }\n\n .count {\n align-self: center;\n margin-left: 1em;\n font-size: 0.8em;\n font-weight: 400;\n }\n\n .level-0 > .item-top {\n background: var(--color-primary-dark);\n min-height: var(--curvature);\n }\n\n .level-0 > .item-bottom {\n background: var(--color-primary-dark);\n min-height: var(--curvature);\n }\n\n .level-0 > .item-bottom.selected {\n border-top-right-radius: var(--curvature);\n }\n\n .level-0 > .item-top.selected {\n border-bottom-right-radius: var(--curvature);\n }\n\n .level-0 > .item:hover {\n background: rgba(255, 255, 255, 0.15);\n --icon-color: #fff;\n }\n\n .level-0 > .item.selected:hover {\n background: white;\n --icon-color: var(--color-primary-dark);\n cursor: default;\n }\n\n .item.inline {\n border: 0px solid transparent;\n }\n\n .level-1,\n .level-2 {\n border-right: 1px solid rgba(0 0 0 / 8%);\n box-shadow: rgb(0 0 0 / 6%) 4px 0px 6px 1px;\n }\n\n .level-1 {\n transition: opacity 100ms linear, margin 200ms linear;\n overflow-y: scroll;\n }\n\n .mobile.root {\n height: 100svh;\n }\n\n .mobile.root.fully-collapsed {\n height: initial;\n }\n\n .root.fully-collapsed.mobile .level.level-0 {\n padding-right: 0.5em;\n }\n\n .root.fully-collapsed.mobile .level.level-0 {\n flex-direction: row;\n }\n\n .root.fully-collapsed.mobile .level.level-0 > .item {\n display: none;\n }\n\n .root.fully-collapsed.mobile .level.level-0 > .empty {\n display: block;\n width: 100%;\n min-width: inherit;\n max-width: inherit;\n }\n\n .root .level.level-0 > .show-mobile {\n display: none;\n }\n\n .root.mobile .level.level-0 > .show-mobile {\n display: flex;\n }\n\n .root.fully-collapsed.mobile .level.level-0 > .show-mobile {\n display: contents !important;\n }\n\n .root.fully-collapsed.mobile .level.level-0 .expand-icon {\n max-height: 100%;\n padding: 1em;\n }\n\n .mobile.fully-collapsed.root {\n flex-direction: column;\n }\n\n .mobile.fully-collapsed.root .level-0 {\n padding-top: 0px !important;\n }\n\n .mobile.fully-collapsed .level-1 {\n display: none;\n }\n\n .mobile .level-1 {\n flex-grow: 1;\n }\n\n .mobile .level-1 .item {\n max-width: inherit;\n min-width: inherit;\n }\n\n .mobile .level-1 .section {\n max-width: inherit;\n min-width: inherit;\n }\n\n .mobile.fully-collapsed .item {\n }\n\n .mobile .expand-icon {\n transition: none;\n transform: rotate(-90deg);\n align-self: center;\n }\n\n .mobile.fully-collapsed .level-0 .empty {\n flex-grow: 1;\n }\n\n .mobile.fully-collapsed .top-spacer {\n flex-grow: 0;\n }\n\n .mobile.fully-collapsed #dd-workspace {\n display: none;\n }\n\n .mobile.fully-collapsed .expand-icon {\n transform: none;\n }\n\n .level-2 {\n background: #fbfbfb;\n overflow-y: auto;\n }\n\n .level-2 .item .details {\n overflow: hidden;\n }\n\n .level-2 .item {\n min-width: 12em;\n max-width: 12em;\n }\n\n .level-1 .item {\n overflow: hidden;\n max-width: 12em;\n min-width: 12em;\n min-height: 1.5em;\n max-height: 1.5em;\n transition: min-width var(--transition-speed) !important;\n }\n\n .collapsed .item {\n overflow: hidden;\n min-width: 0;\n margin: 0;\n }\n\n .item .details {\n opacity: 1;\n min-height: 1.5em;\n max-height: 1.5em;\n align-items: center;\n }\n\n .collapsed .item {\n margin-bottom: 0.5em;\n }\n\n .collapsed .item .details {\n overflow: hidden;\n max-height: 0em;\n max-width: 0em;\n }\n\n .collapsed .item .details {\n max-height: 0em;\n }\n\n .collapsed .item temba-icon {\n margin-right: 0;\n }\n\n .section {\n max-width: 12em;\n }\n\n .collapsed .section {\n opacity: 0;\n max-width: 0em;\n max-height: 0.6em;\n }\n\n .collapsed.level-1 {\n overflow: hidden;\n padding: 0.5em;\n --icon-color: #999;\n }\n\n .collapsed .item .right {\n flex-grow: 1;\n }\n\n .collapse-icon {\n display: none;\n }\n\n .collapsed .collapse-icon {\n --icon-color: #ccc;\n display: block;\n }\n\n .collapsed .item.iconless {\n max-height: 0em;\n padding: 0em;\n min-height: 0em;\n margin-bottom: 0em;\n }\n\n .divider {\n height: 1px;\n background: #f3f3f3;\n margin: 0.5em 0.75em;\n min-height: 1px;\n }\n\n .space {\n margin: 0.5em;\n }\n\n .collapsed .divider {\n height: 0;\n margin: 0;\n padding: 0;\n min-height: 0px;\n }\n\n .sub-section {\n font-size: 0.9rem;\n color: #888;\n margin-top: 1rem;\n margin-left: 0.3rem;\n }\n\n .fully-collapsed .level-1 {\n margin-left: -208px;\n pointer-events: none;\n border: none;\n overflow: hidden;\n }\n\n .fully-collapsed .level-1 > * {\n opacity: 0;\n }\n\n .fully-collapsed .level-1 .item,\n .fully-collapsed .level-1 .divider {\n opacity: 0;\n }\n\n .fully-collapsed .level-2,\n .fully-collapsed .level-3 {\n display: none;\n }\n\n temba-button {\n margin-top: 0.2em;\n margin-bottom: 0.2em;\n margin-left: 0.75em;\n margin-right: 0.75em;\n }\n\n .expand-icon {\n transform: rotate(180deg);\n --icon-color: rgba(255, 255, 255, 0.5);\n cursor: pointer;\n max-height: 0px;\n overflow: hidden;\n opacity: 0;\n transition: all 400ms ease-in-out 400ms;\n }\n\n .expand-icon:hover {\n --icon-color: #fff;\n }\n\n .fully-collapsed .expand-icon {\n padding-top: 0.5em;\n max-height: 2em;\n opacity: 1;\n }\n\n .section-header {\n display: flex;\n align-items: center;\n }\n\n .section-header .section {\n flex-grow: 1;\n }\n\n .section-header temba-icon {\n --icon-color: #ddd;\n cursor: pointer;\n padding-bottom: 0.5em;\n padding-right: 0.5em;\n }\n\n .section-header temba-icon:hover {\n --icon-color: var(--color-link-primary);\n }\n\n a {\n text-decoration: none;\n color: var(--color-text-dark);\n }\n\n slot[name='header'] {\n display: none;\n }\n\n slot[name='header'].show-header {\n display: block;\n }\n\n .icon-wrapper {\n position: relative;\n padding: 0.2em 0.4em 0.2em 0em;\n }\n\n .level-0 .icon-wrapper {\n padding: 0.4em 0.9em;\n }\n `;\n }\n\n @property({ type: Boolean })\n wraps = false;\n\n @property({ type: Boolean })\n wait: boolean;\n\n @property({ type: String })\n endpoint: string;\n\n @property({ type: String })\n expanding: string;\n\n @property({ type: String })\n value: string;\n\n // submenu to constrain to\n @property({ type: String })\n submenu: string;\n\n @property({ type: Boolean })\n collapsed: boolean;\n\n @property({ type: Object })\n pressedItem: MenuItem;\n\n // http promise to monitor for completeness\n public httpComplete: Promise\n ${this.arrow}\n
\n ${menuItem.name}
`;\n }\n\n if (menuItem.type === 'modax-button') {\n return html`\n
`\n : null}\n `\n : null;\n\n const collapsedIcon = menuItem.collapsed_icon\n ? html`${icon}
`;\n }\n\n const item = html`\n \n \n ${menuItem.name}\n
\n ${menuItem.level > 0\n ? menuItem.inline\n ? html`${item}
\n \n \n `;\n }\n return item;\n };\n\n public render(): TemplateResult {\n if (!this.root || !this.root.items) {\n return null;\n }\n\n let items = this.root.items || [];\n const levels = [];\n\n const expandIcon = this.isMobile() ? Icon.menu : Icon.menu_collapse;\n\n levels.push(\n html`\n
`\n );\n\n this.selection.forEach((id, index) => {\n const selected = findItem(items, id).item;\n\n let collapsed = false;\n if (selected) {\n items = selected.items;\n const itemState = this.getMenuItemState(selected.id);\n // users set an explicit collapse state\n if (itemState.collapsed) {\n collapsed = itemState.collapsed === 'collapsed';\n }\n // otherwise pick a default collapse state\n else {\n if (this.selection.length > selected.level + 2) {\n collapsed = false;\n }\n }\n } else {\n items = null;\n }\n\n const collapseIcon = this.isMobile() ? Icon.close : Icon.menu_collapse;\n\n if (items && items.length > 0 && !selected.inline) {\n levels.push(\n html`\n \n
\n \n\n ${items\n .filter(item => !item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n\n \n ${items\n .filter(item => !!item.bottom)\n .map((item: MenuItem) => {\n return this.renderMenuItem(item);\n })}\n \n \n `\n : null}\n
\n `\n : null}\n ${items.map((item: MenuItem) => {\n if (item.inline && item.items) {\n return html`${this.renderMenuItem(item)}\n ${selected.name}
\n\n ${index == 0 && !this.collapsed\n ? html`\n ${(item.items || []).map((child: MenuItem) => {\n return this.renderMenuItem(child, item);\n })}\n
`;\n }\n return this.renderMenuItem(item);\n })}\n `\n );\n }\n });\n\n const menu = html`\n \n \n \n
\n \n `;\n }\n}\n","import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { Tab } from './Tab';\n\nexport class TabPane extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: flex;\n flex-direction: column;\n min-height: 0;\n flex-grow: 1;\n }\n\n .tabs {\n display: flex;\n align-items: stretch;\n }\n\n .tab {\n user-select: none;\n padding: 0.5em 0.7em;\n margin: 0em 0em;\n cursor: pointer;\n display: flex;\n font-size: 1.01em;\n align-items: center;\n border-radius: var(--curvature);\n border-bottom-right-radius: 0px;\n border-bottom-left-radius: 0px;\n border: 0px solid rgba(0, 0, 0, 0.45);\n color: var(--color-text-dark);\n --icon-color: var(--color-text-dark);\n white-space: nowrap;\n transition: all 100ms linear;\n }\n\n .focusedname .tab .name {\n transition: all 0s linear !important;\n }\n\n .focusedname .tab.selected .name {\n transition: all 200ms linear !important;\n }\n\n .tab.hidden {\n display: none;\n }\n\n .tab temba-icon {\n }\n\n .tab .name {\n margin-left: 0.4em;\n max-width: 80px;\n overflow: hidden;\n transition: max-width 500ms ease-in-out, margin 500ms ease-in-out;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .tab .badge {\n margin-left: 0.4em;\n }\n\n @media (max-width: 900px) {\n .collapses .tab .name {\n max-width: 0px;\n margin: 0;\n }\n }\n\n @media (max-width: 600px) {\n .collapses .tab .badge {\n display: none;\n }\n }\n\n .focusedname .tab.selected {\n transform: none;\n }\n\n .focusedname .tab .name {\n max-width: 0px;\n margin: 0;\n transition: max-width 200ms linear, margin 200ms linear;\n }\n\n .focusedname .tab.selected .name {\n margin-left: 0.4em;\n max-width: 200px;\n }\n\n .tab {\n transform: scale(0.9) translate(0em, -0.05em);\n --icon-color: #aaa;\n color: #aaa;\n }\n\n .tab.selected {\n }\n\n .tab.selected,\n .tab.selected:hover {\n cursor: default;\n box-shadow: 0px -3px 3px 1px rgba(0, 0, 0, 0.02);\n background: var(--focused-tab-color, #fff);\n transform: scale(1) translateY(0em);\n --icon-color: #666;\n color: #666;\n }\n\n .bottom .tab.selected {\n }\n\n .tab:hover {\n --icon-color: #666;\n color: #666;\n background: rgba(0, 0, 0, 0.02);\n }\n\n .pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n background: var(--focused-tab-color, #fff);\n border-radius: var(--curvature);\n box-shadow: var(\n --tabs-shadow,\n rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,\n rgba(0, 0, 0, 0.03) 0px 1px 2px 0px\n );\n min-height: 0;\n }\n\n .pane.first {\n border-top-left-radius: 0px;\n overflow: hidden;\n }\n\n .badge {\n }\n\n .count {\n border-radius: 99px;\n background: rgba(0, 0, 0, 0.05);\n color: rgba(0, 0, 0, 0.5);\n font-size: 0.6em;\n font-weight: 400;\n padding: 0.1em 0.4em;\n min-width: 1em;\n text-align: center;\n }\n\n .notify .count {\n background: var(--color-alert);\n color: #fff;\n }\n\n .bottom.tabs .tab {\n border-radius: 0em;\n }\n\n .bottom.pane {\n border-radius: 0em;\n }\n\n .bottom.pane.first {\n border-bottom-left-radius: 0px;\n }\n\n .bottom .tab.first {\n border-bottom-left-radius: var(--curvature);\n }\n\n .embedded.pane {\n box-shadow: none;\n margin: 0;\n }\n\n .embedded.tabs {\n margin: 0;\n }\n\n .embedded .tab {\n }\n\n .embedded.tabs .tab.selected {\n box-shadow: none !important;\n }\n\n .embedded.pane {\n // padding: 0.3em;\n }\n\n .check {\n margin-left: 0.4em;\n }\n `;\n }\n\n @property({ type: Boolean })\n embedded = false;\n\n @property({ type: Boolean })\n collapses = false;\n\n // are the tabs on the bottom of the pane?\n @property({ type: Boolean })\n bottom = false;\n\n // Only shows the name if the tab is focused\n @property({ type: Boolean })\n focusedName = false;\n\n @property({ type: Number })\n index = -1;\n\n @property({ type: String })\n refresh = '';\n\n private handleTabClick(event: MouseEvent): void {\n this.index = parseInt(\n (event.currentTarget as HTMLDivElement).dataset.index\n );\n event.preventDefault();\n event.stopPropagation();\n this.requestUpdate('index');\n }\n\n public updated(changedProperties: Map\n
\n ${tab.name}
\n ${tab.hasBadge()\n ? html`\n \n ${tab.count > 0\n ? html`
\n `\n : null}\n ${tab.checked\n ? html`\n ${tab.count.toLocaleString()}\n
`\n : null}\n \n
\n \n ${!this.bottom\n ? html`\n ${this.icon ? html`
\n \n `;\n }\n}\n","import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\n\nexport class ContactName extends RapidElement {\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n urn: string;\n\n @property({ type: Number, attribute: 'icon-size' })\n size = 20;\n\n static get styles() {\n return css`\n :host {\n display: flex;\n align-items: center;\n }\n\n temba-urn {\n margin-right: 0.2em;\n }\n\n .name {\n font-size: 1.5rem;\n overflow: hidden;\n max-height: 2rem;\n line-height: 2rem;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 1;\n text-overflow: ellipsis;\n display: -webkit-box;\n margin: auto;\n }\n `;\n }\n public render(): TemplateResult {\n const urn = this.urn\n ? html`\n ${this.name ? this.name : this.urn ? this.urn.split(':')[1] : ''}\n
\n \n
\n `;\n }\n\n return super.render();\n }\n}\n","import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { FormElement } from '../FormElement';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\nimport { InputType, TextInput } from '../textinput/TextInput';\nimport { Icon } from '../vectoricon';\nimport { getClasses, WebResponse } from '../utils';\n\nenum Status {\n Success = 'success',\n Failure = 'failure',\n Saving = 'saving',\n Ready = 'ready',\n}\n\nexport class ContactFieldEditor extends RapidElement {\n @property({ type: String })\n key: string;\n\n @property({ type: String })\n value: string;\n\n @property({ type: String })\n name: string;\n\n @property({ type: String })\n type: string;\n\n @property({ type: String })\n timezone: string;\n\n @property({ type: String })\n icon = navigator.clipboard ? Icon.copy : '';\n\n @property({ type: String })\n iconClass = '';\n\n @property({ type: String })\n status: Status = Status.Ready;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n dirty = false;\n\n static get styles() {\n return css`\n :host {\n --transition-speed: 0ms;\n }\n\n .wrapper {\n --temba-textinput-padding: 1.4em 0.8em 0.4em 0.8em;\n --disabled-opacity: 1;\n position: relative;\n --color-widget-bg: transparent;\n --color-widget-bg-focused: #fff;\n --widget-box-shadow: none;\n padding-bottom: 0.6em;\n border-bottom: 1px solid #ececec;\n }\n\n .wrapper.disabled {\n --color-widget-border: transparent;\n }\n\n .wrapper.mutable:hover {\n }\n\n .wrapper.mutable {\n --color-widget-border: rgb(235, 235, 235);\n --color-widget-bg: transparent;\n --input-cursor: pointer;\n\n border-bottom: none;\n margin-bottom: 0.5em;\n padding-bottom: 0em;\n }\n\n .mutable.success {\n --color-widget-border: rgba(var(--success-rgb), 0.6);\n }\n\n .mutable.failure {\n --color-widget-border: rgba(var(--error-rgb), 0.3) !important;\n }\n\n .mutable .dirty {\n --color-widget-border: rgb(235, 235, 235);\n }\n\n .prefix {\n border-top-left-radius: var(--curvature-widget);\n border-bottom-left-radius: var(--curvature-widget);\n cursor: pointer !important;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n display: flex;\n padding: 0em 0.5em;\n position: absolute;\n margin-top: 0.2em;\n pointer-events: none;\n }\n\n .wrapper {\n margin-bottom: 0.5em;\n }\n\n .prefix .name {\n padding: 0em 0.4em;\n color: rgba(100, 100, 100, 0.7);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 0.8em;\n }\n\n .postfix {\n display: flex;\n align-items: stretch;\n margin-left: 1em;\n }\n\n .popper {\n background: rgba(0, 0, 0, 0.03);\n border-top-right-radius: var(--curvature-widget);\n border-bottom-right-radius: var(--curvature-widget);\n --icon-color: #888;\n display: flex;\n cursor: default;\n transition: all var(--transition-speed) ease-in-out;\n align-items: stretch;\n margin: -1px;\n }\n\n temba-icon[name='calendar'] {\n --icon-color: rgba(0, 0, 0, 0.2);\n }\n\n temba-icon:hover {\n --icon-color: rgba(0, 0, 0, 0.5);\n }\n\n temba-icon {\n cursor: pointer;\n --icon-color: rgba(0, 0, 0, 0.3);\n }\n\n temba-textinput:focus .popper,\n temba-textinput:hover .popper {\n display: flex;\n }\n\n .disabled temba-textinput .postfix {\n display: none;\n padding: none;\n }\n\n .unset temba-textinput .popper .copy,\n .unset temba-textinput .popper .search {\n display: none;\n }\n\n .unset temba-textinput:focus .popper .copy,\n .unset temba-textinput:hover .popper .copy,\n .unset temba-textinput:focus .popper .save,\n .unset temba-textinput:hover .popper .save {\n display: none;\n }\n\n .popper temba-icon {\n padding: 0.5em 0em;\n padding-right: 1em;\n }\n\n .popper:first-child {\n padding: 0.5em 0em;\n padding-right: 0.5em;\n padding-left: 1em;\n }\n\n .popper:last-child {\n padding-right: 0em;\n }\n\n .copy.clicked temba-icon {\n transform: scale(1.2);\n }\n\n temba-icon {\n transition: all 200ms ease-in-out;\n }\n\n temba-datepicker {\n position: relative;\n }\n\n .save-state {\n display: flex;\n align-items: center;\n }\n\n .save-button {\n padding-right: 1em;\n }\n\n .dirty .copy,\n .dirty .search {\n display: none;\n }\n\n .saving .copy,\n .saving .search {\n display: none;\n }\n\n .success .copy,\n .success .search {\n display: none;\n }\n\n .failure .copy,\n .failure .search {\n display: none;\n }\n\n .popper.success {\n background: rgb(var(--success-rgb));\n }\n\n .popper.failure {\n background: rgb(var(--error-rgb));\n }\n\n .popper.success temba-icon,\n .popper.failure temba-icon {\n --icon-color: #fff !important;\n }\n\n .popper.dirty {\n background: rgba(0, 0, 0, 0.03);\n }\n\n temba-datepicker .popper {\n border-radius: 0px;\n }\n\n temba-datepicker .popper:first-child {\n padding: 0;\n }\n\n .dirty temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .success temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .failure temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n .saving temba-datepicker .popper:first-child {\n padding-left: 1em;\n }\n\n temba-datepicker .postfix {\n margin-left: 0;\n }\n\n .saving temba-datepicker,\n .saving temba-textinput {\n pointer-events: none !important;\n cursor: default !important;\n opacity: 0.7;\n }\n `;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.handleInput = this.handleInput.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n public handleIconClick(evt: MouseEvent) {\n const ele = evt.target as HTMLDivElement;\n const icon = ele.getAttribute('icon-action');\n const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;\n\n if (icon === 'copy') {\n if (navigator.clipboard) {\n this.iconClass = 'clicked';\n navigator.clipboard.writeText(input.getDisplayValue()).then(() => {\n window.setTimeout(() => {\n this.iconClass = '';\n }, 300);\n });\n }\n }\n\n if (icon === 'search') {\n this.fireCustomEvent(CustomEventType.ButtonClicked, {\n key: this.key,\n value: this.value,\n });\n }\n\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n public handleResponse(response: WebResponse) {\n if (response.status === 200) {\n this.value = response.json.fields[this.key];\n // this.status = Status.Success;\n // on success lets go back to ready state for now\n this.status = Status.Ready;\n this.dirty = false;\n } else {\n this.status = Status.Failure;\n this.dirty = false;\n }\n }\n\n public handleSubmit() {\n const input = this.shadowRoot.querySelector(\n 'temba-textinput, temba-datepicker'\n ) as FormElement;\n\n if (input.value !== this.value) {\n this.dirty = true;\n this.status = Status.Saving;\n this.value = input.value;\n this.fireEvent('change');\n }\n }\n\n public handleChange(evt: Event) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n\n public handleDateChange(evt: Event) {\n evt.preventDefault();\n evt.stopPropagation();\n this.dirty = true;\n }\n\n public handleInput(evt: KeyboardEvent) {\n const input = evt.currentTarget as TextInput;\n if (evt.key === 'Enter') {\n input.blur();\n this.handleSubmit();\n } else {\n if (input.value !== this.value) {\n this.dirty = true;\n }\n }\n }\n\n private getInputType(type: string): string {\n if (type === 'numeric') {\n return InputType.Number;\n }\n return InputType.Text;\n }\n\n public render(): TemplateResult {\n const state = html`${fields}
\n ${Object.keys(this.data.fields).length >= MIN_FOR_FILTER\n ? html`\n \n
`\n : null}\n \n \n
\n \n ${this.dirty\n ? html``\n : html` ${this.status === Status.Saving\n ? html``\n : null}\n ${this.status === Status.Success && !this.dirty\n ? html` `\n : null}`}\n
`;\n\n return html`\n \n
\n ${this.name}
\n \n \n ${state}\n
\n \n \n `\n : html`\n \n
\n\n ${this.name}
\n \n \n ${state}\n\n \n \n
\n \n \n `}\n \n `;\n }\n}\n","import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Group } from '../interfaces';\nimport { debounce, getClasses } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { ContactStoreElement } from './ContactStoreElement';\n\nconst STATUS = {\n stopped: { name: 'Stopped' },\n blocked: { name: 'Blocked' },\n archived: { name: 'Archived' },\n};\n\nexport class ContactBadges extends ContactStoreElement {\n static get styles() {\n return css`\n .wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n temba-label {\n margin: 0.3em;\n }\n\n .expanded .badges {\n max-height: inherit;\n }\n\n .expanded .show-button {\n opacity: 1;\n margin-bottom: 0em;\n margin-top: -0.5em;\n }\n\n .expanded .show-line {\n width: 98%;\n opacity: 1;\n }\n\n .badges {\n display: flex;\n overflow: hidden;\n flex-wrap: wrap;\n max-height: 2.2em;\n align-self: flex-start;\n }\n\n .show-button {\n transition: all var(--transition-speed) ease-in-out\n var(--transition-speed);\n opacity: 0;\n display: flex;\n padding: 0em 1em;\n margin-top: -0.8em;\n cursor: pointer;\n --icon-color-circle: #fff;\n margin-bottom: -1.5em;\n }\n\n .show-line {\n height: 1px;\n width: 100%;\n background: rgba(0, 0, 0, 0.05);\n margin-top: 1em;\n width: 0px;\n transition: width calc(var(--transition-speed) * 2) linear\n var(--transition-speed);\n }\n\n .has-more .show-line {\n width: 98%;\n }\n\n .has-more .show-button {\n opacity: 1;\n margin-bottom: 0em;\n margin-top: -0.5em;\n }\n\n .show-button temba-icon {\n border-radius: 9999px;\n }\n `;\n }\n\n @property({ type: Boolean })\n hasMore = false;\n\n @property({ type: Boolean })\n expanded = false;\n\n private handleResized() {\n if (this.shadowRoot) {\n const badges = this.shadowRoot.querySelector('.badges');\n if (badges) {\n this.hasMore = badges.scrollHeight > badges.clientHeight;\n }\n }\n }\n\n public updated(changedProperties: Map\n ${status && this.data.status !== 'active'\n ? html`\n \n ${status.name}\n \n `\n : null}\n ${this.data.flow\n ? html`\n \n ${this.data.flow.name}\n \n `\n : null}\n ${this.data.language\n ? html`\n \n ${this.store.getLanguageName(this.data.language)}\n \n `\n : null}\n ${this.data.groups.map((group: Group) => {\n return html`\n \n ${group.name}\n \n `;\n })}\n
\n \n\n \n \n `;\n } else {\n return null;\n }\n }\n}\n","import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport {\n CustomEventType,\n ScheduledEvent,\n ScheduledEventType,\n} from '../interfaces';\nimport { StoreElement } from '../store/StoreElement';\nimport { Icon } from '../vectoricon';\n\nconst ICONS = {\n [ScheduledEventType.CampaignEvent]: Icon.campaign,\n [ScheduledEventType.ScheduledBroadcast]: Icon.message,\n [ScheduledEventType.ScheduledTrigger]: Icon.trigger,\n};\n\nexport class ContactPending extends StoreElement {\n @property({ type: String })\n contact: string;\n\n @property({ type: Object, attribute: false })\n data: ScheduledEvent[];\n\n @property({ type: String })\n lang_weekly = 'Weekly';\n\n @property({ type: String })\n lang_daily = 'Daily';\n\n @property({ type: String })\n lang_once = 'Once';\n\n REPEAT_PERIOD = {\n O: this.lang_once,\n D: this.lang_daily,\n W: this.lang_weekly,\n };\n\n static get styles() {\n return css`\n :host {\n }\n\n a,\n .linked {\n color: var(--color-link-primary);\n cursor: pointer;\n }\n\n a:hover,\n .linked:hover {\n text-decoration: underline;\n color: var(--color-link-primary-hover);\n }\n\n .type {\n background: rgba(0, 0, 0, 0.02);\n padding: 1em;\n display: flex;\n align-self: stretch;\n --icon-color: rgba(50, 50, 50, 0.25);\n border-top-left-radius: var(--curvature);\n border-bottom-left-radius: var(--curvature);\n }\n\n .details {\n display: flex;\n flex-direction: column;\n padding: 0.5em 1em;\n flex-grow: 1;\n }\n\n .campaign {\n display: flex;\n color: var(--text-color);\n --icon-color: var(--text-color);\n align-self: center;\n white-space: nowrap;\n }\n\n .message {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n padding: 0.1em;\n }\n\n .event {\n margin-bottom: 0.5em;\n border-radius: var(--curvature);\n display: flex;\n flex-direction: row;\n align-items: center;\n box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n 0 0 0px 1px rgba(0, 0, 0, 0.02);\n }\n\n .event:hover {\n cursor: pointer;\n box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.055),\n 0 0 0px 2px var(--color-link-primary);\n }\n\n .time {\n white-space: nowrap;\n background: rgba(0, 0, 0, 0.02);\n border-top-right-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n display: flex;\n align-self: stretch;\n padding: 0 1em;\n min-width: 5em;\n }\n\n .duration {\n align-self: center;\n flex-grow: 1;\n text-align: center;\n }\n\n .flow {\n display: inline-block;\n }\n\n temba-tip {\n cursor: default;\n }\n\n .scheduled-by {\n font-size: 0.85em;\n display: flex;\n color: var(--text-color);\n --icon-color: var(--text-color);\n }\n\n .scheduled-by temba-icon {\n margin-right: 0.25em;\n }\n\n .scheduled-by .name {\n flex-grow: 1;\n }\n `;\n }\n\n constructor() {\n super();\n this.handleEventClicked = this.handleEventClicked.bind(this);\n }\n\n protected updated(\n changes: PropertyValueMap\n \n
\n\n \n
\n\n \n ${scheduledEvent.flow\n ? html` Start ${scheduledEvent.flow.name}`\n : null}\n ${scheduledEvent.message\n ? html` `\n : null}\n
\n\n \n ${scheduledEvent.campaign\n ? html``\n : null}\n
\n \n
`\n : html`\n ${scheduledEvent.type === ScheduledEventType.ScheduledTrigger\n ? html`${scheduledEvent.campaign.name}
\n \n ${this.REPEAT_PERIOD[scheduledEvent.repeat_period]}\n
\n `}\n \n
\n \n `;\n }\n\n public render(): TemplateResult {\n if (this.data) {\n if (this.data.length > 0) {\n return html`\n ${this.data.map(event => {\n return this.renderEvent(event);\n })}\n `;\n } else {\n return html`\n \n ${this.store.getShortDurationFromIso(scheduledEvent.scheduled)}\n \n
\n \n
\n \n \n \n ${ticket.topic.name}
\n\n \n {\n stopEvent(event);\n this.handleTicketAssignment(\n ticket.uuid,\n agent.email\n );\n }}\n >\n \n
\n `\n : null}\n\n `;\n })}\n \n
\n\n ${ticket.status === TicketStatus.Closed\n ? html`\n {\n event.preventDefault();\n event.stopPropagation();\n this.handleReopen(ticket.uuid);\n }}\n >\n
`\n : html`\n \n \n {\n stopEvent(event);\n }}\n >\n ${ticket.assignee\n ? html`\n \n \n {\n stopEvent(event);\n this.handleTicketAssignment(\n ticket.uuid,\n null\n );\n }}\n >\n
\n `\n : null}\n ${agent &&\n (!ticket.assignee ||\n agent.email !== ticket.assignee.email)\n ? html`\n \n ${ticket.assignee\n ? html`\n \n `\n : html`\n \n `}\n
\n\n ${ticket.body}
\n \n `;\n }\n\n public render(): TemplateResult {\n if (this.data && this.data.length > 0) {\n const tickets = this.data.map(ticket => {\n return this.renderTicket(ticket);\n });\n return html`${tickets}`;\n }\n\n return html`\n
\n \n ${this.range ? html`
\n `;\n }\n}\n","import { css, html, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Checkbox } from '../checkbox/Checkbox';\nimport { Select } from '../select/Select';\nimport { capitalize } from '../utils';\nimport { Icon } from '../vectoricon';\nimport { TembaList } from './TembaList';\n\nconst FLOW_COLOR = 'rgb(223, 65, 159)';\n\nexport class RunList extends TembaList {\n @property({ type: String })\n flow: string;\n\n @property({ type: Object, attribute: false })\n results: any[];\n\n @property({ type: Boolean })\n responses = true;\n\n @property({ type: Object })\n resultPreview: any;\n\n @property({ type: Object })\n selectedRun: any;\n\n private resultKeys = {};\n\n static get styles() {\n return css`\n :host {\n overflow-y: auto !important;\n }\n\n @media only screen and (max-height: 768px) {\n temba-options {\n max-height: 20vh;\n }\n }\n\n temba-options {\n display: block;\n width: 100%;\n flex-grow: 1;\n }\n `;\n }\n\n public firstUpdated(changedProperties: Map${this.min}
` : null}\n \n ${this.range ? html`${this.max}
` : null}\n \n \n
\n\n \n
\n ${this.getIcon(run)}\n \n `;\n };\n }\n\n public getRefreshEndpoint() {\n if (this.items.length > 0) {\n const modifiedOn = this.items[0].modified_on;\n return this.endpoint + '&after=' + modifiedOn;\n }\n return this.endpoint;\n }\n\n public toggleResponded() {\n this.responses = (\n this.shadowRoot.querySelector('#responded') as Checkbox\n ).checked;\n }\n\n public handleColumnChanged(event: any) {\n if (event.target.values.length > 0) {\n this.resultPreview = event.target.values[0];\n } else {\n this.resultPreview = null;\n }\n }\n\n public handleSelected(selected: any) {\n this.selectedRun = selected;\n }\n\n public getListStyle(): string {\n return '';\n }\n\n public renderHeader(): TemplateResult {\n return html`\n \n
\n \n ${this.results\n ? html`\n
\n \n
\n \n \n
\n \n \n \n \n ${this.selectedRun.exit_type\n ? html`\n
\n \n ${this.getIcon(this.selectedRun)}\n
\n `\n : html`${this.getIcon(this.selectedRun)}\n \n ${capitalize(this.selectedRun.exit_type)} \n
\n \n \n
`}\n Started
\n \n \n Started\n
\n \n \n ${new Date(this.selectedRun.created_on).toLocaleString()}\n
\n \n \n \n
\n\n | Result | \nCategory | \nValue | \n
|---|---|---|
| ${result.name} | \n\n ${meta.categories.length > 1 ? result.category : '--'}\n | \n${result.value} | \n
\n
\n \n `;\n }\n}\n","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\n
\n ${this.time\n ? html`\n \n
\n `\n : null}\n \n
\n Time Zone
\n ${this.timezoneFriendly}
\n ${TYPE_NAMES[field.value_type]}
\n \n \n ${this.featuredFields.map(field =>\n this.renderField(field)\n )}\n \n `}\n
\n `\n : null}\n\n \n
\n ${this.query\n ? html`\n Featured
\n \n ${this.featuredFields.map(field =>\n this.renderField(field)\n )}\n
\n `\n : html`\n \n
\n `;\n }\n}\n","import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { CustomEventType } from '../interfaces';\nimport { RapidElement } from '../RapidElement';\n\n/**\n * A simple list that can be sorted by dragging\n */\n\n// how far we have to drag before it starts\nconst DRAG_THRESHOLD = 5;\nexport class SortableList extends RapidElement {\n static get styles() {\n return css`\n :host {\n margin: auto;\n }\n\n .container {\n user-select: none;\n }\n\n .dragging {\n background: var(--color-selection);\n }\n\n .sortable {\n transition: all 300ms ease-in-out;\n display: flex;\n padding: 0.4em 0;\n }\n\n .sortable:hover temba-icon {\n opacity: 1;\n cursor: move;\n }\n\n .ghost {\n position: absolute;\n opacity: 0.5;\n transition: none;\n }\n\n .slot {\n flex-grow: 1;\n }\n\n slot > * {\n user-select: none;\n }\n\n temba-icon {\n opacity: 0.1;\n padding: 0.2em 0.5em;\n transition: all 300ms ease-in-out;\n }\n `;\n }\n\n @property({ type: String })\n draggingId: string;\n\n ghostElement: HTMLDivElement = null;\n downEle: HTMLDivElement = null;\n xOffset = 0;\n yOffset = 0;\n yDown = 0;\n\n draggingIdx = -1;\n draggingEle = null;\n\n public constructor() {\n super();\n this.handleMouseMove = this.handleMouseMove.bind(this);\n this.handleMouseUp = this.handleMouseUp.bind(this);\n this.handleMouseDown = this.handleMouseDown.bind(this);\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap\n
\n Everything Else
\n \n ${this.otherFieldKeys.map(field =>\n this.renderField(this.store.getContactField(field))\n )}\n
\n \n
\n `;\n }\n}\n","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\n ${this.buttons.map(button => {\n return html` this.handleItemClicked(button, event)}\n >\n ${button.label}\n `;\n })}\n ${this.items && this.items.length > 0\n ? html`\n
\n `\n : null}\n \n `;\n }\n}\n","import { css, html, PropertyValueMap, TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { Store } from '../store/Store';\nimport { DateTime } from 'luxon';\n\nexport const Display = {\n date: DateTime.DATE_SHORT,\n datetime: DateTime.DATETIME_SHORT,\n time: DateTime.TIME_SIMPLE,\n timedate: 'timedate',\n duration: 'duration',\n relative: 'relative',\n day: 'LLL d',\n};\n\nexport class TembaDate extends RapidElement {\n static get styles() {\n return css`\n .date {\n display: inline;\n }\n `;\n }\n\n @property({ type: String })\n value: string;\n\n @property({ type: String })\n display = 'date';\n\n @property({ type: Object, attribute: false })\n datetime: DateTime;\n\n store: Store;\n\n protected firstUpdated(\n changedProperties: PropertyValueMap\n
\n \n ${this.items.map(item => {\n if (item.type === ContentMenuItemType.DIVIDER) {\n return html` `;\n } else {\n return html` this.handleItemClicked(item, event)}\n >\n ${item.label}\n
`;\n }\n })}\n \n ${newTime.toLocaleDateString(undefined, DAY_FORMAT)}\n
`;\n } else {\n timeDisplay = html`\n ${newTime.toLocaleTimeString(undefined, TIME_FORMAT)}\n
`;\n }\n }\n\n const blockTime = new Date(messages[messages.length - 1].timestamp);\n const incoming = !messages[0].origin;\n\n return html` \n ${!incoming\n ? html`\n
\n `\n : null}\n\n \n ${!incoming ? html`
\n \n `;\n }\n\n private handleScroll(event: any) {\n this.hideBottomScroll =\n Math.round(event.target.scrollTop + event.target.clientHeight) >=\n event.target.scrollHeight;\n this.hideTopScroll = event.target.scrollTop === 0;\n }\n\n private handleClickInputPanel(event: any) {\n const input = this.shadowRoot.querySelector('.input') as any;\n input.focus();\n }\n\n private toggleChat() {\n this.open = !this.open;\n }\n\n public render(): TemplateResult {\n return html`\n Henry McHelper
` : null}\n ${messages.map(msg => html``)}\n \n
`\n : null}\n ${this.status === ChatStatus.CONNECTING\n ? html`This chat is not currently connected.
\n \n Click here to reconnect\n \n
\n \n
`\n : null}\n ${this.status === ChatStatus.CONNECTED\n ? html` Connecting
\n \n
\n \n `;\n }\n}\n","import { TemplateResult, html, css } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { Icon } from '../vectoricon';\nimport { Attachment, CustomEventType, Language } from '../interfaces';\nimport {\n formatFileSize,\n getClasses,\n postFormData,\n truncate,\n DEFAULT_MEDIA_ENDPOINT,\n WebResponse,\n isImageAttachment,\n} from '../utils';\nimport { Completion } from '../completion/Completion';\nimport { Select } from '../select/Select';\nimport { TabPane } from '../tabpane/TabPane';\nimport { EventHandler } from '../RapidElement';\n\nexport class Compose extends FormElement {\n static get styles() {\n return css`\n .container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n position: relative;\n\n border-radius: var(--curvature-widget);\n background: var(--color-widget-bg);\n border: var(--compose-border, 1px solid var(--color-widget-border));\n transition: all ease-in-out var(--transition-speed);\n box-shadow: var(--compose-shadow, var(--widget-box-shadow));\n caret-color: var(--input-caret);\n }\n\n .drop-mask {\n opacity: 0;\n pointer-events: none;\n position: absolute;\n height: 100%;\n width: 100%;\n bottom: 0;\n right: 0;\n background: rgba(210, 243, 184, 0.8);\n border-radius: var(--curvature-widget);\n transition: opacity ease-in-out var(--transition-speed);\n display: flex;\n align-items: center;\n text-align: center;\n }\n\n .highlight .drop-mask {\n opacity: 1;\n }\n\n .drop-mask > div {\n margin: auto;\n border-radius: var(--curvature-widget);\n font-weight: 400;\n color: rgba(0, 0, 0, 0.5);\n }\n\n .items {\n }\n\n .chatbox {\n --color-widget-border: none;\n --curvature-widget: var(\n --compose-curvature,\n var(--curvature) var(--curvature) 0px 0px\n );\n --textarea-min-height: var(--textarea-min-height, 4em);\n --widget-box-shadow: none;\n padding: var(--compose-padding, 0px);\n }\n\n .attachments {\n }\n .attachments-list {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0.2em;\n }\n .attachment-item {\n padding: 0.4em;\n }\n .attachment-item.error {\n background: #fff;\n color: rgba(250, 0, 0, 0.75);\n padding: 0.2em;\n margin: 0.3em 0.5em;\n border-radius: var(--curvature);\n display: block;\n }\n\n .remove-item {\n position: absolute;\n --icon-color: #ccc;\n background: #fff;\n border-radius: 99%;\n transform: scale(0);\n transition: transform 200ms linear;\n }\n\n .attachment-item:hover .remove-item {\n transform: scale(1);\n }\n\n .remove-item:hover {\n --icon-color: #333;\n cursor: pointer;\n }\n\n .remove-item.error:hover {\n background: rgba(250, 0, 0, 0.1);\n }\n\n .remove-item.error {\n background: rgba(250, 0, 0, 0.05);\n color: rgba(250, 0, 0, 0.75);\n }\n .attachment-name {\n align-self: center;\n font-size: 12px;\n padding: 2px 8px;\n }\n\n .actions {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0em;\n background: #f9f9f9;\n border-bottom-left-radius: var(--curvature);\n border-bottom-right-radius: var(--curvature);\n border-top: solid 1px var(--color-widget-border);\n }\n\n #upload-input {\n display: none;\n }\n .upload-label {\n display: flex;\n align-items: center;\n }\n .upload-icon {\n color: rgb(102, 102, 102);\n }\n .actions-right {\n display: flex;\n align-items: center;\n }\n temba-charcount {\n margin-right: 5px;\n overflow: hidden;\n --temba-charcount-counts-margin-top: 0px;\n --temba-charcount-summary-margin-top: 0px;\n --temba-charcount-summary-position: fixed;\n --temba-charcount-summary-right: 105px;\n --temba-charcount-summary-bottom: 105px;\n }\n temba-button {\n --button-y: 1px;\n --button-x: 12px;\n }\n .send-error {\n color: rgba(250, 0, 0, 0.75);\n font-size: var(--help-text-size);\n }\n\n .language {\n margin-bottom: 0.6em;\n display: block;\n }\n\n .top-right {\n align-items: center;\n display: flex;\n }\n\n #send-button {\n margin: 0.3em;\n }\n\n temba-tabs {\n --focused-tab-color: #f4f4f4;\n }\n\n .quick-replies {\n margin: 0.8em;\n }\n\n .add-attachment {\n padding: 1em;\n background: #eee;\n border-radius: var(--curvature);\n color: #aaa;\n margin: 0.5em;\n }\n\n .add-attachment:hover {\n background: #e9e9e9;\n cursor: pointer;\n }\n\n temba-loading {\n margin: auto 1em;\n }\n\n .optins {\n padding: 1em;\n }\n `;\n }\n\n @property({ type: Number })\n index = 1;\n\n @property({ type: Number })\n maxAttachments = 3;\n\n @property({ type: Number })\n maxLength = 640;\n\n @property({ type: Boolean })\n completion: boolean;\n\n @property({ type: Boolean })\n chatbox: boolean;\n\n @property({ type: Boolean })\n attachments: boolean;\n\n @property({ type: Boolean })\n quickReplies: boolean;\n\n @property({ type: Boolean })\n optIns: boolean;\n\n @property({ type: Boolean })\n counter: boolean;\n\n @property({ type: Boolean })\n pendingDrop: boolean;\n\n @property({ type: Boolean })\n button: boolean;\n\n @property({ type: String })\n currentText = '';\n\n @property({ type: String })\n initialText = '';\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n @property({ type: Array })\n languages: Language[] = [];\n\n @property({ type: Array })\n currentAttachments: Attachment[] = [];\n\n @property({ type: Array })\n currentQuickReplies: { name: string; value: string }[] = [];\n\n @property({ type: Array })\n currentOptin: { name: string; uuid: string }[] = [];\n\n @property({ type: String })\n optinEndpoint = '/api/v2/optins.json';\n\n @property({ type: Array, attribute: false })\n failedAttachments: Attachment[] = [];\n\n @property({ type: String })\n buttonName = 'Send';\n\n @property({ type: Boolean, attribute: false })\n buttonDisabled = true;\n\n @property({ type: String, attribute: false })\n buttonError = '';\n\n @property({ type: Boolean, attribute: 'widget_only' })\n widgetOnly: boolean;\n\n @property({ type: Array })\n errors: string[];\n\n @property({ type: Object })\n langValues: {\n [lang: string]: {\n text: string;\n attachments: Attachment[];\n quick_replies: string[];\n optin?: { name: string; uuid: string };\n };\n } = {};\n\n @property({ type: String })\n currentLanguage = 'und';\n\n public constructor() {\n super();\n }\n\n private isBaseLanguage(): boolean {\n return (\n this.currentLanguage == 'und' ||\n this.currentLanguage == this.languages[0].iso\n );\n }\n\n private handleTabChanged() {\n const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;\n const tab = tabs.getCurrentTab();\n if (tab) {\n // check we are going for the first attachment\n if (tab.icon == 'attachment') {\n if (this.currentAttachments.length == 0) {\n this.handleUploadFileIconClicked();\n }\n }\n }\n }\n\n public getEventHandlers(): EventHandler[] {\n return [\n { event: CustomEventType.ContextChanged, method: this.handleTabChanged },\n ];\n }\n\n public firstUpdated(changes: MapUpload Attachment
${this.getActions()}
\n \n \n `;\n }\n\n private getChatbox(): TemplateResult {\n if (this.completion) {\n return html`${this.getAttachments()}
\n `\n : null}\n ${this.quickReplies\n ? html`\n ${this.buttonError\n ? html`
\n \n `;\n }\n\n private getUploader(): TemplateResult {\n if (this.uploading) {\n return html`${this.buttonError}
`\n : null}\n ${this.counter ? this.getCounter() : null}\n ${this.button ? this.getButton() : null}\n \n ${this.show ? this.ele : null}\n
\n \n `;\n }\n}\n","import { html, css, PropertyValueMap } from 'lit';\nimport { FormElement } from '../FormElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses, hslToHex } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\n\nexport class ColorPicker extends FormElement {\n @property({ type: Boolean })\n expanded = false;\n\n @property({ type: String })\n previewColor = '#ffffff';\n\n @property({ type: String })\n labelColor = '#ffffffee';\n\n @property({ type: Boolean })\n selecting = false;\n\n @property({ type: Number }) hue: number;\n @property({ type: Number }) saturation = 100;\n @property({ type: Number }) lightness = 50;\n @property({ type: String }) hex = '';\n\n static get styles() {\n return css`\n :host {\n color: var(--color-text);\n display: inline-block;\n --curvature: 0.55em;\n width: 100%;\n\n --temba-textinput-padding: 0.4em;\n }\n\n temba-textinput {\n margin-left: 0.3em;\n width: 5em;\n }\n\n temba-field {\n display: block;\n width: 100%;\n }\n\n .wrapper {\n border: 1px solid var(--color-widget-border);\n padding: calc(var(--curvature) / 2);\n border-radius: calc(var(--curvature) * 1.5);\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n\n display: flex;\n flex-grow: 0;\n }\n\n .picker-wrapper {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 0;\n }\n\n .preview {\n width: initial;\n border-radius: var(--curvature);\n padding: 0.2em 0.5em;\n font-weight: 400;\n border: 2px solid rgba(0, 0, 0, 0.1);\n white-space: nowrap;\n cursor: pointer;\n transition: transform calc(var(--transition-speed) * 0.5) var(--bounce);\n }\n\n .preview.selecting {\n transform: scale(1.05);\n }\n\n .wrapper.expanded {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .picker-wrapper {\n flex-grow: 1 !important;\n }\n\n .wrapper.expanded .preview {\n pointer-events: none;\n }\n\n .wrapper.expanded .color-picker {\n margin-left: calc(var(--curvature) / 2);\n }\n\n .wrapper.expanded temba-textinput {\n display: block;\n }\n\n .color-picker {\n border-radius: var(--curvature);\n cursor: pointer;\n transition: all calc(var(--transition-speed) * 2) var(--bounce);\n flex-grow: 1;\n position: relative;\n width: 100%;\n height: 100%;\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 60%,\n rgba(0, 0, 0, 0.5) 90%,\n rgba(0, 0, 0, 1)\n ),\n linear-gradient(\n to top,\n rgba(255, 255, 255, 0) 60%,\n rgba(255, 255, 255, 0.8) 90%,\n rgba(255, 255, 255, 1)\n ),\n linear-gradient(\n to right,\n hsla(0, 100%, 50%, 1),\n hsla(60, 100%, 50%, 1),\n hsla(120, 100%, 50%, 1),\n hsla(180, 100%, 50%, 1),\n hsla(240, 100%, 50%, 1),\n hsla(300, 100%, 50%, 1),\n hsla(360, 100%, 50%, 1)\n );\n mix-blend-mode: multiply;\n }\n\n .color-picker:focus {\n outline: none;\n }\n `;\n }\n\n protected firstUpdated(\n _changedProperties: PropertyValueMap\n
\n \n
\n \n \n ${this.label}\n
\n \n\n
\n `;\n }\n }\n}\n","import { css } from 'lit';\n\nexport const CroppieCSS = css`\n .croppie-container {\n width: 100%;\n height: 100%;\n }\n\n .croppie-container .cr-image {\n z-index: -1;\n position: absolute;\n top: 0;\n left: 0;\n transform-origin: 0 0;\n max-height: none;\n max-width: none;\n }\n\n .croppie-container .cr-boundary {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n z-index: 1;\n width: 100%;\n height: 100%;\n }\n\n .croppie-container .cr-viewport,\n .croppie-container .cr-resizer {\n position: absolute;\n border: 2px solid #fff;\n margin: auto;\n top: 0;\n bottom: 0;\n right: 0;\n left: 0;\n box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);\n z-index: 0;\n }\n\n .croppie-container .cr-resizer {\n z-index: 2;\n box-shadow: none;\n pointer-events: none;\n }\n\n .croppie-container .cr-resizer-vertical,\n .croppie-container .cr-resizer-horisontal {\n position: absolute;\n pointer-events: all;\n }\n\n .croppie-container .cr-resizer-vertical::after,\n .croppie-container .cr-resizer-horisontal::after {\n display: block;\n position: absolute;\n box-sizing: border-box;\n border: 1px solid black;\n background: #fff;\n width: 10px;\n height: 10px;\n content: '';\n }\n\n .croppie-container .cr-resizer-vertical {\n bottom: -5px;\n cursor: row-resize;\n width: 100%;\n height: 10px;\n }\n\n .croppie-container .cr-resizer-vertical::after {\n left: 50%;\n margin-left: -5px;\n }\n\n .croppie-container .cr-resizer-horisontal {\n right: -5px;\n cursor: col-resize;\n width: 10px;\n height: 100%;\n }\n\n .croppie-container .cr-resizer-horisontal::after {\n top: 50%;\n margin-top: -5px;\n }\n\n .croppie-container .cr-original-image {\n display: none;\n }\n\n .croppie-container .cr-vp-circle {\n border-radius: 50%;\n }\n\n .croppie-container .cr-overlay {\n z-index: 1;\n position: absolute;\n cursor: move;\n touch-action: none;\n }\n\n .croppie-container .cr-slider-wrap {\n width: 75%;\n margin: 15px auto;\n text-align: center;\n }\n\n .croppie-result {\n position: relative;\n overflow: hidden;\n }\n\n .croppie-result img {\n position: absolute;\n }\n\n .croppie-container .cr-image,\n .croppie-container .cr-overlay,\n .croppie-container .cr-viewport {\n -webkit-transform: translateZ(0);\n -moz-transform: translateZ(0);\n -ms-transform: translateZ(0);\n transform: translateZ(0);\n }\n\n /*************************************/\n /***** STYLING RANGE INPUT ***********/\n /*************************************/\n /*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */\n /*************************************/\n\n .cr-slider {\n -webkit-appearance: none;\n /*removes default webkit styles*/\n /*border: 1px solid white; */ /*fix for FF unable to apply focus style bug */\n width: 300px;\n /*required for proper track sizing in FF*/\n max-width: 100%;\n padding-top: 8px;\n padding-bottom: 8px;\n background-color: transparent;\n }\n\n .cr-slider::-webkit-slider-runnable-track {\n width: 100%;\n height: 3px;\n background: rgba(0, 0, 0, 0.5);\n border: 0;\n border-radius: 3px;\n }\n\n .cr-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: #ddd;\n margin-top: -6px;\n }\n\n .cr-slider:focus {\n outline: none;\n }\n /*\n.cr-slider:focus::-webkit-slider-runnable-track {\nbackground: #ccc;\n}\n*/\n\n .cr-slider::-moz-range-track {\n width: 100%;\n height: 3px;\n background: rgba(0, 0, 0, 0.5);\n border: 0;\n border-radius: 3px;\n }\n\n .cr-slider::-moz-range-thumb {\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: #ddd;\n margin-top: -6px;\n }\n\n /*hide the outline behind the border*/\n .cr-slider:-moz-focusring {\n outline: 1px solid white;\n outline-offset: -1px;\n }\n\n .cr-slider::-ms-track {\n width: 100%;\n height: 5px;\n background: transparent;\n /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */\n border-color: transparent; /*leave room for the larger thumb to overflow with a transparent border */\n border-width: 6px 0;\n color: transparent; /*remove default tick marks*/\n }\n .cr-slider::-ms-fill-lower {\n background: rgba(0, 0, 0, 0.5);\n border-radius: 10px;\n }\n .cr-slider::-ms-fill-upper {\n background: rgba(0, 0, 0, 0.5);\n border-radius: 10px;\n }\n .cr-slider::-ms-thumb {\n border: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: #ddd;\n margin-top: 1px;\n }\n .cr-slider:focus::-ms-fill-lower {\n background: rgba(0, 0, 0, 0.5);\n }\n .cr-slider:focus::-ms-fill-upper {\n background: rgba(0, 0, 0, 0.5);\n }\n /*******************************************/\n\n /***********************************/\n /* Rotation Tools */\n /***********************************/\n .cr-rotate-controls {\n position: absolute;\n bottom: 5px;\n left: 5px;\n z-index: 1;\n }\n .cr-rotate-controls button {\n border: 0;\n background: none;\n }\n .cr-rotate-controls i:before {\n display: inline-block;\n font-style: normal;\n font-weight: 900;\n font-size: 22px;\n }\n .cr-rotate-l i:before {\n content: '↺';\n }\n .cr-rotate-r i:before {\n content: '↻';\n }\n`;\n","/* 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\n ${this.label}\n
\n \n \n \n \n | Map\n ): void {\n super.updated(changed);\n if (changed.has('email')) {\n this.user = this.store.getUser(this.email);\n if (this.user) {\n this.fullName = [this.user.first_name, this.user.last_name].join(' ');\n if (this.user.avatar) {\n this.background = `url('${this.user.avatar}') center / contain no-repeat`;\n this.initials = '';\n } else {\n this.background = colorHash.hex(this.fullName);\n this.initials = extractInitials(this.fullName);\n }\n }\n }\n }\n\n public render(): TemplateResult {\n if (!this.user) {\n return null;\n }\n\n return html`
\n ${this.name\n ? html`\n
\n \n \n \n
\n `;\n }\n}\n","import { LitElement, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nexport class Mask extends LitElement {\n static styles = css`\n .mask {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 100;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.6);\n display: none;\n align-items: center;\n justify-content: center;\n }\n\n .show {\n display: flex;\n }\n `;\n\n @property({ type: Boolean })\n show = false;\n\n render() {\n return html` \n
\n \n \n \n
`;\n }\n}\n","import { PropertyValueMap, TemplateResult, css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { User } from '../interfaces';\nimport { StoreMonitorElement } from '../store/StoreMonitorElement';\nimport { colorHash, extractInitials } from '../utils';\n\nexport class TembaUser extends StoreMonitorElement {\n public static styles = css`\n :host {\n display: flex;\n }\n\n .wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-grow: 1;\n }\n\n .name {\n flex-grow: 1;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n `;\n\n @property({ type: String })\n email: string;\n\n @property({ type: Number })\n scale: number;\n\n @property({ type: Boolean })\n name: string;\n\n @property({ type: Object, attribute: false })\n user: User;\n\n @property({ type: String, attribute: false })\n background: string;\n\n @property({ type: String, attribute: false })\n initials: string;\n\n @property({ type: String, attribute: false })\n fullName: string;\n\n public updated(\n changed: PropertyValueMap\n \n ${this.initials\n ? html` \n
`\n : null}\n ${this.initials}
\n ${variables}
`;\n }\n }\n\n public renderComponents(components: Component[]): TemplateResult {\n const nonButtons = components\n .filter(comp => !comp.type.startsWith('button/'))\n .map(\n component =>\n html`\n ${this.renderVariables(component)}\n
`\n );\n const buttonComponents = components.filter(comp =>\n comp.type.startsWith('button/')\n );\n const buttons =\n buttonComponents.length > 0 ? this.renderButtons(buttonComponents) : null;\n return html`${nonButtons}
\n `;\n }\n\n public renderButtons(components): TemplateResult {\n const buttons = components.map(component => {\n if (component.display) {\n return html`\n \n `;\n } else {\n return html`\n \n `;\n }\n });\n return html``;\n }\n\n public render(): TemplateResult {\n let content = null;\n if (this.translation) {\n content = this.renderComponents(this.translation.components);\n } else {\n content = html``;\n }\n\n return html`\n \n template.status !== 'approved'}\n placeholder=\"Select a template\"\n @temba-content-changed=${this.swallowEvent}\n @change=${this.handleTemplateChanged}\n >\n \n\n ${this.template ? html`
\n `;\n }\n}\n","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';\nimport Label from './src/label/Label';\nimport { ContactName } from './src/contacts/ContactName';\nimport { ContactUrn } from './src/contacts/ContactUrn';\nimport { ContactFields } from './src/contacts/ContactFields';\nimport { ContactFieldEditor } from './src/contacts/ContactFieldEditor';\n\nimport { ContactBadges } from './src/contacts/ContactBadges';\nimport { ContactPending } from './src/contacts/ContactPending';\nimport { ContactTickets } from './src/contacts/ContactTickets';\nimport { TembaSlider } from './src/slider/TembaSlider';\nimport { RunList } from './src/list/RunList';\nimport { FlowStoreElement } from './src/flow/FlowStoreElement';\nimport { ContactNameFetch } from './src/contacts/ContactNameFetch';\nimport DatePicker from './src/datepicker/DatePicker';\nimport { FieldManager } from './src/fields/FieldManager';\nimport { SortableList } from './src/list/SortableList';\nimport { ContentMenu } from './src/list/ContentMenu';\nimport { TembaDate } from './src/date/TembaDate';\nimport Remote from './src/remote/Remote';\nimport { Compose } from './src/compose/Compose';\nimport { Lightbox } from './src/lightbox/Lightbox';\nimport { ColorPicker } from './src/colorpicker/ColorPicker';\nimport { Resizer } from './src/resizer/Resizer';\nimport { Thumbnail } from './src/thumbnail/Thumbnail';\nimport { NotificationList } from './src/list/NotificationList';\nimport { WebChat } from './src/webchat/WebChat';\nimport { ImagePicker } from './src/imagepicker/ImagePicker';\nimport { Mask } from './src/mask/Mask';\nimport { TembaUser } from './src/user/TembaUser';\nimport { TemplateEditor } from './src/templates/TemplateEditor';\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-datepicker', DatePicker);\naddCustomElement('temba-date', TembaDate);\naddCustomElement('temba-completion', Completion);\naddCustomElement('temba-checkbox', Checkbox);\naddCustomElement('temba-select', Select);\naddCustomElement('temba-options', Options);\naddCustomElement('temba-loading', Loading);\naddCustomElement('temba-lightbox', Lightbox);\naddCustomElement('temba-button', Button);\naddCustomElement('temba-omnibox', Omnibox);\naddCustomElement('temba-tip', Tip);\naddCustomElement('temba-contact-name', ContactName);\naddCustomElement('temba-contact-name-fetch', ContactNameFetch);\naddCustomElement('temba-contact-field', ContactFieldEditor);\naddCustomElement('temba-contact-fields', ContactFields);\naddCustomElement('temba-field-manager', FieldManager);\naddCustomElement('temba-urn', ContactUrn);\naddCustomElement('temba-content-menu', ContentMenu);\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-notification-list', NotificationList);\naddCustomElement('temba-list', TembaList);\naddCustomElement('temba-sortable-list', SortableList);\naddCustomElement('temba-run-list', RunList);\naddCustomElement('temba-flow-details', FlowStoreElement);\naddCustomElement('temba-label', Label);\naddCustomElement('temba-menu', TembaMenu);\naddCustomElement('temba-remote', Remote);\naddCustomElement('temba-contact-search', ContactSearch);\naddCustomElement('temba-icon', VectorIcon);\naddCustomElement('temba-dropdown', Dropdown);\naddCustomElement('temba-tabs', TabPane);\naddCustomElement('temba-tab', Tab);\naddCustomElement('temba-contact-badges', ContactBadges);\naddCustomElement('temba-contact-pending', ContactPending);\naddCustomElement('temba-contact-tickets', ContactTickets);\naddCustomElement('temba-slider', TembaSlider);\naddCustomElement('temba-content-menu', ContentMenu);\naddCustomElement('temba-compose', Compose);\naddCustomElement('temba-color-picker', ColorPicker);\naddCustomElement('temba-resizer', Resizer);\naddCustomElement('temba-thumbnail', Thumbnail);\naddCustomElement('temba-webchat', WebChat);\naddCustomElement('temba-image-picker', ImagePicker);\naddCustomElement('temba-mask', Mask);\naddCustomElement('temba-user', TembaUser);\naddCustomElement('temba-template-editor', TemplateEditor);\n","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`${content}
` : null}\n \n
`\n : null}\n \n \n
\n `;\n };\n }\n\n public renderHeader(): TemplateResult {\n return html`${body}
\n \n
`;\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","import { css, html, LitElement, TemplateResult } from 'lit';\nimport { FeatureProperties } from '../interfaces';\nimport { getUrl, postJSON, WebResponse } from '../utils';\nimport { TextInput } from '../textinput/TextInput';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { FormElement } from '../FormElement';\nimport { Icon } from '../vectoricon';\n\nimport { property } from 'lit/decorators.js';\nimport { Select } from '../select/Select';\n\nexport class AliasEditor extends LitElement {\n static get styles() {\n return css`\n :host {\n line-height: normal;\n }\n\n temba-textinput {\n height: 150px;\n }\n\n #left-column {\n display: inline-block;\n margin-left: 10px;\n width: 300px;\n z-index: 100;\n }\n\n .search {\n margin-bottom: 10px;\n }\n\n .feature {\n padding: 4px 14px;\n font-size: 16px;\n }\n\n .level-0 {\n margin-left: 0px;\n }\n\n .level-1 {\n margin-left: 5px;\n font-size: 95%;\n }\n\n .level-2 {\n margin-left: 10px;\n font-size: 90%;\n }\n\n .level-3 {\n margin-left: 15px;\n font-size: 85%;\n }\n\n .feature-name {\n display: inline-block;\n }\n\n .clickable {\n text-decoration: none;\n cursor: pointer;\n color: var(--color-link-primary);\n }\n\n .clickable.secondary {\n color: var(--color-link-secondary);\n }\n\n .clickable:hover {\n text-decoration: underline;\n color: var(--color-link-primary-hover);\n }\n\n .feature:hover .showonhover {\n visibility: visible;\n }\n\n .showonhover {\n visibility: hidden;\n }\n\n .aliases {\n color: #bbb;\n font-size: 80%;\n display: inline;\n margin-left: 5px;\n }\n\n temba-label {\n margin-right: 3px;\n margin-bottom: 3px;\n vertical-align: top;\n }\n\n .selected {\n display: flex;\n flex-direction: column;\n padding: 15px;\n padding-bottom: 40px;\n }\n\n .selected .name {\n font-size: 18px;\n padding: 5px;\n }\n\n .selected .help {\n padding: 5px 2px;\n font-size: 11px;\n color: var(--color-secondary-light);\n }\n\n #right-column {\n vertical-align: top;\n margin-left: 20px;\n display: inline-block;\n }\n\n leaflet-map {\n height: 600px;\n width: 800px;\n border: 0px solid #999;\n border-radius: var(--curvature);\n }\n\n .edit {\n display: inline-block;\n margin-right: 0px;\n }\n `;\n }\n\n @property({ type: Array, attribute: false })\n path: FeatureProperties[] = [];\n\n @property()\n endpoint: string;\n\n @property()\n osmId: string;\n\n @property({ type: Object })\n hovered: FeatureProperties;\n\n @property({ type: Object })\n editFeature: FeatureProperties;\n\n @property({ type: String, attribute: false })\n editFeatureAliases: string;\n\n public constructor() {\n super();\n }\n\n public updated(changedProperties: MapNotifications
\n \n {\n if (feature.level > 0) {\n this.hovered = feature;\n }\n }}\n @mouseout=${() => {\n this.hovered = null;\n }}\n class=\"level-${feature.level}\"\n >\n {\n if (clickable) {\n this.handlePlaceClicked(feature);\n }\n }}\n >\n ${feature.name}\n
\n\n \n ${feature.aliases.split('\\n').map((alias: string) =>\n alias.trim().length > 0\n ? html`\n {\n this.showAliasDialog(feature);\n }}\n light\n clickable\n >${alias} \n `\n : null\n )}\n ${feature.level > 0\n ? html`\n {\n this.showAliasDialog(feature);\n evt.preventDefault();\n evt.stopPropagation();\n }}\n >\n
\n `\n : ''}\n \n \n \n `;\n\n const renderedChildren = (feature.children || []).map(\n (child: FeatureProperties) => {\n if (\n remainingPath.length > 0 &&\n remainingPath[0].osm_id === child.osm_id\n ) {\n return this.renderFeature(remainingPath[0], remainingPath.slice(1));\n }\n\n if (\n remainingPath.length === 0 ||\n remainingPath[0].children.length === 0\n ) {\n return this.renderFeature(child, remainingPath);\n }\n\n return null;\n }\n );\n\n return html` ${renderedFeature} ${renderedChildren} `;\n }\n\n public showAliasDialog(feature: FeatureProperties) {\n this.editFeatureAliases = feature.aliases;\n this.editFeature = feature;\n const aliasDialog = this.shadowRoot.getElementById('alias-dialog');\n if (aliasDialog) {\n aliasDialog.setAttribute('open', '');\n }\n }\n\n public hideAliasDialog() {\n const aliasDialog = this.shadowRoot.getElementById('alias-dialog');\n this.editFeature = null;\n this.editFeatureAliases = null;\n if (aliasDialog) {\n aliasDialog.removeAttribute('open');\n }\n\n this.requestUpdate();\n }\n\n private getEndpoint(): string {\n return this.endpoint + (!this.endpoint.endsWith('/') ? '/' : '');\n }\n\n private handleDialogClick(evt: CustomEvent) {\n const button = evt.detail.button;\n if (button.name === 'Save') {\n const textarea = this.shadowRoot.getElementById(\n this.editFeature.osm_id\n ) as TextInput;\n const aliases = textarea.inputElement.value;\n const payload = { osm_id: this.editFeature.osm_id, aliases };\n postJSON(\n this.getEndpoint() + 'boundaries/' + this.editFeature.osm_id + '/',\n payload\n ).then(() => {\n this.fetchFeature();\n });\n }\n\n if (button.name === 'Cancel') {\n this.hideAliasDialog();\n }\n }\n\n private getOptions(response: WebResponse) {\n return response.json.filter((option: any) => option.level > 0);\n }\n\n private getOptionsComplete(newestOptions: FeatureProperties[]) {\n return newestOptions.length === 0;\n }\n\n private renderOptionDetail(option: FeatureProperties): TemplateResult {\n const labelStyles = {\n marginTop: '3px',\n marginRight: '3px',\n };\n\n const aliasList = option.aliases.split('\\n');\n const aliases = aliasList.map((alias: string) =>\n alias.trim().length > 0\n ? html`\n ${option.path.replace(/>/gi, '‣')}
\n ${aliases}
\n `;\n }\n\n public render(): TemplateResult {\n if (this.path.length === 0) {\n return html``;\n }\n\n // if we are a leaf, have our map show the level above\n const selectedFeature = this.path[this.path.length - 1];\n const mapFeature =\n selectedFeature.children.length === 0\n ? this.path[this.path.length - 2]\n : selectedFeature;\n\n const editFeatureId = this.editFeature ? this.editFeature.osm_id : null;\n const editFeatureName = this.editFeature ? this.editFeature.name : null;\n\n return html`\n \n
\n\n \n \n
\n \n ${this.renderFeature(this.path[0], this.path.slice(1))}\n
\n \n \n \n
\n\n \n \n
\n \n `;\n }\n}\n","/* @preserve\n * Leaflet 1.5.1+build.2e3e0ff, a JS library for interactive maps. http://leafletjs.com\n * (c) 2010-2018 Vladimir Agafonkin, (c) 2010-2011 CloudMade\n */\n\n(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n\ttypeof define === 'function' && define.amd ? define(['exports'], factory) :\n\t(factory((global.L = {})));\n}(this, (function (exports) { 'use strict';\n\nvar version = \"1.5.1+build.2e3e0ffb\";\n\n/*\r\n * @namespace Util\r\n *\r\n * Various utility functions, used by Leaflet internally.\r\n */\r\n\r\nvar freeze = Object.freeze;\r\nObject.freeze = function (obj) { return obj; };\r\n\r\n// @function extend(dest: Object, src?: Object): Object\r\n// Merges the properties of the `src` object (or multiple objects) into `dest` object and returns the latter. Has an `L.extend` shortcut.\r\nfunction extend(dest) {\r\n\tvar i, j, len, src;\r\n\r\n\tfor (j = 1, len = arguments.length; j < len; j++) {\r\n\t\tsrc = arguments[j];\r\n\t\tfor (i in src) {\r\n\t\t\tdest[i] = src[i];\r\n\t\t}\r\n\t}\r\n\treturn dest;\r\n}\r\n\r\n// @function create(proto: Object, properties?: Object): Object\r\n// Compatibility polyfill for [Object.create](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/create)\r\nvar create = Object.create || (function () {\r\n\tfunction F() {}\r\n\treturn function (proto) {\r\n\t\tF.prototype = proto;\r\n\t\treturn new F();\r\n\t};\r\n})();\r\n\r\n// @function bind(fn: Function, …): Function\r\n// Returns a new function bound to the arguments passed, like [Function.prototype.bind](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Function/bind).\r\n// Has a `L.bind()` shortcut.\r\nfunction bind(fn, obj) {\r\n\tvar slice = Array.prototype.slice;\r\n\r\n\tif (fn.bind) {\r\n\t\treturn fn.bind.apply(fn, slice.call(arguments, 1));\r\n\t}\r\n\r\n\tvar args = slice.call(arguments, 2);\r\n\r\n\treturn function () {\r\n\t\treturn fn.apply(obj, args.length ? args.concat(slice.call(arguments)) : arguments);\r\n\t};\r\n}\r\n\r\n// @property lastId: Number\r\n// Last unique ID used by [`stamp()`](#util-stamp)\r\nvar lastId = 0;\r\n\r\n// @function stamp(obj: Object): Number\r\n// Returns the unique ID of an object, assigning it one if it doesn't have it.\r\nfunction stamp(obj) {\r\n\t/*eslint-disable */\r\n\tobj._leaflet_id = obj._leaflet_id || ++lastId;\r\n\treturn obj._leaflet_id;\r\n\t/* eslint-enable */\r\n}\r\n\r\n// @function throttle(fn: Function, time: Number, context: Object): Function\r\n// Returns a function which executes function `fn` with the given scope `context`\r\n// (so that the `this` keyword refers to `context` inside `fn`'s code). The function\r\n// `fn` will be called no more than one time per given amount of `time`. The arguments\r\n// received by the bound function will be any arguments passed when binding the\r\n// function, followed by any arguments passed when invoking the bound function.\r\n// Has an `L.throttle` shortcut.\r\nfunction throttle(fn, time, context) {\r\n\tvar lock, args, wrapperFn, later;\r\n\r\n\tlater = function () {\r\n\t\t// reset lock and call if queued\r\n\t\tlock = false;\r\n\t\tif (args) {\r\n\t\t\twrapperFn.apply(context, args);\r\n\t\t\targs = false;\r\n\t\t}\r\n\t};\r\n\r\n\twrapperFn = function () {\r\n\t\tif (lock) {\r\n\t\t\t// called too soon, queue to call later\r\n\t\t\targs = arguments;\r\n\r\n\t\t} else {\r\n\t\t\t// call and lock until later\r\n\t\t\tfn.apply(context, arguments);\r\n\t\t\tsetTimeout(later, time);\r\n\t\t\tlock = true;\r\n\t\t}\r\n\t};\r\n\r\n\treturn wrapperFn;\r\n}\r\n\r\n// @function wrapNum(num: Number, range: Number[], includeMax?: Boolean): Number\r\n// Returns the number `num` modulo `range` in such a way so it lies within\r\n// `range[0]` and `range[1]`. The returned value will be always smaller than\r\n// `range[1]` unless `includeMax` is set to `true`.\r\nfunction wrapNum(x, range, includeMax) {\r\n\tvar max = range[1],\r\n\t min = range[0],\r\n\t d = max - min;\r\n\treturn x === max && includeMax ? x : ((x - min) % d + d) % d + min;\r\n}\r\n\r\n// @function falseFn(): Function\r\n// Returns a function which always returns `false`.\r\nfunction falseFn() { return false; }\r\n\r\n// @function formatNum(num: Number, digits?: Number): Number\r\n// Returns the number `num` rounded to `digits` decimals, or to 6 decimals by default.\r\nfunction formatNum(num, digits) {\r\n\tdigits = (digits === undefined ? 6 : digits);\r\n\treturn +(Math.round(num + ('e+' + digits)) + ('e-' + digits));\r\n}\r\n\r\n// @function trim(str: String): String\r\n// Compatibility polyfill for [String.prototype.trim](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)\r\nfunction trim(str) {\r\n\treturn str.trim ? str.trim() : str.replace(/^\\s+|\\s+$/g, '');\r\n}\r\n\r\n// @function splitWords(str: String): String[]\r\n// Trims and splits the string on whitespace and returns the array of parts.\r\nfunction splitWords(str) {\r\n\treturn trim(str).split(/\\s+/);\r\n}\r\n\r\n// @function setOptions(obj: Object, options: Object): Object\r\n// Merges the given properties to the `options` of the `obj` object, returning the resulting options. See `Class options`. Has an `L.setOptions` shortcut.\r\nfunction setOptions(obj, options) {\r\n\tif (!obj.hasOwnProperty('options')) {\r\n\t\tobj.options = obj.options ? create(obj.options) : {};\r\n\t}\r\n\tfor (var i in options) {\r\n\t\tobj.options[i] = options[i];\r\n\t}\r\n\treturn obj.options;\r\n}\r\n\r\n// @function getParamString(obj: Object, existingUrl?: String, uppercase?: Boolean): String\r\n// Converts an object into a parameter URL string, e.g. `{a: \"foo\", b: \"bar\"}`\r\n// translates to `'?a=foo&b=bar'`. If `existingUrl` is set, the parameters will\r\n// be appended at the end. If `uppercase` is `true`, the parameter names will\r\n// be uppercased (e.g. `'?A=foo&B=bar'`)\r\nfunction getParamString(obj, existingUrl, uppercase) {\r\n\tvar params = [];\r\n\tfor (var i in obj) {\r\n\t\tparams.push(encodeURIComponent(uppercase ? i.toUpperCase() : i) + '=' + encodeURIComponent(obj[i]));\r\n\t}\r\n\treturn ((!existingUrl || existingUrl.indexOf('?') === -1) ? '?' : '&') + params.join('&');\r\n}\r\n\r\nvar templateRe = /\\{ *([\\w_-]+) *\\}/g;\r\n\r\n// @function template(str: String, data: Object): String\r\n// Simple templating facility, accepts a template string of the form `'Hello {a}, {b}'`\r\n// and a data object like `{a: 'foo', b: 'bar'}`, returns evaluated string\r\n// `('Hello foo, bar')`. You can also specify functions instead of strings for\r\n// data values — they will be evaluated passing `data` as an argument.\r\nfunction template(str, data) {\r\n\treturn str.replace(templateRe, function (str, key) {\r\n\t\tvar value = data[key];\r\n\r\n\t\tif (value === undefined) {\r\n\t\t\tthrow new Error('No value provided for variable ' + str);\r\n\r\n\t\t} else if (typeof value === 'function') {\r\n\t\t\tvalue = value(data);\r\n\t\t}\r\n\t\treturn value;\r\n\t});\r\n}\r\n\r\n// @function isArray(obj): Boolean\r\n// Compatibility polyfill for [Array.isArray](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)\r\nvar isArray = Array.isArray || function (obj) {\r\n\treturn (Object.prototype.toString.call(obj) === '[object Array]');\r\n};\r\n\r\n// @function indexOf(array: Array, el: Object): Number\r\n// Compatibility polyfill for [Array.prototype.indexOf](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)\r\nfunction indexOf(array, el) {\r\n\tfor (var i = 0; i < array.length; i++) {\r\n\t\tif (array[i] === el) { return i; }\r\n\t}\r\n\treturn -1;\r\n}\r\n\r\n// @property emptyImageUrl: String\r\n// Data URI string containing a base64-encoded empty GIF image.\r\n// Used as a hack to free memory from unused images on WebKit-powered\r\n// mobile devices (by setting image `src` to this string).\r\nvar emptyImageUrl = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';\r\n\r\n// inspired by http://paulirish.com/2011/requestanimationframe-for-smart-animating/\r\n\r\nfunction getPrefixed(name) {\r\n\treturn window['webkit' + name] || window['moz' + name] || window['ms' + name];\r\n}\r\n\r\nvar lastTime = 0;\r\n\r\n// fallback for IE 7-8\r\nfunction timeoutDefer(fn) {\r\n\tvar time = +new Date(),\r\n\t timeToCall = Math.max(0, 16 - (time - lastTime));\r\n\r\n\tlastTime = time + timeToCall;\r\n\treturn window.setTimeout(fn, timeToCall);\r\n}\r\n\r\nvar requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || timeoutDefer;\r\nvar cancelFn = window.cancelAnimationFrame || getPrefixed('CancelAnimationFrame') ||\r\n\t\tgetPrefixed('CancelRequestAnimationFrame') || function (id) { window.clearTimeout(id); };\r\n\r\n// @function requestAnimFrame(fn: Function, context?: Object, immediate?: Boolean): Number\r\n// Schedules `fn` to be executed when the browser repaints. `fn` is bound to\r\n// `context` if given. When `immediate` is set, `fn` is called immediately if\r\n// the browser doesn't have native support for\r\n// [`window.requestAnimationFrame`](https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame),\r\n// otherwise it's delayed. Returns a request ID that can be used to cancel the request.\r\nfunction requestAnimFrame(fn, context, immediate) {\r\n\tif (immediate && requestFn === timeoutDefer) {\r\n\t\tfn.call(context);\r\n\t} else {\r\n\t\treturn requestFn.call(window, bind(fn, context));\r\n\t}\r\n}\r\n\r\n// @function cancelAnimFrame(id: Number): undefined\r\n// Cancels a previous `requestAnimFrame`. See also [window.cancelAnimationFrame](https://developer.mozilla.org/docs/Web/API/window/cancelAnimationFrame).\r\nfunction cancelAnimFrame(id) {\r\n\tif (id) {\r\n\t\tcancelFn.call(window, id);\r\n\t}\r\n}\r\n\n\nvar Util = (Object.freeze || Object)({\n\tfreeze: freeze,\n\textend: extend,\n\tcreate: create,\n\tbind: bind,\n\tlastId: lastId,\n\tstamp: stamp,\n\tthrottle: throttle,\n\twrapNum: wrapNum,\n\tfalseFn: falseFn,\n\tformatNum: formatNum,\n\ttrim: trim,\n\tsplitWords: splitWords,\n\tsetOptions: setOptions,\n\tgetParamString: getParamString,\n\ttemplate: template,\n\tisArray: isArray,\n\tindexOf: indexOf,\n\temptyImageUrl: emptyImageUrl,\n\trequestFn: requestFn,\n\tcancelFn: cancelFn,\n\trequestAnimFrame: requestAnimFrame,\n\tcancelAnimFrame: cancelAnimFrame\n});\n\n// @class Class\r\n// @aka L.Class\r\n\r\n// @section\r\n// @uninheritable\r\n\r\n// Thanks to John Resig and Dean Edwards for inspiration!\r\n\r\nfunction Class() {}\r\n\r\nClass.extend = function (props) {\r\n\r\n\t// @function extend(props: Object): Function\r\n\t// [Extends the current class](#class-inheritance) given the properties to be included.\r\n\t// Returns a Javascript function that is a class constructor (to be called with `new`).\r\n\tvar NewClass = function () {\r\n\r\n\t\t// call the constructor\r\n\t\tif (this.initialize) {\r\n\t\t\tthis.initialize.apply(this, arguments);\r\n\t\t}\r\n\r\n\t\t// call all constructor hooks\r\n\t\tthis.callInitHooks();\r\n\t};\r\n\r\n\tvar parentProto = NewClass.__super__ = this.prototype;\r\n\r\n\tvar proto = create(parentProto);\r\n\tproto.constructor = NewClass;\r\n\r\n\tNewClass.prototype = proto;\r\n\r\n\t// inherit parent's statics\r\n\tfor (var i in this) {\r\n\t\tif (this.hasOwnProperty(i) && i !== 'prototype' && i !== '__super__') {\r\n\t\t\tNewClass[i] = this[i];\r\n\t\t}\r\n\t}\r\n\r\n\t// mix static properties into the class\r\n\tif (props.statics) {\r\n\t\textend(NewClass, props.statics);\r\n\t\tdelete props.statics;\r\n\t}\r\n\r\n\t// mix includes into the prototype\r\n\tif (props.includes) {\r\n\t\tcheckDeprecatedMixinEvents(props.includes);\r\n\t\textend.apply(null, [proto].concat(props.includes));\r\n\t\tdelete props.includes;\r\n\t}\r\n\r\n\t// merge options\r\n\tif (proto.options) {\r\n\t\tprops.options = extend(create(proto.options), props.options);\r\n\t}\r\n\r\n\t// mix given properties into the prototype\r\n\textend(proto, props);\r\n\r\n\tproto._initHooks = [];\r\n\r\n\t// add method for calling all hooks\r\n\tproto.callInitHooks = function () {\r\n\r\n\t\tif (this._initHooksCalled) { return; }\r\n\r\n\t\tif (parentProto.callInitHooks) {\r\n\t\t\tparentProto.callInitHooks.call(this);\r\n\t\t}\r\n\r\n\t\tthis._initHooksCalled = true;\r\n\r\n\t\tfor (var i = 0, len = proto._initHooks.length; i < len; i++) {\r\n\t\t\tproto._initHooks[i].call(this);\r\n\t\t}\r\n\t};\r\n\r\n\treturn NewClass;\r\n};\r\n\r\n\r\n// @function include(properties: Object): this\r\n// [Includes a mixin](#class-includes) into the current class.\r\nClass.include = function (props) {\r\n\textend(this.prototype, props);\r\n\treturn this;\r\n};\r\n\r\n// @function mergeOptions(options: Object): this\r\n// [Merges `options`](#class-options) into the defaults of the class.\r\nClass.mergeOptions = function (options) {\r\n\textend(this.prototype.options, options);\r\n\treturn this;\r\n};\r\n\r\n// @function addInitHook(fn: Function): this\r\n// Adds a [constructor hook](#class-constructor-hooks) to the class.\r\nClass.addInitHook = function (fn) { // (Function) || (String, args...)\r\n\tvar args = Array.prototype.slice.call(arguments, 1);\r\n\r\n\tvar init = typeof fn === 'function' ? fn : function () {\r\n\t\tthis[fn].apply(this, args);\r\n\t};\r\n\r\n\tthis.prototype._initHooks = this.prototype._initHooks || [];\r\n\tthis.prototype._initHooks.push(init);\r\n\treturn this;\r\n};\r\n\r\nfunction checkDeprecatedMixinEvents(includes) {\r\n\tif (typeof L === 'undefined' || !L || !L.Mixin) { return; }\r\n\r\n\tincludes = isArray(includes) ? includes : [includes];\r\n\r\n\tfor (var i = 0; i < includes.length; i++) {\r\n\t\tif (includes[i] === L.Mixin.Events) {\r\n\t\t\tconsole.warn('Deprecated include of L.Mixin.Events: ' +\r\n\t\t\t\t'this property will be removed in future releases, ' +\r\n\t\t\t\t'please inherit from L.Evented instead.', new Error().stack);\r\n\t\t}\r\n\t}\r\n}\n\n/*\r\n * @class Evented\r\n * @aka L.Evented\r\n * @inherits Class\r\n *\r\n * A set of methods shared between event-powered classes (like `Map` and `Marker`). Generally, events allow you to execute some function when something happens with an object (e.g. the user clicks on the map, causing the map to fire `'click'` event).\r\n *\r\n * @example\r\n *\r\n * ```js\r\n * map.on('click', function(e) {\r\n * \talert(e.latlng);\r\n * } );\r\n * ```\r\n *\r\n * Leaflet deals with event listeners by reference, so if you want to add a listener and then remove it, define it as a function:\r\n *\r\n * ```js\r\n * function onClick(e) { ... }\r\n *\r\n * map.on('click', onClick);\r\n * map.off('click', onClick);\r\n * ```\r\n */\r\n\r\nvar Events = {\r\n\t/* @method on(type: String, fn: Function, context?: Object): this\r\n\t * Adds a listener function (`fn`) to a particular event type of the object. You can optionally specify the context of the listener (object the this keyword will point to). You can also pass several space-separated types (e.g. `'click dblclick'`).\r\n\t *\r\n\t * @alternative\r\n\t * @method on(eventMap: Object): this\r\n\t * Adds a set of type/listener pairs, e.g. `{click: onClick, mousemove: onMouseMove}`\r\n\t */\r\n\ton: function (types, fn, context) {\r\n\r\n\t\t// types can be a map of types/handlers\r\n\t\tif (typeof types === 'object') {\r\n\t\t\tfor (var type in types) {\r\n\t\t\t\t// we don't process space-separated events here for performance;\r\n\t\t\t\t// it's a hot path since Layer uses the on(obj) syntax\r\n\t\t\t\tthis._on(type, types[type], fn);\r\n\t\t\t}\r\n\r\n\t\t} else {\r\n\t\t\t// types can be a string of space-separated words\r\n\t\t\ttypes = splitWords(types);\r\n\r\n\t\t\tfor (var i = 0, len = types.length; i < len; i++) {\r\n\t\t\t\tthis._on(types[i], fn, context);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t/* @method off(type: String, fn?: Function, context?: Object): this\r\n\t * Removes a previously added listener function. If no function is specified, it will remove all the listeners of that particular event from the object. Note that if you passed a custom context to `on`, you must pass the same context to `off` in order to remove the listener.\r\n\t *\r\n\t * @alternative\r\n\t * @method off(eventMap: Object): this\r\n\t * Removes a set of type/listener pairs.\r\n\t *\r\n\t * @alternative\r\n\t * @method off: this\r\n\t * Removes all listeners to all events on the object. This includes implicitly attached events.\r\n\t */\r\n\toff: function (types, fn, context) {\r\n\r\n\t\tif (!types) {\r\n\t\t\t// clear all listeners if called without arguments\r\n\t\t\tdelete this._events;\r\n\r\n\t\t} else if (typeof types === 'object') {\r\n\t\t\tfor (var type in types) {\r\n\t\t\t\tthis._off(type, types[type], fn);\r\n\t\t\t}\r\n\r\n\t\t} else {\r\n\t\t\ttypes = splitWords(types);\r\n\r\n\t\t\tfor (var i = 0, len = types.length; i < len; i++) {\r\n\t\t\t\tthis._off(types[i], fn, context);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// attach listener (without syntactic sugar now)\r\n\t_on: function (type, fn, context) {\r\n\t\tthis._events = this._events || {};\r\n\r\n\t\t/* get/init listeners for type */\r\n\t\tvar typeListeners = this._events[type];\r\n\t\tif (!typeListeners) {\r\n\t\t\ttypeListeners = [];\r\n\t\t\tthis._events[type] = typeListeners;\r\n\t\t}\r\n\r\n\t\tif (context === this) {\r\n\t\t\t// Less memory footprint.\r\n\t\t\tcontext = undefined;\r\n\t\t}\r\n\t\tvar newListener = {fn: fn, ctx: context},\r\n\t\t listeners = typeListeners;\r\n\r\n\t\t// check if fn already there\r\n\t\tfor (var i = 0, len = listeners.length; i < len; i++) {\r\n\t\t\tif (listeners[i].fn === fn && listeners[i].ctx === context) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tlisteners.push(newListener);\r\n\t},\r\n\r\n\t_off: function (type, fn, context) {\r\n\t\tvar listeners,\r\n\t\t i,\r\n\t\t len;\r\n\r\n\t\tif (!this._events) { return; }\r\n\r\n\t\tlisteners = this._events[type];\r\n\r\n\t\tif (!listeners) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (!fn) {\r\n\t\t\t// Set all removed listeners to noop so they are not called if remove happens in fire\r\n\t\t\tfor (i = 0, len = listeners.length; i < len; i++) {\r\n\t\t\t\tlisteners[i].fn = falseFn;\r\n\t\t\t}\r\n\t\t\t// clear all listeners for a type if function isn't specified\r\n\t\t\tdelete this._events[type];\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (context === this) {\r\n\t\t\tcontext = undefined;\r\n\t\t}\r\n\r\n\t\tif (listeners) {\r\n\r\n\t\t\t// find fn and remove it\r\n\t\t\tfor (i = 0, len = listeners.length; i < len; i++) {\r\n\t\t\t\tvar l = listeners[i];\r\n\t\t\t\tif (l.ctx !== context) { continue; }\r\n\t\t\t\tif (l.fn === fn) {\r\n\r\n\t\t\t\t\t// set the removed listener to noop so that's not called if remove happens in fire\r\n\t\t\t\t\tl.fn = falseFn;\r\n\r\n\t\t\t\t\tif (this._firingCount) {\r\n\t\t\t\t\t\t/* copy array in case events are being fired */\r\n\t\t\t\t\t\tthis._events[type] = listeners = listeners.slice();\r\n\t\t\t\t\t}\r\n\t\t\t\t\tlisteners.splice(i, 1);\r\n\r\n\t\t\t\t\treturn;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\r\n\t// @method fire(type: String, data?: Object, propagate?: Boolean): this\r\n\t// Fires an event of the specified type. You can optionally provide an data\r\n\t// object — the first argument of the listener function will contain its\r\n\t// properties. The event can optionally be propagated to event parents.\r\n\tfire: function (type, data, propagate) {\r\n\t\tif (!this.listens(type, propagate)) { return this; }\r\n\r\n\t\tvar event = extend({}, data, {\r\n\t\t\ttype: type,\r\n\t\t\ttarget: this,\r\n\t\t\tsourceTarget: data && data.sourceTarget || this\r\n\t\t});\r\n\r\n\t\tif (this._events) {\r\n\t\t\tvar listeners = this._events[type];\r\n\r\n\t\t\tif (listeners) {\r\n\t\t\t\tthis._firingCount = (this._firingCount + 1) || 1;\r\n\t\t\t\tfor (var i = 0, len = listeners.length; i < len; i++) {\r\n\t\t\t\t\tvar l = listeners[i];\r\n\t\t\t\t\tl.fn.call(l.ctx || this, event);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tthis._firingCount--;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif (propagate) {\r\n\t\t\t// propagate the event to parents (set with addEventParent)\r\n\t\t\tthis._propagateEvent(event);\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method listens(type: String): Boolean\r\n\t// Returns `true` if a particular event type has any listeners attached to it.\r\n\tlistens: function (type, propagate) {\r\n\t\tvar listeners = this._events && this._events[type];\r\n\t\tif (listeners && listeners.length) { return true; }\r\n\r\n\t\tif (propagate) {\r\n\t\t\t// also check parents for listeners if event propagates\r\n\t\t\tfor (var id in this._eventParents) {\r\n\t\t\t\tif (this._eventParents[id].listens(type, propagate)) { return true; }\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn false;\r\n\t},\r\n\r\n\t// @method once(…): this\r\n\t// Behaves as [`on(…)`](#evented-on), except the listener will only get fired once and then removed.\r\n\tonce: function (types, fn, context) {\r\n\r\n\t\tif (typeof types === 'object') {\r\n\t\t\tfor (var type in types) {\r\n\t\t\t\tthis.once(type, types[type], fn);\r\n\t\t\t}\r\n\t\t\treturn this;\r\n\t\t}\r\n\r\n\t\tvar handler = bind(function () {\r\n\t\t\tthis\r\n\t\t\t .off(types, fn, context)\r\n\t\t\t .off(types, handler, context);\r\n\t\t}, this);\r\n\r\n\t\t// add a listener that's executed once and removed after that\r\n\t\treturn this\r\n\t\t .on(types, fn, context)\r\n\t\t .on(types, handler, context);\r\n\t},\r\n\r\n\t// @method addEventParent(obj: Evented): this\r\n\t// Adds an event parent - an `Evented` that will receive propagated events\r\n\taddEventParent: function (obj) {\r\n\t\tthis._eventParents = this._eventParents || {};\r\n\t\tthis._eventParents[stamp(obj)] = obj;\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method removeEventParent(obj: Evented): this\r\n\t// Removes an event parent, so it will stop receiving propagated events\r\n\tremoveEventParent: function (obj) {\r\n\t\tif (this._eventParents) {\r\n\t\t\tdelete this._eventParents[stamp(obj)];\r\n\t\t}\r\n\t\treturn this;\r\n\t},\r\n\r\n\t_propagateEvent: function (e) {\r\n\t\tfor (var id in this._eventParents) {\r\n\t\t\tthis._eventParents[id].fire(e.type, extend({\r\n\t\t\t\tlayer: e.target,\r\n\t\t\t\tpropagatedFrom: e.target\r\n\t\t\t}, e), true);\r\n\t\t}\r\n\t}\r\n};\r\n\r\n// aliases; we should ditch those eventually\r\n\r\n// @method addEventListener(…): this\r\n// Alias to [`on(…)`](#evented-on)\r\nEvents.addEventListener = Events.on;\r\n\r\n// @method removeEventListener(…): this\r\n// Alias to [`off(…)`](#evented-off)\r\n\r\n// @method clearAllEventListeners(…): this\r\n// Alias to [`off()`](#evented-off)\r\nEvents.removeEventListener = Events.clearAllEventListeners = Events.off;\r\n\r\n// @method addOneTimeEventListener(…): this\r\n// Alias to [`once(…)`](#evented-once)\r\nEvents.addOneTimeEventListener = Events.once;\r\n\r\n// @method fireEvent(…): this\r\n// Alias to [`fire(…)`](#evented-fire)\r\nEvents.fireEvent = Events.fire;\r\n\r\n// @method hasEventListeners(…): Boolean\r\n// Alias to [`listens(…)`](#evented-listens)\r\nEvents.hasEventListeners = Events.listens;\r\n\r\nvar Evented = Class.extend(Events);\n\n/*\r\n * @class Point\r\n * @aka L.Point\r\n *\r\n * Represents a point with `x` and `y` coordinates in pixels.\r\n *\r\n * @example\r\n *\r\n * ```js\r\n * var point = L.point(200, 300);\r\n * ```\r\n *\r\n * All Leaflet methods and options that accept `Point` objects also accept them in a simple Array form (unless noted otherwise), so these lines are equivalent:\r\n *\r\n * ```js\r\n * map.panBy([200, 300]);\r\n * map.panBy(L.point(200, 300));\r\n * ```\r\n *\r\n * Note that `Point` does not inherit from Leafet's `Class` object,\r\n * which means new classes can't inherit from it, and new methods\r\n * can't be added to it with the `include` function.\r\n */\r\n\r\nfunction Point(x, y, round) {\r\n\t// @property x: Number; The `x` coordinate of the point\r\n\tthis.x = (round ? Math.round(x) : x);\r\n\t// @property y: Number; The `y` coordinate of the point\r\n\tthis.y = (round ? Math.round(y) : y);\r\n}\r\n\r\nvar trunc = Math.trunc || function (v) {\r\n\treturn v > 0 ? Math.floor(v) : Math.ceil(v);\r\n};\r\n\r\nPoint.prototype = {\r\n\r\n\t// @method clone(): Point\r\n\t// Returns a copy of the current point.\r\n\tclone: function () {\r\n\t\treturn new Point(this.x, this.y);\r\n\t},\r\n\r\n\t// @method add(otherPoint: Point): Point\r\n\t// Returns the result of addition of the current and the given points.\r\n\tadd: function (point) {\r\n\t\t// non-destructive, returns a new point\r\n\t\treturn this.clone()._add(toPoint(point));\r\n\t},\r\n\r\n\t_add: function (point) {\r\n\t\t// destructive, used directly for performance in situations where it's safe to modify existing point\r\n\t\tthis.x += point.x;\r\n\t\tthis.y += point.y;\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method subtract(otherPoint: Point): Point\r\n\t// Returns the result of subtraction of the given point from the current.\r\n\tsubtract: function (point) {\r\n\t\treturn this.clone()._subtract(toPoint(point));\r\n\t},\r\n\r\n\t_subtract: function (point) {\r\n\t\tthis.x -= point.x;\r\n\t\tthis.y -= point.y;\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method divideBy(num: Number): Point\r\n\t// Returns the result of division of the current point by the given number.\r\n\tdivideBy: function (num) {\r\n\t\treturn this.clone()._divideBy(num);\r\n\t},\r\n\r\n\t_divideBy: function (num) {\r\n\t\tthis.x /= num;\r\n\t\tthis.y /= num;\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method multiplyBy(num: Number): Point\r\n\t// Returns the result of multiplication of the current point by the given number.\r\n\tmultiplyBy: function (num) {\r\n\t\treturn this.clone()._multiplyBy(num);\r\n\t},\r\n\r\n\t_multiplyBy: function (num) {\r\n\t\tthis.x *= num;\r\n\t\tthis.y *= num;\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method scaleBy(scale: Point): Point\r\n\t// Multiply each coordinate of the current point by each coordinate of\r\n\t// `scale`. In linear algebra terms, multiply the point by the\r\n\t// [scaling matrix](https://en.wikipedia.org/wiki/Scaling_%28geometry%29#Matrix_representation)\r\n\t// defined by `scale`.\r\n\tscaleBy: function (point) {\r\n\t\treturn new Point(this.x * point.x, this.y * point.y);\r\n\t},\r\n\r\n\t// @method unscaleBy(scale: Point): Point\r\n\t// Inverse of `scaleBy`. Divide each coordinate of the current point by\r\n\t// each coordinate of `scale`.\r\n\tunscaleBy: function (point) {\r\n\t\treturn new Point(this.x / point.x, this.y / point.y);\r\n\t},\r\n\r\n\t// @method round(): Point\r\n\t// Returns a copy of the current point with rounded coordinates.\r\n\tround: function () {\r\n\t\treturn this.clone()._round();\r\n\t},\r\n\r\n\t_round: function () {\r\n\t\tthis.x = Math.round(this.x);\r\n\t\tthis.y = Math.round(this.y);\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method floor(): Point\r\n\t// Returns a copy of the current point with floored coordinates (rounded down).\r\n\tfloor: function () {\r\n\t\treturn this.clone()._floor();\r\n\t},\r\n\r\n\t_floor: function () {\r\n\t\tthis.x = Math.floor(this.x);\r\n\t\tthis.y = Math.floor(this.y);\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method ceil(): Point\r\n\t// Returns a copy of the current point with ceiled coordinates (rounded up).\r\n\tceil: function () {\r\n\t\treturn this.clone()._ceil();\r\n\t},\r\n\r\n\t_ceil: function () {\r\n\t\tthis.x = Math.ceil(this.x);\r\n\t\tthis.y = Math.ceil(this.y);\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method trunc(): Point\r\n\t// Returns a copy of the current point with truncated coordinates (rounded towards zero).\r\n\ttrunc: function () {\r\n\t\treturn this.clone()._trunc();\r\n\t},\r\n\r\n\t_trunc: function () {\r\n\t\tthis.x = trunc(this.x);\r\n\t\tthis.y = trunc(this.y);\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method distanceTo(otherPoint: Point): Number\r\n\t// Returns the cartesian distance between the current and the given points.\r\n\tdistanceTo: function (point) {\r\n\t\tpoint = toPoint(point);\r\n\r\n\t\tvar x = point.x - this.x,\r\n\t\t y = point.y - this.y;\r\n\r\n\t\treturn Math.sqrt(x * x + y * y);\r\n\t},\r\n\r\n\t// @method equals(otherPoint: Point): Boolean\r\n\t// Returns `true` if the given point has the same coordinates.\r\n\tequals: function (point) {\r\n\t\tpoint = toPoint(point);\r\n\r\n\t\treturn point.x === this.x &&\r\n\t\t point.y === this.y;\r\n\t},\r\n\r\n\t// @method contains(otherPoint: Point): Boolean\r\n\t// Returns `true` if both coordinates of the given point are less than the corresponding current point coordinates (in absolute values).\r\n\tcontains: function (point) {\r\n\t\tpoint = toPoint(point);\r\n\r\n\t\treturn Math.abs(point.x) <= Math.abs(this.x) &&\r\n\t\t Math.abs(point.y) <= Math.abs(this.y);\r\n\t},\r\n\r\n\t// @method toString(): String\r\n\t// Returns a string representation of the point for debugging purposes.\r\n\ttoString: function () {\r\n\t\treturn 'Point(' +\r\n\t\t formatNum(this.x) + ', ' +\r\n\t\t formatNum(this.y) + ')';\r\n\t}\r\n};\r\n\r\n// @factory L.point(x: Number, y: Number, round?: Boolean)\r\n// Creates a Point object with the given `x` and `y` coordinates. If optional `round` is set to true, rounds the `x` and `y` values.\r\n\r\n// @alternative\r\n// @factory L.point(coords: Number[])\r\n// Expects an array of the form `[x, y]` instead.\r\n\r\n// @alternative\r\n// @factory L.point(coords: Object)\r\n// Expects a plain object of the form `{x: Number, y: Number}` instead.\r\nfunction toPoint(x, y, round) {\r\n\tif (x instanceof Point) {\r\n\t\treturn x;\r\n\t}\r\n\tif (isArray(x)) {\r\n\t\treturn new Point(x[0], x[1]);\r\n\t}\r\n\tif (x === undefined || x === null) {\r\n\t\treturn x;\r\n\t}\r\n\tif (typeof x === 'object' && 'x' in x && 'y' in x) {\r\n\t\treturn new Point(x.x, x.y);\r\n\t}\r\n\treturn new Point(x, y, round);\r\n}\n\n/*\r\n * @class Bounds\r\n * @aka L.Bounds\r\n *\r\n * Represents a rectangular area in pixel coordinates.\r\n *\r\n * @example\r\n *\r\n * ```js\r\n * var p1 = L.point(10, 10),\r\n * p2 = L.point(40, 60),\r\n * bounds = L.bounds(p1, p2);\r\n * ```\r\n *\r\n * All Leaflet methods that accept `Bounds` objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:\r\n *\r\n * ```js\r\n * otherBounds.intersects([[10, 10], [40, 60]]);\r\n * ```\r\n *\r\n * Note that `Bounds` does not inherit from Leafet's `Class` object,\r\n * which means new classes can't inherit from it, and new methods\r\n * can't be added to it with the `include` function.\r\n */\r\n\r\nfunction Bounds(a, b) {\r\n\tif (!a) { return; }\r\n\r\n\tvar points = b ? [a, b] : a;\r\n\r\n\tfor (var i = 0, len = points.length; i < len; i++) {\r\n\t\tthis.extend(points[i]);\r\n\t}\r\n}\r\n\r\nBounds.prototype = {\r\n\t// @method extend(point: Point): this\r\n\t// Extends the bounds to contain the given point.\r\n\textend: function (point) { // (Point)\r\n\t\tpoint = toPoint(point);\r\n\r\n\t\t// @property min: Point\r\n\t\t// The top left corner of the rectangle.\r\n\t\t// @property max: Point\r\n\t\t// The bottom right corner of the rectangle.\r\n\t\tif (!this.min && !this.max) {\r\n\t\t\tthis.min = point.clone();\r\n\t\t\tthis.max = point.clone();\r\n\t\t} else {\r\n\t\t\tthis.min.x = Math.min(point.x, this.min.x);\r\n\t\t\tthis.max.x = Math.max(point.x, this.max.x);\r\n\t\t\tthis.min.y = Math.min(point.y, this.min.y);\r\n\t\t\tthis.max.y = Math.max(point.y, this.max.y);\r\n\t\t}\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method getCenter(round?: Boolean): Point\r\n\t// Returns the center point of the bounds.\r\n\tgetCenter: function (round) {\r\n\t\treturn new Point(\r\n\t\t (this.min.x + this.max.x) / 2,\r\n\t\t (this.min.y + this.max.y) / 2, round);\r\n\t},\r\n\r\n\t// @method getBottomLeft(): Point\r\n\t// Returns the bottom-left point of the bounds.\r\n\tgetBottomLeft: function () {\r\n\t\treturn new Point(this.min.x, this.max.y);\r\n\t},\r\n\r\n\t// @method getTopRight(): Point\r\n\t// Returns the top-right point of the bounds.\r\n\tgetTopRight: function () { // -> Point\r\n\t\treturn new Point(this.max.x, this.min.y);\r\n\t},\r\n\r\n\t// @method getTopLeft(): Point\r\n\t// Returns the top-left point of the bounds (i.e. [`this.min`](#bounds-min)).\r\n\tgetTopLeft: function () {\r\n\t\treturn this.min; // left, top\r\n\t},\r\n\r\n\t// @method getBottomRight(): Point\r\n\t// Returns the bottom-right point of the bounds (i.e. [`this.max`](#bounds-max)).\r\n\tgetBottomRight: function () {\r\n\t\treturn this.max; // right, bottom\r\n\t},\r\n\r\n\t// @method getSize(): Point\r\n\t// Returns the size of the given bounds\r\n\tgetSize: function () {\r\n\t\treturn this.max.subtract(this.min);\r\n\t},\r\n\r\n\t// @method contains(otherBounds: Bounds): Boolean\r\n\t// Returns `true` if the rectangle contains the given one.\r\n\t// @alternative\r\n\t// @method contains(point: Point): Boolean\r\n\t// Returns `true` if the rectangle contains the given point.\r\n\tcontains: function (obj) {\r\n\t\tvar min, max;\r\n\r\n\t\tif (typeof obj[0] === 'number' || obj instanceof Point) {\r\n\t\t\tobj = toPoint(obj);\r\n\t\t} else {\r\n\t\t\tobj = toBounds(obj);\r\n\t\t}\r\n\r\n\t\tif (obj instanceof Bounds) {\r\n\t\t\tmin = obj.min;\r\n\t\t\tmax = obj.max;\r\n\t\t} else {\r\n\t\t\tmin = max = obj;\r\n\t\t}\r\n\r\n\t\treturn (min.x >= this.min.x) &&\r\n\t\t (max.x <= this.max.x) &&\r\n\t\t (min.y >= this.min.y) &&\r\n\t\t (max.y <= this.max.y);\r\n\t},\r\n\r\n\t// @method intersects(otherBounds: Bounds): Boolean\r\n\t// Returns `true` if the rectangle intersects the given bounds. Two bounds\r\n\t// intersect if they have at least one point in common.\r\n\tintersects: function (bounds) { // (Bounds) -> Boolean\r\n\t\tbounds = toBounds(bounds);\r\n\r\n\t\tvar min = this.min,\r\n\t\t max = this.max,\r\n\t\t min2 = bounds.min,\r\n\t\t max2 = bounds.max,\r\n\t\t xIntersects = (max2.x >= min.x) && (min2.x <= max.x),\r\n\t\t yIntersects = (max2.y >= min.y) && (min2.y <= max.y);\r\n\r\n\t\treturn xIntersects && yIntersects;\r\n\t},\r\n\r\n\t// @method overlaps(otherBounds: Bounds): Boolean\r\n\t// Returns `true` if the rectangle overlaps the given bounds. Two bounds\r\n\t// overlap if their intersection is an area.\r\n\toverlaps: function (bounds) { // (Bounds) -> Boolean\r\n\t\tbounds = toBounds(bounds);\r\n\r\n\t\tvar min = this.min,\r\n\t\t max = this.max,\r\n\t\t min2 = bounds.min,\r\n\t\t max2 = bounds.max,\r\n\t\t xOverlaps = (max2.x > min.x) && (min2.x < max.x),\r\n\t\t yOverlaps = (max2.y > min.y) && (min2.y < max.y);\r\n\r\n\t\treturn xOverlaps && yOverlaps;\r\n\t},\r\n\r\n\tisValid: function () {\r\n\t\treturn !!(this.min && this.max);\r\n\t}\r\n};\r\n\r\n\r\n// @factory L.bounds(corner1: Point, corner2: Point)\r\n// Creates a Bounds object from two corners coordinate pairs.\r\n// @alternative\r\n// @factory L.bounds(points: Point[])\r\n// Creates a Bounds object from the given array of points.\r\nfunction toBounds(a, b) {\r\n\tif (!a || a instanceof Bounds) {\r\n\t\treturn a;\r\n\t}\r\n\treturn new Bounds(a, b);\r\n}\n\n/*\r\n * @class LatLngBounds\r\n * @aka L.LatLngBounds\r\n *\r\n * Represents a rectangular geographical area on a map.\r\n *\r\n * @example\r\n *\r\n * ```js\r\n * var corner1 = L.latLng(40.712, -74.227),\r\n * corner2 = L.latLng(40.774, -74.125),\r\n * bounds = L.latLngBounds(corner1, corner2);\r\n * ```\r\n *\r\n * All Leaflet methods that accept LatLngBounds objects also accept them in a simple Array form (unless noted otherwise), so the bounds example above can be passed like this:\r\n *\r\n * ```js\r\n * map.fitBounds([\r\n * \t[40.712, -74.227],\r\n * \t[40.774, -74.125]\r\n * ]);\r\n * ```\r\n *\r\n * Caution: if the area crosses the antimeridian (often confused with the International Date Line), you must specify corners _outside_ the [-180, 180] degrees longitude range.\r\n *\r\n * Note that `LatLngBounds` does not inherit from Leafet's `Class` object,\r\n * which means new classes can't inherit from it, and new methods\r\n * can't be added to it with the `include` function.\r\n */\r\n\r\nfunction LatLngBounds(corner1, corner2) { // (LatLng, LatLng) or (LatLng[])\r\n\tif (!corner1) { return; }\r\n\r\n\tvar latlngs = corner2 ? [corner1, corner2] : corner1;\r\n\r\n\tfor (var i = 0, len = latlngs.length; i < len; i++) {\r\n\t\tthis.extend(latlngs[i]);\r\n\t}\r\n}\r\n\r\nLatLngBounds.prototype = {\r\n\r\n\t// @method extend(latlng: LatLng): this\r\n\t// Extend the bounds to contain the given point\r\n\r\n\t// @alternative\r\n\t// @method extend(otherBounds: LatLngBounds): this\r\n\t// Extend the bounds to contain the given bounds\r\n\textend: function (obj) {\r\n\t\tvar sw = this._southWest,\r\n\t\t ne = this._northEast,\r\n\t\t sw2, ne2;\r\n\r\n\t\tif (obj instanceof LatLng) {\r\n\t\t\tsw2 = obj;\r\n\t\t\tne2 = obj;\r\n\r\n\t\t} else if (obj instanceof LatLngBounds) {\r\n\t\t\tsw2 = obj._southWest;\r\n\t\t\tne2 = obj._northEast;\r\n\r\n\t\t\tif (!sw2 || !ne2) { return this; }\r\n\r\n\t\t} else {\r\n\t\t\treturn obj ? this.extend(toLatLng(obj) || toLatLngBounds(obj)) : this;\r\n\t\t}\r\n\r\n\t\tif (!sw && !ne) {\r\n\t\t\tthis._southWest = new LatLng(sw2.lat, sw2.lng);\r\n\t\t\tthis._northEast = new LatLng(ne2.lat, ne2.lng);\r\n\t\t} else {\r\n\t\t\tsw.lat = Math.min(sw2.lat, sw.lat);\r\n\t\t\tsw.lng = Math.min(sw2.lng, sw.lng);\r\n\t\t\tne.lat = Math.max(ne2.lat, ne.lat);\r\n\t\t\tne.lng = Math.max(ne2.lng, ne.lng);\r\n\t\t}\r\n\r\n\t\treturn this;\r\n\t},\r\n\r\n\t// @method pad(bufferRatio: Number): LatLngBounds\r\n\t// Returns bounds created by extending or retracting the current bounds by a given ratio in each direction.\r\n\t// For example, a ratio of 0.5 extends the bounds by 50% in each direction.\r\n\t// Negative values will retract the bounds.\r\n\tpad: function (bufferRatio) {\r\n\t\tvar sw = this._southWest,\r\n\t\t ne = this._northEast,\r\n\t\t heightBuffer = Math.abs(sw.lat - ne.lat) * bufferRatio,\r\n\t\t widthBuffer = Math.abs(sw.lng - ne.lng) * bufferRatio;\r\n\r\n\t\treturn new LatLngBounds(\r\n\t\t new LatLng(sw.lat - heightBuffer, sw.lng - widthBuffer),\r\n\t\t new LatLng(ne.lat + heightBuffer, ne.lng + widthBuffer));\r\n\t},\r\n\r\n\t// @method getCenter(): LatLng\r\n\t// Returns the center point of the bounds.\r\n\tgetCenter: function () {\r\n\t\treturn new LatLng(\r\n\t\t (this._southWest.lat + this._northEast.lat) / 2,\r\n\t\t (this._southWest.lng + this._northEast.lng) / 2);\r\n\t},\r\n\r\n\t// @method getSouthWest(): LatLng\r\n\t// Returns the south-west point of the bounds.\r\n\tgetSouthWest: function () {\r\n\t\treturn this._southWest;\r\n\t},\r\n\r\n\t// @method getNorthEast(): LatLng\r\n\t// Returns the north-east point of the bounds.\r\n\tgetNorthEast: function () {\r\n\t\treturn this._northEast;\r\n\t},\r\n\r\n\t// @method getNorthWest(): LatLng\r\n\t// Returns the north-west point of the bounds.\r\n\tgetNorthWest: function () {\r\n\t\treturn new LatLng(this.getNorth(), this.getWest());\r\n\t},\r\n\r\n\t// @method getSouthEast(): LatLng\r\n\t// Returns the south-east point of the bounds.\r\n\tgetSouthEast: function () {\r\n\t\treturn new LatLng(this.getSouth(), this.getEast());\r\n\t},\r\n\r\n\t// @method getWest(): Number\r\n\t// Returns the west longitude of the bounds\r\n\tgetWest: function () {\r\n\t\treturn this._southWest.lng;\r\n\t},\r\n\r\n\t// @method getSouth(): Number\r\n\t// Returns the south latitude of the bounds\r\n\tgetSouth: function () {\r\n\t\treturn this._southWest.lat;\r\n\t},\r\n\r\n\t// @method getEast(): Number\r\n\t// Returns the east longitude of the bounds\r\n\tgetEast: function () {\r\n\t\treturn this._northEast.lng;\r\n\t},\r\n\r\n\t// @method getNorth(): Number\r\n\t// Returns the north latitude of the bounds\r\n\tgetNorth: function () {\r\n\t\treturn this._northEast.lat;\r\n\t},\r\n\r\n\t// @method contains(otherBounds: LatLngBounds): Boolean\r\n\t// Returns `true` if the rectangle contains the given one.\r\n\r\n\t// @alternative\r\n\t// @method contains (latlng: LatLng): Boolean\r\n\t// Returns `true` if the rectangle contains the given point.\r\n\tcontains: function (obj) { // (LatLngBounds) or (LatLng) -> Boolean\r\n\t\tif (typeof obj[0] === 'number' || obj instanceof LatLng || 'lat' in obj) {\r\n\t\t\tobj = toLatLng(obj);\r\n\t\t} else {\r\n\t\t\tobj = toLatLngBounds(obj);\r\n\t\t}\r\n\r\n\t\tvar sw = this._southWest,\r\n\t\t ne = this._northEast,\r\n\t\t sw2, ne2;\r\n\r\n\t\tif (obj instanceof LatLngBounds) {\r\n\t\t\tsw2 = obj.getSouthWest();\r\n\t\t\tne2 = obj.getNorthEast();\r\n\t\t} else {\r\n\t\t\tsw2 = ne2 = obj;\r\n\t\t}\r\n\r\n\t\treturn (sw2.lat >= sw.lat) && (ne2.lat <= ne.lat) &&\r\n\t\t (sw2.lng >= sw.lng) && (ne2.lng <= ne.lng);\r\n\t},\r\n\r\n\t// @method intersects(otherBounds: LatLngBounds): Boolean\r\n\t// Returns `true` if the rectangle intersects the given bounds. Two bounds intersect if they have at least one point in common.\r\n\tintersects: function (bounds) {\r\n\t\tbounds = toLatLngBounds(bounds);\r\n\r\n\t\tvar sw = this._southWest,\r\n\t\t ne = this._northEast,\r\n\t\t sw2 = bounds.getSouthWest(),\r\n\t\t ne2 = bounds.getNorthEast(),\r\n\r\n\t\t latIntersects = (ne2.lat >= sw.lat) && (sw2.lat <= ne.lat),\r\n\t\t lngIntersects = (ne2.lng >= sw.lng) && (sw2.lng <= ne.lng);\r\n\r\n\t\treturn latIntersects && lngIntersects;\r\n\t},\r\n\r\n\t// @method overlaps(otherBounds: Bounds): Boolean\r\n\t// Returns `true` if the rectangle overlaps the given bounds. Two bounds overlap if their intersection is an area.\r\n\toverlaps: function (bounds) {\r\n\t\tbounds = toLatLngBounds(bounds);\r\n\r\n\t\tvar sw = this._southWest,\r\n\t\t ne = this._northEast,\r\n\t\t sw2 = bounds.getSouthWest(),\r\n\t\t ne2 = bounds.getNorthEast(),\r\n\r\n\t\t latOverlaps = (ne2.lat > sw.lat) && (sw2.lat < ne.lat),\r\n\t\t lngOverlaps = (ne2.lng > sw.lng) && (sw2.lng < ne.lng);\r\n\r\n\t\treturn latOverlaps && lngOverlaps;\r\n\t},\r\n\r\n\t// @method toBBoxString(): String\r\n\t// Returns a string with bounding box coordinates in a 'southwest_lng,southwest_lat,northeast_lng,northeast_lat' format. Useful for sending requests to web services that return geo data.\r\n\ttoBBoxString: function () {\r\n\t\treturn [this.getWest(), this.getSouth(), this.getEast(), this.getNorth()].join(',');\r\n\t},\r\n\r\n\t// @method equals(otherBounds: LatLngBounds, maxMargin?: Number): Boolean\r\n\t// Returns `true` if the rectangle is equivalent (within a small margin of error) to the given bounds. The margin of error can be overridden by setting `maxMargin` to a small number.\r\n\tequals: function (bounds, maxMargin) {\r\n\t\tif (!bounds) { return false; }\r\n\r\n\t\tbounds = toLatLngBounds(bounds);\r\n\r\n\t\treturn this._southWest.equals(bounds.getSouthWest(), maxMargin) &&\r\n\t\t this._northEast.equals(bounds.getNorthEast(), maxMargin);\r\n\t},\r\n\r\n\t// @method isValid(): Boolean\r\n\t// Returns `true` if the bounds are properly initialized.\r\n\tisValid: function () {\r\n\t\treturn !!(this._southWest && this._northEast);\r\n\t}\r\n};\r\n\r\n// TODO International date line?\r\n\r\n// @factory L.latLngBounds(corner1: LatLng, corner2: LatLng)\r\n// Creates a `LatLngBounds` object by defining two diagonally opposite corners of the rectangle.\r\n\r\n// @alternative\r\n// @factory L.latLngBounds(latlngs: LatLng[])\r\n// Creates a `LatLngBounds` object defined by the geographical points it contains. Very useful for zooming the map to fit a particular set of locations with [`fitBounds`](#map-fitbounds).\r\nfunction toLatLngBounds(a, b) {\r\n\tif (a instanceof LatLngBounds) {\r\n\t\treturn a;\r\n\t}\r\n\treturn new LatLngBounds(a, b);\r\n}\n\n/* @class LatLng\r\n * @aka L.LatLng\r\n *\r\n * Represents a geographical point with a certain latitude and longitude.\r\n *\r\n * @example\r\n *\r\n * ```\r\n * var latlng = L.latLng(50.5, 30.5);\r\n * ```\r\n *\r\n * All Leaflet methods that accept LatLng objects also accept them in a simple Array form and simple object form (unless noted otherwise), so these lines are equivalent:\r\n *\r\n * ```\r\n * map.panTo([50, 30]);\r\n * map.panTo({lon: 30, lat: 50});\r\n * map.panTo({lat: 50, lng: 30});\r\n * map.panTo(L.latLng(50, 30));\r\n * ```\r\n *\r\n * Note that `LatLng` does not inherit from Leaflet's `Class` object,\r\n * which means new classes can't inherit from it, and new methods\r\n * can't be added to it with the `include` function.\r\n */\r\n\r\nfunction LatLng(lat, lng, alt) {\r\n\tif (isNaN(lat) || isNaN(lng)) {\r\n\t\tthrow new Error('Invalid LatLng object: (' + lat + ', ' + lng + ')');\r\n\t}\r\n\r\n\t// @property lat: Number\r\n\t// Latitude in degrees\r\n\tthis.lat = +lat;\r\n\r\n\t// @property lng: Number\r\n\t// Longitude in degrees\r\n\tthis.lng = +lng;\r\n\r\n\t// @property alt: Number\r\n\t// Altitude in meters (optional)\r\n\tif (alt !== undefined) {\r\n\t\tthis.alt = +alt;\r\n\t}\r\n}\r\n\r\nLatLng.prototype = {\r\n\t// @method equals(otherLatLng: LatLng, maxMargin?: Number): Boolean\r\n\t// Returns `true` if the given `LatLng` point is at the same position (within a small margin of error). The margin of error can be overridden by setting `maxMargin` to a small number.\r\n\tequals: function (obj, maxMargin) {\r\n\t\tif (!obj) { return false; }\r\n\r\n\t\tobj = toLatLng(obj);\r\n\r\n\t\tvar margin = Math.max(\r\n\t\t Math.abs(this.lat - obj.lat),\r\n\t\t Math.abs(this.lng - obj.lng));\r\n\r\n\t\treturn margin <= (maxMargin === undefined ? 1.0E-9 : maxMargin);\r\n\t},\r\n\r\n\t// @method toString(): String\r\n\t// Returns a string representation of the point (for debugging purposes).\r\n\ttoString: function (precision) {\r\n\t\treturn 'LatLng(' +\r\n\t\t formatNum(this.lat, precision) + ', ' +\r\n\t\t formatNum(this.lng, precision) + ')';\r\n\t},\r\n\r\n\t// @method distanceTo(otherLatLng: LatLng): Number\r\n\t// Returns the distance (in meters) to the given `LatLng` calculated using the [Spherical Law of Cosines](https://en.wikipedia.org/wiki/Spherical_law_of_cosines).\r\n\tdistanceTo: function (other) {\r\n\t\treturn Earth.distance(this, toLatLng(other));\r\n\t},\r\n\r\n\t// @method wrap(): LatLng\r\n\t// Returns a new `LatLng` object with the longitude wrapped so it's always between -180 and +180 degrees.\r\n\twrap: function () {\r\n\t\treturn Earth.wrapLatLng(this);\r\n\t},\r\n\r\n\t// @method toBounds(sizeInMeters: Number): LatLngBounds\r\n\t// Returns a new `LatLngBounds` object in which each boundary is `sizeInMeters/2` meters apart from the `LatLng`.\r\n\ttoBounds: function (sizeInMeters) {\r\n\t\tvar latAccuracy = 180 * sizeInMeters / 40075017,\r\n\t\t lngAccuracy = latAccuracy / Math.cos((Math.PI / 180) * this.lat);\r\n\r\n\t\treturn toLatLngBounds(\r\n\t\t [this.lat - latAccuracy, this.lng - lngAccuracy],\r\n\t\t [this.lat + latAccuracy, this.lng + lngAccuracy]);\r\n\t},\r\n\r\n\tclone: function () {\r\n\t\treturn new LatLng(this.lat, this.lng, this.alt);\r\n\t}\r\n};\r\n\r\n\r\n\r\n// @factory L.latLng(latitude: Number, longitude: Number, altitude?: Number): LatLng\r\n// Creates an object representing a geographical point with the given latitude and longitude (and optionally altitude).\r\n\r\n// @alternative\r\n// @factory L.latLng(coords: Array): LatLng\r\n// Expects an array of the form `[Number, Number]` or `[Number, Number, Number]` instead.\r\n\r\n// @alternative\r\n// @factory L.latLng(coords: Object): LatLng\r\n// Expects an plain object of the form `{lat: Number, lng: Number}` or `{lat: Number, lng: Number, alt: Number}` instead.\r\n\r\nfunction toLatLng(a, b, c) {\r\n\tif (a instanceof LatLng) {\r\n\t\treturn a;\r\n\t}\r\n\tif (isArray(a) && typeof a[0] !== 'object') {\r\n\t\tif (a.length === 3) {\r\n\t\t\treturn new LatLng(a[0], a[1], a[2]);\r\n\t\t}\r\n\t\tif (a.length === 2) {\r\n\t\t\treturn new LatLng(a[0], a[1]);\r\n\t\t}\r\n\t\treturn null;\r\n\t}\r\n\tif (a === undefined || a === null) {\r\n\t\treturn a;\r\n\t}\r\n\tif (typeof a === 'object' && 'lat' in a) {\r\n\t\treturn new LatLng(a.lat, 'lng' in a ? a.lng : a.lon, a.alt);\r\n\t}\r\n\tif (b === undefined) {\r\n\t\treturn null;\r\n\t}\r\n\treturn new LatLng(a, b, c);\r\n}\n\n/*\r\n * @namespace CRS\r\n * @crs L.CRS.Base\r\n * Object that defines coordinate reference systems for projecting\r\n * geographical points into pixel (screen) coordinates and back (and to\r\n * coordinates in other units for [WMS](https://en.wikipedia.org/wiki/Web_Map_Service) services). See\r\n * [spatial reference system](http://en.wikipedia.org/wiki/Coordinate_reference_system).\r\n *\r\n * Leaflet defines the most usual CRSs by default. If you want to use a\r\n * CRS not defined by default, take a look at the\r\n * [Proj4Leaflet](https://github.com/kartena/Proj4Leaflet) plugin.\r\n *\r\n * Note that the CRS instances do not inherit from Leafet's `Class` object,\r\n * and can't be instantiated. Also, new classes can't inherit from them,\r\n * and methods can't be added to them with the `include` function.\r\n */\r\n\r\nvar CRS = {\r\n\t// @method latLngToPoint(latlng: LatLng, zoom: Number): Point\r\n\t// Projects geographical coordinates into pixel coordinates for a given zoom.\r\n\tlatLngToPoint: function (latlng, zoom) {\r\n\t\tvar projectedPoint = this.projection.project(latlng),\r\n\t\t scale = this.scale(zoom);\r\n\r\n\t\treturn this.transformation._transform(projectedPoint, scale);\r\n\t},\r\n\r\n\t// @method pointToLatLng(point: Point, zoom: Number): LatLng\r\n\t// The inverse of `latLngToPoint`. Projects pixel coordinates on a given\r\n\t// zoom into geographical coordinates.\r\n\tpointToLatLng: function (point, zoom) {\r\n\t\tvar scale = this.scale(zoom),\r\n\t\t untransformedPoint = this.transformation.untransform(point, scale);\r\n\r\n\t\treturn this.projection.unproject(untransformedPoint);\r\n\t},\r\n\r\n\t// @method project(latlng: LatLng): Point\r\n\t// Projects geographical coordinates into coordinates in units accepted for\r\n\t// this CRS (e.g. meters for EPSG:3857, for passing it to WMS services).\r\n\tproject: function (latlng) {\r\n\t\treturn this.projection.project(latlng);\r\n\t},\r\n\r\n\t// @method unproject(point: Point): LatLng\r\n\t// Given a projected coordinate returns the corresponding LatLng.\r\n\t// The inverse of `project`.\r\n\tunproject: function (point) {\r\n\t\treturn this.projection.unproject(point);\r\n\t},\r\n\r\n\t// @method scale(zoom: Number): Number\r\n\t// Returns the scale used when transforming projected coordinates into\r\n\t// pixel coordinates for a particular zoom. For example, it returns\r\n\t// `256 * 2^zoom` for Mercator-based CRS.\r\n\tscale: function (zoom) {\r\n\t\treturn 256 * Math.pow(2, zoom);\r\n\t},\r\n\r\n\t// @method zoom(scale: Number): Number\r\n\t// Inverse of `scale()`, returns the zoom level corresponding to a scale\r\n\t// factor of `scale`.\r\n\tzoom: function (scale) {\r\n\t\treturn Math.log(scale / 256) / Math.LN2;\r\n\t},\r\n\r\n\t// @method getProjectedBounds(zoom: Number): Bounds\r\n\t// Returns the projection's bounds scaled and transformed for the provided `zoom`.\r\n\tgetProjectedBounds: function (zoom) {\r\n\t\tif (this.infinite) { return null; }\r\n\r\n\t\tvar b = this.projection.bounds,\r\n\t\t s = this.scale(zoom),\r\n\t\t min = this.transformation.transform(b.min, s),\r\n\t\t max = this.transformation.transform(b.max, s);\r\n\r\n\t\treturn new Bounds(min, max);\r\n\t},\r\n\r\n\t// @method distance(latlng1: LatLng, latlng2: LatLng): Number\r\n\t// Returns the distance between two geographical coordinates.\r\n\r\n\t// @property code: String\r\n\t// Standard code name of the CRS passed into WMS services (e.g. `'EPSG:3857'`)\r\n\t//\r\n\t// @property wrapLng: Number[]\r\n\t// An array of two numbers defining whether the longitude (horizontal) coordinate\r\n\t// axis wraps around a given range and how. Defaults to `[-180, 180]` in most\r\n\t// geographical CRSs. If `undefined`, the longitude axis does not wrap around.\r\n\t//\r\n\t// @property wrapLat: Number[]\r\n\t// Like `wrapLng`, but for the latitude (vertical) axis.\r\n\r\n\t// wrapLng: [min, max],\r\n\t// wrapLat: [min, max],\r\n\r\n\t// @property infinite: Boolean\r\n\t// If true, the coordinate space will be unbounded (infinite in both axes)\r\n\tinfinite: false,\r\n\r\n\t// @method wrapLatLng(latlng: LatLng): LatLng\r\n\t// Returns a `LatLng` where lat and lng has been wrapped according to the\r\n\t// CRS's `wrapLat` and `wrapLng` properties, if they are outside the CRS's bounds.\r\n\twrapLatLng: function (latlng) {\r\n\t\tvar lng = this.wrapLng ? wrapNum(latlng.lng, this.wrapLng, true) : latlng.lng,\r\n\t\t lat = this.wrapLat ? wrapNum(latlng.lat, this.wrapLat, true) : latlng.lat,\r\n\t\t alt = latlng.alt;\r\n\r\n\t\treturn new LatLng(lat, lng, alt);\r\n\t},\r\n\r\n\t// @method wrapLatLngBounds(bounds: LatLngBounds): LatLngBounds\r\n\t// Returns a `LatLngBounds` with the same size as the given one, ensuring\r\n\t// that its center is within the CRS's bounds.\r\n\t// Only accepts actual `L.LatLngBounds` instances, not arrays.\r\n\twrapLatLngBounds: function (bounds) {\r\n\t\tvar center = bounds.getCenter(),\r\n\t\t newCenter = this.wrapLatLng(center),\r\n\t\t latShift = center.lat - newCenter.lat,\r\n\t\t lngShift = center.lng - newCenter.lng;\r\n\r\n\t\tif (latShift === 0 && lngShift === 0) {\r\n\t\t\treturn bounds;\r\n\t\t}\r\n\r\n\t\tvar sw = bounds.getSouthWest(),\r\n\t\t ne = bounds.getNorthEast(),\r\n\t\t newSw = new LatLng(sw.lat - latShift, sw.lng - lngShift),\r\n\t\t newNe = new LatLng(ne.lat - latShift, ne.lng - lngShift);\r\n\r\n\t\treturn new LatLngBounds(newSw, newNe);\r\n\t}\r\n};\n\n/*\n * @namespace CRS\n * @crs L.CRS.Earth\n *\n * Serves as the base for CRS that are global such that they cover the earth.\n * Can only be used as the base for other CRS and cannot be used directly,\n * since it does not have a `code`, `projection` or `transformation`. `distance()` returns\n * meters.\n */\n\nvar Earth = extend({}, CRS, {\n\twrapLng: [-180, 180],\n\n\t// Mean Earth Radius, as recommended for use by\n\t// the International Union of Geodesy and Geophysics,\n\t// see http://rosettacode.org/wiki/Haversine_formula\n\tR: 6371000,\n\n\t// distance between two geographical points using spherical law of cosines approximation\n\tdistance: function (latlng1, latlng2) {\n\t\tvar rad = Math.PI / 180,\n\t\t lat1 = latlng1.lat * rad,\n\t\t lat2 = latlng2.lat * rad,\n\t\t sinDLat = Math.sin((latlng2.lat - latlng1.lat) * rad / 2),\n\t\t sinDLon = Math.sin((latlng2.lng - latlng1.lng) * rad / 2),\n\t\t a = sinDLat * sinDLat + Math.cos(lat1) * Math.cos(lat2) * sinDLon * sinDLon,\n\t\t c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n\t\treturn this.R * c;\n\t}\n});\n\n/*\r\n * @namespace Projection\r\n * @projection L.Projection.SphericalMercator\r\n *\r\n * Spherical Mercator projection — the most common projection for online maps,\r\n * used by almost all free and commercial tile providers. Assumes that Earth is\r\n * a sphere. Used by the `EPSG:3857` CRS.\r\n */\r\n\r\nvar earthRadius = 6378137;\r\n\r\nvar SphericalMercator = {\r\n\r\n\tR: earthRadius,\r\n\tMAX_LATITUDE: 85.0511287798,\r\n\r\n\tproject: function (latlng) {\r\n\t\tvar d = Math.PI / 180,\r\n\t\t max = this.MAX_LATITUDE,\r\n\t\t lat = Math.max(Math.min(max, latlng.lat), -max),\r\n\t\t sin = Math.sin(lat * d);\r\n\r\n\t\treturn new Point(\r\n\t\t\tthis.R * latlng.lng * d,\r\n\t\t\tthis.R * Math.log((1 + sin) / (1 - sin)) / 2);\r\n\t},\r\n\r\n\tunproject: function (point) {\r\n\t\tvar d = 180 / Math.PI;\r\n\r\n\t\treturn new LatLng(\r\n\t\t\t(2 * Math.atan(Math.exp(point.y / this.R)) - (Math.PI / 2)) * d,\r\n\t\t\tpoint.x * d / this.R);\r\n\t},\r\n\r\n\tbounds: (function () {\r\n\t\tvar d = earthRadius * Math.PI;\r\n\t\treturn new Bounds([-d, -d], [d, d]);\r\n\t})()\r\n};\n\n/*\r\n * @class Transformation\r\n * @aka L.Transformation\r\n *\r\n * Represents an affine transformation: a set of coefficients `a`, `b`, `c`, `d`\r\n * for transforming a point of a form `(x, y)` into `(a*x + b, c*y + d)` and doing\r\n * the reverse. Used by Leaflet in its projections code.\r\n *\r\n * @example\r\n *\r\n * ```js\r\n * var transformation = L.transformation(2, 5, -1, 10),\r\n * \tp = L.point(1, 2),\r\n * \tp2 = transformation.transform(p), // L.point(7, 8)\r\n * \tp3 = transformation.untransform(p2); // L.point(1, 2)\r\n * ```\r\n */\r\n\r\n\r\n// factory new L.Transformation(a: Number, b: Number, c: Number, d: Number)\r\n// Creates a `Transformation` object with the given coefficients.\r\nfunction Transformation(a, b, c, d) {\r\n\tif (isArray(a)) {\r\n\t\t// use array properties\r\n\t\tthis._a = a[0];\r\n\t\tthis._b = a[1];\r\n\t\tthis._c = a[2];\r\n\t\tthis._d = a[3];\r\n\t\treturn;\r\n\t}\r\n\tthis._a = a;\r\n\tthis._b = b;\r\n\tthis._c = c;\r\n\tthis._d = d;\r\n}\r\n\r\nTransformation.prototype = {\r\n\t// @method transform(point: Point, scale?: Number): Point\r\n\t// Returns a transformed point, optionally multiplied by the given scale.\r\n\t// Only accepts actual `L.Point` instances, not arrays.\r\n\ttransform: function (point, scale) { // (Point, Number) -> Point\r\n\t\treturn this._transform(point.clone(), scale);\r\n\t},\r\n\r\n\t// destructive transform (faster)\r\n\t_transform: function (point, scale) {\r\n\t\tscale = scale || 1;\r\n\t\tpoint.x = scale * (this._a * point.x + this._b);\r\n\t\tpoint.y = scale * (this._c * point.y + this._d);\r\n\t\treturn point;\r\n\t},\r\n\r\n\t// @method untransform(point: Point, scale?: Number): Point\r\n\t// Returns the reverse transformation of the given point, optionally divided\r\n\t// by the given scale. Only accepts actual `L.Point` instances, not arrays.\r\n\tuntransform: function (point, scale) {\r\n\t\tscale = scale || 1;\r\n\t\treturn new Point(\r\n\t\t (point.x / scale - this._b) / this._a,\r\n\t\t (point.y / scale - this._d) / this._c);\r\n\t}\r\n};\r\n\r\n// factory L.transformation(a: Number, b: Number, c: Number, d: Number)\r\n\r\n// @factory L.transformation(a: Number, b: Number, c: Number, d: Number)\r\n// Instantiates a Transformation object with the given coefficients.\r\n\r\n// @alternative\r\n// @factory L.transformation(coefficients: Array): Transformation\r\n// Expects an coefficients array of the form\r\n// `[a: Number, b: Number, c: Number, d: Number]`.\r\n\r\nfunction toTransformation(a, b, c, d) {\r\n\treturn new Transformation(a, b, c, d);\r\n}\n\n/*\r\n * @namespace CRS\r\n * @crs L.CRS.EPSG3857\r\n *\r\n * The most common CRS for online maps, used by almost all free and commercial\r\n * tile providers. Uses Spherical Mercator projection. Set in by default in\r\n * Map's `crs` option.\r\n */\r\n\r\nvar EPSG3857 = extend({}, Earth, {\r\n\tcode: 'EPSG:3857',\r\n\tprojection: SphericalMercator,\r\n\r\n\ttransformation: (function () {\r\n\t\tvar scale = 0.5 / (Math.PI * SphericalMercator.R);\r\n\t\treturn toTransformation(scale, 0.5, -scale, 0.5);\r\n\t}())\r\n});\r\n\r\nvar EPSG900913 = extend({}, EPSG3857, {\r\n\tcode: 'EPSG:900913'\r\n});\n\n// @namespace SVG; @section\n// There are several static functions which can be called without instantiating L.SVG:\n\n// @function create(name: String): SVGElement\n// Returns a instance of [SVGElement](https://developer.mozilla.org/docs/Web/API/SVGElement),\n// corresponding to the class name passed. For example, using 'line' will return\n// an instance of [SVGLineElement](https://developer.mozilla.org/docs/Web/API/SVGLineElement).\nfunction svgCreate(name) {\n\treturn document.createElementNS('http://www.w3.org/2000/svg', name);\n}\n\n// @function pointsToPath(rings: Point[], closed: Boolean): String\n// Generates a SVG path string for multiple rings, with each ring turning\n// into \"M..L..L..\" instructions\nfunction pointsToPath(rings, closed) {\n\tvar str = '',\n\ti, j, len, len2, points, p;\n\n\tfor (i = 0, len = rings.length; i < len; i++) {\n\t\tpoints = rings[i];\n\n\t\tfor (j = 0, len2 = points.length; j < len2; j++) {\n\t\t\tp = points[j];\n\t\t\tstr += (j ? 'L' : 'M') + p.x + ' ' + p.y;\n\t\t}\n\n\t\t// closes the ring for polygons; \"x\" is VML syntax\n\t\tstr += closed ? (svg ? 'z' : 'x') : '';\n\t}\n\n\t// SVG complains about empty path strings\n\treturn str || 'M0 0';\n}\n\n/*\r\n * @namespace Browser\r\n * @aka L.Browser\r\n *\r\n * A namespace with static properties for browser/feature detection used by Leaflet internally.\r\n *\r\n * @example\r\n *\r\n * ```js\r\n * if (L.Browser.ielt9) {\r\n * alert('Upgrade your browser, dude!');\r\n * }\r\n * ```\r\n */\r\n\r\nvar style$1 = document.documentElement.style;\r\n\r\n// @property ie: Boolean; `true` for all Internet Explorer versions (not Edge).\r\nvar ie = 'ActiveXObject' in window;\r\n\r\n// @property ielt9: Boolean; `true` for Internet Explorer versions less than 9.\r\nvar ielt9 = ie && !document.addEventListener;\r\n\r\n// @property edge: Boolean; `true` for the Edge web browser.\r\nvar edge = 'msLaunchUri' in navigator && !('documentMode' in document);\r\n\r\n// @property webkit: Boolean;\r\n// `true` for webkit-based browsers like Chrome and Safari (including mobile versions).\r\nvar webkit = userAgentContains('webkit');\r\n\r\n// @property android: Boolean\r\n// `true` for any browser running on an Android platform.\r\nvar android = userAgentContains('android');\r\n\r\n// @property android23: Boolean; `true` for browsers running on Android 2 or Android 3.\r\nvar android23 = userAgentContains('android 2') || userAgentContains('android 3');\r\n\r\n/* See https://stackoverflow.com/a/17961266 for details on detecting stock Android */\r\nvar webkitVer = parseInt(/WebKit\\/([0-9]+)|$/.exec(navigator.userAgent)[1], 10); // also matches AppleWebKit\r\n// @property androidStock: Boolean; `true` for the Android stock browser (i.e. not Chrome)\r\nvar androidStock = android && userAgentContains('Google') && webkitVer < 537 && !('AudioNode' in window);\r\n\r\n// @property opera: Boolean; `true` for the Opera browser\r\nvar opera = !!window.opera;\r\n\r\n// @property chrome: Boolean; `true` for the Chrome browser.\r\nvar chrome = userAgentContains('chrome');\r\n\r\n// @property gecko: Boolean; `true` for gecko-based browsers like Firefox.\r\nvar gecko = userAgentContains('gecko') && !webkit && !opera && !ie;\r\n\r\n// @property safari: Boolean; `true` for the Safari browser.\r\nvar safari = !chrome && userAgentContains('safari');\r\n\r\nvar phantom = userAgentContains('phantom');\r\n\r\n// @property opera12: Boolean\r\n// `true` for the Opera browser supporting CSS transforms (version 12 or later).\r\nvar opera12 = 'OTransition' in style$1;\r\n\r\n// @property win: Boolean; `true` when the browser is running in a Windows platform\r\nvar win = navigator.platform.indexOf('Win') === 0;\r\n\r\n// @property ie3d: Boolean; `true` for all Internet Explorer versions supporting CSS transforms.\r\nvar ie3d = ie && ('transition' in style$1);\r\n\r\n// @property webkit3d: Boolean; `true` for webkit-based browsers supporting CSS transforms.\r\nvar webkit3d = ('WebKitCSSMatrix' in window) && ('m11' in new window.WebKitCSSMatrix()) && !android23;\r\n\r\n// @property gecko3d: Boolean; `true` for gecko-based browsers supporting CSS transforms.\r\nvar gecko3d = 'MozPerspective' in style$1;\r\n\r\n// @property any3d: Boolean\r\n// `true` for all browsers supporting CSS transforms.\r\nvar any3d = !window.L_DISABLE_3D && (ie3d || webkit3d || gecko3d) && !opera12 && !phantom;\r\n\r\n// @property mobile: Boolean; `true` for all browsers running in a mobile device.\r\nvar mobile = typeof orientation !== 'undefined' || userAgentContains('mobile');\r\n\r\n// @property mobileWebkit: Boolean; `true` for all webkit-based browsers in a mobile device.\r\nvar mobileWebkit = mobile && webkit;\r\n\r\n// @property mobileWebkit3d: Boolean\r\n// `true` for all webkit-based browsers in a mobile device supporting CSS transforms.\r\nvar mobileWebkit3d = mobile && webkit3d;\r\n\r\n// @property msPointer: Boolean\r\n// `true` for browsers implementing the Microsoft touch events model (notably IE10).\r\nvar msPointer = !window.PointerEvent && window.MSPointerEvent;\r\n\r\n// @property pointer: Boolean\r\n// `true` for all browsers supporting [pointer events](https://msdn.microsoft.com/en-us/library/dn433244%28v=vs.85%29.aspx).\r\nvar pointer = !!(window.PointerEvent || msPointer);\r\n\r\n// @property touch: Boolean\r\n// `true` for all browsers supporting [touch events](https://developer.mozilla.org/docs/Web/API/Touch_events).\r\n// This does not necessarily mean that the browser is running in a computer with\r\n// a touchscreen, it only means that the browser is capable of understanding\r\n// touch events.\r\nvar touch = !window.L_NO_TOUCH && (pointer || 'ontouchstart' in window ||\r\n\t\t(window.DocumentTouch && document instanceof window.DocumentTouch));\r\n\r\n// @property mobileOpera: Boolean; `true` for the Opera browser in a mobile device.\r\nvar mobileOpera = mobile && opera;\r\n\r\n// @property mobileGecko: Boolean\r\n// `true` for gecko-based browsers running in a mobile device.\r\nvar mobileGecko = mobile && gecko;\r\n\r\n// @property retina: Boolean\r\n// `true` for browsers on a high-resolution \"retina\" screen or on any screen when browser's display zoom is more than 100%.\r\nvar retina = (window.devicePixelRatio || (window.screen.deviceXDPI / window.screen.logicalXDPI)) > 1;\r\n\r\n\r\n// @property canvas: Boolean\r\n// `true` when the browser supports [`