bromcom-ui 2.4.12 → 2.4.15

package/dist/collection/components/organism/list/list-key-control.js

@@ -0,0 +1,104 @@
+export class ListKeyControl {
+  constructor(keyCode, element) {
+    this.keyCode = keyCode;
+    this.element = element;
+  }
+  getKeyCode() {
+    return this.keyCode;
+  }
+  isUp() {
+    return this.keyCode === 38;
+  }
+  isDown() {
+    return this.keyCode === 40;
+  }
+  isLeft() {
+    return this.keyCode === 37;
+  }
+  isRight() {
+    return this.keyCode === 39;
+  }
+  isEnter() {
+    return this.keyCode === 13;
+  }
+  isEscape() {
+    return this.keyCode === 27;
+  }
+  isSpace() {
+    return this.keyCode === 32;
+  }
+  getFocusedElement() {
+    return this.element.querySelectorAll('.bcm-list__item.focused')[0] || null;
+  }
+  getFirstElement() {
+    return this.element.querySelectorAll('.bcm-list__item')[0] || null;
+  }
+  getNextElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.nextElementSibling) || this.getFirstElement();
+  }
+  getPreviousElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.previousElementSibling) || this.getFirstElement();
+  }
+  getChildElement() {
+    var _a;
+    return ((_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bcm-list__item')[0]) || null;
+  }
+  getParentElement() {
+    var _a, _b;
+    return ((_b = (_a = this.getFocusedElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) || null;
+  }
+  setFocus(element) {
+    element.focus();
+  }
+  keydown() {
+    debugger;
+    const focusedElement = this.getFocusedElement();
+    const nextElement = this.getNextElement();
+    const previousElement = this.getPreviousElement();
+    const childElement = this.getChildElement();
+    const parentElement = this.getParentElement();
+    if (this.isUp()) {
+      if (focusedElement) {
+        if (previousElement) {
+          this.setFocus(previousElement);
+        }
+        else {
+          this.setFocus(parentElement);
+        }
+      }
+      else {
+        this.setFocus(this.getFirstElement());
+      }
+    }
+    else if (this.isDown()) {
+      if (focusedElement) {
+        if (nextElement) {
+          this.setFocus(nextElement);
+        }
+        else {
+          this.setFocus(this.getFirstElement());
+        }
+      }
+      else {
+        this.setFocus(this.getFirstElement());
+      }
+    }
+    else if (this.isLeft()) {
+      if (parentElement) {
+        this.setFocus(parentElement);
+      }
+    }
+    else if (this.isRight()) {
+      if (childElement) {
+        this.setFocus(childElement);
+      }
+    }
+    else if (this.isEnter()) {
+      if (focusedElement) {
+        console.log('seçilen element: ', focusedElement);
+      }
+    }
+  }
+}

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

@@ -18562,14 +18562,14 @@
 .bcm-list__container.full-width {
   width: 100%;
 }
-.bcm-list__container.bcm-list__type-select, .bcm-list__container.bcm-list__type-autocomplete {
+.bcm-list__container.bcm-list__type-linked-component, .bcm-list__container.bcm-list__type-select, .bcm-list__container.bcm-list__type-autocomplete {
   opacity: 0;
   visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
 }
-.bcm-list__container.bcm-list__type-select.is-open, .bcm-list__container.bcm-list__type-autocomplete.is-open {
+.bcm-list__container.bcm-list__type-linked-component.is-open, .bcm-list__container.bcm-list__type-select.is-open, .bcm-list__container.bcm-list__type-autocomplete.is-open {
   opacity: 1;
   visibility: visible;
   z-index: 10800;
@@ -18688,11 +18688,20 @@
   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.disabled {
+  user-select: none;
+}
 .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 {
+  background-color: var(--bcm-color-prime-blue-1);
+}
+.bcm-list__item:focus > .bcm-list__item-content:not(.disabled) {
+  color: var(--bcm-color-grey-8);
 }
 .bcm-list__item-content {
   display: flex;
@@ -18701,12 +18710,12 @@
   align-items: stretch;
   cursor: pointer;
   padding: 0;
-  margin: 0 8px;
   color: var(--bcm-color-grey-8);
   background-color: var(--bcm-color-grey-1);
 }
 .bcm-list__item-content.disabled {
   color: var(--bcm-color-grey-6);
+  user-select: none;
 }
 .bcm-list__item-content.selected {
   color: var(--bcm-color-prime-blue-6);