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

package/dist/cjs/{tooltip-helper-57c183c2.js → tooltip-helper-388e21c9.js}

@@ -5,27 +5,40 @@
 'use strict';
 
 require('./element-dragger-a8562f82.js');
-const stringHelper = require('./string-helper-df40a475.js');
-const floatingUi = require('./floating-ui-d86b77dc.js');
+const stringHelper = require('./string-helper-71b10c53.js');
+const floatingUi = require('./floating-ui-c23acc6c.js');
 const colorHelper = require('./color-helper-c9882bd8.js');
 require('./datetime-helper-eaf4fadb.js');
-const generate = require('./generate-30477ea5.js');
-require('./number-helper-c595fb51.js');
-require('./validators-6a70f5f8.js');
+const generate = require('./generate-b48e38fa.js');
+require('./number-helper-d068c11e.js');
+require('./validators-abb4f619.js');
+const bcm = require('./bcm-634604e3.js');
 
 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.ColorHelper.twColor(this.color, 700);
     this.target = () => document.getElementById(this.targetId);
+    this.sizeClass = () => {
+      switch (this.size) {
+        case bcm.Bcm$1.Size.small:
+          return "tw-text-1";
+        case bcm.Bcm$1.Size.medium:
+          return "tw-text-2";
+        case bcm.Bcm$1.Size.large:
+          return "tw-text-3";
+        default:
+          return "tw-text-2";
+      }
+    };
     this.init = () => {
-      this.el = generate.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.ColorHelper.twColorReverse(this.bgColor())}`,
-        'innerHTML': stringHelper.StringHelper.trim(this.message),
+      this.el = generate.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.ColorHelper.twColorReverse(this.bgColor())}`,
+        "innerHTML": stringHelper.StringHelper.trim(this.message),
       });
     };
     this.update = () => {
@@ -36,21 +49,21 @@ 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;
         }
       }
@@ -97,8 +110,9 @@ 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/cjs/{validators-6a70f5f8.js → validators-abb4f619.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const generate = require('./generate-30477ea5.js');
+const generate = require('./generate-b48e38fa.js');
 
 class Validators {
 }

package/dist/collection/collection-manifest.json

@@ -21,6 +21,8 @@
     "./components/molecules/checkbox/checkbox-lite.js",
     "./components/molecules/checkbox/checkbox.js",
     "./components/molecules/checkbox/group.js",
+    "./components/molecules/color-input/color-input.js",
+    "./components/molecules/colorful/colorful.js",
     "./components/molecules/drawer/drawer.js",
     "./components/molecules/dropdown/dropdown.js",
     "./components/molecules/empty/empty.js",
@@ -51,7 +53,6 @@
     "./components/molecules/timeline/timeline.js",
     "./components/molecules/tooltip/tooltip.js",
     "./components/organism/autocomplete/autocomplete.js",
-    "./components/organism/colorpicker/colorpicker.js",
     "./components/organism/date-picker/date-picker.js",
     "./components/organism/datetime-picker/datetime-picker.js",
     "./components/organism/form/form-group.js",
@@ -64,6 +65,7 @@
     "./components/other/default/default.js",
     "./components/other_deprecated/collapse/collapse.js",
     "./components/other_deprecated/collapse/group.js",
+    "./components/other_deprecated/colorpicker/colorpicker.js",
     "./components/other_deprecated/listbox/listbox-group.js",
     "./components/other_deprecated/listbox/listbox-item.js",
     "./components/other_deprecated/listbox/listbox.js",

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

@@ -0,0 +1,127 @@
+@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;
+}
+
+/**
+ * Generator
+ */
+.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;
+}

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

@@ -0,0 +1,218 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { h, Host, forceUpdate } from "@stencil/core";
+import { Generate } from "@bcm/helpers";
+export class BcmColorInput {
+  constructor() {
+    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) }))));
+  }
+  static get is() { return "bcm-color-input"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["color-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["color-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"Color Picker\""
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "\"Color Picker\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "full-width",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}