bromcom-ui 2.7.37-rc.2 → 2.7.37-rc.4-0

package/dist/components/bcm-collapse-group.js

@@ -0,0 +1,75 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { I as IsLoad } from './is-load-decorator.js';
+import { g as getChildElements } from './utils.js';
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmCollapseGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.borderless = false;
+    this.open = false;
+    this.multiple = false;
+    this.hidden = false;
+  }
+  handleOpen({ target, detail }) {
+    if (!this.multiple && this.el === target.parentElement) {
+      this.qs().forEach(child => {
+        child.open = child.id === detail;
+      });
+    }
+  }
+  componentDidLoad() {
+    this.qs().forEach((child, index) => {
+      !child.borderless && (child.borderless = this.borderless);
+      this.qs().length == index + 1 && (child.noBorder = true);
+    });
+  }
+  qs() {
+    return getChildElements(this.el, 'bcm-collapse');
+  }
+  render() {
+    const { hidden } = this;
+    return (h(Host, { class: { hidden } }, h("slot", null)));
+  }
+  get el() { return this; }
+}, [4, "bcm-collapse-group", {
+    "borderless": [1028],
+    "open": [1028],
+    "multiple": [1028],
+    "hidden": [1028]
+  }, [[4, "bcm-collapse-open", "handleOpen"]]]);
+__decorate([
+  IsLoad()
+], BcmCollapseGroup$1.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-collapse-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-collapse-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmCollapseGroup$1);
+      }
+      break;
+  } });
+}
+
+const BcmCollapseGroup = BcmCollapseGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmCollapseGroup, defineCustomElement };

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

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

package/dist/components/bcm-collapse.js

@@ -0,0 +1,77 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { I as IsLoad } from './is-load-decorator.js';
+import { G as Generate } from './generate.js';
+
+const collapseCss = "@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}.bcm-collapse{display:block;border:1px solid var(--bcm-color-grey-5)}.bcm-collapse ::-webkit-details-marker{display:none}.bcm-collapse__header{display:flex;align-items:center;color:var(--bcm-color-grey-9);padding:16px;background-color:var(--bcm-color-grey-2);border-bottom:1px solid var(--bcm-color-grey-5);cursor:default;user-select:none}.bcm-collapse__header:focus{outline:none}.bcm-collapse__header .collapse-icon{margin-right:8px;display:flex;align-items:center;justify-content:center}.bcm-collapse__body{padding:16px;background-color:var(--bcm-color-grey-1);color:var(--bcm-color-grey-8)}.bcm-collapse--borderless{border:none}.bcm-collapse--borderless:not(.bcm-collapse--no-border){border-bottom:1px solid var(--bcm-color-grey-5)}.bcm-collapse--borderless .bcm-collapse__header{border-bottom:none}.bcm-collapse--borderless .bcm-collapse__body{background-color:var(--bcm-color-grey-2);padding:0 40px 16px}.bcm-collapse:not(.bcm-collapse--open) .bcm-collapse__header{border-bottom:none}.bcm-collapse:not(:first-child) .collapse{border-top:none}.bcm-collapse.hidden{display:none}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmCollapse$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.bcmCollapseOpen = createEvent(this, "bcm-collapse-open", 7);
+    this._id = Generate.UID();
+    this.borderless = false;
+    this.open = false;
+    this.noBorder = false;
+    this.hidden = false;
+  }
+  componentDidRender() {
+    this.open && this.bcmCollapseOpen.emit(this._id);
+  }
+  render() {
+    const { hidden, borderless, open, noBorder, _id } = this;
+    const classes = classnames('bcm-collapse', {
+      'bcm-collapse--borderless': borderless,
+      'bcm-collapse--open': open,
+      'bcm-collapse--no-border': noBorder
+    });
+    const caretDown = '<svg style="fill: #595959; width: 14px; height: 14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>';
+    const caretRight = '<svg style="fill: #595959; width: 14px; height: 14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>';
+    return (h(Host, { class: { hidden }, id: _id }, h("details", { class: classes, open: open }, h("summary", { class: "bcm-collapse__header size-2", onClick: () => this.open = !open }, h("span", { class: "collapse-icon", innerHTML: open ? (caretDown) : (caretRight) }), h("slot", { name: "title" })), h("div", { class: "bcm-collapse__body" }, h("slot", { name: "body" })))));
+  }
+  get el() { return this; }
+  static get style() { return collapseCss; }
+}, [1, "bcm-collapse", {
+    "_id": [1537, "id"],
+    "borderless": [1028],
+    "open": [1028],
+    "noBorder": [1028, "no-border"],
+    "hidden": [1028]
+  }]);
+__decorate([
+  IsLoad()
+], BcmCollapse$1.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-collapse"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-collapse":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmCollapse$1);
+      }
+      break;
+  } });
+}
+
+const BcmCollapse = BcmCollapse$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmCollapse, defineCustomElement };

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

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

package/dist/components/bcm-colorpicker.js

@@ -0,0 +1,491 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, getAssetPath } from '@stencil/core/internal/client';
+import { E as ElementDragger, D as DragDirections } from './element-dragger.js';
+import { c as classnames } from './index2.js';
+import { I as IsLoad } from './is-load-decorator.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './label.js';
+import { d as defineCustomElement$2 } from './tooltip.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}.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{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:100px;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:100px;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:100px;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}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const BcmColorPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "bcm-change", 7);
+    this.initialized = false;
+    this.setColorBeforeInitialized = false;
+    /**
+     * Component Properties
+     */
+    this._color = '#4293CF'; // default color
+    this.open = false;
+    this.value = null;
+    this.size = "medium";
+    this.noCaption = false;
+    this.captionType = 'default';
+    this.fullWidth = false;
+    this.disabled = false;
+    this.hidden = false;
+    this.required = false;
+    /**
+     * Component States
+     */
+    this.h = -1;
+    this.s = 1;
+    this.v = 1;
+    this.a = 1;
+    this.selectedH = -1;
+    this.selectedS = 1;
+    this.selectedV = 1;
+    this.selectedA = 1;
+    this.color = { rgba: '', hex: '' };
+    this.inputValue = '';
+    this.mouseState = 'up';
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentWillLoad() {
+    const initialColor = this.hextohsv(this._color);
+    this.s = initialColor.s;
+    this.v = initialColor.v;
+    this.h = initialColor.h;
+  }
+  /**
+   * @ComponentMethod
+   */
+  componentDidRender() {
+    if (this.initialized)
+      return;
+    Promise.all([
+      this.initColorDragger(),
+      this.initColorsDragger(),
+      this.initTransparencyDragger()
+    ]).then(() => {
+      !this.setColorBeforeInitialized && this._setColor(this._color);
+      this.updateValue();
+      this.initialized = true;
+    });
+  }
+  /**
+   * @desc
+   */
+  initColorDragger() {
+    if (this.colorDragger)
+      return;
+    const limit = {
+      x: {
+        min: 0,
+        max: this.colorElement.offsetWidth
+      },
+      y: {
+        min: 0,
+        max: this.colorElement.offsetHeight
+      }
+    };
+    this.colorDragger = new ElementDragger({
+      target: this.colorIndicatorElement,
+      trigger: this.colorElement,
+      direction: DragDirections.both,
+      limit,
+      snapOnMouseDown: true,
+      center: {
+        x: this.colorIndicatorElement.offsetWidth / 2,
+        y: this.colorIndicatorElement.offsetHeight / 2
+      }
+    });
+    /**
+     * [ ElementDragger Event: drag ]
+     */
+    this.colorDragger.on('drag', (pos) => this.colorDrag(pos));
+    return Promise.resolve();
+  }
+  /**
+   * @desc
+   */
+  initColorsDragger() {
+    if (this.colorsDragger)
+      return;
+    const limit = {
+      x: {
+        min: 0,
+        max: this.colorsElement.offsetWidth
+      }
+    };
+    this.colorsDragger = new ElementDragger({
+      target: this.colorsIndicatorElement,
+      trigger: this.colorsElement,
+      direction: DragDirections.x,
+      limit,
+      snapOnMouseDown: true,
+      center: {
+        x: this.colorsIndicatorElement.offsetWidth / 2
+      }
+    });
+    /**
+     * [ ElementDragger Event: drag ]
+     */
+    this.colorsDragger.on('drag', (pos) => this.colorsDrag(pos));
+    return Promise.resolve();
+  }
+  /**
+   * @desc
+   */
+  initTransparencyDragger() {
+    return;
+    /* this.transparencyDragger = new ElementDragger({
+        target: this.transparencyIndicatorElement,
+        trigger: this.transparencyIndicatorElement,
+        direction: DragDirections.x,
+        limit: {
+            x: {
+                    min: 0,
+                    max: this.transparencyElement.offsetWidth - this.transparencyIndicatorElement.offsetWidth
+            }
+        }
+    })
+
+    // Set initial position
+    // #
+    this.transparencyDragger.setPosition({
+        x: this.transparencyElement.offsetWidth - indicatorSize
+    })
+
+    
+    this.transparencyDragger.on('drag', (pos: any) => this.transparencyDrag(pos))
+    this.setTransparencyElementColor() */
+  }
+  /**
+   * @desc
+   * @param hsv
+   */
+  hsvtorgb(hsv) {
+    let R;
+    let G;
+    let B;
+    let X;
+    let C;
+    let h = (hsv.h % 360) / 60;
+    C = hsv.v * hsv.s;
+    X = C * (1 - Math.abs(h % 2 - 1));
+    R = G = B = hsv.v - C;
+    h = ~~h;
+    R += [C, X, 0, 0, X, C][h];
+    G += [X, C, C, X, 0, 0][h];
+    B += [0, 0, X, C, C, X][h];
+    const rgb = {
+      r: Math.round(R * 255),
+      g: Math.round(G * 255),
+      b: Math.round(B * 255)
+    };
+    return Object.assign(Object.assign({}, rgb), { hex: "#" + (16777216 | rgb.b | (rgb.g << 8) | (rgb.r << 16)).toString(16).slice(1) });
+  }
+  /**
+   * @desc
+   * @param rgb
+   */
+  rgbtohsv(rgb) {
+    let H;
+    let S;
+    let V;
+    let C;
+    let r = rgb.r;
+    let g = rgb.g;
+    let b = rgb.b;
+    if (rgb.r > 1 || rgb.g > 1 || rgb.b > 1) {
+      r /= 255;
+      g /= 255;
+      b /= 255;
+    }
+    V = Math.max(r, g, b);
+    C = V - Math.min(r, g, b);
+    H = (C == 0 ? null :
+      V == r ? (g - b) / C + (g < b ? 6 : 0) :
+        V == g ? (b - r) / C + 2 :
+          (r - g) / C + 4);
+    H = (H % 6) * 60;
+    S = C == 0 ? 0 : C / V;
+    return {
+      h: H,
+      s: S,
+      v: V
+    };
+  }
+  /**
+   * @desc
+   * @param hex
+   */
+  hextohsv(hex) {
+    return this.rgbtohsv(this.hextorgb(hex));
+  }
+  /**
+   * @desc
+   * @param hex
+   */
+  hextorgb(hex) {
+    return {
+      r: parseInt(hex.substr(1, 2), 16),
+      g: parseInt(hex.substr(3, 2), 16),
+      b: parseInt(hex.substr(5, 2), 16)
+    };
+  }
+  /**
+   * @desc
+   * @param pos
+   */
+  colorDrag(pos) {
+    const width = this.colorElement.offsetWidth;
+    const height = this.colorElement.offsetHeight;
+    this.selectedS = (pos.x) / width;
+    this.selectedV = (height - (pos.y)) / height;
+    this.updateValue();
+  }
+  /**
+   * @desc
+   * @param pos
+   */
+  colorsDrag(pos) {
+    const width = this.colorsElement.offsetWidth;
+    this.h = (pos.x) / width * 360;
+    this.s = 1;
+    this.v = 1;
+    this.selectedH = this.h;
+    this.updateValue();
+  }
+  /**
+   * @desc
+   * @param pos
+   */
+  /* transparencyDrag(pos: any) {
+      const sliderWidth: number = this.transparencyElement.offsetWidth
+      const actualX: number = pos.x + indicatorSize / 2
+      const result: number = actualX / sliderWidth
+      let opacity: string | number = result.toFixed(1)
+
+      opacity === '1.0' && (opacity = '1')
+      opacity === '0.0' && (opacity = '0')
+      opacity = parseFloat(opacity)
+
+      this.a = opacity
+  } */
+  /**
+   * @desc
+   */
+  setHsvColor() {
+    const rgb = this.hsvtorgb({
+      h: this.selectedH,
+      s: this.selectedS,
+      v: this.selectedV
+    });
+    this.color = {
+      rgba: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this.a})`,
+      hex: rgb.hex
+    };
+    return this.color;
+  }
+  /**
+   * @desc
+   * @param hexColor
+   */
+  _setColor(color, preventInputUpdate = false) {
+    const regHex = /^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
+    const regHexCheck = regHex.test(color);
+    if (regHexCheck) {
+      if (color.length === 4) {
+        color = color.split('').map(c => c !== '#' ? c + c : c).join('');
+      }
+      const hsvColor = this.hextohsv(color);
+      this.h = hsvColor.h;
+      this.s = 1;
+      this.v = 1;
+      this.selectedH = hsvColor.h;
+      this.selectedS = hsvColor.s;
+      this.selectedV = hsvColor.v;
+      this.updateIndicators();
+      this.updateValue(preventInputUpdate);
+    }
+  }
+  /**
+   * @desc
+   */
+  updateIndicators() {
+    const { colorsElement: colors, colorElement: color, colorsIndicatorElement: colorsIndicator } = this;
+    this.colorDragger.setPosition({
+      x: this.selectedS * color.offsetWidth,
+      y: color.offsetHeight - this.selectedV * color.offsetHeight
+    });
+    this.colorsDragger.setPosition({
+      x: (this.selectedH * (colors.offsetWidth - colorsIndicator.offsetWidth * 2)) / 360
+    });
+  }
+  /**
+   * @desc
+   * @param preventInputUpdate
+   */
+  updateValue(preventInputUpdate = false) {
+    const { selectedH: h, selectedS: s, selectedV: v } = this;
+    const hex = this.hsvtorgb({ h, s, v }).hex;
+    this.value = hex;
+    if (!preventInputUpdate) {
+      this.updateInputValue(hex);
+    }
+  }
+  /**
+   * @desc
+   * @param value
+   */
+  updateInputValue(value) {
+    if (!this.inputElement)
+      return;
+    this.inputElement.value = value;
+  }
+  /**
+   * @desc
+   */
+  /* setTransparencyElementColor() {
+      this.transparencyImageElement1.setAttribute('stop-color', this.color.hex)
+      this.transparencyImageElement2.setAttribute('stop-color', this.color.hex)
+  } */
+  /**
+   * @desc
+   */
+  handleClick() {
+    this.open = true;
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleColorInputKeyUp(event) {
+    var path = event.path || (event.composedPath && event.composedPath());
+    const val = path[0].value;
+    this._setColor(val, true);
+  }
+  /**
+   * @desc
+   * @param event
+   */
+  handleWindowClick(event) {
+    const target = event.target;
+    const classes = target.classList;
+    const tagName = target.tagName.toLowerCase();
+    const isNotbyClass = !classes.contains('sc-bcm-colorpicker');
+    const isNotbyTagName = tagName !== 'bcm-colorpicker';
+    if ((isNotbyClass && isNotbyTagName && this.mouseState === 'up')) {
+      this.open = false;
+      this.updateInputValue(this.value);
+    }
+    this.mouseState = 'up';
+  }
+  /**
+   * @desc
+   */
+  valueChange() {
+    if (!this.initialized)
+      return;
+    this.change.emit(this.value);
+  }
+  async getValue() {
+    return this.value;
+  }
+  async setColor(color) {
+    this.setColorBeforeInitialized = true;
+    this._setColor(color);
+  }
+  render() {
+    const { label, required, noCaption, caption, captionError, captionType } = this;
+    const classes = classnames('color-picker', {
+      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("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("svg", { style: { 'fill': '#595959', 'width': ' 14px', 'height': '14px' }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M483.89 28.14l-.02-.02-.03-.03c-37.47-37.47-98.26-37.46-135.72.03l-77.09 77.09-13.1-13.1c-9.44-9.44-24.65-9.31-33.94 0l-63.6 63.6c-9.37 9.37-9.37 24.57 0 33.94l16.98 16.98L50.75 333.25c-12 12-18.75 28.28-18.75 45.26V424L0 480l32 32 56-32h45.49c16.97 0 33.25-6.74 45.25-18.74l126.64-126.62 16.96 16.96c9.44 9.44 24.65 9.31 33.94 0l63.6-63.6c9.37-9.37 9.37-24.57 0-33.94l-13.1-13.1 77.09-77.09c37.5-37.47 37.5-98.25.02-135.73zM144.8 427.32a15.892 15.892 0 0 1-11.31 4.68H80v-53.49c0-4.27 1.66-8.29 4.69-11.31l126.63-126.62 60.12 60.12L144.8 427.32zm305.14-297.38l-77.09 77.09-33.94 33.94 30.07 30.06-29.66 29.66-128-128 29.66-29.65 30.06 30.07L382.08 62.05c9.05-9.06 21.1-14.05 33.91-14.05 12.82 0 24.86 4.98 33.91 14.04l.04.04C459.01 71.14 464 83.19 464 96.01c0 12.81-5 24.86-14.06 33.93z" })))), !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) })))))));
+  }
+  static get assetsDirs() { return ["static"]; }
+  get el() { return this; }
+  static get watchers() { return {
+    "value": ["valueChange"]
+  }; }
+  static get style() { return colorpickerCss; }
+}, [1, "bcm-colorpicker", {
+    "_color": [1025, "color"],
+    "open": [1028],
+    "value": [1025],
+    "label": [1025],
+    "size": [1025],
+    "noCaption": [1028, "no-caption"],
+    "caption": [1025],
+    "captionError": [1025, "caption-error"],
+    "captionType": [1025, "caption-type"],
+    "fullWidth": [1028, "full-width"],
+    "disabled": [1028],
+    "hidden": [1028],
+    "required": [1028],
+    "tooltip": [1025],
+    "h": [32],
+    "s": [32],
+    "v": [32],
+    "a": [32],
+    "selectedH": [32],
+    "selectedS": [32],
+    "selectedV": [32],
+    "selectedA": [32],
+    "color": [32],
+    "inputValue": [32],
+    "mouseState": [32],
+    "getValue": [64],
+    "setColor": [64]
+  }, [[8, "click", "handleWindowClick"]]]);
+__decorate([
+  IsLoad()
+], BcmColorPicker.prototype, "el", void 0);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["bcm-colorpicker", "bcm-icon", "bcm-label", "bcm-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "bcm-colorpicker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, BcmColorPicker);
+      }
+      break;
+    case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "bcm-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "bcm-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const BcmColorpicker = BcmColorPicker;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmColorpicker, defineCustomElement };

package/dist/components/bcm-date-picker.d.ts

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