\r\n Вы будете переведены на платежную страницу ПАО «АК БАРС»
БАНК,\r\n где сможете скорректировать сумму и оплатить\r\n \r\n
\r\n БАНК,\r\n где сможете скорректировать сумму и оплатить\r\n \r\n
\r\n Далее\r\n \r\n
\r\n \r\n Прочие способы оплаты \r\n
\r\n \r\n \r\n Сервис оплаты временно недоступен. Пожалуйста, повторите попытку\r\n позже.\r\n \r\n Закрыть\r\n \r\n
\r\n \r\n \r\n Уважаемый клиент!\r\n \r\n В этом разделе Вы можете подключить или отключить услугу \"Электронный единый платежный документ\"\r\n \r\n Лицевой счёт:\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n mdi-help-circle-outline \r\n \r\n {{emailHelp}}\r\n \r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n Отмена\r\n \r\n Предпросмотр\r\n \r\n \r\n {{subscribe? 'Отключить':'Подключить'}}\r\n \r\n
\r\n ' + '' + '' + '' + '' + '' + '
';\n\n var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';\n var WINDOW = IS_BROWSER ? window : {};\n var IS_TOUCH_DEVICE = IS_BROWSER ? 'ontouchstart' in WINDOW.document.documentElement : false;\n var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;\n var NAMESPACE = 'viewer'; // Actions\n\n var ACTION_MOVE = 'move';\n var ACTION_SWITCH = 'switch';\n var ACTION_ZOOM = 'zoom'; // Classes\n\n var CLASS_ACTIVE = \"\".concat(NAMESPACE, \"-active\");\n var CLASS_CLOSE = \"\".concat(NAMESPACE, \"-close\");\n var CLASS_FADE = \"\".concat(NAMESPACE, \"-fade\");\n var CLASS_FIXED = \"\".concat(NAMESPACE, \"-fixed\");\n var CLASS_FULLSCREEN = \"\".concat(NAMESPACE, \"-fullscreen\");\n var CLASS_FULLSCREEN_EXIT = \"\".concat(NAMESPACE, \"-fullscreen-exit\");\n var CLASS_HIDE = \"\".concat(NAMESPACE, \"-hide\");\n var CLASS_HIDE_MD_DOWN = \"\".concat(NAMESPACE, \"-hide-md-down\");\n var CLASS_HIDE_SM_DOWN = \"\".concat(NAMESPACE, \"-hide-sm-down\");\n var CLASS_HIDE_XS_DOWN = \"\".concat(NAMESPACE, \"-hide-xs-down\");\n var CLASS_IN = \"\".concat(NAMESPACE, \"-in\");\n var CLASS_INVISIBLE = \"\".concat(NAMESPACE, \"-invisible\");\n var CLASS_LOADING = \"\".concat(NAMESPACE, \"-loading\");\n var CLASS_MOVE = \"\".concat(NAMESPACE, \"-move\");\n var CLASS_OPEN = \"\".concat(NAMESPACE, \"-open\");\n var CLASS_SHOW = \"\".concat(NAMESPACE, \"-show\");\n var CLASS_TRANSITION = \"\".concat(NAMESPACE, \"-transition\"); // Events\n\n var EVENT_CLICK = 'click';\n var EVENT_DBLCLICK = 'dblclick';\n var EVENT_DRAG_START = 'dragstart';\n var EVENT_HIDDEN = 'hidden';\n var EVENT_HIDE = 'hide';\n var EVENT_KEY_DOWN = 'keydown';\n var EVENT_LOAD = 'load';\n var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';\n var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';\n var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';\n var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;\n var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;\n var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;\n var EVENT_READY = 'ready';\n var EVENT_RESIZE = 'resize';\n var EVENT_SHOW = 'show';\n var EVENT_SHOWN = 'shown';\n var EVENT_TRANSITION_END = 'transitionend';\n var EVENT_VIEW = 'view';\n var EVENT_VIEWED = 'viewed';\n var EVENT_WHEEL = 'wheel';\n var EVENT_ZOOM = 'zoom';\n var EVENT_ZOOMED = 'zoomed'; // Data keys\n\n var DATA_ACTION = \"\".concat(NAMESPACE, \"Action\"); // RegExps\n\n var REGEXP_SPACES = /\\s\\s*/; // Misc\n\n var BUTTONS = ['zoom-in', 'zoom-out', 'one-to-one', 'reset', 'prev', 'play', 'next', 'rotate-left', 'rotate-right', 'flip-horizontal', 'flip-vertical'];\n\n /**\n * Check if the given value is a string.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a string, else `false`.\n */\n\n function isString(value) {\n return typeof value === 'string';\n }\n /**\n * Check if the given value is not a number.\n */\n\n var isNaN = Number.isNaN || WINDOW.isNaN;\n /**\n * Check if the given value is a number.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a number, else `false`.\n */\n\n function isNumber(value) {\n return typeof value === 'number' && !isNaN(value);\n }\n /**\n * Check if the given value is undefined.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is undefined, else `false`.\n */\n\n function isUndefined(value) {\n return typeof value === 'undefined';\n }\n /**\n * Check if the given value is an object.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is an object, else `false`.\n */\n\n function isObject(value) {\n return _typeof(value) === 'object' && value !== null;\n }\n var hasOwnProperty = Object.prototype.hasOwnProperty;\n /**\n * Check if the given value is a plain object.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a plain object, else `false`.\n */\n\n function isPlainObject(value) {\n if (!isObject(value)) {\n return false;\n }\n\n try {\n var _constructor = value.constructor;\n var prototype = _constructor.prototype;\n return _constructor && prototype && hasOwnProperty.call(prototype, 'isPrototypeOf');\n } catch (error) {\n return false;\n }\n }\n /**\n * Check if the given value is a function.\n * @param {*} value - The value to check.\n * @returns {boolean} Returns `true` if the given value is a function, else `false`.\n */\n\n function isFunction(value) {\n return typeof value === 'function';\n }\n /**\n * Iterate the given data.\n * @param {*} data - The data to iterate.\n * @param {Function} callback - The process function for each element.\n * @returns {*} The original data.\n */\n\n function forEach(data, callback) {\n if (data && isFunction(callback)) {\n if (Array.isArray(data) || isNumber(data.length)\n /* array-like */\n ) {\n var length = data.length;\n var i;\n\n for (i = 0; i < length; i += 1) {\n if (callback.call(data, data[i], i, data) === false) {\n break;\n }\n }\n } else if (isObject(data)) {\n Object.keys(data).forEach(function (key) {\n callback.call(data, data[key], key, data);\n });\n }\n }\n\n return data;\n }\n /**\n * Extend the given object.\n * @param {*} obj - The object to be extended.\n * @param {*} args - The rest objects which will be merged to the first object.\n * @returns {Object} The extended object.\n */\n\n var assign = Object.assign || function assign(obj) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n\n if (isObject(obj) && args.length > 0) {\n args.forEach(function (arg) {\n if (isObject(arg)) {\n Object.keys(arg).forEach(function (key) {\n obj[key] = arg[key];\n });\n }\n });\n }\n\n return obj;\n };\n var REGEXP_SUFFIX = /^(?:width|height|left|top|marginLeft|marginTop)$/;\n /**\n * Apply styles to the given element.\n * @param {Element} element - The target element.\n * @param {Object} styles - The styles for applying.\n */\n\n function setStyle(element, styles) {\n var style = element.style;\n forEach(styles, function (value, property) {\n if (REGEXP_SUFFIX.test(property) && isNumber(value)) {\n value += 'px';\n }\n\n style[property] = value;\n });\n }\n /**\n * Escape a string for using in HTML.\n * @param {String} value - The string to escape.\n * @returns {String} Returns the escaped string.\n */\n\n function escapeHTMLEntities(value) {\n return isString(value) ? value.replace(/&(?!amp;|quot;|#39;|lt;|gt;)/g, '&').replace(/\"/g, '"').replace(/'/g, ''').replace(//g, '>') : value;\n }\n /**\n * Check if the given element has a special class.\n * @param {Element} element - The element to check.\n * @param {string} value - The class to search.\n * @returns {boolean} Returns `true` if the special class was found.\n */\n\n function hasClass(element, value) {\n if (!element || !value) {\n return false;\n }\n\n return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;\n }\n /**\n * Add classes to the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be added.\n */\n\n function addClass(element, value) {\n if (!element || !value) {\n return;\n }\n\n if (isNumber(element.length)) {\n forEach(element, function (elem) {\n addClass(elem, value);\n });\n return;\n }\n\n if (element.classList) {\n element.classList.add(value);\n return;\n }\n\n var className = element.className.trim();\n\n if (!className) {\n element.className = value;\n } else if (className.indexOf(value) < 0) {\n element.className = \"\".concat(className, \" \").concat(value);\n }\n }\n /**\n * Remove classes from the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be removed.\n */\n\n function removeClass(element, value) {\n if (!element || !value) {\n return;\n }\n\n if (isNumber(element.length)) {\n forEach(element, function (elem) {\n removeClass(elem, value);\n });\n return;\n }\n\n if (element.classList) {\n element.classList.remove(value);\n return;\n }\n\n if (element.className.indexOf(value) >= 0) {\n element.className = element.className.replace(value, '');\n }\n }\n /**\n * Add or remove classes from the given element.\n * @param {Element} element - The target element.\n * @param {string} value - The classes to be toggled.\n * @param {boolean} added - Add only.\n */\n\n function toggleClass(element, value, added) {\n if (!value) {\n return;\n }\n\n if (isNumber(element.length)) {\n forEach(element, function (elem) {\n toggleClass(elem, value, added);\n });\n return;\n } // IE10-11 doesn't support the second parameter of `classList.toggle`\n\n\n if (added) {\n addClass(element, value);\n } else {\n removeClass(element, value);\n }\n }\n var REGEXP_HYPHENATE = /([a-z\\d])([A-Z])/g;\n /**\n * Transform the given string from camelCase to kebab-case\n * @param {string} value - The value to transform.\n * @returns {string} The transformed value.\n */\n\n function hyphenate(value) {\n return value.replace(REGEXP_HYPHENATE, '$1-$2').toLowerCase();\n }\n /**\n * Get data from the given element.\n * @param {Element} element - The target element.\n * @param {string} name - The data key to get.\n * @returns {string} The data value.\n */\n\n function getData(element, name) {\n if (isObject(element[name])) {\n return element[name];\n }\n\n if (element.dataset) {\n return element.dataset[name];\n }\n\n return element.getAttribute(\"data-\".concat(hyphenate(name)));\n }\n /**\n * Set data to the given element.\n * @param {Element} element - The target element.\n * @param {string} name - The data key to set.\n * @param {string} data - The data value.\n */\n\n function setData(element, name, data) {\n if (isObject(data)) {\n element[name] = data;\n } else if (element.dataset) {\n element.dataset[name] = data;\n } else {\n element.setAttribute(\"data-\".concat(hyphenate(name)), data);\n }\n }\n\n var onceSupported = function () {\n var supported = false;\n\n if (IS_BROWSER) {\n var once = false;\n\n var listener = function listener() {};\n\n var options = Object.defineProperty({}, 'once', {\n get: function get() {\n supported = true;\n return once;\n },\n\n /**\n * This setter can fix a `TypeError` in strict mode\n * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}\n * @param {boolean} value - The value to set\n */\n set: function set(value) {\n once = value;\n }\n });\n WINDOW.addEventListener('test', listener, options);\n WINDOW.removeEventListener('test', listener, options);\n }\n\n return supported;\n }();\n /**\n * Remove event listener from the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Function} listener - The event listener.\n * @param {Object} options - The event options.\n */\n\n\n function removeListener(element, type, listener) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n var handler = listener;\n type.trim().split(REGEXP_SPACES).forEach(function (event) {\n if (!onceSupported) {\n var listeners = element.listeners;\n\n if (listeners && listeners[event] && listeners[event][listener]) {\n handler = listeners[event][listener];\n delete listeners[event][listener];\n\n if (Object.keys(listeners[event]).length === 0) {\n delete listeners[event];\n }\n\n if (Object.keys(listeners).length === 0) {\n delete element.listeners;\n }\n }\n }\n\n element.removeEventListener(event, handler, options);\n });\n }\n /**\n * Add event listener to the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Function} listener - The event listener.\n * @param {Object} options - The event options.\n */\n\n function addListener(element, type, listener) {\n var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};\n var _handler = listener;\n type.trim().split(REGEXP_SPACES).forEach(function (event) {\n if (options.once && !onceSupported) {\n var _element$listeners = element.listeners,\n listeners = _element$listeners === void 0 ? {} : _element$listeners;\n\n _handler = function handler() {\n delete listeners[event][listener];\n element.removeEventListener(event, _handler, options);\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n listener.apply(element, args);\n };\n\n if (!listeners[event]) {\n listeners[event] = {};\n }\n\n if (listeners[event][listener]) {\n element.removeEventListener(event, listeners[event][listener], options);\n }\n\n listeners[event][listener] = _handler;\n element.listeners = listeners;\n }\n\n element.addEventListener(event, _handler, options);\n });\n }\n /**\n * Dispatch event on the target element.\n * @param {Element} element - The event target.\n * @param {string} type - The event type(s).\n * @param {Object} data - The additional event data.\n * @returns {boolean} Indicate if the event is default prevented or not.\n */\n\n function dispatchEvent(element, type, data) {\n var event; // Event and CustomEvent on IE9-11 are global objects, not constructors\n\n if (isFunction(Event) && isFunction(CustomEvent)) {\n event = new CustomEvent(type, {\n detail: data,\n bubbles: true,\n cancelable: true\n });\n } else {\n event = document.createEvent('CustomEvent');\n event.initCustomEvent(type, true, true, data);\n }\n\n return element.dispatchEvent(event);\n }\n /**\n * Get the offset base on the document.\n * @param {Element} element - The target element.\n * @returns {Object} The offset data.\n */\n\n function getOffset(element) {\n var box = element.getBoundingClientRect();\n return {\n left: box.left + (window.pageXOffset - document.documentElement.clientLeft),\n top: box.top + (window.pageYOffset - document.documentElement.clientTop)\n };\n }\n /**\n * Get transforms base on the given object.\n * @param {Object} obj - The target object.\n * @returns {string} A string contains transform values.\n */\n\n function getTransforms(_ref) {\n var rotate = _ref.rotate,\n scaleX = _ref.scaleX,\n scaleY = _ref.scaleY,\n translateX = _ref.translateX,\n translateY = _ref.translateY;\n var values = [];\n\n if (isNumber(translateX) && translateX !== 0) {\n values.push(\"translateX(\".concat(translateX, \"px)\"));\n }\n\n if (isNumber(translateY) && translateY !== 0) {\n values.push(\"translateY(\".concat(translateY, \"px)\"));\n } // Rotate should come first before scale to match orientation transform\n\n\n if (isNumber(rotate) && rotate !== 0) {\n values.push(\"rotate(\".concat(rotate, \"deg)\"));\n }\n\n if (isNumber(scaleX) && scaleX !== 1) {\n values.push(\"scaleX(\".concat(scaleX, \")\"));\n }\n\n if (isNumber(scaleY) && scaleY !== 1) {\n values.push(\"scaleY(\".concat(scaleY, \")\"));\n }\n\n var transform = values.length ? values.join(' ') : 'none';\n return {\n WebkitTransform: transform,\n msTransform: transform,\n transform: transform\n };\n }\n /**\n * Get an image name from an image url.\n * @param {string} url - The target url.\n * @example\n * // picture.jpg\n * getImageNameFromURL('https://domain.com/path/to/picture.jpg?size=1280×960')\n * @returns {string} A string contains the image name.\n */\n\n function getImageNameFromURL(url) {\n return isString(url) ? decodeURIComponent(url.replace(/^.*\\//, '').replace(/[?&#].*$/, '')) : '';\n }\n var IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);\n /**\n * Get an image's natural sizes.\n * @param {string} image - The target image.\n * @param {Function} callback - The callback function.\n * @returns {HTMLImageElement} The new image.\n */\n\n function getImageNaturalSizes(image, callback) {\n var newImage = document.createElement('img'); // Modern browsers (except Safari)\n\n if (image.naturalWidth && !IS_SAFARI) {\n callback(image.naturalWidth, image.naturalHeight);\n return newImage;\n }\n\n var body = document.body || document.documentElement;\n\n newImage.onload = function () {\n callback(newImage.width, newImage.height);\n\n if (!IS_SAFARI) {\n body.removeChild(newImage);\n }\n };\n\n newImage.src = image.src; // iOS Safari will convert the image automatically\n // with its orientation once append it into DOM\n\n if (!IS_SAFARI) {\n newImage.style.cssText = 'left:0;' + 'max-height:none!important;' + 'max-width:none!important;' + 'min-height:0!important;' + 'min-width:0!important;' + 'opacity:0;' + 'position:absolute;' + 'top:0;' + 'z-index:-1;';\n body.appendChild(newImage);\n }\n\n return newImage;\n }\n /**\n * Get the related class name of a responsive type number.\n * @param {string} type - The responsive type.\n * @returns {string} The related class name.\n */\n\n function getResponsiveClass(type) {\n switch (type) {\n case 2:\n return CLASS_HIDE_XS_DOWN;\n\n case 3:\n return CLASS_HIDE_SM_DOWN;\n\n case 4:\n return CLASS_HIDE_MD_DOWN;\n\n default:\n return '';\n }\n }\n /**\n * Get the max ratio of a group of pointers.\n * @param {string} pointers - The target pointers.\n * @returns {number} The result ratio.\n */\n\n function getMaxZoomRatio(pointers) {\n var pointers2 = _objectSpread2({}, pointers);\n\n var ratios = [];\n forEach(pointers, function (pointer, pointerId) {\n delete pointers2[pointerId];\n forEach(pointers2, function (pointer2) {\n var x1 = Math.abs(pointer.startX - pointer2.startX);\n var y1 = Math.abs(pointer.startY - pointer2.startY);\n var x2 = Math.abs(pointer.endX - pointer2.endX);\n var y2 = Math.abs(pointer.endY - pointer2.endY);\n var z1 = Math.sqrt(x1 * x1 + y1 * y1);\n var z2 = Math.sqrt(x2 * x2 + y2 * y2);\n var ratio = (z2 - z1) / z1;\n ratios.push(ratio);\n });\n });\n ratios.sort(function (a, b) {\n return Math.abs(a) < Math.abs(b);\n });\n return ratios[0];\n }\n /**\n * Get a pointer from an event object.\n * @param {Object} event - The target event object.\n * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not.\n * @returns {Object} The result pointer contains start and/or end point coordinates.\n */\n\n function getPointer(_ref2, endOnly) {\n var pageX = _ref2.pageX,\n pageY = _ref2.pageY;\n var end = {\n endX: pageX,\n endY: pageY\n };\n return endOnly ? end : _objectSpread2({\n timeStamp: Date.now(),\n startX: pageX,\n startY: pageY\n }, end);\n }\n /**\n * Get the center point coordinate of a group of pointers.\n * @param {Object} pointers - The target pointers.\n * @returns {Object} The center point coordinate.\n */\n\n function getPointersCenter(pointers) {\n var pageX = 0;\n var pageY = 0;\n var count = 0;\n forEach(pointers, function (_ref3) {\n var startX = _ref3.startX,\n startY = _ref3.startY;\n pageX += startX;\n pageY += startY;\n count += 1;\n });\n pageX /= count;\n pageY /= count;\n return {\n pageX: pageX,\n pageY: pageY\n };\n }\n\n var render = {\n render: function render() {\n this.initContainer();\n this.initViewer();\n this.initList();\n this.renderViewer();\n },\n initContainer: function initContainer() {\n this.containerData = {\n width: window.innerWidth,\n height: window.innerHeight\n };\n },\n initViewer: function initViewer() {\n var options = this.options,\n parent = this.parent;\n var viewerData;\n\n if (options.inline) {\n viewerData = {\n width: Math.max(parent.offsetWidth, options.minWidth),\n height: Math.max(parent.offsetHeight, options.minHeight)\n };\n this.parentData = viewerData;\n }\n\n if (this.fulled || !viewerData) {\n viewerData = this.containerData;\n }\n\n this.viewerData = assign({}, viewerData);\n },\n renderViewer: function renderViewer() {\n if (this.options.inline && !this.fulled) {\n setStyle(this.viewer, this.viewerData);\n }\n },\n initList: function initList() {\n var _this = this;\n\n var element = this.element,\n options = this.options,\n list = this.list;\n var items = []; // initList may be called in this.update, so should keep idempotent\n\n list.innerHTML = '';\n forEach(this.images, function (image, index) {\n var src = image.src;\n var alt = image.alt || getImageNameFromURL(src);\n var url = options.url;\n\n if (isString(url)) {\n url = image.getAttribute(url);\n } else if (isFunction(url)) {\n url = url.call(_this, image);\n }\n\n if (src || url) {\n var item = document.createElement('li');\n var img = document.createElement('img');\n img.src = src || url;\n img.alt = alt;\n img.setAttribute('data-index', index);\n img.setAttribute('data-original-url', url || src);\n img.setAttribute('data-viewer-action', 'view');\n img.setAttribute('role', 'button');\n item.appendChild(img);\n list.appendChild(item);\n items.push(item);\n }\n });\n this.items = items;\n forEach(items, function (item) {\n var image = item.firstElementChild;\n setData(image, 'filled', true);\n\n if (options.loading) {\n addClass(item, CLASS_LOADING);\n }\n\n addListener(image, EVENT_LOAD, function (event) {\n if (options.loading) {\n removeClass(item, CLASS_LOADING);\n }\n\n _this.loadImage(event);\n }, {\n once: true\n });\n });\n\n if (options.transition) {\n addListener(element, EVENT_VIEWED, function () {\n addClass(list, CLASS_TRANSITION);\n }, {\n once: true\n });\n }\n },\n renderList: function renderList(index) {\n var i = index || this.index;\n var width = this.items[i].offsetWidth || 30;\n var outerWidth = width + 1; // 1 pixel of `margin-left` width\n // Place the active item in the center of the screen\n\n setStyle(this.list, assign({\n width: outerWidth * this.length\n }, getTransforms({\n translateX: (this.viewerData.width - width) / 2 - outerWidth * i\n })));\n },\n resetList: function resetList() {\n var list = this.list;\n list.innerHTML = '';\n removeClass(list, CLASS_TRANSITION);\n setStyle(list, getTransforms({\n translateX: 0\n }));\n },\n initImage: function initImage(done) {\n var _this2 = this;\n\n var options = this.options,\n image = this.image,\n viewerData = this.viewerData;\n var footerHeight = this.footer.offsetHeight;\n var viewerWidth = viewerData.width;\n var viewerHeight = Math.max(viewerData.height - footerHeight, footerHeight);\n var oldImageData = this.imageData || {};\n var sizingImage;\n this.imageInitializing = {\n abort: function abort() {\n sizingImage.onload = null;\n }\n };\n sizingImage = getImageNaturalSizes(image, function (naturalWidth, naturalHeight) {\n var aspectRatio = naturalWidth / naturalHeight;\n var width = viewerWidth;\n var height = viewerHeight;\n _this2.imageInitializing = false;\n\n if (viewerHeight * aspectRatio > viewerWidth) {\n height = viewerWidth / aspectRatio;\n } else {\n width = viewerHeight * aspectRatio;\n }\n\n width = Math.min(width * 0.9, naturalWidth);\n height = Math.min(height * 0.9, naturalHeight);\n var imageData = {\n naturalWidth: naturalWidth,\n naturalHeight: naturalHeight,\n aspectRatio: aspectRatio,\n ratio: width / naturalWidth,\n width: width,\n height: height,\n left: (viewerWidth - width) / 2,\n top: (viewerHeight - height) / 2\n };\n var initialImageData = assign({}, imageData);\n\n if (options.rotatable) {\n imageData.rotate = oldImageData.rotate || 0;\n initialImageData.rotate = 0;\n }\n\n if (options.scalable) {\n imageData.scaleX = oldImageData.scaleX || 1;\n imageData.scaleY = oldImageData.scaleY || 1;\n initialImageData.scaleX = 1;\n initialImageData.scaleY = 1;\n }\n\n _this2.imageData = imageData;\n _this2.initialImageData = initialImageData;\n\n if (done) {\n done();\n }\n });\n },\n renderImage: function renderImage(done) {\n var _this3 = this;\n\n var image = this.image,\n imageData = this.imageData;\n setStyle(image, assign({\n width: imageData.width,\n height: imageData.height,\n // XXX: Not to use translateX/Y to avoid image shaking when zooming\n marginLeft: imageData.left,\n marginTop: imageData.top\n }, getTransforms(imageData)));\n\n if (done) {\n if ((this.viewing || this.zooming) && this.options.transition) {\n var onTransitionEnd = function onTransitionEnd() {\n _this3.imageRendering = false;\n done();\n };\n\n this.imageRendering = {\n abort: function abort() {\n removeListener(image, EVENT_TRANSITION_END, onTransitionEnd);\n }\n };\n addListener(image, EVENT_TRANSITION_END, onTransitionEnd, {\n once: true\n });\n } else {\n done();\n }\n }\n },\n resetImage: function resetImage() {\n // this.image only defined after viewed\n if (this.viewing || this.viewed) {\n var image = this.image;\n\n if (this.viewing) {\n this.viewing.abort();\n }\n\n image.parentNode.removeChild(image);\n this.image = null;\n }\n }\n };\n\n var events = {\n bind: function bind() {\n var options = this.options,\n viewer = this.viewer,\n canvas = this.canvas;\n var document = this.element.ownerDocument;\n addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));\n addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));\n addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));\n addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));\n addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));\n addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));\n addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));\n\n if (options.zoomable && options.zoomOnWheel) {\n addListener(viewer, EVENT_WHEEL, this.onWheel = this.wheel.bind(this), {\n passive: false,\n capture: true\n });\n }\n\n if (options.toggleOnDblclick) {\n addListener(canvas, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this));\n }\n },\n unbind: function unbind() {\n var options = this.options,\n viewer = this.viewer,\n canvas = this.canvas;\n var document = this.element.ownerDocument;\n removeListener(viewer, EVENT_CLICK, this.onClick);\n removeListener(viewer, EVENT_DRAG_START, this.onDragStart);\n removeListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown);\n removeListener(document, EVENT_POINTER_MOVE, this.onPointerMove);\n removeListener(document, EVENT_POINTER_UP, this.onPointerUp);\n removeListener(document, EVENT_KEY_DOWN, this.onKeyDown);\n removeListener(window, EVENT_RESIZE, this.onResize);\n\n if (options.zoomable && options.zoomOnWheel) {\n removeListener(viewer, EVENT_WHEEL, this.onWheel, {\n passive: false,\n capture: true\n });\n }\n\n if (options.toggleOnDblclick) {\n removeListener(canvas, EVENT_DBLCLICK, this.onDblclick);\n }\n }\n };\n\n var handlers = {\n click: function click(event) {\n var target = event.target;\n var options = this.options,\n imageData = this.imageData;\n var action = getData(target, DATA_ACTION); // Cancel the emulated click when the native click event was triggered.\n\n if (IS_TOUCH_DEVICE && event.isTrusted && target === this.canvas) {\n clearTimeout(this.clickCanvasTimeout);\n }\n\n switch (action) {\n case 'mix':\n if (this.played) {\n this.stop();\n } else if (options.inline) {\n if (this.fulled) {\n this.exit();\n } else {\n this.full();\n }\n } else {\n this.hide();\n }\n\n break;\n\n case 'hide':\n this.hide();\n break;\n\n case 'view':\n this.view(getData(target, 'index'));\n break;\n\n case 'zoom-in':\n this.zoom(0.1, true);\n break;\n\n case 'zoom-out':\n this.zoom(-0.1, true);\n break;\n\n case 'one-to-one':\n this.toggle();\n break;\n\n case 'reset':\n this.reset();\n break;\n\n case 'prev':\n this.prev(options.loop);\n break;\n\n case 'play':\n this.play(options.fullscreen);\n break;\n\n case 'next':\n this.next(options.loop);\n break;\n\n case 'rotate-left':\n this.rotate(-90);\n break;\n\n case 'rotate-right':\n this.rotate(90);\n break;\n\n case 'flip-horizontal':\n this.scaleX(-imageData.scaleX || -1);\n break;\n\n case 'flip-vertical':\n this.scaleY(-imageData.scaleY || -1);\n break;\n\n default:\n if (this.played) {\n this.stop();\n }\n\n }\n },\n dblclick: function dblclick(event) {\n event.preventDefault();\n\n if (this.viewed && event.target === this.image) {\n // Cancel the emulated double click when the native dblclick event was triggered.\n if (IS_TOUCH_DEVICE && event.isTrusted) {\n clearTimeout(this.doubleClickImageTimeout);\n }\n\n this.toggle();\n }\n },\n load: function load() {\n var _this = this;\n\n if (this.timeout) {\n clearTimeout(this.timeout);\n this.timeout = false;\n }\n\n var element = this.element,\n options = this.options,\n image = this.image,\n index = this.index,\n viewerData = this.viewerData;\n removeClass(image, CLASS_INVISIBLE);\n\n if (options.loading) {\n removeClass(this.canvas, CLASS_LOADING);\n }\n\n image.style.cssText = 'height:0;' + \"margin-left:\".concat(viewerData.width / 2, \"px;\") + \"margin-top:\".concat(viewerData.height / 2, \"px;\") + 'max-width:none!important;' + 'position:absolute;' + 'width:0;';\n this.initImage(function () {\n toggleClass(image, CLASS_MOVE, options.movable);\n toggleClass(image, CLASS_TRANSITION, options.transition);\n\n _this.renderImage(function () {\n _this.viewed = true;\n _this.viewing = false;\n\n if (isFunction(options.viewed)) {\n addListener(element, EVENT_VIEWED, options.viewed, {\n once: true\n });\n }\n\n dispatchEvent(element, EVENT_VIEWED, {\n originalImage: _this.images[index],\n index: index,\n image: image\n });\n });\n });\n },\n loadImage: function loadImage(event) {\n var image = event.target;\n var parent = image.parentNode;\n var parentWidth = parent.offsetWidth || 30;\n var parentHeight = parent.offsetHeight || 50;\n var filled = !!getData(image, 'filled');\n getImageNaturalSizes(image, function (naturalWidth, naturalHeight) {\n var aspectRatio = naturalWidth / naturalHeight;\n var width = parentWidth;\n var height = parentHeight;\n\n if (parentHeight * aspectRatio > parentWidth) {\n if (filled) {\n width = parentHeight * aspectRatio;\n } else {\n height = parentWidth / aspectRatio;\n }\n } else if (filled) {\n height = parentWidth / aspectRatio;\n } else {\n width = parentHeight * aspectRatio;\n }\n\n setStyle(image, assign({\n width: width,\n height: height\n }, getTransforms({\n translateX: (parentWidth - width) / 2,\n translateY: (parentHeight - height) / 2\n })));\n });\n },\n keydown: function keydown(event) {\n var options = this.options;\n\n if (!this.fulled || !options.keyboard) {\n return;\n }\n\n switch (event.keyCode || event.which || event.charCode) {\n // Escape\n case 27:\n if (this.played) {\n this.stop();\n } else if (options.inline) {\n if (this.fulled) {\n this.exit();\n }\n } else {\n this.hide();\n }\n\n break;\n // Space\n\n case 32:\n if (this.played) {\n this.stop();\n }\n\n break;\n // ArrowLeft\n\n case 37:\n this.prev(options.loop);\n break;\n // ArrowUp\n\n case 38:\n // Prevent scroll on Firefox\n event.preventDefault(); // Zoom in\n\n this.zoom(options.zoomRatio, true);\n break;\n // ArrowRight\n\n case 39:\n this.next(options.loop);\n break;\n // ArrowDown\n\n case 40:\n // Prevent scroll on Firefox\n event.preventDefault(); // Zoom out\n\n this.zoom(-options.zoomRatio, true);\n break;\n // Ctrl + 0\n\n case 48: // Fall through\n // Ctrl + 1\n // eslint-disable-next-line no-fallthrough\n\n case 49:\n if (event.ctrlKey) {\n event.preventDefault();\n this.toggle();\n }\n\n break;\n }\n },\n dragstart: function dragstart(event) {\n if (event.target.tagName.toLowerCase() === 'img') {\n event.preventDefault();\n }\n },\n pointerdown: function pointerdown(event) {\n var options = this.options,\n pointers = this.pointers;\n var buttons = event.buttons,\n button = event.button;\n\n if (!this.viewed || this.showing || this.viewing || this.hiding // Handle mouse event and pointer event and ignore touch event\n || (event.type === 'mousedown' || event.type === 'pointerdown' && event.pointerType === 'mouse') && ( // No primary button (Usually the left button)\n isNumber(buttons) && buttons !== 1 || isNumber(button) && button !== 0 // Open context menu\n || event.ctrlKey)) {\n return;\n } // Prevent default behaviours as page zooming in touch devices.\n\n\n event.preventDefault();\n\n if (event.changedTouches) {\n forEach(event.changedTouches, function (touch) {\n pointers[touch.identifier] = getPointer(touch);\n });\n } else {\n pointers[event.pointerId || 0] = getPointer(event);\n }\n\n var action = options.movable ? ACTION_MOVE : false;\n\n if (options.zoomOnTouch && options.zoomable && Object.keys(pointers).length > 1) {\n action = ACTION_ZOOM;\n } else if (options.slideOnTouch && (event.pointerType === 'touch' || event.type === 'touchstart') && this.isSwitchable()) {\n action = ACTION_SWITCH;\n }\n\n if (options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {\n removeClass(this.image, CLASS_TRANSITION);\n }\n\n this.action = action;\n },\n pointermove: function pointermove(event) {\n var pointers = this.pointers,\n action = this.action;\n\n if (!this.viewed || !action) {\n return;\n }\n\n event.preventDefault();\n\n if (event.changedTouches) {\n forEach(event.changedTouches, function (touch) {\n assign(pointers[touch.identifier] || {}, getPointer(touch, true));\n });\n } else {\n assign(pointers[event.pointerId || 0] || {}, getPointer(event, true));\n }\n\n this.change(event);\n },\n pointerup: function pointerup(event) {\n var _this2 = this;\n\n var options = this.options,\n action = this.action,\n pointers = this.pointers;\n var pointer;\n\n if (event.changedTouches) {\n forEach(event.changedTouches, function (touch) {\n pointer = pointers[touch.identifier];\n delete pointers[touch.identifier];\n });\n } else {\n pointer = pointers[event.pointerId || 0];\n delete pointers[event.pointerId || 0];\n }\n\n if (!action) {\n return;\n }\n\n event.preventDefault();\n\n if (options.transition && (action === ACTION_MOVE || action === ACTION_ZOOM)) {\n addClass(this.image, CLASS_TRANSITION);\n }\n\n this.action = false; // Emulate click and double click in touch devices to support backdrop and image zooming (#210).\n\n if (IS_TOUCH_DEVICE && action !== ACTION_ZOOM && pointer && Date.now() - pointer.timeStamp < 500) {\n clearTimeout(this.clickCanvasTimeout);\n clearTimeout(this.doubleClickImageTimeout);\n\n if (options.toggleOnDblclick && this.viewed && event.target === this.image) {\n if (this.imageClicked) {\n this.imageClicked = false; // This timeout will be cleared later when a native dblclick event is triggering\n\n this.doubleClickImageTimeout = setTimeout(function () {\n dispatchEvent(_this2.image, EVENT_DBLCLICK);\n }, 50);\n } else {\n this.imageClicked = true; // The default timing of a double click in Windows is 500 ms\n\n this.doubleClickImageTimeout = setTimeout(function () {\n _this2.imageClicked = false;\n }, 500);\n }\n } else {\n this.imageClicked = false;\n\n if (options.backdrop && options.backdrop !== 'static' && event.target === this.canvas) {\n // This timeout will be cleared later when a native click event is triggering\n this.clickCanvasTimeout = setTimeout(function () {\n dispatchEvent(_this2.canvas, EVENT_CLICK);\n }, 50);\n }\n }\n }\n },\n resize: function resize() {\n var _this3 = this;\n\n if (!this.isShown || this.hiding) {\n return;\n }\n\n this.initContainer();\n this.initViewer();\n this.renderViewer();\n this.renderList();\n\n if (this.viewed) {\n this.initImage(function () {\n _this3.renderImage();\n });\n }\n\n if (this.played) {\n if (this.options.fullscreen && this.fulled && !(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {\n this.stop();\n return;\n }\n\n forEach(this.player.getElementsByTagName('img'), function (image) {\n addListener(image, EVENT_LOAD, _this3.loadImage.bind(_this3), {\n once: true\n });\n dispatchEvent(image, EVENT_LOAD);\n });\n }\n },\n wheel: function wheel(event) {\n var _this4 = this;\n\n if (!this.viewed) {\n return;\n }\n\n event.preventDefault(); // Limit wheel speed to prevent zoom too fast\n\n if (this.wheeling) {\n return;\n }\n\n this.wheeling = true;\n setTimeout(function () {\n _this4.wheeling = false;\n }, 50);\n var ratio = Number(this.options.zoomRatio) || 0.1;\n var delta = 1;\n\n if (event.deltaY) {\n delta = event.deltaY > 0 ? 1 : -1;\n } else if (event.wheelDelta) {\n delta = -event.wheelDelta / 120;\n } else if (event.detail) {\n delta = event.detail > 0 ? 1 : -1;\n }\n\n this.zoom(-delta * ratio, true, event);\n }\n };\n\n var methods = {\n /** Show the viewer (only available in modal mode)\n * @param {boolean} [immediate=false] - Indicates if show the viewer immediately or not.\n * @returns {Viewer} this\n */\n show: function show() {\n var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var element = this.element,\n options = this.options;\n\n if (options.inline || this.showing || this.isShown || this.showing) {\n return this;\n }\n\n if (!this.ready) {\n this.build();\n\n if (this.ready) {\n this.show(immediate);\n }\n\n return this;\n }\n\n if (isFunction(options.show)) {\n addListener(element, EVENT_SHOW, options.show, {\n once: true\n });\n }\n\n if (dispatchEvent(element, EVENT_SHOW) === false || !this.ready) {\n return this;\n }\n\n if (this.hiding) {\n this.transitioning.abort();\n }\n\n this.showing = true;\n this.open();\n var viewer = this.viewer;\n removeClass(viewer, CLASS_HIDE);\n\n if (options.transition && !immediate) {\n var shown = this.shown.bind(this);\n this.transitioning = {\n abort: function abort() {\n removeListener(viewer, EVENT_TRANSITION_END, shown);\n removeClass(viewer, CLASS_IN);\n }\n };\n addClass(viewer, CLASS_TRANSITION); // Force reflow to enable CSS3 transition\n\n viewer.initialOffsetWidth = viewer.offsetWidth;\n addListener(viewer, EVENT_TRANSITION_END, shown, {\n once: true\n });\n addClass(viewer, CLASS_IN);\n } else {\n addClass(viewer, CLASS_IN);\n this.shown();\n }\n\n return this;\n },\n\n /**\n * Hide the viewer (only available in modal mode)\n * @param {boolean} [immediate=false] - Indicates if hide the viewer immediately or not.\n * @returns {Viewer} this\n */\n hide: function hide() {\n var immediate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var element = this.element,\n options = this.options;\n\n if (options.inline || this.hiding || !(this.isShown || this.showing)) {\n return this;\n }\n\n if (isFunction(options.hide)) {\n addListener(element, EVENT_HIDE, options.hide, {\n once: true\n });\n }\n\n if (dispatchEvent(element, EVENT_HIDE) === false) {\n return this;\n }\n\n if (this.showing) {\n this.transitioning.abort();\n }\n\n this.hiding = true;\n\n if (this.played) {\n this.stop();\n } else if (this.viewing) {\n this.viewing.abort();\n }\n\n var viewer = this.viewer;\n\n if (options.transition && !immediate) {\n var hidden = this.hidden.bind(this);\n\n var hide = function hide() {\n // XXX: It seems the `event.stopPropagation()` method does not work here\n setTimeout(function () {\n addListener(viewer, EVENT_TRANSITION_END, hidden, {\n once: true\n });\n removeClass(viewer, CLASS_IN);\n }, 0);\n };\n\n this.transitioning = {\n abort: function abort() {\n if (this.viewed) {\n removeListener(this.image, EVENT_TRANSITION_END, hide);\n } else {\n removeListener(viewer, EVENT_TRANSITION_END, hidden);\n }\n }\n }; // Note that the `CLASS_TRANSITION` class will be removed on pointer down (#255)\n\n if (this.viewed && hasClass(this.image, CLASS_TRANSITION)) {\n addListener(this.image, EVENT_TRANSITION_END, hide, {\n once: true\n });\n this.zoomTo(0, false, false, true);\n } else {\n hide();\n }\n } else {\n removeClass(viewer, CLASS_IN);\n this.hidden();\n }\n\n return this;\n },\n\n /**\n * View one of the images with image's index\n * @param {number} index - The index of the image to view.\n * @returns {Viewer} this\n */\n view: function view() {\n var _this = this;\n\n var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.initialViewIndex;\n index = Number(index) || 0;\n\n if (this.hiding || this.played || index < 0 || index >= this.length || this.viewed && index === this.index) {\n return this;\n }\n\n if (!this.isShown) {\n this.index = index;\n return this.show();\n }\n\n if (this.viewing) {\n this.viewing.abort();\n }\n\n var element = this.element,\n options = this.options,\n title = this.title,\n canvas = this.canvas;\n var item = this.items[index];\n var img = item.querySelector('img');\n var url = getData(img, 'originalUrl');\n var alt = img.getAttribute('alt');\n var image = document.createElement('img');\n image.src = url;\n image.alt = alt;\n\n if (isFunction(options.view)) {\n addListener(element, EVENT_VIEW, options.view, {\n once: true\n });\n }\n\n if (dispatchEvent(element, EVENT_VIEW, {\n originalImage: this.images[index],\n index: index,\n image: image\n }) === false || !this.isShown || this.hiding || this.played) {\n return this;\n }\n\n this.image = image;\n removeClass(this.items[this.index], CLASS_ACTIVE);\n addClass(item, CLASS_ACTIVE);\n this.viewed = false;\n this.index = index;\n this.imageData = {};\n addClass(image, CLASS_INVISIBLE);\n\n if (options.loading) {\n addClass(canvas, CLASS_LOADING);\n }\n\n canvas.innerHTML = '';\n canvas.appendChild(image); // Center current item\n\n this.renderList(); // Clear title\n\n title.innerHTML = ''; // Generate title after viewed\n\n var onViewed = function onViewed() {\n var imageData = _this.imageData;\n var render = Array.isArray(options.title) ? options.title[1] : options.title;\n title.innerHTML = escapeHTMLEntities(isFunction(render) ? render.call(_this, image, imageData) : \"\".concat(alt, \" (\").concat(imageData.naturalWidth, \" \\xD7 \").concat(imageData.naturalHeight, \")\"));\n };\n\n var onLoad;\n addListener(element, EVENT_VIEWED, onViewed, {\n once: true\n });\n this.viewing = {\n abort: function abort() {\n removeListener(element, EVENT_VIEWED, onViewed);\n\n if (image.complete) {\n if (this.imageRendering) {\n this.imageRendering.abort();\n } else if (this.imageInitializing) {\n this.imageInitializing.abort();\n }\n } else {\n // Cancel download to save bandwidth.\n image.src = '';\n removeListener(image, EVENT_LOAD, onLoad);\n\n if (this.timeout) {\n clearTimeout(this.timeout);\n }\n }\n }\n };\n\n if (image.complete) {\n this.load();\n } else {\n addListener(image, EVENT_LOAD, onLoad = this.load.bind(this), {\n once: true\n });\n\n if (this.timeout) {\n clearTimeout(this.timeout);\n } // Make the image visible if it fails to load within 1s\n\n\n this.timeout = setTimeout(function () {\n removeClass(image, CLASS_INVISIBLE);\n _this.timeout = false;\n }, 1000);\n }\n\n return this;\n },\n\n /**\n * View the previous image\n * @param {boolean} [loop=false] - Indicate if view the last one\n * when it is the first one at present.\n * @returns {Viewer} this\n */\n prev: function prev() {\n var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var index = this.index - 1;\n\n if (index < 0) {\n index = loop ? this.length - 1 : 0;\n }\n\n this.view(index);\n return this;\n },\n\n /**\n * View the next image\n * @param {boolean} [loop=false] - Indicate if view the first one\n * when it is the last one at present.\n * @returns {Viewer} this\n */\n next: function next() {\n var loop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n var maxIndex = this.length - 1;\n var index = this.index + 1;\n\n if (index > maxIndex) {\n index = loop ? 0 : maxIndex;\n }\n\n this.view(index);\n return this;\n },\n\n /**\n * Move the image with relative offsets.\n * @param {number} offsetX - The relative offset distance on the x-axis.\n * @param {number} offsetY - The relative offset distance on the y-axis.\n * @returns {Viewer} this\n */\n move: function move(offsetX, offsetY) {\n var imageData = this.imageData;\n this.moveTo(isUndefined(offsetX) ? offsetX : imageData.left + Number(offsetX), isUndefined(offsetY) ? offsetY : imageData.top + Number(offsetY));\n return this;\n },\n\n /**\n * Move the image to an absolute point.\n * @param {number} x - The x-axis coordinate.\n * @param {number} [y=x] - The y-axis coordinate.\n * @returns {Viewer} this\n */\n moveTo: function moveTo(x) {\n var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;\n var imageData = this.imageData;\n x = Number(x);\n y = Number(y);\n\n if (this.viewed && !this.played && this.options.movable) {\n var changed = false;\n\n if (isNumber(x)) {\n imageData.left = x;\n changed = true;\n }\n\n if (isNumber(y)) {\n imageData.top = y;\n changed = true;\n }\n\n if (changed) {\n this.renderImage();\n }\n }\n\n return this;\n },\n\n /**\n * Zoom the image with a relative ratio.\n * @param {number} ratio - The target ratio.\n * @param {boolean} [hasTooltip=false] - Indicates if it has a tooltip or not.\n * @param {Event} [_originalEvent=null] - The original event if any.\n * @returns {Viewer} this\n */\n zoom: function zoom(ratio) {\n var hasTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n\n var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;\n\n var imageData = this.imageData;\n ratio = Number(ratio);\n\n if (ratio < 0) {\n ratio = 1 / (1 - ratio);\n } else {\n ratio = 1 + ratio;\n }\n\n this.zoomTo(imageData.width * ratio / imageData.naturalWidth, hasTooltip, _originalEvent);\n return this;\n },\n\n /**\n * Zoom the image to an absolute ratio.\n * @param {number} ratio - The target ratio.\n * @param {boolean} [hasTooltip=false] - Indicates if it has a tooltip or not.\n * @param {Event} [_originalEvent=null] - The original event if any.\n * @param {Event} [_zoomable=false] - Indicates if the current zoom is available or not.\n * @returns {Viewer} this\n */\n zoomTo: function zoomTo(ratio) {\n var _this2 = this;\n\n var hasTooltip = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n\n var _originalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;\n\n var _zoomable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;\n\n var element = this.element,\n options = this.options,\n pointers = this.pointers,\n imageData = this.imageData;\n var width = imageData.width,\n height = imageData.height,\n left = imageData.left,\n top = imageData.top,\n naturalWidth = imageData.naturalWidth,\n naturalHeight = imageData.naturalHeight;\n ratio = Math.max(0, ratio);\n\n if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {\n if (!_zoomable) {\n var minZoomRatio = Math.max(0.01, options.minZoomRatio);\n var maxZoomRatio = Math.min(100, options.maxZoomRatio);\n ratio = Math.min(Math.max(ratio, minZoomRatio), maxZoomRatio);\n }\n\n if (_originalEvent && ratio > 0.95 && ratio < 1.05) {\n ratio = 1;\n }\n\n var newWidth = naturalWidth * ratio;\n var newHeight = naturalHeight * ratio;\n var offsetWidth = newWidth - width;\n var offsetHeight = newHeight - height;\n var oldRatio = width / naturalWidth;\n\n if (isFunction(options.zoom)) {\n addListener(element, EVENT_ZOOM, options.zoom, {\n once: true\n });\n }\n\n if (dispatchEvent(element, EVENT_ZOOM, {\n ratio: ratio,\n oldRatio: oldRatio,\n originalEvent: _originalEvent\n }) === false) {\n return this;\n }\n\n this.zooming = true;\n\n if (_originalEvent) {\n var offset = getOffset(this.viewer);\n var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {\n pageX: _originalEvent.pageX,\n pageY: _originalEvent.pageY\n }; // Zoom from the triggering point of the event\n\n imageData.left -= offsetWidth * ((center.pageX - offset.left - left) / width);\n imageData.top -= offsetHeight * ((center.pageY - offset.top - top) / height);\n } else {\n // Zoom from the center of the image\n imageData.left -= offsetWidth / 2;\n imageData.top -= offsetHeight / 2;\n }\n\n imageData.width = newWidth;\n imageData.height = newHeight;\n imageData.ratio = ratio;\n this.renderImage(function () {\n _this2.zooming = false;\n\n if (isFunction(options.zoomed)) {\n addListener(element, EVENT_ZOOMED, options.zoomed, {\n once: true\n });\n }\n\n dispatchEvent(element, EVENT_ZOOMED, {\n ratio: ratio,\n oldRatio: oldRatio,\n originalEvent: _originalEvent\n });\n });\n\n if (hasTooltip) {\n this.tooltip();\n }\n }\n\n return this;\n },\n\n /**\n * Rotate the image with a relative degree.\n * @param {number} degree - The rotate degree.\n * @returns {Viewer} this\n */\n rotate: function rotate(degree) {\n this.rotateTo((this.imageData.rotate || 0) + Number(degree));\n return this;\n },\n\n /**\n * Rotate the image to an absolute degree.\n * @param {number} degree - The rotate degree.\n * @returns {Viewer} this\n */\n rotateTo: function rotateTo(degree) {\n var imageData = this.imageData;\n degree = Number(degree);\n\n if (isNumber(degree) && this.viewed && !this.played && this.options.rotatable) {\n imageData.rotate = degree;\n this.renderImage();\n }\n\n return this;\n },\n\n /**\n * Scale the image on the x-axis.\n * @param {number} scaleX - The scale ratio on the x-axis.\n * @returns {Viewer} this\n */\n scaleX: function scaleX(_scaleX) {\n this.scale(_scaleX, this.imageData.scaleY);\n return this;\n },\n\n /**\n * Scale the image on the y-axis.\n * @param {number} scaleY - The scale ratio on the y-axis.\n * @returns {Viewer} this\n */\n scaleY: function scaleY(_scaleY) {\n this.scale(this.imageData.scaleX, _scaleY);\n return this;\n },\n\n /**\n * Scale the image.\n * @param {number} scaleX - The scale ratio on the x-axis.\n * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.\n * @returns {Viewer} this\n */\n scale: function scale(scaleX) {\n var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;\n var imageData = this.imageData;\n scaleX = Number(scaleX);\n scaleY = Number(scaleY);\n\n if (this.viewed && !this.played && this.options.scalable) {\n var changed = false;\n\n if (isNumber(scaleX)) {\n imageData.scaleX = scaleX;\n changed = true;\n }\n\n if (isNumber(scaleY)) {\n imageData.scaleY = scaleY;\n changed = true;\n }\n\n if (changed) {\n this.renderImage();\n }\n }\n\n return this;\n },\n\n /**\n * Play the images\n * @param {boolean} [fullscreen=false] - Indicate if request fullscreen or not.\n * @returns {Viewer} this\n */\n play: function play() {\n var _this3 = this;\n\n var fullscreen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n if (!this.isShown || this.played) {\n return this;\n }\n\n var options = this.options,\n player = this.player;\n var onLoad = this.loadImage.bind(this);\n var list = [];\n var total = 0;\n var index = 0;\n this.played = true;\n this.onLoadWhenPlay = onLoad;\n\n if (fullscreen) {\n this.requestFullscreen();\n }\n\n addClass(player, CLASS_SHOW);\n forEach(this.items, function (item, i) {\n var img = item.querySelector('img');\n var image = document.createElement('img');\n image.src = getData(img, 'originalUrl');\n image.alt = img.getAttribute('alt');\n total += 1;\n addClass(image, CLASS_FADE);\n toggleClass(image, CLASS_TRANSITION, options.transition);\n\n if (hasClass(item, CLASS_ACTIVE)) {\n addClass(image, CLASS_IN);\n index = i;\n }\n\n list.push(image);\n addListener(image, EVENT_LOAD, onLoad, {\n once: true\n });\n player.appendChild(image);\n });\n\n if (isNumber(options.interval) && options.interval > 0) {\n var play = function play() {\n _this3.playing = setTimeout(function () {\n removeClass(list[index], CLASS_IN);\n index += 1;\n index = index < total ? index : 0;\n addClass(list[index], CLASS_IN);\n play();\n }, options.interval);\n };\n\n if (total > 1) {\n play();\n }\n }\n\n return this;\n },\n // Stop play\n stop: function stop() {\n var _this4 = this;\n\n if (!this.played) {\n return this;\n }\n\n var player = this.player;\n this.played = false;\n clearTimeout(this.playing);\n forEach(player.getElementsByTagName('img'), function (image) {\n removeListener(image, EVENT_LOAD, _this4.onLoadWhenPlay);\n });\n removeClass(player, CLASS_SHOW);\n player.innerHTML = '';\n this.exitFullscreen();\n return this;\n },\n // Enter modal mode (only available in inline mode)\n full: function full() {\n var _this5 = this;\n\n var options = this.options,\n viewer = this.viewer,\n image = this.image,\n list = this.list;\n\n if (!this.isShown || this.played || this.fulled || !options.inline) {\n return this;\n }\n\n this.fulled = true;\n this.open();\n addClass(this.button, CLASS_FULLSCREEN_EXIT);\n\n if (options.transition) {\n removeClass(list, CLASS_TRANSITION);\n\n if (this.viewed) {\n removeClass(image, CLASS_TRANSITION);\n }\n }\n\n addClass(viewer, CLASS_FIXED);\n viewer.setAttribute('style', '');\n setStyle(viewer, {\n zIndex: options.zIndex\n });\n this.initContainer();\n this.viewerData = assign({}, this.containerData);\n this.renderList();\n\n if (this.viewed) {\n this.initImage(function () {\n _this5.renderImage(function () {\n if (options.transition) {\n setTimeout(function () {\n addClass(image, CLASS_TRANSITION);\n addClass(list, CLASS_TRANSITION);\n }, 0);\n }\n });\n });\n }\n\n return this;\n },\n // Exit modal mode (only available in inline mode)\n exit: function exit() {\n var _this6 = this;\n\n var options = this.options,\n viewer = this.viewer,\n image = this.image,\n list = this.list;\n\n if (!this.isShown || this.played || !this.fulled || !options.inline) {\n return this;\n }\n\n this.fulled = false;\n this.close();\n removeClass(this.button, CLASS_FULLSCREEN_EXIT);\n\n if (options.transition) {\n removeClass(list, CLASS_TRANSITION);\n\n if (this.viewed) {\n removeClass(image, CLASS_TRANSITION);\n }\n }\n\n removeClass(viewer, CLASS_FIXED);\n setStyle(viewer, {\n zIndex: options.zIndexInline\n });\n this.viewerData = assign({}, this.parentData);\n this.renderViewer();\n this.renderList();\n\n if (this.viewed) {\n this.initImage(function () {\n _this6.renderImage(function () {\n if (options.transition) {\n setTimeout(function () {\n addClass(image, CLASS_TRANSITION);\n addClass(list, CLASS_TRANSITION);\n }, 0);\n }\n });\n });\n }\n\n return this;\n },\n // Show the current ratio of the image with percentage\n tooltip: function tooltip() {\n var _this7 = this;\n\n var options = this.options,\n tooltipBox = this.tooltipBox,\n imageData = this.imageData;\n\n if (!this.viewed || this.played || !options.tooltip) {\n return this;\n }\n\n tooltipBox.textContent = \"\".concat(Math.round(imageData.ratio * 100), \"%\");\n\n if (!this.tooltipping) {\n if (options.transition) {\n if (this.fading) {\n dispatchEvent(tooltipBox, EVENT_TRANSITION_END);\n }\n\n addClass(tooltipBox, CLASS_SHOW);\n addClass(tooltipBox, CLASS_FADE);\n addClass(tooltipBox, CLASS_TRANSITION); // Force reflow to enable CSS3 transition\n\n tooltipBox.initialOffsetWidth = tooltipBox.offsetWidth;\n addClass(tooltipBox, CLASS_IN);\n } else {\n addClass(tooltipBox, CLASS_SHOW);\n }\n } else {\n clearTimeout(this.tooltipping);\n }\n\n this.tooltipping = setTimeout(function () {\n if (options.transition) {\n addListener(tooltipBox, EVENT_TRANSITION_END, function () {\n removeClass(tooltipBox, CLASS_SHOW);\n removeClass(tooltipBox, CLASS_FADE);\n removeClass(tooltipBox, CLASS_TRANSITION);\n _this7.fading = false;\n }, {\n once: true\n });\n removeClass(tooltipBox, CLASS_IN);\n _this7.fading = true;\n } else {\n removeClass(tooltipBox, CLASS_SHOW);\n }\n\n _this7.tooltipping = false;\n }, 1000);\n return this;\n },\n // Toggle the image size between its natural size and initial size\n toggle: function toggle() {\n if (this.imageData.ratio === 1) {\n this.zoomTo(this.initialImageData.ratio, true);\n } else {\n this.zoomTo(1, true);\n }\n\n return this;\n },\n // Reset the image to its initial state\n reset: function reset() {\n if (this.viewed && !this.played) {\n this.imageData = assign({}, this.initialImageData);\n this.renderImage();\n }\n\n return this;\n },\n // Update viewer when images changed\n update: function update() {\n var element = this.element,\n options = this.options,\n isImg = this.isImg; // Destroy viewer if the target image was deleted\n\n if (isImg && !element.parentNode) {\n return this.destroy();\n }\n\n var images = [];\n forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {\n if (options.filter) {\n if (options.filter(image)) {\n images.push(image);\n }\n } else {\n images.push(image);\n }\n });\n\n if (!images.length) {\n return this;\n }\n\n this.images = images;\n this.length = images.length;\n\n if (this.ready) {\n var indexes = [];\n forEach(this.items, function (item, i) {\n var img = item.querySelector('img');\n var image = images[i];\n\n if (image && img) {\n if (image.src !== img.src) {\n indexes.push(i);\n }\n } else {\n indexes.push(i);\n }\n });\n setStyle(this.list, {\n width: 'auto'\n });\n this.initList();\n\n if (this.isShown) {\n if (this.length) {\n if (this.viewed) {\n var index = indexes.indexOf(this.index);\n\n if (index >= 0) {\n this.viewed = false;\n this.view(Math.max(this.index - (index + 1), 0));\n } else {\n addClass(this.items[this.index], CLASS_ACTIVE);\n }\n }\n } else {\n this.image = null;\n this.viewed = false;\n this.index = 0;\n this.imageData = {};\n this.canvas.innerHTML = '';\n this.title.innerHTML = '';\n }\n }\n } else {\n this.build();\n }\n\n return this;\n },\n // Destroy the viewer\n destroy: function destroy() {\n var element = this.element,\n options = this.options;\n\n if (!element[NAMESPACE]) {\n return this;\n }\n\n this.destroyed = true;\n\n if (this.ready) {\n if (this.played) {\n this.stop();\n }\n\n if (options.inline) {\n if (this.fulled) {\n this.exit();\n }\n\n this.unbind();\n } else if (this.isShown) {\n if (this.viewing) {\n if (this.imageRendering) {\n this.imageRendering.abort();\n } else if (this.imageInitializing) {\n this.imageInitializing.abort();\n }\n }\n\n if (this.hiding) {\n this.transitioning.abort();\n }\n\n this.hidden();\n } else if (this.showing) {\n this.transitioning.abort();\n this.hidden();\n }\n\n this.ready = false;\n this.viewer.parentNode.removeChild(this.viewer);\n } else if (options.inline) {\n if (this.delaying) {\n this.delaying.abort();\n } else if (this.initializing) {\n this.initializing.abort();\n }\n }\n\n if (!options.inline) {\n removeListener(element, EVENT_CLICK, this.onStart);\n }\n\n element[NAMESPACE] = undefined;\n return this;\n }\n };\n\n var others = {\n open: function open() {\n var body = this.body;\n addClass(body, CLASS_OPEN);\n body.style.paddingRight = \"\".concat(this.scrollbarWidth + (parseFloat(this.initialBodyPaddingRight) || 0), \"px\");\n },\n close: function close() {\n var body = this.body;\n removeClass(body, CLASS_OPEN);\n body.style.paddingRight = this.initialBodyPaddingRight;\n },\n shown: function shown() {\n var element = this.element,\n options = this.options;\n this.fulled = true;\n this.isShown = true;\n this.render();\n this.bind();\n this.showing = false;\n\n if (isFunction(options.shown)) {\n addListener(element, EVENT_SHOWN, options.shown, {\n once: true\n });\n }\n\n if (dispatchEvent(element, EVENT_SHOWN) === false) {\n return;\n }\n\n if (this.ready && this.isShown && !this.hiding) {\n this.view(this.index);\n }\n },\n hidden: function hidden() {\n var element = this.element,\n options = this.options;\n this.fulled = false;\n this.viewed = false;\n this.isShown = false;\n this.close();\n this.unbind();\n addClass(this.viewer, CLASS_HIDE);\n this.resetList();\n this.resetImage();\n this.hiding = false;\n\n if (!this.destroyed) {\n if (isFunction(options.hidden)) {\n addListener(element, EVENT_HIDDEN, options.hidden, {\n once: true\n });\n }\n\n dispatchEvent(element, EVENT_HIDDEN);\n }\n },\n requestFullscreen: function requestFullscreen() {\n var document = this.element.ownerDocument;\n\n if (this.fulled && !(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {\n var documentElement = document.documentElement; // Element.requestFullscreen()\n\n if (documentElement.requestFullscreen) {\n documentElement.requestFullscreen();\n } else if (documentElement.webkitRequestFullscreen) {\n documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);\n } else if (documentElement.mozRequestFullScreen) {\n documentElement.mozRequestFullScreen();\n } else if (documentElement.msRequestFullscreen) {\n documentElement.msRequestFullscreen();\n }\n }\n },\n exitFullscreen: function exitFullscreen() {\n var document = this.element.ownerDocument;\n\n if (this.fulled && (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {\n // Document.exitFullscreen()\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if (document.webkitExitFullscreen) {\n document.webkitExitFullscreen();\n } else if (document.mozCancelFullScreen) {\n document.mozCancelFullScreen();\n } else if (document.msExitFullscreen) {\n document.msExitFullscreen();\n }\n }\n },\n change: function change(event) {\n var options = this.options,\n pointers = this.pointers;\n var pointer = pointers[Object.keys(pointers)[0]];\n var offsetX = pointer.endX - pointer.startX;\n var offsetY = pointer.endY - pointer.startY;\n\n switch (this.action) {\n // Move the current image\n case ACTION_MOVE:\n this.move(offsetX, offsetY);\n break;\n // Zoom the current image\n\n case ACTION_ZOOM:\n this.zoom(getMaxZoomRatio(pointers), false, event);\n break;\n\n case ACTION_SWITCH:\n {\n this.action = 'switched';\n var absoluteOffsetX = Math.abs(offsetX);\n\n if (absoluteOffsetX > 1 && absoluteOffsetX > Math.abs(offsetY)) {\n // Empty `pointers` as `touchend` event will not be fired after swiped in iOS browsers.\n this.pointers = {};\n\n if (offsetX > 1) {\n this.prev(options.loop);\n } else if (offsetX < -1) {\n this.next(options.loop);\n }\n }\n\n break;\n }\n } // Override\n\n\n forEach(pointers, function (p) {\n p.startX = p.endX;\n p.startY = p.endY;\n });\n },\n isSwitchable: function isSwitchable() {\n var imageData = this.imageData,\n viewerData = this.viewerData;\n return this.length > 1 && imageData.left >= 0 && imageData.top >= 0 && imageData.width <= viewerData.width && imageData.height <= viewerData.height;\n }\n };\n\n var AnotherViewer = WINDOW.Viewer;\n\n var Viewer =\n /*#__PURE__*/\n function () {\n /**\n * Create a new Viewer.\n * @param {Element} element - The target element for viewing.\n * @param {Object} [options={}] - The configuration options.\n */\n function Viewer(element) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n _classCallCheck(this, Viewer);\n\n if (!element || element.nodeType !== 1) {\n throw new Error('The first argument is required and must be an element.');\n }\n\n this.element = element;\n this.options = assign({}, DEFAULTS, isPlainObject(options) && options);\n this.action = false;\n this.fading = false;\n this.fulled = false;\n this.hiding = false;\n this.imageClicked = false;\n this.imageData = {};\n this.index = this.options.initialViewIndex;\n this.isImg = false;\n this.isShown = false;\n this.length = 0;\n this.played = false;\n this.playing = false;\n this.pointers = {};\n this.ready = false;\n this.showing = false;\n this.timeout = false;\n this.tooltipping = false;\n this.viewed = false;\n this.viewing = false;\n this.wheeling = false;\n this.zooming = false;\n this.init();\n }\n\n _createClass(Viewer, [{\n key: \"init\",\n value: function init() {\n var _this = this;\n\n var element = this.element,\n options = this.options;\n\n if (element[NAMESPACE]) {\n return;\n }\n\n element[NAMESPACE] = this;\n var isImg = element.tagName.toLowerCase() === 'img';\n var images = [];\n forEach(isImg ? [element] : element.querySelectorAll('img'), function (image) {\n if (isFunction(options.filter)) {\n if (options.filter.call(_this, image)) {\n images.push(image);\n }\n } else {\n images.push(image);\n }\n });\n this.isImg = isImg;\n this.length = images.length;\n this.images = images;\n var ownerDocument = element.ownerDocument;\n var body = ownerDocument.body || ownerDocument.documentElement;\n this.body = body;\n this.scrollbarWidth = window.innerWidth - ownerDocument.documentElement.clientWidth;\n this.initialBodyPaddingRight = window.getComputedStyle(body).paddingRight; // Override `transition` option if it is not supported\n\n if (isUndefined(document.createElement(NAMESPACE).style.transition)) {\n options.transition = false;\n }\n\n if (options.inline) {\n var count = 0;\n\n var progress = function progress() {\n count += 1;\n\n if (count === _this.length) {\n var timeout;\n _this.initializing = false;\n _this.delaying = {\n abort: function abort() {\n clearTimeout(timeout);\n }\n }; // build asynchronously to keep `this.viewer` is accessible in `ready` event handler.\n\n timeout = setTimeout(function () {\n _this.delaying = false;\n\n _this.build();\n }, 0);\n }\n };\n\n this.initializing = {\n abort: function abort() {\n forEach(images, function (image) {\n if (!image.complete) {\n removeListener(image, EVENT_LOAD, progress);\n }\n });\n }\n };\n forEach(images, function (image) {\n if (image.complete) {\n progress();\n } else {\n addListener(image, EVENT_LOAD, progress, {\n once: true\n });\n }\n });\n } else {\n addListener(element, EVENT_CLICK, this.onStart = function (_ref) {\n var target = _ref.target;\n\n if (target.tagName.toLowerCase() === 'img' && (!isFunction(options.filter) || options.filter.call(_this, target))) {\n _this.view(_this.images.indexOf(target));\n }\n });\n }\n }\n }, {\n key: \"build\",\n value: function build() {\n if (this.ready) {\n return;\n }\n\n var element = this.element,\n options = this.options;\n var parent = element.parentNode;\n var template = document.createElement('div');\n template.innerHTML = TEMPLATE;\n var viewer = template.querySelector(\".\".concat(NAMESPACE, \"-container\"));\n var title = viewer.querySelector(\".\".concat(NAMESPACE, \"-title\"));\n var toolbar = viewer.querySelector(\".\".concat(NAMESPACE, \"-toolbar\"));\n var navbar = viewer.querySelector(\".\".concat(NAMESPACE, \"-navbar\"));\n var button = viewer.querySelector(\".\".concat(NAMESPACE, \"-button\"));\n var canvas = viewer.querySelector(\".\".concat(NAMESPACE, \"-canvas\"));\n this.parent = parent;\n this.viewer = viewer;\n this.title = title;\n this.toolbar = toolbar;\n this.navbar = navbar;\n this.button = button;\n this.canvas = canvas;\n this.footer = viewer.querySelector(\".\".concat(NAMESPACE, \"-footer\"));\n this.tooltipBox = viewer.querySelector(\".\".concat(NAMESPACE, \"-tooltip\"));\n this.player = viewer.querySelector(\".\".concat(NAMESPACE, \"-player\"));\n this.list = viewer.querySelector(\".\".concat(NAMESPACE, \"-list\"));\n addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(Array.isArray(options.title) ? options.title[0] : options.title));\n addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));\n toggleClass(button, CLASS_HIDE, !options.button);\n\n if (options.backdrop) {\n addClass(viewer, \"\".concat(NAMESPACE, \"-backdrop\"));\n\n if (!options.inline && options.backdrop !== 'static') {\n setData(canvas, DATA_ACTION, 'hide');\n }\n }\n\n if (isString(options.className) && options.className) {\n // In case there are multiple class names\n options.className.split(REGEXP_SPACES).forEach(function (className) {\n addClass(viewer, className);\n });\n }\n\n if (options.toolbar) {\n var list = document.createElement('ul');\n var custom = isPlainObject(options.toolbar);\n var zoomButtons = BUTTONS.slice(0, 3);\n var rotateButtons = BUTTONS.slice(7, 9);\n var scaleButtons = BUTTONS.slice(9);\n\n if (!custom) {\n addClass(toolbar, getResponsiveClass(options.toolbar));\n }\n\n forEach(custom ? options.toolbar : BUTTONS, function (value, index) {\n var deep = custom && isPlainObject(value);\n var name = custom ? hyphenate(index) : value;\n var show = deep && !isUndefined(value.show) ? value.show : value;\n\n if (!show || !options.zoomable && zoomButtons.indexOf(name) !== -1 || !options.rotatable && rotateButtons.indexOf(name) !== -1 || !options.scalable && scaleButtons.indexOf(name) !== -1) {\n return;\n }\n\n var size = deep && !isUndefined(value.size) ? value.size : value;\n var click = deep && !isUndefined(value.click) ? value.click : value;\n var item = document.createElement('li');\n item.setAttribute('role', 'button');\n addClass(item, \"\".concat(NAMESPACE, \"-\").concat(name));\n\n if (!isFunction(click)) {\n setData(item, DATA_ACTION, name);\n }\n\n if (isNumber(show)) {\n addClass(item, getResponsiveClass(show));\n }\n\n if (['small', 'large'].indexOf(size) !== -1) {\n addClass(item, \"\".concat(NAMESPACE, \"-\").concat(size));\n } else if (name === 'play') {\n addClass(item, \"\".concat(NAMESPACE, \"-large\"));\n }\n\n if (isFunction(click)) {\n addListener(item, EVENT_CLICK, click);\n }\n\n list.appendChild(item);\n });\n toolbar.appendChild(list);\n } else {\n addClass(toolbar, CLASS_HIDE);\n }\n\n if (!options.rotatable) {\n var rotates = toolbar.querySelectorAll('li[class*=\"rotate\"]');\n addClass(rotates, CLASS_INVISIBLE);\n forEach(rotates, function (rotate) {\n toolbar.appendChild(rotate);\n });\n }\n\n if (options.inline) {\n addClass(button, CLASS_FULLSCREEN);\n setStyle(viewer, {\n zIndex: options.zIndexInline\n });\n\n if (window.getComputedStyle(parent).position === 'static') {\n setStyle(parent, {\n position: 'relative'\n });\n }\n\n parent.insertBefore(viewer, element.nextSibling);\n } else {\n addClass(button, CLASS_CLOSE);\n addClass(viewer, CLASS_FIXED);\n addClass(viewer, CLASS_FADE);\n addClass(viewer, CLASS_HIDE);\n setStyle(viewer, {\n zIndex: options.zIndex\n });\n var container = options.container;\n\n if (isString(container)) {\n container = element.ownerDocument.querySelector(container);\n }\n\n if (!container) {\n container = this.body;\n }\n\n container.appendChild(viewer);\n }\n\n if (options.inline) {\n this.render();\n this.bind();\n this.isShown = true;\n }\n\n this.ready = true;\n\n if (isFunction(options.ready)) {\n addListener(element, EVENT_READY, options.ready, {\n once: true\n });\n }\n\n if (dispatchEvent(element, EVENT_READY) === false) {\n this.ready = false;\n return;\n }\n\n if (this.ready && options.inline) {\n this.view(this.index);\n }\n }\n /**\n * Get the no conflict viewer class.\n * @returns {Viewer} The viewer class.\n */\n\n }], [{\n key: \"noConflict\",\n value: function noConflict() {\n window.Viewer = AnotherViewer;\n return Viewer;\n }\n /**\n * Change the default options.\n * @param {Object} options - The new default options.\n */\n\n }, {\n key: \"setDefaults\",\n value: function setDefaults(options) {\n assign(DEFAULTS, isPlainObject(options) && options);\n }\n }]);\n\n return Viewer;\n }();\n\n assign(Viewer.prototype, render, events, handlers, methods, others);\n\n return Viewer;\n\n})));\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-select',_vm._b({staticClass:\"personal-account-select\",attrs:{\"item-text\":\"name\",\"items\":_vm.accountsItems,\"outlined\":\"\",\"return-object\":\"\",\"value\":_vm.isLocal ? _vm.value : _vm.selectedAccount,\"append-icon\":\"mdi-none\"},on:{\"change\":_vm.changeAccount}},'v-select',_vm.$attrs,false),[_vm._t(\"default\",null,{\"slot\":\"prepend\"})],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n\n \n \n
\n\n\n","import mod from \"-!../../cache-loader/dist/cjs.js??ref--12-0!../../thread-loader/dist/cjs.js!../../babel-loader/lib/index.js!../../vuetify-loader/lib/loader.js??ref--17-0!../../cache-loader/dist/cjs.js??ref--0-0!../../vue-loader/lib/index.js??vue-loader-options!./component.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../cache-loader/dist/cjs.js??ref--12-0!../../thread-loader/dist/cjs.js!../../babel-loader/lib/index.js!../../vuetify-loader/lib/loader.js??ref--17-0!../../cache-loader/dist/cjs.js??ref--0-0!../../vue-loader/lib/index.js??vue-loader-options!./component.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./component.vue?vue&type=template&id=3d230e11&\"\nimport script from \"./component.vue?vue&type=script&lang=js&\"\nexport * from \"./component.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"receipt\"},[_c('span',{staticClass:\"receipt__date\"},[_vm._v(_vm._s(_vm.currentReceipt.month)+\" \"+_vm._s(_vm.currentReceipt.year))]),_c('div',{staticClass:\"receipt__img\"},[_c('img',{attrs:{\"src\":_vm.src,\"alt\":\"Квитанция\"}})]),_c('div',{staticClass:\"receipt-controller\"},[_c('div',{staticClass:\"receipt-controller__left\"},[_c('v-btn',{staticClass:\"receipt-controller__btn\",attrs:{\"disabled\":!_vm.receiptPdf},on:{\"click\":_vm.download}},[_vm._v(\"Скачать ЕПД\")]),_c('a',{staticClass:\"receipt-controller__link\",attrs:{\"href\":\"/payments/statement/plug\"}},[_vm._v(\"Подписаться на электронный ЕПД\")])],1),_c('payment-btn',{staticClass:\"receipt-controller__right\",model:{value:(_vm.prePayment),callback:function ($$v) {_vm.prePayment=$$v},expression:\"prePayment\"}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {\nvar this$1 = this;\nvar _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"payment-btn\"},[_c('span',{staticClass:\"payment-btn__label\"},[_vm._v(\"Сумма к оплате:\")]),_c('v-text-field',{directives:[{name:\"money\",rawName:\"v-money\",value:(_vm.money),expression:\"money\"}],staticClass:\"payment-btn__input\",attrs:{\"value\":_vm.sum,\"outlined\":\"\"},on:{\"change\":function (value) {this$1.$emit('change', value)}}}),_c('span',{staticClass:\"payment-btn__bill\"},[_vm._v(\"руб.\")]),_c('v-btn',{staticClass:\"payment-btn__btn\",on:{\"click\":_vm.openPaymentDialog}},[_vm._v(\"Оплатить\")])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n \r\n Сумма к оплате:\r\n {this.$emit('change', value)}\"\r\n v-money=\"money\"\r\n outlined\r\n >\r\n руб.\r\n Оплатить \r\n
\r\n\r\n\r\n\r\n\r\n\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PaymentBtn.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PaymentBtn.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./PaymentBtn.vue?vue&type=template&id=5a0ae90e&scoped=true&\"\nimport script from \"./PaymentBtn.vue?vue&type=script&lang=js&\"\nexport * from \"./PaymentBtn.vue?vue&type=script&lang=js&\"\nimport style0 from \"./PaymentBtn.vue?vue&type=style&index=0&id=5a0ae90e&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"5a0ae90e\",\n null\n \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VTextField } from 'vuetify/lib/components/VTextField';\ninstallComponents(component, {VBtn,VTextField})\n","\r\n \r\n {{currentReceipt.month}} {{currentReceipt.year}}\r\n
\r\n\r\n\r\n\r\n\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Receipt.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Receipt.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Receipt.vue?vue&type=template&id=ca43ca64&scoped=true&\"\nimport script from \"./Receipt.vue?vue&type=script&lang=js&\"\nexport * from \"./Receipt.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Receipt.vue?vue&type=style&index=0&id=ca43ca64&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"ca43ca64\",\n null\n \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\ninstallComponents(component, {VBtn})\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('modal-component',{attrs:{\"show\":_vm.show,\"width\":\"1400\"},on:{\"change\":function($event){return _vm.$emit('change',$event)}},scopedSlots:_vm._u([{key:\"header\",fn:function(){return [_c('span',[_vm._v(\"Оплата единого платежного документа по пoстaвщикaм (исполнителям) услуг\")])]},proxy:true},{key:\"main\",fn:function(){return [_c('div',{staticClass:\"modal-content\"},[_c('div',[_c('v-table-wrapper',{attrs:{\"headers\":_vm.headers,\"items\":_vm.providers},scopedSlots:_vm._u([{key:\"item.flag\",fn:function(ref){\nvar item = ref.item;\nreturn [_c('v-checkbox',{attrs:{\"input-value\":_vm.checkedList[item.principalCode],\"color\":\"success\",\"disabled\":_vm.loading},on:{\"change\":function($event){return _vm.toPayChecked(item)}}})]}},{key:\"item.principalInfo\",fn:function(ref){\nvar item = ref.item;\nreturn [_c('div',{staticClass:\"word-wrap\"},[_vm._v(_vm._s(item.principalInfo))])]}},{key:\"item.toPayInput\",fn:function(ref){\nvar item = ref.item;\nreturn [_c('v-currency-field',{attrs:{\"disabled\":_vm.loading || !_vm.checkedList[item.principalCode],\"value\":_vm.valueByPrincipal[item.principalCode],\"outlined\":\"\",\"hide-details\":true},on:{\"input\":function($event){return _vm.sumChanged($event, item)}}})]}}])})],1),_c('div',{staticClass:\"payment-container align-center\"},[_c('div',{},[_c('span',{staticClass:\"d-inline-block pr-3 helvetica-bold\"},[_vm._v(\"Итого по ЕПД:\")]),_c('span',{staticClass:\"d-inline-block helvetica-bold\"},[_vm._v(_vm._s(_vm.sumTotal || '0.00'))]),_c('span',{staticClass:\"rub-postfix d-inline-block px-3\"},[_vm._v(\"руб.\")])]),_c('div',[_c('span',{staticClass:\"d-inline-block pr-3 helvetica-bold\"},[_vm._v(\"Итого к оплате:\")]),_c('span',{staticClass:\"d-inline-block helvetica-bold\"},[_vm._v(_vm._s(_vm.sumToPay || '0.00'))]),_c('span',{staticClass:\"rub-postfix d-inline-block px-3\"},[_vm._v(\"руб.\")]),_c('v-btn',{staticClass:\"d-inline-block orange-button\",attrs:{\"disabled\":_vm.loading || !_vm.isOnline,\"width\":\"150\"},on:{\"click\":_vm.pay}},[_vm._v(\"Оплатить\\r\\n \")])],1)]),_c('modal-payment-by-providers-info',{on:{\"answer\":_vm.answerHandler},model:{value:(_vm.showModalPaymentByProvidersInfo),callback:function ($$v) {_vm.showModalPaymentByProvidersInfo=$$v},expression:\"showModalPaymentByProvidersInfo\"}}),(_vm.showModalPayment)?_c('modal-payment',{attrs:{\"toPay\":_vm.sumToPay,\"details\":_vm.payDetails},model:{value:(_vm.showModalPayment),callback:function ($$v) {_vm.showModalPayment=$$v},expression:\"showModalPayment\"}}):_vm._e()],1)]},proxy:true}])})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('modal',{attrs:{\"show\":_vm.show,\"width\":\"700\"},on:{\"change\":function($event){return _vm.$emit('change',$event)}},scopedSlots:_vm._u([{key:\"header\",fn:function(){return [_c('span',[_vm._v(\"Уважаемый клиент!\")])]},proxy:true},{key:\"main\",fn:function(){return [_c('div',{staticClass:\"modal-content\"},[_c('div',{staticClass:\"tes-text modal-content-text\"},[_vm._v(\"\\n Обращаем Ваше внимание, что при неоплате услуг того или иного поставщика Ваша\\n задолженность по услуге данного поставщика перейдет на следующий расчетный период\\n \")]),_c('div',{staticClass:\"tes-text-title modal-content-question\"},[_vm._v(\"Продолжить?\")]),_c('div',{staticClass:\"modal-content-buttons\"},[_c('v-btn',{staticClass:\"green-button\",on:{\"click\":function($event){return _vm.click(true)}}},[_vm._v(\"Да\")]),_c('v-btn',{staticClass:\"white-button\",on:{\"click\":function($event){return _vm.click(false)}}},[_vm._v(\"Нет\")])],1)])]},proxy:true}])})}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n \r\n ![\"Квитанция\"]()
\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n Скачать ЕПД \r\n Подписаться на электронный ЕПД\r\n
\r\n \r\n \r\n \r\n Оплата единого платежного документа по пoстaвщикaм (исполнителям) услуг\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n\r\n\r\n\r\n\r\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ModalPaymentByProviders.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ModalPaymentByProviders.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ModalPaymentByProviders.vue?vue&type=template&id=2789cbfa&\"\nimport script from \"./ModalPaymentByProviders.vue?vue&type=script&lang=js&\"\nexport * from \"./ModalPaymentByProviders.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ModalPaymentByProviders.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VCheckbox } from 'vuetify/lib/components/VCheckbox';\ninstallComponents(component, {VBtn,VCheckbox})\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('modal',{attrs:{\"show\":_vm.show,\"width\":\"550\"},on:{\"change\":function($event){_vm.$emit('change',$event); _vm.openSubscribeEpdModal()}},scopedSlots:_vm._u([{key:\"header\",fn:function(){return [_c('span',[_vm._v(\"Информация\")])]},proxy:true},{key:\"main\",fn:function(){return [_c('div',{staticClass:\"modal-info text-center mx-7\"},[_c('p',{staticClass:\"text-center pt-5 pb-5 pl-4 pr-4 mb-0\"},[_vm._v(\"\\n Подключение услуги «Электронная квитанция» по данному лицевому счету недоступно,\\n поскольку владельцем лицевого счета является другой потребитель\\n \")])])]},proxy:true}])})}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n \r\n
\r\n \r\n \r\n Подключение услуги «Электронная квитанция» по данному лицевому счету недоступно,\r\n поскольку владельцем лицевого счета является другой потребитель\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Сумма к оплате\r\n \r\n \r\n\r\n
\r\n\r\n\r\n\r\n\r\n\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/vuetify-loader/lib/loader.js??ref--17-0!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=23d7be08&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=23d7be08&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"23d7be08\",\n null\n \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VRow } from 'vuetify/lib/components/VGrid';\ninstallComponents(component, {VBtn,VCol,VRow})\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('modal',{attrs:{\"show\":_vm.show,\"width\":\"550\"},on:{\"change\":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:\"header\",fn:function(){return [_c('span',[_vm._v(\"Уведомление об оплате\")])]},proxy:true},{key:\"main\",fn:function(){return [(_vm.paySuccess)?_c('div',{staticClass:\"modal-info text-center mx-7\"},[_c('span',{staticClass:\"d-block my-5\"},[_vm._v(\"Отправить уведомление об оплате на:\")]),_c('v-form',{ref:\"form\",model:{value:(_vm.valid),callback:function ($$v) {_vm.valid=$$v},expression:\"valid\"}},[_c('div',{staticClass:\"modalPayment__form-item\"},[_c('div',{staticClass:\"modalPayment__form-checkbox\"},[_c('v-checkbox',{staticClass:\"pt-0 mt-0\",attrs:{\"color\":\"orange\"},model:{value:(_vm.sendTo.email),callback:function ($$v) {_vm.$set(_vm.sendTo, \"email\", $$v)},expression:\"sendTo.email\"}})],1),_c('div',{staticClass:\"modalPayment__form-field\"},[_c('v-text-field',{attrs:{\"label\":\"Email\",\"outlined\":\"\",\"rules\":_vm.emailRules,\"disabled\":_vm.loading || !_vm.sendTo.email},model:{value:(_vm.email),callback:function ($$v) {_vm.email=$$v},expression:\"email\"}})],1)]),_c('div',{staticClass:\"modalPayment__form-item mt-1\"},[_c('div',{staticClass:\"modalPayment__form-checkbox\"},[_c('v-checkbox',{staticClass:\"pt-0 mt-0\",attrs:{\"color\":\"orange\"},model:{value:(_vm.sendTo.phone),callback:function ($$v) {_vm.$set(_vm.sendTo, \"phone\", $$v)},expression:\"sendTo.phone\"}})],1),_c('div',{staticClass:\"modalPayment__form-field\"},[_c('v-text-field',{directives:[{name:\"mask\",rawName:\"v-mask\",value:('+7(###)###-##-##'),expression:\"'+7(###)###-##-##'\"}],attrs:{\"label\":\"Телефон\",\"outlined\":\"\",\"rules\":_vm.phoneRules,\"disabled\":_vm.loading || !_vm.sendTo.phone},model:{value:(_vm.phone),callback:function ($$v) {_vm.phone=$$v},expression:\"phone\"}})],1)]),_c('v-btn',{staticClass:\"orange-button mb-5\",attrs:{\"disabled\":!_vm.disabled,\"loading\":_vm.loading},on:{\"click\":function($event){return _vm.doPay()}}},[_vm._v(\"Перейти к оплате\\n \")])],1)],1):_vm._e(),(!_vm.paySuccess)?_c('div',{staticClass:\"modal-info text-center mx-7 mt-10\"},[_c('span',{staticClass:\"d-block my-5\"},[_vm._v(\"\\n Сервис оплаты временно недоступен. Пожалуйста, повторите попытку\\n позже.\\n \")]),_c('v-btn',{staticClass:\"orange-button mb-5 mt-5\",attrs:{\"loading\":_vm.loading},on:{\"click\":function($event){return _vm.$emit('change', false)}}},[_vm._v(\"Закрыть\\n \")])],1):_vm._e()]},proxy:true}])})}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\r\n \r\n Оплата начислений по единому платежному документу\r\n
\r\n\r\n\r\n Лицевой счёт:\r\n \r\n
\r\n {{ currentReceipt | humanReadableDate }}
\r\n \r\n \r\n \r\n {{\r\n prePayment\r\n }}\r\n руб.\r\n
\r\n \r\n отредактировать сумму к оплате можно на следующей странице после\r\n нажатия кнопки «Оплатить»\r\n
\r\n \r\n Оплатить \r\n
\r\n \r\n Скачать ЕПД \r\n
\r\n \r\n Отправить уведомление об оплате на:\r\n \r\n Перейти к оплате\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Сервис оплаты временно недоступен. Пожалуйста, повторите попытку\r\n позже.\r\n \r\n Закрыть\r\n \r\n
\r\n \r\n