bromcom-ui 3.0.0-alpha.3 → 3.0.0-alpha.5

package/dist/components/bcm-color-input.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
 import './validators.js';
 import { G as Generate } from './generate.js';
@@ -36,26 +36,9 @@ const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   handleChange(color) {
     this.value = color;
-    this.getInputElement().setValue(color);
-    forceUpdate(this.el);
   }
-  getInputElement() {
-    return this.el.querySelector(`bcm-input`);
-  }
-  getPickerElement() {
-    return document.querySelector("#" + this._id + "-picker");
-  }
-  handleInputChanged(e) {
-    this.value = e.detail;
-    const picker = this.getPickerElement();
-    if (picker) {
-      if (this.type === "palette") {
-        picker.value = e.detail;
-      }
-      else {
-        picker.color = e.detail;
-      }
-    }
+  handleInputChanged(value) {
+    this.value = value;
   }
   eyeDropper() {
     const eyeDropper = new window.EyeDropper();
@@ -77,9 +60,9 @@ const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return typeof window !== "undefined" && "EyeDropper" in window;
   }
   render() {
-    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", disabled: this.disabled, readonly: this.readonly, "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-color-default", style: {
+    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", disabled: this.disabled, readonly: this.readonly, "onBcm-change": ({ detail }) => this.handleInputChanged(detail), value: this.value }, h("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-color-default", style: {
         backgroundColor: this.value,
-      } }), this.isEyeDropperSupported() && h("i", { slot: "suffix", class: "far fa-eye-dropper", onClick: () => this.eyeDropper() })), h("bcm-linked", { targetId: this._id + "-color" }, this.type === 'palette' ? (h("bcm-color-palette", { id: this._id + "-picker", value: this.value, "onBcm-change": e => this.handleChange(e.detail) })) : (h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.handleChange(e.detail) })))));
+      } }), this.isEyeDropperSupported() && h("i", { slot: "suffix", class: "far fa-eye-dropper", onClick: () => this.eyeDropper() })), h("bcm-linked", { targetId: this._id + "-color-container" }, this.type === 'palette' ? (h("bcm-color-palette", { id: this._id + "-picker", value: this.value, "onBcm-change": ({ detail }) => this.handleChange(detail) })) : (h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: ({ detail }) => this.handleChange(detail) })))));
   }
   get el() { return this; }
   static get style() { return colorInputCss; }

package/dist/components/bcm-dropdown.js

@@ -74,6 +74,41 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       item.setActive(id);
     });
   }
+  componentWillLoad() {
+    this.checkContent();
+  }
+  componentDidLoad() {
+    this.observeContent();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  observeContent() {
+    this.observer = new MutationObserver(() => {
+      this.manualSlotContent();
+    });
+    this.observer.observe(this.el, { childList: true });
+  }
+  manualSlotContent() {
+    const contentNodes = this.el.querySelectorAll(':scope > [slot="content"], :scope > bcm-content, :scope > bcm-items');
+    if (contentNodes.length > 0) {
+      const menu = document.getElementById(this.menuId);
+      if (menu) {
+        contentNodes.forEach(node => {
+          if (!menu.contains(node)) {
+            menu.appendChild(node);
+          }
+        });
+        if (menu === null || menu === void 0 ? void 0 : menu.updateLayout) {
+          menu === null || menu === void 0 ? void 0 : menu.updateLayout();
+        }
+      }
+    }
+  }
+  checkContent() {
+    this.manualSlotContent();
+  }
   async getActive() {
     return this.activeItem;
   }

package/dist/components/bcm-file-upload.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface BcmFileUpload extends Components.BcmFileUpload, HTMLElement {}
+export const BcmFileUpload: {
+  prototype: BcmFileUpload;
+  new (): BcmFileUpload;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;