bromcom-ui 2.10.1-rc.0 → 2.10.1-rc.10

package/dist/collection/components/{atoms/label/label.css → molecules/number-input/number-input.css}

@@ -1,5 +1,4 @@
 @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");
 .size-1 {
   font-size: 12px;
   line-height: 20px;
@@ -123,36 +122,16 @@
   margin-right: 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);
+@layer base {
+  .bcm-number-input input[type=number]::-webkit-outer-spin-button,
+.bcm-number-input input[type=number]::-webkit-inner-spin-button,
+.bcm-number-input input[type=number] {
+    -webkit-appearance: none;
+    padding: 0px;
+    margin: 0px;
+    outline: none;
+    border: 0px;
+    vertical-align: baseline;
+    -moz-appearance: textfield !important;
+  }
 }

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

@@ -0,0 +1,425 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { Generate } from "@bcm/helpers";
+import { Host, h } from "@stencil/core";
+import { Bcm } from "@bcm/model";
+import { CaptionTemplate } from "@bcm/template";
+import { numberInputStyle } from "./number-input.style";
+export class NumberInput {
+  constructor() {
+    this.blockInvalidChar = e => {
+      return ["e", "E", "+", "-"].includes(e.key) && e.preventDefault();
+    };
+    this._id = Generate.UID();
+    this.size = Bcm.Size.medium;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.placeholder = undefined;
+    this.label = undefined;
+    this.tooltip = undefined;
+    this.value = 0;
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.pattern = undefined;
+    this.caption = undefined;
+    this.noCaption = false;
+    this.captionType = Bcm.Status.default;
+    this.captionError = undefined;
+    this.customErrorMessage = undefined;
+    this.prefixIcon = undefined;
+    this.suffixIcon = undefined;
+    this.isFocus = false;
+    this.isError = false;
+  }
+  render() {
+    const { _id, value, min, max, step, tooltip, disabled, size, label, caption, captionType, required, noCaption, captionError, customErrorMessage, prefixIcon, suffixIcon, pattern } = this;
+    const { host, input, container, inputContainer, caretContainer, caretIcon, slotIcon } = numberInputStyle({ size, focus: this.isFocus });
+    return (h(Host, { class: host(), onClick: () => !disabled && this.nativeInput.focus() }, label && h("bcm-label", { tooltip: tooltip, "no-margin": true, type: captionType, value: label, required: required, htmlFor: _id }), h("div", { class: container() }, h("div", { class: inputContainer() }, prefixIcon && (h("span", { class: slotIcon() }, h("i", { class: prefixIcon }))), h("input", { type: "number", class: input(), min: min, max: max, step: step, value: value, inputmode: "numeric", pattern: pattern, ref: input => (this.nativeInput = input), onKeyPress: this.blockInvalidChar, onFocus: () => (this.isFocus = true), onBlur: () => (this.isFocus = false), onError: e => console.log(e), onErrorCapture: e => console.log(e) }), suffixIcon && (h("span", { class: slotIcon() }, h("i", { class: suffixIcon })))), h("div", { class: caretContainer() }, h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-up" })), h("span", { class: caretIcon() }, h("i", { class: "fas fa-caret-down" })))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: customErrorMessage })));
+  }
+  static get is() { return "bcm-number-input"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["number-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["number-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "_id": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
+      "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"
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "100"
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "tooltip": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip",
+        "reflect": false
+      },
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "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"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "pattern": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pattern",
+        "reflect": false
+      },
+      "caption": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption",
+        "reflect": false
+      },
+      "noCaption": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-caption",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "captionType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "StatusTypes",
+          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "StatusTypes": {
+              "location": "import",
+              "path": "@bcm/model"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-type",
+        "reflect": false,
+        "defaultValue": "Bcm.Status.default"
+      },
+      "captionError": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "caption-error",
+        "reflect": false
+      },
+      "customErrorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-error-message",
+        "reflect": false
+      },
+      "prefixIcon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prefix-icon",
+        "reflect": false
+      },
+      "suffixIcon": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "suffix-icon",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isFocus": {},
+      "isError": {}
+    };
+  }
+}

package/dist/collection/components/molecules/number-input/number-input.style.js

@@ -0,0 +1,45 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const numberInputStyle = tv({
+  slots: {
+    host: "bcm-number-input bcm-ui-element tw-flex tw-flex-col tw-items-start tw-justify-start tw-max-w-[256px] tw-w-full",
+    container: "tw-flex tw-flex-row tw-items-center tw-justify-between tw-rounded tw-border tw-border-solid tw-border-slate-300 tw-w-full tw-min-h-full hover:tw-bg-slate-50",
+    inputContainer: "tw-flex tw-min-h-fit tw-w-full tw-flex-row tw-items-center tw-justify-center tw-gap-2 tw-px-3",
+    input: "tw-outline-none tw-appearance-none tw-flex-1 tw-bg-transparent tw-text-slate-400 tw-text-inherit tw-font-normal",
+    caretContainer: "tw-flex tw-flex-col tw-min-h-full tw-border-l tw-items-stretch tw-self-stretch tw-justify-center tw-border-l-slate-300 tw-select-none tw-w-[30px]",
+    caretIcon: "tw-flex tw-items-center tw-text-slate-500 tw-justify-center tw-h-full tw-cursor-pointer active:tw-bg-slate-400 last:tw-border-t last:tw-border-t-slate-300",
+    slotIcon: "tw-text-slate-500",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "tw-gap-0.5 tw-text-xs",
+        slotIcon: "tw-text-[10px]",
+        inputContainer: "tw-py-[2px]",
+        caretIcon: "tw-text-[10px]",
+      },
+      medium: {
+        host: "tw-gap-1 tw-text-base",
+        slotIcon: "tw-text-xs",
+        inputContainer: "tw-py-[5px]",
+      },
+      large: {
+        host: "tw-gap-2 tw-text-base",
+        slotIcon: "tw-text-[14px]",
+        inputContainer: "tw-py-2",
+      },
+    },
+    focus: {
+      true: {
+        container: "tw-ring-1 tw-ring-blue-600",
+        input: "tw-text-slate-700",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});

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

@@ -1,7 +1,5 @@
 @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;
@@ -125,93 +123,6 @@
   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;
 }