bromcom-ui 2.8.1-rc.1 → 2.8.1-rc.10-1

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

@@ -59,7 +59,7 @@ const setValue = val => {
 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(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: [] })), { ct: `${parentIndex}${index}` })));
   }

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

@@ -0,0 +1,15 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Host, h } from "@stencil/core";
+export class BcmContent {
+  constructor() {
+    this.el.slot = "content";
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "bcm-content"; }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/{molecules → third-parts}/colorful/colorful.css

@@ -356,7 +356,6 @@
   -moz-appearance: none;
   appearance: none;
   outline: none;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -446,9 +445,6 @@
 .bcm-input__container--large {
   font-size: 16px;
 }
-.bcm-input__textarea .bcm-input-element {
-  white-space: normal;
-}
 .bcm-input__textarea.clearable .bcm-input-element {
   padding-right: 24px;
 }
@@ -463,7 +459,7 @@ bcm-colorful {
   flex-direction: column;
   width: 256px;
   padding: 8px;
-  background-color: var(--bcm-new-ds-color-white);
+  background-color: #fff;
   border-radius: 4px;
 }
 

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

@@ -0,0 +1,138 @@
+@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
+ */
+.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;
+}
+
+.rc-overflow {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.rc-overflow-item {
+  transition: all 0.3s ease;
+  padding: 0 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,194 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate, StringHelper } from "@bcm/helpers";
+import Overflow from "rc-overflow";
+import React from "react";
+import ReactDOM from "react-dom";
+export class BcmRcOverflow {
+  constructor() {
+    this.renderItem = item => {
+      return React.createElement("bcm-tooltip", {
+        placement: "bottom",
+        message: item.text,
+        trigger: "hover",
+      }, React.createElement("div", {
+        id: item.value + "-tag",
+        className: "bcm-tag",
+        onClick: ({ target }) => this.onClickControl(target, item, false),
+      }, React.createElement("span", { className: "bcm-tag__content dismissable" }, 
+      // .bcm-tag__content span {
+      //     display: block;
+      //     max-width: 38px;
+      //     white-space: nowrap;
+      //     overflow: hidden;
+      //     text-overflow: ellipsis;
+      React.createElement("div", { className: "value tw-block tw-max-w-[38px] tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap" }, item.text), React.createElement("span", {
+        className: "right close-button",
+      }, React.createElement("bcm-icon", {
+        icon: "fa fa-times",
+      })))));
+    };
+    this.renderRest = items => {
+      const titles = (items === null || items === void 0 ? void 0 : items.sort((a, b) => +a.ct - +b.ct).slice(0, 15).map(item => StringHelper.textLimitter(item.text, 40, true)).toString().split(",").join("\r\n")) + (items.length > 15 ? "\r\n..." : "");
+      return React.createElement("bcm-tooltip", {
+        placement: "bottom",
+        message: titles,
+        trigger: "hover",
+      }, React.createElement("div", {
+        className: "bcm-tag bcm-tag--other",
+        onClick: ({ target }) => this.onClickControl(target, items, true),
+      }, React.createElement("span", { className: `bcm-tag__content dismissable ${this.checked ? "checkable checked" : ""}` }, React.createElement("span", { className: "value" }, `+${items === null || items === void 0 ? void 0 : items.length}`), React.createElement("span", { className: "right close-button" }, React.createElement("bcm-icon", {
+        icon: "fa fa-times",
+      })))));
+    };
+    this._id = Generate.UID();
+    this.maxCount = 1;
+    this.data = [];
+    this.checked = false;
+  }
+  isClickDismiss(e) {
+    return e["s-hn"] === "BCM-ICON";
+  }
+  onClickControl(e, item, isOtherTag = false) {
+    const isClickClose = this.isClickDismiss(e);
+    isClickClose && this.deleteTag.emit({ id: Array.isArray(item) ? item.map(i => i.value) : item.value }) && this.checked && (this.checked = false);
+    !isOtherTag && this.selectTag.emit({ id: item.value }) && this.checked && (this.checked = false);
+    if (isOtherTag && !isClickClose) {
+      this.checked = !this.checked;
+      this.selectOtherTag.emit({ id: item === null || item === void 0 ? void 0 : item.map(i => i.value), checked: this.checked });
+    }
+  }
+  componentWillRender() {
+    const { data, renderItem, renderRest, maxCount } = this;
+    this.overflowInstance = React.createElement(Overflow, {
+      data,
+      renderItem,
+      renderRest,
+      maxCount,
+    });
+    ReactDOM.render(this.overflowInstance, this.el);
+  }
+  static get is() { return "bcm-rc-overflow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["rc-overflow.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["rc-overflow.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "maxCount": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | \"responsive\" | \"invalidate\"",
+          "resolved": "\"invalidate\" | \"responsive\" | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max-count",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "[]",
+          "resolved": "[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "checked": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectOtherTag",
+        "name": "bcm-select-other-tag",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "selectTag",
+        "name": "bcm-select-tag",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "deleteTag",
+        "name": "bcm-delete-tag",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/helper/generate.js

@@ -23,6 +23,15 @@ if (isAllowedDomain()) {
     body.classList.add(`bcm-theme-${theme}`);
   }
 })();
+(function checkOverlayContainer() {
+  const body = document.querySelector("body");
+  let overlayContainer = document.querySelector("#bcm-overlay-container");
+  if (!overlayContainer) {
+    overlayContainer = document.createElement("div");
+    overlayContainer.id = "bcm-overlay-container";
+    body.appendChild(overlayContainer);
+  }
+})();
 export class Generate {
   static getTwColor(color, variable = "--bcm-color-default") {
     if (!color || !colors[color]) {

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

@@ -9,8 +9,8 @@ export const ListTemplate = ({ highlight, selectAllItem, bcmListContainer, treev
   const showSelectAll = !(treeview && searchFound > 0) && !(searchFound > 0);
   const setScrollHeight = () => {
     const itemHeight = size === 'small' ? 28 : size === 'medium' ? 36 : 48;
-    const itemCount = searchFound >= 0 || (treeview ? items.length : totalData);
-    let scrollHeight = itemCount * itemHeight || 0;
+    const itemCount = searchFound == null ? (treeview ? items.length : totalData) : searchFound;
+    const scrollHeight = itemCount * itemHeight || 0;
     return {
       'min-height': `${scrollHeight}px`,
       'overscroll-behavior': 'none',

package/dist/components/bcm-alert.js

@@ -5,7 +5,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate.js';
 import { c as classnames } from './index2.js';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { S as StringHelper } from './string-helper.js';
 import { d as defineCustomElement$2 } from './icon.js';
 

package/dist/components/bcm-checkbox-group.js

@@ -7,7 +7,7 @@ import { c as classnames } from './index2.js';
 import { G as Generate, s as snq } from './generate.js';
 import { B as Bcm } from './bcm.js';
 import { d as delay, g as getChildElements } from './utils.js';
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { L as LabelTemplate } from './label-template.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { d as defineCustomElement$5 } from './checkbox.js';

package/dist/components/bcm-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmContent extends Components.BcmContent, HTMLElement {}
+export const BcmContent: {
+  prototype: BcmContent;
+  new (): BcmContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/bcm-content.js

@@ -0,0 +1,35 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const BcmContent$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.el.slot = "content";
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-content"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmContent$1);
+      }
+      break;
+  } });
+}
+
+const BcmContent = BcmContent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmContent, defineCustomElement };

package/dist/components/bcm-dropdown.js

@@ -57,6 +57,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.minHeight = '50px';
     this.stopDeepClean = false;
     this.selectable = true;
+    this.gap = '4px';
     this.color = undefined;
     this.activeItem = null;
     this.data = [];
@@ -79,13 +80,6 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   handleSlotItems({ detail }) {
     this.data = detail;
   }
-  componentDidLoad() {
-    var _a;
-    const bcmContent = this.el.querySelector('bcm-content');
-    if (bcmContent) {
-      (_a = document.getElementById(this.menuId)) === null || _a === void 0 ? void 0 : _a.appendChild(bcmContent);
-    }
-  }
   setActiveAttribute(e) {
     if (e.detail) {
       this.bcmDropdownChange.emit(e.detail);
@@ -105,7 +99,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       'bcm-dropdown__icon--open': isOpen,
     });
     const dropdownIcon = (h("span", { class: iconClasses }, h("bcm-icon", { icon: this.dropdownIcon })));
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail), "onBcm-menu-change": e => this.setActiveAttribute(e) }))));
+    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail), "onBcm-menu-change": e => this.setActiveAttribute(e), gap: this.gap, dropdown: true }), h("slot", { name: "content" }))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -139,6 +133,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "minHeight": [1, "min-height"],
     "stopDeepClean": [4, "stop-deep-clean"],
     "selectable": [4],
+    "gap": [1],
     "color": [8],
     "data": [1032],
     "activeItem": [32],