bromcom-ui 2.3.63 → 2.3.67

package/dist/bromcom-ui/bcm-result.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const statuses = {
+  success: {
+    icon: 'check-circle',
+    color: 'green-6'
+  },
+  info: {
+    icon: 'info-circle',
+    color: 'blue-6'
+  },
+  warning: {
+    icon: 'warning',
+    color: 'warmyellow-6'
+  },
+  error: {
+    icon: 'close-circle',
+    color: 'grey-10'
+  }
+};
+
+const resultCss = "@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}:host{display:block}:host(.hidden){display:none}.result{display:flex;flex-direction:column;align-items:center;padding:32px 24px}.result .content{margin-top:24px}.result .content .heading{margin-bottom:8px}.result .content .heading,.result .content .desc{display:block;text-align:center}.result .content .extra{background-color:#F5F5F5;padding:24px 24px;margin:32px 0}@media screen and (min-width: 576px){.result .content .extra{padding:24px 40px}}.result .content .buttons{display:flex;justify-content:center;grid-gap:8px;flex-wrap:wrap}";
+
+const BcmResult = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.status = null;
+    this.hidden = false;
+  }
+  getIcon() {
+    if (this.status != null) {
+      const icon = statuses[this.status].icon;
+      const color = statuses[this.status].color;
+      return (h("div", { class: "icon" }, h("bcm-icon", { icon: icon, color: color, type: "fill", size: 72 })));
+    }
+  }
+  componentDidRender() {
+    const slot = this.el.shadowRoot.querySelector('slot').assignedElements();
+    slot.map(el => {
+      if (String(el.tagName).toLowerCase() === 'bcm-result-footer') {
+        el.slot = 'footer';
+        this.footerArea = true;
+        this.footerHtml = el.innerHTML;
+        el.innerHTML = "";
+      }
+    });
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: "result" }, this.getIcon(), h("div", { class: "content" }, h("span", { class: "heading size-5 weight-semibold" }, this.heading), h("span", { class: "desc size-2" }, this.description), h("div", { class: "extra" }, h("slot", null)), (this.footerArea && (h("div", { class: "buttons", innerHTML: this.footerHtml })))))));
+  }
+  get el() { return getElement(this); }
+};
+BcmResult.style = resultCss;
+
+export { BcmResult as bcm_result };

package/dist/bromcom-ui/bcm-search-2.entry.js

@@ -0,0 +1,193 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-dbc63c66.js';
+import { G as Generate } from './generate-0a22e8df.js';
+import './index-43956e3c.js';
+import { c as createStore } from './index-dd5c1283.js';
+import { s as snq } from './snq.es5-946822b8.js';
+import './bcm-ad02f9c9.js';
+import { J as JsonParse } from './json-parse-decarator-223ea680.js';
+import { I as InputTemplate } from './input-template-5d288c2e.js';
+
+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 = 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 Generate.flatArray(results);
+};
+const nestedSearch = (items, searchText) => {
+  let result = [];
+  if (items && items.length > 0) {
+    items.forEach(child => {
+      if (child.text.toLowerCase().includes(searchText.toLowerCase())) {
+        result.push(child.id);
+        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.length > 0) {
+          found.forEach(chi => {
+            result.push(chi);
+          });
+          result.push(child.id);
+        }
+      }
+    });
+  }
+  ;
+  return result;
+};
+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._id = Generate.UID();
+    this.placeholder = "Search";
+    this.disabled = false;
+    this.readonly = false;
+    this.clearable = true;
+    this.limit = 10;
+    this.data = [];
+    this.tick = {};
+    this.debounceHandler = Generate.debounceInput((event) => this.onSearchValue(event, this), 500, false);
+  }
+  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");
+  }
+  handleFocus() { }
+  handleBlur() { }
+  handleChange() { }
+  handleClear() {
+    this.inputElement.value = '';
+    const { value, id } = this.inputElement;
+    searchState.searchData(id, value);
+    this.bcmOnSearch.emit(null);
+  }
+  onSearchValue(event, instance) {
+    const { value, id } = event.target;
+    const searchResult = value.length > 0 ? searchState.searchData(id, value) : null;
+    const { bcmOnSearch } = instance;
+    bcmOnSearch.emit(searchResult);
+  }
+  render() {
+    const { _id, placeholder, disabled, readonly, clearable } = this;
+    return h(Host, null, h(InputTemplate, { size: "medium", id: _id, type: "text", placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: clearable, 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/bromcom-ui/bcm-search.entry.js

@@ -0,0 +1,162 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const searchCss = "@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}:host{display:block}:host(.hidden){display:none}";
+
+const lowercase = (str) => str.toLowerCase();
+const BcmSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmOnSearch = createEvent(this, "bcm-on-search", 7);
+    this.bcmOnSearchValue = createEvent(this, "bcm-on-search-value", 7);
+    this.data = [];
+    this.searchFields = ['text', 'value' /*, ...*/];
+    this.returnField = 'idx';
+    this.searchSub = null;
+    this.hidden = false;
+    this.onlyChild = false;
+    this.clearable = false;
+    this.searchValue = '';
+    this.searchPlaceholder = 'Search';
+    this.disabled = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.results = [];
+  }
+  componentDidLoad() {
+    this.el.shadowRoot.querySelector('bcm-input').clearable = this.clearable;
+  }
+  listenBcmChange(e) {
+    e.stopPropagation();
+  }
+  async setValue(value) {
+    const input = this.el.shadowRoot.querySelector('bcm-input');
+    await input.setValue(value);
+    return value;
+  }
+  async select() {
+    const input = this.el.shadowRoot.querySelector('bcm-input');
+    await input.select();
+    this.bcmOnSearch.emit(true);
+    return true;
+  }
+  async setClear() {
+    const input = this.el.shadowRoot.querySelector('bcm-input');
+    await input.setClear();
+    this.bcmOnSearch.emit(true);
+    return true;
+  }
+  async searchArray(value, idFields = null) {
+    // console.log(this.data)
+    let cacheSearchFields = this.searchFields;
+    let arrayResult = [];
+    if (idFields) {
+      this.searchFields = [idFields];
+    }
+    value.forEach(item => {
+      // item = {[idFields]:item}
+      this.results = [];
+      // console.log(this.data)
+      this.nestedSearch(this.data, item, true);
+      arrayResult.push(...this.results);
+    });
+    this.searchFields = cacheSearchFields;
+    return arrayResult;
+    // const input = this.el.shadowRoot.querySelector("bcm-input");
+    // await input.setValue( value )
+    // return value
+  }
+  nestedSearch(items, value, equal = false) {
+    var result;
+    items && (items.map((item) => {
+      this.searchFields.map(searchField => {
+        if (searchField in item) {
+          // debugger;
+          item[searchField] = lowercase(String(item[searchField]));
+          if (this.onlyChild) {
+            if (item[this.searchSub]) {
+              var temp = this.nestedSearch(item[this.searchSub], value, equal);
+              if (temp) {
+                this.results.push((result = String(item[this.returnField])));
+                this.results.push(temp);
+              }
+            }
+            else {
+              if (equal) {
+                // console.log(value)
+                if (item[searchField] == lowercase(String(value))) {
+                  // if (item == lowercase(value)) {
+                  this.results.push((result = String(item[this.returnField])));
+                  // this.results.push (result = String(item))
+                }
+              }
+              else {
+                if (item[searchField].indexOf(lowercase(value)) !== -1) {
+                  this.results.push((result = String(item[this.returnField])));
+                }
+              }
+            }
+          }
+          else {
+            if (item[this.searchSub]) {
+              var temp = this.nestedSearch(item[this.searchSub], value, equal);
+              if (temp) {
+                this.results.push((result = String(item[this.returnField])));
+                this.results.push(temp);
+              }
+            }
+            if (equal) {
+              // console.log(value)
+              if (item[searchField] == lowercase(String(value))) {
+                // if (item == lowercase(value)) {
+                this.results.push((result = String(item[this.returnField])));
+                // this.results.push (result = String(item))
+              }
+            }
+            else {
+              if (item[searchField].indexOf(lowercase(value)) !== -1) {
+                this.results.push((result = String(item[this.returnField])));
+              }
+            }
+          }
+        }
+      });
+    }));
+    return result;
+  }
+  /**
+   * @desc
+   * @param value
+   */
+  inputChange(value) {
+    this.results = [];
+    // data prop'unda arama yapılacak (searchFields prop'u içerisindeki alanlar ile)
+    // arama sonucunda eşleyen itemların 'idx', index
+    // değerleri, array şeklinde root component'e
+    // event ile gönderilecek
+    // Örneğin value == 'to' olduğunda aşağıdaki
+    // sonuçlar filtrelenmeli
+    // -->
+    //{ text: 'Mateusz Eaton', idx: 2 },
+    //{ text: 'Tony Vickers', idx: 3 },
+    // result array'i eşleşen itemların
+    // index numaralarını tutacak
+    // results = [2, 3]
+    // Örnek arama
+    // #
+    this.nestedSearch(this.data, value);
+    this.results = Array.from(new Set(this.results));
+    (value && ((this.results.length > 0 && this.bcmOnSearch.emit(this.results)) || this.bcmOnSearch.emit([-1]))) || this.bcmOnSearch.emit(true);
+    this.bcmOnSearchValue.emit(value);
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("bcm-input", { placeholder: this.searchPlaceholder, "no-caption": true, "no-margin": true, "full-width": true, disabled: this.disabled, type: "search", "on-bcm-change": e => this.inputChange(e.detail), value: this.searchValue })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "searchValue": ["inputChange"]
+  }; }
+};
+BcmSearch.style = searchCss;
+
+export { BcmSearch as bcm_search };

package/dist/bromcom-ui/bcm-select-box.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const selectBoxCss = "@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}.select-box{flex:1}:host{z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.show){opacity:1;z-index:100000}";
+
+const BcmSelectBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+    this.isShow = false;
+  }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  render() {
+    const classes = classnames('select-box');
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'show': this.isShow,
+    });
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("bcm-listbox", { id: "listbox-box" + this._internal_id, class: "listbox-box", _internal_id: this._internal_id, "inner-component": true, "no-caption": true, fullWidth: true, _flex: "true" }))));
+  }
+  get el() { return getElement(this); }
+};
+BcmSelectBox.style = selectBoxCss;
+
+export { BcmSelectBox as bcm_select_box };

package/dist/bromcom-ui/bcm-select-group.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const groupCss = "@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}:host{display:block}:host(.hidden){display:none}.group{display:none}.group.visible{display:block}.group-title{color:var(--bcm-color-grey-7);padding:4px 8px;display:block}";
+
+const BcmSelectGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.visible = true;
+    this.hidden = false;
+  }
+  render() {
+    const classes = classnames('group', {
+      'visible': this.visible
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("span", { class: "group-title size-1" }, " ", this.heading, " "), h("slot", null))));
+  }
+};
+BcmSelectGroup.style = groupCss;
+
+export { BcmSelectGroup as bcm_select_group };

package/dist/bromcom-ui/bcm-select-option.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const optionCss = "@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}:host{display:block;width:100%;box-sizing:border-box;min-width:256px}:host(.hidden){display:none}:host-context(bcm-select-group) .option{padding-left:16px}.option{display:none;padding:4px 8px;cursor:pointer;color:var(--bcm-color-grey-8);box-sizing:border-box;width:100%}.option:hover:not(.disabled){background-color:var(--bcm-color-prime-blue-1)}.option.selected:not(.disabled){background-color:var(--bcm-color-grey-3)}.option.disabled{background-color:var(--bcm-color-grey-5);color:var(--bcm-color-grey-6);cursor:not-allowed}.option.disabled:not(.selected){background-color:var(--bcm-color-prime-blue-1)}.option.visible{display:inline-flex}";
+
+const BcmSelectOption = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.visible = true;
+    this.hidden = false;
+  }
+  async getLabel() {
+    return this.host.innerHTML;
+  }
+  render() {
+    const classes = classnames('option', 'size-2', {
+      'selected weight-semibold': this.selected,
+      'disabled': this.disabled,
+      'visible': this.visible
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("span", { class: classes }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+BcmSelectOption.style = optionCss;
+
+export { BcmSelectOption as bcm_select_option };