bromcom-ui 2.3.54 → 2.3.58

package/dist/esm/bcm-list-item_2.entry.js

@@ -0,0 +1,192 @@
+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 { C as ColorPalette } from './colors-7c7b35e9.js';
+import { e as extractColor } from './utils-de9aee67.js';
+
+const listItemCss = "@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(.hidden){display:none}:host(.selected) .list-item{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item:hover:not(.disabled){color:var(--bcm-color-prime-blue-7);background-color:var(--bcm-color-prime-blue-1)}:host(.selected) .list-item.disabled{color:var(--bcm-color-grey-6);cursor:not-allowed}:host(.selected) .list-item .check{background-color:#333333}:host(.checkable) .list-item .check{display:inline-block}.list-item{padding:8px;color:var(--bcm-color-grey-8);background-color:var(--bcm-color-grey-1);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;white-space:break-spaces;margin:0 8px}.list-item .check{display:none;background-color:#ededed;width:15px;height:15px}.list-item .highlight{background-color:var(--bcm-color-yellow-5)}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-grey-8);background-color:var(--bcm-color-prime-blue-1)}.list-item .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:8px;margin-bottom:2px}.checkbox{}.checkbox input{display:none}.checkbox .svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}.checkbox label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}.checkbox label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px;background-color:var(--bcm-color-grey-1)}.checkbox.indeterminate label span.icon{position:relative}.checkbox.indeterminate label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.checkbox.indeterminate label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}.checkbox.indeterminate label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.checkbox input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}.checkbox input:checked+label .icon-checked{display:block}.checkbox bcm-icon{filter:brightness(0) invert(1)}.checkbox input[disabled]+label{cursor:not-allowed}.checkbox input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}.checkbox input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}.checkbox input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.checkbox .caption-area{margin-bottom:8px;min-height:20px;display:block}.checkbox .input-caption{display:block}.checkbox .caption-default{color:#8C8C8C}.checkbox .caption-primary{color:#4293CF}.checkbox .caption-success{color:#52C41A}.checkbox .caption-warning{color:#FA8C16}.checkbox .caption-error{color:#F5222D}.checkbox .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;display:flex;align-items:center;justify-content:center}.checkbox .radio-button>span.icon{display:none}.checkbox .radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.checkbox .radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.checkbox .radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.checkbox .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)}.checkbox .radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.checkbox .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)}.checkbox .radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.checkbox .radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.checkbox .radio-button.large{height:40px}.checkbox .radio-button.medium{height:32px}.checkbox .radio-button.small{height:24px}";
+
+const BcmListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.listSelected = createEvent(this, "bcm-list-selected", 7);
+    this.listChecked = createEvent(this, "bcm-list-checked", 7);
+    this.size = 'medium';
+    this.hidden = false;
+    this.disabled = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.template = null;
+    this._uniq_id = (Math.random() * 4).toString(16).replace('.', '');
+    // @Prop({ attribute: 'id', reflect: true           }) id: string = (Math.random() * 4).toString(16).replace('.', '')
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.itemObject = null;
+    this.selected = false;
+    this.multiSelect = false;
+  }
+  // @Event({ bubbles: true, composed: true }) loaded: EventEmitter<boolean>;
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() {
+    this.itemObject = this.itemObject;
+    // setTimeout(() => {
+    //     this.loaded.emit(true);
+    // }, 1000);
+  }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  /**
+   * @desc
+   */
+  async select() {
+    this.sendSelect();
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    this.sendSelect();
+  }
+  /**
+   * @desc
+   */
+  sendSelect() {
+    if (!this.disabled) {
+      var returnValue = null;
+      if (this.itemObject) {
+        typeof this.itemObject == 'string'
+          ? returnValue = JSON.parse(this.itemObject)
+          : returnValue = this.itemObject;
+        // returnValue = this.itemObject
+      }
+      else {
+        returnValue = this._id;
+      }
+      this.listSelected.emit(returnValue);
+    }
+  }
+  handleCheckboxClick(e) {
+    e.preventDefault();
+  }
+  render() {
+    const { size, disabled, selected, hidden, multiSelect } = this;
+    const classes = classnames('list-item', size, {
+      'disabled': disabled,
+      'selected': selected,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = classnames(hidden ? 'hidden' : null, {
+      'disabled': disabled,
+      'selected': selected,
+      'checkable': multiSelect,
+    });
+    const checkboxClasses = classnames('checkbox', this.hidden ? 'hidden' : null, {
+      'indeterminate': false
+    });
+    const checkboxIconClasses = classnames('icon');
+    return (h(Host, { class: hostClasses, onClick: () => this.handleClick() }, h("div", { class: classes }, multiSelect && (h("div", { class: "check-content" }, h("div", { class: checkboxClasses, onClick: (e) => this.handleCheckboxClick(e) }, h("input", { id: 'check-' + this._id, type: "checkbox", name: 'check-' + this._id, checked: this.selected, disabled: this.disabled }), h("label", { htmlFor: 'check-' + this._id }, h("span", { class: checkboxIconClasses }, h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))))), h("span", { id: "text" }, this.text ? this.text : h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+BcmListItem.style = listItemCss;
+
+/**
+ * '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 tagCss = "@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}.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:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}";
+
+const BcmTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checkedChange = createEvent(this, "bcm-tag-checked-change", 7);
+    this.tagDissmisable = createEvent(this, "bcm-tag-dissmisable", 7);
+    this.type = 'basic';
+    this.size = 'size-1';
+    this.checked = false;
+    this.value = '';
+    this.hidden = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.maxWidth = false;
+    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: extractColor(ColorPalette, ColorProps[color] + '-6'),
+        borderColor: extractColor(ColorPalette, ColorProps[color] + '-3'),
+        backgroundColor: extractColor(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 = classnames('tag', this.getSize(size), type);
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, this.maxWidth ? 'maxwidth' : null);
+    if (type === 'add') {
+      return (h(Host, { class: hostClasses }, h("button", { class: classes }, h("span", { class: "left" }, h("bcm-icon", { icon: "plus", type: "outlined", color: "grey-8", size: (Number(this.getSize(size, true)) + 2) })), value)));
+    }
+    else if (type === 'dissmisable') {
+      return (h(Host, { class: hostClasses }, h("span", { class: classes, style: this.getColor(color) }, h("span", { class: "value", style: customStyle }, value), h("span", { class: "right close-button", onClick: () => this.handleClose(), style: { 'width': (Number(this.getSize(size, true)) + 2) + "px" } }, h("bcm-icon", { id: "close", icon: "close", type: "outlined", size: (Number(this.getSize(size, true)) + 2) })))));
+    }
+    else if (type === 'checkable') {
+      return (h(Host, { class: hostClasses }, h("input", { type: "checkbox", checked: this.checked }), h("label", { class: classes }, value)));
+    }
+    return (h(Host, { class: hostClasses }, h("span", { class: classes, style: this.getColor(color) }, value)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["onCheckedChange"]
+  }; }
+};
+BcmTag.style = tagCss;
+
+export { BcmListItem as bcm_list_item, BcmTag as bcm_tag };