@progressive-development/pd-calendar/dist/pd-calendar/pd-year-popup/PdYearPopup.js

Webcomponent for calendar

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

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 PdYearPopup extends LitElement {
  constructor() {
    super(...arguments);
    this.yearSelection = [];
    this.currentYear = "";
  }
  static {
    this.styles = [
      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;
      }
    `
    ];
  }
  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) {
    const target = event.currentTarget;
    const year = target.dataset.year;
    if (year) {
      this.dispatchEvent(
        new CustomEvent("change-year-selection", {
          detail: { year },
          bubbles: true,
          composed: true
        })
      );
    } else {
      this._closeSelection();
    }
  }
  _closeSelection() {
    this.dispatchEvent(
      new CustomEvent("abort-year-selection", {
        bubbles: true,
        composed: true
      })
    );
  }
}
__decorateClass([
  property({ type: Array })
], PdYearPopup.prototype, "yearSelection");
__decorateClass([
  property({ type: String })
], PdYearPopup.prototype, "currentYear");

export { PdYearPopup };