wini-web-components 1.6.2 → 1.7.0

package/dist/component/calendar/calendar.js

@@ -106,13 +106,13 @@ var Calendar = /** @class */ (function (_super) {
                 var additionProps = {};
                 var selected = false;
                 if (dateNumber + 1 === exports.today.getDate() && _this.state.selectMonth === exports.today.getMonth() && _this.state.selectYear === exports.today.getFullYear()) {
-                    style = { borderColor: 'var(--infor-color)' };
+                    style = { borderColor: 'var(--infor-main-color)' };
                 }
                 if (!(0, exports.inRangeTime)(timeValue, exports.startDate, exports.endDate)) {
                     additionProps = { 'in-range': 'false' };
                 }
                 else if (!(0, exports.inRangeTime)(timeValue, (_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate, (_b = _this.props.max) !== null && _b !== void 0 ? _b : exports.endDate)) {
-                    style = __assign(__assign({}, style), { color: 'var(--disabled-font-color)', pointerEvents: 'none' });
+                    style = __assign(__assign({}, style), { color: 'var(--neutral-text-disabled-color)', pointerEvents: 'none' });
                 }
                 else if (_this.state.value.valueOf() === timeValue.valueOf()) {
                     additionProps = __assign({}, additionProps);
@@ -178,7 +178,7 @@ var Calendar = /** @class */ (function (_super) {
             var style = {};
             var selected = false;
             if (_this.state.selectYear === exports.today.getFullYear() && exports.today.getMonth() === i) {
-                style = { borderColor: 'var(--infor-color)' };
+                style = { borderColor: 'var(--infor-main-color)' };
             }
             if (!(0, exports.inRangeTime)(timeValue, exports.startDate, exports.endDate)) {
                 additionProps = { 'in-range': 'false' };
@@ -186,7 +186,7 @@ var Calendar = /** @class */ (function (_super) {
             else if (!(0, exports.inRangeTime)(new Date(_this.state.selectYear, _this.state.selectMonth), (_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate, (_b = _this.props.max) !== null && _b !== void 0 ? _b : exports.endDate)) {
                 if (_this.state.selectYear === ((_c = _this.state.selectDate) === null || _c === void 0 ? void 0 : _c.getFullYear()) && _this.state.selectDate.getMonth() === i) {
                     style = {
-                        color: 'var(--disabled-font-color)',
+                        color: 'var(--neutral-text-disabled-color)',
                         pointerEvents: 'none'
                     };
                 }
@@ -216,7 +216,7 @@ var Calendar = /** @class */ (function (_super) {
             var style = {};
             var selected = false;
             if (yearNumber === exports.today.getFullYear()) {
-                style = { borderColor: 'var(--infor-color)' };
+                style = { borderColor: 'var(--infor-main-color)' };
             }
             else if (yearNumber < (((_a = _this.props.min) !== null && _a !== void 0 ? _a : exports.startDate).getFullYear()) || yearNumber > (((_b = _this.props.max) !== null && _b !== void 0 ? _b : exports.endDate).getFullYear())) {
                 additionProps = { 'in-range': 'false' };

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

@@ -337,7 +337,7 @@ var DatePicker = /** @class */ (function (_super) {
                             }
                         }, footer: (this.props.pickerType === index_1.CalendarType.DATETIME || !this.props.hideButtonToday) && react_1.default.createElement("div", { className: 'row picker-popup-footer' },
                             this.props.pickerType === undefined || this.props.pickerType === index_1.CalendarType.DATE || this.props.pickerType === index_1.CalendarType.DATETIME ?
-                                react_1.default.createElement("button", { type: 'button', className: 'row button-text-3', style: { color: 'var(--infor-color)', width: 'fit-content' }, onClick: function () {
+                                react_1.default.createElement("button", { type: 'button', className: 'row button-text-3', style: { color: 'var(--infor-main-color)', width: 'fit-content' }, onClick: function () {
                                         var _a;
                                         var format = (_a = _this.props.formatDate) !== null && _a !== void 0 ? _a : (_this.props.pickerType === index_1.CalendarType.DATETIME ? 'dd/mm/yyyy hh:mm' : 'dd/mm/yyyy');
                                         _this.setState(__assign(__assign({}, _this.state), { isOpen: false, value: dateToString(calendar_1.today, format) }));

package/dist/component/input-multi-select/input-multi-select.js

@@ -280,8 +280,8 @@ var SelectMultiple = /** @class */ (function (_super) {
                     if (_this.state.value.length)
                         _this.setState(__assign(__assign({}, _this.state), { isOpen: true, value: [] }));
                 } },
-                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: "var(--neutral-text-color-subtitle)" } })) : react_1.default.createElement("div", { className: 'row', style: { display: (this.containerRef.current && this.containerRef.current.getBoundingClientRect().width >= 120) ? "flex" : "none" } },
-                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: this.state.isOpen ? free_solid_svg_icons_1.faChevronUp : free_solid_svg_icons_1.faChevronDown, style: { fontSize: '1.1rem', color: "var(--neutral-text-color-subtitle)" } })),
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: "var(--neutral-text-subtitle-color)" } })) : react_1.default.createElement("div", { className: 'row', style: { display: (this.containerRef.current && this.containerRef.current.getBoundingClientRect().width >= 120) ? "flex" : "none" } },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: this.state.isOpen ? free_solid_svg_icons_1.faChevronUp : free_solid_svg_icons_1.faChevronDown, style: { fontSize: '1.1rem', color: "var(--neutral-text-subtitle-color)" } })),
             this.state.isOpen &&
                 react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "select-multi-popup col ".concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
                         top: this.state.offset.y + this.state.offset.height + 2 + 'px',
@@ -305,7 +305,7 @@ var SelectMultiple = /** @class */ (function (_super) {
                                 _this.setState(__assign(__assign({}, _this.state), { value: newValue }));
                                 if (_this.props.onChange)
                                     _this.props.onChange(newValue);
-                            }, className: 'button-text-3', style: { color: _list.length ? 'var(--infor-color)' : '#00204D99', } }, _list.length && isSelectedAll ? 'Bỏ chọn tất cả' : 'Chọn tất cả');
+                            }, className: 'button-text-3', style: { color: _list.length ? 'var(--infor-main-color)' : '#00204D99', } }, _list.length && isSelectedAll ? 'Bỏ chọn tất cả' : 'Chọn tất cả');
                     })()),
                     react_1.default.createElement("div", { className: 'col select-body' },
                         ((_g = this.state.search) !== null && _g !== void 0 ? _g : this.state.options).filter(function (e) { return !e.parentId; }).map(function (item) { return _this.renderOptions(item); }),

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

@@ -22,7 +22,7 @@ var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
 var free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
 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-background-main)' : _f, _g = _a.percentColor, percentColor = _g === void 0 ? 'var(--infor-color)' : _g, style = _a.style, progressBarStyle = _a.progressBarStyle;
+    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(--infor-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: "progress-bar-container col", 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: "progress-bar-title row" },

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

@@ -24,7 +24,7 @@ function ProgressCircle(_a) {
     var strokeOffset = (1 - ((percent !== null && percent !== void 0 ? percent : 0) / 100)) * diameter;
     return react_1.default.createElement("svg", { id: id, width: "100%", height: "100%", viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: __assign({ width: 60, height: 60 }, (style !== null && style !== void 0 ? style : {})) },
         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: strokeColor !== null && strokeColor !== void 0 ? strokeColor : "#E6EAF0", strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : '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: fillColor !== null && fillColor !== void 0 ? fillColor : "none", stroke: percentColor !== null && percentColor !== void 0 ? percentColor : "var(--infor-color)", strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : '4px', strokeLinecap: 'round', strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"), strokeDashoffset: "".concat(strokeOffset, "px") } }),
+        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: fillColor !== null && fillColor !== void 0 ? fillColor : "none", stroke: percentColor !== null && percentColor !== void 0 ? percentColor : "var(--infor-main-color)", strokeWidth: strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : '4px', strokeLinecap: 'round', strokeDasharray: "".concat(diameter, "px ").concat(diameter, "px"), strokeDashoffset: "".concat(strokeOffset, "px") } }),
         react_1.default.createElement("text", { x: "50%", y: "50%", fill: "#00204D", dy: ".3em", textAnchor: "middle", fontSize: 16, fontWeight: '600', style: textStyle }, percent !== null && percent !== void 0 ? percent : 0,
             "%"));
 }

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

@@ -41,7 +41,7 @@ var RadioButton = /** @class */ (function (_super) {
         var _a, _b, _c;
         var convertStyle = {
             '--off-color': (_a = this.props.offColor) !== null && _a !== void 0 ? _a : '#ccd7e6',
-            '--active-color': (_b = this.props.activeColor) !== null && _b !== void 0 ? _b : 'var(--infor-color)',
+            '--active-color': (_b = this.props.activeColor) !== null && _b !== void 0 ? _b : 'var(--infor-main-color)',
             '--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '20px'
         };
         if (this.props.style) {

package/dist/component/select1/select1.js

@@ -207,7 +207,7 @@ var Select1 = /** @class */ (function (_super) {
             children = ((_a = this.state.search) !== null && _a !== void 0 ? _a : this.state.options).filter(function (e) { return e.parentId === item.id; });
         // 
         return react_1.default.createElement("div", { key: item.id, className: 'col', style: { width: '100%' } },
-            react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select-tile'], " row ").concat(item.disabled ? select1_module_css_1.default["disabled"] : ""), style: { paddingLeft: item.parentId ? '4.4rem' : undefined, backgroundColor: this.state.selected === item.id ? "var(--selected-background)" : undefined }, onClick: children.length ? function () {
+            react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select-tile'], " row ").concat(item.disabled ? select1_module_css_1.default["disabled"] : ""), style: { paddingLeft: item.parentId ? '4.4rem' : undefined, backgroundColor: this.state.selected === item.id ? "var(--neutral-selected-background-color)" : undefined }, onClick: children.length ? function () {
                     if (_this.state.search) {
                         _this.setState(__assign(__assign({}, _this.state), { search: _this.state.search.map(function (e) {
                                 if (e.id === item.id)
@@ -297,11 +297,11 @@ var Select1 = /** @class */ (function (_super) {
                     if (_this.state.value)
                         _this.setState(__assign(__assign({}, _this.state), { isOpen: true, value: undefined }));
                 } },
-                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: "var(--neutral-text-color-subtitle)" } })) : react_1.default.createElement("div", { ref: function (iconRef) {
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faXmarkCircle, style: { fontSize: '1.6rem', color: "var(--neutral-text-subtitle-color)" } })) : react_1.default.createElement("div", { ref: function (iconRef) {
                     if ((iconRef === null || iconRef === void 0 ? void 0 : iconRef.parentElement) && iconRef.parentElement.getBoundingClientRect().width < 120)
                         iconRef.style.display = "none";
                 }, className: 'row' },
-                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: this.state.isOpen ? free_solid_svg_icons_1.faChevronUp : free_solid_svg_icons_1.faChevronDown, style: { fontSize: '1.1rem', color: "var(--neutral-text-color-subtitle)" } })),
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: this.state.isOpen ? free_solid_svg_icons_1.faChevronUp : free_solid_svg_icons_1.faChevronDown, style: { fontSize: '1.1rem', color: "var(--neutral-text-subtitle-color)" } })),
             this.state.isOpen &&
                 react_dom_1.default.createPortal(react_1.default.createElement("div", { className: "".concat(select1_module_css_1.default['select1-popup'], " col ").concat((_e = this.props.popupClassName) !== null && _e !== void 0 ? _e : ""), style: (_f = this.state.style) !== null && _f !== void 0 ? _f : {
                         top: this.state.offset.y + this.state.offset.height + 2 + 'px',

package/dist/component/switch/switch.js

@@ -52,8 +52,8 @@ var Switch = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b, _c, _d;
         var propStyle = {
-            '--off-bg': (_a = this.props.offBackground) !== null && _a !== void 0 ? _a : 'var(--neutral-background-main)',
-            '--on-bg': (_b = this.props.onBackground) !== null && _b !== void 0 ? _b : 'var(--infor-color)',
+            '--off-bg': (_a = this.props.offBackground) !== null && _a !== void 0 ? _a : 'var(--neutral-main-background-color)',
+            '--on-bg': (_b = this.props.onBackground) !== null && _b !== void 0 ? _b : 'var(--infor-main-color)',
             '--dot-color': (_c = this.props.dotColor) !== null && _c !== void 0 ? _c : '#ffffff',
             '--size': this.props.size ? (typeof this.props.size === 'number') ? "".concat(this.props.size, "px") : this.props.size : '2rem'
         };

package/dist/component/tag/tag.d.ts

@@ -8,7 +8,7 @@ interface TagProps {
     disabled?: boolean;
     style?: CSSProperties;
     className?: string;
-    status: ComponentStatus;
+    status?: ComponentStatus;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 export declare class Tag extends React.Component<TagProps> {

package/dist/component/tag/tag.js

@@ -22,7 +22,6 @@ exports.Tag = void 0;
 var react_1 = __importDefault(require("react"));
 var text_1 = require("../text/text");
 var tag_module_css_1 = __importDefault(require("./tag.module.css"));
-var component_status_1 = require("../component-status");
 var Tag = /** @class */ (function (_super) {
     __extends(Tag, _super);
     function Tag() {
@@ -30,7 +29,7 @@ var Tag = /** @class */ (function (_super) {
     }
     Tag.prototype.render = function () {
         var _a, _b;
-        return react_1.default.createElement("div", { id: this.props.id, "tag-type": (_a = this.state) !== null && _a !== void 0 ? _a : component_status_1.ComponentStatus.INFOR, className: "".concat(tag_module_css_1.default['tag-container'], " row ").concat(this.props.onClick ? tag_module_css_1.default['type-button'] : '', " ").concat(this.props.disabled ? tag_module_css_1.default['disabled'] : "", " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : "button-text-2", " "), style: this.props.style, onClick: this.props.onClick },
+        return react_1.default.createElement("div", { id: this.props.id, "tag-type": (_a = this.state) !== null && _a !== void 0 ? _a : 'default', className: "".concat(tag_module_css_1.default['tag-container'], " row ").concat(this.props.onClick ? tag_module_css_1.default['type-button'] : '', " ").concat(this.props.disabled ? tag_module_css_1.default['disabled'] : "", " ").concat((_b = this.props.className) !== null && _b !== void 0 ? _b : "button-text-2", " "), style: this.props.style, onClick: this.props.onClick },
             this.props.prefix,
             react_1.default.createElement(text_1.Text, { maxLine: 1, className: tag_module_css_1.default['tag-label'] }, this.props.title),
             this.props.suffix);

package/dist/component/wini-icon/winicon.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { CSSProperties, ReactNode } from "react";
+interface WiniconProps {
+    svg: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    size?: number | string;
+    color?: string;
+}
+export default function Winicon({ svg, className, style, size, color }: WiniconProps): React.JSX.Element;
+export {};

package/dist/component/wini-icon/winicon.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+function Winicon(_a) {
+    var svg = _a.svg, className = _a.className, style = _a.style, size = _a.size, color = _a.color;
+    var modifiedSvg = react_1.default.cloneElement(svg, {
+        size: size,
+        fill: color, // Apply color to the fill attribute of the SVG
+    });
+    return react_1.default.createElement("div", { className: "wini-icon ".concat(className !== null && className !== void 0 ? className : ''), style: style }, modifiedSvg);
+}
+exports.default = Winicon;

package/dist/index.d.ts

@@ -25,5 +25,6 @@ import { ProgressCircle } from './component/progress-circle/progress-circle';
 import { CustomSlider } from './component/slider/slider';
 import { ToastContainer } from 'react-toastify';
 import { Button } from './component/button/button';
-export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, Switch, Popup, showPopup, closePopup, Dialog, showDialog, DialogAlignment, DatePicker, SelectMultiple, ProgressBar, Text, Pagination, Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems, TextField, RadioButton, TextArea, ImportFile, ToastMessage, InfiniteScroll, Rating, ProgressCircle, CustomSlider, ToastContainer, Button };
+import { Tag } from './component/tag/tag';
+export { Calendar, CalendarType, ComponentStatus, getStatusIcon, Checkbox, Select1, Switch, Popup, showPopup, closePopup, Dialog, showDialog, DialogAlignment, DatePicker, SelectMultiple, ProgressBar, Text, Pagination, Table, TbCell, TbHeader, TbBody, TbRow, CellAlignItems, TextField, RadioButton, TextArea, ImportFile, ToastMessage, InfiniteScroll, Rating, ProgressCircle, CustomSlider, ToastContainer, Button, Tag };
 export type { OptionsItem };