blip-ds 1.151.0 → 1.152.0

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-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]}]]],[\"bds-datepicker.cjs\",[[0,\"bds-datepicker\",{\"typeOfDate\":[1,\"type-of-date\"],\"startDateLimit\":[1537,\"start-date-limit\"],\"endDateLimit\":[1537,\"end-date-limit\"],\"message\":[1],\"endDateLimitDaysList\":[32],\"open\":[32],\"dateSelected\":[32],\"endDateSelected\":[32],\"valueDateSelected\":[32],\"valueEndDateSelected\":[32],\"errorMsgDate\":[32],\"errorMsgEndDate\":[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],\"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-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\"],\"isOpen\":[32],\"text\":[32],\"internalOptions\":[32],\"isFocused\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-input-phone-number.cjs\",[[2,\"bds-input-phone-number\",{\"options\":[16],\"text\":[1],\"value\":[1032],\"danger\":[516],\"disabled\":[516],\"required\":[4],\"requiredErrorMessage\":[1,\"required-error-message\"],\"numberErrorMessage\":[1,\"number-error-message\"],\"label\":[1],\"icon\":[513],\"isOpen\":[32],\"selectedCountry\":[32],\"isPressed\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-select.cjs\",[[1,\"bds-select\",{\"options\":[1],\"value\":[1032],\"danger\":[516],\"disabled\":[516],\"label\":[1],\"icon\":[513],\"placeholder\":[1],\"optionsPosition\":[1,\"options-position\"],\"isOpen\":[32],\"text\":[32],\"internalOptions\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-input-editable.cjs\",[[1,\"bds-input-editable\",{\"size\":[1],\"expand\":[4],\"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\"],\"danger\":[1540],\"isEditing\":[32],\"isValid\":[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]}]]],[\"bds-avatar-group.cjs\",[[4,\"bds-avatar-group\",{\"size\":[1],\"users\":[1],\"internalUsers\":[32],\"leftoversUsers\":[32]}]]],[\"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-alert-header.cjs\",[[1,\"bds-alert-header\",{\"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-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],\"isSelected\":[32]},[[0,\"keydown\",\"handleKeyDown\"],[2,\"click\",\"handleClick\"]]]]],[\"bds-chip-tag.cjs\",[[1,\"bds-chip-tag\",{\"icon\":[1],\"color\":[1]}]]],[\"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-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-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\"],\"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],\"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],\"isMouseOver\":[32]}]]],[\"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],\"IllustrationContent\":[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-paper.cjs\",[[1,\"bds-paper\",{\"elevation\":[1]}]]],[\"bds-radio-group.cjs\",[[6,\"bds-radio-group\",{\"value\":[1]}]]],[\"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],\"switchId\":[32],\"getInputElement\":[64],\"getValue\":[64]}]]],[\"bds-chip.cjs\",[[1,\"bds-chip\",{\"icon\":[1],\"size\":[1],\"variant\":[1],\"danger\":[516],\"filter\":[4],\"clickable\":[4],\"deletable\":[4],\"disabled\":[4]}]]],[\"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],\"internalChips\":[32],\"isValid\":[64],\"get\":[64],\"clear\":[64],\"add\":[64],\"setFocus\":[64],\"removeFocus\":[64]}]]],[\"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]}]]],[\"bds-datepicker-period.cjs\",[[1,\"bds-datepicker-period\",{\"startDate\":[16],\"endDate\":[16],\"startDateSelect\":[1040],\"endDateSelect\":[1040],\"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],\"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-toast-container.cjs\",[[6,\"bds-toast-container\"]]],[\"bds-loading-spinner.cjs\",[[0,\"bds-loading-spinner\",{\"variant\":[1]}]]],[\"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],\"svgContent\":[32],\"isVisible\":[32]}]]],[\"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\"]}]]],[\"bds-avatar.cjs\",[[0,\"bds-avatar\",{\"name\":[1],\"thumbnail\":[1],\"size\":[1],\"upload\":[4],\"ellipsis\":[2]}]]],[\"bds-button-icon.cjs\",[[1,\"bds-button-icon\",{\"disabled\":[4],\"size\":[1],\"variant\":[1],\"icon\":[513]}]]],[\"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]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"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]}]]],[\"bds-datepicker.cjs\",[[0,\"bds-datepicker\",{\"typeOfDate\":[1,\"type-of-date\"],\"startDateLimit\":[1537,\"start-date-limit\"],\"endDateLimit\":[1537,\"end-date-limit\"],\"message\":[1],\"endDateLimitDaysList\":[32],\"open\":[32],\"dateSelected\":[32],\"endDateSelected\":[32],\"valueDateSelected\":[32],\"valueEndDateSelected\":[32],\"errorMsgDate\":[32],\"errorMsgEndDate\":[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],\"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-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\"],\"isOpen\":[32],\"text\":[32],\"internalOptions\":[32],\"isFocused\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-input-phone-number.cjs\",[[2,\"bds-input-phone-number\",{\"options\":[16],\"text\":[1],\"value\":[1032],\"danger\":[516],\"disabled\":[516],\"required\":[4],\"requiredErrorMessage\":[1,\"required-error-message\"],\"numberErrorMessage\":[1,\"number-error-message\"],\"label\":[1],\"icon\":[513],\"isOpen\":[32],\"selectedCountry\":[32],\"isPressed\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-select.cjs\",[[1,\"bds-select\",{\"options\":[1],\"value\":[1032],\"danger\":[516],\"disabled\":[516],\"label\":[1],\"icon\":[513],\"placeholder\":[1],\"optionsPosition\":[1,\"options-position\"],\"isOpen\":[32],\"text\":[32],\"internalOptions\":[32]},[[9,\"mousedown\",\"handleWindow\"]]]]],[\"bds-input-editable.cjs\",[[1,\"bds-input-editable\",{\"size\":[1],\"expand\":[4],\"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\"],\"danger\":[1540],\"isEditing\":[32],\"isValid\":[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]}]]],[\"bds-avatar-group.cjs\",[[4,\"bds-avatar-group\",{\"size\":[1],\"users\":[1],\"internalUsers\":[32],\"leftoversUsers\":[32]}]]],[\"bds-chip-clickable.cjs\",[[1,\"bds-chip-clickable\",{\"icon\":[1],\"avatar\":[1],\"color\":[1],\"size\":[1],\"clickable\":[4],\"close\":[4],\"disabled\":[4],\"visible\":[32]}]]],[\"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-alert-header.cjs\",[[1,\"bds-alert-header\",{\"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-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],\"isSelected\":[32]},[[0,\"keydown\",\"handleKeyDown\"],[2,\"click\",\"handleClick\"]]]]],[\"bds-chip-tag.cjs\",[[1,\"bds-chip-tag\",{\"icon\":[1],\"color\":[1]}]]],[\"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-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-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\"],\"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],\"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],\"isMouseOver\":[32]}]]],[\"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],\"IllustrationContent\":[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-paper.cjs\",[[1,\"bds-paper\",{\"elevation\":[1]}]]],[\"bds-radio-group.cjs\",[[6,\"bds-radio-group\",{\"value\":[1]}]]],[\"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],\"switchId\":[32],\"getInputElement\":[64],\"getValue\":[64]}]]],[\"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],\"svgContent\":[32],\"isVisible\":[32]}]]],[\"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],\"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],\"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],\"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-toast-container.cjs\",[[6,\"bds-toast-container\"]]],[\"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\"]}]]],[\"bds-chip.cjs\",[[1,\"bds-chip\",{\"icon\":[1],\"size\":[1],\"variant\":[1],\"danger\":[516],\"filter\":[4],\"clickable\":[4],\"deletable\":[4],\"disabled\":[4]}]]],[\"bds-avatar.cjs\",[[0,\"bds-avatar\",{\"name\":[1],\"thumbnail\":[1],\"size\":[1],\"upload\":[4],\"ellipsis\":[2]}]]],[\"bds-button-icon.cjs\",[[1,\"bds-button-icon\",{\"disabled\":[4],\"size\":[1],\"variant\":[1],\"icon\":[513]}]]],[\"bds-loading-spinner.cjs\",[[0,\"bds-loading-spinner\",{\"variant\":[1]}]]],[\"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]}]]],[\"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]}]]]]"), options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -9,6 +9,7 @@
     "./components/button/button.js",
     "./components/icon-button/icon-button.js",
     "./components/chip/chip.js",
+    "./components/chip-clickable/chip-clickable.js",
     "./components/chip-selected/chip-selected.js",
     "./components/chip-tag/chip-tag.js",
     "./components/datepicker/datepicker.js",

package/dist/collection/components/chip-clickable/chip-clickable.css

@@ -0,0 +1,149 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
+/*
+  Font family is Nunito Sans. Its fallback is Helvetica
+*/
+/*
+  Font sizes have been converted to rem considering a base size of 16px.
+*/
+/*
+*  Z-Index
+*  
+*  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. 
+*  Overlapping elements with a larger z-index cover those with a smaller one.
+*  
+*  REF: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
+*  REF: https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/  
+*/
+/**
+ * Define media query values
+ */
+:host {
+  display: block;
+  height: max-content;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+:host .chip_clickable {
+  display: flex;
+  min-width: 32px;
+  width: fit-content;
+  height: 32px;
+  border-radius: 16px;
+  padding: 2px 4px;
+  align-items: center;
+  box-sizing: border-box;
+  justify-content: center;
+  position: relative;
+  z-index: 0;
+}
+:host .chip_clickable--hide {
+  display: none;
+  padding: 0;
+  border: none;
+}
+:host .chip_clickable .chip_focus:focus {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 2px;
+  border-radius: 4px;
+  outline: #c226fb solid 2px;
+}
+:host .chip_clickable--click {
+  cursor: pointer;
+}
+:host .chip_clickable--click .chip_darker {
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  z-index: 1;
+  backdrop-filter: brightness(1);
+  box-sizing: border-box;
+}
+:host .chip_clickable--click:hover .chip_darker {
+  opacity: 1;
+  backdrop-filter: brightness(0.9);
+}
+:host .chip_clickable--click:active .chip_darker {
+  opacity: 1;
+  backdrop-filter: brightness(0.8);
+}
+:host .chip_clickable--disabled {
+  cursor: default;
+  background-color: #f3f6fa;
+}
+:host .chip_clickable--disabled .chip_clickable--icon {
+  color: #505f79;
+}
+:host .chip_clickable--disabled .chip_clickable--text {
+  color: #505f79;
+}
+:host .chip_clickable--disabled .chip_clickable--close {
+  cursor: default;
+}
+:host .chip_clickable--icon {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  padding-left: 4px;
+  color: #202c44;
+  z-index: 2;
+}
+:host .chip_clickable--close {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  padding-right: 4px;
+  mix-blend-mode: hard-light;
+  color: #202c44;
+  opacity: 0.7;
+  z-index: 2;
+  position: relative;
+  cursor: pointer;
+}
+:host .chip_clickable--close .close_focus:focus {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: -2px;
+  border-radius: 4px;
+  outline: #c226fb solid 2px;
+}
+:host .chip_clickable--text {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  height: 20px;
+  margin: 0 8px;
+  z-index: 2;
+  color: #202c44;
+  font-family: "Nunito Sans", "Tahoma", "Helvetica", "Arial", sans-serif;
+}
+:host .chip_clickable--tall {
+  height: 40px;
+  border-radius: 24px;
+}
+:host .chip_clickable--default {
+  background-color: #b3d4ff;
+}
+:host .chip_clickable--info {
+  background-color: #80e3eb;
+}
+:host .chip_clickable--success {
+  background-color: #90e6bc;
+}
+:host .chip_clickable--warning {
+  background-color: #fff6a8;
+}
+:host .chip_clickable--danger {
+  background-color: #ffa5a5;
+}
+:host .chip_clickable--outline {
+  background-color: #ffffff;
+  border: 1px solid #b9cbd3;
+}
+:host .chip_clickable:focus-visible {
+  outline: none;
+}

package/dist/collection/components/chip-clickable/chip-clickable.js

@@ -0,0 +1,257 @@
+import { Component, Host, h, Prop, Event, Element, State } from '@stencil/core';
+export class ChipClickable {
+  constructor() {
+    this.visible = true;
+    /**
+     * used for change the color. Uses one of them.
+     */
+    this.color = 'default';
+    /**
+     * used for change the size chip. Uses one of them.
+     */
+    this.size = 'standard';
+    /**
+     * it makes the chip clickable.
+     */
+    this.clickable = false;
+    /**
+     * used for delete the chip.
+     */
+    this.close = false;
+    /**
+     * the chip gone stay disabled while this prop be true.
+     */
+    this.disabled = false;
+  }
+  handleClick(event) {
+    if (event.key === 'Enter' && !this.disabled) {
+      event.preventDefault();
+      this.chipClickableClick.emit();
+    }
+  }
+  handleCloseChip(event) {
+    if (event.key === 'Enter' && !this.disabled) {
+      event.preventDefault();
+      this.chipClickableClose.emit({ id: this.element.id });
+      this.visible = false;
+    }
+    else {
+      event.preventDefault();
+      this.chipClickableClose.emit({ id: this.element.id });
+      this.visible = false;
+    }
+  }
+  getSizeAvatarChip() {
+    if (this.size === 'tall') {
+      return 'extra-small';
+    }
+    else
+      return 'micro';
+  }
+  getSizeIconChip() {
+    if (this.size === 'tall') {
+      return 'medium';
+    }
+    else
+      return 'x-small';
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: {
+          chip_clickable: true,
+          [`chip_clickable--${this.color}`]: true && !this.disabled,
+          [`chip_clickable--${this.size}`]: true,
+          'chip_clickable--hide': !this.visible,
+          'chip_clickable--click': this.clickable,
+          'chip_clickable--disabled': this.disabled,
+        }, onClick: this.handleClick.bind(this) },
+        this.clickable && !this.disabled && (h("div", { class: "chip_focus", onKeyDown: this.handleClick.bind(this), tabindex: "0" })),
+        this.clickable && !this.disabled && h("div", { class: "chip_darker" }),
+        this.icon && !this.avatar && (h("div", { class: "chip_clickable--icon" },
+          h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))),
+        this.avatar && (h("div", { class: "chip_clickable--avatar" },
+          h("bds-avatar", { size: this.getSizeAvatarChip(), thumbnail: this.avatar }))),
+        h("bds-typo", { class: "chip_clickable--text", variant: "fs-12", bold: "bold" },
+          h("slot", null)),
+        this.close && (h("div", { class: "chip_clickable--close", onClick: this.handleCloseChip.bind(this) },
+          !this.disabled && (h("div", { class: "close_focus", onKeyDown: this.handleCloseChip.bind(this), tabindex: "0" })),
+          h("bds-icon", { size: "x-small", theme: "solid", name: "error" }))))));
+  }
+  static get is() { return "bds-chip-clickable"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["chip-clickable.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["chip-clickable.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "used for add icon in left container. Uses the bds-icon component."
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "avatar": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "used for add avatar left container. Uses the bds-avatar component."
+      },
+      "attribute": "avatar",
+      "reflect": false
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Color",
+        "resolved": "\"danger\" | \"default\" | \"info\" | \"outline\" | \"success\" | \"warning\"",
+        "references": {
+          "Color": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "used for change the color. Uses one of them."
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Size",
+        "resolved": "\"standard\" | \"tall\"",
+        "references": {
+          "Size": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "used for change the size chip. Uses one of them."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'standard'"
+    },
+    "clickable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "it makes the chip clickable."
+      },
+      "attribute": "clickable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "close": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "used for delete the chip."
+      },
+      "attribute": "close",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "the chip gone stay disabled while this prop be true."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "visible": {}
+  }; }
+  static get events() { return [{
+      "method": "chipClickableClose",
+      "name": "chipClickableClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered after a mouse click on close icon, return id element. Only fired when close is true."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "chipClickableClick",
+      "name": "chipClickableClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+}

package/dist/esm/bds-chip-clickable.entry.js

@@ -0,0 +1,78 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-a2cd05b6.js';
+
+const chipClickableCss = "@import url(\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap\"); :host{display:block;height:-webkit-max-content;height:-moz-max-content;height:max-content;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip_clickable{display:-ms-flexbox;display:flex;min-width:32px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:32px;border-radius:16px;padding:2px 4px;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-pack:center;justify-content:center;position:relative;z-index:0}:host .chip_clickable--hide{display:none;padding:0;border:none}:host .chip_clickable .chip_focus:focus{position:absolute;width:100%;height:100%;padding:2px;border-radius:4px;outline:#c226fb solid 2px}:host .chip_clickable--click{cursor:pointer}:host .chip_clickable--click .chip_darker{opacity:0;position:absolute;width:100%;height:100%;border-radius:inherit;z-index:1;-webkit-backdrop-filter:brightness(1);backdrop-filter:brightness(1);-webkit-box-sizing:border-box;box-sizing:border-box}:host .chip_clickable--click:hover .chip_darker{opacity:1;-webkit-backdrop-filter:brightness(0.9);backdrop-filter:brightness(0.9)}:host .chip_clickable--click:active .chip_darker{opacity:1;-webkit-backdrop-filter:brightness(0.8);backdrop-filter:brightness(0.8)}:host .chip_clickable--disabled{cursor:default;background-color:#f3f6fa}:host .chip_clickable--disabled .chip_clickable--icon{color:#505f79}:host .chip_clickable--disabled .chip_clickable--text{color:#505f79}:host .chip_clickable--disabled .chip_clickable--close{cursor:default}:host .chip_clickable--icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding-left:4px;color:#202c44;z-index:2}:host .chip_clickable--close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:20px;padding-right:4px;mix-blend-mode:hard-light;color:#202c44;opacity:0.7;z-index:2;position:relative;cursor:pointer}:host .chip_clickable--close .close_focus:focus{position:absolute;width:100%;height:100%;left:-2px;border-radius:4px;outline:#c226fb solid 2px}:host .chip_clickable--text{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:20px;margin:0 8px;z-index:2;color:#202c44;font-family:\"Nunito Sans\", \"Tahoma\", \"Helvetica\", \"Arial\", sans-serif}:host .chip_clickable--tall{height:40px;border-radius:24px}:host .chip_clickable--default{background-color:#b3d4ff}:host .chip_clickable--info{background-color:#80e3eb}:host .chip_clickable--success{background-color:#90e6bc}:host .chip_clickable--warning{background-color:#fff6a8}:host .chip_clickable--danger{background-color:#ffa5a5}:host .chip_clickable--outline{background-color:#ffffff;border:1px solid #b9cbd3}:host .chip_clickable:focus-visible{outline:none}";
+
+const ChipClickable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.chipClickableClose = createEvent(this, "chipClickableClose", 7);
+    this.chipClickableClick = createEvent(this, "chipClickableClick", 7);
+    this.visible = true;
+    /**
+     * used for change the color. Uses one of them.
+     */
+    this.color = 'default';
+    /**
+     * used for change the size chip. Uses one of them.
+     */
+    this.size = 'standard';
+    /**
+     * it makes the chip clickable.
+     */
+    this.clickable = false;
+    /**
+     * used for delete the chip.
+     */
+    this.close = false;
+    /**
+     * the chip gone stay disabled while this prop be true.
+     */
+    this.disabled = false;
+  }
+  handleClick(event) {
+    if (event.key === 'Enter' && !this.disabled) {
+      event.preventDefault();
+      this.chipClickableClick.emit();
+    }
+  }
+  handleCloseChip(event) {
+    if (event.key === 'Enter' && !this.disabled) {
+      event.preventDefault();
+      this.chipClickableClose.emit({ id: this.element.id });
+      this.visible = false;
+    }
+    else {
+      event.preventDefault();
+      this.chipClickableClose.emit({ id: this.element.id });
+      this.visible = false;
+    }
+  }
+  getSizeAvatarChip() {
+    if (this.size === 'tall') {
+      return 'extra-small';
+    }
+    else
+      return 'micro';
+  }
+  getSizeIconChip() {
+    if (this.size === 'tall') {
+      return 'medium';
+    }
+    else
+      return 'x-small';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        chip_clickable: true,
+        [`chip_clickable--${this.color}`]: true && !this.disabled,
+        [`chip_clickable--${this.size}`]: true,
+        'chip_clickable--hide': !this.visible,
+        'chip_clickable--click': this.clickable,
+        'chip_clickable--disabled': this.disabled,
+      }, onClick: this.handleClick.bind(this) }, this.clickable && !this.disabled && (h("div", { class: "chip_focus", onKeyDown: this.handleClick.bind(this), tabindex: "0" })), this.clickable && !this.disabled && h("div", { class: "chip_darker" }), this.icon && !this.avatar && (h("div", { class: "chip_clickable--icon" }, h("bds-icon", { size: this.getSizeIconChip(), name: this.icon }))), this.avatar && (h("div", { class: "chip_clickable--avatar" }, h("bds-avatar", { size: this.getSizeAvatarChip(), thumbnail: this.avatar }))), h("bds-typo", { class: "chip_clickable--text", variant: "fs-12", bold: "bold" }, h("slot", null)), this.close && (h("div", { class: "chip_clickable--close", onClick: this.handleCloseChip.bind(this) }, !this.disabled && (h("div", { class: "close_focus", onKeyDown: this.handleCloseChip.bind(this), tabindex: "0" })), h("bds-icon", { size: "x-small", theme: "solid", name: "error" }))))));
+  }
+  get element() { return getElement(this); }
+};
+ChipClickable.style = chipClickableCss;
+
+export { ChipClickable as bds_chip_clickable };