@rededor/cura 1.0.0-alpha.7 → 1.0.0

package/dist/components/cura-calendar.js

@@ -1,6 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './cura-icon2.js';
-import { d as defineCustomElement$4 } from './cura-label2.js';
+import { d as defineCustomElement$7 } from './cura-button-transparent2.js';
+import { d as defineCustomElement$6 } from './cura-icon2.js';
+import { d as defineCustomElement$5 } from './cura-label2.js';
+import { d as defineCustomElement$4 } from './cura-loader-circle2.js';
 import { d as defineCustomElement$3 } from './cura-select2.js';
 import { d as defineCustomElement$2 } from './cura-select-option2.js';
 
@@ -291,6 +293,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.
  *
@@ -3079,6 +3106,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',
@@ -3518,7 +3569,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);padding:0 12px 12px 12px;min-width:280px;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 .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}";
 const CuraCalendarStyle0 = curaCalendarCss;
 
 const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar extends HTMLElement {
@@ -3530,8 +3581,8 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
         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 = '280px';
         this.mode = 'single';
         this.dateFormat = 'yyyy-MM-dd';
         this.locale = 'pt-BR';
@@ -3540,6 +3591,8 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
         this.enable = [];
         this.defaultDate = [];
         this.limitRange = null;
+        this.disablePassDates = false;
+        this.collapsed = null;
         this.currentDate = new Date();
         this.selectedDates = [];
         this.rangeStart = null;
@@ -3590,6 +3643,9 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
    * @returns {boolean} Whether the date is valid.
    */
     isDateInValidPeriod(date) {
+        if (this.period === null) {
+            return true;
+        }
         return this.period.includes(format(date, this.dateFormat));
     }
     /**
@@ -3617,6 +3673,12 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
      * @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.disable === null)
+            return false;
         return this.isDateInList(this.expandDateRanges(this.disable), date);
     }
     /**
@@ -3626,7 +3688,7 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
      * @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);
     }
@@ -3670,7 +3732,7 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
      */
     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);
     }
@@ -3680,7 +3742,7 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
      * @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);
     }
@@ -3772,11 +3834,38 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
      *
      * @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);
@@ -3831,7 +3920,7 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
     */
     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.
@@ -3905,20 +3994,24 @@ const CuraCalendar$1 = /*@__PURE__*/ proxyCustomElement(class CuraCalendar exten
     }
     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: '49e48240bb1da756c8d4ee8dff554a24b1da8038', style: this.getHostCSSProperties() }, h("div", { key: 'bfa7c4b9362c6a9b3c35639ebb720a3fd2601fa4', class: "calendar", style: this.styles }, h("header", { key: 'aa6803cb2bf8b6f7b58cdd9796921aadfc40abca', class: "header" }, h("div", { key: 'efa9f7c0598677defca5f31220e3b1f0dbc16037', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: '759a409d176a47c44be9615bf342d8a6d296ded6', 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", { 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: '650919445aa94fd26b9605da79dbaa1950652c0d', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", color: "primary-base", onClick: !this.collapsed ? () => this.updateCurrentMonth('next') : () => this.updateCurrentWeek('next') }))), h("span", { key: '3934dec68753250503976b462b6589327b7be613', 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: '47e46d363c972877b97889c3c5756c14d42046de', 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)));
     }
     static get style() { return CuraCalendarStyle0; }
 }, [1, "cura-calendar", {
         "period": [513],
         "width": [513],
         "mode": [513],
-        "dateFormat": [513, "date-format"],
+        "dateFormat": [1537, "date-format"],
         "locale": [513],
         "type": [513],
         "disable": [16],
         "enable": [16],
         "defaultDate": [16],
         "limitRange": [514, "limit-range"],
+        "disablePassDates": [1540, "disable-pass-dates"],
+        "collapsed": [1540],
         "currentDate": [32],
         "selectedDates": [32],
         "rangeStart": [32],
@@ -3931,19 +4024,29 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["cura-calendar", "cura-icon", "cura-label", "cura-select", "cura-select-option"];
+    const components = ["cura-calendar", "cura-button-transparent", "cura-icon", "cura-label", "cura-loader-circle", "cura-select", "cura-select-option"];
     components.forEach(tagName => { switch (tagName) {
         case "cura-calendar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CuraCalendar$1);
             }
             break;
+        case "cura-button-transparent":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
         case "cura-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "cura-loader-circle":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }