bromcom-ui 2.4.12 → 2.4.15

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,36 +210,6 @@ export class BcmList {
       }
     }
   }
-  async handleOpen() {
-    if (this.isOpen) {
-      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);
@@ -277,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') {
@@ -334,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() {
@@ -351,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;
@@ -387,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,
@@ -425,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);
@@ -462,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`);
   }
@@ -484,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);
@@ -611,114 +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) {
-        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);
-                }
-              }
-              else {
-                items[0].focus();
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  handleKeyUp(ev) {
-    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);
-          }
-        }
-      }
-    }
-  }
-  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', {
@@ -728,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,
@@ -783,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,
@@ -795,7 +761,7 @@ export class BcmList {
       },
       "attribute": "type",
       "reflect": false,
-      "defaultValue": "'listbox'"
+      "defaultValue": "Bcm.ListType.listbox"
     },
     "treeview": {
       "type": "boolean",
@@ -1604,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"; }

package/dist/collection/helper/generate.js

@@ -1,4 +1,14 @@
 import { StatusProps } from "../components/molecules/alert/types";
+// @ts-ignore
+import { version } from "../../package.json";
+//console.log versiyon
+console.log(`%c Bromcom ui component library version: ${version} `, `background: #1890FF; 
+text-shadow: 0 0 2px #000000;
+color: #fff; 
+line-height: 40px; 
+font-size: 13px; 
+padding: 0 20px; 
+border-radius: 6px; `);
 export class Generate {
 }
 Generate.UID = () => Math.random().toString(36).substr(2, 9);

package/dist/collection/models/bcm.js

@@ -447,5 +447,11 @@ export var Bcm;
     TriggerType["click"] = "click";
     TriggerType["focus"] = "focus";
   })(TriggerType = Bcm.TriggerType || (Bcm.TriggerType = {}));
+  let ListType;
+  (function (ListType) {
+    ListType["listbox"] = "listbox";
+    ListType["select"] = "select";
+    ListType["autocomplete"] = "autocomplete";
+  })(ListType = Bcm.ListType || (Bcm.ListType = {}));
 })(Bcm || (Bcm = {}));
 export default Bcm;

package/dist/collection/templates/list-item-template.js

@@ -15,12 +15,13 @@ export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size,
     intersection = match.filter(x => keys.includes(x));
   }
   text = item.template && intersection.length > 1 ? StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
-  return (h("div", { onFocus: (e) => focusItem(e), class: cs("bcm-list__item", size === 'large' ? 'size-3' : 'size-2'), id: item.id, hidden: item.hidden, tabindex: "-1" },
-    h("div", { class: cs('bcm-list__item-content', !checkboxes && item.selected == true && ('selected')) },
+  const disabled = item.disabled;
+  return (h("div", { id: item.id, hidden: item.hidden, tabindex: "-1", "on-focus": (e) => !disabled && (focusItem(e)), class: cs("bcm-list__item", size === 'large' ? 'size-3' : 'size-2') },
+    h("div", { class: cs('bcm-list__item-content', !checkboxes && item.selected == true && ('selected'), { 'disabled': disabled }) },
       treeview && (h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => { item.open = item.isSearching; openGroup(item.id); } }, isHaveChildren && (h("i", { class: cs('bcm-fas bcm-fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) })))),
-      h("div", { class: cs('bcm-list__item-content-text', { treeview }), onClick: () => !checkboxes && selectedItem(item.id) },
-        checkboxes && (h("div", { class: "bcm-list__item-content-text-checkbox", onClick: () => checkedItem(item.id) },
+      h("div", { class: cs('bcm-list__item-content-text', { treeview }), onClick: () => !checkboxes && !disabled && (selectedItem(item.id)) },
+        checkboxes && (h("div", { class: "bcm-list__item-content-text-checkbox", onClick: () => !disabled && (checkedItem(item.id)) },
           h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked }))),
         h("span", { class: "bcm-list__item-content-text-inner", innerHTML: text }))),
-    treeview && isHaveChildren && (h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open) && item.items.map((item) => (h(ListItemTemplate, { highlight: highlight, item: item, treeview: treeview, checkboxes: checkboxes, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: (parentId) => openGroup(parentId) })))))));
+    treeview && isHaveChildren && (h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open) && item.items.map((item) => (h(ListItemTemplate, { highlight: highlight, item: item, treeview: treeview, checkboxes: checkboxes, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: (parentId) => openGroup(parentId), focusItem: (itemId) => focusItem(itemId) })))))));
 };

package/dist/collection/utils/popover-placement.js

@@ -43,12 +43,11 @@ export const getPlacement = async (box, host, placement, changePlacement) => {
   }
 };
 export const setPosition = (placement, target) => {
-  const { offsetTop, offsetHeight, offsetWidth, offsetLeft } = target;
   const rect = target.getBoundingClientRect();
-  const top = offsetTop || (rect.top + window.pageYOffset);
-  const left = offsetLeft || (rect.left + window.pageXOffset);
-  const height = offsetHeight || rect.height;
-  const width = offsetWidth || rect.width;
+  const top = (rect.top + window.pageYOffset);
+  const left = (rect.left + window.pageXOffset);
+  const height = rect.height;
+  const width = rect.width;
   const places = StringHelper.textContains(placement, '-') ? placement.split('-') : placement.split(' ');
   switch (places[0]) {
     case 'left':

package/dist/esm/{bcm-0d5f0281.js → bcm-1571bb45.js}

@@ -447,6 +447,12 @@ var Bcm;
     TriggerType["click"] = "click";
     TriggerType["focus"] = "focus";
   })(TriggerType = Bcm.TriggerType || (Bcm.TriggerType = {}));
+  let ListType;
+  (function (ListType) {
+    ListType["listbox"] = "listbox";
+    ListType["select"] = "select";
+    ListType["autocomplete"] = "autocomplete";
+  })(ListType = Bcm.ListType || (Bcm.ListType = {}));
 })(Bcm || (Bcm = {}));
 const Bcm$1 = Bcm;