bromcom-ui 2.3.54 → 2.3.58

package/dist/esm/bcm-checkbox-lite_4.entry.js

@@ -0,0 +1,284 @@
+import { r as registerInstance, h, H as Host, g as getElement, a as getAssetPath, c as createEvent } from './index-8fe7aea4.js';
+import { c as classnames } from './index-e58a2d48.js';
+
+const checkboxCss = "@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}:host(.hidden){display:none}input{display:none}.svg-icon{filter:brightness(0) invert(1);width:12px;height:12px}label{display:flex;align-items:flex-start;font-size:14px;color:var(--bcm-color-grey-8);cursor:pointer}label span.icon{display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;border:1px solid #D9D9D9;margin-right:8px;border-radius:2px;margin-top:2px;background-color:var(--bcm-color-grey-1)}:host(.indeterminate) label span.icon{position:relative}:host(.indeterminate) label span.icon::after{content:\"\";position:absolute;top:50%;left:8px;width:10px;height:10px;background-color:var(--bcm-color-prime-blue-6);transform:translate(-50%, -50%);opacity:1;z-index:1}:host(.indeterminate) label span.icon::before{content:\"\";position:absolute;top:-1px;left:-1px;width:16px;height:100%;border-radius:2px;background-color:var(--bcm-color-grey-1);border:1px solid var(--bcm-color-grey-5);opacity:1;z-index:1}:host(.indeterminate) label span.icon:hover:not(.disabled):before{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}input:checked+label span.icon{background-color:var(--bcm-color-prime-blue-6);border-color:transparent}input:checked+label .icon-checked{display:block}bcm-icon{filter:brightness(0) invert(1)}input[disabled]+label{cursor:not-allowed}input[disabled]+label span.icon{background-color:var(--bcm-color-grey-3);border-color:var(--bcm-color-grey-5)}input[disabled]+label bcm-icon{filter:brightness(0);opacity:0.3}input:not([disabled])+label:hover span.icon{border-color:var(--bcm-color-prime-blue-6);box-shadow:0px 2px 4px rgba(54, 121, 171, 0.5)}:host(.error) input:not([disabled])+label span.icon{border-color:var(--bcm-color-red-6)}.caption-area{margin-bottom:8px;min-height:20px;display:block}.input-caption{display:block}.caption-default{color:#8C8C8C}.caption-primary{color:#4293CF}.caption-success{color:#52C41A}.caption-warning{color:#FA8C16}.caption-error{color:#F5222D}.radio-button{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8);border:1px solid var(--bcm-color-grey-5);padding:0 16px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}.radio-button>span.icon{display:none}.radio-button>span.slot{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;user-select:none}.radio-button:hover:not(.disabled){color:var(--bcm-color-prime-blue-5)}.radio-button:active:not(.disabled){color:var(--bcm-color-prime-blue-7)}.radio-button.disabled{background-color:var(--bcm-color-grey-3);color:var(--bcm-color-grey-6);cursor:not-allowed}.radio-button.checked.disabled{background-color:var(--bcm-color-grey-4);color:var(--bcm-color-grey-1);border-color:var(--bcm-color-grey-5)}.radio-button.checked.solid{color:var(--bcm-color-grey-1);background-color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.solid:hover{background-color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.solid:active{background-color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.checked.outline{background-color:var(--bcm-color-grey-1);color:var(--bcm-color-prime-blue-6);border-color:var(--bcm-color-prime-blue-6)}.radio-button.checked.outline:hover{color:var(--bcm-color-prime-blue-5);border-color:var(--bcm-color-prime-blue-5)}.radio-button.checked.outline:active{color:var(--bcm-color-prime-blue-7);border-color:var(--bcm-color-prime-blue-7)}.radio-button.large{height:40px}.radio-button.medium{height:32px}.radio-button.small{height:24px}";
+
+const BcmCheckboxLite = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Component Properties
+     */
+    this.value = '';
+    this.name = 'checkbox';
+    this.checked = false;
+    this.indeterminate = false;
+    this.disabled = false;
+    this.readOnly = false;
+    this.hidden = false;
+    this.required = false;
+    this.noCaption = false;
+    this.captionType = 'default';
+  }
+  connectedCallback() { }
+  disconnectedCallback() { }
+  componentWillLoad() { }
+  componentDidLoad() { }
+  componentWillRender() { }
+  componentDidRender() { }
+  componentWillUpdate() { }
+  componentDidUpdate() { }
+  render() {
+    const { disabled, checked, readOnly, name, required } = this;
+    const hostClasses = classnames(this.hidden ? 'hidden' : null, {
+      'indeterminate': this.indeterminate
+    });
+    const iconClasses = classnames('icon');
+    return (h(Host, { class: hostClasses }, h("input", { id: name, type: "checkbox", checked: checked, disabled: disabled, required: required, readOnly: readOnly }), h("label", { htmlFor: name }, h("span", { class: iconClasses }, h("svg", { class: "svg-icon icon-checked", width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1.91308 4.03516H1.91326C1.99256 4.03525 2.07081 4.05331 2.14213 4.08798C2.21341 4.12262 2.27591 4.17295 2.32497 4.2352L1.91308 4.03516ZM1.91308 4.03516H1.09394C0.890308 4.03516 0.776602 4.26975 0.902321 4.4292L0.902371 4.42927L4.11214 8.49567L4.11218 8.49573C4.32247 8.76188 4.72568 8.76114 4.93667 8.49617L4.93708 8.49566L10.6597 1.24398C10.6598 1.24378 10.66 1.24358 10.6602 1.24338C10.7884 1.08295 10.6699 0.85 10.4689 0.85H9.6498C9.48941 0.85 9.33668 0.9235 9.2376 1.05044C9.23751 1.05055 9.23742 1.05066 9.23734 1.05077L4.52403 7.02157M1.91308 4.03516L4.52403 7.02157M4.52403 7.02157L2.32506 4.23531L4.52403 7.02157Z", fill: "#BFBFBF", stroke: "#BFBFBF", "stroke-width": "0.3" }))))));
+  }
+  get el() { return getElement(this); }
+};
+BcmCheckboxLite.style = checkboxCss;
+
+const dividerCss = "@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;justify-content:center}:host(.hidden){display:none}.divider{background-color:var(--bcm-color-grey-5)}.divider.horizontal{height:1px;margin:4px 0}.divider.vertical{height:100%;width:1px;margin:0 4px}";
+
+const BcmBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.direction = 'horizontal';
+    this.width = '100';
+    this.hidden = false;
+  }
+  render() {
+    const classes = classnames('divider', this.direction);
+    const styles = {
+      width: this.width + '%'
+    };
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes, style: this.direction === 'horizontal' && styles })));
+  }
+};
+BcmBadge.style = dividerCss;
+
+/**
+ * 'image' prop predefined values
+ */
+var ImageProps;
+(function (ImageProps) {
+  ImageProps["default"] = "default.svg";
+  ImageProps["simple"] = "simple.svg";
+})(ImageProps || (ImageProps = {}));
+/**
+ * 'size' prop predefined values
+ */
+var SizeProps;
+(function (SizeProps) {
+  SizeProps["small"] = "small";
+  SizeProps["medium"] = "medium";
+  SizeProps["big"] = "big";
+})(SizeProps || (SizeProps = {}));
+
+const emptyCss = "@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}.empty.small{max-width:100px}.empty.medium{max-width:140px}.empty.big{max-width:200px}.text{font-size:14px;color:var(--bcm-color-grey-8)}.content{text-align:center}img{max-width:100%}";
+
+const BcmEmpty = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Component Properties
+     */
+    this._image = ImageProps.default;
+    this.size = SizeProps.medium;
+    this.hidden = false;
+  }
+  /**
+  * @ComponentMethod
+  */
+  componentWillLoad() {
+    this.parseImage(this._image);
+  }
+  /**
+  * @desc
+  * @param newValue
+  * @returns {void}
+  */
+  parseImage(newValue) {
+    if (newValue) {
+      newValue in ImageProps
+        ? this.image = ImageProps[newValue]
+        : this.image = ImageProps.default;
+    }
+  }
+  render() {
+    const classes = classnames('empty', {
+      [this.size]: this.size
+    });
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("div", { class: classes }, h("img", { src: getAssetPath(`./static/${this.image}`) }), h("div", { class: "content" }, this.text && (h("span", { class: "text" }, this.text)), h("slot", null)))));
+  }
+  static get assetsDirs() { return ["static"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "_image": ["parseImage"]
+  }; }
+};
+BcmEmpty.style = emptyCss;
+
+const searchCss = "@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}";
+
+const lowercase = (str) => str.toLowerCase();
+const BcmSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.bcmOnSearch = createEvent(this, "bcm-on-search", 7);
+    this.bcmOnSearchValue = createEvent(this, "bcm-on-search-value", 7);
+    this.data = [];
+    this.searchFields = ['text', 'value' /*, ...*/];
+    this.returnField = 'idx';
+    this.searchSub = null;
+    this.hidden = false;
+    this.onlyChild = false;
+    this.clearable = false;
+    this.searchValue = '';
+    this.searchPlaceholder = 'Search';
+    this.disabled = false;
+    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
+    this.results = [];
+  }
+  componentDidLoad() {
+    this.el.shadowRoot.querySelector('bcm-input').clearable = this.clearable;
+  }
+  listenBcmChange(e) {
+    e.stopPropagation();
+  }
+  async setValue(value) {
+    const input = this.el.shadowRoot.querySelector('bcm-input');
+    await input.setValue(value);
+    return value;
+  }
+  async select() {
+    const input = this.el.shadowRoot.querySelector('bcm-input');
+    await input.select();
+    this.bcmOnSearch.emit(true);
+    return true;
+  }
+  async setClear() {
+    const input = this.el.shadowRoot.querySelector('bcm-input');
+    await input.setClear();
+    this.bcmOnSearch.emit(true);
+    return true;
+  }
+  async searchArray(value, idFields = null) {
+    // console.log(this.data)
+    let cacheSearchFields = this.searchFields;
+    let arrayResult = [];
+    if (idFields) {
+      this.searchFields = [idFields];
+    }
+    value.forEach(item => {
+      // item = {[idFields]:item}
+      this.results = [];
+      // console.log(this.data)
+      this.nestedSearch(this.data, item, true);
+      arrayResult.push(...this.results);
+    });
+    this.searchFields = cacheSearchFields;
+    return arrayResult;
+    // const input = this.el.shadowRoot.querySelector("bcm-input");
+    // await input.setValue( value )
+    // return value
+  }
+  nestedSearch(items, value, equal = false) {
+    var result;
+    items && (items.map((item) => {
+      this.searchFields.map(searchField => {
+        if (searchField in item) {
+          // debugger;
+          item[searchField] = lowercase(String(item[searchField]));
+          if (this.onlyChild) {
+            if (item[this.searchSub]) {
+              var temp = this.nestedSearch(item[this.searchSub], value, equal);
+              if (temp) {
+                this.results.push((result = String(item[this.returnField])));
+                this.results.push(temp);
+              }
+            }
+            else {
+              if (equal) {
+                // console.log(value)
+                if (item[searchField] == lowercase(String(value))) {
+                  // if (item == lowercase(value)) {
+                  this.results.push((result = String(item[this.returnField])));
+                  // this.results.push (result = String(item))
+                }
+              }
+              else {
+                if (item[searchField].indexOf(lowercase(value)) !== -1) {
+                  this.results.push((result = String(item[this.returnField])));
+                }
+              }
+            }
+          }
+          else {
+            if (item[this.searchSub]) {
+              var temp = this.nestedSearch(item[this.searchSub], value, equal);
+              if (temp) {
+                this.results.push((result = String(item[this.returnField])));
+                this.results.push(temp);
+              }
+            }
+            if (equal) {
+              // console.log(value)
+              if (item[searchField] == lowercase(String(value))) {
+                // if (item == lowercase(value)) {
+                this.results.push((result = String(item[this.returnField])));
+                // this.results.push (result = String(item))
+              }
+            }
+            else {
+              if (item[searchField].indexOf(lowercase(value)) !== -1) {
+                this.results.push((result = String(item[this.returnField])));
+              }
+            }
+          }
+        }
+      });
+    }));
+    return result;
+  }
+  /**
+   * @desc
+   * @param value
+   */
+  inputChange(value) {
+    this.results = [];
+    // data prop'unda arama yapılacak (searchFields prop'u içerisindeki alanlar ile)
+    // arama sonucunda eşleyen itemların 'idx', index
+    // değerleri, array şeklinde root component'e
+    // event ile gönderilecek
+    // Örneğin value == 'to' olduğunda aşağıdaki
+    // sonuçlar filtrelenmeli
+    // -->
+    //{ text: 'Mateusz Eaton', idx: 2 },
+    //{ text: 'Tony Vickers', idx: 3 },
+    // result array'i eşleşen itemların
+    // index numaralarını tutacak
+    // results = [2, 3]
+    // Örnek arama
+    // #
+    this.nestedSearch(this.data, value);
+    this.results = Array.from(new Set(this.results));
+    (value && ((this.results.length > 0 && this.bcmOnSearch.emit(this.results)) || this.bcmOnSearch.emit([-1]))) || this.bcmOnSearch.emit(true);
+    this.bcmOnSearchValue.emit(value);
+  }
+  render() {
+    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    return (h(Host, { class: hostClasses }, h("bcm-input", { placeholder: this.searchPlaceholder, "no-caption": true, "no-margin": true, "full-width": true, disabled: this.disabled, type: "search", "on-bcm-change": e => this.inputChange(e.detail), value: this.searchValue })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "searchValue": ["inputChange"]
+  }; }
+};
+BcmSearch.style = searchCss;
+
+export { BcmCheckboxLite as bcm_checkbox_lite, BcmBadge as bcm_divider, BcmEmpty as bcm_empty, BcmSearch as bcm_search };

package/dist/esm/bcm-colorpicker.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, a as getAssetPath, H as Host, g as getElement } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
-import './utils-b7fba7c4.js';
-import { E as ElementDragger, D as DragDirections } from './element-dragger-03ac2a5e.js';
+import './utils-de9aee67.js';
+import { E as ElementDragger, D as DragDirections } from './element-dragger-97a8f373.js';
 
 const colorpickerCss = "@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{position:relative;margin:0 0 8px 0}.color-picker{position:relative;width:200px}.color-picker.open .picker{opacity:1;visibility:visible;transform:scale(1) translateY(56px)}.picker{width:300px;position:absolute;top:0;z-index:1;background-color:#ffffff;border:1px solid #F6F6F6;box-shadow:0px 3px 3.6px 0.4px rgba(0, 0, 0, 0.15);opacity:0;visibility:hidden;transition:transform 0.2s ease, opacity 0.3s ease;transform:scale(0.8) translateY(-100px)}.label{display:flex;flex-direction:column;color:var(--bcm-color-grey-9);margin-bottom:4px}.caption-area{min-height:20px}.input-caption{display:block}.input{display:flex;cursor:pointer;border:1px solid var(--bcm-color-grey-5);border-radius:2px}.color{position:relative;width:100%;height:166px;user-select:none}.color img{width:100%;height:100%;user-select:none;pointer-events:none}.color-indicator{position:absolute;top:0;left:0;width:17px;height:17px;border:1px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 2px rgba(0, 0, 0, 0.25);transform:translate(0, 0);border-radius:100%;user-select:none;box-sizing:border-box;pointer-events:none}.colors{position:relative;width:100%;height:16px;margin-top:8px}.colors img{width:100%;user-select:none;pointer-events:none}.colors-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;user-select:none}.colors-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100%;user-select:none;box-sizing:border-box;pointer-events:none}.transparency{position:relative;width:100%;height:16px;margin-top:8px}.transparency-holder{position:absolute;top:50%;left:0;width:100%;height:8px;overflow:hidden;transform:translateY(-50%);border-radius:8px;background:transparent none repeat center center/20px}.transparency-indicator{position:absolute;top:50%;left:0;width:17px;height:17px;border:2px solid rgba(255, 255, 255, 0.82);box-shadow:0px 1px 4px rgba(0, 0, 0, 0.25);transform:translateY(-50%);border-radius:100%;user-select:none;box-sizing:border-box}.colors-transparency{padding:16px}.active-color{display:flex;align-items:center;width:100%;height:30px}.active-color .color-thumb{width:100%;height:100%;background-color:transparent;border-radius:1px 0 0 1px}.active-color .color-text{font-size:14px;color:#656565;margin-left:8px}.icon{display:flex;align-items:center;justify-content:center;cursor:pointer;width:30px;color:var(--bcm-color-grey-6)}.color-input{border:none;width:100%;padding:10px;outline:none;-webkit-tap-highlight-color:transparent}";
 
@@ -395,7 +395,7 @@ const BcmColorPicker = class {
       open: this.open
     });
     const captionClasses = classnames('size-1', 'input-caption', 'caption-' + captionType);
-    return (h(Host, null, h("div", { class: classes, onClick: () => this.handleClick() }, label && h("label", { class: "label size-1" }, " ", label, " ", required && ('*'), " "), h("div", { class: "input" }, h("div", { class: "active-color" }, h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), h("span", { class: "icon", slot: "suffix" }, h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
+    return (h(Host, null, h("div", { class: classes, onClick: () => this.handleClick() }, label && h("div", null, h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required })), h("div", { class: "input" }, h("div", { class: "active-color" }, h("div", { class: "color-thumb", style: { backgroundColor: this.value } })), h("span", { class: "icon", slot: "suffix" }, h("bcm-icon", { icon: "bg-colors" }))), !noCaption && (h("div", { class: "caption-area" }, captionType == "error"
       ? h("span", { class: captionClasses }, " ", captionError, " ")
       : caption && h("span", { class: captionClasses }, " ", caption, " "))), h("div", { class: "picker" }, h("div", { class: "input" }, h("input", { type: "text", class: "color-input", maxlength: "7", ref: el => (this.inputElement = el), onKeyUp: (e) => this.handleColorInputKeyUp(e) })), h("div", { class: "color", onMouseDown: () => this.mouseState = 'down', style: { backgroundColor: this.hsvtorgb({ h: this.h, s: this.s, v: this.v }).hex }, ref: el => (this.colorElement = el) }, h("img", { src: getAssetPath('./static/color.svg') }), h("div", { class: "color-indicator", ref: el => (this.colorIndicatorElement = el) })), h("div", { class: "colors-transparency" }, h("div", { class: "colors", onMouseDown: () => this.mouseState = 'down', ref: el => (this.colorsElement = el) }, h("div", { class: "colors-holder" }, h("img", { src: getAssetPath('./static/colors.svg') })), h("div", { class: "colors-indicator", ref: el => (this.colorsIndicatorElement = el) })))))));
   }

package/dist/esm/{bcm-datetime-picker_2.entry.js → bcm-datetime-picker.entry.js}

@@ -1,8 +1,7 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-8fe7aea4.js';
 import { c as classnames } from './index-e58a2d48.js';
-import { d as delay } from './utils-b7fba7c4.js';
-import { D as DragDirections, E as ElementDragger } from './element-dragger-03ac2a5e.js';
-import { p as popoverPlacement, a as popoverBoxPlacement } from './popover-placement-a4ab1587.js';
+import './utils-de9aee67.js';
+import { D as DragDirections, E as ElementDragger } from './element-dragger-97a8f373.js';
 
 var Months;
 (function (Months) {
@@ -167,7 +166,7 @@ const BcmDatetimePicker = class {
     const errorObject1 = { isValid: false, value: this.valueText };
     const errorObject2 = { isValid: false, value: this.inputElement.value };
     if (!newValue) {
-      this.change.emit(errorObject2);
+      this.change.emit();
       return;
     }
     if (this.type !== Types.range && this.error) {
@@ -1227,136 +1226,4 @@ const BcmDatetimePicker = class {
 };
 BcmDatetimePicker.style = datetimePickerCss;
 
-const tooltipCss = "@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:inline-flex}:host(.hidden){display:none}:host(:focus){outline:none}.tooltip{position:relative;}.tooltip .box{position:absolute;display:none;box-sizing:border-box;background-color:#262626;border:1px solid #262626;border-radius:2px;z-index:10700;width:max-content;padding:4px 8px;color:var(--bcm-color-grey-1)}.tooltip::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10700}.tooltip.open .box,.tooltip.open::after{display:block}.tooltip.top .box{bottom:100%;margin-bottom:8px}.tooltip.top::after{bottom:100%;margin-bottom:-4px;border-color:#262626 transparent transparent transparent}.tooltip.bottom .box{top:100%;margin-top:8px}.tooltip.bottom::after{top:100%;margin-top:-4px;border-color:transparent transparent #262626 transparent}.tooltip.left .box{right:100%;margin-right:8px}.tooltip.left::after{right:100%;margin-right:-4px;border-color:transparent transparent transparent #262626}.tooltip.right .box{left:100%;margin-left:8px}.tooltip.right::after{left:100%;margin-left:-4px;border-color:transparent #262626 transparent transparent}.tooltip.top.center .box,.tooltip.bottom.center .box{left:50%;transform:translateX(-50%)}.tooltip.top.center::after,.tooltip.bottom.center::after{left:50%;transform:translateX(-50%)}.tooltip.top.start .box,.tooltip.bottom.start .box{left:0}.tooltip.top.start::after,.tooltip.bottom.start::after{left:8px}.tooltip.top.end .box,.tooltip.bottom.end .box{right:0}.tooltip.top.end::after,.tooltip.bottom.end::after{right:8px}.tooltip.left.center .box,.tooltip.right.center .box{top:50%;transform:translateY(-50%)}.tooltip.left.center::after,.tooltip.right.center::after{top:50%;transform:translateY(-50%)}.tooltip.left.start .box,.tooltip.right.start .box{top:0}.tooltip.left.start::after,.tooltip.right.start::after{top:4px}.tooltip.left.end .box,.tooltip.right.end .box{bottom:0}.tooltip.left.end::after,.tooltip.right.end::after{bottom:4px}";
-
-const BcmTooltip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onShow = createEvent(this, "bcm-show", 7);
-    this.onHide = createEvent(this, "bcm-hide", 7);
-    this.placement = 'top';
-    this.trigger = 'hover';
-    this.hidden = false;
-    this._internal_id = (Math.random() * 4).toString(16).replace('.', '');
-  }
-  async show() {
-    // Prevent subsequent calls
-    if (this.open) {
-      return;
-    }
-    this.open = true;
-    this.onShow.emit();
-  }
-  async hide() {
-    // Prevent subsequent calls
-    if (!this.open) {
-      return;
-    }
-    this.open = false;
-    this.onHide.emit();
-  }
-  handleClickOutside(e) {
-    if (!this.host.contains(e.target)) {
-      if (this.open) {
-        this.open = false;
-      }
-    }
-  }
-  async handleOpen() {
-    await this.createElement();
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-      tooltipBox.classList.toggle("open");
-    }
-  }
-  async createElement() {
-    var target = this.host.getBoundingClientRect();
-    var placementString = String([...this.getPlacement()]).replace(',', ' ');
-    var element;
-    if (!document.getElementById("box" + this._internal_id)) {
-      element = document.createElement("bcm-tooltip-box");
-      element.setAttribute("id", "box" + this._internal_id);
-    }
-    else {
-      element = document.getElementById("box" + this._internal_id);
-    }
-    element.setAttribute("message", this.message);
-    // element.setAttribute("placement", placementString)
-    element.style.position = "absolute";
-    // element.style.top = target.top + "px"
-    // element.style.left = (target.left + (target.width / 2)) + "px"
-    element.setAttribute("placement", placementString);
-    // element.style.zIndex = "999999999"
-    document.body.appendChild(element);
-    await delay(50);
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-    }
-    element.style.top = popoverBoxPlacement(this.placement, target)[0] + "px";
-    element.style.left = popoverBoxPlacement(this.placement, target)[1] + "px";
-  }
-  hasTrigger(trigger) {
-    return this.trigger === trigger;
-  }
-  getPlacement() {
-    const placements = this.placement.split('-');
-    if (placements.length === 1) {
-      placements.push('center');
-    }
-    return placements;
-  }
-  /*
-      Trigger Functions
-  */
-  handleMouseOver() {
-    if (this.hasTrigger('hover')) {
-      this.show();
-    }
-  }
-  handleMouseOut() {
-    if (this.hasTrigger('hover')) {
-      this.hide();
-    }
-  }
-  handleClick() {
-    if (this.hasTrigger('click')) {
-      this.open ? this.hide() : this.show();
-    }
-  }
-  handleFocus() {
-    if (this.hasTrigger('focus')) {
-      this.show();
-    }
-  }
-  handleBlur() {
-    if (this.hasTrigger('focus')) {
-      this.hide();
-    }
-  }
-  async componentDidRender() {
-    await this.createElement();
-    var tooltipBox = document.getElementById("box" + this._internal_id).shadowRoot.querySelector(".tooltip-box");
-    if (tooltipBox && tooltipBox.querySelector(".box")) {
-      var tooltipBoxIn = tooltipBox.querySelector(".box");
-      popoverPlacement(tooltipBoxIn, this.host, this.placement, (place) => this.placement = place);
-    }
-  }
-  render() {
-    const classes = classnames('tooltip', ...this.getPlacement(), {
-    // 'open': this.open
-    });
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses, onClick: () => this.handleClick(), onMouseOver: () => this.handleMouseOver(), onMouseOut: () => this.handleMouseOut(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), tabindex: 0 }, h("span", { class: classes }, h("span", { class: "box size-2" }, this.message), h("slot", null))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpen"]
-  }; }
-};
-BcmTooltip.style = tooltipCss;
-
-export { BcmDatetimePicker as bcm_datetime_picker, BcmTooltip as bcm_tooltip };
+export { BcmDatetimePicker as bcm_datetime_picker };

package/dist/esm/bcm-dropdown.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 { g as getChilds } from './utils-b7fba7c4.js';
+import { g as getChilds } from './utils-de9aee67.js';
 
 const dropdownCss = "@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:inline-block;width:fit-content}:host(.hidden){display:none}*{box-sizing:border-box}::-webkit-details-marker{display:none}summary{display:inline-block}.items-container{--group-shadow:0px 4px 4px rgba(0, 0, 0, 0.25)}details{position:relative}.items-container{min-width:150px;transition:height 0.3s ease;position:absolute;left:0;transition:height 0.3s ease;background-color:#ffffff;border-radius:2px;box-shadow:var(--group-shadow);z-index:10000}";