@paperless/core 0.1.0-alpha.33 → 0.1.0-alpha.331

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

@@ -0,0 +1,127 @@
+import { h, Host } from '@stencil/core';
+export class Accordion {
+  constructor() {
+    this.header = undefined;
+    this.open = false;
+    this.closeable = true;
+    this.openable = true;
+  }
+  render() {
+    return (h(Host, { class: "p-accordion" }, h("div", { class: "flex items-center gap-3 text-storm-vague cursor-pointer", onClick: () => this._onClick() }, h("p-icon", { class: "flex", variant: "chevron", rotate: this.open ? 0 : -90 }), h("p", { class: "m-0 font-medium text-lg whitespace-nowrap" }, this.header), h("p-divider", null)), this.open && (h("div", { class: "mt-6" }, h("slot", null)))));
+  }
+  _onClick() {
+    if (!this.closeable && this.open) {
+      return;
+    }
+    if (!this.openable && !this.open) {
+      return;
+    }
+    this.open = !this.open;
+    this.isOpen.emit(this.open);
+  }
+  static get is() { return "p-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["accordion.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["accordion.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header of the accordion"
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the accordion is open"
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "closeable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the accordion can be closed"
+        },
+        "attribute": "closeable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "openable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the accordion can be opened"
+        },
+        "attribute": "openable",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "isOpen",
+        "name": "isOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Open change event"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1 @@
+.relative{position:relative!important}.block{display:block!important}.flex{display:flex!important}.grid{display:grid!important}.h-\[12rem\]{height:12rem!important}.h-8{height:2rem!important}.h-6{height:1.5rem!important}.h-auto{height:auto!important}.h-full{height:100%!important}.min-h-\[12rem\]{min-height:12rem!important}.w-\[14rem\]{width:14rem!important}.w-full{width:100%!important}.w-6{width:1.5rem!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))!important}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.bg-indigo-light,.bg-white{--tw-bg-opacity:1!important}.bg-indigo-light{background-color:rgb(241 246 255/var(--tw-bg-opacity))!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-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-indigo,.text-storm{--tw-text-opacity:1!important}.text-indigo{color:rgb(82 138 250/var(--tw-text-opacity))!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));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));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))}:host .header span.year{font-weight:600}:host .header .nav{--tw-text-opacity:1;align-items:center;border-radius:100%;color:rgb(82 138 250/var(--tw-text-opacity));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))}: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));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:100%;box-sizing:border-box;color:rgb(81 83 107/var(--tw-text-opacity));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))}: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));border-color:rgb(241 246 255/var(--tw-border-opacity));color:rgb(82 138 250/var(--tw-text-opacity));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));color:rgb(81 83 107/var(--tw-text-opacity))}: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));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))}: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));border-color:rgb(241 246 255/var(--tw-border-opacity));color:rgb(82 138 250/var(--tw-text-opacity));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))}:host .view-month .items{grid-template-columns:repeat(2,1fr)}:host .view-year .header{justify-content:center}:host(.variant-default){--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13);--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem 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}.blur{--tw-blur:blur(8px)!important}.blur,.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}.visible{visibility:visible!important}.absolute{position:absolute!important}.rotate-0{--tw-rotate:0deg!important}.rotate-0,.rotate-25{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-25{--tw-rotate:25deg!important}.rotate-45{--tw-rotate:45deg!important}.rotate-45,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-90{--tw-rotate:90deg!important}.rotate-135{--tw-rotate:135deg!important}.rotate-135,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-180{--tw-rotate:180deg!important}.rotate-225{--tw-rotate:225deg!important}.rotate-225,.rotate-270{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.rotate-270{--tw-rotate:270deg!important}.rotate-315{--tw-rotate:315deg!important}.-rotate-0,.rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-0{--tw-rotate:-0deg!important}.-rotate-25{--tw-rotate:-25deg!important}.-rotate-25,.-rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-45{--tw-rotate:-45deg!important}.-rotate-90{--tw-rotate:-90deg!important}.-rotate-135,.-rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-135{--tw-rotate:-135deg!important}.-rotate-180{--tw-rotate:-180deg!important}.-rotate-180,.-rotate-225{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-225{--tw-rotate:-225deg!important}.-rotate-270{--tw-rotate:-270deg!important}.-rotate-270,.-rotate-315{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.-rotate-315{--tw-rotate:-315deg!important}.scale-x-flip{--tw-scale-x:-1!important}.scale-x-flip,.scale-y-flip{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.scale-y-flip{--tw-scale-y:-1!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.text-xxs{font-size:.6875rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}.text-base{font-size:1rem!important;line-height:1.5rem!important}.text-lg{font-size:1.125rem!important}.text-lg,.text-xl{line-height:1.75rem!important}.text-xl{font-size:1.25rem!important}.text-2xl{font-size:1.5rem!important;line-height:2rem!important}.text-3xl{font-size:1.875rem!important;line-height:2.25rem!important}.text-4xl{font-size:2.25rem!important;line-height:2.5rem!important}.text-5xl{font-size:3rem!important}.text-5xl,.text-6xl{line-height:1!important}.text-6xl{font-size:3.75rem!important}.ml-2{margin-left:.5rem!important}.items-end{align-items:flex-end!important}.text-negative{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!important}.text-negative-light{--tw-text-opacity:1!important;color:rgb(255 204 211/var(--tw-text-opacity))!important}.hover\:text-negative:hover{--tw-text-opacity:1!important;color:rgb(185 30 40/var(--tw-text-opacity))!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}

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

@@ -0,0 +1,503 @@
+import { h, Host, } from '@stencil/core';
+import { addDays, addMonths, addYears, endOfMonth, format, getDay, getDaysInMonth, getYear, isAfter, isBefore, isSameDay, isSameMonth, isSameYear, isValid, setDate, setMonth, setYear, startOfDay, startOfMonth, } from 'date-fns';
+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;
+    }
+  }
+  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)) {
+      return;
+    }
+    if (this._isDisabledDay(value)) {
+      return;
+    }
+    if (isSameDay(this._value, value)) {
+      return;
+    }
+    this._setValue(value);
+  }
+  _parseMinDate(minDate) {
+    if (typeof minDate === 'string') {
+      minDate = new Date(minDate);
+    }
+    if (!isValid(minDate)) {
+      return;
+    }
+    this._minDate = minDate;
+  }
+  _parseMaxDate(maxDate) {
+    if (typeof maxDate === 'string') {
+      maxDate = new Date(maxDate);
+    }
+    if (!isValid(maxDate)) {
+      return;
+    }
+    this._maxDate = 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.
+     <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: "chevron", 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: "chevron", 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: "chevron", 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: "chevron", 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 (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) ||
+      (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, 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": "\"string\" | Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "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"
+            },
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Disabled dates"
+        },
+        "attribute": "disabled-dates",
+        "reflect": false
+      },
+      "minDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Date | 'string'",
+          "resolved": "\"string\" | Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "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": "\"string\" | Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
+          }
+        },
+        "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": true,
+        "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"
+      }];
+  }
+}

package/dist/collection/components/molecules/content-slider/content-slider.component.css

@@ -0,0 +1 @@
+.absolute{position:absolute!important}.relative{position:relative!important}.mt-3{margin-top:.75rem!important}.flex{display:flex!important}.w-full{width:100%!important}.w-0{width:0!important}.flex-shrink-0{flex-shrink:0!important}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.cursor-grab{cursor:grab!important}.cursor-grabbing{cursor:grabbing!important}.flex-col{flex-direction:column!important}.flex-nowrap{flex-wrap:nowrap!important}.items-center{align-items:center!important}.items-stretch{align-items:stretch!important}.justify-center{justify-content:center!important}.overflow-visible{overflow:visible!important}.p-16{padding:4rem!important}.pt-1{padding-top:.25rem!important}.will-change-transform{will-change:transform!important}*{box-sizing:border-box}:host{display:flex;flex-direction:column;margin:-4rem;overflow:hidden;padding:4rem}:host .slider{box-sizing:content-box;overflow:visible;position:relative}:host .slider.draggable{cursor:grab}@media (min-width:64rem){:host .slider.draggable{cursor:auto}}:host .slider.draggable.dragging{cursor:grabbing}@media (min-width:64rem){:host .slider.draggable.dragging{cursor:auto}}:host .slider.draggable.dragging .inner-slider{transition-property:none}:host .slider .inner-slider{--tw-translate-x:0px;align-items:stretch;display:flex;flex-wrap:nowrap;gap:.5rem;position:absolute;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-duration:.15s;transition-duration:.5s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%;will-change:transform}@media (min-width:64rem){:host .slider .inner-slider{flex-wrap:wrap;gap:1rem}}:host .slider .inner-slider>::slotted(*){flex-shrink:0;position:relative;width:100%;z-index:10}@media (min-width:40rem){:host .slider .inner-slider>::slotted(*){width:calc(50% - .5rem)}}@media (min-width:64rem){:host .slider .inner-slider>::slotted(*){flex:1 1 0%;width:0}}:host .indicator{align-items:center;display:flex;justify-content:center}@media (min-width:64rem){:host .indicator{display:none}}:host .indicator .item{margin-top:.75rem;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}@media (min-width:64rem){.desktop-xs\:hidden{display:none!important}.desktop-xs\:gap-4{gap:1rem!important}}.visible{visibility:visible!important}.static{position:static!important}.hidden{display:none!important}.cursor-pointer{cursor:pointer!important}.resize{resize:both!important}