bromcom-ui 2.9.0-rc.14 → 2.9.0-rc.15

package/dist/collection/components/third-parts/rc-picker/rc-picker.js

@@ -1,7 +1,13 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Bcm } from "@bcm/model";
 import moment from "moment";
 import Picker from "rc-picker";
 import momentGenerateConfig from "rc-picker/lib/generate/moment";
 import enUS from "rc-picker/lib/locale/en_US";
+import cs from "classnames";
 import React from "react";
 import ReactDOM from "react-dom";
 export class BcmRcPicker {
@@ -10,9 +16,16 @@ export class BcmRcPicker {
     this.type = "date";
     this.format = undefined;
     this.placeholder = undefined;
+    this.size = Bcm.Size.medium;
     this.showTime = undefined;
     this.showToday = undefined;
     this.showNow = undefined;
+    this.showHour = undefined;
+    this.showMinute = undefined;
+    this.showSecond = undefined;
+    this.use12Hours = undefined;
+    this.error = undefined;
+    this.disabled = undefined;
     this.clearable = false;
     this.defaultValue = undefined;
     this.newValue = undefined;
@@ -24,57 +37,79 @@ export class BcmRcPicker {
     this.setValue(newValue);
     this.bcmRCPickerChange.emit(newValue ? moment(newValue) : null);
   }
-  watchValue(val) {
-    if (typeof val === "string") {
-      this.newValue = moment(val).format(this.format);
+  async set(value) {
+    if (value && value != "invalid date") {
+      this.newValue = moment(value);
+      this.handleChange(moment(value));
     }
   }
   componentDidRender() {
     // const onSelect = (newValue: Moment) => {
     //     // console.log("Select:", newValue);
     // };
-    const props = Object.assign(Object.assign(Object.assign({}, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder }));
+    const props = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (this.format && { format: this.format })), (this.clearable && { allowClear: this.clearable })), (this.placeholder && { placeholder: this.placeholder })), (this.error && { error: this.error })), (this.disabled && { disabled: this.disabled }));
     const options = {
       time: {
-        showHour: true,
-        showMinute: true,
-        showSecond: false,
-        use12Hours: false,
-        format: "HH:mm",
-        showNow: false,
+        // showTime: this.showTime,
+        // showToday: this.showToday,
+        showNow: this.showNow,
+        showHour: this.showHour,
+        showMinute: this.showMinute,
+        showSecond: this.showSecond,
+        use12Hours: this.use12Hours,
+        format: this.format,
         hourStep: 1,
-        minuteStep: 30,
+        minuteStep: 1,
         secondStep: 1,
         hideDisabledOptions: false,
-        defaultValue: moment("08:00", "HH:mm"),
+        // defaultValue: moment("08:00", "HH:mm"),
         disabledTime: () => ({
-          disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 13, 18, 19, 20, 21, 22, 23],
-          // disabledMinutes: () => [1, 2, 3],
-          // disabledSeconds: () => [1, 2, 3],
+        // disabledHours: () => [0, 1, 2, 3, 4, 5, 6, 7, 13, 18, 19, 20, 21, 22, 23],
+        // disabledMinutes: () => [1, 2, 3],
+        // disabledSeconds: () => [1, 2, 3],
         }),
         active: true,
       },
       date: {
-        format: "DD/MM/YYYY",
+        format: this.format,
+        showToday: this.showToday,
       },
       datetime: {
         showTime: true,
-        showHour: true,
-        showMinute: true,
-        showSecond: false,
-        use12Hours: false,
-        format: "DD/MM/YYYY HH:mm",
+        showNow: this.showNow,
+        showHour: this.showHour,
+        showMinute: this.showMinute,
+        showSecond: this.showSecond,
+        use12Hours: this.use12Hours,
+        format: this.format,
+        showToday: this.showToday,
       },
     };
     const sharedProps = Object.assign(Object.assign(Object.assign(Object.assign({ generateConfig: momentGenerateConfig, value: this.newValue,
-      // onSelect,
-      onChange: (newValue) => this.handleChange(newValue) }, props), { picker: this.type }), options[this.type]), { autofocus: true });
-    ReactDOM.render(React.createElement(Picker, Object.assign(Object.assign({}, sharedProps), { locale: enUS })), this.el);
+      // onSelect: (newValue: Moment) => this.handleChange(newValue),
+      onChange: (newValue) => this.handleChange(newValue) }, props), { picker: this.type,
+      // presets: [
+      //     {
+      //         label: "Hello World!",
+      //         value: moment(),
+      //     },
+      //     {
+      //         label: "Now",
+      //         value: () => moment(),
+      //     },
+      // ]
+      // showTime: true,
+      // showSecond: false,
+      prefixCls: "bcm-date", suffixIcon: " " }), options[this.type]), { autofocus: true });
+    ReactDOM.render(React.createElement(Picker, Object.assign(Object.assign({}, sharedProps), { locale: enUS, className: cs("bcm-date--" + this.type, {
+        [`bcm-date--${this.size}`]: this.size,
+        [`bcm-date--error`]: this.error,
+      }) })), this.el);
   }
   static get is() { return "bcm-rc-picker"; }
   static get originalStyleUrls() {
     return {
-      "$": ["rc-picker.css"]
+      "$": ["rc-picker.scss"]
     };
   }
   static get styleUrls() {
@@ -105,8 +140,8 @@ export class BcmRcPicker {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"time\" | \"date\" | \"week\" | \"month\" | \"year\"",
-          "resolved": "\"date\" | \"month\" | \"time\" | \"week\" | \"year\"",
+          "original": "\"time\" | \"date\" | \"week\" | \"month\" | \"year\" | \"datetime\"",
+          "resolved": "\"date\" | \"datetime\" | \"month\" | \"time\" | \"week\" | \"year\"",
           "references": {}
         },
         "required": false,
@@ -153,6 +188,29 @@ export class BcmRcPicker {
         "attribute": "placeholder",
         "reflect": false
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeTypes",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "SizeTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "Bcm.Size.medium"
+      },
       "showTime": {
         "type": "any",
         "mutable": false,
@@ -204,6 +262,108 @@ export class BcmRcPicker {
         "attribute": "show-now",
         "reflect": false
       },
+      "showHour": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-hour",
+        "reflect": false
+      },
+      "showMinute": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-minute",
+        "reflect": false
+      },
+      "showSecond": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-second",
+        "reflect": false
+      },
+      "use12Hours": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-1-2-hours",
+        "reflect": false
+      },
+      "error": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
       "clearable": {
         "type": "boolean",
         "mutable": false,
@@ -248,11 +408,28 @@ export class BcmRcPicker {
         }
       }];
   }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "val",
-        "methodName": "watchValue"
-      }];
+  static get methods() {
+    return {
+      "set": {
+        "complexType": {
+          "signature": "(value: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
   }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/decorators/is-load-decorator.js

@@ -8,8 +8,9 @@ export function IsLoad() {
     const { componentDidLoad } = proto;
     proto.componentDidLoad = function () {
       const host = getElement(this);
+      const { openIntersecting } = host;
       initProps(host);
-      registerAttrReflect(host);
+      openIntersecting && registerAttrReflect(host);
       return componentDidLoad && componentDidLoad.call(this);
     };
   };

package/dist/collection/models/bcm.js

@@ -395,33 +395,33 @@ export var Bcm;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(KeyCode = Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    'email': 'Please enter a valid email address',
-    'password': 'Please enter a valid password',
-    'url': 'Please enter a valid URL',
-    'phone': 'Please enter a valid phone number',
-    'search': 'Please enter a valid search term',
-    'number': 'Please enter a valid number',
-    'text': 'Please enter a valid text',
-    'required': 'This field is required',
-    'minlength': 'This field must be at least {0} characters long',
-    'maxlength': 'This field must be at most {0} characters long',
-    'min': 'This field must be at least {0}',
-    'max': 'This field must be at most {0}',
-    'between': 'This field must be between {0} and {1}',
-    'pattern': 'Please use a valid format',
-    'date': 'Please enter a valid date',
-    'time': 'Please enter a valid time',
-    'datetime': 'Please enter a valid date and time',
-    'datetime-local': 'Please enter a valid date and time',
-    'month': 'Please enter a valid month',
-    'week': 'Please enter a valid week',
-    'color': 'Please enter a valid color',
-    'file': 'Please enter a valid file',
-    'range': 'Please enter a valid range',
-    'radio': 'Please select a valid option',
-    'checkbox': 'Please select a valid option',
-    'select': 'Please select a valid option',
-    'multiple': 'Please select a valid option',
+    "email": "Please enter a valid email address",
+    "password": "Please enter a valid password",
+    "url": "Please enter a valid URL",
+    "phone": "Please enter a valid phone number",
+    "search": "Please enter a valid search term",
+    "number": "Please enter a valid number",
+    "text": "Please enter a valid text",
+    "required": "This field is required",
+    "minlength": "This field must be at least {0} characters long",
+    "maxlength": "This field must be at most {0} characters long",
+    "min": "This field must be at least {0}",
+    "max": "This field must be at most {0}",
+    "between": "This field must be between {0} and {1}",
+    "pattern": "Please use a valid format",
+    "date": "Please enter a valid date",
+    "time": "Please enter a valid time",
+    "datetime": "Please enter a valid date and time",
+    "datetime-local": "Please enter a valid date and time",
+    "month": "Please enter a valid month",
+    "week": "Please enter a valid week",
+    "color": "Please enter a valid color",
+    "file": "Please enter a valid file",
+    "range": "Please enter a valid range",
+    "radio": "Please select a valid option",
+    "checkbox": "Please select a valid option",
+    "select": "Please select a valid option",
+    "multiple": "Please select a valid option",
   };
   let IndeterminateType;
   (function (IndeterminateType) {

package/dist/components/bcm-date.js

@@ -37,21 +37,44 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.value = this.getValueObject(e.detail);
       this.change.emit(this.value);
     };
+    // type a göre format belirleme işlemi
+    this.getFormat = () => {
+      if (!this.format) {
+        switch (this.type) {
+          case "time":
+            return this.showSecond ? "HH:mm:ss" : this.showMinute ? "HH:mm" : "HH";
+          case "date":
+            return "DD/MM/YYYY";
+          case "datetime":
+            return this.showSecond ? "DD/MM/YYYY HH:mm:ss" : this.showMinute ? "DD/MM/YYYY HH:mm" : "DD/MM/YYYY HH";
+          case "week":
+            return "YYYY-wo";
+          case "month":
+            return "MM/YYYY";
+          case "year":
+            return "YYYY";
+          default:
+            return "DD/MM/YYYY";
+        }
+      }
+      return this.format;
+    };
     this.getValueObject = (value) => {
       if (value && hooks(value).isValid()) {
-        return {
-          isValid: hooks(value).isValid(),
-          date: hooks(value).toDate(),
-          timestamp: hooks(value).valueOf(),
-          dateObject: {
+        return Object.assign({ isValid: hooks(value).isValid(), date: hooks(value).toDate(), timestamp: hooks(value).valueOf(), dateObject: {
             year: hooks(value).year(),
             day: hooks(value).date(),
             month: hooks(value).month(),
             dayOfWeek: hooks(value).day(),
             monthFirstDay: hooks(value).startOf("month").day(),
+          }, value: hooks(value).format(this.getFormat()) }, this.type === "time" && {
+          time: hooks(value).format(this.getFormat()),
+          timeObject: {
+            hour: hooks(value).hour(),
+            minute: hooks(value).minute(),
+            second: hooks(value).second(),
           },
-          value: hooks(value).format(this.format),
-        };
+        });
       }
       else {
         return null;
@@ -66,15 +89,21 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.fullWidth = false;
     this.required = false;
     this.clearable = false;
+    this.noMargin = false;
     this.caption = undefined;
     this.noCaption = false;
     this.captionType = Bcm.Status.default;
     this.captionError = undefined;
-    this.type = undefined;
-    this.format = "DD/MM/YYYY";
+    this.type = "date";
+    this.format = undefined;
     this.showTime = false;
     this.showToday = true;
     this.showNow = true;
+    this.showHour = true;
+    this.showMinute = true;
+    this.showSecond = false;
+    this.use12Hours = false;
+    this.disabled = false;
   }
   async getValue() {
     var _a;
@@ -85,7 +114,8 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.timestamp) || null;
   }
   async set(value) {
-    this.value = value;
+    // this.value = value;
+    this.getPickerElement().set(value);
   }
   async setClear() {
     this.value = null;
@@ -101,9 +131,15 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     var _a;
     return ((_a = this.getValueObject(this.value)) === null || _a === void 0 ? void 0 : _a.isValid) || false;
   }
+  getPickerElement() {
+    return this.el.querySelector("bcm-rc-picker");
+  }
   render() {
     const { label, size, captionType, required, _id } = this;
-    return (h(Host, { class: classnames("bcm-ui-element bcm-ui-action", "tw-inline-flex tw-flex-col") }, label && h(LabelTemplate, { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { onBcmRCPickerChange: e => this.onChange(e), type: this.type, format: this.format, "show-time": this.showTime, clearable: this.clearable, val: this.value }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
+    return (h(Host, { class: classnames("bcm-ui-element bcm-ui-input", "tw-relative tw-m-0 tw-inline-flex tw-w-full tw-flex-col", {
+        "tw-max-w-[256px]": !this.fullWidth,
+        "tw-mb-2": !this.noMargin,
+      }) }, label && h(LabelTemplate, { size: size, type: captionType, value: label, required: required, htmlFor: _id }), h("bcm-rc-picker", { id: _id + "-picker", onBcmRCPickerChange: e => this.onChange(e), type: this.type, format: this.getFormat(), clearable: this.clearable, val: this.value, class: classnames("w-full tw-flex"), size: size, placeholder: this.placeholder, showTime: this.showTime, showToday: this.showToday, showNow: this.showNow, showHour: this.showHour, showMinute: this.showMinute, showSecond: this.showSecond, use12Hours: this.use12Hours, error: this.captionType === "error", disabled: this.disabled }), h(CaptionTemplate, { noCaption: this.noCaption, captionType: this.captionType, captionError: this.captionError, caption: this.caption })));
   }
   get el() { return this; }
 }, [0, "bcm-date", {
@@ -116,15 +152,21 @@ const BcmDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "fullWidth": [4, "full-width"],
     "required": [4],
     "clearable": [4],
+    "noMargin": [4, "no-margin"],
     "caption": [1],
     "noCaption": [4, "no-caption"],
     "captionType": [1025, "caption-type"],
     "captionError": [1025, "caption-error"],
     "type": [1],
-    "format": [1],
+    "format": [8],
     "showTime": [4, "show-time"],
     "showToday": [4, "show-today"],
     "showNow": [4, "show-now"],
+    "showHour": [4, "show-hour"],
+    "showMinute": [4, "show-minute"],
+    "showSecond": [4, "show-second"],
+    "use12Hours": [4, "use-1-2-hours"],
+    "disabled": [4],
     "getValue": [64],
     "get": [64],
     "set": [64],

package/dist/components/bcm.js

@@ -378,33 +378,33 @@ var Bcm;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    'email': 'Please enter a valid email address',
-    'password': 'Please enter a valid password',
-    'url': 'Please enter a valid URL',
-    'phone': 'Please enter a valid phone number',
-    'search': 'Please enter a valid search term',
-    'number': 'Please enter a valid number',
-    'text': 'Please enter a valid text',
-    'required': 'This field is required',
-    'minlength': 'This field must be at least {0} characters long',
-    'maxlength': 'This field must be at most {0} characters long',
-    'min': 'This field must be at least {0}',
-    'max': 'This field must be at most {0}',
-    'between': 'This field must be between {0} and {1}',
-    'pattern': 'Please use a valid format',
-    'date': 'Please enter a valid date',
-    'time': 'Please enter a valid time',
-    'datetime': 'Please enter a valid date and time',
-    'datetime-local': 'Please enter a valid date and time',
-    'month': 'Please enter a valid month',
-    'week': 'Please enter a valid week',
-    'color': 'Please enter a valid color',
-    'file': 'Please enter a valid file',
-    'range': 'Please enter a valid range',
-    'radio': 'Please select a valid option',
-    'checkbox': 'Please select a valid option',
-    'select': 'Please select a valid option',
-    'multiple': 'Please select a valid option',
+    "email": "Please enter a valid email address",
+    "password": "Please enter a valid password",
+    "url": "Please enter a valid URL",
+    "phone": "Please enter a valid phone number",
+    "search": "Please enter a valid search term",
+    "number": "Please enter a valid number",
+    "text": "Please enter a valid text",
+    "required": "This field is required",
+    "minlength": "This field must be at least {0} characters long",
+    "maxlength": "This field must be at most {0} characters long",
+    "min": "This field must be at least {0}",
+    "max": "This field must be at most {0}",
+    "between": "This field must be between {0} and {1}",
+    "pattern": "Please use a valid format",
+    "date": "Please enter a valid date",
+    "time": "Please enter a valid time",
+    "datetime": "Please enter a valid date and time",
+    "datetime-local": "Please enter a valid date and time",
+    "month": "Please enter a valid month",
+    "week": "Please enter a valid week",
+    "color": "Please enter a valid color",
+    "file": "Please enter a valid file",
+    "range": "Please enter a valid range",
+    "radio": "Please select a valid option",
+    "checkbox": "Please select a valid option",
+    "select": "Please select a valid option",
+    "multiple": "Please select a valid option",
   };
   (function (IndeterminateType) {
     IndeterminateType["uncheck"] = "uncheck";

package/dist/components/datetime-picker.js

@@ -1419,7 +1419,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     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(), noMargin: this.noMargin, 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),

package/dist/components/generate.js

@@ -5,7 +5,7 @@
 import { Build } from '@stencil/core/internal/client';
 import { c as colors } from './colors2.js';
 
-const version = "2.9.0-rc.14";
+const version = "2.9.0-rc.15";
 
 /**
  * 'status' prop predefined values

package/dist/components/is-load-decorator.js

@@ -9,8 +9,9 @@ function IsLoad() {
     const { componentDidLoad } = proto;
     proto.componentDidLoad = function () {
       const host = getElement(this);
+      const { openIntersecting } = host;
       initProps(host);
-      registerAttrReflect(host);
+      openIntersecting && registerAttrReflect(host);
       return componentDidLoad && componentDidLoad.call(this);
     };
   };

package/dist/components/list.js

@@ -890,6 +890,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.keyControl = false;
     this.checkAll = true;
     this.stopDeepClean = false;
+    this.openIntersecting = false;
     this.linkedComponent = undefined;
     this.isOpen = false;
     this.calculatedViewport = false;
@@ -1621,6 +1622,7 @@ const BcmList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "keyControl": [1028, "key-control"],
     "checkAll": [1028, "check-all"],
     "stopDeepClean": [4, "stop-deep-clean"],
+    "openIntersecting": [4, "open-intersecting"],
     "linkedComponent": [1025, "linked-component"],
     "placeholder": [1025],
     "searchPlaceholder": [1025, "search-placeholder"],