\n this.$.content.parentNode.replaceChild(this._originalContentPart, this.$.content);\n this.$.content = this._originalContentPart;\n this._originalContentPart = undefined;\n }\n\n this._observer.connect();\n\n this._contentNodes = undefined;\n this.content = undefined;\n }\n\n /**\n * @param {!HTMLTemplateElement} template\n * @param {object} instanceProps\n * @protected\n */\n _stampOverlayTemplate(template, instanceProps) {\n this._removeOldContent();\n\n if (!template._Templatizer) {\n template._Templatizer = templatize(template, this, {\n instanceProps: instanceProps,\n forwardHostProp: function(prop, value) {\n if (this._instance) {\n this._instance.forwardHostProp(prop, value);\n }\n }\n });\n }\n\n this._instance = new template._Templatizer({});\n this._contentNodes = Array.from(this._instance.root.childNodes);\n\n const templateRoot = template._templateRoot || (template._templateRoot = template.getRootNode());\n const _isScoped = templateRoot !== document;\n\n if (_isScoped) {\n const isShady = window.ShadyCSS && !window.ShadyCSS.nativeShadow;\n\n if (!this.$.content.shadowRoot) {\n this.$.content.attachShadow({mode: 'open'});\n }\n\n let scopeCssText = Array.from(templateRoot.querySelectorAll('style'))\n .reduce((result, style) => result + style.textContent, '');\n\n if (isShady) {\n // NOTE(platosha): ShadyCSS removes \n
[[_text]]
\n`,\n\n is: 'iron-a11y-announcer',\n\n properties: {\n\n /**\n * The value of mode is used to set the `aria-live` attribute\n * for the element that will be announced. Valid values are: `off`,\n * `polite` and `assertive`.\n */\n mode: {type: String, value: 'polite'},\n\n /**\n * The timeout on refreshing the announcement text. Larger timeouts are\n * needed for certain screen readers to re-announce the same message.\n */\n timeout: {type: Number, value: 150},\n\n _text: {type: String, value: ''},\n },\n\n /** @override */\n created: function() {\n if (!IronA11yAnnouncer.instance) {\n IronA11yAnnouncer.instance = this;\n }\n\n document.addEventListener('iron-announce', this._onIronAnnounce.bind(this));\n },\n\n /**\n * Cause a text string to be announced by screen readers.\n *\n * @param {string} text The text that should be announced.\n */\n announce: function(text) {\n this._text = '';\n this.async(function() {\n this._text = text;\n }, this.timeout);\n },\n\n _onIronAnnounce: function(event) {\n if (event.detail && event.detail.text) {\n this.announce(event.detail.text);\n }\n }\n});\n\nIronA11yAnnouncer.instance = null;\n\nIronA11yAnnouncer.requestAvailability = function() {\n if (!IronA11yAnnouncer.instance) {\n IronA11yAnnouncer.instance = document.createElement('iron-a11y-announcer');\n }\n\n if (document.body) {\n document.body.appendChild(IronA11yAnnouncer.instance);\n } else {\n document.addEventListener('load', function() {\n document.body.appendChild(IronA11yAnnouncer.instance);\n });\n }\n};\n","/**\n@license\nCopyright (c) 2017 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\n/** @private */\nexport const DatePickerHelper = class VaadinDatePickerHelper {\n /**\n * Get ISO 8601 week number for the given date.\n *\n * @param {Date} Date object\n * @return {Number} Week number\n */\n static _getISOWeekNumber(date) {\n // Ported from Vaadin Framework method com.vaadin.client.DateTimeService.getISOWeekNumber(date)\n var dayOfWeek = date.getDay(); // 0 == sunday\n\n // ISO 8601 use weeks that start on monday so we use\n // mon=1,tue=2,...sun=7;\n if (dayOfWeek === 0) {\n dayOfWeek = 7;\n }\n // Find nearest thursday (defines the week in ISO 8601). The week number\n // for the nearest thursday is the same as for the target date.\n var nearestThursdayDiff = 4 - dayOfWeek; // 4 is thursday\n var nearestThursday = new Date(date.getTime() + nearestThursdayDiff * 24 * 3600 * 1000);\n\n var firstOfJanuary = new Date(0, 0);\n firstOfJanuary.setFullYear(nearestThursday.getFullYear());\n\n var timeDiff = nearestThursday.getTime() - firstOfJanuary.getTime();\n\n // Rounding the result, as the division doesn't result in an integer\n // when the given date is inside daylight saving time period.\n var daysSinceFirstOfJanuary = Math.round(timeDiff / (24 * 3600 * 1000));\n\n return Math.floor((daysSinceFirstOfJanuary) / 7 + 1);\n }\n\n /**\n * Check if two dates are equal.\n *\n * @param {Date} date1\n * @param {Date} date2\n * @return {Boolean} True if the given date objects refer to the same date\n */\n static _dateEquals(date1, date2) {\n return date1 instanceof Date && date2 instanceof Date &&\n date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate();\n }\n\n /**\n * Check if the given date is in the range of allowed dates.\n *\n * @param {Date} date The date to check\n * @param {Date} min Range start\n * @param {Date} max Range end\n * @return {Boolean} True if the date is in the range\n */\n static _dateAllowed(date, min, max) {\n return (!min || date >= min) && (!max || date <= max);\n }\n\n /**\n * Get closest date from array of dates.\n *\n * @param {Date} date The date to compare dates with\n * @param {Array} dates Array of date objects\n * @return {Date} Closest date\n */\n static _getClosestDate(date, dates) {\n return dates.filter(date => date !== undefined)\n .reduce((closestDate, candidate) => {\n if (!candidate) {\n return closestDate;\n }\n\n if (!closestDate) {\n return candidate;\n }\n\n var candidateDiff = Math.abs(date.getTime() - candidate.getTime());\n var closestDateDiff = Math.abs(closestDate.getTime() - date.getTime());\n return candidateDiff < closestDateDiff ? candidate : closestDate;\n });\n }\n\n /**\n * Extracts the basic component parts of a date (day, month and year)\n * to the expected format.\n */\n static _extractDateParts(date) {\n return {\n day: date.getDate(),\n month: date.getMonth(),\n year: date.getFullYear()\n };\n }\n};\n","/**\n@license\nCopyright (c) 2017 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nimport { PolymerElement } from '@polymer/polymer/polymer-element.js';\n\nimport '@polymer/polymer/lib/elements/dom-repeat.js';\nimport { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';\nimport { DatePickerHelper } from './vaadin-date-picker-helper.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * @extends PolymerElement\n * @private\n */\nclass MonthCalendarElement extends ThemableMixin(GestureEventListeners(PolymerElement)) {\n static get template() {\n return html`\n \n\n
[[_getTitle(month, i18n.monthNames)]]
\n
\n
\n
\n
\n
\n [[item.weekDayShort]]
\n \n
\n
\n
\n
\n
\n
\n [[_getDate(item)]]
\n \n
\n
\n
\n`;\n }\n\n static get is() {\n return 'vaadin-month-calendar';\n }\n\n static get properties() {\n return {\n /**\n * A `Date` object defining the month to be displayed. Only year and\n * month properties are actually used.\n */\n month: {\n type: Date,\n value: new Date()\n },\n\n /**\n * A `Date` object for the currently selected date.\n */\n selectedDate: {\n type: Date,\n notify: true\n },\n\n /**\n * A `Date` object for the currently focused date.\n */\n focusedDate: Date,\n\n showWeekNumbers: {\n type: Boolean,\n value: false\n },\n\n i18n: {\n type: Object\n },\n\n /**\n * Flag stating whether taps on the component should be ignored.\n */\n ignoreTaps: Boolean,\n\n _notTapping: Boolean,\n\n /**\n * The earliest date that can be selected. All earlier dates will be disabled.\n */\n minDate: {\n type: Date,\n value: null\n },\n\n /**\n * The latest date that can be selected. All later dates will be disabled.\n */\n maxDate: {\n type: Date,\n value: null\n },\n\n _days: {\n type: Array,\n computed: '_getDays(month, i18n.firstDayOfWeek, minDate, maxDate)'\n },\n\n disabled: {\n type: Boolean,\n reflectToAttribute: true,\n computed: '_isDisabled(month, minDate, maxDate)'\n }\n };\n }\n\n static get observers() {\n return [\n '_showWeekNumbersChanged(showWeekNumbers, i18n.firstDayOfWeek)'\n ];\n }\n\n _dateEquals(date1, date2) {\n return DatePickerHelper._dateEquals(date1, date2);\n }\n\n _dateAllowed(date, min, max) {\n return DatePickerHelper._dateAllowed(date, min, max);\n }\n\n /* Returns true if all the dates in the month are out of the allowed range */\n _isDisabled(month, minDate, maxDate) {\n // First day of the month\n var firstDate = new Date(0, 0);\n firstDate.setFullYear(month.getFullYear());\n firstDate.setMonth(month.getMonth());\n firstDate.setDate(1);\n\n // Last day of the month\n var lastDate = new Date(0, 0);\n lastDate.setFullYear(month.getFullYear());\n lastDate.setMonth(month.getMonth() + 1);\n lastDate.setDate(0);\n\n if ((minDate && maxDate)\n && minDate.getMonth() === maxDate.getMonth()\n && minDate.getMonth() === month.getMonth()\n && maxDate.getDate() - minDate.getDate() >= 0) {\n return false;\n }\n\n return !this._dateAllowed(firstDate, minDate, maxDate)\n && !this._dateAllowed(lastDate, minDate, maxDate);\n }\n\n _getTitle(month, monthNames) {\n if (month === undefined || monthNames === undefined) {\n return;\n }\n return this.i18n.formatTitle(monthNames[month.getMonth()], month.getFullYear());\n }\n\n _onMonthGridTouchStart() {\n this._notTapping = false;\n setTimeout(() => this._notTapping = true, 300);\n }\n\n _dateAdd(date, delta) {\n date.setDate(date.getDate() + delta);\n }\n\n _applyFirstDayOfWeek(weekDayNames, firstDayOfWeek) {\n if (weekDayNames === undefined || firstDayOfWeek === undefined) {\n return;\n }\n\n return weekDayNames.slice(firstDayOfWeek).concat(weekDayNames.slice(0, firstDayOfWeek));\n }\n\n _getWeekDayNames(weekDayNames, weekDayNamesShort, showWeekNumbers, firstDayOfWeek) {\n if (weekDayNames === undefined || weekDayNamesShort === undefined ||\n showWeekNumbers === undefined || firstDayOfWeek === undefined) {\n return;\n }\n weekDayNames = this._applyFirstDayOfWeek(weekDayNames, firstDayOfWeek);\n weekDayNamesShort = this._applyFirstDayOfWeek(weekDayNamesShort, firstDayOfWeek);\n weekDayNames = weekDayNames.map((day, index) => {\n return {\n weekDay: day,\n weekDayShort: weekDayNamesShort[index]\n };\n });\n\n return weekDayNames;\n }\n\n _getDate(date) {\n return date ? date.getDate() : '';\n }\n\n _showWeekNumbersChanged(showWeekNumbers, firstDayOfWeek) {\n if (showWeekNumbers && firstDayOfWeek === 1) {\n this.setAttribute('week-numbers', '');\n } else {\n this.removeAttribute('week-numbers');\n }\n }\n\n _showWeekSeparator(showWeekNumbers, firstDayOfWeek) {\n // Currently only supported for locales that start the week on Monday.\n return showWeekNumbers && firstDayOfWeek === 1;\n }\n\n _isToday(date) {\n return this._dateEquals(new Date(), date);\n }\n\n _getDays(month, firstDayOfWeek) {\n if (month === undefined || firstDayOfWeek === undefined) {\n return;\n }\n // First day of the month (at midnight).\n var date = new Date(0, 0);\n date.setFullYear(month.getFullYear());\n date.setMonth(month.getMonth());\n date.setDate(1);\n\n // Rewind to first day of the week.\n while (date.getDay() !== firstDayOfWeek) {\n this._dateAdd(date, -1);\n }\n\n var days = [];\n var startMonth = date.getMonth();\n var targetMonth = month.getMonth();\n while (date.getMonth() === targetMonth || date.getMonth() === startMonth) {\n days.push(date.getMonth() === targetMonth ? new Date(date.getTime()) : null);\n\n // Advance to next day.\n this._dateAdd(date, 1);\n }\n return days;\n }\n\n _getWeekNumber(date, days) {\n if (date === undefined || days === undefined) {\n return;\n }\n\n if (!date) {\n // Get the first non-null date from the days array.\n date = days.reduce((acc, d) => {\n return !acc && d ? d : acc;\n });\n }\n\n return DatePickerHelper._getISOWeekNumber(date);\n }\n\n _getWeekNumbers(dates) {\n return dates\n .map(date => this._getWeekNumber(date, dates))\n .filter((week, index, arr) => arr.indexOf(week) === index);\n }\n\n _handleTap(e) {\n if (!this.ignoreTaps && !this._notTapping && e.target.date && !e.target.hasAttribute('disabled')) {\n this.selectedDate = e.target.date;\n this.dispatchEvent(new CustomEvent('date-tap', {bubbles: true, composed: true}));\n }\n }\n\n _preventDefault(e) {\n e.preventDefault();\n }\n\n _getRole(date) {\n return date ? 'button' : 'presentation';\n }\n\n _getAriaLabel(date) {\n if (!date) {\n return '';\n }\n\n var ariaLabel = this._getDate(date) + ' ' +\n this.i18n.monthNames[date.getMonth()] + ' ' +\n date.getFullYear() + ', ' +\n this.i18n.weekdays[date.getDay()];\n\n if (this._isToday(date)) {\n ariaLabel += ', ' + this.i18n.today;\n }\n\n return ariaLabel;\n }\n\n _getAriaDisabled(date, min, max) {\n if (date === undefined || min === undefined || max === undefined) {\n return;\n }\n return this._dateAllowed(date, min, max) ? 'false' : 'true';\n }\n}\n\ncustomElements.define(MonthCalendarElement.is, MonthCalendarElement);\n","/**\n@license\nCopyright (c) 2017 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nimport { PolymerElement } from '@polymer/polymer/polymer-element.js';\n\nimport { timeOut } from '@polymer/polymer/lib/utils/async.js';\nimport { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\nimport { flush } from '@polymer/polymer/lib/utils/flush.js';\nimport { templatize } from '@polymer/polymer/lib/utils/templatize.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';\n/**\n * @extends PolymerElement\n * @private\n */\nclass InfiniteScrollerElement extends PolymerElement {\n static get template() {\n return html`\n \n\n
\n`;\n }\n\n static get is() {\n return 'vaadin-infinite-scroller';\n }\n\n static get properties() {\n return {\n\n /**\n * Count of individual items in each buffer.\n * The scroller has 2 buffers altogether so bufferSize of 20\n * will result in 40 buffered DOM items in total.\n * Changing after initialization not supported.\n */\n bufferSize: {\n type: Number,\n value: 20\n },\n\n /**\n * The amount of initial scroll top. Needed in order for the\n * user to be able to scroll backwards.\n */\n _initialScroll: {\n value: 500000\n },\n\n /**\n * The index/position mapped at _initialScroll point.\n */\n _initialIndex: {\n value: 0\n },\n\n _buffers: Array,\n\n _preventScrollEvent: Boolean,\n\n _mayHaveMomentum: Boolean,\n\n _initialized: Boolean,\n\n active: {\n type: Boolean,\n observer: '_activated'\n }\n };\n }\n\n ready() {\n super.ready();\n\n this._buffers = Array.prototype.slice.call(this.root.querySelectorAll('.buffer'));\n\n this.$.fullHeight.style.height = this._initialScroll * 2 + 'px';\n\n var tpl = this.querySelector('template');\n this._TemplateClass = templatize(tpl, this, {\n forwardHostProp: function(prop, value) {\n if (prop !== 'index') {\n this._buffers.forEach(buffer => {\n [].forEach.call(buffer.children, insertionPoint => {\n insertionPoint._itemWrapper.instance[prop] = value;\n });\n });\n }\n }\n });\n\n // Firefox interprets elements with overflow:auto as focusable\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739\n var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n if (isFirefox) {\n this.$.scroller.tabIndex = -1;\n }\n }\n\n _activated(active) {\n if (active && !this._initialized) {\n this._createPool();\n this._initialized = true;\n }\n }\n\n _finishInit() {\n if (!this._initDone) {\n // Once the first set of items start fading in, stamp the rest\n this._buffers.forEach(buffer => {\n [].forEach.call(buffer.children,\n insertionPoint => this._ensureStampedInstance(insertionPoint._itemWrapper));\n }, this);\n\n if (!this._buffers[0].translateY) {\n this._reset();\n }\n\n this._initDone = true;\n }\n }\n\n _translateBuffer(up) {\n var index = up ? 1 : 0;\n this._buffers[index].translateY = this._buffers[(index ? 0 : 1)].translateY + this._bufferHeight * (index ? -1 : 1);\n this._buffers[index].style.transform = 'translate3d(0, ' + this._buffers[index].translateY + 'px, 0)';\n this._buffers[index].updated = false;\n this._buffers.reverse();\n }\n\n _scroll() {\n if (this._scrollDisabled) {\n return;\n }\n\n var scrollTop = this.$.scroller.scrollTop;\n if (scrollTop < this._bufferHeight || scrollTop > this._initialScroll * 2 - this._bufferHeight) {\n // Scrolled near the end/beginning of the scrollable area -> reset.\n this._initialIndex = ~~this.position;\n this._reset();\n }\n\n // Check if we scrolled enough to translate the buffer positions.\n var bufferOffset = this.root.querySelector('.buffer').offsetTop;\n var upperThresholdReached = scrollTop > this._buffers[1].translateY + this.itemHeight + bufferOffset;\n var lowerThresholdReached = scrollTop < this._buffers[0].translateY + this.itemHeight + bufferOffset;\n\n if (upperThresholdReached || lowerThresholdReached) {\n this._translateBuffer(lowerThresholdReached);\n this._updateClones();\n }\n\n if (!this._preventScrollEvent) {\n this.dispatchEvent(new CustomEvent('custom-scroll', {bubbles: false, composed: true}));\n this._mayHaveMomentum = true;\n }\n this._preventScrollEvent = false;\n\n this._debouncerScrollFinish = Debouncer.debounce(this._debouncerScrollFinish,\n timeOut.after(200), () => {\n var scrollerRect = this.$.scroller.getBoundingClientRect();\n if (!this._isVisible(this._buffers[0], scrollerRect) && !this._isVisible(this._buffers[1], scrollerRect)) {\n this.position = this.position;\n }\n });\n }\n\n /**\n * Current scroller position as index. Can be a fractional number.\n *\n * @type {Number}\n */\n set position(index) {\n this._preventScrollEvent = true;\n if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {\n this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;\n } else {\n this._initialIndex = ~~index;\n this._reset();\n this._scrollDisabled = true;\n this.$.scroller.scrollTop += index % 1 * this.itemHeight;\n this._scrollDisabled = false;\n }\n\n if (this._mayHaveMomentum) {\n // Stop the possible iOS Safari momentum with -webkit-overflow-scrolling: auto;\n this.$.scroller.classList.add('notouchscroll');\n this._mayHaveMomentum = false;\n\n setTimeout(() => {\n // Restore -webkit-overflow-scrolling: touch; after a small delay.\n this.$.scroller.classList.remove('notouchscroll');\n }, 10);\n }\n\n }\n\n /**\n * @private\n */\n get position() {\n return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;\n }\n\n get itemHeight() {\n if (!this._itemHeightVal) {\n if (!(window.ShadyCSS && window.ShadyCSS.nativeCss)) {\n this.updateStyles();\n }\n\n const itemHeight = window.ShadyCSS\n ? window.ShadyCSS.getComputedStyleValue(this, '--vaadin-infinite-scroller-item-height')\n : getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');\n // Use background-position temp inline style for unit conversion\n const tmpStyleProp = 'background-position';\n this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);\n const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);\n this.$.fullHeight.style.removeProperty(tmpStyleProp);\n this._itemHeightVal = parseFloat(itemHeightPx);\n }\n\n return this._itemHeightVal;\n }\n\n get _bufferHeight() {\n return this.itemHeight * this.bufferSize;\n }\n\n _reset() {\n this._scrollDisabled = true;\n this.$.scroller.scrollTop = this._initialScroll;\n this._buffers[0].translateY = this._initialScroll - this._bufferHeight;\n this._buffers[1].translateY = this._initialScroll;\n this._buffers.forEach(buffer => {\n buffer.style.transform = 'translate3d(0, ' + buffer.translateY + 'px, 0)';\n });\n this._buffers[0].updated = this._buffers[1].updated = false;\n this._updateClones(true);\n\n this._debouncerUpdateClones = Debouncer.debounce(\n this._debouncerUpdateClones,\n timeOut.after(200), () => {\n this._buffers[0].updated = this._buffers[1].updated = false;\n this._updateClones();\n });\n\n this._scrollDisabled = false;\n }\n\n _createPool() {\n var container = this.getBoundingClientRect();\n this._buffers.forEach(buffer => {\n for (var i = 0; i < this.bufferSize; i++) {\n const itemWrapper = document.createElement('div');\n itemWrapper.style.height = this.itemHeight + 'px';\n itemWrapper.instance = {};\n\n const contentId = InfiniteScrollerElement._contentIndex = InfiniteScrollerElement._contentIndex + 1 || 0;\n const slotName = 'vaadin-infinite-scroller-item-content-' + contentId;\n\n const insertionPoint = document.createElement('slot');\n insertionPoint.setAttribute('name', slotName);\n insertionPoint._itemWrapper = itemWrapper;\n buffer.appendChild(insertionPoint);\n\n itemWrapper.setAttribute('slot', slotName);\n this.appendChild(itemWrapper);\n\n // This is needed by IE\n flush();\n\n setTimeout(() => {\n // Only stamp the visible instances first\n if (this._isVisible(itemWrapper, container)) {\n this._ensureStampedInstance(itemWrapper);\n }\n }, 1); // Wait for first reset\n }\n }, this);\n\n setTimeout(() => {\n afterNextRender(this, this._finishInit.bind(this));\n }, 1);\n }\n\n _ensureStampedInstance(itemWrapper) {\n if (itemWrapper.firstElementChild) {\n return;\n }\n\n var tmpInstance = itemWrapper.instance;\n\n itemWrapper.instance = new this._TemplateClass({});\n itemWrapper.appendChild(itemWrapper.instance.root);\n\n Object.keys(tmpInstance).forEach(prop => {\n itemWrapper.instance.set(prop, tmpInstance[prop]);\n });\n }\n\n _updateClones(viewPortOnly) {\n this._firstIndex = ~~((this._buffers[0].translateY - this._initialScroll) / this.itemHeight) + this._initialIndex;\n\n var scrollerRect = viewPortOnly ? this.$.scroller.getBoundingClientRect() : undefined;\n this._buffers.forEach((buffer, bufferIndex) => {\n if (!buffer.updated) {\n var firstIndex = this._firstIndex + this.bufferSize * bufferIndex;\n\n [].forEach.call(buffer.children, (insertionPoint, index) => {\n const itemWrapper = insertionPoint._itemWrapper;\n if (!viewPortOnly || this._isVisible(itemWrapper, scrollerRect)) {\n itemWrapper.instance.index = firstIndex + index;\n }\n });\n buffer.updated = true;\n }\n }, this);\n }\n\n _isVisible(element, container) {\n var rect = element.getBoundingClientRect();\n return rect.bottom > container.top && rect.top < container.bottom;\n }\n}\n\ncustomElements.define(InfiniteScrollerElement.is, InfiniteScrollerElement);\n","import '@polymer/polymer/lib/elements/custom-style.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `
\n \n \n \n `;\n\ndocument.head.appendChild($_documentContainer.content);\n","/**\n@license\nCopyright (c) 2017 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nimport { PolymerElement } from '@polymer/polymer/polymer-element.js';\n\nimport { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';\nimport '@polymer/iron-media-query/iron-media-query.js';\nimport { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';\nimport { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';\nimport '@vaadin/vaadin-button/src/vaadin-button.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';\nimport './vaadin-month-calendar.js';\nimport './vaadin-infinite-scroller.js';\nimport { DatePickerHelper } from './vaadin-date-picker-helper.js';\nimport './vaadin-date-picker-styles.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { addListener, setTouchAction } from '@polymer/polymer/lib/utils/gestures.js';\nimport { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\nimport { timeOut } from '@polymer/polymer/lib/utils/async.js';\n/**\n * @extends PolymerElement\n * @private\n */\nclass DatePickerOverlayContentElement extends\n ThemableMixin(\n DirMixin(\n GestureEventListeners(PolymerElement))) {\n static get template() {\n return html`\n \n\n
\n [[i18n.calendar]]\n
\n\n
\n
[[_formatDisplayed(selectedDate, i18n.formatDate, label)]]
\n
\n
\n\n
\n [[_yearAfterXMonths(_visibleMonthIndex)]]\n
\n
\n\n
\n\n
\n \n [[i18n.today]]\n \n \n [[i18n.cancel]]\n \n
\n\n
\n`;\n }\n\n static get is() {\n return 'vaadin-date-picker-overlay-content';\n }\n\n static get properties() {\n return {\n /**\n * The value for this element.\n */\n selectedDate: {\n type: Date,\n notify: true\n },\n\n /**\n * Date value which is focused using keyboard.\n */\n focusedDate: {\n type: Date,\n notify: true,\n observer: '_focusedDateChanged'\n },\n\n _focusedMonthDate: Number,\n\n /**\n * Date which should be visible when there is no value selected.\n */\n initialPosition: {\n type: Date,\n observer: '_initialPositionChanged'\n },\n\n _originDate: {\n value: new Date()\n },\n\n _visibleMonthIndex: Number,\n\n _desktopMode: Boolean,\n\n _translateX: {\n observer: '_translateXChanged'\n },\n\n _yearScrollerWidth: {\n value: 50\n },\n\n i18n: {\n type: Object\n },\n\n showWeekNumbers: {\n type: Boolean\n },\n\n _ignoreTaps: Boolean,\n\n _notTapping: Boolean,\n\n /**\n * The earliest date that can be selected. All earlier dates will be disabled.\n */\n minDate: Date,\n\n /**\n * The latest date that can be selected. All later dates will be disabled.\n */\n maxDate: Date,\n\n _focused: Boolean,\n\n /**\n * Input label\n */\n label: String\n };\n }\n\n get __isRTL() {\n return this.getAttribute('dir') === 'rtl';\n }\n\n ready() {\n super.ready();\n this.setAttribute('tabindex', 0);\n this.addEventListener('keydown', this._onKeydown.bind(this));\n addListener(this, 'tap', this._stopPropagation);\n this.addEventListener('focus', this._onOverlayFocus.bind(this));\n this.addEventListener('blur', this._onOverlayBlur.bind(this));\n }\n\n /**\n * Fired when the scroller reaches the target scrolling position.\n * @event scroll-animation-finished\n * @param {Number} detail.position new position\n * @param {Number} detail.oldPosition old position\n */\n\n connectedCallback() {\n super.connectedCallback();\n this._closeYearScroller();\n this._toggleAnimateClass(true);\n setTouchAction(this.$.scrollers, 'pan-y');\n IronA11yAnnouncer.requestAvailability();\n }\n\n announceFocusedDate() {\n var focusedDate = this._currentlyFocusedDate();\n var announce = [];\n if (DatePickerHelper._dateEquals(focusedDate, new Date())) {\n announce.push(this.i18n.today);\n }\n announce = announce.concat([\n this.i18n.weekdays[focusedDate.getDay()],\n focusedDate.getDate(),\n this.i18n.monthNames[focusedDate.getMonth()],\n focusedDate.getFullYear()\n ]);\n if (this.showWeekNumbers && this.i18n.firstDayOfWeek === 1) {\n announce.push(this.i18n.week);\n announce.push(DatePickerHelper._getISOWeekNumber(focusedDate));\n }\n this.dispatchEvent(new CustomEvent('iron-announce', {\n bubbles: true,\n composed: true,\n detail: {\n text: announce.join(' ')\n }\n }));\n return;\n }\n\n /**\n * Focuses the cancel button\n */\n focusCancel() {\n this.$.cancelButton.focus();\n }\n\n /**\n * Scrolls the list to the given Date.\n */\n scrollToDate(date, animate) {\n this._scrollToPosition(this._differenceInMonths(date, this._originDate), animate);\n }\n\n _focusedDateChanged(focusedDate) {\n this.revealDate(focusedDate);\n }\n\n _isCurrentYear(yearsFromNow) {\n return yearsFromNow === 0;\n }\n\n _isSelectedYear(yearsFromNow, selectedDate) {\n if (selectedDate) {\n return selectedDate.getFullYear() === this._originDate.getFullYear() + yearsFromNow;\n }\n }\n\n /**\n * Scrolls the month and year scrollers enough to reveal the given date.\n */\n revealDate(date) {\n if (date) {\n var diff = this._differenceInMonths(date, this._originDate);\n var scrolledAboveViewport = this.$.monthScroller.position > diff;\n\n var visibleItems = this.$.monthScroller.clientHeight / this.$.monthScroller.itemHeight;\n var scrolledBelowViewport = this.$.monthScroller.position + visibleItems - 1 < diff;\n\n if (scrolledAboveViewport) {\n this._scrollToPosition(diff, true);\n } else if (scrolledBelowViewport) {\n this._scrollToPosition(diff - visibleItems + 1, true);\n }\n }\n }\n\n _onOverlayFocus() {\n this._focused = true;\n }\n\n _onOverlayBlur() {\n this._focused = false;\n }\n\n _initialPositionChanged(initialPosition) {\n this.scrollToDate(initialPosition);\n }\n\n _repositionYearScroller() {\n this._visibleMonthIndex = Math.floor(this.$.monthScroller.position);\n this.$.yearScroller.position = (this.$.monthScroller.position + this._originDate.getMonth()) / 12;\n }\n\n _repositionMonthScroller() {\n this.$.monthScroller.position = this.$.yearScroller.position * 12 - this._originDate.getMonth();\n this._visibleMonthIndex = Math.floor(this.$.monthScroller.position);\n }\n\n _onMonthScroll() {\n this._repositionYearScroller();\n this._doIgnoreTaps();\n }\n\n _onYearScroll() {\n this._repositionMonthScroller();\n this._doIgnoreTaps();\n }\n\n _onYearScrollTouchStart() {\n this._notTapping = false;\n setTimeout(() => this._notTapping = true, 300);\n\n this._repositionMonthScroller();\n }\n\n _onMonthScrollTouchStart() {\n this._repositionYearScroller();\n }\n\n _doIgnoreTaps() {\n this._ignoreTaps = true;\n this._debouncer = Debouncer.debounce(this._debouncer,\n timeOut.after(300), () => this._ignoreTaps = false);\n }\n\n _formatDisplayed(date, formatDate, label) {\n if (date) {\n return formatDate(DatePickerHelper._extractDateParts(date));\n } else {\n return label;\n }\n }\n\n _onTodayTap() {\n var today = new Date();\n\n if (Math.abs(this.$.monthScroller.position - this._differenceInMonths(today, this._originDate)) < 0.001) {\n // Select today only if the month scroller is positioned approximately\n // at the beginning of the current month\n this.selectedDate = today;\n this._close();\n } else {\n this._scrollToCurrentMonth();\n }\n }\n\n _scrollToCurrentMonth() {\n if (this.focusedDate) {\n this.focusedDate = new Date();\n }\n\n this.scrollToDate(new Date(), true);\n }\n\n _showClear(selectedDate) {\n return !!selectedDate;\n }\n\n _onYearTap(e) {\n if (!this._ignoreTaps && !this._notTapping) {\n var scrollDelta = e.detail.y - (this.$.yearScroller.getBoundingClientRect().top + this.$.yearScroller.clientHeight / 2);\n var yearDelta = scrollDelta / this.$.yearScroller.itemHeight;\n this._scrollToPosition(this.$.monthScroller.position + yearDelta * 12, true);\n }\n }\n\n _scrollToPosition(targetPosition, animate) {\n if (this._targetPosition !== undefined) {\n this._targetPosition = targetPosition;\n return;\n }\n\n if (!animate) {\n this.$.monthScroller.position = targetPosition;\n this._targetPosition = undefined;\n this._repositionYearScroller();\n return;\n }\n\n this._targetPosition = targetPosition;\n\n // http://gizma.com/easing/\n var easingFunction = (t, b, c, d) => {\n t /= d / 2;\n if (t < 1) {\n return c / 2 * t * t + b;\n }\n t--;\n return -c / 2 * (t * (t - 2) - 1) + b;\n };\n\n var duration = animate ? 300 : 0;\n var start = 0;\n var initialPosition = this.$.monthScroller.position;\n\n var smoothScroll = timestamp => {\n start = start || timestamp;\n var currentTime = timestamp - start;\n\n if (currentTime < duration) {\n var currentPos = easingFunction(currentTime, initialPosition, this._targetPosition - initialPosition, duration);\n this.$.monthScroller.position = currentPos;\n window.requestAnimationFrame(smoothScroll);\n } else {\n this.dispatchEvent(new CustomEvent('scroll-animation-finished', {\n bubbles: true,\n composed: true,\n detail: {\n position: this._targetPosition,\n oldPosition: initialPosition\n }\n }));\n\n this.$.monthScroller.position = this._targetPosition;\n this._targetPosition = undefined;\n }\n\n setTimeout(this._repositionYearScroller.bind(this), 1);\n };\n\n // Start the animation.\n window.requestAnimationFrame(smoothScroll);\n }\n\n _limit(value, range) {\n return Math.min(range.max, Math.max(range.min, value));\n }\n\n _handleTrack(e) {\n // Check if horizontal movement threshold (dx) not exceeded or\n // scrolling fast vertically (ddy).\n if (Math.abs(e.detail.dx) < 10 || Math.abs(e.detail.ddy) > 10) {\n return;\n }\n\n // If we're flinging quickly -> start animating already.\n if (Math.abs(e.detail.ddx) > this._yearScrollerWidth / 3) {\n this._toggleAnimateClass(true);\n }\n\n var newTranslateX = this._translateX + e.detail.ddx;\n this._translateX = this._limit(newTranslateX, {\n min: 0,\n max: this._yearScrollerWidth\n });\n }\n\n _track(e) {\n if (this._desktopMode) {\n // No need to track for swipe gestures on desktop.\n return;\n }\n\n switch (e.detail.state) {\n case 'start':\n this._toggleAnimateClass(false);\n break;\n\n case 'track':\n this._handleTrack(e);\n break;\n\n case 'end':\n this._toggleAnimateClass(true);\n if (this._translateX >= this._yearScrollerWidth / 2) {\n this._closeYearScroller();\n } else {\n this._openYearScroller();\n }\n break;\n }\n }\n\n _toggleAnimateClass(enable) {\n if (enable) {\n this.classList.add('animate');\n } else {\n this.classList.remove('animate');\n }\n }\n\n _toggleYearScroller() {\n this._isYearScrollerVisible() ? this._closeYearScroller() : this._openYearScroller();\n }\n\n _openYearScroller() {\n this._translateX = 0;\n this.setAttribute('years-visible', '');\n }\n\n _closeYearScroller() {\n this.removeAttribute('years-visible');\n this._translateX = this._yearScrollerWidth;\n }\n\n _isYearScrollerVisible() {\n return this._translateX < this._yearScrollerWidth / 2;\n }\n\n _translateXChanged(x) {\n if (!this._desktopMode) {\n this.$.monthScroller.style.transform = 'translateX(' + (x - this._yearScrollerWidth) + 'px)';\n this.$.yearScroller.style.transform = 'translateX(' + x + 'px)';\n }\n }\n\n _yearAfterXYears(index) {\n var result = new Date(this._originDate);\n result.setFullYear(parseInt(index) + this._originDate.getFullYear());\n return result.getFullYear();\n }\n\n _yearAfterXMonths(months) {\n return this._dateAfterXMonths(months).getFullYear();\n }\n\n _dateAfterXMonths(months) {\n var result = new Date(this._originDate);\n result.setDate(1);\n result.setMonth(parseInt(months) + this._originDate.getMonth());\n return result;\n }\n\n _differenceInMonths(date1, date2) {\n var months = (date1.getFullYear() - date2.getFullYear()) * 12;\n return months - date2.getMonth() + date1.getMonth();\n }\n\n _differenceInYears(date1, date2) {\n return this._differenceInMonths(date1, date2) / 12;\n }\n\n _clear() {\n this.selectedDate = '';\n }\n\n _close() {\n const overlayContent = this.getRootNode().host;\n const overlay = overlayContent ? overlayContent.getRootNode().host : null;\n if (overlay) {\n overlay.opened = false;\n }\n\n this.dispatchEvent(new CustomEvent('close', {bubbles: true, composed: true}));\n }\n\n _cancel() {\n this.focusedDate = this.selectedDate;\n this._close();\n }\n\n _preventDefault(e) {\n e.preventDefault();\n }\n\n /**\n * Keyboard Navigation\n */\n _eventKey(e) {\n var keys = ['down', 'up', 'right', 'left', 'enter', 'space', 'home', 'end', 'pageup', 'pagedown', 'tab', 'esc'];\n\n for (var i = 0; i < keys.length; i++) {\n var k = keys[i];\n if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, k)) {\n return k;\n }\n }\n }\n\n _onKeydown(e) {\n var focus = this._currentlyFocusedDate();\n\n // Cannot use (today/cancel).focused flag because vaadin-text-field removes it\n // previously in the keydown event.\n const isToday = e.composedPath().indexOf(this.$.todayButton) >= 0;\n const isCancel = e.composedPath().indexOf(this.$.cancelButton) >= 0;\n const isScroller = !isToday && !isCancel;\n\n var eventKey = this._eventKey(e);\n if (eventKey === 'tab') {\n // We handle tabs here and don't want to bubble up.\n e.stopPropagation();\n\n const isFullscreen = this.hasAttribute('fullscreen');\n const isShift = e.shiftKey;\n\n if (isFullscreen) {\n e.preventDefault();\n } else if (isShift && isScroller || !isShift && isCancel) {\n // Return focus back to the input field\n e.preventDefault();\n this.dispatchEvent(new CustomEvent('focus-input', {bubbles: true, composed: true}));\n } else if (isShift && isToday) {\n // Browser returns focus back to the scrollable area. We need to set\n // the focused flag, and move the scroll to focused date.\n this._focused = true;\n setTimeout(() => this.revealDate(this.focusedDate), 1);\n } else {\n // Browser moves the focus out of the scroller, hence focused flag must\n // set to false.\n this._focused = false;\n }\n } else if (eventKey) {\n e.preventDefault();\n e.stopPropagation();\n switch (eventKey) {\n case 'down':\n this._moveFocusByDays(7);\n this.focus();\n break;\n case 'up':\n this._moveFocusByDays(-7);\n this.focus();\n break;\n case 'right':\n if (isScroller) {\n this._moveFocusByDays(this.__isRTL ? -1 : 1);\n }\n break;\n case 'left':\n if (isScroller) {\n this._moveFocusByDays(this.__isRTL ? 1 : -1);\n }\n break;\n case 'enter':\n if (isScroller || isCancel) {\n this._close();\n } else if (isToday) {\n this._onTodayTap();\n }\n break;\n case 'space':\n if (isCancel) {\n this._close();\n } else if (isToday) {\n this._onTodayTap();\n } else {\n var focusedDate = this.focusedDate;\n if (DatePickerHelper._dateEquals(focusedDate, this.selectedDate)) {\n this.selectedDate = '';\n this.focusedDate = focusedDate;\n } else {\n this.selectedDate = focusedDate;\n }\n }\n break;\n case 'home':\n this._moveFocusInsideMonth(focus, 'minDate');\n break;\n case 'end':\n this._moveFocusInsideMonth(focus, 'maxDate');\n break;\n case 'pagedown':\n this._moveFocusByMonths(e.shiftKey ? 12 : 1);\n break;\n case 'pageup':\n this._moveFocusByMonths(e.shiftKey ? -12 : -1);\n break;\n case 'esc':\n this._cancel();\n break;\n }\n }\n }\n\n _currentlyFocusedDate() {\n return this.focusedDate || this.selectedDate || this.initialPosition || new Date();\n }\n\n _focusDate(dateToFocus) {\n this.focusedDate = dateToFocus;\n this._focusedMonthDate = dateToFocus.getDate();\n }\n\n _focusClosestDate(focus) {\n this._focusDate(DatePickerHelper._getClosestDate(focus, [this.minDate, this.maxDate]));\n }\n\n _moveFocusByDays(days) {\n var focus = this._currentlyFocusedDate();\n var dateToFocus = new Date(0, 0);\n dateToFocus.setFullYear(focus.getFullYear());\n dateToFocus.setMonth(focus.getMonth());\n dateToFocus.setDate(focus.getDate() + days);\n\n if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {\n this._focusDate(dateToFocus);\n } else {\n if (this._dateAllowed(focus, this.minDate, this.maxDate)) {\n // Move to min or max date\n if (days > 0) { // down or right\n this._focusDate(this.maxDate);\n } else { // up or left\n this._focusDate(this.minDate);\n }\n } else {\n // Move to closest allowed date\n this._focusClosestDate(focus);\n }\n }\n }\n\n _moveFocusByMonths(months) {\n var focus = this._currentlyFocusedDate();\n var dateToFocus = new Date(0, 0);\n dateToFocus.setFullYear(focus.getFullYear());\n dateToFocus.setMonth(focus.getMonth() + months);\n\n var targetMonth = dateToFocus.getMonth();\n\n dateToFocus.setDate(this._focusedMonthDate || (this._focusedMonthDate = focus.getDate()));\n if (dateToFocus.getMonth() !== targetMonth) {\n dateToFocus.setDate(0);\n }\n\n if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {\n this.focusedDate = dateToFocus;\n } else {\n if (this._dateAllowed(focus, this.minDate, this.maxDate)) {\n // Move to min or max date\n if (months > 0) { // pagedown\n this._focusDate(this.maxDate);\n } else { // pageup\n this._focusDate(this.minDate);\n }\n } else {\n // Move to closest allowed date\n this._focusClosestDate(focus);\n }\n }\n }\n\n _moveFocusInsideMonth(focusedDate, property) {\n var dateToFocus = new Date(0, 0);\n dateToFocus.setFullYear(focusedDate.getFullYear());\n\n if (property === 'minDate') {\n dateToFocus.setMonth(focusedDate.getMonth());\n dateToFocus.setDate(1);\n } else {\n dateToFocus.setMonth(focusedDate.getMonth() + 1);\n dateToFocus.setDate(0);\n }\n\n if (this._dateAllowed(dateToFocus, this.minDate, this.maxDate)) {\n this._focusDate(dateToFocus);\n } else {\n if (this._dateAllowed(focusedDate, this.minDate, this.maxDate)) {\n // Move to minDate or maxDate\n this._focusDate(this[property]);\n } else {\n // Move to closest allowed date\n this._focusClosestDate(focusedDate);\n }\n }\n }\n\n _dateAllowed(date, min, max) {\n return (!min || date >= min) && (!max || date <= max);\n }\n\n _isTodayAllowed(min, max) {\n var today = new Date();\n var todayMidnight = new Date(0, 0);\n todayMidnight.setFullYear(today.getFullYear());\n todayMidnight.setMonth(today.getMonth());\n todayMidnight.setDate(today.getDate());\n return this._dateAllowed(todayMidnight, min, max);\n }\n\n _stopPropagation(e) {\n e.stopPropagation();\n }\n}\n\ncustomElements.define(DatePickerOverlayContentElement.is, DatePickerOverlayContentElement);\n","/**\n@license\nCopyright (c) 2015 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at\nhttp://polymer.github.io/LICENSE.txt The complete set of authors may be found at\nhttp://polymer.github.io/AUTHORS.txt The complete set of contributors may be\nfound at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as\npart of the polymer project is also subject to an additional IP rights grant\nfound at http://polymer.github.io/PATENTS.txt\n*/\nimport '@polymer/polymer/polymer-legacy.js';\n\nimport {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';\nimport {useShadow} from '@polymer/polymer/lib/utils/settings.js';\n\n// Contains all connected resizables that do not have a parent.\nvar ORPHANS = new Set();\n\n/**\n * `IronResizableBehavior` is a behavior that can be used in Polymer elements to\n * coordinate the flow of resize events between \"resizers\" (elements that\n *control the size or hidden state of their children) and \"resizables\" (elements\n *that need to be notified when they are resized or un-hidden by their parents\n *in order to take action on their new measurements).\n *\n * Elements that perform measurement should add the `IronResizableBehavior`\n *behavior to their element definition and listen for the `iron-resize` event on\n *themselves. This event will be fired when they become showing after having\n *been hidden, when they are resized explicitly by another resizable, or when\n *the window has been resized.\n *\n * Note, the `iron-resize` event is non-bubbling.\n *\n * @polymerBehavior\n * @demo demo/index.html\n **/\nexport const IronResizableBehavior = {\n properties: {\n /**\n * The closest ancestor element that implements `IronResizableBehavior`.\n */\n _parentResizable: {\n type: Object,\n observer: '_parentResizableChanged',\n },\n\n /**\n * True if this element is currently notifying its descendant elements of\n * resize.\n */\n _notifyingDescendant: {\n type: Boolean,\n value: false,\n }\n },\n\n listeners: {\n 'iron-request-resize-notifications': '_onIronRequestResizeNotifications'\n },\n\n created: function() {\n // We don't really need property effects on these, and also we want them\n // to be created before the `_parentResizable` observer fires:\n this._interestedResizables = [];\n this._boundNotifyResize = this.notifyResize.bind(this);\n this._boundOnDescendantIronResize = this._onDescendantIronResize.bind(this);\n },\n\n attached: function() {\n this._requestResizeNotifications();\n },\n\n detached: function() {\n if (this._parentResizable) {\n this._parentResizable.stopResizeNotificationsFor(this);\n } else {\n ORPHANS.delete(this);\n window.removeEventListener('resize', this._boundNotifyResize);\n }\n\n this._parentResizable = null;\n },\n\n /**\n * Can be called to manually notify a resizable and its descendant\n * resizables of a resize change.\n */\n notifyResize: function() {\n if (!this.isAttached) {\n return;\n }\n\n this._interestedResizables.forEach(function(resizable) {\n if (this.resizerShouldNotify(resizable)) {\n this._notifyDescendant(resizable);\n }\n }, this);\n\n this._fireResize();\n },\n\n /**\n * Used to assign the closest resizable ancestor to this resizable\n * if the ancestor detects a request for notifications.\n */\n assignParentResizable: function(parentResizable) {\n if (this._parentResizable) {\n this._parentResizable.stopResizeNotificationsFor(this);\n }\n\n this._parentResizable = parentResizable;\n\n if (parentResizable &&\n parentResizable._interestedResizables.indexOf(this) === -1) {\n parentResizable._interestedResizables.push(this);\n parentResizable._subscribeIronResize(this);\n }\n },\n\n /**\n * Used to remove a resizable descendant from the list of descendants\n * that should be notified of a resize change.\n */\n stopResizeNotificationsFor: function(target) {\n var index = this._interestedResizables.indexOf(target);\n\n if (index > -1) {\n this._interestedResizables.splice(index, 1);\n this._unsubscribeIronResize(target);\n }\n },\n\n /**\n * Subscribe this element to listen to iron-resize events on the given target.\n *\n * Preferred over target.listen because the property renamer does not\n * understand to rename when the target is not specifically \"this\"\n *\n * @param {!HTMLElement} target Element to listen to for iron-resize events.\n */\n _subscribeIronResize: function(target) {\n target.addEventListener('iron-resize', this._boundOnDescendantIronResize);\n },\n\n /**\n * Unsubscribe this element from listening to to iron-resize events on the\n * given target.\n *\n * Preferred over target.unlisten because the property renamer does not\n * understand to rename when the target is not specifically \"this\"\n *\n * @param {!HTMLElement} target Element to listen to for iron-resize events.\n */\n _unsubscribeIronResize: function(target) {\n target.removeEventListener(\n 'iron-resize', this._boundOnDescendantIronResize);\n },\n\n /**\n * This method can be overridden to filter nested elements that should or\n * should not be notified by the current element. Return true if an element\n * should be notified, or false if it should not be notified.\n *\n * @param {HTMLElement} element A candidate descendant element that\n * implements `IronResizableBehavior`.\n * @return {boolean} True if the `element` should be notified of resize.\n */\n resizerShouldNotify: function(element) {\n return true;\n },\n\n _onDescendantIronResize: function(event) {\n if (this._notifyingDescendant) {\n event.stopPropagation();\n return;\n }\n\n // no need to use this during shadow dom because of event retargeting\n if (!useShadow) {\n this._fireResize();\n }\n },\n\n _fireResize: function() {\n this.fire('iron-resize', null, {node: this, bubbles: false});\n },\n\n _onIronRequestResizeNotifications: function(event) {\n var target = /** @type {!EventTarget} */ (dom(event).rootTarget);\n if (target === this) {\n return;\n }\n\n target.assignParentResizable(this);\n this._notifyDescendant(target);\n\n event.stopPropagation();\n },\n\n _parentResizableChanged: function(parentResizable) {\n if (parentResizable) {\n window.removeEventListener('resize', this._boundNotifyResize);\n }\n },\n\n _notifyDescendant: function(descendant) {\n // NOTE(cdata): In IE10, attached is fired on children first, so it's\n // important not to notify them if the parent is not attached yet (or\n // else they will get redundantly notified when the parent attaches).\n if (!this.isAttached) {\n return;\n }\n\n this._notifyingDescendant = true;\n descendant.notifyResize();\n this._notifyingDescendant = false;\n },\n\n _requestResizeNotifications: function() {\n if (!this.isAttached) {\n return;\n }\n\n if (document.readyState === 'loading') {\n var _requestResizeNotifications =\n this._requestResizeNotifications.bind(this);\n document.addEventListener(\n 'readystatechange', function readystatechanged() {\n document.removeEventListener('readystatechange', readystatechanged);\n _requestResizeNotifications();\n });\n } else {\n this._findParent();\n\n if (!this._parentResizable) {\n // If this resizable is an orphan, tell other orphans to try to find\n // their parent again, in case it's this resizable.\n ORPHANS.forEach(function(orphan) {\n if (orphan !== this) {\n orphan._findParent();\n }\n }, this);\n\n window.addEventListener('resize', this._boundNotifyResize);\n this.notifyResize();\n } else {\n // If this resizable has a parent, tell other child resizables of\n // that parent to try finding their parent again, in case it's this\n // resizable.\n this._parentResizable._interestedResizables\n .forEach(function(resizable) {\n if (resizable !== this) {\n resizable._findParent();\n }\n }, this);\n }\n }\n },\n\n _findParent: function() {\n this.assignParentResizable(null);\n this.fire(\n 'iron-request-resize-notifications',\n null,\n {node: this, bubbles: true, cancelable: true});\n\n if (!this._parentResizable) {\n ORPHANS.add(this);\n } else {\n ORPHANS.delete(this);\n }\n }\n};\n","/**\n@license\nCopyright (c) 2017 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nimport { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';\n\nimport { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';\nimport { DatePickerHelper } from './vaadin-date-picker-helper.js';\nimport { addListener } from '@polymer/polymer/lib/utils/gestures.js';\nimport { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';\n\n/**\n * @polymerMixin\n */\nexport const DatePickerMixin = subclass => class VaadinDatePickerMixin extends mixinBehaviors(\n [IronResizableBehavior], subclass\n) {\n\n static get properties() {\n return {\n /**\n * The current selected date.\n * @type {Date | undefined}\n * @protected\n */\n _selectedDate: {\n type: Date\n },\n\n /**\n * @type {Date | undefined}\n * @protected\n */\n _focusedDate: Date,\n\n /**\n * The value for this element.\n *\n * Supported date formats:\n * - ISO 8601 `\"YYYY-MM-DD\"` (default)\n * - 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`\n *\n * @type {string}\n */\n value: {\n type: String,\n observer: '_valueChanged',\n notify: true,\n value: ''\n },\n\n /**\n * Set to true to mark the input as required.\n * @type {boolean}\n */\n required: {\n type: Boolean,\n value: false\n },\n\n /**\n * The name of this element.\n */\n name: {\n type: String\n },\n\n /**\n * Date which should be visible when there is no value selected.\n *\n * The same date formats as for the `value` property are supported.\n * @attr {string} initial-position\n */\n initialPosition: String,\n\n /**\n * The label for this element.\n */\n label: String,\n\n /**\n * Set true to open the date selector overlay.\n */\n opened: {\n type: Boolean,\n reflectToAttribute: true,\n notify: true,\n observer: '_openedChanged'\n },\n\n /**\n * Set true to prevent the overlay from opening automatically.\n * @attr {boolean} auto-open-disabled\n */\n autoOpenDisabled: Boolean,\n\n /**\n * Set true to display ISO-8601 week numbers in the calendar. Notice that\n * displaying week numbers is only supported when `i18n.firstDayOfWeek`\n * is 1 (Monday).\n * @attr {boolean} show-week-numbers\n */\n showWeekNumbers: {\n type: Boolean\n },\n\n /**\n * @type {boolean}\n * @protected\n */\n _fullscreen: {\n value: false,\n observer: '_fullscreenChanged'\n },\n\n /**\n * @type {string}\n * @protected\n */\n _fullscreenMediaQuery: {\n value: '(max-width: 420px), (max-height: 420px)'\n },\n\n /**\n * An array of ancestor elements whose -webkit-overflow-scrolling is forced from value\n * 'touch' to value 'auto' in order to prevent them from clipping the dropdown. iOS only.\n * @private\n */\n _touchPrevented: Array,\n\n /**\n * The object used to localize this component.\n * To change the default localization, replace the entire\n * _i18n_ object or just the property you want to modify.\n *\n * The object has the following JSON structure and default values:\n\n {\n // An array with the full names of months starting\n // with January.\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September',\n 'October', 'November', 'December'\n ],\n\n // An array of weekday names starting with Sunday. Used\n // in screen reader announcements.\n weekdays: [\n 'Sunday', 'Monday', 'Tuesday', 'Wednesday',\n 'Thursday', 'Friday', 'Saturday'\n ],\n\n // An array of short weekday names starting with Sunday.\n // Displayed in the calendar.\n weekdaysShort: [\n 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'\n ],\n\n // An integer indicating the first day of the week\n // (0 = Sunday, 1 = Monday, etc.).\n firstDayOfWeek: 0,\n\n // Used in screen reader announcements along with week\n // numbers, if they are displayed.\n week: 'Week',\n\n // Translation of the Calendar icon button title.\n calendar: 'Calendar',\n\n // Translation of the Clear icon button title.\n clear: 'Clear',\n\n // Translation of the Today shortcut button text.\n today: 'Today',\n\n // Translation of the Cancel button text.\n cancel: 'Cancel',\n\n // A function to format given `Object` as\n // date string. Object is in the format `{ day: ..., month: ..., year: ... }`\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n formatDate: d => {\n // returns a string representation of the given\n // object in 'MM/DD/YYYY' -format\n },\n\n // A function to parse the given text to an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n // Must properly parse (at least) text formatted by `formatDate`.\n // Setting the property to null will disable keyboard input feature.\n // Note: The argument month is 0-based. This means that January = 0 and December = 11.\n parseDate: text => {\n // Parses a string in 'MM/DD/YY', 'MM/DD' or 'DD' -format to\n // an `Object` in the format `{ day: ..., month: ..., year: ... }`.\n }\n\n // A function to format given `monthName` and\n // `fullYear` integer as calendar title string.\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n }\n\n * @type {!DatePickerI18n}\n * @default {English/US}\n */\n i18n: {\n type: Object,\n value: () => {\n return {\n monthNames: [\n 'January', 'February', 'March', 'April', 'May',\n 'June', 'July', 'August', 'September', 'October', 'November', 'December'\n ],\n weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n firstDayOfWeek: 0,\n week: 'Week',\n calendar: 'Calendar',\n clear: 'Clear',\n today: 'Today',\n cancel: 'Cancel',\n formatDate: d => {\n const yearStr = String(d.year).replace(/\\d+/, y => '0000'.substr(y.length) + y);\n return [d.month + 1, d.day, yearStr].join('/');\n },\n parseDate: text => {\n const parts = text.split('/');\n const today = new Date();\n let date, month = today.getMonth(), year = today.getFullYear();\n\n if (parts.length === 3) {\n year = parseInt(parts[2]);\n if (parts[2].length < 3 && year >= 0) {\n year += year < 50 ? 2000 : 1900;\n }\n month = parseInt(parts[0]) - 1;\n date = parseInt(parts[1]);\n } else if (parts.length === 2) {\n month = parseInt(parts[0]) - 1;\n date = parseInt(parts[1]);\n } else if (parts.length === 1) {\n date = parseInt(parts[0]);\n }\n\n if (date !== undefined) {\n return {day: date, month, year};\n }\n },\n formatTitle: (monthName, fullYear) => {\n return monthName + ' ' + fullYear;\n }\n };\n }\n },\n\n /**\n * The earliest date that can be selected. All earlier dates will be disabled.\n *\n * Supported date formats:\n * - ISO 8601 `\"YYYY-MM-DD\"` (default)\n * - 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`\n *\n * @type {string | undefined}\n */\n min: {\n type: String,\n observer: '_minChanged'\n },\n\n /**\n * The latest date that can be selected. All later dates will be disabled.\n *\n * Supported date formats:\n * - ISO 8601 `\"YYYY-MM-DD\"` (default)\n * - 6-digit extended ISO 8601 `\"+YYYYYY-MM-DD\"`, `\"-YYYYYY-MM-DD\"`\n *\n * @type {string | undefined}\n */\n max: {\n type: String,\n observer: '_maxChanged'\n },\n\n /**\n * The earliest date that can be selected. All earlier dates will be disabled.\n * @type {Date | string}\n * @protected\n */\n _minDate: {\n type: Date,\n // null does not work here because minimizer passes undefined to overlay (#351)\n value: ''\n },\n\n /**\n * The latest date that can be selected. All later dates will be disabled.\n * @type {Date | string}\n * @protected\n */\n _maxDate: {\n type: Date,\n value: ''\n },\n\n /** @private */\n _noInput: {\n type: Boolean,\n computed: '_isNoInput(_fullscreen, _ios, i18n, i18n.*)'\n },\n\n /** @private */\n _ios: {\n type: Boolean,\n value: navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\\d+)/)\n },\n\n /** @private */\n _webkitOverflowScroll: {\n type: Boolean,\n value: document.createElement('div').style.webkitOverflowScrolling === ''\n },\n\n /** @private */\n _ignoreAnnounce: {\n value: true\n },\n\n /** @private */\n _focusOverlayOnOpen: Boolean,\n\n /** @protected */\n _overlayInitialized: Boolean\n };\n }\n\n static get observers() {\n return [\n '_updateHasValue(value)',\n '_selectedDateChanged(_selectedDate, i18n.formatDate)',\n '_focusedDateChanged(_focusedDate, i18n.formatDate)',\n '_announceFocusedDate(_focusedDate, opened, _ignoreAnnounce)'\n ];\n }\n\n /** @protected */\n ready() {\n super.ready();\n this._boundOnScroll = this._onScroll.bind(this);\n this._boundFocus = this._focus.bind(this);\n this._boundUpdateAlignmentAndPosition = this._updateAlignmentAndPosition.bind(this);\n\n const isClearButton = e => {\n const path = e.composedPath();\n const inputIndex = path.indexOf(this._inputElement);\n return path.slice(0, inputIndex)\n .filter(el => el.getAttribute && el.getAttribute('part') === 'clear-button')\n .length === 1;\n };\n\n addListener(this, 'tap', e => {\n // FIXME(platosha): use preventDefault in the text field clear button,\n // then the following composedPath check could be simplified down\n // to `if (!e.defaultPrevented)`.\n // https://github.com/vaadin/vaadin-text-field/issues/352\n if (!isClearButton(e) && (!this.autoOpenDisabled || this._noInput)) {\n this.open();\n }\n });\n\n this.addEventListener('touchend', e => {\n if (!isClearButton(e)) {\n e.preventDefault();\n }\n });\n this.addEventListener('keydown', this._onKeydown.bind(this));\n this.addEventListener('input', this._onUserInput.bind(this));\n this.addEventListener('focus', e => this._noInput && e.target.blur());\n this.addEventListener('blur', e => {\n if (!this.opened) {\n if (this.autoOpenDisabled) {\n const parsedDate = this._getParsedDate();\n if (this._isValidDate(parsedDate)) {\n this._selectedDate = parsedDate;\n }\n }\n\n if (this._inputElement.value === '' && this.__dispatchChange) {\n this.validate();\n this.value = '';\n this.__dispatchChange = false;\n } else {\n this.validate();\n }\n }\n });\n }\n\n /** @private */\n _initOverlay() {\n this.$.overlay.removeAttribute('disable-upgrade');\n this._overlayInitialized = true;\n\n this.$.overlay.addEventListener('opened-changed', e => this.opened = e.detail.value);\n\n this._overlayContent.addEventListener('close', this._close.bind(this));\n this._overlayContent.addEventListener('focus-input', this._focusAndSelect.bind(this));\n this.$.overlay.addEventListener('vaadin-overlay-escape-press', this._boundFocus);\n\n // Keep focus attribute in focusElement for styling\n this._overlayContent.addEventListener('focus', () => this.focusElement._setFocused(true));\n\n this.$.overlay.addEventListener('vaadin-overlay-close', this._onVaadinOverlayClose.bind(this));\n\n const bringToFrontListener = (e) => {\n if (this.$.overlay.bringToFront) {\n requestAnimationFrame(() => {\n this.$.overlay.bringToFront();\n });\n }\n };\n\n this.addEventListener('mousedown', bringToFrontListener);\n this.addEventListener('touchstart', bringToFrontListener);\n }\n\n /** @protected */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this._overlayInitialized) {\n this.$.overlay.removeEventListener('vaadin-overlay-escape-press', this._boundFocus);\n }\n\n this.opened = false;\n }\n\n /**\n * Opens the dropdown.\n */\n open() {\n if (!this.disabled && !this.readonly) {\n this.opened = true;\n }\n }\n\n /** @private */\n _close(e) {\n if (e) {\n e.stopPropagation();\n }\n this._focus();\n this.close();\n }\n\n /**\n * Closes the dropdown.\n */\n close() {\n if (this._overlayInitialized || this.autoOpenDisabled) {\n this.$.overlay.close();\n }\n }\n\n /**\n * @return {HTMLElement}\n * @protected\n */\n get _inputElement() {\n return this._input();\n }\n\n /** @private */\n get _nativeInput() {\n if (this._inputElement) {\n // vaadin-text-field's input is focusElement\n // iron-input's input is inputElement\n return this._inputElement.focusElement ? this._inputElement.focusElement :\n this._inputElement.inputElement ? this._inputElement.inputElement :\n window.unwrap ? window.unwrap(this._inputElement) : this._inputElement;\n }\n }\n\n /** @private */\n _parseDate(str) {\n // Parsing with RegExp to ensure correct format\n var parts = /^([-+]\\d{1}|\\d{2,4}|[-+]\\d{6})-(\\d{1,2})-(\\d{1,2})$/.exec(str);\n if (!parts) {\n return;\n }\n\n var date = new Date(0, 0); // Wrong date (1900-01-01), but with midnight in local time\n date.setFullYear(parseInt(parts[1], 10));\n date.setMonth(parseInt(parts[2], 10) - 1);\n date.setDate(parseInt(parts[3], 10));\n return date;\n }\n\n /** @private */\n _isNoInput(fullscreen, ios, i18n) {\n return !this._inputElement || fullscreen || ios || !i18n.parseDate;\n }\n\n /** @private */\n _formatISO(date) {\n if (!(date instanceof Date)) {\n return '';\n }\n\n const pad = (num, fmt = '00') => (fmt + num).substr((fmt + num).length - fmt.length);\n\n let yearSign = '';\n let yearFmt = '0000';\n let yearAbs = date.getFullYear();\n if (yearAbs < 0) {\n yearAbs = -yearAbs;\n yearSign = '-';\n yearFmt = '000000';\n } else if (date.getFullYear() >= 10000) {\n yearSign = '+';\n yearFmt = '000000';\n }\n\n const year = yearSign + pad(yearAbs, yearFmt);\n const month = pad(date.getMonth() + 1);\n const day = pad(date.getDate());\n return [year, month, day].join('-');\n }\n\n /** @private */\n _openedChanged(opened) {\n if (opened && !this._overlayInitialized) {\n this._initOverlay();\n }\n if (this._overlayInitialized) {\n this.$.overlay.opened = opened;\n }\n if (opened) {\n this._updateAlignmentAndPosition();\n }\n }\n\n /** @private */\n _selectedDateChanged(selectedDate, formatDate) {\n if (selectedDate === undefined || formatDate === undefined) {\n return;\n }\n if (this.__userInputOccurred) {\n this.__dispatchChange = true;\n }\n const value = this._formatISO(selectedDate);\n\n this.__keepInputValue || this._applyInputValue(selectedDate);\n\n if (value !== this.value) {\n this.validate();\n this.value = value;\n }\n this.__userInputOccurred = false;\n this.__dispatchChange = false;\n this._ignoreFocusedDateChange = true;\n this._focusedDate = selectedDate;\n this._ignoreFocusedDateChange = false;\n }\n\n /** @private */\n _focusedDateChanged(focusedDate, formatDate) {\n if (focusedDate === undefined || formatDate === undefined) {\n return;\n }\n this.__userInputOccurred = true;\n if (!this._ignoreFocusedDateChange && !this._noInput) {\n this._applyInputValue(focusedDate);\n }\n }\n\n /** @private */\n _updateHasValue(value) {\n if (value) {\n this.setAttribute('has-value', '');\n } else {\n this.removeAttribute('has-value');\n }\n }\n\n /** @private */\n __getOverlayTheme(theme, overlayInitialized) {\n if (overlayInitialized) {\n return theme;\n }\n }\n\n /** @private */\n _handleDateChange(property, value, oldValue) {\n if (!value) {\n this[property] = '';\n return;\n }\n\n var date = this._parseDate(value);\n if (!date) {\n this.value = oldValue;\n return;\n }\n if (!DatePickerHelper._dateEquals(this[property], date)) {\n this[property] = date;\n this.value && this.validate();\n }\n }\n\n /** @private */\n _valueChanged(value, oldValue) {\n if (this.__dispatchChange) {\n this.dispatchEvent(new CustomEvent('change', {bubbles: true}));\n }\n this._handleDateChange('_selectedDate', value, oldValue);\n }\n\n /** @private */\n _minChanged(value, oldValue) {\n this._handleDateChange('_minDate', value, oldValue);\n }\n\n /** @private */\n _maxChanged(value, oldValue) {\n this._handleDateChange('_maxDate', value, oldValue);\n }\n\n /** @private */\n _updateAlignmentAndPosition() {\n if (!this._overlayInitialized) {\n return;\n }\n if (!this._fullscreen) {\n const inputRect = this._inputElement.getBoundingClientRect();\n\n const bottomAlign = inputRect.top > window.innerHeight / 2;\n const rightAlign = inputRect.left + this.clientWidth / 2 > window.innerWidth / 2;\n\n if (rightAlign) {\n const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);\n this.$.overlay.setAttribute('right-aligned', '');\n this.$.overlay.style.removeProperty('left');\n this.$.overlay.style.right = (viewportWidth - inputRect.right) + 'px';\n } else {\n this.$.overlay.removeAttribute('right-aligned');\n this.$.overlay.style.removeProperty('right');\n this.$.overlay.style.left = inputRect.left + 'px';\n }\n\n if (bottomAlign) {\n const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);\n this.$.overlay.setAttribute('bottom-aligned', '');\n this.$.overlay.style.removeProperty('top');\n this.$.overlay.style.bottom = (viewportHeight - inputRect.top) + 'px';\n } else {\n this.$.overlay.removeAttribute('bottom-aligned');\n this.$.overlay.style.removeProperty('bottom');\n this.$.overlay.style.top = inputRect.bottom + 'px';\n }\n }\n\n this.$.overlay.setAttribute('dir',\n getComputedStyle(this._inputElement).getPropertyValue('direction')\n );\n this._overlayContent._repositionYearScroller();\n }\n\n /** @private */\n _fullscreenChanged() {\n if (this._overlayInitialized && this.$.overlay.opened) {\n this._updateAlignmentAndPosition();\n }\n }\n\n /** @protected */\n _onOverlayOpened() {\n this._openedWithFocusRing = this.hasAttribute('focus-ring') || (this.focusElement && this.focusElement.hasAttribute('focus-ring'));\n\n var parsedInitialPosition = this._parseDate(this.initialPosition);\n\n var initialPosition = this._selectedDate || this._overlayContent.initialPosition ||\n parsedInitialPosition || new Date();\n\n if (parsedInitialPosition ||\n DatePickerHelper._dateAllowed(initialPosition, this._minDate, this._maxDate)) {\n this._overlayContent.initialPosition = initialPosition;\n } else {\n this._overlayContent.initialPosition =\n DatePickerHelper._getClosestDate(initialPosition, [this._minDate, this._maxDate]);\n }\n\n this._overlayContent.scrollToDate(this._overlayContent.focusedDate || this._overlayContent.initialPosition);\n // Have a default focused date\n this._ignoreFocusedDateChange = true;\n this._overlayContent.focusedDate = this._overlayContent.focusedDate || this._overlayContent.initialPosition;\n this._ignoreFocusedDateChange = false;\n\n window.addEventListener('scroll', this._boundOnScroll, true);\n this.addEventListener('iron-resize', this._boundUpdateAlignmentAndPosition);\n\n if (this._webkitOverflowScroll) {\n this._touchPrevented = this._preventWebkitOverflowScrollingTouch(this.parentElement);\n }\n\n if (this._focusOverlayOnOpen) {\n this._overlayContent.focus();\n this._focusOverlayOnOpen = false;\n } else {\n this._focus();\n }\n\n if (this._noInput && this.focusElement) {\n this.focusElement.blur();\n }\n\n this.updateStyles();\n\n this._ignoreAnnounce = false;\n }\n\n // A hack needed for iOS to prevent dropdown from being clipped in an\n // ancestor container with -webkit-overflow-scrolling: touch;\n /** @private */\n _preventWebkitOverflowScrollingTouch(element) {\n var result = [];\n while (element) {\n if (window.getComputedStyle(element).webkitOverflowScrolling === 'touch') {\n var oldInlineValue = element.style.webkitOverflowScrolling;\n element.style.webkitOverflowScrolling = 'auto';\n result.push({\n element: element,\n oldInlineValue: oldInlineValue\n });\n }\n element = element.parentElement;\n }\n return result;\n }\n\n /** @private */\n _selectParsedOrFocusedDate() {\n // Select the parsed input or focused date\n this._ignoreFocusedDateChange = true;\n if (this.i18n.parseDate) {\n const inputValue = this._inputValue || '';\n const parsedDate = this._getParsedDate(inputValue);\n\n if (this._isValidDate(parsedDate)) {\n this._selectedDate = parsedDate;\n } else {\n this.__keepInputValue = true;\n this._selectedDate = null;\n this.__keepInputValue = false;\n }\n } else if (this._focusedDate) {\n this._selectedDate = this._focusedDate;\n }\n this._ignoreFocusedDateChange = false;\n }\n\n /** @protected */\n _onOverlayClosed() {\n this._ignoreAnnounce = true;\n\n window.removeEventListener('scroll', this._boundOnScroll, true);\n this.removeEventListener('iron-resize', this._boundUpdateAlignmentAndPosition);\n\n if (this._touchPrevented) {\n this._touchPrevented.forEach(prevented =>\n prevented.element.style.webkitOverflowScrolling = prevented.oldInlineValue);\n this._touchPrevented = [];\n }\n\n this.updateStyles();\n\n this._selectParsedOrFocusedDate();\n\n if (this._nativeInput && this._nativeInput.selectionStart) {\n this._nativeInput.selectionStart = this._nativeInput.selectionEnd;\n }\n // No need to revalidate the value after `_selectedDateChanged`\n // Needed in case the value was not changed: open and close dropdown.\n if (!this.value) {\n this.validate();\n }\n }\n\n /**\n * Returns true if `value` is valid, and sets the `invalid` flag appropriately.\n *\n * @param {string=} value Value to validate. Optional, defaults to user's input value.\n * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately\n */\n validate() {\n // Note (Yuriy): Workaround `this._inputValue` is used in order\n // to avoid breaking change on custom `checkValidity`.\n // Can be removed with next major.\n return !(this.invalid = !this.checkValidity(this._inputValue));\n }\n\n /**\n * Returns true if the current input value satisfies all constraints (if any)\n *\n * Override the `checkValidity` method for custom validations.\n *\n * @param {string=} value Value to validate. Optional, defaults to the selected date.\n * @return {boolean} True if the value is valid\n */\n checkValidity() {\n const inputValid = !this._inputValue ||\n (this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));\n const minMaxValid = !this._selectedDate ||\n DatePickerHelper._dateAllowed(this._selectedDate, this._minDate, this._maxDate);\n\n let inputValidity = true;\n if (this._inputElement) {\n if (this._inputElement.checkValidity) {\n // vaadin native input elements have the checkValidity method\n this._inputElement.__forceCheckValidity = true;\n inputValidity = this._inputElement.checkValidity();\n this._inputElement.__forceCheckValidity = false;\n } else if (this._inputElement.validate) {\n // iron-form-elements have the validate API\n inputValidity = this._inputElement.validate();\n }\n }\n\n return inputValid && minMaxValid && inputValidity;\n }\n\n /** @private */\n _onScroll(e) {\n if (e.target === window || !this._overlayContent.contains(e.target)) {\n this._updateAlignmentAndPosition();\n }\n }\n\n /** @protected */\n _focus() {\n if (this._noInput) {\n this._overlayInitialized && this._overlayContent.focus();\n } else {\n this._inputElement.focus();\n }\n }\n\n /** @private */\n _focusAndSelect() {\n this._focus();\n this._setSelectionRange(0, this._inputValue.length);\n }\n\n /** @private */\n _applyInputValue(date) {\n this._inputValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';\n }\n\n /** @private */\n _getFormattedDate(formatDate, date) {\n return formatDate(DatePickerHelper._extractDateParts(date));\n }\n\n /** @private */\n _setSelectionRange(a, b) {\n if (this._nativeInput && this._nativeInput.setSelectionRange) {\n this._nativeInput.setSelectionRange(a, b);\n }\n }\n\n /**\n * Keyboard Navigation\n * @private\n */\n _eventKey(e) {\n var keys = ['down', 'up', 'enter', 'esc', 'tab'];\n\n for (var i = 0; i < keys.length; i++) {\n var k = keys[i];\n if (IronA11yKeysBehavior.keyboardEventMatchesKeys(e, k)) {\n return k;\n }\n }\n }\n\n /** @private */\n _isValidDate(d) {\n return d && !isNaN(d.getTime());\n }\n\n /** @private */\n _onKeydown(e) {\n if (this._noInput) {\n // The input element cannot be readonly as it would conflict with\n // the required attribute. Both are not allowed on an input element.\n // Therefore we prevent default on most keydown events.\n var allowedKeys = [\n 9 // tab\n ];\n if (allowedKeys.indexOf(e.keyCode) === -1) {\n e.preventDefault();\n }\n }\n\n switch (this._eventKey(e)) {\n case 'down':\n case 'up':\n // prevent scrolling the page with arrows\n e.preventDefault();\n\n if (this.opened) {\n this._overlayContent.focus();\n this._overlayContent._onKeydown(e);\n } else {\n this._focusOverlayOnOpen = true;\n this.open();\n }\n\n break;\n case 'enter': {\n const parsedDate = this._getParsedDate();\n const isValidDate = this._isValidDate(parsedDate);\n if (this.opened) {\n if (this._overlayInitialized && this._overlayContent.focusedDate && isValidDate) {\n this._selectedDate = this._overlayContent.focusedDate;\n }\n this.close();\n } else {\n if (!isValidDate && this._inputElement.value !== '') {\n this.validate();\n } else {\n const oldValue = this.value;\n this._selectParsedOrFocusedDate();\n if (oldValue === this.value) {\n this.validate();\n }\n }\n }\n break;\n }\n case 'esc':\n if (this.opened) {\n this._focusedDate = this._selectedDate;\n this._close();\n } else if (this.autoOpenDisabled) {\n // Do not restore selected date if Esc was pressed after clearing input field\n if (this._inputElement.value === '') {\n this._selectedDate = null;\n }\n this._applyInputValue(this._selectedDate);\n } else {\n this._focusedDate = this._selectedDate;\n this._selectParsedOrFocusedDate();\n }\n break;\n case 'tab':\n if (this.opened) {\n e.preventDefault();\n // Clear the selection range (remains visible on IE)\n this._setSelectionRange(0, 0);\n if (e.shiftKey) {\n this._overlayContent.focusCancel();\n } else {\n this._overlayContent.focus();\n this._overlayContent.revealDate(this._focusedDate);\n }\n\n }\n break;\n }\n }\n\n /** @private */\n _getParsedDate(inputValue = this._inputValue) {\n const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);\n const parsedDate = dateObject &&\n this._parseDate(dateObject.year + '-' + (dateObject.month + 1) + '-' + dateObject.day);\n return parsedDate;\n }\n\n /** @private */\n _onUserInput(e) {\n if (!this.opened && this._inputElement.value && !this.autoOpenDisabled) {\n this.open();\n }\n this._userInputValueChanged();\n\n if (e.__fromClearButton) {\n this.validate();\n this.__dispatchChange = true;\n this.value = '';\n this.__dispatchChange = false;\n }\n }\n\n /** @private */\n _userInputValueChanged(value) {\n if (this.opened && this._inputValue) {\n const parsedDate = this._getParsedDate();\n\n if (this._isValidDate(parsedDate)) {\n this._ignoreFocusedDateChange = true;\n if (!DatePickerHelper._dateEquals(parsedDate, this._focusedDate)) {\n this._focusedDate = parsedDate;\n }\n this._ignoreFocusedDateChange = false;\n }\n }\n }\n\n /** @private */\n _announceFocusedDate(_focusedDate, opened, _ignoreAnnounce) {\n if (opened && !_ignoreAnnounce) {\n this._overlayContent.announceFocusedDate();\n }\n }\n\n /** @private */\n get _overlayContent() {\n return this.$.overlay.content.querySelector('#overlay-content');\n }\n\n /**\n * Fired when the user commits a value change.\n *\n * @event change\n */\n};\n","/**\n@license\nCopyright (c) 2017 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nimport { PolymerElement } from '@polymer/polymer/polymer-element.js';\n\nimport { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';\nimport '@polymer/iron-media-query/iron-media-query.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';\nimport './vaadin-date-picker-overlay.js';\nimport './vaadin-date-picker-overlay-content.js';\nimport { DatePickerMixin } from './vaadin-date-picker-mixin.js';\nimport './vaadin-date-picker-text-field.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';\n/**\n *\n * `
` is a date selection field which includes a scrollable\n * month calendar view.\n * ```html\n * `](#vaadin-date-picker-light) element.\n *\n * In addition to `` itself, the following internal\n * components are themable:\n *\n * - ``\n * - ``\n * - ``\n * - ``\n *\n * Note: the `theme` attribute value set on `` is\n * propagated to the internal themable components listed above.\n *\n * @extends PolymerElement\n * @mixes ElementMixin\n * @mixes ControlStateMixin\n * @mixes ThemableMixin\n * @mixes DatePickerMixin\n * @mixes GestureEventListeners\n * @demo demo/index.html\n */\nclass DatePickerElement extends\n ElementMixin(\n ControlStateMixin(\n ThemableMixin(\n DatePickerMixin(\n GestureEventListeners(PolymerElement))))) {\n static get template() {\n return html`\n \n\n\n \n
\n \n\n \n \n \n \n \n \n\n \n \n`;\n }\n\n static get is() {\n return 'vaadin-date-picker';\n }\n\n static get version() {\n return '4.3.0-beta1';\n }\n\n static get properties() {\n return {\n /**\n * Set to true to display the clear icon which clears the input.\n * @attr {boolean} clear-button-visible\n * @type {boolean}\n */\n clearButtonVisible: {\n type: Boolean,\n value: false\n },\n\n /**\n * Set to true to disable this element.\n * @type {boolean}\n */\n disabled: {\n type: Boolean,\n value: false,\n reflectToAttribute: true\n },\n\n /**\n * The error message to display when the input is invalid.\n * @attr {string} error-message\n */\n errorMessage: String,\n\n /**\n * A placeholder string in addition to the label. If this is set, the label will always float.\n */\n placeholder: String,\n\n /**\n * Set to true to make this element read-only.\n * @type {boolean}\n */\n readonly: {\n type: Boolean,\n value: false,\n reflectToAttribute: true\n },\n\n /**\n * This property is set to true when the control value invalid.\n * @type {boolean}\n */\n invalid: {\n type: Boolean,\n reflectToAttribute: true,\n notify: true,\n value: false\n },\n\n /** @private */\n _userInputValue: String\n };\n }\n\n static get observers() {\n return [\n '_userInputValueChanged(_userInputValue)',\n '_setClearButtonLabel(i18n.clear)'\n ];\n }\n\n /** @protected */\n ready() {\n super.ready();\n\n // In order to have synchronized invalid property, we need to use the same validate logic.\n afterNextRender(this, () => this._inputElement.validate = () => {});\n\n this._inputElement.addEventListener('change', (e) => {\n // For change event on text-field blur, after the field is cleared,\n // we schedule change event to be dispatched on date-picker blur.\n if (this._inputElement.value === '' && !e.__fromClearButton) {\n this.__dispatchChange = true;\n }\n });\n }\n\n /** @private */\n _onVaadinOverlayClose(e) {\n if (this._openedWithFocusRing && this.hasAttribute('focused')) {\n this.focusElement.setAttribute('focus-ring', '');\n } else if (!this.hasAttribute('focused')) {\n this.focusElement.blur();\n }\n if (e.detail.sourceEvent && e.detail.sourceEvent.composedPath().indexOf(this) !== -1) {\n e.preventDefault();\n }\n }\n\n /** @private */\n _toggle(e) {\n e.stopPropagation();\n this[(this._overlayInitialized && this.$.overlay.opened) ? 'close' : 'open']();\n }\n\n /**\n * @return {HTMLElement}\n * @protected\n */\n _input() {\n return this.$.input;\n }\n\n set _inputValue(value) {\n this._inputElement.value = value;\n }\n\n /** @return {string} */\n get _inputValue() {\n return this._inputElement.value;\n }\n\n /** @private */\n _getAriaExpanded(opened) {\n return Boolean(opened).toString();\n }\n\n /**\n * Focusable element used by vaadin-control-state-mixin\n * @return {!HTMLElement}\n * @protected\n */\n get focusElement() {\n return this._input() || this;\n }\n\n /** @private */\n _setClearButtonLabel(i18nClear) {\n // FIXME(platosha): expose i18n API in \n // https://github.com/vaadin/vaadin-text-field/issues/348\n this._inputElement.shadowRoot.querySelector('[part=\"clear-button\"]')\n .setAttribute('aria-label', i18nClear);\n }\n}\n\ncustomElements.define(DatePickerElement.is, DatePickerElement);\n\nexport { DatePickerElement };\n","import { LitElement, css, html } from \"lit-element\";\r\nimport { repeat } from \"lit-html/directives/repeat.js\";\r\nimport { classMap } from 'lit-html/directives/class-map';\r\nimport '@vaadin/vaadin-date-picker/vaadin-date-picker.js';\r\nimport { axios } from '@bundled-es-modules/axios';\r\n\r\nclass DeliveryProblemComponent extends LitElement {\r\n\r\n static get properties() {\r\n return {\r\n _MainServiceDomain: { type: String },\r\n _loginDetails: { type: Object },\r\n _subscriptionDetails: { type: Object },\r\n _deliveryIssueReasons: { type: Array },\r\n _isReasonsList: { type: Boolean },\r\n _deliveryOptions: { type: Array },\r\n _isOptionsList: { type: Boolean },\r\n _selectedDeliveryIssueReason: { type: Object },\r\n _selectedDeliveryOption: { type: Object },\r\n _submitReportRes: { type: String },\r\n isSystemError: { type: Boolean },\r\n }\r\n }\r\n\r\n get MainServiceDomain() {\r\n return this._MainServiceDomain;\r\n }\r\n\r\n set MainServiceDomain(value) {\r\n this._MainServiceDomain = value;\r\n }\r\n\r\n get loginDetails() {\r\n return this._loginDetails;\r\n }\r\n\r\n set loginDetails(value) {\r\n this._loginDetails = value;\r\n }\r\n\r\n get subscriptionDetails() {\r\n return this._subscriptionDetails;\r\n }\r\n\r\n set subscriptionDetails(value) {\r\n this._subscriptionDetails = value;\r\n }\r\n\r\n get deliveryIssueReasons() {\r\n return this._deliveryIssueReasons;\r\n }\r\n\r\n set deliveryIssueReasons(value) {\r\n this._deliveryIssueReasons = value;\r\n }\r\n\r\n get isReasonsList() {\r\n return this._isReasonsList;\r\n }\r\n\r\n set isReasonsList(value) {\r\n this._isReasonsList = value;\r\n }\r\n\r\n get deliveryOptions() {\r\n return this._deliveryOptions;\r\n }\r\n\r\n set deliveryOptions(value) {\r\n this._deliveryOptions = value;\r\n }\r\n\r\n get isOptionsList() {\r\n return this._isOptionsList;\r\n }\r\n\r\n set isOptionsList(value) {\r\n this._isOptionsList = value;\r\n }\r\n\r\n get selectedDeliveryIssueReason() {\r\n return this._selectedDeliveryIssueReason;\r\n }\r\n\r\n set selectedDeliveryIssueReason(value) {\r\n this._selectedDeliveryIssueReason = value;\r\n }\r\n\r\n get selectedDeliveryOption() {\r\n return this._selectedDeliveryOption;\r\n }\r\n\r\n set selectedDeliveryOption(value) {\r\n this._selectedDeliveryOption = value;\r\n }\r\n\r\n get submitReportRes() {\r\n return this._submitReportRes;\r\n }\r\n\r\n set submitReportRes(value) {\r\n this._submitReportRes = value;\r\n }\r\n\r\n constructor() {\r\n super();\r\n this.isReasonsList = false;\r\n this.isOptionsList = false;\r\n this.isSystemError = false;\r\n document.addEventListener('onSelectSubscription', async(e) => {\r\n this.isReasonsList = false;\r\n this.isOptionsList = false;\r\n this.loginDetails = e.detail.loginDetails;\r\n this.subscriptionDetails = e.detail.selectedSubscription;\r\n await this.getOptions();\r\n })\r\n }\r\n\r\n updated() {\r\n\r\n if (!this.isReasonsList && !this.isOptionsList) {\r\n this.cancelReport();\r\n }\r\n }\r\n\r\n static get styles() {\r\n return css `\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n .text-center {\r\n text-align: center;\r\n }\r\n \r\n .d-none {\r\n display: none;\r\n }\r\n \r\n .d-block {\r\n display: block;\r\n }\r\n \r\n .mg-b5 {\r\n margin-bottom: 5px;\r\n }\r\n \r\n .mg-t5 {\r\n margin-top: 5px;\r\n }\r\n \r\n p {\r\n font-size: 14px;\r\n }\r\n\r\n .width100 {\r\n width: 100%;\r\n }\r\n\r\n .disabled {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n position: relative;\r\n }\r\n\r\n /* Element Style */\r\n .report-box {\r\n border-radius: 35px;\r\n position: relative;\r\n padding: 25px 25px;\r\n width: 100%;\r\n border: 1px solid var(--w-bg-borc, #505050);\r\n background-color: var(--w-bgc, #fff);\r\n box-sizing: border-box;\r\n }\r\n \r\n .report-heading {\r\n font-size: var(--w-tit-fs, 14px);\r\n color: var(--w-tit-col, #000);\r\n background-color: var(--w-tit-bgc, #fff);\r\n padding: 10px;\r\n border-radius: 5px;\r\n }\r\n \r\n .report-error {\r\n background-color: var(--w-txt-bgc, #fff);\r\n border: none;\r\n color: var(--w-txt-col, #434343);\r\n font-size: var(--w-txt-fs, 14px);\r\n padding: 10px;\r\n border-radius: 5px;\r\n }\r\n\r\n .error {\r\n font-size: var(--w-msg-fs, 13px);\r\n color: var(--w-msg-col, #000);\r\n }\r\n\r\n .error-text-color {\r\n color: var(--w-err-sys-col, red);\r\n }\r\n \r\n .btn {\r\n display: inline-block;\r\n font-weight: 400;\r\n text-align: center;\r\n white-space: nowrap;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n border: 1px solid transparent;\r\n padding: 6px 12px;\r\n font-size: 16;\r\n line-height: 1.5;\r\n border-radius: 4px;\r\n }\r\n \r\n .btn:hover, .btn:focus {\r\n text-decoration: none;\r\n }\r\n \r\n .btn:focus, .btn.focus {\r\n outline: 0;\r\n box-shadow: none;\r\n }\r\n \r\n .btn.disabled, .btn:disabled {\r\n opacity: 0.65;\r\n }\r\n \r\n .btn-success {\r\n color: var(--w-btn-col, #505050);\r\n background-color: var(--w-btn-bgc, #fff);\r\n border: 1px solid var(--w-btn-borc, #505050);\r\n font-size: var(--w-btn-fs, 14px);\r\n cursor: pointer;\r\n }\r\n \r\n .btn-success:hover {\r\n color: var(--w-btn-col, #fff);\r\n background-color: var(--w-btn-bgc, #505050);\r\n border: 1px solid var(--w-btn-borc, #505050);\r\n font-size: var(--w-btn-fs, 14px);\r\n cursor: pointer;\r\n }\r\n \r\n .btn-lg {\r\n padding: 8px 16px;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n border-radius: 4px;\r\n }\r\n \r\n .btn-block {\r\n display: block;\r\n width: 100%;\r\n }\r\n \r\n .form-group {\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-flex: 0;\r\n -ms-flex: 0 0 auto;\r\n flex: 0 0 auto;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -ms-flex-flow: row wrap;\r\n flex-flow: row wrap;\r\n -webkit-box-align: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n margin-bottom: 0;\r\n color: var(--form-group-color, #fff);\r\n }\r\n \r\n .form-control {\r\n display: block;\r\n width: 100%;\r\n padding: 8px 12px;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n color: var(--form-control-color, #000);\r\n background-color: var(--form-control-bgColor, #fff);\r\n border: 1px solid var(--form-control-borderColor, #505050);\r\n background-clip: padding-box;\r\n border-radius: 4px;\r\n }\r\n \r\n .form-control:focus {\r\n color: var(--form-control-focus-color, #495057);\r\n background-color: var(--form-control-focus-bgColor, #fff);\r\n border-color: var(--form-control-borderColor, #505050);\r\n outline: 0;\r\n box-shadow: 0 0 0 0.2rem var(--form-control-focus-boxShadow, rgba(65, 157, 255, 0.25));\r\n }\r\n \r\n \r\n .form-control::-webkit-input-placeholder {\r\n color: var(--form-control-placehorderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::-moz-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control:-ms-input-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::-ms-input-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .dropdown {\r\n width: 100%;\r\n position: relative;\r\n }\r\n \r\n /*List*/\r\n .header-dropdown-btn {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n padding-left: 3px;\r\n font-size: 13px;\r\n overflow: hidden;\r\n }\r\n\r\n .dropdown-toogle {\r\n width: 100%;\r\n display: block;\r\n padding: 10px 0;\r\n border-radius: 5px;\r\n background-color: var(--dropdown-button-bgColor, #fff);\r\n color: var(--dropdown-button-Color, #000);\r\n border: 1px solid #dcdcdc;\r\n font-size: var(--widget-txt-fs, 14px);\r\n cursor: pointer;\r\n }\r\n \r\n .dropdown-toogle:focus {\r\n outline: none;\r\n box-shadow: none;\r\n }\r\n\r\n\r\n .dropdown-list {\r\n color: var(--dropdown-list-color, #000);\r\n background-color: var(--dropdown-list-bgColor, #fff);\r\n list-style: none;\r\n position: absolute;\r\n width: 100%;\r\n box-sizing: border-box;\r\n border-radius: 0 0 4px 4px;\r\n margin-top: 0px;\r\n box-shadow: 0 8px 20px 0 #ededed;\r\n z-index: 999;\r\n }\r\n \r\n .dropdown-item {\r\n padding: 5px;\r\n cursor: pointer;\r\n font-size: var(--w-txt-fs, 14px);\r\n }\r\n\r\n .dropdown-item:hover {\r\n background-color: var(--widget-background-bgColor, #000);\r\n color: #fff;\r\n cursor: pointer;\r\n }\r\n\r\n .dropdown-item.active {\r\n background-color: var(--widget-background-bgColor, #000);\r\n color: #fff;\r\n }\r\n \r\n .button-arrow {\r\n position: relative;\r\n padding: 4px 16px 4px 5px;\r\n }\r\n .button-arrow::before {\r\n content: \" \";\r\n position: absolute;\r\n display: inline-block;\r\n transform: rotate(45deg);\r\n right: 10px;\r\n top: 8px;\r\n border-style: solid;\r\n border-width: 0px 1px 1px 0px;\r\n padding: 3px;\r\n }\r\n @media(max-width: 767px) {\r\n .report-box {\r\n padding: 15px;\r\n border-radius: 20px;\r\n }\r\n }\r\n `;\r\n }\r\n\r\n render() {\r\n return html \r\n ``;\r\n }\r\n\r\n dateFormat(inputDate) {\r\n\r\n let date = new Date(inputDate);\r\n inputDate = new Date(inputDate);\r\n\r\n date.setMonth(inputDate.getUTCMonth(), inputDate.getUTCDate());\r\n date.setFullYear(inputDate.getUTCFullYear());\r\n date.setHours(inputDate.getUTCHours());\r\n date.setMinutes(inputDate.getUTCMinutes());\r\n date.setSeconds(inputDate.getUTCSeconds());\r\n date.setMilliseconds(inputDate.getUTCMilliseconds());\r\n\r\n return date;\r\n }\r\n\r\n dateFormatForDisplay(inputDate) {\r\n const date = this.dateFormat(inputDate);\r\n return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\r\n }\r\n\r\n dateFormatForVaadin(inputDate) {\r\n const date = this.dateFormat(inputDate);\r\n return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;\r\n }\r\n\r\n async getOptions() {\r\n try {\r\n\r\n const headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const issueReasons = await axios.get(`${this.MainServiceDomain}/appservices/api/v2/publication/${this.subscriptionDetails.publication}/deliveryissuetypes`, {\r\n headers: headers\r\n });\r\n\r\n const deliveryOptions = await axios.get(`${this.MainServiceDomain}/appservices/api/v2/deliveryissueresolutions`, {\r\n headers: headers\r\n });\r\n\r\n if (issueReasons.data) {\r\n this.deliveryIssueReasons = issueReasons.data;\r\n }\r\n\r\n if (deliveryOptions.data) {\r\n this.deliveryOptions = deliveryOptions.data;\r\n }\r\n\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n }\r\n\r\n async onReportProblem() {\r\n if (this.deliveryIssueReasons) {\r\n this.isReasonsList = true;\r\n this.isOptionsList = true;\r\n }\r\n }\r\n\r\n async showReasons() {\r\n try {\r\n this.isReasonsList = true;\r\n const res = await this.requestUpdate();\r\n if (this.deliveryIssueReasons && res) {\r\n const list = this.shadowRoot.getElementById(\"reasons-list\");\r\n\r\n if (!list.classList.contains(\"d-none\")) {\r\n list.classList.add(\"d-none\");\r\n } else {\r\n list.classList.remove(\"d-none\");\r\n }\r\n }\r\n } catch (error) {\r\n throw error\r\n }\r\n }\r\n\r\n async showDeliveryOptions() {\r\n try {\r\n this.isOptionsList = true;\r\n const res = await this.requestUpdate();\r\n if (this.deliveryOptions && res) {\r\n const list = this.shadowRoot.getElementById(\"options-list\");\r\n\r\n if (!list.classList.contains(\"d-none\")) {\r\n list.classList.add(\"d-none\");\r\n } else {\r\n list.classList.remove(\"d-none\");\r\n }\r\n }\r\n } catch (error) {\r\n throw error;\r\n }\r\n }\r\n\r\n async submitReport() {\r\n try {\r\n this.submitReportRes = '';\r\n this.isSystemError = false;\r\n if (this.selectedDeliveryOption && this.selectedDeliveryIssueReason) {\r\n const detail = {\r\n IssueDate: this.dateFormatForDisplay(this.shadowRoot.getElementById(\"date-of-issue\").value),\r\n selectedDeliveryOption: this.selectedDeliveryOption.code,\r\n selectedDeliveryIssueReason: this.selectedDeliveryIssueReason.code,\r\n subscriptionId: this.subscriptionDetails.subscriptionId,\r\n }\r\n\r\n const header = {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const body = `IssueDate=${detail.IssueDate}&IssueReason=${detail.selectedDeliveryIssueReason}&RequestedResolution=${detail.selectedDeliveryOption}`;\r\n\r\n const res = await axios.post(`${this.MainServiceDomain}/appservices/api/v2/subscription/${detail.subscriptionId}/deliveryissue`, body, {\r\n headers: header\r\n });\r\n\r\n if (res.data.deliveryIssueId) {\r\n this.isReasonsList = false;\r\n this.isOptionsList = false;\r\n\r\n this.submitReportRes = '';\r\n } else {\r\n this.submitReportRes = \"Something went wrong\";\r\n }\r\n } else {\r\n this.submitReportRes = 'Please select a reason and delivery option';\r\n }\r\n\r\n } catch (error) {\r\n if (error.response.data && error.response.data != '' && error.response.data.message && error.status != 500) {\r\n if (error.response.data.modelState) {\r\n this.submitReportRes = error.response.data.modelState['newIssue.IssueDate'][0];\r\n } else {\r\n this.submitReportRes = error.response.data.message;\r\n }\r\n } else {\r\n this.isSystemError = true;\r\n this.submitReportRes = \"System is temporarily unavailable, please try again later\";\r\n }\r\n }\r\n }\r\n\r\n cancelReport() {\r\n this.submitReportRes = '';\r\n this.selectedDeliveryIssueReason = undefined;\r\n this.selectedDeliveryOption = undefined;\r\n this.isReasonsList = false;\r\n this.isOptionsList = false;\r\n }\r\n\r\n selectedReason(idx) {\r\n const description = idx.target.innerText;\r\n this.selectedDeliveryIssueReason = this.deliveryIssueReasons.find(i => i.description === description);\r\n this.shadowRoot.getElementById(\"reasons-list\").classList.add(\"d-none\");\r\n }\r\n\r\n selectedOption(idx) {\r\n const description = idx.target.innerText;\r\n this.selectedDeliveryOption = this.deliveryOptions.find(i => i.description === description);\r\n this.shadowRoot.getElementById(\"options-list\").classList.add(\"d-none\");\r\n }\r\n\r\n displayDeliveryReason() {\r\n if (!this.selectedDeliveryIssueReason) {\r\n return 'select reason';\r\n } else {\r\n return this.selectedDeliveryIssueReason.description;\r\n }\r\n }\r\n\r\n displayDeliveryOption() {\r\n if (!this.selectedDeliveryOption) {\r\n return 'select option';\r\n } else {\r\n return this.selectedDeliveryOption.description;\r\n }\r\n }\r\n}\r\n\r\ncustomElements.define('syncui-report-delivery-problem', DeliveryProblemComponent);","import { LitElement, html, css } from 'lit-element';\r\nimport { classMap } from 'lit-html/directives/class-map';\r\nimport { axios } from '@bundled-es-modules/axios';\r\n\r\nexport class LoginComponent extends LitElement {\r\n\r\n static get properties() {\r\n return {\r\n _username: { type: String },\r\n _password: { type: String },\r\n _MainServiceDomain: { type: String },\r\n _forgotPasswordLink: {type: String},\r\n\r\n _activationLink: { type: String },\r\n _registerLink: { type: String },\r\n\r\n errorMessage: { type: String },\r\n isSystemError: { type: String }\r\n }\r\n }\r\n\r\n get username() {\r\n return this._username;\r\n }\r\n\r\n set username(value) {\r\n this._username = value;\r\n }\r\n\r\n get password() {\r\n return this._password;\r\n }\r\n\r\n set password(value) {\r\n this._password = value;\r\n }\r\n\r\n get MainServiceDomain() {\r\n return this._MainServiceDomain;\r\n }\r\n\r\n set MainServiceDomain(value) {\r\n this._MainServiceDomain = value;\r\n }\r\n\r\n get forgotPasswordLink() {\r\n return this._forgotPasswordLink;\r\n }\r\n\r\n set forgotPasswordLink(value) {\r\n this._forgotPasswordLink = value;\r\n }\r\n\r\n get activationLink(){\r\n return this._activationLink;\r\n }\r\n set activationLink(value){\r\n this._activationLink = value;\r\n }\r\n\r\n get registerLink(){\r\n return this._registerLink;\r\n }\r\n set registerLink(value){\r\n this._registerLink = value;\r\n }\r\n\r\n constructor() {\r\n super();\r\n this.isSystemError = false;\r\n }\r\n\r\n static get styles() {\r\n return [\r\n css`\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n .text-center {\r\n text-align: center !important;\r\n }\r\n \r\n .d-none {\r\n display: none;\r\n }\r\n \r\n .d-block {\r\n display: block;\r\n }\r\n \r\n .d-flex {\r\n display: flex;\r\n }\r\n \r\n .justify-content-between {\r\n justify-content: space-between;\r\n }\r\n \r\n .mg-b5 {\r\n margin-bottom: 5px !important;\r\n }\r\n\r\n .mg-b30 {\r\n margin-bottom: 30px !important;\r\n }\r\n \r\n .mg-t5 {\r\n margin-top: 5px !important;\r\n }\r\n \r\n p{\r\n font-size: 13px;\r\n }\r\n \r\n .font-bold {\r\n font-weight: 700;\r\n }\r\n \r\n .min-width95 {\r\n min-width: 95px;\r\n }\r\n \r\n .w100 {\r\n width: 100%;\r\n }\r\n \r\n .w-25 {\r\n width: 25%;\r\n }\r\n\r\n .w-75 {\r\n width: 75%;\r\n }\r\n\r\n /* Element Style */\r\n .login-box {\r\n margin: 0 auto;\r\n border-radius: 35px;\r\n position: relative;\r\n padding: 45px;\r\n border: 1px solid var(--w-bg-borc, #505050);\r\n background-color: var(--w-bgc, #fff);\r\n box-sizing: border-box;\r\n }\r\n \r\n .btn {\r\n display: inline-block;\r\n font-weight: 400;\r\n text-align: center;\r\n white-space: nowrap;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n border: 1px solid transparent;\r\n padding: 6px 12px;\r\n font-size: 16;\r\n line-height: 1.5;\r\n border-radius: 4px;\r\n }\r\n \r\n .btn:hover, .btn:focus {\r\n text-decoration: none;\r\n }\r\n \r\n .btn:focus, .btn.focus {\r\n outline: 0;\r\n box-shadow: none;\r\n }\r\n \r\n .btn.disabled, .btn:disabled {\r\n opacity: 0.65;\r\n }\r\n\r\n .btn-success {\r\n color: var(--w-btn-col, #505050);\r\n background-color: var(--w-btn-bgc, #fff);\r\n border: 1px solid var(--w-btn-borc, #505050);\r\n font-size: var(--w-btn-fs, 14px);\r\n cursor: pointer;\r\n }\r\n \r\n .btn-success:hover {\r\n color: var(--w-btn-col, #fff);\r\n background-color: var(--w-btn-bgc, #505050);\r\n border: 1px solid var(--w-btn-borc, #505050);\r\n font-size: var(--w-btn-fs, 14px);\r\n cursor: pointer;\r\n }\r\n \r\n .btn-lg {\r\n padding: 8px 16px;\r\n font-size: var(--w-btn-fs, 14px);\r\n line-height: 1.5;\r\n border-radius: 4px;\r\n }\r\n \r\n .btn-block {\r\n display: block;\r\n width: 100%;\r\n }\r\n \r\n label {\r\n text-align: left;\r\n font-size: 13px;\r\n color: var(--label-color, #000);\r\n }\r\n \r\n .form-group {\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-flex: 0;\r\n -ms-flex: 0 0 auto;\r\n flex: 0 0 auto;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -ms-flex-flow: row wrap;\r\n flex-flow: row wrap;\r\n -webkit-box-align: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n margin-bottom: 0;\r\n color: var(--form-group-color, #fff);\r\n }\r\n \r\n .form-control {\r\n display: block;\r\n width: 100%;\r\n padding: 8px 12px;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n color: var(--form-control-color, #000);\r\n background-color: var(--form-control-bgColor, #fff);\r\n background-clip: padding-box;\r\n border: 1px solid var(--form-control-borderColor, #000);\r\n border-radius: 4px;\r\n }\r\n \r\n .form-control:focus {\r\n color: var(--form-control-focus-color, #495057);\r\n background-color: var(--form-control-focus-bgColor, #fff);\r\n border-color: var(--form-control-borderColor, #80bdff);\r\n outline: 0;\r\n box-shadow: 0 0 0 0.2rem var(--form-control-focus-boxShadow, rgba(65, 157, 255, 0.25));\r\n }\r\n \r\n .form-control:hover {\r\n -webkit-appearance: none;\r\n }\r\n \r\n .form-control::-webkit-input-placeholder {\r\n color: var(--form-control-placehorderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::-moz-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control:-ms-input-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::-ms-input-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n\r\n .editable-field {\r\n background-color: var(--editonly-bgColor, #FFF);\r\n border: 1px solid #D3D7D9;\r\n color: var(--editonly-color, #000000);\r\n border-radius: 3px;\r\n pointer-events: all;\r\n visibility: visible;\r\n }\r\n .error {\r\n font-size: var(--w-msg-fs-login, 12px);\r\n color: var(--w-msg-col, #000);\r\n }\r\n\r\n .error-text-color {\r\n color: var(--w-err-sys-col, red);\r\n }`,\r\n ];\r\n }\r\n\r\n render() {\r\n return html\r\n `\r\n
Login \r\n
${this.errorMessage}
\r\n
\r\n
\r\n
\r\n
\r\n Login \r\n
\r\n
\r\n
\r\n
\r\n
Existing print subscribers who need a login, click Here
\r\n
\r\n
\r\n\r\n
\r\n
\r\n ${!this.paymentDetails ? html`
\r\n
Need to make a payment? \r\n \r\n ${this.makePayment ? html`
\r\n
Select your payment amount, enter any tip or donation and click continue to enter your credit card information
\r\n
\r\n Payment Amount \r\n
\r\n
\r\n Carrier Tip \r\n
\r\n
\r\n N.I.E Donation \r\n
\r\n
\r\n
Total Amount
\r\n
$${this.totalValue} \r\n
\r\n
\r\n Continue \r\n
\r\n
${this.paymentErrorMessage}
\r\n
\r\n Cancel \r\n
\r\n
`: html`
Make Payment \r\n
${this.paymentErrorMessage}
`}` :\r\n this.confirmPayment ? html`
\r\n
We have processed your payment successfully!
\r\n
\r\n
Confimation #${this.finalPaymentDetails.authorizationCode}
\r\n
\r\n
Processed Date ${this.dateFormat(this.finalPaymentDetails.transactionDateTime)}
\r\n
Account Number ${this.getAccountNumber()}
\r\n
\r\n
\r\n
Payment Information \r\n
\r\n
\r\n
\r\n
Amount of payment
\r\n
\r\n
\r\n
$${this.formatNumber(this.finalPaymentDetails.paymentAmount + this.finalPaymentDetails.tipAmount + this.finalPaymentDetails.donationAmount)}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
${this.dateFormat(this.finalPaymentDetails.transactionDateTime)}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
${this.paywayWSAddAccountResults.cardAccount.firstName} ${this.paywayWSAddAccountResults.cardAccount.lastName}
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
${this.paywayWSAddAccountResults.cardAccount.accountNumber}
\r\n
\r\n
\r\n
\r\n
\r\n
Thank you for subscribing!
\r\n
\r\n
\r\n
\r\n Return to the news \r\n
\r\n
\r\n Print \r\n
\r\n
\r\n
\r\n Close \r\n
\r\n
` : html`\r\n
\r\n
Add payment details here... \r\n
\r\n
Total Amount
\r\n
$${this.totalValue} \r\n
\r\n
\r\n Name on Card \r\n
\r\n
\r\n Card Number \r\n
\r\n
\r\n Card security code \r\n
\r\n
\r\n
\r\n Zip Code \r\n
\r\n
\r\n Continue \r\n
\r\n
${this.paymentErrorMessage}
\r\n
\r\n Cancel \r\n
\r\n
\r\n `}\r\n ${this.isPrint ? html`
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n ${this.ReceiptThankYouText}\r\n
\r\n \r\n \r\n \r\n \r\n ${this.ReceiptConfirmationText}.\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n ITEM \r\n
\r\n \r\n \r\n \r\n AMOUNT \r\n
\r\n \r\n \r\n \r\n \r\n ${this.subscriptionDetails.Name}\r\n
\r\n \r\n \r\n \r\n $${this.formatNumber(this.finalPaymentDetails.paymentAmount)}\r\n
\r\n \r\n \r\n \r\n \r\n NIE Donation\r\n
\r\n \r\n $${this.formatNumber(this.finalPaymentDetails.donationAmount)}\r\n
\r\n \r\n \r\n \r\n \r\n Carrier Tip\r\n
\r\n \r\n \r\n \r\n $${this.formatNumber(this.finalPaymentDetails.tipAmount)}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n Payment Information \r\n
\r\n \r\n \r\n \r\n \r\n Amount of payment\r\n
\r\n \r\n $${this.formatNumber(this.finalPaymentDetails.paymentAmount + this.finalPaymentDetails.tipAmount + this.finalPaymentDetails.donationAmount)}\r\n
\r\n \r\n \r\n \r\n Date of payment\r\n
\r\n \r\n \r\n \r\n ${this.dateFormat(this.finalPaymentDetails.transactionDateTime)}\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Name of card\r\n
\r\n \r\n \r\n ${this.paywayWSAddAccountResults.cardAccount.firstName} ${this.paywayWSAddAccountResults.cardAccount.lastName}\r\n
\r\n \r\n \r\n \r\n \r\n Card number\r\n
\r\n \r\n \r\n \r\n ${this.paywayWSAddAccountResults.cardAccount.accountNumber}\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n ${this.ReceiptLinkText} ${this.ReceiptLink}
\r\n
`: html``}\r\n
`;\r\n }\r\n\r\n formatNumber(num) {\r\n return (Math.round(num * 100) / 100).toFixed(2);\r\n }\r\n\r\n formatOnChange(field) {\r\n field.target.value = this.formatNumber(field.target.value);\r\n }\r\n\r\n dateFormat(inputDate) {\r\n let date = new Date(inputDate);\r\n inputDate = new Date(inputDate);\r\n\r\n date.setMonth(inputDate.getUTCMonth(), inputDate.getUTCDate());\r\n date.setFullYear(inputDate.getUTCFullYear());\r\n date.setHours(inputDate.getUTCHours());\r\n date.setMinutes(inputDate.getUTCMinutes());\r\n date.setSeconds(inputDate.getUTCSeconds());\r\n date.setMilliseconds(inputDate.getUTCMilliseconds());\r\n\r\n const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\r\n return formattedDate;\r\n }\r\n\r\n showMonths() {\r\n if (this.monthList) {\r\n const list = this.shadowRoot.getElementById(\"months-list\");\r\n\r\n if (!list.classList.contains(\"d-none\")) {\r\n list.classList.add(\"d-none\");\r\n } else {\r\n list.classList.remove(\"d-none\");\r\n }\r\n }\r\n }\r\n\r\n displayMonthSelected() {\r\n if (!this.selectedMonth) {\r\n return 'mm';\r\n }\r\n return this.selectedMonth.name;\r\n }\r\n\r\n onSelectedMonth(idx) {\r\n const month = idx.target.innerText;\r\n this.selectedMonth = this.monthList.find(i => i.name === month);\r\n this.shadowRoot.getElementById(\"months-list\").classList.add(\"d-none\");\r\n }\r\n\r\n showYears() {\r\n if (this.yearList) {\r\n const list = this.shadowRoot.getElementById(\"years-list\");\r\n\r\n if (!list.classList.contains(\"d-none\")) {\r\n list.classList.add(\"d-none\");\r\n } else {\r\n list.classList.remove(\"d-none\");\r\n }\r\n }\r\n }\r\n\r\n displayYearSelected() {\r\n if (!this.selectedYear) {\r\n return 'yyyy';\r\n }\r\n return this.selectedYear.name;\r\n }\r\n\r\n onSelectedYear(idx) {\r\n const year = idx.target.innerText;\r\n this.selectedYear = this.yearList.find(i => i.name === year);\r\n this.shadowRoot.getElementById(\"years-list\").classList.add(\"d-none\");\r\n }\r\n\r\n async addAmount() {\r\n if (!this.subscriptionDetails) {\r\n this.paymentErrorMessage = 'Please select a subscription';\r\n return;\r\n }\r\n try {\r\n const header = {\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const res = await axios.get(`${this.MainServiceDomain}/appservices/api/v2/config/payment/edgil`, {\r\n headers: header\r\n });\r\n\r\n if (res.data.paywayWSEndpoint) {\r\n this.edgilPaymentConfig = res.data;\r\n this.paymentErrorMessage = '';\r\n this.makePayment = true;\r\n const res1 = await this.getCreditCardTypes();\r\n if (res1.length > 0) {\r\n this.creditCardList = res1;\r\n }\r\n } else {\r\n this.paymentErrorMessage = 'Something went wrong.';\r\n }\r\n } catch (error) {\r\n this.paymentErrorMessage = 'Something went wrong.';\r\n }\r\n\r\n }\r\n\r\n async getCreditCardTypes() {\r\n try {\r\n const header = {\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const res = await axios.get(`${this.MainServiceDomain}/appservices/api/v2/creditcardtypes`, {\r\n headers: header\r\n });\r\n\r\n return res.data;\r\n\r\n } catch (error) {\r\n return error;\r\n }\r\n }\r\n\r\n cancelPayment() {\r\n this.makePayment = false;\r\n this.paymentAmount = 0.00;\r\n this.carrierTip = 0.00;\r\n this.nieDonation = 0.00;\r\n this.totalValue = 0.00;\r\n this.paymentErrorMessage = '';\r\n }\r\n\r\n getTotalPaymentValue() {\r\n this.paymentAmount = Number(this.shadowRoot.getElementById('payment-amount').value);\r\n this.nieDonation = Number(this.shadowRoot.getElementById('nieDonation').value);\r\n this.carrierTip = Number(this.shadowRoot.getElementById('carrier-tip').value);\r\n\r\n this.totalValue = this.formatNumber(this.paymentAmount + this.nieDonation + this.carrierTip);\r\n }\r\n\r\n getExpirationMonthCode() {\r\n const month = this.shadowRoot.getElementById('').value;\r\n const selected = this.monthList.filter(item => item.name === month);\r\n\r\n return selected.code;\r\n }\r\n\r\n async getRequestToken() {\r\n try {\r\n const header = {\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const res = await axios.get(`${this.MainServiceDomain}/appservices/api/v2/payment/paywayws/addaccountrequesttoken`, {\r\n headers: header\r\n });\r\n\r\n return res.data;\r\n\r\n } catch (error) {\r\n return error;\r\n }\r\n }\r\n\r\n getName() {\r\n const name = this.shadowRoot.getElementById(\"name-on-card\").value.split(' ');\r\n this.firstNameOnCard = name[0];\r\n\r\n if (name.length > 1) {\r\n this.lastNameOnCard = name[name.length - 1];\r\n } else {\r\n this.lastNameOnCard = '';\r\n }\r\n }\r\n\r\n async onAddPaymentDetails() {\r\n this.paymentErrorMessage = '';\r\n if (this.creditCardList.length) {\r\n if (this.totalValue > 0) {\r\n this.subscriptionDetails.Status = 'Inactive';\r\n await this.requestUpdate();\r\n const res = await this.getRequestToken();\r\n\r\n if (res.requestToken) {\r\n this.requestToken = res.requestToken;\r\n this.setProperties(false, true, false, '');\r\n } else {\r\n this.subscriptionDetails.Status = 'Active';\r\n this.paymentErrorMessage = 'Something went wrong.';\r\n }\r\n\r\n } else {\r\n this.paymentErrorMessage = 'Please add amount';\r\n }\r\n } else {\r\n this.cancelPayment();\r\n this.paymentErrorMessage = 'Something went wrong.'\r\n }\r\n }\r\n\r\n async paywayAddAccount() {\r\n try {\r\n const monthCode = this.monthList.find(value => value.name == this.displayMonthSelected()).code;\r\n const yearCode = this.displayYearSelected().slice(-2);\r\n const headers = {\r\n 'Content-Type': 'application/json',\r\n }\r\n\r\n const body = `{\r\n request: \"sendQueuedAddAccount\",\r\n paywayRequestToken: \"${this.requestToken}\",\r\n accountInputMode: \"primaryAccountNumber\",\r\n cardAccount:\r\n {\r\n idDivision: \"${this.edgilPaymentConfig.division}\",\r\n fsv: \"${this.shadowRoot.getElementById(\"card-security-code\").value}\",\r\n accountNumber: \"${this.shadowRoot.getElementById(\"card-number\").value}\",\r\n expirationDate: \"${monthCode}/${yearCode}\",\r\n email: \"${this.userDetails.Email}\",\r\n firstName: \"${this.firstNameOnCard}\",\r\n lastName: \"${this.lastNameOnCard}\",\r\n zip: \"${this.shadowRoot.getElementById(\"zip-code\").value}\"\r\n }\r\n }`\r\n\r\n const res = await axios.post(`${this.edgilPaymentConfig.paywayWSEndpoint}Account/CreditCard`, body, {\r\n headers: headers\r\n });\r\n\r\n return res;\r\n }\r\n catch (error) {\r\n return error;\r\n }\r\n }\r\n\r\n async paywayAddAccountResults() {\r\n try {\r\n const headers = {\r\n 'Content-Type': 'application/json',\r\n }\r\n\r\n const body = `{\r\n paywayRequestToken: \"${this.requestToken}\",\r\n request: \"hostedAddAccountResults\"\r\n }`\r\n\r\n const res = await axios.post(`${this.edgilPaymentConfig.paywayWSEndpoint}Query/CreditCard`, body, {\r\n headers: headers\r\n });\r\n\r\n return res;\r\n\r\n } catch (error) {\r\n return error;\r\n }\r\n }\r\n\r\n getCode(id) {\r\n if (id === 6) {\r\n return this.creditCardList.find(value => value.creditCardTypeId === 3).code;\r\n }\r\n if (id === 3) {\r\n return this.creditCardList.find(value => value.creditCardTypeId === 4).code;\r\n }\r\n return this.creditCardList.find(value => value.creditCardTypeId === id).code;\r\n }\r\n\r\n async postOneTimePayment(data) {\r\n try {\r\n const cardCode = this.getCode(data.cardAccount.cardType);\r\n const headers = {\r\n 'Content-Type': 'application/json',\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const body = `{\r\n PaymentAmount: ${this.paymentAmount},\r\n TipAmount: ${this.carrierTip},\r\n DonationAmount: ${this.nieDonation},\r\n Token: \"${data.cardAccount.paywayToken}\",\r\n MaskedCardNumber: \"${data.cardAccount.accountNumber}\",\r\n CardholderName: \"${data.cardAccount.firstName} ${data.cardAccount.lastName}\",\r\n CardExpirationMonth: \"${data.cardAccount.expirationDate.slice(0, 2)}\",\r\n CardExpirationYear: \"20${data.cardAccount.expirationDate.slice(-2)}\",\r\n CardTypeCode: \"${cardCode}\" \r\n }`\r\n\r\n const res = await axios.post(`${this.MainServiceDomain}/appservices/api/v2/subscription/${this.subscriptionDetails.SubscriptionId}/payment/onetime`, body, {\r\n headers: headers\r\n });\r\n\r\n return res;\r\n\r\n } catch (error) {\r\n return error;\r\n }\r\n }\r\n\r\n setProperties(isMakePayment, isPaymentDetails, isConfirmPayment, message) {\r\n if (!isPaymentDetails || isConfirmPayment) {\r\n this.selectedMonth = undefined;\r\n this.selectedYear = undefined;\r\n }\r\n this.subscriptionDetails.Status = 'Active';\r\n this.makePayment = isMakePayment;\r\n this.paymentDetails = isPaymentDetails;\r\n this.confirmPayment = isConfirmPayment;\r\n this.paymentErrorMessage = message;\r\n }\r\n\r\n async onConfirmPayment() {\r\n if (this.shadowRoot.getElementById(\"name-on-card\").value != '') {\r\n if (this.shadowRoot.getElementById(\"card-number\").value != '' && !this.shadowRoot.getElementById(\"card-number\").validity.patternMismatch) {\r\n if (this.selectedMonth != undefined && this.selectedYear != undefined) {\r\n\r\n this.paymentErrorMessage = '';\r\n this.subscriptionDetails.Status = 'Inactive';\r\n await this.requestUpdate();\r\n const res = await this.paywayAddAccount();\r\n\r\n if (res.status === 200) {\r\n if (res.data.paywayCode == 5000) {\r\n const res1 = await this.paywayAddAccountResults();\r\n\r\n if (res1.status === 200) {\r\n if (res1.data.paywayCode == 5000) {\r\n this.paywayWSAddAccountResults = res1.data;\r\n if ([1, 2, 3, 6].indexOf(res1.data.cardAccount.cardType) !== -1) {\r\n const res2 = await this.postOneTimePayment(res1.data);\r\n if (res2.status === 201) {\r\n if (res2.data.authorizationCode) {\r\n this.finalPaymentDetails = res2.data;\r\n this.setProperties(false, true, true, '');\r\n this.isPrint = true;\r\n } else {\r\n this.setProperties(true, false, false, res2.response.data.modelState['paymentRequest.CardExpirationMonth' ? 'paymentRequest.CardExpirationMonth' : 'paymentRequest']);\r\n }\r\n } else {\r\n this.setProperties(true, false, false, res2['response.data.message']);\r\n }\r\n } else {\r\n this.setProperties(true, false, false, 'This type of card is not supported by us.');\r\n }\r\n } else {\r\n this.setProperties(true, false, false, res1.data.paywayMessage != '' ? res1.data.paywayMessage : 'Something went wrong. Please try again');\r\n }\r\n } else {\r\n this.setProperties(true, false, false, res1.response.data.errorMessage);\r\n }\r\n\r\n } else {\r\n this.subscriptionDetails.Status = 'Active';\r\n this.paymentErrorMessage = res.data.paywayMessage != \"\" ? res.data.paywayMessage : \"Something went wrong. Please try again\";\r\n await this.requestUpdate();\r\n }\r\n } else {\r\n this.setProperties(true, false, false, res.response.data.message);\r\n }\r\n\r\n } else {\r\n this.paymentErrorMessage = 'Please select expiration date and month';\r\n }\r\n } else {\r\n this.paymentErrorMessage = 'Please enter 15 or 16 digit card number';\r\n }\r\n } else {\r\n this.paymentErrorMessage = 'Please enter name on card';\r\n }\r\n }\r\n\r\n closeOnConfirmPayment() {\r\n\r\n this.cancelPayment();\r\n this.paymentDetails = false;\r\n this.confirmPayment = false;\r\n }\r\n\r\n async printReceipt() {\r\n await this.requestUpdate();\r\n if (this.ReceiptLogo) {\r\n const divContents = this.shadowRoot.getElementById(\"payment-info-div\").innerHTML;\r\n const a = window.open('', 'PRINT', 'height=1000, width=1000');\r\n a.document.write('');\r\n a.document.write('');\r\n a.document.write(divContents);\r\n a.document.write('');\r\n a.document.close();\r\n a.print();\r\n }\r\n }\r\n\r\n onCancelConfirmPayment() {\r\n this.setProperties(true, false, false, '');\r\n }\r\n\r\n getAccountNumber() {\r\n if (this.subscriptionDetails) {\r\n if (this.subscriptionDetails.CirculationDetails.CircSystemSubscriptionId) {\r\n return this.subscriptionDetails.CirculationDetails.CircSystemSubscriptionId;\r\n }\r\n return this.subscriptionDetails.SubscriptionId;\r\n }\r\n return '';\r\n }\r\n\r\n returnToNews() {\r\n window.open(this.newsLink, \"_blank\");\r\n }\r\n}\r\n\r\ncustomElements.define('syncui-payment', PaymentComponent);","import { LitElement, html, css } from 'lit-element';\r\nimport { classMap } from 'lit-html/directives/class-map';\r\n\r\nclass SubscDetailsComponents extends LitElement {\r\n\r\n static get properties() {\r\n return {\r\n _subscriptionDetails: { type: Object },\r\n }\r\n }\r\n\r\n get subscriptionDetails() {\r\n return this._subscriptionDetails;\r\n }\r\n\r\n set subscriptionDetails(value) {\r\n this._subscriptionDetails = value;\r\n }\r\n\r\n constructor() {\r\n super();\r\n document.addEventListener('onSelectSubscription', async (e) => {\r\n this.subscriptionDetails = e.detail.selectedSubscription;\r\n })\r\n }\r\n\r\n static get styles() {\r\n return css`\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n .text-center {\r\n text-align: center;\r\n }\r\n\r\n .disabled {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n position: relative;\r\n }\r\n \r\n .mg-b5 {\r\n margin-bottom: 5px;\r\n }\r\n \r\n /* Element Style */\r\n .subscription-box {\r\n border-radius: 35px;\r\n position: relative;\r\n padding: 25px 25px;\r\n width: 100%;\r\n border: 1px solid var(--w-bg-borc, #505050);\r\n background-color: var(--w-bgc, #fff);\r\n box-sizing: border-box;\r\n }\r\n \r\n .subscription-heading {\r\n font-size: var(--w-tit-fs, 14px);\r\n color: var(--w-tit-col, #000);\r\n background-color: var(--w-tit-bgc, #fff);\r\n padding: 10px;\r\n border-radius: 5px;\r\n }\r\n \r\n .cdapress-section {\r\n background-color: var(--subscription-heading-bgColor, #fff);\r\n border: none;\r\n padding: 5px 10px;\r\n }\r\n \r\n .cdapress-heading {\r\n font-size: 14px;\r\n color: var(--cdapress-heading-Color, #000);\r\n padding: 10px;\r\n border-radius: 5px;\r\n }\r\n \r\n .cdapress {\r\n list-style: none;\r\n width: 100%;\r\n }\r\n \r\n .cda-box {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .cda-right {\r\n width: 65%;\r\n }\r\n \r\n .cds-left {\r\n width: 35%;\r\n }\r\n \r\n .sub-Accountno {\r\n font-size: 12px;\r\n color: var(--sub-Accountno-Color, #000);\r\n padding: 10px;\r\n font-weight: 600;\r\n }\r\n \r\n .sub-Accountdetail {\r\n font-size: 12px;\r\n color: var(--sub-Accountdetail-Color, #000);\r\n padding: 10px;\r\n }\r\n \r\n @media(max-width: 767px) {\r\n .subscription-box {\r\n padding: 15px;\r\n border-radius: 20px;\r\n }\r\n }\r\n `;\r\n }\r\n\r\n render() {\r\n return html\r\n `
`;\r\n }\r\n\r\n renewalDate(inputDate) {\r\n let date = new Date(inputDate);\r\n inputDate = new Date(inputDate);\r\n\r\n inputDate.setHours(0);\r\n inputDate.setMinutes(0);\r\n inputDate.setSeconds(0);\r\n\r\n date.setMonth(inputDate.getUTCMonth(), inputDate.getUTCDate());\r\n date.setFullYear(inputDate.getUTCFullYear());\r\n date.setHours(inputDate.getUTCHours());\r\n date.setMinutes(inputDate.getUTCMinutes());\r\n date.setSeconds(inputDate.getUTCSeconds());\r\n date.setMilliseconds(inputDate.getUTCMilliseconds());\r\n\r\n const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\r\n return formattedDate;\r\n }\r\n\r\n getsubscriptionDetail(detailName) {\r\n if (this.subscriptionDetails) {\r\n let text = '';\r\n switch (detailName) {\r\n case \"name\":\r\n text = this.subscriptionDetails.name;\r\n break;\r\n case \"status\":\r\n text = this.subscriptionDetails.status;\r\n break;\r\n case \"accountNumber\":\r\n if (this.subscriptionDetails.circulationDetails?.circSystemSubscriptionId) {\r\n text = this.subscriptionDetails.circulationDetails.circSystemSubscriptionId;\r\n } else {\r\n text = this.subscriptionDetails.subscriptionId;\r\n }\r\n break;\r\n case \"datePurchased\":\r\n text = this.renewalDate(this.subscriptionDetails.datePurchased);\r\n break;\r\n case \"expirationDate\":\r\n text = this.renewalDate(this.subscriptionDetails.expirationDate);\r\n break;\r\n default:\r\n text;\r\n }\r\n return text;\r\n }\r\n return '';\r\n }\r\n}\r\n\r\ncustomElements.define('syncui-subs-details', SubscDetailsComponents);","import { LitElement, html, css } from 'lit-element';\r\nimport { repeat } from \"lit-html/directives/repeat.js\";\r\nimport { classMap } from 'lit-html/directives/class-map';\r\nimport '@vaadin/vaadin-date-picker/vaadin-date-picker.js';\r\nimport { axios } from '@bundled-es-modules/axios';\r\n\r\nclass VacationHoldComponent extends LitElement {\r\n\r\n static get properties() {\r\n return {\r\n _MainServiceDomain: { type: String },\r\n _loginDetails: { type: Object },\r\n _userDetails: { type: Object },\r\n _subscriptionDetails: { type: Object },\r\n _vacationStopDate: { type: Date },\r\n _vacationStartDate: { type: Date },\r\n _dispositionOptions: { type: Array },\r\n _vacationHoldErrorRes: { type: Object },\r\n _openVacationHoldForm: { type: Boolean },\r\n _currentVacationHoldDetails: { type: Object },\r\n _setDispositionForCurrentHold: { type: Boolean },\r\n _resumeMinDate: { type: Date },\r\n vacationStopDateVaadin: { type: Date },\r\n vacationStartDateVaadin: { type: Date },\r\n isSystemError: { type: Boolean },\r\n }\r\n }\r\n\r\n get MainServiceDomain() {\r\n return this._MainServiceDomain;\r\n }\r\n\r\n set MainServiceDomain(value) {\r\n this._MainServiceDomain = value;\r\n }\r\n\r\n get loginDetails() {\r\n return this._loginDetails;\r\n }\r\n\r\n set loginDetails(value) {\r\n this._loginDetails = value;\r\n }\r\n\r\n get userDetails() {\r\n return this._userDetails;\r\n }\r\n\r\n set userDetails(value) {\r\n this._userDetails = value;\r\n }\r\n\r\n get subscriptionDetails() {\r\n return this._subscriptionDetails;\r\n }\r\n\r\n set subscriptionDetails(value) {\r\n this._subscriptionDetails = value;\r\n }\r\n\r\n get vacationStopDate() {\r\n return this._vacationStopDate;\r\n }\r\n\r\n set vacationStopDate(value) {\r\n this._vacationStopDate = value;\r\n }\r\n\r\n get vacationStartDate() {\r\n return this._vacationStartDate;\r\n }\r\n\r\n set vacationStartDate(value) {\r\n this._vacationStartDate = value;\r\n }\r\n\r\n get dispositionOptions() {\r\n return this._dispositionOptions;\r\n }\r\n\r\n set dispositionOptions(value) {\r\n this._dispositionOptions = value;\r\n }\r\n\r\n get openVacationHoldForm() {\r\n return this._openVacationHoldForm;\r\n }\r\n\r\n set openVacationHoldForm(value) {\r\n this._openVacationHoldForm = value;\r\n }\r\n\r\n get currentVacationHoldDetails() {\r\n return this._currentVacationHoldDetails;\r\n }\r\n\r\n set currentVacationHoldDetails(value) {\r\n this._currentVacationHoldDetails = value;\r\n }\r\n\r\n get setDispositionForCurrentHold() {\r\n return this._setDispositionForCurrentHold;\r\n }\r\n\r\n set setDispositionForCurrentHold(value) {\r\n this._setDispositionForCurrentHold = value;\r\n }\r\n\r\n get resumeMinDate() {\r\n return this._resumeMinDate;\r\n }\r\n\r\n set resumeMinDate(value) {\r\n this._resumeMinDate = value;\r\n }\r\n\r\n get vacationHoldErrorRes() {\r\n return this._vacationHoldErrorRes;\r\n }\r\n\r\n set vacationHoldErrorRes(value) {\r\n this._vacationHoldErrorRes = value;\r\n }\r\n\r\n constructor() {\r\n super();\r\n this.isSystemError = false;\r\n this.openVacationHoldForm = false;\r\n this.setDispositionForCurrentHold = true;\r\n this.currentVacationHoldDetails = undefined;\r\n document.addEventListener('onSelectSubscription', async(e) => {\r\n this.vacationHoldErrorRes = '';\r\n this.openVacationHoldForm = false;\r\n\r\n this.loginDetails = e.detail.loginDetails;\r\n this.subscriptionDetails = e.detail.selectedSubscription;\r\n this.userDetails = e.detail.userDetails;\r\n\r\n const vacRes = await this.getCurrentVacationHold(this.subscriptionDetails.subscriptionId);\r\n if (vacRes.length) {\r\n this.currentVacationHoldDetails = vacRes[0];\r\n } else {\r\n this.currentVacationHoldDetails = undefined;\r\n }\r\n this.dispositionOptions = await this.getDispositionOptions();\r\n })\r\n }\r\n\r\n updated() {\r\n if (this.setDispositionForCurrentHold) {\r\n if (this.openVacationHoldForm) {\r\n this.setDispositionForCurrentHold = false;\r\n\r\n if (this.currentVacationHoldDetails != undefined) {\r\n this.vacationStopDate = this.dateFormatForDisplay(this.currentVacationHoldDetails.holdDate);\r\n this.vacationStartDate = this.dateFormatForDisplay(this.currentVacationHoldDetails.resumeDate);\r\n this.vacationStopDateVaadin = this.dateFormatForVaadin(this.currentVacationHoldDetails.holdDate);\r\n this.vacationStartDateVaadin = this.dateFormatForVaadin(this.currentVacationHoldDetails.resumeDate);\r\n this.resumeMinDate = this.vacationStopDateVaadin;\r\n this.shadowRoot.getElementById(this.currentVacationHoldDetails.holdDisposition + \"-option\").checked = true;\r\n } else {\r\n this.vacationStopDate = this.dateFormatForDisplay(new Date(Date.now() + 86400000));\r\n this.vacationStartDate = this.dateFormatForDisplay(new Date(Date.now() + 86400000 * 2));\r\n this.vacationStopDateVaadin = this.dateFormatForVaadin(new Date(Date.now() + 86400000));\r\n this.vacationStartDateVaadin = this.dateFormatForVaadin(new Date(Date.now() + 86400000 * 2));\r\n this.resumeMinDate = this.vacationStopDateVaadin;\r\n }\r\n } else {\r\n if (this.currentVacationHoldDetails != undefined) {\r\n this.vacationStopDate = this.dateFormatForDisplay(this.currentVacationHoldDetails.holdDate);\r\n this.vacationStartDate = this.dateFormatForDisplay(this.currentVacationHoldDetails.resumeDate);\r\n }\r\n }\r\n }\r\n }\r\n\r\n static get styles() {\r\n return css `\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n .text-center {\r\n text-align: center;\r\n }\r\n \r\n .d-none {\r\n display: none;\r\n }\r\n \r\n .d-block {\r\n display: block;\r\n }\r\n \r\n .mg-b5 {\r\n margin-bottom: 5px;\r\n }\r\n \r\n .mg-t5 {\r\n margin-top: 5px;\r\n }\r\n \r\n p {\r\n font-size: 14px;\r\n }\r\n\r\n .width100 {\r\n width: 100%;\r\n }\r\n\r\n .disabled {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n position: relative;\r\n }\r\n\r\n /* Element Style */\r\n .vacation-box {\r\n border-radius: 35px;\r\n position: relative;\r\n padding: 25px 25px;\r\n width: 100%;\r\n border: 1px solid var(--w-bg-borc, #505050);\r\n background-color: var(--w-bgc, #fff);\r\n box-sizing: border-box;\r\n }\r\n \r\n .vacation-heading {\r\n font-size: var(--w-tit-fs, 14px);\r\n color: var(--w-tit-col, #000);\r\n background-color: var(--w-tit-bgc, #fff);\r\n padding: 10px;\r\n border-radius: 5px;\r\n }\r\n \r\n .vacation-selected {\r\n color: var(--vacation-heading-Color, #000);\r\n background-color: var(--vacation-heading-bgColor, #fff);\r\n border: none;\r\n padding: 10px;\r\n border-radius: 5px;\r\n }\r\n \r\n .btn {\r\n display: inline-block;\r\n font-weight: 400;\r\n text-align: center;\r\n white-space: nowrap;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n border: 1px solid transparent;\r\n padding: 6px 12px;\r\n font-size: 16;\r\n line-height: 1.5;\r\n border-radius: 4px;\r\n }\r\n \r\n .btn:hover, .btn:focus {\r\n text-decoration: none;\r\n }\r\n \r\n .btn:focus, .btn.focus {\r\n outline: 0;\r\n box-shadow: none;\r\n }\r\n \r\n .btn.disabled, .btn:disabled {\r\n opacity: 0.65;\r\n }\r\n \r\n .btn-success {\r\n color: var(--w-btn-col, #505050);\r\n background-color: var(--w-btn-bgc, #fff);\r\n border: 1px solid var(--w-btn-borc, #505050);\r\n font-size: var(--w-btn-fs, 15px);\r\n cursor: pointer;\r\n }\r\n \r\n .btn-success:hover {\r\n color: var(--w-btn-col, #fff);\r\n background-color: var(--w-btn-bgc, #505050);\r\n border: 1px solid var(--w-btn-borc, #505050);\r\n font-size: var(--w-btn-fs, 14px);\r\n cursor: pointer;\r\n }\r\n \r\n \r\n .btn-lg {\r\n padding: 8px 16px;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n border-radius: 4px;\r\n }\r\n \r\n .btn-block {\r\n display: block;\r\n width: 100%;\r\n }\r\n \r\n .form-group {\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-flex: 0;\r\n -ms-flex: 0 0 auto;\r\n flex: 0 0 auto;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -ms-flex-flow: row wrap;\r\n flex-flow: row wrap;\r\n -webkit-box-align: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n margin-bottom: 0;\r\n color: var(--form-group-color, #fff);\r\n }\r\n \r\n .form-control {\r\n display: block;\r\n width: 100%;\r\n padding: 8px 12px;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n color: var(--form-control-color, #000);\r\n background-color: var(--form-control-bgColor, #fff);\r\n border: 1px solid var(--form-control-borderColor, #000);\r\n background-clip: padding-box;\r\n border-radius: 4px;\r\n }\r\n \r\n .form-control:focus {\r\n color: var(--form-control-focus-color, #495057);\r\n background-color: var(--form-control-focus-bgColor, #fff);\r\n border-color: var(--form-control-borderColor, #80bdff);\r\n outline: 0;\r\n box-shadow: 0 0 0 0.2rem var(--form-control-focus-boxShadow, rgba(65, 157, 255, 0.25));\r\n }\r\n \r\n \r\n .form-control::-webkit-input-placeholder {\r\n color: var(--form-control-placehorderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::-moz-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control:-ms-input-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::-ms-input-placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n .form-control::placeholder {\r\n color: var(--form-control-placeholderColor, #959595);\r\n opacity: 1;\r\n }\r\n \r\n \r\n .custom-radio .custom-radioBox {\r\n list-style: none;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n \r\n .custom-radioBox .custom-radioInner {\r\n color: var(--custom-radioInner-color, #000);\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n margin: 5px 0;\r\n }\r\n \r\n .custom-radioBox .custom-radioInner input[type=radio]{\r\n position: absolute;\r\n opacity: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n \r\n .custom-radioBox .custom-radioInner label{\r\n position: relative;\r\n font-weight: 300;\r\n font-size: 14px;\r\n padding: 0 30px;\r\n margin: 0;\r\n z-index: 9;\r\n cursor: pointer;\r\n }\r\n \r\n .custom-radioBox .custom-radioInner .check{\r\n position: absolute;\r\n border: 1px solid var(--widget-radio-border, #d3d3d3);\r\n background-color: var(--widget-radio-bgColor, #fff);\r\n border-radius: 100%;\r\n height: 20px;\r\n width: 20px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 0px;\r\n z-index: 5;\r\n }\r\n \r\n .custom-radioBox .custom-radioInner .check::before {\r\n position: absolute;\r\n content: '';\r\n border-radius: 100%;\r\n height: 16px;\r\n width: 16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 2px;\r\n margin: auto;\r\n }\r\n \r\n input[type=radio]:checked ~ .check {\r\n border: 1px solid var(--widget-radioChecked-border, #d3d3d3);\r\n background-color: var(--widget-radioChecked-bgColor, rgb(236, 240, 241));\r\n }\r\n \r\n input[type=radio]:checked ~ .check::before{\r\n background-color: var(--widget-radioChecked-bgColor, rgb(236, 240, 241));\r\n }\r\n\r\n .error {\r\n font-size: var(--w-msg-fs, 13px);\r\n color: var(--w-msg-col, #000);\r\n }\r\n\r\n .error-text-color {\r\n color: var(--w-err-sys-col, red);\r\n }\r\n @media(max-width: 767px){\r\n .vacation-box {\r\n padding: 15px;\r\n border-radius: 20px;\r\n }\r\n }\r\n `;\r\n }\r\n\r\n render() {\r\n return html `\r\n
`\r\n }\r\n\r\n dateFormat(inputDate) {\r\n\r\n let date = new Date(inputDate);\r\n inputDate = new Date(inputDate);\r\n\r\n date.setMonth(inputDate.getUTCMonth(), inputDate.getUTCDate());\r\n date.setFullYear(inputDate.getUTCFullYear());\r\n date.setHours(inputDate.getUTCHours());\r\n date.setMinutes(inputDate.getUTCMinutes());\r\n date.setSeconds(inputDate.getUTCSeconds());\r\n date.setMilliseconds(inputDate.getUTCMilliseconds());\r\n\r\n return date;\r\n }\r\n\r\n dateFormatForDisplay(inputDate) {\r\n const date = this.dateFormat(inputDate)\r\n return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;\r\n }\r\n\r\n dateFormatForVaadin(inputDate) {\r\n const date = this.dateFormat(inputDate)\r\n return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;\r\n }\r\n\r\n async openVacationHold() {\r\n\r\n if (this.subscriptionDetails) {\r\n this.openVacationHoldForm = true;\r\n this.setDispositionForCurrentHold = true;\r\n }\r\n }\r\n\r\n async getDispositionOptions() {\r\n try {\r\n\r\n const headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const dispositionOptions = await axios.get(`${this.MainServiceDomain}/appservices/api/v2/vachold/dispositions`, {\r\n headers: headers\r\n });\r\n\r\n return dispositionOptions.data;\r\n } catch (error) {\r\n throw error;\r\n }\r\n }\r\n\r\n async getCurrentVacationHold(subscriptionId) {\r\n try {\r\n const headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const currentHold = await axios.get(`${this.MainServiceDomain}/appservices/api/v2/subscription/${subscriptionId}/vachold?limit=1`, {\r\n headers: headers\r\n });\r\n\r\n return currentHold.data;\r\n\r\n } catch (error) {\r\n console.log(error);\r\n return error;\r\n }\r\n }\r\n\r\n async updateStopDate() {\r\n this.vacationStopDate = this.dateFormatForDisplay(this.shadowRoot.getElementById(\"vacation-stop-date\").value);\r\n this.vacationStopDateVaadin = this.dateFormatForVaadin(this.shadowRoot.getElementById(\"vacation-stop-date\").value);\r\n this.resumeMinDate = this.dateFormatForVaadin(new Date(this.shadowRoot.getElementById(\"vacation-stop-date\").value).getTime() + 86400000);\r\n await this.requestUpdate();\r\n }\r\n\r\n async updateStartDate() {\r\n this.vacationStartDate = this.dateFormatForDisplay(this.shadowRoot.getElementById(\"vacation-start-date\").value);\r\n this.vacationStartDateVaadin = this.dateFormatForVaadin(this.shadowRoot.getElementById(\"vacation-start-date\").value);\r\n await this.requestUpdate();\r\n }\r\n\r\n async submitVacationHold() {\r\n this.vacationHoldErrorRes = '';\r\n this.isSystemError = false;\r\n const radios = this.shadowRoot.getElementById(\"vacation-hold-radios\").getElementsByTagName(\"input\");\r\n let val = undefined;\r\n for (var i = 0, len = radios.length; i < len; i++) {\r\n if (radios[i].checked) {\r\n val = radios[i].value;\r\n break;\r\n }\r\n }\r\n await this.requestUpdate();\r\n\r\n let detail = null;\r\n if (val) {\r\n if (!this.currentVacationHoldDetails) {\r\n detail = {\r\n isEdit: false,\r\n subscriptionId: this.subscriptionDetails.subscriptionId,\r\n vacationStopDate: this.vacationStopDate,\r\n vacationStartDate: this.vacationStartDate,\r\n HoldDisposition: val,\r\n }\r\n } else {\r\n detail = {\r\n vacationHoldId: this.currentVacationHoldDetails.vacationHoldId,\r\n isEdit: true,\r\n subscriptionId: this.subscriptionDetails.subscriptionId,\r\n vacationStopDate: this.vacationStopDate,\r\n vacationStartDate: this.vacationStartDate,\r\n HoldDisposition: val,\r\n }\r\n }\r\n this.onSubmitVacationHold(detail).then(\r\n async (res) => {\r\n if (res.status === 204 || !!res.data.vacationHoldId) {\r\n\r\n const vacRes = await this.getCurrentVacationHold(detail.subscriptionId);\r\n\r\n if (vacRes.length) {\r\n this.currentVacationHoldDetails = vacRes[0];\r\n } else {\r\n this.currentVacationHoldDetails = undefined;\r\n }\r\n this.openVacationHoldForm = false;\r\n this.setDispositionForCurrentHold = true;\r\n } else {\r\n if (res.data && res.status != 500) {\r\n this.vacationHoldErrorRes = res.data;\r\n } else {\r\n this.isSystemError = true;\r\n this.vacationHoldErrorRes = 'System is temporarily unavailable, please try again later';\r\n }\r\n this.openVacationHoldForm = true;\r\n this.setDispositionForCurrentHold = false;\r\n }\r\n })\r\n } else {\r\n this.vacationHoldErrorRes = 'Please select a hold disposition.';\r\n }\r\n }\r\n\r\n async onSubmitVacationHold(detail) {\r\n let res = null;\r\n try {\r\n const headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const body = `HoldDate=${detail.vacationStopDate}&ResumeDate=${detail.vacationStartDate}&HoldDisposition=${detail.HoldDisposition}`;\r\n\r\n if (detail.isEdit) {\r\n res = await axios.put(`${this.MainServiceDomain}/appservices/api/v2/subscription/${detail.subscriptionId}/vachold/${detail.vacationHoldId}`, body, {\r\n headers: headers\r\n });\r\n } else {\r\n res = await axios.post(`${this.MainServiceDomain}/appservices/api/v2/subscription/${detail.subscriptionId}/vachold`, body, {\r\n headers: headers\r\n });\r\n }\r\n\r\n return res;\r\n\r\n } catch (error) {\r\n console.log(error);\r\n return error.response;\r\n }\r\n }\r\n\r\n stopVacHoldEdit() {\r\n this.openVacationHoldForm = false;\r\n this.setDispositionForCurrentHold = true;\r\n this.vacationHoldErrorRes = '';\r\n }\r\n\r\n async deleteCurrentHold() {\r\n try {\r\n const headers = {\r\n 'Content-Type': 'application/x-www-form-urlencoded',\r\n 'Authorization': `Bearer ${this.loginDetails.token}`,\r\n }\r\n\r\n const res = await axios.delete(`${this.MainServiceDomain}/appservices/api/v2/subscription/${this.subscriptionDetails.subscriptionId}/vachold/${this.currentVacationHoldDetails.vacationHoldId}`, {\r\n headers: headers\r\n });\r\n\r\n if (res.status == 204) {\r\n const vacRes = await this.getCurrentVacationHold(this.subscriptionDetails.subscriptionId);\r\n\r\n if (vacRes.length) {\r\n this.currentVacationHoldDetails = vacRes[0];\r\n } else {\r\n this.currentVacationHoldDetails = undefined;\r\n }\r\n } else {\r\n console.log(\"Something went wrong.\");\r\n }\r\n\r\n return res;\r\n\r\n } catch (error) {\r\n throw error;\r\n }\r\n }\r\n\r\n setErrorMessage() {\r\n let message = [];\r\n if (this.vacationHoldErrorRes && this.vacationHoldErrorRes != '') {\r\n if (typeof this.vacationHoldErrorRes == 'string') {\r\n message.push(this.vacationHoldErrorRes);\r\n }\r\n if (this.vacationHoldErrorRes.message) {\r\n message.push(this.vacationHoldErrorRes.message);\r\n }\r\n if (this.vacationHoldErrorRes.modelState) {\r\n if (this.vacationHoldErrorRes.modelState.request && this.vacationHoldErrorRes.modelState.request.length > 0) {\r\n message.push(this.vacationHoldErrorRes.modelState['request'].map(item => item));\r\n }\r\n if (this.vacationHoldErrorRes.modelState['request.HoldDate']) {\r\n message.push(this.vacationHoldErrorRes.modelState['request.HoldDate'].map(item => item));\r\n }\r\n if (this.vacationHoldErrorRes.modelState['request.ResumeDate']) {\r\n message.push(this.vacationHoldErrorRes.modelState['request.ResumeDate'].map(item => item));\r\n }\r\n }\r\n return message.map(item => html`
${item}
`);\r\n }\r\n return '';\r\n }\r\n}\r\n\r\ncustomElements.define('syncui-vacation-hold', VacationHoldComponent);","import { LitElement, html, css } from \"lit-element\";\r\nimport { repeat } from \"lit-html/directives/repeat.js\";\r\nimport { axios } from '@bundled-es-modules/axios';\r\n\r\nwindow.smp_selected_subscription = window.smp_selected_subscription || {};\r\nclass WelcomeHeaderComponent extends LitElement {\r\n\r\n static get properties() {\r\n return {\r\n _MainServiceDomain: { type: String },\r\n _OauthServiceDomain: { type: String },\r\n _loginDetails: { type: Object },\r\n _userDetails: { type: Object },\r\n _subscriptionList: { type: Array },\r\n _updatedSubscriptionList: { type: Array },\r\n _subscriptionDetails: { type: Object },\r\n _isSelectedSubs: { type: Boolean, attribute: true },\r\n _subcribeLink: { type: String }\r\n }\r\n }\r\n\r\n get MainServiceDomain() {\r\n return this._MainServiceDomain;\r\n }\r\n\r\n set MainServiceDomain(value) {\r\n this._MainServiceDomain = value;\r\n }\r\n\r\n get OauthServiceDomain() {\r\n return this._OauthServiceDomain;\r\n }\r\n\r\n set OauthServiceDomain(value) {\r\n this._OauthServiceDomain = value;\r\n }\r\n\r\n get loginDetails() {\r\n return this._loginDetails;\r\n }\r\n\r\n set loginDetails(value) {\r\n this._loginDetails = value;\r\n }\r\n\r\n get userDetails() {\r\n return this._userDetails;\r\n }\r\n\r\n set userDetails(value) {\r\n this._userDetails = value;\r\n }\r\n\r\n get subscriptionList() {\r\n return this._subscriptionList;\r\n }\r\n\r\n set subscriptionList(value) {\r\n this._subscriptionList = value;\r\n }\r\n\r\n get updatedSubscriptionList() {\r\n return this._updatedSubscriptionList;\r\n }\r\n\r\n set updatedSubscriptionList(value) {\r\n this._updatedSubscriptionList = value;\r\n }\r\n\r\n get subscriptionDetails() {\r\n return this._subscriptionDetails;\r\n }\r\n\r\n set subscriptionDetails(value) {\r\n this._subscriptionDetails = value;\r\n smp_selected_subscription = this._subscriptionDetails;\r\n }\r\n\r\n get selectedSubs() {\r\n return this.hasAttribute('_isSelectedSubs');\r\n }\r\n\r\n set selectedSubs(boolean) {\r\n if (boolean) {\r\n this.setAttribute('_isSelectedSubs', boolean)\r\n } else {\r\n this.removeAttribute('_isSelectedSubs');\r\n }\r\n }\r\n\r\n get subcribeLink() {\r\n return this._subcribeLink;\r\n }\r\n\r\n set subcribeLink(value) {\r\n this._subcribeLink = value;\r\n }\r\n\r\n constructor() {\r\n super();\r\n this.selectedSubs = false;\r\n document.addEventListener('onUpdateAccountDetails', async(e) => {\r\n await this.getSubscriberDetails();\r\n this.dispatchEvent(new CustomEvent('onSelectSubscription', {\r\n bubbles: true,\r\n composed: true,\r\n detail: {\r\n selectedSubscription: this.subscriptionDetails,\r\n loginDetails: this.loginDetails,\r\n userDetails: this.userDetails,\r\n }\r\n }));\r\n })\r\n }\r\n\r\n async firstUpdated() {\r\n if (this.getCookie(\"ls.authorizationData\")) {\r\n const auth = JSON.parse(decodeURIComponent(this.getCookie(\"ls.authorizationData\")));\r\n if (auth.token) {\r\n this.loginDetails = auth;\r\n\r\n if (this.loginDetails.token) {\r\n await this.getSubscriberDetails();\r\n const list = await this.getSubscriptionList();\r\n if (list.length > 0) {\r\n this.subscriptionList = list;\r\n if (this.subscriptionList.length == 1) {\r\n this.selectSubscription();\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n updated() {\r\n if (!this.updatedSubscriptionList && this.subscriptionList) {\r\n this.updatedSubscriptionList = this.subscriptionList;\r\n }\r\n }\r\n\r\n static get styles() {\r\n return css `\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n }\r\n .text-center {\r\n text-align: center;\r\n }\r\n\r\n .d-none {\r\n display: none;\r\n }\r\n \r\n .d-block {\r\n display: block;\r\n }\r\n\r\n .mg-b5 {\r\n margin-bottom: 5px;\r\n }\r\n \r\n .mg-t5 {\r\n margin-top: 5px;\r\n }\r\n \r\n p {\r\n font-size: var(--wh-p-fntSize, 18px);\r\n }\r\n\r\n .welcome-header {\r\n font-size: var(--widget-title-fontSize, 18px);\r\n color: var(--widget-title-color, #000);\r\n background-color: var(--widget-title-bgColor, #fff);\r\n }\r\n\r\n .btn {\r\n display: inline-block;\r\n font-weight: 400;\r\n text-align: center;\r\n white-space: nowrap;\r\n vertical-align: middle;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n border: 1px solid transparent;\r\n padding: 6px 8px;\r\n font-size: 16;\r\n line-height: 1.5;\r\n border-radius: 4px;\r\n }\r\n \r\n .btn:hover, .btn:focus {\r\n text-decoration: none;\r\n }\r\n \r\n .btn:focus, .btn.focus {\r\n outline: 0;\r\n box-shadow: none;\r\n }\r\n \r\n .btn.disabled, .btn:disabled {\r\n opacity: 0.65;\r\n }\r\n \r\n .btn-success {\r\n color: var(--w-btn-col, #505050);\r\n background-color: var(--w-btn-bgc, #fff);\r\n border: 1px solid var(--w-btn-borc, #505050);\r\n font-size: var(--w-btn-fs, 14px);\r\n cursor: pointer;\r\n }\r\n \r\n .btn-success:hover {\r\n color: var(--w-btn-col, #fff);\r\n background-color: var(--w-btn-bgc, #505050);\r\n border: 1px solid var(--w-btn-borc, #505050);\r\n font-size: var(--w-btn-fs, 14px);\r\n cursor: pointer;\r\n }\r\n \r\n .btn-lg {\r\n padding: 3px;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n border-radius: 4px;\r\n }\r\n \r\n .btn-block {\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n .error {\r\n font-size: var(--widget-message-fontSize, 13px);\r\n color: var(--widget-message-color, #000);\r\n }\r\n /*List*/\r\n .dropdown-toogle {\r\n width: 100%;\r\n display: block;\r\n padding: 10px 0;\r\n border-radius: 5px;\r\n background-color: var(--dropdown-button-bgColor, #fff);\r\n color: var(--dropdown-button-Color, #000);\r\n font-size: var(--widget-text-fontSize, 13px);\r\n cursor: pointer;\r\n border: 1px solid #dcdcdc;\r\n }\r\n \r\n .dropdown-toogle:focus {\r\n outline: none;\r\n box-shadow: none;\r\n }\r\n\r\n .dropdown {\r\n position: relative;\r\n width: 59%;\r\n margin-left: 20px;\r\n }\r\n\r\n .subscribe-btn {\r\n position: relative;\r\n width: 10%;\r\n margin-left: 10px;\r\n }\r\n\r\n .dropdown-list {\r\n color: var(--dropdown-list-color, #000);\r\n background-color: var(--dropdown-list-bgColor, #fff);\r\n list-style: none;\r\n position: absolute;\r\n width: 100%;\r\n margin-top: 0px;\r\n box-sizing: border-box;\r\n box-shadow: 0 8px 20px 0 #ededed;\r\n border-radius: 0 0 4px 4px;\r\n z-index: 10;\r\n }\r\n \r\n .dropdown-item {\r\n padding: 5px;\r\n cursor: pointer;\r\n font-size: 13px;\r\n color: var(--dropdown-item-color, #000);\r\n }\r\n \r\n .dropdown-item:hover {\r\n background-color: var(--widget-background-bgColor, #000);\r\n color: #fff;\r\n cursor: pointer;\r\n }\r\n \r\n .button-arrow {\r\n position: relative;\r\n padding: 4px 16px 4px 5px;\r\n }\r\n\r\n .button-arrow:before {\r\n content: ' ';\r\n position: absolute;\r\n border: (--button-arrow-borderColor, #000);\r\n border-style: solid;\r\n border-width: 0 1px 1px 0;\r\n display: inline-block;\r\n padding: 3px;\r\n transform: rotate(45deg);\r\n -webkit-transform: rotate(45deg);\r\n right: 10px;\r\n top: 8px; \r\n }\r\n\r\n .header-dropdown-btn {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n padding-left: 3px;\r\n font-size: 13px;\r\n }\r\n\r\n .header-dropdown-style {\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n }`;\r\n }\r\n getActiveIndicator(){\r\n return `(active)`;\r\n }\r\n getInactiveIndicator(){\r\n return `(inactive)`;\r\n }\r\n render() {\r\n return html `\r\n