@rededor/cura 2.0.0-alpha.13 → 2.0.0-alpha.16

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

@@ -121,7 +121,7 @@ export class CuraStepper {
         return (h("div", { class: "container", style: this.styles }, h("div", { class: "stepper-list" }, this.stepList.map((step, stepIndex) => this.renderStep(step, stepIndex)))));
     }
     render() {
-        return h(Host, { key: '6593f8a294abd6f729cbf493e3a773f358c10cf7' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
+        return h(Host, { key: '34f5acc0bded7a19276667cbdb84e0617232d73b' }, this.variant === 'default' ? this.renderStepper() : this.renderCompactStepper());
     }
     static get is() { return "cura-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: 'c65f4295ed41485cdeb992dc29a76b4aeef87a39', role: "alert", "aria-live": "polite", "aria-atomic": "true", "aria-label": this.label }, h("div", { key: '62ec0a3170f862d0634df42ac4ccf0708c80fa32', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'bdb68633080a0032c4fdc2f3bb53a668e5b8ab1b', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: '42516aa76455a7b2c7e96613d6e0f38d8f9fbfba', class: "content" }, h("cura-heading", { key: '07402cf186ed3626248d682239b1105378dc2ae6', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'f8239bb5c4ca52e3ce55cc50fab46bd45440e2ee', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'd0491202942530967ddb5d34ecf1333975c8dda0' })), h("slot", { key: '3024563fbc18c2b4a4954849f74014b0be6b34ee', name: "actions" })), this.closeButton && h("cura-icon", { key: '20b315655b9d8ff4ddfc6c2cec6ebc8981f64643', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: 'a81f9da8704799af13009fa046b58e9d6eeb453c', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '3ed410c2082acf963a9bc034ba0698d3d5a8c05e', role: "alert", "aria-live": "polite", "aria-atomic": "true", "aria-label": this.label }, h("div", { key: '7da959ad2aa5d8b57e509bfc5c1241cfe2aab078', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'f88bbe2ad57d6d5a2cdd707a753fe6a37d2fb13a', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'b6d1cf4f6d5cd42b331f19c7996f3de36c29f09e', class: "content" }, h("cura-heading", { key: 'ab72f2ffea1f653cd956c5ac1b1c80a053e07673', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '29e40bf6759c4a2c53beed9028d4d4a5472c8d1d', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'b76073439ef46c084eb681a1639d3644b862db00' })), h("slot", { key: 'a5d6b28128d692d84990654e5b74c13c91f1fcb5', name: "actions" })), this.closeButton && h("cura-icon", { key: 'bd46e61b4280815f9cb8a683838cceda7b3349c1', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: 'bffd92fb6e1c162ff5ead3d3fa84168ef80ca240', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

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

@@ -24,7 +24,7 @@ export class CuraTooltip {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '655c6aae9efc3aad790c6a45a7192ef01baeac97', role: "tooltip", id: this.elementId }, h("div", { key: 'c552ffd20262eed5e71f4cd93c078852cc52c1ca', class: "container", style: this.styles }, h("div", { key: '110f11205496428b674431e1b2bc8c3f95f9397a', class: "content" }, h("cura-heading", { key: 'd2a0caf6a338c9c0b839ea8671c6d524b943ca86', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'bd7addb352119fead424151294e01eae111915e2', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '2323f1af541803e16caa042e9969953557a28976' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '92a672d383b057c53ce1771bea1ff9374a9a50a7', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: 'a31de7e78e092b4fbf6b0e0b85c0c664399081a0', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
+        return (h(Host, { key: '721cf76abdc6eb079edbc8540d2deaa74559c809', role: "tooltip", id: this.elementId }, h("div", { key: '51c94531a0d28de3844ac109f0b941062b17c013', class: "container", style: this.styles }, h("div", { key: 'b80521a83e983ba8939fb21183570de5dfacf544', class: "content" }, h("cura-heading", { key: 'fc16d66d76800d5c8b778bea1cf325d1ce500f72', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: '1e0bd7fcbec98be145c83ef8cfa62e2b8e40211c', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '4c4509441c4aa22b3810e1b66939e4cea05f48aa' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '35910c2bb5122c25f10c38ed90c5c633daeb7891', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '1cec8c66efb24e8eda4e09354dd335e03abd99ed', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
     }
     componentDidLoad() {
         var _a, _b, _c, _d, _e;

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js

@@ -202,7 +202,7 @@ export class CuraCheckbox {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: '2e951be46f80c67ea87aaf1c613e29ae7a1cc856', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: '341a30934dd6660b03e6be161999fad24fb005ef', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '58f32f6b047d19b8af2468b6007cf2dfb1297476', class: "info" }, h("div", { key: 'e23407390368c638e4e8cd9119ad3ccd1767d861', class: "label-wrapper" }, h("cura-label", { key: 'd7ce7b39441203e9058b0227edbfc75dd320806f', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: '0684b9ab1f517083bc681bd0731aedf6d38c9873', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: '499419ee720a7c7ba7e42fc8fcebccfb4e0b0c42', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '7c9637fa4a8082f6451851452db1b751218a20ec' }))), h("div", { key: '91b0a1f42d65d72aca24ff8a852d3c6f461a9cb7', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '4f1db30730b2d68d3d0f3036fd5924a9da1b541b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '9236b8f9d487c042e00800a624e1b729e36b296d', role: "checkbox", "aria-checked": this.checked, "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: '4472e8ee4fa4d1ea6c6f4cf9ba347acc66f7df2a', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '1c74e35fbfbcfcbe113edcd5522e674d197b2212', class: "info" }, h("div", { key: '75e7fdf6050f38473379fb3e4a5880f9eb34e88e', class: "label-wrapper" }, h("cura-label", { key: 'eeac634dd87a72922c0d89e1877d0e0b132e6cd9', textOverflow: this.overflowLabel, class: `label${this.overflowLabel === 'single' ? ' textoverflow-single' : ''}`, weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && (h("cura-paragraph", { key: '7d590fd046c2ba90dbef7846f51a774d50418ca7', lineHeight: "0%", marginBlock: "0", color: "error-base" }, "*", ' '))), h("cura-label", { key: 'f7c750b3d3ce6afaaba514ac835ceed38674a048', textOverflow: this.overflowHelper, color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'd83d9f24b5a5274233e61256add788bfa2ee0f92' }))), h("div", { key: '3f67839bbbf8a583d41765a2a6450c71f5063066', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: 'ab742442fc98838433f6db949478bef6ee2e0d45', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get is() { return "cura-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-input-date/cura-input-date.js

@@ -180,7 +180,7 @@ export class CuraInputDate {
         }
     }
     render() {
-        return (h(Host, { key: 'a274509eede61a43a6677fbf20dc4645c745d41d' }, h("div", { key: '857056581ab374e280ab442aecc49d6b93a21cd2', class: "container", style: this.styles }, h("cura-input-text", { key: '417fd4a96ea71a747f7fee55e7a5b524c6b51ef5', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
+        return (h(Host, { key: 'fe506eeb9ca1193994e8988f59f7d39aa09afb7c' }, h("div", { key: '33b50ee8b32c70855ec061a0fb9747203f473a62', class: "container", style: this.styles }, h("cura-input-text", { key: '8c3d0254c3b6dcd0b24a5c5a27e1b4aeda4c83df', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
     }
     static get is() { return "cura-input-date"; }
     static get encapsulation() { return "shadow"; }

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);
+}