@rededor/cura 2.0.0-alpha.14 → 2.0.0-alpha.17

package/dist/collection/components/cura-calendar/cura-calendar.js

@@ -4,7 +4,6 @@ import enAU from "date-fns/locale/en-AU";
 import ptBR from "date-fns/locale/pt-BR";
 export class CuraCalendar {
     constructor() {
-        this.isMounted = false;
         /**
          * Disable component
          *
@@ -346,6 +345,7 @@ export class CuraCalendar {
         if (direction === 'next')
             newMonth = addMonths(this.currentDate, 1);
         this.currentDate = newMonth;
+        this.sendEventChangeDateInView(Boolean(this.collapsed), newMonth);
     }
     /**
      * Handle the month dropdown change.
@@ -356,7 +356,9 @@ export class CuraCalendar {
         const { months } = this.fetchMonthNames();
         const newMonth = event.detail;
         this.selectMonth = newMonth;
-        this.currentDate = new Date(getYear(this.currentDate), months.indexOf(newMonth), 1);
+        const currentDateUpdated = new Date(getYear(this.currentDate), months.indexOf(newMonth), 1);
+        this.currentDate = currentDateUpdated;
+        this.sendEventChangeDateInView(Boolean(this.collapsed), currentDateUpdated);
     }
     /**
      * Handle the year input change.
@@ -366,7 +368,9 @@ export class CuraCalendar {
     onYearDropdownChange(event) {
         const newYear = event.detail;
         this.selectYear = newYear;
-        this.currentDate = new Date(newYear, getMonth(this.currentDate), 1);
+        const currentDateUpdated = new Date(newYear, getMonth(this.currentDate), 1);
+        this.currentDate = currentDateUpdated;
+        this.sendEventChangeDateInView(Boolean(this.collapsed), currentDateUpdated);
     }
     /**
      * Flatten date ranges into individual dates.
@@ -473,10 +477,10 @@ export class CuraCalendar {
         this.collapsed = true;
         return this.fetchDaysOfWeek();
     }
-    fetchDaysOfWeek() {
+    fetchDaysOfWeek(currentDate) {
         const DAYS_IN_CALENDAR_VIEW = 7;
-        const start = startOfWeek(this.currentDate);
-        const end = endOfWeek(this.currentDate);
+        const start = startOfWeek(currentDate || this.currentDate);
+        const end = endOfWeek(currentDate || this.currentDate);
         const daysIncurrentDate = eachDayOfInterval({ start, end });
         return daysIncurrentDate.slice(0, DAYS_IN_CALENDAR_VIEW);
     }
@@ -487,11 +491,12 @@ export class CuraCalendar {
         if (direction === 'next')
             newWeek = addWeeks(this.currentDate, 1);
         this.currentDate = newWeek;
+        this.sendEventChangeDateInView(Boolean(this.collapsed), newWeek);
     }
-    fetchDaysOfMonth() {
+    fetchDaysOfMonth(currentDate) {
         const DAYS_IN_CALENDAR_VIEW = 35;
-        const start = startOfMonth(this.currentDate);
-        const end = endOfMonth(this.currentDate);
+        const start = startOfMonth(currentDate || this.currentDate);
+        const end = endOfMonth(currentDate || this.currentDate);
         const daysIncurrentDate = eachDayOfInterval({ start, end });
         const startWeekDay = getDay(start);
         const prevMonthEnd = endOfMonth(subMonths(start, 1));
@@ -621,10 +626,10 @@ export class CuraCalendar {
             '--color-neutral-purewhite': window.CuraAPI.theme.colors.getColor(`neutral-purewhite`)
         };
     }
-    sendEventChangeDateInView(isCollapsed) {
+    sendEventChangeDateInView(isCollapsed, currentDate) {
         const eventData = {
-            datesInView: isCollapsed ? this.fetchDaysOfWeek() : this.fetchDaysOfMonth(),
-            monthDays: this.fetchDaysOfMonth()
+            datesInView: isCollapsed ? this.fetchDaysOfWeek(currentDate) : this.fetchDaysOfMonth(currentDate),
+            monthDays: this.fetchDaysOfMonth(currentDate)
         };
         this.changeDateInView.emit(eventData);
     }
@@ -644,23 +649,14 @@ export class CuraCalendar {
         }
         this.defaultDates = this.expandDateRanges(newValue);
     }
-    watchDatesInViewChange() {
-        if (!this.isMounted) {
-            return;
-        }
-        this.sendEventChangeDateInView(Boolean(this.collapsed));
-    }
     watchCollapse(isCollapsed) {
-        this.sendEventChangeDateInView(isCollapsed);
-    }
-    componentDidLoad() {
-        this.isMounted = true;
+        this.sendEventChangeDateInView(isCollapsed, this.currentDate);
     }
     render() {
         const { months } = this.fetchMonthNames();
-        return (h(Host, { key: '9667bc4f47b6581724dcc658ce322b375622906a', style: this.getHostCSSProperties() }, h("div", { key: '231bc0e3890949e6696338e386a3db4e9744c5b6', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''} ${this.getDisabledClassModifier()}`, style: this.styles }, h("header", { key: '88357e185b812e45d4632aa20759cf078e51af19', class: "header" }, h("div", { key: '93cf9ecfbce8772e64cdad26090119257f47b77b', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: 'c188f28ca53ffb79ad9d13b1ef7b19ab6d26b10d', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", disabled: this.isDisabled, color: this.determinePrevButtonColor(), onClick: this.handlePrevMonth }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { disabled: this.isDisabled, 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", { disabled: this.isDisabled, 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: !this.isDisabled ? 'neutral-black' : 'neutral-dark', size: "small" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: 'c890a280637b8c50d2b8cb8ac1ab9a685d742cc3', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", disabled: this.isDisabled, color: "primary-base", onClick: this.handleNextMonth }))), h("span", { key: 'fac87075df8335c9ad1464a5dc6caebfbd79cf38', class: "days-of-week" }, this.fetchWeekDays().map(this.renderItemWeekDays)), h("div", { key: 'e3d08f781cb7765f2c74e88ebd040d8dd28e7e9f', class: "dates" }, !this.collapsed
+        return (h(Host, { key: 'ce5e455df204f6d7a8a3a34eba8198d33e1dd798', style: this.getHostCSSProperties() }, h("div", { key: 'b09f8c9ae06a38f0c04022a3c76ca89aed67f694', class: `calendar ${this.floating ? 'floating' : ''} ${this.embedded ? 'embedded' : ''} ${this.getDisabledClassModifier()}`, style: this.styles }, h("header", { key: 'c70bc378b8427424d4128f98b6f39f3a43d18e8b', class: "header" }, h("div", { key: 'cdda360107fd69b8a32e7773dfcb9f94bc63b517', class: `month-year ${this.type === 'dropdown' && 'dropdown'}` }, h("cura-icon", { key: 'a19af085d074aa74ba3a51712ed62228a4244911', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "left", disabled: this.isDisabled, color: this.determinePrevButtonColor(), onClick: this.handlePrevMonth }), this.type === 'dropdown' ? (h("div", { class: "select" }, h("cura-select", { disabled: this.isDisabled, 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", { disabled: this.isDisabled, 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: !this.isDisabled ? 'neutral-black' : 'neutral-dark', size: "small" }, months[getMonth(this.currentDate)].slice(0, 3), ", ", getYear(this.currentDate))), h("cura-icon", { key: '0e9917d69adf95a5f4566d1269738d8ea4a11036', class: `icon ${this.type === 'dropdown' && 'dropdown'}`, name: "right", disabled: this.isDisabled, color: "primary-base", onClick: this.handleNextMonth }))), h("span", { key: 'f5249c9c7ebeae18af57c43bbd988aa7c21b7b04', class: "days-of-week" }, this.fetchWeekDays().map(this.renderItemWeekDays)), h("div", { key: '2465a9c40856462242a80f1fda2abf7dc2648012', 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", { disabled: this.isDisabled, 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, this.isLoading && (h("div", { key: '91af6d390271d126ad380f26a2018e5e06c0f762', class: "loading-container" }, h("cura-loader-circle", { key: '032105471ed76a221fbbc50eac62d52250328d57', color: "primary", size: "large" }), h("slot", { key: '2cb6ce4b2cffc2d4ec704f4ba8fb746d59c1b0a0', name: "loadingMessage" }))))));
+            : 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", { disabled: this.isDisabled, 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, this.isLoading && (h("div", { key: 'fba41e2fd1b743d534f763e690b8eaf8f741f2f4', class: "loading-container" }, h("cura-loader-circle", { key: '9780c689a48c0c6ef2804ba6e9864338dd6a21a9', color: "primary", size: "large" }), h("slot", { key: 'c0e9eee4818991d9fd6ac8322aa183cf574abb65', name: "loadingMessage" }))))));
     }
     static get is() { return "cura-calendar"; }
     static get encapsulation() { return "shadow"; }
@@ -1293,9 +1289,6 @@ export class CuraCalendar {
             }, {
                 "propName": "defaultDate",
                 "methodName": "handleDefaultDateChange"
-            }, {
-                "propName": "currentDate",
-                "methodName": "watchDatesInViewChange"
             }, {
                 "propName": "collapsed",
                 "methodName": "watchCollapse"

package/dist/collection/components/forms/cura-input-textarea/cura-input-textarea.css

@@ -0,0 +1,174 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.required {
+  color: var(--error-base);
+}
+
+.cura-textarea-group {
+  width: 100%;
+  font-family: var(--font-family);
+  text-align: left !important;
+}
+.cura-textarea-group .helper-max-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cura-textarea-group .helper-text {
+  margin-top: 8px;
+  color: var(--neutral-dark);
+}
+.cura-textarea-group .max-length {
+  display: flex;
+}
+.cura-textarea-group cura-label {
+  margin-bottom: 8px;
+}
+.cura-textarea-group .cura-textarea-field {
+  width: 100%;
+  height: 64px;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--neutral-purewhite);
+  border: 2px solid var(--neutral-medium);
+  border-radius: 4px;
+  color: var(--primary-base);
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.cura-textarea-group .cura-textarea-field textarea {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--neutral-dark);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 16px 16px 0px 8px;
+  min-height: 64px;
+  resize: vertical;
+}
+.cura-textarea-group .cura-textarea-field textarea:not(.resizable) {
+  resize: none;
+}
+.cura-textarea-group .cura-textarea-field textarea::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-textarea-group .cura-textarea-field .feedback-icon {
+  padding-left: 16px;
+  padding-top: 16px;
+}
+.cura-textarea-group .cura-textarea-field cura-loader-circle {
+  margin: 0px 12px;
+}
+.cura-textarea-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly) .cura-textarea-field {
+  border-color: var(--neutral-dark);
+}
+.cura-textarea-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly) .cura-textarea-field textarea {
+  color: var(--neutral-dark);
+}
+.cura-textarea-group:hover:not(.disabled):not(.isLoading):not(.success):not(.error):not(.isFocused):not(.readOnly) .cura-textarea-field textarea::placeholder {
+  color: var(--neutral-dark);
+}
+.cura-textarea-group:focus-within .cura-textarea-field {
+  border: 2px solid var(--info-base) !important;
+  background-color: var(--neutral-purewhite);
+  outline: none;
+}
+.cura-textarea-group:focus-within .cura-textarea-field textarea {
+  color: var(--neutral-black) !important;
+}
+.cura-textarea-group.success .cura-textarea-field {
+  border: 2px solid var(--success-dark) !important;
+  background-color: var(--success-lighter) !important;
+}
+.cura-textarea-group.success .cura-textarea-field textarea {
+  color: var(--success-darker) !important;
+}
+.cura-textarea-group.success .cura-textarea-field textarea::placeholder {
+  color: var(--success-darker) !important;
+}
+.cura-textarea-group.error .cura-textarea-field {
+  border: 2px solid var(--error-dark) !important;
+  background-color: var(--error-lighter) !important;
+}
+.cura-textarea-group.error .cura-textarea-field textarea {
+  color: var(--error-darker) !important;
+}
+.cura-textarea-group.error .cura-textarea-field textarea::placeholder {
+  color: var(--error-darker) !important;
+}
+.cura-textarea-group.isLoading {
+  cursor: wait;
+}
+.cura-textarea-group.isLoading .cura-textarea-field {
+  background-color: var(--neutral-white) !important;
+  border: 2px solid var(--primary-base) !important;
+}
+.cura-textarea-group.isLoading .cura-textarea-field textarea {
+  cursor: wait;
+  color: var(--primary-base) !important;
+}
+.cura-textarea-group.isLoading .cura-textarea-field textarea::placeholder {
+  color: var(--primary-base) !important;
+}
+.cura-textarea-group.disabled .cura-textarea-field {
+  background-color: var(--neutral-white);
+  border: 2px solid var(--neutral-base);
+}
+.cura-textarea-group.disabled .cura-textarea-field textarea {
+  color: var(--neutral-medium);
+}
+.cura-textarea-group.disabled .cura-textarea-field textarea::placeholder {
+  color: var(--neutral-medium);
+}
+.cura-textarea-group.readOnly[read-only] .cura-textarea-field {
+  cursor: default;
+}
+.cura-textarea-group.readOnly[read-only] .cura-textarea-field textarea {
+  cursor: default;
+}
+.cura-textarea-group.small .cura-textarea-field {
+  height: 64px;
+}
+.cura-textarea-group.small .cura-textarea-field textarea {
+  font-size: 12px;
+  line-height: 13px;
+  letter-spacing: 0.72px;
+  min-height: 64px;
+}
+.cura-textarea-group.small .helper-text {
+  font-weight: var(--font-weight-regular);
+}
+.cura-textarea-group.medium .cura-textarea-field {
+  height: 64px;
+}
+.cura-textarea-group.medium .cura-textarea-field textarea {
+  font-size: 14px;
+  line-height: 16px;
+  letter-spacing: 0.56px;
+  min-height: 64px;
+}
+.cura-textarea-group.medium .helper-text {
+  font-weight: var(--font-weight-regular);
+}
+.cura-textarea-group.large .cura-textarea-field {
+  height: 64px;
+}
+.cura-textarea-group.large .cura-textarea-field textarea {
+  font-size: 16px;
+  min-height: 64px;
+}
+.cura-textarea-group.large .helper-text {
+  font-weight: var(--font-weight-bold);
+}