@foxy.io/elements 1.24.0-beta.4 → 1.24.0-beta.5

package/dist/cdn/shared-aa569a99.js

@@ -0,0 +1,804 @@
+import{T as e,D as t,E as a,C as i}from"./shared-4bd1efd7.js";import{O as s,I as o,a as n}from"./shared-c541c9e9.js";import{h as r,G as l,P as h,D as d,t as u,b as c,s as p}from"./shared-a7475f62.js";import"./shared-9bdd5400.js";import"./shared-2fa6a5a0.js";import{T as m}from"./shared-0689b25a.js";import"./shared-19c9fe00.js";import{D as _,t as f,f as v,a as g}from"./shared-c97f7178.js";import{a as y,b}from"./shared-6b0498b2.js";const D=r`<dom-module id="lumo-date-picker-overlay" theme-for="vaadin-date-picker-overlay">
+  <template>
+    <style include="lumo-menu-overlay">
+      [part="overlay"] {
+        /*
+        Width:
+            date cell widths
+          + month calendar side padding
+          + year scroller width
+        */
+        width:
+          calc(
+              var(--lumo-size-m) * 7
+            + var(--lumo-space-xs) * 2
+            + 57px
+          );
+        height: 100%;
+        max-height: calc(var(--lumo-size-m) * 14);
+        overflow: hidden;
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      [part="overlay"] {
+        flex-direction: column;
+      }
+
+      [part="content"] {
+        padding: 0;
+        height: 100%;
+        overflow: hidden;
+        -webkit-mask-image: none;
+        mask-image: none;
+      }
+
+      @media (max-width: 420px), (max-height: 420px) {
+        [part="overlay"] {
+          width: 100vw;
+          height: 70vh;
+          max-height: 70vh;
+        }
+      }
+    </style>
+  </template>
+</dom-module>`;document.head.appendChild(D.content);const w=r`<dom-module id="lumo-date-picker-overlay-content" theme-for="vaadin-date-picker-overlay-content">
+  <template>
+    <style>
+      :host {
+        position: relative;
+        background-color: transparent;
+        /* Background for the year scroller, placed here as we are using a mask image on the actual years part */
+        background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
+        background-size: 57px 100%;
+        background-position: top right;
+        background-repeat: no-repeat;
+        cursor: default;
+      }
+
+      /* Month scroller */
+
+      [part="months"] {
+        /* Month calendar height:
+              header height + margin-bottom
+            + weekdays height + margin-bottom
+            + date cell heights
+            + small margin between month calendars
+        */
+        --vaadin-infinite-scroller-item-height:
+          calc(
+              var(--lumo-font-size-l) + var(--lumo-space-m)
+            + var(--lumo-font-size-xs) + var(--lumo-space-s)
+            + var(--lumo-size-m) * 6
+            + var(--lumo-space-s)
+          );
+        --vaadin-infinite-scroller-buffer-offset: 10%;
+        -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
+        mask-image: linear-gradient(transparent, #000 10%, #000 85%, transparent);
+        position: relative;
+        margin-right: 57px;
+      }
+
+      /* Year scroller */
+
+      [part="years"] {
+        /* TODO get rid of fixed magic number */
+        --vaadin-infinite-scroller-buffer-width: 97px;
+        width: 57px;
+        height: auto;
+        top: 0;
+        bottom: 0;
+        font-size: var(--lumo-font-size-s);
+        box-shadow: inset 2px 0 4px 0 var(--lumo-shade-5pct);
+        -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
+        mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent);
+      }
+
+      [part="year-number"],
+      [part="year-separator"] {
+        opacity: 0.5;
+        transition: 0.2s opacity;
+      }
+
+      [part="years"]:hover [part="year-number"],
+      [part="years"]:hover [part="year-separator"] {
+        opacity: 1;
+      }
+
+      /* TODO unsupported selector */
+      #scrollers {
+        position: static;
+        display: block;
+      }
+
+      /* TODO unsupported selector, should fix this in vaadin-date-picker that it adapts to the
+       * width of the year scroller */
+      #scrollers[desktop] [part="months"] {
+        right: auto;
+      }
+
+      /* Year scroller position indicator */
+      [part="years"]::before {
+        border: none;
+        width: 1em;
+        height: 1em;
+        background-color: var(--lumo-base-color);
+        background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+        transform: translate(-75%, -50%) rotate(45deg);
+        border-top-right-radius: calc(var(--lumo-border-radius) / 2);
+        box-shadow: 2px -2px 6px 0 var(--lumo-shade-5pct);
+        z-index: 1;
+      }
+
+      [part="year-number"],
+      [part="year-separator"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 50%;
+        transform: translateY(-50%);
+      }
+
+      [part="years"] [part="year-separator"]::after {
+        color: var(--lumo-disabled-text-color);
+        content: "•";
+      }
+
+      /* Current year */
+
+      [part="years"] [part="year-number"][current] {
+        color: var(--lumo-primary-text-color);
+      }
+
+      /* Toolbar (footer) */
+
+      [part="toolbar"] {
+        padding: var(--lumo-space-s);
+        box-shadow: 0 -1px 0 0 var(--lumo-contrast-10pct);
+        border-bottom-left-radius: var(--lumo-border-radius);
+        margin-right: 57px;
+      }
+
+      @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
+        [part="toolbar"] {
+          box-shadow: none;
+        }
+      }
+
+      [part="toolbar"] [part\$="button"] {
+        margin: 0;
+      }
+
+      /* Narrow viewport mode (fullscreen) */
+
+      :host([fullscreen]) [part="toolbar"] {
+        order: -1;
+        background-color: var(--lumo-base-color);
+      }
+
+      :host([fullscreen]) [part="overlay-header"] {
+        order: -2;
+        height: var(--lumo-size-m);
+        padding: var(--lumo-space-s);
+        position: absolute;
+        left: 0;
+        right: 0;
+        justify-content: center;
+      }
+
+      :host([fullscreen]) [part="toggle-button"],
+      :host([fullscreen]) [part="clear-button"],
+      [part="overlay-header"] [part="label"] {
+        display: none;
+      }
+
+      /* Very narrow screen (year scroller initially hidden) */
+
+      [part="years-toggle-button"] {
+        position: relative;
+        right: auto;
+        display: flex;
+        align-items: center;
+        height: var(--lumo-size-s);
+        padding: 0 0.5em;
+        border-radius: var(--lumo-border-radius);
+        z-index: 3;
+        color: var(--lumo-primary-text-color);
+        font-weight: 500;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      :host([years-visible]) [part="years-toggle-button"] {
+        background-color: var(--lumo-primary-color);
+        color: var(--lumo-primary-contrast-color);
+      }
+
+      [part="years-toggle-button"]::before {
+        content: none;
+      }
+
+      /* TODO magic number (same as used for iron-media-query in vaadin-date-picker-overlay-content) */
+      @media screen and (max-width: 374px) {
+        :host {
+          background-image: none;
+        }
+
+        [part="years"] {
+          background-color: var(--lumo-shade-5pct);
+        }
+
+        [part="toolbar"],
+        [part="months"] {
+          margin-right: 0;
+        }
+
+        /* TODO make date-picker adapt to the width of the years part */
+        [part="years"] {
+          --vaadin-infinite-scroller-buffer-width: 90px;
+          width: 50px;
+        }
+
+        :host([years-visible]) [part="months"] {
+          padding-left: 50px;
+        }
+      }
+    </style>
+  </template>
+</dom-module>`;document.head.appendChild(w.content);const k=r`<dom-module id="lumo-month-calendar" theme-for="vaadin-month-calendar">
+  <template>
+    <style>
+      :host {
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        user-select: none;
+        font-size: var(--lumo-font-size-m);
+        color: var(--lumo-body-text-color);
+        text-align: center;
+        padding: 0 var(--lumo-space-xs);
+      }
+
+      /* Month header */
+
+      [part="month-header"] {
+        color: var(--lumo-header-text-color);
+        font-size: var(--lumo-font-size-l);
+        line-height: 1;
+        font-weight: 500;
+        margin-bottom: var(--lumo-space-m);
+      }
+
+      /* Week days and numbers */
+
+      [part="weekdays"],
+      [part="weekday"],
+      [part="week-numbers"] {
+        font-size: var(--lumo-font-size-xs);
+        line-height: 1;
+        color: var(--lumo-tertiary-text-color);
+      }
+
+      [part="weekdays"] {
+        margin-bottom: var(--lumo-space-s);
+      }
+
+      /* TODO should have part="week-number" for the cell in weekdays-container */
+      [part="weekday"]:empty,
+      [part="week-numbers"] {
+        width: var(--lumo-size-xs);
+      }
+
+      /* Date and week number cells */
+
+      [part="date"],
+      [part="week-number"] {
+        box-sizing: border-box;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: var(--lumo-size-m);
+        position: relative;
+      }
+
+      [part="date"] {
+        transition: color 0.1s;
+      }
+
+      /* Today date */
+
+      [part="date"][today] {
+        color: var(--lumo-primary-text-color);
+      }
+
+      /* Focused date */
+
+      [part="date"]::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        min-width: 2em;
+        min-height: 2em;
+        width: 80%;
+        height: 80%;
+        max-height: 100%;
+        max-width: 100%;
+        border-radius: var(--lumo-border-radius);
+      }
+
+      [part="date"][focused]::before {
+        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+      }
+
+      :host(:not([focused])) [part="date"][focused]::before {
+        animation: vaadin-date-picker-month-calendar-focus-date 1.4s infinite;
+      }
+
+      @keyframes vaadin-date-picker-month-calendar-focus-date {
+        50% {
+          box-shadow: 0 0 0 2px transparent;
+        }
+      }
+
+      /* TODO should not rely on the role attribute */
+      [part="date"][role="button"]:not([disabled]):not([selected]):hover::before {
+        background-color: var(--lumo-primary-color-10pct);
+      }
+
+      [part="date"][selected] {
+        color: var(--lumo-primary-contrast-color);
+      }
+
+      [part="date"][selected]::before {
+        background-color: var(--lumo-primary-color);
+      }
+
+      [part="date"][disabled] {
+        color: var(--lumo-disabled-text-color);
+      }
+
+      @media (pointer: coarse) {
+        [part="date"]:hover:not([selected])::before,
+        [part="date"][focused]:not([selected])::before {
+          display: none;
+        }
+
+        [part="date"][role="button"]:not([disabled]):active::before {
+          display: block;
+        }
+
+        [part="date"][selected]::before {
+          box-shadow: none;
+        }
+      }
+
+      /* Disabled */
+
+      :host([disabled]) * {
+        color: var(--lumo-disabled-text-color) !important;
+      }
+    </style>
+  </template>
+</dom-module><custom-style>
+  <style>
+    @keyframes vaadin-date-picker-month-calendar-focus-date {
+      50% {
+        box-shadow: 0 0 0 2px transparent;
+      }
+    }
+  </style>
+</custom-style>`;document.head.appendChild(k.content);const x=r`<dom-module id="lumo-date-picker" theme-for="vaadin-date-picker">
+  <template>
+    <style include="lumo-field-button">
+      :host {
+        outline: none;
+      }
+
+      [part="toggle-button"]::before {
+        content: var(--lumo-icons-calendar);
+      }
+
+      [part="clear-button"]::before {
+        content: var(--lumo-icons-cross);
+      }
+
+      @media (max-width: 420px), (max-height: 420px) {
+        [part="overlay-content"] {
+          height: 70vh;
+        }
+      }
+    </style>
+  </template>
+</dom-module>`;document.head.appendChild(x.content);const S=r`<dom-module id="lumo-date-picker-text-field" theme-for="vaadin-date-picker-text-field">
+  <template>
+    <style>
+      :not(*):placeholder-shown, /* to prevent broken styles on IE */
+      :host([dir="rtl"]) [part="value"]:placeholder-shown,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input:placeholder-shown) {
+        --_lumo-text-field-overflow-mask-image: none;
+      }
+
+      :host([dir="rtl"]) [part="value"],
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input) {
+        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+      }
+    </style>
+  </template>
+</dom-module>`;document.head.appendChild(S.content);
+/**
+@license
+Copyright (c) 2019 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+const C=document.createElement("template");C.innerHTML='<dom-module id="vaadin-date-picker-text-field-styles" theme-for="vaadin-date-picker-text-field">\n  <template>\n    <style>\n      :host([dir="rtl"]) [part="input-field"] {\n        direction: ltr;\n      }\n\n      :host([dir="rtl"]) [part="value"]::placeholder {\n        direction: rtl;\n        text-align: left;\n      }\n\n      :host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {\n        direction: rtl;\n        text-align: left;\n      }\n\n      :host([dir="rtl"]) [part="value"]:-ms-input-placeholder,\n      :host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {\n        direction: rtl;\n        text-align: left;\n      }\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(C.content);class E extends m{static get is(){return"vaadin-date-picker-text-field"}}customElements.define(E.is,E);
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+class M extends(_(s)){static get is(){return"vaadin-date-picker-overlay"}}customElements.define(M.is,M);
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+const T=class{static _getISOWeekNumber(e){var t=e.getDay();0===t&&(t=7);var a=4-t,i=new Date(e.getTime()+24*a*3600*1e3),s=new Date(0,0);s.setFullYear(i.getFullYear());var o=i.getTime()-s.getTime(),n=Math.round(o/864e5);return Math.floor(n/7+1)}static _getAdjustedYear(e,t,a=0,i=1){if(t>99)throw new Error("The provided year cannot have more than 2 digits.");if(t<0)throw new Error("The provided year cannot be negative.");let s=t+100*Math.floor(e.getFullYear()/100);return e<new Date(s-50,a,i)?s-=100:e>new Date(s+50,a,i)&&(s+=100),s}static _parseDate(e){var t=/^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(e);if(t){var a=new Date(0,0);return a.setFullYear(parseInt(t[1],10)),a.setMonth(parseInt(t[2],10)-1),a.setDate(parseInt(t[3],10)),a}}static _dateEquals(e,t){return e instanceof Date&&t instanceof Date&&e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}static _dateAllowed(e,t,a){return(!t||e>=t)&&(!a||e<=a)}static _getClosestDate(e,t){return t.filter((e=>void 0!==e)).reduce(((t,a)=>a?t?Math.abs(e.getTime()-a.getTime())<Math.abs(t.getTime()-e.getTime())?a:t:a:t))}static _extractDateParts(e){return{day:e.getDate(),month:e.getMonth(),year:e.getFullYear()}}};
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/class I extends(e(l(h))){static get template(){return r`
+    <style>
+      :host {
+        display: block;
+      }
+
+      [part="weekdays"],
+      #days {
+        display: flex;
+        flex-wrap: wrap;
+        flex-grow: 1;
+      }
+
+      #days-container,
+      #weekdays-container {
+        display: flex;
+      }
+
+      [part="week-numbers"] {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex-shrink: 0;
+      }
+
+      [part="week-numbers"][hidden],
+      [part="weekday"][hidden] {
+        display: none;
+      }
+
+      [part="weekday"],
+      [part="date"] {
+        /* Would use calc(100% / 7) but it doesn't work nice on IE */
+        width: 14.285714286%;
+      }
+
+      [part="weekday"]:empty,
+      [part="week-numbers"] {
+        width: 12.5%;
+        flex-shrink: 0;
+      }
+    </style>
+
+    <div part="month-header" role="heading">[[_getTitle(month, i18n.monthNames)]]</div>
+    <div id="monthGrid" on-tap="_handleTap" on-touchend="_preventDefault" on-touchstart="_onMonthGridTouchStart">
+      <div id="weekdays-container">
+        <div hidden="[[!_showWeekSeparator(showWeekNumbers, i18n.firstDayOfWeek)]]" part="weekday"></div>
+        <div part="weekdays">
+          <template is="dom-repeat" items="[[_getWeekDayNames(i18n.weekdays, i18n.weekdaysShort, showWeekNumbers, i18n.firstDayOfWeek)]]">
+            <div part="weekday" role="heading" aria-label\$="[[item.weekDay]]">[[item.weekDayShort]]</div>
+          </template>
+        </div>
+      </div>
+      <div id="days-container">
+        <div part="week-numbers" hidden="[[!_showWeekSeparator(showWeekNumbers, i18n.firstDayOfWeek)]]">
+          <template is="dom-repeat" items="[[_getWeekNumbers(_days)]]">
+            <div part="week-number" role="heading" aria-label\$="[[i18n.week]] [[item]]">[[item]]</div>
+          </template>
+        </div>
+        <div id="days">
+          <template is="dom-repeat" items="[[_days]]">
+            <div part="date" today\$="[[_isToday(item)]]" selected\$="[[_dateEquals(item, selectedDate)]]" focused\$="[[_dateEquals(item, focusedDate)]]" date="[[item]]" disabled\$="[[!_dateAllowed(item, minDate, maxDate)]]" role\$="[[_getRole(item)]]" aria-label\$="[[_getAriaLabel(item)]]" aria-disabled\$="[[_getAriaDisabled(item, minDate, maxDate)]]">[[_getDate(item)]]</div>
+          </template>
+        </div>
+      </div>
+    </div>
+`}static get is(){return"vaadin-month-calendar"}static get properties(){return{month:{type:Date,value:new Date},selectedDate:{type:Date,notify:!0},focusedDate:Date,showWeekNumbers:{type:Boolean,value:!1},i18n:{type:Object},ignoreTaps:Boolean,_notTapping:Boolean,minDate:{type:Date,value:null},maxDate:{type:Date,value:null},_days:{type:Array,computed:"_getDays(month, i18n.firstDayOfWeek, minDate, maxDate)"},disabled:{type:Boolean,reflectToAttribute:!0,computed:"_isDisabled(month, minDate, maxDate)"}}}static get observers(){return["_showWeekNumbersChanged(showWeekNumbers, i18n.firstDayOfWeek)"]}_dateEquals(e,t){return T._dateEquals(e,t)}_dateAllowed(e,t,a){return T._dateAllowed(e,t,a)}_isDisabled(e,t,a){var i=new Date(0,0);i.setFullYear(e.getFullYear()),i.setMonth(e.getMonth()),i.setDate(1);var s=new Date(0,0);return s.setFullYear(e.getFullYear()),s.setMonth(e.getMonth()+1),s.setDate(0),!(t&&a&&t.getMonth()===a.getMonth()&&t.getMonth()===e.getMonth()&&a.getDate()-t.getDate()>=0)&&(!this._dateAllowed(i,t,a)&&!this._dateAllowed(s,t,a))}_getTitle(e,t){if(void 0!==e&&void 0!==t)return this.i18n.formatTitle(t[e.getMonth()],e.getFullYear())}_onMonthGridTouchStart(){this._notTapping=!1,setTimeout((()=>this._notTapping=!0),300)}_dateAdd(e,t){e.setDate(e.getDate()+t)}_applyFirstDayOfWeek(e,t){if(void 0!==e&&void 0!==t)return e.slice(t).concat(e.slice(0,t))}_getWeekDayNames(e,t,a,i){if(void 0!==e&&void 0!==t&&void 0!==a&&void 0!==i)return e=this._applyFirstDayOfWeek(e,i),t=this._applyFirstDayOfWeek(t,i),e=e.map(((e,a)=>({weekDay:e,weekDayShort:t[a]})))}_getDate(e){return e?e.getDate():""}_showWeekNumbersChanged(e,t){e&&1===t?this.setAttribute("week-numbers",""):this.removeAttribute("week-numbers")}_showWeekSeparator(e,t){return e&&1===t}_isToday(e){return this._dateEquals(new Date,e)}_getDays(e,t){if(void 0!==e&&void 0!==t){var a=new Date(0,0);for(a.setFullYear(e.getFullYear()),a.setMonth(e.getMonth()),a.setDate(1);a.getDay()!==t;)this._dateAdd(a,-1);for(var i=[],s=a.getMonth(),o=e.getMonth();a.getMonth()===o||a.getMonth()===s;)i.push(a.getMonth()===o?new Date(a.getTime()):null),this._dateAdd(a,1);return i}}_getWeekNumber(e,t){if(void 0!==e&&void 0!==t)return e||(e=t.reduce(((e,t)=>!e&&t?t:e))),T._getISOWeekNumber(e)}_getWeekNumbers(e){return e.map((t=>this._getWeekNumber(t,e))).filter(((e,t,a)=>a.indexOf(e)===t))}_handleTap(e){this.ignoreTaps||this._notTapping||!e.target.date||e.target.hasAttribute("disabled")||(this.selectedDate=e.target.date,this.dispatchEvent(new CustomEvent("date-tap",{bubbles:!0,composed:!0})))}_preventDefault(e){e.preventDefault()}_getRole(e){return e?"button":"presentation"}_getAriaLabel(e){if(!e)return"";var t=this._getDate(e)+" "+this.i18n.monthNames[e.getMonth()]+" "+e.getFullYear()+", "+this.i18n.weekdays[e.getDay()];return this._isToday(e)&&(t+=", "+this.i18n.today),t}_getAriaDisabled(e,t,a){if(void 0!==e&&void 0!==t&&void 0!==a)return this._dateAllowed(e,t,a)?"false":"true"}}customElements.define(I.is,I);
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+class A extends h{static get template(){return r`
+    <style>
+      :host {
+        display: block;
+        overflow: hidden;
+        height: 500px;
+      }
+
+      #scroller {
+        position: relative;
+        height: 100%;
+        overflow: auto;
+        outline: none;
+        margin-right: -40px;
+        -webkit-overflow-scrolling: touch;
+        -ms-overflow-style: none;
+        overflow-x: hidden;
+      }
+
+      #scroller.notouchscroll {
+        -webkit-overflow-scrolling: auto;
+      }
+
+      #scroller::-webkit-scrollbar {
+        display: none;
+      }
+
+      .buffer {
+        position: absolute;
+        width: var(--vaadin-infinite-scroller-buffer-width, 100%);
+        box-sizing: border-box;
+        padding-right: 40px;
+        top: var(--vaadin-infinite-scroller-buffer-offset, 0);
+        animation: fadein 0.2s;
+      }
+
+      @keyframes fadein {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+    </style>
+
+    <div id="scroller" on-scroll="_scroll">
+      <div class="buffer"></div>
+      <div class="buffer"></div>
+      <div id="fullHeight"></div>
+    </div>
+`}static get is(){return"vaadin-infinite-scroller"}static get properties(){return{bufferSize:{type:Number,value:20},_initialScroll:{value:5e5},_initialIndex:{value:0},_buffers:Array,_preventScrollEvent:Boolean,_mayHaveMomentum:Boolean,_initialized:Boolean,active:{type:Boolean,observer:"_activated"}}}ready(){super.ready(),this._buffers=Array.prototype.slice.call(this.root.querySelectorAll(".buffer")),this.$.fullHeight.style.height=2*this._initialScroll+"px";var e=this.querySelector("template");this._TemplateClass=f(e,this,{forwardHostProp:function(e,t){"index"!==e&&this._buffers.forEach((a=>{[].forEach.call(a.children,(a=>{a._itemWrapper.instance[e]=t}))}))}}),navigator.userAgent.toLowerCase().indexOf("firefox")>-1&&(this.$.scroller.tabIndex=-1)}forceUpdate(){this._debouncerUpdateClones&&(this._buffers[0].updated=this._buffers[1].updated=!1,this._updateClones(),this._debouncerUpdateClones.cancel())}_activated(e){e&&!this._initialized&&(this._createPool(),this._initialized=!0)}_finishInit(){this._initDone||(this._buffers.forEach((e=>{[].forEach.call(e.children,(e=>this._ensureStampedInstance(e._itemWrapper)))}),this),this._buffers[0].translateY||this._reset(),this._initDone=!0)}_translateBuffer(e){var t=e?1:0;this._buffers[t].translateY=this._buffers[t?0:1].translateY+this._bufferHeight*(t?-1:1),this._buffers[t].style.transform="translate3d(0, "+this._buffers[t].translateY+"px, 0)",this._buffers[t].updated=!1,this._buffers.reverse()}_scroll(){if(this._scrollDisabled)return;var e=this.$.scroller.scrollTop;(e<this._bufferHeight||e>2*this._initialScroll-this._bufferHeight)&&(this._initialIndex=~~this.position,this._reset());const t=this.itemHeight+this.bufferOffset,a=e>this._buffers[1].translateY+t,i=e<this._buffers[0].translateY+t;(a||i)&&(this._translateBuffer(i),this._updateClones()),this._preventScrollEvent||(this.dispatchEvent(new CustomEvent("custom-scroll",{bubbles:!1,composed:!0})),this._mayHaveMomentum=!0),this._preventScrollEvent=!1,this._debouncerScrollFinish=d.debounce(this._debouncerScrollFinish,u.after(200),(()=>{var e=this.$.scroller.getBoundingClientRect();this._isVisible(this._buffers[0],e)||this._isVisible(this._buffers[1],e)||(this.position=this.position)}))}set position(e){this._preventScrollEvent=!0,e>this._firstIndex&&e<this._firstIndex+2*this.bufferSize?this.$.scroller.scrollTop=this.itemHeight*(e-this._firstIndex)+this._buffers[0].translateY:(this._initialIndex=~~e,this._reset(),this._scrollDisabled=!0,this.$.scroller.scrollTop+=e%1*this.itemHeight,this._scrollDisabled=!1),this._mayHaveMomentum&&(this.$.scroller.classList.add("notouchscroll"),this._mayHaveMomentum=!1,setTimeout((()=>{this.$.scroller.classList.remove("notouchscroll")}),10))}get bufferOffset(){return this._buffers[0].offsetTop}get position(){return(this.$.scroller.scrollTop-this._buffers[0].translateY)/this.itemHeight+this._firstIndex}get itemHeight(){if(!this._itemHeightVal){window.ShadyCSS&&window.ShadyCSS.nativeCss||this.updateStyles();const e=window.ShadyCSS?window.ShadyCSS.getComputedStyleValue(this,"--vaadin-infinite-scroller-item-height"):getComputedStyle(this).getPropertyValue("--vaadin-infinite-scroller-item-height"),t="background-position";this.$.fullHeight.style.setProperty(t,e);const a=getComputedStyle(this.$.fullHeight).getPropertyValue(t);this.$.fullHeight.style.removeProperty(t),this._itemHeightVal=parseFloat(a)}return this._itemHeightVal}get _bufferHeight(){return this.itemHeight*this.bufferSize}_reset(){this._scrollDisabled=!0,this.$.scroller.scrollTop=this._initialScroll,this._buffers[0].translateY=this._initialScroll-this._bufferHeight,this._buffers[1].translateY=this._initialScroll,this._buffers.forEach((e=>{e.style.transform="translate3d(0, "+e.translateY+"px, 0)"})),this._buffers[0].updated=this._buffers[1].updated=!1,this._updateClones(!0),this._debouncerUpdateClones=d.debounce(this._debouncerUpdateClones,u.after(200),(()=>{this._buffers[0].updated=this._buffers[1].updated=!1,this._updateClones()})),this._scrollDisabled=!1}_createPool(){var e=this.getBoundingClientRect();this._buffers.forEach((t=>{for(var a=0;a<this.bufferSize;a++){const a=document.createElement("div");a.style.height=this.itemHeight+"px",a.instance={};const i="vaadin-infinite-scroller-item-content-"+(A._contentIndex=A._contentIndex+1||0),s=document.createElement("slot");s.setAttribute("name",i),s._itemWrapper=a,t.appendChild(s),a.setAttribute("slot",i),this.appendChild(a),v(),setTimeout((()=>{this._isVisible(a,e)&&this._ensureStampedInstance(a)}),1)}}),this),setTimeout((()=>{y(this,this._finishInit.bind(this))}),1)}_ensureStampedInstance(e){if(!e.firstElementChild){var t=e.instance;e.instance=new this._TemplateClass({}),e.appendChild(e.instance.root),Object.keys(t).forEach((a=>{e.instance.set(a,t[a])}))}}_updateClones(e){this._firstIndex=~~((this._buffers[0].translateY-this._initialScroll)/this.itemHeight)+this._initialIndex;var t=e?this.$.scroller.getBoundingClientRect():void 0;this._buffers.forEach(((a,i)=>{if(!a.updated){var s=this._firstIndex+this.bufferSize*i;[].forEach.call(a.children,((a,i)=>{const o=a._itemWrapper;e&&!this._isVisible(o,t)||(o.instance.index=s+i)})),a.updated=!0}}),this)}_isVisible(e,t){var a=e.getBoundingClientRect();return a.bottom>t.top&&a.top<t.bottom}}customElements.define(A.is,A);const O=document.createElement("template");O.innerHTML='<dom-module id="vaadin-date-picker-overlay-styles" theme-for="vaadin-date-picker-overlay">\n  <template>\n    <style>\n      :host {\n        align-items: flex-start;\n        justify-content: flex-start;\n      }\n\n      :host([bottom-aligned]) {\n        justify-content: flex-end;\n      }\n\n      :host([right-aligned]) {\n        align-items: flex-end;\n      }\n\n      :host([dir="rtl"]) {\n        align-items: flex-end;\n      }\n\n      :host([dir="rtl"][right-aligned]) {\n        align-items: flex-start;\n      }\n\n      [part="overlay"] {\n        display: flex;\n        flex: auto;\n      }\n\n      [part~="content"] {\n        flex: auto;\n      }\n    </style>\n  </template>\n</dom-module>',document.head.appendChild(O.content);
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+class $ extends(e(t(l(h)))){static get template(){return r`
+    <style>
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+        outline: none;
+        background: #fff;
+      }
+
+      [part="overlay-header"] {
+        display: flex;
+        flex-shrink: 0;
+        flex-wrap: nowrap;
+        align-items: center;
+      }
+
+      :host(:not([fullscreen])) [part="overlay-header"] {
+        display: none;
+      }
+
+      [part="label"] {
+        flex-grow: 1;
+      }
+
+      [part="clear-button"]:not([showclear]) {
+        display: none;
+      }
+
+      [part="years-toggle-button"] {
+        display: flex;
+      }
+
+      [part="years-toggle-button"][desktop] {
+        display: none;
+      }
+
+      :host(:not([years-visible])) [part="years-toggle-button"]::before {
+        transform: rotate(180deg);
+      }
+
+      #scrollers {
+        display: flex;
+        height: 100%;
+        width: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+
+      [part="months"],
+      [part="years"] {
+        height: 100%;
+      }
+
+      [part="months"] {
+        --vaadin-infinite-scroller-item-height: 270px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+
+      #scrollers[desktop] [part="months"] {
+        right: 50px;
+        transform: none !important;
+      }
+
+      [part="years"] {
+        --vaadin-infinite-scroller-item-height: 80px;
+        width: 50px;
+        position: absolute;
+        right: 0;
+        transform: translateX(100%);
+        -webkit-tap-highlight-color: transparent;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        /* Center the year scroller position. */
+        --vaadin-infinite-scroller-buffer-offset: 50%;
+      }
+
+      #scrollers[desktop] [part="years"] {
+        position: absolute;
+        transform: none !important;
+      }
+
+      [part="years"]::before {
+        content: '';
+        display: block;
+        background: transparent;
+        width: 0;
+        height: 0;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        border-width: 6px;
+        border-style: solid;
+        border-color: transparent;
+        border-left-color: #000;
+      }
+
+      :host(.animate) [part="months"],
+      :host(.animate) [part="years"] {
+        transition: all 200ms;
+      }
+
+      [part="toolbar"] {
+        display: flex;
+        justify-content: space-between;
+        z-index: 2;
+        flex-shrink: 0;
+      }
+
+      [part~="overlay-header"]:not([desktop]) {
+        padding-bottom: 40px;
+      }
+
+      [part~="years-toggle-button"] {
+        position: absolute;
+        top: auto;
+        right: 8px;
+        bottom: 0;
+        z-index: 1;
+        padding: 8px;
+      }
+
+      #announcer {
+        display: inline-block;
+        position: fixed;
+        clip: rect(0, 0, 0, 0);
+        clip-path: inset(100%);
+      }
+    </style>
+
+    <div id="announcer" role="alert" aria-live="polite">
+      [[i18n.calendar]]
+    </div>
+
+    <div part="overlay-header" on-touchend="_preventDefault" desktop\$="[[_desktopMode]]" aria-hidden="true">
+      <div part="label">[[_formatDisplayed(selectedDate, i18n.formatDate, label)]]</div>
+      <div part="clear-button" on-tap="_clear" showclear\$="[[_showClear(selectedDate)]]"></div>
+      <div part="toggle-button" on-tap="_cancel"></div>
+
+      <div part="years-toggle-button" desktop\$="[[_desktopMode]]" on-tap="_toggleYearScroller" aria-hidden="true">
+        [[_yearAfterXMonths(_visibleMonthIndex)]]
+      </div>
+    </div>
+
+    <div id="scrollers" desktop\$="[[_desktopMode]]" on-track="_track">
+      <vaadin-infinite-scroller id="monthScroller" on-custom-scroll="_onMonthScroll" on-touchstart="_onMonthScrollTouchStart" buffer-size="3" active="[[initialPosition]]" part="months">
+        <template>
+          <vaadin-month-calendar i18n="[[i18n]]" month="[[_dateAfterXMonths(index)]]" selected-date="{{selectedDate}}" focused-date="[[focusedDate]]" ignore-taps="[[_ignoreTaps]]" show-week-numbers="[[showWeekNumbers]]" min-date="[[minDate]]" max-date="[[maxDate]]" focused\$="[[_focused]]" part="month" theme\$="[[theme]]">
+          </vaadin-month-calendar>
+        </template>
+      </vaadin-infinite-scroller>
+      <vaadin-infinite-scroller id="yearScroller" on-tap="_onYearTap" on-custom-scroll="_onYearScroll" on-touchstart="_onYearScrollTouchStart" buffer-size="12" active="[[initialPosition]]" part="years">
+        <template>
+          <div part="year-number" role="button" current\$="[[_isCurrentYear(index)]]" selected\$="[[_isSelectedYear(index, selectedDate)]]">
+            [[_yearAfterXYears(index)]]
+          </div>
+          <div part="year-separator" aria-hidden="true"></div>
+        </template>
+      </vaadin-infinite-scroller>
+    </div>
+
+    <div on-touchend="_preventDefault" role="toolbar" part="toolbar">
+      <vaadin-button id="todayButton" theme="tertiary" part="today-button" disabled="[[!_isTodayAllowed(minDate, maxDate)]]" on-tap="_onTodayTap">
+        [[i18n.today]]
+      </vaadin-button>
+      <vaadin-button id="cancelButton" theme="tertiary" part="cancel-button" on-tap="_cancel">
+        [[i18n.cancel]]
+      </vaadin-button>
+    </div>
+
+    <iron-media-query query="(min-width: 375px)" query-matches="{{_desktopMode}}"></iron-media-query>
+`}static get is(){return"vaadin-date-picker-overlay-content"}static get properties(){return{selectedDate:{type:Date,notify:!0},focusedDate:{type:Date,notify:!0,observer:"_focusedDateChanged"},_focusedMonthDate:Number,initialPosition:{type:Date,observer:"_initialPositionChanged"},_originDate:{value:new Date},_visibleMonthIndex:Number,_desktopMode:Boolean,_translateX:{observer:"_translateXChanged"},_yearScrollerWidth:{value:50},i18n:{type:Object},showWeekNumbers:{type:Boolean},_ignoreTaps:Boolean,_notTapping:Boolean,minDate:Date,maxDate:Date,_focused:Boolean,label:String}}get __isRTL(){return"rtl"===this.getAttribute("dir")}get __useSubMonthScrolling(){return this.$.monthScroller.clientHeight<this.$.monthScroller.itemHeight+this.$.monthScroller.bufferOffset}ready(){super.ready(),this.setAttribute("tabindex",0),this.addEventListener("keydown",this._onKeydown.bind(this)),c(this,"tap",this._stopPropagation),this.addEventListener("focus",this._onOverlayFocus.bind(this)),this.addEventListener("blur",this._onOverlayBlur.bind(this))}connectedCallback(){super.connectedCallback(),this._closeYearScroller(),this._toggleAnimateClass(!0),p(this.$.scrollers,"pan-y"),o.requestAvailability()}announceFocusedDate(){var e=this._currentlyFocusedDate(),t=[];T._dateEquals(e,new Date)&&t.push(this.i18n.today),t=t.concat([this.i18n.weekdays[e.getDay()],e.getDate(),this.i18n.monthNames[e.getMonth()],e.getFullYear()]),this.showWeekNumbers&&1===this.i18n.firstDayOfWeek&&(t.push(this.i18n.week),t.push(T._getISOWeekNumber(e))),this.dispatchEvent(new CustomEvent("iron-announce",{bubbles:!0,composed:!0,detail:{text:t.join(" ")}}))}focusCancel(){this.$.cancelButton.focus()}scrollToDate(e,t){const a=this.__useSubMonthScrolling?this._calculateWeekScrollOffset(e):0;this._scrollToPosition(this._differenceInMonths(e,this._originDate)+a,t),this.$.monthScroller.forceUpdate()}_focusedDateChanged(e){this.revealDate(e)}_isCurrentYear(e){return 0===e}_isSelectedYear(e,t){if(t)return t.getFullYear()===this._originDate.getFullYear()+e}revealDate(e,t=!0){if(!e)return;const a=this._differenceInMonths(e,this._originDate);if(this.__useSubMonthScrolling){const i=this._calculateWeekScrollOffset(e);return void this._scrollToPosition(a+i,t)}const i=this.$.monthScroller.position>a,s=Math.max(this.$.monthScroller.itemHeight,this.$.monthScroller.clientHeight-2*this.$.monthScroller.bufferOffset)/this.$.monthScroller.itemHeight,o=this.$.monthScroller.position+s-1<a;i?this._scrollToPosition(a,t):o&&this._scrollToPosition(a-s+1,t)}_calculateWeekScrollOffset(e){const t=new Date(0,0);t.setFullYear(e.getFullYear()),t.setMonth(e.getMonth()),t.setDate(1);let a=0;for(;t.getDate()<e.getDate();)t.setDate(t.getDate()+1),t.getDay()===this.i18n.firstDayOfWeek&&(a+=1);return a/6}_onOverlayFocus(){this._focused=!0}_onOverlayBlur(){this._focused=!1}_initialPositionChanged(e){this.scrollToDate(e)}_repositionYearScroller(){this._visibleMonthIndex=Math.floor(this.$.monthScroller.position),this.$.yearScroller.position=(this.$.monthScroller.position+this._originDate.getMonth())/12}_repositionMonthScroller(){this.$.monthScroller.position=12*this.$.yearScroller.position-this._originDate.getMonth(),this._visibleMonthIndex=Math.floor(this.$.monthScroller.position)}_onMonthScroll(){this._repositionYearScroller(),this._doIgnoreTaps()}_onYearScroll(){this._repositionMonthScroller(),this._doIgnoreTaps()}_onYearScrollTouchStart(){this._notTapping=!1,setTimeout((()=>this._notTapping=!0),300),this._repositionMonthScroller()}_onMonthScrollTouchStart(){this._repositionYearScroller()}_doIgnoreTaps(){this._ignoreTaps=!0,this._debouncer=d.debounce(this._debouncer,u.after(300),(()=>this._ignoreTaps=!1))}_formatDisplayed(e,t,a){return e?t(T._extractDateParts(e)):a}_onTodayTap(){var e=new Date;Math.abs(this.$.monthScroller.position-this._differenceInMonths(e,this._originDate))<.001?(this.selectedDate=e,this._close()):this._scrollToCurrentMonth()}_scrollToCurrentMonth(){this.focusedDate&&(this.focusedDate=new Date),this.scrollToDate(new Date,!0)}_showClear(e){return!!e}_onYearTap(e){if(!this._ignoreTaps&&!this._notTapping){var t=(e.detail.y-(this.$.yearScroller.getBoundingClientRect().top+this.$.yearScroller.clientHeight/2))/this.$.yearScroller.itemHeight;this._scrollToPosition(this.$.monthScroller.position+12*t,!0)}}_scrollToPosition(e,t){if(void 0===this._targetPosition){if(!t)return this.$.monthScroller.position=e,this._targetPosition=void 0,void this._repositionYearScroller();this._targetPosition=e;var a=t?300:0,i=0,s=this.$.monthScroller.position,o=e=>{var t,n,r,l=e-(i=i||e);if(l<a){var h=(t=l,n=s,r=this._targetPosition-s,(t/=a/2)<1?r/2*t*t+n:-r/2*(--t*(t-2)-1)+n);this.$.monthScroller.position=h,window.requestAnimationFrame(o)}else this.dispatchEvent(new CustomEvent("scroll-animation-finished",{bubbles:!0,composed:!0,detail:{position:this._targetPosition,oldPosition:s}})),this.$.monthScroller.position=this._targetPosition,this._targetPosition=void 0;setTimeout(this._repositionYearScroller.bind(this),1)};window.requestAnimationFrame(o)}else this._targetPosition=e}_limit(e,t){return Math.min(t.max,Math.max(t.min,e))}_handleTrack(e){if(!(Math.abs(e.detail.dx)<10||Math.abs(e.detail.ddy)>10)){Math.abs(e.detail.ddx)>this._yearScrollerWidth/3&&this._toggleAnimateClass(!0);var t=this._translateX+e.detail.ddx;this._translateX=this._limit(t,{min:0,max:this._yearScrollerWidth})}}_track(e){if(!this._desktopMode)switch(e.detail.state){case"start":this._toggleAnimateClass(!1);break;case"track":this._handleTrack(e);break;case"end":this._toggleAnimateClass(!0),this._translateX>=this._yearScrollerWidth/2?this._closeYearScroller():this._openYearScroller()}}_toggleAnimateClass(e){e?this.classList.add("animate"):this.classList.remove("animate")}_toggleYearScroller(){this._isYearScrollerVisible()?this._closeYearScroller():this._openYearScroller()}_openYearScroller(){this._translateX=0,this.setAttribute("years-visible","")}_closeYearScroller(){this.removeAttribute("years-visible"),this._translateX=this._yearScrollerWidth}_isYearScrollerVisible(){return this._translateX<this._yearScrollerWidth/2}_translateXChanged(e){this._desktopMode||(this.$.monthScroller.style.transform="translateX("+(e-this._yearScrollerWidth)+"px)",this.$.yearScroller.style.transform="translateX("+e+"px)")}_yearAfterXYears(e){var t=new Date(this._originDate);return t.setFullYear(parseInt(e)+this._originDate.getFullYear()),t.getFullYear()}_yearAfterXMonths(e){return this._dateAfterXMonths(e).getFullYear()}_dateAfterXMonths(e){var t=new Date(this._originDate);return t.setDate(1),t.setMonth(parseInt(e)+this._originDate.getMonth()),t}_differenceInMonths(e,t){return 12*(e.getFullYear()-t.getFullYear())-t.getMonth()+e.getMonth()}_differenceInYears(e,t){return this._differenceInMonths(e,t)/12}_clear(){this.selectedDate=""}_close(){const e=this.getRootNode().host,t=e?e.getRootNode().host:null;t&&(t.opened=!1),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0}))}_cancel(){this.focusedDate=this.selectedDate,this._close()}_preventDefault(e){e.preventDefault()}_eventKey(e){for(var t=["down","up","right","left","enter","space","home","end","pageup","pagedown","tab","esc"],a=0;a<t.length;a++){var i=t[a];if(n.keyboardEventMatchesKeys(e,i))return i}}_onKeydown(e){var t=this._currentlyFocusedDate();const a=e.composedPath().indexOf(this.$.todayButton)>=0,i=e.composedPath().indexOf(this.$.cancelButton)>=0,s=!a&&!i;var o=this._eventKey(e);if("tab"===o){e.stopPropagation();const t=this.hasAttribute("fullscreen"),o=e.shiftKey;t?e.preventDefault():o&&s||!o&&i?(e.preventDefault(),this.dispatchEvent(new CustomEvent("focus-input",{bubbles:!0,composed:!0}))):o&&a?(this._focused=!0,setTimeout((()=>this.revealDate(this.focusedDate)),1)):this._focused=!1}else if(o)switch(e.preventDefault(),e.stopPropagation(),o){case"down":this._moveFocusByDays(7),this.focus();break;case"up":this._moveFocusByDays(-7),this.focus();break;case"right":s&&this._moveFocusByDays(this.__isRTL?-1:1);break;case"left":s&&this._moveFocusByDays(this.__isRTL?1:-1);break;case"enter":s||i?this._close():a&&this._onTodayTap();break;case"space":if(i)this._close();else if(a)this._onTodayTap();else{var n=this.focusedDate;T._dateEquals(n,this.selectedDate)?(this.selectedDate="",this.focusedDate=n):this.selectedDate=n}break;case"home":this._moveFocusInsideMonth(t,"minDate");break;case"end":this._moveFocusInsideMonth(t,"maxDate");break;case"pagedown":this._moveFocusByMonths(e.shiftKey?12:1);break;case"pageup":this._moveFocusByMonths(e.shiftKey?-12:-1);break;case"esc":this._cancel()}}_currentlyFocusedDate(){return this.focusedDate||this.selectedDate||this.initialPosition||new Date}_focusDate(e){this.focusedDate=e,this._focusedMonthDate=e.getDate()}_focusClosestDate(e){this._focusDate(T._getClosestDate(e,[this.minDate,this.maxDate]))}_moveFocusByDays(e){var t=this._currentlyFocusedDate(),a=new Date(0,0);a.setFullYear(t.getFullYear()),a.setMonth(t.getMonth()),a.setDate(t.getDate()+e),this._dateAllowed(a,this.minDate,this.maxDate)?this._focusDate(a):this._dateAllowed(t,this.minDate,this.maxDate)?e>0?this._focusDate(this.maxDate):this._focusDate(this.minDate):this._focusClosestDate(t)}_moveFocusByMonths(e){var t=this._currentlyFocusedDate(),a=new Date(0,0);a.setFullYear(t.getFullYear()),a.setMonth(t.getMonth()+e);var i=a.getMonth();a.setDate(this._focusedMonthDate||(this._focusedMonthDate=t.getDate())),a.getMonth()!==i&&a.setDate(0),this._dateAllowed(a,this.minDate,this.maxDate)?this.focusedDate=a:this._dateAllowed(t,this.minDate,this.maxDate)?e>0?this._focusDate(this.maxDate):this._focusDate(this.minDate):this._focusClosestDate(t)}_moveFocusInsideMonth(e,t){var a=new Date(0,0);a.setFullYear(e.getFullYear()),"minDate"===t?(a.setMonth(e.getMonth()),a.setDate(1)):(a.setMonth(e.getMonth()+1),a.setDate(0)),this._dateAllowed(a,this.minDate,this.maxDate)?this._focusDate(a):this._dateAllowed(e,this.minDate,this.maxDate)?this._focusDate(this[t]):this._focusClosestDate(e)}_dateAllowed(e,t,a){return(!t||e>=t)&&(!a||e<=a)}_isTodayAllowed(e,t){var a=new Date,i=new Date(0,0);return i.setFullYear(a.getFullYear()),i.setMonth(a.getMonth()),i.setDate(a.getDate()),this._dateAllowed(i,e,t)}_stopPropagation(e){e.stopPropagation()}}customElements.define($.is,$);
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/
+const F=e=>class extends(g([b],e)){static get properties(){return{_selectedDate:{type:Date},_focusedDate:Date,value:{type:String,observer:"_valueChanged",notify:!0,value:""},required:{type:Boolean,value:!1},name:{type:String},initialPosition:String,label:String,opened:{type:Boolean,reflectToAttribute:!0,notify:!0,observer:"_openedChanged"},autoOpenDisabled:Boolean,showWeekNumbers:{type:Boolean},_fullscreen:{value:!1,observer:"_fullscreenChanged"},_fullscreenMediaQuery:{value:"(max-width: 420px), (max-height: 420px)"},_touchPrevented:Array,i18n:{type:Object,value:()=>({monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],weekdays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],firstDayOfWeek:0,week:"Week",calendar:"Calendar",clear:"Clear",today:"Today",cancel:"Cancel",referenceDate:"",formatDate:e=>{const t=String(e.year).replace(/\d+/,(e=>"0000".substr(e.length)+e));return[e.month+1,e.day,t].join("/")},parseDate(e){const t=e.split("/"),a=new Date;let i,s=a.getMonth(),o=a.getFullYear();if(3===t.length){if(s=parseInt(t[0])-1,i=parseInt(t[1]),o=parseInt(t[2]),t[2].length<3&&o>=0){const e=this.referenceDate?T._parseDate(this.referenceDate):new Date;o=T._getAdjustedYear(e,o,s,i)}}else 2===t.length?(s=parseInt(t[0])-1,i=parseInt(t[1])):1===t.length&&(i=parseInt(t[0]));if(void 0!==i)return{day:i,month:s,year:o}},formatTitle:(e,t)=>`${e} ${t}`})},min:{type:String,observer:"_minChanged"},max:{type:String,observer:"_maxChanged"},_minDate:{type:Date,value:""},_maxDate:{type:Date,value:""},_noInput:{type:Boolean,computed:"_isNoInput(_fullscreen, _ios, i18n, i18n.*, opened, autoOpenDisabled)"},_hasInputValue:{type:Boolean,value:!1,observer:"_hasInputValueChanged"},_ios:{type:Boolean,value:navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/)},_webkitOverflowScroll:{type:Boolean,value:""===document.createElement("div").style.webkitOverflowScrolling},_ignoreAnnounce:{value:!0},_focusOverlayOnOpen:Boolean,_overlayInitialized:Boolean}}static get observers(){return["_updateHasValue(value)","_selectedDateChanged(_selectedDate, i18n.formatDate)","_focusedDateChanged(_focusedDate, i18n.formatDate)","_announceFocusedDate(_focusedDate, opened, _ignoreAnnounce)"]}ready(){super.ready(),this._boundOnScroll=this._onScroll.bind(this),this._boundFocus=this._focus.bind(this),this._boundUpdateAlignmentAndPosition=this._updateAlignmentAndPosition.bind(this);const e=e=>{const t=e.composedPath(),a=t.indexOf(this._inputElement);return 1===t.slice(0,a).filter((e=>e.getAttribute&&"clear-button"===e.getAttribute("part"))).length};c(this,"tap",(t=>{e(t)||this.autoOpenDisabled&&!this._noInput||this.open()})),this.addEventListener("touchend",(t=>{this._noInput&&!e(t)&&t.preventDefault()})),this.addEventListener("keydown",this._onKeydown.bind(this)),this.addEventListener("input",this.__onUserInput.bind(this)),this.addEventListener("focus",(e=>this._noInput&&e.target.blur())),this.addEventListener("blur",(e=>{if(!this.opened){if(this.autoOpenDisabled){const e=this._getParsedDate();this._isValidDate(e)&&(this._selectedDate=e)}""===this._inputElementValue&&this.__dispatchChange?(this.validate(),this.value="",this.__dispatchChange=!1):this.validate()}}))}_initOverlay(){this.$.overlay.removeAttribute("disable-upgrade"),this._overlayInitialized=!0,this.$.overlay.addEventListener("opened-changed",(e=>this.opened=e.detail.value)),this._overlayContent.addEventListener("close",this._close.bind(this)),this._overlayContent.addEventListener("focus-input",this._focusAndSelect.bind(this)),this.$.overlay.addEventListener("vaadin-overlay-escape-press",this._boundFocus),this._overlayContent.addEventListener("focus",(()=>this.focusElement._setFocused(!0))),this.$.overlay.addEventListener("vaadin-overlay-close",this._onVaadinOverlayClose.bind(this));const e=e=>{this.$.overlay.bringToFront&&requestAnimationFrame((()=>{this.$.overlay.bringToFront()}))};this.addEventListener("mousedown",e),this.addEventListener("touchstart",e)}disconnectedCallback(){super.disconnectedCallback(),this._overlayInitialized&&this.$.overlay.removeEventListener("vaadin-overlay-escape-press",this._boundFocus),this.opened=!1}open(){this.disabled||this.readonly||(this.opened=!0)}_close(e){e&&e.stopPropagation(),this._focus(),this.close()}close(){(this._overlayInitialized||this.autoOpenDisabled)&&this.$.overlay.close()}get _inputElement(){return this._input()}get _nativeInput(){if(this._inputElement)return this._inputElement.focusElement?this._inputElement.focusElement:this._inputElement.inputElement?this._inputElement.inputElement:window.unwrap?window.unwrap(this._inputElement):this._inputElement}_parseDate(e){var t=/^([-+]\d{1}|\d{2,4}|[-+]\d{6})-(\d{1,2})-(\d{1,2})$/.exec(e);if(t){var a=new Date(0,0);return a.setFullYear(parseInt(t[1],10)),a.setMonth(parseInt(t[2],10)-1),a.setDate(parseInt(t[3],10)),a}}_isNoInput(e,t,a,i,s,o){const n=e&&(!o||s),r=t&&s;return!this._inputElement||n||r||!a.parseDate}_formatISO(e){if(!(e instanceof Date))return"";const t=(e,t="00")=>(t+e).substr((t+e).length-t.length);let a="",i="0000",s=e.getFullYear();s<0?(s=-s,a="-",i="000000"):e.getFullYear()>=1e4&&(a="+",i="000000");return[a+t(s,i),t(e.getMonth()+1),t(e.getDate())].join("-")}_openedChanged(e){e&&!this._overlayInitialized&&this._initOverlay(),this._overlayInitialized&&(this.$.overlay.opened=e),e&&this._updateAlignmentAndPosition()}_selectedDateChanged(e,t){if(void 0===e||void 0===t)return;this.__userInputOccurred&&(this.__dispatchChange=!0);const a=this._formatISO(e);this.__keepInputValue||this._applyInputValue(e),a!==this.value&&(this.validate(),this.value=a),this.__userInputOccurred=!1,this.__dispatchChange=!1,this._ignoreFocusedDateChange=!0,this._focusedDate=e,this._ignoreFocusedDateChange=!1}_focusedDateChanged(e,t){void 0!==e&&void 0!==t&&(this.__userInputOccurred=!0,this._ignoreFocusedDateChange||this._noInput||this._applyInputValue(e))}_updateHasValue(e){e?this.setAttribute("has-value",""):this.removeAttribute("has-value")}__getOverlayTheme(e,t){if(t)return e}_handleDateChange(e,t,a){if(t){var i=this._parseDate(t);i?T._dateEquals(this[e],i)||(this[e]=i,this.value&&this.validate()):this.value=a}else this[e]=""}_valueChanged(e,t){this.__dispatchChange&&this.dispatchEvent(new CustomEvent("change",{bubbles:!0})),this._handleDateChange("_selectedDate",e,t)}_minChanged(e,t){this._handleDateChange("_minDate",e,t)}_maxChanged(e,t){this._handleDateChange("_maxDate",e,t)}_updateAlignmentAndPosition(){if(this._overlayInitialized){if(!this._fullscreen){const e=this._inputElement.getBoundingClientRect(),t=e.top>window.innerHeight/2;if(e.left+this.clientWidth/2>window.innerWidth/2){const t=Math.min(window.innerWidth,document.documentElement.clientWidth);this.$.overlay.setAttribute("right-aligned",""),this.$.overlay.style.removeProperty("left"),this.$.overlay.style.right=t-e.right+"px"}else this.$.overlay.removeAttribute("right-aligned"),this.$.overlay.style.removeProperty("right"),this.$.overlay.style.left=e.left+"px";if(t){const t=Math.min(window.innerHeight,document.documentElement.clientHeight);this.$.overlay.setAttribute("bottom-aligned",""),this.$.overlay.style.removeProperty("top"),this.$.overlay.style.bottom=t-e.top+"px"}else this.$.overlay.removeAttribute("bottom-aligned"),this.$.overlay.style.removeProperty("bottom"),this.$.overlay.style.top=e.bottom+"px"}this.$.overlay.setAttribute("dir",getComputedStyle(this._inputElement).getPropertyValue("direction")),this._overlayContent._repositionYearScroller()}}_fullscreenChanged(){this._overlayInitialized&&this.$.overlay.opened&&this._updateAlignmentAndPosition()}_onOverlayOpened(){this._openedWithFocusRing=this.hasAttribute("focus-ring")||this.focusElement&&this.focusElement.hasAttribute("focus-ring");var e=this._parseDate(this.initialPosition),t=this._selectedDate||this._overlayContent.initialPosition||e||new Date;e||T._dateAllowed(t,this._minDate,this._maxDate)?this._overlayContent.initialPosition=t:this._overlayContent.initialPosition=T._getClosestDate(t,[this._minDate,this._maxDate]),this._overlayContent.scrollToDate(this._overlayContent.focusedDate||this._overlayContent.initialPosition),this._ignoreFocusedDateChange=!0,this._overlayContent.focusedDate=this._overlayContent.focusedDate||this._overlayContent.initialPosition,this._ignoreFocusedDateChange=!1,window.addEventListener("scroll",this._boundOnScroll,!0),this.addEventListener("iron-resize",this._boundUpdateAlignmentAndPosition),this._webkitOverflowScroll&&(this._touchPrevented=this._preventWebkitOverflowScrollingTouch(this.parentElement)),this._focusOverlayOnOpen?(this._overlayContent.focus(),this._focusOverlayOnOpen=!1):this._focus(),this._noInput&&this.focusElement&&this.focusElement.blur(),this.updateStyles(),this._ignoreAnnounce=!1}_preventWebkitOverflowScrollingTouch(e){for(var t=[];e;){if("touch"===window.getComputedStyle(e).webkitOverflowScrolling){var a=e.style.webkitOverflowScrolling;e.style.webkitOverflowScrolling="auto",t.push({element:e,oldInlineValue:a})}e=e.parentElement}return t}_selectParsedOrFocusedDate(){if(this._ignoreFocusedDateChange=!0,this.i18n.parseDate){const e=this._inputElementValue||"",t=this._getParsedDate(e);this._isValidDate(t)?this._selectedDate=t:(this.__keepInputValue=!0,this._selectedDate=null,this.__keepInputValue=!1)}else this._focusedDate&&(this._selectedDate=this._focusedDate);this._ignoreFocusedDateChange=!1}_onOverlayClosed(){this._ignoreAnnounce=!0,window.removeEventListener("scroll",this._boundOnScroll,!0),this.removeEventListener("iron-resize",this._boundUpdateAlignmentAndPosition),this._touchPrevented&&(this._touchPrevented.forEach((e=>e.element.style.webkitOverflowScrolling=e.oldInlineValue)),this._touchPrevented=[]),this.updateStyles(),this._selectParsedOrFocusedDate(),this._nativeInput&&this._nativeInput.selectionStart&&(this._nativeInput.selectionStart=this._nativeInput.selectionEnd),this.value||this.validate()}get _inputElementValueProperty(){return"value"}get _inputElementValue(){return this._inputElement?this._inputElement[this._inputElementValueProperty]:void 0}set _inputElementValue(e){this._inputElement&&(this._inputElement[this._inputElementValueProperty]=e,this._hasInputValue=!1)}_setInvalid(e){this._shouldSetInvalid(e)&&(this.invalid=e)}_shouldSetInvalid(e){return!0}validate(){const e=this.checkValidity(this._inputElementValue);return this._setInvalid(!e),this.dispatchEvent(new CustomEvent("validated",{detail:{valid:e}})),e}checkValidity(){const e=!this._inputElementValue||this._selectedDate&&this._inputElementValue===this._getFormattedDate(this.i18n.formatDate,this._selectedDate),t=!this._selectedDate||T._dateAllowed(this._selectedDate,this._minDate,this._maxDate);let a=!0;return this._inputElement&&(this._inputElement.checkValidity?(this._inputElement.__forceCheckValidity=!0,a=this._inputElement.checkValidity(),this._inputElement.__forceCheckValidity=!1):this._inputElement.validate&&(a=this._inputElement.validate())),!!(e&&t&&a)}_onScroll(e){e.target!==window&&this._overlayContent.contains(e.target)||this._updateAlignmentAndPosition()}_focus(){this._noInput?this._overlayInitialized&&this._overlayContent.focus():this._inputElement.focus()}_focusAndSelect(){this._focus(),this._setSelectionRange(0,this._inputElementValue.length)}_applyInputValue(e){this._inputElementValue=e?this._getFormattedDate(this.i18n.formatDate,e):""}_getFormattedDate(e,t){return e(T._extractDateParts(t))}_setSelectionRange(e,t){this._nativeInput&&this._nativeInput.setSelectionRange&&this._nativeInput.setSelectionRange(e,t)}_eventKey(e){for(var t=["down","up","enter","esc","tab"],a=0;a<t.length;a++){var i=t[a];if(n.keyboardEventMatchesKeys(e,i))return i}}_isValidDate(e){return e&&!isNaN(e.getTime())}_onKeydown(e){if(this._noInput){-1===[9].indexOf(e.keyCode)&&e.preventDefault()}switch(this._eventKey(e)){case"down":case"up":e.preventDefault(),this.opened?(this._overlayContent.focus(),this._overlayContent._onKeydown(e)):(this._focusOverlayOnOpen=!0,this.open());break;case"enter":{const e=this._getParsedDate(),t=this._isValidDate(e);if(this.opened)this._overlayInitialized&&this._overlayContent.focusedDate&&t&&(this._selectedDate=this._overlayContent.focusedDate),this.close();else if(t||""===this._inputElementValue){const e=this.value;this._selectParsedOrFocusedDate(),e===this.value&&this.validate()}else this.validate();break}case"esc":this.opened?(this._focusedDate=this._selectedDate,this._close()):this.autoOpenDisabled?(""===this._inputElementValue&&(this._selectedDate=null),this._applyInputValue(this._selectedDate)):(this._focusedDate=this._selectedDate,this._selectParsedOrFocusedDate());break;case"tab":this.opened&&(e.preventDefault(),this._setSelectionRange(0,0),e.shiftKey?this._overlayContent.focusCancel():(this._overlayContent.focus(),this._overlayContent.revealDate(this._focusedDate)))}}_getParsedDate(e=this._inputElementValue){const t=this.i18n.parseDate&&this.i18n.parseDate(e);return t&&this._parseDate(t.year+"-"+(t.month+1)+"-"+t.day)}_setHasInputValue(e){const t=e.composedPath()[0];this._hasInputValue=t.value.length>0}__onUserInput(e){this._setHasInputValue(e),this._onUserInput(e)}_hasInputValueChanged(e,t){(e||t)&&this.dispatchEvent(new CustomEvent("has-input-value-changed"))}_onUserInput(e){this.opened||!this._inputElementValue||this.autoOpenDisabled||this.open(),this._userInputValueChanged(),e.__fromClearButton&&(this.validate(),this.__dispatchChange=!0,this.value="",this.__dispatchChange=!1)}_userInputValueChanged(e){if(this._inputElementValue){const e=this._getParsedDate();this._isValidDate(e)&&(this._ignoreFocusedDateChange=!0,T._dateEquals(e,this._focusedDate)||(this._focusedDate=e),this._ignoreFocusedDateChange=!1)}}_announceFocusedDate(e,t,a){t&&!a&&this._overlayContent.announceFocusedDate()}get _overlayContent(){return this.$.overlay.content.querySelector("#overlay-content")}}
+/**
+@license
+Copyright (c) 2017 Vaadin Ltd.
+This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+*/;class Y extends(a(i(e(F(l(h)))))){static get template(){return r`
+    <style>
+      :host {
+        display: inline-block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      :host([opened]) {
+        pointer-events: auto;
+      }
+
+      [part="text-field"] {
+        width: 100%;
+        min-width: 0;
+      }
+    </style>
+
+
+    <vaadin-date-picker-text-field id="input" role="application" autocomplete="off" on-focus="_focus" value="{{_userInputValue}}" invalid="[[invalid]]" label="[[label]]" name="[[name]]" placeholder="[[placeholder]]" required="[[required]]" disabled="[[disabled]]" readonly="[[readonly]]" error-message="[[errorMessage]]" clear-button-visible="[[clearButtonVisible]]" aria-label\$="[[label]]" part="text-field" helper-text="[[helperText]]" theme\$="[[theme]]">
+      <slot name="prefix" slot="prefix"></slot>
+      <slot name="helper" slot="helper">[[helperText]]</slot>
+      <div part="toggle-button" slot="suffix" on-tap="_toggle" role="button" aria-label\$="[[i18n.calendar]]" aria-expanded\$="[[_getAriaExpanded(opened)]]"></div>
+    </vaadin-date-picker-text-field>
+
+    <vaadin-date-picker-overlay id="overlay" fullscreen\$="[[_fullscreen]]" theme\$="[[__getOverlayTheme(theme, _overlayInitialized)]]" on-vaadin-overlay-open="_onOverlayOpened" on-vaadin-overlay-close="_onOverlayClosed" disable-upgrade="">
+      <template>
+        <vaadin-date-picker-overlay-content id="overlay-content" i18n="[[i18n]]" fullscreen\$="[[_fullscreen]]" label="[[label]]" selected-date="{{_selectedDate}}" slot="dropdown-content" focused-date="{{_focusedDate}}" show-week-numbers="[[showWeekNumbers]]" min-date="[[_minDate]]" max-date="[[_maxDate]]" role="dialog" on-date-tap="_close" part="overlay-content" theme\$="[[__getOverlayTheme(theme, _overlayInitialized)]]">
+        </vaadin-date-picker-overlay-content>
+      </template>
+    </vaadin-date-picker-overlay>
+
+    <iron-media-query query="[[_fullscreenMediaQuery]]" query-matches="{{_fullscreen}}">
+    </iron-media-query>
+`}static get is(){return"vaadin-date-picker"}static get version(){return"4.6.0"}static get properties(){return{clearButtonVisible:{type:Boolean,value:!1},disabled:{type:Boolean,value:!1,reflectToAttribute:!0},errorMessage:String,placeholder:String,helperText:{type:String,value:""},readonly:{type:Boolean,value:!1,reflectToAttribute:!0},invalid:{type:Boolean,reflectToAttribute:!0,notify:!0,value:!1},_userInputValue:String}}static get observers(){return["_userInputValueChanged(_userInputValue)","_setClearButtonLabel(i18n.clear)"]}ready(){super.ready(),y(this,(()=>this._inputElement.validate=()=>{})),this._inputElement.addEventListener("change",(e=>{""!==this._inputElementValue||e.__fromClearButton||(this.__dispatchChange=!0)}))}_onVaadinOverlayClose(e){this._openedWithFocusRing&&this.hasAttribute("focused")?this.focusElement.setAttribute("focus-ring",""):this.hasAttribute("focused")||this.focusElement.blur(),e.detail.sourceEvent&&-1!==e.detail.sourceEvent.composedPath().indexOf(this)&&e.preventDefault()}_toggle(e){e.stopPropagation(),this[this._overlayInitialized&&this.$.overlay.opened?"close":"open"]()}_input(){return this.$.input}_getAriaExpanded(e){return Boolean(e).toString()}get focusElement(){return this._input()||this}_setClearButtonLabel(e){this._inputElement.shadowRoot.querySelector('[part="clear-button"]').setAttribute("aria-label",e)}}customElements.define(Y.is,Y);export{Y as D,T as a};