bromcom-ui 2.9.0-rc.8 → 2.9.0

package/dist/collection/components/molecules/input-dropdown/input-dropdown.style.js

@@ -0,0 +1,73 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const inputDropdownStyle = tv({
+  slots: {
+    base: "tw-font-sans tw-flex tw-flex-col tw-items-start tw-justify-start tw-gap-2",
+    content: "tw-flex tw-flex-row tw-items-center tw-justify-start tw-gap-3",
+    inputArea: "tw-flex tw-flex-row tw-items-center tw-justify-start tw-gap-1 tw-box-content tw-border tw-border-solid tw-max-w-[100px]  tw-uppercase tw-font-medium tw-text-center tw-border-gray-300 tw-rounded",
+    input: "tw-flex-1 tw-text-inherit tw-uppercase tw-font-semibold tw-text-center tw-border-none tw-bg-transparent tw-outline-none tw-w-full",
+    button: [
+      "input-dropdown-button tw-flex tw-flex-row tw-items-center tw-justify-center tw-gap-1 tw-rounded tw-outline-none tw-bg-slate-100",
+      "tw-border tw-border-solid tw-border-slate-300 tw-font-medium tw-text-slate-600",
+      "hover:tw-border-slate-400 hover:tw-bg-slate-200",
+      "tw-min-w-[32px]",
+      "tw-cursor-pointer",
+      "disabled:tw-cursor-not-allowed disabled:tw-text-slate-400 disabled:tw-pointer-events-none",
+      "readonly:tw-text-slate-700 readonly:tw-cursor-text",
+    ],
+    menu: "tw-mt-1 tw-flex tw-flex-col tw-items-start tw-justify-center tw-gap-2 tw-overflow-auto tw-bg-white tw-p-3  tw-font-sans tw-text-3 tw-text-slate-700",
+    menuItem: "tw-flex tw-w-full tw-cursor-pointer tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 hover:tw-bg-blue-100",
+    selectedItem: "tw-flex tw-w-full tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-text-slate-700 tw-bg-primary-200",
+    disabledItem: "tw-flex tw-w-full tw-flex-row tw-items-start tw-gap-1 tw-rounded tw-px-3 tw-py-1  tw-cursor-not-allowed tw-text-slate-400 tw-bg-slate-100 hover:tw-bg-slate-100 tw-list-none",
+    commentArea: "tw-flex tw-h-fit tw-w-full tw-min-w-[288px] tw-flex-col tw-items-start tw-gap-3 tw-rounded tw-p-4 tw-shadow-2",
+  },
+  variants: {
+    size: {
+      small: {
+        button: "tw-h-[18px] tw-text-1 tw-leading-none",
+      },
+      medium: {
+        button: "tw-h-[24px] tw-text-2",
+        inputArea: "tw-p-0.5",
+        input: "tw-text-4",
+      },
+      large: {
+        button: "tw-h-[30px] tw-text-2",
+        inputArea: "tw-p-1",
+        input: "tw-text-6",
+      },
+    },
+    invalid: {
+      true: {
+        inputArea: "tw-border-red-600 tw-bg-red-50",
+        input: "tw-text-red-500",
+      },
+    },
+    disabled: {
+      true: {
+        base: "tw-opacity-50 tw-cursor-not-allowed",
+        input: "tw-cursor-not-allowed",
+      },
+    },
+    hideComment: {
+      true: {
+        base: "tw-min-w-[98px]",
+      },
+      false: {
+        base: "tw-min-w-[128px] ",
+      },
+    },
+    label: {
+      true: "",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    invalid: false,
+    hideComment: false,
+    disabled: false,
+  },
+});

package/dist/collection/components/molecules/linked/linked.js

@@ -18,6 +18,9 @@ export class BcmLinked {
     this.isOpen = false;
     this.hideDelay = 500;
     this.isMouseOverLink = false;
+    window.addEventListener("scroll", () => this.calculatePosition(), true);
+    window.addEventListener("wheel", () => this.calculatePosition(), true);
+    window.addEventListener("resize", () => this.calculatePosition(), true);
   }
   target() {
     const target = document.querySelectorAll(`[id="${this.targetId}"]`);
@@ -143,7 +146,7 @@ export class BcmLinked {
   clickListener(e) {
     if (!this.target())
       return;
-    if (this.trigger === Bcm.TriggerType.hover)
+    if (this.trigger === Bcm.TriggerType.hover || this.trigger === Bcm.TriggerType.custom)
       return;
     const isTarget = Generate.findEventPath(e, this.target());
     const isSelf = Generate.findEventPath(e, this.el);
@@ -164,15 +167,6 @@ export class BcmLinked {
       isTarget && this.show(false);
     }
   }
-  resizeListener() {
-    this.calculatePosition();
-  }
-  scrollListener() {
-    this.calculatePosition();
-  }
-  wheelListener() {
-    this.calculatePosition();
-  }
   listenMouseOver() {
     var _a, _b;
     this.el.addEventListener("mouseover", () => (this.isMouseOverLink = true));
@@ -246,7 +240,7 @@ export class BcmLinked {
         "mutable": false,
         "complexType": {
           "original": "TrigglerTypes",
-          "resolved": "\"click\" | \"focus\" | \"hover\"",
+          "resolved": "\"click\" | \"custom\" | \"focus\" | \"hover\"",
           "references": {
             "TrigglerTypes": {
               "location": "import",
@@ -485,24 +479,6 @@ export class BcmLinked {
         "target": "document",
         "capture": true,
         "passive": false
-      }, {
-        "name": "resize",
-        "method": "resizeListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "scroll",
-        "method": "scrollListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "wheel",
-        "method": "wheelListener",
-        "target": "window",
-        "capture": false,
-        "passive": true
       }];
   }
 }

package/dist/collection/components/molecules/popconfirm/popconfirm.js

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

package/dist/collection/components/molecules/popover/popover.js

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

package/dist/collection/components/molecules/tooltip/tooltip.js

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

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

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

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

@@ -34,6 +34,7 @@ export class BcmDatePicker {
     this.placeholder = undefined;
     this.disabledDates = '';
     this.disabled = false;
+    this.noMargin = false;
     this.noCaption = false;
     this.caption = '';
     this.captionError = undefined;
@@ -154,7 +155,7 @@ export class BcmDatePicker {
       'full-width': this.fullWidth,
       'linked-component': this.linkedComponent,
     });
-    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, name: this.name, type: this.range ? 'range' : 'date', date: this.date, placeholder: this.placeholder, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, clearable: this.clearable, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionError: this.captionError, 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, name: this.name, type: this.range ? 'range' : 'date', date: this.date, placeholder: this.placeholder, fullWidth: this.fullWidth, ref: el => (this.picker = el), required: this.required, clearable: this.clearable, label: this.label, "end-date": this.endDate, disabled: this.disabled, disabledDates: this.disabledDates, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, caption: this.caption, captionError: this.captionError, captionType: this.captionType, alignment: this.alignment, placement: this.placement, noMargin: this.noMargin })));
   }
   static get is() { return "bcm-date-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -408,6 +409,24 @@ export class BcmDatePicker {
         "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/organism/datetime-picker/datetime-picker.css

@@ -281,7 +281,8 @@
 }
 
 :host {
-  display: inline-block;
+  display: inline-flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
   max-width: 256px;
@@ -293,6 +294,10 @@
   max-width: 100%;
 }
 
+:host(.no-margin) {
+  margin: 0;
+}
+
 :host(.hidden) {
   display: none;
 }
@@ -676,4 +681,11 @@
   border-right: 0;
   pointer-events: none;
   box-sizing: border-box;
+}
+
+.picker-input-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: stretch;
 }

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

@@ -50,6 +50,7 @@ export class BcmDatetimePicker {
     this.minYear = 1900;
     this.maxYear = 2200;
     this.noCaption = false;
+    this.noMargin = false;
     this.captionError = undefined;
     this.caption = '';
     this.captionType = 'default';
@@ -1363,6 +1364,7 @@ export class BcmDatetimePicker {
     const hostClasses = cs(this.hidden ? 'hidden' : null, {
       'full-width': this.fullWidth,
       'linked-component': this.linkedComponent,
+      'no-margin': this.noMargin,
     });
     const toggleClasses = cs('toggle', {
       disabled: this.disabled
@@ -1371,7 +1373,7 @@ export class BcmDatetimePicker {
     const calendarIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>`;
     const errorIcon = `<svg style="fill: #ef4444; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm42-104c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42zm-81.4-211.4l6.8 136c.3 6.4 5.6 11.4 12 11.4h41.2c6.4 0 11.7-5.1 12-11.4l6.8-136c.3-6.9-5.1-12.6-12-12.6h-54.8c-6.9 0-12.4 5.7-12 12.6z"/></svg>`;
     const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
-    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
+    return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), "no-margin": true, disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
       // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
       noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("span", { id: "error-icon", class: toggleClasses, innerHTML: errorIcon, title: this.errorText }))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "far fa-chevron-left" })), h("div", { class: "month-year-wrapper" }, h("span", { class: "month" }, this.getMonthText()), ",", h("span", { class: "year" }, this.date.getFullYear())), h("button", { onClick: () => this.getNextMonth() }, h("bcm-icon", { icon: "far fa-chevron-right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "bcm-datetime-picker__content" }, h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))), h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h("div", { class: "days" }, h("div", { class: "day-labels" }, h("span", null, "Mo"), h("span", null, "Tu"), h("span", null, "We"), h("span", null, "Th"), h("span", null, "Fr"), h("span", null, "Sa"), h("span", null, "Su")), h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
         'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
@@ -1714,6 +1716,24 @@ export class BcmDatetimePicker {
         "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"
+      },
       "captionError": {
         "type": "string",
         "mutable": true,

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

@@ -47,6 +47,7 @@ export class BcmForm {
         LIST: 'list',
         //
         COLORPICKER: 'colorpicker',
+        DATE: 'date',
         // picker aslında tek komponent hepsi datetimepicker
         DATE_PICKER: 'date-picker',
         TIME_PICKER: 'time-picker',

package/dist/collection/components/organism/form-2/bcm-form-components.js

@@ -14,12 +14,15 @@ export const BcmFormComponents = [
   'BCM-FORM-GROUP',
   'BCM-LIST',
   'BCM-COLORPICKER',
+  'BCM-DATE',
   'BCM-DATE-PICKER',
   'BCM-TIME-PICKER',
   'BCM-DATETIME-PICKER',
   'BCM-SELECT',
   'BCM-LISTBOX',
-  'BCM-CHIP-GROUP', // to be added to v3
+  'BCM-CHIP-GROUP',
+  'BCM-INPUT-DROPDOWN'
+  //... to be added to v3
 ];
 export const BcmFormGroupComponents = [
   'BCM-FORM-GROUP',

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

@@ -750,7 +750,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding: 4px 4px 0 4px;
+  padding: 0 4px 0 4px;
   font-size: 16px;
   color: var(--bcm-new-ds-color-slate-500);
 }

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,