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

package/dist/components/input.style.js

@@ -0,0 +1,120 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { c as ce } from './index5.js';
+
+const inputStyle = ce({
+  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,
+  },
+});
+
+export { inputStyle as i };

package/dist/components/radio.js

@@ -34,7 +34,7 @@ const BcmRadio = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "tw-text-1": size === Bcm.Size.small,
         "tw-text-2.5": size === Bcm.Size.medium,
         "tw-text-4": size === Bcm.Size.large,
-      }), style: (Generate.getTwColor(color)) }, h("label", { class: classnames("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: classnames("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
+      }), style: (Generate.getTwColor(color)) }, h("label", { class: classnames("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: classnames("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-border-solid tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
         "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
         "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
         "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,