@bodynarf/react.components 1.4.13 → 1.4.14

package/components/primitives/checkbox/checkbox.scss

@@ -1,4 +1,8 @@
-.is-checkradio[type="checkbox"].m-check-radio.has-background-color.m-has-background-color:not(:checked) + label::before {
-    border-color: #dbdbdb !important;
-    background-color: transparent !important;
+.is-checkradio.m-check-radio {
+    padding: 0;
+
+    &[type="checkbox"].has-background-color.m-has-background-color:not(:checked) + label::before {
+        border-color: #dbdbdb !important;
+        background-color: transparent !important;
+    }
 }

package/components/primitives/checkbox/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./checkbox.scss";
 import { BaseInputElementProps } from "../types";
 export interface CheckBoxProps extends BaseInputElementProps<boolean> {
@@ -17,8 +16,13 @@ export interface CheckBoxProps extends BaseInputElementProps<boolean> {
      * @example `{ style: InputColor.Info, hasBackgrounColor: true, fixBackgroundColor: true }` -
     */
     fixBackgroundColor?: boolean;
+    /**
+     * Display component with label as form element.
+     * Label will be placed at left
+     */
+    isFormLabel?: boolean;
 }
 /** Boolean input component */
-declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor }: CheckBoxProps) => JSX.Element;
+declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }: CheckBoxProps) => JSX.Element;
 export default CheckBox;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/checkbox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/index.tsx"],"names":[],"mappings":";AAIA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,qBAAqB,CAAC,OAAO,CAAC;IACjE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;MAIE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,+IAKX,aAAa,KAAG,WAsClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,qBAAqB,CAAC,OAAO,CAAC;IACjE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;MAIE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,8BAA8B;AAC9B,QAAA,MAAM,QAAQ,6JAMX,aAAa,KAAG,WAoFlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/checkbox/index.js

@@ -4,7 +4,7 @@ import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
 import "./checkbox.scss";
 ;
 /** Boolean input component */
-const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor }) => {
+const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor, isFormLabel, }) => {
     const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
     const id = name || generateGuid();
     const className = getClassName([
@@ -18,6 +18,21 @@ const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded,
         (block ?? false) ? "is-block" : "",
         (withoutBorder ?? false) ? "has-no-border" : "",
     ]);
+    if (!isNullOrUndefined(label) && isFormLabel === true) {
+        const labelClassName = getClassName([
+            "label",
+            label.className
+        ]);
+        const labelContainerClassName = getClassName([
+            "field-label",
+            label.horizontalContainerClassName
+        ]);
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label.horizontalFieldContainerClassName
+        ]);
+        return (_jsxs("div", { className: "bbr-input field is-horizontal", children: [_jsx("div", { className: labelContainerClassName, children: _jsx("label", { className: labelClassName, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id })] }) })] }));
+    }
     return (_jsxs("div", { className: "field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
 };
 export default CheckBox;

package/components/primitives/number/components/withLabel/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NumberProps } from "../..";
 /** Number component with label */
 declare const NumberWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, }: NumberProps) => JSX.Element;

package/components/primitives/number/components/withLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,sJAMlB,WAAW,KAAG,WAyGhB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,sJAMlB,WAAW,KAAG,WAyGhB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.4.13",
+    "version": "1.4.14",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"