@progressive-development/pd-calendar 0.5.4 → 0.6.1

package/dist/src/PdCalendarCell.js

@@ -1,246 +0,0 @@
-import { LitElement, css, html } from "lit";
-import { parse } from "fecha";
-import { PDColorStyles, PDFontStyles } from "@progressive-development/pd-shared-styles";
-class PdCalendarCell extends LitElement {
-  /**
-   * @event select-date - fires when user clicks on a selectable cell.
-   */
-  static get properties() {
-    return {
-      /**
-       * If enabled, cell could be selected (with visible hover element and pointer)
-       * vy the user => results in fire cell-selected.
-       */
-      selectEnabled: { type: Boolean },
-      /**
-       * If enabled, highlight the current day
-       */
-      today: { type: Boolean },
-      /**
-       * If enabled, highlight the selected day
-       */
-      selected: { type: Boolean },
-      /**
-       * If enabled the cell gets an special class (e.g. green day).
-       */
-      special: { type: Boolean },
-      /**
-       * If set shows info text in the middle (hack) of the cell (e.g. price info).
-       */
-      infoTxt: { type: String },
-      /**
-       * CSS class for day number inside the cell, top-left and center available
-       */
-      numberClass: { type: String },
-      /* key, weekDayNumber, dayNumber could merged to date 
-           on the other hand then there is the need to calculate them for each cell... */
-      key: { type: String },
-      weekDayNumber: { type: Number },
-      dayNumber: { type: Number }
-    };
-  }
-  static get styles() {
-    return [
-      PDColorStyles,
-      PDFontStyles,
-      css`
-      :host {
-        display: block;
-
-        /* Defined by PdCalendar and also setted here
-        --my-primary-font: var(--squi-primary-font, Oswald);*/ 
-
-        /* not used in the moment, was created for gradient cells 
-        --my-info-cell-bg2-color: var(--squi-title-color, #084c61);
-        --my-info-cell-bg1-hover: var(--squi-highlight-color, #ffc857);
-        --my-info-cell-bg2-hover: var(--squi-highlight-color, #177e89);
-        */
-      }
-
-      .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;
-        }
-      }
-    `
-    ];
-  }
-  constructor() {
-    super();
-    this.numberClass = "top-left";
-  }
-  _renderSelectableCell() {
-    return html` <div
-      @keypress="${this._selectableCellClicked}"
-      @click="${this._selectableCellClicked}"
-      @mouseenter="${this._mouseEnter}"
-      @mouseleave="${this._mouseLeave}"
-      data-date="${this.key}"
-      class="cell cell-day ${this.numberClass} ${this.special ? "special" : "free"}
-      ${(this.weekDayNumber === 6 || this.weekDayNumber === 0) && !this.special ? "we" : ""}"
-    >    
-      ${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() {
-    return html`<div
-      class="cell cell-day ${this.numberClass} ${(this.weekDayNumber === 6 || this.weekDayNumber === 0) && !this.special ? "we" : ""}"
-    >
-      ${this.infoTxt ? html`<div class="cell-info">${this.infoTxt}</div>` : ""}
-
-        <div class="cell-number ${this.numberClass}">${this.dayNumber}</div>
-    </div>`;
-  }
-  render() {
-    return this.selectEnabled ? this._renderSelectableCell() : this._renderEmptyCell();
-  }
-  _selectableCellClicked(e) {
-    const dateKey = e.target.dataset.date;
-    if (dateKey) {
-      const userSelectedDate = parse(dateKey, "YYYY-MM-DD");
-      this.dispatchEvent(
-        new CustomEvent("select-date", {
-          detail: {
-            dateKey,
-            date: userSelectedDate
-          }
-        })
-      );
-    }
-  }
-  _mouseEnter() {
-    const userSelectedDate = parse(this.key, "YYYY-MM-DD");
-    this.dispatchEvent(
-      new CustomEvent("mouse-enter-date", {
-        detail: {
-          dateKey: this.key,
-          date: userSelectedDate
-        }
-      })
-    );
-  }
-  _mouseLeave() {
-    this.dispatchEvent(
-      new CustomEvent("mouse-leave-date")
-    );
-  }
-}
-window.customElements.define("pd-calendar-cell", PdCalendarCell);

package/dist/src/PdYearPopup.js

@@ -1,108 +0,0 @@
-import { LitElement, css, html } from "lit";
-class PdYearPopup extends LitElement {
-  /**
-   * @event select-date - fires when user clicks on a selectable cell.
-   */
-  static get properties() {
-    return {
-      yearSelection: { type: Array },
-      currentYear: { type: String }
-    };
-  }
-  static get styles() {
-    return [
-      css`
-      :host {
-        position: absolute;
-        z-index: 10;
-        top: 25px;
-        right: 0;
-      }
-
-      ul {
-        list-style: none;
-        max-height: 250px;
-        overflow-y: auto;
-
-        margin: 0;
-        padding: 4px 0;
-        width: 90px;
-        background: var(--pd-default-light-col, #ffffff);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        border-radius: 8px;
-        border: 1px solid var(--pd-default-border-col, #ddd);
-
-        display: flex;
-        flex-direction: column;
-
-        scrollbar-width: thin;
-      }
-
-      ul::-webkit-scrollbar {
-        width: 6px;
-      }
-
-      ul::-webkit-scrollbar-thumb {
-        background-color: rgba(0, 0, 0, 0.2);
-        border-radius: 3px;
-      }
-
-      li {
-        text-align: center;
-        padding: 8px 0;
-        margin: 0 4px;
-        font-size: 14px;
-        border-radius: 4px;
-        color: var(--pd-default-dark-col, #333);
-        transition: background-color 0.2s ease, color 0.2s ease;
-      }
-
-      li.selectable:hover {
-        background-color: var(--pd-default-hover-bg, #f0f0f0);
-        color: var(--pd-default-hover-col, #000);
-        cursor: pointer;
-      }
-
-      li.current {
-        background-color: var(--pd-default-primary-col, #007acc);
-        color: white;
-        font-weight: bold;
-      }
-    `
-    ];
-  }
-  constructor() {
-    super();
-    this.yearSelection = [];
-  }
-  render() {
-    return html`
-      <ul>
-        ${this.yearSelection.map((year) => html`        
-          <li class="${this.currentYear === year ? "current" : "selectable"}" data-year="${year}" @click="${this._yearSelection}">${year}</li>
-        `)}        
-      </ul>      
-    `;
-  }
-  _yearSelection(event) {
-    if (event.target.dataset.year) {
-      this.dispatchEvent(new CustomEvent(
-        "change-year-selection",
-        {
-          detail: {
-            year: event.target.dataset.year
-          }
-        }
-      ));
-    } else {
-      this._closeSelection();
-    }
-  }
-  _closeSelection() {
-    this.dispatchEvent(new CustomEvent("abort-year-selection"));
-  }
-}
-window.customElements.define("pd-year-popup", PdYearPopup);
-export {
-  PdYearPopup
-};