bromcom-ui 2.11.1-rc.9-5 → 2.11.1-rc.9-7

package/dist/cjs/bcm-old-tag_2.cjs.entry.js

@@ -1,145 +0,0 @@
-/*!
- * Built with Stencil
- * Copyright (c) Bromcom.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-c591ecec.js');
-const index$1 = require('./index-95ae50d0.js');
-const colors = require('./colors-56282b00.js');
-const utils = require('./utils-fc077139.js');
-require('./_commonjsHelpers-ed84c3ca.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 oldTagCss = "@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}.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}.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:fit-content}:host(.hidden){display:none}:host(.maxwidth){max-width:100px}.tag{display:flex;align-items:center;justify-content:center;padding:0 8px;cursor:default;border-radius:48px;border:1px solid var(--bcm-color-grey-5);user-select:none;min-width:10px;min-height:20px}.tag.size-1{padding:calc(8px - 8px) 8px}.tag.size-2{padding:calc(9px - 8px) 9px}.tag.size-3{padding:calc(10px - 8px) 10px}.tag.size-4{padding:calc(11px - 8px) 11px}.tag.size-5{padding:calc(12px - 8px) 12px}.tag.size-6{padding:calc(13px - 8px) 13px}.tag.size-7{padding:calc(14px - 8px) 14px}.tag.size-8{padding:calc(15px - 8px) 15px}.tag.size-9{padding:calc(16px - 8px) 16px}.tag.basic,.tag.closeable,.tag.add,.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.basic:hover,.tag.closeable:hover,.tag.add:hover,.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer}.tag.dissmisable .close-button bcm-icon{color:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover bcm-icon{color:var(--bcm-color-grey-10)}.tag.add{border-style:dashed;background-color:var(--bcm-color-grey-1)}.tag.checkable{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border-color:var(--bcm-color-grey-1)}.tag.checkable:hover{color:var(--bcm-color-prime-blue-5);cursor:pointer}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}button{border:none;outline:0;cursor:pointer !important;margin:0}input[type=checkbox]{margin:0;width:0;height:0;visibility:hidden;position:absolute}input[type=checkbox]:checked+label{background-color:var(--bcm-color-prime-blue-6);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-prime-blue-6)}input[type=checkbox]:checked+label:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}input[type=checkbox]:checked+label.checkable:hover{color:var(--bcm-color-grey-1)}input[type=checkbox]:checked+label:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}";
-
-const BcmOldTag = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checkedChange = index.createEvent(this, "bcm-old-tag-checked-change", 7);
-    this.tagDissmisable = index.createEvent(this, "bcm-old-tag-dissmisable", 7);
-    this.type = 'basic';
-    this.size = 'size-1';
-    this.checked = false;
-    this.color = undefined;
-    this.value = '';
-    this.hidden = false;
-    this._id = (Math.random() * 4).toString(16).replace('.', '');
-    this.maxWidth = false;
-    this.customStyle = undefined;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-  }
-  handleClick() {
-    if (this.type === 'checkable') {
-      this.checked = !this.checked;
-    }
-  }
-  onCheckedChange(newValue, oldValue) {
-    this.checkedChange.emit({ newValue, oldValue });
-  }
-  getColor(color) {
-    if ((this.type == 'basic' || this.type == 'dissmisable') && ColorProps[color])
-      return {
-        color: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-6'),
-        borderColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-3'),
-        backgroundColor: utils.extractColor(colors.ColorPalette, ColorProps[color] + '-1')
-      };
-  }
-  getSize(size, returnNumber = false) {
-    if (Number(size) == size) {
-      size = "size-" + size;
-    }
-    if (returnNumber) {
-      size = size.split("-");
-      size = size[size.length - 1];
-      var sizeList = { "1": "12", "2": "14", "3": "16", "4": "20", "5": "24", "6": "30", "7": "38", "8": "46", "9": "56" };
-      size = sizeList[size];
-    }
-    return size;
-  }
-  handleClose() {
-    this.tagDissmisable.emit(this.el);
-    // this.el.remove()
-  }
-  render() {
-    const { type, color, value, customStyle, size } = this;
-    const classes = index$1.classnames('tag', this.getSize(size), type);
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, this.maxWidth ? 'maxwidth' : null);
-    if (type === 'add') {
-      return (index.h(index.Host, { class: hostClasses }, index.h("button", { class: classes }, index.h("span", { class: "left" }, index.h("bcm-icon", { icon: "far fa-plus" })), value)));
-    }
-    else if (type === 'dissmisable') {
-      return (index.h(index.Host, { class: hostClasses }, index.h("span", { class: classes, style: this.getColor(color) }, index.h("span", { class: "value", style: customStyle }, value), index.h("span", { class: "right close-button", onClick: () => this.handleClose(), style: { 'width': (Number(this.getSize(size, true)) + 2) + "px" } }, index.h("svg", { id: "close", style: { "fill": "#595959", "width": "14px", "height": "14px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" }, index.h("path", { d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }))))));
-    }
-    else if (type === 'checkable') {
-      return (index.h(index.Host, { class: hostClasses }, index.h("input", { type: "checkbox", checked: this.checked }), index.h("label", { class: classes }, value)));
-    }
-    return (index.h(index.Host, { class: hostClasses }, index.h("span", { class: classes, style: this.getColor(color) }, value)));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "checked": ["onCheckedChange"]
-  }; }
-};
-BcmOldTag.style = oldTagCss;
-
-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}.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}.select-box{flex:1}:host{z-index:-999;position:absolute;opacity:0;top:-10000;left:-10000;visibility:hidden !important;box-shadow:0px 2px 8px rgba(0, 0, 0, 0.15)}:host(.show){opacity:1;z-index:100000;visibility:visible !important}";
-
-const BcmSelectBox = class {
-  constructor(hostRef) {
-    index.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() { }
-  handleChangeEvent(event) {
-    event.stopPropagation();
-  }
-  render() {
-    const classes = index$1.classnames('select-box');
-    const hostClasses = index$1.classnames(this.hidden ? 'hidden' : null, {
-      'show': this.isShow,
-    });
-    return (index.h(index.Host, { class: hostClasses }, index.h("div", { class: classes }, index.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 index.getElement(this); }
-};
-BcmSelectBox.style = selectBoxCss;
-
-exports.bcm_old_tag = BcmOldTag;
-exports.bcm_select_box = BcmSelectBox;