bromcom-ui 2.3.46 → 2.3.50

package/dist/cjs/{bcm-badge_18.cjs.entry.js → bcm-badge_20.cjs.entry.js}

@@ -224,7 +224,7 @@ const iconSizes = {
   },
 };
 
-const buttonsCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block}:host(.hidden){display:none}:host(.full-width){width:100%}.button{border:none;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-family:\"Roboto\", sans-serif;padding:unset;text-decoration:none;box-sizing:border-box;border-radius:2px;position:relative;margin:0;padding:0}.button.full-width{width:100%}.button.full-width.variant span{flex:none}.button .loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.button.rounded{border-radius:100%}.button.rounded .loading{border-radius:100%}.button:before,.button:after{content:\"\"}.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border:1px solid var(--bcm-color-prime-blue-6)}.solid .loading{background-color:var(--bcm-color-prime-blue-6)}.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.solid.outline:hover,.solid.outline:focus{color:var(--bcm-color-prime-blue-5);background-color:var(--bcm-color-grey-1)}.solid.outline:active{color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}.solid:hover,.solid:focus{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.solid:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.ghost{color:var(--bcm-color-prime-blue-6);background-color:transparent;border:1px solid var(--bcm-color-prime-blue-6)}.ghost .loading{background-color:var(--bcm-color-grey-1)}.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.ghost:hover,.ghost:focus{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.ghost:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.large bcm-icon.prefix{margin-right:4px}.variant span{flex:1}.variant.success.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-bc-green-5);border:1px solid var(--bcm-color-bc-green-5)}.variant.success.solid .loading{background-color:var(--bcm-color-bc-green-5)}.variant.success.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.variant.success.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.variant.success.solid.outline:hover,.variant.success.solid.outline:focus{color:var(--bcm-color-bc-green-4);background-color:var(--bcm-color-grey-1)}.variant.success.solid.outline:active{color:var(--bcm-color-bc-green-6);background-color:var(--bcm-color-grey-1)}.variant.success.solid:hover,.variant.success.solid:focus{background-color:var(--bcm-color-bc-green-4);border-color:var(--bcm-color-bc-green-4)}.variant.success.solid:active{background-color:var(--bcm-color-bc-green-6);border-color:var(--bcm-color-bc-green-6)}.variant.success.solid:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.success.ghost{color:var(--bcm-color-bc-green-5);background-color:transparent;border:1px solid var(--bcm-color-bc-green-5)}.variant.success.ghost .loading{background-color:var(--bcm-color-grey-1)}.variant.success.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.variant.success.ghost:hover,.variant.success.ghost:focus{color:var(--bcm-color-bc-green-4);border-color:var(--bcm-color-bc-green-4)}.variant.success.ghost:active{color:var(--bcm-color-bc-green-6);border-color:var(--bcm-color-bc-green-6)}.variant.success.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.warning.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-bc-red-5);border:1px solid var(--bcm-color-bc-red-5)}.variant.warning.solid .loading{background-color:var(--bcm-color-bc-red-5)}.variant.warning.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.variant.warning.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.variant.warning.solid.outline:hover,.variant.warning.solid.outline:focus{color:var(--bcm-color-bc-red-4);background-color:var(--bcm-color-grey-1)}.variant.warning.solid.outline:active{color:var(--bcm-color-bc-red-6);background-color:var(--bcm-color-grey-1)}.variant.warning.solid:hover,.variant.warning.solid:focus{background-color:var(--bcm-color-bc-red-4);border-color:var(--bcm-color-bc-red-4)}.variant.warning.solid:active{background-color:var(--bcm-color-bc-red-6);border-color:var(--bcm-color-bc-red-6)}.variant.warning.solid:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.warning.ghost{color:var(--bcm-color-bc-red-5);background-color:transparent;border:1px solid var(--bcm-color-bc-red-5)}.variant.warning.ghost .loading{background-color:var(--bcm-color-grey-1)}.variant.warning.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.variant.warning.ghost:hover,.variant.warning.ghost:focus{color:var(--bcm-color-bc-red-4);border-color:var(--bcm-color-bc-red-4)}.variant.warning.ghost:active{color:var(--bcm-color-bc-red-6);border-color:var(--bcm-color-bc-red-6)}.variant.warning.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.button>bcm-icon.prefix{margin-right:4px}.button>bcm-icon.suffix{margin-left:4px}.large{min-height:40px;min-width:120px}.large bcm-icon.prefix{margin-right:16px}.large bcm-icon.suffix{margin-left:16px}.large:not(.rounded){padding:0 16px}.large:not(.rounded).with_suffix{padding-right:0}.medium{min-height:32px;min-width:32px}.medium:not(.rounded){padding:0 16px}.medium:not(.rounded).with_suffix{padding-right:0}.small{min-height:24px;min-width:24px}.small:not(.rounded){padding:0 8px}.small:not(.rounded).with_suffix{padding-right:0}.ghost-link{width:auto;min-width:40px;color:var(--bcm-color-prime-blue-6);background-color:transparent}.ghost-link .loading{background-color:var(--bcm-color-grey-1)}.ghost-link.outline{color:var(--bcm-color-grey-1)}.ghost-link:hover,.ghost-link:focus{color:var(--bcm-color-prime-blue-5)}.ghost-link:active{color:var(--bcm-color-prime-blue-7)}.ghost-link:disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.ghost-link.large bcm-icon.prefix{margin-right:8px}.ghost-link.large:not(.rounded){padding-left:8px}.ghost-link.large:not(.rounded):not(.with_suffix){padding-right:5px}.ghost-link.rounded{border-radius:2px}.solid-link,.link{width:auto;min-width:40px;color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6)}.solid-link .loading,.link .loading{background-color:var(--bcm-color-prime-blue-6)}.solid-link.outline,.link.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1)}.solid-link.outline .loading,.link.outline .loading{background-color:var(--bcm-color-grey-1)}.solid-link.outline:hover,.solid-link.outline:focus,.link.outline:hover,.link.outline:focus{color:var(--bcm-color-prime-blue-5)}.solid-link.outline:active,.link.outline:active{color:var(--bcm-color-prime-blue-7)}.solid-link:hover,.solid-link:focus,.link:hover,.link:focus{background-color:var(--bcm-color-prime-blue-5)}.solid-link:active,.link:active{background-color:var(--bcm-color-prime-blue-7)}.solid-link:disabled,.link:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;cursor:not-allowed}.solid-link.large bcm-icon.prefix,.link.large bcm-icon.prefix{margin-right:8px}.solid-link.large:not(.rounded),.link.large:not(.rounded){padding-left:8px}.solid-link.large:not(.rounded):not(.with_suffix),.link.large:not(.rounded):not(.with_suffix){padding-right:5px}.solid-link.rounded,.link.rounded{border-radius:2px}:host-context(.split_summary.open) .solid{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}:host-context(.split_summary.open) .solid.outline{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}:host-context(.split_summary) .large:not(.rounded) bcm-icon.prefix{margin-right:4px}:host-context(.split_summary) .large:not(.rounded) bcm-icon.suffix{margin-left:4px}";
+const buttonsCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:fit-content}:host(.hidden){display:none}:host(.full-width){width:100%}.button{border:none;outline:0;cursor:pointer;display:flex;align-items:center;justify-content:center;text-align:center;font-family:\"Roboto\", sans-serif;padding:unset;text-decoration:none;box-sizing:border-box;border-radius:2px;position:relative;margin:0;padding:0}.button.full-width{width:100%}.button.full-width.variant span{flex:none}.button .loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.button.rounded{border-radius:100%}.button.rounded .loading{border-radius:100%}.button:before,.button:after{content:\"\"}.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border:1px solid var(--bcm-color-prime-blue-6)}.solid .loading{background-color:var(--bcm-color-prime-blue-6)}.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.solid.outline:hover,.solid.outline:focus{color:var(--bcm-color-prime-blue-5);background-color:var(--bcm-color-grey-1)}.solid.outline:active{color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}.solid:hover,.solid:focus{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.solid:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.ghost{color:var(--bcm-color-prime-blue-6);background-color:transparent;border:1px solid var(--bcm-color-prime-blue-6)}.ghost .loading{background-color:var(--bcm-color-grey-1)}.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.ghost:hover,.ghost:focus{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.ghost:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.large bcm-icon.prefix{margin-right:4px}.variant span{flex:1}.variant.success.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-bc-green-5);border:1px solid var(--bcm-color-bc-green-5)}.variant.success.solid .loading{background-color:var(--bcm-color-bc-green-5)}.variant.success.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.variant.success.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.variant.success.solid.outline:hover,.variant.success.solid.outline:focus{color:var(--bcm-color-bc-green-4);background-color:var(--bcm-color-grey-1)}.variant.success.solid.outline:active{color:var(--bcm-color-bc-green-6);background-color:var(--bcm-color-grey-1)}.variant.success.solid:hover,.variant.success.solid:focus{background-color:var(--bcm-color-bc-green-4);border-color:var(--bcm-color-bc-green-4)}.variant.success.solid:active{background-color:var(--bcm-color-bc-green-6);border-color:var(--bcm-color-bc-green-6)}.variant.success.solid:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.success.ghost{color:var(--bcm-color-bc-green-5);background-color:transparent;border:1px solid var(--bcm-color-bc-green-5)}.variant.success.ghost .loading{background-color:var(--bcm-color-grey-1)}.variant.success.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.variant.success.ghost:hover,.variant.success.ghost:focus{color:var(--bcm-color-bc-green-4);border-color:var(--bcm-color-bc-green-4)}.variant.success.ghost:active{color:var(--bcm-color-bc-green-6);border-color:var(--bcm-color-bc-green-6)}.variant.success.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.warning.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-bc-red-5);border:1px solid var(--bcm-color-bc-red-5)}.variant.warning.solid .loading{background-color:var(--bcm-color-bc-red-5)}.variant.warning.solid.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.variant.warning.solid.outline .loading{background-color:var(--bcm-color-grey-1)}.variant.warning.solid.outline:hover,.variant.warning.solid.outline:focus{color:var(--bcm-color-bc-red-4);background-color:var(--bcm-color-grey-1)}.variant.warning.solid.outline:active{color:var(--bcm-color-bc-red-6);background-color:var(--bcm-color-grey-1)}.variant.warning.solid:hover,.variant.warning.solid:focus{background-color:var(--bcm-color-bc-red-4);border-color:var(--bcm-color-bc-red-4)}.variant.warning.solid:active{background-color:var(--bcm-color-bc-red-6);border-color:var(--bcm-color-bc-red-6)}.variant.warning.solid:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;border-color:var(--bcm-color-grey-5);cursor:not-allowed}.variant.warning.ghost{color:var(--bcm-color-bc-red-5);background-color:transparent;border:1px solid var(--bcm-color-bc-red-5)}.variant.warning.ghost .loading{background-color:var(--bcm-color-grey-1)}.variant.warning.ghost.outline{color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-1)}.variant.warning.ghost:hover,.variant.warning.ghost:focus{color:var(--bcm-color-bc-red-4);border-color:var(--bcm-color-bc-red-4)}.variant.warning.ghost:active{color:var(--bcm-color-bc-red-6);border-color:var(--bcm-color-bc-red-6)}.variant.warning.ghost:disabled{color:var(--bcm-color-grey-6);border-color:var(--bcm-color-grey-5);cursor:not-allowed}.button>bcm-icon.prefix{margin-right:4px}.button>bcm-icon.suffix{margin-left:4px}.large{min-height:40px;min-width:120px}.large bcm-icon.prefix{margin-right:16px}.large bcm-icon.suffix{margin-left:16px}.large:not(.rounded){padding:0 16px}.large:not(.rounded).with_suffix{padding-right:0}.medium{min-height:32px;min-width:32px}.medium:not(.rounded){padding:0 16px}.medium:not(.rounded).with_suffix{padding-right:0}.small{min-height:24px;min-width:24px}.small:not(.rounded){padding:0 8px}.small:not(.rounded).with_suffix{padding-right:0}.ghost-link{width:auto;min-width:40px;color:var(--bcm-color-prime-blue-6);background-color:transparent}.ghost-link .loading{background-color:var(--bcm-color-grey-1)}.ghost-link.outline{color:var(--bcm-color-grey-1)}.ghost-link:hover,.ghost-link:focus{color:var(--bcm-color-prime-blue-5)}.ghost-link:active{color:var(--bcm-color-prime-blue-7)}.ghost-link:disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.ghost-link.large bcm-icon.prefix{margin-right:8px}.ghost-link.large:not(.rounded){padding-left:8px}.ghost-link.large:not(.rounded):not(.with_suffix){padding-right:5px}.ghost-link.rounded{border-radius:2px}.solid-link,.link{width:auto;min-width:40px;color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6)}.solid-link .loading,.link .loading{background-color:var(--bcm-color-prime-blue-6)}.solid-link.outline,.link.outline{color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1)}.solid-link.outline .loading,.link.outline .loading{background-color:var(--bcm-color-grey-1)}.solid-link.outline:hover,.solid-link.outline:focus,.link.outline:hover,.link.outline:focus{color:var(--bcm-color-prime-blue-5)}.solid-link.outline:active,.link.outline:active{color:var(--bcm-color-prime-blue-7)}.solid-link:hover,.solid-link:focus,.link:hover,.link:focus{background-color:var(--bcm-color-prime-blue-5)}.solid-link:active,.link:active{background-color:var(--bcm-color-prime-blue-7)}.solid-link:disabled,.link:disabled{color:var(--bcm-color-grey-6) !important;background-color:var(--bcm-color-grey-3) !important;cursor:not-allowed}.solid-link.large bcm-icon.prefix,.link.large bcm-icon.prefix{margin-right:8px}.solid-link.large:not(.rounded),.link.large:not(.rounded){padding-left:8px}.solid-link.large:not(.rounded):not(.with_suffix),.link.large:not(.rounded):not(.with_suffix){padding-right:5px}.solid-link.rounded,.link.rounded{border-radius:2px}:host-context(.split_summary.open) .solid{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}:host-context(.split_summary.open) .solid.outline{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-grey-1)}:host-context(.split_summary) .large:not(.rounded) bcm-icon.prefix{margin-right:4px}:host-context(.split_summary) .large:not(.rounded) bcm-icon.suffix{margin-left:4px}";
 
 const BcmButton = class {
   constructor(hostRef) {
@@ -414,6 +414,7 @@ const BcmForm = class {
         TIME_PICKER: 'time-picker',
         DATETIME_PICKER: 'datetime-picker',
         COLORPICKER: 'colorpicker',
+        LIST: 'list',
         SWITCH: 'switch',
         LISTBOX: 'listbox'
       },
@@ -6439,7 +6440,7 @@ const BcmInput = class {
 };
 BcmInput.style = inputCss;
 
-const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block;position:relative;width:256px;height:256px;background-color:#ffffff;border:1px solid #d9d9d9;box-sizing:border-box;transition:height 1s ease 1s;display:flex;flex-direction:column;position:relative;user-select:none;opacity:0}:host(.full-width){width:100%}:host(.linked){z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.linked.show){opacity:1;z-index:100000}:host(.flex){width:100%;height:100%}.search-container{margin:0 8px;padding-top:8px;background-color:#ffffff}.search-container+.list-container{padding-top:0}.footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.list-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;grid-gap:4px;position:relative}.list-container .list{display:flex;flex-direction:column;grid-gap:4px}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.9}.spinner.first-run{visibility:visible;opacity:1}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.divider{margin:0 8px}";
+const listCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block;position:relative;user-select:none;width:256px}:host main{width:256px;height:256px;background-color:#ffffff;border:1px solid #d9d9d9;box-sizing:border-box;transition:height 1s ease 1s;display:flex;flex-direction:column;position:relative;padding:8px}:host(.full-width){width:100%}:host(.full-width) main{width:100%}:host(.linked){z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.linked.show){opacity:1;z-index:100000}:host(.flex){width:100%;height:100%}:host(.flex) main{width:100%}:host(.type-autocomplete) .search-container{height:0;margin:0;padding:0;overflow:hidden}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}:host(.error) .label{color:var(--bcm-color-red-6) !important}:host(.error) main{border:1px solid var(--bcm-color-red-6) !important}.search-container{margin:0 8px;padding-top:8px;background-color:#ffffff}.search-container+.list-container{padding-top:0}.footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.list-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;grid-gap:4px;position:relative}.list-container .list{display:flex;flex-direction:column;grid-gap:4px}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.8}.spinner.first-run{visibility:visible;opacity:0.9}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.divider{margin:0 8px}";
 
 const lowercase$2 = (str) => str.toLowerCase();
 const BcmList = class {
@@ -6447,14 +6448,15 @@ const BcmList = class {
     index.registerInstance(this, hostRef);
     this.listSelected = index.createEvent(this, "bcm-list-selected", 7);
     this.listChecked = index.createEvent(this, "bcm-list-checklist", 7);
+    this.change = index.createEvent(this, "bcm-change", 7);
     this.configObject = [];
-    this.searchData = null;
     this.isRendered = false;
     this.firstRender = true;
     this.linkedElementWidth = "100%";
     this.bodyStyleOverflow = '';
     this.dataLength = 0;
     this.checklist = [];
+    this.otherList = [];
     this.configured = false;
     this.checkStatus = false;
     this.resetSelected = false;
@@ -6471,6 +6473,7 @@ const BcmList = class {
     this._list_select_id = null;
     this._list_id = null;
     this.type = 'default';
+    this.processType = 'default';
     this.hidden = false;
     this.items = [];
     this.isShow = true;
@@ -6483,16 +6486,19 @@ const BcmList = class {
     this.width = "100%";
     this.minWidth = null;
     this.maxWidth = null;
+    this.fullWidth = false;
+    this.size = 'medium';
     this.infoFooter = false;
-    this.highlight = false;
     this.searchable = false;
+    this.highlight = false;
     this.searchPlaceholder = "Search";
     this.searchFields = ['text'];
     this.returnField = "id";
+    this.searchData = null;
+    this.searchSub = "items";
+    this.searchText = "";
     this.value = null;
     this.multiSelect = false;
-    this.fullWidth = false;
-    this.size = 'medium';
     /******/
     this.clearable = false;
     this.label = null;
@@ -6506,9 +6512,11 @@ const BcmList = class {
     this.required = false;
   }
   connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
     this.bodyStyleOverflow = document.querySelector("body").style.overflow;
-    const elementId = "bcm-list-select-" + this._internal_id;
-    if (this.type === 'select') {
+    const elementId = "bcm-list-select-" + this._id;
+    if (this.type === 'select' || this.type === 'autocomplete') {
       this.selectIsInitialize();
       this.linkedComponent = elementId;
     }
@@ -6528,17 +6536,23 @@ const BcmList = class {
   }
   disconnectedCallback() { }
   componentWillLoad() { }
-  componentDidLoad() {
-    setTimeout(() => {
-      const spinner = this.el.shadowRoot.querySelector('.spinner');
-      spinner.classList.remove("first-run");
-    }, 500);
-  }
+  componentDidLoad() { }
   componentWillRender() { }
   componentDidRender() {
+    const elementId = "bcm-list-select-" + this._id;
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      this.selectIsInitialize();
+      this.linkedComponent = elementId;
+    }
     if (sessionStorage.getItem(this._internal_id + "-config")) {
       this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
     }
+    setTimeout(() => {
+      const spinner = this.el.shadowRoot.querySelector('.spinner');
+      if (spinner) {
+        spinner.classList.remove("first-run");
+      }
+    }, 500);
   }
   componentWillUpdate() { }
   componentDidUpdate() { }
@@ -6549,10 +6563,34 @@ const BcmList = class {
     this.isShow = false;
     document.querySelector("body").style.overflow = this.bodyStyleOverflow;
   }
+  async setSearch(text) {
+    const searchInput = this.el.shadowRoot.querySelector("bcm-search");
+    if (searchInput) {
+      searchInput.setValue(text);
+      // searchInput.select()
+    }
+  }
+  async clearAndSelectSearch(select = true) {
+    if (this.searchable == true) {
+      // var searchInput = null
+      const searchInput = this.el.shadowRoot.querySelector("bcm-search");
+      if (searchInput) {
+        searchInput.setClear();
+        if (select == true) {
+          searchInput.select();
+        }
+      }
+    }
+  }
   /**
    * @desc
    */
   async show() {
+    if (this.processType == 'deselect') {
+      this.firstRender = true;
+      this.isRendered = false;
+      this.setData(this.otherList);
+    }
     this.isShow = true;
     if (this.items && this.isRendered === false) {
       this.isRendered = true;
@@ -6568,10 +6606,56 @@ const BcmList = class {
   async toggle() {
     this.isShow = !this.isShow;
   }
+  /**
+   * @desc
+   */
+  async openStatus() {
+    return this.isShow;
+  }
+  /**
+   * @desc
+   */
+  handleOpen(value) {
+    if (this.processType === "deselect") {
+      const listSelect = document.getElementById(this._list_select_id);
+      if (listSelect) {
+        const otherTag = listSelect.shadowRoot.querySelector("#other-tag");
+        if (otherTag) {
+          if (value === true) {
+            otherTag.setAttribute("color", "prime-blue");
+          }
+          else {
+            otherTag.removeAttribute("color");
+          }
+        }
+      }
+    }
+  }
+  /**
+   * @desc
+   */
+  handleChange(newValue) {
+    this.change.emit(newValue);
+  }
   /**
    * @desc
    */
   async config(_config) {
+    if (_config['type']) {
+      this.type = _config['type'];
+    }
+    if (_config['searchPlaceholder']) {
+      this.searchPlaceholder = _config['searchPlaceholder'];
+    }
+    if (_config['searchFields']) {
+      this.searchFields = _config['searchFields'];
+    }
+    if (_config['returnField']) {
+      this.returnField = _config['returnField'];
+    }
+    if (_config['highlight']) {
+      this.highlight = _config['highlight'];
+    }
     if (_config['linkedComponent'] && typeof _config['linkedComponent'] == 'string') {
       this.linkedComponent = _config['linkedComponent'];
     }
@@ -6597,6 +6681,12 @@ const BcmList = class {
     this.configObject = _config;
     return _config;
   }
+  /**
+   * @desc
+   */
+  async setDataOther(_data = []) {
+    this.otherList = _data;
+  }
   /**
    * @desc
    */
@@ -6605,12 +6695,26 @@ const BcmList = class {
       typeof _data == 'string'
         ? this.items = JSON.parse(_data)
         : this.items = _data;
-      if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
-        var selectedIDs = [];
-        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-          selectedIDs.push(element[this.objectMapping['id']]);
-        });
-        this.checked(selectedIDs);
+      if (this.items) {
+        switch (this.processType) {
+          case 'default':
+            if (this.items.find(e => e[this.objectMapping['selected']])) {
+              var selectedIDs = [];
+              this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+                selectedIDs.push(element[this.objectMapping['id']]);
+              });
+              this.checked(selectedIDs);
+            }
+            break;
+          case 'deselect':
+            var selectedIDs = [];
+            this.items.forEach(element => {
+              // element[ this.objectMapping['selected'] ] = true;
+              selectedIDs.push(element[this.objectMapping['id']]);
+            });
+            this.checked(selectedIDs);
+            break;
+        }
       }
       this.calculatedTotals({ "total": this.items.length });
       if (this.multiSelect === true) {
@@ -6638,48 +6742,159 @@ const BcmList = class {
   /**
    * @desc
    */
-  async checked(checkedItems) {
-    if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
-      this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
-        element[this.objectMapping['selected']] = false;
-      });
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  /**
+   * @desc
+   */
+  async toggleChecked(checkedItems = null) {
+    if (checkedItems !== null) {
+      var checkStatus = false;
+      if (typeof checkedItems == 'string') {
+        checkStatus = this.items.find(e => e[this.objectMapping['id']] == checkedItems)[this.objectMapping['selected']];
+      }
+      else {
+        let state = 'uncheck';
+        let allChecked = true;
+        let allUnchecked = true;
+        checkedItems.forEach((item) => {
+          if (String(this.items.find(e => e[this.objectMapping['id']] == item)[this.objectMapping['selected']]) === 'true') {
+            allUnchecked = false;
+          }
+          else {
+            allChecked = false;
+          }
+        });
+        !allChecked && !allUnchecked
+          ? state = 'determinate'
+          : allChecked
+            ? state = 'determinate'
+            : state = 'uncheck';
+        checkStatus = state == 'determinate' ? false : true;
+      }
+      // let state: string = 'uncheck'
+      // let allChecked: boolean = true
+      // let allUnchecked: boolean = true
+      // checkedItems.map((item) => {
+      //     item[ this.objectMapping['selected'] ] === true && (allUnchecked = false)
+      //     !item[ this.objectMapping['selected'] ] === true && (allChecked = false)
+      // });
+      // !allChecked && !allUnchecked 
+      // ? state = 'determinate'
+      // : allChecked
+      // ? state = 'determinate'
+      // : state = 'uncheck'
+      // const checkStatus = state == 'determinate' ? true : false
+      // const checkStatus = this.items.find( e => e[ this.objectMapping['id'] ] == checkedItems )[ this.objectMapping['selected'] ]
+      if (checkStatus === true) {
+        this.unChecked(checkedItems);
+      }
+      else {
+        // this.checked(checkedItems, false)
+        var selectedIDs = [];
+        // var checkItem = null
+        if (typeof checkedItems == 'string') {
+          // checkItem = this.sendSelectId( String(checkedItems), true)
+          selectedIDs.push(checkedItems);
+        }
+        else {
+          checkedItems.forEach((item) => {
+            selectedIDs.push(item);
+            // String(item[ this.objectMapping['selected'] ]) === 'true' && (allUnchecked = false),
+            // String(item[ this.objectMapping['selected'] ]) !== 'true' && (allChecked = false)
+          });
+          // this.sendSelectId( String(checkedItems), true)
+          // var selectedIDs = []
+          // if( this.items && this.items.find( e => e[ this.objectMapping['selected'] ] ) ){
+          //     this.items.filter( e => String( e[ this.objectMapping['selected'] ] ) === "true" ).forEach(element => {
+          //         selectedIDs.push( element )
+          //     });
+          // }
+          // this.value = selectedIDs
+          // this.listChecked.emit( this.value )
+          // this.handleIndeterminateStatus()
+          // this.sendSelectValue()
+        }
+        this.checked(selectedIDs, false);
+      }
     }
-    var selectedIDs = [];
-    this.setClear(false);
-    var checkItem = null;
-    if (typeof checkedItems == 'string') {
-      if (this.sendSelectId(String(checkedItems)) !== false) {
-        checkItem = this.sendSelectId(String(checkedItems));
-        selectedIDs.push(checkItem);
+  }
+  /**
+   * @desc
+   */
+  async unChecked(checkedItems = null) {
+    if (checkedItems !== null) {
+      var selectedIDs = [];
+      this.selectedId = null;
+      if (typeof checkedItems == 'string') {
+        this.sendSelectId(String(checkedItems), false);
+      }
+      else {
+        checkedItems.forEach(item => {
+          this.sendSelectId(String(item), false);
+        });
       }
+      if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
+        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+          selectedIDs.push(element);
+        });
+      }
+      this.value = selectedIDs;
+      this.listChecked.emit(this.value);
+      this.handleIndeterminateStatus();
+      this.sendSelectValue();
     }
-    else {
-      checkedItems.forEach(item => {
-        if (this.sendSelectId(String(item)) !== false) {
-          checkItem = this.sendSelectId(String(item));
-          selectedIDs.push(checkItem);
+  }
+  /**
+   * @desc
+   */
+  async checked(checkedItems = null, reset = true) {
+    if (checkedItems !== null) {
+      var selectedIDs = [];
+      if (reset === true) {
+        if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
+          this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+            element[this.objectMapping['selected']] = false;
+          });
         }
-      });
-    }
-    if (this.multiSelect === false) {
-      this.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems));
+        this.setClear(false);
+      }
+      if (typeof checkedItems == 'string') {
+        this.sendSelectId(String(checkedItems));
+        if (this.multiSelect === false) {
+          this.selectedId = this.items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems));
+        }
+      }
+      else {
+        if (this.multiSelect === true) {
+          checkedItems.forEach(item => {
+            this.sendSelectId(String(item));
+          });
+        }
+      }
+      // if ( this.multiSelect === false ){
+      //     this.selectedId = this.items.find( e => String(e[ this.objectMapping['id'] ]) === String(checkedItems) )
+      // }
+      if (this.items && this.items.find(e => e[this.objectMapping['selected']])) {
+        this.items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+          selectedIDs.push(element);
+        });
+      }
+      this.value = selectedIDs;
+      this.listChecked.emit(this.value);
+      this.handleIndeterminateStatus();
+      this.sendSelectValue();
     }
-    this.value = selectedIDs;
-    this.listChecked.emit(this.value);
-    this.handleIndeterminateStatus();
-    this.sendSelectValue();
   }
   /**
    * @desc
    */
   async setClear(eventEmit = true) {
     if (this.items != undefined && this.items.length > 0) {
-      this.el.shadowRoot.querySelectorAll("bcm-list-item").forEach(item => {
-        if (item.shadowRoot.querySelector("bcm-checkbox-lite")) {
-          item.shadowRoot.querySelector("bcm-checkbox-lite")["checked"] = false;
-        }
-        item.classList.remove("selected");
-      });
+      this.unChecked(this.items.map(item => { return item[this.objectMapping["id"]]; }));
     }
     this.selectedId = null;
     this.checklist = [];
@@ -6695,21 +6910,25 @@ const BcmList = class {
    */
   async processData(_data) {
     this.handleLoading(true);
+    await utils.delay(100);
     const list = this.el.shadowRoot.querySelector('.list');
     list.innerHTML = "";
     this.selectedId = null;
     this.value = null;
     const elementStatuses = [];
+    var checkedItems = [];
     if (_data.length > 0) {
       this.dataLength = _data.length;
       this.searchData = _data;
+      await utils.delay(100);
       _data.map(item => {
         const element = document.createElement("bcm-list-item");
         element.setAttribute("_internal_id", this._internal_id);
         element.setAttribute("text", item[this.objectMapping['text']]);
         element.setAttribute("id", String(item[this.objectMapping['id']]));
         if (item[this.objectMapping['selected']]) {
-          element.select();
+          // element.select()
+          checkedItems.push(String(item[this.objectMapping['id']]));
         }
         // element.setAttribute("item-object", JSON.stringify(item))
         var object = item;
@@ -6720,6 +6939,13 @@ const BcmList = class {
       });
       const allStatuses = await Promise.all(elementStatuses);
       if (allStatuses) {
+        if (checkedItems != []) {
+          checkedItems.forEach(item => {
+            // if ( this.sendSelectId( String(item) ) !== false ){
+            this.sendSelectId(String(item));
+            // }
+          });
+        }
         this.handleLoading(false);
         this.firstRender = false;
       }
@@ -6751,22 +6977,33 @@ const BcmList = class {
    * @desc
    */
   handleClick(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
     if (!this.el.contains(event.target)
-      || (event["path"]
-        && event["path"].filter((input) => input['_internal_id'] == this._internal_id)[0]
-        && event["path"].filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
+      || (path
+        && path.filter((input) => input['_internal_id'] == this._internal_id)[0]
+        && path.filter((input) => input['nodeName'] == "BCM-LIST-ITEM")[0]
         && this.multiSelect === false)) {
       if (this.isShow === true) {
         this.hide();
       }
     }
   }
+  /**
+   * @desc
+   */
+  wheelEvent(event) {
+    if (!this.el.contains(event.target)) {
+      if (this.isShow === true) {
+        this.hide();
+      }
+    }
+  }
   /**
    * @desc
    */
   scrollEvent(event) {
     if (!this.el.contains(event.target)) {
-      if (this.isShow) {
+      if (this.isShow === true) {
         this.hide();
       }
     }
@@ -6796,27 +7033,28 @@ const BcmList = class {
    * @descc
    
    */
-  listenSearchResult(e) {
-    if (e.isEvent == undefined) {
-      if (e["path"] && e["path"].filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
+  listenSearchResult(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (event.isEvent == undefined) {
+      if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0] != undefined) {
         // var childs: any[] = getChilds(this.el, 'bcm-list-item')
         var childs = this.el.shadowRoot.querySelectorAll("bcm-list-item");
         childs.forEach(element => {
           element.classList.add("hidden");
         });
-        if (e.detail.length > 0) {
-          if (e.detail[0] == -1) {
+        if (event.detail.length > 0) {
+          if (event.detail[0] == -1) {
             this.totalSearch = 0;
             this.empty = true;
           }
           else {
-            this.totalSearch = e.detail.length;
+            this.totalSearch = event.detail.length;
             this.empty = false;
             if (this.dataLength > 0) {
               childs.forEach(element => {
                 if (this.highlight) {
-                  e.target.addEventListener('bcm-on-search-value', async (e) => {
-                    var searchValue = await e.detail;
+                  event.target.addEventListener('bcm-on-search-value', async (event) => {
+                    var searchValue = await event.detail;
                     var inputText = element.shadowRoot.getElementById("text");
                     inputText = inputText.textContent || inputText.innerText || "";
                     if (searchValue) {
@@ -6830,14 +7068,14 @@ const BcmList = class {
                     element.shadowRoot.getElementById("text").innerHTML = inputText;
                   });
                 }
-                if (e.detail.indexOf(element.id) >= 0) {
+                if (event.detail.indexOf(element._id) >= 0) {
                   element.classList.remove("hidden");
                 }
               });
             }
           }
         }
-        else if (e.detail === true) {
+        else if (event.detail === true) {
           this.totalSearch = this.dataLength;
           this.empty = false;
           childs.forEach(element => {
@@ -6852,25 +7090,30 @@ const BcmList = class {
    * @descc
    
    */
-  sendSelectId(id) {
-    // console.log(this.items.find( e => e[ this.objectMapping['id'] ] == id ))
+  sendSelectId(id, status = true) {
     if (this.items && this.items.find(e => e[this.objectMapping['id']] == id)) {
       if (this.isRendered === false) {
-        this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = true;
+        this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
+        this.handleChecklist(this.items.find(e => e[this.objectMapping['id']] == id), status);
         return this.items.find(e => e[this.objectMapping['id']] == id);
       }
       else {
         var selectedItem = null;
         if (selectedItem = this.el.shadowRoot.getElementById(id)) {
-          selectedItem.classList.add("selected");
+          if (status === true) {
+            selectedItem.classList.add("selected");
+          }
+          else {
+            selectedItem.classList.remove("selected");
+          }
           if (this.multiSelect === true) {
-            this.handleChecklist(selectedItem["itemObject"], true);
+            this.handleChecklist(selectedItem["itemObject"], status);
             // selectedItem.classList.toggle("selected")
-            if (selectedItem.shadowRoot.querySelector("bcm-checkbox-lite")) {
-              selectedItem.shadowRoot.querySelector("bcm-checkbox-lite")["checked"] = true;
+            if (selectedItem.shadowRoot.querySelector(".checkbox")) {
+              selectedItem.shadowRoot.querySelector(".checkbox").querySelector("input").checked = status;
             }
           }
-          this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = true;
+          this.items.find(e => e[this.objectMapping['id']] == id)[this.objectMapping['selected']] = status;
           return this.items.find(e => e[this.objectMapping['id']] == id);
         }
       }
@@ -6881,44 +7124,50 @@ const BcmList = class {
    * @descc
    */
   jsonDataProcess(id, status) {
-    this.items.find(e => String(e[this.objectMapping['id']]) == String(id))[this.objectMapping['selected']] = status;
+    // console.log(id)
+    var item = this.items.find(e => String(e[this.objectMapping['id']]) == String(id));
+    if (item) {
+      item[this.objectMapping['selected']] = status;
+    }
   }
   /**
    * @descc
    */
   handleListSelected(event) {
-    // console.log(event)
+    var path = event.path || (event.composedPath && event.composedPath());
+    // console.log(path);
     if (this.isInternal(event) || (!this.isInternal(event) && this.isInternalSlot(event))) {
+      var status = false;
       var selectedItem = null;
       const itemId = this.getItemId(event);
       if (this.multiSelect === false) {
-        if (selectedItem = utils.getChilds(this.el, "bcm-list-item").find(x => x.id === this.selectedId)) {
+        if (selectedItem = utils.getChilds(this.el, "bcm-list-item").find(x => x._id === this.selectedId)) {
           selectedItem.classList.remove("selected");
-          this.jsonDataProcess(this.selectedId, false);
+          status = false;
           // selectedItem.selected = false
         }
       }
       selectedItem = this.el.shadowRoot.getElementById(itemId);
       if (selectedItem) {
-        this.selectedId = this.getItemId(event);
+        this.selectedId = selectedItem["id"];
         // selectedItem.selected = true
         if (this.multiSelect === true) {
           selectedItem.classList.toggle("selected");
           if (selectedItem.classList.contains("selected") === true) {
-            this.jsonDataProcess(this.selectedId, false);
+            status = false;
           }
           else {
-            this.jsonDataProcess(this.selectedId, true);
+            status = true;
           }
         }
         else {
           selectedItem.classList.add("selected");
-          this.jsonDataProcess(this.selectedId, true);
+          status = true;
         }
       }
       if (this.isInternalSlot(event)) {
-        if (selectedItem = event.path[0]) {
-          this.selectedId = event.path[0].id;
+        if (selectedItem = path[0]) {
+          this.selectedId = path[0].id;
           this.value = event.detail;
           return true;
         }
@@ -6926,16 +7175,28 @@ const BcmList = class {
       if (this.multiSelect === true) {
         this.handleChecklist(selectedItem["itemObject"], selectedItem.classList.contains("selected"));
         this.listChecked.emit(this.checklist);
-        if (selectedItem.shadowRoot.querySelector("bcm-checkbox-lite")) {
-          selectedItem.shadowRoot.querySelector("bcm-checkbox-lite")["checked"] = selectedItem.classList.contains("selected");
+        if (selectedItem.shadowRoot.querySelector(".checkbox")) {
+          selectedItem.shadowRoot.querySelector(".checkbox").querySelector("input").checked = selectedItem.classList.contains("selected");
         }
         this.value = this.checklist;
       }
       else {
         this.value = event.detail;
       }
+      if (this.processType === 'default') {
+        this.jsonDataProcess(this.selectedId, status);
+      }
       this.handleIndeterminateStatus();
       this.sendSelectValue();
+      if (this.processType === 'deselect') {
+        var element = document.querySelector("#" + this._list_id);
+        if (element) {
+          if (this.firstRender === false) {
+            element.toggleChecked(this.selectedId);
+          }
+          // element.unChecked(this.selectedId)
+        }
+      }
     }
   }
   /**
@@ -6960,9 +7221,9 @@ const BcmList = class {
       }
       let sorted = this.checklist.sort(function (a, b) { return a - b; });
       this.checklist = sorted;
-      if (this.firstRender === false) {
-        this.calculatedTotals({ "selected": this.checklist.length });
-      }
+      // if ( this.firstRender === false ){
+      this.calculatedTotals({ "selected": this.checklist.length });
+      // }
     }
   }
   /**
@@ -7023,32 +7284,35 @@ const BcmList = class {
    * @desc
    */
   getItemId(event) {
-    const detect = event.path
-      && event.path[0]
-      && event.path[0].attributes
-      && event.path[0].attributes['id']
-      && event.path[0].attributes['id'].value;
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['id']
+      && path[0].attributes['id'].value;
     return detect;
   }
   /**
    * @desc
    */
   isInternalSlot(event) {
-    const detect = event.path
-      && event.path[0]
-      && lowercase$2(event.path[0].tagName) === 'bcm-list-item'
-      && this.el.contains(event.path[0]);
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && lowercase$2(path[0].tagName) === 'bcm-list-item'
+      && this.el.contains(path[0]);
     return detect;
   }
   /**
    * @desc
    */
   isInternal(event) {
-    const detect = event.path
-      && event.path[0]
-      && event.path[0].attributes
-      && event.path[0].attributes['_internal_id']
-      && event.path[0].attributes['_internal_id'].value;
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['_internal_id']
+      && path[0].attributes['_internal_id'].value;
     return detect == this._internal_id;
   }
   /**
@@ -7065,7 +7329,7 @@ const BcmList = class {
    * @desc
    */
   async selectIsInitialize() {
-    const elementId = "bcm-list-select-" + this._internal_id;
+    const elementId = "bcm-list-select-" + this._id;
     var element;
     if (!document.getElementById(elementId)) {
       element = document.createElement("bcm-list-select");
@@ -7076,6 +7340,9 @@ const BcmList = class {
     element.setAttribute("id", elementId);
     element.setAttribute("_list_id", this._id);
     element.setAttribute("_internal_id", this._internal_id);
+    if (this.type) {
+      element.setAttribute("type", this.type);
+    }
     if (this.clearable) {
       element.setAttribute("clearable", this.clearable);
     }
@@ -7109,6 +7376,9 @@ const BcmList = class {
     if (this.fullWidth) {
       element.setAttribute("full-width", this.fullWidth);
     }
+    if (this.multiSelect) {
+      element.setAttribute("multiselect", this.multiSelect);
+    }
     const parentNode = this.el.parentNode;
     parentNode.insertBefore(element, this.el);
     return elementId;
@@ -7132,22 +7402,42 @@ const BcmList = class {
       this.checkStatus = false;
     }
     if (this.items != undefined && this.items.length > 0) {
-      const subItems = this.el.shadowRoot.querySelectorAll("bcm-list-item");
-      subItems.forEach(item => {
-        this.handleChecklist(item["itemObject"], this.checkStatus === true ? true : false);
-        if (item.shadowRoot.querySelector("bcm-checkbox-lite")) {
-          item.shadowRoot.querySelector("bcm-checkbox-lite")["checked"] = this.checkStatus;
-        }
-        if (this.checkStatus === true) {
-          item.classList.add("selected");
-        }
-        else {
-          item.classList.remove("selected");
-        }
+      // const subItems = this.el.shadowRoot.querySelectorAll("bcm-list-item")
+      var selectedIDs = [];
+      this.items.forEach(item => {
+        selectedIDs.push(item[this.objectMapping['id']]);
+        // this.jsonDataProcess( item[ this.objectMapping['id'] ], this.checkStatus === true ? true : false)
+        // this.handleChecklist( item, this.checkStatus === true ? true : false)
+        // var element:any = this.el.shadowRoot.getElementById( item[ this.objectMapping['id'] ] )
+        // if ( element ) {
+        //     if ( element.shadowRoot.querySelector(".checkbox") ){
+        //         element.shadowRoot.querySelector(".checkbox").querySelector("input").checked = this.checkStatus
+        //     }
+        //     if ( this.checkStatus === true ){
+        //         element.classList.add("selected")
+        //     } else {
+        //         element.classList.remove("selected")
+        //     }
+        // }
       });
-      this.listChecked.emit(this.checklist);
-      this.value = this.checklist;
-      this.sendSelectValue();
+      if (this.checkStatus === true) {
+        this.checked(selectedIDs, false);
+      }
+      else {
+        this.unChecked(selectedIDs);
+      }
+      if (this.processType === 'deselect') {
+        var element = document.querySelector("#" + this._list_id);
+        if (element) {
+          // if ( this.firstRender === false ){
+          element.toggleChecked(selectedIDs);
+          // }
+          // element.unChecked(this.selectedId)
+        }
+      }
+      // this.listChecked.emit( this.checklist )
+      // this.value = this.checklist
+      // this.sendSelectValue()
     }
     this.handleIndeterminateStatus();
   }
@@ -7155,15 +7445,14 @@ const BcmList = class {
    * @desc
    */
   sendSelectValue() {
-    if (this.type === 'select') {
-      const select = document.getElementById("bcm-list-select-" + this._internal_id);
+    if (this.type === 'select' || this.type === 'autocomplete') {
+      const select = document.getElementById("bcm-list-select-" + this._id);
       if (select) {
-        // console.log("sendSelectValue")
         if (this.multiSelect === true) {
           select.setValue(this.value, this.objectMapping["id"], this.objectMapping["text"]);
         }
         else {
-          select.setValue(this.value[this.value.length - 1][this.objectMapping["text"]]);
+          select.setValue(this.value[this.objectMapping["text"]]);
         }
       }
     }
@@ -7174,7 +7463,8 @@ const BcmList = class {
       'size-2': this.size === 'small' || this.size === 'medium',
       'size-3': this.size === 'large',
     });
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, 'type-' + this.type, {
+      'error': this.captionType == 'error' ? true : false,
       'show': this.isShow,
       'flex': this.minHeight != null || this.maxHeight != null,
       'full-width': this.fullWidth
@@ -7183,6 +7473,7 @@ const BcmList = class {
       'show': this.searchable,
     });
     const footer = index$1.classnames('footer');
+    const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + this.captionType);
     var customStyle = {
       'height': this.minHeight != null || this.maxHeight != null ? 'auto' : this.height,
       'min-height': this.minHeight != null ? this.minHeight : null,
@@ -7192,13 +7483,19 @@ const BcmList = class {
       'min-width': this.minWidth != null ? this.minWidth == "100%" || this.minWidth == "auto" ? this.linkedElementWidth : this.minWidth : null,
       'max-width': this.maxWidth != null ? this.maxWidth == "100%" || this.maxWidth == "auto" ? this.linkedElementWidth : this.maxWidth : null,
     };
-    return (index.h(index.Host, { class: hostClasses, style: customStyle }, this.searchable === true && (index.h("div", { class: searchContainer }, index.h("bcm-search", { id: "search", _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, data: this.searchData, returnField: this.returnField, searchFields: this.searchFields, clearable: true }), index.h("bcm-divider", null))), this.multiSelect === true && (index.h("div", { class: "check-container" }, index.h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) }, index.h("div", { class: "check-content" }, index.h("bcm-checkbox-lite", { id: 'check-lite-' + this._id, name: 'check-lite-' + this._id, checked: false, indeterminate: false, onClick: (e) => this.handleCheckboxClick(e) })), "Select All"), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), index.h("div", { class: classes }, index.h("slot", null), index.h("div", { class: "list" }), index.h("div", { class: "spinner first-run" }, index.h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" }))), this.infoFooter == true && (index.h("div", { class: footer }, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, index.h("span", { id: "selected-item" }), " Total ", index.h("span", { id: "in-total" }, "0"), " items found.")))));
+    return (index.h(index.Host, { class: hostClasses, style: customStyle }, (this.type === 'default' && this.processType === 'default' && this.label) && (index.h("label", { class: "label size-1" }, " ", this.label, " ", this.required && ('*'), "  ")), index.h("main", { style: customStyle }, this.searchable === true && (index.h("div", { class: searchContainer }, index.h("bcm-search", { id: "search", _internal_id: this._internal_id, searchPlaceholder: this.searchPlaceholder, data: this.searchData, returnField: this.returnField, searchFields: this.searchFields, searchValue: this.searchText, clearable: true }), index.h("bcm-divider", null))), index.h("div", { class: classes }, this.multiSelect === true && (index.h("div", { class: "check-container" }, index.h("div", { class: listItem, id: "text", onClick: (e) => this.handleIndeterminateClick(e) }, index.h("div", { class: "check-content" }, index.h("bcm-checkbox-lite", { id: 'check-lite-' + this._id, name: 'check-lite-' + this._id, checked: false, indeterminate: false, onClick: (e) => this.handleCheckboxClick(e) })), "Select All"), index.h("div", { class: "divider" }, index.h("bcm-divider", null)))), index.h("slot", null), index.h("div", { class: "list" }), index.h("div", { class: "spinner first-run" }, index.h("bcm-icon", { type: "animated", color: "prime-blue", class: "prefix", icon: "loading" }))), this.infoFooter == true && (index.h("div", { class: footer }, index.h("bcm-text", { scale: "size-1", color: "grey-8" }, index.h("span", { id: "selected-item" }), " Total ", index.h("span", { id: "in-total" }, "0"), " items found.")))), (this.type === 'default' && this.processType === 'default' && !this.noCaption) && (index.h("div", { class: "caption-area" }, this.captionType == "error"
+      ? index.h("span", { class: captionClasses }, " ", this.captionError, " ")
+      : this.caption && index.h("span", { class: captionClasses }, " ", this.caption, " ")))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "isShow": ["handleOpen"],
+    "value": ["handleChange"]
+  }; }
 };
 BcmList.style = listCss;
 
-const listItemCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host(.hidden){display:none}:host(.selected) .list-item{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item:hover:not(.disabled){color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}:host(.selected) .list-item .check{background-color:#333333}:host(.checkable) .list-item .check{display:inline-block}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;white-space:break-spaces}.list-item .check{display:none;background-color:#ededed;width:15px;height:15px}.list-item .highlight{background-color:var(--bcm-color-yellow-5)}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-grey-8);background-color:var(--bcm-color-prime-blue-1)}.list-item .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:8px;margin-bottom:2px}";
+const listItemCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host(.hidden){display:none}:host(.selected) .list-item{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item:hover:not(.disabled){color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}:host(.selected) .list-item .check{background-color:#333333}:host(.checkable) .list-item .check{display:inline-block}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;white-space:break-spaces}.list-item .check{display:none;background-color:#ededed;width:15px;height:15px}.list-item .highlight{background-color:var(--bcm-color-yellow-5)}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-grey-8);background-color:var(--bcm-color-prime-blue-1)}.list-item .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:8px;margin-bottom:2px}.checkbox{}.checkbox input{display:none}.checkbox .svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}.checkbox label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}.checkbox label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px;background-color:var(--bcm-color-grey-1)}.checkbox.indeterminate label span.icon{position:relative}.checkbox.indeterminate label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.checkbox.indeterminate label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}.checkbox.indeterminate label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.checkbox input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}.checkbox input:checked+label .icon-checked{display:block}.checkbox bcm-icon{filter:brightness(0) invert(1)}.checkbox input[disabled]+label{cursor:not-allowed}.checkbox input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.checkbox input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}.checkbox input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.checkbox .caption-area{margin-bottom:8px;min-height:20px;display:block}.checkbox .input-caption{display:block}.checkbox .caption-default{color:#8C8C8C}.checkbox .caption-primary{color:#4293CF}.checkbox .caption-success{color:#52C41A}.checkbox .caption-warning{color:#FA8C16}.checkbox .caption-error{color:#F5222D}.checkbox .radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.checkbox .radio-button>span.icon{display:none}.checkbox .radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.checkbox .radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.checkbox .radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.checkbox .radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.checkbox .radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.checkbox .radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.large{height:40px}.checkbox .radio-button.medium{height:32px}.checkbox .radio-button.small{height:24px}";
 
 const BcmListItem = class {
   constructor(hostRef) {
@@ -7211,6 +7508,7 @@ const BcmListItem = class {
     this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
     this.template = null;
     this._uniq_id = (Math.random() * 4).toString(16).replace('.', '');
+    // @Prop({ attribute: 'id', reflect: true           }) id: string = (Math.random() * 4).toString(16).replace('.', '')
     this._id = (Math.random() * 4).toString(16).replace('.', '');
     this.itemObject = null;
     this.selected = false;
@@ -7221,6 +7519,7 @@ const BcmListItem = class {
   disconnectedCallback() { }
   componentWillLoad() { }
   componentDidLoad() {
+    this.itemObject = this.itemObject;
     // setTimeout(() => {
     //     this.loaded.emit(true);
     // }, 1000);
@@ -7275,13 +7574,17 @@ const BcmListItem = class {
       'selected': selected,
       'checkable': multiSelect,
     });
-    return (index.h(index.Host, { class: hostClasses, onClick: () => this.handleClick() }, index.h("div", { class: classes }, multiSelect && (index.h("div", { class: "check-content" }, index.h("bcm-checkbox-lite", { id: 'check-' + this._id, name: 'check-' + this._id, onClick: (e) => this.handleCheckboxClick(e), checked: this.selected, disabled: this.disabled }))), index.h("span", { id: "text" }, this.text ? this.text : index.h("slot", null)))));
+    const checkboxClasses = index$1.classnames('checkbox', this.hidden ? 'hidden' : null, {
+      'indeterminate': false
+    });
+    const checkboxIconClasses = index$1.classnames('icon');
+    return (index.h(index.Host, { class: hostClasses, onClick: () => this.handleClick() }, index.h("div", { class: classes }, multiSelect && (index.h("div", { class: "check-content" }, index.h("div", { class: checkboxClasses, onClick: (e) => this.handleCheckboxClick(e) }, index.h("input", { id: 'check-' + this._id, type: "checkbox", name: 'check-' + this._id, checked: this.selected, disabled: this.disabled }), index.h("label", { htmlFor: 'check-' + this._id }, index.h("span", { class: checkboxIconClasses }, index.h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))))), index.h("span", { id: "text" }, this.text ? this.text : index.h("slot", null)))));
   }
   get el() { return index.getElement(this); }
 };
 BcmListItem.style = listItemCss;
 
-const listSelectCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:256px;margin:0 0 8px 0}:host(.hidden){display:none}:host(.full-width){width:100%}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer;border-radius:2px;position:relative}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{padding:0 8px;width:100%;height:100%;flex:1;display:flex;align-items:center}.selected .selected-text .text-content{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.9}.spinner.first-run{visibility:visible;opacity:1}";
+const listSelectCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:256px;margin:0 0 8px 0;overflow:hidden;max-width:100%}:host(.hidden){display:none}:host(.full-width){width:100%}:host(.type-autocomplete) #selected-container{border:none}:host(.type-autocomplete) #selected-container .selected-text{padding:0;border:none}:host(.type-autocomplete) #selected-container .selected-text bcm-input{display:contents}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer;border-radius:2px;position:relative}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{padding:0 8px;width:100%;height:100%;flex:1;display:flex;align-items:center;overflow:hidden}.selected .selected-text .text-content{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc(100% - 16px);background-color:var(--bcm-color-grey-5)}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.9}.spinner.first-run{visibility:visible;opacity:1}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px;height:20px}.tag[hidden]{opacity:0 !important;position:absolute !important;z-index:-1}.tag .value{cursor:pointer;max-width:164px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.tag.size-large{padding:calc(40px - 8px) 40px}.tag.size-medium{padding:calc(32px - 8px) 32px}.tag.size-small{padding:calc(24px - 8px) 24px}.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer}.tag.dissmisable .close-button bcm-icon,.tag.dissmisable .close-button .icon *{color:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover bcm-icon,.tag.dissmisable .close-button:hover .icon *{color:var(--bcm-color-grey-10)}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}";
 
 const BcmListSelect = class {
   constructor(hostRef) {
@@ -7299,13 +7602,21 @@ const BcmListSelect = class {
     this._id = (Math.random() * 4).toString(16).replace('.', '');
     this._list_id = null;
     this.value = null;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.type = 'default';
     this.size = 'medium';
     this.placeholder = "Choose an option";
     this.noCaption = false;
     this.captionType = 'default';
     this.fullWidth = false;
     this.required = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.multiSelect = false;
+    this.searchData = null;
+    this.searchPlaceholder = "Search";
+    this.searchFields = ['text'];
+    this.returnField = "id";
+    this.searchSub = "items";
+    this.searchText = "";
     this.captionCache = null;
     this.captionTypeCache = null;
     this.isOpen = false;
@@ -7333,8 +7644,8 @@ const BcmListSelect = class {
       this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
       this.selectAreaWidth = this.selectArea.clientWidth;
     }
+    this.selectArea.style.width = "100%";
     this.handleTagControl();
-    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
     if (sessionStorage.getItem(this._internal_id + "-config")) {
       this.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
     }
@@ -7353,20 +7664,82 @@ const BcmListSelect = class {
   handleBlur() {
     this.blur.emit();
   }
+  /**
+   * @desc
+   */
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
   /**
    * @descc
    */
-  async handleOpen() {
-    if (this._list_id !== null) {
-      const list = document.getElementById(this._list_id);
-      if (list.classList.contains("show") === true) {
-        list.hide();
+  async handleOpen(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      if (element.classList.contains("show") === true) {
+        element.hide();
       }
       else {
-        list.show();
+        element.show();
       }
     }
   }
+  /**
+   * @desc
+   */
+  async hide(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      element.hide();
+    }
+  }
+  /**
+   * @desc
+   */
+  async show(list = "default") {
+    var element = null;
+    var list_id = null;
+    switch (list) {
+      case "default":
+        list_id = this._list_id;
+        break;
+      case "other":
+        list_id = "bcm-clone-list-" + this._internal_id;
+        break;
+    }
+    element = document.getElementById(list_id);
+    if (element != null) {
+      element.show();
+    }
+  }
+  /**
+   * @desc
+   */
+  async toggle(list = "default") {
+    this.handleOpen(list);
+  }
   /**
    * @descc
    */
@@ -7377,6 +7750,26 @@ const BcmListSelect = class {
    * @desc
    */
   async config(_config) {
+    this.selectArea = this.el.shadowRoot.querySelector(".selected-text");
+    this.selectArea.style.width = "100%";
+    this.selectAreaWidth = this.selectArea.clientWidth;
+    this.handleTagControl();
+    this.selectArea.style.width = this.selectAreaWidth - 16 + "px";
+    if (_config['searchPlaceholder']) {
+      this.searchPlaceholder = _config['searchPlaceholder'];
+    }
+    if (_config['searchFields']) {
+      this.searchFields = _config['searchFields'];
+    }
+    if (_config['returnField']) {
+      this.returnField = _config['returnField'];
+    }
+    if (_config['searchSub']) {
+      this.searchSub = _config['searchSub'];
+    }
+    if (_config['searchText']) {
+      this.searchText = _config['searchText'];
+    }
     if (_config['mapping']) {
       if (_config['mapping']['id']) {
         this.objectMapping['id'] = _config['mapping']['id'];
@@ -7395,55 +7788,68 @@ const BcmListSelect = class {
    */
   async setValue(value, _id = "id", _text = "text") {
     var newValue = value;
-    // console.log('asd: ', value)
+    // this.searchData = JSON.parse(value as string)
     this.handleLoading(true);
     this.selectData = [];
     this.otherList = [];
     if (typeof value == 'string') {
-      this.selectText = String(value);
-      this.value = this.selectText;
+      if (this.value !== value) {
+        this.selectText = String(value);
+        this.value = this.selectText;
+      }
       this.handleLoading(false);
     }
     else {
-      newValue.forEach(element => {
-        element[this.objectMapping['selected']] = true;
-      });
-      value.forEach(item => {
-        // console.log(item[id] + " " + item[text])
-        this.selectData.push({ id: item[_id], text: item[_text], selected: true });
-      });
-      this.otherList = newValue;
-      this.value = this.selectData;
+      if (value) {
+        value.forEach(item => {
+          // console.log(item[id] + " " + item[text])
+          this.selectData.push({ id: item[_id], text: item[_text], selected: true });
+        });
+      }
+      if (this.value !== this.selectData) {
+        this.value = this.selectData;
+        if (value) {
+          newValue.forEach(element => {
+            // element[this.objectMapping['id']] = element[this.objectMapping['id']]
+            element[this.objectMapping['selected']] = true;
+          });
+        }
+        this.otherList = newValue;
+        var visibleTags = this.el.shadowRoot.getElementById("visible-tags");
+        if (visibleTags) {
+          visibleTags.innerHTML = " ";
+          const maxTags = Math.ceil((this.selectAreaWidth - 16) / 40);
+          const visibleSelectData = this.selectData.slice(0, maxTags);
+          visibleSelectData.map((item) => {
+            const newTag = document.createElement("span");
+            newTag.setAttribute("id", String(item["id"]));
+            newTag.setAttribute("value", item["text"]);
+            newTag.setAttribute("title", item["text"]);
+            newTag.setAttribute("_internal_id", this._internal_id);
+            // newTag.customStyle = customStyleTag
+            newTag.style.opacity = "0";
+            newTag.style.position = "absolute";
+            newTag.classList.add("tag");
+            newTag.classList.add("dissmisable");
+            newTag.classList.add("size-1");
+            newTag.setAttribute("_internal_id", this._internal_id);
+            newTag.innerHTML = '<span class="value"> ' + item["text"] + ' </span>'
+              + '<span id="close-button" ' + '_internal_id="' + this._internal_id + '" class="right close-button"> '
+              + '<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> '
+              + '<g id="icon/outlined/suggested/close">'
+              + '<path id="Vector" d="M18.9275 4.07814L19.9219 5.07251C20.0103 5.1609 20.0103 5.24928 19.9219 5.33767L5.3378 19.9218C5.24941 20.0101 5.16102 20.0101 5.07263 19.9218L4.07826 18.9274C3.98987 18.839 3.98987 18.7506 4.07826 18.6622L18.6623 4.07814C18.7507 3.98975 18.8391 3.98975 18.9275 4.07814Z" fill="black"/>'
+              + '<path id="Vector_2" d="M5.33766 4.07814L19.9217 18.6622C20.0101 18.7506 20.0101 18.839 19.9217 18.9274L18.9274 19.9218C18.839 20.0101 18.7506 20.0101 18.6622 19.9218L4.07813 5.33767C3.98974 5.24928 3.98974 5.1609 4.07813 5.07251L5.0725 4.07814C5.16088 3.98975 5.24927 3.98975 5.33766 4.07814Z" fill="black"/>'
+              + '</g>'
+              + '</svg>'
+              + '</span>';
+            visibleTags.appendChild(newTag);
+          });
+        }
+      }
       // this.selectHiddenData = this.value
     }
     // console.log('this.otherList: ', this.otherList)
-    var visibleTags = this.el.shadowRoot.getElementById("visible-tags");
-    if (visibleTags) {
-      const customStyleTag = {
-        "cursor": "pointer",
-        "max-width": "164px",
-        "text-overflow": "ellipsis",
-        "white-space": "nowrap",
-        "overflow": "hidden",
-        "display": "block"
-      };
-      visibleTags.innerHTML = " ";
-      const maxTags = Math.ceil((this.selectAreaWidth - 16) / 40);
-      const visibleSelectData = this.selectData.slice(0, maxTags);
-      visibleSelectData.map((item) => {
-        const newTag = document.createElement("bcm-tag");
-        newTag.setAttribute("id", String(item["id"]));
-        newTag.setAttribute("value", item["text"]);
-        newTag.setAttribute("title", item["text"]);
-        newTag.setAttribute("type", "dissmisable");
-        newTag.setAttribute("_internal_id", this._internal_id);
-        newTag.customStyle = customStyleTag;
-        newTag.style.opacity = "0";
-        newTag.style.position = "absolute";
-        newTag.classList.add("tag");
-        visibleTags.appendChild(newTag);
-      });
-    }
+    // this.resetCaption()
     return this.value;
   }
   /**
@@ -7476,10 +7882,10 @@ const BcmListSelect = class {
     this.selectHiddenData = [];
     const tagcontainer = this.el.shadowRoot.getElementById("tagcontainer");
     if (tagcontainer) {
-      var tags = tagcontainer.querySelectorAll("bcm-tag.tag");
+      var tags = tagcontainer.querySelectorAll(".tag");
       var tagsWidth = 0;
       // var otherStatus = false
-      var otherTagWidth = 130 + 2;
+      var otherTagWidth = 135 + 2;
       var padding = 16;
       var visibleTags = [];
       tags.forEach(element => {
@@ -7487,10 +7893,10 @@ const BcmListSelect = class {
         element["style"]["opacity"] = "0";
         element["style"]["position"] = "absolute";
       });
-      await utils.delay(100);
       tags.forEach(element => {
-        if ((this.selectAreaWidth - padding) > (element.clientWidth + 2 + tagsWidth)) {
-          tagsWidth += element.clientWidth + 2;
+        var clientWidth = element.clientWidth <= 200 ? element.clientWidth : 200;
+        if ((this.selectAreaWidth - padding) > (clientWidth + 2 + tagsWidth)) {
+          tagsWidth += clientWidth + 2;
           element["style"]["opacity"] = "1";
           element["style"]["position"] = "relative";
         }
@@ -7503,14 +7909,16 @@ const BcmListSelect = class {
         if ((this.selectAreaWidth - padding) < (calcOther === true ? tagsWidth + otherTagWidth : tagsWidth)) {
           visibleTags = Array.from(tags).filter(e => e["hidden"] === false);
           if (visibleTags[visibleTags.length - 1]) {
-            tagsWidth -= visibleTags[visibleTags.length - 1].clientWidth + 2;
+            var clientWidth = visibleTags[visibleTags.length - 1].clientWidth <= 200 ? visibleTags[visibleTags.length - 1].clientWidth : 200;
+            tagsWidth -= clientWidth + 2;
             visibleTags[visibleTags.length - 1]["hidden"] = true;
             removeTag(calcOther);
           }
         }
       };
       removeTag();
-      tags = tagcontainer.querySelectorAll("bcm-tag.tag");
+      await utils.delay(100);
+      tags = tagcontainer.querySelectorAll(".tag");
       var hiddenData = Array.from(tags).filter(e => e["hidden"] === true);
       const otherTagcontainer = this.el.shadowRoot.getElementById("other-container");
       if (Number(hiddenData.length) > 0) {
@@ -7542,9 +7950,10 @@ const BcmListSelect = class {
         cloneList.config(JSON.parse(sessionStorage.getItem(this._internal_id + "-config")));
       }
       // console.log('selectHiddenData: ',    this.selectHiddenData )
-      cloneList.setData(this.selectHiddenData);
-      cloneList.show();
+      cloneList.setDataOther(this.selectHiddenData);
+      // cloneList.show()
     }
+    // await delay(100)
     this.handleLoading(false);
   }
   /**
@@ -7559,18 +7968,18 @@ const BcmListSelect = class {
       element = document.createElement("bcm-list");
       var el = document.getElementById(this._list_id);
       for (var i = 0, atts = el.attributes, n = atts.length; i < n; i++) {
-        // arr.push(atts[i].nodeName);
-        // console.log(atts[i].nodeName)
-        // console.log(atts[i].nodeValue)
         element.setAttribute(atts[i].nodeName, atts[i].nodeValue);
       }
       element.setAttribute("id", elementId);
       element.setAttribute("_list_id", this._list_id);
-      // element.setAttribute("_list_select_id", this._id)
+      element.setAttribute("_list_select_id", this._id);
       element.setAttribute("_internal_id", otherListInternalId);
       element.searchable = true;
+      element.infoFooter = false;
       element.type = "default";
+      element.processType = "deselect";
       element.setAttribute("linked-component", this._id);
+      element.linkedComponent = this._id;
       element.multiSelect = true;
       const parentNode = this.el.parentNode;
       parentNode.insertBefore(element, this.el);
@@ -7584,15 +7993,70 @@ const BcmListSelect = class {
   /**
    * @descc
    */
-  // handleClickTag(){
-  // }
+  inputChange(e) {
+    this.search(e);
+  }
+  search(value) {
+    const element = document.getElementById(this._list_id);
+    if (element != null) {
+      element.setSearch(value);
+    }
+  }
+  /**
+   * @desc
+   */
+  async handleClick(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    if (path && path.filter((input) => input['_internal_id'] == this._internal_id)[0]) {
+      const cloneElementId = "bcm-clone-list-" + this._internal_id;
+      const cloneElement = document.querySelector("#" + cloneElementId);
+      const element = document.querySelector("#" + this._list_id);
+      if (path.filter((input) => input['id'] == "close-button")[0]
+        && path.filter((input) => input['className'] == "tag dissmisable size-1")[0]
+        && path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"]) {
+        event.preventDefault();
+        event.stopPropagation();
+        const selectedID = path.filter((input) => input['className'] == "tag dissmisable size-1")[0]["id"];
+        if (element) {
+          element.unChecked(selectedID);
+        }
+      }
+      if (path.filter((input) => input['id'] == "other-tag")[0]) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (path.filter((input) => input['id'] == "close")[0]) {
+          if (cloneElement) {
+            if (await cloneElement.openStatus() === true) {
+              if (element) {
+                element.show();
+              }
+            }
+          }
+          var selectedIDs = [];
+          this.selectHiddenData.forEach(item => {
+            selectedIDs.push(item[this.objectMapping['id']]);
+          });
+          if (element) {
+            element.unChecked(selectedIDs);
+          }
+        }
+        else {
+          if (cloneElement) {
+            setTimeout(() => {
+              cloneElement.show();
+            }, 100);
+          }
+        }
+      }
+    }
+  }
   render() {
     const { label, fullWidth, required, selectText, selectData, placeholder, clearable, value, isOpen, noCaption, captionType, captionError, caption, size, disabled } = this;
     // const classes = cs(
     //     'card',
     //     this.size
     // )
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, 'type-' + this.type, {
       'full-width': fullWidth
     });
     const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
@@ -7624,7 +8088,7 @@ const BcmListSelect = class {
     //       <slot />
     //     </div>
     // </Host>
-    index.h(index.Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, index.h("div", { class: container }, label && index.h("label", { class: "label size-1", onClick: () => this.handleOpen() }, " ", label, " ", required && ('*'), "  "), index.h("div", { id: "selected-container", class: selected, onClick: () => this.handleOpen(), tabIndex: -1 }, index.h("span", { class: selectedText, title: selectText !== null && (selectText) }, index.h("div", { class: "spinner first-run" }), (selectText !== null && (index.h("div", { class: "text-content" }, selectText))), (selectText === null && (index.h("span", { id: "tagcontainer", class: "tag-container" }, index.h("span", { id: "visible-tags" }), index.h("span", { id: "other-container" }, index.h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleOtherTag, type: "dissmisable", id: "other-tag" }))))), (selectText === null && selectData.length === 0 && placeholder !== null && (index.h("span", { class: "placeholder" }, " ", placeholder, " ")))), index.h("div", { class: "buttons" }, clearable && value && (index.h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, index.h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))), index.h("span", { class: isOpen ? 'open' : 'close' }, index.h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" })))), noCaption === false && (index.h("div", { class: "caption-area" }, captionType == "error"
+    index.h(index.Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, index.h("div", { class: container }, label && index.h("label", { class: "label size-1", onClick: () => this.handleOpen() }, " ", label, " ", required === true && ('*'), "  "), index.h("div", { id: "selected-container", class: selected, onClick: () => this.handleOpen(), tabIndex: -1 }, index.h("span", { class: selectedText, title: selectText !== null && (selectText) }, index.h("div", { class: "spinner first-run" }), this.type === 'select' && (selectText !== null && (index.h("div", { class: "text-content" }, selectText))), (this.type === 'select' || this.type === 'autocomplete' && this.multiSelect === true) && (selectText === null && (index.h("span", { id: "tagcontainer", class: "tag-container" }, index.h("span", { id: "visible-tags" }), index.h("span", { id: "other-container" }, index.h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleOtherTag, type: "dissmisable", id: "other-tag" }))))), this.type === 'select' && (selectText === null && selectData.length === 0 && placeholder !== null && (index.h("span", { class: "placeholder" }, " ", placeholder, " "))), this.type === 'autocomplete' && (index.h("bcm-input", { "on-bcm-change": e => this.inputChange(e.detail), "full-width": true, placeholder: this.searchPlaceholder, id: "autocomplete", value: this.searchText, "no-caption": true, "no-margin": true, type: "search", clearable: true }))), this.type === 'select' && (index.h("div", { class: "buttons" }, clearable && value && (index.h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, index.h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))), index.h("span", { class: isOpen ? 'open' : 'close' }, index.h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" }))))), noCaption === false && (index.h("div", { class: "caption-area" }, captionType == "error"
       ? index.h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && index.h("span", { class: captionClasses }, " ", caption, " "))))));
   }
@@ -7661,7 +8125,7 @@ var OrientationProps;
   OrientationProps["landscape"] = "landscape";
 })(OrientationProps || (OrientationProps = {}));
 
-const modalCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block}:host(.hidden){display:none}.modal{display:flex;position:fixed;top:0;left:0;opacity:0;justify-content:center;align-items:flex-start;width:100vw;height:100vh;padding:80px 40px 40px;overflow:hidden;overflow-y:auto;background-color:rgba(0, 0, 0, 0.5);box-sizing:border-box;z-index:-1}.modal.show{top:0;opacity:1;z-index:10500}.overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0}.card{display:flex;flex-direction:column;width:100%;box-shadow:0px 4px 12px rgba(0, 0, 0, 0.15);border-radius:2px;background-color:#fff;z-index:2}.card.portrait{max-width:312px}.card.landscape{max-width:475px}.card.small{width:576px}.card.medium{width:768px}.card.large{width:992px}.card.x-large{width:1024px}.card.xx-large{width:1200px}.card.xxx-large{width:1700px}.card.full-width{width:100%}.text-content{font-size:14px;line-height:22px;color:var(--bcm-color-grey-8);padding:0}.title{position:relative;display:flex;align-items:center;justify-content:flex-start;padding-right:24px;font-size:16px;line-height:24px;font-weight:500;color:var(--bcm-color-grey-9)}.title bcm-icon{margin-right:8px}p:not(.with-status){margin:0}p.with-status{padding-left:32px}header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;font-size:16px;line-height:24px;font-weight:500;color:var(--bcm-color-grey-9);background-color:var(--bcm-color-grey-2);border-bottom:1px solid var(--bcm-color-grey-5)}header bcm-icon{cursor:pointer}footer{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-2)}footer bcm-button+bcm-button{margin-left:8px}.footer{display:flex;align-items:flex-start;justify-content:flex-end}.footer bcm-button+bcm-button{margin-left:8px}";
+const modalCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block}:host(.hidden){display:none}.modal{display:flex;position:fixed;top:0;left:0;opacity:0;justify-content:center;align-items:flex-start;height:0;padding:0;margin:0;width:0;overflow:hidden;overflow-y:auto;background-color:rgba(0, 0, 0, 0.5);box-sizing:border-box;z-index:-1}.modal.show{width:100vw;height:100vh;padding:80px 40px 40px;top:0;opacity:1;z-index:10500}.overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0}.card{display:flex;flex-direction:column;width:100%;box-shadow:0px 4px 12px rgba(0, 0, 0, 0.15);border-radius:2px;background-color:#fff;z-index:2}.card.portrait{max-width:312px}.card.landscape{max-width:475px}.card.small{width:576px}.card.medium{width:768px}.card.large{width:992px}.card.x-large{width:1024px}.card.xx-large{width:1200px}.card.xxx-large{width:1700px}.card.full-width{width:100%}.text-content{font-size:14px;line-height:22px;color:var(--bcm-color-grey-8);padding:0}.title{position:relative;display:flex;align-items:center;justify-content:flex-start;padding-right:24px;font-size:16px;line-height:24px;font-weight:500;color:var(--bcm-color-grey-9)}.title bcm-icon{margin-right:8px}p:not(.with-status){margin:0}p.with-status{padding-left:32px}header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;font-size:16px;line-height:24px;font-weight:500;color:var(--bcm-color-grey-9);background-color:var(--bcm-color-grey-2);border-bottom:1px solid var(--bcm-color-grey-5)}header bcm-icon{cursor:pointer}footer{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-2)}footer bcm-button+bcm-button{margin-left:8px}.footer{display:flex;align-items:flex-start;justify-content:flex-end}.footer bcm-button+bcm-button{margin-left:8px}";
 
 /**
  * @desc
@@ -7816,6 +8280,216 @@ const BcmModal = class {
 };
 BcmModal.style = modalCss;
 
+/**
+ * 'color' prop predefined values
+ */
+var ColorProps;
+(function (ColorProps) {
+  ColorProps["black"] = "black";
+  ColorProps["white"] = "white";
+  ColorProps["prime-blue"] = "prime-blue";
+  ColorProps["grey"] = "grey";
+  ColorProps["blue"] = "blue";
+  ColorProps["warmyellow"] = "warmyellow";
+  ColorProps["yellow"] = "yellow";
+  ColorProps["limegreen"] = "limegreen";
+  ColorProps["red"] = "red";
+  ColorProps["darkorange"] = "darkorange";
+  ColorProps["orange"] = "orange";
+  ColorProps["green"] = "green";
+  ColorProps["turquosie"] = "turquosie";
+  ColorProps["cobaltblue"] = "cobaltblue";
+  ColorProps["magenta"] = "magenta";
+  ColorProps["purple"] = "purple";
+  ColorProps["bc-red"] = "bc-red";
+  ColorProps["bc-blue"] = "bc-blue";
+  ColorProps["bc-green"] = "bc-green";
+  ColorProps["bc-orange"] = "bc-orange";
+})(ColorProps || (ColorProps = {}));
+
+const radioCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block}:host(.hidden){display:none}input[type=radio]{position:absolute;width:0;height:0;opacity:0}label{user-select:none;display:inline-flex;align-items:center;color:var(--bcm-color-grey-8);cursor:pointer}.radio-container .radio{width:16px;height:16px;min-width:16px;min-height:16px;border:1px solid var(--bcm-color-grey-5);border-radius:100%;background-color:var(--bcm-color-grey-1);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;transition-duration:0.3s;margin-right:8px}.radio-container .radio .inner{width:8px;height:8px;border-radius:100%;background-color:var(--bcm-color-grey-1)}.radio-container:hover:not(.disabled) .radio{border-color:var(--bcm-color-prime-blue-6);filter:drop-shadow(0px 2px 4px rgba(54, 121, 171, 0.5))}.radio-container.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-container.disabled .radio{border-color:var(--bcm-color-grey-5)}.radio-container.checked .radio{border-color:var(--bcm-color-prime-blue-6)}.radio-container.checked .inner{background-color:var(--bcm-color-prime-blue-6)}.radio-container.checked.disabled .radio{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.radio-container.checked.disabled .inner{background-color:var(--bcm-color-grey-6)}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
+
+const BcmRadio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "bcm-change", 3);
+    this.focus = index.createEvent(this, "bcm-focus", 3);
+    this.blur = index.createEvent(this, "bcm-blur", 3);
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.hidden = false;
+    this.required = false;
+  }
+  handleFocus() {
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.blur.emit();
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {void}
+   */
+  async check(uncheck) {
+    this.radio.checked = uncheck;
+    this.handleChange();
+  }
+  handleChange() {
+    this.checked = this.radio.checked;
+    this.change.emit({
+      value: this.radio.value,
+      checked: this.radio.checked
+    });
+  }
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+  getColor(color) {
+    if (this.color !== 'default' && this.optionType == 'button' && this.checked)
+      return {
+        // color:              extractColor(ColorPalette, ColorProps[color] + '-6'),
+        borderColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-5'),
+        backgroundColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-5')
+      };
+  }
+  render() {
+    const { checked, value, disabled, optionType, buttonStyle, size } = this;
+    const defaultClasses = index$1.classnames('radio-container', 'size-2', {
+      'checked': checked,
+      'disabled': disabled
+    });
+    const buttonClasses = index$1.classnames('radio-button', buttonStyle, size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+      'checked': checked,
+      'disabled': disabled,
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null);
+    return (index.h(index.Host, { class: hostClasses, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("label", { class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, index.h("input", { type: "radio", value: value, checked: checked, ref: el => (this.radio = el), onChange: this.handleChange, disabled: disabled }), optionType === 'default' && (index.h("span", { class: "radio" }, index.h("span", { class: "inner" }))), index.h("slot", null))));
+  }
+};
+BcmRadio.style = radioCss;
+
+const groupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block;margin:0 0 8px 0}:host(.hidden){display:none}:host(.error) label{color:var(--bcm-color-red-6) !important}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-group{display:flex}.radio-group.horizontal{flex-direction:row;margin-bottom:5px}.radio-group.horizontal ::slotted(bcm-radio:not(:last-of-type)){margin-right:16px}.radio-group.horizontal bcm-radio:not(:last-of-type){margin-right:16px}.radio-group.vertical{flex-direction:column}.radio-group.vertical label{margin-bottom:4px}.radio-group.vertical ::slotted(bcm-radio:not(:last-of-type)){margin-bottom:8px}.radio-group.vertical bcm-radio:not(:last-of-type){margin-bottom:8px}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);padding-right:4px;margin-right:8px;margin-bottom:8px}.caption-area{min-height:20px}.input-caption{display:block}";
+
+const BcmRadioGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.change = index.createEvent(this, "bcm-change", 7);
+    this.childRadios = [];
+    this.direction = 'horizontal';
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.disabled = false;
+    this.hidden = false;
+    this.label = null;
+    this.required = false;
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.radioOptions = [];
+    this.usingSlots = true;
+  }
+  async setData(_data) {
+    setTimeout(() => {
+      this.options = _data;
+    }, 100);
+    return Promise.resolve(true);
+  }
+  async getValue() {
+    return this.value;
+  }
+  async check(value) {
+    this.defaultValue = value;
+    this.value = value;
+  }
+  async setClear() {
+    this.value = '';
+  }
+  async resetCaption() {
+    this.caption = this.captionCache;
+    this.captionType = this.captionTypeCache;
+    this.captionError = null;
+  }
+  parseOptions(newValue) {
+    if (newValue) {
+      typeof newValue === 'string'
+        ? this.radioOptions = JSON.parse(newValue)
+        : this.radioOptions = newValue;
+      if (this.radioOptions.length > 0)
+        this.usingSlots = false;
+    }
+  }
+  // If checked radio changes, emits change event
+  handleChange(newValue) {
+    this.change.emit(newValue);
+  }
+  // Controls radios styles and states
+  controlRadio(elements) {
+    elements.forEach((radio) => {
+      radio.checked = this.value ? radio.value === this.value : this.defaultValue ? radio.value === this.defaultValue : null;
+      radio.disabled = this.disabled;
+      radio.optionType = this.optionType;
+      radio.buttonStyle = this.buttonStyle;
+      radio.size = this.size;
+      radio.addEventListener('bcm-change', (e) => {
+        e.stopPropagation();
+        if (e.detail.checked) {
+          this.value = radio.value;
+        }
+      }, { once: true });
+    });
+  }
+  connectedCallback() {
+    this.captionCache = this.caption;
+    this.captionTypeCache = this.captionType;
+  }
+  componentWillLoad() {
+    this.parseOptions(this.options);
+  }
+  componentDidRender() {
+    let elements = [];
+    if (this.usingSlots) {
+      elements = this.host.shadowRoot.querySelector('slot').assignedElements();
+      this.childRadios = [];
+      elements.map(el => {
+        String(el.tagName).toLowerCase() == 'bcm-radio' && this.childRadios.push(el);
+      });
+      this.controlRadio(this.childRadios);
+    }
+    else {
+      elements = Array.from(this.host.shadowRoot.querySelectorAll('bcm-radio'));
+      this.controlRadio(elements);
+    }
+  }
+  render() {
+    const { label, required, noCaption, caption, captionError, captionType } = this;
+    const classes = index$1.classnames('radio-group', {
+      [this.direction]: this.optionType === 'default'
+    });
+    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
+      'error': captionType == 'error' ? true : false
+    });
+    const captionClasses = index$1.classnames('size-1', 'input-caption', 'caption-' + captionType);
+    if (this.radioOptions) {
+      return (index.h(index.Host, { class: hostClasses }, label && index.h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), "  "), index.h("div", { class: classes }, this.radioOptions && this.radioOptions.map(radio => (index.h("bcm-radio", { value: radio.value, disabled: radio.disabled, checked: radio.checked }, " ", radio.label, " "))), index.h("slot", null)), !noCaption && (index.h("div", { class: "caption-area" }, captionType == "error"
+        ? index.h("span", { class: captionClasses }, " ", captionError, " ")
+        : caption && index.h("span", { class: captionClasses }, " ", caption, " ")))));
+    }
+    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "options": ["parseOptions"],
+    "value": ["handleChange"]
+  }; }
+};
+BcmRadioGroup.style = groupCss;
+
 const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:block}:host(.hidden){display:none}";
 
 const lowercase$4 = (str) => str.toLowerCase();
@@ -8494,7 +9168,7 @@ BcmTabsContent.style = tabsContentCss;
 /**
  * 'color' prop predefined values
  */
-var ColorProps;
+var ColorProps$1;
 (function (ColorProps) {
   ColorProps["black"] = "black";
   ColorProps["white"] = "white";
@@ -8516,7 +9190,7 @@ var ColorProps;
   ColorProps["bc-blue"] = "bc-blue";
   ColorProps["bc-green"] = "bc-green";
   ColorProps["bc-orange"] = "bc-orange";
-})(ColorProps || (ColorProps = {}));
+})(ColorProps$1 || (ColorProps$1 = {}));
 
 const tagCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}:host{display:inline-block;width:fit-content}:host(.hidden){display:none}:host(.maxwidth){max-width:100px}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px}.tag.size-1{padding:calc(8px - 8px) 8px}.tag.size-2{padding:calc(9px - 8px) 9px}.tag.size-3{padding:calc(10px - 8px) 10px}.tag.size-4{padding:calc(11px - 8px) 11px}.tag.size-5{padding:calc(12px - 8px) 12px}.tag.size-6{padding:calc(13px - 8px) 13px}.tag.size-7{padding:calc(14px - 8px) 14px}.tag.size-8{padding:calc(15px - 8px) 15px}.tag.size-9{padding:calc(16px - 8px) 16px}.tag.basic,.tag.closeable,.tag.add,.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.basic:hover,.tag.closeable:hover,.tag.add:hover,.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer}.tag.dissmisable .close-button bcm-icon{color:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover bcm-icon{color:var(--bcm-color-grey-10)}.tag.add{border-style:dashed;background-color:var(--bcm-color-grey-1)}.tag.checkable{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border-color:var(--bcm-color-grey-1)}.tag.checkable:hover{color:var(--bcm-color-prime-blue-5);cursor:pointer}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}button{border:none;outline:0;cursor:pointer !important;margin:0}input[type=checkbox]{margin:0;width:0;height:0;visibility:hidden;position:absolute}input[type=checkbox]:checked+label{background-color:var(--bcm-color-prime-blue-6);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-prime-blue-6)}input[type=checkbox]:checked+label:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}input[type=checkbox]:checked+label:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}";
 
@@ -8543,11 +9217,11 @@ const BcmTag = class {
     this.checkedChange.emit({ newValue, oldValue });
   }
   getColor(color) {
-    if ((this.type == 'basic' || this.type == 'dissmisable') && ColorProps[color])
+    if ((this.type == 'basic' || this.type == 'dissmisable') && ColorProps$1[color])
       return {
-        color: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-6'),
-        borderColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-3'),
-        backgroundColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-1')
+        color: utils.extractColor(colors.ColorPalette, ColorProps$1[color] + '-6'),
+        borderColor: utils.extractColor(colors.ColorPalette, ColorProps$1[color] + '-3'),
+        backgroundColor: utils.extractColor(colors.ColorPalette, ColorProps$1[color] + '-1')
       };
   }
   getSize(size, returnNumber = false) {
@@ -8617,6 +9291,8 @@ exports.bcm_list = BcmList;
 exports.bcm_list_item = BcmListItem;
 exports.bcm_list_select = BcmListSelect;
 exports.bcm_modal = BcmModal;
+exports.bcm_radio = BcmRadio;
+exports.bcm_radio_group = BcmRadioGroup;
 exports.bcm_search = BcmSearch;
 exports.bcm_tab = BcmTab;
 exports.bcm_tab_pane = BcmTabPane;