@progressive-development/pd-calendar/dist/pd-calendar/pd-calendar-cell/PdCalendarCell.js

Webcomponent for calendar

import { LitElement, css, html } from 'lit';
import { property } from 'lit/decorators.js';
import { parse } from 'fecha';

var __defProp = Object.defineProperty;
var __decorateClass = (decorators, target, key, kind) => {
  var result = void 0 ;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (decorator(target, key, result) ) || result;
  if (result) __defProp(target, key, result);
  return result;
};
class PdCalendarCell extends LitElement {
  constructor() {
    super(...arguments);
    this.selectEnabled = false;
    this.today = false;
    this.selected = false;
    this.special = false;
    this.infoTxt = "";
    this.numberClass = "top-left";
    this.key = "";
    this.weekDayNumber = -1;
    this.dayNumber = -1;
  }
  static {
    this.styles = [
      css`
      :host {
        display: block;
      }

      .cell {
        width: 100%;
        height: 100%;
        min-height: 30px;
      }

      .cell-empty {
        background-color: var(
          --pd-calendar-cell-empty-bg-col,
          var(--pd-default-bg)
        );
      }

      .cell-day {
        position: relative;
        /*background-image: linear-gradient(to right, rgb(51, 101, 138) , rgb(38, 76, 104));      */
        /*box-shadow: 2px 2px 3px;*/
        background-color: var(
          --pd-calendar-cell-day-bg-col,
          var(--pd-default-light-col)
        );
        /*border-radius: 2px 2px 2px 2px;*/
      }

      .cell-day.we {
        background-color: var(
          --pd-calendar-cell-day-we-bg-col,
          var(--pd-default-disabled-light-col)
        );
      }

      .free {
        /*background-image: linear-gradient(to right, green, darkgreen);      
               background-color: var(--my-info-cell-bg1-color);*/
        background-color: var(
          --pd-calendar-cell-day-free-bg-col,
          var(--pd-default-col)
        );
        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
        box-shadow: var(--pd-calendar-cell-selectable-shadow, 1px 2px 2px);
      }

      .special {
        /*background-image: linear-gradient(to right, green, darkgreen);      
               background-color: var(--my-info-cell-bg1-color);*/
        background-color: var(
          --pd-calendar-cell-day-special-bg-col,
          var(--pd-default-success-col)
        );
        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-color), var(--my-info-cell-bg2-color));*/
        box-shadow: var(--pd-calendar-cell-selectable-shadow, 1px 2px 2px);
      }

      .special:hover,
      .free:hover {
        background-color: var(
          --pd-calendar-cell-day-bg-col-hover,
          var(--pd-default-hover-col)
        );
        /*background-image: linear-gradient(to right, var(--my-info-cell-bg1-hover), var(--my-info-cell-bg2-hover));*/
        cursor: pointer;
      }

      .cell-info {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--pd-calendar-cell-day-info-col, var(--pd-default-bg-col));
        font-family: var(--pd-default-font-title-family);
        font-weight: bold;
        font-size: var(--pd-calendar-info-font-size, 1.5em);
        text-shadow: 1px 1px var(--pd-default-dark-col);
        pointer-events: none;
      }

      .cell-number {
        pointer-events: none;
        font-size: var(--pd-calendar-number-font-size, 1em);
        font-weight: bold;
        color: var(--pd-calendar-cell-day-info-col, var(--pd-default-bg-col));
        font-family: var(--pd-default-font-content-family);
      }

      .cell-number.top-left {
        position: absolute;
        left: 3px;
        top: 2px;
      }

      /* Noch umstellen, passt nicht für alle größen (die anderen auf flex/center umgestellt) */
      .center {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .free .cell-number,
      .special .cell-number {
        color: var(
          --pd-calendar-cell-day-info-free-col,
          var(--pd-default-bg-col)
        );
      }

      .number-ring {
        position: absolute;
        height: 28px;
        width: 28px;
        border-radius: 50%;
        display: inline-block;
      }

      .today {
        border: 2px solid blue;
        pointer-events: none;
      }

      .selected {
        border: 2px solid red;
      }

      /* ToDo: Dont work for calendars sized by custom properties. Needed to calculate from calendar size
        not from window size, this is a topic for container queries, which are not available right now... */
      @media (max-width: 800px) {
        .cell-info {
          font-size: 1.3em;
        }
        .cell-number {
          font-size: 0.8em;
        }
      }

      @media (max-width: 500px) {
        .cell-info {
          font-weight: normal;
          font-size: 1em;
        }
      }
    `
    ];
  }
  render() {
    return this.selectEnabled ? this._renderSelectableCell() : this._renderEmptyCell();
  }
  _renderSelectableCell() {
    const baseClasses = [
      "cell",
      "cell-day",
      this.numberClass,
      this.special ? "special" : "free",
      (this.weekDayNumber === 6 || this.weekDayNumber === 0) && !this.special ? "we" : ""
    ].join(" ");
    return html`
      <div
        @click=${this._selectableCellClicked}
        @mouseenter=${this._mouseEnter}
        @mouseleave=${this._mouseLeave}
        class="${baseClasses}"
        data-date=${this.key}
      >
        ${this.infoTxt ? html`<div class="cell-info">${this.infoTxt}</div>` : ""}
        ${this.today ? html`<div class="number-ring today"></div>` : ""}
        ${this.selected ? html`<div class="number-ring selected"></div>` : ""}
        <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
      </div>
    `;
  }
  _renderEmptyCell() {
    const baseClasses = [
      "cell",
      "cell-day",
      this.numberClass,
      (this.weekDayNumber === 6 || this.weekDayNumber === 0) && !this.special ? "we" : ""
    ].join(" ");
    return html`
      <div class="${baseClasses}">
        ${this.infoTxt ? html`<div class="cell-info">${this.infoTxt}</div>` : ""}
        <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
      </div>
    `;
  }
  _selectableCellClicked(e) {
    const target = e.currentTarget;
    const dateKey = target.dataset.date;
    if (dateKey) {
      const userSelectedDate = parse(dateKey, "YYYY-MM-DD");
      this.dispatchEvent(
        new CustomEvent("select-date", {
          detail: { dateKey, date: userSelectedDate },
          bubbles: true,
          composed: true
        })
      );
    }
  }
  _mouseEnter() {
    const userSelectedDate = parse(this.key, "YYYY-MM-DD");
    this.dispatchEvent(
      new CustomEvent("mouse-enter-date", {
        detail: { dateKey: this.key, date: userSelectedDate },
        bubbles: true,
        composed: true
      })
    );
  }
  _mouseLeave() {
    this.dispatchEvent(
      new CustomEvent("mouse-leave-date", {
        bubbles: true,
        composed: true
      })
    );
  }
}
__decorateClass([
  property({ type: Boolean })
], PdCalendarCell.prototype, "selectEnabled");
__decorateClass([
  property({ type: Boolean })
], PdCalendarCell.prototype, "today");
__decorateClass([
  property({ type: Boolean })
], PdCalendarCell.prototype, "selected");
__decorateClass([
  property({ type: Boolean })
], PdCalendarCell.prototype, "special");
__decorateClass([
  property({ type: String })
], PdCalendarCell.prototype, "infoTxt");
__decorateClass([
  property({ type: String })
], PdCalendarCell.prototype, "numberClass");
__decorateClass([
  property({ type: String })
], PdCalendarCell.prototype, "key");
__decorateClass([
  property({ type: Number })
], PdCalendarCell.prototype, "weekDayNumber");
__decorateClass([
  property({ type: Number })
], PdCalendarCell.prototype, "dayNumber");

export { PdCalendarCell };