bromcom-ui 2.9.0-rc.2 → 2.9.0-rc.20

package/dist/collection/components/organism/list/list.js

@@ -15,7 +15,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { IsLoad, JsonParse } from "@bcm/decorator";
 import { Generate, NumberHelper, StringHelper, Validators } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
-import { CaptionTemplate, LabelTemplate, ListTemplate } from "@bcm/template";
+import { CaptionTemplate, ListTemplate } from "@bcm/template";
 import { delay, getPlacement, setPosition } from "@bcm/utils";
 import { Host, h } from "@stencil/core";
 import cs from "classnames";
@@ -47,6 +47,7 @@ export class BcmList {
     this.maxHeight = "500px";
     this.minHeight = "150px";
     this.width = "256px";
+    this.tooltip = undefined;
     this.infoFooter = false;
     this.variableText = "item";
     this.template = undefined;
@@ -54,6 +55,7 @@ export class BcmList {
     this.keyControl = false;
     this.checkAll = true;
     this.stopDeepClean = false;
+    this.openIntersecting = false;
     this.linkedComponent = undefined;
     this.isOpen = false;
     this.calculatedViewport = false;
@@ -96,7 +98,11 @@ export class BcmList {
       indeterminate: "uncheck",
     };
     this.placement = Bcm.Placement["bottom-start"];
+    this.disableChangeEvent = false;
     this.data = [];
+    window.addEventListener("scroll", this.handleWheel.bind(this), true);
+    window.addEventListener("wheel", this.handleWheel.bind(this), true);
+    window.addEventListener("resize", this.handleResize.bind(this), true);
   }
   connectedCallback() {
     if (this.height != "256px") {
@@ -173,12 +179,12 @@ export class BcmList {
     if (this.checkboxes) {
       if (!Validators.compareTwoArrayIsSame(newVal, oldVal)) {
         this.bcmChecklist.emit(this.value);
-        this.change.emit(this.value);
+        !this.disableChangeEvent && this.change.emit(this.value);
       }
     }
     else {
       if ((newVal === null || newVal === void 0 ? void 0 : newVal.id) != (oldVal === null || oldVal === void 0 ? void 0 : oldVal.id)) {
-        this.change.emit(this.value);
+        !this.disableChangeEvent && this.change.emit(this.value);
       }
     }
   }
@@ -743,7 +749,7 @@ export class BcmList {
         "--height": openedType ? "100%" : this.height,
         "--max-height": openedType ? "inherit" : this.maxHeight,
         "--min-height": openedType ? "inherit" : this.minHeight,
-      } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h(LabelTemplate, { size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: cs("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: cs("bcm-list__input-buttons", {
+      } }, h("div", { id: `bcm-list-label-${this._id}`, class: "bcm-list__label" }, label && (h("div", null, h("bcm-label", { tooltip: this.tooltip, size: this.size, type: this.captionType, value: label, required: required, htmlFor: this._id })))), this.type == "select" && (h("div", { id: `bcm-list-input-${this._id}`, class: bcmListInput }, h("span", { class: cs("bcm-list__input-container", { "type-single": !checkboxes, "value-empty": !this.value }) }, this.checkboxes ? (this.value && this.value.length > 0 ? (h("bcm-rc-overflow", { data: this.tagData, maxCount: this.tagCount })) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))) : this.value ? (this.inputText) : (h("span", { class: "bcm-list__input-placeholder" }, this.placeholder))), h("span", { class: cs("bcm-list__input-buttons", {
         disabled: disabled,
       }) }, this.clearable && this.value && (h("div", { class: "bcm-list__input-buttons-button" }, h("bcm-icon", { icon: "fal fa-times", onClick: e => !disabled && this.setClear(e) }))), h("div", { class: `bcm-list__input-buttons-button caret-is ${this.isOpen && this.calculatedViewport && "caret-is-open"}` }, h("bcm-icon", { icon: `far fa-angle-down` }))))), this.type === "autocomplete" && (h("div", { id: `bcm-list-input-${this._id}`, class: cs(bcmListInput, { "bcm-list__input-autocomplete": this.type == "autocomplete" }) }, h("span", { class: "bcm-list__input-container", id: `bcm-list-input-tag-container-${this._id}` }, this.checkboxes && h("span", { class: "bcm-list__input-tag-container", id: `bcm-list-input-tag-container-${this._id}-autocomplete` }), h("bcm-search", { id: `bcm-list-input-tag-container-${this._id}-autocomplete-input`, class: "bcm-list__autocomplete", data: this.data, clearable: true, "full-width": true, "no-caption": true, placeholder: this.placeholder })))), h(ListTemplate, { highlight: this.highlightText, searchable: this.type == "autocomplete" ? false : searchable, bcmListContainer: bcmListContainer, checkboxes: checkboxes, treeview: treeview, infoFooter: this.infoFooter, value: this.value, totalData: this.totalData, searchFound: this.searchFound, variableText: this.variableText, searchPlaceholder: this.searchPlaceholder, minSearchLength: this.minSearchLength, searchIsOnlyChilds: this.searchIsOnlyChilds, _id: this._id, checkAll: this.checkAll, data: this.getItems(), width: this.width, height: this.height, size: this.size, selectAllItem: this.selectAllItem, onScrollEvent: e => this.dataScrollEvent(e), items: this.getLimitedItems(this.searchGetParents), selectedItem: itemId => this.selectedItem(itemId), checkedItem: itemId => this.checkedItem(itemId), openGroup: parentId => this.openGroup(parentId), focusItem: itemId => this.focusItem(itemId), emptyText: this.emptyText, emptyIcon: this.emptyIcon }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
@@ -1127,6 +1133,23 @@ export class BcmList {
         "reflect": false,
         "defaultValue": "\"256px\""
       },
+      "tooltip": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip",
+        "reflect": false
+      },
       "infoFooter": {
         "type": "boolean",
         "mutable": true,
@@ -1252,6 +1275,24 @@ export class BcmList {
         "reflect": false,
         "defaultValue": "false"
       },
+      "openIntersecting": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open-intersecting",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "linkedComponent": {
         "type": "string",
         "mutable": true,
@@ -1492,6 +1533,24 @@ export class BcmList {
         "reflect": false,
         "defaultValue": "Bcm.Placement[\"bottom-start\"]"
       },
+      "disableChangeEvent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disable-change-event",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "data": {
         "type": "any",
         "mutable": true,
@@ -1849,24 +1908,6 @@ export class BcmList {
         "target": undefined,
         "capture": false,
         "passive": false
-      }, {
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "scroll",
-        "method": "handleWheel",
-        "target": "document",
-        "capture": true,
-        "passive": true
-      }, {
-        "name": "wheel",
-        "method": "handleWheel",
-        "target": "document",
-        "capture": false,
-        "passive": false
       }, {
         "name": "bcm-select-other-tag",
         "method": "handleSelectOtherTag",

package/dist/collection/components/organism/time-picker/time-picker.css

@@ -123,7 +123,7 @@
 }
 
 :host {
-  display: inline-block;
+  display: inline-flex;
   width: 100%;
   max-width: 256px;
 }

package/dist/collection/components/organism/time-picker/time-picker.js

@@ -30,6 +30,7 @@ export class BcmTimePicker {
     this.label = undefined;
     this.placeholder = undefined;
     this.disabled = false;
+    this.noMargin = false;
     this.noCaption = false;
     this.caption = '';
     this.captionError = undefined;
@@ -126,7 +127,7 @@ export class BcmTimePicker {
     const hostClasses = cs(this.hidden ? 'hidden' : null, {
       'full-width': this.fullWidth
     });
-    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, fullWidth: this.fullWidth, required: this.required, label: this.label, name: this.name, placeholder: this.placeholder, type: "time", clearable: this.clearable, date: this.time, ref: el => (this.picker = el), disabled: this.disabled, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType, alignment: this.alignment, placement: this.placement })));
+    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, fullWidth: this.fullWidth, required: this.required, label: this.label, name: this.name, placeholder: this.placeholder, type: "time", clearable: this.clearable, date: this.time, ref: el => (this.picker = el), disabled: this.disabled, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType, alignment: this.alignment, placement: this.placement, noMargin: this.noMargin })));
   }
   static get is() { return "bcm-time-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -322,6 +323,24 @@ export class BcmTimePicker {
         "reflect": false,
         "defaultValue": "false"
       },
+      "noMargin": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-margin",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "noCaption": {
         "type": "boolean",
         "mutable": true,

package/dist/collection/components/other/toast/toast.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import cs from "classnames";
 import { Generate } from "../../../helper/generate";
 import { StringHelper } from "../../../helper/string-helper";
@@ -19,13 +19,15 @@ export class BcmToast {
     this.messageIcon = undefined;
     this.viewButton = false;
     this.closeButton = true;
+    this.removeAfterClose = true;
     this.visible = false;
     this.visibleContainer = false;
   }
   async show() {
-    const container = document.getElementById(this._id + "-container");
-    if (container) {
-      document.body.appendChild(container);
+    const toast = document.getElementById(this._id + "-container");
+    if (toast) {
+      const container = this.createContainer(this.position);
+      container.appendChild(toast);
     }
     this.visible = true;
     await delay(50);
@@ -43,6 +45,10 @@ export class BcmToast {
     this.bcmToastClose.emit();
     await delay(100);
     this.visible = false;
+    if (this.removeAfterClose) {
+      await delay(100);
+      this.el.remove();
+    }
   }
   handleMouseEnter() {
     clearTimeout(this.timer);
@@ -52,17 +58,30 @@ export class BcmToast {
       this.timer = setTimeout(() => this.hide(), 1000);
     }
   }
+  createContainer(position) {
+    const containerId = "bcm-toast-container-" + position;
+    let container = document.getElementById(containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = containerId;
+      const classlist = cs("tw-pointer-events-none tw-overflow-hidden tw-z-50", "tw-fixed tw-flex", "tw-p-4 tw-gap-4", {
+        "tw-flex-col-reverse tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
+        "tw-flex-col tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
+        "tw-flex-col-reverse tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
+        "tw-flex-col-reverse tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
+        "tw-flex-col tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
+        "tw-flex-col tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
+      });
+      container.classList.add(...classlist.split(" "));
+      document.body.appendChild(container);
+    }
+    return container;
+  }
   render() {
     return (h(Host, { class: "tw-hidden" }, h("div", { class: cs({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: cs("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
         "tw-p-4": !this.description,
         "tw-p-6": this.description,
-      }, "tw-fixed tw-z-50", "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
-        "tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
-        "tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
-        "tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
-        "tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
-        "tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
-        "tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
+      }, "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
         "tw-translate-y-0 tw-opacity-100 ": this.visibleContainer,
         "tw-opacity-0": !this.visibleContainer,
         "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
@@ -251,6 +270,24 @@ export class BcmToast {
         "attribute": "close-button",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "removeAfterClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "remove-after-close",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }

package/dist/collection/components/other/typography/typography.js

@@ -5,7 +5,7 @@
 import { h, Host } from '@stencil/core';
 export class BcmTypography {
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { class: "bcm-ui-element bcm-ui-content-display" }, h("slot", null)));
   }
   static get is() { return "bcm-typography"; }
   static get elementRef() { return "el"; }

package/dist/collection/components/other_deprecated/old-popover/old-popover.js

@@ -166,7 +166,7 @@ export class OldBcmPopover {
         "mutable": true,
         "complexType": {
           "original": "TrigglerTypes",
-          "resolved": "\"click\" | \"focus\" | \"hover\"",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
           "references": {
             "TrigglerTypes": {
               "location": "import",