blip-ds 1.198.2 → 1.200.0

package/dist/collection/components/input-editable/input-editable.css

@@ -16,6 +16,273 @@
 /**
  * Define media query values
  */
+/** Customs */
+/** Animations */
+/** Aligns */
+/** Scoll Bar */
+.element_input {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  flex: 1;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+.element_input input {
+  box-shadow: inherit;
+}
+.element_input input::placeholder {
+  color: #b9cbd3;
+  opacity: 1;
+}
+.element_input input::-webkit-input-placeholder {
+  color: #b9cbd3;
+  opacity: 1;
+}
+
+.input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 4px 9px 12px;
+  flex: 1;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  background: #ffffff;
+}
+.input--state-primary {
+  border: 1px solid #d2dfe6;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-primary:hover {
+  border: 1px solid #3f7de8;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-primary.input--pressed {
+  border: 1px solid #3f7de8;
+  box-sizing: border-box;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 0 0 2px rgba(63, 125, 232, 0.4);
+  box-shadow: 0 0 0 2px rgba(63, 125, 232, 0.4);
+}
+.input--state-primary .input__icon {
+  color: #3f7de8;
+  background-color: #e8f2ff;
+}
+.input--state-primary .input__container__label {
+  color: #8ca0b3;
+}
+.input--state-primary .input__container__label--pressed {
+  color: #3f7de8;
+}
+.input--state-primary .input__container__text {
+  caret-color: #3f7de8;
+  color: #202c44;
+}
+.input--state-danger {
+  border: 1px solid #ff4c4c;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-danger:hover {
+  border: 1px solid #ff4c4c;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-danger.input--pressed {
+  border: 1px solid #ff4c4c;
+  box-sizing: border-box;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 0 0 2px #ffa5a5;
+  box-shadow: 0 0 0 2px #ffa5a5;
+}
+.input--state-danger .input__icon {
+  color: #ff4c4c;
+  background-color: #ffa5a5;
+}
+.input--state-danger .input__container__label {
+  color: #8ca0b3;
+}
+.input--state-danger .input__container__label--pressed {
+  color: #ff4c4c;
+}
+.input--state-danger .input__container__text {
+  caret-color: #ff4c4c;
+  color: #202c44;
+}
+.input--state-disabled {
+  cursor: not-allowed;
+  border: 1px solid #e7edf4;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: #f3f6fa;
+}
+.input--state-disabled:hover {
+  border: 1px solid #b9cbd3;
+  box-sizing: border-box;
+  border-radius: 8px;
+  border: 1px solid #e7edf4;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-disabled.input--pressed {
+  border: 1px solid #b9cbd3;
+  box-sizing: border-box;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 0 0 2px #e7edf4;
+  box-shadow: 0 0 0 2px #e7edf4;
+}
+.input--state-disabled .input__icon {
+  color: #b9cbd3;
+  background-color: #f8fbfb;
+}
+.input--state-disabled .input__container__label {
+  color: #b9cbd3;
+}
+.input--state-disabled .input__container__label--pressed {
+  color: #b9cbd3;
+}
+.input--state-disabled .input__container__text {
+  caret-color: #b9cbd3;
+  color: #b9cbd3;
+}
+.input--label {
+  padding: 7px 4px 8px 12px;
+}
+.input__icon {
+  cursor: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  margin-right: 8px;
+  padding: 2.5px;
+}
+.input__icon--large {
+  padding: 4px;
+}
+.input__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+.input__container__wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.input__container__wrapper__chips {
+  display: inline;
+  max-height: 100px;
+  overflow: auto;
+}
+.input__container__wrapper__chips::-webkit-scrollbar {
+  width: 16px;
+  background-color: transparent;
+}
+.input__container__wrapper__chips::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  border: 4px solid transparent;
+  border-radius: 10px;
+  background-clip: content-box;
+  background-color: #b9cbd3;
+}
+.input__container__label {
+  display: flex;
+  align-items: center;
+}
+.input__container__text {
+  display: inline-block;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  width: auto;
+  vertical-align: middle;
+  white-space: normal;
+  line-height: inherit;
+  background: none;
+  /* Browsers have different default form fonts */
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  /* Make webkit render the search input like a normal text field */
+  /* Turn off the recent search for webkit. It adds about 15px padding on the left */
+  /* Fix IE7 display bug */
+  font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
+  font-size: 0.875rem;
+  line-height: 150%;
+  resize: none;
+  cursor: inherit;
+}
+.input__container__text:focus {
+  outline: 0;
+}
+.input__container__text::-webkit-file-upload-button {
+  padding: 0;
+  border: 0;
+  background: none;
+}
+.input__container__text:focus {
+  outline: 0;
+}
+.input__container__text[type=checkbox], .input__container__text[type=radio] {
+  width: 13px;
+  height: 13px;
+}
+.input__container__text[type=search] {
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
+}
+::-webkit-search-decoration {
+  display: none;
+}
+
+.input__container__text[type=reset], .input__container__text[type=button], .input__container__text[type=submit] {
+  overflow: visible;
+}
+.input__container__text::-webkit-scrollbar {
+  width: 16px;
+  background-color: transparent;
+}
+.input__container__text::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  border: 4px solid transparent;
+  border-radius: 10px;
+  background-clip: content-box;
+  background-color: #b9cbd3;
+}
+.input__message {
+  display: flex;
+  align-items: baseline;
+  height: 20px;
+  margin: 3.7px 2.5px;
+  transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: #8ca0b3;
+  word-break: break-word;
+  height: auto;
+  min-height: 20px;
+}
+.input__message bds-typo {
+  margin-top: 0px;
+  align-self: self-start;
+}
+.input__message__icon {
+  display: flex;
+  padding-right: 4px;
+  margin-top: 0px;
+  padding-top: 2px;
+}
+.input__message--danger {
+  color: #ff4c4c;
+}
+
 .input__editable {
   display: block;
 }
@@ -48,32 +315,32 @@
   display: flex;
   align-items: flex-start;
 }
-.input__editable--active bds-input {
+.input__editable--active .element_input {
   min-width: 120px;
   margin-right: 4px;
 }
-.input__editable--active bds-input.expanded {
+.input__editable--active .element_input.expanded {
   max-width: 100%;
 }
-.input__editable--active bds-input.fixed {
+.input__editable--active .element_input.fixed {
   max-width: 140px;
 }
-.input__editable--active bds-input.short::part(input) {
+.input__editable--active .element_input.short input {
   font-size: 1rem;
   line-height: 0px;
 }
-.input__editable--active bds-input.standard::part(input) {
+.input__editable--active .element_input.standard input {
   font-size: 1.5rem;
   line-height: 0px;
 }
-.input__editable--active bds-input.tall::part(input) {
+.input__editable--active .element_input.tall input {
   font-size: 2.5rem;
   line-height: 0px;
 }
-.input__editable--active bds-input::part(input-container) {
+.input__editable--active .element_input::part(input-container) {
   padding: 4px 4px 5px 12px;
 }
-.input__editable--active bds-input::part(input__message) {
+.input__editable--active .element_input::part(input__message) {
   min-width: 180px;
 }
 .input__editable--active bds-icon {

package/dist/collection/components/input-editable/input-editable.js

@@ -1,6 +1,30 @@
 import { Component, Prop, State, Event, Element, h, Host } from '@stencil/core';
 export class InputEditable {
   constructor() {
+    /**
+     * Conditions the element to say whether it is pressed or not, to add styles.
+     */
+    this.isEditing = false;
+    /**
+     * Used to block the confirm icon.
+     */
+    this.isValid = true;
+    /**
+     * Used to validate it is pressed.
+     */
+    this.isPressed = false;
+    /**
+     * Used to validate it is focused.
+     */
+    this.isFocused = false;
+    /**
+     * Used to set the error message setted by the internal validators
+     */
+    this.validationMesage = '';
+    /**
+     * Used to set the danger behavior by the internal validators
+     */
+    this.validationDanger = false;
     /**
      * Set the component size. Can be one of:
      * 'short' | 'standard' | 'tall';
@@ -14,14 +38,6 @@ export class InputEditable {
      * Data test is the prop to specifically test the component action object.
      */
     this.dataTest = null;
-    /**
-     * Conditions the element to say whether it is pressed or not, to add styles.
-     */
-    this.isEditing = false;
-    /**
-     * Used to block the confirm icon.
-     */
-    this.isValid = true;
     /**
      * Input Name
      */
@@ -42,20 +58,14 @@ export class InputEditable {
      * Indicated to pass a help to the user in complex filling.
      */
     this.helperMessage = '';
+    /**
+     * Placeholder for native input element.
+     */
+    this.placeholder = '';
     /**
      * Add state danger on input, use for use feedback. If true avoid save confirmation.
      */
     this.danger = false;
-    this.onInputChange = (event) => {
-      if (event.detail) {
-        if (event.detail.value.length < Number(this.minlength)) {
-          this.isValid = false;
-        }
-        else {
-          this.isValid = true;
-        }
-      }
-    };
     this.handleEditing = () => {
       this.toggleEditing();
     };
@@ -63,13 +73,44 @@ export class InputEditable {
       this.isEditing = !this.isEditing;
     };
     this.handleSaveText = () => {
-      const newValue = this.el.shadowRoot.querySelector('bds-input').value;
+      const newValue = this.nativeInput.value;
       if (newValue.length > 0 && newValue.length >= this.minlength && !this.danger) {
         this.bdsInputEditableSave.emit({ value: newValue, oldValue: this.value });
         this.value = newValue;
         this.toggleEditing();
       }
     };
+    this.changedInputValue = async (ev) => {
+      const input = ev.target;
+      this.checkValidity();
+      if (input) {
+        this.value = input.value || '';
+        if (input.value.length < Number(this.minlength)) {
+          this.isValid = false;
+        }
+        else {
+          this.isValid = true;
+        }
+      }
+      this.bdsInput.emit(ev);
+      this.bdsChange.emit({ value: this.nativeInput.value, oldValue: this.value });
+    };
+    this.onFocus = () => {
+      this.isFocused = true;
+      this.isPressed = true;
+      this.bdsFocus.emit();
+    };
+    this.onBlur = () => {
+      this.onBlurValidations();
+      this.bdsBlur.emit();
+      this.isPressed = false;
+    };
+    this.onClickWrapper = () => {
+      this.onFocus();
+      if (this.nativeInput) {
+        this.nativeInput.focus();
+      }
+    };
     this.getExpand = () => {
       if (this.expand) {
         return 'expanded';
@@ -79,6 +120,33 @@ export class InputEditable {
       }
     };
   }
+  onBlurValidations() {
+    this.requiredValidation();
+    (this.minlength || this.maxlength) && this.lengthValidation();
+    this.checkValidity();
+  }
+  requiredValidation() {
+    if (this.nativeInput.validity.valueMissing) {
+      this.validationMesage = this.requiredErrorMessage;
+      this.validationDanger = true;
+    }
+  }
+  lengthValidation() {
+    if (this.nativeInput.validity.tooShort) {
+      this.validationMesage = this.minlengthErrorMessage;
+      this.validationDanger = true;
+      return;
+    }
+    if (this.nativeInput.validity.tooLong) {
+      this.validationDanger = true;
+      return;
+    }
+  }
+  checkValidity() {
+    if (this.nativeInput.validity.valid) {
+      this.validationDanger = false;
+    }
+  }
   getFontSizeClass() {
     if (this.size == 'short') {
       return 'fs-16';
@@ -93,6 +161,20 @@ export class InputEditable {
       return 'fs-24';
     }
   }
+  renderMessage() {
+    const icon = this.danger ? 'error' : 'info';
+    let message = this.danger ? this.errorMessage : this.helperMessage;
+    if (!message && this.validationDanger)
+      message = this.validationMesage;
+    const styles = this.danger || this.validationDanger ? 'input__message input__message--danger' : 'input__message';
+    if (message) {
+      return (h("div", { class: styles, part: "input__message" },
+        h("div", { class: "input__message__icon" },
+          h("bds-icon", { size: "x-small", name: icon, theme: "solid", color: "inherit" })),
+        h("bds-typo", { variant: "fs-12" }, message)));
+    }
+    return undefined;
+  }
   render() {
     const variant = this.getFontSizeClass();
     const inputExpand = this.getExpand();
@@ -102,7 +184,17 @@ export class InputEditable {
           h("bds-typo", { tag: "span", part: "input__editable--static__typo", class: "input__editable--static__typo", variant: variant }, this.value),
           h("bds-icon", { key: "edit-icon", class: "input__editable--static__icon", name: "edit" })),
         h("div", { class: { 'input__editable--active': true, 'input__editable--hidden': !this.isEditing } },
-          h("bds-input", { class: { [inputExpand]: true, [this.size]: true }, type: "text", "input-name": this.inputName, value: this.value, minlength: this.minlength, minlengthErrorMessage: this.minlengthErrorMessage, maxlength: this.maxlength, required: true, "required-error-message": this.requiredErrorMessage, "error-message": this.errorMessage, onBdsChange: this.onInputChange, danger: this.danger, helperMessage: this.helperMessage, "data-test": this.dataTest }),
+          h("div", { class: { element_input: true, [inputExpand]: true, [this.size]: true } },
+            h("div", { class: {
+                input: true,
+                select: true,
+                'input--state-primary': !this.danger && !this.validationDanger,
+                'input--state-danger': this.danger || this.validationDanger,
+                'input--pressed': this.isPressed,
+              }, onClick: this.onClickWrapper },
+              h("div", { class: "input__container", tabindex: "0" },
+                h("input", { class: { input__container__text: true }, ref: (input) => (this.nativeInput = input), minLength: this.minlength, maxLength: this.maxlength, name: this.inputName, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.changedInputValue, placeholder: this.placeholder, value: this.value, required: true, part: "input", "data-test": this.dataTest }))),
+            this.renderMessage()),
           h("div", { class: "input__editable--active__icon" },
             h("bds-icon", { key: "error-icon", class: "input__editable--active__icon--error", theme: "solid", name: "error", onClick: this.handleEditing }),
             h("bds-icon", { key: "checkball-icon", class: {
@@ -318,6 +410,24 @@ export class InputEditable {
       "reflect": false,
       "defaultValue": "''"
     },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Placeholder for native input element."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
     "danger": {
       "type": "boolean",
       "mutable": true,
@@ -339,7 +449,11 @@ export class InputEditable {
   }; }
   static get states() { return {
     "isEditing": {},
-    "isValid": {}
+    "isValid": {},
+    "isPressed": {},
+    "isFocused": {},
+    "validationMesage": {},
+    "validationDanger": {}
   }; }
   static get events() { return [{
       "method": "bdsInputEditableSave",
@@ -360,6 +474,89 @@ export class InputEditable {
           }
         }
       }
+    }, {
+      "method": "bdsChange",
+      "name": "bdsChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the value has changed."
+      },
+      "complexType": {
+        "original": "InputEditableEventDetail",
+        "resolved": "InputEditableEventDetail",
+        "references": {
+          "InputEditableEventDetail": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "bdsInput",
+      "name": "bdsInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the input has changed."
+      },
+      "complexType": {
+        "original": "KeyboardEvent",
+        "resolved": "KeyboardEvent",
+        "references": {
+          "KeyboardEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "bdsCancel",
+      "name": "bdsCancel",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the selection is cancelled."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "bdsFocus",
+      "name": "bdsFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }, {
+      "method": "bdsBlur",
+      "name": "bdsBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select loses focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
 }