bromcom-ui 2.8.0-rc.10-h → 2.8.0-rc.10

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

@@ -150,7 +150,7 @@ export class BcmCheckbox {
     });
     const bcmCheckboxLabelClass = cs('bcm-checkbox__label');
     const bcmCheckboxInputClass = cs('bcm-checkbox__input');
-    return (h(Host, { tabindex: "1", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, h("span", { hidden: true }, h("slot", null)), label && h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h("div", { class: bcmCheckboxInputClass }, h("input", { id: `input-${_id}`, type: "checkbox", tabindex: "-1", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), h("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, h("span", { class: bcmCheckboxIconClass }, h("bcm-icon", { icon: "far fa-check" })), h(SlotTemplate, { className: "slot" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), style: this.setColor(this.color), class: bcmCheckboxClass, disabled: disabled }, h("span", { hidden: true }, h("slot", null)), label && h("bcm-label", { htmlFor: `input-${_id}`, type: captionType, value: label, required: required }), h("div", { class: bcmCheckboxInputClass }, h("input", { id: `input-${_id}`, type: "checkbox", checked: checked, disabled: disabled, required: required, readonly: readonly, onChange: () => { !disabled && !readonly && (this.handleChange()); }, ref: el => (this.inputElement = el) }), h("label", { class: bcmCheckboxLabelClass, htmlFor: `input-${_id}` }, h("span", { class: bcmCheckboxIconClass }, h("bcm-icon", { icon: "far fa-check" })), h(SlotTemplate, { className: "slot" }))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get is() { return "bcm-checkbox"; }
   static get originalStyleUrls() {

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

@@ -0,0 +1,206 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Host, forceUpdate, h } from "@stencil/core";
+export class BcmColorInput {
+  constructor() {
+    this._id = Generate.UID();
+    this.label = "";
+    this.placeholder = "";
+    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;
+  }
+  eyeDropper() {
+    const eyeDropper = new window.EyeDropper();
+    eyeDropper
+      .open()
+      .then((color) => {
+      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, { class: "tw-block" }, 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-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100", 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 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": "\"\""
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "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"; }
+}

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

@@ -0,0 +1,497 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap");
+.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;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.bcm-caption-area {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: calc(14px + 8px);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: calc(12px + 8px);
+  color: var(--bcm-new-ds-color-slate-400);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  margin-top: 2px;
+}
+.bcm-caption-area__text {
+  color: var(--bcm-new-ds-color-slate-400);
+}
+.bcm-caption-area__text.default {
+  color: var(--bcm-new-ds-color-slate-400);
+}
+.bcm-caption-area__text.info {
+  color: var(--bcm-new-ds-color-blue-500);
+}
+.bcm-caption-area__text.success {
+  color: var(--bcm-new-ds-color-emerald-500);
+}
+.bcm-caption-area__text.warning {
+  color: var(--bcm-new-ds-color-amber-500);
+}
+.bcm-caption-area__text.error {
+  color: var(--bcm-new-ds-color-red-500);
+}
+.bcm-caption-area__size-small {
+  font-size: 10px;
+  line-height: calc(10px + 8px);
+  min-height: calc(10px + 8px);
+}
+.bcm-caption-area__size-medium {
+  font-size: 12px;
+  line-height: calc(12px + 8px);
+  min-height: calc(12px + 8px);
+}
+.bcm-caption-area__size-large {
+  font-size: 14px;
+  line-height: calc(14px + 8px);
+  min-height: calc(14px + 8px);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.bcm-label {
+  display: inline-flex;
+  align-items: flex-start;
+  grid-gap: 2px;
+}
+.bcm-label__text {
+  margin-bottom: 2px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: calc(14px + 8px);
+  font-weight: 400;
+  display: inline-block;
+  color: var(--bcm-new-ds-color-slate-600);
+}
+.bcm-label__size-small {
+  font-size: 10px;
+  line-height: calc(10px + 8px);
+  min-height: calc(10px + 8px);
+}
+.bcm-label__size-medium {
+  font-size: 12px;
+  line-height: calc(12px + 8px);
+  min-height: calc(12px + 8px);
+}
+.bcm-label__size-large {
+  font-size: 14px;
+  line-height: calc(14px + 8px);
+  min-height: calc(14px + 8px);
+}
+
+.bcm-input[no-margin] {
+  margin: 0;
+}
+
+.bcm-textarea[no-margin] {
+  margin: 0;
+}
+
+.bcm-switch[no-margin] {
+  margin: 0;
+}
+
+.bcm-checkbox[no-margin] {
+  margin: 0;
+}
+
+.bcm-radio-group[no-margin] {
+  margin: 0;
+}
+
+.bcm-checkbox-group[no-margin] {
+  margin: 0;
+}
+
+.bcm-range[no-margin] {
+  margin: 0;
+}
+
+.bcm-form[no-margin] {
+  margin: 0;
+}
+
+.bcm-form-group[no-margin] {
+  margin: 0;
+}
+
+.bcm-list[no-margin] {
+  margin: 0;
+}
+
+.bcm-colorpicker[no-margin] {
+  margin: 0;
+}
+
+.bcm-date-picker[no-margin] {
+  margin: 0;
+}
+
+.bcm-time-picker[no-margin] {
+  margin: 0;
+}
+
+.bcm-datetime-picker[no-margin] {
+  margin: 0;
+}
+
+.bcm-select[no-margin] {
+  margin: 0;
+}
+
+.bcm-listbox[no-margin] {
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.bcm-input {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 256px;
+  margin-bottom: 8px;
+}
+.bcm-input.full-width {
+  max-width: 100%;
+}
+.bcm-input.hidden {
+  display: none;
+}
+.bcm-input__container {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: calc(14px + 8px);
+  font-weight: 400;
+  display: flex;
+  align-items: stretch;
+  flex-direction: row;
+  background-color: var(--bcm-new-ds-color-white);
+  border: 1px solid var(--bcm-new-ds-color-slate-300);
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: text;
+  padding: 0 0 0 4px;
+  position: relative;
+  width: 100%;
+}
+.bcm-input__container.disabled {
+  background-color: var(--bcm-new-ds-color-slate-50);
+  cursor: not-allowed;
+}
+.bcm-input__container.disabled .bcm-input-element {
+  color: var(--bcm-new-ds-color-slate-500);
+}
+.bcm-input__container.readonly {
+  background-color: var(--bcm-new-ds-color-slate-50);
+  cursor: default;
+}
+.bcm-input__container.readonly .bcm-input-element {
+  color: var(--bcm-new-ds-color-slate-600);
+}
+.bcm-input__container:not(.disabled):hover .caret-container, .bcm-input__container:not(.disabled).focused .caret-container {
+  opacity: 1;
+}
+.bcm-input__container:not(.disabled):hover .input-clear-button, .bcm-input__container:not(.disabled).focused .input-clear-button {
+  opacity: 1;
+}
+.bcm-input__container:not(.disabled).focused {
+  background-color: var(--bcm-new-ds-color-slate-50);
+}
+.bcm-input__container:not(.disabled):hover {
+  border-color: var(--bcm-color-prime-blue-6);
+}
+.bcm-input__container.empty .input-clear-button {
+  display: none;
+}
+.bcm-input__container.invalid, .bcm-input__container.error {
+  border-color: var(--bcm-new-ds-color-red-500);
+}
+.bcm-input__container .bcm-input-element {
+  width: 100%;
+  color: var(--bcm-new-ds-color-slate-600);
+  flex: 1;
+  border: none;
+  background: transparent;
+  box-shadow: unset;
+  padding: 0 4px;
+  font-family: "Inter", sans-serif;
+  cursor: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bcm-input__container .bcm-input-element::placeholder {
+  font-family: "Inter", sans-serif;
+  color: var(--bcm-new-ds-color-slate-300);
+  user-select: none;
+}
+.bcm-input__container .bcm-input-element::-webkit-search-decoration, .bcm-input__container .bcm-input-element::-webkit-search-cancel-button, .bcm-input__container .bcm-input-element::-webkit-search-results-button, .bcm-input__container .bcm-input-element::-webkit-search-results-decoration, .bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator, .bcm-input__container .bcm-input-element::-webkit-inner-spin-button, .bcm-input__container .bcm-input-element::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+.bcm-input__container .caret-container {
+  width: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  border-left: 1px solid #D9D9D9;
+  transition: 0.2s opacity;
+  user-select: none;
+  box-sizing: border-box;
+}
+.bcm-input__container .caret-container .bcm-input-caret {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bcm-color-grey-7);
+  cursor: pointer;
+  flex: 1;
+}
+.bcm-input__container .caret-container .bcm-input-caret bcm-icon {
+  line-height: 1;
+}
+.bcm-input__container .caret-container .bcm-input-caret:hover {
+  color: var(--bcm-color-prime-blue-6);
+}
+.bcm-input__container .caret-container .bcm-input-caret:active {
+  background-color: var(--bcm-color-grey-3);
+}
+.bcm-input__container .caret-container .bcm-input-caret:last-child {
+  border-top: 1px solid #D9D9D9;
+}
+.bcm-input__container .caret-container.disabled {
+  background-color: var(--bcm-color-grey-3);
+}
+.bcm-input__container .caret-container.disabled .bcm-input-caret {
+  cursor: not-allowed;
+}
+.bcm-input__container .input-suffix-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bcm-input__container .input-prefix:not(:empty) {
+  padding-left: 4px;
+}
+.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) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+  color: #64748a;
+}
+.bcm-input__container .input-prefix:not(:empty) .unit-prefix,
+.bcm-input__container .input-suffix:not(:empty) .unit-prefix {
+  color: #64748a;
+}
+.bcm-input__container .input-prefix-button:not(:empty),
+.bcm-input__container .input-suffix-button:not(:empty) {
+  cursor: pointer;
+}
+.bcm-input__container .caret-container,
+.bcm-input__container .input-clear-button {
+  opacity: 0;
+}
+.bcm-input__container--small {
+  font-size: 12px;
+}
+.bcm-input__container--medium {
+  font-size: 14px;
+}
+.bcm-input__container--large {
+  font-size: 16px;
+}
+.bcm-input__textarea .bcm-input-element {
+  white-space: normal;
+}
+.bcm-input__textarea.clearable .bcm-input-element {
+  padding-right: 24px;
+}
+.bcm-input__textarea .input-clear-button {
+  position: absolute;
+  top: 4px;
+  right: 0;
+}
+
+bcm-colorful {
+  display: flex;
+  flex-direction: column;
+  width: 256px;
+  padding: 8px;
+  background-color: var(--bcm-new-ds-color-white);
+  border-radius: 4px;
+}
+
+/* Custom layout */
+bcm-colorful .react-colorful {
+  width: 100%;
+  gap: 4px;
+}
+
+bcm-colorful .react-colorful__saturation {
+  margin: 0 0 4px 0;
+  border-radius: 2px;
+  border-bottom: none;
+}
+
+bcm-colorful .react-colorful__hue,
+bcm-colorful .react-colorful__alpha {
+  height: 20px;
+  border-radius: 2px;
+}
+
+bcm-colorful .react-colorful__hue-pointer,
+bcm-colorful .react-colorful__alpha-pointer {
+  width: 15px;
+  height: 15px;
+}
+
+bcm-colorful .react-colorful__saturation-pointer {
+  width: 20px;
+  height: 20px;
+}