bromcom-ui 2.4.18 → 2.4.19

package/dist/esm/bcm-popover-box.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-2a0ccf17.js';
 import { c as classnames } from './index-1597de83.js';
 import './types-911a8837.js';
-import { G as Generate } from './generate-42ba55c9.js';
+import { G as Generate } from './generate-b11810eb.js';
 import './bcm-1571bb45.js';
 import { S as StringHelper } from './string-helper-cfa6df93.js';
 import { g as getPlacement, s as setPosition } from './popover-placement-38aa9b63.js';

package/dist/esm/bcm-popover.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2a0ccf17.js';
 import { c as classnames } from './index-1597de83.js';
 import './types-911a8837.js';
-import { G as Generate } from './generate-42ba55c9.js';
+import { G as Generate } from './generate-b11810eb.js';
 import { B as Bcm } from './bcm-1571bb45.js';
 import { A as AttrReflect } from './property-decorators-681ae42e.js';
 

package/dist/esm/bcm-search-2.entry.js

@@ -0,0 +1,302 @@
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-2a0ccf17.js';
+import { c as classnames } from './index-1597de83.js';
+import './types-911a8837.js';
+import { s as snq } from './snq.es5-946822b8.js';
+import { J as JsonParse } from './json-parse-decarator-8563927a.js';
+import { G as Generate } from './generate-b11810eb.js';
+import { B as Bcm } from './bcm-1571bb45.js';
+import { S as StringHelper } from './string-helper-cfa6df93.js';
+import { c as createStore } from './index-3c5b7898.js';
+
+var defaultIcons;
+(function (defaultIcons) {
+  defaultIcons["search"] = "search";
+  defaultIcons["email"] = "mail";
+  defaultIcons["tel"] = "phone";
+  defaultIcons["url"] = "link";
+})(defaultIcons || (defaultIcons = {}));
+var iconSizes;
+(function (iconSizes) {
+  iconSizes[iconSizes["small"] = 14] = "small";
+  iconSizes[iconSizes["medium"] = 16] = "medium";
+  iconSizes[iconSizes["large"] = 18] = "large";
+})(iconSizes || (iconSizes = {}));
+
+const InputTemplate = ({ elementType, 
+//textarea
+rows, 
+//props
+id, internalId, type, placeholder, value, size, 
+//,
+unit, unitPrefix, maxLength, 
+//boolean
+disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDefaultIcon, inValid, captionType, resize, 
+// custom functions
+changePasswordVisibility, handleClear, steps, 
+//event functions
+ref, handleBlur, handleFocus, handleInput, handleChange }) => {
+  const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
+  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
+  value = value || '';
+  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
+  const templateHandleFocus = (e) => {
+    e.target.parentElement.classList.add('focused');
+    handleFocus(e);
+  };
+  const templateHandleBlur = (e) => {
+    e.target.parentElement.classList.remove('focused');
+    handleBlur(e);
+  };
+  var containerClass = classnames('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && classnames('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && classnames('input-size-' + Bcm.Size[size]), {
+    'focused': focused,
+    'clearable': clearable,
+    disabled,
+    readonly,
+    'invalid': inValid,
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    // 'empty': value?.length < 1,
+    'error': captionType === 'error'
+  });
+  const caretContainer = classnames('caret-container', {
+    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    'disabled': disabled || readonly || inValid
+  });
+  const inputClass = size === 'large' ? 'size-3' : 'size-2';
+  const unitClass = classnames(inputClass, 'unit-prefix');
+  return (h("div", { class: containerClass },
+    h("span", { hidden: true },
+      h("slot", null)),
+    h("span", { class: "input-prefix" },
+      h("slot", { name: "prefix" }),
+      unitPrefix && h("span", { class: unitClass }, unitPrefix)),
+    h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && { type: type })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows })), { 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) })),
+    (clearable && !disabled) &&
+      h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) },
+        h("bcm-icon", { icon: "close-circle", type: "fill", size: iconSizes[size], color: "grey-7" })),
+    (type === 'password' && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() },
+      h("bcm-icon", { icon: isPasswordVisible ? "eye-invisible" : "eye", type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" },
+      h("bcm-icon", { icon: defaultIcons[type], type: "outlined", size: iconSizes[size], color: "grey-7" }))),
+    type === 'number' && (h("div", { class: caretContainer },
+      h("span", { class: "caret", onClick: () => steps('up') },
+        h("bcm-icon", { icon: "caret-up", type: "outlined", color: "grey-7", size: 8 })),
+      h("span", { class: "caret", onClick: () => steps('down') },
+        h("bcm-icon", { icon: "caret-down", type: "outlined", color: "grey-7", size: 8 })))),
+    type !== 'number' && (h("span", { class: "input-suffix" },
+      h("slot", { name: "suffix" })))));
+};
+
+const { state } = createStore({
+  value: new Map(),
+});
+const setValue = (val) => {
+  const { id, dataSource } = val;
+  const data = {
+    id: snq(() => id, Generate.UID),
+    dataSource: recursive(dataSource)
+  };
+  state.value.set(data.id, data);
+};
+const recursive = (data, parentId) => {
+  const recData = data.map((item) => (Object.assign(Object.assign(Object.assign({}, item), { parentId: parentId || null }), (item.items && { items: snq(() => recursive(item.items, item.id), []) }))));
+  return recData;
+};
+const removeValue = (_id) => {
+  state.value.delete(_id);
+};
+const getValue = (id) => snq(() => state.value.get(id), {});
+const getDataPagination = (id, limit = 3) => {
+  let data = [];
+  const value = getValue(id);
+  if (value) {
+    const { dataSource } = value;
+    data = dataSource.slice(0, limit);
+  }
+  return data;
+};
+// //search treeview data by text
+// const searchData = (id, search, items?) => {
+//     let dataSource
+//     if (items && items.length > 0) {
+//         dataSource = items
+//     } else {
+//         const value = getValue(id);
+//         dataSource = value.dataSource;
+//     }
+//     let result = []
+//     if (dataSource) {
+//         dataSource.forEach(child => {
+//             if (child.text.toLowerCase().includes(search.toLowerCase())) {
+//                 result.push(child)
+//             }
+//             result = result.concat(searchData(id, search, child.items))
+//         })
+//     };
+//     return result
+// };
+//nested search
+const searchData = (id, searchText, items) => {
+  let dataSource;
+  if (items && items.length > 0) {
+    dataSource = items;
+  }
+  else {
+    const value = getValue(id);
+    dataSource = value.dataSource;
+  }
+  let results = [];
+  if (dataSource) {
+    results.push(nestedSearch(dataSource, searchText));
+    //return with their parents
+    // dataSource.forEach(child => {
+    //     if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
+    //         results.push(child)
+    //     } else if (child.items && child.items.length > 0) {
+    //         child.items = nestedSearch(child.items, searchText)
+    //         if (child.items.length > 0) {
+    //             results.push(child)
+    //         }
+    //     }
+    // })
+  }
+  return { result: Generate.flatArray(results[0].result), matching: results[0].matching, parentIndex: results[0].parentIndex, nestedResult: results[0].nestedResult };
+};
+const nestedSearch = (items, searchText) => {
+  let matching = [];
+  let parentIndex = [];
+  let result = [];
+  let nestedResult = [];
+  if (items && items.length > 0) {
+    items.forEach(child => {
+      if (StringHelper.slugify(child.text).indexOf(StringHelper.slugify(searchText)) > -1) {
+        result.push(child.id);
+        matching.push(child.id);
+        parentIndex.push(child.id);
+        nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId });
+        // if (child.items && child.items.length > 0) {
+        //     child.items.forEach(chi => {
+        //         result.push(chi.id)
+        //     })
+        // }
+      }
+      else if (child.items && child.items.length > 0) {
+        const found = nestedSearch(child.items, searchText);
+        if (found.result.length > 0) {
+          found.result.forEach(chi => {
+            result.push(chi);
+          });
+          result.push(child.id);
+          parentIndex.push(child.id);
+          nestedResult.push({ id: child.id, text: child.text, parentId: child.parentId, items: found.nestedResult });
+        }
+        if (found.matching.length > 0) {
+          matching.push(...found.matching);
+        }
+      }
+    });
+  }
+  return { result, matching, parentIndex, nestedResult };
+};
+const searchState = {
+  setValue,
+  removeValue,
+  getValue,
+  getDataPagination,
+  searchData
+};
+
+var __decorate = (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 BcmSearch2 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmOnSearch = createEvent(this, "bcm-on-search", 7);
+    this.bcmOnSearchClear = createEvent(this, "bcm-on-search-clear", 7);
+    this._id = Generate.UID();
+    this.placeholder = "Search";
+    this.disabled = false;
+    this.readonly = false;
+    this.clearable = true;
+    this.limit = 10;
+    this.data = [];
+    this.tick = {};
+    this.isActiveClearable = false;
+    this.debounceHandler = 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;
+    });
+  }
+  async componentDidLoad() {
+    await this.initState();
+  }
+  async dataChanged(newValue, oldValue) {
+    // console.log('data changed', newValue, oldValue)
+    if (newValue !== oldValue) {
+      await this.initState();
+    }
+  }
+  async initState() {
+    await searchState.setValue({
+      id: this._id,
+      dataSource: this.data,
+    });
+    await this.markForCheck();
+  }
+  markForCheck() {
+    this.tick = Generate.UID();
+  }
+  handleInput() {
+    // console.log("aheyya")
+  }
+  async onBcmFocus() {
+    this.inputElement.focus();
+  }
+  async onBcmBlur() {
+    this.inputElement.blur();
+  }
+  async onBcmSelect() {
+    this.inputElement.select();
+  }
+  async setValue(newValue) {
+    this.inputElement.value = newValue;
+  }
+  handleFocus() { }
+  handleBlur() { }
+  handleChange() { }
+  async handleClear(eventEmit = true) {
+    this.inputElement.value = '';
+    const { value, id } = this.inputElement;
+    searchState.searchData(id, value);
+    this.isActiveClearable = false;
+    this.bcmOnSearch.emit({ result: null, value: null, matching: null, parentIndex: null });
+    this.bcmOnSearchClear.emit(eventEmit);
+    return Promise.resolve();
+  }
+  onSearchValue(event, instance) {
+    const { value, id } = event.target;
+    const searchResult = (value === null || value === void 0 ? void 0 : value.length) >= 2 ? searchState.searchData(id, value) : null;
+    const { bcmOnSearch, inputElement } = instance;
+    bcmOnSearch.emit({ result: searchResult === null || searchResult === void 0 ? void 0 : searchResult.result, value: inputElement === null || inputElement === void 0 ? void 0 : inputElement.value, matching: searchResult === null || searchResult === void 0 ? void 0 : searchResult.matching, parentIndex: searchResult === null || searchResult === void 0 ? void 0 : searchResult.parentIndex, nestedResult: searchResult === null || searchResult === void 0 ? void 0 : searchResult.nestedResult });
+  }
+  render() {
+    const { _id, placeholder, disabled, readonly } = this;
+    return h(Host, { onClick: () => { this.onBcmFocus(); this.onBcmSelect(); } }, h(InputTemplate, { size: "medium", id: _id, type: "text", 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 getElement(this); }
+  static get watchers() { return {
+    "data": ["dataChanged"]
+  }; }
+};
+__decorate([
+  JsonParse('data')
+], BcmSearch2.prototype, "data", void 0);
+
+export { BcmSearch2 as bcm_search_2 };

package/dist/esm/bcm-stepper.entry.js

@@ -1,13 +1,13 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-2a0ccf17.js';
 import { c as classnames } from './index-1597de83.js';
 import { c as getChildElements } from './utils-b0af8e4d.js';
+import './types-911a8837.js';
 import { s as snq } from './snq.es5-946822b8.js';
 import { J as JsonParse } from './json-parse-decarator-8563927a.js';
-import './types-911a8837.js';
-import { G as Generate } from './generate-42ba55c9.js';
+import { G as Generate } from './generate-b11810eb.js';
 import { B as Bcm } from './bcm-1571bb45.js';
 import './index-3c5b7898.js';
-import { s as stepperStates } from './stepper-states-706439d0.js';
+import { s as stepperStates } from './stepper-states-7457f702.js';
 
 const StepperHeaderTemplate = ({ title, description, status, valid, index, loading, active, stepChange, statusIcon, icon, disabled }) => {
   const classes = classnames('bcm-stepper__header-item', `bcm-stepper__header-item--${status}`, {

package/dist/esm/bcm-tag-2.entry.js

@@ -2,9 +2,9 @@ import { h, r as registerInstance, c as createEvent, g as getElement } from './i
 import { c as classnames } from './index-1597de83.js';
 import { C as ColorPalette } from './colors-7c7b35e9.js';
 import { e as extractColor } from './utils-b0af8e4d.js';
-import { s as snq } from './snq.es5-946822b8.js';
 import './types-911a8837.js';
-import { G as Generate } from './generate-42ba55c9.js';
+import { s as snq } from './snq.es5-946822b8.js';
+import { G as Generate } from './generate-b11810eb.js';
 import { B as Bcm } from './bcm-1571bb45.js';
 
 class NumberHelper {