@bodynarf/react.components 1.8.22 → 1.9.1

package/components/primitives/internal/componentWithLabel/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, getValueOrDefault } from "@bodynarf/utils";
+import { ElementSize } from "../../../../types";
+/** Form input component with describing label */
+const ComponentWithLabel = ({ label, id, size, children, }) => {
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const labelClassName = getClassName([
+        "label",
+        !label.horizontal ? elSizeClassName : "",
+        label.className
+    ]);
+    if (label.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            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, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsx("div", { className: "field", children: children }) })] }));
+    }
+    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), children] }));
+};
+export default ComponentWithLabel;

package/components/primitives/internal/hint/index.d.ts

@@ -0,0 +1,12 @@
+import { HintConfiguration, ValidationState } from "../../../../types";
+/** Props of `InternalHint` */
+interface HintProps {
+    /** @inheritdoc BaseInputElementProps.validationState */
+    validationState?: ValidationState;
+    /** @inheritdoc BaseInputElementProps.hint */
+    hint?: HintConfiguration;
+}
+/** Hint component for internal use (as form input elements hints) */
+declare const InternalHint: ({ validationState, hint, }: HintProps) => JSX.Element;
+export default InternalHint;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/internal/hint/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/internal/hint/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,iBAAiB,EAAE,eAAe,EAAoB,MAAM,YAAY,CAAC;AAGhH,8BAA8B;AAC9B,UAAU,SAAS;IACf,wDAAwD;IACxD,eAAe,CAAC,EAAE,eAAe,CAAC;IAElC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,qEAAqE;AACrE,QAAA,MAAM,YAAY,+BAEf,SAAS,KAAG,WAgDd,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/components/primitives/internal/hint/index.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementPosition, ElementSize, ValidationStatus } from "../../../../types";
+import Icon from "../../../icon";
+/** Hint component for internal use (as form input elements hints) */
+const InternalHint = ({ validationState, hint, }) => {
+    if (isNullOrUndefined(validationState) && isNullOrUndefined(hint)) {
+        return _jsx(_Fragment, {});
+    }
+    const validationStateDefined = !isNullOrUndefined(validationState)
+        && validationState.status !== ValidationStatus.None
+        && validationState.messages.length > 0;
+    if (validationStateDefined) {
+        const validationClassName = validationState.status === ValidationStatus.Valid
+            ? "is-success"
+            : "is-danger";
+        return (_jsx("p", { className: `help m-help ${validationClassName}`, children: validationState.messages.join("\n") }));
+    }
+    if (isNullOrUndefined(hint)) {
+        return (_jsx(_Fragment, {}));
+    }
+    const className = getClassName([
+        "bbr-hint",
+        "help",
+        "m-help",
+        (hint.grey ?? false) ? "has-text-grey" : undefined,
+        (hint.italic ?? false) ? "is-italic" : undefined,
+    ]);
+    if (!isNullOrUndefined(hint.icon)) {
+        return (_jsx(HintWithIcon, { ...hint, className: className }));
+    }
+    return (_jsx("p", { className: className, children: hint.content }));
+};
+export default InternalHint;
+/** Hint element with icon */
+const HintWithIcon = ({ className, content, icon, }) => {
+    const iconClassName = getClassName([
+        icon.className,
+        icon.position === ElementPosition.Right
+            ? "bbr-icon--right"
+            : "bbr-icon--left"
+    ]);
+    if (icon.position === ElementPosition.Right) {
+        return (_jsxs("p", { className: className, children: [content, _jsx(Icon, { name: icon.name, className: iconClassName, size: icon.size ?? ElementSize.Small })] }));
+    }
+    return (_jsxs("p", { className: className, children: [_jsx(Icon, { name: icon.name, className: iconClassName, size: icon.size ?? ElementSize.Small }), content] }));
+};

package/components/primitives/multiline/component/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "../../../../common.scss";
-import { MultilineProps } from "../../multiline";
+import { MultilineProps } from "..";
 /** Multiline textual input component */
 declare const Multiline: (props: MultilineProps) => JSX.Element;
 export default Multiline;

package/components/primitives/multiline/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/multiline/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAQ1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/multiline/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAIpC,wCAAwC;AACxC,QAAA,MAAM,SAAS,UAAW,cAAc,KAAG,WAK1C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/components/primitives/multiline/component/index.js

@@ -1,15 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import "../../../../common.scss";
-import MultilineWithoutLabel from "../../multiline/components/multilineWithoutLabel";
-import MultilineWithLabel from "../../multiline/components/multilineWithLabel";
+import MultilineWithoutLabel from "../components/withoutLabel";
+import MultilineWithLabel from "../components/withLabel";
 /** Multiline textual input component */
 const Multiline = (props) => {
-    if (isNullOrUndefined(props.label)) {
-        return (_jsx(MultilineWithoutLabel, { ...props }));
-    }
-    else {
-        return (_jsx(MultilineWithLabel, { ...props }));
-    }
+    return isNullOrUndefined(props.label)
+        ? _jsx(MultilineWithoutLabel, { ...props })
+        : _jsx(MultilineWithLabel, { ...props });
 };
 export default Multiline;

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

@@ -0,0 +1,5 @@
+import { MultilineProps } from "../..";
+/** Multiline textual input component with describing label */
+declare const MultilineWithLabel: ({ defaultValue, onValueChange, validationState, readonly, disabled, name, size, style, loading, label, placeholder, fixed, rows, onBlur, className, title, data, hint, }: MultilineProps) => JSX.Element;
+export default MultilineWithLabel;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,QAAA,MAAM,kBAAkB,6KAUrB,cAAc,KAAG,WAuDnB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/multiline/components/withLabel/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import ComponentWithLabel from "../../../internal/componentWithLabel";
+import InternalHint from "../../../internal/hint";
+/** Multiline textual input component with describing label */
+const MultilineWithLabel = ({ defaultValue, onValueChange, validationState, readonly, disabled, name, size, style, loading = false, label, placeholder, fixed = false, rows, onBlur, className, title, data, hint, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name ?? generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        getStyleClassName(style, validationState),
+        "textarea",
+        fixed ? "has-fixed-size" : "",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        loading ? "is-loading" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: id, name: id, rows: rows, onBlur: onBlur, readOnly: readonly, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default MultilineWithLabel;

package/components/primitives/multiline/components/withoutLabel/index.d.ts

@@ -0,0 +1,5 @@
+import { MultilineProps } from "../..";
+/** Multiline textual input component without describing label*/
+declare const MultilineWithoutLabel: ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, size, style, loading, fixed, rows, className, title, data, hint, }: MultilineProps) => JSX.Element;
+export default MultilineWithoutLabel;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/multiline/components/withoutLabel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/multiline/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,gEAAgE;AAChE,QAAA,MAAM,qBAAqB,kJASxB,cAAc,KAAG,WAiDnB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/components/primitives/multiline/components/withoutLabel/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
+/** Multiline textual input component without describing label*/
+const MultilineWithoutLabel = ({ onValueChange, defaultValue, validationState, name, placeholder, onBlur, size, style, loading = false, fixed = false, rows, className, title, data, hint, }) => {
+    const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
+    const id = name ?? generateGuid();
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        getStyleClassName(style, validationState),
+        "textarea",
+        fixed ? "has-fixed-size" : "",
+    ]);
+    const inputContainerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading ? "is-loading" : "",
+    ]);
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("textarea", { id: id, name: id, rows: rows, onBlur: onBlur, onChange: onChange, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
+};
+export default MultilineWithoutLabel;

package/components/primitives/multiline/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Multiline textual input component props type */
 export interface MultilineProps extends Omit<BaseInputElementProps<string>, "rounded"> {
     /** Is input should be resizable */

package/components/primitives/multiline/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,mDAAmD;AACnD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAClF,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/multiline/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,mDAAmD;AACnD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAClF,mCAAmC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB"}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { NumberProps } from "../../number";
+import { NumberProps } from "..";
 /** Number input component */
 declare const Number: (props: NumberProps) => JSX.Element;
 export default Number;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/number/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAIrD,6BAA6B;AAC7B,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WAOpC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/number/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC;AAIjC,6BAA6B;AAC7B,QAAA,MAAM,MAAM,UAAW,WAAW,KAAG,WAIpC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/components/primitives/number/component/index.js

@@ -1,14 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
-import NumberWithLabel from "../../number/components/withLabel";
-import NumberWithoutLabel from "../../number/components/withoutLabel";
+import NumberWithLabel from "../components/withLabel";
+import NumberWithoutLabel from "../components/withoutLabel";
 /** Number input component */
 const Number = (props) => {
-    if (isNullOrUndefined(props.label)) {
-        return (_jsx(NumberWithoutLabel, { ...props }));
-    }
-    else {
-        return (_jsx(NumberWithLabel, { ...props }));
-    }
+    return isNullOrUndefined(props.label)
+        ? _jsx(NumberWithoutLabel, { ...props })
+        : _jsx(NumberWithLabel, { ...props });
 };
 export default Number;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { NumberProps } from "../../../number";
+import { NumberProps } from "../..";
 /** Number component with label */
-declare const NumberWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, label, placeholder, onBlur, step, }: NumberProps) => JSX.Element;
+declare const NumberWithLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded, loading, label, placeholder, onBlur, step, className, title, data, hint, }: NumberProps) => JSX.Element;
 export default NumberWithLabel;
 //# sourceMappingURL=index.d.ts.map

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":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,kCAAkC;AAClC,QAAA,MAAM,eAAe,4JAOlB,WAAW,KAAG,WA2GhB,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,kCAAkC;AAClC,QAAA,MAAM,eAAe,+KAUlB,WAAW,KAAG,WA0DhB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/primitives/number/components/withLabel/index.js

@@ -1,44 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { generateGuid, getClassName, getValueOrDefault, isStringEmpty } from "@bodynarf/utils";
-import { ElementSize } from "../../../..";
-import { getValidationValues } from "../../../../../utils";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined, isStringEmpty } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import ComponentWithLabel from "../../../internal/componentWithLabel";
+import InternalHint from "../../../internal/hint";
 /** Number component with label */
-const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, onBlur, step = 1, }) => {
+const NumberWithLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, label, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(isStringEmpty(event.target.value) ? undefined : +event.target.value), [onValueChange]);
-    const id = name || generateGuid();
+    const id = name ?? generateGuid();
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
         className,
         elSizeClassName,
         rounded ? "is-rounded" : "",
-        styleClassName,
+        getStyleClassName(style, validationState),
         "input",
     ]);
     const inputContainerClassName = getClassName([
         "control",
         loading ? "is-loading" : "",
     ]);
-    const labelClassName = getClassName([
-        "label",
-        !label.horizontal ? elSizeClassName : "",
-        label.className
-    ]);
-    if (label.horizontal) {
-        const labelContainerClassName = getClassName([
-            "field-label",
-            elSizeClassName,
-            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, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
-                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
-    }
-    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsx("div", { className: inputContainerClassName, children: _jsx("input", { type: "number", id: id, name: id, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithLabel;

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { NumberProps } from "../../../number";
+import { NumberProps } from "../..";
 /** Number component without label */
-declare const NumberWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded, loading, placeholder, onBlur, step, }: NumberProps) => JSX.Element;
+declare const NumberWithoutLabel: ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded, loading, placeholder, onBlur, step, className, title, data, hint, }: NumberProps) => JSX.Element;
 export default NumberWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,qJAOrB,WAAW,KAAG,WA8ChB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/number/components/withoutLabel/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,qCAAqC;AACrC,QAAA,MAAM,kBAAkB,wKAUrB,WAAW,KAAG,WAqDhB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/primitives/number/components/withoutLabel/index.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
-import { ElementSize } from "../../../..";
-import { getValidationValues } from "../../../../../utils";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
+import InternalHint from "../../../internal/hint";
 /** Number component without label */
-const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, className, size, style, rounded = false, loading = false, placeholder, onBlur, step = 1, }) => {
+const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, validationState, name, size, style, rounded = false, loading = false, placeholder, onBlur, step = 1, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(+event.target.value), [onValueChange]);
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elClassName = getClassName([
         className,
         "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
         rounded ? "is-rounded" : "",
-        styleClassName,
+        getStyleClassName(style, validationState),
         "input",
     ]);
     const containerClassName = getClassName([
@@ -19,8 +19,10 @@ const NumberWithoutLabel = ({ onValueChange, readonly, disabled, defaultValue, v
         "bbr-input",
         loading ? "is-loading" : "",
     ]);
-    const id = name || generateGuid();
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", className: elClassName, placeholder: placeholder, readOnly: readonly, disabled: disabled, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, name: id, id: id, step: step }) }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    const id = name ?? generateGuid();
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: containerClassName, children: _jsx("input", { type: "number", id: id, name: id, step: step, onBlur: onBlur, onChange: onChange, readOnly: readonly, disabled: disabled, className: elClassName, placeholder: placeholder, defaultValue: defaultValue, title: title, ...dataAttributes }) }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default NumberWithoutLabel;

package/components/primitives/number/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Number component props type */
 export interface NumberProps extends BaseInputElementProps<number> {
     /** Focus out event handler */

package/components/primitives/number/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC9D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/number/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,kCAAkC;AAClC,MAAM,WAAW,WAAY,SAAQ,qBAAqB,CAAC,MAAM,CAAC;IAC9D,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;MAIE;IACF,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/components/primitives/password/component/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import "./style.scss";
-import { PasswordProps } from "../../password";
+import { PasswordProps } from "../..";
 /** Password input component */
 declare const Password: (props: PasswordProps) => JSX.Element;
 export default Password;

package/components/primitives/password/component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/password/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAKzD,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAMxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/primitives/password/component/index.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAEtB,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,+BAA+B;AAC/B,QAAA,MAAM,QAAQ,UAAW,aAAa,KAAG,WAIxC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/password/component/index.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isNullOrUndefined } from "@bodynarf/utils";
 import "./style.scss";
-import PasswordWithLabel from "../../password/components/withLabel";
-import PasswordWithoutLabel from "../../password/components/withoutLabel";
+import PasswordWithLabel from "../components/withLabel";
+import PasswordWithoutLabel from "../components/withoutLabel";
 /** Password input component */
 const Password = (props) => {
-    if (isNullOrUndefined(props.label)) {
-        return _jsx(PasswordWithoutLabel, { ...props });
-    }
-    return _jsx(PasswordWithLabel, { ...props });
+    return isNullOrUndefined(props.label)
+        ? _jsx(PasswordWithoutLabel, { ...props })
+        : _jsx(PasswordWithLabel, { ...props });
 };
 export default Password;

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { PasswordProps } from "../../../password";
-declare const PasswordWithLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, label, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+import { PasswordProps } from "../..";
+declare const PasswordWithLabel: ({ onValueChange, disabled, validationState, name, size, style, rounded, loading, label, placeholder, canShowPassword, className, title, data, hint, }: PasswordProps) => JSX.Element;
 export default PasswordWithLabel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,iBAAiB,uIAOpB,aAAa,KAAG,WAgIlB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withLabel/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,iBAAiB,0JAUpB,aAAa,KAAG,WAwElB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/primitives/password/components/withLabel/index.js

@@ -1,22 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
-import { getValidationValues } from "../../../../../utils";
-import { ElementSize } from "../../../..";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import Icon from "../../../../icon";
-const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded = false, loading = false, label, placeholder, canShowPassword = false, }) => {
+import ComponentWithLabel from "../../../internal/componentWithLabel";
+import InternalHint from "../../../internal/hint";
+const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, size, style, rounded = false, loading = false, label, placeholder, canShowPassword = false, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
-    const id = name || generateGuid();
+    const id = name ?? generateGuid();
     const elClassName = getClassName([
+        "bbr-password",
         className,
         elSizeClassName,
         rounded ? "is-rounded" : "",
-        styleClassName,
-        "bbr-password",
+        getStyleClassName(style, validationState),
         "input",
     ]);
     const inputContainerClassName = getClassName([
@@ -25,27 +26,10 @@ const PasswordWithLabel = ({ onValueChange, disabled, validationState, name, cla
         canShowPassword ? "has-icons-right" : "",
         "bbr-password__wrapper",
     ]);
-    const labelClassName = getClassName([
-        "label",
-        !label.horizontal ? elSizeClassName : "",
-        label.className
-    ]);
-    if (label.horizontal) {
-        const labelContainerClassName = getClassName([
-            "field-label",
-            elSizeClassName,
-            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, htmlFor: id, children: label.caption }) }), _jsx("div", { className: fieldContainerClassName, children: _jsxs("div", { className: "field", children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
-                                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, title: "Show password", children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
-                                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }) })] }));
-    }
-    return (_jsxs("div", { className: "bbr-input field", children: [_jsx("label", { className: labelClassName, htmlFor: id, children: label.caption }), _jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
-                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(ComponentWithLabel, { id: id, label: label, size: getValueOrDefault(size, ElementSize.Normal), children: [_jsxs("div", { className: inputContainerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: id, name: id, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, title: "Show password", children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithLabel;

package/components/primitives/password/components/withoutLabel/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { PasswordProps } from "../../../password";
-declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, className, size, style, rounded, loading, placeholder, canShowPassword, }: PasswordProps) => JSX.Element;
+import { PasswordProps } from "../..";
+declare const PasswordWithoutLabel: ({ onValueChange, disabled, validationState, name, size, style, rounded, loading, placeholder, canShowPassword, className, title, data, hint, }: PasswordProps) => JSX.Element;
 export default PasswordWithoutLabel;
 //# sourceMappingURL=index.d.ts.map

package/components/primitives/password/components/withoutLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,QAAA,MAAM,oBAAoB,gIAOvB,aAAa,KAAG,WA4DlB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/primitives/password/components/withoutLabel/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,oBAAoB,mJAUvB,aAAa,KAAG,WAoElB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/components/primitives/password/components/withoutLabel/index.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
-import { ElementSize } from "../../../..";
-import { getValidationValues } from "../../../../../utils";
+import { generateGuid, getClassName, getValueOrDefault, isNullOrUndefined } from "@bodynarf/utils";
+import { ElementSize } from "../../../../../types";
+import { getStyleClassName, mapDataAttributes } from "../../../../../utils";
 import Icon from "../../../../icon";
-const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, className, size, style, rounded = false, loading = false, placeholder, canShowPassword = false, }) => {
+import InternalHint from "../../../internal/hint";
+const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name, size, style, rounded = false, loading = false, placeholder, canShowPassword = false, className, title, data, hint, }) => {
     const onChange = useCallback((event) => onValueChange(event.target.value), [onValueChange]);
     const [contentIsHidden, setContentIsHidden] = useState(true);
     const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
-    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
     const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
-    const id = name || generateGuid();
+    const id = name ?? generateGuid();
     const elClassName = getClassName([
+        "bbr-password",
         className,
         elSizeClassName,
         rounded ? "is-rounded" : "",
-        styleClassName,
-        "bbr-password",
+        getStyleClassName(style, validationState),
         "input",
     ]);
     const containerClassName = getClassName([
@@ -26,8 +26,10 @@ const PasswordWithoutLabel = ({ onValueChange, disabled, validationState, name,
         canShowPassword ? "has-icons-right" : "",
         "bbr-password__wrapper",
     ]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", className: elClassName, placeholder: placeholder, disabled: disabled, onChange: onChange, name: id, id: id }), canShowPassword && !loading &&
-                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), isValidationDefined && validationMessages.length > 0 &&
-                _jsx("p", { className: `help m-help ${styleClassName}`, children: validationMessages.join("\n") })] }));
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: containerClassName, children: [_jsx("input", { type: contentIsHidden ? "password" : "text", id: id, name: id, disabled: disabled, onChange: onChange, className: elClassName, placeholder: placeholder, title: title, ...dataAttributes }), canShowPassword && !loading &&
+                        _jsx("span", { className: `icon is-right ${elSizeClassName}`, onMouseEnter: onIconClick, onMouseLeave: onIconClick, children: _jsx(Icon, { name: contentIsHidden ? "eye" : "eye-slash", size: ElementSize.Medium }) })] }), _jsx(InternalHint, { hint: hint, validationState: validationState })] }));
 };
 export default PasswordWithoutLabel;

package/components/primitives/password/types.d.ts

@@ -1,4 +1,4 @@
-import { BaseInputElementProps } from "../..";
+import { BaseInputElementProps } from "../../../types";
 /** Password component props type */
 export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
     /**

package/components/primitives/password/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/password/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEnD,oCAAoC;AACpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACnG;;;MAGE;IACF,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B"}