wini-web-components 2.6.0 → 2.6.1

package/dist/component/number-picker/number-picker.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,21 +37,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberPicker = void 0;
-var react_1 = __importStar(require("react"));
-var number_picker_module_css_1 = __importDefault(require("./number-picker.module.css"));
-var NumberPicker = function (_a) {
-    var id = _a.id, value = _a.value, onChange = _a.onChange, disabled = _a.disabled, readOnly = _a.readOnly, className = _a.className, helperText = _a.helperText, helperTextColor = _a.helperTextColor, max = _a.max, min = _a.min, style = _a.style, _b = _a.type, type = _b === void 0 ? "icon-button" : _b, _c = _a.volume, volume = _c === void 0 ? 1 : _c;
-    var _d = (0, react_1.useState)(0), val = _d[0], setValue = _d[1];
-    var inputRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
+const react_1 = __importStar(require("react"));
+const number_picker_module_css_1 = __importDefault(require("./number-picker.module.css"));
+const NumberPicker = ({ id, value, onChange, disabled, readOnly, className, helperText, helperTextColor, max, min, style, type = "icon-button", volume = 1 }) => {
+    const [val, setValue] = (0, react_1.useState)(0);
+    const inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
         if (inputRef.current) {
             setValue(value !== null && value !== void 0 ? value : 0);
-            inputRef.current.value = "".concat(value !== null && value !== void 0 ? value : 0);
+            inputRef.current.value = `${value !== null && value !== void 0 ? value : 0}`;
         }
     }, [value, inputRef]);
-    return react_1.default.createElement("div", { id: id, className: "row ".concat(number_picker_module_css_1.default["number-picker-container"], " ").concat(className !== null && className !== void 0 ? className : "body-2", " ").concat((helperText === null || helperText === void 0 ? void 0 : helperText.length) && number_picker_module_css_1.default['helper-text']), "number-picker-type": type !== null && type !== void 0 ? type : "icon-button", "helper-text": helperText, style: style ? __assign(__assign({}, { '--helper-text-color': helperTextColor !== null && helperTextColor !== void 0 ? helperTextColor : '#e14337' }), style) : { '--helper-text-color': helperTextColor !== null && helperTextColor !== void 0 ? helperTextColor : '#e14337' } },
-        react_1.default.createElement("div", { className: "row", onClick: function () {
-                var newValue = val - volume;
+    return react_1.default.createElement("div", { id: id, className: `row ${number_picker_module_css_1.default["number-picker-container"]} ${className !== null && className !== void 0 ? className : "body-2"} ${(helperText === null || helperText === void 0 ? void 0 : helperText.length) && number_picker_module_css_1.default['helper-text']}`, "number-picker-type": type !== null && type !== void 0 ? type : "icon-button", "helper-text": helperText, style: style ? Object.assign(Object.assign({}, { '--helper-text-color': helperTextColor !== null && helperTextColor !== void 0 ? helperTextColor : '#e14337' }), style) : { '--helper-text-color': helperTextColor !== null && helperTextColor !== void 0 ? helperTextColor : '#e14337' } },
+        react_1.default.createElement("div", { className: "row", onClick: () => {
+                let newValue = val - volume;
                 if (min === undefined || newValue >= min) {
                     if (volume % 1 === 0)
                         newValue = Math.round(newValue);
@@ -70,14 +58,14 @@ var NumberPicker = function (_a) {
                         newValue = parseFloat(newValue.toFixed(1));
                     setValue(newValue);
                     if (inputRef.current)
-                        inputRef.current.value = "".concat(newValue);
+                        inputRef.current.value = `${newValue}`;
                     if (onChange)
                         onChange(newValue);
                 }
             } },
             react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                 react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.3335 7.93907C1.3335 7.60435 1.60484 7.33301 1.93956 7.33301H14.0608C14.3955 7.33301 14.6668 7.60435 14.6668 7.93907C14.6668 8.27379 14.3955 8.54513 14.0608 8.54513H1.93956C1.60484 8.54513 1.3335 8.27379 1.3335 7.93907Z" }))),
-        react_1.default.createElement("input", { ref: inputRef, readOnly: readOnly, disabled: disabled, onKeyDown: function (ev) {
+        react_1.default.createElement("input", { ref: inputRef, readOnly: readOnly, disabled: disabled, onKeyDown: (ev) => {
                 switch (ev.key.toLowerCase()) {
                     case "enter":
                         ev.target.blur();
@@ -85,10 +73,10 @@ var NumberPicker = function (_a) {
                     default:
                         break;
                 }
-            }, onFocus: function (ev) { ev.target.select(); }, onBlur: function (ev) {
-                var newValue = volume % 1 === 0 ? parseInt(ev.target.value.trim()) : parseFloat(ev.target.value.trim());
+            }, onFocus: (ev) => { ev.target.select(); }, onBlur: (ev) => {
+                let newValue = volume % 1 === 0 ? parseInt(ev.target.value.trim()) : parseFloat(ev.target.value.trim());
                 if (isNaN(newValue))
-                    ev.target.value = "".concat(val);
+                    ev.target.value = `${val}`;
                 else {
                     if (volume % 1 === 0)
                         newValue = Math.round(newValue);
@@ -97,28 +85,28 @@ var NumberPicker = function (_a) {
                     if (min !== undefined && newValue < min) {
                         setValue(min);
                         if (inputRef.current)
-                            inputRef.current.value = "".concat(min);
+                            inputRef.current.value = `${min}`;
                         if (onChange)
                             onChange(min);
                     }
                     else if (max !== undefined && newValue > max) {
                         setValue(max);
                         if (inputRef.current)
-                            inputRef.current.value = "".concat(max);
+                            inputRef.current.value = `${max}`;
                         if (onChange)
                             onChange(max);
                     }
                     else {
                         setValue(newValue);
                         if (inputRef.current)
-                            inputRef.current.value = "".concat(newValue);
+                            inputRef.current.value = `${newValue}`;
                         if (onChange)
                             onChange(newValue);
                     }
                 }
             } }),
-        react_1.default.createElement("div", { className: "row", onClick: function () {
-                var newValue = val + volume;
+        react_1.default.createElement("div", { className: "row", onClick: () => {
+                let newValue = val + volume;
                 if (max === undefined || newValue <= max) {
                     if (volume % 1 === 0)
                         newValue = Math.round(newValue);
@@ -126,7 +114,7 @@ var NumberPicker = function (_a) {
                         newValue = parseFloat(newValue.toFixed(1));
                     setValue(newValue);
                     if (inputRef.current)
-                        inputRef.current.value = "".concat(newValue);
+                        inputRef.current.value = `${newValue}`;
                     if (onChange)
                         onChange(newValue);
                 }

package/dist/component/pagination/pagination.js

@@ -37,21 +37,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Pagination = Pagination;
-var react_1 = __importStar(require("react"));
-var react_paginate_1 = __importDefault(require("react-paginate"));
-var pagination_module_css_1 = __importDefault(require("./pagination.module.css"));
-var select1_1 = require("../select1/select1");
-var text_1 = require("../text/text");
-var text_field_1 = require("../text-field/text-field");
-var winicon_1 = require("../wini-icon/winicon");
-var react_i18next_1 = require("react-i18next");
-function Pagination(_a) {
-    var id = _a.id, currentPage = _a.currentPage, itemPerPage = _a.itemPerPage, totalItem = _a.totalItem, onChangePage = _a.onChangePage, _b = _a.hidePageSize, hidePageSize = _b === void 0 ? false : _b, _c = _a.hideGoToPage, hideGoToPage = _c === void 0 ? false : _c, style = _a.style;
-    var goToPageRef = (0, react_1.useRef)(null);
-    var t = (0, react_i18next_1.useTranslation)().t;
-    (0, react_1.useEffect)(function () {
+const react_1 = __importStar(require("react"));
+const react_paginate_1 = __importDefault(require("react-paginate"));
+const pagination_module_css_1 = __importDefault(require("./pagination.module.css"));
+const select1_1 = require("../select1/select1");
+const text_1 = require("../text/text");
+const text_field_1 = require("../text-field/text-field");
+const winicon_1 = require("../wini-icon/winicon");
+const react_i18next_1 = require("react-i18next");
+function Pagination({ id, currentPage, itemPerPage, totalItem, onChangePage, hidePageSize = false, hideGoToPage = false, style }) {
+    const goToPageRef = (0, react_1.useRef)(null);
+    const { t } = (0, react_i18next_1.useTranslation)();
+    (0, react_1.useEffect)(() => {
         if (goToPageRef.current) {
-            var _inputPage = goToPageRef.current.getInput();
+            const _inputPage = goToPageRef.current.getInput();
             if (_inputPage)
                 _inputPage.value = currentPage.toString();
         }
@@ -61,26 +60,24 @@ function Pagination(_a) {
         return react_1.default.createElement("div", null);
     }
     else if (totalItem > 0) {
-        return react_1.default.createElement("div", { id: id, className: "".concat(pagination_module_css_1.default['custom-pagination'], " row"), style: style },
+        return react_1.default.createElement("div", { id: id, className: `${pagination_module_css_1.default['custom-pagination']} row`, style: style },
             hidePageSize ? null : react_1.default.createElement("div", { className: "row", style: { gap: '0.8rem' } },
-                react_1.default.createElement(select1_1.Select1, { readOnly: true, placeholder: itemPerPage.toString(), options: [10, 20, 50, 80, 100, 150, 200].map(function (item, _) { return { id: item, name: item }; }), style: { borderRadius: '0.4rem', width: '5.6rem', padding: '0 0.8rem', height: '2.4rem' }, onChange: function (ev) {
+                react_1.default.createElement(select1_1.Select1, { readOnly: true, placeholder: itemPerPage.toString(), options: [10, 20, 50, 80, 100, 150, 200].map((item, _) => { return { id: item, name: item }; }), style: { borderRadius: '0.4rem', width: '5.6rem', padding: '0 0.8rem', height: '2.4rem' }, onChange: (ev) => {
                         onChangePage(currentPage, isNaN(parseInt(ev.id)) ? itemPerPage : parseInt(ev.id));
                     } }),
                 react_1.default.createElement(text_1.Text, { className: "body-3" }, t("ofItems", { totalItem: totalItem }))),
             react_1.default.createElement("div", { style: { flex: 1 } }),
-            react_1.default.createElement(react_paginate_1.default, { onPageChange: function (ev) {
+            react_1.default.createElement(react_paginate_1.default, { onPageChange: (ev) => {
                     onChangePage(ev.selected + 1, itemPerPage);
-                }, forcePage: currentPage - 1, breakClassName: "row button-text-3", breakLabel: "...", pageCount: Math.ceil(totalItem / itemPerPage), previousClassName: "row", previousLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: "1.4rem" }), nextClassName: "row", nextLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: "1.4rem" }), containerClassName: "".concat(pagination_module_css_1.default['pagination'], " row"), pageClassName: "row button-text-3", activeClassName: pagination_module_css_1.default['active'], hrefBuilder: function (pageIndex) {
-                    return pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? "/page/".concat(pageIndex) : '#';
-                }, renderOnZeroPageCount: null }),
+                }, forcePage: currentPage - 1, breakClassName: "row button-text-3", breakLabel: "...", pageCount: Math.ceil(totalItem / itemPerPage), previousClassName: "row", previousLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/left-arrow", size: "1.4rem" }), nextClassName: "row", nextLabel: react_1.default.createElement(winicon_1.Winicon, { src: "fill/arrows/right-arrow", size: "1.4rem" }), containerClassName: `${pagination_module_css_1.default['pagination']} row`, pageClassName: "row button-text-3", activeClassName: pagination_module_css_1.default['active'], hrefBuilder: (pageIndex) => pageIndex >= 1 && pageIndex <= Math.ceil(totalItem / itemPerPage) ? `/page/${pageIndex}` : '#', renderOnZeroPageCount: null }),
             hideGoToPage ? null : react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("div", { style: { height: '1.6rem', backgroundColor: "var(--neutral-bolder-border-color)", width: 1 } }),
                 react_1.default.createElement(text_1.Text, { className: "label-3" },
                     t("go"),
                     " ",
                     t("page").toLowerCase()),
-                react_1.default.createElement(text_field_1.TextField, { ref: goToPageRef, style: { width: '4.8rem', textAlign: "center", padding: 0, height: '2.4rem', borderRadius: '0.4rem' }, className: "body-3", type: "number", onBlur: function (ev) {
-                        var _tmp = ev.target.value.trim().length ? parseInt(ev.target.value.trim()) : undefined;
+                react_1.default.createElement(text_field_1.TextField, { ref: goToPageRef, style: { width: '4.8rem', textAlign: "center", padding: 0, height: '2.4rem', borderRadius: '0.4rem' }, className: "body-3", type: "number", onBlur: (ev) => {
+                        const _tmp = ev.target.value.trim().length ? parseInt(ev.target.value.trim()) : undefined;
                         if (_tmp && !isNaN(_tmp) && _tmp > 0 && _tmp <= Math.ceil(totalItem / itemPerPage)) {
                             onChangePage(_tmp, itemPerPage);
                         }

package/dist/component/popup/popup.d.ts

@@ -8,6 +8,7 @@ interface PopupState {
     footer?: ReactNode;
     clickOverlayClosePopup?: boolean;
     style?: CSSProperties;
+    className?: string;
     hideButtonClose?: boolean;
 }
 export declare const showPopup: (props: {
@@ -18,6 +19,7 @@ export declare const showPopup: (props: {
     footer?: ReactNode;
     clickOverlayClosePopup?: boolean;
     style?: CSSProperties;
+    className?: string;
     hideButtonClose?: boolean;
 }) => void;
 export declare const closePopup: (ref: React.RefObject<Popup>) => void;
@@ -27,7 +29,6 @@ export declare class Popup extends React.Component<Object, PopupState> {
     state: Readonly<PopupState>;
     onOpen(data: PopupState): void;
     onClose(): void;
-    componentDidUpdate(prevProps: Readonly<Object>, prevState: Readonly<PopupState>): void;
     render(): React.JSX.Element;
 }
 export declare function PopupOverlay({ children, onClose, className, style, onOpen }: {

package/dist/component/popup/popup.js

@@ -1,30 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -61,9 +35,9 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popup = exports.closePopup = exports.showPopup = void 0;
 exports.PopupOverlay = PopupOverlay;
-var react_1 = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 require("./popup.css");
-var showPopup = function (props) {
+const showPopup = (props) => {
     var _a, _b;
     (_b = (_a = props.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.onOpen({
         heading: props.heading,
@@ -72,81 +46,81 @@ var showPopup = function (props) {
         footer: props.footer,
         clickOverlayClosePopup: props.clickOverlayClosePopup,
         style: props.style,
+        className: props.className,
         hideButtonClose: props.hideButtonClose
     });
 };
 exports.showPopup = showPopup;
-var closePopup = function (ref) {
+const closePopup = (ref) => {
     ref.current.onClose();
 };
 exports.closePopup = closePopup;
-var Popup = /** @class */ (function (_super) {
-    __extends(Popup, _super);
-    function Popup(props) {
-        var _this = _super.call(this, props) || this;
-        _this.ref = (0, react_1.createRef)();
-        _this.state = {
+class Popup extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.ref = (0, react_1.createRef)();
+        this.state = {
             open: false,
         };
-        return _this;
     }
-    Popup.prototype.onOpen = function (data) {
-        this.setState(__assign({ open: true }, data));
-    };
-    Popup.prototype.onClose = function () {
+    onOpen(data) {
+        this.setState(Object.assign({ open: true }, data));
+    }
+    onClose() {
         this.setState({ open: false });
-    };
-    Popup.prototype.componentDidUpdate = function (prevProps, prevState) {
-        if (prevState.open !== this.state.open && this.state.open && this.state.style) {
-        }
-    };
-    Popup.prototype.render = function () {
-        var _this = this;
-        var _a;
+    }
+    render() {
+        var _a, _b;
         return (react_1.default.createElement(react_1.default.Fragment, null, this.state.open &&
-            react_1.default.createElement(PopupOverlay, { className: this.state.clickOverlayClosePopup ? 'hidden-overlay' : '', onClose: this.state.clickOverlayClosePopup ? function () { _this.onClose(); } : undefined }, (_a = this.state.content) !== null && _a !== void 0 ? _a : react_1.default.createElement("div", { ref: this.ref, className: 'popup-container col', onClick: function (e) { return e.stopPropagation(); }, style: this.state.style },
+            react_1.default.createElement(PopupOverlay, { className: this.state.clickOverlayClosePopup ? 'hidden-overlay' : '', onClose: this.state.clickOverlayClosePopup ? () => { this.onClose(); } : undefined }, (_a = this.state.content) !== null && _a !== void 0 ? _a : react_1.default.createElement("div", { ref: this.ref, className: `popup-container col ${(_b = this.state.className) !== null && _b !== void 0 ? _b : ""}`, onClick: e => e.stopPropagation(), style: this.state.style },
                 this.state.heading,
                 this.state.body,
                 this.state.footer,
-                this.state.hideButtonClose ? null : react_1.default.createElement("button", { type: 'button', onClick: function () { return _this.onClose(); }, className: 'popup-close-btn row' },
+                this.state.hideButtonClose ? null : react_1.default.createElement("button", { type: 'button', onClick: () => this.onClose(), className: 'popup-close-btn row' },
                     react_1.default.createElement("svg", { width: '100%', height: '100%', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: { width: '2rem', height: '2rem' } },
                         react_1.default.createElement("path", { fillRule: 'evenodd', clipRule: 'evenodd', d: 'M16.4223 4.7559C16.7477 4.43047 16.7477 3.90283 16.4223 3.57739C16.0968 3.25195 15.5692 3.25195 15.2438 3.57739L9.99967 8.82147L4.7556 3.57739C4.43016 3.25195 3.90252 3.25195 3.57709 3.57739C3.25165 3.90283 3.25165 4.43047 3.57709 4.7559L8.82116 9.99998L3.57709 15.2441C3.25165 15.5695 3.25165 16.0971 3.57709 16.4226C3.90252 16.748 4.43016 16.748 4.7556 16.4226L9.99967 11.1785L15.2438 16.4226C15.5692 16.748 16.0968 16.748 16.4223 16.4226C16.7477 16.0971 16.7477 15.5695 16.4223 15.2441L11.1782 9.99998L16.4223 4.7559Z', fill: '#00204D', fillOpacity: 0.6 })))))));
-    };
-    return Popup;
-}(react_1.default.Component));
+    }
+}
 exports.Popup = Popup;
-function PopupOverlay(_a) {
-    var children = _a.children, onClose = _a.onClose, className = _a.className, style = _a.style, onOpen = _a.onOpen;
-    var overlayRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(function () {
+function PopupOverlay({ children, onClose, className, style, onOpen }) {
+    const overlayRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
         if (overlayRef.current && onClose) {
-            var onClickDropDown_1 = function (ev) {
+            const onClickDropDown = (ev) => {
                 if (ev.target !== overlayRef.current && !overlayRef.current.contains(ev.target))
                     onClose(ev);
             };
-            window.document.body.addEventListener("mousedown", onClickDropDown_1);
-            return function () {
-                window.document.body.removeEventListener("mousedown", onClickDropDown_1);
+            window.document.body.addEventListener("mousedown", onClickDropDown);
+            return () => {
+                window.document.body.removeEventListener("mousedown", onClickDropDown);
             };
         }
     }, [overlayRef]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (overlayRef.current && onOpen)
             onOpen(overlayRef.current);
     }, [overlayRef, onOpen]);
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (overlayRef.current && overlayRef.current.firstChild) {
-            var popupContent = overlayRef.current.firstChild;
-            var rect = popupContent.getBoundingClientRect();
-            if (rect.x < 0)
+            const popupContent = overlayRef.current.firstChild;
+            const rect = popupContent.getBoundingClientRect();
+            if (rect.x < 0) {
                 popupContent.style.left = "0px";
-            else if (rect.right > document.body.offsetWidth)
+                popupContent.style.right = "unset";
+            }
+            else if (rect.right > document.body.offsetWidth) {
                 popupContent.style.right = "0px";
-            if (rect.y < 0)
+                popupContent.style.left = "unset";
+            }
+            if (rect.y < 0) {
                 popupContent.style.top = "0px";
-            else if (rect.bottom > document.body.offsetHeight)
+                popupContent.style.bottom = "unset";
+            }
+            else if (rect.bottom > document.body.offsetHeight) {
                 popupContent.style.bottom = "0px";
+                popupContent.style.top = "unset";
+            }
         }
     }, [overlayRef]);
-    return react_1.default.createElement("div", { ref: overlayRef, className: "popup-overlay ".concat(className !== null && className !== void 0 ? className : ""), style: style }, children);
+    return react_1.default.createElement("div", { ref: overlayRef, className: `popup-overlay ${className !== null && className !== void 0 ? className : ""}`, style: style }, children);
 }

package/dist/component/progress-bar/progress-bar.js

@@ -1,34 +1,22 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressBar = ProgressBar;
-var react_1 = require("react");
-var progress_bar_module_css_1 = __importDefault(require("./progress-bar.module.css"));
-var react_2 = __importDefault(require("react"));
-var index_1 = require("../../index");
-function ProgressBar(_a) {
-    var id = _a.id, _b = _a.status, status = _b === void 0 ? index_1.ComponentStatus.INFOR : _b, _c = _a.percent, percent = _c === void 0 ? 100 : _c, titleText = _a.titleText, title = _a.title, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, _e = _a.progressBarOnly, progressBarOnly = _e === void 0 ? false : _e, _f = _a.fullColor, fullColor = _f === void 0 ? 'var(--neutral-main-background-color)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--primary-main-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
-    var _h = (0, react_1.useState)(true), openDetails = _h[0], setOpenDetails = _h[1];
-    return react_2.default.createElement("div", { id: id, className: "col ".concat(progress_bar_module_css_1.default["progress-bar-container"]), style: style ? __assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
-        (hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: "row ".concat(progress_bar_module_css_1.default["progress-bar-title"]) },
+const react_1 = require("react");
+const progress_bar_module_css_1 = __importDefault(require("./progress-bar.module.css"));
+const react_2 = __importDefault(require("react"));
+const index_1 = require("../../index");
+function ProgressBar({ id, status = index_1.ComponentStatus.INFOR, percent = 100, titleText, title, hideTitle = false, progressBarOnly = false, fullColor = 'var(--neutral-main-background-color)', percentColor = 'var(--primary-main-color)', style, progressBarStyle }) {
+    const [openDetails, setOpenDetails] = (0, react_1.useState)(true);
+    return react_2.default.createElement("div", { id: id, className: `col ${progress_bar_module_css_1.default["progress-bar-container"]}`, style: style ? Object.assign({ padding: progressBarOnly ? '0' : '1.6rem 2.4rem' }, style) : { padding: progressBarOnly ? '0' : '1.6rem 2.4rem' } },
+        (hideTitle || progressBarOnly) ? null : (title !== null && title !== void 0 ? title : react_2.default.createElement("div", { className: `row ${progress_bar_module_css_1.default["progress-bar-title"]}` },
             react_2.default.createElement("div", { className: "heading-8" }, titleText),
-            react_2.default.createElement(index_1.Winicon, { src: openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow", onClick: function () { setOpenDetails(!openDetails); } }))),
-        openDetails ? react_2.default.createElement("div", { className: "row ".concat(progress_bar_module_css_1.default["progress-bar-tile"]) },
-            react_2.default.createElement("div", { className: progress_bar_module_css_1.default["progress-bar-value"], style: __assign({ '--percent-color': percentColor, '--full-color': fullColor, '--percent': "".concat(percent, "%") }, (progressBarStyle !== null && progressBarStyle !== void 0 ? progressBarStyle : {})) }),
-            progressBarOnly || status === index_1.ComponentStatus.INFOR ? null : react_2.default.createElement("div", { className: "".concat(progress_bar_module_css_1.default["status-icon"]) }, (0, index_1.getStatusIcon)(status)),
+            react_2.default.createElement(index_1.Winicon, { src: openDetails ? "fill/arrows/down-arrow" : "fill/arrows/up-arrow", onClick: () => { setOpenDetails(!openDetails); } }))),
+        openDetails ? react_2.default.createElement("div", { className: `row ${progress_bar_module_css_1.default["progress-bar-tile"]}` },
+            react_2.default.createElement("div", { className: progress_bar_module_css_1.default["progress-bar-value"], style: Object.assign({ '--percent-color': percentColor, '--full-color': fullColor, '--percent': `${percent}%` }, (progressBarStyle !== null && progressBarStyle !== void 0 ? progressBarStyle : {})) }),
+            progressBarOnly || status === index_1.ComponentStatus.INFOR ? null : react_2.default.createElement("div", { className: `${progress_bar_module_css_1.default["status-icon"]}` }, (0, index_1.getStatusIcon)(status)),
             progressBarOnly ? null : react_2.default.createElement("div", { className: 'label-4' },
                 percent,
                 "/100")) : null);

package/dist/component/progress-circle/progress-circle.js

@@ -1,30 +1,19 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressCircle = ProgressCircle;
 require("./progress-circle.css");
-var react_1 = __importDefault(require("react"));
+const react_1 = __importDefault(require("react"));
 function ProgressCircle(props) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var radius = 30 - ((_a = props.strokeWidth) !== null && _a !== void 0 ? _a : 4);
-    var diameter = Math.PI * 2 * radius;
-    var strokeOffset = (1 - (((_b = props.percent) !== null && _b !== void 0 ? _b : 0) / 100)) * diameter;
-    return react_1.default.createElement("svg", { id: props.id, width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: __assign({ width: '6rem', height: '6rem' }, ((_c = props.style) !== null && _c !== void 0 ? _c : {})) },
-        react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: "none", stroke: (_d = props.strokeColor) !== null && _d !== void 0 ? _d : "var(--neutral-main-background-color)", strokeWidth: (_e = props.strokeWidth) !== null && _e !== void 0 ? _e : '4px', } }),
-        react_1.default.createElement("path", { d: "M 30,30 m 0,-".concat(radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,").concat(2 * radius, " a ").concat(radius, ",").concat(radius, " 0 1 1 0,-").concat(2 * radius), style: { fill: (_f = props.fillColor) !== null && _f !== void 0 ? _f : "none", stroke: (_g = props.percentColor) !== null && _g !== void 0 ? _g : "var(--primary-main-color)", strokeWidth: (_h = props.strokeWidth) !== null && _h !== void 0 ? _h : '4px', strokeLinecap: 'round', strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"), strokeDashoffset: "".concat(strokeOffset, "px") } }),
-        react_1.default.createElement("text", { x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", fontSize: "1.6rem", fontWeight: '600', style: __assign({ fill: "var(neutral-text-title-color)" }, ((_j = props.textStyle) !== null && _j !== void 0 ? _j : {})) }, (_k = props.percent) !== null && _k !== void 0 ? _k : 0,
+    const radius = 30 - ((_a = props.strokeWidth) !== null && _a !== void 0 ? _a : 4);
+    const diameter = Math.PI * 2 * radius;
+    const strokeOffset = (1 - (((_b = props.percent) !== null && _b !== void 0 ? _b : 0) / 100)) * diameter;
+    return react_1.default.createElement("svg", { id: props.id, width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: Object.assign({ width: '6rem', height: '6rem' }, ((_c = props.style) !== null && _c !== void 0 ? _c : {})) },
+        react_1.default.createElement("path", { d: `M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`, style: { fill: "none", stroke: (_d = props.strokeColor) !== null && _d !== void 0 ? _d : "var(--neutral-main-background-color)", strokeWidth: (_e = props.strokeWidth) !== null && _e !== void 0 ? _e : '4px', } }),
+        react_1.default.createElement("path", { d: `M 30,30 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${2 * radius} a ${radius},${radius} 0 1 1 0,-${2 * radius}`, style: { fill: (_f = props.fillColor) !== null && _f !== void 0 ? _f : "none", stroke: (_g = props.percentColor) !== null && _g !== void 0 ? _g : "var(--primary-main-color)", strokeWidth: (_h = props.strokeWidth) !== null && _h !== void 0 ? _h : '4px', strokeLinecap: 'round', strokeDasharray: `${diameter}px ${diameter}px`, strokeDashoffset: `${strokeOffset}px` } }),
+        react_1.default.createElement("text", { x: "50%", y: "50%", dy: ".3em", textAnchor: "middle", fontSize: "1.6rem", fontWeight: '600', style: Object.assign({ fill: "var(neutral-text-title-color)" }, ((_j = props.textStyle) !== null && _j !== void 0 ? _j : {})) }, (_k = props.percent) !== null && _k !== void 0 ? _k : 0,
             "%"));
 }

package/dist/component/radio-button/radio-button.js

@@ -1,48 +1,18 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButton = void 0;
-var react_1 = __importDefault(require("react"));
-var radio_button_module_css_1 = __importDefault(require("./radio-button.module.css"));
-var RadioButton = /** @class */ (function (_super) {
-    __extends(RadioButton, _super);
-    function RadioButton() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RadioButton.prototype.render = function () {
+const react_1 = __importDefault(require("react"));
+const radio_button_module_css_1 = __importDefault(require("./radio-button.module.css"));
+class RadioButton extends react_1.default.Component {
+    render() {
         var _a, _b, _c;
-        var convertStyle = {
+        let convertStyle = {
             '--off-color': (_a = this.props.offColor) !== null && _a !== void 0 ? _a : 'var(--neutral-bolder-border-color)',
             '--active-color': (_b = this.props.activeColor) !== null && _b !== void 0 ? _b : 'var(--primary-main-color)',
-            '--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '20px'
+            '--size': this.props.size ? (typeof this.props.size === 'number') ? `${this.props.size}px` : this.props.size : '20px'
         };
         if (this.props.style) {
             delete this.props.style.width;
@@ -51,14 +21,13 @@ var RadioButton = /** @class */ (function (_super) {
             delete this.props.style.height;
             delete this.props.style.minHeight;
             delete this.props.style.maxHeight;
-            convertStyle = __assign(__assign({}, this.props.style), convertStyle);
+            convertStyle = Object.assign(Object.assign({}, this.props.style), convertStyle);
         }
-        return react_1.default.createElement("label", { id: this.props.id, className: "row ".concat(radio_button_module_css_1.default['radio-btn-container'], " ").concat((_c = this.props.className) !== null && _c !== void 0 ? _c : ''), style: convertStyle },
+        return react_1.default.createElement("label", { id: this.props.id, className: `row ${radio_button_module_css_1.default['radio-btn-container']} ${(_c = this.props.className) !== null && _c !== void 0 ? _c : ''}`, style: convertStyle },
             this.props.register ?
-                react_1.default.createElement("input", __assign({}, this.props.register, { type: "radio", value: this.props.value, disabled: this.props.disabled })) :
+                react_1.default.createElement("input", Object.assign({}, this.props.register, { type: "radio", value: this.props.value, disabled: this.props.disabled })) :
                 react_1.default.createElement("input", { type: "radio", name: this.props.name, value: this.props.value, defaultChecked: this.props.defaultChecked, disabled: this.props.disabled, onChange: this.props.onChange }),
             react_1.default.createElement("span", { className: radio_button_module_css_1.default['checkmark'] }));
-    };
-    return RadioButton;
-}(react_1.default.Component));
+    }
+}
 exports.RadioButton = RadioButton;