bromcom-ui 2.3.65 → 2.3.69

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

@@ -0,0 +1,385 @@
+import { Component, h, Host, Listen, Prop, State, Element, Method, Event } from '@stencil/core';
+import cs from 'classnames';
+export class BcmAutocomplete {
+  constructor() {
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'value': "value",
+    };
+    this.searchFields = ['text', 'secondary_text', 'tooltip_text'];
+    this._items = [];
+    this.fullWidth = false;
+    this.hidden = false;
+    this.searchText = null;
+    this.returnField = "id";
+    this.searchSub = "items";
+    this.searchPlaceholder = "Search";
+    this.inputLength = 0;
+    this.isOpen = false;
+    this.resultFound = false;
+    this.searchResults = [];
+    this.items = [];
+  }
+  async config(_config) {
+    await customElements.whenDefined("bcm-listbox");
+    this.bcmListbox = this.el.shadowRoot.querySelector("bcm-listbox");
+    await this.bcmListbox.config(_config);
+    if (_config['searchFields']) {
+      if (Array.isArray(_config['searchFields'])) {
+        this.searchFields = _config['searchFields'];
+      }
+    }
+    if (_config['searchSub']) {
+      typeof _config['searchSub'] == 'string'
+        ? this.searchSub = _config['searchSub']
+        : this.searchSub = null;
+    }
+    if (_config['fullWidth']) {
+      typeof _config['fullWidth'] == 'boolean'
+        ? this.fullWidth = _config['fullWidth']
+        : this.fullWidth = false;
+    }
+    if (_config['searchPlaceholder']) {
+      typeof _config['searchPlaceholder'] == 'string'
+        ? this.searchPlaceholder = _config['searchPlaceholder']
+        : this.searchPlaceholder = null;
+    }
+    if (_config['mapping']) {
+      if (_config['mapping']['id']) {
+        this.objectMapping['id'] = _config['mapping']['id'];
+        this.returnField = this.objectMapping['id'];
+      }
+      if (_config['mapping']['text']) {
+        this.objectMapping['text'] = _config['mapping']['text'];
+      }
+      if (_config['mapping']['value']) {
+        this.objectMapping['value'] = _config['mapping']['value'];
+      }
+      if (_config['mapping']['items']) {
+        this.objectMapping['items'] = _config['mapping']['items'];
+        this.searchSub = this.objectMapping['items'];
+      }
+    }
+  }
+  async setData(_data = []) {
+    await customElements.whenDefined("bcm-listbox");
+    this.bcmListbox = this.el.shadowRoot.querySelector("bcm-listbox");
+    await this.bcmListbox.setData(_data);
+    this.searchData = JSON.parse(_data);
+  }
+  /**
+   * @desc
+   */
+  async handleListboxClearSelected(e) {
+    const optionValue = e.detail[this.objectMapping['text']];
+    const search = this.el.shadowRoot.querySelector("bcm-search");
+    this.autocompleteItemSelected.emit(e.detail);
+    await search.setValue(optionValue);
+    this.isOpen = false;
+  }
+  listenSearchValue(e) {
+    this.inputLength = e.detail.length;
+    if (this.inputLength > 0) {
+      this.isOpen = true;
+    }
+    else {
+      this.isOpen = false;
+    }
+  }
+  async listenSearchResult(e) {
+    this.searchResults = e.detail;
+    const bcmListboxx = this.el.shadowRoot.querySelector("bcm-listbox");
+    await bcmListboxx.searchResultMethod(this.searchResults);
+  }
+  handleClickOutside(e) {
+    if (!this.el.contains(e.target)) {
+      if (this.isOpen)
+        this.isOpen = false;
+    }
+    else {
+      if (this.inputLength > 0) {
+        this.isOpen = true;
+      }
+      else {
+        this.isOpen = false;
+      }
+    }
+  }
+  render() {
+    const { searchText, searchData, searchFields, searchSub, returnField, isOpen, fullWidth } = this;
+    const classes = cs('bcm-autocomplete', {
+      'open': isOpen
+    });
+    const classesSearch = cs('bcm-autocomplete-search');
+    const classesResult = cs('bcm-autocomplete-result', {
+      'open': isOpen
+    });
+    const hostClasses = cs(this.hidden ? 'hidden' : null, {
+      'full-width': fullWidth
+    });
+    return (h(Host, { class: hostClasses },
+      h("div", { class: classes },
+        h("div", { class: classesSearch },
+          h("bcm-search", { searchPlaceholder: this.searchPlaceholder, id: "autocomplete", searchValue: searchText, data: searchData, returnField: returnField, searchFields: searchFields, searchSub: searchSub, clearable: true })),
+        h("div", { class: classesResult },
+          h("div", { class: "viewport" },
+            h("bcm-listbox", { searchText: searchText, _flex: "true" }))))));
+  }
+  static get is() { return "bcm-autocomplete"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["autocomplete.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["autocomplete.css"]
+  }; }
+  static get properties() { return {
+    "searchFields": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "['text', 'secondary_text', 'tooltip_text']"
+    },
+    "_items": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<object> | string",
+        "resolved": "object[] | string",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data",
+      "reflect": false,
+      "defaultValue": "[]"
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "full-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "searchText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "searchtext",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "returnField": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "return-field",
+      "reflect": false,
+      "defaultValue": "\"id\""
+    },
+    "searchSub": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "search-sub",
+      "reflect": false,
+      "defaultValue": "\"items\""
+    },
+    "searchPlaceholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "searchplaceholder",
+      "reflect": false,
+      "defaultValue": "\"Search\""
+    }
+  }; }
+  static get states() { return {
+    "inputLength": {},
+    "isOpen": {},
+    "resultFound": {},
+    "searchData": {},
+    "searchResults": {},
+    "items": {}
+  }; }
+  static get events() { return [{
+      "method": "autocompleteItemSelected",
+      "name": "bcm-autocomplete-item-selected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "config": {
+      "complexType": {
+        "signature": "(_config: Array<object>) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "setData": {
+      "complexType": {
+        "signature": "(_data?: Array<object> | string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "bcm-listbox-item-selected",
+      "method": "handleListboxClearSelected",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "bcm-on-search-value",
+      "method": "listenSearchValue",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "bcm-on-search",
+      "method": "listenSearchResult",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "handleClickOutside",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,246 @@
+@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;
+}
+
+/**
+ * Generator
+ */
+:host {
+  position: relative;
+  margin: 0 0 8px 0;
+}
+
+.color-picker {
+  position: relative;
+  width: 200px;
+}
+.color-picker.open .picker {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1) translateY(56px);
+}
+
+.picker {
+  width: 300px;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+  background-color: #ffffff;
+  border: 1px solid #F6F6F6;
+  box-shadow: 0px 3px 3.6px 0.4px rgba(0, 0, 0, 0.15);
+  opacity: 0;
+  visibility: hidden;
+  transition: transform 0.2s ease, opacity 0.3s ease;
+  transform: scale(0.8) translateY(-100px);
+}
+
+.label {
+  display: flex;
+  flex-direction: column;
+  color: var(--bcm-color-grey-9);
+  margin-bottom: 4px;
+}
+
+.caption-area {
+  min-height: 20px;
+}
+
+.input-caption {
+  display: block;
+}
+
+.input {
+  display: flex;
+  cursor: pointer;
+  border: 1px solid var(--bcm-color-grey-5);
+  border-radius: 2px;
+}
+
+.color {
+  position: relative;
+  width: 100%;
+  height: 166px;
+  user-select: none;
+}
+.color img {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  pointer-events: none;
+}
+
+.color-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 17px;
+  height: 17px;
+  border: 1px solid rgba(255, 255, 255, 0.82);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  transform: translate(0, 0);
+  border-radius: 100%;
+  user-select: none;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.colors {
+  position: relative;
+  width: 100%;
+  height: 16px;
+  margin-top: 8px;
+}
+.colors img {
+  width: 100%;
+  user-select: none;
+  pointer-events: none;
+}
+
+.colors-holder {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  transform: translateY(-50%);
+  border-radius: 8px;
+  user-select: none;
+}
+
+.colors-indicator {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 17px;
+  height: 17px;
+  border: 2px solid rgba(255, 255, 255, 0.82);
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+  transform: translateY(-50%);
+  border-radius: 100%;
+  user-select: none;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.transparency {
+  position: relative;
+  width: 100%;
+  height: 16px;
+  margin-top: 8px;
+}
+
+.transparency-holder {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 8px;
+  overflow: hidden;
+  transform: translateY(-50%);
+  border-radius: 8px;
+  background: transparent none repeat center center/20px;
+}
+
+.transparency-indicator {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 17px;
+  height: 17px;
+  border: 2px solid rgba(255, 255, 255, 0.82);
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
+  transform: translateY(-50%);
+  border-radius: 100%;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.colors-transparency {
+  padding: 16px;
+}
+
+.active-color {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 30px;
+}
+.active-color .color-thumb {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border-radius: 1px 0 0 1px;
+}
+.active-color .color-text {
+  font-size: 14px;
+  color: #656565;
+  margin-left: 8px;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: 30px;
+  color: var(--bcm-color-grey-6);
+}
+
+.color-input {
+  border: none;
+  width: 100%;
+  padding: 10px;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}