\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 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