bromcom-ui 2.8.1-rc.0 → 2.8.1-rc.2

package/dist/cjs/old-bcm-popover-box.cjs.entry.js

@@ -11,8 +11,8 @@ require('./element-dragger-a8562f82.js');
 const popoverPlacement = require('./popover-placement-3c8f3a72.js');
 const floatingUi = require('./floating-ui-74eb26d6.js');
 const index$1 = require('./index-fdbf5226.js');
-const generate = require('./generate-411c1529.js');
-const numberHelper = require('./number-helper-91446798.js');
+const generate = require('./generate-227da8fb.js');
+const numberHelper = require('./number-helper-724bd3c0.js');
 const stringHelper = require('./string-helper-45cffee0.js');
 require('./utils-fc077139.js');
 require('./bcm-634604e3.js');

package/dist/cjs/old-bcm-popover.cjs.entry.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ddfd6d8f.js');
 const index$1 = require('./index-fdbf5226.js');
 const bcm = require('./bcm-634604e3.js');
-const generate = require('./generate-411c1529.js');
+const generate = require('./generate-227da8fb.js');
 require('./_commonjsHelpers-bd20f4c0.js');
 require('./colors-e1d142ad.js');
 

package/dist/cjs/{stepper-states-ee18b202.js → stepper-states-c08457f9.js}

@@ -5,7 +5,7 @@
 'use strict';
 
 const index = require('./index-4506fcd7.js');
-const generate = require('./generate-411c1529.js');
+const generate = require('./generate-227da8fb.js');
 const index$1 = require('./index-ddfd6d8f.js');
 
 const { state } = index.createStore({

package/dist/cjs/{tooltip-helper-dee255e9.js → tooltip-helper-dc91538e.js}

@@ -10,13 +10,13 @@ const utils = require('./utils-fc077139.js');
 const floatingUi = require('./floating-ui-74eb26d6.js');
 const colorHelper = require('./color-helper-d6d2028b.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-411c1529.js');
-require('./number-helper-91446798.js');
-require('./validators-c131b7c6.js');
+const generate = require('./generate-227da8fb.js');
+require('./number-helper-724bd3c0.js');
+require('./validators-4277e26c.js');
 const bcm = require('./bcm-634604e3.js');
 
 class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { }, }) {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -65,6 +65,7 @@ class Tooltip {
         switch (this.trigger) {
           case "click":
             this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
           case "hover":
             this.target().addEventListener("mouseenter", this.show.bind(this));
@@ -140,6 +141,7 @@ class Tooltip {
     this.size = size;
     this.openDelay = openDelay;
     this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
     this.emitShow = emitShow;
     this.emitHide = emitHide;
   }

package/dist/cjs/{validators-c131b7c6.js → validators-4277e26c.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const generate = require('./generate-411c1529.js');
+const generate = require('./generate-227da8fb.js');
 
 class Validators {
 }

package/dist/collection/components/molecules/menu/menu.css

@@ -128,29 +128,29 @@
 }
 
 .bcm-menu {
-  --bcm-menu-color-default: var(--bcm-new-ds-color-slate-600);
+  --bcm-menu-color-default: var(--bcm-new-ds-color-slate-700);
   --bcm-menu-background-color-default: var(--bcm-new-ds-color-transparent);
-  --bcm-menu-icon-color-default: var(--bcm-new-ds-color-slate-400);
-  --bcm-menu-color-hover: var(--bcm-new-ds-color-slate-700);
+  --bcm-menu-icon-color-default: var(--bcm-new-ds-color-slate-600);
+  --bcm-menu-color-hover: var(--bcm-new-ds-color-slate-800);
   --bcm-menu-background-color-hover: var(--bcm-new-ds-color-slate-50);
-  --bcm-menu-icon-color-hover: var(--bcm-new-ds-color-slate-500);
+  --bcm-menu-icon-color-hover: var(--bcm-new-ds-color-slate-700);
   --bcm-menu-color-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active: var(--bcm-new-ds-color-blue-500);
+  --bcm-menu-background-color-active: var(--bcm-color-primary-500);
   --bcm-menu-icon-color-active: var(--bcm-new-ds-color-white);
   --bcm-menu-color-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-focus-visible: var(--bcm-new-ds-color-blue-600);
+  --bcm-menu-background-color-focus-visible: var(--bcm-color-primary-600);
   --bcm-menu-icon-color-focus-visible: var(--bcm-new-ds-color-white);
   --bcm-menu-color-disabled: var(--bcm-new-ds-color-slate-50);
   --bcm-menu-background-color-disabled: var(--bcm-new-ds-color-slate-300);
   --bcm-menu-icon-color-disabled: var(--bcm-new-ds-color-slate-50);
   --bcm-menu-color-active-hover: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-hover: var(--bcm-new-ds-color-blue-600);
+  --bcm-menu-background-color-active-hover: var(--bcm-color-primary-400);
   --bcm-menu-icon-color-active-hover: var(--bcm-new-ds-color-white);
   --bcm-menu-color-active-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-focus-visible: var(--bcm-new-ds-color-blue-700);
+  --bcm-menu-background-color-active-focus-visible: var(--bcm-color-primary-700);
   --bcm-menu-icon-color-active-focus-visible: var(--bcm-new-ds-color-white);
   --bcm-menu-color-active-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-active: var(--bcm-new-ds-color-blue-800);
+  --bcm-menu-background-color-active-active: var(--bcm-color-primary-800);
   --bcm-menu-icon-color-active-active: var(--bcm-new-ds-color-white);
   font-family: "Inter", sans-serif;
   font-size: 14px;

package/dist/collection/components/molecules/modal/modal.css

@@ -228,7 +228,7 @@
   line-height: calc(16px + 8px);
   font-weight: 500;
   color: var(--bcm-new-ds-color-slate-600);
-  background-color: var(--bcm-color-primary-50);
+  background-color: var(--bcm-new-ds-color-slate-100);
   position: relative;
 }
 .bcm-modal__container-header span.full-width {

package/dist/collection/components/molecules/popover/popover.js

@@ -14,9 +14,10 @@ export class BcmPopover {
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
     this.color = "white";
-    this.targetId = undefined;
     this.openDelay = 0;
     this.closeDelay = 0;
+    this.autoHide = false;
+    this.targetId = undefined;
     this.popover = undefined;
   }
   emitShow() {
@@ -35,6 +36,7 @@ export class BcmPopover {
       trigger: this.trigger,
       openDelay: this.openDelay,
       closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
       emitShow: () => this.emitShow(),
       emitHide: () => this.emitHide(),
     });
@@ -49,6 +51,9 @@ export class BcmPopover {
     this.popover.placement = placement;
     this.popover.color = color;
     this.popover.trigger = trigger;
+    this.popover.openDelay = this.openDelay;
+    this.popover.closeDelay = this.closeDelay;
+    this.popover.autoHide = this.autoHide;
     this.popover.update();
   }
   disconnectedCallback() {
@@ -205,12 +210,12 @@ export class BcmPopover {
         "reflect": false,
         "defaultValue": "\"white\""
       },
-      "targetId": {
-        "type": "string",
+      "openDelay": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
@@ -219,10 +224,11 @@ export class BcmPopover {
           "tags": [],
           "text": ""
         },
-        "attribute": "target-id",
-        "reflect": false
+        "attribute": "open-delay",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "openDelay": {
+      "closeDelay": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -236,16 +242,16 @@ export class BcmPopover {
           "tags": [],
           "text": ""
         },
-        "attribute": "open-delay",
+        "attribute": "close-delay",
         "reflect": false,
         "defaultValue": "0"
       },
-      "closeDelay": {
-        "type": "number",
+      "autoHide": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -254,9 +260,26 @@ export class BcmPopover {
           "tags": [],
           "text": ""
         },
-        "attribute": "close-delay",
+        "attribute": "auto-hide",
         "reflect": false,
-        "defaultValue": "0"
+        "defaultValue": "false"
+      },
+      "targetId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "target-id",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/molecules/stepper/stepper.js

@@ -165,7 +165,7 @@ export class BcmStepper {
     const lineClasses = item => cs("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
     const items = this.getItems();
     return (h(Host, { class: hostClasses }, h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, h("slot", null)), h("main", null, h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
-      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.onStepChange(step) })),
+      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.next(step - 1) })),
       items.length > index + 1 && h("div", { class: lineClasses(item) }),
     ])), h("section", { class: "bcm-stepper__body" }, this.data && this.data.length > 0 ? items === null || items === void 0 ? void 0 : items.map(item => h("bcm-step", Object.assign({}, item))) : h("slot", null)))));
   }

package/dist/collection/components/molecules/tooltip/tooltip.js

@@ -16,6 +16,7 @@ export class BcmTooltip {
     this.size = Bcm.Size.medium;
     this.openDelay = 0;
     this.closeDelay = 0;
+    this.autoHide = false;
     this.targetId = undefined;
     this.tooltip = undefined;
   }
@@ -35,6 +36,7 @@ export class BcmTooltip {
       size: this.size,
       openDelay: this.openDelay,
       closeDelay: this.closeDelay,
+      autoHide: this.autoHide,
       emitShow: () => this.emitShow(),
       emitHide: () => this.emitHide(),
     });
@@ -50,6 +52,7 @@ export class BcmTooltip {
     this.tooltip.size = this.size;
     this.tooltip.openDelay = this.openDelay;
     this.tooltip.closeDelay = this.closeDelay;
+    this.tooltip.autoHide = this.autoHide;
     this.tooltip.update();
   }
   disconnectedCallback() {
@@ -247,6 +250,24 @@ export class BcmTooltip {
         "reflect": false,
         "defaultValue": "0"
       },
+      "autoHide": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auto-hide",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "targetId": {
         "type": "string",
         "mutable": false,

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

@@ -102,7 +102,7 @@ export class ListTagControl {
             const { count, width } = args;
             if (count > 999)
               return '999+' + pluralize('item', count);
-            if (width > 100)
+            if (width >= 100)
               return `${count} ` + pluralize('item', count) + ' selected';
             if (width < 100)
               return `+${count < 10 ? count : '9'}`;
@@ -116,7 +116,7 @@ export class ListTagControl {
                 text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
                 title: snq(() => otherTags
                   .map(tag => this.values.find(value => value.id == tag.dataset.id))
-                  .sort((a, b) => +a._i - +b._i)
+                  .sort((a, b) => +a.ct - +b.ct)
                   .slice(0, 15)
                   .map(item => StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
                   .toString()

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

@@ -2,9 +2,9 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { createStore } from '@stencil/store';
-import snq from 'snq';
-import { Generate } from '../../../helper/generate';
+import { createStore } from "@stencil/store";
+import snq from "snq";
+import { Generate } from "../../../helper/generate";
 const { state } = createStore({
   value: new Map(),
 });
@@ -56,12 +56,12 @@ const setValue = val => {
   };
   state.value.set(data.id, data);
 };
-const recursive = (data, options, parentId, parentIndex = '0.') => {
+const recursive = (data, options, parentId, parentIndex = "0.") => {
   let recData = [];
   if (data && data.length > 0) {
-    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: Object.assign(Object.assign({}, item), { _i: `${parentIndex}${index}` }) }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
+    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
       ? { items: snq(() => recursive(item.items, options, item.id, `${parentIndex}${index}`), []) }
-      : { items: [] }))));
+      : { items: [] })), { ct: `${parentIndex}${index}` })));
   }
   return recData;
 };
@@ -72,10 +72,10 @@ const getValue = id => snq(() => state.value.get(id), {});
 const calculateTotalItems = (dataSource, treeview) => {
   let total = 0;
   dataSource.forEach(item => {
-    if (treeview || (!treeview && item.type != 'group')) {
+    if (treeview || (!treeview && item.type != "group")) {
       total += 1;
     }
-    if ((treeview || (!treeview && item.type == 'group')) && item.items) {
+    if ((treeview || (!treeview && item.type == "group")) && item.items) {
       total += calculateTotalItems(item.items, treeview);
     }
   });
@@ -205,7 +205,7 @@ const checkedProcess = (id, item, status) => {
     const treeview = value.options.treeview;
     if (item) {
       // && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
-      if (treeview || (!treeview && item.type != 'group')) {
+      if (treeview || (!treeview && item.type != "group")) {
         if (!item.disabled) {
           if (status != undefined) {
             item.checked = status;
@@ -214,7 +214,7 @@ const checkedProcess = (id, item, status) => {
             item.checked = !item.checked;
           }
           item.itemObject.checked = item.checked;
-          item.indeterminate = item.checked ? 'determinate' : 'uncheck';
+          item.indeterminate = item.checked ? "determinate" : "uncheck";
         }
       }
       if (item.items) {
@@ -241,13 +241,13 @@ const indeterminateStatus = (id, itemId, items) => {
         let allUnchecked = true;
         if (item.items) {
           item.items.map(child => {
-            (child.checked || child.indeterminate === 'indeterminate') && (allUnchecked = false);
+            (child.checked || child.indeterminate === "indeterminate") && (allUnchecked = false);
             !child.checked && (allChecked = false);
           });
         }
-        const indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
+        const indeterminateState = !allChecked && !allUnchecked ? "indeterminate" : allChecked ? "determinate" : "uncheck";
         item.indeterminate = indeterminateState;
-        item.checked = indeterminateState == 'determinate' ? true : false;
+        item.checked = indeterminateState == "determinate" ? true : false;
         item.itemObject.checked = item.checked;
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
@@ -399,11 +399,12 @@ const getCheckedList = (id, items) => {
   if (dataSource) {
     dataSource.forEach(item => {
       var _a;
+      const newItem = Object.assign(Object.assign({}, item.itemObject), { ct: item.ct });
       let foundChild = [];
       let foundItem = [];
       if (item.checked) {
-        checkedList.push(item.itemObject);
-        foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+        checkedList.push(newItem);
+        foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
       }
       if (item.items) {
         const found = getCheckedList(id, item.items);
@@ -416,7 +417,7 @@ const getCheckedList = (id, items) => {
       }
       if (foundChild.length > 0) {
         if (foundItem.length == 0) {
-          foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+          foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
         }
         foundItem[0].items = foundChild;
         nestedResult.push(foundItem[0]);
@@ -484,10 +485,10 @@ const setClear = (id, items) => {
       var _a, _b, _c;
       item.checked && (item.checked = false);
       item.selected && (item.selected = false);
-      item.indeterminate && (item.indeterminate = 'uncheck');
+      item.indeterminate && (item.indeterminate = "uncheck");
       ((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
       ((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
-      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = 'uncheck');
+      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = "uncheck");
       if (item.items) {
         setClear(id, item.items);
       }

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

@@ -5,7 +5,7 @@
 import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
 export class Popover {
-  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { } }) {
+  constructor({ content, message, targetId, placement = "top", color = "slate-700", trigger = "none", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { } }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -51,6 +51,7 @@ export class Popover {
         switch (this.trigger) {
           case "click":
             this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
           case "hover":
             this.target().addEventListener("mouseenter", this.show.bind(this));
@@ -128,6 +129,7 @@ export class Popover {
     this.id = targetId + "-popover-box";
     this.openDelay = openDelay;
     this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
     this.emitShow = emitShow;
     this.emitHide = emitHide;
   }

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

@@ -6,7 +6,7 @@ import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 export class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, emitShow = () => { }, emitHide = () => { }, }) {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -55,6 +55,7 @@ export class Tooltip {
         switch (this.trigger) {
           case "click":
             this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
           case "hover":
             this.target().addEventListener("mouseenter", this.show.bind(this));
@@ -132,6 +133,7 @@ export class Tooltip {
     this.size = size;
     this.openDelay = openDelay;
     this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
     this.emitShow = emitShow;
     this.emitHide = emitHide;
   }

package/dist/components/bcm-list.js

@@ -193,12 +193,12 @@ const setValue = val => {
   };
   state.value.set(data.id, data);
 };
-const recursive = (data, options, parentId, parentIndex = '0.') => {
+const recursive = (data, options, parentId, parentIndex = "0.") => {
   let recData = [];
   if (data && data.length > 0) {
-    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: Object.assign(Object.assign({}, item), { _i: `${parentIndex}${index}` }) }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
+    recData = data.map((item, index) => (Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ itemObject: item }, item), options), { parentId: snq(() => parentId, null), open: options.allOpen || item.open || false }), ((options.treeview || (!options.treeview && item.type == 'group')) && item.items && item.items.length > 0
       ? { items: snq(() => recursive(item.items, options, item.id, `${parentIndex}${index}`), []) }
-      : { items: [] }))));
+      : { items: [] })), { ct: `${parentIndex}${index}` })));
   }
   return recData;
 };
@@ -209,10 +209,10 @@ const getValue = id => snq(() => state.value.get(id), {});
 const calculateTotalItems = (dataSource, treeview) => {
   let total = 0;
   dataSource.forEach(item => {
-    if (treeview || (!treeview && item.type != 'group')) {
+    if (treeview || (!treeview && item.type != "group")) {
       total += 1;
     }
-    if ((treeview || (!treeview && item.type == 'group')) && item.items) {
+    if ((treeview || (!treeview && item.type == "group")) && item.items) {
       total += calculateTotalItems(item.items, treeview);
     }
   });
@@ -342,7 +342,7 @@ const checkedProcess = (id, item, status) => {
     const treeview = value.options.treeview;
     if (item) {
       // && !item.hidden => select all bastığımızda hidden olanları seçmemesi içindi
-      if (treeview || (!treeview && item.type != 'group')) {
+      if (treeview || (!treeview && item.type != "group")) {
         if (!item.disabled) {
           if (status != undefined) {
             item.checked = status;
@@ -351,7 +351,7 @@ const checkedProcess = (id, item, status) => {
             item.checked = !item.checked;
           }
           item.itemObject.checked = item.checked;
-          item.indeterminate = item.checked ? 'determinate' : 'uncheck';
+          item.indeterminate = item.checked ? "determinate" : "uncheck";
         }
       }
       if (item.items) {
@@ -378,13 +378,13 @@ const indeterminateStatus = (id, itemId, items) => {
         let allUnchecked = true;
         if (item.items) {
           item.items.map(child => {
-            (child.checked || child.indeterminate === 'indeterminate') && (allUnchecked = false);
+            (child.checked || child.indeterminate === "indeterminate") && (allUnchecked = false);
             !child.checked && (allChecked = false);
           });
         }
-        const indeterminateState = !allChecked && !allUnchecked ? 'indeterminate' : allChecked ? 'determinate' : 'uncheck';
+        const indeterminateState = !allChecked && !allUnchecked ? "indeterminate" : allChecked ? "determinate" : "uncheck";
         item.indeterminate = indeterminateState;
-        item.checked = indeterminateState == 'determinate' ? true : false;
+        item.checked = indeterminateState == "determinate" ? true : false;
         item.itemObject.checked = item.checked;
         if (item.parentId) {
           indeterminateStatus(id, item.parentId);
@@ -491,11 +491,12 @@ const getCheckedList = (id, items) => {
   if (dataSource) {
     dataSource.forEach(item => {
       var _a;
+      const newItem = Object.assign(Object.assign({}, item.itemObject), { ct: item.ct });
       let foundChild = [];
       let foundItem = [];
       if (item.checked) {
-        checkedList.push(item.itemObject);
-        foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+        checkedList.push(newItem);
+        foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
       }
       if (item.items) {
         const found = getCheckedList(id, item.items);
@@ -508,7 +509,7 @@ const getCheckedList = (id, items) => {
       }
       if (foundChild.length > 0) {
         if (foundItem.length == 0) {
-          foundItem.push(Object.assign(Object.assign({}, item.itemObject), { items: [] }));
+          foundItem.push(Object.assign(Object.assign({}, newItem), { items: [] }));
         }
         foundItem[0].items = foundChild;
         nestedResult.push(foundItem[0]);
@@ -576,10 +577,10 @@ const setClear = (id, items) => {
       var _a, _b, _c;
       item.checked && (item.checked = false);
       item.selected && (item.selected = false);
-      item.indeterminate && (item.indeterminate = 'uncheck');
+      item.indeterminate && (item.indeterminate = "uncheck");
       ((_a = item.itemObject) === null || _a === void 0 ? void 0 : _a.checked) && (item.itemObject.checked = false);
       ((_b = item.itemObject) === null || _b === void 0 ? void 0 : _b.selected) && (item.itemObject.selected = false);
-      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = 'uncheck');
+      ((_c = item.itemObject) === null || _c === void 0 ? void 0 : _c.indeterminate) && (item.itemObject.indeterminate = "uncheck");
       if (item.items) {
         setClear(id, item.items);
       }
@@ -933,7 +934,7 @@ class ListTagControl {
             const { count, width } = args;
             if (count > 999)
               return '999+' + pluralize('item', count);
-            if (width > 100)
+            if (width >= 100)
               return `${count} ` + pluralize('item', count) + ' selected';
             if (width < 100)
               return `+${count < 10 ? count : '9'}`;
@@ -947,7 +948,7 @@ class ListTagControl {
                 text: otherTagTextControl({ count: otherCounter, width: containerWidth[1] }),
                 title: snq(() => otherTags
                   .map(tag => this.values.find(value => value.id == tag.dataset.id))
-                  .sort((a, b) => +a._i - +b._i)
+                  .sort((a, b) => +a.ct - +b.ct)
                   .slice(0, 15)
                   .map(item => StringHelper.textLimitter(item.tagTitle || item.text, 40, true))
                   .toString()

package/dist/components/bcm-modal.js

@@ -10,7 +10,7 @@ import { S as SlotTemplate } from './slot-template.js';
 import { G as Generate } from './generate.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const modalCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}*{box-sizing:border-box}.bcm-modal{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:100%;height:100%;position:fixed;z-index:-1;opacity:0;top:0;left:0;visibility:hidden;overflow:auto;padding:24px;transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{opacity:1;z-index:10500;visibility:visible;transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal .overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0;opacity:0.6;background-color:var(--bcm-new-ds-color-slate-900)}.bcm-modal__container{display:flex;flex-direction:column;width:100%;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);z-index:2;transform:translateY(-50px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}.bcm-modal__container.portrait{max-width:312px}.bcm-modal__container.landscape{max-width:475px}.bcm-modal__container.small{max-width:576px}.bcm-modal__container.medium{max-width:768px}.bcm-modal__container.large{max-width:992px}.bcm-modal__container.xlarge{max-width:1024px}.bcm-modal__container.xxlarge{max-width:1200px}.bcm-modal__container.xxxlarge{max-width:1700px}.bcm-modal__container.full-width{width:100%;max-width:100%}.bcm-modal__container.custom-size main{overflow:auto;height:100%;width:100%}.bcm-modal__container-main{color:var(--bcm-color-grey-8);padding:0}.bcm-modal__container-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:12px 24px;font-size:16px;line-height:calc(16px + 8px);font-weight:500;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-color-primary-50);position:relative}.bcm-modal__container-header span.full-width{width:100%}.bcm-modal__container-header-close{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:8px;cursor:pointer;color:var(--bcm-new-ds-color-slate-500);transition:color 0.1s ease-in-out}.bcm-modal__container-header-close:hover{color:var(--bcm-new-ds-color-slate-600)}.bcm-modal__container-header-close:active{color:var(--bcm-new-ds-color-slate-700)}.bcm-modal__container-header-close:focus-visible{color:var(--bcm-new-ds-color-slate-800)}.bcm-modal__container-header:after{border-radius:8px 8px 0 0;content:\"\";display:block;width:100%;height:4px;background-color:var(--bcm-color-primary-400);position:absolute;top:-4px;left:0}.bcm-modal__container-footer-content{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;flex-wrap:nowrap;padding:12px 24px 24px;grid-gap:8px}";
+const modalCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .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}*{box-sizing:border-box}.bcm-modal{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:100%;height:100%;position:fixed;z-index:-1;opacity:0;top:0;left:0;visibility:hidden;overflow:auto;padding:24px;transition:opacity 0.5s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show{opacity:1;z-index:10500;visibility:visible;transition:opacity 0.2s ease, visibility 0.4s ease-in-out, 0.3s z-index}.bcm-modal__show .bcm-modal__container{transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;transform:translateY(0)}.bcm-modal .overlay{position:fixed;width:100vw;height:100vh;z-index:1;top:0;left:0;opacity:0.6;background-color:var(--bcm-new-ds-color-slate-900)}.bcm-modal__container{display:flex;flex-direction:column;width:100%;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1);border-radius:8px;background-color:var(--bcm-new-ds-color-white);z-index:2;transform:translateY(-50px);transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out}.bcm-modal__container.portrait{max-width:312px}.bcm-modal__container.landscape{max-width:475px}.bcm-modal__container.small{max-width:576px}.bcm-modal__container.medium{max-width:768px}.bcm-modal__container.large{max-width:992px}.bcm-modal__container.xlarge{max-width:1024px}.bcm-modal__container.xxlarge{max-width:1200px}.bcm-modal__container.xxxlarge{max-width:1700px}.bcm-modal__container.full-width{width:100%;max-width:100%}.bcm-modal__container.custom-size main{overflow:auto;height:100%;width:100%}.bcm-modal__container-main{color:var(--bcm-color-grey-8);padding:0}.bcm-modal__container-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:nowrap;padding:12px 24px;font-size:16px;line-height:calc(16px + 8px);font-weight:500;color:var(--bcm-new-ds-color-slate-600);background-color:var(--bcm-new-ds-color-slate-100);position:relative}.bcm-modal__container-header span.full-width{width:100%}.bcm-modal__container-header-close{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:8px;cursor:pointer;color:var(--bcm-new-ds-color-slate-500);transition:color 0.1s ease-in-out}.bcm-modal__container-header-close:hover{color:var(--bcm-new-ds-color-slate-600)}.bcm-modal__container-header-close:active{color:var(--bcm-new-ds-color-slate-700)}.bcm-modal__container-header-close:focus-visible{color:var(--bcm-new-ds-color-slate-800)}.bcm-modal__container-header:after{border-radius:8px 8px 0 0;content:\"\";display:block;width:100%;height:4px;background-color:var(--bcm-color-primary-400);position:absolute;top:-4px;left:0}.bcm-modal__container-footer-content{display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-end;flex-wrap:nowrap;padding:12px 24px 24px;grid-gap:8px}";
 
 const BcmModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {