blip-ds 1.200.1 → 1.201.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}}}));

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bda47b0f.js';
 
-const selectCss = ".sc-bds-select-chips-h{display:block}.select.sc-bds-select-chips{position:relative;outline:none}.select__icon.sc-bds-select-chips{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__options.sc-bds-select-chips{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options.sc-bds-select-chips::-webkit-scrollbar{width:16px;background-color:transparent}.select__options.sc-bds-select-chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open.sc-bds-select-chips{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top.sc-bds-select-chips{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";
+const selectCss = ".sc-bds-select-chips-h{display:block}.element_input.sc-bds-select-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-select-chips input.sc-bds-select-chips{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input.sc-bds-select-chips input.sc-bds-select-chips::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips::placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input.sc-bds-select-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-select-chips{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.sc-bds-select-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-select-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-select-chips .input__icon.sc-bds-select-chips{color:#3f7de8;background-color:#e8f2ff}.input--state-primary.sc-bds-select-chips .input__container__label.sc-bds-select-chips{color:#8ca0b3}.input--state-primary.sc-bds-select-chips .input__container__label--pressed.sc-bds-select-chips{color:#3f7de8}.input--state-primary.sc-bds-select-chips .input__container__text.sc-bds-select-chips{caret-color:#3f7de8;color:#202c44}.input--state-danger.sc-bds-select-chips{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.sc-bds-select-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-select-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-select-chips .input__icon.sc-bds-select-chips{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger.sc-bds-select-chips .input__container__label.sc-bds-select-chips{color:#8ca0b3}.input--state-danger.sc-bds-select-chips .input__container__label--pressed.sc-bds-select-chips{color:#ff4c4c}.input--state-danger.sc-bds-select-chips .input__container__text.sc-bds-select-chips{caret-color:#ff4c4c;color:#202c44}.input--state-disabled.sc-bds-select-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-select-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-select-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-select-chips .input__icon.sc-bds-select-chips{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled.sc-bds-select-chips .input__container__label.sc-bds-select-chips{color:#b9cbd3}.input--state-disabled.sc-bds-select-chips .input__container__label--pressed.sc-bds-select-chips{color:#b9cbd3}.input--state-disabled.sc-bds-select-chips .input__container__text.sc-bds-select-chips{caret-color:#b9cbd3;color:#b9cbd3}.input--label.sc-bds-select-chips{padding:7px 4px 8px 12px}.input__icon.sc-bds-select-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-select-chips{padding:4px}.input__container.sc-bds-select-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-select-chips{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips.sc-bds-select-chips{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips.sc-bds-select-chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips.sc-bds-select-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-select-chips{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text.sc-bds-select-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-select-chips:focus{outline:0}.input__container__text.sc-bds-select-chips::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text.sc-bds-select-chips:focus{outline:0}.input__container__text[type=checkbox].sc-bds-select-chips,.input__container__text[type=radio].sc-bds-select-chips{width:13px;height:13px}.input__container__text[type=search].sc-bds-select-chips{-webkit-appearance:textfield;-webkit-box-sizing:content-box}.sc-bds-select-chips::-webkit-search-decoration{display:none}.input__container__text[type=reset].sc-bds-select-chips,.input__container__text[type=button].sc-bds-select-chips,.input__container__text[type=submit].sc-bds-select-chips{overflow:visible}.input__container__text.sc-bds-select-chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text.sc-bds-select-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-select-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-select-chips bds-typo.sc-bds-select-chips{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon.sc-bds-select-chips{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger.sc-bds-select-chips{color:#ff4c4c}.select.sc-bds-select-chips{position:relative;outline:none}.select__icon.sc-bds-select-chips{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__options.sc-bds-select-chips{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options.sc-bds-select-chips::-webkit-scrollbar{width:16px;background-color:transparent}.select__options.sc-bds-select-chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open.sc-bds-select-chips{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top.sc-bds-select-chips{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";
 
 const SelectChips = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,n){function s(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,r){function o(t){try{l(n.next(t))}catch(e){r(e)}}function a(t){try{l(n["throw"](t))}catch(e){r(e)}}function l(t){t.done?i(t.value):s(t.value).then(o,a)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,s,r,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(e){return l([t,e])}}function l(o){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,s&&(r=o[0]&2?s["return"]:o[0]?s["throw"]||((r=s["return"])&&r.call(s),0):s.next)&&!(r=r.call(s,o[1])).done)return r;if(s=0,r)o=[o[0]&2,r.value];switch(o[0]){case 0:case 1:r=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;s=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){i.label=o[1];break}if(o[0]===6&&i.label<r[1]){i.label=r[1];r=o;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(o);break}if(r[2])i.ops.pop();i.trys.pop();continue}o=e.call(t,i)}catch(a){o=[6,a];s=0}finally{n=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./index-461526c7.system.js"],(function(t){"use strict";var e,i,n,s;return{setters:[function(t){e=t.r;i=t.e;n=t.h;s=t.g}],execute:function(){var r=".sc-bds-select-chips-h{display:block}.select.sc-bds-select-chips{position:relative;outline:none}.select__icon.sc-bds-select-chips{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__options.sc-bds-select-chips{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options.sc-bds-select-chips::-webkit-scrollbar{width:16px;background-color:transparent}.select__options.sc-bds-select-chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open.sc-bds-select-chips{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top.sc-bds-select-chips{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";var o=t("bds_select_chips",function(){function t(t){var n=this;e(this,t);this.bdsChange=i(this,"bdsChange",7);this.bdsCancel=i(this,"bdsCancel",7);this.bdsFocus=i(this,"bdsFocus",7);this.bdsBlur=i(this,"bdsBlur",7);this.isOpen=false;this.options=[];this.chips=[];this.newPrefix="";this.value="";this.danger=false;this.errorMessage="";this.disabled=false;this.dataTest=null;this.label="";this.icon="";this.duplicated=false;this.canAddNew=true;this.notFoundMessage="No results found";this.onFocus=function(){n.bdsFocus.emit()};this.onBlur=function(){n.bdsBlur.emit()};this.toggle=function(){if(!n.disabled){n.isOpen=!n.isOpen}};this.handler=function(t){return __awaiter(n,void 0,void 0,(function(){var e,i;return __generator(this,(function(n){switch(n.label){case 0:e=t.detail.value;i=this.getText(e);return[4,this.addChip(i)];case 1:n.sent();return[2]}}))}))};this.getTextFromOption=function(t){var e,i;if((t===null||t===void 0?void 0:t.status)||(t===null||t===void 0?void 0:t.bulkOption)){if(n.internalOptions){var s=n.internalOptions.find((function(e){return e.value==t.value}));if(s){return s.label}}return t.querySelector("#bds-typo-label-".concat(t.value)).textContent}return(t===null||t===void 0?void 0:t.titleText)?t.titleText:(i=(e=t===null||t===void 0?void 0:t.textContent)===null||e===void 0?void 0:e.trim())!==null&&i!==void 0?i:""};this.getText=function(t){var e=n.childOptions.find((function(e){return e.value===t}));return n.getTextFromOption(e)};this.handlerNewOption=function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.addChip(t)];case 1:e.sent();return[2]}}))}))};this.setFocusWrapper=function(){if(n.nativeInput){n.nativeInput.setFocus()}};this.removeFocusWrapper=function(t){var e=t.relatedTarget.localName==="bds-input-chips";if(n.nativeInput&&!e){n.nativeInput.removeFocus()}};this.keyPressWrapper=function(t){var e=t.target.localName==="bds-select";var i=t.target.localName==="bds-input-chips";switch(t.key){case"Enter":if(n.childOptionsEnabled.length===1){n.nativeInput.add(n.childOptionsEnabled[0].textContent)}else{if(!n.canAddNew){return}n.nativeInput.add(n.nativeInput.value)}n.nativeInput.value="";if(!n.isOpen&&(e||i)){n.toggle()}break}};this.changedInputValue=function(){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:this.value=this.nativeInput.value;if(!this.nativeInput.value)return[3,2];return[4,this.filterOptions(this.nativeInput.value)];case 1:t.sent();return[3,4];case 2:return[4,this.resetFilterOptions()];case 3:t.sent();t.label=4;case 4:if(this.value&&this.isOpen===false){this.isOpen=true}return[2]}}))}))};this.handleChangeChipsValue=function(){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:this.nativeInput.value="";return[4,this.resetFilterOptions()];case 1:t.sent();return[2]}}))}))}}t.prototype.handleWindow=function(t){if(!this.el.contains(t.target)){this.isOpen=false}};t.prototype.isValid=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.nativeInput.isValid()]}))}))};t.prototype.getChips=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.nativeInput.get()];case 1:return[2,t.sent()]}}))}))};t.prototype.componentWillRender=function(){if(this.options.length){try{this.internalOptions=typeof this.options==="string"?JSON.parse(this.options):this.options}catch(t){this.internalOptions=[]}}};t.prototype.connectedCallback=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,i;return __generator(this,(function(n){for(t=0,e=this.childOptions;t<e.length;t++){i=e[t];i.addEventListener("optionSelected",this.handler)}return[2]}))}))};t.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.resetFilterOptions()];case 1:t.sent();return[2]}}))}))};Object.defineProperty(t.prototype,"childOptions",{get:function(){return Array.from(this.el.querySelectorAll("bds-select-option:not(#option-add):not(#no-option)"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"childOptionsEnabled",{get:function(){return Array.from(this.el.querySelectorAll("bds-select-option:not([invisible]):not(#option-add):not(#no-option)"))},enumerable:false,configurable:true});t.prototype.enableCreateOption=function(){return!!(this.childOptionsEnabled.length===0&&this.nativeInput&&this.nativeInput.value)};t.prototype.addChip=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.nativeInput.add(t)];case 1:e.sent();this.nativeInput.value="";this.toggle();return[2]}}))}))};t.prototype.filterOptions=function(t){return __awaiter(this,void 0,void 0,(function(){var e,i,n,s,r,o,a,l;return __generator(this,(function(u){switch(u.label){case 0:if(!!t)return[3,2];return[4,this.resetFilterOptions()];case 1:u.sent();return[2];case 2:e=0,i=this.childOptions;u.label=3;case 3:if(!(e<i.length))return[3,6];n=i[e];r=this.existsChip;o=[n.textContent];return[4,this.nativeInput.get()];case 4:s=r.apply(this,o.concat([u.sent()]));a=n.textContent.toLowerCase();l=t.toLowerCase();if(s){n.setAttribute("invisible","invisible")}if(t&&a.includes(l)&&!s){n.removeAttribute("invisible")}if(t&&!a.includes(l)&&!s){n.setAttribute("invisible","invisible")}u.label=5;case 5:e++;return[3,3];case 6:return[2]}}))}))};t.prototype.resetFilterOptions=function(){return __awaiter(this,void 0,void 0,(function(){var t,e,i,n,s,r;return __generator(this,(function(o){switch(o.label){case 0:t=0,e=this.childOptions;o.label=1;case 1:if(!(t<e.length))return[3,4];i=e[t];n=i.querySelector("bds-typo").textContent;s=this.existsChip;r=[n];return[4,this.nativeInput.get()];case 2:if(s.apply(this,r.concat([o.sent()]))){i.setAttribute("invisible","invisible")}else{i.removeAttribute("invisible")}o.label=3;case 3:t++;return[3,1];case 4:return[2]}}))}))};t.prototype.existsChip=function(t,e){return e.some((function(e){return t===e}))};t.prototype.generateKey=function(t){return t.toLowerCase().replace(/ /g,"-")};t.prototype.render=function(){var t=this;var e=this.isOpen?"arrow-up":"arrow-down";var i=[];if(this.options){if(typeof this.options==="string"){try{i=JSON.parse(this.options)}catch(s){}}else{i=this.options}}return n("div",{class:"select",tabindex:"0",onFocus:this.setFocusWrapper,onBlur:this.removeFocusWrapper,onKeyPress:this.keyPressWrapper},n("bds-input-chips",{ref:function(e){return t.nativeInput=e},onBdsChangeChips:this.handleChangeChipsValue,onBdsChange:this.changedInputValue,icon:this.icon,label:this.label,onFocus:this.onFocus,onBlur:this.onBlur,maxlength:this.maxlength,onClick:this.toggle,danger:this.danger,"error-message":this.errorMessage,chips:this.chips,"disable-submit":true,delimiters:null,duplicated:this.duplicated,dataTest:this.dataTest},n("div",{slot:"input-right",class:"select__icon"},n("bds-icon",{size:"small",name:e,color:"inherit"}))),n("div",{class:{select__options:true,"select__options--open":this.isOpen}},i.map((function(e){return n("bds-select-option",{key:t.generateKey(e.value),onOptionSelected:t.handler,value:e.value,status:e.status},e.label)})),n("slot",null),this.canAddNew&&this.enableCreateOption()&&n("bds-select-option",{id:"option-add",value:"add",onClick:function(){return t.handlerNewOption(t.nativeInput.value)}},this.newPrefix,this.nativeInput.value),!this.canAddNew&&this.enableCreateOption()&&n("bds-select-option",{id:"no-option",value:"add"},this.notFoundMessage)))};Object.defineProperty(t.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});return t}());o.style=r}}}));
+var __awaiter=this&&this.__awaiter||function(e,t,i,s){function n(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,r){function o(e){try{a(s.next(e))}catch(t){r(t)}}function c(e){try{a(s["throw"](e))}catch(t){r(t)}}function a(e){e.done?i(e.value):n(e.value).then(o,c)}a((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},s,n,r,o;return o={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function c(e){return function(t){return a([e,t])}}function a(o){if(s)throw new TypeError("Generator is already executing.");while(i)try{if(s=1,n&&(r=o[0]&2?n["return"]:o[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,o[1])).done)return r;if(n=0,r)o=[o[0]&2,r.value];switch(o[0]){case 0:case 1:r=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;n=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!r||o[1]>r[0]&&o[1]<r[3])){i.label=o[1];break}if(o[0]===6&&i.label<r[1]){i.label=r[1];r=o;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(o);break}if(r[2])i.ops.pop();i.trys.pop();continue}o=t.call(e,i)}catch(c){o=[6,c];n=0}finally{s=r=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./index-461526c7.system.js"],(function(e){"use strict";var t,i,s,n;return{setters:[function(e){t=e.r;i=e.e;s=e.h;n=e.g}],execute:function(){var r='.sc-bds-select-chips-h{display:block}.element_input.sc-bds-select-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-select-chips input.sc-bds-select-chips{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input.sc-bds-select-chips input.sc-bds-select-chips::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips::placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-select-chips input.sc-bds-select-chips::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input.sc-bds-select-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-select-chips{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.sc-bds-select-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-select-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-select-chips .input__icon.sc-bds-select-chips{color:#3f7de8;background-color:#e8f2ff}.input--state-primary.sc-bds-select-chips .input__container__label.sc-bds-select-chips{color:#8ca0b3}.input--state-primary.sc-bds-select-chips .input__container__label--pressed.sc-bds-select-chips{color:#3f7de8}.input--state-primary.sc-bds-select-chips .input__container__text.sc-bds-select-chips{caret-color:#3f7de8;color:#202c44}.input--state-danger.sc-bds-select-chips{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.sc-bds-select-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-select-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-select-chips .input__icon.sc-bds-select-chips{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger.sc-bds-select-chips .input__container__label.sc-bds-select-chips{color:#8ca0b3}.input--state-danger.sc-bds-select-chips .input__container__label--pressed.sc-bds-select-chips{color:#ff4c4c}.input--state-danger.sc-bds-select-chips .input__container__text.sc-bds-select-chips{caret-color:#ff4c4c;color:#202c44}.input--state-disabled.sc-bds-select-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-select-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-select-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-select-chips .input__icon.sc-bds-select-chips{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled.sc-bds-select-chips .input__container__label.sc-bds-select-chips{color:#b9cbd3}.input--state-disabled.sc-bds-select-chips .input__container__label--pressed.sc-bds-select-chips{color:#b9cbd3}.input--state-disabled.sc-bds-select-chips .input__container__text.sc-bds-select-chips{caret-color:#b9cbd3;color:#b9cbd3}.input--label.sc-bds-select-chips{padding:7px 4px 8px 12px}.input__icon.sc-bds-select-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-select-chips{padding:4px}.input__container.sc-bds-select-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-select-chips{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips.sc-bds-select-chips{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips.sc-bds-select-chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips.sc-bds-select-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-select-chips{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text.sc-bds-select-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-select-chips:focus{outline:0}.input__container__text.sc-bds-select-chips::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text.sc-bds-select-chips:focus{outline:0}.input__container__text[type=checkbox].sc-bds-select-chips,.input__container__text[type=radio].sc-bds-select-chips{width:13px;height:13px}.input__container__text[type=search].sc-bds-select-chips{-webkit-appearance:textfield;-webkit-box-sizing:content-box}.sc-bds-select-chips::-webkit-search-decoration{display:none}.input__container__text[type=reset].sc-bds-select-chips,.input__container__text[type=button].sc-bds-select-chips,.input__container__text[type=submit].sc-bds-select-chips{overflow:visible}.input__container__text.sc-bds-select-chips::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text.sc-bds-select-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-select-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-select-chips bds-typo.sc-bds-select-chips{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon.sc-bds-select-chips{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger.sc-bds-select-chips{color:#ff4c4c}.select.sc-bds-select-chips{position:relative;outline:none}.select__icon.sc-bds-select-chips{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__options.sc-bds-select-chips{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options.sc-bds-select-chips::-webkit-scrollbar{width:16px;background-color:transparent}.select__options.sc-bds-select-chips::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open.sc-bds-select-chips{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top.sc-bds-select-chips{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}';var o=e("bds_select_chips",function(){function e(e){var s=this;t(this,e);this.bdsChange=i(this,"bdsChange",7);this.bdsCancel=i(this,"bdsCancel",7);this.bdsFocus=i(this,"bdsFocus",7);this.bdsBlur=i(this,"bdsBlur",7);this.isOpen=false;this.options=[];this.chips=[];this.newPrefix="";this.value="";this.danger=false;this.errorMessage="";this.disabled=false;this.dataTest=null;this.label="";this.icon="";this.duplicated=false;this.canAddNew=true;this.notFoundMessage="No results found";this.onFocus=function(){s.bdsFocus.emit()};this.onBlur=function(){s.bdsBlur.emit()};this.toggle=function(){if(!s.disabled){s.isOpen=!s.isOpen}};this.handler=function(e){return __awaiter(s,void 0,void 0,(function(){var t,i;return __generator(this,(function(s){switch(s.label){case 0:t=e.detail.value;i=this.getText(t);return[4,this.addChip(i)];case 1:s.sent();return[2]}}))}))};this.getTextFromOption=function(e){var t,i;if((e===null||e===void 0?void 0:e.status)||(e===null||e===void 0?void 0:e.bulkOption)){if(s.internalOptions){var n=s.internalOptions.find((function(t){return t.value==e.value}));if(n){return n.label}}return e.querySelector("#bds-typo-label-".concat(e.value)).textContent}return(e===null||e===void 0?void 0:e.titleText)?e.titleText:(i=(t=e===null||e===void 0?void 0:e.textContent)===null||t===void 0?void 0:t.trim())!==null&&i!==void 0?i:""};this.getText=function(e){var t=s.childOptions.find((function(t){return t.value===e}));return s.getTextFromOption(t)};this.handlerNewOption=function(e){return __awaiter(s,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.addChip(e)];case 1:t.sent();return[2]}}))}))};this.setFocusWrapper=function(){if(s.nativeInput){s.nativeInput.setFocus()}};this.removeFocusWrapper=function(e){var t=e.relatedTarget.localName==="bds-input-chips";if(s.nativeInput&&!t){s.nativeInput.removeFocus()}};this.keyPressWrapper=function(e){var t=e.target.localName==="bds-select";var i=e.target.localName==="bds-input-chips";switch(e.key){case"Enter":if(s.childOptionsEnabled.length===1){s.nativeInput.add(s.childOptionsEnabled[0].textContent)}else{if(!s.canAddNew){return}s.nativeInput.add(s.nativeInput.value)}s.nativeInput.value="";if(!s.isOpen&&(t||i)){s.toggle()}break}};this.changedInputValue=function(){return __awaiter(s,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:this.value=this.nativeInput.value;if(!this.nativeInput.value)return[3,2];return[4,this.filterOptions(this.nativeInput.value)];case 1:e.sent();return[3,4];case 2:return[4,this.resetFilterOptions()];case 3:e.sent();e.label=4;case 4:if(this.value&&this.isOpen===false){this.isOpen=true}return[2]}}))}))};this.handleChangeChipsValue=function(){return __awaiter(s,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:this.nativeInput.value="";return[4,this.resetFilterOptions()];case 1:e.sent();return[2]}}))}))}}e.prototype.handleWindow=function(e){if(!this.el.contains(e.target)){this.isOpen=false}};e.prototype.isValid=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){return[2,this.nativeInput.isValid()]}))}))};e.prototype.getChips=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.nativeInput.get()];case 1:return[2,e.sent()]}}))}))};e.prototype.componentWillRender=function(){if(this.options.length){try{this.internalOptions=typeof this.options==="string"?JSON.parse(this.options):this.options}catch(e){this.internalOptions=[]}}};e.prototype.connectedCallback=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,i;return __generator(this,(function(s){for(e=0,t=this.childOptions;e<t.length;e++){i=t[e];i.addEventListener("optionSelected",this.handler)}return[2]}))}))};e.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.resetFilterOptions()];case 1:e.sent();return[2]}}))}))};Object.defineProperty(e.prototype,"childOptions",{get:function(){return Array.from(this.el.querySelectorAll("bds-select-option:not(#option-add):not(#no-option)"))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"childOptionsEnabled",{get:function(){return Array.from(this.el.querySelectorAll("bds-select-option:not([invisible]):not(#option-add):not(#no-option)"))},enumerable:false,configurable:true});e.prototype.enableCreateOption=function(){return!!(this.childOptionsEnabled.length===0&&this.nativeInput&&this.nativeInput.value)};e.prototype.addChip=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.nativeInput.add(e)];case 1:t.sent();this.nativeInput.value="";this.toggle();return[2]}}))}))};e.prototype.filterOptions=function(e){return __awaiter(this,void 0,void 0,(function(){var t,i,s,n,r,o,c,a;return __generator(this,(function(l){switch(l.label){case 0:if(!!e)return[3,2];return[4,this.resetFilterOptions()];case 1:l.sent();return[2];case 2:t=0,i=this.childOptions;l.label=3;case 3:if(!(t<i.length))return[3,6];s=i[t];r=this.existsChip;o=[s.textContent];return[4,this.nativeInput.get()];case 4:n=r.apply(this,o.concat([l.sent()]));c=s.textContent.toLowerCase();a=e.toLowerCase();if(n){s.setAttribute("invisible","invisible")}if(e&&c.includes(a)&&!n){s.removeAttribute("invisible")}if(e&&!c.includes(a)&&!n){s.setAttribute("invisible","invisible")}l.label=5;case 5:t++;return[3,3];case 6:return[2]}}))}))};e.prototype.resetFilterOptions=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,i,s,n,r;return __generator(this,(function(o){switch(o.label){case 0:e=0,t=this.childOptions;o.label=1;case 1:if(!(e<t.length))return[3,4];i=t[e];s=i.querySelector("bds-typo").textContent;n=this.existsChip;r=[s];return[4,this.nativeInput.get()];case 2:if(n.apply(this,r.concat([o.sent()]))){i.setAttribute("invisible","invisible")}else{i.removeAttribute("invisible")}o.label=3;case 3:e++;return[3,1];case 4:return[2]}}))}))};e.prototype.existsChip=function(e,t){return t.some((function(t){return e===t}))};e.prototype.generateKey=function(e){return e.toLowerCase().replace(/ /g,"-")};e.prototype.render=function(){var e=this;var t=this.isOpen?"arrow-up":"arrow-down";var i=[];if(this.options){if(typeof this.options==="string"){try{i=JSON.parse(this.options)}catch(n){}}else{i=this.options}}return s("div",{class:"select",tabindex:"0",onFocus:this.setFocusWrapper,onBlur:this.removeFocusWrapper,onKeyPress:this.keyPressWrapper},s("bds-input-chips",{ref:function(t){return e.nativeInput=t},onBdsChangeChips:this.handleChangeChipsValue,onBdsChange:this.changedInputValue,icon:this.icon,label:this.label,onFocus:this.onFocus,onBlur:this.onBlur,maxlength:this.maxlength,onClick:this.toggle,danger:this.danger,"error-message":this.errorMessage,chips:this.chips,"disable-submit":true,delimiters:null,duplicated:this.duplicated,dataTest:this.dataTest},s("div",{slot:"input-right",class:"select__icon"},s("bds-icon",{size:"small",name:t,color:"inherit"}))),s("div",{class:{select__options:true,"select__options--open":this.isOpen}},i.map((function(t){return s("bds-select-option",{key:e.generateKey(t.value),onOptionSelected:e.handler,value:t.value,status:t.status},t.label)})),s("slot",null),this.canAddNew&&this.enableCreateOption()&&s("bds-select-option",{id:"option-add",value:"add",onClick:function(){return e.handlerNewOption(e.nativeInput.value)}},this.newPrefix,this.nativeInput.value),!this.canAddNew&&this.enableCreateOption()&&s("bds-select-option",{id:"no-option",value:"add"},this.notFoundMessage)))};Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});return e}());o.style=r}}}));

package/dist/blip-ds/bds-select.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bda47b0f.js';
 
-const selectCss = ":host{display:block}.select{position:relative;outline:none}.select__icon{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__options{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options::-webkit-scrollbar{width:16px;background-color:transparent}.select__options::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";
+const selectCss = ":host{display:block}.element_input{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 input{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input input::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input input:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::placeholder{color:#b9cbd3;opacity:1}.element_input input::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input{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{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary:hover{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.input--pressed{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 .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;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger:hover{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.input--pressed{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 .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;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;background:#f3f6fa}.input--state-disabled: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{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 .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:-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{padding:4px}.input__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;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:-ms-flexbox;display:flex;-ms-flex-align:center;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;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: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:-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 bds-typo{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger{color:#ff4c4c}.select{position:relative;outline:none}.select__icon{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__options{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options::-webkit-scrollbar{width:16px;background-color:transparent}.select__options::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";
 
 const Select = class {
   constructor(hostRef) {
@@ -11,6 +11,18 @@ const Select = class {
     this.bdsBlur = createEvent(this, "bdsBlur", 7);
     this.isOpen = false;
     this.text = '';
+    /**
+     * 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 = '';
     /**
      * Add state danger on input, use for use feedback.
      */
@@ -31,6 +43,14 @@ const Select = class {
      * Placeholder for native input element.
      */
     this.placeholder = '';
+    /**
+     * Indicated to pass a help the user in complex filling.
+     */
+    this.helperMessage = '';
+    /**
+     * Indicated to pass an feeback to user.
+     */
+    this.errorMessage = '';
     /**
      * Set the placement of the options menu. Can be 'bottom' or 'top'.
      */
@@ -43,11 +63,20 @@ const Select = class {
     this.refNativeInput = (el) => {
       this.nativeInput = el;
     };
+    this.onClickWrapper = () => {
+      this.onFocus();
+      this.toggle();
+      if (this.nativeInput) {
+        this.nativeInput.focus();
+      }
+    };
     this.onFocus = () => {
       this.bdsFocus.emit();
+      this.isPressed = true;
     };
     this.onBlur = () => {
       this.bdsBlur.emit();
+      this.isPressed = false;
     };
     this.toggle = () => {
       if (!this.disabled) {
@@ -73,17 +102,6 @@ const Select = class {
       this.value = value;
       this.toggle();
     };
-    this.setFocusWrapper = () => {
-      if (this.nativeInput) {
-        this.nativeInput.setFocus();
-      }
-    };
-    this.removeFocusWrapper = (event) => {
-      const isInputElement = event.relatedTarget.localName === 'bds-input';
-      if (this.nativeInput && !isInputElement) {
-        this.nativeInput.removeFocus();
-      }
-    };
     this.keyPressWrapper = (event) => {
       var _a, _b, _c, _d, _e, _f, _g, _h;
       const isSelectElement = event.target.localName === 'bds-select';
@@ -164,9 +182,40 @@ const Select = class {
       ? Array.from(this.el.shadowRoot.querySelectorAll('bds-select-option')).find((option) => option.selected)
       : Array.from(this.el.querySelectorAll('bds-select-option')).find((option) => option.selected);
   }
+  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() {
+    const isPressed = this.isPressed && !this.disabled;
     const iconArrow = this.isOpen ? 'arrow-up' : 'arrow-down';
-    return (h("div", { class: "select", tabindex: "0", onFocus: this.setFocusWrapper, onBlur: this.removeFocusWrapper, onKeyDown: this.keyPressWrapper }, h("bds-input", { icon: this.icon, label: this.label, ref: this.refNativeInput, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.toggle, value: this.text, danger: this.danger, disabled: this.disabled, placeholder: this.placeholder, readonly: true, dataTest: this.dataTest }, h("div", { slot: "input-right", class: "select__icon" }, h("bds-icon", { size: "small", name: iconArrow, color: "inherit" }))), h("div", { class: {
+    return (h("div", { class: "select", tabindex: "0" }, 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 } }, h("input", { ref: this.refNativeInput, class: { input__container__text: true }, onFocus: this.onFocus, onBlur: this.onBlur, value: this.text, disabled: this.disabled, placeholder: this.placeholder, readonly: true, "data-test": this.dataTest }))), h("div", { class: "select__icon" }, h("bds-icon", { size: "small", name: iconArrow, color: "inherit" }))), this.renderMessage()), h("div", { class: {
         select__options: true,
         'select__options--position-top': this.optionsPosition === 'top',
         'select__options--open': this.isOpen,

package/dist/blip-ds/bds-select.system.entry.js

@@ -1 +1 @@
-System.register(["./index-461526c7.system.js"],(function(t){"use strict";var e,i,o,n;return{setters:[function(t){e=t.r;i=t.e;o=t.h;n=t.g}],execute:function(){var s=":host{display:block}.select{position:relative;outline:none}.select__icon{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__options{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options::-webkit-scrollbar{width:16px;background-color:transparent}.select__options::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}";var r=t("bds_select",function(){function t(t){var o=this;e(this,t);this.bdsChange=i(this,"bdsChange",7);this.bdsCancel=i(this,"bdsCancel",7);this.bdsFocus=i(this,"bdsFocus",7);this.bdsBlur=i(this,"bdsBlur",7);this.isOpen=false;this.text="";this.danger=false;this.disabled=false;this.label="";this.icon="";this.placeholder="";this.optionsPosition="bottom";this.dataTest=null;this.refNativeInput=function(t){o.nativeInput=t};this.onFocus=function(){o.bdsFocus.emit()};this.onBlur=function(){o.bdsBlur.emit()};this.toggle=function(){if(!o.disabled){o.isOpen=!o.isOpen}};this.getText=function(){var t,e;var i=o.childOptions.find((function(t){return t.value==o.value}));if((i===null||i===void 0?void 0:i.status)||(i===null||i===void 0?void 0:i.bulkOption)){if(o.internalOptions){var n=o.internalOptions.find((function(t){return t.value==i.value}));if(n){return n.label}}return i.querySelector("#bds-typo-label-".concat(o.value)).textContent}return(i===null||i===void 0?void 0:i.titleText)?i.titleText:(e=(t=i===null||i===void 0?void 0:i.textContent)===null||t===void 0?void 0:t.trim())!==null&&e!==void 0?e:""};this.handler=function(t){var e=t.detail.value;o.value=e;o.toggle()};this.setFocusWrapper=function(){if(o.nativeInput){o.nativeInput.setFocus()}};this.removeFocusWrapper=function(t){var e=t.relatedTarget.localName==="bds-input";if(o.nativeInput&&!e){o.nativeInput.removeFocus()}};this.keyPressWrapper=function(t){var e,i,n,s,r,l,a,p;var u=t.target.localName==="bds-select";var d=t.target.localName==="bds-input";switch(t.key){case"Enter":if(!o.isOpen&&(u||d)){o.toggle()}break;case"ArrowDown":if(o.childOptionSelected){(i=(e=o.childOptionSelected.nextElementSibling)===null||e===void 0?void 0:e.firstElementChild)===null||i===void 0?void 0:i.focus();return}(s=(n=o.el.firstElementChild)===null||n===void 0?void 0:n.firstElementChild)===null||s===void 0?void 0:s.focus();break;case"ArrowUp":if(o.childOptionSelected){(l=(r=o.childOptionSelected.previousElementSibling)===null||r===void 0?void 0:r.firstElementChild)===null||l===void 0?void 0:l.focus();return}(p=(a=o.el.previousElementSibling)===null||a===void 0?void 0:a.firstElementChild)===null||p===void 0?void 0:p.focus();break}}}t.prototype.valueChanged=function(){this.bdsChange.emit({value:this.value});for(var t=0,e=this.childOptions;t<e.length;t++){var i=e[t];i.selected=this.value===i.value}this.text=this.getText()};t.prototype.handleWindow=function(t){if(!this.el.contains(t.target)){this.isOpen=false}};t.prototype.componentWillLoad=function(){this.options&&this.optionsChanged()};t.prototype.componentWillRender=function(){this.options&&this.updateOptions();for(var t=0,e=this.childOptions;t<e.length;t++){var i=e[t];i.selected=this.value===i.value;i.addEventListener("optionSelected",this.handler)}this.text=this.getText()};t.prototype.componentDidLoad=function(){for(var t=0,e=this.childOptions;t<e.length;t++){var i=e[t];i.selected=this.value===i.value;i.addEventListener("optionSelected",this.handler)}this.text=this.getText()};t.prototype.optionsChanged=function(){this.updateOptions()};t.prototype.updateOptions=function(){if(this.options){if(typeof this.options==="string"){this.internalOptions=JSON.parse(this.options)}else{this.internalOptions=this.options}}};Object.defineProperty(t.prototype,"childOptions",{get:function(){return this.options?Array.from(this.el.shadowRoot.querySelectorAll("bds-select-option")):Array.from(this.el.querySelectorAll("bds-select-option"))},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"childOptionSelected",{get:function(){return this.options?Array.from(this.el.shadowRoot.querySelectorAll("bds-select-option")).find((function(t){return t.selected})):Array.from(this.el.querySelectorAll("bds-select-option")).find((function(t){return t.selected}))},enumerable:false,configurable:true});t.prototype.render=function(){var t=this.isOpen?"arrow-up":"arrow-down";return o("div",{class:"select",tabindex:"0",onFocus:this.setFocusWrapper,onBlur:this.removeFocusWrapper,onKeyDown:this.keyPressWrapper},o("bds-input",{icon:this.icon,label:this.label,ref:this.refNativeInput,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.toggle,value:this.text,danger:this.danger,disabled:this.disabled,placeholder:this.placeholder,readonly:true,dataTest:this.dataTest},o("div",{slot:"input-right",class:"select__icon"},o("bds-icon",{size:"small",name:t,color:"inherit"}))),o("div",{class:{select__options:true,"select__options--position-top":this.optionsPosition==="top","select__options--open":this.isOpen}},this.internalOptions?this.internalOptions.map((function(t,e){return o("bds-select-option",{value:t.value,key:e,bulkOption:t.bulkOption,status:t.status},t.label)})):o("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueChanged"],options:["optionsChanged"]}},enumerable:false,configurable:true});return t}());r.style=s}}}));
+System.register(["./index-461526c7.system.js"],(function(e){"use strict";var t,i,o,n;return{setters:[function(e){t=e.r;i=e.e;o=e.h;n=e.g}],execute:function(){var r=':host{display:block}.element_input{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 input{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input input::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input input:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input input::placeholder{color:#b9cbd3;opacity:1}.element_input input::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input{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{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary:hover{border:1px solid #3f7de8;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.input--pressed{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 .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;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger:hover{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.input--pressed{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 .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;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;background:#f3f6fa}.input--state-disabled: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{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 .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:-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{padding:4px}.input__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%}.input__container__wrapper{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;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:-ms-flexbox;display:flex;-ms-flex-align:center;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;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: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:-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 bds-typo{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger{color:#ff4c4c}.select{position:relative;outline:none}.select__icon{color:#8ca0b3;display:-ms-flexbox;display:flex}.select__options{background:#f8fbfb;width:100%;max-height:250px;position:absolute;top:99%;left:0;border-radius:8px;-webkit-box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);box-shadow:0px 2px 8px rgba(96, 123, 153, 0.3);overflow-y:auto;z-index:2;margin-top:4px;-webkit-transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s;transition:transform 0.25s, opacity 0.75s, visibility 0.75s, -webkit-transform 0.25s;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:scaleY(0);transform:scaleY(0);visibility:hidden;opacity:0;-webkit-box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4);box-shadow:0px 2px 12px 0 2px 8px rgba(96, 123, 153, 0.4)}.select__options::-webkit-scrollbar{width:16px;background-color:transparent}.select__options::-webkit-scrollbar-thumb{border-radius:10px;border:4px solid transparent;border-radius:10px;background-clip:content-box;background-color:#b9cbd3}.select__options--open{visibility:visible;-webkit-transform:scale(1);transform:scale(1);opacity:1}.select__options--position-top{top:auto;bottom:100%;-webkit-transform-origin:bottom left;transform-origin:bottom left}';var s=e("bds_select",function(){function e(e){var o=this;t(this,e);this.bdsChange=i(this,"bdsChange",7);this.bdsCancel=i(this,"bdsCancel",7);this.bdsFocus=i(this,"bdsFocus",7);this.bdsBlur=i(this,"bdsBlur",7);this.isOpen=false;this.text="";this.validationDanger=false;this.isPressed=false;this.validationMesage="";this.danger=false;this.disabled=false;this.label="";this.icon="";this.placeholder="";this.helperMessage="";this.errorMessage="";this.optionsPosition="bottom";this.dataTest=null;this.refNativeInput=function(e){o.nativeInput=e};this.onClickWrapper=function(){o.onFocus();o.toggle();if(o.nativeInput){o.nativeInput.focus()}};this.onFocus=function(){o.bdsFocus.emit();o.isPressed=true};this.onBlur=function(){o.bdsBlur.emit();o.isPressed=false};this.toggle=function(){if(!o.disabled){o.isOpen=!o.isOpen}};this.getText=function(){var e,t;var i=o.childOptions.find((function(e){return e.value==o.value}));if((i===null||i===void 0?void 0:i.status)||(i===null||i===void 0?void 0:i.bulkOption)){if(o.internalOptions){var n=o.internalOptions.find((function(e){return e.value==i.value}));if(n){return n.label}}return i.querySelector("#bds-typo-label-".concat(o.value)).textContent}return(i===null||i===void 0?void 0:i.titleText)?i.titleText:(t=(e=i===null||i===void 0?void 0:i.textContent)===null||e===void 0?void 0:e.trim())!==null&&t!==void 0?t:""};this.handler=function(e){var t=e.detail.value;o.value=t;o.toggle()};this.keyPressWrapper=function(e){var t,i,n,r,s,a,l,p;var d=e.target.localName==="bds-select";var c=e.target.localName==="bds-input";switch(e.key){case"Enter":if(!o.isOpen&&(d||c)){o.toggle()}break;case"ArrowDown":if(o.childOptionSelected){(i=(t=o.childOptionSelected.nextElementSibling)===null||t===void 0?void 0:t.firstElementChild)===null||i===void 0?void 0:i.focus();return}(r=(n=o.el.firstElementChild)===null||n===void 0?void 0:n.firstElementChild)===null||r===void 0?void 0:r.focus();break;case"ArrowUp":if(o.childOptionSelected){(a=(s=o.childOptionSelected.previousElementSibling)===null||s===void 0?void 0:s.firstElementChild)===null||a===void 0?void 0:a.focus();return}(p=(l=o.el.previousElementSibling)===null||l===void 0?void 0:l.firstElementChild)===null||p===void 0?void 0:p.focus();break}}}e.prototype.valueChanged=function(){this.bdsChange.emit({value:this.value});for(var e=0,t=this.childOptions;e<t.length;e++){var i=t[e];i.selected=this.value===i.value}this.text=this.getText()};e.prototype.handleWindow=function(e){if(!this.el.contains(e.target)){this.isOpen=false}};e.prototype.componentWillLoad=function(){this.options&&this.optionsChanged()};e.prototype.componentWillRender=function(){this.options&&this.updateOptions();for(var e=0,t=this.childOptions;e<t.length;e++){var i=t[e];i.selected=this.value===i.value;i.addEventListener("optionSelected",this.handler)}this.text=this.getText()};e.prototype.componentDidLoad=function(){for(var e=0,t=this.childOptions;e<t.length;e++){var i=t[e];i.selected=this.value===i.value;i.addEventListener("optionSelected",this.handler)}this.text=this.getText()};e.prototype.optionsChanged=function(){this.updateOptions()};e.prototype.updateOptions=function(){if(this.options){if(typeof this.options==="string"){this.internalOptions=JSON.parse(this.options)}else{this.internalOptions=this.options}}};Object.defineProperty(e.prototype,"childOptions",{get:function(){return this.options?Array.from(this.el.shadowRoot.querySelectorAll("bds-select-option")):Array.from(this.el.querySelectorAll("bds-select-option"))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"childOptionSelected",{get:function(){return this.options?Array.from(this.el.shadowRoot.querySelectorAll("bds-select-option")).find((function(e){return e.selected})):Array.from(this.el.querySelectorAll("bds-select-option")).find((function(e){return e.selected}))},enumerable:false,configurable:true});e.prototype.renderIcon=function(){return this.icon&&o("div",{class:{input__icon:true,"input__icon--large":!!this.label}},o("bds-icon",{size:this.label?"medium":"small",name:this.icon,color:"inherit"}))};e.prototype.renderLabel=function(){return this.label&&o("label",{class:{input__container__label:true,"input__container__label--pressed":this.isPressed&&!this.disabled}},o("bds-typo",{variant:"fs-12",bold:"bold"},this.label))};e.prototype.renderMessage=function(){var e=this.danger?"error":"info";var t=this.danger?this.errorMessage:this.helperMessage;if(!t&&this.validationDanger)t=this.validationMesage;var i=this.danger||this.validationDanger?"input__message input__message--danger":"input__message";if(t){return o("div",{class:i,part:"input__message"},o("div",{class:"input__message__icon"},o("bds-icon",{size:"x-small",name:e,theme:"solid",color:"inherit"})),o("bds-typo",{variant:"fs-12"},t))}return undefined};e.prototype.render=function(){var e=this.isPressed&&!this.disabled;var t=this.isOpen?"arrow-up":"arrow-down";return o("div",{class:"select",tabindex:"0"},o("div",{class:{element_input:true},"aria-disabled":this.disabled?"true":null},o("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":e},onClick:this.onClickWrapper,onKeyDown:this.keyPressWrapper,part:"input-container"},this.renderIcon(),o("div",{class:"input__container"},this.renderLabel(),o("div",{class:{input__container__wrapper:true}},o("input",{ref:this.refNativeInput,class:{input__container__text:true},onFocus:this.onFocus,onBlur:this.onBlur,value:this.text,disabled:this.disabled,placeholder:this.placeholder,readonly:true,"data-test":this.dataTest}))),o("div",{class:"select__icon"},o("bds-icon",{size:"small",name:t,color:"inherit"}))),this.renderMessage()),o("div",{class:{select__options:true,"select__options--position-top":this.optionsPosition==="top","select__options--open":this.isOpen}},this.internalOptions?this.internalOptions.map((function(e,t){return o("bds-select-option",{value:e.value,key:t,bulkOption:e.bulkOption,status:e.status},e.label)})):o("slot",null)))};Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"],options:["optionsChanged"]}},enumerable:false,configurable:true});return e}());s.style=r}}}));

package/dist/blip-ds/bds-toast.entry.js

@@ -1,6 +1,8 @@
 import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bda47b0f.js';
 
-const toastCss = ":host .show,:host .hide{display:-ms-flexbox;display:flex}:host .show{opacity:1}:host .show--top-right,:host .show--bottom-right{-webkit-animation:toastAnimationFadeInFromRight 1s;animation:toastAnimationFadeInFromRight 1s}:host .show--top-left,:host .show--bottom-left{-webkit-animation:toastAnimationFadeInFromLeft 1s;animation:toastAnimationFadeInFromLeft 1s}:host .hide{-webkit-transition:all 1s;transition:all 1s;-webkit-animation:toastAnimationFadeOut 0.5s;animation:toastAnimationFadeOut 0.5s}.toast{display:none;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0px 8px 12px rgba(96, 123, 153, 0.4), 0px 0px 4px rgba(96, 123, 153, 0.3);box-shadow:0px 8px 12px rgba(96, 123, 153, 0.4), 0px 0px 4px rgba(96, 123, 153, 0.3);color:#ffffff;opacity:0;margin-top:16px}.toast--action--icon{min-width:440px;max-width:440px;padding:8px 20px}.toast--action--icon bds-icon-button{height:32px}@media (max-width: 780px){.toast--action--icon{min-width:220px;width:95%;margin:16px auto 0px auto}}.toast--action--button{min-width:440px;max-width:456px;padding:10px 20px}@media (max-width: 780px){.toast--action--button{min-width:220px;width:95%;margin:16px auto 0px auto}}.toast--system{background:#00c6d7}.toast--error{background:#ff4c4c}.toast--success{background:#21cc79}.toast--warning{background:#f6a721}.toast--undo{background-color:#00c6d7}.toast--redo{background-color:#485c73}.toast bds-icon{margin-right:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toast__content{height:100%;width:100%;-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;margin-right:8px}.toast__action{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.toast__action button{background:transparent;border:none;outline:none;padding:0}.toast__action__button{white-space:nowrap}.toast__action__icon{display:-ms-flexbox !important;display:flex !important;-ms-flex-align:center;align-items:center}.toast__action__icon bds-icon{color:#ffffff;border-radius:4px;cursor:pointer}@-webkit-keyframes toastAnimationFadeInFromRight{0%{opacity:0;right:-200px}50%{opacity:0.9;right:1px}100%{opacity:1}}@keyframes toastAnimationFadeInFromRight{0%{opacity:0;right:-200px}50%{opacity:0.9;right:1px}100%{opacity:1}}@-webkit-keyframes toastAnimationFadeInFromLeft{0%{opacity:0;left:-200px}50%{opacity:0.9;left:1px}100%{opacity:1}}@keyframes toastAnimationFadeInFromLeft{0%{opacity:0;left:-200px}50%{opacity:0.9;left:1px}100%{opacity:1}}@-webkit-keyframes toastAnimationFadeOut{0%{opacity:1}30%{max-height:60px}80%{opacity:0;max-height:30px}100%{max-height:0px}}@keyframes toastAnimationFadeOut{0%{opacity:1}30%{max-height:60px}80%{opacity:0;max-height:30px}100%{max-height:0px}}";
+const notificationBallonSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTIiIGhlaWdodD0iNzAiIHZpZXdCb3g9IjAgMCA1MiA3MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3Ljk1NzEgLTJDMTAuMzMwNCAtMiAyLjQzNzczIC0wLjc5NTMwOCAtMi45NzE4NyAyLjM4ODUzQy0xMS43NTE0IDcuNjM3NTUgLTE0LjMyMzIgMTcuODc3NCAtMTMuOTY4NCAyNy4zNDI5Qy0xMy43MDI0IDM1LjUxNzYgLTExLjQ4NTMgNDQuMjk0NyAtNS40NTQ5NiA1MC4zMTgxQzAuMjIwNjkyIDU2LjA4MzQgMTEuOTI2NyA1OC42NjQ5IDE5Ljk5NjggNTguNjY0OUMyMC4zNTE1IDU4LjY2NDkgMjAuNzA2MyA1OC45MjMxIDIwLjcwNjMgNTkuMzUzM1Y2Ny42MTQxQzIwLjcwNjMgNjguMzg4NSAyMS4zMjcgNjkuMDc2OSAyMi4yMTM5IDY5LjA3NjlDMjIuMzAyNSA2OS4wNzY5IDIyLjMwMjUgNjkuMDc2OSAyMi4zOTEyIDY5LjA3NjlDMjIuNzQ1OSA2OS4wNzY5IDIzLjAxMiA2OC45MDQ4IDIzLjE4OTMgNjguNzMyN0MyNy4xOCA2NS4zNzY4IDMxLjI1OTQgNjEuOTM0OCAzNS4xNjE0IDU4LjQ5MjhDMzguODg2MSA1NS4xMzY5IDQzLjE0MjggNTEuNjk0OSA0NS45ODA2IDQ3LjY1MDZDNTIuMDk5NyAzOS4xMzE3IDUzLjA3NTIgMjcuMTcwOCA1MS4wMzU1IDE3LjE4OUM0OS4wODQ1IDcuNjM3NTUgNDIuMDc4NiAxLjM1NTkzIDMyLjMyMzYgLTAuNjIzMjA5QzI4LjE1NTYgLTEuNDgzNyAyMy4xMDA3IC0yIDE3Ljk1NzEgLTJaIiBmaWxsPSIjODBFM0VCIi8+Cjwvc3ZnPgo=';
+
+const toastCss = ":host .show,:host .hide{display:-ms-flexbox;display:flex}:host .show{opacity:1}:host .show--top-right,:host .show--bottom-right{-webkit-animation:toastAnimationFadeInFromRight 1s;animation:toastAnimationFadeInFromRight 1s}:host .show--top-left,:host .show--bottom-left{-webkit-animation:toastAnimationFadeInFromLeft 1s;animation:toastAnimationFadeInFromLeft 1s}:host .hide{-webkit-transition:all 1s;transition:all 1s;-webkit-animation:toastAnimationFadeOut 0.5s;animation:toastAnimationFadeOut 0.5s}.toast{display:none;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0px 8px 12px rgba(96, 123, 153, 0.4), 0px 0px 4px rgba(96, 123, 153, 0.3);box-shadow:0px 8px 12px rgba(96, 123, 153, 0.4), 0px 0px 4px rgba(96, 123, 153, 0.3);color:#202c44;opacity:0;margin-top:16px}.toast--action--icon{min-width:440px;max-width:440px;padding:8px 20px}.toast--action--icon bds-icon-button{height:32px}@media (max-width: 780px){.toast--action--icon{min-width:220px;width:95%;margin:16px auto 0px auto}}.toast--action--button{min-width:440px;max-width:456px;padding:10px 20px}@media (max-width: 780px){.toast--action--button{min-width:220px;width:95%;margin:16px auto 0px auto}}.toast--system{background:#80e3eb}.toast--error{background:#ffa5a5}.toast--success{background:#90e6bc}.toast--warning{background:#fff6a8}.toast--undo{background-color:#00c6d7}.toast--redo{background-color:#485c73}.toast--notification{background-color:#ffffff}.toast bds-icon{margin-right:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-top:8px}.toast__ballon{display:-ms-flexbox;display:flex;position:absolute;top:0;left:0}.toast__content{height:100%;width:100%;-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;margin-right:8px;padding:8px}.toast__action{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.toast__action bds-button-icon,.toast__action bds-button{position:relative}.toast__action bds-button-icon::before,.toast__action bds-button::before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.toast__action bds-button-icon:focus-visible,.toast__action bds-button:focus-visible{outline:none}.toast__action bds-button-icon:focus-visible::before,.toast__action bds-button:focus-visible::before{border-color:#c226fb}.toast__action__button{white-space:nowrap}.toast__action__icon{display:-ms-flexbox !important;display:flex !important;-ms-flex-align:start;align-items:flex-start}.toast__action__icon bds-icon{color:#202c44;border-radius:4px;cursor:pointer}@-webkit-keyframes toastAnimationFadeInFromRight{0%{opacity:0;right:-200px}50%{opacity:0.9;right:1px}100%{opacity:1}}@keyframes toastAnimationFadeInFromRight{0%{opacity:0;right:-200px}50%{opacity:0.9;right:1px}100%{opacity:1}}@-webkit-keyframes toastAnimationFadeInFromLeft{0%{opacity:0;left:-200px}50%{opacity:0.9;left:1px}100%{opacity:1}}@keyframes toastAnimationFadeInFromLeft{0%{opacity:0;left:-200px}50%{opacity:0.9;left:1px}100%{opacity:1}}@-webkit-keyframes toastAnimationFadeOut{0%{opacity:1}30%{max-height:60px}80%{opacity:0;max-height:30px}100%{max-height:0px}}@keyframes toastAnimationFadeOut{0%{opacity:1}30%{max-height:60px}80%{opacity:0;max-height:30px}100%{max-height:0px}}";
 
 const BdsToast = class {
   constructor(hostRef) {
@@ -63,8 +65,20 @@ const BdsToast = class {
       warning: 'attention',
       undo: 'undo',
       redo: 'redo',
+      notification: 'notification',
     };
   }
+  _keyPressHandler(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (this.buttonAction === 'close')
+        this.close();
+      else {
+        this.toastButtonClick.emit(this.el);
+        this.close();
+      }
+    }
+  }
   /**
    * Can be used outside to open the toast
    */
@@ -122,10 +136,10 @@ const BdsToast = class {
         [`toast--action--${this.actionType}`]: true,
         [`show show--${this.position}`]: this.show,
         hide: this.hide,
-      } }, this.icon && h("bds-icon", { theme: "outline", size: "x-large", color: "#fff", name: this.icon }), h("div", { class: "toast__content" }, this.toastTitle && (h("bds-typo", { variant: "fs-14", bold: "bold" }, this.toastTitle)), this.toastText && h("bds-typo", { variant: "fs-14", innerHTML: this.toastText })), h("div", { class: {
+      } }, this.variant === 'notification' && h("img", { class: "toast__ballon", src: notificationBallonSvg }), this.icon && h("bds-icon", { theme: "outline", size: "medium", name: this.icon }), h("div", { class: "toast__content" }, this.toastTitle && (h("bds-typo", { variant: "fs-14", bold: "bold" }, this.toastTitle)), this.toastText && h("bds-typo", { variant: "fs-14", innerHTML: this.toastText })), h("div", { class: {
         toast__action: true,
         [`toast__action__${this.actionType}`]: true,
-      } }, this.actionType === 'button' ? (h("button", { onClick: () => this._buttonClickHandler() }, h("bds-button", { variant: "secondary--white", size: "short" }, this.buttonText))) : (h("button", { onClick: () => this._buttonClickHandler() }, h("bds-button-icon", { size: "short", variant: "secondary--white", icon: "close" }))))));
+      } }, this.actionType === 'button' ? (h("bds-button", { onKeyDown: this._keyPressHandler.bind(this), tabindex: "0", onClick: () => this._buttonClickHandler(), variant: "secondary", size: "short" }, this.buttonText)) : (h("bds-button-icon", { onClick: () => this._buttonClickHandler(), size: "short", onKeyDown: this._keyPressHandler.bind(this), tabindex: "0", variant: "secondary", icon: "close" })))));
   }
   get el() { return getElement(this); }
 };