bromcom-ui 2.3.63 → 2.3.64

package/dist/{esm → bromcom-ui}/bcm-list-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 { d as delay, p as pluralize } from './utils-de9aee67.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { d as delay, p as pluralize } from './utils-1feb01eb.js';
 
 const listSelectCss = "@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:256px;margin:0 0 8px 0;overflow:hidden;max-width:100%}:host(.hidden){display:none}:host(.full-width){width:100%}:host(.type-autocomplete) #selected-container{border:none}:host(.type-autocomplete) #selected-container .selected-text{padding:0;border:none}:host(.type-autocomplete) #selected-container .selected-text bcm-input{display:contents}.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;border-radius:2px;position:relative}.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{padding:0 8px;width:100%;height:100%;flex:1;display:flex;align-items:center;overflow:hidden}.selected .selected-text .text-content{display:-webkit-box;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical}.selected .selected-text .text-content.autocomplete{position:absolute;z-index:1;padding-left:7px;background-color:#ffffff;margin-left:2px}.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;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)}.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}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.9}.spinner.first-run{visibility:visible;opacity:1}.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;height:20px}.tag[hidden]{opacity:0 !important;position:absolute !important;z-index:-1}.tag .value{cursor:pointer;max-width:164px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.tag.size-large{padding:calc(40px - 8px) 40px}.tag.size-medium{padding:calc(32px - 8px) 32px}.tag.size-small{padding:calc(24px - 8px) 24px}.tag.dissmisable{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-8)}.tag.dissmisable:hover{opacity:0.85}.tag.dissmisable{color:var(--bcm-color-grey-10)}.tag.dissmisable .close-button{width:14px;cursor:pointer;fill:var(--bcm-color-grey-7)}.tag.dissmisable .close-button:hover{fill:var(--bcm-color-grey-10)}.tag span{display:inline-flex}.tag span.left{margin-right:4px}.tag span.right{margin-left:4px}.tag:before,.tag:after{content:\"\"}";
 
@@ -116,6 +116,7 @@ const BcmListSelect = class {
       case "other":
         list_id = "bcm-clone-list-" + this._internal_id;
         break;
+      default: break;
     }
     element = document.getElementById(list_id);
     if (element != null) {
@@ -159,6 +160,7 @@ const BcmListSelect = class {
       case "other":
         list_id = "bcm-clone-list-" + this._internal_id;
         break;
+      default: break;
     }
     element = document.getElementById(list_id);
     if (element != null) {
@@ -178,6 +180,7 @@ const BcmListSelect = class {
       case "other":
         list_id = "bcm-clone-list-" + this._internal_id;
         break;
+      default: break;
     }
     element = document.getElementById(list_id);
     if (element != null) {
@@ -465,6 +468,7 @@ const BcmListSelect = class {
         }
       }
     }
+    else { }
     // await delay(100)
     this.handleLoading(false);
   }

package/dist/{esm → bromcom-ui}/bcm-list.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 { d as delay, b as dropInComponent, g as getChilds, p as pluralize } from './utils-de9aee67.js';
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+import { d as delay, b as dropInComponent, a as getChilds, p as pluralize } from './utils-1feb01eb.js';
 
 const listCss = "@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;position:relative;user-select:none;width:fit-content;height:fit-content}:host main{width:256px;height:256px;background-color:#ffffff;border:1px solid #d9d9d9;box-sizing:border-box;transition:height 1s ease 1s;display:flex;flex-direction:column;position:relative;padding-top:8px}:host(.full-width){width:100%}:host(.full-width) main{width:100%}:host(.linked){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(.linked.show){opacity:1;visibility:visible !important;z-index:100000}:host(.flex){width:100%;height:100%}:host(.flex) main{width:100%}:host(.type-autocomplete) .search-container{height:0;margin:0;padding:0;overflow:hidden}.label{display:block;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}:host(.error) .label{color:var(--bcm-color-red-6) !important}:host(.error) main{border:1px solid var(--bcm-color-red-6) !important}.search-container{margin:0 8px;padding-top:8px;background-color:#ffffff}.search-container+.list-container{padding-top:0}.footer{text-align:right;padding:4px 8px;background-color:var(--bcm-color-grey-3)}.list-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;grid-gap:4px;position:relative}.list-container .list{display:flex;flex-direction:column;grid-gap:4px}.check-container{display:block}.check-container.hidden{display:none}.empty{display:none;align-items:center;justify-content:center;flex:1;height:100%}.empty.show{display:flex}.spinner{position:absolute;z-index:1;top:0;opacity:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#ffffff;visibility:hidden;transition:opacity 0.3s, visibility 0.5s}.spinner.show{visibility:visible;opacity:0.8}.spinner.first-run{visibility:visible;opacity:0.9}.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;margin:0 8px}.list-item:hover:not(.disabled),.list-item:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.divider{margin:0 8px}";
 
@@ -312,6 +312,8 @@ const BcmList = class {
             this.checked(selectedIDs);
             // }
             break;
+          default:
+            break;
         }
       }
       this.calculatedTotals({ "total": this.items.length });
@@ -860,6 +862,8 @@ const BcmList = class {
         case false:
           this.checklist = this.checklist.filter(item => item[this.objectMapping['id']] !== checkItem[this.objectMapping['id']]);
           break;
+        default:
+          break;
       }
       let sorted = this.checklist.sort(function (a, b) { return a - b; });
       this.checklist = sorted;
@@ -903,6 +907,7 @@ const BcmList = class {
             this.checkStatus = false;
             this.indeterminateStatus = false;
             break;
+          default: break;
         }
         var indeterminateCheckbox;
         if (indeterminateCheckbox = this.el.shadowRoot.querySelector('#check-lite-' + this._id)) {

package/dist/bromcom-ui/bcm-listbox-group.entry.js

@@ -0,0 +1,26 @@
+import { r as registerInstance, h, f as Host } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const listboxGroupCss = "@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}.listbox-group-title{padding:4px 16px;background-color:var(--bcm-color-grey-7);position:sticky;top:0;z-index:1}";
+
+const uppercase = (str) => str.toUpperCase();
+const BcmListboxGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.hidden = false;
+  }
+  componentWillLoad() {
+    this.text = uppercase(this.text);
+  }
+  render() {
+    const { text } = this;
+    const classes = classnames('listbox-group');
+    const classesTitle = classnames('listbox-group-title');
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: classesTitle }, h("bcm-text", { scale: "size-2", color: "grey-1" }, " ", text, " ")), h("slot", null))));
+  }
+};
+BcmListboxGroup.style = listboxGroupCss;
+
+export { BcmListboxGroup as bcm_listbox_group };

package/dist/bromcom-ui/bcm-listbox-item.entry.js

@@ -0,0 +1,159 @@
+import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-9dbea026.js';
+import { c as classnames } from './index-43956e3c.js';
+
+const iconSizes = {
+  default: {
+    large: 16,
+    medium: 14,
+    small: 14,
+  }
+};
+
+const listboxItemCss = "@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:flex;flex:1}:host(.hidden){display:none}.listbox-item{display:flex;flex:1;align-items:stretch;justify-content:flex-start;color:var(--bcm-color-grey-8);user-select:none;background-color:var(--bcm-color-grey-1);display:none}.listbox-item.display{display:flex}.listbox-item-container{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;padding-left:8px;flex:1}.listbox-item-container .avatar{margin-right:4px}.listbox-item-container .check-content{display:flex;align-items:center;justify-content:flex-start;width:16px;min-width:16px;margin-right:4px}.listbox-item-container .check-content .indeterminate{width:16px;height:16px;position:relative;display:block;padding-right:8px;cursor:pointer}.listbox-item-container .check-content .indeterminate:after{content:\"\";position:absolute;top:50%;left:9px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}.listbox-item-container .check-content .indeterminate:before{content:\"\";position:absolute;top:-1px;left:0px;width:16px;height:100%;border-radius:2px;background-color:transparent;border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:2}.listbox-item-container .check-content .indeterminate:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}.listbox-item-container-html-content{display:flex;align-items:center;justify-content:flex-start;flex-direction:row;cursor:pointer;flex:1}.listbox-item-container-html-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.listbox-item-container-html-content.small{padding:0 8px 0 4px;padding:4px 8px 4px 4px}.listbox-item-container-html-content.medium{padding:8px 8px 8px 4px}.listbox-item-container-html-content.large{padding:8px 8px 8px 4px}.listbox-item-container-text-content{display:flex;align-items:center;justify-content:space-between;flex-direction:row;cursor:pointer;width:100%}.listbox-item-container-text-content #text .highlight{background-color:var(--bcm-color-yellow-5)}.listbox-item-container-text-content.small{padding:0 8px 0 4px;padding:4px 8px 4px 4px}.listbox-item-container-text-content.medium{padding:8px 8px 8px 4px}.listbox-item-container-text-content.large{padding:8px 8px 8px 4px}.listbox-item-container-text-content .icon{text-align:center;margin-right:8px}.listbox-item-container-text-content>div{display:flex;align-items:center;flex-direction:row;word-wrap:break-word}.listbox-item-container.disabled{color:var(--bcm-color-grey-6)}.listbox-item-container.selected{color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container.selected:hover:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}.listbox-item-container:hover:not(.disabled),.listbox-item-container:active:not(.disabled){color:var(--bcm-color-prime-blue-6);background-color:var(--bcm-color-prime-blue-1)}";
+
+const BcmListboxItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.listboxItemSelected = createEvent(this, "bcm-listbox-item-selected", 7);
+    this.listboxUnchecked = createEvent(this, "bcm-listbox-unchecked", 7);
+    this.listboxChecked = createEvent(this, "bcm-listbox-checked", 7);
+    this.objectMapping = {
+      'id': "id",
+      'text': "text",
+      'icon': "icon",
+      'avatar': "avatar",
+      'avatarName': "avatarName",
+      'avatarImage': "avatarImage",
+      'secondaryText': "secondaryText",
+      'tooltipText': "tooltipText",
+      'selected': "selected",
+      'checked': "checked",
+      'disabled': "disabled",
+    };
+    this.display = true;
+    this.avatar = false;
+    this._id = (Math.random() * 4).toString(16).replace('.', '');
+    this.size = 'medium';
+    this.icon = 'bug';
+    this.open = false;
+    this.selected = false;
+    this.checkboxes = false;
+    this.showIcon = false;
+    this.checked = false;
+    this.focused = false;
+    this.hidden = false;
+    this.disabled = false;
+    this._internal_id = "";
+    this.template = null;
+  }
+  componentDidLoad() {
+    if (!this.disabled) {
+      if (this.selected === true) {
+        this.listboxItemSelected.emit(this.itemObject);
+      }
+      this.checkboxes === true && (this.checked === true && (this.listboxChecked.emit(this._id)));
+    }
+  }
+  /**
+   * @desc
+   */
+  handleClick() {
+    if (!this.disabled) {
+      this.checkboxes === true && (this.checked === true && (this.listboxUnchecked.emit(this._id)) || (this.listboxChecked.emit(this._id)));
+      this.checkboxes === false && (this.selected = true,
+        this.listboxItemSelected.emit(this.itemObject));
+    }
+  }
+  handleCheckboxClick(e) {
+    e.preventDefault();
+  }
+  isInternal(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const detect = path
+      && path[0]
+      && path[0].attributes
+      && path[0].attributes['bcm-internal-id']
+      && path[0].attributes['bcm-internal-id'].value;
+    return detect == this._internal_id;
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  ListenListboxCheck(event) {
+    if (this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail && event.detail === this._id) {
+          this.checked = true;
+        }
+      }
+    }
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  ListenListboxUncheck(event) {
+    if (this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail && event.detail === this._id) {
+          this.checked = false;
+        }
+      }
+    }
+  }
+  /**
+   * @descc
+   * @param event
+   */
+  handleListboxClearSelecteds(event) {
+    if (this.checkboxes == false && this.isInternal(event)) {
+      if (!this.disabled) {
+        if (event.detail) {
+          if (event.detail !== this.itemObject) {
+            this.selected = false;
+          }
+          else {
+            this.selected = true;
+          }
+        }
+      }
+    }
+  }
+  templateParser(template) {
+    var rxp = /{{([^}]+)}}/g, str = template, curMatch;
+    while (curMatch = rxp.exec(str)) {
+      template = template.replace("{{" + curMatch[1] + "}}", this.itemObject[curMatch[1]]);
+    }
+    return template;
+  }
+  render() {
+    const { display, focused, selected, size, showIcon, icon, checkboxes, _id, checked, text, avatarName, avatarImage, avatar, secondaryText, tooltipText } = this;
+    const iconSize = iconSizes.default[size];
+    const classes = classnames('listbox-item', {
+      'disabled': this.disabled,
+      'display': display
+    });
+    const classesContainer = classnames('listbox-item-container', {
+      'disabled': this.disabled,
+      'focus': focused,
+      'selected': selected
+    });
+    const textContent = classnames('listbox-item-container-text-content', size, {
+      'disabled': this.disabled,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    const htmlContent = classnames('listbox-item-container-html-content', size, {
+      'disabled': this.disabled,
+      'size-2': size === 'small' || size === 'medium',
+      'size-3': size === 'large',
+    });
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("div", { class: classesContainer, onClick: () => this.handleClick() }, checkboxes && (h("div", { class: "check-content" }, h("bcm-checkbox-lite", { id: 'check-' + _id, name: 'check-' + _id, onClick: (e) => this.handleCheckboxClick(e), checked: checked, disabled: this.disabled }))), this.template && (h("div", { class: htmlContent, title: tooltipText, innerHTML: this.templateParser(this.template) })), this.template == null && (h("div", { class: textContent, title: tooltipText }, h("div", null, (avatar || avatarName || avatarImage) && (h("div", { class: "avatar" }, h("bcm-avatar", Object.assign({ size: "small", name: text }, avatarName && { name: avatarName }, avatarImage && { image: avatarImage })))), showIcon && icon && (h("bcm-icon", { type: "fill", class: "icon", icon: icon, size: iconSize })), text && (h("span", { id: "text" }, text)) || (h("slot", null))), h("div", null, (secondaryText) && (h("div", { class: "secondaryText size-1" }, secondaryText)))))))));
+  }
+  get el() { return getElement(this); }
+};
+BcmListboxItem.style = listboxItemCss;
+
+export { BcmListboxItem as bcm_listbox_item };