@gravitee/ui-components 3.25.3-typescript-8a53edf → 3.25.3-typescript-e7256ca

package/src/atoms/gv-date-picker-cell.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Date Picker Cell
+ *
+ * ## Details
+ * * has @theme facet
+ *
+ * @fires gv-date-picker-cell:select - Custom event when user select cell
+ * @fires gv-date-picker-cell:hover - Custom event when user hover cell
+ *
+ * @attr {Object.<{date:Number,title:String}>} data - data to display
+ * @attr {Boolean} selected - if data is selected
+ * @attr {Boolean} hovered - if data is hovered
+ * @attr {Boolean} disabled - if data is disabled
+ * @attr {Boolean} isCurrent - if data is current date
+ * @attr {Number} dateFrom - unix date form
+ * @attr {Number} dateTo - unix date to
+ * @attr {Number} hoveredDate - unix hovered date
+ * @attr {Number} min - unix min date
+ * @attr {Number} max - unix max date
+ * @attr {Array} disabledDates - array of disabled date
+ *
+ * @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 GvDatePickerCell extends LitElement {
+    static get properties(): {
+        data: {
+            type: ObjectConstructor;
+        };
+        selected: {
+            type: BooleanConstructor;
+        };
+        hovered: {
+            type: BooleanConstructor;
+        };
+        dateTo: {
+            type: NumberConstructor;
+        };
+        dateFrom: {
+            type: NumberConstructor;
+        };
+        month: {
+            type: StringConstructor;
+        };
+        hoveredDate: {
+            type: NumberConstructor;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+        };
+        isCurrent: {
+            type: BooleanConstructor;
+        };
+        time: {
+            type: BooleanConstructor;
+        };
+        disabledDate: {
+            type: ArrayConstructor;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    selected: boolean;
+    hovered: boolean;
+    isCurrent: boolean;
+    disabledDates: any[];
+    isSelected(parsedDateFrom: any, parsedDateTo: any, data: any): any;
+    dateChanged(dateFrom: any, dateTo: any, hoveredDate: any, data: any): void;
+    _onClick(): void;
+    _onMouseOver(): void;
+    isDisabled(): boolean;
+}
+import { LitElement } from "lit-element/lit-element";

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

@@ -1,190 +1 @@
-/*
- * 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 { LitElement, html, css } from 'lit';
-import { classMap } from 'lit/directives/class-map';
-import { dispatchCustomEvent } from '../lib/events';
-import { startOfDay } from 'date-fns';
-import { until } from 'lit/directives/until';
-import { isInvalid } from '../lib/date';
-
-/**
- * Date Picker Cell
- *
- * ## Details
- * * has @theme facet
- *
- * @fires gv-date-picker-cell:select - Custom event when user select cell
- * @fires gv-date-picker-cell:hover - Custom event when user hover cell
- *
- * @attr {Object.<{date:Number,title:String}>} data - data to display
- * @attr {Boolean} selected - if data is selected
- * @attr {Boolean} hovered - if data is hovered
- * @attr {Boolean} disabled - if data is disabled
- * @attr {Boolean} isCurrent - if data is current date
- * @attr {Number} dateFrom - unix date form
- * @attr {Number} dateTo - unix date to
- * @attr {Number} hoveredDate - unix hovered date
- * @attr {Number} min - unix min date
- * @attr {Number} max - unix max date
- * @attr {Array} disabledDates - array of disabled date
- *
- * @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 GvDatePickerCell extends LitElement {
-  static get properties() {
-    return {
-      data: { type: Object },
-      selected: { type: Boolean },
-      hovered: { type: Boolean },
-      dateTo: { type: Number },
-      dateFrom: { type: Number },
-      month: { type: String },
-      hoveredDate: { type: Number },
-      min: { type: Number },
-      max: { type: Number },
-      disabled: { type: Boolean },
-      isCurrent: { type: Boolean },
-      time: { type: Boolean },
-      disabledDate: { type: Array },
-    };
-  }
-
-  static get styles() {
-    return [
-      // language=CSS
-      css`
-        :host {
-          display: block;
-        }
-
-        .cell {
-          height: 100%;
-          width: 100%;
-          margin: 0;
-          padding: 0;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .cell:not(.disabled):not(.selected):hover {
-          background: var(--gv-date-picker-hover--bgc, var(--gv-theme-color-light, #86c3d0));
-          color: var(--gv-date-picker-hover--c, var(--gv-theme-font-color-dark, #262626));
-          cursor: pointer;
-          opacity: 1;
-        }
-
-        .cell.hovered {
-          opacity: 0.5;
-        }
-
-        .cell.current {
-          font-weight: bold;
-          background: var(--gv-theme-neutral-color, #f5f5f5);
-        }
-
-        .cell.hovered,
-        .cell.selected {
-          background: var(--gv-date-picker-selected--bgc, var(--gv-theme-color, #5a7684));
-          color: var(--gv-date-picker-selected--c, var(--gv-theme-font-color-light, #ffffff));
-        }
-
-        .cell.disabled {
-          opacity: 0.4;
-        }
-      `,
-    ];
-  }
-
-  constructor() {
-    super();
-    this.selected = false;
-    this.hovered = false;
-    this.isCurrent = false;
-    this.disabledDates = [];
-  }
-
-  render() {
-    const disabled = this.isDisabled();
-    const classes = {
-      cell: true,
-      current: this.isCurrent,
-      selected: this.selected,
-      hovered: this.hovered,
-      disabled,
-    };
-
-    return html`
-      <div @click="${disabled ? null : this._onClick}" @mouseover="${this._onMouseOver}" class="${classMap(classes)}">
-        <div>${until(this.data ? this.data.title : null)}</div>
-      </div>
-    `;
-  }
-
-  updated(properties) {
-    if (properties.has('dateFrom') || properties.has('dateTo') || properties.has('hoveredDate') || properties.has('data')) {
-      this.dateChanged(this.dateFrom, this.dateTo, this.hoveredDate, this.data);
-    }
-  }
-
-  isSelected(parsedDateFrom, parsedDateTo, data) {
-    return (
-      (parsedDateTo && startOfDay(parsedDateTo * 1000).getTime() / 1000 === data.date) ||
-      (parsedDateFrom && startOfDay(parsedDateFrom * 1000).getTime() / 1000 === data.date)
-    );
-  }
-
-  dateChanged(dateFrom, dateTo, hoveredDate, data) {
-    this.selected = false;
-    this.hovered = false;
-    const parsedDateFrom = parseInt(dateFrom, 10);
-    const parsedDateTo = parseInt(dateTo, 10);
-    if (data || hoveredDate) {
-      this.selected = this.isSelected(parsedDateFrom, parsedDateTo, data);
-      if (
-        ((hoveredDate === data.date || data.date < hoveredDate) &&
-          data.date > parsedDateFrom &&
-          !parsedDateTo &&
-          !Number.isNaN(parsedDateFrom) &&
-          parsedDateFrom !== undefined &&
-          !this.selected) ||
-        (data.date > parsedDateFrom && data.date < parsedDateTo)
-      ) {
-        this.hovered = true;
-      }
-    }
-  }
-
-  _onClick() {
-    dispatchCustomEvent(this, 'select', { date: this.data.date });
-  }
-
-  _onMouseOver() {
-    dispatchCustomEvent(this, 'hover', { date: this.data.date });
-  }
-
-  isDisabled() {
-    if (this.data && this.data.date) {
-      return isInvalid(this.data.date, this.min, this.max, true, this.disabledDates);
-    }
-    return false;
-  }
-}
-
-window.customElements.define('gv-date-picker-cell', GvDatePickerCell);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvDatePickerCell=void 0;const e=require("lit"),t=require("lit/directives/class-map"),a=require("../lib/events"),i=require("date-fns"),s=require("lit/directives/until"),r=require("../lib/date");class d extends e.LitElement{static get properties(){return{data:{type:Object},selected:{type:Boolean},hovered:{type:Boolean},dateTo:{type:Number},dateFrom:{type:Number},month:{type:String},hoveredDate:{type:Number},min:{type:Number},max:{type:Number},disabled:{type:Boolean},isCurrent:{type:Boolean},time:{type:Boolean},disabledDate:{type:Array}}}static get styles(){return[e.css`:host{display:block}.cell{height:100%;width:100%;margin:0;padding:0;display:flex;justify-content:center;align-items:center}.cell:not(.disabled):not(.selected):hover{background:var(--gv-date-picker-hover--bgc,var(--gv-theme-color-light,#86c3d0));color:var(--gv-date-picker-hover--c,var(--gv-theme-font-color-dark,#262626));cursor:pointer;opacity:1}.cell.hovered{opacity:.5}.cell.current{font-weight:700;background:var(--gv-theme-neutral-color,#f5f5f5)}.cell.hovered,.cell.selected{background:var(--gv-date-picker-selected--bgc,var(--gv-theme-color,#5a7684));color:var(--gv-date-picker-selected--c,var(--gv-theme-font-color-light,#fff))}.cell.disabled{opacity:.4}`]}constructor(){super(),this.selected=!1,this.hovered=!1,this.isCurrent=!1,this.disabledDates=[]}render(){const a=this.isDisabled(),i={cell:!0,current:this.isCurrent,selected:this.selected,hovered:this.hovered,disabled:a};return e.html`<div @click="${a?null:this._onClick}" @mouseover="${this._onMouseOver}" class="${(0,t.classMap)(i)}"><div>${(0,s.until)(this.data?this.data.title:null)}</div></div>`}updated(e){(e.has("dateFrom")||e.has("dateTo")||e.has("hoveredDate")||e.has("data"))&&this.dateChanged(this.dateFrom,this.dateTo,this.hoveredDate,this.data)}isSelected(e,t,a){return t&&(0,i.startOfDay)(1e3*t).getTime()/1e3===a.date||e&&(0,i.startOfDay)(1e3*e).getTime()/1e3===a.date}dateChanged(e,t,a,i){this.selected=!1,this.hovered=!1;const s=parseInt(e,10),r=parseInt(t,10);(i||a)&&(this.selected=this.isSelected(s,r,i),((a===i.date||i.date<a)&&i.date>s&&!r&&!Number.isNaN(s)&&void 0!==s&&!this.selected||i.date>s&&i.date<r)&&(this.hovered=!0))}_onClick(){(0,a.dispatchCustomEvent)(this,"select",{date:this.data.date})}_onMouseOver(){(0,a.dispatchCustomEvent)(this,"hover",{date:this.data.date})}isDisabled(){return!(!this.data||!this.data.date)&&(0,r.isInvalid)(this.data.date,this.min,this.max,!0,this.disabledDates)}}exports.GvDatePickerCell=d,window.customElements.define("gv-date-picker-cell",d);

package/src/atoms/gv-date-picker.d.ts

@@ -0,0 +1,194 @@
+/**
+ * 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(): {
+        range: {
+            type: BooleanConstructor;
+        };
+        label: {
+            type: StringConstructor;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        time: {
+            type: BooleanConstructor;
+        };
+        strict: {
+            type: BooleanConstructor;
+        };
+        small: {
+            type: BooleanConstructor;
+        };
+        value: {
+            type: ArrayConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        distanceFromNow: {
+            type: NumberConstructor;
+        };
+        disabledDates: {
+            type: ArrayConstructor;
+        };
+        format: {
+            type: StringConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        valid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        _hoveredDate: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        _open: {
+            type: BooleanConstructor;
+            attribute: boolean;
+        };
+        _month: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        _year: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        _monthPlus: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        _yearPlus: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _mode: {
+            type: StringConstructor;
+            attribute: boolean;
+        };
+        _from: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _to: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _min: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _max: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+        _distance: {
+            type: NumberConstructor;
+            attribute: boolean;
+        };
+    };
+    static get styles(): import("lit").CSSResult[];
+    _id: string;
+    strict: boolean;
+    range: boolean;
+    time: boolean;
+    format: string;
+    timeFormat: string;
+    strictTimeFormat: string;
+    handleClick: (e: any) => void;
+    handleDocumentClick: (e: any) => void;
+    disabledDates: any[];
+    _year: any;
+    _month: any;
+    set min(arg: any);
+    _min: number | undefined;
+    set max(arg: any);
+    _max: number | undefined;
+    set distanceFromNow(arg: any);
+    _distance: any;
+    _from: any;
+    _onClick(e: any): void;
+    _onDocumentClick(e: any): void;
+    _open: boolean | undefined;
+    _onFocus(mode: any): void;
+    _mode: any;
+    getLocale(): Promise<any>;
+    get dateFromPlaceholder(): string;
+    get dateToPlaceholder(): string;
+    get icon(): "general:calendar" | "code:error";
+    get hasContent(): boolean;
+    _onClear(): void;
+    invalid: boolean | undefined;
+    value: any;
+    hasFrom(): boolean;
+    hasTo(): boolean;
+    _distanceTimer: NodeJS.Timeout | undefined;
+    monthChanged(month: any, year: any): void;
+    _monthPlus: string | undefined;
+    _yearPlus: number | undefined;
+    _to: any;
+    _onMonthChanged({ detail }: {
+        detail: any;
+    }): void;
+    _hoveredDate: any;
+    _onYearChanged({ detail }: {
+        detail: any;
+    }): void;
+    _onMonthMode({ detail }: {
+        detail: any;
+    }): void;
+    _onYearMode({ detail }: {
+        detail: any;
+    }): void;
+    _onBlurForm({ target }: {
+        target: any;
+    }): void;
+    _onBlurTo({ target }: {
+        target: any;
+    }): void;
+    hoveredDateChanged({ detail }: {
+        detail: any;
+    }): void;
+    dateFromChanged({ detail }: {
+        detail: any;
+    }): void;
+    valid: boolean | undefined;
+    dateToChanged({ detail }: {
+        detail: any;
+    }): void;
+    getFormat(): string;
+    getFormattedDate(date: any): Promise<string>;
+    parseValue(value: any): "" | Date;
+}
+import { LitElement } from "lit-element/lit-element";