bromcom-ui 2.4.11 → 2.4.14

package/dist/collection/components/molecules/select/select.js

@@ -469,14 +469,19 @@ export class BcmSelect {
     this.captionTypeCache = this.captionType;
   }
   handleChange(newValue, oldValue) {
-    if (oldValue != newValue) {
+    const newVal = newValue ? newValue : null;
+    const oldVal = oldValue ? oldValue : null;
+    if (oldVal != newVal) {
       if (this.checkboxes == true) {
-        this.change.emit(newValue);
+        this.change.emit(newVal);
       }
       else {
-        if (!oldValue || (newValue[this.objectMapping['id']] != oldValue[this.objectMapping['id']])) {
+        if (!oldVal || (newVal && (newVal[this.objectMapping['id']] != oldVal[this.objectMapping['id']]))) {
           // await delay(10)
-          this.change.emit(newValue);
+          this.change.emit(newVal);
+        }
+        if (!newVal) {
+          this.change.emit(newVal);
         }
       }
     }

package/dist/collection/components/organism/list/list.css

@@ -18688,11 +18688,15 @@
   border-color: var(--bcm-color-prime-blue-5);
   box-shadow: 0px 0px 4px var(--bcm-color-prime-blue-6);
 }
+.bcm-list__item {
+  padding: 2px 8px;
+}
 .bcm-list__item:focus {
-  border: 2px solid #000000;
+  outline: none;
 }
-.bcm-list__item.focused {
-  border: 2px solid #000000;
+.bcm-list__item:focus .bcm-list__item-content {
+  color: var(--bcm-color-grey-8);
+  background-color: var(--bcm-color-prime-blue-1);
 }
 .bcm-list__item-content {
   display: flex;
@@ -18701,7 +18705,6 @@
   align-items: stretch;
   cursor: pointer;
   padding: 0;
-  margin: 0 8px;
   color: var(--bcm-color-grey-8);
   background-color: var(--bcm-color-grey-1);
 }

package/dist/collection/components/organism/list/list.js

@@ -209,6 +209,7 @@ export class BcmList {
   }
   async handleOpen() {
     if (this.isOpen) {
+      this.calculateLocation();
       this.onSelectSearch();
     }
     else {
@@ -626,36 +627,50 @@ export class BcmList {
     if (this.keyControl) {
       const focusedList = Generate.findEventPath(ev, this.el);
       if (focusedList) {
-        if (this.type === 'select' && !this.isOpen) {
-          if (keycode === Bcm.KeyCode.enter || keycode === Bcm.KeyCode.space) {
-            this.isOpen = true;
+        const keyCode = ev.keyCode || ev.which;
+        const keyList = [
+          [Bcm.KeyCode.up],
+          [Bcm.KeyCode.down],
+          [Bcm.KeyCode.enter],
+          [Bcm.KeyCode.space],
+          [Bcm.KeyCode.left],
+          [Bcm.KeyCode.right]
+        ];
+        if (keyList.some(key => key.includes(keyCode))) {
+          ev.preventDefault();
+          ev.stopPropagation();
+          ev.stopImmediatePropagation();
+          if (this.type === 'select' && !this.isOpen) {
+            if (keycode === Bcm.KeyCode.enter || keycode === Bcm.KeyCode.space) {
+              this.isOpen = true;
+            }
           }
-        }
-        else {
-          const list = document.getElementById(`bcm-list-${this._id}`);
-          if (list) {
-            const items = list.querySelectorAll('.bcm-list__item');
-            if (items.length > 0) {
-              const selectedItem = list.querySelector('.bcm-list__item.focused');
-              if (selectedItem) {
-                const selectedIndex = Array.prototype.indexOf.call(items, selectedItem);
-                if (ev.key === 'ArrowDown') {
-                  if (selectedIndex < items.length - 1) {
-                    items[selectedIndex + 1].focus();
+          else {
+            const list = document.getElementById(`bcm-list-${this._id}`);
+            if (list) {
+              const items = list.querySelectorAll('.bcm-list__item');
+              if (items.length > 0) {
+                const selectedItem = list.querySelector('.bcm-list__item.focused');
+                if (selectedItem) {
+                  const selectedIndex = Array.prototype.indexOf.call(items, selectedItem);
+                  if (ev.key === 'ArrowDown') {
+                    if (selectedIndex < items.length - 1) {
+                      items[selectedIndex + 1].focus();
+                    }
                   }
-                }
-                else if (ev.key === 'ArrowUp') {
-                  if (selectedIndex > 0) {
-                    items[selectedIndex - 1].focus();
+                  else if (ev.key === 'ArrowUp') {
+                    if (selectedIndex > 0) {
+                      items[selectedIndex - 1].focus();
+                    }
+                  }
+                  else if (ev.key === 'Enter') {
+                    this.selectedItem(selectedItem.id);
                   }
                 }
-                else if (ev.key === 'Enter') {
-                  this.selectedItem(selectedItem);
+                else {
+                  items[0].focus();
                 }
               }
-              else {
-                items[0].focus();
-              }
             }
           }
         }
@@ -666,38 +681,20 @@ export class BcmList {
     if (this.keyControl) {
       const focusedList = Generate.findEventPath(ev, this.el);
       if (focusedList) {
-        const keycode = ev.keyCode || ev.which;
-        if (keycode === Bcm.KeyCode.escape) {
-          //unfocused element
-          const list = document.getElementById(`bcm-list-${this._id}`);
-          if (list) {
-            const items = list.querySelectorAll('.bcm-list__item');
-            if (items.length > 0) {
-              items[0].focus();
-            }
-          }
-        }
-        const goToScroll = (item, list) => {
-          const main = list.querySelector('main');
-          const itemHeight = item.offsetHeight;
-          const listHeight = main.offsetHeight;
-          const itemTop = item.offsetTop;
-          // console.log(item.offsetTop)
-          const listTop = main.scrollTop;
-          const listBottom = listTop + listHeight;
-          if (itemTop < listTop) {
-            main.scrollTop = itemTop;
-          }
-          else if (itemTop > listBottom) {
-            main.scrollTop = itemTop - listHeight + itemHeight;
-          }
-          // console.log(main.scrollTop)
-        };
         const list = document.getElementById(`bcm-list-${this._id}`);
         if (list) {
           const items = list.querySelectorAll('.bcm-list__item.focused');
           if (items.length > 0) {
-            goToScroll(items[0], list);
+            const main = list.querySelector('main');
+            const itemHeight = items[0].offsetHeight;
+            const listHeight = main.offsetHeight;
+            const itemTop = items[0].offsetTop;
+            if (itemTop > listHeight) {
+              main.scrollTop = itemTop - (listHeight / 2) + (itemHeight / 2);
+            }
+            if (itemTop < listHeight) {
+              main.scrollTop = itemTop - (listHeight / 2) - (itemHeight / 2);
+            }
           }
         }
       }

package/dist/esm/bcm-avatar_33.entry.js

@@ -11014,14 +11014,19 @@ const BcmSelect = class {
     this.captionTypeCache = this.captionType;
   }
   handleChange(newValue, oldValue) {
-    if (oldValue != newValue) {
+    const newVal = newValue ? newValue : null;
+    const oldVal = oldValue ? oldValue : null;
+    if (oldVal != newVal) {
       if (this.checkboxes == true) {
-        this.change.emit(newValue);
+        this.change.emit(newVal);
       }
       else {
-        if (!oldValue || (newValue[this.objectMapping['id']] != oldValue[this.objectMapping['id']])) {
+        if (!oldVal || (newVal && (newVal[this.objectMapping['id']] != oldVal[this.objectMapping['id']]))) {
           // await delay(10)
-          this.change.emit(newValue);
+          this.change.emit(newVal);
+        }
+        if (!newVal) {
+          this.change.emit(newVal);
         }
       }
     }