bromcom-ui 2.11.2-test.0 → 2.12.0-test.0

package/dist/cjs/{number-helper-f9323233.js → number-helper-243f0583.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const generate = require('./generate-64f84d95.js');
+const generate = require('./generate-c09a3ff3.js');
 
 class NumberHelper {
 }

package/dist/cjs/old-bcm-popover-box.cjs.entry.js

@@ -11,14 +11,14 @@ require('./element-dragger-a8562f82.js');
 const popoverPlacement = require('./popover-placement-e7d6eabd.js');
 const floatingUi = require('./floating-ui-21890d11.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-64f84d95.js');
-const numberHelper = require('./number-helper-f9323233.js');
+const generate = require('./generate-c09a3ff3.js');
+const numberHelper = require('./number-helper-243f0583.js');
 const stringHelper = require('./string-helper-f9184277.js');
 require('./utils-fc077139.js');
 require('./bcm-489c9b1a.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-992c024f.js');
-require('./colors-078851ec.js');
+require('./package-6483ada2.js');
+require('./colors-250d0982.js');
 
 const oldPopoverBoxCss = "@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}.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}*{box-sizing:border-box}.bcm-popover-box{display:none;position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popover-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:0 4px 12px 2px rgba(17, 24, 38, 0.1);border-radius:4px;position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;z-index:-99999;overflow:hidden;visibility:hidden;width:fit-content;position:absolute;display:block;overflow:hidden;visibility:hidden;z-index:-99999;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25))}.bcm-popover-box .bcm-pop-box.bcm-pop-open{overflow:unset;visibility:visible;height:unset}.bcm-popover-box .bcm-pop-box .bcm-pop-heading,.bcm-popover-box .bcm-pop-box .bcm-pop-content{display:block}.bcm-popover-box .bcm-pop-box .bcm-pop-heading:not(:empty){padding:4px 16px;border-bottom:1px solid #D9D9D9;color:var(--bcm-color-grey-9)}.bcm-popover-box .bcm-pop-box .bcm-pop-content:not(:empty){padding:8px 16px;color:var(--bcm-color-grey-8)}.bcm-popover-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popover-box.bcm-pop-open{display:block;z-index:10900}.bcm-popover-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popover-box.bcm-pop-open::after{display:block}.bcm-popover-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popover-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popover-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popover-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popover-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popover-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popover-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popover-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popover-box.top.center .bcm-pop-box,.bcm-popover-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popover-box.top.center::after,.bcm-popover-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popover-box.top.start .bcm-pop-box,.bcm-popover-box.bottom.start .bcm-pop-box{left:0}.bcm-popover-box.top.start::after,.bcm-popover-box.bottom.start::after{left:16px}.bcm-popover-box.top.end .bcm-pop-box,.bcm-popover-box.bottom.end .bcm-pop-box{right:0}.bcm-popover-box.top.end::after,.bcm-popover-box.bottom.end::after{right:16px}.bcm-popover-box.left.center .bcm-pop-box,.bcm-popover-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popover-box.left.center::after,.bcm-popover-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popover-box.left.start .bcm-pop-box,.bcm-popover-box.right.start .bcm-pop-box{top:0}.bcm-popover-box.left.start::after,.bcm-popover-box.right.start::after{top:12px}.bcm-popover-box.left.end .bcm-pop-box,.bcm-popover-box.right.end .bcm-pop-box{bottom:0}.bcm-popover-box.left.end::after,.bcm-popover-box.right.end::after{bottom:12px}.bcm-popover-box.top{transform:translateY(1px)}.bcm-popover-box.bottom{transform:translateY(-1px)}.bcm-popover-box.left{transform:translateX(1px)}.bcm-popover-box.right{transform:translateX(-1px)}.bcm-popover-box.top.bcm-pop-open,.bcm-popover-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popover-box.left.bcm-pop-open,.bcm-popover-box.right.bcm-pop-open{transform:translateX(0)}.bcm-popover-box.bcm-pop-linked.top .bcm-pop-box{margin:0 0 2px 0}.bcm-popover-box.bcm-pop-linked.bottom .bcm-pop-box{margin:2px 0 0 0}.bcm-popover-box.bcm-pop-linked.left .bcm-pop-box{margin:0 2px 0 0}.bcm-popover-box.bcm-pop-linked.right .bcm-pop-box{margin:0 0 0 2px}.bcm-popover-box.bcm-pop-linked .bcm-pop-box{filter:unset;border-radius:8px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1)}.bcm-popover-box.bcm-pop-linked::after{display:none}";
 

package/dist/cjs/old-bcm-popover.cjs.entry.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
 const bcm = require('./bcm-489c9b1a.js');
-const generate = require('./generate-64f84d95.js');
+const generate = require('./generate-c09a3ff3.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-992c024f.js');
-require('./colors-078851ec.js');
+require('./package-6483ada2.js');
+require('./colors-250d0982.js');
 
 const oldPopoverCss = "@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-popover{display:inline-flex}";
 

package/dist/cjs/{package-992c024f.js → package-6483ada2.js}

@@ -4,6 +4,6 @@
  */
 'use strict';
 
-const version = "2.11.2-test.0";
+const version = "2.12.0-test.0";
 
 exports.version = version;

package/dist/cjs/{stepper-states-b3496b3f.js → stepper-states-4e435c7d.js}

@@ -5,7 +5,7 @@
 'use strict';
 
 const index = require('./index-d321de96.js');
-const generate = require('./generate-64f84d95.js');
+const generate = require('./generate-c09a3ff3.js');
 const index$1 = require('./index-c591ecec.js');
 
 const { state } = index.createStore({

package/dist/cjs/{tooltip-helper-cb99c02e.js → tooltip-helper-31cc88d8.js}

@@ -8,10 +8,11 @@ require('./element-dragger-a8562f82.js');
 const stringHelper = require('./string-helper-f9184277.js');
 const utils = require('./utils-fc077139.js');
 const floatingUi = require('./floating-ui-21890d11.js');
-const colorHelper = require('./color-helper-c3a819ea.js');
-require('./validators-abb0434a.js');
-const generate = require('./generate-64f84d95.js');
-require('./number-helper-f9323233.js');
+const colorHelper = require('./color-helper-dc98a2ca.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-c09a3ff3.js');
+require('./number-helper-243f0583.js');
+require('./validators-e7423b70.js');
 const bcm = require('./bcm-489c9b1a.js');
 
 class Tooltip {

package/dist/cjs/{validators-abb0434a.js → validators-e7423b70.js}

@@ -4,11 +4,7 @@
  */
 'use strict';
 
-const generate = require('./generate-64f84d95.js');
-
-class DateTimeHelper {
-}
-DateTimeHelper.convertTimeStampToDate = (timestamp) => new Date(timestamp);
+const generate = require('./generate-c09a3ff3.js');
 
 class Validators {
 }
@@ -34,5 +30,4 @@ Validators.isValidate = (str, type) => {
   }
 };
 
-exports.DateTimeHelper = DateTimeHelper;
 exports.Validators = Validators;

package/dist/collection/collection-manifest.json

@@ -27,6 +27,7 @@
     "./components/molecules/error-layout/error-layout.js",
     "./components/molecules/expansion-panel/expansion-panel.js",
     "./components/molecules/input/input.js",
+    "./components/molecules/input/input2.js",
     "./components/molecules/input-dropdown/input-dropdown.js",
     "./components/molecules/item/item.js",
     "./components/molecules/items/items.js",
@@ -36,6 +37,7 @@
     "./components/molecules/modal/modal.js",
     "./components/molecules/notification/notification.js",
     "./components/molecules/number-input/number-input.js",
+    "./components/molecules/number-input/react-input.js",
     "./components/molecules/popconfirm/popconfirm-box.js",
     "./components/molecules/popconfirm/popconfirm.js",
     "./components/molecules/popover/popover.js",

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

@@ -0,0 +1,117 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const inputStyle = tv({
+  slots: {
+    host: "bcm-input2 bcm-ui-element tw-inline-flex tw-flex-col tw-w-full tw-max-w-64 tw-mb-2 ",
+    base: "",
+    inputContainer: ["bcm-input2__container", "tw-bg-color-base tw-border tw-border-solid tw-border-color tw-rounded", "tw-flex tw-items-center tw-justify-between tw-gap-2", "tw-px-3"],
+    input: [
+      "bcm-input2-element tw-w-full tw-h-full tw-flex-1 tw-outline-none tw-bg-transparent tw-border-0 tw-appearance-none tw-text-ellipsis",
+      "tw-text-color-default placeholder:tw-text-color-placeholder",
+      "[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+    ],
+    slotClass: "tw-flex tw-items-center tw-justify-between tw-gap-2 empty:tw-hidden tw-text-color-placeholder",
+    clearButton: ["clear-button tw-cursor-pointer tw-appearance-none tw-border-0 tw-text-color-placeholder tw-text-size-inherit tw-bg-transparent tw-py-1 tw-px-2 -tw-mx-2", "hover:tw-text-color"],
+    controls: "number-controls -tw-mr-3 tw-flex tw-h-full tw-w-fit tw-flex-col tw-items-center tw-justify-between",
+    controlsBtn: [
+      "number-control-button tw-w-7 tw-flex-1 tw-cursor-pointer tw-appearance-none tw-border-0 tw-border-l tw-border-solid tw-border-color tw-bg-transparent tw-p-0 tw-text-2 tw-leading-none  tw-text-color-placeholder",
+    ],
+    controlsBtnUp: "number-control-up tw-rounded-tr-[3px]",
+    controlsBtnDown: "number-control-down tw-rounded-br-[3px]",
+    controlsDivider: "number-control-divider tw-h-0 tw-w-full tw-border-0 tw-border-b tw-border-solid  tw-border-color",
+  },
+  variants: {
+    size: {
+      small: {
+        host: "bcm-input2__container--small",
+        inputContainer: "input2-size-small tw-h-6",
+        input: "tw-text-2",
+      },
+      medium: {
+        host: "bcm-input2__container--medium",
+        inputContainer: "input2-size-medium tw-h-8",
+        input: "tw-text-3",
+      },
+      large: {
+        host: "bcm-input2__container--large",
+        inputContainer: "input2-size-large tw-h-10",
+        input: "tw-text-4",
+      },
+    },
+    fullWidth: {
+      true: {
+        host: "full-width tw-max-w-full",
+      },
+    },
+    noMargin: {
+      true: {
+        host: "no-margin tw-mb-0",
+      },
+    },
+    hidden: {
+      true: {
+        host: "hidden tw-hidden",
+      },
+    },
+    focused: {
+      true: {
+        host: "focused",
+      },
+    },
+    clearable: {
+      true: {
+        host: "clearable",
+      },
+    },
+    disabled: {
+      true: {
+        host: "disabled",
+        input: "",
+        inputContainer: "tw-bg-color-disabled tw-border-color-disabled tw-text-color-disabled tw-cursor-not-allowed",
+        controlsBtn: "tw-pointer-events-none",
+      },
+      false: {
+        controlsBtn: "hover:tw-bg-color-base-hover hover:tw-text-color",
+        inputContainer: ["has-[:not([disabled]):focus]:tw-ring", "has-[:not([disabled]):hover]:tw-border-color-primaryInfo"],
+      },
+    },
+    readonly: {
+      true: {
+        host: "readonly",
+      },
+    },
+    invalid: {
+      true: {
+        host: "invalid",
+        inputContainer: "tw-border-color-error has-[:not([disabled]):focus]:tw-ring-color-error has-[:not([disabled]):hover]:!tw-border-color-error",
+      },
+    },
+    unit: {
+      true: {
+        host: "unit",
+      },
+    },
+    error: {
+      true: {
+        host: "error",
+        inputContainer: "tw-border-color-error",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+    noMargin: false,
+    fullWidth: false,
+    hidden: false,
+    focused: false,
+    clearable: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    unit: false,
+    error: false,
+  },
+});