@rededor/cura 1.0.0-alpha.8 → 1.1.0

package/dist/esm/cura-calendar.entry.js

@@ -287,6 +287,31 @@ function startOfDay(dirtyDate) {
   return date;
 }
 
+/**
+ * @name addWeeks
+ * @category Week Helpers
+ * @summary Add the specified number of weeks to the given date.
+ *
+ * @description
+ * Add the specified number of week to the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of weeks to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the weeks added
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Add 4 weeks to 1 September 2014:
+ * const result = addWeeks(new Date(2014, 8, 1), 4)
+ * //=> Mon Sep 29 2014 00:00:00
+ */
+function addWeeks(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  var days = amount * 7;
+  return addDays(dirtyDate, days);
+}
+
 /**
  * Days in 1 week.
  *
@@ -3075,6 +3100,30 @@ function subMonths(dirtyDate, dirtyAmount) {
   return addMonths(dirtyDate, -amount);
 }
 
+/**
+ * @name subWeeks
+ * @category Week Helpers
+ * @summary Subtract the specified number of weeks from the given date.
+ *
+ * @description
+ * Subtract the specified number of weeks from the given date.
+ *
+ * @param {Date|Number} date - the date to be changed
+ * @param {Number} amount - the amount of weeks to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.
+ * @returns {Date} the new date with the weeks subtracted
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Subtract 4 weeks from 1 September 2014:
+ * const result = subWeeks(new Date(2014, 8, 1), 4)
+ * //=> Mon Aug 04 2014 00:00:00
+ */
+function subWeeks(dirtyDate, dirtyAmount) {
+  requiredArgs(2, arguments);
+  var amount = toInteger(dirtyAmount);
+  return addWeeks(dirtyDate, -amount);
+}
+
 var dateFormats$1 = {
   full: 'EEEE, d MMMM yyyy',
   long: 'd MMMM yyyy',
@@ -3514,7 +3563,7 @@ var locale = {
 };
 const ptBR = locale;
 
-const curaCalendarCss = ":host{display:block;width:var(--width)}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);padding:0 12px 12px 12px;min-width:300px;border:1px solid var(--neutral-light);border-radius:4px;overflow:hidden;background:#fff;box-shadow:0 4px 8px var(--neutral-light);font-family:var(--font-family)}:host .header{position:relative;padding:12px 0}:host .header::after{content:\"\";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:0px 12px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:\"\";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--accent-base);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}:host .icon:active::before{transform:translate(-50%, -50%) scale(1)}:host .icon:active{transform:scale(1)}:host .date{display:flex;justify-content:center;align-items:center;height:auto;width:14.2857142857%;aspect-ratio:1;font-size:14px;cursor:pointer;position:relative;box-sizing:border-box;text-align:center;flex-shrink:0}:host .date.today{border:2px solid var(--primary-darker);border-radius:50%;color:var(--primary-darker)}:host .date.selected,:host .date.default-dates{color:var(--neutral-black) !important;background:var(--accent-base);border-radius:50%;border:none}:host .date.invalid{color:var(--neutral-dark) !important;cursor:not-allowed}:host .date.invalid:hover{background:none;box-shadow:none}:host .date.valid{color:var(--primary-darker);font-weight:var(--font-weight-bold)}:host .date.range.start{border-radius:50% 0 0 50%;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date.range.interval{border-radius:0;background-color:var(--accent-light);color:var(--neutral-black)}:host .date.range.interval.today{border:none}:host .date.range.end{border-radius:0 50% 50% 0;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date:hover{background:var(--accent-light);border-radius:50%;color:var(--neutral-black)}:host select,:host input{width:60px;font-size:16px;box-shadow:0 2px 2px var(--neutral-black);padding:5px;border-radius:4px;border:1px solid #ccc;background:#f7f7f7}";
+const curaCalendarCss = ":host{display:block;width:var(--width)}:host .calendar{display:flex;flex-direction:column;gap:5px;width:var(--width);min-width:268px;border-radius:4px;overflow:hidden;background:#fff;font-family:var(--font-family)}:host .calendar.embedded{border:2px solid var(--neutral-light);padding:0px 12px 12px 12px}:host .calendar.floating{box-shadow:0 4px 8px var(--neutral-light)}:host .header{position:relative;padding:12px 0}:host .header::after{content:\"\";position:absolute;bottom:0;left:2px;right:2px;border-bottom:2px dotted var(--neutral-light)}:host .month-year{display:flex;padding:12px 8px;justify-content:space-between;align-self:stretch}:host .month-year.dropdown{padding:0%}:host .select{display:flex;padding:7px 10px 0px;justify-content:center;align-items:center;gap:6px;flex:1 0 0}:host .drop-month{display:flex;max-width:118px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .drop-year{display:flex;min-width:80px;max-width:85px;padding:0px;align-items:flex-start;gap:0px;flex:1 0 0}:host .days-of-week{display:flex;height:30px;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0}:host .day{flex:1;text-align:center}:host .dates{display:flex;flex-wrap:wrap;align-items:center;align-self:stretch;gap:0}:host .icon{cursor:pointer;position:relative;overflow:hidden;border-radius:50%}:host .icon.dropdown{margin-top:10px}:host .icon::before{content:\"\";position:absolute;border-radius:50%;top:50%;left:50%;width:20px;height:20px;background:var(--accent-base);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}:host .icon:active::before{transform:translate(-50%, -50%) scale(1)}:host .icon:active{transform:scale(1)}:host .collapsed-container{text-align:center;position:relative;display:flex;align-items:center;justify-content:center;padding-top:10px}:host .collapsed-container::before{content:\"\";position:absolute;bottom:0;top:0;left:2px;right:2px;border-top:2px dotted var(--neutral-light)}:host .date{display:flex;justify-content:center;align-items:center;height:auto;width:14.2857142857%;aspect-ratio:1;font-size:14px;cursor:pointer;position:relative;box-sizing:border-box;text-align:center;flex-shrink:0}:host .date.today{border:2px solid var(--primary-darker);border-radius:50%;color:var(--primary-darker)}:host .date.selected,:host .date.default-dates{color:var(--neutral-black) !important;background:var(--accent-base);border-radius:50%;border:none}:host .date.invalid{color:var(--neutral-dark) !important;cursor:not-allowed}:host .date.invalid:hover{background:none;box-shadow:none}:host .date.valid{color:var(--primary-darker);font-weight:var(--font-weight-bold)}:host .date.range.start{border-radius:50% 0 0 50%;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date.range.interval{border-radius:0;background-color:var(--accent-light);color:var(--neutral-black)}:host .date.range.interval.today{border:none}:host .date.range.end{border-radius:0 50% 50% 0;color:var(--primary-darker) !important;background:var(--accent-base)}:host .date:hover{background:var(--accent-light);border-radius:50%;color:var(--neutral-black)}:host select,:host input{width:60px;font-size:16px;box-shadow:0 2px 2px var(--neutral-black);padding:5px;border-radius:4px;border:1px solid #ccc;background:#f7f7f7}.teste{width:100%}";
 const CuraCalendarStyle0 = curaCalendarCss;
 
 const CuraCalendar = class {
@@ -3524,8 +3573,8 @@ const CuraCalendar = class {
         this.theme = window.CuraAPI.theme;
         this.weights = this.theme.fonts.getWeights();
         this.optionsLocale = { 'pt-BR': ptBR, 'en-US': enAU };
-        this.period = [];
-        this.width = '300px';
+        this.period = null;
+        this.width = '268px';
         this.mode = 'single';
         this.dateFormat = 'yyyy-MM-dd';
         this.locale = 'pt-BR';
@@ -3534,6 +3583,11 @@ const CuraCalendar = class {
         this.enable = [];
         this.defaultDate = [];
         this.limitRange = null;
+        this.disablePassDates = undefined;
+        this.disableFutureDates = undefined;
+        this.collapsed = null;
+        this.floating = undefined;
+        this.embedded = undefined;
         this.currentDate = new Date();
         this.selectedDates = [];
         this.rangeStart = null;
@@ -3584,6 +3638,9 @@ const CuraCalendar = class {
    * @returns {boolean} Whether the date is valid.
    */
     isDateInValidPeriod(date) {
+        if (this.period === null) {
+            return true;
+        }
         return this.period.includes(format(date, this.dateFormat));
     }
     /**
@@ -3611,6 +3668,14 @@ const CuraCalendar = class {
      * @returns {boolean} Whether the date is disabled.
      */
     isDateInDisabledPeriod(date) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        if (this.disablePassDates)
+            return isBefore(date, today);
+        if (this.disableFutureDates)
+            return isAfter(date, today);
+        if (this.disable === null)
+            return false;
         return this.isDateInList(this.expandDateRanges(this.disable), date);
     }
     /**
@@ -3620,7 +3685,7 @@ const CuraCalendar = class {
      * @returns {boolean} Whether the date is enabled.
      */
     isDateInEnabledPeriod(date) {
-        if (this.enable.length === 0)
+        if (this.enable === null || [])
             return true;
         return this.isDateInList(this.expandDateRanges(this.enable), date);
     }
@@ -3664,7 +3729,7 @@ const CuraCalendar = class {
      */
     onMonthDropdownChange(event) {
         const { months } = this.fetchMonthNames();
-        const newMonth = event.detail.value;
+        const newMonth = event.detail;
         this.selectMonth = newMonth;
         this.currentDate = new Date(getYear(this.currentDate), months.indexOf(newMonth), 1);
     }
@@ -3674,7 +3739,7 @@ const CuraCalendar = class {
      * @param {CustomEvent} event - The change event.
      */
     onYearDropdownChange(event) {
-        const newYear = event.detail.value;
+        const newYear = event.detail;
         this.selectYear = newYear;
         this.currentDate = new Date(newYear, getMonth(this.currentDate), 1);
     }
@@ -3766,11 +3831,38 @@ const CuraCalendar = class {
      *
      * @returns {(Date | null)[]} An array of dates and nulls for the current month view.
      */
+    showNotColapsedCalendar() {
+        if (this.collapsed) {
+            this.fetchDaysOfWeek();
+        }
+        else
+            (this.fetchDaysOfMonth());
+        this.collapsed = false;
+    }
+    showColapsedCalendar() {
+        this.collapsed = true;
+        return this.fetchDaysOfWeek();
+    }
+    fetchDaysOfWeek() {
+        const DAYS_IN_CALENDAR_VIEW = 7;
+        const start = startOfWeek(this.currentDate);
+        const end = endOfWeek(this.currentDate);
+        const daysIncurrentDate = eachDayOfInterval({ start, end });
+        return daysIncurrentDate.slice(0, DAYS_IN_CALENDAR_VIEW);
+    }
+    updateCurrentWeek(direction) {
+        let newWeek = new Date(this.currentDate);
+        if (direction === 'prev')
+            newWeek = subWeeks(this.currentDate, 1);
+        if (direction === 'next')
+            newWeek = addWeeks(this.currentDate, 1);
+        this.currentDate = newWeek;
+    }
     fetchDaysOfMonth() {
-        const start = startOfMonth(this.currentDate);
-        const end = endOfMonth(this.currentDate);
         const WEEKS_IN_CALENDAR_VIEW = 6;
         const DAYS_IN_CALENDAR_VIEW = 42;
+        const start = startOfMonth(this.currentDate);
+        const end = endOfMonth(this.currentDate);
         const daysIncurrentDate = eachDayOfInterval({ start, end });
         const prevMonthStart = startOfMonth(addMonths(start, -1));
         const prevMonthEnd = endOfMonth(prevMonthStart);
@@ -3825,7 +3917,7 @@ const CuraCalendar = class {
     */
     determinePrevButtonColor() {
         const isPrevDisabled = isBefore(new Date(getYear(this.currentDate), getMonth(this.currentDate) - 1, 1), startOfMonth(new Date()));
-        return isPrevDisabled ? 'neutral-light' : 'primary-base';
+        return isPrevDisabled && 'primary-base';
     }
     /**
     * Get the status of a given date, determining its position and interval status.
@@ -3899,7 +3991,9 @@ const CuraCalendar = class {
     }
     render() {
         const { months } = this.fetchMonthNames();
-        return (h(Host, { key: '7219f5c7370d5f51eaca3893ee5d9378b3bb9cf5', style: this.getHostCSSProperties() }, h("div", { key: 'c1a1a5f3af3c1f782e8db1b768e4d2c3d00e7cfe', class: "calendar", style: this.styles }, h("header", { key: 'a31b15cb3c58a952476370fe10fd546083e3de13', class: "header" }, h("div", { key: '0f4f3113996c4d43477ef9dbed3f94b54f0f1e18', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: '1aab96a34d0265cf18d54c77d0f874e11e1ebbfc', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: () => this.updateCurrentMonth('prev') }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: (e) => this.onMonthDropdownChange(e) }, months.map((month, index) => (h("cura-select-option", { key: index, value: month }, month)))), h("cura-select", { class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: (e) => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: 'bbf1cabd623f27736c1acb29479f8bd3e4d9d465', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: () => this.updateCurrentMonth('next') }))), h("span", { key: '05eb9071b488607a2e6a40b687a074150382e81e', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: 'bold', key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), h("div", { key: '1a107295063579356f75ee714b712cb265e408eb', class: "dates" }, this.fetchDaysOfMonth().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))))));
+        return (h(Host, { key: 'c35f2925c454310e100ffb51291fe5dd590c67ad', style: this.getHostCSSProperties() }, h("div", { key: 'e2b10e544856cd095735b85102ea7f74daf7312f', class: `calendar ${this.floating ? "floating" : ""} ${this.embedded ? "embedded" : ""}`, style: this.styles }, h("header", { key: '68092a2f7fb49ee40ee318dba69f56a0caf2e4eb', class: "header" }, h("div", { key: '5b29701bbde12a32085818ff85cc45f5cfde8d1c', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: '48ac9b9790f493c4cc8f5ef7b4b54c1c22bd4286', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", color: this.determinePrevButtonColor(), onClick: !this.collapsed ? () => this.updateCurrentMonth('prev') : () => this.updateCurrentWeek('prev') }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { size: 'small', class: "drop-month", mode: "transparent", value: months[getMonth(this.currentDate)], onSelected: (e) => this.onMonthDropdownChange(e) }, months.map((month, index) => (h("cura-select-option", { size: 'xsmall', key: index, value: month }, month)))), h("cura-select", { size: 'small', class: "drop-year", mode: "transparent", value: getYear(this.currentDate).toString(), onSelected: (e) => this.onYearDropdownChange(e) }, this.fetchYearList().map((year, index) => (h("cura-select-option", { key: index, value: year.toString() }, year.toString())))))) : (h("cura-label", { color: "neutral-black", size: "large" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: 'a50ea156b4d7a9e6d25393cf68a65ad72ce3679d', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), h("span", { key: '742f91e5361baba1d4d6d2859276279ad24b0c71', class: "days-of-week" }, this.fetchWeekDays().map((day, index) => (h("cura-label", { class: "day", size: "xsmall", color: "neutral-black", weight: 'bold', key: index }, day === 'sab' ? 'SÁB' : day.toLocaleUpperCase())))), h("div", { key: 'eb753228943697a38d9b96de60a56c74cdfbc1c7', class: "dates" }, !this.collapsed ?
+            this.fetchDaysOfMonth().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : ''))) :
+            this.fetchDaysOfWeek().map((day, index) => (h("div", { key: index, class: this.getClasses(day), onClick: () => this.onDateClick(day) }, day ? format(day, 'd') : '')))), this.collapsed !== null ? (this.collapsed ? (h("div", { class: 'collapsed-container' }, h("cura-button-transparent", { onClick: () => this.showNotColapsedCalendar(), size: 'small', color: 'primary', fontColor: 'dark', iconName: 'plusCircle' }, "Veja mais datas"))) : (h("div", { class: 'collapsed-container' }, h("cura-button-transparent", { onClick: () => this.showColapsedCalendar(), size: 'small', color: 'primary', fontColor: 'dark', iconName: 'minusCircle' }, "Veja menos datas")))) : null)));
     }
 };
 CuraCalendar.style = CuraCalendarStyle0;