@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

package/src/atoms/gv-date-picker.js

@@ -1 +1,638 @@
-var t=Object.create?function(t,e,i,a){void 0===a&&(a=i),Object.defineProperty(t,a,{enumerable:!0,get:function(){return e[i]}})}:function(t,e,i,a){void 0===a&&(a=i),t[a]=e[i]},e=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},i=function(i){if(i&&i.__esModule)return i;var a={};if(null!=i)for(var s in i)"default"!==s&&Object.prototype.hasOwnProperty.call(i,s)&&t(a,i,s);return e(a,i),a},a=function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvDatePicker=void 0,require("./gv-date-picker-calendar");const s=a(require("date-fns/locale/en-US")),n=require("date-fns"),r=require("lit/directives/class-map"),o=require("lit"),h=require("../lib/i18n"),l=require("../lib/date"),d=require("lit/directives/until"),c=require("../lib/events"),m={en:s.default};class u extends o.LitElement{static get properties(){return{range:{type:Boolean},label:{type:String},name:{type:String},time:{type:Boolean},strict:{type:Boolean},small:{type:Boolean},value:{type:Array,reflect:!0},min:{type:Number},max:{type:Number},distanceFromNow:{type:Number},disabledDates:{type:Array},format:{type:String},invalid:{type:Boolean,reflect:!0},valid:{type:Boolean,reflect:!0},_hoveredDate:{type:String,attribute:!1},_open:{type:Boolean,attribute:!1},_month:{type:String,attribute:!1},_year:{type:String,attribute:!1},_monthPlus:{type:String,attribute:!1},_yearPlus:{type:Number,attribute:!1},_mode:{type:String,attribute:!1},_from:{type:Number,attribute:!1},_to:{type:Number,attribute:!1},_min:{type:Number,attribute:!1},_max:{type:Number,attribute:!1},_distance:{type:Number,attribute:!1}}}static get styles(){return[o.css`:host{box-sizing:border-box;display:inline-block;margin:.2rem;--gv-input-icon--bgc:transparent;--gv-icon--s:22px;--date-picker-hover--bgc:var(--gv-date-picker-hover--bgc, var(--gv-theme-color-light, #86c3d0));--date-picker-hover--c:var(--gv-date-picker-hover--c, var(--gv-theme-font-color-dark, #262626));--date-picker-selected--bgc:var(--gv-date-picker-selected--bgc, var(--gv-theme-color, #5a7684));--date-picker-selected--c:var(--gv-date-picker-selected--c, var(--gv-theme-font-color-light, #ffffff));font-size:var(--gv-theme-font-size-m,14px)}:host([small]){font-size:var(--gv-theme-font-size-s,12px)}.box{display:inline-block;width:100%}gv-input{width:160px;margin:0}.time gv-input{width:205px}:not(.range) gv-input{width:100%}.range gv-input{--gv-input--bds:none;--gv-input--bdw:0}.time .range-input gv-input{width:150px}.range-input gv-input{width:120px}.range.hasFrom.open .box-icon:first-of-type,.range.hasFrom.open gv-input:first-of-type{border-bottom:1px solid var(--gv-date-picker-selected--bgc,var(--gv-theme-color,#5a7684))}.range.hasTo.open .box-icon:not(.box-icon-calendar),.range.hasTo.open gv-input:last-of-type{border-bottom:1px solid var(--gv-date-picker-selected--bgc,var(--gv-theme-color,#5a7684))}.range-input{position:relative;z-index:10;border:var(--gv-input--bdw,1px) var(--gv-input--bds,solid) var(--gv-input--bdc,var(--gv-theme-neutral-color-dark,#d9d9d9));border-radius:4px;margin:.2rem;display:flex}.box-icon{display:flex;justify-content:center;align-items:center}.box-icon-calendar{padding:0 6px}.box-icon-clear{--gv-icon--s:16px;padding-right:6px;width:22px}.box-icon-clear gv-icon{cursor:pointer}.box.open .calendar{visibility:visible;opacity:1;-webkit-transform:-webkit-translateY(0);transform:translateY(0);z-index:100}.calendar{background-color:var(--gv-theme-neutral-color-lightest,#fff);color:var(--gv-theme-font-color,#262626);margin:.2rem;position:absolute;box-shadow:0 0 0 1px var(--gv-theme-neutral-color,#f5f5f5),0 1px 3px var(--gv-theme-neutral-color-dark,#bfbfbf);border-radius:2px;display:flex;cursor:pointer;visibility:hidden;opacity:0;-webkit-transform:-webkit-translateY(-2em);transform:translateY(-2em);-webkit-transition:-webkit-transform 150ms ease-in-out,opacity 150ms ease-in-out;-moz-transition:all 150ms ease-in-out;-ms-transition:all 150ms ease-in-out;-o-transition:all 150ms ease-in-out;overflow:auto;position:absolute}:host([invalid]) .range-input{border-left:5px solid #a94442;padding-left:0}:host([invalid]) .box-icon-calendar{padding-left:2px}`]}constructor(){super(),this._id="gv-id",this.strict=!1,this.range=!1,this.time=!1,this.format="dd/MM/yyyy";const t=(0,h.i18n)("gv-date-picker.format");"unknown"!==t&&(this.format=t),this.timeFormat="HH:mm",this.strictTimeFormat="HH:mm:ss",this.handleClick=this._onClick.bind(this),this.handleDocumentClick=this._onDocumentClick.bind(this),this.disabledDates=[]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),document.addEventListener("click",this.handleDocumentClick),this.getLocale().then((t=>{this._year=(0,n.format)((new Date).getTime(),"yyyy",{locale:t}),this._month=(0,n.format)((new Date).getTime(),"MM",{locale:t})}))}disconnectedCallback(){clearInterval(this._distanceTimer),this.removeEventListener("click",this.handleClick),document.removeEventListener("click",this.handleDocumentClick),super.disconnectedCallback()}set min(t){this._min=parseInt(t/1e3,10)}set max(t){this._max=parseInt(t/1e3,10)}set distanceFromNow(t){this._distance=t,this._max=parseInt(Date.now()/1e3,10),this._min=parseInt((Date.now()-t)/1e3,10),this._from&&this._from<this._min&&(this._from=this._min)}_onClick(t){t.preventDefault(),t.stopPropagation()}_onDocumentClick(t){this._open=!1,this.performUpdate()}_onFocus(t){this._open=!0,this.time&&this.range&&(this._mode=t),this.performUpdate()}async getLocale(){const t=(0,h.getLanguage)();if(!t)return m.en;if(!m[t])try{const e=await Promise.resolve().then((()=>i(require(`date-fns/locale/${t}/index.js`))));m[t]=e.default}catch(e){console.error(`[Error] cannot load locale ${t}`,e)}return m[t]}get dateFromPlaceholder(){return this.range&&this.time&&this.strict?(0,h.i18n)("gv-date-picker.startTime"):this.range?(0,h.i18n)("gv-date-picker.startDate"):this.getFormat()}get dateToPlaceholder(){return this.range&&this.time&&this.strict?(0,h.i18n)("gv-date-picker.endTime"):this.range?(0,h.i18n)("gv-date-picker.endDate"):this.getFormat()}get icon(){return null!=this._from||null!=this._to?"code:error":"general:calendar"}get hasContent(){return null!=this._from||null!=this._to}_onClear(){this.invalid=!1,this.value=null,this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0})),(0,c.dispatchCustomEvent)(this,"input",this.value)}render(){const t={box:!0,open:this._open,range:this.range,time:this.time,hasFrom:this.hasFrom(),hasTo:this.hasTo()};return o.html`<div class="${(0,r.classMap)(t)}">${this.range?o.html`${this.label?o.html`<label for="${this._id}" title="${this.label}">${this.label}</label>`:""}<div class="range-input"><div class="box-icon box-icon-calendar"><gv-icon shape="general:calendar"></gv-icon></div><gv-input id="${this._id}" ?small="${this.small}" ?disabled="${this.disabled}" @focus="${this._onFocus.bind(this,"from")}" @blur="${this._onBlurForm}" @gv-input:submit="${this._onBlurForm}" .value="${(0,d.until)(this.getFormattedDate(this._from))}" .placeholder="${this.dateFromPlaceholder}"></gv-input><div class="box-icon box-icon-arrow"><gv-icon shape="navigation:arrow-right"></gv-icon></div><gv-input .placeholder="${this.dateToPlaceholder}" ?small="${this.small}" ?disabled="${this.disabled}" @focus="${this._onFocus.bind(this,"to")}" @blur="${this._onBlurTo}" @gv-input:submit="${this._onBlurTo}" .value="${(0,d.until)(this.getFormattedDate(this._to))}"></gv-input><div class="box-icon box-icon-clear">${this.hasContent?o.html`<gv-icon class="link" @click="${this._onClear}" shape="code:error"></gv-icon>`:""}</div></div>`:o.html`<gv-input id="${this._id}" icon="${this.time&&this.strict?"home:timer":"general:calendar"}" ?small="${this.small}" ?disabled="${this.disabled}" clearable .label="${this.label}" @focus="${this._onFocus.bind(this,null)}" @blur="${this._onBlurForm}" ?invalid="${this.invalid}" @gv-input:submit="${this._onBlurForm}" @gv-input:clear="${this._onClear}" .placeholder="${this.dateToPlaceholder}" .value="${(0,d.until)(this.getFormattedDate(this._from))}"></gv-input>`} <span class="calendar">${this.range?o.html`${this.hasFrom()?o.html`<gv-date-picker-calendar .disabledDates="${this.disabledDates}" .min="${this._min}" .max="${this._max}" ?time="${this.time}" ?strict="${this.strict}" ?small="${this.small}" ?prev="${!0}" ?next="${this.time}" ?range="${this.range&&!this.time}" .month="${this._month}" .year="${this._year}" .hoveredDate="${this._hoveredDate}" .dateTo="${this._to}" .dateFrom="${this._from}" .locale="${(0,d.until)(this.getLocale())}" @gv-date-picker-calendar:month-mode="${this._onMonthMode}" @gv-date-picker-calendar:year-mode="${this._onYearMode}" @gv-date-picker-calendar:month-changed="${this._onMonthChanged}" @gv-date-picker-calendar:year-changed="${this._onYearChanged}" @hovered-date-changed="${this.hoveredDateChanged}" @date-to-changed="${this.dateToChanged}" @date-from-changed="${this.dateFromChanged}"></gv-date-picker-calendar>`:""} ${this.hasTo()?o.html`<gv-date-picker-calendar .disabledDates="${this.disabledDates}" .min="${this._min}" .max="${this._max}" ?time="${this.time}" ?strict="${this.strict}" ?small="${this.small}" ?prev="${this.time}" ?next="${!0}" ?range="${this.range&&!this.time}" .month="${this._monthPlus}" .year="${this._yearPlus}" .hoveredDate="${this._hoveredDate}" .dateTo="${this._to}" .dateFrom="${this._from}" .locale="${(0,d.until)(this.getLocale())}" @gv-date-picker-calendar:month-mode="${this._onMonthMode}" @gv-date-picker-calendar:year-mode="${this._onYearMode}" @gv-date-picker-calendar:month-changed="${this._onMonthChanged}" @gv-date-picker-calendar:year-changed="${this._onYearChanged}" @hovered-date-changed="${this.hoveredDateChanged}" @date-to-changed="${this.dateToChanged}" @date-from-changed="${this.dateFromChanged}"></gv-date-picker-calendar>`:""}`:o.html`<gv-date-picker-calendar .disabledDates="${this.disabledDates}" .min="${this._min}" .max="${this._max}" ?time="${this.time}" ?small="${this.small}" ?strict="${this.strict}" ?prev="${!0}" ?next="${!0}" ?range="${this.range}" .month="${this._month}" .year="${this._year}" .hoveredDate="${this._hoveredDate}" .dateTo="${this._to}" .dateFrom="${this._from}" .locale="${(0,d.until)(this.getLocale())}" @hovered-date-changed="${this.hoveredDateChanged}" @date-to-changed="${this.dateToChanged}" @date-from-changed="${this.dateFromChanged}"></gv-date-picker-calendar>`}</span></div>`}hasFrom(){return null==this._mode||"from"===this._mode}hasTo(){return null==this._mode||"to"===this._mode}firstUpdated(){this.time&&this.range&&(this._mode="from"),this._distance&&(this._distanceTimer=setInterval((()=>{this.distanceFromNow=this._distance}),3e4))}monthChanged(t,e){if(e&&t){const i=this.time&&this.range?0:1,a=`0${t%12+i}`;this._monthPlus=a.substring(a.length-2),"01"===this._monthPlus?this._yearPlus=parseInt(e,10)+i:this._yearPlus=parseInt(e,10)}}updated(t){(t.has("_month")||t.has("_year"))&&this.monthChanged(this._month,this._year),t.has("value")&&(null==this.value||this.value.filter&&0===this.value.filter((t=>null!=t)).length?(this._from=null,this._to=null):this.range?(this._from=this.value&&this.value.length>0?this.value[0]/1e3:null,this._to=this.value&&this.value.length>1?this.value[1]/1e3:null):this._from=this.value/1e3)}_onMonthChanged({detail:t}){this._month=t.month,this._year=t.year,this._hoveredDate=null,this.range&&this.time||(this._mode=null)}_onYearChanged({detail:t}){this._year=t.year}_onMonthMode({detail:t}){this.time&&this.range&&(this._month=t.month,this._year=t.year)}_onYearMode({detail:t}){this.time&&this.range&&(this._month=t.month,this._year=t.year)}_onBlurForm({target:t}){const e=t.value;if(e){const t=this.parseValue(e);t&&!isNaN(t)&&(this._month=((0,n.getMonth)(t)+1).toString(),this._year=(0,n.getYear)(t).toString(),this._from=t.getTime()/1e3,this.invalid=(0,l.isInvalid)(this._from,this._min,this._max,!this.time))}}_onBlurTo({target:t}){const e=t.value;if(e){const t=this.parseValue(e);t&&!isNaN(t)&&(this._month=((0,n.getMonth)(t)+1).toString(),this._year=(0,n.getYear)(t).toString(),this._to=t.getTime()/1e3,this.invalid=(0,l.isInvalid)(this._to,this._min,this._max,!this.time))}}hoveredDateChanged({detail:t}){this._hoveredDate=t.value}dateFromChanged({detail:t}){if(this.time&&this.range){if("from"===this._mode){this._from=t.value;const e=this.shadowRoot.querySelectorAll(".range-input gv-input");e[e.length-1].focus(),setTimeout((()=>this._mode="to"),0)}else if(this._to=t.value,this._open=!1,this._to<this._from){const t=this._to;this._to=this._from,this._from=t}}else this.range?this._from=t.value:(this._from=t.value,this._open=!1);this._distance&&(this.distanceFromNow=this._distance),this.range?(this.value=[1e3*this._from,1e3*this._to],this.invalid=(0,l.isInvalid)(this._to,this._min,this._max,!this.time)||(0,l.isInvalid)(this._from,this._min,this._max,!this.time)||this._to===this._form):(this.value=1e3*this._from,this.invalid=(0,l.isInvalid)(this._from,this._min,this._max,!this.time)),this.valid=!this.invalid,this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0})),(0,c.dispatchCustomEvent)(this,"input",this.value)}dateToChanged({detail:t}){this._distance&&(this.distanceFromNow=this._distance),this._to=t.value,this._to&&(this._open=!1,this.value=[1e3*this._from,1e3*this._to],this.dispatchEvent(new Event("input",{bubbles:!0,cancelable:!0})),(0,c.dispatchCustomEvent)(this,"input",this.value))}getFormat(){return this.time&&this.strict?this.strictTimeFormat:this.time?`${this.format} ${this.timeFormat}`:this.format}async getFormattedDate(t){if(t){const e=await this.getLocale();return(0,n.format)(new Date(1e3*t),this.getFormat(),e)}return""}parseValue(t){return t?(0,n.parse)(t,this.getFormat(),new Date):""}}exports.GvDatePicker=u,window.customElements.define("gv-date-picker",u);
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import './gv-date-picker-calendar';
+import enUS from 'date-fns/locale/en-US';
+import { format, getMonth, getYear, parse } from 'date-fns';
+import { classMap } from 'lit/directives/class-map';
+import { css, LitElement, html } from 'lit';
+import { getLanguage, i18n } from '../lib/i18n';
+import { isInvalid } from '../lib/date';
+import { until } from 'lit/directives/until';
+import { dispatchCustomEvent } from '../lib/events';
+const locales = { en: enUS };
+/**
+ * Date Picker
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @attr {Number|Array} value - if range picker, value is an array of timestamp else is a timestamp
+ * @attr {Boolean} range - if has range picker
+ * @attr {Boolean} time - if has time picker
+ * @attr {String} name - name of the input
+ * @attr {Boolean} strict - in completion of time if just have time picker
+ * @attr {Number} min - min timestamp
+ * @attr {Number} max - max timestamp
+ * @attr {Number} distanceFromNow - The distance timestamp relative to the current date. If configured, the min / max will be updated every minute.
+ * @attr {String} format - date format
+ * @attr {Boolean} valid - if value is valid
+ * @attr {Boolean} invalid - if value is invalid
+ * @attr {Boolean} small - for a small input
+ *
+ * @cssprop {Color} [--gv-date-picker-hover--bgc=var(--gv-theme-color-light, #86c3d0)] - Hover background color
+ * @cssprop {Color} [--gv-date-picker-hover--c=var(--gv-theme-font-color-dark, #262626)] - Hover color
+ * @cssprop {Color} [--gv-date-picker-selected--bgc=var(--gv-theme-color, #5a7684)] - Selected background color
+ * @cssprop {Color} [--gv-date-picker-selected--c=var(--gv-theme-font-color-light, #ffffff)] - Selected color
+ */
+export class GvDatePicker extends LitElement {
+    static get properties() {
+        return {
+            range: { type: Boolean },
+            label: { type: String },
+            name: { type: String },
+            time: { type: Boolean },
+            strict: { type: Boolean },
+            small: { type: Boolean },
+            value: { type: Array, reflect: true },
+            min: { type: Number },
+            max: { type: Number },
+            distanceFromNow: { type: Number },
+            disabledDates: { type: Array },
+            format: { type: String },
+            invalid: { type: Boolean, reflect: true },
+            valid: { type: Boolean, reflect: true },
+            _hoveredDate: { type: String, attribute: false },
+            _open: { type: Boolean, attribute: false },
+            _month: { type: String, attribute: false },
+            _year: { type: String, attribute: false },
+            _monthPlus: { type: String, attribute: false },
+            _yearPlus: { type: Number, attribute: false },
+            _mode: { type: String, attribute: false },
+            _from: { type: Number, attribute: false },
+            _to: { type: Number, attribute: false },
+            _min: { type: Number, attribute: false },
+            _max: { type: Number, attribute: false },
+            _distance: { type: Number, attribute: false },
+        };
+    }
+    static get styles() {
+        return [
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          display: inline-block;
+          margin: 0.2rem;
+          --gv-input-icon--bgc: transparent;
+          --gv-icon--s: 22px;
+          --date-picker-hover--bgc: var(--gv-date-picker-hover--bgc, var(--gv-theme-color-light, #86c3d0));
+          --date-picker-hover--c: var(--gv-date-picker-hover--c, var(--gv-theme-font-color-dark, #262626));
+          --date-picker-selected--bgc: var(--gv-date-picker-selected--bgc, var(--gv-theme-color, #5a7684));
+          --date-picker-selected--c: var(--gv-date-picker-selected--c, var(--gv-theme-font-color-light, #ffffff));
+          font-size: var(--gv-theme-font-size-m, 14px);
+        }
+
+        :host([small]) {
+          font-size: var(--gv-theme-font-size-s, 12px);
+        }
+
+        .box {
+          display: inline-block;
+          width: 100%;
+        }
+
+        gv-input {
+          width: 160px;
+          margin: 0;
+        }
+
+        .time gv-input {
+          width: 205px;
+        }
+
+        :not(.range) gv-input {
+          width: 100%;
+        }
+
+        .range gv-input {
+          --gv-input--bds: none;
+          --gv-input--bdw: 0;
+        }
+
+        .time .range-input gv-input {
+          width: 150px;
+        }
+
+        .range-input gv-input {
+          width: 120px;
+        }
+
+        .range.hasFrom.open gv-input:first-of-type,
+        .range.hasFrom.open .box-icon:first-of-type {
+          border-bottom: 1px solid var(--gv-date-picker-selected--bgc, var(--gv-theme-color, #5a7684));
+        }
+
+        .range.hasTo.open gv-input:last-of-type,
+        .range.hasTo.open .box-icon:not(.box-icon-calendar) {
+          border-bottom: 1px solid var(--gv-date-picker-selected--bgc, var(--gv-theme-color, #5a7684));
+        }
+
+        .range-input {
+          position: relative;
+          z-index: 10;
+          border: var(--gv-input--bdw, 1px) var(--gv-input--bds, solid) var(--gv-input--bdc, var(--gv-theme-neutral-color-dark, #d9d9d9));
+          border-radius: 4px;
+          margin: 0.2rem;
+          display: flex;
+        }
+
+        .box-icon {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .box-icon-calendar {
+          padding: 0 6px;
+        }
+
+        .box-icon-arrow,
+        .box-icon-calendar {
+        }
+
+        .box-icon-clear {
+          --gv-icon--s: 16px;
+          padding-right: 6px;
+          width: 22px;
+        }
+
+        .box-icon-clear gv-icon {
+          cursor: pointer;
+        }
+
+        .box.open .calendar {
+          visibility: visible;
+          opacity: 1;
+          -webkit-transform: -webkit-translateY(0%);
+          transform: translateY(0%);
+          z-index: 100;
+        }
+
+        .calendar {
+          background-color: var(--gv-theme-neutral-color-lightest, #ffffff);
+          color: var(--gv-theme-font-color, #262626);
+          margin: 0.2rem;
+          position: absolute;
+          box-shadow: 0 0 0 1px var(--gv-theme-neutral-color, #f5f5f5), 0 1px 3px var(--gv-theme-neutral-color-dark, #bfbfbf);
+          border-radius: 2px;
+          display: flex;
+          cursor: pointer;
+          visibility: hidden;
+          opacity: 0;
+          -webkit-transform: -webkit-translateY(-2em);
+          transform: translateY(-2em);
+          -webkit-transition: -webkit-transform 150ms ease-in-out, opacity 150ms ease-in-out;
+          -moz-transition: all 150ms ease-in-out;
+          -ms-transition: all 150ms ease-in-out;
+          -o-transition: all 150ms ease-in-out;
+          overflow: auto;
+          position: absolute;
+        }
+
+        :host([invalid]) .range-input {
+          border-left: 5px solid #a94442;
+          padding-left: 0;
+        }
+
+        :host([invalid]) .box-icon-calendar {
+          padding-left: 2px;
+        }
+      `,
+        ];
+    }
+    constructor() {
+        super();
+        this._id = 'gv-id';
+        this.strict = false;
+        this.range = false;
+        this.time = false;
+        this.format = 'dd/MM/yyyy';
+        const format = i18n('gv-date-picker.format');
+        if (format !== 'unknown') {
+            this.format = format;
+        }
+        this.timeFormat = 'HH:mm';
+        this.strictTimeFormat = 'HH:mm:ss';
+        this.handleClick = this._onClick.bind(this);
+        this.handleDocumentClick = this._onDocumentClick.bind(this);
+        this.disabledDates = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.handleClick);
+        document.addEventListener('click', this.handleDocumentClick);
+        this.getLocale().then((locale) => {
+            this._year = format(new Date().getTime(), 'yyyy', { locale });
+            this._month = format(new Date().getTime(), 'MM', { locale });
+        });
+    }
+    disconnectedCallback() {
+        clearInterval(this._distanceTimer);
+        this.removeEventListener('click', this.handleClick);
+        document.removeEventListener('click', this.handleDocumentClick);
+        super.disconnectedCallback();
+    }
+    set min(value) {
+        this._min = parseInt(value / 1000, 10);
+    }
+    set max(value) {
+        this._max = parseInt(value / 1000, 10);
+    }
+    set distanceFromNow(value) {
+        this._distance = value;
+        this._max = parseInt(Date.now() / 1000, 10);
+        this._min = parseInt((Date.now() - value) / 1000, 10);
+        if (this._from && this._from < this._min) {
+            this._from = this._min;
+        }
+    }
+    _onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    _onDocumentClick(e) {
+        this._open = false;
+        this.performUpdate();
+    }
+    _onFocus(mode) {
+        this._open = true;
+        if (this.time && this.range) {
+            this._mode = mode;
+        }
+        this.performUpdate();
+    }
+    async getLocale() {
+        const lang = getLanguage();
+        if (!lang) {
+            return locales.en;
+        }
+        if (!locales[lang]) {
+            try {
+                const locale = await import(`date-fns/locale/${lang}/index.js`);
+                locales[lang] = locale.default;
+            }
+            catch (e) {
+                console.error(`[Error] cannot load locale ${lang}`, e);
+            }
+        }
+        return locales[lang];
+    }
+    get dateFromPlaceholder() {
+        if (this.range && this.time && this.strict) {
+            return i18n('gv-date-picker.startTime');
+        }
+        if (this.range) {
+            return i18n('gv-date-picker.startDate');
+        }
+        return this.getFormat();
+    }
+    get dateToPlaceholder() {
+        if (this.range && this.time && this.strict) {
+            return i18n('gv-date-picker.endTime');
+        }
+        if (this.range) {
+            return i18n('gv-date-picker.endDate');
+        }
+        return this.getFormat();
+    }
+    get icon() {
+        return this._from != null || this._to != null ? 'code:error' : 'general:calendar';
+    }
+    get hasContent() {
+        return this._from != null || this._to != null;
+    }
+    _onClear() {
+        this.invalid = false;
+        this.value = null;
+        this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+        dispatchCustomEvent(this, 'input', this.value);
+    }
+    render() {
+        const classes = {
+            box: true,
+            open: this._open,
+            range: this.range,
+            time: this.time,
+            hasFrom: this.hasFrom(),
+            hasTo: this.hasTo(),
+        };
+        return html ` <div class="${classMap(classes)}">
+      ${this.range
+            ? html `
+            ${this.label ? html `<label for=${this._id} title="${this.label}">${this.label}</label>` : ''}
+            <div class="range-input">
+              <div class="box-icon box-icon-calendar"><gv-icon shape="general:calendar"></gv-icon></div>
+              <gv-input
+                id="${this._id}"
+                ?small="${this.small}"
+                ?disabled="${this.disabled}"
+                @focus="${this._onFocus.bind(this, 'from')}"
+                @blur="${this._onBlurForm}"
+                @gv-input:submit="${this._onBlurForm}"
+                .value="${until(this.getFormattedDate(this._from))}"
+                .placeholder="${this.dateFromPlaceholder}"
+              ></gv-input>
+              <div class="box-icon box-icon-arrow"><gv-icon shape="navigation:arrow-right"></gv-icon></div>
+              <gv-input
+                .placeholder="${this.dateToPlaceholder}"
+                ?small="${this.small}"
+                ?disabled="${this.disabled}"
+                @focus="${this._onFocus.bind(this, 'to')}"
+                @blur="${this._onBlurTo}"
+                @gv-input:submit="${this._onBlurTo}"
+                .value="${until(this.getFormattedDate(this._to))}"
+              ></gv-input>
+              <div class="box-icon box-icon-clear">
+                ${this.hasContent ? html `<gv-icon class="link" @click=${this._onClear} shape="code:error"></gv-icon>` : ''}
+              </div>
+            </div>
+          `
+            : html `
+        <gv-input
+        id="${this._id}"
+        icon="${this.time && this.strict ? 'home:timer' : 'general:calendar'}"
+        ?small="${this.small}"
+        ?disabled="${this.disabled}"
+        clearable
+        .label="${this.label}"
+        @focus="${this._onFocus.bind(this, null)}"
+        @blur="${this._onBlurForm}"
+        ?invalid="${this.invalid}"
+         @gv-input:submit="${this._onBlurForm}"
+         @gv-input:clear="${this._onClear}"
+        .placeholder="${this.dateToPlaceholder}"
+        .value="${until(this.getFormattedDate(this._from))}"></gv-input></div>
+        `}
+
+      <span class="calendar">
+        ${this.range
+            ? html `
+              ${this.hasFrom()
+                ? html `<gv-date-picker-calendar
+                    .disabledDates="${this.disabledDates}"
+                    .min="${this._min}"
+                    .max="${this._max}"
+                    ?time="${this.time}"
+                    ?strict="${this.strict}"
+                    ?small="${this.small}"
+                    ?prev="${true}"
+                    ?next="${this.time}"
+                    ?range="${this.range && !this.time}"
+                    .month="${this._month}"
+                    .year="${this._year}"
+                    .hoveredDate="${this._hoveredDate}"
+                    .dateTo="${this._to}"
+                    .dateFrom="${this._from}"
+                    .locale="${until(this.getLocale())}"
+                    @gv-date-picker-calendar:month-mode="${this._onMonthMode}"
+                    @gv-date-picker-calendar:year-mode="${this._onYearMode}"
+                    @gv-date-picker-calendar:month-changed="${this._onMonthChanged}"
+                    @gv-date-picker-calendar:year-changed="${this._onYearChanged}"
+                    @hovered-date-changed="${this.hoveredDateChanged}"
+                    @date-to-changed="${this.dateToChanged}"
+                    @date-from-changed="${this.dateFromChanged}"
+                  >
+                  </gv-date-picker-calendar>`
+                : ''}
+              ${this.hasTo()
+                ? html `<gv-date-picker-calendar
+                    .disabledDates="${this.disabledDates}"
+                    .min="${this._min}"
+                    .max="${this._max}"
+                    ?time="${this.time}"
+                    ?strict="${this.strict}"
+                    ?small="${this.small}"
+                    ?prev="${this.time}"
+                    ?next="${true}"
+                    ?range="${this.range && !this.time}"
+                    .month="${this._monthPlus}"
+                    .year="${this._yearPlus}"
+                    .hoveredDate="${this._hoveredDate}"
+                    .dateTo="${this._to}"
+                    .dateFrom="${this._from}"
+                    .locale="${until(this.getLocale())}"
+                    @gv-date-picker-calendar:month-mode="${this._onMonthMode}"
+                    @gv-date-picker-calendar:year-mode="${this._onYearMode}"
+                    @gv-date-picker-calendar:month-changed="${this._onMonthChanged}"
+                    @gv-date-picker-calendar:year-changed="${this._onYearChanged}"
+                    @hovered-date-changed="${this.hoveredDateChanged}"
+                    @date-to-changed="${this.dateToChanged}"
+                    @date-from-changed="${this.dateFromChanged}"
+                  >
+                  </gv-date-picker-calendar>`
+                : ''}
+            `
+            : html `
+              <gv-date-picker-calendar
+                .disabledDates="${this.disabledDates}"
+                .min="${this._min}"
+                .max="${this._max}"
+                ?time="${this.time}"
+                ?small="${this.small}"
+                ?strict="${this.strict}"
+                ?prev="${true}"
+                ?next="${true}"
+                ?range="${this.range}"
+                .month="${this._month}"
+                .year="${this._year}"
+                .hoveredDate="${this._hoveredDate}"
+                .dateTo="${this._to}"
+                .dateFrom="${this._from}"
+                .locale="${until(this.getLocale())}"
+                @hovered-date-changed="${this.hoveredDateChanged}"
+                @date-to-changed="${this.dateToChanged}"
+                @date-from-changed="${this.dateFromChanged}"
+              >
+              </gv-date-picker-calendar>
+            `}
+      </span>
+    </div>`;
+    }
+    hasFrom() {
+        return this._mode == null || this._mode === 'from';
+    }
+    hasTo() {
+        return this._mode == null || this._mode === 'to';
+    }
+    firstUpdated() {
+        if (this.time && this.range) {
+            this._mode = 'from';
+        }
+        if (this._distance) {
+            this._distanceTimer = setInterval(() => {
+                this.distanceFromNow = this._distance;
+            }, 30000);
+        }
+    }
+    monthChanged(month, year) {
+        if (year && month) {
+            const add = this.time && this.range ? 0 : 1;
+            const monthPlus = `0${(month % 12) + add}`;
+            this._monthPlus = monthPlus.substring(monthPlus.length - 2);
+            if (this._monthPlus === '01') {
+                this._yearPlus = parseInt(year, 10) + add;
+            }
+            else {
+                this._yearPlus = parseInt(year, 10);
+            }
+        }
+    }
+    updated(properties) {
+        if (properties.has('_month') || properties.has('_year')) {
+            this.monthChanged(this._month, this._year);
+        }
+        if (properties.has('value')) {
+            if (this.value == null || (this.value.filter && this.value.filter((v) => v != null).length === 0)) {
+                this._from = null;
+                this._to = null;
+            }
+            else {
+                if (this.range) {
+                    this._from = this.value && this.value.length > 0 ? this.value[0] / 1000 : null;
+                    this._to = this.value && this.value.length > 1 ? this.value[1] / 1000 : null;
+                }
+                else {
+                    this._from = this.value / 1000;
+                }
+            }
+        }
+    }
+    _onMonthChanged({ detail }) {
+        this._month = detail.month;
+        this._year = detail.year;
+        this._hoveredDate = null;
+        if (!(this.range && this.time)) {
+            this._mode = null;
+        }
+    }
+    _onYearChanged({ detail }) {
+        this._year = detail.year;
+    }
+    _onMonthMode({ detail }) {
+        if (this.time && this.range) {
+            this._month = detail.month;
+            this._year = detail.year;
+        }
+    }
+    _onYearMode({ detail }) {
+        if (this.time && this.range) {
+            this._month = detail.month;
+            this._year = detail.year;
+        }
+    }
+    _onBlurForm({ target }) {
+        const value = target.value;
+        if (value) {
+            const date = this.parseValue(value);
+            if (date && !isNaN(date)) {
+                this._month = (getMonth(date) + 1).toString();
+                this._year = getYear(date).toString();
+                this._from = date.getTime() / 1000;
+                this.invalid = isInvalid(this._from, this._min, this._max, !this.time);
+            }
+        }
+    }
+    _onBlurTo({ target }) {
+        const value = target.value;
+        if (value) {
+            const date = this.parseValue(value);
+            if (date && !isNaN(date)) {
+                this._month = (getMonth(date) + 1).toString();
+                this._year = getYear(date).toString();
+                this._to = date.getTime() / 1000;
+                this.invalid = isInvalid(this._to, this._min, this._max, !this.time);
+            }
+        }
+    }
+    hoveredDateChanged({ detail }) {
+        this._hoveredDate = detail.value;
+    }
+    dateFromChanged({ detail }) {
+        if (this.time && this.range) {
+            if (this._mode === 'from') {
+                this._from = detail.value;
+                const inputs = this.shadowRoot.querySelectorAll('.range-input gv-input');
+                inputs[inputs.length - 1].focus();
+                setTimeout(() => (this._mode = 'to'), 0);
+            }
+            else {
+                this._to = detail.value;
+                this._open = false;
+                if (this._to < this._from) {
+                    const tmp = this._to;
+                    this._to = this._from;
+                    this._from = tmp;
+                }
+            }
+        }
+        else if (!this.range) {
+            this._from = detail.value;
+            this._open = false;
+        }
+        else {
+            this._from = detail.value;
+        }
+        if (this._distance) {
+            this.distanceFromNow = this._distance;
+        }
+        if (this.range) {
+            this.value = [this._from * 1000, this._to * 1000];
+            this.invalid =
+                isInvalid(this._to, this._min, this._max, !this.time) ||
+                    isInvalid(this._from, this._min, this._max, !this.time) ||
+                    this._to === this._form;
+        }
+        else {
+            this.value = this._from * 1000;
+            this.invalid = isInvalid(this._from, this._min, this._max, !this.time);
+        }
+        this.valid = !this.invalid;
+        this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+        dispatchCustomEvent(this, 'input', this.value);
+    }
+    dateToChanged({ detail }) {
+        if (this._distance) {
+            this.distanceFromNow = this._distance;
+        }
+        this._to = detail.value;
+        if (this._to) {
+            this._open = false;
+            this.value = [this._from * 1000, this._to * 1000];
+            this.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+            dispatchCustomEvent(this, 'input', this.value);
+        }
+    }
+    getFormat() {
+        if (this.time && this.strict) {
+            return this.strictTimeFormat;
+        }
+        return this.time ? `${this.format} ${this.timeFormat}` : this.format;
+    }
+    async getFormattedDate(date) {
+        if (date) {
+            const locale = await this.getLocale();
+            return format(new Date(date * 1000), this.getFormat(), locale);
+        }
+        return '';
+    }
+    parseValue(value) {
+        if (value) {
+            return parse(value, this.getFormat(), new Date());
+        }
+        return '';
+    }
+}
+window.customElements.define('gv-date-picker', GvDatePicker);