bromcom-ui 2.8.1-rc.2 → 2.8.1-rc.3

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

@@ -463,7 +463,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/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';