blip-ds 1.201.0 → 1.202.1

package/dist/cjs/bds-select-chips.cjs.entry.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5599f73d.js');
+const validations = require('./validations-431d75ca.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) {
@@ -13,7 +14,23 @@ const SelectChips = class {
     this.bdsCancel = index.createEvent(this, "bdsCancel", 7);
     this.bdsFocus = index.createEvent(this, "bdsFocus", 7);
     this.bdsBlur = index.createEvent(this, "bdsBlur", 7);
+    this.bdsChangeChips = index.createEvent(this, "bdsChangeChips", 7);
+    this.bdsSelectChipsInput = index.createEvent(this, "bdsSelectChipsInput", 7);
+    this.bdsSubmit = index.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:
@@ -47,10 +64,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.
      */
@@ -71,11 +84,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) {
@@ -86,6 +125,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;
@@ -100,48 +148,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);
@@ -153,70 +200,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) {
@@ -231,9 +297,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 {
@@ -244,12 +311,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 (!validations.whitespaceValidation(name)) {
+      return;
+    }
+    this.internalChips = [...this.internalChips, name];
+  }
+  validateChip(name) {
+    const trimmedName = name.trim();
+    if (this.type === 'email' && validations.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$1) => {
+      const id = index$1.toString();
+      return (index.h("bds-chip-clickable", { id: id, key: id, color: "default", close: !this.disabled, onChipClickableClose: (event) => this.removeChip(event) }, chip));
+    });
+  }
+  renderIcon() {
+    return (this.icon && (index.h("div", { class: {
+        input__icon: true,
+        'input__icon--large': !!this.label,
+      } }, index.h("bds-icon", { size: this.label ? 'medium' : 'small', name: this.icon, color: "inherit" }))));
+  }
+  renderLabel() {
+    return (this.label && (index.h("label", { class: {
+        input__container__label: true,
+        'input__container__label--pressed': this.isPressed && !this.disabled,
+      } }, index.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 (index.h("div", { class: styles, part: "input__message" }, index.h("div", { class: "input__message__icon" }, index.h("bds-icon", { size: "x-small", name: icon, theme: "solid", color: "inherit" })), index.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') {
@@ -262,12 +442,23 @@ const SelectChips = class {
         internalOptions = this.options;
       }
     }
-    return (index.h("div", { class: "select", tabindex: "0", onFocus: this.setFocusWrapper, onBlur: this.removeFocusWrapper, onKeyPress: this.keyPressWrapper }, index.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 }, index.h("div", { slot: "input-right", class: "select__icon" }, index.h("bds-icon", { size: "small", name: iconArrow, color: "inherit" }))), index.h("div", { class: {
+    return (index.h("div", { class: "select", tabindex: "0", onFocus: this.setFocusWrapper, onBlur: this.removeFocusWrapper, onKeyPress: this.keyPressWrapper }, index.h("div", { class: { element_input: true }, "aria-disabled": this.disabled ? 'true' : null, onClick: this.toggle }, index.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(), index.h("div", { class: "input__container" }, this.renderLabel(), index.h("div", { class: { input__container__wrapper: true } }, this.internalChips.length > 0 && index.h("span", { class: "inside-input-left" }, this.renderChips()), index.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 }))), index.h("div", { class: "select__icon" }, index.h("bds-icon", { size: "small", name: iconArrow, color: "inherit" }))), this.renderMessage()), index.h("div", { class: {
         select__options: true,
         'select__options--open': this.isOpen,
       } }, internalOptions.map((option) => (index.h("bds-select-option", { key: this.generateKey(option.value), onOptionSelected: this.handler, value: option.value, status: option.status }, option.label))), index.h("slot", null), this.canAddNew && this.enableCreateOption() && (index.h("bds-select-option", { id: "option-add", value: "add", onClick: () => this.handlerNewOption(this.nativeInput.value) }, this.newPrefix, this.nativeInput.value)), !this.canAddNew && this.enableCreateOption() && (index.h("bds-select-option", { id: "no-option", value: "add" }, this.notFoundMessage)))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "chips": ["valueChanged"],
+    "internalChips": ["internalValueChanged"]
+  }; }
 };
 SelectChips.style = selectCss;
 

package/dist/cjs/bds-select.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5599f73d.js');
 
-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 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}.inside-input-left{display:-ms-inline-flexbox;display:inline-flex;gap:8px;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:8px}.input-chips__chip{margin:2px 4px 2px 0px}.input-chips__chips{-ms-flex:1;flex:1}";
 
 const Select = class {
   constructor(hostRef) {

package/dist/cjs/bds-toast-container.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5599f73d.js');
 
-const toastContainerCss = ".sc-bds-toast-container-h{position:fixed;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;z-index:110000;width:456px}.bottom-right.sc-bds-toast-container-h{bottom:40px;right:32px}.bottom-left.sc-bds-toast-container-h{bottom:40px;left:32px}.top-right.sc-bds-toast-container-h{top:40px;right:32px}.top-left.sc-bds-toast-container-h{top:40px;left:32px}@media (max-width: 780px){.sc-bds-toast-container-h{right:0px;left:0px;width:100%}.top-left.sc-bds-toast-container-h,.top-right.sc-bds-toast-container-h{top:20px}.bottom-left.sc-bds-toast-container-h,.bottom-right.sc-bds-toast-container-h{bottom:20px}}";
+const toastContainerCss = ".sc-bds-toast-container-h{position:fixed;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;z-index:110000;width:456px}.bottom-right.sc-bds-toast-container-h{bottom:48px;right:48px}.bottom-left.sc-bds-toast-container-h{bottom:48px;left:48px}.top-right.sc-bds-toast-container-h{top:24px;right:24px}.top-left.sc-bds-toast-container-h{top:48px;left:48px}@media (max-width: 780px){.sc-bds-toast-container-h{right:0px;left:0px;width:100%}.top-left.sc-bds-toast-container-h,.top-right.sc-bds-toast-container-h{top:20px}.bottom-left.sc-bds-toast-container-h,.bottom-right.sc-bds-toast-container-h{bottom:20px}}";
 
 const BdsToastContainer = class {
   constructor(hostRef) {

package/dist/cjs/bds-toast.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-5599f73d.js');
 
 const notificationBallonSvg = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTIiIGhlaWdodD0iNzAiIHZpZXdCb3g9IjAgMCA1MiA3MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3Ljk1NzEgLTJDMTAuMzMwNCAtMiAyLjQzNzczIC0wLjc5NTMwOCAtMi45NzE4NyAyLjM4ODUzQy0xMS43NTE0IDcuNjM3NTUgLTE0LjMyMzIgMTcuODc3NCAtMTMuOTY4NCAyNy4zNDI5Qy0xMy43MDI0IDM1LjUxNzYgLTExLjQ4NTMgNDQuMjk0NyAtNS40NTQ5NiA1MC4zMTgxQzAuMjIwNjkyIDU2LjA4MzQgMTEuOTI2NyA1OC42NjQ5IDE5Ljk5NjggNTguNjY0OUMyMC4zNTE1IDU4LjY2NDkgMjAuNzA2MyA1OC45MjMxIDIwLjcwNjMgNTkuMzUzM1Y2Ny42MTQxQzIwLjcwNjMgNjguMzg4NSAyMS4zMjcgNjkuMDc2OSAyMi4yMTM5IDY5LjA3NjlDMjIuMzAyNSA2OS4wNzY5IDIyLjMwMjUgNjkuMDc2OSAyMi4zOTEyIDY5LjA3NjlDMjIuNzQ1OSA2OS4wNzY5IDIzLjAxMiA2OC45MDQ4IDIzLjE4OTMgNjguNzMyN0MyNy4xOCA2NS4zNzY4IDMxLjI1OTQgNjEuOTM0OCAzNS4xNjE0IDU4LjQ5MjhDMzguODg2MSA1NS4xMzY5IDQzLjE0MjggNTEuNjk0OSA0NS45ODA2IDQ3LjY1MDZDNTIuMDk5NyAzOS4xMzE3IDUzLjA3NTIgMjcuMTcwOCA1MS4wMzU1IDE3LjE4OUM0OS4wODQ1IDcuNjM3NTUgNDIuMDc4NiAxLjM1NTkzIDMyLjMyMzYgLTAuNjIzMjA5QzI4LjE1NTYgLTEuNDgzNyAyMy4xMDA3IC0yIDE3Ljk1NzEgLTJaIiBmaWxsPSIjODBFM0VCIi8+Cjwvc3ZnPgo=';
 
-const toastCss = ":host .show,:host .hide{display:-ms-flexbox;display:flex}:host .show{opacity:1}:host .show--top-right,:host .show--bottom-right{-webkit-animation:toastAnimationFadeInFromRight 1s;animation:toastAnimationFadeInFromRight 1s}:host .show--top-left,:host .show--bottom-left{-webkit-animation:toastAnimationFadeInFromLeft 1s;animation:toastAnimationFadeInFromLeft 1s}:host .hide{-webkit-transition:all 1s;transition:all 1s;-webkit-animation:toastAnimationFadeOut 0.5s;animation:toastAnimationFadeOut 0.5s}.toast{display:none;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0px 8px 12px rgba(96, 123, 153, 0.4), 0px 0px 4px rgba(96, 123, 153, 0.3);box-shadow:0px 8px 12px rgba(96, 123, 153, 0.4), 0px 0px 4px rgba(96, 123, 153, 0.3);color:#202c44;opacity:0;margin-top:16px}.toast--action--icon{min-width:440px;max-width:440px;padding:8px 20px}.toast--action--icon bds-icon-button{height:32px}@media (max-width: 780px){.toast--action--icon{min-width:220px;width:95%;margin:16px auto 0px auto}}.toast--action--button{min-width:440px;max-width:456px;padding:10px 20px}@media (max-width: 780px){.toast--action--button{min-width:220px;width:95%;margin:16px auto 0px auto}}.toast--system{background:#80e3eb}.toast--error{background:#ffa5a5}.toast--success{background:#90e6bc}.toast--warning{background:#fff6a8}.toast--undo{background-color:#00c6d7}.toast--redo{background-color:#485c73}.toast--notification{background-color:#ffffff}.toast bds-icon{margin-right:8px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-top:8px}.toast__ballon{display:-ms-flexbox;display:flex;position:absolute;top:0;left:0}.toast__content{height:100%;width:100%;-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;margin-right:8px;padding:8px}.toast__action{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.toast__action bds-button-icon,.toast__action bds-button{position:relative}.toast__action bds-button-icon::before,.toast__action bds-button::before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.toast__action bds-button-icon:focus-visible,.toast__action bds-button:focus-visible{outline:none}.toast__action bds-button-icon:focus-visible::before,.toast__action bds-button:focus-visible::before{border-color:#c226fb}.toast__action__button{white-space:nowrap}.toast__action__icon{display:-ms-flexbox !important;display:flex !important;-ms-flex-align:start;align-items:flex-start}.toast__action__icon bds-icon{color:#202c44;border-radius:4px;cursor:pointer}@-webkit-keyframes toastAnimationFadeInFromRight{0%{opacity:0;right:-200px}50%{opacity:0.9;right:1px}100%{opacity:1}}@keyframes toastAnimationFadeInFromRight{0%{opacity:0;right:-200px}50%{opacity:0.9;right:1px}100%{opacity:1}}@-webkit-keyframes toastAnimationFadeInFromLeft{0%{opacity:0;left:-200px}50%{opacity:0.9;left:1px}100%{opacity:1}}@keyframes toastAnimationFadeInFromLeft{0%{opacity:0;left:-200px}50%{opacity:0.9;left:1px}100%{opacity:1}}@-webkit-keyframes toastAnimationFadeOut{0%{opacity:1}30%{max-height:60px}80%{opacity:0;max-height:30px}100%{max-height:0px}}@keyframes toastAnimationFadeOut{0%{opacity:1}30%{max-height:60px}80%{opacity:0;max-height:30px}100%{max-height:0px}}";
+const toastCss = ":host .show,:host .hide{display:-ms-flexbox;display:flex}:host .show{opacity:1}:host .show--top-right,:host .show--bottom-right{-webkit-animation:toastAnimationFadeInFromRight 1s;animation:toastAnimationFadeInFromRight 1s}:host .show--top-left,:host .show--bottom-left{-webkit-animation:toastAnimationFadeInFromLeft 1s;animation:toastAnimationFadeInFromLeft 1s}:host .hide{-webkit-transition:all 1s;transition:all 1s;-webkit-animation:toastAnimationFadeOut 0.5s;animation:toastAnimationFadeOut 0.5s}.toast{display:none;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:8px;-webkit-box-shadow:0px 8px 12px rgba(96, 123, 153, 0.4), 0px 0px 4px rgba(96, 123, 153, 0.3);box-shadow:0px 8px 12px rgba(96, 123, 153, 0.4), 0px 0px 4px rgba(96, 123, 153, 0.3);color:#202c44;opacity:0;margin-top:16px;overflow:hidden;gap:16px}.toast--action--icon{min-width:440px;max-width:440px;padding:8px 16px}.toast--action--icon bds-icon-button{height:32px}@media (max-width: 780px){.toast--action--icon{min-width:220px;width:95%;margin:16px auto 0px auto}}.toast--action--button{min-width:440px;max-width:456px;padding:8px 16px}@media (max-width: 780px){.toast--action--button{min-width:220px;width:95%;margin:16px auto 0px auto}}.toast--system{background:#80e3eb}.toast--error{background:#ffa5a5}.toast--success{background:#90e6bc}.toast--warning{background:#fff6a8}.toast--undo{background-color:#00c6d7}.toast--redo{background-color:#485c73}.toast--notification{background-color:#ffffff}.toast bds-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:8px 0}.toast__ballon{display:-ms-flexbox;display:flex;position:absolute;top:0;left:0}.toast__content{height:100%;width:100%;-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding:8px 0}.toast__action{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.toast__action bds-button-icon,.toast__action bds-button{position:relative}.toast__action bds-button-icon::before,.toast__action bds-button::before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.toast__action bds-button-icon:focus-visible,.toast__action bds-button:focus-visible{outline:none}.toast__action bds-button-icon:focus-visible::before,.toast__action bds-button:focus-visible::before{border-color:#c226fb}.toast__action__button{white-space:nowrap}@-webkit-keyframes toastAnimationFadeInFromRight{0%{opacity:0;right:-200px}50%{opacity:0.9;right:1px}100%{opacity:1}}@keyframes toastAnimationFadeInFromRight{0%{opacity:0;right:-200px}50%{opacity:0.9;right:1px}100%{opacity:1}}@-webkit-keyframes toastAnimationFadeInFromLeft{0%{opacity:0;left:-200px}50%{opacity:0.9;left:1px}100%{opacity:1}}@keyframes toastAnimationFadeInFromLeft{0%{opacity:0;left:-200px}50%{opacity:0.9;left:1px}100%{opacity:1}}@-webkit-keyframes toastAnimationFadeOut{0%{opacity:1}30%{max-height:60px}80%{opacity:0;max-height:30px}100%{max-height:0px}}@keyframes toastAnimationFadeOut{0%{opacity:1}30%{max-height:60px}80%{opacity:0;max-height:30px}100%{max-height:0px}}";
 
 const BdsToast = class {
   constructor(hostRef) {
@@ -86,15 +86,15 @@ const BdsToast = class {
   /**
    * Can be used outside to open the toast
    */
-  async create({ actionType, buttonAction, buttonText, icon, toastText, toastTitle, variant, duration, position, }) {
-    let toastContainer = document.querySelector(`bds-toast-container.${position}`);
+  async create({ actionType, buttonAction, buttonText, icon, toastText, toastTitle, variant, duration, }) {
+    let toastContainer = document.querySelector(`bds-toast-container.${variant === 'notification' ? 'top-right' : 'bottom-left'}`);
     if (toastContainer) {
       toastContainer.appendChild(this.el);
-      toastContainer.classList.add(position);
+      toastContainer.classList.add(variant === 'notification' ? 'top-right' : 'bottom-left');
     }
     else {
       toastContainer = document.createElement('bds-toast-container');
-      toastContainer.classList.add(position);
+      toastContainer.classList.add(variant === 'notification' ? 'top-right' : 'bottom-left');
       document.body.appendChild(toastContainer);
       toastContainer.appendChild(this.el);
     }
@@ -105,7 +105,7 @@ const BdsToast = class {
     this.el.toastTitle = toastTitle;
     this.el.variant = variant || 'system';
     this.el.duration = duration * 1000 || 0;
-    this.el.position = position || 'bottom-left';
+    this.el.position = variant === 'notification' ? 'top-right' : 'bottom-left';
     this.el.icon = icon !== null && icon !== void 0 ? icon : this.mapIconName[this.variant];
     this.el.show = true;
     if (this.el.duration > 0) {
@@ -143,7 +143,7 @@ const BdsToast = class {
       } }, this.variant === 'notification' && index.h("img", { class: "toast__ballon", src: notificationBallonSvg }), this.icon && index.h("bds-icon", { theme: "outline", size: "medium", name: this.icon }), index.h("div", { class: "toast__content" }, this.toastTitle && (index.h("bds-typo", { variant: "fs-14", bold: "bold" }, this.toastTitle)), this.toastText && index.h("bds-typo", { variant: "fs-14", innerHTML: this.toastText })), index.h("div", { class: {
         toast__action: true,
         [`toast__action__${this.actionType}`]: true,
-      } }, this.actionType === 'button' ? (index.h("bds-button", { onKeyDown: this._keyPressHandler.bind(this), tabindex: "0", onClick: () => this._buttonClickHandler(), variant: "secondary", size: "short" }, this.buttonText)) : (index.h("bds-button-icon", { onClick: () => this._buttonClickHandler(), size: "short", onKeyDown: this._keyPressHandler.bind(this), tabindex: "0", variant: "secondary", icon: "close" })))));
+      } }, this.actionType === 'button' ? (index.h("bds-button", { onKeyDown: this._keyPressHandler.bind(this), tabindex: "0", onClick: () => this._buttonClickHandler(), variant: "secondary", size: "standard" }, this.buttonText)) : (index.h("bds-button-icon", { onClick: () => this._buttonClickHandler(), size: "short", onKeyDown: this._keyPressHandler.bind(this), tabindex: "0", variant: "secondary", icon: "close" })))));
   }
   get el() { return index.getElement(this); }
 };