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

package/dist/cjs/p-calendar.cjs.entry.js

@@ -2,8 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-02e05522.js');
-const index = require('./index-b59a0544.js');
+const index$1 = require('./index-3f9bbc0c.js');
+const index$2 = require('./index-b556e70f.js');
+const cn = require('./cn-b70f9965.js');
+const index = require('./index-08db8a87.js');
+require('./clsx-fc789adc.js');
 
 /**
  * @name addDays
@@ -394,306 +397,357 @@ function setYear(dirtyDate, dirtyYear) {
   return date;
 }
 
-const calendarComponentCss = ".relative{position:relative!important}.block{display:block!important}.flex{display:flex!important}.grid{display:grid!important}.h-6{height:1.5rem!important}.h-8{height:2rem!important}.h-\\[12rem\\]{height:12rem!important}.h-auto{height:auto!important}.h-full{height:100%!important}.min-h-\\[12rem\\]{min-height:12rem!important}.w-6{width:1.5rem!important}.w-\\[14rem\\]{width:14rem!important}.w-full{width:100%!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-1{gap:.25rem!important}.self-center{align-self:center!important}.justify-self-center{justify-self:center!important}.overflow-y-auto{overflow-y:auto!important}.rounded{border-radius:.25rem!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-indigo-light{--tw-border-opacity:1!important;border-color:rgb(241 246 255/var(--tw-border-opacity,1))!important}.bg-indigo-light{background-color:rgb(241 246 255/var(--tw-bg-opacity,1))!important}.bg-indigo-light,.bg-white{--tw-bg-opacity:1!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-indigo{color:rgb(82 138 250/var(--tw-text-opacity,1))!important}.text-indigo,.text-storm{--tw-text-opacity:1!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity,1))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity,1))!important}.opacity-40{opacity:.4!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));display:block;padding:.5rem;width:14rem}:host .view-day,:host .view-month,:host .view-year{display:flex;flex-direction:column;gap:.5rem;height:12rem;width:100%}:host .header{align-items:center;display:flex;font-size:1rem;gap:.25rem;justify-content:space-between;line-height:1.5rem;width:100%}:host .header span{--tw-text-opacity:1;border-radius:.25rem;color:rgb(81 83 107/var(--tw-text-opacity,1));cursor:pointer;height:2rem;padding-left:.5rem;padding-right:.5rem}:host .header span.disabled{cursor:default}:host .header span:hover:not(.disabled){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}:host .header span.year{font-weight:600}:host .header .nav{--tw-text-opacity:1;align-items:center;border-radius:9999px;color:rgb(82 138 250/var(--tw-text-opacity,1));cursor:pointer;display:flex;height:1.5rem;justify-content:center;position:relative;text-decoration-line:none;transition-duration:.2s;width:1.5rem}:host .header .nav:hover:not(.disabled){--tw-bg-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1))}:host .header .nav.disabled{opacity:0}:host .view-day{height:auto;min-height:12rem}:host .view-day .dates{display:grid;gap:.25rem;grid-template-columns:repeat(7,1fr)}:host .view-day .dates>span{--tw-text-opacity:1;align-self:center;color:rgb(128 130 158/var(--tw-text-opacity,1));font-size:.75rem;font-weight:600;justify-self:center;line-height:1rem;text-align:center;width:1.5rem}:host .view-day .dates>time{--tw-text-opacity:1;align-items:center;align-self:center;border:1px solid transparent;border-radius:9999px;box-sizing:border-box;color:rgb(81 83 107/var(--tw-text-opacity,1));cursor:pointer;display:flex;font-size:.875rem;height:1.5rem;justify-content:center;justify-self:center;line-height:1.25rem;transition-duration:.2s;width:1.5rem}:host .view-day .dates>time.current{--tw-border-opacity:1;border-color:rgb(176 178 203/var(--tw-border-opacity,1))}:host .view-day .dates>time.active{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1));border-color:rgb(241 246 255/var(--tw-border-opacity,1));color:rgb(82 138 250/var(--tw-text-opacity,1));font-weight:600}:host .view-day .dates>time.disabled,:host .view-day .dates>time.other-month{cursor:default;opacity:.4}:host .view-day .dates>time.disabled{text-decoration-line:line-through}:host .view-day .dates>time:hover:not(.disabled):not(.active):not(.other-month){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1));color:rgb(81 83 107/var(--tw-text-opacity,1))}:host .view-month .items,:host .view-year .items{align-items:center;display:grid;gap:.25rem;grid-template-columns:repeat(3,1fr);height:100%;overflow-y:auto;position:relative;width:100%}:host .view-month .items>div,:host .view-year .items>div{--tw-text-opacity:1;align-items:center;border:1px solid transparent;border-radius:.25rem;color:rgb(81 83 107/var(--tw-text-opacity,1));cursor:pointer;display:flex;font-size:.875rem;height:2rem;justify-content:center;line-height:1.25rem;padding-left:.5rem;padding-right:.5rem}:host .view-month .items>div.current,:host .view-year .items>div.current{--tw-border-opacity:1;border-color:rgb(176 178 203/var(--tw-border-opacity,1))}:host .view-month .items>div.active,:host .view-year .items>div.active{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(241 246 255/var(--tw-bg-opacity,1));border-color:rgb(241 246 255/var(--tw-border-opacity,1));color:rgb(82 138 250/var(--tw-text-opacity,1));font-weight:600}:host .view-month .items>div.disabled,:host .view-year .items>div.disabled{cursor:default;opacity:.4;text-decoration-line:line-through}:host .view-month .items>div:hover:not(.disabled):not(.active),:host .view-year .items>div:hover:not(.disabled):not(.active){--tw-bg-opacity:1;background-color:rgb(247 250 252/var(--tw-bg-opacity,1))}:host .view-month .items{grid-template-columns:repeat(2,1fr)}:host .view-year .header{justify-content:center}:host(.variant-default){--tw-shadow:0 1px 1px rgba(0,2,2,.08),0 2px 2px rgba(0,2,2,.08),0 4px 4px rgba(0,2,2,.08);--tw-shadow-colored:0 1px 1px var(--tw-shadow-color),0 2px 2px var(--tw-shadow-color),0 4px 4px var(--tw-shadow-color);border-radius:.25rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}:host(.variant-embedded){padding:0}.static{position:static!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.col-start-3{grid-column-start:3!important}.col-start-4{grid-column-start:4!important}.col-start-5{grid-column-start:5!important}.col-start-6{grid-column-start:6!important}.col-start-7{grid-column-start:7!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
+const calendarComponentCss = "*{box-sizing:border-box}.static{position:static!important}.col-start-1{grid-column-start:1!important}.col-start-2{grid-column-start:2!important}.col-start-3{grid-column-start:3!important}.col-start-4{grid-column-start:4!important}.col-start-5{grid-column-start:5!important}.col-start-6{grid-column-start:6!important}.col-start-7{grid-column-start:7!important}.flex{display:flex!important}.grid{display:grid!important}.h-8{height:2rem!important}.h-auto{height:auto!important}.h-full{height:100%!important}.max-h-\\[14rem\\]{max-height:14rem!important}.min-h-\\[12rem\\]{min-height:12rem!important}.w-8{width:2rem!important}.w-\\[17\\.5rem\\]{width:17.5rem!important}.w-full{width:100%!important}.cursor-not-allowed{cursor:not-allowed!important}.cursor-pointer{cursor:pointer!important}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))!important}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))!important}.flex-col{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.items-start{align-items:flex-start!important}.items-center{align-items:center!important}.justify-center{justify-content:center!important}.justify-between{justify-content:space-between!important}.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-4{gap:1rem!important}.overflow-scroll{overflow:scroll!important}.rounded-lg{border-radius:.5rem!important}.border{border-width:1px!important}.border-black-teal-100{--tw-border-opacity:1!important;border-color:rgb(205 212 211/var(--tw-border-opacity,1))!important}.bg-off-white-300{--tw-bg-opacity:1!important;background-color:rgb(248 247 244/var(--tw-bg-opacity,1))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-black-teal{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}.text-black-teal-200{--tw-text-opacity:1!important;color:rgb(154 170 167/var(--tw-text-opacity,1))!important}.text-black-teal-300{--tw-text-opacity:1!important;color:rgb(104 127 124/var(--tw-text-opacity,1))!important}.opacity-60{opacity:.6!important}.drop-shadow-2{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,2,2,.04)) drop-shadow(0 2px 2px rgba(0,2,2,.04)) drop-shadow(0 4px 4px rgba(0,2,2,.04))!important}.drop-shadow-2,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.hover\\:bg-white-600:hover{--tw-bg-opacity:1!important;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))!important}.hover\\:text-black-teal:hover{--tw-text-opacity:1!important;color:rgb(3 42 36/var(--tw-text-opacity,1))!important}";
+const PCalendarStyle0 = calendarComponentCss;
 
+const calendar = index$2.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 = index$2.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 = index$2.cva(['flex flex-col gap-2', 'w-full'], {
+    variants: {
+        view: {
+            day: 'h-auto min-h-[12rem]',
+            month: null,
+            year: 'max-h-[14rem]',
+        },
+    },
+});
 const Calendar = class {
-  constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.valueChange = index$1.createEvent(this, "valueChange", 3);
-    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 (index.isBefore(this._viewDate, this._minDate)) {
-      this._viewDate = this._minDate;
-    }
-    if (index.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 (!index.isValid(minDate)) {
-      return;
-    }
-    this._minDate = minDate;
-    if (index.isBefore(this._viewDate, this._minDate)) {
-      this._viewDate = this._minDate;
-    }
-  }
-  _parseMaxDate(maxDate) {
-    if (typeof maxDate === 'string') {
-      maxDate = new Date(maxDate);
-    }
-    if (!index.isValid(maxDate)) {
-      return;
-    }
-    this._maxDate = maxDate;
-    if (index.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 => index.isValid(date));
-  }
-  render() {
-    return (index$1.h(index$1.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(hostRef) {
+        index$1.registerInstance(this, hostRef);
+        this.valueChange = index$1.createEvent(this, "valueChange", 3);
+        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;
+    get _el() { return index$1.getElement(this); }
+    _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 (index.isBefore(this._viewDate, this._minDate)) {
+            this._viewDate = this._minDate;
+        }
+        if (index.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 (index.isValid(value) && !index.isSameDay(value, this._viewDate)) {
+            this._viewDate = value;
+        }
+        this._setValue(value);
+    }
+    _parseMinDate(minDate) {
+        if (typeof minDate === 'string') {
+            minDate = new Date(minDate);
+        }
+        if (!index.isValid(minDate)) {
+            return;
+        }
+        this._minDate = minDate;
+        if (index.isBefore(this._viewDate, this._minDate)) {
+            this._viewDate = this._minDate;
+        }
+    }
+    _parseMaxDate(maxDate) {
+        if (typeof maxDate === 'string') {
+            maxDate = new Date(maxDate);
+        }
+        if (!index.isValid(maxDate)) {
+            return;
+        }
+        this._maxDate = maxDate;
+        if (index.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 => index.isValid(date));
+    }
+    render() {
+        return (index$1.h(index$1.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 (index$1.h("div", { class: 'view-day' }, index$1.h("div", { class: 'header' }, index$1.h("div", { class: `nav ${!this._canSetAmount('month', -1) && 'disabled'}`, onClick: () => this._changeMonth(-1) }, index$1.h("p-icon", { variant: 'caret', rotate: 90 })), index$1.h("div", null, index$1.h("span", { onClick: () => this._changeView('month'), class: !this._canChangeView('month') && 'disabled' }, index.format(this._viewDate, 'MMMM')), index$1.h("span", { onClick: () => this._changeView('year'), class: `year ${!this._canChangeView('year') && 'disabled'}` }, getYear(this._viewDate))), index$1.h("div", { class: `nav ${!this._canSetAmount('month', 1) && 'disabled'}`, onClick: () => this._changeMonth(1) }, index$1.h("p-icon", { variant: 'caret', rotate: -90 }))), index$1.h("div", { class: 'dates' }, this._weekDays.map(weekday => (index$1.h("span", null, index.format(addDays(new Date(2022, 7, 1), weekday), 'eee')))), daysInMonth.map(day => {
-      return (index$1.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 (index$1.h("div", { class: 'view-month' }, index$1.h("div", { class: 'header' }, index$1.h("div", { class: `nav ${!this._canSetAmount('year', -1) && 'disabled'}`, onClick: () => this._changeYear(-1) }, index$1.h("p-icon", { variant: 'caret', rotate: 90 })), index$1.h("div", null, index$1.h("span", { onClick: () => this._changeView('year'), class: `year ${!this._canChangeView('year') && 'disabled'}` }, getYear(this._viewDate))), index$1.h("div", { class: `nav ${!this._canSetAmount('year', 1) && 'disabled'}`, onClick: () => this._changeYear(1) }, index$1.h("p-icon", { variant: 'caret', rotate: -90 }))), index$1.h("div", { class: 'items' }, months.map(month => (index$1.h("div", { onClick: () => this._setMonth(month.month), class: `month ${month.active && 'active'} ${month.disabled && 'disabled'} ${month.current && 'current'}` }, index.format(setMonth(new Date(), month.month), 'MMMM')))))));
-  }
-  _getYearView() {
-    const years = this._generateYears();
-    return (index$1.h("div", { class: 'view-year' }, index$1.h("div", { class: 'header' }, index$1.h("div", null, index$1.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))), index$1.h("div", { class: 'items' }, years.map(year => (index$1.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 (!index.isValid(value)) {
-      return;
-    }
-    if (this._isDisabledDay(value)) {
-      return;
-    }
-    value = index.startOfDay(value);
-    const isSameValue = index.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: index.isSameDay(date, this._today),
-        active: index.isSameDay(date, this._value),
-        disabled: this._isDisabledDay(date),
-      };
-    });
-  }
-  _isDisabledDay(day) {
-    return ((index.isBefore(day, this._minDate) && !index.isSameDay(day, this._maxDate)) ||
-      (index.isAfter(day, this._maxDate) && !index.isSameDay(day, this._maxDate)) ||
-      ((getDay(day) === 0 || getDay(day) === 6) && this.disableWeekends) ||
-      this._disabledDates.findIndex(date => index.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: index.isAfter(date, this._maxDate) ||
-          index.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 ((index.isBefore(startNewDate, startOfMonth(this._minDate)) &&
-        !index.isSameDay(startNewDate, this._minDate)) ||
-        index.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);
-  }
-  get _el() { return index$1.getElement(this); }
-  static get watchers() { return {
-    "value": ["_parseValue"],
-    "minDate": ["_parseMinDate"],
-    "maxDate": ["_parseMaxDate"],
-    "disabledDates": ["_parseDisabledDates"]
-  }; }
+    _getDayView() {
+        const daysInMonth = this._generateDaysInMonth();
+        return (index$1.h("div", { class: view({ view: 'day' }) }, this._getHeader('day'), index$1.h("div", { class: 'grid grid-cols-7 justify-between gap-1' }, this._weekDays.map(weekday => (index$1.h("span", { class: 'w-8 text-center text-xs text-black-teal-200' }, index.format(addDays(new Date(2022, 7, 1), weekday), 'eee')))), daysInMonth.map(day => {
+            return day.active ? (index$1.h("p-button", { variant: 'primary', class: cn.cn('w-full', `col-start-${day.offset}`), onClick: () => this._setValue(day.date) }, day.day)) : (index$1.h("time", { class: cn.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 (index$1.h("div", { class: view({ view: 'month' }) }, this._getHeader('month'), index$1.h("div", { class: 'flex flex-wrap items-start gap-2' }, months.map(month => (index$1.h("p-button", { variant: month.active ? 'primary' : 'secondary', disabled: month.disabled, onClick: () => this._setMonth(month.month) }, index.format(setMonth(new Date(), month.month), 'MMMM')))))));
+    }
+    _getYearView() {
+        const years = this._generateYears();
+        return (index$1.h("div", { id: 'view-year', class: view({ view: 'year' }) }, this._getHeader('year'), index$1.h("div", { id: 'items', class: 'grid h-full grid-cols-4 gap-2 overflow-scroll' }, years.map(year => (index$1.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 (index$1.h("div", { class: header({ type }) }, type !== 'year' && (index$1.h("p-button", { variant: 'secondary', iconOnly: true, icon: 'caret', iconRotate: 90, size: 'sm', onClick: () => nextFn(-1), disabled: !this._canSetAmount(nextType, -1) })), index$1.h("div", { class: 'flex gap-2' }, this.mode !== 'year' && (index$1.h("p-button", { variant: 'secondary', size: 'sm', onClick: () => this._changeView('month'), disabled: !this._canChangeView('month'), active: this._view === 'month' && this.mode !== 'month' }, index.format(this._viewDate, 'MMMM'))), index$1.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' && (index$1.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 (!index.isValid(value)) {
+            return;
+        }
+        if (this._isDisabledDay(value)) {
+            return;
+        }
+        value = index.startOfDay(value);
+        const isSameValue = index.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: index.isSameDay(date, this._today),
+                active: index.isSameDay(date, this._value),
+                disabled: this._isDisabledDay(date),
+            };
+        });
+    }
+    _isDisabledDay(day) {
+        return ((index.isBefore(day, this._minDate) && !index.isSameDay(day, this._maxDate)) ||
+            (index.isAfter(day, this._maxDate) && !index.isSameDay(day, this._maxDate)) ||
+            ((getDay(day) === 0 || getDay(day) === 6) && this.disableWeekends) ||
+            this._disabledDates.findIndex(date => index.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: index.isAfter(date, this._maxDate) ||
+                    index.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;
+            }
+            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 ((index.isBefore(startNewDate, startOfMonth(this._minDate)) &&
+                !index.isSameDay(startNewDate, this._minDate)) ||
+                index.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 watchers() { return {
+        "value": ["_parseValue"],
+        "minDate": ["_parseMinDate"],
+        "maxDate": ["_parseMaxDate"],
+        "disabledDates": ["_parseDisabledDates"]
+    }; }
 };
-Calendar.style = calendarComponentCss;
+Calendar.style = PCalendarStyle0;
 
 exports.p_calendar = Calendar;