bromcom-ui 2.9.0-rc.10 → 2.9.0-rc.12

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(), noMargin: this.noMargin, 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/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

@@ -96,6 +96,7 @@ export class BcmList {
       indeterminate: "uncheck",
     };
     this.placement = Bcm.Placement["bottom-start"];
+    this.disableChangeEvent = false;
     this.data = [];
   }
   connectedCallback() {
@@ -173,12 +174,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);
       }
     }
   }
@@ -1492,6 +1493,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,

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,