blip-ds 1.201.1 → 1.203.0

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, e as createEvent, h, f as Host } from './index-bda47b0f.js';
 
-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}";
+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{width:0;height:0;opacity:0}.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;-webkit-transition:width 0.65s, height 0.65s;transition:width 0.65s, height 0.65s}.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;border-color:#202c44}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#202c44}.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 {

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

@@ -1 +1 @@
-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}}}));
+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{width:0;height:0;opacity:0}.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;-webkit-transition:width 0.65s, height 0.65s;transition:width 0.65s, height 0.65s}.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;border-color:#202c44}.radio__input[type=radio]:checked~.radio__circle .radio__circle__pointer{background-color:#3f7de8}.radio__input[type=radio]:checked~.radio__circle:hover{border-color:#202c44}.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,7 @@
 import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bda47b0f.js';
+import { w as whitespaceValidation, e as emailValidation } from './validations-6d914b78.js';
 
-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 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}.inside-input-left.sc-bds-select-chips{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:8px}.input-chips__chip.sc-bds-select-chips{margin:2px 4px 2px 0px}.input-chips__chips.sc-bds-select-chips{-ms-flex:1;flex:1}";
 
 const SelectChips = class {
   constructor(hostRef) {
@@ -9,7 +10,23 @@ const SelectChips = class {
     this.bdsCancel = createEvent(this, "bdsCancel", 7);
     this.bdsFocus = createEvent(this, "bdsFocus", 7);
     this.bdsBlur = createEvent(this, "bdsBlur", 7);
+    this.bdsChangeChips = createEvent(this, "bdsChangeChips", 7);
+    this.bdsSelectChipsInput = createEvent(this, "bdsSelectChipsInput", 7);
+    this.bdsSubmit = createEvent(this, "bdsSubmit", 7);
     this.isOpen = false;
+    /**
+     * Used to set the danger behavior by the internal validators
+     */
+    this.validationDanger = false;
+    /**
+     * Conditions the element to say whether it is pressed or not, to add styles.
+     */
+    this.isPressed = false;
+    /**
+     * Used to set the error message setted by the internal validators
+     */
+    this.validationMesage = '';
+    this.internalChips = [];
     /**
      * The options of the select
      * Should be passed this way:
@@ -43,10 +60,6 @@ const SelectChips = class {
      * Disabled input.
      */
     this.disabled = false;
-    /**
-     * Data test is the prop to specifically test the component action object.
-     */
-    this.dataTest = null;
     /**
      *  label in input, with he the input size increases.
      */
@@ -67,11 +80,37 @@ const SelectChips = class {
      *  Specify if is possible to create a new tag that is not on the options.
      */
     this.notFoundMessage = 'No results found';
-    this.onFocus = () => {
-      this.bdsFocus.emit();
-    };
-    this.onBlur = () => {
-      this.bdsBlur.emit();
+    /**
+     * Defining the type is important so that it is possible to carry out validations. Can be one of:
+     * 'text' and 'email;
+     */
+    this.type = 'text';
+    /**
+     * The delimiter is used to add multiple chips in the same string.
+     */
+    this.delimiters = /,|;/;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    this.disableSubmit = false;
+    /**
+     * Indicated to pass a help the user in complex filling.
+     */
+    this.helperMessage = '';
+    /**
+     * Prop to insert the name of the input
+     */
+    this.inputName = '';
+    /**
+     * A tip for the user who can enter no controls.
+     */
+    this.placeholder = '';
+    /**
+     * Data test is the prop to specifically test the component action object.
+     */
+    this.dataTest = null;
+    this.handleChangeChipsValue = async () => {
+      await this.resetFilterOptions();
     };
     this.toggle = () => {
       if (!this.disabled) {
@@ -82,6 +121,15 @@ const SelectChips = class {
       const { detail: { value }, } = event;
       const text = this.getText(value);
       await this.addChip(text);
+      this.toggle();
+    };
+    this.handlerNewOption = async (text) => {
+      await this.addChip(text);
+      this.toggle();
+    };
+    this.getText = (value) => {
+      const el = this.childOptions.find((option) => option.value === value);
+      return this.getTextFromOption(el);
     };
     this.getTextFromOption = (opt) => {
       var _a, _b;
@@ -96,48 +144,47 @@ const SelectChips = class {
       }
       return (opt === null || opt === void 0 ? void 0 : opt.titleText) ? opt.titleText : (_b = (_a = opt === null || opt === void 0 ? void 0 : opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
     };
-    this.getText = (value) => {
-      const el = this.childOptions.find((option) => option.value === value);
-      return this.getTextFromOption(el);
+    this.setFocusWrapper = () => {
+      if (this.nativeInput) {
+        this.nativeInput.focus();
+      }
     };
-    this.handlerNewOption = async (text) => {
-      await this.addChip(text);
+    this.removeFocusWrapper = () => {
+      this.nativeInput.blur();
     };
-    this.setFocusWrapper = () => {
+    this.onClickWrapper = () => {
+      this.onFocus();
       if (this.nativeInput) {
-        this.nativeInput.setFocus();
+        this.nativeInput.focus();
       }
     };
-    this.removeFocusWrapper = (event) => {
-      const isInputElement = event.relatedTarget.localName === 'bds-input-chips';
-      if (this.nativeInput && !isInputElement) {
-        this.nativeInput.removeFocus();
+    this.onFocus = () => {
+      this.bdsFocus.emit();
+      this.isPressed = true;
+    };
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
       }
+      this.bdsSelectChipsInput.emit(ev);
     };
     this.keyPressWrapper = (event) => {
-      const isSelectElement = event.target.localName === 'bds-select';
-      const isInputElement = event.target.localName === 'bds-input-chips';
       switch (event.key) {
         case 'Enter':
-          if (this.childOptionsEnabled.length === 1) {
-            this.nativeInput.add(this.childOptionsEnabled[0].textContent);
-          }
-          else {
-            if (!this.canAddNew) {
-              return;
-            }
-            this.nativeInput.add(this.nativeInput.value);
-          }
-          this.nativeInput.value = '';
-          if (!this.isOpen && (isSelectElement || isInputElement)) {
-            this.toggle();
+          this.setChip(this.value);
+          this.value = '';
+          break;
+        case 'Backspace' || 'Delete':
+          if ((this.value === null || this.value.length <= 0) && this.internalChips.length) {
+            this.removeLastChip();
+            this.handleChangeChipsValue;
+            this.bdsChangeChips.emit({ data: this.internalChips });
           }
           break;
       }
     };
     this.changedInputValue = async () => {
-      // console.log('TRACE [select-chips] changedInputValue:', { nativeInput: this.nativeInput.value, value: this.value });
-      // Update this.value for trigger render componente, same two-way binding
       this.value = this.nativeInput.value;
       if (this.nativeInput.value) {
         await this.filterOptions(this.nativeInput.value);
@@ -149,70 +196,89 @@ const SelectChips = class {
         this.isOpen = true;
       }
     };
-    this.handleChangeChipsValue = async () => {
-      // console.log('TRACE [select-chips] handleChangeChipsValue 1:', { chips: this.nativeInput.chips });
-      this.nativeInput.value = '';
-      await this.resetFilterOptions();
-    };
   }
   handleWindow(ev) {
     if (!this.el.contains(ev.target)) {
       this.isOpen = false;
     }
   }
+  /**
+   * Call change event before alter chips values.
+   */
+  valueChanged() {
+    if (this.chips) {
+      if (typeof this.chips === 'string') {
+        try {
+          this.internalChips = JSON.parse(this.chips);
+        }
+        catch (_a) {
+          this.internalChips = [];
+        }
+      }
+      else {
+        this.internalChips = this.chips;
+      }
+    }
+    else {
+      this.internalChips = [];
+    }
+  }
+  internalValueChanged() {
+    this.handleChangeChipsValue();
+    this.bdsChangeChips.emit({ data: this.internalChips, value: this.getLastChip() });
+  }
   /**
    * Return the validity of the input chips.
    */
   async isValid() {
-    return this.nativeInput.isValid();
+    return this.validateChips();
   }
   /**
-   * Return the internal chips.
+   * Return the chips
    */
   async getChips() {
-    return await this.nativeInput.get();
+    return this.internalChips;
   }
-  componentWillRender() {
-    if (this.options.length) {
-      try {
-        this.internalOptions = typeof this.options === 'string' ? JSON.parse(this.options) : this.options;
-      }
-      catch (e) {
-        this.internalOptions = [];
-      }
-    }
+  /**
+   * Clear all chips
+   */
+  async clear() {
+    this.internalChips = [];
+    this.value = '';
   }
-  async connectedCallback() {
-    for (const option of this.childOptions) {
-      option.addEventListener('optionSelected', this.handler);
-    }
+  async add(value) {
+    this.setChip(value);
+  }
+  async setFocus() {
+    this.nativeInput.focus();
+  }
+  async removeFocus() {
+    this.nativeInput.blur();
+  }
+  componentWillLoad() {
+    this.valueChanged();
   }
   async componentDidLoad() {
     await this.resetFilterOptions();
   }
-  get childOptions() {
-    return Array.from(this.el.querySelectorAll('bds-select-option:not(#option-add):not(#no-option)'));
+  async connectedCallback() {
+    for (const option of this.childOptions) {
+      option.addEventListener('optionSelected', this.handler);
+    }
   }
   get childOptionsEnabled() {
     return Array.from(this.el.querySelectorAll('bds-select-option:not([invisible]):not(#option-add):not(#no-option)'));
   }
-  enableCreateOption() {
-    return !!(this.childOptionsEnabled.length === 0 && this.nativeInput && this.nativeInput.value);
-  }
-  async addChip(chip) {
-    await this.nativeInput.add(chip);
-    this.nativeInput.value = '';
-    this.toggle();
+  get childOptions() {
+    return Array.from(this.el.querySelectorAll('bds-select-option:not(#option-add):not(#no-option)'));
   }
   async filterOptions(term) {
-    // console.log('TRACE [select-chips] filterOptions 1:', { term, childOptions: this.childOptions });
     if (!term) {
       await this.resetFilterOptions();
       return;
     }
     for (const option of this.childOptions) {
-      // console.log('TRACE [select-chips] filterOptions 2:', { option });
-      const isExistsChip = this.existsChip(option.textContent, await this.nativeInput.get());
+      const isExistsChip = this.existsChip(option.textContent, await this.getChips());
       const optionTextLower = option.textContent.toLowerCase();
       const termLower = term.toLowerCase();
       if (isExistsChip) {
@@ -227,9 +293,10 @@ const SelectChips = class {
     }
   }
   async resetFilterOptions() {
+    var _a;
     for (const option of this.childOptions) {
-      const optionText = option.querySelector('bds-typo').textContent;
-      if (this.existsChip(optionText, await this.nativeInput.get())) {
+      const optionText = (_a = option.querySelector('bds-typo')) === null || _a === void 0 ? void 0 : _a.textContent;
+      if (this.existsChip(optionText, await this.getChips())) {
         option.setAttribute('invisible', 'invisible');
       }
       else {
@@ -240,12 +307,125 @@ const SelectChips = class {
   existsChip(optionChip, chips) {
     return chips.some((chip) => optionChip === chip);
   }
+  enableCreateOption() {
+    return !!(this.childOptionsEnabled.length === 0 && this.nativeInput && this.nativeInput.value);
+  }
+  async addChip(chip) {
+    await this.setChip(chip);
+    this.nativeInput.value = '';
+  }
+  validateChips() {
+    if (this.type === 'email') {
+      return !this.internalChips.some((chip) => !this.validateChip(chip));
+    }
+    else {
+      return true;
+    }
+  }
+  handleOnBlur() {
+    this.bdsBlur.emit();
+    this.isPressed = false;
+  }
+  getLastChip() {
+    return this.internalChips[this.internalChips.length - 1];
+  }
+  verifyAndSubstituteDelimiters(value) {
+    if (value.length === 1 && value[0].match(this.delimiters)) {
+      return '';
+    }
+    let newValue = value.replace(/;/g, ',').replace(/\,+|;+/g, ',');
+    if (newValue[0].match(this.delimiters)) {
+      newValue = newValue.substring(1);
+    }
+    return newValue;
+  }
+  async handleChange(event) {
+    this.changedInputValue;
+    const { detail: { value }, } = event;
+    this.value = value ? value.trim() : '';
+    if (value.length === 0)
+      return;
+    const existTerm = value.match(this.delimiters);
+    if (!existTerm)
+      return;
+    const newValue = this.verifyAndSubstituteDelimiters(value);
+    if (!newValue) {
+      this.clearInputValues();
+      return;
+    }
+    const words = newValue.split(this.delimiters);
+    words.forEach((word) => {
+      this.setChip(word);
+    });
+    this.clearInputValues();
+  }
+  clearInputValues(value = '') {
+    this.nativeInput.value = value;
+    this.value = value;
+  }
+  setChip(name) {
+    if (!this.duplicated) {
+      const exists = this.internalChips.some((chip) => chip.toLowerCase() === name.toLowerCase());
+      if (exists)
+        return;
+    }
+    if (!whitespaceValidation(name)) {
+      return;
+    }
+    this.internalChips = [...this.internalChips, name];
+  }
+  validateChip(name) {
+    const trimmedName = name.trim();
+    if (this.type === 'email' && emailValidation(trimmedName)) {
+      return false;
+    }
+    return true;
+  }
+  removeLastChip() {
+    this.internalChips = this.internalChips.slice(0, this.internalChips.length - 1);
+  }
+  removeChip(event) {
+    const { detail: { id }, } = event;
+    this.internalChips = this.internalChips.filter((_chip, index) => index.toString() !== id);
+  }
+  renderChips() {
+    if (!this.internalChips.length) {
+      return [];
+    }
+    return this.internalChips.map((chip, index) => {
+      const id = index.toString();
+      return (h("bds-chip-clickable", { id: id, key: id, color: "default", close: !this.disabled, onChipClickableClose: (event) => this.removeChip(event) }, chip));
+    });
+  }
+  renderIcon() {
+    return (this.icon && (h("div", { class: {
+        input__icon: true,
+        'input__icon--large': !!this.label,
+      } }, h("bds-icon", { size: this.label ? 'medium' : 'small', name: this.icon, color: "inherit" }))));
+  }
+  renderLabel() {
+    return (this.label && (h("label", { class: {
+        input__container__label: true,
+        'input__container__label--pressed': this.isPressed && !this.disabled,
+      } }, h("bds-typo", { variant: "fs-12", bold: "bold" }, this.label))));
+  }
+  renderMessage() {
+    const icon = this.danger ? 'error' : 'info';
+    let message = this.danger ? this.errorMessage : this.helperMessage;
+    if (!message && this.validationDanger)
+      message = this.validationMesage;
+    const styles = this.danger || this.validationDanger ? 'input__message input__message--danger' : 'input__message';
+    if (message) {
+      return (h("div", { class: styles, part: "input__message" }, h("div", { class: "input__message__icon" }, h("bds-icon", { size: "x-small", name: icon, theme: "solid", color: "inherit" })), h("bds-typo", { variant: "fs-12" }, message)));
+    }
+    return undefined;
+  }
   generateKey(value) {
     return value.toLowerCase().replace(/ /g, '-');
   }
   render() {
-    // console.log('TRACE [select-chips] render', this.childOptions);
     const iconArrow = this.isOpen ? 'arrow-up' : 'arrow-down';
+    const isPressed = this.isPressed && !this.disabled;
     let internalOptions = [];
     if (this.options) {
       if (typeof this.options === 'string') {
@@ -258,12 +438,23 @@ const SelectChips = class {
         internalOptions = this.options;
       }
     }
-    return (h("div", { class: "select", tabindex: "0", onFocus: this.setFocusWrapper, onBlur: this.removeFocusWrapper, onKeyPress: this.keyPressWrapper }, h("bds-input-chips", { ref: (el) => (this.nativeInput = el), 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 }, 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", onFocus: this.setFocusWrapper, onBlur: this.removeFocusWrapper, onKeyPress: this.keyPressWrapper }, h("div", { class: { element_input: true }, "aria-disabled": this.disabled ? 'true' : null, onClick: this.toggle }, 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 }, this.renderIcon(), h("div", { class: "input__container" }, this.renderLabel(), h("div", { class: { input__container__wrapper: true } }, this.internalChips.length > 0 && h("span", { class: "inside-input-left" }, this.renderChips()), h("input", { ref: (input) => (this.nativeInput = input), class: { input__container__text: true }, name: this.inputName, maxlength: this.maxlength, placeholder: this.placeholder, onInput: this.onInput, onFocus: this.onFocus, onBlur: () => this.handleOnBlur(), onChange: () => this.handleChange, value: this.value, disabled: this.disabled, "data-test": this.dataTest }))), h("div", { class: "select__icon" }, h("bds-icon", { size: "small", name: iconArrow, color: "inherit" }))), this.renderMessage()), h("div", { class: {
         select__options: true,
         'select__options--open': this.isOpen,
       } }, internalOptions.map((option) => (h("bds-select-option", { key: this.generateKey(option.value), onOptionSelected: this.handler, value: option.value, status: option.status }, option.label))), h("slot", null), this.canAddNew && this.enableCreateOption() && (h("bds-select-option", { id: "option-add", value: "add", onClick: () => this.handlerNewOption(this.nativeInput.value) }, this.newPrefix, this.nativeInput.value)), !this.canAddNew && this.enableCreateOption() && (h("bds-select-option", { id: "no-option", value: "add" }, this.notFoundMessage)))));
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "chips": ["valueChanged"],
+    "internalChips": ["internalValueChanged"]
+  }; }
 };
 SelectChips.style = selectCss;