\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\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 * @memberof Vaadin\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 { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-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 * @memberof Vaadin\n * @private\n */\nclass DatePickerOverlayContentElement extends\n ThemableMixin(\n ThemePropertyMixin(\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 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(1);\n }\n break;\n case 'left':\n if (isScroller) {\n this._moveFocusByDays(-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) 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 */\n _selectedDate: {\n type: Date\n },\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 */\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 */\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 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 */\n showWeekNumbers: {\n type: Boolean\n },\n\n _fullscreen: {\n value: false,\n observer: '_fullscreenChanged'\n },\n\n _fullscreenMediaQuery: {\n value: '(max-width: 420px), (max-height: 420px)'\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 _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 *\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}\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}\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 */\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 */\n _maxDate: {\n type: Date,\n value: ''\n },\n\n _noInput: {\n type: Boolean,\n computed: '_isNoInput(_fullscreen, _ios, i18n, i18n.*)'\n },\n\n _ios: {\n type: Boolean,\n value: navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\\d+)/)\n },\n\n _webkitOverflowScroll: {\n type: Boolean,\n value: document.createElement('div').style.webkitOverflowScrolling === ''\n },\n\n _ignoreAnnounce: {\n value: true\n },\n\n _focusOverlayOnOpen: Boolean,\n\n _overlayInitialized: Boolean\n };\n }\n\n static get observers() {\n return [\n '_updateHasValue(value)',\n '_validateInput(_selectedDate, _minDate, _maxDate)',\n '_selectedDateChanged(_selectedDate, i18n.formatDate)',\n '_focusedDateChanged(_focusedDate, i18n.formatDate)',\n '_announceFocusedDate(_focusedDate, opened, _ignoreAnnounce)'\n ];\n }\n\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 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 const inputIndex = e.composedPath().indexOf(this._inputElement);\n if (\n e.composedPath().slice(0, inputIndex)\n .filter(el => el.getAttribute && el.getAttribute('part') === 'clear-button')\n .length === 0\n ) {\n this.open();\n }\n });\n\n this.addEventListener('touchend', this._preventDefault.bind(this));\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 }\n\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\n /**\n * @protected\n */\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 _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) {\n this.$.overlay.close();\n }\n }\n\n get _inputElement() {\n return this._input();\n }\n\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 _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 _isNoInput(fullscreen, ios, i18n) {\n return !this._inputElement || fullscreen || ios || !i18n.parseDate;\n }\n\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 _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 _selectedDateChanged(selectedDate, formatDate) {\n if (selectedDate === undefined || formatDate === undefined) {\n return;\n }\n if (this.__userInputOccurred) {\n this.__dispatchChange = true;\n }\n const inputValue = selectedDate && formatDate(DatePickerHelper._extractDateParts(selectedDate));\n const value = this._formatISO(selectedDate);\n if (value !== this.value) {\n this.validate(inputValue);\n this.value = value;\n }\n this.__userInputOccurred = false;\n this.__dispatchChange = false;\n this._focusedDate = selectedDate;\n this._inputValue = selectedDate ? inputValue : '';\n }\n\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._inputValue = focusedDate ? formatDate(DatePickerHelper._extractDateParts(focusedDate)) : '';\n }\n }\n\n _updateHasValue(value) {\n if (value) {\n this.setAttribute('has-value', '');\n } else {\n this.removeAttribute('has-value');\n }\n }\n\n\n __getOverlayTheme(theme, overlayInitialized) {\n if (overlayInitialized) {\n return theme;\n }\n }\n\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 }\n }\n\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 _minChanged(value, oldValue) {\n this._handleDateChange('_minDate', value, oldValue);\n }\n\n _maxChanged(value, oldValue) {\n this._handleDateChange('_maxDate', value, oldValue);\n }\n\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 _fullscreenChanged() {\n if (this._overlayInitialized && this.$.overlay.opened) {\n this._updateAlignmentAndPosition();\n }\n }\n\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 _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 _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 // Select the parsed input or focused date\n this._ignoreFocusedDateChange = true;\n if (this.i18n.parseDate) {\n var inputValue = this._inputValue || '';\n const dateObject = this.i18n.parseDate(inputValue);\n const parsedDate = dateObject &&\n this._parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);\n\n if (this._isValidDate(parsedDate)) {\n this._selectedDate = parsedDate;\n } else {\n this._selectedDate = null;\n this._inputValue = inputValue;\n }\n } else if (this._focusedDate) {\n this._selectedDate = this._focusedDate;\n }\n this._ignoreFocusedDateChange = false;\n\n if (this._nativeInput && this._nativeInput.selectionStart) {\n this._nativeInput.selectionStart = this._nativeInput.selectionEnd;\n }\n this.validate();\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(value) {\n // reset invalid state on the underlying text field\n this.invalid = false;\n value = value !== undefined ? value : this._inputValue;\n return !(this.invalid = !this.checkValidity(value));\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(value) {\n var inputValid = !value ||\n (this._selectedDate && value === this.i18n.formatDate(DatePickerHelper._extractDateParts(this._selectedDate)));\n var minMaxValid = !this._selectedDate ||\n DatePickerHelper._dateAllowed(this._selectedDate, this._minDate, this._maxDate);\n\n var inputValidity = true;\n if (this._inputElement) {\n if (this._inputElement.checkValidity) {\n // vaadin native input elements have the checkValidity method\n inputValidity = this._inputElement.checkValidity(value);\n } else if (this._inputElement.validate) {\n // iron-form-elements have the validate API\n inputValidity = this._inputElement.validate(value);\n }\n }\n\n return inputValid && minMaxValid && inputValidity;\n }\n\n _onScroll(e) {\n if (e.target === window || !this._overlayContent.contains(e.target)) {\n this._updateAlignmentAndPosition();\n }\n }\n\n _focus() {\n if (this._noInput) {\n this._overlayInitialized && this._overlayContent.focus();\n } else {\n this._inputElement.focus();\n }\n }\n\n _focusAndSelect() {\n this._focus();\n this._setSelectionRange(0, this._inputValue.length);\n }\n\n _setSelectionRange(a, b) {\n if (this._nativeInput && this._nativeInput.setSelectionRange) {\n this._nativeInput.setSelectionRange(a, b);\n }\n }\n\n _preventDefault(e) {\n e.preventDefault();\n }\n\n /**\n * Keyboard Navigation\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 _isValidDate(d) {\n return d && !isNaN(d.getTime());\n }\n\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 dateObject = this.i18n.parseDate(this._inputValue);\n const parsedDate = dateObject &&\n this._parseDate(dateObject.year + '-' + (dateObject.month + 1) + '-' + dateObject.day);\n\n if (this._overlayInitialized && this._overlayContent.focusedDate && this._isValidDate(parsedDate)) {\n this._selectedDate = this._overlayContent.focusedDate;\n }\n this.close();\n break;\n }\n case 'esc':\n this._focusedDate = this._selectedDate;\n this._close();\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 _validateInput(date, min, max) {\n if (date && (min || max)) {\n this.invalid = !DatePickerHelper._dateAllowed(date, min, max);\n }\n }\n\n _onUserInput(e) {\n if (!this.opened && this._inputElement.value) {\n this.open();\n }\n this._userInputValueChanged();\n }\n\n _userInputValueChanged(value) {\n if (this.opened && this._inputValue) {\n const dateObject = this.i18n.parseDate && this.i18n.parseDate(this._inputValue);\n const parsedDate = dateObject &&\n this._parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);\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 _announceFocusedDate(_focusedDate, opened, _ignoreAnnounce) {\n if (opened && !_ignoreAnnounce) {\n this._overlayContent.announceFocusedDate();\n }\n }\n\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 { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-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/vaadin-text-field/src/vaadin-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 * \n * ```\n * ```js\n * datePicker.value = '2016-03-02';\n * ```\n * When the selected `value` is changed, a `value-changed` event is triggered.\n *\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description | Theme for Element\n * ----------------|----------------|----------------\n * `text-field` | Input element | vaadin-date-picker\n * `clear-button` | Clear button | vaadin-date-picker\n * `toggle-button` | Toggle button | vaadin-date-picker\n * `overlay-content` | The overlay element | vaadin-date-picker\n * `overlay-header` | Fullscreen mode header | vaadin-date-picker-overlay-content\n * `label` | Fullscreen mode value/label | vaadin-date-picker-overlay-content\n * `clear-button` | Fullscreen mode clear button | vaadin-date-picker-overlay-content\n * `toggle-button` | Fullscreen mode toggle button | vaadin-date-picker-overlay-content\n * `years-toggle-button` | Fullscreen mode years scroller toggle | vaadin-date-picker-overlay-content\n * `months` | Months scroller | vaadin-date-picker-overlay-content\n * `years` | Years scroller | vaadin-date-picker-overlay-content\n * `toolbar` | Footer bar with buttons | vaadin-date-picker-overlay-content\n * `today-button` | Today button | vaadin-date-picker-overlay-content\n * `cancel-button` | Cancel button | vaadin-date-picker-overlay-content\n * `month` | Month calendar | vaadin-date-picker-overlay-content\n * `year-number` | Year number | vaadin-date-picker-overlay-content\n * `year-separator` | Year separator | vaadin-date-picker-overlay-content\n * `month-header` | Month title | vaadin-month-calendar\n * `weekdays` | Weekday container | vaadin-month-calendar\n * `weekday` | Weekday element | vaadin-month-calendar\n * `week-numbers` | Week numbers container | vaadin-month-calendar\n * `week-number` | Week number element | vaadin-month-calendar\n * `date` | Date element | vaadin-month-calendar\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -------------|-------------|------------\n * `invalid` | Set when the element is invalid | :host\n * `opened` | Set when the date selector overlay is opened | :host\n * `readonly` | Set when the element is readonly | :host\n * `disabled` | Set when the element is disabled | :host\n * `today` | Set on the date corresponding to the current day | date\n * `focused` | Set on the focused date | date\n * `disabled` | Set on the date out of the allowed range | date\n * `selected` | Set on the selected date | date\n *\n * If you want to replace the default input field with a custom implementation, you should use the\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 * @memberof Vaadin\n * @mixes Vaadin.ElementMixin\n * @mixes Vaadin.ControlStateMixin\n * @mixes Vaadin.ThemableMixin\n * @mixes Vaadin.ThemePropertyMixin\n * @mixes Vaadin.DatePickerMixin\n * @mixes Polymer.GestureEventListeners\n * @demo demo/index.html\n */\nclass DatePickerElement extends\n ElementMixin(\n ControlStateMixin(\n ThemableMixin(\n ThemePropertyMixin(\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\n static get is() {\n return 'vaadin-date-picker';\n }\n\n static get version() {\n return '4.0.2';\n }\n\n static get properties() {\n return {\n /**\n * Set to true to display the clear icon which clears the input.\n */\n clearButtonVisible: {\n type: Boolean,\n value: false\n },\n\n /**\n * Set to true to disable this element.\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 */\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 */\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 */\n invalid: {\n type: Boolean,\n reflectToAttribute: true,\n notify: true,\n value: false\n },\n\n _userInputValue: String\n };\n }\n\n static get observers() {\n return [\n '_userInputValueChanged(_userInputValue)',\n '_setClearButtonLabel(i18n.clear)'\n ];\n }\n\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 // FIXME(platosha): dispatch `input` event on\n // clear button\n // https://github.com/vaadin/vaadin-text-field/issues/347\n this._inputElement.addEventListener('change', () => {\n if (this._inputElement.value === '') {\n this.__dispatchChange = true;\n this.value = '';\n this.__dispatchChange = false;\n }\n });\n }\n\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 _toggle(e) {\n e.stopPropagation();\n this[(this._overlayInitialized && this.$.overlay.opened) ? 'close' : 'open']();\n }\n\n _input() {\n return this.$.input;\n }\n\n set _inputValue(value) {\n this._inputElement.value = value;\n }\n\n get _inputValue() {\n return this._inputElement.value;\n }\n\n _getAriaExpanded(opened) {\n return Boolean(opened).toString();\n }\n\n /**\n * Focussable element used by vaadin-control-state-mixin\n */\n get focusElement() {\n return this._input() || this;\n }\n\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 '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/typography.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { DirMixin } from '@vaadin/vaadin-element-mixin/vaadin-dir-mixin.js';\nimport { ItemMixin } from './vaadin-item-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * `` is a Web Component providing layout for items in tabs and menus.\n *\n * ```\n * \n * Item content\n * \n * ```\n *\n * ### Selectable\n *\n * `` has the `selected` property and the corresponding state attribute.\n * Currently, the component sets the `selected` to false, when `disabled` property is set to true.\n * But other than that, the `` does not switch selection by itself.\n * In general, it is the wrapper component, like ``, which should update\n * the `selected` property on the items, e. g. on mousedown or when Enter / Spacebar is pressed.\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ---|---\n * `content` | The element that wraps the slot\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -----------|-------------|------------\n * `disabled` | Set to a disabled item | :host\n * `focused` | Set when the element is focused | :host\n * `focus-ring` | Set when the element is keyboard focused | :host\n * `selected` | Set when the item is selected | :host\n * `active` | Set when mousedown or enter/spacebar pressed | :host\n *\n * @extends PolymerElement\n * @mixes ItemMixin\n * @mixes ThemableMixin\n * @mixes DirMixin\n */\nclass ItemElement extends ItemMixin(ThemableMixin(DirMixin(PolymerElement))) {\n static get template() {\n return html`\n \n \n \n
\n`;\n }\n\n static get is() {\n return 'vaadin-item';\n }\n\n static get version() {\n return '2.3.0';\n }\n\n constructor() {\n super();\n\n /**\n * Submittable string value. The default value is the trimmed text content of the element.\n * @type {string}\n */\n this.value;\n }\n}\n\ncustomElements.define(ItemElement.is, ItemElement);\n\nexport { ItemElement };\n","import '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/color.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n","/**\n@license\nCopyright (c) 2019 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nimport { ListMixin } from './vaadin-list-mixin.js';\n\n/**\n * A mixin for `nav` elements, facilitating multiple selection of childNodes.\n *\n * @polymerMixin\n * @mixes ListMixin\n */\nexport const MultiSelectListMixin = superClass => class VaadinMultiSelectListMixin extends ListMixin(superClass) {\n static get properties() {\n return {\n /**\n * Specifies that multiple options can be selected at once.\n */\n multiple: {\n type: Boolean,\n value: false,\n reflectToAttribute: true,\n observer: '_multipleChanged'\n },\n\n /**\n * Array of indexes of the items selected in the items array\n * Note: Not updated when used in single selection mode.\n * @type {string[] | null | undefined}\n */\n selectedValues: {\n type: Array,\n notify: true,\n value: function() {\n return [];\n }\n }\n };\n }\n\n static get observers() {\n return [\n `_enhanceMultipleItems(items, multiple, selected, selectedValues, selectedValues.*)`\n ];\n }\n\n /** @protected */\n ready() {\n // Should be attached before click listener in list-mixin\n this.addEventListener('click', e => this._onMultipleClick(e));\n\n super.ready();\n }\n\n /** @private */\n _enhanceMultipleItems(items, multiple, selected, selectedValues) {\n if (!items || !multiple) {\n return;\n }\n\n if (selectedValues) {\n const selectedItems = selectedValues.map(selectedId => items[selectedId]);\n items.forEach(item => item.selected = selectedItems.indexOf(item) !== -1);\n }\n\n this._scrollToLastSelectedItem();\n }\n\n /** @private */\n _scrollToLastSelectedItem() {\n const lastSelectedItem = this.selectedValues.slice(-1)[0];\n if (lastSelectedItem && !lastSelectedItem.disabled) {\n this._scrollToItem(lastSelectedItem);\n }\n }\n\n /**\n * @param {!MouseEvent} event\n * @protected\n */\n _onMultipleClick(event) {\n const item = this._filterItems(event.composedPath())[0];\n const idx = item && !item.disabled ? this.items.indexOf(item) : -1;\n if (idx < 0 || !this.multiple) {\n return;\n }\n\n event.preventDefault();\n if (this.selectedValues.indexOf(idx) !== -1) {\n this.selectedValues = this.selectedValues.filter(v => v !== idx);\n } else {\n this.selectedValues = this.selectedValues.concat(idx);\n }\n }\n\n /** @private */\n _multipleChanged(value, oldValue) {\n // Changing from multiple to single selection, clear selection.\n if (!value && oldValue) {\n this.selectedValues = [];\n this.items.forEach(item => item.selected = false);\n }\n\n // Changing from single to multiple selection, add selected to selectedValues.\n if (value && !oldValue && this.selected !== undefined) {\n this.push('selectedValues', this.selected);\n this.selected = undefined;\n }\n }\n\n /**\n * Fired when the selection is changed.\n * Not fired in single selection mode.\n *\n * @event selected-values-changed\n * @param {Object} detail\n * @param {Object} detail.value the array of indexes of the items selected in the items array.\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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { MultiSelectListMixin } from '@vaadin/vaadin-list-mixin/vaadin-multi-select-list-mixin.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * `` is a Web Component for creating menus.\n *\n * ```\n * \n * Item 1\n * Item 2\n * Item 3\n * Item 4\n * \n * ```\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ------------------|------------------------\n * `items` | The items container\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @extends PolymerElement\n * @mixes MultiSelectListMixin\n * @mixes ThemableMixin\n * @mixes ElementMixin\n * @demo demo/index.html\n */\nclass ListBoxElement extends ElementMixin(MultiSelectListMixin(ThemableMixin(PolymerElement))) {\n static get template() {\n return html`\n \n \n \n
\n`;\n }\n\n static get is() {\n return 'vaadin-list-box';\n }\n\n static get version() {\n return '1.4.0';\n }\n\n static get properties() {\n return {\n // We don't need to define this property since super default is vertical,\n // but we don't want it to be modified, or be shown in the API docs.\n /** @private */\n orientation: {\n readOnly: true\n }\n };\n }\n\n constructor() {\n super();\n\n /**\n * @type {Element | null}\n * @protected\n */\n this.focused;\n }\n\n ready() {\n super.ready();\n this.setAttribute('role', 'list');\n\n setTimeout(this._checkImport.bind(this), 2000);\n }\n\n /**\n * @return {!HTMLElement}\n * @protected\n */\n get _scrollerElement() {\n return this.shadowRoot.querySelector('[part=\"items\"]');\n }\n\n /** @private */\n _checkImport() {\n var item = this.querySelector('vaadin-item');\n if (item && !(item instanceof PolymerElement)) {\n console.warn(`Make sure you have imported the vaadin-item element.`);\n }\n }\n}\n\ncustomElements.define(ListBoxElement.is, ListBoxElement);\n\nexport { ListBoxElement };\n","import '../color.js';\nimport '../typography.js';\nimport '../shadow.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n","import '../color.js';\nimport './overlay.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = ``;\n\ndocument.head.appendChild($_documentContainer.content);\n","import '@vaadin/vaadin-item/theme/material/vaadin-item.js';\nimport '@vaadin/vaadin-list-box/theme/material/vaadin-list-box.js';\nimport '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';\nimport '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';\nimport '@vaadin/vaadin-material-styles/mixins/field-button.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\n \n \n \n\n \n \n \n\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 '@polymer/polymer/lib/elements/dom-module.js';\n\nimport { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n/**\n * The overlay element.\n *\n * ### Styling\n *\n * See [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\n * for `` parts.\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @extends Vaadin.OverlayElement\n */\nclass SelectOverlayElement extends OverlayElement {\n static get is() {\n return 'vaadin-select-overlay';\n }\n}\ncustomElements.define(SelectOverlayElement.is, SelectOverlayElement);\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 { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';\n\nlet memoizedTemplate;\n/**\n * The text-field element.\n *\n * ### Styling\n *\n * See [`` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)\n * for `` parts and available slots (prefix, suffix etc.)\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @extends Vaadin.TextFieldElement\n */\nclass SelectTextFieldElement extends TextFieldElement {\n static get is() {\n return 'vaadin-select-text-field';\n }\n\n static get template() {\n // Check if text-field is using slotted input\n if (super.template.content.querySelector('slot[name=\"input\"]')) {\n return super.template;\n }\n\n if (!memoizedTemplate) {\n // Clone the superclass template\n memoizedTemplate = super.template.cloneNode(true);\n\n // Create a slot for the value element\n const slot = document.createElement('slot');\n slot.setAttribute('name', 'value');\n\n // Insert the slot before the text-field\n const input = memoizedTemplate.content.querySelector('input');\n\n input.parentElement.replaceChild(slot, input);\n slot.appendChild(input);\n }\n return memoizedTemplate;\n }\n\n get focusElement() {\n return this.shadowRoot.querySelector('[part=input-field]');\n }\n\n get inputElement() {\n return this.shadowRoot.querySelector('input');\n }\n}\n\ncustomElements.define(SelectTextFieldElement.is, SelectTextFieldElement);\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/custom-style.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';\nimport { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';\nimport '@polymer/iron-media-query/iron-media-query.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport './vaadin-select-overlay.js';\nimport './vaadin-select-text-field.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';\nimport { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `\n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n/**\n *\n * `` is a Web Component for selecting values from a list of items. The content of the\n * the select can be populated in two ways: imperatively by using renderer callback function and\n * declaratively by using Polymer's Templates.\n *\n * ### Rendering\n *\n * By default, the select uses the content provided by using the renderer callback function.\n *\n * The renderer function provides `root`, `select` arguments.\n * Generate DOM content, append it to the `root` element and control the state\n * of the host element by accessing `select`.\n *\n * ```html\n * \n * ```\n * ```js\n * const select = document.querySelector('#select');\n * select.renderer = function(root, select) {\n * const listBox = document.createElement('vaadin-list-box');\n * // append 3 elements\n * ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n * const item = document.createElement('vaadin-item');\n * item.textContent = name;\n * listBox.appendChild(item);\n * });\n *\n * // update the content\n * root.appendChild(listBox);\n * };\n * ```\n *\n * Renderer is called on initialization of new select and on its opening.\n * DOM generated during the renderer call can be reused\n * in the next renderer call and will be provided with the `root` argument.\n * On first call it will be empty.\n *\n * ### Polymer Templates\n *\n * Alternatively, the content can be provided with Polymer's Template.\n * Select finds the first child template and uses that in case renderer callback function\n * is not provided. You can also set a custom template using the `template` property.\n *\n * ```\n * \n * \n * \n * Foo\n * Bar\n * Baz\n * \n * \n * \n * ```\n *\n * Hint: By setting the `label` property of inner vaadin-items you will\n * be able to change the visual representation of the selected value in the input part.\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ----------------|----------------\n * `toggle-button` | The toggle button\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -------------|-------------|------------\n * `opened` | Set when the select is open | :host\n * `invalid` | Set when the element is invalid | :host\n * `focused` | Set when the element is focused | :host\n * `focus-ring` | Set when the element is keyboard focused | :host\n * `readonly` | Set when the select is read only | :host\n *\n * `` element sets these custom CSS properties:\n *\n * Property name | Description | Theme for element\n * --- | --- | ---\n * `--vaadin-select-text-field-width` | Width of the select text field | `vaadin-select-overlay`\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * In addition to `` itself, the following internal\n * components are themable:\n *\n * - ``\n * - ``\n *\n * Note: the `theme` attribute value set on `` is\n * propagated to the internal themable components listed above.\n *\n * @memberof Vaadin\n * @mixes Vaadin.ElementMixin\n * @mixes Vaadin.ControlStateMixin\n * @mixes Vaadin.ThemableMixin\n * @mixes Vaadin.ThemePropertyMixin\n * @demo demo/index.html\n */\nclass SelectElement extends\n ElementMixin(\n ControlStateMixin(\n ThemableMixin(\n ThemePropertyMixin(\n mixinBehaviors(IronResizableBehavior, PolymerElement))))) {\n static get template() {\n return html`\n \n\n \n \n \n \n \n \n\n \n`;\n }\n\n static get is() {\n return 'vaadin-select';\n }\n\n static get version() {\n return '2.1.5';\n }\n\n static get properties() {\n return {\n /**\n * Set when the select is open\n */\n opened: {\n type: Boolean,\n value: false,\n notify: true,\n reflectToAttribute: true,\n observer: '_openedChanged'\n },\n\n /**\n * Custom function for rendering the content of the ``.\n * Receives two arguments:\n *\n * - `root` The `` internal container\n * DOM element. Append your content to it.\n * - `select` The reference to the `` element.\n */\n renderer: Function,\n\n /**\n * The error message to display when the select value is invalid\n */\n errorMessage: {\n type: String,\n value: ''\n },\n\n /**\n * String used for the label element.\n */\n label: {\n type: String\n },\n\n /**\n * It stores the the `value` property of the selected item, providing the\n * value for iron-form.\n * When there’s an item selected, it's the value of that item, otherwise\n * it's an empty string.\n * On change or initialization, the component finds the item which matches the\n * value and displays it.\n * If no value is provided to the component, it selects the first item without\n * value or empty value.\n * Hint: If you do not want to select any item by default, you can either set all\n * the values of inner vaadin-items, or set the vaadin-select value to\n * an inexistent value in the items list.\n */\n value: {\n type: String,\n value: '',\n notify: true,\n observer: '_valueChanged'\n },\n\n /**\n * The current required state of the select. True if required.\n */\n required: {\n type: Boolean,\n reflectToAttribute: true,\n observer: '_requiredChanged'\n },\n\n /**\n * Set to true if the value is invalid.\n */\n invalid: {\n type: Boolean,\n reflectToAttribute: true,\n notify: true,\n value: false\n },\n\n /**\n * The name of this element.\n */\n name: {\n type: String,\n reflectToAttribute: true\n },\n\n /**\n * A hint to the user of what can be entered in the control.\n * The placeholder will be displayed in the case that there\n * is no item selected, or the selected item has an empty\n * string label, or the selected item has no label and it's\n * DOM content is empty.\n */\n placeholder: {\n type: String\n },\n\n /**\n * When present, it specifies that the element is read-only.\n */\n readonly: {\n type: Boolean,\n value: false,\n reflectToAttribute: true\n },\n\n _phone: Boolean,\n\n _phoneMediaQuery: {\n value: '(max-width: 420px), (max-height: 420px)'\n },\n\n _overlayElement: Object,\n\n _inputElement: Object,\n\n _toggleElement: Object,\n\n _items: Object,\n\n _contentTemplate: Object,\n\n _oldTemplate: Object,\n\n _oldRenderer: Object\n };\n }\n\n static get observers() {\n return [\n '_updateSelectedItem(value, _items)',\n '_updateAriaExpanded(opened, _toggleElement, _inputElement)',\n '_templateOrRendererChanged(_contentTemplate, renderer, _overlayElement)'\n ];\n }\n\n /** @private */\n constructor() {\n super();\n this._boundSetPosition = this._setPosition.bind(this);\n }\n\n /** @private */\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('iron-resize', this._boundSetPosition);\n }\n\n ready() {\n super.ready();\n\n this._overlayElement = this.shadowRoot.querySelector('vaadin-select-overlay');\n this._valueElement = this.shadowRoot.querySelector('[part=\"value\"]');\n this._toggleElement = this.shadowRoot.querySelector('[part=\"toggle-button\"]');\n this._nativeInput = this.focusElement.shadowRoot.querySelector('input');\n this._nativeInput.setAttribute('aria-hidden', true);\n this._nativeInput.setAttribute('tabindex', -1);\n this._nativeInput.style.pointerEvents = 'none';\n\n this.focusElement.addEventListener('click', e => this.opened = !this.readonly);\n this.focusElement.addEventListener('keydown', e => this._onKeyDown(e));\n\n this._observer = new FlattenedNodesObserver(this, info => this._setTemplateFromNodes(info.addedNodes));\n this._observer.flush();\n }\n\n _setTemplateFromNodes(nodes) {\n const template = Array.from(nodes).filter(node => node.localName && node.localName === 'template')[0] || this._contentTemplate;\n this._overlayElement.template = this._contentTemplate = template;\n this._setForwardHostProps();\n }\n\n _setForwardHostProps() {\n if (this._overlayElement.content) {\n const origForwardHostProp = this._overlayElement._instance && this._overlayElement._instance.forwardHostProp;\n\n if (this._overlayElement._instance) {\n this._overlayElement._instance.forwardHostProp = (...args) => {\n origForwardHostProp.apply(this._overlayElement._instance, args);\n setTimeout(() => {\n this._updateValueSlot();\n });\n };\n\n this._assignMenuElement();\n }\n }\n }\n\n /**\n * Manually invoke existing renderer.\n */\n render() {\n this._overlayElement.render();\n if (this._menuElement && this._menuElement.items) {\n this._updateSelectedItem(this.value, this._menuElement.items);\n }\n }\n\n _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {\n if (template !== oldTemplate) {\n this._contentTemplate = undefined;\n } else if (renderer !== oldRenderer) {\n this.renderer = undefined;\n }\n }\n\n _templateOrRendererChanged(template, renderer, overlay) {\n if (!overlay) {\n return;\n }\n\n if (template && renderer) {\n this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);\n throw new Error('You should only use either a renderer or a template for select content');\n }\n\n this._oldTemplate = template;\n this._oldRenderer = renderer;\n\n if (renderer) {\n overlay.setProperties({owner: this, renderer: renderer});\n this.render();\n\n if (overlay.content.firstChild) {\n this._assignMenuElement();\n }\n }\n }\n\n _assignMenuElement() {\n this._menuElement = Array.from(this._overlayElement.content.children).filter(element => element.localName !== 'style')[0];\n\n if (this._menuElement) {\n this._menuElement.addEventListener('items-changed', e => {\n this._items = this._menuElement.items;\n this._items.forEach(item => item.setAttribute('role', 'option'));\n });\n this._menuElement.addEventListener('selected-changed', e => this._updateValueSlot());\n this._menuElement.addEventListener('keydown', e => this._onKeyDownInside(e));\n this._menuElement.addEventListener('click', e => {\n this.__userInteraction = true;\n this.opened = false;\n }, true);\n\n this._menuElement.setAttribute('role', 'listbox');\n }\n }\n\n /** @protected */\n get focusElement() {\n return this._inputElement ||\n (this._inputElement = this.shadowRoot.querySelector('vaadin-select-text-field'));\n }\n\n /** @private */\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('iron-resize', this._boundSetPosition);\n // Making sure the select is closed and removed from DOM after detaching the select.\n this.opened = false;\n }\n\n /** @private */\n notifyResize() {\n super.notifyResize();\n if (this.positionTarget && this.opened) {\n this._setPosition();\n // Schedule another position update (to cover virtual keyboard opening for example)\n requestAnimationFrame(this._setPosition.bind(this));\n }\n }\n\n _requiredChanged(required) {\n this.setAttribute('aria-required', required);\n }\n\n _valueChanged(value, oldValue) {\n if (value === '') {\n this.focusElement.removeAttribute('has-value');\n } else {\n this.focusElement.setAttribute('has-value', '');\n }\n\n // Skip validation for the initial empty string value\n if (value === '' && oldValue === undefined) {\n return;\n }\n this.validate();\n }\n\n _onKeyDown(e) {\n if (!this.readonly && !this.opened) {\n if (/^(Enter|SpaceBar|\\s|ArrowDown|Down|ArrowUp|Up)$/.test(e.key)) {\n e.preventDefault();\n this.opened = true;\n\n } else if (/[a-zA-Z0-9]/.test(e.key) && e.key.length === 1) {\n const selected = this._menuElement.selected;\n const currentIdx = selected !== undefined ? selected : -1;\n const newIdx = this._menuElement._searchKey(currentIdx, e.key);\n if (newIdx >= 0) {\n this.__userInteraction = true;\n this._updateSelectedItem(this._items[newIdx].value, this._items);\n }\n }\n }\n }\n\n _onKeyDownInside(e) {\n if (/^(Tab)$/.test(e.key)) {\n this.opened = false;\n }\n }\n\n _openedChanged(opened, wasOpened) {\n if (opened) {\n if (\n !this._overlayElement ||\n !this._menuElement ||\n !this._toggleElement ||\n !this.focusElement ||\n this.disabled ||\n this.readonly\n ) {\n this.opened = false;\n return;\n }\n\n this._openedWithFocusRing = this.hasAttribute('focus-ring') || this.focusElement.hasAttribute('focus-ring');\n this._menuElement.focus();\n this._setPosition();\n window.addEventListener('scroll', this._boundSetPosition, true);\n } else if (wasOpened) {\n if (this._phone) {\n this._setFocused(false);\n } else {\n this.focusElement.focus();\n if (this._openedWithFocusRing) {\n this.focusElement.setAttribute('focus-ring', '');\n }\n }\n this.validate();\n window.removeEventListener('scroll', this._boundSetPosition, true);\n }\n }\n\n _hasContent(selected) {\n if (!selected) {\n return false;\n }\n return Boolean(\n selected.hasAttribute('label') ?\n selected.getAttribute('label') :\n selected.textContent.trim() || selected.children.length\n );\n }\n\n _attachSelectedItem(selected) {\n if (!selected) {\n return;\n }\n let labelItem;\n if (selected.hasAttribute('label')) {\n labelItem = document.createElement('vaadin-item');\n labelItem.textContent = selected.getAttribute('label');\n } else {\n labelItem = selected.cloneNode(true);\n }\n\n // store reference to the original item\n labelItem._sourceItem = selected;\n\n labelItem.removeAttribute('tabindex');\n\n this._valueElement.appendChild(labelItem);\n\n labelItem.selected = true;\n }\n\n _updateAriaExpanded(opened, toggleElement, inputElement) {\n toggleElement && toggleElement.setAttribute('aria-expanded', opened);\n if (inputElement && inputElement.focusElement) {\n inputElement.focusElement.setAttribute('aria-expanded', opened);\n }\n }\n\n _updateValueSlot() {\n this.opened = false;\n this._valueElement.innerHTML = '';\n\n const selected = this._items[this._menuElement.selected];\n\n const hasContent = this._hasContent(selected);\n\n // Check if text-field is using slotted input\n const slotName = this._inputElement.shadowRoot.querySelector('slot[name=\"input\"]') ? 'input' : 'value';\n\n // Toggle visibility of _valueElement vs fallback input with placeholder\n this._valueElement.slot = hasContent ? slotName : '';\n\n // Ensure the slot distribution to apply correct style scope for cloned item\n if (hasContent && window.ShadyDOM) {\n window.ShadyDOM.flush();\n }\n\n this._attachSelectedItem(selected);\n\n if (!this._valueChanging && selected) {\n this._selectedChanging = true;\n this.value = selected.value || '';\n if (this.__userInteraction) {\n this.dispatchEvent(new CustomEvent('change', {bubbles: true}));\n this.__userInteraction = false;\n }\n delete this._selectedChanging;\n }\n }\n\n _updateSelectedItem(value, items) {\n if (items) {\n this._menuElement.selected = items.reduce((prev, item, idx) => {\n return prev === undefined && item.value === value ? idx : prev;\n }, undefined);\n if (!this._selectedChanging) {\n this._valueChanging = true;\n this._updateValueSlot();\n delete this._valueChanging;\n }\n }\n }\n\n /** @override */\n _setFocused(focused) {\n // Keep `focused` state when opening the overlay for styling purpose.\n super._setFocused(this.opened || focused);\n this.focusElement._setFocused(this.hasAttribute('focused'));\n !this.hasAttribute('focused') && this.validate();\n }\n\n _setPosition() {\n const inputRect = this._inputElement.shadowRoot.querySelector('[part~=\"input-field\"]').getBoundingClientRect();\n const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);\n const bottomAlign = inputRect.top > (viewportHeight - inputRect.height) / 2;\n\n this._overlayElement.style.left = inputRect.left + 'px';\n if (bottomAlign) {\n this._overlayElement.setAttribute('bottom-aligned', '');\n this._overlayElement.style.removeProperty('top');\n this._overlayElement.style.bottom = (viewportHeight - inputRect.bottom) + 'px';\n } else {\n this._overlayElement.removeAttribute('bottom-aligned');\n this._overlayElement.style.removeProperty('bottom');\n this._overlayElement.style.top = inputRect.top + 'px';\n }\n\n this._overlayElement.updateStyles({'--vaadin-select-text-field-width': inputRect.width + 'px'});\n }\n\n /**\n * Returns true if `value` is valid, and sets the `invalid` flag appropriately.\n *\n * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately\n */\n validate() {\n return !(this.invalid = !(this.disabled || !this.required || this.value));\n }\n\n /**\n * Fired when the user commits a value change.\n *\n * @event change\n */\n}\n\ncustomElements.define(SelectElement.is, SelectElement);\n\nexport { SelectElement };\n","import '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/typography.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n","/**\n@license\nCopyright (c) 2016 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n/**\n\nThis is a fork of for 's internal purposes only!\nTo update:\n1. Get the most recent code from https://github.com/PolymerElements/iron-list/\n2. Remove the to avoid collisions with actual \n3. Change \"Polymer({\" to \"window.PolymerIronList = Polymer.Class({\" to expose the class\n3.1. Add @namespace\n4. Optional: Remove all properties and functions not needed by \n5. Profit!\n\n*/\n/*\n FIXME(polymer-modulizer): the above comments were extracted\n from HTML and may be out of place here. Review them and\n then delete this comment!\n*/\nimport '@polymer/polymer/polymer-legacy.js';\n\nimport { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';\nimport { IronScrollTargetBehavior } from '@polymer/iron-scroll-target-behavior/iron-scroll-target-behavior.js';\nimport { animationFrame, idlePeriod, microTask } from '@polymer/polymer/lib/utils/async.js';\nimport { Class } from '@polymer/polymer/lib/legacy/class.js';\nimport { flush, enqueueDebouncer } from '@polymer/polymer/lib/utils/flush.js';\nimport { flush as flush$0 } from '@polymer/polymer/lib/legacy/polymer.dom.js';\nimport { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\nvar IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\\d+)/);\nvar IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;\nvar DEFAULT_PHYSICAL_COUNT = 3;\nvar ANIMATION_FRAME = animationFrame;\nvar IDLE_TIME = idlePeriod;\nvar MICRO_TASK = microTask;\n\nexport const PolymerIronList = Class({\n\n behaviors: [\n IronResizableBehavior,\n IronScrollTargetBehavior\n ],\n\n /**\n * The ratio of hidden tiles that should remain in the scroll direction.\n * Recommended value ~0.5, so it will distribute tiles evenly in both directions.\n */\n _ratio: 0.5,\n\n /**\n * The padding-top value for the list.\n */\n _scrollerPaddingTop: 0,\n\n /**\n * This value is the same as `scrollTop`.\n */\n _scrollPosition: 0,\n\n /**\n * The sum of the heights of all the tiles in the DOM.\n */\n _physicalSize: 0,\n\n /**\n * The average `offsetHeight` of the tiles observed till now.\n */\n _physicalAverage: 0,\n\n /**\n * The number of tiles which `offsetHeight` > 0 observed until now.\n */\n _physicalAverageCount: 0,\n\n /**\n * The Y position of the item rendered in the `_physicalStart`\n * tile relative to the scrolling list.\n */\n _physicalTop: 0,\n\n /**\n * The number of items in the list.\n */\n _virtualCount: 0,\n\n /**\n * The estimated scroll height based on `_physicalAverage`\n */\n _estScrollHeight: 0,\n\n /**\n * The scroll height of the dom node\n */\n _scrollHeight: 0,\n\n /**\n * The height of the list. This is referred as the viewport in the context of list.\n */\n _viewportHeight: 0,\n\n /**\n * The width of the list. This is referred as the viewport in the context of list.\n */\n _viewportWidth: 0,\n\n /**\n * An array of DOM nodes that are currently in the tree\n * @type {?Array}\n */\n _physicalItems: null,\n\n /**\n * An array of heights for each item in `_physicalItems`\n * @type {?Array}\n */\n _physicalSizes: null,\n\n /**\n * A cached value for the first visible index.\n * See `firstVisibleIndex`\n * @type {?number}\n */\n _firstVisibleIndexVal: null,\n\n /**\n * A Polymer collection for the items.\n * @type {?Polymer.Collection}\n */\n _collection: null,\n\n /**\n * A cached value for the last visible index.\n * See `lastVisibleIndex`\n * @type {?number}\n */\n _lastVisibleIndexVal: null,\n\n /**\n * The max number of pages to render. One page is equivalent to the height of the list.\n */\n _maxPages: 2,\n\n /**\n * The virtual index of the focused item.\n */\n _focusedVirtualIndex: -1,\n\n /**\n * The maximum items per row\n */\n _itemsPerRow: 1,\n\n /**\n * The height of the row in grid layout.\n */\n _rowHeight: 0,\n\n /**\n * The cost of stamping a template in ms.\n */\n _templateCost: 0,\n\n /**\n * The bottom of the physical content.\n */\n get _physicalBottom() {\n return this._physicalTop + this._physicalSize;\n },\n\n /**\n * The bottom of the scroll.\n */\n get _scrollBottom() {\n return this._scrollPosition + this._viewportHeight;\n },\n\n /**\n * The n-th item rendered in the last physical item.\n */\n get _virtualEnd() {\n return this._virtualStart + this._physicalCount - 1;\n },\n\n /**\n * The height of the physical content that isn't on the screen.\n */\n get _hiddenContentSize() {\n var size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;\n return size - this._viewportHeight;\n },\n\n /**\n * The maximum scroll top value.\n */\n get _maxScrollTop() {\n return this._estScrollHeight - this._viewportHeight + this._scrollOffset;\n },\n\n /**\n * The largest n-th value for an item such that it can be rendered in `_physicalStart`.\n */\n get _maxVirtualStart() {\n var virtualCount = this._convertIndexToCompleteRow(this._virtualCount);\n return Math.max(0, virtualCount - this._physicalCount);\n },\n\n set _virtualStart(val) {\n val = this._clamp(val, 0, this._maxVirtualStart);\n if (this.grid) {\n val = val - (val % this._itemsPerRow);\n }\n this._virtualStartVal = val;\n },\n\n get _virtualStart() {\n return this._virtualStartVal || 0;\n },\n\n /**\n * The k-th tile that is at the top of the scrolling list.\n */\n set _physicalStart(val) {\n val = val % this._physicalCount;\n if (val < 0) {\n val = this._physicalCount + val;\n }\n if (this.grid) {\n val = val - (val % this._itemsPerRow);\n }\n this._physicalStartVal = val;\n },\n\n get _physicalStart() {\n return this._physicalStartVal || 0;\n },\n\n /**\n * The k-th tile that is at the bottom of the scrolling list.\n */\n get _physicalEnd() {\n return (this._physicalStart + this._physicalCount - 1) % this._physicalCount;\n },\n\n set _physicalCount(val) {\n this._physicalCountVal = val;\n },\n\n get _physicalCount() {\n return this._physicalCountVal || 0;\n },\n\n /**\n * An optimal physical size such that we will have enough physical items\n * to fill up the viewport and recycle when the user scrolls.\n *\n * This default value assumes that we will at least have the equivalent\n * to a viewport of physical items above and below the user's viewport.\n */\n get _optPhysicalSize() {\n return this._viewportHeight === 0 ? Infinity : this._viewportHeight * this._maxPages;\n },\n\n /**\n * True if the current list is visible.\n */\n get _isVisible() {\n return Boolean(this.offsetWidth || this.offsetHeight);\n },\n\n /**\n * Gets the index of the first visible item in the viewport.\n *\n * @type {number}\n */\n get firstVisibleIndex() {\n var idx = this._firstVisibleIndexVal;\n if (idx == null) {\n var physicalOffset = this._physicalTop + this._scrollOffset;\n\n idx = this._iterateItems(function(pidx, vidx) {\n physicalOffset += this._getPhysicalSizeIncrement(pidx);\n\n if (physicalOffset > this._scrollPosition) {\n return this.grid ? vidx - (vidx % this._itemsPerRow) : vidx;\n }\n // Handle a partially rendered final row in grid mode\n if (this.grid && this._virtualCount - 1 === vidx) {\n return vidx - (vidx % this._itemsPerRow);\n }\n }) || 0;\n this._firstVisibleIndexVal = idx;\n }\n return idx;\n },\n\n /**\n * Gets the index of the last visible item in the viewport.\n *\n * @type {number}\n */\n get lastVisibleIndex() {\n var idx = this._lastVisibleIndexVal;\n if (idx == null) {\n if (this.grid) {\n idx = Math.min(this._virtualCount, this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1);\n } else {\n var physicalOffset = this._physicalTop + this._scrollOffset;\n this._iterateItems(function(pidx, vidx) {\n if (physicalOffset < this._scrollBottom) {\n idx = vidx;\n }\n physicalOffset += this._getPhysicalSizeIncrement(pidx);\n });\n }\n this._lastVisibleIndexVal = idx;\n }\n return idx;\n },\n\n get _scrollOffset() {\n return this._scrollerPaddingTop;\n },\n\n attached: function() {\n this._debounce('_render', this._render, ANIMATION_FRAME);\n // `iron-resize` is fired when the list is attached if the event is added\n // before attached causing unnecessary work.\n this.listen(this, 'iron-resize', '_resizeHandler');\n },\n\n detached: function() {\n this.unlisten(this, 'iron-resize', '_resizeHandler');\n },\n\n /**\n * Invoke this method if you dynamically update the viewport's\n * size or CSS padding.\n *\n * @method updateViewportBoundaries\n */\n updateViewportBoundaries: function() {\n var styles = window.getComputedStyle(this);\n this._scrollerPaddingTop = this.scrollTarget === this ? 0 : parseInt(styles['padding-top'], 10);\n this._isRTL = Boolean(styles.direction === 'rtl');\n this._viewportWidth = this.$.items.offsetWidth;\n this._viewportHeight = this._scrollTargetHeight;\n this.grid && this._updateGridMetrics();\n },\n\n /**\n * Recycles the physical items when needed.\n */\n _scrollHandler: function() {\n var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));\n var delta = scrollTop - this._scrollPosition;\n var isScrollingDown = delta >= 0;\n // Track the current scroll position.\n this._scrollPosition = scrollTop;\n // Clear indexes for first and last visible indexes.\n this._firstVisibleIndexVal = null;\n this._lastVisibleIndexVal = null;\n // Random access.\n if (Math.abs(delta) > this._physicalSize && this._physicalSize > 0) {\n delta = delta - this._scrollOffset;\n var idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;\n this._virtualStart = this._virtualStart + idxAdjustment;\n this._physicalStart = this._physicalStart + idxAdjustment;\n // Estimate new physical offset.\n this._physicalTop = Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage;\n this._update();\n } else if (this._physicalCount > 0) {\n var reusables = this._getReusables(isScrollingDown);\n if (isScrollingDown) {\n this._physicalTop = reusables.physicalTop;\n this._virtualStart = this._virtualStart + reusables.indexes.length;\n this._physicalStart = this._physicalStart + reusables.indexes.length;\n } else {\n this._virtualStart = this._virtualStart - reusables.indexes.length;\n this._physicalStart = this._physicalStart - reusables.indexes.length;\n }\n this._update(reusables.indexes, isScrollingDown ? null : reusables.indexes);\n this._debounce('_increasePoolIfNeeded', this._increasePoolIfNeeded.bind(this, 0), MICRO_TASK);\n }\n },\n\n /**\n * Returns an object that contains the indexes of the physical items\n * that might be reused and the physicalTop.\n *\n * @param {boolean} fromTop If the potential reusable items are above the scrolling region.\n */\n _getReusables: function(fromTop) {\n var ith, offsetContent, physicalItemHeight;\n var idxs = [];\n var protectedOffsetContent = this._hiddenContentSize * this._ratio;\n var virtualStart = this._virtualStart;\n var virtualEnd = this._virtualEnd;\n var physicalCount = this._physicalCount;\n var top = this._physicalTop + this._scrollOffset;\n var bottom = this._physicalBottom + this._scrollOffset;\n var scrollTop = this._scrollTop;\n var scrollBottom = this._scrollBottom;\n\n if (fromTop) {\n ith = this._physicalStart;\n offsetContent = scrollTop - top;\n } else {\n ith = this._physicalEnd;\n offsetContent = bottom - scrollBottom;\n }\n // eslint-disable-next-line no-constant-condition\n while (true) {\n physicalItemHeight = this._getPhysicalSizeIncrement(ith);\n offsetContent = offsetContent - physicalItemHeight;\n if (idxs.length >= physicalCount || offsetContent <= protectedOffsetContent) {\n break;\n }\n if (fromTop) {\n // Check that index is within the valid range.\n if (virtualEnd + idxs.length + 1 >= this._virtualCount) {\n break;\n }\n // Check that the index is not visible.\n if (top + physicalItemHeight >= scrollTop - this._scrollOffset) {\n break;\n }\n idxs.push(ith);\n top = top + physicalItemHeight;\n ith = (ith + 1) % physicalCount;\n } else {\n // Check that index is within the valid range.\n if (virtualStart - idxs.length <= 0) {\n break;\n }\n // Check that the index is not visible.\n if (top + this._physicalSize - physicalItemHeight <= scrollBottom) {\n break;\n }\n idxs.push(ith);\n top = top - physicalItemHeight;\n ith = (ith === 0) ? physicalCount - 1 : ith - 1;\n }\n }\n return {indexes: idxs, physicalTop: top - this._scrollOffset};\n },\n\n /**\n * Update the list of items, starting from the `_virtualStart` item.\n * @param {!Array=} itemSet\n * @param {!Array=} movingUp\n */\n _update: function(itemSet, movingUp) {\n if ((itemSet && itemSet.length === 0) || this._physicalCount === 0) {\n return;\n }\n this._manageFocus();\n this._assignModels(itemSet);\n this._updateMetrics(itemSet);\n // Adjust offset after measuring.\n if (movingUp) {\n while (movingUp.length) {\n var idx = movingUp.pop();\n this._physicalTop -= this._getPhysicalSizeIncrement(idx);\n }\n }\n this._positionItems();\n this._updateScrollerSize();\n },\n\n _isClientFull: function() {\n return this._scrollBottom != 0 && this._physicalBottom - 1 >= this._scrollBottom &&\n this._physicalTop <= this._scrollPosition;\n },\n\n /**\n * Increases the pool size.\n */\n _increasePoolIfNeeded: function(count) {\n var nextPhysicalCount = this._clamp(this._physicalCount + count,\n DEFAULT_PHYSICAL_COUNT, this._virtualCount - this._virtualStart);\n nextPhysicalCount = this._convertIndexToCompleteRow(nextPhysicalCount);\n var delta = nextPhysicalCount - this._physicalCount;\n var nextIncrease = Math.round(this._physicalCount * 0.5);\n\n if (delta < 0) {\n return;\n }\n if (delta > 0) {\n var ts = window.performance.now();\n // Concat arrays in place.\n [].push.apply(this._physicalItems, this._createPool(delta));\n // Push 0s into physicalSizes. Can't use Array.fill because IE11 doesn't support it.\n for (var i = 0; i < delta; i++) {\n this._physicalSizes.push(0);\n }\n this._physicalCount = this._physicalCount + delta;\n // Update the physical start if it needs to preserve the model of the focused item.\n // In this situation, the focused item is currently rendered and its model would\n // have changed after increasing the pool if the physical start remained unchanged.\n if (this._physicalStart > this._physicalEnd &&\n this._isIndexRendered(this._focusedVirtualIndex) &&\n this._getPhysicalIndex(this._focusedVirtualIndex) < this._physicalEnd) {\n this._physicalStart = this._physicalStart + delta;\n }\n this._update();\n this._templateCost = (window.performance.now() - ts) / delta;\n nextIncrease = Math.round(this._physicalCount * 0.5);\n }\n // The upper bounds is not fixed when dealing with a grid that doesn't\n // fill it's last row with the exact number of items per row.\n if (this._virtualEnd >= this._virtualCount - 1 || nextIncrease === 0) {\n // Do nothing.\n } else if (!this._isClientFull()) {\n this._debounce(\n '_increasePoolIfNeeded',\n this._increasePoolIfNeeded.bind(\n this,\n nextIncrease\n ), MICRO_TASK);\n } else if (this._physicalSize < this._optPhysicalSize) {\n // Yield and increase the pool during idle time until the physical size is optimal.\n this._debounce(\n '_increasePoolIfNeeded',\n this._increasePoolIfNeeded.bind(\n this,\n this._clamp(Math.round(50 / this._templateCost), 1, nextIncrease)\n ), IDLE_TIME);\n }\n },\n\n /**\n * Renders the a new list.\n */\n _render: function() {\n if (!this.isAttached || !this._isVisible) {\n return;\n }\n if (this._physicalCount !== 0) {\n var reusables = this._getReusables(true);\n this._physicalTop = reusables.physicalTop;\n this._virtualStart = this._virtualStart + reusables.indexes.length;\n this._physicalStart = this._physicalStart + reusables.indexes.length;\n this._update(reusables.indexes);\n this._update();\n this._increasePoolIfNeeded(0);\n } else if (this._virtualCount > 0) {\n // Initial render\n this.updateViewportBoundaries();\n this._increasePoolIfNeeded(DEFAULT_PHYSICAL_COUNT);\n }\n },\n\n /**\n * Called when the items have changed. That is, reassignments\n * to `items`, splices or updates to a single item.\n */\n _itemsChanged: function(change) {\n if (change.path === 'items') {\n this._virtualStart = 0;\n this._physicalTop = 0;\n this._virtualCount = this.items ? this.items.length : 0;\n this._collection = this.items && undefined ?\n undefined.get(this.items) : null;\n this._physicalIndexForKey = {};\n this._firstVisibleIndexVal = null;\n this._lastVisibleIndexVal = null;\n this._physicalCount = this._physicalCount || 0;\n this._physicalItems = this._physicalItems || [];\n this._physicalSizes = this._physicalSizes || [];\n this._physicalStart = 0;\n if (this._scrollTop > this._scrollOffset) {\n this._resetScrollPosition(0);\n }\n this._removeFocusedItem();\n this._debounce('_render', this._render, ANIMATION_FRAME);\n }\n },\n\n /**\n * Executes a provided function per every physical index in `itemSet`\n * `itemSet` default value is equivalent to the entire set of physical indexes.\n *\n * @param {!function(number, number)} fn\n * @param {!Array=} itemSet\n */\n _iterateItems: function(fn, itemSet) {\n var pidx, vidx, rtn, i;\n\n if (arguments.length === 2 && itemSet) {\n for (i = 0; i < itemSet.length; i++) {\n pidx = itemSet[i];\n vidx = this._computeVidx(pidx);\n if ((rtn = fn.call(this, pidx, vidx)) != null) {\n return rtn;\n }\n }\n } else {\n pidx = this._physicalStart;\n vidx = this._virtualStart;\n for (; pidx < this._physicalCount; pidx++, vidx++) {\n if ((rtn = fn.call(this, pidx, vidx)) != null) {\n return rtn;\n }\n }\n for (pidx = 0; pidx < this._physicalStart; pidx++, vidx++) {\n if ((rtn = fn.call(this, pidx, vidx)) != null) {\n return rtn;\n }\n }\n }\n },\n\n /**\n * Returns the virtual index for a given physical index\n *\n * @param {number} pidx Physical index\n * @return {number}\n */\n _computeVidx: function(pidx) {\n if (pidx >= this._physicalStart) {\n return this._virtualStart + (pidx - this._physicalStart);\n }\n return this._virtualStart + (this._physicalCount - this._physicalStart) + pidx;\n },\n\n /**\n * Updates the height for a given set of items.\n *\n * @param {!Array=} itemSet\n */\n _updateMetrics: function(itemSet) {\n // Make sure we distributed all the physical items\n // so we can measure them.\n flush ? flush() : flush$0();\n\n var newPhysicalSize = 0;\n var oldPhysicalSize = 0;\n var prevAvgCount = this._physicalAverageCount;\n var prevPhysicalAvg = this._physicalAverage;\n\n this._iterateItems(function(pidx, vidx) {\n oldPhysicalSize += this._physicalSizes[pidx];\n this._physicalSizes[pidx] = this._physicalItems[pidx].offsetHeight;\n newPhysicalSize += this._physicalSizes[pidx];\n this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;\n }, itemSet);\n\n if (this.grid) {\n this._updateGridMetrics();\n this._physicalSize = Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;\n } else {\n oldPhysicalSize = (this._itemsPerRow === 1) ?\n oldPhysicalSize :\n Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;\n this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;\n this._itemsPerRow = 1;\n }\n // Update the average if it measured something.\n if (this._physicalAverageCount !== prevAvgCount) {\n this._physicalAverage = Math.round(\n ((prevPhysicalAvg * prevAvgCount) + newPhysicalSize) /\n this._physicalAverageCount);\n }\n },\n\n /**\n * Updates the position of the physical items.\n */\n _positionItems: function() {\n this._adjustScrollPosition();\n\n var y = this._physicalTop;\n\n this._iterateItems(function(pidx, vidx) {\n this.translate3d(0, y + 'px', 0, this._physicalItems[pidx]);\n y += this._physicalSizes[pidx];\n });\n },\n\n _getPhysicalSizeIncrement: function(pidx) {\n if (!this.grid) {\n return this._physicalSizes[pidx];\n }\n if (this._computeVidx(pidx) % this._itemsPerRow !== this._itemsPerRow - 1) {\n return 0;\n }\n return this._rowHeight;\n },\n\n /**\n * Adjusts the scroll position when it was overestimated.\n */\n _adjustScrollPosition: function() {\n var deltaHeight = this._virtualStart === 0 ? this._physicalTop : Math.min(this._scrollPosition + this._physicalTop, 0);\n // Note: the delta can be positive or negative.\n if (deltaHeight !== 0) {\n this._physicalTop = this._physicalTop - deltaHeight;\n var scrollTop = this._scrollTop;\n // juking scroll position during interial scrolling on iOS is no bueno\n if (!IOS_TOUCH_SCROLLING && scrollTop > 0) {\n this._resetScrollPosition(scrollTop - deltaHeight);\n }\n }\n },\n\n /**\n * Sets the position of the scroll.\n */\n _resetScrollPosition: function(pos) {\n if (this.scrollTarget && pos >= 0) {\n this._scrollTop = pos;\n this._scrollPosition = this._scrollTop;\n }\n },\n\n /**\n * Sets the scroll height, that's the height of the content,\n *\n * @param {boolean=} forceUpdate If true, updates the height no matter what.\n */\n _updateScrollerSize: function(forceUpdate) {\n if (this.grid) {\n this._estScrollHeight = this._virtualRowCount * this._rowHeight;\n } else {\n this._estScrollHeight = (this._physicalBottom +\n Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage);\n }\n forceUpdate = forceUpdate || this._scrollHeight === 0;\n forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;\n forceUpdate = forceUpdate || this.grid && this.$.items.style.height < this._estScrollHeight;\n // Amortize height adjustment, so it won't trigger large repaints too often.\n if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._viewportHeight) {\n this.$.items.style.height = this._estScrollHeight + 'px';\n this._scrollHeight = this._estScrollHeight;\n }\n },\n\n /**\n * Scroll to a specific index in the virtual list regardless\n * of the physical items in the DOM tree.\n *\n * @method scrollToIndex\n * @param {number} idx The index of the item\n */\n scrollToIndex: function(idx) {\n if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {\n return;\n }\n flush ? flush() : flush$0();\n // Items should have been rendered prior scrolling to an index.\n if (this._physicalCount === 0) {\n return;\n }\n idx = this._clamp(idx, 0, this._virtualCount - 1);\n // Update the virtual start only when needed.\n if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {\n this._virtualStart = this.grid ? (idx - this._itemsPerRow * 2) : (idx - 1);\n }\n this._manageFocus();\n this._assignModels();\n this._updateMetrics();\n // Estimate new physical offset.\n this._physicalTop = Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage;\n\n var currentTopItem = this._physicalStart;\n var currentVirtualItem = this._virtualStart;\n var targetOffsetTop = 0;\n var hiddenContentSize = this._hiddenContentSize;\n // scroll to the item as much as we can.\n while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {\n targetOffsetTop = targetOffsetTop + this._getPhysicalSizeIncrement(currentTopItem);\n currentTopItem = (currentTopItem + 1) % this._physicalCount;\n currentVirtualItem++;\n }\n this._updateScrollerSize(true);\n this._positionItems();\n this._resetScrollPosition(this._physicalTop + this._scrollOffset + targetOffsetTop);\n this._increasePoolIfNeeded(0);\n // clear cached visible index.\n this._firstVisibleIndexVal = null;\n this._lastVisibleIndexVal = null;\n },\n\n /**\n * Reset the physical average and the average count.\n */\n _resetAverage: function() {\n this._physicalAverage = 0;\n this._physicalAverageCount = 0;\n },\n\n /**\n * A handler for the `iron-resize` event triggered by `IronResizableBehavior`\n * when the element is resized.\n */\n _resizeHandler: function() {\n this._debounce('_render', function() {\n // clear cached visible index.\n this._firstVisibleIndexVal = null;\n this._lastVisibleIndexVal = null;\n // Skip the resize event on touch devices when the address bar slides up.\n this.updateViewportBoundaries();\n if (this._isVisible) {\n // Reinstall the scroll event listener.\n this.toggleScrollListener(true);\n this._resetAverage();\n this._render();\n } else {\n // Uninstall the scroll event listener.\n this.toggleScrollListener(false);\n }\n }, ANIMATION_FRAME);\n },\n\n /**\n * Converts a random index to the index of the item that completes it's row.\n * Allows for better order and fill computation when grid == true.\n */\n _convertIndexToCompleteRow: function(idx) {\n // when grid == false _itemPerRow can be unset.\n this._itemsPerRow = this._itemsPerRow || 1;\n return this.grid ? Math.ceil(idx / this._itemsPerRow) * this._itemsPerRow : idx;\n },\n\n _isIndexRendered: function(idx) {\n return idx >= this._virtualStart && idx <= this._virtualEnd;\n },\n\n _getPhysicalIndex: function(vidx) {\n return (this._physicalStart + (vidx - this._virtualStart)) % this._physicalCount;\n },\n\n _clamp: function(v, min, max) {\n return Math.min(max, Math.max(min, v));\n },\n\n _debounce: function(name, cb, asyncModule) {\n this._debouncers = this._debouncers || {};\n this._debouncers[name] = Debouncer.debounce(\n this._debouncers[name],\n asyncModule,\n cb.bind(this));\n enqueueDebouncer(this._debouncers[name]);\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 { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';\n\nimport { animationFrame } from '@polymer/polymer/lib/utils/async.js';\nimport { flush } from '@polymer/polymer/lib/utils/flush.js';\nimport { PolymerIronList } from './iron-list.js';\nimport { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\n/**\n * This Element is used internally by vaadin-grid.\n *\n * @private\n */\nclass GridScrollerElement extends PolymerIronList {\n\n static get is() {\n return 'vaadin-grid-scroller';\n }\n\n static get properties() {\n return {\n size: {\n type: Number,\n notify: true\n },\n _vidxOffset: {\n value: 0\n }\n };\n }\n\n static get observers() {\n return [\n '_effectiveSizeChanged(_effectiveSize)'\n ];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._scrollHandler();\n }\n\n /**\n * @protected\n */\n _updateScrollerItem(item, index) {}\n /**\n * @protected\n */\n _afterScroll() {}\n /**\n * @protected\n */\n _getRowTarget() {}\n /**\n * @protected\n */\n _createScrollerRows() {}\n /**\n * @protected\n */\n _canPopulate() {}\n\n /**\n * @private\n */\n scrollToIndex(index) {\n this._warnPrivateAPIAccess('scrollToIndex');\n\n if (index > 0) {\n this._pendingScrollToIndex = null;\n }\n if (!parseInt(this.$.items.style.borderTopWidth) && index > 0) {\n // Schedule another scroll to be invoked once init is complete\n this._pendingScrollToIndex = index;\n }\n\n this._scrollingToIndex = true;\n index = Math.min(Math.max(index, 0), this._effectiveSize - 1);\n this.$.table.scrollTop = index / this._effectiveSize * (this.$.table.scrollHeight - this.$.table.offsetHeight);\n this._scrollHandler();\n\n if (this._accessIronListAPI(() => this._maxScrollTop) && this._virtualCount < this._effectiveSize) {\n this._adjustVirtualIndexOffset(1000000);\n }\n\n this._accessIronListAPI(() => super.scrollToIndex(index - this._vidxOffset));\n this._scrollHandler();\n\n // Ensure scroll position\n const row = Array.from(this.$.items.children).filter(child => child.index === index)[0];\n if (row) {\n const headerOffset = row.getBoundingClientRect().top - this.$.header.getBoundingClientRect().bottom;\n if (Math.abs(headerOffset) > 1) {\n this.$.table.scrollTop += headerOffset;\n this._scrollHandler();\n }\n }\n\n this._scrollingToIndex = false;\n }\n\n _effectiveSizeChanged(size) {\n let fvi; // first visible (adjusted) index\n let fviOffset = 0;\n this._iterateItems((pidx, vidx) => {\n if (vidx === this._firstVisibleIndex) {\n const row = this._physicalItems[pidx];\n fvi = row.index;\n fviOffset = row.getBoundingClientRect().top;\n }\n });\n\n if (this.items && size < this.items.length) {\n // Size was reduced, scroll to 0 first\n this._scrollTop = 0;\n }\n if (!Array.isArray(this.items)) {\n // Edge/IE seems to have the lowest maximum\n const maxVirtualItems = this._edge || this._ie ? 30000 : 100000;\n this.items = {length: Math.min(size, maxVirtualItems)};\n }\n\n this._accessIronListAPI(() => super._itemsChanged({path: 'items'}));\n\n this._virtualCount = Math.min(this.items.length, size) || 0;\n\n if (this._scrollTop === 0) {\n this._accessIronListAPI(() => this._scrollToIndex(Math.min(size - 1, fvi)));\n this._iterateItems((pidx, vidx) => {\n const row = this._physicalItems[pidx];\n if (row.index === fvi) {\n this.$.table.scrollTop += Math.round(row.getBoundingClientRect().top - fviOffset);\n }\n // Restore keyboard focus to the right cell\n if (row.index === this._focusedItemIndex && this._itemsFocusable && this.$.items.contains(this.shadowRoot.activeElement)) {\n const cellIndex = Array.from(this._itemsFocusable.parentElement.children).indexOf(this._itemsFocusable);\n row.children[cellIndex].focus();\n }\n });\n }\n this._assignModels();\n requestAnimationFrame(() => this._update());\n }\n\n _positionItems() {\n this._adjustScrollPosition();\n\n let rePosition;\n if (isNaN(this._physicalTop)) {\n rePosition = true;\n this._physicalTop = 0;\n }\n\n let y = this._physicalTop;\n this._iterateItems((pidx, vidx) => {\n this._physicalItems[pidx].style.transform = `translateY(${y}px)`;\n y += this._physicalSizes[pidx];\n });\n\n if (rePosition) {\n this._scrollToIndex(0);\n }\n }\n\n _increasePoolIfNeeded(count) {\n if ((count === 0 && this._scrollingToIndex) || !this._canPopulate() || !this._effectiveSize) {\n return;\n }\n\n if (!this._initialPoolCreated) {\n this._initialPoolCreated = true;\n super._increasePoolIfNeeded(25);\n } else if (this._optPhysicalSize !== Infinity) {\n this._debounceIncreasePool = Debouncer.debounce(\n this._debounceIncreasePool,\n animationFrame,\n () => {\n this._updateMetrics();\n const remainingPhysicalSize = this._optPhysicalSize - this._physicalSize;\n let estimatedMissingRowCount = Math.ceil(remainingPhysicalSize / this._physicalAverage);\n\n if (this._physicalCount + estimatedMissingRowCount > this._effectiveSize) {\n // Do not increase the physical item count above the this._effectiveSize\n estimatedMissingRowCount = Math.max(0, this._effectiveSize - this._physicalCount);\n }\n\n if (this._physicalSize && estimatedMissingRowCount > 0) {\n super._increasePoolIfNeeded(estimatedMissingRowCount);\n // Ensure the rows are in order after increasing pool\n this.__reorderChildNodes();\n }\n });\n }\n }\n\n __reorderChildNodes() {\n const childNodes = Array.from(this.$.items.childNodes);\n const rowsInOrder = !!childNodes.reduce((inOrder, current, currentIndex, array) => {\n if (currentIndex === 0 || array[currentIndex - 1].index === current.index - 1) {\n return inOrder;\n }\n }, true);\n\n if (!rowsInOrder) {\n childNodes.sort((row1, row2) => {\n return row1.index - row2.index;\n }).forEach(row => this.$.items.appendChild(row));\n }\n }\n\n _createPool(size) {\n const fragment = document.createDocumentFragment();\n const physicalItems = this._createScrollerRows(size);\n\n physicalItems.forEach(inst => fragment.appendChild(inst));\n this._getRowTarget().appendChild(fragment);\n\n // Weird hack needed to get Safari to actually distribute slots\n const content = this.querySelector('[slot]');\n if (content) {\n const slot = content.getAttribute('slot');\n content.setAttribute('slot', 'foo-bar');\n content.setAttribute('slot', slot);\n }\n\n this._updateHeaderFooterMetrics();\n\n afterNextRender(this, () => this.notifyResize());\n return physicalItems;\n }\n\n /**\n * Assigns the data models to a given set of items.\n * @param {!Array=} itemSet\n */\n _assignModels(itemSet) {\n this._iterateItems((pidx, vidx) => {\n const el = this._physicalItems[pidx];\n this._toggleAttribute('hidden', vidx >= this._effectiveSize, el);\n this._updateScrollerItem(el, vidx + (this._vidxOffset || 0));\n }, itemSet);\n }\n\n _scrollHandler() {\n const delta = this.$.table.scrollTop - this._scrollPosition;\n this._accessIronListAPI(super._scrollHandler);\n const oldOffset = this._vidxOffset;\n if (this._accessIronListAPI(() => this._maxScrollTop) && this._virtualCount < this._effectiveSize) {\n this._adjustVirtualIndexOffset(delta);\n }\n if (this._vidxOffset !== oldOffset) {\n this._update();\n }\n this._afterScroll();\n }\n\n _adjustVirtualIndexOffset(delta) {\n if (Math.abs(delta) > 10000) {\n if (this._noScale) {\n this._noScale = false;\n return;\n }\n const scale = this.$.table.scrollTop / (this.$.table.scrollHeight - this.$.table.offsetHeight);\n const offset = scale * this._effectiveSize;\n this._vidxOffset = Math.round(offset - scale * this._virtualCount);\n } else {\n // Make sure user can always swipe/wheel scroll to the start and end\n const oldOffset = this._vidxOffset || 0;\n const threshold = 1000;\n const maxShift = 100;\n // At start\n if (this._scrollTop === 0) {\n this._vidxOffset = 0;\n if (oldOffset !== this._vidxOffset) {\n super.scrollToIndex(0);\n }\n } else if (this.firstVisibleIndex < threshold && this._vidxOffset > 0) {\n this._vidxOffset -= Math.min(this._vidxOffset, maxShift);\n if (oldOffset !== this._vidxOffset) {\n super.scrollToIndex(this.firstVisibleIndex + (oldOffset - this._vidxOffset));\n }\n this._noScale = true;\n }\n // At end\n const maxOffset = this._effectiveSize - this._virtualCount;\n if (this._scrollTop >= this._maxScrollTop && this._maxScrollTop > 0) {\n this._vidxOffset = maxOffset;\n if (oldOffset !== this._vidxOffset) {\n super.scrollToIndex(this._virtualCount);\n }\n } else if (this.firstVisibleIndex > this._virtualCount - threshold && this._vidxOffset < maxOffset) {\n this._vidxOffset += Math.min(maxOffset - this._vidxOffset, maxShift);\n if (oldOffset !== this._vidxOffset) {\n super.scrollToIndex(this.firstVisibleIndex - (this._vidxOffset - oldOffset));\n }\n this._noScale = true;\n }\n }\n }\n\n _accessIronListAPI(cb) {\n this._warnPrivateAPIAccessAsyncEnabled = false;\n const returnValue = cb.apply(this);\n this._debouncerWarnPrivateAPIAccess = Debouncer.debounce(\n this._debouncerWarnPrivateAPIAccess,\n animationFrame,\n () => this._warnPrivateAPIAccessAsyncEnabled = true\n );\n return returnValue;\n }\n\n /* Allow iron-list to access its APIs from debounced callbacks without warns */\n _debounceRender(cb, asyncModule) {\n super._debounceRender(() => this._accessIronListAPI(cb), asyncModule);\n }\n\n /* Warn when iron-list APIs are being accessed directly */\n _warnPrivateAPIAccess(apiName) {\n if (this._warnPrivateAPIAccessAsyncEnabled) {\n console.warn(`Accessing private API (${apiName})!`);\n }\n }\n\n _render() {\n this._accessIronListAPI(super._render);\n }\n\n _createFocusBackfillItem() { /* Ignore */ }\n _multiSelectionChanged() { /* Ignore */ }\n clearSelection() { /* Ignore */ }\n _itemsChanged() { /* Ignore */ }\n _manageFocus() { /* Ignore */ }\n _removeFocusedItem() { /* Ignore */ }\n\n get _firstVisibleIndex() {\n return this._accessIronListAPI(() => super.firstVisibleIndex);\n }\n get _lastVisibleIndex() {\n return this._accessIronListAPI(() => super.lastVisibleIndex);\n }\n _scrollToIndex(index) {\n this._accessIronListAPI(() => this.scrollToIndex(index));\n }\n get firstVisibleIndex() {\n this._warnPrivateAPIAccess('firstVisibleIndex'); return super.firstVisibleIndex;\n }\n set firstVisibleIndex(value) {\n this._warnPrivateAPIAccess('firstVisibleIndex'); super.firstVisibleIndex = value;\n }\n get lastVisibleIndex() {\n this._warnPrivateAPIAccess('lastVisibleIndex'); return super.lastVisibleIndex;\n }\n set lastVisibleIndex(value) {\n this._warnPrivateAPIAccess('lastVisibleIndex'); super.lastVisibleIndex = value;\n }\n updateViewportBoundaries() {\n this._warnPrivateAPIAccess('updateViewportBoundaries'); super.updateViewportBoundaries.apply(this, arguments);\n }\n _resizeHandler() {\n super._resizeHandler();\n flush();\n }\n}\n\ncustomElements.define(GridScrollerElement.is, GridScrollerElement);\n\nexport { GridScrollerElement as ScrollerElement };\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/**\n * @polymerMixin\n */\nexport const A11yMixin = superClass => class A11yMixin extends superClass {\n static get observers() {\n return [\n '_a11yUpdateGridSize(size, _columnTree, _columnTree.*)'\n ];\n }\n\n _a11yGetHeaderRowCount(_columnTree) {\n return _columnTree.filter(level => level.some(col => col._headerTemplate || col.headerRenderer || col.path || col.header)).length;\n }\n\n _a11yGetFooterRowCount(_columnTree) {\n return _columnTree.filter(level => level.some(col => col._headerTemplate || col.headerRenderer)).length;\n }\n\n _a11yUpdateGridSize(size, _columnTree) {\n if (size === undefined || _columnTree === undefined) {\n return;\n }\n\n const bodyColumns = _columnTree[_columnTree.length - 1];\n this.$.table.setAttribute(\n 'aria-rowcount',\n size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree)\n );\n this.$.table.setAttribute('aria-colcount', bodyColumns && bodyColumns.length || 0);\n\n this._a11yUpdateHeaderRows();\n this._a11yUpdateFooterRows();\n }\n\n _a11yUpdateHeaderRows() {\n Array.from(this.$.header.children).forEach((headerRow, index) =>\n headerRow.setAttribute('aria-rowindex', index + 1)\n );\n }\n\n _a11yUpdateFooterRows() {\n Array.from(this.$.footer.children).forEach((footerRow, index) =>\n footerRow.setAttribute(\n 'aria-rowindex',\n this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1\n )\n );\n }\n\n _a11yUpdateRowRowindex(row, index) {\n row.setAttribute('aria-rowindex', index + this._a11yGetHeaderRowCount(this._columnTree) + 1);\n }\n\n _a11yUpdateRowSelected(row, selected) {\n // Jaws reads selection only for rows, NVDA only for cells\n row.setAttribute('aria-selected', Boolean(selected));\n Array.from(row.children).forEach(cell =>\n cell.setAttribute('aria-selected', Boolean(selected))\n );\n }\n\n _a11yUpdateRowLevel(row, level) {\n row.setAttribute('aria-level', level + 1);\n }\n\n _a11yUpdateRowDetailsOpened(row, detailsOpened) {\n Array.from(row.children).forEach(cell => {\n if (typeof detailsOpened === 'boolean') {\n cell.setAttribute('aria-expanded', detailsOpened);\n } else {\n if (cell.hasAttribute('aria-expanded')) {\n cell.removeAttribute('aria-expanded');\n }\n }\n });\n }\n\n _a11ySetRowDetailsCell(row, detailsCell) {\n Array.from(row.children).forEach(cell => {\n if (cell !== detailsCell) {\n cell.setAttribute('aria-controls', detailsCell.id);\n }\n });\n }\n\n _a11yUpdateCellColspan(cell, colspan) {\n cell.setAttribute('aria-colspan', Number(colspan));\n }\n\n _a11yUpdateSorters() {\n Array.from(this.querySelectorAll('vaadin-grid-sorter')).forEach(sorter => {\n let cellContent = sorter.parentNode;\n while (cellContent && cellContent.localName !== 'vaadin-grid-cell-content') {\n cellContent = cellContent.parentNode;\n }\n if (cellContent && cellContent.assignedSlot) {\n const cell = cellContent.assignedSlot.parentNode;\n cell.setAttribute('aria-sort', {\n 'asc': 'ascending',\n 'desc': 'descending'\n }[String(sorter.direction)] || 'none');\n }\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/**\n * @polymerMixin\n */\nexport const ActiveItemMixin = superClass => class ActiveItemMixin extends superClass {\n\n static get properties() {\n return {\n /**\n * The item user has last interacted with. Turns to `null` after user deactivates\n * the item by re-interacting with the currently active item.\n */\n activeItem: {\n type: Object,\n notify: true,\n value: null\n }\n };\n }\n\n ready() {\n super.ready();\n\n this.$.scroller.addEventListener('click', this._onClick.bind(this));\n this.addEventListener('cell-activate', this._activateItem.bind(this));\n }\n\n _activateItem(e) {\n const model = e.detail.model;\n const clickedItem = model ? model.item : null;\n\n if (clickedItem) {\n this.activeItem = !this._itemsEqual(this.activeItem, clickedItem) ? clickedItem : null;\n }\n }\n\n // we need to listen to click instead of tap because on mobile safari, the\n // document.activeElement has not been updated (focus has not been shifted)\n // yet at the point when tap event is being executed.\n _onClick(e) {\n if (e.defaultPrevented) {\n // Something has handled this click already, e. g., \n return;\n }\n\n const path = e.composedPath();\n const cell = path[path.indexOf(this.$.table) - 3];\n if (!cell || cell.getAttribute('part').indexOf('details-cell') > -1) {\n return;\n }\n const cellContent = cell._content;\n\n const activeElement = this.getRootNode().activeElement;\n const cellContentHasFocus = cellContent.contains(activeElement) &&\n // MSIE bug: flex children receive focus. Make type & attributes check.\n (!this._ie || this._isFocusable(activeElement));\n if (!cellContentHasFocus && !this._isFocusable(e.target)) {\n this.dispatchEvent(new CustomEvent('cell-activate', {detail: {\n model: this.__getRowModel(cell.parentElement)\n }}));\n }\n }\n\n _isFocusable(target) {\n if (!target.parentNode) {\n return false;\n }\n const focusables = Array.from(target.parentNode\n .querySelectorAll('[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]'))\n .filter(element => element.getAttribute('part') !== 'cell body-cell');\n\n const isFocusableElement = focusables.indexOf(target) !== -1;\n return !target.disabled && isFocusableElement;\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 { Base } from '@polymer/polymer/polymer-legacy.js';\n\n/**\n * @polymerMixin\n */\nexport const ArrayDataProviderMixin = superClass => class ArrayDataProviderMixin extends superClass {\n\n static get properties() {\n\n return {\n /**\n * An array containing the items which will be stamped to the column template\n * instances.\n */\n items: Array\n\n };\n }\n\n static get observers() {\n return [\n '_itemsChanged(items, items.*, isAttached)'\n ];\n }\n\n _itemsChanged(items, splices, isAttached) {\n if (!isAttached) {\n return;\n }\n if (!Array.isArray(items)) {\n if (items === undefined || items === null) {\n this.size = 0;\n }\n if (this.dataProvider === this._arrayDataProvider) {\n this.dataProvider = undefined;\n }\n return;\n }\n\n this.size = items.length;\n this.dataProvider = this.dataProvider || this._arrayDataProvider;\n this.clearCache();\n this._ensureFirstPageLoaded();\n }\n\n _arrayDataProvider(opts, cb) {\n let items = (Array.isArray(this.items) ? this.items : []).slice(0);\n\n if (this._filters && this._checkPaths(this._filters, 'filtering', items)) {\n items = this._filter(items);\n }\n\n this.size = items.length;\n\n if (opts.sortOrders.length && this._checkPaths(this._sorters, 'sorting', items)) {\n items = items.sort(this._multiSort.bind(this));\n }\n\n const start = opts.page * opts.pageSize;\n const end = start + opts.pageSize;\n const slice = items.slice(start, end);\n cb(slice, items.length);\n }\n\n /**\n * Check array of filters/sorters for paths validity, console.warn invalid items\n * @param {Array} arrayToCheck The array of filters/sorters to check\n * @param {string} action The name of action to include in warning (filtering, sorting)\n * @param {Array} items\n */\n _checkPaths(arrayToCheck, action, items) {\n if (!items.length) {\n return false;\n }\n\n let result = true;\n\n for (var i in arrayToCheck) {\n const path = arrayToCheck[i].path;\n\n // skip simple paths\n if (!path || path.indexOf('.') === -1) {\n continue;\n }\n\n const parentProperty = path.replace(/\\.[^\\.]*$/, ''); // a.b.c -> a.b\n if (Base.get(parentProperty, items[0]) === undefined) {\n console.warn(`Path \"${path}\" used for ${action} does not exist in all of the items, ${action} is disabled.`);\n result = false;\n }\n }\n\n return result;\n }\n\n _multiSort(a, b) {\n return this._sorters.map(sort => {\n if (sort.direction === 'asc') {\n return this._compare(Base.get(sort.path, a), Base.get(sort.path, b));\n } else if (sort.direction === 'desc') {\n return this._compare(Base.get(sort.path, b), Base.get(sort.path, a));\n }\n return 0;\n }).reduce((p, n) => {\n return p ? p : n;\n }, 0);\n }\n\n _normalizeEmptyValue(value) {\n if ([undefined, null].indexOf(value) >= 0) {\n return '';\n } else if (isNaN(value)) {\n return value.toString();\n } else {\n return value;\n }\n }\n\n _compare(a, b) {\n a = this._normalizeEmptyValue(a);\n b = this._normalizeEmptyValue(b);\n\n if (a < b) {\n return -1;\n }\n if (a > b) {\n return 1;\n }\n return 0;\n }\n\n _filter(items) {\n return items.filter((item, index) => {\n return this._filters.filter(filter => {\n const value = this._normalizeEmptyValue(Base.get(filter.path, item));\n const filterValueLowercase = this._normalizeEmptyValue(filter.value).toString().toLowerCase();\n return value.toString().toLowerCase().indexOf(filterValueLowercase) === -1;\n }).length === 0;\n });\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 { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';\n\nimport { addListener } from '@polymer/polymer/lib/utils/gestures.js';\n\n/**\n * @polymerMixin\n */\nexport const ColumnResizingMixin = superClass => class ColumnResizingMixin extends GestureEventListeners(superClass) {\n\n ready() {\n super.ready();\n const scroller = this.$.scroller;\n addListener(scroller, 'track', this._onHeaderTrack.bind(this));\n\n // Disallow scrolling while resizing\n scroller.addEventListener('touchmove', e => scroller.hasAttribute('column-resizing') && e.preventDefault());\n\n // Disable contextmenu on any resize separator.\n scroller.addEventListener('contextmenu', e => e.target.getAttribute('part') == 'resize-handle' && e.preventDefault());\n\n // Disable native cell focus when resizing\n scroller.addEventListener('mousedown', e => e.target.getAttribute('part') === 'resize-handle' && e.preventDefault());\n }\n\n _onHeaderTrack(e) {\n const handle = e.target;\n if (handle.getAttribute('part') === 'resize-handle') {\n const cell = handle.parentElement;\n let column = cell._column;\n\n this._toggleAttribute('column-resizing', true, this.$.scroller);\n\n // Get the target column to resize\n while (column.localName === 'vaadin-grid-column-group') {\n column = Array.prototype.slice.call(column._childColumns, 0)\n .sort(function(a, b) {\n return a._order - b._order;\n })\n .filter(function(column) {\n return !column.hidden;\n }).pop();\n }\n\n const columnRowCells = Array.from(this.$.header.querySelectorAll('[part~=\"row\"]:last-child [part~=\"cell\"]'));\n var targetCell = columnRowCells.filter(cell => cell._column === column)[0];\n // Resize the target column\n if (targetCell.offsetWidth) {\n var style = window.getComputedStyle(targetCell);\n var minWidth = 10 + parseInt(style.paddingLeft) + parseInt(style.paddingRight) + parseInt(style.borderLeftWidth)\n + parseInt(style.borderRightWidth) + parseInt(style.marginLeft) + parseInt(style.marginRight);\n column.width = Math.max(minWidth, targetCell.offsetWidth + e.detail.x - targetCell.getBoundingClientRect().right) + 'px';\n column.flexGrow = 0;\n }\n // Fix width and flex-grow for all preceding columns\n columnRowCells\n .sort(\n function(a, b) {\n return a._column._order - b._column._order;\n })\n .forEach(function(cell, index, array) {\n if (index < array.indexOf(targetCell)) {\n cell._column.width = cell.offsetWidth + 'px';\n cell._column.flexGrow = 0;\n }\n });\n\n if (e.detail.state === 'end') {\n this._toggleAttribute('column-resizing', false, this.$.scroller);\n }\n\n // Notify resize\n this._resizeHandler();\n }\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 { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\n\nimport { timeOut } from '@polymer/polymer/lib/utils/async.js';\n\nexport const ItemCache = class ItemCache {\n\n constructor(grid, parentCache, parentItem) {\n this.grid = grid;\n this.parentCache = parentCache;\n this.parentItem = parentItem;\n this.itemCaches = {};\n this.items = {};\n this.effectiveSize = 0;\n this.size = 0;\n this.pendingRequests = {};\n }\n\n isLoading() {\n return Object.keys(this.pendingRequests).length || Object.keys(this.itemCaches).filter(index => {\n return this.itemCaches[index].isLoading();\n })[0];\n }\n\n getItemForIndex(index) {\n const {cache, scaledIndex} = this.getCacheAndIndex(index);\n return cache.items[scaledIndex];\n }\n\n updateSize() {\n this.effectiveSize = (!this.parentItem || this.grid._isExpanded(this.parentItem)) ?\n this.size + Object.keys(this.itemCaches).reduce((prev, curr) => {\n const subCache = this.itemCaches[curr];\n subCache.updateSize();\n return prev + subCache.effectiveSize;\n }, 0) :\n 0;\n }\n\n ensureSubCacheForScaledIndex(scaledIndex) {\n if (!this.itemCaches[scaledIndex]) {\n const subCache = new ItemCache(this.grid, this, this.items[scaledIndex]);\n this.itemCaches[scaledIndex] = subCache;\n this.grid._loadPage(0, subCache);\n }\n }\n\n getCacheAndIndex(index) {\n let thisLevelIndex = index;\n const keys = Object.keys(this.itemCaches);\n for (var i = 0; i < keys.length; i++) {\n const expandedIndex = Number(keys[i]);\n const subCache = this.itemCaches[expandedIndex];\n if (thisLevelIndex <= expandedIndex) {\n return {cache: this, scaledIndex: thisLevelIndex};\n } else if (thisLevelIndex <= expandedIndex + subCache.effectiveSize) {\n return subCache.getCacheAndIndex(thisLevelIndex - expandedIndex - 1);\n }\n thisLevelIndex -= subCache.effectiveSize;\n }\n return {cache: this, scaledIndex: thisLevelIndex};\n }\n\n};\n\n/**\n * @polymerMixin\n */\nexport const DataProviderMixin = superClass => class DataProviderMixin extends superClass {\n\n static get properties() {\n return {\n\n /**\n * Number of items fetched at a time from the dataprovider.\n */\n pageSize: {\n type: Number,\n value: 50,\n observer: '_pageSizeChanged'\n },\n\n /**\n * Function that provides items lazily. Receives arguments `params`, `callback`\n *\n * `params.page` Requested page index\n *\n * `params.pageSize` Current page size\n *\n * `params.filters` Currently applied filters\n *\n * `params.sortOrders` Currently applied sorting orders\n *\n * `params.parentItem` When tree is used, and sublevel items\n * are requested, reference to parent item of the requested sublevel.\n * Otherwise `undefined`.\n *\n * `callback(items, size)` Callback function with arguments:\n * - `items` Current page of items\n * - `size` Total number of items. When tree sublevel items\n * are requested, total number of items in the requested sublevel.\n * Optional when tree is not used, required for tree.\n */\n dataProvider: {\n type: Object,\n notify: true,\n observer: '_dataProviderChanged'\n },\n\n /**\n * `true` while data is being requested from the data provider.\n */\n loading: {\n type: Boolean,\n notify: true,\n readOnly: true,\n reflectToAttribute: true\n },\n\n _cache: {\n type: Object,\n value: function() {\n const cache = new ItemCache(this);\n return cache;\n }\n },\n\n /**\n * Path to an item sub-property that identifies the item.\n */\n itemIdPath: {\n type: String,\n value: null\n },\n\n /**\n * An array that contains the expanded items.\n */\n expandedItems: {\n type: Object,\n notify: true,\n value: () => []\n }\n\n };\n }\n\n static get observers() {\n return [\n '_sizeChanged(size)',\n '_expandedItemsChanged(expandedItems.*)'\n ];\n }\n\n _sizeChanged(size) {\n const delta = size - this._cache.size;\n this._cache.size += delta;\n this._cache.effectiveSize += delta;\n this._effectiveSize = this._cache.effectiveSize;\n }\n\n _updateRowItem(item, el) {\n el.children.forEach(cell => {\n cell._instance && (cell._instance.item = item);\n });\n }\n\n _getItem(index, el) {\n if (index >= this._effectiveSize) {\n return;\n }\n\n el.index = index;\n const {cache, scaledIndex} = this._cache.getCacheAndIndex(index);\n const item = cache.items[scaledIndex];\n if (item) {\n this._toggleAttribute('loading', false, el);\n this._updateItem(el, item);\n if (this._isExpanded(item)) {\n cache.ensureSubCacheForScaledIndex(scaledIndex);\n }\n } else {\n this._toggleAttribute('loading', true, el);\n this._loadPage(this._getPageForIndex(scaledIndex), cache);\n }\n\n }\n\n _pagesForPhysicalItems() {\n // TODO: potentially heavy operation to run first visible index,\n // reconsider if performance issues occur on data binding / scrolling.\n // TODO: _vidxOffset shouldn't be read from here.\n const firstVisiblePage = this._getPageForIndex(this._firstVisibleIndex + this._vidxOffset);\n\n return [firstVisiblePage].concat(\n this._physicalItems\n .filter(row => row.index)\n .items(row => this._getPageForIndex(row.index))\n ).reduce((prev, curr) => {\n if (prev.indexOf(curr) === -1) {\n prev.push(curr);\n }\n\n return prev;\n }, []);\n }\n\n _expandedInstanceChangedCallback(inst, value) {\n if (inst.item === undefined) {\n return;\n }\n if (value) {\n this.expandItem(inst.item);\n } else {\n this.collapseItem(inst.item);\n }\n }\n\n /**\n * Returns a value that identifies the item. Uses `itemIdPath` if available.\n * Can be customized by overriding.\n */\n getItemId(item) {\n return this.itemIdPath ? this.get(this.itemIdPath, item) : item;\n }\n\n _isExpanded(item) {\n return this.expandedItems && this._getItemIndexInArray(item, this.expandedItems) > -1;\n }\n\n _expandedItemsChanged(e) {\n this._cache.updateSize();\n this._effectiveSize = this._cache.effectiveSize;\n this._assignModels();\n }\n\n /**\n * Expands the given item tree.\n */\n expandItem(item) {\n if (!this._isExpanded(item)) {\n this.push('expandedItems', item);\n }\n }\n\n /**\n * Collapses the given item tree.\n */\n collapseItem(item) {\n if (this._isExpanded(item)) {\n this.splice('expandedItems', this._getItemIndexInArray(item, this.expandedItems), 1);\n }\n }\n\n _getIndexLevel(index) {\n let {cache} = this._cache.getCacheAndIndex(index);\n let level = 0;\n while (cache.parentCache) {\n cache = cache.parentCache;\n level++;\n }\n return level;\n }\n\n _canPopulate() {\n return this._hasData && this._columnTree;\n }\n\n _loadPage(page, cache) {\n // make sure same page isn't requested multiple times.\n if (!cache.pendingRequests[page] && this.dataProvider) {\n this._setLoading(true);\n cache.pendingRequests[page] = true;\n const params = {\n page,\n pageSize: this.pageSize,\n sortOrders: this._mapSorters(),\n filters: this._mapFilters(),\n parentItem: cache.parentItem\n };\n\n this.dataProvider(params, (items, size) => {\n if (size !== undefined) {\n cache.size = size;\n } else {\n if (params.parentItem) {\n cache.size = items.length;\n }\n }\n\n // Populate the cache with new items\n items.forEach((item, itemsIndex) => {\n const itemIndex = page * this.pageSize + itemsIndex;\n cache.items[itemIndex] = item;\n if (this._isExpanded(item)) {\n // Force synchronous data request for expanded item sub-cache\n cache.ensureSubCacheForScaledIndex(itemIndex);\n }\n });\n\n this._hasData = true;\n\n delete cache.pendingRequests[page];\n\n if (!this._cache.isLoading()) {\n // All active requests have finished, update the effective size and rows\n this._setLoading(false);\n this._cache.updateSize();\n this._effectiveSize = this._cache.effectiveSize;\n\n Array.from(this.$.items.children)\n .filter(row => !row.hidden)\n .forEach(row => {\n const cachedItem = this._cache.getItemForIndex(row.index);\n if (cachedItem) {\n this._toggleAttribute('loading', false, row);\n this._updateItem(row, cachedItem);\n }\n });\n\n this._increasePoolIfNeeded(0);\n }\n\n this.__setInitialColumnWidths();\n });\n }\n }\n\n _getPageForIndex(index) {\n return Math.floor(index / this.pageSize);\n }\n\n /**\n * Clears the cached pages and reloads data from dataprovider when needed.\n */\n clearCache() {\n this._cache = new ItemCache(this);\n Array.from(this.$.items.children).forEach(row => {\n Array.from(row.children).forEach(cell => {\n // Force data system to pick up subproperty changes\n cell._instance && cell._instance._setPendingProperty('item', {}, false);\n });\n });\n this._cache.size = this.size || 0;\n this._cache.updateSize();\n this._hasData = false;\n this._assignModels();\n\n if (!this._effectiveSize) {\n this._loadPage(0, this._cache);\n }\n }\n\n _flushItemsDebouncer() {\n if (this._debouncerLoad) {\n this._debouncerLoad.flush();\n }\n }\n\n _pageSizeChanged(pageSize, oldPageSize) {\n if (oldPageSize !== undefined && pageSize !== oldPageSize) {\n this.clearCache();\n }\n }\n\n _checkSize() {\n if (this.size === undefined && this._effectiveSize === 0) {\n console.warn(\n 'The needs the total number of items' +\n ' in order to display rows. Set the total number of items' +\n ' to the `size` property, or provide the total number of items' +\n ' in the second argument of the `dataProvider`’s `callback` call.'\n );\n }\n }\n\n _dataProviderChanged(dataProvider, oldDataProvider) {\n if (oldDataProvider !== undefined) {\n this.clearCache();\n }\n\n if (dataProvider && this.items && this.items.length) {\n // Fixes possibly invalid cached lastVisibleIndex value in \n this._scrollToIndex(this._firstVisibleIndex);\n }\n\n this._ensureFirstPageLoaded();\n\n this._debouncerCheckSize = Debouncer.debounce(\n this._debouncerCheckSize,\n timeOut.after(2000),\n this._checkSize.bind(this));\n\n this._scrollHandler();\n }\n\n _ensureFirstPageLoaded() {\n if (!this._hasData) {\n // load data before adding rows to make sure they have content when\n // rendered for the first time.\n this._loadPage(0, this._cache, () => {\n const hadData = this._hasData;\n this._hasData = true;\n if (!hadData) {\n this.notifyResize();\n }\n });\n }\n }\n\n _itemsEqual(item1, item2) {\n return this.getItemId(item1) === this.getItemId(item2);\n }\n\n _getItemIndexInArray(item, array) {\n let result = -1;\n array.forEach((i, idx) => {\n if (this._itemsEqual(i, item)) {\n result = idx;\n }\n });\n return result;\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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';\n\nimport { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\nimport { timeOut } from '@polymer/polymer/lib/utils/async.js';\nimport { PolymerElement } from '@polymer/polymer/polymer-element.js';\n\n/**\n * @polymerMixin\n */\nexport const DynamicColumnsMixin = superClass => class DynamicColumnsMixin extends superClass {\n\n ready() {\n super.ready();\n this._addNodeObserver();\n }\n\n _hasColumnGroups(columns) {\n for (let i = 0; i < columns.length; i++) {\n if (columns[i].localName === 'vaadin-grid-column-group') {\n return true;\n }\n }\n\n return false;\n }\n\n _getChildColumns(el) {\n return FlattenedNodesObserver.getFlattenedNodes(el).filter(this._isColumnElement);\n }\n\n _flattenColumnGroups(columns) {\n return columns.map(col => {\n if (col.localName === 'vaadin-grid-column-group') {\n return this._getChildColumns(col);\n } else {\n return [col];\n }\n }).reduce((prev, curr) => {\n return prev.concat(curr);\n }, []);\n }\n\n _getColumnTree() {\n var rootColumns = FlattenedNodesObserver.getFlattenedNodes(this).filter(this._isColumnElement);\n var _columnTree = [];\n\n for (var c = rootColumns; ;) {\n _columnTree.push(c);\n if (!this._hasColumnGroups(c)) {\n break;\n }\n c = this._flattenColumnGroups(c);\n }\n\n return _columnTree;\n }\n\n _updateColumnTree() {\n var columnTree = this._getColumnTree();\n if (!this._arrayEquals(columnTree, this._columnTree)) {\n this._columnTree = columnTree;\n }\n }\n\n _addNodeObserver() {\n this._observer = new FlattenedNodesObserver(this, info => {\n\n const rowDetailsTemplate = info.addedNodes.filter(n => n.localName === 'template' && n.classList.contains('row-details'))[0];\n if (rowDetailsTemplate && this._rowDetailsTemplate !== rowDetailsTemplate) {\n this._rowDetailsTemplate = rowDetailsTemplate;\n }\n\n if (info.addedNodes.filter(this._isColumnElement).length > 0 ||\n info.removedNodes.filter(this._isColumnElement).length > 0) {\n this._updateColumnTree();\n }\n\n this._debouncerCheckImports = Debouncer.debounce(\n this._debouncerCheckImports,\n timeOut.after(2000),\n this._checkImports.bind(this));\n\n this._ensureFirstPageLoaded();\n });\n }\n\n _arrayEquals(arr1, arr2) {\n if (!arr1 || !arr2 || arr1.length != arr2.length) {\n return false;\n }\n\n for (var i = 0, l = arr1.length; i < l; i++) {\n // Check if we have nested arrays\n if (arr1[i] instanceof Array && arr2[i] instanceof Array) {\n // recurse into the nested arrays\n if (!this._arrayEquals(arr1[i], arr2[i])) {\n return false;\n }\n } else if (arr1[i] != arr2[i]) {\n return false;\n }\n }\n return true;\n }\n\n _checkImports() {\n [\n 'vaadin-grid-column-group',\n 'vaadin-grid-filter',\n 'vaadin-grid-filter-column',\n 'vaadin-grid-tree-toggle',\n 'vaadin-grid-selection-column',\n 'vaadin-grid-sort-column',\n 'vaadin-grid-sorter'\n ].forEach(elementName => {\n var element = this.querySelector(elementName);\n if (element && !(element instanceof PolymerElement)) {\n console.warn(`Make sure you have imported the required module for <${elementName}> element.`);\n }\n });\n }\n\n _updateFirstAndLastColumn() {\n Array.from(this.shadowRoot.querySelectorAll('tr')).forEach(row => this._updateFirstAndLastColumnForRow(row));\n }\n\n _updateFirstAndLastColumnForRow(row) {\n Array.from(row.querySelectorAll('[part~=\"cell\"]:not([part~=\"details-cell\"])'))\n .sort((a, b) => {\n return a._column._order - b._column._order;\n }).forEach((cell, cellIndex, children) => {\n this._toggleAttribute('first-column', cellIndex === 0, cell);\n this._toggleAttribute('last-column', cellIndex === children.length - 1, cell);\n });\n }\n\n _isColumnElement(node) {\n return node.nodeType === Node.ELEMENT_NODE && /\\bcolumn\\b/.test(node.localName);\n }\n};\n","/**\n@license\nCopyright (c) 2018 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\n/**\n * @polymerMixin\n */\nexport const EventContextMixin = superClass => class EventContextMixin extends superClass {\n\n /**\n * Returns an object with context information about the event target:\n * - `item`: the data object corresponding to the targeted row (not specified when targeting header or footer)\n * - `column`: the column element corresponding to the targeted cell (not specified when targeting row details)\n * - `section`: whether the event targeted the body, header, footer or details of the grid\n *\n * These additional properties are included when `item` is specified:\n * - `index`: the index of the item\n * - `selected`: the selected state of the item\n * - `detailsOpened`: whether the row details are open for the item\n * - `expanded`: the expanded state of the tree toggle\n * - `level`: the tree hierarchy level\n *\n * The returned object is populated only when a grid cell, header, footer or row details is found in `event.composedPath()`.\n * This means mostly mouse and keyboard events. If such a grid part is not found in the path, an empty object is returned.\n * This may be the case eg. if the event is fired on the `` element and not any deeper in the DOM, or if\n * the event targets the empty part of the grid body.\n */\n getEventContext(event) {\n\n const context = {};\n\n const path = event.composedPath();\n const cell = path[path.indexOf(this.$.table) - 3];\n\n if (!cell) {\n return context;\n }\n\n context.section = ['body', 'header', 'footer', 'details']\n .filter(section => cell.getAttribute('part').indexOf(section) > -1)[0];\n\n if (cell._column) {\n context.column = cell._column;\n }\n\n if (context.section === 'body' || context.section === 'details') {\n Object.assign(context, this.__getRowModel(cell.parentElement));\n }\n\n return context;\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/**\n * @polymerMixin\n */\nexport const FilterMixin = superClass => class FilterMixin extends superClass {\n\n static get properties() {\n return {\n _filters: {\n type: Array,\n value: function() {\n return [];\n }\n }\n };\n }\n\n ready() {\n super.ready();\n this.addEventListener('filter-changed', this._filterChanged.bind(this));\n }\n\n _filterChanged(e) {\n if (this._filters.indexOf(e.target) === -1) {\n this._filters.push(e.target);\n }\n\n e.stopPropagation();\n\n if (this.dataProvider) {\n this.clearCache();\n }\n }\n\n _mapFilters() {\n return this._filters.map(filter => {\n return {\n path: filter.path,\n value: filter.value\n };\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 { templatize } from '@polymer/polymer/lib/utils/templatize.js';\n/**\n * `vaadin-grid-templatizer` is a helper element for the `vaadin-grid` that is preparing and\n * stamping instances of cells and columns templates\n *\n * @memberof Vaadin\n * @private\n */\nclass GridTemplatizer extends (class extends PolymerElement {}) {\n static get is() {\n return 'vaadin-grid-templatizer';\n }\n\n static get properties() {\n return {\n dataHost: Object,\n\n template: Object,\n\n _templateInstances: {\n type: Array,\n value: function() {\n return [];\n }\n },\n\n _parentPathValues: {\n value: function() {\n return {};\n }\n },\n\n _grid: Object\n };\n }\n\n static get observers() {\n return [\n '_templateInstancesChanged(_templateInstances.*, _parentPathValues.*)'\n ];\n }\n\n constructor() {\n super();\n\n this._instanceProps = {\n detailsOpened: true,\n index: true,\n item: true,\n selected: true,\n expanded: true,\n level: true\n };\n }\n\n createInstance() {\n this._ensureTemplatized();\n const instance = new this._TemplateClass({});\n this.addInstance(instance);\n\n return instance;\n }\n\n addInstance(instance) {\n if (this._templateInstances.indexOf(instance) === -1) {\n this._templateInstances.push(instance);\n requestAnimationFrame(() => this.notifyPath('_templateInstances.*', this._templateInstances));\n }\n }\n\n removeInstance(instance) {\n const index = this._templateInstances.indexOf(instance);\n this.splice('_templateInstances', index, 1);\n }\n\n _ensureTemplatized() {\n if (!this._TemplateClass) {\n this._TemplateClass = templatize(this.template, this, {\n instanceProps: this._instanceProps,\n parentModel: true,\n\n forwardHostProp: function(prop, value) {\n this._forwardParentProp(prop, value);\n\n if (this._templateInstances) {\n this._templateInstances.forEach(inst => inst.notifyPath(prop, value));\n }\n },\n\n notifyInstanceProp: function(inst, prop, value) {\n if (prop === 'index' || prop === 'item') {\n // We don’t need a change notification for these.\n return;\n }\n\n const originalProp = `__${prop}__`;\n\n // Notify for only user-action changes, not for scrolling updates. E. g.,\n // if `detailsOpened` is different from `__detailsOpened__`, which was set during render.\n if (inst[originalProp] === value) {\n return;\n }\n inst[originalProp] = value;\n\n const row = Array.from(this._grid.$.items.children).filter(row => this._grid._itemsEqual(row._item, inst.item))[0];\n if (row) {\n Array.from(row.children).forEach(cell => {\n if (cell._instance) {\n cell._instance[originalProp] = value;\n cell._instance.notifyPath(prop, value);\n }\n });\n }\n\n const itemPrefix = 'item.';\n if (Array.isArray(this._grid.items) && prop.indexOf(itemPrefix) === 0) {\n const itemsIndex = this._grid.items.indexOf(inst.item);\n const path = prop.slice(itemPrefix.length);\n this._grid.notifyPath(`items.${itemsIndex}.${path}`, value);\n }\n\n const gridCallback = `_${prop}InstanceChangedCallback`;\n if (this._grid && this._grid[gridCallback]) {\n this._grid[gridCallback](inst, value);\n }\n }\n\n });\n }\n }\n\n _forwardParentProp(prop, value) {\n this._parentPathValues[prop] = value;\n this._templateInstances.forEach(inst => inst.notifyPath(prop, value));\n }\n\n _templateInstancesChanged(t, p) {\n let index, count;\n if (t.path === '_templateInstances') {\n // Iterate all instances\n index = 0;\n count = this._templateInstances.length;\n } else if (t.path === '_templateInstances.splices') {\n // Iterate only new instances\n index = t.value.index;\n count = t.value.addedCount;\n } else {\n return;\n }\n Object.keys(this._parentPathValues || {}).forEach(keyName => {\n for (var i = index; i < index + count; i++) {\n this._templateInstances[i].set(keyName, this._parentPathValues[keyName]);\n }\n });\n }\n\n}\n\ncustomElements.define(GridTemplatizer.is, GridTemplatizer);\n\nexport { GridTemplatizer as Templatizer };\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 { Templatizer } from './vaadin-grid-templatizer.js';\n\nimport { flush } from '@polymer/polymer/lib/utils/flush.js';\n\n/**\n * @polymerMixin\n */\nexport const RowDetailsMixin = superClass => class RowDetailsMixin extends superClass {\n static get properties() {\n return {\n /**\n * An array containing references to items with open row details.\n */\n detailsOpenedItems: {\n type: Array,\n value: function() {\n return [];\n }\n },\n\n _rowDetailsTemplate: Object,\n\n /**\n * Custom function for rendering the content of the row details.\n * Receives three arguments:\n *\n * - `root` The row details content DOM element. Append your content to it.\n * - `grid` The `` element.\n * - `rowData` The object with the properties related with\n * the rendered item, contains:\n * - `rowData.index` The index of the item.\n * - `rowData.item` The item.\n */\n rowDetailsRenderer: Function,\n\n _detailsCells: {\n type: Array,\n }\n };\n }\n\n static get observers() {\n return [\n '_detailsOpenedItemsChanged(detailsOpenedItems.*, _rowDetailsTemplate, rowDetailsRenderer)',\n '_rowDetailsTemplateOrRendererChanged(_rowDetailsTemplate, rowDetailsRenderer)'\n ];\n }\n\n _rowDetailsTemplateOrRendererChanged(rowDetailsTemplate, rowDetailsRenderer) {\n if (rowDetailsTemplate && rowDetailsRenderer) {\n throw new Error('You should only use either a renderer or a template for row details');\n }\n if (rowDetailsTemplate || rowDetailsRenderer) {\n if (rowDetailsTemplate && !rowDetailsTemplate.templatizer) {\n var templatizer = new Templatizer();\n templatizer._grid = this;\n templatizer.dataHost = this.dataHost;\n templatizer.template = rowDetailsTemplate;\n rowDetailsTemplate.templatizer = templatizer;\n }\n\n if (this._columnTree) {\n // Only update the rows if the column tree has already been initialized\n Array.from(this.$.items.children).forEach(row => {\n if (!row.querySelector('[part~=details-cell]')) {\n this._updateRow(row, this._columnTree[this._columnTree.length - 1]);\n this._a11yUpdateRowDetailsOpened(row, false);\n }\n // Clear any old template instances\n delete row.querySelector('[part~=details-cell]')._instance;\n });\n }\n\n if (this.detailsOpenedItems.length) {\n Array.from(this.$.items.children).forEach(this._toggleDetailsCell, this);\n this._update();\n }\n }\n }\n\n _detailsOpenedItemsChanged(changeRecord, rowDetailsTemplate, rowDetailsRenderer) {\n if (changeRecord.path === 'detailsOpenedItems.length' || !changeRecord.value) {\n // Let’s avoid duplicate work of both “.splices” and “.length” updates.\n return;\n }\n Array.from(this.$.items.children).forEach(row => {\n this._toggleDetailsCell(row, row._item);\n this._a11yUpdateRowDetailsOpened(row, this._isDetailsOpened(row._item));\n this._toggleAttribute('details-opened', this._isDetailsOpened(row._item), row);\n });\n }\n\n _configureDetailsCell(cell) {\n cell.setAttribute('part', 'cell details-cell');\n // Freeze the details cell, so that it does not scroll horizontally\n // with the normal cells. This way it looks less weird.\n this._toggleAttribute('frozen', true, cell);\n }\n\n _toggleDetailsCell(row, item) {\n const cell = row.querySelector('[part~=\"details-cell\"]');\n if (!cell) {\n return;\n }\n const detailsHidden = !this._isDetailsOpened(item);\n const hiddenChanged = !!cell.hidden !== detailsHidden;\n\n if (!cell._instance && !cell._renderer || cell.hidden !== detailsHidden) {\n cell.hidden = detailsHidden;\n if (detailsHidden) {\n row.style.removeProperty('padding-bottom');\n } else {\n if (this.rowDetailsRenderer) {\n cell._renderer = this.rowDetailsRenderer;\n cell._renderer.call(this, cell._content, this, {index: row.index, item: item});\n } else if (this._rowDetailsTemplate && !cell._instance) {\n // Stamp the template\n cell._instance = this._rowDetailsTemplate.templatizer.createInstance();\n cell._content.innerHTML = '';\n cell._content.appendChild(cell._instance.root);\n this._updateItem(row, item);\n }\n\n flush();\n row.style.setProperty('padding-bottom', `${cell.offsetHeight}px`);\n\n requestAnimationFrame(() => this.notifyResize());\n }\n }\n if (hiddenChanged) {\n this._updateMetrics();\n this._positionItems();\n }\n }\n\n _updateDetailsCellHeights() {\n Array.from(this.$.items.querySelectorAll('[part~=\"details-cell\"]:not([hidden])')).forEach(cell => {\n cell.parentElement.style.setProperty('padding-bottom', `${cell.offsetHeight}px`);\n });\n }\n\n _isDetailsOpened(item) {\n return this.detailsOpenedItems && this._getItemIndexInArray(item, this.detailsOpenedItems) !== -1;\n }\n\n /**\n * Open the details row of a given item.\n */\n openItemDetails(item) {\n if (!this._isDetailsOpened(item)) {\n this.push('detailsOpenedItems', item);\n }\n }\n\n /**\n * Close the details row of a given item.\n */\n closeItemDetails(item) {\n if (this._isDetailsOpened(item)) {\n this.splice('detailsOpenedItems', this._getItemIndexInArray(item, this.detailsOpenedItems), 1);\n }\n }\n\n _detailsOpenedInstanceChangedCallback(instance, value) {\n if (super._detailsOpenedInstanceChangedCallback) {\n super._detailsOpenedInstanceChangedCallback(instance, value);\n }\n if (value) {\n this.openItemDetails(instance.item);\n } else {\n this.closeItemDetails(instance.item);\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 { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\n\nimport { timeOut, animationFrame, microTask } from '@polymer/polymer/lib/utils/async.js';\n\n/**\n * @polymerMixin\n */\nexport const ScrollMixin = superClass => class ScrollMixin extends superClass {\n\n get _timeouts() {\n return {\n SCROLL_PERIOD: 1000,\n WHEEL_SCROLLING: 200,\n SCROLLING: 100,\n IGNORE_WHEEL: 500\n };\n }\n\n static get properties() {\n return {\n\n // Cached array of frozen cells\n _frozenCells: {\n type: Array,\n value: function() {\n return [];\n },\n },\n\n _scrollbarWidth: {\n type: Number,\n value: function() {\n // Create the measurement node\n var scrollDiv = document.createElement('div');\n scrollDiv.style.width = '100px';\n scrollDiv.style.height = '100px';\n scrollDiv.style.overflow = 'scroll';\n scrollDiv.style.position = 'absolute';\n scrollDiv.style.top = '-9999px';\n document.body.appendChild(scrollDiv);\n // Get the scrollbar width\n var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n // Delete the DIV\n document.body.removeChild(scrollDiv);\n return scrollbarWidth;\n }\n },\n\n _rowWithFocusedElement: Element,\n\n _deltaYAcc: {\n type: Number,\n value: 0\n }\n\n };\n }\n\n static get observers() {\n return [\n '_scrollHeightUpdated(_estScrollHeight)'\n ];\n }\n\n ready() {\n super.ready();\n this.scrollTarget = this.$.table;\n\n this.addEventListener('wheel', e => {\n this._wheelScrolling = true;\n this._debouncerWheelScrolling = Debouncer.debounce(\n this._debouncerWheelScrolling,\n timeOut.after(this._timeouts.WHEEL_SCROLLING),\n () => this._wheelScrolling = false\n );\n this._onWheel(e);\n });\n\n this.$.table.addEventListener('scroll', e => {\n if (this.$.outerscroller.outerScrolling) {\n e.stopImmediatePropagation();\n }\n }, true);\n\n this.$.items.addEventListener('focusin', (e) => {\n const itemsIndex = e.composedPath().indexOf(this.$.items);\n this._rowWithFocusedElement = e.composedPath()[itemsIndex - 1];\n });\n this.$.items.addEventListener('focusout', () => this._rowWithFocusedElement = undefined);\n }\n\n _onWheel(e) {\n if (e.ctrlKey || this._hasScrolledAncestor(e.target, e.deltaX, e.deltaY)) {\n return;\n }\n\n var table = this.$.table;\n\n var deltaY = e.deltaY;\n if (e.deltaMode === 1) {\n // Mode 1 == scrolling by lines instead of pixels\n deltaY *= this._physicalAverage;\n }\n\n if (this._wheelAnimationFrame) {\n // Skip new wheel events while one is being processed\n this._deltaYAcc += deltaY;\n e.preventDefault();\n return;\n }\n\n deltaY += this._deltaYAcc;\n this._deltaYAcc = 0;\n\n this._wheelAnimationFrame = true;\n this._debouncerWheelAnimationFrame = Debouncer.debounce(\n this._debouncerWheelAnimationFrame,\n animationFrame,\n () => this._wheelAnimationFrame = false\n );\n\n var momentum = Math.abs(e.deltaX) + Math.abs(deltaY);\n\n if (this._canScroll(table, e.deltaX, deltaY)) {\n e.preventDefault();\n table.scrollTop += deltaY;\n table.scrollLeft += e.deltaX;\n this._scrollHandler();\n this._hasResidualMomentum = true;\n\n this._ignoreNewWheel = true;\n this._debouncerIgnoreNewWheel = Debouncer.debounce(\n this._debouncerIgnoreNewWheel,\n timeOut.after(this._timeouts.IGNORE_WHEEL),\n () => this._ignoreNewWheel = false\n );\n } else if (this._hasResidualMomentum && momentum <= this._previousMomentum || this._ignoreNewWheel) {\n e.preventDefault();\n } else if (momentum > this._previousMomentum) {\n this._hasResidualMomentum = false;\n }\n this._previousMomentum = momentum;\n }\n\n /**\n * Determines if the element has an ancestor prior to this\n * cell content that handles the scroll delta\n */\n _hasScrolledAncestor(el, deltaX, deltaY) {\n if (el.localName === 'vaadin-grid-cell-content') {\n return false;\n } else if (this._canScroll(el, deltaX, deltaY)\n && ['auto', 'scroll'].indexOf(getComputedStyle(el).overflow) !== -1) {\n return true;\n } else if (el !== this && el.parentElement) {\n return this._hasScrolledAncestor(el.parentElement, deltaX, deltaY);\n }\n }\n\n /**\n * Determines if the the given scroll deltas can be applied to the element\n * (fully or partially)\n */\n _canScroll(el, deltaX, deltaY) {\n return (deltaY > 0 && el.scrollTop < el.scrollHeight - el.offsetHeight) ||\n (deltaY < 0 && el.scrollTop > 0) ||\n (deltaX > 0 && el.scrollLeft < el.scrollWidth - el.offsetWidth) ||\n (deltaX < 0 && el.scrollLeft > 0);\n }\n\n _scheduleScrolling() {\n if (!this._scrollingFrame) {\n // Defer setting state attributes to avoid Edge hiccups\n this._scrollingFrame = requestAnimationFrame(() => this._toggleAttribute('scrolling', true, this.$.scroller));\n }\n this._debounceScrolling = Debouncer.debounce(\n this._debounceScrolling,\n timeOut.after(this._timeouts.SCROLLING),\n () => {\n cancelAnimationFrame(this._scrollingFrame);\n delete this._scrollingFrame;\n this._toggleAttribute('scrolling', false, this.$.scroller);\n if (!this.$.outerscroller.outerScrolling) {\n this._reorderRows();\n }\n }\n );\n\n if (!this._scrollPeriodFrame) {\n this._scrollPeriodFrame = requestAnimationFrame(() => this._toggleAttribute('scroll-period', true, this.$.scroller));\n }\n this._debounceScrollPeriod = Debouncer.debounce(\n this._debounceScrollPeriod,\n timeOut.after(this._timeouts.SCROLL_PERIOD),\n () => {\n cancelAnimationFrame(this._scrollPeriodFrame);\n delete this._scrollPeriodFrame;\n this._toggleAttribute('scroll-period', false, this.$.scroller);\n }\n );\n }\n\n _afterScroll() {\n this._translateStationaryElements();\n\n if (!this.hasAttribute('reordering')) {\n this._scheduleScrolling();\n }\n\n const os = this.$.outerscroller;\n if (!this._ios && (this._wheelScrolling || os.passthrough)) {\n os.syncOuterScroller();\n }\n\n if (this._ios) {\n // Enable vertical rubberband feedback\n const overScroll = Math.max(-os.scrollTop, 0) ||\n Math.min(0, os.scrollHeight - os.scrollTop - os.offsetHeight);\n this.$.items.style.transform = `translateY(${overScroll}px)`;\n }\n\n this._updateOverflow();\n }\n\n _updateOverflow() {\n // Set overflow styling attributes\n let overflow = '';\n const table = this.$.table;\n if (table.scrollTop < table.scrollHeight - table.clientHeight) {\n overflow += ' bottom';\n }\n\n if (table.scrollTop > 0) {\n overflow += ' top';\n }\n\n if (table.scrollLeft < table.scrollWidth - table.clientWidth) {\n overflow += ' right';\n }\n\n if (table.scrollLeft > 0) {\n overflow += ' left';\n }\n\n this._debounceOverflow = Debouncer.debounce(\n this._debounceOverflow,\n animationFrame,\n () => {\n const value = overflow.trim();\n if (value.length > 0 && this.getAttribute('overflow') !== value) {\n this.setAttribute('overflow', value);\n } else if (value.length == 0 && this.hasAttribute('overflow')) {\n this.removeAttribute('overflow');\n }\n }\n );\n }\n\n // correct order needed for preserving correct tab order between cell contents.\n _reorderRows() {\n const body = this.$.items;\n const items = body.querySelectorAll('tr');\n if (!items.length) {\n return;\n }\n\n const adjustedVirtualStart = this._virtualStart + this._vidxOffset;\n\n // Which row to use as a target?\n const targetRow = this._rowWithFocusedElement || Array.from(items).filter(row => !row.hidden)[0];\n if (!targetRow) {\n // All rows are hidden, don't reorder\n return;\n }\n\n // Where the target row should be?\n const targetPhysicalIndex = targetRow.index - adjustedVirtualStart;\n\n // Reodrer the DOM elements to keep the target row at the target physical index\n const delta = Array.from(items).indexOf(targetRow) - targetPhysicalIndex;\n if (delta > 0) {\n for (let i = 0; i < delta; i++) {\n body.appendChild(items[i]);\n }\n } else if (delta < 0) {\n for (let i = items.length + delta; i < items.length; i++) {\n body.insertBefore(items[i], items[0]);\n }\n }\n }\n\n _frozenCellsChanged() {\n this._debouncerCacheElements = Debouncer.debounce(\n this._debouncerCacheElements,\n microTask,\n () => {\n Array.from(this.root.querySelectorAll('[part~=\"cell\"]')).forEach(function(cell) {\n cell.style.transform = '';\n });\n this._frozenCells = Array.prototype.slice.call(this.$.table.querySelectorAll('[frozen]'));\n this._translateStationaryElements();\n }\n );\n this._updateLastFrozen();\n }\n\n _updateLastFrozen() {\n if (!this._columnTree) {\n return;\n }\n\n const columnsRow = this._columnTree[this._columnTree.length - 1].slice(0);\n columnsRow.sort((a, b) => {\n return a._order - b._order;\n });\n const lastFrozen = columnsRow.reduce((prev, col, index) => {\n col._lastFrozen = false;\n return col.frozen && !col.hidden ? index : prev;\n }, undefined);\n if (lastFrozen !== undefined) {\n columnsRow[lastFrozen]._lastFrozen = true;\n }\n }\n\n _translateStationaryElements() {\n if (this._edge && !this._scrollbarWidth) {\n // Fixed mode (Tablet Edge)\n this.$.items.style.transform =\n this._getTranslate(-this._scrollLeft || 0, -this._scrollTop || 0);\n\n this.$.footer.style.transform = this.$.header.style.transform =\n this._getTranslate(-this._scrollLeft || 0, 0);\n } else {\n this.$.footer.style.transform = this.$.header.style.transform = this._getTranslate(0, this._scrollTop);\n }\n\n var frozenCellTransform = this._getTranslate(this._scrollLeft, 0);\n for (var i = 0; i < this._frozenCells.length; i++) {\n this._frozenCells[i].style.transform = frozenCellTransform;\n }\n }\n\n _getTranslate(x, y) {\n return 'translate(' + x + 'px,' + y + 'px)';\n }\n\n _scrollHeightUpdated(_estScrollHeight) {\n this.$.outersizer.style.top = this.$.fixedsizer.style.top = _estScrollHeight + 'px';\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/**\n * @polymerMixin\n */\nexport const SelectionMixin = superClass => class SelectionMixin extends superClass {\n\n static get properties() {\n return {\n /**\n * An array that contains the selected items.\n */\n selectedItems: {\n type: Object,\n notify: true,\n value: () => []\n }\n };\n }\n\n static get observers() {\n return [\n '_selectedItemsChanged(selectedItems.*)'\n ];\n }\n\n _isSelected(item) {\n return this.selectedItems && this._getItemIndexInArray(item, this.selectedItems) > -1;\n }\n\n /**\n * Selects the given item.\n *\n * @method selectItem\n * @param {Object} item The item object\n */\n selectItem(item) {\n if (!this._isSelected(item)) {\n this.push('selectedItems', item);\n }\n }\n\n /**\n * Deselects the given item if it is already selected.\n *\n * @method deselect\n * @param {Object} item The item object\n */\n deselectItem(item) {\n const index = this._getItemIndexInArray(item, this.selectedItems);\n if (index > -1) {\n this.splice('selectedItems', index, 1);\n }\n }\n\n /**\n * Toggles the selected state of the given item.\n *\n * @method toggle\n * @param {Object} item The item object\n */\n _toggleItem(item) {\n const index = this._getItemIndexInArray(item, this.selectedItems);\n if (index === -1) {\n this.selectItem(item);\n } else {\n this.deselectItem(item);\n }\n }\n\n _selectedItemsChanged(e) {\n if (this.$.items.children.length && (e.path === 'selectedItems' || e.path === 'selectedItems.splices')) {\n Array.from(this.$.items.children).forEach(row => {\n this._updateItem(row, row._item);\n });\n }\n }\n\n _selectedInstanceChangedCallback(instance, value) {\n if (super._selectedInstanceChangedCallback) {\n super._selectedInstanceChangedCallback(instance, value);\n }\n if (value) {\n this.selectItem(instance.item);\n } else {\n this.deselectItem(instance.item);\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 { microTask } from '@polymer/polymer/lib/utils/async.js';\n\nimport { PolymerElement } from '@polymer/polymer/polymer-element.js';\n\n/**\n * @polymerMixin\n */\nexport const SortMixin = superClass => class SortMixin extends superClass {\n static get properties() {\n return {\n /**\n * When `true`, all `` are applied for sorting.\n */\n multiSort: {\n type: Boolean,\n value: false\n },\n\n _sorters: {\n type: Array,\n value: function() {\n return [];\n }\n },\n\n _previousSorters: {\n type: Array,\n value: function() {\n return [];\n }\n }\n };\n }\n\n ready() {\n super.ready();\n this.addEventListener('sorter-changed', this._onSorterChanged);\n\n // With Polymer 2 & shady the 'sorter-changed' listener isn't guaranteed to be registered\n // before child 's upgrade and fire the events. The following\n // makes sure that 'sorter-changed' is fired for all elements\n // after this () is ready (and the listeners are active).\n if (window.ShadyDOM) {\n microTask.run(() => {\n const sorters = this.querySelectorAll('vaadin-grid-sorter');\n Array.from(sorters).forEach((sorter) => {\n // Don't try to fire if the sorter hasn't been upgraded yet\n if (sorter instanceof PolymerElement) {\n sorter.dispatchEvent(new CustomEvent('sorter-changed', {bubbles: true, composed: true}));\n }\n });\n });\n }\n }\n\n _onSorterChanged(e) {\n const sorter = e.target;\n\n this._removeArrayItem(this._sorters, sorter);\n sorter._order = null;\n\n if (this.multiSort) {\n if (sorter.direction) {\n this._sorters.unshift(sorter);\n }\n\n this._sorters.forEach((sorter, index) => sorter._order = this._sorters.length > 1 ? index : null, this);\n } else {\n if (sorter.direction) {\n this._sorters.forEach(sorter => {\n sorter._order = null;\n sorter.direction = null;\n });\n this._sorters = [sorter];\n }\n }\n\n e.stopPropagation();\n\n if (this.dataProvider &&\n // No need to clear cache if sorters didn't change\n JSON.stringify(this._previousSorters) !== JSON.stringify(this._mapSorters())) {\n this.clearCache();\n }\n\n this._a11yUpdateSorters();\n\n this._previousSorters = this._mapSorters();\n }\n\n _mapSorters() {\n return this._sorters.map(sorter => {\n return {\n path: sorter.path,\n direction: sorter.direction\n };\n });\n }\n\n _removeArrayItem(array, item) {\n const index = array.indexOf(item);\n if (index > -1) {\n array.splice(index, 1);\n }\n }\n};\n","/**\n@license\nCopyright (c) 2018 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\n/**\n * @polymerMixin\n */\nexport const StylingMixin = superClass => class StylingMixin extends superClass {\n\n static get properties() {\n return {\n /**\n * A function that allows generating CSS class names for grid cells\n * based on their row and column. The return value should be the generated\n * class name as a string, or multiple class names separated by whitespace\n * characters.\n *\n * Receives two arguments:\n * - `column` The `` element.\n * - `rowData` The object with the properties related with\n * the rendered item, contains:\n * - `rowData.index` The index of the item.\n * - `rowData.item` The item.\n * - `rowData.expanded` Sublevel toggle state.\n * - `rowData.level` Level of the tree represented with a horizontal offset of the toggle button.\n * - `rowData.selected` Selected state.\n */\n cellClassNameGenerator: Function\n };\n }\n\n static get observers() {\n return [\n '__cellClassNameGeneratorChanged(cellClassNameGenerator)'\n ];\n }\n\n __cellClassNameGeneratorChanged(cellClassGenerator) {\n this.generateCellClassNames();\n }\n\n /**\n * Runs the `cellClassNameGenerator` for the visible cells.\n * If the generator depends on varying conditions, you need to\n * call this function manually in order to update the styles when\n * the conditions change.\n */\n generateCellClassNames() {\n Array.from(this.$.items.children).filter(row => !row.hidden).forEach(\n row => this._generateCellClassNames(row, this.__getRowModel(row)));\n }\n\n _generateCellClassNames(row, rowData) {\n Array.from(row.children).forEach(cell => {\n if (cell.__generatedClasses) {\n cell.__generatedClasses.forEach(className => cell.classList.remove(className));\n }\n if (this.cellClassNameGenerator) {\n const result = this.cellClassNameGenerator(cell._column, rowData);\n cell.__generatedClasses = result && result.split(' ').filter(className => className.length > 0);\n if (cell.__generatedClasses) {\n cell.__generatedClasses.forEach(className => cell.classList.add(className));\n }\n }\n });\n }\n};\n","/**\n@license\nCopyright (c) 2019 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nconst DropMode = {\n BETWEEN: 'between',\n ON_TOP: 'on-top',\n ON_TOP_OR_BETWEEN: 'on-top-or-between',\n ON_GRID: 'on-grid'\n};\n\nconst DropLocation = {\n ON_TOP: 'on-top',\n ABOVE: 'above',\n BELOW: 'below',\n EMPTY: 'empty'\n};\n\n/**\n * @polymerMixin\n */\nexport const DragAndDropMixin = superClass => class DragAndDropMixin extends superClass {\n\n static get properties() {\n return {\n /**\n * Defines the locations within the Grid row where an element can be dropped.\n *\n * Possible values are:\n * - `between`: The drop event can happen between Grid rows.\n * - `on-top`: The drop event can happen on top of Grid rows.\n * - `on-top-or-between`: The drop event can happen either on top of or between Grid rows.\n * - `on-grid`: The drop event will not happen on any specific row, it will show the drop target outline around the whole grid.\n */\n dropMode: String,\n\n /**\n * Marks the grid's rows to be available for dragging.\n */\n rowsDraggable: Boolean,\n\n /**\n * A function that filters dragging of specific grid rows. The return value should be false\n * if dragging of the row should be disabled.\n *\n * Receives one argument:\n * - `rowData` The object with the properties related with\n * the rendered item, contains:\n * - `rowData.index` The index of the item.\n * - `rowData.item` The item.\n * - `rowData.expanded` Sublevel toggle state.\n * - `rowData.level` Level of the tree represented with a horizontal offset of the toggle button.\n * - `rowData.selected` Selected state.\n */\n dragFilter: Function,\n\n /**\n * A function that filters dropping on specific grid rows. The return value should be false\n * if dropping on the row should be disabled.\n *\n * Receives one argument:\n * - `rowData` The object with the properties related with\n * the rendered item, contains:\n * - `rowData.index` The index of the item.\n * - `rowData.item` The item.\n * - `rowData.expanded` Sublevel toggle state.\n * - `rowData.level` Level of the tree represented with a horizontal offset of the toggle button.\n * - `rowData.selected` Selected state.\n */\n dropFilter: Function,\n\n __dndAutoScrollThreshold: {\n value: 50\n }\n\n };\n }\n\n static get observers() {\n return [\n '_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter)'\n ];\n }\n\n ready() {\n super.ready();\n this.$.table.addEventListener('dragstart', this._onDragStart.bind(this));\n this.$.table.addEventListener('dragend', this._onDragEnd.bind(this));\n this.$.table.addEventListener('dragover', this._onDragOver.bind(this));\n this.$.table.addEventListener('dragleave', this._onDragLeave.bind(this));\n this.$.table.addEventListener('drop', this._onDrop.bind(this));\n this.$.table.addEventListener('dragenter', e => {\n if (this.dropMode) {\n e.preventDefault();\n e.stopPropagation();\n }\n });\n\n }\n\n _onDragStart(e) {\n if (this.rowsDraggable) {\n let row = e.target;\n if (row.localName === 'vaadin-grid-cell-content') {\n // The draggable node is the cell content element on browsers that support native shadow\n row = row.assignedSlot.parentNode.parentNode;\n }\n if (row.parentNode !== this.$.items) {\n return;\n }\n\n e.stopPropagation();\n this._toggleAttribute('dragging-rows', true, this);\n\n if (this._safari) {\n // Safari doesn't get proper drag images from transformed\n // elements so we need to switch to top temporarily\n const transform = row.style.transform;\n row.style.top = /translateY\\((.*)\\)/.exec(transform)[1];\n row.style.transform = 'none';\n requestAnimationFrame(() => {\n row.style.top = '';\n row.style.transform = transform;\n });\n }\n\n const rowRect = row.getBoundingClientRect();\n if (!window.ShadyDOM) {\n if (this._ios) {\n e.dataTransfer.setDragImage(row);\n } else {\n e.dataTransfer.setDragImage(row, e.clientX - rowRect.left, e.clientY - rowRect.top);\n }\n\n }\n\n let rows = [row];\n if (this._isSelected(row._item)) {\n rows = this.__getViewportRows()\n .filter(row => this._isSelected(row._item))\n .filter(row => !this.dragFilter || this.dragFilter(this.__getRowModel(row)));\n }\n\n // Set the default transfer data\n e.dataTransfer.setData('text', this.__formatDefaultTransferData(rows));\n\n row.setAttribute('dragstart', rows.length > 1 ? rows.length : '');\n this.updateStyles({\n '--_grid-drag-start-x': `${e.clientX - rowRect.left + 20}px`,\n '--_grid-drag-start-y': `${e.clientY - rowRect.top + 10}px`\n });\n\n requestAnimationFrame(() => {\n row.removeAttribute('dragstart');\n this.updateStyles({'--_grid-drag-start-x': '', '--_grid-drag-start-y': ''});\n });\n\n const event = new CustomEvent('grid-dragstart', {\n detail: {\n draggedItems: rows.map(row => row._item),\n setDragData: (type, data) => e.dataTransfer.setData(type, data),\n setDraggedItemsCount: count => row.setAttribute('dragstart', count)\n }\n });\n event.originalEvent = e;\n this.dispatchEvent(event);\n }\n }\n\n _onDragEnd(e) {\n this._toggleAttribute('dragging-rows', false, this);\n e.stopPropagation();\n const event = new CustomEvent('grid-dragend');\n event.originalEvent = e;\n this.dispatchEvent(event);\n }\n\n _onDragLeave(e) {\n e.stopPropagation();\n this._clearDragStyles();\n }\n\n _onDragOver(e) {\n\n if (this.dropMode) {\n this._dropLocation = undefined;\n this._dragOverItem = undefined;\n\n if (this.__dndAutoScroll(e.clientY)) {\n this._clearDragStyles();\n return;\n }\n\n let row = e.composedPath().filter(node => node.localName === 'tr')[0];\n\n if (!this._effectiveSize || this.dropMode === DropMode.ON_GRID) {\n // The grid is empty or \"on-grid\" drop mode was used, always default to \"empty\"\n this._dropLocation = DropLocation.EMPTY;\n } else if (!row || row.parentNode !== this.$.items) {\n // The dragover didn't occur on a body row but the grid has items\n if (row) {\n // The dragover occurred over a header/footer row\n return;\n } else if (this.dropMode === DropMode.BETWEEN || this.dropMode === DropMode.ON_TOP_OR_BETWEEN) {\n // The drop mode allows setting the last row as the drag over item\n row = Array.from(this.$.items.children).filter(row => !row.hidden).pop();\n this._dropLocation = DropLocation.BELOW;\n } else {\n // Drop mode on-top used but the dragover didn't occur over one of the existing rows\n return;\n }\n } else {\n // The dragover occurred on a body row, determine the drop location from coordinates\n const rowRect = row.getBoundingClientRect();\n\n this._dropLocation = DropLocation.ON_TOP;\n\n if (this.dropMode === DropMode.BETWEEN) {\n const dropAbove = e.clientY - rowRect.top < rowRect.bottom - e.clientY;\n this._dropLocation = dropAbove ? DropLocation.ABOVE : DropLocation.BELOW;\n\n } else if (this.dropMode === DropMode.ON_TOP_OR_BETWEEN) {\n if (e.clientY - rowRect.top < rowRect.height / 3) {\n this._dropLocation = DropLocation.ABOVE;\n } else if (e.clientY - rowRect.top > (rowRect.height / 3) * 2) {\n this._dropLocation = DropLocation.BELOW;\n }\n }\n }\n\n if (row && row.hasAttribute('drop-disabled')) {\n this._dropLocation = undefined;\n return;\n }\n\n e.stopPropagation();\n e.preventDefault();\n\n if (this._dropLocation === DropLocation.EMPTY) {\n this._toggleAttribute('dragover', true, this);\n } else if (row) {\n this._dragOverItem = row._item;\n if (row.getAttribute('dragover') !== this._dropLocation) {\n row.setAttribute('dragover', this._dropLocation);\n }\n } else {\n this._clearDragStyles();\n }\n }\n }\n\n __dndAutoScroll(clientY) {\n if (this.__dndAutoScrolling) {\n return true;\n }\n\n const headerBottom = this.$.header.getBoundingClientRect().bottom;\n const footerTop = this.$.footer.getBoundingClientRect().top;\n const topDiff = headerBottom - clientY + this.__dndAutoScrollThreshold;\n const bottomDiff = clientY - footerTop + this.__dndAutoScrollThreshold;\n let scrollTopDelta = 0;\n\n if (bottomDiff > 0) {\n scrollTopDelta = bottomDiff * 2;\n } else if (topDiff > 0) {\n scrollTopDelta = -topDiff * 2;\n }\n\n if (scrollTopDelta) {\n const scrollTop = this.$.table.scrollTop;\n this.$.table.scrollTop += scrollTopDelta;\n const scrollTopChanged = scrollTop !== this.$.table.scrollTop;\n if (scrollTopChanged) {\n this.__dndAutoScrolling = true;\n // Disallow more auto-scrolls within 20ms\n setTimeout(() => this.__dndAutoScrolling = false, 20);\n this._scrollHandler();\n return true;\n }\n }\n }\n\n __getViewportRows() {\n const headerBottom = this.$.header.getBoundingClientRect().bottom;\n const footerTop = this.$.footer.getBoundingClientRect().top;\n return Array.from(this.$.items.children)\n .filter(row => {\n const rowRect = row.getBoundingClientRect();\n return rowRect.bottom > headerBottom && rowRect.top < footerTop;\n });\n }\n\n _clearDragStyles() {\n this.removeAttribute('dragover');\n Array.from(this.$.items.children).forEach(row => row.removeAttribute('dragover'));\n }\n\n _onDrop(e) {\n if (this.dropMode) {\n e.stopPropagation();\n e.preventDefault();\n\n const dragData = e.dataTransfer.types && Array.from(e.dataTransfer.types).map(type => {\n return {\n type,\n data: e.dataTransfer.getData(type)\n };\n });\n\n this._clearDragStyles();\n\n const event = new CustomEvent('grid-drop', {\n bubbles: e.bubbles,\n cancelable: e.cancelable,\n detail: {\n dropTargetItem: this._dragOverItem,\n dropLocation: this._dropLocation,\n dragData\n }\n });\n event.originalEvent = e;\n this.dispatchEvent(event);\n }\n }\n\n __formatDefaultTransferData(rows) {\n return rows\n .map(row => {\n return Array.from(row.children)\n .filter(cell => !cell.hidden && cell.getAttribute('part').indexOf('details-cell') === -1)\n .sort((a, b) => {\n return a._column._order > b._column._order ? 1 : -1;\n })\n .map(cell => cell._content.textContent.trim())\n .filter(content => content)\n .join('\\t');\n })\n .join('\\n');\n }\n\n _dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter) {\n this.filterDragAndDrop();\n }\n\n /**\n * Runs the `dragFilter` and `dropFilter` hooks for the visible cells.\n * If the filter depends on varying conditions, you may need to\n * call this function manually in order to update the draggability when\n * the conditions change.\n */\n filterDragAndDrop() {\n Array.from(this.$.items.children).filter(row => !row.hidden).forEach(\n row => {\n this._filterDragAndDrop(row, this.__getRowModel(row));\n }\n );\n }\n\n _filterDragAndDrop(row, rowData) {\n const dragDisabled = !this.rowsDraggable || (this.dragFilter && !this.dragFilter(rowData));\n const dropDisabled = !this.dropMode || (this.dropFilter && !this.dropFilter(rowData));\n\n const draggableElements = window.ShadyDOM\n ? [row]\n : Array.from(row.children).map(cell => cell._content);\n\n draggableElements.forEach(e => {\n if (dragDisabled) {\n e.removeAttribute('draggable');\n } else {\n e.setAttribute('draggable', true);\n }\n });\n\n this._toggleAttribute('drag-disabled', dragDisabled, row);\n this._toggleAttribute('drop-disabled', dropDisabled, row);\n }\n\n /**\n * Fired when starting to drag grid rows.\n *\n * @event grid-dragstart\n * @param {Object} originalEvent The native dragstart event\n * @param {Object} detail\n * @param {Object} detail.draggedItems the items in the visible viewport that are dragged\n * @param {Function} detail.setDraggedItemsCount Overrides the default number shown in the drag image on multi row drag.\n * Parameter is of type number.\n * @param {Function} detail.setDragData Sets dataTransfer data for the drag operation.\n * Note that \"text\" is the only data type supported by all the browsers the grid currently supports (including IE11).\n * The function takes two parameters:\n * - type:string The type of the data\n * - data:string The data\n */\n\n /**\n * Fired when the dragging of the rows ends.\n *\n * @event grid-dragend\n * @param {Object} originalEvent The native dragend event\n */\n\n /**\n * Fired when a drop occurs on top of the grid.\n *\n * @event grid-drop\n * @param {Object} originalEvent The native drop event\n * @param {Object} detail\n * @param {Object} detail.dropTargetItem The item of the grid row on which the drop occurred.\n * @param {string} detail.dropLocation The position at which the drop event took place relative to a row.\n * Depending on the dropMode value, the drop location can be one of the following\n * - `on-top`: when the drop occurred on top of the row\n * - `above`: when the drop occurred above the row\n * - `below`: when the drop occurred below the row\n * - `empty`: when the drop occurred over the grid, not relative to any specific row\n * @param {string} detail.dragData An array of items with the payload as a string representation as the\n * `data` property and the type of the data as `type` property.\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/**\n * @polymerMixin\n */\nexport const KeyboardNavigationMixin = superClass => class KeyboardNavigationMixin extends superClass {\n static get properties() {\n return {\n _headerFocusable: {\n type: Object,\n observer: '_focusableChanged'\n },\n _itemsFocusable: {\n type: Object,\n observer: '_focusableChanged'\n },\n _footerFocusable: {\n type: Object,\n observer: '_focusableChanged'\n },\n _navigatingIsHidden: Boolean,\n _focusedItemIndex: {\n type: Number,\n value: 0\n },\n _focusedColumnOrder: Number\n };\n }\n\n ready() {\n super.ready();\n\n if (this._ios || this._android) {\n // Disable keyboard navigation on mobile devices\n return;\n }\n\n this.addEventListener('keydown', this._onKeyDown);\n this.addEventListener('focusin', this._onFocusIn);\n this.addEventListener('focusout', this._onFocusOut);\n\n // When focus goes from cell to another cell, focusin/focusout events do\n // not escape the grid’s shadowRoot, thus listening inside the shadowRoot.\n this.$.table.addEventListener('focusin', this._onCellFocusIn.bind(this));\n this.$.table.addEventListener('focusout', this._onCellFocusOut.bind(this));\n\n this.addEventListener('mousedown', () => {\n this._toggleAttribute('navigating', false, this);\n this._isMousedown = true;\n });\n this.addEventListener('mouseup', () => this._isMousedown = false);\n }\n\n _focusableChanged(focusable, oldFocusable) {\n if (oldFocusable) {\n oldFocusable.setAttribute('tabindex', '-1');\n }\n if (focusable) {\n focusable.setAttribute('tabindex', '0');\n }\n }\n\n _onKeyDown(e) {\n // Ensure standard key value, unified across browsers\n let key = e.key;\n if (key === 'Up' || key === 'Down' || key === 'Left' || key === 'Right') {\n // MSIE & Edge\n key = 'Arrow' + key;\n }\n if (key === 'Esc') {\n // MSIE & Edge\n key = 'Escape';\n }\n if (key === 'Spacebar') {\n // MSIE\n key = ' ';\n }\n\n let keyGroup;\n switch (key) {\n case 'ArrowUp':\n case 'ArrowDown':\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'PageUp':\n case 'PageDown':\n case 'Home':\n case 'End':\n keyGroup = 'Navigation';\n break;\n case 'Enter':\n case 'Escape':\n case 'F2':\n keyGroup = 'Interaction';\n break;\n case 'Tab':\n keyGroup = 'Tab';\n break;\n case ' ':\n keyGroup = 'Space';\n break;\n }\n\n this._detectInteracting(e);\n if (this.hasAttribute('interacting') && keyGroup !== 'Interaction') {\n // When in the interacting mode, only the “Interaction” keys are handled.\n keyGroup = undefined;\n }\n\n if (keyGroup) {\n this[`_on${keyGroup}KeyDown`](e, key);\n }\n }\n\n _ensureScrolledToIndex(index) {\n const targetRowInDom = Array.from(this.$.items.children).filter(child => child.index === index)[0];\n if (!targetRowInDom) {\n this._scrollToIndex(index);\n }\n }\n\n _onNavigationKeyDown(e, key) {\n e.preventDefault();\n\n function indexOfChildElement(el) {\n return Array.prototype.indexOf.call(el.parentNode.children, el);\n }\n\n const visibleItemsCount = this._lastVisibleIndex - this._firstVisibleIndex - 1;\n\n let dx = 0, dy = 0;\n switch (key) {\n case 'ArrowRight':\n dx = 1;\n break;\n case 'ArrowLeft':\n dx = -1;\n break;\n case 'Home':\n dx = -Infinity;\n e.ctrlKey && (dy = -Infinity);\n break;\n case 'End':\n dx = Infinity;\n e.ctrlKey && (dy = Infinity);\n break;\n case 'ArrowDown':\n dy = 1;\n break;\n case 'ArrowUp':\n dy = -1;\n break;\n case 'PageDown':\n dy = visibleItemsCount;\n break;\n case 'PageUp':\n dy = -visibleItemsCount;\n break;\n }\n\n const activeCell = e.composedPath()[0];\n const columnIndex = indexOfChildElement(activeCell);\n const isRowDetails = this._elementMatches(activeCell, '[part~=\"details-cell\"]');\n\n const activeRow = activeCell.parentNode;\n\n const activeRowGroup = activeRow.parentNode;\n const maxRowIndex = (activeRowGroup === this.$.items ? this._effectiveSize : activeRowGroup.children.length) - 1;\n\n // Body rows have index property, otherwise DOM child index of the row is used.\n const rowIndex = (activeRowGroup === this.$.items) ?\n (this._focusedItemIndex !== undefined ? this._focusedItemIndex : activeRow.index) :\n indexOfChildElement(activeRow);\n\n // Index of the destination row\n let dstRowIndex = Math.max(0, Math.min(rowIndex + dy, maxRowIndex));\n\n // Row details navigation logic\n let dstIsRowDetails = false;\n if (activeRowGroup === this.$.items) {\n const item = activeRow._item;\n const dstItem = this._cache.getItemForIndex(dstRowIndex);\n // Should we navigate to row details?\n if (isRowDetails) {\n dstIsRowDetails = dy === 0;\n } else {\n dstIsRowDetails = dy === 1 && this._isDetailsOpened(item) ||\n dy === -1 && dstRowIndex !== rowIndex && this._isDetailsOpened(dstItem);\n }\n // Should we navigate between details and regular cells of the same row?\n if (dstIsRowDetails !== isRowDetails &&\n (dy === 1 && dstIsRowDetails || dy === -1 && !dstIsRowDetails)) {\n dstRowIndex = rowIndex;\n }\n }\n\n // Header and footer could have hidden rows, e. g., if none of the columns\n // or groups on the given column tree level define template. Skip them\n // in vertical keyboard navigation.\n if (activeRowGroup !== this.$.items) {\n if (dstRowIndex > rowIndex) {\n while (\n dstRowIndex < maxRowIndex &&\n activeRowGroup.children[dstRowIndex].hidden\n ) {\n dstRowIndex++;\n }\n } else if (dstRowIndex < rowIndex) {\n while (\n dstRowIndex > 0 &&\n activeRowGroup.children[dstRowIndex].hidden\n ) {\n dstRowIndex--;\n }\n }\n }\n\n // _focusedColumnOrder is memoized — this is to ensure predictable\n // navigation when entering and leaving detail and column group cells.\n if (this._focusedColumnOrder === undefined) {\n if (isRowDetails) {\n this._focusedColumnOrder = 0;\n } else {\n this._focusedColumnOrder = this._getColumns(activeRowGroup, rowIndex)[columnIndex]._order;\n }\n }\n\n // Find orderedColumnIndex — the index of order closest matching the\n // original _focusedColumnOrder in the sorted array of orders\n // of the visible columns on the destination row.\n const dstColumns = this._getColumns(activeRowGroup, dstRowIndex);\n const dstSortedColumnOrders = dstColumns.filter(c => !c.hidden).map(c => c._order)\n .sort((b, a) => (b - a));\n const maxOrderedColumnIndex = dstSortedColumnOrders.length - 1;\n const orderedColumnIndex = dstSortedColumnOrders.indexOf(\n dstSortedColumnOrders.slice(0).sort((b, a) =>\n Math.abs(b - this._focusedColumnOrder) - Math.abs(a - this._focusedColumnOrder)\n )[0]\n );\n\n // Index of the destination column order\n const dstOrderedColumnIndex = (dy === 0 && isRowDetails) ? orderedColumnIndex :\n Math.max(0, Math.min(orderedColumnIndex + dx, maxOrderedColumnIndex));\n\n if (dstOrderedColumnIndex !== orderedColumnIndex) {\n // Horizontal movement invalidates stored _focusedColumnOrder\n this._focusedColumnOrder = undefined;\n }\n\n // Ensure correct vertical scroll position, destination row is visible\n if (activeRowGroup === this.$.items) {\n this._ensureScrolledToIndex(dstRowIndex);\n }\n\n // This has to be set after scrolling, otherwise it can be removed by\n // `_preventScrollerRotatingCellFocus(item, index)` during scrolling.\n this._toggleAttribute('navigating', true, this);\n\n const columnIndexByOrder = dstColumns.reduce((acc, col, i) => (acc[col._order] = i, acc), {});\n const dstColumnIndex = columnIndexByOrder[dstSortedColumnOrders[dstOrderedColumnIndex]];\n\n // For body rows, use index property to find destination row, otherwise use DOM child index\n const dstRow = activeRowGroup === this.$.items ?\n Array.from(activeRowGroup.children).filter(el => el.index === dstRowIndex)[0] :\n activeRowGroup.children[dstRowIndex];\n if (!dstRow) {\n return;\n }\n\n // Here we go!\n const dstCell = dstIsRowDetails ?\n Array.from(dstRow.children)\n .filter(el => this._elementMatches(el, '[part~=\"details-cell\"]'))[0] :\n dstRow.children[dstColumnIndex];\n this._scrollHorizontallyToCell(dstCell);\n if (activeRowGroup === this.$.items) {\n // When scrolling with repeated keydown, sometimes FocusEvent listeners\n // are too late to update _focusedItemIndex. Ensure next keydown\n // listener invocation gets updated _focusedItemIndex value.\n this._focusedItemIndex = dstRowIndex;\n }\n\n if (activeRowGroup === this.$.items) {\n const dstRect = dstCell.getBoundingClientRect();\n const footerTop = this.$.footer.getBoundingClientRect().top;\n const headerBottom = this.$.header.getBoundingClientRect().bottom;\n if (dstRect.bottom > footerTop) {\n this.$.table.scrollTop += dstRect.bottom - footerTop;\n this._scrollHandler();\n } else if (dstRect.top < headerBottom) {\n this.$.table.scrollTop -= headerBottom - dstRect.top;\n this._scrollHandler();\n }\n }\n\n dstCell.focus();\n }\n\n _parseEventPath(path) {\n const tableIndex = path.indexOf(this.$.table);\n return {\n rowGroup: path[tableIndex - 1],\n row: path[tableIndex - 2],\n cell: path[tableIndex - 3]\n };\n }\n\n _onInteractionKeyDown(e, key) {\n const localTarget = e.composedPath()[0];\n const localTargetIsTextInput = localTarget.localName === 'input' &&\n !/^(button|checkbox|color|file|image|radio|range|reset|submit)$/i.test(localTarget.type);\n\n let wantInteracting;\n switch (key) {\n case 'Enter':\n wantInteracting = this.hasAttribute('interacting') ? !localTargetIsTextInput : true;\n break;\n case 'Escape':\n wantInteracting = false;\n break;\n case 'F2':\n wantInteracting = !this.hasAttribute('interacting');\n break;\n }\n\n const {cell} = this._parseEventPath(e.composedPath());\n\n if (this.hasAttribute('interacting') !== wantInteracting) {\n if (wantInteracting) {\n const focusTarget = cell._content.querySelector('[focus-target]') ||\n cell._content.firstElementChild;\n if (focusTarget) {\n e.preventDefault();\n focusTarget.focus();\n this._toggleAttribute('interacting', true, this);\n this._toggleAttribute('navigating', false, this);\n }\n } else {\n e.preventDefault();\n this._focusedColumnOrder = undefined;\n cell.focus();\n this._toggleAttribute('interacting', false, this);\n this._toggleAttribute('navigating', true, this);\n }\n }\n }\n\n _predictFocusStepTarget(srcElement, step) {\n const tabOrder = [\n this.$.table,\n this._headerFocusable,\n this._itemsFocusable,\n this._footerFocusable,\n this.$.focusexit\n ];\n\n let index = tabOrder.indexOf(srcElement);\n\n index += step;\n while (index >= 0 && index <= tabOrder.length - 1 &&\n (!tabOrder[index] || tabOrder[index].parentNode.hidden)) {\n index += step;\n }\n\n return tabOrder[index];\n }\n\n _onTabKeyDown(e) {\n const focusTarget = this._predictFocusStepTarget(e.composedPath()[0], e.shiftKey ? -1 : 1);\n\n if (focusTarget === this.$.table) {\n // The focus is about to exit the grid to the top.\n this.$.table.focus();\n } else if (focusTarget === this.$.focusexit) {\n // The focus is about to exit the grid to the bottom.\n this.$.focusexit.focus();\n } else if (focusTarget === this._itemsFocusable) {\n let itemsFocusTarget = focusTarget;\n const targetRow = this._itemsFocusable.parentNode;\n this._ensureScrolledToIndex(this._focusedItemIndex);\n if (targetRow.index !== this._focusedItemIndex) {\n // The target row, which is about to be focused next, has been\n // assigned with a new index since last focus, probably because of\n // scrolling. Focus the row for the stored focused item index instead.\n const columnIndex = Array.from(targetRow.children).indexOf(this._itemsFocusable);\n const focusedItemRow = Array.from(this.$.items.children)\n .filter(row => row.index === this._focusedItemIndex)[0];\n if (focusedItemRow) {\n itemsFocusTarget = focusedItemRow.children[columnIndex];\n }\n }\n e.preventDefault();\n itemsFocusTarget.focus();\n } else {\n e.preventDefault();\n focusTarget.focus();\n }\n\n this._toggleAttribute('navigating', true, this);\n }\n\n _onSpaceKeyDown(e) {\n e.preventDefault();\n\n const cell = e.composedPath()[0];\n if (cell._content && cell._content.firstElementChild) {\n const wasNavigating = this.hasAttribute('navigating');\n cell._content.firstElementChild.click();\n this._toggleAttribute('navigating', wasNavigating, this);\n } else {\n this.dispatchEvent(new CustomEvent('cell-activate', {detail: {\n model: this.__getRowModel(cell.parentElement)\n }}));\n }\n }\n\n _onFocusIn(e) {\n if (!this._isMousedown) {\n this._toggleAttribute('navigating', true, this);\n }\n\n const rootTarget = e.composedPath()[0];\n\n if (rootTarget === this.$.table ||\n rootTarget === this.$.focusexit) {\n // The focus enters the top (bottom) of the grid, meaning that user has\n // tabbed (shift-tabbed) into the grid. Move the focus to\n // the first (the last) focusable.\n this._predictFocusStepTarget(\n rootTarget,\n rootTarget === this.$.table ? 1 : -1\n ).focus();\n this._toggleAttribute('interacting', false, this);\n } else {\n this._detectInteracting(e);\n }\n }\n\n _onFocusOut(e) {\n this._toggleAttribute('navigating', false, this);\n this._detectInteracting(e);\n }\n\n _onCellFocusIn(e) {\n this._detectInteracting(e);\n\n if (e.composedPath().indexOf(this.$.table) === 3) {\n const cell = e.composedPath()[0];\n this._activeRowGroup = cell.parentNode.parentNode;\n if (this._activeRowGroup === this.$.header) {\n this._headerFocusable = cell;\n } else if (this._activeRowGroup === this.$.items) {\n this._itemsFocusable = cell;\n } else if (this._activeRowGroup === this.$.footer) {\n this._footerFocusable = cell;\n }\n // Inform cell content of the focus (used in )\n cell._content.dispatchEvent(new CustomEvent('cell-focusin', {bubbles: false}));\n }\n\n this._detectFocusedItemIndex(e);\n }\n\n _onCellFocusOut(e) {\n if (e.composedPath().indexOf(this.$.table) === 3) {\n const cell = e.composedPath()[0];\n // Inform cell content of the focus (used in )\n cell._content.dispatchEvent(new CustomEvent('cell-focusout', {bubbles: false}));\n }\n }\n\n _detectInteracting(e) {\n this._toggleAttribute('interacting',\n e.composedPath().some(el => el.localName === 'vaadin-grid-cell-content'),\n this);\n }\n\n _detectFocusedItemIndex(e) {\n const {rowGroup, row} = this._parseEventPath(e.composedPath());\n if (rowGroup === this.$.items) {\n this._focusedItemIndex = row.index;\n }\n }\n\n _preventScrollerRotatingCellFocus(item, index) {\n if (item.index === this._focusedItemIndex && this.hasAttribute('navigating') && this._activeRowGroup === this.$.items) {\n // Focused item has went, hide navigation mode\n this._navigatingIsHidden = true;\n this._toggleAttribute('navigating', false, this);\n }\n if (index === this._focusedItemIndex && this._navigatingIsHidden) {\n // Focused item is back, restore navigation mode\n this._navigatingIsHidden = false;\n this._toggleAttribute('navigating', true, this);\n }\n }\n\n _getColumns(rowGroup, rowIndex) {\n let columnTreeLevel = this._columnTree.length - 1;\n if (rowGroup === this.$.header) {\n columnTreeLevel = rowIndex;\n } else if (rowGroup === this.$.footer) {\n columnTreeLevel = this._columnTree.length - 1 - rowIndex;\n }\n return this._columnTree[columnTreeLevel];\n }\n\n _resetKeyboardNavigation() {\n if (this.$.header.firstElementChild) {\n this._headerFocusable = Array.from(this.$.header.firstElementChild.children).filter(el => !el.hidden)[0];\n }\n\n if (this.$.items.firstElementChild) {\n const firstVisibleIndexRow = this._iterateItems((pidx, vidx) => {\n if (this._firstVisibleIndex === vidx) {\n return this.$.items.children[pidx];\n }\n });\n if (firstVisibleIndexRow) {\n this._itemsFocusable = Array.from(firstVisibleIndexRow.children).filter(el => !el.hidden)[0];\n }\n }\n\n if (this.$.footer.firstElementChild) {\n this._footerFocusable = Array.from(this.$.footer.firstElementChild.children).filter(el => !el.hidden)[0];\n }\n }\n\n _scrollHorizontallyToCell(dstCell) {\n if (dstCell.hasAttribute('frozen') || this._elementMatches(dstCell, '[part~=\"details-cell\"]')) {\n // These cells are, by design, always visible, no need to scroll.\n return;\n }\n\n const dstCellRect = dstCell.getBoundingClientRect();\n const dstRow = dstCell.parentNode;\n const dstCellIndex = Array.from(dstRow.children).indexOf(dstCell);\n const tableRect = this.$.table.getBoundingClientRect();\n let leftBoundary = tableRect.left, rightBoundary = tableRect.right;\n for (let i = dstCellIndex - 1; i >= 0; i--) {\n const cell = dstRow.children[i];\n if (cell.hasAttribute('hidden') ||\n this._elementMatches(cell, '[part~=\"details-cell\"]')) {\n continue;\n }\n if (cell.hasAttribute('frozen')) {\n leftBoundary = cell.getBoundingClientRect().right;\n break;\n }\n }\n for (let i = dstCellIndex + 1; i < dstRow.children.length; i++) {\n const cell = dstRow.children[i];\n if (cell.hasAttribute('hidden') ||\n this._elementMatches(cell, '[part~=\"details-cell\"]')) {\n continue;\n }\n if (cell.hasAttribute('frozen')) {\n rightBoundary = cell.getBoundingClientRect().left;\n break;\n }\n }\n\n if (dstCellRect.left < leftBoundary) {\n this.$.table.scrollLeft += Math.round(dstCellRect.left - leftBoundary);\n }\n if (dstCellRect.right > rightBoundary) {\n this.$.table.scrollLeft += Math.round(dstCellRect.right - rightBoundary);\n }\n }\n\n _elementMatches(el, query) {\n return el.matches ? el.matches(query) :\n Array.from(el.parentNode.querySelectorAll(query)).indexOf(el) !== -1;\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 { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';\n\nimport { addListener } from '@polymer/polymer/lib/utils/gestures.js';\nimport { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';\nimport { useShadow } from '@polymer/polymer/lib/utils/settings.js';\n\n/**\n * @polymerMixin\n */\nexport const ColumnReorderingMixin = superClass => class ColumnReorderingMixin extends GestureEventListeners(superClass) {\n\n static get properties() {\n return {\n /**\n * Set to true to allow column reordering.\n */\n columnReorderingAllowed: {\n type: Boolean,\n value: false\n },\n\n _orderBaseScope: {\n type: Number,\n value: 10000000\n }\n };\n }\n\n static get observers() {\n return [\n '_updateOrders(_columnTree, _columnTree.*)'\n ];\n }\n\n ready() {\n super.ready();\n addListener(this, 'track', this._onTrackEvent);\n this._reorderGhost = this.shadowRoot.querySelector('[part=\"reorder-ghost\"]');\n\n this.addEventListener('touchstart', this._onTouchStart.bind(this));\n this.addEventListener('touchmove', this._onTouchMove.bind(this));\n this.addEventListener('touchend', this._onTouchEnd.bind(this));\n this.addEventListener('contextmenu', this._onContextMenu.bind(this));\n }\n\n _onContextMenu(e) {\n if (this.hasAttribute('reordering')) {\n e.preventDefault();\n }\n }\n\n _onTouchStart(e) {\n // Touch event, delay activation by 100ms\n this._startTouchReorderTimeout = setTimeout(() => {\n this._onTrackStart({\n detail: {\n x: e.touches[0].clientX,\n y: e.touches[0].clientY\n }\n });\n }, 100);\n }\n\n _onTouchMove(e) {\n if (this._draggedColumn) {\n e.preventDefault();\n }\n clearTimeout(this._startTouchReorderTimeout);\n }\n\n _onTouchEnd() {\n clearTimeout(this._startTouchReorderTimeout);\n this._onTrackEnd();\n }\n\n _onTrackEvent(e) {\n if (e.detail.state === 'start') {\n const path = e.composedPath();\n const headerCell = path[path.indexOf(this.$.header) - 2];\n if (!headerCell || !headerCell._content) {\n // Not a header column\n return;\n }\n\n const activeElement = this.getRootNode().activeElement;\n if (headerCell._content.contains(this.getRootNode().activeElement)\n && (!this._ie || !this._isFocusable(activeElement))) {\n // Something was focused inside the cell\n return;\n }\n\n if (this.$.scroller.hasAttribute('column-resizing')) {\n // Resizing is in progress\n return;\n }\n\n if (!this._touchDevice) {\n // Not a touch device\n this._onTrackStart(e);\n }\n } else if (e.detail.state === 'track') {\n this._onTrack(e);\n } else if (e.detail.state === 'end') {\n this._onTrackEnd(e);\n }\n }\n\n _onTrackStart(e) {\n if (!this.columnReorderingAllowed) {\n return;\n }\n\n // Cancel reordering if there are draggable nodes on the event path\n const path = e.path || dom(e).path;\n if (path && path.filter(node => node.hasAttribute && node.hasAttribute('draggable'))[0]) {\n return;\n }\n\n const headerCell = this._cellFromPoint(e.detail.x, e.detail.y);\n if (!headerCell || headerCell.getAttribute('part').indexOf('header-cell') === -1) {\n return;\n }\n\n this._toggleAttribute('reordering', true, this);\n this._draggedColumn = headerCell._column;\n while (this._draggedColumn.parentElement.childElementCount === 1) {\n // This is the only column in the group, drag the whole group instead\n this._draggedColumn = this._draggedColumn.parentElement;\n }\n this._setSiblingsReorderStatus(this._draggedColumn, 'allowed');\n this._draggedColumn._reorderStatus = 'dragging';\n\n this._updateGhost(headerCell);\n this._reorderGhost.style.visibility = 'visible';\n this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);\n this._autoScroller();\n }\n\n _onTrack(e) {\n if (!this._draggedColumn) {\n // Reordering didn’t start. Skip this event.\n return;\n }\n\n const targetCell = this._cellFromPoint(e.detail.x, e.detail.y);\n if (!targetCell) {\n return;\n }\n\n const targetColumn = this._getTargetColumn(targetCell, this._draggedColumn);\n if (this._isSwapAllowed(this._draggedColumn, targetColumn) &&\n this._isSwappableByPosition(targetColumn, e.detail.x)) {\n this._swapColumnOrders(this._draggedColumn, targetColumn);\n }\n\n this._updateGhostPosition(e.detail.x, this._touchDevice ? e.detail.y - 50 : e.detail.y);\n this._lastDragClientX = e.detail.x;\n }\n\n _onTrackEnd() {\n if (!this._draggedColumn) {\n // Reordering didn’t start. Skip this event.\n return;\n }\n\n this._toggleAttribute('reordering', false, this);\n this._draggedColumn._reorderStatus = '';\n this._setSiblingsReorderStatus(this._draggedColumn, '');\n this._draggedColumn = null;\n this._lastDragClientX = null;\n this._reorderGhost.style.visibility = 'hidden';\n\n this.dispatchEvent(new CustomEvent('column-reorder', {detail: {\n columns: this._getColumnsInOrder()\n }}));\n }\n\n _getColumnsInOrder() {\n return this._columnTree.slice(0).pop()\n .filter(c => !c.hidden)\n .sort((b, a) => (b._order - a._order));\n }\n\n _cellFromPoint(x, y) {\n x = x || 0;\n y = y || 0;\n if (!this._draggedColumn) {\n this._toggleAttribute('no-content-pointer-events', true, this.$.scroller);\n }\n let cell;\n if (useShadow) {\n cell = this.shadowRoot.elementFromPoint(x, y);\n } else {\n cell = document.elementFromPoint(x, y);\n\n // Workaround a FF58 bug\n if (cell.localName === 'vaadin-grid-cell-content') {\n cell = cell.assignedSlot.parentNode;\n }\n\n }\n this._toggleAttribute('no-content-pointer-events', false, this.$.scroller);\n\n // Make sure the element is actually a cell\n if (cell && cell._column) {\n return cell;\n }\n }\n\n _updateGhostPosition(eventClientX, eventClientY) {\n const ghostRect = this._reorderGhost.getBoundingClientRect();\n // // This is where we want to position the ghost\n const targetLeft = eventClientX - ghostRect.width / 2;\n const targetTop = eventClientY - ghostRect.height / 2;\n // Current position\n const _left = parseInt(this._reorderGhost._left || 0);\n const _top = parseInt(this._reorderGhost._top || 0);\n // Reposition the ghost\n this._reorderGhost._left = _left - (ghostRect.left - targetLeft);\n this._reorderGhost._top = _top - (ghostRect.top - targetTop);\n this._reorderGhost.style.transform = `translate(${this._reorderGhost._left}px, ${this._reorderGhost._top}px)`;\n }\n\n _getInnerText(e) {\n if (e.localName) {\n // Custom implementation needed since IE11 doesn't respect the spec in case of hidden elements\n if (getComputedStyle(e).display === 'none') {\n return '';\n } else {\n return Array.from(e.childNodes).map(n => this._getInnerText(n)).join('');\n }\n } else {\n return e.textContent;\n }\n }\n\n _updateGhost(cell) {\n const ghost = this._reorderGhost;\n ghost.textContent = this._getInnerText(cell._content);\n const style = window.getComputedStyle(cell);\n ['boxSizing', 'display', 'width', 'height', 'background', 'alignItems', 'padding', 'border', 'flex-direction', 'overflow']\n .forEach(propertyName => ghost.style[propertyName] = style[propertyName]);\n return ghost;\n }\n\n _updateOrders(columnTree, splices) {\n if (columnTree === undefined || splices === undefined) {\n return;\n }\n\n // Set order numbers to top-level columns\n columnTree[0].forEach((column, index) => column._order = (index + 1) * this._orderBaseScope);\n }\n\n _setSiblingsReorderStatus(column, status) {\n Array.from(column.parentNode.children)\n .filter(child => /column/.test(child.localName) && this._isSwapAllowed(child, column))\n .forEach(sibling => sibling._reorderStatus = status);\n }\n\n _autoScroller() {\n if (this._lastDragClientX) {\n const rightDiff = this._lastDragClientX - this.getBoundingClientRect().right + 50;\n const leftDiff = this.getBoundingClientRect().left - this._lastDragClientX + 50;\n\n if (rightDiff > 0) {\n this.$.table.scrollLeft += rightDiff / 10;\n } else if (leftDiff > 0) {\n this.$.table.scrollLeft -= leftDiff / 10;\n }\n this._scrollHandler();\n }\n\n if (this._draggedColumn) {\n this.async(this._autoScroller, 10);\n }\n }\n\n _isSwapAllowed(column1, column2) {\n if (column1 && column2) {\n const differentColumns = column1 !== column2;\n const sameParent = column1.parentElement === column2.parentElement;\n const sameFrozen = column1.frozen === column2.frozen;\n return differentColumns && sameParent && sameFrozen;\n }\n }\n\n _isSwappableByPosition(targetColumn, clientX) {\n const targetCell =\n Array.from(this.$.header.querySelectorAll('tr:not([hidden]) [part~=\"cell\"]')).filter(cell => targetColumn.contains(cell._column))[0];\n const sourceCellRect = this.$.header.querySelector('tr:not([hidden]) [reorder-status=dragging]').getBoundingClientRect();\n const targetRect = targetCell.getBoundingClientRect();\n if (targetRect.left > sourceCellRect.left) {\n return clientX > targetRect.right - sourceCellRect.width;\n } else {\n return clientX < targetRect.left + sourceCellRect.width;\n }\n }\n\n _swapColumnOrders(column1, column2) {\n const _order = column1._order;\n column1._order = column2._order;\n column2._order = _order;\n this._updateLastFrozen();\n this._updateFirstAndLastColumn();\n }\n\n _getTargetColumn(targetCell, draggedColumn) {\n if (targetCell && draggedColumn) {\n let candidate = targetCell._column;\n while (candidate.parentElement !== draggedColumn.parentElement && candidate !== this) {\n candidate = candidate.parentElement;\n }\n if (candidate.parentElement === draggedColumn.parentElement) {\n return candidate;\n } else {\n return targetCell._column;\n }\n }\n }\n\n};\n","/**\n@license\nCopyright (c) 2018 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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';\nimport { Templatizer } from './vaadin-grid-templatizer.js';\n\n/**\n * @polymerMixin\n */\nexport const ColumnBaseMixin = superClass => class ColumnBaseMixin extends superClass {\n static get properties() {\n return {\n /**\n * When set to true, the column is user-resizable.\n * @default false\n */\n resizable: {\n type: Boolean,\n value: function() {\n if (this.localName === 'vaadin-grid-column-group') {\n return;\n }\n\n const parent = this.parentNode;\n if (parent && parent.localName === 'vaadin-grid-column-group') {\n return parent.resizable || false;\n } else {\n return false;\n }\n }\n },\n\n _headerTemplate: {\n type: Object\n },\n\n _footerTemplate: {\n type: Object\n },\n\n /**\n * When true, the column is frozen. When a column inside of a column group is frozen,\n * all of the sibling columns inside the group will get frozen also.\n */\n frozen: {\n type: Boolean,\n value: false\n },\n\n /**\n * When set to true, the cells for this column are hidden.\n */\n hidden: {\n type: Boolean\n },\n\n /**\n * Text content to display in the header cell of the column.\n */\n header: {\n type: String\n },\n\n /**\n * Aligns the columns cell content horizontally.\n * Supported values: \"start\", \"center\" and \"end\".\n */\n textAlign: {\n type: String\n },\n\n _lastFrozen: {\n type: Boolean,\n value: false\n },\n\n _order: Number,\n\n _reorderStatus: Boolean,\n\n _emptyCells: Array,\n\n _headerCell: Object,\n\n _footerCell: Object,\n\n _grid: Object,\n\n /**\n * Custom function for rendering the header content.\n * Receives two arguments:\n *\n * - `root` The header cell content DOM element. Append your content to it.\n * - `column` The `` element.\n */\n headerRenderer: Function,\n\n /**\n * Custom function for rendering the footer content.\n * Receives two arguments:\n *\n * - `root` The footer cell content DOM element. Append your content to it.\n * - `column` The `` element.\n */\n footerRenderer: Function\n };\n }\n\n static get observers() {\n return [\n '_widthChanged(width, _headerCell, _footerCell, _cells.*)',\n '_frozenChanged(frozen, _headerCell, _footerCell, _cells.*)',\n '_flexGrowChanged(flexGrow, _headerCell, _footerCell, _cells.*)',\n '_pathOrHeaderChanged(path, header, _headerCell, _footerCell, _cells.*, renderer, headerRenderer, _bodyTemplate, _headerTemplate)',\n '_textAlignChanged(textAlign, _cells.*, _headerCell, _footerCell)',\n '_orderChanged(_order, _headerCell, _footerCell, _cells.*)',\n '_lastFrozenChanged(_lastFrozen)',\n '_setBodyTemplateOrRenderer(_bodyTemplate, renderer, _cells, _cells.*)',\n '_setHeaderTemplateOrRenderer(_headerTemplate, headerRenderer, _headerCell)',\n '_setFooterTemplateOrRenderer(_footerTemplate, footerRenderer, _footerCell)',\n '_resizableChanged(resizable, _headerCell)',\n '_reorderStatusChanged(_reorderStatus, _headerCell, _footerCell, _cells.*)',\n '_hiddenChanged(hidden, _headerCell, _footerCell, _cells.*)'\n ];\n }\n\n /** @protected */\n connectedCallback() {\n super.connectedCallback();\n\n this._bodyTemplate && (this._bodyTemplate.templatizer._grid = this._grid);\n this._headerTemplate && (this._headerTemplate.templatizer._grid = this._grid);\n this._footerTemplate && (this._footerTemplate.templatizer._grid = this._grid);\n\n this._templateObserver.flush();\n if (!this._bodyTemplate) {\n // The observer might not have triggered if the tag is empty. Run manually.\n this._templateObserver.callback();\n }\n\n requestAnimationFrame(() => {\n this._allCells.forEach(cell => {\n if (!cell._content.parentNode) {\n this._grid && this._grid.appendChild(cell._content);\n }\n });\n });\n }\n\n /** @protected */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n requestAnimationFrame(() => {\n if (!this._findHostGrid()) {\n this._allCells.forEach(cell => {\n if (cell._content.parentNode) {\n cell._content.parentNode.removeChild(cell._content);\n }\n });\n }\n });\n\n this._gridValue = undefined;\n }\n\n _findHostGrid() {\n let el = this;\n // Custom elements extending grid must have a specific localName\n while (el && !/^vaadin.*grid(-pro)?$/.test(el.localName)) {\n el = el.assignedSlot ? el.assignedSlot.parentNode : el.parentNode;\n }\n return el || undefined;\n }\n\n get _grid() {\n if (!this._gridValue) {\n this._gridValue = this._findHostGrid();\n }\n return this._gridValue;\n }\n\n get _allCells() {\n return []\n .concat(this._cells || [])\n .concat(this._emptyCells || [])\n .concat(this._headerCell)\n .concat(this._footerCell)\n .filter(cell => cell);\n }\n\n constructor() {\n super();\n\n this._templateObserver = new FlattenedNodesObserver(this, info => {\n this._headerTemplate = this._prepareHeaderTemplate();\n this._footerTemplate = this._prepareFooterTemplate();\n this._bodyTemplate = this._prepareBodyTemplate();\n });\n }\n\n _prepareHeaderTemplate() {\n return this._prepareTemplatizer(this._findTemplate(true) || null, {});\n }\n\n _prepareFooterTemplate() {\n return this._prepareTemplatizer(this._findTemplate(false, true) || null, {});\n }\n\n _prepareBodyTemplate() {\n return this._prepareTemplatizer(this._findTemplate() || null);\n }\n\n _prepareTemplatizer(template, instanceProps) {\n if (template && !template.templatizer) {\n const templatizer = new Templatizer();\n templatizer._grid = this._grid;\n templatizer.dataHost = this.dataHost;\n templatizer._instanceProps = instanceProps || templatizer._instanceProps;\n templatizer.template = template;\n template.templatizer = templatizer;\n }\n\n return template;\n }\n\n _renderHeaderAndFooter() {\n if (this.headerRenderer) {\n this.__runRenderer(this.headerRenderer, this._headerCell);\n }\n if (this.footerRenderer) {\n this.__runRenderer(this.footerRenderer, this._footerCell);\n }\n }\n\n __runRenderer(renderer, cell, rowData) {\n const args = [cell._content, this];\n if (rowData && rowData.item) {\n args.push(rowData);\n }\n renderer.apply(this, args);\n }\n\n __setColumnTemplateOrRenderer(template, renderer, cells) {\n if (template && renderer) {\n throw new Error('You should only use either a renderer or a template');\n }\n\n cells.forEach(cell => {\n const model = this._grid.__getRowModel(cell.parentElement);\n\n if (renderer) {\n cell._renderer = renderer;\n\n if (model.item || renderer === this.headerRenderer || renderer === this.footerRenderer) {\n this.__runRenderer(renderer, cell, model);\n }\n } else if (cell._template !== template) {\n cell._template = template;\n\n cell._content.innerHTML = '';\n template.templatizer._grid = template.templatizer._grid || this._grid;\n const inst = template.templatizer.createInstance();\n cell._content.appendChild(inst.root);\n cell._instance = inst;\n if (model.item) {\n cell._instance.setProperties(model);\n }\n }\n });\n }\n\n _setBodyTemplateOrRenderer(template, renderer, cells, splices) {\n if ((template || renderer) && cells) {\n this.__setColumnTemplateOrRenderer(template, renderer, cells);\n }\n }\n\n _setHeaderTemplateOrRenderer(headerTemplate, headerRenderer, headerCell) {\n if ((headerTemplate || headerRenderer) && headerCell) {\n this.__setColumnTemplateOrRenderer(headerTemplate, headerRenderer, [headerCell]);\n }\n }\n\n _setFooterTemplateOrRenderer(footerTemplate, footerRenderer, footerCell) {\n if ((footerTemplate || footerRenderer) && footerCell) {\n this.__setColumnTemplateOrRenderer(footerTemplate, footerRenderer, [footerCell]);\n this._grid.__updateHeaderFooterRowVisibility(footerCell.parentElement);\n }\n }\n\n _selectFirstTemplate(header = false, footer = false) {\n return FlattenedNodesObserver.getFlattenedNodes(this)\n .filter(node =>\n node.localName === 'template'\n && node.classList.contains('header') === header\n && node.classList.contains('footer') === footer\n )[0];\n }\n\n _findTemplate(header, footer) {\n const template = this._selectFirstTemplate(header, footer);\n if (template) {\n if (this.dataHost) {\n // set dataHost to the context where template has been defined\n template._rootDataHost = this.dataHost._rootDataHost || this.dataHost;\n }\n }\n return template;\n }\n\n _flexGrowChanged(flexGrow, headerCell, footerCell, cells) {\n if (this.parentElement && this.parentElement._columnPropChanged) {\n this.parentElement._columnPropChanged('flexGrow');\n }\n\n this._allCells.forEach(cell => cell.style.flexGrow = flexGrow);\n }\n\n _orderChanged(order, headerCell, footerCell, cells) {\n this._allCells.forEach(cell => cell.style.order = order);\n }\n\n _widthChanged(width, headerCell, footerCell, cells) {\n if (this.parentElement && this.parentElement._columnPropChanged) {\n this.parentElement._columnPropChanged('width');\n }\n\n this._allCells.forEach(cell => cell.style.width = width);\n\n // Force a reflow to workaround browser issues causing double scrollbars to grid\n // https://github.com/vaadin/vaadin-grid/issues/1586\n if (this._grid && this._grid.__forceReflow) {\n this._grid.__forceReflow();\n }\n }\n\n _frozenChanged(frozen, headerCell, footerCell, cells) {\n if (this.parentElement && this.parentElement._columnPropChanged) {\n this.parentElement._columnPropChanged('frozen', frozen);\n }\n\n this._allCells.forEach(cell => this._toggleAttribute('frozen', frozen, cell));\n\n this._grid && this._grid._frozenCellsChanged && this._grid._frozenCellsChanged();\n }\n\n _lastFrozenChanged(lastFrozen) {\n this._allCells.forEach(cell => this._toggleAttribute('last-frozen', lastFrozen, cell));\n\n if (this.parentElement && this.parentElement._columnPropChanged) {\n this.parentElement._lastFrozen = lastFrozen;\n }\n }\n\n _pathOrHeaderChanged(path, header, headerCell, footerCell, cells, renderer, headerRenderer, bodyTemplate, headerTemplate) {\n const hasHeaderText = header !== undefined;\n if (!headerRenderer && !headerTemplate && hasHeaderText && headerCell) {\n this.__setTextContent(headerCell._content, header);\n }\n\n if (path && cells.value) {\n if (!renderer && !bodyTemplate) {\n const pathRenderer = (root, owner, {item}) => this.__setTextContent(root, this.get(path, item));\n this.__setColumnTemplateOrRenderer(undefined, pathRenderer, cells.value);\n }\n\n if (!headerRenderer && !headerTemplate && !hasHeaderText && headerCell && header !== null) {\n this.__setTextContent(headerCell._content, this._generateHeader(path));\n }\n }\n\n if (headerCell) {\n this._grid.__updateHeaderFooterRowVisibility(headerCell.parentElement);\n }\n }\n\n __setTextContent(node, textContent) {\n node.textContent !== textContent && (node.textContent = textContent);\n }\n\n _generateHeader(path) {\n return path\n .substr(path.lastIndexOf('.') + 1)\n .replace(/([A-Z])/g, '-$1').toLowerCase()\n .replace(/-/g, ' ')\n .replace(/^./, match => match.toUpperCase());\n }\n\n _toggleAttribute(name, bool, node) {\n if (node.hasAttribute(name) === !bool) {\n if (bool) {\n node.setAttribute(name, '');\n } else {\n node.removeAttribute(name);\n }\n }\n }\n\n _reorderStatusChanged(reorderStatus, headerCell, footerCell, cells) {\n this._allCells.forEach(cell => cell.setAttribute('reorder-status', reorderStatus));\n }\n\n _resizableChanged(resizable, headerCell) {\n if (resizable === undefined || headerCell === undefined) {\n return;\n }\n\n if (headerCell) {\n [headerCell].concat(this._emptyCells).forEach(cell => {\n if (cell) {\n const existingHandle = cell.querySelector('[part~=\"resize-handle\"]');\n if (existingHandle) {\n cell.removeChild(existingHandle);\n }\n\n if (resizable) {\n const handle = document.createElement('div');\n handle.setAttribute('part', 'resize-handle');\n cell.appendChild(handle);\n }\n }\n });\n }\n }\n\n _textAlignChanged(textAlign, _cells, _headerCell, _footerCell) {\n if (textAlign === undefined) {\n return;\n }\n if (['start', 'end', 'center'].indexOf(textAlign) === -1) {\n console.warn('textAlign can only be set as \"start\", \"end\" or \"center\"');\n return;\n }\n\n let textAlignFallback;\n if (getComputedStyle(this._grid).direction === 'ltr') {\n if (textAlign === 'start') {\n textAlignFallback = 'left';\n } else if (textAlign === 'end') {\n textAlignFallback = 'right';\n }\n } else {\n if (textAlign === 'start') {\n textAlignFallback = 'right';\n } else if (textAlign === 'end') {\n textAlignFallback = 'left';\n }\n }\n\n this._allCells.forEach(cell => {\n cell._content.style.textAlign = textAlign;\n if (getComputedStyle(cell._content).textAlign !== textAlign) {\n cell._content.style.textAlign = textAlignFallback;\n }\n });\n }\n\n _hiddenChanged(hidden, headerCell, footerCell, cells) {\n if (this.parentElement && this.parentElement._columnPropChanged) {\n this.parentElement._columnPropChanged('hidden', hidden);\n }\n\n this._allCells.forEach(cell => this._toggleAttribute('hidden', hidden, cell));\n\n if (!!hidden !== !!this._previousHidden && this._grid) {\n this._grid._updateLastFrozen && this._grid._updateLastFrozen();\n this._grid.notifyResize && this._grid.notifyResize();\n this._grid._resetKeyboardNavigation && this._grid._resetKeyboardNavigation();\n }\n this._previousHidden = hidden;\n }\n\n};\n\n/**\n * A `` is used to configure how a column in ``\n * should look like.\n *\n * See `` documentation and demos for instructions and examples on how\n * to configure the ``.\n * ```\n *\n * @memberof Vaadin\n * @mixes Vaadin.Grid.ColumnBaseMixin\n */\nclass GridColumnElement extends ColumnBaseMixin(PolymerElement) {\n static get is() {\n return 'vaadin-grid-column';\n }\n\n static get properties() {\n return {\n /**\n * Width of the cells for this column.\n */\n width: {\n type: String,\n value: '100px'\n },\n\n /**\n * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.\n */\n flexGrow: {\n type: Number,\n value: 1\n },\n\n /**\n * Custom function for rendering the cell content.\n * Receives three arguments:\n *\n * - `root` The cell content DOM element. Append your content to it.\n * - `column` The `` element.\n * - `rowData` The object with the properties related with\n * the rendered item, contains:\n * - `rowData.index` The index of the item.\n * - `rowData.item` The item.\n * - `rowData.expanded` Sublevel toggle state.\n * - `rowData.level` Level of the tree represented with a horizontal offset of the toggle button.\n * - `rowData.selected` Selected state.\n */\n renderer: Function,\n\n /**\n * Path to an item sub-property whose value gets displayed in the column body cells.\n * The property name is also shown in the column header if an explicit header or renderer isn't defined.\n */\n path: {\n type: String\n },\n\n /**\n * Automatically sets the width of the column based on the column contents when this is set to `true`.\n *\n * For performance reasons the column width is calculated automatically only once when the grid items\n * are rendered for the first time and the calculation only considers the rows which are currently\n * rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell\n * content changes, the column width might not match the contents anymore.\n *\n * Hidden columns are ignored in the calculation and their widths are not automatically updated when\n * you show a column that was initially hidden.\n *\n * You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.\n *\n * The column width may still grow larger when `flexGrow` is not 0.\n */\n autoWidth: {\n type: Boolean,\n value: false\n },\n\n _bodyTemplate: {\n type: Object\n },\n\n _cells: Array\n\n };\n }\n\n}\n\ncustomElements.define(GridColumnElement.is, GridColumnElement);\nexport { GridColumnElement };\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 { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * This Element is used internally by vaadin-grid.\n *\n * @private\n */\nclass GridOuterScrollerElement extends (class extends PolymerElement {}) {\n static get template() {\n return html`\n \n\n \n`;\n }\n\n static get is() {\n return 'vaadin-grid-outer-scroller';\n }\n\n static get properties() {\n return {\n\n scrollTarget: {\n type: Object\n },\n\n scrollHandler: {\n type: Object\n },\n\n passthrough: {\n type: Boolean,\n reflectToAttribute: true,\n value: true\n },\n\n outerScrolling: Boolean,\n\n noScrollbars: Boolean,\n\n _touchDevice: Boolean\n };\n }\n\n ready() {\n super.ready();\n this.addEventListener('scroll', () => this._syncScrollTarget());\n this.parentElement.addEventListener('mousemove', this._onMouseMove.bind(this));\n\n // for some reason scroll bars are hidden in iOS if this style is\n // added in stylesheets or before attaching.\n this.style.webkitOverflowScrolling = 'touch';\n\n this.addEventListener('mousedown', _ => this.outerScrolling = true);\n this.addEventListener('mouseup', _ => {\n this.outerScrolling = false;\n this.scrollHandler._scrollHandler();\n });\n }\n\n _onMouseMove(e) {\n // Ignore mousemove events on touch devices\n if (!this._touchDevice) {\n if (this.noScrollbars && this.parentElement.hasAttribute('scroll-period')) {\n this.passthrough = e.offsetY <= this.clientHeight - 20 && e.offsetX <= this.clientWidth - 20;\n } else {\n this.passthrough = e.offsetY <= this.clientHeight && e.offsetX <= this.clientWidth;\n }\n }\n }\n\n syncOuterScroller() {\n this.scrollTop = this.scrollTarget.scrollTop;\n this.scrollLeft = this.scrollTarget.scrollLeft;\n }\n\n _syncScrollTarget() {\n requestAnimationFrame(() => {\n this.scrollTarget.scrollTop = this.scrollTop;\n this.scrollTarget.scrollLeft = this.scrollLeft;\n this.scrollHandler._scrollHandler();\n });\n\n }\n}\n\ncustomElements.define(GridOuterScrollerElement.is, GridOuterScrollerElement);\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 '@polymer/polymer/lib/elements/dom-module.js';\n\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nconst VaadinGridStyles = document.createElement('dom-module');\n\n// NOTE(web-padawan): https://github.com/vaadin/vaadin-grid/issues/1514\nVaadinGridStyles.appendChild(\n html`\n \n`);\n\nconst safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\nconst firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n\nif (safari || firefox) {\n const scrollingStyles = document.createElement('style');\n scrollingStyles.textContent = `\n [scrolling][safari] #outerscroller,\n [scrolling][firefox] #outerscroller {\n pointer-events: auto;\n }\n\n [ios] #outerscroller {\n pointer-events: auto;\n z-index: -3;\n }\n\n [ios][scrolling] #outerscroller {\n z-index: 0;\n }\n `;\n VaadinGridStyles.querySelector('template').content.appendChild(scrollingStyles);\n}\n\nVaadinGridStyles.register('vaadin-grid-styles');\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 '@polymer/polymer/polymer-legacy.js';\n\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { ScrollerElement } from './vaadin-grid-scroller.js';\nimport { A11yMixin } from './vaadin-grid-a11y-mixin.js';\nimport { ActiveItemMixin } from './vaadin-grid-active-item-mixin.js';\nimport { ArrayDataProviderMixin } from './vaadin-grid-array-data-provider-mixin.js';\nimport { ColumnResizingMixin } from './vaadin-grid-column-resizing-mixin.js';\nimport { DataProviderMixin } from './vaadin-grid-data-provider-mixin.js';\nimport { DynamicColumnsMixin } from './vaadin-grid-dynamic-columns-mixin.js';\nimport { EventContextMixin } from './vaadin-grid-event-context-mixin.js';\nimport { FilterMixin } from './vaadin-grid-filter-mixin.js';\nimport { RowDetailsMixin } from './vaadin-grid-row-details-mixin.js';\nimport { ScrollMixin } from './vaadin-grid-scroll-mixin.js';\nimport { SelectionMixin } from './vaadin-grid-selection-mixin.js';\nimport { SortMixin } from './vaadin-grid-sort-mixin.js';\nimport { StylingMixin } from './vaadin-grid-styling-mixin.js';\nimport { DragAndDropMixin } from './vaadin-grid-drag-and-drop-mixin.js';\nimport { KeyboardNavigationMixin } from './vaadin-grid-keyboard-navigation-mixin.js';\nimport { ColumnReorderingMixin } from './vaadin-grid-column-reordering-mixin.js';\nimport './vaadin-grid-column.js';\nimport './vaadin-grid-outer-scroller.js';\nimport './vaadin-grid-styles.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { beforeNextRender, afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';\nimport { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\nimport { timeOut, animationFrame } from '@polymer/polymer/lib/utils/async.js';\n\nconst TOUCH_DEVICE = (() => {\n try {\n document.createEvent('TouchEvent');\n return true;\n } catch (e) {\n return false;\n }\n})();\n\n/**\n *\n * `` is a free, high quality data grid / data table Web Component. The content of the\n * the grid can be populated in two ways: imperatively by using renderer callback function and\n * declaratively by using Polymer's Templates.\n *\n * ### Quick Start\n *\n * Start with an assigning an array to the [`items`](#/elements/vaadin-grid#property-items) property to visualize your data.\n *\n * Use the [``](#/elements/vaadin-grid-column) element to configure the grid columns. Set `path` and `header`\n * shorthand properties for the columns to define what gets rendered in the cells of the column.\n *\n * #### Example:\n * ```html\n * \n * \n * \n * \n * \n * ```\n *\n * For custom content `vaadin-grid-column` element provides you with three types of `renderer` callback functions: `headerRenderer`,\n * `renderer` and `footerRenderer`.\n *\n * Each of those renderer functions provides `root`, `column`, `rowData` arguments when applicable.\n * Generate DOM content, append it to the `root` element and control the state\n * of the host element by accessing `column`. Before generating new content,\n * users are able to check if there is already content in `root` for reusing it.\n *\n * Renderers are called on initialization of new column cells and each time the\n * related row data is updated. DOM generated during the renderer call can be reused\n * in the next renderer call and will be provided with the `root` argument.\n * On first call it will be empty.\n *\n * #### Example:\n * ```html\n * \n * \n * \n * \n * \n * ```\n * ```js\n * const grid = document.querySelector('vaadin-grid');\n * grid.items = [{'name': 'John', 'surname': 'Lennon', 'role': 'singer'},\n * {'name': 'Ringo', 'surname': 'Starr', 'role': 'drums'}];\n *\n * const columns = grid.querySelectorAll('vaadin-grid-column');\n *\n * columns[0].headerRenderer = function(root) {\n * root.textContent = 'Name';\n * };\n * columns[0].renderer = function(root, column, rowData) {\n * root.textContent = rowData.item.name;\n * };\n *\n * columns[1].headerRenderer = function(root) {\n * root.textContent = 'Surname';\n * };\n * columns[1].renderer = function(root, column, rowData) {\n * root.textContent = rowData.item.surname;\n * };\n *\n * columns[2].headerRenderer = function(root) {\n * root.textContent = 'Role';\n * };\n * columns[2].renderer = function(root, column, rowData) {\n * root.textContent = rowData.item.role;\n * };\n * ```\n *\n * Alternatively, the content can be provided with Polymer's Templates:\n *\n * #### Example:\n * ```html\n * \n * \n * \n * [[item.name]]\n * \n * \n * \n * [[item.surname]]\n * \n * \n * \n * [[item.role]]\n * \n * \n * ```\n *\n * The following helper elements can be used for further customization:\n * - [``](#/elements/vaadin-grid-column-group)\n * - [``](#/elements/vaadin-grid-filter)\n * - [``](#/elements/vaadin-grid-sorter)\n * - [``](#/elements/vaadin-grid-selection-column)\n * - [``](#/elements/vaadin-grid-tree-toggle)\n *\n * __Note that the helper elements must be explicitly imported.__\n * If you want to import everything at once you can use the `all-imports.html` bundle.\n *\n * A column template can be decorated with one the following class names to specify its purpose\n * - `header`: Marks a header template\n * - `footer`: Marks a footer template\n * - `row-details`: Marks a row details template\n *\n * The following built-in template variables can be bound to inside the column templates:\n * - `[[index]]`: Number representing the row index\n * - `[[item]]` and it's sub-properties: Data object (provided by a data provider / items array)\n * - `{{selected}}`: True if the item is selected (can be two-way bound)\n * - `{{detailsOpened}}`: True if the item has row details opened (can be two-way bound)\n * - `{{expanded}}`: True if the item has tree sublevel expanded (can be two-way bound)\n * - `[[level]]`: Number of the tree sublevel of the item, first level-items have 0\n *\n * ### Lazy Loading with Function Data Provider\n *\n * In addition to assigning an array to the items property, you can alternatively\n * provide the `` data through the\n * [`dataProvider`](#/elements/vaadin-grid#property-dataProvider) function property.\n * The `` calls this function lazily, only when it needs more data\n * to be displayed.\n *\n * See the [`dataProvider`](#/elements/vaadin-grid#property-dataProvider) in\n * the API reference below for the detailed data provider arguments description,\n * and the “Assigning Data” page in the demos.\n *\n * __Note that expanding the tree grid's item will trigger a call to the `dataProvider`.__\n *\n * __Also, note that when using function data providers, the total number of items\n * needs to be set manually. The total number of items can be returned\n * in the second argument of the data provider callback:__\n *\n * ```javascript\n * grid.dataProvider = function(params, callback) {\n * var url = 'https://api.example/data' +\n * '?page=' + params.page + // the requested page index\n * '&per_page=' + params.pageSize; // number of items on the page\n * var xhr = new XMLHttpRequest();\n * xhr.onload = function() {\n * var response = JSON.parse(xhr.responseText);\n * callback(\n * response.employees, // requested page of items\n * response.totalSize // total number of items\n * );\n * };\n * xhr.open('GET', url, true);\n * xhr.send();\n * };\n * ```\n *\n * __Alternatively, you can use the `size` property to set the total number of items:__\n *\n * ```javascript\n * grid.size = 200; // The total number of items\n * grid.dataProvider = function(params, callback) {\n * var url = 'https://api.example/data' +\n * '?page=' + params.page + // the requested page index\n * '&per_page=' + params.pageSize; // number of items on the page\n * var xhr = new XMLHttpRequest();\n * xhr.onload = function() {\n * var response = JSON.parse(xhr.responseText);\n * callback(response.employees);\n * };\n * xhr.open('GET', url, true);\n * xhr.send();\n * };\n * ```\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ----------------|----------------\n * `row` | Row in the internal table\n * `cell` | Cell in the internal table\n * `header-cell` | Header cell in the internal table\n * `body-cell` | Body cell in the internal table\n * `footer-cell` | Footer cell in the internal table\n * `details-cell` | Row details cell in the internal table\n * `resize-handle` | Handle for resizing the columns\n * `reorder-ghost` | Ghost element of the header cell being dragged\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -------------|-------------|------------\n * `loading` | Set when the grid is loading data from data provider | :host\n * `interacting` | Keyboard navigation in interaction mode | :host\n * `navigating` | Keyboard navigation in navigation mode | :host\n * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `left`, `right` | :host\n * `reordering` | Set when the grid's columns are being reordered | :host\n * `dragover` | Set when the grid (not a specific row) is dragged over | :host\n * `dragging-rows` : Set when grid rows are dragged | :host\n * `reorder-status` | Reflects the status of a cell while columns are being reordered | cell\n * `frozen` | Frozen cell | cell\n * `last-frozen` | Last frozen cell | cell\n* * `first-column` | First visible cell on a row | cell\n * `last-column` | Last visible cell on a row | cell\n * `selected` | Selected row | row\n * `expanded` | Expanded row | row\n * `details-opened` | Row with details open | row\n * `loading` | Row that is waiting for data from data provider | row\n * `odd` | Odd row | row\n * `first` | The first body row | row\n * `dragstart` | Set for one frame when drag of a row is starting. The value is a number when multiple rows are dragged | row\n * `dragover` | Set when the row is dragged over | row\n * `drag-disabled` | Set to a row that isn't available for dragging | row\n * `drop-disabled` | Set to a row that can't be dropped on top of | row\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @mixes Vaadin.ThemableMixin\n * @mixes Vaadin.Grid.A11yMixin\n * @mixes Vaadin.Grid.ActiveItemMixin\n * @mixes Vaadin.Grid.ArrayDataProviderMixin\n * @mixes Vaadin.Grid.ColumnResizingMixin\n * @mixes Vaadin.Grid.DataProviderMixin\n * @mixes Vaadin.Grid.DynamicColumnsMixin\n * @mixes Vaadin.Grid.FilterMixin\n * @mixes Vaadin.Grid.RowDetailsMixin\n * @mixes Vaadin.Grid.ScrollMixin\n * @mixes Vaadin.Grid.SelectionMixin\n * @mixes Vaadin.Grid.SortMixin\n * @mixes Vaadin.Grid.KeyboardNavigationMixin\n * @mixes Vaadin.Grid.ColumnReorderingMixin\n * @mixes Vaadin.Grid.EventContextMixin\n * @mixes Vaadin.Grid.StylingMixin\n * @mixes Vaadin.Grid.DragAndDropMixin\n * @demo demo/index.html\n */\nclass GridElement extends\n ElementMixin(\n ThemableMixin(\n DataProviderMixin(\n ArrayDataProviderMixin(\n DynamicColumnsMixin(\n ActiveItemMixin(\n ScrollMixin(\n SelectionMixin(\n SortMixin(\n RowDetailsMixin(\n KeyboardNavigationMixin(\n A11yMixin(\n FilterMixin(\n ColumnReorderingMixin(\n ColumnResizingMixin(\n EventContextMixin(\n DragAndDropMixin(\n StylingMixin(\n ScrollerElement)))))))))))))))))) {\n static get template() {\n return html`\n \n\n \n\n \n \n\n \n`;\n }\n\n static get is() {\n return 'vaadin-grid';\n }\n\n static get version() {\n return '5.4.6';\n }\n\n static get observers() {\n return [\n '_columnTreeChanged(_columnTree, _columnTree.*)'\n ];\n }\n\n static get properties() {\n return {\n\n _this: {\n type: Object,\n value: function() {\n return this;\n }\n },\n\n _safari: {\n type: Boolean,\n value: /^((?!chrome|android).)*safari/i.test(navigator.userAgent)\n },\n\n _ios: {\n type: Boolean,\n value: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream\n },\n\n _edge: {\n type: Boolean,\n value: typeof CSS !== 'undefined' && CSS.supports('(-ms-ime-align:auto)')\n },\n\n _ie: {\n type: Boolean,\n value: !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/))\n },\n\n _firefox: {\n type: Boolean,\n value: navigator.userAgent.toLowerCase().indexOf('firefox') > -1\n },\n\n _android: {\n type: Boolean,\n value: /android/i.test(navigator.userAgent)\n },\n\n _touchDevice: {\n type: Boolean,\n value: TOUCH_DEVICE\n },\n\n /**\n * If true, the grid's height is defined by the number of its rows.\n */\n heightByRows: {\n type: Boolean,\n value: false,\n reflectToAttribute: true,\n observer: '_heightByRowsChanged'\n }\n };\n }\n\n constructor() {\n super();\n this.addEventListener('animationend', this._onAnimationEnd);\n }\n\n __hasRowsWithClientHeight() {\n return !!Array.from(this.$.items.children).filter(row => row.clientHeight).length;\n }\n\n __setInitialColumnWidths() {\n if (!this._initialColumnWidthsSet && this.__hasRowsWithClientHeight()) {\n this._initialColumnWidthsSet = true;\n this.recalculateColumnWidths();\n }\n }\n\n /**\n * @param {Array} cols the columns to auto size based on their content width\n */\n _recalculateColumnWidths(cols) {\n // Note: The `cols.forEach()` loops below could be implemented as a single loop but this has been\n // split for performance reasons to batch these similar actions [write/read] together to avoid\n // unnecessary layout trashing.\n\n // [write] Set automatic width for all cells (breaks column alignment)\n cols.forEach(col => {\n col.width = 'auto';\n col._origFlexGrow = col.flexGrow;\n col.flexGrow = 0;\n });\n // [read] Measure max cell width in each column\n cols.forEach(col => {\n col._currentWidth = 0;\n // Note: _allCells only contains cells which are currently rendered in DOM\n col._allCells.forEach(c => {\n const cellWidth = Math.ceil(c.getBoundingClientRect().width);\n col._currentWidth = Math.max(col._currentWidth, cellWidth);\n });\n });\n // [write] Set column widths to fit widest measured content\n cols.forEach(col => {\n col.width = `${col._currentWidth}px`;\n col.flexGrow = col._origFlexGrow;\n col._currentWidth = undefined;\n col._origFlexGrow = undefined;\n });\n }\n\n /**\n * Updates the `width` of all columns which have `autoWidth` set to `true`.\n */\n recalculateColumnWidths() {\n if (!this._columnTree) {\n return; // No columns\n }\n const cols = this._getColumns().filter(col => !col.hidden && col.autoWidth);\n this._recalculateColumnWidths(cols);\n }\n\n _createScrollerRows(count) {\n const rows = [];\n for (var i = 0; i < count; i++) {\n const row = document.createElement('tr');\n row.setAttribute('part', 'row');\n row.setAttribute('role', 'row');\n if (this._columnTree) {\n this._updateRow(row, this._columnTree[this._columnTree.length - 1], 'body', false, true);\n }\n rows.push(row);\n }\n\n if (this._columnTree) {\n this._columnTree[this._columnTree.length - 1].forEach(c => c.notifyPath && c.notifyPath('_cells.*', c._cells));\n }\n\n beforeNextRender(this, () => {\n this._updateFirstAndLastColumn();\n this._resetKeyboardNavigation();\n });\n return rows;\n }\n\n _getRowTarget() {\n return this.$.items;\n }\n\n _createCell(tagName) {\n const contentId = this._contentIndex = this._contentIndex + 1 || 0;\n const slotName = 'vaadin-grid-cell-content-' + contentId;\n\n const cellContent = document.createElement('vaadin-grid-cell-content');\n cellContent.setAttribute('slot', slotName);\n\n const cell = document.createElement(tagName);\n cell.id = slotName.replace('-content-', '-');\n cell.setAttribute('tabindex', '-1');\n cell.setAttribute('role', tagName === 'td' ? 'gridcell' : 'columnheader');\n\n const slot = document.createElement('slot');\n slot.setAttribute('name', slotName);\n\n cell.appendChild(slot);\n\n cell._content = cellContent;\n\n // With native Shadow DOM, mousedown on slotted element does not focus\n // focusable slot wrapper, that is why cells are not focused with\n // mousedown. Workaround: listen for mousedown and focus manually.\n cellContent.addEventListener('mousedown', () => {\n if (window.chrome) {\n // Chrome bug: focusing before mouseup prevents text selection, see http://crbug.com/771903\n const mouseUpListener = () => {\n if (!cellContent.contains(this.getRootNode().activeElement)) {\n cell.focus();\n }\n // If focus is in the cell content — respect it, do not change.\n document.removeEventListener('mouseup', mouseUpListener, true);\n };\n document.addEventListener('mouseup', mouseUpListener, true);\n } else {\n // Focus on mouseup, on the other hand, removes selection on Safari.\n // Watch out sync focus removal issue, only async focus works here.\n setTimeout(() => {\n if (!cellContent.contains(this.getRootNode().activeElement)) {\n cell.focus();\n }\n });\n }\n });\n\n return cell;\n }\n\n _updateRow(row, columns, section, isColumnRow, noNotify) {\n section = section || 'body';\n\n const contentsFragment = document.createDocumentFragment();\n\n Array.from(row.children).forEach(cell => cell._vacant = true);\n row.innerHTML = '';\n if (row.id !== 'outersizer' && row.id !== 'fixedsizer') {\n row.hidden = true;\n }\n columns.forEach((column, index) => {\n let cell;\n\n if (section === 'body') {\n // Body\n column._cells = column._cells || [];\n cell = column._cells.filter(cell => cell._vacant)[0];\n if (!cell) {\n cell = this._createCell('td');\n column._cells.push(cell);\n }\n cell.setAttribute('part', 'cell body-cell');\n row.appendChild(cell);\n\n if (index === columns.length - 1 && (this._rowDetailsTemplate || this.rowDetailsRenderer)) {\n // Add details cell as last cell to body rows\n this._detailsCells = this._detailsCells || [];\n const detailsCell = this._detailsCells.filter(cell => cell._vacant)[0] || this._createCell('td');\n if (this._detailsCells.indexOf(detailsCell) === -1) {\n this._detailsCells.push(detailsCell);\n }\n if (!detailsCell._content.parentElement) {\n contentsFragment.appendChild(detailsCell._content);\n }\n this._configureDetailsCell(detailsCell);\n row.appendChild(detailsCell);\n this._a11ySetRowDetailsCell(row, detailsCell);\n detailsCell._vacant = false;\n }\n\n if (column.notifyPath && !noNotify) {\n column.notifyPath('_cells.*', column._cells);\n }\n } else {\n // Header & footer\n const tagName = section === 'header' ? 'th' : 'td';\n if (isColumnRow || column.localName === 'vaadin-grid-column-group') {\n cell = column[`_${section}Cell`] || this._createCell(tagName);\n cell._column = column;\n row.appendChild(cell);\n column[`_${section}Cell`] = cell;\n } else {\n column._emptyCells = column._emptyCells || [];\n cell = column._emptyCells.filter(cell => cell._vacant)[0] || this._createCell(tagName);\n cell._column = column;\n row.appendChild(cell);\n if (column._emptyCells.indexOf(cell) === -1) {\n column._emptyCells.push(cell);\n }\n }\n cell.setAttribute('part', `cell ${section}-cell`);\n this.__updateHeaderFooterRowVisibility(row);\n }\n\n if (!cell._content.parentElement) {\n contentsFragment.appendChild(cell._content);\n }\n cell._vacant = false;\n cell._column = column;\n });\n\n // Might be empty if only cache was used\n this.appendChild(contentsFragment);\n\n this._frozenCellsChanged();\n this._updateFirstAndLastColumnForRow(row);\n }\n\n __updateHeaderFooterRowVisibility(row) {\n if (!row) {\n return;\n }\n\n const visibleRowCells = Array.from(row.children).filter(cell => {\n const column = cell._column;\n if (column._emptyCells && column._emptyCells.indexOf(cell) > -1) {\n // The cell is an \"empty cell\" -> doesn't block hiding the row\n return false;\n }\n if (row.parentElement === this.$.header) {\n if (column.headerRenderer || column._headerTemplate) {\n // The cell is the header cell of a column that has a header renderer\n // or a header template -> row should be visible\n return true;\n }\n if (column.header === null) {\n // The column header is explicilty set to null -> doesn't block hiding the row\n return false;\n }\n if (column.path || column.header !== undefined) {\n // The column has an explicit non-null header or a path that generates a header\n // -> row should be visible\n return true;\n }\n } else {\n if (column.footerRenderer || column._footerTemplate) {\n // The cell is the footer cell of a column that has a footer renderer\n // or a footer template -> row should be visible\n return true;\n }\n }\n });\n\n if (row.hidden !== !visibleRowCells.length) {\n row.hidden = !visibleRowCells.length;\n this.notifyResize();\n }\n }\n\n _updateScrollerItem(row, index) {\n this._preventScrollerRotatingCellFocus(row, index);\n\n if (!this._columnTree) {\n return;\n }\n\n this._toggleAttribute('first', index === 0, row);\n this._toggleAttribute('odd', index % 2, row);\n this._a11yUpdateRowRowindex(row, index);\n this._getItem(index, row);\n }\n\n _columnTreeChanged(columnTree, splices) {\n Array.from(this.$.items.children).forEach(row => this._updateRow(row, columnTree[columnTree.length - 1]));\n\n while (this.$.header.children.length < columnTree.length) {\n const headerRow = document.createElement('tr');\n headerRow.setAttribute('part', 'row');\n headerRow.setAttribute('role', 'row');\n this.$.header.appendChild(headerRow);\n\n const footerRow = document.createElement('tr');\n footerRow.setAttribute('part', 'row');\n footerRow.setAttribute('role', 'row');\n this.$.footer.appendChild(footerRow);\n }\n while (this.$.header.children.length > columnTree.length) {\n this.$.header.removeChild(this.$.header.firstElementChild);\n this.$.footer.removeChild(this.$.footer.firstElementChild);\n }\n\n Array.from(this.$.header.children)\n .forEach((headerRow, index) => this._updateRow(headerRow, columnTree[index], 'header', index === columnTree.length - 1));\n\n Array.from(this.$.footer.children)\n .forEach((footerRow, index) => this._updateRow(footerRow, columnTree[columnTree.length - 1 - index], 'footer', index === 0));\n\n // Sizer rows\n this._updateRow(this.$.outersizer, columnTree[columnTree.length - 1]);\n this._updateRow(this.$.fixedsizer, columnTree[columnTree.length - 1]);\n\n this._resizeHandler();\n this._frozenCellsChanged();\n this._updateFirstAndLastColumn();\n this._resetKeyboardNavigation();\n this._a11yUpdateHeaderRows();\n this._a11yUpdateFooterRows();\n }\n\n _updateItem(row, item) {\n row._item = item;\n const model = this.__getRowModel(row);\n\n this._toggleAttribute('selected', model.selected, row);\n this._a11yUpdateRowSelected(row, model.selected);\n this._a11yUpdateRowLevel(row, model.level);\n this._toggleAttribute('expanded', model.expanded, row);\n if (this._rowDetailsTemplate || this.rowDetailsRenderer) {\n this._toggleDetailsCell(row, item);\n }\n this._generateCellClassNames(row, model);\n this._filterDragAndDrop(row, model);\n\n Array.from(row.children).forEach(cell => {\n if (cell._renderer) {\n const owner = cell._column || this;\n cell._renderer.call(owner, cell._content, owner, model);\n } else if (cell._instance) {\n cell._instance.__detailsOpened__ = model.detailsOpened;\n cell._instance.__selected__ = model.selected;\n cell._instance.__level__ = model.level;\n cell._instance.__expanded__ = model.expanded;\n cell._instance.setProperties(model);\n }\n });\n\n this._debouncerUpdateHeights = Debouncer.debounce(this._debouncerUpdateHeights,\n timeOut.after(1), () => {\n this._updateMetrics();\n this._positionItems();\n this._updateScrollerSize();\n }\n );\n }\n\n _resizeHandler() {\n this._updateDetailsCellHeights();\n this._accessIronListAPI(super._resizeHandler, true);\n this._updateHeaderFooterMetrics();\n }\n\n _updateHeaderFooterMetrics() {\n const headerHeight = this.$.header.clientHeight + 'px';\n const footerHeight = this.$.footer.clientHeight + 'px';\n [this.$.outersizer, this.$.fixedsizer, this.$.items].forEach(element => {\n element.style.borderTopWidth = headerHeight;\n element.style.borderBottomWidth = footerHeight;\n });\n\n afterNextRender(this.$.header, () => {\n if (this._pendingScrollToIndex) {\n this._scrollToIndex(this._pendingScrollToIndex);\n }\n });\n }\n\n _onAnimationEnd(e) {\n // ShadyCSS applies scoping suffixes to animation names\n if (e.animationName.indexOf('vaadin-grid-appear') === 0) {\n this._render();\n this._updateHeaderFooterMetrics();\n e.stopPropagation();\n this.notifyResize();\n this.__setInitialColumnWidths();\n }\n }\n\n _toggleAttribute(name, bool, node) {\n if (node.hasAttribute(name) === !bool) {\n if (bool) {\n node.setAttribute(name, '');\n } else {\n node.removeAttribute(name);\n }\n }\n }\n\n __getRowModel(row) {\n return {\n index: row.index,\n item: row._item,\n level: this._getIndexLevel(row.index),\n expanded: this._isExpanded(row._item),\n selected: this._isSelected(row._item),\n detailsOpened:\n !!(this._rowDetailsTemplate || this.rowDetailsRenderer) && this._isDetailsOpened(row._item)\n };\n }\n\n /**\n * Manually invoke existing renderers for all the columns\n * (header, footer and body cells) and opened row details.\n */\n render() {\n if (this._columnTree) {\n // header and footer renderers\n this._columnTree.forEach(level => {\n level.forEach(column => column._renderHeaderAndFooter());\n });\n\n // body and row details renderers\n this._update();\n }\n }\n\n /**\n * Updates the computed metrics and positioning of internal grid parts\n * (row/details cell positioning etc). Needs to be invoked whenever the sizing of grid\n * content changes asynchronously to ensure consistent appearance (e.g. when a\n * contained image whose bounds aren't known beforehand finishes loading).\n */\n notifyResize() {\n super.notifyResize();\n }\n\n _heightByRowsChanged(value, oldValue) {\n if (value || oldValue) {\n this.notifyResize();\n }\n }\n\n __forceReflow() {\n this._debouncerForceReflow = Debouncer.debounce(this._debouncerForceReflow,\n animationFrame, () => {\n this.$.scroller.style.overflow = 'hidden';\n setTimeout(() => this.$.scroller.style.overflow = '');\n }\n );\n }\n}\n\n/**\n * Fired when the columns in the grid are reordered.\n *\n * @event column-reorder\n * @param {Object} detail\n * @param {Object} detail.columns the columns in the new order\n */\n\ncustomElements.define(GridElement.is, GridElement);\nexport { GridElement };\n","import '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\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 '@polymer/polymer/polymer-legacy.js';\n\nimport '@polymer/polymer/lib/elements/custom-style.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { PolymerElement } from '@polymer/polymer/polymer-element.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `\n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n/**\n * `` is a helper element for the `` that provides out-of-the-box UI controls,\n * visual feedback, and handlers for sorting the grid data.\n *\n * #### Example:\n * ```html\n * \n * \n * [[item.name.first]]\n * \n * ```\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ----------------|----------------\n * `content` | The slotted content wrapper\n * `indicators` | The internal sorter indicators.\n * `order` | The internal sorter order\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -------------|-------------|------------\n * `direction` | Sort direction of a sorter | :host\n *\n * @memberof Vaadin\n */\nclass GridSorterElement extends ThemableMixin(PolymerElement) {\n static get template() {\n return html`\n \n\n \n \n
\n \n [[_getDisplayOrder(_order)]]\n
\n`;\n }\n\n static get is() {\n return 'vaadin-grid-sorter';\n }\n\n static get properties() {\n return {\n /**\n * JS Path of the property in the item used for sorting the data.\n */\n path: String,\n\n /**\n * How to sort the data.\n * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in\n * descending direction, or `null` for not sorting the data.\n */\n direction: {\n type: String,\n reflectToAttribute: true,\n notify: true,\n value: null\n },\n\n _order: {\n type: Number,\n value: null\n },\n\n _isConnected: {\n type: Boolean,\n value: false\n }\n };\n }\n\n static get observers() {\n return [\n '_pathOrDirectionChanged(path, direction, _isConnected)',\n '_directionOrOrderChanged(direction, _order)'\n ];\n }\n\n ready() {\n super.ready();\n this.addEventListener('click', this._onClick.bind(this));\n }\n\n /** @protected */\n connectedCallback() {\n super.connectedCallback();\n this._isConnected = true;\n }\n\n /** @protected */\n disconnectedCallback() {\n super.disconnectedCallback();\n this._isConnected = false;\n }\n\n _pathOrDirectionChanged(path, direction, isConnected) {\n if (path === undefined || direction === undefined || isConnected === undefined) {\n return;\n }\n\n if (isConnected) {\n this.dispatchEvent(new CustomEvent('sorter-changed', {bubbles: true, composed: true}));\n }\n }\n\n _getDisplayOrder(order) {\n return order === null ? '' : order + 1;\n }\n\n _onClick(e) {\n const activeElement = this.getRootNode().activeElement;\n if (this !== activeElement && this.contains(activeElement)) {\n // Some focusable content inside the sorter was clicked, do nothing.\n return;\n }\n\n e.preventDefault();\n if (this.direction === 'asc') {\n this.direction = 'desc';\n } else if (this.direction === 'desc') {\n this.direction = null;\n } else {\n this.direction = 'asc';\n }\n }\n\n _directionOrOrderChanged(direction, order) {\n if (direction === undefined || order === undefined) {\n return;\n }\n\n // Safari has an issue with repainting shadow root element styles when a host attribute changes.\n // Need this workaround (toggle any inline css property on and off) until the issue gets fixed.\n var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n if (isSafari && this.root) {\n this.root.querySelectorAll('*').forEach(function(el) {\n el.style['-webkit-backface-visibility'] = 'visible';\n el.style['-webkit-backface-visibility'] = '';\n });\n }\n }\n}\n\ncustomElements.define(GridSorterElement.is, GridSorterElement);\n\nexport { GridSorterElement };\n","/**\n@license\nCopyright (c) 2018 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nimport { GridColumnElement } from './vaadin-grid-column.js';\n\nimport './vaadin-grid-sorter.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * `` is a helper element for the ``\n * that provides default header template and functionality for sorting.\n *\n * #### Example:\n * ```html\n * \n * \n *\n * \n * ...\n * ```\n *\n * @memberof Vaadin\n * @extends Vaadin.GridColumnElement\n */\nclass GridSortColumnElement extends GridColumnElement {\n static get template() {\n return html`\n \n`;\n }\n\n static get is() {\n return 'vaadin-grid-sort-column';\n }\n\n static get properties() {\n return {\n /**\n * JS Path of the property in the item used for sorting the data.\n */\n path: String,\n\n /**\n * How to sort the data.\n * Possible values are `asc` to use an ascending algorithm, `desc` to sort the data in\n * descending direction, or `null` for not sorting the data.\n */\n direction: {\n type: String,\n notify: true\n }\n };\n }\n\n _prepareHeaderTemplate() {\n const headerTemplate = this._prepareTemplatizer(this.$.headerTemplate);\n // needed to override the dataHost correctly in case internal template is used.\n headerTemplate.templatizer.dataHost = this;\n return headerTemplate;\n }\n\n _getHeader(header, path) {\n return header || this._generateHeader(path);\n }\n}\n\ncustomElements.define(GridSortColumnElement.is, GridSortColumnElement);\n\nexport { GridSortColumnElement };\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 '@polymer/polymer/polymer-legacy.js';\n\nimport { GridColumnElement } from './vaadin-grid-column.js';\nimport '@vaadin/vaadin-checkbox/src/vaadin-checkbox.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * `` is a helper element for the ``\n * that provides default templates and functionality for item selection.\n *\n * #### Example:\n * ```html\n * \n * \n *\n * \n * ...\n * ```\n *\n * By default the selection column displays `` elements in the\n * column cells. The checkboxes in the body rows toggle selection of the corresponding row items.\n *\n * When the grid data is provided as an array of [`items`](#/elements/vaadin-grid#property-items),\n * the column header gets an additional checkbox that can be used for toggling\n * selection for all the items at once.\n *\n * __The default content can also be overridden__\n *\n * @memberof Vaadin\n * @extends Vaadin.GridColumnElement\n */\nclass GridSelectionColumnElement extends GridColumnElement {\n static get template() {\n return html`\n \n \n \n \n`;\n }\n\n static get is() {\n return 'vaadin-grid-selection-column';\n }\n\n static get properties() {\n return {\n /**\n * Width of the cells for this column.\n */\n width: {\n type: String,\n value: '58px'\n },\n\n /**\n * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.\n */\n flexGrow: {\n type: Number,\n value: 0\n },\n\n /**\n * When true, all the items are selected.\n */\n selectAll: {\n type: Boolean,\n value: false,\n notify: true\n },\n\n /**\n * When true, the active gets automatically selected.\n */\n autoSelect: {\n type: Boolean,\n value: false,\n },\n\n _indeterminate: Boolean,\n\n /**\n * The previous state of activeItem. When activeItem turns to `null`,\n * previousActiveItem will have an Object with just unselected activeItem\n */\n _previousActiveItem: Object,\n\n _selectAllHidden: Boolean\n };\n }\n\n static get observers() {\n return [\n '_onSelectAllChanged(selectAll)'\n ];\n }\n\n _pathOrHeaderChanged(path, header, headerCell, footerCell, cells, renderer, headerRenderer, bodyTemplate, headerTemplate) {\n // As a special case, allow overriding the default header / body templates\n if (cells.value && (path !== undefined || renderer !== undefined)) {\n this._bodyTemplate = bodyTemplate = undefined;\n this.__cleanCellsOfTemplateProperties(cells.value);\n }\n if (headerCell && (header !== undefined || headerRenderer !== undefined)) {\n this._headerTemplate = headerTemplate = undefined;\n this.__cleanCellsOfTemplateProperties([headerCell]);\n }\n super._pathOrHeaderChanged(path, header, headerCell, footerCell, cells, renderer, headerRenderer, bodyTemplate, headerTemplate);\n }\n\n __cleanCellsOfTemplateProperties(cells) {\n cells.forEach(cell => {\n cell._content.innerHTML = '';\n delete cell._instance;\n delete cell._template;\n });\n }\n\n _prepareHeaderTemplate() {\n const headerTemplate = this._prepareTemplatizer(this._findTemplate(true) || this.$.defaultHeaderTemplate);\n // needed to override the dataHost correctly in case internal template is used.\n headerTemplate.templatizer.dataHost = headerTemplate === this.$.defaultHeaderTemplate ? this : this.dataHost;\n\n return headerTemplate;\n }\n\n _prepareBodyTemplate() {\n const template = this._prepareTemplatizer(this._findTemplate() || this.$.defaultBodyTemplate);\n // needed to override the dataHost correctly in case internal template is used.\n template.templatizer.dataHost = template === this.$.defaultBodyTemplate ? this : this.dataHost;\n\n return template;\n }\n\n constructor() {\n super();\n\n this._boundOnActiveItemChanged = this._onActiveItemChanged.bind(this);\n this._boundOnDataProviderChanged = this._onDataProviderChanged.bind(this);\n this._boundOnSelectedItemsChanged = this._onSelectedItemsChanged.bind(this);\n }\n\n /** @protected */\n disconnectedCallback() {\n this._grid.removeEventListener('active-item-changed', this._boundOnActiveItemChanged);\n this._grid.removeEventListener('data-provider-changed', this._boundOnDataProviderChanged);\n this._grid.removeEventListener('filter-changed', this._boundOnSelectedItemsChanged);\n this._grid.removeEventListener('selected-items-changed', this._boundOnSelectedItemsChanged);\n\n const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n if (isSafari && window.ShadyDOM && this.parentElement) {\n // Detach might have beem caused by order change.\n // Shady on safari doesn't restore isAttached so we'll need to do it manually.\n const parent = this.parentElement;\n const nextSibling = this.nextElementSibling;\n parent.removeChild(this);\n if (nextSibling) {\n parent.insertBefore(this, nextSibling);\n } else {\n parent.appendChild(this);\n }\n }\n\n super.disconnectedCallback();\n }\n\n /** @protected */\n connectedCallback() {\n super.connectedCallback();\n if (this._grid) {\n this._grid.addEventListener('active-item-changed', this._boundOnActiveItemChanged);\n this._grid.addEventListener('data-provider-changed', this._boundOnDataProviderChanged);\n this._grid.addEventListener('filter-changed', this._boundOnSelectedItemsChanged);\n this._grid.addEventListener('selected-items-changed', this._boundOnSelectedItemsChanged);\n }\n }\n\n _onSelectAllChanged(selectAll) {\n if (selectAll === undefined || !this._grid) {\n return;\n }\n\n if (this._selectAllChangeLock) {\n return;\n }\n\n this._grid.selectedItems = selectAll && Array.isArray(this._grid.items) ? this._grid._filter(this._grid.items) : [];\n }\n\n // Return true if array `a` contains all the items in `b`\n // We need this when sorting or to preserve selection after filtering.\n _arrayContains(a, b) {\n for (var i = 0; a && b && b[i] && a.indexOf(b[i]) >= 0; i++); // eslint-disable-line\n return i == b.length;\n }\n\n _onSelectAllCheckedChanged(e) {\n this.selectAll = this._indeterminate || e.target.checked;\n }\n\n // iOS needs indeterminated + checked at the same time\n _isChecked(selectAll, indeterminate) {\n return indeterminate || selectAll;\n }\n\n _onActiveItemChanged(e) {\n const activeItem = e.detail.value;\n if (this.autoSelect) {\n const item = activeItem || this._previousActiveItem;\n if (item) {\n this._grid._toggleItem(item);\n }\n }\n this._previousActiveItem = activeItem;\n }\n\n _onSelectedItemsChanged(e) {\n this._selectAllChangeLock = true;\n if (Array.isArray(this._grid.items)) {\n if (!this._grid.selectedItems.length) {\n this.selectAll = false;\n this._indeterminate = false;\n } else if (this._arrayContains(this._grid.selectedItems, this._grid._filter(this._grid.items))) {\n this.selectAll = true;\n this._indeterminate = false;\n } else {\n this.selectAll = false;\n this._indeterminate = true;\n }\n }\n this._selectAllChangeLock = false;\n }\n\n _onDataProviderChanged(e) {\n this._selectAllHidden = !Array.isArray(this._grid.items);\n }\n}\n\ncustomElements.define(GridSelectionColumnElement.is, GridSelectionColumnElement);\n\nexport { GridSelectionColumnElement };\n","import './vaadin-text-field-styles.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/mixins/field-button.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\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 '@polymer/polymer/polymer-element.js';\n\nimport '@polymer/polymer/lib/elements/custom-style.js';\nimport { TextFieldElement } from './vaadin-text-field.js';\nimport { DomModule } from '@polymer/polymer/lib/elements/dom-module.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `\n \n \n\n \n
\n\n \n
\n \n\n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\nlet memoizedTemplate;\n\n/**\n* `` is a Polymer 2 element for number field control in forms.\n*\n* ```html\n* \n* \n* ```\n*\n* @memberof Vaadin\n* @extends Vaadin.TextFieldElement\n* @demo demo/index.html\n*/\nclass NumberFieldElement extends TextFieldElement {\n static get is() {\n return 'vaadin-number-field';\n }\n\n static get version() {\n return '2.4.6';\n }\n\n static get properties() {\n return {\n /**\n * Set to true to display value increase/decrease controls.\n */\n hasControls: {\n type: Boolean,\n value: false,\n reflectToAttribute: true\n },\n\n /**\n * The minimum value of the field.\n */\n min: {\n type: Number,\n reflectToAttribute: true\n },\n\n /**\n * The maximum value of the field.\n */\n max: {\n type: Number,\n reflectToAttribute: true,\n observer: '_maxChanged'\n },\n\n /**\n * Specifies the allowed number intervals of the field.\n */\n step: {\n type: Number,\n reflectToAttribute: true,\n value: 1\n }\n\n };\n }\n\n static get observers() {\n return [\n '_stepOrMinChanged(step, min)'\n ];\n }\n\n ready() {\n super.ready();\n this.__previousValidInput = this.value || '';\n this.inputElement.type = 'number';\n this.inputElement.addEventListener('keydown', this.__onKeyDown.bind(this));\n this.inputElement.addEventListener('change', this.__onInputChange.bind(this));\n }\n\n _decreaseButtonTouchend(e) {\n // Cancel the following click and focus events\n e.preventDefault();\n this._decreaseValue();\n }\n\n _increaseButtonTouchend(e) {\n // Cancel the following click and focus events\n e.preventDefault();\n this._increaseValue();\n }\n\n static get template() {\n if (!memoizedTemplate) {\n // Clone the superclass template\n memoizedTemplate = super.template.cloneNode(true);\n\n // Retrieve this element's dom-module template\n const thisTemplate = DomModule.import(this.is + '-template', 'template');\n const decreaseButton = thisTemplate.content.querySelector('[part=\"decrease-button\"]');\n const increaseButton = thisTemplate.content.querySelector('[part=\"increase-button\"]');\n const styles = thisTemplate.content.querySelector('style');\n\n // Add the buttons and styles to the text-field template\n const inputField = memoizedTemplate.content.querySelector('[part=\"input-field\"]');\n const prefixSlot = memoizedTemplate.content.querySelector('[name=\"prefix\"]');\n inputField.insertBefore(decreaseButton, prefixSlot);\n inputField.appendChild(increaseButton);\n memoizedTemplate.content.appendChild(styles);\n }\n\n return memoizedTemplate;\n }\n\n _decreaseValue() {\n this._incrementValue(-1);\n }\n\n _increaseValue() {\n this._incrementValue(1);\n }\n\n _incrementValue(incr) {\n if (this.disabled) {\n return;\n }\n\n let value = parseFloat(this.value);\n\n if (!this.value) {\n if (this.min == 0 && incr < 0 ||\n this.max == 0 && incr > 0 ||\n this.max == 0 && this.min == 0) {\n incr = 0;\n value = 0;\n } else if ((this.max == null || this.max >= 0) &&\n (this.min == null || this.min <= 0)) {\n value = 0;\n } else if (this.min > 0) {\n value = this.min;\n if (this.max < 0 && incr < 0) {\n value = this.max;\n }\n incr = 0;\n } else if (this.max < 0) {\n value = this.max;\n if (incr < 0) {\n incr = 0;\n } else {\n // FIXME(yuriy): find a proper solution to make correct step back\n if (this._getIncrement(1, value - this.step) > this.max) {\n value -= 2 * this.step;\n } else {\n value -= this.step;\n }\n }\n }\n } else if (value < this.min) {\n incr = 0;\n value = this.min;\n } else if (value > this.max) {\n incr = 0;\n value = this.max;\n }\n\n const newValue = this._getIncrement(incr, value);\n if (!this.value || incr == 0 || this._incrementIsInsideTheLimits(incr, value)) {\n this._setValue(newValue);\n }\n }\n\n _setValue(value) {\n this.value = this.inputElement.value = parseFloat(value).toFixed(this.__decimals);\n this.dispatchEvent(new CustomEvent('change', {bubbles: true}));\n }\n\n _getIncrement(incr, currentValue) {\n let step = this.step || 1,\n min = this.min || 0;\n\n // To avoid problems with decimal math, multiplying to operate with integers.\n const multiplier = Math.max(this._getMultiplier(currentValue),\n this._getMultiplier(step),\n this._getMultiplier(min));\n\n step *= multiplier;\n currentValue *= multiplier;\n min *= multiplier;\n\n const margin = (currentValue - min) % step;\n\n if (incr > 0) {\n return (currentValue - margin + step) / multiplier;\n } else if (incr < 0) {\n return (currentValue - (margin || step)) / multiplier;\n } else {\n return currentValue / multiplier;\n }\n }\n\n _getMultiplier(number) {\n if (!isNaN(number)) {\n let multiplier = 1;\n // Increase the multiplier until the float point will disappear\n while (Math.floor(number * multiplier) !== number * multiplier) {\n multiplier = multiplier * 10;\n }\n\n return multiplier;\n }\n }\n\n _incrementIsInsideTheLimits(incr, value) {\n if (incr < 0) {\n return this.min == null || this._getIncrement(incr, value) >= this.min;\n } else if (incr > 0) {\n return this.max == null || this._getIncrement(incr, value) <= this.max;\n } else {\n return this._getIncrement(incr, value) <= this.max && this._getIncrement(incr, value) >= this.min;\n }\n }\n\n _allowed(sign) {\n const incr = sign * (this.step || 1);\n const value = parseFloat(this.value);\n return !this.value || (!this.disabled && this._incrementIsInsideTheLimits(incr, value));\n }\n\n _maxChanged() {\n this.inputElement.max = this.max;\n }\n\n _valueChanged(newVal, oldVal) {\n // Validate value to be numeric\n if (newVal && isNaN(parseFloat(newVal).toFixed(this.__decimals))) {\n this.value = '';\n } else if (typeof this.value !== 'string') {\n this.value = String(this.value);\n }\n\n super._valueChanged(this.value, oldVal);\n }\n\n __onKeyDown(e) {\n if (e.keyCode == 38) {\n e.preventDefault();\n this._increaseValue();\n } else if (e.keyCode == 40) {\n e.preventDefault();\n this._decreaseValue();\n }\n }\n\n __onInputChange() {\n this.checkValidity();\n }\n\n _stepOrMinChanged(step, min) {\n this.inputElement.step = step;\n this.inputElement.min = this.min;\n const countDecimalPlaces = number => {\n return number ? String(Math.abs(number)).replace(/^\\d*\\.?(.*)?$/, '$1').length : 0;\n };\n // Compute number of dedimals to display in input based on provided step\n this.__decimals = Math.max(countDecimalPlaces(step), countDecimalPlaces(min));\n }\n\n checkValidity() {\n // text-field mixin does not check against `min` and `max`\n if (this.min !== undefined || this.max !== undefined || this.step) {\n this.invalid = !this.inputElement.checkValidity();\n }\n return super.checkValidity();\n }\n}\n\nwindow.customElements.define(NumberFieldElement.is, NumberFieldElement);\n\nexport { NumberFieldElement };\n","import '@vaadin/vaadin-item/theme/material/vaadin-item.js';\nimport '@vaadin/vaadin-list-box/theme/material/vaadin-list-box.js';\nimport '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';\nimport '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';\nimport '@vaadin/vaadin-material-styles/mixins/field-button.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html``;\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 '@polymer/polymer/lib/elements/dom-module.js';\n\nimport { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = ``;\n\ndocument.head.appendChild($_documentContainer.content);\n/**\n * The overlay element.\n *\n * ### Styling\n *\n * See [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\n * for `` parts.\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @extends Vaadin.OverlayElement\n */\nclass DropdownMenuOverlayElement extends OverlayElement {\n static get is() {\n return 'vaadin-dropdown-menu-overlay';\n }\n}\ncustomElements.define(DropdownMenuOverlayElement.is, DropdownMenuOverlayElement);\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 { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';\n\nlet memoizedTemplate;\n/**\n * The text-field element.\n *\n * ### Styling\n *\n * See [`` documentation](https://github.com/vaadin/vaadin-text-field/blob/master/src/vaadin-text-field.html)\n * for `` parts and available slots (prefix, suffix etc.)\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @extends Vaadin.TextFieldElement\n */\nclass DropdownMenuTextFieldElement extends TextFieldElement {\n static get is() {\n return 'vaadin-dropdown-menu-text-field';\n }\n\n static get template() {\n if (!memoizedTemplate) {\n // Clone the superclass template\n memoizedTemplate = super.template.cloneNode(true);\n\n // Create a slot for the value element\n const slot = document.createElement('slot');\n slot.setAttribute('name', 'value');\n\n // Insert the slot before the text-field\n const input = memoizedTemplate.content.querySelector('input');\n\n input.parentElement.replaceChild(slot, input);\n slot.appendChild(input);\n }\n return memoizedTemplate;\n }\n\n get focusElement() {\n return this.shadowRoot.querySelector('[part=input-field]');\n }\n}\n\ncustomElements.define(DropdownMenuTextFieldElement.is, DropdownMenuTextFieldElement);\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/custom-style.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';\nimport { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';\nimport '@polymer/iron-media-query/iron-media-query.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport './vaadin-dropdown-menu-overlay.js';\nimport './vaadin-dropdown-menu-text-field.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';\nimport { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `\n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n/**\n *\n * `` is a Web Component for selecting values from a list of items. The content of the\n * the dropdown menu can be populated in two ways: imperatively by using renderer callback function and\n * declaratively by using Polymer's Templates.\n *\n * ### Rendering\n *\n * By default, the dropdown menu uses the content provided by using the renderer callback function.\n *\n * The renderer function provides `root`, `dropdownMenu` arguments.\n * Generate DOM content, append it to the `root` element and control the state\n * of the host element by accessing `dropdownMenu`.\n *\n * ```html\n * \n * ```\n * ```js\n * const dropdownMenu = document.querySelector('#dropdown-menu');\n * dropdownMenu.renderer = function(root, dropdownMenu) {\n * const listBox = document.createElement('vaadin-list-box');\n * // append 3 elements\n * ['Jose', 'Manolo', 'Pedro'].forEach(function(name) {\n * const item = document.createElement('vaadin-item');\n * item.textContent = name;\n * listBox.appendChild(item);\n * });\n *\n * // update the content\n * root.appendChild(listBox);\n * };\n * ```\n *\n * Renderer is called on initialization of new menu and on the opening of the dropdown menu.\n * DOM generated during the renderer call can be reused\n * in the next renderer call and will be provided with the `root` argument.\n * On first call it will be empty.\n *\n * ### Polymer Templates\n *\n * Alternatively, the content can be provided with Polymer's Template.\n * Dropdown menu finds the first child template and uses that in case renderer callback function\n * is not provided. You can also set a custom template using the `template` property.\n *\n * ```\n * \n * \n * \n * Foo\n * Bar\n * Baz\n * \n * \n * \n * ```\n *\n * Hint: By setting the `label` property of inner vaadin-items you will\n * be able to change the visual representation of the selected value in the input part.\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ----------------|----------------\n * `toggle-button` | The toggle button\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -------------|-------------|------------\n * `opened` | Set when the dropdown menu is open | :host\n * `invalid` | Set when the element is invalid | :host\n * `focused` | Set when the element is focused | :host\n * `focus-ring` | Set when the element is keyboard focused | :host\n * `readonly` | Set when the dropdown menu is read only | :host\n *\n * `` element sets these custom CSS properties:\n *\n * Property name | Description | Theme for element\n * --- | --- | ---\n * `--vaadin-dropdown-menu-text-field-width` | Width of the menu text field | `vaadin-dropdown-menu-overlay`\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * In addition to `` itself, the following internal\n * components are themable:\n *\n * - ``\n * - ``\n *\n * Note: the `theme` attribute value set on `` is\n * propagated to the internal themable components listed above.\n *\n * @memberof Vaadin\n * @mixes Vaadin.ElementMixin\n * @mixes Vaadin.ControlStateMixin\n * @mixes Vaadin.ThemableMixin\n * @mixes Vaadin.ThemePropertyMixin\n * @demo demo/index.html\n */\nclass DropdownMenuElement extends\n ElementMixin(\n ControlStateMixin(\n ThemableMixin(\n ThemePropertyMixin(\n mixinBehaviors(IronResizableBehavior, PolymerElement))))) {\n static get template() {\n return html`\n \n\n \n \n \n \n \n \n\n \n`;\n }\n\n static get is() {\n return 'vaadin-dropdown-menu';\n }\n\n static get version() {\n return '1.2.0';\n }\n\n static get properties() {\n return {\n /**\n * Set when the dropdown menu is open\n */\n opened: {\n type: Boolean,\n value: false,\n notify: true,\n reflectToAttribute: true,\n observer: '_openedChanged'\n },\n\n /**\n * Custom function for rendering the content of the ``.\n * Receives two arguments:\n *\n * - `root` The `` internal container\n * DOM element. Append your content to it.\n * - `dropdownMenu` The reference to the `` element.\n */\n renderer: Function,\n\n /**\n * The error message to display when the dropdown menu value is invalid\n */\n errorMessage: {\n type: String,\n value: ''\n },\n\n /**\n * String used for the label element.\n */\n label: {\n type: String\n },\n\n /**\n * It stores the the `value` property of the selected item, providing the\n * value for iron-form.\n * When there’s an item selected, it's the value of that item, otherwise\n * it's an empty string.\n * On change or initialization, the component finds the item which matches the\n * value and displays it.\n * If no value is provided to the component, it selects the first item without\n * value or empty value.\n * Hint: If you do not want to select any item by default, you can either set all\n * the values of inner vaadin-items, or set the vaadin-dropdown-menu value to\n * an inexistent value in the items list.\n */\n value: {\n type: String,\n value: '',\n notify: true,\n observer: '_valueChanged'\n },\n\n /**\n * The current required state of the dropdown menu. True if required.\n */\n required: {\n type: Boolean,\n reflectToAttribute: true,\n observer: '_requiredChanged'\n },\n\n /**\n * Set to true if the value is invalid.\n */\n invalid: {\n type: Boolean,\n reflectToAttribute: true,\n notify: true,\n value: false\n },\n\n /**\n * The name of this element.\n */\n name: {\n type: String,\n reflectToAttribute: true\n },\n\n /**\n * A hint to the user of what can be entered in the control.\n * The placeholder will be displayed in the case that there\n * is no item selected, or the selected item has an empty\n * string label, or the selected item has no label and it's\n * DOM content is empty.\n */\n placeholder: {\n type: String\n },\n\n /**\n * When present, it specifies that the element is read-only.\n */\n readonly: {\n type: Boolean,\n value: false,\n reflectToAttribute: true\n },\n\n _phone: Boolean,\n\n _phoneMediaQuery: {\n value: '(max-width: 420px), (max-height: 420px)'\n },\n\n _overlayElement: Object,\n\n _inputElement: Object,\n\n _toggleElement: Object,\n\n _items: Object,\n\n _contentTemplate: Object,\n\n _oldTemplate: Object,\n\n _oldRenderer: Object\n };\n }\n\n static get observers() {\n return [\n '_updateSelectedItem(value, _items)',\n '_updateAriaExpanded(opened, _toggleElement)',\n '_templateOrRendererChanged(_contentTemplate, renderer, _overlayElement)'\n ];\n }\n\n /** @private */\n constructor() {\n super();\n this._boundSetPosition = this._setPosition.bind(this);\n }\n\n /** @private */\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener('iron-resize', this._boundSetPosition);\n }\n\n ready() {\n super.ready();\n\n this._overlayElement = this.shadowRoot.querySelector('vaadin-dropdown-menu-overlay');\n this._valueElement = this.shadowRoot.querySelector('[part=\"value\"]');\n this._toggleElement = this.shadowRoot.querySelector('[part=\"toggle-button\"]');\n this._nativeInput = this.focusElement.shadowRoot.querySelector('input');\n this._nativeInput.setAttribute('aria-hidden', true);\n this._nativeInput.setAttribute('tabindex', -1);\n this._nativeInput.style.pointerEvents = 'none';\n\n this.focusElement.addEventListener('click', e => this.opened = !this.readonly);\n this.focusElement.addEventListener('keydown', e => this._onKeyDown(e));\n\n this._observer = new FlattenedNodesObserver(this, info => this._setTemplateFromNodes(info.addedNodes));\n this._observer.flush();\n }\n\n _setTemplateFromNodes(nodes) {\n const template = Array.from(nodes).filter(node => node.localName && node.localName === 'template')[0] || this._contentTemplate;\n this._overlayElement.template = this._contentTemplate = template;\n this._setForwardHostProps();\n }\n\n _setForwardHostProps() {\n if (this._overlayElement.content) {\n const origForwardHostProp = this._overlayElement._instance && this._overlayElement._instance.forwardHostProp;\n\n if (this._overlayElement._instance) {\n this._overlayElement._instance.forwardHostProp = (...args) => {\n origForwardHostProp.apply(this._overlayElement._instance, args);\n setTimeout(() => {\n this._updateValueSlot();\n });\n };\n\n this._assignMenuElement();\n }\n }\n }\n\n /**\n * Manually invoke existing renderer.\n */\n render() {\n this._overlayElement.render();\n }\n\n _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {\n if (template !== oldTemplate) {\n this._contentTemplate = undefined;\n } else if (renderer !== oldRenderer) {\n this.renderer = undefined;\n }\n }\n\n _templateOrRendererChanged(template, renderer, overlay) {\n if (!overlay) {\n return;\n }\n\n if (template && renderer) {\n this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);\n throw new Error('You should only use either a renderer or a template for dropdown-menu content');\n }\n\n this._oldTemplate = template;\n this._oldRenderer = renderer;\n\n if (renderer) {\n overlay.setProperties({owner: this, renderer: renderer});\n this.render();\n\n if (overlay.content.firstChild) {\n this._assignMenuElement();\n }\n }\n }\n\n _assignMenuElement() {\n this._menuElement = Array.from(this._overlayElement.content.children).filter(element => element.localName !== 'style')[0];\n\n if (this._menuElement) {\n this._menuElement.addEventListener('items-changed', e => {\n this._items = this._menuElement.items;\n });\n this._menuElement.addEventListener('selected-changed', e => this._updateValueSlot());\n this._menuElement.addEventListener('keydown', e => this._onKeyDownInside(e));\n this._menuElement.addEventListener('click', e => this.opened = false);\n }\n }\n\n /** @protected */\n get focusElement() {\n return this._inputElement ||\n (this._inputElement = this.shadowRoot.querySelector('vaadin-dropdown-menu-text-field'));\n }\n\n /** @private */\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('iron-resize', this._boundSetPosition);\n // Making sure the dropdown is closed and removed from DOM after detaching the dropdown.\n this.opened = false;\n }\n\n /** @private */\n notifyResize() {\n super.notifyResize();\n if (this.positionTarget && this.opened) {\n this._setPosition();\n // Schedule another position update (to cover virtual keyboard opening for example)\n requestAnimationFrame(this._setPosition.bind(this));\n }\n }\n\n _requiredChanged(required) {\n this.setAttribute('aria-required', required);\n }\n\n _valueChanged(value, oldValue) {\n if (value === '') {\n this.focusElement.removeAttribute('has-value');\n } else {\n this.focusElement.setAttribute('has-value', '');\n }\n\n // Skip validation for the initial empty string value\n if (value === '' && oldValue === undefined) {\n return;\n }\n this.validate();\n }\n\n _onKeyDown(e) {\n if (!this.readonly && !this.opened && /^(ArrowDown|Down|ArrowUp|Up|Enter|SpaceBar| )$/.test(e.key)) {\n e.preventDefault();\n this.opened = true;\n }\n }\n\n _onKeyDownInside(e) {\n if (/^(Tab)$/.test(e.key)) {\n this.opened = false;\n }\n }\n\n _openedChanged(opened, wasOpened) {\n if (opened) {\n if (\n !this._overlayElement ||\n !this._menuElement ||\n !this._toggleElement ||\n !this.focusElement ||\n this.disabled ||\n this.readonly\n ) {\n this.opened = false;\n return;\n }\n\n this._openedWithFocusRing = this.hasAttribute('focus-ring') || this.focusElement.hasAttribute('focus-ring');\n this._menuElement.focus();\n this._setPosition();\n window.addEventListener('scroll', this._boundSetPosition, true);\n } else if (wasOpened) {\n if (this._phone) {\n this._setFocused(false);\n } else {\n this.focusElement.focus();\n if (this._openedWithFocusRing) {\n this.focusElement.setAttribute('focus-ring', '');\n }\n }\n this.validate();\n window.removeEventListener('scroll', this._boundSetPosition, true);\n }\n }\n\n _hasContent(selected) {\n if (!selected) {\n return false;\n }\n return Boolean(\n selected.hasAttribute('label') ?\n selected.getAttribute('label') :\n selected.textContent.trim() || selected.children.length\n );\n }\n\n _attachSelectedItem(selected) {\n if (!selected) {\n return;\n }\n let labelItem;\n if (selected.hasAttribute('label')) {\n labelItem = document.createElement('vaadin-item');\n labelItem.textContent = selected.getAttribute('label');\n } else {\n labelItem = selected.cloneNode(true);\n }\n\n // store reference to the original item\n labelItem._sourceItem = selected;\n\n labelItem.removeAttribute('tabindex');\n\n this._valueElement.appendChild(labelItem);\n\n labelItem.selected = true;\n }\n\n _updateAriaExpanded(opened, toggleElement) {\n toggleElement && toggleElement.setAttribute('aria-expanded', opened);\n }\n\n _updateValueSlot() {\n this.opened = false;\n this._valueElement.innerHTML = '';\n\n const selected = this._items[this._menuElement.selected];\n\n const hasContent = this._hasContent(selected);\n\n // Toggle visibility of _valueElement vs fallback input with placeholder\n this._valueElement.slot = hasContent ? 'value' : '';\n\n // Ensure the slot distribution to apply correct style scope for cloned item\n if (hasContent && window.ShadyDOM) {\n window.ShadyDOM.flush();\n }\n\n this._attachSelectedItem(selected);\n\n if (!this._valueChanging && selected) {\n this._selectedChanging = true;\n this.value = selected.value || '';\n delete this._selectedChanging;\n }\n }\n\n _updateSelectedItem(value, items) {\n if (items) {\n this._menuElement.selected = items.reduce((prev, item, idx) => {\n return prev === undefined && item.value === value ? idx : prev;\n }, undefined);\n if (!this._selectedChanging) {\n this._valueChanging = true;\n this._updateValueSlot();\n delete this._valueChanging;\n }\n }\n }\n\n /** @override */\n _setFocused(focused) {\n // Keep `focused` state when opening the overlay for styling purpose.\n super._setFocused(this.opened || focused);\n this.focusElement._setFocused(this.hasAttribute('focused'));\n !this.hasAttribute('focused') && this.validate();\n }\n\n _setPosition() {\n const inputRect = this._inputElement.shadowRoot.querySelector('[part~=\"input-field\"]').getBoundingClientRect();\n const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);\n const bottomAlign = inputRect.top > (viewportHeight - inputRect.height) / 2;\n\n this._overlayElement.style.left = inputRect.left + 'px';\n if (bottomAlign) {\n this._overlayElement.setAttribute('bottom-aligned', '');\n this._overlayElement.style.removeProperty('top');\n this._overlayElement.style.bottom = (viewportHeight - inputRect.bottom) + 'px';\n } else {\n this._overlayElement.removeAttribute('bottom-aligned');\n this._overlayElement.style.removeProperty('bottom');\n this._overlayElement.style.top = inputRect.top + 'px';\n }\n\n this._overlayElement.updateStyles({'--vaadin-dropdown-menu-text-field-width': inputRect.width + 'px'});\n }\n\n /**\n * Returns true if `value` is valid, and sets the `invalid` flag appropriately.\n *\n * @return {boolean} True if the value is valid and sets the `invalid` flag appropriately\n */\n validate() {\n return !(this.invalid = !(this.disabled || !this.required || this.value));\n }\n}\n\ncustomElements.define(DropdownMenuElement.is, DropdownMenuElement);\n\nexport { DropdownMenuElement };\n","import '@vaadin/vaadin-material-styles/mixins/overlay.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n","import '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/typography.js';\nimport '@vaadin/vaadin-material-styles/shadow.js';\nimport '@vaadin/vaadin-button/theme/material/vaadin-button.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n","import '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/typography.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n","import './vaadin-date-picker-overlay.js';\nimport './vaadin-date-picker-overlay-content.js';\nimport './vaadin-month-calendar.js';\nimport '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';\nimport '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/mixins/field-button.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n","import './vaadin-text-field-styles.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\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 { TextFieldMixin } from './vaadin-text-field-mixin.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\n/**\n * `` is a Web Component for text area control in forms.\n *\n * ```html\n * \n * \n * ```\n *\n * ### Prefixes and suffixes\n *\n * These are child elements of a `` that are displayed\n * inline with the input, before or after.\n * In order for an element to be considered as a prefix, it must have the slot\n * attribute set to `prefix` (and similarly for `suffix`).\n *\n * ```html\n * \n * Details:
\n * The end!
\n * \n * ```\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ----------------|----------------\n * `label` | The label element\n * `input-field` | The element that wraps prefix, value and suffix\n * `value` | The text value element inside the `input-field` element\n * `error-message` | The error message element\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -------------|-------------|------------\n * `disabled` | Set to a disabled text field | :host\n * `has-value` | Set when the element has a value | :host\n * `has-label` | Set when the element has a label | :host\n * `invalid` | Set when the element is invalid | :host\n * `focused` | Set when the element is focused | :host\n * `focus-ring` | Set when the element is keyboard focused | :host\n * `readonly` | Set to a readonly text field | :host\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @mixes Vaadin.TextFieldMixin\n * @mixes Vaadin.ThemableMixin\n * @demo demo/index.html\n */\nclass TextAreaElement extends ElementMixin(TextFieldMixin(ThemableMixin(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
[[errorMessage]]
\n\n
\n
\n\n
\n \n
\n\n
[[errorMessage]]
\n\n
\n \n \n \n \n \n \n
\n \n \n`;\n }\n\n static get is() {\n return 'vaadin-combo-box-dropdown-wrapper';\n }\n\n static get properties() {\n return {\n /**\n * True if the device supports touch events.\n */\n touchDevice: {\n type: Boolean,\n value: TOUCH_DEVICE\n },\n\n opened: Boolean,\n\n /**\n * The element to position/align the dropdown by.\n */\n positionTarget: {\n type: Object\n },\n\n /**\n * Custom function for rendering the content of the `` propagated from the combo box element.\n */\n renderer: Function,\n\n /**\n * `true` when new items are being loaded.\n */\n loading: {\n type: Boolean,\n value: false,\n reflectToAttribute: true,\n observer: '_setOverlayHeight'\n },\n\n /**\n * Used to propagate the `theme` attribute from the host element.\n */\n theme: String,\n\n _selectedItem: {\n type: Object\n },\n\n _items: {\n type: Object\n },\n\n _focusedIndex: {\n type: Number,\n value: -1,\n observer: '_focusedIndexChanged'\n },\n\n _focusedItem: {\n type: String,\n computed: '_getFocusedItem(_focusedIndex)'\n },\n\n _itemLabelPath: {\n type: String,\n value: 'label'\n },\n\n _itemValuePath: {\n type: String,\n value: 'value'\n },\n\n _selector: Object,\n\n _itemIdPath: String\n };\n }\n\n static get observers() {\n return ['_selectorChanged(_selector)', '_loadingChanged(loading)', '_openedChanged(opened, _items, loading)'];\n }\n\n _fireTouchAction(sourceEvent) {\n this.dispatchEvent(new CustomEvent('vaadin-overlay-touch-action', {\n detail: {sourceEvent: sourceEvent}\n }));\n }\n\n _getItems(opened, items) {\n return opened ? items : [];\n }\n\n _openedChanged(opened, items, loading) {\n if (this.$.dropdown.hasAttribute('disable-upgrade')) {\n if (!opened) {\n return;\n } else {\n this._initDropdown();\n }\n }\n // Do not attach if no items\n // Do not dettach if opened but user types an invalid search\n this.$.dropdown.opened = !!(opened && (loading || this.$.dropdown.opened || items && items.length));\n }\n\n _initDropdown() {\n this.$.dropdown.removeAttribute('disable-upgrade');\n\n this._templateChanged();\n this._loadingChanged(this.loading);\n\n this.$.dropdown.$.overlay.addEventListener('touchend', e => this._fireTouchAction(e));\n this.$.dropdown.$.overlay.addEventListener('touchmove', e => this._fireTouchAction(e));\n\n // Prevent blurring the input when clicking inside the overlay.\n this.$.dropdown.$.overlay.addEventListener('mousedown', e => e.preventDefault());\n\n // IE11: when scrolling with mouse, the focus goes to the scroller.\n // This causes the overlay closing due to defocusing the input field.\n // Prevent focusing the scroller by setting `unselectable=\"on\"`.\n if (/Trident/.test(navigator.userAgent)) {\n this._scroller.setAttribute('unselectable', 'on');\n }\n }\n\n _templateChanged(e) {\n if (this.$.dropdown.hasAttribute('disable-upgrade')) {\n return;\n }\n\n this._selector = this.$.dropdown.$.overlay.content.querySelector('#selector');\n this._scroller = this.$.dropdown.$.overlay.content.querySelector('#scroller');\n }\n\n _loadingChanged(loading) {\n if (this.$.dropdown.hasAttribute('disable-upgrade')) {\n return;\n }\n\n if (loading) {\n this.$.dropdown.$.overlay.setAttribute('loading', '');\n } else {\n this.$.dropdown.$.overlay.removeAttribute('loading');\n }\n }\n\n _selectorChanged(selector) {\n this._patchWheelOverScrolling();\n }\n\n _setOverlayHeight() {\n if (!this.opened || !this.positionTarget || !this._selector) {\n return;\n }\n\n const targetRect = this.positionTarget.getBoundingClientRect();\n\n this._scroller.style.maxHeight = (window.ShadyCSS ?\n window.ShadyCSS.getComputedStyleValue(this, '--vaadin-combo-box-overlay-max-height') :\n getComputedStyle(this).getPropertyValue('--vaadin-combo-box-overlay-max-height')) || '65vh';\n\n const maxHeight = this._maxOverlayHeight(targetRect);\n\n // overlay max height is restrained by the #scroller max height which is set to 65vh in CSS.\n this.$.dropdown.$.overlay.style.maxHeight = maxHeight;\n\n // we need to set height for iron-list to make its `firstVisibleIndex` work correctly.\n this._selector.style.maxHeight = maxHeight;\n\n this.updateViewportBoundaries();\n }\n\n _maxOverlayHeight(targetRect) {\n const margin = 8;\n const minHeight = 116; // Height of two items in combo-box\n const bottom = Math.min(window.innerHeight, document.body.scrollHeight - document.body.scrollTop);\n\n if (this.$.dropdown.alignedAbove) {\n return Math.max(targetRect.top - margin + Math.min(document.body.scrollTop, 0), minHeight) + 'px';\n } else {\n return Math.max(bottom - targetRect.bottom - margin, minHeight) + 'px';\n }\n }\n\n _getFocusedItem(focusedIndex) {\n if (focusedIndex >= 0) {\n return this._items[focusedIndex];\n }\n }\n\n _isItemSelected(item, selectedItem, itemIdPath) {\n if (item instanceof ComboBoxPlaceholder) {\n return false;\n } else if (itemIdPath && item !== undefined && selectedItem !== undefined) {\n return this.get(itemIdPath, item) === this.get(itemIdPath, selectedItem);\n } else {\n return item === selectedItem;\n }\n }\n\n _onItemClick(e) {\n if (e.detail && e.detail.sourceEvent && e.detail.sourceEvent.stopPropagation) {\n this._stopPropagation(e.detail.sourceEvent);\n }\n\n this.dispatchEvent(new CustomEvent('selection-changed', {detail: {item: e.model.item}}));\n }\n\n /**\n * Gets the index of the item with the provided label.\n * @return {Number}\n */\n indexOfLabel(label) {\n if (this._items && label) {\n for (let i = 0; i < this._items.length; i++) {\n if (this.getItemLabel(this._items[i]).toString().toLowerCase() ===\n label.toString().toLowerCase()) {\n return i;\n }\n }\n }\n\n return -1;\n }\n\n /**\n * If dataProvider is used, dispatch a request for the item’s index if\n * the item is a placeholder object.\n *\n * @return {Number}\n */\n __requestItemByIndex(item, index) {\n if ((item instanceof ComboBoxPlaceholder) && index !== undefined) {\n this.dispatchEvent(new CustomEvent('index-requested', {detail: {index}}));\n }\n\n return index;\n }\n\n /**\n * Gets the label string for the item based on the `_itemLabelPath`.\n * @return {String}\n */\n getItemLabel(item, itemLabelPath) {\n itemLabelPath = itemLabelPath || this._itemLabelPath;\n let label = item && itemLabelPath ? this.get(itemLabelPath, item) : undefined;\n if (label === undefined || label === null) {\n label = item ? item.toString() : '';\n }\n return label;\n }\n\n _isItemFocused(focusedIndex, itemIndex) {\n return focusedIndex == itemIndex;\n }\n\n _getAriaSelected(focusedIndex, itemIndex) {\n return this._isItemFocused(focusedIndex, itemIndex).toString();\n }\n\n _getAriaRole(itemIndex) {\n return itemIndex !== undefined ? 'option' : false;\n }\n\n _focusedIndexChanged(index) {\n if (index >= 0) {\n this._scrollIntoView(index);\n }\n }\n\n _scrollIntoView(index) {\n const visibleItemsCount = this._visibleItemsCount();\n if (visibleItemsCount === undefined) {\n // Scroller is not visible. Moving is unnecessary.\n return;\n }\n\n let targetIndex = index;\n\n if (index > this._selector.lastVisibleIndex - 1) {\n // Index is below the bottom, scrolling down. Make the item appear at the bottom.\n targetIndex = index - visibleItemsCount + 1;\n } else if (index > this._selector.firstVisibleIndex) {\n // The item is already visible, scrolling is unnecessary per se. But we need to trigger iron-list to set\n // the correct scrollTop on the scrollTarget. Scrolling to firstVisibleIndex.\n targetIndex = this._selector.firstVisibleIndex;\n }\n this._selector.scrollToIndex(Math.max(0, targetIndex));\n\n // Sometimes the item is partly below the bottom edge, detect and adjust.\n const pidx = this._selector._getPhysicalIndex(index),\n physicalItem = this._selector._physicalItems[pidx];\n if (!physicalItem) {\n return;\n }\n const physicalItemRect = physicalItem.getBoundingClientRect(),\n scrollerRect = this._scroller.getBoundingClientRect(),\n scrollTopAdjust = physicalItemRect.bottom - scrollerRect.bottom + this._viewportTotalPaddingBottom;\n if (scrollTopAdjust > 0) {\n this._scroller.scrollTop += scrollTopAdjust;\n }\n }\n\n ensureItemsRendered() {\n this._selector._render();\n }\n\n adjustScrollPosition() {\n if (this.opened && this._items) {\n this._scrollIntoView(this._focusedIndex);\n }\n }\n\n /**\n * We want to prevent the kinetic scrolling energy from being transferred from the overlay contents over to the parent.\n * Further improvement ideas: after the contents have been scrolled to the top or bottom and scrolling has stopped, it could allow\n * scrolling the parent similarly to touch scrolling.\n */\n _patchWheelOverScrolling() {\n const selector = this._selector;\n selector.addEventListener('wheel', e => {\n const scroller = selector._scroller || selector.scrollTarget;\n const scrolledToTop = scroller.scrollTop === 0;\n const scrolledToBottom = (scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight) <= 1;\n\n if (scrolledToTop && e.deltaY < 0) {\n e.preventDefault();\n } else if (scrolledToBottom && e.deltaY > 0) {\n e.preventDefault();\n }\n });\n }\n\n updateViewportBoundaries() {\n this._cachedViewportTotalPaddingBottom = undefined;\n this._selector.updateViewportBoundaries();\n }\n\n get _viewportTotalPaddingBottom() {\n if (this._cachedViewportTotalPaddingBottom === undefined) {\n const itemsStyle = window.getComputedStyle(this._selector.$.items);\n this._cachedViewportTotalPaddingBottom = [\n itemsStyle.paddingBottom,\n itemsStyle.borderBottomWidth\n ].map(v => {\n return parseInt(v, 10);\n }).reduce((sum, v) => {\n return sum + v;\n });\n }\n\n return this._cachedViewportTotalPaddingBottom;\n }\n\n _visibleItemsCount() {\n if (!this._selector) {\n return;\n }\n\n // Ensure items are rendered\n this._selector.flushDebouncer('_debounceTemplate');\n // Ensure items are positioned\n this._selector.scrollToIndex(this._selector.firstVisibleIndex);\n // Ensure viewport boundaries are up-to-date\n this.updateViewportBoundaries();\n return this._selector.lastVisibleIndex - this._selector.firstVisibleIndex + 1;\n }\n\n _selectItem(item) {\n item = (typeof item === 'number') ? this._items[item] : item;\n if (this._selector.selectedItem !== item) {\n this._selector.selectItem(item);\n }\n }\n\n _preventDefault(e) {\n if (e.cancelable) {\n e.preventDefault();\n }\n }\n\n _stopPropagation(e) {\n e.stopPropagation();\n }\n\n _hidden(itemsChange) {\n return !this.loading && (!this._items || !this._items.length);\n }\n}\n\ncustomElements.define(ComboBoxDropdownWrapperElement.is, ComboBoxDropdownWrapperElement);\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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport { ComboBoxMixin } from './vaadin-combo-box-mixin.js';\nimport { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';\nimport './vaadin-combo-box-dropdown-wrapper.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { dashToCamelCase } from '@polymer/polymer/lib/utils/case-map.js';\n/**\n * `` is a customizable version of the `` providing\n * only the dropdown functionality and leaving the input field definition to the user.\n *\n * The element has the same API as ``.\n *\n * To create a custom input field, you need to add a child element which has a two-way\n * data-bindable property representing the input value. The property name is expected\n * to be `value` by default. See the example below for a simplest possible example\n * using a `` element.\n *\n * ```html\n * \n * \n * \n * \n * ```\n *\n * If you are using other custom input fields like ``, you\n * need to define the name of the bindable property with the `attrForValue` attribute.\n *\n * ```html\n * \n * \n * \n * \n * \n * ```\n *\n * In the next example you can see how to create a custom input field based\n * on a `` decorated with a custom `` and\n * two ``s to act as the clear and toggle controls.\n *\n * ```html\n * \n * \n * \n * Clear\n * Toggle\n * \n * \n * ```\n * @memberof Vaadin\n * @mixes Vaadin.ComboBoxDataProviderMixin\n * @mixes Vaadin.ComboBoxMixin\n * @mixes Vaadin.ThemableMixin\n * @mixes Vaadin.ThemePropertyMixin\n */\nclass ComboBoxLightElement extends\n ThemePropertyMixin(\n ThemableMixin(\n ComboBoxDataProviderMixin(\n ComboBoxMixin(PolymerElement)))) {\n static get template() {\n return html`\n \n\n \n \n`;\n }\n\n static get is() {\n return 'vaadin-combo-box-light';\n }\n\n static get properties() {\n return {\n /**\n * Name of the two-way data-bindable property representing the\n * value of the custom input field.\n */\n attrForValue: {\n type: String,\n value: 'value'\n },\n\n inputElement: {\n type: Element,\n readOnly: true\n }\n };\n }\n\n constructor() {\n super();\n this._boundInputValueChanged = this._inputValueChanged.bind(this);\n }\n\n ready() {\n super.ready();\n this._toggleElement = this.querySelector('.toggle-button');\n this._clearElement = this.querySelector('.clear-button');\n }\n\n get focused() {\n return this.getRootNode().activeElement === this.inputElement;\n }\n\n connectedCallback() {\n super.connectedCallback();\n const cssSelector = 'vaadin-text-field,iron-input,paper-input,.paper-input-input,.input';\n this._setInputElement(this.querySelector(cssSelector));\n this._revertInputValue();\n this.inputElement.addEventListener('input', this._boundInputValueChanged);\n this._preventInputBlur();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.inputElement.removeEventListener('input', this._boundInputValueChanged);\n this._restoreInputBlur();\n }\n\n get _propertyForValue() {\n return dashToCamelCase(this.attrForValue);\n }\n\n get _inputElementValue() {\n return this.inputElement && this.inputElement[this._propertyForValue];\n }\n\n set _inputElementValue(value) {\n if (this.inputElement) {\n this.inputElement[this._propertyForValue] = value;\n }\n }\n}\n\ncustomElements.define(ComboBoxLightElement.is, ComboBoxLightElement);\n\nexport { ComboBoxLightElement };\n","import '@vaadin/vaadin-material-styles/color.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * `` is a Web Component for radio buttons.\n *\n * ```html\n * Foo\n * ```\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ------------------|----------------\n * `radio` | The radio button element\n * `label` | The label content element\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -----------|-------------|------------\n * `disabled` | Set when the radio button is disabled. | :host\n * `focus-ring` | Set when the radio button is focused using the keyboard. | :host\n * `focused` | Set when the radio button is focused. | :host\n * `checked` | Set when the radio button is checked. | :host\n * `empty` | Set when there is no label provided. | label\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @mixes Vaadin.ElementMixin\n * @mixes Vaadin.ControlStateMixin\n * @mixes Vaadin.ThemableMixin\n * @mixes Polymer.GestureEventListeners\n * @element vaadin-radio-button\n * @demo demo/index.html\n */\nclass RadioButtonElement extends\n ElementMixin(\n ControlStateMixin(\n ThemableMixin(\n GestureEventListeners(PolymerElement)))) {\n static get template() {\n return html`\n \n\n \n`;\n }\n\n static get is() {\n return 'vaadin-radio-button';\n }\n\n static get version() {\n return '1.2.6';\n }\n\n static get properties() {\n return {\n /**\n * True if the radio button is checked.\n */\n checked: {\n type: Boolean,\n value: false,\n notify: true,\n observer: '_checkedChanged',\n reflectToAttribute: true\n },\n\n /**\n * Name of the element.\n */\n name: String,\n\n /**\n * The value for this element.\n */\n value: {\n type: String,\n value: 'on'\n }\n };\n }\n\n get name() {\n return this.checked ? this._storedName : '';\n }\n\n set name(name) {\n this._storedName = name;\n }\n\n /**\n * @protected\n */\n attributeChangedCallback(prop, oldVal, newVal) {\n super.attributeChangedCallback(prop, oldVal, newVal);\n // Needed until Edge has CSS Custom Properties (present in Edge Preview)\n /* istanbul ignore if */\n if (/^(disabled|checked)$/.test(prop)) {\n // iOS 10.3 Safari has an issue with repainting shadow root element styles when a host attribute changes.\n // Need this workaround (toggle any inline css property on and off) until we drop iOS 10.\n const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;\n /* istanbul ignore if */\n if (isIOS && this.shadowRoot && parseInt(navigator.appVersion.match(/OS (\\d+)_(\\d+)_?(\\d+)?/)[1], 10)) {\n const WEBKIT_PROPERTY = '-webkit-backface-visibility';\n this.shadowRoot.querySelectorAll('*').forEach(el => {\n el.style[WEBKIT_PROPERTY] = 'visible';\n el.style[WEBKIT_PROPERTY] = '';\n });\n }\n }\n }\n\n\n ready() {\n super.ready();\n\n this.setAttribute('role', 'radio');\n\n this._addListeners();\n\n const attrName = this.getAttribute('name');\n if (attrName) {\n this.name = attrName;\n }\n\n this.shadowRoot.querySelector('[part~=\"label\"]').querySelector('slot')\n .addEventListener('slotchange', this._updateLabelAttribute.bind(this));\n\n this._updateLabelAttribute();\n }\n\n _updateLabelAttribute() {\n const label = this.shadowRoot.querySelector('[part~=\"label\"]');\n const assignedNodes = label.firstElementChild.assignedNodes();\n if (this._isAssignedNodesEmpty(assignedNodes)) {\n label.setAttribute('empty', '');\n } else {\n label.removeAttribute('empty');\n }\n }\n\n _isAssignedNodesEmpty(nodes) {\n // The assigned nodes considered to be empty if there is no slotted content or only one empty text node\n return nodes.length === 0 ||\n (nodes.length == 1\n && nodes[0].nodeType == Node.TEXT_NODE\n && nodes[0].textContent.trim() === '');\n }\n\n _checkedChanged(checked) {\n this.setAttribute('aria-checked', checked);\n }\n\n _addListeners() {\n this._addEventListenerToNode(this, 'down', (e) => {\n if (!this.disabled) {\n this.setAttribute('active', '');\n }\n });\n\n this._addEventListenerToNode(this, 'up', (e) => {\n this.removeAttribute('active');\n\n if (!this.checked && !this.disabled) {\n // If you change this block, please test manually that radio-button and\n // radio-group still works ok on iOS 12/13 and up as it may cause\n // an issue that is not possible to test programmatically.\n // See: https://github.com/vaadin/vaadin-radio-button/issues/140\n this.click();\n }\n });\n\n this.addEventListener('keydown', e => {\n if (!this.disabled && e.keyCode === 32) {\n e.preventDefault();\n this.setAttribute('active', '');\n }\n });\n\n this.addEventListener('keyup', e => {\n if (!this.disabled && e.keyCode === 32) {\n e.preventDefault();\n this.click();\n this.removeAttribute('active');\n }\n });\n }\n\n /**\n * Toggles the radio button, so that the native `change` event\n * is dispatched. Overrides the standard `HTMLElement.prototype.click`.\n * @protected\n */\n click() {\n // If you change this block, please test manually that radio-button and\n // radio-group still works ok on iOS 12/13 and up as it may cause\n // an issue that is not possible to test programmatically.\n // See: https://github.com/vaadin/vaadin-radio-button/issues/140\n if (!this.disabled) {\n this.shadowRoot.querySelector('input').dispatchEvent(new MouseEvent('click'));\n }\n }\n\n /** @protected */\n get focusElement() {\n return this.shadowRoot.querySelector('input');\n }\n\n _onChange(e) {\n this.checked = e.target.checked;\n // In the Shadow DOM, the `change` event is not leaked into the\n // ancestor tree, so we must do this manually.\n const changeEvent = new CustomEvent('change', {\n detail: {\n sourceEvent: e\n },\n bubbles: e.bubbles,\n cancelable: e.cancelable,\n });\n this.dispatchEvent(changeEvent);\n }\n\n /**\n * Fired when the user toggles the radio button.\n *\n * @event change\n */\n}\n\ncustomElements.define(RadioButtonElement.is, RadioButtonElement);\n\n\nexport { RadioButtonElement };\n","import '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/typography.js';\nimport '@vaadin/vaadin-button/theme/material/vaadin-button.js';\nimport '@vaadin/vaadin-progress-bar/theme/material/vaadin-progress-bar.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\n \n \n \n\n \n \n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n","import '@polymer/polymer/lib/elements/custom-style.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `\n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\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/*\n FIXME(polymer-modulizer): the above comments were extracted\n from HTML and may be out of place here. Review them and\n then delete this comment!\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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport '@vaadin/vaadin-progress-bar/src/vaadin-progress-bar.js';\nimport './vaadin-upload-icons.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\n/**\n * `` element represents a file in the file list of ``.\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ---|---\n * `row` | File container\n * `info` | Container for file status icon, file name, status and error messages\n * `done-icon` | File done status icon\n * `warning-icon` | File warning status icon\n * `meta` | Container for file name, status and error messages\n * `name` | File name\n * `error` | Error message, shown when error happens\n * `status` | Status message\n * `commands` | Container for file command icons\n * `start-button` | Start file upload button\n * `retry-button` | Retry file upload button\n * `clear-button` | Clear file button\n * `progress`| Progress bar\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * ---|---|---\n * `error` | An error has happened during uploading | `:host`\n * `indeterminate` | Uploading is in progress, but the progress value is unknown | `:host`\n * `uploading` | Uploading is in progress | `:host`\n * `complete` | Uploading has finished successfully | `:host`\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @mixes Vaadin.ThemableMixin\n * @demo demo/index.html\n */\nclass UploadFileElement extends ThemableMixin(PolymerElement) {\n static get template() {\n return html`\n \n\n \n
\n
\n
\n\n
\n
[[file.name]]
\n
[[file.status]]
\n
[[file.error]]
\n
\n
\n
\n
\n
\n \n \n [[_i18nPlural(maxFiles, i18n.addFiles, i18n.addFiles.*)]]\n \n \n
\n
\n
\n \n \n
\n [[_i18nPlural(maxFiles, i18n.dropFiles, i18n.dropFiles.*)]]\n \n
\n
\n \n \n \n
\n \n \n \n`;\n }\n\n static get is() {\n return 'vaadin-upload';\n }\n\n static get version() {\n return '4.2.2';\n }\n\n static get properties() {\n return {\n /**\n * Define whether the element supports dropping files on it for uploading.\n * By default it's enabled in desktop and disabled in touch devices\n * because mobile devices do not support drag events in general. Setting\n * it false means that drop is enabled even in touch-devices, and true\n * disables drop in all devices.\n *\n * @default true in touch-devices, false otherwise.\n */\n nodrop: {\n type: Boolean,\n reflectToAttribute: true,\n value: function() {\n try {\n return !!document.createEvent('TouchEvent');\n } catch (e) {\n return false;\n }\n }\n },\n\n /**\n * The server URL. The default value is an empty string, which means that\n * _window.location_ will be used.\n */\n target: {\n type: String,\n value: ''\n },\n\n /**\n * HTTP Method used to send the files. Only POST and PUT are allowed.\n */\n method: {\n type: String,\n value: 'POST'\n },\n\n /**\n * Key-Value map to send to the server. If you set this property as an\n * attribute, use a valid JSON string, for example:\n * ```\n * \n * ```\n */\n headers: {\n type: Object,\n value: {}\n },\n\n /**\n * Max time in milliseconds for the entire upload process, if exceeded the\n * request will be aborted. Zero means that there is no timeout.\n *\n */\n timeout: {\n type: Number,\n value: 0\n },\n\n _dragover: {\n type: Boolean,\n value: false,\n observer: '_dragoverChanged'\n },\n\n /**\n * The array of files being processed, or already uploaded.\n *\n * Each element is a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)\n * object with a number of extra properties to track the upload process:\n * - `uploadTarget`: The target URL used to upload this file.\n * - `elapsed`: Elapsed time since the upload started.\n * - `elapsedStr`: Human-readable elapsed time.\n * - `remaining`: Number of seconds remaining for the upload to finish.\n * - `remainingStr`: Human-readable remaining time for the upload to finish.\n * - `progress`: Percentage of the file already uploaded.\n * - `speed`: Upload speed in kB/s.\n * - `size`: File size in bytes.\n * - `totalStr`: Human-readable total size of the file.\n * - `loaded`: Bytes transferred so far.\n * - `loadedStr`: Human-readable uploaded size at the moment.\n * - `status`: Status of the upload process.\n * - `error`: Error message in case the upload failed.\n * - `abort`: True if the file was canceled by the user.\n * - `complete`: True when the file was transferred to the server.\n * - `uploading`: True while transferring data to the server.\n */\n files: {\n type: Array,\n notify: true,\n value: function() {\n return [];\n }\n },\n\n /**\n * Limit of files to upload, by default it is unlimited. If the value is\n * set to one, native file browser will prevent selecting multiple files.\n */\n maxFiles: {\n type: Number,\n value: Infinity\n },\n\n /**\n * Specifies if the maximum number of files have been uploaded\n */\n maxFilesReached: {\n type: Boolean,\n value: false,\n notify: true,\n readOnly: true,\n computed: '_maxFilesAdded(maxFiles, files.length)'\n },\n\n /**\n * Specifies the types of files that the server accepts.\n * Syntax: a comma-separated list of MIME type patterns (wildcards are\n * allowed) or file extensions.\n * Notice that MIME types are widely supported, while file extensions\n * are only implemented in certain browsers, so avoid using it.\n * Example: accept=\"video/*,image/tiff\" or accept=\".pdf,audio/mp3\"\n */\n accept: {\n type: String,\n value: ''\n },\n\n /**\n * Specifies the maximum file size in bytes allowed to upload.\n * Notice that it is a client-side constraint, which will be checked before\n * sending the request. Obviously you need to do the same validation in\n * the server-side and be sure that they are aligned.\n */\n maxFileSize: {\n type: Number,\n value: Infinity\n },\n\n /**\n * Specifies if the dragover is validated with maxFiles and\n * accept properties.\n */\n _dragoverValid: {\n type: Boolean,\n value: false,\n observer: '_dragoverValidChanged'\n },\n\n /**\n * Specifies the 'name' property at Content-Disposition\n */\n formDataName: {\n type: String,\n value: 'file'\n },\n\n /**\n * Prevents upload(s) from immediately uploading upon adding file(s).\n * When set, you must manually trigger uploads using the `uploadFiles` method\n */\n noAuto: {\n type: Boolean,\n value: false\n },\n\n /**\n * Set the withCredentials flag on the request.\n */\n withCredentials: {\n type: Boolean,\n value: false\n },\n\n /**\n * Pass-through to input's capture attribute. Allows user to trigger device inputs\n * such as camera or microphone immediately.\n */\n capture: String,\n\n /**\n * The object used to localize this component.\n * For changing the default localization, change 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 dropFiles: {\n one: 'Drop file here\n many: 'Drop files here\n },\n addFiles: {\n one: 'Select File...',\n many: 'Upload Files...'\n },\n cancel: 'Cancel',\n error: {\n tooManyFiles: 'Too Many Files.',\n fileIsTooBig: 'File is Too Big.',\n incorrectFileType: 'Incorrect File Type.'\n },\n uploading: {\n status: {\n connecting: 'Connecting...',\n stalled: 'Stalled.',\n processing: 'Processing File...',\n held: 'Queued'\n },\n remainingTime: {\n prefix: 'remaining time: ',\n unknown: 'unknown remaining time'\n },\n error: {\n serverUnavailable: 'Server Unavailable',\n unexpectedServerError: 'Unexpected Server Error',\n forbidden: 'Forbidden'\n }\n },\n units: {\n size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n },\n formatSize: function(bytes) {\n // returns the size followed by the best suitable unit\n },\n formatTime: function(seconds, [secs, mins, hours]) {\n // returns a 'HH:MM:SS' string\n }\n }\n\n *\n * @default {English}\n */\n i18n: {\n type: Object,\n value: function() {\n return {\n dropFiles: {\n one: 'Drop file here',\n many: 'Drop files here'\n },\n addFiles: {\n one: 'Upload File...',\n many: 'Upload Files...'\n },\n cancel: 'Cancel',\n error: {\n tooManyFiles: 'Too Many Files.',\n fileIsTooBig: 'File is Too Big.',\n incorrectFileType: 'Incorrect File Type.'\n },\n uploading: {\n status: {\n connecting: 'Connecting...',\n stalled: 'Stalled.',\n processing: 'Processing File...',\n held: 'Queued'\n },\n remainingTime: {\n prefix: 'remaining time: ',\n unknown: 'unknown remaining time'\n },\n error: {\n serverUnavailable: 'Server Unavailable',\n unexpectedServerError: 'Unexpected Server Error',\n forbidden: 'Forbidden'\n }\n },\n units: {\n size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']\n }\n };\n }\n }\n };\n }\n\n ready() {\n super.ready();\n this.addEventListener('dragover', this._onDragover.bind(this));\n this.addEventListener('dragleave', this._onDragleave.bind(this));\n this.addEventListener('drop', this._onDrop.bind(this));\n this.addEventListener('file-retry', this._onFileRetry.bind(this));\n this.addEventListener('file-abort', this._onFileAbort.bind(this));\n this.addEventListener('file-remove', this._onFileRemove.bind(this));\n this.addEventListener('file-start', this._onFileStart.bind(this));\n }\n\n _formatSize(bytes) {\n if (typeof this.i18n.formatSize === 'function') {\n return this.i18n.formatSize(bytes);\n }\n\n // https://wiki.ubuntu.com/UnitsPolicy\n const base = this.i18n.units.sizeBase || 1000;\n const unit = ~~(Math.log(bytes) / Math.log(base));\n const dec = Math.max(0, Math.min(3, unit - 1));\n const size = parseFloat((bytes / Math.pow(base, unit)).toFixed(dec));\n return size + ' ' + this.i18n.units.size[unit];\n }\n\n _splitTimeByUnits(time) {\n const unitSizes = [60, 60, 24, Infinity];\n const timeValues = [0];\n\n for (var i = 0; i < unitSizes.length && time > 0; i++) {\n timeValues[i] = time % unitSizes[i];\n time = Math.floor(time / unitSizes[i]);\n }\n\n return timeValues;\n }\n\n _formatTime(seconds, split) {\n if (typeof this.i18n.formatTime === 'function') {\n return this.i18n.formatTime(seconds, split);\n }\n\n // Fill HH:MM:SS with leading zeros\n while (split.length < 3) {\n split.push(0);\n }\n\n return split\n .reverse()\n .map((number) => {\n return (number < 10 ? '0' : '') + number;\n })\n .join(':');\n }\n\n _formatFileProgress(file) {\n return file.totalStr + ': ' +\n file.progress + '% (' +\n (file.loaded > 0 ?\n this.i18n.uploading.remainingTime.prefix + file.remainingStr :\n this.i18n.uploading.remainingTime.unknown) +\n ')';\n }\n\n _maxFilesAdded(maxFiles, numFiles) {\n return maxFiles >= 0 && numFiles >= maxFiles;\n }\n\n _onDragover(event) {\n event.preventDefault();\n if (!this.nodrop && !this._dragover) {\n this._dragoverValid = !this.maxFilesReached;\n this._dragover = true;\n }\n event.dataTransfer.dropEffect = !this._dragoverValid || this.nodrop ? 'none' : 'copy';\n }\n\n _onDragleave(event) {\n event.preventDefault();\n if (this._dragover && !this.nodrop) {\n this._dragover = this._dragoverValid = false;\n }\n }\n\n _onDrop(event) {\n if (!this.nodrop) {\n event.preventDefault();\n this._dragover = this._dragoverValid = false;\n this._addFiles(event.dataTransfer.files);\n }\n }\n\n // Override for tests\n _createXhr() {\n return new XMLHttpRequest();\n }\n\n _configureXhr(xhr) {\n if (typeof this.headers == 'string') {\n try {\n this.headers = JSON.parse(this.headers);\n } catch (e) {\n this.headers = undefined;\n }\n }\n for (var key in this.headers) {\n xhr.setRequestHeader(key, this.headers[key]);\n }\n if (this.timeout) {\n xhr.timeout = this.timeout;\n }\n xhr.withCredentials = this.withCredentials;\n }\n\n _setStatus(file, total, loaded, elapsed) {\n file.elapsed = elapsed;\n file.elapsedStr = this._formatTime(file.elapsed, this._splitTimeByUnits(file.elapsed));\n file.remaining = Math.ceil(elapsed * (total / loaded - 1));\n file.remainingStr = this._formatTime(file.remaining, this._splitTimeByUnits(file.remaining));\n file.speed = ~~(total / elapsed / 1024);\n file.totalStr = this._formatSize(total);\n file.loadedStr = this._formatSize(loaded);\n file.status = this._formatFileProgress(file);\n }\n\n /**\n * Triggers the upload of any files that are not completed\n *\n * @param {Array} [files] - Files being uploaded. Defaults to all outstanding files\n */\n uploadFiles(files) {\n if (files && !Array.isArray(files)) {\n files = [files];\n }\n files = files || this.files;\n files = files.filter(file => (!file.complete));\n Array.prototype.forEach.call(files, this._uploadFile.bind(this));\n }\n\n _uploadFile(file) {\n if (file.uploading) {\n return;\n }\n\n const ini = Date.now();\n const xhr = file.xhr = this._createXhr(file);\n\n let stalledId, last;\n // onprogress is called always after onreadystatechange\n xhr.upload.onprogress = (e) => {\n clearTimeout(stalledId);\n\n last = Date.now();\n const elapsed = (last - ini) / 1000;\n const loaded = e.loaded, total = e.total, progress = ~~(loaded / total * 100);\n file.loaded = loaded;\n file.progress = progress;\n file.indeterminate = loaded <= 0 || loaded >= total;\n\n if (file.error) {\n file.indeterminate = file.status = undefined;\n } else if (!file.abort) {\n if (progress < 100) {\n this._setStatus(file, total, loaded, elapsed);\n stalledId = setTimeout(() => {\n file.status = this.i18n.uploading.status.stalled;\n this._notifyFileChanges(file);\n }, 2000);\n } else {\n file.loadedStr = file.totalStr;\n file.status = this.i18n.uploading.status.processing;\n file.uploading = false;\n }\n }\n\n this._notifyFileChanges(file);\n this.dispatchEvent(new CustomEvent('upload-progress', {detail: {file, xhr}}));\n };\n\n // More reliable than xhr.onload\n xhr.onreadystatechange = () => {\n if (xhr.readyState == 4) {\n clearTimeout(stalledId);\n file.indeterminate = file.uploading = false;\n if (file.abort) {\n this._notifyFileChanges(file);\n return;\n }\n file.status = '';\n // Custom listener can modify the default behavior either\n // preventing default, changing the xhr, or setting the file error\n const evt = this.dispatchEvent(\n new CustomEvent('upload-response', {\n detail: {file, xhr},\n cancelable: true\n })\n );\n\n if (!evt) {\n return;\n }\n if (xhr.status === 0) {\n file.error = this.i18n.uploading.error.serverUnavailable;\n } else if (xhr.status >= 500) {\n file.error = this.i18n.uploading.error.unexpectedServerError;\n } else if (xhr.status >= 400) {\n file.error = this.i18n.uploading.error.forbidden;\n }\n\n file.complete = !file.error;\n this.dispatchEvent(\n new CustomEvent(`upload-${file.error ? 'error' : 'success'}`, {\n detail: {file, xhr}\n })\n );\n this._notifyFileChanges(file);\n }\n };\n\n const formData = new FormData();\n\n file.uploadTarget = file.uploadTarget || this.target || '';\n file.formDataName = this.formDataName;\n\n const evt = this.dispatchEvent(\n new CustomEvent('upload-before', {\n detail: {file, xhr},\n cancelable: true\n })\n );\n if (!evt) {\n return;\n }\n\n formData.append(file.formDataName, file, file.name);\n\n xhr.open(this.method, file.uploadTarget, true);\n this._configureXhr(xhr);\n\n file.status = this.i18n.uploading.status.connecting;\n file.uploading = file.indeterminate = true;\n file.complete = file.abort = file.error = file.held = false;\n\n xhr.upload.onloadstart = () => {\n this.dispatchEvent(\n new CustomEvent('upload-start', {\n detail: {file, xhr}\n })\n );\n this._notifyFileChanges(file);\n };\n\n\n // Custom listener could modify the xhr just before sending it\n // preventing default\n const uploadEvt = this.dispatchEvent(\n new CustomEvent('upload-request', {\n detail: {file, xhr, formData},\n cancelable: true\n })\n );\n if (uploadEvt) {\n xhr.send(formData);\n }\n }\n\n _retryFileUpload(file) {\n const evt = this.dispatchEvent(\n new CustomEvent('upload-retry', {\n detail: {file, xhr: file.xhr},\n cancelable: true\n })\n );\n if (evt) {\n this._uploadFile(file);\n }\n }\n\n _abortFileUpload(file) {\n const evt = this.dispatchEvent(\n new CustomEvent('upload-abort', {\n detail: {file, xhr: file.xhr},\n cancelable: true\n })\n );\n if (evt) {\n file.abort = true;\n if (file.xhr) {\n file.xhr.abort();\n }\n this._notifyFileChanges(file);\n }\n }\n\n _notifyFileChanges(file) {\n var p = 'files.' + this.files.indexOf(file) + '.';\n for (var i in file) {\n if (file.hasOwnProperty(i)) {\n this.notifyPath(p + i, file[i]);\n }\n }\n }\n\n _addFiles(files) {\n Array.prototype.forEach.call(files, this._addFile.bind(this));\n }\n\n /**\n * Add the file for uploading. Called internally for each file after picking files from dialog or dropping files.\n *\n * @param {File} file File being added\n */\n _addFile(file) {\n if (this.maxFilesReached) {\n this.dispatchEvent(\n new CustomEvent('file-reject', {\n detail: {file, error: this.i18n.error.tooManyFiles}\n })\n );\n return;\n }\n if (this.maxFileSize >= 0 && file.size > this.maxFileSize) {\n this.dispatchEvent(\n new CustomEvent('file-reject', {\n detail: {file, error: this.i18n.error.fileIsTooBig}\n })\n );\n return;\n }\n const fileExt = file.name.match(/\\.[^\\.]*$|$/)[0];\n const re = new RegExp('^(' + this.accept.replace(/[, ]+/g, '|').replace(/\\/\\*/g, '/.*') + ')$', 'i');\n if (this.accept && !(re.test(file.type) || re.test(fileExt))) {\n this.dispatchEvent(\n new CustomEvent('file-reject', {\n detail: {file, error: this.i18n.error.incorrectFileType}\n })\n );\n return;\n }\n file.loaded = 0;\n file.held = true;\n file.status = this.i18n.uploading.status.held;\n this.unshift('files', file);\n\n if (!this.noAuto) {\n this._uploadFile(file);\n }\n }\n\n /**\n * Remove file from upload list. Called internally if file upload was canceled.\n * @param {File} file File to remove\n */\n _removeFile(file) {\n if (this.files.indexOf(file) > -1) {\n this.splice('files', this.files.indexOf(file), 1);\n }\n }\n\n _onAddFilesTouchEnd(e) {\n // Cancel the event to avoid the following click event\n e.preventDefault();\n // FIXME(platosha): workaround for Polymer Gestures mouseCanceller\n // cancelling the following synthetic click. See also:\n // https://github.com/Polymer/polymer/issues/5289\n this.__resetMouseCanceller();\n this._onAddFilesClick();\n }\n\n __resetMouseCanceller() {\n resetMouseCanceller();\n }\n\n _onAddFilesClick() {\n if (this.maxFilesReached) {\n return;\n }\n\n this.$.fileInput.value = '';\n this.$.fileInput.click();\n }\n\n _onFileInputChange(event) {\n this._addFiles(event.target.files);\n }\n\n _onFileStart(event) {\n this._uploadFile(event.detail.file);\n }\n\n _onFileRetry(event) {\n this._retryFileUpload(event.detail.file);\n }\n\n _onFileAbort(event) {\n this._abortFileUpload(event.detail.file);\n }\n\n _onFileRemove(event) {\n this._removeFile(event.detail.file);\n }\n\n _dragoverChanged(dragover) {\n dragover ? this.setAttribute('dragover', dragover) : this.removeAttribute('dragover');\n }\n\n _dragoverValidChanged(dragoverValid) {\n dragoverValid ? this.setAttribute('dragover-valid', dragoverValid) : this.removeAttribute('dragover-valid');\n }\n\n _i18nPlural(value, plural) {\n return value == 1 ? plural.one : plural.many;\n }\n\n _isMultiple(maxFiles) {\n return maxFiles != 1;\n }\n\n /**\n * Fired when a file cannot be added to the queue due to a constrain:\n * file-size, file-type or maxFiles\n *\n * @event file-reject\n * @param {Object} detail\n * @param {Object} detail.file the file added\n * @param {Object} detail.error the cause\n */\n\n /**\n * Fired before the XHR is opened. Could be used for changing the request\n * URL. If the default is prevented, then XHR would not be opened.\n *\n * @event upload-before\n * @param {Object} detail\n * @param {Object} detail.xhr the xhr\n * @param {Object} detail.file the file being uploaded\n * @param {Object} detail.file.uploadTarget the upload request URL, initialized with the value of vaadin-upload `target` property\n */\n\n /**\n * Fired when the XHR has been opened but not sent yet. Useful for appending\n * data keys to the FormData object, for changing some parameters like\n * headers, etc. If the event is defaultPrevented, `vaadin-upload` will not\n * send the request allowing the user to do something on his own.\n *\n * @event upload-request\n * @param {Object} detail\n * @param {Object} detail.xhr the xhr\n * @param {Object} detail.file the file being uploaded\n * @param {Object} detail.formData the FormData object\n */\n\n /**\n * Fired when the XHR is sent.\n *\n * @event upload-start\n * @param {Object} detail\n * @param {Object} detail.xhr the xhr\n * @param {Object} detail.file the file being uploaded\n */\n\n /**\n * Fired as many times as the progress is updated.\n *\n * @event upload-progress\n * @param {Object} detail\n * @param {Object} detail.xhr the xhr\n * @param {Object} detail.file the file being uploaded with loaded info\n */\n\n /**\n * Fired when we have the actual server response, and before the component\n * analyses it. It's useful for developers to make the upload fail depending\n * on the server response. If the event is defaultPrevented the vaadin-upload\n * will return allowing the user to do something on his own like retry the\n * upload, etc. since he has full access to the `xhr` and `file` objects.\n * Otherwise, if the event is not prevented default `vaadin-upload` continues\n * with the normal workflow checking the `xhr.status` and `file.error`\n * which also might be modified by the user to force a customized response.\n *\n * @event upload-response\n * @param {Object} detail\n * @param {Object} detail.xhr the xhr\n * @param {Object} detail.file the file being uploaded\n */\n\n /**\n * Fired in case the upload process succeed.\n *\n * @event upload-success\n * @param {Object} detail\n * @param {Object} detail.xhr the xhr\n * @param {Object} detail.file the file being uploaded with loaded info\n */\n\n /**\n * Fired in case the upload process failed.\n *\n * @event upload-error\n * @param {Object} detail\n * @param {Object} detail.xhr the xhr\n * @param {Object} detail.file the file being uploaded\n */\n\n /**\n * Fired when retry upload is requested. If the default is prevented, then\n * retry would not be performed.\n *\n * @event upload-retry\n * @param {Object} detail\n * @param {Object} detail.xhr the previous upload xhr\n * @param {Object} detail.file the file being uploaded\n */\n\n /**\n * Fired when retry abort is requested. If the default is prevented, then the\n * file upload would not be aborted.\n *\n * @event upload-abort\n * @param {Object} detail\n * @param {Object} detail.xhr the xhr\n * @param {Object} detail.file the file being uploaded\n */\n}\n\ncustomElements.define(UploadElement.is, UploadElement);\n\nexport { UploadElement };\n","/**\n@license\nCopyright (c) 2018 Vaadin Ltd.\nThis program is available under Apache License Version 2.0, available at https://vaadin.com/license/\n*/\nimport '@polymer/polymer/polymer-element.js';\n\nimport '@polymer/polymer/lib/elements/custom-style.js';\nimport { TextFieldElement } from './vaadin-text-field.js';\n/**\n * `` is a Web Component for email field control in forms.\n *\n * ```html\n * \n * \n * ```\n *\n * ### Styling\n *\n * See vaadin-text-field.html for the styling documentation\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @extends Vaadin.TextFieldElement\n * @demo demo/index.html\n */\nclass EmailFieldElement extends TextFieldElement {\n static get is() {\n return 'vaadin-email-field';\n }\n\n static get version() {\n return '2.4.6';\n }\n\n ready() {\n super.ready();\n this.inputElement.type = 'email';\n this.inputElement.autocapitalize = 'off';\n this.pattern = '^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$';\n }\n}\n\ncustomElements.define(EmailFieldElement.is, EmailFieldElement);\n\nexport { EmailFieldElement };\n","import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';\nimport '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/mixins/field-button.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\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 '@vaadin/vaadin-text-field/src/vaadin-text-field.js';\nimport { ControlStateMixin } from '@vaadin/vaadin-control-state-mixin/vaadin-control-state-mixin.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport { ComboBoxMixin } from './vaadin-combo-box-mixin.js';\nimport './vaadin-combo-box-dropdown-wrapper.js';\nimport { ComboBoxDataProviderMixin } from './vaadin-combo-box-data-provider-mixin.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * `` is a combo box element combining a dropdown list with an\n * input field for filtering the list of items. If you want to replace the default\n * input field with a custom implementation, you should use the\n * [``](#/elements/vaadin-combo-box-light) element.\n *\n * Items in the dropdown list must be provided as a list of `String` values.\n * Defining the items is done using the `items` property, which can be assigned\n * with data-binding, using an attribute or directly with the JavaScript property.\n *\n * ```html\n * \n * \n * ```\n *\n * ```js\n * combobox.items = ['apple', 'orange', 'banana'];\n * ```\n *\n * When the selected `value` is changed, a `value-changed` event is triggered.\n *\n * This element can be used within an `iron-form`.\n *\n * ### Item rendering\n *\n * `` supports using custom renderer callback function for defining the\n * content of ``.\n *\n * The renderer function provides `root`, `comboBox`, `model` arguments when applicable.\n * Generate DOM content by using `model` object properties if needed, append it to the `root`\n * element and control the state of the host element by accessing `comboBox`. Before generating new\n * content, users are able to check if there is already content in `root` for reusing it.\n *\n * ```html\n * \n * ```\n * ```js\n * const comboBox = document.querySelector('#combo-box');\n * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\n * comboBox.renderer = function(root, comboBox, model) {\n * root.innerHTML = model.index + ': ' +\n * model.item.label + ' ' +\n * '' + model.item.value + '';\n * };\n * ```\n *\n * Renderer is called on the opening of the combo-box and each time the related model is updated.\n * DOM generated during the renderer call can be reused\n * in the next renderer call and will be provided with the `root` argument.\n * On first call it will be empty.\n *\n * ### Item Template\n *\n * Alternatively, the content of the `` can be populated by using\n * custom item template provided in the light DOM:\n *\n * ```html\n * \n * \n * [[index]]: [[item.label]] [[item.value]\n * \n * \n * ```\n *\n * The following properties are available for item template bindings:\n *\n * Property name | Type | Description\n * --------------|------|------------\n * `index`| Number | Index of the item in the `items` array\n * `item` | String or Object | The item reference\n * `selected` | Boolean | True when item is selected\n * `focused` | Boolean | True when item is focused\n *\n * ### Lazy Loading with Function Data Provider\n *\n * In addition to assigning an array to the items property, you can alternatively\n * provide the `` data through the\n * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.\n * The `` calls this function lazily, only when it needs more data\n * to be displayed.\n *\n * See the [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) in\n * the API reference below for the detailed data provider arguments description,\n * and the “Lazy Loading“ example on “Basics” page in the demos.\n *\n * __Note that when using function data providers, the total number of items\n * needs to be set manually. The total number of items can be returned\n * in the second argument of the data provider callback:__\n *\n * ```javascript\n * comboBox.dataProvider = function(params, callback) {\n * var url = 'https://api.example/data' +\n * '?page=' + params.page + // the requested page index\n * '&per_page=' + params.pageSize; // number of items on the page\n * var xhr = new XMLHttpRequest();\n * xhr.onload = function() {\n * var response = JSON.parse(xhr.responseText);\n * callback(\n * response.employees, // requested page of items\n * response.totalSize // total number of items\n * );\n * };\n * xhr.open('GET', url, true);\n * xhr.send();\n * };\n * ```\n *\n * ### Styling\n *\n * The following custom properties are available for styling:\n *\n * Custom property | Description | Default\n * ----------------|-------------|-------------\n * `--vaadin-combo-box-overlay-max-height` | Property that determines the max height of overlay | `65vh`\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ----------------|----------------\n * `text-field` | The text field\n * `clear-button` | The clear button\n * `toggle-button` | The toggle button\n *\n * See [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\n * for `` parts.\n *\n * See [`` documentation](https://vaadin.com/components/vaadin-text-field/html-api/elements/Vaadin.TextFieldElement)\n * for the text field parts.\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -------------|-------------|------------\n * `opened` | Set when the combo box dropdown is open | :host\n * `disabled` | Set to a disabled combo box | :host\n * `readonly` | Set to a read only combo box | :host\n * `has-value` | Set when the element has a value | :host\n * `invalid` | Set when the element is invalid | :host\n * `focused` | Set when the element is focused | :host\n * `focus-ring` | Set when the element is keyboard focused | :host\n * `loading` | Set when new items are expected | :host\n *\n * In addition to `` itself, the following internal\n * components are themable:\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 * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @mixes Vaadin.ElementMixin\n * @mixes Vaadin.ControlStateMixin\n * @mixes Vaadin.ComboBoxDataProviderMixin\n * @mixes Vaadin.ComboBoxMixin\n * @mixes Vaadin.ThemableMixin\n * @mixes Vaadin.ThemePropertyMixin\n * @demo demo/index.html\n */\nclass ComboBoxElement extends\n ElementMixin(\n ControlStateMixin(\n ThemePropertyMixin(\n ThemableMixin(\n ComboBoxDataProviderMixin(\n ComboBoxMixin(PolymerElement)))))) {\n static get template() {\n return html`\n \n\n \n \n\n \n \n\n \n\n \n \n`;\n }\n\n constructor() {\n super();\n /**\n * @property\n */\n this.theme;\n }\n\n static get is() {\n return 'vaadin-combo-box';\n }\n\n static get version() {\n return '4.2.6';\n }\n\n static get properties() {\n return {\n /**\n * The label for this element.\n */\n label: {\n type: String,\n reflectToAttribute: true\n },\n\n /**\n * Set to true to mark the input as required.\n */\n required: {\n type: Boolean,\n value: false\n },\n\n /**\n * Set to true to disable this input.\n */\n disabled: {\n type: Boolean,\n value: false\n },\n\n /**\n * Set to true to prevent the user from entering invalid input.\n */\n preventInvalidInput: {\n type: Boolean\n },\n\n /**\n * A pattern to validate the `input` with.\n */\n pattern: {\n type: String\n },\n\n /**\n * The error message to display when the input is invalid.\n */\n errorMessage: {\n type: String\n },\n\n autofocus: {\n type: Boolean\n },\n\n /**\n * A placeholder string in addition to the label.\n */\n placeholder: {\n type: String,\n value: ''\n },\n\n readonly: {\n type: Boolean,\n value: false\n }\n };\n }\n\n static get observers() {\n return ['_updateAriaExpanded(opened)'];\n }\n\n attributeChanged(name, type) {\n // Safari has an issue with repainting shadow root element styles when a host attribute changes.\n // Need this workaround (toggle any inline css property on and off) until the issue gets fixed.\n const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n if (isSafari && this.root) {\n Array.prototype.forEach.call(this.root.querySelectorAll('*'), el => {\n el.style['-webkit-backface-visibility'] = 'visible';\n el.style['-webkit-backface-visibility'] = '';\n });\n }\n }\n\n ready() {\n super.ready();\n\n this._nativeInput = this.$.input.focusElement;\n this._toggleElement = this.$.toggleButton;\n this._clearElement = this.$.clearButton;\n\n this._nativeInput.setAttribute('role', 'combobox');\n this._nativeInput.setAttribute('aria-autocomplete', 'list');\n this._updateAriaExpanded();\n }\n\n connectedCallback() {\n super.connectedCallback();\n this._preventInputBlur();\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this._restoreInputBlur();\n }\n\n _getPositionTarget() {\n return this.$.input;\n }\n\n _updateAriaExpanded() {\n if (this._nativeInput) {\n this._nativeInput.setAttribute('aria-expanded', this.opened);\n this._toggleElement.setAttribute('aria-expanded', this.opened);\n }\n }\n\n get inputElement() {\n return this.$.input;\n }\n\n /**\n * Focusable element used by vaadin-control-state-mixin\n */\n get focusElement() {\n // inputElement might not be defined on property changes before ready.\n return this.inputElement || this;\n }\n}\n\ncustomElements.define(ComboBoxElement.is, ComboBoxElement);\n\nexport { ComboBoxElement };\n","import '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';\nimport '@vaadin/vaadin-material-styles/typography.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html``;\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 { register, prevent } from '@polymer/polymer/lib/utils/gestures.js';\n\nregister({\n name: 'vaadin-contextmenu',\n deps: ['touchstart', 'touchmove', 'touchend', 'contextmenu'],\n flow: {\n start: ['touchstart', 'contextmenu'],\n end: ['contextmenu']\n },\n\n emits: ['vaadin-contextmenu'],\n\n info: {\n sourceEvent: null,\n _ios: (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)\n || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)\n },\n\n reset: function() {\n this.info.sourceEvent = null;\n this._cancelTimer();\n this.info.touchJob = null;\n this.info.touchStartCoords = null;\n },\n\n _cancelTimer: function() {\n if (this._timerId) {\n clearTimeout(this._timerId);\n delete this._fired;\n }\n },\n\n touchstart: function(e) {\n this.info.sourceEvent = e;\n this.info.touchStartCoords = {\n x: e.changedTouches[0].clientX,\n y: e.changedTouches[0].clientY\n };\n\n // After timeout event is already retargeted to the parent element in case there is one.\n // So we are assigning the target synchronously on event dispatched.\n const t = e.composedPath()[0] || e.target;\n\n this._timerId = setTimeout(() => {\n const ct = e.changedTouches[0];\n if (!e.shiftKey) {\n if (this.info._ios) {\n this._fired = true;\n this.fire(t, ct.clientX, ct.clientY);\n }\n\n // needed to prevent any 'tap' gesture events from firing\n // which could potentially cancel/close the overlay.\n prevent('tap');\n }\n }, 500); // default setting for Android and iOS.\n },\n\n touchmove: function(e) {\n const moveThreshold = 15;\n const touchStartCoords = this.info.touchStartCoords;\n if (Math.abs(touchStartCoords.x - e.changedTouches[0].clientX) > moveThreshold ||\n Math.abs(touchStartCoords.y - e.changedTouches[0].clientY) > moveThreshold) {\n this._cancelTimer();\n }\n },\n\n touchend: function(e) {\n if (this._fired) {\n e.preventDefault();\n }\n this._cancelTimer();\n },\n\n contextmenu: function(e) {\n if (!e.shiftKey) {\n this.info.sourceEvent = e;\n this.fire(e.target, e.clientX, e.clientY);\n prevent('tap');\n }\n },\n\n fire: function(target, x, y) {\n // NOTE(web-padawan): the code below is copied from `Polymer.Gestures._fire`,\n // which is not exported from `gestures.js` module for Polymer 3.\n const sourceEvent = this.info.sourceEvent;\n const ev = new Event('vaadin-contextmenu', {bubbles: true, cancelable: true, composed: true});\n ev.detail = {x, y, sourceEvent};\n target.dispatchEvent(ev);\n // forward `preventDefault` in a clean way\n if (ev.defaultPrevented && sourceEvent && sourceEvent.preventDefault) {\n sourceEvent.preventDefault();\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/iron-media-query/iron-media-query.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * Element for internal use only.\n *\n * @memberof Vaadin\n * @private\n */\nclass DeviceDetectorElement extends (class extends PolymerElement {}) {\n static get template() {\n return html`\n \n`;\n }\n\n static get is() {\n return 'vaadin-device-detector';\n }\n\n static get properties() {\n return {\n /**\n * `true`, when running in a phone.\n */\n phone: {\n type: Boolean,\n computed: '_phone(wide, touch)',\n notify: true\n },\n\n /**\n * `true`, when running in a touch device.\n * @default false\n */\n touch: {\n type: Boolean,\n notify: true,\n value: () => this._touch()\n },\n\n /**\n * `true`, when running in a tablet/desktop device.\n */\n wide: {\n type: Boolean,\n notify: true\n }\n };\n }\n\n static _touch() {\n try {\n document.createEvent('TouchEvent');\n return true;\n } catch (err) {\n return false;\n }\n }\n\n _phone(wide, touch) {\n return !wide && touch;\n }\n}\n\ncustomElements.define(DeviceDetectorElement.is, DeviceDetectorElement);\n","import { ItemElement } from '@vaadin/vaadin-item/src/vaadin-item.js';\nimport { ListBoxElement } from '@vaadin/vaadin-list-box/src/vaadin-list-box.js';\nimport { flush } from '@polymer/polymer/lib/utils/flush.js';\n/**\n * The vaadin-context-menu-item element.\n *\n * @memberof Vaadin\n */\nclass ContextMenuItemElement extends ItemElement {\n static get is() {\n return 'vaadin-context-menu-item';\n }\n}\n\n/**\n * The vaadin-context-menu-list-box element.\n *\n * @memberof Vaadin\n */\nclass ContextMenuListBoxElement extends ListBoxElement {\n static get is() {\n return 'vaadin-context-menu-list-box';\n }\n}\n\ncustomElements.define(ContextMenuItemElement.is, ContextMenuItemElement);\ncustomElements.define(ContextMenuListBoxElement.is, ContextMenuListBoxElement);\n\n/**\n * @polymerMixin\n */\nexport const ItemsMixin = superClass => class ItemsMixin extends superClass {\n\n static get properties() {\n return {\n /**\n * @typedef MenuItem\n * @type {object}\n * @property {string} text - Text to be set as the menu item component's textContent\n * @property {union: string | object} component - The component to represent the item.\n * Either a tagName or an element instance. Defaults to \"vaadin-context-menu-item\".\n * @property {boolean} disabled - If true, the item is disabled and cannot be selected\n * @property {boolean} checked - If true, the item shows a checkmark next to it\n * @property {MenuItem[]} children - Array of child menu items\n */\n\n /**\n * Defines a (hierarchical) menu structure for the component.\n * If a menu item has a non-empty `children` set, a sub-menu with the child items is opened\n * next to the parent menu on mouseover, tap or a right arrow keypress.\n *\n * The items API can't be used together with a renderer or a template!\n *\n * #### Example\n *\n * ```javascript\n * contextMenu.items = [\n * {text: 'Menu Item 1', children:\n * [\n * {text: 'Menu Item 1-1', checked: true},\n * {text: 'Menu Item 1-2'}\n * ]\n * },\n * {component: 'hr'},\n * {text: 'Menu Item 2', children:\n * [\n * {text: 'Menu Item 2-1'},\n * {text: 'Menu Item 2-2', disabled: true}\n * ]\n * },\n * {text: 'Menu Item 3', disabled: true}\n * ];\n * ```\n *\n * @type {MenuItem[]}\n *\n *\n * ### Styling\n *\n * The `` sub-menu elements have the following additional state attributes on top of\n * the built-in `` state attributes (see `` documentation for full listing).\n *\n * Part name | Attribute | Description\n * ----------------|----------------|----------------\n * `:host` | expanded | Expanded parent item\n */\n items: Array\n };\n }\n\n ready() {\n super.ready();\n\n // Overlay's outside click listener doesn't work with modeless\n // overlays (submenus) so we need additional logic for it\n this.__itemsOutsideClickListener = e => {\n if (!e.composedPath().filter(el => el.localName === 'vaadin-context-menu-overlay')[0]) {\n this.dispatchEvent(new CustomEvent('items-outside-click'));\n }\n };\n this.addEventListener('items-outside-click', e => this.items && this.close());\n }\n\n connectedCallback() {\n super.connectedCallback();\n // Firefox leaks click to document on contextmenu even if prevented\n // https://bugzilla.mozilla.org/show_bug.cgi?id=990614\n document.documentElement.addEventListener('click', this.__itemsOutsideClickListener);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.documentElement.removeEventListener('click', this.__itemsOutsideClickListener);\n }\n\n __forwardFocus() {\n const overlay = this.$.overlay;\n const child = overlay.getFirstChild();\n // if parent item is not focused, do not focus submenu\n if (overlay.parentOverlay) {\n const parent = overlay.parentOverlay.querySelector('[expanded]');\n if (parent && parent.hasAttribute('focused') && child) {\n child.focus();\n } else {\n overlay.$.overlay.focus();\n }\n } else if (child) {\n child.focus();\n }\n }\n\n __openSubMenu(subMenu, itemElement) {\n subMenu.items = itemElement._item.children;\n subMenu.listenOn = itemElement;\n\n const itemRect = itemElement.getBoundingClientRect();\n\n const content = subMenu.$.overlay.$.content;\n const style = getComputedStyle(content);\n const parent = this.$.overlay;\n const y = parent.hasAttribute('bottom-aligned') ?\n itemRect.bottom + parseFloat(style.paddingBottom) :\n itemRect.top - parseFloat(style.paddingTop);\n\n // Store the reference to align based on parent overlay coordinates\n subMenu.$.overlay._setParentOverlay(parent);\n\n // Set theme attribute from parent element\n if (parent.theme) {\n subMenu.setAttribute('theme', parent.theme);\n } else {\n subMenu.removeAttribute('theme');\n }\n\n let x;\n content.style.minWidth = '';\n if (document.documentElement.clientWidth - itemRect.right > itemRect.width) {\n // There's room on the right side\n x = itemRect.right;\n } else {\n // Open on the left side\n x = itemRect.left - itemRect.width;\n // Make sure there's no gaps between the menus\n content.style.minWidth = parent.$.content.clientWidth + 'px';\n }\n x = Math.max(x, 0);\n\n itemElement.dispatchEvent(new CustomEvent('opensubmenu', {detail: {\n x, y, children: itemElement._item.children\n }}));\n }\n\n __itemsRenderer(root, menu, context) {\n this.__initMenu(root, menu);\n\n const subMenu = root.querySelector(this.constructor.is);\n subMenu.closeOn = menu.closeOn;\n\n const listBox = root.querySelector('vaadin-context-menu-list-box');\n\n listBox.innerHTML = '';\n\n const items = Array.from(context.detail.children || menu.items);\n\n items.forEach(item => {\n let component;\n if (item.component instanceof HTMLElement) {\n component = item.component;\n } else {\n component = document.createElement(item.component || 'vaadin-context-menu-item');\n }\n\n if (component instanceof ItemElement) {\n component.setAttribute('role', 'menuitem');\n component.classList.add('vaadin-menu-item');\n } else if (component.localName === 'hr') {\n component.setAttribute('role', 'separator');\n }\n this.theme && component.setAttribute('theme', this.theme);\n\n component._item = item;\n\n if (item.text) {\n component.textContent = item.text;\n }\n\n this.__toggleMenuComponentAttribute(component, 'menu-item-checked', item.checked);\n this.__toggleMenuComponentAttribute(component, 'disabled', item.disabled);\n\n component.setAttribute('aria-haspopup', 'false');\n component.classList.remove('vaadin-context-menu-parent-item');\n if (item.children && item.children.length) {\n component.classList.add('vaadin-context-menu-parent-item');\n component.setAttribute('aria-haspopup', 'true');\n component.setAttribute('aria-expanded', 'false');\n component.removeAttribute('expanded');\n }\n\n listBox.appendChild(component);\n });\n }\n\n __toggleMenuComponentAttribute(component, attribute, on) {\n if (on) {\n component.setAttribute(attribute, '');\n component['__has-' + attribute] = true;\n } else if (component['__has-' + attribute]) {\n component.removeAttribute(attribute);\n component['__has-' + attribute] = false;\n }\n }\n\n __initMenu(root, menu) {\n if (!root.firstElementChild) {\n const is = this.constructor.is;\n root.innerHTML = `\n \n <${is} hidden>\n `;\n flush();\n const listBox = root.querySelector('vaadin-context-menu-list-box');\n this.theme && listBox.setAttribute('theme', this.theme);\n listBox.classList.add('vaadin-menu-list-box');\n requestAnimationFrame(() => listBox.setAttribute('role', 'menu'));\n\n const subMenu = root.querySelector(is);\n subMenu.$.overlay.modeless = true;\n subMenu.openOn = 'opensubmenu';\n\n menu.addEventListener('opened-changed', e => !e.detail.value && subMenu.close());\n subMenu.addEventListener('opened-changed', e => {\n if (!e.detail.value) {\n const expandedItem = listBox.querySelector('[expanded]');\n if (expandedItem) {\n expandedItem.setAttribute('aria-expanded', 'false');\n expandedItem.removeAttribute('expanded');\n }\n }\n });\n\n listBox.addEventListener('selected-changed', e => {\n if (typeof e.detail.value === 'number') {\n const item = e.target.items[e.detail.value]._item;\n if (!item.children) {\n const detail = {value: item};\n menu.dispatchEvent(new CustomEvent('item-selected', {detail}));\n }\n listBox.selected = null;\n }\n });\n\n subMenu.addEventListener('item-selected', e => {\n menu.dispatchEvent(new CustomEvent('item-selected', {detail: e.detail}));\n });\n\n subMenu.addEventListener('close-all-menus', () => {\n menu.dispatchEvent(new CustomEvent('close-all-menus'));\n });\n menu.addEventListener('close-all-menus', menu.close);\n menu.addEventListener('item-selected', menu.close);\n menu.$.overlay.$.backdrop.addEventListener('click', () => menu.close());\n\n menu.$.overlay.addEventListener('keydown', e => {\n if (e.keyCode === 37) {\n menu.close();\n menu.listenOn.focus();\n } else if (e.keyCode === 27) {\n menu.dispatchEvent(new CustomEvent('close-all-menus'));\n }\n });\n\n requestAnimationFrame(() => this.__openListenerActive = true);\n const openSubMenu = (e, itemElement = e.composedPath().filter(e => e.localName === 'vaadin-context-menu-item')[0]) => {\n // Delay enabling the mouseover listener to avoid it from triggering on parent menu open\n if (!this.__openListenerActive) {\n return;\n }\n\n // Don't open sub-menus while the menu is still opening\n if (menu.$.overlay.hasAttribute('opening')) {\n requestAnimationFrame(() => openSubMenu(e, itemElement));\n return;\n }\n\n if (itemElement) {\n if (subMenu.items !== itemElement._item.children) {\n subMenu.close();\n }\n if (!menu.opened) {\n return;\n }\n if (itemElement._item.children && itemElement._item.children.length) {\n itemElement.setAttribute('aria-expanded', 'true');\n itemElement.setAttribute('expanded', '');\n this.__openSubMenu(subMenu, itemElement);\n } else {\n subMenu.listenOn.focus();\n }\n }\n };\n\n menu.$.overlay.addEventListener('mouseover', openSubMenu);\n menu.$.overlay.addEventListener('keydown', e =>\n (e.keyCode === 39 || e.keyCode === 13 || e.keyCode === 32) && openSubMenu(e));\n } else {\n const listBox = root.querySelector('vaadin-context-menu-list-box');\n if (this.theme) {\n listBox.setAttribute('theme', this.theme);\n } else {\n listBox.removeAttribute('theme');\n }\n }\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 '@polymer/polymer/lib/elements/dom-module.js';\n\nimport { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = ``;\n\ndocument.head.appendChild($_documentContainer.content);\n/**\n * The overlay element.\n *\n * ### Styling\n *\n * See [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\n * for `` parts.\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @private\n */\nclass ContextMenuOverlayElement extends OverlayElement {\n static get is() {\n return 'vaadin-context-menu-overlay';\n }\n\n static get properties() {\n return {\n instanceProps: {\n type: Object,\n value: () => {\n return {\n detail: true,\n target: true\n };\n }\n },\n\n /**\n * @protected\n */\n parentOverlay: {\n type: Object,\n readOnly: true\n }\n };\n }\n\n static get observers() {\n return ['_themeChanged(theme)'];\n }\n\n ready() {\n super.ready();\n\n this.addEventListener('keydown', e => {\n if (!e.defaultPrevented && e.composedPath()[0] === this.$.overlay && [38, 40].indexOf(e.keyCode) > -1) {\n const child = this.getFirstChild();\n if (child && Array.isArray(child.items) && child.items.length) {\n e.preventDefault();\n if (e.keyCode === 38) {\n child.items[child.items.length - 1].focus();\n } else {\n child.focus();\n }\n }\n }\n });\n }\n\n getFirstChild() {\n return this.content.querySelector(':not(style):not(slot)');\n }\n\n _themeChanged(theme) {\n this.close();\n }\n\n getBoundaries() {\n // Measure actual overlay and content sizes\n const overlayRect = this.getBoundingClientRect();\n const contentRect = this.$.overlay.getBoundingClientRect();\n\n // Maximum x and y values are imposed by content size and overlay limits.\n let yMax = overlayRect.bottom - contentRect.height;\n\n // Adjust constraints to ensure bottom-aligned applies to sub-menu.\n const parent = this.parentOverlay;\n if (parent && parent.hasAttribute('bottom-aligned')) {\n const parentStyle = getComputedStyle(parent);\n yMax = yMax - parseFloat(parentStyle.bottom) - parseFloat(parentStyle.height);\n }\n\n return {\n xMax: overlayRect.right - contentRect.width,\n yMax,\n left: overlayRect.left,\n top: overlayRect.top,\n width: contentRect.width\n };\n }\n}\n\ncustomElements.define(ContextMenuOverlayElement.is, ContextMenuOverlayElement);\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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';\nimport './vaadin-contextmenu-event.js';\nimport './vaadin-device-detector.js';\nimport { ItemsMixin } from './vaadin-contextmenu-items-mixin.js';\nimport { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';\nimport { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport './vaadin-context-menu-overlay.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { gestures, addListener, removeListener } from '@polymer/polymer/lib/utils/gestures.js';\n/**\n *\n * `` is a Web Component for creating context menus. The content of the\n * menu can be populated in three ways: imperatively by using the items API or a renderer callback function and\n * declaratively by using Polymer's Templates.\n *\n * ### Items\n *\n * Items is a higher level convenience API for defining a (hierarchical) menu structure for the component.\n * If a menu item has a non-empty `children` set, a sub-menu with the child items is opened\n * next to the parent menu on mouseover, tap or a right arrow keypress.\n *\n * When an item is selected, `` dispatches an \"item-selected\" event\n * with the selected item as `event.detail.value` property.\n *\n * ```javascript\n * contextMenu.items = [\n * {text: 'Menu Item 1', children:\n * [\n * {text: 'Menu Item 1-1', checked: true},\n * {text: 'Menu Item 1-2'}\n * ]\n * },\n * {component: 'hr'},\n * {text: 'Menu Item 2', children:\n * [\n * {text: 'Menu Item 2-1'},\n * {text: 'Menu Item 2-2', disabled: true}\n * ]\n * },\n * {text: 'Menu Item 3', disabled: true}\n * ];\n *\n * contextMenu.addEventListener('item-selected', e => {\n * const item = e.detail.value;\n * console.log(`${item.text} selected`);\n * });\n * ```\n *\n * **NOTE:** when the `items` array is defined, the renderer or a template cannot be used.\n *\n * ### Rendering\n *\n * The renderer function provides `root`, `contextMenu`, `model` arguments when applicable.\n * Generate DOM content by using `model` object properties if needed, append it to the `root`\n * element and control the state of the host element by accessing `contextMenu`. Before generating\n * new content, the renderer function should check if there is already content in `root` for reusing it.\n *\n * ```html\n * \n * ```\n * ```js\n * const contextMenu = document.querySelector('#contextMenu');\n * contextMenu.renderer = (root, contextMenu, context) => {\n * let listBox = root.firstElementChild;\n * if (!listBox) {\n * listBox = document.createElement('vaadin-list-box');\n * root.appendChild(listBox);\n * }\n *\n * let item = listBox.querySelector('vaadin-item');\n * if (!item) {\n * item = document.createElement('vaadin-item');\n * listBox.appendChild(item);\n * }\n * item.textContent = 'Content of the selector: ' + context.target.textContent;\n * };\n * ```\n *\n * You can access the menu context inside the renderer using\n * `context.target` and `context.detail`.\n *\n * Renderer is called on the opening of the context-menu and each time the related context is updated.\n * DOM generated during the renderer call can be reused\n * in the next renderer call and will be provided with the `root` argument.\n * On first call it will be empty.\n *\n * **NOTE:** when the `renderer` function is defined, the template content\n * is not in use.\n *\n * ### Polymer Templates\n *\n * Alternatively to using the `renderer`, you can populate\n * the menu content using Polymer's Templates:\n *\n * ```html\n * \n * \n * \n * First menu item\n * Second menu item\n * \n * \n * \n * ```\n *\n * ### “vaadin-contextmenu” Gesture Event\n *\n * `vaadin-contextmenu` is a gesture event (a custom event),\n * which is dispatched after either `contextmenu` and long touch events.\n * This enables support for both mouse and touch environments in a uniform way.\n *\n * `` opens the menu overlay on the `vaadin-contextmenu`\n * event by default.\n *\n * ### Menu Listener\n *\n * By default, the `` element listens for the menu opening\n * event on itself. In order to have a context menu on your content, wrap\n * your content with the `` element, and add a template\n * element with a menu. Example:\n *\n * ```html\n * \n * \n * \n * First menu item\n * Second menu item\n * \n * \n *\n * This paragraph has the context menu provided in the above template.
\n * Another paragraph with the context menu.
\n * \n * ```\n *\n * In case if you do not want to wrap the page content, you can listen for\n * events on an element outside the `` by setting the\n * `listenOn` property:\n *\n * ```html\n * \n * \n * \n * ...\n * \n * \n * \n *\n * \n * ```\n * ```javascript\n * const contextMenu = document.querySelector('vaadin-context-menu#customListener');\n * contextMenu.listenOn = document.querySelector('#menuListener');\n * ```\n *\n * ### Filtering Menu Targets\n *\n * By default, the listener element and all its descendants open the context\n * menu. You can filter the menu targets to a smaller set of elements inside\n * the listener element by setting the `selector` property.\n *\n * In the following example, only the elements matching `.has-menu` will open the context menu:\n *\n * ```html\n * \n * \n * \n * ...\n * \n * \n *\n * \n * This paragraph does not open the context menu
\n * \n * ```\n *\n * ### Menu Context\n *\n * You can bind to the following properties in the menu template:\n *\n * - `target` is the menu opening event target, which is the element that\n * the user has called the context menu for\n * - `detail` is the menu opening event detail\n *\n * In the following example, the menu item text is composed with the contents\n * of the element that opened the menu:\n *\n * ```html\n * \n * \n * \n * The menu target: [[target.textContent]]\n * \n * \n *\n * \n * - Foo
\n * - Bar
\n * - Baz
\n *
\n * \n * ```\n *\n * ### Styling\n *\n * `` uses `` internal\n * themable component as the actual visible context menu overlay. See\n * See [`` documentation](https://github.com/vaadin/vaadin-overlay/blob/master/src/vaadin-overlay.html)\n * for `` parts.\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * Note: the `theme` attribute value set on `` is\n * propagated to the internal `` component.\n * In case of using nested menu items, the `theme` attribute is also propagated\n * to internal `vaadin-context-menu-list-box` and `vaadin-context-menu-item`'s.\n *\n * @memberof Vaadin\n * @mixes Vaadin.ElementMixin\n * @mixes Vaadin.ThemePropertyMixin\n * @mixes Vaadin.ContextMenu.ItemsMixin\n * @mixes Polymer.GestureEventListeners\n * @demo demo/index.html\n */\nclass ContextMenuElement extends\n ElementMixin(\n ThemePropertyMixin(\n ItemsMixin(\n GestureEventListeners(PolymerElement)))) {\n static get template() {\n return html`\n \n\n \n\n \n\n \n \n`;\n }\n\n static get is() {\n return 'vaadin-context-menu';\n }\n\n static get version() {\n return '4.3.14';\n }\n\n static get properties() {\n return {\n\n /**\n * CSS selector that can be used to target any child element\n * of the context menu to listen for `openOn` events.\n */\n selector: {\n type: String\n },\n\n /**\n * True if the overlay is currently displayed.\n */\n opened: {\n type: Boolean,\n value: false,\n notify: true,\n readOnly: true\n },\n\n /**\n * Event name to listen for opening the context menu.\n */\n openOn: {\n type: String,\n value: 'vaadin-contextmenu'\n },\n\n /**\n * The target element that's listened to for context menu opening events.\n * By default the vaadin-context-menu listens to the target's `vaadin-contextmenu`\n * events.\n * @type {HTMLElement}\n * @default self\n */\n listenOn: {\n type: Object,\n value: function() {\n return this;\n }\n },\n\n /**\n * Event name to listen for closing the context menu.\n */\n closeOn: {\n type: String,\n value: 'click',\n observer: '_closeOnChanged'\n },\n\n /**\n * Custom function for rendering the content of the menu overlay.\n * Receives three arguments:\n *\n * - `root` The root container DOM element. Append your content to it.\n * - `contextMenu` The reference to the `` element.\n * - `context` The object with the menu context, contains:\n * - `context.target` the target of the menu opening event,\n * - `context.detail` the menu opening event detail.\n */\n renderer: {\n type: Function\n },\n\n _context: Object,\n\n _boundClose: Object,\n\n _boundOpen: Object,\n\n _contentTemplate: Object,\n\n _oldTemplate: Object,\n\n _oldRenderer: Object,\n\n _touch: Boolean\n };\n }\n\n static get observers() {\n return [\n '_openedChanged(opened)',\n '_contextChanged(_context, _instance)',\n '_targetOrOpenOnChanged(listenOn, openOn)',\n '_templateOrRendererChanged(_contentTemplate, renderer, _context, items)'\n ];\n }\n\n constructor() {\n super();\n this._boundOpen = this.open.bind(this);\n this._boundClose = this.close.bind(this);\n this._boundOnGlobalContextMenu = this._onGlobalContextMenu.bind(this);\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n this.__boundOnScroll = this.__onScroll.bind(this);\n window.addEventListener('scroll', this.__boundOnScroll, true);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n window.removeEventListener('scroll', this.__boundOnScroll, true);\n this.close();\n }\n\n ready() {\n super.ready();\n this._observer = new FlattenedNodesObserver(this, info => {\n this._setTemplateFromNodes(info.addedNodes);\n });\n }\n\n _setTemplateFromNodes(nodes) {\n this._contentTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._contentTemplate;\n }\n\n // Runs before overlay is fully rendered\n _onOverlayOpened(e) {\n this._setOpened(e.detail.value);\n }\n\n // Runs after overlay is fully rendered\n _onVaadinOverlayOpen(e) {\n this.__alignOverlayPosition();\n this.$.overlay.style.opacity = '';\n this.__forwardFocus();\n }\n\n _targetOrOpenOnChanged(listenOn, openOn) {\n if (this._oldListenOn && this._oldOpenOn) {\n this._unlisten(this._oldListenOn, this._oldOpenOn, this._boundOpen);\n\n this._oldListenOn.style.webkitTouchCallout = '';\n this._oldListenOn.style.webkitUserSelect = '';\n this._oldListenOn.style.msUserSelect = '';\n this._oldListenOn.style.userSelect = '';\n\n this._oldListenOn = null;\n this._oldOpenOn = null;\n }\n\n if (listenOn && openOn) {\n this._listen(listenOn, openOn, this._boundOpen);\n\n this._oldListenOn = listenOn;\n this._oldOpenOn = openOn;\n }\n }\n\n _setListenOnUserSelect(value) {\n // note: these styles don't seem to work in Firefox on iOS.\n this.listenOn.style.webkitTouchCallout = value;\n this.listenOn.style.webkitUserSelect = value; // Chrome, Safari, Firefox\n this.listenOn.style.msUserSelect = value; // IE 10+\n this.listenOn.style.userSelect = value;\n\n // note: because user-selection is disabled on the overlay\n // before opening the menu the text could be already selected\n // so we need to clear that selection\n document.getSelection().removeAllRanges();\n }\n\n _closeOnChanged(closeOn, oldCloseOn) {\n // Listen on this.$.overlay.root to workaround issue on\n // ShadyDOM polyfill: https://github.com/webcomponents/shadydom/issues/159\n\n // Outside click event from overlay\n const evtOverlay = 'vaadin-overlay-outside-click';\n\n if (oldCloseOn) {\n this._unlisten(this.$.overlay, oldCloseOn, this._boundClose);\n this._unlisten(this.$.overlay.root, oldCloseOn, this._boundClose);\n }\n if (closeOn) {\n this._listen(this.$.overlay, closeOn, this._boundClose);\n this._listen(this.$.overlay.root, closeOn, this._boundClose);\n this._unlisten(this.$.overlay, evtOverlay, this._preventDefault);\n } else {\n this._listen(this.$.overlay, evtOverlay, this._preventDefault);\n }\n }\n\n _preventDefault(e) {\n e.preventDefault();\n }\n\n _openedChanged(opened) {\n if (opened) {\n if (!this._instance) {\n this.$.overlay.template = this.querySelector('template');\n this._instance = this.$.overlay._instance;\n }\n document.documentElement.addEventListener('contextmenu', this._boundOnGlobalContextMenu, true);\n this._setListenOnUserSelect('none');\n } else {\n document.documentElement.removeEventListener('contextmenu', this._boundOnGlobalContextMenu, true);\n this._setListenOnUserSelect('');\n }\n\n // Has to be set after instance has been created\n this.$.overlay.opened = opened;\n }\n\n /**\n * Manually invoke existing renderer.\n */\n render() {\n this.$.overlay.render();\n }\n\n _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {\n if (template !== oldTemplate) {\n this._contentTemplate = undefined;\n } else if (renderer !== oldRenderer) {\n this.renderer = undefined;\n }\n }\n\n _templateOrRendererChanged(template, renderer, context, items) {\n if (template && renderer) {\n this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);\n throw new Error('You should only use either a renderer or a template for context-menu content');\n }\n\n this._oldTemplate = template;\n this._oldRenderer = renderer;\n\n if (items) {\n if (template || renderer) {\n throw new Error('The items API cannot be used together with a template/renderer');\n }\n if (this.closeOn === 'click') {\n this.closeOn = '';\n }\n\n renderer = this.__itemsRenderer;\n }\n if (renderer && context) {\n this.$.overlay.setProperties({owner: this, renderer: renderer});\n }\n }\n\n _contextChanged(context, instance) {\n if (context === undefined || instance === undefined) {\n return;\n }\n instance.detail = context.detail;\n instance.target = context.target;\n }\n\n /**\n * Closes the overlay.\n */\n close() {\n this._setOpened(false);\n }\n\n _contextTarget(e) {\n if (this.selector) {\n const targets = this.listenOn.querySelectorAll(this.selector);\n\n return Array.prototype.filter.call(targets, el => {\n return e.composedPath().indexOf(el) > -1;\n })[0];\n } else {\n return e.target;\n }\n }\n\n /**\n * Opens the overlay.\n * @param {Event} e used as the context for the menu. Overlay coordinates are taken from this event.\n */\n open(e) {\n if (e && !this.opened) {\n this._context = {\n detail: e.detail,\n target: this._contextTarget(e)\n };\n\n if (this._context.target) {\n this._preventDefault(e);\n e.stopPropagation();\n\n // Used in alignment which is delayed until overlay is rendered\n this.__x = this._getEventCoordinate(e, 'x');\n this.__pageXOffset = window.pageXOffset;\n\n this.__y = this._getEventCoordinate(e, 'y');\n this.__pageYOffset = window.pageYOffset;\n\n this.$.overlay.style.opacity = '0';\n this._setOpened(true);\n }\n }\n }\n\n __onScroll() {\n if (!this.opened) {\n return;\n }\n\n const yDiff = window.pageYOffset - this.__pageYOffset;\n const xDiff = window.pageXOffset - this.__pageXOffset;\n\n this.__adjustPosition('left', -xDiff);\n this.__adjustPosition('right', xDiff);\n\n this.__adjustPosition('top', -yDiff);\n this.__adjustPosition('bottom', yDiff);\n\n this.__pageYOffset += yDiff;\n this.__pageXOffset += xDiff;\n }\n\n __adjustPosition(coord, diff) {\n const overlay = this.$.overlay;\n const style = overlay.style;\n\n style[coord] = (parseInt(style[coord]) || 0) + diff + 'px';\n }\n\n __alignOverlayPosition() {\n const overlay = this.$.overlay;\n const style = overlay.style;\n\n // Reset all properties before measuring\n ['top', 'right', 'bottom', 'left'].forEach(prop => style.removeProperty(prop));\n ['right-aligned', 'bottom-aligned'].forEach(attr => overlay.removeAttribute(attr));\n\n // Maximum x and y values are imposed by content size and overlay limits.\n const {xMax, yMax, left, top, width} = overlay.getBoundaries();\n // Reuse saved x and y event values, in order to this method be used async\n // in the `vaadin-overlay-change` which guarantees that overlay is ready\n const x = this.__x || left;\n const y = this.__y || top;\n\n // Select one overlay corner and move to the event x/y position.\n // Then set styling attrs for flex-aligning the content appropriately.\n const wdthVport = document.documentElement.clientWidth;\n const hghtVport = document.documentElement.clientHeight;\n\n // Align to the parent menu overlay, if any.\n const parent = overlay.parentOverlay;\n let alignedToParent = false;\n if (parent) {\n const parentContentRect = parent.$.overlay.getBoundingClientRect();\n if (parent.hasAttribute('right-aligned')) {\n const parentStyle = getComputedStyle(parent);\n\n const getPadding = (el, direction) => {\n return parseFloat(getComputedStyle(el.$.content)['padding' + direction]);\n };\n const right = parseFloat(parentStyle.right) + parentContentRect.width;\n const padding = getPadding(parent, 'Left') + getPadding(overlay, 'Right');\n\n // Preserve right-aligned, if possible.\n if ((wdthVport - (right - padding)) > width) {\n overlay.setAttribute('right-aligned', '');\n style.right = right - padding + 'px';\n alignedToParent = true;\n }\n }\n }\n\n if (!alignedToParent) {\n if (x < wdthVport / 2 || x < xMax) {\n style.left = x + 'px';\n } else {\n style.right = Math.max(0, (wdthVport - x)) + 'px';\n overlay.setAttribute('right-aligned', '');\n }\n }\n if (y < hghtVport / 2 || y < yMax) {\n style.top = y + 'px';\n } else {\n style.bottom = Math.max(0, (hghtVport - y)) + 'px';\n overlay.setAttribute('bottom-aligned', '');\n }\n }\n\n _getEventCoordinate(event, coord) {\n if (event.detail instanceof Object) {\n if (event.detail[coord]) {\n // Polymer gesture events, get coordinate from detail\n return event.detail[coord];\n } else if (event.detail.sourceEvent) {\n // Unwrap detailed event\n return this._getEventCoordinate(event.detail.sourceEvent, coord);\n }\n } else {\n const prop = 'client' + coord.toUpperCase();\n const position = event.changedTouches ? event.changedTouches[0][prop] : event[prop];\n\n if (position === 0) {\n // Native keyboard event\n const rect = event.target.getBoundingClientRect();\n return coord === 'x' ? rect.left : rect.top + rect.height;\n } else {\n // Native mouse or touch event\n return position;\n }\n }\n }\n\n _listen(node, evType, handler) {\n if (gestures[evType]) {\n addListener(node, evType, handler);\n } else {\n node.addEventListener(evType, handler);\n }\n }\n\n _unlisten(node, evType, handler) {\n if (gestures[evType]) {\n removeListener(node, evType, handler);\n } else {\n node.removeEventListener(evType, handler);\n }\n }\n\n _onGlobalContextMenu(e) {\n if (!e.shiftKey) {\n e.preventDefault();\n this.close();\n }\n }\n\n /**\n * Fired when an item is selected when the context menu is populated using the `items` API.\n *\n * @event item-selected\n * @param {Object} detail\n * @param {Object} detail.value the selected menu item\n */\n}\n\ncustomElements.define(ContextMenuElement.is, ContextMenuElement);\nexport { ContextMenuElement };\n","import '@vaadin/vaadin-material-styles/color.js';\nimport '@vaadin/vaadin-material-styles/font-icons.js';\nimport '@vaadin/vaadin-material-styles/typography.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n\nconst $_documentContainer = html`\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 '@polymer/polymer/lib/elements/custom-style.js';\nimport { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\nimport { microTask } from '@polymer/polymer/lib/utils/async.js';\nconst $_documentContainer = document.createElement('template');\n\n$_documentContainer.innerHTML = `\n \n`;\n\ndocument.head.appendChild($_documentContainer.content);\n/**\n * `` is a helper element for the ``\n * that provides toggle and level display functionality for the item tree.\n *\n * #### Example:\n * ```html\n * \n * \n * \n * \n * [[item.name]]\n * \n * \n * \n * ```\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ---|---\n * `toggle` | The tree toggle icon\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * ---|---|---\n * `expanded` | When present, the toggle is expanded | :host\n * `leaf` | When present, the toggle is not expandable, i. e., the current item is a leaf | :host\n *\n * The following custom CSS properties are available on\n * the `` element:\n *\n * Custom CSS property | Description | Default\n * ---|---|---\n * `--vaadin-grid-tree-toggle-level-offset` | Visual offset step for each tree sublevel | `1em`\n *\n * @memberof Vaadin\n * @mixes Vaadin.ThemableMixin\n */\nclass GridTreeToggleElement extends ThemableMixin(PolymerElement) {\n static get template() {\n return html`\n \n\n \n \n \n`;\n }\n\n static get is() {\n return 'vaadin-grid-tree-toggle';\n }\n\n static get properties() {\n return {\n /**\n * Current level of the tree represented with a horizontal offset\n * of the toggle button.\n */\n level: {\n type: Number,\n value: 0,\n observer: '_levelChanged'\n },\n\n /**\n * Hides the toggle icon and disables toggling a tree sublevel.\n */\n leaf: {\n type: Boolean,\n value: false,\n reflectToAttribute: true\n },\n\n /**\n * Sublevel toggle state.\n */\n expanded: {\n type: Boolean,\n value: false,\n reflectToAttribute: true,\n notify: true\n }\n };\n }\n\n ready() {\n super.ready();\n\n this.addEventListener('click', e => this._onClick(e));\n }\n\n _onClick(e) {\n if (this.leaf) {\n return;\n }\n\n e.preventDefault();\n this.expanded = !this.expanded;\n }\n\n _levelChanged(level) {\n const value = Number(level).toString();\n this.style['---level'] = value;\n // Async is to make DOM updates applied before evaluating the style\n // update, required for polyfilled RTL support in MSIE and Edge.\n this._debouncerUpdateLevel = Debouncer.debounce(\n this._debouncerUpdateLevel,\n microTask,\n () => this.updateStyles({'---level': value})\n );\n }\n}\n\ncustomElements.define(GridTreeToggleElement.is, GridTreeToggleElement);\n\nexport { GridTreeToggleElement };\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 { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';\nimport { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';\nimport { RadioButtonElement } from './vaadin-radio-button.js';\nimport { html } from '@polymer/polymer/lib/utils/html-tag.js';\n/**\n * `` is a Web Component for grouping vaadin-radio-buttons.\n *\n * ```html\n * \n * Foo\n * Bar\n * Baz\n * \n * ```\n *\n * ### Styling\n *\n * The following shadow DOM parts are available for styling:\n *\n * Part name | Description\n * ----------------|----------------\n * `label` | The label element\n * `group-field` | The element that wraps radio-buttons\n *\n * The following state attributes are available for styling:\n *\n * Attribute | Description | Part name\n * -----------|-------------|------------\n * `disabled` | Set when the radio group and its children are disabled. | :host\n * `readonly` | Set to a readonly radio group | :host\n * `invalid` | Set when the element is invalid | :host\n * `has-label` | Set when the element has a label | :host\n * `has-value` | Set when the element has a value | :host\n * `focused` | Set when the element contains focus | :host\n *\n * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki)\n *\n * @memberof Vaadin\n * @mixes Vaadin.ThemableMixin\n * @element vaadin-radio-group\n * @demo demo/index.html\n */\nclass RadioGroupElement extends ThemableMixin(PolymerElement) {\n static get template() {\n return html`\n \n\n \n
\n\n
\n \n
\n\n
[[errorMessage]]
\n