blip-ds 1.201.0 → 1.201.1

package/dist/cjs/loader.cjs.js

@@ -30,7 +30,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"bds-datepicker.cjs\",[[0,\"bds-datepicker\",{\"typeOfDate\":[1,\"type-of-date\"],\"startDateLimit\":[1537,\"start-date-limit\"],\"endDateLimit\":[1537,\"end-date-limit\"],\"message\":[1],\"language\":[1],\"open\":[32],\"dateSelected\":[32],\"endDateSelected\":[32],\"valueDateSelected\":[32],\"valueEndDateSelected\":[32],\"errorMsgDate\":[32],\"errorMsgEndDate\":[32],\"intoView\":[32],\"scrollingTop\":[32],\"menupositionTop\":[32],\"menupositionLeft\":[32]}]]],[\"bds-select-chips.cjs\",[[6,\"bds-select-chips\",{\"options\":[1025],\"chips\":[1025],\"newPrefix\":[513,\"new-prefix\"],\"value\":[1025],\"danger\":[1540],\"maxlength\":[2],\"errorMessage\":[1025,\"error-message\"],\"disabled\":[516],\"dataTest\":[1,\"data-test\"],\"label\":[1],\"icon\":[513],\"duplicated\":[4],\"canAddNew\":[4,\"can-add-new\"],\"notFoundMessage\":[1,\"not-found-message\"],\"internalOptions\":[32],\"isOpen\":[32],\"isValid\":[64],\"getChips\":[64]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-toast.cjs\",[[1,\"bds-toast\",{\"icon\":[513],\"actionType\":[1,\"action-type\"],\"variant\":[1],\"toastTitle\":[1,\"toast-title\"],\"toastText\":[1,\"toast-text\"],\"buttonText\":[1,\"button-text\"],\"duration\":[2],\"buttonAction\":[1,\"button-action\"],\"show\":[4],\"hide\":[4],\"position\":[1],\"create\":[64],\"close\":[64]}]]],[\"bds-pagination.cjs\",[[1,\"bds-pagination\",{\"pages\":[2],\"startedPage\":[2,\"started-page\"],\"value\":[32],\"openSelect\":[32],\"paginationNumbers\":[32]}]]],[\"bds-upload.cjs\",[[1,\"bds-upload\",{\"language\":[1],\"titleName\":[1,\"title-name\"],\"subtitle\":[1],\"error\":[1],\"multiple\":[4],\"accept\":[1],\"files\":[32],\"haveFiles\":[32],\"hover\":[32],\"background\":[32],\"size\":[32]}]]],[\"bds-accordion-header.cjs\",[[1,\"bds-accordion-header\",{\"accordionTitle\":[1,\"accordion-title\"],\"icon\":[1],\"avatarName\":[1,\"avatar-name\"],\"avatarThumb\":[1,\"avatar-thumb\"],\"isOpen\":[32],\"btToggleIsfocus\":[32],\"numberElement\":[32],\"toggle\":[64],\"close\":[64]}]]],[\"bds-autocomplete.cjs\",[[1,\"bds-autocomplete\",{\"options\":[1],\"value\":[1025],\"selected\":[1040],\"danger\":[516],\"disabled\":[516],\"searchOnlyTitle\":[516,\"search-only-title\"],\"label\":[1],\"icon\":[513],\"placeholder\":[1],\"optionsPosition\":[1,\"options-position\"],\"clearIconOnFocus\":[4,\"clear-icon-on-focus\"],\"dataTest\":[1,\"data-test\"],\"isPressed\":[32],\"isOpen\":[32],\"text\":[32],\"internalOptions\":[32],\"isFocused\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-avatar-group.cjs\",[[4,\"bds-avatar-group\",{\"size\":[1],\"users\":[1],\"canClick\":[4,\"can-click\"],\"internalUsers\":[32],\"leftoversUsers\":[32]}]]],[\"bds-input-phone-number.cjs\",[[6,\"bds-input-phone-number\",{\"options\":[16],\"text\":[1],\"value\":[1032],\"danger\":[1540],\"disabled\":[516],\"required\":[4],\"helperMessage\":[1,\"helper-message\"],\"errorMessage\":[1025,\"error-message\"],\"requiredErrorMessage\":[1,\"required-error-message\"],\"numberErrorMessage\":[1,\"number-error-message\"],\"dataTest\":[1,\"data-test\"],\"label\":[1],\"icon\":[513],\"isOpen\":[32],\"selectedCountry\":[32],\"isPressed\":[32],\"validationDanger\":[32],\"validationMesage\":[32],\"removeFocus\":[64]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-menu-exibition.cjs\",[[1,\"bds-menu-exibition\",{\"avatarName\":[1,\"avatar-name\"],\"avatarThumbnail\":[1,\"avatar-thumbnail\"],\"avatarSize\":[1,\"avatar-size\"],\"value\":[1],\"subtitle\":[1]}]]],[\"bds-select.cjs\",[[1,\"bds-select\",{\"options\":[1],\"value\":[1032],\"danger\":[516],\"disabled\":[516],\"label\":[1],\"icon\":[513],\"placeholder\":[1],\"helperMessage\":[1,\"helper-message\"],\"errorMessage\":[1,\"error-message\"],\"optionsPosition\":[1,\"options-position\"],\"dataTest\":[1,\"data-test\"],\"isOpen\":[32],\"text\":[32],\"validationDanger\":[32],\"isPressed\":[32],\"validationMesage\":[32],\"internalOptions\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-table.cjs\",[[1,\"bds-table\",{\"options\":[1],\"column\":[1],\"avatar\":[4],\"sorting\":[4],\"headerData\":[32],\"tableData\":[32],\"sortAscending\":[32]}]]],[\"bds-alert-header.cjs\",[[1,\"bds-alert-header\",{\"variant\":[1],\"icon\":[513]}]]],[\"bds-checkbox.cjs\",[[1,\"bds-checkbox\",{\"refer\":[1],\"label\":[1],\"name\":[1],\"checked\":[1540],\"disabled\":[4],\"checkBoxId\":[32],\"getInputElement\":[64],\"getValue\":[64]}]]],[\"bds-chip-selected.cjs\",[[1,\"bds-chip-selected\",{\"icon\":[1],\"color\":[1],\"size\":[1],\"selected\":[4],\"disabled\":[4],\"dataTest\":[1,\"data-test\"],\"isSelected\":[32]},[[2,\"click\",\"handleClick\"]]]]],[\"bds-chip-tag.cjs\",[[1,\"bds-chip-tag\",{\"icon\":[1],\"color\":[1]}]]],[\"bds-input-editable.cjs\",[[1,\"bds-input-editable\",{\"size\":[1],\"expand\":[4],\"dataTest\":[1,\"data-test\"],\"inputName\":[1,\"input-name\"],\"value\":[1537],\"requiredErrorMessage\":[1,\"required-error-message\"],\"minlength\":[2],\"minlengthErrorMessage\":[1,\"minlength-error-message\"],\"maxlength\":[2],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"placeholder\":[1],\"danger\":[1540],\"isEditing\":[32],\"isValid\":[32],\"isPressed\":[32],\"isFocused\":[32],\"validationMesage\":[32],\"validationDanger\":[32]}]]],[\"bds-input-password.cjs\",[[2,\"bds-input-password\",{\"openEyes\":[4,\"open-eyes\"],\"value\":[1537],\"label\":[1],\"inputName\":[1,\"input-name\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"readonly\":[4],\"helperMessage\":[1,\"helper-message\"],\"errorMessage\":[1,\"error-message\"],\"danger\":[516],\"icon\":[513],\"disabled\":[4],\"autoCapitalize\":[1,\"auto-capitalize\"],\"autoComplete\":[1,\"auto-complete\"],\"placeholder\":[1],\"dataTest\":[1,\"data-test\"],\"validationDanger\":[32],\"isPressed\":[32],\"validationMesage\":[32]}]]],[\"bds-menu-action.cjs\",[[1,\"bds-menu-action\",{\"buttonText\":[1,\"button-text\"],\"subMenu\":[4,\"sub-menu\"],\"iconLeft\":[1,\"icon-left\"],\"lipstick\":[4],\"openSubMenu\":[32],\"stateSubMenu\":[32],\"delaySubMenu\":[32],\"zIndex\":[32],\"delay\":[32]}]]],[\"bds-menu-list-item.cjs\",[[1,\"bds-menu-list-item\",{\"color\":[1],\"icon\":[513]}]]],[\"bds-sidebar.cjs\",[[1,\"bds-sidebar\",{\"isOpen\":[1540,\"is-open\"],\"sidebarPosition\":[1,\"sidebar-position\"],\"InnerSpacing\":[32],\"toggle\":[64]}]]],[\"bds-step.cjs\",[[1,\"bds-step\",{\"last\":[4],\"completed\":[4],\"active\":[4],\"disabled\":[4],\"index\":[2],\"pointer\":[4]}]]],[\"bds-tabs.cjs\",[[4,\"bds-tabs\",{\"align\":[1]},[[0,\"scrollButtonClick\",\"onScrollButtonClick\"],[0,\"bdsSelect\",\"onSelectedTab\"]]]]],[\"bds-warning.cjs\",[[1,\"bds-warning\"]]],[\"bds-alert-body.cjs\",[[1,\"bds-alert-body\"]]],[\"bds-card-color.cjs\",[[1,\"bds-card-color\",{\"name\":[1],\"hex\":[1],\"gradient\":[4],\"variable\":[1],\"lightText\":[4,\"light-text\"]}]]],[\"bds-chip.cjs\",[[1,\"bds-chip\",{\"icon\":[1],\"size\":[1],\"variant\":[1],\"danger\":[516],\"filter\":[4],\"clickable\":[4],\"deletable\":[4],\"disabled\":[4]}]]],[\"bds-expansion-panel-header.cjs\",[[1,\"bds-expansion-panel-header\",{\"text\":[1]}]]],[\"bds-menu-separation.cjs\",[[1,\"bds-menu-separation\",{\"value\":[1],\"size\":[1]}]]],[\"bds-modal.cjs\",[[1,\"bds-modal\",{\"open\":[1540],\"closeButton\":[1540,\"close-button\"],\"size\":[1537],\"toggle\":[64]}]]],[\"bds-modal-close-button.cjs\",[[1,\"bds-modal-close-button\",{\"active\":[1540]}]]],[\"bds-progress-bar.cjs\",[[1,\"bds-progress-bar\",{\"percent\":[2],\"text\":[1]}]]],[\"bds-radio.cjs\",[[1,\"bds-radio\",{\"refer\":[1],\"label\":[1],\"value\":[1],\"name\":[1],\"checked\":[1540],\"disabled\":[4],\"dataTest\":[1,\"data-test\"],\"radioId\":[32],\"getInputElement\":[64],\"getValue\":[64]}]]],[\"bds-tab.cjs\",[[0,\"bds-tab\",{\"group\":[1],\"label\":[1],\"active\":[4],\"getChild\":[64]}]]],[\"bds-tab-panel.cjs\",[[4,\"bds-tab-panel\",{\"group\":[1],\"active\":[4],\"getChild\":[64]}]]],[\"bds-tooltip.cjs\",[[1,\"bds-tooltip\",{\"tooltipText\":[1,\"tooltip-text\"],\"disabled\":[516],\"position\":[1],\"dataTest\":[1,\"data-test\"],\"isMouseOver\":[32]}]]],[\"bds-accordion.cjs\",[[1,\"bds-accordion\",{\"isOpen\":[32],\"numberElement\":[32],\"toggle\":[64],\"close\":[64],\"reciveNumber\":[64]}]]],[\"bds-accordion-body.cjs\",[[1,\"bds-accordion-body\",{\"isOpen\":[32],\"heightContainer\":[32],\"numberElement\":[32],\"toggle\":[64],\"close\":[64]}]]],[\"bds-accordion-group.cjs\",[[1,\"bds-accordion-group\",{\"collapse\":[1],\"closeAll\":[64]}]]],[\"bds-alert.cjs\",[[1,\"bds-alert\",{\"open\":[1540],\"toggle\":[64]}]]],[\"bds-alert-actions.cjs\",[[1,\"bds-alert-actions\"]]],[\"bds-banner-link.cjs\",[[1,\"bds-banner-link\",{\"link\":[1]}]]],[\"bds-expansion-panel.cjs\",[[1,\"bds-expansion-panel\"]]],[\"bds-expansion-panel-body.cjs\",[[1,\"bds-expansion-panel-body\",{\"open\":[4],\"text\":[1]}]]],[\"bds-illustration.cjs\",[[1,\"bds-illustration\",{\"type\":[1],\"name\":[1],\"dataTest\":[1,\"data-test\"],\"IllustrationContent\":[32]}]]],[\"bds-loading-page.cjs\",[[1,\"bds-loading-page\",{\"svgContent\":[32]}]]],[\"bds-menu.cjs\",[[1,\"bds-menu\",{\"menu\":[1],\"position\":[1],\"open\":[1540],\"menuPositionTopToBottom\":[32],\"menuPositionLeftToBottom\":[32],\"menuPositionTopToRight\":[32],\"menuPositionLeftToRight\":[32],\"toggle\":[64]}]]],[\"bds-menu-list.cjs\",[[1,\"bds-menu-list\"]]],[\"bds-modal-action.cjs\",[[1,\"bds-modal-action\"]]],[\"bds-radio-group.cjs\",[[6,\"bds-radio-group\",{\"value\":[1537]}]]],[\"bds-stepper.cjs\",[[4,\"bds-stepper\",{\"setActiveStep\":[64],\"setCompletedStep\":[64],\"getActiveStep\":[64],\"resetActiveSteps\":[64],\"resetCompletedSteps\":[64]}]]],[\"bds-switch.cjs\",[[1,\"bds-switch\",{\"refer\":[1],\"size\":[1],\"name\":[1],\"checked\":[1540],\"disabled\":[4],\"dataTest\":[1,\"data-test\"],\"switchId\":[32],\"getInputElement\":[64],\"getValue\":[64]}]]],[\"bds-input-chips.cjs\",[[6,\"bds-input-chips\",{\"chips\":[1025],\"type\":[1],\"label\":[1],\"maxlength\":[2],\"icon\":[513],\"delimiters\":[16],\"errorMessage\":[1025,\"error-message\"],\"danger\":[1540],\"value\":[1537],\"duplicated\":[4],\"disableSubmit\":[4,\"disable-submit\"],\"disabled\":[516],\"helperMessage\":[1,\"helper-message\"],\"inputName\":[1,\"input-name\"],\"placeholder\":[1],\"dataTest\":[1,\"data-test\"],\"internalChips\":[32],\"isValid\":[64],\"get\":[64],\"clear\":[64],\"add\":[64],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"bds-datepicker-period.cjs\",[[1,\"bds-datepicker-period\",{\"startDate\":[16],\"endDate\":[16],\"startDateSelect\":[1040],\"endDateSelect\":[1040],\"language\":[1],\"week\":[32],\"months\":[32],\"years\":[32],\"monthActivated\":[32],\"yearActivated\":[32],\"animatePrev\":[32],\"animateNext\":[32],\"activeSelectYear\":[32],\"openSelectMonth\":[32],\"openSelectYear\":[32],\"monthsSlide\":[32],\"loadingSlide\":[32],\"clear\":[64]}]]],[\"bds-datepicker-single.cjs\",[[1,\"bds-datepicker-single\",{\"endDate\":[16],\"startDate\":[16],\"dateSelect\":[1040],\"language\":[1],\"week\":[32],\"months\":[32],\"years\":[32],\"monthActivated\":[32],\"yearActivated\":[32],\"animatePrev\":[32],\"animateNext\":[32],\"openSelectMonth\":[32],\"openSelectYear\":[32],\"monthsSlide\":[32],\"loadingSlide\":[32],\"clear\":[64]}]]],[\"bds-banner.cjs\",[[1,\"bds-banner\",{\"bannerAlign\":[1,\"banner-align\"],\"buttonClose\":[1,\"button-close\"],\"context\":[1],\"variant\":[1],\"visible\":[32],\"toggle\":[64]}]]],[\"bds-paper.cjs\",[[1,\"bds-paper\",{\"elevation\":[1],\"dataTest\":[1,\"data-test\"]}]]],[\"bds-toast-container.cjs\",[[6,\"bds-toast-container\"]]],[\"bds-loading-spinner.cjs\",[[0,\"bds-loading-spinner\",{\"variant\":[1],\"size\":[1],\"color\":[1],\"svgContent\":[32]}]]],[\"bds-icon.cjs\",[[1,\"bds-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"theme\":[513],\"type\":[1],\"dataTest\":[1,\"data-test\"],\"svgContent\":[32],\"isVisible\":[32]}]]],[\"bds-typo.cjs\",[[1,\"bds-typo\",{\"variant\":[1],\"lineHeight\":[1,\"line-height\"],\"bold\":[1],\"italic\":[4],\"noWrap\":[4,\"no-wrap\"],\"paragraph\":[4],\"margin\":[4],\"tag\":[1],\"dataTest\":[1,\"data-test\"]}]]],[\"bds-button.cjs\",[[1,\"bds-button\",{\"disabled\":[4],\"size\":[1],\"variant\":[1],\"icon\":[513],\"arrow\":[4],\"type\":[1],\"typeIcon\":[513,\"type-icon\"],\"bdsLoading\":[4,\"bds-loading\"],\"bdsLoadingVariant\":[1,\"bds-loading-variant\"],\"bdsLoadingColor\":[1,\"bds-loading-color\"],\"dataTest\":[1,\"data-test\"]}]]],[\"bds-chip-clickable.cjs\",[[1,\"bds-chip-clickable\",{\"icon\":[1],\"avatar\":[1],\"color\":[1],\"size\":[1],\"clickable\":[4],\"close\":[4],\"disabled\":[4],\"dataTest\":[1,\"data-test\"],\"visible\":[32]}]]],[\"bds-counter-text.cjs\",[[0,\"bds-counter-text\",{\"length\":[1026],\"max\":[2],\"active\":[1028],\"warning\":[1040],\"delete\":[1040]}]]],[\"bds-input.cjs\",[[1,\"bds-input\",{\"inputName\":[1,\"input-name\"],\"type\":[513],\"label\":[1],\"placeholder\":[1],\"autoCapitalize\":[1,\"auto-capitalize\"],\"autoComplete\":[1,\"auto-complete\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"readonly\":[4],\"required\":[4],\"pattern\":[1],\"helperMessage\":[1,\"helper-message\"],\"errorMessage\":[1025,\"error-message\"],\"icon\":[513],\"disabled\":[1540],\"danger\":[1540],\"value\":[1025],\"counterLength\":[4,\"counter-length\"],\"counterLengthRule\":[16],\"isSubmit\":[4,\"is-submit\"],\"isTextarea\":[4,\"is-textarea\"],\"rows\":[2],\"cols\":[2],\"requiredErrorMessage\":[1,\"required-error-message\"],\"minlengthErrorMessage\":[1,\"minlength-error-message\"],\"minErrorMessage\":[1,\"min-error-message\"],\"maxErrorMessage\":[1,\"max-error-message\"],\"emailErrorMessage\":[1,\"email-error-message\"],\"numberErrorMessage\":[1,\"number-error-message\"],\"chips\":[4],\"dataTest\":[1,\"data-test\"],\"isPressed\":[32],\"isPassword\":[32],\"validationMesage\":[32],\"validationDanger\":[32],\"setFocus\":[64],\"removeFocus\":[64],\"getInputElement\":[64],\"isValid\":[64],\"clear\":[64]}]]],[\"bds-button-icon.cjs\",[[1,\"bds-button-icon\",{\"disabled\":[4],\"size\":[1],\"variant\":[1],\"icon\":[513]}]]],[\"bds-avatar.cjs\",[[0,\"bds-avatar\",{\"name\":[1],\"thumbnail\":[1],\"size\":[1],\"upload\":[4],\"ellipsis\":[2],\"dataTest\":[1,\"data-test\"]}]]],[\"bds-select-option.cjs\",[[6,\"bds-select-option\",{\"value\":[8],\"selected\":[4],\"disabled\":[4],\"invisible\":[1540],\"danger\":[1540],\"bulkOption\":[1,\"bulk-option\"],\"slotAlign\":[1,\"slot-align\"],\"titleText\":[1,\"title-text\"],\"status\":[1],\"dataTest\":[1,\"data-test\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"bds-datepicker.cjs\",[[0,\"bds-datepicker\",{\"typeOfDate\":[1,\"type-of-date\"],\"startDateLimit\":[1537,\"start-date-limit\"],\"endDateLimit\":[1537,\"end-date-limit\"],\"message\":[1],\"language\":[1],\"open\":[32],\"dateSelected\":[32],\"endDateSelected\":[32],\"valueDateSelected\":[32],\"valueEndDateSelected\":[32],\"errorMsgDate\":[32],\"errorMsgEndDate\":[32],\"intoView\":[32],\"scrollingTop\":[32],\"menupositionTop\":[32],\"menupositionLeft\":[32]}]]],[\"bds-select-chips.cjs\",[[6,\"bds-select-chips\",{\"options\":[1025],\"chips\":[1025],\"newPrefix\":[513,\"new-prefix\"],\"value\":[1025],\"danger\":[1540],\"maxlength\":[2],\"errorMessage\":[1025,\"error-message\"],\"disabled\":[516],\"dataTest\":[1,\"data-test\"],\"label\":[1],\"icon\":[513],\"duplicated\":[4],\"canAddNew\":[4,\"can-add-new\"],\"notFoundMessage\":[1,\"not-found-message\"],\"internalOptions\":[32],\"isOpen\":[32],\"isValid\":[64],\"getChips\":[64]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-toast.cjs\",[[1,\"bds-toast\",{\"icon\":[513],\"actionType\":[1,\"action-type\"],\"variant\":[1],\"toastTitle\":[1,\"toast-title\"],\"toastText\":[1,\"toast-text\"],\"buttonText\":[1,\"button-text\"],\"duration\":[2],\"buttonAction\":[1,\"button-action\"],\"show\":[4],\"hide\":[4],\"position\":[1],\"create\":[64],\"close\":[64]}]]],[\"bds-pagination.cjs\",[[1,\"bds-pagination\",{\"pages\":[2],\"startedPage\":[2,\"started-page\"],\"value\":[32],\"openSelect\":[32],\"paginationNumbers\":[32]}]]],[\"bds-upload.cjs\",[[1,\"bds-upload\",{\"language\":[1],\"titleName\":[1,\"title-name\"],\"subtitle\":[1],\"error\":[1],\"multiple\":[4],\"accept\":[1],\"files\":[32],\"haveFiles\":[32],\"hover\":[32],\"background\":[32],\"size\":[32]}]]],[\"bds-accordion-header.cjs\",[[1,\"bds-accordion-header\",{\"accordionTitle\":[1,\"accordion-title\"],\"icon\":[1],\"avatarName\":[1,\"avatar-name\"],\"avatarThumb\":[1,\"avatar-thumb\"],\"isOpen\":[32],\"btToggleIsfocus\":[32],\"numberElement\":[32],\"toggle\":[64],\"close\":[64]}]]],[\"bds-autocomplete.cjs\",[[1,\"bds-autocomplete\",{\"options\":[1],\"value\":[1025],\"selected\":[1040],\"danger\":[516],\"disabled\":[516],\"searchOnlyTitle\":[516,\"search-only-title\"],\"label\":[1],\"icon\":[513],\"placeholder\":[1],\"optionsPosition\":[1,\"options-position\"],\"clearIconOnFocus\":[4,\"clear-icon-on-focus\"],\"dataTest\":[1,\"data-test\"],\"isPressed\":[32],\"isOpen\":[32],\"text\":[32],\"internalOptions\":[32],\"isFocused\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-avatar-group.cjs\",[[4,\"bds-avatar-group\",{\"size\":[1],\"users\":[1],\"canClick\":[4,\"can-click\"],\"internalUsers\":[32],\"leftoversUsers\":[32]}]]],[\"bds-input-phone-number.cjs\",[[6,\"bds-input-phone-number\",{\"options\":[16],\"text\":[1],\"value\":[1032],\"danger\":[1540],\"disabled\":[516],\"required\":[4],\"helperMessage\":[1,\"helper-message\"],\"errorMessage\":[1025,\"error-message\"],\"requiredErrorMessage\":[1,\"required-error-message\"],\"numberErrorMessage\":[1,\"number-error-message\"],\"dataTest\":[1,\"data-test\"],\"label\":[1],\"icon\":[513],\"isOpen\":[32],\"selectedCountry\":[32],\"isPressed\":[32],\"validationDanger\":[32],\"validationMesage\":[32],\"removeFocus\":[64]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-menu-exibition.cjs\",[[1,\"bds-menu-exibition\",{\"avatarName\":[1,\"avatar-name\"],\"avatarThumbnail\":[1,\"avatar-thumbnail\"],\"avatarSize\":[1,\"avatar-size\"],\"value\":[1],\"subtitle\":[1]}]]],[\"bds-select.cjs\",[[1,\"bds-select\",{\"options\":[1],\"value\":[1032],\"danger\":[516],\"disabled\":[516],\"label\":[1],\"icon\":[513],\"placeholder\":[1],\"helperMessage\":[1,\"helper-message\"],\"errorMessage\":[1,\"error-message\"],\"optionsPosition\":[1,\"options-position\"],\"dataTest\":[1,\"data-test\"],\"isOpen\":[32],\"text\":[32],\"validationDanger\":[32],\"isPressed\":[32],\"validationMesage\":[32],\"internalOptions\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-table.cjs\",[[1,\"bds-table\",{\"options\":[1],\"column\":[1],\"avatar\":[4],\"sorting\":[4],\"headerData\":[32],\"tableData\":[32],\"sortAscending\":[32]}]]],[\"bds-alert-header.cjs\",[[1,\"bds-alert-header\",{\"variant\":[1],\"icon\":[513]}]]],[\"bds-checkbox.cjs\",[[1,\"bds-checkbox\",{\"refer\":[1],\"label\":[1],\"name\":[1],\"checked\":[1540],\"disabled\":[4],\"checkBoxId\":[32],\"getInputElement\":[64],\"getValue\":[64]}]]],[\"bds-chip-selected.cjs\",[[1,\"bds-chip-selected\",{\"icon\":[1],\"color\":[1],\"size\":[1],\"selected\":[4],\"disabled\":[4],\"dataTest\":[1,\"data-test\"],\"isSelected\":[32]},[[2,\"click\",\"handleClick\"]]]]],[\"bds-chip-tag.cjs\",[[1,\"bds-chip-tag\",{\"icon\":[1],\"color\":[1]}]]],[\"bds-input-editable.cjs\",[[1,\"bds-input-editable\",{\"size\":[1],\"expand\":[4],\"dataTest\":[1,\"data-test\"],\"inputName\":[1,\"input-name\"],\"value\":[1537],\"requiredErrorMessage\":[1,\"required-error-message\"],\"minlength\":[2],\"minlengthErrorMessage\":[1,\"minlength-error-message\"],\"maxlength\":[2],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"placeholder\":[1],\"danger\":[1540],\"isEditing\":[32],\"isValid\":[32],\"isPressed\":[32],\"isFocused\":[32],\"validationMesage\":[32],\"validationDanger\":[32]}]]],[\"bds-input-password.cjs\",[[2,\"bds-input-password\",{\"openEyes\":[4,\"open-eyes\"],\"value\":[1537],\"label\":[1],\"inputName\":[1,\"input-name\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"readonly\":[4],\"helperMessage\":[1,\"helper-message\"],\"errorMessage\":[1,\"error-message\"],\"danger\":[516],\"icon\":[513],\"disabled\":[4],\"autoCapitalize\":[1,\"auto-capitalize\"],\"autoComplete\":[1,\"auto-complete\"],\"placeholder\":[1],\"dataTest\":[1,\"data-test\"],\"validationDanger\":[32],\"isPressed\":[32],\"validationMesage\":[32]}]]],[\"bds-menu-action.cjs\",[[1,\"bds-menu-action\",{\"buttonText\":[1,\"button-text\"],\"subMenu\":[4,\"sub-menu\"],\"iconLeft\":[1,\"icon-left\"],\"lipstick\":[4],\"openSubMenu\":[32],\"stateSubMenu\":[32],\"delaySubMenu\":[32],\"zIndex\":[32],\"delay\":[32]}]]],[\"bds-menu-list-item.cjs\",[[1,\"bds-menu-list-item\",{\"color\":[1],\"icon\":[513]}]]],[\"bds-sidebar.cjs\",[[1,\"bds-sidebar\",{\"isOpen\":[1540,\"is-open\"],\"sidebarPosition\":[1,\"sidebar-position\"],\"InnerSpacing\":[32],\"toggle\":[64]}]]],[\"bds-step.cjs\",[[1,\"bds-step\",{\"last\":[4],\"completed\":[4],\"active\":[4],\"disabled\":[4],\"index\":[2],\"pointer\":[4]}]]],[\"bds-tabs.cjs\",[[4,\"bds-tabs\",{\"align\":[1]},[[0,\"scrollButtonClick\",\"onScrollButtonClick\"],[0,\"bdsSelect\",\"onSelectedTab\"]]]]],[\"bds-warning.cjs\",[[1,\"bds-warning\"]]],[\"bds-alert-body.cjs\",[[1,\"bds-alert-body\"]]],[\"bds-card-color.cjs\",[[1,\"bds-card-color\",{\"name\":[1],\"hex\":[1],\"gradient\":[4],\"variable\":[1],\"lightText\":[4,\"light-text\"]}]]],[\"bds-chip.cjs\",[[1,\"bds-chip\",{\"icon\":[1],\"size\":[1],\"variant\":[1],\"danger\":[516],\"filter\":[4],\"clickable\":[4],\"deletable\":[4],\"disabled\":[4]}]]],[\"bds-expansion-panel-header.cjs\",[[1,\"bds-expansion-panel-header\",{\"text\":[1]}]]],[\"bds-menu-separation.cjs\",[[1,\"bds-menu-separation\",{\"value\":[1],\"size\":[1]}]]],[\"bds-modal.cjs\",[[1,\"bds-modal\",{\"open\":[1540],\"closeButton\":[1540,\"close-button\"],\"size\":[1537],\"toggle\":[64]}]]],[\"bds-modal-close-button.cjs\",[[1,\"bds-modal-close-button\",{\"active\":[1540]}]]],[\"bds-progress-bar.cjs\",[[1,\"bds-progress-bar\",{\"percent\":[2],\"text\":[1]}]]],[\"bds-radio.cjs\",[[1,\"bds-radio\",{\"refer\":[1],\"label\":[1],\"value\":[1],\"name\":[1],\"checked\":[1540],\"disabled\":[4],\"dataTest\":[1,\"data-test\"],\"radioId\":[32],\"getInputElement\":[64],\"getValue\":[64]}]]],[\"bds-tab.cjs\",[[0,\"bds-tab\",{\"group\":[1],\"label\":[1],\"active\":[4],\"getChild\":[64]}]]],[\"bds-tab-panel.cjs\",[[4,\"bds-tab-panel\",{\"group\":[1],\"active\":[4],\"getChild\":[64]}]]],[\"bds-tooltip.cjs\",[[1,\"bds-tooltip\",{\"tooltipText\":[1,\"tooltip-text\"],\"disabled\":[516],\"position\":[1],\"dataTest\":[1,\"data-test\"],\"isMouseOver\":[32]}]]],[\"bds-accordion.cjs\",[[1,\"bds-accordion\",{\"isOpen\":[32],\"numberElement\":[32],\"toggle\":[64],\"close\":[64],\"reciveNumber\":[64]}]]],[\"bds-accordion-body.cjs\",[[1,\"bds-accordion-body\",{\"isOpen\":[32],\"heightContainer\":[32],\"numberElement\":[32],\"toggle\":[64],\"close\":[64]}]]],[\"bds-accordion-group.cjs\",[[1,\"bds-accordion-group\",{\"collapse\":[1],\"closeAll\":[64]}]]],[\"bds-alert.cjs\",[[1,\"bds-alert\",{\"open\":[1540],\"toggle\":[64]}]]],[\"bds-alert-actions.cjs\",[[1,\"bds-alert-actions\"]]],[\"bds-banner-link.cjs\",[[1,\"bds-banner-link\",{\"link\":[1]}]]],[\"bds-expansion-panel.cjs\",[[1,\"bds-expansion-panel\"]]],[\"bds-expansion-panel-body.cjs\",[[1,\"bds-expansion-panel-body\",{\"open\":[4],\"text\":[1]}]]],[\"bds-illustration.cjs\",[[1,\"bds-illustration\",{\"type\":[1],\"name\":[1],\"dataTest\":[1,\"data-test\"],\"IllustrationContent\":[32]}]]],[\"bds-loading-page.cjs\",[[1,\"bds-loading-page\",{\"svgContent\":[32]}]]],[\"bds-menu.cjs\",[[1,\"bds-menu\",{\"menu\":[1],\"position\":[1],\"open\":[1540],\"menuPositionTopToBottom\":[32],\"menuPositionLeftToBottom\":[32],\"menuPositionTopToRight\":[32],\"menuPositionLeftToRight\":[32],\"toggle\":[64]}]]],[\"bds-menu-list.cjs\",[[1,\"bds-menu-list\"]]],[\"bds-modal-action.cjs\",[[1,\"bds-modal-action\"]]],[\"bds-radio-group.cjs\",[[6,\"bds-radio-group\",{\"value\":[1537]}]]],[\"bds-stepper.cjs\",[[4,\"bds-stepper\",{\"setActiveStep\":[64],\"setCompletedStep\":[64],\"getActiveStep\":[64],\"resetActiveSteps\":[64],\"resetCompletedSteps\":[64]}]]],[\"bds-switch.cjs\",[[1,\"bds-switch\",{\"refer\":[1],\"size\":[1],\"name\":[1],\"checked\":[1540],\"disabled\":[4],\"dataTest\":[1,\"data-test\"],\"switchId\":[32],\"getInputElement\":[64],\"getValue\":[64]}]]],[\"bds-input-chips.cjs\",[[6,\"bds-input-chips\",{\"chips\":[1025],\"type\":[1],\"label\":[1],\"maxlength\":[2],\"icon\":[513],\"delimiters\":[16],\"errorMessage\":[1025,\"error-message\"],\"danger\":[1540],\"value\":[1537],\"duplicated\":[4],\"disableSubmit\":[4,\"disable-submit\"],\"disabled\":[516],\"helperMessage\":[1,\"helper-message\"],\"inputName\":[1,\"input-name\"],\"placeholder\":[1],\"dataTest\":[1,\"data-test\"],\"validationDanger\":[32],\"isPressed\":[32],\"validationMesage\":[32],\"internalChips\":[32],\"isValid\":[64],\"get\":[64],\"clear\":[64],\"add\":[64],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"bds-datepicker-period.cjs\",[[1,\"bds-datepicker-period\",{\"startDate\":[16],\"endDate\":[16],\"startDateSelect\":[1040],\"endDateSelect\":[1040],\"language\":[1],\"week\":[32],\"months\":[32],\"years\":[32],\"monthActivated\":[32],\"yearActivated\":[32],\"animatePrev\":[32],\"animateNext\":[32],\"activeSelectYear\":[32],\"openSelectMonth\":[32],\"openSelectYear\":[32],\"monthsSlide\":[32],\"loadingSlide\":[32],\"clear\":[64]}]]],[\"bds-datepicker-single.cjs\",[[1,\"bds-datepicker-single\",{\"endDate\":[16],\"startDate\":[16],\"dateSelect\":[1040],\"language\":[1],\"week\":[32],\"months\":[32],\"years\":[32],\"monthActivated\":[32],\"yearActivated\":[32],\"animatePrev\":[32],\"animateNext\":[32],\"openSelectMonth\":[32],\"openSelectYear\":[32],\"monthsSlide\":[32],\"loadingSlide\":[32],\"clear\":[64]}]]],[\"bds-input.cjs\",[[1,\"bds-input\",{\"inputName\":[1,\"input-name\"],\"type\":[513],\"label\":[1],\"placeholder\":[1],\"autoCapitalize\":[1,\"auto-capitalize\"],\"autoComplete\":[1,\"auto-complete\"],\"max\":[1],\"maxlength\":[2],\"min\":[1],\"minlength\":[2],\"readonly\":[4],\"required\":[4],\"pattern\":[1],\"helperMessage\":[1,\"helper-message\"],\"errorMessage\":[1025,\"error-message\"],\"icon\":[513],\"disabled\":[1540],\"danger\":[1540],\"value\":[1025],\"counterLength\":[4,\"counter-length\"],\"counterLengthRule\":[16],\"isSubmit\":[4,\"is-submit\"],\"isTextarea\":[4,\"is-textarea\"],\"rows\":[2],\"cols\":[2],\"requiredErrorMessage\":[1,\"required-error-message\"],\"minlengthErrorMessage\":[1,\"minlength-error-message\"],\"minErrorMessage\":[1,\"min-error-message\"],\"maxErrorMessage\":[1,\"max-error-message\"],\"emailErrorMessage\":[1,\"email-error-message\"],\"numberErrorMessage\":[1,\"number-error-message\"],\"chips\":[4],\"dataTest\":[1,\"data-test\"],\"isPressed\":[32],\"isPassword\":[32],\"validationMesage\":[32],\"validationDanger\":[32],\"setFocus\":[64],\"removeFocus\":[64],\"getInputElement\":[64],\"isValid\":[64],\"clear\":[64]}]]],[\"bds-button-icon.cjs\",[[1,\"bds-button-icon\",{\"disabled\":[4],\"size\":[1],\"variant\":[1],\"icon\":[513]}]]],[\"bds-banner.cjs\",[[1,\"bds-banner\",{\"bannerAlign\":[1,\"banner-align\"],\"buttonClose\":[1,\"button-close\"],\"context\":[1],\"variant\":[1],\"visible\":[32],\"toggle\":[64]}]]],[\"bds-paper.cjs\",[[1,\"bds-paper\",{\"elevation\":[1],\"dataTest\":[1,\"data-test\"]}]]],[\"bds-toast-container.cjs\",[[6,\"bds-toast-container\"]]],[\"bds-loading-spinner.cjs\",[[0,\"bds-loading-spinner\",{\"variant\":[1],\"size\":[1],\"color\":[1],\"svgContent\":[32]}]]],[\"bds-icon.cjs\",[[1,\"bds-icon\",{\"color\":[1],\"ariaLabel\":[1537,\"aria-label\"],\"flipRtl\":[4,\"flip-rtl\"],\"name\":[1],\"src\":[1],\"icon\":[8],\"size\":[1],\"lazy\":[4],\"theme\":[513],\"type\":[1],\"dataTest\":[1,\"data-test\"],\"svgContent\":[32],\"isVisible\":[32]}]]],[\"bds-typo.cjs\",[[1,\"bds-typo\",{\"variant\":[1],\"lineHeight\":[1,\"line-height\"],\"bold\":[1],\"italic\":[4],\"noWrap\":[4,\"no-wrap\"],\"paragraph\":[4],\"margin\":[4],\"tag\":[1],\"dataTest\":[1,\"data-test\"]}]]],[\"bds-button.cjs\",[[1,\"bds-button\",{\"disabled\":[4],\"size\":[1],\"variant\":[1],\"icon\":[513],\"arrow\":[4],\"type\":[1],\"typeIcon\":[513,\"type-icon\"],\"bdsLoading\":[4,\"bds-loading\"],\"bdsLoadingVariant\":[1,\"bds-loading-variant\"],\"bdsLoadingColor\":[1,\"bds-loading-color\"],\"dataTest\":[1,\"data-test\"]}]]],[\"bds-chip-clickable.cjs\",[[1,\"bds-chip-clickable\",{\"icon\":[1],\"avatar\":[1],\"color\":[1],\"size\":[1],\"clickable\":[4],\"close\":[4],\"disabled\":[4],\"dataTest\":[1,\"data-test\"],\"visible\":[32]}]]],[\"bds-counter-text.cjs\",[[0,\"bds-counter-text\",{\"length\":[1026],\"max\":[2],\"active\":[1028],\"warning\":[1040],\"delete\":[1040]}]]],[\"bds-avatar.cjs\",[[0,\"bds-avatar\",{\"name\":[1],\"thumbnail\":[1],\"size\":[1],\"upload\":[4],\"ellipsis\":[2],\"dataTest\":[1,\"data-test\"]}]]],[\"bds-select-option.cjs\",[[6,\"bds-select-option\",{\"value\":[8],\"selected\":[4],\"disabled\":[4],\"invisible\":[1540],\"danger\":[1540],\"bulkOption\":[1,\"bulk-option\"],\"slotAlign\":[1,\"slot-align\"],\"titleText\":[1,\"title-text\"],\"status\":[1],\"dataTest\":[1,\"data-test\"]}]]]]"), options);
   });
 };
 

package/dist/collection/components/input-chips/input-chips.css

@@ -16,14 +16,282 @@
 /**
  * Define media query values
  */
+/** Customs */
+/** Animations */
+/** Aligns */
+/** Scoll Bar */
 :host {
   display: display;
 }
 
+.element_input {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  flex: 1;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+}
+.element_input input {
+  box-shadow: inherit;
+}
+.element_input input::placeholder {
+  color: #b9cbd3;
+  opacity: 1;
+}
+.element_input input::-webkit-input-placeholder {
+  color: #b9cbd3;
+  opacity: 1;
+}
+
+.input {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 4px 9px 12px;
+  flex: 1;
+  width: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  background: #ffffff;
+}
+.input--state-primary {
+  border: 1px solid #d2dfe6;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-primary:hover {
+  border: 1px solid #3f7de8;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-primary.input--pressed {
+  border: 1px solid #3f7de8;
+  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;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-danger:hover {
+  border: 1px solid #ff4c4c;
+  box-sizing: border-box;
+  border-radius: 8px;
+}
+.input--state-danger.input--pressed {
+  border: 1px solid #ff4c4c;
+  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;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: #f3f6fa;
+}
+.input--state-disabled:hover {
+  border: 1px solid #b9cbd3;
+  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;
+  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: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  margin-right: 8px;
+  padding: 2.5px;
+}
+.input__icon--large {
+  padding: 4px;
+}
+.input__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+.input__container__wrapper {
+  display: flex;
+  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: flex;
+  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;
+  /* Browsers have different default form fonts */
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  /* Make webkit render the search input like a normal text field */
+  /* Turn off the recent search for webkit. It adds about 15px padding on the left */
+  /* Fix IE7 display bug */
+  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: flex;
+  align-items: baseline;
+  height: 20px;
+  margin: 3.7px 2.5px;
+  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;
+  align-self: self-start;
+}
+.input__message__icon {
+  display: flex;
+  padding-right: 4px;
+  margin-top: 0px;
+  padding-top: 2px;
+}
+.input__message--danger {
+  color: #ff4c4c;
+}
+
 .inside-input-left {
   display: inline-flex;
   gap: 8px;
   flex-wrap: wrap;
+  margin-right: 8px;
 }
 
 .input-chips__chip {

package/dist/collection/components/input-chips/input-chips.js

@@ -2,6 +2,18 @@ import { Component, Host, h, Prop, Method, Event, Watch, State } from '@stencil/
 import { emailValidation, whitespaceValidation } from '../../utils/validations';
 export class InputChips {
   constructor() {
+    /**
+     * Used to set the danger behavior by the internal validators
+     */
+    this.validationDanger = false;
+    /**
+     * Conditions the element to say whether it is pressed or not, to add styles.
+     */
+    this.isPressed = false;
+    /**
+     * Used to set the error message setted by the internal validators
+     */
+    this.validationMesage = '';
     this.internalChips = [];
     /**
      * The chips on the component
@@ -66,6 +78,37 @@ export class InputChips {
      * Data test is the prop to specifically test the component action object.
      */
     this.dataTest = null;
+    this.onClickWrapper = () => {
+      this.onFocus();
+      if (this.nativeInput) {
+        this.nativeInput.focus();
+      }
+    };
+    this.onFocus = () => {
+      this.bdsInputChipsFocus.emit();
+      this.isPressed = true;
+    };
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
+      this.bdsInputChipsInput.emit(ev);
+    };
+    this.keyPressWrapper = (event) => {
+      switch (event.key) {
+        case 'Enter':
+          this.setChip(this.value);
+          this.value = '';
+          break;
+        case 'Backspace' || 'Delete':
+          if ((this.value === null || this.value.length <= 0) && this.internalChips.length) {
+            this.removeLastChip();
+            this.bdsChangeChips.emit({ data: this.internalChips });
+          }
+          break;
+      }
+    };
   }
   /**
    * Call change event before alter chips values.
@@ -114,10 +157,10 @@ export class InputChips {
     this.setChip(value);
   }
   async setFocus() {
-    this.nativeInput.setFocus();
+    this.nativeInput.focus();
   }
   async removeFocus() {
-    this.nativeInput.removeFocus();
+    this.nativeInput.blur();
   }
   componentWillLoad() {
     this.valueChanged();
@@ -132,25 +175,11 @@ export class InputChips {
   }
   handleOnBlur() {
     this.bdsBlur.emit(this.internalChips);
-  }
-  handleAddChip(event) {
-    if (this.disableSubmit) {
-      return;
-    }
-    const { detail: { value }, } = event;
-    this.setChip(value);
-    this.value = '';
+    this.isPressed = false;
   }
   getLastChip() {
     return this.internalChips[this.internalChips.length - 1];
   }
-  handleBackRemove(event) {
-    const { detail: { value }, } = event;
-    if ((value === null || value.length <= 0) && this.internalChips.length) {
-      this.removeLastChip();
-      this.bdsChangeChips.emit({ data: this.internalChips, value });
-    }
-  }
   verifyAndSubstituteDelimiters(value) {
     if (value.length === 1 && value[0].match(this.delimiters)) {
       return '';
@@ -219,12 +248,54 @@ export class InputChips {
       return (h("bds-chip-clickable", { id: id, key: id, color: "default", close: !this.disabled, onChipClickableClose: (event) => this.removeChip(event) }, chip));
     });
   }
+  renderIcon() {
+    return (this.icon && (h("div", { class: {
+        input__icon: true,
+        'input__icon--large': !!this.label,
+      } },
+      h("bds-icon", { size: this.label ? 'medium' : 'small', name: this.icon, color: "inherit" }))));
+  }
+  renderLabel() {
+    return (this.label && (h("label", { class: {
+        input__container__label: true,
+        'input__container__label--pressed': this.isPressed && !this.disabled,
+      } },
+      h("bds-typo", { variant: "fs-12", bold: "bold" }, this.label))));
+  }
+  renderMessage() {
+    const icon = this.danger ? 'error' : 'info';
+    let message = this.danger ? this.errorMessage : this.helperMessage;
+    if (!message && this.validationDanger)
+      message = this.validationMesage;
+    const styles = this.danger || this.validationDanger ? 'input__message input__message--danger' : 'input__message';
+    if (message) {
+      return (h("div", { class: styles, part: "input__message" },
+        h("div", { class: "input__message__icon" },
+          h("bds-icon", { size: "x-small", name: icon, theme: "solid", color: "inherit" })),
+        h("bds-typo", { variant: "fs-12" }, message)));
+    }
+    return undefined;
+  }
   render() {
+    const isPressed = this.isPressed && !this.disabled;
     return (h(Host, null,
-      h("bds-input", { ref: (input) => (this.nativeInput = input), icon: this.icon, label: this.label, onBdsKeyDownBackspace: (event) => this.handleBackRemove(event), onBdsSubmit: (event) => this.handleAddChip(event), onBdsOnBlur: () => this.handleOnBlur(), onBdsChange: (event) => this.handleChange(event), maxlength: this.maxlength, value: this.value, "error-message": this.errorMessage, "helper-message": this.helperMessage, "input-name": this.inputName, placeholder: this.placeholder, danger: this.danger, chips: true, disabled: this.disabled, "data-test": this.dataTest },
-        h("span", { class: "inside-input-left", slot: "inside-input-left" }, this.renderChips()),
-        h("div", { slot: "input-right" },
-          h("slot", { name: "input-right" })))));
+      h("div", { class: { element_input: true }, "aria-disabled": this.disabled ? 'true' : null },
+        h("div", { class: {
+            input: true,
+            'input--state-primary': !this.danger && !this.validationDanger,
+            'input--state-danger': this.danger || this.validationDanger,
+            'input--state-disabled': this.disabled,
+            'input--label': !!this.label,
+            'input--pressed': isPressed,
+          }, onClick: this.onClickWrapper, onKeyDown: this.keyPressWrapper, part: "input-container" },
+          this.renderIcon(),
+          h("div", { class: "input__container" },
+            this.renderLabel(),
+            h("div", { class: { input__container__wrapper: true } },
+              this.internalChips.length > 0 && h("span", { class: "inside-input-left" }, this.renderChips()),
+              h("input", { ref: (input) => (this.nativeInput = input), class: { input__container__text: true }, name: this.inputName, maxlength: this.maxlength, placeholder: this.placeholder, onInput: this.onInput, onFocus: this.onFocus, onBlur: () => this.handleOnBlur(), onChange: () => this.handleChange, value: this.value, disabled: this.disabled, "data-test": this.dataTest }))),
+          h("slot", { name: "input-right" })),
+        this.renderMessage())));
   }
   static get is() { return "bds-input-chips"; }
   static get encapsulation() { return "scoped"; }
@@ -527,6 +598,9 @@ export class InputChips {
     }
   }; }
   static get states() { return {
+    "validationDanger": {},
+    "isPressed": {},
+    "validationMesage": {},
     "internalChips": {}
   }; }
   static get events() { return [{
@@ -559,6 +633,21 @@ export class InputChips {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "bdsInputChipsFocus",
+      "name": "bdsInputChipsFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the chip has added."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }, {
       "method": "bdsBlur",
       "name": "bdsBlur",
@@ -574,6 +663,21 @@ export class InputChips {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "bdsInputChipsInput",
+      "name": "bdsInputChipsInput",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the chip has added."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }, {
       "method": "bdsSubmit",
       "name": "bdsSubmit",