bromcom-ui 2.3.54 → 2.3.58

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

@@ -0,0 +1,100 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-8fe7aea4.js';
+import { c as classnames } from './index-e58a2d48.js';
+import { C as ColorPalette } from './colors-7c7b35e9.js';
+import { e as extractColor } from './utils-de9aee67.js';
+
+/**
+ * 'color' prop predefined values
+ */
+var ColorProps;
+(function (ColorProps) {
+  ColorProps["black"] = "black";
+  ColorProps["white"] = "white";
+  ColorProps["prime-blue"] = "prime-blue";
+  ColorProps["grey"] = "grey";
+  ColorProps["blue"] = "blue";
+  ColorProps["warmyellow"] = "warmyellow";
+  ColorProps["yellow"] = "yellow";
+  ColorProps["limegreen"] = "limegreen";
+  ColorProps["red"] = "red";
+  ColorProps["darkorange"] = "darkorange";
+  ColorProps["orange"] = "orange";
+  ColorProps["green"] = "green";
+  ColorProps["turquosie"] = "turquosie";
+  ColorProps["cobaltblue"] = "cobaltblue";
+  ColorProps["magenta"] = "magenta";
+  ColorProps["purple"] = "purple";
+  ColorProps["bc-red"] = "bc-red";
+  ColorProps["bc-blue"] = "bc-blue";
+  ColorProps["bc-green"] = "bc-green";
+  ColorProps["bc-orange"] = "bc-orange";
+})(ColorProps || (ColorProps = {}));
+
+const radioCss = "@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:inline-block}:host(.hidden){display:none}input[type=radio]{position:absolute;width:0;height:0;opacity:0}label{user-select:none;display:inline-flex;align-items:center;color:var(--bcm-color-grey-8);cursor:pointer}.radio-container .radio{width:16px;height:16px;min-width:16px;min-height:16px;border:1px solid var(--bcm-color-grey-5);border-radius:100%;background-color:var(--bcm-color-grey-1);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;transition-duration:0.3s;margin-right:8px}.radio-container .radio .inner{width:8px;height:8px;border-radius:100%;background-color:var(--bcm-color-grey-1)}.radio-container:hover:not(.disabled) .radio{border-color:var(--bcm-color-prime-blue-6);filter:drop-shadow(0px 2px 4px rgba(54, 121, 171, 0.5))}.radio-container.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-container.disabled .radio{border-color:var(--bcm-color-grey-5)}.radio-container.checked .radio{border-color:var(--bcm-color-prime-blue-6)}.radio-container.checked .inner{background-color:var(--bcm-color-prime-blue-6)}.radio-container.checked.disabled .radio{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.radio-container.checked.disabled .inner{background-color:var(--bcm-color-grey-6)}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
+
+const BcmRadio = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.change = createEvent(this, "bcm-change", 3);
+    this.focus = createEvent(this, "bcm-focus", 3);
+    this.blur = createEvent(this, "bcm-blur", 3);
+    this.optionType = 'default';
+    this.buttonStyle = 'solid';
+    this.size = 'medium';
+    this.hidden = false;
+    this.required = false;
+  }
+  handleFocus() {
+    this.focus.emit();
+  }
+  handleBlur() {
+    this.blur.emit();
+  }
+  /**
+   * @desc
+   * @param name -
+   * @returns {void}
+   */
+  async check(uncheck) {
+    this.radio.checked = uncheck;
+    this.handleChange();
+  }
+  handleChange() {
+    this.checked = this.radio.checked;
+    this.change.emit({
+      value: this.radio.value,
+      checked: this.radio.checked
+    });
+  }
+  connectedCallback() {
+    this.handleChange = this.handleChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+  }
+  getColor(color) {
+    if (this.color !== 'default' && this.optionType == 'button' && this.checked)
+      return {
+        // color:              extractColor(ColorPalette, ColorProps[color] + '-6'),
+        borderColor: extractColor(ColorPalette, ColorProps[color] + '-5'),
+        backgroundColor: extractColor(ColorPalette, ColorProps[color] + '-5')
+      };
+  }
+  render() {
+    const { checked, value, disabled, optionType, buttonStyle, size } = this;
+    const defaultClasses = classnames('radio-container', 'size-2', {
+      'checked': checked,
+      'disabled': disabled
+    });
+    const buttonClasses = classnames('radio-button', buttonStyle, size, {
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+      'checked': checked,
+      'disabled': disabled,
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("label", { class: optionType == 'default' ? defaultClasses : buttonClasses, style: this.getColor(this.color) }, h("input", { type: "radio", value: value, checked: checked, ref: el => (this.radio = el), onChange: this.handleChange, disabled: disabled }), optionType === 'default' && (h("span", { class: "radio" }, h("span", { class: "inner" }))), h("slot", null))));
+  }
+};
+BcmRadio.style = radioCss;
+
+export { BcmRadio as bcm_radio };

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
-import { a as dropInComponent } from './utils-b7fba7c4.js';
+import { b as dropInComponent } from './utils-de9aee67.js';
 
 const selectCss = "@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:inline-block;width:100%;margin:0 0 8px 0}:host(.hidden){display:none}.container{display:block;max-width:256px;position:relative}.container.full-width{width:100%;max-width:100%}.selected{width:100%;box-sizing:border-box;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--bcm-color-grey-5);user-select:none;cursor:pointer}.selected:hover:not(.disabled){border-color:var(--bcm-color-prime-blue-5)}.selected:hover:not(.disabled) .select-clear-button{opacity:1}.selected:focus:not(.disabled){border-color:var(--bcm-color-prime-blue-5);box-shadow:0px 0px 4px var(--bcm-color-prime-blue-6)}.selected:focus:not(.disabled) .select-clear-button{opacity:1}.selected:focus{outline:none}.selected.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8);cursor:not-allowed}.selected .buttons{padding:8px;height:100%;display:flex;align-items:center;justify-content:center}.selected .selected-text{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;padding:0 8px;width:100%}.selected .selected-tags{padding:0 4px;height:100%}.selected .tag-container{height:100%;display:flex;align-items:center;justify-content:flex-start;grid-gap:2px}.selected .tag-container>span{height:100%;align-items:center;justify-content:flex-start;display:flex;grid-gap:2px}.selected .tag-container .tag{max-width:200px}.selected .tag-container #other-tag{cursor:pointer}.selected .open,.selected .close{display:inline-flex}.selected .close{transform:rotate(180deg)}.selected .placeholder{color:var(--bcm-color-grey-6);user-select:none;font-size:14px;height:100%;display:flex;align-items:center;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.options-viewport{display:inline-block}.option-container{display:block;position:absolute;background-color:var(--bcm-color-grey-1);box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15);box-sizing:border-box;width:100%;z-index:10000}.option-container.alignment-left{left:0}.option-container.alignment-right{right:0}.option-container.hidden{display:none}.option-container .search{position:sticky;padding:8px;margin-bottom:4px}.option-container .search:after{content:\"\";position:absolute;bottom:0;height:1px;width:calc( 100% - 16px);background-color:var(--bcm-color-grey-5)}.options-viewport{display:block}.options-viewport bcm-select-option,.options-viewport ::slotted(bcm-select-option){white-space:normal}.options-viewport.hidden{display:none}.options-viewport.vertical{height:fit-content;max-height:200px}.options-viewport.horizontal:not(.flex){overflow-x:auto;width:100%}.options-viewport.horizontal:not(.flex) bcm-select-option,.options-viewport.horizontal:not(.flex) ::slotted(bcm-select-option){white-space:nowrap}.items{display:flex;flex-direction:column}.buttons{display:flex}.select-clear-button{display:inline-flex;align-items:center;outline:none;border:none;background:none;padding:0;cursor:pointer;margin-right:4px;opacity:0}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.selected-large{height:40px}.selected-medium{height:32px}.selected-small{height:24px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.error .label{color:var(--bcm-color-red-6) !important}.error .selected{border:1px solid var(--bcm-color-red-6) !important}";
 
@@ -335,12 +335,72 @@ const BcmSelect = class {
     }
   }
   async addChecked(id = []) {
-    this.renderListbox();
-    await this.createElement();
-    await delay(100);
-    if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
-      this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
-      await this.bcmListbox.addChecked(id);
+    if (this.isRendered == true) {
+      this.renderListbox();
+      await this.createElement();
+      await delay(100);
+      if (document.getElementById("select-box" + this._internal_id) && document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox")) {
+        this.bcmListbox = document.getElementById("select-box" + this._internal_id).shadowRoot.querySelector("bcm-listbox");
+        await this.bcmListbox.addChecked(id);
+      }
+    }
+    else {
+      var checkedItems = id;
+      var _checkedItems = [];
+      if (this._items && this._items.length > 0) {
+        if (this.checkboxes === true) {
+          if (this._items.find(e => String(e[this.objectMapping['checked']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['checked']]) === "true").forEach(element => {
+              element[this.objectMapping['checked']] = false;
+            });
+          }
+        }
+        else {
+          if (this._items.find(e => String(e[this.objectMapping['selected']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['selected']]) === "true").forEach(element => {
+              element[this.objectMapping['selected']] = false;
+            });
+          }
+        }
+        if (typeof checkedItems == 'string') {
+          if (this.checkboxes === false) {
+            const item = this._items.find(e => String(e[this.objectMapping['id']]) === String(checkedItems))[this.objectMapping['id']];
+            this.value = item;
+            this.selectText = item[this.objectMapping['text']];
+          }
+        }
+        else {
+          if (this.checkboxes === true) {
+            checkedItems.forEach(id => {
+              var findItem = this._items.find(e => String(e[this.objectMapping['id']]) == String(id));
+              if (findItem) {
+                findItem[this.objectMapping['checked']] = "true";
+              }
+            });
+          }
+          if (this._items && this._items.find(e => String(e[this.objectMapping['checked']]) === "true")) {
+            this._items.filter(e => String(e[this.objectMapping['checked']]) === "true").forEach(item => {
+              _checkedItems.push(item);
+            });
+          }
+        }
+      }
+      else {
+        this.handleClear();
+      }
+      this._data = JSON.stringify(this._items);
+      this.itemsWidth = [];
+      if (this.checkboxes == true) {
+        this.value = String(_checkedItems);
+        this.handleTagControl2(_checkedItems);
+        this.checklist = _checkedItems;
+      }
+      else {
+        if (this.value != null) {
+          this.value = null;
+        }
+        this.checklist = [];
+      }
     }
   }
   async updateChecked(id = []) {
@@ -1032,7 +1092,7 @@ const BcmSelect = class {
       'overflow': 'hidden',
       'display': 'block'
     };
-    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("label", { class: "label size-1", onClick: () => this.handleOpen(false) }, " ", label, " ", required && ('*'), "  "), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e), tabIndex: -1 }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" })))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+    return (h(Host, { class: hostClasses, onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }, h("div", { class: container }, label && h("div", null, h("bcm-label", { onClick: () => this.handleOpen(false), tooltip: this.tooltip, type: captionType, value: label, required: required })), h("div", { id: "selected-container", class: selected, onClick: (e) => this.handleOpen(e), tabIndex: -1 }, h("span", { class: selectedText, title: this.selectText && (this.selectText) }, (this.selectText && (this.selectText)), ((!this.selectText && (this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0)) && (h("span", { id: "tagcontainer", class: "tag-container" }, h("span", null, this.onShowVisibleTags.map((item) => (h("bcm-tag", { _internal_id: this._internal_id, customStyle: customStyleTag, onClick: () => this.handleClickTag(), type: "dissmisable", value: item[this.objectMapping['text']], title: item[this.objectMapping['text']], id: item[this.objectMapping['id']], class: "tag" })))), h("span", null, this.onShowHiddenTags.length > 0 && (h("bcm-tag", { _internal_id: this._internal_id, title: this.hiddenTagsString, customStyle: customStyleOtherTag, onClick: (e) => this.showHiddenTags(e), color: this.otherTagStatus ? 'prime-blue' : 'grey-9', type: "dissmisable", value: "+ " + this.onShowHiddenTags.length + " item" + (this.onShowHiddenTags.length > 1 ? 's' : '') + " selected", id: "other-tag" })))))), (!(this.selectText || this.onShowVisibleTags.length > 0 || this.onShowHiddenTags.length > 0) && placeholder && (h("span", { class: "placeholder" }, " ", placeholder, " ")))), h("div", { class: "buttons" }, clearable && value && (h("button", { class: "select-clear-button", onClick: (e) => this.clickClear(e) }, h("bcm-icon", { icon: "close-circle", type: "fill", size: 18, color: "grey-7" }))), h("span", { class: this.isOpen ? 'open' : 'close' }, h("bcm-icon", { icon: "caret-up", type: "outlined", size: 18, color: "grey-6" })))), h("div", { class: menu, style: optionViewportStyle }, h("div", { class: optionsViewport })), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
       ? h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && h("span", { class: captionClasses }, " ", caption, " "))))));
   }

package/dist/esm/bcm-tab-pane.entry.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8fe7aea4.js';
+import { c as classnames } from './index-e58a2d48.js';
+
+const tabPaneCss = "@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{width:100%;display:block}:host(.hidden){display:none}:host(:not(.active)){height:0 !important;overflow:hidden;padding:0 !important}:host(.active){display:block}";
+
+/**
+ * @desc
+ * @param str
+ */
+const lowercase = (str) => str.toLowerCase();
+const BcmTabPane = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'medium';
+    this.hidden = false;
+    this.fullWidth = false;
+    this.tab = (Math.random() * 4).toString(16).replace('.', '');
+    this.active = false;
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  handleActiveTabPane(e) {
+    if (lowercase(e.target.nodeName) === 'bcm-tab') {
+      if (e.target.tabId === this.tab) {
+        this.active = true;
+      }
+      else {
+        this.active = false;
+      }
+    }
+  }
+  render() {
+    const classes = classnames('tab-pane', this.size);
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.active ? 'active' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+BcmTabPane.style = tabPaneCss;
+
+export { BcmTabPane as bcm_tab_pane };

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

@@ -0,0 +1,68 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8fe7aea4.js';
+import { c as classnames } from './index-e58a2d48.js';
+import { T as TypeProps } from './types-4b11eac9.js';
+
+const tabCss = "@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}slot[name=icon-suffix]::slotted(bcm-icon){margin-left:10px}slot[name=icon-prefix]::slotted(bcm-icon){margin-right:10px}.tab{position:relative;display:flex;justify-content:center;align-items:center;padding:var(--bcm-tab-vertical-space) 14px var(--bcm-tab-vertical-space) 14px;color:var(--bcm-color-grey-8);font-size:var(--bcm-tab-font-size);line-height:var(--bcm-tab-line-height);cursor:pointer;user-select:none}.tab.active{color:var(--bcm-color-prime-blue-6)}.tab.active::before{content:\"\";bottom:-2px;left:0;width:100%;height:2px;background-color:var(--bcm-color-prime-blue-6);position:absolute;z-index:1}.tab:hover{color:var(--bcm-color-prime-blue-5)}.tab:active,.tab:focus{color:var(--bcm-color-prime-blue-7)}.tab[disabled],.tab.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}.tab.closable:not(.pane){padding-left:0;padding-right:0}.tab.closable .close{margin-left:34px}.tab.pane{border:1px solid transparent;border-bottom:none;border-color:var(--bcm-color-grey-5);background-color:var(--bcm-color-grey-3);border-radius:2px 2px 0 0}.tab.pane.active{background-color:#ffffff}.badge{padding-left:8px;position:relative}.badge.blink:after{content:\"\";position:absolute;top:8px;left:9px;background:black;border-radius:50%;height:7px;width:7px;box-shadow:0 0 0 0 rgba(0, 0, 0, 0);transform:scale(1)}.badge.success:after{animation:pulsesuccess 2s infinite;background-color:#52C41A}.badge.error:after{animation:pulseerror 2s infinite;background-color:#F5222D}.badge.default:after{animation:pulsedefault 2s infinite;background-color:#D9D9D9}.badge.processing:after{animation:pulseprocessing 2s infinite;background-color:#4293CF}.badge.warning:after{animation:pulsewarning 2s infinite;background-color:#FA8C16}@keyframes pulsesuccess{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(82, 196, 26, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulseerror{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(245, 34, 45, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulsedefault{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(217, 217, 217, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulseprocessing{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(66, 147, 207, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}@keyframes pulsewarning{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(250, 140, 22, 0.7)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}";
+
+const BcmTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.click = createEvent(this, "bcm-click", 7);
+    this.close = createEvent(this, "bcm-close", 7);
+    /**
+     * Component Properties
+     */
+    this.type = TypeProps.normal;
+    this.active = false;
+    this.disabled = false;
+    this.closable = false;
+    this.tabId = (Math.random() * 4).toString(16).replace('.', '');
+    this.formControl = null;
+    this.hidden = false;
+    this.status = 'default';
+    this.badge = false;
+    this.blink = false;
+  }
+  /**
+   * @desc
+   */
+  handleClose() {
+    if (this.disabled)
+      return;
+    this.close.emit();
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleClick(event) {
+    if (this.disabled)
+      return;
+    const targetElement = event.target;
+    // Detect close icon clicked
+    // #
+    if (String(targetElement.tagName).toLowerCase() == 'bcm-icon' && targetElement.classList.contains('close')) {
+      this.close.emit(event);
+    }
+    else {
+      this.click.emit(event);
+    }
+  }
+  render() {
+    const { active, disabled, closable } = this;
+    const classes = classnames('tab', [this.type], {
+      'active': active,
+      'disabled': disabled,
+      'closable': closable
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    const badgeClasses = classnames('badge', this.status, {
+      'blink': this.blink
+    });
+    return (h(Host, { class: hostClasses }, h("div", { class: classes, onClick: (event) => this.handleClick(event) }, h("slot", { name: "icon-prefix" }), h("slot", null), h("slot", { name: "icon-suffix" }), this.closable && (h("bcm-icon", { class: "close", icon: "close", color: "grey-10" })), this.badge && (h("bcm-badge", { class: badgeClasses, size: "small", status: this.status })))));
+  }
+  get el() { return getElement(this); }
+};
+BcmTab.style = tabCss;
+
+export { BcmTab as bcm_tab };

package/dist/esm/bcm-tabs-content.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-8fe7aea4.js';
+import { c as classnames } from './index-e58a2d48.js';
+import { g as getChilds } from './utils-de9aee67.js';
+import { T as TypeProps } from './types-4b11eac9.js';
+
+const tabsContentCss = "@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{width:100%;display:block;padding:8px}:host(.pane){border:1px solid transparent;border-top:none;border-color:var(--bcm-color-grey-5);border-radius:0 0 2px 2px}";
+
+const BcmTabsContent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'medium';
+    this.hidden = false;
+    this.fullWidth = false;
+    this.type = TypeProps.normal;
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  handleActivePane(e) {
+    getChilds(this.el, 'bcm-tab-pane').forEach(items => {
+      items.tab == e.detail && (items.active = true);
+      items.tab != e.detail && (items.active = false);
+    });
+  }
+  render() {
+    const classes = classnames('tabs-content', this.size);
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.type);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+BcmTabsContent.style = tabsContentCss;
+
+export { BcmTabsContent as bcm_tabs_content };