blip-ds 1.201.0 → 1.202.1

package/dist/blip-ds/bds-input-chips.entry.js

@@ -1,15 +1,29 @@
 import { r as registerInstance, e as createEvent, h, f as Host } from './index-bda47b0f.js';
 import { w as whitespaceValidation, e as emailValidation } from './validations-6d914b78.js';
 
-const inputChipsCss = ".sc-bds-input-chips-h{display:display}.inside-input-left.sc-bds-input-chips{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}.input-chips__chip.sc-bds-input-chips{margin:2px 4px 2px 0px}.input-chips__chips.sc-bds-input-chips{-ms-flex:1;flex:1}";
+const inputChipsCss = ".sc-bds-input-chips-h{display:display}.element_input.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%}.element_input.sc-bds-input-chips input.sc-bds-input-chips{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input.sc-bds-input-chips input.sc-bds-input-chips::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips::placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:8px 4px 9px 12px;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;background:#ffffff}.input--state-primary.sc-bds-input-chips{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.sc-bds-input-chips:hover{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.input--pressed.sc-bds-input-chips{border:1px solid #3f7de8;-webkit-box-sizing:border-box;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.sc-bds-input-chips .input__icon.sc-bds-input-chips{color:#3f7de8;background-color:#e8f2ff}.input--state-primary.sc-bds-input-chips .input__container__label.sc-bds-input-chips{color:#8ca0b3}.input--state-primary.sc-bds-input-chips .input__container__label--pressed.sc-bds-input-chips{color:#3f7de8}.input--state-primary.sc-bds-input-chips .input__container__text.sc-bds-input-chips{caret-color:#3f7de8;color:#202c44}.input--state-danger.sc-bds-input-chips{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.sc-bds-input-chips:hover{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.input--pressed.sc-bds-input-chips{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;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.sc-bds-input-chips .input__icon.sc-bds-input-chips{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger.sc-bds-input-chips .input__container__label.sc-bds-input-chips{color:#8ca0b3}.input--state-danger.sc-bds-input-chips .input__container__label--pressed.sc-bds-input-chips{color:#ff4c4c}.input--state-danger.sc-bds-input-chips .input__container__text.sc-bds-input-chips{caret-color:#ff4c4c;color:#202c44}.input--state-disabled.sc-bds-input-chips{cursor:not-allowed;border:1px solid #e7edf4;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;background:#f3f6fa}.input--state-disabled.sc-bds-input-chips:hover{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7edf4;box-sizing:border-box;border-radius:8px}.input--state-disabled.input--pressed.sc-bds-input-chips{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;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.sc-bds-input-chips .input__icon.sc-bds-input-chips{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled.sc-bds-input-chips .input__container__label.sc-bds-input-chips{color:#b9cbd3}.input--state-disabled.sc-bds-input-chips .input__container__label--pressed.sc-bds-input-chips{color:#b9cbd3}.input--state-disabled.sc-bds-input-chips .input__container__text.sc-bds-input-chips{caret-color:#b9cbd3;color:#b9cbd3}.input--label.sc-bds-input-chips{padding:7px 4px 8px 12px}.input__icon.sc-bds-input-chips{cursor:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;margin-right:8px;padding:2.5px}.input__icon--large.sc-bds-input-chips{padding:4px}.input__container.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__wrapper.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips.sc-bds-input-chips{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips.sc-bds-input-chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips.sc-bds-input-chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__container__label.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text.sc-bds-input-chips{display:inline-block;margin:0;border:0;padding:0;width:auto;vertical-align:middle;white-space:normal;line-height:inherit;background:none;color:inherit;font-size:inherit;font-family:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif;font-size:0.875rem;line-height:150%;resize:none;cursor:inherit}.input__container__text.sc-bds-input-chips:focus{outline:0}.input__container__text.sc-bds-input-chips::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text.sc-bds-input-chips:focus{outline:0}.input__container__text[type=checkbox].sc-bds-input-chips,.input__container__text[type=radio].sc-bds-input-chips{width:13px;height:13px}.input__container__text[type=search].sc-bds-input-chips{-webkit-appearance:textfield;-webkit-box-sizing:content-box}.sc-bds-input-chips::-webkit-search-decoration{display:none}.input__container__text[type=reset].sc-bds-input-chips,.input__container__text[type=button].sc-bds-input-chips,.input__container__text[type=submit].sc-bds-input-chips{overflow:visible}.input__container__text.sc-bds-input-chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text.sc-bds-input-chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__message.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;height:20px;margin:3.7px 2.5px;-webkit-transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);color:#8ca0b3;word-break:break-word;height:auto;min-height:20px}.input__message.sc-bds-input-chips bds-typo.sc-bds-input-chips{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon.sc-bds-input-chips{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger.sc-bds-input-chips{color:#ff4c4c}.inside-input-left.sc-bds-input-chips{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:8px}.input-chips__chip.sc-bds-input-chips{margin:2px 4px 2px 0px}.input-chips__chips.sc-bds-input-chips{-ms-flex:1;flex:1}";
 
 const InputChips = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.bdsChange = createEvent(this, "bdsChange", 7);
     this.bdsChangeChips = createEvent(this, "bdsChangeChips", 7);
+    this.bdsInputChipsFocus = createEvent(this, "bdsInputChipsFocus", 7);
     this.bdsBlur = createEvent(this, "bdsBlur", 7);
+    this.bdsInputChipsInput = createEvent(this, "bdsInputChipsInput", 7);
     this.bdsSubmit = createEvent(this, "bdsSubmit", 7);
+    /**
+     * Used to set the danger behavior by the internal validators
+     */
+    this.validationDanger = false;
+    /**
+     * Conditions the element to say whether it is pressed or not, to add styles.
+     */
+    this.isPressed = false;
+    /**
+     * Used to set the error message setted by the internal validators
+     */
+    this.validationMesage = '';
     this.internalChips = [];
     /**
      * The chips on the component
@@ -74,6 +88,37 @@ const InputChips = class {
      * Data test is the prop to specifically test the component action object.
      */
     this.dataTest = null;
+    this.onClickWrapper = () => {
+      this.onFocus();
+      if (this.nativeInput) {
+        this.nativeInput.focus();
+      }
+    };
+    this.onFocus = () => {
+      this.bdsInputChipsFocus.emit();
+      this.isPressed = true;
+    };
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
+      this.bdsInputChipsInput.emit(ev);
+    };
+    this.keyPressWrapper = (event) => {
+      switch (event.key) {
+        case 'Enter':
+          this.setChip(this.value);
+          this.value = '';
+          break;
+        case 'Backspace' || 'Delete':
+          if ((this.value === null || this.value.length <= 0) && this.internalChips.length) {
+            this.removeLastChip();
+            this.bdsChangeChips.emit({ data: this.internalChips });
+          }
+          break;
+      }
+    };
   }
   /**
    * Call change event before alter chips values.
@@ -122,10 +167,10 @@ const InputChips = class {
     this.setChip(value);
   }
   async setFocus() {
-    this.nativeInput.setFocus();
+    this.nativeInput.focus();
   }
   async removeFocus() {
-    this.nativeInput.removeFocus();
+    this.nativeInput.blur();
   }
   componentWillLoad() {
     this.valueChanged();
@@ -140,25 +185,11 @@ const InputChips = class {
   }
   handleOnBlur() {
     this.bdsBlur.emit(this.internalChips);
-  }
-  handleAddChip(event) {
-    if (this.disableSubmit) {
-      return;
-    }
-    const { detail: { value }, } = event;
-    this.setChip(value);
-    this.value = '';
+    this.isPressed = false;
   }
   getLastChip() {
     return this.internalChips[this.internalChips.length - 1];
   }
-  handleBackRemove(event) {
-    const { detail: { value }, } = event;
-    if ((value === null || value.length <= 0) && this.internalChips.length) {
-      this.removeLastChip();
-      this.bdsChangeChips.emit({ data: this.internalChips, value });
-    }
-  }
   verifyAndSubstituteDelimiters(value) {
     if (value.length === 1 && value[0].match(this.delimiters)) {
       return '';
@@ -227,8 +258,39 @@ const InputChips = class {
       return (h("bds-chip-clickable", { id: id, key: id, color: "default", close: !this.disabled, onChipClickableClose: (event) => this.removeChip(event) }, chip));
     });
   }
+  renderIcon() {
+    return (this.icon && (h("div", { class: {
+        input__icon: true,
+        'input__icon--large': !!this.label,
+      } }, h("bds-icon", { size: this.label ? 'medium' : 'small', name: this.icon, color: "inherit" }))));
+  }
+  renderLabel() {
+    return (this.label && (h("label", { class: {
+        input__container__label: true,
+        'input__container__label--pressed': this.isPressed && !this.disabled,
+      } }, h("bds-typo", { variant: "fs-12", bold: "bold" }, this.label))));
+  }
+  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() {
-    return (h(Host, null, h("bds-input", { ref: (input) => (this.nativeInput = input), icon: this.icon, label: this.label, onBdsKeyDownBackspace: (event) => this.handleBackRemove(event), onBdsSubmit: (event) => this.handleAddChip(event), onBdsOnBlur: () => this.handleOnBlur(), onBdsChange: (event) => this.handleChange(event), maxlength: this.maxlength, value: this.value, "error-message": this.errorMessage, "helper-message": this.helperMessage, "input-name": this.inputName, placeholder: this.placeholder, danger: this.danger, chips: true, disabled: this.disabled, "data-test": this.dataTest }, h("span", { class: "inside-input-left", slot: "inside-input-left" }, this.renderChips()), h("div", { slot: "input-right" }, h("slot", { name: "input-right" })))));
+    const isPressed = this.isPressed && !this.disabled;
+    return (h(Host, null, h("div", { class: { element_input: true }, "aria-disabled": this.disabled ? 'true' : null }, h("div", { class: {
+        input: true,
+        'input--state-primary': !this.danger && !this.validationDanger,
+        'input--state-danger': this.danger || this.validationDanger,
+        'input--state-disabled': this.disabled,
+        'input--label': !!this.label,
+        'input--pressed': isPressed,
+      }, onClick: this.onClickWrapper, onKeyDown: this.keyPressWrapper, part: "input-container" }, this.renderIcon(), h("div", { class: "input__container" }, this.renderLabel(), h("div", { class: { input__container__wrapper: true } }, this.internalChips.length > 0 && h("span", { class: "inside-input-left" }, this.renderChips()), h("input", { ref: (input) => (this.nativeInput = input), class: { input__container__text: true }, name: this.inputName, maxlength: this.maxlength, placeholder: this.placeholder, onInput: this.onInput, onFocus: this.onFocus, onBlur: () => this.handleOnBlur(), onChange: () => this.handleChange, value: this.value, disabled: this.disabled, "data-test": this.dataTest }))), h("slot", { name: "input-right" })), this.renderMessage())));
   }
   static get watchers() { return {
     "chips": ["valueChanged"],

package/dist/blip-ds/bds-input-chips.system.entry.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,n){function r(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,s){function a(t){try{o(n.next(t))}catch(e){s(e)}}function h(t){try{o(n["throw"](t))}catch(e){s(e)}}function o(t){t.done?i(t.value):r(t.value).then(a,h)}o((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},n,r,s,a;return a={next:h(0),throw:h(1),return:h(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function h(t){return function(e){return o([t,e])}}function o(a){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,r&&(s=a[0]&2?r["return"]:a[0]?r["throw"]||((s=r["return"])&&s.call(r),0):r.next)&&!(s=s.call(r,a[1])).done)return s;if(r=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;r=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(s=i.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){i.label=a[1];break}if(a[0]===6&&i.label<s[1]){i.label=s[1];s=a;break}if(s&&i.label<s[2]){i.label=s[2];i.ops.push(a);break}if(s[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(h){a=[6,h];r=0}finally{n=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e,i){if(i||arguments.length===2)for(var n=0,r=e.length,s;n<r;n++){if(s||!(n in e)){if(!s)s=Array.prototype.slice.call(e,0,n);s[n]=e[n]}}return t.concat(s||Array.prototype.slice.call(e))};System.register(["./index-461526c7.system.js","./validations-8d4fb12a.system.js"],(function(t){"use strict";var e,i,n,r,s,a;return{setters:[function(t){e=t.r;i=t.e;n=t.h;r=t.f},function(t){s=t.w;a=t.e}],execute:function(){var h=".sc-bds-input-chips-h{display:display}.inside-input-left.sc-bds-input-chips{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap}.input-chips__chip.sc-bds-input-chips{margin:2px 4px 2px 0px}.input-chips__chips.sc-bds-input-chips{-ms-flex:1;flex:1}";var o=t("bds_input_chips",function(){function t(t){e(this,t);this.bdsChange=i(this,"bdsChange",7);this.bdsChangeChips=i(this,"bdsChangeChips",7);this.bdsBlur=i(this,"bdsBlur",7);this.bdsSubmit=i(this,"bdsSubmit",7);this.internalChips=[];this.chips=[];this.type="text";this.label="";this.icon="";this.delimiters=/,|;/;this.errorMessage="";this.danger=false;this.value="";this.duplicated=false;this.disableSubmit=false;this.disabled=false;this.helperMessage="";this.inputName="";this.placeholder="";this.dataTest=null}t.prototype.valueChanged=function(){if(this.chips){if(typeof this.chips==="string"){try{this.internalChips=JSON.parse(this.chips)}catch(t){this.internalChips=[]}}else{this.internalChips=this.chips}}else{this.internalChips=[]}};t.prototype.internalValueChanged=function(){this.bdsChangeChips.emit({data:this.internalChips,value:this.getLastChip()})};t.prototype.isValid=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.validateChips()]}))}))};t.prototype.get=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.internalChips]}))}))};t.prototype.clear=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.internalChips=[];this.value="";return[2]}))}))};t.prototype.add=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.setChip(t);return[2]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.nativeInput.setFocus();return[2]}))}))};t.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.nativeInput.removeFocus();return[2]}))}))};t.prototype.componentWillLoad=function(){this.valueChanged()};t.prototype.validateChips=function(){var t=this;if(this.type==="email"){return!this.internalChips.some((function(e){return!t.validateChip(e)}))}else{return true}};t.prototype.handleOnBlur=function(){this.bdsBlur.emit(this.internalChips)};t.prototype.handleAddChip=function(t){if(this.disableSubmit){return}var e=t.detail.value;this.setChip(e);this.value=""};t.prototype.getLastChip=function(){return this.internalChips[this.internalChips.length-1]};t.prototype.handleBackRemove=function(t){var e=t.detail.value;if((e===null||e.length<=0)&&this.internalChips.length){this.removeLastChip();this.bdsChangeChips.emit({data:this.internalChips,value:e})}};t.prototype.verifyAndSubstituteDelimiters=function(t){if(t.length===1&&t[0].match(this.delimiters)){return""}var e=t.replace(/;/g,",").replace(/\,+|;+/g,",");if(e[0].match(this.delimiters)){e=e.substring(1)}return e};t.prototype.handleChange=function(t){return __awaiter(this,void 0,void 0,(function(){var e,i,n,r;var s=this;return __generator(this,(function(a){e=t.detail.value;this.value=e?e.trim():"";if(e.length===0)return[2];i=e.match(this.delimiters);if(!i)return[2];n=this.verifyAndSubstituteDelimiters(e);if(!n){this.clearInputValues();return[2]}r=n.split(this.delimiters);r.forEach((function(t){s.setChip(t)}));this.clearInputValues();return[2]}))}))};t.prototype.clearInputValues=function(t){if(t===void 0){t=""}this.nativeInput.value=t;this.value=t};t.prototype.setChip=function(t){if(!this.duplicated){var e=this.internalChips.some((function(e){return e.toLowerCase()===t.toLowerCase()}));if(e)return}if(!s(t)){return}this.internalChips=__spreadArray(__spreadArray([],this.internalChips,true),[t],false)};t.prototype.validateChip=function(t){var e=t.trim();if(this.type==="email"&&a(e)){return false}return true};t.prototype.removeLastChip=function(){this.internalChips=this.internalChips.slice(0,this.internalChips.length-1)};t.prototype.removeChip=function(t){var e=t.detail.id;this.internalChips=this.internalChips.filter((function(t,i){return i.toString()!==e}))};t.prototype.renderChips=function(){var t=this;if(!this.internalChips.length){return[]}return this.internalChips.map((function(e,i){var r=i.toString();return n("bds-chip-clickable",{id:r,key:r,color:"default",close:!t.disabled,onChipClickableClose:function(e){return t.removeChip(e)}},e)}))};t.prototype.render=function(){var t=this;return n(r,null,n("bds-input",{ref:function(e){return t.nativeInput=e},icon:this.icon,label:this.label,onBdsKeyDownBackspace:function(e){return t.handleBackRemove(e)},onBdsSubmit:function(e){return t.handleAddChip(e)},onBdsOnBlur:function(){return t.handleOnBlur()},onBdsChange:function(e){return t.handleChange(e)},maxlength:this.maxlength,value:this.value,"error-message":this.errorMessage,"helper-message":this.helperMessage,"input-name":this.inputName,placeholder:this.placeholder,danger:this.danger,chips:true,disabled:this.disabled,"data-test":this.dataTest},n("span",{class:"inside-input-left",slot:"inside-input-left"},this.renderChips()),n("div",{slot:"input-right"},n("slot",{name:"input-right"}))))};Object.defineProperty(t,"watchers",{get:function(){return{chips:["valueChanged"],internalChips:["internalValueChanged"]}},enumerable:false,configurable:true});return t}());o.style=h}}}));
+var __awaiter=this&&this.__awaiter||function(i,t,e,n){function s(i){return i instanceof e?i:new e((function(t){t(i)}))}return new(e||(e=Promise))((function(e,r){function p(i){try{o(n.next(i))}catch(t){r(t)}}function a(i){try{o(n["throw"](i))}catch(t){r(t)}}function o(i){i.done?e(i.value):s(i.value).then(p,a)}o((n=n.apply(i,t||[])).next())}))};var __generator=this&&this.__generator||function(i,t){var e={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,p;return p={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(p[Symbol.iterator]=function(){return this}),p;function a(i){return function(t){return o([i,t])}}function o(p){if(n)throw new TypeError("Generator is already executing.");while(e)try{if(n=1,s&&(r=p[0]&2?s["return"]:p[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,p[1])).done)return r;if(s=0,r)p=[p[0]&2,r.value];switch(p[0]){case 0:case 1:r=p;break;case 4:e.label++;return{value:p[1],done:false};case 5:e.label++;s=p[1];p=[0];continue;case 7:p=e.ops.pop();e.trys.pop();continue;default:if(!(r=e.trys,r=r.length>0&&r[r.length-1])&&(p[0]===6||p[0]===2)){e=0;continue}if(p[0]===3&&(!r||p[1]>r[0]&&p[1]<r[3])){e.label=p[1];break}if(p[0]===6&&e.label<r[1]){e.label=r[1];r=p;break}if(r&&e.label<r[2]){e.label=r[2];e.ops.push(p);break}if(r[2])e.ops.pop();e.trys.pop();continue}p=t.call(i,e)}catch(a){p=[6,a];s=0}finally{n=r=0}if(p[0]&5)throw p[1];return{value:p[0]?p[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(i,t,e){if(e||arguments.length===2)for(var n=0,s=t.length,r;n<s;n++){if(r||!(n in t)){if(!r)r=Array.prototype.slice.call(t,0,n);r[n]=t[n]}}return i.concat(r||Array.prototype.slice.call(t))};System.register(["./index-461526c7.system.js","./validations-8d4fb12a.system.js"],(function(i){"use strict";var t,e,n,s,r,p;return{setters:[function(i){t=i.r;e=i.e;n=i.h;s=i.f},function(i){r=i.w;p=i.e}],execute:function(){var a='.sc-bds-input-chips-h{display:display}.element_input.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%}.element_input.sc-bds-input-chips input.sc-bds-input-chips{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input.sc-bds-input-chips input.sc-bds-input-chips::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips::placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-chips input.sc-bds-input-chips::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:8px 4px 9px 12px;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;background:#ffffff}.input--state-primary.sc-bds-input-chips{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.sc-bds-input-chips:hover{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.input--pressed.sc-bds-input-chips{border:1px solid #3f7de8;-webkit-box-sizing:border-box;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.sc-bds-input-chips .input__icon.sc-bds-input-chips{color:#3f7de8;background-color:#e8f2ff}.input--state-primary.sc-bds-input-chips .input__container__label.sc-bds-input-chips{color:#8ca0b3}.input--state-primary.sc-bds-input-chips .input__container__label--pressed.sc-bds-input-chips{color:#3f7de8}.input--state-primary.sc-bds-input-chips .input__container__text.sc-bds-input-chips{caret-color:#3f7de8;color:#202c44}.input--state-danger.sc-bds-input-chips{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.sc-bds-input-chips:hover{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.input--pressed.sc-bds-input-chips{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;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.sc-bds-input-chips .input__icon.sc-bds-input-chips{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger.sc-bds-input-chips .input__container__label.sc-bds-input-chips{color:#8ca0b3}.input--state-danger.sc-bds-input-chips .input__container__label--pressed.sc-bds-input-chips{color:#ff4c4c}.input--state-danger.sc-bds-input-chips .input__container__text.sc-bds-input-chips{caret-color:#ff4c4c;color:#202c44}.input--state-disabled.sc-bds-input-chips{cursor:not-allowed;border:1px solid #e7edf4;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;background:#f3f6fa}.input--state-disabled.sc-bds-input-chips:hover{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;border:1px solid #e7edf4;box-sizing:border-box;border-radius:8px}.input--state-disabled.input--pressed.sc-bds-input-chips{border:1px solid #b9cbd3;-webkit-box-sizing:border-box;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.sc-bds-input-chips .input__icon.sc-bds-input-chips{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled.sc-bds-input-chips .input__container__label.sc-bds-input-chips{color:#b9cbd3}.input--state-disabled.sc-bds-input-chips .input__container__label--pressed.sc-bds-input-chips{color:#b9cbd3}.input--state-disabled.sc-bds-input-chips .input__container__text.sc-bds-input-chips{caret-color:#b9cbd3;color:#b9cbd3}.input--label.sc-bds-input-chips{padding:7px 4px 8px 12px}.input__icon.sc-bds-input-chips{cursor:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:8px;margin-right:8px;padding:2.5px}.input__icon--large.sc-bds-input-chips{padding:4px}.input__container.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__wrapper.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips.sc-bds-input-chips{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips.sc-bds-input-chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips.sc-bds-input-chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__container__label.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text.sc-bds-input-chips{display:inline-block;margin:0;border:0;padding:0;width:auto;vertical-align:middle;white-space:normal;line-height:inherit;background:none;color:inherit;font-size:inherit;font-family:inherit;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;font-family:"Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;font-size:0.875rem;line-height:150%;resize:none;cursor:inherit}.input__container__text.sc-bds-input-chips:focus{outline:0}.input__container__text.sc-bds-input-chips::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text.sc-bds-input-chips:focus{outline:0}.input__container__text[type=checkbox].sc-bds-input-chips,.input__container__text[type=radio].sc-bds-input-chips{width:13px;height:13px}.input__container__text[type=search].sc-bds-input-chips{-webkit-appearance:textfield;-webkit-box-sizing:content-box}.sc-bds-input-chips::-webkit-search-decoration{display:none}.input__container__text[type=reset].sc-bds-input-chips,.input__container__text[type=button].sc-bds-input-chips,.input__container__text[type=submit].sc-bds-input-chips{overflow:visible}.input__container__text.sc-bds-input-chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text.sc-bds-input-chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.input__message.sc-bds-input-chips{display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;height:20px;margin:3.7px 2.5px;-webkit-transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);color:#8ca0b3;word-break:break-word;height:auto;min-height:20px}.input__message.sc-bds-input-chips bds-typo.sc-bds-input-chips{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon.sc-bds-input-chips{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger.sc-bds-input-chips{color:#ff4c4c}.inside-input-left.sc-bds-input-chips{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:8px}.input-chips__chip.sc-bds-input-chips{margin:2px 4px 2px 0px}.input-chips__chips.sc-bds-input-chips{-ms-flex:1;flex:1}';var o=i("bds_input_chips",function(){function i(i){var n=this;t(this,i);this.bdsChange=e(this,"bdsChange",7);this.bdsChangeChips=e(this,"bdsChangeChips",7);this.bdsInputChipsFocus=e(this,"bdsInputChipsFocus",7);this.bdsBlur=e(this,"bdsBlur",7);this.bdsInputChipsInput=e(this,"bdsInputChipsInput",7);this.bdsSubmit=e(this,"bdsSubmit",7);this.validationDanger=false;this.isPressed=false;this.validationMesage="";this.internalChips=[];this.chips=[];this.type="text";this.label="";this.icon="";this.delimiters=/,|;/;this.errorMessage="";this.danger=false;this.value="";this.duplicated=false;this.disableSubmit=false;this.disabled=false;this.helperMessage="";this.inputName="";this.placeholder="";this.dataTest=null;this.onClickWrapper=function(){n.onFocus();if(n.nativeInput){n.nativeInput.focus()}};this.onFocus=function(){n.bdsInputChipsFocus.emit();n.isPressed=true};this.onInput=function(i){var t=i.target;if(t){n.value=t.value||""}n.bdsInputChipsInput.emit(i)};this.keyPressWrapper=function(i){switch(i.key){case"Enter":n.setChip(n.value);n.value="";break;case"Backspace"||"Delete":if((n.value===null||n.value.length<=0)&&n.internalChips.length){n.removeLastChip();n.bdsChangeChips.emit({data:n.internalChips})}break}}}i.prototype.valueChanged=function(){if(this.chips){if(typeof this.chips==="string"){try{this.internalChips=JSON.parse(this.chips)}catch(i){this.internalChips=[]}}else{this.internalChips=this.chips}}else{this.internalChips=[]}};i.prototype.internalValueChanged=function(){this.bdsChangeChips.emit({data:this.internalChips,value:this.getLastChip()})};i.prototype.isValid=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){return[2,this.validateChips()]}))}))};i.prototype.get=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){return[2,this.internalChips]}))}))};i.prototype.clear=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){this.internalChips=[];this.value="";return[2]}))}))};i.prototype.add=function(i){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.setChip(i);return[2]}))}))};i.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){this.nativeInput.focus();return[2]}))}))};i.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){this.nativeInput.blur();return[2]}))}))};i.prototype.componentWillLoad=function(){this.valueChanged()};i.prototype.validateChips=function(){var i=this;if(this.type==="email"){return!this.internalChips.some((function(t){return!i.validateChip(t)}))}else{return true}};i.prototype.handleOnBlur=function(){this.bdsBlur.emit(this.internalChips);this.isPressed=false};i.prototype.getLastChip=function(){return this.internalChips[this.internalChips.length-1]};i.prototype.verifyAndSubstituteDelimiters=function(i){if(i.length===1&&i[0].match(this.delimiters)){return""}var t=i.replace(/;/g,",").replace(/\,+|;+/g,",");if(t[0].match(this.delimiters)){t=t.substring(1)}return t};i.prototype.handleChange=function(i){return __awaiter(this,void 0,void 0,(function(){var t,e,n,s;var r=this;return __generator(this,(function(p){t=i.detail.value;this.value=t?t.trim():"";if(t.length===0)return[2];e=t.match(this.delimiters);if(!e)return[2];n=this.verifyAndSubstituteDelimiters(t);if(!n){this.clearInputValues();return[2]}s=n.split(this.delimiters);s.forEach((function(i){r.setChip(i)}));this.clearInputValues();return[2]}))}))};i.prototype.clearInputValues=function(i){if(i===void 0){i=""}this.nativeInput.value=i;this.value=i};i.prototype.setChip=function(i){if(!this.duplicated){var t=this.internalChips.some((function(t){return t.toLowerCase()===i.toLowerCase()}));if(t)return}if(!r(i)){return}this.internalChips=__spreadArray(__spreadArray([],this.internalChips,true),[i],false)};i.prototype.validateChip=function(i){var t=i.trim();if(this.type==="email"&&p(t)){return false}return true};i.prototype.removeLastChip=function(){this.internalChips=this.internalChips.slice(0,this.internalChips.length-1)};i.prototype.removeChip=function(i){var t=i.detail.id;this.internalChips=this.internalChips.filter((function(i,e){return e.toString()!==t}))};i.prototype.renderChips=function(){var i=this;if(!this.internalChips.length){return[]}return this.internalChips.map((function(t,e){var s=e.toString();return n("bds-chip-clickable",{id:s,key:s,color:"default",close:!i.disabled,onChipClickableClose:function(t){return i.removeChip(t)}},t)}))};i.prototype.renderIcon=function(){return this.icon&&n("div",{class:{input__icon:true,"input__icon--large":!!this.label}},n("bds-icon",{size:this.label?"medium":"small",name:this.icon,color:"inherit"}))};i.prototype.renderLabel=function(){return this.label&&n("label",{class:{input__container__label:true,"input__container__label--pressed":this.isPressed&&!this.disabled}},n("bds-typo",{variant:"fs-12",bold:"bold"},this.label))};i.prototype.renderMessage=function(){var i=this.danger?"error":"info";var t=this.danger?this.errorMessage:this.helperMessage;if(!t&&this.validationDanger)t=this.validationMesage;var e=this.danger||this.validationDanger?"input__message input__message--danger":"input__message";if(t){return n("div",{class:e,part:"input__message"},n("div",{class:"input__message__icon"},n("bds-icon",{size:"x-small",name:i,theme:"solid",color:"inherit"})),n("bds-typo",{variant:"fs-12"},t))}return undefined};i.prototype.render=function(){var i=this;var t=this.isPressed&&!this.disabled;return n(s,null,n("div",{class:{element_input:true},"aria-disabled":this.disabled?"true":null},n("div",{class:{input:true,"input--state-primary":!this.danger&&!this.validationDanger,"input--state-danger":this.danger||this.validationDanger,"input--state-disabled":this.disabled,"input--label":!!this.label,"input--pressed":t},onClick:this.onClickWrapper,onKeyDown:this.keyPressWrapper,part:"input-container"},this.renderIcon(),n("div",{class:"input__container"},this.renderLabel(),n("div",{class:{input__container__wrapper:true}},this.internalChips.length>0&&n("span",{class:"inside-input-left"},this.renderChips()),n("input",{ref:function(t){return i.nativeInput=t},class:{input__container__text:true},name:this.inputName,maxlength:this.maxlength,placeholder:this.placeholder,onInput:this.onInput,onFocus:this.onFocus,onBlur:function(){return i.handleOnBlur()},onChange:function(){return i.handleChange},value:this.value,disabled:this.disabled,"data-test":this.dataTest}))),n("slot",{name:"input-right"})),this.renderMessage()))};Object.defineProperty(i,"watchers",{get:function(){return{chips:["valueChanged"],internalChips:["internalValueChanged"]}},enumerable:false,configurable:true});return i}());o.style=a}}}));