bromcom-ui 2.4.29 → 2.4.32

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

@@ -9,10 +9,12 @@ import cs from 'classnames';
 import snq from 'snq';
 import { JsonParse } from '../../../decorators/json-parse-decarator';
 import { Generate } from '../../../helper/generate';
+import { NumberHelper } from '../../../helper/number-helper';
 import { StringHelper } from '../../../helper/string-helper';
 import { Validators } from '../../../helper/validators';
 import Bcm from '../../../models/bcm';
 import { CaptionTemplate } from '../../../templates/caption-template';
+import { LabelTemplate } from '../../../templates/label-template';
 import { ListTemplate } from '../../../templates/list-template';
 import { getPlacement, setPosition } from '../../../utils/popover-placement';
 import { delay, pluralize } from '../../../utils/utils';
@@ -37,6 +39,8 @@ export class BcmList {
     this.hidden = false;
     this.fullWidth = false;
     this.height = "256px";
+    this.maxHeight = "500px";
+    this.minHeight = "100px";
     this.width = "256px";
     this.infoFooter = false;
     this.variableText = 'item';
@@ -187,6 +191,15 @@ export class BcmList {
     this.calculateLocation();
     this.debounceHandler();
   }
+  //mouse wheel event
+  handleWheel() {
+    if (this.isOpen) {
+      if (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent) {
+        this.calculateLocation();
+        this.debounceHandler();
+      }
+    }
+  }
   handleClick(event) {
     var _a;
     if (this.disabled)
@@ -304,6 +317,7 @@ export class BcmList {
         }
         else {
           this.returnFilterData = {};
+          listState.filterData(this._id, null);
         }
         // this.isSelectedOther = false
         this.searchResultLimit = null;
@@ -433,7 +447,7 @@ export class BcmList {
   async onSelectSearch() {
     const searchInput = document.getElementById(`bcm-list-${this._id}-search`);
     if (searchInput) {
-      await delay(10);
+      await delay(100);
       searchInput.onBcmFocus();
       searchInput.onBcmSelect();
     }
@@ -456,10 +470,10 @@ export class BcmList {
     this.markForCheck();
   }
   async initState() {
-    var _a;
+    var _a, _b, _c;
     await listState.setValue({
       id: this._id,
-      dataSource: this.data,
+      dataSource: this.data && snq(() => typeof this.data == 'string' ? JSON.parse(this.data) : this.data, []),
       options: this
     });
     const { totalRoots, totalItems } = listState.getValue(this._id);
@@ -468,11 +482,20 @@ export class BcmList {
     this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
     // value && value.length > 0 && (this.value = value)
     if (this.checkboxes) {
+      await delay(100);
       this.tagControl();
     }
     else {
       this.inputText = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
     }
+    const checkedIDs = [];
+    ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.value.forEach(item => {
+      if (!item.items || item.items.length === 0) {
+        checkedIDs.push(item.id);
+      }
+    });
+    await this.addChecked(checkedIDs);
+    await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
     await this.markForCheck();
   }
   markForCheck() {
@@ -570,6 +593,8 @@ export class BcmList {
     io.observe(event.target.lastElementChild);
   }
   calculateLocation() {
+    const list = document.getElementById(`bcm-list-${this._id}`);
+    list && (list.style.height = '256px');
     if (this.isOpen) {
       var placement = this.placement;
       const list = document.getElementById(`bcm-list-${this._id}`);
@@ -589,6 +614,14 @@ export class BcmList {
         if (this.fullWidth) {
           list.style.width = targetElement.offsetWidth + "px";
         }
+        if (this.height.indexOf('%') > -1) {
+          list.style.height = NumberHelper.toNumber(this.height.replace('%', '')) * 0.01 * window.innerHeight - pos[0] - 50 + "px";
+        }
+        else {
+          list.style.height = this.height;
+        }
+        list.style.minHeight = "156px";
+        list.style.maxHeight = window.innerHeight - pos[0] - 50 + 'px';
       }
     }
   }
@@ -614,7 +647,7 @@ export class BcmList {
         var tags = [];
         var i = 0;
         let itemsWidth = 0;
-        if (this.value != null && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        if (this.value && this.value.length > 0) {
           var BreakException = {};
           try {
             for (const item of this.value) {
@@ -649,10 +682,8 @@ export class BcmList {
           tags.forEach(tag => {
             tagContainerArea.appendChild(tag);
           });
-        }
-        if (this.value && this.value.length > 0) {
-          const otherTag = this.value.slice(i);
-          if (otherTag.length > 0) {
+          const otherTag = (_a = this.value) === null || _a === void 0 ? void 0 : _a.slice(i);
+          if ((otherTag === null || otherTag === void 0 ? void 0 : otherTag.length) > 0) {
             var otherText, otherElement, BreakException = {};
             try {
               const removeItems = async () => {
@@ -664,7 +695,8 @@ export class BcmList {
                     otherTag.push(item.itemObject);
                     otherText = `${otherTag.length} ${pluralize('item', otherTag.length)} selected`;
                     otherElement = await this.createTag({ id: 'other-tag', text: otherText });
-                    if (otherElement.offsetWidth > (tagContainerWidth - itemsWidth)) {
+                    await delay(10);
+                    if (otherElement.offsetWidth + 20 > (tagContainerWidth - itemsWidth)) {
                       itemsWidth -= item.offsetWidth + 4;
                       item.remove();
                       await removeItems();
@@ -711,7 +743,6 @@ export class BcmList {
     }
   }
   render() {
-    var _a;
     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', {
       'error': this.captionType == Bcm.Status.error,
@@ -729,14 +760,21 @@ export class BcmList {
       disabled
     });
     const bcmListInput = cs('bcm-list__input');
-    return (h(Host, { class: hostClasses, tabindex: "0" },
+    const openedType = (this.type == 'select' || this.type == 'autocomplete' || this.linkedComponent);
+    return (h(Host, { class: hostClasses, tabindex: "0", style: {
+        '--width': fullWidth ? '100%' : this.width,
+        '--height': openedType ? '100%' : this.height,
+        '--max-height': openedType ? 'inherit' : this.maxHeight,
+        '--min-height': openedType ? 'inherit' : this.minHeight,
+      } },
       h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label &&
         h("div", null,
-          h("bcm-label", { type: this.captionType, value: label, required: required, htmlFor: this._id }))),
+          h(LabelTemplate, { type: this.captionType, value: label, required: required, htmlFor: this._id }))),
       this.type == 'select' && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput },
         h("span", { class: "bcm-list__input-container" },
           this.checkboxes && (h("span", { id: `bcm-list-input-tag-container-${this._id}`, class: "bcm-list__input-tag-container" })),
-          (!this.checkboxes || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) == 0 || !this.value) && (this.inputText || h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))),
+          this.checkboxes && !this.value && (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder)),
+          !this.checkboxes && (this.value ? this.inputText : h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))),
         h("span", { class: "bcm-list__input-buttons" },
           this.clearable && this.value && h("i", { class: "bcm-fal bcm-fa-times", onClick: (e) => this.setClear(e) }),
           h("i", { class: `bcm-fas bcm-fa-caret-${this.isOpen ? 'up' : 'down'}` })))),
@@ -1084,6 +1122,42 @@ export class BcmList {
       "reflect": false,
       "defaultValue": "\"256px\""
     },
+    "maxHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max-height",
+      "reflect": false,
+      "defaultValue": "\"500px\""
+    },
+    "minHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-height",
+      "reflect": false,
+      "defaultValue": "\"100px\""
+    },
     "width": {
       "type": "string",
       "mutable": false,
@@ -1708,6 +1782,12 @@ export class BcmList {
       "target": "window",
       "capture": false,
       "passive": true
+    }, {
+      "name": "wheel",
+      "method": "handleWheel",
+      "target": "window",
+      "capture": false,
+      "passive": true
     }, {
       "name": "click",
       "method": "handleClick",

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

@@ -692,18 +692,20 @@ export class BcmListbox {
               this.allChilds.map((item) => {
                 if (this.highlight) {
                   event.target.addEventListener('bcm-on-search-value', async (e) => {
-                    searchValue = await e.detail;
                     var inputText = item.shadowRoot.getElementById("text");
-                    inputText = (inputText === null || inputText === void 0 ? void 0 : inputText.textContent) || (inputText === null || inputText === void 0 ? void 0 : inputText.innerText) || "";
-                    if (searchValue) {
-                      var cacheInputText = lowercase(inputText);
-                      var cacheSearchValue = lowercase(searchValue);
-                      var index = cacheInputText.indexOf(cacheSearchValue);
-                      if (index >= 0) {
-                        inputText = inputText.substring(0, index) + "<span class='highlight'>" + inputText.substring(index, index + searchValue.length) + "</span>" + inputText.substring(index + searchValue.length);
+                    if (inputText) {
+                      searchValue = await e.detail;
+                      inputText = (inputText === null || inputText === void 0 ? void 0 : inputText.textContent) || (inputText === null || inputText === void 0 ? void 0 : inputText.innerText) || "";
+                      if (searchValue) {
+                        var cacheInputText = lowercase(inputText);
+                        var cacheSearchValue = lowercase(searchValue);
+                        var index = cacheInputText.indexOf(cacheSearchValue);
+                        if (index >= 0) {
+                          inputText = inputText.substring(0, index) + "<span class='highlight'>" + inputText.substring(index, index + searchValue.length) + "</span>" + inputText.substring(index + searchValue.length);
+                        }
                       }
+                      item.shadowRoot.getElementById("text").innerHTML = inputText;
                     }
-                    item.shadowRoot.getElementById("text").innerHTML = inputText;
                   });
                 }
                 item.hidden = true;

package/dist/collection/components/organism/states/bcm-list2.states.js

@@ -10,7 +10,7 @@ const setValue = (val) => {
   const itemOptions = { size, checkboxes, template, favIcon, showIcon, allOpen, highlight, treeview };
   const data = {
     id: snq(() => id, Generate.UID),
-    dataSource: recursive(dataSource, itemOptions),
+    dataSource: dataSource && dataSource.length > 0 && (recursive(dataSource, itemOptions)),
     options: {
       value,
       size,
@@ -46,7 +46,10 @@ const setValue = (val) => {
   state.value.set(data.id, data);
 };
 const recursive = (data, options, parentId) => {
-  const recData = data.map((item) => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: parentId || null, open: options.allOpen || item.open || false }), ((options.treeview && item.items) ? { items: snq(() => recursive(item.items, options, item.id), []) } : { items: [] }))));
+  let recData = [];
+  if (data && data.length > 0) {
+    recData = data.map((item) => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: parentId || null, open: options.allOpen || item.open || false }), ((options.treeview && item.items && item.items.length > 0) ? { items: snq(() => recursive(item.items, options, item.id), []) } : { items: [] }))));
+  }
   return recData;
 };
 const removeValue = (_id) => {
@@ -151,7 +154,7 @@ const addChecked = (id, ids) => {
   const value = getValue(id);
   if (value) {
     ids.forEach((item) => {
-      checkedItem(id, item);
+      checkedItem(id, item.toString());
     });
   }
 };
@@ -170,7 +173,7 @@ const findItem = (id, itemId, items) => {
   }
   if (dataSource) {
     dataSource.forEach((item) => {
-      if (itemId.includes(item.id)) {
+      if (itemId.includes(item.id.toString())) {
         checkedProcess(id, item);
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
@@ -281,6 +284,9 @@ const filterData = (id, ids, items, searchOtherTag) => {
       }
       else {
         item.hidden = false;
+        if (item.items) {
+          filterData(id, null, item.items);
+        }
         visibled.push(item);
         item.isSearching = false;
       }

package/dist/collection/helper/generate.js

@@ -1,14 +1,20 @@
 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; `);
+import { Build } from '@stencil/core';
+const allowedDomains = [
+  "localhost",
+  "beta-regression.bromcomcloud.com",
+  "beta-scrum.bromcomcloud.com",
+  "beta-kanban.bromcomcloud.com"
+];
+const isAllowedDomain = () => {
+  const hostname = window.location.hostname;
+  return allowedDomains.includes(hostname);
+};
+if (isAllowedDomain()) {
+  console.log(`%cbromcom ui%c version: ${version}-${Build.isDev ? 'd' : 'p'} `, `color: white; background:#1890FF; font-weight: 300;  font-size:10px;  padding:2px 6px;  border-radius: 5px`, `font-size:10px;`);
+}
 export class Generate {
 }
 Generate.UID = () => Math.random().toString(36).substr(2, 9);
@@ -39,6 +45,7 @@ Generate.createComponent = (el, props) => {
   if (!element) {
     element = document.createElement(el);
   }
+  // debugger;
   Object.keys(props).forEach(key => {
     element[key] = props[key];
   });

package/dist/collection/helper/number-helper.js

@@ -8,3 +8,4 @@ NumberHelper.replaceFloat = (str) => snq(() => str.replace(/[^0-9.]/g, ''));
 NumberHelper.toFixed = (num, fixed) => snq(() => num.toFixed(fixed));
 NumberHelper.parseFloatFixed = (str, fixed) => snq(() => parseFloat(NumberHelper.replaceFloat(str)).toFixed(fixed));
 NumberHelper.getDecimalLength = (str) => snq(() => str.split('.')[1] ? str.split('.')[1].length : 0);
+NumberHelper.toNumber = (str) => snq(() => Number(str.replace(/[^0-9.]/g, '')));

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

@@ -16,12 +16,12 @@ export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size,
   }
   text = item.template && intersection.length > 1 ? StringHelper.templateParser(item.template, Object.assign(Object.assign({}, item.itemObject), { text })) : text;
   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') },
+  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', "bcm-list__item-" + size) },
     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: () => !disabled && (checkboxes ? checkedItem(item.id) : selectedItem(item.id)) },
         checkboxes && (h("div", { class: "bcm-list__item-content-text-checkbox" },
           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), focusItem: (itemId) => focusItem(itemId) })))))));
+    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, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: (parentId) => openGroup(parentId), focusItem: (itemId) => focusItem(itemId) })))))));
 };

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

@@ -3,9 +3,9 @@ import { InfoFooterTemplate } from './info-footer-template';
 import { ListItemTemplate } from './list-item-template';
 export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, data, width, height, size, searchPlaceholder, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable }) => {
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
-  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--width': width, '--height': height } },
+  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, style: { '--height': height, '--width': width } },
     searchable && (h("section", { class: "bcm-list__container-search" },
-      h("bcm-search-2", { id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder }))),
+      h("bcm-search-2", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder }))),
     h("main", { onScroll: (e) => onScrollEvent(e), class: "scrolling" },
       checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (h("section", { class: "bcm-list__container-select-all" },
         h(ListItemTemplate, { size: size, item: selectAllItem, treeview: false, checkboxes: true, selectedItem: (itemId) => selectedItem(itemId), checkedItem: (itemId) => checkedItem(itemId), openGroup: (parentId) => openGroup(parentId), focusItem: (itemId) => focusItem(itemId) }))),