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

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

@@ -1 +1,174 @@
-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);
+/*
+ * 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);