bromcom-ui 2.11.1-rc.9-3 → 2.11.1

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

@@ -267,11 +267,11 @@
   margin: 0;
 }
 .bcm-switch__label .active-text {
-  color: var(--bcm-new-ds-color-blue-700);
+  color: var(--bcm-new-ds-color-blue-500);
   margin: 0 0 0 4px;
 }
 .bcm-switch__label .inactive-text {
-  color: var(--bcm-new-ds-color-slate-700);
+  color: var(--bcm-new-ds-color-slate-500);
   margin: 0 4px 0 0;
 }
 .bcm-switch__toggle {

package/dist/collection/components/molecules/tab-group/tab-group.js

@@ -180,9 +180,9 @@ export class BcmTabGroup {
     const { color } = this;
     const dc = Generate.getTwColor({
       color: color,
-      tones: [700]
+      tones: [500]
     });
-    return (h(Host, { role: "tablist", "aria-label": "Tab Group", "aria-busy": "true", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, h("div", { id: "ink-bar", class: `tw-bg-default-700 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
+    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, h("div", { id: "ink-bar", class: `tw-bg-default-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
   }
   static get is() { return "bcm-tab-group"; }
   static get properties() {

package/dist/collection/components/molecules/tab-group/tab-item-header.js

@@ -23,18 +23,18 @@ export class BcmTabItemHeader {
   }
   render() {
     const { color, size, active, disabled } = this;
-    const disabledClass = "tw-cursor-not-allowed tw-text-gray-500 tw-opacity-50";
+    const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
     const dc = Generate.getTwColor({
       color: color,
-      tones: [700, 800, 900]
+      tones: [500, 600, 700, 800]
     });
-    return (h(Host, { onClick: () => this.handleClick(), class: cs(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-700  tw-transition-font tw-focus:outline-none`, {
+    return (h(Host, { onClick: () => this.handleClick(), class: cs(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-font tw-focus:outline-none`, {
         "tw-text-2 tw-py-1 tw-gap-2": size === Bcm.Size.small,
         "tw-text-3 tw-py-2 tw-gap-3": size === Bcm.Size.medium,
         "tw-text-4 tw-py-3 tw-gap-4": size === Bcm.Size.large,
       }, disabled ? disabledClass : "tw-cursor-pointer", active
-        ? `tw-text-default-700 enabled:hover:tw-text-default-800 enabled:active:tw-text-default-900 enabled:focus-visible:tw-text-default-900`
-        : "tw-text-slate-700 enabled:hover:tw-text-slate-800 enabled:focus-visible:tw-text-slate-900 enabled:active:tw-text-slate-900"), style: dc }));
+        ? `tw-text-default-500 enabled:hover:tw-text-default-600 enabled:active:tw-text-default-700 enabled:focus-visible:tw-text-default-800`
+        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600"), style: dc }));
   }
   static get is() { return "bcm-tab-item-header"; }
   static get properties() {

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

@@ -68,7 +68,7 @@ export class BcmTooltip {
     this.tooltip.toggle();
   }
   render() {
-    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip" }, h("slot", null)));
+    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
   }
   static get is() { return "bcm-tooltip"; }
   static get properties() {

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

@@ -630,7 +630,7 @@
   overflow: hidden;
 }
 .bcm-list__input-container.value-empty {
-  color: #6B7280;
+  color: var(--bcm-color-grey-6);
 }
 .bcm-list__input-container.type-single, .bcm-list__input-container.value-empty {
   white-space: nowrap;
@@ -638,7 +638,7 @@
   text-overflow: ellipsis;
 }
 .bcm-list__input-placeholder {
-  color: #6B7280;
+  color: var(--bcm-color-grey-6);
 }
 .bcm-list__input-tag-container {
   height: 100%;

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

@@ -90,7 +90,7 @@ export class BcmList {
     };
     this.tagContainerWidth = 0;
     this.selectAllItem = {
-      id: "select-all-" + Generate.UID(),
+      id: "select-all",
       text: "Select All",
       value: "select-all",
       checked: false,
@@ -802,7 +802,7 @@ export class BcmList {
         "--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", { tooltip: this.tooltip, size: this.size, 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: cs("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: cs("bcm-list__input-buttons", {
         disabled: disabled,
-      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), 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 })))), 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) }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+      }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), 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 })))), h(ListTemplate, { 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) }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   static get is() { return "bcm-list"; }
   static get originalStyleUrls() {

package/dist/collection/components/other/attendance/attendance.js

@@ -14,7 +14,7 @@ export class BcmAttendance {
     const classPrefix = 'bcm-attendance';
     return (h(Host, { class: classPrefix }, h("span", { hidden: true }, h("slot", null)), data.map(item => {
       var _a, _b;
-      return h("div", { class: `${classPrefix}__item` }, h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / AM`, "aria-label": `${item.weekday || null} / AM` }, h("span", { class: `${classPrefix}__item-am ${classPrefix}__item-status-${(_a = item.am) !== null && _a !== void 0 ? _a : 'default'}` })), h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / PM`, "aria-label": `${item.weekday || null} / PM` }, h("span", { class: `${classPrefix}__item-pm ${classPrefix}__item-status-${(_b = item.pm) !== null && _b !== void 0 ? _b : 'default'}` })));
+      return h("div", { class: `${classPrefix}__item` }, h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / AM` }, h("span", { class: `${classPrefix}__item-am ${classPrefix}__item-status-${(_a = item.am) !== null && _a !== void 0 ? _a : 'default'}` })), h("bcm-tooltip", { trigger: "hover", message: `${item.weekday || null} / PM` }, h("span", { class: `${classPrefix}__item-pm ${classPrefix}__item-status-${(_b = item.pm) !== null && _b !== void 0 ? _b : 'default'}` })));
     })));
   }
   static get is() { return "bcm-attendance"; }

package/dist/collection/components/third-parts/rc-picker/date.js

@@ -58,7 +58,7 @@ export class BcmDate {
       }
     };
     this.getRangeValueObject = (value) => {
-      const [start, end] = value._i || [];
+      const [start, end] = value || [null, null];
       const startObject = this.createValueObject(start);
       const endObject = this.createValueObject(end);
       return Object.assign({ isValid: startObject.isValid && endObject.isValid, start: startObject, end: endObject, date: [startObject.date, endObject.date], timestamp: [startObject.timestamp, endObject.timestamp], value: `${startObject.value} - ${endObject.value}` }, (this.type === "time" && {

package/dist/collection/components/third-parts/rc-picker/rc-picker.css

@@ -157,8 +157,17 @@
 .bcm-date:hover {
   /* bcm */
   border: 1px solid #4293cf;
+}
+.bcm-date:hover.bcm-date--existed {
   /* bcm */
 }
+.bcm-date:hover.bcm-date--existed .bcm-date-clear {
+  visibility: visible;
+  opacity: 1;
+}
+.bcm-date:hover.bcm-date--existed .bcm-date-suffix {
+  opacity: 0;
+}
 .bcm-date-focused {
   background-color: #f8fafc;
 }
@@ -169,7 +178,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  order: 2;
 }
 .bcm-date-suffix::before {
   -moz-osx-font-smoothing: grayscale;
@@ -247,9 +255,14 @@
   font-size: 20px;
   padding-bottom: 3px;
   line-height: 1;
-  order: 1;
   cursor: pointer;
   font-weight: 400;
+  visibility: hidden;
+  position: absolute;
+  right: 4px;
+  padding: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
 }
 .bcm-date-clear-btn::after {
   content: "×";
@@ -280,11 +293,30 @@
 .bcm-date--error:hover {
   border: 1px solid #e53e3e;
 }
+.bcm-date-range {
+  padding: 0 4px;
+}
+.bcm-date-range .bcm-date-clear {
+  flex: none;
+}
+.bcm-date-range-separator {
+  color: #94a3b8;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bcm-date-focused .bcm-date-active-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background-color: #4293cf;
+  transition: all 0.3s;
+}
 .bcm-date-dropdown {
   position: absolute;
   z-index: 10800;
-  box-shadow: 0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
   top: -9999;
   left: -9999;
   border-radius: 4px;
@@ -305,16 +337,19 @@
   font-size: 14px;
   line-height: 22px;
   font-weight: 400;
+  box-shadow: 0 4px 12px 0 rgba(17, 24, 39, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
 }
 .bcm-date-dropdown .bcm-date-panels {
   display: inline-flex;
 }
-.bcm-date-dropdown .bcm-date-decade-panel, .bcm-date-dropdown .bcm-date-year-panel, .bcm-date-dropdown .bcm-date-month-panel, .bcm-date-dropdown .bcm-date-week-panel, .bcm-date-dropdown .bcm-date-date-panel, .bcm-date-dropdown .bcm-date-time-panel {
+.bcm-date-dropdown .bcm-date-decade-panel, .bcm-date-dropdown .bcm-date-year-panel, .bcm-date-dropdown .bcm-date-month-panel, .bcm-date-dropdown .bcm-date-week-panel, .bcm-date-dropdown .bcm-date-date-panel {
   width: 256px;
 }
 .bcm-date-dropdown .bcm-date-time-panel {
   width: auto;
   padding-top: 4px;
+  min-width: auto;
 }
 .bcm-date-dropdown .bcm-date-time-panel .bcm-date-content {
   width: 100%;

package/dist/collection/components/third-parts/rc-picker/rc-picker.js

@@ -57,7 +57,12 @@ export class BcmRcPicker {
     this.newValue = null;
   }
   async set(value) {
-    this.newValue = value ? moment(value) : null;
+    if (!value) {
+      this.newValue = null;
+      this.bcmRCPickerChange.emit(null);
+      return;
+    }
+    this.newValue = this.range ? [moment(value[0]), moment(value[1])] : moment(value);
     this.bcmRCPickerChange.emit(this.newValue);
   }
   componentDidRender() {
@@ -82,9 +87,13 @@ export class BcmRcPicker {
       date: Object.assign({}, dateOptions),
       datetime: Object.assign(Object.assign(Object.assign({}, dateOptions), timeOptions), { showTime: Object.assign({ showSecond: this.showSecond }, timeOptions) }),
     };
-    const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue, onChange: newValue => this.set(newValue) }, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled })), { picker: this.type }), options[this.type]), { prefixCls: "bcm-date", suffixIcon: " ", autofocus: true, locale: enUS, className: cs(`bcm-date--${this.type}`, {
+    const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue, onChange: newValue => this.set(newValue) }, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled })), {
+      // picker: this.type,
+      picker: this.type === "datetime" ? "date" : this.type
+    }), options[this.type]), { prefixCls: "bcm-date", suffixIcon: " ", autofocus: true, locale: enUS, separator: " - ", changeOnBlur: true, className: cs(`bcm-date--${this.type}`, {
         [`bcm-date--${this.size}`]: this.size,
         "bcm-date--error": this.error,
+        "bcm-date--existed": this.newValue,
       }) });
     if (this.range) {
       ReactDOM.render(React.createElement(RangePicker, Object.assign({}, sharedProps)), this.el);

package/dist/collection/stories/ui-library/components/date/argTypes_common.js

@@ -8,7 +8,6 @@ export const argTypesCommon = {
     },
     "label": {
         control: "text",
-        defaultValue: "Label",
         description: "The label of the date picker.",
         table: {
             category: "Common Properties",

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

@@ -7,5 +7,5 @@ import Bcm from '../models/bcm';
 import { SlotTemplate } from './slot-template';
 export const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
   const ButtonTagType = (href) ? Bcm.HtmlElementType.a : Bcm.HtmlElementType.button;
-  return (h(ButtonTagType, Object.assign({ id: id }, (type == Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0", "aria-label": "button" }), h("span", { hidden: true }, h("slot", null)), loading && h("span", { class: "bcm-button__container-loading" }, " ", h("span", { class: "bcm-button__container-icon" }, h("i", { class: "far fa-spinner-third fa-spin" }), " ")), icon && h("span", { class: `${iconPosition} bcm-button__container-icon` }, h("i", { class: `${icon}` })), !isIconOnly && (h(SlotTemplate, { className: "bcm-button__container-text", value: value })), h("slot", { name: "suffix" })));
+  return (h(ButtonTagType, Object.assign({ id: id }, (type == Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0" }), h("span", { hidden: true }, h("slot", null)), loading && h("span", { class: "bcm-button__container-loading" }, " ", h("span", { class: "bcm-button__container-icon" }, h("i", { class: "far fa-spinner-third fa-spin" }), " ")), icon && h("span", { class: `${iconPosition} bcm-button__container-icon` }, h("i", { class: `${icon}` })), !isIconOnly && (h(SlotTemplate, { className: "bcm-button__container-text", value: value })), h("slot", { name: "suffix" })));
 };

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

@@ -11,8 +11,8 @@ maxLength, value, }) => {
   return ((noCaption == false || maxLength) && (h("div", { class: cs("bcm-ui-element bcm-ui-feedback bcm-caption-area tw-mt-1 tw-min-h-[20px] tw-flex tw-flex-row tw-items-start tw-justify-between tw-font-normal", {
       "tw-text-slate-500": !captionType || captionType == "default",
       "tw-text-blue-600": captionType == "info",
-      "tw-text-emerald-700": captionType == "success",
-      "tw-text-amber-700": captionType == "warning",
+      "tw-text-emerald-600": captionType == "success",
+      "tw-text-amber-600": captionType == "warning",
       "tw-text-red-600": captionType == "error",
     }, {
       "tw-text-1": size == "small",

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

@@ -57,5 +57,5 @@ ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported,
     type,
     autocomplete: autocomplete ? "on" : "off",
     pattern,
-  }), (ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize }), { value: value, maxLength: maxLength, "aria-label": placeholder || "Enter text", "aria-labelledby": id + "-label", title: "", placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: el => ref(el), onBlur: e => templateHandleBlur(e), onFocus: e => templateHandleFocus(e), onInput: e => handleInput(e), onChange: e => handleChange(e) })), h("span", { class: "input-suffix-content" }, clearable && !disabled && !readonly && (h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: e => handleClear(e) }, h("bcm-icon", { icon: "far fa-times" })))), h("span", { class: "input-suffix-content" }, (type === "password" || type === "text") && passwordToggle && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))), h("span", { class: "input-suffix-content" }, Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix" }, h("bcm-icon", { icon: defaultIcons[type] })))), h("span", { class: "input-suffix-content" }, type === "number" && (h("div", { class: caretContainer }, h("span", { class: "bcm-input-caret", onClick: () => steps("up") }, h("bcm-icon", { icon: "fas fa-caret-up" })), h("span", { class: "bcm-input-caret", onClick: () => steps("down") }, h("bcm-icon", { icon: "fas fa-caret-down" }))))), h("span", { class: "input-suffix-content" }, type !== "number" && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix }))), typeColor && isEyeDropperSupported() && (h("span", { class: "input-suffix" }, h("span", null, h("i", { class: "far fa-eye-dropper", onClick: () => eyeDropper() })))))));
+  }), (ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize }), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: el => ref(el), onBlur: e => templateHandleBlur(e), onFocus: e => templateHandleFocus(e), onInput: e => handleInput(e), onChange: e => handleChange(e) })), h("span", { class: "input-suffix-content" }, clearable && !disabled && !readonly && (h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: e => handleClear(e) }, h("bcm-icon", { icon: "far fa-times" })))), h("span", { class: "input-suffix-content" }, (type === "password" || type === "text") && passwordToggle && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))), h("span", { class: "input-suffix-content" }, Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix" }, h("bcm-icon", { icon: defaultIcons[type] })))), h("span", { class: "input-suffix-content" }, type === "number" && (h("div", { class: caretContainer }, h("span", { class: "bcm-input-caret", onClick: () => steps("up") }, h("bcm-icon", { icon: "fas fa-caret-up" })), h("span", { class: "bcm-input-caret", onClick: () => steps("down") }, h("bcm-icon", { icon: "fas fa-caret-down" }))))), h("span", { class: "input-suffix-content" }, type !== "number" && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix }))), typeColor && isEyeDropperSupported() && (h("span", { class: "input-suffix" }, h("span", null, h("i", { class: "far fa-eye-dropper", onClick: () => eyeDropper() })))))));
 };

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

@@ -8,7 +8,7 @@ import Bcm from "../models/bcm";
 export const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip }) => {
   size = size || "medium";
   type = type || Bcm.Status.default;
-  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-slate-600 ", {
+  return (h("label", { form: form, htmlFor: htmlFor, class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-slate-600 ", {
       "tw-text-1": size == "small",
       "tw-text-2": size == "medium",
       "tw-text-3": size == "large",

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

@@ -45,7 +45,7 @@ export const ListItemTemplate = ({ item, treeview, highlight, checkboxes, size,
     item.open = item.isSearching;
     openGroup(item.id);
   };
-  return (h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), tabIndex: unClickable || disabled ? -1 : 0, class: cs('bcm-list__item', 
+  return (h("div", { id: item.id, hidden: item.hidden, "on-focus": e => !unClickable && !disabled && focusItem(e), class: cs('bcm-list__item', 
     // size === 'large' ? 'size-3' : 'size-2',
     'bcm-list__item-' + size, {
       'bcm-list__item--group': !treeview && item.type == 'group',

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

@@ -5,13 +5,19 @@
 import { h } from '@stencil/core';
 import { InfoFooterTemplate } from './info-footer-template';
 import { ListItemTemplate } from './list-item-template';
-export 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, }) => {
+export const ListTemplate = ({ 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, }) => {
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
   const setScrollHeight = () => {
     const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
     const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
     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 {
+      'min-height': `${scrollHeight}px`,
+      'overscroll-behavior': 'none',
+      'height': '100%',
+      'display': 'flex',
+      'flex-direction': 'column',
+    };
   };
-  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) }, data && searchable && (h("section", { class: "bcm-list__container-search" }, h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))), h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: Object.assign({}, (type === 'select' && { 'overscroll-behavior': 'none' })) }, h("div", { style: setScrollHeight() }, 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) }))), items.map((item) => (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 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No data' })))), searchFound == 0 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No Data Found' })))))), infoFooter && data && data.length > 0 && (h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
+  return (h("div", { id: `bcm-list-${_id}`, class: bcmListContainer, "temp-id": `bcm-list-${tempId}`, style: { '--height': height, '--width': width }, onTransitionEnd: e => handleTransitionEnd(e) }, data && searchable && (h("section", { class: "bcm-list__container-search" }, h("bcm-search", { size: size, id: `bcm-list-${_id}-search`, data: data, clearable: true, placeholder: searchPlaceholder, "min-search-length": minSearchLength, searchIsOnlyChilds: searchIsOnlyChilds }))), h("main", { onScroll: e => onScrollEvent(e), class: "scrolling", style: { 'overscroll-behavior': 'none' } }, h("div", { style: setScrollHeight() }, 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) }))), items.map((item) => (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 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No data' })))), searchFound == 0 && (h("section", { class: "bcm-list__container-no-data" }, h("bcm-empty", { style: { height: 'auto' }, icon: emptyIcon }, h("span", { innerHTML: emptyText || 'No Data Found' })))))), infoFooter && data && data.length > 0 && (h(InfoFooterTemplate, { selected: value === null || value === void 0 ? void 0 : value.length, total: totalData, found: searchFound, multiple: checkboxes, variableText: variableText }))));
 };