bromcom-ui 2.12.3 → 2.12.4-rc.0

package/dist/cjs/{bcm-list_3.cjs.entry.js → bcm-icon_6.cjs.entry.js}

@@ -6,62 +6,127 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-c591ecec.js');
+const index = require('./index-c591ecec.js');
 const isLoadDecorator = require('./is-load-decorator-15036f37.js');
-const jsonParseDecarator = require('./json-parse-decarator-f1c0961d.js');
+const generate = require('./generate-b55bc9ac.js');
+const bcm = require('./bcm-489c9b1a.js');
+const labelTemplate = require('./label-template-6da4808b.js');
+const jsonParseDecarator = require('./json-parse-decarator-ca73e0ee.js');
 require('./color-helper-dc98a2ca.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-b43c3d3b.js');
-const numberHelper = require('./number-helper-a708fa79.js');
-const stringHelper = require('./string-helper-9cdfb273.js');
-const validators = require('./validators-84d8ae28.js');
+const numberHelper = require('./number-helper-4a5c0bb5.js');
+const stringHelper = require('./string-helper-f9184277.js');
+const validators = require('./validators-51a16def.js');
 require('./element-dragger-a8562f82.js');
-const popoverPlacement = require('./popover-placement-02e6101b.js');
+const popoverPlacement = require('./popover-placement-e7d6eabd.js');
 const utils = require('./utils-fc077139.js');
-const bcm = require('./bcm-1d1fcf21.js');
 const captionTemplate = require('./caption-template-85a18b6d.js');
-const index = require('./index-95ae50d0.js');
+const index$1 = require('./index-95ae50d0.js');
 require('./types-cc4adee7.js');
 require('./types-7523fd99.js');
 const index$2 = require('./index-d321de96.js');
-const Overflow = require('./Overflow-5a73947b.js');
+const Overflow = require('./Overflow-ebad34dd.js');
 const index$3 = require('./index-e05a7c6f.js');
-const inputTemplate = require('./input-template-ccfbe214.js');
-require('./colors-56282b00.js');
+const inputTemplate = require('./input-template-4f41f5f2.js');
+const tooltipHelper = require('./tooltip-helper-a45a6cd4.js');
+require('./package-1757d4e0.js');
 require('./colors-250d0982.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-033055fc.js');
+require('./colors-56282b00.js');
+require('./floating-ui-21890d11.js');
+
+const iconCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-icon.hidden{display:none}";
+
+const customIconList = {
+  "message-bot": "message-bot.svg",
+};
+const BcmIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.hidden = false;
+    this.icon = undefined;
+  }
+  getIcon() {
+    const { icon } = this;
+    if (icon in customIconList) {
+      const _icon = index.getAssetPath("./static/" + customIconList[icon]);
+      return (index.h("div", { class: "tw-flex tw-h-fit tw-w-fit tw-items-center tw-justify-center" }, index.h("img", { src: `${_icon}`, alt: icon, class: "tw-h-fit tw-w-fit" })));
+    }
+    return index.h("i", { class: `${icon}` });
+  }
+  render() {
+    const { /*icon,*/ hidden } = this;
+    return index.h(index.Host, { class: `bcm-icon fa ${hidden ? "hidden" : ""}` }, this.getIcon());
+  }
+  static get assetsDirs() { return ["static"]; }
+  get el() { return index.getElement(this); }
+};
+BcmIcon.style = iconCss;
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmLabel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this._id = generate.Generate.UID();
+    this.required = false;
+    this.value = undefined;
+    this.label = undefined;
+    this.size = "medium";
+    this.form = undefined;
+    this.htmlFor = undefined;
+    this.hidden = false;
+    this.type = bcm.Bcm.Status.default;
+    this.tooltip = undefined;
+  }
+  render() {
+    const { required, value, label, size, form, htmlFor, type, tooltip } = this;
+    return (index.h(index.Host, { class: "tw-inline-block tw-leading-none" }, index.h(labelTemplate.LabelTemplate, { form: form, htmlFor: htmlFor, value: value || label, size: size, type: type, required: required, tooltip: tooltip })));
+  }
+  get el() { return index.getElement(this); }
+};
+__decorate$1([
+  isLoadDecorator.IsLoad()
+], BcmLabel.prototype, "el", void 0);
 
 const CheckboxTemplate = ({ disabled, checked, readonly, required, indeterminate, hidden, captionType, _id }) => {
   // if ( indeterminate ) {
   //   checked = indeterminate == 'determinate' ? true : false 
   // }
-  const hostClasses = index.classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
+  const hostClasses = index$1.classnames('bcm-checkbox', 'bcm-checkbox__type-default', `bcm-checkbox-size-medium`, {
     // 'size-2': size === Bcm.Size.small || size === Bcm.Size.medium,
     // 'size-3': optionType === 'button' && size === Bcm.Size.large,
-    'error': captionType == bcm.Bcm$1.Status.error,
+    'error': captionType == bcm.Bcm.Status.error,
     hidden,
     checked,
     disabled,
     required,
     readonly,
   });
-  const bcmCheckboxIconClass = index.classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
+  const bcmCheckboxIconClass = index$1.classnames('bcm-checkbox__label-icon', 'bcm-checkbox__label-icon-lite', 'bcm-checkbox__label-icon-' + indeterminate, {
     'bcm-checkbox__label-icon-checked': checked,
   });
-  const bcmCheckboxLabelClass = index.classnames('bcm-checkbox__label');
-  return (index$1.h("div", { class: hostClasses },
-    index$1.h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }),
-    index$1.h("label", { class: bcmCheckboxLabelClass, htmlFor: _id },
-      index$1.h("span", { class: bcmCheckboxIconClass },
-        index$1.h("bcm-icon", { icon: "far fa-check" })))));
+  const bcmCheckboxLabelClass = index$1.classnames('bcm-checkbox__label');
+  return (index.h("div", { class: hostClasses },
+    index.h("input", { tabindex: "-1", id: _id, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly }),
+    index.h("label", { class: bcmCheckboxLabelClass, htmlFor: _id },
+      index.h("span", { class: bcmCheckboxIconClass },
+        index.h("bcm-icon", { icon: "far fa-check" })))));
 };
 
 const InfoFooterTemplate = ({ selected, total, found, multiple, variableText }) => {
   total = total || 0;
   variableText = variableText ? utils.pluralize(variableText, total) : 'items';
-  return (index$1.h("footer", { class: "bcm-info-footer" },
-    index$1.h("bcm-text", { scale: "size-1", color: "grey-8" },
+  return (index.h("footer", { class: "bcm-info-footer" },
+    index.h("bcm-text", { scale: "size-1", color: "grey-8" },
       (multiple && selected > 0) && ` ( ${selected} selected ) `,
       ` Total ${total} `,
       found != null && ` / ${found} `,
@@ -106,20 +171,20 @@ const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size, selecte
     item.open = item.isSearching;
     openGroup(item.id);
   };
-  return (index$1.h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: index.classnames('bcm-list__item', 
+  return (index.h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: index$1.classnames('bcm-list__item', 
     // size === 'large' ? 'size-3' : 'size-2',
     'bcm-list__item-' + size, {
       'bcm-list__item--group': !treeview && item.type == 'group',
       'bcm-list__item--readonly': readonly,
     }) },
-    index$1.h("div", { class: index.classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }) },
-      treeview && (index$1.h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && index$1.h("bcm-icon", { icon: index.classnames('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
-      index$1.h("div", { class: index.classnames('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
-        checkboxes && (treeview || (!treeview && item.type != 'group')) && (index$1.h("div", { class: "bcm-list__item-content-text-checkbox" },
-          index$1.h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
-        index$1.h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: text })))),
-    (treeview || !treeview && item.type == "group") && isHaveChildren && (index$1.h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
-      item.items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
+    index.h("div", { class: index$1.classnames('bcm-list__item-content', !checkboxes && item.selected && 'selected', { disabled, readonly }) },
+      treeview && (index.h("div", { class: "bcm-list__item-content-collapse-icon", onClick: () => collapseClick() }, isHaveChildren && index.h("bcm-icon", { icon: index$1.classnames('fas fa-caret-' + (item.isSearching || item.open ? 'down' : 'right')) }))),
+      index.h("div", { class: index$1.classnames('bcm-list__item-content-text', { treeview }), onClick: (e) => itemClick(e) },
+        checkboxes && (treeview || (!treeview && item.type != 'group')) && (index.h("div", { class: "bcm-list__item-content-text-checkbox" },
+          index.h(CheckboxTemplate, { indeterminate: item.indeterminate, checked: item.checked, disabled: item.disabled }))),
+        index.h("span", Object.assign({ class: "bcm-list__item-content-text-inner" }, (item.title && { "title": item.title }), { innerHTML: text })))),
+    (treeview || !treeview && item.type == "group") && isHaveChildren && (index.h("div", { class: "bcm-list__item-childs" }, (item.isSearching || item.open || (!treeview && item.type == "group")) &&
+      item.items.map((item) => (index.h(ListItemTemplate, { highlight: highlight, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, size: size, selectedItem: selectedItem, checkedItem: checkedItem, openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) })))))));
 };
 
 const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treeview, checkboxes, checkAll, infoFooter, value, totalData, searchFound, variableText, _id, tempId, data, width, height, size, searchPlaceholder, minSearchLength, selectedItem, openGroup, checkedItem, onScrollEvent, focusItem, items, searchable, searchIsOnlyChilds, emptyText, emptyIcon, handleTransitionEnd, }) => {
@@ -130,21 +195,21 @@ const ListTemplate = ({ type, highlight, selectAllItem, bcmListContainer, treevi
     const scrollHeight = itemCount * itemHeight || 0;
     return Object.assign(Object.assign({ 'min-height': `${scrollHeight}px` }, (type === 'select' && { 'overscroll-behavior': 'none' })), { 'height': '100%', 'display': 'flex', 'flex-direction': 'column' });
   };
-  return (index$1.h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) },
-    data && searchable && (index$1.h("section", { class: "bcm-list__container-search" },
-      index$1.h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
-    index$1.h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) },
-      index$1.h("div", { style: setScrollHeight() },
-        checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (index$1.h("section", { class: "bcm-list__container-select-all" },
-          index$1.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) }))),
-        items.map((item) => (index$1.h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
-        (!items || items.length === 0) && searchFound != 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
-          index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
-            index$1.h("span", { innerHTML: emptyText || 'No data' })))),
-        searchFound == 0 && (index$1.h("section", { class: "bcm-list__container-no-data" },
-          index$1.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
-            index$1.h("span", { innerHTML: emptyText || 'No Data Found' })))))),
-    infoFooter && data && data.length > 0 && (index$1.h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
+  return (index.h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) },
+    data && searchable && (index.h("section", { class: "bcm-list__container-search" },
+      index.h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))),
+    index.h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) },
+      index.h("div", { style: setScrollHeight() },
+        checkAll && searchFound != 0 && items && items.length > 0 && checkboxes && showSelectAll && (index.h("section", { class: "bcm-list__container-select-all" },
+          index.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) }))),
+        items.map((item) => (index.h(ListItemTemplate, { highlight: highlight, size: size, item: item, searchIsOnlyChilds: searchIsOnlyChilds, treeview: treeview, checkboxes: checkboxes, selectedItem: itemId => selectedItem(itemId), checkedItem: itemId => checkedItem(itemId), openGroup: parentId => openGroup(parentId), focusItem: itemId => focusItem(itemId) }))),
+        (!items || items.length === 0) && searchFound != 0 && (index.h("section", { class: "bcm-list__container-no-data" },
+          index.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
+            index.h("span", { innerHTML: emptyText || 'No data' })))),
+        searchFound == 0 && (index.h("section", { class: "bcm-list__container-no-data" },
+          index.h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon },
+            index.h("span", { innerHTML: emptyText || 'No Data Found' })))))),
+    infoFooter && data && data.length > 0 && (index.h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
 };
 
 const { state: state$1 } = index$2.createStore({
@@ -832,22 +897,22 @@ class ListKeyControl extends KeyControl {
   }
   keyDown() {
     switch (this.getKeyCode()) {
-      case bcm.Bcm$1.KeyCode.up:
+      case bcm.Bcm.KeyCode.up:
         this.keyUpControl();
         break;
-      case bcm.Bcm$1.KeyCode.down:
+      case bcm.Bcm.KeyCode.down:
         this.keyDownControl();
         break;
-      case bcm.Bcm$1.KeyCode.left:
+      case bcm.Bcm.KeyCode.left:
         this.keyLeftControl();
         break;
-      case bcm.Bcm$1.KeyCode.right:
+      case bcm.Bcm.KeyCode.right:
         this.keyRightControl();
         break;
-      case bcm.Bcm$1.KeyCode.enter:
+      case bcm.Bcm.KeyCode.enter:
         this.keyEnterControl();
         break;
-      case bcm.Bcm$1.KeyCode.space:
+      case bcm.Bcm.KeyCode.space:
         this.keySpaceControl();
         break;
     }
@@ -869,19 +934,19 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const BcmList = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmChecklist = index$1.createEvent(this, "bcm-checklist", 7);
-    this.bcmSelected = index$1.createEvent(this, "bcm-selected", 7);
-    this.change = index$1.createEvent(this, "bcm-change", 7);
-    this.open = index$1.createEvent(this, "bcm-open", 3);
-    this.close = index$1.createEvent(this, "bcm-close", 3);
-    this.listClose = index$1.createEvent(this, "bcm-list-close", 7);
-    this.listOpen = index$1.createEvent(this, "bcm-list-open", 7);
+    index.registerInstance(this, hostRef);
+    this.bcmChecklist = index.createEvent(this, "bcm-checklist", 7);
+    this.bcmSelected = index.createEvent(this, "bcm-selected", 7);
+    this.change = index.createEvent(this, "bcm-change", 7);
+    this.open = index.createEvent(this, "bcm-open", 3);
+    this.close = index.createEvent(this, "bcm-close", 3);
+    this.listClose = index.createEvent(this, "bcm-list-close", 7);
+    this.listOpen = index.createEvent(this, "bcm-list-open", 7);
     this.debounce = null;
     this.debounceHandler = generate.Generate.debounceInput(() => this.listenResize(), 300, false);
     this._id = generate.Generate.UID();
     this.tempId = generate.Generate.UID();
-    this.type = bcm.Bcm.ListType.listbox;
+    this.type = bcm.Bcm$1.ListType.listbox;
     this.treeview = false;
     this.checkboxes = false;
     this.searchable = false;
@@ -889,7 +954,7 @@ const BcmList = class {
     this.inputText = undefined;
     this.name = undefined;
     this.label = undefined;
-    this.size = bcm.Bcm.Size.medium;
+    this.size = bcm.Bcm$1.Size.medium;
     this.disabled = false;
     this.readonly = false;
     this.highlight = false;
@@ -923,7 +988,7 @@ const BcmList = class {
     this.clearable = false;
     this.caption = undefined;
     this.noCaption = false;
-    this.captionType = bcm.Bcm.Status.default;
+    this.captionType = bcm.Bcm$1.Status.default;
     this.captionError = undefined;
     this.emptyText = undefined;
     this.emptyIcon = "fad fa-folder-open";
@@ -949,12 +1014,13 @@ const BcmList = class {
       checked: false,
       disabled: false,
       icon: "",
-      status: bcm.Bcm.Status.default,
+      status: bcm.Bcm$1.Status.default,
       indeterminate: "uncheck",
     };
     this.shouldTriggerChange = undefined;
-    this.placement = bcm.Bcm.Placement["bottom-start"];
+    this.placement = bcm.Bcm$1.Placement["bottom-start"];
     this.disableChangeEvent = false;
+    this.autoFocusSelected = false;
     this.data = [];
     window.addEventListener("scroll", this.handleWheel.bind(this), true);
     window.addEventListener("wheel", this.handleWheel.bind(this), true);
@@ -1067,6 +1133,7 @@ const BcmList = class {
     }
   }
   async handleOpen() {
+    const isAutoSelected = this.autoFocusSelected && this.type == "select" && !this.checkboxes && this.value;
     if (this.isOpen) {
       this.detectClone();
       if (this.type == "select" || this.type == "autocomplete" || this.linkedComponent) {
@@ -1081,10 +1148,15 @@ const BcmList = class {
       this.onSelectSearch();
       await utils.delay(50);
       this.isOpenAnimation = true;
+      if (isAutoSelected) {
+        this.focusSelectedElement();
+      }
     }
     else {
+      if (!isAutoSelected) {
+        this.listScrollToTop();
+      }
       this.isOpenAnimation = false;
-      this.listScrollToTop();
       this.close.emit();
       this.listClose.emit();
       await utils.delay(100);
@@ -1259,7 +1331,7 @@ const BcmList = class {
   //keyboard navigation
   handleKeyDown(ev) {
     const keycode = ev.keyCode || ev.which;
-    if (keycode === bcm.Bcm.KeyCode.escape) {
+    if (keycode === bcm.Bcm$1.KeyCode.escape) {
       if (this.isOpen) {
         this.isOpen = false;
         ev.preventDefault();
@@ -1437,22 +1509,33 @@ const BcmList = class {
     this.markForCheck();
   }
   async initState() {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     this.onClearSearch();
     await listState.setValue({
       id: this._id,
       dataSource: this.data && generate.snq(() => (typeof this.data == "string" ? JSON.parse(this.data) : this.data), []),
       options: this,
     });
-    const { totalRoots, totalItems } = listState.getValue(this._id);
+    const { totalRoots, totalItems, dataSource } = listState.getValue(this._id);
     this.totalData = (totalItems === null || totalItems === void 0 ? void 0 : totalItems.total) || 0;
     this.totalRootData = totalRoots || 0;
     this.value = this.checkboxes ? (await this.getCheckedList()).checkedList : listState.selectedItem(this._id) ? listState.selectedItem(this._id)[0] : null;
+    /** @description Focus selected element * BUG 282262 */
+    if (this.autoFocusSelected && this.type == "select" && this.value && !this.checkboxes) {
+      const selectedId = Array.isArray(this.value) ? (_a = this.value[0]) === null || _a === void 0 ? void 0 : _a.id : (_b = this.value) === null || _b === void 0 ? void 0 : _b.id;
+      if (selectedId && dataSource) {
+        const selectedIndex = dataSource.findIndex(item => item.id === selectedId);
+        if (selectedIndex !== -1 && selectedIndex >= this.limit) {
+          this.limit = selectedIndex + 5;
+          this.searchResultLimit = this.limit;
+        }
+      }
+    }
     if (!this.checkboxes) {
-      this.inputText = generate.Generate.domParser((_a = this.value) === null || _a === void 0 ? void 0 : _a.text) || null;
+      this.inputText = generate.Generate.domParser((_c = this.value) === null || _c === void 0 ? void 0 : _c.text) || null;
     }
     // checkli olan subparentların indeterminate kontrolü için
-    if (this.checkboxes && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+    if (this.checkboxes && ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) > 0) {
       const checkedIDs = [];
       this.value.forEach(item => {
         if (!item.items || item.items.length === 0) {
@@ -1461,7 +1544,7 @@ const BcmList = class {
       });
       await this.addChecked(checkedIDs, false, false);
     }
-    await this.handleIndeterminate((_c = this.value) === null || _c === void 0 ? void 0 : _c.length, this.totalData);
+    await this.handleIndeterminate((_e = this.value) === null || _e === void 0 ? void 0 : _e.length, this.totalData);
     await this.markForCheck();
   }
   async markForCheck() {
@@ -1544,20 +1627,16 @@ const BcmList = class {
   getAutoCompleteInput() {
     return document.getElementById(`bcm-list-input-tag-container-${this._id}-autocomplete-input`);
   }
+  /** @description Fixes the issue where the list appears empty during fast scrolling. */
   dataScrollEvent(event) {
-    let count = 0;
-    let io = new IntersectionObserver((data) => {
-      if (count === 0) {
-        count++;
-        if (data[0].isIntersecting) {
-          this.limit += 15;
-          this.searchResultLimit += 15;
-          io.disconnect();
-          io = null;
-        }
-      }
-    }, this.options);
-    io.observe(event.target.lastElementChild);
+    var _a, _b;
+    const itemHeight = this.size === 'small' ? 28 : this.size === 'large' ? 48 : 36;
+    const currentScrollBottom = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.scrollTop) + ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.clientHeight);
+    const requiredItems = Math.ceil(currentScrollBottom / itemHeight) + 20;
+    if (requiredItems > this.limit) {
+      this.limit = requiredItems;
+      this.searchResultLimit = requiredItems;
+    }
   }
   async calculateLocation() {
     var _a, _b;
@@ -1627,37 +1706,59 @@ const BcmList = class {
       this.listOpen.emit();
     }
   }
+  /** @description Focus selected element * BUG 282262 */
+  focusSelectedElement() {
+    var _a;
+    const listElement = document.querySelector(`#bcm-list-${this._id}`);
+    if (!listElement)
+      return;
+    const selectedId = (_a = this.value) === null || _a === void 0 ? void 0 : _a.id;
+    if (selectedId) {
+      const targetItem = listElement.querySelector(`[id*="${selectedId}"]`);
+      if (targetItem) {
+        targetItem.scrollIntoView({
+          block: 'center',
+          inline: 'nearest',
+          behavior: 'auto'
+        });
+        targetItem.focus();
+        const items = listElement.querySelectorAll(".bcm-list__item");
+        items.forEach(i => i.classList.remove("focused"));
+        targetItem.classList.add("focused");
+      }
+    }
+  }
   render() {
     const { checkboxes, treeview, label, size, disabled, readonly, required, hidden, fullWidth, searchable } = this.getOptions();
-    const hostClasses = index.classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
-      "error": this.captionType == bcm.Bcm.Status.error,
+    const hostClasses = index$1.classnames("bcm-list", `bcm-list__size-${size}`, `bcm-list__${this.type}`, size === "large" ? "size-3" : "size-2", {
+      "error": this.captionType == bcm.Bcm$1.Status.error,
       "full-width": fullWidth,
       "bcm-list__linked": this.linkedComponent,
       hidden,
       readonly,
       disabled,
     });
-    const bcmListContainer = index.classnames("bcm-list__container", this.linkedComponent ? "bcm-list__type-linked-component" : `bcm-list__type-${this.type}`, {
+    const bcmListContainer = index$1.classnames("bcm-list__container", this.linkedComponent ? "bcm-list__type-linked-component" : `bcm-list__type-${this.type}`, {
       "is-open": this.isOpen && this.calculatedViewport,
       "is-open-animation": this.isOpenAnimation,
-      "error": this.captionType == bcm.Bcm.Status.error,
+      "error": this.captionType == bcm.Bcm$1.Status.error,
       "full-width": fullWidth,
       hidden,
       readonly,
       disabled,
     });
-    const bcmListInput = index.classnames("bcm-list__input");
+    const bcmListInput = index$1.classnames("bcm-list__input");
     const openedType = this.type == "select" || this.type == "autocomplete" || this.linkedComponent;
-    return (index$1.h(index$1.Host, { class: hostClasses, tabindex: "0", style: {
+    return (index.h(index.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,
-      } }, index$1.h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (index$1.h("div", null, index$1.h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, index$1.h("span", { class: index.classnames("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (index$1.h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (index$1.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), index$1.h("span", { class: index.classnames("bcm-list__input-buttons", {
+      } }, index.h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (index.h("div", null, index.h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (index.h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, index.h("span", { class: index$1.classnames("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (index.h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (index.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (index.h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), index.h("span", { class: index$1.classnames("bcm-list__input-buttons", {
         disabled: disabled,
-      }) }, this.clearable && this.value && (index$1.h("div", { class: "bcm-list__input-buttons-button" }, index$1.h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), index$1.h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, index$1.h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (index$1.h("div", { id: `bcm-list-input-${this._id}`, class: index.classnames(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, index$1.h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && index$1.h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), index$1.h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), index$1.h(ListTemplate, { type: this.type, highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), index$1.h(captionTemplate.CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, this.clearable && this.value && (index.h("div", { class: "bcm-list__input-buttons-button" }, index.h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), index.h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, index.h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (index.h("div", { id: `bcm-list-input-${this._id}`, class: index$1.classnames(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, index.h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && index.h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), index.h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), index.h(ListTemplate, { type: this.type, highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, tempId: this.tempId, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon, handleTransitionEnd: e => this.handleTransitionEnd(e) }), index.h(captionTemplate.CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
-  get el() { return index$1.getElement(this); }
+  get el() { return index.getElement(this); }
   static get watchers() { return {
     "_id": ["watchId"],
     "value": ["handleValueChange"],
@@ -1678,10 +1779,10 @@ const rcOverflowCss = "@import url(\"https://fonts.googleapis.com/css?family=Rob
 
 const BcmRcOverflow = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.selectOtherTag = index$1.createEvent(this, "bcm-select-other-tag", 7);
-    this.selectTag = index$1.createEvent(this, "bcm-select-tag", 7);
-    this.deleteTag = index$1.createEvent(this, "bcm-delete-tag", 7);
+    index.registerInstance(this, hostRef);
+    this.selectOtherTag = index.createEvent(this, "bcm-select-other-tag", 7);
+    this.selectTag = index.createEvent(this, "bcm-select-tag", 7);
+    this.deleteTag = index.createEvent(this, "bcm-delete-tag", 7);
     this.renderItem = item => {
       return index$3.react.createElement("bcm-tooltip", {
         placement: "bottom",
@@ -1744,7 +1845,7 @@ const BcmRcOverflow = class {
     });
     index$3.reactDom.render(this.overflowInstance, this.el);
   }
-  get el() { return index$1.getElement(this); }
+  get el() { return index.getElement(this); }
 };
 BcmRcOverflow.style = rcOverflowCss;
 
@@ -1887,9 +1988,9 @@ const searchCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:
 
 const BcmSearch = class {
   constructor(hostRef) {
-    index$1.registerInstance(this, hostRef);
-    this.bcmOnSearch = index$1.createEvent(this, "bcm-on-search", 7);
-    this.bcmOnSearchClear = index$1.createEvent(this, "bcm-on-search-clear", 7);
+    index.registerInstance(this, hostRef);
+    this.bcmOnSearch = index.createEvent(this, "bcm-on-search", 7);
+    this.bcmOnSearchClear = index.createEvent(this, "bcm-on-search-clear", 7);
     this.debounceHandler = generate.Generate.debounceInput((event) => this.onSearchValue(event, this), 300, false, () => {
       var _a, _b;
       this.isActiveClearable = ((_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) > 0 && this.clearable;
@@ -1899,7 +2000,7 @@ const BcmSearch = class {
     this.disabled = false;
     this.readonly = false;
     this.clearable = true;
-    this.size = bcm.Bcm$1.Size.medium;
+    this.size = bcm.Bcm.Size.medium;
     this.limit = 10;
     this.searchIsOnlyChilds = false;
     this.minSearchLength = 2;
@@ -1963,15 +2064,89 @@ const BcmSearch = class {
   }
   render() {
     const { _id, placeholder, disabled, readonly } = this;
-    return index$1.h(index$1.Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, index$1.h(inputTemplate.InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
+    return index.h(index.Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, index.h(inputTemplate.InputTemplate, { size: this.size, id: _id, type: "search", placeholder: placeholder, disabled: disabled, "full-width": true, readonly: readonly, clearable: this.isActiveClearable, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleClear: () => this.handleClear(), handleInput: this.debounceHandler, ref: (el) => this.inputElement = el }));
   }
-  get el() { return index$1.getElement(this); }
+  get el() { return index.getElement(this); }
   static get watchers() { return {
     "data": ["dataChanged"]
   }; }
 };
 BcmSearch.style = searchCss;
 
+const BcmTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bcmTooltipShow = index.createEvent(this, "bcmTooltipShow", 7);
+    this.bcmTooltipHide = index.createEvent(this, "bcmTooltipHide", 7);
+    this._id = generate.Generate.UID();
+    this.message = "";
+    this.placement = bcm.Bcm$1.Placement.top;
+    this.trigger = bcm.Bcm$1.TriggerType.click;
+    this.open = false;
+    this.color = "slate";
+    this.size = bcm.Bcm$1.Size.medium;
+    this.openDelay = 0;
+    this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
+    this.tooltip = undefined;
+  }
+  emitShow() {
+    this.bcmTooltipShow.emit();
+  }
+  emitHide() {
+    this.bcmTooltipHide.emit();
+  }
+  connectedCallback() {
+    this.tooltip = new tooltipHelper.Tooltip({
+      targetId: this.targetId || this._id,
+      message: this.message,
+      placement: this.placement,
+      color: this.color,
+      trigger: this.trigger,
+      size: this.size,
+      openDelay: this.openDelay,
+      closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
+      emitShow: () => this.emitShow(),
+      emitHide: () => this.emitHide(),
+    });
+  }
+  componentDidLoad() {
+    this.tooltip.listener();
+  }
+  componentDidRender() {
+    this.tooltip.message = this.message;
+    this.tooltip.placement = this.placement;
+    this.tooltip.color = this.color;
+    this.tooltip.trigger = this.trigger;
+    this.tooltip.size = this.size;
+    this.tooltip.openDelay = this.openDelay;
+    this.tooltip.closeDelay = this.closeDelay;
+    this.tooltip.autoHide = this.autoHide;
+    this.tooltip.update();
+  }
+  disconnectedCallback() {
+    this.tooltip.destroy();
+  }
+  async show() {
+    this.tooltip.show();
+  }
+  async hide() {
+    this.tooltip.hide();
+  }
+  async toggle() {
+    this.tooltip.toggle();
+  }
+  render() {
+    return (index.h(index.Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip" }, index.h("slot", null)));
+  }
+  get el() { return index.getElement(this); }
+};
+
+exports.bcm_icon = BcmIcon;
+exports.bcm_label = BcmLabel;
 exports.bcm_list = BcmList;
 exports.bcm_rc_overflow = BcmRcOverflow;
 exports.bcm_search = BcmSearch;
+exports.bcm_tooltip = BcmTooltip;