blip-ds 1.199.1 → 1.200.2

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, f as Host } from './index-bda47b0f.js';
 
-const inputPasswordCss = ".sc-bds-input-password-h{display:block}.input__password--icon.sc-bds-input-password{color:#8ca0b3;display:-ms-flexbox;display:flex}";
+const inputPasswordCss = ".sc-bds-input-password-h{display:block}.element_input.sc-bds-input-password{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-password input.sc-bds-input-password{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input.sc-bds-input-password input.sc-bds-input-password::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password::placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input.sc-bds-input-password{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-password{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.sc-bds-input-password: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-password{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-password .input__icon.sc-bds-input-password{color:#3f7de8;background-color:#e8f2ff}.input--state-primary.sc-bds-input-password .input__container__label.sc-bds-input-password{color:#8ca0b3}.input--state-primary.sc-bds-input-password .input__container__label--pressed.sc-bds-input-password{color:#3f7de8}.input--state-primary.sc-bds-input-password .input__container__text.sc-bds-input-password{caret-color:#3f7de8;color:#202c44}.input--state-danger.sc-bds-input-password{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.sc-bds-input-password: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-password{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-password .input__icon.sc-bds-input-password{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger.sc-bds-input-password .input__container__label.sc-bds-input-password{color:#8ca0b3}.input--state-danger.sc-bds-input-password .input__container__label--pressed.sc-bds-input-password{color:#ff4c4c}.input--state-danger.sc-bds-input-password .input__container__text.sc-bds-input-password{caret-color:#ff4c4c;color:#202c44}.input--state-disabled.sc-bds-input-password{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-password: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-password{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-password .input__icon.sc-bds-input-password{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled.sc-bds-input-password .input__container__label.sc-bds-input-password{color:#b9cbd3}.input--state-disabled.sc-bds-input-password .input__container__label--pressed.sc-bds-input-password{color:#b9cbd3}.input--state-disabled.sc-bds-input-password .input__container__text.sc-bds-input-password{caret-color:#b9cbd3;color:#b9cbd3}.input--label.sc-bds-input-password{padding:7px 4px 8px 12px}.input__icon.sc-bds-input-password{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-password{padding:4px}.input__container.sc-bds-input-password{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-password{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips.sc-bds-input-password{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips.sc-bds-input-password::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips.sc-bds-input-password::-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-password{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text.sc-bds-input-password{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-password:focus{outline:0}.input__container__text.sc-bds-input-password::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text.sc-bds-input-password:focus{outline:0}.input__container__text[type=checkbox].sc-bds-input-password,.input__container__text[type=radio].sc-bds-input-password{width:13px;height:13px}.input__container__text[type=search].sc-bds-input-password{-webkit-appearance:textfield;-webkit-box-sizing:content-box}.sc-bds-input-password::-webkit-search-decoration{display:none}.input__container__text[type=reset].sc-bds-input-password,.input__container__text[type=button].sc-bds-input-password,.input__container__text[type=submit].sc-bds-input-password{overflow:visible}.input__container__text.sc-bds-input-password::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text.sc-bds-input-password::-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-password{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-password bds-typo.sc-bds-input-password{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon.sc-bds-input-password{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger.sc-bds-input-password{color:#ff4c4c}.input__password--icon.sc-bds-input-password{color:#8ca0b3;display:-ms-flexbox;display:flex}";
 
 const InputPassword = class {
   constructor(hostRef) {
@@ -11,6 +11,18 @@ const InputPassword = class {
     this.bdsInputPasswordFocus = createEvent(this, "bdsInputPasswordFocus", 7);
     this.bdsInputPasswordSubmit = createEvent(this, "bdsInputPasswordSubmit", 7);
     this.bdsKeyDownBackspace = createEvent(this, "bdsKeyDownBackspace", 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.openEyes = false;
     /**
      * The value of the input.
@@ -64,11 +76,20 @@ const InputPassword = class {
      * Data test is the prop to specifically test the component action object.
      */
     this.dataTest = null;
+    this.refNativeInput = (el) => {
+      this.nativeInput = el;
+    };
     this.toggleEyePassword = () => {
       if (!this.disabled) {
         this.openEyes = !this.openEyes;
       }
     };
+    this.onClickWrapper = () => {
+      this.onFocus();
+      if (this.nativeInput) {
+        this.nativeInput.focus();
+      }
+    };
     this.onChange = (ev) => {
       const input = ev.target;
       if (input) {
@@ -85,9 +106,11 @@ const InputPassword = class {
     };
     this.onBlur = () => {
       this.bdsInputPasswordBlur.emit();
+      this.isPressed = false;
     };
     this.onFocus = () => {
       this.bdsInputPasswordFocus.emit();
+      this.isPressed = true;
     };
     this.onSubmit = () => {
       this.bdsInputPasswordSubmit.emit();
@@ -101,11 +124,42 @@ const InputPassword = class {
       return 'current-password';
     return this.autoComplete;
   }
+  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 iconPassword = this.openEyes ? 'eye-open' : 'eye-closed';
     const type = this.openEyes ? 'text' : 'password';
     const autocomplete = this.getAutoComplete();
-    return (h(Host, null, h("bds-input", { type: type, "input-name": this.inputName, value: this.value, label: this.label, min: this.min, max: this.max, minlength: this.minlength, maxlength: this.maxlength, "helper-message": this.helperMessage, "error-message": this.errorMessage, danger: this.danger, icon: this.icon, disabled: this.disabled, readonly: this.readonly, "auto-complete": autocomplete, "auto-capitalize": this.autoCapitalize, placeholder: this.placeholder, "data-test": this.dataTest, onBdsChange: this.onChange, onBdsInput: this.onInput, onBdsOnBlur: this.onBlur, onBdsFocus: this.onFocus, onBdsSubmit: this.onSubmit, onBdsKeyDownBackspace: this.keyPressWrapper }, h("div", { slot: "input-right", class: "input__password--icon", onClick: this.toggleEyePassword }, h("bds-icon", { size: "small", name: iconPassword, color: "inherit" })))));
+    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 } }, h("input", { ref: this.refNativeInput, class: { input__container__text: true }, type: type, name: this.inputName, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, readOnly: this.readonly, autocomplete: autocomplete, autocapitalize: this.autoCapitalize, placeholder: this.placeholder, onChange: this.onChange, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur, onSubmit: this.onSubmit, value: this.value, disabled: this.disabled, "data-test": this.dataTest }))), h("div", { class: "input__password--icon", onClick: this.toggleEyePassword }, h("bds-icon", { size: "small", name: iconPassword, color: "inherit" }))), this.renderMessage())));
   }
 };
 InputPassword.style = inputPasswordCss;

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

@@ -1 +1 @@
-System.register(["./index-461526c7.system.js"],(function(s){"use strict";var t,e,i,n;return{setters:[function(s){t=s.r;e=s.e;i=s.h;n=s.f}],execute:function(){var a=".sc-bds-input-password-h{display:block}.input__password--icon.sc-bds-input-password{color:#8ca0b3;display:-ms-flexbox;display:flex}";var o=s("bds_input_password",function(){function s(s){var i=this;t(this,s);this.bdsInputPasswordChange=e(this,"bdsInputPasswordChange",7);this.bdsInputPasswordInput=e(this,"bdsInputPasswordInput",7);this.bdsInputPasswordBlur=e(this,"bdsInputPasswordBlur",7);this.bdsInputPasswordFocus=e(this,"bdsInputPasswordFocus",7);this.bdsInputPasswordSubmit=e(this,"bdsInputPasswordSubmit",7);this.bdsKeyDownBackspace=e(this,"bdsKeyDownBackspace",7);this.openEyes=false;this.value="";this.label="";this.inputName="";this.readonly=false;this.helperMessage="";this.errorMessage="";this.danger=false;this.icon="";this.disabled=false;this.autoCapitalize="off";this.autoComplete="off";this.placeholder="";this.dataTest=null;this.toggleEyePassword=function(){if(!i.disabled){i.openEyes=!i.openEyes}};this.onChange=function(s){var t=s.target;if(t){i.value=t.value||""}i.bdsInputPasswordChange.emit({value:i.value==null?i.value:i.value.toString()})};this.onInput=function(s){var t=s.target;if(t){i.value=t.value||""}i.bdsInputPasswordInput.emit(s)};this.onBlur=function(){i.bdsInputPasswordBlur.emit()};this.onFocus=function(){i.bdsInputPasswordFocus.emit()};this.onSubmit=function(){i.bdsInputPasswordSubmit.emit()};this.keyPressWrapper=function(s){i.bdsKeyDownBackspace.emit({ev:s,value:i.value})}}s.prototype.getAutoComplete=function(){if(!this.openEyes)return"current-password";return this.autoComplete};s.prototype.render=function(){var s=this.openEyes?"eye-open":"eye-closed";var t=this.openEyes?"text":"password";var e=this.getAutoComplete();return i(n,null,i("bds-input",{type:t,"input-name":this.inputName,value:this.value,label:this.label,min:this.min,max:this.max,minlength:this.minlength,maxlength:this.maxlength,"helper-message":this.helperMessage,"error-message":this.errorMessage,danger:this.danger,icon:this.icon,disabled:this.disabled,readonly:this.readonly,"auto-complete":e,"auto-capitalize":this.autoCapitalize,placeholder:this.placeholder,"data-test":this.dataTest,onBdsChange:this.onChange,onBdsInput:this.onInput,onBdsOnBlur:this.onBlur,onBdsFocus:this.onFocus,onBdsSubmit:this.onSubmit,onBdsKeyDownBackspace:this.keyPressWrapper},i("div",{slot:"input-right",class:"input__password--icon",onClick:this.toggleEyePassword},i("bds-icon",{size:"small",name:s,color:"inherit"}))))};return s}());o.style=a}}}));
+System.register(["./index-461526c7.system.js"],(function(s){"use strict";var t,i,e,n;return{setters:[function(s){t=s.r;i=s.e;e=s.h;n=s.f}],execute:function(){var o='.sc-bds-input-password-h{display:block}.element_input.sc-bds-input-password{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-password input.sc-bds-input-password{-webkit-box-shadow:inherit;box-shadow:inherit}.element_input.sc-bds-input-password input.sc-bds-input-password::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password::-moz-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password:-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password::-ms-input-placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password::placeholder{color:#b9cbd3;opacity:1}.element_input.sc-bds-input-password input.sc-bds-input-password::-webkit-input-placeholder{color:#b9cbd3;opacity:1}.input.sc-bds-input-password{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-password{border:1px solid #d2dfe6;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-primary.sc-bds-input-password: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-password{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-password .input__icon.sc-bds-input-password{color:#3f7de8;background-color:#e8f2ff}.input--state-primary.sc-bds-input-password .input__container__label.sc-bds-input-password{color:#8ca0b3}.input--state-primary.sc-bds-input-password .input__container__label--pressed.sc-bds-input-password{color:#3f7de8}.input--state-primary.sc-bds-input-password .input__container__text.sc-bds-input-password{caret-color:#3f7de8;color:#202c44}.input--state-danger.sc-bds-input-password{border:1px solid #ff4c4c;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px}.input--state-danger.sc-bds-input-password: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-password{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-password .input__icon.sc-bds-input-password{color:#ff4c4c;background-color:#ffa5a5}.input--state-danger.sc-bds-input-password .input__container__label.sc-bds-input-password{color:#8ca0b3}.input--state-danger.sc-bds-input-password .input__container__label--pressed.sc-bds-input-password{color:#ff4c4c}.input--state-danger.sc-bds-input-password .input__container__text.sc-bds-input-password{caret-color:#ff4c4c;color:#202c44}.input--state-disabled.sc-bds-input-password{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-password: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-password{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-password .input__icon.sc-bds-input-password{color:#b9cbd3;background-color:#f8fbfb}.input--state-disabled.sc-bds-input-password .input__container__label.sc-bds-input-password{color:#b9cbd3}.input--state-disabled.sc-bds-input-password .input__container__label--pressed.sc-bds-input-password{color:#b9cbd3}.input--state-disabled.sc-bds-input-password .input__container__text.sc-bds-input-password{caret-color:#b9cbd3;color:#b9cbd3}.input--label.sc-bds-input-password{padding:7px 4px 8px 12px}.input__icon.sc-bds-input-password{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-password{padding:4px}.input__container.sc-bds-input-password{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-password{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.input__container__wrapper__chips.sc-bds-input-password{display:inline;max-height:100px;overflow:auto}.input__container__wrapper__chips.sc-bds-input-password::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__wrapper__chips.sc-bds-input-password::-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-password{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input__container__text.sc-bds-input-password{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-password:focus{outline:0}.input__container__text.sc-bds-input-password::-webkit-file-upload-button{padding:0;border:0;background:none}.input__container__text.sc-bds-input-password:focus{outline:0}.input__container__text[type=checkbox].sc-bds-input-password,.input__container__text[type=radio].sc-bds-input-password{width:13px;height:13px}.input__container__text[type=search].sc-bds-input-password{-webkit-appearance:textfield;-webkit-box-sizing:content-box}.sc-bds-input-password::-webkit-search-decoration{display:none}.input__container__text[type=reset].sc-bds-input-password,.input__container__text[type=button].sc-bds-input-password,.input__container__text[type=submit].sc-bds-input-password{overflow:visible}.input__container__text.sc-bds-input-password::-webkit-scrollbar{width:16px;background-color:transparent}.input__container__text.sc-bds-input-password::-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-password{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-password bds-typo.sc-bds-input-password{margin-top:0px;-ms-flex-item-align:self-start;align-self:self-start}.input__message__icon.sc-bds-input-password{display:-ms-flexbox;display:flex;padding-right:4px;margin-top:0px;padding-top:2px}.input__message--danger.sc-bds-input-password{color:#ff4c4c}.input__password--icon.sc-bds-input-password{color:#8ca0b3;display:-ms-flexbox;display:flex}';var r=s("bds_input_password",function(){function s(s){var e=this;t(this,s);this.bdsInputPasswordChange=i(this,"bdsInputPasswordChange",7);this.bdsInputPasswordInput=i(this,"bdsInputPasswordInput",7);this.bdsInputPasswordBlur=i(this,"bdsInputPasswordBlur",7);this.bdsInputPasswordFocus=i(this,"bdsInputPasswordFocus",7);this.bdsInputPasswordSubmit=i(this,"bdsInputPasswordSubmit",7);this.bdsKeyDownBackspace=i(this,"bdsKeyDownBackspace",7);this.validationDanger=false;this.isPressed=false;this.validationMesage="";this.openEyes=false;this.value="";this.label="";this.inputName="";this.readonly=false;this.helperMessage="";this.errorMessage="";this.danger=false;this.icon="";this.disabled=false;this.autoCapitalize="off";this.autoComplete="off";this.placeholder="";this.dataTest=null;this.refNativeInput=function(s){e.nativeInput=s};this.toggleEyePassword=function(){if(!e.disabled){e.openEyes=!e.openEyes}};this.onClickWrapper=function(){e.onFocus();if(e.nativeInput){e.nativeInput.focus()}};this.onChange=function(s){var t=s.target;if(t){e.value=t.value||""}e.bdsInputPasswordChange.emit({value:e.value==null?e.value:e.value.toString()})};this.onInput=function(s){var t=s.target;if(t){e.value=t.value||""}e.bdsInputPasswordInput.emit(s)};this.onBlur=function(){e.bdsInputPasswordBlur.emit();e.isPressed=false};this.onFocus=function(){e.bdsInputPasswordFocus.emit();e.isPressed=true};this.onSubmit=function(){e.bdsInputPasswordSubmit.emit()};this.keyPressWrapper=function(s){e.bdsKeyDownBackspace.emit({ev:s,value:e.value})}}s.prototype.getAutoComplete=function(){if(!this.openEyes)return"current-password";return this.autoComplete};s.prototype.renderIcon=function(){return this.icon&&e("div",{class:{input__icon:true,"input__icon--large":!!this.label}},e("bds-icon",{size:this.label?"medium":"small",name:this.icon,color:"inherit"}))};s.prototype.renderLabel=function(){return this.label&&e("label",{class:{input__container__label:true,"input__container__label--pressed":this.isPressed&&!this.disabled}},e("bds-typo",{variant:"fs-12",bold:"bold"},this.label))};s.prototype.renderMessage=function(){var s=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 e("div",{class:i,part:"input__message"},e("div",{class:"input__message__icon"},e("bds-icon",{size:"x-small",name:s,theme:"solid",color:"inherit"})),e("bds-typo",{variant:"fs-12"},t))}return undefined};s.prototype.render=function(){var s=this.isPressed&&!this.disabled;var t=this.openEyes?"eye-open":"eye-closed";var i=this.openEyes?"text":"password";var o=this.getAutoComplete();return e(n,null,e("div",{class:{element_input:true},"aria-disabled":this.disabled?"true":null},e("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":s},onClick:this.onClickWrapper,onKeyDown:this.keyPressWrapper,part:"input-container"},this.renderIcon(),e("div",{class:"input__container"},this.renderLabel(),e("div",{class:{input__container__wrapper:true}},e("input",{ref:this.refNativeInput,class:{input__container__text:true},type:i,name:this.inputName,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,readOnly:this.readonly,autocomplete:o,autocapitalize:this.autoCapitalize,placeholder:this.placeholder,onChange:this.onChange,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur,onSubmit:this.onSubmit,value:this.value,disabled:this.disabled,"data-test":this.dataTest}))),e("div",{class:"input__password--icon",onClick:this.toggleEyePassword},e("bds-icon",{size:"small",name:t,color:"inherit"}))),this.renderMessage()))};return s}());r.style=o}}}));

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, e as createEvent, h } from './index-bda47b0f.js';
+import { r as registerInstance, e as createEvent, h, f as Host } from './index-bda47b0f.js';
 
-const radioCss = ".radio{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:16px;height:16px;-ms-flex-negative:0;flex-shrink:0;border:1px solid #3f7de8;border-radius:100%;background:#ffffff}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:#ffffff;height:10px;width:10px}.radio__circle:hover{border-color:#125ad5}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:#505f79}.radio__input[type=radio]:checked~.radio__circle{background:#ffffff}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#125ad5}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:#125ad5}.radio__input[type=radio]:disabled~.radio__circle{border-color:#637798;background-color:#e8f2ff}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer--checked{background-color:#637798}.radio__input[type=radio]:disabled~.radio__text,.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";
+const radioCss = ":host{display:-ms-flexbox;display:flex}.radio{display:-ms-flexbox;display:flex;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;-ms-flex-negative:0;flex-shrink:0;border:2px solid #505f79;padding:4px;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;position:relative}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:transparent;height:10px;width:10px}.radio__circle:hover{border-color:#6e7b91}.radio__circle:hover .hover{display:-ms-flexbox;display:flex;background-color:#202c44;position:absolute;width:40px;height:40px;opacity:0.1;border-radius:24px}.radio__circle .focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid #c226fb;border-radius:4px;padding:4px;width:100%;height:100%;outline:none}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:#202c44}.radio__input[type=radio]:checked~.radio__circle{background:transparent}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#125ad5}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:#125ad5}.radio__input[type=radio]:disabled~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:hover~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:hover~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:checked~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:checked~.radio__circle .radio__circle__pointer{background-color:#505f79}.radio__input[type=radio]:disabled:checked:hover~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:checked:hover~.radio__circle .radio__circle__pointer{background-color:#505f79}.radio__input[type=radio]:disabled~.radio__text{color:#505f79;cursor:not-allowed}.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";
 
 let radioButtonIds = 0;
 const Radio = class {
@@ -41,8 +41,15 @@ const Radio = class {
   connectedCallback() {
     this.radioId = this.refer || `bds-radio-${radioButtonIds++}`;
   }
+  handleClickKey(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && !this.disabled) {
+      this.onClick(event);
+      event.preventDefault();
+      this.bdsClickChange.emit({ checked: this.checked });
+    }
+  }
   render() {
-    return (h("label", { class: "radio", htmlFor: this.radioId }, h("input", { class: "radio__input", type: "radio", ref: this.refNativeInput, id: this.radioId, onClick: this.onClick, disabled: this.disabled, checked: this.checked, value: this.value, name: this.name, "data-test": this.dataTest }), h("div", { class: "radio__circle" }, h("div", { class: "radio__circle__pointer" })), this.label && (h("bds-typo", { class: "radio__text", variant: "fs-14", tag: "span" }, this.label)), h("slot", null)));
+    return (h(Host, null, h("label", { class: "radio", htmlFor: this.radioId }, h("input", { class: "radio__input", type: "radio", ref: this.refNativeInput, id: this.radioId, onClick: this.onClick, disabled: this.disabled, checked: this.checked, value: this.value, name: this.name, "data-test": this.dataTest }), h("div", { class: "radio__circle" }, !this.disabled ? h("div", { class: "focus", tabindex: "0", onKeyDown: this.handleClickKey.bind(this) }) : '', !this.disabled ? h("div", { class: "hover" }) : '', h("div", { class: "radio__circle__pointer" })), this.label && (h("bds-typo", { class: "radio__text", variant: "fs-14", bold: this.checked ? 'bold' : 'regular', tag: "span" }, this.label)), h("slot", null))));
   }
   static get watchers() { return {
     "checked": ["checkedChanged"]

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

@@ -1 +1 @@
-System.register(["./index-461526c7.system.js"],(function(e){"use strict";var i,t,r;return{setters:[function(e){i=e.r;t=e.e;r=e.h}],execute:function(){var n=".radio{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:16px;height:16px;-ms-flex-negative:0;flex-shrink:0;border:1px solid #3f7de8;border-radius:100%;background:#ffffff}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:#ffffff;height:10px;width:10px}.radio__circle:hover{border-color:#125ad5}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:#505f79}.radio__input[type=radio]:checked~.radio__circle{background:#ffffff}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#125ad5}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:#125ad5}.radio__input[type=radio]:disabled~.radio__circle{border-color:#637798;background-color:#e8f2ff}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer--checked{background-color:#637798}.radio__input[type=radio]:disabled~.radio__text,.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";var o=0;var a=e("bds_radio",function(){function e(e){var r=this;i(this,e);this.bdsChange=t(this,"bdsChange",7);this.bdsClickChange=t(this,"bdsClickChange",7);this.checked=false;this.disabled=false;this.dataTest=null;this.onClick=function(e){r.checked=!r.checked;r.bdsClickChange.emit({checked:r.checked});e.stopPropagation()};this.refNativeInput=function(e){r.nativeInput=e}}e.prototype.checkedChanged=function(e){this.bdsChange.emit({checked:e})};e.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};e.prototype.getValue=function(){return Promise.resolve(this.nativeInput.checked)};e.prototype.connectedCallback=function(){this.radioId=this.refer||"bds-radio-".concat(o++)};e.prototype.render=function(){return r("label",{class:"radio",htmlFor:this.radioId},r("input",{class:"radio__input",type:"radio",ref:this.refNativeInput,id:this.radioId,onClick:this.onClick,disabled:this.disabled,checked:this.checked,value:this.value,name:this.name,"data-test":this.dataTest}),r("div",{class:"radio__circle"},r("div",{class:"radio__circle__pointer"})),this.label&&r("bds-typo",{class:"radio__text",variant:"fs-14",tag:"span"},this.label),r("slot",null))};Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedChanged"]}},enumerable:false,configurable:true});return e}());a.style=n}}}));
+System.register(["./index-461526c7.system.js"],(function(e){"use strict";var i,r,t,o;return{setters:[function(e){i=e.r;r=e.e;t=e.h;o=e.f}],execute:function(){var a=":host{display:-ms-flexbox;display:flex}.radio{display:-ms-flexbox;display:flex;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}.radio [type=radio]{display:none}.radio [type=radio]:focus{outline:0}.radio__circle{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;-ms-flex-negative:0;flex-shrink:0;border:2px solid #505f79;padding:4px;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent;position:relative}.radio__circle__pointer{-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:0.3s;transition-duration:0.3s;-webkit-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0s;transition-delay:0s;border-radius:100%;background:transparent;height:10px;width:10px}.radio__circle:hover{border-color:#6e7b91}.radio__circle:hover .hover{display:-ms-flexbox;display:flex;background-color:#202c44;position:absolute;width:40px;height:40px;opacity:0.1;border-radius:24px}.radio__circle .focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid #c226fb;border-radius:4px;padding:4px;width:100%;height:100%;outline:none}.radio__text{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;-ms-user-select:none;user-select:none;padding-left:8px;color:#202c44}.radio__input[type=radio]:checked~.radio__circle{background:transparent}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#125ad5}.radio__input[type=radio]:checked~.radio__circle:hover .radio__circle__pointer{background-color:#125ad5}.radio__input[type=radio]:disabled~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:hover~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:hover~.radio__circle .radio__circle__pointer{background-color:transparent}.radio__input[type=radio]:disabled:checked~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:checked~.radio__circle .radio__circle__pointer{background-color:#505f79}.radio__input[type=radio]:disabled:checked:hover~.radio__circle{border-color:#6e7b91;background-color:#d2dfe6}.radio__input[type=radio]:disabled:checked:hover~.radio__circle .radio__circle__pointer{background-color:#505f79}.radio__input[type=radio]:disabled~.radio__text{color:#505f79;cursor:not-allowed}.radio__input[type=radio]:disabled~.radio__circle{cursor:not-allowed}";var d=0;var n=e("bds_radio",function(){function e(e){var t=this;i(this,e);this.bdsChange=r(this,"bdsChange",7);this.bdsClickChange=r(this,"bdsClickChange",7);this.checked=false;this.disabled=false;this.dataTest=null;this.onClick=function(e){t.checked=!t.checked;t.bdsClickChange.emit({checked:t.checked});e.stopPropagation()};this.refNativeInput=function(e){t.nativeInput=e}}e.prototype.checkedChanged=function(e){this.bdsChange.emit({checked:e})};e.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};e.prototype.getValue=function(){return Promise.resolve(this.nativeInput.checked)};e.prototype.connectedCallback=function(){this.radioId=this.refer||"bds-radio-".concat(d++)};e.prototype.handleClickKey=function(e){if((e.key==="Enter"||e.key===" ")&&!this.disabled){this.onClick(e);e.preventDefault();this.bdsClickChange.emit({checked:this.checked})}};e.prototype.render=function(){return t(o,null,t("label",{class:"radio",htmlFor:this.radioId},t("input",{class:"radio__input",type:"radio",ref:this.refNativeInput,id:this.radioId,onClick:this.onClick,disabled:this.disabled,checked:this.checked,value:this.value,name:this.name,"data-test":this.dataTest}),t("div",{class:"radio__circle"},!this.disabled?t("div",{class:"focus",tabindex:"0",onKeyDown:this.handleClickKey.bind(this)}):"",!this.disabled?t("div",{class:"hover"}):"",t("div",{class:"radio__circle__pointer"})),this.label&&t("bds-typo",{class:"radio__text",variant:"fs-14",bold:this.checked?"bold":"regular",tag:"span"},this.label),t("slot",null)))};Object.defineProperty(e,"watchers",{get:function(){return{checked:["checkedChanged"]}},enumerable:false,configurable:true});return e}());n.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}}}));