bromcom-ui 2.4.14 → 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;
@@ -18691,13 +18691,18 @@
 .bcm-list__item {
   padding: 2px 8px;
 }
+.bcm-list__item.disabled {
+  user-select: none;
+}
 .bcm-list__item:focus {
   outline: none;
 }
-.bcm-list__item:focus .bcm-list__item-content {
-  color: var(--bcm-color-grey-8);
+.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;
   flex-direction: row;
@@ -18710,6 +18715,7 @@
 }
 .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);

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

@@ -18,12 +18,13 @@ import { ListTemplate } from '../../../templates/list-template';
 import { getPlacement, setPosition } from '../../../utils/popover-placement';
 import { delay, pluralize } from '../../../utils/utils';
 import listState from '../states/bcm-list2.states';
+import { ListKeyControl } from './list-key-control';
 export class BcmList {
   constructor() {
     this.debounce = null;
     this._id = Generate.UID();
     // All types
-    this.type = 'listbox';
+    this.type = Bcm.ListType.listbox;
     this.treeview = false;
     this.checkboxes = false;
     this.searchable = false;
@@ -79,32 +80,13 @@ export class BcmList {
     this.data = [];
     this.debounceHandler = Generate.debounceInput(() => this.listenResize(), 300, false);
   }
-  async componentDidLoad() {
-    await this.initState();
-    if (this.type == 'select' || this.type == 'autocomplete') {
-      const list = this.el.querySelector(`#bcm-list-${this._id}`);
-      if (list) {
-        document.body.appendChild(list);
-      }
-    }
-  }
   connectedCallback() {
     if (this.height != '256px') {
       this.limit = Math.floor(+(this.height.replace('px', '')) / 32);
       this.searchResultLimit = this.limit;
-      // this.searchGetParents = 20
       this.markForCheck();
     }
   }
-  disconnectedCallback() {
-    listState.removeState(this._id);
-    if (this.type == 'select' || this.type == 'autocomplete') {
-      const list = document.querySelector(`#bcm-list-${this._id}`);
-      if (list) {
-        document.body.removeChild(list);
-      }
-    }
-  }
   componentWillRender() {
     this.calculateLocation();
     this.updateOptions();
@@ -117,12 +99,22 @@ export class BcmList {
       this.tagControl();
     }
   }
-  updateOptions() {
-    listState.updateOptions(this._id, this);
+  async componentDidLoad() {
+    await this.initState();
+    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+      const list = this.el.querySelector(`#bcm-list-${this._id}`);
+      if (list) {
+        document.body.appendChild(list);
+      }
+    }
   }
-  handleChange(e) {
-    if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
-      e.stopImmediatePropagation();
+  disconnectedCallback() {
+    listState.removeState(this._id);
+    if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+      const list = document.querySelector(`#bcm-list-${this._id}`);
+      if (list) {
+        document.body.removeChild(list);
+      }
     }
   }
   handleValueChange(newVal, oldVal) {
@@ -140,9 +132,6 @@ export class BcmList {
       this.handleIndeterminate(this.value.length, this.totalData);
     }
   }
-  handleIndeterminate(checkeds, total) {
-    this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? checkeds === total ? 'check' : 'indeterminate' : 'uncheck', checked: this.checkboxes && checkeds > 0 ? checkeds === total ? true : false : false });
-  }
   handleOtherSelected(newValue) {
     var _a;
     const tagContent = (_a = document.getElementById(`bcm-list-input-tag-${this._id}-other-tag`)) === null || _a === void 0 ? void 0 : _a.querySelector(".bcm-tag__content");
@@ -155,14 +144,28 @@ export class BcmList {
       }
     }
   }
+  async handleOpen() {
+    if (this.isOpen) {
+      this.onSelectSearch();
+    }
+    else {
+      this.unSelectOther();
+    }
+  }
+  async dataChanged(newValue, oldValue) {
+    if (!Validators.compareTwoArrayIsSame(newValue, oldValue)) {
+      await this.initState();
+    }
+  }
+  handleChange(e) {
+    if (e.target.id == `bcm-list-input-tag-container-${this._id}-autocomplete-input`) {
+      e.stopImmediatePropagation();
+    }
+  }
   handleResize() {
     this.calculateLocation();
     this.debounceHandler();
   }
-  listenResize() {
-    this.tagControl();
-    this.calculateLocation();
-  }
   handleClick(event) {
     if (this.disabled)
       return;
@@ -207,37 +210,6 @@ export class BcmList {
       }
     }
   }
-  async handleOpen() {
-    if (this.isOpen) {
-      this.calculateLocation();
-      this.onSelectSearch();
-    }
-    else {
-      this.unSelectOther();
-    }
-  }
-  unSelectOther() {
-    this.onClearSearch();
-    this.isSelectedOther = false;
-    this.returnFilterData = {};
-    this.isOpen = false;
-  }
-  async onClearSearch() {
-    const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
-    if (searchInput) {
-      await searchInput.handleClear();
-    }
-    return Promise.resolve();
-  }
-  onSelectSearch() {
-    const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
-    if (searchInput) {
-      setTimeout(() => {
-        searchInput.onBcmFocus();
-        searchInput.onBcmSelect();
-      }, 100);
-    }
-  }
   async onDismiss(event) {
     const { itemObject } = event.detail;
     const isOtherTag = Array.isArray(itemObject);
@@ -278,23 +250,6 @@ export class BcmList {
     this.onSelectSearch();
     this.markForCheck();
   }
-  otherTagIds() {
-    const otherTag = document.querySelector(`#bcm-list-input-tag-${this._id}-other-tag`);
-    if (otherTag) {
-      return otherTag.itemObject;
-    }
-  }
-  async filterOtherList(itemObject) {
-    const ids = itemObject.map(item => item.id);
-    const checklist = (await this.getCheckedList()).nestedResult;
-    const filter = Generate.convertIdsToNestedData(ids, checklist);
-    this.returnFilterData = await listState.filterData(this._id, filter, null, true);
-    this.searchFound = ids.length || 0;
-    this.limit = 500;
-    this.searchGetParents = null;
-    await delay(1000);
-    this.markForCheck();
-  }
   bcmOnSearchClear(event) {
     var _a, _b;
     if (this.type == 'autocomplete') {
@@ -335,9 +290,43 @@ export class BcmList {
       this.markForCheck();
     }
   }
-  async dataChanged(newValue, oldValue) {
-    if (!Validators.compareTwoArrayIsSame(newValue, oldValue)) {
-      await this.initState();
+  //keyboard navigation
+  handleKeyDown(ev) {
+    const keycode = ev.keyCode || ev.which;
+    if (keycode === Bcm.KeyCode.escape) {
+      if (this.isOpen) {
+        this.isOpen = false;
+        ev.preventDefault();
+        ev.stopPropagation();
+        ev.stopImmediatePropagation();
+      }
+    }
+    if (this.keyControl) {
+      const keyboard = new ListKeyControl(keycode, this.el);
+      keyboard.keydown();
+    }
+  }
+  handleKeyUp(ev) {
+    if (this.keyControl) {
+      const focusedList = Generate.findEventPath(ev, this.el);
+      if (focusedList) {
+        const list = document.getElementById(`bcm-list-${this._id}`);
+        if (list) {
+          const items = list.querySelectorAll('.bcm-list__item.focused');
+          if (items.length > 0) {
+            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);
+            }
+          }
+        }
+      }
     }
   }
   async getCheckedList() {
@@ -352,7 +341,7 @@ export class BcmList {
   async addChecked(ids = [], save = false) {
     if (ids && ids.length > 0) {
       if (!save) {
-        this.setClear();
+        await this.setClear();
       }
       listState.addChecked(this._id, ids);
       this.value = (await this.getCheckedList()).checkedList;
@@ -388,6 +377,62 @@ export class BcmList {
     await delay(10);
     return Promise.resolve();
   }
+  async show() {
+    this.isOpen = true;
+    return Promise.resolve();
+  }
+  async hide() {
+    this.isOpen = false;
+    return Promise.resolve();
+  }
+  updateOptions() {
+    listState.updateOptions(this._id, this);
+  }
+  handleIndeterminate(checkeds, total) {
+    this.selectAllItem = Object.assign(Object.assign({}, this.selectAllItem), { indeterminate: this.checkboxes && checkeds > 0 ? checkeds === total ? 'check' : 'indeterminate' : 'uncheck', checked: this.checkboxes && checkeds > 0 ? checkeds === total ? true : false : false });
+  }
+  listenResize() {
+    this.tagControl();
+    this.calculateLocation();
+  }
+  async unSelectOther() {
+    await this.onClearSearch();
+    this.isSelectedOther = false;
+    this.returnFilterData = {};
+    this.isOpen = false;
+  }
+  async onClearSearch() {
+    const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
+    if (searchInput) {
+      await searchInput.handleClear();
+    }
+    return Promise.resolve();
+  }
+  async onSelectSearch() {
+    const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
+    if (searchInput) {
+      await delay(10);
+      searchInput.onBcmFocus();
+      searchInput.onBcmSelect();
+    }
+  }
+  otherTagIds() {
+    const otherTag = document.querySelector(`#bcm-list-input-tag-${this._id}-other-tag`);
+    if (otherTag) {
+      return otherTag.itemObject;
+    }
+  }
+  async filterOtherList(itemObject) {
+    const ids = itemObject.map(item => item.id);
+    const checklist = (await this.getCheckedList()).nestedResult;
+    const filter = Generate.convertIdsToNestedData(ids, checklist);
+    this.returnFilterData = await listState.filterData(this._id, filter, null, true);
+    this.searchFound = ids.length || 0;
+    this.limit = 500;
+    this.searchGetParents = null;
+    await delay(1000);
+    this.markForCheck();
+  }
   async initState() {
     await listState.setValue({
       id: this._id,
@@ -426,24 +471,21 @@ export class BcmList {
     listState.openGroup(this._id, parentId);
     this.markForCheck();
   }
-  async checkedItem(itemId) {
-    const isCheckSelectAll = itemId === 'select-all';
-    if (!isCheckSelectAll) {
-      listState.checkedItem(this._id, itemId);
-    }
-    else {
-      listState.selectAll(this._id, !this.selectAllItem.checked);
+  focusItem(e) {
+    if (e.target.classList.contains('bcm-list__item')) {
+      const item = e.target;
+      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) {
+            selectedItem.classList.remove('focused');
+          }
+          item.classList.add('focused');
+        }
+      }
     }
-    this.value = (await this.getCheckedList()).checkedList;
-    this.changeVisibleCheckeds();
-    this.markForCheck();
-  }
-  changeVisibleCheckeds() {
-    const { visibledItems } = this.returnFilterData;
-    this.returnFilterData = {
-      visibledItems,
-      checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || []
-    };
   }
   async selectedItem(itemId) {
     this.value = listState.selectedItem(this._id, itemId);
@@ -463,6 +505,25 @@ export class BcmList {
     }
     return Promise.resolve(this.value);
   }
+  async checkedItem(itemId) {
+    const isCheckSelectAll = itemId === 'select-all';
+    if (!isCheckSelectAll) {
+      listState.checkedItem(this._id, itemId);
+    }
+    else {
+      listState.selectAll(this._id, !this.selectAllItem.checked);
+    }
+    this.value = (await this.getCheckedList()).checkedList;
+    this.changeVisibleCheckeds();
+    this.markForCheck();
+  }
+  changeVisibleCheckeds() {
+    const { visibledItems } = this.returnFilterData;
+    this.returnFilterData = {
+      visibledItems,
+      checkedItems: (visibledItems && visibledItems.filter(item => item.checked)) || []
+    };
+  }
   getAutoCompleteInput() {
     return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
   }
@@ -485,7 +546,14 @@ export class BcmList {
     if (this.isOpen) {
       var placement = this.placement;
       const list = document.getElementById(`bcm-list-${this._id}`);
-      const targetElement = document.getElementById(`bcm-list-input-${this._id}`);
+      // if (this.linkedComponent) {
+      //     const linked = document.getElementById(this.linkedComponent)
+      //     if (linked) {
+      //         console.dir(linked)
+      //     }
+      // }
+      const targetElementId = this.linkedComponent ? this.linkedComponent : `bcm-list-input-${this._id}`;
+      const targetElement = document.getElementById(targetElementId);
       if (list && targetElement) {
         getPlacement(list, targetElement, placement, (place) => placement = place);
         const pos = setPosition(placement, targetElement);
@@ -612,110 +680,6 @@ export class BcmList {
       }
     }
   }
-  //keyboard navigation
-  handleKeyDown(ev) {
-    //esc isopen false
-    const keycode = ev.keyCode || ev.which;
-    if (keycode === Bcm.KeyCode.escape) {
-      if (this.isOpen) {
-        this.isOpen = false;
-        ev.preventDefault();
-        ev.stopPropagation();
-        ev.stopImmediatePropagation();
-      }
-    }
-    if (this.keyControl) {
-      const focusedList = Generate.findEventPath(ev, this.el);
-      if (focusedList) {
-        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 if (ev.key === 'ArrowUp') {
-                    if (selectedIndex > 0) {
-                      items[selectedIndex - 1].focus();
-                    }
-                  }
-                  else if (ev.key === 'Enter') {
-                    this.selectedItem(selectedItem.id);
-                  }
-                }
-                else {
-                  items[0].focus();
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  handleKeyUp(ev) {
-    if (this.keyControl) {
-      const focusedList = Generate.findEventPath(ev, this.el);
-      if (focusedList) {
-        const list = document.getElementById(`bcm-list-${this._id}`);
-        if (list) {
-          const items = list.querySelectorAll('.bcm-list__item.focused');
-          if (items.length > 0) {
-            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);
-            }
-          }
-        }
-      }
-    }
-  }
-  focusItem(e) {
-    if (e.target.classList.contains('bcm-list__item')) {
-      const item = e.target;
-      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) {
-            selectedItem.classList.remove('focused');
-          }
-          item.classList.add('focused');
-        }
-      }
-    }
-  }
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
     const hostClasses = cs('bcm-list', `bcm-list__size-${size}`, size === 'large' ? 'size-3' : 'size-2', {
@@ -725,7 +689,7 @@ export class BcmList {
       readonly,
       disabled
     });
-    const bcmListContainer = cs('bcm-list__container', `bcm-list__type-${this.type}`, {
+    const bcmListContainer = cs('bcm-list__container', this.linkedComponent ? 'bcm-list__type-linked-component' : `bcm-list__type-${this.type}`, {
       'is-open': this.isOpen,
       'error': this.captionType == Bcm.Status.error,
       'full-width': fullWidth,
@@ -780,9 +744,14 @@ export class BcmList {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'listbox' | 'select' | 'autocomplete'",
+        "original": "ListTypes",
         "resolved": "\"autocomplete\" | \"listbox\" | \"select\"",
-        "references": {}
+        "references": {
+          "ListTypes": {
+            "location": "import",
+            "path": "../../../models/bcm-types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -792,7 +761,7 @@ export class BcmList {
       },
       "attribute": "type",
       "reflect": false,
-      "defaultValue": "'listbox'"
+      "defaultValue": "Bcm.ListType.listbox"
     },
     "treeview": {
       "type": "boolean",
@@ -1601,6 +1570,38 @@ export class BcmList {
         "text": "",
         "tags": []
       }
+    },
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }