bromcom-ui 2.7.38-rc.6 → 2.7.38-rc.7

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

@@ -0,0 +1,72 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { HexColorPicker } from "react-colorful";
+import { debounce } from "lodash";
+// https://github.com/omgovich/react-colorful
+export class BcmColorful {
+  constructor() {
+    this.color = "#3b82f6";
+  }
+  handleChange(e) {
+    this.bcmChange.emit(e);
+  }
+  componentDidRender() {
+    const { color } = this;
+    ReactDOM.render(React.createElement(HexColorPicker, {
+      color,
+      onChange: debounce(this.handleChange.bind(this), 150),
+    }), this.el);
+  }
+  static get is() { return "bcm-colorful"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["colorful.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["colorful.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"#3b82f6\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "bcmChange",
+        "name": "bcmChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/molecules/input/input.css

@@ -1171,6 +1171,7 @@
 }
 .bcm-input__container .input-suffix:not(:empty) {
   min-width: 24px;
+  padding-right: 4px;
 }
 .bcm-input__container .input-prefix:not(:empty),
 .bcm-input__container .input-suffix:not(:empty) {
@@ -1178,11 +1179,11 @@
   align-items: center;
   justify-content: center;
   cursor: default;
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix:not(:empty) .unit-prefix,
 .bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix-button:not(:empty),
 .bcm-input__container .input-suffix-button:not(:empty) {

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

@@ -304,6 +304,29 @@ export class BcmInput {
     }
     return val;
   }
+  eyeDropper() {
+    const eyeDropper = new window.EyeDropper();
+    eyeDropper
+      .open()
+      .then((color) => {
+      console.log("color: ", color.sRGBHex);
+      this.setValue(color.sRGBHex);
+    })
+      .catch((error) => {
+      if (error.name === "NotAllowedError") {
+        console.log("Permission to access sensor was denied.");
+      }
+      else if (error.name === "NotSupportedError") {
+        console.log("Sensor not supported.");
+      }
+    });
+  }
+  isEyeDropperSupported() {
+    return typeof window !== "undefined" && "EyeDropper" in window;
+  }
+  toggleLinked() {
+    document.getElementById(this._id + "-linked").toggle();
+  }
   render() {
     const { value, size, label, type, captionType, caption, captionError, placeholder, fullWidth, disabled, readonly, clearable, passwordToggle, isPasswordVisible, noDefaultIcon, unit, inValid, focused, unitPrefix, noCaption, required, hidden, _id, autocomplete } = this;
     const isActiveClearable = (value === null || value === void 0 ? void 0 : value.length) > 0 && clearable;
@@ -312,7 +335,8 @@ export class BcmInput {
       // 'no-margin': noMargin,
       'full-width': fullWidth
     });
-    return (h(Host, { tabindex: "-1", onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage })));
+    return (h(Host, { tabindex: "-1", onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
+      h("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
   }
   static get is() { return "bcm-input"; }
   static get originalStyleUrls() {
@@ -566,7 +590,7 @@ export class BcmInput {
         "mutable": true,
         "complexType": {
           "original": "InputTypes",
-          "resolved": "\"email\" | \"hidden\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "resolved": "\"color\" | \"email\" | \"hidden\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "references": {
             "InputTypes": {
               "location": "import",

package/dist/collection/components/molecules/search/search.css

@@ -1171,6 +1171,7 @@
 }
 .bcm-input__container .input-suffix:not(:empty) {
   min-width: 24px;
+  padding-right: 4px;
 }
 .bcm-input__container .input-prefix:not(:empty),
 .bcm-input__container .input-suffix:not(:empty) {
@@ -1178,11 +1179,11 @@
   align-items: center;
   justify-content: center;
   cursor: default;
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix:not(:empty) .unit-prefix,
 .bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix-button:not(:empty),
 .bcm-input__container .input-suffix-button:not(:empty) {

package/dist/collection/components/molecules/textarea/textarea.css

@@ -1171,6 +1171,7 @@
 }
 .bcm-input__container .input-suffix:not(:empty) {
   min-width: 24px;
+  padding-right: 4px;
 }
 .bcm-input__container .input-prefix:not(:empty),
 .bcm-input__container .input-suffix:not(:empty) {
@@ -1178,11 +1179,11 @@
   align-items: center;
   justify-content: center;
   cursor: default;
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix:not(:empty) .unit-prefix,
 .bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix-button:not(:empty),
 .bcm-input__container .input-suffix-button:not(:empty) {

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

@@ -24,12 +24,14 @@ export class BcmTooltip {
     this.trigger = Bcm.TriggerType.click;
     this.open = false;
     this.color = "slate";
+    this.size = Bcm.Size.medium;
     this.tooltip = new Tooltip({
       targetId: this._id,
       message: this.message,
       placement: this.placement,
       color: this.color,
       trigger: this.trigger,
+      size: this.size,
     });
   }
   componentDidLoad() {
@@ -40,6 +42,7 @@ export class BcmTooltip {
     this.tooltip.placement = this.placement;
     this.tooltip.color = this.color;
     this.tooltip.trigger = this.trigger;
+    this.tooltip.size = this.size;
     this.tooltip.update();
   }
   async show() {
@@ -174,6 +177,29 @@ export class BcmTooltip {
         "attribute": "color",
         "reflect": false,
         "defaultValue": "\"slate\""
+      },
+      "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": false,
+        "defaultValue": "Bcm.Size.medium"
       }
     };
   }

package/dist/collection/helper/tooltip-helper.js

@@ -2,21 +2,34 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { FloatingUI } from '@bcm/utils';
-import { ColorHelper, Generate, StringHelper } from '@bcm/helpers';
+import { FloatingUI } from "@bcm/utils";
+import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
 export class Tooltip {
-  constructor({ message, targetId, placement = 'top', color = 'slate-700', trigger = 'none' }) {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium" }) {
     this.bgColor = () => ColorHelper.twColor(this.color, 700);
     this.target = () => document.getElementById(this.targetId);
+    this.sizeClass = () => {
+      switch (this.size) {
+        case Bcm.Size.small:
+          return "tw-text-1";
+        case Bcm.Size.medium:
+          return "tw-text-2";
+        case Bcm.Size.large:
+          return "tw-text-3";
+        default:
+          return "tw-text-2";
+      }
+    };
     this.init = () => {
-      this.el = Generate.createElement('div', {
-        'id': `${this.targetId}-tooltip-box`,
-        'class': `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white tw-text-1 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
-        'role': 'tooltip',
-        'aria-hidden': 'true',
-        'style': `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
-        'innerHTML': StringHelper.trim(this.message),
+      this.el = Generate.createElement("div", {
+        "id": `${this.targetId}-tooltip-box`,
+        "class": `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-${this.bgColor()} tw-text-white ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "role": "tooltip",
+        "aria-hidden": "true",
+        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "innerHTML": StringHelper.trim(this.message),
       });
     };
     this.update = () => {
@@ -27,21 +40,21 @@ export class Tooltip {
       }
     };
     this.listener = () => {
-      window.addEventListener('resize', this.calculatePosition.bind(this));
-      window.addEventListener('scroll', this.calculatePosition.bind(this), true);
-      window.addEventListener('wheel', this.calculatePosition.bind(this));
+      window.addEventListener("resize", this.calculatePosition.bind(this));
+      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.addEventListener("wheel", this.calculatePosition.bind(this));
       if (this.trigger && this.target()) {
         switch (this.trigger) {
-          case 'click':
-            this.target().addEventListener('click', this.toggle.bind(this));
+          case "click":
+            this.target().addEventListener("click", this.toggle.bind(this));
             break;
-          case 'hover':
-            this.target().addEventListener('mouseenter', this.show.bind(this));
-            this.target().addEventListener('mouseleave', this.hide.bind(this));
+          case "hover":
+            this.target().addEventListener("mouseenter", this.show.bind(this));
+            this.target().addEventListener("mouseleave", this.hide.bind(this));
             break;
-          case 'focus':
-            this.target().addEventListener('focus', this.show.bind(this), true);
-            this.target().addEventListener('blur', this.hide.bind(this), true);
+          case "focus":
+            this.target().addEventListener("focus", this.show.bind(this), true);
+            this.target().addEventListener("blur", this.hide.bind(this), true);
             break;
           default:
             break;
@@ -90,7 +103,8 @@ export class Tooltip {
     this.targetId = targetId;
     this.placement = placement;
     this.color = color;
-    this.id = targetId + '-tooltip-box';
+    this.id = targetId + "-tooltip-box";
     this.trigger = trigger;
+    this.size = size;
   }
 }

package/dist/collection/models/bcm.js

@@ -343,6 +343,7 @@ export var Bcm;
     InputType["search"] = "search";
     InputType["tel"] = "tel";
     InputType["hidden"] = "hidden";
+    InputType["color"] = "color";
   })(InputType = Bcm.InputType || (Bcm.InputType = {}));
   let KeyCode;
   (function (KeyCode) {

package/dist/collection/templates/input-template.js

@@ -2,10 +2,10 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 import { defaultIcons } from "../components/molecules/input/types";
-import Bcm from '../models/bcm';
-import cs from 'classnames';
+import Bcm from "../models/bcm";
+import cs from "classnames";
 import snq from "snq";
 export const InputTemplate = ({ elementType, 
 //textarea
@@ -19,42 +19,43 @@ disabled, clearable, focused, readonly, isPasswordVisible, passwordToggle, noDef
 // custom functions
 changePasswordVisibility, handleClear, steps, 
 //event functions
-ref, handleBlur, handleFocus, handleInput, handleChange }) => {
+ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported, eyeDropper, }) => {
   const ElementTagType = Bcm.HtmlElementType[elementType] || Bcm.HtmlElementType.input;
-  type = (type === 'password' && isPasswordVisible) ? 'text' : type;
-  value = snq(() => value, '');
-  type = (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !focused ? 'text' : type;
-  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? ' ' + unit : '') : value;
-  const templateHandleFocus = (e) => {
-    e.target.parentElement.classList.add('focused');
+  type = type === "password" && isPasswordVisible ? "text" : type;
+  value = snq(() => value, "");
+  type = (unit === null || unit === void 0 ? void 0 : unit.length) > 0 && !focused ? "text" : type;
+  value = !focused ? value + (value && (unit === null || unit === void 0 ? void 0 : unit.length) > 0 ? " " + unit : "") : value;
+  const typeColor = type === "color";
+  type = type === "color" ? "text" : type;
+  const templateHandleFocus = e => {
+    e.target.parentElement.classList.add("focused");
     handleFocus(e);
   };
-  const templateHandleBlur = (e) => {
-    e.target.parentElement.classList.remove('focused');
+  const templateHandleBlur = e => {
+    e.target.parentElement.classList.remove("focused");
     handleBlur(e);
   };
-  var containerClass = cs('bcm-input__container', ElementTagType === Bcm.HtmlElementType.textarea && cs('bcm-input__textarea', 'textarea-size-' + Bcm.Size[size], 'resize-' + resize, 'textarea-' + size), ElementTagType === Bcm.HtmlElementType.input && cs('input-size-' + Bcm.Size[size]), {
-    'focused': focused,
-    'clearable': clearable,
+  var containerClass = cs("bcm-input__container", ElementTagType === Bcm.HtmlElementType.textarea && cs("bcm-input__textarea", "textarea-size-" + Bcm.Size[size], "resize-" + resize, "textarea-" + size), ElementTagType === Bcm.HtmlElementType.input && cs("input-size-" + Bcm.Size[size]), {
+    focused: focused,
+    clearable: clearable,
     disabled,
     readonly,
-    'invalid': inValid,
-    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    invalid: inValid,
+    unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
     // 'empty': value?.length < 1,
-    'error': captionType === 'error'
+    error: captionType === "error",
   });
-  const caretContainer = cs('caret-container', {
-    'unit': (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
-    'disabled': disabled || readonly || inValid
+  const caretContainer = cs("caret-container", {
+    unit: (unit === null || unit === void 0 ? void 0 : unit.length) > 0,
+    disabled: disabled || readonly || inValid,
   });
-  const inputClass = 'bcm-input__container--' + size;
-  const unitClass = cs(inputClass, 'unit-prefix');
-  return (h("div", { class: containerClass }, h("span", { hidden: true }, h("slot", null)), h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 &&
-    h("span", { innerHTML: _prefix }), unitPrefix && h("span", { class: unitClass }, unitPrefix)), h(ElementTagType, Object.assign({ tabindex: "1", id: id, "bcm-internal-id": internalId, class: 'bcm-input-element ' + inputClass }, ((ElementTagType === Bcm.HtmlElementType.input && {
+  const inputClass = "bcm-input__container--" + size;
+  const unitClass = cs(inputClass, "unit-prefix");
+  return (h("div", { class: containerClass, id: id + "-container" }, h("span", { hidden: true }, h("slot", null)), h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }), unitPrefix && h("span", { class: unitClass }, unitPrefix), typeColor && (h("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-slate-300", style: {
+      backgroundColor: value,
+    } }))), h(ElementTagType, Object.assign({ tabindex: "1", id: id + "-input", "bcm-internal-id": internalId, class: "bcm-input-element " + inputClass }, (ElementTagType === Bcm.HtmlElementType.input && {
     type,
-    autocomplete: autocomplete ? 'on' : 'off',
+    autocomplete: autocomplete ? "on" : "off",
     pattern,
-  })), ((ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize })), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: (el) => ref(el), onBlur: (e) => templateHandleBlur(e), onFocus: (e) => templateHandleFocus(e), onInput: (e) => handleInput(e), onChange: (e) => handleChange(e) })), h("span", { class: "input-suffix-content" }, (clearable && !disabled && !readonly) &&
-    h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: (e) => handleClear(e) }, h("bcm-icon", { icon: "far fa-times" }))), h("span", { class: "input-suffix-content" }, ((type === 'password' || type === 'text') && passwordToggle) && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))), h("span", { class: "input-suffix-content" }, (Object.keys(defaultIcons).includes(type) && !noDefaultIcon) && (h("span", { class: "input-suffix" }, h("bcm-icon", { icon: defaultIcons[type] })))), h("span", { class: "input-suffix-content" }, type === 'number' && (h("div", { class: caretContainer }, h("span", { class: "bcm-input-caret", onClick: () => steps('up') }, h("bcm-icon", { icon: "fas fa-caret-up" })), h("span", { class: "bcm-input-caret", onClick: () => steps('down') }, h("bcm-icon", { icon: "fas fa-caret-down" }))))), h("span", { class: "input-suffix-content" }, type !== 'number' && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 &&
-    h("span", { innerHTML: _suffix }))))));
+  }), (ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize }), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: el => ref(el), onBlur: e => templateHandleBlur(e), onFocus: e => templateHandleFocus(e), onInput: e => handleInput(e), onChange: e => handleChange(e) })), h("span", { class: "input-suffix-content" }, clearable && !disabled && !readonly && (h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: e => handleClear(e) }, h("bcm-icon", { icon: "far fa-times" })))), h("span", { class: "input-suffix-content" }, (type === "password" || type === "text") && passwordToggle && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))), h("span", { class: "input-suffix-content" }, Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix" }, h("bcm-icon", { icon: defaultIcons[type] })))), h("span", { class: "input-suffix-content" }, type === "number" && (h("div", { class: caretContainer }, h("span", { class: "bcm-input-caret", onClick: () => steps("up") }, h("bcm-icon", { icon: "fas fa-caret-up" })), h("span", { class: "bcm-input-caret", onClick: () => steps("down") }, h("bcm-icon", { icon: "fas fa-caret-down" }))))), h("span", { class: "input-suffix-content" }, type !== "number" && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix }))), typeColor && isEyeDropperSupported() && (h("span", { class: "input-suffix" }, h("span", null, h("i", { class: "far fa-eye-dropper", onClick: () => eyeDropper() })))))));
 };

package/dist/components/bcm-color-input.d.ts

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

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

@@ -0,0 +1,134 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
+import './color-helper.js';
+import './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import './bcm.js';
+import { d as defineCustomElement$7 } from './colorful.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './input.js';
+import { d as defineCustomElement$4 } from './label.js';
+import { d as defineCustomElement$3 } from './linked.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const colorInputCss = "@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}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block}";
+
+const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this._id = Generate.UID();
+    this.label = "Color Picker";
+    this.placeholder = "Color Picker";
+    this.value = "";
+    this.required = false;
+    this.disabled = false;
+    this.readonly = false;
+    this.fullWidth = false;
+  }
+  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.getPickerElement().color = e.detail;
+    console.log("handleInputChanged: ", e.detail);
+  }
+  eyeDropper() {
+    const eyeDropper = new window.EyeDropper();
+    eyeDropper
+      .open()
+      .then((color) => {
+      console.log("color: ", color.sRGBHex);
+      this.handleChange(color.sRGBHex);
+    })
+      .catch((error) => {
+      if (error.name === "NotAllowedError") {
+        console.log("Permission to access sensor was denied.");
+      }
+      else if (error.name === "NotSupportedError") {
+        console.log("Sensor not supported.");
+      }
+    });
+  }
+  isEyeDropperSupported() {
+    return typeof window !== "undefined" && "EyeDropper" in window;
+  }
+  render() {
+    return (h(Host, null, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e) }, h("i", { slot: "prefix", class: "tw-rounded-full tw-w-4 tw-h-4 tw-border tw-border-gray-100 tw-flex tw-items-center tw-justify-center", 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-container" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.handleChange(e.detail) }))));
+  }
+  get el() { return this; }
+  static get style() { return colorInputCss; }
+}, [0, "bcm-color-input", {
+    "_id": [1537, "id"],
+    "label": [1],
+    "placeholder": [1],
+    "value": [1025],
+    "required": [4],
+    "disabled": [4],
+    "readonly": [4],
+    "fullWidth": [4, "full-width"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-color-input", "bcm-colorful", "bcm-icon", "bcm-input", "bcm-label", "bcm-linked", "bcm-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-color-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmColorInput$1);
+      }
+      break;
+    case "bcm-colorful":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "bcm-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-linked":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmColorInput = BcmColorInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmColorInput, defineCustomElement };

package/dist/components/bcm-colorful.d.ts

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

package/dist/components/bcm-colorful.js

@@ -0,0 +1,10 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { B as BcmColorful$1, d as defineCustomElement$1 } from './colorful.js';
+
+const BcmColorful = BcmColorful$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmColorful, defineCustomElement };