\").css({\n // position : \"absolute\",\n // left : margin.left,\n // top : margin.top,\n // width : pageWidth,\n // height : pageHeight,\n // boxSizing : \"border-box\",\n // background: \"rgba(255, 255, 0, 0.5)\"\n // //border : \"1px solid red\"\n // }).appendTo(page);\n\n if (options && options.pageClassName) {\n page.className = options.pageClassName;\n }\n pages.push(page);\n return page;\n }\n\n function fallsOnMargin(thing) {\n var box = thing.getBoundingClientRect();\n if (box.width === 0 || box.height === 0) {\n // I'd say an element with dimensions zero fits on current page.\n return 0;\n }\n var top = copy.getBoundingClientRect().top;\n var available = pageHeight - adjust;\n return (box.height > available) ? 3\n : (box.top - top > available) ? 1\n : (box.bottom - top > available) ? 2\n : 0;\n }\n\n function splitText(node, isFirst) {\n if (!/\\S/.test(node.data)) {\n return;\n }\n\n var len = node.data.length;\n var range = doc.createRange();\n range.selectNodeContents(node);\n var fall = fallsOnMargin(range);\n if (!fall) {\n return; // the whole text fits on current page\n }\n\n var nextnode = node;\n if (fall == 1) {\n // starts on next page, break before anyway.\n if (isFirst) {\n // avoid leaving an empty
,
, etc. on previous page.\n breakAtElement(node.parentNode);\n } else {\n breakAtElement(node);\n }\n }\n else {\n (function findEOP(min, pos, max) {\n range.setEnd(node, pos);\n if (min == pos || pos == max) {\n return pos;\n }\n if (fallsOnMargin(range)) {\n return findEOP(min, (min + pos) >> 1, pos);\n } else {\n return findEOP(pos, (pos + max) >> 1, max);\n }\n })(0, len >> 1, len);\n\n if (!/\\S/.test(range.toString()) && isFirst) {\n // avoid leaving an empty ,
, etc. on previous page.\n breakAtElement(node.parentNode);\n } else {\n // This is only needed for IE, but it feels cleaner to do it anyway. Without\n // it, IE will truncate a very long text (playground/pdf-long-text-2.html).\n nextnode = node.splitText(range.endOffset);\n\n var page = makePage();\n range.setStartBefore(copy);\n page.appendChild(range.extractContents());\n copy.parentNode.insertBefore(page, copy);\n preventBulletOnListItem(nextnode.parentNode);\n }\n }\n\n splitText(nextnode);\n }\n\n function preventBulletOnListItem(el) {\n // set a hint on continued LI elements, to tell the\n // renderer not to draw the bullet again.\n // https://github.com/telerik/kendo-ui-core/issues/2732\n var li = closest(el, \"li\");\n if (li) {\n li.setAttribute(\"kendo-no-bullet\", \"1\");\n preventBulletOnListItem(li.parentNode);\n }\n }\n }\n\n return promise;\n }\n\n // This is needed for the Spreadsheet print functionality. Since\n // there we only need to draw text, this cuts through the ceremony\n // of drawDOM/renderElement and renders the text node directly.\n function drawText(element) {\n var group = new Group();\n nodeInfo._clipbox = false;\n nodeInfo._matrix = Matrix.unit();\n nodeInfo._stackingContext = {\n element: element,\n group: group\n };\n pushNodeInfo(element, getComputedStyle$1(element), group);\n if (element.firstChild.nodeType == 3 /* Text */) {\n // avoid the penalty of renderElement\n renderText(element, element.firstChild, group);\n } else {\n _renderElement(element, group);\n }\n popNodeInfo();\n return group;\n }\n\n var parseBackgroundImage = (function(){\n var tok_linear_gradient = /^((-webkit-|-moz-|-o-|-ms-)?linear-gradient\\s*)\\(/;\n //var tok_radial_gradient = /^((-webkit-|-moz-|-o-|-ms-)?radial-gradient\\s*)\\(/;\n var tok_percent = /^([-0-9.]+%)/;\n var tok_length = /^([-0-9.]+px)/;\n var tok_keyword = /^(left|right|top|bottom|to|center)\\W/;\n var tok_angle = /^([-0-9.]+(deg|grad|rad|turn)|0)/;\n var tok_whitespace = /^(\\s+)/;\n var tok_popen = /^(\\()/;\n var tok_pclose = /^(\\))/;\n var tok_comma = /^(,)/;\n var tok_url = /^(url)\\(/;\n var tok_content = /^(.*?)\\)/;\n\n var cache1 = {}, cache2 = {};\n\n function parse(input) {\n var orig = input;\n if (hasOwnProperty(cache1, orig)) {\n return cache1[orig];\n }\n function skip_ws() {\n var m = tok_whitespace.exec(input);\n if (m) {\n input = input.substr(m[1].length);\n }\n }\n function read(token) {\n skip_ws();\n var m = token.exec(input);\n if (m) {\n input = input.substr(m[1].length);\n return m[1];\n }\n }\n\n function read_stop() {\n var color = kendo.parseColor(input, true);\n var length, percent;\n if (color) {\n var match =\n /^#[0-9a-f]+/i.exec(input) ||\n /^rgba?\\(.*?\\)/i.exec(input) ||\n /^..*?\\b/.exec(input); // maybe named color\n input = input.substr(match[0].length);\n color = color.toRGB();\n if (!(length = read(tok_length))) {\n percent = read(tok_percent);\n }\n return { color: color, length: length, percent: percent };\n }\n }\n\n function read_linear_gradient(propName) {\n var angle;\n var to1, to2;\n var stops = [];\n var reverse = false;\n\n if (read(tok_popen)) {\n // 1. [ || to , ]?\n angle = read(tok_angle);\n if (angle == \"0\") {\n angle = \"0deg\"; // Edge\n }\n if (angle) {\n angle = parseAngle(angle);\n read(tok_comma);\n }\n else {\n to1 = read(tok_keyword);\n if (to1 == \"to\") {\n to1 = read(tok_keyword);\n } else if (to1 && /^-/.test(propName)) {\n reverse = true;\n }\n to2 = read(tok_keyword);\n read(tok_comma);\n }\n\n if (/-moz-/.test(propName) && angle == null && to1 == null) {\n var x = read(tok_percent), y = read(tok_percent);\n reverse = true;\n if (x == \"0%\") {\n to1 = \"left\";\n } else if (x == \"100%\") {\n to1 = \"right\";\n }\n if (y == \"0%\") {\n to2 = \"top\";\n } else if (y == \"100%\") {\n to2 = \"bottom\";\n }\n read(tok_comma);\n }\n\n // 2. color stops\n while (input && !read(tok_pclose)) {\n var stop = read_stop();\n if (!stop) {\n break;\n }\n stops.push(stop);\n read(tok_comma);\n }\n\n return {\n type : \"linear\",\n angle : angle,\n to : to1 && to2 ? to1 + \" \" + to2 : to1 ? to1 : to2 ? to2 : null,\n stops : stops,\n reverse : reverse\n };\n }\n }\n\n function read_url() {\n if (read(tok_popen)) {\n var url = read(tok_content);\n url = url.replace(/^['\"]+|[\"']+$/g, \"\");\n read(tok_pclose);\n return { type: \"url\", url: url };\n }\n }\n\n var tok;\n\n if ((tok = read(tok_linear_gradient))) {\n tok = read_linear_gradient(tok);\n }\n else if ((tok = read(tok_url))) {\n tok = read_url();\n }\n\n return (cache1[orig] = tok || { type: \"none\" });\n }\n\n return function(input) {\n if (hasOwnProperty(cache2, input)) {\n return cache2[input];\n }\n return (cache2[input] = splitProperty(input).map(parse));\n };\n })();\n\n var splitProperty = (function(){\n var cache = {};\n return function(input, separator) {\n if (!separator) {\n separator = /^\\s*,\\s*/;\n }\n\n var cacheKey = input + separator;\n\n if (hasOwnProperty(cache, cacheKey)) {\n return cache[cacheKey];\n }\n\n var ret = [];\n var last$$1 = 0, pos = 0;\n var in_paren = 0;\n var in_string = false;\n var m;\n\n function looking_at(rx) {\n return (m = rx.exec(input.substr(pos)));\n }\n\n function trim(str) {\n return str.replace(/^\\s+|\\s+$/g, \"\");\n }\n\n while (pos < input.length) {\n if (!in_string && looking_at(/^[\\(\\[\\{]/)) {\n in_paren++;\n pos++;\n }\n else if (!in_string && looking_at(/^[\\)\\]\\}]/)) {\n in_paren--;\n pos++;\n }\n else if (!in_string && looking_at(/^[\\\"\\']/)) {\n in_string = m[0];\n pos++;\n }\n else if (in_string == \"'\" && looking_at(/^\\\\\\'/)) {\n pos += 2;\n }\n else if (in_string == '\"' && looking_at(/^\\\\\\\"/)) {\n pos += 2;\n }\n else if (in_string == \"'\" && looking_at(/^\\'/)) {\n in_string = false;\n pos++;\n }\n else if (in_string == '\"' && looking_at(/^\\\"/)) {\n in_string = false;\n pos++;\n }\n else if (looking_at(separator)) {\n if (!in_string && !in_paren && pos > last$$1) {\n ret.push(trim(input.substring(last$$1, pos)));\n last$$1 = pos + m[0].length;\n }\n pos += m[0].length;\n }\n else {\n pos++;\n }\n }\n if (last$$1 < pos) {\n ret.push(trim(input.substring(last$$1, pos)));\n }\n return (cache[cacheKey] = ret);\n };\n })();\n\n var getFontURL = (function(cache){\n return function(el){\n // XXX: for IE we get here the whole cssText of the rule,\n // because the computedStyle.src is empty. Next time we need\n // to fix these regexps we better write a CSS parser. :-\\\n var url = cache[el];\n if (!url) {\n var m;\n if ((m = /url\\((['\"]?)([^'\")]*?)\\1\\)\\s+format\\((['\"]?)truetype\\3\\)/.exec(el))) {\n url = cache[el] = m[2];\n } else if ((m = /url\\((['\"]?)([^'\")]*?\\.ttf)\\1\\)/.exec(el))) {\n url = cache[el] = m[2];\n }\n }\n return url;\n };\n })(Object.create ? Object.create(null) : {});\n\n var getFontHeight = (function(cache){\n return function(font) {\n var height = cache[font];\n if (height == null) {\n height = cache[font] = kendoUtil.measureText(\"Mapq\", { font: font }).height;\n }\n return height;\n };\n })(Object.create ? Object.create(null) : {});\n\n function getFontFaces(doc) {\n if (doc == null) {\n doc = document;\n }\n var result = {};\n for (var i = 0; i < doc.styleSheets.length; ++i) {\n doStylesheet(doc.styleSheets[i]);\n }\n return result;\n function doStylesheet(ss) {\n if (ss) {\n var rules = null;\n try {\n rules = ss.cssRules;\n } catch (ex) {}\n if (rules) {\n addRules(ss, rules);\n }\n }\n }\n function findFonts(rule) {\n var src = getPropertyValue(rule.style, \"src\");\n if (src) {\n return splitProperty(src).reduce(function(a, el){\n var font = getFontURL(el);\n if (font) {\n a.push(font);\n }\n return a;\n }, []);\n } else {\n // Internet Explorer\n // XXX: this is gross. should work though for valid CSS.\n var font = getFontURL(rule.cssText);\n return font ? [ font ] : [];\n }\n }\n function addRules(styleSheet, rules) {\n for (var i = 0; i < rules.length; ++i) {\n var r = rules[i];\n switch (r.type) {\n case 3: // CSSImportRule\n doStylesheet(r.styleSheet);\n break;\n case 5: // CSSFontFaceRule\n var style = r.style;\n var family = splitProperty(getPropertyValue(style, \"font-family\"));\n var bold = /^([56789]00|bold)$/i.test(getPropertyValue(style, \"font-weight\"));\n var italic = \"italic\" == getPropertyValue(style, \"font-style\");\n var src = findFonts(r);\n if (src.length > 0) {\n addRule(styleSheet, family, bold, italic, src[0]);\n }\n }\n }\n }\n function addRule(styleSheet, names, bold, italic, url) {\n // We get full resolved absolute URLs in Chrome, but sadly\n // not in Firefox.\n if (!(/^data:/i.test(url))) {\n if (!(/^[^\\/:]+:\\/\\//.test(url) || /^\\//.test(url))) {\n url = String(styleSheet.href).replace(/[^\\/]*$/, \"\") + url;\n }\n }\n names.forEach(function(name){\n name = name.replace(/^(['\"]?)(.*?)\\1$/, \"$2\"); // it's quoted\n if (bold) {\n name += \"|bold\";\n }\n if (italic) {\n name += \"|italic\";\n }\n result[name] = url;\n });\n }\n }\n\n function hasOwnProperty(obj, key) {\n return Object.prototype.hasOwnProperty.call(obj, key);\n }\n\n function getCounter(name) {\n name = \"_counter_\" + name;\n return nodeInfo[name];\n }\n\n function getAllCounters(name) {\n var values = [], p = nodeInfo;\n name = \"_counter_\" + name;\n while (p) {\n if (hasOwnProperty(p, name)) {\n values.push(p[name]);\n }\n p = Object.getPrototypeOf(p);\n }\n return values.reverse();\n }\n\n function incCounter(name, inc) {\n var p = nodeInfo;\n name = \"_counter_\" + name;\n while (p && !hasOwnProperty(p, name)) {\n p = Object.getPrototypeOf(p);\n }\n if (!p) {\n p = nodeInfo._root;\n }\n p[name] = (p[name] || 0) + (inc == null ? 1 : inc);\n }\n\n function resetCounter(name, val) {\n name = \"_counter_\" + name;\n nodeInfo[name] = val == null ? 0 : val;\n }\n\n function doCounters(a, f, def) {\n for (var i = 0; i < a.length;) {\n var name = a[i++];\n var val = parseFloat(a[i]);\n if (isNaN(val)) {\n f(name, def);\n } else {\n f(name, val);\n ++i;\n }\n }\n }\n\n function updateCounters(style) {\n var counterReset = getPropertyValue(style, \"counter-reset\");\n if (counterReset) {\n doCounters(splitProperty(counterReset, /^\\s+/), resetCounter, 0);\n }\n var counterIncrement = getPropertyValue(style, \"counter-increment\");\n if (counterIncrement) {\n doCounters(splitProperty(counterIncrement, /^\\s+/), incCounter, 1);\n }\n }\n\n function parseColor$1(str, css) {\n var color = kendo.parseColor(str, true);\n if (color) {\n color = color.toRGB();\n if (css) {\n color = color.toCssRgba();\n } else if (color.a === 0) {\n color = null;\n }\n }\n return color;\n }\n\n function whenImagesAreActuallyLoaded(elements, callback) {\n var pending = 0;\n var done = false;\n elements.forEach(function(el){\n var images = el.querySelectorAll(\"img\");\n for (var i = 0; i < images.length; ++i) {\n var img = images[i];\n if (!img.complete) {\n pending++;\n img.onload = img.onerror = next;\n }\n }\n });\n\n if (!pending) {\n next();\n }\n\n function next() {\n if (!done && --pending <= 0) {\n callback();\n done = true;\n }\n }\n }\n\n function cacheImages(elements, callback) {\n var urls = [];\n function add(url) {\n if (!IMAGE_CACHE[url]) {\n IMAGE_CACHE[url] = true;\n urls.push(url);\n }\n }\n\n elements.forEach(function dive(element){\n if (/^img$/i.test(element.tagName)) {\n add(element.src);\n }\n parseBackgroundImage(\n getPropertyValue(\n getComputedStyle$1(element), \"background-image\"\n )\n ).forEach(function(bg){\n if (bg.type == \"url\") {\n add(bg.url);\n }\n });\n\n if (element.children) {\n slice$1$1(element.children).forEach(dive);\n }\n });\n\n var count = urls.length;\n function next() {\n if (--count <= 0) {\n // Even though we cached them, they simply won't be available immediately in the newly\n // created DOM. Previously we'd allow a 10ms timeout, but that's arbitrary and clearly\n // not working in all cases (https://github.com/telerik/kendo/issues/5399), so this\n // function will wait for their .complete attribute.\n whenImagesAreActuallyLoaded(elements, callback);\n }\n }\n if (count === 0) {\n next();\n }\n urls.forEach(function(url){\n var img = IMAGE_CACHE[url] = new window.Image();\n if (!(/^data:/i.test(url))) {\n img.crossOrigin = \"Anonymous\";\n }\n img.src = url;\n if (img.complete) {\n next();\n } else {\n img.onload = next;\n img.onerror = function() {\n IMAGE_CACHE[url] = null;\n next();\n };\n }\n });\n }\n\n function alphaNumeral(n) {\n var result = \"\";\n do {\n var r = n % 26;\n result = String.fromCharCode(97 + r) + result;\n n = Math.floor(n / 26);\n } while (n > 0);\n return result;\n }\n\n function pushNodeInfo(element, style, group) {\n nodeInfo = Object.create(nodeInfo);\n nodeInfo[element.tagName.toLowerCase()] = {\n element: element,\n style: style\n };\n var decoration = getPropertyValue(style, \"text-decoration\");\n if (decoration && decoration != \"none\") {\n var color = getPropertyValue(style, \"text-decoration-color\");\n decoration.split(/\\s+/g).forEach(function(name){\n if (!nodeInfo[name]) {\n nodeInfo[name] = color;\n if (name == \"underline\") {\n var offset = getPropertyValue(style, \"text-underline-offset\");\n if (offset != \"auto\") {\n nodeInfo[\"underline-offset\"] = parseFloat(offset);\n }\n }\n }\n });\n }\n\n if (createsStackingContext(style)) {\n nodeInfo._stackingContext = {\n element: element,\n group: group\n };\n }\n }\n\n function popNodeInfo() {\n nodeInfo = Object.getPrototypeOf(nodeInfo);\n }\n\n function updateClipbox(path) {\n if (nodeInfo._clipbox != null) {\n var box = path.bbox(nodeInfo._matrix);\n if (nodeInfo._clipbox) {\n nodeInfo._clipbox = Rect.intersect(nodeInfo._clipbox, box);\n } else {\n nodeInfo._clipbox = box;\n }\n }\n }\n\n function emptyClipbox() {\n var cb = nodeInfo._clipbox;\n if (cb == null) {\n return true;\n }\n if (cb) {\n return cb.width() === 0 || cb.height() === 0;\n }\n }\n\n function createsStackingContext(style) {\n function prop(name) { return getPropertyValue(style, name); }\n if (prop(\"transform\") != \"none\" ||\n prop(\"position\") != \"static\" ||\n prop(\"z-index\") != \"auto\" ||\n prop(\"opacity\") < 1) {\n return true;\n }\n }\n\n function getComputedStyle$1(element, pseudoElt) {\n return window.getComputedStyle(element, pseudoElt || null);\n }\n\n function getPropertyValue(style, prop, defa) {\n var val = style.getPropertyValue(prop);\n if (val == null || val === \"\") {\n if (browser.webkit) {\n val = style.getPropertyValue(\"-webkit-\" + prop );\n } else if (browser.mozilla) {\n val = style.getPropertyValue(\"-moz-\" + prop );\n } else if (browser.opera) {\n val = style.getPropertyValue(\"-o-\" + prop);\n } else if (microsoft) {\n val = style.getPropertyValue(\"-ms-\" + prop);\n }\n }\n if (arguments.length > 2 && (val == null || val === \"\")) {\n return defa;\n } else {\n return val;\n }\n }\n\n function pleaseSetPropertyValue(style, prop, value, important) {\n style.setProperty(prop, value, important);\n if (browser.webkit) {\n style.setProperty(\"-webkit-\" + prop, value, important);\n } else if (browser.mozilla) {\n style.setProperty(\"-moz-\" + prop, value, important);\n } else if (browser.opera) {\n style.setProperty(\"-o-\" + prop, value, important);\n } else if (microsoft) {\n style.setProperty(\"-ms-\" + prop, value, important);\n prop = \"ms\" + prop.replace(/(^|-)([a-z])/g, function(s, p1, p2){\n return p1 + p2.toUpperCase();\n });\n style[prop] = value;\n }\n }\n\n function getBorder(style, side) {\n side = \"border-\" + side;\n return {\n width: parseFloat(getPropertyValue(style, side + \"-width\")),\n style: getPropertyValue(style, side + \"-style\"),\n color: parseColor$1(getPropertyValue(style, side + \"-color\"), true)\n };\n }\n\n function saveStyle(element, func) {\n var prev = element.style.cssText;\n var result = func();\n element.style.cssText = prev;\n return result;\n }\n\n function getBorderRadius(style, side) {\n var r = getPropertyValue(style, \"border-\" + side + \"-radius\").split(/\\s+/g).map(parseFloat);\n if (r.length == 1) {\n r.push(r[0]);\n }\n return sanitizeRadius({ x: r[0], y: r[1] });\n }\n\n function getContentBox(element) {\n var box = element.getBoundingClientRect();\n box = innerBox(box, \"border-*-width\", element);\n box = innerBox(box, \"padding-*\", element);\n return box;\n }\n\n function innerBox(box, prop, element) {\n var style, wt, wr, wb, wl;\n if (typeof prop == \"string\") {\n style = getComputedStyle$1(element);\n wt = parseFloat(getPropertyValue(style, prop.replace(\"*\", \"top\")));\n wr = parseFloat(getPropertyValue(style, prop.replace(\"*\", \"right\")));\n wb = parseFloat(getPropertyValue(style, prop.replace(\"*\", \"bottom\")));\n wl = parseFloat(getPropertyValue(style, prop.replace(\"*\", \"left\")));\n }\n else if (typeof prop == \"number\") {\n wt = wr = wb = wl = prop;\n }\n return {\n top : box.top + wt,\n right : box.right - wr,\n bottom : box.bottom - wb,\n left : box.left + wl,\n width : box.right - box.left - wr - wl,\n height : box.bottom - box.top - wb - wt\n };\n }\n\n function getTransform(style) {\n var transform$$1 = getPropertyValue(style, \"transform\");\n if (transform$$1 == \"none\") {\n return null;\n }\n var matrix = /^\\s*matrix\\(\\s*(.*?)\\s*\\)\\s*$/.exec(transform$$1);\n if (matrix) {\n var origin = getPropertyValue(style, \"transform-origin\");\n matrix = matrix[1].split(/\\s*,\\s*/g).map(parseFloat);\n origin = origin.split(/\\s+/g).map(parseFloat);\n return {\n matrix: matrix,\n origin: origin\n };\n }\n }\n\n function radiansToDegrees(radians) {\n return ((180 * radians) / Math.PI) % 360;\n }\n\n function parseAngle(angle) {\n var num = parseFloat(angle);\n if (/grad$/.test(angle)) {\n return Math.PI * num / 200;\n }\n else if (/rad$/.test(angle)) {\n return num;\n }\n else if (/turn$/.test(angle)) {\n return Math.PI * num * 2;\n }\n else if (/deg$/.test(angle)) {\n return Math.PI * num / 180;\n }\n }\n\n function setTransform$1(shape, m) {\n m = new Matrix(m[0], m[1], m[2], m[3], m[4], m[5]);\n shape.transform(m);\n return m;\n }\n\n function setClipping(shape, clipPath) {\n shape.clip(clipPath);\n }\n\n function addArcToPath(path, x, y, options) {\n var points = new Arc$2([ x, y ], options).curvePoints(), i = 1;\n while (i < points.length) {\n path.curveTo(points[i++], points[i++], points[i++]);\n }\n }\n\n function sanitizeRadius(r) {\n if (r.x <= 0 || r.y <= 0) {\n r.x = r.y = 0;\n }\n return r;\n }\n\n function adjustBorderRadiusForBox(box, rTL, rTR, rBR, rBL) {\n // adjust border radiuses such that the sum of adjacent\n // radiuses is not bigger than the length of the side.\n // seems the correct algorithm is variant (3) from here:\n // http://www.w3.org/Style/CSS/Tracker/issues/29?changelog\n var tl_x = Math.max(0, rTL.x), tl_y = Math.max(0, rTL.y);\n var tr_x = Math.max(0, rTR.x), tr_y = Math.max(0, rTR.y);\n var br_x = Math.max(0, rBR.x), br_y = Math.max(0, rBR.y);\n var bl_x = Math.max(0, rBL.x), bl_y = Math.max(0, rBL.y);\n\n var f = Math.min(\n box.width / (tl_x + tr_x),\n box.height / (tr_y + br_y),\n box.width / (br_x + bl_x),\n box.height / (bl_y + tl_y)\n );\n\n if (f < 1) {\n tl_x *= f; tl_y *= f;\n tr_x *= f; tr_y *= f;\n br_x *= f; br_y *= f;\n bl_x *= f; bl_y *= f;\n }\n\n return {\n tl: { x: tl_x, y: tl_y },\n tr: { x: tr_x, y: tr_y },\n br: { x: br_x, y: br_y },\n bl: { x: bl_x, y: bl_y }\n };\n }\n\n function elementRoundBox(element, box, type) {\n var style = getComputedStyle$1(element);\n\n var rTL = getBorderRadius(style, \"top-left\");\n var rTR = getBorderRadius(style, \"top-right\");\n var rBL = getBorderRadius(style, \"bottom-left\");\n var rBR = getBorderRadius(style, \"bottom-right\");\n\n if (type == \"padding\" || type == \"content\") {\n var bt = getBorder(style, \"top\");\n var br = getBorder(style, \"right\");\n var bb = getBorder(style, \"bottom\");\n var bl = getBorder(style, \"left\");\n rTL.x -= bl.width; rTL.y -= bt.width;\n rTR.x -= br.width; rTR.y -= bt.width;\n rBR.x -= br.width; rBR.y -= bb.width;\n rBL.x -= bl.width; rBL.y -= bb.width;\n if (type == \"content\") {\n var pt = parseFloat(getPropertyValue(style, \"padding-top\"));\n var pr = parseFloat(getPropertyValue(style, \"padding-right\"));\n var pb = parseFloat(getPropertyValue(style, \"padding-bottom\"));\n var pl = parseFloat(getPropertyValue(style, \"padding-left\"));\n rTL.x -= pl; rTL.y -= pt;\n rTR.x -= pr; rTR.y -= pt;\n rBR.x -= pr; rBR.y -= pb;\n rBL.x -= pl; rBL.y -= pb;\n }\n }\n\n if (typeof type == \"number\") {\n rTL.x -= type; rTL.y -= type;\n rTR.x -= type; rTR.y -= type;\n rBR.x -= type; rBR.y -= type;\n rBL.x -= type; rBL.y -= type;\n }\n\n return roundBox(box, rTL, rTR, rBR, rBL);\n }\n\n // Create a drawing.Path for a rounded rectangle. Receives the\n // bounding box and the border-radiuses in CSS order (top-left,\n // top-right, bottom-right, bottom-left). The radiuses must be\n // objects containing x (horiz. radius) and y (vertical radius).\n function roundBox(box, rTL0, rTR0, rBR0, rBL0) {\n var tmp = adjustBorderRadiusForBox(box, rTL0, rTR0, rBR0, rBL0);\n var rTL = tmp.tl;\n var rTR = tmp.tr;\n var rBR = tmp.br;\n var rBL = tmp.bl;\n var path = new Path({ fill: null, stroke: null });\n path.moveTo(box.left, box.top + rTL.y);\n if (rTL.x) {\n addArcToPath(path, box.left + rTL.x, box.top + rTL.y, {\n startAngle: -180,\n endAngle: -90,\n radiusX: rTL.x,\n radiusY: rTL.y\n });\n }\n path.lineTo(box.right - rTR.x, box.top);\n if (rTR.x) {\n addArcToPath(path, box.right - rTR.x, box.top + rTR.y, {\n startAngle: -90,\n endAngle: 0,\n radiusX: rTR.x,\n radiusY: rTR.y\n });\n }\n path.lineTo(box.right, box.bottom - rBR.y);\n if (rBR.x) {\n addArcToPath(path, box.right - rBR.x, box.bottom - rBR.y, {\n startAngle: 0,\n endAngle: 90,\n radiusX: rBR.x,\n radiusY: rBR.y\n });\n }\n path.lineTo(box.left + rBL.x, box.bottom);\n if (rBL.x) {\n addArcToPath(path, box.left + rBL.x, box.bottom - rBL.y, {\n startAngle: 90,\n endAngle: 180,\n radiusX: rBL.x,\n radiusY: rBL.y\n });\n }\n return path.close();\n }\n\n function formatCounter(val, style) {\n var str = String(parseFloat(val));\n switch (style) {\n case \"decimal-leading-zero\":\n if (str.length < 2) {\n str = \"0\" + str;\n }\n return str;\n case \"lower-roman\":\n return arabicToRoman(val).toLowerCase();\n case \"upper-roman\":\n return arabicToRoman(val).toUpperCase();\n case \"lower-latin\":\n case \"lower-alpha\":\n return alphaNumeral(val - 1);\n case \"upper-latin\":\n case \"upper-alpha\":\n return alphaNumeral(val - 1).toUpperCase();\n default:\n return str;\n }\n }\n\n function evalPseudoElementContent(element, content) {\n function displayCounter(name, style, separator) {\n if (!separator) {\n return formatCounter(getCounter(name) || 0, style);\n }\n separator = separator.replace(/^\\s*([\"'])(.*)\\1\\s*$/, \"$2\");\n return getAllCounters(name).map(function(val){\n return formatCounter(val, style);\n }).join(separator);\n }\n var a = splitProperty(content, /^\\s+/);\n var result = [], m;\n a.forEach(function(el){\n var tmp;\n if ((m = /^\\s*([\"'])(.*)\\1\\s*$/.exec(el))) {\n result.push(m[2].replace(/\\\\([0-9a-f]{4})/gi, function(s, p){\n return String.fromCharCode(parseInt(p, 16));\n }));\n }\n else if ((m = /^\\s*counter\\((.*?)\\)\\s*$/.exec(el))) {\n tmp = splitProperty(m[1]);\n result.push(displayCounter(tmp[0], tmp[1]));\n }\n else if ((m = /^\\s*counters\\((.*?)\\)\\s*$/.exec(el))) {\n tmp = splitProperty(m[1]);\n result.push(displayCounter(tmp[0], tmp[2], tmp[1]));\n }\n else if ((m = /^\\s*attr\\((.*?)\\)\\s*$/.exec(el))) {\n result.push(element.getAttribute(m[1]) || \"\");\n }\n else {\n result.push(el);\n }\n });\n return result.join(\"\");\n }\n\n function getCssText(style) {\n if (style.cssText) {\n return style.cssText;\n }\n // Status: NEW. Report year: 2002. Current year: 2014.\n // Nice played, Mozillians.\n // https://bugzilla.mozilla.org/show_bug.cgi?id=137687\n var result = [];\n for (var i = 0; i < style.length; ++i) {\n result.push(style[i] + \": \" + getPropertyValue(style, style[i]));\n }\n return result.join(\";\\n\");\n }\n\n function _renderWithPseudoElements(element, group) {\n if (element.tagName == KENDO_PSEUDO_ELEMENT) {\n _renderElement(element, group);\n return;\n }\n var fake = [];\n function pseudo(kind, place) {\n var style = getComputedStyle$1(element, kind), content = style.content;\n updateCounters(style);\n if (content && content != \"normal\" && content != \"none\" && style.width != \"0px\") {\n var psel = element.ownerDocument.createElement(KENDO_PSEUDO_ELEMENT);\n psel.style.cssText = getCssText(style);\n psel.textContent = evalPseudoElementContent(element, content);\n element.insertBefore(psel, place);\n fake.push(psel);\n }\n }\n pseudo(\":before\", element.firstChild);\n pseudo(\":after\", null);\n if (fake.length > 0) {\n var saveClass = element.className;\n element.className += \" kendo-pdf-hide-pseudo-elements\";\n _renderElement(element, group);\n element.className = saveClass;\n fake.forEach(function(el){ element.removeChild(el); });\n } else {\n _renderElement(element, group);\n }\n }\n\n function _renderElement(element, group) {\n var style = getComputedStyle$1(element);\n\n var top = getBorder(style, \"top\");\n var right = getBorder(style, \"right\");\n var bottom = getBorder(style, \"bottom\");\n var left = getBorder(style, \"left\");\n\n var rTL0 = getBorderRadius(style, \"top-left\");\n var rTR0 = getBorderRadius(style, \"top-right\");\n var rBL0 = getBorderRadius(style, \"bottom-left\");\n var rBR0 = getBorderRadius(style, \"bottom-right\");\n\n var dir = getPropertyValue(style, \"direction\");\n\n var backgroundColor = getPropertyValue(style, \"background-color\");\n backgroundColor = parseColor$1(backgroundColor);\n\n var backgroundImage = parseBackgroundImage( getPropertyValue(style, \"background-image\") );\n var backgroundRepeat = splitProperty( getPropertyValue(style, \"background-repeat\") );\n var backgroundPosition = splitProperty( getPropertyValue(style, \"background-position\") );\n var backgroundOrigin = splitProperty( getPropertyValue(style, \"background-origin\") );\n var backgroundSize = splitProperty( getPropertyValue(style, \"background-size\") );\n\n // IE shrinks the text with text-overflow: ellipsis,\n // apparently because the returned bounding box for the range\n // is limited to the visible area minus space for the dots,\n // instead of being the full width of the text.\n //\n // https://github.com/telerik/kendo/issues/5232\n // https://github.com/telerik/kendo-ui-core/issues/1868\n //\n // We have to test it here rather than in renderText because\n // text-overflow: ellipsis could be set on a parent element (not\n // necessarily the one containing the text); in this case,\n // getComputedStyle(elementWithTheText) will return \"clip\", not\n // \"ellipsis\" (which is probably a bug, but oh well...)\n var textOverflow, saveTextOverflow;\n if (microsoft) {\n textOverflow = style.textOverflow; // computed style\n if (textOverflow == \"ellipsis\") {\n saveTextOverflow = element.style.textOverflow; // own style.\n element.style.textOverflow = \"clip\";\n }\n }\n\n if (browser.msie && browser.version < 10) {\n // IE9 hacks. getPropertyValue won't return the correct\n // value. Sucks that we have to do it here, I'd prefer to\n // move it in getPropertyValue, but we don't have the\n // element.\n backgroundPosition = splitProperty(element.currentStyle.backgroundPosition);\n }\n\n var innerbox = innerBox(element.getBoundingClientRect(), \"border-*-width\", element);\n\n // CSS \"clip\" property - if present, replace the group with a\n // new one which is clipped. This must happen before drawing\n // the borders and background.\n (function(){\n var clip = getPropertyValue(style, \"clip\");\n var m = /^\\s*rect\\((.*)\\)\\s*$/.exec(clip);\n if (m) {\n var a = m[1].split(/[ ,]+/g);\n var top = a[0] == \"auto\" ? innerbox.top : parseFloat(a[0]) + innerbox.top;\n var right = a[1] == \"auto\" ? innerbox.right : parseFloat(a[1]) + innerbox.left;\n var bottom = a[2] == \"auto\" ? innerbox.bottom : parseFloat(a[2]) + innerbox.top;\n var left = a[3] == \"auto\" ? innerbox.left : parseFloat(a[3]) + innerbox.left;\n var tmp = new Group();\n var clipPath = new Path()\n .moveTo(left, top)\n .lineTo(right, top)\n .lineTo(right, bottom)\n .lineTo(left, bottom)\n .close();\n setClipping(tmp, clipPath);\n group.append(tmp);\n group = tmp;\n updateClipbox(clipPath);\n }\n })();\n\n var boxes, i, cells;\n var display = getPropertyValue(style, \"display\");\n\n if (display == \"table-row\") {\n // because of rowspan/colspan, we shouldn't draw background of table row elements on the\n // box given by its getBoundingClientRect, because if we do we risk overwritting a\n // previously rendered cell. https://github.com/telerik/kendo/issues/4881\n boxes = [];\n for (i = 0, cells = element.children; i < cells.length; ++i) {\n boxes.push(cells[i].getBoundingClientRect());\n }\n } else {\n boxes = element.getClientRects();\n if (boxes.length == 1) {\n // Workaround the missing borders in Chrome! getClientRects() boxes contains values\n // rounded to integer. getBoundingClientRect() appears to work fine. We still need\n // getClientRects() to support cases where there are more boxes (continued inline\n // elements that might have border/background).\n boxes = [ element.getBoundingClientRect() ];\n }\n }\n\n // This function workarounds another Chrome bug, where boxes returned for a table with\n // border-collapse: collapse will overlap the table border. Our rendering is not perfect in\n // such case anyway, but with this is better than without it.\n boxes = adjustBoxes(boxes);\n\n for (i = 0; i < boxes.length; ++i) {\n drawOneBox(boxes[i], i === 0, i == boxes.length - 1);\n }\n\n // Render links as separate groups. We can't use boxes returned by element's getClientRects\n // because if display type is \"inline\" (default for ), boxes will not include the height of\n // images inside. https://github.com/telerik/kendo-ui-core/issues/3359\n if (element.tagName == \"A\" && element.href && !/^#?$/.test(element.getAttribute(\"href\"))) {\n if (!nodeInfo._avoidLinks || !matches(element, nodeInfo._avoidLinks)) {\n var r = document.createRange();\n r.selectNodeContents(element);\n slice$1$1(r.getClientRects()).forEach(function(box){\n var g = new Group();\n g._pdfLink = {\n url : element.href,\n top : box.top,\n right : box.right,\n bottom : box.bottom,\n left : box.left\n };\n group.append(g);\n });\n }\n }\n\n if (boxes.length > 0 && display == \"list-item\" && !element.getAttribute(\"kendo-no-bullet\")) {\n drawBullet(boxes[0]);\n }\n\n // overflow: hidden/auto - if present, replace the group with\n // a new one clipped by the inner box.\n (function(){\n function clipit() {\n var clipPath = elementRoundBox(element, innerbox, \"padding\");\n var tmp = new Group();\n setClipping(tmp, clipPath);\n group.append(tmp);\n group = tmp;\n updateClipbox(clipPath);\n }\n if (isFormField(element)) {\n clipit();\n } else if (/^(hidden|auto|scroll)/.test(getPropertyValue(style, \"overflow\"))) {\n clipit();\n } else if (/^(hidden|auto|scroll)/.test(getPropertyValue(style, \"overflow-x\"))) {\n clipit();\n } else if (/^(hidden|auto|scroll)/.test(getPropertyValue(style, \"overflow-y\"))) {\n clipit();\n }\n })();\n\n if (!maybeRenderWidget(element, group) && !maybeRenderBullet(element, group)) {\n renderContents(element, group);\n }\n\n if (microsoft && textOverflow == \"ellipsis\") {\n element.style.textOverflow = saveTextOverflow;\n }\n\n return group; // only utility functions after this line.\n\n function adjustBoxes(boxes) {\n if (/^td$/i.test(element.tagName)) {\n var table = nodeInfo.table;\n if (table && getPropertyValue(table.style, \"border-collapse\") == \"collapse\") {\n var tableBorderLeft = getBorder(table.style, \"left\").width;\n var tableBorderTop = getBorder(table.style, \"top\").width;\n // check if we need to adjust\n if (tableBorderLeft === 0 && tableBorderTop === 0) {\n return boxes; // nope\n }\n var tableBox = table.element.getBoundingClientRect();\n var firstCell = table.element.rows[0].cells[0];\n var firstCellBox = firstCell.getBoundingClientRect();\n if (firstCellBox.top == tableBox.top || firstCellBox.left == tableBox.left) {\n return slice$1$1(boxes).map(function(box){\n return {\n left : box.left + tableBorderLeft,\n top : box.top + tableBorderTop,\n right : box.right + tableBorderLeft,\n bottom : box.bottom + tableBorderTop,\n height : box.height,\n width : box.width\n };\n });\n }\n }\n }\n return boxes;\n }\n\n // this function will be called to draw each border. it\n // draws starting at origin and the resulted path must be\n // translated/rotated to be placed in the proper position.\n //\n // arguments are named as if it draws the top border:\n //\n // - `len` the length of the edge\n // - `Wtop` the width of the edge (i.e. border-top-width)\n // - `Wleft` the width of the left edge (border-left-width)\n // - `Wright` the width of the right edge\n // - `rl` and `rl` -- the border radius on the left and right\n // (objects containing x and y, for horiz/vertical radius)\n // - `transform` -- transformation to apply\n //\n function drawEdge(color, len, Wtop, Wleft, Wright, rl, rr, transform$$1) {\n if (Wtop <= 0) {\n return;\n }\n\n var path, edge = new Group();\n setTransform$1(edge, transform$$1);\n group.append(edge);\n\n sanitizeRadius(rl);\n sanitizeRadius(rr);\n\n // draw main border. this is the area without the rounded corners\n path = new Path({\n fill: { color: color },\n stroke: null\n });\n edge.append(path);\n path.moveTo(rl.x ? Math.max(rl.x, Wleft) : 0, 0)\n .lineTo(len - (rr.x ? Math.max(rr.x, Wright) : 0), 0)\n .lineTo(len - Math.max(rr.x, Wright), Wtop)\n .lineTo(Math.max(rl.x, Wleft), Wtop)\n .close();\n\n if (rl.x) {\n drawRoundCorner(Wleft, rl, [ -1, 0, 0, 1, rl.x, 0 ]);\n }\n\n if (rr.x) {\n drawRoundCorner(Wright, rr, [ 1, 0, 0, 1, len - rr.x, 0 ]);\n }\n\n // draws one round corner, starting at origin (needs to be\n // translated/rotated to be placed properly).\n function drawRoundCorner(Wright, r, transform$$1) {\n var angle = Math.PI/2 * Wright / (Wright + Wtop);\n\n // not sanitizing this one, because negative values\n // are useful to fill the box correctly.\n var ri = {\n x: r.x - Wright,\n y: r.y - Wtop\n };\n\n var path = new Path({\n fill: { color: color },\n stroke: null\n }).moveTo(0, 0);\n\n setTransform$1(path, transform$$1);\n\n addArcToPath(path, 0, r.y, {\n startAngle: -90,\n endAngle: -radiansToDegrees(angle),\n radiusX: r.x,\n radiusY: r.y\n });\n\n if (ri.x > 0 && ri.y > 0) {\n path.lineTo(ri.x * Math.cos(angle), r.y - ri.y * Math.sin(angle));\n addArcToPath(path, 0, r.y, {\n startAngle: -radiansToDegrees(angle),\n endAngle: -90,\n radiusX: ri.x,\n radiusY: ri.y,\n anticlockwise: true\n });\n }\n else if (ri.x > 0) {\n path.lineTo(ri.x, Wtop)\n .lineTo(0, Wtop);\n }\n else {\n path.lineTo(ri.x, Wtop)\n .lineTo(ri.x, 0);\n }\n\n edge.append(path.close());\n }\n }\n\n function drawBackground(box) {\n var background = new Group();\n setClipping(background, roundBox(box, rTL0, rTR0, rBR0, rBL0));\n group.append(background);\n\n if (backgroundColor) {\n var path = new Path({\n fill: { color: backgroundColor.toCssRgba() },\n stroke: null\n });\n path.moveTo(box.left, box.top)\n .lineTo(box.right, box.top)\n .lineTo(box.right, box.bottom)\n .lineTo(box.left, box.bottom)\n .close();\n background.append(path);\n }\n\n for (var i = backgroundImage.length; --i >= 0;) {\n drawOneBackground(\n background, box,\n backgroundImage[i],\n backgroundRepeat[i % backgroundRepeat.length],\n backgroundPosition[i % backgroundPosition.length],\n backgroundOrigin[i % backgroundOrigin.length],\n backgroundSize[i % backgroundSize.length]\n );\n }\n }\n\n function drawOneBackground(group, box, background, backgroundRepeat, backgroundPosition, backgroundOrigin, backgroundSize) {\n if (!background || (background == \"none\")) {\n return;\n }\n\n if (background.type == \"url\") {\n var img = IMAGE_CACHE[background.url];\n if (img && img.width > 0 && img.height > 0) {\n drawBackgroundImage(group, box, img.width, img.height, function(group, rect){\n group.append(new Image$1(background.url, rect));\n });\n }\n } else if (background.type == \"linear\") {\n drawBackgroundImage(group, box, box.width, box.height, gradientRenderer(background));\n } else {\n return;\n }\n\n function drawBackgroundImage(group, box, img_width, img_height, renderBG) {\n var aspect_ratio = img_width / img_height, f;\n\n // for background-origin: border-box the box is already appropriate\n var orgBox = box;\n if (backgroundOrigin == \"content-box\") {\n orgBox = innerBox(orgBox, \"border-*-width\", element);\n orgBox = innerBox(orgBox, \"padding-*\", element);\n } else if (backgroundOrigin == \"padding-box\") {\n orgBox = innerBox(orgBox, \"border-*-width\", element);\n }\n\n if (!/^\\s*auto(\\s+auto)?\\s*$/.test(backgroundSize)) {\n if (backgroundSize == \"contain\") {\n f = Math.min(orgBox.width / img_width,\n orgBox.height / img_height);\n img_width *= f;\n img_height *= f;\n }\n else if (backgroundSize == \"cover\") {\n f = Math.max(orgBox.width / img_width,\n orgBox.height / img_height);\n img_width *= f;\n img_height *= f;\n }\n else {\n var size = backgroundSize.split(/\\s+/g);\n // compute width\n if (/%$/.test(size[0])) {\n img_width = orgBox.width * parseFloat(size[0]) / 100;\n } else {\n img_width = parseFloat(size[0]);\n }\n // compute height\n if (size.length == 1 || size[1] == \"auto\") {\n img_height = img_width / aspect_ratio;\n } else if (/%$/.test(size[1])) {\n img_height = orgBox.height * parseFloat(size[1]) / 100;\n } else {\n img_height = parseFloat(size[1]);\n }\n }\n }\n\n var pos = String(backgroundPosition);\n\n // IE sometimes reports single-word positions\n // https://github.com/telerik/kendo-ui-core/issues/2786\n //\n // it seems to switch to percentages when the horizontal\n // position is not \"center\", therefore we don't handle\n // multi-word cases here. All other browsers return\n // percentages or pixels instead of keywords. At least\n // for now...\n switch (pos) {\n case \"bottom\" : pos = \"50% 100%\"; break;\n case \"top\" : pos = \"50% 0\"; break;\n case \"left\" : pos = \"0 50%\"; break;\n case \"right\" : pos = \"100% 50%\"; break;\n case \"center\" : pos = \"50% 50%\"; break;\n }\n\n pos = pos.split(/\\s+/);\n if (pos.length == 1) {\n pos[1] = \"50%\";\n }\n\n if (/%$/.test(pos[0])) {\n pos[0] = parseFloat(pos[0]) / 100 * (orgBox.width - img_width);\n } else {\n pos[0] = parseFloat(pos[0]);\n }\n if (/%$/.test(pos[1])) {\n pos[1] = parseFloat(pos[1]) / 100 * (orgBox.height - img_height);\n } else {\n pos[1] = parseFloat(pos[1]);\n }\n\n var rect = new Rect([ orgBox.left + pos[0], orgBox.top + pos[1] ], [ img_width, img_height ]);\n\n // XXX: background-repeat could be implemented more\n // efficiently as a fill pattern (at least for PDF\n // output, probably SVG too).\n\n function rewX() {\n while (rect.origin.x > box.left) {\n rect.origin.x -= img_width;\n }\n }\n\n function rewY() {\n while (rect.origin.y > box.top) {\n rect.origin.y -= img_height;\n }\n }\n\n function repeatX() {\n while (rect.origin.x < box.right) {\n renderBG(group, rect.clone());\n rect.origin.x += img_width;\n }\n }\n\n if (backgroundRepeat == \"no-repeat\") {\n renderBG(group, rect);\n }\n else if (backgroundRepeat == \"repeat-x\") {\n rewX();\n repeatX();\n }\n else if (backgroundRepeat == \"repeat-y\") {\n rewY();\n while (rect.origin.y < box.bottom) {\n renderBG(group, rect.clone());\n rect.origin.y += img_height;\n }\n }\n else if (backgroundRepeat == \"repeat\") {\n rewX();\n rewY();\n var origin = rect.origin.clone();\n while (rect.origin.y < box.bottom) {\n rect.origin.x = origin.x;\n repeatX();\n rect.origin.y += img_height;\n }\n }\n }\n }\n\n function drawBullet() {\n var listStyleType = getPropertyValue(style, \"list-style-type\");\n if (listStyleType == \"none\") {\n return;\n }\n var listStylePosition = getPropertyValue(style, \"list-style-position\");\n\n function _drawBullet(f) {\n saveStyle(element, function(){\n element.style.position = \"relative\";\n var bullet = element.ownerDocument.createElement(KENDO_PSEUDO_ELEMENT);\n bullet.style.position = \"absolute\";\n bullet.style.boxSizing = \"border-box\";\n if (listStylePosition == \"outside\") {\n bullet.style.width = \"6em\";\n bullet.style.left = \"-6.8em\";\n bullet.style.textAlign = \"right\";\n } else {\n bullet.style.left = \"0px\";\n }\n f(bullet);\n element.insertBefore(bullet, element.firstChild);\n renderElement(bullet, group);\n element.removeChild(bullet);\n });\n }\n\n function elementIndex(f) {\n var a = element.parentNode.children;\n var k = element.getAttribute(\"kendo-split-index\");\n if (k != null) {\n return f(k|0, a.length);\n }\n for (var i = 0; i < a.length; ++i) {\n if (a[i] === element) {\n return f(i, a.length);\n }\n }\n }\n\n switch (listStyleType) {\n case \"circle\":\n case \"disc\":\n case \"square\":\n _drawBullet(function(bullet){\n bullet.innerHTML = ' ';\n bullet.setAttribute(KENDO_BULLET_TYPE, listStyleType);\n });\n break;\n\n case \"decimal\":\n case \"decimal-leading-zero\":\n _drawBullet(function(bullet){\n elementIndex(function(idx){\n ++idx;\n if (listStyleType == \"decimal-leading-zero\" && idx < 10) {\n idx = \"0\" + idx;\n }\n bullet.innerHTML = idx + \".\";\n });\n });\n break;\n\n case \"lower-roman\":\n case \"upper-roman\":\n _drawBullet(function(bullet){\n elementIndex(function(idx){\n idx = arabicToRoman(idx + 1);\n if (listStyleType == \"upper-roman\") {\n idx = idx.toUpperCase();\n }\n bullet.innerHTML = idx + \".\";\n });\n });\n break;\n\n case \"lower-latin\":\n case \"lower-alpha\":\n case \"upper-latin\":\n case \"upper-alpha\":\n _drawBullet(function(bullet){\n elementIndex(function(idx){\n idx = alphaNumeral(idx);\n if (/^upper/i.test(listStyleType)) {\n idx = idx.toUpperCase();\n }\n bullet.innerHTML = idx + \".\";\n });\n });\n break;\n }\n }\n\n // draws a single border box\n function drawOneBox(box, isFirst, isLast) {\n if (box.width === 0 || box.height === 0) {\n return;\n }\n\n drawBackground(box);\n\n var shouldDrawLeft = (left.width > 0 && ((isFirst && dir == \"ltr\") || (isLast && dir == \"rtl\")));\n var shouldDrawRight = (right.width > 0 && ((isLast && dir == \"ltr\") || (isFirst && dir == \"rtl\")));\n\n // The most general case is that the 4 borders have different widths and border\n // radiuses. The way that is handled is by drawing 3 Paths for each border: the\n // straight line, and two round corners which represent half of the entire rounded\n // corner. To simplify code those shapes are drawed at origin (by the drawEdge\n // function), then translated/rotated into the right position.\n //\n // However, this leads to poor results due to rounding in the simpler cases where\n // borders are straight lines. Therefore we handle a few such cases separately with\n // straight lines. C^wC^wC^w -- nope, scratch that. poor rendering was because of a bug\n // in Chrome (getClientRects() returns rounded integer values rather than exact floats.\n // web dev is still a ghetto.)\n\n // first, just in case there is no border...\n if (top.width === 0 && left.width === 0 && right.width === 0 && bottom.width === 0) {\n return;\n }\n\n // START paint borders\n // if all borders have equal colors...\n if (top.color == right.color && top.color == bottom.color && top.color == left.color) {\n\n // if same widths too, we can draw the whole border by stroking a single path.\n if (top.width == right.width && top.width == bottom.width && top.width == left.width)\n {\n if (shouldDrawLeft && shouldDrawRight) {\n // reduce box by half the border width, so we can draw it by stroking.\n box = innerBox(box, top.width/2);\n\n // adjust the border radiuses, again by top.width/2, and make the path element.\n var path = elementRoundBox(element, box, top.width/2);\n path.options.stroke = {\n color: top.color,\n width: top.width\n };\n group.append(path);\n return;\n }\n }\n }\n\n // if border radiuses are zero and widths are at most one pixel, we can again use simple\n // paths.\n if (rTL0.x === 0 && rTR0.x === 0 && rBR0.x === 0 && rBL0.x === 0) {\n // alright, 1.9px will do as well. the difference in color blending should not be\n // noticeable.\n if (top.width < 2 && left.width < 2 && right.width < 2 && bottom.width < 2) {\n // top border\n if (top.width > 0) {\n group.append(\n new Path({\n stroke: { width: top.width, color: top.color }\n })\n .moveTo(box.left, box.top + top.width/2)\n .lineTo(box.right, box.top + top.width/2)\n );\n }\n\n // bottom border\n if (bottom.width > 0) {\n group.append(\n new Path({\n stroke: { width: bottom.width, color: bottom.color }\n })\n .moveTo(box.left, box.bottom - bottom.width/2)\n .lineTo(box.right, box.bottom - bottom.width/2)\n );\n }\n\n // left border\n if (shouldDrawLeft) {\n group.append(\n new Path({\n stroke: { width: left.width, color: left.color }\n })\n .moveTo(box.left + left.width/2, box.top)\n .lineTo(box.left + left.width/2, box.bottom)\n );\n }\n\n // right border\n if (shouldDrawRight) {\n group.append(\n new Path({\n stroke: { width: right.width, color: right.color }\n })\n .moveTo(box.right - right.width/2, box.top)\n .lineTo(box.right - right.width/2, box.bottom)\n );\n }\n\n return;\n }\n }\n // END paint borders\n\n var tmp = adjustBorderRadiusForBox(box, rTL0, rTR0, rBR0, rBL0);\n var rTL = tmp.tl;\n var rTR = tmp.tr;\n var rBR = tmp.br;\n var rBL = tmp.bl;\n\n // top border\n drawEdge(top.color,\n box.width, top.width, left.width, right.width,\n rTL, rTR,\n [ 1, 0, 0, 1, box.left, box.top ]);\n\n // bottom border\n drawEdge(bottom.color,\n box.width, bottom.width, right.width, left.width,\n rBR, rBL,\n [ -1, 0, 0, -1, box.right, box.bottom ]);\n\n // for left/right borders we need to invert the border-radiuses\n function inv(p) {\n return { x: p.y, y: p.x };\n }\n\n // left border\n drawEdge(left.color,\n box.height, left.width, bottom.width, top.width,\n inv(rBL), inv(rTL),\n [ 0, -1, 1, 0, box.left, box.bottom ]);\n\n // right border\n drawEdge(right.color,\n box.height, right.width, top.width, bottom.width,\n inv(rTR), inv(rBR),\n [ 0, 1, -1, 0, box.right, box.top ]);\n }\n }\n\n function gradientRenderer(gradient) {\n return function(group, rect) {\n var width = rect.width(), height = rect.height();\n\n switch (gradient.type) {\n case \"linear\":\n\n // figure out the angle.\n var angle = gradient.angle != null ? gradient.angle : Math.PI;\n switch (gradient.to) {\n case \"top\":\n angle = 0;\n break;\n case \"left\":\n angle = -Math.PI / 2;\n break;\n case \"bottom\":\n angle = Math.PI;\n break;\n case \"right\":\n angle = Math.PI / 2;\n break;\n case \"top left\": case \"left top\":\n angle = -Math.atan2(height, width);\n break;\n case \"top right\": case \"right top\":\n angle = Math.atan2(height, width);\n break;\n case \"bottom left\": case \"left bottom\":\n angle = Math.PI + Math.atan2(height, width);\n break;\n case \"bottom right\": case \"right bottom\":\n angle = Math.PI - Math.atan2(height, width);\n break;\n }\n\n if (gradient.reverse) {\n angle -= Math.PI;\n }\n\n // limit the angle between 0..2PI\n angle %= 2 * Math.PI;\n if (angle < 0) {\n angle += 2 * Math.PI;\n }\n\n // compute gradient's start/end points. here len is the length of the gradient line\n // and x,y is the end point relative to the center of the rectangle in conventional\n // (math) axis direction.\n\n // this is the original (unscaled) length of the gradient line. needed to deal with\n // absolutely positioned color stops. formula from the CSS spec:\n // http://dev.w3.org/csswg/css-images-3/#linear-gradient-syntax\n var pxlen = Math.abs(width * Math.sin(angle)) + Math.abs(height * Math.cos(angle));\n\n // The math below is pretty simple, but it took a while to figure out. We compute x\n // and y, the *end* of the gradient line. However, we want to transform them into\n // element-based coordinates (SVG's gradientUnits=\"objectBoundingBox\"). That means,\n // x=0 is the left edge, x=1 is the right edge, y=0 is the top edge and y=1 is the\n // bottom edge.\n //\n // A naive approach would use the original angle for these calculations. Say we'd\n // like to draw a gradient angled at 45deg in a 100x400 box. When we use\n // objectBoundingBox, the renderer will draw it in a 1x1 *square* box, and then\n // scale that to the desired dimensions. The 45deg angle will look more like 70deg\n // after scaling. SVG (http://www.w3.org/TR/SVG/pservers.html#LinearGradients) says\n // the following:\n //\n // When gradientUnits=\"objectBoundingBox\" and 'gradientTransform' is the\n // identity matrix, the normal of the linear gradient is perpendicular to the\n // gradient vector in object bounding box space (i.e., the abstract coordinate\n // system where (0,0) is at the top/left of the object bounding box and (1,1) is\n // at the bottom/right of the object bounding box). When the object's bounding\n // box is not square, the gradient normal which is initially perpendicular to\n // the gradient vector within object bounding box space may render\n // non-perpendicular relative to the gradient vector in user space. If the\n // gradient vector is parallel to one of the axes of the bounding box, the\n // gradient normal will remain perpendicular. This transformation is due to\n // application of the non-uniform scaling transformation from bounding box space\n // to user space.\n //\n // which is an extremely long and confusing way to tell what I just said above.\n //\n // For this reason we need to apply the reverse scaling to the original angle, so\n // that when it'll finally be rendered it'll actually be at the desired slope. Now\n // I'll let you figure out the math yourself.\n\n var scaledAngle = Math.atan(width * Math.tan(angle) / height);\n var sin = Math.sin(scaledAngle), cos = Math.cos(scaledAngle);\n var len = Math.abs(sin) + Math.abs(cos);\n var x = len/2 * sin;\n var y = len/2 * cos;\n\n // Because of the arctangent, our scaledAngle ends up between -PI/2..PI/2, possibly\n // losing the intended direction of the gradient. The following fixes it.\n if (angle > Math.PI/2 && angle <= 3*Math.PI/2) {\n x = -x;\n y = -y;\n }\n\n // compute the color stops.\n var implicit = [], right = 0;\n var stops = gradient.stops.map(function(s, i){\n var offset = s.percent;\n if (offset) {\n offset = parseFloat(offset) / 100;\n } else if (s.length) {\n offset = parseFloat(s.length) / pxlen;\n } else if (i === 0) {\n offset = 0;\n } else if (i == gradient.stops.length - 1) {\n offset = 1;\n }\n var stop = {\n color: s.color.toCssRgba(),\n offset: offset\n };\n if (offset != null) {\n right = offset;\n // fix implicit offsets\n implicit.forEach(function(s, i){\n var stop = s.stop;\n stop.offset = s.left + (right - s.left) * (i + 1) / (implicit.length + 1);\n });\n implicit = [];\n } else {\n implicit.push({ left: right, stop: stop });\n }\n return stop;\n });\n\n var start = [ 0.5 - x, 0.5 + y ];\n var end = [ 0.5 + x, 0.5 - y ];\n\n // finally, draw it.\n group.append(\n Path.fromRect(rect)\n .stroke(null)\n .fill(new LinearGradient({\n start : start,\n end : end,\n stops : stops,\n userSpace : false\n }))\n );\n break;\n case \"radial\":\n // XXX:\n if (window.console && window.console.log) {\n window.console.log(\"Radial gradients are not yet supported in HTML renderer\");\n }\n break;\n }\n };\n }\n\n function maybeRenderWidget(element, group) {\n var visual;\n\n if (element._kendoExportVisual) {\n visual = element._kendoExportVisual();\n } else if (window.kendo && window.kendo.jQuery && element.getAttribute(window.kendo.attr(\"role\"))) {\n var widget = window.kendo.widgetInstance(window.kendo.jQuery(element));\n if (widget && (widget.exportDOMVisual || widget.exportVisual)) {\n if (widget.exportDOMVisual) {\n visual = widget.exportDOMVisual();\n } else {\n visual = widget.exportVisual();\n }\n }\n }\n\n if (!visual) {\n return false;\n }\n\n var wrap$$1 = new Group();\n wrap$$1.children.push(visual);\n\n var bbox = element.getBoundingClientRect();\n wrap$$1.transform(transform$1().translate(bbox.left, bbox.top));\n\n group.append(wrap$$1);\n\n return true;\n }\n\n function maybeRenderBullet(element, group) {\n var bulletType = element.getAttribute(KENDO_BULLET_TYPE);\n\n if (!bulletType) {\n return false;\n }\n\n var box = element.getBoundingClientRect();\n var color = getComputedStyle$1(element).color;\n\n if (bulletType === 'square') {\n var rectSize = box.height / 5;\n group.append(new Rect$2(new Rect([\n box.right - rectSize,\n box.top + box.height / 2.1\n ], [rectSize, rectSize])).fill(color).stroke(color));\n } else {\n var radius = box.height / 7;\n var center = [\n box.right - radius,\n box.top + (box.height + radius) / 2\n ];\n var circle = new Circle(new Circle$2(center, radius));\n if (bulletType === 'circle') {\n circle.stroke(color, 0.5);\n } else {\n circle.fill(color).stroke(null);\n }\n group.append(circle);\n }\n\n return true;\n }\n\n function renderImage(element, url, group) {\n var box = getContentBox(element);\n var rect = new Rect([ box.left, box.top ], [ box.width, box.height ]);\n var image = new Image$1(url, rect);\n setClipping(image, elementRoundBox(element, box, \"content\"));\n group.append(image);\n }\n\n function zIndexSort(a, b) {\n var sa = getComputedStyle$1(a);\n var sb = getComputedStyle$1(b);\n var za = parseFloat(getPropertyValue(sa, \"z-index\"));\n var zb = parseFloat(getPropertyValue(sb, \"z-index\"));\n var pa = getPropertyValue(sa, \"position\");\n var pb = getPropertyValue(sb, \"position\");\n if (isNaN(za) && isNaN(zb)) {\n if ((/static|absolute/.test(pa)) && (/static|absolute/.test(pb))) {\n return 0;\n }\n if (pa == \"static\") {\n return -1;\n }\n if (pb == \"static\") {\n return 1;\n }\n return 0;\n }\n if (isNaN(za)) {\n return zb === 0 ? 0 : zb > 0 ? -1 : 1;\n }\n if (isNaN(zb)) {\n return za === 0 ? 0 : za > 0 ? 1 : -1;\n }\n return parseFloat(za) - parseFloat(zb);\n }\n\n function isFormField(element) {\n return /^(?:textarea|select|input)$/i.test(element.tagName);\n }\n\n function getSelectedOption(element) {\n if (element.selectedOptions && element.selectedOptions.length > 0) {\n return element.selectedOptions[0];\n }\n return element.options[element.selectedIndex];\n }\n\n function renderCheckbox(element, group) {\n var style = getComputedStyle$1(element);\n var color = getPropertyValue(style, \"color\");\n var box = element.getBoundingClientRect();\n if (element.type == \"checkbox\") {\n group.append(\n Path.fromRect(\n new Rect([ box.left+1, box.top+1 ],\n [ box.width-2, box.height-2 ])\n ).stroke(color, 1)\n );\n if (element.checked) {\n // fill a rectangle inside? looks kinda ugly.\n // group.append(\n // Path.fromRect(\n // new geo.Rect([ box.left+4, box.top+4 ],\n // [ box.width-8, box.height-8])\n // ).fill(color).stroke(null)\n // );\n\n // let's draw a checkmark instead. artistic, eh?\n group.append(\n new Path()\n .stroke(color, 1.2)\n .moveTo(box.left + 0.22 * box.width,\n box.top + 0.55 * box.height)\n .lineTo(box.left + 0.45 * box.width,\n box.top + 0.75 * box.height)\n .lineTo(box.left + 0.78 * box.width,\n box.top + 0.22 * box.width)\n );\n }\n } else {\n group.append(\n new Circle(\n new Circle$2([\n (box.left + box.right) / 2,\n (box.top + box.bottom) / 2\n ], Math.min(box.width-2, box.height-2) / 2)\n ).stroke(color, 1)\n );\n if (element.checked) {\n group.append(\n new Circle(\n new Circle$2([\n (box.left + box.right) / 2,\n (box.top + box.bottom) / 2\n ], Math.min(box.width-8, box.height-8) / 2)\n ).fill(color).stroke(null)\n );\n }\n }\n }\n\n function renderFormField(element, group) {\n var tag = element.tagName.toLowerCase();\n if (tag == \"input\" && (element.type == \"checkbox\" || element.type == \"radio\")) {\n return renderCheckbox(element, group);\n }\n var p = element.parentNode;\n var doc = element.ownerDocument;\n var el = doc.createElement(KENDO_PSEUDO_ELEMENT);\n var option;\n el.style.cssText = getCssText(getComputedStyle$1(element));\n if (tag == \"input\") {\n el.style.whiteSpace = \"pre\";\n }\n if (tag == \"select\" || tag == \"textarea\") {\n el.style.overflow = \"auto\";\n }\n if (tag == \"select\") {\n if (element.multiple) {\n for (var i = 0; i < element.options.length; ++i) {\n option = doc.createElement(KENDO_PSEUDO_ELEMENT);\n option.style.cssText = getCssText(getComputedStyle$1(element.options[i]));\n option.style.display = \"block\"; // IE9 messes up without this\n option.textContent = element.options[i].textContent;\n el.appendChild(option);\n }\n } else {\n option = getSelectedOption(element);\n if (option) {\n el.textContent = option.textContent;\n }\n }\n } else {\n el.textContent = element.value;\n }\n p.insertBefore(el, element);\n el.scrollLeft = element.scrollLeft;\n el.scrollTop = element.scrollTop;\n\n // must temporarily hide the original element, otherwise it\n // may affect layout of the fake element we want to render.\n element.style.display = \"none\";\n\n renderContents(el, group);\n element.style.display = \"\";\n p.removeChild(el);\n }\n\n function serializeSVG(element) {\n var serializer = new window.XMLSerializer();\n var xml = serializer.serializeToString(element);\n\n if (browser.mozilla && !(element.getAttribute(\"width\") && element.getAttribute(\"height\"))) {\n var doc = new window.DOMParser().parseFromString(xml, \"image/svg+xml\");\n var svg$$1 = doc.documentElement;\n var box = getContentBox(element);\n svg$$1.setAttribute(\"width\", box.width);\n svg$$1.setAttribute(\"height\", box.height);\n xml = serializer.serializeToString(svg$$1);\n }\n\n return xml;\n }\n\n function renderContents(element, group) {\n if (nodeInfo._stackingContext.element === element) {\n // the group that was set in pushNodeInfo might have\n // changed due to clipping/transforms, update it here.\n nodeInfo._stackingContext.group = group;\n }\n switch (element.tagName.toLowerCase()) {\n case \"img\":\n renderImage(element, element.src, group);\n break;\n\n case \"svg\":\n var xml = serializeSVG(element);\n var dataURL = \"data:image/svg+xml;base64,\" + (encodeBase64(xml));\n renderImage(element, dataURL, group);\n break;\n\n case \"canvas\":\n try {\n renderImage(element, element.toDataURL(\"image/png\"), group);\n } catch (ex) {\n // tainted; can't draw it, ignore.\n }\n break;\n\n case \"textarea\":\n case \"input\":\n case \"select\":\n renderFormField(element, group);\n break;\n\n default:\n var children = [], floats = [], positioned = [];\n for (var i = element.firstChild; i; i = i.nextSibling) {\n switch (i.nodeType) {\n case 3: // Text\n if (/\\S/.test(i.data)) {\n renderText(element, i, group);\n }\n break;\n case 1: // Element\n var style = getComputedStyle$1(i);\n var floating = getPropertyValue(style, \"float\");\n var position = getPropertyValue(style, \"position\");\n if (position != \"static\") {\n positioned.push(i);\n }\n else if (floating != \"none\") {\n floats.push(i);\n } else {\n children.push(i);\n }\n break;\n }\n }\n\n mergeSort(children, zIndexSort).forEach(function(el){ renderElement(el, group); });\n mergeSort(floats, zIndexSort).forEach(function(el){ renderElement(el, group); });\n mergeSort(positioned, zIndexSort).forEach(function(el){ renderElement(el, group); });\n }\n }\n\n function renderText(element, node, group) {\n if (emptyClipbox()) {\n return;\n }\n var style = getComputedStyle$1(element);\n\n if (parseFloat(getPropertyValue(style, \"text-indent\")) < -500) {\n // assume it should not be displayed. the slider's\n // draggable handle displays a Drag text for some reason,\n // having text-indent: -3333px.\n return;\n }\n\n var text = node.data;\n var start = 0;\n var end = text.search(/\\S\\s*$/) + 1;\n\n if (!end) {\n return; // whitespace-only node\n }\n\n var fontSize = getPropertyValue(style, \"font-size\");\n var lineHeight = getPropertyValue(style, \"line-height\");\n\n // simply getPropertyValue(\"font\") doesn't work in Firefox :-\\\n var font = [\n getPropertyValue(style, \"font-style\"),\n getPropertyValue(style, \"font-variant\"),\n getPropertyValue(style, \"font-weight\"),\n fontSize, // no need for line height here; it breaks layout in FF\n getPropertyValue(style, \"font-family\")\n ].join(\" \");\n\n fontSize = parseFloat(fontSize);\n lineHeight = parseFloat(lineHeight);\n\n if (fontSize === 0 || isNaN(fontSize)) {\n return;\n }\n\n var color = getPropertyValue(style, \"color\");\n var range = element.ownerDocument.createRange();\n var align$$1 = getPropertyValue(style, \"text-align\");\n var isJustified = align$$1 == \"justify\";\n var columnCount = getPropertyValue(style, \"column-count\", 1);\n var whiteSpace = getPropertyValue(style, \"white-space\");\n var textTransform = getPropertyValue(style, \"text-transform\");\n\n // A line of 500px, with a font of 12px, contains an average of 80 characters, but since we\n // err, we'd like to guess a bigger number rather than a smaller one. Multiplying by 5\n // seems to be a good option.\n var estimateLineLength = element.getBoundingClientRect().width / fontSize * 5;\n if (estimateLineLength === 0) {\n estimateLineLength = 500;\n }\n\n // we'll maintain this so we can workaround bugs in Chrome's Range.getClientRects\n // https://github.com/telerik/kendo/issues/5740\n var prevLineBottom = null;\n\n var underline = nodeInfo[\"underline\"];\n var lineThrough = nodeInfo[\"line-through\"];\n var overline = nodeInfo[\"overline\"];\n var underlineOffset = nodeInfo[\"underline-offset\"];\n\n if (underline) {\n forEachRect(decorateUnder);\n }\n\n // doChunk returns true when all text has been rendered\n while (!doChunk()) {}\n\n if (lineThrough || overline) {\n forEachRect(decorateOver);\n }\n\n return; // only function declarations after this line\n\n function forEachRect(callback) {\n range.selectNode(node);\n var clientRects = slice$1$1(range.getClientRects());\n\n forEachRect = function (cb) { return clientRects.forEach(cb); };\n forEachRect(callback);\n }\n\n function actuallyGetRangeBoundingRect(range) {\n // XXX: to be revised when this Chrome bug is fixed:\n // https://bugs.chromium.org/p/chromium/issues/detail?id=612459\n if (microsoft || browser.chrome || browser.safari) {\n // Workaround browser bugs: IE and Chrome would sometimes\n // return 0 or 1-width rectangles before or after the main\n // one. https://github.com/telerik/kendo/issues/4674\n\n // Actually Chrome 50 got worse, since the rectangles can now have the width of a\n // full character, making it hard to tell whether it's a bogus rectangle or valid\n // selection location. The workaround is to ignore rectangles that fall on the\n // previous line. https://github.com/telerik/kendo/issues/5740\n var rectangles = range.getClientRects(), box = {\n top : Infinity,\n right : -Infinity,\n bottom : -Infinity,\n left : Infinity\n }, done = false;\n for (var i = 0; i < rectangles.length; ++i) {\n var b = rectangles[i];\n if (b.width <= 1 || b.bottom === prevLineBottom) {\n continue; // bogus rectangle\n }\n box.left = Math.min(b.left , box.left);\n box.top = Math.min(b.top , box.top);\n box.right = Math.max(b.right , box.right);\n box.bottom = Math.max(b.bottom , box.bottom);\n done = true;\n }\n if (!done) {\n return range.getBoundingClientRect();\n }\n box.width = box.right - box.left;\n box.height = box.bottom - box.top;\n return box;\n }\n return range.getBoundingClientRect();\n }\n\n // Render a chunk of text, typically one line (but for justified text we render each word as\n // a separate Text object, because spacing is variable). Returns true when it finished the\n // current node. After each chunk it updates `start` to just after the last rendered\n // character.\n function doChunk() {\n var origStart = start;\n var box, pos = text.substr(start).search(/\\S/);\n start += pos;\n if (pos < 0 || start >= end) {\n return true;\n }\n\n // Select a single character to determine the height of a line of text. The box.bottom\n // will be essential for us to figure out where the next line begins.\n range.setStart(node, start);\n range.setEnd(node, start + 1);\n box = actuallyGetRangeBoundingRect(range);\n\n // for justified text we must split at each space, because space has variable width.\n var found = false;\n if (isJustified || columnCount > 1) {\n pos = text.substr(start).search(/\\s/);\n if (pos >= 0) {\n // we can only split there if it's on the same line, otherwise we'll fall back\n // to the default mechanism (see findEOL below).\n range.setEnd(node, start + pos);\n var r = actuallyGetRangeBoundingRect(range);\n if (r.bottom == box.bottom) {\n box = r;\n found = true;\n start += pos;\n }\n }\n }\n\n if (!found) {\n // This code does three things: (1) it selects one line of text in `range`, (2) it\n // leaves the bounding rect of that line in `box` and (3) it returns the position\n // just after the EOL. We know where the line starts (`start`) but we don't know\n // where it ends. To figure this out, we select a piece of text and look at the\n // bottom of the bounding box. If it changes, we have more than one line selected\n // and should retry with a smaller selection.\n //\n // To speed things up, we first try to select all text in the node (`start` ->\n // `end`). If there's more than one line there, then select only half of it. And\n // so on. When we find a value for `end` that fits in one line, we try increasing\n // it (also in halves) until we get to the next line. The algorithm stops when the\n // right side of the bounding box does not change.\n //\n // One more thing to note is that everything happens in a single Text DOM node.\n // There's no other tags inside it, therefore the left/top coordinates of the\n // bounding box will not change.\n pos = (function findEOL(min, eol, max){\n range.setEnd(node, eol);\n var r = actuallyGetRangeBoundingRect(range);\n if (r.bottom != box.bottom && min < eol) {\n return findEOL(min, (min + eol) >> 1, eol);\n } else if (r.right != box.right) {\n box = r;\n if (eol < max) {\n return findEOL(eol, (eol + max) >> 1, max);\n } else {\n return eol;\n }\n } else {\n return eol;\n }\n })(start, Math.min(end, start + estimateLineLength), end);\n\n if (pos == start) {\n // if EOL is at the start, then no more text fits on this line. Skip the\n // remainder of this node entirely to avoid a stack overflow.\n return true;\n }\n start = pos;\n\n pos = range.toString().search(/\\s+$/);\n if (pos === 0) {\n return false; // whitespace only; we should not get here.\n }\n if (pos > 0) {\n // eliminate trailing whitespace\n range.setEnd(node, range.startOffset + pos);\n box = actuallyGetRangeBoundingRect(range);\n }\n }\n\n // another workaround for IE: if we rely on getBoundingClientRect() we'll overlap with the bullet for LI\n // elements. Calling getClientRects() and using the *first* rect appears to give us the correct location.\n // Note: not to be used in Chrome as it randomly returns a zero-width rectangle from the previous line.\n if (microsoft) {\n box = range.getClientRects()[0];\n }\n\n var str = range.toString();\n if (!/^(?:pre|pre-wrap)$/i.test(whiteSpace)) {\n // node with non-significant space -- collapse whitespace.\n str = str.replace(/\\s+/g, \" \");\n }\n else if (/\\t/.test(str)) {\n // with significant whitespace we need to do something about literal TAB characters.\n // There's no TAB glyph in a font so they would be rendered in PDF as an empty box,\n // and the whole text will stretch to fill the original width. The core PDF lib\n // does not have sufficient context to deal with it.\n\n // calculate the starting column here, since we initially discarded any whitespace.\n var cc = 0;\n for (pos = origStart; pos < range.startOffset; ++pos) {\n var code = text.charCodeAt(pos);\n if (code == 9) {\n // when we meet a TAB we must round up to the next tab stop.\n // in all browsers TABs seem to be 8 characters.\n cc += 8 - cc % 8;\n } else if (code == 10 || code == 13) {\n // just in case we meet a newline we must restart.\n cc = 0;\n } else {\n // ordinary character --> advance one column\n cc++;\n }\n }\n\n // based on starting column, replace any TAB characters in the string we actually\n // have to display with spaces so that they align to columns multiple of 8.\n while ((pos = str.search(\"\\t\")) >= 0) {\n var indent = \" \".substr(0, 8 - (cc + pos) % 8);\n str = str.substr(0, pos) + indent + str.substr(pos + 1);\n }\n }\n\n if (!found) {\n prevLineBottom = box.bottom;\n }\n drawText(str, box);\n }\n\n function drawText(str, box) {\n // In IE the box height will be approximately lineHeight, while in\n // other browsers it'll (correctly) be the height of the bounding\n // box for the current text/font. Which is to say, IE sucks again.\n // The only good solution I can think of is to measure the text\n // ourselves and center the bounding box.\n if (microsoft && !isNaN(lineHeight)) {\n var height = getFontHeight(font);\n var top = (box.top + box.bottom - height) / 2;\n box = {\n top : top,\n right : box.right,\n bottom : top + height,\n left : box.left,\n height : height,\n width : box.right - box.left\n };\n }\n\n // var path = new Path({ stroke: { color: \"red\" }});\n // path.moveTo(box.left, box.top)\n // .lineTo(box.right, box.top)\n // .lineTo(box.right, box.bottom)\n // .lineTo(box.left, box.bottom)\n // .close();\n // group.append(path);\n\n switch (textTransform) {\n case \"uppercase\":\n str = str.toUpperCase();\n break;\n case \"lowercase\":\n str = str.toLowerCase();\n break;\n case \"capitalize\":\n str = str.replace(/(?:^|\\s)\\S/g, function (l) { return l.toUpperCase(); });\n break;\n }\n\n var text = new TextRect(\n str, new Rect([ box.left, box.top ],\n [ box.width, box.height ]),\n {\n font: font,\n fill: { color: color }\n }\n );\n group.append(text);\n }\n\n function drawTextLine(lineWidth, textBox, color, ypos) {\n if (color) {\n var path = new Path({ stroke: {\n width: lineWidth,\n color: color\n }});\n\n ypos -= lineWidth;\n path.moveTo(textBox.left, ypos)\n .lineTo(textBox.right, ypos);\n group.append(path);\n }\n }\n\n function decorateOver(box) {\n var width = fontSize / 12;\n drawTextLine(width, box, lineThrough, box.bottom - box.height / 2.7);\n drawTextLine(width, box, overline, box.top);\n }\n\n function decorateUnder(box) {\n var width = fontSize / 12;\n var underlinePos = box.bottom;\n if (underlineOffset != null) {\n underlinePos += underlineOffset;\n } else {\n underlinePos += width; // for \"auto\" it seems better to add line width\n }\n drawTextLine(width, box, underline, underlinePos);\n }\n }\n\n function groupInStackingContext(element, group, zIndex) {\n var main;\n if (zIndex != \"auto\") {\n // use the current stacking context\n main = nodeInfo._stackingContext.group;\n zIndex = parseFloat(zIndex);\n } else {\n // normal flow — use given container. we still have to\n // figure out where should we insert this element with the\n // assumption that its z-index is zero, as the group might\n // already contain elements with higher z-index.\n main = group;\n zIndex = 0;\n }\n var a = main.children;\n for (var i = 0; i < a.length; ++i) {\n if (a[i]._dom_zIndex != null && a[i]._dom_zIndex > zIndex) {\n break;\n }\n }\n\n var tmp = new Group();\n main.insert(i, tmp);\n tmp._dom_zIndex = zIndex;\n\n if (main !== group) {\n // console.log(\"Placing\", element, \"in\", nodeInfo._stackingContext.element, \"at position\", i, \" / \", a.length);\n // console.log(a.slice(i+1));\n\n // if (nodeInfo._matrix) {\n // tmp.transform(nodeInfo._matrix);\n // }\n if (nodeInfo._clipbox) {\n var m = nodeInfo._matrix.invert();\n var r = nodeInfo._clipbox.transformCopy(m);\n setClipping(tmp, Path.fromRect(r));\n // console.log(r);\n // tmp.append(Path.fromRect(r));\n // tmp.append(new Text(element.className || element.id, r.topLeft()));\n }\n }\n\n return tmp;\n }\n\n function renderElement(element, container) {\n var style = getComputedStyle$1(element);\n\n updateCounters(style);\n\n if (/^(style|script|link|meta|iframe|col|colgroup)$/i.test(element.tagName)) {\n return;\n }\n\n if (nodeInfo._clipbox == null) {\n return;\n }\n\n var opacity = parseFloat(getPropertyValue(style, \"opacity\"));\n var visibility = getPropertyValue(style, \"visibility\");\n var display = getPropertyValue(style, \"display\");\n\n if (opacity === 0 || visibility == \"hidden\" || display == \"none\") {\n return;\n }\n\n var tr = getTransform(style);\n var group;\n\n var zIndex = getPropertyValue(style, \"z-index\");\n if ((tr || opacity < 1) && zIndex == \"auto\") {\n zIndex = 0;\n }\n group = groupInStackingContext(element, container, zIndex);\n\n // XXX: remove at some point\n // group._pdfElement = element;\n // group.options._pdfDebug = \"\";\n // if (element.id) {\n // group.options._pdfDebug = \"#\" + element.id;\n // }\n // if (element.className) {\n // group.options._pdfDebug += \".\" + element.className.split(\" \").join(\".\");\n // }\n\n if (opacity < 1) {\n group.opacity(opacity * group.opacity());\n }\n\n pushNodeInfo(element, style, group);\n\n if (!tr) {\n _renderWithPseudoElements(element, group);\n }\n else {\n saveStyle(element, function(){\n // must clear transform, so getBoundingClientRect returns correct values.\n pleaseSetPropertyValue(element.style, \"transform\", \"none\", \"important\");\n\n // must also clear transitions, so correct values are returned *immediately*\n pleaseSetPropertyValue(element.style, \"transition\", \"none\", \"important\");\n\n // the presence of any transform makes it behave like it had position: relative,\n // because why not.\n // http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/\n if (getPropertyValue(style, \"position\") == \"static\") {\n // but only if it's not already positioned. :-/\n pleaseSetPropertyValue(element.style, \"position\", \"relative\", \"important\");\n }\n\n // must translate to origin before applying the CSS\n // transformation, then translate back.\n var bbox = element.getBoundingClientRect();\n var x = bbox.left + tr.origin[0];\n var y = bbox.top + tr.origin[1];\n var m = [ 1, 0, 0, 1, -x, -y ];\n m = mmul(m, tr.matrix);\n m = mmul(m, [ 1, 0, 0, 1, x, y ]);\n m = setTransform$1(group, m);\n\n nodeInfo._matrix = nodeInfo._matrix.multiplyCopy(m);\n\n _renderWithPseudoElements(element, group);\n });\n }\n\n popNodeInfo();\n\n //drawDebugBox(element.getBoundingClientRect(), container);\n }\n\n // function drawDebugBox(box, group, color) {\n // var path = Path.fromRect(new geo.Rect([ box.left, box.top ], [ box.width, box.height ]));\n // if (color) {\n // path.stroke(color);\n // }\n // group.append(path);\n // }\n\n // function dumpTextNode(node) {\n // var txt = node.data.replace(/^\\s+/, \"\");\n // if (txt.length < 100) {\n // console.log(node.data.length + \": |\" + txt);\n // } else {\n // console.log(node.data.length + \": |\" + txt.substr(0, 50) + \"|...|\" + txt.substr(-50));\n // }\n // }\n\n function mmul(a, b) {\n var a1 = a[0], b1 = a[1], c1 = a[2], d1 = a[3], e1 = a[4], f1 = a[5];\n var a2 = b[0], b2 = b[1], c2 = b[2], d2 = b[3], e2 = b[4], f2 = b[5];\n return [\n a1*a2 + b1*c2, a1*b2 + b1*d2,\n c1*a2 + d1*c2, c1*b2 + d1*d2,\n e1*a2 + f1*c2 + e2, e1*b2 + f1*d2 + f2\n ];\n }\n\n var drawing = {\n \tsvg: svg$1,\n \tcanvas: canvas,\n \tutil: util,\n \tHasObservers: HasObservers,\n \tPathParser: PathParser,\n \tparsePath: parsePath,\n \tBaseNode: BaseNode,\n \tOptionsStore: OptionsStore,\n \tSurface: Surface,\n \tSurfaceFactory: SurfaceFactory,\n \texportImage: exportImage,\n \texportSVG: exportSVG,\n \tQuadNode: QuadNode,\n \tShapesQuadTree: ShapesQuadTree,\n \tElement: Element$1,\n \tCircle: Circle,\n \tArc: Arc,\n \tPath: Path,\n \tMultiPath: MultiPath,\n \tText: Text,\n \tImage: Image$1,\n \tGroup: Group,\n \tLayout: Layout,\n \tRect: Rect$2,\n \talign: align,\n \tvAlign: vAlign,\n \tstack: stack,\n \tvStack: vStack,\n \twrap: wrap,\n \tvWrap: vWrap,\n \tfit: fit,\n \tLinearGradient: LinearGradient,\n \tRadialGradient: RadialGradient,\n \tGradientStop: GradientStop,\n \tGradient: Gradient,\n \tAnimation: Animation,\n \tAnimationFactory: AnimationFactory,\n \tdrawDOM: drawDOM,\n \tdrawText: drawText,\n \tgetFontFaces: getFontFaces\n };\n\n kendo.deepExtend(kendo, {\n drawing: drawing,\n geometry: geometry\n });\n\n // Use unique SVG Definition IDs for Kendo UI\n defId = 1000;\n\n kendo.drawing.Segment = kendo.geometry.Segment;\n kendo.dataviz.drawing = kendo.drawing;\n kendo.dataviz.geometry = kendo.geometry;\n kendo.drawing.util.measureText = kendo.util.measureText;\n kendo.drawing.util.objectKey = kendo.util.objectKey;\n kendo.drawing.Color = kendo.Color;\n kendo.util.encodeBase64 = kendo.drawing.util.encodeBase64;\n\n })(window.kendo.jQuery);\n\n (function($) {\n\n var NS = \".kendo\";\n var kendo = window.kendo;\n var deepExtend = kendo.deepExtend;\n var utils = kendo.drawing.util;\n var defined = utils.defined;\n var limitValue = utils.limitValue;\n var eventCoordinates = utils.eventCoordinates;\n var outerWidth = kendo._outerWidth;\n var outerHeight = kendo._outerHeight;\n\n var TOOLTIP_TEMPLATE = '';\n var TOOLTIP_CLOSE_TEMPLATE = ``;\n\n var SurfaceTooltip = kendo.Class.extend({\n init: function(surface, options) {\n this.element = $(TOOLTIP_TEMPLATE);\n this.content = this.element.children(\".k-tooltip-content\");\n\n options = options || {};\n\n this.options = deepExtend({}, this.options, this._tooltipOptions(options));\n this.popupOptions = {\n appendTo: options.appendTo,\n animation: options.animation,\n copyAnchorStyles: false,\n collision: \"fit fit\"\n };\n\n this._openPopupHandler = this._openPopup.bind(this);\n\n this.surface = surface;\n this._bindEvents();\n },\n\n options: {\n position: \"top\",\n showOn: \"mouseenter\",\n offset: 7,\n autoHide: true,\n hideDelay: 0,\n showAfter: 100\n },\n\n _bindEvents: function() {\n this._showHandler = this._showEvent.bind(this);\n this._surfaceLeaveHandler = this._surfaceLeave.bind(this);\n this._mouseleaveHandler = this._mouseleave.bind(this);\n this._mousemoveHandler = this._mousemove.bind(this);\n\n this.surface.bind(\"click\", this._showHandler);\n this.surface.bind(\"mouseenter\", this._showHandler);\n this.surface.bind(\"mouseleave\", this._mouseleaveHandler);\n this.surface.bind(\"mousemove\", this._mousemoveHandler);\n\n this.surface.element.on(\"mouseleave\" + NS, this._surfaceLeaveHandler);\n\n this.element.on(\"click\" + NS, \".k-tooltip-button\", this._hideClick.bind(this));\n this.element.on(\"mouseleave\" + NS, this._tooltipLeave.bind(this));\n },\n\n getPopup: function() {\n if (!this.popup) {\n this.popup = new kendo.ui.Popup(this.element, this.popupOptions);\n }\n\n return this.popup;\n },\n\n destroy: function() {\n var popup = this.popup;\n\n this.surface.unbind(\"click\", this._showHandler);\n this.surface.unbind(\"mouseenter\", this._showHandler);\n this.surface.unbind(\"mouseleave\", this._mouseleaveHandler);\n this.surface.unbind(\"mousemove\", this._mousemoveHandler);\n\n this.surface.element.off(\"mouseleave\" + NS, this._surfaceLeaveHandler);\n this.element.off(\"click\" + NS);\n this.element.off(\"mouseleave\" + NS);\n\n if (popup) {\n popup.destroy();\n delete this.popup;\n }\n delete this.popupOptions;\n\n clearTimeout(this._timeout);\n\n delete this.element;\n delete this.content;\n delete this.surface;\n },\n\n _tooltipOptions: function(options) {\n options = options || {};\n return {\n position: options.position,\n showOn: options.showOn,\n offset: options.offset,\n autoHide: options.autoHide,\n width: options.width,\n height: options.height,\n content: options.content,\n shared: options.shared,\n hideDelay: options.hideDelay,\n showAfter: options.showAfter\n };\n },\n\n _tooltipShape: function(shape) {\n while (shape && !shape.options.tooltip) {\n shape = shape.parent;\n }\n return shape;\n },\n\n _updateContent: function(target, shape, options) {\n var content = options.content;\n if (kendo.isFunction(content)) {\n content = content({\n element: shape,\n target: target\n });\n }\n\n if (content) {\n this.content.html(content);\n return true;\n }\n },\n\n _position: function(shape, options, elementSize, event) {\n var position = options.position;\n var tooltipOffset = options.offset || 0;\n var surface = this.surface;\n var offset = surface._instance._elementOffset();\n var size = surface.getSize();\n var surfaceOffset = surface._instance._offset;\n var bbox = shape.bbox();\n var width = elementSize.width;\n var height = elementSize.height;\n var left = 0, top = 0;\n\n bbox.origin.translate(offset.left, offset.top);\n if (surfaceOffset) {\n bbox.origin.translate(-surfaceOffset.x, -surfaceOffset.y);\n }\n\n if (position == \"cursor\" && event) {\n var coord = eventCoordinates(event);\n left = coord.x - width / 2;\n top = coord.y - height - tooltipOffset;\n } else if (position == \"left\") {\n left = bbox.origin.x - width - tooltipOffset;\n top = bbox.center().y - height / 2;\n } else if (position == \"right\") {\n left = bbox.bottomRight().x + tooltipOffset;\n top = bbox.center().y - height / 2;\n } else if (position == \"bottom\") {\n left = bbox.center().x - width / 2;\n top = bbox.bottomRight().y + tooltipOffset;\n } else {\n left = bbox.center().x - width / 2;\n top = bbox.origin.y - height - tooltipOffset;\n }\n\n return {\n left: limitValue(left, offset.left, offset.left + size.width),\n top: limitValue(top, offset.top, offset.top + size.height)\n };\n },\n\n show: function(shape, options) {\n this._show(shape, shape, deepExtend({}, this.options, this._tooltipOptions(shape.options.tooltip), options));\n },\n\n hide: function() {\n var popup = this.popup;\n var current = this._current;\n\n delete this._current;\n clearTimeout(this._showTimeout);\n if (popup && popup.visible() && current &&\n !this.surface.trigger(\"tooltipClose\", { element: current.shape, target: current.target, popup: popup })) {\n popup.close();\n }\n },\n\n _hideClick: function(e) {\n e.preventDefault();\n this.hide();\n },\n\n _show: function(target, shape, options, event, delay) {\n var current = this._current;\n\n clearTimeout(this._timeout);\n\n if (current && ((current.shape === shape && options.shared) || current.target === target)) {\n return;\n }\n\n clearTimeout(this._showTimeout);\n\n var popup = this.getPopup();\n\n if (!this.surface.trigger(\"tooltipOpen\", { element: shape, target: target, popup: popup }) &&\n this._updateContent(target, shape, options)) {\n\n this._autoHide(options);\n var elementSize = this._measure(options);\n\n if (popup.visible()) {\n popup.close(true);\n }\n\n this._current = {\n options: options,\n elementSize: elementSize,\n shape: shape,\n target: target,\n position: this._position(options.shared ? shape : target, options, elementSize, event)\n };\n\n if (delay) {\n this._showTimeout = setTimeout(this._openPopupHandler, options.showAfter || 0);\n } else {\n this._openPopup();\n }\n }\n },\n\n _openPopup: function() {\n var current = this._current;\n var position = current.position;\n\n this.getPopup().open(position.left, position.top);\n },\n\n _autoHide: function(options) {\n if (options.autoHide && this._closeButton) {\n this.element.removeClass(\"k-tooltip-closable\");\n this._closeButton.remove();\n delete this._closeButton;\n }\n\n if (!options.autoHide && !this._closeButton) {\n this.element.addClass(\"k-tooltip-closable\");\n this._closeButton = $(TOOLTIP_CLOSE_TEMPLATE).appendTo(this.element);\n }\n },\n\n _showEvent: function(e) {\n var shape = this._tooltipShape(e.element);\n\n if (shape) {\n var options = deepExtend({}, this.options, this._tooltipOptions(shape.options.tooltip));\n\n if (options && options.showOn == e.type) {\n this._show(e.element, shape, options, e.originalEvent, true);\n }\n }\n },\n\n _measure: function(options) {\n this.element.css({\n width: defined(options.width) ? options.width : 'auto',\n height: defined(options.height) ? options.height : 'auto'\n });\n\n const clone = this.element.clone().appendTo(document.body).css({ visibility: 'hidden' });\n const width = outerWidth(clone);\n const height = outerHeight(clone);\n clone.remove();\n\n this.element.css({\n width: width,\n height: height\n });\n\n return {\n width: width,\n height: height\n };\n },\n\n _mouseleave: function(e) {\n if (this.popup && !this._popupRelatedTarget(e.originalEvent)) {\n var tooltip = this;\n var current = tooltip._current;\n\n if (current && current.options.autoHide) {\n tooltip._timeout = setTimeout(function() {\n clearTimeout(tooltip._showTimeout);\n tooltip.hide();\n }, current.options.hideDelay || 0);\n }\n }\n },\n\n _mousemove: function(e) {\n var current = this._current;\n if (current && e.element) {\n var options = current.options;\n if (options.position == \"cursor\") {\n var position = this._position(e.element, options, current.elementSize, e.originalEvent);\n current.position = position;\n this.getPopup().wrapper.css({ left: position.left, top: position.top });\n }\n }\n },\n\n _surfaceLeave: function(e) {\n if (this.popup && !this._popupRelatedTarget(e)) {\n clearTimeout(this._showTimeout);\n this.hide();\n }\n },\n\n _popupRelatedTarget: function(e) {\n return e.relatedTarget && $(e.relatedTarget).closest(this.popup.wrapper).length;\n },\n\n _tooltipLeave: function() {\n var tooltip = this;\n var current = tooltip._current;\n if (current && current.options.autoHide) {\n tooltip._timeout = setTimeout(function() {\n tooltip.hide();\n }, current.options.hideDelay || 0);\n }\n }\n });\n\n kendo.drawing.SurfaceTooltip = SurfaceTooltip;\n\n })(window.kendo.jQuery);\n\n (function($) {\n\n var kendo = window.kendo;\n var draw = kendo.drawing;\n var DrawingSurface = draw.Surface;\n var Widget = kendo.ui.Widget;\n var deepExtend = kendo.deepExtend;\n\n kendo.support.svg = DrawingSurface.support.svg;\n kendo.support.canvas = DrawingSurface.support.canvas;\n\n var Surface = Widget.extend({\n init: function(element, options) {\n Widget.fn.init.call(this, element, {});\n\n this.options = deepExtend({}, this.options, options);\n\n this._instance = DrawingSurface.create(this.element[0], options);\n if (this._instance.translate) {\n this.translate = translate;\n }\n\n this._triggerInstanceHandler = this._triggerInstanceEvent.bind(this);\n this._bindHandler(\"click\");\n this._bindHandler(\"mouseenter\");\n this._bindHandler(\"mouseleave\");\n this._bindHandler(\"mousemove\");\n\n this._enableTracking();\n },\n\n options: {\n name: \"Surface\",\n tooltip: {}\n },\n\n events: [\n \"click\",\n \"mouseenter\",\n \"mouseleave\",\n \"mousemove\",\n \"resize\",\n \"tooltipOpen\",\n \"tooltipClose\"\n ],\n\n _triggerInstanceEvent: function(e) {\n this.trigger(e.type, e);\n },\n\n _bindHandler: function(event) {\n this._instance.bind(event, this._triggerInstanceHandler);\n },\n\n draw: function(element) {\n this._instance.draw(element);\n },\n\n clear: function() {\n if (this._instance) {\n this._instance.clear();\n }\n this.hideTooltip();\n },\n\n destroy: function() {\n if (this._instance) {\n this._instance.destroy();\n delete this._instance;\n }\n\n if (this._tooltip) {\n this._tooltip.destroy();\n delete this._tooltip;\n }\n\n Widget.fn.destroy.call(this);\n },\n\n exportVisual: function() {\n return this._instance.exportVisual();\n },\n\n eventTarget: function(e) {\n return this._instance.eventTarget(e);\n },\n\n showTooltip: function(shape, options) {\n if (this._tooltip) {\n this._tooltip.show(shape, options);\n }\n },\n\n hideTooltip: function() {\n if (this._tooltip) {\n this._tooltip.hide();\n }\n },\n\n suspendTracking: function() {\n this._instance.suspendTracking();\n this.hideTooltip();\n },\n\n resumeTracking: function() {\n this._instance.resumeTracking();\n },\n\n getSize: function() {\n return {\n width: this.element.width(),\n height: this.element.height()\n };\n },\n\n setSize: function(size) {\n this.element.css({\n width: size.width,\n height: size.height\n });\n\n this._size = size;\n this._instance.currentSize(size);\n this._resize();\n },\n\n _resize: function() {\n this._instance.currentSize(this._size);\n this._instance._resize();\n },\n\n _enableTracking: function() {\n if (kendo.ui.Popup) {\n this._tooltip = new draw.SurfaceTooltip(this, this.options.tooltip || {});\n }\n }\n });\n\n kendo.ui.plugin(Surface);\n\n Surface.create = function(element, options) {\n return new Surface(element, options);\n };\n\n kendo.drawing.Surface = Surface;\n\n function translate(offset) {\n this._instance.translate(offset);\n }\n\n })(window.kendo.jQuery);\n\n (function($) {\n\n var kendo = window.kendo;\n var drawing = kendo.drawing;\n var drawDOM = drawing.drawDOM;\n\n drawing.drawDOM = function(element, options) {\n return drawDOM($(element)[0], options);\n };\n\n // Aliases used by spreadsheet/print.js\n drawing.drawDOM.drawText = drawing.drawText;\n drawing.drawDOM.getFontFaces = drawing.getFontFaces;\n\n })(window.kendo.jQuery);\n\n var __meta__ = {\n id: \"drawing\",\n name: \"Drawing API\",\n category: \"framework\",\n description: \"The Kendo UI low-level drawing API\",\n depends: [ \"core\", \"color\", \"popup\", \"icons\" ]\n };\n\n}));\n"]}