@paperless/core 2.0.1-beta.2 → 2.0.1-beta.21

package/dist/collection/components/molecules/calendar/calendar.component.js

@@ -1,517 +1,588 @@
 import { h, Host, } from "@stencil/core";
+import { cva } from "class-variance-authority";
 import { addDays, addMonths, addYears, endOfMonth, format, getDay, getDaysInMonth, getYear, isAfter, isBefore, isSameDay, isSameMonth, isSameYear, isValid, setDate, setMonth, setYear, startOfDay, startOfMonth, } from "date-fns";
+import { cn } from "../../../utils/cn";
+const calendar = cva(['p-calendar bg-white w-[17.5rem] flex flex-col gap-4'], {
+    variants: {
+        variant: {
+            default: ['p-2 rounded-lg drop-shadow-2', 'border border-black-teal-100'],
+            embedded: 'p-1',
+        },
+    },
+});
+const header = cva([
+    'flex items-center justify-between gap-1',
+    'w-full p-2',
+    'bg-off-white-300 rounded-lg',
+], {
+    variants: {
+        type: {
+            day: null,
+            month: null,
+            year: 'justify-center',
+        },
+    },
+});
+const view = cva(['flex flex-col gap-2', 'w-full'], {
+    variants: {
+        view: {
+            day: 'h-auto min-h-[12rem]',
+            month: null,
+            year: 'max-h-[14rem]',
+        },
+    },
+});
 export class Calendar {
-  constructor() {
-    this._today = new Date();
-    this._weekDays = Array.from(Array(7).keys());
-    this.variant = 'default';
-    this.value = undefined;
-    this.preselectToday = false;
-    this.disabledDates = undefined;
-    this.minDate = new Date(1970, 0, 1);
-    this.maxDate = this._getAutomaticMax();
-    this.disableWeekends = false;
-    this.mode = 'day';
-    this._view = this.mode;
-    this._viewDate = this._today;
-    this._value = undefined;
-    this._minDate = undefined;
-    this._maxDate = undefined;
-    this._disabledDates = [];
-  }
-  componentWillLoad() {
-    if (this.disabledDates) {
-      this._parseDisabledDates(this.disabledDates);
-    }
-    if (this.minDate) {
-      this._parseMinDate(this.minDate);
-    }
-    if (this.maxDate) {
-      this._parseMaxDate(this.maxDate);
-    }
-    this._parseValue(this.value);
-    if (this._value) {
-      this._viewDate = this._value;
-    }
-    if (isBefore(this._viewDate, this._minDate)) {
-      this._viewDate = this._minDate;
-    }
-    if (isAfter(this._viewDate, this._maxDate)) {
-      this._viewDate = this._maxDate;
-    }
-  }
-  componentDidRender() {
-    if (this._view === 'year') {
-      this._scrollYearIntoView();
-    }
-  }
-  _parseValue(value) {
-    if (!value && this.preselectToday) {
-      value = new Date();
-    }
-    if (typeof value === 'string') {
-      value = new Date(value);
-    }
-    this._setValue(value);
-  }
-  _parseMinDate(minDate) {
-    if (typeof minDate === 'string') {
-      minDate = new Date(minDate);
-    }
-    if (!isValid(minDate)) {
-      return;
-    }
-    this._minDate = minDate;
-    if (isBefore(this._viewDate, this._minDate)) {
-      this._viewDate = this._minDate;
-    }
-  }
-  _parseMaxDate(maxDate) {
-    if (typeof maxDate === 'string') {
-      maxDate = new Date(maxDate);
-    }
-    if (!isValid(maxDate)) {
-      return;
-    }
-    this._maxDate = maxDate;
-    if (isAfter(this._viewDate, this._maxDate)) {
-      this._viewDate = this._maxDate;
-    }
-  }
-  _parseDisabledDates(disabledDates) {
-    if (typeof disabledDates === 'string') {
-      disabledDates = JSON.parse(disabledDates);
-    }
-    if (!disabledDates || !Array.isArray(disabledDates)) {
-      return;
-    }
-    // normalize all to date
-    this._disabledDates = disabledDates
-      .map(date => {
-      if (typeof date === 'string') {
-        return new Date(date);
-      }
-      return date;
-    })
-      .filter(date => isValid(date));
-  }
-  render() {
-    return (h(Host, { class: `p-calendar variant-${this.variant}` }, this._getView()));
-  }
-  _getView() {
-    if (this._view === 'year') {
-      return this._getYearView();
-    }
-    if (this._view === 'month') {
-      return this._getMonthView();
-    }
-    return this._getDayView();
-  }
-  /* With this, we shall hack the system in ways no one would ever have thought.
+    constructor() {
+        this.variant = 'default';
+        this.value = undefined;
+        this.preselectToday = false;
+        this.disabledDates = undefined;
+        this.minDate = new Date(1970, 0, 1);
+        this.maxDate = this._getAutomaticMax();
+        this.disableWeekends = false;
+        this.mode = 'day';
+        this._view = this.mode;
+        this._viewDate = this._today;
+        this._value = undefined;
+        this._minDate = undefined;
+        this._maxDate = undefined;
+        this._disabledDates = [];
+    }
+    /**
+     * Event when the value changes
+     */
+    valueChange;
+    /**
+     * The host element
+     */
+    _el;
+    _today = new Date();
+    _weekDays = Array.from(Array(7).keys());
+    componentWillLoad() {
+        if (this.disabledDates) {
+            this._parseDisabledDates(this.disabledDates);
+        }
+        if (this.minDate) {
+            this._parseMinDate(this.minDate);
+        }
+        if (this.maxDate) {
+            this._parseMaxDate(this.maxDate);
+        }
+        this._parseValue(this.value);
+        if (this._value) {
+            this._viewDate = this._value;
+        }
+        if (isBefore(this._viewDate, this._minDate)) {
+            this._viewDate = this._minDate;
+        }
+        if (isAfter(this._viewDate, this._maxDate)) {
+            this._viewDate = this._maxDate;
+        }
+    }
+    componentDidRender() {
+        if (this._view === 'year') {
+            this._scrollYearIntoView();
+        }
+    }
+    _parseValue(value) {
+        if (!value && this.preselectToday) {
+            value = new Date();
+        }
+        if (typeof value === 'string') {
+            value = new Date(value);
+        }
+        if (isValid(value) && !isSameDay(value, this._viewDate)) {
+            this._viewDate = value;
+        }
+        this._setValue(value);
+    }
+    _parseMinDate(minDate) {
+        if (typeof minDate === 'string') {
+            minDate = new Date(minDate);
+        }
+        if (!isValid(minDate)) {
+            return;
+        }
+        this._minDate = minDate;
+        if (isBefore(this._viewDate, this._minDate)) {
+            this._viewDate = this._minDate;
+        }
+    }
+    _parseMaxDate(maxDate) {
+        if (typeof maxDate === 'string') {
+            maxDate = new Date(maxDate);
+        }
+        if (!isValid(maxDate)) {
+            return;
+        }
+        this._maxDate = maxDate;
+        if (isAfter(this._viewDate, this._maxDate)) {
+            this._viewDate = this._maxDate;
+        }
+    }
+    _parseDisabledDates(disabledDates) {
+        if (typeof disabledDates === 'string') {
+            disabledDates = JSON.parse(disabledDates);
+        }
+        if (!disabledDates || !Array.isArray(disabledDates)) {
+            return;
+        }
+        // normalize all to date
+        this._disabledDates = disabledDates
+            .map(date => {
+            if (typeof date === 'string') {
+                return new Date(date);
+            }
+            return date;
+        })
+            .filter(date => isValid(date));
+    }
+    render() {
+        return (h(Host, { key: '624da5939a3391fc98be636153ca8a296af47390', class: calendar({ variant: this.variant }) }, this._getView()));
+    }
+    _getView() {
+        if (this._view === 'year') {
+            return this._getYearView();
+        }
+        if (this._view === 'month') {
+            return this._getMonthView();
+        }
+        return this._getDayView();
+    }
+    /* With this, we shall hack the system in ways no one would ever have thought.
        <div class="col-start-1 col-start-2 col-start-3 col-start-4 col-start-5 col-start-6 col-start-7"></div>
    */
-  _getDayView() {
-    const daysInMonth = this._generateDaysInMonth();
-    return (h("div", { class: 'view-day' }, h("div", { class: 'header' }, h("div", { class: `nav ${!this._canSetAmount('month', -1) && 'disabled'}`, onClick: () => this._changeMonth(-1) }, h("p-icon", { variant: 'caret', rotate: 90 })), h("div", null, h("span", { onClick: () => this._changeView('month'), class: !this._canChangeView('month') && 'disabled' }, format(this._viewDate, 'MMMM')), h("span", { onClick: () => this._changeView('year'), class: `year ${!this._canChangeView('year') && 'disabled'}` }, getYear(this._viewDate))), h("div", { class: `nav ${!this._canSetAmount('month', 1) && 'disabled'}`, onClick: () => this._changeMonth(1) }, h("p-icon", { variant: 'caret', rotate: -90 }))), h("div", { class: 'dates' }, this._weekDays.map(weekday => (h("span", null, format(addDays(new Date(2022, 7, 1), weekday), 'eee')))), daysInMonth.map(day => {
-      return (h("time", { class: `day ${day.active && 'active'} ${day.disabled && 'disabled'} ${day.current && 'current'} ${day.offset !== false && `col-start-${day.offset}`}`, onClick: () => this._setValue(day.date) }, day.day));
-    }))));
-  }
-  _getMonthView() {
-    const months = this._generateMonths();
-    return (h("div", { class: 'view-month' }, h("div", { class: 'header' }, h("div", { class: `nav ${!this._canSetAmount('year', -1) && 'disabled'}`, onClick: () => this._changeYear(-1) }, h("p-icon", { variant: 'caret', rotate: 90 })), h("div", null, h("span", { onClick: () => this._changeView('year'), class: `year ${!this._canChangeView('year') && 'disabled'}` }, getYear(this._viewDate))), h("div", { class: `nav ${!this._canSetAmount('year', 1) && 'disabled'}`, onClick: () => this._changeYear(1) }, h("p-icon", { variant: 'caret', rotate: -90 }))), h("div", { class: 'items' }, months.map(month => (h("div", { onClick: () => this._setMonth(month.month), class: `month ${month.active && 'active'} ${month.disabled && 'disabled'} ${month.current && 'current'}` }, format(setMonth(new Date(), month.month), 'MMMM')))))));
-  }
-  _getYearView() {
-    const years = this._generateYears();
-    return (h("div", { class: 'view-year' }, h("div", { class: 'header' }, h("div", null, h("span", { class: 'year disabled' }, years === null || years === void 0 ? void 0 :
-      years[0].year, " - ", years === null || years === void 0 ? void 0 :
-      years[years.length - 1].year))), h("div", { class: 'items' }, years.map(year => (h("div", { onClick: () => this._setYear(year.year), class: `year ${year.active && 'active'} ${year.current && 'current'}` }, year.year))))));
-  }
-  _setYear(year) {
-    const date = setYear(this._viewDate, year);
-    if (this.mode === 'year') {
-      return this._setValue(setMonth(setDate(date, 1), 0));
-    }
-    this._viewDate = setYear(this._viewDate, year);
-    this._view = 'month';
-  }
-  _setMonth(month) {
-    const date = setMonth(this._viewDate, month);
-    if (this.mode === 'month') {
-      return this._setValue(setDate(date, 1));
-    }
-    this._viewDate = date;
-    this._view = 'day';
-  }
-  _changeMonth(amount = 1) {
-    const allowed = this._canSetAmount('month', amount);
-    if (!allowed) {
-      return;
-    }
-    const newDate = addMonths(this._viewDate, amount);
-    this._viewDate = newDate;
-  }
-  _changeYear(amount = 1) {
-    const allowed = this._canSetAmount('year', amount);
-    if (!allowed) {
-      return;
-    }
-    let newDate = addYears(this._viewDate, amount);
-    this._viewDate = newDate;
-  }
-  _setValue(value) {
-    if (value === null) {
-      this._value = null;
-      this.valueChange.emit(null);
-      return;
-    }
-    if (!isValid(value)) {
-      return;
-    }
-    if (this._isDisabledDay(value)) {
-      return;
-    }
-    value = startOfDay(value);
-    const isSameValue = isSameDay(value, this._value);
-    if (isSameValue) {
-      return;
-    }
-    this._value = value;
-    this.valueChange.emit(value);
-  }
-  _generateDaysInMonth() {
-    const days = Array.from(Array(getDaysInMonth(this._viewDate)).keys());
-    return days.map(day => {
-      day = day + 1;
-      const date = setDate(this._viewDate, day);
-      const dayOfWeek = getDay(date);
-      return {
-        day,
-        date,
-        offset: day === 1 ? (dayOfWeek === 0 ? 7 : dayOfWeek) : false,
-        current: isSameDay(date, this._today),
-        active: isSameDay(date, this._value),
-        disabled: this._isDisabledDay(date),
-      };
-    });
-  }
-  _isDisabledDay(day) {
-    return ((isBefore(day, this._minDate) && !isSameDay(day, this._maxDate)) ||
-      (isAfter(day, this._maxDate) && !isSameDay(day, this._maxDate)) ||
-      ((getDay(day) === 0 || getDay(day) === 6) && this.disableWeekends) ||
-      this._disabledDates.findIndex(date => isSameDay(date, day)) >= 0);
-  }
-  _generateMonths() {
-    const year = getYear(this._viewDate);
-    const months = Array.from(Array(12).keys());
-    return months.map(month => {
-      const date = new Date(year, month, 1);
-      return {
-        month,
-        current: isSameMonth(this._today, date),
-        active: isSameMonth(this._value, date),
-        disabled: isAfter(date, this._maxDate) ||
-          isBefore(endOfMonth(date), this._minDate),
-      };
-    });
-  }
-  _generateYears() {
-    const maxYear = getYear(this._maxDate) + 1;
-    const minYear = getYear(this._minDate);
-    return Array.from(Array(maxYear - minYear).keys()).map(index => {
-      const year = minYear + index;
-      return {
-        year,
-        current: getYear(this._today) === year,
-        active: getYear(this._value) === year,
-      };
-    });
-  }
-  _scrollYearIntoView() {
-    const items = this._el.shadowRoot.querySelector('.view-year .items');
-    if (!items) {
-      return;
-    }
-    const active = items.querySelector('.year.active');
-    if (active) {
-      return items.scrollTo({
-        top: active.offsetTop,
-      });
-    }
-    const current = items.querySelector('.year.current');
-    if (current) {
-      return items.scrollTo({
-        top: current.offsetTop,
-      });
-    }
-  }
-  _changeView(view) {
-    if (!this._canChangeView(view)) {
-      return;
-    }
-    this._view = view;
-  }
-  _canChangeView(view) {
-    if (view === 'year') {
-      if (isSameYear(this._minDate, this._maxDate)) {
-        return false;
-      }
-      return true;
-    }
-    if (isSameMonth(this._minDate, this._maxDate)) {
-      return false;
-    }
-    return true;
-  }
-  _canSetAmount(type, amount = 1) {
-    if (type === 'month') {
-      const newDate = addMonths(this._viewDate, amount);
-      const startNewDate = startOfMonth(newDate);
-      if ((isBefore(startNewDate, startOfMonth(this._minDate)) &&
-        !isSameDay(startNewDate, this._minDate)) ||
-        isAfter(startNewDate, endOfMonth(this._maxDate))) {
-        return false;
-      }
-    }
-    if (type === 'year') {
-      let newDate = addYears(this._viewDate, amount);
-      const year = getYear(newDate);
-      if (year < getYear(this._minDate) || year > getYear(this._maxDate)) {
-        return false;
-      }
-    }
-    return true;
-  }
-  _getAutomaticMax() {
-    const date = addYears(new Date(), 50);
-    let year = getYear(date);
-    year = Math.ceil(year / 10) * 10;
-    return setYear(date, year);
-  }
-  static get is() { return "p-calendar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["calendar.component.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["calendar.component.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'default' | 'embedded'",
-          "resolved": "\"default\" | \"embedded\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The variant of the button"
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'default'"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Date | string",
-          "resolved": "Date | string",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
+    _getDayView() {
+        const daysInMonth = this._generateDaysInMonth();
+        return (h("div", { class: view({ view: 'day' }) }, this._getHeader('day'), h("div", { class: 'grid grid-cols-7 justify-between gap-1' }, this._weekDays.map(weekday => (h("span", { class: 'w-8 text-center text-xs text-black-teal-200' }, format(addDays(new Date(2022, 7, 1), weekday), 'eee')))), daysInMonth.map(day => {
+            return day.active ? (h("p-button", { variant: 'primary', class: cn('w-full', `col-start-${day.offset}`), onClick: () => this._setValue(day.date) }, day.day)) : (h("time", { class: cn('normal flex items-center justify-center rounded-lg', 'h-8 w-8 text-sm text-black-teal-300', {
+                    'cursor-pointer hover:bg-white-600 hover:text-black-teal': !day.disabled,
+                }, `col-start-${day.offset}`, { 'cursor-not-allowed opacity-60': day.disabled }), onClick: () => this._setValue(day.date) }, day.day));
+        }))));
+    }
+    _getMonthView() {
+        const months = this._generateMonths();
+        return (h("div", { class: view({ view: 'month' }) }, this._getHeader('month'), h("div", { class: 'flex flex-wrap items-start gap-2' }, months.map(month => (h("p-button", { variant: month.active ? 'primary' : 'secondary', disabled: month.disabled, onClick: () => this._setMonth(month.month) }, format(setMonth(new Date(), month.month), 'MMMM')))))));
+    }
+    _getYearView() {
+        const years = this._generateYears();
+        return (h("div", { id: 'view-year', class: view({ view: 'year' }) }, this._getHeader('year'), h("div", { id: 'items', class: 'grid h-full grid-cols-4 gap-2 overflow-scroll' }, years.map(year => (h("p-button", { class: 'w-full', variant: year.active ? 'primary' : 'secondary', onClick: () => this._setYear(year.year), "data-active": year.active, "data-current": year.current }, year.year))))));
+    }
+    _getHeader(type = 'day') {
+        let nextFn = num => this._changeMonth(num);
+        let nextType = 'month';
+        if (type === 'month' || type === 'year') {
+            nextFn = num => this._changeYear(num);
+            nextType = 'year';
+        }
+        return (h("div", { class: header({ type }) }, type !== 'year' && (h("p-button", { variant: 'secondary', iconOnly: true, icon: 'caret', iconRotate: 90, size: 'sm', onClick: () => nextFn(-1), disabled: !this._canSetAmount(nextType, -1) })), h("div", { class: 'flex gap-2' }, this.mode !== 'year' && (h("p-button", { variant: 'secondary', size: 'sm', onClick: () => this._changeView('month'), disabled: !this._canChangeView('month'), active: this._view === 'month' && this.mode !== 'month' }, format(this._viewDate, 'MMMM'))), h("p-button", { variant: 'secondary', size: 'sm', onClick: () => this._changeView('year'), disabled: !this._canChangeView('year'), active: this._view === 'year' && this.mode !== 'year' }, getYear(this._viewDate))), type !== 'year' && (h("p-button", { variant: 'secondary', iconOnly: true, icon: 'caret', iconRotate: -90, size: 'sm', onClick: () => nextFn(1), disabled: !this._canSetAmount(nextType, 1) }))));
+    }
+    _setYear(year) {
+        const date = setYear(this._viewDate, year);
+        if (this.mode === 'year') {
+            this._viewDate = date;
+            this._setValue(setMonth(setDate(date, 1), 0));
+            return;
+        }
+        this._viewDate = date;
+        this._view = 'month';
+    }
+    _setMonth(month) {
+        const date = setMonth(this._viewDate, month);
+        if (this.mode === 'month') {
+            this._viewDate = date;
+            this._setValue(setDate(date, 1));
+            return;
+        }
+        this._viewDate = date;
+        this._view = 'day';
+    }
+    _changeMonth(amount = 1) {
+        const allowed = this._canSetAmount('month', amount);
+        if (!allowed) {
+            return;
+        }
+        const newDate = addMonths(this._viewDate, amount);
+        this._viewDate = newDate;
+    }
+    _changeYear(amount = 1) {
+        const allowed = this._canSetAmount('year', amount);
+        if (!allowed) {
+            return;
+        }
+        let newDate = addYears(this._viewDate, amount);
+        this._viewDate = newDate;
+    }
+    _setValue(value) {
+        if (value === null) {
+            this._value = null;
+            this.valueChange.emit(null);
+            return;
+        }
+        if (!isValid(value)) {
+            return;
+        }
+        if (this._isDisabledDay(value)) {
+            return;
+        }
+        value = startOfDay(value);
+        const isSameValue = isSameDay(value, this._value);
+        if (isSameValue) {
+            return;
+        }
+        this._value = value;
+        this.valueChange.emit(value);
+    }
+    _generateDaysInMonth() {
+        const days = Array.from(Array(getDaysInMonth(this._viewDate)).keys());
+        return days.map(day => {
+            day = day + 1;
+            const date = setDate(this._viewDate, day);
+            const dayOfWeek = getDay(date);
+            return {
+                day,
+                date,
+                offset: day === 1 ? (dayOfWeek === 0 ? 7 : dayOfWeek) : false,
+                current: isSameDay(date, this._today),
+                active: isSameDay(date, this._value),
+                disabled: this._isDisabledDay(date),
+            };
+        });
+    }
+    _isDisabledDay(day) {
+        return ((isBefore(day, this._minDate) && !isSameDay(day, this._maxDate)) ||
+            (isAfter(day, this._maxDate) && !isSameDay(day, this._maxDate)) ||
+            ((getDay(day) === 0 || getDay(day) === 6) && this.disableWeekends) ||
+            this._disabledDates.findIndex(date => isSameDay(date, day)) >= 0);
+    }
+    _generateMonths() {
+        const year = getYear(this._viewDate);
+        const months = Array.from(Array(12).keys());
+        return months.map(month => {
+            const date = new Date(year, month, 1);
+            return {
+                month,
+                current: isSameMonth(this._today, date),
+                active: isSameMonth(this._value, date),
+                disabled: isAfter(date, this._maxDate) ||
+                    isBefore(endOfMonth(date), this._minDate),
+            };
+        });
+    }
+    _generateYears() {
+        const maxYear = getYear(this._maxDate) + 1;
+        const minYear = getYear(this._minDate);
+        return Array.from(Array(maxYear - minYear).keys()).map(index => {
+            const year = minYear + index;
+            return {
+                year,
+                current: getYear(this._today) === year,
+                active: getYear(this._value) === year,
+            };
+        });
+    }
+    _scrollYearIntoView() {
+        const items = this._el.querySelector('#view-year > #items');
+        if (!items) {
+            return;
+        }
+        const active = items.querySelector('p-button[data-active]');
+        if (active) {
+            return items.scrollTo({
+                top: active.offsetTop - 100,
+            });
+        }
+        const current = items.querySelector('p-button[data-current]');
+        if (current) {
+            return items.scrollTo({
+                top: current.offsetTop - 100,
+            });
+        }
+    }
+    _changeView(view) {
+        if (!this._canChangeView(view)) {
+            return;
+        }
+        this._view = view;
+    }
+    _canChangeView(view) {
+        if (view === 'year') {
+            if (isSameYear(this._minDate, this._maxDate)) {
+                return false;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The current value"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "preselectToday": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to automatically preselect today"
-        },
-        "attribute": "preselect-today",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabledDates": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Array<Date | string> | string",
-          "resolved": "(string | Date)[] | string",
-          "references": {
-            "Array": {
-              "location": "global",
-              "id": "global::Array"
-            },
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
+            return true;
+        }
+        if (isSameMonth(this._minDate, this._maxDate)) {
+            return false;
+        }
+        return true;
+    }
+    _canSetAmount(type, amount = 1) {
+        if (type === 'month') {
+            const newDate = addMonths(this._viewDate, amount);
+            const startNewDate = startOfMonth(newDate);
+            if ((isBefore(startNewDate, startOfMonth(this._minDate)) &&
+                !isSameDay(startNewDate, this._minDate)) ||
+                isAfter(startNewDate, endOfMonth(this._maxDate))) {
+                return false;
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Disabled dates"
-        },
-        "attribute": "disabled-dates",
-        "reflect": false
-      },
-      "minDate": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Date | string",
-          "resolved": "Date | string",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
+        }
+        if (type === 'year') {
+            let newDate = addYears(this._viewDate, amount);
+            const year = getYear(newDate);
+            if (year < getYear(this._minDate) || year > getYear(this._maxDate)) {
+                return false;
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Min date"
-        },
-        "attribute": "min-date",
-        "reflect": false,
-        "defaultValue": "new Date(1970, 0, 1)"
-      },
-      "maxDate": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Date | string",
-          "resolved": "Date | string",
-          "references": {
-            "Date": {
-              "location": "global",
-              "id": "global::Date"
+        }
+        return true;
+    }
+    _getAutomaticMax() {
+        const date = addYears(new Date(), 50);
+        let year = getYear(date);
+        year = Math.ceil(year / 10) * 10;
+        return setYear(date, year);
+    }
+    static get is() { return "p-calendar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["calendar.component.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["calendar.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'embedded'",
+                    "resolved": "\"default\" | \"embedded\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The current value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "preselectToday": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to automatically preselect today"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "preselect-today",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabledDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<Date | string> | string",
+                    "resolved": "(string | Date)[] | string",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled dates"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled-dates",
+                "reflect": false
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Min date"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min-date",
+                "reflect": false,
+                "defaultValue": "new Date(1970, 0, 1)"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | string",
+                    "resolved": "Date | string",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max date"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-date",
+                "reflect": false,
+                "defaultValue": "this._getAutomaticMax()"
+            },
+            "disableWeekends": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to disable the weekends"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-weekends",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'year' | 'month' | 'day'",
+                    "resolved": "\"day\" | \"month\" | \"year\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The mode of the datepicker"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "'day'"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Max date"
-        },
-        "attribute": "max-date",
-        "reflect": false,
-        "defaultValue": "this._getAutomaticMax()"
-      },
-      "disableWeekends": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether to disable the weekends"
-        },
-        "attribute": "disable-weekends",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'year' | 'month' | 'day'",
-          "resolved": "\"day\" | \"month\" | \"year\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The mode of the datepicker"
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "'day'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_view": {},
-      "_viewDate": {},
-      "_value": {},
-      "_minDate": {},
-      "_maxDate": {},
-      "_disabledDates": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "valueChange",
-        "name": "valueChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event when the value changes"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "_el"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "_parseValue"
-      }, {
-        "propName": "minDate",
-        "methodName": "_parseMinDate"
-      }, {
-        "propName": "maxDate",
-        "methodName": "_parseMaxDate"
-      }, {
-        "propName": "disabledDates",
-        "methodName": "_parseDisabledDates"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "_view": {},
+            "_viewDate": {},
+            "_value": {},
+            "_minDate": {},
+            "_maxDate": {},
+            "_disabledDates": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when the value changes"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "_el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "_parseValue"
+            }, {
+                "propName": "minDate",
+                "methodName": "_parseMinDate"
+            }, {
+                "propName": "maxDate",
+                "methodName": "_parseMaxDate"
+            }, {
+                "propName": "disabledDates",
+                "methodName": "_parseDisabledDates"
+            }];
+    }
 }
 //# sourceMappingURL=calendar.component.js.map