@progressive-development/pd-calendar 0.6.8 → 1.0.0

package/dist/pd-calendar-cell.js

@@ -1,282 +0,0 @@
-import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { parse } from "fecha";
-import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdCalendarCell = class 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;
-  }
-  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
-      })
-    );
-  }
-};
-PdCalendarCell.styles = [
-  PdColorStyles,
-  PdFontStyles,
-  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;
-        }
-      }
-    `
-];
-__decorateClass([
-  property({ type: Boolean })
-], PdCalendarCell.prototype, "selectEnabled", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdCalendarCell.prototype, "today", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdCalendarCell.prototype, "selected", 2);
-__decorateClass([
-  property({ type: Boolean })
-], PdCalendarCell.prototype, "special", 2);
-__decorateClass([
-  property({ type: String })
-], PdCalendarCell.prototype, "infoTxt", 2);
-__decorateClass([
-  property({ type: String })
-], PdCalendarCell.prototype, "numberClass", 2);
-__decorateClass([
-  property({ type: String })
-], PdCalendarCell.prototype, "key", 2);
-__decorateClass([
-  property({ type: Number })
-], PdCalendarCell.prototype, "weekDayNumber", 2);
-__decorateClass([
-  property({ type: Number })
-], PdCalendarCell.prototype, "dayNumber", 2);
-PdCalendarCell = __decorateClass([
-  customElement("pd-calendar-cell")
-], PdCalendarCell);
-export {
-  PdCalendarCell
-};

package/dist/pd-calendar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-calendar.d.ts","sourceRoot":"","sources":["../src/pd-calendar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,0CAA0C,CAAC;AASlD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAqD1C;;;;;;;GAOG;AACH,qBAEa,UAAW,SAAQ,UAAU;IAExC,OAAO,CAAC,EAAE,IAAI,CAAC;IAGf,eAAe,UAAS;IAGxB,aAAa,EAAE,MAAM,EAAE,CAAM;IAG7B,mBAAmB,UAAS;IAG5B,mBAAmB,UAAS;IAG5B,aAAa,UAAS;IAGtB,WAAW,UAAS;IAGpB,mBAAmB,SAAM;IAGzB,mBAAmB,SAAM;IAGzB,IAAI,EAAE,YAAY,CAAM;IAGxB,WAAW,SAAc;IAGzB,OAAO,CAAC,SAAS,CAAc;IAG/B,OAAO,CAAC,YAAY,CAAc;IAGlC,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,sBAAsB,CAAc;IAC5C,OAAO,CAAC,kBAAkB,CAAK;IAE/B,OAAgB,MAAM,EAAE,cAAc,CAsHpC;IAEO,iBAAiB,IAAI,IAAI;IAKzB,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOrD,MAAM;IAOf,OAAO,CAAC,mBAAmB;IA6E3B,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAUpC,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,yBAAyB;CAOlC"}

package/dist/pd-year-popup.d.ts

@@ -1,25 +0,0 @@
-import { LitElement, CSSResultGroup } from 'lit';
-/**
- * Web Component zur Anzeige eines Jahresauswahl-Popups.
- *
- * Wird typischerweise als Dropdown unterhalb eines Buttons eingeblendet und
- * zeigt eine Liste von auswählbaren Jahren an.
- *
- * @fires change-year-selection – wenn ein Jahr ausgewählt wurde
- * @fires abort-year-selection – wenn außerhalb geklickt wird / keine Auswahl
- */
-export declare class PdYearPopup extends LitElement {
-    /**
-     * Liste der auswählbaren Jahre.
-     */
-    yearSelection: string[];
-    /**
-     * Aktuell ausgewähltes Jahr.
-     */
-    currentYear: string;
-    static styles: CSSResultGroup;
-    render(): import('lit-html').TemplateResult<1>;
-    private _yearSelection;
-    private _closeSelection;
-}
-//# sourceMappingURL=pd-year-popup.d.ts.map

package/dist/pd-year-popup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pd-year-popup.d.ts","sourceRoot":"","sources":["../src/pd-year-popup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAQ5D;;;;;;;;GAQG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC;;OAEG;IAEH,aAAa,EAAE,MAAM,EAAE,CAAM;IAE7B;;OAEG;IAEH,WAAW,SAAM;IAEjB,OAAgB,MAAM,EAAE,cAAc,CA+DpC;IAEO,MAAM;IAkBf,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,eAAe;CAQxB"}

package/dist/pd-year-popup.js

@@ -1,136 +0,0 @@
-import { css, LitElement, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { PdColorStyles, PdFontStyles } from "@progressive-development/pd-shared-styles";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let PdYearPopup = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.yearSelection = [];
-    this.currentYear = "";
-  }
-  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
-      })
-    );
-  }
-};
-PdYearPopup.styles = [
-  PdColorStyles,
-  PdFontStyles,
-  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;
-      }
-    `
-];
-__decorateClass([
-  property({ type: Array })
-], PdYearPopup.prototype, "yearSelection", 2);
-__decorateClass([
-  property({ type: String })
-], PdYearPopup.prototype, "currentYear", 2);
-PdYearPopup = __decorateClass([
-  customElement("pd-year-popup")
-], PdYearPopup);
-export {
-  PdYearPopup
-};

package/dist/stories/cell.stories.d.ts

@@ -1,15 +0,0 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: ({ infoTxt }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
-    argTypes: {};
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj;
-export declare const BasicCell: Story;
-//# sourceMappingURL=cell.stories.d.ts.map

package/dist/stories/cell.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cell.stories.d.ts","sourceRoot":"","sources":["../../src/stories/cell.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,wBAAwB,CAAC;AAGhC,QAAA,MAAM,IAAI;;;;;;;;;CAuCM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC"}

package/dist/stories/index.stories.d.ts

@@ -1,23 +0,0 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    render: ({ hideWeekend, refDate, data, prevMonthConstraint, nextMonthConstraint, addSlot, }: import('@storybook/web-components').Args) => import('lit-html').TemplateResult<1>;
-    argTypes: {};
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-    };
-};
-export default meta;
-type Story = StoryObj;
-export declare const Basic: Story;
-export declare const WithInfoAndConstraints: Story;
-export declare const WithSpecialDays: Story;
-export declare const WithSpecialDaysHideWeekend: Story;
-export declare const WithSpecificDateAndConstraints: Story;
-export declare const BasicSmall: Story;
-export declare const BasicSmallHugeYearSelection: Story;
-export declare const BasicSmallWithRefDate: Story;
-export declare const BasicSmallWithoutWeekend: Story;
-//# sourceMappingURL=index.stories.d.ts.map

package/dist/stories/index.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/stories/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,OAAO,mBAAmB,CAAC;AAG3B,QAAA,MAAM,IAAI;;;;;;;;;CAwBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AActB,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAUF,eAAO,MAAM,sBAAsB,EAAE,KAOpC,CAAC;AAiBF,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAQxC,CAAC;AAIF,eAAO,MAAM,8BAA8B,EAAE,KAM5C,CAAC;AA2CF,eAAO,MAAM,UAAU,EAAE,KA0BxB,CAAC;AAOF,eAAO,MAAM,2BAA2B,EAAE,KA2BzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,KA+BnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KA0BtC,CAAC"}